服务管理修改ing

src/components/tableTemp/index.vue

@@ -1,48 +1,36 @@
 <template>
-  <el-table ref="table" v-el-table-infinite-scroll="load" :row-key="
-      props.tableProperty.rowKey
-        ? props.tableProperty.rowKey
-        : tablePropertyDefault.rowKey
-    " :row-style="rowStyle" :data="props.tableData" :height="
-      props.tableProperty.height
-        ? props.tableProperty.height
-        : tablePropertyDefault.height
-    " :max-height="
-      props.tableProperty.maxHeight
-        ? props.tableProperty.maxHeight
-        : tablePropertyDefault.maxHeight
-    " :stripe="
-      props.tableProperty.stripe
-        ? props.tableProperty.stripe
-        : tablePropertyDefault.stripe
-    " :border="
-      props.tableProperty.border
-        ? props.tableProperty.border
-        : tablePropertyDefault.border
-    " :highlight-current-row="
-      props.tableProperty.highlightCurrentRow
-        ? props.tableProperty.highlightCurrentRow
-        : tablePropertyDefault.highlightCurrentRow
-    " :header-cell-class-name="
-      props.tableProperty.headerRowClassName
-        ? props.tableProperty.headerRowClassName
-        : tablePropertyDefault.headerRowClassName
-    " :tooltip-effect="
-      props.tableProperty.tooltipEffect
-        ? props.tableProperty.tooltipEffect
-        : tablePropertyDefault.tooltipEffect
-    " :show-summary="
-      props.tableProperty.showSummary
-        ? props.tableProperty.showSummary
-        : tablePropertyDefault.showSummary
-    " :row-class-name="tableRowClassName" :cell-class-name="cellClassName" @row-click="rowClickHandler" @cell-click="cellClickHandler">
+  <el-table
+    ref="table"
+    v-el-table-infinite-scroll="load"
+    :row-key="tableProps.rowKey"
+    :row-style="rowStyle"
+    :data="tableData"
+    :height="tableProps.height"
+    :max-height="tableProps.maxHeight"
+    :stripe="tableProps.stripe"
+    :border="tableProps.border"
+    :highlight-current-row="tableProps.highlightCurrentRow"
+    :header-cell-class-name="tableProps.headerRowClassName"
+    :tooltip-effect="tableProps.tooltipEffect"
+    :show-summary="tableProps.showSummary"
+    :row-class-name="tableRowClassName"
+    :cell-class-name="cellClassName"
+    @row-click="rowClickHandler"
+    @cell-click="cellClickHandler"
+  >
     <el-table-column v-if="isStatus" width="55">
       <template #default="scope">
         <div class="tableStatus">
-          <div v-if="props.tableData[scope.$index].nodeState == '运行'" class="status0">
+          <div
+            v-if="tableData[scope.$index].nodeState === '运行'"
+            class="status0"
+          >
             <span class="icon"></span>
           </div>
-          <div v-else-if="props.tableData[scope.$index].nodeState == '停止'" class="status1">
+          <div
+            v-else-if="tableData[scope.$index].nodeState === '停止'"
+            class="status1"
+          >
             <span class="icon"></span>
           </div>
           <div v-else class="status2"><span class="icon"></span></div>
@@ -50,30 +38,57 @@
       </template>
     </el-table-column>
     <!-- label-class-name  可通过 tableHeader中传入class来修改某一个或某一类表头的样式-->
-    <el-table-column class="infinite-list-item" v-for="(items, index) in tableHeaderList" :key="index" :label="items.columnLabel" :prop="items.columnName" :width="items.width?items.width:props.tableColumnProperty.width" :sortable="
-        items.needSort ? items.needSort : props.tableColumnProperty.sortable
-      " :show-overflow-tooltip="props.tableColumnProperty.showOverflowTooltip" :align="items.align ? items.align : props.tableColumnProperty.align" :header-align="
-        items.headerAlign
-          ? items.headerAlign
-          : props.tableColumnProperty.headerAlign
-      " :label-class-name="items.lableClass ? items.lableClass : ''" :class-name="items.columnClassName">
+    <el-table-column
+      class="infinite-list-item"
+      v-for="(items, index) in tableHeaderList"
+      :key="index"
+      :label="items.columnLabel"
+      :prop="items.columnName"
+      :width="items.width ? items.width : tableColumnProperty.width"
+      :sortable="items.needSort ? items.needSort : tableColumnProperty.sortable"
+      :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
+      :align="items.align ? items.align : tableColumnProperty.align"
+      :header-align="
+        items.headerAlign ? items.headerAlign : tableColumnProperty.headerAlign
+      "
+      :label-class-name="items.lableClass ? items.lableClass : ''"
+      :class-name="items.columnClassName"
+    >
       <template #default="scope">
         <!-- 枚举值则为 items.key+'-enum' -->
         <template v-if="isChild(scope.row[items.columnName])">
-          <div class="child-list" v-for="(newItem,ni) in childDatas(scope.row[items.columnName])" :key="ni">{{newItem}}</div>
+          <div
+            class="child-list"
+            v-for="(newItem, i) in childDatas(scope.row[items.columnName])"
+            :key="i"
+          >
+            {{ newItem }}
+          </div>
         </template>
         <template v-else>
           {{
-          scope.row[items.columnName + "-enum"]
-            ? scope.row[items.columnName + "-enum"]
-            : scope.row[items.columnName]
-        }}
+            scope.row[items.columnName + '-enum']
+              ? scope.row[items.columnName + '-enum']
+              : scope.row[items.columnName]
+          }}
         </template>
       </template>
     </el-table-column>
-    <el-table-column v-if="props.tableBtnGroup.length" label="操作" :align="props.tableColumnProperty.align" :width="BtnGroupWidth">
+    <el-table-column
+      v-if="tableBtnGroup.length"
+      label="操作"
+      :align="tableColumnProperty.align"
+      :width="btnGroupWidth"
+    >
       <template #default="scope">
-        <el-button v-for="(btn, index) in props.tableBtnGroup" :key="index" size="small" @click="handleClick(scope.$index, scope.row, btn.param)" :class="btn.className">{{ btn.name }}</el-button>
+        <el-button
+          v-for="(btn, index) in tableBtnGroup"
+          :key="index"
+          size="small"
+          @click="handleClick(scope.$index, scope.row, btn.param)"
+          :class="btn.className"
+          >{{ btn.name }}</el-button
+        >
       </template>
     </el-table-column>
   </el-table>
@@ -83,146 +98,141 @@
 </template>
 
 <script setup lang="ts">
-import { computed,watchEffect } from "vue";
-import { ElTable } from "element-plus";
-//表格参数
-const tablePropertyDefault = {
-  height: "100%",
-  maxHeight: "100%",
-  stripe: true,
-  border: true,
-  highlightCurrentRow: false,
-  rowClassName: "rowClass",
-  headerRowClassName: "headerRowClass",
-  tooltipEffect: "light",
-  showSummary: false,
-  rowKey: "",
-};
+import { PropType, computed, watchEffect } from 'vue'
+import { ElTable } from 'element-plus'
+import { CommonTableColumn } from '~/common'
+
+export interface TableButton {
+  name: string
+  className: string
+  param: number
+}
+
 const props = defineProps({
-  //表头参数数组
+  // 表头参数数组
   tableHeader: {
-    type: Array,
-    default: [
-      // { label: "序号", key: "ID", sortable: true ,width:"50px"},
-      // { label: "姓名", key: "NAME" },
-      // { label: "成绩", key: "score", sortable: true, lableClass: "scoreColumn",columnClassName:"columnClassName" },
-    ],
+    type: Array as PropType<CommonTableColumn[]>,
+    default: [] as CommonTableColumn[],
   },
-  //表格参数
+  // 表格参数
   tableProperty: {
     type: Object,
-    default: {
-      height: "100%",
-      maxHeight: "100%",
-      stripe: true,
-      border: true,
-      highlightCurrentRow: false,
-      rowClassName: "rowClass",
-      headerRowClassName: "headerRowClass",
-      tooltipEffect: "light",
-      showSummary: false,
-      rowKey: "",
-    },
+    default: {},
   },
-  //公共表头参数
+  // 公共表头参数
   tableColumnProperty: {
     type: Object,
     default: {
-      width: "",
-      fixed: "",
+      width: '',
+      fixed: '',
       sortable: false,
       showOverflowTooltip: true,
-      align: "center",
-      headerAlign: "",
+      align: 'center',
+      headerAlign: '',
     },
   },
-  //操作栏按钮组
+  // 操作栏按钮组
   tableBtnGroup: {
-    type: Array,
-    default: [
-      // {
-      // name:"编辑",     //按钮名称
-      // className:"editBtn",  //按钮class样式  可以在父组件中定义好此class样式
-      // param:2    //按钮类型参数
-      // }
-    ],
+    type: Array as PropType<TableButton[]>,
+    default: [] as TableButton[],
   },
-  //表格数据
+  // 表格数据
   tableData: {
-    type: Array,
-    default: [],
+    type: Array as PropType<any[]>,
+    default: [] as any[],
   },
-  //操作栏宽度
-  BtnGroupWidth: {
+  // 操作栏宽度
+  btnGroupWidth: {
     type: String,
-    default: "",
+    default: '',
   },
-  //自定义表头
+  // 自定义表头
   isStatus: {
     type: Boolean,
     default: false,
   },
-});
+})
 
