Merge branch 'master' of http://120.26.64.82:3000/BFFE/SZYGM1.0

public/demo.js

@@ -47,11 +47,12 @@ const DATACONTENT_ID = {
   forwarderNodeId: 1803438, //基础数据-货代-表格-id
 
   /***-----系统设置------***/
-  sysSourceId: 13, //系统设置-数据源-id
   sysProtoTabId: 1, //系统设置-协议管理-表格-id
   sysServiceTabId: 2, //系统设置-服务管理-表格-id
   sysLogTable: 12, //系统设置-日志-表格
   sysServiceWarningId: 18029, //查询预警报警场景列表
+  sysSourceId: 13, //系统设置-数据源-id
+  sysServiceTopTable: 31, //系统设置-服务管理-服务拓扑-查看日志
 };
 
 const SERVICE_ID = {

src/views/systemSettings/log/index.vue

@@ -128,12 +128,10 @@ const getTableData = async () => {
       if (listValues.length === 0) {
         page--
         noMore.value = true
-        return
       }
       tableData.push(...listValues)
-    } else {
-      page--
       loading.value = false
+    } else {
       throw new Error('获取数据失败')
     }
   } catch (error: any) {
@@ -177,15 +175,13 @@ const timeSelectHandler = () => {
 }
 
 const progressList = ref<progressItem[]>([])
-onMounted(() => {
-  progressList.value.push(
-    ...Array.from({ length: 3 }).map(() => ({
-      logType: '更新 Github 模板',
-      resultCode: '989665554',
-      logTime: '2022-4-26 15:48:55',
-    }))
-  )
-})
+progressList.value.push(
+  ...Array.from({ length: 3 }).map(() => ({
+    logType: '更新 Github 模板',
+    resultCode: '989665554',
+    logTime: '2022-4-26 15:48:55',
+  }))
+)
 const rowClickHandler = (row, column, event) => {
   progressList.value = []
   if (row.logObject) {

src/views/systemSettings/serviceManagement/index.vue

@@ -19,8 +19,8 @@
             </div>
           </div>
         </div>
-      </template></Minheader
-    >
+      </template>
+    </Minheader>
     <div class="integration__cont" ref="chartDom"></div>
     <Dialog
       width="1200px"
@@ -41,8 +41,11 @@
                 size="default"
                 type="datetime"
                 placeholder="选择开始日期时间"
-              >
-              </el-date-picker>
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                :clearable="false"
+                @change="timeSelectHandler"
+              />
             </div>
             <div class="interfaceLog_head_time_end r16">
               <el-date-picker
@@ -50,13 +53,16 @@
                 size="default"
                 type="datetime"
                 placeholder="选择结束日期时间"
-              >
-              </el-date-picker>
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                :clearable="false"
+                @change="timeSelectHandler"
+              />
             </div>
             <Search
-              @getSearchData="getSearchData"
-              :isTitle="false"
-              @clearSearchData="clearSearchData"
+              :is-title="false"
+              @get-search-data="getSearchData"
+              @clear-search-data="clearSearchData"
             />
           </div>
         </div>
@@ -64,23 +70,26 @@
           <el-row :gutter="24">
             <el-col :span="19">
               <DataTable
-                :tableHeader="state.list"
+                :tableHeader="tableColumns"
                 :tableData="tableData"
                 :tableProperty="{ rowKey: 'ID' }"
+                @load="load"
+                @row-click="rowClickHandler"
               />
             </el-col>
             <el-col :span="5">
               <div class="interfaceLog_content_progress">
                 <el-timeline>
                   <el-timeline-item
-                    v-for="(item, index) in preDatas"
+                    v-for="(item, index) in progressList"
                     :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 class="list_title">{{ item.logType }}</div>
+                      <div class="list_code">{{ item.resultCode }}</div>
+                      <div class="list_time">{{ item.logTime }}</div>
+                      <!-- <div class="list_detial">{{ item.resultDetails }}</div> -->
                     </div>
                   </el-timeline-item>
                 </el-timeline>
@@ -93,130 +102,69 @@
   </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";
-import img8 from "@/assets/integr/pull_red.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>("查看日志"); //弹窗标题
+import Minheader from '@/components/minheader/index.vue'
+import DataTable from '@/components/tableTemp/index.vue'
+import Dialog from '@/components/dialog/index.vue'
+import { Ref, provide } from 'vue'
+import * as echarts from 'echarts'
+import _ from 'lodash'
+import { ElMessage } from 'element-plus'
+import { Query } from '@/api/dataIntegration'
+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'
+import img8 from '@/assets/integr/pull_red.png'
+
+let serviceID: number
+
+
+provide('echarts', echarts)
+const chartDom = ref<HTMLDivElement | null>(null)
+const myChart = ref<Ref<echarts.ECharts> | null>(null)
+const flag = ref(false) //弹窗开关
+const type = ref('') //判断是否删除
+const msgTitle = ref('查看日志') //弹窗标题
 const getAssetsFile = (url: string) => {
-  return new URL(`../assets/integr/${url}`, import.meta.url).href;
-};
-const datas = ref<Array>([]);
-const desc = ref<number>(300);
+  return new URL(`../assets/integr/${url}`, import.meta.url).href
+}
+const datas = ref<any[]>([])
+const resizeDelay = 300
 //默认节点
 // const defaultImg = getAssetsFile("jiekou_blue.png");
-const defaultImg = "image://" + reactive(img1);
+const defaultImg = 'image://' + img1
 //默认节点-错误
-const defaultImgError = "image://" + reactive(img2);
-
+const defaultImgError = 'image://' + img2
 //拉取节点
-const pullImg = "image://" + reactive(img3);
-
+const pullImg = 'image://' + img3
 //拉取节点-错误
-const pullImgError = "image://" + reactive(img8);
-
+const pullImgError = 'image://' + img8
 //kafka节点
-const kafkaImg = "image://" + reactive(img4);
-
+const kafkaImg = 'image://' + img4
 //kafka节点-错误
-const kafkaImgError = getAssetsFile("kafka_red.png");
-
+const kafkaImgError = getAssetsFile('kafka_red.png')
 //推送节点
-const pushImg = "image://" + reactive(img5);
-
+const pushImg = 'image://' + img5
 //推送节点-错误
-const pushImgError = "image://" + getAssetsFile("push_red.png");
-
+const pushImgError = 'image://' + getAssetsFile('push_red.png')
 //存储节点
-const saveImg = "image://" + reactive(img6);
-
+const saveImg = 'image://' + img6
 //存储节点-错误
-const saveImgError = getAssetsFile("save_red.png");
-
+const saveImgError = getAssetsFile('save_red.png')
 //存储节点
-const mysqlImg = "image://" + reactive(img7);
-
+const mysqlImg = 'image://' + 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 mysqlImgError = getAssetsFile('mysql_red.png')
 const nodeDataList = ref([
   {
-    name: "星盟SBH",
-    linkTargetName: "Kafka",
-    linkValue: " ",
+    name: '星盟SBH',
+    linkTargetName: 'Kafka',
+    linkValue: ' ',
     coordConfig: {
-      level: "0",
+      level: '0',
     },
     value: [10, 245],
     draggable: false,
@@ -359,20 +307,20 @@ const nodeDataList = ref([
   //   value: [80, 100],
   // },
   {
-    name: "Kafka",
-    linkTargetName: "BSMBPM报文解析",
-    linkValue: " ",
-    coordConfig: { level: "3" },
+    name: 'Kafka',
+    linkTargetName: 'BSMBPM报文解析',
+    linkValue: ' ',
+    coordConfig: { level: '3' },
     symbolSize: 60,
     symbol: kafkaImg,
     draggable: false,
     value: [40, 245],
   },
   {
-    name: "BSMBPM报文解析",
-    linkTargetName: "BSM",
-    linkValue: " ",
-    coordConfig: { level: "3" },
+    name: 'BSMBPM报文解析',
+    linkTargetName: 'BSM',
+    linkValue: ' ',
+    coordConfig: { level: '3' },
     symbolSize: 60,
     symbol: pullImgError,
     draggable: false,
@@ -431,70 +379,70 @@ const nodeDataList = ref([
   //   value: [120, 140],
   // },
   {
-    name: "BSM",
-    linkTargetName: "解析服务",
-    linkValue: " ",
-    coordConfig: { level: "4" },
+    name: 'BSM',
+    linkTargetName: '解析服务',
+    linkValue: ' ',
+    coordConfig: { level: '4' },
     symbolSize: 60,
     symbol: defaultImg,
     draggable: false,
     value: [100, 245],
   },
   {
-    name: "BPM",
-    linkTargetName: "推送节点",
-    linkValue: " ",
-    coordConfig: { level: "4" },
+    name: 'BPM',
+    linkTargetName: '推送节点',
+    linkValue: ' ',
+    coordConfig: { level: '4' },
     symbolSize: 60,
     symbol: defaultImg,
     draggable: false,
     value: [100, 200],
   },
   {
-    name: "航班",
-    linkTargetName: "解析服务",
-    linkValue: " ",
-    coordConfig: { level: "4" },
+    name: '航班',
+    linkTargetName: '解析服务',
+    linkValue: ' ',
+    coordConfig: { level: '4' },
     symbolSize: 30,
     symbol: defaultImg,
     draggable: false,
     value: [160, 120],
   },
   {
-    name: "行李投诉",
-    linkTargetName: "解析服务",
-    linkValue: " ",
-    coordConfig: { level: "4" },
+    name: '行李投诉',
+    linkTargetName: '解析服务',
+    linkValue: ' ',
+    coordConfig: { level: '4' },
     symbolSize: 30,
     symbol: defaultImg,
     draggable: false,
     value: [160, 90],
   },
   {
-    name: "旅客",
-    linkTargetName: "解析服务",
-    linkValue: " ",
-    coordConfig: { level: "4" },
+    name: '旅客',
+    linkTargetName: '解析服务',
+    linkValue: ' ',
+    coordConfig: { level: '4' },
     symbolSize: 30,
     symbol: defaultImg,
     draggable: false,
     value: [160, 60],
   },
   {
-    name: "推送节点",
-    linkTargetName: "首都机场BHS ",
-    linkValue: " ",
-    coordConfig: { level: "5" },
+    name: '推送节点',
+    linkTargetName: '首都机场BHS ',
+    linkValue: ' ',
+    coordConfig: { level: '5' },
     symbolSize: 60,
     symbol: pushImg,
     draggable: false,
     value: [200, 160],
   },
   {
-    name: "推送节点 ",
-    linkTargetName: "星盟SBH ",
-    linkValue: " ",
-    coordConfig: { level: "5" },
+    name: '推送节点 ',
+    linkTargetName: '星盟SBH ',
+    linkValue: ' ',
+    coordConfig: { level: '5' },
     symbolSize: 60,
     symbol: pushImg,
     draggable: false,
@@ -504,10 +452,10 @@ const nodeDataList = ref([
     value: [200, 160],
   },
   {
-    name: "推送节点  ",
-    linkTargetName: "局方公共平台 ",
-    linkValue: " ",
-    coordConfig: { level: "5" },
+    name: '推送节点  ',
+    linkTargetName: '局方公共平台 ',
+    linkValue: ' ',
+    coordConfig: { level: '5' },
     symbolSize: 60,
     symbol: pushImg,
     draggable: false,
@@ -517,10 +465,10 @@ const nodeDataList = ref([
     value: [200, 160],
   },
   {
-    name: "推送节点   ",
-    linkTargetName: "行李推送事件",
-    linkValue: " ",
-    coordConfig: { level: "5" },
+    name: '推送节点   ',
+    linkTargetName: '行李推送事件',
+    linkValue: ' ',
+    coordConfig: { level: '5' },
     symbolSize: 60,
     symbol: pushImg,
     draggable: false,
@@ -530,10 +478,10 @@ const nodeDataList = ref([
     value: [200, 160],
   },
   {
-    name: "推送节点    ",
-    linkTargetName: "ES",
-    linkValue: " ",
-    coordConfig: { level: "5" },
+    name: '推送节点    ',
+    linkTargetName: 'ES',
+    linkValue: ' ',
+    coordConfig: { level: '5' },
     symbolSize: 60,
     symbol: pushImg,
     draggable: false,
@@ -543,105 +491,105 @@ const nodeDataList = ref([
     value: [200, 160],
   },
   {
-    name: "解析服务",
-    linkTargetName: " Kafka",
-    linkValue: " ",
-    coordConfig: { level: "5" },
+    name: '解析服务',
+    linkTargetName: ' Kafka',
+    linkValue: ' ',
+    coordConfig: { level: '5' },
     symbolSize: 60,
     symbol: pushImg,
     draggable: false,
     value: [200, 100],
   },
   {
-    name: "首都机场BHS ",
-    linkTargetName: "首都机场BHS ",
-    linkValue: " ",
-    coordConfig: { level: "6" },
+    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" },
+    name: '星盟SBH ',
+    linkTargetName: '星盟SBH ',
+    linkValue: ' ',
+    coordConfig: { level: '6' },
     symbolSize: 30,
     symbol: defaultImg,
     draggable: false,
     value: [240, 190],
   },
   {
-    name: "局方公共平台 ",
-    linkTargetName: "局方公共平台 ",
-    linkValue: " ",
-    coordConfig: { level: "6" },
+    name: '局方公共平台 ',
+    linkTargetName: '局方公共平台 ',
+    linkValue: ' ',
+    coordConfig: { level: '6' },
     symbolSize: 30,
     symbol: defaultImg,
     draggable: false,
     value: [240, 160],
   },
   {
-    name: "行李推送事件",
-    linkTargetName: "行李推送事件",
-    linkValue: " ",
-    coordConfig: { level: "6" },
+    name: '行李推送事件',
+    linkTargetName: '行李推送事件',
+    linkValue: ' ',
+    coordConfig: { level: '6' },
     symbolSize: 30,
     symbol: defaultImg,
     draggable: false,
     value: [240, 130],
   },
   {
-    name: "ES",
-    linkTargetName: "ES",
-    linkValue: " ",
-    coordConfig: { level: "6" },
+    name: 'ES',
+    linkTargetName: 'ES',
+    linkValue: ' ',
+    coordConfig: { level: '6' },
     symbolSize: 30,
     symbol: defaultImg,
     draggable: false,
     value: [240, 100],
   },
   {
-    name: " Kafka",
-    linkTargetName: "存储服务",
-    linkValue: " ",
-    coordConfig: { level: "6" },
+    name: ' Kafka',
+    linkTargetName: '存储服务',
+    linkValue: ' ',
+    coordConfig: { level: '6' },
     symbolSize: 30,
     symbol: defaultImg,
     draggable: false,
     value: [240, 70],
   },
   {
-    name: "存储服务",
-    linkTargetName: "Mysql",
-    linkValue: " ",
-    coordConfig: { level: "7" },
+    name: '存储服务',
+    linkTargetName: 'Mysql',
+    linkValue: ' ',
+    coordConfig: { level: '7' },
     symbolSize: 60,
     symbol: saveImg,
     draggable: false,
     value: [280, 160],
   },
   {
-    name: "Mysql",
-    linkTargetName: "Mysql",
-    linkValue: " ",
-    coordConfig: { level: "8" },
+    name: 'Mysql',
+    linkTargetName: 'Mysql',
+    linkValue: ' ',
+    coordConfig: { level: '8' },
     symbolSize: 60,
     symbol: mysqlImg,
     draggable: false,
     value: [340, 160],
   },
-]);
+])
 const options = reactive({
   itemStyle: {
     normal: {
-      color: "#67C23A",
+      color: '#67C23A',
     },
     shadowBlur: 0,
   },
   textStyle: {
-    color: "#444",
+    color: '#444',
     fontSize: 16,
     fontWeight: 600,
   },
@@ -654,75 +602,63 @@ const options = reactive({
   legend: [
     {
       formatter: function (name) {
-        return echarts.format.truncateText(name, 200, "12px", "…");
+        return echarts.format.truncateText(name, 200, '12px', '…', {})
       },
       tooltip: {
         show: true,
       },
-      selectedMode: "false",
+      selectedMode: 'false',
       bottom: 20,
     },
   ],
   animationDuration: 500,
-  animationEasingUpdate: "quinticInOut",
+  animationEasingUpdate: 'quinticInOut',
   xAxis: {
     show: false,
-    type: "value",
+    type: 'value',
   },
   yAxis: {
     show: false,
-    type: "value",
+    type: 'value',
   },
   series: [
     {
-      type: "graph",
-      coordinateSystem: "cartesian2d",
+      type: 'graph',
+      coordinateSystem: 'cartesian2d',
       //圆形上面的文字
       label: {
-        normal: {
-          position: "bottom",
-          show: true,
-          textStyle: {
-            fontSize: 12,
-          },
-        },
+        position: 'bottom',
+        show: true,
+        fontSize: 12,
       },
       itemStyle: {
-        normal: {
-          color: "#409eff",
-        },
+        color: '#409eff',
+
         shadowBlur: 0,
       },
       lineStyle: {
-        normal: {
-          width: 0,
-          shadowColor: "none",
-          color: "#ff0000",
-        },
+        width: 0,
+        shadowColor: 'none',
+        color: '#ff0000',
       },
-      data: [],
-      links: [],
+      data: <any[]>[],
+      links: <any[]>[],
     },
   ],
-});
-const handle = () => {
-  if (myChart) {
-    myChart.resize();
-  }
-};
-const getCoordDataList = () => {
-  let coorDataDict = {};
+})
+const getCoordDataList = (): any[] => {
+  let coorDataDict = {}
   let defaultConfig = {
-    type: "lines", //块1,2...n到节点A,B...N
-    coordinateSystem: "cartesian2d",
+    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",
+      symbol: 'arrow',
+      color: '#92A7D5',
       symbolSize: 10,
       period: 3,
       delay: 1500,
@@ -731,83 +667,192 @@ const getCoordDataList = () => {
     lineStyle: {
       normal: {
         curveness: 0,
-        color: "#92A7D5",
+        color: '#92A7D5',
         width: 1,
       },
     },
     data: [],
-  };
-  nodeDataList.value.map((item) => {
+  }
+  nodeDataList.value.map(item => {
     if (item.coordConfig !== undefined) {
       if (!(item.coordConfig.level in coorDataDict)) {
-        let coorConfig = JSON.parse(JSON.stringify(defaultConfig));
+        let coorConfig = JSON.parse(JSON.stringify(defaultConfig))
         if (item.coordConfig.lineStyle !== undefined) {
-          coorConfig.lineStyle = item.coordConfig.lineStyle;
+          coorConfig.lineStyle = item.coordConfig.lineStyle
         }
         if (item.coordConfig.effect !== undefined) {
-          coorConfig.effect = item.coordConfig.effect;
+          coorConfig.effect = item.coordConfig.effect
         }
-        coorDataDict[item.coordConfig.level] = coorConfig;
+        coorDataDict[item.coordConfig.level] = coorConfig
       }
 
       let coordData = [
         item.value,
-        nodeDataList.value.filter((i) => i.name == item.linkTargetName)[0]
+        nodeDataList.value.filter(i => i.name == item.linkTargetName)[0]
           .value ||
-          nodeDataList.value.filter((i) => i.name == item.linkTargetName)[1]
+          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) => {
+  })
+  return Object.values(coorDataDict)
+}
+nodeDataList.value.forEach(item => {
   datas.value.push({
     source: item.name,
     value: item.linkValue,
     target: item.linkTargetName,
-  });
-});
+  })
+})
 const resizeHandler = () => {
-  myChart.resize();
-};
+  myChart.value?.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);
+  options.series[0].data = nodeDataList.value
+  options.series[0].links = datas.value
+  options.series.push(...getCoordDataList())
+  myChart.value = echarts.init(chartDom.value as HTMLDivElement)
+  myChart.value.setOption(options as echarts.EChartOption, true)
+  window.addEventListener('resize', _.debounce(resizeHandler, resizeDelay))
+})
 // // 事件
 // myChart.on("click", (params) => {
 //   console.log(params);
 // });
-// 监听页面缩放 防止dom重复渲染
-// window.addEventListener("resize", _.debounce(handle, desc));
+
+//新增
+const addJournalForm = () => {
+  msgTitle.value = '查看日志'
+  flag.value = true
+}
+//取消
+const resetForm = () => {
+  flag.value = false
+}
+
+const getSearchData = (text: string) => {
+  console.log(text)
+}
+const clearSearchData = () => {}
+
+type TableColumn = {
+  label: string
+  key: string
+}
+let page = 0
+const loading = ref(false)
+const noMore = ref(false)
+const loadDisabled = computed(() => loading.value || noMore.value)
+//表头
+const tableColumns = ref<TableColumn[]>([])
+//列表
+const tableData = ref<any>([])
+const resetTable = () => {
+  page = 0
+  loading.value = false
+  noMore.value = false
+  tableData.value = []
+}
+const getTableData = async () => {
+  try {
+    loading.value = true
+    const {
+      code,
+      returnData: { columnSet, listValues },
+    } = await Query({
+      id: DATACONTENT_ID.sysServiceTopTable,
+      needPage: ++page,
+      dataContent: [serviceID, timeStart.value, timeEnd.value],
+    })
+    if (Number(code) === 0) {
+      tableColumns.value = columnSet.map(column => ({
+        label: column.columnLabel,
+        key: column.columnName,
+        ...column,
+      }))
+      if (listValues.length === 0) {
+        page--
+        noMore.value = true
+      }
+      tableData.push(...listValues)
+      loading.value = false
+    } else {
+      throw new Error('获取数据失败')
+    }
+  } catch (error: any) {
+    page--
+    loading.value = false
+    ElMessage.error(error.message)
+  }
+}
+const load = () => {
+  if (loadDisabled.value) {
+    return
+  }
+  getTableData()
+}
+
+const getToday = () => {
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = now.getMonth() + 1
+  const date = now.getDate()
+  return `${year}-${month}-${date}`
+}
+const today = getToday()
+const timeStart = ref(`${today} 00:00:00`)
+const timeEnd = ref(`${today} 23:59:59`)
+const timeSelectHandler = () => {
+  const startTime = new Date(timeStart.value).getTime()
+  const endTime = new Date(timeEnd.value).getTime()
+  if (startTime > endTime) {
+    ElMessage.error('开始时间不能大于结束时间')
+    timeEnd.value = ''
+    return
+  }
+  if (startTime < endTime - (3 * 24 * 60 * 60 - 1) * 1000) {
+    ElMessage.error('间隔时间不能大于三天')
+    timeEnd.value = ''
+    return
+  }
+  resetTable()
+  getTableData()
+}
+
+type progressItem = {
+  logType: string
+  resultCode: string
+  logTime: string
+  resultDetails?: string
+}
+const progressList = ref<progressItem[]>([])
+progressList.value.push(
+  ...Array.from({ length: 3 }).map(() => ({
+    logType: '更新 Github 模板',
+    resultCode: '989665554',
+    logTime: '2022-4-26 15:48:55',
+  }))
+)
+const rowClickHandler = (row, column, event) => {
+  progressList.value = []
+  if (row.logObject) {
+    tableData.value.forEach(record => {
+      if (record.logObject == row.logObject) {
+        progressList.value.push(record)
+      }
+    })
+  } else {
+    progressList.value.push(row)
+  }
+}
 </script>
 <style lang="scss" scoped>
 .integration__cont__map__cont {