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

UPDATE: 处理控制台警告问题

Browse Source
This commit is contained in:
贾同学
2025-10-10 13:23:40 +08:00
parent 8e0b3be438
commit b319a89501
45 changed files with 6390 additions and 6341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/views/machine/controlSource/components/controlSourceDetail.vue
View File

@@ -6,7 +6,7 @@
</div>
<div class="data-check-content">
<div class="content-tree">
<Tree ref="treeRef" :treeData="treeData" @setTab="setTab" />
<MachineTree ref="treeRef" :treeData="treeData" @setTab="setTab" />
</div>
<div class="content-right-Tabs" style="height: calc(100vh - 315px); width: 100px">
@@ -204,33 +204,22 @@
</template>
<script setup lang="ts">
import { type PropType, ref, nextTick, onMounted, watch } from 'vue'
import Tree from './tree.vue'
import { nextTick, onMounted, type PropType, ref, watch } from 'vue'
import MachineTree from './machineTree.vue'
import Commun from '@/views/machine/testScript/components//communication.vue'
import { type CascaderOption, ElMessage } from 'element-plus'
import { ElMessage } from 'element-plus'
import { getTreeData } from '@/api/check/test'
import {
CirclePlus,
Delete,
Check,
CopyDocument,
View,
EditPen,
VideoPlay,
VideoPause,
Loading
} from '@element-plus/icons-vue'
import { VideoPause, VideoPlay, View } from '@element-plus/icons-vue'
import type { TestScript } from '@/api/device/interface/testScript'
import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue'
import { CheckData } from '@/api/check/interface'
import { dlsDetails, deleteDtls, updateDtls, addScriptDtls, checkDataList } from '@/api/device/testScript'
import { dlsDetails } from '@/api/device/testScript'
import { useDictStore } from '@/stores/modules/dict'
import { useHandleData } from '@/hooks/useHandleData'
import { scriptDtlsCheckDataList } from '@/api/device/testScript/index'
import ViewRow from '@/views/machine/testScript/components/viewRow.vue'
import { startSimulateTest, closeSimulateTest } from '@/api/device/controlSource/index.ts'
import { closeSimulateTest, startSimulateTest } from '@/api/device/controlSource/index.ts'
import { controlSource } from '@/api/device/interface/controlSource'
import {JwtUtil} from "@/utils/jwtUtil";
import { JwtUtil } from '@/utils/jwtUtil'
interface TabOption {
label?: string
name?: string

330
frontend/src/views/machine/controlSource/components/tree.vue → frontend/src/views/machine/controlSource/components/machineTree.vue
View File

@@ -1,165 +1,165 @@
<template>
<el-tree
node-key="id"
default-expand-all
:data="props.treeData"
:props="defaultProps"
style="width: 100%"
:expand-on-click-node="false"
:highlight-current="true"
@node-click="handleNodeClick"
show-checkbox
:check-strictly="true"
@check-change="handleCheckChange"
ref="treeRef"
>
<template #default="{ node, data }">
<el-tooltip effect="dark" :content="data.sourceDesc || data.scriptTypeName" placement="top" :hide-after="0">
<div class="custom-tree-node">
{{ data.scriptTypeName || data.sourceDesc }}
</div>
</el-tooltip>
</template>
</el-tree>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
import { CheckData } from '@/api/check/interface'
import { da } from 'element-plus/es/locale'
import { on } from 'events'
const props = defineProps({
treeData: {
type: Array,
required: true
}
})
const emit = defineEmits(['setTab'])
const dataTree = ref<CheckData.TreeItem[]>([])
const defaultProps = {
children: 'children',
label: 'scriptTypeName',
pid: 'pid'
}
const activeName = ref('')
const childActiveName = ref('')
const activeIndex = ref()
const treeRef = ref()
const handleNodeClick = (data, node) => {
if(data.index!= null){
let code = ['Base', 'VOL', 'Freq', 'Harm', 'Base_0_10', 'Base_20_85', 'Base_110_200']
const parents = getParentNodes(node, [])
parents.pop()
parents.unshift(node.data)
parents.reverse()
let active = parents[0].scriptTypeCode
let childActive = findTargetCodes(parents, code)[0] || ''
// 获取当前节点的直接父节点
if (activeName.value != active || childActiveName.value != childActive || activeIndex.value != data.index) {
activeName.value = active
childActiveName.value = childActive
emit('setTab', {
activeName: active,
childActiveName: childActive,
activeIndex:data.index
})
}
}
}
// 返回父级
const getParentNodes = (node, parents) => {
if (node.parent) {
// 将父节点添加到数组中
parents.push(node.parent.data)
// 递归获取更高层级的父节点
getParentNodes(node.parent, parents)
}
return parents
}
// 判断childActiveName值
function findTargetCodes(data: any[], targetCodes: string[]) {
let result: string[] = []
data.forEach(item => {
if (item.scriptTypeCode != null) {
if (targetCodes.includes(item.scriptTypeCode)) {
result.push(item.scriptTypeCode)
}
}
})
return result
// for (let item of data) {
// // 判断当前项的 scriptTypeCode 是否包含目标值
// if (item.scriptTypeCode !=null && targetCodes.includes(item.scriptTypeCode)) {
// result.push(item.scriptTypeCode)
// return result
// }
// // 如果存在 children，递归检查
// if (item.children && item.children.length > 0) {
// result = result.concat(findTargetCodes(item.children, targetCodes))
// }
// }
// return result
}
function handleCheckChange(data,isChecked) {
if (isChecked)
{
// 如果没有子节点，允许勾选
const checked = [data.id]; // id为tree的node-key属性
treeRef.value?.setCheckedKeys(checked);
emit('setTab', {
activeName: data.scriptType,
childActiveName: data.scriptTypeCode,
activeIndex:data.index
})
}
}
// 递归查找第一个节点的最后一层子节点
function findFirstLeafNode(node: any): any {
if (node.children && node.children.length > 0) {
return findFirstLeafNode(node.children[0]);
}
return node;
}
const checkTree = () => {
console.log('checkTree11')
console.log('checkTree22',props.treeData.length)
console.log('checkTree33',treeRef.value)
if (props.treeData.length > 0 && treeRef.value) {
console.log('checkTree44')
const firstNode = props.treeData[0];
const firstLeafNode = findFirstLeafNode(firstNode);
const firstLeafNodeId = firstLeafNode.id;
treeRef.value.setCheckedKeys([firstLeafNodeId]);
}
}
// 确保在组件挂载后也执行一次
onMounted(() => {
console.log('onMounted',props.treeData);
nextTick(() => {
checkTree()
});
});
// // 对外映射
defineExpose({ checkTree })
</script>
<style lang="scss" scoped>
.custom-tree-node {
max-width: 230px;
overflow-x: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
</style>
<template>
<el-tree
node-key="id"
default-expand-all
:data="props.treeData"
:props="defaultProps"
style="width: 100%"
:expand-on-click-node="false"
:highlight-current="true"
@node-click="handleNodeClick"
show-checkbox
:check-strictly="true"
@check-change="handleCheckChange"
ref="treeRef"
>
<template #default="{ node, data }">
<el-tooltip effect="dark" :content="data.sourceDesc || data.scriptTypeName" placement="top" :hide-after="0">
<div class="custom-tree-node">
{{ data.scriptTypeName || data.sourceDesc }}
</div>
</el-tooltip>
</template>
</el-tree>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
import { CheckData } from '@/api/check/interface'
import { da } from 'element-plus/es/locale'
import { on } from 'events'
const props = defineProps({
treeData: {
type: Array,
required: true
}
})
const emit = defineEmits(['setTab'])
const dataTree = ref<CheckData.TreeItem[]>([])
const defaultProps = {
children: 'children',
label: 'scriptTypeName',
pid: 'pid'
}
const activeName = ref('')
const childActiveName = ref('')
const activeIndex = ref()
const treeRef = ref()
const handleNodeClick = (data, node) => {
if(data.index!= null){
let code = ['Base', 'VOL', 'Freq', 'Harm', 'Base_0_10', 'Base_20_85', 'Base_110_200']
const parents = getParentNodes(node, [])
parents.pop()
parents.unshift(node.data)
parents.reverse()
let active = parents[0].scriptTypeCode
let childActive = findTargetCodes(parents, code)[0] || ''
// 获取当前节点的直接父节点
if (activeName.value != active || childActiveName.value != childActive || activeIndex.value != data.index) {
activeName.value = active
childActiveName.value = childActive
emit('setTab', {
activeName: active,
childActiveName: childActive,
activeIndex:data.index
})
}
}
}
// 返回父级
const getParentNodes = (node, parents) => {
if (node.parent) {
// 将父节点添加到数组中
parents.push(node.parent.data)
// 递归获取更高层级的父节点
getParentNodes(node.parent, parents)
}
return parents
}
// 判断childActiveName值
function findTargetCodes(data: any[], targetCodes: string[]) {
let result: string[] = []
data.forEach(item => {
if (item.scriptTypeCode != null) {
if (targetCodes.includes(item.scriptTypeCode)) {
result.push(item.scriptTypeCode)
}
}
})
return result
// for (let item of data) {
// // 判断当前项的 scriptTypeCode 是否包含目标值
// if (item.scriptTypeCode !=null && targetCodes.includes(item.scriptTypeCode)) {
// result.push(item.scriptTypeCode)
// return result
// }
// // 如果存在 children，递归检查
// if (item.children && item.children.length > 0) {
// result = result.concat(findTargetCodes(item.children, targetCodes))
// }
// }
// return result
}
function handleCheckChange(data,isChecked) {
if (isChecked)
{
// 如果没有子节点，允许勾选
const checked = [data.id]; // id为tree的node-key属性
treeRef.value?.setCheckedKeys(checked);
emit('setTab', {
activeName: data.scriptType,
childActiveName: data.scriptTypeCode,
activeIndex:data.index
})
}
}
// 递归查找第一个节点的最后一层子节点
function findFirstLeafNode(node: any): any {
if (node.children && node.children.length > 0) {
return findFirstLeafNode(node.children[0]);
}
return node;
}
const checkTree = () => {
console.log('checkTree11')
console.log('checkTree22',props.treeData.length)
console.log('checkTree33',treeRef.value)
if (props.treeData.length > 0 && treeRef.value) {
console.log('checkTree44')
const firstNode = props.treeData[0];
const firstLeafNode = findFirstLeafNode(firstNode);
const firstLeafNodeId = firstLeafNode.id;
treeRef.value.setCheckedKeys([firstLeafNodeId]);
}
}
// 确保在组件挂载后也执行一次
onMounted(() => {
console.log('onMounted',props.treeData);
nextTick(() => {
checkTree()
});
});
// // 对外映射
defineExpose({ checkTree })
</script>
<style lang="scss" scoped>
.custom-tree-node {
max-width: 230px;
overflow-x: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
</style>

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

@@ -1,199 +1,210 @@
<!-- components/MonitorPointTable.vue -->
<template>
<div class='table-box'>
<div class="table-box">
<ProTable
ref='proTable'
:pagination="false"
:toolButton="false"
:columns='columns'
:data="tableData"
:style="{ height: tableHeight + 'px',overflow:'hidden'}"
ref="proTable"
:pagination="false"
:toolButton="false"
:columns="columns"
:data="tableData"
:style="{ height: tableHeight + 'px', overflow: 'hidden' }"
>
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<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="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>
<!-- 表格 header 按钮 -->
<template #tableHeader="scope">
<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="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'/>
</template>
<script setup lang="ts">
import { ref, defineProps, reactive, watch } from 'vue';
import ProTable from '@/components/ProTable/index.vue'; // 假设 ProTable 是自定义组件
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';
</div>
<MonitorPopup @getParameter="getParameter" ref="monitorPopup" />
</template>
// 定义 props
const props = defineProps<{
DevFormContent:Device.ResPqDev,
tableHeight?: number, // 接收外部传入的高度
selectOptions: Record<string, Device.SelectOption[]>,
}>();
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import ProTable from '@/components/ProTable/index.vue' // 假设 ProTable 是自定义组件
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import MonitorPopup from '@/views/machine/device/components/monitorPopup.vue'
import { type ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { type Monitor } from '@/api/device/interface/monitor'
import { useDictStore } from '@/stores/modules/dict'
import { Device } from '@/api/device/interface/device'
import { ElMessage, ElMessageBox } from 'element-plus'
// ProTable 实例
const proTable = ref<ProTableInstance>()
const dictStore = useDictStore()
const monitorPopup = ref()
const tableData = ref<any[]>([])
const title_Type = ref('add')
// 定义 props
const props = defineProps<{
DevFormContent: Device.ResPqDev
tableHeight?: number // 接收外部传入的高度
selectOptions: Record<string, Device.SelectOption[]>
}>()
// 表格配置项
// 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: 'busbar',
label: '所属母线',
width: 200,
},
{
prop: 'num',
label: '线路号',
width: 200,
},
{
prop: 'pt',
label: 'PT变比',
width: 110,
},
{
prop: 'ct',
label: 'CT变比',
width: 130,
},
{
prop: 'connection',
label: '接线方式',
enum: dictStore.getDictData('Dev_Connect'),
fieldNames: {label: 'name', value: 'id'},
width: 130,
},
{
prop: 'statInterval',
label: '统计间隔',
width: 130,
},
{
prop: 'checkFlag',
label: '是否参与检测',
render: (scope: any) => {
return scope.row.checkFlag === 1 ? '是' : '否'
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'name',
label: '名称',
width: 200
},
width: 130,
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 200 },
{
prop: 'busbar',
label: '所属母线',
width: 200
},
{
prop: 'num',
label: '线路号',
width: 200
},
{
prop: 'pt',
label: 'PT变比',
width: 110
},
{
prop: 'ct',
label: 'CT变比',
width: 130
},
{
prop: 'connection',
label: '接线方式',
enum: dictStore.getDictData('Dev_Connect'),
fieldNames: { label: 'name', value: 'id' },
width: 130
},
{
prop: 'statInterval',
label: '统计间隔',
width: 130
},
{
prop: 'checkFlag',
label: '是否参与检测',
render: (scope: any) => {
return scope.row.checkFlag === 1 ? '是' : '否'
},
width: 130
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 200 }
])
const emit = defineEmits(['get-parameter'])
const getParameter = (data: Monitor.ResPqMon) => {
console.log('data', data)
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)
]
console.log('data', data)
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]
}
} else {
// 新增：追加数据
tableData.value = [...tableData.value, data]
}
emit('get-parameter', tableData.value)
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, props.selectOptions)
}
// 打开 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,props.selectOptions)
}
// 批量删除监测点台账
const batchDelete = (ids: string[]) => {
ElMessageBox.confirm(`是否批量删除监测点?`, "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
// 批量删除监测点台账
const batchDelete = (ids: string[]) => {
ElMessageBox.confirm(`是否批量删除监测点?`, '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
draggable: true
}).then(async () => {
tableData.value = tableData.value.filter(item => !ids.includes(item.id));
}).then(async () => {
tableData.value = tableData.value.filter(item => !ids.includes(item.id))
proTable.value?.clearSelection()
emit('get-parameter', tableData.value)
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()
emit('get-parameter', tableData.value)
ElMessage({
type: "success",
message: `删除监测点成功!`
});
});
emit('get-parameter', tableData.value)
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()
emit('get-parameter', tableData.value)
ElMessage({
type: 'success',
message: `删除监测点成功!`
})
})
}
watch(
() => props.DevFormContent.monitorList,
(newVal) => {
tableData.value = newVal|| []
},
{ immediate: true }
() => props.DevFormContent.monitorList,
newVal => {
tableData.value = newVal || []
},
{ immediate: true }
)
</script>
</script>

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

