合并

components.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Search: typeof import('./src/components/search/index.vue')['default']
+    Steps: typeof import('./src/components/steps/index.vue')['default']
     Table: typeof import('./src/components/table/index.vue')['default']
     Table2: typeof import('./src/components/table2/index.vue')['default']
     TableTemp: typeof import('./src/components/tableTemp/index.vue')['default']

src/components/minheader/index.vue

@@ -20,6 +20,24 @@
         <Search @clear="clear" @search="search" />
         <!-- <el-button type="danger" size="default" class="br L12">搜索</el-button> -->
       </template>
+      <template v-if="isSlot">
+        <el-button
+          type="danger"
+          size="default"
+          class="br L12"
+          @click="addslot()"
+          >1个插槽</el-button
+        >
+      </template>
+      <template v-if="isJournal">
+        <el-button
+          size="default"
+          plain
+          class="btn-white P12"
+          @click="addJournal()"
+          >查看日志</el-button
+        >
+      </template>
       <template v-if="isMeasure">
         <el-button size="default" plain class="btn-white br" @click="addBbut()"
           >测试</el-button
@@ -81,10 +99,25 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  //是否显示日志
+  isJournal: {
+    type: Boolean,
+    default: false,
+  },
+  //是否显示插槽
+  isSlot: {
+    type: Boolean,
+    default: false,
+  },
 });
 //搜索内容
 const input = ref("");
-const emits = defineEmits(["addForm", "preserForm"]);
+const emits = defineEmits([
+  "addForm",
+  "preserForm",
+  "addJournalForm",
+  "addslotForm",
+]);
 const addBbut = () => {
   emits("addForm");
 };