-const tableHeaderList = ref([])
+//表格参数
+const tableProps = reactive({
+  height: '100%',
+  maxHeight: '100%',
+  stripe: true,
+  border: true,
+  highlightCurrentRow: false,
+  rowClassName: 'rowClass',
+  headerRowClassName: 'headerRowClass',
+  tooltipEffect: 'light',
+  showSummary: false,
+  rowKey: '',
+})
+watchEffect(() => {
+  Object.assign(tableProps, props.tableProperty)
+})
 
+const tableHeaderList = ref<CommonTableColumn[]>([])
 watchEffect(() => {
-  let newArray = []
-  console.log(props.tableHeader)
-  props.tableHeader.map(item => {
-      if(item.needShow != false){
-        newArray.push(item)
-      }
-  })
-  tableHeaderList.value = newArray;
+  tableHeaderList.value = props.tableHeader.filter(column => column.needShow)
 })
 
 const isChild = computed(() => (item: any) => {
-  const msg = typeof item === "string" ? item : `${item}`;
-  return msg.includes("-");
-});
+  const msg = typeof item === 'string' ? item : `${item}`
+  return msg.includes('-')
+})
 
 const childDatas = computed(() => (item: any) => {
-  const msg = typeof item === "string" ? item : `${item}`;
-  return msg.split("-");
-});
+  const msg = typeof item === 'string' ? item : `${item}`
+  return msg.split('-')
+})
 
 //向父组件传参 btnClick：点击按钮后    load  触发下拉加载   cellClass 修改某一行class的触发条件
-const emit = defineEmits(["btnClick", "load", "cellClass", "rowClick", "cellClick"]);
+const emit = defineEmits([
+  'btnClick',
+  'load',
+  'cellClass',
+  'rowClick',
+  'cellClick',
+])
 
 //按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
-const handleClick = (index: number, row: Object, param: number) => {
-  emit("btnClick", index, row, param);
-};
+const handleClick = (rowIndex: number, row: any, param: number) => {
+  emit('btnClick', rowIndex, row, param)
+}
 
 //行公共样式
-const rowStyle = (row: Object, rowIndex: number) => {
-  let styleJson: Object = {
-    height: "50px",
-    fontSize: "14px",
-    color: "#101116",
-  };
-  return styleJson;
-};
+const rowStyle = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
+  let styleJson = {
+    height: '50px',
+    fontSize: '14px',
+    color: '#101116',
+  }
+  return styleJson
+}
 
 //表格行class样式 可通过父组件直接传class名称修改当前行样式
-const tableRowClassName = (row: Object, rowIndex: number) => {
-  if (row.row.rowClass) {
-    return row.row.rowClass;
+const tableRowClassName = ({
+  row,
+  rowIndex,
+}: {
+  row: any
+  rowIndex: number
+}) => {
+  if (row.rowClass) {
+    return row.rowClass
   }
-  return "";
-};
+  return ''
+}
 
 //给某一格加class
-const cellClass = ref("");
+const cellClass = ref('')
 const cellClassName = (row: Object) => {
-  emit("cellClass", row);
-  return cellClass.value;
-};
+  emit('cellClass', row)
+  return cellClass.value
+}
 //滚动分页加载
 const load = () => {
-  emit("load", true);
-};
+  emit('load', true)
+}
 
 const rowClickHandler = (row, column, event) => {
   emit('rowClick', row, column, event)
@@ -236,8 +246,8 @@ const table = ref<InstanceType<typeof ElTable> | null>(null)
 
 defineExpose({
   cellClass,
-  table
-});
+  table,
+})
 </script>
 
 <style scoped lang="scss">

src/router/routes/routes-file-four.ts

