From bba0ced7f9072f0cea807ee6e59563b230c9fc1e Mon Sep 17 00:00:00 2001
From: GGJ <357021191@qq.com>
Date: Mon, 17 Feb 2025 08:39:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=20=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E8=84=9A=E6=9C=AC=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/echarts/line/index.vue     | 282 ++++++++++++++++++
 frontend/src/routers/modules/staticRouter.ts  |  16 +
 .../testScript/components/communication.vue   |  92 ++++++
 .../testScript/components/setValueTable.vue   | 171 +++++++----
 .../components/testProjectPopup.vue           |  87 +++++-
 .../components/testScriptDetail.vue           | 192 ++++--------
 .../components/testScriptVolCurTab.vue        | 130 ++++----
 .../machine/testScript/components/tree.vue    |  19 +-
 .../src/views/machine/testScript/index.vue    |  10 +-
 9 files changed, 722 insertions(+), 277 deletions(-)
 create mode 100644 frontend/src/components/echarts/line/index.vue
 create mode 100644 frontend/src/views/machine/testScript/components/communication.vue

diff --git a/frontend/src/components/echarts/line/index.vue b/frontend/src/components/echarts/line/index.vue
new file mode 100644
index 0000000..d817f56
--- /dev/null
+++ b/frontend/src/components/echarts/line/index.vue
@@ -0,0 +1,282 @@
+<template>
+    <div class="chart">
+        <div ref="chartRef" class="my-chart" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
+// import echarts from './echarts'
+import * as echarts from 'echarts' // 全引入
+// import 'echarts/lib/component/dataZoom'
+
+const color = [
+    'var(--el-color-primary)',
+    '#07CCCA',
+    '#00BFF5',
+    '#FFBF00',
+    '#77DA63',
+    '#D5FF6B',
+    '#Ff6600',
+    '#FF9100',
+    '#5B6E96',
+    '#66FFCC',
+    '#B3B3B3'
+]
+
+const chartRef = ref<HTMLDivElement>()
+
+const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
+let chart: echarts.ECharts | any = null
+const resizeHandler = () => {
+    // 不在视野中的时候不进行resize
+    if (!chartRef.value) return
+    if (chartRef.value.offsetHeight == 0) return
+    chart.getZr().painter.getViewportRoot().style.display = 'none'
+    requestAnimationFrame(() => {
+        chart.resize()
+        chart.getZr().painter.getViewportRoot().style.display = ''
+    })
+}
+const initChart = () => {
+    if (!props.isInterVal && !props.pieInterVal) {
+        chart?.dispose()
+    }
+    // chart?.dispose()
+    chart = echarts.init(chartRef.value as HTMLDivElement)
+    const options = {
+        title: {
+            left: 'center',
+            // textStyle: {
+            color: '#000',
+            fontSize: 18,
+            // },
+            ...(props.options?.title || null)
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.55)',
+            borderWidth: 0,
+            confine: true,
+            ...(props.options?.tooltip || null)
+        },
+
+        legend: {
+            right: 20,
+            top: 0,
+            itemGap: 10,
+            itemStyle: {},
+            // textStyle: {
+            fontSize: 12,
+            padding: [2, 0, 0, 0], //[上、右、下、左]
+            // },
+            itemWidth: 15,
+            itemHeight: 10,
+            ...(props.options?.legend || null)
+        },
+        grid: {
+            top: '60px',
+            left: '30px',
+            right: '70px',
+            bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
+            containLabel: true,
+            ...(props.options?.grid || null)
+        },
+        xAxis: props.options?.xAxis ? handlerXAxis() : null,
+        yAxis: props.options?.yAxis ? handlerYAxis() : null,
+        dataZoom: props.options?.dataZoom || [
+            {
+                type: 'inside',
+                height: 13,
+                start: 0,
+                bottom: '20px',
+                end: 100
+            },
+            {
+                start: 0,
+                height: 13,
+                bottom: '20px',
+                end: 100
+            }
+        ],
+        color: props.options?.color || color,
+        series: props.options?.series,
+        ...props.options?.options
+    }
+    // console.log(options.series,"获取x轴");
+    handlerBar(options)
+
+    // 处理柱状图
+    chart.setOption(options, true)
+
+    setTimeout(() => {
+        chart.resize()
+    }, 0)
+}
+const handlerBar = (options: any) => {
+    if (Array.isArray(options.series)) {
+        options.series.forEach((item: any) => {
+            if (item.type === 'bar') {
+                item.barMinHeight = 10
+                item.barMaxWidth = 20
+                item.itemStyle = Object.assign(
+                    {
+                        color: (params: any) => {
+                            if (params.value == 0 || params.value == 3.14159) {
+                                return '#ccc'
+                            } else {
+                                return props.options?.color
+                                    ? props.options?.color[params.seriesIndex]
+                                    : color[params.seriesIndex]
+                            }
+                        }
+                    },
+                    item.itemStyle
+                )
+            }
+        })
+    }
+}
+const handlerYAxis = () => {
+    let temp = {
+        type: 'value',
+        nameGap: 15,
+        nameTextStyle: {
+            color: '#000'
+        },
+        splitNumber: 5,
+        minInterval: 1,
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#000'
+            }
+        },
+        axisLabel: {
+            color: '#000',
+            fontSize: 14,
+            formatter: function (value) {
+                return value.toFixed(0) // 格式化显示为一位小数
+            }
+        },
+        splitLine: {
+            lineStyle: {
+                // 使用深浅的间隔色
+                color: ['#ccc'],
+                type: 'dashed',
+                opacity: 0.5
+            }
+        }
+    }
+    // props.options?.xAxis 是数组还是对象
+    if (Array.isArray(props.options?.yAxis)) {
+        return props.options?.yAxis.map((item: any) => {
+            return {
+                ...temp,
+                ...item
+            }
+        })
+    } else {
+        return {
+            ...temp,
+            ...props.options?.yAxis
+        }
+    }
+}
+const handlerXAxis = () => {
+    let temp = {
+        type: 'category',
+        axisTick: { show: false },
+        nameTextStyle: {
+            color: '#000'
+        },
+        axisLine: {
+            // lineStyle: {
+            color: '#000'
+            // }
+        },
+        axisLabel: {
+            // textStyle: {
+            fontFamily: 'dinproRegular',
+            color: '#000',
+            fontSize: '12'
+            // }
+        }
+        // boundaryGap: false,
+    }
+    // props.options?.xAxis 是数组还是对象
+    if (Array.isArray(props.options?.xAxis)) {
+        return props.options?.xAxis.map((item: any) => {
+            return {
+                ...temp,
+                ...item
+            }
+        })
+    } else {
+        return {
+            ...temp,
+            ...props.options?.xAxis
+        }
+    }
+}
+
+let throttle: ReturnType<typeof setTimeout>
+// 动态计算table高度
+const resizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+        if (throttle) {
+            clearTimeout(throttle)
+        }
+        throttle = setTimeout(() => {
+            resizeHandler()
+        }, 100)
+    }
+})
+onMounted(() => {
+    initChart()
+    resizeObserver.observe(chartRef.value!)
+})
+defineExpose({ initChart })
+onBeforeUnmount(() => {
+    resizeObserver.unobserve(chartRef.value!)
+    chart?.dispose()
+})
+watch(
+    () => props.options,
+    (newVal, oldVal) => {
+        initChart()
+    }
+)
+</script>
+
+<style lang="scss" scoped>
+.chart {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .el-button {
+        position: absolute;
+        right: 0px;
+        top: -60px;
+    }
+
+    .my-chart {
+        height: 100%;
+        width: 100%;
+    }
+}
+</style>
diff --git a/frontend/src/routers/modules/staticRouter.ts b/frontend/src/routers/modules/staticRouter.ts
index 4b8175b..eb0a877 100644
--- a/frontend/src/routers/modules/staticRouter.ts
+++ b/frontend/src/routers/modules/staticRouter.ts
@@ -85,6 +85,22 @@ export const staticRouter: RouteRecordRaw[] = [
               isKeepAlive: true,
             },
           },
