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-13 16:15:26 +08:00
parent 475d236b7e
commit 1e83172e9a
13 changed files with 990 additions and 873 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/.prettierrc Normal file
View File

@@ -0,0 +1,11 @@
{
"singleQuote": true,
"trailingComma": "none",
"tabWidth": 4,
"printWidth": 120,
"useTabs": false,
"semi": false,
"arrowParens": "avoid",
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "ignore"
}

10
frontend/src/api/check/test/index.ts
View File

@@ -23,11 +23,11 @@ export const getFormData = (params: {
* @param params * @param params
*/ */
export const getTreeData = (params: { export const getTreeData = (params: {
scriptId: string, scriptId?: string,
devId: string, devId?: string,
devNum: string, devNum?: string,
scriptType: string | null, scriptType?: string | null,
code: number, code?: number,
}) => { }) => {
return http.post<CheckData.TreeItem[]>("/result/treeData/", params, {loading: true}); return http.post<CheckData.TreeItem[]>("/result/treeData/", params, {loading: true});
} }

1
frontend/src/api/device/interface/testScript.ts
View File

@@ -28,6 +28,7 @@ export namespace TestScript {
createTime?: string; createTime?: string;
updateBy?: string; updateBy?: string;
updateTime?: string; updateTime?: string;
selectedValue?: string;
} }
/** /**

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

@@ -1,142 +1,180 @@
<template> <template>
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" width="1400px"> <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1400px">
<div class="dialog-content" > <div class="dialog-content">
<el-tabs type="border-card" class="left-tabs" style="height: 100%;"> <el-tabs type="border-card" class="left-tabs" style="height: 100%">
<el-tab-pane label="输出菜单"> <el-tab-pane label="输出菜单">
<!-- 输出菜单内容 --> <!-- 输出菜单内容 -->
<el-table :data="tableData" <el-table
:header-cell-style="{ textAlign: 'center',backgroundColor: '#003078',color: '#fff' } " :data="tableData"
:header-cell-style="{ textAlign: 'center', backgroundColor: '#003078', color: '#fff' }"
:cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
style="width: 100%" style="width: 100%"
:style="{ height: '295px',overflow:'hidden'}" :style="{ height: '295px', overflow: 'hidden' }"
:show-header="false" :show-header="false"
:span-method="arraySpanMethod"> :span-method="arraySpanMethod"
>
<el-table-column prop="sort" label="相别" width="60" /> <el-table-column prop="sort" label="相别" width="60" />
<el-table-column prop="frequency" label="电压/电流" width="90" /> <el-table-column prop="frequency" label="电压/电流" width="90" />
<el-table-column prop="L1" label="值" width="180"/> <el-table-column prop="L1" label="值" width="180" />
<el-table-column label="操作" width="80"> <el-table-column label="操作" width="80">
<template #default="{ }"> <template #default="{}">
<el-button type="info" :icon="Bottom"></el-button> <el-button type="info" :icon="Bottom"></el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作"> <el-table-column label="操作">
<template #default="{ row, $index }"> <template #default="{ row, $index }">
<el-button :type="buttonTypes[$index].channel || 'info'" @click="toggleType(row, $index,'channel')">通道使能</el-button> <el-button
<el-button :type="buttonTypes[$index]?.harmonic || 'info'" @click="toggleType(row, $index, 'harmonic')">谐波使能</el-button> :type="buttonTypes[$index].channel || 'info'"
<el-button :type="buttonTypes[$index]?.interHarmonic || 'info'" @click="toggleType(row, $index, 'interHarmonic')">间谐波使能</el-button> @click="toggleType(row, $index, 'channel')"
<el-button :type="buttonTypes[$index]?.flicker || 'info'" @click="toggleType(row, $index, 'flicker')">闪变使能</el-button> >
<el-button :type="buttonTypes[$index]?.transient || 'info'" @click="toggleType(row, $index, 'transient')">暂态使能</el-button> 通道使能
</el-button>
<el-button
:type="buttonTypes[$index]?.harmonic || 'info'"
@click="toggleType(row, $index, 'harmonic')"
>
谐波使能
</el-button>
<el-button
:type="buttonTypes[$index]?.interHarmonic || 'info'"
@click="toggleType(row, $index, 'interHarmonic')"
>
间谐波使能
</el-button>
<el-button
:type="buttonTypes[$index]?.flicker || 'info'"
@click="toggleType(row, $index, 'flicker')"
>
闪变使能
</el-button>
<el-button
:type="buttonTypes[$index]?.transient || 'info'"
@click="toggleType(row, $index, 'transient')"
>
暂态使能
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<el-tabs type="border-card" class="right-tabs" style="height: 100%;"> <el-tabs type="border-card" class="right-tabs" style="height: 100%">
<el-tab-pane label="全局设置菜单"> <el-tab-pane label="全局设置菜单">
<!-- 全局设置菜单内容 --> <!-- 全局设置菜单内容 -->
<div style="height: 295px;">
<div class="form-item-container"> <div class="form-item-container">
<el-form-item label="频率：" prop='name'> <el-form-item label="频率：" prop="name">
<div class="input-label-container"> <div class="input-label-container">
<el-input style="width: 100px;" /> <el-input style="width: 100px" />
<label>Hz</label> <label>Hz</label>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
<div class="button-label-container"> <div class="button-label-container">
<label>参考设定值列表:</label> <label>参考设定值列表:</label>
<el-button type="primary" :icon='EditPen' @click="openDialog">编辑</el-button> <el-button type="primary" :icon="EditPen" @click="openDialog">编辑</el-button>
</div>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div style="margin-top: 20px;"> <div style="margin-top: 10px">
<el-tabs type="border-card" class="custom-tabs"> <el-tabs type="border-card" class="custom-tabs">
<el-tab-pane label="电压/电流编辑"> <el-tab-pane label="电压/电流编辑">
<TestScriptVolCurTab/> <TestScriptVolCurTab />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="谐波编辑"> <el-tab-pane label="谐波编辑">
<TestScriptHarmTab/> <TestScriptHarmTab />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="间谐波编辑"> <el-tab-pane label="间谐波编辑">
<TestScriptInHarmTab/> <TestScriptInHarmTab />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="闪变编辑"> <el-tab-pane label="闪变编辑">
<TestScriptFlickerTab/> <TestScriptFlickerTab />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="暂态编辑"> <el-tab-pane label="暂态编辑">
<TestScriptDipTab/> <TestScriptDipTab />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<SetValueTable ref="setValueTable"/> <SetValueTable ref="setValueTable" />
<template #footer> <template #footer>
<div > <div>
<el-button @click='close()'>取 消</el-button> <el-button @click="close()">取 消</el-button>
<el-button type="primary" @click='save()'>保存</el-button> <el-button type="primary" @click="save()">保存</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { dialogBig } from '@/utils/elementBind' import { dialogBig } from '@/utils/elementBind'
import { onMounted, reactive, ref } from 'vue' import { onMounted, reactive, ref } from 'vue'
import SetValueTable from '@/views/machine/testScript/components/setValueTable.vue'; import SetValueTable from '@/views/machine/testScript/components/setValueTable.vue'
import {EditPen,ArrowDown, Bottom} from '@element-plus/icons-vue' import { EditPen, ArrowDown, Bottom } from '@element-plus/icons-vue'
import { type TabsInstance } from 'element-plus'; import { type TabsInstance } from 'element-plus'
import TestScriptVolCurTab from '@/views/machine/testScript/components/testScriptVolCurTab.vue'; import TestScriptVolCurTab from '@/views/machine/testScript/components/testScriptVolCurTab.vue'
import TestScriptHarmTab from '@/views/machine/testScript/components/testScriptHarmTab.vue'; import TestScriptHarmTab from '@/views/machine/testScript/components/testScriptHarmTab.vue'
import TestScriptInHarmTab from '@/views/machine/testScript/components/testScriptInHarmTab.vue'; import TestScriptInHarmTab from '@/views/machine/testScript/components/testScriptInHarmTab.vue'
import TestScriptFlickerTab from '@/views/machine/testScript/components/testScriptFlickerTab.vue'; import TestScriptFlickerTab from '@/views/machine/testScript/components/testScriptFlickerTab.vue'
import TestScriptDipTab from '@/views/machine/testScript/components/testScriptDipTab.vue'; import TestScriptDipTab from '@/views/machine/testScript/components/testScriptDipTab.vue'
const dialogVisible = ref(false) const dialogVisible = ref(false)
const dialogTitle = ref() const dialogTitle = ref()
const setValueTable = ref() const setValueTable = ref()
const buttonTypeOptions = ['default', 'text', 'success', 'warning', 'info', 'primary', 'danger'] as const; const buttonTypeOptions = ['default', 'text', 'success', 'warning', 'info', 'primary', 'danger'] as const
type ButtonType = typeof buttonTypeOptions[number]; type ButtonType = (typeof buttonTypeOptions)[number]
// 初始化按钮类型 // 初始化按钮类型
const buttonTypes = reactive<{ [key: number]: { channel: ButtonType, harmonic: ButtonType, interHarmonic: ButtonType, flicker: ButtonType, transient: ButtonType } }>({}); const buttonTypes = reactive<{
[key: number]: {
channel: ButtonType
harmonic: ButtonType
interHarmonic: ButtonType
flicker: ButtonType
transient: ButtonType
}
}>({})
const tableData = [
const tableData= [ { sort: 'L1', frequency: 'V', L1: '电压:57.75V 相角:0°' },
{ sort: 'L1', frequency: 'V', L1: '电压:57.75V 相角:0°'}, { sort: 'L1', frequency: 'I', L1: '电压:57.75V 相角:0°' },
{ sort: 'L1', frequency: 'I', L1: '电压:57.75V 相角:0°'}, { sort: 'L2', frequency: 'V', L1: '电压:57.75V 相角:0°' },
{ sort: 'L2', frequency: 'V', L1: '电压:57.75V 相角:0°'}, { sort: 'L2', frequency: 'I', L1: '电压:57.75V 相角:0°' },
{ sort: 'L2', frequency: 'I', L1: '电压:57.75V 相角:0°'}, { sort: 'L3', frequency: 'V', L1: '电压:57.75V 相角:0°' },
{ sort: 'L3', frequency: 'V', L1: '电压:57.75V 相角:0°'}, { sort: 'L3', frequency: 'I', L1: '电压:57.75V 相角:0°' }
{ sort: 'L3', frequency: 'I', L1: '电压:57.75V 相角:0°'}, ]
]
// 定义 span-method 逻辑 // 定义 span-method 逻辑
const arraySpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => { const arraySpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => {
if (columnIndex === 0 || columnIndex === 3) { // 第一列 if (columnIndex === 0 || columnIndex === 3) {
// 第一列
if (rowIndex % 2 === 0) { if (rowIndex % 2 === 0) {
return { return {
rowspan: 2, rowspan: 2,
colspan: 1 colspan: 1
}; }
} else { } else {
return { return {
rowspan: 0, rowspan: 0,
colspan: 0 colspan: 0
};
} }
} }
}; }
}
// 切换按钮类型 // 切换按钮类型
const toggleType = (row: any, $index: number, buttonType: 'channel' | 'harmonic' | 'interHarmonic' | 'flicker' | 'transient') => { const toggleType = (
row: any,
$index: number,
buttonType: 'channel' | 'harmonic' | 'interHarmonic' | 'flicker' | 'transient'
) => {
if ($index !== undefined) { if ($index !== undefined) {
const currentType = buttonTypes[$index][buttonType]; const currentType = buttonTypes[$index][buttonType]
buttonTypes[$index][buttonType] = currentType === 'info' ? 'primary' : 'info'; buttonTypes[$index][buttonType] = currentType === 'info' ? 'primary' : 'info'
} }
}; }
// 关闭弹窗 // 关闭弹窗
const close = () => { const close = () => {
@@ -144,16 +182,12 @@ const close = () => {
} }
// 保存数据 // 保存数据
const save = () => { const save = () => {}
}
// 打开弹窗，可能是新增，也可能是编辑 // 打开弹窗，可能是新增，也可能是编辑
const open = (sign: string,row: any) => { const open = (sign: string, row: any) => {
dialogVisible.value = true dialogVisible.value = true
dialogTitle.value = sign === 'add'? '新增检测项目信息' : '编辑检测项目信息' dialogTitle.value = sign === 'add' ? '新增检测项目信息' : '编辑检测项目信息'
// 初始化按钮类型 // 初始化按钮类型
tableData.forEach((_, index) => { tableData.forEach((_, index) => {
@@ -163,17 +197,15 @@ const open = (sign: string,row: any) => {
interHarmonic: 'info', interHarmonic: 'info',
flicker: 'info', flicker: 'info',
transient: 'info' transient: 'info'
}; }
}); })
} }
// 打开 drawer(新增、编辑) // 打开 drawer(新增、编辑)
const openDialog = () => { const openDialog = () => {
setValueTable.value?.open() setValueTable.value?.open()
} }
// 对外映射 // 对外映射
defineExpose({ open }) defineExpose({ open })
</script> </script>
@@ -225,5 +257,4 @@ defineExpose({ open })
.input-label-container label { .input-label-container label {
margin-left: 5px; /* 添加标签与输入框之间的间距 */ margin-left: 5px; /* 添加标签与输入框之间的间距 */
} }
</style> </style>

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