@@ -1,100 +1,118 @@
-import Layout from "@/layout";
+import Layout from '@/layout'
 
 const HomeRoutes = {
-  path: "/systemSettings",
+  path: '/systemSettings',
   component: Layout,
-  name: "systemSettings",
-  redirect: "/systemSettings/securityPolicy",
+  name: 'systemSettings',
+  redirect: '/systemSettings/securityPolicy',
   //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
-  meta: { title: "系统配置", elSvgIcon: "Fold" },
+  meta: { title: '系统配置', elSvgIcon: 'Fold', breadcrumb: false },
   children: [
     {
-      path: "/systemSettings/securityPolicy",
-      name: "SecurityPolicy",
-      meta: { title: "安全策略", elSvgIcon: "Fold", icon: "table" },
+      path: '/systemSettings/securityPolicy',
+      name: 'SecurityPolicy',
+      meta: { title: '安全策略', elSvgIcon: 'Fold', icon: 'table' },
       component: () =>
-        import("@/views/systemSettings/securityPolicy/index.vue"),
+        import('@/views/systemSettings/securityPolicy/index.vue'),
     },
     {
-      path: "/systemSettings/securityPolicyedit",
-      name: "SecurityPolicyedit",
+      path: '/systemSettings/securityPolicyedit',
+      name: 'SecurityPolicyedit',
       hidden: true,
-      meta: { title: "安全策略编辑", elSvgIcon: "Fold", icon: "table" },
+      meta: { title: '安全策略编辑', elSvgIcon: 'Fold', icon: 'table' },
       component: () =>
-        import("@/views/systemSettings/securityPolicy/securityPolicyedit.vue"),
+        import('@/views/systemSettings/securityPolicy/securityPolicyedit.vue'),
     },
     {
-      path: "/systemSettings/warningSet",
-      name: "WarningSet",
-      meta: { title: "预警告警策略", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/systemSettings/warningSet/index.vue"),
+      path: '/systemSettings/warningSet',
+      name: 'WarningSet',
+      meta: { title: '预警告警策略', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/systemSettings/warningSet/index.vue'),
     },
     {
-      path: "/systemSettings/warningEdit",
-      name: "WarningEdit",
+      path: '/systemSettings/warningEdit',
+      name: 'WarningEdit',
       hidden: true,
-      meta: { title: "预警告警策略编辑", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/systemSettings/warningEdit/index.vue"),
-    },
-    {
-      path: "/systemSettings/log",
-      name: "log",
-      meta: { title: "日志管理", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/systemSettings/log/index.vue"),
-    },
-    {
-      path: "/systemSettings/serviceManagement",
-      name: "ServiceManagement",
-      meta: { title: "服务管理", elSvgIcon: "Fold", icon: "table" },
-      component: () =>
-        import("@/views/systemSettings/serviceManagement/index.vue"),
-    },
-    {
-      path: "/systemSettings/serviceMonitor",
-      name: "ServiceMonitor",
-      meta: { title: "服务监控", elSvgIcon: "Fold", icon: "table" },
-      component: () =>
-        import("@/views/systemSettings/serviceManagement/serviceMonitor.vue"),
-    },
-    {
-      path: "/systemSettings/serviceMonitorEdit",
-      name: "ServiceMonitorEdit",
-      hidden: true,
-      meta: { title: "服务监控编辑", elSvgIcon: "Fold", icon: "table" },
-      component: () =>
-        import(
-          "@/views/systemSettings/serviceManagement/serviceMonitorEdit.vue"
-        ),
-    },
-    {
-      path: "/systemSettings/queryTemplate",
-      name: "QueryTemplate",
-      meta: { title: "查询模板", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/systemSettings/queryTemplate/index.vue"),
-    },
-    {
-      path: "/systemSettings/queryTemplateAdd",
-      name: "QueryTemplateAdd",
+      meta: { title: '预警告警策略编辑', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/systemSettings/warningEdit/index.vue'),
+    },
+    {
+      path: '/systemSettings/log',
+      name: 'log',
+      meta: { title: '日志管理', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/systemSettings/log/index.vue'),
+    },
+    {
+      path: '/systemSettings/serviceManagement',
+      name: 'ServiceManagement',
+      component: {
+        render: () => h(resolveComponent('router-view')),
+      },
+      children: [
+        {
+          path: '/systemSettings/serviceManagement',
+          name: 'ServiceHome',
+          meta: { title: '服务管理', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import('@/views/systemSettings/serviceManagement/index.vue'),
+        },
+        {
+          path: '/systemSettings/serviceTopology',
+          name: 'ServiceTopology',
+          hidden: true,
+          meta: { title: '服务拓扑' },
+          component: () =>
+            import(
+              '@/views/systemSettings/serviceManagement/serviceTopology.vue'
+            ),
+        },
+        {
+          path: '/systemSettings/serviceAdd',
+          name: 'ServiceAdd',
+          hidden: true,
+          meta: { title: '服务编辑' },
+          component: () =>
+            import('@/views/systemSettings/serviceManagement/serviceEdit.vue'),
+        },
+        {
+          path: '/systemSettings/serviceEdit',
+          name: 'ServiceEdit',
+          hidden: true,
+          meta: { title: '服务编辑' },
+          component: () =>
+            import('@/views/systemSettings/serviceManagement/serviceEdit.vue'),
+        },
+      ],
+    },
+    {
+      path: '/systemSettings/queryTemplate',
+      name: 'QueryTemplate',
+      meta: { title: '查询模板', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/systemSettings/queryTemplate/index.vue'),
+    },
+    {
+      path: '/systemSettings/queryTemplateAdd',
+      name: 'QueryTemplateAdd',
       hidden: true,
-      meta: { title: "新增查询模板", elSvgIcon: "Fold", icon: "table" },
+      meta: { title: '新增查询模板', elSvgIcon: 'Fold', icon: 'table' },
       component: () =>
-        import("@/views/systemSettings/queryTemplate/queryTemplateAdd.vue"),
+        import('@/views/systemSettings/queryTemplate/queryTemplateAdd.vue'),
     },
     {
-      path: "/systemSettings/queryTemplateEdit",
-      name: "QueryTemplateEdit",
+      path: '/systemSettings/queryTemplateEdit',
+      name: 'QueryTemplateEdit',
       hidden: true,
-      meta: { title: "编辑查询模板", elSvgIcon: "Fold", icon: "table" },
+      meta: { title: '编辑查询模板', elSvgIcon: 'Fold', icon: 'table' },
       component: () =>
-        import("@/views/systemSettings/queryTemplate/queryTemplateEdit.vue"),
+        import('@/views/systemSettings/queryTemplate/queryTemplateEdit.vue'),
     },
     {
-      path: "/systemSettings/queryTemplateColumn",
-      name: "QueryTemplateColumn",
+      path: '/systemSettings/queryTemplateColumn',
+      name: 'QueryTemplateColumn',
       hidden: true,
-      meta: { title: "查询模板设置", elSvgIcon: "Fold", icon: "table" },
+      meta: { title: '查询模板设置', elSvgIcon: 'Fold', icon: 'table' },
       component: () =>
-        import("@/views/systemSettings/queryTemplate/queryTemplateColumn.vue"),
+        import('@/views/systemSettings/queryTemplate/queryTemplateColumn.vue'),
     },
     // {
     //   path: "/systemSettings/sourceservice",
@@ -103,48 +121,48 @@ const HomeRoutes = {
     //   component: () => import("@/views/systemSettings/sourceservice/index.vue"),
     // },
     {
-      path: "/systemSettings/sourceserviceEdit",
-      name: "SourceserviceEdit",
+      path: '/systemSettings/sourceserviceEdit',
+      name: 'SourceserviceEdit',
       hidden: true,
-      meta: { title: "编辑源数据管理", elSvgIcon: "Fold", icon: "table" },
+      meta: { title: '编辑源数据管理', elSvgIcon: 'Fold', icon: 'table' },
       component: () =>
-        import("@/views/systemSettings/sourceserviceEdit/index.vue"),
+        import('@/views/systemSettings/sourceserviceEdit/index.vue'),
     },
     {
-      path: "/systemSettings/sourceTube",
-      name: "SourceTube",
-      meta: { title: "源数据管理", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/systemSettings/sourceTube/index.vue"),
+      path: '/systemSettings/sourceTube',
+      name: 'SourceTube',
+      meta: { title: '源数据管理', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/systemSettings/sourceTube/index.vue'),
     },
     {
-      path: "/systemSettings/protocolManagement",
-      name: "ProtocolManagement",
-      meta: { title: "协议管理", elSvgIcon: "Fold", icon: "table" },
+      path: '/systemSettings/protocolManagement',
+      name: 'ProtocolManagement',
+      meta: { title: '协议管理', elSvgIcon: 'Fold', icon: 'table' },
       component: () =>
-        import("@/views/systemSettings/protocolManagement/index.vue"),
+        import('@/views/systemSettings/protocolManagement/index.vue'),
     },
     {
-      path: "/systemSettings/datastructure",
-      name: "Datastructure",
-      meta: { title: "数据结构管理", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/systemSettings/datastructure/index.vue"),
+      path: '/systemSettings/datastructure',
+      name: 'Datastructure',
+      meta: { title: '数据结构管理', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/systemSettings/datastructure/index.vue'),
     },
     {
-      path: "/systemSettings/datastructureTerm",
-      name: "DatastructureTerm",
+      path: '/systemSettings/datastructureTerm',
+      name: 'DatastructureTerm',
       hidden: true,
-      meta: { title: "数据项", elSvgIcon: "Fold", icon: "table" },
+      meta: { title: '数据项', elSvgIcon: 'Fold', icon: 'table' },
       component: () =>
-        import("@/views/systemSettings/datastructure/datastructureTerm.vue"),
+        import('@/views/systemSettings/datastructure/datastructureTerm.vue'),
     },
     {
-      path: "/systemSettings/messageTemplate",
-      name: "MessageTemplate",
-      meta: { title: "消息模板", elSvgIcon: "Fold", icon: "table" },
+      path: '/systemSettings/messageTemplate',
+      name: 'MessageTemplate',
+      meta: { title: '消息模板', elSvgIcon: 'Fold', icon: 'table' },
       component: () =>
-        import("@/views/systemSettings/messageTemplate/index.vue"),
+        import('@/views/systemSettings/messageTemplate/index.vue'),
     },
   ],
-};
+}
 
-export default [HomeRoutes];
+export default [HomeRoutes]

src/views/BasicsData/airportInfo/index.vue

@@ -26,7 +26,7 @@
         <el-col :span="18">
           <div class="app-containers">
             <DataTable
-              :BtnGroupWidth="BtnGroupWidth"
+              :btnGroupWidth="btnGroupWidth"
               :tableHeader="tableCols"
               :tableData="tableData"
               :tableBtnGroup="tableBtnGroup"
@@ -170,7 +170,7 @@ const defaultProps = ref({
   label: "companyName",
 });
 const companyID = ref(""); //机场id
-const BtnGroupWidth = ref<String>("");
+const btnGroupWidth = ref<String>("");
 const flag = ref<Boolean>(false); //弹窗开关
 const type = ref<String>(""); //判断是否删除
 const msgTitle = ref<String>("新增机场信息维护"); //弹窗标题
@@ -431,9 +431,9 @@ const getQuery = async () => {
       }
       tableData.value.push(...returnData.listValues);
       if (returnData.columnSet) {
-        BtnGroupWidth.value = "300px";
+        btnGroupWidth.value = "300px";
       } else {
-        BtnGroupWidth.value = "";
+        btnGroupWidth.value = "";
       }
       tableCols.value = returnData.columnSet;
       tableCols.value.forEach((element) => {

src/views/systemSettings/serviceManagement/index.vue

@@ -1,904 +1,468 @@
 <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 class="airportInfo scroll-y">
+    <div class="wrap">
+      <MinHeader
+        :is-auth="true"
+        :is-statuser="true"
+        @addForm="addServiceHandler"
+      >
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">服务管理</div>
+            <div class="status0"><span class="icon"></span>启动</div>
+            <div class="status2"><span class="icon"></span>异常</div>
+            <div class="status1"><span class="icon"></span>停止</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="选择开始日期时间"
-                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
-                v-model="timeEnd"
-                size="default"
-                type="datetime"
-                placeholder="选择结束日期时间"
-                format="YYYY-MM-DD HH:mm:ss"
-                value-format="YYYY-MM-DD HH:mm:ss"
-                :clearable="false"
-                @change="timeSelectHandler"
-              />
-            </div>
-            <Search
-              :is-title="false"
-              @get-search-data="getSearchData"
-              @clear-search-data="clearSearchData"
-            />
-          </div>
-        </div>
-        <div class="interfaceLog_content">
-          <el-row :gutter="24">
-            <el-col :span="19">
-              <DataTable
-                :tableHeader="tableColumns"
-                :tableData="tableData"
-                :tableProperty="{ rowKey: 'ID' }"
-                @load="load"
-                @row-click="rowClickHandler"
-              />
+        </template>
+      </MinHeader>
+      <div class="app-containers">
+        <DataTable
+          :is-Status="true"
+          :table-header="tableColumns"
+          :table-data="tableData"
+          :table-btn-group="tableBtnGroup"
+          btn-group-width="310px"
+          :table-property="{ rowKey: 'ID' }"
+          @btn-click="btnClickHandler"
+        />
+      </div>
+      <Dialog
+        :width="serviceDialogWidth"
+        :flag="serviceDialogVisible"
+        :type="type"
+        :del-name="delName"
+        :msg-title="msgTitle"
+        @delRest="delCancelHandler"
+      >
+        <el-form
+          ref="serviceForm"
+          class="service-form"
+          :model="serviceForm"
+          :rules="serviceFormRules"
+          label-position="right"
+          label-width="82px"
+          size="mini"
+        >
+          <el-row :gutter="36" type="flex">
+            <el-col :span="12">
+              <el-form-item label="服务名称" prop="serviceName">
+                <el-input
+                  v-model="serviceForm.serviceName"
+                  placeholder="请输入服务名称"
+                  clearable
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="前序输出编号"
+                label-width="114px"
+                prop="serviceOutputID"
+              >
+                <el-input
+                  v-model="serviceForm.serviceOutputID"
+                  placeholder="请输入前序输出编号"
+                  clearable
+                />
+              </el-form-item>
             </el-col>
-            <el-col :span="5">
-              <div class="interfaceLog_content_progress">
-                <el-timeline>
-                  <el-timeline-item
-                    v-for="(item, index) in progressList"
-                    :key="index"
-                  >
-                    <div class="list">
-                      <div class="list_status"></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>
+            <el-col :span="12">
+              <el-form-item label="类型" prop="serviceType">
+                <el-select v-model="serviceForm.serviceType" clearable>
+                  <el-option :value="1" label="管理前端" />
+                  <el-option :value="2" label="管理后端" />
+                  <el-option :value="3" label="业务前端" />
+                  <el-option :value="4" label="业务后端" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label-width="14px">
+                <el-radio-group v-model="serviceForm.isAsynchronous">
+                  <el-radio :label="1">同步</el-radio>
+                  <el-radio :label="0">异步</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div class="flex">
+                <el-form-item label="数据来源" prop="dataSourceID">
+                  <el-select v-model="serviceForm.dataSourceID" clearable>
+                    <el-option
+                      v-for="dataSource in dataSourceList"
+                      :key="dataSource.dataSourceID"
+                      :value="dataSource.dataSourceID"
+                      :label="dataSource.dataSourceName"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-button
+                  type="primary"
+                  size="small"
+                  style="height: 28px; line-height: 0px"
+                  @click="addDataSourceHandler"
+                  >新增</el-button
+                >
               </div>
             </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="数据来源对象"
+                label-width="114px"
+                prop="sourceObjectName"
+              >
+                <el-input
+                  v-model="serviceForm.sourceObjectName"
+                  placeholder="请输入数据来源对象名称"
+                  clearable
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="服务描述" prop="serviceDescribe">
+                <el-input
+                  v-model="serviceForm.serviceDescribe"
+                  placeholder="请输入描述"
+                  clearable
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="生命周期ID键名"
+                prop="lifeCycleCol"
+                label-width="114px"
+              >
+                <el-input
+                  v-model="serviceForm.lifeCycleCol"
+                  placeholder="请输入生命周期ID键名"
+                  clearable
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="取值规则" prop="computingMethod">
+                <el-input
+                  v-model="serviceForm.computingMethod"
+                  placeholder="请输入取值规则"
+                  type="textarea"
+                  :autosize="{ minRows: 4, maxRows: 4 }"
+                  resize="none"
+                  clearable
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="检测规则" prop="validationExpression">
+                <el-input
+                  v-model="serviceForm.validationExpression"
+                  placeholder="请输入检测规则"
+                  type="textarea"
+                  :autosize="{ minRows: 4, maxRows: 4 }"
+                  resize="none"
+                  clearable
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="启动时间" prop="startTime">
+                <el-date-picker
+                  v-model="serviceForm.startTime"
+                  type="datetime"
+                  format="yyyy-MM-dd HH:mm"
+                  value-format="yyyy-MM-dd HH:mm"
+                  placeholder="请选择启动时间"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="停止时间" prop="stopTime">
+                <el-date-picker
+                  v-model="serviceForm.stopTime"
+                  type="datetime"
+                  format="yyyy-MM-dd HH:mm"
+                  value-format="yyyy-MM-dd HH:mm"
+                  placeholder="请选择停止时间"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item
+                label="失败重试次数"
+                prop="retryCount"
+                label-width="100px"
+              >
+                <el-input
+                  v-model="serviceForm.retryCount"
+                  type="number"
+                  placeholder="请输入重试次数"
+                  clearable
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="循环次数" prop="loopCount">
+                <el-input
+                  v-model="serviceForm.loopCount"
+                  type="number"
+                  placeholder="请输入循环次数"
+                  clearable
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="循环频率" prop="frequencyCount">
+                <el-input
+                  v-model="serviceForm.frequencyCount"
+                  type="number"
+                  placeholder="请输入循环频率"
+                  clearable
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item
+                label="循环频率单位"
+                prop="frequencyUnit"
+                label-width="100px"
+              >
+                <el-select v-model="serviceForm.frequencyUnit" clearable>
+                  <el-option label="天" :value="24 * 60 * 60 * 1000" />
+                  <el-option label="小时" :value="60 * 60 * 1000" />
+                  <el-option label="分钟" :value="60 * 1000" />
+                  <el-option label="秒" :value="1000" />
+                  <el-option label="毫秒" :value="1" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="日志存储位置"
+                label-width="100px"
+                prop="logDataSourceID"
+              >
+                <el-select v-model="serviceForm.logDataSourceID">
+                  <el-option
+                    v-for="dataSource in dataSourceList"
+                    :key="dataSource.dataSourceID"
+                    :value="dataSource.dataSourceID"
+                    :label="dataSource.dataSourceName"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="日志过滤条件"
+                label-width="100px"
+                prop="logList"
+              >
+                <el-input
+                  v-model="serviceForm.logList"
+                  placeholder="请输入日志过滤条件"
+                  clearable
+                />
+              </el-form-item>
+            </el-col>
           </el-row>
-        </div>
-      </div>
-    </Dialog>
+        </el-form>
+      </Dialog>
+      <Dialog
+        type="add"
+        width="600px"
+        :flag="dataSourceDialogVisible"
+        msg-title="新增数据来源"
+        @delRest="delCancelHandler"
+      ></Dialog>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
-import Minheader from '@/components/minheader/index.vue'
 import DataTable from '@/components/tableTemp/index.vue'
+import MinHeader from '@/components/minheader/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
+interface DataSource {
+  dataSourceID: string
+  dataSourceName: string
 }
-const datas = ref<any[]>([])
-const resizeDelay = 300
-//默认节点
-// const defaultImg = getAssetsFile("jiekou_blue.png");
-const defaultImg = 'image://' + img1
-//默认节点-错误
-const defaultImgError = 'image://' + img2
-//拉取节点
-const pullImg = 'image://' + img3
-//拉取节点-错误
-const pullImgError = 'image://' + img8
-//kafka节点
-const kafkaImg = 'image://' + img4
-//kafka节点-错误
-const kafkaImgError = getAssetsFile('kafka_red.png')
-//推送节点
-const pushImg = 'image://' + img5
-//推送节点-错误
-const pushImgError = 'image://' + getAssetsFile('push_red.png')
-//存储节点
-const saveImg = 'image://' + img6
-//存储节点-错误
-const saveImgError = getAssetsFile('save_red.png')
-//存储节点
-const mysqlImg = 'image://' + img7
-//存储节点-错误
-const mysqlImgError = getAssetsFile('mysql_red.png')
-const nodeDataList = ref([
-  {
-    name: '星盟SBH',
-    linkTargetName: 'Kafka',
-    linkValue: ' ',
-    coordConfig: {
-      level: '0',
-    },
-    value: [10, 245],
-    draggable: false,
-    fixed: true,
-    symbol: defaultImg,
-    symbolSize: 60,
-  },
-  // {
-  //   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: 'BSMBPM报文解析',
-    linkValue: ' ',
-    coordConfig: { level: '3' },
-    symbolSize: 60,
-    symbol: kafkaImg,
-    draggable: false,
-    value: [40, 245],
-  },
-  {
-    name: 'BSMBPM报文解析',
-    linkTargetName: 'BSM',
-    linkValue: ' ',
-    coordConfig: { level: '3' },
-    symbolSize: 60,
-    symbol: pullImgError,
-    draggable: false,
-    value: [70, 245],
-  },
-  // {
-  //   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: 60,
-    symbol: defaultImg,
-    draggable: false,
-    value: [100, 245],
-  },
-  {
-    name: 'BPM',
-    linkTargetName: '推送节点',
-    linkValue: ' ',
-    coordConfig: { level: '4' },
-    symbolSize: 60,
-    symbol: defaultImg,
-    draggable: false,
-    value: [100, 200],
-  },
-  {
-    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],
-  },
+
+// 表格
+const tableColumns = ref([])
+const tableData = ref<any[]>([])
+const tableBtnGroup = [
   {
-    name: 'ES',
-    linkTargetName: 'ES',
-    linkValue: ' ',
-    coordConfig: { level: '6' },
-    symbolSize: 30,
-    symbol: defaultImg,
-    draggable: false,
-    value: [240, 100],
+    name: '查看',
+    className: 'editBtn',
+    param: 1,
   },
   {
-    name: ' Kafka',
-    linkTargetName: '存储服务',
-    linkValue: ' ',
-    coordConfig: { level: '6' },
-    symbolSize: 30,
-    symbol: defaultImg,
-    draggable: false,
-    value: [240, 70],
+    name: '编辑',
+    className: 'editBtn',
+    param: 2,
   },
   {
-    name: '存储服务',
-    linkTargetName: 'Mysql',
-    linkValue: ' ',
-    coordConfig: { level: '7' },
-    symbolSize: 60,
-    symbol: saveImg,
-    draggable: false,
-    value: [280, 160],
+    name: '停止',
+    className: 'editBtn',
+    param: 3,
   },
   {
-    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',
+    name: '删除',
+    className: 'delBtn',
+    param: 4,
   },
-  series: [
-    {
-      type: 'graph',
-      coordinateSystem: 'cartesian2d',
-      //圆形上面的文字
-      label: {
-        position: 'bottom',
-        show: true,
-        fontSize: 12,
-      },
-      itemStyle: {
-        color: '#409eff',
+]
+const btnClickHandler = (rowIndex: number, row: Object, param: number) => {}
 
-        shadowBlur: 0,
-      },
-      lineStyle: {
-        width: 0,
-        shadowColor: 'none',
-        color: '#ff0000',
-      },
-      data: <any[]>[],
-      links: <any[]>[],
-    },
-  ],
-})
-const getCoordDataList = (): any[] => {
-  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.forEach(item => {
-  datas.value.push({
-    source: item.name,
-    value: item.linkValue,
-    target: item.linkTargetName,
-  })
-})
-const resizeHandler = () => {
-  myChart.value?.resize()
+// 新增/删除-弹窗
+const serviceDialogVisible = ref(false) // 弹窗开关
+const type = ref('del') // 弹窗类型是否删除
+const serviceDialogWidth = computed(() =>
+  type.value === 'del' ? '600px' : '878px'
+)
+const delName = ref('') // 删除对象名
+const msgTitle = '新增服务管理' // 新增弹窗-标题
+const addServiceHandler = () => {
+  type.value = 'add'
+  serviceDialogVisible.value = true
 }
-onMounted(() => {
-  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);
-// });
+const delCancelHandler = () => {}
 
-//新增
-const addJournalForm = () => {
-  msgTitle.value = '查看日志'
-  flag.value = true
-}
-//取消
-const resetForm = () => {
-  flag.value = false
+// 新增服务-表单
+const serviceForm = reactive({
+  serviceName: '',
+  serviceOutputID: null,
+  serviceType: null,
+  dataSourceID: null,
+  sourceObjectName: '',
+  lifeCycleCol: '',
+  isAsynchronous: 1,
+  threads: null,
+  datatype: null,
+  computingMethod: '',
+  validationExpression: '',
+  startTime: null,
+  stopTime: null,
+  retryCount: null,
+  loopCount: null,
+  frequencyCount: null,
+  frequencyUnit: null,
+  serviceDescribe: '',
+  logDataSourceID: null,
+  logList: '',
+})
+const serviceFormRules = {
+  serviceName: [
+    {
+      required: true,
+      message: '请输入服务名称',
+      trigger: ['change', 'blur'],
+    },
+  ],
 }
+const dataSourceList = ref<DataSource[]>([])
 
-const getSearchData = (text: string) => {
-  console.log(text)
+// 新增数据来源-弹窗
+const dataSourceDialogVisible = ref(false)
+const addDataSourceHandler = () => {}
+// 新增数据来源-表单
+</script>
+<style lang="scss" scoped>
+.app-containers {
+  height: calc(100vh - 180px);
 }
-const clearSearchData = () => {}
 
-type TableColumn = {
-  label: string
-  key: string
+.icon {
+  width: 14px;
+  height: 14px;
+  background: #2d67e3;
+  border-radius: 2px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+  position: relative;
+  top: -2px;
 }
-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 = []
+.status0,
+.status2 {
+  margin-right: 28px;
+  position: relative;
+  top: 5px;
 }
-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.value.push(...listValues)
-      loading.value = false
-    } else {
-      throw new Error('获取数据失败')
-    }
-  } catch (error: any) {
-    page--
-    loading.value = false
-    ElMessage.error(error.message)
+.status1 {
+  position: relative;
+  top: 5px;
+  .icon {
+    background-color: #afb4bf;
   }
 }
-const load = () => {
-  if (loadDisabled.value) {
-    return
+.status2 {
+  .icon {
+    background-color: #eb2f3b;
   }
-  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)
+.service-form:deep {
+  display: flex;
+  flex-wrap: wrap;
+  > .el-row {
+    flex-wrap: wrap;
+    > .el-col .el-form-item {
+      margin-bottom: 20px;
+      .el-form-item__label {
+        padding-right: 16px;
       }
-    })
-  } else {
-    progressList.value.push(row)
+      .el-input,
+      .el-select {
+        width: 100%;
+      }
+      .el-input__inner,
+      .el-textarea__inner {
+        padding-left: 8px;
+      }
+      .el-date-editor {
+        .el-input__prefix,
+        .el-input__suffix {
+          right: 5px;
+          left: unset;
+          font-size: 16px;
+          color: #101116;
+          .el-input__suffix-inner {
+            font-size: 16px;
+          }
+        }
+        &.value-not-null:hover .el-input__prefix {
+          display: none;
+        }
+      }
+    }
   }
-}
-</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;
+  label,
+  span,
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: Helvetica, Microsoft YaHei;
+    font-size: 14px;
+    font-weight: 400;
   }
-  .integration__cont {
-    background: #ffffff;
-    border-radius: 4px;
-    padding: 35px;
-    width: 100%;
-    height: calc(100vh - 177px);
+  label {
+    color: #303133;
   }
-  .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;
+  input {
+    color: #101116;
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none !important;
+      &[type='number'] {
+        -moz-appearance: textfield !important;
+      }
     }
-    .log1 {
-      width: 14px;
-      height: 14px;
-      background: #e32d2d;
-      border-radius: 2px;
-      margin-right: 12px;
+    .el-radio {
+      font-weight: 400;
     }
   }
 }
-.interfaceLog_content {
-  margin-top: 24px;
-  // height: 452px;
-  // overflow: hidden;
-}
 </style>

src/views/systemSettings/serviceManagement/serviceMonitorEdit.vue → src/views/systemSettings/serviceManagement/serviceEdit.vue

@@ -13,8 +13,8 @@
             <div class="manageTitle">当前服务ID：101</div>
             <div class="typecond">{{ typeK }}</div>
           </div>
-        </template></Minheader
-      >
+        </template>
+      </Minheader>
       <div class="diacont">
         <el-form :model="tableForm" class="w100 fw">
           <div class="outersurface pd30">
@@ -188,8 +188,8 @@
           <div class="status flex-wrap">
             <div class="manageTitle">统一接收</div>
           </div>
-        </template></Minheader
-      >
+        </template>
+      </Minheader>
       <div class="diacont">
         <el-form :model="tableFormer" class="w100 fw">
           <div class="outersurface50 pd30">
@@ -230,8 +230,8 @@
               <div class="status flex-wrap">
                 <div class="manageTitle">输出</div>
               </div>
-            </template></Minheader
-          >
+            </template>
+          </Minheader>
           <div class="app-containers">
             <DataTable
               :tableHeader="state.list"
@@ -248,8 +248,8 @@
               <div class="status flex-wrap">
                 <div class="manageTitle">日志记录</div>
               </div>
-            </template></Minheader
-          >
+            </template>
+          </Minheader>
           <div class="diacont">
             <el-form :model="recordForme" class="w100 fw">
               <div class="outersurface50 pd30">
@@ -344,7 +344,7 @@
               <el-button
                 size="mini"
                 style="margin-left: 16px"
-                @click="handleOk"
+                @click="logQueryHandler"
                 type="primary"
                 >查询</el-button
               >
@@ -426,8 +426,8 @@
             <div class="status flex-wrap">
               <div class="manageTitle">插槽列表</div>
             </div>
-          </template></Minheader
-        >
+          </template>
+        </Minheader>
       </div>
       <div style="padding: 0 24px 24px 24px" class="dialog-content">
         <DataTable
@@ -519,299 +519,300 @@
 </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";
-const tableOptionser = ref<Array>([]); //下拉
-const typeK = ref<String>("进行中"); //状态
-const flag = ref<Boolean>(false); //弹窗开关
-const flaglod = ref<Boolean>(false); //插槽弹窗开关
-const loading = ref<Boolean>(false); //loding
-const type = ref<String>(""); //判断是否删除
-const typelod = ref<String>(""); //判断是否删除
-const input = ref<String>(""); //输入搜索
-const msgTitle = ref<String>("查看日志"); //弹窗标题
-const msgTitlelod = ref<String>("插槽编辑"); //弹窗标题
-const timeEnd = ref<String>(""); //日志结束时间
-const timeStart = ref<String>(""); //日志开始时间
-const flagoutput = ref<Boolean>(false); //输出开关
-const typeoutput = ref<String>(""); //判断输出弹窗是否删除
-const msgTitleoutput = ref<String>(""); //输出弹窗标题
-const flagso = ref<Boolean>(false); //输出开关
-const typeso = ref<String>(""); //判断输出弹窗是否删除
-const msgTitleso = ref<String>(""); //输出弹窗标题
+import Minheader from '@/components/minheader/index.vue'
+import DataTable from '@/components/tableTemp/index.vue'
+import Dialog from '@/components/dialog/index.vue'
+const tableOptionser = ref<any[]>([]) //下拉
+const typeK = ref('进行中') //状态
+const flag = ref(false) //弹窗开关
+const flaglod = ref(false) //插槽弹窗开关
+const loading = ref(false) //loding
+const type = ref('') //判断是否删除
+const typelod = ref('') //判断是否删除
+const input = ref('') //输入搜索
+const msgTitle = ref('查看日志') //弹窗标题
+const msgTitlelod = ref('插槽编辑') //弹窗标题
+const timeEnd = ref('') //日志结束时间
+const timeStart = ref('') //日志开始时间
+const flagoutput = ref(false) //输出开关
+const typeoutput = ref('') //判断输出弹窗是否删除
+const msgTitleoutput = ref('') //输出弹窗标题
+const flagso = ref(false) //输出开关
+const typeso = ref('') //判断输出弹窗是否删除
+const msgTitleso = ref('') //输出弹窗标题
 const tableData = ref([
   {
-    name: "测试",
-    china: "测试",
-    englin: "测试",
-    two: "测试",
+    name: '测试',
+    china: '测试',
+    englin: '测试',
+    two: '测试',
   },
   {
-    name: "测试",
-    china: "测试",
-    englin: "测试",
-    two: "测试",
+    name: '测试',
+    china: '测试',
+    englin: '测试',
+    two: '测试',
   },
   {
-    name: "测试",
-    china: "测试",
-    englin: "测试",
-    two: "测试",
+    name: '测试',
+    china: '测试',
+    englin: '测试',
+    two: '测试',
   },
-]);
+])
 const tableDatas = ref([
   {
-    name: "测试",
-    china: "测试",
-    englin: "测试",
-    two: "测试",
+    name: '测试',
+    china: '测试',
+    englin: '测试',
+    two: '测试',
   },
   {
-    name: "测试",
-    china: "测试",
-    englin: "测试",
-    two: "测试",
+    name: '测试',
+    china: '测试',
+    englin: '测试',
+    two: '测试',
   },
   {
-    name: "测试",
-    china: "测试",
-    englin: "测试",
-    two: "测试",
+    name: '测试',
+    china: '测试',
+    englin: '测试',
+    two: '测试',
   },
-]);
+])
 //表头
 const state = reactive({
   list: [
-    { label: "输出数据源", key: "name" },
-    { label: "详细位置", key: "china" },
-    { label: "数据结构", key: "englin" },
-    { label: "输出条件", key: "two" },
+    { label: '输出数据源', key: 'name' },
+    { label: '详细位置', key: 'china' },
+    { label: '数据结构', key: 'englin' },
+    { label: '输出条件', key: 'two' },
   ],
   listLoading: true,
-});
+})
 //表头
 const states = reactive({
   list: [
-    { label: "插槽名称", key: "name" },
-    { label: "插槽地址", key: "china" },
+    { label: '插槽名称', key: 'name' },
+    { label: '插槽地址', key: 'china' },
   ],
   listLoading: true,
-});
+})
 const tableBtnGroup = ref([
   {
-    name: "编辑",
-    className: "editBtn",
+    name: '编辑',
+    className: 'editBtn',
     param: 2,
   },
   {
-    name: "删除",
-    className: "delBtn",
+    name: '删除',
+    className: 'delBtn',
     param: 3,
   },
-]);
+])
 const tableForm = reactive({
-  name: "",
-  china: "",
-  englin: "",
-  two: "",
-  time: "",
-  time1: "",
-  three: "",
-  text: "",
-}); //服务id
+  name: '',
+  china: '',
+  englin: '',
+  two: '',
+  time: '',
+  time1: '',
+  three: '',
+  text: '',
+}) //服务id
 const tableForms = reactive({
-  name: "",
-  china: "",
-  englin: "",
-  two: "",
-  time: "",
-  time1: "",
-  three: "",
-  text: "",
-}); //主动采集配置
+  name: '',
+  china: '',
+  englin: '',
+  two: '',
+  time: '',
+  time1: '',
+  three: '',
+  text: '',
+}) //主动采集配置
 const tableFormer = reactive({
-  name: "",
-  china: "",
-  englin: "",
-  two: "",
-  time: "",
-  time1: "",
-  three: "",
-  text: "",
-}); //统一接收
+  name: '',
+  china: '',
+  englin: '',
+  two: '',
+  time: '',
+  time1: '',
+  three: '',
+  text: '',
+}) //统一接收
 const recordForme = reactive({
-  name: "",
-  china: "",
-  englin: "",
-  two: "",
-  time: "",
-  time1: "",
-  three: "",
-  text: "",
-}); //日志记录
+  name: '',
+  china: '',
+  englin: '',
+  two: '',
+  time: '',
+  time1: '',
+  three: '',
+  text: '',
+}) //日志记录
 const outputForm = reactive({
-  name: "",
-  china: "",
-  englin: "",
-  two: "",
-  time: "",
-  time1: "",
-  three: "",
-  text: "",
-}); //输出弹窗内容
+  name: '',
+  china: '',
+  englin: '',
+  two: '',
+  time: '',
+  time1: '',
+  three: '',
+  text: '',
+}) //输出弹窗内容
 const soltForm = reactive({
-  name: "",
-  china: "",
-  englin: "",
-  two: "",
-  time: "",
-  time1: "",
-  three: "",
-  text: "",
-}); //插槽弹窗内容
+  name: '',
+  china: '',
+  englin: '',
+  two: '',
+  time: '',
+  time1: '',
+  three: '',
+  text: '',
+}) //插槽弹窗内容
 //编辑-删除
 const btnClick = (row, index, param) => {
   if (param === 2) {
-    msgTitle.value = "编辑";
-    flag.value = true;
-    type.value = "";
-    tableForm.name = index.name;
-    tableForm.china = index.china;
-    tableForm.englin = index.englin;
-    tableForm.two = index.two;
-    tableForm.three = index.three;
-    tableForm.text = index.text;
+    msgTitle.value = '编辑'
+    flag.value = true
+    type.value = ''
+    tableForm.name = index.name
+    tableForm.china = index.china
+    tableForm.englin = index.englin
+    tableForm.two = index.two
+    tableForm.three = index.three
+    tableForm.text = index.text
   } else if (param === 3) {
-    msgTitle.value = "删除";
-    flag.value = true;
-    type.value = "del";
+    msgTitle.value = '删除'
+    flag.value = true
+    type.value = 'del'
   } else if (param === 4) {
   }
-};
+}
 //查看日志
 const addJournalForm = () => {
-  flag.value = true;
-};
+  flag.value = true
+}
 //取消
 const resetForm = () => {
-  flag.value = false;
-};
+  flag.value = false
+}
 //删除
 const delRest = () => {
-  flag.value = false;
-};
+  flag.value = false
+}
 //开启插槽
 const addslotForm = () => {
-  flaglod.value = true;
-};
+  flaglod.value = true
+}
 //取消插槽
 const resetlodForm = () => {
-  flaglod.value = false;
-};
+  flaglod.value = false
+}
 //删除插槽
 const dellodRest = () => {
-  flaglod.value = false;
-};
+  flaglod.value = false
+}
 //时间限制
