修改检测入口、预检测、正式检测页面

2024-11-12 20:35:12 +08:00
parent 4b5498ad49
commit 6a5c783419
13 changed files with 1070 additions and 115 deletions
--- a/frontend/src/views/home/components/changeErrSysPopup.vue
+++ b/frontend/src/views/home/components/changeErrSysPopup.vue
@@ -0,0 +1,136 @@
+<template>
+    <!-- 基础信息弹出框 -->
+  <el-dialog :model-value="dialogVisible" title="误差体系编辑" v-bind="dialogSmall" @close="handleCancel" width="500" draggable>
+    <div>
+        <el-form :model="data" 
+                  ref='formRuleRef'
+                  :rules='rules'
+                  >
+        <el-form-item label="设备名称" prop='name' :label-width="100">
+          <el-input v-model="data.name" placeholder="请输入名称" autocomplete="off" />
+        </el-form-item>
+
+        <el-form-item label="选择误差体系" prop='type' :label-width="100">
+          <el-select v-model="data.type" placeholder="请选择误差体系" autocomplete="off">
+          <el-option
+            v-for="item in dictStore.getDictData('roleType')"
+            :key="item.id"
+            :label="item.label"
+            :value="item.code"
+          />
+          </el-select>
+          <el-button type="primary" @click="handleOK">
+          生成报告
+        </el-button>
+        </el-form-item>
+
+        <!-- <el-form-item label="描述" prop='remark' :label-width="100">
+          <el-input v-model="data.remark" :rows="2" type="textarea" placeholder="请输入备注" autocomplete="off" />
+        </el-form-item> -->
+      </el-form>
+      </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleOK">
+          保存
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  </template>
+  
+  <script lang="ts" setup>
+  import { FormInstance,FormItemRule } from 'element-plus'
+  import { ProTableInstance } from '@/components/ProTable/interface'
+  import { ref,computed  } from 'vue'
+  import { Role } from '@/api/role/interface'
+  import {dialogSmall} from '@/utils/elementBind'
+  import { useDictStore } from '@/stores/modules/dict'
+  import {
+    addRole,
+    editRole,
+  } from '@/api/role/role'
+
+  const dictStore = useDictStore()
+
+  const {dialogVisible,title,data,openType,getTableList}  = defineProps<{
+    dialogVisible:boolean;
+    title:string;
+    openType:string;
+    getTableList:Function;
+    data:{
+      id?: string;     //角色类型ID
+      name: string;   //角色类型名称
+      code: string;   //角色代码
+      type: number;
+      remark:string;   //角色描述
+    }
+  }>();
+
+
+  //定义规则
+  const formRuleRef = ref<FormInstance>()
+  //定义校验规则
+  const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
+    name: [{ required: true, message: '名称必填！', trigger: 'blur' }],
+    code: [{ required: true, message: '编码必填！', trigger: 'blur' }],
+  })
+
+  const emit = defineEmits<{
+  (e:'update:visible',value:boolean):void;
+  }>();
+
+  const handleCancel = () => {
+    emit('update:visible',false)
+  }
+  
+  const handleOK = () => {
+
+    ElMessage.info('角色数据提交')
+    try {
+      formRuleRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        // 将表单数据转为json,发送到后端
+        // let confirmFormData = JSON.parse(JSON.stringify(form.value))
+        // console.log(confirmFormData)
+        if(openType === "add")
+        {
+          addRole(data).then(res => {
+            // if(res.code === "200")
+            // {
+              ElMessage.success(res.message)
+              getTableList()
+            // }
+            // else
+            //   ElMessage.error(res.message)
+          })
+        }
+          
+        if(openType === "edit")
+        {
+          editRole(data).then(res => {
+            // if(res.code === "200")
+            // {
+              ElMessage.success(res.message)
+              getTableList()
+            // }
+            // else
+            //   ElMessage.error(res.message)
+          })
+        }
+        
+        emit('update:visible',false)
+      } else {
+        ElMessage.error('表单验证失败！')
+        
+      }
+
+    })
+  } catch (error) {
+    console.error('验证过程中发生错误', error)
+  }
+}
+  
+  </script>
--- a/frontend/src/views/home/components/table.vue
+++ b/frontend/src/views/home/components/table.vue
@@ -81,29 +81,31 @@
        </el-form>
      </template>
      <!-- 表格操作 -->
