首页、守时检测页样式调整

2024-12-11 17:46:59 +08:00
parent 6d7f045bce
commit 167716e61b
6 changed files with 224 additions and 95 deletions
--- a/frontend/src/api/device/device/deviceData.ts
+++ b/frontend/src/api/device/device/deviceData.ts
@@ -201,7 +201,7 @@ const data = [
      },
      {
        id: '15',     //装置序号ID
-        name: '240013', //设备名称
+        name: '240015', //设备名称
        dev_Type: 'PQS-882A',//设备类型
        dev_Chns: 1,  //设备通道数
        check_Result: '未检', //检测结果
@@ -212,7 +212,7 @@ const data = [
      },
      {
        id: '16',     //装置序号ID
-        name: '240014', //设备名称
+        name: '240016', //设备名称
        dev_Type: 'PQS-882A',//设备类型
        dev_Chns: 1,  //设备通道数
        check_Result: '未检', //检测结果
--- a/frontend/src/views/home/components/dataCheckChangeErrSysPopup.vue
+++ b/frontend/src/views/home/components/dataCheckChangeErrSysPopup.vue
@@ -269,7 +269,7 @@ const qualified = ref(0)
 const reportDisabled = ref(true)
 const reportDialogVisible = ref(false)
 const deviceName = ref('240001');
-const error_Sys_Id = ref('2');
+const error_Sys_Id = ref('1');
 const testScriptName = ref('Q/GDW 10650.4-2021 模拟式');
 const errorSysName = ref('Q/GDW 10650.2 - 2021');
 const dataRule = ref('所有值');
--- a/frontend/src/views/home/components/table.vue
+++ b/frontend/src/views/home/components/table.vue
@@ -112,8 +112,8 @@
            <!-- :disabled="!scope.isSelected || scope.selectedList.filter((item) => item.check_State === '检测完成').length === 0" -->
            <el-button type="primary" :icon="Notebook"  @click="handleTest('批量归档')" v-if="form.activeTabs === 4"
              >归档</el-button>
-            <el-button type="primary" :icon="CirclePlus" @click="addDevice('设备新增')" v-if="form.activeTabs === 0"
-              >设备新增</el-button>
+            <!-- <el-button type="primary" :icon="CirclePlus" @click="addDevice('设备新增')" v-if="form.activeTabs === 0"
+              >设备新增</el-button> -->
            
          </el-form-item>
        </el-form>
@@ -128,7 +128,17 @@
          v-if="form.activeTabs === 3 && form.activeChildTabs === 1"
          >查看</el-button
        >
-        <div class='cn-render-buttons' v-if="form.activeTabs === 3 && form.activeChildTabs === 0">
+
+        <el-button
+        type="primary"
+          link
+          :icon="Download"
+          @click="openDrawer('报告下载', scope.row)"
+          v-if="form.activeTabs === 3 && form.activeChildTabs === 0"
+          >报告下载</el-button
+        >
+
+        <!-- <div class='cn-render-buttons' v-if="form.activeTabs === 3 && form.activeChildTabs === 0">
          <el-dropdown trigger='click'>
            <el-button link type='primary' :icon="Download" class='table-operate'>
              <div class='table-operate-text'>报告下载</div>
@@ -141,7 +151,7 @@
              </el-dropdown-menu>
            </template>
          </el-dropdown>
-        </div>
+        </div> -->

        <el-button
        type="primary"
@@ -181,9 +191,24 @@
          link
          :icon="Switch"
          @click="openDrawer('误差体系更换', scope.row)"
-          v-if="form.activeTabs === 5"
+          v-if="form.activeTabs === 5 && scope.row.document_State === '已归档'"
          >误差体系更换</el-button
        >
+
+        <div class='cn-render-buttons' v-if="form.activeTabs === 5 && scope.row.document_State === '已归档'">
+          <el-dropdown trigger='click'>
+            <el-button link type='primary' :icon="Download" class='table-operate'>
+              <div class='table-operate-text'>报告下载</div>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <!-- <el-dropdown-item>Q/GDW 10650.2-2021 报告</el-dropdown-item> -->
+                <el-dropdown-item>Q/GDW 1650.2-2016 报告</el-dropdown-item>
+                <el-dropdown-item>GBT 19862-2016 报告</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
        <!-- <el-button
          dictType="primary"
          link
@@ -767,7 +792,7 @@ function tableHeaderInit(val: number) {
    case 5://数据查询
    disablecheckResultList("未检")
    disableCheckReportStatus("未检")
-    columns[columns.length - 1].minWidth = 250;
+    columns[columns.length - 1].minWidth = 290;
    operationShow.value = true;
    documentStateShow.value = true;
    checkStateShow.value = false;
--- a/frontend/src/views/home/components/test.vue
+++ b/frontend/src/views/home/components/test.vue
@@ -324,6 +324,41 @@ const scrollToBottom = () => {
 function getRandomInt(max: number): number {
  return Math.floor(Math.random() * max);
 }
+
+//判断该检测项（例如 频率准确度检测）是否全部合格（所有设备所有通道所有子检测项目全部合格为合格，否则为不合格）
+function getItemCheckResult(index:number):boolean{
+
+  let items = columnList?.value.filter((item) => item === index.toString())
+
+  if(items.length > 0)
+  {
+    return false
+  }
+  else
+    return true
+}
+//测试项开始检测时间（或继续检测时间）
+const startData = ref(new Date())
+//测试项检测结束时间（或暂停时的时间）
+const endData= ref(new Date())
+
+let timeDifference = ref(0)
+
+function getTimeDifference(timeDifference:number): string {
+  // 将时间差转换为天、小时、分钟、秒
+  const millisecondsPerDay = 1000 * 60 * 60 * 24;
+  const millisecondsPerHour = 1000 * 60 * 60;
+  const millisecondsPerMinute = 1000 * 60;
+  const millisecondsPerSecond = 1000;
+
+  const days = Math.floor(timeDifference / millisecondsPerDay);
+  const hours = Math.floor((timeDifference % millisecondsPerDay) / millisecondsPerHour);
+  const minutes = Math.floor((timeDifference % millisecondsPerHour) / millisecondsPerMinute);
+  const seconds = Math.floor((timeDifference % millisecondsPerMinute) / millisecondsPerSecond);
+
+  return `时间差: ${days} 天, ${hours} 小时, ${minutes} 分钟, ${seconds} 秒`
+}
+
 const updateLog = () => {
  const currentTime = ref(new Date().toLocaleString());

@@ -335,14 +370,23 @@ const updateLog = () => {
        type: 'info',
        log: currentTime.value + '：频率准确度检测开始',
      })
-        
      break;
      case 2:
-
+      if(getItemCheckResult(activeIndex.value - 1))
+      {
        testLogList.value.push({
        type: 'info',
-        log:currentTime.value + '：频率准确度检测完成',
+        log:currentTime.value + '：频率准确度检测合格',
      })
+      }
+      else
+      {
+        testLogList.value.push({
+        type: 'error',
+        log:currentTime.value + '：频率准确度检测不合格',
+      })
+      }
+
      testLogList.value.push({
        type: 'info',
        log:currentTime.value + '：电压准确度检测开始',
--- a/frontend/src/views/home/components/timeTest.vue
+++ b/frontend/src/views/home/components/timeTest.vue
@@ -2,13 +2,13 @@
  <div>
    <div class="test-dialog">
      <div class="dialog-left">
-        <el-steps direction="vertical" :active="activeIndex" :process-status="currentStepStatus"
+        <el-steps direction="vertical" :active="stepsIndex" :process-status="currentStepStatus"
          finish-status="success">
          <el-step title="开始检测"  />
-          <el-step title="触发设备检测GPS时刻的标准时间" :description="gpsTime" />
-          <el-step title="设备开始上送" :description="devStartTime" />
-          <el-step title="设备结束上送" :description="devEndTime" />
-          <el-step title="检测完成" />
+          <el-step title="触发设备检测GPS时刻的标准时间"/>
+          <el-step title="设备开始上送"/>
+          <el-step title="设备结束上送"/>
+          <el-step title="检测完成"/>
        </el-steps>
        <!-- <el-timeline style="max-width: 600px">
          <el-timeline-item
@@ -28,31 +28,58 @@
      <div class="dialog-right">
        <div class="right-title">
          <!-- <div>设备上送时刻表</div> -->
-          <span style="  font-size: 18px;font-weight: 600;">
-            设备已合格 <span style="color: #67C23A">{{ qualified }}</span> 台/共 <span style="color: green">4</span> 台
+
+            <span v-if="activeIndex <= 1"> </span>
+            <span v-if="activeIndex > 1" style="  font-size: 18px;font-weight: 600;">
+            标准时间: <span style="color: #003078">{{ gpsTime }}</span> 
            </span>
-          <div>
+            <div class="error-dsc">
+              <div class="green-div"></div>
+              <span style=" color: #67C23A; font-size: 16px;font-weight: 600;">
+              守时误差≤1000ms
+            </span>
+
+            <div class="red-div"></div>
+            <span style=" color: #F56C6c; font-size: 16px;font-weight: 600;">
+              守时误差>1000ms
+            </span>
+            </div>
+            <!-- <span style="  font-size: 18px;font-weight: 600;">
+              设备已合格 <span style="color: #67C23A">{{ qualified }}</span> 台/共 <span style="color: green">4</span> 台
+            </span> -->
            <!-- <el-button type="primary" loading v-if="activeIndex > 0 && activeIndex < activeTotalNum">设备已合格3台/共4台</el-button> 
                <el-button type="primary" disabled="true" v-if="activeIndex === activeTotalNum">设备已合格3台/共4台</el-button> -->
-
        </div>
-        </div>
-        <div class="right-content">
-          <ProTable ref='proTable' :pagination='false' :toolButton='false' :showCard='false' :columns='columns'
+        <div class="right-content  table-main">
+          <el-empty description="暂无数据，等待检测开始" v-if="activeIndex === 0" />
+          <!-- <ProTable v-if="activeIndex > 0" ref='proTable' :pagination='false' :toolButton='false' :showCard='false' :columns='columns'
            :data='deviceOperatorData' stripe :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" style="width: 100%; height:435px" border>
-          </ProTable>
+          </ProTable> -->

-          <!-- <el-table :data="deviceOperatorData" stripe :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border>
-                <el-table-column prop="deviceName" label="设备名" />
+          <el-table v-if="activeIndex > 0" :data="deviceOperatorData" stripe :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border>
+                <el-table-column prop="deviceName" label="设备名称" />
                <el-table-column prop="updataTime" label="上送时刻" />
-                <el-table-column prop="ErrorValue" label="守时误差(ms)" />
+                <el-table-column prop="ErrorValue" label="守时误差(ms)">
+                    <!-- <template #header>
+                    <span>守时误差(ms)</span>
+                    <el-tooltip content = "守时误差 = |设备上送时间 - 标准时间|，最大显示值为9999毫秒，超过该值的统一用ErrorMax来表示" placement="top" style="align-items: bottom;">
+                      <el-icon><InfoFilled  /></el-icon>
+                    </el-tooltip>
+                  </template> -->
+                </el-table-column>
                <el-table-column prop="Result" label="检测结果">
+                  <!-- <template #header>
+                    <span>检测结果</span>
+                    <el-tooltip content = "守时误差小于等于1000毫秒为合格，否则不合格" placement="top" style="align-items: bottom;">
+                      <el-icon><InfoFilled  /></el-icon>
+                    </el-tooltip>
+                  </template> -->
                  <template #default="scope">
                    <el-tag :type="scope.row.Result === '合格' ? 'success' : 'danger'">{{ scope.row.Result }}</el-tag>
                  </template>
-</el-table-column>
-</el-table> -->
+          </el-table-column>
+          </el-table>
        </div>
      </div>
    </div>
@@ -62,8 +89,9 @@
 <script lang="tsx" setup name="timeTest">
 import { SuccessFilled } from '@element-plus/icons-vue'

+const stepsIndex = ref(0)
 const activeIndex = ref(0)
-const activeTotalNum = ref(5)
+const activeTotalNum = ref(7)
 const startTime = ref('')
 const gpsTime = ref('')
 const devStartTime = ref('')
@@ -86,32 +114,7 @@ const activities = ref<Activity[]>([
  },])


-const deviceOperatorData = ref([
-  {
-    deviceName: '240001',
-    updataTime: '—',
-    ErrorValue: '—',
-    Result: '—',
-  },
-  {
-    deviceName: '240002',
-    updataTime: '—',
-    ErrorValue: '—',
-    Result: '—',
-  },
-  {
-    deviceName: '240003',
-    updataTime: '—',
-    ErrorValue: '—',
-    Result: '—',
-  },
-  {
-    deviceName: '240004',
-    updataTime: '—',
-    ErrorValue: '—',
-    Result: '—',
-  },
-])
+const deviceOperatorData = ref([])

 const deviceData = ref([
  {
@@ -192,12 +195,12 @@ watch(testStatus, function (newValue, oldValue) {
    ts.value = 'process'

    let timer = setInterval(() => {
-      if (activeIndex.value < activeTotalNum.value - 2)
+      if (activeIndex.value < activeTotalNum.value)
        activeIndex.value++
-      else if (activeIndex.value === activeTotalNum.value - 2) {
-        activeIndex.value++
-        activeIndex.value++
-      }
+      // else if (activeIndex.value === activeTotalNum.value - 2) {
+      //   activeIndex.value++
+      //   activeIndex.value++
+      // }
      else {
        clearInterval(timer)
        ts.value = 'success'
@@ -218,11 +221,28 @@ function formatDateTime(date) {
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
 }

+function addMillisecondsToDate(dateString: string, millisecondsToAdd: number): Date {
+  // 解析字符串为 Date 对象
+  const [datePart, timePart] = dateString.split(' ');
+  const [year, month, day] = datePart.split('-').map(Number);
+  const [hours, minutes, seconds, milliseconds] = timePart.split(':').flatMap(part => part.split('.')).map(Number);
+
+  // 创建 Date 对象（注意：月份是从 0 开始的）
+  const date = new Date(year, month - 1, day, hours, minutes, seconds, milliseconds);
+
+  // 增加指定的毫秒数
+  date.setMilliseconds(date.getMilliseconds() + millisecondsToAdd);
+
+  return date;
+}
+
 watch(activeIndex, function (newValue, oldValue) {

+  console.log(activeIndex.value,111,stepsIndex.value,222)
+
  if (activeIndex.value === 1) {
    startTime.value = formatDateTime(new Date());
-
+    stepsIndex.value = 1;
    // activities.value.length = 0;
    // activities.value.push({
    //   content: '开始检测',
@@ -233,6 +253,7 @@ watch(activeIndex, function (newValue, oldValue) {
    // });
  }
  if (activeIndex.value === 2) {
+    stepsIndex.value = 2;
    gpsTime.value = formatDateTime(new Date());
    // activities.value.push({
    //   content: 'GPS上送时刻',
@@ -243,37 +264,42 @@ watch(activeIndex, function (newValue, oldValue) {
    // });
  }
  if (activeIndex.value === 3) {
-    // activities.value.push({
-    //   content: '设备最早上送时刻',
-    //   timestamp: '2018-04-03 20:46',
-    //   color: '#0bbd87',
-    //   icon: SuccessFilled,
-    //   size: 'large',
-    // });
-    devStartTime.value = formatDateTime(new Date());
+    stepsIndex.value = 3;
    deviceOperatorData.value.length = 0;
-    deviceOperatorData.value = deviceData.value;
-    qualified.value = 3
+    // deviceOperatorData.value = deviceData.value;
+    deviceOperatorData.value.push({
+      deviceName: '240002',
+      updataTime: formatDateTime(addMillisecondsToDate(gpsTime.value, 136)),
+      ErrorValue: '136',
+      Result: '合格',
+    });
+  }
+  if (activeIndex.value === 4) {
+        deviceOperatorData.value.push({
+      deviceName: '240001',
+      updataTime: formatDateTime(addMillisecondsToDate(gpsTime.value, 148)),
+      ErrorValue: '148',
+      Result: '合格',
+    });
+  }
+  if (activeIndex.value === 5) {
+        deviceOperatorData.value.push({
+      deviceName: '240004',
+      updataTime: formatDateTime(addMillisecondsToDate(gpsTime.value, 736)),
+      ErrorValue: '736',
+      Result: '合格',
+    });
+  }
+  if (activeIndex.value === 6) {
+      stepsIndex.value = 5;
+      deviceOperatorData.value.push({
+      deviceName: '240003',
+      updataTime: formatDateTime(addMillisecondsToDate(gpsTime.value, 1006)),
+      ErrorValue: '1006',
+      Result: '不合格',
+    });
  }
-  if (activeIndex.value > 3) {
-    devEndTime.value = formatDateTime(new Date());
-    finishTime.value = formatDateTime(new Date());
  
-    // activities.value.push({
-    //   content: '设备最晚上送时刻',
-    //   timestamp: '2018-04-03 20:46',
-    //   color: '#0bbd87',
-    //   icon: SuccessFilled,
-    //   size: 'large',
-    // });
-    // activities.value.push({
-    //   content: '检测结束',
-    //   timestamp: '2018-04-03 20:46',
-    //   color: '#0bbd87',
-    //   icon: SuccessFilled,
-    //   size: 'large',
-    // });
-  }
 })
 const emit = defineEmits(['update:testStatus']);
 //监听sn
@@ -313,11 +339,40 @@ watch(ts, function (newValue, oldValue) {
  display: flex;
  flex-direction: row;
  /* 横向排列 */
-  justify-content: flex-end;
+  justify-content: space-between;
  /* margin-bottom: 10px; */

 }

+.error-dsc{
+  display: flex;
+  flex-direction: row;
+  justify-content: center; 
+  align-items: baseline; 
+}
+
+.green-div{
+  width: 20px;
+  height: 14px;
+  border-radius: 4px;
+  background-color: #67C23A;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.red-div{
+  width: 20px;
+  height: 14px;
+  border-radius: 4px;
+  background-color: #F56C6C;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.right-content{
+  height: 440px;
+}
+
 /* width: 100%;
      height: auto;
      background: #fff;
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/frontend/src/views/home/tabs/dashboard.vue
@@ -30,7 +30,7 @@
          <el-collapse-item title="检测进度展示" name="1"> -->
    <div class="container_pieShow">
        <el-collapse model-value="1" accordion @change="handleCollapseChange">
-            <el-collapse-item title="&nbsp&nbsp&nbsp&nbsp检测计划统计" name="1">
+            <el-collapse-item title="&nbsp&nbsp&nbsp&nbsp&nbsp检测计划统计" name="1">
        <!-- 饼图 -->
        <div class="container_charts">
          <div class="charts_info" ref="chartsInfoRef">
@@ -636,6 +636,11 @@ onUnmounted(() => {
    }
  }
 }
+:deep(.el-collapse-item__header){
+  color: var(--el-color-primary);
+  font-size: 14px;
+  font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
+}
 :deep(.el-collapse-item__conten){
  // background-color:#f6f6f6;
  padding-bottom: 0px !important;