From 6a4435f7efd509ca092be07deaeeb59ad9833763 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 16 Jun 2020 10:38:26 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E8=B0=83=E6=95=B4chart-title=E5=AD=97?=
 =?UTF-8?q?=E4=BD=93=E3=80=81=E5=AE=8C=E5=96=84detail=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/charts/chart-alert-list.vue    |  8 ++---
 .../src/components/charts/chart-detail.vue    | 35 +++++++++++++++----
 .../src/components/charts/chart-list.vue      | 11 ++++--
 .../src/components/charts/chart.scss          | 12 +++----
 4 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue
index 3cc3af804..de06c99d9 100644
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -7,7 +7,7 @@
     <div class="resize-box resize-box-alert" ref="resizeBox">
       <div class="chart-alert-info" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
         <loading :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex" v-show="!isPreview">
+        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow, 'drag-disabled': !data.draggable}" :id="'chartTitle'+chartIndex" v-show="!isPreview">
           <el-popover
             v-if="isError"
             :close-delay=10
@@ -24,9 +24,9 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{chartInfo.title}}</span>
-              <span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
+              <span class="chart-title-icon" v-if="data.editable"><i class="el-icon-caret-bottom el-icon--right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
             </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
+            <ul slot="dropdown" v-show="dropdownMenuShow" v-if="data.editable" :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
               <li  @click="refreshChart"  class="el-dropdown-menu__item">
                 <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
               <li  @click="editChart"  class="el-dropdown-menu__item">
@@ -275,7 +275,7 @@
           ref="elementset"
         ></element-set>
       </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview"></span>
+      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview && data.resizable"></span>
     </div>
   </div>
 </template>
diff --git a/nezha-fronted/src/components/charts/chart-detail.vue b/nezha-fronted/src/components/charts/chart-detail.vue
index 68e03be39..672de18d3 100644
--- a/nezha-fronted/src/components/charts/chart-detail.vue
+++ b/nezha-fronted/src/components/charts/chart-detail.vue
@@ -5,7 +5,7 @@
   <div class="nz-chart-resize">
     <div class="resize-shadow" ref="resizeShadow"></div>
     <div class="resize-box" ref="resizeBox">
-      <div class="chart-container" :id="'chartContainerDiv' + chartIndex" @mouseenter="caretShow = true" @mouseleave="caretShow = false">
+      <div class="chart-container chart-detail" :id="'chartContainerDiv' + chartIndex" @mouseenter="caretShow = true" @mouseleave="caretShow = false">
         <loading :ref="'localLoading' + chartIndex"></loading>
         <div class="clearfix chart-title" :class="{'drag-disabled': !data.draggable}" :id="'chartTitle' + chartIndex">
           <el-popover
@@ -32,21 +32,32 @@
               <div class="chart-sub-content" :class="{'init-no-animation': index == 0, 'fold-500': show.indexOf(index) == -1, 'unfold-500': show.indexOf(index) > -1}">
                 <template v-for="(value, key, i) in item.data">
 
-                  <!-- endpoint-detail、asset的assetInfo的asset详情-->
-                  <div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset') && data.type == 'assetInfo' && assetKey[key]">
+                  <!-- endpoint-detail、asset、model的assetInfo的asset详情-->
+                  <div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset' || data.from == 'model') && data.type == 'assetInfo' && item.type == 'basic' && assetKey[key]">
                     <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
                       <span>{{assetKey[key]}}</span>
                       <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{assetKey[key]}}</div>
                     </div>
 
-                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`" :class="{'content-item-value-muti': Array.isArray(value) && value.length > 0}">
+                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
                       <span v-if="key == 'state'">{{value == 1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.outStock')}}</span>
                       <span v-else-if="key == 'alert'" class="as-button" :class="{'success': value <= 0, 'danger': value > 0}">{{value + ' ' + $t('overall.active')}}</span>
                       <template v-else-if="key == 'pingRtt'">
                         <div class="active-icon" :class="{'green': item.data.pingStatus == 1, 'red': item.data.pingStatus == 1 != 1}"></div>
                         <span>{{value ? value + 'ms' : ''}}</span>
                       </template>
-                      <template v-else-if="Array.isArray(value) && value.length>0">
+                      <span v-else-if="assetKey[key]">{{value ? value : "&nbsp;"}}</span>
+                    </div>
+                  </div>
+                  <!-- endpoint-detail、asset、model的assetInfo的feature-->
+                  <div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset' || data.from == 'model') && data.type == 'assetInfo' && item.type == 'feature'">
+                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
+                      <span>{{key}}</span>
+                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
+                    </div>
+
+                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`" :class="{'content-item-value-muti': Array.isArray(value) && value.length > 0}">
+                      <template v-if="Array.isArray(value) && value.length>0">
                         <div v-if="typeof value[0] == 'string'" class="item-value-sub" v-for="(_item, _index) in value" :key="_index">{{_item}}</div>
                         <el-table
                           v-else