-const timeStartChange = (val) => {
+const timeStartChange = val => {
   if (val >= timeEnd) {
-    timeStart.value = "";
+    timeStart.value = ''
   }
-};
+}
 //时间限制
-const timeEndChange = (val) => {
+const timeEndChange = val => {
   if (val <= timeEnd) {
-    timeEnd.value = "";
+    timeEnd.value = ''
   }
-};
+}
 //复制
-const logCopy = (index) => {
-  const ele = document.getElementById("logId" + index);
-  const val = ele.innerText;
+const logCopy = index => {
+  const ele = document.getElementById('logId' + index)
+  const val = ele!.innerText
   try {
-    const input = document.createElement("input");
+    const input = document.createElement('input')
     //将input的值设置为需要复制的内容
-    input.value = val;
+    input.value = val
     //添加input标签
-    document.body.appendChild(input);
+    document.body.appendChild(input)
     //选中input标签
-    input.select();
+    input.select()
     //执行复制
-    document.execCommand("copy");
+    document.execCommand('copy')
     //移除input标签
-    document.body.removeChild(input);
+    document.body.removeChild(input)
     // this.$message.success("复制成功");
   } catch (e) {
     // this.$message.error("复制失败");
   }
-};
+}
 //新增输出
 const addForm = () => {
-  msgTitleoutput.value = "新增输出";
-  flagso.value = true;
-  typeoutput.value = "";
-};
+  msgTitleoutput.value = '新增输出'
+  flagso.value = true
+  typeoutput.value = ''
+}
 //输出删除
 const delRestout = () => {
-  flagoutput.value = false;
-};
+  flagoutput.value = false
+}
 //输出取消
 const resetFormot = () => {
-  flagoutput.value = false;
-};
+  flagoutput.value = false
+}
 //输出编辑-删除
 const btnClicks = (row, index, param) => {
   if (param === 2) {
-    msgTitleoutput.value = "编辑";
-    flagoutput.value = true;
-    typeoutput.value = "";
-    outputForm.name = index.name;
-    outputForm.china = index.china;
-    outputForm.englin = index.englin;
-    outputForm.two = index.two;
-    outputForm.three = index.three;
-    outputForm.text = index.text;
+    msgTitleoutput.value = '编辑'
+    flagoutput.value = true
+    typeoutput.value = ''
+    outputForm.name = index.name
+    outputForm.china = index.china
+    outputForm.englin = index.englin
+    outputForm.two = index.two
+    outputForm.three = index.three
+    outputForm.text = index.text
   } else if (param === 3) {
-    msgTitleoutput.value = "删除";
-    flagoutput.value = true;
-    typeoutput.value = "del";
+    msgTitleoutput.value = '删除'
+    flagoutput.value = true
+    typeoutput.value = 'del'
   } else if (param === 4) {
   }
-};
+}
 //新增插槽
 const addFormso = () => {
-  msgTitleso.value = "新增插槽";
-  flagso.value = true;
-  typeso.value = "";
-};
+  msgTitleso.value = '新增插槽'
+  flagso.value = true
+  typeso.value = ''
+}
 //取消插槽
 const resetsoForm = () => {
-  flagso.value = false;
-};
+  flagso.value = false
+}
 //插槽新增删除
 const delsoout = () => {
-  flagso.value = false;
-};
+  flagso.value = false
+}
 //插槽编辑-删除
 const btnClickso = (row, index, param) => {
   if (param === 2) {
-    msgTitleso.value = "编辑";
-    flagso.value = true;
-    typeso.value = "";
-    soltForm.name = index.name;
-    soltForm.china = index.china;
-    soltForm.englin = index.englin;
-    soltForm.two = index.two;
-    soltForm.three = index.three;
-    soltForm.text = index.text;
+    msgTitleso.value = '编辑'
+    flagso.value = true
+    typeso.value = ''
+    soltForm.name = index.name
+    soltForm.china = index.china
+    soltForm.englin = index.englin
+    soltForm.two = index.two
+    soltForm.three = index.three
+    soltForm.text = index.text
   } else if (param === 3) {
-    msgTitleso.value = "删除";
-    flagso.value = true;
-    typeso.value = "del";
+    msgTitleso.value = '删除'
+    flagso.value = true
+    typeso.value = 'del'
   } else if (param === 4) {
   }
-};
+}
+const logQueryHandler = () => {}
 </script>
 
 <style lang="scss" scoped>

