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
*/
export const getTreeData = (params: {
scriptId: string,
devId: string,
devNum: string,
scriptType: string | null,
code: number,
scriptId?: string,
devId?: string,
devNum?: string,
scriptType?: string | null,
code?: number,
}) => {
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;
updateBy?: string;
updateTime?: string;
selectedValue?: string;
}
/**

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

@@ -1,16 +1,18 @@
<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">
<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-table :data="tableData"
<el-table
:data="tableData"
:header-cell-style="{ textAlign: 'center', backgroundColor: '#003078', color: '#fff' }"
:cell-style="{ textAlign: 'center' }"
style="width: 100%"
:style="{ height: '295px', overflow: 'hidden' }"
:show-header="false"
:span-method="arraySpanMethod">
:span-method="arraySpanMethod"
>
<el-table-column prop="sort" label="相别" width="60" />
<el-table-column prop="frequency" label="电压/电流" width="90" />
<el-table-column prop="L1" label="值" width="180" />
@@ -21,35 +23,62 @@
</el-table-column>
<el-table-column label="操作">
<template #default="{ row, $index }">
<el-button :type="buttonTypes[$index].channel || 'info'" @click="toggleType(row, $index,'channel')">通道使能</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>
<el-button
:type="buttonTypes[$index].channel || 'info'"
@click="toggleType(row, $index, 'channel')"
>
通道使能
</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>
</el-table-column>
</el-table>
</el-tab-pane>
</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="全局设置菜单">
<!-- 全局设置菜单内容 -->
<div style="height: 295px;">
<div class="form-item-container">
<el-form-item label="频率：" prop='name'>
<el-form-item label="频率：" prop="name">
<div class="input-label-container">
<el-input style="width: 100px;" />
<el-input style="width: 100px" />
<label>Hz</label>
</div>
</el-form-item>
</div>
<div class="button-label-container">
<label>参考设定值列表:</label>
<el-button type="primary" :icon='EditPen' @click="openDialog">编辑</el-button>
<el-button type="primary" :icon="EditPen" @click="openDialog">编辑</el-button>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div style="margin-top: 20px;">
<div style="margin-top: 10px">
<el-tabs type="border-card" class="custom-tabs">
<el-tab-pane label="电压/电流编辑">
<TestScriptVolCurTab />
@@ -73,35 +102,40 @@
<template #footer>
<div>
<el-button @click='close()'>取 消</el-button>
<el-button type="primary" @click='save()'>保存</el-button>
<el-button @click="close()">取 消</el-button>
<el-button type="primary" @click="save()">保存</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { dialogBig } from '@/utils/elementBind'
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 { type TabsInstance } from 'element-plus';
import TestScriptVolCurTab from '@/views/machine/testScript/components/testScriptVolCurTab.vue';
import TestScriptHarmTab from '@/views/machine/testScript/components/testScriptHarmTab.vue';
import TestScriptInHarmTab from '@/views/machine/testScript/components/testScriptInHarmTab.vue';
import TestScriptFlickerTab from '@/views/machine/testScript/components/testScriptFlickerTab.vue';
import TestScriptDipTab from '@/views/machine/testScript/components/testScriptDipTab.vue';
import { type TabsInstance } from 'element-plus'
import TestScriptVolCurTab from '@/views/machine/testScript/components/testScriptVolCurTab.vue'
import TestScriptHarmTab from '@/views/machine/testScript/components/testScriptHarmTab.vue'
import TestScriptInHarmTab from '@/views/machine/testScript/components/testScriptInHarmTab.vue'
import TestScriptFlickerTab from '@/views/machine/testScript/components/testScriptFlickerTab.vue'
import TestScriptDipTab from '@/views/machine/testScript/components/testScriptDipTab.vue'
const dialogVisible = ref(false)
const dialogTitle = ref()
const setValueTable = ref()
const buttonTypeOptions = ['default', 'text', 'success', 'warning', 'info', 'primary', 'danger'] as const;
type ButtonType = typeof buttonTypeOptions[number];
const buttonTypeOptions = ['default', 'text', 'success', 'warning', 'info', 'primary', 'danger'] as const
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 = [
{ sort: 'L1', frequency: 'V', L1: '电压:57.75V 相角:0°' },
@@ -109,34 +143,38 @@ const tableData= [
{ sort: 'L2', frequency: 'V', L1: '电压:57.75V 相角:0°' },
{ sort: 'L2', frequency: 'I', 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 逻辑
const arraySpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => {
if (columnIndex === 0 || columnIndex === 3) { // 第一列
if (columnIndex === 0 || columnIndex === 3) {
// 第一列
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
}
} else {
return {
rowspan: 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) {
const currentType = buttonTypes[$index][buttonType];
buttonTypes[$index][buttonType] = currentType === 'info' ? 'primary' : 'info';
const currentType = buttonTypes[$index][buttonType]
buttonTypes[$index][buttonType] = currentType === 'info' ? 'primary' : 'info'
}
}
};
// 关闭弹窗
const close = () => {
@@ -144,11 +182,7 @@ const close = () => {
}
// 保存数据
const save = () => {
}
const save = () => {}
// 打开弹窗，可能是新增，也可能是编辑
const open = (sign: string, row: any) => {
@@ -163,17 +197,15 @@ const open = (sign: string,row: any) => {
interHarmonic: 'info',
flicker: 'info',
transient: 'info'
};
});
}
})
}
// 打开 drawer(新增、编辑)
const openDialog = () => {
setValueTable.value?.open()
}
// 对外映射
defineExpose({ open })
</script>
@@ -225,5 +257,4 @@ defineExpose({ open })
.input-label-container label {
margin-left: 5px; /* 添加标签与输入框之间的间距 */
}
</style>

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

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

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

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

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

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

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

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

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

