风险列表切换逻辑处理

src/assets/styles/index.scss

@@ -1,20 +1,37 @@
+
+
+@font-face {
+  src: url('../font/YouSheBiaoTiHei.ttf') format('truetype');
+  font-family: 'YouSheBiaoTiHei';
+}
+
+@font-face {
+  src: url('../font/AliayRegular.ttf') format('truetype');
+  font-family: 'Alibaba PuHuiTi';
+}
+
 body {
   height: 100%;
   margin: 0;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  // font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }
 
-@font-face {
-  src: url('../font/YouSheBiaoTiHei.ttf') format('truetype');
-  font-family: 'YouSheBiaoTiHei';
+
+html, body {
+  touch-action: manipulation; /* 阻止默认的双击缩放行为 */
+  user-select: none; /* 阻止文本选择，进一步减少误操作 */
 }
 
-@font-face {
-  src: url('../font/AliayRegular.ttf') format('truetype');
-  font-family: 'Alibaba PuHuiTi';
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
 }
 
 // 下拉框

src/store/riskTable.js

@@ -0,0 +1,62 @@
+import { defineStore } from 'pinia'
+
+export const useRiskTableStore = defineStore('riskTable', {
+  state: () => {
+    return {
+      initShow: true, // 报告处置
+      bigRiskTableShow: false, //大风险列表
+      disposalShow: false, //处置事件
+
+      currentBackground:1,
+      comeFrom: 0, // 存储当前高亮按钮的索引
+    }
+  },
+  actions: {
+    setComeFrom (val) {
+      this.comeFrom = val
+    },
+
+    getComeFrom () {
+      return this.comeFrom
+    },
+
+    setInitShow (val) {
+      this.initShow = val
+    },
+
+    getInitShow () {
+      return this.initShow
+    },
+
+    setBigRiskTableShow (val) {
+      this.bigRiskTableShow = val
+    },
+
+    getBigRiskTableShow () {
+      return this.bigRiskTableShow
+    },
+
+    setDisposalShow (val) {
+      this.disposalShow = val
+    },
+
+    getDisposalShow () {
+      return this.disposalShow
+    },
+
+    // 处置进展tab
+    setCurrentBackground (val) {
+      this.currentBackground = val
+    },
+
+    getCurrentBackground () {
+      return this.currentBackground
+    },
+
+  },
+  // 使用插件的配置选项
+  persist: {
+    key: 'risk-table-store',// 自定义存储的键名
+    storage: localStorage // 可以改为sessionStorage
+  }
+})

src/views/left/comp/dispose/CaseHandling.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 个案处置 -->
   <div class="risk_profile_container">
     <!-- 1.==================== -->
     <HeaderBoxContent :typeList="typeList" :headerObj="headerObj"></HeaderBoxContent>
@@ -303,6 +304,7 @@ let dialogStore = useDialogStore()
 console.log(dialogStore, 'dialogStore')
 
 const headerObj = ref({
+  tabTitle:'个案处置',
   level: 'B',
   title: '05-2024-1210-01-不明原因肺炎',
   typeList: ['风险个案', '突发公共卫生事件(II级)']

src/views/left/comp/dispose/InformationReport.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 信息报告 -->
   <div class="risk_profile_container">
     <!-- 1.==================== -->
      <HeaderBoxContent  :headerObj="headerObj"></HeaderBoxContent>
@@ -85,6 +86,7 @@ const stepList = ref([
 ]);
 
 const headerObj = ref({
+  tabTitle:'信息报告',
   level:'A',
   title:'05-2024-1210-01-不明原因肺炎',
   typeList: [],

src/views/left/comp/dispose/RiskProfile.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 风险概括 -->
   <div class="risk_profile_container">
     <!-- 1.==================== -->
     <HeaderBoxContent :headerObj="headerObj"></HeaderBoxContent>
@@ -207,6 +208,7 @@ import { useDialogStore } from '@/store/dialog'
 let dialogStore = useDialogStore()
 
 const headerObj = ref({
+  tabTitle:'风险概况',
   level: 'C',
   title: '05-2024-1210-01-不明原因肺炎',
   typeList: ['风险个案']

src/views/left/comp/dispose/common/HeaderBoxContent.vue

@@ -1,43 +1,50 @@
 <template>
-   <div class="risk_profile_header">
-      <div class="risk_profile_title">
-        <!-- <img src="../../../../assets/img/levelA.png" alt="">
+  <div class="risk_profile_header">
+    <div class="risk_profile_title">
+      <!-- <img src="../../../../assets/img/levelA.png" alt="">
       <img src="../../../../assets/img/levelB.png" alt=""> -->
-        <img :src="getImgSrc(level)" alt="" />
-        <!-- <img src="../../../../assets/img/levelD.png" alt=""> -->
-        <div class="risk_profile_name">05-2024-1210-01-不明原因肺炎</div>
-        <div class="risk_profile_type_box">
-          <div class="risk_profile_type" v-for="item in typeList">{{ item }}</div>
-          <!-- <div class="risk_profile_type">突发公共卫生事件(II级)</div> -->
-        </div>
-      </div>
-      <div class="risk_profile_change_btn">
-        <!-- 切换风险 -->
+      <img :src="getImgSrc(level)" alt="" />
+      <!-- <img src="../../../../assets/img/levelD.png" alt=""> -->
+      <div class="risk_profile_name">05-2024-1210-01-不明原因肺炎</div>
+      <div class="risk_profile_type_box">
+        <div class="risk_profile_type" v-for="item in typeList">{{ item }}</div>
+        <!-- <div class="risk_profile_type">突发公共卫生事件(II级)</div> -->
       </div>
     </div>
+    <div class="risk_profile_change_btn" @click="goRiskTable">
+      <!-- 切换风险 -->
+      <img src="../../../../../assets/img/切换.png" alt="" />
+      <div>{{ tabTitle === '信息报告' ? '切换事件' : '切换风险' }}</div>
+    </div>
+  </div>
 </template>
 <script setup>
-import { ref, watch, computed , reactive, toRefs, onBeforeMount, onMounted } from 'vue'
+import { ref, watch, computed, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
+import { useRiskTableStore } from '@/store/riskTable.js'
+let riskTableStore = useRiskTableStore()
+
+import { useCommonStore } from '@/store/common.js'
+let commonStore = useCommonStore()
 
 const props = defineProps({
-  headerObj:{ type: Object, default: {} },
+  headerObj: { type: Object, default: {} }
   // title: { type: String, default: '' },
   // level: { type: String, default: 'A' },
   // typeList:{ type: Array, default: [] },
-
 })
 
 const level = ref('')
-const title =ref('')
-const typeList =ref([])
+const title = ref('')
+const typeList = ref([])
+const tabTitle = ref('')
 
 watch(
   () => props.headerObj,
   (newObj, oldObj) => {
-    level.value =newObj.level
-    title.value =newObj.title
-    typeList.value =newObj.typeList
-
+    level.value = newObj.level
+    title.value = newObj.title
+    typeList.value = newObj.typeList
+    tabTitle.value = newObj.tabTitle
   },
   {
     deep: true,
@@ -45,87 +52,116 @@ watch(
   }
 )
 
-function getImgSrc (picName) {
+function goRiskTable() {
+  // commonStore.setActiveIndex(0)
+  riskTableStore.setInitShow(false)
+  riskTableStore.setBigRiskTableShow(true)
+  riskTableStore.setDisposalShow(false)
+  riskTableStore.setComeFrom( tabTitle.value)
+}
+
+function getImgSrc(picName) {
   return new URL(`../../../../../assets/img/level${picName}.png`, import.meta.url).href
 }
 </script>
 <style lang="scss" scoped>
-  .risk_profile_header {
-    width: 100%;
-    height: 50px;
+.risk_profile_header {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+
+  .risk_profile_title {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    margin-bottom: 10px;
+    gap: 20px;
 
-    .risk_profile_title {
-      display: flex;
-      align-items: center;
-      gap: 20px;
+    > img {
+      width: 40px;
+      height: 37px;
+    }
 
-      > img {
-        width: 40px;
-        height: 37px;
-      }
+    .risk_profile_name {
+      // width: 352px;
+      font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+      font-weight: normal;
+      font-size: 24px;
+      color: #e2ffff;
+      line-height: 24px;
+      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+
+      /* 金属光泽渐变效果 */
+      background: linear-gradient(to top, #49ffff 4%, #ffffff 100%);
+      -webkit-background-clip: text;
+      /* 文字应用渐变 */
+      background-clip: text;
+
+      /* 使文字透明，背景渐变会应用到文字 */
+      color: transparent;
+
+      /* 光泽效果：文本阴影 */
+      // text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.4);
+
+      /* 给文字加一些柔和的过渡效果 */
+      // transition: all 0.3s ease;
+      font-style: italic;
+      // transform: skewX(-5deg);
+    }
 
-      .risk_profile_name {
-        // width: 352px;
-        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+    .risk_profile_type_box {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+
+      .risk_profile_type {
+        height: 24px;
+        width: 158px;
+        background: url(../../../../../assets/img/待核实.png) no-repeat;
+        background-size: 100% 100%;
+        font-family: Alibaba PuHuiTi 30;
         font-weight: normal;
-        font-size: 24px;
-        color: #e2ffff;
+        font-size: 14px;
+        color: #ffd15c;
         line-height: 24px;
         text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-        text-align: left;
+        text-align: center;
         font-style: normal;
         text-transform: none;
-
-        /* 金属光泽渐变效果 */
-        background: linear-gradient(to top, #49ffff 4%, #ffffff 100%);
-        -webkit-background-clip: text;
-        /* 文字应用渐变 */
-        background-clip: text;
-
-        /* 使文字透明，背景渐变会应用到文字 */
-        color: transparent;
-
-        /* 光泽效果：文本阴影 */
-        // text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.4);
-
-        /* 给文字加一些柔和的过渡效果 */
-        // transition: all 0.3s ease;
-        font-style: italic;
-        // transform: skewX(-5deg);
-      }
-
-      .risk_profile_type_box {
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-
-        .risk_profile_type {
-          height: 24px;
-          width: 158px;
-          background: url(../../../../../assets/img/待核实.png) no-repeat;
-          background-size: 100% 100%;
-          font-family:  Alibaba PuHuiTi 30;
-          font-weight: normal;
-          font-size: 14px;
-          color: #ffd15c;
-          line-height: 24px;
-          text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-          text-align: center;
-          font-style: normal;
-          text-transform: none;
-        }
       }
     }
+  }
 
-    .risk_profile_change_btn {
-      width: 64px;
-      height: 50px;
-      background: url(../../../../../assets/img/changeRisk.png) no-repeat;
-      background-size: 100% 100%;
+  .risk_profile_change_btn {
+    width: 64px;
+    height: 55px;
+    // background: url(../../../../../assets/img/changeRisk.png) no-repeat;
+    // background-size: 100% 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    background: rgba(16, 252, 255, 0.25);
+    font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+    font-weight: normal;
+    font-size: 14px;
+    color: #50e0ff;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-style: normal;
+    text-transform: none;
+    padding: 4px;
+    box-sizing: border-box;
+    >img{
+      width: 24px;
+      height: 24px;
+    }
+    >div{
+      // margin-top: 5px;
     }
   }
+}
 </style>

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

@@ -0,0 +1,393 @@
+<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)
+
+  handleLayout()
+})
+
+// 画布格式化
+const handleLayout = () => {
+  const g = new dagre.graphlib.Graph()
+
+  // 设置图的属性
+  g.setGraph({
+    rankdir: 'LR' // 设置布局方向为横向，从左到右
+  })
+
+  g.setDefaultEdgeLabel(() => ({}))
+
+  // 获取 X6 的节点
+  const nodes = graph.getNodes()
+  nodes.forEach(node => {
+    const { width, height } = node.size()
+    g.setNode(node.id, { width, height })
+  })
+
+  // 获取 X6 的边
+  const edges = graph.getEdges()
+  edges.forEach(edge => {
+    g.setEdge(edge.getSourceCellId(), edge.getTargetCellId())
+  })
+
+  // 运行 dagre 布局算法
+  dagre.layout(g)
+
+  // 根据布局结果更新节点位置
+  g.nodes().forEach(id => {
+    const node = g.node(id)
+    const graphNode = graph.getCellById(id)
+    if (graphNode) {
+      graphNode.position(node.x, node.y)
+    }
+  })
+}
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+#graph_container {
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,350 @@
+<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

@@ -0,0 +1,401 @@
+<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

@@ -0,0 +1,412 @@
+<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.vue

@@ -0,0 +1,366 @@
+<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/DisposalProgressContent.vue

@@ -15,7 +15,7 @@ import imgIcon from '../../../../assets/img/节点连线箭头.png'
 // **注册 Vue 组件节点**
 register({
   shape: 'custom-vue-node',
-  width: 140,
+  width: 136,
   height: 60,
   component: ProgressNode,
   getComponent(node) {
@@ -31,7 +31,7 @@ register({
 
 register({
   shape: 'custom-vue-children-node',
-  width: 140,
+  width: 121,
   height: 60,
   component: ProgressChildrenNode,
   getComponent(node) {
@@ -57,45 +57,59 @@ const NodeData = {
       fId: 1,
       nodeId: 1,
       nodeName: '发现报告',
-      state: '已完成'
+      state: '已完成',
+      x: 10,
+      y: 80
     },
     {
       level: 2,
       nodeId: '1-1',
       nodeName: '信息接报',
-      state: '已完成'
+      state: '已完成',
+      x: 240,
+      y: 0
     },
     {
       level: 2,
       nodeId: '1-2',
       nodeName: '信息核实',
-      state: '已完成'
+      state: '已完成',
+      x: 240,
+      y: 55
     },
     {
       level: 2,
       nodeId: '1-3',
       nodeName: '快速评估',
-      state: '已完成'
+      state: '已完成',
+      x: 240,
+      y: 110
     },
     {
       level: 2,
       nodeId: '1-4',
       nodeName: '信息上报',
-      state: '已完成'
+      state: '已完成',
+      x: 240,
+      y: 165
     },
     {
       level: 1,
       fId: 2,
       nodeId: 2,
       nodeName: '个案调查处置',
-      state: '进行中'
+      state: '进行中',
+      x: 10,
+      y: 295
     },
     {
       level: 2,
       twoFId: '2-1',
       nodeId: '2-1',
       nodeName: '李梦康',
-      state: '已完成'
+      state: '已完成',
+      x: 240,
+      y: 240
     },
     {
       level: 2,
@@ -103,45 +117,59 @@ const NodeData = {
       nodeId: '2-2',
 
       nodeName: '毛超',
-      state: '已完成'
+      state: '已完成',
+      x: 240,
+      y: 295
     },
     {
       level: 2,
       twoFId: '2-3',
       nodeId: '2-3',
       nodeName: '贾子敏',
-      state: '进行中'
+      state: '进行中',
+      x: 240,
+      y: 350
     },
     {
       level: 3,
       nodeId: '2-2-1',
       nodeName: '病例管理',
-      state: '已完成'
+      state: '已完成',
+      x: 420,
+      y: 210
     },
     {
       level: 3,
       nodeId: '2-2-2',
       nodeName: '流行病学调查',
-      state: '已完成'
+      state: '已完成',
+      x: 420,
+      y: 265
     },
     {
       level: 3,
       nodeId: '2-2-3',
       nodeName: '实验室检测',
-      state: '已完成'
+      state: '已完成',
+      x: 420,
+      y: 320
     },
     {
       level: 3,
       nodeId: '2-2-4',
       nodeName: '风险评估',
-      state: '已完成'
+      state: '已完成',
+      x: 420,
+      y: 375
     },
     {
       level: 1,
       fId: 3,
       nodeId: 3,
       nodeName: '风险人员和环境排查管控',
-      state: '进行中'
+      state: '进行中',
+      x: 10,
+      y: 480
     },
 
     {
@@ -149,21 +177,27 @@ const NodeData = {
       twoFId: '3-1',
       nodeId: '3-1',
       nodeName: '段伟',
-      state: '已完成'
+      state: '已完成',
+      x: 240,
+      y: 420
     },
     {
       level: 2,
       twoFId: '3-2',
       nodeId: '3-2',
       nodeName: '陆成奇',
-      state: '已完成'
+      state: '已完成',
+      x: 240,
+      y: 475
     },
     {
       level: 2,
       twoFId: '3-3',
       nodeId: '3-3',
       nodeName: '曾强',
-      state: '进行中'
+      state: '进行中',
+      x: 240,
+      y: 530
     },
 
     {
@@ -171,39 +205,49 @@ const NodeData = {
       twoFId: '3-3-1',
       nodeId: '3-3-1',
       nodeName: '病例管理',
-      state: '已完成'
+      state: '已完成',
+       x: 420,
+       y:450
     },
     {
       level: 3,
       twoFId: '3-3-2',
       nodeId: '3-3-2',
       nodeName: '流行病学调查',
-      state: '已完成'
+      state: '已完成',
+       x: 420,
+       y:505
     },
     {
       level: 3,
       twoFId: '3-3-2',
-      nodeId: '3-3-2',
+      nodeId: '3-3-3',
       nodeName: '实验室检测',
-      state: '进行中'
+      state: '进行中',
+       x: 420,
+       y:560
     },
     {
       level: 3,
       twoFId: '3-3-3',
-      nodeId: '3-3-3',
+      nodeId: '3-3-4',
       nodeName: '风险人员管控',
-      state: '进行中'
+      state: '进行中',
+       x: 420,
+       y:615
     },
     {
       level: 3,
       twoFId: '3-3-4',
-      nodeId: '3-3-4',
+      nodeId: '3-3-5',
       nodeName: '风险场所管控',
-      state: '进行中'
+      state: '进行中',
+       x: 420,
+       y:670
     },
 
-    { level: 1, fId: 4, nodeId: 4, nodeName: '区域风险排查管控', state: '未开始' },
-    { level: 1, fId: 5, nodeId: 5, nodeName: '结案' }
+    { 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 },
@@ -227,7 +271,8 @@ const NodeData = {
     { 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-4' },
+    { from: '3-3', to: '3-3-5' },
   ]
 }
 
@@ -260,36 +305,36 @@ const mergeConnections = edges => {
 }
 
 // **计算竖排三列布局**
-const computeLayout = () => {
-  const levels = {}
-  const columnSpacing = 160 // 列间距
-  const rowSpacing = 72 // 行间距
+// 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)
-  })
+//   // **按 level 存储节点**
+//   NodeData.dagNode.forEach(node => {
+//     if (!levels[node.level]) {
+//       levels[node.level] = []
+//     }
+//     levels[node.level].push(node)
+//   })
 
-  const nodePositions = {}
-  let x = 50 // 第一列的 x 轴位置
+//   const nodePositions = {}
+//   let x = 50 // 第一列的 x 轴位置
 
-  Object.keys(levels).forEach(level => {
-    let y = 50 // 第一行 y 轴初始位置
-    const nodes = levels[level]
+//   Object.keys(levels).forEach(level => {
+//     let y = 50 // 第一行 y 轴初始位置
+//     const nodes = levels[level]
 
-    nodes.forEach(node => {
-      nodePositions[node.nodeId] = { x, y }
-      y += rowSpacing // **每个节点往下排列**
-    })
+//     nodes.forEach(node => {
+//       nodePositions[node.nodeId] = { x, y }
+//       y += rowSpacing // **每个节点往下排列**
+//     })
 
-    x += columnSpacing // **每列向右移动**
-  })
+//     x += columnSpacing // **每列向右移动**
+//   })
 
-  return nodePositions
-}
+//   return nodePositions
+// }
 
 // **初始化 X6 画布**
 onMounted(() => {
@@ -307,15 +352,15 @@ onMounted(() => {
     }
   })
 
-  const nodePositions = computeLayout()
+  // 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,
+      x: node.x,
+      y: node.y,
       data: {
         label: node.nodeName,
         state: node.state
@@ -342,6 +387,7 @@ onMounted(() => {
             width: 24,
             height: 24,
             y: -12,
+            x:-10,
              transform: 'rotate(0)' // 旋转箭头图片
           }
         }

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

@@ -55,15 +55,17 @@ export default {
 .circle-node {
   position: relative;
   width: 100%;
-  height: 100%;
+  // height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
+  min-width: 112px;
 }
 
 .inner-circle {
   // padding:  2px;
   width: 112px;
+  // min-width: 134px;
   // height: 46px;
   background: rgba(16, 154, 255, 0.15);
   border-radius: 6px 6px 6px 6px;
@@ -87,6 +89,7 @@ text-transform: none;
   /* 可选：设定统一的内边距和圆角 */
   padding: 4px 8px;
   border-radius: 4px;
+  box-sizing: border-box;
 }
 .node-state {
   width: 91px;

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

@@ -55,15 +55,16 @@ export default {
 .circle-node {
   position: relative;
   width: 100%;
-  height: 100%;
+  // height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .inner-circle {
-  min-width: 134px;
-  padding: 10px 5px;
+  min-width: 136px;
+  // padding: 2px;
+  box-sizing: border-box;
   background: rgba(16, 252, 255, 0.25);
   border-radius: 6px;
   border: 1px solid #10fcff;
@@ -81,7 +82,7 @@ text-align: center;
 font-style: normal;
 text-transform: none;
   text-align: center;
-  margin: 2px 0;
+  // margin: 2px 0;
   /* 可选：设定统一的内边距和圆角 */
   padding: 4px 8px;
   border-radius: 4px;

src/views/left/index.vue

@@ -1,33 +1,27 @@
 <template>
   <div class="left_container">
     <!-- 左侧头部tab -->
-    <div class="left_container_header-left_tab" v-if="initShow">
+    <div class="left_container_header-left_tab" v-if="riskTableStore.initShow">
       <div class="button-container">
-        <div v-for="(item, index) in buttons" :key="item.id" class="parallelogram-button"
-          :class="{ 'highlight': tabActiveIndex === index }" @click="setActive(index)">
-          <div class="text-container" :class="{ 'text-container-highlight': tabActiveIndex === index }">{{ item.title
-            }}</div>
+        <div v-for="(item, index) in buttons" :key="item.id" class="parallelogram-button" :class="{ highlight: tabActiveIndex === index }" @click="setActive(index)">
+          <div class="text-container" :class="{ 'text-container-highlight': tabActiveIndex === index }">{{ item.title }}</div>
         </div>
       </div>
-
     </div>
     <!-- 左侧主题内容 -->
     <div class="left_container_header-left_content">
       <!-- 1.初始化内容 报告处置 -->
-      <ReportDisposal @openRiskBigTable="openRiskBigTable" v-if="initShow"></ReportDisposal>
+      <ReportDisposal @openRiskBigTable="openRiskBigTable" v-if="riskTableStore.initShow"></ReportDisposal>
 
       <!-- 2.处置进展 -->
-      <ProgressInDisposal v-if="disposalShow"></ProgressInDisposal>
+      <ProgressInDisposal v-if="riskTableStore.disposalShow"></ProgressInDisposal>
 
       <!-- 3.风险列表大列表 -->
-      <BigRiskTable v-if="bigRiskTableShow" :comeFrom="comeFrom"></BigRiskTable>
-
+      <BigRiskTable v-if="riskTableStore.bigRiskTableShow" @changeRiskView="changeRiskView"></BigRiskTable>
 
       <!-- 弹窗 -->
-      <PublicHealthRisksDialog v-if="initShow"></PublicHealthRisksDialog>
+      <PublicHealthRisksDialog v-if="riskTableStore.initShow"></PublicHealthRisksDialog>
       <!-- <ProgressInDisposalDialog v-if="disposalShow"></ProgressInDisposalDialog> -->
-
-
     </div>
   </div>
 </template>
@@ -39,51 +33,27 @@ import ReportDisposal from './modules/ReportDisposal'
 import ProgressInDisposal from './modules/ProgressInDisposal'
 import BigRiskTable from './modules/BigRiskTable'
 
-import { ref, watch ,reactive, toRefs, onBeforeMount, onMounted } from 'vue'
+import { ref, watch, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
 import { useCommonStore } from '@/store/common.js'
 let commonStore = useCommonStore()
 
-// const props = defineProps({
-//   activeIndex: {}, //选中tab下标
-// })
-
-// watch(
-//   () => props.activeIndex,
-//   (newActiveIndex, oldActiveIndex) => {
-//     console.log(newActiveIndex,'newActiveIndex')
-//     if (newActiveIndex ===0) {
-//       initShow.value = true
-//       bigRiskTableShow.value = false
-//       disposalShow.value = false
-//     } else if (newActiveIndex === 1) {
-//       initShow.value = false
-//       bigRiskTableShow.value = false
-//       disposalShow.value = true
-//     }
-//   },
-//   {
-//     deep: true,
-//     // immediate: true
-//   }
-// )
-
-const initShow = ref(true)  // 报告处置
-const bigRiskTableShow = ref(false) //大风险列表
-const disposalShow = ref(false)  //处置事件
-
-const comeFrom = ref(null)
+import { useRiskTableStore } from '@/store/riskTable.js'
+let riskTableStore = useRiskTableStore()
+
+let tabActiveIndex = ref(0) // 存储当前高亮按钮的索引
+
 watch(
   () => commonStore.activeIndex,
   (newActiveIndex, oldActiveIndex) => {
-    console.log(newActiveIndex, 'newActiveIndex')
+     tabActiveIndex.value = newActiveIndex
     if (newActiveIndex === 0) {
-      initShow.value = true
-      bigRiskTableShow.value = false
-      disposalShow.value = false
+      riskTableStore.setInitShow(true)
+      riskTableStore.setBigRiskTableShow(false)
+      riskTableStore.setDisposalShow(false)
     } else if (newActiveIndex === 1) {
-      initShow.value = false
-      bigRiskTableShow.value = false
-      disposalShow.value = true
+      riskTableStore.setInitShow(false)
+      riskTableStore.setBigRiskTableShow(false)
+      riskTableStore.setDisposalShow(true)
     }
   },
   {
@@ -92,27 +62,32 @@ watch(
   }
 )
 
+let buttons = ref([
+  { id: 0, title: '公共卫生风险', active: true },
+  { id: 1, title: '突发公共卫生事件', active: false }
+])
 
-
-
-
-let buttons = ref([{ id: 0, title: '公共卫生风险', active: true }, { id: 1, title: '突发公共卫生事件', active: false }])
-let tabActiveIndex = ref(0)   // 存储当前高亮按钮的索引
-
-function setActive (index) {
+function setActive(index) {
   // 切换高亮按钮，点击时高亮切换
   tabActiveIndex.value = index
 }
 
-
-
-function openRiskBigTable (params) {
+function openRiskBigTable(params) {
   console.log('openRiskBigTable20')
-  initShow.value = false
-  bigRiskTableShow.value = true
-  comeFrom.value = 'riskTable'
+
+  riskTableStore.setInitShow(false)
+  riskTableStore.setBigRiskTableShow(true)
+  riskTableStore.setComeFrom('风险列表')
 }
 
+function changeRiskView() {
+  // if (riskTableStore.getComeFrom() === '风险列表') {
+  //   riskTableStore.setInitShow(true)
+  //   riskTableStore.setBigRiskTableShow(false)
+  //   // initShow.value = true
+  //   // bigRiskTableShow.value = false
+  // }
+}
 </script>
 <style lang="scss" scoped>
 .left_container {
@@ -144,22 +119,21 @@ function openRiskBigTable (params) {
       font-style: normal;
       cursor: pointer;
 
-
       /* 动画过渡 */
       .text-container {
         /* 让文字保持竖直 */
         text-align: center;
         line-height: 30px;
-        font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
+        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
         font-weight: normal;
         font-size: 16px;
-        color: #FFFFFF;
+        color: #ffffff;
         font-style: normal;
         text-transform: none;
       }
 
       .text-container-highlight {
-        color: #C4F3FE;
+        color: #c4f3fe;
       }
     }
 

src/views/left/modules/BigRiskTable.vue

@@ -2,10 +2,8 @@
   <div class="risk_table_container">
     <div class="risk_table_header">
       <div class="risk_table_header_tab">
-        <el-button class="parallelogram-button" v-for="(item, index) in buttons" :key="index"
-          :class="{ highlight: activeIndex === index }" @click="setActive(index)">
-          <span class="text-container" :class="{ 'text-container-highlight': activeIndex === index }">{{ item.title
-            }}</span>
+        <el-button class="parallelogram-button" v-for="(item, index) in buttons" :key="index" :class="{ highlight: activeIndex === index }" @click="setActive(index)">
+          <span class="text-container" :class="{ 'text-container-highlight': activeIndex === index }">{{ item.title }}</span>
         </el-button>
       </div>
       <div class="risk_table_header_back" @click="goBack"></div>
@@ -49,16 +47,20 @@
 </template>
 <script setup>
 import TowLevelTitle from '../../../components/TowLevelTitle'
-import { ref, watch , reactive, toRefs, onBeforeMount, onMounted } from 'vue'
-const props = defineProps({
-  comeFrom: {}
-})
+import { ref, watch, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
+import { useRiskTableStore } from '@/store/riskTable.js'
+let riskTableStore = useRiskTableStore()
+import { useCommonStore } from '@/store/common.js'
+let commonStore = useCommonStore()
 
-watch(
-  () => props.comeFrom,
-  (newObj, oldObj) => {
+const emit = defineEmits(['changeRiskView'])
+// const props = defineProps({
+//   comeFrom: {}
+// })
 
-  },
+watch(
+  () => riskTableStore.comeFrom,
+  (newObj, oldObj) => {},
   {
     deep: true,
     immediate: true
@@ -72,7 +74,7 @@ let buttons = ref([
 ])
 let activeIndex = ref(0) // 存储当前高亮按钮的索引
 
-function setActive (index) {
+function setActive(index) {
   // 切换高亮按钮，点击时高亮切换
   activeIndex.value = index
 }
@@ -107,11 +109,49 @@ const tableData = ref([
   }
 ])
 
-function handleRowClick () { }
+function handleRowClick() {
+  if (riskTableStore.getComeFrom() === '风险列表') {
+    // commonStore.setActiveIndex(1)
+    riskTableStore.setInitShow(false)
+    riskTableStore.setBigRiskTableShow(false)
+    riskTableStore.setDisposalShow(true)
+    riskTableStore.setCurrentBackground(1)
+  } else {
+    commonStore.setActiveIndex(1)
+    riskTableStore.setInitShow(false)
+    riskTableStore.setBigRiskTableShow(false)
+    riskTableStore.setDisposalShow(true)
+  }
 
-function goBack () {
- 
-  
+  if (riskTableStore.getComeFrom() === '风险概况') {
+    riskTableStore.setCurrentBackground(1)
+  } else if (riskTableStore.getComeFrom() === '个案处置') {
+    riskTableStore.setCurrentBackground(2)
+  } else if (riskTableStore.getComeFrom() === '信息报告') {
+    riskTableStore.setCurrentBackground(3)
+  }
+}
+
+function goBack() {
+  if (riskTableStore.getComeFrom() === '风险列表') {
+    // commonStore.setActiveIndex(0)
+    riskTableStore.setInitShow(true)
+    riskTableStore.setBigRiskTableShow(false)
+    riskTableStore.setDisposalShow(false)
+  } else {
+    // commonStore.setActiveIndex(1)
+    riskTableStore.setInitShow(false)
+    riskTableStore.setBigRiskTableShow(false)
+    riskTableStore.setDisposalShow(true)
+  }
+
+  if (riskTableStore.getComeFrom() === '风险概况') {
+    riskTableStore.setCurrentBackground(1)
+  } else if (riskTableStore.getComeFrom() === '个案处置') {
+    riskTableStore.setCurrentBackground(2)
+  } else if (riskTableStore.getComeFrom() === '信息报告') {
+    riskTableStore.setCurrentBackground(3)
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -154,7 +194,8 @@ function goBack () {
           transform: skew(10deg);
         }
 
-        .text-container-highlight {}
+        .text-container-highlight {
+        }
       }
 
       .parallelogram-button.highlight {
@@ -208,7 +249,7 @@ function goBack () {
         font-style: normal;
         text-transform: none;
 
-        >img {
+        > img {
           margin-right: 10px;
         }
       }
@@ -218,7 +259,7 @@ function goBack () {
         gap: 7px;
         width: 915px;
 
-        >.el-select {
+        > .el-select {
           width: 177px;
           height: 24px;
         }

src/views/left/modules/ProgressInDisposal.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dispose_container">
     <!--1. tab -->
-    <div class="dispose_container_tab_bg" :data-bg="currentBackground">
+    <div class="dispose_container_tab_bg" :data-bg="riskTableStore.currentBackground">
       <div class="tab-button" @click="changeBackground(1)"></div>
       <div class="tab-button" @click="changeBackground(2)"></div>
       <div class="tab-button" @click="changeBackground(3)"></div>
@@ -18,13 +18,13 @@
 
     <!-- 2.主体内容 ====================================-->
     <!-- 1.风险概况 -->
-    <RiskProfile v-if="currentBackground === 1"></RiskProfile>
+    <RiskProfile v-if="riskTableStore.currentBackground === 1"></RiskProfile>
 
     <!-- 2.个案处置 -->
-    <CaseHandling v-if="currentBackground === 2"></CaseHandling>
+    <CaseHandling v-if="riskTableStore.currentBackground === 2"></CaseHandling>
 
     <!-- 3.信息报告 -->
-    <InformationReport v-if="currentBackground === 3"></InformationReport>
+    <InformationReport v-if="riskTableStore.currentBackground === 3"></InformationReport>
 
     <!-- 弹窗 处置进度/处置清单/标准处置流程-->
     <ProgressInDisposalDialog></ProgressInDisposalDialog>
@@ -45,12 +45,16 @@ import { ref, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
 import { useDialogStore } from '@/store/dialog'
 let dialogStore = useDialogStore()
 
+import { useRiskTableStore } from '@/store/riskTable.js'
+let riskTableStore = useRiskTableStore()
+
 // 用于存储当前背景图的索引
-const currentBackground = ref(1)
+// const currentBackground = ref(1)
 // 点击按钮时切换背景图
 const changeBackground = index => {
   dialogStore.closeAllDialog()
-  currentBackground.value = index
+  // currentBackground.value = index
+  riskTableStore.setCurrentBackground(index)
 }
 
 function openAIDialogHandle () {

src/views/left/modules/ReportDisposal.vue

@@ -211,6 +211,8 @@ import MyProgress from './common/MyProgress'
 
 import { ref, nextTick, toRaw, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
 
+
+
 // let riskReportObj = ref([{ id: 1, level: 'A', count: 0 }, { id: 2, level: 'B', count: 0 }, { id: 3, level: 'C', count: 0 }, { id: 4, level: 'D', count: 0 },])
 const emit = defineEmits(['openRiskBigTable'])
 
@@ -332,7 +334,7 @@ const riskTableconfig = ref({
 })
 
 function openRiskBigTable() {
-  console.log('openRiskBigTable')
+  // console.log('openRiskBigTable')
   emit('openRiskBigTable')
 }
 </script>