419 lines
15 KiB
Vue
419 lines
15 KiB
Vue
|
<template>
|
||
|
|
<div class="nz-chart-resize">
|
||
|
|
<div class="resize-shadow" ref="resizeShadow"></div>
|
||
|
|
<div class="resize-box resize-box-table" ref="resizeBox">
|
||
|
|
<div class="vis-network" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
|
||
|
|
<loading :ref="'localLoading'+chartIndex"></loading>
|
||
|
|
<div class="clearfix chartTitle text-right" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||
|
|
<el-popover
|
||
|
|
v-if="isError"
|
||
|
|
:close-delay=10
|
||
|
|
placement="top-start"
|
||
|
|
trigger="hover"
|
||
|
|
popper-class="chart-error-popper">
|
||
|
|
<div >{{errorContent}}</div>
|
||
|
|
<span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
|
||
|
|
<i class="nz-icon nz-icon-warning fa"></i>
|
||
|
|
<span class="panel-info-corner-inner"></span>
|
||
|
|
</span>
|
||
|
|
</el-popover>
|
||
|
|
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
|
||
|
|
<span></span>
|
||
|
|
<span>
|
||
|
|
<span class="chart-title-text">{{chartData.title}}</span>
|
||
|
|
<!--<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>-->
|
||
|
|
</span>
|
||
|
|
<span>
|
||
|
|
<i class="nz-icon nz-icon-edit float-right"></i>
|
||
|
|
<i class="nz-icon nz-icon-zoomin float-right"></i>
|
||
|
|
<i class="nz-icon nz-icon-exit-full-screen float-right"></i>
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="vis-network-content">
|
||
|
|
<topology :nodesArray="nodesArray" :edgesArray="edgesArray" @setTopologyData="setTopologyData" :isFullScreen="false" ref="topology"></topology>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import a from './a.png'
|
||
|
|
import b from './b.png'
|
||
|
|
import c from './c.png'
|
||
|
|
import d from './d.png'
|
||
|
|
import e from './e.png'
|
||
|
|
import f from './f.png'
|
||
|
|
import bus from '@/libs/bus';
|
||
|
|
import {Loading} from 'element-ui';
|
||
|
|
import chartDataFormat from '@/components/charts/chartDataFormat'
|
||
|
|
import loading from "@/components/common/loading";
|
||
|
|
import timePicker from '@/components/common/timePicker';
|
||
|
|
import topology from './topology'
|
||
|
|
export default {
|
||
|
|
name: 'visNetwork',
|
||
|
|
components: {
|
||
|
|
'loading': loading,
|
||
|
|
'time-picker':timePicker,
|
||
|
|
'topology':topology,
|
||
|
|
},
|
||
|
|
props:{
|
||
|
|
chartIndex:{
|
||
|
|
type: Number,
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
chartData: {
|
||
|
|
type: Object
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
//其他
|
||
|
|
tableHeight: 0,
|
||
|
|
data: {}, // 该图表信息,chartItem
|
||
|
|
unit:{},
|
||
|
|
isError:false,
|
||
|
|
errorContent:'',
|
||
|
|
pageSizes:[50,100,200],
|
||
|
|
pageObj: {
|
||
|
|
pageNo: 1,
|
||
|
|
pageSize: 50,
|
||
|
|
total: 0
|
||
|
|
},
|
||
|
|
screenPageObj:{
|
||
|
|
pageNo: 1,
|
||
|
|
pageSize: 50,
|
||
|
|
total: 0
|
||
|
|
},
|
||
|
|
storedTableData:[],
|
||
|
|
storedScreanTableData:[],
|
||
|
|
seriesItem: [], // 保存信息
|
||
|
|
seriesItemScreen:[],//全屏数据
|
||
|
|
images: '',
|
||
|
|
loading:Object,
|
||
|
|
items: {
|
||
|
|
metric_name: [], // 每条数据列名称
|
||
|
|
xAxis: [],
|
||
|
|
theData: [], // series数据组
|
||
|
|
},
|
||
|
|
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||
|
|
firstLoad: true, // 是否第一次加载
|
||
|
|
chartType: 'table', // 图表类型
|
||
|
|
screenModal: false,
|
||
|
|
// 查询数据使用
|
||
|
|
filter: {
|
||
|
|
start_time: '',
|
||
|
|
end_time: '',
|
||
|
|
},
|
||
|
|
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
|
||
|
|
firstShow: false, // 默认不显示操作按钮,
|
||
|
|
caretShow:false,
|
||
|
|
dragTitleShow:false,
|
||
|
|
dropdownMenuShow:false,
|
||
|
|
divFirstShow:false,
|
||
|
|
columns: [
|
||
|
|
{
|
||
|
|
title:'Element',
|
||
|
|
key:'element',
|
||
|
|
sortable: true
|
||
|
|
}
|
||
|
|
, {
|
||
|
|
title: '采集时间',
|
||
|
|
key: 'time',
|
||
|
|
width: 160,
|
||
|
|
render: (h, params) => h('span', bus.timeFormate(params.row.time, 'yyyy-MM-dd hh:mm:ss')),
|
||
|
|
}, {
|
||
|
|
title: '数值',
|
||
|
|
key: 'value',
|
||
|
|
width: 160,
|
||
|
|
sortable: true,
|
||
|
|
render: (h, params) => h('span', this.getNumStr(params.row.value)),
|
||
|
|
}],
|
||
|
|
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
|
||
|
|
oldSearchTime: [],
|
||
|
|
nodesArray:[
|
||
|
|
{ id: 1, label: "model",
|
||
|
|
image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',
|
||
|
|
shape:'image',shapeProperties:{useImageSize:false},
|
||
|
|
x:1,y:-63,
|
||
|
|
imgId:0,
|
||
|
|
scaling:{min:0.5,max:10,}
|
||
|
|
},
|
||
|
|
{id: 2, imgId:1, scaling:{min:0.5,max:10,}, label: "model", x:-236,y:-163, image: a, shape:'image',shapeProperties:{useImageSize:false}},
|
||
|
|
{id: 3, imgId:2, scaling:{min:0.5,max:10,}, label: "model", x:-346,y:-155, image: b, shape:'image',shapeProperties:{useImageSize:false}},
|
||
|
|
{id: 4, imgId:3, scaling:{min:0.5,max:10,}, label: "model", x:-129,y:169, image: c, shape:'image',shapeProperties:{useImageSize:false}},
|
||
|
|
{id: 5, imgId:4, scaling:{min:0.5,max:10,}, label: "model", x:-388,y:35, image: d, shape:'image',shapeProperties:{useImageSize:false}},
|
||
|
|
{id: 6, imgId:5, scaling:{min:0.5,max:10,}, label: "model", x:-345,y:-53, image: e, shape:'image',shapeProperties:{useImageSize:false}},
|
||
|
|
{id: 7, imgId:6, scaling:{min:0.5,max:10,}, label: "model", x:316,y:22, image: f, shape:'image',shapeProperties:{useImageSize:false}},
|
||
|
|
],
|
||
|
|
edgesArray:[
|
||
|
|
{id: 0,from: 2, to: 1, dashes:[15,15],label:"hahah",arrows:'from;to', color: {color:'#ff4500',highlight:'#ff4500',hover:'#ff4500',opacity:1.0}},
|
||
|
|
{id: 1,from: 3, to: 1, dashes:[15,15],label:"hahah",arrows:'from',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
|
||
|
|
{id: 2,from: 5, to: 4, dashes:[15,15],label:"hahah",arrows:'to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
|
||
|
|
{id: 3,from: 4, to: 1, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
|
||
|
|
{id: 4,from: 4, to: 6, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
|
||
|
|
{id: 5,from: 1, to: 7, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
methods:{
|
||
|
|
// 其他
|
||
|
|
filterShowData(source,pageObj){
|
||
|
|
return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
|
||
|
|
},
|
||
|
|
startResize(e) {
|
||
|
|
let vm = this;
|
||
|
|
this.$chartResizeTool.start(vm, this.data, e);
|
||
|
|
},
|
||
|
|
screenPageNo(val) {
|
||
|
|
this.screenPageObj.pageNo = val;
|
||
|
|
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
|
||
|
|
},
|
||
|
|
screenPageSize(val) {
|
||
|
|
this.screenPageObj.pageSize = val;
|
||
|
|
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
|
||
|
|
},
|
||
|
|
startLoading(area){
|
||
|
|
if(area==='screen'){
|
||
|
|
this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
|
||
|
|
}else {
|
||
|
|
this.$refs['localLoading'+this.chartIndex].startLoading();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
endLoading(area){
|
||
|
|
if(area==='screen'){
|
||
|
|
this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
|
||
|
|
}else {
|
||
|
|
this.$refs['localLoading'+this.chartIndex].endLoading();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
resize(chartItem) {
|
||
|
|
let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
|
||
|
|
let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
|
||
|
|
container.style.height = `calc(100% - ${deHeight*2}px)`;
|
||
|
|
this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
|
||
|
|
this.$nextTick(() => {
|
||
|
|
container.querySelector(".el-table__body-wrapper")._ps_.update();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
showLoad(chartItem) {
|
||
|
|
//设置高度 chart-table
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.resize(chartItem);
|
||
|
|
});
|
||
|
|
this.startLoading();
|
||
|
|
this.divFirstShow = true;
|
||
|
|
},
|
||
|
|
// 重新请求数据 刷新操作-local
|
||
|
|
refreshChart() {
|
||
|
|
this.dropdownMenuShow=false;
|
||
|
|
this.startLoading();
|
||
|
|
this.firstShow = false;
|
||
|
|
this.$emit('on-refresh-data', this.data.id);
|
||
|
|
},
|
||
|
|
// 编辑图表
|
||
|
|
editChart() {
|
||
|
|
this.dropdownMenuShow=false;
|
||
|
|
this.$emit('on-edit-chart-block', this.data.id);
|
||
|
|
},
|
||
|
|
// 删除该图表
|
||
|
|
removeChart() {
|
||
|
|
this.dropdownMenuShow=false;
|
||
|
|
this.$emit('on-remove-chart-block', this.data.id);
|
||
|
|
},
|
||
|
|
//全屏时间条件查询
|
||
|
|
dateChange(time) {
|
||
|
|
this.searchTime = [...time];
|
||
|
|
this.seriesItemScreen = [];
|
||
|
|
for(let i=0;i<8;i++){
|
||
|
|
this.seriesItemScreen.push({//表格数据
|
||
|
|
element:'',
|
||
|
|
time: '',//采集时间
|
||
|
|
value: '',//数值
|
||
|
|
});
|
||
|
|
}
|
||
|
|
this.startLoading('screen');
|
||
|
|
this.$emit('on-search-data', this.data.id, this.searchTime);
|
||
|
|
},
|
||
|
|
clickos() {
|
||
|
|
this.dropdownMenuShow=false;
|
||
|
|
},
|
||
|
|
clearChart(){
|
||
|
|
this.data = {};
|
||
|
|
},
|
||
|
|
duplicate(){
|
||
|
|
this.dropdownMenuShow=false;
|
||
|
|
const param = {id:this.data.id};
|
||
|
|
this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
|
||
|
|
if (response.code === 200) {
|
||
|
|
this.$message({
|
||
|
|
duration: 2000,
|
||
|
|
type: 'success',
|
||
|
|
message: this.$t("tip.duplicateSuccess")
|
||
|
|
});
|
||
|
|
this.$emit('on-duplicate-chart-block', this.data.id,response.data);
|
||
|
|
}else {
|
||
|
|
if(response.msg){
|
||
|
|
this.$message.error(response.msg);
|
||
|
|
}else if(response.error){
|
||
|
|
this.$message.error(response.error);
|
||
|
|
}else {
|
||
|
|
this.$message.error(response);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 全屏查看
|
||
|
|
showAllScreen() {
|
||
|
|
this.dropdownMenuShow=false;
|
||
|
|
// 初始化同步时间
|
||
|
|
this.searchTime = [];
|
||
|
|
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
|
||
|
|
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
|
||
|
|
this.$refs.calendarPanel.setCustomTime(this.searchTime);
|
||
|
|
|
||
|
|
this.seriesItemScreen = this.seriesItem;
|
||
|
|
this.screenModal = true;
|
||
|
|
if(this.$refs.topologyFull){
|
||
|
|
setTimeout(()=>{
|
||
|
|
this.$refs.topologyFull.resetAllNodes();
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 设置数据, filter区分
|
||
|
|
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
|
||
|
|
if(errorMsg && errorMsg!==''){
|
||
|
|
this.isError = true;
|
||
|
|
this.errorContent = errorMsg;
|
||
|
|
}else {
|
||
|
|
this.isError = false;
|
||
|
|
this.errorContent = '';
|
||
|
|
}
|
||
|
|
if(area==='showFullScreen'){//全屏按时间查询
|
||
|
|
this.data = chartItem;
|
||
|
|
this.unit = chartDataFormat.getUnit(this.data.unit);
|
||
|
|
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
|
||
|
|
this.searchTime[1] = filter.end_time;
|
||
|
|
// this.seriesItemScreen = seriesItem;
|
||
|
|
this.storedScreanTableData=seriesItem;
|
||
|
|
this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
|
||
|
|
this.screenPageObj.total=this.storedScreanTableData.length;
|
||
|
|
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj);
|
||
|
|
this.endLoading('screen');
|
||
|
|
} else{
|
||
|
|
//设置高度 chart-table
|
||
|
|
this.divFirstShow = true;
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.resize(chartItem);
|
||
|
|
});
|
||
|
|
this.firstShow = true; // 展示操作按键
|
||
|
|
|
||
|
|
this.panelIdInner = panelId;
|
||
|
|
this.data = chartItem;
|
||
|
|
this.unit = chartDataFormat.getUnit(this.data.unit);
|
||
|
|
this.storedTableData =seriesItem;
|
||
|
|
this.storedScreanTableData=seriesItem;
|
||
|
|
this.storedTableData=Object.assign([],this.storedTableData.reverse());
|
||
|
|
this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
|
||
|
|
this.pageObj.total=this.storedTableData.length;
|
||
|
|
this.screenPageObj.total=this.storedScreanTableData.length;
|
||
|
|
this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj);
|
||
|
|
this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj)
|
||
|
|
if (filter) { // 保存数据,用于同步时间
|
||
|
|
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
|
||
|
|
this.searchTime[1] = filter.end_time;
|
||
|
|
this.oldSearchTime[0] = this.searchTime[0];
|
||
|
|
this.oldSearchTime[1] = this.searchTime[1];
|
||
|
|
}
|
||
|
|
this.endLoading();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dealLegendAlias:function(legend,expression){
|
||
|
|
if(/\{\{.+\}\}/.test(expression)){
|
||
|
|
let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
|
||
|
|
let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2)
|
||
|
|
let reg=new RegExp(label+'=".+?"')
|
||
|
|
let value=null;
|
||
|
|
if(reg.test(legend)){
|
||
|
|
let find=legend.match(reg)[0];
|
||
|
|
value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
|
||
|
|
}
|
||
|
|
return value?value:label;
|
||
|
|
})
|
||
|
|
return labelValue
|
||
|
|
}else{
|
||
|
|
return expression;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取格式
|
||
|
|
getNumStr(num) {
|
||
|
|
if (num) {
|
||
|
|
if (num >= 1000) {
|
||
|
|
const kbNum = num / 1000;
|
||
|
|
if (kbNum >= 1000) {
|
||
|
|
const mbNum = kbNum / 1000;
|
||
|
|
if (mbNum >= 1000) {
|
||
|
|
const gbNum = mbNum / 1000;
|
||
|
|
if (gbNum >= 1000) {
|
||
|
|
const tbNum = gbNum / 1000;
|
||
|
|
if (tbNum >= 1000) {
|
||
|
|
const pbNum = tbNum / 1000;
|
||
|
|
return `${pbNum.toFixed(2)}PB`;
|
||
|
|
}
|
||
|
|
return `${tbNum.toFixed(2)}TB`;
|
||
|
|
}
|
||
|
|
return `${gbNum.toFixed(2)}GB`;
|
||
|
|
}
|
||
|
|
return `${mbNum.toFixed(2)}MB`;
|
||
|
|
}
|
||
|
|
return `${kbNum.toFixed(2)}KB`;
|
||
|
|
}
|
||
|
|
return num.toFixed(2);
|
||
|
|
}
|
||
|
|
return num;
|
||
|
|
},
|
||
|
|
// 设置拓扑图数据
|
||
|
|
setTopologyData(nodesArr,edgesArr){
|
||
|
|
this.nodesArray=nodesArr;
|
||
|
|
this.edgesArray=edgesArr;
|
||
|
|
},
|
||
|
|
//退出全屏
|
||
|
|
exitFull(){
|
||
|
|
this.screenModal = false;
|
||
|
|
this.$refs.topology.resetAllNodes()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted(){
|
||
|
|
this.firstLoad = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
@import './chart.scss';
|
||
|
|
</style>
|
||
|
|
<style scoped>
|
||
|
|
.table-container{
|
||
|
|
height: calc(100% - 30px);
|
||
|
|
}
|
||
|
|
.nz-icon{
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.resize-box .vis-network .text-right{
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.resize-box .vis-network .chartTitle .chart-title{
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: stretch;
|
||
|
|
}
|
||
|
|
.vis-network-content{
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|