节点弹窗

src/assets/styles/index.scss

@@ -85,3 +85,5 @@ html {
   border-radius: 4px;
   font-size: 14px;
 }
+
+

src/store/dialog.js

@@ -10,6 +10,9 @@ export const useDialogStore = defineStore('dialog', {
       riskAIDialogOpen: false,   // 存储AI应急助手弹窗开关
       riskAIDialogOpen2: false,   // 存储动态评估弹窗开关
 
+      caseManageNodeDialogOpen: false,   // 存储病例管理节点弹窗开关
+      laboratoryTestNodeDialogOpen: false,   // 存储实验室检测节点弹窗开关
+
       // 公共卫生风险及地图图例 下拉选项
       selectSearchObj: {
         type: '',
@@ -84,6 +87,24 @@ export const useDialogStore = defineStore('dialog', {
       return this.riskAIDialogOpen2
     },
 
+
+    // 病例管理节点
+    setCaseManageNodeDialogOpen (open) {
+      this.caseManageNodeDialogOpen = open
+    },
+
+    getCaseManageNodeDialogOpen () {
+      return this.caseManageNodeDialogOpen
+    },
+
+    // 实验室检测
+    setLaboratoryTestNodeDialogOpen (open) {
+      this.laboratoryTestNodeDialogOpen = open
+    },
+    getLaboratoryTestNodeDialogOpen () {
+      return this.laboratoryTestNodeDialogOpen
+    },
+
     // 弹窗统一关闭
     closeAllDialog () {
       // this.riskPersonnelDialogOpen = false

src/views/left/comp/dispose/dialog/AiPublicRiskDialog.vue

@@ -25,16 +25,16 @@
       </transition>
 
       <div class="title-box">
-        <div class="content" @click="showContent = !showContent">
+        <div class="content" @click="showContent1 = !showContent1">
           <div>群体风险</div>
           <div class="arrow-box">
-            <el-icon v-if="showContent"><ArrowDownBold /></el-icon>
+            <el-icon v-if="showContent1"><ArrowDownBold /></el-icon>
             <el-icon v-else><ArrowUpBold /></el-icon>
           </div>
         </div>
       </div>
       <transition name="fade">
-        <div class="content-box" v-if="showContent">
+        <div class="content-box" v-if="showContent1">
           <div class="text-content">
             <div>· 传播风险：病例在发病前曾前往浙江杭州参加聚会，存在一定的传播风险。虽然其否认周围有类似症状病人，但仍需对密切接触者进行追踪和医学观察。</div>
             <div>· 聚集性风险：若该病例为新型病原体感染，且具有较强的传染性，可能会在家庭、社区或医疗机构内引起聚集性疫情。</div>
@@ -43,16 +43,16 @@
       </transition>
 
       <div class="title-box">
-        <div class="content" @click="showContent = !showContent">
+        <div class="content" @click="showContent2 = !showContent2">
           <div>群体风险</div>
           <div class="arrow-box">
-            <el-icon v-if="showContent"><ArrowDownBold /></el-icon>
+            <el-icon v-if="showContent2"><ArrowDownBold /></el-icon>
             <el-icon v-else><ArrowUpBold /></el-icon>
           </div>
         </div>
       </div>
       <transition name="fade">
-        <div class="content-box" v-if="showContent">
+        <div class="content-box" v-if="showContent2">
           <div class="text-content">
             <div>· 社区传播风险：病例居住在上海市闵行区，且有跨区域活动史，需警惕在社区内引发传播。</div>
             <div>· 医疗机构传播风险：病例已住院治疗，需加强医院感染控制措施，防止在医疗机构内传播。</div>
@@ -79,6 +79,8 @@ const handleClose = () => {
   dialogStore.setRiskAI2DialogOpen(false)
 }
 const showContent = ref(false)
+const showContent1 = ref(false)
+const showContent2 = ref(false)
 </script>
 
 <style lang="scss" scoped>

src/views/left/comp/dispose/dialog/RiskPersonnelDialog.vue

@@ -1,34 +1,5 @@
 <template>
-  <!-- <div class="dialog_container">
-    <div class="dialog_container_header">
-      <div class="dialog_container_header_title">
-        <img :src="getImgSrc()" alt="" />
-        <div>风险人员列表</div>
-      </div>
-      <div class="dialog_container_header_btn">
-        <div class="btn_box">
-          <div class="right_btn" :class="{ right_btn_active: activeIndex === index }" v-for="(item, index) in buttons" @click="btnClick(item, index)">{{ item.name }}</div>
-
-          <div class="img_close" @click="closeClick"><img src="../../../../../assets/img/弹窗关闭.png" alt="" /></div>
-        </div>
-      </div>
-    </div>
-     <el-table :data="tableData" class="dialog_table" @row-click="handleRowClick">
-       <el-table-column type="index" label="序号" width="80" align="center"/>
-        <el-table-column prop="date" label="姓名" align="center" />
-        <el-table-column prop="name" label="类型" align="center" />
-        <el-table-column prop="name" label="现住址" align="center" />
-        <el-table-column prop="name" label="与病例关系" align="center" />
-        <el-table-column prop="name" label="末次接触日期" align="center" />
-        <el-table-column prop="name" label="管理状态" align="center" />
-      </el-table>
-  </div> -->
-
-  <RiskDialog :options="dialogOptions" @close="closeClick">
-    <!-- <template #action-column="{ row }">
-      <el-button @click="handleAction(row)">详情</el-button>
-    </template> -->
-  </RiskDialog>
+  <RiskDialog :options="dialogOptions" @close="closeClick"></RiskDialog>
 </template>
 <script setup>
 import RiskDialog from './RiskDialog'
@@ -92,7 +63,6 @@ function closeClick() {
   // emit('closeClick')
   dialogStore.setRiskPersonnelDialogOpen(false)
 }
-
 </script>
 <style lang="scss" scoped>
 .dialog_container {

src/views/left/dialog/PublicHealthRisksDialog.vue

@@ -204,6 +204,10 @@ function handleRowClick() {}
 :deep(.el-table__inner-wrapper:before) {
   height: 0;
 }
+
+:deep(  .el-select__wrapper) {
+  min-height: 24px !important;
+}
 </style>
 <style lang="scss">
 //下拉框文字
@@ -232,9 +236,7 @@ function handleRowClick() {}
   color: #ffffff !important;
 }
 
-.el-select__wrapper {
-  min-height: 24px !important;
-}
+
 
 //下拉框的链接小方块
 .custom-select.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::before {
@@ -252,6 +254,7 @@ function handleRowClick() {}
 
 //鼠标移动上去的选中色
 .custom-select {
+
   .el-select-dropdown__item.is-hovering {
     background: linear-gradient(270deg, rgba(6, 195, 255, 0.1) 0%, rgba(6, 195, 255, 0.68) 100%) !important;
     border-radius: 2px 2px 2px 2px;

src/views/left/dialog/components/DisposalProgressContent copy 2.vue

@@ -1,357 +0,0 @@
-<template>
-  <div class="container">
-    <div id="graph_container" ref="graphRef"></div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { Graph } from '@antv/x6'
-import dagre from 'dagre'
-import { register } from '@antv/x6-vue-shape'
-import ProgressNode from './common/ProgressNode.vue'
-import ProgressChildrenNode from './common/ProgressChildrenNode.vue'
-import imgIcon from '../../../../assets/img/节点连线箭头.png'
-
-// **注册 Vue 组件节点**
-// 一级节点
-register({
-  shape: 'custom-vue-node',
-  width: 140,
-  height: 60,
-  component: ProgressNode,
-  getComponent(node) {
-    return {
-      component: ProgressNode,
-      props: {
-        label: node.getData().label,
-        state: node.getData().state
-      }
-    }
-  }
-})
-
-// 二级节点（及用于三级节点）
-register({
-  shape: 'custom-vue-children-node',
-  width: 140,
-  height: 60,
-  component: ProgressChildrenNode,
-  getComponent(node) {
-    return {
-      component: ProgressChildrenNode,
-      props: {
-        label: node.getData().label,
-        state: node.getData().state
-      }
-    }
-  }
-})
-
-// **画布引用**
-const graphRef = ref(null)
-let graph = null
-
-// **数据**
-const NodeData = {
-  dagNode: [
-    {
-      level: 1,
-      fId: 1,
-      nodeId: 1,
-      nodeName: '发现报告',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      nodeId: '1-1',
-      nodeName: '信息接报',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      nodeId: '1-2',
-      nodeName: '信息核实',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      nodeId: '1-3',
-      nodeName: '快速评估',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      nodeId: '1-4',
-      nodeName: '信息上报',
-      state: '已完成'
-    },
-    {
-      level: 1,
-      fId: 2,
-      nodeId: 2,
-      nodeName: '个案调查处置',
-      state: '进行中'
-    },
-    {
-      level: 2,
-      twoFId: '2-1',
-      nodeId: '2-1',
-      nodeName: '李梦康',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      twoFId: '2-2',
-      nodeId: '2-2',
-      nodeName: '毛超',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      twoFId: '2-3',
-      nodeId: '2-3',
-      nodeName: '贾子敏',
-      state: '进行中'
-    },
-    {
-      level: 3,
-      nodeId: '2-2-1',
-      nodeName: '病例管理',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      nodeId: '2-2-2',
-      nodeName: '流行病学调查',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      nodeId: '2-2-3',
-      nodeName: '实验室检测',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      nodeId: '2-2-4',
-      nodeName: '风险评估',
-      state: '已完成'
-    },
-    {
-      level: 1,
-      fId: 3,
-      nodeId: 3,
-      nodeName: '风险人员和环境排查管控',
-      state: '进行中'
-    },
-    {
-      level: 2,
-      twoFId: '3-1',
-      nodeId: '3-1',
-      nodeName: '段伟',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      twoFId: '3-2',
-      nodeId: '3-2',
-      nodeName: '陆成奇',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      twoFId: '3-3',
-      nodeId: '3-3',
-      nodeName: '曾强',
-      state: '进行中'
-    },
-    {
-      level: 3,
-      twoFId: '3-3-1',
-      nodeId: '3-3-1',
-      nodeName: '病例管理',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      twoFId: '3-3-2',
-      nodeId: '3-3-2',
-      nodeName: '流行病学调查',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      twoFId: '3-3-2',
-      nodeId: '3-3-2',
-      nodeName: '实验室检测',
-      state: '进行中'
-    },
-    {
-      level: 3,
-      twoFId: '3-3-3',
-      nodeId: '3-3-3',
-      nodeName: '风险人员管控',
-      state: '进行中'
-    },
-    {
-      level: 3,
-      twoFId: '3-3-4',
-      nodeId: '3-3-4',
-      nodeName: '风险场所管控',
-      state: '进行中'
-    },
-    { level: 1, fId: 4, nodeId: 4, nodeName: '区域风险排查管控', state: '未开始' },
-    { level: 1, fId: 5, nodeId: 5, nodeName: '结案' }
-  ],
-  dagLine: [
-    { from: 1, to: 2 },
-    { from: 2, to: 3 },
-    { from: 3, to: 4 },
-    { from: 4, to: 5 },
-    { from: 1, to: '1-1' },
-    { from: 1, to: '1-2' },
-    { from: 1, to: '1-3' },
-    { from: 1, to: '1-4' },
-    { from: 2, to: '2-1' },
-    { from: 2, to: '2-2' },
-    { from: 2, to: '2-3' },
-    { from: '2-2', to: '2-2-1' },
-    { from: '2-2', to: '2-2-2' },
-    { from: '2-2', to: '2-2-3' },
-    { from: '2-2', to: '2-2-4' },
-    { from: 3, to: '3-1' },
-    { from: 3, to: '3-2' },
-    { from: 3, to: '3-3' },
-    { from: '3-3', to: '3-3-1' },
-    { from: '3-3', to: '3-3-2' },
-    { from: '3-3', to: '3-3-3' },
-    { from: '3-3', to: '3-3-4' }
-  ]
-}
-
-// **初始化 X6 画布和渲染节点边**
-onMounted(() => {
-  // 创建画布，设置容器、宽高和连线路由方式
-  graph = new Graph({
-    container: graphRef.value,
-    width: 580,
-    height: 801,
-    connecting: {
-      router: 'orth' // 使用正交路由，自动优化连线
-    },
-    // 设置默认边的样式（虚线和自定义箭头）
-    defaultEdge: {
-      attrs: {
-        line: {
-          stroke: '#5B8FF9',
-          strokeDasharray: '5 5',
-          strokeWidth: 2,
-            targetMarker: {
-            tagName: 'image',
-            'xlink:href': imgIcon,
-            width: 24,
-            height: 24,
-            y: -12,
-             transform: 'rotate(0)' // 旋转箭头图片
-          }
-        }
-      }
-    }
-  })
-
-  // 简单实现脑图树布局：
-  // 按节点 level 分组，一级节点放在最左侧，二级和三级节点依次向右排列
-  const horizontalGap = 180
-  const verticalGap = 60
-  const nodesByLevel = {}
-
-  // 根据 level 分组（保证顺序与数据中顺序一致）
-  NodeData.dagNode.forEach(item => {
-    const lvl = item.level
-    if (!nodesByLevel[lvl]) {
-      nodesByLevel[lvl] = []
-    }
-    nodesByLevel[lvl].push(item)
-  })
-
-  const nodes = []
-  Object.keys(nodesByLevel).forEach(levelKey => {
-    const level = parseInt(levelKey)
-    const arr = nodesByLevel[level]
-    arr.forEach((item, index) => {
-
-      let nodeX=null
-      let nodeY=null
-      if (level===1) {
-            // x 坐标：按层级水平偏移
-       nodeX =50
-      // y 坐标：同层节点垂直均分
-       nodeY = 200
-      } else {
-          // x 坐标：按层级水平偏移
-       nodeX = (level - 1) * horizontalGap
-      // y 坐标：同层节点垂直均分
-       nodeY = (index + 1) * verticalGap
-      }
-    
-      nodes.push({
-        id: item.nodeId.toString(),
-        x: nodeX,
-        y: nodeY,
-        width: 140,
-        height: 60,
-        // 一级节点使用自定义 Vue 组件节点，其余使用 children 节点
-        shape: level === 1 ? 'custom-vue-node' : 'custom-vue-children-node',
-        data: {
-          label: item.nodeName,
-          state: item.state
-        }
-      })
-    })
-  })
-
-  // 添加节点
-  graph.addNodes(nodes)
-
-  // 创建边：使用 dagLine 数据，并可选设置边的样式（此处也可在 defaultEdge 中统一设置）
-  const edges = NodeData.dagLine.map(link => ({
-    source: link.from.toString(),
-    target: link.to.toString(),
-    // 单独指定样式（如有需要覆盖默认样式）
-    attrs: {
-      line: {
-         stroke: '#5B8FF9',
-          strokeDasharray: '5 5',
-          strokeWidth: 2,
-          targetMarker: {
-            tagName: 'image',
-            'xlink:href': imgIcon,
-            width: 24,
-            height: 24,
-            y: -12,
-             transform: 'rotate(0)' // 旋转箭头图片
-          }
-      }
-    }
-  }))
-
-  // 添加边
-  graph.addEdges(edges)
-
-})
-
-
-</script>
-
-<style scoped>
-.container {
-  width: 100%;
-  height: 100%;
-}
-
-#graph_container {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/left/dialog/components/DisposalProgressContent copy 3.vue

@@ -1,350 +0,0 @@
-<template>
-  <div class="container">
-    <div id="graph_container" ref="graphRef"></div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { Graph } from '@antv/x6'
-import { register } from '@antv/x6-vue-shape'
-import ProgressNode from './common/ProgressNode.vue'
-import ProgressChildrenNode from './common/ProgressChildrenNode.vue'
-import imgIcon from '../../../../assets/img/节点连线箭头.png'
-
-// **注册 Vue 组件节点**
-// 一级节点
-register({
-  shape: 'custom-vue-node',
-  width: 140,
-  height: 60,
-  component: ProgressNode,
-  getComponent(node) {
-    return {
-      component: ProgressNode,
-      props: {
-        label: node.getData().label,
-        state: node.getData().state
-      }
-    }
-  }
-})
-
-// 二级节点（及用于三级节点）
-register({
-  shape: 'custom-vue-children-node',
-  width: 140,
-  height: 60,
-  component: ProgressChildrenNode,
-  getComponent(node) {
-    return {
-      component: ProgressChildrenNode,
-      props: {
-        label: node.getData().label,
-        state: node.getData().state
-      }
-    }
-  }
-})
-
-// **画布引用**
-const graphRef = ref(null)
-let graph = null
-
-// **数据**
-const NodeData = {
-  dagNode: [
-    {
-      level: 1,
-      fId: 1,
-      nodeId: 1,
-      nodeName: '发现报告',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      nodeId: '1-1',
-      nodeName: '信息接报',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      nodeId: '1-2',
-      nodeName: '信息核实',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      nodeId: '1-3',
-      nodeName: '快速评估',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      nodeId: '1-4',
-      nodeName: '信息上报',
-      state: '已完成'
-    },
-    {
-      level: 1,
-      fId: 2,
-      nodeId: 2,
-      nodeName: '个案调查处置',
-      state: '进行中'
-    },
-    {
-      level: 2,
-      twoFId: '2-1',
-      nodeId: '2-1',
-      nodeName: '李梦康',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      twoFId: '2-2',
-      nodeId: '2-2',
-      nodeName: '毛超',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      twoFId: '2-3',
-      nodeId: '2-3',
-      nodeName: '贾子敏',
-      state: '进行中'
-    },
-    {
-      level: 3,
-      nodeId: '2-2-1',
-      nodeName: '病例管理',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      nodeId: '2-2-2',
-      nodeName: '流行病学调查',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      nodeId: '2-2-3',
-      nodeName: '实验室检测',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      nodeId: '2-2-4',
-      nodeName: '风险评估',
-      state: '已完成'
-    },
-    {
-      level: 1,
-      fId: 3,
-      nodeId: 3,
-      nodeName: '风险人员和环境排查管控',
-      state: '进行中'
-    },
-    {
-      level: 2,
-      twoFId: '3-1',
-      nodeId: '3-1',
-      nodeName: '段伟',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      twoFId: '3-2',
-      nodeId: '3-2',
-      nodeName: '陆成奇',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      twoFId: '3-3',
-      nodeId: '3-3',
-      nodeName: '曾强',
-      state: '进行中'
-    },
-    {
-      level: 3,
-      twoFId: '3-3-1',
-      nodeId: '3-3-1',
-      nodeName: '病例管理',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      twoFId: '3-3-2',
-      nodeId: '3-3-2',
-      nodeName: '流行病学调查',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      twoFId: '3-3-2',
-      nodeId: '3-3-2',
-      nodeName: '实验室检测',
-      state: '进行中'
-    },
-    {
-      level: 3,
-      twoFId: '3-3-3',
-      nodeId: '3-3-3',
-      nodeName: '风险人员管控',
-      state: '进行中'
-    },
-    {
-      level: 3,
-      twoFId: '3-3-4',
-      nodeId: '3-3-4',
-      nodeName: '风险场所管控',
-      state: '进行中'
-    },
-    { level: 1, fId: 4, nodeId: 4, nodeName: '区域风险排查管控', state: '未开始' },
-    { level: 1, fId: 5, nodeId: 5, nodeName: '结案' }
-  ],
-  dagLine: [
-    { from: 1, to: 2 },
-    { from: 2, to: 3 },
-    { from: 3, to: 4 },
-    { from: 4, to: 5 },
-    { from: 1, to: '1-1' },
-    { from: 1, to: '1-2' },
-    { from: 1, to: '1-3' },
-    { from: 1, to: '1-4' },
-    { from: 2, to: '2-1' },
-    { from: 2, to: '2-2' },
-    { from: 2, to: '2-3' },
-    { from: '2-2', to: '2-2-1' },
-    { from: '2-2', to: '2-2-2' },
-    { from: '2-2', to: '2-2-3' },
-    { from: '2-2', to: '2-2-4' },
-    { from: 3, to: '3-1' },
-    { from: 3, to: '3-2' },
-    { from: 3, to: '3-3' },
-    { from: '3-3', to: '3-3-1' },
-    { from: '3-3', to: '3-3-2' },
-    { from: '3-3', to: '3-3-3' },
-    { from: '3-3', to: '3-3-4' }
-  ]
-}
-
-// **初始化 X6 画布和渲染节点边**
-onMounted(() => {
-  // 创建画布，设置容器、宽高和连线路由方式
-  graph = new Graph({
-    container: graphRef.value,
-    width: 580,
-    height: 801,
-    connecting: {
-      router: 'orth' // 使用正交路由，自动优化连线
-    },
-    // 设置默认边的样式（虚线和自定义箭头）
-    defaultEdge: {
-      attrs: {
-        line: {
-          stroke: '#5B8FF9',
-          strokeDasharray: '5 5',
-          strokeWidth: 2,
-            targetMarker: {
-            tagName: 'image',
-            'xlink:href': imgIcon,
-            width: 24,
-            height: 24,
-            y: -12,
-             transform: 'rotate(0)' // 旋转箭头图片
-          }
-        }
-      }
-    }
-  })
-
-  // 简单实现脑图树布局：
-  // 按节点 level 分组，一级节点放在最左侧，二级和三级节点依次向右排列
-  const horizontalGap = 180
-  const verticalGap = 60
-  const nodesByLevel = {}
-
-  // 根据 level 分组（保证顺序与数据中顺序一致）
-  NodeData.dagNode.forEach(item => {
-    const lvl = item.level
-    if (!nodesByLevel[lvl]) {
-      nodesByLevel[lvl] = []
-    }
-    nodesByLevel[lvl].push(item)
-  })
-
-  const nodes = []
-  Object.keys(nodesByLevel).forEach(levelKey => {
-    const level = parseInt(levelKey)
-    const arr = nodesByLevel[level]
-    arr.forEach((item, index) => {
-      // x 坐标：按层级水平偏移
-      const nodeX = (level - 1) * horizontalGap
-      // y 坐标：同层节点垂直均分
-      const nodeY = (index + 1) * verticalGap
-      nodes.push({
-        id: item.nodeId.toString(),
-        x: nodeX,
-        y: nodeY,
-        width: 140,
-        height: 60,
-        // 一级节点使用自定义 Vue 组件节点，其余使用 children 节点
-        shape: level === 1 ? 'custom-vue-node' : 'custom-vue-children-node',
-        data: {
-          label: item.nodeName,
-          state: item.state
-        }
-      })
-    })
-  })
-
-  // 添加节点
-  graph.addNodes(nodes)
-
-  // 创建边：使用 dagLine 数据，并可选设置边的样式（此处也可在 defaultEdge 中统一设置）
-  const edges = NodeData.dagLine.map(link => ({
-    source: link.from.toString(),
-    target: link.to.toString(),
-    // 单独指定样式（如有需要覆盖默认样式）
-    attrs: {
-      line: {
-         stroke: '#5B8FF9',
-          strokeDasharray: '5 5',
-          strokeWidth: 2,
-          targetMarker: {
-            tagName: 'image',
-            'xlink:href': imgIcon,
-            width: 24,
-            height: 24,
-            y: -12,
-             transform: 'rotate(0)' // 旋转箭头图片
-          }
-      }
-    }
-  }))
-
-  // 添加边
-  graph.addEdges(edges)
-
-
-  console.log(  graph.getNodes(),'  const nodes = graph.getNodes()')
-  console.log(graph.getEdges(), '  const nodes =graph.getEdges()')
-
-  
-})
-
-
-</script>
-
-<style scoped>
-.container {
-  width: 100%;
-  height: 100%;
-}
-
-#graph_container {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/left/dialog/components/DisposalProgressContent copy 4.vue

@@ -1,401 +0,0 @@
-<template>
-  <div class="container">
-    <div id="graph_container" ref="graphRef"></div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { Graph } from '@antv/x6'
-import { register } from '@antv/x6-vue-shape'
-import ProgressNode from './common/ProgressNode.vue'
-import ProgressChildrenNode from './common/ProgressChildrenNode.vue'
-import imgIcon from '../../../../assets/img/节点连线箭头.png'
-
-// **注册 Vue 组件节点**
-register({
-  shape: 'custom-vue-node',
-  width: 136,
-  height: 60,
-  component: ProgressNode,
-  getComponent(node) {
-    return {
-      component: ProgressNode,
-      props: {
-        label: node.getData().label,
-        state: node.getData().state
-      }
-    }
-  }
-})
-
-register({
-  shape: 'custom-vue-children-node',
-  width: 120,
-  height: 60,
-  component: ProgressChildrenNode,
-  getComponent(node) {
-    return {
-      component: ProgressChildrenNode,
-      props: {
-        label: node.getData().label,
-        state: node.getData().state
-      }
-    }
-  }
-})
-
-// **画布**
-const graphRef = ref(null)
-let graph = null
-
-// **数据**
-const NodeData = {
-  dagNode: [
-    {
-      level: 1,
-      fId: 1,
-      nodeId: 1,
-      nodeName: '发现报告',
-      state: '已完成',
-      x: 10,
-      y: 80
-    },
-    {
-      level: 2,
-      nodeId: '1-1',
-      nodeName: '信息接报',
-      state: '已完成',
-      x: 240,
-      y: 0
-    },
-    {
-      level: 2,
-      nodeId: '1-2',
-      nodeName: '信息核实',
-      state: '已完成',
-      x: 240,
-      y: 55
-    },
-    {
-      level: 2,
-      nodeId: '1-3',
-      nodeName: '快速评估',
-      state: '已完成',
-      x: 240,
-      y: 110
-    },
-    {
-      level: 2,
-      nodeId: '1-4',
-      nodeName: '信息上报',
-      state: '已完成',
-      x: 240,
-      y: 165
-    },
-    {
-      level: 1,
-      fId: 2,
-      nodeId: 2,
-      nodeName: '个案调查处置',
-      state: '进行中',
-      x: 10,
-      y: 295
-    },
-    {
-      level: 2,
-      twoFId: '2-1',
-      nodeId: '2-1',
-      nodeName: '李梦康',
-      state: '已完成',
-      x: 240,
-      y: 240
-    },
-    {
-      level: 2,
-      twoFId: '2-2',
-      nodeId: '2-2',
-
-      nodeName: '毛超',
-      state: '已完成',
-      x: 240,
-      y: 295
-    },
-    {
-      level: 2,
-      twoFId: '2-3',
-      nodeId: '2-3',
-      nodeName: '贾子敏',
-      state: '进行中',
-      x: 240,
-      y: 350
-    },
-    {
-      level: 3,
-      nodeId: '2-2-1',
-      nodeName: '病例管理',
-      state: '已完成',
-      x: 420,
-      y: 210
-    },
-    {
-      level: 3,
-      nodeId: '2-2-2',
-      nodeName: '流行病学调查',
-      state: '已完成',
-      x: 420,
-      y: 265
-    },
-    {
-      level: 3,
-      nodeId: '2-2-3',
-      nodeName: '实验室检测',
-      state: '已完成',
-      x: 420,
-      y: 320
-    },
-    {
-      level: 3,
-      nodeId: '2-2-4',
-      nodeName: '风险评估',
-      state: '已完成',
-      x: 420,
-      y: 375
-    },
-    {
-      level: 1,
-      fId: 3,
-      nodeId: 3,
-      nodeName: '风险人员和环境排查管控',
-      state: '进行中',
-      x: 10,
-      y: 480
-    },
-
-    {
-      level: 2,
-      twoFId: '3-1',
-      nodeId: '3-1',
-      nodeName: '段伟',
-      state: '已完成',
-      x: 240,
-      y: 420
-    },
-    {
-      level: 2,
-      twoFId: '3-2',
-      nodeId: '3-2',
-      nodeName: '陆成奇',
-      state: '已完成',
-      x: 240,
-      y: 475
-    },
-    {
-      level: 2,
-      twoFId: '3-3',
-      nodeId: '3-3',
-      nodeName: '曾强',
-      state: '进行中',
-      x: 240,
-      y: 530
-    },
-
-    {
-      level: 3,
-      twoFId: '3-3-1',
-      nodeId: '3-3-1',
-      nodeName: '病例管理',
-      state: '已完成',
-       x: 420,
-       y:450
-    },
-    {
-      level: 3,
-      twoFId: '3-3-2',
-      nodeId: '3-3-2',
-      nodeName: '流行病学调查',
-      state: '已完成',
-       x: 420,
-       y:505
-    },
-    {
-      level: 3,
-      twoFId: '3-3-2',
-      nodeId: '3-3-3',
-      nodeName: '实验室检测',
-      state: '进行中',
-       x: 420,
-       y:560
-    },
-    {
-      level: 3,
-      twoFId: '3-3-3',
-      nodeId: '3-3-4',
-      nodeName: '风险人员管控',
-      state: '进行中',
-       x: 420,
-       y:615
-    },
-    {
-      level: 3,
-      twoFId: '3-3-4',
-      nodeId: '3-3-5',
-      nodeName: '风险场所管控',
-      state: '进行中',
-       x: 420,
-       y:670
-    },
-
-    { level: 1, fId: 4, nodeId: 4, nodeName: '区域风险排查管控', state: '未开始', x: 10, y: 620 },
-    { level: 1, fId: 5, nodeId: 5, nodeName: '结案', x: 10, y: 720 }
-  ],
-  dagLine: [
-    { from: 1, to: 2 },
-    { from: 2, to: 3 },
-    { from: 3, to: 4 },
-    { from: 4, to: 5 },
-    { from: 1, to: '1-1' },
-    { from: 1, to: '1-2' },
-    { from: 1, to: '1-3' },
-    { from: 1, to: '1-4' },
-    { from: 2, to: '2-1' },
-    { from: 2, to: '2-2' },
-    { from: 2, to: '2-3' },
-    { from: '2-2', to: '2-2-1' },
-    { from: '2-2', to: '2-2-2' },
-    { from: '2-2', to: '2-2-3' },
-    { from: '2-2', to: '2-2-4' },
-    { from: 3, to: '3-1' },
-    { from: 3, to: '3-2' },
-    { from: 3, to: '3-3' },
-    { from: '3-3', to: '3-3-1' },
-    { from: '3-3', to: '3-3-2' },
-    { from: '3-3', to: '3-3-3' },
-    { from: '3-3', to: '3-3-4' },
-    { from: '3-3', to: '3-3-5' },
-  ]
-}
-
-// **自动合并多条连线**
-const mergeConnections = edges => {
-  const targetMap = {}
-
-  // 统计指向相同 target 的 source
-  edges.forEach(edge => {
-    if (!targetMap[edge.to]) {
-      targetMap[edge.to] = []
-    }
-    targetMap[edge.to].push(edge.from)
-  })
-
-  const newEdges = []
-  Object.keys(targetMap).forEach(target => {
-    const sources = targetMap[target]
-    if (sources.length > 1) {
-      // 找到目标节点的坐标
-      const targetNode = NodeData.dagNode.find(node => node.nodeId === target)
-      if (!targetNode) return
-
-      const mergeX = targetNode.x - 100 // 让合并节点位于目标节点左侧
-      const mergeY = targetNode.y // 让合并节点与目标对齐
-      const mergeNodeId = `merge_${target}`
-
-      // **创建合并节点**
-      graph.addNode({
-        id: mergeNodeId,
-        x: mergeX,
-        y: mergeY,
-        width: 1,
-        height: 1,
-        attrs: { body: { stroke: 'none', fill: 'none' } } // 隐藏合并节点
-      })
-
-      // **前半部分：多个 source 指向合并节点**
-      sources.forEach(src => {
-        newEdges.push({ from: src, to: mergeNodeId })
-      })
-
-      // **后半部分：合并节点指向多个 target**
-      newEdges.push({ from: mergeNodeId, to: target })
-    } else {
-      // 单独的连线保持不变
-      newEdges.push({ from: sources[0], to: target })
-    }
-  })
-
-  return newEdges
-}
-
-
-// **初始化 X6 画布**
-onMounted(() => {
-  graph = new Graph({
-    container: graphRef.value,
-    width: 580,
-    height: 801,
-    connecting: {
-      router: 'orth', // 自动优化连线
-      // connector: 'smooth', // 平滑曲线
-      // anchor: 'center',
-      // connectionPoint: 'anchor',
-      // allowBlank: false,
-      // snap: true
-    }
-  })
-
-  // **添加节点**
-  NodeData.dagNode.forEach(node => {
-    graph.addNode({
-      id: node.nodeId,
-      shape: node.level === 1 ? 'custom-vue-node' : 'custom-vue-children-node',
-      x: node.x,
-      y: node.y,
-      data: {
-        label: node.nodeName,
-        state: node.state
-      }
-    })
-  })
-
-  // **处理合并连线**
-  const mergedEdges = mergeConnections(NodeData.dagLine)
-
-  // **添加合并后的连线**
-  mergedEdges.forEach(edge => {
-    graph.addEdge({
-      source: String(edge.from),
-      target: String(edge.to),
-      attrs: {
-        line: {
-          stroke: '#5B8FF9',
-          strokeDasharray: '2 5',
-          strokeWidth: 2,
-          targetMarker: {
-            tagName: 'image',
-            'xlink:href': imgIcon,
-            width: 24,
-            height: 24,
-            y: -12,
-            x:-24,
-            transform: 'rotate(0)' // 旋转箭头图片
-          }
-        }
-      },
-      router: { name: 'manhattan' }, // 自动贴合边缘
-      // connector: { name: 'rounded' } // 让线条更圆滑
-    })
-  })
-})
-</script>
-
-<style scoped>
-.container {
-  width: 100%;
-  height: 100%;
-}
-
-#graph_container {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/left/dialog/components/DisposalProgressContent copy 5.vue

@@ -1,412 +0,0 @@
-<template>
-  <div class="container">
-    <div id="graph_container" ref="graphRef"></div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { Graph } from '@antv/x6'
-import { register } from '@antv/x6-vue-shape'
-import ProgressNode from './common/ProgressNode.vue'
-import ProgressChildrenNode from './common/ProgressChildrenNode.vue'
-import imgIcon from '../../../../assets/img/节点连线箭头.png'
-
-// **注册 Vue 组件节点**
-register({
-  shape: 'custom-vue-node',
-  width: 140,
-  height: 60,
-  component: ProgressNode,
-  getComponent(node) {
-    return {
-      component: ProgressNode,
-      props: {
-        label: node.getData().label,
-        state: node.getData().state
-      }
-    }
-  }
-})
-
-register({
-  shape: 'custom-vue-children-node',
-  width: 140,
-  height: 60,
-  component: ProgressChildrenNode,
-  getComponent(node) {
-    return {
-      component: ProgressChildrenNode,
-      props: {
-        label: node.getData().label,
-        state: node.getData().state
-      }
-    }
-  }
-})
-
-// **画布**
-const graphRef = ref(null)
-let graph = null
-
-// **数据**
-const NodeData = {
-  dagNode: [
-    {
-      level: 1,
-      fId: 1,
-      nodeId: 1,
-      nodeName: '发现报告',
-      state: '已完成',
-      x: 10,
-      y: 80
-    },
-    {
-      level: 2,
-      nodeId: '1-1',
-      nodeName: '信息接报',
-      state: '已完成',
-      x: 240,
-      y: 0
-    },
-    {
-      level: 2,
-      nodeId: '1-2',
-      nodeName: '信息核实',
-      state: '已完成',
-      x: 240,
-      y: 55
-    },
-    {
-      level: 2,
-      nodeId: '1-3',
-      nodeName: '快速评估',
-      state: '已完成',
-      x: 240,
-      y: 110
-    },
-    {
-      level: 2,
-      nodeId: '1-4',
-      nodeName: '信息上报',
-      state: '已完成',
-      x: 240,
-      y: 165
-    },
-    {
-      level: 1,
-      fId: 2,
-      nodeId: 2,
-      nodeName: '个案调查处置',
-      state: '进行中',
-      x: 10,
-      y: 295
-    },
-    {
-      level: 2,
-      twoFId: '2-1',
-      nodeId: '2-1',
-      nodeName: '李梦康',
-      state: '已完成',
-      x: 240,
-      y: 240
-    },
-    {
-      level: 2,
-      twoFId: '2-2',
-      nodeId: '2-2',
-
-      nodeName: '毛超',
-      state: '已完成',
-      x: 240,
-      y: 295
-    },
-    {
-      level: 2,
-      twoFId: '2-3',
-      nodeId: '2-3',
-      nodeName: '贾子敏',
-      state: '进行中',
-      x: 240,
-      y: 350
-    },
-    {
-      level: 3,
-      nodeId: '2-2-1',
-      nodeName: '病例管理',
-      state: '已完成',
-      x: 420,
-      y: 210
-    },
-    {
-      level: 3,
-      nodeId: '2-2-2',
-      nodeName: '流行病学调查',
-      state: '已完成',
-      x: 420,
-      y: 265
-    },
-    {
-      level: 3,
-      nodeId: '2-2-3',
-      nodeName: '实验室检测',
-      state: '已完成',
-      x: 420,
-      y: 320
-    },
-    {
-      level: 3,
-      nodeId: '2-2-4',
-      nodeName: '风险评估',
-      state: '已完成',
-      x: 420,
-      y: 375
-    },
-    {
-      level: 1,
-      fId: 3,
-      nodeId: 3,
-      nodeName: '风险人员和环境排查管控',
-      state: '进行中',
-      x: 10,
-      y: 480
-    },
-
-    {
-      level: 2,
-      twoFId: '3-1',
-      nodeId: '3-1',
-      nodeName: '段伟',
-      state: '已完成',
-      x: 240,
-      y: 420
-    },
-    {
-      level: 2,
-      twoFId: '3-2',
-      nodeId: '3-2',
-      nodeName: '陆成奇',
-      state: '已完成',
-      x: 240,
-      y: 475
-    },
-    {
-      level: 2,
-      twoFId: '3-3',
-      nodeId: '3-3',
-      nodeName: '曾强',
-      state: '进行中',
-      x: 240,
-      y: 530
-    },
-
-    {
-      level: 3,
-      twoFId: '3-3-1',
-      nodeId: '3-3-1',
-      nodeName: '病例管理',
-      state: '已完成',
-       x: 420,
-       y:450
-    },
-    {
-      level: 3,
-      twoFId: '3-3-2',
-      nodeId: '3-3-2',
-      nodeName: '流行病学调查',
-      state: '已完成',
-       x: 420,
-       y:505
-    },
-    {
-      level: 3,
-      twoFId: '3-3-2',
-      nodeId: '3-3-3',
-      nodeName: '实验室检测',
-      state: '进行中',
-       x: 420,
-       y:560
-    },
-    {
-      level: 3,
-      twoFId: '3-3-3',
-      nodeId: '3-3-4',
-      nodeName: '风险人员管控',
-      state: '进行中',
-       x: 420,
-       y:615
-    },
-    {
-      level: 3,
-      twoFId: '3-3-4',
-      nodeId: '3-3-5',
-      nodeName: '风险场所管控',
-      state: '进行中',
-       x: 420,
-       y:670
-    },
-
-    { level: 1, fId: 4, nodeId: 4, nodeName: '区域风险排查管控', state: '未开始', x: 10, y: 620 },
-    { level: 1, fId: 5, nodeId: 5, nodeName: '结案', x: 10, y: 720 }
-  ],
-  dagLine: [
-    { from: 1, to: 2 },
-    { from: 2, to: 3 },
-    { from: 3, to: 4 },
-    { from: 4, to: 5 },
-    { from: 1, to: '1-1' },
-    { from: 1, to: '1-2' },
-    { from: 1, to: '1-3' },
-    { from: 1, to: '1-4' },
-    { from: 2, to: '2-1' },
-    { from: 2, to: '2-2' },
-    { from: 2, to: '2-3' },
-    { from: '2-2', to: '2-2-1' },
-    { from: '2-2', to: '2-2-2' },
-    { from: '2-2', to: '2-2-3' },
-    { from: '2-2', to: '2-2-4' },
-    { from: 3, to: '3-1' },
-    { from: 3, to: '3-2' },
-    { from: 3, to: '3-3' },
-    { from: '3-3', to: '3-3-1' },
-    { from: '3-3', to: '3-3-2' },
-    { from: '3-3', to: '3-3-3' },
-    { from: '3-3', to: '3-3-4' },
-    { from: '3-3', to: '3-3-5' },
-  ]
-}
-
-// **自动合并多条连线**
-const mergeConnections = edges => {
-  const targetMap = {}
-
-  // 统计指向同一 target 的 source
-  edges.forEach(edge => {
-    if (!targetMap[edge.to]) {
-      targetMap[edge.to] = []
-    }
-    targetMap[edge.to].push(edge.from)
-  })
-
-  const newEdges = []
-  Object.keys(targetMap).forEach(target => {
-    const sources = targetMap[target]
-    if (sources.length > 1) {
-      // 1. 创建“合并节点”
-      const mergeNodeId = `merge_${target}`
-      newEdges.push(...sources.map(src => ({ from: src, to: mergeNodeId })))
-      newEdges.push({ from: mergeNodeId, to: target })
-    } else {
-      newEdges.push({ from: sources[0], to: target })
-    }
-  })
-
-  return newEdges
-}
-
-// **计算竖排三列布局**
-// const computeLayout = () => {
-//   const levels = {}
-//   const columnSpacing = 160 // 列间距
-//   const rowSpacing = 72 // 行间距
-
-//   // **按 level 存储节点**
-//   NodeData.dagNode.forEach(node => {
-//     if (!levels[node.level]) {
-//       levels[node.level] = []
-//     }
-//     levels[node.level].push(node)
-//   })
-
-//   const nodePositions = {}
-//   let x = 50 // 第一列的 x 轴位置
-
-//   Object.keys(levels).forEach(level => {
-//     let y = 50 // 第一行 y 轴初始位置
-//     const nodes = levels[level]
-
-//     nodes.forEach(node => {
-//       nodePositions[node.nodeId] = { x, y }
-//       y += rowSpacing // **每个节点往下排列**
-//     })
-
-//     x += columnSpacing // **每列向右移动**
-//   })
-
-//   return nodePositions
-// }
-
-// **初始化 X6 画布**
-onMounted(() => {
-  graph = new Graph({
-    container: graphRef.value,
-    width: 580,
-    height: 801,
-    connecting: {
-      router: 'orth' // 自动优化连线
-      // connector: 'smooth', // 平滑曲线
-      // anchor: 'center',
-      // connectionPoint: 'anchor',
-      // allowBlank: false,
-      // snap: true
-    }
-  })
-
-  // const nodePositions = computeLayout()
-
-  // **添加节点**
-  NodeData.dagNode.forEach(node => {
-    graph.addNode({
-      id: node.nodeId,
-      shape: node.level === 1 ? 'custom-vue-node' : 'custom-vue-children-node',
-      x: node.x,
-      y: node.y,
-      data: {
-        label: node.nodeName,
-        state: node.state
-      }
-    })
-  })
-
-  // **处理合并连线**
-  const mergedEdges = mergeConnections(NodeData.dagLine)
-
-  // **添加合并后的连线**
-  mergedEdges.forEach(edge => {
-    graph.addEdge({
-      source: String(edge.from),
-      target: String(edge.to),
-      attrs: {
-        line: {
-          stroke: '#5B8FF9',
-          strokeDasharray: '5 5',
-          strokeWidth: 2,
-          targetMarker: {
-            tagName: 'image',
-            'xlink:href': imgIcon,
-            width: 24,
-            height: 24,
-            y: -12,
-            x:-10,
-             transform: 'rotate(0)' // 旋转箭头图片
-          }
-        }
-      },
-      router: { name: 'manhattan' }, // 自动贴合边缘
-      connector: { name: 'rounded' } // 让线条更圆滑
-    })
-  })
-})
-</script>
-
-<style scoped>
-.container {
-  width: 100%;
-  height: 100%;
-}
-
-#graph_container {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/left/dialog/components/DisposalProgressContent copy 6.vue

@@ -1,433 +0,0 @@
-<template>
-  <div class="container">
-    <div id="graph_container" ref="graphRef"></div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { Graph } from '@antv/x6'
-import { register } from '@antv/x6-vue-shape'
-import ProgressNode from './common/ProgressNode.vue'
-import ProgressChildrenNode from './common/ProgressChildrenNode.vue'
-import imgIcon from '../../../../assets/img/节点连线箭头.png'
-
-// **注册 Vue 组件节点**
-register({
-  shape: 'custom-vue-node',
-  width: 136,
-  height: 60,
-  component: ProgressNode,
-  getComponent(node) {
-    return {
-      component: ProgressNode,
-      props: {
-        label: node.getData().label,
-        state: node.getData().state
-      }
-    }
-  }
-})
-
-register({
-  shape: 'custom-vue-children-node',
-  width: 121,
-  height: 46,
-  component: ProgressChildrenNode,
-  getComponent(node) {
-    return {
-      component: ProgressChildrenNode,
-      props: {
-        label: node.getData().label,
-        state: node.getData().state
-      }
-    }
-  }
-})
-
-
-
-// **画布**
-const graphRef = ref(null)
-let graph = null
-
-// **数据**
-const NodeData = {
-  dagNode: [
-    {
-      level: 1,
-      fId: 1,
-      nodeId: 1,
-      nodeName: '发现报告',
-      state: '已完成',
-      x: 10,
-      y: 80
-    },
-    {
-      level: 2,
-      nodeId: '1-1',
-      nodeName: '信息接报',
-      state: '已完成',
-      x: 220,
-      y: 0
-    },
-    {
-      level: 2,
-      nodeId: '1-2',
-      nodeName: '信息核实',
-      state: '已完成',
-      x: 220,
-      y: 55
-    },
-    {
-      level: 2,
-      nodeId: '1-3',
-      nodeName: '快速评估',
-      state: '已完成',
-      x: 220,
-      y: 110
-    },
-    {
-      level: 2,
-      nodeId: '1-4',
-      nodeName: '信息上报',
-      state: '已完成',
-      x: 220,
-      y: 165
-    },
-    {
-      level: 1,
-      fId: 2,
-      nodeId: 2,
-      nodeName: '个案调查处置',
-      state: '进行中',
-      x: 10,
-      y: 295
-    },
-    {
-      level: 2,
-      twoFId: '2-1',
-      nodeId: '2-1',
-      nodeName: '李梦康',
-      state: '已完成',
-      x: 220,
-      y: 240
-    },
-    {
-      level: 2,
-      twoFId: '2-2',
-      nodeId: '2-2',
-
-      nodeName: '毛超',
-      state: '已完成',
-      x: 220,
-      y: 295
-    },
-    {
-      level: 2,
-      twoFId: '2-3',
-      nodeId: '2-3',
-      nodeName: '贾子敏',
-      state: '进行中',
-      x: 220,
-      y: 350
-    },
-    {
-      level: 3,
-      nodeId: '2-2-1',
-      nodeName: '病例管理',
-      state: '已完成',
-      x: 440,
-      y: 210
-    },
-    {
-      level: 3,
-      nodeId: '2-2-2',
-      nodeName: '流行病学调查',
-      state: '已完成',
-      x: 440,
-      y: 265
-    },
-    {
-      level: 3,
-      nodeId: '2-2-3',
-      nodeName: '实验室检测',
-      state: '已完成',
-      x: 440,
-      y: 320
-    },
-    {
-      level: 3,
-      nodeId: '2-2-4',
-      nodeName: '风险评估',
-      state: '已完成',
-      x: 440,
-      y: 375
-    },
-    {
-      level: 1,
-      fId: 3,
-      nodeId: 3,
-      nodeName: '风险人员和环境排查管控',
-      state: '进行中',
-      x: 10,
-      y: 480
-    },
-
-    {
-      level: 2,
-      twoFId: '3-1',
-      nodeId: '3-1',
-      nodeName: '段伟',
-      state: '已完成',
-      x: 220,
-      y: 420
-    },
-    {
-      level: 2,
-      twoFId: '3-2',
-      nodeId: '3-2',
-      nodeName: '陆成奇',
-      state: '已完成',
-      x: 220,
-      y: 475
-    },
-    {
-      level: 2,
-      twoFId: '3-3',
-      nodeId: '3-3',
-      nodeName: '曾强',
-      state: '进行中',
-      x: 220,
-      y: 530
-    },
-
-    {
-      level: 3,
-      twoFId: '3-3-1',
-      nodeId: '3-3-1',
-      nodeName: '病例管理',
-      state: '已完成',
-      x: 440,
-      y: 450
-    },
-    {
-      level: 3,
-      twoFId: '3-3-2',
-      nodeId: '3-3-2',
-      nodeName: '流行病学调查',
-      state: '已完成',
-      x: 440,
-      y: 505
-    },
-    {
-      level: 3,
-      twoFId: '3-3-2',
-      nodeId: '3-3-3',
-      nodeName: '实验室检测',
-      state: '进行中',
-      x: 440,
-      y: 560
-    },
-    {
-      level: 3,
-      twoFId: '3-3-3',
-      nodeId: '3-3-4',
-      nodeName: '风险人员管控',
-      state: '进行中',
-      x: 440,
-      y: 615
-    },
-    {
-      level: 3,
-      twoFId: '3-3-4',
-      nodeId: '3-3-5',
-      nodeName: '风险场所管控',
-      state: '进行中',
-      x: 440,
-      y: 670
-    },
-
-    { level: 1, fId: 4, nodeId: 4, nodeName: '区域风险排查管控', state: '未开始', x: 10, y: 620 },
-    { level: 1, fId: 5, nodeId: 5, nodeName: '结案', x: 10, y: 740 }
-  ],
-  dagLine: [
-    { from: 1, to: 2 },
-    { from: 2, to: 3 },
-    { from: 3, to: 4 },
-    { from: 4, to: 5 },
-    { from: 1, to: '1-1' },
-    { from: 1, to: '1-2' },
-    { from: 1, to: '1-3' },
-    { from: 1, to: '1-4' },
-    { from: 2, to: '2-1' },
-    { from: 2, to: '2-2' },
-    { from: 2, to: '2-3' },
-    { from: '2-2', to: '2-2-1' },
-    { from: '2-2', to: '2-2-2' },
-    { from: '2-2', to: '2-2-3' },
-    { from: '2-2', to: '2-2-4' },
-    { from: 3, to: '3-1' },
-    { from: 3, to: '3-2' },
-    { from: 3, to: '3-3' },
-    { from: '3-3', to: '3-3-1' },
-    { from: '3-3', to: '3-3-2' },
-    { from: '3-3', to: '3-3-3' },
-    { from: '3-3', to: '3-3-4' },
-    { from: '3-3', to: '3-3-5' }
-  ]
-}
-
-// **自动合并多条连线**
-// const mergeConnections = edges => {
-//   const targetMap = {}
-
-//   // 统计指向同一 target 的 source
-//   edges.forEach(edge => {
-//     if (!targetMap[edge.to]) {
-//       targetMap[edge.to] = []
-//     }
-//     targetMap[edge.to].push(edge.from)
-//   })
-
-//   const newEdges = []
-//   Object.keys(targetMap).forEach(target => {
-//     const sources = targetMap[target]
-//     if (sources.length > 1) {
-//       // 1. 创建“合并节点”
-//       const mergeNodeId = `merge_${target}`
-//       newEdges.push(...sources.map(src => ({ from: src, to: mergeNodeId })))
-//       newEdges.push({ from: mergeNodeId, to: target })
-//     } else {
-//       newEdges.push({ from: sources[0], to: target })
-//     }
-//   })
-
-//   return newEdges
-// }
-
-const mergeConnections = edges => {
-  const targetMap = {}
-  const mergeNodePositions = {} // 存储合并节点位置
-
-  // 统计指向同一 target 的 source
-  edges.forEach(edge => {
-    if (!targetMap[edge.to]) {
-      targetMap[edge.to] = []
-    }
-    targetMap[edge.to].push(edge.from)
-  })
-
-  const newEdges = []
-  Object.keys(targetMap).forEach(target => {
-    const sources = targetMap[target]
-    if (sources.length > 1) {
-      const mergeNodeId = `merge_${target}`
-
-      const targetNode = NodeData.dagNode.find(n => n.nodeId === target)
-      const sourceNodes = sources.map(src => NodeData.dagNode.find(n => n.nodeId === src)).filter(n => n)
-
-      if (targetNode && sourceNodes.length > 0) {
-        const maxSourceX = Math.max(...sourceNodes.map(n => n.x))
-        const mergeNodeX = (maxSourceX + targetNode.x) / 2
-        const mergeNodeY = targetNode.y
-
-        mergeNodePositions[mergeNodeId] = { x: mergeNodeX, y: mergeNodeY }
-      }
-
-      newEdges.push(...sources.map(src => ({ from: src, to: mergeNodeId })))
-      newEdges.push({ from: mergeNodeId, to: target })
-    } else {
-      newEdges.push({ from: sources[0], to: target })
-    }
-  })
-
-  // 添加合并节点到 NodeData
-  Object.keys(mergeNodePositions).forEach(mergeNodeId => {
-    NodeData.dagNode.push({
-      nodeId: mergeNodeId,
-      nodeName: '', // 合并节点不显示文本
-      state: '',
-      x: mergeNodePositions[mergeNodeId].x,
-      y: mergeNodePositions[mergeNodeId].y,
-      width: 10, // 使合并节点尽量小
-      height: 10
-    })
-  })
-
-  return newEdges
-}
-
-onMounted(() => {
-  graph = new Graph({
-    container: graphRef.value,
-    width: 580,
-    height: 801,
-    connecting: {
-      router: 'orth' // 自动优化连线
-      // connector: 'smooth', // 平滑曲线
-      // anchor: 'center',
-      // connectionPoint: 'anchor',
-      // allowBlank: false,
-      // snap: true
-    }
-  })
-
-  // const nodePositions = computeLayout()
-
-  // **添加节点**
-  NodeData.dagNode.forEach(node => {
-    graph.addNode({
-      id: node.nodeId,
-      shape: node.level === 1 ? 'custom-vue-node' : 'custom-vue-children-node',
-      x: node.x,
-      y: node.y,
-      data: {
-        label: node.nodeName,
-        state: node.state
-      }
-    })
-  })
-
-  // **处理合并连线**
-  const mergedEdges = mergeConnections(NodeData.dagLine)
-
-  // **添加合并后的连线**
-  mergedEdges.forEach(edge => {
-    graph.addEdge({
-      source: String(edge.from),
-      target: String(edge.to),
-      attrs: {
-        line: {
-          stroke: '#5B8FF9',
-          strokeDasharray: '5 5',
-          strokeWidth: 2,
-          targetMarker: {
-            tagName: 'image',
-            'xlink:href': imgIcon,
-            width: 24,
-            height: 24,
-            y: -12,
-            x: -24,
-            transform: 'rotate(0)' // 旋转箭头图片
-          }
-        }
-      },
-      router: { name: 'manhattan' }, // 自动贴合边缘
-      connector: { name: 'rounded' } // 让线条更圆滑
-    })
-  })
-})
-</script>
-
-<style scoped lang="scss">
-.container {
-  width: 100%;
-  height: 100%;
-}
-
-#graph_container {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/left/dialog/components/DisposalProgressContent copy.vue

@@ -1,366 +0,0 @@
-<template>
-  <div class="container">
-    <div id="graph_container" ref="graphRef"></div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { Graph } from '@antv/x6'
-import { register } from '@antv/x6-vue-shape'
-import ProgressNode from './common/ProgressNode.vue'
-import ProgressChildrenNode from './common/ProgressChildrenNode.vue'
-import imgIcon from '../../../../assets/img/节点连线箭头.png'
-
-// **注册 Vue 组件节点**
-register({
-  shape: 'custom-vue-node',
-  width: 140,
-  height: 60,
-  component: ProgressNode,
-  getComponent(node) {
-    return {
-      component: ProgressNode,
-      props: {
-        label: node.getData().label,
-        state: node.getData().state
-      }
-    }
-  }
-})
-
-register({
-  shape: 'custom-vue-children-node',
-  width: 140,
-  height: 60,
-  component: ProgressChildrenNode,
-  getComponent(node) {
-    return {
-      component: ProgressChildrenNode,
-      props: {
-        label: node.getData().label,
-        state: node.getData().state
-      }
-    }
-  }
-})
-
-// **画布**
-const graphRef = ref(null)
-let graph = null
-
-// **数据**
-const NodeData = {
-  dagNode: [
-    {
-      level: 1,
-      fId: 1,
-      nodeId: 1,
-      nodeName: '发现报告',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      nodeId: '1-1',
-      nodeName: '信息接报',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      nodeId: '1-2',
-      nodeName: '信息核实',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      nodeId: '1-3',
-      nodeName: '快速评估',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      nodeId: '1-4',
-      nodeName: '信息上报',
-      state: '已完成'
-    },
-    {
-      level: 1,
-      fId: 2,
-      nodeId: 2,
-      nodeName: '个案调查处置',
-      state: '进行中'
-    },
-    {
-      level: 2,
-      twoFId: '2-1',
-      nodeId: '2-1',
-      nodeName: '李梦康',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      twoFId: '2-2',
-      nodeId: '2-2',
-
-      nodeName: '毛超',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      twoFId: '2-3',
-      nodeId: '2-3',
-      nodeName: '贾子敏',
-      state: '进行中'
-    },
-    {
-      level: 3,
-      nodeId: '2-2-1',
-      nodeName: '病例管理',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      nodeId: '2-2-2',
-      nodeName: '流行病学调查',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      nodeId: '2-2-3',
-      nodeName: '实验室检测',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      nodeId: '2-2-4',
-      nodeName: '风险评估',
-      state: '已完成'
-    },
-    {
-      level: 1,
-      fId: 3,
-      nodeId: 3,
-      nodeName: '风险人员和环境排查管控',
-      state: '进行中'
-    },
-
-    {
-      level: 2,
-      twoFId: '3-1',
-      nodeId: '3-1',
-      nodeName: '段伟',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      twoFId: '3-2',
-      nodeId: '3-2',
-      nodeName: '陆成奇',
-      state: '已完成'
-    },
-    {
-      level: 2,
-      twoFId: '3-3',
-      nodeId: '3-3',
-      nodeName: '曾强',
-      state: '进行中'
-    },
-
-    {
-      level: 3,
-      twoFId: '3-3-1',
-      nodeId: '3-3-1',
-      nodeName: '病例管理',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      twoFId: '3-3-2',
-      nodeId: '3-3-2',
-      nodeName: '流行病学调查',
-      state: '已完成'
-    },
-    {
-      level: 3,
-      twoFId: '3-3-2',
-      nodeId: '3-3-2',
-      nodeName: '实验室检测',
-      state: '进行中'
-    },
-    {
-      level: 3,
-      twoFId: '3-3-3',
-      nodeId: '3-3-3',
-      nodeName: '风险人员管控',
-      state: '进行中'
-    },
-    {
-      level: 3,
-      twoFId: '3-3-4',
-      nodeId: '3-3-4',
-      nodeName: '风险场所管控',
-      state: '进行中'
-    },
-
-    { level: 1, fId: 4, nodeId: 4, nodeName: '区域风险排查管控', state: '未开始' },
-    { level: 1, fId: 5, nodeId: 5, nodeName: '结案' }
-  ],
-  dagLine: [
-    { from: 1, to: 2 },
-    { from: 2, to: 3 },
-    { from: 3, to: 4 },
-    { from: 4, to: 5 },
-    { from: 1, to: '1-1' },
-    { from: 1, to: '1-2' },
-    { from: 1, to: '1-3' },
-    { from: 1, to: '1-4' },
-    { from: 2, to: '2-1' },
-    { from: 2, to: '2-2' },
-    { from: 2, to: '2-3' },
-    { from: '2-2', to: '2-2-1' },
-    { from: '2-2', to: '2-2-2' },
-    { from: '2-2', to: '2-2-3' },
-    { from: '2-2', to: '2-2-4' },
-    { from: 3, to: '3-1' },
-    { from: 3, to: '3-2' },
-    { from: 3, to: '3-3' },
-    { from: '3-3', to: '3-3-1' },
-    { from: '3-3', to: '3-3-2' },
-    { from: '3-3', to: '3-3-3' },
-    { from: '3-3', to: '3-3-4' }
-  ]
-}
-
-// **自动合并多条连线**
-const mergeConnections = edges => {
-  const targetMap = {}
-
-  // 统计指向同一 target 的 source
-  edges.forEach(edge => {
-    if (!targetMap[edge.to]) {
-      targetMap[edge.to] = []
-    }
-    targetMap[edge.to].push(edge.from)
-  })
-
-  const newEdges = []
-  Object.keys(targetMap).forEach(target => {
-    const sources = targetMap[target]
-    if (sources.length > 1) {
-      // 1. 创建“合并节点”
-      const mergeNodeId = `merge_${target}`
-      newEdges.push(...sources.map(src => ({ from: src, to: mergeNodeId })))
-      newEdges.push({ from: mergeNodeId, to: target })
-    } else {
-      newEdges.push({ from: sources[0], to: target })
-    }
-  })
-
-  return newEdges
-}
-
-// **计算竖排三列布局**
-const computeLayout = () => {
-  const levels = {}
-  const columnSpacing = 160 // 列间距
-  const rowSpacing = 72 // 行间距
-
-  // **按 level 存储节点**
-  NodeData.dagNode.forEach(node => {
-    if (!levels[node.level]) {
-      levels[node.level] = []
-    }
-    levels[node.level].push(node)
-  })
-
-  const nodePositions = {}
-  let x = 50 // 第一列的 x 轴位置
-
-  Object.keys(levels).forEach(level => {
-    let y = 50 // 第一行 y 轴初始位置
-    const nodes = levels[level]
-
-    nodes.forEach(node => {
-      nodePositions[node.nodeId] = { x, y }
-      y += rowSpacing // **每个节点往下排列**
-    })
-
-    x += columnSpacing // **每列向右移动**
-  })
-
-  return nodePositions
-}
-
-// **初始化 X6 画布**
-onMounted(() => {
-  graph = new Graph({
-    container: graphRef.value,
-    width: 580,
-    height: 801,
-    connecting: {
-      router: 'orth' // 自动优化连线
-      // connector: 'smooth', // 平滑曲线
-      // anchor: 'center',
-      // connectionPoint: 'anchor',
-      // allowBlank: false,
-      // snap: true
-    }
-  })
-
-  const nodePositions = computeLayout()
-
-  // **添加节点**
-  NodeData.dagNode.forEach(node => {
-    graph.addNode({
-      id: node.nodeId,
-      shape: node.level === 1 ? 'custom-vue-node' : 'custom-vue-children-node',
-      x: nodePositions[node.nodeId].x,
-      y: nodePositions[node.nodeId].y,
-      data: {
-        label: node.nodeName,
-        state: node.state
-      }
-    })
-  })
-
-  // **处理合并连线**
-  const mergedEdges = mergeConnections(NodeData.dagLine)
-
-  // **添加合并后的连线**
-  mergedEdges.forEach(edge => {
-    graph.addEdge({
-      source: String(edge.from),
-      target: String(edge.to),
-      attrs: {
-        line: {
-          stroke: '#5B8FF9',
-          strokeDasharray: '5 5',
-          strokeWidth: 2,
-          targetMarker: {
-            tagName: 'image',
-            'xlink:href': imgIcon,
-            width: 24,
-            height: 24,
-            y: -12,
-             transform: 'rotate(0)' // 旋转箭头图片
-          }
-        }
-      },
-      router: { name: 'manhattan' }, // 自动贴合边缘
-      connector: { name: 'rounded' } // 让线条更圆滑
-    })
-  })
-})
-</script>
-
-<style scoped>
-.container {
-  width: 100%;
-  height: 100%;
-}
-
-#graph_container {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/left/dialog/components/DisposalProgressContentSecond.vue

@@ -5,182 +5,135 @@
         <template v-for="(item, index) in nodeData" :key="index">
           <div class="graph-container">
             <div class="first-container">
-              <div
-                class="line-top"
-                :style="{ opacity: index == 0 ? 0 : 1 }"
-              ></div>
+              <div class="line-top" :style="{ opacity: index == 0 ? 0 : 1 }"></div>
               <div class="first-box" @click="handleNodeClick(item)">
                 <div class="content">{{ item.nodeName }}</div>
-                <div
-                  class="status-box"
-                  :class="getStatus(item.state)"
-                  v-if="item.state"
-                >
+                <div class="status-box" :class="getStatus(item.state)" v-if="item.state">
                   {{ item.state }}
                 </div>
               </div>
-              <div
-                class="line-bottom"
-                :style="{ opacity: index == nodeData.length - 1 ? 0 : 1 }"
-              ></div>
+              <div class="line-bottom" :style="{ opacity: index == nodeData.length - 1 ? 0 : 1 }"></div>
             </div>
 
             <DisposalChildBox :data="item" @nodeClick="handleNodeClick" />
-            <div
-              class="node-data"
-              v-if="!item.children || item.children?.length == 0"
-            ></div>
+            <div class="node-data" v-if="!item.children || item.children?.length == 0"></div>
           </div>
         </template>
       </div>
     </el-scrollbar>
+
+    <!-- 病例管理节点弹窗 -->
+    <CaseManageNodeDialog v-if="dialogStore.caseManageNodeDialogOpen"></CaseManageNodeDialog>
+    <!-- 实验室检测节点弹窗 -->
+    <LaboratoryTestNodeDialog v-if="dialogStore.laboratoryTestNodeDialogOpen"></LaboratoryTestNodeDialog>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
-import DisposalChildBox from "./common/DisposalChildBox.vue";
+import { ref, onMounted } from 'vue'
+import DisposalChildBox from './common/DisposalChildBox.vue'
+import CaseManageNodeDialog from './dialog/CaseManageNodeDialog'
+import LaboratoryTestNodeDialog from './dialog/LaboratoryTestNodeDialog.vue'
+import { useDialogStore } from '@/store/dialog'
+let dialogStore = useDialogStore()
 
-const getStatus = (status) => {
-  if (status == "已完成") {
-    return "status-green";
+const getStatus = status => {
+  if (status == '已完成') {
+    return 'status-green'
   }
-  if (status == "进行中") {
-    return "status-red";
+  if (status == '进行中') {
+    return 'status-red'
   }
-  return "status-no";
-};
+  return 'status-no'
+}
 
 //点击节点
-const handleNodeClick = (item) => {
-  console.log(item);
-};
-
-// const nodeData = [
-//   {
-//     nodeId: 1,
-//     nodeName: "发现报告",
-//     state: "已完成",
-//     children: [
-//       { nodeId: "1-1", nodeName: "信息接报", state: "已完成" },
-//       { nodeId: "1-2", nodeName: "信息核实", state: "已完成" },
-//       { nodeId: "1-3", nodeName: "快速评估", state: "已完成" },
-//       { nodeId: "1-4", nodeName: "信息上报", state: "已完成" },
-//     ],
-//   },
-//   {
-//     nodeId: 2,
-//     nodeName: "个案调查处置",
-//     state: "进行中",
-//     children: [
-//       {
-//         nodeId: "2-1",
-//         nodeName: "张嘉佳",
-//         state: "已完成",
-//         children: [
-//           { nodeId: "2-2-1", nodeName: "病例管理", state: "已完成" },
-//           { nodeId: "2-2-2", nodeName: "流行病学调查", state: "已完成" },
-//           { nodeId: "2-2-3", nodeName: "实验室检测", state: "已完成" },
-//           { nodeId: "2-2-4", nodeName: "风险评估", state: "已完成" },
-//         ],
-//       },
-//     ],
-//   },
-//   {
-//     nodeId: 3,
-//     nodeName: "风险人员和环境排查管控",
-//     state: "进行中",
-//     children: [
-//       { nodeId: "3-1", nodeName: "段伟", state: "已完成" },
-//       { nodeId: "3-2", nodeName: "陆成奇", state: "已完成" },
-//       {
-//         nodeId: "3-3",
-//         nodeName: "曾强",
-//         state: "进行中",
-//         children: [
-//           { nodeId: "3-3-1", nodeName: "病例管理", state: "已完成" },
-//           { nodeId: "3-3-2", nodeName: "流行病学调查", state: "已完成" },
-//           { nodeId: "3-3-3", nodeName: "实验室检测", state: "进行中" },
-//           { nodeId: "3-3-4", nodeName: "风险人员管控", state: "进行中" },
-//           { nodeId: "3-3-5", nodeName: "风险场所管控", state: "进行中" },
-//         ],
-//       },
-//     ],
-//   },
-//   { nodeId: 4, nodeName: "区域风险排查管控", state: "未开始" },
-//   { nodeId: 5, nodeName: "结案" },
-// ];
+const handleNodeClick = item => {
+  console.log(item)
+  dialogStore.closeAllDialog()
+  if (item.nodeName === '病例管理') {
+    dialogStore.setCaseManageNodeDialogOpen(true)
+  } else if (item.nodeName === '实验室检测') {
+    dialogStore.setLaboratoryTestNodeDialogOpen(true)
+  }
+}
 
 const nodeData = [
   {
     nodeId: 1,
-    nodeName: "发现报告",
-    state: "已完成",
+    level: 1,
+    nodeName: '发现报告',
+    state: '已完成',
     children: [
-      { nodeId: "1-1", nodeName: "信息接报", state: "已完成" },
-      { nodeId: "1-2", nodeName: "信息核实", state: "已完成" },
-      { nodeId: "1-3", nodeName: "快速评估", state: "已完成" },
-      { nodeId: "1-4", nodeName: "信息上报", state: "已完成" },
-    ],
+      { nodeId: '1-1', level: 2, nodeName: '信息接报', state: '已完成' },
+      { nodeId: '1-2', level: 2, nodeName: '信息核实', state: '已完成' },
+      { nodeId: '1-3', level: 2, nodeName: '快速评估', state: '已完成' },
+      { nodeId: '1-4', level: 2, nodeName: '信息上报', state: '已完成' }
+    ]
   },
   {
     nodeId: 2,
-    nodeName: "个案调查处置",
-    state: "进行中",
+    level: 1,
+    nodeName: '个案调查处置',
+    state: '进行中',
     children: [
       {
-        nodeId: "2-1",
-        nodeName: "李梦康",
-        state: "已完成",
+        nodeId: '2-1',
+        level: 2,
+        nodeName: '李梦康',
+        state: '已完成'
       },
       {
-        nodeId: "2-2",
-        nodeName: "毛超",
-        state: "已完成",
+        nodeId: '2-2',
+        level: 2,
+        nodeName: '毛超',
+        state: '已完成',
         children: [
-          { nodeId: "2-2-1", nodeName: "病例管理", state: "已完成" },
-          { nodeId: "2-2-2", nodeName: "流行病学调查", state: "已完成" },
-          { nodeId: "2-2-3", nodeName: "实验室检测", state: "已完成" },
-          { nodeId: "2-2-4", nodeName: "风险评估", state: "已完成" },
-        ],
+          { nodeId: '2-2-1', level: 3, nodeName: '病例管理', state: '已完成' },
+          { nodeId: '2-2-2', level: 3, nodeName: '流行病学调查', state: '已完成' },
+          { nodeId: '2-2-3', level: 3, nodeName: '实验室检测', state: '已完成' },
+          { nodeId: '2-2-4', level: 3, nodeName: '风险评估', state: '已完成' }
+        ]
       },
-      { nodeId: "2-3", nodeName: "贾子敏", state: "进行中" },
-    ],
+      { nodeId: '2-3', level: 2, nodeName: '贾子敏', state: '进行中' }
+    ]
   },
   {
     nodeId: 3,
-    nodeName: "风险人员和环境排查管控",
-    state: "进行中",
+    level: 1,
+    nodeName: '风险人员和环境排查管控',
+    state: '进行中',
     children: [
-      { nodeId: "3-1", nodeName: "段伟", state: "已完成" },
-      { nodeId: "3-2", nodeName: "陆成奇", state: "已完成" },
+      { nodeId: '3-1', level: 2, nodeName: '段伟', state: '已完成' },
+      { nodeId: '3-2', level: 2, nodeName: '陆成奇', state: '已完成' },
       {
-        nodeId: "3-3",
-        nodeName: "曾强",
-        state: "进行中",
+        nodeId: '3-3',
+        nodeName: '曾强',
+        state: '进行中',
+        level: 2,
         children: [
-          { nodeId: "3-3-1", nodeName: "病例管理", state: "已完成" },
-          { nodeId: "3-3-2", nodeName: "流行病学调查", state: "已完成" },
-          { nodeId: "3-3-3", nodeName: "实验室检测", state: "进行中" },
-          { nodeId: "3-3-4", nodeName: "风险人员管控", state: "进行中" },
-          { nodeId: "3-3-5", nodeName: "风险场所管控", state: "进行中" },
-        ],
-      },
-    ],
+          { nodeId: '3-3-1', level: 3, nodeName: '病例管理', state: '已完成' },
+          { nodeId: '3-3-2', level: 3, nodeName: '流行病学调查', state: '已完成' },
+          { nodeId: '3-3-3', level: 3, nodeName: '实验室检测', state: '进行中' },
+          { nodeId: '3-3-4', level: 3, nodeName: '风险人员管控', state: '进行中' },
+          { nodeId: '3-3-5', level: 3, nodeName: '风险场所管控', state: '进行中' }
+        ]
+      }
+    ]
   },
-  { nodeId: 4, nodeName: "区域风险排查管控", state: "未开始" },
-  { nodeId: 5, nodeName: "结案" },
-];
+  { nodeId: 4, level: 1, nodeName: '区域风险排查管控', state: '未开始' },
+  { nodeId: 5, level: 1, nodeName: '结案' }
+]
 
 // **画布**
-const graphRef = ref(null);
+const graphRef = ref(null)
 
 function isLeafNode(d) {
-  return !d.children || d.children.length === 0;
+  return !d.children || d.children.length === 0
 }
 
 // **初始化 X6 画布**
-onMounted(() => {});
+onMounted(() => {})
 </script>
 
 <style land="scss" scoped>
@@ -230,12 +183,12 @@ onMounted(() => {});
       z-index: 1;
       &::after {
         position: absolute;
-        content: "";
+        content: '';
         width: 17px;
         height: 23px;
         left: -9px;
         bottom: 0px;
-        background-image: url("../../../../assets/img/节点连线箭头.png");
+        background-image: url('../../../../assets/img/节点连线箭头.png');
         background-size: 100% 100%;
         transform: rotate(90deg);
       }
@@ -316,20 +269,20 @@ onMounted(() => {});
       text-transform: none;
     }
     .status-green {
-      background-image: url("../../../../assets/img/Component 247.png");
+      background-image: url('../../../../assets/img/Component 247.png');
       background-size: 100% 100%;
       background-repeat: no-repeat;
       color: #9de05a;
     }
     .status-red {
-      background-image: url("../../../../assets/img/Component 246.png");
+      background-image: url('../../../../assets/img/Component 246.png');
       background-size: 150% 100%;
       background-position-x: 50%;
       background-repeat: no-repeat;
       color: #ff4a4a;
     }
     .status-no {
-      background-image: url("../../../../assets/img/Component 245.png");
+      background-image: url('../../../../assets/img/Component 245.png');
       background-size: 100% 100%;
       background-repeat: no-repeat;
       color: #c9c9c9;

src/views/left/dialog/components/common/DisposalChildBox.vue

@@ -2,58 +2,47 @@
   <div class="child-container">
     <div class="vertical-line" v-if="data?.children?.length > 0"></div>
     <template v-for="(item, index) in data.children" :key="index">
-      <div
-        class="child-box"
-        :class="{ first: index == 0, last: index == data.children?.length - 1 }"
-      >
+      <div class="child-box" :class="{ first: index == 0, last: index == data.children?.length - 1 }">
         <div class="left-line"></div>
 
         <div class="child-content" @click="handleNodeClick(item)">
           <div class="content">{{ item.nodeName }}</div>
-          <div
-            class="status-box"
-            v-if="item.state"
-            :class="getStatus(item.state)"
-          >
+          <div class="status-box" v-if="item.state" :class="getStatus(item.state)">
             {{ item.state }}
           </div>
         </div>
-        <DisposalChildBox
-          v-if="item?.children?.length > 0"
-          :data="item"
-          @nodeClick="handleNodeClick"
-        ></DisposalChildBox>
+        <DisposalChildBox v-if="item?.children?.length > 0" :data="item" @nodeClick="handleNodeClick"></DisposalChildBox>
       </div>
     </template>
   </div>
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from "vue";
+import { defineProps, defineEmits } from 'vue'
 const props = defineProps({
   data: {
     type: Object,
     default: () => {
-      return {};
-    },
-  },
-});
+      return {}
+    }
+  }
+})
 
