1

src/components/minheader/index.vue

@@ -20,6 +20,15 @@
         <Search @clear="clear" @search="search" />
         <!-- <el-button type="danger" size="default" class="br L12">搜索</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 +90,15 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  //是否显示日志
+  isJournal: {
+    type: Boolean,
+    default: false,
+  },
 });
 //搜索内容
 const input = ref("");
-const emits = defineEmits(["addForm", "preserForm"]);
+const emits = defineEmits(["addForm", "preserForm", "addJournalForm"]);
 const addBbut = () => {
   emits("addForm");
 };
@@ -98,6 +112,10 @@ const clear = () => {
 const preserBtn = () => {
   emits("preserForm");
 };
+//日志
+const addJournal = () => {
+  emits("addJournalForm");
+};
 </script>
 <style lang="scss" scoped>
 .data-table-btn {

src/styles/index.scss

@@ -150,6 +150,9 @@
 .L12 {
   margin-left: 12px;
 }
+.P12 {
+  padding: 0px 12px 0 12px;
+}
 .wrap {
   height: 100%;
 }

src/views/systemSettings/serviceManagement/index.vue

@@ -1,7 +1,34 @@
 <template>
-  <div class="integration__cont__map__cont" ref="chartDom"></div>
+  <!-- <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" :is-Journal="true">
+      <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>
+  </div>
 </template>
 <script setup lang="ts">
+import Minheader from "@/components/minheader/index.vue";
 import { provide } from "vue";
 import * as echarts from "echarts";
 import img1 from "@/assets/integr/jiekou_blue.png";
@@ -154,18 +181,18 @@ const nodeDataList = ref([
     symbol: defaultImg,
     symbolSize: 30,
   },
-  {
-    name: "服务质量",
-    linkTargetName: "国航被动接收节点",
-    linkValue: " ",
-    coordConfig: {
-      level: "0",
-    },
-    value: [10, 10],
-    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: "首都机场边缘节点",
@@ -641,8 +668,36 @@ onMounted(() => {
 .integration__cont__map__cont {
   width: 100%;
   height: 100%;
-  background: #ffffff;
-  border-radius: 4px;
-  padding: 35px;
+  .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;
+    }
+  }
 }
 </style>