样式微调

2024-11-14 21:03:51 +08:00
parent fddbb8c9dc
commit 36b03efd0a
4 changed files with 100 additions and 194 deletions
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/frontend/src/views/home/tabs/dashboard.vue
@@ -357,6 +357,8 @@ onMounted(() => {
      background: #fff;
      border-radius: 4px;
      display: flex;
+      // justify-content: space-around;
+      // justify-content: space-evenly;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
@@ -366,7 +368,7 @@ onMounted(() => {
      .function_item {
        flex: none;
        width: 6%;
-        height: 50px;
+        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
@@ -377,8 +379,8 @@ onMounted(() => {
        padding: 0px 30px;

        .item_img {
-          width: 60px;
-          height: 60px;
+          width: 30px;
+          height: 30px;
          border-radius: 50%;
          // background-color: #607eab;
          display: flex;
@@ -386,7 +388,7 @@ onMounted(() => {
          justify-content: center;
          margin-right: 5px;
          img {
-            width: 40px;
+            width: 20px;
            height: auto;
          }
        }
@@ -403,7 +405,7 @@ onMounted(() => {

        .item_text {
          p {
-            width: 40px;
+            width: 80px;
            margin: 0;
            font-weight: 800;
            color: var(--el-color-primary);
--- a/frontend/src/views/plan/autoTest/index.vue
+++ b/frontend/src/views/plan/autoTest/index.vue
@@ -20,7 +20,7 @@
        >返回首页</el-button
      >

-      <el-select v-model="currentErrSysID" placeholder="请选择误差体系" autocomplete="off">
+      <!-- <el-select v-model="currentErrSysID" placeholder="请选择误差体系" autocomplete="off">
        <el-option
                  v-for="plan in testErrSystDataList"
                  :key="plan.id"
@@ -29,7 +29,7 @@
        </el-option>
      </el-select>

-      <el-button type="primary" @click="handlePreTest">重新计算</el-button>
+      <el-button type="primary" @click="handlePreTest">重新计算</el-button> -->
    </div>
    <div class="test_bot">
      <div class="test_left">
@@ -117,8 +117,12 @@
            </p>
          </div>
          <div class="right_device_status">
+            <div v-if="beforeTest"> 
+              <span class="empty__div">暂无数据</span>
+            </div>
            <div
              class="status_info"
+              v-if="!beforeTest"
              v-for="(item, index) in deviceTestList"
              :key="index"
            >
@@ -139,7 +143,10 @@
        </div>
      </div>
      <!-- 右侧状态加载 -->
-      <div class="right_status" ref="statusRef">
+      <div class="right_status" v-if="beforeTest">
+         <span class="empty__div">暂无数据</span>
+      </div>
+      <div class="right_status" ref="statusRef" v-if="!beforeTest">
        <!-- ,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 }} -{{
@@ -183,7 +190,8 @@ const currentErrSysID = ref("2")
 const treeRef = ref<any>();
 const PopupVisible = ref(false)
 const showDataPopup = ref()
-
+const beforeTest = ref(true)
+const testModel = ref("")
 //定义与预检测配置数组
 const detectionOptions = ref([
  {
@@ -314,17 +322,26 @@ const preTestData = [
            ]
        }
      ]
-// 弹出检测结果页面
+// 弹出数据查询页面
 const handleClick = (item,index,vvs) => {
  //const data = "检测脚本为："+item.name+";被检设备为："+item.children.value.devID+";被检通道序号为："+ item.children.monitorIndex;
  console.log(vvs,index,item.name,item.children)
  PopupVisible.value = true
  showDataPopup.value.open()
 };
+let currentIndex = 0;
+let totalNum = 0;
+
 //启动预检测
 const handlePreTest = () => {
  ElMessage.success("启动预检测");
+  currentIndex = 0;
+  percentage.value = 0;
+  testModel.value = "preTest"
+  beforeTest.value = false;
  getTreeData(preTestData)
+  totalNum = preTestData[0].children.length;
+  interValTest();
  
  // let count = 0;
  // if (timer) {
@@ -352,8 +369,15 @@ const handlePreTest = () => {
 //进入检测流程
 const handleAutoTest = () => {
  ElMessage.success("启动正式检测");
-
+  currentIndex = 0;
+  percentage.value = 0;
+  testModel.value = "Test"
+  beforeTest.value = false;
  getTreeData(data)
+  // totalNum = data.length;
+  totalNum = 10;
+
+  interValTest();
 };
 //返回设备列表
 const handleBackDeviceList = () => {
@@ -362,159 +386,12 @@ const handleBackDeviceList = () => {
  });
 };

-// 表格配置项
-const columns = reactive<ColumnProps<User.ResUserList>[]>([
-  { type: "selection", fixed: "left", width: 70 },
-  //   { dictType: "sort", label: "Sort", width: 80 },
-  //   { dictType: "expand", label: "Expand", width: 85 },
-  {
-    prop: "planName",
-    label: "计划名称",
-    width: 120,
-  },
-  {
-    prop: "checkMode",
-    label: "检测模式",
-    width: 120,
-    render: (scope: any) => {
-      return scope.row.checkMode == 0
-        ? "模拟式"
-        : scope.row.checkMode == 1
-          ? "对比式"
-          : scope.row.checkMode == 2
-            ? "数字式"
-            : scope.row.checkMode;
-    },
-  },
-  {
-    prop: "checkFrom",
-    label: "检测源",
-    width: 120,
-    render: (scope: any) => {
-      return scope.row.checkFrom == 0
-        ? "标准源-福禄克-6100A"
-        : scope.row.checkFrom == 1
-          ? "标准源-昂立-PF2"
-          : scope.row.checkFrom == 2
-            ? "高精度设备-PQS882-1"
-            : scope.row.checkFrom;
-    },
-  },
-  {
-    prop: "numberFromName",
-    label: "源名称",
-    render: (scope: any) => {
-      return scope.row.numberFromName == 0
-        ? "分钟统计数据最大值"
-        : scope.row.numberFromName == 1
-          ? "分钟统计数据最小值"
-          : scope.row.numberFromName == 2
-            ? "分钟统计数据CP95值"
-            : scope.row.numberFromName;
-    },
-  },
-  {
-    prop: "checkExe",
-    label: "检测脚本",
-    width: 120,
-    render: (scope: any) => {
-      return scope.row.checkExe == 0
-        ? "国网入网检测脚本（单影响量-模拟式）"
-        : scope.row.checkExe == 1
-          ? "国网入网检测脚本"
-          : scope.row.checkExe == 2
-            ? "/"
-            : scope.row.checkExe;
-    },
-  },
-  {
-    prop: "wctx",
-    label: "误差体系",
-    width: 120,
-    render: (scope: any) => {
-      return scope.row.wctx == 0
-        ? "Q/GDW 1650.2- 2016"
-        : scope.row.wctx == 1
-          ? "Q/GDW 10650.2 - 2021"
-          : scope.row.wctx == 2
-            ? "/"
-            : scope.row.wctx;
-    },
-  },
-  {
-    prop: "checkStatus",
-    label: "检测状态",
-    width: 120,
-    render: (scope: any) => {
-      return scope.row.checkStatus == 1
-        ? "未检测"
-        : scope.row.checkStatus == 2
-          ? "检测中"
-          : scope.row.checkStatus == 3
-            ? "检测完成"
-            : scope.row.checkStatus;
-    },
-  },
-  {
-    prop: "checkReport",
-    label: "检测报告",
-    width: 120,
-    render: (scope: any) => {
-      return scope.row.checkReport == 1
-        ? "未生成"
-        : scope.row.checkReport == 2
-          ? "部分生成"
-          : scope.row.checkReport == 3
-            ? "全部生成"
-            : scope.row.checkReport;
-    },
-  },
-  {
-    prop: "checkResult",
-    label: "检测结果",
-    width: 120,
-    render: (scope: any) => {
-      return scope.row.checkReport == 1
-        ? "/"
-        : scope.row.checkReport == 2
-          ? "符合"
-          : scope.row.checkReport == 3
-            ? "不符合"
-            : scope.row.checkReport;
-    },
-  },
-  // { prop: "operation", label: "操作", fixed: "right", width: 250 },
-]);
-
-
 const getTreeData = (val) => {
  treeRef.value && treeRef.value.getTreeData(val);
 };

-// ProTable 实例
-const proTable = ref<ProTableInstance>();
-
-// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
-const initParam = reactive({ type: 1, pageNum: 1, pageSize: 10 });
-
-// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
-// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
 const tableList = ref([]);
-const dataCallback = (data: any) => {
-  return {
-    list: data || data.data || data.list,
-    total: data.length || data.total, //total
-  };
-};
-// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
-// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
-const getTableList = (params: any) => {
-  let newParams = JSON.parse(JSON.stringify(params));
-  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
-  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
-  delete newParams.createTime;
-  return getPlanList(newParams);
-};
+
 const percentage = ref(0);

 const customColors = [
@@ -532,17 +409,45 @@ const customColors = [
 ];
 //加载进度条
 const refreshProgress = () => {
+
+  console.log(currentIndex,totalNum)
  if (percentage.value < 100) {
-    percentage.value += 1;
-    num1.value += 1001;
-    num2.value -= 1001;
+    percentage.value = Math.trunc(currentIndex/totalNum) * 100;
+
  } else {
-    percentage.value = 0;
-    num1.value = 9999;
-    num2.value = 162001;
-    statusList.value = [];
-    deviceTestList.value = [];
-    statusId.value = 0;
+
+    clearInterval(timer.value)
+    clearInterval(statusTimer.value)
+
+    let strTemp = ""
+    if(testModel.value === "preTest")
+      strTemp = "预检测过程全部结束"
+    else if(testModel.value === "test")
+      strTemp = "正式检测全部结束"
+
+    statusId.value++;
+    statusList.value.push({
+    id: statusId.value,
+    remark: strTemp,
+    status: 0,
+  });
+  statusList.value.map((item: any, index: any) => {
+      if (index == statusList.value.length - 1) {
+        item.status = 1;
+      } else {
+        item.status = 0;
+      }
+    });
+
+    if(testModel.value === "preTest")
+      ElMessage.success("预检测过程全部结束")
+    else if(testModel.value === "test")
+      ElMessage.success("正式检测全部结束,你可以停留在此页面查看检测结果，或返回首页进行复检、报告生成和归档等操作")
+
+    // percentage.value = 0;
+    // statusList.value = [];
+    // deviceTestList.value = [];
+    // statusId.value = 0;
  }
 };

@@ -553,6 +458,7 @@ const deviceTestList = ref<any>([]);
 //检测结果数据
 const deviceList = ref<any>([]);
 //前一个页面带过来的设备数据
+// const deviceData = ref<any>([]);
 const deviceData = ref([
  {
    id: 0,
@@ -591,6 +497,8 @@ const deviceData = ref([
    monitorIndex:1,
  },
 ]);
+
+
 const interValTest = () => {
  timer.value = setInterval(() => {
    deviceTestList.value.push({
@@ -600,9 +508,10 @@ const interValTest = () => {
      // status: Math.floor(Math.random() * 4),
    });
    // console.log(deviceTestList.value,11111);
-    
+    currentIndex++;
    refreshProgress();
  }, 2000);
+
  statusTimer.value = setInterval(() => {
    getStatusList();
    statusList.value.map((item: any, index: any) => {
@@ -614,7 +523,7 @@ const interValTest = () => {
    });
  }, 2000);
 };
-interValTest();
+
 //暂停检测
 const isPause = ref<boolean>(false);
 const handlePauseTest = () => {
@@ -630,6 +539,7 @@ const handlePauseTest = () => {
 const handleFinishTest = () => {
  ElMessage.success("完成检测");
 };
+
 // 表格拖拽排序
 const sortTable = ({
  newIndex,
@@ -639,25 +549,10 @@ const sortTable = ({
  oldIndex?: number;
 }) => {
  console.log(newIndex, oldIndex);
-  console.log(proTable.value?.tableData);
  ElMessage.success("修改列表排序成功");
 };
-const num = ref(0),
-  num1 = ref(0),
-  num2 = ref(0);
-const allUploadNum = useTransition(num, {
-  duration: 1500,
-});
-const isUploadNum = useTransition(num1, {
-  duration: 1500,
-});
-const notUploadNum = useTransition(num2, {
-  duration: 1500,
-});

-num.value = 172000;
-num1.value = 9999;
-num2.value = num.value - num1.value;
+
 const statusList: any = ref([]);
 let statusId = ref(0);
 const statusRef = ref();
@@ -680,6 +575,17 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
+
+ 
+.empty__div {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--el-text-color-secondary);
+    font-size: var(--el-font-size-base);
+}
+
 .test {
  width: 100%;
  height: 100%;
@@ -782,6 +688,7 @@ onMounted(() => {
          }
        }
        .right_device_status {
+          position: relative;
          width: 100%;
          flex: 1;
          .status_info {
@@ -802,6 +709,7 @@ onMounted(() => {
      }
    }
    .right_status {
+      position: relative;
      width: 100%;
      height: 150px;
      overflow: auto;
--- a/frontend/src/views/plan/planList/components/moreButtons.vue
+++ b/frontend/src/views/plan/planList/components/moreButtons.vue
--- a/frontend/src/views/plan/planList/index.vue
+++ b/frontend/src/views/plan/planList/index.vue
@@ -95,7 +95,7 @@ import type { Plan } from '@/api/plan/interface'
 import planPopup from '@/views/plan/planList/components/planPopup.vue' // 导入子组件
 import DeviceOpen from '@/views/plan/planList/components/devPopup.vue'
 import SourceOpen from '@/views/plan/planList/components/sourcePopup.vue'
-import Temp from './components/Temp.vue'
+import moreButtons from './components/moreButtons.vue'
 import devTransfer from './components/devTransfer.vue'
 import sourceTransfer from './components/sourceTransfer.vue'
 import { useViewSize } from '@/hooks/useViewSize'
@@ -105,7 +105,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import type { Action } from 'element-plus'
 import type { ErrorSystem } from '@/api/error/interface'
 import ErrorStandardDialog from '@/views/machine/errorSystem/components/ErrorStandardDialog.vue' // 导入子组件
-import { isVisible } from 'element-plus/es/utils'
+

 const dictStore = useDictStore()
 // 定义包含和排除的单位
@@ -178,12 +178,8 @@ const columns = reactive<ColumnProps<Plan.PlanAndSourceBO>[]>([
              {scope.row.testSourceName}
            </el-button>
            
-            <Temp isShow={isVisible(scope.row)} ></Temp>
+            <moreButtons isShow={isVisible(scope.row)} ></moreButtons>
          </div> 
-          // isVisible(scope.row)
-          // <Temp { visible: scope.row.testSourceList.length > 1 }></Temp>
-          // <Temp :visible='{scope.row.testSourceList.length > 1}'></Temp>
-          // <Temp :visible="scope.row.testSourceList.length > 1"></Temp>

      )
    },