@@ -1,52 +1,70 @@
<template>
<el-dialog :title="dialogTitle"
v-model='dialogVisible'
@close="close"
<el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1400px">
<TestScriptDetail :options="secondLevelOptions" />
<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"
width="1400px">
width="500px"
>
<div class="dialog-content">
<el-form :model='formContent' label-width="auto" class="form-three ">
<el-divider >基础信息</el-divider>
<el-form-item label="脚本名称" prop='name'>
<el-input v-model='formContent.name' />
<el-form :model="formContent" label-width="auto" class="form-one">
<el-form-item label="脚本名称" prop="name">
<el-input v-model.trim="formContent.name" placeholder="请输入脚本名称" clearable />
</el-form-item>
<el-form-item label="参照标准名称" prop='standardName'>
<el-input v-model='formContent.standardName' />
<el-form-item label="参照标准名称" prop="standardName">
<el-input v-model.trim="formContent.standardName" placeholder="请输入参照标准名称" clearable />
</el-form-item>
<el-form-item label="标准推行年份" prop='standardTime'>
<el-form-item label="标准推行年份" prop="standardTime">
<el-date-picker
v-model="formContent.standardTime"
type="year"
placeholder="请选择标准推行年份"
/>
</el-form-item>
<el-form-item label="检测脚本值类型">
<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>
</div>
<TestScriptDetail :options="secondLevelOptions" />
<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>
<el-button @click="closeInformation()">取 消</el-button>
<el-button type="primary">确定</el-button>
<!-- <el-button type="primary" @click='save()'>脚本另存为</el-button> -->
</div>
</template>
</el-dialog>
</el-dialog>
</template>
<script setup lang='ts'>
<script setup lang="ts">
import { dialogBig } from '@/utils/elementBind'
import { computed, ref } from 'vue'
import { useDictStore } from '@/stores/modules/dict'
import TestScriptDetail from '@/views/machine/testScript/components/testScriptDetail.vue';
import { type TestScript } from '@/api/device/interface/testScript';
import type { Dict } from '@/api/system/dictionary/interface';
import TestScriptDetail from '@/views/machine/testScript/components/testScriptDetail.vue'
import { type TestScript } from '@/api/device/interface/testScript'
import type { Dict } from '@/api/system/dictionary/interface'
import { getDictTreeList } from '@/api/system/dictionary/dictTree'
import type { CascaderOption } from 'element-plus';
import type { CascaderOption } from 'element-plus'
const modeId = ref()
const secondLevelOptions: any[] = [];
const secondLevelOptions: any[] = []
const basicInformation: boolean = ref(false)
// 定义弹出组件元信息
const dialogFormRef = ref()
const dictStore = useDictStore()
@@ -61,7 +79,7 @@ const dictStore = useDictStore()
standardName: '',
standardTime: '',
state: 1,
selectedValue: ''
})
return { dialogVisible, titleType, formContent }
}
@@ -81,7 +99,7 @@ const dictStore = useDictStore()
pattern: modeId.value,
standardName: '',
standardTime: '',
state:1,
state: 1
}
}
@@ -92,18 +110,20 @@ const dictStore = useDictStore()
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
}
// 关闭信息弹框
const closeInformation = () => {
basicInformation.value = false
}
// 保存数据
const save = () => {
basicInformation.value = true
}
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, row: any, currentMode: string, id: string) => {
const dictCode = '测试脚本字典表'; // 替换为实际需要的字典代码
const dictCode = '测试脚本字典表' // 替换为实际需要的字典代码
const resDictTree: Dict.ResDictTree = {
name: dictCode,
id: '',
@@ -111,25 +131,20 @@ const open = async (sign: string,row: any,currentMode: string,id:string) => {
pids: '',
code: '',
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);
if(id != ''){//新增的时候才会重新赋值值类型
if (id != '') {
//新增的时候才会重新赋值值类型
formContent.value.valueType = id
}
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()
@@ -142,14 +157,11 @@ const open = async (sign: string,row: any,currentMode: string,id:string) => {
value: item.id,
label: item.name,
children: item.children ? convertToOptions(item.children) : undefined
}));
};
}))
}
// 对外映射
defineExpose({ open })
</script>
<style scoped>
/* .dialog-content {

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

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

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

@@ -1,13 +1,8 @@
<template>
<el-dialog title="请确认检测脚本值类型"
v-model='dialogVisible'
@close="close"
v-bind="dialogSmall"
>
<el-dialog title="请确认检测脚本值类型" v-model="dialogVisible" @close="close" v-bind="dialogSmall">
<div class="dialog-content">
<el-form>
<el-form-item label='值类型'>
<el-form-item label="值类型">
<el-select v-model="selectedValue" filterable clearable placeholder="请选择值类型">
<el-option
v-for="item in dictStore.getDictData('Script_Value_Type')"
@@ -19,22 +14,20 @@
</el-form-item>
</el-form>
</div>
<TestScriptPopup ref='testScriptPopup' />
<TestScriptPopup ref="testScriptPopup" />
<template #footer>
<div>
<el-button @click='close()'>取 消</el-button>
<el-button type="primary" @click='save()'>新增</el-button>
<el-button @click="close()">取 消</el-button>
<el-button type="primary" @click="save()">新增</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang='ts'>
<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';
import { type TestScript } from '@/api/device/interface/testScript'
const mode = ref()
const testScriptPopup = ref()
@@ -56,7 +49,6 @@
testScriptPopup.value?.open('新增检测脚本', {}, mode.value, selectedValue.value)
}
// 打开弹窗，可能是新增，也可能是编辑
const open = (sign: string, row: any, currentMode: string) => {
mode.value = currentMode
@@ -67,9 +59,6 @@
// 对外映射
defineExpose({ open })
</script>
<style scoped>
/* .dialog-content {

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

@@ -1,35 +1,63 @@
<template>
<div class='table-box'>
<ProTable
ref='proTable'
:columns='columns'
:request-api="getTableList"
>
<div class="table-box">
<ProTable ref="proTable" :columns="columns" :request-api="getTableList">
<!-- :data='testScriptData' 如果要显示静态数据，就切换该配置 -->
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button v-auth.testScript="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
<el-button v-auth.testScript="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
@click='batchDelete(scope.selectedListIds)'>
<template #tableHeader="scope">
<el-button v-auth.testScript="'add'" type="primary" :icon="CirclePlus" @click="openDialog('add')">
新增
</el-button>
<el-button
v-auth.testScript="'delete'"
type="danger"
:icon="Delete"
plain
:disabled="!scope.isSelected"
@click="batchDelete(scope.selectedListIds)"
>
删除
</el-button>
</template>
<!-- 表格操作 -->
<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 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 #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
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>
</ProTable>
</div>
<ComparisonPopup ref='comparisonPopup' />
<ValueTypePopup ref='valueTypePopup' />
<TestScriptPopup ref='testScriptPopup' />
<ComparisonPopup ref="comparisonPopup" />
<ValueTypePopup ref="valueTypePopup" />
<TestScriptPopup ref="testScriptPopup" />
</template>
<script setup lang='tsx' name='useRole'>
<script setup lang="tsx" name="useRole">
import { type TestScript } from '@/api/device/interface/testScript'
import { useHandleData } from '@/hooks/useHandleData'
import ProTable from '@/components/ProTable/index.vue'
@@ -39,20 +67,17 @@ import { useDictStore } from '@/stores/modules/dict'
import ComparisonPopup from './components/comparisonPopup.vue'
import TestScriptPopup from './components/testScriptPopup.vue'
import ValueTypePopup from './components/valueTypePopup.vue'
import {
getPqScriptList,updatePqScript,deletePqScript,
} from '@/api/device/testScript/index'
import { getPqScriptList, updatePqScript, deletePqScript } from '@/api/device/testScript/index'
import { computed, reactive, ref } from 'vue'
import { useModeStore } from '@/stores/modules/mode'; // 引入模式 store
import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
defineOptions({
name: 'testScript'
})
const comparisonPopup = ref()
const testScriptPopup = ref()
const valueTypePopup = ref()
const modeStore = useModeStore();
const modeStore = useModeStore()
const dictStore = useDictStore()
const getTableList = (params: any) => {
@@ -67,12 +92,11 @@ const proTable = ref<ProTableInstance>()
const showValueSearch = computed(() => {
if (modeStore.currentMode == '比对式') {
return false;
return false
} else {
return true;
return true
}
});
})
// 表格配置项
const columns = reactive<ColumnProps<TestScript.ResTestScript>[]>([
@@ -87,12 +111,12 @@ const columns = reactive<ColumnProps<TestScript.ResTestScript>[]>([
{
prop: 'standardName',
label: '参照标准名称',
minWidth: 150,
minWidth: 150
},
{
prop: 'standardTime',
label: '标准推行年份',
minWidth: 150,
minWidth: 150
},
{
prop: 'valueType',
@@ -100,41 +124,33 @@ const columns = reactive<ColumnProps<TestScript.ResTestScript>[]>([
enum: dictStore.getDictData('Script_Value_Type'),
fieldNames: { label: 'name', value: 'id' },
search: showValueSearch.value ? { el: 'select' } : undefined,
minWidth: 150,
minWidth: 150
},
{
prop: 'type',
label: '模板类型',
minWidth: 150,
render: scope => {
return (
<el-tag type={scope.row.type ? 'success' : 'primary'} > {scope.row.type ? '模版' : '脚本'} </el-tag>
)
return <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(新增、编辑)
const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
if (modeStore.currentMode == '比对式') {
comparisonPopup.value?.open(titleType, row,modeStore.currentMode,)
comparisonPopup.value?.open(titleType, row, modeStore.currentMode)
} else {
if (titleType == 'add') {
valueTypePopup.value?.open(titleType, row,modeStore.currentMode)
// valueTypePopup.value?.open(titleType, row,modeStore.currentMode)
testScriptPopup.value?.open('新增检测脚本', {}, row, modeStore.currentMode, '')
} else {
testScriptPopup.value?.open(titleType, row, modeStore.currentMode, '')
}
}
}
// 批量删除设备
const batchDelete = async (id: string[]) => {
await useHandleData(deletePqScript, id, '删除所选脚本')
@@ -153,6 +169,4 @@ const updateType = async (params: TestScript.ResTestScript) => {
await useHandleData(updatePqScript, params, `升级【${params.name}】为模版`)
proTable.value?.getTableList()
}
</script>