SZYGM1.0/src/views/systemSettings/serviceManagement/index.vue

<template>
  <div class="integration__cont__map__cont">
    <Minheader
      :is-statuser="true"
      :is-Journal="true"
      @addJournalForm="addJournalForm"
    >
      <template #header>
        <div class="status flex-wrap">
          <div class="manageTitle">服务拓扑</div>
          <div class="typestart flex-wrap">
            <div class="name">
              <div class="log"></div>
              正常
            </div>
            <div class="name">
              <div class="log1"></div>
              异常
            </div>
          </div>
        </div>
      </template></Minheader
    >
    <div class="integration__cont" ref="chartDom"></div>
    <Dialog
      width="1200px"
      :flag="flag"
      :type="type"
      :msgTitle="msgTitle"
      @resetForm="resetForm"
    >
      <div class="diacont">
        <div class="interfaceLog_head flex">
          <div class="interfaceLog_head_time flex-act">
            <div class="header_name">当前服务：Kafka原始报文</div>
          </div>
          <div class="interfaceLog_head_btn flex">
            <div class="interfaceLog_head_time_start r12">
              <el-date-picker
                v-model="timeStart"
                size="default"
                type="datetime"
                placeholder="选择开始日期时间"
              >
              </el-date-picker>
            </div>
            <div class="interfaceLog_head_time_end r16">
              <el-date-picker
                v-model="timeEnd"
                size="default"
                type="datetime"
                placeholder="选择结束日期时间"
              >
              </el-date-picker>
            </div>
            <Search
              @getSearchData="getSearchData"
              :isTitle="false"
              @clearSearchData="clearSearchData"
            />
          </div>
        </div>
        <div class="interfaceLog_content">
          <el-row :gutter="24">
            <el-col :span="19">
              <DataTable
                :tableHeader="state.list"
                :tableData="tableData"
                :tableProperty="{ rowKey: 'ID' }"
              />
            </el-col>
            <el-col :span="5">
              <div class="interfaceLog_content_progress">
                <el-timeline>
                  <el-timeline-item
                    v-for="(item, index) in preDatas"
                    :key="index"
                  >
                    <div class="list">
                      <div class="list_status"></div>
                      <div class="list_title">{{ item.title }}</div>
                      <div class="list_code">{{ item.code }}</div>
                      <div class="list_time">{{ item.time }}</div>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </Dialog>
  </div>
</template>
<script setup lang="ts">
import Minheader from "@/components/minheader/index.vue";
import DataTable from "@/components/tableTemp/index.vue";
import Dialog from "@/components/dialog/index.vue";
import { provide } from "vue";
import * as echarts from "echarts";
import img1 from "@/assets/integr/jiekou_blue.png";
import img2 from "@/assets/integr/jiekou_red.png";
import img3 from "@/assets/integr/pull_blue.png";
import img4 from "@/assets/integr/kafka_blue.png";
import img5 from "@/assets/integr/push_blue.png";
import img6 from "@/assets/integr/save_blue.png";
import img7 from "@/assets/integr/mysql_blue.png";
provide("echarts", echarts);
const chartDom = ref(null);
const myChart = ref(null);
const flag = ref<Boolean>(false); //弹窗开关
const type = ref<String>(""); //判断是否删除
const msgTitle = ref<String>("查看日志"); //弹窗标题
const getAssetsFile = (url: string) => {
  return new URL(`../assets/integr/${url}`, import.meta.url).href;
};
const datas = ref<Array>([]);
const desc = ref<number>(300);
//默认节点
// const defaultImg = getAssetsFile("jiekou_blue.png");
const defaultImg = "image://" + reactive(img1);
//默认节点-错误
const defaultImgError = "image://" + reactive(img2);

//拉取节点
const pullImg = "image://" + reactive(img3);

//拉取节点-错误
const pullImgError = getAssetsFile("pull_red.png");

//kafka节点
const kafkaImg = "image://" + reactive(img4);

//kafka节点-错误
const kafkaImgError = getAssetsFile("kafka_red.png");

//推送节点
const pushImg = "image://" + reactive(img5);

//推送节点-错误
const pushImgError = getAssetsFile("push_red.png");

//存储节点
const saveImg = "image://" + reactive(img6);