-const emit = defineEmits(["nodeClick"]);
+const emit = defineEmits(['nodeClick'])
 
-const handleNodeClick = (item) => {
-  emit("nodeClick", item);
-};
+const handleNodeClick = item => {
+  emit('nodeClick', item)
+}
 
-const getStatus = (status) => {
-  if (status == "已完成") {
-    return "status-green";
+const getStatus = status => {
+  if (status == '已完成') {
+    return 'status-green'
   }
-  if (status == "进行中") {
-    return "status-red";
+  if (status == '进行中') {
+    return 'status-red'
   }
-  return "status-no";
-};
+  return 'status-no'
+}
 </script>
 
 <style lang="scss" scoped>
@@ -114,20 +103,20 @@ const getStatus = (status) => {
         text-transform: none;
       }
       .status-green {
-        background-image: url("../../../../../assets/img/Component 247.png");
+        background-image: url('../../../../../assets/img/Component 247.png');
         background-size: 100% 100%;
         background-repeat: no-repeat;
         color: #9de05a;
       }
       .status-red {
-        background-image: url("../../../../../assets/img/Component 246.png");
+        background-image: url('../../../../../assets/img/Component 246.png');
         background-size: 150% 100%;
         background-position-x: 50%;
         background-repeat: no-repeat;
         color: #ff4a4a;
       }
       .status-no {
-        background-image: url("../../../../../assets/img/Component 245.png");
+        background-image: url('../../../../../assets/img/Component 245.png');
         background-size: 100% 100%;
         background-repeat: no-repeat;
         color: #c9c9c9;
@@ -135,7 +124,7 @@ const getStatus = (status) => {
     }
     .left-line {
       position: absolute;
-      content: "";
+      content: '';
       width: 1px;
       top: 0px;
       bottom: 0px;
@@ -145,7 +134,7 @@ const getStatus = (status) => {
     &.first {
       > .left-line {
         position: absolute;
-        content: "";
+        content: '';
         width: 1px;
         top: 50%;
         bottom: 0px;
@@ -156,7 +145,7 @@ const getStatus = (status) => {
     &.last {
       > .left-line {
         position: absolute;
-        content: "";
+        content: '';
         width: 1px;
         bottom: 50%;
         top: 0px;
@@ -167,7 +156,7 @@ const getStatus = (status) => {
 
     &::after {
       position: absolute;
-      content: "";
+      content: '';
       width: 40px;
       height: 2px;
       left: -50px;
@@ -177,13 +166,13 @@ const getStatus = (status) => {
     }
     &::before {
       position: absolute;
-      content: "";
+      content: '';
       width: 25px;
       height: 18px;
       left: -30px;
       top: 50%;
       transform: translateY(-50%);
-      background-image: url("../../../../../assets/img/节点连线箭头.png");
+      background-image: url('../../../../../assets/img/节点连线箭头.png');
       background-size: 100% 100%;
     }
   }

src/views/left/dialog/components/dialog/CaseDetailDiaog.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="container">
+
+  </div>
+</template>
+<script setup>
+import { ref, watch, computed , reactive, toRefs, onBeforeMount, onMounted } from 'vue'
+
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/left/dialog/components/dialog/CaseManageNodeDialog.vue

@@ -0,0 +1,325 @@
+<template>
+  <div class="dialog_container">
+    <div class="dialog_container_header">
+      <div class="dialog_container_header_title">
+        <img :src="getImgSrc(dialogOptions.imgName)" alt="icon" />
+        <div>{{ dialogOptions.title }}</div>
+      </div>
+      <div class="dialog_container_header_btn">
+        <div class="btn_box">
+          <div class="img_close" @click="handleClose">
+            <img src="../../../../../assets/img/弹窗关闭.png" alt="close" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <el-select v-model="time" placeholder="日期(轮次)" popper-class="dialog_custom-select">
+        <el-option v-for="item in dialogStore.timeOptions" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+    </div>
+
+    <el-table
+      :data="dialogOptions.tableData"
+      class="dialog_table"
+      @row-click="handleRowClick"
+      :header-cell-style="{ backgroundColor: 'transparent', color: '#ffffff' }"
+      :row-class-name="tableRowClassName"
+    >
+      <el-table-column
+        v-for="(column, colIndex) in dialogOptions.tableColumns"
+        :key="`col_${colIndex}_${column.prop}`"
+        :type="column.type"
+        :prop="column.prop"
+        :label="column.label"
+        :width="column.width"
+        :align="column.align || 'center'"
+        :formatter="column.formatter"
+      >
+        <!-- 支持自定义列模板 -->
+        <template v-if="column.slot" #default="scope">
+          <slot :name="column.slot" :row="scope.row"></slot>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { useDialogStore } from '@/store/dialog'
+let dialogStore = useDialogStore()
+const emit = defineEmits(['close', 'button-click', 'row-click'])
+
+// const props = defineProps({
+//   options: {
+//     type: Object,
+//     required: true,
+//     default: () => ({
+//       imgName: '小标题',
+//       title: '检测结果',
+//       buttons: [],
+//       tableData: [],
+//       tableColumns: [
+//         // 添加默认列配置
+//         // { type: 'index', label: '序号', width: '80' },
+//         // { prop: 'name', label: '姓名' },
+//         // { prop: 'type', label: '类型' },
+//         // { prop: 'address', label: '现住址' },
+//         // { prop: 'relation', label: '与病例关系' },
+//         // { prop: 'lastContact', label: '末次接触日期' },
+//         // { prop: 'status', label: '管理状态' }
+//       ],
+//       activeIndex: {
+//         default: 0
+//       }
+//     }),
+//     validator: value => {
+//       return [
+//         'imgName',
+//         'title',
+//         'tableData',
+//         'tableColumns' // 添加列配置验证
+//       ].every(key => key in value)
+//     }
+//   }
+// })
+
+const dialogOptions = ref({
+  imgName: '小标题',
+  title: '检测结果',
+  activeIndex: 0,
+  buttons: [],
+  tableColumns: [
+    { type: 'index', label: '序号', width: '80' },
+    { prop: 'type', label: '样本分类' },
+    { prop: 'date', label: '日期/轮次' },
+    { prop: 'domeType', label: '样本类型' },
+    { prop: 'samplingNum', label: '采样数' },
+    { prop: 'testNum', label: '检测数' },
+    { prop: 'positiveNum', label: '阳性数' }
+  ],
+  tableData: [
+    // 数据...
+    { type: '病例', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
+    { type: '病例', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
+    { type: '密接', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
+    { type: '密接', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
+    { type: '病例', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
+    { type: '病例', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
+    { type: '密接', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
+    { type: '密接', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
+    { type: '咽拭子', date: '-', domeType: '-', samplingNum: '-', testNum: '-', positiveNum: '-' },
+    { type: '咽拭子', date: '-', domeType: '-', samplingNum: '-', testNum: '-', positiveNum: '-' },
+    { type: '咽拭子', date: '-', domeType: '-', samplingNum: '-', testNum: '-', positiveNum: '-' },
+    { type: '咽拭子', date: '-', domeType: '-', samplingNum: '-', testNum: '-', positiveNum: '-' },
+    { type: '咽拭子', date: '-', domeType: '-', samplingNum: '-', testNum: '-', positiveNum: '-' },
+    { type: '咽拭子', date: '-', domeType: '-', samplingNum: '-', testNum: '-', positiveNum: '-' },
+    { type: '咽拭子', date: '-', domeType: '-', samplingNum: '-', testNum: '-', positiveNum: '-' },
+  
+
+
+  ]
+})
+
+const btnActiveIndex = ref(0)
+
+// 图片路径处理方法
+const getImgSrc = picName => {
+  return new URL(`../../../../../assets/img/${picName}.png`, import.meta.url).href
+}
+
+// 关闭弹窗
+const handleClose = () => {
+  // emit('close')
+  dialogStore.setCaseManageNodeDialogOpen(false)
+}
+
+// 表格行点击
+const handleRowClick = row => {
+  emit('row-click', row)
+}
+
+const tableRowClassName = ({ row, rowIndex }) => {
+  return rowIndex % 2 === 0 ? 'single-row' : 'double-row'
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog_container {
+  position: absolute;
+  right: -580px;
+  top: 0px;
+  width: 582px;
+  height: 768px;
+  background: url(../../../../../assets/img/弹框-大.png) no-repeat;
+  background-size: 100% 100%;
+  padding: 40px 50px;
+  box-sizing: border-box;
+  // background-color: #fff;
+}
+
+.dialog_container_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 50px;
+  box-sizing: border-box;
+  // padding: 0 20px;
+}
+
+.dialog_container_header_title {
+  display: flex;
+  align-items: center;
+  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+  font-weight: 400;
+  font-size: 24px;
+  font-style: normal;
+  text-transform: none;
+  background: linear-gradient(to bottom, #ffffff 0%, #a4e9ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  > img {
+    width: 22px;
+    height: 22px;
+    margin-right: 10px;
+  }
+}
+
+.dialog_container_header_btn {
+  display: flex;
+  align-items: center;
+}
+
+.btn_box {
+  width: 100%;
+  display: flex;
+  // justify-content: end;
+  align-items: center;
+  // margin-right: 30px;
+  // margin-top: 6px;
+}
+
+.right_btn {
+  padding: 0 5px;
+  box-sizing: border-box;
+  height: 24px;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid rgba(111, 229, 255, 0.3);
+  font-family: Alibaba PuHuiTi 3;
+  font-weight: normal;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 24px;
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  text-align: center;
+  font-style: normal;
+  text-transform: none;
+  margin-left: 10px;
+}
+
+.right_btn_active {
+  background: linear-gradient(90deg, #59a7da 0%, rgba(22, 116, 178, 0) 100%);
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #6fe5ff;
+  font-family: Alibaba PuHuiTi 3;
+  font-weight: normal;
+  font-size: 14px;
+  color: #08ffe5;
+  font-style: normal;
+  text-transform: none;
+}
+
+.img_close {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+}
+
+.dialog_table {
+  width: 100%;
+  height: 580px;
+  margin-top: 15px;
+}
+
+// 表格行间距
+// :deep(.el-table__body) {
+//   -webkit-border-vertical-spacing: 6px;
+// }
+
+:deep(.el-table__inner-wrapper:before) {
+  height: 0;
+}
+
+:deep(.el-select__wrapper) {
+  min-height: 32px !important;
+}
+</style>
+
+<style lang="scss">
+//下拉框背景色
+.el-popper.is-light.dialog_custom-select {
+  // background-color: rgba(16,104,179, 0.3) !important;
+  background-color: rgba(16, 104, 179, 0.3) !important;
+  // border: 1px solid #1d85a9 !important;
+  border: 1px solid #1d85a9 !important;
+  background: #003861 !important;
+  box-shadow: inset 0px 0px 8px 0px rgba(64, 211, 255, 0.5) !important;
+  border-radius: 4px 4px 4px 4px;
+}
+
+.el-select-dropdown__empty,
+.el-select-dropdown__loading {
+  color: #ffffff !important;
+}
+
+.el-select__placeholder {
+  color: #ffffff !important;
+}
+
+//下拉框的链接小方块
+.dialog_custom-select.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::before {
+  // background: rgba(1, 28, 82, 0.8) !important;
+  // background-color: rgba(16,104,179, 0.3) !important;
+  display: none;
+  // border: 1px solid #1d85a9 !important;
+}
+
+.dialog_custom-select.el-popper[data-popper-placement^='top'] .el-popper__arrow::before {
+  // background: #254277 !important;
+  // background-color: rgba(16,104,179, 0.3)!important;
+  // border: 1px solid #1d85a9 !important;
+}
+
+//鼠标移动上去的选中色
+.dialog_custom-select {
+  .el-select-dropdown__item.is-hovering {
+    background: linear-gradient(270deg, rgba(6, 195, 255, 0.1) 0%, rgba(6, 195, 255, 0.68) 100%) !important;
+    border-radius: 2px 2px 2px 2px;
+  }
+
+  //下拉框的文本颜色
+  .dialog_custom-select .el-select-dropdown__item {
+    // color: #B3BCCE  !important;
+    // color: var(--SelectrColor) !important;
+    color: #ffffff !important;
+  }
+
+  //选中之后的颜色
+  .el-select-dropdown__item.selected {
+    // background: var(--SelectredBgc2) !important;
+    // color: var(--SelectredColor) !important;
+
+    background: linear-gradient(270deg, rgba(6, 195, 255, 0.1) 0%, rgba(6, 195, 255, 0.68) 100%) !important;
+    border-radius: 2px 2px 2px 2px;
+  }
+
+  padding: 0 2px !important;
+}
+
+.el-select {
+  --el-border-color-hover: rgba(10, 192, 246, 1);
+  --el-border-color: rgba(111, 229, 255, 0.3);
+}
+</style>

src/views/left/dialog/components/dialog/LaboratoryTestNodeDialog.vue

@@ -0,0 +1,362 @@
+<template>
+  <div class="dialog_container">
+    <div class="dialog_container_header">
+      <div class="dialog_container_header_title">
+        <img :src="getImgSrc(dialogOptions.imgName)" alt="icon" />
+        <div>{{ dialogOptions.title }}</div>
+      </div>
+      <div class="dialog_container_header_btn">
+        <div class="btn_box">
+          <div class="img_close" @click="handleClose">
+            <img src="../../../../../assets/img/弹窗关闭.png" alt="close" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <el-input v-model="time" placeholder="请输入要查询的内容"></el-input>
+    </div>
+    <div class="tab_box">
+      <div v-for="(item, index) in dialogOptions.buttons" :key="item.id" class="right_btn" :class="{ right_btn_active: btnActiveIndex === index }" @click="handleButtonClick(index)">
+        {{ item.title }}
+      </div>
+    </div>
+
+    <el-table
+      :data="dialogOptions.tableData"
+      class="dialog_table"
+      @row-click="handleRowClick"
+      :header-cell-style="{ backgroundColor: 'transparent', color: '#ffffff' }"
+      :row-class-name="tableRowClassName"
+    >
+      <el-table-column
+        v-for="(column, colIndex) in dialogOptions.tableColumns"
+        :key="`col_${colIndex}_${column.prop}`"
+        :type="column.type"
+        :prop="column.prop"
+        :label="column.label"
+        :width="column.width"
+        :align="column.align || 'center'"
+        :formatter="column.formatter"
+      >
+        <!-- 支持自定义列模板 -->
+        <template v-if="column.slot" #default="scope">
+          <slot :name="column.slot" :row="scope.row"></slot>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { useDialogStore } from '@/store/dialog'
+let dialogStore = useDialogStore()
+const emit = defineEmits(['close', 'button-click', 'row-click'])
+
+// const props = defineProps({
+//   options: {
+//     type: Object,
+//     required: true,
+//     default: () => ({
+//       imgName: '小标题',
+//       title: '检测结果',
+//       buttons: [],
+//       tableData: [],
+//       tableColumns: [
+//         // 添加默认列配置
+//         // { type: 'index', label: '序号', width: '80' },
+//         // { prop: 'name', label: '姓名' },
+//         // { prop: 'type', label: '类型' },
+//         // { prop: 'address', label: '现住址' },
+//         // { prop: 'relation', label: '与病例关系' },
+//         // { prop: 'lastContact', label: '末次接触日期' },
+//         // { prop: 'status', label: '管理状态' }
+//       ],
+//       activeIndex: {
+//         default: 0
+//       }
+//     }),
+//     validator: value => {
+//       return [
+//         'imgName',
+//         'title',
+//         'tableData',
+//         'tableColumns' // 添加列配置验证
+//       ].every(key => key in value)
+//     }
+//   }
+// })
+
+const dialogOptions = ref({
+  imgName: '小标题',
+  title: '病例列表',
+  activeIndex: 0,
+  buttons: [
+    { id: 0, title: '病例', active: true },
+    { id: 1, title: '密接', active: false },
+    { id: 2, title: '次密接', active: false }
+  ],
+  tableColumns: [
+    { type: 'index', label: '序号', width: '80' },
+    { prop: 'code', label: '病例编号' },
+    { prop: 'name', label: '姓名' }
+  ],
+  tableData: [
+    // 数据...
+    { code: '18-2024-1207-01-猴痘' ,name:'张嘉佳'},
+    { code: '05-2024-1207-01-猴痘' ,name:'孙忆枫'},
+    { code: '31-2024-1207-01-疟疾', name: '杨静云' },
+    { code: '31-2024-1207-01-疟疾' ,name:'王乐康'},
+    { code: '01-2024-1207-01-猩红热' ,name:'李怡悦'},
+    { code: '01-2024-1207-01-猩红热' ,name:'庞慧'},
+    { code: '01-2024-1207-01-猩红热' ,name:'李书易'},
+    { code: '01-2024-1207-01-猩红热' ,name:'胡小小'},
+    { code: '01-2024-1207-01-猩红热' ,name:'周乐心'},
+    { code: '01-2024-1207-01-猩红热' ,name:'杨松生'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'顾伦'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'王漫'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'尹丽娜'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'池子仪'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'李赫'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'傅彭薄'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '裴谊育' },
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'鲍业宝'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'黄隆心'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'侯彩蕊'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻04-2024-1207-01-聚集性呕吐腹泻' ,name:'冯立俏'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'宫臻'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'毛妹莲'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'孔崧谊'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'宁淑曼'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'明忱冶'},
+    { code: '04-2024-1207-01-聚集性呕吐腹泻' ,name:'叶洵歆'},
+
+  ]
+})
+
+const btnActiveIndex = ref(0)
+
+// 图片路径处理方法
+const getImgSrc = picName => {
+  return new URL(`../../../../../assets/img/${picName}.png`, import.meta.url).href
+}
+
+// 关闭弹窗
+const handleClose = () => {
+  // emit('close')
+  dialogStore.setLaboratoryTestNodeDialogOpen(false)
+}
+
+// 表格行点击
+const handleRowClick = row => {
+  emit('row-click', row)
+}
+
+// 按钮点击处理
+const handleButtonClick = index => {
+  btnActiveIndex.value = index
+  // emit('button-click', {
+  //   index,
+  //   button: props.options.buttons[index]
+  // })
+}
+
+const tableRowClassName = ({ row, rowIndex }) => {
+  return rowIndex % 2 === 0 ? 'single-row' : 'double-row'
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog_container {
+  position: absolute;
+  right: -400px;
+  top: -20px;
+  width: 396px;
+  height: 768px;
+  background: url(../../../../../assets/img/弹框-小.png) no-repeat;
+  background-size: 100% 100%;
+  padding: 40px 50px;
+  box-sizing: border-box;
+  // background-color: #fff;
+}
+
+.dialog_container_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 50px;
+  box-sizing: border-box;
+  // padding: 0 20px;
+}
+
+.dialog_container_header_title {
+  display: flex;
+  align-items: center;
+  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+  font-weight: 400;
+  font-size: 24px;
+  font-style: normal;
+  text-transform: none;
+  background: linear-gradient(to bottom, #ffffff 0%, #a4e9ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  > img {
+    width: 22px;
+    height: 22px;
+    margin-right: 10px;
+  }
+}
+
+.tab_box {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+  padding: 0 30px;
+  box-sizing: border-box;
+}
+
+.right_btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  // padding: 0 10px;
+  font-family: Alimama ShuHeiTi;
+  font-weight: bold;
+  color: #8dbfee;
+  font-style: italic;
+  background: linear-gradient(0deg, rgba(239, 251, 255, 0.34) 0%, rgba(0, 0, 0, 0.34) 11.9140625%, rgba(255, 254, 254, 0.34) 100%);
+  opacity: 0.85;
+  -webkit-background-clip: text;
+  // margin-right: 20px;
+}
+
+
+.right_btn_active {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 90px;
+  height: 32px;
+  text-align: center;
+  background: url(../../../../../assets/img/tab选中.png) no-repeat;
+  background-size: 100% 100%;
+  // border-radius: 4px 4px 4px 4px;
+  // border: 1px solid #6fe5ff;
+  font-family: Alimama ShuHeiTi;
+  font-weight: bold;
+  font-size: 18px;
+  color: #daedff;
+  font-style: italic;
+}
+
+.img_close {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+}
+
+.dialog_table {
+  width: 100%;
+  height: 540px;
+}
+
+// 表格行间距
+// :deep(.el-table__body) {
+//   -webkit-border-vertical-spacing: 6px;
+// }
+
+/* 防止文字模糊 */
+
+
+:deep(.el-table__inner-wrapper:before) {
+  height: 0;
+}
+
+:deep(.el-select__wrapper) {
+  min-height: 32px !important;
+}
+
+
+</style>
+
+<style lang="scss">
+//下拉框背景色
+.el-popper.is-light.dialog_custom-select {
+  // background-color: rgba(16,104,179, 0.3) !important;
+  background-color: rgba(16, 104, 179, 0.3) !important;
+  // border: 1px solid #1d85a9 !important;
+  border: 1px solid #1d85a9 !important;
+  background: #003861 !important;
+  box-shadow: inset 0px 0px 8px 0px rgba(64, 211, 255, 0.5) !important;
+  border-radius: 4px 4px 4px 4px;
+}
+
+.el-select-dropdown__empty,
+.el-select-dropdown__loading {
+  color: #ffffff !important;
+}
+
+.el-select__placeholder {
+  color: #ffffff !important;
+}
+
+//下拉框的链接小方块
+.dialog_custom-select.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::before {
+  // background: rgba(1, 28, 82, 0.8) !important;
+  // background-color: rgba(16,104,179, 0.3) !important;
+  display: none;
+  // border: 1px solid #1d85a9 !important;
+}
+
+.dialog_custom-select.el-popper[data-popper-placement^='top'] .el-popper__arrow::before {
+  // background: #254277 !important;
+  // background-color: rgba(16,104,179, 0.3)!important;
+  // border: 1px solid #1d85a9 !important;
+}
+
+//鼠标移动上去的选中色
+.dialog_custom-select {
+  .el-select-dropdown__item.is-hovering {
+    background: linear-gradient(270deg, rgba(6, 195, 255, 0.1) 0%, rgba(6, 195, 255, 0.68) 100%) !important;
+    border-radius: 2px 2px 2px 2px;
+  }
+
+  //下拉框的文本颜色
+  .dialog_custom-select .el-select-dropdown__item {
+    // color: #B3BCCE  !important;
+    // color: var(--SelectrColor) !important;
+    color: #ffffff !important;
+  }
+
+  //选中之后的颜色
+  .el-select-dropdown__item.selected {
+    // background: var(--SelectredBgc2) !important;
+    // color: var(--SelectredColor) !important;
+
+    background: linear-gradient(270deg, rgba(6, 195, 255, 0.1) 0%, rgba(6, 195, 255, 0.68) 100%) !important;
+    border-radius: 2px 2px 2px 2px;
+  }
+
+  padding: 0 2px !important;
+}
+
+.el-select {
+  --el-border-color-hover: rgba(10, 192, 246, 1);
+  --el-border-color: rgba(111, 229, 255, 0.3);
+}
+
+/* 单行背景色 */
+.dialog_table .single-row {
+  background-color: rgba(27, 130, 183, 0.22) !important;
+}
+
+/* 双行背景色 */
+.dialog_table .double-row {
+  background-color: rgba(27, 130, 183, 0.12) !important;
+}
+
+</style>

src/views/left/modules/ReportDisposal.vue

@@ -219,18 +219,18 @@ let riskReportObj = ref({
     { id: 1, level: 'A', count: 1 },
     { id: 2, level: 'B', count: 0 },
     { id: 3, level: 'C', count: 2 },
-    { id: 4, level: 'D', count: 3 }
+    { id: 4, level: 'D', count: 2 }
   ]
 })
 
 let riskOverViewObj = ref({
   name: '当年累计',
-  count: 102,
+  count: 132,
   levelList: [
     { id: 1, level: 'A', count: 12 },
-    { id: 2, level: 'B', count: 51 },
-    { id: 3, level: 'C', count: 33 },
-    { id: 4, level: 'D', count: 42 }
+    { id: 2, level: 'B', count: 42 },
+    { id: 3, level: 'C', count: 26 },
+    { id: 4, level: 'D', count: 52 }
   ]
 })
 const riskOverViewButtons = ref([
@@ -255,24 +255,24 @@ const timeButtons = ref([
 // 风险处置
 const riskTwoViewObj = ref({
   name: '处置中',
-  count: 102,
+  count: 76,
   levelList: [
-    { id: 1, level: 'A', count: 12 },
-    { id: 2, level: 'B', count: 51 },
-    { id: 3, level: 'C', count: 33 },
-    { id: 4, level: 'D', count: 42 }
+    { id: 1, level: 'A', count: 11 },
+    { id: 2, level: 'B', count: 8 },
+    { id: 3, level: 'C', count: 35 },
+    { id: 4, level: 'D', count: 22 }
   ]
 })
 
 // 重大活动保障
 const majorEventGuaranteeObj = ref({
   name: '处置中',
-  count: 102,
+  count: 55,
   levelList: [
-    { id: 1, level: 'A', count: 12 },
-    { id: 2, level: 'B', count: 51 },
-    { id: 3, level: 'C', count: 33 },
-    { id: 4, level: 'D', count: 42 }
+    { id: 1, level: 'A', count: 13 },
+    { id: 2, level: 'B', count: 9 },
+    { id: 3, level: 'C', count: 26 },
+    { id: 4, level: 'D', count: 7 }
   ]
 })
 
@@ -283,7 +283,7 @@ const riskClosedCaseObj = ref({
   levelList: [
     { id: 1, level: 'A', count: 1 },
     { id: 2, level: 'B', count: 0 },
-    { id: 3, level: 'C', count: 2 },
+    { id: 3, level: 'C', count: 1 },
     { id: 4, level: 'D', count: 3 },
     { id: 4, level: '突发', count: 3 }
   ]