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

2024-11-13 18:58:53 +08:00
parent 328696eb55
commit 86e7705985
9 changed files with 178 additions and 68 deletions
--- a/frontend/src/api/plan/autoTest.json
+++ b/frontend/src/api/plan/autoTest.json
@@ -3,7 +3,7 @@
    "data": [
        {
            "id": 0,
-            "name": "频率准备度检测",
+            "name": "频率准确度检测",
            "children": [
                {
                    "pid": 0,
@@ -11,16 +11,22 @@
                    "name": "额定工作条件下的检测",
                    "children": [
                        {
+                            "scriptIdx":1,
+                            "isChildNode":true,
                            "pid": "0-1",
                            "id": "0-1-1",
                            "name": "输入：频率 42.5Hz..."
                        },
                        {
+                            "scriptIdx":2,
+                            "isChildNode":true,
                            "pid": "0-1",
                            "id": "0-1-2",
                            "name": "输入：频率 50.0Hz..."
                        },
                        {
+                            "scriptIdx":3,
+                            "isChildNode":true,
                            "pid": "0-1",
                            "id": "0-1-3",
                            "name": "输入：频率 50.05Hz..."
@@ -33,16 +39,22 @@
                    "name": "电压对频率测量的影响",
                    "children": [
                        {
+                            "scriptIdx":4,
+                            "isChildNode":true,
                            "pid": "0-2",
                            "id": "0-2-1",
                            "name": "输入：频率 50.05Hz Ua =10%Un..."
                        },
                        {
+                            "scriptIdx":5,
+                            "isChildNode":true,
                            "pid": "0-2",
                            "id": "0-2-1",
                            "name": "输入：频率 51.05Hz Ua =10%Un..."
                        },
                        {
+                            "scriptIdx":6,
+                            "isChildNode":true,
                            "pid": "0-2",
                            "id": "0-2-2",
                            "name": "输入：频率 52.05Hz Ua =10%Un..."
@@ -55,6 +67,8 @@
                    "name": "谐波对频率测量的影响",
                    "children": [
                        {
+                            "scriptIdx":7,
+                            "isChildNode":true,
                            "pid": "0-3",
                            "id": "0-3-1",
                            "name": "输入：频率 50.05Hz Ua =100%Un..."
@@ -73,16 +87,22 @@
                    "name": "额定工作条件下的检测",
                    "children": [
                        {
+                            "scriptIdx":8,
+                            "isChildNode":true,
                            "pid": "1-1",
                            "id": "1-1-1",
                            "name": "输入：频率 42.5Hz..."
                        },
                        {
+                            "scriptIdx":9,
+                            "isChildNode":true,
                            "pid": "1-1",
                            "id": "1-1-2",
                            "name": "输入：频率 50.0Hz..."
                        },
                        {
+                            "scriptIdx":10,
+                            "isChildNode":true,
                            "pid": "1-1",
                            "id": "1-1-3",
                            "name": "输入：频率 50.05Hz..."
@@ -95,16 +115,22 @@
                    "name": "电压对频率测量的影响",
                    "children": [
                        {
+                            "scriptIdx":11,
+                            "isChildNode":true,
                            "pid": "1-2",
                            "id": "1-2-1",
                            "name": "输入：频率 50.05Hz Ua =10%Un..."
                        },
                        {
+                            "scriptIdx":12,
+                            "isChildNode":true,
                            "pid": "1-2",
                            "id": "1-2-1",
                            "name": "输入：频率 51.05Hz Ua =10%Un..."
                        },
                        {
+                            "scriptIdx":13,
+                            "isChildNode":true,
                            "pid": "1-2",
                            "id": "1-2-2",
                            "name": "输入：频率 52.05Hz Ua =10%Un..."
@@ -117,6 +143,8 @@
                    "name": "谐波对频率测量的影响",
                    "children": [
                        {
+                            "scriptIdx":14,
+                            "isChildNode":true,
                            "pid": "0-3",
                            "id": "0-3-1",
                            "name": "输入：频率 50.05Hz Ua =100%Un..."
@@ -136,16 +164,19 @@
                    "name": "额定工作条件下的检测",
                    "children": [
                        {
+                            "scriptIdx":15,
                            "pid": "2-1",
                            "id": "2-1-1",
                            "name": "输入：频率 42.5Hz..."
                        },
                        {
+                            "scriptIdx":16,
                            "pid": "2-1",
                            "id": "2-1-2",
                            "name": "输入：频率 50.0Hz..."
                        },
                        {
+                            "scriptIdx":17,
                            "pid": "2-1",
                            "id": "2-1-3",
                            "name": "输入：频率 50.05Hz..."
@@ -158,16 +189,19 @@
                    "name": "电压对频率测量的影响",
                    "children": [
                        {
+                            "scriptIdx":18,
                            "pid": "2-2",
                            "id": "2-2-1",
                            "name": "输入：频率 50.05Hz Ua =10%Un..."
                        },
                        {
+                            "scriptIdx":19,
                            "pid": "2-2",
                            "id": "2-2-1",
                            "name": "输入：频率 51.05Hz Ua =10%Un..."
                        },
                        {
+                            "scriptIdx":20,
                            "pid": "2-2",
                            "id": "2-2-2",
                            "name": "输入：频率 52.05Hz Ua =10%Un..."
@@ -180,6 +214,7 @@
                    "name": "谐波对频率测量的影响",
                    "children": [
                        {
+                            "scriptIdx":21,
                            "pid": "2-3",
                            "id": "2-3-1",
                            "name": "输入：频率 50.05Hz Ua =100%Un..."
--- a/frontend/src/views/home/components/table.vue
+++ b/frontend/src/views/home/components/table.vue
@@ -55,13 +55,13 @@
              type="primary"
              @click="handleTest"
              v-if="form.activeTabs === 0"
-              >启动自动检测</el-button
+              >自动检测</el-button
            >
            <el-button
              type="primary"
              @click="handleTest"
-              v-if="form.activeTabs === 1"
-              >启动手动检测</el-button
+              v-if="form.activeTabs === 0"
+              >手动检测</el-button
            >
            <el-button type="primary" v-if="form.activeTabs === 2"
              >不合格项复检</el-button
@@ -71,7 +71,7 @@
            >

            <el-button type="primary" v-if="form.activeTabs === 3"
-              >批量生成报告</el-button
+              >报告批量生成</el-button
            >

            <el-button type="primary" v-if="form.activeTabs === 4"
@@ -307,27 +307,27 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
    {
      prop: 'reCheck_Num',
      label: '复检次数',
-      minWidth: 70,
+      minWidth: 100,
    },
    {
      prop: 'report_State',
      label: '报告状态',
-      minWidth: 130,
+      minWidth: 100,
    },
    {
      prop: 'check_Result',
      label: '检测结果',
-      minWidth: 130,
+      minWidth: 100,
    },
    {
      prop: 'check_State',
      label: '检测状态',
-      minWidth: 130,
+      minWidth: 100,
    },
    {
      prop: 'document_State',
      label: '归档状态',
-      minWidth: 130,
+      minWidth: 100,
    },
    { prop: 'operation', label: '操作', fixed: 'right', minWidth: 150 ,isShow: operationShow},
  ])
--- a/frontend/src/views/home/components/tree.vue
+++ b/frontend/src/views/home/components/tree.vue
@@ -32,7 +32,7 @@
  </div>
 </template>
 <script lang='ts' setup>
-import { Menu, Platform } from '@element-plus/icons-vue'
+import { Menu, Platform, CircleCheck,Loading } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router'

 const router = useRouter()
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/frontend/src/views/home/tabs/dashboard.vue
@@ -15,7 +15,7 @@
          "
          v-for="(item, index) in tabsList"
          :key="index"
-          @click="handleCheckFunction(index)"
+          @click="handleCheckFunction(item.value)"
        >
          <div class="item_img">
            <img :src="item.img" alt="" />
@@ -26,8 +26,8 @@
        </div>
      </div>

-        <el-collapse v-model="activeNames" @change="handleChange">
-          <el-collapse-item title="检测进度展示" name="1">
+        <!-- <el-collapse v-model="activeNames" @change="handleChange">
+          <el-collapse-item title="检测进度展示" name="1"> -->

        <!-- 饼图 -->
        <div class="container_charts">
@@ -80,8 +80,8 @@
          </div>
        </div>

-          </el-collapse-item>
-        </el-collapse>
+          <!-- </el-collapse-item>
+        </el-collapse> -->

  <el-tabs type="border-card" @tab-change="handleTabsChange" v-model="editableTabsValue">
    <el-tab-pane :label="tabLabel1"> 
@@ -138,21 +138,15 @@ localStorage.setItem("color", "red");
 //功能选择数据
 const tabsList = ref([
  {
-    label: "自动检测",
+    label: "设备检测",
    value: 0,
    img: "/src/assets/images/plan/static/1.svg",
    checked: true,
  },
-  {
-    label: "手动检测",
-    value: 1,
-    img: "/src/assets/images/plan/static/2.svg",
-    checked: false,
-  },
  {
    label: "设备复检",
    value: 2,
-    img: "/src/assets/images/plan/static/6.svg",
+    img: "/src/assets/images/plan/static/2.svg",
    checked: false,
  },
  {
@@ -167,14 +161,45 @@ const tabsList = ref([
    img: "/src/assets/images/plan/static/4.svg",
    checked: false,
  },
-  {
-    label: "设备浏览",
-    value: 5,
-    img: "/src/assets/images/plan/static/5.svg",
-    checked: false,
-  },
 ]);
-
+// const tabsList = ref([
+//   {
+//     label: "自动检测",
+//     value: 0,
+//     img: "/src/assets/images/plan/static/1.svg",
+//     checked: true,
+//   },
+//   {
+//     label: "手动检测",
+//     value: 1,
+//     img: "/src/assets/images/plan/static/2.svg",
+//     checked: false,
+//   },
+//   {
+//     label: "设备复检",
+//     value: 2,
+//     img: "/src/assets/images/plan/static/6.svg",
+//     checked: false,
+//   },
+//   {
+//     label: "报告生成",
+//     value: 3,
+//     img: "/src/assets/images/plan/static/3.svg",
+//     checked: false,
+//   },
+//   {
+//     label: "设备归档",
+//     value: 4,
+//     img: "/src/assets/images/plan/static/4.svg",
+//     checked: false,
+//   },
+//   {
+//     label: "设备浏览",
+//     value: 5,
+//     img: "/src/assets/images/plan/static/5.svg",
+//     checked: false,
+//   },
+// ]);
 form.value.activeTabs = tabsList.value[0].value;
 const tableRef1 = ref();
 const tableRef2 = ref();
@@ -213,8 +238,6 @@ const chartsData1: any = ref([]),
  chartsData2: any = ref([]),
  chartsData3: any = ref([]);
 const getPieData = () => {
-
-  
  chartsData1.value = [
    { value: Math.floor(Math.random() * 100) + 1, name: "未检测" },
    { value: Math.floor(Math.random() * 100) + 1, name: "检测中" },
@@ -259,7 +282,7 @@ const handleCheckFunction = (val: any) => {
  console.log("test",val);
  editableTabsValue.value = '0';
  tabsList.value.map((item: any, index: any) => {
-    if (val == index) {
+    if (val == item.value) {
      item.checked = true;
    } else {
      item.checked = false;
@@ -338,11 +361,11 @@ onMounted(() => {
      .function_item {
        flex: none;
        width: 6%;
-        height: 70px;
+        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
-        flex-direction: column;
+        flex-direction: row;
        cursor: pointer;
        background-color: #607eab;
        border-radius: 8px;
@@ -356,7 +379,7 @@ onMounted(() => {
          display: flex;
          align-items: center;
          justify-content: center;
-
+          margin-right: 5px;
          img {
            width: 40px;
            height: auto;
@@ -422,8 +445,8 @@ onMounted(() => {

    .container_charts {
      width: 100%;
-      // min-height: 200px !important;
-      height:100%;
+      min-height: 180px !important;
+      // height:100%;
      background-color: #eee;
      display: flex;
      justify-content: space-between;
@@ -446,7 +469,7 @@ onMounted(() => {
    .container_table {
      // width: 100%;
      flex: 1 !important;
-      height: calc(100vh - 360px - 100px);
+      height: calc(100vh - 360px - 155px);
      border-radius: 4px;
      width: 100% !important;
      // display: none;
--- a/frontend/src/views/plan/autoTest/components/ShowDataPopup.vue
+++ b/frontend/src/views/plan/autoTest/components/ShowDataPopup.vue
@@ -1,10 +1,8 @@
 <template>
-        <el-dialog class='table-box'
+        <el-dialog
        title="数据查询"
               v-model='dialogVisible'
-               v-bind="dialogSmall" 
-               width="1200"
-               height="600"
+               v-bind="dialogBig" 
               draggable
 >
    <div class='table-box'>
@@ -16,6 +14,7 @@
        ref='proTable1'
        :columns='columns1'
        :data="testResultDatas"
+        :toolButton="false"
      >
         
      </ProTable>
@@ -29,6 +28,7 @@
        ref='proTable2'
        :columns='columns2'
        :data="testDatas"
+        :toolButton="false"
      >
      </ProTable>
      </div>
@@ -48,7 +48,7 @@
  import permissionUnit from './components/permissionUnit.vue'
  import ImportExcel from '@/components/ImportExcel/index.vue'
  import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
-  import {dialogSmall} from '@/utils/elementBind'
+  import {dialogBig,dialogMiddle,dialogSmall} from '@/utils/elementBind'
  import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
  import { useDictStore } from '@/stores/modules/dict'
  import {
--- a/frontend/src/views/plan/autoTest/components/tree.vue
+++ b/frontend/src/views/plan/autoTest/components/tree.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="plan_tree">
-    <div class="search_view">
+    <!-- <div class="search_view">
      <el-input
        placeholder="请输入计划名称"
        v-model="searchForm.planName"
      ></el-input>
-    </div>
+    </div> -->
    <div class="tree_container">
      <el-tree
        :data="data"
@@ -19,12 +19,14 @@
        @node-click="handleNodeClick"
        @check-change="changeSelect"
      >
+      <!-- scriptIdx -->
        <template #default="{ node, data }">
          <span
            class="custom-tree-node"
            style="display: flex; align-items: center"
          >
-            <!-- <Platform v-if="!data.pid" style="width:18px;height: 18px;margin-right:8px;" :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}"/> -->
+            <CircleCheck v-if="data.isChildNode && data.scriptIdx < currentIndex" style="width:18px;height: 18px;margin-right:8px;color:#67C23A;"/>
+            <Loading v-if="data.isChildNode && data.scriptIdx === currentIndex" style="width:18px;height: 18px;margin-right:8px;color:#E6A23C;"/>
            <span>{{ node.label }}</span>
          </span>
        </template>
@@ -34,7 +36,7 @@
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, defineExpose, watch } from "vue";
-import { Menu, Platform } from "@element-plus/icons-vue";
+import { Menu, Platform, CircleCheck,Loading } from "@element-plus/icons-vue";
 const emit = defineEmits(["jump"]);
 const data: any = ref([]);
 const defaultProps = {
@@ -55,6 +57,17 @@ const getTreeData = (val: any) => {
 };
 const filterText = ref("");
 const treeRef = ref();
+const currentIndex = ref(0);
+
+const timer = setInterval(() => {
+  currentIndex.value++;
+      if (currentIndex.value > 14) 
+      currentIndex.value = 0;
+    console.log(currentIndex.value);
+    
+    }, 2000);
+
+
 watch(
  () => searchForm.value.planName,
  (val) => {
--- a/frontend/src/views/plan/autoTest/index.vue
+++ b/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>([
  // {
--- a/frontend/src/views/plan/planList/index.vue
+++ b/frontend/src/views/plan/planList/index.vue
@@ -25,8 +25,6 @@
         <el-button type='primary' link :icon='Tools' @click="showtestSourceOpen(scope.row)">检测源绑定</el-button>
       </template>
   </ProTable>
-
-   <temp></temp>
      <!-- 向计划导入/导出设备对话框 -->
      <planPopup     
      :visible="dialogFormVisible"