优化检测脚本页面

This commit is contained in:
GGJ
2025-02-24 16:45:39 +08:00
parent 1a23bcb510
commit bd1eecc106
8 changed files with 544 additions and 411 deletions

View File

@@ -1,53 +1,56 @@
<template>
<el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1400px">
<div class="dialog-content">
<el-tabs type="border-card" class="right-tabs" style="height: 100%">
<el-tab-pane label="检测">
<!-- 全局设置菜单内容 -->
<div style="height: 295px">
<el-radio-group v-model="form.subType">
<el-radio
v-for="item in tabChildren"
:key="item"
:label="item.label"
:value="item.code"
border
style="margin: 0 0 10px 10px"
/>
<!-- <el-radio v-for="item in tabChildren" :value="item.value" border>{{ item.label }}</el-radio> -->
</el-radio-group>
</div>
</el-tab-pane>
</el-tabs>
<el-tabs type="border-card" class="left-tabs" style="height: 100%">
<el-tab-pane label="输出菜单">
<!-- 输出菜单内容 -->
<el-table
:data="tableData"
style="width: 100%"
:style="{ height: '295px', overflow: 'hidden' }"
:show-header="false"
:span-method="arraySpanMethod"
:cell-style="tableStyle.cellStyle"
:header-cell-style="{ textAlign: 'center', backgroundColor: '#003078', color: '#fff' }"
@cell-click="handleRowClick"
:key="key"
>
<el-table-column prop="name" label="相别" width="60" align="center" />
<el-table-column prop="frequency" label="电压/电流" align="center" width="60" />
<el-table-column prop="L1" label="" width="180" align="center">
<template #default="{ row, $index }">
<span>
{{ row.type === 'V' ? '电压' : '电流' }}{{ form.channelList[$index].famp
}}{{ valueCode == 'Absolute' ? (row.type === 'V' ? 'V' : 'A') : '%' }} 相角{{
form.channelList[$index].fphase
}}°
</span>
</template>
</el-table-column>
<el-table-column label="操作" width="85">
<template #default="{ row, $index }">
<el-button
<el-carousel height="620px" :autoplay="false" ref="carouselRef" indicator-position="none">
<el-carousel-item :name="0" style="height: 100%; overflow-y: auto">
<div class="dialog-content">
<el-tabs type="border-card" class="right-tabs">
<el-tab-pane label="检测">
<!-- 全局设置菜单内容 -->
<div style="height: 295px">
<el-radio-group v-model="form.subType">
<el-radio
v-for="item in tabChildren"
:key="item"
:label="item.label"
:value="item.code"
border
style="margin: 0 0 10px 10px"
/>
<!-- <el-radio v-for="item in tabChildren" :value="item.value" border>{{ item.label }}</el-radio> -->
</el-radio-group>
</div>
</el-tab-pane>
</el-tabs>
<el-tabs type="border-card" class="left-tabs" style="height: 100%">
<el-tab-pane label="输出菜单">
<!-- 输出菜单内容 -->
<el-table
:data="tableData"
style="width: 100%"
:style="{ height: '295px', overflow: 'hidden' }"
:show-header="false"
:span-method="arraySpanMethod"
:cell-style="tableStyle.cellStyle"
:header-cell-style="{ textAlign: 'center', backgroundColor: '#003078', color: '#fff' }"
@cell-click="handleRowClick"
:key="key"
>
<el-table-column prop="name" label="相别" width="60" align="center" />
<el-table-column prop="frequency" label="电压/电流" align="center" width="60" />
<el-table-column prop="L1" label="值" width="180" align="center">
<template #default="{ row, $index }">
<span>
{{ row.type === 'V' ? '电压' : '电流' }}{{ form.channelList[$index].famp
}}{{
valueCode == 'Absolute' ? (row.type === 'V' ? 'V' : 'A') : '%'
}}
相角{{ form.channelList[$index].fphase }}°
</span>
</template>
</el-table-column>
<el-table-column label="操作" width="85">
<template #default="{ row, $index }">
<!-- <el-button
type="primary"
v-if="$index != 4"
link
@@ -55,102 +58,120 @@
@click="copyRow($index)"
>
复制
</el-button>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="{ row, $index }">
<el-checkbox-button
v-model="form.channelList[$index].channelFlag"
label="通道使能"
size="small"
/>
<el-checkbox-button
v-model="form.channelList[$index].harmFlag"
label="谐波使能"
size="small"
/>
<el-checkbox-button
v-model="form.channelList[$index].inHarmFlag"
label="间谐波使能"
size="small"
/>
<el-checkbox-button
v-model="form.channelList[$index].flickerFlag"
label="闪变使能"
size="small"
/>
<el-checkbox-button
v-model="form.channelList[$index].dipFlag"
label="暂态使能"
size="small"
/>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
<el-tabs type="border-card" class="right-tabs" style="height: 100%">
<el-tab-pane label="全局设置菜单">
<!-- 全局设置菜单内容 -->
<div style="height: 295px">
<div class="form-item-container">
<el-form-item label="频率:" prop="name">
<div class="input-label-container">
<el-input
type="number"
@mousewheel.native.prevent
style="width: 100px"
v-model="form.ffreq"
/>
<label>Hz</label>
</el-button> -->
<el-dropdown placement="top-start">
<el-button type="primary" link :icon="CopyDocument">复制</el-button>
<template #dropdown>
<el-dropdown-menu>
<div v-if="$index == 0">
<el-dropdown-item @click="copyRow(0, 2)">L2</el-dropdown-item>
<el-dropdown-item @click="copyRow(0, 4)">L3</el-dropdown-item>
</div>
<div v-if="$index == 2">
<el-dropdown-item @click="copyRow(2, 0)">L1</el-dropdown-item>
<el-dropdown-item @click="copyRow(2, 4)">L3</el-dropdown-item>
</div>
<div v-if="$index == 4">
<el-dropdown-item @click="copyRow(4, 0)">L1</el-dropdown-item>
<el-dropdown-item @click="copyRow(4, 2)">L2</el-dropdown-item>
</div>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="{ row, $index }">
<el-checkbox-button
v-model="form.channelList[$index].channelFlag"
label="通道使能"
/>
<el-checkbox-button
v-model="form.channelList[$index].harmFlag"
label="谐波使能"
/>
<el-checkbox-button
v-model="form.channelList[$index].inHarmFlag"
label="间谐波使能"
/>
<el-checkbox-button
v-model="form.channelList[$index].flickerFlag"
label="闪变使能"
/>
<el-checkbox-button
v-model="form.channelList[$index].dipFlag"
label="暂态使能"
/>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
<el-tabs type="border-card" class="right-tabs" style="height: 100%">
<el-tab-pane label="全局设置菜单">
<!-- 全局设置菜单内容 -->
<div style="height: 295px">
<div class="form-item-container">
<el-form-item label="频率:" prop="name">
<div class="input-label-container">
<el-input
type="number"
@mousewheel.native.prevent
style="width: 100px"
v-model="form.ffreq"
/>
<label>Hz</label>
</div>
</el-form-item>
</div>
</el-form-item>
</div>
<div class="button-label-container">
<label>参考设定值列表:</label>
<el-button type="primary" :icon="EditPen" @click="openDialog">编辑</el-button>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div style="margin-top: 10px">
<el-tabs type="border-card" class="custom-tabs">
<el-tab-pane label="电压/电流编辑" v-if="childForm[0].channelFlag || childForm[1].channelFlag">
<TestScriptVolCurTab :childForm="childForm" />
</el-tab-pane>
<el-tab-pane label="谐波编辑" v-if="childForm[0].harmFlag || childForm[1].harmFlag">
<TestScriptHarmTab :childForm="childForm" />
</el-tab-pane>
<el-tab-pane label="间谐波编辑" v-if="childForm[0].inHarmFlag || childForm[1].inHarmFlag">
<TestScriptInHarmTab :childForm="childForm" />
</el-tab-pane>
<el-tab-pane label="闪变编辑" v-if="childForm[0].flickerFlag || childForm[1].flickerFlag">
<TestScriptFlickerTab :childForm="childForm" />
</el-tab-pane>
<el-tab-pane label="暂态编辑" v-if="childForm[0].dipFlag || childForm[1].dipFlag">
<TestScriptDipTab :childForm="childForm" />
</el-tab-pane>
</el-tabs>
</div>
<!-- <SetValueTable ref="setValueTableRef" v-if="showSetValueTable" /> -->
<!-- <div class="button-label-container">
<label>参考设定值列表:</label>
<el-button type="primary" :icon="EditPen" @click="openDialog">编辑</el-button>
</div> -->
</div>
</el-tab-pane>
</el-tabs>
</div>
<div style="margin-top: 10px; height: 245px">
<el-tabs type="border-card" class="custom-tabs">
<el-tab-pane label="电压/电流编辑" v-if="childForm[0].channelFlag || childForm[1].channelFlag">
<TestScriptVolCurTab :childForm="childForm" :valueCode="valueCode" />
</el-tab-pane>
<el-tab-pane label="谐波编辑" v-if="childForm[0].harmFlag || childForm[1].harmFlag">
<TestScriptHarmTab :childForm="childForm" />
</el-tab-pane>
<el-tab-pane label="间谐波编辑" v-if="childForm[0].inHarmFlag || childForm[1].inHarmFlag">
<TestScriptInHarmTab :childForm="childForm" />
</el-tab-pane>
<el-tab-pane label="闪变编辑" v-if="childForm[0].flickerFlag || childForm[1].flickerFlag">
<TestScriptFlickerTab :childForm="childForm" />
</el-tab-pane>
<el-tab-pane label="暂态编辑" v-if="childForm[0].dipFlag || childForm[1].dipFlag">
<TestScriptDipTab :childForm="childForm" />
</el-tab-pane>
</el-tabs>
</div>
</el-carousel-item>
<el-carousel-item :name="1" style="height: 100%; overflow-y: auto" v-if="showSetValueTable">
<SetValueTable
ref="setValueTableRef"
:activeName="props.activeName"
:formContent="props.formContent"
:form="form"
:key="initial"
/>
</el-carousel-item>
</el-carousel>
<template #footer>
<div>
<el-button @click="close"> </el-button>
<el-button type="primary" @click="save">保存</el-button>
<el-button type="primary" @click="next" v-if="!showSetValueTable">下一步</el-button>
<el-button type="primary" @click="previous" v-if="showSetValueTable">上一步</el-button>
<el-button type="primary" @click="save" v-if="showSetValueTable">保存</el-button>
</div>
</template>
</el-dialog>
<SetValueTable
ref="setValueTableRef"
:activeName="props.activeName"
:formContent="props.formContent"
:form="form"
v-if="showSetValueTable"
/>
</template>
<script setup lang="ts">
@@ -165,10 +186,10 @@ import TestScriptInHarmTab from '@/views/machine/testScript/components/testScrip
import TestScriptFlickerTab from '@/views/machine/testScript/components/testScriptFlickerTab.vue'
import TestScriptDipTab from '@/views/machine/testScript/components/testScriptDipTab.vue'
import { useDictStore } from '@/stores/modules/dict'
import { addScriptDtls, } from '@/api/device/testScript'
import { addScriptDtls } from '@/api/device/testScript'
import scriptForm from './scriptForm'
const emit = defineEmits(['addTab', 'close'])
const emit = defineEmits(['addTab', 'close', 'getCommunication'])
const dictStore = useDictStore()
const props = defineProps({
options: {
@@ -186,6 +207,10 @@ const props = defineProps({
formContent: {
type: [Object, Array],
required: true
},
communicationList: {
type: Array,
required: true
}
})
const key = ref(0)
@@ -194,6 +219,8 @@ const showSetValueTable = ref(false)
const form: any = ref(JSON.parse(JSON.stringify(scriptForm)))
const childForm: any = ref([])
const ScriptValueType = ref('')
const initial = ref(0) //轮播图索引
const carouselRef = ref()
const setValueTableRef = ref()
const dialogVisible = ref(false)
const dialogTitle = ref()
@@ -255,6 +282,7 @@ const close = () => {
// 保存数据
const save = () => {
let copyForm = handleHarmData()
copyForm.checkDataList = setValueTableRef.value?.getTableData()
addScriptDtls({ ...copyForm, scriptId: props.formContent.id, scriptType: props.activeName }).then(res => {
if (res.code === 'A0000') {
ElMessage.success({
@@ -267,6 +295,59 @@ const save = () => {
})
// emit('addTab', form.value)
}
// 上一步
const previous = () => {
carouselRef.value.setActiveItem(0)
showSetValueTable.value = false
}
// 下一步
const next = () => {
emit('getCommunication')
setTimeout(() => {
// 判断通讯脚本
if (!checkFlags(props.communicationList)) {
ElMessage.warning({
message: '请先完善通讯脚本',
type: 'warning'
})
return
}
// 判断够选通道
if (!checkChannel(form.value)) {
ElMessage.warning({
message: '请先选择使能通道',
type: 'warning'
})
return
}
}, 100)
showSetValueTable.value = true
setTimeout(() => {
setValueTableRef.value?.open(props.communicationList)
carouselRef.value.setActiveItem(1)
}, 100)
// 切换轮播图
}
// 判断通讯脚本是否有值
const checkFlags = (data: any) => {
for (let i = 0; i < data.length; i++) {
const item = data[i]
if (item.children) {
for (let j = 0; j < item.children.length; j++) {
const child = item.children[j]
if (child.errorFlag != 0 || child.enable != 0) {
return true
}
}
}
}
return false
}
// 判断够选通道
const checkChannel = (data: row) => {
return data.channelList.every(item => item.channelFlag === true)
}
//处理谐波数据
const handleHarmData = () => {
let copyForm = JSON.parse(JSON.stringify(form.value))
@@ -324,15 +405,15 @@ const setharmList = (row: any) => {
return row
}
// 复制
const copyRow = (index: number) => {
form.value.channelList[index + 2] = JSON.parse(JSON.stringify(form.value.channelList[index]))
form.value.channelList[index + 3] = JSON.parse(JSON.stringify(form.value.channelList[index + 1]))
form.value.channelList[index].channelType == 'Ua'
? (form.value.channelList[index + 2].channelType = 'Ub')
: (form.value.channelList[index + 2].channelType = 'Uc')
form.value.channelList[index + 1].channelType == 'Ia'
? (form.value.channelList[index + 3].channelType = 'Ib')
: (form.value.channelList[index + 3].channelType = 'Ic')
const copyRow = (num: number, index: number) => {
form.value.channelList[index] = JSON.parse(JSON.stringify(form.value.channelList[num]))
form.value.channelList[index + 1] = JSON.parse(JSON.stringify(form.value.channelList[num + 1]))
form.value.channelList[num].channelType == 'Ua'
? (form.value.channelList[index].channelType = 'Ub')
: (form.value.channelList[index].channelType = 'Uc')
form.value.channelList[num + 1].channelType == 'Ia'
? (form.value.channelList[index + 1].channelType = 'Ib')
: (form.value.channelList[index + 1].channelType = 'Ic')
key.value += 1
ElMessage.success({
message: '复制成功!',
@@ -341,15 +422,7 @@ const copyRow = (index: number) => {
}
// 打开 drawer(新增、编辑)
const openDialog = () => {
let copyForm = JSON.parse(JSON.stringify(form.value))
showSetValueTable.value = true
// setValueTableRef.value?.open()
setTimeout(() => {
setValueTableRef.value?.open(props.formContent)
}, 100)
}
const openDialog = () => {}
// 对外映射
defineExpose({ open })
@@ -360,7 +433,6 @@ defineExpose({ open })
display: flex;
justify-content: flex-start;
align-items: stretch;
height: 100%;
}
.tabs-container {
@@ -402,4 +474,10 @@ defineExpose({ open })
.input-label-container label {
margin-left: 5px; /* 添加标签与输入框之间的间距 */
}
:deep(.el-carousel__indicators) {
display: none !important;
}
:deep(.el-carousel__arrow) {
display: none !important;
}
</style>