@@ -1,8 +1,8 @@
<template>
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" align-center>
<div class="table-container">
<el-table :data="errorData.value"
<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"
:header-cell-style="rowClass"
:cell-style="{ textAlign: 'center' }"
@@ -10,309 +10,374 @@
:span-method="spanMethod"
:border="true"
class="custom-table"
>
<el-table-column label="被测量">
<el-table-column prop="col1" width="150"/>
<el-table-column prop="col2" width="120"/>
</el-table-column>
<el-table-column prop="deviceLevel" label="检测装置级别" width="120"/>
<el-table-column prop="measurementType" label="测量类型"/>
<el-table-column prop="condition" label="测量条件"/>
<el-table-column prop="maxErrorValue" label="最大误差"/>
</el-table>
</div>
<div>
<label class="left-align-label">注1：UN：测量的标称电压；IN：测量仪器的标称电流；Uh和Ih：测量值，h表示谐波次数。</label>
</div>
<div>
<label class="left-align-label">注2：对于数字式接入监测终端，与电能质量信号采集单元联合准确度需满足本表要求。</label>
</div>
</el-dialog>
>
<el-table-column label="被测量">
<el-table-column prop="col1" width="150" />
<el-table-column prop="col2" width="120" />
</el-table-column>
<el-table-column prop="deviceLevel" label="检测装置级别" width="120" />
<el-table-column prop="measurementType" label="测量类型" />
<el-table-column prop="condition" label="测量条件" />
<el-table-column prop="maxErrorValue" label="最大误差" />
</el-table>
</div>
<div>
<label class="left-align-label">
注1：UN：测量的标称电压；IN：测量仪器的标称电流；Uh和Ih：测量值，h表示谐波次数。
</label>
</div>
<div>
<label class="left-align-label">
注2：对于数字式接入监测终端，与电能质量信号采集单元联合准确度需满足本表要求。
</label>
</div>
</el-dialog>
</template>
<script lang="ts" setup name="IndicatorTypeDialog">
import {computed, type CSSProperties, defineProps, ref} from 'vue';
import {dialogBig} from '@/utils/elementBind'
import type {ErrorSystem} from '@/api/device/interface/error'
import { computed, type CSSProperties, ref } from 'vue'
import { dialogBig } from '@/utils/elementBind'
import type { ErrorSystem } from '@/api/device/interface/error'
import errorDataList from '@/api/device/error/errorData'
import type {TableColumnCtx} from 'element-plus'
import {useDictStore} from '@/stores/modules/dict'
import type { TableColumnCtx } from 'element-plus'
import { useDictStore } from '@/stores/modules/dict'
const dictStore = useDictStore()
const errorData = ref<ErrorSystem.Error_detail[]>([]);
const errorData = ref<ErrorSystem.Error_detail[]>([])
const dialogTitle = ref()
const devLevelName = ref<string>('') // 假设 devLevelName 是一个 ref
function useMetaInfo() {
const dialogVisible = ref(false)
const formContent = ref<ErrorSystem.ErrorSystemList>({
id: '',
name: '',
standardName: '',
standardTime: '',
devLevel: '',
enable: 1,
state: 1,
})
return {dialogVisible, formContent}
const dialogVisible = ref(false)
const formContent = ref<ErrorSystem.ErrorSystemList>({
id: '',
name: '',
standardName: '',
standardTime: '',
devLevel: '',
enable: 1,
state: 1
})
return { dialogVisible, formContent }
}
const {dialogVisible, formContent} = useMetaInfo()
const { dialogVisible, formContent } = useMetaInfo()
interface SpanMethodProps {
row: ErrorSystem.ErrorSystemDetail
column: TableColumnCtx<ErrorSystem.ErrorSystemDetail>
rowIndex: number
columnIndex: number
row: ErrorSystem.ErrorSystemDetail
column: TableColumnCtx<ErrorSystem.ErrorSystemDetail>
rowIndex: number
columnIndex: number
}
const rowClass = ({row, column, rowIndex, columnIndex}: { row: any; column: any; rowIndex: number; columnIndex: number }): CSSProperties => {
let res: CSSProperties = {
textAlign: 'center' as CSSProperties['textAlign'],
backgroundColor: 'var(--el-color-primary)',
color: '#fff'
}
if (rowIndex === 1) {
res = {...res, display: 'none'}
}
return res
const rowClass = ({
row,
column,
rowIndex,
columnIndex
}: {
row: any
column: any
rowIndex: number
columnIndex: number
}): CSSProperties => {
let res: CSSProperties = {
textAlign: 'center' as CSSProperties['textAlign'],
backgroundColor: 'var(--el-color-primary)',
color: '#fff'
}
if (rowIndex === 1) {
res = { ...res, display: 'none' }
}
return res
}
const spanMethod = computed(() => {
return devLevelName.value === 'A级' ? spanAMethod : spanSMethod
return devLevelName.value === 'A级' ? spanAMethod : spanSMethod
})
const spanAMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
if (columnIndex === 0) {
if (rowIndex <= 1 || rowIndex === 7 || rowIndex == 20) {//0电压偏差，1频率偏差，7闪变，20功率，简单的跨两列
return {
rowspan: 1,
colspan: 2,
}
const spanAMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
if (columnIndex === 0) {
if (rowIndex <= 1 || rowIndex === 7 || rowIndex == 20) {
//0电压偏差，1频率偏差，7闪变，20功率，简单的跨两列
return {
rowspan: 1,
colspan: 2
}
}
if (rowIndex === 2) {
//2三相不平衡跨三行两列
return {
rowspan: 3,
colspan: 2
}
}
if (
rowIndex === 3 ||
rowIndex === 4 ||
rowIndex === 6 ||
(rowIndex >= 9 && rowIndex <= 15) ||
(rowIndex >= 17 && rowIndex <= 19) ||
rowIndex === 22 ||
rowIndex === 24
) {
//这些行不显示
return {
rowspan: 0,
colspan: 0
}
}
if (rowIndex === 5 || rowIndex === 23) {
//5电压波动，23电压暂降暂升中断跨两列
return {
rowspan: 2,
colspan: 1
}
}
if (rowIndex === 8) {
//谐波和间谐波跨八行两列
return {
rowspan: 8,
colspan: 2
}
}
if (rowIndex === 16) {
//高频次谐波跨八行两列
return {
rowspan: 4,
colspan: 2
}
}
if (rowIndex === 21 || rowIndex === 22) {
//电流跨两行两列
return {
rowspan: 2,
colspan: 2
}
}
}
if (rowIndex === 2) {//2三相不平衡跨三行两列
return {
rowspan: 3,
colspan: 2,
}
if (columnIndex === 1) {
if (rowIndex <= 4 || (rowIndex >= 7 && rowIndex <= 22)) {
return {
rowspan: 0,
colspan: 0
}
}
}
if (rowIndex === 3 || rowIndex === 4 || rowIndex === 6 ||
rowIndex >= 9 && rowIndex <= 15 ||
rowIndex >= 17 && rowIndex <= 19 ||
rowIndex === 22 || rowIndex === 24) {//这些行不显示
return {
rowspan: 0,
colspan: 0,
}
if (columnIndex === 2 || columnIndex === 3) {
if (
rowIndex === 2 ||
rowIndex === 8 ||
rowIndex === 10 ||
rowIndex === 12 ||
rowIndex === 14 ||
rowIndex === 16 ||
rowIndex === 18 ||
rowIndex === 21
) {
return {
rowspan: 2,
colspan: 1
}
}
if (
rowIndex === 3 ||
rowIndex === 9 ||
rowIndex === 11 ||
rowIndex === 13 ||
rowIndex === 15 ||
rowIndex === 17 ||
rowIndex === 19 ||
rowIndex === 22
) {
return {
rowspan: 0,
colspan: 0
}
}
}
if (rowIndex === 5 || rowIndex === 23) {//5电压波动，23电压暂降暂升中断跨两列
return {
rowspan: 2,
colspan: 1,
}
}
if (rowIndex === 8) {//谐波和间谐波跨八行两列
return {
rowspan: 8,
colspan: 2,
}
}
if (rowIndex === 16) {//高频次谐波跨八行两列
return {
rowspan: 4,
colspan: 2,
}
}
if (rowIndex === 21 || rowIndex === 22) {//电流跨两行两列
return {
rowspan: 2,
colspan: 2,
}
}
}
if (columnIndex === 1) {
if (rowIndex <= 4 || rowIndex >= 7 && rowIndex <= 22) {
return {
rowspan: 0,
colspan: 0,
}
}
}
if (columnIndex === 2 || columnIndex === 3) {
if (rowIndex === 2 || rowIndex === 8 || rowIndex === 10 ||
rowIndex === 12 || rowIndex === 14 || rowIndex === 16 ||
rowIndex === 18 || rowIndex === 21) {
return {
rowspan: 2,
colspan: 1,
}
}
if (rowIndex === 3 || rowIndex === 9 || rowIndex === 11 ||
rowIndex === 13 || rowIndex === 15 || rowIndex === 17 ||
rowIndex === 19 || rowIndex === 22) {
return {
rowspan: 0,
colspan: 0,
}
}
}
};
}
const spanSMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
if (columnIndex === 0) {
if (rowIndex <= 1 || rowIndex === 8 || rowIndex == 17) {//0电压偏差，1频率偏差，7闪变，20功率，简单的跨两列
return {
rowspan: 1,
colspan: 2,
}
const spanSMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
if (columnIndex === 0) {
if (rowIndex <= 1 || rowIndex === 8 || rowIndex == 17) {
//0电压偏差，1频率偏差，7闪变，20功率，简单的跨两列
return {
rowspan: 1,
colspan: 2
}
}
if (rowIndex === 2) {
//2三相不平衡跨三行两列
return {
rowspan: 3,
colspan: 2
}
}
if (
rowIndex === 3 ||
rowIndex === 4 ||
rowIndex === 6 ||
rowIndex === 7 ||
(rowIndex >= 10 && rowIndex <= 12) ||
(rowIndex >= 14 && rowIndex <= 16) ||
rowIndex === 19 ||
rowIndex === 21 ||
rowIndex === 22
) {
//这些行不显示
return {
rowspan: 0,
colspan: 0
}
}
if (rowIndex === 5 || rowIndex === 20) {
//5电压波动，23电压暂降暂升中断跨两行
return {
rowspan: 3,
colspan: 1
}
}
if (rowIndex === 9 || rowIndex === 13) {
//谐波和间谐波跨八行两列
return {
rowspan: 4,
colspan: 2
}
}
if (rowIndex === 18) {
//电流跨两行两列
return {
rowspan: 2,
colspan: 2
}
}
}
if (rowIndex === 2) {//2三相不平衡跨三行两列
return {
rowspan: 3,
colspan: 2,
}
if (columnIndex === 1) {
if (rowIndex === 6 || rowIndex === 21) {
return {
rowspan: 2,
colspan: 1
}
}
if (rowIndex <= 4 || (rowIndex >= 7 && rowIndex <= 19) || rowIndex === 22) {
return {
rowspan: 0,
colspan: 0
}
}
}
if (rowIndex === 3 || rowIndex === 4 || rowIndex === 6 || rowIndex === 7 ||
rowIndex >= 10 && rowIndex <= 12 ||
rowIndex >= 14 && rowIndex <= 16 ||
rowIndex === 19 || rowIndex === 21 || rowIndex === 22) {//这些行不显示
return {
rowspan: 0,
colspan: 0,
}
if (columnIndex === 2) {
if (
rowIndex === 2 ||
rowIndex === 6 ||
rowIndex === 9 ||
rowIndex === 11 ||
rowIndex === 13 ||
rowIndex === 15 ||
rowIndex === 18 ||
rowIndex === 21
) {
return {
rowspan: 2,
colspan: 1
}
}
if (
rowIndex === 3 ||
rowIndex === 7 ||
rowIndex === 10 ||
rowIndex === 12 ||
rowIndex === 14 ||
rowIndex === 16 ||
rowIndex === 19 ||
rowIndex === 22
) {
return {
rowspan: 0,
colspan: 0
}
}
}
if (rowIndex === 5 || rowIndex === 20) {//5电压波动，23电压暂降暂升中断跨两行
return {
rowspan: 3,
colspan: 1,
}
if (columnIndex === 3) {
if (
rowIndex === 2 ||
rowIndex === 6 ||
rowIndex === 9 ||
rowIndex === 11 ||
rowIndex === 13 ||
rowIndex === 15 ||
rowIndex === 18 ||
rowIndex === 21
) {
return {
rowspan: 2,
colspan: 1
}
}
if (
rowIndex === 3 ||
rowIndex === 7 ||
rowIndex === 10 ||
rowIndex === 12 ||
rowIndex === 14 ||
rowIndex === 16 ||
rowIndex === 19 ||
rowIndex === 22
) {
return {
rowspan: 0,
colspan: 0
}
}
}
if (rowIndex === 9 || rowIndex === 13) {//谐波和间谐波跨八行两列
return {
rowspan: 4,
colspan: 2,
}
}
if (rowIndex === 18) {//电流跨两行两列
return {
rowspan: 2,
colspan: 2,
}
}
}
if (columnIndex === 1) {
if (rowIndex === 6 || rowIndex === 21) {
return {
rowspan: 2,
colspan: 1,
}
}
if (rowIndex <= 4 || rowIndex >= 7 && rowIndex <= 19 || rowIndex === 22) {
return {
rowspan: 0,
colspan: 0,
}
}
}
if (columnIndex === 2) {
if (rowIndex === 2 || rowIndex === 6 || rowIndex === 9 ||
rowIndex === 11 || rowIndex === 13 || rowIndex === 15 ||
rowIndex === 18 || rowIndex === 21) {
return {
rowspan: 2,
colspan: 1,
}
}
if (rowIndex === 3 || rowIndex === 7 ||
rowIndex === 10 || rowIndex === 12 ||
rowIndex === 14 || rowIndex === 16 ||
rowIndex === 19 || rowIndex === 22) {
return {
rowspan: 0,
colspan: 0,
}
}
}
if (columnIndex === 3) {
if (rowIndex === 2 || rowIndex === 6 || rowIndex === 9 ||
rowIndex === 11 || rowIndex === 13 || rowIndex === 15 ||
rowIndex === 18 || rowIndex === 21) {
return {
rowspan: 2,
colspan: 1,
}
}
if (rowIndex === 3 || rowIndex === 7 || rowIndex === 10 ||
rowIndex === 12 || rowIndex === 14 || rowIndex === 16 ||
rowIndex === 19 || rowIndex === 22) {
return {
rowspan: 0,
colspan: 0,
}
}
}
};
}
// 关闭弹窗
const close = () => {
dialogVisible.value = false
dialogVisible.value = false
}
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: ErrorSystem.ErrorSystemList) => {
dialogTitle.value = sign + ' 误差体系'
dialogVisible.value = true
dialogTitle.value = sign + ' 误差体系'
dialogVisible.value = true
if (data.id) {
formContent.value = data as ErrorSystem.ErrorSystemList;
devLevelName.value = dictStore.getDictData('Dev_Level').find(item => item.id === data.devLevel)?.name || '';
if (data.id) {
formContent.value = data as ErrorSystem.ErrorSystemList
devLevelName.value = dictStore.getDictData('Dev_Level').find(item => item.id === data.devLevel)?.name || ''
if (devLevelName.value === 'A级' || data.devLevel === 'A级') {
errorData.value = errorDataList.errorADetail as unknown as ErrorSystem.Error_detail[];
} else {
errorData.value = errorDataList.errorSDetail as unknown as ErrorSystem.Error_detail[];
if (devLevelName.value === 'A级' || data.devLevel === 'A级') {
errorData.value = errorDataList.errorADetail as unknown as ErrorSystem.Error_detail[]
} else {
errorData.value = errorDataList.errorSDetail as unknown as ErrorSystem.Error_detail[]
}
}
}
}
// 对外映射
defineExpose({open})
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
refreshTable: (() => Promise<void>) | undefined
}>()
</script>
<style>
.table-container {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
}
.custom-table {
margin-bottom: 20px; /* 调整表格和注释之间的间距 */
margin-bottom: 20px; /* 调整表格和注释之间的间距 */
}
.notes-container {
text-align: center;
width: 100%; /* 确保注释容器宽度与表格一致 */
text-align: center;
width: 100%; /* 确保注释容器宽度与表格一致 */
}
.notes-container label {
display: block; /* 使每个label标签上下排列 */
margin-bottom: 10px; /* 调整两个label之间的间距 */
display: block; /* 使每个label标签上下排列 */
margin-bottom: 10px; /* 调整两个label之间的间距 */
}
</style>

588
frontend/src/views/machine/errorSystem/components/errorSystemDetailTable.vue
View File

@@ -1,350 +1,372 @@
<template>
<div class="dialog-footer">
<el-button :icon='CirclePlus' type="primary" @click="openAddDialog">新增</el-button>
<el-button :icon='Delete' type="danger" plain :disabled='!multipleSelection.length' @click="deleteSelectedRows">删除</el-button>
</div>
<div class="table-container">
<el-table :data="tableData"
:header-cell-style="{ textAlign: 'center',backgroundColor: 'var(--el-color-primary)',color: '#fff' } "
:cell-style="{ textAlign: 'center' }"
style="width: 100%"
:style="{ height: '400px',maxHeight: '400px',overflow:'hidden'}"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"/>
<el-table-column prop="sort" label="序号" width="60"/>
<el-table-column prop="type" label="误差类型" min-width="180">
<template #default="{ row }">
<el-cascader style="min-width: 180px;"
:options="errorOptions"
v-model="row.errorType"
:props="{ checkStrictly: false, emitPath: false }"
placeholder="请选择误差类型"
@change="handleErrorTypeChange($event, row)"/>
</template>
</el-table-column>
<el-table-column prop="type" label="脚本类型" min-width="230">
<template #default="{ row }">
<el-cascader style="min-width: 230px;"
:options="scriptOptions"
v-model="row.scriptType"
:props="{ checkStrictly: false, emitPath: false }"
placeholder="请选择脚本类型"
@change="handleScriptTypeChange(row)"/>
</template>
</el-table-column>
<el-table-column label="起止范围">
<el-table-column label="起始" width="150">
<template #default="{ row }">
<el-row type="flex" :gutter="24">
<el-col :span="12">
<el-select v-model="row.startFlag" placeholder="选择起始值" style="width: 70px;" @change="(value) => handleStartFlagChange(row, value)">
<el-option label="无" :value="2"></el-option>
<el-option label=">=" :value="1"></el-option>
<el-option label=">" :value="0"></el-option>
</el-select>
</el-col>
<el-col :span="12">
<el-input v-model="row.startValue" style="width: 60px;" :disabled="isStartValueDisabled[row.sort]"
/>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column label="结束" width="150">
<template #default="{ row }">
<el-row type="flex" :gutter="24">
<el-col :span="12">
<el-select v-model="row.endFlag" placeholder="选择结束值" style="width: 70px;" @change="(value) => handleEndFlagChange(row, value)">
<el-option label="无" :value="2"></el-option>
<el-option label="<=" :value="1"></el-option>
<el-option label="<" :value="0"></el-option>
</el-select>
</el-col>
<el-col :span="12">
<el-input v-model="row.endValue" style="width: 60px;" :disabled="isEndValueDisabled[row.sort]"/>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column label="单位" width="130">
<template #default="{ row }">
<el-select v-model="row.conditionType" placeholder="选择单位">
<el-option
v-for="item in conditionTypes"
:key="item.id"
:label="item.name"
:value="Number(item.value)"
/>
</el-select>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="最大误差">
<el-table-column prop="maxErrorValue" label="最大误差值" width="100">
<template #default="{ row }">
<el-input v-model="row.maxErrorValue" style="width: 70px;"/>
</template>
</el-table-column>
<el-table-column label="误差类型" width="170">
<template #default="{ row }">
<el-cascader :options="errorValueTypeOptions"
v-model="row.errorValueType"
@change="handleErrorValueTypeChange(row)"/>
</template>
</el-table-column>
<el-table-column label="误差单位" width="100" prop="errorUnit">
<template #default="{ row }">
<span>{{ row.errorUnit }}</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="操作" min-width="150">
<template #default="{ row }">
<el-button type="primary" link :icon='CopyDocument' @click="copyRow(row)">复制</el-button>
<el-button type='primary' link :icon='Delete' @click="deleteRow(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="dialog-footer">
<el-button :icon="CirclePlus" type="primary" @click="openAddDialog">新增</el-button>
<el-button :icon="Delete" type="danger" plain :disabled="!multipleSelection.length" @click="deleteSelectedRows">
删除
</el-button>
</div>
<div class="table-container">
<el-table
:data="tableData"
:header-cell-style="{ textAlign: 'center', backgroundColor: 'var(--el-color-primary)', color: '#fff' }"
:cell-style="{ textAlign: 'center' }"
style="width: 100%"
:style="{ height: '400px', maxHeight: '400px', overflow: 'hidden' }"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="sort" label="序号" width="60" />
<el-table-column prop="type" label="误差类型" min-width="180">
<template #default="{ row }">
<el-cascader
style="min-width: 180px"
:options="errorOptions"
v-model="row.errorType"
:props="{ checkStrictly: false, emitPath: false }"
placeholder="请选择误差类型"
@change="handleErrorTypeChange($event, row)"
/>
</template>
</el-table-column>
<el-table-column prop="type" label="脚本类型" min-width="230">
<template #default="{ row }">
<el-cascader
style="min-width: 230px"
:options="scriptOptions"
v-model="row.scriptType"
:props="{ checkStrictly: false, emitPath: false }"
placeholder="请选择脚本类型"
@change="handleScriptTypeChange(row)"
/>
</template>
</el-table-column>
<el-table-column label="起止范围">
<el-table-column label="起始" width="150">
<template #default="{ row }">
<el-row type="flex" :gutter="24">
<el-col :span="12">
<el-select
v-model="row.startFlag"
placeholder="选择起始值"
style="width: 70px"
@change="value => handleStartFlagChange(row, value)"
>
<el-option label="无" :value="2"></el-option>
<el-option label=">=" :value="1"></el-option>
<el-option label=">" :value="0"></el-option>
</el-select>
</el-col>
<el-col :span="12">
<el-input
v-model="row.startValue"
style="width: 60px"
:disabled="isStartValueDisabled[row.sort]"
/>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column label="结束" width="150">
<template #default="{ row }">
<el-row type="flex" :gutter="24">
<el-col :span="12">
<el-select
v-model="row.endFlag"
placeholder="选择结束值"
style="width: 70px"
@change="value => handleEndFlagChange(row, value)"
>
<el-option label="无" :value="2"></el-option>
<el-option label="<=" :value="1"></el-option>
<el-option label="<" :value="0"></el-option>
</el-select>
</el-col>
<el-col :span="12">
<el-input
v-model="row.endValue"
style="width: 60px"
:disabled="isEndValueDisabled[row.sort]"
/>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column label="单位" width="130">
<template #default="{ row }">
<el-select v-model="row.conditionType" placeholder="选择单位">
<el-option
v-for="item in conditionTypes"
:key="item.id"
:label="item.name"
:value="Number(item.value)"
/>
</el-select>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="最大误差">
<el-table-column prop="maxErrorValue" label="最大误差值" width="100">
<template #default="{ row }">
<el-input v-model="row.maxErrorValue" style="width: 70px" />
</template>
</el-table-column>
<el-table-column label="误差类型" width="170">
<template #default="{ row }">
<el-cascader
:options="errorValueTypeOptions"
v-model="row.errorValueType"
@change="handleErrorValueTypeChange(row)"
/>
</template>
</el-table-column>
<el-table-column label="误差单位" width="100" prop="errorUnit">
<template #default="{ row }">
<span>{{ row.errorUnit }}</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="操作" min-width="150">
<template #default="{ row }">
<el-button type="primary" link :icon="CopyDocument" @click="copyRow(row)">复制</el-button>
<el-button type="primary" link :icon="Delete" @click="deleteRow(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup lang="ts">
import {type ErrorSystem} from '@/api/device/interface/error';
import {useDictStore,} from '@/stores/modules/dict'
import {CirclePlus, CopyDocument, Delete} from '@element-plus/icons-vue'
import {type CascaderOption} from 'element-plus';
import {defineEmits, type PropType, reactive, ref, watch} from 'vue';
import { type ErrorSystem } from '@/api/device/interface/error'
import { useDictStore } from '@/stores/modules/dict'
import { CirclePlus, CopyDocument, Delete } from '@element-plus/icons-vue'
import { type CascaderOption } from 'element-plus'
import { type PropType, reactive, ref, watch } from 'vue'
const emit = defineEmits(['updateTableData']);
const emit = defineEmits(['updateTableData'])
const multipleSelection = ref<number[]>([])
const dictStore = useDictStore()
const isStartValueDisabled = ref<{ [key: number]: boolean }>({});
const isEndValueDisabled = ref<{ [key: number]: boolean }>({});
const isStartValueDisabled = ref<{ [key: number]: boolean }>({})
const isEndValueDisabled = ref<{ [key: number]: boolean }>({})
const props = defineProps({
errorOptions: {
type: Array as PropType<CascaderOption[]>,
required: true
},
errorOptions: {
type: Array as PropType<CascaderOption[]>,
required: true
},
scriptOptions: {
type: Array as PropType<CascaderOption[]>,
required: true
},
scriptOptions: {
type: Array as PropType<CascaderOption[]>,
required: true
},
tableData: {
type: Array as PropType<ErrorSystem.ErrorSystemDetail[]>,
default: () => []
}
});
tableData: {
type: Array as PropType<ErrorSystem.ErrorSystemDetail[]>,
default: () => []
}
})
const errorValueTypeOptions = reactive<{ value: number, label: string, children: { value: number, label: string }[] }[]>([])
const errorValueTypeOptions = reactive<
{ value: number; label: string; children: { value: number; label: string }[] }[]
>([])
const conditionTypes = dictStore.getDictData('Condition_Type')
const errorValueTypes = dictStore.getDictData('Error_Value_Type')
const valueTypes = dictStore.getDictData('Script_Value_Type')
onBeforeMount(() => {
valueTypes.forEach(item1 => {
let children = []
for (let i = 0; i < errorValueTypes.length; i++) {
if (item1.value === '2' && errorValueTypes[i].value === '2') {
continue
}
children.push({label: errorValueTypes[i].name, value: Number(errorValueTypes[i].value)})
}
errorValueTypeOptions.push({label: item1.name, value: Number(item1.value), children: children})
})
valueTypes.forEach(item1 => {
let children = []
for (let i = 0; i < errorValueTypes.length; i++) {
if (item1.value === '2' && errorValueTypes[i].value === '2') {
continue
}
children.push({ label: errorValueTypes[i].name, value: Number(errorValueTypes[i].value) })
}
errorValueTypeOptions.push({ label: item1.name, value: Number(item1.value), children: children })
})
})
const handleErrorTypeChange = (value: any, row: any) => {
// const matchedRow = findRowById(row.errorType, props.errorOptions);//选中误差id找对应结构中的含chilren的code
// console.log('matchedRow.code',matchedRow.code)
// const code = errSysAndScriptMap.get(matchedRow?.code || '') || ''; // 确保 code 不为 undefined
// console.log('code',code)
// if (code) {
// const matchedRow2 = findRowByCode(code, props.scriptOptions);//误差code映射脚本code，找对应脚本结构中含children的id
// console.log('matchedRow2',matchedRow2)
// if (matchedRow2) {
// row.scriptType = matchedRow2.value;
// }else{
// row.scriptType = '';//如果没有找到匹配的脚本，置空
// }
// }else{
// row.scriptType = '';//如果没有找到匹配的脚本，置空
// }
// const matchedRow = findRowById(row.errorType, props.errorOptions);//选中误差id找对应结构中的含chilren的code
// console.log('matchedRow.code',matchedRow.code)
// const code = errSysAndScriptMap.get(matchedRow?.code || '') || ''; // 确保 code 不为 undefined
// console.log('code',code)
// if (code) {
// const matchedRow2 = findRowByCode(code, props.scriptOptions);//误差code映射脚本code，找对应脚本结构中含children的id
// console.log('matchedRow2',matchedRow2)
// if (matchedRow2) {
// row.scriptType = matchedRow2.value;
// }else{
// row.scriptType = '';//如果没有找到匹配的脚本，置空
// }
// }else{
// row.scriptType = '';//如果没有找到匹配的脚本，置空
// }
}
const handleScriptTypeChange = (row: any) => {
handleErrorValueTypeChange(row)
handleErrorValueTypeChange(row)
}
const handleErrorValueTypeChange = (row: any) => {
let scriptType = findRowById(row.scriptType, props.scriptOptions)
if (scriptType) {
const errorValueType = row.errorValueType
let level1 = errorValueType[0]
let scriptType = findRowById(row.scriptType, props.scriptOptions)
if (scriptType) {
const errorValueType = row.errorValueType
let level1 = errorValueType[0]
switch (level1) {
case 1: // 绝对值
row.valueType = 1
row.errorUnit = scriptType.remark
break;
case 2: // 相对值
row.valueType = 2
row.errorUnit = "%"
break;
default:
break;
switch (level1) {
case 1: // 绝对值
row.valueType = 1
row.errorUnit = scriptType.remark
break
case 2: // 相对值
row.valueType = 2
row.errorUnit = '%'
break
default:
break
}
}
}
}
// 假设 props.errorOptions 是一个数组，每个元素可能包含 children 属性
const findRowById = (id: string, options: any[]): any | null => {
for (const option of options) {
if (option.value === id) {
return option;
for (const option of options) {
if (option.value === id) {
return option
}
if (option.children && option.children.length > 0) {
const result = findRowById(id, option.children)
if (result) {
return result
}
}
}
if (option.children && option.children.length > 0) {
const result = findRowById(id, option.children);
if (result) {
return result;
}
}
}
return null;
};
return null
}
// 假设 props.errorOptions 是一个数组，每个元素可能包含 children 属性
const findRowByCode = (code: string, options: any[]): any | null => {
for (const option of options) {
if (option.code === code) {
return option;
for (const option of options) {
if (option.code === code) {
return option
}
if (option.children && option.children.length > 0) {
const result = findRowByCode(code, option.children)
if (result) {
return result
}
}
}
if (option.children && option.children.length > 0) {
const result = findRowByCode(code, option.children);
if (result) {
return result;
}
}
}
return null;
};
return null
}
// 监听 props.tableData 的变化，确保每次数据变化时都重新设置 sort
watch(() => props.tableData, async (newTableData) => {
for (let i = 0; i < newTableData.length; i++) {
newTableData[i].sort = i + 1;
if (newTableData[i].startFlag === 2) {
newTableData[i].startValue = null; // 设置 startValue 为 null
}
if (newTableData[i].endFlag === 2) {
newTableData[i].endValue = null; // 设置 endValue 为 null
}
}
// 重新设置 isStartValueDisabled 和 isEndValueDisabled,并清空输入框
props.tableData.forEach(row => {
isStartValueDisabled.value[row.sort] = row.startFlag === 2;
});
props.tableData.forEach(row => {
isEndValueDisabled.value[row.sort] = row.endFlag === 2;
});
}, {immediate: true});
watch(
() => props.tableData,
async newTableData => {
for (let i = 0; i < newTableData.length; i++) {
newTableData[i].sort = i + 1
if (newTableData[i].startFlag === 2) {
newTableData[i].startValue = null // 设置 startValue 为 null
}
if (newTableData[i].endFlag === 2) {
newTableData[i].endValue = null // 设置 endValue 为 null
}
}
// 重新设置 isStartValueDisabled 和 isEndValueDisabled,并清空输入框
props.tableData.forEach(row => {
isStartValueDisabled.value[row.sort] = row.startFlag === 2
})
props.tableData.forEach(row => {
isEndValueDisabled.value[row.sort] = row.endFlag === 2
})
},
{ immediate: true }
)
// 处理 startFlag 变化的方法
const handleStartFlagChange = (row: ErrorSystem.ErrorSystemDetail, value: number) => {
if (value === 2) {
row.startValue = null; // 清空输入框
isStartValueDisabled.value[row.sort] = true; // 禁用输入框
} else {
isStartValueDisabled.value[row.sort] = false; // 启用输入框
}
};
if (value === 2) {
row.startValue = null // 清空输入框
isStartValueDisabled.value[row.sort] = true // 禁用输入框
} else {
isStartValueDisabled.value[row.sort] = false // 启用输入框
}
}
// 处理 endFlag 变化的方法
const handleEndFlagChange = (row: ErrorSystem.ErrorSystemDetail, value: number) => {
if (value === 2) {
row.endValue = null; // 清空输入框
isEndValueDisabled.value[row.sort] = true; // 禁用输入框
} else {
isEndValueDisabled.value[row.sort] = false; // 启用输入框
}
};
if (value === 2) {
row.endValue = null // 清空输入框
isEndValueDisabled.value[row.sort] = true // 禁用输入框
} else {
isEndValueDisabled.value[row.sort] = false // 启用输入框
}
}
//选中
const handleSelectionChange = (selection: ErrorSystem.ErrorSystemDetail[]) => {
multipleSelection.value = selection.map(row => row.sort); // 更新选中的行
};
multipleSelection.value = selection.map(row => row.sort) // 更新选中的行
}
//新增
const openAddDialog = () => {
// 获取字典数据
// 获取字典数据
const newRow = {
sort: props.tableData.length + 1,
id: '',
startFlag: 2,
endFlag: 2,
conditionType: conditionTypes.length > 0 ? Number(conditionTypes[0].value) : 0, // 设置默认值为第一个选项的值
valueType: valueTypes.length > 0 ? Number(valueTypes[0].value) : 1,
errorValueType: [errorValueTypeOptions[0].value, errorValueTypeOptions[0].children[0].value],
errorSysId: '',
errorType: '',
scriptType: '',
maxErrorValue: 0
}
const newRow = {
sort: props.tableData.length + 1,
id: '',
startFlag: 2,
endFlag: 2,
conditionType: conditionTypes.length > 0 ? Number(conditionTypes[0].value) : 0, // 设置默认值为第一个选项的值
valueType: valueTypes.length > 0 ? Number(valueTypes[0].value) : 1,
errorValueType: [errorValueTypeOptions[0].value, errorValueTypeOptions[0].children[0].value],
errorSysId: "",
errorType: "",
scriptType: "",
maxErrorValue: 0
};
emit('updateTableData', [...props.tableData, newRow]);
};
emit('updateTableData', [...props.tableData, newRow])
}
const copyRow = (row: ErrorSystem.ErrorSystemDetail) => {
// 深拷贝行数据
const newRow = {...row};
const maxNextId = Math.max(...props.tableData.map(item => item.sort), 0);
newRow.sort = maxNextId + 1;
emit('updateTableData', [...props.tableData, newRow]);
};
// 深拷贝行数据
const newRow = { ...row }
const maxNextId = Math.max(...props.tableData.map(item => item.sort), 0)
newRow.sort = maxNextId + 1
emit('updateTableData', [...props.tableData, newRow])
}
//删除行
const deleteRow = (row: ErrorSystem.ErrorSystemDetail) => {
const index = props.tableData.indexOf(row);
if (index !== -1) {
const newTableData = [...props.tableData];
newTableData.splice(index, 1);
emit('updateTableData', newTableData);
}
};
const index = props.tableData.indexOf(row)
if (index !== -1) {
const newTableData = [...props.tableData]
newTableData.splice(index, 1)
emit('updateTableData', newTableData)
}
}
//批量删除选中行
const deleteSelectedRows = () => {
const newTableData = props.tableData.filter(row => !multipleSelection.value.includes(row.sort));
multipleSelection.value = []; // 清空已选择的行
emit('updateTableData', newTableData);
};
const newTableData = props.tableData.filter(row => !multipleSelection.value.includes(row.sort))
multipleSelection.value = [] // 清空已选择的行
emit('updateTableData', newTableData)
}
</script>
<style scoped>
.dialog-footer {
display: flex;
justify-content: flex-start;
margin-bottom: 10px; /* 调整这里的值以增加或减少间距 */
margin-top: 10px;
display: flex;
justify-content: flex-start;
margin-bottom: 10px; /* 调整这里的值以增加或减少间距 */
margin-top: 10px;
}
.el-table th, .el-table td {
text-align: center; /* 所有单元格文字居中 */
.el-table th,
.el-table td {
text-align: center; /* 所有单元格文字居中 */
}
.table-container {
max-height: 400px; /* 根据需要调整高度 */
overflow-y: auto; /* 允许垂直滚动 */
overflow-x: hidden; /* 隐藏水平滚动条 */
max-height: 400px; /* 根据需要调整高度 */
overflow-y: auto; /* 允许垂直滚动 */
overflow-x: hidden; /* 隐藏水平滚动条 */
}
</style>

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

@@ -1,30 +1,49 @@
<template>
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" width="1660px" align-center>
<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>
<el-form :model="formContent" ref='dialogFormRef' :rules='rules' label-width="auto" class="form-four">
<el-form-item label="标准号" prop="standardName" >
<el-input v-model='formContent.standardName' placeholder="请填写标准号" maxlength="32" show-word-limit/>
<el-form
:model="formContent"
ref="dialogFormRef"
:rules="rules"
label-width="auto"
class="form-four"
>
<el-form-item label="标准号" prop="standardName">
<el-input
v-model="formContent.standardName"
placeholder="请填写标准号"
maxlength="32"
show-word-limit
/>
</el-form-item>
<el-form-item label="标准推行年份" prop="standardTime" >
<el-form-item label="标准推行年份" prop="standardTime">
<el-date-picker
v-model="formContent.standardTime"
type="year"
placeholder="请选择标准推行年份"
/>
/>
</el-form-item>
<el-form-item label="适用设备等级" prop="devLevel" >
<el-select v-model='formContent.devLevel' placeholder="请选择设备等级">
<el-form-item label="适用设备等级" prop="devLevel">
<el-select v-model="formContent.devLevel" placeholder="请选择设备等级">
<el-option
v-for="item in dictStore.getDictData('Dev_Level')"
:key="item.id"
:label="item.name"
:value="item.id"/>
</el-select>
v-for="item in dictStore.getDictData('Dev_Level')"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="enable" >
<el-select v-model='formContent.enable' placeholder="请选择状态">
<el-form-item label="状态" prop="enable">
<el-select v-model="formContent.enable" placeholder="请选择状态">
<el-option label="启用" :value="1"></el-option>
<el-option label="停用" :value="0"></el-option>
</el-select>
@@ -33,44 +52,45 @@
</div>
</el-tab-pane>
</el-tabs>
<ErrorSystemDetailTable :tableData="tableData" :errorOptions="errorOptions" :scriptOptions="scriptOptions" @updateTableData="handleTableDataUpdate" />
<ErrorSystemDetailTable
:tableData="tableData"
:errorOptions="errorOptions"
:scriptOptions="scriptOptions"
@updateTableData="handleTableDataUpdate"
/>
<template #footer>
<div >
<el-button @click='close()'>取 消</el-button>
<el-button type="primary" @click='save()'>保存</el-button>
<div>
<el-button @click="close()">取 消</el-button>
<el-button type="primary" @click="save()">保存</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup name="ErrorSystemDialog">
import{type CascaderOption, ElMessage, type FormInstance,type FormItemRule}from'element-plus'
import { defineProps, defineEmits, reactive,watch,ref, type Ref, computed } from 'vue';
import { dialogBig} from '@/utils/elementBind'
import { addPqErrSys,updatePqErrSys,getPqErrSysListById} from '@/api/device/error/index'
import {CirclePlus, Delete, EditPen,FolderOpened,CopyDocument} from '@element-plus/icons-vue'
import { useDictStore } from '@/stores/modules/dict'
import { type ErrorSystem } from '@/api/device/interface/error';
import ErrorSystemDetailTable from '@/views/machine/errorSystem/components/errorSystemDetailTable.vue';
import {getDictTreeByCode} from '@/api/system/dictionary/dictTree'
import { type Dict } from '@/api/system/dictionary/interface';
// 定义弹出组件元信息
const dialogFormRef = ref()
const dictStore = useDictStore()
const tableData = ref<ErrorSystem.ErrorSystemDetail[]>([]);
const errorOptions: Ref<CascaderOption[]> = ref([]); // 修改这里
const scriptOptions: Ref<CascaderOption[]> = ref([]); // 修改这里
const handleTableDataUpdate = (newTableData: ErrorSystem.ErrorSystemDetail[]) => {
tableData.value = newTableData;
};
function useMetaInfo() {
<script lang="ts" setup name="ErrorSystemDialog">
import { type CascaderOption, ElMessage, type FormItemRule } from 'element-plus'
import { computed, type Ref, ref } from 'vue'
import { dialogBig } from '@/utils/elementBind'
import { addPqErrSys, getPqErrSysListById, updatePqErrSys } from '@/api/device/error/index'
import { useDictStore } from '@/stores/modules/dict'
import { type ErrorSystem } from '@/api/device/interface/error'
import ErrorSystemDetailTable from '@/views/machine/errorSystem/components/errorSystemDetailTable.vue'
import { getDictTreeByCode } from '@/api/system/dictionary/dictTree'
import { type Dict } from '@/api/system/dictionary/interface'
// 定义弹出组件元信息
const dialogFormRef = ref()
const dictStore = useDictStore()
const tableData = ref<ErrorSystem.ErrorSystemDetail[]>([])
const errorOptions: Ref<CascaderOption[]> = ref([]) // 修改这里
const scriptOptions: Ref<CascaderOption[]> = ref([]) // 修改这里
const handleTableDataUpdate = (newTableData: ErrorSystem.ErrorSystemDetail[]) => {
tableData.value = newTableData
}
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = ref<ErrorSystem.ErrorSystemList>({
@@ -80,15 +100,15 @@ const handleTableDataUpdate = (newTableData: ErrorSystem.ErrorSystemDetail[]) =>
standardTime: '',
devLevel: '',
enable: 1,
state:1,
pqErrSysDtlsList:[]
state: 1,
pqErrSysDtlsList: []
})
return { dialogVisible, titleType, formContent }
}
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
}
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
formContent.value = {
id: '',
name: '',
@@ -96,164 +116,154 @@ const handleTableDataUpdate = (newTableData: ErrorSystem.ErrorSystemDetail[]) =>
standardTime: '',
devLevel: '',
enable: 1,
state:1,
pqErrSysDtlsList:[]
state: 1,
pqErrSysDtlsList: []
}
tableData.value =[]
}
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增误差体系' : '编辑误差体系'
})
tableData.value = []
}
// 定义规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增误差体系' : '编辑误差体系'
})
// 定义规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{ required: true, message: '误差体系名称必填！', trigger: 'blur' }],
standardName: [{ required: true, message: '参照标准名称必填！', trigger: 'blur' }],
standardTime: [{ required: true, message: '标准推行年份必选！', trigger: 'blur' }],
devLevel:[{ required: true, message: '请选择一项设备等级', trigger: 'change' },],
enable:[{ required: true, message: '请选择一项状态', trigger: 'change '},]
});
devLevel: [{ required: true, message: '请选择一项设备等级', trigger: 'change' }],
enable: [{ required: true, message: '请选择一项状态', trigger: 'change ' }]
})
// 关闭弹窗
const close = () => {
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
}
// 关闭弹窗
const close = () => {
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
}
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
// 确保 standardTime 是 Date 对象
if (formContent.value.standardTime) {
const date = new Date(formContent.value.standardTime);
formContent.value.standardTime = date.getFullYear().toString();
// 确保 standardTime 是 Date 对象
if (formContent.value.standardTime) {
const date = new Date(formContent.value.standardTime)
formContent.value.standardTime = date.getFullYear().toString()
}
formContent.value.pqErrSysDtlsList = tableData.value
formContent.value.pqErrSysDtlsList.forEach((item) => {
item.errorValueType=item.errorValueType[1]
})
formContent.value.pqErrSysDtlsList.forEach(item => {
item.errorValueType = item.errorValueType[1]
})
if (formContent.value.id) {
await updatePqErrSys(formContent.value);
await updatePqErrSys(formContent.value)
ElMessage.success({ message: `${dialogTitle.value}成功！` })
} else {
await addPqErrSys(formContent.value);
ElMessage.success({ message: `${dialogTitle.value}成功！` })
}
} else {
await addPqErrSys(formContent.value)
ElMessage.success({ message: `${dialogTitle.value}成功！` })
}
close()
// 刷新表格
await props.refreshTable!()
await props.refreshTable!()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
// 封装提取第二层节点的逻辑
}
// 封装提取第二层节点的逻辑
const loadSecondLevelOptions = async () => {
const dictCode = 'Err_Sys_Items'; // 替换为实际需要的字典代码
const dictCode2 = 'Script_Error'; // 替换为实际需要的字典代码
const dictCode = 'Err_Sys_Items' // 替换为实际需要的字典代码
const dictCode2 = 'Script_Error' // 替换为实际需要的字典代码
const resDictTree: Dict.ResDictTree = {
name: '',
id: '',
pid: '',
pids: '',
code: dictCode,
sort: 0
};
const resDictTree2: Dict.ResDictTree = {
name: '',
id: '',
pid: '',
pids: '',
code: dictCode2,
sort: 0
};
// 并行请求两个字典树列表
const [result, result2] = await Promise.all([
getDictTreeByCode(resDictTree),
getDictTreeByCode(resDictTree2)
]);
const allOptions = convertToOptions(result.data as Dict.ResDictTree[]);
const allOptions2 = convertToOptions(result2.data as Dict.ResDictTree[]);
// 提取第二层节点
const secondLevelOptions: any[] = [];
allOptions.forEach(option => {
if (option.children && option.children.length > 0) {
secondLevelOptions.push(...option.children);
const resDictTree: Dict.ResDictTree = {
name: '',
id: '',
pid: '',
pids: '',
code: dictCode,
sort: 0
}
});
const secondLevelOptions2: any[] = [];
allOptions2.forEach(option => {
if (option.children && option.children.length > 0) {
secondLevelOptions2.push(...option.children);
const resDictTree2: Dict.ResDictTree = {
name: '',
id: '',
pid: '',
pids: '',
code: dictCode2,
sort: 0
}
});
// 将第二层节点赋值给 options.value
errorOptions.value = secondLevelOptions;
scriptOptions.value = secondLevelOptions2;
};
// 并行请求两个字典树列表
const [result, result2] = await Promise.all([getDictTreeByCode(resDictTree), getDictTreeByCode(resDictTree2)])
// 转换函数
const convertToOptions = (dictTree: Dict.ResDictTree[]): CascaderOption[] => {
const allOptions = convertToOptions(result.data as Dict.ResDictTree[])
const allOptions2 = convertToOptions(result2.data as Dict.ResDictTree[])
// 提取第二层节点
const secondLevelOptions: any[] = []
allOptions.forEach(option => {
if (option.children && option.children.length > 0) {
secondLevelOptions.push(...option.children)
}
})
const secondLevelOptions2: any[] = []
allOptions2.forEach(option => {
if (option.children && option.children.length > 0) {
secondLevelOptions2.push(...option.children)
}
})
// 将第二层节点赋值给 options.value
errorOptions.value = secondLevelOptions
scriptOptions.value = secondLevelOptions2
}
// 转换函数
const convertToOptions = (dictTree: Dict.ResDictTree[]): CascaderOption[] => {
return dictTree.map(item => ({
value: item.id,
label: item.name,
code: item.code,
children: item.children ? convertToOptions(item.children) : undefined,
remark: item.remark
}));
};
}))
}
// 打开弹窗，可能是新增，也可能是编辑
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: ErrorSystem.ErrorSystemList) => {
titleType.value = sign;
titleType.value = sign
// 并行执行两个异步操作
const loadOptionsPromise = loadSecondLevelOptions();
const fetchDataPromise = data.id ? getPqErrSysListById(data) : Promise.resolve(null);
// 并行执行两个异步操作
const loadOptionsPromise = loadSecondLevelOptions()
const fetchDataPromise = data.id ? getPqErrSysListById(data) : Promise.resolve(null)
const [_, result] = await Promise.all([loadOptionsPromise, fetchDataPromise]);
const [_, result] = await Promise.all([loadOptionsPromise, fetchDataPromise])
if (result && result.data) {
formContent.value = result.data as ErrorSystem.ErrorSystemList;
tableData.value = formContent.value.pqErrSysDtlsList || [];
tableData.value.forEach((item) => {
item.errorValueType=[item.valueType,item.errorValueType]
})
} else {
resetFormContent();
}
// 重置表单
dialogFormRef.value?.resetFields();
dialogVisible.value = true;
};
if (result && result.data) {
formContent.value = result.data as ErrorSystem.ErrorSystemList
tableData.value = formContent.value.pqErrSysDtlsList || []
tableData.value.forEach(item => {
item.errorValueType = [item.valueType, item.errorValueType]
})
} else {
resetFormContent()
}
// 重置表单
dialogFormRef.value?.resetFields()
dialogVisible.value = true
}
// 对外映射
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
refreshTable: (() => Promise<void>) | undefined
}>()
</script>
<style>
</style>
<style></style>