@@ -4,56 +4,94 @@
<el-divider style="width: 1300px">检测项目概要信息</el-divider> <el-divider style="width: 1300px">检测项目概要信息</el-divider>
</div> </div>
<div class="data-check-content"> <div class="data-check-content">
<div class="content-tree" > <div class="content-tree">
<el-tree <Tree />
:default-expanded-keys="['0', '0-1', '0-2', '0-3', '1']"
node-key="id"
:data="data"
:props="defaultProps"
@node-click="handleNodeClick" />
</div> </div>
<div class="content-right-Tabs" style="height: 470px;width: 100px;"> <div class="content-right-Tabs" style="height: 570px; width: 100px">
<el-tabs type="border-card" style="height: 100%;"> <el-tabs type="border-card" style="height: 100%">
<el-tab-pane <el-tab-pane
v-for="tab in props.options" v-for="tab in props.options"
:key="tab.name" :key="tab.name"
:label="tab.label.replace(/准确度|检测/g, '')" :label="tab.label.replace(/准确度|检测/g, '')"
:name="tab.name"> :name="tab.name"
>
<!-- 频率tab --> <!-- 频率tab -->
<el-tabs type="border-card" style="height: 400px;"> <el-tabs type="border-card" style="height: 500px">
<el-tab-pane <el-tab-pane
v-for="subTab in tab.children || []" v-for="subTab in tab.children || []"
:key="subTab.name" :key="subTab.name"
:label="subTab.label" :label="subTab.label"
:name="subTab.name"> :name="subTab.name"
>
<!-- 子标签页内容 --> <!-- 子标签页内容 -->
<div class="dialog-footer"> <div class="dialog-footer">
<el-button :icon='CirclePlus' type="primary" @click="openDialog('add')">新增</el-button> <el-button :icon="CirclePlus" type="primary" @click="openDialog('add')">新增</el-button>
<el-button :icon="CirclePlus" type="primary" @click="openAddDialog()">
保存测试项
</el-button>
</div> </div>
<div class="table-container"> <div class="table-container">
<el-table :data="tableData" <el-table
:header-cell-style="{ textAlign: 'center',backgroundColor: '#003078',color: '#fff' } " :data="tableData"
:header-cell-style="{
textAlign: 'center',
backgroundColor: '#003078',
color: '#fff'
}"
:cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
style="width: 100%" style="width: 100%"
:style="{ height: '240px',overflow:'hidden'}"> :style="{ height: '390px', overflow: 'hidden' }"
>
<el-table-column prop="sort" label="组次" width="60" /> <el-table-column prop="sort" label="组次" width="60" />
<el-table-column prop="frequency" label="频率(Hz)" width="100" /> <el-table-column prop="frequency" label="频率(Hz)" width="100" />
<el-table-column prop="L1" label="L1"/> <el-table-column prop="L1" label="L1">
<el-table-column prop="L2" label="L2"/> <template #default="scope">
<el-table-column prop="L3" label="L3"/> <el-descriptions border :column="1" size="small">
<el-descriptions-item label="V">0.000V 　 0.000°</el-descriptions-item>
<el-descriptions-item label=" I">0.000A 　 0.000°</el-descriptions-item>
</el-descriptions>
</template>
</el-table-column>
<el-table-column prop="L2" label="L2">
<template #default="scope">
<el-descriptions border :column="1" size="small">
<el-descriptions-item label="V">0.000V 　 0.000°</el-descriptions-item>
<el-descriptions-item label=" I">0.000A 　 0.000°</el-descriptions-item>
</el-descriptions>
</template>
</el-table-column>
<el-table-column prop="L3" label="L3">
<template #default="scope">
<el-descriptions border :column="1" size="small">
<el-descriptions-item label="V">0.000V　 0.000°</el-descriptions-item>
<el-descriptions-item label=" I">0.000A 　 0.000°</el-descriptions-item>
</el-descriptions>
</template>
</el-table-column>
<el-table-column label="操作" min-width="100"> <el-table-column label="操作" min-width="100">
<template #default="{ row }"> <template #default="{ row }">
<el-button type="primary" link :icon='CopyDocument' @click="copyRow(row)">复制</el-button> <el-button type="primary" link :icon="CopyDocument" @click="copyRow(row)">
<el-button type="primary" link :icon='CopyDocument' @click="openAddDialog('edit',row)">编辑</el-button> 复制
<el-button type='primary' link :icon='Delete' @click="deleteRow(row)">删除</el-button> </el-button>
<el-button
type="primary"
link
:icon="CopyDocument"
@click="openAddDialog('edit', row)"
>
编辑
</el-button>
<el-button type="primary" link :icon="Delete" @click="deleteRow(row)">
删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<div class="dialog-footer" style="margin-top: 20px;"> <!-- <div class="dialog-footer" style="margin-top: 20px;">
<el-button :icon='CirclePlus' type="primary" @click="openAddDialog()">保存测试项</el-button>
</div> </div> -->
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-tab-pane> </el-tab-pane>
@@ -62,41 +100,39 @@
</div> </div>
<TestProjectPopup ref="testProjectPopup" /> <TestProjectPopup ref="testProjectPopup" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { type PropType, ref } from 'vue'; import { type PropType, ref } from 'vue'
import { data } from "@/api/plan/autoTest.json"; import Tree from './tree.vue'
import type { CascaderOption } from 'element-plus'; import type { CascaderOption } from 'element-plus'
import {CirclePlus, Delete, EditPen,CopyDocument} from '@element-plus/icons-vue' import { CirclePlus, Delete, EditPen, CopyDocument } from '@element-plus/icons-vue'
import type { TestScript } from '@/api/device/interface/testScript'; import type { TestScript } from '@/api/device/interface/testScript'
import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue'; import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue'
const testProjectPopup = ref() const testProjectPopup = ref()
interface TabOption { interface TabOption {
label: string; label: string
name: string; name: string
children?: TabOption[]; children?: TabOption[]
} }
const props = defineProps({ const props = defineProps({
options: { options: {
type: Array as PropType<TabOption[]>, type: Array as PropType<TabOption[]>,
required: true required: true
}, }
}); })
const tableData= [ const tableData = [
{ sort: 1, frequency: 42.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' }, { sort: 1, frequency: 42.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
{ sort: 2, frequency: 50, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' }, { sort: 2, frequency: 50, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
{ sort: 3, frequency: 50.05, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' }, { sort: 3, frequency: 50.05, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
{ sort: 4, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' }, { sort: 4, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
{ sort: 5, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' }, { sort: 5, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' },
{ sort: 6, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' }, { sort: 6, frequency: 57.5, L1: '电压:57.75V 相角:0°', L2: '电压:57.75V 相角:120°', L3: '电压:57.75V 相角:-120°' }
] ]
const tabs = ref([ const tabs = ref([
{ {
@@ -198,26 +234,15 @@ const tabs = ref([
{ label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab10' } { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab10' }
] ]
} }
]); ])
const defaultProps = {
children: "children",
label: "name",
pid: "pid",
};
const handleNodeClick = (data: any) => {
console.log(data);
};
// 打开 drawer(新增、编辑) // 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => { const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
testProjectPopup.value?.open(titleType, row) testProjectPopup.value?.open(titleType, row)
} }
</script> </script>
<style scoped> <style scoped>
.data-check-content { .data-check-content {
@@ -227,7 +252,7 @@ const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> =
.content-tree { .content-tree {
width: 300px; width: 300px;
height: 470px; height: 560px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
border-radius: 4px; border-radius: 4px;
margin-right: 10px; margin-right: 10px;
@@ -244,7 +269,7 @@ const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> =
flex: 1; /* 根据需要调整宽度比例 */ flex: 1; /* 根据需要调整宽度比例 */
} }
.dialog-footer{ .dialog-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-bottom: 10px; margin-bottom: 10px;
@@ -252,15 +277,12 @@ const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> =
.divider-container { .divider-container {
display: flex; display: flex;
} }
.divider-container .el-divider { .divider-container .el-divider {
margin-right: 30px; /* 根据需要调整间距 */ margin-right: 30px; /* 根据需要调整间距 */
} }
:deep(.el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell) {
padding: 3px 11px;
}
</style> </style>

11
frontend/src/views/machine/testScript/components/testScriptDipTab.vue
View File

@@ -6,18 +6,19 @@
</div> </div>
<div class="right-editor"> <div class="right-editor">
<!-- 右侧编辑区域内容 --> <!-- 右侧编辑区域内容 -->
<el-form-item label="设定幅度(%)"> <el-form-item label-width="120px" label="设定幅度(%)">
<el-input v-model="input1" /> <el-input v-model="input1" style="width: 150px;" />
</el-form-item> </el-form-item>
<el-form-item label="持续时间(周波)"> <el-form-item label-width="120px" label="持续时间(周波)">
<el-input v-model="input2" /> <el-input v-model="input2" style="width: 150px;"/>
</el-form-item> </el-form-item>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const input1 = ref('')
const input2 = ref('')
</script> </script>
<style scoped> <style scoped>

16
frontend/src/views/machine/testScript/components/testScriptFlickerTab.vue
View File

@@ -4,13 +4,13 @@
<el-tab-pane label="Modulation"> <el-tab-pane label="Modulation">
<!-- 全局设置菜单内容 --> <!-- 全局设置菜单内容 -->
<div> <div>
<el-form-item label="电压变动幅度(%)" prop='name'> <el-form-item label="电压变动幅度(%)" label-width="140px" prop='name'>
<el-input style="width: 200px;" /> <el-input style="width: 150px;"/>
</el-form-item> </el-form-item>
</div> </div>
<div class="form-container"> <div class="form-container">
<el-form-item label="波动频度(/min/Hz)" prop='name'> <el-form-item label="波动频度(/min/Hz)" label-width="140px" prop='name'>
<el-input /> <el-input style="width: 150px;"/>
</el-form-item> </el-form-item>
<el-form-item label="波动类型" prop='name'> <el-form-item label="波动类型" prop='name'>
<el-select placeholder="请选择波动类型" style="width: 150px;"> <el-select placeholder="请选择波动类型" style="width: 150px;">
@@ -25,8 +25,8 @@
<el-tab-pane label="WaveForm"> <el-tab-pane label="WaveForm">
<!-- 全局设置菜单内容 --> <!-- 全局设置菜单内容 -->
<div > <div >
<el-form-item label="波类型" prop='name'> <el-form-item label="波类型" label-width="100px" prop='name'>
<el-select placeholder="请选择波类型"> <el-select placeholder="请选择波类型" style="width: 150px;">
<el-option label="RECT" :value="2"></el-option> <el-option label="RECT" :value="2"></el-option>
<el-option label="SIN" :value="1"></el-option> <el-option label="SIN" :value="1"></el-option>
<el-option label="SQU" :value="0"></el-option> <el-option label="SQU" :value="0"></el-option>
@@ -34,8 +34,8 @@
</el-form-item> </el-form-item>
</div> </div>
<div > <div >
<el-form-item label="占空比(%)" prop='name'> <el-form-item label="占空比(%)" label-width="100px" prop='name'>
<el-input /> <el-input style="width: 150px;"/>
</el-form-item> </el-form-item>
</div> </div>
</el-tab-pane> </el-tab-pane>

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

@@ -1,42 +1,42 @@
<template> <template>
<div class="tabs-container"> <div class="tabs-container">
<el-tabs type="border-card" class="right-tabs" style="height: 100%;"> <el-tabs type="border-card" class="right-tabs" style="height: 100%">
<el-tab-pane label="电压通道"> <el-tab-pane label="电压通道">
<!-- 电压通道内容 --> <!-- 电压通道内容 -->
<div class="table-container"> <div class="table-container">
<el-table :data="tableData1" border class="half-width-table"> <el-table :data="tableData1" border size="small" class="half-width-table">
<el-table-column prop="date" label="次数" width="60"/> <el-table-column prop="date" align="center" label="次数" width="60" />
<el-table-column prop="date" label="谐波含有率" width="120"> <el-table-column prop="date" align="center" label="谐波含有率" width="120">
<template #default="scope"> <template #default="scope">
<div class="input-label-container"> <div class="input-label-container">
<el-input /> <el-input size="small" />
<label>%</label> <label>%</label>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="谐波相角" width="120"> <el-table-column prop="name" label="谐波相角" align="center" width="120">
<template #default="scope"> <template #default="scope">
<div class="input-label-container"> <div class="input-label-container">
<el-input /> <el-input size="small" />
<label>°</label> <label>°</label>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-table :data="tableData2" border class="half-width-table"> <el-table :data="tableData2" border size="small" class="half-width-table">
<el-table-column prop="date" label="次数" width="60"/> <el-table-column prop="date" label="次数" align="center" width="60" />
<el-table-column prop="date" label="谐波含有率" width="120"> <el-table-column prop="date" label="谐波含有率" align="center" width="120">
<template #default="scope"> <template #default="scope">
<div class="input-label-container"> <div class="input-label-container">
<el-input /> <el-input size="small" />
<label>%</label> <label>%</label>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="谐波相角" width="120"> <el-table-column prop="name" label="谐波相角" align="center" width="120">
<template #default="scope"> <template #default="scope">
<div class="input-label-container"> <div class="input-label-container">
<el-input /> <el-input size="small" />
<label>°</label> <label>°</label>
</div> </div>
</template> </template>
@@ -45,43 +45,43 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<el-tabs type="border-card" style="height: 100%;"> <el-tabs type="border-card" style="height: 100%">
<el-tab-pane label="电流通道"> <el-tab-pane label="电流通道">
<!-- 电流通道内容 --> <!-- 电流通道内容 -->
<div class="table-container"> <div class="table-container">
<el-table :data="tableData1" border class="half-width-table"> <el-table :data="tableData1" border size="small" class="half-width-table">
<el-table-column prop="date" label="次数" width="60"/> <el-table-column prop="date" label="次数" align="center" width="60" />
<el-table-column prop="date" label="谐波含有率" width="120"> <el-table-column prop="date" label="谐波含有率" align="center" width="120">
<template #default="scope"> <template #default="scope">
<div class="input-label-container"> <div class="input-label-container">
<el-input /> <el-input size="small" />
<label>%</label> <label>%</label>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="谐波相角" width="120"> <el-table-column prop="name" align="center" label="谐波相角" width="120">
<template #default="scope"> <template #default="scope">
<div class="input-label-container"> <div class="input-label-container">
<el-input /> <el-input size="small" />
<label>°</label> <label>°</label>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-table :data="tableData2" border class="half-width-table"> <el-table :data="tableData2" border size="small" class="half-width-table">
<el-table-column prop="date" label="次数" width="60"/> <el-table-column prop="date" label="次数" align="center" width="60" />
<el-table-column prop="date" label="谐波含有率" width="120"> <el-table-column prop="date" label="谐波含有率" align="center" width="120">
<template #default="scope"> <template #default="scope">
<div class="input-label-container"> <div class="input-label-container">
<el-input /> <el-input size="small" />
<label>%</label> <label>%</label>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="谐波相角" width="120"> <el-table-column prop="name" label="谐波相角" align="center" width="120">
<template #default="scope"> <template #default="scope">
<div class="input-label-container"> <div class="input-label-container">
<el-input /> <el-input size="small" />
<label>°</label> <label>°</label>
</div> </div>
</template> </template>
@@ -91,36 +91,36 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from 'vue'
// 定义表格数据项的类型 // 定义表格数据项的类型
interface TableItem { interface TableItem {
date: string; date: string
harmonicRate?: string; harmonicRate?: string
harmonicPhase?: string; harmonicPhase?: string
name?: string; name?: string
} }
// 定义并初始化 tableData // 定义并初始化 tableData
const tableData1 = ref<TableItem[]>([]); const tableData1 = ref<TableItem[]>([])
const tableData2 = ref<TableItem[]>([]); const tableData2 = ref<TableItem[]>([])
for (let i = 1; i <= 25; i++) { for (let i = 1; i <= 25; i++) {
tableData1.value.push({ tableData1.value.push({
date: i.toString(), date: i.toString(),
harmonicRate: `谐波含有率${i}`, harmonicRate: `谐波含有率${i}`,
harmonicPhase: `谐波相角${i}` harmonicPhase: `谐波相角${i}`
}); })
} }
for (let i = 26; i <= 50; i++) { for (let i = 26; i <= 50; i++) {
tableData2.value.push({ tableData2.value.push({
date: i.toString(), date: i.toString(),
harmonicRate: `谐波含有率${i}`, harmonicRate: `谐波含有率${i}`,
harmonicPhase: `谐波相角${i}` harmonicPhase: `谐波相角${i}`
}); })
} }
</script> </script>

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

@@ -1,109 +1,129 @@
<template> <template>
<el-dialog :title="dialogTitle" <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1400px">
v-model='dialogVisible' <TestScriptDetail :options="secondLevelOptions" />
@close="close" <template #footer>
<div>
<el-button @click="close()">取 消</el-button>
<el-button type="primary" @click="save()">保存脚本</el-button>
<!-- <el-button type="primary" @click='save()'>脚本另存为</el-button> -->
</div>
</template>
<el-dialog
title="基础信息"
v-model="basicInformation"
@close="closeInformation"
v-bind="dialogBig" v-bind="dialogBig"
width="1400px"> width="500px"
<div class="dialog-content" > >
<el-form :model='formContent' label-width="auto" class="form-three "> <div class="dialog-content">
<el-divider >基础信息</el-divider> <el-form :model="formContent" label-width="auto" class="form-one">
<el-form-item label="脚本名称" prop='name'> <el-form-item label="脚本名称" prop="name">
<el-input v-model='formContent.name' /> <el-input v-model.trim="formContent.name" placeholder="请输入脚本名称" clearable />
</el-form-item> </el-form-item>
<el-form-item label="参照标准名称" prop='standardName'> <el-form-item label="参照标准名称" prop="standardName">
<el-input v-model='formContent.standardName' /> <el-input v-model.trim="formContent.standardName" placeholder="请输入参照标准名称" clearable />
</el-form-item> </el-form-item>
<el-form-item label="标准推行年份" prop='standardTime'> <el-form-item label="标准推行年份" prop="standardTime">
<el-date-picker <el-date-picker
v-model="formContent.standardTime" v-model="formContent.standardTime"
type="year" type="year"
placeholder="请选择标准推行年份" placeholder="请选择标准推行年份"
/> />
</el-form-item> </el-form-item>
<el-form-item label="检测脚本值类型">
<el-select v-model="formContent.selectedValue" filterable clearable placeholder="请选择值类型">
<el-option
v-for="item in dictStore.getDictData('Script_Value_Type')"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form> </el-form>
</div> </div>
<TestScriptDetail :options="secondLevelOptions" />
<template #footer> <template #footer>
<div > <div>
<el-button @click='close()'>取 消</el-button> <el-button @click="closeInformation()">取 消</el-button>
<el-button type="primary" @click='save()'>保存脚本</el-button> <el-button type="primary">确定</el-button>
<el-button type="primary" @click='save()'>脚本另存为</el-button> <!-- <el-button type="primary" @click='save()'>脚本另存为</el-button> -->
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</el-dialog>
</template> </template>
<script setup lang='ts'> <script setup lang="ts">
import { dialogBig } from '@/utils/elementBind' import { dialogBig } from '@/utils/elementBind'
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { useDictStore } from '@/stores/modules/dict' import { useDictStore } from '@/stores/modules/dict'
import TestScriptDetail from '@/views/machine/testScript/components/testScriptDetail.vue'; import TestScriptDetail from '@/views/machine/testScript/components/testScriptDetail.vue'
import { type TestScript } from '@/api/device/interface/testScript'; import { type TestScript } from '@/api/device/interface/testScript'
import type { Dict } from '@/api/system/dictionary/interface'; import type { Dict } from '@/api/system/dictionary/interface'
import {getDictTreeList} from '@/api/system/dictionary/dictTree' import { getDictTreeList } from '@/api/system/dictionary/dictTree'
import type { CascaderOption } from 'element-plus'; import type { CascaderOption } from 'element-plus'
const modeId = ref() const modeId = ref()
const secondLevelOptions: any[] = []; const secondLevelOptions: any[] = []
const basicInformation: boolean = ref(false)
// 定义弹出组件元信息 // 定义弹出组件元信息
const dialogFormRef = ref() const dialogFormRef = ref()
const dictStore = useDictStore() const dictStore = useDictStore()
function useMetaInfo() { function useMetaInfo() {
const dialogVisible = ref(false) const dialogVisible = ref(false)
const titleType = ref('add') const titleType = ref('add')
const formContent = ref<TestScript.ResTestScript>({ const formContent = ref<TestScript.ResTestScript>({
name: '', name: '',
type: '', type: '',
valueType:'', valueType: '',
pattern: modeId.value, pattern: modeId.value,
standardName: '', standardName: '',
standardTime: '', standardTime: '',
state:1, state: 1,
selectedValue: ''
}) })
return { dialogVisible, titleType,formContent } return { dialogVisible, titleType, formContent }
} }
const { dialogVisible, titleType,formContent } = useMetaInfo() const { dialogVisible, titleType, formContent } = useMetaInfo()
let dialogTitle = computed(() => { let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增检测脚本' : '编辑检测脚本' return titleType.value === 'add' ? '新增检测脚本' : '编辑检测脚本'
}) })
// 清空formContent // 清空formContent
const resetFormContent = () => { const resetFormContent = () => {
formContent.value = { formContent.value = {
name: '', name: '',
type: '', type: '',
valueType:'', valueType: '',
pattern: modeId.value, pattern: modeId.value,
standardName: '', standardName: '',
standardTime: '', standardTime: '',
state:1, state: 1
}
} }
}
// 关闭弹窗 // 关闭弹窗
const close = () => { const close = () => {
dialogVisible.value = false dialogVisible.value = false
// 清空dialogForm中的值 // 清空dialogForm中的值
resetFormContent() resetFormContent()
// 重置表单 // 重置表单
dialogFormRef.value?.resetFields() dialogFormRef.value?.resetFields()
}
} // 关闭信息弹框
const closeInformation = () => {
// 保存数据 basicInformation.value = false
const save = () => {
} }
// 保存数据
const save = () => {
basicInformation.value = true
}
// 打开弹窗，可能是新增，也可能是编辑 // 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string,row: any,currentMode: string,id:string) => { const open = async (sign: string, row: any, currentMode: string, id: string) => {
const dictCode = '测试脚本字典表'; // 替换为实际需要的字典代码 const dictCode = '测试脚本字典表' // 替换为实际需要的字典代码
const resDictTree: Dict.ResDictTree = { const resDictTree: Dict.ResDictTree = {
name: dictCode, name: dictCode,
id: '', id: '',
@@ -111,45 +131,37 @@ const open = async (sign: string,row: any,currentMode: string,id:string) => {
pids: '', pids: '',
code: '', code: '',
sort: 0 sort: 0
};
const result = await getDictTreeList(resDictTree);
//allOptions.value = convertToOptions(result.data as Dict.ResDictTree[]);
const allOptions = convertToOptions(result.data as Dict.ResDictTree[]);
// 提取第二层节点
allOptions.forEach(option => {
if (option.children && option.children.length > 0) {
secondLevelOptions.push(...option.children);
} }
}); const result = await getDictTreeList(resDictTree)
const allOptions = convertToOptions(result.data as Dict.ResDictTree[])
secondLevelOptions.push(...(allOptions[0]?.children || []))
//console.log('secondLevelOptions',secondLevelOptions); //console.log('secondLevelOptions',secondLevelOptions);
if(id != ''){//新增的时候才会重新赋值值类型 if (id != '') {
//新增的时候才会重新赋值值类型
formContent.value.valueType = id formContent.value.valueType = id
} }
titleType.value = sign titleType.value = sign
modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id; modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id
// 重置表单 // 重置表单
dialogFormRef.value?.resetFields() dialogFormRef.value?.resetFields()
dialogVisible.value = true dialogVisible.value = true
} }
// 转换函数 // 转换函数
const convertToOptions = (dictTree: Dict.ResDictTree[]): CascaderOption[] => { const convertToOptions = (dictTree: Dict.ResDictTree[]): CascaderOption[] => {
return dictTree.map(item => ({ return dictTree.map(item => ({
value: item.id, value: item.id,
label: item.name, label: item.name,
children: item.children ? convertToOptions(item.children) : undefined children: item.children ? convertToOptions(item.children) : undefined
})); }))
}; }
// 对外映射 // 对外映射
defineExpose({ open }) defineExpose({ open })
</script> </script>
<style scoped> <style scoped>
/* .dialog-content { /* .dialog-content {

119
frontend/src/views/machine/testScript/components/testScriptVolCurTab.vue
View File

@@ -2,99 +2,109 @@
<div class="editor-container"> <div class="editor-container">
<div class="left-editor"> <div class="left-editor">
<!-- 左侧编辑区域内容 --> <!-- 左侧编辑区域内容 -->
<canvas ref="canvas" width="600" height="165"></canvas> <canvas ref="canvas" width="700" height="165"></canvas>
</div> </div>
<div class="right-editor"> <div class="right-editor">
<!-- 右侧编辑区域内容 --> <!-- 右侧编辑区域内容 -->
<el-form :inline="true" label-width="auto" :model="form" class="form-two" >
<el-form-item label="电压有效值(V)"> <el-form-item label="电压有效值(V)">
<el-input v-model="input1" /> <el-input v-model="form.input1" />
</el-form-item> </el-form-item>
<el-form-item label="电流有效值(A)"> <el-form-item label="电流有效值(A)">
<el-input v-model="input1" /> <el-input v-model="form.input2" />
</el-form-item> </el-form-item>
<el-form-item label="相角(°)"> <el-form-item label="电压相角(°)">
<el-input v-model="input2" /> <el-input v-model="form.input3" />
</el-form-item> </el-form-item>
<el-form-item label="电流相角(°)">
<el-input v-model="form.input4" />
</el-form-item>
</el-form>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from "vue"; import { onMounted, ref } from 'vue'
const form = ref({
const canvas = ref<HTMLCanvasElement | null>(null); input1: 220,
input2: 0,
input3: 0,
input4: 0
})
const canvas = ref<HTMLCanvasElement | null>(null)
onMounted(() => { onMounted(() => {
if (canvas.value) { if (canvas.value) {
const ctx = canvas.value.getContext('2d'); const ctx = canvas.value.getContext('2d')
if (ctx) { if (ctx) {
drawSineWave(ctx); drawSineWave(ctx)
} }
} }
}); })
function drawSineWave(ctx: CanvasRenderingContext2D) { function drawSineWave(ctx: CanvasRenderingContext2D) {
const width = canvas.value!.width; const width = canvas.value!.width
const height = canvas.value!.height; const height = canvas.value!.height
const amplitude = 50; // 振幅 const amplitude = 50 // 振幅
const frequency = 0.02; // 频率 const frequency = 0.02 // 频率
const offset = height / 2; // 偏移量 const offset = height / 2 // 偏移量
// 绘制横轴 // 绘制横轴
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(0, offset); ctx.moveTo(0, offset)
ctx.lineTo(width, offset); ctx.lineTo(width, offset)
ctx.strokeStyle = 'black'; ctx.strokeStyle = 'black'
ctx.stroke(); ctx.stroke()
// 绘制纵轴 // 绘制纵轴
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(0, 0); ctx.moveTo(0, 0)
ctx.lineTo(0, height); ctx.lineTo(0, height)
ctx.stroke(); ctx.stroke()
// 绘制横轴刻度 // 绘制横轴刻度
const xStep = width / 10; const xStep = width / 10
for (let x = 0; x <= width; x += xStep) { for (let x = 0; x <= width; x += xStep) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(x, offset - 5); ctx.moveTo(x, offset - 5)
ctx.lineTo(x, offset + 5); ctx.lineTo(x, offset + 5)
ctx.stroke(); ctx.stroke()
// 添加横轴刻度标签 // 添加横轴刻度标签
ctx.font = '12px Arial'; ctx.font = '12px Arial'
ctx.fillStyle = 'black'; ctx.fillStyle = 'black'
ctx.textAlign = 'center'; ctx.textAlign = 'center'
ctx.fillText((x / xStep).toFixed(0), x, offset + 20); ctx.fillText((x / xStep).toFixed(0), x, offset + 20)
} }
// 绘制纵轴刻度 // 绘制纵轴刻度
const yStep = height / 10; const yStep = height / 10
for (let y = 0; y <= height; y += yStep) { for (let y = 0; y <= height; y += yStep) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(-5, y); ctx.moveTo(-5, y)
ctx.lineTo(5, y); ctx.lineTo(5, y)
ctx.stroke(); ctx.stroke()
// 添加纵轴刻度标签 // 添加纵轴刻度标签
ctx.font = '12px Arial'; ctx.font = '12px Arial'
ctx.fillStyle = 'black'; ctx.fillStyle = 'black'
ctx.textAlign = 'right'; ctx.textAlign = 'right'
ctx.fillText(((offset - y) / yStep - 5).toFixed(1), -10, y + 5); ctx.fillText(((offset - y) / yStep - 5).toFixed(1), -10, y + 5)
} }
// 绘制正弦波 // 绘制正弦波
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(0, offset); ctx.moveTo(0, offset)
for (let x = 0; x < width; x++) { for (let x = 0; x < width; x++) {
const y = offset + amplitude * Math.sin(frequency * x); const y = offset + amplitude * Math.sin(frequency * x)
ctx.lineTo(x, y); ctx.lineTo(x, y)
} }
ctx.strokeStyle = 'red'; ctx.strokeStyle = 'red'
ctx.lineWidth = 2; ctx.lineWidth = 2
ctx.stroke(); ctx.stroke()
} }
</script> </script>
@@ -109,12 +119,13 @@ canvas {
} }
.left-editor { .left-editor {
flex: 3; /* 左侧区域占据 3/4 的宽度 */ flex: 1;
margin-left: 150px; /* 可选：添加间距 */ margin-left: 20px;
} }
.right-editor { .right-editor {
flex: 1; /* 右侧区域占据 1/4 的宽度 */ width: 600px;
margin-right: 250px; /* 向左侧移动一点 */ display: flex;
align-items: center;
} }
</style> </style>

