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

feat：替换颜色选择器 删除页面console

Browse Source
This commit is contained in:
zhangyu
2021-03-17 15:49:47 +08:00
parent 1ca749dfda
commit 93c9016c3e
21 changed files with 469 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/package.json
View File

@@ -32,6 +32,7 @@
"vis": "^4.21.0-EOL",
"vis-network": "^8.3.2",
"vue": "^2.5.2",
"vue-color": "^2.8.1",
"vue-countupjs": "^1.0.0",
"vue-draggable-resizable": "^2.3.0",
"vue-i18n": "^8.15.1",

3
nezha-fronted/src/components/charts/chart-pie.vue
View File

@@ -326,8 +326,6 @@ export default {
legend && legend.forEach((t,i)=>{t.color = this.bgColorList[i]});
this.$set(this.option,'color',this.bgColorList)
console.log('legend',legend)
this.pieData = seriesItem;
if(area==='showFullScreen'){//全屏按时间查询
this.data = chartItem;
@@ -522,7 +520,6 @@ export default {
self.echartScreen.resize({height: (sumHeight - divHeight - 58)});//图表的高度
setTimeout(function () {
if(self.pieData[0].data.length>0){
console.log('option',self.option)
self.echartScreen.setOption(self.option);//显示全屏界面
self.noData=false;
}else{

3
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -769,7 +769,6 @@
this.chartType = 'line';
}
this.echartModalStore = echarts.init(ele);
console.log('height',ele.clientWidth,ele.clientHeight)
var chartWidth = ele.clientWidth;
var title = {
show:false,
@@ -1107,7 +1106,6 @@
let self=this;
let dom = document.getElementById('screenShowArea')
this.echartModalStore = echarts.init(dom)
console.log('dom',dom.clientWidth,dom.clientHeight)
this.showLegend = true;
if(legend){
this.screenLegendList = [];
@@ -1129,7 +1127,6 @@
if(dataArg[0].data.length<1){
this.echartModalStore.setOption(chartConfig.getOption('noData'))
}else{
console.log(option)
this.echartModalStore.setOption(option);//创建图表
}

1
nezha-fronted/src/components/common/bottomBox/tabs/terminalLogMonitorTab.vue
View File

@@ -104,7 +104,6 @@
};
//登录后，你输入的内容从后台服务返回
this.terminal.on("data",function(data){
console.log(data,'data')
/*
let code = data.charCodeAt(0);
if(code==13){

309
nezha-fronted/src/components/common/nezhaColor.vue Normal file
View File

@@ -0,0 +1,309 @@
<template>
<span v-clickoutside="()=>{exitColor(false)}">
<div class="color-show" v-if="single" ref="colorShow" @click.stop="changeColor">
<div class="color-show-left" :style="{background:colors}"></div>
<span class="color-text"> {{colors}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down" v-if="!showColorPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="showColorPicker"></i>
</span>
</div>
<div class="color-show" v-if="!single" ref="colorShow" @click.stop="changeColor">
<div :style="{background:findColor('bac'),border:'2px solid '+findColor('line'),'line-height':'18px'}" class="color-show-left">
<span :style="{color:findColor('text')}" style="line-height: 18px;">
T
</span>
</div>
</div>
<div v-if="showColorPicker" class="vue-color" :style="{top:position.y+'px',left:position.x+'px'}" ref="colorBox">
<el-row v-if="!single" class="color-tab">
<div v-for="item in valueArr" :key="item.key" :class="[keyName==item.name?'color-active':'']" @click="colorTabChange(item)">{{item.name}}</div>
</el-row>
<sketch v-model="colors" :disableAlpha="true" @input="updateValue" :presetColors="presetColors"/>
</div>
</span>
</template>
<script>
import { Sketch} from 'vue-color'
export default {
name:"nezhaColor",
components:{
Sketch,
},
props:{
valueArr:{
type:Array,
default(){
return []
/*ex
* {
* {name:'name',value:value,key:'name'}
* }
* */
},
},
colorVal:{
},
single:{
type:Boolean,
default(){
return true
},
},
presetColors: {
type: Array,
default () {
return []
}
},
},
watch:{
// valueArr:{
// immediate: true,
// handler(n) {
// console.log(n);
// if(n.length){
//
// }
// }
// },
// keyName:{
// deep:true,
// immediate: true,
// handler(n) {
// console.log(n);
// }
// }
},
data(){
return {
colors:'#ffffff',
keyName:'',
showColorPicker:false,
position:{
x:undefined,
y:undefined,
},
timer:null
}
},
mounted(){
this.colors = this.valueArr[0].value;
this.keyName = this.valueArr[0].name;
},
methods:{
updateValue(color){
this.colors=color.hex;
this.$emit('colorChange',color.hex,this.keyName);
},
changeColor(){
this.showColorPicker=!this.showColorPicker;
if(this.showColorPicker){
window.addEventListener('mousewheel',this.mousewheel);
setTimeout(()=>{
let position=this.$refs.colorShow.getBoundingClientRect();
let colorBox=this.$refs.colorBox.getBoundingClientRect();
let w=window.innerWidth;
let h=window.innerHeight;
//确定x位置
if(position.x + colorBox.width>w){
position.x=w-colorBox.width;
}else{
position.x=position.x
}
//确定Y位置
if(position.y + colorBox.height > h){
position.y=position.y-colorBox.height;
} else{
position.y=position.y+position.height;
}
this.position.x=position.x;
this.position.y=position.y;
})
}else{
window.removeEventListener('mousewheel',this.mousewheel);
}
//
},
colorTabChange(item){
this.keyName=item.name;
this.colors=this.colorVal[item.name];
},
exitColor(){
this.showColorPicker=false;
},
mousewheel(){
if(!this.$refs.colorBox) return;
if(this.timer){
clearTimeout(this.timer);
this.timer=setTimeout(()=>{
let position=this.$refs.colorShow.getBoundingClientRect();
let colorBox=this.$refs.colorBox.getBoundingClientRect();
let w=window.innerWidth;
let h=window.innerHeight;
//确定x位置
if(position.x + colorBox.width>w){
position.x=w-colorBox.width;
}else{
position.x=position.x
}
//确定Y位置
if(position.y + colorBox.height > h){
position.y=position.y-colorBox.height;
} else{
position.y=position.y+position.height;
}
this.position.x=position.x;
this.position.y=position.y;
clearTimeout(this.timer);
this.timer=null;
},200)
} else {
this.timer=setTimeout(()=>{
let position=this.$refs.colorShow.getBoundingClientRect();
let colorBox=this.$refs.colorBox.getBoundingClientRect();
let w=window.innerWidth;
let h=window.innerHeight;
//确定x位置
if(position.x + colorBox.width>w){
position.x=w-colorBox.width;
}else{
position.x=position.x
}
//确定Y位置
if(position.y + colorBox.height > h){
position.y=position.y-colorBox.height;
} else{
position.y=position.y+position.height;
}
this.position.x=position.x;
this.position.y=position.y;
clearTimeout(this.timer);
this.timer=null;
},200)
}
},
findColor(key){
let findItem=this.valueArr.find(item=>item.key==key);
if(findItem){
return this.colorVal[findItem.name]
}else{
return "#000000"
};
}
},
destroyed(){
window.removeEventListener('mousewheel',this.mousewheel);
}
}
</script>
<style scoped>
/deep/ .vc-sketch-field--single, /deep/ .vc-sketch-field .vc-input__label{
display: none;
}
/deep/ .vc-sketch-color-wrap{
margin-left: 16px;
}
/deep/ .vc-sketch-presets{
line-height: 24px;
}
/deep/ .vc-sketch-presets-color {
margin: 0 7px 0 0;
}
.vue-color{
position: fixed;
z-index: 1;
}
.color-content {
height: 0;
width: 0;
overflow: hidden;
position: absolute;
top: 15px;
left: 66px;
}
.color-tab{
height: 28px;
border-radius: 5px 5px 0 0;
border: 1px solid #EBEEF5;
border-bottom: none;
background-color: #FFF;
display: flex;
justify-content: space-between;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
z-index: 2;
}
.color-tab div{
text-align: center;
flex: 1;
color: #909399;
transition: all .3s cubic-bezier(.645,.045,.355,1);
background: #E4E7ED;
cursor: pointer;
border-top: 2px solid transparent;
}
/*.color-tab div:first-child{*/
/*border-right-color: #DCDFE6;*/
/*}*/
.color-tab div:hover{
color: #409EFF;
}
.color-tab .color-active{
background-color: #FFF;
font-size: 14px;
color: #FA901C;
font-weight: 700;
border-color: #FA901C;;
}
.color {
position: relative;
}
.color-show {
border: 1px solid #E7EAED;
border-radius: 5px;
display: flex;
align-items: center;
height: 30px;
}
.color-show .color-text {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
letter-spacing: 0;
font-weight: 400;
}
.color-show-left {
width: 18px;
height: 18px;
border: 1px solid #E7EAED;
border-radius: 5px;
margin: 0 5px;
text-align: center;
}
.color-arrows {
color: #C0C4CC;
position: absolute;
right: 12px;
}
.color-arrows .nz-icon {
font-size: 12px;
}
</style>

413
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -74,7 +74,7 @@
<div class="nz-icon-minus-position">
<span class="nz-icon-minus-medium">
<i @click="removeExpression(index)" class="nz-icon nz-icon-minus"></i>
</span>
</span>
<span class="nz-icon-copy">
<i @click="copyExpression(index)" class="nz-icon nz-icon-override"></i>
</span>
@@ -175,34 +175,7 @@
<el-col class="thresholds-cell" :span="4">
<span v-if="item.level!==0">
<div style="display: inline-block">
<div @click="colorPickerClickTable('colorPickerBac'+item.level,item)"
class="color-show"
v-clickoutside="(e)=>{colorOut(item,e)}"
style="width: 32px"
>
<div :style="{background:item.color.fill,border:'2px solid '+item.color.line,'line-height':'18px'}" class="color-show-left">
<span :style="{color:item.color.text}" style="line-height: 18px;margin-left: 6px">
T
</span>
</div>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
:ref="'colorPickerBac'+item.level"
@active-change="(val)=>colorChangeTable(item,val)"
popper-class="no-style-class"
v-model="item.showColor"
:predefine="predefineColors"
>
</el-color-picker>
</div>
<div
class="color-tab"
v-show="item.showColor">
<div :class="{'color-active':item.showType=='fill'}" @click="changeShowPicker(item ,'fill')">{{$t('project.topology.fill')}}</div>
<div :class="{'color-active':item.showType=='line'}" @click="changeShowPicker(item , 'line')">{{$t('project.topology.lines')}}</div>
<div :class="{'color-active':item.showType=='text'}" @click="changeShowPicker(item , 'text')">{{$t('project.topology.text')}}</div>
</div>
<nezhaColor :value-arr="[{name:'fill',value:item.color.fill,key:'bac'},{name:'line',value:item.color.line,key:'line'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChangeTable(item,val,key)}" :single="false" :color-val="item.color" :presetColors="predefineColors"/>
</div>
</span>
<span v-else>base</span>
@@ -273,10 +246,10 @@
<el-collapse v-model="activeNames">
<!--&lt;!&ndash;位置大小&ndash;&gt;-->
<!--<el-collapse-item :label="$t('project.topology.positionAndSize')" name="3" v-if="selection.pen&&!selection.pen.type">-->
<!--<div class="flex flex-warp">-->
<!--<div class="flex flex-warp">-->
<!--</div>-->
<!--</div>-->
<!--</el-collapse-item>-->
<!--样式-->
<el-collapse-item :title="'Style'" name="4" v-if="selection.pen">
@@ -322,22 +295,7 @@
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
<div>{{$t('project.topology.bac')}}</div>
<div class="p10 pl0">
<div class="color-show" @click="colorPickerClick('fillStyle')">
<div class="color-show-left" :style="{background:selection.pen.fillStyle}"></div>
<span class="color-text"> {{selection.pen.fillStyle}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down" v-if="$refs['fillStyle']&&!$refs['fillStyle'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['fillStyle']&&$refs['fillStyle'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="selection.pen.fillStyle"
ref="fillStyle"
@active-change="(val)=>colorChange(val,'fillStyle')"
>
</el-color-picker>
</div>
<nezhaColor :value-arr="[{name:'fillStyle',value:selection.pen.fillStyle}]" @colorChange="colorChange"/>
</div>
</div>
@@ -345,7 +303,7 @@
<div>{{$t('project.topology.gradient')}}</div>
<div class="p10 pl0 gradient-to">
<el-select v-model="selection.pen.gradientType" size="small"
@change="bkTypeChange" style="width: 60px;border-radius: 4px 0 0 4px;background: #F5F7FA" class="color-before-select">
@change="bkTypeChange" style="width: 60px;border-radius: 4px 0 0 4px;background: #F5F7FA" class="color-before-select" popper-class="color-before-select">
<div slot="prefix">
<i :class="['nz-icon',bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).label,bkTypeOption.find(item1=>item1.id==selection.pen.data.gradientType).fontSize]"></i>
</div>
@@ -356,21 +314,8 @@
</el-option>
<!--el-input__inner-->
</el-select>
<div class="color-show" style="display:inline-block;width: calc(100% - 72px);margin-left: -5px;border-radius: 0 5px 5px 0" @click="colorPickerClick('gradientColor')">
<div class="color-show-left" :style="{background:selection.pen.data.gradientColor,display:'inline-block','margin-top':'5px','margin-left':'12px'}"></div>
<span class="color-text" style="vertical-align: text-bottom"> {{selection.pen.data.gradientColor}}</span>
<span class="color-arrows" style="top: 13px; right: 20px">
<i class="nz-icon nz-icon-arrow-down" v-if="$refs['gradientColor']&&!$refs['gradientColor'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['gradientColor']&&$refs['gradientColor'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="selection.pen.data.gradientColor"
ref="gradientColor"
@active-change="(val)=>colorChange(val,'gradientColor')"
>
</el-color-picker>
<div class="gradient-to-color">
<nezhaColor :value-arr="[{name:'gradientColor',value:selection.pen.data.gradientColor}]" @colorChange="colorChange"/>
</div>
</div>
</div>
@@ -459,7 +404,7 @@
<div>{{$t('project.topology.fromArrow')}}</div>
<div class="p10 pl0">
<el-select v-model="selection.pen.fromArrow" size="small"
@change="onClickFromArrow">
@change="onClickFromArrow">
<div slot="prefix">
<div class="icon-item">
<svg>
@@ -508,7 +453,7 @@
<div>{{$t('project.topology.toArrow')}}</div>
<div class="p10 pl0">
<el-select v-model="selection.pen.toArrow" size="small"
@change="onClickToArrow">
@change="onClickToArrow">
<div slot="prefix">
<div class="icon-item">
<svg>
@@ -575,44 +520,13 @@
<div class="props-pen-item">
<div>{{$t('project.topology.lineColor')}}</div>
<div class="p10 pl0">
<div class="color-show" @click="colorPickerClick('strokeStyle')">
<div class="color-show-left" :style="{background:selection.pen.strokeStyle}"></div>
<span class="color-text"> {{selection.pen.strokeStyle}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down"
v-if="$refs['strokeStyle']&&!$refs['strokeStyle'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['strokeStyle']&&$refs['strokeStyle'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="selection.pen.strokeStyle"
ref="strokeStyle"
@active-change="(val)=>colorChange(val,'strokeStyle')"
>
</el-color-picker>
</div>
<nezhaColor :value-arr="[{name:'strokeStyle',value:selection.pen.strokeStyle}]" @colorChange="colorChange"/>
</div>
</div>
<div class="props-pen-item" v-if="selection.pen.type">
<div>{{$t('project.topology.arrowColor')}}</div>
<div class="p10 pl0">
<div class="color-show" @click="colorPickerClick('toArrowColor')">
<div class="color-show-left" :style="{background:selection.pen.toArrowColor}"></div>
<span class="color-text"> {{selection.pen.toArrowColor}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down" v-if="$refs['toArrowColor']&&!$refs['toArrowColor'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['toArrowColor']&&$refs['toArrowColor'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="selection.pen.toArrowColor"
ref="toArrowColor"
@active-change="(val)=>colorChange(val,'toArrowColor')"
>
</el-color-picker>
</div>
<nezhaColor :value-arr="[{name:'toArrowColor',value:selection.pen.toArrowColor}]" @colorChange="colorChange"/>
</div>
</div>
@@ -651,7 +565,7 @@
<label>{{$t('project.topology.animationType')}}</label>
<div class="full pr10">
<el-select v-model="selection.pen.animateType" size="small"
@change="onAnimate">
@change="onAnimate">
<el-option v-for="(item,index) in lineAnimateOptions" :value="item.id" :key="index"
:label="item.name"></el-option>
</el-select>
@@ -660,24 +574,7 @@
<div class="project-content-item half" v-if="selection.pen.type">
<label>{{$t('project.topology.animationColor')}}</label>
<div class="full pr10">
<div class="color-show" @click="colorPickerClick('animateColor')">
<div class="color-show-left" :style="{background:selection.pen.animateColor}"></div>
<span class="color-text"> {{selection.pen.animateColor}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down"
v-if="$refs['animateColor']&&!$refs['animateColor'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up"
v-if="$refs['animateColor']&&$refs['animateColor'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="selection.pen.animateColor"
ref="animateColor"
@active-change="(val)=>colorChange(val,'animateColor')"
>
</el-color-picker>
</div>
<nezhaColor :value-arr="[{name:'animateColor',value:selection.pen.animateColor}]" @colorChange="colorChange"/>
</div>
</div>
@@ -726,22 +623,9 @@
<div class="project-content-item half">
<label>{{$t('project.topology.fontColor')}}</label>
<div class="full pr10 h32">
<div class="color-show" @click="colorPickerClick('fontColor')">
<div class="color-show-left" :style="{background:topologyData.data.fontColor}"></div>
<span class="color-text"> {{topologyData.data.fontColor}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down" v-if="$refs['fontColor']&&!$refs['fontColor'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['fontColor']&&$refs['fontColor'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="topologyData.data.fontColor"
ref="fontColor"
@active-change="(val)=>changeTopologyOpt(val,'fontColor',true)"
>
</el-color-picker>
</div>
<nezhaColor :value-arr="[{name:'fontColor',value:topologyData.data.fontColor}]" @colorChange="(val,key)=>{
changeTopologyOpt(val,key,true)
}"/>
</div>
</div>
@@ -786,22 +670,9 @@
<div class="project-content-item half">
<label>{{$t('project.topology.bac')}}</label>
<div class="full pr10 h32">
<div class="color-show" @click="colorPickerClick('bkColor')">
<div class="color-show-left" :style="{background:topologyData.data.bkColor}"></div>
<span class="color-text"> {{topologyData.data.bkColor}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down" v-if="$refs['bkColor']&&!$refs['bkColor'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['bkColor']&&$refs['bkColor'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="topologyData.data.bkColor"
ref="bkColor"
@active-change="(val)=>changeTopologyOpt(val,'bkColor',true)"
>
</el-color-picker>
</div>
<nezhaColor :value-arr="[{name:'bkColor',value:topologyData.data.bkColor}]" @colorChange="(val,key)=>{
changeTopologyOpt(val,key,true)
}"/>
</div>
</div>
@@ -813,118 +684,118 @@
</div>
</div>
<!-- <div class="project-content-item half">
<label>{{$t('project.topology.rule')}}</label>
<div class="full pr10 h32">
<el-switch
v-model="topologyData.data.rule"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
@change="changeTopologyOpt(topologyData.data.rule,'rule')">
</el-switch>
</div>
</div>
<!-- <div class="project-content-item half">
<label>{{$t('project.topology.rule')}}</label>
<div class="full pr10 h32">
<el-switch
v-model="topologyData.data.rule"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
@change="changeTopologyOpt(topologyData.data.rule,'rule')">
</el-switch>
</div>
</div>
<div class="project-content-item half special-select">
<label>{{$t('project.topology.defaultStartArrow')}}</label>
<div class="full pr10 h32">
<el-select v-model="topologyData.data.fromArrow" size="small"
<div class="project-content-item half special-select">
<label>{{$t('project.topology.defaultStartArrow')}}</label>
<div class="full pr10 h32">
<el-select v-model="topologyData.data.fromArrow" size="small"
@change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="topologyData.data.fromArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
:strokeWidth="item['stroke-width']"></polygon>
<circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
:stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
</g>
</svg>
</div>
</div>
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':'black'"
stroke-width="1">
<path :d="item.d"></path>
<polygon
v-if="item.points"
:points="item.points"
:fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></polygon>
<circle
v-if="item.cx"
:cx="item.cx"
:cy="item.cy"
:r="item.r"
:fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></circle>
</g>
</svg>
</div>
</el-option>
</el-select>
</div>
</div>
@change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="topologyData.data.fromArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
:strokeWidth="item['stroke-width']"></polygon>
<circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
:stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
</g>
</svg>
</div>
</div>
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':'black'"
stroke-width="1">
<path :d="item.d"></path>
<polygon
v-if="item.points"
:points="item.points"
:fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></polygon>
<circle
v-if="item.cx"
:cx="item.cx"
:cy="item.cy"
:r="item.r"
:fill="(topologyData.data.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.fromArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></circle>
</g>
</svg>
</div>
</el-option>
</el-select>
</div>
</div>
<div class="project-content-item half special-select">
<label>{{$t('project.topology.defaultEndArrow')}}</label>
<div class="full pr10 h32">
<el-select v-model="topologyData.data.toArrow" size="small"
<div class="project-content-item half special-select">
<label>{{$t('project.topology.defaultEndArrow')}}</label>
<div class="full pr10 h32">
<el-select v-model="topologyData.data.toArrow" size="small"
@change="changeTopologyOpt('toArrow')">
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="topologyData.data.toArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
:strokeWidth="item['stroke-width']"></polygon>
<circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
:stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
</g>
</svg>
</div>
</div>
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':'black'"
stroke-width="1">
<path :d="item.d"></path>
<polygon
v-if="item.points"
:points="item.points"
:fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></polygon>
<circle
v-if="item.cx"
:cx="item.cx"
:cy="item.cy"
:r="item.r"
:fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></circle>
</g>
</svg>
</div>
</el-option>
</el-select>
</div>
</div>-->
@change="changeTopologyOpt('toArrow')">
<div slot="prefix">
<div class="icon-item">
<svg>
<g fill="none" stroke="black" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
:key="index" v-if="topologyData.data.toArrow==item.name">
<path :d="item.d"></path>
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
:strokeWidth="item['stroke-width']"></polygon>
<circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
:stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
</g>
</svg>
</div>
</div>
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
<div class="icon-item">
<svg>
<g fill="none" :stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':'black'"
stroke-width="1">
<path :d="item.d"></path>
<polygon
v-if="item.points"
:points="item.points"
:fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></polygon>
<circle
v-if="item.cx"
:cx="item.cx"
:cy="item.cy"
:r="item.r"
:fill="(topologyData.data.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
:stroke="(topologyData.data.toArrow==item.name)?'#ee9d3f':item.stroke"
:strokeWidth="item['stroke-width']"
></circle>
</g>
</svg>
</div>
</el-option>
</el-select>
</div>
</div>-->
</div>
@@ -987,7 +858,7 @@
import chartDataFormat from '../../../charts/chartDataFormat';
import promqlInput from "../../../page/dashboard/explore/promqlInput";
import {getUUID,resetZIndex} from "../../../common/js/common";
import nezhaColor from '../../nezhaColor'
var rz={
methods:{
rz(e){
@@ -1214,12 +1085,13 @@
'#1250B0','#1F60C4','#5794F2',
'#E55400','#FA6400','#FF9830',
'#7C2EA3','#8F3BB8','#B877D9',
]
]
}
},
mixins:[rz],
components:{
promqlInput
promqlInput,
nezhaColor
},
computed:{},
props:{
@@ -1263,10 +1135,10 @@
}
Object.keys(this.topologyData.data).forEach((key)=>{
if(key === 'projectInfo' || key === 'alertInfo' || key==='fontSize' || key === 'align' || key === 'fontColor' || key === 'opacity'){
this.topologyData.data[key]=(JSON.stringify(dataOption.data[key])?dataOption.data[key]:this.topologyData.data[key]);
} else {
this.topologyData.data[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.topologyData.data[key]);
}
this.topologyData.data[key]=(JSON.stringify(dataOption.data[key])?dataOption.data[key]:this.topologyData.data[key]);
} else {
this.topologyData.data[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.topologyData.data[key]);
}
});
},
mounted(){
@@ -1401,7 +1273,6 @@
// console.log(val);
this.selection.pen.data.gradientType=val;
this.$forceUpdate()
console.log(this.selection.pen.gradientType,this.selection.pen.data.gradientType);
if(val===0){
this.selection.pen.bkType=0;
}
@@ -1472,9 +1343,8 @@
this.selection.pen.data[name]=this.colorRGBtoHex(val);
this.onChange();
},
colorChangeTable(item,val){//改变颜色
if(!item.showType){return};
item.color[item.showType]=this.colorRGBtoHex(val);
colorChangeTable(item,val,key){//改变颜色
item.color[key]=this.colorRGBtoHex(val);
},
changeShowPicker(item,type){
this.$refs['colorPickerBac' + item.level][0].showPicker=true;
@@ -1799,7 +1669,6 @@
/deep/ .el-form-item {
margin-bottom: 10px;
}
.half-form-item {
width: calc(50% - 20px);
display: inline-block;
@@ -2050,6 +1919,10 @@
margin-left: 5px;
}
}
.gradient-to-color{
display: inline-block;
width: calc(100% - 70px);
}
}
.icon-item {
@@ -2125,7 +1998,7 @@
border-top: 2px solid transparent;
}
/*.color-tab div:first-child{*/
/*border-right-color: #DCDFE6;*/
/*border-right-color: #DCDFE6;*/
/*}*/
.color-tab div:hover{
color: #409EFF;

1
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -1825,7 +1825,6 @@
getTopology(this.topologyIndex).render();
},
notModuleIDArrChange(id){
console.log(id);
this.notModuleIDArr=this.notModuleIDArr.filter(item=>item.id!==id);
},
//保存

1
nezha-fronted/src/components/common/project/topologyPrev.vue
View File

@@ -1824,7 +1824,6 @@
getTopology(this.topologyIndex).render();
},
notModuleIDArrChange(id){
console.log(id);
this.notModuleIDArr=this.notModuleIDArr.filter(item=>item.id!==id);
},
//保存

6
nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
View File

@@ -159,7 +159,6 @@
if(obj.linkId==-1){
obj.linkId=null;
}
console.log(obj);
this.editAlertSilence=Object.assign(this.editAlertSilence,obj);
this.startAtTamp=new Date(this.editAlertSilence.startAt).getTime();
this.endAtTamp=new Date(this.editAlertSilence.endAt).getTime();
@@ -227,7 +226,6 @@
endAtTamp:'',
optionsEndAt:{
disabledDate(date,val){
console.log( that.startAtTamp,val);
return date.getTime() <= that.startAtTamp - 24*60*60*1000;
},
},
@@ -256,7 +254,6 @@
;
this.prevent_opt.save=true;
this.editAlertSilence.matcher=this.editAlertSilence.ruleId || this.editAlertSilence.linkId ;
console.log(this.editAlertSilence);
this.$refs.alertSilenceForm.validate((valid)=>{
if(this.endAtTamp < this.startAtTamp){
this.$message({
@@ -328,7 +325,6 @@
})
},
dateChange(val,type){
console.log(val)
if(type==='startAt'){
this.editAlertSilence.startAt=bus.timeFormate(new Date(val), 'yyyy-MM-dd hh:mm:ss');
this.startAtTamp=new Date(val).getTime();
@@ -357,12 +353,10 @@
},
matcherChange(val){
this.editAlertSilence.matcher=this.editAlertSilence.ruleId || this.editAlertSilence.linkId;
console.log(this.editAlertSilence,"this.editAlertSilence")
},
silenceChange(val){
this.editAlertSilence.linkId=val.id;
this.editAlertSilence.matcher=this.editAlertSilence.ruleId || this.editAlertSilence.linkId;
console.log(val);
if(this.editAlertSilence.type==='datacenter'){
this.editAlertSilence.name=val.name;
}

1
nezha-fronted/src/components/common/rightBox/menuBox.vue
View File

@@ -220,7 +220,6 @@
},
inputValid:function(val){
return val.replace(/[,]/g,'')
console.log(val)
},
},
mounted() {

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

@@ -384,7 +384,6 @@
});
this.tableData = response.data.list;
this.pageObj.total = response.data.total;
console.info(this.$refs.alertRuleTable)
if (!this.scrollbarWrap) {
this.$nextTick(() => {
this.scrollbarWrap = this.$refs.alertRuleTable.bodyWrapper;

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

@@ -523,7 +523,6 @@
return num>9?num:'0'+num;
},
exportExcel:function(params){
console.log('exporter')
for (let item in params) {
if (params[item]) {
if (item == "alertMessageState") {

3
nezha-fronted/src/components/page/alert/silence.vue
View File

@@ -327,7 +327,6 @@
this.tools.customTableTitle=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;
console.log(this.tools.customTableTitle,this.tableTitle);
this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
this.initEvent();
this.getAlertSilence();
@@ -410,7 +409,6 @@
},
openDelMessageBox:function(){
if(this.batchDeleteObjs.length<1) return;
console.log(this.batchDeleteObjs);
},
showExportDialog(){
this.importBox.show=true;
@@ -439,7 +437,6 @@
this.rightBox.show=true;
},
edit(row){
console.log(123123123123);
this.$get('alert/silence/'+row.id).then(res=>{
this.alertSilence={...res.data};
this.rightBox.show=true;

3
nezha-fronted/src/components/page/config/exprTemp.vue
View File

@@ -284,7 +284,6 @@
this.tools.customTableTitle=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;
console.log(this.tools.customTableTitle,this.tableTitle);
this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
this.initEvent();
this.getexprTemp();
@@ -366,7 +365,6 @@
},
openDelMessageBox:function(){
if(this.batchDeleteObjs.length<1) return;
console.log(this.batchDeleteObjs);
},
showExportDialog(){
this.importBox.show=true;
@@ -396,7 +394,6 @@
this.rightBox.show=true;
},
edit(row){
console.log(123123123123);
this.$get('expression/tmpl/'+row.id).then(res=>{
this.exprTemp={...res.data};
this.rightBox.show=true;

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

@@ -347,7 +347,6 @@
return JSON.parse(JSON.stringify(this.blankPromServer));
},
pageNo(val) {
console.log('page',val)
this.pageObj.pageNo = val;
this.getTableData();
},

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

@@ -310,7 +310,6 @@
this.bottomBox.targetTab = 'monitor';
this.bottomBox.terminalLog = JSON.parse(JSON.stringify(record));
this.bottomBox.showSubList = true;
console.log(record);
},
shutdown(record) {
this.$confirm(this.$t("tip.killTerm"),{

93
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -116,31 +116,9 @@
position: relative;
}
.color-show{
border: 1px solid #E7EAED;
border-radius: 4px;
top: -2px;
align-items: center;
width: 28px;
height: 28px;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
position: relative;
}
.color-show-left{
width: 28px;
height: 28px;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
line-height: 28px;
}
.color-arrows{
color: #fff;
font-weight: bold;
}
.color-arrows .nz-icon{
font-size: 12px;
top: 1px;
}
</style>
@@ -370,33 +348,8 @@
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other half-form-item-other-two">
<el-input size="mini" style="display: inline-block;width:calc(100% - 80px);" type="input" v-model="mapping.text"></el-input>
<!--颜色选择器 start-->
<div @click="colorPickerClick(index)" class="color-show" v-clickoutside="(e)=>{colorOut(index,e)}">
<div :style="{background:mapping.color.bac}" class="color-show-left">
<span :style="{color:mapping.color.text}" class="color-arrows">
<!--<i class="nz-icon nz-icon-arrow-down" v-show="!showPicker[index].bac && !showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
<!--<i class="nz-icon nz-icon-arrow-up" v-show="showPicker[index].bac || showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
T
</span>
</div>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
:ref="'colorPickerBac'+index"
@active-change="(val)=>colorChange(mapping,showPicker[index].bac,val)"
popper-class="no-style-class"
v-model="showPicker[index].bac?mapping.color.bac:mapping.color.text"
>
</el-color-picker>
<!--<el-color-picker-->
<!--v-model="mapping.color.text"-->
<!--:ref="'colorPickerText'+index"-->
<!--@active-change="(val)=>colorChange(mapping,'text',val)"-->
<!--&gt;-->
<!--</el-color-picker>-->
</div>
<div class="color-tab" v-show="showPicker[index].bac || showPicker[index].text">
<div :class="{'color-active':showPicker[index].text}" @click="changeShowPicker(index ,'text')">Text</div>
<div :class="{'color-active':showPicker[index].bac}" @click="changeShowPicker(index , 'bac')">Background</div>
<div class="color-show">
<nezhaColor :value-arr="[{name:'bac',value:showPicker[index].bac,key:'bac'},{name:'text',value:showPicker[index].text,key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}" :single="false" :color-val="mapping.color"/>
</div>
<!--颜色选择器 end-->
<span @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
@@ -416,34 +369,10 @@
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="half-form-item-other-two range" prop="span">
<el-input size="mini" style="display: inline-block;width:calc(100% - 80px);" type="input" v-model="mapping.text" ></el-input>
<!--颜色选择器 start-->
<div @click="colorPickerClick(index)" class="color-show" v-clickoutside="(e)=>{colorOut(index,e)}">
<div :style="{background:mapping.color.bac}" class="color-show-left">
<span :style="{color:mapping.color.text}" class="color-arrows">
<!--<i class="nz-icon nz-icon-arrow-down" v-show="!showPicker[index].bac && !showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
<!--<i class="nz-icon nz-icon-arrow-up" v-show="showPicker[index].bac || showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
T
</span>
</div>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
:ref="'colorPickerBac'+index"
popper-class="no-style-class"
@active-change="(val)=>colorChange(mapping,showPicker[index].bac,val)"
v-model="showPicker[index].bac?mapping.color.bac:mapping.color.text"
>
</el-color-picker>
<!--<el-color-picker-->
<!--v-model="mapping.color.text"-->
<!--:ref="'colorPickerText'+index"-->
<!--@active-change="(val)=>colorChange(mapping,'text',val)"-->
<!--&gt;-->
<!--</el-color-picker>-->
</div>
<div class="color-tab" v-show="showPicker[index].bac || showPicker[index].text">
<div :class="{'color-active':showPicker[index].text}" @click="changeShowPicker(index ,'text')">Text</div>
<div :class="{'color-active':showPicker[index].bac}" @click="changeShowPicker(index , 'bac')">Background</div>
<div class="color-show">
<nezhaColor :value-arr="[{name:'bac',value:showPicker[index].bac,key:'bac'},{name:'text',value:showPicker[index].text,key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}" :single="false" :color-val="mapping.color"/>
</div>
<!--颜色选择器 end-->
<span @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
</el-form-item>
@@ -511,6 +440,7 @@
import {nzNumber} from "../../common/js/validate";
import richTextEditor from "../../charts/richTextEditor";
import selectPanel from "../../common/popBox/selectPanel";
import nezhaColor from '../../common/nezhaColor'
import i18n from "../../common/i18n";
var rz = {
@@ -656,6 +586,7 @@
'promql-input': promqlInput,
'rich-text-editor':richTextEditor,
selectPanel,
nezhaColor,
},
mounted() {
this.$nextTick(() => {
@@ -1607,12 +1538,8 @@
this.showPicker[index][atr]=true;
// atr=atr.toLowerCase().replace(/( |^)[a-z]/g,(L)=>L.toUpperCase());
},
colorChange(mapping,flag,val){
if(flag){
mapping.color['bac']=this.colorRGBtoHex(val)
}else{
mapping.color['text']=this.colorRGBtoHex(val)
}
colorChange(mapping,key,val){
mapping.color[key]=val
},
colorRGBtoHex(color) {
let rgb = color.split(',');

14
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -96,6 +96,7 @@
:width="'auto'"
:custom-class="'nz-temp-box'"
:destroy-on-close="true"
@closed="tempBoxClose"
center>
<el-form v-model="tempBox" class="temp-form-box" ref="tempFormBox" v-if="tempBoxShow">
<span class="temp-form-box-title">Expression</span>
@@ -189,7 +190,6 @@
created(){
this.queryMetrics();
this.getAllOptins();
console.log(123123123);
},
methods:{
closeDropdown(){
@@ -234,7 +234,6 @@
}
//this.metricStore.push({label:item,value:item,insertText:item})
});
console.log(metricMap);
for(let key of metricMap.keys()){
let option={
label:key,
@@ -259,7 +258,6 @@
cb(result)
},
metricChange:function(value){
console.log(value);
if(!value) return;
this.expressionList[this.index]=value;
//this.$refs.editor.setContent(value)
@@ -294,7 +292,6 @@
})
},
lazyLoad(node,data){
console.log(node,data);
if(data.temp){
if(!data.child){
this.tempBoxShowLoading=true;
@@ -314,11 +311,9 @@
this.dropDownVisible=false
this.$get('/expression/tmpl/'+data.id).then(res=>{
if(res.code===200){
console.log(res);
res.data.vars.forEach(item=>{
res.data[item]='';
});
console.log(res.data);
this.tempBox={
...this.tempBox,
...res.data,
@@ -333,7 +328,6 @@
},
tempBoxShowChange(flag){
this.tempBoxShow=flag;
console.log(this.tempBox);
if(flag){
this.cascaderValue="";
let params={};
@@ -359,7 +353,6 @@
}
this.$post('/expression/tmpl/render',params).then(res=>{
console.log(res);
if(res.code===200){
this.tempBoxShow=false;
this.expressionList[this.index]=res.data.expression;
@@ -419,7 +412,10 @@
});
}
},
tempBoxClose(){
this.cascaderValue="";
},

1
nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
View File

@@ -515,7 +515,6 @@
let times=[];
let tzo=(new Date().getTimezoneOffset()/60)*(-1);//系统时区
let time=bus.UTCTimeToConfigTimezone(new Date().getTime()-tzo*60*60*1000);
console.log(time);
for(let i=0;i<10;i++){
time=time-5*60*1000;
times.push(bus.timeFormate(time,'hh:mm'))

1
nezha-fronted/src/store/index.js
View File

@@ -121,7 +121,6 @@ const store = new Vuex.Store({
state.overViewProject=data;
},
setDcDataRefresh(state){
console.log(123)
state.dcDataRefresh=true;
setTimeout(()=>{
state.dcDataRefresh=false;

2
nezha-fronted/static/config.json
View File

@@ -1 +1 @@
{"baseUrl":"/", "version": "1.2.2020.11.10.14.10"}
{"baseUrl":"http://192.168.40.42:8080/nz-admin/", "version": "1.2.2020.11.10.14.10"}