检测首页、主页、数据展示界面样式修改

frontend/src/views/plan/autoTest/index.vue

@@ -4,18 +4,18 @@
         <!-- 顶部筛选条件&返回按钮 -->
     <!-- {{ printText }} -->
     <div class="test_top">
+      <!-- style="pointer-events: none" -->
       <el-checkbox
         v-for="(item, index) in detectionOptions"
-        :model-value="item.id"
-        :true-value="item.id"
+        v-model="item.selected"
         :key="index"
-        style="pointer-events: none"
-        >{{ item.name }}</el-checkbox
+        :label="item.name"
+        ></el-checkbox
       >
-      <el-button type="primary" @click="handlePreTest">启动预检测</el-button>
-      <el-button type="primary" @click="handleAutoTest">进入检测流程</el-button>
+      <el-button type="primary" @click="handlePreTest">预检测</el-button>
+      <el-button type="primary" @click="handleAutoTest">正式检测</el-button>
       <el-button type="primary" @click="handleBackDeviceList"
-        >返回检测首页</el-button
+        >返回首页</el-button
       >
     </div>
     <div class="test_bot">
@@ -42,6 +42,23 @@
           />
           <div class="test_button">
             <el-button
+              type="primary"
+              v-if="!isPause"
+              :icon="VideoPause"
+              @click="handlePauseTest"
+              >暂停检测</el-button
+            >
+            <el-button
+              type="warning"
+              v-if="isPause"
+              :icon="Refresh"
+              @click="handlePauseTest"
+              >继续检测</el-button
+            >
+            <el-button type="danger" :icon="Close" @click="handleFinishTest"
+              >停止检测</el-button
+            >
+            <!-- <el-button
               type="danger"
               v-if="!isPause"
               :icon="Close"
@@ -57,7 +74,7 @@
             >
             <el-button type="primary" :icon="Check" @click="handleFinishTest"
               >完成检测</el-button
-            >
+            > -->
           </div>
         </template>
         <!-- <el-descriptions-item width="0px" label="上送数据总数">
@@ -74,7 +91,7 @@
       <div class="right_table">
         <!-- 模拟列表样式 -->
         <!-- 表头设备 -->
-        <div class="table_left">
+        <div class="table_left" v-if="false">
           <p>测试项目</p>
           <div v-for="(item, index) in deviceTestList" :key="index">
             {{ item.name }}
@@ -125,7 +142,8 @@
       </div>
       <!-- 右侧状态加载 -->
       <div class="right_status" ref="statusRef">
-        <p v-for="(item, index) in statusList" :key="index">
+        <!-- ,fontSize:index%5===0?'16px':'14px' -->
+        <p v-for="(item, index) in statusList" :key="index" :style="{color:index%5===0?'#F56C6C':'var(--el-text-color-regular)'}">
           输入：{{ item.remark }} -{{
             item.status == 0 ? "输出完毕" : "输入中，请稍后！"
           }}<br />
@@ -159,30 +177,53 @@ import {
   Refresh,
   Search,
   Close,
+  VideoPause,
 } from "@element-plus/icons-vue";
 const treeRef = ref<any>();
 const PopupVisible = ref(false)
 const showDataPopup = ref()
 
 //定义与预检测配置数组
-const detectionOptions = [
+const detectionOptions = ref([
   {
     id: 0,
-    name: "标准源通讯检测",
+    name: "标准源通讯检测",//判断源通讯是否正常
+    selected: true,
   },
   {
     id: 1,
-    name: "设备通讯检测",
+    name: "设备通讯检测",//判断设备的IP、Port、识别码、秘钥是否正常
+    selected: true,
   },
   {
     id: 2,
-    name: "协议校验",
+    name: "协议校验",//ICD报告触发测试
+    selected: true,
   },
   {
     id: 3,
-    name: "数据校对",
+    name: "相序校验",//判断装置的接线是否正确
+    selected: true,
   },
-];
+  {
+    id: 4,
+    name: "守时校验",//判断装置24小时内的守时误差是否小于1s
+    selected: true,
+  },
+  {
+    id: 5,
+    name: "通道系数校准",//通过私有协议与装置进行通讯，校准三相电压电流的通道系数
+    selected: true,
+  },
+  // {
+  //   id: 6,
+  //   name: "实时数据比对",
+  // },
+  // {
+  //   id: 7,
+  //   name: "录波数据比对",
+  // },
+]);
 
 const leftDeviceData = ref<any>([
   // {