1.修改通用页面

src/components/FormCom/IpInput.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="ipInput">
+    <template v-for="index in 4" :key="index">
+      <el-input
+        v-model.number="ipAddress[`ip` + index]"
+        maxlength="3"
+        :ref="el => setItemRef(el, index)"
+        @paste="handlePaste(index, $event)"
+        @keyup="keyupEvent(index, $event)"
+        @blur="submitIp"
+        @input="val => handleInpIp(val, index)"
+      ></el-input>
+      <span class="dot" v-if="index !== 4">.</span>
+    </template>
+  </div>
+</template>
+<script setup name="ipInput">
+	import { ref, nextTick, reactive, onMounted } from 'vue'
+	const { proxy } = getCurrentInstance()
+	
+	let props = defineProps(['value'])
+	
+	const emits = defineEmits(['update:value'])
+	
+	const ipAddress = reactive({
+	  ip1: '',
+	  ip2: '',
+	  ip3: '',
+	  ip4: ''
+	})
+	
+	let ipRefs = ref({})
+	const setItemRef = (el, key) => {
+	  ipRefs.value[key] = el
+	}
+	
+	//利用复制粘贴的方式输入ip地址
+	function handlePaste(index, event) {
+	  const e = event || window.event
+	  let ipValue = e.clipboardData.getData('Text')
+	
+	  if (ipValue != null && ipValue != undefined && ipValue !== '') {
+	    let reg =
+	      /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
+	    //IP地址格式不正确
+	    if (!reg.test(ipValue)) {
+		  proxy.$modal.msgError("请输入正确的IP地址！")
+	      setTimeout(() => {
+	        ipAddress.ip1 = null
+	        ipAddress.ip2 = null
+	        ipAddress.ip3 = null
+	        ipAddress.ip4 = null
+	      }, 600)
+	      ipRefs.value[index - 1].value.focus()
+	    } else {
+	      let ipList = ipValue.split('.')
+	      setTimeout(() => {
+	        ipAddress.ip1 = ipList[0]
+	        ipAddress.ip2 = ipList[1]
+	        ipAddress.ip3 = ipList[2]
+	        ipAddress.ip4 = ipList[3]
+	        ipRefs.value[4].focus()
+	      }, 5)
+	    }
+	  }
+	}
+	
+	//监听键盘（按键盘上的.跳到下一个输入框，或者也可以使用其他按键跳转到下一个输入框）
+	function keyupEvent(index, e) {
+	  //不同键盘键位对应 . 的值 87键->190  104键->110
+	  if (e.keyCode === 110 || e.keyCode === 190) {
+	    index < 4 && ipRefs.value[index + 1].focus()
+	    ipAddress['ip' + index + 1] = ''
+	  }
+	
+	  //按下backspace删除键
+	  if (e.keyCode == 8) {
+	    let ipVal = ipAddress['ip' + index]
+	    if (ipVal === '' || (ipVal == null && index !== 1)) {
+	      ipRefs.value[index - 1].focus()
+	    }
+	  }
+	
+	  //按下left
+	  if (e.keyCode == 37) {
+	    if (e.srcElement.selectionStart === 0) {
+	      ipRefs.value[index - 1].focus()
+	    }
+	  }
+	
+	  //按下right
+	  if (e.keyCode == 39) {
+	    if (e.srcElement.selectionStart === e.srcElement.value.length) {
+	      ipRefs.value[index + 1].focus()
+	    }
+	  }
+	}
+	
+	//输入框输入时
+	function handleInpIp(val, key) {
+	  //判断输入的ip值，如果输入值超过255，则显示为255，并且跳到下一个输入框
+	  if (parseInt(val) > 255) {
+	    ipAddress[`ip` + key] = 255
+	    key < 4 && ipRefs.value[key + 1].focus()
+	  }
+	  //如果输入的是三位数，且范围在100到255之间，则自动跳到下一个输入值
+	  else if (parseInt(val) <= 255 && parseInt(val) >= 100) {
+	    key < 4 && ipRefs.value[key + 1].focus()
+	  }
+	}
+	
+	// 输入框失去焦点时
+	function submitIp() {
+	  const invalidIpPart = Object.values(ipAddress).some(part => part == null || part === '')
+	  if (invalidIpPart) {
+	    emits('update:value', '')
+	  } else {
+	    const ipVal = Object.values(ipAddress).join('.')
+	    if (!ipVal.match(/^(\d{1,3}\.){3}\d{1,3}$/)) {
+		  proxy.$modal.msgError("请输入正确的IP地址！")
+	      Object.keys(ipAddress).forEach(key => (ipAddress[key] = null))
+	      nextTick(() => ipRefs.value[0].focus())
+	    } else {
+	      emits('update:value', ipVal)
+	    }
+	  }
+	}
+	
+	onMounted(() => {
+	  // 初始化 IP 地址
+	  if (props.value) {
+	    const ipList = props.value.split('.')
+	    Object.keys(ipAddress).forEach((key, index) => (ipAddress[key] = ipList[index]))
+	  }
+	})
+
+</script>
+<style scoped>
+	.ipInput {
+	  width: 200px;
+	  height: 34px;
+	  display: flex;
+	  align-items: center;
+	  border: 1px solid #dcdfe6;
+	  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+	  .item {
+	    display: flex;
+	    align-items: center;
+	    .point {
+	      user-select: none;
+	    }
+	  }
+	
+	  :deep(.el-input .el-input__wrapper) {
+	    border: none !important;
+	    box-shadow: none !important;
+	    padding: 0px 10px !important;
+	  }
+	
+	  :deep(.el-input__inner) {
+	    width: 100%;
+	    padding: 0 !important;
+	  }
+	}
+
+</style>
+