//存储节点-错误
const saveImgError = getAssetsFile("save_red.png");

//存储节点
const mysqlImg = "image://" + reactive(img7);

//存储节点-错误
const mysqlImgError = getAssetsFile("mysql_red.png");

const timeStart = ref<String>("");
const timeEnd = ref<String>("");
const preDatas = ref<Array>([]);
//列表
const tableData = ref([
  {
    name: "测试",
    china: "测试",
    englin: "测试",
    two: "测试",
    three: "测试",
  },
  {
    name: "测试",
    china: "测试",
    englin: "测试",
    two: "测试",
    three: "测试",
  },
  {
    name: "测试",
    china: "测试",
    englin: "测试",
    two: "测试",
    three: "测试",
  },
]);
//表头
const state = reactive({
  list: [
    { label: "用户", key: "name" },
    { label: "发生时间", key: "china" },
    { label: "发生位置", key: "englin" },
    { label: "成败代码", key: "two" },
    { label: "成败详情", key: "three" },
  ],
  listLoading: true,
});
for (let i = 0; i < 10; i++) {
  const element = {
    action: "采集",
    dataNumber: "000120220307201211011201",
    sourceDataNumber: "BSM",
    time: "2022-03-07 20:00:12",
    result: i % 2 == 0 ? true : false,
    details: "数据格式不正确",
  };
  const obj = {
    title: "更新 Github 模板",
    code: "989665554",
    time: "2022-4-26 15:48:55",
    id: i,
  };
  tableData.value.push(element);
  preDatas.value.push(obj);
}
preDatas.value.splice(5, 10);
const nodeDataList = ref([
  {
    name: "星盟SBH",
    linkTargetName: "首都机场边缘节点",
    linkValue: " ",
    coordConfig: {
      level: "0",
    },
    value: [10, 250],
    draggable: false,
    fixed: true,
    symbol: defaultImg,
    symbolSize: 30,
  },
  // {
  //   name: "星盟SBH",
  //   linkTargetName: "国航主动拉取节点",
  //   linkValue: " ",
  //   coordConfig: {
  //     level: "0",
  //   },
  //   value: [10, 220],
  //   draggable: false,
  //   fixed: true,
  //   symbol: defaultImg,
  //   symbolSize: 30,
  // },
  // {
  //   name: "局方公共平台",
  //   linkTargetName: "国航主动拉取节点",
  //   linkValue: " ",
  //   coordConfig: {
  //     level: "0",
  //   },
  //   value: [10, 190],
  //   draggable: false,
  //   symbol: defaultImgError,
  //   symbolSize: 30,
  // },
  // {
  //   name: "离港高频",
  //   linkTargetName: "国航主动拉取节点",
  //   linkValue: " ",
  //   coordConfig: {
  //     level: "0",
  //   },
  //   value: [10, 160],
  //   draggable: false,
  //   symbol: defaultImg,
  //   symbolSize: 30,
  // },
  // {
  //   name: "WT",
  //   linkTargetName: "国航主动拉取节点",
  //   linkValue: " ",
  //   coordConfig: {
  //     level: "0",
  //   },
  //   value: [10, 130],
  //   draggable: false,
  //   symbol: defaultImg,
  //   symbolSize: 30,
  // },
  // {
  //   name: "特殊及异常行李",
  //   linkTargetName: "国航主动拉取节点",
  //   linkValue: " ",
  //   coordConfig: {
  //     level: "0",
  //   },
  //   value: [10, 100],
  //   draggable: false,
  //   symbol: defaultImg,
  //   symbolSize: 30,
  // },
  // {
  //   name: "SCS",
  //   linkTargetName: "国航被动接收节点",
  //   linkValue: " ",
  //   coordConfig: {
  //     level: "0",
  //   },
  //   value: [10, 70],
  //   draggable: false,
  //   symbol: defaultImg,
  //   symbolSize: 30,
  // },
  // {
  //   name: "ERP",
  //   linkTargetName: "国航被动接收节点",
  //   linkValue: " ",
  //   coordConfig: {
  //     level: "0",
  //   },
  //   value: [10, 40],
  //   draggable: false,
  //   symbol: defaultImg,
  //   symbolSize: 30,
  // },
  // {
  //   name: "服务质量",
  //   linkTargetName: "国航被动接收节点",
  //   linkValue: " ",
  //   coordConfig: {
  //     level: "0",
  //   },
  //   value: [10, 10],
  //   draggable: false,
  //   symbol: defaultImg,
  //   symbolSize: 30,
  // },
  //节点B,C,D ....n
  {
    name: "首都机场边缘节点",
    linkTargetName: "国航主动拉取节点",
    linkValue: " ",
    coordConfig: {
      level: "1",
    },
    symbol: pullImg,
    symbolSize: 60,
    draggable: false,
    value: [40, 245],
  },
  {
    name: "国航主动拉取节点",
    linkTargetName: "Kafka",
    linkValue: " ",
    coordConfig: {
      level: "2",
    },
    symbol: pullImg,
    symbolSize: 60,
    draggable: false,
    value: [80, 180],
  },
  // {
  //   name: "国航被动接收节点",
  //   linkTargetName: "Kafka",
  //   linkValue: " ",
  //   coordConfig: {
  //     level: "2",
  //   },
  //   symbol: pullImg,
  //   symbolSize: 60,
  //   draggable: false,
  //   value: [80, 100],
  // },
  {
    name: "Kafka",
    linkTargetName: "BSM",
    linkValue: " ",
    coordConfig: { level: "3" },
    symbolSize: 60,
    symbol: kafkaImg,
    draggable: false,
    value: [120, 140],
  },
  {
    name: "Kafka ",
    linkTargetName: "BPM",
    linkValue: " ",
    coordConfig: { level: "3" },
    symbolSize: 60,
    symbol: kafkaImg,
    draggable: false,
    label: {
      show: false,
    },
    value: [120, 140],
  },
  {
    name: "Kafka  ",
    linkTargetName: "航班",
    linkValue: " ",
    coordConfig: { level: "3" },
    symbolSize: 60,
    symbol: kafkaImg,
    draggable: false,
    label: {
      show: false,
    },
    value: [120, 140],
  },
  {
    name: "Kafka   ",
    linkTargetName: "行李投诉",
    linkValue: " ",
    coordConfig: { level: "3" },
    symbolSize: 60,
    symbol: kafkaImg,
    draggable: false,
    label: {
      show: false,
    },
    value: [120, 140],
  },
  {
    name: "Kafka    ",
    linkTargetName: "旅客",
    linkValue: " ",
    coordConfig: { level: "3" },
    symbolSize: 60,
    symbol: kafkaImg,
    draggable: false,
    label: {
      show: false,
    },
    value: [120, 140],
  },
  {
    name: "BSM",
    linkTargetName: "解析服务",
    linkValue: " ",
    coordConfig: { level: "4" },
    symbolSize: 30,
    symbol: defaultImg,
    draggable: false,
    value: [160, 180],
  },
  {
    name: "BPM",
    linkTargetName: "推送节点",
    linkValue: " ",
    coordConfig: { level: "4" },
    symbolSize: 30,
    symbol: defaultImg,
    draggable: false,
    value: [160, 150],
  },
  {
    name: "航班",
    linkTargetName: "解析服务",
    linkValue: " ",
    coordConfig: { level: "4" },
    symbolSize: 30,
    symbol: defaultImg,
    draggable: false,
    value: [160, 120],
  },
  {
    name: "行李投诉",
    linkTargetName: "解析服务",
    linkValue: " ",
    coordConfig: { level: "4" },
    symbolSize: 30,
    symbol: defaultImg,
    draggable: false,
    value: [160, 90],
  },
  {
    name: "旅客",
    linkTargetName: "解析服务",
    linkValue: " ",
    coordConfig: { level: "4" },
    symbolSize: 30,
    symbol: defaultImg,
    draggable: false,
    value: [160, 60],
  },
  {
    name: "推送节点",
    linkTargetName: "首都机场BHS ",
    linkValue: " ",
    coordConfig: { level: "5" },
    symbolSize: 60,
    symbol: pushImg,
    draggable: false,
    value: [200, 160],
  },
  {
    name: "推送节点 ",
    linkTargetName: "星盟SBH ",
    linkValue: " ",
    coordConfig: { level: "5" },
    symbolSize: 60,
    symbol: pushImg,
    draggable: false,
    label: {
      show: false,
    },
    value: [200, 160],
  },
  {
    name: "推送节点  ",
    linkTargetName: "局方公共平台 ",
    linkValue: " ",
    coordConfig: { level: "5" },
    symbolSize: 60,
    symbol: pushImg,
    draggable: false,
    label: {
      show: false,
    },
    value: [200, 160],
  },
  {
    name: "推送节点   ",
    linkTargetName: "行李推送事件",
    linkValue: " ",
    coordConfig: { level: "5" },
    symbolSize: 60,
    symbol: pushImg,
    draggable: false,
    label: {
      show: false,
    },
    value: [200, 160],
  },
  {
    name: "推送节点    ",
    linkTargetName: "ES",
    linkValue: " ",
    coordConfig: { level: "5" },
    symbolSize: 60,
    symbol: pushImg,
    draggable: false,
    label: {
      show: false,
    },
    value: [200, 160],
  },
  {
    name: "解析服务",
    linkTargetName: " Kafka",
    linkValue: " ",
    coordConfig: { level: "5" },
    symbolSize: 60,
    symbol: pushImg,
    draggable: false,
    value: [200, 100],
  },
  {
    name: "首都机场BHS ",
    linkTargetName: "首都机场BHS ",
    linkValue: " ",
    coordConfig: { level: "6" },
    symbolSize: 30,
    symbol: defaultImg,
    draggable: false,
    value: [240, 220],
  },
  {
    name: "星盟SBH ",
    linkTargetName: "星盟SBH ",
    linkValue: " ",
    coordConfig: { level: "6" },
    symbolSize: 30,
    symbol: defaultImg,
    draggable: false,
    value: [240, 190],
  },
  {
    name: "局方公共平台 ",
    linkTargetName: "局方公共平台 ",
    linkValue: " ",
    coordConfig: { level: "6" },
    symbolSize: 30,
    symbol: defaultImg,
    draggable: false,
    value: [240, 160],
  },
  {
    name: "行李推送事件",
    linkTargetName: "行李推送事件",
    linkValue: " ",
    coordConfig: { level: "6" },
    symbolSize: 30,
    symbol: defaultImg,
    draggable: false,
    value: [240, 130],
  },
  {
    name: "ES",
    linkTargetName: "ES",
    linkValue: " ",
    coordConfig: { level: "6" },
    symbolSize: 30,
    symbol: defaultImg,
    draggable: false,
    value: [240, 100],
  },
  {
    name: " Kafka",
    linkTargetName: "存储服务",
    linkValue: " ",
    coordConfig: { level: "6" },
    symbolSize: 30,
    symbol: defaultImg,
    draggable: false,
    value: [240, 70],
  },
  {
    name: "存储服务",
    linkTargetName: "Mysql",
    linkValue: " ",
    coordConfig: { level: "7" },
    symbolSize: 60,
    symbol: saveImg,
    draggable: false,
    value: [280, 160],
  },
  {
    name: "Mysql",
    linkTargetName: "Mysql",
    linkValue: " ",
    coordConfig: { level: "8" },
    symbolSize: 60,
    symbol: mysqlImg,
    draggable: false,
    value: [340, 160],
  },
]);
const options = reactive({
  itemStyle: {
    normal: {
      color: "#67C23A",
    },
    shadowBlur: 0,
  },
  textStyle: {
    color: "#444",
    fontSize: 16,
    fontWeight: 600,
  },
  grid: {
    top: 20,
    bottom: 10,
    left: 0,
    right: 0,
  },
  legend: [
    {
      formatter: function (name) {
        return echarts.format.truncateText(name, 200, "12px", "…");
      },
      tooltip: {
        show: true,
      },
      selectedMode: "false",
      bottom: 20,
    },
  ],
  animationDuration: 500,
  animationEasingUpdate: "quinticInOut",
  xAxis: {
    show: false,
    type: "value",
  },
  yAxis: {
    show: false,
    type: "value",
  },
  series: [
    {
      type: "graph",
      coordinateSystem: "cartesian2d",
      //圆形上面的文字
      label: {
        normal: {
          position: "bottom",
          show: true,
          textStyle: {
            fontSize: 12,
          },
        },
      },
      itemStyle: {
        normal: {
          color: "#409eff",
        },
        shadowBlur: 0,
      },
      lineStyle: {
        normal: {
          width: 0,
          shadowColor: "none",
          color: "#ff0000",
        },
      },
      data: [],
      links: [],
    },
  ],
});
const handle = () => {
  if (myChart) {
    myChart.resize();
  }
};
const getCoordDataList = () => {
  let coorDataDict = {};
  let defaultConfig = {
    type: "lines", //块1,2...n到节点A,B...N
    coordinateSystem: "cartesian2d",
    // animationDelay: 10000,
    z: 1,
    effect: {
      show: true,
      smooth: true,
      trailLength: 0,
      symbol: "arrow",
      color: "#92A7D5",
      symbolSize: 10,
      period: 3,
      delay: 1500,
      loop: true,
    },
    lineStyle: {
      normal: {
        curveness: 0,
        color: "#92A7D5",
        width: 1,
      },
    },
    data: [],
  };
  nodeDataList.value.map((item) => {
    if (item.coordConfig !== undefined) {
      if (!(item.coordConfig.level in coorDataDict)) {
        let coorConfig = JSON.parse(JSON.stringify(defaultConfig));
        if (item.coordConfig.lineStyle !== undefined) {
          coorConfig.lineStyle = item.coordConfig.lineStyle;
        }
        if (item.coordConfig.effect !== undefined) {
          coorConfig.effect = item.coordConfig.effect;
        }
        coorDataDict[item.coordConfig.level] = coorConfig;
      }

      let coordData = [
        item.value,
        nodeDataList.value.filter((i) => i.name == item.linkTargetName)[0]
          .value ||
          nodeDataList.value.filter((i) => i.name == item.linkTargetName)[1]
            .value,
      ];
      coorDataDict[item.coordConfig.level].data.push({
        coords: coordData,
      });
      if (item.coordConfig.bilateral) {
        coorDataDict[item.coordConfig.level].data.push({
          coords: coordData.reverse(),
        });
      }
    }
  });
  return Object.values(coorDataDict);
};
nodeDataList.value.map((item) => {
  datas.value.push({
    source: item.name,
    value: item.linkValue,
    target: item.linkTargetName,
  });
});
const resizeHandler = () => {
  myChart.resize();
};
onMounted(() => {
  options.series[0].data = nodeDataList;
  options.series[0].links = datas;
  options.series = options.series.concat(getCoordDataList());
  myChart.value = echarts.init(chartDom.value);
  myChart.value.setOption(options, true);
  window.addEventListener("resize", resizeHandler);
});
//新增
const addJournalForm = () => {
  msgTitle.value = "查看日志";
  flag.value = true;
};
//取消
const resetForm = () => {
  flag.value = false;
};
// console.log(nodeDataList.value);
// options.value.series[0].data = nodeDataList.value;
// options.value.series[0].links = datas.value;
// options.value.series = options.value.series.concat(getCoordDataList());
// myChart = echarts.init(document.getElementById("map"));
// myChart.value.setOption(options.value);
// // 事件
// myChart.on("click", (params) => {
//   console.log(params);
// });
// 监听页面缩放 防止dom重复渲染
// window.addEventListener("resize", _.debounce(handle, desc));
</script>
<style lang="scss" scoped>
.integration__cont__map__cont {
  width: 100%;
  height: 100%;
  .header_name {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #303133;
  }
  .integration__cont {
    background: #ffffff;
    border-radius: 4px;
    padding: 35px;
    width: 100%;
    height: calc(100vh - 177px);
  }
  .typestart {
    height: 100%;
    .name {
      display: flex;
      align-items: center;
    }
    .name:nth-child(2) {
      margin-left: 24px;
    }
    .log {
      width: 14px;
      height: 14px;
      background: #041741;
      border-radius: 2px;
      margin-right: 12px;
    }
    .log1 {
      width: 14px;
      height: 14px;
      background: #e32d2d;
      border-radius: 2px;
      margin-right: 12px;
    }
  }
}
.interfaceLog_content {
  margin-top: 24px;
  // height: 452px;
  // overflow: hidden;
}
</style>