From 82b2a9d8e0e71d840eaf82bdcbfa41094493151e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Sun, 26 Apr 2020 18:53:24 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20overview=E9=A5=BC=E5=9B=BE=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=81=E9=85=8D=E8=89=B2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/img/down.png         | Bin 0 -> 3028 bytes
 nezha-fronted/src/assets/img/up.png           | Bin 0 -> 3226 bytes
 nezha-fronted/src/assets/stylus/main.scss     |   8 +-
 .../page/dashboard/overview/chartConfig.vue   |  20 ++--
 .../page/dashboard/overview/overview2.scss    |   7 +-
 .../page/dashboard/overview/overview2.vue     | 105 ++++++++++++++----
 6 files changed, 105 insertions(+), 35 deletions(-)
 create mode 100644 nezha-fronted/src/assets/img/down.png
 create mode 100644 nezha-fronted/src/assets/img/up.png

diff --git a/nezha-fronted/src/assets/img/down.png b/nezha-fronted/src/assets/img/down.png
new file mode 100644
index 0000000000000000000000000000000000000000..d331a43d6636d5bdea0d866aa64bc25b7d072f5e
GIT binary patch
literal 3028
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

literal 0
HcmV?d00001

diff --git a/nezha-fronted/src/assets/img/up.png b/nezha-fronted/src/assets/img/up.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee6e0e08ffae13f50a17eb7f6e0eae0d367d9afc
GIT binary patch
literal 3226
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
S*{i}o2LNMfi>fvEBL5BE4wcdX

literal 0
HcmV?d00001

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 4ba7bdf44..d784e6bc4 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -723,13 +723,13 @@ li{
   background-color: $content-right-background-color;
 }
 .nz-table td.danger .cell>span {
-  background-color: #ff6666;
+  background-color: #d64f40;
   color: white;
   padding:2px 5px;
   border-radius: 4px;
 }
 .nz-table td.success .cell>span {
-  background-color: #1bd383;
+  background-color: #50d050;
   color: white;
   padding:2px 5px;
   border-radius: 4px;
@@ -1510,10 +1510,10 @@ li{
   margin-right: 5px;
 }
 .red {
-  background-color: #ff6666 !important;
+  background-color: #d64f40 !important;
 }
 .green {
-  background-color:#1bd383 !important;
+  background-color:#50d050 !important;
 }
 .grey {
   background-color:lightGrey;
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
index 75e339a3d..9b856d46b 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -8,7 +8,11 @@
       '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
       '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
       '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
-    ]
+    ];
+    let overviewBgColor = ['#d64f40', '#ffdb28', '#7bfc95', '#77baf4',
+      '#ac958f', '', '', '', '', '', '', '', '', '', '', ];
+    let pieColor = ['#d64f40', '#e65f50', '#f66f60', '#f69f90',
+      '#ffdb28', '#ffeb38', '#fffb48', '#ffffbb'];
     const commonOption={
       title:{
         show:false,
@@ -138,7 +142,7 @@
       title: {
         show: false,
       },
-      color: bgColorList,
+      color: pieColor,
       legend: {
         show: false,
       },
@@ -150,7 +154,7 @@
       title: {
         show: false,
       },
-      color: bgColorList,
+      color: overviewBgColor,
       legend: {
         show: false,
       },
@@ -196,11 +200,11 @@
         triggerEvent: true
       },
     };
