EOC-UI/src/views/left/dialog/components/DisposalProgressContentSecond.vue

<template>
  <div class="container">
    <el-scrollbar class="scrollbox">
      <div class="graph-box">
        <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="first-box" @click="handleNodeClick(item)">
                <div class="content">{{ item.nodeName }}</div>
                <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>

            <DisposalChildBox :data="item" @nodeClick="handleNodeClick" />
            <div class="node-data" v-if="!item.children || item.children?.length == 0"></div>
          </div>
        </template>
      </div>
    </el-scrollbar>

    <!-- 地图工具 -->
    <!-- <MapTools></MapTools> -->
    <!-- 病例管理节点弹窗 -->
    <CaseManageNodeDialog v-if="dialogStore.caseManageNodeDialogOpen"></CaseManageNodeDialog>
    <!-- 实验室检测节点弹窗 -->
    <LaboratoryTestNodeDialog v-if="dialogStore.laboratoryTestNodeDialogOpen"></LaboratoryTestNodeDialog>
    <!-- 风险场所管控节点弹窗 -->
     <RiskLocationControlDialog v-if="dialogStore.riskLocationControlDialogOpen"></RiskLocationControlDialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import DisposalChildBox from './common/DisposalChildBox.vue'
import CaseManageNodeDialog from './dialog/CaseManageNodeDialog'
import LaboratoryTestNodeDialog from './dialog/LaboratoryTestNodeDialog.vue'
import RiskLocationControlDialog from './dialog/RiskLocationControlDialog.vue'
// import MapTools from './dialog/MapTools.vue'
import { useDialogStore } from '@/store/dialog'
let dialogStore = useDialogStore()

import { useRightPanelStore } from "@/store/rightPanel";
const rightPanelStore = useRightPanelStore();

const getStatus = status => {
  if (status == '已完成') {
    return 'status-green'
  }
  if (status == '进行中') {
    return 'status-red'
  }
  return 'status-no'
}

//点击节点
const handleNodeClick = item => {
  console.log(item)
  if (!['病例管理', '实验室检测','风险场所管控'].includes(item.nodeName)) return
  
  rightPanelStore.handleCloseAllVisible()
  dialogStore.closeAllDialog()
  if (item.nodeName === '病例管理') {
    dialogStore.setCaseManageNodeDialogOpen(true)
  } else if (item.nodeName === '实验室检测') {
    dialogStore.setLaboratoryTestNodeDialogOpen(true)
  }else if (item.nodeName === '风险场所管控') {
    dialogStore.setRiskLocationControlDialogOpen(true)
  }
}

const nodeData = [
  {
    nodeId: 1,
    level: 1,
    nodeName: '发现报告',
    state: '已完成',
    children: [
      { 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,
    level: 1,
    nodeName: '个案调查处置',
    state: '进行中',
    children: [
      {
        nodeId: '2-1',
        level: 2,
        nodeName: '李梦康',
        state: '已完成'
      },
      {
        nodeId: '2-2',
        level: 2,
        nodeName: '毛超',
        state: '已完成',
        children: [
          { 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', level: 2, nodeName: '贾子敏', state: '进行中' }
    ]
  },
  {
    nodeId: 3,
    level: 1,
    nodeName: '风险人员和环境排查管控',
    state: '进行中',
    children: [
      { nodeId: '3-1', level: 2, nodeName: '段伟', state: '已完成' },
      { nodeId: '3-2', level: 2, nodeName: '陆成奇', state: '已完成' },
      {
        nodeId: '3-3',
        nodeName: '曾强',
        state: '进行中',
        level: 2,
        children: [
          { 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, level: 1, nodeName: '区域风险排查管控', state: '未开始' },
  { nodeId: 5, level: 1, nodeName: '结案' }
]

// **画布**
const graphRef = ref(null)

function isLeafNode(d) {
  return !d.children || d.children.length === 0
}

// **初始化 X6 画布**
onMounted(() => {})
</script>

<style land="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .scrollbox {
    height: calc(100% - 10px);
  }
}

#graph_container {
  width: 100%;
  height: 100%;
}

.graph-container {
  position: relative;
  display: flex;
  align-items: stretch;
  margin: 0px 15px;
  margin-right: 0;

  /* &::before {
    position: absolute;
    content: "";
    width: 1px;
    top: -15px;
    height: calc(50% - 18px);
    left: 60px;
    border-left: 2px dashed #3fa7b6;
    z-index: 1;
  } */

  .first-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    .line-top {
      position: relative;
      flex: 1;
      width: 1px;
      border-left: 2px dashed #3fa7b6;
      z-index: 1;
      &::after {
        position: absolute;
        content: '';
        width: 17px;
        height: 23px;
        left: -9px;
        bottom: 0px;
        background-image: url('../../../../assets/img/节点连线箭头.png');
        background-size: 100% 100%;
        transform: rotate(90deg);
      }
    }
    .line-bottom {
      position: relative;
      flex: 1;
      width: 1px;
      border-left: 2px dashed #3fa7b6;
      z-index: 1;
    }
  }
  .node-data {
    height: 130px;
  }

  &:first-child {
    margin-top: 15px;
    &::before {
      display: none;
    }
  }
  /* &::after {
    position: absolute;
    content: "";
    width: 1px;
    height: calc(50% - 18px);
    bottom: -15px;
    left: 60px;
    border-left: 2px dashed #3fa7b6;
    z-index: 1;
  } */
  &:last-child {
    /* margin-top: 15px; */
    &::after {
      display: none;
    }
  }
  .first-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 120px;
    min-height: 53px;
    padding: 10px 0;
    flex-shrink: 0;
    background: rgba(16, 252, 255, 0.25);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #10fcff;
    z-index: 9;
    cursor: pointer;

    .content {
      width: 119px;
      white-space: wrap;
      font-family: Alibaba PuHuiTi;
      font-weight: normal;
      font-size: 18px;
      line-height: 24px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      background: linear-gradient(to bottom, #ffffff 0%, #88eaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .status-box {
      margin-top: 10px;
      padding: 0px 15px;
      font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
      font-weight: normal;
      font-size: 14px;
      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .status-green {
      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-size: 150% 100%;
      background-position-x: 50%;
      background-repeat: no-repeat;
      color: #ff4a4a;
    }
    .status-no {
      background-image: url('../../../../assets/img/Component 245.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      color: #c9c9c9;
    }
  }
}
</style>