Merge branch 'codeCheck' of https://git.mesalab.cn/nezha/nezha-fronted into codeCheck

2020-09-01 09:56:32 +08:00
parent 00ba7fb1cf 36f4a769d0
commit 4ab7f5cdac
8 changed files with 172 additions and 82 deletions
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -208,7 +208,6 @@
 .resize-box {
  .pagination {
    padding-top: 0;
-    overflow: hidden;
  }
  .success {
    background-color: #50d050;
@@ -224,6 +223,7 @@
  }
  .chart-table, .chart-alert-info {
    width: 100%;
+    overflow-x: hidden;
    .table-container {
      padding: 0 6px;
      box-sizing: border-box;
--- a/nezha-fronted/src/components/common/elementSet.vue
+++ b/nezha-fronted/src/components/common/elementSet.vue
@@ -91,7 +91,7 @@ export default {
    //单选
    handler(val, index) {
      if (!this.allowedAll&&!val.allowed && (index == 0 || index == 1 || val.NotSet)) {
-        this.custom[index].show = true;
+        // this.custom[index].show = true;
      } else {
        this.custom[index].show = !this.custom[index].show;
      }
--- a/nezha-fronted/src/components/common/leftMenu.vue
+++ b/nezha-fronted/src/components/common/leftMenu.vue
@@ -88,7 +88,7 @@
                  </el-checkbox>
                </el-checkbox-group>
              </el-collapse-item>
-              <el-collapse-item name="ping" :title="$t('asset.left.ping')">
+              <el-collapse-item name="ping" :title="$t('asset.left.ping')" v-if="assetPingSwitch">
                <el-checkbox-group v-model="pingCheckList" size="small" @change="changePingCheckBox">
                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(pingCheckList, item.key)}" v-for="(item, index) in pingData" :key="index" :label="item.value">
                    <div class="sidebar-info-item-txt">
@@ -159,6 +159,7 @@
          vendorCheckList: [],
          pingData: [],
          pingCheckList: [],
+          assetPingSwitch:true,
        }
      },
      computed: {
@@ -216,9 +217,11 @@
          }
        }
      },
+      created() {
+        this.initEvent(); //注册监听事件
+      },
      mounted() {
        Promise.all([this.getProjectList(), this.getModuleList(), this.getLeftMenuList()]).then(response => {
-          this.initEvent(); //注册监听事件
          setTimeout(() => {
            this.ready = true;
          }, 300);
@@ -385,6 +388,10 @@
          bus.$on('asset-property-change',()=>{
            this.getLeftMenuList();
          })
+
+          bus.$on('asset-ping-switch-change',(isOpen)=>{
+            this.assetPingSwitch = isOpen
+          })
        },
        // 获取asset左侧菜单数据
        getLeftMenuList(){
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -376,6 +376,16 @@
          }
        }
      },
+      'tools.customTableTitle':{
+        deep:true,
+        immediate:true,
+        handler(n,o){
+          let pingTitle=n.find(item=>{return item.prop=='pingStatus'})
+          if(pingTitle){
+            this.dispatchEvent('asset-ping-switch-change',pingTitle.show)
+          }
+        }
+      }
    },
    methods: {
      fullScreen() {
@@ -627,6 +637,11 @@
          this.pageObj[column] = content;
          this.getTableData();
        });
+      },
+      dispatchEvent(event,param){
+        this.$nextTick(()=>{
+          bus.$emit(event,param)
+        })
      }
    },

@@ -635,11 +650,23 @@
      let tableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
        : this.tableTitle;
