标准设备，比对模式被检设备

frontend/src/views/plan/planList/components/chidrenPlan.vue

@@ -0,0 +1,330 @@
+<!--单列-->
+<template>
+  <el-dialog
+    class="table-box"
+    v-model="dialogVisible"
+    top="114px"
+    :style="{ height: height + 'px', maxHeight: height + 'px', overflow: 'hidden' }"
+    :title="title"
+    :width="width"
+    :modal="false"
+  >
+    <div
+      class="table-box"
+      :style="{ height: height - 64 + 'px', maxHeight: height - 64 + 'px', overflow: 'hidden' }"
+    >
+      <div style="margin-bottom: 20px">
+        <el-button type="primary" :icon="CirclePlus" @click="addTab(editableTabsValue)">新增计划</el-button>
+      </div>
+      <el-tabs
+        v-model="editableTabsValue"
+        type="card"
+        class="demo-tabs"
+        closable
+        @tab-remove="removeTab"
+      >
+        <el-tab-pane
+          v-for="item in editableTabs"
+          :key="item.name"
+          :label="item.title"
+          :name="item.name"
+        >
+          <ProTable
+            ref="proTable"
+            :columns="item.columns"
+            :data="item.tableData"
+            type="selection"
+            style="height: 750px;"
+          >
+            <!-- 表格 header 按钮 -->
+            <template #tableHeader="scope">
+               <el-button type="primary" :icon="Delete" v-if="item.name == '1'">
+                新增
+              </el-button>
+              <el-button type="primary" :icon="Delete" v-if="item.name != '1'">
+                导出检测方案
+              </el-button>
+               <el-button type="primary" :icon="Delete" >
+                导入检测结果
+              </el-button>
+              <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected">
+                批量移除
+              </el-button>
+            </template>
+            <!-- 表格操作 -->
+            <template #operation="scope">
+              <el-button type="primary" link :icon="Delete" v-if="item.name == '1'">删除</el-button>
+              <el-button type="primary" link :icon="Delete" v-if="item.name != '1'">移除</el-button>
+            </template>
+          </ProTable>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </el-dialog>
+</template>
+<script setup lang="tsx">
+import { TabPaneName } from 'element-plus'
+import { ref, reactive } from 'vue'
+import { CirclePlus, Delete } from '@element-plus/icons-vue'
+const sourceDataList = [
+    {
+      id: 'device1',
+      name:"电能质量监测仪A001",
+      type:"PQS-882A",
+      date:"2022-05-05",
+      channel: "2",
+      vol: "57.74",
+      cur: "5",
+      company: "南京灿能",
+      state: 0,
+      check:1,
+      },
+      {
+        id: 'device2',
+        name:"电能质量监测仪A002",
+        type:"PQS-882B4",
+        date:"2022-05-05",
+        channel: "4",
+        vol: "57.74",
+        cur: "5",
+        company: "南京灿能",
+        state: 1,
+        check:2,
+      },
+      {
+        id: 'device3',
+        name:"电能质量监测仪A003",
+        type:"PQS-882B4",
+        date:"2022-05-05",
+        channel: "4",
+        vol: "57.74",
+        cur: "5",
+        company: "南京灿能",
+        state: 1,
+        check:2,
+      },
+    ]
+const sourceDataList2 = [
+    {
+      id: 'device1',
+      name:"电能质量监测仪A003",
+      type:"PQS-882A",
+      date:"2022-05-05",
+      channel: "2",
+      vol: "57.74",
+      cur: "5",
+      company: "南京灿能",
+      state: 0,
+      check:1,
+      },
+    ]
+// 初始数据源
+const SourceData = sourceDataList
+const SourceData2 = sourceDataList2
+// 控制弹窗显示与标题
+const dialogVisible = ref(false)
+const title = ref('')
+const planTitle = ref('')
+// tab 相关
+let tabIndex = 2
+const editableTabsValue = ref('2')
+const editableTabs = ref([
+  {
+    title: planTitle,
+    name: '1',
+    content: 'Tab 1 content',
+    tableData: [...SourceData],
+    columns: [
+      { type: 'selection', fixed: 'left', width: 70 },
+      { type: 'index', fixed: 'left', width: 70, label: '序号' },
+      {
+        prop: 'name',
+        label: '名称',
+        search: { el: 'input' },
+        minWidth: 180,
+      },
+      {
+        prop: 'type',
+        label: '设备类型',
+        search: { el: 'select' },
+        minWidth: 150,
+      },
+      {
+        prop: 'date',
+        label: '出厂日期',
+        search: { el: 'select' },
+        minWidth: 150,
+      },
+      {
+        prop: 'channel',
+        label: '通道数',
+        search: { el: 'select' },
+        minWidth: 100,
+      },
+      {
+        prop: 'vol',
+        label: '额定电压V',
+        search: { el: 'select' },
+        minWidth: 150,
+      },
+      {
+        prop: 'cur',
+        label: '额定电流A',
+        search: { el: 'select' },
+        minWidth: 150,
+      },
+      {
+        prop: 'company',
+        label: '设备厂家',
+        search: { el: 'select' },
+        minWidth: 150,
+         
+      },
+      {
+        prop: 'state',
+        label: '分配状态',
+        search: { el: 'select' },
+        minWidth: 150,
+        render: () => {
+          return (
+            <el-tag type='success'  effect="dark">已分配</el-tag>
+          )
+        },
+      },
+      {
+        prop: 'check',
+        label: '检测状态',
+        search: { el: 'select' },
+        minWidth: 150,
+        render: (scope: { row: { check: number } }) => {
+          return (
+            scope.row.check === 0 ? <el-tag type='warning' effect="dark">未检</el-tag> : 
+            scope.row.check === 1 ? <el-tag type='danger'  effect="dark">检测中</el-tag> : 
+            <el-tag type='success'  effect="dark">检测完成</el-tag>
+          )
+        },
+      },
+      { prop: 'operation', label: '操作', fixed: 'right', width: 100 },
+    ],
+  },
+   {
+    title: '子计划',
+    name: '2',
+    content: 'Tab 2 content',
+    tableData: [...SourceData2],
+    columns: [
+      { type: 'selection', fixed: 'left', width: 70 },
+      { type: 'index', fixed: 'left', width: 70, label: '序号' },
+      {
+        prop: 'name',
+        label: '名称',
+        search: { el: 'input' },
+        minWidth: 180,
+      },
+      {
+        prop: 'type',
+        label: '设备类型',
+        search: { el: 'select' },
+        minWidth: 150,
+      },
+      {
+        prop: 'date',
+        label: '出厂日期',
+        search: { el: 'select' },
+        minWidth: 150,
+      },
+      {
+        prop: 'channel',
+        label: '通道数',
+        search: { el: 'select' },
+        minWidth: 100,
+      },
+      {
+        prop: 'vol',
+        label: '额定电压V',
+        search: { el: 'select' },
+        minWidth: 150,
+      },
+      {
+        prop: 'cur',
+        label: '额定电流A',
+        search: { el: 'select' },
+        minWidth: 150,
+      },
+      {
+        prop: 'company',
+        label: '设备厂家',
+        search: { el: 'select' },
+        minWidth: 150,
+         
+      },
+      {
+        prop: 'check',
+        label: '检测状态',
+        search: { el: 'select' },
+        minWidth: 150,
+        render: (scope: { row: { check: number } }) => {
+          return (
+            scope.row.check === 0 ? <el-tag type='warning' effect="dark">未检</el-tag> : 
+            scope.row.check === 1 ? <el-tag type='danger'  effect="dark">检测中</el-tag> : 
+            <el-tag type='success'  effect="dark">检测完成</el-tag>
+          )
+        },
+      },
+      { prop: 'operation', label: '操作', fixed: 'right', width: 100 },
+    ],
+  },
+])
+
+// 新增 tab 方法
+const addTab = (targetName: string) => {
+  const newTabName = `${++tabIndex}`
+  editableTabs.value.push({
+    title: '子计划',
+    name: newTabName,
+    content: 'New Tab content',
+    tableData: [], // 每个 tab 独立的数据副本
+    columns: [...editableTabs.value[0].columns], // 复用已有列配置
+  })
+  editableTabsValue.value = newTabName
+}
+
+// 删除 tab 方法
+const removeTab = (targetName: TabPaneName) => {
+  const tabs = editableTabs.value
+  let activeName = editableTabsValue.value
+  if (activeName === targetName) {
+    tabs.forEach((tab, index) => {
+      if (tab.name === targetName) {
+        const nextTab = tabs[index + 1] || tabs[index - 1]
+        if (nextTab) {
+          activeName = nextTab.name
+        }
+      }
+    })
+  }
+
+  editableTabsValue.value = activeName
+  editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
+}
+
+// 弹窗打开方法
+const open = (textTitle: string,planName: string) => {
+  dialogVisible.value = true
+  title.value = textTitle
+  planTitle.value = planName
+}
+defineExpose({ open })
+
+// props
+const props = defineProps({
+  width: {
+    type: Number,
+    default: 800,
+  },
+  height: {
+    type: Number,
+    default: 744,
+  },
+})
+</script>

