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

优化检测脚本页面

Browse Source
This commit is contained in:
GGJ
2025-02-27 15:09:09 +08:00
parent e0fd42199f
commit c7e5ee0862
9 changed files with 417 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/views/machine/testScript/components/communication.vue
View File

@@ -8,13 +8,13 @@
color: '#fff'
}"
stripe
height="calc(100vh - 515px)"
height="calc(100vh - 480px)"
:style="{ overflow: 'hidden' }"
row-key="id"
default-expand-all
>
<el-table-column prop="name" label="指标" show-overflow-tooltip width="180px" />
<el-table-column align="center" label="参与误差比较">
<el-table-column prop="name" label="指标" show-overflow-tooltip />
<el-table-column align="center" label="参与误差比较" width="110px">
<template #default="{ row }">
<el-switch
v-model="row.errorFlag"
@@ -32,7 +32,7 @@
</el-switch>
</template>
</el-table-column>
<el-table-column align="center" label="是否启用">
<el-table-column align="center" label="是否启用" width="85px">
<template #default="{ row }">
<el-switch
v-model="row.enable"

60
frontend/src/views/machine/testScript/components/scriptForm.ts
View File

@@ -19,11 +19,11 @@ let scriptForm: any = {
// },
], //谐波
inharmList: [
{
inharm: '', //间谐波次数
famp: 0, //间谐波含有率
fphase: 0 // 间谐波相角
}
// {
// inharm: '', //间谐波次数
// famp: 0, //间谐波含有率
// fphase: 0 // 间谐波相角
// }
], //间谐波
flickerData: {
flickerValue: '1', //标准值
@@ -49,11 +49,11 @@ let scriptForm: any = {
fphase: 0, //相角
harmList: [], //谐波
inharmList: [
{
inharm: '', //间谐波次数
famp: 0, //间谐波含有率
fphase: 0 // 间谐波相角
}
// {
// inharm: '', //间谐波次数
// famp: 0, //间谐波含有率
// fphase: 0 // 间谐波相角
// }
], //间谐波
flickerData: {
flickerValue: '1', //标准值
@@ -79,11 +79,11 @@ let scriptForm: any = {
fphase: -120, //相角
harmList: [], //谐波
inharmList: [
{
inharm: '', //间谐波次数
famp: 0, //间谐波含有率
fphase: 0 // 间谐波相角
}
// {
// inharm: '', //间谐波次数
// famp: 0, //间谐波含有率
// fphase: 0 // 间谐波相角
// }
], //间谐波
flickerData: {
flickerValue: '1', //标准值
@@ -109,11 +109,11 @@ let scriptForm: any = {
fphase:-120, //相角
harmList: [], //谐波
inharmList: [
{
inharm: '', //间谐波次数
famp: 0, //间谐波含有率
fphase: 0 // 间谐波相角
}
// {
// inharm: '', //间谐波次数
// famp: 0, //间谐波含有率
// fphase: 0 // 间谐波相角
// }
], //间谐波
flickerData: {
flickerValue: '1', //标准值
@@ -139,11 +139,11 @@ let scriptForm: any = {
fphase: 120, //相角
harmList: [], //谐波
inharmList: [
{
inharm: '', //间谐波次数
famp: 0, //间谐波含有率
fphase: 0 // 间谐波相角
}
// {
// inharm: '', //间谐波次数
// famp: 0, //间谐波含有率
// fphase: 0 // 间谐波相角
// }
], //间谐波
flickerData: {
flickerValue: '1', //标准值
@@ -169,11 +169,11 @@ let scriptForm: any = {
fphase: 120, //相角
harmList: [], //谐波
inharmList: [
{
inharm: '', //间谐波次数
famp: 0, //间谐波含有率
fphase: 0 // 间谐波相角
}
// {
// inharm: '', //间谐波次数
// famp: 0, //间谐波含有率
// fphase: 0 // 间谐波相角
// }
], //间谐波
flickerData: {
flickerValue: '1', //标准值

2
frontend/src/views/machine/testScript/components/setValueTable.vue
View File

@@ -173,7 +173,7 @@ const handleHarmData = row => {
return row
}
// 判断数据是否变化
const isEqual = (obj1, obj2) => {
const isEqual = (obj1:any, obj2:any) => {
// 如果两个对象是同一个引用，直接返回 true
if (obj1 == obj2) return true
// 如果其中一个是 null 或者不是对象，返回 false

2
frontend/src/views/machine/testScript/components/testProjectPopup.vue
View File

@@ -564,7 +564,7 @@ const open = (sign: string, row: any) => {
})
}
} else {
form.value = setharmList(JSON.parse(JSON.stringify(row)))
form.value = JSON.parse(JSON.stringify(row))
copyRowList.value = JSON.parse(JSON.stringify(row))
}
if (['Base_0_10', 'Base_20_85', 'Base_110_200'].includes(form.value.subType)) {

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

@@ -1,16 +1,16 @@
<template>
<div>
<div class="divider-container">
<el-divider style="width: 300px" content-position="left">检测脚本信息</el-divider>
<el-divider style="width: 260px" content-position="left">检测脚本信息</el-divider>
<!-- <el-divider style="width: 400px" content-position="left">通讯脚本</el-divider> -->
<el-divider style="flex: 1" content-position="left">检测项目概要信息</el-divider>
</div>
<div class="data-check-content">
<div class="content-tree">
<Tree :treeData="treeData" />
<Tree :treeData="treeData" @setTab="setTab" />
</div>
<div class="content-right-Tabs" style="height: calc(100vh - 335px); width: 100px">
<div class="content-right-Tabs" style="height: calc(100vh - 315px); width: 100px">
<el-tabs type="border-card" style="height: 100%" v-model="activeName" @tab-change="tabChange">
<el-tab-pane v-for="tab in tabData" :key="tab.value" :label="tab.label" :name="tab.value">
<div v-if="activeName == tab.value">
@@ -25,7 +25,7 @@
:activeName="activeName"
:formContent="props.formContent"
:options="props.options"
style="width: 400px"
style="width: 360px"
:disabled="tab.children.length == 0 ? false : true"
ref="communRef"
/>
@@ -54,11 +54,11 @@
}"
stripe
:cell-style="{ textAlign: 'center' }"
height="calc(100vh - 515px)"
height="calc(100vh - 480px)"
style="width: 100%"
>
<el-table-column type="index" label="组次" width="60" />
<el-table-column prop="ffreq" label="频率(Hz)" width="100" />
<el-table-column prop="ffreq" label="频率(Hz)" width="90" />
<el-table-column
:label="item.label"
v-for="item in column"
@@ -73,7 +73,7 @@
{{
row.channelList[item.num].famp == null
? '/'
: '电压=' +
: '' +
row.channelList[item.num]?.famp +
(valueCode == 'Absolute' ? 'V' : '%')
}}
@@ -82,7 +82,7 @@
{{
row.channelList[item.num].fphase == null
? '/'
: '相角=' +
: '' +
row.channelList[item.num].fphase +
'°'
}}
@@ -94,7 +94,7 @@
{{
row.channelList[item.num + 1].famp == null
? '/'
: '电流=' +
: '' +
row.channelList[item.num + 1].famp +
(valueCode == 'Absolute' ? 'V' : '%')
}}
@@ -103,7 +103,7 @@
{{
row.channelList[item.num + 1].fphase == null
? '/'
: '相角=' +
: '' +
row.channelList[item.num + 1].fphase +
'°'
}}
@@ -113,7 +113,7 @@
</table>
</template>
</el-table-column>
<el-table-column label="是否启用" width="90">
<el-table-column label="是否启用" width="85">
<template #default="{ row }">
<el-switch
v-model="row.enable"
@@ -130,7 +130,7 @@
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="220">
<el-table-column label="操作" width="215">
<template #default="{ row }">
<el-button
type="primary"
@@ -280,6 +280,12 @@ const getTree = () => {
}
})
}
// 设置树点击tab
const setTab = row => {
activeName.value = row.activeName
childActiveName.value = row.childActiveName
getTree()
}
const copyActiveName = ref('')
// 获取通讯脚本点击
const getCommunication = () => {
@@ -415,11 +421,11 @@ onMounted(() => {
}
.content-tree {
width: 300px;
height: calc(100vh - 335px);
width: 260px;
height: calc(100vh - 315px);
border: 1px solid #dcdfe6;
border-radius: 4px;
margin-right: 10px;
// margin-right: 10px;
overflow: auto; /* 同时启用垂直和水平滚动 */
overflow-x: hidden;
}
@@ -479,4 +485,10 @@ input::-webkit-inner-spin-button {
input::-webkit-outer-spin-button {
-webkit-appearance: none !important;
}
.el-divider--horizontal {
margin: 4px 0 24px 0;
}
.el-tabs--border-card > .el-tabs__content {
padding: 10px;
}
</style>

82
frontend/src/views/machine/testScript/components/testScriptHarmTab.vue
View File

@@ -36,8 +36,8 @@
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" size="small">确定</el-button>
<el-button type="primary" @click="empty(0)" size="small">清空列表</el-button>
<el-button type="primary" :icon="Check" @click="onSubmit" size="small">确定</el-button>
<el-button type="primary" :icon="Delete" @click="empty(0)" size="small">清空表格</el-button>
</el-form-item>
</el-form>
<!-- 电压通道内容 -->
@@ -46,23 +46,13 @@
<el-table-column prop="harm" align="center" label="次数" width="60" />
<el-table-column prop="famp" align="center" label="谐波含有率">
<template #default="{ row }">
<el-input
type="number"
v-if="row.show"
@blur="row.show = !row.show"
v-model="row.famp"
/>
<el-input type="number" v-if="row.show" v-model="row.famp" />
<span v-else>{{ row.famp }}%</span>
</template>
</el-table-column>
<el-table-column prop="fphase" label="谐波相角" align="center">
<template #default="{ row }">
<el-input
type="number"
v-if="row.show"
@blur="row.show = !row.show"
v-model="row.fphase"
/>
<el-input type="number" v-if="row.show" v-model="row.fphase" />
<span v-else>{{ row.fphase }}°</span>
</template>
</el-table-column>
@@ -86,35 +76,6 @@
</template>
</el-table-column>
</el-table>
<!-- <el-table :data="tableData2" border size="small" class="half-width-table">
<el-table-column prop="date" label="次数" align="center" width="60" />
<el-table-column prop="date" label="谐波含有率" align="center" width="120">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-input
type="number"
size="small"
v-model="form[0].harmList[$index + 24].famp"
:disabled="!form[0].harmFlag"
/>
<label>%</label>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="谐波相角" align="center" width="120">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-input
type="number"
size="small"
v-model="form[0].harmList[$index + 24].fphase"
:disabled="!form[0].harmFlag"
/>
<label>°</label>
</div>
</template>
</el-table-column>
</el-table> -->
</div>
</el-tab-pane>
</el-tabs>
@@ -155,7 +116,7 @@
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit1" size="small">确定</el-button>
<el-button type="primary" @click="empty(1)" size="small">清空列表</el-button>
<el-button type="primary" @click="empty(1)" size="small">清空表格</el-button>
</el-form-item>
</el-form>
<!-- 电流通道内容 -->
@@ -164,23 +125,13 @@
<el-table-column prop="harm" align="center" label="次数" width="60" />
<el-table-column prop="famp" align="center" label="谐波含有率">
<template #default="{ row }">
<el-input
type="number"
v-if="row.show"
@blur="row.show = !row.show"
v-model="row.famp"
/>
<el-input type="number" v-if="row.show" v-model="row.famp" />
<span v-else>{{ row.famp }}%</span>
</template>
</el-table-column>
<el-table-column prop="fphase" label="谐波相角" align="center">
<template #default="{ row }">
<el-input
type="number"
v-if="row.show"
@blur="row.show = !row.show"
v-model="row.fphase"
/>
<el-input type="number" v-if="row.show" v-model="row.fphase" />
<span v-else>{{ row.fphase }}°</span>
</template>
</el-table-column>
@@ -325,25 +276,6 @@ const onSubmit1 = () => {
const HarmFlagDelete = (index: number, number: number) => {
props.childForm[index].harmList.splice(number, 1)
}
// 定义并初始化 tableData
const tableData1 = ref<TableItem[]>([])
const tableData2 = ref<TableItem[]>([])
for (let i = 2; i <= 25; i++) {
tableData1.value.push({
date: i.toString(),
harmonicRate: `谐波含有率${i}`,
harmonicPhase: `谐波相角${i}`
})
}
for (let i = 26; i <= 50; i++) {
tableData2.value.push({
date: i.toString(),
harmonicRate: `谐波含有率${i}`,
harmonicPhase: `谐波相角${i}`
})
}
</script>
<style lang="scss" scoped>

341
frontend/src/views/machine/testScript/components/testScriptInHarmTab.vue
View File

@@ -2,141 +2,191 @@
<div class="tabs-container">
<el-tabs type="border-card" class="right-tabs" style="height: 100%">
<el-tab-pane label="电压通道">
<el-table :data="form[0].inharmList" border size="small" class="half-width-table">
<el-table-column prop="date" align="center" label="次数">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-form :inline="true" :model="formInline" :disabled="!props.childForm[0].inHarmFlag">
<el-form-item label="次数">
<el-select
v-model="form[0].inharmList[$index].inharm"
:disabled="!form[0].inHarmFlag"
v-model="formInline.inharm"
multiple
collapse-tags
collapse-tags-tooltip
style="width: 160px"
filterable
placeholder="选择次数"
size="small"
clearable
>
<el-option label="全部" value="0" />
<el-option v-for="item in 49" :key="item" :label="item + 0.5" :value="item + 0.5" />
</el-select>
</div>
</template>
</el-table-column>
<el-table-column prop="date" align="center" label="间谐波含有率">
<template #default="{ row, $index }">
<div class="input-label-container">
</el-form-item>
<el-form-item label="含有率">
<el-input
v-model="formInline.famp"
type="number"
placeholder="含有率"
style="width: 80px"
clearable
/>
</el-form-item>
<el-form-item label="相角">
<el-input
v-model="formInline.fphase"
type="number"
placeholder="相角"
style="width: 80px"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Check" @click="onSubmit" size="small">确定</el-button>
<el-button type="primary" :icon="Delete" @click="empty(0)" size="small">清空表格</el-button>
</el-form-item>
</el-form>
<!-- 电压通道内容 -->
<div class="table-container">
<el-table :data="form[0].inharmList" border stripe size="small">
<el-table-column prop="inharm" align="center" label="次数" width="60" />
<el-table-column prop="famp" align="center" label="间谐波含有率">
<template #default="{ row }">
<el-input
type="number"
size="small"
v-model="form[0].inharmList[$index].famp"
:disabled="!form[0].inHarmFlag"
v-if="row.show"
v-model="row.famp"
/>
<label>%</label>
</div>
<span v-else>{{ row.famp }}%</span>
</template>
</el-table-column>
<el-table-column prop="name" label="间谐波相角" align="center">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-table-column prop="fphase" label="间谐波相角" align="center">
<template #default="{ row }">
<el-input
type="number"
size="small"
v-model="form[0].inharmList[$index].fphase"
:disabled="!form[0].inHarmFlag"
v-if="row.show"
v-model="row.fphase"
/>
<label>°</label>
</div>
<span v-else>{{ row.fphase }}°</span>
</template>
</el-table-column>
<el-table-column prop="date" align="center" label="操作" width="100">
<el-table-column label="操作" align="center">
<template #default="{ row, $index }">
<el-button
v-if="$index == 0"
type="primary"
size="small"
link
:icon="CirclePlus"
@click="inHarmFlagAdd(0, row)"
:icon="EditPen"
v-if="!row.show"
@click="row.show = true"
>
新增
编辑
</el-button>
<el-button v-else type="primary" link :icon="Delete" @click="inHarmFlagDelete(0, $index)">
<el-button type="primary" link :icon="Check" v-else @click="row.show = false">
保存
</el-button>
<el-button type="primary" link :icon="Delete" @click="inHarmFlagDelete(0, $index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
</el-tabs>
<el-tabs type="border-card" class="right-tabs" style="height: 100%">
<el-tabs type="border-card" style="height: 100%">
<el-tab-pane label="电流通道">
<el-table :data="form[1].inharmList" border size="small" class="half-width-table">
<el-table-column prop="date" align="center" label="次数">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-form :inline="true" :model="formInline1" :disabled="!props.childForm[1].inHarmFlag">
<el-form-item label="次数">
<el-select
v-model="form[1].inharmList[$index].inharm"
:disabled="!form[1].inHarmFlag"
v-model="formInline1.inharm"
multiple
collapse-tags
collapse-tags-tooltip
style="width: 160px"
filterable
placeholder="选择次数"
size="small"
clearable
>
<el-option label="全部" value="0" />
<el-option v-for="item in 49" :key="item" :label="item + 0.5" :value="item + 0.5" />
</el-select>
</div>
</template>
</el-table-column>
<el-table-column prop="date" align="center" label="间谐波含有率">
<template #default="{ row, $index }">
<div class="input-label-container">
</el-form-item>
<el-form-item label="含有率">
<el-input
v-model="formInline1.famp"
type="number"
placeholder="含有率"
style="width: 80px"
clearable
/>
</el-form-item>
<el-form-item label="相角">
<el-input
v-model="formInline1.fphase"
type="number"
placeholder="相角"
style="width: 80px"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit1" size="small">确定</el-button>
<el-button type="primary" @click="empty(1)" size="small">清空表格</el-button>
</el-form-item>
</el-form>
<!-- 电流通道内容 -->
<div class="table-container">
<el-table :data="form[1].inharmList" border stripe size="small">
<el-table-column prop="inharm" align="center" label="次数" width="60" />
<el-table-column prop="famp" align="center" label="间谐波含有率">
<template #default="{ row }">
<el-input
type="number"
size="small"
v-model="form[1].inharmList[$index].famp"
:disabled="!form[1].inHarmFlag"
v-if="row.show"
v-model="row.famp"
/>
<label>%</label>
</div>
<span v-else>{{ row.famp }}%</span>
</template>
</el-table-column>
<el-table-column prop="name" label="间谐波相角" align="center">
<template #default="{ row, $index }">
<div class="input-label-container">
<el-table-column prop="fphase" label="间谐波相角" align="center">
<template #default="{ row }">
<el-input
type="number"
size="small"
v-model="form[1].inharmList[$index].fphase"
:disabled="!form[1].inHarmFlag"
v-if="row.show"
v-model="row.fphase"
/>
<label>°</label>
</div>
<span v-else>{{ row.fphase }}°</span>
</template>
</el-table-column>
<el-table-column prop="date" align="center" label="操作" width="100">
<el-table-column label="操作" align="center">
<template #default="{ row, $index }">
<el-button
v-if="$index == 0"
type="primary"
size="small"
link
:icon="CirclePlus"
@click="inHarmFlagAdd(1, row)"
:icon="EditPen"
v-if="!row.show"
@click="row.show = true"
>
新增
编辑
</el-button>
<el-button v-else type="primary" link :icon="Delete" @click="inHarmFlagDelete(1, $index)">
<el-button type="primary" link :icon="Check" v-else @click="row.show = false">
保存
</el-button>
<el-button type="primary" link :icon="Delete" @click="inHarmFlagDelete(1, $index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup lang="ts">
import { Check, Delete, EditPen, CopyDocument } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { CirclePlus, Delete, EditPen, CopyDocument } from '@element-plus/icons-vue'
const props = defineProps({
childForm: {
type: Array,
type: Array as any,
required: true
}
})
@@ -147,45 +197,138 @@ const form: any = computed({
},
set(value) {}
})
const num = ref(0)
const formInline = ref({
inharm: [],
famp: '',
fphase: ''
})
const formInline1 = ref({
inharm: [],
famp: '',
fphase: ''
})
// 定义表格数据项的类型
interface TableItem {
date: string
inharmonicRate?: string
inharmonicPhase?: string
name?: string
}
const empty = (index: number) => {
props.childForm[index].inharmList = []
}
const onSubmit = () => {
console.log('🚀 ~ onSubmit ~ props.childForm[0]:', props.childForm[0].inharmList)
if (formInline.value.inharm.length == 0 || formInline.value.famp == '' || formInline.value.fphase == '') {
ElMessage.warning('请填写值!')
return
}
if (formInline.value.inharm.includes('0')) {
props.childForm[0].inharmList = []
for (let i = 2; i < 51; i++) {
props.childForm[0].inharmList.push({
inharm: i, //间间谐波次数
famp: formInline.value.famp, //间间谐波含有率
fphase: formInline.value.fphase // 间间谐波相角
})
}
} else {
formInline.value.inharm.forEach((item: any) => {
props.childForm[0].inharmList.push({
inharm: item, //间间谐波次数
famp: formInline.value.famp, //间间谐波含有率
fphase: formInline.value.fphase // 间间谐波相角
})
})
const seen = new Set()
const uniqueData = []
// 添加间间谐波
const inHarmFlagAdd = (index: number, row: any) => {
props.childForm[index].inharmList.push({ inharm: '', famp: 0, fphase: 0 })
num.value += 1
// 反向遍历数组
for (let i = props.childForm[0].inharmList.length - 1; i >= 0; i--) {
const item = props.childForm[0].inharmList[i]
// 如果 inharm 还未出现过，则添加到结果数组
if (!seen.has(item.inharm)) {
seen.add(item.inharm)
uniqueData.unshift(item) // 添加到结果数组的开头
}
}
props.childForm[0].inharmList = uniqueData.sort((a, b) => a.inharm - b.inharm)
}
}
const onSubmit1 = () => {
if (formInline1.value.inharm.length == 0 || formInline1.value.famp == '' || formInline1.value.fphase == '') {
ElMessage.warning('请填写值!')
return
}
if (formInline1.value.inharm.includes('0')) {
props.childForm[1].inharmList = []
for (let i = 2; i < 51; i++) {
props.childForm[1].inharmList.push({
inharm: i, //间间谐波次数
famp: formInline1.value.famp, //间间谐波含有率
fphase: formInline1.value.fphase // 间间谐波相角
})
}
} else {
formInline1.value.inharm.forEach((item: any) => {
props.childForm[1].inharmList.push({
inharm: item, //间间谐波次数
famp: formInline1.value.famp, //间间谐波含有率
fphase: formInline1.value.fphase // 间间谐波相角
})
})
const seen = new Set()
const uniqueData = []
// 反向遍历数组
for (let i = props.childForm[1].inharmList.length - 1; i >= 0; i--) {
const item = props.childForm[1].inharmList[i]
// 如果 inharm 还未出现过，则添加到结果数组
if (!seen.has(item.inharm)) {
seen.add(item.inharm)
uniqueData.unshift(item) // 添加到结果数组的开头
}
}
props.childForm[1].inharmList = uniqueData.sort((a, b) => a.inharm - b.inharm)
}
}
// 删除
const inHarmFlagDelete = (index: number, number: number) => {
props.childForm[index].inharmList.splice(number, 1)
num.value -= 1
}
</script>
<style lang="scss" scoped>
.container {
.tabs-container {
display: flex;
align-items: center;
border-bottom: 1px solid #ccc;
justify-content: space-between; /* 使两个 el-tabs 之间有间距 */
height: 100%;
}
.right-tabs {
flex: 1; /* 使两个 el-tabs 占据相同的空间 */
margin-right: 10px; /* 可选：添加右侧间距 */
}
.el-tabs {
flex: 1; /* 使两个 el-tabs 占据相同的空间 */
}
.table-container {
display: flex;
justify-content: space-between; /* 使两个表格之间有间距 */
width: 100%;
margin-top: 10px;
height: 40px;
}
.fixed-width-tabs:last-child {
margin-right: 0; /* 最后一个 el-tabs 不需要右侧间距 */
.half-width-table {
flex: 1; /* 使两个表格占据相同的空间 */
margin-right: 10px; /* 可选：添加表格之间的间距 */
}
.el-tab-pane {
display: flex;
flex-direction: column; /* 确保内容上下排列 */
.half-width-table:last-child {
margin-right: 0; /* 最后一个表格不需要右侧间距 */
}
.el-form-item {
margin-bottom: 20px; /* 可选：添加表单项之间的间距 */
}
:deep(.el-form-item) {
margin-bottom: 10px !important;
}
.input-label-container {
display: flex;
align-items: center; /* 垂直居中对齐 */
@@ -194,13 +337,7 @@ const inHarmFlagDelete = (index: number, number: number) => {
.input-label-container label {
margin-left: 5px; /* 添加标签与输入框之间的间距 */
}
.tabs-container {
display: flex;
justify-content: space-between; /* 使两个 el-tabs 之间有间距 */
height: 100%;
.right-tabs {
flex: 1; /* 使两个 el-tabs 占据相同的空间 */
margin-right: 10px; /* 可选：添加右侧间距 */
}
}
// 全局css 加上以下代码，可以隐藏上下箭头
// 取消input的上下箭头
</style>

1
frontend/src/views/machine/testScript/components/testScriptPopup.vue
View File

@@ -189,7 +189,6 @@ const treeInfo = async (currentMode: string) => {
onMounted(() => {
let data: any = router.options.history.state
console.log('🚀 ~ onMounted ~ data:', data)
if (data.title == null) return
nextTick(async () => {
await treeInfo(data.mode)

59
frontend/src/views/machine/testScript/components/tree.vue
View File

@@ -1,5 +1,13 @@
<template>
<el-tree node-key="id" default-expand-all :data="props.treeData" :props="defaultProps" style="width: 100%">
<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.scriptTypeName || data.sourceDesc" placement="top" :hide-after="0">
<div class="custom-tree-node">
@@ -19,12 +27,61 @@ const props = defineProps({
required: true
}
})
const emit = defineEmits(['setTab'])
const dataTree = ref<CheckData.TreeItem[]>([])
const defaultProps = {
children: 'children',
label: 'scriptTypeName',
pid: 'pid'
}
const 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()
// 获取当前节点的直接父节点
emit('setTab', {
activeName: parents[0].scriptTypeCode,
childActiveName: findTargetCodes(parents, code)[0] || ''
})
}
// 返回父级
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)) {
// console.log("🚀 ~ findTargetCodes ~ targetCodes.includes(item.scriptTypeCode):",item.scriptTypeCode, 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(() => {})
// // 对外映射