修改 测试脚本页面

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 {