-      <!-- <template #operation="scope">
+      <template #operation="scope">
        <el-button
-          dictType="primary"
+        type="primary"
          link
          :icon="View"
-          @click="openDrawer('查看', scope.row)"
-          >查看</el-button
+          @click="openDrawer('报告查看', scope.row)"
+          v-if="form.activeTabs === 3"
+          >报告查看</el-button
        >
        <el-button
-          dictType="primary"
+        type="primary"
          link
          :icon="EditPen"
-          @click="openDrawer('编辑', scope.row)"
-          >导出</el-button
+          @click="openDrawer('误差体系编辑', scope.row)"
+          v-if="form.activeTabs === 5"
+          >误差体系编辑</el-button
        >
-        <el-button
+        <!-- <el-button
          dictType="primary"
          link
          :icon="Delete"
          @click="deleteAccount(scope.row)"
          >删除</el-button
-        >
-      </template> -->
+        > -->
+      </template>
    </ProTable>
  </div>
 </template>
@@ -116,7 +118,7 @@ import { ElMessage, ElMessageBox } from "element-plus";
 import ProTable from "@/components/ProTable/index.vue";
 import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
 import {
-  Search,
+  Search,View,EditPen
 } from "@element-plus/icons-vue";
 import { getPlanList } from "@/api/plan/planList";
 import deviceDataList from '@/api/device/deviceData'
@@ -129,7 +131,7 @@ const tableHeight = ref(0);
 console.log(window.innerHeight, "+++++++++");
 tableHeight.value = window.innerHeight - 630;
 const deviceData = deviceDataList.plan_devicedata
-
+const operationShow = ref(false);
 //下拉框数据
 //检测状态数据
 let checkStatusList = reactive([
@@ -327,7 +329,7 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
      label: '归档状态',
      minWidth: 130,
    },
-    // { prop: 'operation', label: '操作', fixed: 'right', minWidth: 200 },
+    { prop: 'operation', label: '操作', fixed: 'right', minWidth: 150 ,isShow: operationShow},
  ])

 // 表格配置项
@@ -567,36 +569,41 @@ function tableHeaderInit(val: number) {
      form.value.checkResult = 0;//检测结果默认为未出结果
      disableCheckStatus("检测中")
      disableCheckStatus("归档")
+      operationShow.value = false;
      break;
    case 2://设备复检
      form.value.checkStatus = 2;//检测状态默认为检测完成
      form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
      form.value.checkResult = 1;//检测结果默认为不合格
-      disableCheckStatus("未检")
+      disableCheckStatus("未检测")
      disableCheckStatus("检测中")
      disableCheckStatus("归档")
      disablecheckResultList("未出结果")
+      operationShow.value = false;
    break;
    case 3://报告生成
      form.value.checkStatus = 2;//检测状态默认为检测完成
      form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
      form.value.checkResult = 2;//检测结果默认为合格
-      disableCheckStatus("未检")
+      disableCheckStatus("未检测")
      disableCheckStatus("检测中")
      disableCheckStatus("归档")
      disablecheckResultList("未出结果")
+      operationShow.value = true;
    break;
    case 4://设备归档
      form.value.checkStatus = 2;//检测状态默认为检测完成
      form.value.checkReportStatus = 1;//检测报告状态默认为已生成报告
      form.value.checkResult = 2;//检测结果默认为合格
-      disableCheckStatus("未检")
+      disableCheckStatus("未检测")
      disableCheckStatus("检测中")
      disableCheckStatus("归档")
      disableCheckReportStatus("未生成报告")
      disablecheckResultList("未出结果")
+      operationShow.value = false;
    break;
-    case 5://报告浏览
+    case 5://设备浏览
+    operationShow.value = true;
    break;
  }
 }
@@ -656,6 +663,16 @@ const handleTest = () => {
  }
 };

+// 打开 drawer(新增、查看、编辑)
+const openDrawer = (title: string, row: any) => {
+  if (title === '报告查看')
+      console.log(title);
+      
+    else if (title === '误差体系编辑')
+    console.log(title);
+
+}
+
 onMounted(() => {
  console.log(proTable.value?.tableData);
 });
