NEZ-315 feat: alert-rule详情

nezha-fronted/src/components/charts/chart-alert-list.vue

@@ -23,7 +23,7 @@
           <el-dropdown trigger="click" v-show="!isPreview" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
-              <span class="chart-title-text">{{chartData.title}}</span>
+              <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>
             <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;" >
@@ -54,7 +54,7 @@
             :height="tableHeight"
             ref="alertListTable"
             tooltip-effect="light"
-            v-scrollBar:el-table="'large'"
+            v-scrollBar:el-table="'normal'"
             :cell-class-name="labelsClassName"
             @selection-change="selectChange"
             style="width: 100%;">
@@ -300,9 +300,6 @@ export default {
     'pick-time':pickTime,
   },
   props: {
-    chartData: {
-      type: Object
-    },
     // 看板id
     panelId: {
       type: Number,

nezha-fronted/src/components/charts/chart-alert-rule-info.vue

@@ -0,0 +1,239 @@
+<style lang="scss">
+  @import './chart.scss';
+</style>
+<template>
+  <div class="nz-chart-resize">
+    <div class="resize-shadow" ref="resizeShadow"></div>
+    <div class="resize-box resize-box-alert-rule" ref="resizeBox">
+      <div class="chart-alert-rule-info" :id="'chartAlertRuleInfoDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+        <loading :ref="'localLoading'+chartIndex"></loading>
+        <div class="clearfix chartTitle drag-disabled" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
+          <el-popover
+            v-if="isError"
+            :close-delay=10
+            placement="top-start"
+            trigger="hover"
+            popper-class="chart-error-popper">
+            <div>{{errorContent}}</div>
+            <span slot="reference" class="panel-info-corner panel-info-corner--error">
+              <i class="nz-icon nz-icon-warning fa"></i>
+              <span class="panel-info-corner-inner"></span>
+            </span>
+          </el-popover>
+          <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
+            <span class="chart-title-text">{{data.title}}</span>
+          </span>
+        </div>
+        <div class="mt-10 chart-info-container" v-cloak>
+          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="asset-info-content" >
+            <el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
+              <div style="padding: 0 15px">
+                <div class="basic-container">
+                  <div class="basic-title asset-info-content-title">
+                    <span>&nbsp;{{$t('asset.createAssetTab.basicTitle')}}</span>
+                  </div>
+                  <div class="basic-content basic-content-asset" :class="{'fold':hideBasic, 'unfold':!hideBasic}">
+                    <div v-for="(item, index) in detail" class="content-item hover-bg">
+                      <div class="content-item-key item-tip" :id="'basicKey' + index">
+                        <span>{{item.label}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('basicKey', item.label, index, ready)">{{item.label}}</div>
+                      </div><div class="content-item-value item-tip" :id="'basicValue' + index">
+                        <span>{{item.value ? item.value : "&nbsp;"}}</span>
+                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip('basicValue', item.value, index, ready)">{{item.value}}</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+      </div>
+      <!--<span class="vue-resizable-handle" @mousedown="startResize"></span>-->
+    </div>
+  </div>
+</template>
+
+<script>
+  import bus from '../../libs/bus';
+  import {Loading} from 'element-ui';
+  import chartDataFormat from './chartDataFormat'
+  import loading from "../common/loading";
+  import timePicker from '../common/timePicker'
+
+  export default {
+    name: 'chartAlertRuleInfo',
+    components: {
+      'loading': loading,
+      'time-picker':timePicker
+    },
+    props: {
+      // 看板id
+      panelId: {
+        type: Number,
+        default: 0,
+      },
+      editChartId: {
+        type: String,
+        default: 'editChartId',
+      },
+      chartIndex:{
+        type: Number,
+        default: 0,
+      },
+      detail: Array
+    },
+    data() {
+      return {
+        ready: false,
+        data: {}, // 该图表信息,chartItem
+        unit:{},
+        isError:false,
+        errorContent:'',
+        loading:Object,
+        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+        firstLoad: false, // 是否第一次加载
+        screenModal: false,
+        // 查询数据使用
+        filter: {
+          start_time: '',
+          end_time: '',
+          from: ''
+        },
+        hideBasic:false,
+        hideFeature:false,
+        firstShow: false, // 默认不显示操作按钮,
+        caretShow:false,
+        dragTitleShow:false,
+        dropdownMenuShow:false,
+        divFirstShow:false,
+        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
+        oldSearchTime: [],
+      };
+    },
+    computed: {
+      itemTip() {
+        return function(type, content, index, ready) {
+          let className = "";
+          if (ready) {
+            let cellDom = document.querySelector(`#${type}${index}`);
+            let spanDom = document.createElement("span");
+            spanDom.style.display = "inline-block";
+            spanDom.innerText = content;
+            cellDom.appendChild(spanDom);
+            if (cellDom.offsetWidth-16 < spanDom.offsetWidth) {
+              className = "item-tip-show";
+            }
+            cellDom.removeChild(spanDom);
+          }
+          return className;
+        }
+      },
+    },
+    methods: {
+      startResize(e) {
+        let vm = this;
+        this.$chartResizeTool.start(vm, this.data, e);
+      },
+      setLabels:function(source){
+        let labels=[];
+        source.forEach(item=>{
+          labels=labels.concat(Object.keys(item))
+        })
+        labels=Array.from(new Set(labels));
+
+        labels=labels.map(item=>{
+          return{
+            label:this.replaceSplit(item),
+            prop:item,
+            show:true,
+          }
+        })
+
+        return labels;
+      },
+      hideElement:function(type){
+        if(type ==  'basic'){
+          this.hideBasic=!this.hideBasic;
+        }else{
+          this.hideFeature=!this.hideFeature
+        }
+        setTimeout(()=>{
+          this.$refs.scrollbar.update();
+        },400);
+      },
+      replaceSplit(key){
+        if(key){
+          return key.replace(/\$_\$/g,' ')
+        }
+      },
+      startLoading(area){
+        this.$refs['localLoading'+this.chartIndex].startLoading();
+      },
+      endLoading(area){
+        this.$refs['localLoading'+this.chartIndex].endLoading();
+      },
+      resize() {
+        let container = document.querySelector('#chartAlertRuleInfoDiv' + this.chartIndex + " .chart-info-container");
+        container.style.height = `calc(100% - ${this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight}px)`;
+      },
+      showLoad(chartItem) {
+        this.$nextTick(() => {
+          this.resize();
+        });
+        this.startLoading();
+        this.divFirstShow = true;
+      },
+      // 重新请求数据 刷新操作-local
+      refreshChart() {
+        this.dropdownMenuShow=false;
+        this.startLoading();
+        this.firstShow = false;
+        this.$emit('on-refresh-data', this.data.id);
+      },
+      // 编辑图表
+      editChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-edit-chart-block', this.data.id);
+      },
+      // 删除该图表
+      removeChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-remove-chart-block', this.data.id);
+      },
+      clickos() {
+        this.dropdownMenuShow=false;
+      },
+      clearChart(){
+        this.data = {};
+      },
+
+      // 设置数据, filter区分
+      setData(chartItem) {
+        this.resize(chartItem);
+        this.divFirstShow = true;
+
+        this.firstShow = true; // 展示操作按键
+
+        this.data = chartItem;
+
+        this.$nextTick(()=>{
+          this.$refs.scrollbar.update();
+        })
+        this.endLoading();
+      },
+    },
+    mounted() {
+      this.firstLoad = false;
+      this.$nextTick(()=>{
+        this.$refs.scrollbar.update();
+      })
+      setTimeout(() => {
+        this.ready = true;
+      }, 300);
+    },
+    beforeDestroy() {
+      this.clearChart();
+    },
+  };
+</script>

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

@@ -100,7 +100,7 @@
                      :chart-data="item"
                      :chart-index="index"></chart-url>
 
-        <chart-asset-info v-if="item.type  === 'assetInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
+        <chart-asset-info v-if="item.type === 'assetInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
                     @on-drag-chart="editChartForDrag"
                     :panel-id="filter.panelId"
                     :chart-index="index"
@@ -108,6 +108,15 @@
                     :editChartId="'editChartId' + item.id"
         ></chart-asset-info>
 
+        <chart-alert-rule-info v-if="item.type === 'alertRuleInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
+                    @on-drag-chart="editChartForDrag"
+                    :panel-id="filter.panelId"
+                    :chart-index="index"
+                    :chart-data="item"
+                    :detail="alertRuleDetail"
+                    :editChartId="'editChartId' + item.id"
+        ></chart-alert-rule-info>
+
         <chart-project-info v-if="item.type  === 'projectInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
                     @on-drag-chart="editChartForDrag"
                     :panel-id="filter.panelId"
@@ -143,6 +152,7 @@
   import chartUrl from './chart-url';
   import chartSingleStat from './chart-single-stat';
   import chartAssetInfo from './chart-asset-info'
+  import chartAlertRuleInfo from './chart-alert-rule-info'
   import chartProjectInfo from './chart-project-info'
   import draggable from 'vuedraggable'
   import chartDataFormat from "./chartDataFormat";
@@ -152,7 +162,8 @@
     props: {
       isModel: {type: Boolean, default: false},
       additionalInfo:{},
-      draggable: {type: Boolean, default: true}
+      draggable: {type: Boolean, default: true},
+      alertRuleDetail: Array
     },
     components: {
       chartAlertList,
@@ -162,6 +173,7 @@
       chartTable,
       chartUrl,
       chartSingleStat,
+      chartAlertRuleInfo,
       draggable,
     },
     data() {
@@ -333,17 +345,17 @@
         let chartTitle = event.item.querySelector('.chartTitle');
       },
       clone(event){
-        console.log('clone',event );
+        //console.log('clone',event );
         let canvas = event.item.querySelector('canvas');
-        console.log('clone-canvas',canvas);
+        //console.log('clone-canvas',canvas);
         let canvasclone = event.clone.querySelector('canvas');
         canvasclone.style.border='solid 1px yellow';
-        console.log('clone-canvasclone',canvasclone);
+        //console.log('clone-canvasclone',canvasclone);
         if(canvas&&canvasclone){
           let ctx = canvas.getContext("2d");
           let image = new Image();
           image.src= canvas.toDataURL();
-          console.log('clone-image',image);
+          //console.log('clone-image',image);
           let ctxClone = canvasclone.getContext("2d");
           //ctxClone.drawImage(image,0,0);
           image.onload = function(){
@@ -526,13 +538,68 @@
       },
       // 获取panel详情数据,获取panel下所有chart列表
       getData(params) {
-        console.info(params)
         //param   目前没有用
         const param = {
           panelId: params.panelId,
           query: params.query,
+          from: params.from
         };
         if (!param.query) delete param.query;
+        //alert-rule单独处理
+        if (param.from == "alertRule") {
+          this.dataList = [];
+          this.dataList.push({
+            id: -10,
+            panelId: 0,
+            title: this.$t("alert.config.chart.alertRuleInfo"),
+            span: 4,
+            height: 350,
+            type: "alertRuleInfo",
+            prev: 0,
+            next: -9,
+            buildIn: 1
+          });
+          this.dataList.push({
+            id: -9,
+            panelId: 0,
+            title: this.$t("alert.config.chart.alertNumTrend"),
+            span: 4,
+            height: 350,
+            type: "line",
+            prev: -10,
+            next: -8,
+            buildIn: 1,
+            elements: [{
+              id: '',
+              expression: `nz_alert_nums{id="${this.alertRuleDetail[0].value}"}`,
+              type: ''
+            }]
+          });
+          this.dataList.push({
+            id: -8,
+            panelId: 0,
+            title: this.$t("dashboard.panel.chartForm.statistics"),
+            span: 4,
+            height: 350,
+            type: "bar",
+            prev: -9,
+            next: -1,
+            buildIn: 1,
+            elements: [{
+              id: '',
+              expression: "",
+              type: ''
+            }]
+          });
+          this.$nextTick(() => {
+            this.dataList.forEach((item,index) => {
+              this.setChartSize(item, index);//设置该图表宽度
+              let chartBox = document.getElementById('chart-' + item.id);
+              this.handleElementInViewport(chartBox, 0, item, index);
+            });
+          });
+          return;
+        }
         //根据panelId获得panel下的所有图表
         this.$get('panel/'+ params.panelId+'/charts').then(response => {
           if (response.code === 200) {
@@ -669,6 +736,10 @@
           this.getAlertListChartData(chartItem,filterType);
           return;
         }
+        if(chartItem.type === 'alertRuleInfo'){
+          this.getAlertRuleChartData(chartItem);
+          return;
+        }
         if (this.isModel) {
           this.modelStaticData(chartInfo, filterType);
         } else {
@@ -1240,12 +1311,15 @@
       getAlertListChartData:function(chartInfo,filterType){
         this.$refs['editChart'+chartInfo.id][0].getAlertList(filterType);
       },
+      getAlertRuleChartData(chartInfo) {
+        this.$refs['editChart'+chartInfo.id][0].setData(chartInfo);
+      },
       // 设置图表的尺寸
       setChartSize(item, index) {
         this.$nextTick(() => {
           let chartBox = document.getElementById("chart-" + item.id);
           chartBox.style.width = `${(item.span / 12) * 100}%`;
-          chartBox.style.height = `${item.height}px`;
+          chartBox.style.height = `${Math.round(item.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight}px`;
         });
       },
       getNewTime(time, num) {

nezha-fronted/src/components/charts/chart.scss

@@ -198,7 +198,7 @@
       }
     }
   }
-  .chart-asset-info, .chart-project-info {
+  .chart-asset-info, .chart-project-info, .chart-alert-rule-info {
     .chart-info-container {
       padding-top: 6px;
     }
@@ -367,7 +367,7 @@
       box-sizing: border-box;
     }
   }
-  .line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info, .chart-alert-info, .chart-project-info {
+  .line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info, .chart-alert-info, .chart-project-info, .chart-alert-rule-info {
     height: 100%;
     position: relative;
     background-color: white;

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -7,7 +7,7 @@
     <div class="resize-box resize-box-echarts" ref="resizeBox">
       <div class="line-chart-block" :id="'lineChartDiv'+chartIndex" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
         <loading :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
+        <div class="clearfix chartTitle" :class="{'drag-disabled': this.filter.from == 'alertRule'}" :id="'chartTitle'+chartIndex" >
           <el-popover
             v-if="isError"
             placement="top-start"
@@ -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">{{chartData.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="filter.from != 'alertRule'"><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':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}"    style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
+            <ul v-if="filter.from != 'alertRule'" slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex" :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}"    style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
               <li v-show="!isExplore"  @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 v-show="!isExplore" @click="editChart"  class="el-dropdown-menu__item">
@@ -89,7 +89,7 @@
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
         </el-dialog>
       </div>
-      <span class="vue-resizable-handle" @mousedown="startResize"></span>
+      <span class="vue-resizable-handle" @mousedown="startResize" v-if="filter.from != 'alertRule'"></span>
     </div>
   </div>
 </template>
@@ -160,6 +160,7 @@
         filter: {
           start_time: '',
           end_time: '',
+          from: ""
         },
         stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
         legend:[],
@@ -907,6 +908,7 @@
       // 设置数据, filter区分
       setData(chartItem, seriesItem, panelId, filter,legend,area,errorMsg) {
         this.setColor(legend.length);
+        this.filter.from = filter.from;
         if(errorMsg && errorMsg!==''){
           this.isError = true;
           this.errorContent = errorMsg;
@@ -1300,7 +1302,6 @@
     },
     mounted() {
       this.firstLoad = false;
-      console.info(this.chartData)
     },
     beforeDestroy() {
       this.clearChart();

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

@@ -40,7 +40,7 @@
 
       <!-- model-panel/asset-detail/project-overview的panel-->
       <panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project' || from == 'alertRule') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
-                 @changeTab="changeTab" :targetTab.sync="targetTab"></panel-tab>
+                 @changeTab="changeTab" :targetTab.sync="targetTab" :alertRuleDetail="detail"></panel-tab>
 
     </div>
   </span>

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

@@ -99,7 +99,7 @@
     <div class="table-list" id="tableList">
       <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
         <div class="box-content">
-          <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData" :draggable="draggable"
+          <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData" :draggable="draggable" :alertRuleDetail="alertRuleDetail"
                       ref="chartList" :is-model="from == 'model'" :additional-info="obj"></chart-list>
         </div>
       </el-scrollbar>
@@ -121,7 +121,8 @@
     props: {
       from: String,
       obj: Object,
-      draggable: {type: Boolean, default: true}
+      draggable: {type: Boolean, default: true},
+      alertRuleDetail: Array
     },
     data() {
       return {
@@ -302,6 +303,7 @@
           let startTimeTmp = bus.timeFormate(now.setHours(now.getHours() - 1), '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);
@@ -322,7 +324,7 @@
       //公用操作
       getTableData(linkId) {
         if (this.from == "alertRule") {
-
+          this.getData(this.filter);
         } else {
           this.$get('panel', {type: this.from, link: linkId}).then(response => {
             if (response.code === 200) {

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

@@ -796,7 +796,11 @@ const en = {
       },
       operator:'Operator',
       threshold:'Threshold',
-      unit:'Unit'
+      unit:'Unit',
+      chart: {
+        alertRuleInfo: "Alert rule information",
+        alertNumTrend: "Alert num trend"
+      }
     }
   },
   project: {

nezha-fronted/src/components/page/alert/config.vue

@@ -501,6 +501,7 @@
       },
       convertToDetail(obj) {
         let detail = [];
+        detail.push({label: "ID", value: obj.id});
         detail.push({label: this.$t("alert.alertName"), value: obj.alertName});
         detail.push({label: this.$t("alert.config.expr"), value: obj.expr});
         let type = "";

nezha-fronted/src/components/page/dashboard/overview/test.vue

@@ -12,8 +12,8 @@
       </div>
       <!--右侧内容-->
       <div class="overview-right slot-content" id="mainDisplay" slot="content-right">
-        <svg width="100%" height="100%" x="0" y="0" id="canvas">
+        <!--<svg width="100%" height="100%" x="0" y="0" id="canvas">
-          <!--左侧菜单 图片列表-->
+          &lt;!&ndash;左侧菜单 图片列表&ndash;&gt;
           <g id="menu">
             <g id="items">
               <g id="dc" class="menu-item-box">
@@ -48,12 +48,12 @@
             <line x1="220" y1="0" x2="220" y2="100%" style="stroke:#d9d9d9;stroke-width:1"></line>
           </g>
 
-          <!--数据区-->
+          &lt;!&ndash;数据区&ndash;&gt;
           <svg x="220" y="0" id="content" width="100%" height="100%">
             <rect x="1200" y="100" height="40" width="40" fill="#666" id="test"></rect>
           </svg>
 
-          <!--模板定义-->
+          &lt;!&ndash;模板定义&ndash;&gt;
           <defs>
             <svg id="dcTemplate" width="80" height="80" class="item-box">
               <svg x="10" y="5" viewBox="0 0 1024 1024" width="60" height="60"><rect x="0" y="0" height="100%" width="100%" fill="transparent"></rect><path d="M693.2 225.1h49.3v-49.3h-49.3v49.3z m-459.9 32.8h16.4v-115h-16.4v115z m98.5 246.4H134.7v16.4h197.1v-16.4zM216.8 800h32.9v-32.9h-32.9V800zM726 504.3h-32.9v16.4H726v-16.4z m0 262.8h-32.9V800H726v-32.9zM857.4 455v-98.6H559c-4.9-14-16-25.1-30-30v-19.2h312V93.7H184v213.5h312.1v19.2c-14 4.9-25.1 16-30 30H216.8V455H85.4v394.2h295.7V455H249.7v-65.7H466c4.9 14 16 25.1 30 30V455h-82.1v394.2H611V455h-82.1v-35.7c14-4.9 25.1-16 30-30h134.2V455h-49.3v394.2h131.4V455H726v-65.7h98.6V455h-16.4v394.2h131.4V455h-82.2z m-509.2 32.9v328.5h-230V487.9h230zM216.8 274.3V126.5h591.3v147.8H216.8z m361.4 213.6v328.5H446.8V487.9h131.4z m-65.7-98.6c-9.1 0-16.4-7.4-16.4-16.4 0-9.1 7.4-16.4 16.4-16.4s16.4 7.4 16.4 16.4c0 9.1-7.3 16.4-16.4 16.4z m230 98.6v328.5h-65.7V487.9h65.7z m164.2 328.5H841V487.9h65.7v328.5z m-16.4-49.3h-32.9V800h32.9v-32.9z m0-262.8h-32.9v16.4h32.9v-16.4z m-328.5 0h-98.6v16.4h98.6v-16.4zM496.1 800H529v-32.9h-32.9V800z" fill="#1782bb"></path></svg>
@@ -63,10 +63,10 @@
             </svg>
             <svg id="deviceTemplate" width="80" height="80" class="item-box">
               <svg x="10" y="5" viewBox="0 0 1024 1024" width="60" height="60"><rect x="0" y="0" height="100%" width="100%" fill="transparent"></rect><path d="M447.5 960.3l-321-110v-642l321 82z" fill="#37BBEF"></path><path d="M447.5 960.3l450-240v-600l-450 170z" fill="#2481BA"></path><path d="M126.5 208.3l321 82 450-170-344.4-56.6z" fill="#3ED6FF"></path><path d="M400.3 348.9v80l-239-60v-80l239 60z m-239 48.3l239 60v-10l-239-60v10z m0 23l239 60v-10l-239-60v10z m0 23l239 60v-10l-239-60v10z" fill="#D4F7FF"></path><path d="M175.7 308.4v34l210.2 53v-34zM175.7 363.4l210.2 53v-13.3l-210.2-53z" fill="#113B42"></path><path d="M447.5 894.1v-5.2l-174.4-55.3-1.2 4.8zM271.9 809.3L447.5 864v-5.3l-174.4-54.3zM271.9 780.1l175.6 53.7v-5.2l-174.4-53.4zM447.5 707.9l-174.4-49.3-1.2 4.8 175.6 49.7zM271.9 692.6l175.6 50.7v-5.2l-174.4-50.4zM271.9 750.9l175.6 52.7v-5.2l-174.4-52.3zM271.9 721.8l175.6 51.7v-5.3l-174.4-51.3z" fill="#0071BC"></path><path d="M379.5 540.8c-9.4-3.4-17 1.6-17 11.2s7.6 20.1 17 23.2 17-1.9 17-11.2-7.6-19.8-17-23.2zM379.5 603.6c-3.9-1.2-7 1-7 4.9s3.1 8.1 7 9.3 7-1 7-4.9c0-3.9-3.1-8-7-9.3z" fill="#FFFFFF"></path></svg>
-              <!--<circle v-for="(point, index) in menuItemConnectionPoint" :key="index" r="3" :cx="point.x" :cy="point.y" class="connection-point"></circle>-->
+              &lt;!&ndash;<circle v-for="(point, index) in menuItemConnectionPoint" :key="index" r="3" :cx="point.x" :cy="point.y" class="connection-point"></circle>&ndash;&gt;
             </svg>
           </defs>
-          <!--滤镜-->
+          &lt;!&ndash;滤镜&ndash;&gt;
           <filter id="menuItemHover">
             <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
             <feOffset dx="1" dy="1"/>
@@ -75,12 +75,29 @@
               <feMergeNode in="SourceGraphic"/>
             </feMerge>
           </filter>
-        </svg>
+        </svg>-->
+        <div style="margin: auto; width: 600px; height: 800px; background-color: white">
+           <div class="test">
+
+           </div>
+        </div>
       </div>
     </left-menu>
   </div>
 </template>
-
+<style>
+  .test {
+    width: 200px;
+    height: 200px;
+    background: radial-gradient( circle, transparent 99px, black 100px, transparent 101px ) no-repeat,
+    radial-gradient( circle, transparent 99px, black 100px, transparent 101px ) no-repeat,
+    radial-gradient( circle, transparent 99px, black 100px, transparent 101px ) no-repeat,
+    radial-gradient( circle, transparent 99px, black 100px, transparent 101px ) no-repeat,
+    radial-gradient( circle, transparent 99px, black 100px, transparent 101px ) no-repeat;
+    background-position: 0, 50px -125px, -142px 52px, 142px 52px, 50px 125px;
+    background-size: 100%, 100px 100%, 100% 100px, 100% 100px,100px 100%;
+  }
+</style>
 <script>
   var vm;
   import * as d3 from "d3";
@@ -212,7 +229,7 @@
       }
     },
     mounted() {
-      this.init();
+      //this.init();
     }
   }
 </script>

nezha-fronted/src/tools.js

@@ -420,7 +420,6 @@ export const chartResizeTool = {
       //监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
       let remainderWidth = (box.offsetWidth+chartBlankWidth-shadowNewWidth)%stepWidth; //宽的余数
       let remainderHeight = (box.offsetHeight+chartBlankHeight-shadowNewHeight)%stepHeight; //高的余数
-      console.info("shadowNewHeight", shadowNewHeight, "remainderHeight", box.offsetHeight+chartBlankHeight-shadowNewHeight)
       boxStepHandler(remainderWidth, remainderHeight);
     }
     function mouseupListener(e) {
@@ -462,7 +461,6 @@ export const chartResizeTool = {
       if (widthChange) {
         shadowNewWidth = shadow.offsetWidth;
       }
-      console.info(height)
       if (height > stepHeight/2) { //放大shadow高
         heightChange = true;
         shadow.style.height = `${Math.round(shadow.offsetHeight/10)*10+stepHeight}px`;