111

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

@@ -56,6 +56,16 @@ const HomeRoutes = {
       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/views/systemSettings/serviceManagement/index.vue

@@ -1,11 +1,4 @@
 <template>
-  <!-- <Minheader>
-    <template #header>
-      <div class="status flex-wrap">
-        <div class="manageTitle">服务拓扑</div>
-      </div>
-    </template></Minheader
-  > -->
   <div class="integration__cont__map__cont">
     <Minheader
       :is-statuser="true"

src/views/systemSettings/serviceManagement/serviceMonitor.vue

@@ -13,6 +13,7 @@
       >
       <div class="app-containers">
         <DataTable
+          BtnGroupWidth="300px"
           :is-Status="true"
           :tableHeader="state.list"
           :tableData="tableData"
@@ -22,67 +23,12 @@
         />
       </div>
       <Dialog
+        width="600px"
         :flag="flag"
         :type="type"
         :msgTitle="msgTitle"
-        @resetForm="resetForm"
         @delRest="delRest"
       >
-        <div class="diacont">
-          <el-form :model="tableForm">
-            <el-row :gutter="24">
-              <el-col>
-                <el-form-item label="航司名称" size="default">
-                  <el-input
-                    v-model="tableForm.name"
-                    placeholder="请输入航司名称"
-                  />
-                </el-form-item>
-              </el-col>
-              <el-col>
-                <el-form-item label="中文简称" size="default">
-                  <el-input
-                    v-model="tableForm.china"
-                    placeholder="请输入中文简称"
-                  />
-                </el-form-item>
-              </el-col>
-              <el-col>
-                <el-form-item label="英文简称" size="default">
-                  <el-input
-                    v-model="tableForm.englin"
-                    placeholder="请输入英文简称"
-                  />
-                </el-form-item>
-              </el-col>
-              <el-col>
-                <el-form-item label="航司二字码" size="default">
-                  <el-input
-                    v-model="tableForm.two"
-                    placeholder="请输入航司二字码"
-                  />
-                </el-form-item>
-              </el-col>
-              <el-col>
-                <el-form-item label="航司三字码" size="default">
-                  <el-input
-                    v-model="tableForm.three"
-                    placeholder="请输入航司三字码"
-                  />
-                </el-form-item>
-              </el-col>
-              <el-col>
-                <el-form-item label="备注" size="default">
-                  <el-input
-                    type="textarea"
-                    v-model="tableForm.text"
-                    placeholder="请输入备注"
-                  />
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-        </div>
       </Dialog>
     </div>
   </div>
@@ -91,6 +37,7 @@
 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>("新增服务管理"); //弹窗标题
@@ -107,50 +54,64 @@ const tableForm = reactive({
 const tableData = ref([
   {
     nodeState: "运行",
-    name: "中国国际航空",
-    china: "国航",
-    englin: "AIRCHINA",
-    two: "CA",
-    three: "CCA",
-    text: "CA国航",
+    name: "测试",
+    china: "测试",
+    englin: "测试",
+    two: "测试",
+    three: "测试",
+    text: "测试",
+    text1: "测试",
   },
   {
     nodeState: "运行",
-    name: "中国国际航空",
-    china: "国航",
-    englin: "AIRCHINA",
-    two: "CA",
-    three: "CCA",
-    text: "CA国航",
+    name: "测试",
+    china: "测试",
+    englin: "测试",
+    two: "测试",
+    three: "测试",
+    text: "测试",
+    text1: "测试",
   },
   {
     nodeState: "运行",
-    name: "中国国际航空",
-    china: "国航",
-    englin: "AIRCHINA",
-    two: "CA",
-    three: "CCA",
-    text: "CA国航",
+    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: "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",
@@ -158,11 +119,7 @@ const tableBtnGroup = ref([
   },
 ]);
 //新增
-const addForm = () => {
-  msgTitle.value = "新增服务管理";
-  flag.value = true;
-  type.value = "";
-};
+const addForm = () => {};
 //取消
 const resetForm = () => {
   flag.value = false;
@@ -188,20 +145,13 @@ const resetForm = () => {
 //编辑-删除
 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;
+    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" });
   }
 };
 //删除

src/views/systemSettings/serviceManagement/serviceMonitorEdit.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="airportInfo">
+    <div class="wrap_id">
+      <Minheader :is-Journal="true" :is-statuser="true">
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">当前服务ID：101</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 pd30">
+            <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"></div>
+    <div class="wrap_rece"></div>
+    <div class="wrap_out"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Minheader from "@/components/minheader/index.vue";
+const tableOptionser = ref<Array>([]); //下拉
+const tableForm = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  time: "",
+  time1: "",
+  three: "",
+  text: "",
+}); //服务id
+</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;
+  }
+  .wrap_rece {
+    height: 192px;
+    background: #ffffff;
+    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    margin-bottom: 16px;
+  }
+  .wrap_out {
+    height: 250px;
+    background: #ffffff;
+    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }
+  .outersurface {
+    width: 20%;
+  }
+  .diacont {
+    width: 100%;
+    .w100 {
+      width: 100%;
+    }
+    .fw {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .pd30 {
+      padding: 0 30px 0 0;
+    }
+  }
+}
+::v-deep .el-form-item__content {
+  display: flex;
+}
+</style>