NEZ-1433 feat:chart-endpointInfo 组件开发

nezha-fronted/src/components/chart/chart.vue

@@ -196,7 +196,7 @@ export default {
   },
   computed: {
     isNoData () {
-      return lodash.isEmpty(this.chartData) && ['text', 'url'].indexOf(this.chartInfo.type) === -1
+      return lodash.isEmpty(this.chartData) && ['text', 'url', 'assetInfo', 'endpointInfo'].indexOf(this.chartInfo.type) === -1
     },
     chartOption () {
       if (this.customChartOption) {

nezha-fronted/src/components/chart/chart/chartAssetInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <chart-detail v-if="chartInfo.type === 'assetInfo'" :chart-info="chartInfo" :chart-detail="chartData"></chart-detail>
+  <chart-detail :chart-info="chartInfo" :chart-detail="chartData"></chart-detail>
 </template>
 
 <script>
@@ -17,21 +17,6 @@ export default {
     return {
 
     }
-  },
-  methods: {
-
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler (n) {
-        console.log(n)
-      }
-    }
   }
 }
 </script>
-
-<style scoped>
-
-</style>

nezha-fronted/src/components/chart/chart/chartEndpointInfo.vue

@@ -1,12 +1,16 @@
 <template>
-  <chart-detail v-if="chartInfo === 'endpointInfo'" :chart-info="chartInfo" :chart-detail="chartData"></chart-detail>
+  <chart-detail :chart-info="chartInfo" :chart-detail="chartData"></chart-detail>
 </template>
 
 <script>
+import chartDetail from '@/components/chart/chartDetail'
 export default {
   name: 'chartEndpointInfo',
+  components: {
+    chartDetail
+  },
   props: {
-    chartData: Array,
+    chartData: Object,
     chartInfo: Object
   },
   data () {
@@ -16,7 +20,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>

nezha-fronted/src/components/chart/chartDetail.vue

@@ -1,32 +1,33 @@
 <template>
   <div ref="chartDetail" class="chart-detail">
-    <div class="chart-detail-title" v-if="chartInfo.type === 'assetInfo'">{{$t('panel.assetInfo')}}</div>
-    <div class="chart-detail-title" v-else>{{$t('panel.endpointInfo')}}</div>
+<!--    <div class="chart-detail-title" v-if="chartInfo.type === 'assetInfo'">{{$t('project.chart.assetInfo')}}</div>-->
+<!--    <div class="chart-detail-title" v-else-if="chartInfo.type === 'endpointInfo'">{{$t('project.chart.endpointInfo')}}</div>-->
     <div class="basic-info">
       <div class="basic-info-title" @click="hideElement">
         <span><i :class="{'nz-icon nz-icon-caret-right': showBasicInfo,'nz-icon nz-icon-caret-bottom': !showBasicInfo}"></i></span>
-        <span>{{$t('panel.basicInfo')}}</span>
+        <span>Basic info</span>
       </div>
       <el-collapse-transition>
+        <!--asset info-->
         <div v-if="!showBasicInfo && chartInfo.type === 'assetInfo'" class="basic-info-table">
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.id')}}</div>
+            <div class="basic-info-table-title">ID</div>
             <div class="basic-info-table-value">{{chartDetail ? chartDetail.id : '--'}}</div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.name')}}</div>
+            <div class="basic-info-table-title">{{$t('overall.name')}}</div>
             <div class="basic-info-table-value">{{chartDetail? chartDetail.name : '--' }}</div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.manageIp')}}</div>
+            <div class="basic-info-table-title">{{$t('overall.manageIp')}}</div>
             <div class="basic-info-table-value">{{chartDetail ? chartDetail.manageIp : '--'}}</div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.type')}}</div>
+            <div class="basic-info-table-title">{{$t('overall.type')}}</div>
             <div class="basic-info-table-value">{{chartDetail.type ? chartDetail.type.name : '--'}}</div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.state')}}</div>
+            <div class="basic-info-table-title">{{$t('overall.state')}}</div>
             <div class="basic-info-table-value">{{chartDetail.state ? chartDetail.state.name : '--'}}</div>
           </div>
           <div class="basic-info-table-list">
@@ -37,24 +38,24 @@
             </div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.dc')}}</div>
+            <div class="basic-info-table-title">{{$t('overall.dc')}}</div>
             <div class="basic-info-table-value">{{chartDetail.dc ? chartDetail.dc.name : '--'}}</div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.cabinet')}}</div>
+            <div class="basic-info-table-title">{{$t('overall.cabinet')}}</div>
             <div class="basic-info-table-value">{{chartDetail.cabinet ? chartDetail.cabinet.name : '--'}}</div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.brand')}}</div>
+            <div class="basic-info-table-title">{{$t('overall.brand')}}</div>
             <div class="basic-info-table-value">{{chartDetail.brand ? chartDetail.brand.name : '--'}}</div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.model')}}</div>
+            <div class="basic-info-table-title">{{$t('overall.model')}}</div>
             <div class="basic-info-table-value">{{chartDetail.model ? chartDetail.model.name : '--'}}</div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.label')}}</div>
-            <div class="basic-info-table-value" style="display:flex">
+            <div class="basic-info-table-title">{{$t('overall.labels')}}</div>
+            <div class="basic-info-table-value" style="display:flex" v-if="chartDetail.fields.length > 0">
               <div v-for="item in chartDetail.fields" :key="item.id">
                 <div class="label-table">
                   <div class="label-table-name">{{item.name}}</div>
@@ -62,6 +63,7 @@
                 </div>
               </div>
             </div>
+            <div v-else class="basic-info-table-value">--</div>
           </div>
           <div class="basic-info-table-list">
             <div class="basic-info-table-title">{{ $t('asset') }}</div>
@@ -78,73 +80,68 @@
             </div>
           </div>
         </div>
-        <div v-else class="basic-info-table">
+        <!--Endpoint info-->
+        <div v-else-if="!showBasicInfo && chartInfo.type === 'endpointInfo'" class="basic-info-table">
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.id')}}</div>
+            <div class="basic-info-table-title">ID</div>
             <div class="basic-info-table-value">{{chartDetail ? chartDetail.id : '--'}}</div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.name')}}</div>
+            <div class="basic-info-table-title">{{$t('overall.name')}}</div>
             <div class="basic-info-table-value">{{chartDetail? chartDetail.name : '--' }}</div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.manageIp')}}</div>
-            <div class="basic-info-table-value">{{chartDetail ? chartDetail.manageIp : '--'}}</div>
+            <div class="basic-info-table-title">{{$t('overall.project')}}</div>
+            <div class="basic-info-table-value">{{chartDetail && chartDetail.project ? chartDetail.project.name : '--' }}</div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.type')}}</div>
-            <div class="basic-info-table-value">{{chartDetail.type ? chartDetail.type.name : '--'}}</div>
-          </div>
-          <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.state')}}</div>
-            <div class="basic-info-table-value">{{chartDetail.state ? chartDetail.state.name : '--'}}</div>
-          </div>
-          <div class="basic-info-table-list">
-            <div class="basic-info-table-title">Ping</div>
+            <div class="basic-info-table-title">{{$t('overall.module')}}</div>
             <div class="basic-info-table-value">
-              <div :class="{'green-bg': chartDetail && chartDetail.pingInfo && chartDetail.pingInfo.status === 1,'red-bg': chartDetail && chartDetail.pingInfo && chartDetail.pingInfo.status === 0}" class="active-icon"></div>
-              <span>{{chartDetail && chartDetail.pingInfo && chartDetail.pingInfo.rtt ? chartDetail.pingInfo.rtt + 'ms':''}}</span>
+              <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;
+              <span>{{chartDetail.module && chartDetail.module ? chartDetail.module.name : '--'}}</span>
             </div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.dc')}}</div>
-            <div class="basic-info-table-value">{{chartDetail.dc ? chartDetail.dc.name : '--'}}</div>
-          </div>
-          <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.cabinet')}}</div>
-            <div class="basic-info-table-value">{{chartDetail.cabinet ? chartDetail.cabinet.name : '--'}}</div>
-          </div>
-          <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.brand')}}</div>
-            <div class="basic-info-table-value">{{chartDetail.brand ? chartDetail.brand.name : '--'}}</div>
-          </div>
-          <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.model')}}</div>
-            <div class="basic-info-table-value">{{chartDetail.model ? chartDetail.model.name : '--'}}</div>
-          </div>
-          <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{$t('panel.asset.label')}}</div>
-            <div class="basic-info-table-value" style="display:flex">
-              <div v-for="item in chartDetail.fields" :key="item.id">
-                <div class="label-table">
-                  <div class="label-table-name">{{item.name}}</div>
-                  <span class="label-table-value">{{item.value[0]}}</span>
-                </div>
-              </div>
+            <div class="basic-info-table-title">{{$t('overall.asset')}}</div>
+            <div class="basic-info-table-value">
+              <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>&nbsp;
+              <span>{{chartDetail && chartDetail.asset ? chartDetail.asset.name : '--'}}</span>
             </div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">{{ $t('asset') }}</div>
+            <div class="basic-info-table-title">{{$t('overall.alert')}}</div>
             <div class="basic-info-table-value">
               <i :class="chartDetail && chartDetail.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;
-              <span>{{chartDetail ? chartDetail.alertNum : 0}}</span>
+              <span>{{chartDetail && chartDetail.alertNum ? chartDetail.alertNum : 0}}</span>
             </div>
           </div>
           <div class="basic-info-table-list">
-            <div class="basic-info-table-title">Endpoint</div>
+            <div class="basic-info-table-title">{{$t('overall.state')}}</div>
             <div class="basic-info-table-value">
-              <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
-              <span>{{chartDetail ? chartDetail.endpointNum : 0}}</span>
+              <span style="width: auto">
+              <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics active" /> {{$t('project.endpoint.metrics')}} </span>
+              <span v-if="chartDetail && chartDetail.configs[0].state === 0">
+                <span class="active-icon red-bg inline-block"></span>
+              </span>
+              <span v-else-if="chartDetail && chartDetail.configs[0].state === 1">
+                <span class="active-icon green-bg inline-block"></span>
+              </span>
+              <span v-else-if="chartDetail && chartDetail.configs[0].state">
+                <span class="active-icon gray-bg inline-block"></span>
+              </span>
+            </span>
+              <span style="width: auto">
+                <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs active" /> {{$t('project.endpoint.logs')}} </span>
+                <span v-if="chartDetail && chartDetail.configs[1].state === 0">
+                  <span class="active-icon red-bg inline-block"></span>
+                </span>
+                <span v-else-if="chartDetail && chartDetail.configs[1].state === 1">
+                  <span class="active-icon green-bg inline-block"></span>
+                </span>
+                <span v-else-if="chartDetail && chartDetail.configs[1].state">
+                  <span class="active-icon gray-bg inline-block"></span>
+                </span>
+              </span>
             </div>
           </div>
         </div>

nezha-fronted/src/components/chart/chartList.vue

@@ -45,6 +45,7 @@
           @edit-chart="$emit('edit-chart', item)"
           :chart-info="item"
           :time-range="timeRange"
+          :chart-detail-info="chartDetailInfo"
           @showFullscreen="showFullscreen"
         ></panel-chart>
       </grid-item>
@@ -92,8 +93,8 @@ export default {
   props: {
     // TODO isModel
     from: { type: String },
-    panelId: { },
-    obj: Object,
+    panelId: {},
+    chartDetailInfo: Object,
     timeRange: Array, // 时间范围
     panelLock: { type: Boolean, default: true },
     isGroup: { type: Boolean, default: false },
@@ -282,19 +283,23 @@ export default {
         this.gridLayoutLoading = true
         this.noData = !n || n.length < 1
         const tempList = n.map(item => {
-          const param = item.param
+          let param = ''
+          let height = ''
+          if (item.param) {
+            param = item.param
             // try {
             //   param = JSON.parse(item.param)
             // } catch (e) {
             //   console.info(e)
             // }
-          const height = (item.type === 'group' && item.param.collapse) ? this.headerH : item.height
+            height = (item.type === 'group' && item.param.collapse) ? this.headerH : item.height
             param.showHeader = true
+          }
           return {
             ...item,
             i: item.id,
             w: item.span,
-            h: height,
+            h: height || 4,
             x: item.x || 0,
             y: item.y || 0,
             param

nezha-fronted/src/components/chart/panelChart.vue

@@ -45,7 +45,8 @@ export default {
     chartInfo: Object, // 其中的param json串已转化为对象
     timeRange: Array, // 时间范围
     isFullscreen: Boolean,
-    panelLock: Boolean
+    panelLock: Boolean,
+    chartDetailInfo: Object
   },
   data () {
     return {
@@ -94,7 +95,20 @@ export default {
     query (elements, startTime, endTime, step) {
       try {
         switch (this.chartInfo.datasource) {
-          case 'metrics':
+          case 'metrics': {
+            if (this.chartInfo.type === 'assetInfo') {
+              console.log(this.chartDetailInfo)
+              this.$get('asset/asset/' + this.chartDetailInfo.id).then(res => {
+                console.log(res)
+                this.chartData = res.data
+              })
+            }
+            if (this.chartInfo.type === 'endpointInfo') {
+              this.$get('monitor/endpoint/' + this.chartDetailInfo.id).then(res => {
+                this.chartData = res.data
+              })
+            }
+          }
           case 'logs': {
             let urlPre = ''
             if (this.chartInfo.datasource === 'metrics') {
@@ -141,7 +155,7 @@ export default {
             break
           }
           case 'system': {
-            console.log(this.chartInfo)
+            console.log(this.chartInfo.type)
             const params = {
               q: '',
               stat: startTime,
@@ -180,20 +194,6 @@ export default {
             if (this.chartInfo.type === 'map') {
               this.chartData = ['map']
             }
-            if (this.chartInfo.type === 'assetInfo') {
-              this.$get('asset/asset/' + 545).then(res => {
-                if (res.code === 200) {
-                  this.chartData = res.data
-                }
-              })
-            }
-            if (this.chartInfo.type === 'endpointInfo') {
-              this.$get('monitor/endpoint/' + 1).then(res => {
-                if (res.code === 200) {
-                  this.chartData = res.data
-                }
-              })
-            }
             break
           }
         }

nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue

@@ -94,21 +94,30 @@
           </button>
         </div>
       </template>
-      <template v-slot>
-        <div class="panel">
       <!--图表-->
-          <div class="table-list" id="tableList">
-            <div ref="dashboardScrollbar" id="dashboardScrollbar" style="height: 100%; overflow: auto;">
-              <div class="box-content">
-                <chart-list :nowTimeType='nowTimeType' :draggable="draggable" :from="from" :is-model="from === fromRoute.model" :obj="obj" @on-edit-chart="editChart"
-                            @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock" :panel-data-list="panelDataList"
-                            @on-add-group-item-chart="addGroupItem"></chart-list>
+      <div id="tableList" class="table-list">
+        <div id="dashboardScrollbar" ref="dashboardScrollbar" class="table-list-box">
+          <div class="box-content" v-loading="chartListLoading">
+            <chart-list
+              ref="chartList"
+              name="panel"
+              :panelId="showPanel.id"
+              :class="{'show-top':showTopBtn}"
+              :data-list="dataList"
+              :nowTimeType="nowTimeType"
+              :from="fromRoute.panel"
+              :panel-lock="panelLock"
+              :time-range="searchTime"
+              @edit-chart="editChart"
+              @on-refresh-time="refreshTime"
+              @on-remove-chart="delChart"
+              @on-add-group-item-chart="addGroupItem"
+              :loading="chartListLoading"
+              :chart-detail-info="chartDetailInfo"
+            ></chart-list>
           </div>
         </div>
       </div>
-          <button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
-        </div>
-      </template>
     </nz-bottom-data-list>
     <transition name="right-box">
       <chart-box v-if="rightBox.chart.show" ref="addChartModal" :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
@@ -121,7 +130,7 @@
 
 <script>
 import chartBox from '../../../page/dashboard/chartBox'
-import chartList from '../../../charts/chart-list'
+import chartList from '@/components/chart/chartList'
 import bus from '../../../../libs/bus'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
@@ -148,6 +157,7 @@ export default {
       panelLock: true,
       showTopBtn: false, // top按钮
       visible: false,
+      chartListLoading: true,
       rightBox: { // 面板弹出框相关
         chart: {
           show: false
@@ -222,7 +232,8 @@ export default {
       scrollbarWrap: null,
       panelDataList: [],
       batchDeleteObjs: [],
-      nowTimeType: {}
+      nowTimeType: {},
+      chartDetailInfo: {}
     }
   },
   components: {
@@ -336,17 +347,29 @@ export default {
     },
     // 获取数据,用在子页面
     getData (params) {
+      if (!this.hasButton('panel_view')) {
+        return
+      }
+      this.chartListLoading = true
       if (params.start_time === '' || params.end_time === '') {
         const now = bus.getTimezontDateRange()
         const endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss')
         const startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss')
         params.start_time = startTimeTmp
         params.end_time = endTimeTmp
-        params.from = this.from
       }
-      if (this.$refs.chartList) {
-        this.$refs.chartList.initData(params)
+      this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.chartListLoading = false
+          this.dataList = response.data.list.map(item => {
+            return {
+              ...item,
+              hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
+              loaded: false
             }
+          })
+        }
+      })
     },
 
     /* 图表相关操作--end */
@@ -596,6 +619,7 @@ export default {
               this.searchLabel.assetIds = n.id
             }
           }
+          this.chartDetailInfo = n
         }, 500)
       }
     }

nezha-fronted/src/components/common/login.vue

@@ -153,9 +153,9 @@ export default {
   methods: {
     ...mapActions(['loginSuccess']),
     login () {
-      if (this.loading || !this.license.valid || !this.license.token) {
-        return
-      }
+      // if (this.loading || !this.license.valid || !this.license.token) {
+      //   return
+      // }
       if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
         this.loading = true
         this.$post('/sys/login', this.loginData).then(res => {