frontend/src/views/plan/planList/components/planPopup.vue

@@ -1,6 +1,6 @@
 <template> 
    <!-- 基础信息弹出框 -->
-   <el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig">
+   <el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" align-center>
   <div>
     <el-row :gutter="24">
       <el-col :span="12">

frontend/src/views/plan/planList/index.vue

@@ -7,8 +7,8 @@
     >
       <!-- 表格 header 按钮 -->
       <template #tableHeader='scope'>
-        <el-button type='primary'  v-auth.plan="'import'" :icon='Download' @click='importClick'>导入</el-button>
-        <el-button type='primary'  v-auth.plan="'export'" :icon='Upload' @click='exportClick'>导出</el-button>
+        <el-button type='primary'  v-auth.plan="'import'" :icon='Download' @click='importClick' v-if="modeStore.currentMode != '比对式'">导入</el-button>
+        <el-button type='primary'  v-auth.plan="'export'" :icon='Upload' @click='exportClick' v-if="modeStore.currentMode != '比对式'">导出</el-button>
         <el-button type='primary'  v-auth.plan="'combine'" :icon='ScaleToOriginal' :disabled='!(scope.selectedList.length > 1)' @click='combineClick'>
           合并
         </el-button>
@@ -23,6 +23,7 @@
       <template #operation='scope'>
         <el-button type='primary' v-auth.plan="'edit'" link :icon='EditPen' @click="openDialog('edit',scope.row)">编辑</el-button>
         <el-button type='primary' v-auth.plan="'delete'" link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