@@ -98,6 +131,14 @@ const clear = () => {
 const preserBtn = () => {
   emits("preserForm");
 };
+//日志
+const addJournal = () => {
+  emits("addJournalForm");
+};
+//插槽
+const addslot = () => {
+  emits("addslotForm");
+};
 </script>
 <style lang="scss" scoped>
 .data-table-btn {

src/components/steps/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="steps flex">
+    <div v-for="(item,index) in datas" :key="index" class="node">
+      <div v-if="item.flag" class="node-status-success">
+        <span class="icon"></span>
+      </div>
+      <div v-else class="node-status-default"></div>
+      <div v-if="item.flag && datas.length != index+1" class="node-status-success-line"></div>
+      <div v-if="!item.flag && datas.length != index+1" class="node-status-default-line"></div>
+      <div :style="{width:item.labelWidth ? item.labelWidth + 'px' : 80 + 'px',transform:`translateX(-${Math.floor(item.labelWidth ? item.labelWidth / 3 : 80 / 3)+3}px)`}" class="node-cap">
+        <div class="node-name">{{item.name}}</div>
+        <div class="node-info">
+          <div class="node-info-list" v-for="(p,i) in item.children" :key="i">{{p}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  datas: {
+    type: Array,
+    default: () => [],
+  },
+});
+const { datas } = props;
+</script>
+
+<style lang="scss" scoped>
+.steps {
+  padding: 0 13px;
+  .node {
+    position: relative;
+    width: 100%;
+    &:last-child {
+      width: 2%;
+    }
+    &-name {
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #101116;
+    }
+    &-cap {
+      text-align: center;
+      margin-top: 15px;
+      .node-info-list {
+        font-size: 12px;
+        font-family: Helvetica;
+        font-weight: 400;
+        color: #101116;
+        margin-top: 3px;
+      }
+    }
+  }
+  .node-status-success {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    background: #ffffff;
+    border: 2px solid #d5327b;
+    border-radius: 50%;
+    z-index: 2;
+    .icon {
+      width: 14px;
+      height: 14px;
+      background: #d5327b;
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -7px;
+      margin-left: -7px;
+    }
+  }
+  .node-status-default {
+    width: 24px;
+    height: 24px;
+    background: #ffffff;
+    border: 2px solid #b7b1b4;
+    border-radius: 50%;
+    z-index: 2;
+    position: relative;
+  }
+  .node-status-success-line {
+    height: 6px;
+    background: #d5327b;
+    position: absolute;
+    width: 100%;
+    top: 9px;
+    left: 0;
+    z-index: 1;
+  }
+  .node-status-default-line {
+    height: 6px;
+    background: #b7b1b4;
+    position: absolute;
+    width: 100%;
+    top: 9px;
+    left: 0;
+    z-index: 1;
+  }
+}
+</style>

src/components/tableTemp/index.vue

@@ -1,21 +1,75 @@
-import { default } from '../../../../CABaggageData2.0/src/components/BackButton/index.vue';
 <template>
   <el-table
     v-el-table-infinite-scroll="load"
-    :row-key="props.tableProperty.rowKey ? props.tableProperty.rowKey : tablePropertyDefault.rowKey"
+    :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"
+    :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"
   >
+    <el-table-column v-if="isStatus" width="55">
+      <template #default="scope">
+        <div class="tableStatus">
+          <div
+            v-if="props.tableData[scope.$index].nodeState == '运行'"
+            class="status0"
+          >
+            <span class="icon"></span>
+          </div>
+          <div
+            v-else-if="props.tableData[scope.$index].nodeState == '停止'"
+            class="status1"
+          >
+            <span class="icon"></span>
+          </div>
+          <div v-else class="status2"><span class="icon"></span></div>
+        </div>
+      </template>
+    </el-table-column>
     <!-- label-class-name  可通过 tableHeader中传入class来修改某一个或某一类表头的样式-->
     <el-table-column
       class="infinite-list-item"
@@ -23,16 +77,27 @@ import { default } from '../../../../CABaggageData2.0/src/components/BackButton/
       :key="index"
       :label="items.label"
       :prop="items.key"
-      :width="props.tableColumnProperty.width"
-      :sortable="items.sortable ? items.sortable : props.tableColumnProperty.sortable"
+      :width="items.width?items.width:props.tableColumnProperty.width"
+      :sortable="
+        items.sortable ? items.sortable : 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"
+      :header-align="
+        items.headerAlign
+          ? items.headerAlign
+          : props.tableColumnProperty.headerAlign
+      "
       :label-class-name="items.lableClass ? items.lableClass : ''"
+      :class-name="items.columnClassName"
     >
       <template #default="scope">
         <!-- 枚举值则为 items.key+'-enum' -->
-        {{ scope.row[items.key+'-enum'] ? scope.row[items.key+'-enum']:scope.row[items.key]}}
+        {{
+          scope.row[items.key + "-enum"]
+            ? scope.row[items.key + "-enum"]
+            : scope.row[items.key]
+        }}
       </template>
     </el-table-column>
     <el-table-column
@@ -76,7 +141,11 @@ const props = defineProps({
   //表头参数数组
   tableHeader: {
     type: Array,
-    default: [],
+    default: [
+    // { label: "序号", key: "ID", sortable: true ,width:"50px"},
+    // { label: "姓名", key: "NAME" },
+    // { label: "成绩", key: "score", sortable: true, lableClass: "scoreColumn",columnClassName:"columnClassName" },
+    ],
   },
   //表格参数
   tableProperty: {
@@ -101,7 +170,7 @@ const props = defineProps({
       width: "",
       fixed: "",
       sortable: false,
-      showOverflowTooltip: false,
+      showOverflowTooltip: true,
       align: "center",
       headerAlign: "",
     },
@@ -123,14 +192,19 @@ const props = defineProps({
     default: [],
   },
   //操作栏宽度
-  BtnGroupWidth:{
-    type:String,
-    default:""
-  }
+  BtnGroupWidth: {
+    type: String,
+    default: "",
+  },
+  //自定义表头
+  isStatus: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 //向父组件传参 btnClick：点击按钮后    load  触发下拉加载   cellClass 修改某一行class的触发条件
-const emit = defineEmits(["btnClick", "load","cellClass"]);
+const emit = defineEmits(["btnClick", "load", "cellClass"]);
 
 //按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
 const handleClick = (index: number, row: Object, param: number) => {
@@ -156,9 +230,9 @@ const tableRowClassName = (row: Object, rowIndex: number) => {
 };
 
 //给某一格加class
-const cellClass=ref("")
+const cellClass = ref("");
 const cellClassName = (row: Object) => {
-  emit("cellClass",row)
+  emit("cellClass", row);
   return cellClass.value;
 };
 //滚动分页加载
@@ -167,9 +241,8 @@ const load = () => {
 };
 
 defineExpose({
-  cellClass
-})
-
+  cellClass,
+});
 </script>
 
 <style scoped lang="scss">
@@ -222,7 +295,41 @@ defineExpose({
   color: #ffffff;
   border: none;
 }
-::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
-  background-color: #F0F3F7;;
+::v-deep.el-table--striped
+  .el-table__body
+  tr.el-table__row--striped
+  td.el-table__cell {
+  background-color: #f0f3f7;
+}
+.tableStatus {
+  font-size: 14px;
+  .icon {
+    width: 14px;
+    height: 14px;
+    background: #2d67e3;
+    border-radius: 2px;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    top: -2px;
+  }
+  .status0 {
+    position: relative;
+    top: 5px;
+  }
+  .status1 {
+    position: relative;
+    top: 5px;
+    .icon {
+      background-color: #afb4bf;
+    }
+  }
+  .status2 {
+    position: relative;
+    top: 5px;
+    .icon {
+      background-color: #eb2f3b;
+    }
+  }
 }
 </style>

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

@@ -49,6 +49,23 @@ const HomeRoutes = {
       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",

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

@@ -1,110 +1,104 @@
-import Layout from "@/layout";
-import { h, resolveComponent } from 'vue'
+import Layout from '@/layout'
 
 const HomeRoutes = {
-  path: "/baggageManagement",
+  path: '/baggageManagement',
   component: Layout,
-  name: "baggageManagement",
-  redirect: "/baggageManagement/departure",
+  name: 'baggageManagement',
+  redirect: '/baggageManagement/departure',
   //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
-  meta: { title: "综合可视化", elSvgIcon: "Fold" },
+  meta: { title: '综合可视化', elSvgIcon: 'Fold' },
   children: [
     {
-      path: "/baggageManagement/departure",
-      name: "InternalDeparture",
-      redirect: '/baggageManagement/departure/station',
-      meta: { title: "国内出港", elSvgIcon: "Fold", icon: "table" },
-      component: {
-        render() {
-          return h(resolveComponent('router-view'))
-        }
-      },
+      path: '/baggageManagement/departure/station',
+      name: 'InternalDeparture',
+      meta: { title: '国内出港', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/baggageManagement/departure/index.vue'),
       children: [
         {
-          path: "/baggageManagement/departure/station",
-          name: "DepartureStation",
-          meta: { title: "国内出港航站视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/departure/station',
+          name: 'DepartureStation',
+          meta: { title: '国内出港航站视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/station/index.vue"),
+            import('@/views/baggageManagement/departure/station/index.vue'),
         },
         {
-          path: "/baggageManagement/departure/flight",
-          name: "DepartureFlight",
-          meta: { title: "国内出港航班视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/departure/flight',
+          name: 'DepartureFlight',
+          meta: { title: '国内出港航班视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/flight/index.vue"),
+            import('@/views/baggageManagement/departure/flight/index.vue'),
         },
         {
-          path: "/baggageManagement/departure/waybill",
-          name: "DepartureWaybill",
-          meta: { title: "国内出港运单视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/departure/waybill',
+          name: 'DepartureWaybill',
+          meta: { title: '国内出港运单视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/waybill/index.vue"),
+            import('@/views/baggageManagement/departure/waybill/index.vue'),
         },
         {
-          path: "/baggageManagement/departure/goods",
-          name: "DepartureGoods",
-          meta: { title: "国内出港行李视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/departure/goods',
+          name: 'DepartureGoods',
+          meta: { title: '国内出港货物视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/goods/index.vue"),
-        }
-      ]
+            import('@/views/baggageManagement/departure/goods/index.vue'),
+        },
+      ],
     },
     {
-      path: "/baggageManagement/departure",
-      name: "InternationalDeparture",
-      meta: { title: "国际出港", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/baggageManagement/departureC/index.vue"),
+      path: '/baggageManagement/departure',
+      name: 'DepartureC',
+      meta: { title: '国际出港', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/baggageManagement/departure/index.vue'),
     },
     {
-      path: "/baggageManagement/Arrival/station",
-      name: "InternalArrival",
-      meta: { title: "国内进港", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/baggageManagement/departure/station/index.vue"),
+      path: '/baggageManagement/Arrival/station',
+      name: 'InternalArrival',
+      meta: { title: '国内进港', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/baggageManagement/departure/index.vue'),
       children: [
         {
-          path: "/baggageManagement/arrival/station",
-          name: "ArrivalStation",
-          meta: { title: "国内进港航站视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/arrival/station',
+          name: 'ArrivalStation',
+          meta: { title: '国内进港航站视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/station/index.vue"),
+            import('@/views/baggageManagement/departure/station/index.vue'),
         },
         {
-          path: "/baggageManagement/arrival/flight",
-          name: "ArrivalFlight",
-          meta: { title: "国内进港航班视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/arrival/flight',
+          name: 'ArrivalFlight',
+          meta: { title: '国内进港航班视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/flight/index.vue"),
+            import('@/views/baggageManagement/departure/flight/index.vue'),
         },
         {
-          path: "/baggageManagement/arrival/waybill",
-          name: "ArrivalWaybill",
-          meta: { title: "国内进港运单视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/arrival/waybill',
+          name: 'ArrivalWaybill',
+          meta: { title: '国内进港运单视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/waybill/index.vue"),
+            import('@/views/baggageManagement/arrival/waybill/index.vue'),
         },
         {
-          path: "/baggageManagement/arrival/goods",
-          name: "ArrivalGoods",
-          meta: { title: "国内进港行李视图", elSvgIcon: "Fold", icon: "table" },
+          path: '/baggageManagement/arrival/goods',
+          name: 'ArrivalGoods',
+          meta: { title: '国内进港货物视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import("@/views/baggageManagement/departure/goods/index.vue"),
-        }
-      ]
+            import('@/views/baggageManagement/arrival/goods/index.vue'),
+        },
+      ],
     },
     {
-      path: "/baggageManagement/arrival",
-      name: "Arrival",
-      meta: { title: "国际进港", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/baggageManagement/arrival/index.vue"),
+      path: '/baggageManagement/arrival',
+      name: 'Arrival',
+      meta: { title: '国际进港', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/baggageManagement/arrival/index.vue'),
     },
     {
-      path: "/baggageManagement/trackMap",
-      name: "TrackMap",
-      meta: { title: "轨迹地图", elSvgIcon: "Fold", icon: "table" },
-      component: () => import("@/views/baggageManagement/trackMap/index.vue"),
+      path: '/baggageManagement/trackMap',
+      name: 'TrackMap',
+      meta: { title: '轨迹地图', elSvgIcon: 'Fold', icon: 'table' },
+      component: () => import('@/views/baggageManagement/trackMap/index.vue'),
     },
   ],
-};
+}
 
-export default [HomeRoutes];
+export default [HomeRoutes]

src/styles/index.scss

@@ -1,8 +1,8 @@
-@import "./variables.scss";
-@import "./transition.scss";
-@import "./scss-suger.scss";
-@import "./reset-style.scss";
-@import "./elemenet-style-overflow.scss";
+@import './variables.scss';
+@import './transition.scss';
+@import './scss-suger.scss';
+@import './reset-style.scss';
+@import './elemenet-style-overflow.scss';
 
 //scroll
 @mixin main-show-wh() {
@@ -18,6 +18,7 @@
 .scroll-y {
   @include main-show-wh();
   overflow-y: auto;
+  overflow-x: hidden;
 }
 .scroll-x {
   @include main-show-wh();
@@ -93,7 +94,7 @@
       background: #eb2f3b;
       border-radius: 50%;
       margin-right: 15px;
-      background: url("@/assets/status/ic_close_hint.png") no-repeat;
+      background: url('@/assets/status/ic_close_hint.png') no-repeat;
       background-size: 100% 100%;
       display: inline-block;
       position: relative;
@@ -132,7 +133,10 @@
   display: flex;
   justify-content: space-between;
 }
-
+.flex-act {
+  display: flex;
+  align-items: center;
+}
 .flex-end {
   display: flex;
   justify-content: flex-end;
@@ -150,9 +154,18 @@
 .L12 {
   margin-left: 12px;
 }
+.P12 {
+  padding: 0px 12px 0 12px;
+}
 .wrap {
   height: 100%;
 }
 .app-containers {
   height: calc(100vh - 180px);
 }
+.r12 {
+  margin-right: 12px;
+}
+.r16 {
+  margin-right: 16px;
+}

src/utils/auth.ts

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

src/utils/validate.ts

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

src/views/baggageManagement/arrival/goods/index.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="station">
+    <div class="station-head">
+      <div class="station-head-title">货物基本信息</div>
+      <div class="station-head-content flex-wrap">
+        <div class="station-head-content-list" v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
+      </div>
+    </div>
+    <div class="station-status flex">
+      <div class="station-status-info flex-wrap">
+        <div class="manageTitle">货物跟踪信息</div>
+        <div class="status">正常</div>
+      </div>
+      <div class="station-status-search">
+        <Search @clear="clear" @search="search" />
+      </div>
+    </div>
+    <div class="station-list flex-wrap">
+      <div class="station-list-left">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas" />
+      </div>
+      <div class="station-list-right">
+        <div class="title flex-wrap">
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas1" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table :tableHeader="tableHeader" :tableData="tableData" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Search from "@/components/search/index.vue";
+import Steps from "@/components/steps/index.vue";
+import Table from "@/components/tableTemp/index.vue";
+import { ElMessage } from "element-plus";
+const dataInfo = [
+  {
+    id: 1,
+    name: "货物编码",
+    value: "56888829",
+  },
+  {
+    id: 2,
+    name: "运单",
+    value: "FA56888829",
+  },
+];
+const datas = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 5,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 6,
+    name: "安检",
+    flag: false,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 7,
+    name: "安检安检",
+    flag: false,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const datas1 = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "安检",
+    flag: false,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const tableHeader = [
+  { label: "航班号", key: "fightNo" },
+  { label: "集装器编号", key: "containerNo" },
+  { label: "货物编码", key: "goodsNo" },
+  { label: "拉下", key: "dwon1" },
+  { label: "退运", key: "return" },
+  { label: "收货核单", key: "receipt", lableClass: "scoreColumn" },
+  { label: "安检", key: "securityCheck" },
+  { label: "理货", key: "tally" },
+  { label: "拉下", key: "dwon2" },
+  { label: "待运区", key: "waitingArea" },
+  { label: "货站交接", key: "goodSstation1" },
+  { label: "机下交接", key: "offBoard1" },
+  { label: "装机", key: "installEquipment" },
+  { label: "卸机", key: "unloading", lableClass: "scoreColumn" },
+  { label: "机下交接", key: "offBoard2" },
+  { label: "货站交接", key: "goodSstation2" },
+  { label: "提取", key: "extract" },
+];
+const tableData = [
+  {
+    id: 1,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "66",
+    securityCheck: "77",
+    tally: "88",
+    dwon2: "99",
+    waitingArea: "100",
+    goodSstation1: "101",
+    offBoard1: "102",
+    installEquipment: "103",
+    unloading: "104",
+    offBoard2: "105",
+    goodSstation2: "106",
+    extract: "107",
+  },
+  {
+    id: 2,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "66",
+    securityCheck: "77",
+    tally: "88",
+    dwon2: "99",
+    waitingArea: "100",
+    goodSstation1: "101",
+    offBoard1: "102",
+    installEquipment: "103",
+    unloading: "104",
+    offBoard2: "105",
+    goodSstation2: "106",
+    extract: "107",
+  },
+  {
+    id: 3,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "66",
+    securityCheck: "77",
+    tally: "88",
+    dwon2: "99",
+    waitingArea: "100",
+    goodSstation1: "101",
+    offBoard1: "102",
+    installEquipment: "103",
+    unloading: "104",
+    offBoard2: "105",
+    goodSstation2: "106",
+    extract: "107",
+  },
+];
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
+</script>
+
+<style lang="scss" scoped>
+.station {
+  &-head {
+    height: 144px;
+    background: #410425;
+    padding: 24px 30px;
+    color: #ffffff;
+    &-title {
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      margin-bottom: 40px;
+    }
+    &-content {
+      &-list {
+        margin-right: 100px;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  &-status {
+    margin: 24px 0;
+    line-height: 32px;
+    .status {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #519f6b;
+    }
+  }
+  &-list {
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .title {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #101116;
+      margin-bottom: 28px;
+      &-list {
+        margin-right: 50px;
+      }
+    }
+    &-left {
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+      width: 1090px;
+      margin-right: 8px;
+    }
+    &-right {
+      flex: 1;
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+    }
+  }
+  :deep &-table {
+    margin-top: 16px;
+    .scoreColumn {
+      background: #eef3d6;
+    }
+  }
+}
+</style>

src/views/baggageManagement/arrival/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div></div>
+  <div>
+    <router-view />
+  </div>
 </template>
 <script lang="ts" setup></script>
 <style lang="scss" scoped></style>

src/views/baggageManagement/arrival/waybill/index.vue

@@ -0,0 +1,324 @@
+<template>
+  <div class="station scroll-y">
+    <div class="station-head">
+      <div class="station-head-title">运单基本信息</div>
+      <div class="station-head-content flex">
+        <div v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
+      </div>
+    </div>
+    <div class="station-status flex">
+      <div class="station-status-info flex-wrap">
+        <div class="manageTitle">运单跟踪信息</div>
+        <div class="status">正常</div>
+      </div>
+      <div class="station-status-search">
+        <Search @clear="clear" @search="search" />
+      </div>
+    </div>
+    <div class="station-list flex-wrap">
+      <div class="station-list-left">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas1" />
+      </div>
+      <div class="station-list-right">
+        <div class="title flex-wrap">
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas" />
+      </div>
+    </div>
+    <div class="station-list flex-wrap">
+      <div class="station-list-left">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas1" />
+      </div>
+      <div class="station-list-right">
+        <div class="title flex-wrap">
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table height="calc(100vh - 800px)" :tableHeader="tableHeader" :tableData="tableData" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Search from "@/components/search/index.vue";
+import Steps from "@/components/steps/index.vue";
+import Table from "@/components/tableTemp/index.vue";
+import { ElMessage } from "element-plus";
+const dataInfo = [
+  {
+    id: 1,
+    name: "运单",
+    value: "FA56888829",
+  },
+  {
+    id: 2,
+    name: "货代公司",
+    value: "深圳市联运通货有限公司",
+  },
+  {
+    id: 3,
+    name: "品名",
+    value: "电路板、手机外壳",
+  },
+  {
+    id: 4,
+    name: "特货信息",
+    value: "特",
+  },
+  {
+    id: 5,
+    name: "始发机场",
+    value: "SZX",
+  },
+  {
+    id: 6,
+    name: "目的机场",
+    value: "CTU",
+  },
+  {
+    id: 7,
+    name: "货物数量",
+    value: "7件",
+  },
+  {
+    id: 8,
+    name: "货物总重",
+    value: "82KG",
+  },
+];
+const datas = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 5,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 6,
+    name: "安检",
+    flag: false,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 7,
+    name: "安检安检",
+    flag: false,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const datas1 = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "安检",
+    flag: false,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const tableHeader = [
+  { label: "航班号", key: "fightNo" },
+  { label: "集装器编号", key: "containerNo" },
+  { label: "货物编码", key: "goodsNo" },
+  { label: "拉下", key: "dwon1" },
+  { label: "退运", key: "return" },
+  { label: "收货核单", key: "receipt", lableClass: "scoreColumn" },
+  { label: "安检", key: "securityCheck" },
+  { label: "理货", key: "tally" },
+  { label: "拉下", key: "dwon2" },
+  { label: "待运区", key: "waitingArea" },
+  { label: "货站交接", key: "goodSstation1" },
+  { label: "机下交接", key: "offBoard1" },
+  { label: "装机", key: "installEquipment" },
+  { label: "卸机", key: "unloading", lableClass: "scoreColumn" },
+  { label: "机下交接", key: "offBoard2" },
+  { label: "货站交接", key: "goodSstation2" },
+  { label: "提取", key: "extract" },
+];
+const tableData = [
+  {
+    id: 1,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "66",
+    securityCheck: "77",
+    tally: "88",
+    dwon2: "99",
+    waitingArea: "100",
+    goodSstation1: "101",
+    offBoard1: "102",
+    installEquipment: "103",
+    unloading: "104",
+    offBoard2: "105",
+    goodSstation2: "106",
+    extract: "107",
+  },
+  {
+    id: 2,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "66",
+    securityCheck: "77",
+    tally: "88",
+    dwon2: "99",
+    waitingArea: "100",
+    goodSstation1: "101",
+    offBoard1: "102",
+    installEquipment: "103",
+    unloading: "104",
+    offBoard2: "105",
+    goodSstation2: "106",
+    extract: "107",
+  },
+  {
+    id: 3,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "66",
+    securityCheck: "77",
+    tally: "88",
+    dwon2: "99",
+    waitingArea: "100",
+    goodSstation1: "101",
+    offBoard1: "102",
+    installEquipment: "103",
+    unloading: "104",
+    offBoard2: "105",
+    goodSstation2: "106",
+    extract: "107",
+  },
+];
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
+</script>
+
+<style lang="scss" scoped>
+.station {
+  &-head {
+    height: 144px;
+    background: #410425;
+    padding: 24px 30px;
+    color: #ffffff;
+    &-title {
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      margin-bottom: 40px;
+    }
+  }
+  &-status {
+    margin: 24px 0;
+    line-height: 32px;
+    .status {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #519f6b;
+    }
+  }
+  &-list {
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .title {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #101116;
+      margin-bottom: 28px;
+      &-list {
+        margin-right: 50px;
+      }
+    }
+    &-left {
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+      flex: 1;
+      margin-right: 8px;
+    }
+    &-right {
+      width: 1090px;
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+    }
+  }
+  :deep &-table {
+    .scoreColumn {
+      background: #eef3d6;
+    }
+  }
+}
+</style>

src/views/baggageManagement/departure/flight/index.vue

@@ -1,11 +1,280 @@
 <template>
-  <div></div>
+  <div class="pageBody">
+    <div class="pageTop">
+      <div class="flightInfo">
+        <div class="airLine">{{airLine}}</div>
+        <div class="info">
+          <div class="infoBox">
+            <div>起飞机场简称：深圳机场   </div>
+            <div>日期 ：  2021-12-24     </div>
+            <div>时间：   19 : 30 : 25</div>
+            <div>停机位：012 </div>
+          </div>
+          <div class="iconBox">
+            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
+          </div>
+          <div class="infoBox">
+            <div>特货信息/货物数：     </div>
+            <div>托运运单数/货物数：     </div>
+            <div>中转进运单/货物数：</div>
+            <div>已配载集装器：</div>
+            <div>货站已交接集装器：</div>
+            <div>已装载集装器/运单/货物数：</div>
+            <div>拉下集装器/运单/货物数：</div>
+            <div>集装器数量：</div>
+          </div>
+          <div class="iconBox">
+            <el-icon color="#ffffff" :size="22"><CaretRight /></el-icon>
+          </div>
+          <div class="infoBox">
+            <div>降落机场简称：  南京机场   </div>
+            <div>日期 ：  2021-12-24          </div>
+            <div>时间：   22 : 25 : 25</div>
+          </div>
+        </div>
+      </div>
+      <div class="container">
+        <tableTemp
+          ref="domeTable"
+          :tableHeader="state.tableHeader"
+          :tableProperty="{ rowKey: 'ID',showSummary:true }"
+          :tableData="tableData"
+          @load="loadMore"
+          @cellClass="test"
+        ></tableTemp>
+      </div>
+    </div>
+    <div class="tableTopBtn">
+        <Search @clear="clear" @search="search" />
+    </div>
+    <div class="waybillList">
+      <tableTemp
+          ref="domeTable"
+          :tableHeader="state.waybillTableHeader"
+          :tableProperty="{ showSummary:true }"
+          :tableData="waybilltableData"
+          @load="loadMore"
+          @cellClass="test"
+        ></tableTemp>
+    </div>
+  </div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import tableTemp from "@/components/tableTemp/index.vue";
+import Search from "@/components/search/index.vue";
+import {CaretRight} from "@element-plus/icons-vue"
+import { ref, onMounted } from 'vue';
 
-export default defineComponent({
-  setup() {},
+const state = reactive({
+  tableHeader: [
+    { label: "集装器编号", key: "containerNo",width:"120px"},
+    { label: "运单数", key: "waybillCount",width:"60px" },
+    { label: "件数", key: "count",width:"60px" },
+    { label: "理货", key: "lh", lableClass: "nodeHeader",columnClassName:"columnClassName"},
+    { label: "拉下", key: "lx", lableClass: "nodeHeader",columnClassName:"columnClassName" },
+    { label: "待运区", key: "dyq", lableClass: "nodeHeader",columnClassName:"columnClassName" },
+    { label: "货站交接", key: "hzjj", lableClass: "nodeHeader",columnClassName:"columnClassName" },
+    { label: "机下交接", key: "jxjj", lableClass: "nodeHeader",columnClassName:"columnClassName" },
+    { label: "装机", key: "zj", lableClass: "nodeHeader",columnClassName:"columnClassName" },
+  ],
+  waybillTableHeader: [
+    { label: "运单号", key: "waybillNo",width:"120px"},
+    { label: "集装器数量", key: "jzqCount" },
+    { label: "品名", key: "pm"},
+    { label: "特货信息", key: "thxx"},
+    { label: "货物件数", key: "hwjs"},
+    { label: "拉下件数", key: "laxjs"},
+    { label: "退运件数", key: "tyjs"},
+    { label: "最新节点", key: "zxjd"},
+    { label: "最新位置", key: "zxwz"},
+    { label: "处理结果", key: "cljg"},
+    { label: "处理时间", key: "clsj",width:"130px"},
+    { label: "中转进航班号", key: "zzhbh"},
+    { label: "中转航班降落时间", key: "zzhbsj",width:"130px"},
+    { label: "装载序号", key: "zzxh"}
+  ],
+  listLoading: true,
 });
+
+const waybilltableData = ref([
+  {
+    waybillNo:"32535234445",
+    jzqCount:"5",
+    pm:"手机、充电器",
+    thxx:"特",
+    hwjs:"5",
+    laxjs:"2",
+    tyjs:"2",
+    zxjd:"待运区",
+    zxwz:"A13",
+    cljg:"通过",
+    clsj:"2022/9/10 10:01",
+    zzhbh:"ZH5466",
+    zzhbsj:"2022/9/10 16:01",
+    zzxh:"3"
+  },
+  {
+    waybillNo:"32535234445",
+    jzqCount:"5",
+    pm:"手机、充电器",
+    thxx:"特",
+    hwjs:"5",
+    laxjs:"2",
+    tyjs:"2",
+    zxjd:"待运区",
+    zxwz:"A13",
+    cljg:"通过",
+    clsj:"2022/9/10 10:01",
+    zzhbh:"ZH5466",
+    zzhbsj:"2022/9/10 16:01",
+    zzxh:"3"
+  },{
+    waybillNo:"32535234445",
+    jzqCount:"5",
+    pm:"手机、充电器",
+    thxx:"特",
+    hwjs:"5",
+    laxjs:"2",
+    tyjs:"2",
+    zxjd:"待运区",
+    zxwz:"A13",
+    cljg:"未通过",
+    clsj:"2022/9/10 10:01",
+    zzhbh:"ZH5466",
+    zzhbsj:"2022/9/10 16:01",
+    zzxh:"3"
+  }
+]);
+
+const airLine=ref("SZX - CA4120 - NKG")
+const tableData = ref([
+  {
+    containerNo:"DOU29800001",
+    waybillCount:"5",
+    count:"50",
+    lh:"C24  11:01",
+    lx:"F24  12:05",
+    dyq:"D32  11:25",
+    hzjj:"E24  11:40",
+    jxjj:"F24  12:01",
+    zj:"G32  12:25"
+  },
+  {
+    containerNo:"DOU29800001",
+    waybillCount:"5",
+    count:"50",
+    lh:"C24  11:01",
+    lx:"F24  12:05",
+    dyq:"D32  11:25",
+    hzjj:"E24  11:40",
+    jxjj:"F24  12:01",
+    zj:"G32  12:25"
+  }
+]);
+
+const setError = ()=>{
+  waybilltableData.value.map(item=>{
+    if(item.cljg=="未通过"){
+      item["rowClass"]="alarm"
+    }
+  })
+}
+
+const domeTable =ref(null)
+const test = (row) => {
+  if(row.column.property==="score"&& row.row.score>80){
+    domeTable.value.cellClass ="warn"
+  }
+  else{
+    domeTable.value.cellClass =""
+  }
+}
+
+const loadMore=(data)=>{
+  setError()
+  console.log(data);
+
+}
+
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.pageBody{
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .pageTop{
+    width: 100%;
+    height: 345px;
+    display: flex;
+    .flightInfo{
+      height: 100%;
+      flex: 1;
+      background: #410425;
+      box-sizing: border-box;
+      padding:18px 32px;
+      display: flex;
+      flex-direction: column;
+      .airLine{
+        font-size: 18px;
+        font-weight: bold;
+        color: #FFFFFF;
+        width: 100%;
+        margin-bottom: 16px;
+      }
+      .info{
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        justify-items: center;
+        width: 100%;
+        max-width: 1050px;
+        flex: 1;
+        .infoBox{
+          width: calc(33.3% - 10px);
+          background: #561638;
+          padding:10px 15px;
+          box-sizing: border-box;
+          font-size: 14px;
+          font-weight: 400;
+          color: #FFFFFF;
+          line-height: 30px;
+        }
+        .iconBox{
+          display: flex;
+          flex-direction: column;
+          width: 60px;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+    .container{
+      width: 760px;
+      height: 100%;
+      margin-left: 16px;
+
+    }
+  }
+  .tableTopBtn{
+    height: 72px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .waybillList{
+    width: 100%;
+    flex: 1;
+  }
+}
+:deep.el-table .nodeHeader {
+  background: #EEF3D6;
+}
+:deep.el-table .columnClassName {
+  background: #EEF3D6!important;
+}
+:deep.el-table .alarm {
+  background: #F38080!important;
+}
+</style>

src/views/baggageManagement/departure/goods/index.vue

@@ -1,11 +1,286 @@
 <template>
-  <div></div>
+  <div class="station">
+    <div class="station-head">
+      <div class="station-head-title">货物基本信息</div>
+      <div class="station-head-content flex-wrap">
+        <div class="station-head-content-list" v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
+      </div>
+    </div>
+    <div class="station-status flex">
+      <div class="station-status-info flex-wrap">
+        <div class="manageTitle">货物跟踪信息</div>
+        <div class="status">正常</div>
+      </div>
+      <div class="station-status-search">
+        <Search @clear="clear" @search="search" />
+      </div>
+    </div>
+    <div class="station-list flex-wrap">
+      <div class="station-list-left">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas" />
+      </div>
+      <div class="station-list-right">
+        <div class="title flex-wrap">
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas1" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table :tableHeader="tableHeader" :tableData="tableData" />
+    </div>
+  </div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
 
-export default defineComponent({
-  setup() {},
-});
+<script setup lang="ts">
+import Search from "@/components/search/index.vue";
+import Steps from "@/components/steps/index.vue";
+import Table from "@/components/tableTemp/index.vue";
+import { ElMessage } from "element-plus";
+const dataInfo = [
+  {
+    id: 1,
+    name: "货物编码",
+    value: "56888829",
+  },
+  {
+    id: 2,
+    name: "运单",
+    value: "FA56888829",
+  },
+];
+const datas = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 5,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 6,
+    name: "安检",
+    flag: false,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 7,
+    name: "安检安检",
+    flag: false,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const datas1 = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "安检",
+    flag: false,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const tableHeader = [
+  { label: "航班号", key: "fightNo" },
+  { label: "集装器编号", key: "containerNo" },
+  { label: "货物编码", key: "goodsNo" },
+  { label: "拉下", key: "dwon1" },
+  { label: "退运", key: "return" },
+  { label: "收货核单", key: "receipt", lableClass: "scoreColumn" },
+  { label: "安检", key: "securityCheck" },
+  { label: "理货", key: "tally" },
+  { label: "拉下", key: "dwon2" },
+  { label: "待运区", key: "waitingArea" },
+  { label: "货站交接", key: "goodSstation1" },
+  { label: "机下交接", key: "offBoard1" },
+  { label: "装机", key: "installEquipment" },
+  { label: "卸机", key: "unloading", lableClass: "scoreColumn" },
+  { label: "机下交接", key: "offBoard2" },
+  { label: "货站交接", key: "goodSstation2" },
+  { label: "提取", key: "extract" },
+];
+const tableData = [
+  {
+    id: 1,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "66",
+    securityCheck: "77",
+    tally: "88",
+    dwon2: "99",
+    waitingArea: "100",
+    goodSstation1: "101",
+    offBoard1: "102",
+    installEquipment: "103",
+    unloading: "104",
+    offBoard2: "105",
+    goodSstation2: "106",
+    extract: "107",
+  },
+  {
+    id: 2,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "66",
+    securityCheck: "77",
+    tally: "88",
+    dwon2: "99",
+    waitingArea: "100",
+    goodSstation1: "101",
+    offBoard1: "102",
+    installEquipment: "103",
+    unloading: "104",
+    offBoard2: "105",
+    goodSstation2: "106",
+    extract: "107",
+  },
+  {
+    id: 3,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "66",
+    securityCheck: "77",
+    tally: "88",
+    dwon2: "99",
+    waitingArea: "100",
+    goodSstation1: "101",
+    offBoard1: "102",
+    installEquipment: "103",
+    unloading: "104",
+    offBoard2: "105",
+    goodSstation2: "106",
+    extract: "107",
+  },
+];
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
 </script>
-<style lang="scss" scoped></style>
+
+<style lang="scss" scoped>
+.station {
+  &-head {
+    height: 144px;
+    background: #410425;
+    padding: 24px 30px;
+    color: #ffffff;
+    &-title {
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      margin-bottom: 40px;
+    }
+    &-content {
+      &-list {
+        margin-right: 100px;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  &-status {
+    margin: 24px 0;
+    line-height: 32px;
+    .status {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #519f6b;
+    }
+  }
+  &-list {
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .title {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #101116;
+      margin-bottom: 28px;
+      &-list {
+        margin-right: 50px;
+      }
+    }
+    &-left {
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+      width: 1090px;
+      margin-right: 8px;
+    }
+    &-right {
+      flex: 1;
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+    }
+  }
+  :deep &-table {
+    margin-top: 16px;
+    .scoreColumn {
+      background: #eef3d6;
+    }
+  }
+}
+</style>

src/views/baggageManagement/departure/station/index.vue

@@ -4,4 +4,4 @@
 <script lang="ts" setup>
 import StationView from '../../components/StationView/index.vue'
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>

src/views/baggageManagement/departure/waybill/index.vue

@@ -1,11 +1,324 @@
 <template>
-  <div></div>
+  <div class="station scroll-y">
+    <div class="station-head">
+      <div class="station-head-title">运单基本信息</div>
+      <div class="station-head-content flex">
+        <div v-for="item in dataInfo" :key="item.id">{{item.name}}：{{item.value}}</div>
+      </div>
+    </div>
+    <div class="station-status flex">
+      <div class="station-status-info flex-wrap">
+        <div class="manageTitle">运单跟踪信息</div>
+        <div class="status">正常</div>
+      </div>
+      <div class="station-status-search">
+        <Search @clear="clear" @search="search" />
+      </div>
+    </div>
+    <div class="station-list flex-wrap">
+      <div class="station-list-left">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas" />
+      </div>
+      <div class="station-list-right">
+        <div class="title flex-wrap">
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas1" />
+      </div>
+    </div>
+    <div class="station-list flex-wrap">
+      <div class="station-list-left">
+        <div class="title flex-wrap">
+          <div class="title-list">航班号CA1001</div>
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas" />
+      </div>
+      <div class="station-list-right">
+        <div class="title flex-wrap">
+          <div class="title-list">出港: 深圳机场</div>
+          <div class="title-list">日期：2022/09/10</div>
+        </div>
+        <Steps :datas="datas1" />
+      </div>
+    </div>
+    <div class="station-table">
+      <Table height="calc(100vh - 800px)" :tableHeader="tableHeader" :tableData="tableData" />
+    </div>
+  </div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
 
-export default defineComponent({
-  setup() {},
-});
+<script setup lang="ts">
+import Search from "@/components/search/index.vue";
+import Steps from "@/components/steps/index.vue";
+import Table from "@/components/tableTemp/index.vue";
+import { ElMessage } from "element-plus";
+const dataInfo = [
+  {
+    id: 1,
+    name: "运单",
+    value: "FA56888829",
+  },
+  {
+    id: 2,
+    name: "货代公司",
+    value: "深圳市联运通货有限公司",
+  },
+  {
+    id: 3,
+    name: "品名",
+    value: "电路板、手机外壳",
+  },
+  {
+    id: 4,
+    name: "特货信息",
+    value: "特",
+  },
+  {
+    id: 5,
+    name: "始发机场",
+    value: "SZX",
+  },
+  {
+    id: 6,
+    name: "目的机场",
+    value: "CTU",
+  },
+  {
+    id: 7,
+    name: "货物数量",
+    value: "7件",
+  },
+  {
+    id: 8,
+    name: "货物总重",
+    value: "82KG",
+  },
+];
+const datas = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 5,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 6,
+    name: "安检",
+    flag: false,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 7,
+    name: "安检安检",
+    flag: false,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const datas1 = [
+  {
+    id: 1,
+    name: "收货核单",
+    flag: true,
+    labelWidth: 100,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 2,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 3,
+    name: "安检",
+    flag: true,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+  {
+    id: 4,
+    name: "安检",
+    flag: false,
+    children: ["A32", "534件", "通过", "10:25"],
+  },
+];
+const tableHeader = [
+  { label: "航班号", key: "fightNo" },
+  { label: "集装器编号", key: "containerNo" },
+  { label: "货物编码", key: "goodsNo" },
+  { label: "拉下", key: "dwon1" },
+  { label: "退运", key: "return" },
+  { label: "收货核单", key: "receipt", lableClass: "scoreColumn" },
+  { label: "安检", key: "securityCheck" },
+  { label: "理货", key: "tally" },
+  { label: "拉下", key: "dwon2" },
+  { label: "待运区", key: "waitingArea" },
+  { label: "货站交接", key: "goodSstation1" },
+  { label: "机下交接", key: "offBoard1" },
+  { label: "装机", key: "installEquipment" },
+  { label: "卸机", key: "unloading", lableClass: "scoreColumn" },
+  { label: "机下交接", key: "offBoard2" },
+  { label: "货站交接", key: "goodSstation2" },
+  { label: "提取", key: "extract" },
+];
+const tableData = [
+  {
+    id: 1,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "66",
+    securityCheck: "77",
+    tally: "88",
+    dwon2: "99",
+    waitingArea: "100",
+    goodSstation1: "101",
+    offBoard1: "102",
+    installEquipment: "103",
+    unloading: "104",
+    offBoard2: "105",
+    goodSstation2: "106",
+    extract: "107",
+  },
+  {
+    id: 2,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "66",
+    securityCheck: "77",
+    tally: "88",
+    dwon2: "99",
+    waitingArea: "100",
+    goodSstation1: "101",
+    offBoard1: "102",
+    installEquipment: "103",
+    unloading: "104",
+    offBoard2: "105",
+    goodSstation2: "106",
+    extract: "107",
+  },
+  {
+    id: 3,
+    fightNo: "CA1001",
+    containerNo: "DOU2424U2",
+    goodsNo: "56888829",
+    dwon1: "Y",
+    return: "Y",
+    receipt: "66",
+    securityCheck: "77",
+    tally: "88",
+    dwon2: "99",
+    waitingArea: "100",
+    goodSstation1: "101",
+    offBoard1: "102",
+    installEquipment: "103",
+    unloading: "104",
+    offBoard2: "105",
+    goodSstation2: "106",
+    extract: "107",
+  },
+];
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
 </script>
-<style lang="scss" scoped></style>
+
+<style lang="scss" scoped>
+.station {
+  &-head {
+    height: 144px;
+    background: #410425;
+    padding: 24px 30px;
+    color: #ffffff;
+    &-title {
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      margin-bottom: 40px;
+    }
+  }
+  &-status {
+    margin: 24px 0;
+    line-height: 32px;
+    .status {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #519f6b;
+    }
+  }
+  &-list {
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .title {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #101116;
+      margin-bottom: 28px;
+      &-list {
+        margin-right: 50px;
+      }
+    }
+    &-left {
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+      width: 1090px;
+      margin-right: 8px;
+    }
+    &-right {
+      flex: 1;
+      background: #ffffff;
+      padding: 24px 24px 12px 24px;
+    }
+  }
+  :deep &-table {
+    .scoreColumn {
+      background: #eef3d6;
+    }
+  }
+}
+</style>

src/views/systemSettings/log/index.vue

@@ -1,11 +1,234 @@
 <template>
-  <div></div>
+  <div class="interfaceLog">
+    <div class="interfaceLog_head flex">
+      <div class="interfaceLog_head_time flex-wrap">
+        <div class="interfaceLog_head_time_start mr10">
+          <el-date-picker
+            v-model="timeStart"
+            size="default"
+            type="datetime"
+            placeholder="选择开始日期时间"
+            default-time="00:00:00"
+          >
+          </el-date-picker>
+        </div>
+        <div class="interfaceLog_head_time_end">
+          <el-date-picker
+            v-model="timeEnd"
+            size="default"
+            type="datetime"
+            placeholder="选择结束日期时间"
+            default-time="00:00:00"
+          >
+          </el-date-picker>
+        </div>
+      </div>
+      <div class="interfaceLog_head_btn">
+        <Search
+          @getSearchData="getSearchData"
+          :isTitle="false"
+          @clearSearchData="clearSearchData"
+        />
+      </div>
+    </div>
+    <div class="interfaceLog_content">
+      <el-row :gutter="24">
+        <el-col :span="19">
+          <div class="app-containers">
+            <DataTable
+              :tableHeader="state.list"
+              :tableData="tableData"
+              :tableProperty="{ rowKey: 'ID' }"
+            />
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="interfaceLog_content_progress">
+            <el-timeline>
+              <el-timeline-item v-for="(item, index) in preDatas" :key="index">
+                <div class="list">
+                  <div class="list_status"></div>
+                  <div class="list_title">{{ item.title }}</div>
+                  <div class="list_code">{{ item.code }}</div>
+                  <div class="list_time">{{ item.time }}</div>
+                </div>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  setup() {},
+<script setup lang="ts">
+import DataTable from "@/components/tableTemp/index.vue";
+const timeStart = ref<String>("");
+const timeEnd = ref<String>("");
+const preDatas = ref<Array>([]);
+//列表
+const tableData = ref([
+  {
+    name: "测试",
+    china: "测试",
+    englin: "测试",
+    two: "测试",
+    three: "测试",
+  },
+  {
+    name: "测试",
+    china: "测试",
+    englin: "测试",
+    two: "测试",
+    three: "测试",
+  },
+  {
+    name: "测试",
+    china: "测试",
+    englin: "测试",
+    two: "测试",
+    three: "测试",
+  },
+]);
+//表头
+const state = reactive({
+  list: [
+    { label: "用户", key: "name" },
+    { label: "发生时间", key: "china" },
+    { label: "发生位置", key: "englin" },
+    { label: "成败代码", key: "two" },
+    { label: "成败详情", key: "three" },
+  ],
+  listLoading: true,
 });
+for (let i = 0; i < 10; i++) {
+  const element = {
+    action: "采集",
+    dataNumber: "000120220307201211011201",
+    sourceDataNumber: "BSM",
+    time: "2022-03-07 20:00:12",
+    result: i % 2 == 0 ? true : false,
+    details: "数据格式不正确",
+  };
+  const obj = {
+    title: "更新 Github 模板",
+    code: "989665554",
+    time: "2022-4-26 15:48:55",
+    id: i,
+  };
+  tableData.value.push(element);
+  preDatas.value.push(obj);
+}
+preDatas.value.splice(5, 10);
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.interfaceLog {
+  padding: 8px 32px 12px 8px;
+  .mr10 {
+    margin-right: 10px;
+  }
+  ::v-deep .interfaceLog_head_time {
+    .el-input__prefix {
+      left: 10px;
+      color: #101116;
+      top: 10px;
+    }
+    .el-input--prefix .el-input__inner {
+      padding-left: 50px;
+    }
+  }
+  .interfaceLog_head_btn {
+    ::v-deep .btn {
+      margin-right: 0;
+    }
+  }
+  .interfaceLog_content {
+    margin-top: 8px;
+    ::v-deep .table {
+      color: #101116;
+      thead {
+        color: #101116;
+      }
+      .success {
+        color: #33bf47;
+      }
+      .error {
+        color: #df4545;
+      }
+    }
+    &_progress {
+      // width: 368px;
+      background: #fafcff;
+      margin-left: 8px;
+      padding: 13px 32px;
+      overflow: hidden;
+      ::v-deep .el-timeline {
+        padding: 0;
+        .el-timeline-item {
+          position: relative;
+          &::after {
+            position: absolute;
+            content: "";
+            height: 1px;
+            width: calc(100% + 4px);
+            background-color: #dfe3ea;
+            left: 28px;
+            bottom: 20px;
+          }
+          &:last-child {
+            &::after {
+              height: 0;
+            }
+          }
+        }
+        .el-timeline-item__node--normal {
+          z-index: 2;
+          background-color: #fff;
+          width: 10px;
+          height: 10px;
+          left: 0px;
+          top: 2px;
+        }
+        .el-timeline-item__tail {
+          border-left: 4px solid #dfe3ea;
+          left: 3px;
+        }
+        .el-timeline-item:last-child .el-timeline-item__tail {
+          height: 1000%;
+          display: block;
+        }
+        .list {
+          &_status {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: #ac014d;
+            left: -5px;
+            border-radius: 50%;
+            z-index: 1;
+          }
+          &_title,
+          &_code {
+            margin-bottom: 7px;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #101116;
+          }
+          &_time {
+            font-size: 12px;
+            font-family: Helvetica;
+            font-weight: 400;
+            color: #afb4bf;
+          }
+        }
+      }
+    }
+  }
+}
+.interfaceLog_content_progress {
+  height: 100%;
+}
+// ::v-deep.el-timeline .list_status {
+//   background: #ac014d !important;
+// }
+</style>

src/views/systemSettings/securityPolicy/index.vue

@@ -205,7 +205,7 @@
                     </div>
                     <!-- 输入框 -->
                     <el-input
-                      style="width: 100%"
+                      style="width: 100%; border: none"
                       placeholder="请输入黑名单"
                       v-model="currentval"
                       @keyup.enter="addTags"
@@ -638,4 +638,12 @@ defineExpose({
   color: #495060;
   line-height: 32px;
 }
+.father_box {
+  ::v-deep .el-input__wrapper:hover {
+    box-shadow: 0 0 0 0;
+  }
+  ::v-deep .el-input__wrapper {
+    box-shadow: 0 0 0 0;
+  }
+}
 </style>

src/views/systemSettings/serviceManagement/index.vue

@@ -1,11 +1,848 @@
 <template>
-  <div></div>
+  <div class="integration__cont__map__cont">
+    <Minheader
+      :is-statuser="true"
+      :is-Journal="true"
+      @addJournalForm="addJournalForm"
+    >
+      <template #header>
+        <div class="status flex-wrap">
+          <div class="manageTitle">服务拓扑</div>
+          <div class="typestart flex-wrap">
+            <div class="name">
+              <div class="log"></div>
+              正常
+            </div>
+            <div class="name">
+              <div class="log1"></div>
+              异常
+            </div>
+          </div>
+        </div>
+      </template></Minheader
+    >
+    <div class="integration__cont" ref="chartDom"></div>
+    <Dialog
+      width="1200px"
+      :flag="flag"
+      :type="type"
+      :msgTitle="msgTitle"
+      @resetForm="resetForm"
+    >
+      <div class="diacont">
+        <div class="interfaceLog_head flex">
+          <div class="interfaceLog_head_time flex-act">
+            <div class="header_name">当前服务：Kafka原始报文</div>
+          </div>
+          <div class="interfaceLog_head_btn flex">
+            <div class="interfaceLog_head_time_start r12">
+              <el-date-picker
+                v-model="timeStart"
+                size="default"
+                type="datetime"
+                placeholder="选择开始日期时间"
+              >
+              </el-date-picker>
+            </div>
+            <div class="interfaceLog_head_time_end r16">
+              <el-date-picker
+                v-model="timeEnd"
+                size="default"
+                type="datetime"
+                placeholder="选择结束日期时间"
+              >
+              </el-date-picker>
+            </div>
+            <Search
+              @getSearchData="getSearchData"
+              :isTitle="false"
+              @clearSearchData="clearSearchData"
+            />
+          </div>
+        </div>
+        <div class="interfaceLog_content">
+          <el-row :gutter="24">
+            <el-col :span="19">
+              <DataTable
+                :tableHeader="state.list"
+                :tableData="tableData"
+                :tableProperty="{ rowKey: 'ID' }"
+              />
+            </el-col>
+            <el-col :span="5">
+              <div class="interfaceLog_content_progress">
+                <el-timeline>
+                  <el-timeline-item
+                    v-for="(item, index) in preDatas"
+                    :key="index"
+                  >
+                    <div class="list">
+                      <div class="list_status"></div>
+                      <div class="list_title">{{ item.title }}</div>
+                      <div class="list_code">{{ item.code }}</div>
+                      <div class="list_time">{{ item.time }}</div>
+                    </div>
+                  </el-timeline-item>
+                </el-timeline>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </Dialog>
+  </div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import Minheader from "@/components/minheader/index.vue";
+import DataTable from "@/components/tableTemp/index.vue";
+import Dialog from "@/components/dialog/index.vue";
+import { provide } from "vue";
+import * as echarts from "echarts";
+import img1 from "@/assets/integr/jiekou_blue.png";
+import img2 from "@/assets/integr/jiekou_red.png";
+import img3 from "@/assets/integr/pull_blue.png";
+import img4 from "@/assets/integr/kafka_blue.png";
+import img5 from "@/assets/integr/push_blue.png";
+import img6 from "@/assets/integr/save_blue.png";
+import img7 from "@/assets/integr/mysql_blue.png";
+provide("echarts", echarts);
+const chartDom = ref(null);
+const myChart = ref(null);
+const flag = ref<Boolean>(false); //弹窗开关
+const type = ref<String>(""); //判断是否删除
+const msgTitle = ref<String>("查看日志"); //弹窗标题
+const getAssetsFile = (url: string) => {
+  return new URL(`../assets/integr/${url}`, import.meta.url).href;
+};
+const datas = ref<Array>([]);
+const desc = ref<number>(300);
+//默认节点
+// const defaultImg = getAssetsFile("jiekou_blue.png");
+const defaultImg = "image://" + reactive(img1);
+//默认节点-错误
+const defaultImgError = "image://" + reactive(img2);
 
-export default defineComponent({
-  setup() {},
+//拉取节点
+const pullImg = "image://" + reactive(img3);
+
+//拉取节点-错误
+const pullImgError = getAssetsFile("pull_red.png");
+
+//kafka节点
+const kafkaImg = "image://" + reactive(img4);
+
+//kafka节点-错误
+const kafkaImgError = getAssetsFile("kafka_red.png");
+
+//推送节点
+const pushImg = "image://" + reactive(img5);
+
+//推送节点-错误
+const pushImgError = getAssetsFile("push_red.png");
+
+//存储节点
+const saveImg = "image://" + reactive(img6);
+
+//存储节点-错误
+const saveImgError = getAssetsFile("save_red.png");
+
+//存储节点
+const mysqlImg = "image://" + reactive(img7);
+
+//存储节点-错误
+const mysqlImgError = getAssetsFile("mysql_red.png");
+
+const timeStart = ref<String>("");
+const timeEnd = ref<String>("");
+const preDatas = ref<Array>([]);
+//列表
+const tableData = ref([
+  {
+    name: "测试",
+    china: "测试",
+    englin: "测试",
+    two: "测试",
+    three: "测试",
+  },
+  {
+    name: "测试",
+    china: "测试",
+    englin: "测试",
+    two: "测试",
+    three: "测试",
+  },
+  {
+    name: "测试",
+    china: "测试",
+    englin: "测试",
+    two: "测试",
+    three: "测试",
+  },
+]);
+//表头
+const state = reactive({
+  list: [
+    { label: "用户", key: "name" },
+    { label: "发生时间", key: "china" },
+    { label: "发生位置", key: "englin" },
+    { label: "成败代码", key: "two" },
+    { label: "成败详情", key: "three" },
+  ],
+  listLoading: true,
+});
+for (let i = 0; i < 10; i++) {
+  const element = {
+    action: "采集",
+    dataNumber: "000120220307201211011201",
+    sourceDataNumber: "BSM",
+    time: "2022-03-07 20:00:12",
+    result: i % 2 == 0 ? true : false,
+    details: "数据格式不正确",
+  };
+  const obj = {
+    title: "更新 Github 模板",
+    code: "989665554",
+    time: "2022-4-26 15:48:55",
+    id: i,
+  };
+  tableData.value.push(element);
+  preDatas.value.push(obj);
+}
+preDatas.value.splice(5, 10);
+const nodeDataList = ref([
+  {
+    name: "星盟SBH",
+    linkTargetName: "首都机场边缘节点",
+    linkValue: " ",
+    coordConfig: {
+      level: "0",
+    },
+    value: [10, 250],
+    draggable: false,
+    fixed: true,
+    symbol: defaultImg,
+    symbolSize: 30,
+  },
+  // {
+  //   name: "星盟SBH",
+  //   linkTargetName: "国航主动拉取节点",
+  //   linkValue: " ",
+  //   coordConfig: {
+  //     level: "0",
+  //   },
+  //   value: [10, 220],
+  //   draggable: false,
+  //   fixed: true,
+  //   symbol: defaultImg,
+  //   symbolSize: 30,
+  // },
+  // {
+  //   name: "局方公共平台",
+  //   linkTargetName: "国航主动拉取节点",
+  //   linkValue: " ",
+  //   coordConfig: {
+  //     level: "0",
+  //   },
+  //   value: [10, 190],
+  //   draggable: false,
+  //   symbol: defaultImgError,
+  //   symbolSize: 30,
+  // },
+  // {
+  //   name: "离港高频",
+  //   linkTargetName: "国航主动拉取节点",
+  //   linkValue: " ",
+  //   coordConfig: {
+  //     level: "0",
+  //   },
+  //   value: [10, 160],
+  //   draggable: false,
+  //   symbol: defaultImg,
+  //   symbolSize: 30,
+  // },
+  // {
+  //   name: "WT",
+  //   linkTargetName: "国航主动拉取节点",
+  //   linkValue: " ",
+  //   coordConfig: {
+  //     level: "0",
+  //   },
+  //   value: [10, 130],
+  //   draggable: false,
+  //   symbol: defaultImg,
+  //   symbolSize: 30,
+  // },
+  // {
+  //   name: "特殊及异常行李",
+  //   linkTargetName: "国航主动拉取节点",
+  //   linkValue: " ",
+  //   coordConfig: {
+  //     level: "0",
+  //   },
+  //   value: [10, 100],
+  //   draggable: false,
+  //   symbol: defaultImg,
+  //   symbolSize: 30,
+  // },
+  // {
+  //   name: "SCS",
+  //   linkTargetName: "国航被动接收节点",
+  //   linkValue: " ",
+  //   coordConfig: {
+  //     level: "0",
+  //   },
+  //   value: [10, 70],
+  //   draggable: false,
+  //   symbol: defaultImg,
+  //   symbolSize: 30,
+  // },
+  // {
+  //   name: "ERP",
+  //   linkTargetName: "国航被动接收节点",
+  //   linkValue: " ",
+  //   coordConfig: {
+  //     level: "0",
+  //   },
+  //   value: [10, 40],
+  //   draggable: false,
+  //   symbol: defaultImg,
+  //   symbolSize: 30,
+  // },
+  // {
+  //   name: "服务质量",
+  //   linkTargetName: "国航被动接收节点",
+  //   linkValue: " ",
+  //   coordConfig: {
+  //     level: "0",
+  //   },
+  //   value: [10, 10],
+  //   draggable: false,
+  //   symbol: defaultImg,
+  //   symbolSize: 30,
+  // },
+  //节点B,C,D ....n
+  {
+    name: "首都机场边缘节点",
+    linkTargetName: "国航主动拉取节点",
+    linkValue: " ",
+    coordConfig: {
+      level: "1",
+    },
+    symbol: pullImg,
+    symbolSize: 60,
+    draggable: false,
+    value: [40, 245],
+  },
+  {
+    name: "国航主动拉取节点",
+    linkTargetName: "Kafka",
+    linkValue: " ",
+    coordConfig: {
+      level: "2",
+    },
+    symbol: pullImg,
+    symbolSize: 60,
+    draggable: false,
+    value: [80, 180],
+  },
+  // {
+  //   name: "国航被动接收节点",
+  //   linkTargetName: "Kafka",
+  //   linkValue: " ",
+  //   coordConfig: {
+  //     level: "2",
+  //   },
+  //   symbol: pullImg,
+  //   symbolSize: 60,
+  //   draggable: false,
+  //   value: [80, 100],
+  // },
+  {
+    name: "Kafka",
+    linkTargetName: "BSM",
+    linkValue: " ",
+    coordConfig: { level: "3" },
+    symbolSize: 60,
+    symbol: kafkaImg,
+    draggable: false,
+    value: [120, 140],
+  },
+  {
+    name: "Kafka ",
+    linkTargetName: "BPM",
+    linkValue: " ",
+    coordConfig: { level: "3" },
+    symbolSize: 60,
+    symbol: kafkaImg,
+    draggable: false,
+    label: {
+      show: false,
+    },
+    value: [120, 140],
+  },
+  {
+    name: "Kafka  ",
+    linkTargetName: "航班",
+    linkValue: " ",
+    coordConfig: { level: "3" },
+    symbolSize: 60,
+    symbol: kafkaImg,
+    draggable: false,
+    label: {
+      show: false,
+    },
+    value: [120, 140],
+  },
+  {
+    name: "Kafka   ",
+    linkTargetName: "行李投诉",
+    linkValue: " ",
+    coordConfig: { level: "3" },
+    symbolSize: 60,
+    symbol: kafkaImg,
+    draggable: false,
+    label: {
+      show: false,
+    },
+    value: [120, 140],
+  },
+  {
+    name: "Kafka    ",
+    linkTargetName: "旅客",
+    linkValue: " ",
+    coordConfig: { level: "3" },
+    symbolSize: 60,
+    symbol: kafkaImg,
+    draggable: false,
+    label: {
+      show: false,
+    },
+    value: [120, 140],
+  },
+  {
+    name: "BSM",
+    linkTargetName: "解析服务",
+    linkValue: " ",
+    coordConfig: { level: "4" },
+    symbolSize: 30,
+    symbol: defaultImg,
+    draggable: false,
+    value: [160, 180],
+  },
+  {
+    name: "BPM",
+    linkTargetName: "推送节点",
+    linkValue: " ",
+    coordConfig: { level: "4" },
+    symbolSize: 30,
+    symbol: defaultImg,
+    draggable: false,
+    value: [160, 150],
+  },
+  {
+    name: "航班",
+    linkTargetName: "解析服务",
+    linkValue: " ",
+    coordConfig: { level: "4" },
+    symbolSize: 30,
+    symbol: defaultImg,
+    draggable: false,
+    value: [160, 120],
+  },
+  {
+    name: "行李投诉",
+    linkTargetName: "解析服务",
+    linkValue: " ",
+    coordConfig: { level: "4" },
+    symbolSize: 30,
+    symbol: defaultImg,
+    draggable: false,
+    value: [160, 90],
+  },
+  {
+    name: "旅客",
+    linkTargetName: "解析服务",
+    linkValue: " ",
+    coordConfig: { level: "4" },
+    symbolSize: 30,
+    symbol: defaultImg,
+    draggable: false,
+    value: [160, 60],
+  },
+  {
+    name: "推送节点",
+    linkTargetName: "首都机场BHS ",
+    linkValue: " ",
+    coordConfig: { level: "5" },
+    symbolSize: 60,
+    symbol: pushImg,
+    draggable: false,
+    value: [200, 160],
+  },
+  {
+    name: "推送节点 ",
+    linkTargetName: "星盟SBH ",
+    linkValue: " ",
+    coordConfig: { level: "5" },
+    symbolSize: 60,
+    symbol: pushImg,
+    draggable: false,
+    label: {
+      show: false,
+    },
+    value: [200, 160],
+  },
+  {
+    name: "推送节点  ",
+    linkTargetName: "局方公共平台 ",
+    linkValue: " ",
+    coordConfig: { level: "5" },
+    symbolSize: 60,
+    symbol: pushImg,
+    draggable: false,
+    label: {
+      show: false,
+    },
+    value: [200, 160],
+  },
+  {
+    name: "推送节点   ",
+    linkTargetName: "行李推送事件",
+    linkValue: " ",
+    coordConfig: { level: "5" },
+    symbolSize: 60,
+    symbol: pushImg,
+    draggable: false,
+    label: {
+      show: false,
+    },
+    value: [200, 160],
+  },
+  {
+    name: "推送节点    ",
+    linkTargetName: "ES",
+    linkValue: " ",
+    coordConfig: { level: "5" },
+    symbolSize: 60,
+    symbol: pushImg,
+    draggable: false,
+    label: {
+      show: false,
+    },
+    value: [200, 160],
+  },
+  {
+    name: "解析服务",
+    linkTargetName: " Kafka",
+    linkValue: " ",
+    coordConfig: { level: "5" },
+    symbolSize: 60,
+    symbol: pushImg,
+    draggable: false,
+    value: [200, 100],
+  },
+  {
+    name: "首都机场BHS ",
+    linkTargetName: "首都机场BHS ",
+    linkValue: " ",
+    coordConfig: { level: "6" },
+    symbolSize: 30,
+    symbol: defaultImg,
+    draggable: false,
+    value: [240, 220],
+  },
+  {
+    name: "星盟SBH ",
+    linkTargetName: "星盟SBH ",
+    linkValue: " ",
+    coordConfig: { level: "6" },
+    symbolSize: 30,
+    symbol: defaultImg,
+    draggable: false,
+    value: [240, 190],
+  },
+  {
+    name: "局方公共平台 ",
+    linkTargetName: "局方公共平台 ",
+    linkValue: " ",
+    coordConfig: { level: "6" },
+    symbolSize: 30,
+    symbol: defaultImg,
+    draggable: false,
+    value: [240, 160],
+  },
+  {
+    name: "行李推送事件",
+    linkTargetName: "行李推送事件",
+    linkValue: " ",
+    coordConfig: { level: "6" },
+    symbolSize: 30,
+    symbol: defaultImg,
+    draggable: false,
+    value: [240, 130],
+  },
+  {
+    name: "ES",
+    linkTargetName: "ES",
+    linkValue: " ",
+    coordConfig: { level: "6" },
+    symbolSize: 30,
+    symbol: defaultImg,
+    draggable: false,
+    value: [240, 100],
+  },
+  {
+    name: " Kafka",
+    linkTargetName: "存储服务",
+    linkValue: " ",
+    coordConfig: { level: "6" },
+    symbolSize: 30,
+    symbol: defaultImg,
+    draggable: false,
+    value: [240, 70],
+  },
+  {
+    name: "存储服务",
+    linkTargetName: "Mysql",
+    linkValue: " ",
+    coordConfig: { level: "7" },
+    symbolSize: 60,
+    symbol: saveImg,
+    draggable: false,
+    value: [280, 160],
+  },
+  {
+    name: "Mysql",
+    linkTargetName: "Mysql",
+    linkValue: " ",
+    coordConfig: { level: "8" },
+    symbolSize: 60,
+    symbol: mysqlImg,
+    draggable: false,
+    value: [340, 160],
+  },
+]);
+const options = reactive({
+  itemStyle: {
+    normal: {
+      color: "#67C23A",
+    },
+    shadowBlur: 0,
+  },
+  textStyle: {
+    color: "#444",
+    fontSize: 16,
+    fontWeight: 600,
+  },
+  grid: {
+    top: 20,
+    bottom: 10,
+    left: 0,
+    right: 0,
+  },
+  legend: [
+    {
+      formatter: function (name) {
+        return echarts.format.truncateText(name, 200, "12px", "…");
+      },
+      tooltip: {
+        show: true,
+      },
+      selectedMode: "false",
+      bottom: 20,
+    },
+  ],
+  animationDuration: 500,
+  animationEasingUpdate: "quinticInOut",
+  xAxis: {
+    show: false,
+    type: "value",
+  },
+  yAxis: {
+    show: false,
+    type: "value",
+  },
+  series: [
+    {
+      type: "graph",
+      coordinateSystem: "cartesian2d",
+      //圆形上面的文字
+      label: {
+        normal: {
+          position: "bottom",
+          show: true,
+          textStyle: {
+            fontSize: 12,
+          },
+        },
+      },
+      itemStyle: {
+        normal: {
+          color: "#409eff",
+        },
+        shadowBlur: 0,
+      },
+      lineStyle: {
+        normal: {
+          width: 0,
+          shadowColor: "none",
+          color: "#ff0000",
+        },
+      },
+      data: [],
+      links: [],
+    },
+  ],
+});
+const handle = () => {
+  if (myChart) {
+    myChart.resize();
+  }
+};
+const getCoordDataList = () => {
+  let coorDataDict = {};
+  let defaultConfig = {
+    type: "lines", //块1,2...n到节点A,B...N
+    coordinateSystem: "cartesian2d",
+    // animationDelay: 10000,
+    z: 1,
+    effect: {
+      show: true,
+      smooth: true,
+      trailLength: 0,
+      symbol: "arrow",
+      color: "#92A7D5",
+      symbolSize: 10,
+      period: 3,
+      delay: 1500,
+      loop: true,
+    },
+    lineStyle: {
+      normal: {
+        curveness: 0,
+        color: "#92A7D5",
+        width: 1,
+      },
+    },
+    data: [],
+  };
+  nodeDataList.value.map((item) => {
+    if (item.coordConfig !== undefined) {
+      if (!(item.coordConfig.level in coorDataDict)) {
+        let coorConfig = JSON.parse(JSON.stringify(defaultConfig));
+        if (item.coordConfig.lineStyle !== undefined) {
+          coorConfig.lineStyle = item.coordConfig.lineStyle;
+        }
+        if (item.coordConfig.effect !== undefined) {
+          coorConfig.effect = item.coordConfig.effect;
+        }
+        coorDataDict[item.coordConfig.level] = coorConfig;
+      }
+
+      let coordData = [
+        item.value,
+        nodeDataList.value.filter((i) => i.name == item.linkTargetName)[0]
+          .value ||
+          nodeDataList.value.filter((i) => i.name == item.linkTargetName)[1]
+            .value,
+      ];
+      coorDataDict[item.coordConfig.level].data.push({
+        coords: coordData,
+      });
+      if (item.coordConfig.bilateral) {
+        coorDataDict[item.coordConfig.level].data.push({
+          coords: coordData.reverse(),
+        });
+      }
+    }
+  });
+  return Object.values(coorDataDict);
+};
+nodeDataList.value.map((item) => {
+  datas.value.push({
+    source: item.name,
+    value: item.linkValue,
+    target: item.linkTargetName,
+  });
+});
+const resizeHandler = () => {
+  myChart.resize();
+};
+onMounted(() => {
+  options.series[0].data = nodeDataList;
+  options.series[0].links = datas;
+  options.series = options.series.concat(getCoordDataList());
+  myChart.value = echarts.init(chartDom.value);
+  myChart.value.setOption(options, true);
+  window.addEventListener("resize", resizeHandler);
 });
+//新增
+const addJournalForm = () => {
+  msgTitle.value = "查看日志";
+  flag.value = true;
+};
+//取消
+const resetForm = () => {
+  flag.value = false;
+};
+// console.log(nodeDataList.value);
+// options.value.series[0].data = nodeDataList.value;
+// options.value.series[0].links = datas.value;
+// options.value.series = options.value.series.concat(getCoordDataList());
+// myChart = echarts.init(document.getElementById("map"));
+// myChart.value.setOption(options.value);
+// // 事件
+// myChart.on("click", (params) => {
+//   console.log(params);
+// });
+// 监听页面缩放 防止dom重复渲染
+// window.addEventListener("resize", _.debounce(handle, desc));
 </script>
-<style lang="scss" scoped></style>
+<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/systemSettings/serviceManagement/serviceMonitor.vue

@@ -0,0 +1,207 @@
+<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/serviceMonitorEdit.vue

@@ -0,0 +1,733 @@
+<template>
+  <div class="airportInfo">
+    <div class="wrap_id">
+      <Minheader
+        :is-Journal="true"
+        :is-statuser="true"
+        :is-Slot="true"
+        @addJournalForm="addJournalForm"
+        @addslotForm="addslotForm"
+      >
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">当前服务ID：101</div>
+            <div class="typecond">{{ typeK }}</div>
+          </div>
+        </template></Minheader
+      >
+      <div class="diacont">
+        <el-form :model="tableForm" class="w100 fw">
+          <div class="outersurface pd30">
+            <el-form-item label="名称" size="default">
+              <el-input
+                v-model="tableForm.name"
+                placeholder="请输入航易行数据采集"
+              />
+            </el-form-item>
+          </div>
+          <div class="outersurface pd30">
+            <el-form-item label="业务数据" size="default">
+              <el-row :gutter="24">
+                <el-col :span="14">
+                  <el-select
+                    style="width: 100%"
+                    v-model="tableForm.englin"
+                    class="input-shadow"
+                    filterable
+                    default-first-option
+                    clearable
+                    placeholder="主动采集"
+                  >
+                    <el-option
+                      v-for="item in tableOptionser"
+                      :key="item.v ? item.v : item.planDepartureApt"
+                      :label="item.k ? item.k : item.planDepartureApt"
+                      :value="item.v ? item.v : item.planDepartureApt"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-col>
+                <el-col :span="10">
+                  <el-select
+                    style="width: 100%"
+                    v-model="tableForm.two"
+                    class="input-shadow"
+                    filterable
+                    default-first-option
+                    clearable
+                    placeholder="异步"
+                  >
+                    <el-option
+                      v-for="item in tableOptionser"
+                      :key="item.v ? item.v : item.planDepartureApt"
+                      :label="item.k ? item.k : item.planDepartureApt"
+                      :value="item.v ? item.v : item.planDepartureApt"
+                    >
+                    </el-option>
+                  </el-select> </el-col
+              ></el-row>
+            </el-form-item>
+          </div>
+          <div class="outersurface pd30">
+            <el-form-item label="启动时间" size="default">
+              <el-date-picker
+                v-model="tableForm.time"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </div>
+          <div class="outersurface pd30">
+            <el-form-item label="停止时间" size="default">
+              <el-date-picker
+                v-model="tableForm.time1"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </div>
+          <div class="outersurface">
+            <el-form-item label="前序输出编号" size="default">
+              <el-input
+                v-model="tableForm.three"
+                placeholder="请输入前序输出编号"
+              />
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="wrap_config">
+      <Minheader :is-statuser="true">
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">主动采集配置</div>
+          </div>
+        </template></Minheader
+      >
+      <div class="diacont">
+        <el-form :model="tableForms" class="w100 fw">
+          <div class="outersurface pd30">
+            <el-form-item label="数据源" size="default">
+              <el-select
+                style="width: 100%"
+                v-model="tableForms.name"
+                class="input-shadow"
+                filterable
+                default-first-option
+                clearable
+                placeholder="请选择数据源"
+              >
+                <el-option
+                  v-for="item in tableOptionser"
+                  :key="item.v ? item.v : item.planDepartureApt"
+                  :label="item.k ? item.k : item.planDepartureApt"
+                  :value="item.v ? item.v : item.planDepartureApt"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="outersurfaces">
+            <el-form-item label="详细位置" size="default">
+              <el-input
+                v-model="tableForms.china"
+                placeholder="请输入详细位置"
+              />
+            </el-form-item>
+          </div>
+          <div class="outersurface pd30">
+            <el-form-item label="计划启动时间" size="default">
+              <el-date-picker
+                v-model="tableForm.time"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </div>
+          <div class="outersurface pd30">
+            <el-form-item label="计划停止时间" size="default">
+              <el-date-picker
+                v-model="tableForm.time1"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </div>
+          <div class="outersurface pd30">
+            <el-form-item label="错误重试" size="default">
+              <el-input
+                v-model="tableForms.englin"
+                placeholder="请输入错误重试次数"
+              />
+            </el-form-item>
+          </div>
+          <div class="outersurface pd30">
+            <el-form-item label="循环次数" size="default">
+              <el-input v-model="tableForms.two" placeholder="请输入循环次数" />
+            </el-form-item>
+          </div>
+          <div class="outersurface">
+            <el-form-item label="循环频率" size="default">
+              <el-input
+                v-model="tableForms.three"
+                placeholder="请输入错误重试次数"
+              />
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="wrap_rece">
+      <Minheader :is-statuser="true">
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">统一接收</div>
+          </div>
+        </template></Minheader
+      >
+      <div class="diacont">
+        <el-form :model="tableFormer" class="w100 fw">
+          <div class="outersurface50 pd30">
+            <el-form-item label="生命周期编号" size="default">
+              <el-input
+                v-model="tableFormer.name"
+                placeholder="请输入生命周期编号"
+              />
+            </el-form-item>
+          </div>
+          <div class="outersurface50 pd30"></div>
+          <div class="outersurface50 pd30">
+            <el-form-item label="生命周期编号" size="default">
+              <el-input
+                type="textarea"
+                v-model="tableFormer.china"
+                placeholder="请输入生命周期编号"
+              />
+            </el-form-item>
+          </div>
+          <div class="outersurface50">
+            <el-form-item label="生命周期编号" size="default">
+              <el-input
+                type="textarea"
+                v-model="tableFormer.china"
+                placeholder="请输入生命周期编号"
+              />
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="wrap_out">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <Minheader :is-statuser="true" :is-auth="true">
+            <template #header>
+              <div class="status flex-wrap">
+                <div class="manageTitle">输出</div>
+              </div>
+            </template></Minheader
+          >
+          <div class="app-containers">
+            <DataTable
+              :tableHeader="state.list"
+              :tableData="tableData"
+              :tableBtnGroup="tableBtnGroup"
+              :tableProperty="{ rowKey: 'ID' }"
+              @btnClick="btnClick"
+            />
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <Minheader :is-statuser="true">
+            <template #header>
+              <div class="status flex-wrap">
+                <div class="manageTitle">日志记录</div>
+              </div>
+            </template></Minheader
+          >
+          <div class="diacont">
+            <el-form :model="recordForme" class="w100 fw">
+              <div class="outersurface50 pd30">
+                <el-form-item label="日志存储数据源" size="default">
+                  <el-select
+                    style="width: 100%"
+                    v-model="recordForme.name"
+                    class="input-shadow"
+                    filterable
+                    default-first-option
+                    clearable
+                    placeholder="请选择数据源"
+                  >
+                    <el-option
+                      v-for="item in tableOptionser"
+                      :key="item.v ? item.v : item.planDepartureApt"
+                      :label="item.k ? item.k : item.planDepartureApt"
+                      :value="item.v ? item.v : item.planDepartureApt"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </div>
+              <div class="outersurface50 pd30">
+                <el-form-item label="详细位置" size="default">
+                  <el-input
+                    v-model="recordForme.china"
+                    placeholder="请输入详细位置"
+                  />
+                </el-form-item>
+              </div>
+              <div class="outersurface100 pd30">
+                <el-form-item label="日志输出条件" size="default">
+                  <el-input
+                    :autosize="{ minRows: 5, maxRows: 5 }"
+                    type="textarea"
+                    v-model="recordForme.englin"
+                    placeholder="请输入日志输出条件"
+                  />
+                </el-form-item>
+              </div>
+            </el-form>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <Dialog
+      width="852px"
+      :flag="flag"
+      :type="type"
+      :msgTitle="msgTitle"
+      @resetForm="resetForm"
+      @delRest="delRest"
+    >
+      <div class="logDialog">
+        <div class="interfaceLog">
+          <div class="interfaceLog_head flex">
+            <div class="interfaceLog_head_time flex-wrap">
+              <div class="interfaceLog_head_time_start r12">
+                <el-date-picker
+                  v-model="timeStart"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  size="default"
+                  @change="timeStartChange"
+                  type="datetime"
+                  placeholder="选择开始日期时间"
+                  default-time="00:00:00"
+                >
+                </el-date-picker>
+              </div>
+              <div class="interfaceLog_head_time_end">
+                <el-date-picker
+                  v-model="timeEnd"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  size="default"
+                  @change="timeEndChange"
+                  type="datetime"
+                  placeholder="选择结束日期时间"
+                  default-time="00:00:00"
+                >
+                </el-date-picker>
+              </div>
+            </div>
+            <div class="flex">
+              <el-input
+                placeholder="请输入搜索关键词"
+                size="default"
+                v-model="input"
+                clearable
+              >
+              </el-input>
+              <el-button
+                size="mini"
+                style="margin-left: 16px"
+                @click="handleOk"
+                type="primary"
+                >查询</el-button
+              >
+            </div>
+          </div>
+          <div
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            stripe
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+            class="interfaceLog_content flex-wrap"
+          >
+            <el-table
+              :data="tableData"
+              class="table"
+              height="500px"
+              border
+              style="width: 100%; margin-top: 20px"
+            >
+              <el-table-column prop="logTime" width="200" label="时间">
+              </el-table-column>
+              <el-table-column prop="logType" width="100" label="类型">
+              </el-table-column>
+              <el-table-column width="200" label="位置">
+                <template #default="scope">
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    :content="scope.row.logPositionID"
+                    placement="top"
+                  >
+                    <div class="logPositionID">
+                      {{ scope.row.logPositionID }}
+                    </div>
+                  </el-tooltip>
+                </template>
+              </el-table-column>
+              <el-table-column width="100" prop="resultCode" label="成败">
+              </el-table-column>
+              <el-table-column label="详情">
+                <template #default="scope">
+                  <div class="flex-wrap">
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      :content="scope.row.resultDetails"
+                      placement="top"
+                    >
+                      <span :id="'logId' + scope.$index" class="logDetails">{{
+                        scope.row.resultDetails
+                      }}</span>
+                    </el-tooltip>
+                    <el-button
+                      @click="logCopy(scope.$index)"
+                      style="margin-left: 10px"
+                      type="text"
+                      >复制</el-button
+                    >
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+    <Dialog
+      width="852px"
+      :flag="flaglod"
+      :type="typelod"
+      :msgTitle="msgTitlelod"
+      @resetForm="resetlodForm"
+      @delRest="dellodRest"
+    >
+      <div class="logcont">
+        <Minheader :is-auth="true" :is-statuser="true">
+          <template #header>
+            <div class="status flex-wrap">
+              <div class="manageTitle">插槽列表</div>
+            </div>
+          </template></Minheader
+        >
+      </div>
+      <div style="padding: 0 24px 24px 24px" class="dialog-content">
+        <DataTable
+          :tableHeader="states.list"
+          :tableData="tableDatas"
+          :tableBtnGroup="tableBtnGroup"
+          :tableProperty="{ rowKey: 'ID' }"
+          @btnClick="btnClick"
+        />
+      </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";
+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 tableData = ref([
+  {
+    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: "测试",
+  },
+]);
+//表头
+const state = reactive({
+  list: [
+    { label: "输出数据源", key: "name" },
+    { label: "详细位置", key: "china" },
+    { label: "数据结构", key: "englin" },
+    { label: "输出条件", key: "two" },
+  ],
+  listLoading: true,
+});
+//表头
+const states = reactive({
+  list: [
+    { label: "插槽名称", key: "name" },
+    { label: "插槽地址", key: "china" },
+  ],
+  listLoading: true,
+});
+const tableBtnGroup = ref([
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: 2,
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: 3,
+  },
+]);
+const tableForm = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  time: "",
+  time1: "",
+  three: "",
+  text: "",
+}); //服务id
+const tableForms = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  time: "",
+  time1: "",
+  three: "",
+  text: "",
+}); //主动采集配置
+const tableFormer = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  time: "",
+  time1: "",
+  three: "",
+  text: "",
+}); //统一接收
+const recordForme = reactive({
+  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;
+  } else if (param === 3) {
+    msgTitle.value = "删除";
+    flag.value = true;
+    type.value = "del";
+  } else if (param === 4) {
+  }
+};
+//查看日志
+const addJournalForm = () => {
+  flag.value = true;
+};
+//取消
+const resetForm = () => {
+  flag.value = false;
+};
+//删除
+const delRest = () => {
+  flag.value = false;
+};
+//开启插槽
+const addslotForm = () => {
+  flaglod.value = true;
+};
+//取消插槽
+const resetlodForm = () => {
+  flaglod.value = false;
+};
+//删除插槽
+const dellodRest = () => {
+  flaglod.value = false;
+};
+//时间限制
+const timeStartChange = (val) => {
+  if (val >= timeEnd) {
+    timeStart.value = "";
+  }
+};
+//时间限制
+const timeEndChange = (val) => {
+  if (val <= timeEnd) {
+    timeEnd.value = "";
+  }
+};
+//复制
+const logCopy = (index) => {
+  const ele = document.getElementById("logId" + index);
+  const val = ele.innerText;
+  try {
+    const input = document.createElement("input");
+    //将input的值设置为需要复制的内容
+    input.value = val;
+    //添加input标签
+    document.body.appendChild(input);
+    //选中input标签
+    input.select();
+    //执行复制
+    document.execCommand("copy");
+    //移除input标签
+    document.body.removeChild(input);
+    // this.$message.success("复制成功");
+  } catch (e) {
+    // this.$message.error("复制失败");
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.airportInfo {
+  height: 100%;
+  .wrap_id {
+    height: 140px;
+    background: #ffffff;
+    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    margin-bottom: 16px;
+    padding: 24px;
+  }
+  .wrap_config {
+    height: 196px;
+    background: #ffffff;
+    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    margin-bottom: 16px;
+    padding: 24px;
+  }
+  .wrap_rece {
+    height: 192px;
+    background: #ffffff;
+    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    margin-bottom: 16px;
+    padding: 24px;
+  }
+  .wrap_out {
+    height: 250px;
+    background: #ffffff;
+    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    padding: 24px;
+    ::v-deep .el-form-item__label {
+      width: 110px;
+    }
+  }
+  .outersurface {
+    width: 20%;
+  }
+  .outersurfaces {
+    width: 80%;
+  }
+  .outersurface50 {
+    width: 50%;
+  }
+  .outersurface100 {
+    width: 100%;
+  }
+  .diacont {
+    width: 100%;
+    .w100 {
+      width: 100%;
+    }
+    .fw {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .pd30 {
+      padding: 0 30px 0 0;
+    }
+  }
+}
+.typecond {
+  font-size: 20px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #53b074;
+}
+.app-containers {
+  height: 170px;
+}
+::v-deep .el-form-item__content {
+  display: flex;
+}
+::v-deep .el-form-item__label {
+  width: 100px;
+}
+.interfaceLog {
+  padding: 0 24px 24px 24px;
+}
+.logcont {
+  padding: 0 24px 24px 24px;
+}
+</style>