+
      if (this.assetPingSwitch == 'off') {
+        this.dispatchEvent('asset-ping-switch-change',false)
        for (let i in tableTitle) {
          let label = tableTitle[i];
          if (label.prop == 'pingStatus') {
-            tableTitle.splice(i, 1);
+            label.show=false;
+            label.NotSet=true;
+            break;
+          }
+        }
+      }else{
+        for (let i in tableTitle) {
+          let label = tableTitle[i];
+          if (label.prop == 'pingStatus') {
+            label.show=true;
+            label.NotSet=false;
            break;
          }
        }
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -56,7 +56,7 @@
    created() {
      this.option=chartConfig.getOption(this.chartType);
      if(this.showToolbox == false){
-        this.option.grid.top=10;
+        //this.option.grid.top = 10;
      }
    },
    methods:{
@@ -158,7 +158,6 @@
          this.chart.setOption(option);
        }

-
        //坐标轴label鼠标悬浮提示
        if (this.axisTooltip) {
          let tooltipDom = document.querySelector(".axis-tooltip");
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -194,22 +194,25 @@
      series: [],
      tooltip : {}
    };
-    const alertMessageBar = {
+    const alertMessageBarByRule = {
      title: {
        show: false,
      },
-      color: overviewBgColor,
      legend: {
        show: false,
      },
      grid: {
-        top: 30,
-        left: 0,
+        top: 60,
+        left: 80,
        right: 30,
-        bottom:8
+        bottom: 60,
      },
      series: [],
-      tooltip : {},
+      tooltip : {
+        backgroundColor: "rgba(255, 255, 255, 0.66)",
+        extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);",
+        textStyle: {color: "#333"}
+      },
      xAxis: {
        type: 'value',
        axisLine: {
@@ -220,7 +223,7 @@
        },
        axisLabel: {
          show:true,
-          fontSize: 10
+          fontSize: 14
        }
      },
      yAxis: {
@@ -234,18 +237,82 @@
        data: [],
        axisLabel: {
          show: true,
+          fontSize: 14,
          formatter: function(value) {
-            if (value.length > 33) {
-              return value.substring(0, 30) + "...";
+            if (value.length > 10) {
+              return value.substring(0, 6) + "...";
            }
            return value;
          },
-          align: 'left',
-          margin: 200,
        },
        triggerEvent: true
      },
    };
+    const alertMessageBarByAsset = {
+      title: {
+        show: false,
+      },
+      color: function(params) {
+        //首先定义一个数组
+        let colorList = [pieColor[0], pieColor[1]];;
+        if(params.dataIndex % 2 == 0){
+          return colorList[0]
+        }else{
+          return colorList[1]
+        }
+      },
+      legend: {
+        show: false,
+      },
+      grid: {
+        top: 60,
+        left: 80,
+        right: 30,
+        bottom: 60,
+      },
+      series: [],
+      tooltip : {
+        backgroundColor: "rgba(255, 255, 255, 0.66)",
+        extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);",
+        textStyle: {color: "#333"}
+      },
+      yAxis: {
+        type: 'value',
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show:true,
+          fontSize: 14
+        }
+      },
+      xAxis: {
+        type: 'category',
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        data: [],
+        axisLabel: {
+          show: true,
+          fontSize: 12,
+          formatter: function(value) {
+            let r = value;
+            if (r.length > 4) {
+              r = value.substring(0, 3) + "...";
+            }
+            return r.split("").join("\n");
+          },
+        },
+        triggerEvent: true
+      },
+    };
+
    const overviewLine = {
      title:{
        show: false,
@@ -399,7 +466,9 @@
      overviewLine: {name: 'line', option: overviewLine},
      map:{name:'map',option:mapOptions},
      pie: {name: 'assetType', option: assetTypePie},
-      bar: {name: 'alertMessage', option: alertMessageBar},
+      bar: {name: 'alertMessage', option: alertMessageBarByAsset},
+      ruleBar: {name: 'ruleMessage', option: alertMessageBarByRule},
+      assetBar: {name: 'assetMessage', option: alertMessageBarByAsset},
      noData:{name:'noData',option:noDataOption},
    };
    export default {
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
@@ -338,6 +338,7 @@
  position: fixed;
  transform: translate(-100%, -50%);
  min-width: unset;
+  background-color: rgba(255, 255, 255, 0.8) !important;
 }
 .axis-tooltip::after {
  content: '';
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -129,7 +129,30 @@
 <!--                <div class="chart-no-data"v-if="!assetTypeLoading && assetData.typeStat && assetData.typeStat.length == 0">No Data</div>-->
          </div>
        </div>
+
        <!--第二个图-->
+        <div class="content-col-box">
+          <div class="content-col-title">
+            <span>
+              <span v-if="alertMessageShow == 'asset'">{{$t("dashboard.overview.alert.assetTopN")}}</span>
+              <span v-if="alertMessageShow == 'module'">{{$t("dashboard.overview.alert.moduleTopN")}}</span>
+              <!--<span class="dropdown-btn" @mouseenter="alertMessageDropdownHandler(true)" @mouseleave="alertMessageDropdownHandler(false)">
+                <i class="el-icon-arrow-down"></i>
+                <transition name="el-zoom-in-top">
+                  <ul class="el-dropdown-menu el-popper el-dropdown-menu&#45;&#45;mini" v-if="bottom3DropdownShow">
+                    <li @click="alertMessageChange('asset')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.asset.title")}}</li>
+                    <li @click="alertMessageChange('module')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.module.module")}}</li>
+                  </ul>
+                </transition>
+              </span>-->
+            </span>
+          </div>
+          <div class="content-col-content">
+            <chart-box axis-tooltip="x" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="assetBar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>
+            <chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>
+          </div>
+        </div>
+        <!--第三个图-->
        <div class="content-col-box">
          <div class="content-col-title">
            <span>{{$t("dashboard.overview.alert.alertRuleTopN")}}</span>
