1

src/utils/auth.ts

@@ -1,13 +1,13 @@
-const TokenKey = 'Admin-Token'
+const TokenKey = "Admin-Token";
 
 export function getToken() {
-  return localStorage.getItem(TokenKey)
+  return localStorage.getItem(TokenKey);
 }
 
 export function setToken(token: string) {
-  return localStorage.setItem(TokenKey, token)
+  return localStorage.setItem(TokenKey, token);
 }
 
 export function removeToken() {
-  return localStorage.removeItem(TokenKey)
+  return localStorage.removeItem(TokenKey);
 }

src/utils/validate.ts

@@ -3,7 +3,7 @@
  * @returns {Boolean}
  */
 export function isExternal(path: string): boolean {
-  return /^(https?:|mailto:|tel:)/.test(path)
+  return /^(https?:|mailto:|tel:)/.test(path);
 }
 
 /**
@@ -11,8 +11,8 @@ export function isExternal(path: string): boolean {
  * @returns {Boolean}
  */
 export function validUsername(str: string): boolean {
-  const valid_map = ['admin', 'editor']
-  return valid_map.indexOf(str.trim()) >= 0
+  const valid_map = ["admin", "editor"];
+  return valid_map.indexOf(str.trim()) >= 0;
 }
 
 /**
@@ -20,8 +20,8 @@ export function validUsername(str: string): boolean {
  * @returns {Boolean}
  */
 export function validURL(url: string): boolean {
-  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
-  return reg.test(url)
+  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
+  return reg.test(url);
 }
 
 /**
@@ -29,8 +29,8 @@ export function validURL(url: string): boolean {
  * @returns {Boolean}
  */
 export function validLowerCase(str: string): boolean {
-  const reg = /^[a-z]+$/
-  return reg.test(str)
+  const reg = /^[a-z]+$/;
+  return reg.test(str);
 }
 
 /**
@@ -38,8 +38,8 @@ export function validLowerCase(str: string): boolean {
  * @returns {Boolean}
  */
 export function validUpperCase(str: string): boolean {
-  const reg = /^[A-Z]+$/
-  return reg.test(str)
+  const reg = /^[A-Z]+$/;
+  return reg.test(str);
 }
 
 /**
@@ -47,8 +47,8 @@ export function validUpperCase(str: string): boolean {
  * @returns {Boolean}
  */
 export function validAlphabets(str: string): boolean {
-  const reg = /^[A-Za-z]+$/
-  return reg.test(str)
+  const reg = /^[A-Za-z]+$/;
+  return reg.test(str);
 }
 
 /**
@@ -65,7 +65,7 @@ export function validAlphabets(str: string): boolean {
  * @returns {Boolean}
  */
 export function isString(str: any): boolean {
-  return typeof str === 'string' || str instanceof String
+  return typeof str === "string" || str instanceof String;
 }
 
 /**
@@ -73,10 +73,10 @@ export function isString(str: any): boolean {
  * @returns {Boolean}
  */
 export function isArray(arg: string) {
-  if (typeof Array.isArray === 'undefined') {
-    return Object.prototype.toString.call(arg) === '[object Array]'
+  if (typeof Array.isArray === "undefined") {
+    return Object.prototype.toString.call(arg) === "[object Array]";
   }
-  return Array.isArray(arg)
+  return Array.isArray(arg);
 }
 
 /**
@@ -87,28 +87,28 @@ export function isArray(arg: string) {
  */
 export function parseTime(time: any, cFormat: string) {
   if (arguments.length === 0 || !time) {
-    return null
+    return null;
   }
-  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
-  let date
-  if (typeof time === 'object') {
-    date = time
+  const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
+  let date;
+  if (typeof time === "object") {
+    date = time;
   } else {
-    if (typeof time === 'string') {
+    if (typeof time === "string") {
       if (/^[0-9]+$/.test(time)) {
         // support "1548221490638"
-        time = parseInt(time)
+        time = parseInt(time);
       } else {
         // support safari
         // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
-        time = time.replace(new RegExp(/-/gm), '/')
+        time = time.replace(new RegExp(/-/gm), "/");
       }
     }
 
-    if (typeof time === 'number' && time.toString().length === 10) {
-      time = time * 1000
+    if (typeof time === "number" && time.toString().length === 10) {
+      time = time * 1000;
     }
-    date = new Date(time)
+    date = new Date(time);
   }
   const formatObj = {
     y: date.getFullYear(),
@@ -117,15 +117,15 @@ export function parseTime(time: any, cFormat: string) {
     h: date.getHours(),
     i: date.getMinutes(),
     s: date.getSeconds(),
-    a: date.getDay()
-  }
+    a: date.getDay(),
+  };
   const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
-    const value = formatObj[key]
+    const value = formatObj[key];
     // Note: getDay() returns 0 on Sunday
-    if (key === 'a') {
-      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    if (key === "a") {
+      return ["日", "一", "二", "三", "四", "五", "六"][value];
     }
-    return value.toString().padStart(2, '0')
-  })
-  return time_str
+    return value.toString().padStart(2, "0");
+  });
+  return time_str;
 }

src/views/systemSettings/serviceManagement/index.vue

@@ -1,11 +1,639 @@
 <template>
-  <div></div>
+  <div class="integration__cont__map__cont" ref="chartDom"></div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { provide } from "vue";
+import * as echarts from "echarts";
+provide("echarts", echarts);
+const chartDom = ref(null);
+const myChart = ref(null);
 
-export default defineComponent({
-  setup() {},
+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 defaultImgError = getAssetsFile("jiekou_red.png");
+
+//拉取节点
+const pullImg = getAssetsFile("pull_blue.png");
+
+//拉取节点-错误
+const pullImgError = getAssetsFile("pull_red.png");
+
+//kafka节点
+const kafkaImg = getAssetsFile("kafka_blue.png");
+
+//kafka节点-错误
+const kafkaImgError = getAssetsFile("kafka_red.png");
+
+//推送节点
+const pushImg = getAssetsFile("push_blue.png");
+
+//推送节点-错误
+const pushImgError = getAssetsFile("push_red.png");
+
+//存储节点
+const saveImg = getAssetsFile("save_blue.png");
+
+//存储节点-错误
+const saveImgError = getAssetsFile("save_red.png");
+
+//存储节点
+const mysqlImg = getAssetsFile("mysql_blue.png");
+
+//存储节点-错误
+const mysqlImgError = getAssetsFile("mysql_red.png");
+const nodeDataList = ref([
+  {
+    name: "首都机场BHS",
+    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);
+  console.log(defaultImg);
 });
+// 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></style>
+<style lang="scss" scoped>
+.integration__cont__map__cont {
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+  border-radius: 4px;
+}
+</style>