+          {
+            path: "/machine/testScriptAdd",
+            name: "testScriptAdd",
+            component: () => import("@/views/machine/testScript/components/testScriptPopup.vue"),
+            meta: {
+              title: "检测脚本配置",
+              icon: "List",
+              isLink: "",
+              hideTab:true,
+              parentPath:'/machine/testScript',
+              isHide: false,
+              isFull: false,
+              isAffix: false,
+              isKeepAlive: true,
+            },
+          },
           // 错误页面路由
           {
             path: "/403",
diff --git a/frontend/src/views/machine/testScript/components/communication.vue b/frontend/src/views/machine/testScript/components/communication.vue
new file mode 100644
index 0000000..b266745
--- /dev/null
+++ b/frontend/src/views/machine/testScript/components/communication.vue
@@ -0,0 +1,92 @@
+<template>
+    <div>
+        <el-table
+            :data="tableData"
+            :header-cell-style="{
+                textAlign: 'center',
+                backgroundColor: '#003078',
+                color: '#fff'
+            }"
+            stripe
+            height="calc(100vh - 335px)"
+            :style="{ overflow: 'hidden' }"
+            row-key="id"
+            default-expand-all
+        >
+            <el-table-column prop="name" label="指标" show-overflow-tooltip width="180px" />
+            <el-table-column align="center" label="参与误差比较">
+                <template #default="{ row }">
+                    <el-switch v-model="row.compare" v-if="row.show">
+                        <template #active-action>
+                            <span>√</span>
+                        </template>
+                        <template #inactive-action>
+                            <span>×</span>
+                        </template>
+                    </el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" label="是否启用">
+                <template #default="{ row }">
+                    <el-switch v-model="row.enable" v-if="row.show">
+                        <template #active-action>
+                            <span>√</span>
+                        </template>
+                        <template #inactive-action>
+                            <span>×</span>
+                        </template>
+                    </el-switch>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import type { Dict } from '@/api/system/dictionary/interface'
+import { getDictTreeList } from '@/api/system/dictionary/dictTree'
+interface TabOption {
+    label: string
+    name: string
+    children?: TabOption[]
+}
+const props = defineProps({
+    options: {
+        type: Array as PropType<TabOption[]>,
+        required: true
+    }
+})
+const tableData = ref<any[]>([])
+onMounted(async () => {
+    const resDictTree: Dict.ResDictTree = {
+        name: '脚本-误差',
+        id: '',
+        pid: '',
+        pids: '',
+        code: 'Script_Error',
+        sort: 0
+    }
+    let data = await getDictTreeList(resDictTree)
+
+    data.data[0].children.forEach((item: any, i: number) => {
+        tableData.value.push({
+            id: item.id,
+            name: item.name,
+            show: false,
+            children: []
+        })
+        item.children.forEach((k: any) => {
+            tableData.value[i].children.push({
+                id: k.id,
+                name: k.name,
+                show: true,
+                compare: false,
+                enable: false
+            })
+        })
+    })
+
+    // tableData.value = data.data[0].children || []
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/frontend/src/views/machine/testScript/components/setValueTable.vue b/frontend/src/views/machine/testScript/components/setValueTable.vue
index d47a942..5576043 100644
--- a/frontend/src/views/machine/testScript/components/setValueTable.vue
+++ b/frontend/src/views/machine/testScript/components/setValueTable.vue
@@ -1,95 +1,158 @@
 import { ref } from "vue"
 
 <template>
-     <el-dialog  :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" >
-        <div class='table-box'>
+    <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1400">
+        <div class="table-box">
             <ProTable
-                ref='proTable'
-                :columns='columns'
+                ref="proTable"
+                :columns="columns"
                 :request-api="getTableList"
                 :pagination="false"
-                :toolButton ='false' 
-                 :style="{ height: '250px',maxHeight: '400px',overflow:'hidden'}"
+                :toolButton="false"
+                :style="{ height: '530px', maxHeight: '530px', overflow: 'hidden' }"
             >
                 <!-- :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)'>
-                    删除
-                </el-button>
+                <template #tableHeader="scope">
+                    <el-button v-auth.testScript="'add'" type="primary" :icon="CirclePlus" @click="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="'upgrade'" type='primary' v-if="scope.row.type !== 1" link :icon='Share' @click='updateType(scope.row)'>复制</el-button>
-                <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>
+                <template #operation="scope">
+                    <el-button
+                        v-auth.testScript="'upgrade'"
+                        type="primary"
+                        v-if="scope.row.type !== 1"
+                        link
+                        :icon="Share"
+                        @click="copy(scope.row)"
+                    >
+                        复制
+                    </el-button>
+                    <el-button
+                        v-auth.testScript="'edit'"
+                        type="primary"
+                        link
+                        :icon="EditPen"
+                        :model-value="false"
+                        @click="edit(scope.row)"
+                    >
+                        编辑
+                    </el-button>
+                    <el-button
+                        v-auth.testScript="'delete'"
+                        type="primary"
+                        link
+                        :icon="Delete"
+                        @click="batchDelete(scope.row)"
+                    >
+                        删除
+                    </el-button>
                 </template>
-        
             </ProTable>
         </div>
 
-            <template #footer>
-                <div >
-                    <el-button @click='close()'>取 消</el-button>
-                    <el-button type="primary" @click='save()'>保存</el-button>
-                </div>
-            </template>
+        <template #footer>
+            <div>
+                <el-button @click="close()">取 消</el-button>
+                <el-button type="primary" @click="save">保存</el-button>
+            </div>
+        </template>
+    </el-dialog>
+    <el-dialog :title="dialogTitle" v-model="showForm" @close="close" width="500">
+        <el-form ref="form" :model="form" label-width="auto">
+            <el-form-item label="参考设定值类型" prop="name">
+                <el-input v-model="form.name" />
+            </el-form-item>
+            <el-form-item label="参考设定值子类型" prop="standardName">
+                <el-input v-model="form.standardName" />
+            </el-form-item>
+            <el-form-item label="参考设定值" prop="standardTime">
+                <el-input v-model="form.standardTime" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <div>
+                <el-button @click="close()">取 消</el-button>
+                <el-button type="primary" @click="save">保 存</el-button>
+            </div>
+        </template>
     </el-dialog>
 
-    <SetValuePopup  ref='setValuePopup' />
-
-  </template>
+    <SetValuePopup ref="setValuePopup" />
+</template>
 
 <script setup lang="ts">
 import type { TestScript } from '@/api/device/interface/testScript'
 import type { ColumnProps } from '@/components/ProTable/interface'
-import {reactive, ref } from 'vue'
+import { CirclePlus, EditPen, Delete, Share } from '@element-plus/icons-vue'
+import { reactive, ref } from 'vue'
 import { dialogBig } from '@/utils/elementBind'
-
+const showForm = ref(false)
 const dialogVisible = ref(false)
 const dialogTitle = ref('')
 
-
 // 表格配置项
 const columns = reactive<ColumnProps<TestScript.ResTestScript>[]>([
-  { type: 'selection', fixed: 'left', width: 70 },
-  { type: 'index', fixed: 'left', width: 70, label: '序号' },
-  {
-    prop: 'name',
-    label: '参考设定值类型',
-    minWidth: 350,
-  },
-  {
-    prop: 'standardName',
-    label: '参考设定值子类型',
-    minWidth: 150,
-  },
-  {
-    prop: 'standardTime',
-    label: '参考设定值',
-    minWidth: 150,
-  },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 250 },
+    { type: 'selection', fixed: 'left', width: 70 },
+    { type: 'index', fixed: 'left', width: 70, label: '序号' },
+    {
+        prop: 'name',
+        label: '参考设定值类型',
+        minWidth: 350
+    },
+    {
+        prop: 'standardName',
+        label: '参考设定值子类型',
+        minWidth: 150
+    },
+    {
+        prop: 'standardTime',
+        label: '参考设定值',
+        minWidth: 150
+    },
+    { prop: 'operation', label: '操作', fixed: 'right', width: 250 }
 ])
