fix：修改根据valuemapping判断时 动画给不上的问题 ，修改 再次点击同一节点的tab切换问题
feat：添加projec Title的显示
This commit is contained in:
zhangyu
@@ -1022,6 +1022,10 @@ const cn = {
|
||||
fromArrow:"起点箭头",
|
||||
toArrow:"终点箭头",
|
||||
arrowColor:"箭头颜色",
|
||||
fontSize:'字体大小',
|
||||
fontColor:'字体颜色',
|
||||
align:'对齐',
|
||||
opacity:'透明度',
|
||||
},
|
||||
},
|
||||
date:{
|
||||
|
||||
@@ -1028,6 +1028,10 @@ const en = {
|
||||
fromArrow:"From arrow",
|
||||
toArrow:"To arrow",
|
||||
arrowColor:"Arrow color",
|
||||
fontSize:'Font Size',
|
||||
fontColor:'Font Color',
|
||||
align:'Align',
|
||||
opacity:'Opacity',
|
||||
},
|
||||
},
|
||||
date:{
|
||||
|
||||
@@ -820,6 +820,78 @@
|
||||
@change="changeTopologyOpt"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half">
|
||||
<label>{{$t('project.topology.fontSize')}}</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:precision="2"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="fontSize"
|
||||
class="input"
|
||||
v-model.number="topologyData.data.fontSize"
|
||||
:readonly="readonly"
|
||||
required
|
||||
:min="10"
|
||||
@change="changeTopologyOpt(topologyData.data.fontSize,'fontSize')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half">
|
||||
<label>{{$t('project.topology.align')}}</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-radio-group v-model="topologyData.data.align" size="small" @change="changeTopologyOpt">
|
||||
<el-radio-button label="left">left</el-radio-button>
|
||||
<el-radio-button label="bottom">center</el-radio-button>
|
||||
<el-radio-button label="right">right</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half">
|
||||
<label>{{$t('project.topology.opacity')}}</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:precision="2"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="fontSize"
|
||||
class="input"
|
||||
v-model.number="topologyData.data.opacity"
|
||||
:readonly="readonly"
|
||||
required
|
||||
:step="0.2"
|
||||
:min="0"
|
||||
@change="changeTopologyOpt(topologyData.data.opacity,'opacity')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-title">
|
||||
@@ -858,82 +930,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half">
|
||||
<label>{{$t('project.topology.defaultLineWidth')}}</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:precision="2"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="x"
|
||||
class="input"
|
||||
v-model.number="topologyData.data.lineWidth"
|
||||
required
|
||||
:min="1"
|
||||
@change="changeTopologyOpt(topologyData.data.lineWidth,'lineWidth')">
|
||||
</el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half">
|
||||
<label>{{$t('project.topology.grids')}}</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-switch
|
||||
v-model="topologyData.data.grid"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
active-color="#ee9d3f"
|
||||
@change="changeTopologyOpt(topologyData.data.grid,'grid')">
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half">
|
||||
<label>{{$t('project.topology.gridSize')}}</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:precision="2"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="x"
|
||||
:min="0"
|
||||
class="input"
|
||||
v-model.number="topologyData.data.gridSize"
|
||||
:readonly="readonly"
|
||||
required
|
||||
@change="changeTopologyOpt(topologyData.data.gridSize,'gridSize')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half">
|
||||
<label>{{$t('project.topology.gridColor')}}</label>
|
||||
<div class="full pr10 h32">
|
||||
<div class="color-show" @click="colorPickerClick('gridColor')">
|
||||
<div class="color-show-left" :style="{background:topologyData.data.gridColor}"></div>
|
||||
<span class="color-text"> {{topologyData.data.gridColor}}</span>
|
||||
<span class="color-arrows">
|
||||
<i class="nz-icon nz-icon-arrow-down" v-if="$refs['gridColor']&&!$refs['gridColor'].showPicker"></i>
|
||||
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['gridColor']&&$refs['gridColor'].showPicker"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="color-content" ref="color-content">
|
||||
<el-color-picker
|
||||
v-model="topologyData.data.gridColor"
|
||||
ref="gridColor"
|
||||
@active-change="(val)=>changeTopologyOpt(val,'gridColor',true)"
|
||||
>
|
||||
</el-color-picker>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half">
|
||||
<!-- <div class="project-content-item half">
|
||||
<label>{{$t('project.topology.rule')}}</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-switch
|
||||
@@ -946,28 +943,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half">
|
||||
<label>{{$t('project.topology.ruleColor')}}</label>
|
||||
<div class="full pr10 h32">
|
||||
<div class="color-show" @click="colorPickerClick('ruleColor')">
|
||||
<div class="color-show-left" :style="{background:topologyData.data.ruleColor}"></div>
|
||||
<span class="color-text"> {{topologyData.data.ruleColor}}</span>
|
||||
<span class="color-arrows">
|
||||
<i class="nz-icon nz-icon-arrow-down" v-if="$refs['ruleColor']&&!$refs['ruleColor'].showPicker"></i>
|
||||
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['ruleColor']&&$refs['ruleColor'].showPicker"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="color-content" ref="color-content">
|
||||
<el-color-picker
|
||||
v-model="topologyData.data.ruleColor"
|
||||
ref="ruleColor"
|
||||
@active-change="(val)=>changeTopologyOpt(val,'ruleColor',true)"
|
||||
>
|
||||
</el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half special-select">
|
||||
<label>{{$t('project.topology.defaultStartArrow')}}</label>
|
||||
<div class="full pr10 h32">
|
||||
@@ -1066,7 +1041,7 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1212,6 +1187,10 @@
|
||||
projectInfo:true,
|
||||
alertInfo:true,
|
||||
url:'',
|
||||
fontSize:14,
|
||||
align:'left',
|
||||
fontColor:"#000000",
|
||||
opacity:1,
|
||||
}
|
||||
},
|
||||
pen:{
|
||||
@@ -1379,12 +1358,11 @@
|
||||
},
|
||||
created(){
|
||||
let dataOption=getTopology(this.index).data;
|
||||
console.log(dataOption);
|
||||
if(!dataOption.data){
|
||||
dataOption.data={}
|
||||
}
|
||||
Object.keys(this.topologyData.data).forEach((key)=>{
|
||||
if(key === 'projectInfo' || key === 'alertInfo'){
|
||||
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]);
|
||||
@@ -1397,9 +1375,8 @@
|
||||
// this.topologyData.data.rule= !!dataOption.rule;
|
||||
// this.topologyData.data.projectInfo= !!dataOption.projectInfo;
|
||||
// this.topologyData.data.alertInfo= !!dataOption.alertInfo;
|
||||
console.log(this.topologyData);
|
||||
},
|
||||
updated(){
|
||||
updated(n,o){
|
||||
if(!this.selection.pen){//没选中node line返回
|
||||
return;
|
||||
}
|
||||
@@ -1455,7 +1432,6 @@
|
||||
})
|
||||
},
|
||||
tabClick(n){
|
||||
console.log(n);
|
||||
if(this.selection.pen&&this.tab=='1'){
|
||||
|
||||
}
|
||||
@@ -1473,7 +1449,6 @@
|
||||
this.onChange()
|
||||
},
|
||||
onChange(value){
|
||||
console.log(value,this.selection.pen.lineWidth)
|
||||
if(value==='lineWidth'){
|
||||
this.selection.pen.lineWidth=this.selection.pen.data.lineWidth;
|
||||
}
|
||||
@@ -1538,8 +1513,6 @@
|
||||
colorPickerClickTable(ref,row){
|
||||
row.showColor=row.color.fill;
|
||||
row.showType='fill';
|
||||
console.log(row);
|
||||
console.log(this.$refs[ref]);
|
||||
this.$nextTick(()=>{
|
||||
this.$refs[ref][0].showPicker=true;
|
||||
})
|
||||
@@ -1577,7 +1550,6 @@
|
||||
flag=true
|
||||
}
|
||||
})
|
||||
console.log(obj,flag);
|
||||
if(flag){
|
||||
return
|
||||
}
|
||||
@@ -1594,13 +1566,12 @@
|
||||
this.topologyData.data[key]=val;
|
||||
}
|
||||
Object.keys(this.topologyData.data).forEach((key1)=>{
|
||||
if(key1 === 'projectInfo' || key1 === 'alertInfo'){
|
||||
if(key1 === 'projectInfo' || key1 === 'alertInfo' || key1==='fontSize' || key1 === 'align' || key1 === 'fontColor' || key1 === 'opacity'){
|
||||
getTopology(this.index).data.data[key1]=this.topologyData.data[key1];
|
||||
} else {
|
||||
getTopology(this.index).data[key1]=this.topologyData.data[key1];
|
||||
}
|
||||
});
|
||||
// console.log(dataOption[key]);
|
||||
getTopology(this.index).render();
|
||||
},
|
||||
colorRGBtoHex(color){//获取颜色16进制数
|
||||
@@ -1673,7 +1644,7 @@
|
||||
});
|
||||
},
|
||||
valueMappingValueChange(index,row){
|
||||
console.log(index,row)
|
||||
|
||||
},
|
||||
valueMappingDel(index,row){
|
||||
this.selection.pen.data.valueMapping.splice(index,1);
|
||||
@@ -1682,7 +1653,6 @@
|
||||
});
|
||||
},
|
||||
inputFocus(e){
|
||||
console.log(e.path[2].children[0],e.path[2].children[1]);
|
||||
e.path[2].children[0].setAttribute("tabindex","0");
|
||||
e.path[2].children[1].setAttribute("tabindex","1");
|
||||
},
|
||||
@@ -1772,6 +1742,9 @@
|
||||
.half.project-content-item {
|
||||
width: calc(50% - 15px);
|
||||
height: 64px;
|
||||
label{
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.project-content-item {
|
||||
|
||||
@@ -312,6 +312,7 @@ export function myCubeAnchors(node) {//立方体锚点
|
||||
|
||||
|
||||
export function onChangeAnimate(node,animateType,fillStyle,strokeStyle) {
|
||||
node.animateType=animateType;
|
||||
if (node.animateType === 'custom') {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<div class="tooltip-box" style="display: flex;" v-if="isChart||chartData.tooltipShow">
|
||||
<span class="temp-dom"></span>
|
||||
<div class="tooltip-box-chart" style="" v-if="isChart||(chartData.displayChart&&chartData.tooltipShow&&chartData.expressArr.length)">
|
||||
<line-chart-block v-if="isChart || chartData.type !== 'table'"
|
||||
<line-chart-block v-show="isChart || chartData.type !== 'table'"
|
||||
:key="'inner' + chartData.id"
|
||||
:from="'project'"
|
||||
:ref="'editChart' + 0"
|
||||
:ref="chartData.type !== 'table'?'editChart' + chartData.type:'editChart'"
|
||||
:temp-dom="tempDom"
|
||||
:panel-id="-1"
|
||||
:is-lock="true"
|
||||
@@ -13,17 +13,15 @@
|
||||
:chartTitleShow="false"
|
||||
:chart-data="chartData">
|
||||
</line-chart-block>
|
||||
<chart-table v-show="isChart || chartData.type === 'table'"
|
||||
:key="'inner' + 1"
|
||||
:from="'project'"
|
||||
ref="editCharttable"
|
||||
:is-lock="true"
|
||||
:panel-id="-1"
|
||||
:chart-data="chartData"
|
||||
:chart-index="0"></chart-table>
|
||||
</div>
|
||||
|
||||
<!--<chart-table v-if="chartData.type === 'table'"-->
|
||||
<!--:ref="'editChart'+0"-->
|
||||
<!--:key="'inner' + 0"-->
|
||||
<!--:from="'project'"-->
|
||||
<!--:ref="'editChart' + 0"-->
|
||||
<!--:is-lock="true"-->
|
||||
<!--:panel-id="-1"-->
|
||||
<!--:chart-data="chartData"-->
|
||||
<!--:chart-index="0"></chart-table>-->
|
||||
<div class="tooltip-box-info" v-if="!isChart">
|
||||
<expression-info :chart-data="chartData" :filterTime="filterTime"/>
|
||||
</div>
|
||||
@@ -33,6 +31,7 @@
|
||||
<script>
|
||||
import chart from '../../../page/dashboard/overview/chart';
|
||||
import lineChartBlock from '../../../charts/line-chart-block';
|
||||
import chartTable from '../../../charts/chart-table';
|
||||
import bus from "../../../../libs/bus";
|
||||
import axios from 'axios';
|
||||
import ExpressionInfo from "../popData/expressionInfo";
|
||||
@@ -41,6 +40,7 @@
|
||||
components:{
|
||||
ExpressionInfo,
|
||||
lineChartBlock,
|
||||
chartTable,
|
||||
},
|
||||
props:{
|
||||
chartDataParent:{
|
||||
@@ -56,7 +56,6 @@
|
||||
chartDataParent:{
|
||||
immediate: true,
|
||||
handler(n){
|
||||
console.log(n);
|
||||
this.process(n)
|
||||
},
|
||||
|
||||
@@ -65,7 +64,7 @@
|
||||
data(){
|
||||
return{
|
||||
tempDom: {height: 400, width: ""},
|
||||
chartDataTemp:{"id":8832,"prev":null,"next":null,"panelId":0,"title":"123","span":12,"height":400,"createAt":"2021-01-27 07:36:19","type":"line","unit":2,"weight":0,"pid":null,"buildIn":null,"seq":null,"param":{"last":0,"legendValue":{"total":"off","min":"off","avg":"off","last":"off","max":"off"},"threshold":"","valueMapping":{"mapping":[{"color":{"bac":"#fff","text":"#000"},"text":"","value":""}],"type":"text"},"url":"","nullType":"connected"},"elements":[{"id":14926,"chartId":null,"expression":"cache_evictions_total","type":"expert","legend":"","buildIn":null,"seq":null},{"id":14927,"chartId":null,"expression":"appDevice","type":"expert","legend":"","buildIn":null,"seq":null}],"sync":null,"asset":null,"isLoaded":true,"from":"__vue_devtool_undefined__","draggable":true,"resizable":true,"editable":true},
|
||||
chartDataTemp:{"id":8832,"prev":null,"next":null,"panelId":0,"title":"123","span":12,"height":400,"createAt":"2021-01-27 07:36:19","unit":2,"weight":0,"pid":null,"buildIn":null,"seq":null,"param":{"last":0,"legendValue":{"total":"off","min":"off","avg":"off","last":"off","max":"off"},"threshold":"","url":"","nullType":"connected"},"sync":null,"asset":null,"isLoaded":true,"from":"__vue_devtool_undefined__","draggable":true,"resizable":true,"editable":true},
|
||||
chartData:{},
|
||||
filter:{
|
||||
end_time:bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss'),
|
||||
@@ -120,8 +119,8 @@
|
||||
const len = chartItem.elements.length;
|
||||
if (len === 0) {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs['editChart' + chartItem.id]) {
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId, this.filter, []);
|
||||
if (this.$refs['editChart' + chartItem.type]) {
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId, this.filter, []);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@@ -151,7 +150,6 @@
|
||||
setTimeout(()=>{
|
||||
this.$nextTick(() => {
|
||||
let res=chartItem.res;
|
||||
console.log(res);
|
||||
if (res.length > 0) {
|
||||
let series = [];
|
||||
let singleStatRlt = '';
|
||||
@@ -168,17 +166,7 @@
|
||||
if (response.status === 'success') {
|
||||
errorMsg = "";
|
||||
if (response.data.result) {
|
||||
// 循环处理每个elements下获取的数据列
|
||||
if (chartItem.type === 'singleStat') {
|
||||
if (response.data.result.length === 1) {
|
||||
let statistics = chartItem.param.statistics;
|
||||
if (response.data.result[0].values) {
|
||||
singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values);
|
||||
}
|
||||
} else if (response.data.result.length > 1) {
|
||||
singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
|
||||
}
|
||||
} else {
|
||||
// 循环处理每个elements下获取的数据
|
||||
response.data.result.forEach((queryItem, resIndex) => {
|
||||
let seriesItem = {
|
||||
theData: {
|
||||
@@ -198,11 +186,6 @@
|
||||
metric_name: '',
|
||||
};
|
||||
|
||||
if (chartInfo.type === 'stackArea') {
|
||||
seriesItem.theData.type = 'line';
|
||||
seriesItem.theData.stack = chartInfo.title;
|
||||
seriesItem.theData.areaStyle = {"opacity": 0.3};
|
||||
}
|
||||
if((chartInfo.type === 'line'||chartInfo.type === 'stackArea'||chartInfo.type === 'bar')&& chartInfo.param && chartInfo.param.threshold){
|
||||
seriesItem.theData.markLine={
|
||||
silent: true,
|
||||
@@ -238,7 +221,7 @@
|
||||
return [item[0], [item[1][0], Number(item[1][1])]]
|
||||
});
|
||||
// 判断是否有数据, && tagsArr.length > 0
|
||||
if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id]) {
|
||||
if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.type]) {
|
||||
tagsArr.forEach((tag, i) => {
|
||||
if (tag !== '__name__') {
|
||||
host += `${tag}="${queryItem.metric[tag]}",`;
|
||||
@@ -254,7 +237,7 @@
|
||||
host = chartItem.elements[innerPos].expression;
|
||||
}
|
||||
//处理legend别名
|
||||
let alias = this.$refs['editChart' + chartItem.id].dealLegendAlias(host, chartItem.elements[innerPos].legend);
|
||||
let alias = this.$refs['editChart' + chartItem.type].dealLegendAlias(host, chartItem.elements[innerPos].legend);
|
||||
if (!alias || alias === '') {
|
||||
alias = host;
|
||||
}
|
||||
@@ -288,21 +271,9 @@
|
||||
});
|
||||
series.push(seriesItem.theData);
|
||||
seriesItem = null;
|
||||
} else if (chartItem.elements && chartItem.elements[innerPos]) {
|
||||
// 无数据提示
|
||||
/*
|
||||
const currentInfo = chartItem.elements[innerPos];
|
||||
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
|
||||
this.$message.warning({
|
||||
duration: 15,
|
||||
content: errorMsg,
|
||||
closable: true,
|
||||
});
|
||||
*/
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (response.msg) {
|
||||
//this.$message.error(response.msg);
|
||||
@@ -316,7 +287,7 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
if (this.$refs['editChart' + chartItem.id]) {
|
||||
if (this.$refs['editChart' + chartItem.type]) {
|
||||
let chartData = {
|
||||
chartItem: chartItem,
|
||||
series: series,
|
||||
@@ -329,61 +300,23 @@
|
||||
errorMsg: errorMsg,
|
||||
}
|
||||
if (chartItem.type === 'table') {//表格
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, tableData,
|
||||
this.filter.panelId, this.filter, filterType, errorMsg);
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, tableData,
|
||||
this.filter.panelId, this.filter, '', errorMsg);
|
||||
}
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, tableData,this.filter.panelId, this.filter, filterType, errorMsg);
|
||||
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
|
||||
if (series.length && chartItem.type === 4) {//曲线汇总
|
||||
//series.push(sumData);//后续需要
|
||||
}
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, series,
|
||||
this.filter.panelId, this.filter, legend, filterType, errorMsg);
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, series,
|
||||
this.filter.panelId, this.filter, legend, '', errorMsg);
|
||||
}
|
||||
} else if (chartItem.type === 'singleStat') {
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, singleStatRlt,
|
||||
this.filter.panelId, this.filter, filterType, errorMsg);
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, singleStatRlt,
|
||||
this.filter.panelId, this.filter, '', errorMsg);
|
||||
}
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, series,this.filter.panelId, this.filter, legend, '', errorMsg);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const type = chartItem.type;
|
||||
if (this.$refs['editChart' + chartItem.id] ) {
|
||||
if (this.$refs['editChart' + chartItem.type] ) {
|
||||
if (type === 'table') {
|
||||
if (filterType === 'showFullScreen') {//table的全屏查询
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
|
||||
this.filter, filterType);
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
|
||||
this.filter);
|
||||
}
|
||||
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
|
||||
if (filterType === 'showFullScreen') {//table的全屏查询
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
|
||||
this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
|
||||
this.filter, filterType);
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
|
||||
this.filter);
|
||||
}
|
||||
} else if (chartItem.type === 'singleStat') {
|
||||
if (filterType === 'showFullScreen') {//全屏查询
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, '',
|
||||
this.filter.panelId, this.filter, filterType);
|
||||
} else {
|
||||
this.$refs['editChart' + chartItem.id].setData(chartItem, '',
|
||||
this.filter.panelId, this.filter);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="tool-top" id="tool-top">
|
||||
<div id="undo" :class="['top-tool-item',cachesIndex>0?'':'top-tool-item-disabled']" @click="undo"> <i class="nz-icon nz-icon-revoke" /> </div>
|
||||
<div id="redo" :class="['top-tool-item',redoFlag?'':'top-tool-item-disabled']" @click="redo"> <i class="nz-icon nz-icon-revoke1" /> </div>
|
||||
<div id="undo" :class="['top-tool-item',cachesIndex>0?'':'top-tool-item-disabled']" @click="undo"> <i class="nz-icon nz-icon-revoke" :title="'撤销'"/> </div>
|
||||
<div id="redo" :class="['top-tool-item',redoFlag?'':'top-tool-item-disabled']" @click="redo"> <i class="nz-icon nz-icon-revoke1" :title="'重做'"/> </div>
|
||||
<!--<div class="top-tool-item" @click="centerView"> 居中</div>-->
|
||||
<!--<div class="top-tool-item" @click="fitView"> 自适应</div>-->
|
||||
<!--<div :class="['top-tool-item',toolShow.node?'tool-item-active':'']" @click="toolShowChange('node')"> 节点工具 </div>-->
|
||||
@@ -19,6 +19,7 @@
|
||||
popper-class="scale-number-popover"
|
||||
>
|
||||
<div class="scale-num-pop" style=" width: 91px;min-width: 91px">
|
||||
<div>缩放级别</div>
|
||||
<div @click="scale(50)" :class="['scale-num-pop',scaleNum==50?'is-active':'']">50</div>
|
||||
<div @click="scale(100)" :class="['scale-num-pop',scaleNum==100?'is-active':'']">100</div>
|
||||
<div @click="scale(200)" :class="['scale-num-pop',scaleNum==200?'is-active':'']">200</div>
|
||||
@@ -28,6 +29,26 @@
|
||||
<span class="scale-number-add scale-number-symbol" @click="changeScale(25)">+</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="top-tool-item top-tool-item-switch">
|
||||
<label>{{$t('project.topology.grids')}}</label>
|
||||
<el-switch
|
||||
v-model="option.grid"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
active-color="#ee9d3f"
|
||||
@change="changeOption('grid')">
|
||||
</el-switch>
|
||||
</div>
|
||||
<div class="top-tool-item top-tool-item-switch">
|
||||
<label>{{$t('project.topology.rule')}}</label>
|
||||
<el-switch
|
||||
v-model="option.rule"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
active-color="#ee9d3f"
|
||||
@change="changeOption('rule')">
|
||||
</el-switch>
|
||||
</div>
|
||||
<!--<div class="top-tool-item" @click="clear"> 清空画布 </div>-->
|
||||
|
||||
</div>
|
||||
@@ -46,6 +67,8 @@
|
||||
fromArrow:'',
|
||||
toArrow:'triangleSolid',
|
||||
scale:100,
|
||||
grid:false,
|
||||
rule:false,
|
||||
},
|
||||
scaleNum:100,
|
||||
penLineType:[
|
||||
@@ -88,7 +111,7 @@
|
||||
if(key==='scale'){
|
||||
this.scaleNum=(JSON.stringify(dataOption[key])?dataOption[key]*100:this.scaleNum)
|
||||
}else{
|
||||
this.option[key]=(dataOption[key]?dataOption[key]:this.option[key]);
|
||||
this.option[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.option[key]);
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -96,6 +119,7 @@
|
||||
// todo 1清空后的 处理属性工具的默认值 2工具栏的移动 以及节点工具和属性工具的移动 3 结束箭头类型的方向
|
||||
changeOption(key){
|
||||
getTopology(this.index).data[key]=this.option[key];
|
||||
getTopology(this.index).render();
|
||||
},
|
||||
undo(){//撤销
|
||||
getTopology(this.index).undo();
|
||||
@@ -133,14 +157,16 @@
|
||||
clear(){
|
||||
let data={...getTopology(this.index).data};
|
||||
data.pens=[];
|
||||
getTopology(this.index).open(data);
|
||||
getTopology(this.index).open({});
|
||||
},
|
||||
toolShowChange(attr){
|
||||
this.$emit('toolShowChange',attr);
|
||||
}
|
||||
},
|
||||
changeOpt(key,val){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.scale-number-popover{
|
||||
@@ -242,6 +268,12 @@
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.top-tool-item-switch{
|
||||
padding: 5px 11px;
|
||||
label{
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.top-tool-item-disabled{
|
||||
color: #CECECE;
|
||||
opacity: 0.3;
|
||||
|
||||
@@ -5,63 +5,6 @@
|
||||
<template>
|
||||
<div class="project-box" v-loading="topologyLoading" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
|
||||
<!--project主要信息-->
|
||||
<div class="facade-top" v-if="!editTopologyFlag&&!fromOverView">
|
||||
<div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
|
||||
<div class="facade-top-title">
|
||||
Project information
|
||||
</div>
|
||||
<div>
|
||||
<!--<span><span class="label">Id :</span>{{projectInfo.id}}</span>-->
|
||||
<span><span class="label">Name :</span>{{projectInfo.name}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
|
||||
</div>
|
||||
<!--<div>-->
|
||||
<!--<span>-->
|
||||
<!--<span class="label">Alert state :</span>-->
|
||||
<!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
|
||||
<!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
|
||||
<!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
|
||||
<!--</span>-->
|
||||
<!--</div>-->
|
||||
<div>
|
||||
<span><span class="label">Module Num :</span>{{projectInfo.moduleMum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
|
||||
<div class="facade-top-title">
|
||||
<span class="label" style="padding-left: 0;">Alert :</span>
|
||||
{{projectInfo.total}}
|
||||
</div>
|
||||
<div class="facade-top-right-content">
|
||||
<div>
|
||||
<div class="content-P1-title">
|
||||
{{returnSeverityLabel('P1')}}
|
||||
</div>
|
||||
<div>
|
||||
{{projectInfo.alertStat[0] || 0}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="content-P2-title">
|
||||
{{returnSeverityLabel('P2')}}
|
||||
</div>
|
||||
<div>
|
||||
{{projectInfo.alertStat[1] || 0}}
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom: 20px;">
|
||||
<div class="content-P3-title">
|
||||
{{returnSeverityLabel('P3')}}
|
||||
</div>
|
||||
<div>
|
||||
{{projectInfo.alertStat[2] || 0}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-title" v-if="showTopTools&&!fromOverView&&!fromPrev" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
|
||||
<div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
|
||||
<!--工具栏-->
|
||||
@@ -131,6 +74,7 @@
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<el-option :disabled="true" :value="false">默认连线类型</el-option>
|
||||
<el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
@@ -174,7 +118,69 @@
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<span class="edit-topologyLine float-right" style="padding-top: 5px" v-show="!editTopologyFlag">
|
||||
<div style="width: 100%;display: flex;justify-content: space-between">
|
||||
<div class="facade-top" v-if="!editTopologyFlag&&!fromOverView">
|
||||
<div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
|
||||
<div class="facade-top-title">
|
||||
Project information
|
||||
</div>
|
||||
<div>
|
||||
<!--<span><span class="label">Id :</span>{{projectInfo.id}}</span>-->
|
||||
<span><span class="label">Name :</span>{{projectInfo.name}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
|
||||
</div>
|
||||
<!--<div>-->
|
||||
<!--<span>-->
|
||||
<!--<span class="label">Alert state :</span>-->
|
||||
<!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
|
||||
<!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
|
||||
<!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
|
||||
<!--</span>-->
|
||||
<!--</div>-->
|
||||
<div>
|
||||
<span><span class="label">Module Num :</span>{{projectInfo.moduleMum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
|
||||
<div class="facade-top-title">
|
||||
<span class="label" style="padding-left: 0;">Alert :</span>
|
||||
{{projectInfo.total}}
|
||||
</div>
|
||||
<div class="facade-top-right-content">
|
||||
<div>
|
||||
<div class="content-P1-title">
|
||||
{{returnSeverityLabel('P1')}}
|
||||
</div>
|
||||
<div>
|
||||
{{projectInfo.alertStat[0] || 0}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="content-P2-title">
|
||||
{{returnSeverityLabel('P2')}}
|
||||
</div>
|
||||
<div>
|
||||
{{projectInfo.alertStat[1] || 0}}
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom: 20px;">
|
||||
<div class="content-P3-title">
|
||||
{{returnSeverityLabel('P3')}}
|
||||
</div>
|
||||
<div>
|
||||
{{projectInfo.alertStat[2] || 0}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.type,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
|
||||
<span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag">
|
||||
|
||||
|
||||
|
||||
<button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right pickTime"
|
||||
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button"
|
||||
>
|
||||
@@ -185,6 +191,7 @@
|
||||
ref="pickTime"></pick-time>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<!--画布部分-->
|
||||
<div :id="'topology-canvas' + topologyIndexF" class="full" :ref="'topology-canvas'+ topologyIndexF"></div>
|
||||
@@ -364,6 +371,13 @@
|
||||
bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
|
||||
bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
|
||||
],
|
||||
topologyInfo:{
|
||||
fontSize:14,
|
||||
align:'left',
|
||||
fontColor:"#000000",
|
||||
opacity:1,
|
||||
name:'',
|
||||
},
|
||||
saveData:{},
|
||||
dataLength:0,
|
||||
editTopologyFlag:false,
|
||||
@@ -445,6 +459,7 @@
|
||||
projectInfoShow:false,
|
||||
projectAlertShow:false,
|
||||
previewShow:false,
|
||||
penId:undefined,
|
||||
};
|
||||
},
|
||||
components:{
|
||||
@@ -634,7 +649,6 @@
|
||||
getTopology(this.topologyIndex).centerView(50);
|
||||
setTimeout(()=>{
|
||||
getTopology(this.topologyIndex).data.pens.forEach(item=>{
|
||||
console.log(item.animatePlay,123123123123123123123)
|
||||
if(item.animatePlay){
|
||||
item.stopAnimate();
|
||||
setTimeout(()=>{
|
||||
@@ -694,6 +708,7 @@
|
||||
Promise.all(promiseArr).then((res)=>{
|
||||
getTopology(this.topologyIndex).open(data);
|
||||
getTopology(this.topologyIndex).lock(1);
|
||||
this.objChange=false;
|
||||
if(this.fromOverView){
|
||||
let flag=false;
|
||||
|
||||
@@ -712,9 +727,9 @@
|
||||
flag=true
|
||||
}
|
||||
});
|
||||
getTopology(this.topologyIndex).centerView(50);
|
||||
setTimeout(()=>{
|
||||
getTopology(this.topologyIndex).data.pens.forEach(item=>{
|
||||
console.log(item.animatePlay,123123123123123123123)
|
||||
if(item.animatePlay){
|
||||
item.stopAnimate();
|
||||
setTimeout(()=>{
|
||||
@@ -757,9 +772,7 @@
|
||||
}
|
||||
this.$get('/project/topo',{projectId:this.obj.id}).then(res=>{
|
||||
let data=res.data.topo;
|
||||
console.log(data,'topo')
|
||||
if(!res.data.topo || !data.pens){
|
||||
console.log(123123123123);
|
||||
data={
|
||||
bkColor:'#FFFFFF',
|
||||
gridSize:10,
|
||||
@@ -770,8 +783,16 @@
|
||||
this.projectInfoShow=true;
|
||||
this.projectAlertShow=true;
|
||||
this.saveData={...data};
|
||||
this.topologyInfo.name=this.obj.name;
|
||||
resolve(data);
|
||||
}else{
|
||||
this.topologyInfo={
|
||||
fontSize:data.data.fontSize,
|
||||
align:data.data.align,
|
||||
fontColor:data.data.fontColor,
|
||||
opacity:data.data.opacity,
|
||||
name:data.name
|
||||
}
|
||||
let timer=setInterval(()=>{
|
||||
if(!this.imgInit){
|
||||
return
|
||||
@@ -802,7 +823,6 @@
|
||||
}
|
||||
|
||||
Promise.all(promiseArr).then(res=>{
|
||||
console.log(res);
|
||||
res.forEach((response,index)=>{
|
||||
let item=data.pens[index];
|
||||
if(item.type===0){
|
||||
@@ -820,7 +840,6 @@
|
||||
item.data.state.alert=true;
|
||||
}
|
||||
item.data.state.error= item.data.state.asset || item.data.state.endpoint || item.data.state.alert;
|
||||
console.log(item.data);
|
||||
}
|
||||
});
|
||||
self.saveData={...data};
|
||||
@@ -854,7 +873,6 @@
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if(maxLevel!==0){
|
||||
if(pen.type===0){// 判断valueMapping 给相应的状态
|
||||
let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
|
||||
@@ -1036,7 +1054,6 @@
|
||||
|
||||
//显示module的工具
|
||||
showNodeTools(index,pen){
|
||||
console.log(pen);
|
||||
this.nodesArr.forEach((item,i)=>{
|
||||
item.data.show=i===index;
|
||||
})
|
||||
@@ -1104,7 +1121,7 @@
|
||||
},
|
||||
|
||||
onMessage(event,data,e){
|
||||
console.log('onMessage',event,data);
|
||||
// console.log('onMessage',event,data);
|
||||
// console.log(getTopology(this.topologyIndex))
|
||||
if(getTopology(this.topologyIndex)){
|
||||
this.cachesIndex=getTopology(this.topologyIndex).caches.index;
|
||||
@@ -1141,8 +1158,8 @@
|
||||
level:0,
|
||||
base:true,
|
||||
}],
|
||||
expressArr:[],
|
||||
legends:[],
|
||||
expressArr:[""],
|
||||
legends:[""],
|
||||
tooltipShow:true,
|
||||
panelName:'topologyName',
|
||||
unit:2,
|
||||
@@ -1175,8 +1192,8 @@
|
||||
level:0,
|
||||
base:true,
|
||||
}],
|
||||
expressArr:[],
|
||||
legends:[],
|
||||
expressArr:[""],
|
||||
legends:[""],
|
||||
tooltipShow:true,
|
||||
panelName:'topologyName',
|
||||
unit:2,
|
||||
@@ -1188,7 +1205,6 @@
|
||||
url:'',
|
||||
};
|
||||
data.animateColor='#FA901C'
|
||||
console.log(data);
|
||||
}
|
||||
if(data.type===0||data.type===1){
|
||||
data.lineWidth=data.data.lineWidth;
|
||||
@@ -1247,8 +1263,11 @@
|
||||
};
|
||||
this.$nextTick(()=>{
|
||||
if(this.$refs.CanvasProps){
|
||||
if(this.penId!==data.id){
|
||||
this.$refs.CanvasProps.tab='1';
|
||||
}
|
||||
this.penId=data.id;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'line':
|
||||
@@ -1268,8 +1287,11 @@
|
||||
}
|
||||
this.$nextTick(()=>{
|
||||
if(this.$refs.CanvasProps){
|
||||
if(this.penId!==data.id){
|
||||
this.$refs.CanvasProps.tab='1';
|
||||
}
|
||||
this.penId=data.id;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'multi':
|
||||
@@ -1284,6 +1306,7 @@
|
||||
};
|
||||
break;
|
||||
case 'space':
|
||||
this.penId=undefined;
|
||||
this.props={
|
||||
node:null,
|
||||
line:null,
|
||||
@@ -1321,7 +1344,6 @@
|
||||
}
|
||||
break;
|
||||
case 'resize':
|
||||
console.log(this.topologyIndexF);
|
||||
let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
|
||||
this.toolShow.attrCord=[domRect.width-350,0];
|
||||
this.toolShow.height=domRect.height;
|
||||
@@ -1577,6 +1599,7 @@
|
||||
getTopology(this.topologyIndex).lock(0);
|
||||
getTopology(this.topologyIndex).data.pens.forEach((item)=>{//停止动画 以及赋值默认data
|
||||
item.stopAnimate();
|
||||
item.animateType=item.data.animateType;
|
||||
if(item.type===0){
|
||||
item.fillStyle=item.data.fillStyle;
|
||||
item.strokeStyle=item.data.strokeStyle;
|
||||
@@ -1631,8 +1654,12 @@
|
||||
});
|
||||
if(flag){
|
||||
this.editTopologyFlag=false;
|
||||
topologyData.rule=false;
|
||||
topologyData.grid=false;
|
||||
topologyData.gridSize=10;
|
||||
topologyData.pens.forEach(item=>{
|
||||
item.animatePlay=item.data.animatePlay;
|
||||
item.data.animateType=item.animateType;
|
||||
if(item.type===0&&JSON.stringify(item.data.imageId)){
|
||||
item.image="";
|
||||
item.animateFrames=[];
|
||||
@@ -1700,7 +1727,9 @@
|
||||
data.pens.forEach((item)=>{
|
||||
item.animatePlay=item.data.animatePlay;
|
||||
});
|
||||
this.topoPrevData=data;
|
||||
this.topoPrevData=JSON.parse(JSON.stringify(data));
|
||||
this.topoPrevData.rule=false;
|
||||
this.topoPrevData.grid=false;
|
||||
this.previewShow=true;
|
||||
},
|
||||
/*tools 方法*/
|
||||
@@ -1739,12 +1768,10 @@
|
||||
}
|
||||
},
|
||||
previewBeforeClose(done){
|
||||
console.log(123123123123);
|
||||
this.$emit('changeTopologyIndexF');
|
||||
done();
|
||||
},
|
||||
selpopIs(pen,state){//判断是否有图表
|
||||
console.log(pen,state)
|
||||
let flag=true;
|
||||
if(state.id==='other'){
|
||||
flag=false;
|
||||
@@ -1755,7 +1782,6 @@
|
||||
return flag
|
||||
},
|
||||
modelPopError(pen,state){
|
||||
console.log(pen,state)
|
||||
return false;
|
||||
if(item.id==='asset'&&this.activeModelItem.assetError){
|
||||
return true;
|
||||
@@ -2072,16 +2098,13 @@
|
||||
.facade-top{
|
||||
min-height: 138px;
|
||||
display: flex;
|
||||
margin: 12px 0;
|
||||
margin: 4px 0;
|
||||
height: calc(16% - 40px);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 15px;
|
||||
z-index: 10;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.facade-top > div{
|
||||
height: calc(100% - 40px);
|
||||
width: 18%;
|
||||
min-width: 315px;
|
||||
background: #FFFFFF;
|
||||
@@ -2275,7 +2298,7 @@
|
||||
}
|
||||
|
||||
.special-select /deep/ .el-select-dropdown {
|
||||
width: 75px !important;
|
||||
width: 130px !important;
|
||||
|
||||
.el-select-dropdown__item {
|
||||
padding: 0 0 0 10px;
|
||||
|
||||
@@ -5,63 +5,6 @@
|
||||
<template>
|
||||
<div class="project-box" v-loading="topologyLoading" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
|
||||
<!--project主要信息-->
|
||||
<div class="facade-top" v-if="!editTopologyFlag&&!fromOverView">
|
||||
<div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
|
||||
<div class="facade-top-title">
|
||||
Project information
|
||||
</div>
|
||||
<div>
|
||||
<!--<span><span class="label">Id :</span>{{projectInfo.id}}</span>-->
|
||||
<span><span class="label">Name :</span>{{projectInfo.name}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
|
||||
</div>
|
||||
<!--<div>-->
|
||||
<!--<span>-->
|
||||
<!--<span class="label">Alert state :</span>-->
|
||||
<!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
|
||||
<!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
|
||||
<!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
|
||||
<!--</span>-->
|
||||
<!--</div>-->
|
||||
<div>
|
||||
<span><span class="label">Module Num :</span>{{projectInfo.moduleMum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
|
||||
<div class="facade-top-title">
|
||||
<span class="label" style="padding-left: 0;">Alert :</span>
|
||||
{{projectInfo.total}}
|
||||
</div>
|
||||
<div class="facade-top-right-content">
|
||||
<div>
|
||||
<div class="content-P1-title">
|
||||
{{returnSeverityLabel('P1')}}
|
||||
</div>
|
||||
<div>
|
||||
{{projectInfo.alertStat[0] || 0}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="content-P2-title">
|
||||
{{returnSeverityLabel('P2')}}
|
||||
</div>
|
||||
<div>
|
||||
{{projectInfo.alertStat[1] || 0}}
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom: 20px;">
|
||||
<div class="content-P3-title">
|
||||
{{returnSeverityLabel('P3')}}
|
||||
</div>
|
||||
<div>
|
||||
{{projectInfo.alertStat[2] || 0}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-title" v-if="showTopTools&&!fromOverView&&!fromPrev" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
|
||||
<div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
|
||||
<!--工具栏-->
|
||||
@@ -131,6 +74,7 @@
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<el-option :disabled="true" :value="false">默认连线类型</el-option>
|
||||
<el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
@@ -174,7 +118,69 @@
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<span class="edit-topologyLine float-right" style="padding-top: 5px" v-show="!editTopologyFlag">
|
||||
<div style="width: 100%;display: flex;justify-content: space-between">
|
||||
<div class="facade-top" v-if="!editTopologyFlag&&!fromOverView">
|
||||
<div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
|
||||
<div class="facade-top-title">
|
||||
Project information
|
||||
</div>
|
||||
<div>
|
||||
<!--<span><span class="label">Id :</span>{{projectInfo.id}}</span>-->
|
||||
<span><span class="label">Name :</span>{{projectInfo.name}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
|
||||
</div>
|
||||
<!--<div>-->
|
||||
<!--<span>-->
|
||||
<!--<span class="label">Alert state :</span>-->
|
||||
<!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
|
||||
<!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
|
||||
<!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
|
||||
<!--</span>-->
|
||||
<!--</div>-->
|
||||
<div>
|
||||
<span><span class="label">Module Num :</span>{{projectInfo.moduleMum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
|
||||
<div class="facade-top-title">
|
||||
<span class="label" style="padding-left: 0;">Alert :</span>
|
||||
{{projectInfo.total}}
|
||||
</div>
|
||||
<div class="facade-top-right-content">
|
||||
<div>
|
||||
<div class="content-P1-title">
|
||||
{{returnSeverityLabel('P1')}}
|
||||
</div>
|
||||
<div>
|
||||
{{projectInfo.alertStat[0] || 0}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="content-P2-title">
|
||||
{{returnSeverityLabel('P2')}}
|
||||
</div>
|
||||
<div>
|
||||
{{projectInfo.alertStat[1] || 0}}
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom: 20px;">
|
||||
<div class="content-P3-title">
|
||||
{{returnSeverityLabel('P3')}}
|
||||
</div>
|
||||
<div>
|
||||
{{projectInfo.alertStat[2] || 0}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.type,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
|
||||
<span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag">
|
||||
|
||||
|
||||
|
||||
<button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right pickTime"
|
||||
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button"
|
||||
>
|
||||
@@ -185,6 +191,7 @@
|
||||
ref="pickTime"></pick-time>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<!--画布部分-->
|
||||
<div :id="'topology-canvas' + topologyIndexF" class="full" :ref="'topology-canvas'+ topologyIndexF"></div>
|
||||
@@ -364,6 +371,13 @@
|
||||
bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
|
||||
bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
|
||||
],
|
||||
topologyInfo:{
|
||||
fontSize:14,
|
||||
align:'left',
|
||||
fontColor:"#000000",
|
||||
opacity:1,
|
||||
name:'',
|
||||
},
|
||||
saveData:{},
|
||||
dataLength:0,
|
||||
editTopologyFlag:false,
|
||||
@@ -445,6 +459,7 @@
|
||||
projectInfoShow:false,
|
||||
projectAlertShow:false,
|
||||
previewShow:false,
|
||||
penId:undefined,
|
||||
};
|
||||
},
|
||||
components:{
|
||||
@@ -634,7 +649,6 @@
|
||||
getTopology(this.topologyIndex).centerView(50);
|
||||
setTimeout(()=>{
|
||||
getTopology(this.topologyIndex).data.pens.forEach(item=>{
|
||||
console.log(item.animatePlay,123123123123123123123)
|
||||
if(item.animatePlay){
|
||||
item.stopAnimate();
|
||||
setTimeout(()=>{
|
||||
@@ -694,6 +708,7 @@
|
||||
Promise.all(promiseArr).then((res)=>{
|
||||
getTopology(this.topologyIndex).open(data);
|
||||
getTopology(this.topologyIndex).lock(1);
|
||||
this.objChange=false;
|
||||
if(this.fromOverView){
|
||||
let flag=false;
|
||||
|
||||
@@ -712,9 +727,9 @@
|
||||
flag=true
|
||||
}
|
||||
});
|
||||
getTopology(this.topologyIndex).centerView(50);
|
||||
setTimeout(()=>{
|
||||
getTopology(this.topologyIndex).data.pens.forEach(item=>{
|
||||
console.log(item.animatePlay,123123123123123123123)
|
||||
if(item.animatePlay){
|
||||
item.stopAnimate();
|
||||
setTimeout(()=>{
|
||||
@@ -757,9 +772,7 @@
|
||||
}
|
||||
this.$get('/project/topo',{projectId:this.obj.id}).then(res=>{
|
||||
let data=res.data.topo;
|
||||
console.log(data,'topo')
|
||||
if(!res.data.topo || !data.pens){
|
||||
console.log(123123123123);
|
||||
data={
|
||||
bkColor:'#FFFFFF',
|
||||
gridSize:10,
|
||||
@@ -770,8 +783,16 @@
|
||||
this.projectInfoShow=true;
|
||||
this.projectAlertShow=true;
|
||||
this.saveData={...data};
|
||||
this.topologyInfo.name=this.obj.name;
|
||||
resolve(data);
|
||||
}else{
|
||||
this.topologyInfo={
|
||||
fontSize:data.data.fontSize,
|
||||
align:data.data.align,
|
||||
fontColor:data.data.fontColor,
|
||||
opacity:data.data.opacity,
|
||||
name:data.name
|
||||
}
|
||||
let timer=setInterval(()=>{
|
||||
if(!this.imgInit){
|
||||
return
|
||||
@@ -802,7 +823,6 @@
|
||||
}
|
||||
|
||||
Promise.all(promiseArr).then(res=>{
|
||||
console.log(res);
|
||||
res.forEach((response,index)=>{
|
||||
let item=data.pens[index];
|
||||
if(item.type===0){
|
||||
@@ -820,7 +840,6 @@
|
||||
item.data.state.alert=true;
|
||||
}
|
||||
item.data.state.error= item.data.state.asset || item.data.state.endpoint || item.data.state.alert;
|
||||
console.log(item.data);
|
||||
}
|
||||
});
|
||||
self.saveData={...data};
|
||||
@@ -854,7 +873,6 @@
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if(maxLevel!==0){
|
||||
if(pen.type===0){// 判断valueMapping 给相应的状态
|
||||
let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
|
||||
@@ -1036,7 +1054,6 @@
|
||||
|
||||
//显示module的工具
|
||||
showNodeTools(index,pen){
|
||||
console.log(pen);
|
||||
this.nodesArr.forEach((item,i)=>{
|
||||
item.data.show=i===index;
|
||||
})
|
||||
@@ -1104,7 +1121,7 @@
|
||||
},
|
||||
|
||||
onMessage(event,data,e){
|
||||
console.log('onMessage',event,data);
|
||||
// console.log('onMessage',event,data);
|
||||
// console.log(getTopology(this.topologyIndex))
|
||||
if(getTopology(this.topologyIndex)){
|
||||
this.cachesIndex=getTopology(this.topologyIndex).caches.index;
|
||||
@@ -1141,8 +1158,8 @@
|
||||
level:0,
|
||||
base:true,
|
||||
}],
|
||||
expressArr:[],
|
||||
legends:[],
|
||||
expressArr:[""],
|
||||
legends:[""],
|
||||
tooltipShow:true,
|
||||
panelName:'topologyName',
|
||||
unit:2,
|
||||
@@ -1175,8 +1192,8 @@
|
||||
level:0,
|
||||
base:true,
|
||||
}],
|
||||
expressArr:[],
|
||||
legends:[],
|
||||
expressArr:[""],
|
||||
legends:[""],
|
||||
tooltipShow:true,
|
||||
panelName:'topologyName',
|
||||
unit:2,
|
||||
@@ -1188,7 +1205,6 @@
|
||||
url:'',
|
||||
};
|
||||
data.animateColor='#FA901C'
|
||||
console.log(data);
|
||||
}
|
||||
if(data.type===0||data.type===1){
|
||||
data.lineWidth=data.data.lineWidth;
|
||||
@@ -1247,8 +1263,11 @@
|
||||
};
|
||||
this.$nextTick(()=>{
|
||||
if(this.$refs.CanvasProps){
|
||||
if(this.penId!==data.id){
|
||||
this.$refs.CanvasProps.tab='1';
|
||||
}
|
||||
this.penId=data.id;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'line':
|
||||
@@ -1268,8 +1287,11 @@
|
||||
}
|
||||
this.$nextTick(()=>{
|
||||
if(this.$refs.CanvasProps){
|
||||
if(this.penId!==data.id){
|
||||
this.$refs.CanvasProps.tab='1';
|
||||
}
|
||||
this.penId=data.id;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'multi':
|
||||
@@ -1284,6 +1306,7 @@
|
||||
};
|
||||
break;
|
||||
case 'space':
|
||||
this.penId=undefined;
|
||||
this.props={
|
||||
node:null,
|
||||
line:null,
|
||||
@@ -1321,7 +1344,6 @@
|
||||
}
|
||||
break;
|
||||
case 'resize':
|
||||
console.log(this.topologyIndexF);
|
||||
let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
|
||||
this.toolShow.attrCord=[domRect.width-350,0];
|
||||
this.toolShow.height=domRect.height;
|
||||
@@ -1577,6 +1599,7 @@
|
||||
getTopology(this.topologyIndex).lock(0);
|
||||
getTopology(this.topologyIndex).data.pens.forEach((item)=>{//停止动画 以及赋值默认data
|
||||
item.stopAnimate();
|
||||
item.animateType=item.data.animateType;
|
||||
if(item.type===0){
|
||||
item.fillStyle=item.data.fillStyle;
|
||||
item.strokeStyle=item.data.strokeStyle;
|
||||
@@ -1631,8 +1654,12 @@
|
||||
});
|
||||
if(flag){
|
||||
this.editTopologyFlag=false;
|
||||
topologyData.rule=false;
|
||||
topologyData.grid=false;
|
||||
topologyData.gridSize=10;
|
||||
topologyData.pens.forEach(item=>{
|
||||
item.animatePlay=item.data.animatePlay;
|
||||
item.data.animateType=item.animateType;
|
||||
if(item.type===0&&JSON.stringify(item.data.imageId)){
|
||||
item.image="";
|
||||
item.animateFrames=[];
|
||||
@@ -1700,7 +1727,9 @@
|
||||
data.pens.forEach((item)=>{
|
||||
item.animatePlay=item.data.animatePlay;
|
||||
});
|
||||
this.topoPrevData=data;
|
||||
this.topoPrevData=JSON.parse(JSON.stringify(data));
|
||||
this.topoPrevData.rule=false;
|
||||
this.topoPrevData.grid=false;
|
||||
this.previewShow=true;
|
||||
},
|
||||
/*tools 方法*/
|
||||
@@ -1739,12 +1768,10 @@
|
||||
}
|
||||
},
|
||||
previewBeforeClose(done){
|
||||
console.log(123123123123);
|
||||
this.$emit('changeTopologyIndexF');
|
||||
done();
|
||||
},
|
||||
selpopIs(pen,state){//判断是否有图表
|
||||
console.log(pen,state)
|
||||
let flag=true;
|
||||
if(state.id==='other'){
|
||||
flag=false;
|
||||
@@ -1755,7 +1782,6 @@
|
||||
return flag
|
||||
},
|
||||
modelPopError(pen,state){
|
||||
console.log(pen,state)
|
||||
return false;
|
||||
if(item.id==='asset'&&this.activeModelItem.assetError){
|
||||
return true;
|
||||
@@ -2072,16 +2098,13 @@
|
||||
.facade-top{
|
||||
min-height: 138px;
|
||||
display: flex;
|
||||
margin: 12px 0;
|
||||
margin: 4px 0;
|
||||
height: calc(16% - 40px);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 15px;
|
||||
z-index: 10;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.facade-top > div{
|
||||
height: calc(100% - 40px);
|
||||
width: 18%;
|
||||
min-width: 315px;
|
||||
background: #FFFFFF;
|
||||
@@ -2275,7 +2298,7 @@
|
||||
}
|
||||
|
||||
.special-select /deep/ .el-select-dropdown {
|
||||
width: 75px !important;
|
||||
width: 130px !important;
|
||||
|
||||
.el-select-dropdown__item {
|
||||
padding: 0 0 0 10px;
|
||||
|
||||
Reference in New Issue
Block a user