25
frontend/src/views/machine/testScript/components/tree.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<el-tree node-key="id" default-expand-all :data="dataTree" :props="defaultProps" />
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getTreeData } from '@/api/check/test'
import { CheckData } from '@/api/check/interface'
const dataTree = ref<CheckData.TreeItem[]>([])
const defaultProps = {
children: 'children',
label: 'scriptTypeName',
pid: 'pid'
}
const open = () => {
getTreeData({
scriptId: 'a303b2224845fcc6f60198b8ca23dca9'
}).then(res => {
dataTree.value = res.data
})
}
onMounted(() => {
open()
})
</script>
<style lang="scss" scoped></style>

81
frontend/src/views/machine/testScript/components/valueTypePopup.vue
View File

@@ -1,13 +1,8 @@
<template> <template>
<el-dialog title="请确认检测脚本值类型" <el-dialog title="请确认检测脚本值类型" v-model="dialogVisible" @close="close" v-bind="dialogSmall">
v-model='dialogVisible' <div class="dialog-content">
@close="close"
v-bind="dialogSmall"
>
<div class="dialog-content" >
<el-form> <el-form>
<el-form-item label='值类型'> <el-form-item label="值类型">
<el-select v-model="selectedValue" filterable clearable placeholder="请选择值类型"> <el-select v-model="selectedValue" filterable clearable placeholder="请选择值类型">
<el-option <el-option
v-for="item in dictStore.getDictData('Script_Value_Type')" v-for="item in dictStore.getDictData('Script_Value_Type')"
@@ -19,60 +14,54 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<TestScriptPopup ref='testScriptPopup' /> <TestScriptPopup ref="testScriptPopup" />
<template #footer> <template #footer>
<div> <div>
<el-button @click='close()'>取 消</el-button> <el-button @click="close()">取 消</el-button>
<el-button type="primary" @click='save()'>新增</el-button> <el-button type="primary" @click="save()">新增</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</template>
<script setup lang="ts">
import { dialogSmall } from '@/utils/elementBind'
import { ref } from 'vue'
import { useDictStore } from '@/stores/modules/dict'
import { type TestScript } from '@/api/device/interface/testScript'
const mode = ref()
const testScriptPopup = ref()
// 定义弹出组件元信息
const dialogFormRef = ref()
const dictStore = useDictStore()
const dialogVisible = ref(false)
const selectedValue = ref()
</template> // 关闭弹窗
<script setup lang='ts'> const close = () => {
import { dialogSmall } from '@/utils/elementBind'
import { ref } from 'vue'
import { useDictStore } from '@/stores/modules/dict'
import { type TestScript } from '@/api/device/interface/testScript';
const mode = ref()
const testScriptPopup = ref()
// 定义弹出组件元信息
const dialogFormRef = ref()
const dictStore = useDictStore()
const dialogVisible = ref(false)
const selectedValue = ref()
// 关闭弹窗
const close = () => {
dialogVisible.value = false dialogVisible.value = false
// 重置表单 // 重置表单
dialogFormRef.value?.resetFields() dialogFormRef.value?.resetFields()
} }
// 保存数据 // 保存数据
const save = () => { const save = () => {
testScriptPopup.value?.open('新增检测脚本', {}, mode.value,selectedValue.value) testScriptPopup.value?.open('新增检测脚本', {}, mode.value, selectedValue.value)
} }
// 打开弹窗，可能是新增，也可能是编辑
// 打开弹窗，可能是新增，也可能是编辑 const open = (sign: string, row: any, currentMode: string) => {
const open = (sign: string,row: any,currentMode: string) => {
mode.value = currentMode mode.value = currentMode
// 重置表单 // 重置表单
dialogFormRef.value?.resetFields() dialogFormRef.value?.resetFields()
dialogVisible.value = true dialogVisible.value = true
} }
// 对外映射 // 对外映射
defineExpose({ open }) defineExpose({ open })
</script>
<style scoped>
/* .dialog-content {
</script>
<style scoped>
/* .dialog-content {
padding: 10px; padding: 10px;
} */ } */
</style> </style>