+const form = ref({
+    name: 220,
+    standardName: 0,
+    standardTime: 0
+})
 
 // 打开弹窗，可能是新增，也可能是编辑
-const open =  (sign: string,row: any) => {
+const open = (sign: string, row: any) => {
     dialogVisible.value = true
-    dialogTitle.value = sign === 'add'? '新增检测项目信息' : '编辑检测项目信息'
+    dialogTitle.value = sign === 'add' ? '新增检测项目信息' : '编辑检测项目信息'
+}
+const save = () => {
+    dialogVisible.value = false
 }
-
 
 // 关闭弹窗
 const close = () => {
     dialogVisible.value = false
 }
-
+// 新增
+const add = () => {
+    showForm.value = true
+}
+//编辑
+const edit = (row: any) => {}
+// 复制
+const copy = (row: any) => {}
+//批量删除
+const batchDelete = (row: any) => {}
 // 对外映射
 defineExpose({ open })
 </script>
 
-<style scoped>
-
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/frontend/src/views/machine/testScript/components/testProjectPopup.vue b/frontend/src/views/machine/testScript/components/testProjectPopup.vue
index 7623495..a82b66d 100644
--- a/frontend/src/views/machine/testScript/components/testProjectPopup.vue
+++ b/frontend/src/views/machine/testScript/components/testProjectPopup.vue
@@ -1,27 +1,46 @@
 <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="1500px">
         <div class="dialog-content">
+            <el-tabs type="border-card" class="right-tabs" style="height: 100%">
+                <el-tab-pane label="全局设置菜单">
+                    <!-- 全局设置菜单内容 -->
+                    <div style="height: 295px">
+                        <el-radio-group v-model="radio">
+                            <el-radio
+                                v-for="item in tabChildren"
+                                :key="item"
+                                :label="item.label"
+                                :value="item.value"
+                                border
+                                style="margin: 0 0 10px 10px"
+                            />
+                            <!-- <el-radio v-for="item in tabChildren" :value="item.value" border>{{ item.label }}</el-radio> -->
+                        </el-radio-group>
+                    </div>
+                </el-tab-pane>
+            </el-tabs>
             <el-tabs type="border-card" class="left-tabs" style="height: 100%">
                 <el-tab-pane label="输出菜单">
                     <!-- 输出菜单内容 -->
                     <el-table
                         :data="tableData"
-                        :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"
+                        :cell-style="tableStyle.cellStyle"
+                        :header-cell-style="{ textAlign: 'center', backgroundColor: '#003078', color: '#fff' }"
+                        @row-click="handleRowClick"
                     >
-                        <el-table-column prop="sort" label="相别" width="60" />
-                        <el-table-column prop="frequency" label="电压/电流" width="90" />
-                        <el-table-column prop="L1" label="值" width="180" />
+                        <el-table-column prop="sort" label="相别" width="60" align="center" />
+                        <el-table-column prop="frequency" label="电压/电流" align="center" width="90" />
+                        <el-table-column prop="L1" label="值" width="180" align="center" />
                         <el-table-column label="操作" width="80">
                             <template #default="{}">
-                                <el-button type="info" :icon="Bottom"></el-button>
+                                <el-button type="primary" :icon="Bottom"></el-button>
                             </template>
                         </el-table-column>
-                        <el-table-column label="操作">
+                        <el-table-column label="操作" align="center">
                             <template #default="{ row, $index }">
                                 <el-button
                                     :type="buttonTypes[$index].channel || 'info'"
@@ -61,7 +80,7 @@
             <el-tabs type="border-card" class="right-tabs" style="height: 100%">
                 <el-tab-pane label="全局设置菜单">
                     <!-- 全局设置菜单内容 -->
-                    <div style="height: 295px;">
+                    <div style="height: 295px">
                         <div class="form-item-container">
                             <el-form-item label="频率：" prop="name">
                                 <div class="input-label-container">
@@ -120,6 +139,28 @@ import TestScriptHarmTab from '@/views/machine/testScript/components/testScriptH
 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 emit = defineEmits(['addTab'])
+interface TabOption {
+    label: string
+    name: string
+    value: string
+    children?: TabOption[]
+}
+
+const props = defineProps({
+    options: {
+        type: Array as PropType<TabOption[]>,
+        required: true
+    },
+    activeName: {
+        type: String,
+        required: true
+    }
+})
+const form = ref({
+    value: '',
+    label: ''
+})
 
 const dialogVisible = ref(false)
 const dialogTitle = ref()
@@ -145,7 +186,8 @@ const tableData = [
     { sort: 'L3', frequency: 'V', L1: '电压:57.75V 相角:0°' },
     { sort: 'L3', frequency: 'I', L1: '电压:57.75V 相角:0°' }
 ]
-
+const radio = ref('')
+const tabChildren: any = ref([])
 // 定义 span-method 逻辑
 const arraySpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => {
     if (columnIndex === 0 || columnIndex === 3) {
@@ -163,6 +205,17 @@ const arraySpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIn
         }
     }
 }