src/views/production/plc/gvlcommon/index.vue

@@ -9,14 +9,6 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="站场编号" prop="dStationId">
-        <el-input
-          v-model="queryParams.dStationId"
-          placeholder="请输入站场编号"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="设备编号" prop="dDeviceId">
         <el-input
           v-model="queryParams.dDeviceId"
@@ -25,40 +17,14 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="大气压力" prop="dPatm">
+	  <el-form-item label="设备名称" prop="name">
-        <el-input
+	    <el-input
-          v-model="queryParams.dPatm"
+	      v-model="queryParams.name"
-          placeholder="请输入大气压力"
+	      placeholder="请输入设备名称"
-          clearable
+	      clearable
-          @keyup.enter="handleQuery"
+	      @keyup.enter="handleQuery"
-        />
+	    />
-      </el-form-item>
+	  </el-form-item>
-      <el-form-item label="计量日切换时间" prop="gResetTime">
-        <el-date-picker clearable
-          v-model="queryParams.gResetTime"
-          type="date"
-          value-format="YYYY-MM-DD"
-          placeholder="请选择计量日切换时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="参数变更标志" prop="bParamsChanged">
-        <el-select v-model="queryParams.bParamsChanged" placeholder="请选择参数变更标志" clearable>
-          <el-option
-            v-for="dict in plc_params_changed"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="ip地址" prop="ipAddr">
         <el-input
           v-model="queryParams.ipAddr"
@@ -67,26 +33,6 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="端口号" prop="port">
-        <el-input
-          v-model="queryParams.port"
-          placeholder="请输入端口号"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="485设备地址" prop="rtuAddr">
-        <el-input
-          v-model="queryParams.rtuAddr"
-          placeholder="请输入485设备地址"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
@@ -141,7 +87,7 @@
       <el-table-column label="大气压力" align="center" prop="dPatm" />
       <el-table-column label="计量日切换时间" align="center" prop="gResetTime" width="180">
         <template #default="scope">
