|
|
|
<template>
|
|
|
|
<div :style="styleObj" @click="isDisplay=false;">
|
|
|
|
<div class="title-div flex-start" :style="styleColor" @mouseenter="isDisplay=true;">
|
|
|
|
<div :style="styleObj" >
|
|
|
|
<div class="title-div flex-start" :style="styleColor" @mouseenter.stop="isDisplay=true;">
|
|
|
|
<img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" alt="">
|
|
|
|
<div v-if="imgStyle.titleName" class="title-name">{{imgStyle.titleName}}</div>
|
|
|
|
<customMenuBox ref="customMenu" v-if="imgStyle.probeDown && isDisplay"
|
|
...
|
...
|
@@ -8,6 +8,7 @@ |
|
|
|
:tableDataValue="tableDataValue" :flg="''"
|
|
|
|
:tableDataValueHead="tableDataValueHead"
|
|
|
|
:heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="imgStyle.titleName"
|
|
|
|
:trendSrc="trendSrc"
|
|
|
|
:resType="resType"
|
|
|
|
></customMenuBox>
|
|
|
|
|
|
...
|
...
|
@@ -19,6 +20,8 @@ |
|
|
|
<script>
|
|
|
|
import echarts from "echarts";
|
|
|
|
import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
|
|
|
|
import {getTrendBaseUrl} from "@/api/platform";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "gaugeRate",
|
|
|
|
components: {customMenuBox},
|
|
...
|
...
|
@@ -28,11 +31,12 @@ export default { |
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
trendSrc:'',//性能趋势图地址
|
|
|
|
marginStyle:'',//弹框距离顶部距离
|
|
|
|
heightStyle:'',//弹框遮罩层高度
|
|
|
|
widthStyle:';',//弹框宽度样式
|
|
|
|
isDisplay:false,
|
|
|
|
tableDataValue: {},
|
|
|
|
tableDataValue: {kpiId:''},
|
|
|
|
tableDataValueHead: {},
|
|
|
|
resType:'',
|
|
|
|
options: {
|
|
...
|
...
|
@@ -213,12 +217,27 @@ export default { |
|
|
|
}
|
|
|
|
return detailMenuBox;
|
|
|
|
},
|
|
|
|
//设置
|
|
|
|
kpiIdStyle(){
|
|
|
|
this.$set(this.tableDataValue,'kpiId',this.optionsSetup.kpiId)
|
|
|
|
this.tableDataValue.kpiId=this.optionsSetup.kpiId;
|
|
|
|
console.log("111",this.tableDataValue)
|
|
|
|
let obj={
|
|
|
|
kpiId:this.optionsSetup.kpiId,
|
|
|
|
targetId:this.optionsSetup.targetId
|
|
|
|
}
|
|
|
|
return obj;
|
|
|
|
},
|
|
|
|
//获取url地址中的token
|
|
|
|
getUrlToken(){
|
|
|
|
let locationUrl=this.$route.query;
|
|
|
|
let resId=locationUrl.resId;
|
|
|
|
let token=locationUrl.access_token;
|
|
|
|
let urlObj={
|
|
|
|
resId:resId,
|
|
|
|
token:token
|
|
|
|
}
|
|
|
|
return urlObj;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
...
|
...
|
@@ -341,7 +360,7 @@ export default { |
|
|
|
staticDataFn(val) {
|
|
|
|
const optionsSetup = this.optionsSetup;
|
|
|
|
const series = this.options.series;
|
|
|
|
const num = val[0]['num'];
|
|
|
|
const num = val[0]['value'];
|
|
|
|
const data = [
|
|
|
|
{
|
|
|
|
value: num
|
|
...
|
...
|
@@ -356,6 +375,8 @@ export default { |
|
|
|
}
|
|
|
|
series[0].data = data
|
|
|
|
series[0].detail = detail
|
|
|
|
console.log("val",val)
|
|
|
|
this.setTrend(val[0])
|
|
|
|
},
|
|
|
|
dynamicDataFn(val, refreshTime) {
|
|
|
|
if (!val) return;
|
|
...
|
...
|
@@ -371,6 +392,7 @@ export default { |
|
|
|
getEchartData(val) {
|
|
|
|
const data = this.queryEchartsData(val);
|
|
|
|
data.then(res => {
|
|
|
|
this.setTrend(res.map)
|
|
|
|
this.renderingFn(res);
|
|
|
|
});
|
|
|
|
},
|
|
...
|
...
|
@@ -392,6 +414,17 @@ export default { |
|
|
|
series[0].data = data
|
|
|
|
series[0].detail = detail
|
|
|
|
},
|
|
|
|
|
|
|
|
//设置性能趋势图
|
|
|
|
setTrend(data){
|
|
|
|
let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+'&flag='+data.flag+'&warning='+data.isWarning
|
|
|
|
+'&ident='+data.ident
|
|
|
|
+'&trend='+data.trend
|
|
|
|
+'&name='+data.name;
|
|
|
|
let baseUrl=getTrendBaseUrl();
|
|
|
|
this.resType=data.resType;
|
|
|
|
this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams+'&access_token='+this.getUrlToken.token;
|
|
|
|
},
|
|
|
|
handleScroll(e){
|
|
|
|
let serviceTop = 44;
|
|
|
|
|
...
|
...
|
|
