调整检测首页布局；根据不同的功能，实现不同的表格展示

2024-11-14 11:45:25 +08:00
parent 65cb7826d3
commit 8f89252d8b
5 changed files with 136 additions and 36 deletions
--- a/frontend/src/api/plan/planData.ts
+++ b/frontend/src/api/plan/planData.ts
@@ -184,7 +184,7 @@ const planData = ref<Plan.PlanAndSourceBO[]>([
    'id': '2',
    'name': '检测计划2',
    'pattern':'1',
-    "testSourceName":'高精度设备-PQV520-1,高精度设备-PQV520-2',
+    "testSourceName":'高精度设备-PQV520-1',
    'father_Plan_Id':'1',
    'dataSource_Id':'2',
    'script_Id':'2',
@@ -193,7 +193,7 @@ const planData = ref<Plan.PlanAndSourceBO[]>([
    'report_State':'2',
    'result':'0',
    "testSourceList":[
-      '高精度设备-PQV520-1','高精度设备-PQV520-2',
+      '高精度设备-PQV520-2','高精度设备-PQV520-3','高精度设备-PQV520-3'
    ]
  },
  {
--- a/frontend/src/views/home/components/table.vue
+++ b/frontend/src/views/home/components/table.vue
@@ -71,11 +71,11 @@
            >

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

            <el-button type="primary" v-if="form.activeTabs === 4"
-              >设备批量归档</el-button
+              >批量归档</el-button
            >
          </el-form-item>
        </el-form>
@@ -86,9 +86,40 @@
        type="primary"
          link
          :icon="View"
-          @click="openDrawer('报告查看', scope.row)"
+          @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 === 1">
+          <el-dropdown trigger='click'>
+            <el-button link type='primary' :icon="View" 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
+        type="primary"
+          link
+          :icon="EditPen"
+          @click="openDrawer('生成', scope.row)"
          v-if="form.activeTabs === 3"
-          >报告查看</el-button
+          >生成</el-button
+        >
+        <el-button
+        type="primary"
+          link
+          :icon="EditPen"
+          @click="openDrawer('归档', scope.row)"
+          v-if="form.activeTabs === 4"
+          >归档</el-button
        >
        <el-button
        type="primary"
@@ -114,7 +145,7 @@
 import { useRouter } from "vue-router";
 import type { Device } from '@/api/device/interface'
 import { useHandleData } from "@/hooks/useHandleData";
-import { ElMessage, ElMessageBox } from "element-plus";
+import { ElMessage, ElMessageBox, ElLoading} from "element-plus";
 import ProTable from "@/components/ProTable/index.vue";
 import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
 import {
@@ -245,6 +276,7 @@ let checkResultList = reactive([
 //查询条件
 const form: any = ref({
  activeTabs: 0, //功能选择
+  activeChildTabs: 0,//子功能选择
  checkStatus: 0, //检测状态
  checkReportStatus: 0, //检测报告状态
  checkResult: 0, //检测结果
@@ -552,10 +584,11 @@ const changeStatus = async (row: User.ResUserList) => {
  proTable.value?.getTableList();
 };
 //顶部功能切换时修改activeTabs
-const changeActiveTabs = (val: number) => {
+const changeActiveTabs = (val: number,val2: number) => {
  form.value.activeTabs = val;
+  form.value.activeChildTabs= val2;
  tableHeaderInit(val)
-  console.log(form,val,666)
+  console.log(form,val,val2,666)
 };

 //根据当前功能，初始化表头下拉框中的默认值和禁用值
@@ -600,7 +633,7 @@ function tableHeaderInit(val: number) {
      disableCheckStatus("归档")
      disableCheckReportStatus("未生成报告")
      disablecheckResultList("未出结果")
-      operationShow.value = false;
+      operationShow.value = true;
    break;
    case 5://设备浏览
    operationShow.value = true;
@@ -663,14 +696,35 @@ const handleTest = () => {
  }
 };

+
 // 打开 drawer(新增、查看、编辑)
 const openDrawer = (title: string, row: any) => {
-  if (title === '报告查看')
-      console.log(title);
+  if (title === '查看')
+  {
+    console.log(title);
+    const link = document.createElement('a');
+    const fileUrl = 'G:/南网数研院非结构化数据生成程序MMS_JSON修改记录.docx'; // 文件路径
+    link.href = fileUrl;
+    link.target = '_blank'; // 在新标签页中打开
+    link.download = 'file.docx'; // 设置下载文件的名称
+    link.click();
+  }
      
    else if (title === '误差体系编辑')
    console.log(title);

+    if (title === '归档')
+    {
+      const loading = ElLoading.service({
+      lock: true,
+      text: '归档中...',
+      background: 'rgba(0, 0, 0, 0.7)',
+    })
+    setTimeout(() => {
+      loading.close()
+      ElMessage.success("归档成功");
+    }, 2000)
+    }
 }

 onMounted(() => {
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/frontend/src/views/home/tabs/dashboard.vue
@@ -112,7 +112,8 @@ import Table from "../components/table.vue";
 import { data } from "@/api/plan/static.json";
 const treeRef = ref();
 const form: any = ref({
-  activeTabs: 0, //功能选择
+  activeTabs: 0, //功能选择,例如报告生成
+  activeChildTabs: 0,//子功能选择,例如未检设备报告生成，或已检设备更换误差体系生成
  checkStatus: 0, //检测状态
  checkReportStatus: 0, //检测报告状态
  checkResult: 0, //检测结果
@@ -132,6 +133,7 @@ const handleChange = (val: string[]) => {
 const handleTabsChange = (val) => {
  form.value.activeTabs = 0;
  form.value.activeTabs = 3;
+  form.value.activeChildTabs = Number(val);
  console.log(val)
 }
 localStorage.setItem("color", "red");
@@ -207,7 +209,7 @@ watch(
  () => form.value,
  (val, oldVal) => {
    if (val) {
-      tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs);
+      tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs);
    }
  },
  {
@@ -219,7 +221,8 @@ watch(
  () => form.value,
  (val, oldVal) => {
    if (val) {
-      tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs);
+      tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs);
+      console.log(form.value.activeTabs,form.value.activeChildTabs);
    }
  },
  {
@@ -281,6 +284,7 @@ const planDetail = () => {
 const handleCheckFunction = (val: any) => {
  console.log("test",val);
  editableTabsValue.value = '0';
+  form.value.activeChildTabs = 0;
  tabsList.value.map((item: any, index: any) => {
    if (val == item.value) {
      item.checked = true;
@@ -293,7 +297,7 @@ const handleCheckFunction = (val: any) => {

  switch (val) {
    case 0://自动检测
-    tabLabel1.value = "自动检测";
+    tabLabel1.value = "设备检测";
    break;
    case 1://手动检测
    tabLabel1.value = "手动检测";
@@ -398,6 +402,7 @@ onMounted(() => {

        .item_text {
          p {
+            width: 40px;
            margin: 0;
            font-weight: 800;
            color: var(--el-color-primary);
--- a/frontend/src/views/plan/planList/components/temp.vue
+++ b/frontend/src/views/plan/planList/components/temp.vue
@@ -1,24 +1,55 @@
 <template>
-    <el-dropdown @command="handleCommand">
-      <span class="el-dropdown-link">
+  <div class="device-list-container">
+    <!-- :model-value="visible" -->
+    <el-dropdown @command="handleCommand"  >
+      <el-button link type='primary' class='table-operate'>
+        <div class='table-operate-text'>更多...</div>
+      </el-button>
+      <!-- <span class="el-dropdown-link">
        更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
-      </span>
+      </span> -->
      <template #dropdown>
        <el-dropdown-menu>
-          <el-dropdown-item command="a">高精度设备-PQV520-2</el-dropdown-item>
-          <el-dropdown-item command="b">高精度设备-PQV520-3</el-dropdown-item>
-          <el-dropdown-item command="c">高精度设备-PQV520-4</el-dropdown-item>
+          <el-dropdown-item command="高精度设备-PQV520-2">高精度设备-PQV520-2</el-dropdown-item>
+          <el-dropdown-item command="高精度设备-PQV520-3">高精度设备-PQV520-3</el-dropdown-item>
+          <el-dropdown-item command="高精度设备-PQV520-4">高精度设备-PQV520-4</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
-  </template>
+
+          <!-- 查看误差体系详细信息 -->
+          <ErrorStandardDialog
+        :visible='detail_dialogFormVisible'
+        :formData='detail_dialogForm'
+        :dialogTitle='detail_dialogTitle'
+        @update:visible='detail_dialogFormVisible = $event'
+    />
+  </div>
+
+</template>
  
  <script lang="ts" setup>
  import { ElMessage } from 'element-plus'
  import { ArrowDown } from '@element-plus/icons-vue'
+  import ErrorStandardDialog from '@/views/machine/errorSystem/components/ErrorStandardDialog.vue' // 导入子组件
+import type { ErrorSystem } from '@/api/error/interface'
  
+  const detail_dialogFormVisible = ref(false)
+  const detail_dialogTitle = ref('Q/GDW 10650.2-2021 误差体系')
+  const detail_dialogForm = ref<ErrorSystem.Error_detail>({
+  measured: '',//被测量
+  deviceLevel: '',//检测装置级别
+  measurementType: '',
+  condition: '',//测量条件
+  maxErrorValue: '',//最大误差
+})
+
+// const props = defineProps<{
+//    visible: boolean;
+//  }>();
  const handleCommand = (command: string | number | object) => {
-    ElMessage(`click on item ${command}`)
+    detail_dialogTitle.value = command as string;
+    detail_dialogFormVisible.value = true // 显示对话框
  }
  </script>
  <style scoped>
--- a/frontend/src/views/plan/planList/index.vue
+++ b/frontend/src/views/plan/planList/index.vue
@@ -45,8 +45,14 @@
      </template>
    </ProTable>

-      @update:visible="dialogFormVisible = $event"/>
-
+      <!-- 向计划导入/导出设备对话框 -->
+      <planPopup     
+      :visible="dialogFormVisible"
+      :formData="dialogForm"
+       :dialogTitle="dialogTitle"
+       :is-read-only="isReadOnly"
+      @update:visible="dialogFormVisible = $event"
+    />
    <!-- 查看误差体系详细信息 -->
    <ErrorStandardDialog
        :visible='detail_dialogFormVisible'
@@ -89,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 Temp from './components/Temp.vue'
 import devTransfer from './components/devTransfer.vue'
 import sourceTransfer from './components/sourceTransfer.vue'
 import { useViewSize } from '@/hooks/useViewSize'
@@ -142,6 +148,14 @@ const detail_dialogForm = ref<ErrorSystem.Error_detail>({
  maxErrorValue: '',//最大误差
 })

+  //   <el-button
+  //   v-for="(button, index) in scope.row.testSourceList"
+  //   :key="index"
+  //   @click="handleClick(button)"
+  // >
+  //   {{ button.text }}
+  // </el-button>
+
 // 表格配置项
 const columns = reactive<ColumnProps<Plan.PlanAndSourceBO>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
@@ -158,19 +172,15 @@ const columns = reactive<ColumnProps<Plan.PlanAndSourceBO>[]>([
    width: 300,
    render: scope => {
      return (
-          //   <el-button
-          //   v-for="(button, index) in scope.row.testSourceList"
-          //   :key="index"
-          //   @click="handleClick(button)"
-          // >
-          //   {{ button.text }}
-          // </el-button>
          <div class='flx-flex-start'>
            <el-button type='primary' link onClick={() => showData(scope.row.testSourceName)}>
              {scope.row.testSourceName}
            </el-button>
-            <temp></temp>
+            <Temp></Temp>
          </div> 
+          // <Temp { visible: scope.row.testSourceList.length > 1 }></Temp>
+          // <Temp :visible='{scope.row.testSourceList.length > 1}'></Temp>
+          // <Temp :visible="scope.row.testSourceList.length > 1"></Temp>

      )
    },