-    const overViewLine = {
+    const overviewLine = {
       title:{
         show: false,
       },
-      color: bgColorList,
+      color: overviewBgColor,
       legend:{
         show:false,
       },
@@ -227,9 +231,9 @@
       },
       grid: {
         left: 6,
-        right: 30,
+        right: 20,
         containLabel: true,
-        bottom:8,
+        bottom: 0,
       },
       xAxis: {
         type: 'time',
@@ -285,7 +289,7 @@
     };
     const chartTypes={
       line:{name:'line',option:commonOption},
-      overviewLine: {name: 'line', option: overViewLine},
+      overviewLine: {name: 'line', option: overviewLine},
       map:{name:'map',option:mapOptions},
       pie: {name: 'assetType', option: assetTypePie},
       bar: {name: 'alertMessage', option: alertMessageBar}
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
index ba85f3b31..3a13f399d 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
@@ -124,11 +124,12 @@
   align-items: center;
   height: calc(100% - 1.6rem);
   justify-content: center;
-  padding: 0 8px;
+  padding: 0 0.5rem;
   border-radius: 0 0 6px 6px;
 }
-.content-row-box:nth-of-type(2) .content-col-box:last-of-type .content-col-content {
-  padding: 0;
+.content-row-box:nth-of-type(2) .content-col-box .content-col-content {
+  padding: 0.7rem;
+  height: calc(100% - 3rem);
 }
 .content-row-box:first-of-type .content-col-box:last-of-type .content-col-content {
   position: relative;
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index b2cf0f915..f8a13ba83 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -115,6 +115,9 @@
       </div>
     </left-menu>
     <div class="axis-tooltip el-popover"></div>
+    <!--用于assetType饼图label-->
+    <img src='../../../../assets/img/up.png' id="upPic" style="display: none;">
+    <img src='../../../../assets/img/down.png' id="downPic" style="display: none;">
   </div>
 </template>
 
@@ -207,34 +210,96 @@
             this.$refs.assetTypePie.startLoading();
             let legendData = [];
             let typeSeriesData = [];
-            let modelSeriesData = [];
+            //let modelSeriesData = [];
             this.assetData.typeStat.forEach(item => {
               legendData.push(item.name);
-              typeSeriesData.push({name: item.name, value: item.total});
+              typeSeriesData.push({name: item.name, value: item.total, up: item.pingUp, down: item.pingDown});
             });
-            this.assetData.modelStat.forEach(item => {
+            /*this.assetData.modelStat.forEach(item => {
               legendData.push(item.name);
               modelSeriesData.push({name: item.name, value: item.total});
-            });
+            });*/
             let series = [{
               name: 'Type',
-              data: typeSeriesData,
+              data: typeSeriesData.sort((a, b) => {return a.value > b.value ? -1 : 1}),
               type: 'pie',
-              radius: [0, '50%'],
+              minAngle: 15,
+              itemStyle: {
+                borderColor: "#fff",
+                borderWidth: 1,
+              },
               label: {
-                position: 'inner',
-                formatter: function(params) {
-                  if (params.name.length > 12) {
-                    return params.name.substring(0, 9) + "...";
+                borderWidth: 1,
+                borderColor: "#cfcfcf",
+                borderRadius: 4,
+                formatter: function(param) {
+                  return ['{title|' + param.name + ' (' + param.percent + '%)}',
+                          '{hr|}',
+                          '{block5|}{upPic|}{block3|}{upNum|' + param.data.up + '}{block15|}{downPic|}{block3|}{downNum|' + param.data.down + '}{block15|}']
+                    .join("\n");
+                },
+                rich: {
+                  title: {
+                    align: 'center',
+                    color: "#333",
+                    height: 20*window.devicePixelRatio,
+                    padding: [0, 8, 0, 8]
+                  },
+                  hr: {
+                    width: '100%',
+                    borderWidth: 0.5,
+                    height: 0,
+                    borderColor: "#cfcfcf"
+                  },
+                  block3: {
+                    width: 3*window.devicePixelRatio,
+                    align: 'left'
+                  },
+                  block5: {
+                    width: 5*window.devicePixelRatio,
+                    align: 'left'
+                  },
+                  block15: {
+                    width: 15*window.devicePixelRatio,
+                    align: 'left'
+                  },
+                  upPic: {
+                    backgroundColor: {
+                      image: document.getElementById("upPic")
+                    },
+                    height: 15*window.devicePixelRatio,
+                    align: 'left',
+                    width: 15*window.devicePixelRatio,
+                  },
+                  upNum: {
+                    color: "#333",
+                    height: 20*window.devicePixelRatio,
+                    align: 'left',
+                    //width: 35*window.devicePixelRatio,
+                    lineHeight: 18*window.devicePixelRatio,
+                  },
+                  downPic: {
+                    backgroundColor: {
+                      image: document.getElementById("downPic")
+                    },
+                    height: 15*window.devicePixelRatio,
+                    align: 'left',
+                    width: 15*window.devicePixelRatio
+                  },
+                  downNum: {
+                    color: "#333",
+                    height: 20*window.devicePixelRatio,
+                    align: 'left',
+                    //width: 43*window.devicePixelRatio,
+                    lineHeight: 18*window.devicePixelRatio,
                   }
-                  return params.name;
                 }
               },
               labelLine: {
-                show: false
+                show: true
               },
-              left: '25%'
-            }, {
+              //left: '25%'
+            }, /*{
               name: 'Model',
               radius: ['65%', '80%'],
               data: modelSeriesData,
@@ -248,18 +313,18 @@
                   return params.name;
                 }
               }
-            }];
-            this.$refs.assetTypePie.modifyOption('legend','show', true);
+            }*/];
+            /*this.$refs.assetTypePie.modifyOption('legend','show', true);
             this.$refs.assetTypePie.modifyOption('legend','orient', "vertical");
             this.$refs.assetTypePie.modifyOption('legend','data', legendData);
-            this.$refs.assetTypePie.modifyOption('legend','left', 0);
-            this.$refs.assetTypePie.modifyOption('legend','top', 5);
+            this.$refs.assetTypePie.modifyOption('legend','left', 40);
+            this.$refs.assetTypePie.modifyOption('legend','top', 40);
             this.$refs.assetTypePie.modifyOption('legend','formatter', function(name) {
               if (name.length > 12) {
                 return name.substring(0, 9) + "...";
               }
               return name;
-            });
+            });*/
             this.$refs.assetTypePie.setSeries(series);
             this.$refs.assetTypePie.endLoading();
           }
@@ -593,7 +658,7 @@
         return `<div class="tooltip" style="min-width: unset;">${params.name}:&nbsp;${params.value}</div>`;
       },
       assetTypeFormatter(params) {
-        return `<div class="tooltip" style="min-width: unset;">${params.seriesName}<br/>${params.name}:&nbsp;${params.value}</div>`;
+        return `<div class="tooltip" style="min-width: unset;">${params.name}:&nbsp;${params.value}</div>`;
       },
       switchFullScreen:function(){
         this.isFullScreen = this.judgeFullScreen();