@@ -72,7 +83,7 @@
                           </el-table-column>
                         </el-table>
                       </template>
-                      <span v-else-if="assetKey[key]">{{value ? value : "&nbsp;"}}</span>
+                      <span v-else-if="key">{{value ? value : "&nbsp;"}}</span>
                     </div>
                   </div>
 
@@ -140,6 +151,17 @@
                       <span>{{value ? value : "&nbsp;"}}</span>
                     </div>
                   </div>
+
+                  <!-- alertRule-detail的详情-->
+                  <div class="content-item" v-else-if="data.from == 'alertRule' && data.type == 'alertRuleInfo'">
+                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
+                      <span>{{key}}</span>
+                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
+                    </div>
+                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
+                      <span>{{value ? value : "&nbsp;"}}</span>
+                    </div>
+                  </div>
                 </template>
               </div>
             </div>
@@ -346,6 +368,7 @@
       // 设置数据, filter区分
       setData(chartItem, detail, panelId, filter, area, errorMsg) {
         //this.resize(chartItem);
+        console.info(chartItem, detail)
         if(errorMsg && errorMsg !== ''){
           this.isError = true;
           this.errorContent = errorMsg;
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 25505b6a7..953afe4db 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -537,7 +537,7 @@
             buildIn: 1,
             elements: [{
               id: '',
-              expression: `nz_alert_nums{id="${this.detail[0].value}"}`,
+              expression: `nz_alert_nums{id="${this.detail.id}"}`,
               type: ''
             }]
           });
@@ -595,7 +595,10 @@
             type: "alertList",
             prev: -9,
             next: -1,
-            buildIn: 1
+            buildIn: 1,
+            draggable: false,
+            resizable: false,
+            editable: false,
           });
           this.$nextTick(() => {
             this.dataList.forEach((item,index) => {
@@ -1248,10 +1251,12 @@
               response.data && function() {
                 response.data.Basic && detail.push({
                   title: vm.$t('asset.createAssetTab.basicTitle'),
+                  type: 'basic',
                   data: response.data.Basic
                 });
                 response.data.Feature && detail.push({
                   title: vm.$t('asset.createAssetTab.featureTitle'),
+                  type: 'feature',
                   data: response.data.Feature
                 });
               }();
@@ -1261,6 +1266,7 @@
         }else {
           detail.push({
             title: vm.$t('asset.createAssetTab.basicTitle'),
+            type: 'basic',
             data: {
               sn: 'assetInfo Test',
               host: '192.168.40.42',
@@ -1273,6 +1279,7 @@
           });
           detail.push({
             title: vm.$t('asset.createAssetTab.featureTitle'),
+            type: 'feature',
             data: {
               CPU: "Intel E500",
               Memory: "256GB",
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index 8d8ba40c9..14c1022ff 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -210,7 +210,7 @@
       }
     }
   }
-  .chart-container {
+  .chart-container.chart-detail {
     height: 100%;
     position: relative;
     background-color: white;
@@ -224,7 +224,6 @@
       text-align: center;
       width: 100%;
       line-height: 30px;
-      height: 28px;
       padding: 1px 3px 0 3px;
       box-sizing: border-box;
       .nz-chart-top{
@@ -237,10 +236,9 @@
         font-size: 12px;
       }
       .chart-title-text {
-        font-weight: bold;
-        font-size: 18px;
+        font-size: 16px;
         line-height: 26px;
-        color: #333;
+        color: #52545c;
         display:flex;
         justify-content:center;
         align-items:center;
@@ -445,9 +443,9 @@
         font-size: 12px;
       }
       .chart-title {
-        font-weight: bold;
-        font-size: 18px;
+        font-size: 16px;
         line-height: 26px;
+        color: #52545c;
         color: #333;
         display:flex;
         justify-content:center;