+const selectedRow = ref('L1')
+const tableStyle = {
+    cellStyle: ({ row }: { row: any }) => {
+        return row.sort === selectedRow.value
+            ? { backgroundColor: '#dcdcdc' } // 设置选中行的背景颜色
+            : {}
+    }
+}
+const handleRowClick = async (row: any) => {
+    selectedRow.value = row.sort
+}
 
 // 切换按钮类型
 const toggleType = (
@@ -182,7 +235,11 @@ const close = () => {
 }
 
 // 保存数据
-const save = () => {}
+const save = () => {
+    form.value.value = radio.value
+    form.value.label = tabChildren.value.filter(item => item.value == radio.value)[0].label
+    emit('addTab', form.value)
+}
 
 // 打开弹窗，可能是新增，也可能是编辑
 const open = (sign: string, row: any) => {
@@ -199,6 +256,8 @@ const open = (sign: string, row: any) => {
             transient: 'info'
         }
     })
+    tabChildren.value = props.options.filter(item => item.value == props.activeName)[0].children || []
+    radio.value = tabChildren.value[0].value || ''
 }
 
 // 打开 drawer(新增、编辑)
@@ -226,12 +285,12 @@ defineExpose({ open })
 }
 
 .left-tabs {
-    flex: 3; /* 左侧 tab 占据 3/4 的宽度 */
-    margin-right: 10px; /* 可选：添加间距 */
+    width: 980px;
+    margin: 0 10px; /* 可选：添加间距 */
 }
 
 .right-tabs {
-    flex: 1; /* 右侧 tab 占据 1/4 的宽度 */
+    flex: 1;
 }
 
 .form-item-container {
diff --git a/frontend/src/views/machine/testScript/components/testScriptDetail.vue b/frontend/src/views/machine/testScript/components/testScriptDetail.vue
index 2bcf140..eb98e48 100644
--- a/frontend/src/views/machine/testScript/components/testScriptDetail.vue
+++ b/frontend/src/views/machine/testScript/components/testScriptDetail.vue
@@ -1,36 +1,32 @@
 <template>
     <div class="divider-container">
-        <el-divider style="width: 400px">检测脚本信息</el-divider>
-        <el-divider style="width: 1300px">检测项目概要信息</el-divider>
+        <el-divider style="width: 300px" content-position="left">检测脚本信息</el-divider>
+        <el-divider style="width: 400px" content-position="left">通讯脚本</el-divider>
+        <el-divider style="flex: 1" content-position="left">检测项目概要信息</el-divider>
     </div>
     <div class="data-check-content">
         <div class="content-tree">
             <Tree />
         </div>
+        <div class="content-tree" style="width: 400px">
+            <Commun :options="props.options" />
+        </div>
 
-        <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"
-                >
+        <div class="content-right-Tabs" style="height: calc(100vh - 335px); width: 100px">
+            <el-tabs type="border-card" style="height: 100%" v-model="activeName">
+                <el-tab-pane v-for="tab in tabData" :key="tab.value" :label="tab.label" :name="tab.value">
+                    <div class="dialog-footer">
+                        <el-button :icon="CirclePlus" type="primary" @click="openDialog('add')">新增</el-button>
+                        <el-button :icon="CirclePlus" type="primary" @click="openAddDialog()">保存测试项</el-button>
+                    </div>
                     <!-- 频率tab -->
-                    <el-tabs type="border-card" style="height: 500px">
+                    <el-tabs type="border-card">
                         <el-tab-pane
                             v-for="subTab in tab.children || []"
                             :key="subTab.name"
                             :label="subTab.label"
                             :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="openAddDialog()">
-                                    保存测试项
-                                </el-button>
-                            </div>
                             <div class="table-container">
                                 <el-table
                                     :data="tableData"
@@ -40,8 +36,7 @@
                                         color: '#fff'
                                     }"
                                     :cell-style="{ textAlign: 'center' }"
