From 6abac988c70e7e3fd7ea35efb88d5760029dc2b5 Mon Sep 17 00:00:00 2001
From: sjl <1716605279@qq.com>
Date: Wed, 6 Nov 2024 20:31:07 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A2=AB=E6=A3=80=E8=AE=BE=E5=A4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/device/device.ts             |  38 +-
 frontend/src/api/device/interface/index.ts    |  97 ++---
 .../src/api/system/dictionary/dictPq/index.ts |   3 +-
 frontend/src/components/IpAddress/index.vue   | 360 ++++++++++++++++++
 .../machine/device/components/devicePopup.vue | 294 ++++++++++++++
 frontend/src/views/machine/device/index.vue   | 135 ++++---
 .../dictionary/dictPq/components/pqPopup.vue  |   4 +-
 .../views/system/dictionary/dictPq/index.vue  |   2 +-
 8 files changed, 812 insertions(+), 121 deletions(-)
 create mode 100644 frontend/src/components/IpAddress/index.vue
 create mode 100644 frontend/src/views/machine/device/components/devicePopup.vue

diff --git a/frontend/src/api/device/device.ts b/frontend/src/api/device/device.ts
index 4342109..c129d7d 100644
--- a/frontend/src/api/device/device.ts
+++ b/frontend/src/api/device/device.ts
@@ -1,18 +1,38 @@
-import { ResPage } from '@/api/interface'
-import { Device } from './interface'
+import type { Device } from './interface'
 import { ADMIN as rePrefix } from '@/api/config/serviceName'
 import http from '@/api'
 
 /**
  * @name 被检设备管理模块
  */
