feat：endpoint 根据state 显示相关的模块 是否开启关闭

nezha-fronted/src/components/common/language/en.js

@@ -250,7 +250,7 @@ const en = {
             label: 'Text'
           },
           group: {
-            label: 'group'
+            label: 'Group'
           }
         },
         statisticsVal: {

nezha-fronted/src/components/common/table/nzDataList.vue

@@ -6,7 +6,7 @@
       <div class="main-modal"></div>
       <div class="main-container">
         <div v-show="bottomBox.mainResizeShow" class="top-tools">
-          <div class="top-tool-left" style="width: 300px">
+          <div class="top-tool-left" style="min-width: 300px">
             <slot name="top-tool-left"></slot>
           </div>
           <div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-right">

nezha-fronted/src/components/common/table/settings/chartTmplTable.vue

@@ -34,7 +34,9 @@
       </template>
       <template slot-scope="scope" :column="item">
         <span v-if="item.prop==='varType'">{{scope.row[item.prop]===1?'Asset':'endpoint'}}</span>
-        <span v-else-if="item.prop==='type'" :class="typeIcon(scope.row)">{{scope.row[item.prop]}}</span>
+        <span v-else-if="item.prop==='type'" :class="typeIcon(scope.row)">
+        {{chartTypeList.find(title=>title.id == scope.row[item.prop]).name}}
+        </span>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
         <template v-else>-</template>
       </template>
@@ -90,7 +92,50 @@ export default {
           prop: 'remark',
           show: true
         }
-      ]
+      ],
+      chartTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
+        },
+        {
+          id: 'stackArea',
+          name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
+        },
+        {
+          id: 'bar',
+          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
+        },
+        {
+          id: 'singleStat',
+          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
+        },
+        {
+          id: 'pie',
+          name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
+        },
+        {
+          id: 'table',
+          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
+        },
+        {
+          id: 'alertList',
+          name: this.$t('dashboard.panel.chartForm.typeVal.alertList.label')
+        },
+        {
+          id: 'text',
+          name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
+        },
+        {
+          id: 'url',
+          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
+        },
+        {
+          id: 'group',
+          name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
+        }
+
+      ],
     }
   },
   methods: {

nezha-fronted/src/components/common/table/settings/endpointTable.vue

@@ -66,7 +66,22 @@
           </el-tooltip>
         </template>
         <template v-else-if="item.prop === 'state'">
-          {{scope.row[item.prop]}}
+          <el-popover placement="right" trigger="hover" width="200" :popper-class="''" :disabled="scope.row[item.prop]>1">
+            <div>
+              <div v-html="suspendedStr(scope.row[item.prop])"></div>
+            </div>
+            <div slot="reference" style="width: 100px">
+              <div v-if="scope.row[item.prop]===0">
+                <div class="active-icon red inline-block"></div> down
+              </div>
+              <div v-else-if="scope.row[item.prop]===1">
+                <div class="active-icon green inline-block"></div> up
+              </div>
+              <div v-else>
+                <div class="active-icon gray inline-block"></div> suspended
+              </div>
+            </div>
+          </el-popover>
         </template>
         <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
       </template>
@@ -157,6 +172,30 @@ export default {
       const creatDom = document.getElementById('creatDom')
       creatDom.parentNode.removeChild(creatDom)
       this.$message.success(this.$t('overall.copySuccess'))
+    },
+    suspendedStr (status) { // 10进制转为2进制 分别给对应的状态
+      const arr = status.toString(2).split('')
+      while (arr.length < 5) {
+        arr.unshift('0')
+      }
+      arr.pop()
+      let str = ''
+      arr.forEach((item, index) => {
+        if (index === 0) {
+          str += `<div>DC <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+        }
+        if (index === 1) {
+          str += `<div>ASSET <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+        }
+        if (index === 2) {
+          str += `<div>ENDPOINT <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+        }
+        if (index === 3) {
+          str += `<div>PROMETHEUS <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
+        }
+      })
+      console.log(arr, str)
+      return str
     }
   },
   computed: {}
@@ -190,6 +229,9 @@ export default {
   .endpoint-num, .alert-num{
     cursor: pointer;
   }
+  .inline-block{
+    display: inline-block;
+  }
 </style>
 <style>
   .endpointConfigsTips{

nezha-fronted/src/components/common/table/special/endpointQueryTab.vue

@@ -169,10 +169,13 @@ export default {
       }
     },
     getPanelData () { // 获取panel数据
-      this.$get('visual/panel?pageNo=1&pageSize=-1').then(response => {
-        if (response.code === 200) {
-          this.panelData = response.data.list
-        }
+      return new Promise((resolve, reject) => {
+        this.$get('visual/panel?pageNo=1&pageSize=-1').then(response => {
+          if (response.code === 200) {
+            this.panelData = response.data.list
+            resolve()
+          }
+        })
       })
     },
     handlerTableData (results) {
@@ -462,27 +465,29 @@ export default {
       this.graphShow = false
     },
     saveChart () { // 新增chart
-      const chart = {
-        title: '',
-        type: 'line',
-        span: 12,
-        height: '400',
-        unit: this.chartUnit,
-        param: {
-          url: '',
-          threshold: ''
-        },
-        elements: [],
-        panel: '',
-        sync: 0
-      }
-      for (let i = 0; i < this.batchDeleteObjs.length; i++) {
-        if (this.batchDeleteObjs[i] && this.batchDeleteObjs[i].element !== '') {
-          chart.elements.push({ chartId: '', expression: this.batchDeleteObjs[i].element, type: 'expert' })
+      this.getPanelData().then(()=>{
+        const chart = {
+          title: '',
+          type: 'line',
+          span: 12,
+          height: '400',
+          unit: this.chartUnit,
+          param: {
+            url: '',
+            threshold: ''
+          },
+          elements: [],
+          panel: '',
+          sync: 0
         }
-      }
-      this.chart = chart
-      this.rightBox.show = true
+        for (let i = 0; i < this.batchDeleteObjs.length; i++) {
+          if (this.batchDeleteObjs[i] && this.batchDeleteObjs[i].element !== '') {
+            chart.elements.push({ chartId: '', expression: this.batchDeleteObjs[i].element, type: 'expert' })
+          }
+        }
+        this.chart = chart
+        this.rightBox.show = true
+      })
     },
     createSuccess (type, response, param, panel) {
       this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
@@ -505,7 +510,7 @@ export default {
   computed: {
   },
   created () {
-    this.getPanelData()
+    // this.getPanelData()
   }
 }
 </script>