-                                    style="width: 100%"
-                                    :style="{ height: '390px', overflow: 'hidden' }"
+                                    height="calc(100vh - 515px)"
                                 >
                                     <el-table-column prop="sort" label="组次" width="60" />
                                     <el-table-column prop="frequency" label="频率(Hz)" width="100" />
@@ -89,9 +84,6 @@
                                     </el-table-column>
                                 </el-table>
                             </div>
-                            <!-- <div class="dialog-footer" style="margin-top: 20px;">
-                                        
-                                  </div> -->
                         </el-tab-pane>
                     </el-tabs>
                 </el-tab-pane>
@@ -99,22 +91,22 @@
         </div>
     </div>
 
-    <TestProjectPopup ref="testProjectPopup" />
+    <TestProjectPopup ref="testProjectPopup" :options="props.options" :activeName="activeName" @addTab="addTab" />
 </template>
 
 <script setup lang="ts">
-import { type PropType, ref } from 'vue'
+import { type PropType, ref, nextTick } from 'vue'
 import Tree from './tree.vue'
+import Commun from './communication.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'
 
-const testProjectPopup = ref()
-
 interface TabOption {
     label: string
     name: string
+    value: string
     children?: TabOption[]
 }
 
@@ -124,7 +116,8 @@ const props = defineProps({
         required: true
     }
 })