@@ -141,47 +164,9 @@
            </el-dropdown>-->
          </div>
          <div class="content-col-content">
-            <chart-box axis-tooltip="y" chart-type="bar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>
-<!--                <div class="no-data-tip" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">N/A</div>-->
-<!--                <div class="chart-no-data" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">No Data</div>-->
-          </div>
-        </div>
-        <!--第三个图-->
-        <div class="content-col-box">
-          <div class="content-col-title">
-            <span>
-              <span v-if="alertMessageShow == 'asset'">{{$t("dashboard.overview.alert.assetTopN")}}</span>
-              <span v-if="alertMessageShow == 'module'">{{$t("dashboard.overview.alert.moduleTopN")}}</span>
-              <span class="dropdown-btn" @mouseenter="alertMessageDropdownHandler(true)" @mouseleave="alertMessageDropdownHandler(false)">
-                <i class="el-icon-arrow-down"></i>
-                <transition name="el-zoom-in-top">
-                  <ul class="el-dropdown-menu el-popper el-dropdown-menu--mini" v-if="bottom3DropdownShow">
-                    <li @click="alertMessageChange('asset')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.asset.title")}}</li>
-                    <li @click="alertMessageChange('module')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.module.module")}}</li>
-                  </ul>
-                </transition>
-              </span>
-            </span>
-            <!--<el-dropdown trigger="hover" v-if="alertMessageShow == 'asset'" :show-timeout="0" size="small">
-              <span>Top&nbsp;{{topFilter.asset}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('asset', item)">{{item}}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-            <el-dropdown trigger="hover" v-if="alertMessageShow == 'module'" :show-timeout="0" size="small">
-              <span>Top&nbsp;{{topFilter.module}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('module', item)">{{item}}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>-->
-          </div>
-          <div class="content-col-content">
-            <chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>
-            <chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>
-<!--                <div class="no-data-tip" v-show="alertMessageShow == 'asset'" v-if="!assetMessageLoading && ((!messageByAssetSeries.data && !messageByAssetSeries.category) || (messageByAssetSeries.data.length == 0 && messageByAssetSeries.category.length == 0))">N/A</div>-->
-<!--                <div class="no-data-tip" v-show="alertMessageShow == 'module'" v-if="!moduleMessageLoading && ((!messageByModuleSeries.data && !messageByModuleSeries.category) || (messageByModuleSeries.data.length == 0 && messageByModuleSeries.category.length == 0))">N/A</div>-->
-<!--                <div class="chart-no-data" v-show="alertMessageShow == 'asset'" v-if="!assetMessageLoading && ((!messageByAssetSeries.data && !messageByAssetSeries.category) || (messageByAssetSeries.data.length == 0 && messageByAssetSeries.category.length == 0))">No Data</div>-->
-<!--                <div class="chart-no-data" v-show="alertMessageShow == 'module'" v-if="!moduleMessageLoading && ((!messageByModuleSeries.data && !messageByModuleSeries.category) || (messageByModuleSeries.data.length == 0 && messageByModuleSeries.category.length == 0))">No Data</div>-->
+            <chart-box axis-tooltip="y" chart-type="ruleBar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>
+            <!--                <div class="no-data-tip" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">N/A</div>-->
+            <!--                <div class="chart-no-data" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">No Data</div>-->
          </div>
        </div>
      </div>
@@ -779,16 +764,20 @@
              name: 'alertStatByRule',
              data: seriesData,
              type: 'bar',
-              barMaxWidth: 30,
+              barMaxWidth: 20,
+              itemStyle: {
+                color: function(params) {
+                  let colorList = ["#ECCD82", "#99CEB9"];;
+                  if(params.dataIndex % 2 == 0){
+                    return colorList[0]
+                  }else{
+                    return colorList[1]
+                  }
+                },
+              },
              category: categoryData, //自定义，用来判断N/A是否显示
            };
            this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData);