src/views/systemSettings/serviceManagement/serviceMonitor.vue

@@ -1,207 +0,0 @@
-<template>
-  <div class="airportInfo scroll-y">
-    <div class="wrap">
-      <Minheader :is-auth="true" :is-statuser="true" @addForm="addForm">
-        <template #header>
-          <div class="status flex-wrap">
-            <div class="manageTitle">服务管理</div>
-            <div class="status0"><span class="icon"></span>启动</div>
-            <div class="status2"><span class="icon"></span>异常</div>
-            <div class="status1"><span class="icon"></span>停止</div>
-          </div>
-        </template></Minheader
-      >
-      <div class="app-containers">
-        <DataTable
-          BtnGroupWidth="300px"
-          :is-Status="true"
-          :tableHeader="state.list"
-          :tableData="tableData"
-          :tableBtnGroup="tableBtnGroup"
-          :tableProperty="{ rowKey: 'ID' }"
-          @btnClick="btnClick"
-        />
-      </div>
-      <Dialog
-        width="600px"
-        :flag="flag"
-        :type="type"
-        :msgTitle="msgTitle"
-        @delRest="delRest"
-      >
-      </Dialog>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import DataTable from "@/components/tableTemp/index.vue";
-import Minheader from "@/components/minheader/index.vue";
-import Dialog from "@/components/dialog/index.vue";
-const router = useRouter();
-const flag = ref<Boolean>(false); //弹窗开关
-const type = ref<String>(""); //判断是否删除
-const msgTitle = ref<String>("新增服务管理"); //弹窗标题
-const tableColsCopys = reactive<Object>({}); //弹窗
-const tableForm = reactive({
-  name: "",
-  china: "",
-  englin: "",
-  two: "",
-  three: "",
-  text: "",
-}); //弹窗内容
-//列表
-const tableData = ref([
-  {
-    nodeState: "运行",
-    name: "测试",
-    china: "测试",
-    englin: "测试",
-    two: "测试",
-    three: "测试",
-    text: "测试",
-    text1: "测试",
-  },
-  {
-    nodeState: "运行",
-    name: "测试",
-    china: "测试",
-    englin: "测试",
-    two: "测试",
-    three: "测试",
-    text: "测试",
-    text1: "测试",
-  },
-  {
-    nodeState: "运行",
-    name: "测试",
-    china: "测试",
-    englin: "测试",
-    two: "测试",
-    three: "测试",
-    text: "测试",
-    text1: "测试",
-  },
-]);
-//表头
-const state = reactive({
-  list: [
-    { label: "服务编号", key: "name" },
-    { label: "名称", key: "china" },
-    { label: "类型", key: "englin" },
-    { label: "是否同步", key: "two" },
-    { label: "数据类型", key: "three" },
-    { label: "取值规则", key: "text" },
-    { label: "检测规则", key: "text1" },
-  ],
-  listLoading: true,
-});
-const tableBtnGroup = ref([
-  {
-    name: "查看",
-    className: "editBtn",
-    param: 4,
-  },
-  {
-    name: "编辑",
-    className: "editBtn",
-    param: 2,
-  },
-  {
-    name: "停止",
-    className: "editBtn",
-    param: 5,
-  },
-  {
-    name: "删除",
-    className: "delBtn",
-    param: 3,
-  },
-]);
-//新增
-const addForm = () => {
-  router.push({ path: "/systemSettings/serviceMonitorEdit" });
-};
-//取消
-const resetForm = () => {
-  flag.value = false;
-  tableForm.name = "";
-  tableForm.china = "";
-  tableForm.englin = "";
-  tableForm.two = "";
-  tableForm.three = "";
-  tableForm.text = "";
-};
-//编辑
-// const editDialog = (data) => {
-//   msgTitle.value = "编辑航司信息维护";
-//   flag.value = true;
-//   type.value = "";
-//   tableForm.name = data.name;
-//   tableForm.china = data.china;
-//   tableForm.englin = data.englin;
-//   tableForm.two = data.two;
-//   tableForm.three = data.three;
-//   tableForm.text = data.text;
-// };
-//编辑-删除
-const btnClick = (row, index, param) => {
-  if (param === 2) {
-    router.push({ path: "/systemSettings/serviceMonitorEdit" });
-  } else if (param === 3) {
-    msgTitle.value = "删除服务管理";
-    flag.value = true;
-    type.value = "del";
-  } else if (param === 4) {
-    router.push({ path: "/systemSettings/serviceManagement" });
-  }
-};
-//删除
-const eleDialog = () => {
-  msgTitle.value = "删除服务管理";
-  flag.value = true;
-  type.value = "del";
-};
-//删除
-const delRest = () => {
-  flag.value = false;
-};
-</script>
-<style lang="scss" scoped>
-::v-deep .el-form-item__label {
-  width: 100px;
-}
-.app-containers {
-  height: calc(100vh - 180px);
-}
-
-.icon {
-  width: 14px;
-  height: 14px;
-  background: #2d67e3;
-  border-radius: 2px;
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 10px;
-  position: relative;
-  top: -2px;
-}
-.status0,
-.status2 {
-  margin-right: 28px;
-  position: relative;
-  top: 5px;
-}
-.status1 {
-  position: relative;
-  top: 5px;
-  .icon {
-    background-color: #afb4bf;
-  }
-}
-.status2 {
-  .icon {
-    background-color: #eb2f3b;
-  }
-}
-</style>