-
+const activeName = ref('')
+const testProjectPopup = ref()
 const tableData = [
     { 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°' },
@@ -133,116 +126,45 @@ const tableData = [
     { 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°' }
 ]
-
-const tabs = ref([
-    {
-        label: '频率',
-        name: 'resultTab',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab' }
-        ]
-    },
-    {
-        label: '电压',
-        name: 'resultTab1',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab1' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab1' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab1' }
-        ]
-    },
-    {
-        label: '电流',
-        name: 'resultTab2',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab2' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab2' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab2' }
-        ]
-    },
-    {
-        label: '电压不平衡度',
-        name: 'resultTab3',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab3' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab3' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab3' }
-        ]
-    },
-    {
-        label: '电流不平衡度',
-        name: 'resultTab4',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab4' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab4' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab4' }
-        ]
-    },
-    {
-        label: '谐波电压',
-        name: 'resultTab5',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab5' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab5' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab5' }
-        ]
-    },
-    {
-        label: '谐波电流',
-        name: 'resultTab6',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab6' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab6' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab6' }
-        ]
-    },
-    {
-        label: '间谐波电压',
-        name: 'resultTab7',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab7' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab7' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab7' }
-        ]
-    },
-    {
-        label: '间谐波电流',
-        name: 'resultTab8',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab8' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab8' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab8' }
-        ]
-    },
-    {
-        label: '电压暂升暂降',
-        name: 'resultTab9',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab9' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab9' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab9' }
-        ]
-    },
-    {
-        label: '闪变',
-        name: 'resultTab10',
-        subTabs: [
-            { label: '额度工作条件下的检测', name: 'quotaConditionTab10' },
-            { label: '电压对频率测量的影响', name: 'voltageFrequencyImpactTab10' },
-            { label: '谐波对频率测量的影响', name: 'harmonicFrequencyImpactTab10' }
-        ]
-    }
-])
-
-
-
+const tabData: any = ref([])
 
 // 打开 drawer(新增、编辑)
 const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