134
frontend/src/views/machine/testScript/index.vue
View File

@@ -1,63 +1,88 @@
<template> <template>
<div class='table-box'> <div class="table-box">
<ProTable <ProTable ref="proTable" :columns="columns" :request-api="getTableList">
ref='proTable'
:columns='columns'
:request-api="getTableList"
>
<!-- :data='testScriptData' 如果要显示静态数据，就切换该配置 --> <!-- :data='testScriptData' 如果要显示静态数据，就切换该配置 -->
<!-- 表格 header 按钮 --> <!-- 表格 header 按钮 -->
<template #tableHeader='scope'> <template #tableHeader="scope">
<el-button v-auth.testScript="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button> <el-button v-auth.testScript="'add'" type="primary" :icon="CirclePlus" @click="openDialog('add')">
<el-button v-auth.testScript="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected' 新增
@click='batchDelete(scope.selectedListIds)'> </el-button>
<el-button
v-auth.testScript="'delete'"
type="danger"
:icon="Delete"
plain
:disabled="!scope.isSelected"
@click="batchDelete(scope.selectedListIds)"
>
删除 删除
</el-button> </el-button>
</template> </template>
<!-- 表格操作 --> <!-- 表格操作 -->
<template #operation='scope'> <template #operation="scope">
<el-button v-auth.testScript="'edit'" type='primary' link :icon='EditPen' :model-value="false" @click="openDialog('edit', scope.row)">编辑</el-button> <el-button
<el-button v-auth.testScript="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button> v-auth.testScript="'edit'"
<el-button v-auth.testScript="'upgrade'" type='primary' v-if="scope.row.type !== 1" link :icon='Share' @click='updateType(scope.row)'>升级</el-button> type="primary"
link
:icon="EditPen"
:model-value="false"
@click="openDialog('edit', scope.row)"
>
编辑
</el-button>
<el-button
v-auth.testScript="'delete'"
type="primary"
link
:icon="Delete"
@click="handleDelete(scope.row)"
>
删除
</el-button>
<el-button
v-auth.testScript="'upgrade'"
type="primary"
v-if="scope.row.type !== 1"
link
:icon="Share"
@click="updateType(scope.row)"
>
升级
</el-button>
</template> </template>
</ProTable> </ProTable>
</div> </div>
<ComparisonPopup ref='comparisonPopup' /> <ComparisonPopup ref="comparisonPopup" />
<ValueTypePopup ref='valueTypePopup' /> <ValueTypePopup ref="valueTypePopup" />
<TestScriptPopup ref='testScriptPopup' /> <TestScriptPopup ref="testScriptPopup" />
</template> </template>
<script setup lang='tsx' name='useRole'> <script setup lang="tsx" name="useRole">
import { type TestScript } from '@/api/device/interface/testScript' import { type TestScript } from '@/api/device/interface/testScript'
import { useHandleData } from '@/hooks/useHandleData' import { useHandleData } from '@/hooks/useHandleData'
import ProTable from '@/components/ProTable/index.vue' import ProTable from '@/components/ProTable/index.vue'
import type{ ProTableInstance, ColumnProps } from '@/components/ProTable/interface' import type { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, Share } from '@element-plus/icons-vue' import { CirclePlus, Delete, EditPen, Share } from '@element-plus/icons-vue'
import { useDictStore } from '@/stores/modules/dict' import { useDictStore } from '@/stores/modules/dict'
import ComparisonPopup from './components/comparisonPopup.vue' import ComparisonPopup from './components/comparisonPopup.vue'
import TestScriptPopup from './components/testScriptPopup.vue' import TestScriptPopup from './components/testScriptPopup.vue'
import ValueTypePopup from './components/valueTypePopup.vue' import ValueTypePopup from './components/valueTypePopup.vue'
import { import { getPqScriptList, updatePqScript, deletePqScript } from '@/api/device/testScript/index'
getPqScriptList,updatePqScript,deletePqScript,
} from '@/api/device/testScript/index'
import { computed, reactive, ref } from 'vue' import { computed, reactive, ref } from 'vue'
import { useModeStore } from '@/stores/modules/mode'; // 引入模式 store import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
defineOptions({ defineOptions({
name: 'testScript' name: 'testScript'
}) })
const comparisonPopup = ref() const comparisonPopup = ref()
const testScriptPopup = ref() const testScriptPopup = ref()
const valueTypePopup = ref() const valueTypePopup = ref()
const modeStore = useModeStore(); const modeStore = useModeStore()
const dictStore = useDictStore() const dictStore = useDictStore()
const getTableList = (params: any) => { const getTableList = (params: any) => {
let newParams = JSON.parse(JSON.stringify(params)) let newParams = JSON.parse(JSON.stringify(params))
const patternId = dictStore.getDictData('Pattern').find(item=>item.name=== modeStore.currentMode)?.id//获取数据字典中对应的id const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id //获取数据字典中对应的id
newParams.pattern = patternId newParams.pattern = patternId
return getPqScriptList(newParams) return getPqScriptList(newParams)
} }
@@ -66,13 +91,12 @@ const getTableList = (params: any) => {
const proTable = ref<ProTableInstance>() const proTable = ref<ProTableInstance>()
const showValueSearch = computed(() => { const showValueSearch = computed(() => {
if(modeStore.currentMode == '比对式'){ if (modeStore.currentMode == '比对式') {
return false; return false
}else{ } else {
return true; return true
} }
}); })
// 表格配置项 // 表格配置项
const columns = reactive<ColumnProps<TestScript.ResTestScript>[]>([ const columns = reactive<ColumnProps<TestScript.ResTestScript>[]>([
@@ -82,17 +106,17 @@ const columns = reactive<ColumnProps<TestScript.ResTestScript>[]>([
prop: 'name', prop: 'name',
label: '名称', label: '名称',
minWidth: 350, minWidth: 350,
search: {el:'input'} search: { el: 'input' }
}, },
{ {
prop: 'standardName', prop: 'standardName',
label: '参照标准名称', label: '参照标准名称',
minWidth: 150, minWidth: 150
}, },
{ {
prop: 'standardTime', prop: 'standardTime',
label: '标准推行年份', label: '标准推行年份',
minWidth: 150, minWidth: 150
}, },
{ {
prop: 'valueType', prop: 'valueType',
@@ -100,41 +124,33 @@ const columns = reactive<ColumnProps<TestScript.ResTestScript>[]>([
enum: dictStore.getDictData('Script_Value_Type'), enum: dictStore.getDictData('Script_Value_Type'),
fieldNames: { label: 'name', value: 'id' }, fieldNames: { label: 'name', value: 'id' },
search: showValueSearch.value ? { el: 'select' } : undefined, search: showValueSearch.value ? { el: 'select' } : undefined,
minWidth: 150, minWidth: 150
}, },
{ {
prop: 'type', prop: 'type',
label: '模板类型', label: '模板类型',
minWidth: 150, minWidth: 150,
render: scope => { render: scope => {
return ( return <el-tag type={scope.row.type ? 'success' : 'primary'}> {scope.row.type ? '模版' : '脚本'} </el-tag>
<el-tag type={scope.row.type ? 'success' : 'primary'} > {scope.row.type ? '模版' : '脚本'} </el-tag> }
)
}, },
}, { prop: 'operation', label: '操作', fixed: 'right', width: 250 }
{ prop: 'operation', label: '操作', fixed: 'right', width: 250 },
]) ])
// 打开 drawer(新增、编辑) // 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => { const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
if(modeStore.currentMode == '比对式'){ if (modeStore.currentMode == '比对式') {
comparisonPopup.value?.open(titleType, row,modeStore.currentMode,) comparisonPopup.value?.open(titleType, row, modeStore.currentMode)
}else{ } else {
if(titleType == 'add'){ if (titleType == 'add') {
valueTypePopup.value?.open(titleType, row,modeStore.currentMode) // valueTypePopup.value?.open(titleType, row,modeStore.currentMode)
}else{ testScriptPopup.value?.open('新增检测脚本', {}, row, modeStore.currentMode, '')
testScriptPopup.value?.open(titleType, row,modeStore.currentMode,'') } else {
testScriptPopup.value?.open(titleType, row, modeStore.currentMode, '')
} }
} }
} }
// 批量删除设备 // 批量删除设备
const batchDelete = async (id: string[]) => { const batchDelete = async (id: string[]) => {
await useHandleData(deletePqScript, id, '删除所选脚本') await useHandleData(deletePqScript, id, '删除所选脚本')
@@ -153,6 +169,4 @@ const updateType = async (params: TestScript.ResTestScript) => {
await useHandleData(updatePqScript, params, `升级【${params.name}】为模版`) await useHandleData(updatePqScript, params, `升级【${params.name}】为模版`)
proTable.value?.getTableList() proTable.value?.getTableList()
} }
</script> </script>