-          <span>{{ parseTime(scope.row.gResetTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.gResetTime, '{h}:{i}:{s}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="参数变更标志" align="center" prop="bParamsChanged">
@@ -149,7 +95,7 @@
           <dict-tag :options="plc_params_changed" :value="scope.row.bParamsChanged"/>
         </template>
       </el-table-column>
-      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="设备名称" align="center" prop="name" />
       <el-table-column label="ip地址" align="center" prop="ipAddr" />
       <el-table-column label="端口号" align="center" prop="port" />
       <el-table-column label="485设备地址" align="center" prop="rtuAddr" />
@@ -170,11 +116,8 @@
     />
 
     <!-- 添加或修改plc通用信息对话框 -->
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
-      <el-form ref="gvlcommonRef" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="gvlcommonRef" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
         <el-form-item label="单位编号" prop="dDepartmentId">
           <el-input v-model="form.dDepartmentId" placeholder="请输入单位编号" />
         </el-form-item>
@@ -185,16 +128,20 @@
           <el-input v-model="form.dDeviceId" placeholder="请输入设备编号" />
         </el-form-item>
         <el-form-item label="大气压力" prop="dPatm">
-          <el-input v-model="form.dPatm" placeholder="请输入大气压力" />
+		  <unit-converter v-model="form.dPatm" :unit-type="'pressure'"
+		  	:show-english-only="false" :decimal-places="6" />
         </el-form-item>
         <el-form-item label="计量日切换时间" prop="gResetTime">
-          <el-date-picker clearable
+		  <el-time-picker
-            v-model="form.gResetTime"
+		        v-model="form.gResetTime"
-            type="date"
+		        arrow-control
-            value-format="YYYY-MM-DD"
+		        placeholder="请选择或输入计量日切换时间"
-            placeholder="请选择计量日切换时间">
+		      />
-          </el-date-picker>
         </el-form-item>
+		<el-form-item label="ip地址" prop="ipAddr">
+		  <!-- <el-input v-model="form.ipAddr" placeholder="请输入ip地址" /> -->
+		  <ip-input v-model:value="form.ipAddr"></ip-input>
+		</el-form-item>
         <el-form-item label="参数变更标志" prop="bParamsChanged">
           <el-select v-model="form.bParamsChanged" placeholder="请选择参数变更标志">
             <el-option
@@ -205,21 +152,18 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="主表id" prop="mainId">
-          <el-input v-model="form.mainId" placeholder="请输入主表id" />
-        </el-form-item>
         <el-form-item label="名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入名称" />
         </el-form-item>
-        <el-form-item label="ip地址" prop="ipAddr">
-          <el-input v-model="form.ipAddr" placeholder="请输入ip地址" />
-        </el-form-item>
         <el-form-item label="端口号" prop="port">
           <el-input v-model="form.port" placeholder="请输入端口号" />
         </el-form-item>
         <el-form-item label="485设备地址" prop="rtuAddr">
           <el-input v-model="form.rtuAddr" placeholder="请输入485设备地址" />
         </el-form-item>
+		<el-form-item label="备注" prop="remark">
+		  <el-input v-model="form.remark" type="textarea" rows="4" placeholder="请输入内容" />
+		</el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -233,6 +177,9 @@
 
 <script setup name="Gvlcommon">
 import { listGvlcommon, getGvlcommon, delGvlcommon, addGvlcommon, updateGvlcommon } from "@/api/production/plc/gvlcommon/gvlcommon.js"
+import unitConverter from '@/components/inputValueUnit/index';
+import ipInput from '@/components/FormCom/ipInput.vue';
+
 
 const { proxy } = getCurrentInstance()
 const { plc_params_changed } = proxy.useDict('plc_params_changed')
@@ -300,7 +247,6 @@ function reset() {
     dPatm: null,
     gResetTime: null,
     bParamsChanged: null,
-    mainId: null,
     name: null,
     ipAddr: null,
     port: null,
@@ -336,7 +282,7 @@ function handleSelectionChange(selection) {
 function handleAdd() {
   reset()
   open.value = true
-  title.value = "添加plc通用信息"
+  title.value = "添加通用信息"
 }
 
 /** 修改按钮操作 */
@@ -361,6 +307,7 @@ function submitForm() {
           getList()
         })
       } else {
+		  console.log(form.value)
         addGvlcommon(form.value).then(response => {
           proxy.$modal.msgSuccess("新增成功")
           open.value = false