ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

标准设备，比对模式被检设备

Browse Source
This commit is contained in:
sjl
2025-07-09 20:12:40 +08:00
parent d2f0382bd9
commit cc848b1ffb
39 changed files with 2247 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/views/machine/devType/components/devTypePopup.vue
View File

@@ -1,6 +1,6 @@
<template>
<!-- 基础信息弹出框 -->
<el-dialog :model-value="dialogVisible" :title="dialogTitle" v-bind="dialogMiddle" @close="close" >
<el-dialog :model-value="dialogVisible" :title="dialogTitle" v-bind="dialogMiddle" @close="close" align-center>
<div>
<el-form :model="formContent" ref='dialogFormRef' :rules='rules' class="form-two">
<el-form-item label="名称" prop="name" >

379
frontend/src/views/machine/device/components/devicePopup.vue
View File

@@ -1,6 +1,6 @@
<template>
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig">
<el-tabs type="border-card">
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" align-center>
<el-tabs type="border-card" v-model="activeTab">
<el-tab-pane label="设备台账信息">
<div>
<el-form :model='formContent' ref='dialogFormRef' :rules='rules' :disabled="false" label-width="auto" class="form-three">
@@ -9,15 +9,16 @@
<el-input v-model="formContent.createId" placeholder="请输入装置编号" @input="handleInput" maxlength="32" show-word-limit/>
</el-form-item>
<el-form-item label="设备名称" prop="name">
<el-input v-model='formContent.name' placeholder="请输入设备名称" :disabled="scene === '1'" maxlength="32" show-word-limit/>
<el-input v-model='formContent.name' placeholder="请输入设备名称" :disabled="scene === '1' || formContent.importFlag == 1" maxlength="32" show-word-limit />
</el-form-item>
<el-form-item label='设备类型' prop='devType'>
<el-select v-model="formContent.devType" filterable clearable placeholder="请选择设备类型" @change="handleDevTypeChange">
<el-select v-model="formContent.devType" filterable clearable placeholder="请选择设备类型" @change="handleDevTypeChange" :disabled="formContent.importFlag == 1">
<el-option
v-for="item in devTypeOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
@@ -31,31 +32,23 @@
/>
</el-select>
</el-form-item>
<!-- <el-form-item label='设备模式' prop='pattern' >-->
<!-- <el-select v-model="formContent.pattern" clearable placeholder="请选择设备模式" disabled>-->
<!-- <el-option -->
<!-- v-for="item in dictStore.getDictData('Pattern')"-->
<!-- :key="item.id"-->
<!-- :label="item.name"-->
<!-- :value="item.id"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item> -->
<el-form-item label='设备厂家' prop='manufacturer' v-if="scene != '1'">
<el-select v-model="formContent.manufacturer" clearable placeholder="请选择设备厂家">
<el-select v-model="formContent.manufacturer" clearable placeholder="请选择设备厂家" :disabled="formContent.importFlag == 1">
<el-option
v-for="item in dictStore.getDictData('Dev_Manufacturers')"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="出厂日期" prop="createDate" v-if="scene === '0'">
<el-form-item :label="createDateTitle" prop="createDate" v-if="scene === '0'" >
<el-date-picker
v-model="formContent.createDate"
placeholder="请选择出厂日期"
:placeholder="`请选择${createDateTitle}`"
:disabled-date="disabledDate"
:disabled="formContent.importFlag == 1"
/>
</el-form-item>
@@ -65,46 +58,62 @@
<el-form-item label="软件版本" prop="softwareVersion" v-if="scene === '0'">
<el-input v-model="formContent.softwareVersion" placeholder="请输入软件版本"/>
</el-form-item>
<el-form-item label='定检日期' prop='inspectDate' v-if="MonIsShow">
<el-date-picker
v-model="formContent.inspectDate"
placeholder="请选择定检日期"
:disabled-date="disabledDate"
:disabled="formContent.importFlag == 1"
/>
</el-form-item>
<el-divider>参数信息</el-divider>
<el-form-item label="通道数" prop="devChns">
<el-form-item label="通道数" prop="devChns" v-if="DevIsShow">
<el-input v-model='formContent.devChns' :disabled="true"/>
</el-form-item>
<el-form-item label="额定电压(V)" prop="devVolt">
<el-form-item label="额定电压(V)" prop="devVolt" v-if="DevIsShow">
<el-input v-model='formContent.devVolt' :disabled="true"/>
</el-form-item>
<el-form-item label="额定电流(A)" prop="devCurr">
<el-form-item label="额定电流(A)" prop="devCurr" v-if="DevIsShow">
<el-input v-model='formContent.devCurr' :disabled="true"/>
</el-form-item>
<el-form-item label='被检通道' prop='inspectChannel' :label-width='100' v-if="MonIsShow">
<el-select v-model="formContent.inspectChannel" multiple collapse-tags :disabled="true" :max-collapse-tags="4" placeholder="请选择被检通道" clearable>
<el-option
v-for="(option, index) in pqChannelArray"
:key="index"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item label='通讯协议' prop='protocol'>
<el-select v-model="formContent.protocol" clearable placeholder="请选择通讯协议">
<el-select v-model="formContent.protocol" clearable placeholder="请选择通讯协议" :disabled="formContent.importFlag == 1">
<el-option
v-for="item in dictStore.getDictData('Protocol')"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="IP地址" prop="ip">
<IPAddress v-model:value="formContent.ip"/>
</el-form-item> -->
<el-form-item label="IP地址" prop="ip" placeholder="请输入IP地址">
<el-input v-model="formContent.ip"/>
<el-input v-model="formContent.ip" :disabled="formContent.importFlag == 1"/>
</el-form-item>
<el-form-item label="端口号" prop="port" placeholder="请输入端口号">
<el-input v-model="formContent.port"/>
<el-input v-model="formContent.port" :disabled="formContent.importFlag == 1"/>
</el-form-item>
<el-form-item label='是否加密' prop='encryptionFlag'>
<el-select v-model="formContent.encryptionFlag" clearable placeholder="请选择是否加密">
<el-select v-model="formContent.encryptionFlag" clearable placeholder="请选择是否加密" :disabled="formContent.importFlag == 1">
<el-option label="是" :value="1"></el-option>
<el-option label="否" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label='识别码' prop='series' clearable v-if="formContent.encryptionFlag">
<el-input v-model='formContent.series' placeholder="请输入识别码" show-password/>
<el-input v-model='formContent.series' placeholder="请输入识别码" show-password :disabled="formContent.importFlag == 1"/>
</el-form-item>
<el-form-item label='密钥' prop='devKey' clearable v-if="formContent.encryptionFlag">
<el-input v-model='formContent.devKey' placeholder="请输入密钥" show-password/>
<el-input v-model='formContent.devKey' placeholder="请输入密钥" show-password :disabled="formContent.importFlag == 1"/>
</el-form-item>
<el-form-item label='样品编号' prop='sampleId' clearable v-if="DevIsShow && scene === '0'">
<el-input v-model='formContent.sampleId' placeholder="请输入样品编号"/>
@@ -127,13 +136,13 @@
</el-select>
</el-form-item>
<el-form-item label='所属地市' prop='cityName' clearable placeholder="请输入所属地市" v-if="MonIsShow">
<el-input v-model='formContent.cityName'/>
<el-input v-model='formContent.cityName' :disabled="formContent.importFlag == 1"/>
</el-form-item>
<el-form-item label='所属供电公司' prop='gDName' clearable placeholder="请输入所属供电公司" v-if="MonIsShow">
<el-input v-model='formContent.gDName'/>
<el-form-item label='所属供电公司' prop='gdName' clearable placeholder="请输入所属供电公司" v-if="MonIsShow">
<el-input v-model='formContent.gdName' :disabled="formContent.importFlag == 1"/>
</el-form-item>
<el-form-item label='所属电站' prop='subName' clearable placeholder="请输入所属电站" v-if="MonIsShow">
<el-input v-model='formContent.subName'/>
<el-input v-model='formContent.subName' :disabled="formContent.importFlag == 1"/>
</el-form-item>
<el-form-item v-auth.device="'factorFlag'" label="是否支持系数校准" prop='factorFlag' v-if="scene === '1'">
<el-radio-group v-model="formContent.factorFlag">
@@ -145,21 +154,19 @@
</div>
</el-tab-pane>
<!-- 监测点台账信息 tab pane -->
<MonitorTable :MonIsShow="MonIsShow"/>
</el-tabs>
<template #footer>
<div>
<el-button @click='close()'>取 消</el-button>
<el-button type="primary" @click='save()'>保存</el-button>
</div>
</template>
</el-dialog>
<!-- 监测点台账信息 tab pane -->
<MonitorTable @getParameter="getParameter" :MonIsShow="MonIsShow" :DevFormContent = "formContent"/>
</el-tabs>
<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 IPAddress from '@/components/IpAddress/index.vue'
import {dialogBig} from '@/utils/elementBind'
import {type Device} from '@/api/device/interface/device'
import {ElMessage, type FormItemRule} from 'element-plus'
@@ -171,18 +178,31 @@ import {CirclePlus, Delete, EditPen} from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import MonitorTable from '@/views/machine/device/components/monitorTab.vue';
import {useAppSceneStore} from "@/stores/modules/mode";
import { generateUUID } from '@/utils'
import { Monitor } from '@/api/device/interface/monitor'
const AppSceneStore = useAppSceneStore()
const MonIsShow = ref(false)
const DevIsShow = ref(false)
// 存储设备类型选项
const devTypeOptions = ref<Device.ResDev[]>([])
const monitor = ref<Monitor.ResPqMon[]>([])
// const IsPasswordShow = ref(false)
const dictStore = useDictStore()
const mode = ref()
const scene = ref('')
// 定义弹出组件元信息
const dialogFormRef = ref()
const createDateTitle = ref('')
const activeTab = ref('0') // '0' 对应第一个 tab
const pqChannelArray = ref([
{
value: '1',
label: '1',
}
])
const disabledDate = (time: Date) => {
return time.getTime() > Date.now()
}
@@ -190,7 +210,7 @@ const disabledDate = (time: Date) => {
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = ref<Device.ResPqDev>({
const formContent = reactive<Device.ResPqDev>({
id: '',
name: '',
pattern: mode.value,
@@ -207,13 +227,20 @@ function useMetaInfo() {
ip: '',
port: 102,
encryptionFlag: 0,
reCheckNum: 0,
recheckNum: 0,
state: 1,
factorFlag: 1,
icdId: '',
power: '',
preinvestmentPlan: '',
delegate:''
delegate:'',
inspectDate:dayjs().format('YYYY-MM-DD'),
cityName: '',
gdName: '',
subName: '',
importFlag:0,
inspectChannel:[],
monitorList:[]
})
return {dialogVisible, titleType, formContent}
}
@@ -221,31 +248,41 @@ function useMetaInfo() {
const {dialogVisible, titleType, formContent} = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
formContent.value = {
id: '',
name: '',
pattern: mode.value,
devType: '',
devChns: 1,
devVolt: 57.74,
devCurr: 5,
manufacturer: '',
createDate: dayjs().format('YYYY-MM-DD'),
createId: '',
hardwareVersion: '',
softwareVersion: '',
protocol: 'MMS',
ip: '',
port: 102,
encryptionFlag: 0,
reCheckNum: 0,
state: 1,
factorFlag: 1,
icdId: '',
power: '',
preinvestmentPlan: '',
delegate:''
}
Object.assign(
formContent,{
id: '',
name: '',
pattern: mode.value,
devType: '',
devChns: 1,
devVolt: 57.74,
devCurr: 5,
manufacturer: '',
createDate: dayjs().format('YYYY-MM-DD'),
createId: '',
hardwareVersion: '',
softwareVersion: '',
protocol: 'MMS',
ip: '',
port: 102,
encryptionFlag: 0,
recheckNum: 0,
state: 1,
factorFlag: 1,
icdId: '',
power: '',
preinvestmentPlan: '',
delegate:'',
inspectDate:dayjs().format('YYYY-MM-DD'),
cityName: '',
gdName: '',
subName: '',
importFlag:0,
inspectChannel:[],
monitorList:[]
}
)
}
@@ -291,7 +328,7 @@ const rules = computed(() => {
const dynamicRules = {...baseRules};
if (scene.value === '0') {//只有电科院需要展示
dynamicRules.createDate = [{required: true, message: '出厂日期必填！', trigger: 'blur'}];
dynamicRules.createDate = [{required: true, message: createDateTitle.value + '必填！', trigger: 'blur'}];
}
if (scene.value === '1') {//只有楼下出厂需要展示
dynamicRules.preinvestmentPlan = [{required: true, message: '预投计划必选！', trigger: 'change'}];
@@ -310,7 +347,13 @@ const rules = computed(() => {
if (scene.value !== '2') {
dynamicRules.name = [{required: true, message: '设备名称必填！', trigger: 'blur'}];
dynamicRules.manufacturer = [{required: true, message: '生产厂家必选！', trigger: 'change'}];
}
if(mode.value === '比对式'){
dynamicRules.inspectDate = [{required: true, message: '定检日期必填！', trigger: 'blur'}];
dynamicRules.cityName = [{required: true, message: '所属地市必填！', trigger: 'blur'}];
dynamicRules.gdName = [{required: true, message: '所属供电公司必填！', trigger: 'blur'}];
dynamicRules.subName = [{required: true, message: '所属电站必填！', trigger: 'blur'}];
}
@@ -324,49 +367,75 @@ const close = () => {
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
}
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
//子组件监测点变化通知父组件设备台账
const getParameter = (data: Monitor.ResPqMon[]) => {
monitor.value = data
//保存监测点信息自动更新设备台账的被检通道
formContent.inspectChannel = monitor.value
.map(item => item.num.toString())
.sort((a, b) => parseFloat(a) - parseFloat(b));
}
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (formContent.encryptionFlag === 0) {
formContent.series = ''
formContent.devKey = ''
}
if (valid) {
formContent.createDate = dayjs(formContent.createDate).format('YYYY-MM-DD');
if (AppSceneStore.currentScene === '1') {
formContent.name = formContent.createId
}
if (formContent.value.encryptionFlag === 0) {
formContent.value.series = ''
formContent.value.devKey = ''
}
if (valid) {
formContent.value.createDate = dayjs(formContent.value.createDate).format('YYYY-MM-DD');
if (AppSceneStore.currentScene === '1') {
formContent.value.name = formContent.value.createId
if (formContent.arrivedDate) {
formContent.arrivedDate = dayjs(formContent.arrivedDate).format('YYYY-MM-DD');
}
if (formContent.value.arrivedDate) {
formContent.value.arrivedDate = dayjs(formContent.value.arrivedDate).format('YYYY-MM-DD');
if(mode.value == '比对式'){
if (formContent.inspectDate) {
formContent.inspectDate = dayjs(formContent.inspectDate).format('YYYY-MM-DD');
}
//可检通道转为字符串逗号分隔
// 确保 inspectChannel 是数组再执行 join
if (Array.isArray(formContent.inspectChannel)) {
formContent.inspectChannel = formContent.inspectChannel
.map(Number) // 将值转为数字以保证正确排序
.sort((a, b) => a - b) // 数字升序排序
.map(String) // 恢复为字符串用于保存
.join(',');
}
}
//保存时判是否加密，把识别码密钥字段清空
if (formContent.value.encryptionFlag === 0) {
formContent.value.series = null
formContent.value.devKey = null
if (formContent.encryptionFlag === 0) {
formContent.series = null
formContent.devKey = null
}
if (formContent.value.id) {
await updatePqDev(formContent.value);
formContent.monitorList = monitor.value
if (titleType.value != 'add') {
await updatePqDev(formContent);
ElMessage.success({message: `${dialogTitle.value}成功！`})
} else {
// 新增需要把设备模式转成字典ID
const patternItem = dictStore.getDictData('Pattern').find(item => item.name === formContent.value.pattern);
const patternItem = dictStore.getDictData('Pattern').find(item => item.name === formContent.pattern);
if (patternItem) {
formContent.value.pattern = patternItem.id;
formContent.pattern = patternItem.id;
}
// 新增需要把通讯协议转成字典ID
const protocolItem = dictStore.getDictData('Protocol').find(item => item.name === formContent.value.protocol);
const protocolItem = dictStore.getDictData('Protocol').find(item => item.name === formContent.protocol);
if (protocolItem) {
formContent.value.protocol = protocolItem.id;
formContent.protocol = protocolItem.id;
}
await addPqDev(formContent.value);
await addPqDev(formContent);
ElMessage.success({message: `${dialogTitle.value}成功！`})
}
@@ -385,92 +454,100 @@ const save = () => {
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: Device.ResPqDev, currentMode: string, currentScene: string, devType: Device.ResDev[]) => {
dialogFormRef.value?.resetFields()
devTypeOptions.value = devType
mode.value = currentMode
scene.value = currentScene
titleType.value = sign
dialogVisible.value = true
activeTab.value = '0' // 强制回到第一个 tab
if (currentMode === '比对式') {
createDateTitle.value = '投运日期'
DevIsShow.value = false
MonIsShow.value = true
} else {
createDateTitle.value = '出厂日期'
DevIsShow.value = true
MonIsShow.value = false
}
if (data.encryptionFlag === 1) {
//handleEncryptionChange(1)
} else {
//handleEncryptionChange(0)
}
if (data.id) {
formContent.value = {...data}
updateDeviceByType(data.devType)
Object.assign(formContent,{ ...data })
if (typeof formContent.inspectChannel === 'string') {
formContent.inspectChannel = formContent.inspectChannel.split(',').filter(Boolean)
}
} else {
resetFormContent()
if (scene.value === '2') {
//只有比对式设备ID由前端传
if(currentMode === '比对式')
formContent.id = generateUUID().replaceAll("-","")
if(scene.value === '2'){
const manufacturers = dictStore.getDictData('Dev_Manufacturers');
const nanjingCanxuan = manufacturers.find(item => item.name === '南京灿能');
if (nanjingCanxuan) {
formContent.value.manufacturer = nanjingCanxuan.id;
formContent.manufacturer = nanjingCanxuan.id;
}
}
//handleEncryptionChange(1)
// 设置默认设备参数
updateDeviceByType('') // 可传空或默认类型
}
// 重置表单
dialogFormRef.value?.resetFields()
}
// const handleEncryptionChange = (value: number) => {
// // 根据是否加密来显示或隐藏识别码和密钥
// if(value === 1){
// IsPasswordShow.value = true
//
// }else
// {
// IsPasswordShow.value = false
// // formContent.value.series = ''
// // formContent.value.devKey = ''
// // rules.value.series = [];
// // rules.value.devKey = [];
// }
// }
const updateDeviceByType = (devTypeId: string) => {
const dev = devTypeOptions.value.find(t => t.id === devTypeId)
if (dev) {
formContent.devChns = dev.devChns
formContent.devCurr = dev.devCurr
formContent.devVolt = dev.devVolt
formContent.icdId = dev.icd
formContent.power = dev.power
// 动态设置 pqChannelArray 从 1 到 dev.devChns.length
pqChannelArray.value = Array.from({ length: dev.devChns }, (_, i) => ({
value: String(i + 1),
label: String(i + 1),
}))
} else {
// 默认值处理
formContent.devChns = 1
formContent.devCurr = 1
formContent.devVolt = 57.74
pqChannelArray.value = [{ value: '1', label: '1' }]
}
}
const handleDevTypeChange = (value: string) => {
// 在这里处理选中事件的逻辑
const dev = devTypeOptions.value.find(t => t.id === value)
if (dev) {
formContent.value.devChns = dev.devChns; // 默认值为1
formContent.value.devCurr = dev.devCurr; // 默认值为1
formContent.value.devVolt = dev.devVolt; // 默认值为1
formContent.value.icdId = dev.icd
formContent.value.power = dev.power
// if (dev.name.includes('882B')) {
// formContent.value.ip = '172.17.102.220'
// } else if (dev.name.includes('882A')) {
// formContent.value.ip = '172.17.102.221'
// } else {
// formContent.value.ip = '172.17.102.200'
// }
} else {
formContent.value.devChns = 1; // 默认值为1
formContent.value.devCurr = 1; // 默认值为1
formContent.value.devVolt = 57.74; // 默认值为1
//formContent.value.ip = '172.17.102.200'
updateDeviceByType(value)
const maxChannel = formContent.devChns
// 过滤掉超出新通道数范围的选项
if (Array.isArray(formContent.inspectChannel)) {
formContent.inspectChannel = formContent.inspectChannel.filter(
(channel) => parseInt(channel, 10) <= maxChannel
)
}
//切换设备类型时，删除超出最大通道数的监测点台账
monitor.value = monitor.value.filter(
(monitor) => parseInt(monitor.num.toString(), 10) <= maxChannel
)
formContent.monitorList = monitor.value
}
}
const handleInput = (value: string) => {
// 在这里处理选中事件的逻辑
if (scene.value === '1') {
formContent.value.name = value
formContent.name = value
}
}

239
frontend/src/views/machine/device/components/monitorPopup.vue Normal file
View File

@@ -0,0 +1,239 @@
<template>
<!-- 基础信息弹出框 -->
<el-dialog :model-value="dialogVisible" :title="dialogTitle" v-bind="dialogMiddle" @close="close" align-center>
<div>
<el-form :model="formContent" ref='dialogFormRef' :rules='rules' class="form-two">
<el-form-item label="名称" prop="name" >
<el-input v-model='formContent.name' placeholder="请输入监测点名称"/>
</el-form-item>
<el-form-item label="线路号" prop="num" >
<el-select v-model="formContent.num" clearable placeholder="请选择线路号" @change="handleMonNumChange">
<el-option
v-for="item in lineNum"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="所属母线" prop="busbar" placeholder="请输入所属母线" >
<el-input v-model="formContent.busbar" />
</el-form-item>
<el-form-item label="PT变比" prop="pt" placeholder="请输入PT变比" >
<el-input v-model="formContent.pt" />
</el-form-item>
<el-form-item label="CT变比" prop="ct" placeholder="请输入CT变比" >
<el-input v-model="formContent.ct" />
</el-form-item>
<el-form-item label='接线方式' prop='connection' >
<el-select v-model="formContent.connection" clearable placeholder="请选择接线方式">
<el-option
v-for="item in dictStore.getDictData('Dev_Connect')"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label='统计间隔' prop='statInterval' >
<el-select v-model="formContent.statInterval" clearable placeholder="请选择统计间隔">
<el-option
v-for="item in dictStore.getDictData('Dev_Chns')"
:key="item.id"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="谐波系统检测点id" prop="harmSysId" placeholder="请输入谐波系统检测点id" >
<el-input v-model="formContent.harmSysId" />
</el-form-item>
</el-form>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close()">取消</el-button>
<el-button type="primary" @click="save()" >
保存
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import{ ElMessage, type FormInstance,type FormItemRule } from 'element-plus'
import type { ProTableInstance } from '@/components/ProTable/interface'
import { ref,computed, Ref, toRaw } from 'vue'
import { type Monitor } from '@/api/device/interface/monitor'
import {dialogMiddle} from '@/utils/elementBind'
import { useDictStore } from '@/stores/modules/dict'
import { generateUUID } from '@/utils'
import { Device } from '@/api/device/interface/device'
const dictStore = useDictStore()
const lineNum = ref<{ id: number; name: string }[]>([])
const originalNum = ref<number | null>(null) // 存储编辑前的 num 值
const monitorTable = ref<any[]>()
// 定义弹出组件元信息
const dialogFormRef = ref()
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = ref<Monitor.ResPqMon>({
id: '',
devId: '',
busbar: '',
name: '',
num: 1,
pt: '',
ct: '',
connection: '',
statInterval: 1,
harmSysId: '',
})
return { dialogVisible, titleType, formContent }
}
const { dialogVisible, titleType, formContent } = useMetaInfo()
const emit = defineEmits(['get-parameter'])
// 清空formContent
const resetFormContent = () => {
formContent.value = {
id: '',
devId: '',
busbar: '',
name: '',
num: 1,
pt: '',
ct: '',
connection: '',
statInterval: 1,
harmSysId: '',
}
}
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增监测点台账' : '编辑监测点台账'
})
// 关闭弹窗
const close = () => {
dialogVisible.value = false
}
//定义校验规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name : [{ required: true, message: '监测点名称必填！', trigger: 'blur' }],
num:[ { required: true, message: '线路号必选', trigger: 'change' }],
pt: [
{ required: true, message: 'PT变比必填！', trigger: 'blur' },
{ pattern: /^[1-9]\d*:[1-9]\d*$/, message: 'PT变比格式应为 n:n 形式，例如 1:1', trigger: 'blur' }
],
ct: [
{ required: true, message: 'CT变比必填！', trigger: 'blur' },
{ pattern: /^[1-9]\d*:[1-9]\d*$/, message: 'CT变比格式应为 n:n 形式，例如 1:1', trigger: 'blur' }
],
connection: [{ required: true, message: '接线方式必选！', trigger: 'change' }],
busbar : [{ required: true, message: '所属母线必填！', trigger: 'blur' }],
harmSysId : [{ required: true, message: '谐波系统检测点id必填！', trigger: 'blur' }],
})
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
// 校验名称是否重复
const isNameDuplicate = monitorTable.value.some(
item => item.name === formContent.value.name && item.id !== formContent.value.id
)
if (isNameDuplicate) {
ElMessage.error({ message: '监测点名称已存在，请重新输入！' })
return
}
if (titleType.value != 'edit')
{
formContent.value.id = generateUUID().replaceAll("-","")
}
emit('get-parameter', formContent.value)
ElMessage.success({ message: `${dialogTitle.value}成功！` })
close()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: Monitor.ResPqMon,device: Device.ResPqDev,table: any[]) => {
// 重置表单
//dialogFormRef.value?.resetFields()
titleType.value = sign
dialogVisible.value = true
monitorTable.value = table|| []
// 提取 table 中已使用的 num（安全处理）
const usedNums = new Set<number>()
if (table && table.length > 0) {
table.forEach(item => {
if (item.num != null) {
usedNums.add(Number(item.num))
}
})
}
lineNum.value = Array.from({ length: device.devChns }, (_, i) => {
const id = i + 1;
return {
id,
name: id.toString()
};
}).filter(item => !usedNums.has(item.id)); // 过滤掉已被使用的线路号
if (sign == 'edit') {
formContent.value = { ...data }
originalNum.value = data.num // 记录原始线路号
} else {
resetFormContent()
originalNum.value = null
// 设置默认选中第一个线路号
if (lineNum.value.length > 0) {
formContent.value.num = lineNum.value[0].id
}
}
formContent.value.devId = device.id
}
const handleMonNumChange = (value: string) => {
const newValue = parseInt(value)
if (originalNum.value && originalNum.value !== newValue) {
// 将原来的 num 添加回 lineNum（表示释放）
lineNum.value.push({
id: originalNum.value,
name: originalNum.value.toString()
})
//移除新选择的 num（因为已被占用）
lineNum.value = lineNum.value.filter(item => item.id !== newValue).sort((a, b) => a.id - b.id)
// 更新 originalNum 为最新值，以便下次修改
originalNum.value = newValue
}
}
// 对外映射
defineExpose({ open })
</script>

162
frontend/src/views/machine/device/components/monitorTab.vue
View File

@@ -4,75 +4,189 @@
<div class='table-box' ref='popupBaseView'>
<ProTable
ref='proTable'
:pagination="false"
:toolButton="false"
:columns='columns'
:style="{ height: '326px',maxHeight: '400px',overflow:'hidden'}"
:data="tableData"
:style="{ height: '375px',maxHeight: '400px',overflow:'hidden'}"
>
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus'>新增</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>删除</el-button>
<el-button type='primary' :icon='CirclePlus' @click="openDialog('add')" :disabled="props.DevFormContent.importFlag == 1">新增</el-button>
<el-button v-auth.device="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
@click='batchDelete(scope.selectedListIds)'>
删除
</el-button>
</template>
<!-- 表格操作 -->
<template #operation>
<el-button type='primary' link :icon='EditPen'>复制</el-button>
<el-button type='primary' link :icon='EditPen'>编辑</el-button>
<el-button type='primary' link :icon='Delete'>删除</el-button>
<template #operation="scope">
<el-button v-auth.device="'edit'" type='primary' link :icon='EditPen' :model-value='false' :disabled="props.DevFormContent.importFlag == 1"
@click="openDialog('edit', scope.row)">编辑
</el-button>
<el-button v-auth.device="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row.id)' >删除
</el-button>
</template>
</ProTable>
</div>
<MonitorPopup @getParameter="getParameter" ref='monitorPopup'/>
</el-tab-pane>
</template>
<script setup lang="ts">
import { ref, defineProps, reactive } from 'vue';
import { ref, defineProps, reactive, watch } from 'vue';
import ProTable from '@/components/ProTable/index.vue'; // 假设 ProTable 是自定义组件
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue';
import { getPqMonList } from '@/api/device/monitor'
import { type ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, MessageBox } from '@element-plus/icons-vue';
import MonitorPopup from '@/views/machine/device/components/monitorPopup.vue'
import { ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
import { type Monitor } from '@/api/device/interface/monitor'
import { useDictStore } from '@/stores/modules/dict';
import { useHandleData } from '@/hooks/useHandleData';
import { Device } from '@/api/device/interface/device';
import { ElMessage, ElMessageBox } from 'element-plus';
// 定义 props
const props = defineProps<{
MonIsShow: boolean;
}>();
const props = defineProps<{
MonIsShow: boolean;
DevFormContent:Device.ResPqDev
}>();
// ProTable 实例
const proTable = ref<ProTableInstance>()
const dictStore = useDictStore()
const monitorPopup = ref()
const tableData = ref<any[]>([])
const title_Type = ref('add')
// 表格配置项
const columns = reactive<ColumnProps<Monitor.ResPqMon>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'name',
label: '名称',
width: 200,
},
{
prop: '',
prop: 'busbar',
label: '所属母线',
width: 200,
},
{
prop: '',
label: '被检通道',
prop: 'num',
label: '线路号',
width: 200,
},
{
prop: '',
prop: 'pt',
label: 'PT变比',
width: 110,
},
{
prop: '',
prop: 'ct',
label: 'CT变比',
width: 130,
},
{
prop: '',
prop: 'connection',
label: '接线方式',
enum: dictStore.getDictData('Dev_Connect'),
fieldNames: {label: 'name', value: 'id'},
width: 130,
},
{
prop: '',
label: '谐波系统监测点ID',
minWidth: 250,
prop: 'statInterval',
label: '统计间隔',
width: 130,
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 200 },
])
const emit = defineEmits(['get-parameter'])
const getParameter = (data: Monitor.ResPqMon) => {
if (title_Type.value === 'edit') {
// 编辑：替换已有的数据
const index = tableData.value.findIndex(item => item.id === data.id)
if (index > -1) {
tableData.value = [
...tableData.value.slice(0, index),
data,
...tableData.value.slice(index + 1)
]
}
} else {
// 新增：追加数据
tableData.value = [...tableData.value, data]
}
emit('get-parameter', tableData.value)
}
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<Monitor.ResPqMon> = {}) => {
if(props.DevFormContent.devType == '' || props.DevFormContent.devType == undefined){
ElMessageBox.confirm(
'请先选择被检设备类型',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
},
)
return
}
title_Type.value = titleType
monitorPopup.value?.open(titleType, row,props.DevFormContent,tableData.value)
}
// 批量删除监测点台账
const batchDelete = (ids: string[]) => {
ElMessageBox.confirm(`是否批量删除监测点?`, "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
draggable: true
}).then(async () => {
tableData.value = tableData.value.filter(item => !ids.includes(item.id));
proTable.value?.clearSelection()
ElMessage({
type: "success",
message: `批量删除监测点成功!`
});
});
}
// 删除监测点台账
const handleDelete = (id: string) => {
ElMessageBox.confirm(`是否删除监测点?`, "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
draggable: true
}).then(async () => {
tableData.value = tableData.value.filter(item => item.id !== id)
proTable.value?.clearSelection()
ElMessage({
type: "success",
message: `删除监测点成功!`
});
});
}
watch(
() => props.DevFormContent.monitorList,
(newVal) => {
tableData.value = newVal|| []
},
{ immediate: true }
)
</script>

91
frontend/src/views/machine/device/index.vue
View File

@@ -47,7 +47,7 @@ import {type ColumnProps, type ProTableInstance} from '@/components/ProTable/int
import DevicePopup from '@/views/machine/device/components/devicePopup.vue'
import {CirclePlus, Delete, Download, EditPen, Upload} from '@element-plus/icons-vue'
import {useDictStore} from '@/stores/modules/dict'
import {deletePqDev, downloadTemplate, exportPqDev, getPqDev, getPqDevList, importPqDev} from '@/api/device/device/index.ts'
import {deletePqDev, downloadTemplate, exportPqDev, getPqDev, getPqDevList, importPqDev,getPqDevById} from '@/api/device/device/index.ts'
import {ElMessageBox} from 'element-plus'
import {onBeforeMount, reactive, ref} from 'vue'
import {useAppSceneStore, useModeStore} from '@/stores/modules/mode'
@@ -65,11 +65,10 @@ const boundPqDevList = ref<Device.ReqPqDevParams[]>([])//根据检测计划id查
// 存储设备类型选项
const devTypeOptions = ref<Device.ResDev[]>([])
const getTableList = async (params: any) => {
let newParams = JSON.parse(JSON.stringify(params))
newParams.searchEndTime = endDate.value
newParams.searchBeginTime = startDate.value
// newParams.searchEndTime = endDate.value
// newParams.searchBeginTime = startDate.value
const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id//获取数据字典中对应的id
newParams.pattern = patternId
return getPqDevList(newParams)
@@ -102,54 +101,41 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
},
{
prop: 'createDate',
label: '出厂日期',
label: modeStore.currentMode === '比对式' ? '投运日期' : '出厂日期',
minWidth: 200,
isShow: appSceneStore.currentScene === '0',
...(appSceneStore.currentScene === '0' ? {
search: {
render: () => {
return (
<div class='flx-flex-start'>
<TimeControl
default={'月'}
onUpdate-dates={handleDateChange}
/>
</div>
)
},
},
} : {}),
// search: {
// span: 2,
// render: () => {
// return (
// <div class='flx-flex-start'>
// <TimeControl
// default={'月'}
// onUpdate-dates={handleDateChange}
// />
// </div>
// )
// ...(appSceneStore.currentScene === '0' ? {
// search: {
// render: () => {
// return (
// <div class='flx-flex-start'>
// <TimeControl
// default={'月'}
// onUpdate-dates={handleDateChange}
// />
// </div>
// )
// },
// },
// },
// } : {}),
},
{
prop: 'devChns',
label: '通道数',
minWidth: 110,
isShow: modeStore.currentMode != '比对式',
},
{
prop: 'devVolt',
label: '额定电压（V）',
minWidth: 130,
isShow: modeStore.currentMode != '比对式',
},
{
prop: 'devCurr',
label: '额定电流（A）',
minWidth: 130,
isShow: modeStore.currentMode != '比对式',
},
{
prop: 'ip',
@@ -167,6 +153,20 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
} : {}),
minWidth: 200,
},
{
prop: 'gdName',
label: '供电公司',
isShow: modeStore.currentMode === '比对式',
search: {el: 'input'},
minWidth: 200,
},
{
prop: 'subName',
label: '变电站',
isShow: modeStore.currentMode === '比对式',
search: {el: 'input'},
minWidth: 200,
},
{
prop: 'createTime',
label: '创建时间',
@@ -197,8 +197,14 @@ const handleDateChange = (startDateTemp: string, endDateTemp: string) => {
endDate.value = endDateTemp
}
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<Device.ResPqDev> = {}) => {
devicePopup.value?.open(titleType, row, modeStore.currentMode, appSceneStore.currentScene, devTypeOptions.value)
const openDialog = async (titleType: string, row: Partial<Device.ResPqDev> = {}) => {
if(titleType === 'add'){
devicePopup.value?.open(titleType, row, modeStore.currentMode, appSceneStore.currentScene, devTypeOptions.value)
}else{
row = await getPqDevById(row)
devicePopup.value?.open(titleType, row.data, modeStore.currentMode, appSceneStore.currentScene, devTypeOptions.value)
}
}
@@ -238,17 +244,6 @@ const downloadFile = async () => {
const deviceImportExcel = ref<InstanceType<typeof ImportExcel> | null>(null)
const importFile = async (pattern: string) => {
if (pattern === '比对式') {
// const params = {
// title: '被检设备',
// showCover: false,
// tempApi: downloadTemplate,
// importApi: importPqDev,
// getTableList: proTable.value?.getTableList,
// }
// deviceImportExcel.value?.acceptParams(params)
} else {
const params = {
title: '被检设备',
showCover: false,
@@ -259,7 +254,7 @@ const importFile = async (pattern: string) => {
getTableList: proTable.value?.getTableList,
}
deviceImportExcel.value?.acceptParams(params)
}
}

2
frontend/src/views/machine/errorSystem/components/errorStandardPopup.vue
View File

@@ -1,6 +1,6 @@
<template>
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig">
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" align-center>
<div class="table-container">
<el-table :data="errorData.value"
height="500"

2
frontend/src/views/machine/errorSystem/components/errorSystemPopup.vue
View File

@@ -1,5 +1,5 @@
<template>
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" width="1660px">
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" width="1660px" align-center>
<el-tabs type="border-card">
<el-tab-pane label="基础信息">
<div>

2
frontend/src/views/machine/icd/components/icdPopup.vue
View File

@@ -1,6 +1,6 @@
<template>
<!-- 基础信息弹出框 -->
<el-dialog :model-value="dialogVisible" :title="dialogTitle" v-bind="dialogSmall" @close="close" >
<el-dialog :model-value="dialogVisible" :title="dialogTitle" v-bind="dialogSmall" @close="close" align-center>
<div>
<el-form :model="formContent" ref='dialogFormRef' :rules='rules'>
<el-form-item label="名称" prop="name" >

306
frontend/src/views/machine/standardDevice/components/standardDevicePopup.vue Normal file
View File

@@ -0,0 +1,306 @@
<template>
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" align-center>
<el-tabs type="border-card">
<el-tab-pane label="设备台账信息">
<div >
<el-form :model='formContent' ref='dialogFormRef' :rules='rules' :disabled="false" label-width="auto" class="form-three">
<el-divider >设备信息</el-divider>
<el-form-item label="设备名称" prop="name" >
<el-input v-model='formContent.name' placeholder="请输入设备名称" maxlength="32" show-word-limit/>
</el-form-item>
<el-form-item label='设备类型' prop='devType' >
<el-select v-model="formContent.devType" filterable clearable placeholder="请选择设备类型" @change="handleDevTypeChange">
<el-option
v-for="item in devTypeOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label='设备厂家' prop='manufacturer'>
<el-select v-model="formContent.manufacturer" clearable placeholder="请选择设备厂家">
<el-option
v-for="item in dictStore.getDictData('Dev_Manufacturers')"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-divider >参数信息</el-divider>
<el-form-item label='可检通道数' prop='inspectChannel' :label-width='100'>
<el-select v-model="formContent.inspectChannel" multiple collapse-tags :max-collapse-tags="4" placeholder="请选择可检通道数" clearable>
<el-option
v-for="(option, index) in pqChannelArray"
:key="index"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item label='通讯协议' prop='protocol'>
<el-select v-model="formContent.protocol" clearable placeholder="请选择通讯协议">
<el-option
v-for="item in dictStore.getDictData('Protocol')"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="IP地址" prop="ip" placeholder="请输入IP地址">
<el-input v-model="formContent.ip"/>
</el-form-item>
<el-form-item label="端口号" prop="port" placeholder="请输入端口号" >
<el-input v-model="formContent.port" />
</el-form-item>
<el-form-item label='是否加密' prop='encryptionFlag' >
<el-select v-model="formContent.encryptionFlag" clearable placeholder="请选择是否加密">
<el-option label="是" :value="1"></el-option>
<el-option label="否" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label='识别码' prop='series' clearable v-if="formContent.encryptionFlag">
<el-input v-model='formContent.series' placeholder="请输入识别码" show-password/>
</el-form-item>
<el-form-item label='密钥' prop='devKey' clearable v-if="formContent.encryptionFlag">
<el-input v-model='formContent.devKey' placeholder="请输入密钥" show-password/>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
<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 IPAddress from '@/components/IpAddress/index.vue'
import { dialogBig } from '@/utils/elementBind'
import {type StandardDevice} from '@/api/device/interface/standardDevice.ts'
import { ElMessage, type FormItemRule } from 'element-plus'
import { addPqStandardDev, updatePqStandardDev} from '@/api/device/standardDevice/index.ts'
import { computed, reactive, type Ref, ref } from 'vue'
import { useDictStore } from '@/stores/modules/dict'
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import {type Device} from '@/api/device/interface/device.ts'
// 使用 dayjs 库格式化
import dayjs from 'dayjs'
// 存储设备类型选项
const devTypeOptions = ref<Device.ResDev[]>([])
const dictStore = useDictStore()
// 定义弹出组件元信息
const dialogFormRef = ref()
const pqChannelArray = ref([
{
value: '1',
label: '1',
},
{
value: '2',
label: '2',
},
{
value: '3',
label: '3',
},
{
value: '4',
label: '4',
},
])
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = reactive<StandardDevice.ResPqStandardDevice>({
id: '',
name: '',
devType:'',
manufacturer:'',
protocol: 'MMS',
ip: '',
port: 102,
inspectChannel:'',
encryptionFlag: 0,
state: 1,
})
return { dialogVisible, titleType, formContent }
}
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
Object.assign(
formContent,{
id: '',
name: '',
devType:'',
manufacturer:'',
protocol: 'MMS',
ip: '',
port: 102,
inspectChannel:'',
encryptionFlag: 0,
state: 1,
}
)
}
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增标准设备' : '编辑标准设备'
})
//定义校验规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name : [{ required: true, message: '设备名称必填！', trigger: 'blur' }],
devType: [{ required: true, message: '设备类型必选！', trigger: 'change' }],
manufacturer:[{ required: true, message: '生产厂家必选！', trigger: 'change' }],
ip: [
{ required: true, message: 'IP地址必填！', trigger: 'blur' },
{ pattern: /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/, message: 'IP地址格式错误', trigger: 'blur' }
],
port: [
{ required: true, message: '端口号必填！', trigger: 'blur' },
{ pattern: /^(6553[0-5]|655[0-2][0-9]|64[0-9]{3}|[1-5]?[0-9]{1,4})$/, message: '端口号范围0到65535的整数', trigger: 'blur' }
],
inspectChannel:[ { required: true, message: '可检通道数必选', trigger: 'change' }],
encryptionFlag: [{ required: true, message: '是否加密必选！', trigger: 'change' }],
series: [{ required: true, message: '请输入识别码', trigger: 'blur' }],
devKey: [{ required: true, message: '请输入密钥', trigger: 'blur' }],
protocol: [{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 (formContent.encryptionFlag === 0) {
formContent.series = ''
formContent.devKey = ''
}
if (valid) {
//保存时判是否加密，把识别码密钥字段清空
if(formContent.encryptionFlag === 0){
formContent.series = null
formContent.devKey = null
}
//可检通道转为字符串逗号分隔
// 确保 inspectChannel 是数组再执行 join
if (Array.isArray(formContent.inspectChannel)) {
formContent.inspectChannel = formContent.inspectChannel
.map(Number) // 将值转为数字以保证正确排序
.sort((a, b) => a - b) // 数字升序排序
.map(String) // 恢复为字符串用于保存
.join(',');
}
if (formContent.id) {
await updatePqStandardDev(formContent);
ElMessage.success({ message: `${dialogTitle.value}成功！` })
} else {
// 新增需要把通讯协议转成字典ID
const protocolItem = dictStore.getDictData('Protocol').find(item => item.name === formContent.protocol);
if (protocolItem) {
formContent.protocol = protocolItem.id;
}
await addPqStandardDev(formContent);
ElMessage.success({ message: `${dialogTitle.value}成功！` })
}
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: StandardDevice.ResPqStandardDevice,devType:Device.ResDev[]) => {
// 重置表单
dialogFormRef.value?.resetFields()
devTypeOptions.value = devType
titleType.value = sign
if (data.id) {
Object.assign(formContent,{ ...data })
if (typeof formContent.inspectChannel === 'string') {
formContent.inspectChannel = formContent.inspectChannel.split(',').filter(Boolean)
}
handleDevTypeChange(data.devType)
} else {
resetFormContent()
}
dialogVisible.value = true
}
const handleDevTypeChange = (value: string) => {
// 在这里处理选中事件的逻辑
const dev = devTypeOptions.value.find(t =>t.id === value)
if (dev) {
const maxChannel = dev.devChns
// 动态设置 pqChannelArray 从 1 到 dev.devChns.length
pqChannelArray.value = Array.from({ length: dev.devChns }, (_, i) => ({
value: String(i + 1),
label: String(i + 1),
}))
// 过滤掉超出新通道数范围的选项
if (Array.isArray(formContent.inspectChannel)) {
formContent.inspectChannel = formContent.inspectChannel.filter(
(channel) => parseInt(channel, 10) <= maxChannel
)
}
} else {
// 可选：恢复默认值
pqChannelArray.value = [
{ value: '1', label: '1' },
{ value: '2', label: '2' },
{ value: '3', label: '3' },
{ value: '4', label: '4' },
]
}
}
// 对外映射
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
}>()
</script>

229
frontend/src/views/machine/standardDevice/index.vue Normal file
View File

@@ -0,0 +1,229 @@
<template>
<div class='table-box' ref='popupBaseView'>
<ProTable
ref='proTable'
:columns='columns'
:request-api='getTableList'
>
<!-- :requestApi="getRoleList" -->
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button v-auth.device="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
<el-button v-auth.device="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
@click='batchDelete(scope.selectedListIds)'>
删除
</el-button>
<el-button v-auth.device="'export'" type='primary' :icon='Upload' plain @click='downloadFile()'>导出</el-button>
<el-button v-auth.device="'import'" type='primary' :icon='Download' plain @click="importFile()">导入
</el-button>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button v-auth.device="'edit'" type='primary' link :icon='EditPen' :model-value='false'
@click="openDialog('edit', scope.row)">编辑
</el-button>
<el-button v-auth.device="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除
</el-button>
</template>
</ProTable>
</div>
<StandardDevicePopup :refresh-table='proTable?.getTableList' ref='standardDevicePopup'/>
<ImportExcel ref='deviceImportExcel'/>
</template>
<script setup lang='tsx' name='useRole'>
import {type StandardDevice} from '@/api/device/interface/standardDevice.ts'
import {useHandleData} from '@/hooks/useHandleData'
import {useDownload} from '@/hooks/useDownload'
import ProTable from '@/components/ProTable/index.vue'
import {type ColumnProps, type ProTableInstance} from '@/components/ProTable/interface'
import StandardDevicePopup from '@/views/machine/standardDevice/components/standardDevicePopup.vue'
import {CirclePlus, Delete, Download, EditPen, Upload} from '@element-plus/icons-vue'
import {deletePqStandardDev, getPqStandardDevList,getPqStandardDevById,exportPqStandardDev,downloadTemplate,importPqStandardDev} from '@/api/device/standardDevice/index.ts'
import {computed, onBeforeMount, reactive, ref} from 'vue'
import { getPqDev} from '@/api/device/device/index.ts'
import {type Device} from '@/api/device/interface/device.ts'
import {useDictStore} from '@/stores/modules/dict'
import { ElMessageBox } from 'element-plus'
import ImportExcel from '@/components/ImportExcel/index.vue'
// ProTable 实例
const proTable = ref<ProTableInstance>()
const standardDevicePopup = ref()
// 存储设备类型选项
const devTypeOptions = ref<Device.ResDev[]>([])
const dictStore = useDictStore()
const getTableList = async (params: any) => {
let newParams = JSON.parse(JSON.stringify(params))
return getPqStandardDevList(newParams)
}
// 表格配置项
const columns = reactive<ColumnProps<StandardDevice.ResPqStandardDevice>[]>([
{type: 'selection', fixed: 'left', width: 70},
{type: 'index', fixed: 'left', width: 70, label: '序号'},
{
prop: 'name',
label: '名称',
search: {el: 'input'},
minWidth: 200,
},
{
prop: 'devType',
label: '设备类型',
enum:computed(() => {
return devTypeOptions.value.map(item => ({
id: item.id,
name: item.name,
icd: item.icd,
power: item.power,
devVolt: item.devVolt,
devCurr: item.devCurr,
devChns: item.devChns,
}))
}),
search: {el: 'select', props: {filterable: true}, order: 1},
fieldNames: {label: 'name', value: 'id'},
render: (scope) => {
// 查找设备类型名称
const name = devTypeOptions.value.find(option => option.id === scope.row.devType)
return <span>{name?.name}</span>
},
minWidth: 200,
},
{
prop: 'inspectChannel',
label: '可检通道',
minWidth: 150,
render: (scope) => {
const codes = scope.row.inspectChannel // 获取当前行的 datasourceIds 字段
if (!codes) {
return '/'
}
// 确保 codes 是一个字符串
const codeString = Array.isArray(codes) ? codes.join(',') : codes
const codeArray = codeString.split(',')
return codeArray.length > 1 ? codeArray.join(', ') : codeArray[0]
},
},
{
prop: 'ip',
label: 'IP地址',
minWidth: 110,
},
{
prop: 'manufacturer',
label: '设备厂家',
enum: dictStore.getDictData('Dev_Manufacturers'),
search: {el: 'select', props: {filterable: true}, order: 1},
fieldNames: {label: 'name', value: 'id'},
minWidth: 200,
},
{
prop: 'createTime',
label: '创建时间',
minWidth: 200,
render: scope => {
if (scope.row.createTime) {
const date = new Date(scope.row.createTime);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
return '';
}
},
{prop: 'operation', label: '操作', fixed: 'right', width: 200},
])
const formContent = reactive<StandardDevice.ResPqStandardDevice>({
id: '',
name: '',
devType:'',
manufacturer:'',
hardwareVersion: '',
softwareVersion: '',
ip: '172.17.102.200',
port: 102,
inspectChannel:'',
encryptionFlag: 0,
state: 1,
})
// 打开 drawer(新增、编辑)
const openDialog = async (titleType: string, row: Partial<StandardDevice.ResPqStandardDevice> = {}) => {
if(titleType === 'add'){
row = formContent
standardDevicePopup.value?.open(titleType, row,devTypeOptions.value)
}else{
row = await getPqStandardDevById(row)
standardDevicePopup.value?.open(titleType, row.data,devTypeOptions.value)
}
}
// 批量删除设备
const batchDelete = async (id: string[]) => {
await useHandleData(deletePqStandardDev, id, '删除所选设备')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
// 删除设备
const handleDelete = async (params: StandardDevice.ResPqStandardDevice) => {
await useHandleData(deletePqStandardDev, [params.id] , `删除【${params.name}】设备`)
proTable.value?.getTableList()
}
// 导出设备
const downloadFile = async () => {
ElMessageBox.confirm('确认导出标准设备?', '温馨提示', {type: 'warning'}).then(() => {
useDownload(exportPqStandardDev, '标准设备导出数据', {...proTable.value?.searchParam}, false, '.xlsx')
})
}
//导入设备
const deviceImportExcel = ref<InstanceType<typeof ImportExcel> | null>(null)
const importFile = async () => {
const params = {
title: '标准设备',
showCover: false,
tempApi: downloadTemplate,
importApi: importPqStandardDev,
getTableList: proTable.value?.getTableList,
}
console.log(params)
deviceImportExcel.value?.acceptParams(params)
}
onBeforeMount(async () => {
const response = await getPqDev()
devTypeOptions.value = (response.data as Device.ResDev[]).map(item => ({
id: item.id,
name: item.name,
icd: item.icd,
power: item.power,
devVolt: item.devVolt,
devCurr: item.devCurr,
devChns: item.devChns,
}))
})
</script>

2
frontend/src/views/machine/testSource/components/parameterPopup.vue
View File

@@ -1,6 +1,6 @@
<template>
<el-dialog v-model="dialogVisible" :title="dialogTitle"
v-bind="dialogSmall" @close="close">
v-bind="dialogSmall" @close="close" align-center>
<div>
<el-form :model="formContent" ref="dialogFormRef" :rules="rules">
<el-form-item label="参数所属" prop="pId" :label-width="100">

2
frontend/src/views/machine/testSource/components/testSourcePopup.vue
View File

@@ -1,5 +1,5 @@
<template>
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig">
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" align-center>
<div >
<el-form :model="formContent" ref='dialogFormRef' :rules='rules' :disabled="tableIsDisable" label-width="auto" class="form-three">
<el-form-item label="设备类型" prop="devType" >