48
frontend/src/views/machine/testScript/components/testScriptDetail.vue
View File

@@ -7,7 +7,7 @@
</div>
<div class="data-check-content">
<div class="content-tree" :style="{ height: `calc(100vh - ${props.shrink ? '370px' : '315px'})` }">
<Tree :treeData="treeData" @setTab="setTab" />
<TestScriptTree :treeData="treeData" @setTab="setTab" />
</div>
<div
@@ -19,17 +19,18 @@
<el-tab-pane v-for="tab in tabData" :key="tab.value" :label="tab.label" :name="tab.value">
<div v-if="activeName == tab.value">
<div class="dialog-footer">
<el-switch v-model="value1"
inline-prompt
:active-value="1"
:inactive-value="0"
active-text="禁用"
inactive-text="启用"
@change="enableScript"
size="large"
width="80px"
style="margin-right: 10px;"
/>
<el-switch
v-model="value1"
inline-prompt
:active-value="1"
:inactive-value="0"
active-text="禁用"
inactive-text="启用"
@change="enableScript"
size="large"
width="80px"
style="margin-right: 10px"
/>
<el-button :icon="CirclePlus" type="primary" @click="openDialog('add')">新增</el-button>
</div>
<div style="display: flex">
@@ -41,7 +42,7 @@
:formContent="props.formContent"
:options="props.options"
style="width: 360px"
:shrink="props.shrink"
:shrink="props.shrink"
:disabled="tab.children.length == 0 ? false : true"
ref="communRef"
/>
@@ -215,20 +216,21 @@
</template>
<script setup lang="ts">
import { type PropType, ref, nextTick } from 'vue'
import Tree from './tree.vue'
import { type PropType, ref } from 'vue'
import TestScriptTree from './testScriptTree.vue'
import Commun from './communication.vue'
import { type CascaderOption, ElMessageBox } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import { getTreeData } from '@/api/check/test'
import { CirclePlus, Delete, Check, CopyDocument, View, EditPen } from '@element-plus/icons-vue'
import { CirclePlus, CopyDocument, Delete, EditPen, View } from '@element-plus/icons-vue'
import type { TestScript } from '@/api/device/interface/testScript'
import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue'
import { CheckData } from '@/api/check/interface'
import { dlsDetails, deleteDtls, updateDtls, addScriptDtls, checkDataList } from '@/api/device/testScript'
import { addScriptDtls, deleteDtls, dlsDetails, updateDtls } from '@/api/device/testScript'
import { useDictStore } from '@/stores/modules/dict'
import { useHandleData } from '@/hooks/useHandleData'
import { scriptDtlsCheckDataList } from '@/api/device/testScript/index'
import ViewRow from '@/views/machine/testScript/components/viewRow.vue'
interface TabOption {
label?: string
name?: string
@@ -280,7 +282,7 @@ const column = ref([
])
// 获取树
const getTree = () => {
// console.log('props.formContent.id', props.formContent.id)
// console.log('props.formContent.id', props.formContent.id)
getTreeData({
scriptId: props.formContent.id
}).then(res => {
@@ -370,8 +372,6 @@ const inquireTable = () => {
value1.value = tableData.value.some(item => item.enable === 1) ? 1 : 0
}
})
}
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
@@ -420,7 +420,7 @@ const copyRow = async (row: any) => {
// 查看
const view = (row: Partial<TestScript.ResTestScript> = {}) => {
getCommunication()
// console.log('communicationList', communicationList.value)
// console.log('communicationList', communicationList.value)
//当前点击的一级tab
const parentTabName = communicationList.value.find(t => t.id === activeName.value)?.name || '未找到对应名称'
//当前点击的二级tab
@@ -466,7 +466,6 @@ const enableRow = async (row: any) => {
})
}
// 启用/禁用脚本的方法
const enableScript = async () => {
const willEnable = value1.value === 1
@@ -496,7 +495,6 @@ const enableScript = async () => {
}
}
// 获取左边树数据
// 新增保存
const addTab = (row: any) => {
@@ -537,7 +535,6 @@ onMounted(() => {
overflow-x: hidden;
}
/* 确保 el-tree 内容可以超出容器宽度 */
.el-tree {
width: fit-content; /* 根据内容自适应宽度 */
@@ -553,7 +550,6 @@ onMounted(() => {
margin-bottom: 10px;
}
.divider-container {
display: flex;
}

212
frontend/src/views/machine/testScript/components/tree.vue → frontend/src/views/machine/testScript/components/testScriptTree.vue
View File

@@ -1,106 +1,106 @@
<template>
<el-tree
node-key="id"
default-expand-all
:data="props.treeData"
:props="defaultProps"
style="width: 100%"
:expand-on-click-node="false"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<el-tooltip effect="dark" :content="data.sourceDesc || data.scriptTypeName" placement="top" :hide-after="0">
<div class="custom-tree-node">
{{ data.scriptTypeName || data.sourceDesc }}
</div>
</el-tooltip>
</template>
</el-tree>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { CheckData } from '@/api/check/interface'
const props = defineProps({
treeData: {
type: Array,
required: true
}
})
const emit = defineEmits(['setTab'])
const dataTree = ref<CheckData.TreeItem[]>([])
const defaultProps = {
children: 'children',
label: 'scriptTypeName',
pid: 'pid'
}
const activeName = ref('')
const childActiveName = ref('')
const handleNodeClick = (data, node) => {
console.log('handleNodeClick', data, node)
let code = ['Base', 'VOL', 'Freq', 'Harm', 'Base_0_10', 'Base_20_85', 'Base_110_200']
const parents = getParentNodes(node, [])
parents.pop()
parents.unshift(node.data)
parents.reverse()
let active = parents[0].scriptTypeCode
let childActive = findTargetCodes(parents, code)[0] || ''
// 获取当前节点的直接父节点
if (activeName.value != active || childActiveName.value != childActive) {
activeName.value = active
childActiveName.value = childActive
emit('setTab', {
activeName: active,
childActiveName: childActive
})
}
}
// 返回父级
const getParentNodes = (node, parents) => {
if (node.parent) {
// 将父节点添加到数组中
parents.push(node.parent.data)
// 递归获取更高层级的父节点
getParentNodes(node.parent, parents)
}
return parents
}
// 判断childActiveName值
function findTargetCodes(data: any[], targetCodes: string[]) {
let result: string[] = []
data.forEach(item => {
if (item.scriptTypeCode != null) {
if (targetCodes.includes(item.scriptTypeCode)) {
result.push(item.scriptTypeCode)
}
}
})
return result
// for (let item of data) {
// // 判断当前项的 scriptTypeCode 是否包含目标值
// if (item.scriptTypeCode !=null && targetCodes.includes(item.scriptTypeCode)) {
// result.push(item.scriptTypeCode)
// return result
// }
// // 如果存在 children，递归检查
// if (item.children && item.children.length > 0) {
// result = result.concat(findTargetCodes(item.children, targetCodes))
// }
// }
// return result
}
onMounted(() => {})
// // 对外映射
// defineExpose({ init })
</script>
<style lang="scss" scoped>
.custom-tree-node {
max-width: 230px;
overflow-x: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
</style>
<template>
<el-tree
node-key="id"
default-expand-all
:data="props.treeData"
:props="defaultProps"
style="width: 100%"
:expand-on-click-node="false"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<el-tooltip effect="dark" :content="data.sourceDesc || data.scriptTypeName" placement="top" :hide-after="0">
<div class="custom-tree-node">
{{ data.scriptTypeName || data.sourceDesc }}
</div>
</el-tooltip>
</template>
</el-tree>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { CheckData } from '@/api/check/interface'
const props = defineProps({
treeData: {
type: Array,
required: true
}
})
const emit = defineEmits(['setTab'])
const dataTree = ref<CheckData.TreeItem[]>([])
const defaultProps = {
children: 'children',
label: 'scriptTypeName',
pid: 'pid'
}
const activeName = ref('')
const childActiveName = ref('')
const handleNodeClick = (data, node) => {
console.log('handleNodeClick', data, node)
let code = ['Base', 'VOL', 'Freq', 'Harm', 'Base_0_10', 'Base_20_85', 'Base_110_200']
const parents = getParentNodes(node, [])
parents.pop()
parents.unshift(node.data)
parents.reverse()
let active = parents[0].scriptTypeCode
let childActive = findTargetCodes(parents, code)[0] || ''
// 获取当前节点的直接父节点
if (activeName.value != active || childActiveName.value != childActive) {
activeName.value = active
childActiveName.value = childActive
emit('setTab', {
activeName: active,
childActiveName: childActive
})
}
}
// 返回父级
const getParentNodes = (node, parents) => {
if (node.parent) {
// 将父节点添加到数组中
parents.push(node.parent.data)
// 递归获取更高层级的父节点
getParentNodes(node.parent, parents)
}
return parents
}
// 判断childActiveName值
function findTargetCodes(data: any[], targetCodes: string[]) {
let result: string[] = []
data.forEach(item => {
if (item.scriptTypeCode != null) {
if (targetCodes.includes(item.scriptTypeCode)) {
result.push(item.scriptTypeCode)
}
}
})
return result
// for (let item of data) {
// // 判断当前项的 scriptTypeCode 是否包含目标值
// if (item.scriptTypeCode !=null && targetCodes.includes(item.scriptTypeCode)) {
// result.push(item.scriptTypeCode)
// return result
// }
// // 如果存在 children，递归检查
// if (item.children && item.children.length > 0) {
// result = result.concat(findTargetCodes(item.children, targetCodes))
// }
// }
// return result
}
onMounted(() => {})
// // 对外映射
// defineExpose({ init })
</script>
<style lang="scss" scoped>
.custom-tree-node {
max-width: 230px;
overflow-x: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
</style>

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

@@ -1,101 +1,100 @@
<template>
<el-dialog v-model="dialogVisible" :title="dialogTitle"
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">
<el-tree-select
v-model="displayPid"
:data="tableData"
check-strictly
:render-after-expand="false"
show-checkbox
check-on-click-node
node-key="id"
:props="defaultProps"
/>
</el-form-item>
<el-form-item label="源参数描述" :label-width="100" prop="desc">
<el-input v-model="formContent.desc" autocomplete="off" maxlength="32" show-word-limit/>
</el-form-item>
<el-form-item label="源参数类型" :label-width="100" prop="type">
<el-input v-model="formContent.type" autocomplete="off" maxlength="32" show-word-limit/>
</el-form-item>
<el-form-item label="源参数值" :label-width="100"
prop="value">
<el-input v-model="formContent.value" autocomplete="off"/>
</el-form-item>
<el-form-item label="排序" :label-width="100">
<el-input-number v-model="formContent.sort" :min='1' :max='999'/>
</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>
<el-dialog v-model="dialogVisible" :title="dialogTitle" 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">
<el-tree-select
v-model="displayPid"
:data="tableData"
check-strictly
:render-after-expand="false"
show-checkbox
check-on-click-node
node-key="id"
:props="defaultProps"
/>
</el-form-item>
<el-form-item label="源参数描述" :label-width="100" prop="desc">
<el-input v-model="formContent.desc" autocomplete="off" maxlength="32" show-word-limit />
</el-form-item>
<el-form-item label="源参数类型" :label-width="100" prop="type">
<el-input v-model="formContent.type" autocomplete="off" maxlength="32" show-word-limit />
</el-form-item>
<el-form-item label="源参数值" :label-width="100" prop="value">
<el-input v-model="formContent.value" autocomplete="off" />
</el-form-item>
<el-form-item label="排序" :label-width="100">
<el-input-number v-model="formContent.sort" :min="1" :max="999" />
</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 setup lang="ts">
import {computed, defineEmits, reactive, watch} from 'vue'
import {dialogSmall} from "@/utils/elementBind"
import {TestSource} from "@/api/device/interface/testSource"
import {ElMessage, FormItemRule} from "element-plus"
import { computed, reactive } from 'vue'
import { dialogSmall } from '@/utils/elementBind'
import { type TestSource } from '@/api/device/interface/testSource'
import { type FormItemRule } from 'element-plus'
defineProps<{
tableData: TestSource.ParameterType[]
tableData: TestSource.ParameterType[]
}>()
const emit = defineEmits(['get-parameter'])
// 计算属性，用于控制显示的 pid
const displayPid = computed({
get: () => {
return formContent.pId === '0' ? '' : formContent.pId;
},
set: (value) => {
formContent.pId = value;
}
});
get: () => {
return formContent.pId === '0' ? '' : formContent.pId
},
set: value => {
formContent.pId = value
}
})
// 树形节点配置
const defaultProps = {
children: 'children',
label: 'desc',
value: 'id'
};
children: 'children',
label: 'desc',
value: 'id'
}
const dialogFormRef = ref()
const {dialogVisible, titleType, formContent} = useMetaInfo()
const { dialogVisible, titleType, formContent } = useMetaInfo()
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = reactive<TestSource.ParameterType>({
id: "",
type: "",
value: null,
desc: "",
sort: 100,
pId: "0",
})
const formContent = reactive<TestSource.ParameterType>({
id: '',
type: '',
value: null,
desc: '',
sort: 100,
pId: '0'
})
return {dialogVisible, titleType, formContent}
return { dialogVisible, titleType, formContent }
}
const rules: reactive<Record<string, Array<FormItemRule>>> = reactive({
desc: [{required: true, message: '源参数描述必填！', trigger: 'blur'},{min: 1, max: 32, message: '长度为1~32个字符', trigger: 'blur'}],
type: [{required: true, message: '源参数类型必填！', trigger: 'blur'},{min: 1, max: 32, message: '长度为1~32个字符', trigger: 'blur'}],
sort: [{required: true, message: '排序必填！', trigger: 'blur'}]
desc: [
{ required: true, message: '源参数描述必填！', trigger: 'blur' },
{ min: 1, max: 32, message: '长度为1~32个字符', trigger: 'blur' }
],
type: [
{ required: true, message: '源参数类型必填！', trigger: 'blur' },
{ min: 1, max: 32, message: '长度为1~32个字符', trigger: 'blur' }
],
sort: [{ required: true, message: '排序必填！', trigger: 'blur' }]
})
// watch(() => formContent.pId, (newVal, oldVal) => {
@@ -108,54 +107,52 @@ const rules: reactive<Record<string, Array<FormItemRule>>> = reactive({
// })
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增源参数' : '编辑源参数'
return titleType.value === 'add' ? '新增源参数' : '编辑源参数'
})
const resetFormContent = () => {
Object.assign(formContent, {
id: "",
type: "",
value: null,
desc: "",
sort: 100,
pId: "0",
})
Object.assign(formContent, {
id: '',
type: '',
value: null,
desc: '',
sort: 100,
pId: '0'
})
}
const open = (sign: string, data: TestSource.ParameterType) => {
// 重置表单
dialogFormRef.value?.resetFields()
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
resetFormContent()
titleType.value = sign
dialogVisible.value = true
if (data.id) {
Object.assign(formContent, data)
}
titleType.value = sign
dialogVisible.value = true
if (data.id) {
Object.assign(formContent, data)
}
}
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
let newUpdateParameter = toRaw({...formContent})
delete newUpdateParameter.children
emit('get-parameter', newUpdateParameter)
close()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
let newUpdateParameter = toRaw({ ...formContent })
delete newUpdateParameter.children
emit('get-parameter', newUpdateParameter)
close()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
const close = () => {
dialogVisible.value = false
resetFormContent()
dialogFormRef.value?.resetFields()
dialogVisible.value = false
resetFormContent()
dialogFormRef.value?.resetFields()
}
defineExpose({open})
defineExpose({ open })
</script>
<style scoped>
</style>
<style scoped></style>

448
frontend/src/views/machine/testSource/components/parameterTable.vue
View File

@@ -1,280 +1,298 @@
<template>
<div class='table-box' >
<ProTable
ref='proTable'
:columns='columns'
:pagination="false"
:toolButton="false"
:data="tableData"
row-key="id"
:style="{ height: '250px',maxHeight: '400px',overflow:'hidden'}"
:expand-row-keys="defaultExpandRowKeys"
>
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button :disabled="isDisable" v-auth.testSource="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增
</el-button>
<el-button v-auth.testSource="'delete'" type='danger' :icon='Delete'
plain :disabled='isDisable || !scope.isSelected' @click='batchDelete(scope.selectedListIds)'>
删除
</el-button>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<!-- <el-button type="primary" link :icon='CopyDocument' @click="copyRow(scope.row)">复制</el-button> -->
<el-button :disabled="isDisable" type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
<el-button :disabled="isDisable" type='primary' link :icon='Delete' @click='handleDelete(scope.row.id)'>删除</el-button>
</template>
</ProTable>
</div>
<ParameterPopup @getParameter="getParameter" ref='parameterPopup' :tableData="tableData"/>
<div class="table-box">
<ProTable
ref="proTable"
:columns="columns"
:pagination="false"
:toolButton="false"
:data="tableData"
row-key="id"
:style="{ height: '250px', maxHeight: '400px', overflow: 'hidden' }"
:expand-row-keys="defaultExpandRowKeys"
>
<!-- 表格 header 按钮 -->
<template #tableHeader="scope">
<el-button
:disabled="isDisable"
v-auth.testSource="'add'"
type="primary"
:icon="CirclePlus"
@click="openDialog('add')"
>
新增
</el-button>
<el-button
v-auth.testSource="'delete'"
type="danger"
:icon="Delete"
plain
:disabled="isDisable || !scope.isSelected"
@click="batchDelete(scope.selectedListIds)"
>
删除
</el-button>
</template>
<!-- 表格操作 -->
<template #operation="scope">
<!-- <el-button type="primary" link :icon='CopyDocument' @click="copyRow(scope.row)">复制</el-button> -->
<el-button
:disabled="isDisable"
type="primary"
link
:icon="EditPen"
@click="openDialog('edit', scope.row)"
>
编辑
</el-button>
<el-button :disabled="isDisable" type="primary" link :icon="Delete" @click="handleDelete(scope.row.id)">
删除
</el-button>
</template>
</ProTable>
</div>
<ParameterPopup @getParameter="getParameter" ref="parameterPopup" :tableData="tableData" />
</template>
<script setup lang='tsx' name='useRole'>
import {type TestSource} from '@/api/device/interface/testSource'
<script setup lang="tsx" name="useRole">
import { type TestSource } from '@/api/device/interface/testSource'
import ProTable from '@/components/ProTable/index.vue'
import type {ColumnProps, ProTableInstance} from '@/components/ProTable/interface'
import {CirclePlus, CopyDocument, Delete, EditPen} from '@element-plus/icons-vue'
import {useDictStore} from '@/stores/modules/dict'
import ParameterPopup from '@/views/machine/testSource/components/parameterPopup.vue';
import {reactive, ref, watch} from 'vue'
import {generateUUID} from "@/styles";
import {defineEmits} from "vue/dist/vue";
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import ParameterPopup from '@/views/machine/testSource/components/parameterPopup.vue'
import { reactive, ref, watch } from 'vue'
import { generateUUID } from '@/styles'
import { ElMessage, ElMessageBox } from 'element-plus'
const parameterPopup = ref()
const dictStore = useDictStore()
const btnDelete = ref(false)
// ProTable 实例
const proTable = ref<ProTableInstance>()
const tableData = ref<any[]>([])
const props = defineProps({
parameterStr: {
type: String,
required: true,
},
isDisable: {
type: Boolean,
default: false,
},
});
const props = defineProps({
parameterStr: {
type: String,
required: true
},
isDisable: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['change-parameter'])
let originalParameterArr=reactive<TestSource.ParameterType[]>([])
let originalParameterArr = reactive<TestSource.ParameterType[]>([])
watch(() => props.parameterStr, (newData) => {
if (newData) {
getTableList()
}
})
watch(
() => props.parameterStr,
newData => {
if (newData) {
getTableList()
}
}
)
const defaultExpandRowKeys =computed(() => {
return getDefaultKeyArray(tableData.value)
const defaultExpandRowKeys = computed(() => {
return getDefaultKeyArray(tableData.value)
})
const getDefaultKeyArray = (data: any[]) => {
if (!data || data.length === 0) {
return []
}
if (!data || data.length === 0) {
return []
}
const firstElement = data[0]
let result: any[] = []
recursion(firstElement,result)
const firstElement = data[0]
let result: any[] = []
recursion(firstElement, result)
return result
return result
}
const recursion = (node: any, result: any[]) => {
if (node.children && node.children.length !== 0) {
result.push(node.id)
recursion(node.children[0], result)
}
if (node.children && node.children.length !== 0) {
result.push(node.id)
recursion(node.children[0], result)
}
}
const getTableList = () => {
if (props.parameterStr) {
originalParameterArr = JSON.parse(props.parameterStr)
tableData.value = getTreeData(originalParameterArr)
}
};
if (props.parameterStr) {
originalParameterArr = JSON.parse(props.parameterStr)
tableData.value = getTreeData(originalParameterArr)
}
}
const getTreeData = (data: TestSource.ParameterType[]): TestSource.ParameterType[] => {
const result: TestSource.ParameterType[] = []// 最终返回的树形结构数据
//不能修改原数组，所以需要深拷贝
const copyData = JSON.parse(JSON.stringify(data))
const map = new Map<string, TestSource.ParameterType>();
copyData.forEach(item => {
map.set(item.id, item)
});
for (const item of copyData) {
let parent = map.get(item.pId);
if (parent) {
if (!parent.children) {
parent.children = [];
}
parent.children.push(item);
parent.children.sort((a, b) => {
if (a.sort && b.sort) {
return a.sort - b.sort
const result: TestSource.ParameterType[] = [] // 最终返回的树形结构数据
//不能修改原数组，所以需要深拷贝
const copyData = JSON.parse(JSON.stringify(data))
const map = new Map<string, TestSource.ParameterType>()
copyData.forEach(item => {
map.set(item.id, item)
})
for (const item of copyData) {
let parent = map.get(item.pId)
if (parent) {
if (!parent.children) {
parent.children = []
}
parent.children.push(item)
parent.children.sort((a, b) => {
if (a.sort && b.sort) {
return a.sort - b.sort
} else {
return 0
}
})
} else {
return 0
result.push(item)
result.sort((a, b) => {
if (a.sort && b.sort) {
return a.sort - b.sort
} else {
return 0
}
})
}
})
} else {
result.push(item)
result.sort((a, b) => {
if (a.sort && b.sort) {
return a.sort - b.sort
} else {
return 0
}
})
}
}
return result
return result
}
const columns = reactive<ColumnProps<any>[]>([
{type: 'selection', fixed: 'left', width: 70,
selectable(row, index) {
if (props.isDisable) {
return false;
}
return true;
{
type: 'selection',
fixed: 'left',
width: 70,
selectable(row, index) {
if (props.isDisable) {
return false
}
return true
}
},
},
{type: 'index', fixed: 'left', width: 70, label: '序号'},
{
prop: 'type',
label: '参数类型',
minWidth: 180,
align: 'left',
headerAlign:'center'
},
{
prop: 'desc',
label: '参数描述',
minWidth: 220,
},
{
prop: 'value',
label: '值',
minWidth: 150,
},
{prop: 'operation', label: '操作', fixed: 'right', width: 250},
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'type',
label: '参数类型',
minWidth: 180,
align: 'left',
headerAlign: 'center'
},
{
prop: 'desc',
label: '参数描述',
minWidth: 220
},
{
prop: 'value',
label: '值',
minWidth: 150
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 250 }
])
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<TestSource.ParameterType> = {}) => {
parameterPopup.value?.open(titleType, row)
parameterPopup.value?.open(titleType, row)
}
// 批量删除源参数
const batchDelete = async (ids: string[]) => {
ElMessageBox.confirm(`是否批量删除检测源?`, "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
draggable: true
}).then(async () => {
let parentIds = originalParameterArr.map(item => item.pId);
if (parentIds.some(item => ids.includes(item))) {
ElMessage.error('不能删除父节点');
return;
}
// 直接过滤掉需要删除的项
originalParameterArr = originalParameterArr.filter(item => !ids.includes(item.id));
emit('change-parameter', originalParameterArr);
tableData.value = getTreeData(originalParameterArr);
ElMessage({
type: "success",
message: `批量删除检测源成功!`
});
});
ElMessageBox.confirm(`是否批量删除检测源?`, '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
draggable: true
}).then(async () => {
let parentIds = originalParameterArr.map(item => item.pId)
if (parentIds.some(item => ids.includes(item))) {
ElMessage.error('不能删除父节点')
return
}
// 直接过滤掉需要删除的项
originalParameterArr = originalParameterArr.filter(item => !ids.includes(item.id))
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr)
ElMessage({
type: 'success',
message: `批量删除检测源成功!`
})
})
}
// 删除源参数
const handleDelete = (id: string) => {
ElMessageBox.confirm(`是否删除检测源?`, "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
draggable: true
}).then(async () => {
let parentIds = originalParameterArr.map(item => item.pId);
if (parentIds.includes(id)) {
ElMessage.error('不能删除父节点');
return;
}
originalParameterArr = originalParameterArr.filter(item => item.id !== id);
emit('change-parameter', originalParameterArr);
tableData.value = getTreeData(originalParameterArr);
ElMessage({
type: "success",
message: `删除检测源成功!`
});
});
ElMessageBox.confirm(`是否删除检测源?`, '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
draggable: true
}).then(async () => {
let parentIds = originalParameterArr.map(item => item.pId)
if (parentIds.includes(id)) {
ElMessage.error('不能删除父节点')
return
}
originalParameterArr = originalParameterArr.filter(item => item.id !== id)
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr)
ElMessage({
type: 'success',
message: `删除检测源成功!`
})
})
}
// 复制源参数
const copyRow = (row) => {
delete row.children
let parentIds = originalParameterArr.map(item => item.pId)
const copyRow = row => {
delete row.children
let parentIds = originalParameterArr.map(item => item.pId)
if (parentIds.includes(row.id)) {
let newParameterId = generateUUID().replaceAll("-","")
let children = originalParameterArr.filter(item => item.pId == row.id).map(item => ({
...item,
id: generateUUID().replaceAll("-",""),
pId: newParameterId
}))
originalParameterArr.push({...row, id: newParameterId})
originalParameterArr.push(...children)
} else {
originalParameterArr.push({...row, id: generateUUID().replaceAll("-",""), pId: row.pId})
}
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr)
if (parentIds.includes(row.id)) {
let newParameterId = generateUUID().replaceAll('-', '')
let children = originalParameterArr
.filter(item => item.pId == row.id)
.map(item => ({
...item,
id: generateUUID().replaceAll('-', ''),
pId: newParameterId
}))
originalParameterArr.push({ ...row, id: newParameterId })
originalParameterArr.push(...children)
} else {
originalParameterArr.push({ ...row, id: generateUUID().replaceAll('-', ''), pId: row.pId })
}
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr)
}
const getParameter = (data: TestSource.ParameterType) => {
// if (originalParameterArr.some(item => item.type == data.type)) {
// ElMessage.error({message: '参数类型已存在！'})
// return;
// }
let index = originalParameterArr.findIndex(item => item.id === data.id)
// if (originalParameterArr.some(item => item.type == data.type)) {
// ElMessage.error({message: '参数类型已存在！'})
// return;
// }
let index = originalParameterArr.findIndex(item => item.id === data.id)
if (index === -1) {
data.id = generateUUID().replaceAll("-","")
// 新增
originalParameterArr.push(data)
ElMessage.success({message: '新增成功！'})
} else {
// 编辑
originalParameterArr[index] = data
ElMessage.success({message: '编辑成功！'})
}
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr)
if (index === -1) {
data.id = generateUUID().replaceAll('-', '')
// 新增
originalParameterArr.push(data)
ElMessage.success({ message: '新增成功！' })
} else {
// 编辑
originalParameterArr[index] = data
ElMessage.success({ message: '编辑成功！' })
}
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr)
}
//清空数据
const clearData = () => {
originalParameterArr = []
tableData.value = []
originalParameterArr = []
tableData.value = []
}
defineExpose({
clearData
clearData
})
</script>
<style scoped>
</style>
<style scoped></style>

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