+    if (titleType == 'add') {
+    }
     testProjectPopup.value?.open(titleType, row)
 }
+// 新增保存
+const addTab = (row: any) => {
+    let flag = false
+    let list: any = {}
+    tabData.value.forEach(item => {
+        if (item.value == activeName.value) {
+            list = item
+            item.children.forEach(k => {
+                if (k.value == row.value) {
+                    flag = true
+                }
+            })
+        }
+    })
+    if (flag) {
+        list.children.push(row)
+    }
+    // if (tab.length == 0) {
+    //     tabData.value.filter(item => item.value == activeName.value)[0].children?.push(row)
+    // }
+}
+onMounted(() => {
+    props.options.forEach(item => {
+        tabData.value.push({
+            label: item.label.replace(/准确度|检测/g, ''),
+            value: item.value,
+            children: []
+        })
+    })
+    activeName.value = tabData.value[0].value
+})
 </script>
 <style scoped>
 .data-check-content {
@@ -252,12 +174,12 @@ const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> =
 
 .content-tree {
     width: 300px;
-    height: 560px;
+    height: calc(100vh - 335px);
     border: 1px solid #dcdfe6;
     border-radius: 4px;
     margin-right: 10px;
     overflow: auto; /* 同时启用垂直和水平滚动 */
-    overflow-x: auto; /* 确保水平滚动条生效 */
+    overflow-x: hidden;
 }
 
 /* 确保 el-tree 内容可以超出容器宽度 */
diff --git a/frontend/src/views/machine/testScript/components/testScriptVolCurTab.vue b/frontend/src/views/machine/testScript/components/testScriptVolCurTab.vue
index fbe708f..ab1a39c 100644
--- a/frontend/src/views/machine/testScript/components/testScriptVolCurTab.vue
+++ b/frontend/src/views/machine/testScript/components/testScriptVolCurTab.vue
@@ -2,11 +2,12 @@
     <div class="editor-container">
         <div class="left-editor">
             <!-- 左侧编辑区域内容 -->
-            <canvas ref="canvas" width="700" height="165"></canvas>
+            <!-- <canvas ref="canvas" width="700" height="165"></canvas> -->
+            <Line :options="chartsData" style="width: 700px; height: 165px" ref="lineRef" />
         </div>
         <div class="right-editor">
             <!-- 右侧编辑区域内容 -->
-            <el-form :inline="true" label-width="auto" :model="form" class="form-two" >
+            <el-form :inline="true" label-width="auto" :model="form" class="form-two">
                 <el-form-item label="电压有效值(V)">
                     <el-input v-model="form.input1" />
                 </el-form-item>
@@ -26,85 +27,74 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import Line from '@/components/echarts/line/index.vue'
 const form = ref({
     input1: 220,
     input2: 0,
     input3: 0,
     input4: 0
 })
+const lineRef: any = ref()
+const chartsData = ref({})
 const canvas = ref<HTMLCanvasElement | null>(null)
 
 onMounted(() => {
-    if (canvas.value) {
-        const ctx = canvas.value.getContext('2d')
-        if (ctx) {
-            drawSineWave(ctx)
-        }
-    }
+    drawSineWave()
 })
 
-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 // 偏移量
+function drawSineWave() {
+    chartsData.value = {
+        tooltip: {
+            show: false
+        },
+        legend: {
+            show: false
+        },
+        grid: {
+            left: 0,
+            right: 0,
+            top: '10px',
+            bottom: '10px'
+        },
+        xAxis: {
+            name: '',
 
-    // 绘制横轴
-    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()
-
-    // 绘制横轴刻度
-    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.font = '12px Arial'
-        ctx.fillStyle = 'black'
-        ctx.textAlign = 'center'
-        ctx.fillText((x / xStep).toFixed(0), x, offset + 20)
+            boundaryGap: false,
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    type: 'dashed',
+                    color: ['#cfcfcf']
+                }
+            },
+            axisLabel: {
+                show: false
+            }
+        },
+        yAxis: {
+            name: '',
+            splitLine: {
+                lineStyle: {
+                    // 使用深浅的间隔色
+                    color: ['#ccc'],
+                    type: 'solid',
+                    opacity: 1
+                }
+            }
+        },
+        options: {
+            dataZoom: null,
+            series: [
+                {
+                    name: '',
+                    type: 'line',
+                    data: [10, -10, 10, -10, 10, -10, 10, -10, 10, -10,10],
+                    showSymbol: false,
+                    smooth: true
+                }
+            ]
+        }
     }
