PLC/RuoYi-Scada-Vue-master
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.修改通用页面

Browse Source
This commit is contained in:
lagos 2026-01-20 10:00:16 +08:00
parent 6bb827e955
commit 0614a1ad92
2 changed files with 198 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
src/components/FormCom/IpInput.vue Normal file
View File

@ -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>

115
src/views/production/plc/gvlcommon/index.vue
View File

@ -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-input
v-model="queryParams.dPatm"
placeholder="请输入大气压力"
clearable
@keyup.enter="handleQuery"
/>
</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="设备名称" 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-form ref="gvlcommonRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-dialog :title="title" v-model="open" width="800px" append-to-body>
<el-form ref="gvlcommonRef" :model="form" :rules="rules" label-width="120px">
<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
v-model="form.gResetTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择计量日切换时间">
</el-date-picker>
<el-time-picker
v-model="form.gResetTime"
arrow-control
placeholder="请选择或输入计量日切换时间"
/>
</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