--- a/frontend/src/views/home/components/tree.vue
+++ b/frontend/src/views/home/components/tree.vue
@@ -53,6 +53,9 @@ const getTreeData = (val: any) => {
 }
 const filterText = ref('')
 const treeRef = ref()
+const {updateSelectedTreeNode}  = defineProps<{
+    updateSelectedTreeNode:Function;
+  }>();
 watch(
  () => searchForm.value.planName,
  (val) => {
@@ -64,6 +67,7 @@ watch(
 )
 const handleNodeClick = (data) => {
  console.log(data)
+  updateSelectedTreeNode()
 }
 const filterNode = (value: string, data) => {
  if (!value) return true
@@ -110,12 +114,12 @@ defineExpose({ getTreeData })
  .tree_container {
    flex: 1;
    overflow-y: auto;
-    // width: 100%;
-    // overflow-x: auto;
+    width: 100%;
+    overflow-x: auto;

    .el-tree {
      height: 100%;
-      // width: 2000px;
+      width: 100%;
    }
  }
 }
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/frontend/src/views/home/tabs/dashboard.vue
@@ -2,7 +2,7 @@
 <template>
  <div class="static">
    <div class="left_tree">
-      <tree ref="treeRef" />
+      <tree ref="treeRef" :updateSelectedTreeNode="getPieData || (() => {})"/>
    </div>
    <!-- <span class="new_span">测试scss颜色</span> -->
    <div class="right_container">
@@ -25,61 +25,82 @@
          </div>
        </div>
      </div>
-      <!-- 饼图 -->
-      <div class="container_charts">
-        <div class="charts_info">
-          <pie
-            :customData="{
-              title: '检测状态',
-              textAlign: 'right',
-            }"
-            :legendData="{
-              icon: 'circle',
-              left: 'left',
-            }"
-            :chartsData="chartsData1"
-            ref="pieRef1"
-          ></pie>
-        </div>
-        <div class="charts_info">
-          <pie
-            :customData="{
-              title: '检测结果',
-              textAlign: 'right',
-            }"
-            :legendData="{
-              icon: 'circle',
-              left: 'left',
-            }"
-            :chartsData="chartsData2"
-            ref="pieRef2"
-          ></pie>
-        </div>
-        <div class="charts_info">
-          <pie
-            :customData="{
-              title: '报告状态',
-              textAlign: 'right',
-              label: {
-                normal: {
-                  position: 'inner',
+
+        <el-collapse v-model="activeNames" @change="handleChange">
+          <el-collapse-item title="检测进度展示" name="1">
+
+        <!-- 饼图 -->
+        <div class="container_charts">
+          <div class="charts_info">
+            <pie
+              :customData="{
+                title: '检测状态',
+                textAlign: 'right',
+              }"
+              :legendData="{
+                icon: 'circle',
+                left: 'left',
+              }"
+              :chartsData="chartsData1"
+              ref="pieRef1"
+            ></pie>
+          </div>
+          <div class="charts_info">
+            <pie
+              :customData="{
+                title: '检测结果',
+                textAlign: 'right',
+              }"
+              :legendData="{
+                icon: 'circle',
+                left: 'left',
+              }"
+              :chartsData="chartsData2"
+              ref="pieRef2"
+            ></pie>
+          </div>
+          <div class="charts_info">
+            <pie
+              :customData="{
+                title: '报告状态',
+                textAlign: 'right',
+                label: {
+                  normal: {
+                    position: 'inner',
+                  },
                },
-              },
-            }"
-            :legendData="{
-              icon: 'circle',
-              left: 'left',
-            }"
-            :chartsData="chartsData3"
-            ref="pieRef3"
-          ></pie>
+              }"
+              :legendData="{
+                icon: 'circle',
+                left: 'left',
+              }"
+              :chartsData="chartsData3"
+              ref="pieRef3"
+            ></pie>
+          </div>
        </div>
-      </div>
+
+          </el-collapse-item>
+        </el-collapse>
+
+  <el-tabs type="border-card" @tab-change="handleTabsChange" v-model="editableTabsValue">
+    <el-tab-pane :label="tabLabel1"> 
      <!-- 列表数据 -->
      <div class="container_table">