-
-    // 绘制纵轴刻度
-    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.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)
-
-    for (let x = 0; x < width; x++) {
-        const y = offset + amplitude * Math.sin(frequency * x)
-        ctx.lineTo(x, y)
-    }
-
-    ctx.strokeStyle = 'red'
-    ctx.lineWidth = 2
-    ctx.stroke()
 }
 </script>
 
@@ -119,8 +109,8 @@ canvas {
 }
 
 .left-editor {
-    flex: 1; 
-    margin-left: 20px; 
+    flex: 1;
+    margin-left: 20px;
 }
 
 .right-editor {
diff --git a/frontend/src/views/machine/testScript/components/tree.vue b/frontend/src/views/machine/testScript/components/tree.vue
index 8936a4b..7e178d5 100644
--- a/frontend/src/views/machine/testScript/components/tree.vue
+++ b/frontend/src/views/machine/testScript/components/tree.vue
@@ -1,5 +1,13 @@
 <template>
-    <el-tree node-key="id" default-expand-all :data="dataTree" :props="defaultProps" />
+    <el-tree node-key="id" default-expand-all :data="dataTree" :props="defaultProps">
+        <template #default="{ node, data }">
+            <el-tooltip effect="dark" :content="data.scriptTypeName" placement="top" :hide-after="0">
+                <div class="custom-tree-node">
+                    {{ data.scriptTypeName }}
+                </div>
+            </el-tooltip>
+        </template>
+    </el-tree>
 </template>
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
@@ -22,4 +30,11 @@ onMounted(() => {
     open()
 })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.custom-tree-node {
+    max-width: 230px;
+    overflow-x: hidden !important;
+    white-space: nowrap !important;
+    text-overflow: ellipsis !important;
+}
+</style>
diff --git a/frontend/src/views/machine/testScript/index.vue b/frontend/src/views/machine/testScript/index.vue
index cc6d7ab..ac6e05f 100644
--- a/frontend/src/views/machine/testScript/index.vue
+++ b/frontend/src/views/machine/testScript/index.vue
@@ -7,6 +7,7 @@
                 <el-button v-auth.testScript="'add'" type="primary" :icon="CirclePlus" @click="openDialog('add')">
                     新增
                 </el-button>
+
                 <el-button
                     v-auth.testScript="'delete'"
                     type="danger"
@@ -67,13 +68,14 @@ 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 { useRouter } from 'vue-router'
 import { getPqScriptList, updatePqScript, deletePqScript } from '@/api/device/testScript/index'
 import { computed, reactive, ref } from 'vue'
 import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
 defineOptions({
     name: 'testScript'
 })
-
+const router = useRouter()
 const comparisonPopup = ref()
 const testScriptPopup = ref()
 const valueTypePopup = ref()
@@ -144,7 +146,11 @@ const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> =
     } else {
         if (titleType == 'add') {
             // valueTypePopup.value?.open(titleType, row,modeStore.currentMode)
-            testScriptPopup.value?.open('新增检测脚本', {}, row, modeStore.currentMode, '')
+            // testScriptPopup.value?.open('新增检测脚本', {}, row, modeStore.currentMode, '')
+            router.push({
+                path: '/machine/testScriptAdd',
+                state: { title: '新增检测脚本', row: row, mode: modeStore.currentMode }
+            })
         } else {
             testScriptPopup.value?.open(titleType, row, modeStore.currentMode, '')
         }