-// 获取检测脚本列表
-export const getDeviceList = (params: Device.ReqDeviceParams) => {
-   return http.post<ResPage<Device.ResDeviceList>>(`/RoleList_Post`, params)
-  // return http.post<ResPage<Role.ResRoleList>>(`${rePrefix}/device/list`, params)
+
+//获取被检设备
+export const getPqDevList = (params: Device.ReqPqDevParams) => {
+  return http.post(`/pqDev/list`, params)
 }
 
-export const getPlan_DeviceList = (params: Device.DeviceList) => {
-  //return http.post<ResPage<Device.ResDeviceList>>(`/RoleList_Post`, params)
- // return http.post<ResPage<Role.ResRoleList>>(`${rePrefix}/device/list`, params)
+//添加被检设备
+export const addPqDev = (params: Device.ResPqDev) => {
+  return http.post(`/pqDev/add`, params)
 }
+
+//编辑被检设备
+export const updatePqDev = (params: Device.ResPqDev) => {
+  return http.post(`/pqDev/update`, params)
+}
+
+//删除被检设备
+export const deletePqDev = (params: string[]) => {
+  return http.post(`/pqDev/delete`, params)
+}
+
+//导出被检设备
+export const exportPqDev=(params: Device.ReqPqDevParams)=>{
+  return http.download(`/pqDev/export`, params)
+}
+
+//导入被检设备
+export const importPqDev=(params: Device.ReqPqDevParams)=>{
+  return http.post(`/pqDev/import`, params)
+}
+
diff --git a/frontend/src/api/device/interface/index.ts b/frontend/src/api/device/interface/index.ts
index cba0c56..1b969e7 100644
--- a/frontend/src/api/device/interface/index.ts
+++ b/frontend/src/api/device/interface/index.ts
@@ -1,55 +1,62 @@
-import type { ReqPage } from '@/api/interface'
+import type { ReqPage,ResPage } from '@/api/interface'
 
 // 被检设备模块
 export namespace Device {
   
-    // 被检设备参数
-    export interface ReqDeviceParams extends ReqPage {
-        id: string;     //被检设备ID
-        deviceName: string; //检测设备名称
-        deviceType: string; //检测设备类型
-        deviceChannels: string;//设备通道数
-        PlanName: string;   //所属计划名称
-        deviceUn: string;   //设备额定电压
-        deviceIn: string;   //设备额定电流
-        deviceCompany: string;//设备厂家
-        deviceModel: string; //设备模式 模拟 数字 比对
-    }
+  /**
+   * 电能质量指标字典数据表格分页查询参数
+   */
+  export interface ReqPqDevParams extends ReqPage{
+    id: string; // 装置序号id 必填
+    devType?: string; // 设备名称
+    createTime?:string; //创建时间
+  }
 
-    // 被检设备列表
-    export interface ResDeviceList {
+    /**
+   * 被检设备新增、修改、根据id查询返回的对象
+   */
+    export interface ResPqDev {
         id: string;     //装置序号ID
         name: string; //设备名称
-        pattern?: string; //设备模式 模拟 数字 比对
-        dev_Type: string;//设备类型
-        dev_Chns: number;   //设备通道数
-        dev_Volt?: number;   //额定电压（V）
-        dev_Curr?: number;   //额定电流（A）
-        manufacturer?: string;//生产厂家
-        createDate?: string; //生产日期
-        createId?: string; //出厂编号
-        hardware_Version?: string; //固件版本
-        software_Version?: string; //软件版本
-        iP?: string; //IP地址
-        port?: number; //端口号
-        isEncryption?: string; //装置是否为加密版本
-        series?: string; //装置识别码（3ds加密）
-        dev_Key?: string; //装置秘钥（3ds加密）
-        sampleID?: string; //样品编号
-        arrived_Date?: string; //送样日期
-        city_Name?: string; //所属地市名称
-        gD_Name?: string; //所属供电公司名称
-        sub_Name?: string; //所属电站名称
-        check_State: string; //检测状态
-        check_Result: string; //检测结果
-        report_State: string; //报告状态
-        document_State: string; //归档状态
-        reCheck_Num: number; //复检次数
-        state?: number; //状态
-        create_By?: string; //创建用户
-        create_Time?: string; //创建时间
-        update_By?: string; //更新用户
-        update_Time?: string; //更新时间
+        pattern: string; //设备模式 模拟 数字 比对
+        devType: string;//设备类型
+        devChns: number;   //设备通道数
+        devVolt: number;   //额定电压（V）
+        devCurr: number;   //额定电流（A）
+        manufacturer: string;//生产厂家
+        createDate: string; //生产日期
+        createId: string; //出厂编号
+        hardwareVersion: string; //固件版本
+        softwareVersion: string; //软件版本
+        ip: string; //IP地址
+        port: number; //端口号
+        encryption: string; //装置是否为加密版本
+        series?: string| null; //装置识别码（3ds加密）
+        devKey?: string| null; //装置秘钥（3ds加密）
+        sampleID?: string| null; //样品编号
+        arrivedDate?: string| null; //送样日期
+        cityName?: string| null; //所属地市名称
+        gDName?: string| null; //所属供电公司名称
+        subName?: string| null; //所属电站名称
+        checkState?: number| null; //检测状态
+        checkResult?: number| null; //检测结果
+        reportState?: number| null; //报告状态
+        documentState?: number| null; //归档状态
+        reportPath?: string| null; //报告路径
+        qRCode?: string| null; //设备关键信息二维码
+        reCheckNum: number; //复检次数
+        state: number; //状态
+        createBy?: string| null; //创建用户
+        createTime?: string| null; //创建时间
+        updateBy?: string| null; //更新用户
+        updateTime?: string| null; //更新时间
         
     }
+
+      /**
+   * 被检设备表格查询分页返回的对象；
+   */
+  export interface ResPqDevPage extends ResPage<ResPqDev> {
+
+  }
   }
\ No newline at end of file
diff --git a/frontend/src/api/system/dictionary/dictPq/index.ts b/frontend/src/api/system/dictionary/dictPq/index.ts
index c57e6db..dd7cc55 100644
--- a/frontend/src/api/system/dictionary/dictPq/index.ts
+++ b/frontend/src/api/system/dictionary/dictPq/index.ts
@@ -19,4 +19,5 @@ export const updateDictPq = (params: Dict.ResDictPq) => {
 //删除字典类型
 export const deleteDictPq = (params: string[]) => {
     return http.post(`/dictPq/delete`, params)
-}
\ No newline at end of file
+}
+
diff --git a/frontend/src/components/IpAddress/index.vue b/frontend/src/components/IpAddress/index.vue
new file mode 100644
index 0000000..44d13bd
--- /dev/null
+++ b/frontend/src/components/IpAddress/index.vue
@@ -0,0 +1,360 @@
+<template>
+    <div :class="{ 'disabled': disabled }">
+      <ul class="ipAdress">
+        <li v-for="(item, index) in ipAddress" :key="index">
+          <input :ref="el => getInputRef(el, index)" v-model="item.value" type="text" class="ipInputClass"
+            :disabled="disabled" @input="checkIpVal(item)" @keyup="$event => turnIpPosition(item, index, $event)"
+            @blur="handleBlur" @mouseup="handleMouseUp(index)" />
+          <div></div>
+        </li>
+      </ul>
+    </div>
+  </template>
+  
+  <script lang="ts" setup name="routePage">
+  import { ref, watch } from 'vue'
+  
+  // 接收来自上层的数据
+  const props = defineProps(['value', 'disabled'])
+  
+  // 更新数据
+  const $emits = defineEmits(['update:value', 'blur'])
+  
+  // 存储四个ref
+  const ipInputRefs = ref<HTMLInputElement[]>([]);
+  // 存储左右标识位
+  let markFlag = ref([
+    {
+      left: false,
+      right: false
+    },
+    {
+      left: false,
+      right: false
+    },
+    {
+      left: false,
+      right: false
+    },
+    {
+      left: false,
+      right: false
+    }
+  ])
+  
+  // 更新标识
+  let flag = ref(false)
+  
+  // 鼠标点击
+  const handleMouseUp = (index: any) => {
+    let input = ipInputRefs.value[index]
+    // 全为false
+    markFlag.value.forEach(item => {
+      item.left = false
+      item.right = false
+    })
+    // 证明在开始阶段
+    if (input.selectionStart == 0) {
+      console.log('鼠标设置了,', index)
+      markFlag.value[index].left = true
+    } else {
+      markFlag.value[index].left = false
+    }
+    // 证明在结束
+    if (input.selectionStart == (input.value || '').length) {
+      markFlag.value[index].right = true
+    } else {
+      markFlag.value[index].right = false
+    }
+  }
+  
+  // 获取四个input refs
+  const getInputRef = (el: any, index: number) => {
+    if (el) {
+      ipInputRefs.value[index] = el;
+    }
+  };
+  // 声明IP存储类型
+  interface IpType {
+    value: string
+  }
+  // 定义要显示的四个ip
+  let ipAddress = ref<IpType[]>([
+    {
+      value: "",
+    },
+    {
+      value: "",
+    },
+    {
+      value: "",
+    },
+    {
+      value: "",
+    },
+  ])
+  // 初始化显示数据
+  const initShowData = () => {
+    // 判断不合理行为
+    if (props.value === '') {
+      ipAddress.value.forEach(item => {
+        item.value = ''
+      })
+    } else {
+      let ipList = props.value.split('.')
+      ipAddress.value.forEach((item: IpType, index: number) => {
+        item.value = ipList[index]
+      })
+    }
+  }
+  
+  // 检查ip输入
+  const checkIpVal = (item: any) => {
+    let val = item.value;
+    console.log(val, '===========')
+    // 处理非数字
+    val = val.toString().replace(/[^0-9]/g, "");
+    val = parseInt(val, 10);
+    if (isNaN(val)) {
+      val = "";
+    } else {
+      val = val < 0 ? 0 : val;
+      if (val > 255) {
+        // 判断val是几位数
+        let num = (val + '').length
+        if (num > 3) {
+          val = parseInt((val + '').substring(0, 3))
+        } else {
+          val = 255
+        }
+      }
+    }
+    item.value = val;
+    console.log(item.value, '=========')
+  }
+  
+  // 判断光标左右移动位置
+  const turnIpPosition = (item: IpType, index: number, event: any) => {
+    let e = event || window.event;
+    if (e.keyCode === 37) {
+      // 左箭头向左跳转，左一不做任何措施
+      if (index == 0) {
+        return
+      }
+      if (e.currentTarget.selectionStart === 0) {
+        if (markFlag.value[index].left) {
+          handleFocus(index - 1, 'toLeft')
+          markFlag.value[index].left = false
+          markFlag.value[index].right = false
+        } else {
+          console.log('左键设置了,', index)
+          markFlag.value[index].left = true
+        }
+      } else {
+        markFlag.value[index].right = false
+        markFlag.value[index].left = false
+      }
+    } else if (e.keyCode == 39) {
+      // 右箭头向右跳转，右一不做任何措施
+      markFlag.value[index].left = false
+      let start = e.currentTarget.selectionStart
+      if (index != 3 && start === item.value.toString().length) {
+        if (markFlag.value[index].right) {
+          handleFocus(index + 1, 'toRight')
+          markFlag.value[index].left = false
+          markFlag.value[index].right = false
+        } else {
+          markFlag.value[index].right = true
+        }
+      } else {
+        markFlag.value[index].right = false
+      }
+    } else if (e.keyCode === 8) {
+      console.log('删除键把当前数据删除完毕后会跳转到前一个input')
+      // 删除键把当前数据删除完毕后会跳转到前一个input，左一不做任何处理
+      if (index !== 0 && e.currentTarget.selectionStart === 0) {
+        if (markFlag.value[index].left) {
+          ipInputRefs.value[index - 1].focus();
+          markFlag.value[index].left = false
+        } else {
+          console.log('左键设置了删除,', index)
+          markFlag.value[index].left = true
+        }
+      }
+    } else if (e.keyCode === 13 || e.keyCode === 32) {
+      console.log('回车键、空格键、冒号均向右跳转，右一不做任何措施')
+      // 回车键、空格键、冒号均向右跳转，右一不做任何措施
+      if (index !== 3) {
+        ipInputRefs.value[index + 1].focus();
+      }
+    }
+    else if (e.keyCode === 110 || e.keyCode === 190) {
+      // 点 . 向右跳转，右一不做任何措施
+      console.log('点击')
+      if (item.value == '') {
+        return
+      }
+      if (index !== 3) {
+        ipInputRefs.value[index + 1].select();
+      }
+    }
+    else if (item.value.toString().length === 3) {
+      console.log('满3位，光标自动向下一个文本框')
+      // 满3位，光标自动向下一个文本框.
+      if (index !== 3) {
+        ipInputRefs.value[index + 1].setSelectionRange(0, 0)
+      }
+    }
+  }
+  
+  // 处理聚焦
+  const handleFocus = (index: number, direction: string) => {
+    // 设置当前位置为选中状态 toRight:从左边来的
+    let input = ipInputRefs.value[index]
+    input.focus()
+    let value = input.value
+    // null 左右全部设置为true,可以直接跳转
+    if ((value || '').length == 0) {
+      markFlag.value[index].right = true
+      markFlag.value[index].left = true
+    } else {
+      if (direction == 'toRight') {
+        // 可以直接跳回
+        console.log('右键focus,', index)
+        markFlag.value[index].left = true
+        // 设置光标为左边第一个
+        ipInputRefs.value[index].setSelectionRange(0, 0)
+        // 设置上一个的右边标识为false
+        markFlag.value[index - 1] && (markFlag.value[index - 1].right = false)
+      } else {
+        // 直接跳回
+        markFlag.value[index].right = true
+        // 设置后一个侧边为false
+        markFlag.value[index + 1] && (markFlag.value[index + 1].left = false)
+      }
+    }
+  }
+  
+  
+  // 格式化补零方法
+  const formatter = (val: string) => {
+    let value = val.toString();
+    if (value.length === 2) {
+      value = "0" + value;
+    } else if (value.length === 1) {
+      value = "00" + value;
+    } else if (value.length === 0) {
+      value = "000";
+    }
+    return value;
+  }
+  
+  // 监听数据变化,并初始化显示四个数据
+  watch(() => props.value, () => {
+    console.log('变化了~', props.value);
+    if(flag.value){
+  
+    }else{
+      initShowData()
+    }
+  }, {
+    immediate: true
+  })
+  
+  // 监听ipAddress数据变化
+  watch(ipAddress, () => {
+    let str = "";
+    for (const i in ipAddress.value) {
+      str += formatter(ipAddress.value[i].value);
+    }
+    if (str === "000000000000") {
+      str = "";
+    } else {
+      str = ipAddress.value.map(item => {
+        if (item.value !== null) {
+          return item.value + ''
+        } else {
+          return '0'
+        }
+      }).join(".")
+    }
+    $emits('update:value', str)
+    flag.value = true
+    setTimeout(() => {
+      flag.value = false
+    }, 100)
+  }, {
+    deep: true
+  })
+  
+  const handleBlur = () => {
+    $emits('blur')
+  }
+  
+  </script>
+  <style lang="scss" scoped>
+  .disabled {
+    cursor: not-allowed;
+    background-color: #f5f7fa;
+  
+    .ipAdress {
+      li {
+        .ipInputClass {
+          color: #c3c4cc;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+  
+  .ipAdress {
+    display: flex;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    line-height: 40px;
+    width: 120%;
+    height: 35px;
+    padding-inline-start: 0px;
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box;
+    margin: 0;
+  }
+  
+  .ipAdress li {
+    position: relative;
+    margin: 0;
+    list-style-type: none;
+  }
+  
+  .ipInputClass {
+    border: none;
+    width: 50px;
+    height: 23px;
+    text-align: center;
+    color: #606266;
+    background: transparent;
+  }
+  
+  .ipAdress li div {
+    position: absolute;
+    bottom: 12px;
+    right: 0;
+    border-radius: 50%;
+    background: #b6b8bc;
+    width: 2px;
+    height: 2px;
+  }
+  
+  /*只需要3个div*/
+  .ipAdress li:last-child div {
+    display: none;
+  }
+  
+  /*取消掉默认的input focus状态*/
+  .ipAdress input:focus {
+    outline: none;
+  }
+  </style>
+  
+  
\ No newline at end of file
diff --git a/frontend/src/views/machine/device/components/devicePopup.vue b/frontend/src/views/machine/device/components/devicePopup.vue
new file mode 100644
index 0000000..04cba2c
--- /dev/null
+++ b/frontend/src/views/machine/device/components/devicePopup.vue
@@ -0,0 +1,294 @@
+<template>
+    <el-dialog  :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig">
+        <el-divider >设备台账信息</el-divider>    
+        <div class="form-grid">
+            <el-form :model='formContent' ref='dialogFormRef' :rules='rules' :disabled="false">
+                <el-row  :gutter="24" >
+                    <el-col :span="8">
+                        <el-form-item label="设备名称" prop="name">
+                            <el-input v-model='formContent.name' placeholder="请输入设备名称"/>
+                        </el-form-item>           
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label='设备类型'  prop='devType'>
+                            <el-select v-model="formContent.devType"  clearable placeholder="请选择设备类型">
+                            <el-option
+                            v-for="item in dictStore.getDictData('High_Cate')"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.code"
+                            />
+                        </el-select>
+                        </el-form-item>           
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="设备通道数" prop="devChns" placeholder="请输入设备通道">
+                            <el-input v-model="formContent.devChns" />
+                        </el-form-item>            
+                    </el-col>
+                </el-row>     
+                <el-row  :gutter="24" >
+                    <el-col :span="8">
+                        <el-form-item label="额定电压(V)" prop="devVolt">
+                            <el-input v-model='formContent.devVolt' placeholder="请输入额定电压"/>
+                        </el-form-item>           
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="额定电流(A)" prop="devCurr" placeholder="请输入额定电流">
+                            <el-input v-model="formContent.devCurr" />
+                        </el-form-item>            
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label='生产厂家'  prop='manufacturer'>
+                            <el-select v-model="formContent.manufacturer"  clearable placeholder="请选择生产厂家">
+                            <el-option
+                            v-for="item in dictStore.getDictData('High_Cate')"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.code"
+                            />
+                        </el-select>
+                        </el-form-item>           
+                    </el-col>
+                </el-row>     
+                <el-row  :gutter="24" >
+                    <el-col :span="8">
+                        <el-form-item label="生产日期" prop="createDate">
+                            <el-input v-model='formContent.createDate' placeholder="请输入生产日期"/>
+                        </el-form-item>           
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="出厂编号" prop="createId" placeholder="请输入出厂编号">
+                            <el-input v-model="formContent.createId" />
+                        </el-form-item>            
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="固件版本" prop="hardwareVersion">
+                            <el-input v-model="formContent.hardwareVersion" placeholder="请输入固件版本"/>
+                        </el-form-item>            
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="软件版本" prop="softwareVersion">
+                            <el-input v-model="formContent.softwareVersion" placeholder="请输入软件版本"/>
+                        </el-form-item>            
+                    </el-col>
+                </el-row>
+                <el-row  :gutter="24" >
+                    <el-col :span="8">
+                        <el-form-item label='通讯协议'  prop='devType'>
+                            <el-select v-model="formContent.devType"  clearable placeholder="请选择通讯协议">
+                            <el-option
+                            v-for="item in dictStore.getDictData('High_Cate')"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.code"
+                            />
+                        </el-select>
+                        </el-form-item>           
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="IP地址" prop="ip">
+                            <!-- <el-input v-model='formContent.ip'/> -->
+                            <abc v-model:value="formContent.ip"/>
+                           
+                        </el-form-item>           
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="端口号" prop="port" placeholder="请输入端口号">
+                            <el-input v-model="formContent.port" />
+                        </el-form-item>            
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label='是否加密'  prop='encryption'>
+                            <el-select v-model="formContent.encryption"  clearable placeholder="请选择是否加密">
+                            <el-option
+                            v-for="item in dictStore.getDictData('High_Cate')"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.code"
+                            />
+                        </el-select>
+                        </el-form-item>           
+                    </el-col>
+                </el-row>       
+                <el-row  :gutter="24" >
+                    <el-col :span="8">
+                        <el-form-item label='设备模式'  prop='pattern'>
+                            <el-input v-model='formContent.pattern' disabled/>
+                        </el-form-item>           
+                    </el-col>
+                </el-row> 
+                <el-row  :gutter="24" v-if="true">
+                    <el-col :span="8">
+                        <el-form-item label='样品编号'  prop='sampleID' clearable placeholder="请输入样品编号">
+                            <el-input v-model='formContent.sampleID' />
+                        </el-form-item>           
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label='送样日期'  prop='arrivedDate' clearable placeholder="请输入送样日期">
+                            <el-input v-model='formContent.arrivedDate' />
+                        </el-form-item>           
+                    </el-col>
+                </el-row>   
+            </el-form>            
+        </div>        
+       
+
+        <template #footer>
+            <div >
+                <el-button @click='close()'>取 消</el-button>
+                <el-button type="primary" @click='save()'>保存</el-button>
+            </div>
+        </template>
+    </el-dialog>
+
+
+</template>
+  <script setup lang='ts'>
+
+  import abc from '@/components/IpAddress/index.vue'
+  import { dialogBig } from '@/utils/elementBind'
+  import { type Device } from '@/api/device/interface'
+  import { ElMessage, type FormItemRule } from 'element-plus'
+  import { addPqDev, updatePqDev } from '@/api/device/device.ts'
+  import { computed, type Ref, ref } from 'vue';
+  import { useDictStore } from '@/stores/modules/dict'
+  import { CirclePlus, Delete } from '@element-plus/icons-vue'
+  import { el } from 'element-plus/es/locale';
+  const dictStore = useDictStore()
+  // 定义弹出组件元信息
+  const dialogFormRef = ref()
+
+  function useMetaInfo() {
+    const dialogVisible = ref(false)
+    const titleType = ref('add')
+    const formContent = ref<Device.ResPqDev>({
+      id: '',
+      name: '',
+      pattern:'模拟式',
+      devType:'',
+      devChns:0,
+      devVolt:0,
+      devCurr:0,
+      manufacturer: '',
+      createDate: '',
+      createId: '', 
+      hardwareVersion: '',
+      softwareVersion: '',
+      ip: '',
+      port: 0,
+      encryption: '',
+      reCheckNum:0,
+      state: 1,
+    })
+    return { dialogVisible, titleType, formContent }
+  }
+  
+  const { dialogVisible, titleType, formContent } = useMetaInfo()
+  // 清空formContent
+  const resetFormContent = () => {
+    formContent.value = {
+        id: '',
+        name: '',
+        pattern:'模拟式',
+        devType:'',
+        devChns:0,
+        devVolt:0,
+        devCurr:0,
+        manufacturer: '',
+        createDate: '',
+        createId: '', 
+        hardwareVersion: '',
+        softwareVersion: '',
+        ip: '',
+        port: 0,
+        encryption: '',
+        reCheckNum:0,
+        state: 1,
+    }
+  }
+  
+  let dialogTitle = computed(() => {
+    return titleType.value === 'add' ? '新增被检设备' : '编辑被检设备'
+  })
+  
+  // 定义表单校验规则
+  const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
+    devType: [{ required: true, message: '设备类型必选！', trigger: 'change' }],
+    pattern: [{ required: true, message: '设备模式必填！', trigger: 'blur' }],
+    name: [{ required: true, message: '设备名称必填！', trigger: 'blur' }],
+    devChns: [{ required: true, message: '设备通道数必填！', trigger: 'blur' }],
+    devVolt: [{ required: true, message: '额定电压必填！', trigger: 'blur' }],
+    devCurr: [{ required: true, message: '额定电流必填！', trigger: 'blur' }],
+    createDate: [{ required: true, message: '生产日期必填！', trigger: 'blur' }],
+    createId: [{ required: true, message: '出厂编号必填！', trigger: 'blur' }],
+    hardwareVersion: [{ required: true, message: '固件版本必填！', trigger: 'blur' }],
+    softwareVersion: [{ required: true, message: '软件版本必填！', trigger: 'blur' }],
+    ip:[{ required: true, message: 'IP地址必填！', trigger: 'blur' }],
+    port:[{ required: true, message: '端口号必填！', trigger: 'blur' }],
+    manufacturer: [{ required: true, message: '生产厂家必选！', trigger: 'change' }],
+    encryption: [{ required: true, message: '是否加密必选！', trigger: 'change' }],
+  })
+  
+  // 关闭弹窗
+  const close = () => {
+    dialogVisible.value = false
+    // 清空dialogForm中的值
+    resetFormContent()
+    // 重置表单
+    dialogFormRef.value?.resetFields()
+  }
+  
+  // 保存数据
+  const save = () => {
+    try {
+        dialogFormRef.value?.validate(async (valid: boolean) => {
+        if (valid) {
+          if (formContent.value.id) {
+             updatePqDev(formContent.value).then(result => {
+                if(result.code != 'A0000'){
+                  ElMessage.error({ message: result.message})
+                }else{
+                  ElMessage.success({ message: `${dialogTitle.value}成功！` })
+                }
+             })
+          } else {
+            addPqDev(formContent.value).then(result => {
+              if(result.code != 'A0000'){
+                  ElMessage.error({ message: result.message})
+                }else{
+                  ElMessage.success({ message: `${dialogTitle.value}成功！` })
+                }
+             })
+          }
+          close()
+          // 刷新表格
+          await props.refreshTable!()
+        }
+      })
+    } catch (err) {
+      console.error('验证过程中出现错误', err)
+    }
+  }
+  
+  // 打开弹窗，可能是新增，也可能是编辑
+  const open = (sign: string, data: Device.ResPqDev) => {
+    titleType.value = sign
+    dialogVisible.value = true
+    if (data.id) {
+      data.createDate = data.createDate.replace('T', ' ') 
+      formContent.value = { ...data }
+    } else {
+      resetFormContent()
+    }
+  }
+  
+  // 对外映射
+  defineExpose({ open })
+  const props = defineProps<{
+    refreshTable: (() => Promise<void>) | undefined;
+  }>()
+  
+
+  
+  </script>
\ No newline at end of file
diff --git a/frontend/src/views/machine/device/index.vue b/frontend/src/views/machine/device/index.vue
index 2658f73..b76fa0a 100644
--- a/frontend/src/views/machine/device/index.vue
+++ b/frontend/src/views/machine/device/index.vue
@@ -1,123 +1,132 @@
 <template>
-    <div class='table-box'>
+    <div class='table-box' ref='popupBaseView'>
       <ProTable
         ref='proTable'
         :columns='columns'
-        :data='deviceData'
+         :request-api='getPqDevList'
      >
         <!-- :requestApi="getRoleList" -->
         <!-- 表格 header 按钮 -->
         <template #tableHeader='scope'>
-          <el-button type='primary' :icon='CirclePlus' >新增</el-button>
-          <el-button type='primary' :icon='Download' plain >导出数据</el-button>
-          <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>
+          <el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
+          <el-button type='primary' :icon='Download'  plain @click='downloadFile()'>批量导出</el-button>
+          <el-button type='primary' :icon='Upload'  plain @click='importFile()'>批量导入</el-button>
+          <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'  @click='batchDelete(scope.selectedListIds)'>
             批量删除
           </el-button>
         </template>
         <!-- 表格操作 -->
         <template #operation='scope'>
-          <el-button type='primary' link :icon='View' >查看</el-button>
-          <el-button type='primary' link :icon='EditPen' >编辑</el-button>
-          <el-button type='primary' link :icon='Delete' >删除</el-button>
+          <el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
+          <el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
       </template>
   
       </ProTable>
     </div>
-  
+    <DevicePopup :refresh-table='proTable?.getTableList' ref='devicePopup'/>
   </template>
   
   <script setup lang='tsx' name='useRole'>
-  import { Device } from '@/api/device/interface'
+    import TimeControl from '@/components/TimeControl/index.vue'
+  import { type Device } from '@/api/device/interface'
   import { useHandleData } from '@/hooks/useHandleData'
   import { useDownload } from '@/hooks/useDownload'
   import { useAuthButtons } from '@/hooks/useAuthButtons'
   import ProTable from '@/components/ProTable/index.vue'
   import ImportExcel from '@/components/ImportExcel/index.vue'
-  import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
-  
+  import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
+  import DevicePopup from '@/views/machine/device/components/devicePopup.vue'
   import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
   import deviceDataList from '@/api/device/deviceData'
   import { useDictStore } from '@/stores/modules/dict'
-   import {
-    getDeviceList,
-  } from '@/api/device/device'
-  
+  import {getPqDevList,deletePqDev,exportPqDev,importPqDev} from '@/api/device/device.ts'
+  import { reactive, ref } from 'vue'
   const dictStore = useDictStore()
-  
-  const deviceData = deviceDataList.data
   // ProTable 实例
   const proTable = ref<ProTableInstance>()
-  
-  // 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
-  const initParam = reactive({ type: 1 })
-  
-  // dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
-  // 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
-  const dataCallback = (data: any) => {
-    return {
-      list: data.list,
-      total: data.total,
-    }
-  }
-  
-  // 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
-  // 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
-  const getTableList = (params: any) => {
-    let newParams = JSON.parse(JSON.stringify(params))
-    newParams.createTime && (newParams.startTime = newParams.createTime[0])
-    newParams.createTime && (newParams.endTime = newParams.createTime[1])
-    delete newParams.createTime
-    return getDeviceList(newParams)
-  }
-  
-  // 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
-  const { BUTTONS } = useAuthButtons()
-  
+  const devicePopup = ref()
+    // 定义包含和排除的单位
+const includedUnits = ['日', '周', '月', '自定义']; // 可以根据需要包含的单位
+const excludedUnits = ['季度','年']; // 要排除的单位
+const defaultUnits = '日'; // 默认的单位
   // 表格配置项
-  const columns = reactive<ColumnProps<Device.ResDeviceList>[]>([
+  const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
     { type: 'selection', fixed: 'left', width: 70 },
     { type: 'index', fixed: 'left', width: 70, label: '序号' },
     {
-      prop: 'deviceName',
+      prop: 'name',
       label: '名称',
       search: { el: 'input' },
-      minWidth: 120,
+      minWidth: 200,
     },
     {
-      prop: 'deviceType',
+      prop: 'devType',
       label: '类型',
-      search: { el: 'input' },
-      minWidth: 280,
+      enum: dictStore.getDictData('High_Cate'),
+      search: { el: 'select', props: { filterable: true } },
+      fieldNames: { label: 'name', value: 'code' },
+      minWidth: 200,
     },
     {
-      prop: 'deviceChannels',
+      prop: 'devChns',
       label: '设备通道数',
-      minWidth: 120,
+      minWidth: 110,
     },
     {
-      prop: 'PlanName',
-      label: '所属计划',
-      search: { el: 'input' },
-      minWidth: 280,
-    },
-    {
-      prop: 'deviceUn',
+      prop: 'devVolt',
       label: '额定电压（V）',
       minWidth: 130,
     },
     {
-      prop: 'deviceIn',
+      prop: 'devCurr',
       label: '额定电流（A）',
       minWidth: 130,
     },
     {
-      prop: 'deviceCompany',
+      prop: 'manufacturer',
       label: '制作厂商',
-      minWidth: 280,
+      minWidth: 200,
     },
-    { prop: 'operation', label: '操作', fixed: 'right', width: 330 },
+    {
+      prop: 'createDate',
+      label: '生产日期',
+      minWidth: 200,
+      search: {
+      span: 2,
+      render: () => {
+        return (
+          <div class='flx-flex-start'>
+            <TimeControl 
+            include={includedUnits} 
+            exclude={excludedUnits} 
+            default={defaultUnits} 
+            />
+          </div>
+        )
+      },
+    },
+    },
+    { prop: 'operation', label: '操作', fixed: 'right', width: 200 },
   ])
   
+  // 打开 drawer(新增、编辑)
+  const openDialog = (titleType: string, row: Partial<Device.ResPqDev> = {}) => {
+    devicePopup.value?.open(titleType, row)
+    
+  }
+  
+  // 批量删除字典类型
+  const batchDelete = async (id: string[]) => {
+    await useHandleData(deletePqDev, id, '删除所选设备')
+    proTable.value?.clearSelection()
+    proTable.value?.getTableList()
+  }
+  
+  // 删除字典类型
+  const handleDelete = async (params: Device.ResPqDev) => {
+    await useHandleData(deletePqDev, [params.id], `删除【${params.name}】设备`)
+    proTable.value?.getTableList()
+  }
   
   </script>
   
\ No newline at end of file
diff --git a/frontend/src/views/system/dictionary/dictPq/components/pqPopup.vue b/frontend/src/views/system/dictionary/dictPq/components/pqPopup.vue
index 438ddd0..a06b78c 100644
--- a/frontend/src/views/system/dictionary/dictPq/components/pqPopup.vue
+++ b/frontend/src/views/system/dictionary/dictPq/components/pqPopup.vue
@@ -4,7 +4,7 @@
         <el-form :model='formContent' ref='dialogFormRef' :rules='rules' class='form-two'>
           <el-divider >基础数据</el-divider>
           <el-form-item label='数据模型' :label-width='140' prop='dataType'>
-            <el-select v-model="formContent.dataType"  clearable placeholder="请选择资源类型">
+            <el-select v-model="formContent.dataType"  clearable placeholder="请选择数据模型">
             <el-option
               v-for="item in dictStore.getDictData('High_Cate')"
               :key="item.id"
@@ -262,7 +262,7 @@ import { el } from 'element-plus/es/locale';
   const open = (sign: string, data: Dict.ResDictPq) => {
     titleType.value = sign
     dialogVisible.value = true
-    console.log(dictStore)
+    //console.log(dictStore)
     selectedStatMethods.value = data.statMethod ? data.statMethod.split(',') : []
     if (data.id) {
       formContent.value = { ...data }
diff --git a/frontend/src/views/system/dictionary/dictPq/index.vue b/frontend/src/views/system/dictionary/dictPq/index.vue
index 980b0e5..6a2fa98 100644
--- a/frontend/src/views/system/dictionary/dictPq/index.vue
+++ b/frontend/src/views/system/dictionary/dictPq/index.vue
@@ -19,7 +19,7 @@
         </template>
       </ProTable>
     </div>
-    <pq-popup :refresh-table='proTable?.getTableList' ref='pqPopup'/>
+    <PqPopup :refresh-table='proTable?.getTableList' ref='pqPopup'/>
   </template>
   
   <script setup lang='tsx' name='dict'>