-            this.$refs.ruleMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
-            this.$refs.ruleMessage.modifyOption("tooltip", "textStyle", {color: "#000"});
-            this.$refs.ruleMessage.modifyOption("grid", "top", 30);
-            this.$refs.ruleMessage.modifyOption("grid", "left", 200);
-            this.$refs.ruleMessage.modifyOption("grid", "right", 30);
-            this.$refs.ruleMessage.modifyOption("grid", "bottom", 8);
            this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
            this.$refs.ruleMessage.endLoading();
          }
@@ -809,15 +798,19 @@
              data: seriesData,
              type: 'bar',
              barMaxWidth: 30,
-              category: categoryData
+              category: categoryData,
+              itemStyle: {
+                color: function(params) {
+                  let colorList = ["#ECCD82", "#99CEB9"];;
+                  if(params.dataIndex % 2 == 0){
+                    return colorList[0]
+                  }else{
+                    return colorList[1]
+                  }
+                },
+              },
            };
-            this.$refs.assetMessage.modifyOption('yAxis', 'data', categoryData);
-            this.$refs.assetMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
-            this.$refs.assetMessage.modifyOption("tooltip", "textStyle", {color: "#000"});
-            this.$refs.assetMessage.modifyOption("grid", "top", 30);
-            this.$refs.assetMessage.modifyOption("grid", "left", 200);
-            this.$refs.assetMessage.modifyOption("grid", "right", 30);
-            this.$refs.assetMessage.modifyOption("grid", "bottom", 8);
+            this.$refs.assetMessage.modifyOption('xAxis', 'data', categoryData);
            this.$refs.assetMessage.setSeries(this.messageByAssetSeries);
            this.$refs.assetMessage.endLoading();
          }
@@ -840,13 +833,7 @@
              barMaxWidth: 30,
              category: categoryData
            };
-            this.$refs.moduleMessage.modifyOption('yAxis', 'data', categoryData);
-            this.$refs.moduleMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
-            this.$refs.moduleMessage.modifyOption("tooltip", "textStyle", {color: "#000"});
-            this.$refs.moduleMessage.modifyOption("grid", "top", 30);
-            this.$refs.moduleMessage.modifyOption("grid", "left", 200);
-            this.$refs.moduleMessage.modifyOption("grid", "right", 30);
-            this.$refs.moduleMessage.modifyOption("grid", "bottom", 8);
+            this.$refs.moduleMessage.modifyOption('xAxis', 'data', categoryData);
            this.$refs.moduleMessage.setSeries(this.messageByModuleSeries);
            this.$refs.moduleMessage.endLoading();
          }