gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-315 feat: alert-rule详情

Browse Source
This commit is contained in:
陈劲松
2020-06-07 21:39:07 +08:00
parent 5beb5b60e2
commit 468ac70278
11 changed files with 369 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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,

239
nezha-fronted/src/components/charts/chart-alert-rule-info.vue Normal file
View File

@@ -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>

88
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -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) {

4
nezha-fronted/src/components/charts/chart.scss
View File

@@ -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;

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

@@ -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();

2
nezha-fronted/src/components/common/bottomBox/bottomBox.vue
View File

@@ -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>

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

@@ -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) {

6
nezha-fronted/src/components/common/language/en.js
View File

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

1
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -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 = "";

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

@@ -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>

2
nezha-fronted/src/tools.js
View File

@@ -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`;