feat： project Topo 添加 noData

nezha-fronted/src/assets/css/common.scss

@@ -162,3 +162,10 @@
     padding-bottom: 10px;
   }
 }
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}

nezha-fronted/src/components/common/project/topology.scss

@@ -545,3 +545,11 @@
 .selpop {
   cursor: pointer;
 }
+.topo-noData /deep/ .icon{
+  width: 5rem;
+  height: 5rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+}

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -228,6 +228,14 @@
             >
               <topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
             </div>
+            <div v-show="showNoData" class="topo-noData">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#nz-icon-Projectkong"></use>
+              </svg>
+              <div style="text-align: center;font-size: 16px;
+color: #333333;
+font-weight: 400;">No data</div>
+            </div>
           </div>
           <!--endpoint-->
           <transition name="right-box">
@@ -393,6 +401,7 @@ export default {
         bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
         bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
       ],
+      showNoData: false,
       topologyInfo: {
         fontSize: 14,
         align: 'left',
@@ -771,6 +780,11 @@ export default {
         }
         this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
           let data = res.data.topo
+          if (!res.data.topo || !res.data.topo.pens.length) {
+            this.showNoData = true
+          } else {
+            this.showNoData = false
+          }
           if (this.isPreview) {
             data = this.previewData
           }
@@ -1816,6 +1830,7 @@ export default {
 
     editTopology (val) {
       this.editTopologyFlag = true
+      this.showNoData = false
       this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
       this.$store.commit('setShowTopoScreen', true)
       setTimeout(() => {

nezha-fronted/src/main.js

@@ -3,6 +3,7 @@ import 'element-ui/lib/theme-chalk/index.css'
 import 'xterm/dist/xterm.css'
 import '@/assets/stylus/main.scss'
 import '@/assets/css/main.scss'
+import '@/assets/css/font/iconfont.js'
 import ElementUI from 'element-ui'
 import i18n from './components/common/i18n'