-        <Table ref="tableRef"></Table>
+        <Table ref="tableRef1"></Table>
+      </div>
+    </el-tab-pane>
+   
+    <el-tab-pane label="已检设备"  v-if="tabShow">
+      <!-- 列表数据 -->
+      <div class="container_table">
+        <Table ref="tableRef2"></Table>
+      </div>
+    </el-tab-pane>
+  </el-tabs>
+
+
      </div>
-    </div>
  </div>
 </template>
 <script lang="ts" setup>
@@ -100,6 +121,19 @@ const form: any = ref({
  manufacturer: 0, //制造厂商
 });
 const router = useRouter();
+const activeNames = ref(['2'])
+const tabShow= ref(false);
+const tabLabel1 = ref('自动检测')
+const editableTabsValue = ref('0')
+const handleChange = (val: string[]) => {
+  console.log(val)
+}
+
+const handleTabsChange = (val) => {
+  form.value.activeTabs = 0;
+  form.value.activeTabs = 3;
+  console.log(val)
+}
 localStorage.setItem("color", "red");
 //功能选择数据
 const tabsList = ref([
@@ -142,12 +176,25 @@ const tabsList = ref([
 ]);

 form.value.activeTabs = tabsList.value[0].value;
-const tableRef = ref();
+const tableRef1 = ref();
+const tableRef2 = ref();
 watch(
  () => form.value,
  (val, oldVal) => {
    if (val) {
-      tableRef.value && tableRef.value.changeActiveTabs(form.value.activeTabs);
+      tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs);
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+watch(
+  () => form.value,
+  (val, oldVal) => {
+    if (val) {
+      tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs);
    }
  },
  {
@@ -155,7 +202,6 @@ watch(
    deep: true,
  }
 );
-
 const pieRef1 = ref(),
  pieRef2 = ref(),
  pieRef3 = ref();
@@ -167,6 +213,8 @@ 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: "检测中" },
@@ -208,8 +256,8 @@ const planDetail = () => {
 };
 //功能选择css切换
 const handleCheckFunction = (val: any) => {
-  console.log("test1",val);
-  
+  console.log("test",val);
+  editableTabsValue.value = '0';
  tabsList.value.map((item: any, index: any) => {
    if (val == index) {
      item.checked = true;
@@ -217,6 +265,28 @@ const handleCheckFunction = (val: any) => {
      item.checked = false;
    }
  });
+
+  tabShow.value = false;
+
+  switch (val) {
+    case 0://自动检测
+    tabLabel1.value = "自动检测";
+    break;
+    case 1://手动检测
+    tabLabel1.value = "手动检测";
+    break;
+    case 2://设备复检
+    tabLabel1.value = "设备复检";
+    break;
+    case 3://报告生成
+    tabLabel1.value = "未检设备";
+    tabShow.value = true;
+    break;
+    case 4://设备归档
+    tabLabel1.value = "设备归档";
+    break;
+  }
+    
  form.value.activeTabs = val;
 };

@@ -331,9 +401,29 @@ onMounted(() => {
      }
    }

+    .el-collapse {
+      width: 100% !important;
+      // min-height: 200px !important;
+      height:auto;
+      background-color: #eee;
+      // display: flex;
+      // justify-content: space-between;
+      // padding-left: 2ch;
+      margin-bottom: 10px;
+      }
+
+      .el-collapse-item{
+        width: 100% !important;
+      // min-height: 200px !important;
+      height:100% !important;
+      background-color: #eee;
+      // display: flex !important;
+      }
+
    .container_charts {
      width: 100%;
-      min-height: 200px !important;
+      // min-height: 200px !important;
+      height:100%;
      background-color: #eee;
      display: flex;
      justify-content: space-between;
@@ -348,10 +438,15 @@ onMounted(() => {
      }
    }

+    .el-tabs{
+      width: 100% !important;
+      border-radius: 4px;
+    }
+
    .container_table {
      // width: 100%;
      flex: 1 !important;
-      height: calc(100vh - 360px);
+      height: calc(100vh - 360px - 100px);
      border-radius: 4px;
      width: 100% !important;
      // display: none;