@@ -1,49 +1,59 @@
<template>
<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" >
<el-select v-model='formContent.devType' placeholder="请选择源型号">
<el-option
v-for="item in dictStore.getDictData(dictTypeCode)"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="检测源类型" prop="type" >
<el-select v-model='formContent.type' placeholder="请选择检测源类型">
<el-option
v-for="item in dictStore.getDictData('Pq_Source_Type')"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
</div>
<ParameterTable :parameterStr="formContent.parameter" @change-parameter="changeParameter" ref="parameterTable" :is-disable="tableIsDisable"/>
<template #footer>
<div>
<el-button :disabled="tableIsDisable" @click='close()'>取 消</el-button>
<el-button :disabled="tableIsDisable" type="primary" @click='save()'>保存</el-button>
</div>
</template>
</el-dialog>
<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">
<el-select v-model="formContent.devType" placeholder="请选择源型号">
<el-option
v-for="item in dictStore.getDictData(dictTypeCode)"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="检测源类型" prop="type">
<el-select v-model="formContent.type" placeholder="请选择检测源类型">
<el-option
v-for="item in dictStore.getDictData('Pq_Source_Type')"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
</div>
<ParameterTable
:parameterStr="formContent.parameter"
@change-parameter="changeParameter"
ref="parameterTable"
:is-disable="tableIsDisable"
/>
<template #footer>
<div>
<el-button :disabled="tableIsDisable" @click="close()">取 消</el-button>
<el-button :disabled="tableIsDisable" type="primary" @click="save()">保存</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup name="ErrorSystemDialog">
import {ElMessage, type FormItemRule} from 'element-plus'
import {computed, defineProps, Ref, ref} from 'vue';
import {dialogBig} from '@/utils/elementBind'
import {addTestSource, getTestSourceById, updateTestSource} from '@/api/device/testSource/index'
import {useDictStore} from '@/stores/modules/dict'
import {type TestSource} from '@/api/device/interface/testSource';
import { ElMessage, type FormItemRule } from 'element-plus'
import { computed, Ref, ref } from 'vue'
import { dialogBig } from '@/utils/elementBind'
import { addTestSource, getTestSourceById, updateTestSource } from '@/api/device/testSource/index'
import { useDictStore } from '@/stores/modules/dict'
import { type TestSource } from '@/api/device/interface/testSource'
// 定义弹出组件元信息
const dialogFormRef = ref()
const dictStore = useDictStore()
@@ -53,122 +63,116 @@ const parameterTable = ref()
const tableIsDisable = ref(true)
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = ref<TestSource.ResTestSource>({
id: '',
pattern: modeId.value,
parameter: '',
type: '',
devType: '',
state: 1,
})
return {dialogVisible, titleType, formContent}
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = ref<TestSource.ResTestSource>({
id: '',
pattern: modeId.value,
parameter: '',
type: '',
devType: '',
state: 1
})
return { dialogVisible, titleType, formContent }
}
const {dialogVisible, titleType, formContent} = useMetaInfo()
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
formContent.value = {
id: '',
pattern: modeId.value,
parameter: '',
type: '',
devType: '',
state: 1,
}
formContent.value = {
id: '',
pattern: modeId.value,
parameter: '',
type: '',
devType: '',
state: 1
}
}
let dialogTitle = computed(() => {
switch (titleType.value) {
case 'add':
tableIsDisable.value = false
return '新增检测源';
case 'edit':
tableIsDisable.value = false
return '编辑检测源';
case 'view':
tableIsDisable.value = true
return '查看检测源';
default:
return ''; // 默认情况，可选
}
});
switch (titleType.value) {
case 'add':
tableIsDisable.value = false
return '新增检测源'
case 'edit':
tableIsDisable.value = false
return '编辑检测源'
case 'view':
tableIsDisable.value = true
return '查看检测源'
default:
return '' // 默认情况，可选
}
})
let dictTypeCode = computed(() => {
return 'S_Dev_Type_' + dictStore.getDictData('Pattern').find(item => item.id === modeId.value)?.code
return 'S_Dev_Type_' + dictStore.getDictData('Pattern').find(item => item.id === modeId.value)?.code
})
// 定义规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{required: true, message: '检测源名称必填！', trigger: 'blur'}],
devType: [{required: true, message: '请选择一项设备类型', trigger: 'change'},],
type: [{required: true, message: '请选择一项检测源类型', trigger: 'change '},]
});
name: [{ required: true, message: '检测源名称必填！', trigger: 'blur' }],
devType: [{ required: true, message: '请选择一项设备类型', trigger: 'change' }],
type: [{ required: true, message: '请选择一项检测源类型', trigger: 'change ' }]
})
// 关闭弹窗
const close = () => {
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
parameterTable.value?.clearData()
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
parameterTable.value?.clearData()
}
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (formContent.value.id) {
await updateTestSource(formContent.value);
ElMessage.success({message: `${dialogTitle.value}成功！`})
} else {
await addTestSource(formContent.value);
ElMessage.success({message: `${dialogTitle.value}成功！`})
}
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (formContent.value.id) {
await updateTestSource(formContent.value)
ElMessage.success({ message: `${dialogTitle.value}成功！` })
} else {
await addTestSource(formContent.value)
ElMessage.success({ message: `${dialogTitle.value}成功！` })
}
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: TestSource.ResTestSource, currentMode: string) => {
titleType.value = sign
dialogVisible.value = true
mode.value = currentMode
modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id;
if (data.id) {
const result = await getTestSourceById(data);
if (result && result.data) {
formContent.value = result.data as TestSource.ResTestSource;
titleType.value = sign
dialogVisible.value = true
mode.value = currentMode
modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id
if (data.id) {
const result = await getTestSourceById(data)
if (result && result.data) {
formContent.value = result.data as TestSource.ResTestSource
}
} else {
resetFormContent()
}
} else {
resetFormContent()
}
// 重置表单
dialogFormRef.value?.resetFields()
// 重置表单
dialogFormRef.value?.resetFields()
}
const changeParameter = (parameterArr: any) => {
formContent.value.parameter = JSON.stringify(parameterArr)
formContent.value.parameter = JSON.stringify(parameterArr)
}
// 对外映射
defineExpose({open})
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
refreshTable: (() => Promise<void>) | undefined
}>()
</script>
<style>
</style>
<style></style>