src/views/systemSettings/serviceManagement/serviceTopology.vue

@@ -0,0 +1,904 @@
+<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="选择开始日期时间"
+                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
+                v-model="timeEnd"
+                size="default"
+                type="datetime"
+                placeholder="选择结束日期时间"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                :clearable="false"
+                @change="timeSelectHandler"
+              />
+            </div>
+            <Search
+              :is-title="false"
+              @get-search-data="getSearchData"
+              @clear-search-data="clearSearchData"
+            />
+          </div>
+        </div>
+        <div class="interfaceLog_content">
+          <el-row :gutter="24">
+            <el-col :span="19">
+              <DataTable
+                :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 progressList"
+                    :key="index"
+                  >
+                    <div class="list">
+                      <div class="list_status"></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>
+              </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 { 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<any[]>([])
+const resizeDelay = 300
+//默认节点
+// const defaultImg = getAssetsFile("jiekou_blue.png");
+const defaultImg = 'image://' + img1
+//默认节点-错误
+const defaultImgError = 'image://' + img2
+//拉取节点
+const pullImg = 'image://' + img3
+//拉取节点-错误
+const pullImgError = 'image://' + img8
+//kafka节点
+const kafkaImg = 'image://' + img4
+//kafka节点-错误
+const kafkaImgError = getAssetsFile('kafka_red.png')
+//推送节点
+const pushImg = 'image://' + img5
+//推送节点-错误
+const pushImgError = 'image://' + getAssetsFile('push_red.png')
+//存储节点
+const saveImg = 'image://' + img6
+//存储节点-错误
+const saveImgError = getAssetsFile('save_red.png')
+//存储节点
+const mysqlImg = 'image://' + img7
+//存储节点-错误
+const mysqlImgError = getAssetsFile('mysql_red.png')
+const nodeDataList = ref([
+  {
+    name: '星盟SBH',
+    linkTargetName: 'Kafka',
+    linkValue: ' ',
+    coordConfig: {
+      level: '0',
+    },
+    value: [10, 245],
+    draggable: false,
+    fixed: true,
+    symbol: defaultImg,
+    symbolSize: 60,
+  },
+  // {
+  //   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: 'BSMBPM报文解析',
+    linkValue: ' ',
+    coordConfig: { level: '3' },
+    symbolSize: 60,
+    symbol: kafkaImg,
+    draggable: false,
+    value: [40, 245],
+  },
+  {
+    name: 'BSMBPM报文解析',
+    linkTargetName: 'BSM',
+    linkValue: ' ',
+    coordConfig: { level: '3' },
+    symbolSize: 60,
+    symbol: pullImgError,
+    draggable: false,
+    value: [70, 245],
+  },
+  // {
+  //   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: 60,
+    symbol: defaultImg,
+    draggable: false,
+    value: [100, 245],
+  },
+  {
+    name: 'BPM',
+    linkTargetName: '推送节点',
+    linkValue: ' ',
+    coordConfig: { level: '4' },
+    symbolSize: 60,
+    symbol: defaultImg,
+    draggable: false,
+    value: [100, 200],
+  },
+  {
+    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: {
+        position: 'bottom',
+        show: true,
+        fontSize: 12,
+      },
+      itemStyle: {
+        color: '#409eff',
+
+        shadowBlur: 0,
+      },
+      lineStyle: {
+        width: 0,
+        shadowColor: 'none',
+        color: '#ff0000',
+      },
+      data: <any[]>[],
+      links: <any[]>[],
+    },
+  ],
+})
+const getCoordDataList = (): any[] => {
+  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.forEach(item => {
+  datas.value.push({
+    source: item.name,
+    value: item.linkValue,
+    target: item.linkTargetName,
+  })
+})
+const resizeHandler = () => {
+  myChart.value?.resize()
+}
+onMounted(() => {
+  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);
+// });
+
+//新增
+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.value.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 {
+  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>

src/views/userManagement/account/index.vue

@@ -11,7 +11,7 @@
       <div class="box account-tree">
         <el-tree :data="data" :props="defaultProps" default-expand-all @node-click="handleNodeClick" />
       </div>
-      <Table class="account-table" BtnGroupWidth="250px" :tableHeader="tableHeader" @btnClick="btnClick" :tableBtnGroup="tableBtnGroup" :tableData="tableData" />
+      <Table class="account-table" btnGroupWidth="250px" :tableHeader="tableHeader" @btnClick="btnClick" :tableBtnGroup="tableBtnGroup" :tableData="tableData" />
     </div>
     <!--删除弹框-->
     <Dialog :flag="flag" msgTitle="删除账号" type="del" :delName="title" @delRest="delRest" @delRemove="remove" />

typings/common.d.ts

@@ -53,3 +53,21 @@ interface SettingTy {
   mainNeedAnimation: boolean
   viteBasePath: string
 }
+
+interface CommonTableColumn {
+  columnDescribe: string
+  columnLabel: string
+  columnName: string
+  dataType: string
+  listqueryTemplateID: number
+  needCount: number
+  needFilters: number
+  needGroup: number
+  needSearch: number | null
+  needShow: number
+  needSort: number
+  orderNumber: number | null
+  queryTemplateColumnSetID: number
+  queryTemplateID: number
+  [propName: string]: any
+}