+        <el-button type='primary' link :icon='List' @click="openTestSource(scope.row)">子计划</el-button>
         <!-- <el-button type='primary' link :icon='List' @click='showDeviceOpen(scope.row)'>设备绑定</el-button> -->
         <el-button type='primary' v-auth.plan="'analysis'" link :icon='List' v-if="scope.row.testState == '2'" @click='statisticalAnalysis(scope.row)'>统计分析</el-button>
       </template>
@@ -38,7 +39,7 @@
     <!-- 查看设备绑定
     <DevTransfer :refresh-table='proTable?.getTableList' ref='devTransferPopup'/> -->
     <ImportExcel ref='planImportExcel' />
-
+    <SourceOpen :refresh-table='proTable?.getTableList' ref='openSourceView' :width='viewWidth' :height='viewHeight'></SourceOpen>
 
 </template>
 
@@ -51,7 +52,7 @@ import { computed, onMounted, reactive, ref } from 'vue'
 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 SourceOpen from '@/views/plan/planList/components/chidrenPlan.vue'
 import DevTransfer from './components/devTransfer.vue'
 import { useViewSize } from '@/hooks/useViewSize'
 import { useRouter } from 'vue-router'
@@ -62,7 +63,7 @@ import type { ErrorSystem } from '@/api/error/interface'
 import ErrorStandardPopup from '@/views/machine/errorSystem/components/errorStandardPopup.vue' // 导入子组件
 import TestSourcePopup from '@/views/machine/testSource/components/testSourcePopup.vue' // 导入子组件
 import { type TestSource } from '@/api/device/interface/testSource'
-import { useModeStore } from '@/stores/modules/mode'; // 引入模式 store
+import { useAppSceneStore, useModeStore } from '@/stores/modules/mode'; // 引入模式 store
 import { useHandleData } from '@/hooks/useHandleData'
 import { dictTestState,dictReportState,dictResult } from '@/api/plan/planData.ts'
 import {getTestSourceById} from '@/api/device/testSource/index'
@@ -105,6 +106,7 @@ const getTableList = async(params: any) => {
   }
 }
 
+const { popupBaseView, viewWidth, viewHeight } = useViewSize()
 
 const dataSourceType = computed(() => {
       // switch (modeStore.currentMode) {
@@ -138,10 +140,28 @@ const columns = reactive<ColumnProps<Plan.ReqPlan>[]>([
     fieldNames: { label: 'label', value: 'id' },
     render: scope => {
     return (
-      scope.row.testState === 0 ? '未检' : scope.row.testState === 1 ? '检测中' : '检测完成'
+      scope.row.testState === 0 ? <el-tag type='warning' effect="dark">未检</el-tag> : 
+      scope.row.testState === 1 ? <el-tag type='danger'  effect="dark">检测中</el-tag> : 
+      <el-tag type='success'  effect="dark">检测完成</el-tag>
     )
   },
   },
+  {
+    prop: 'progress',
+    label: '检测进度',
+    minWidth: 180,
+   render: (scope) => {
+    const randomPercentage = Math.floor(Math.random() * 101); // 生成 0 到 100 的随机整数
+    return (
+      <el-progress
+        text-inside={true}
+        stroke-width={20}
+        percentage={randomPercentage}
+        status='success'
+      />
+    );
+  },
+  },
   {
     prop: 'reportState',
     label: '检测报告状态',
@@ -407,6 +427,10 @@ const handleDelete = async (params: Plan.ReqPlanParams) => {
   proTable.value?.getTableList()
 }
 
+const openTestSource = (row: Partial<Plan.ReqPlan> = {}) => {
+  openSourceView.value.open("检测计划详情",row.name)
+}
+
 const showDeviceOpen = (row: Partial<Plan.ReqPlan> = {}) => {
   devTransferPopup.value.open(row)
 }