|
|
|
<template>
|
|
|
|
<div :style="styleObj" @click="isDisplay=false;">
|
|
|
|
<div class="title-div flex-start" :style="styleColor" @mouseenter="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"
|
|
|
|
:detailMenubox="calcDetailMenubox"
|
|
|
|
:tableDataValue="tableDataValue" :flg="''"
|
|
|
|
:tableDataValueHead="tableDataValueHead"
|
|
|
|
:heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="imgStyle.titleName"
|
|
|
|
:resType="resType"
|
|
|
|
></customMenuBox>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<v-chart :options="options" autoresize/>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import echarts from "echarts";
|
|
|
|
import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
|
|
|
|
export default {
|
|
|
|
name: "gaugeRate",
|
|
|
|
components: {customMenuBox},
|
|
|
|
props: {
|
|
|
|
value: Object,
|
|
|
|
ispreview: Boolean
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
isDisplay:false,
|
|
|
|
tableDataValue: {},
|
|
|
|
tableDataValueHead: {},
|
|
|
|
heightStyle:'',
|
|
|
|
marginStyle:'',
|
|
|
|
resType:'',
|
|
|
|
options: {
|
|
|
|
series: [
|
|
|
|
{
|
|
|
|
type: 'gauge',
|
|
|
|
z: 100,
|
|
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
|
|
width: 10,
|
|
|
|
color: [
|
|
|
|
[
|
|
|
|
0.3,
|
|
|
|
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
|
|
|
{
|
|
|
|
offset: 0,
|
|
|
|
color: 'rgba(0, 237, 3,0.1)',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
offset: 0.5,
|
|
|
|
color: 'rgba(0, 237, 3,0.6)',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
offset: 1,
|
|
|
|
color: 'rgba(0, 237, 3,1)',
|
|
|
|
},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
[
|
|
|
|
0.7,
|
|
|
|
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
|
|
|
{
|
|
|
|
offset: 0,
|
|
|
|
color: 'rgba(255, 184, 0,0.1)',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
offset: 0.5,
|
|
|
|
color: 'rgba(255, 184, 0,0.6)',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
offset: 1,
|
|
|
|
color: 'rgba(255, 184, 0,1)',
|
|
|
|
},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
[
|
|
|
|
1,
|
|
|
|
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
|
|
|
{
|
|
|
|
offset: 0,
|
|
|
|
color: 'rgba(175, 36, 74,0.1)',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
offset: 0.5,
|
|
|
|
color: 'rgba(255, 36, 74,0.6)',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
offset: 1,
|
|
|
|
color: 'rgba(255, 36, 74,1)',
|
|
|
|
},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
pointer: {
|
|
|
|
itemStyle: {
|
|
|
|
color: 'auto',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
axisTick: {
|
|
|
|
show: true,
|
|
|
|
distance: 0,
|
|
|
|
length: 10,
|
|
|
|
lineStyle: {
|
|
|
|
color: 'auto',
|
|
|
|
width: 2,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
splitLine: {
|
|
|
|
show: true,
|
|
|
|
distance: 0,
|
|
|
|
length: 14,
|
|
|
|
lineStyle: {
|
|
|
|
color: 'auto',
|
|
|
|
width: 4,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
axisLabel: {
|
|
|
|
show: true,
|
|
|
|
color: 'white',
|
|
|
|
distance: 2,
|
|
|
|
fontSize: 10,
|
|
|
|
},
|
|
|
|
detail: {
|
|
|
|
valueAnimation: true,
|
|
|
|
formatter: '{value} %',
|
|
|
|
color: 'white',
|
|
|
|
fontSize: 18,
|
|
|
|
},
|
|
|
|
data: [
|
|
|
|
{
|
|
|
|
value: 70,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
optionsStyle: {}, // 样式
|
|
|
|
optionsData: {}, // 数据
|
|
|
|
optionsCollapse: {}, // 图标属性
|
|
|
|
optionsSetup: {}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
styleObj() {
|
|
|
|
return {
|
|
|
|
position: this.ispreview ? "absolute" : "static",
|
|
|
|
width: this.optionsStyle.width + "px",
|
|
|
|
height: this.optionsStyle.height + "px",
|
|
|
|
left: this.optionsStyle.left + "px",
|
|
|
|
top: this.optionsStyle.top + "px",
|
|
|
|
background: this.optionsSetup.background
|
|
|
|
};
|
|
|
|
},
|
|
|
|
styleColor() {
|
|
|
|
return {
|
|
|
|
"text-align": this.optionsSetup.textAlign,
|
|
|
|
|
|
|
|
};
|
|
|
|
},
|
|
|
|
imgStyle() {
|
|
|
|
return {
|
|
|
|
imageAdress: this.optionsSetup.imageAdress,
|
|
|
|
titleName:this.optionsSetup.titleName,
|
|
|
|
probeDown:this.optionsSetup.probeDown
|
|
|
|
};
|
|
|
|
},
|
|
|
|
//表格下探列表
|
|
|
|
calcDetailMenubox(){
|
|
|
|
const menubox = this.optionsSetup;
|
|
|
|
let detailMenuBox=[];
|
|
|
|
if(menubox.alarm_setting){
|
|
|
|
detailMenuBox.push({
|
|
|
|
name:'告警设置',
|
|
|
|
type:'alarm_setting'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
if(menubox.filter_sheet_indicator){
|
|
|
|
detailMenuBox.push({
|
|
|
|
name:'过滤单指标',
|
|
|
|
type:'filter_sheet_indicator'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
if(menubox.filter_multiple_indicators){
|
|
|
|
detailMenuBox.push({
|
|
|
|
name:'过滤多指标',
|
|
|
|
type:'filter_multiple_indicators'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
if(menubox.performance_trends){
|
|
|
|
detailMenuBox.push({
|
|
|
|
name:'性能趋势',
|
|
|
|
type:'performance_trends'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
if(menubox.pressing_times){
|
|
|
|
detailMenuBox.push({
|
|
|
|
name:'压制次数',
|
|
|
|
type:'pressing_times'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
if(menubox.include_capacity_forecast){
|
|
|
|
detailMenuBox.push({
|
|
|
|
name:'纳入容量预测',
|
|
|
|
type:'include_capacity_forecast'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
return detailMenuBox;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
value: {
|
|
|
|
handler(val) {
|
|
|
|
this.optionsStyle = val.position; // 位置
|
|
|
|
this.optionsData = val.data; // 数据
|
|
|
|
this.optionsCollapse = val.collapse; // 折叠数据
|
|
|
|
this.optionsSetup = val.setup; // 样式
|
|
|
|
this.editorOptions();
|
|
|
|
},
|
|
|
|
deep: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.optionsStyle = this.value.position;
|
|
|
|
this.optionsData = this.value.data;
|
|
|
|
this.optionsCollapse = this.value.collapse;
|
|
|
|
this.optionsSetup = this.value.setup;
|
|
|
|
this.editorOptions();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
editorOptions() {
|
|
|
|
this.setOptions()
|
|
|
|
this.setOptionsData()
|
|
|
|
},
|
|
|
|
setOptions() {
|
|
|
|
const optionsSetup = this.optionsSetup;
|
|
|
|
const series = this.options.series;
|
|
|
|
if (series[0].type == 'gauge') {
|
|
|
|
const axisLine = {
|
|
|
|
show: optionsSetup.ringShow,
|
|
|
|
lineStyle: {
|
|
|
|
width: optionsSetup.pieWeight,
|
|
|
|
color: [
|
|
|
|
[
|
|
|
|
0.3,
|
|
|
|
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
|
|
|
{
|
|
|
|
offset: 0,
|
|
|
|
color: optionsSetup.color30p0,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
offset: 0.5,
|
|
|
|
color: optionsSetup.color30p5,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
offset: 1,
|
|
|
|
color: optionsSetup.color30p10,
|
|
|
|
},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
[
|
|
|
|
0.7,
|
|
|
|
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
|
|
|
{
|
|
|
|
offset: 0,
|
|
|
|
color: optionsSetup.color70p0,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
offset: 0.5,
|
|
|
|
color: optionsSetup.color70p5,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
offset: 1,
|
|
|
|
color: optionsSetup.color70p10,
|
|
|
|
},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
[
|
|
|
|
1,
|
|
|
|
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
|
|
|
{
|
|
|
|
offset: 0,
|
|
|
|
color: optionsSetup.color100p0,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
offset: 0.5,
|
|
|
|
color: optionsSetup.color100p5,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
offset: 1,
|
|
|
|
color: optionsSetup.color100p10,
|
|
|
|
},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
],
|
|
|
|
},
|
|
|
|
}
|
|
|
|
const axisTick = {
|
|
|
|
show: optionsSetup.tickShow,
|
|
|
|
distance: optionsSetup.tickDistance,
|
|
|
|
length: optionsSetup.tickLength,
|
|
|
|
lineStyle: {
|
|
|
|
color: 'auto',
|
|
|
|
width: optionsSetup.tickWidth,
|
|
|
|
},
|
|
|
|
}
|
|
|
|
const splitLine = {
|
|
|
|
show: optionsSetup.splitShow,
|
|
|
|
distance: optionsSetup.splitDistance,
|
|
|
|
length: optionsSetup.splitLength,
|
|
|
|
lineStyle: {
|
|
|
|
color: 'auto',
|
|
|
|
width: optionsSetup.splitWidth,
|
|
|
|
},
|
|
|
|
}
|
|
|
|
series[0].axisLine = axisLine
|
|
|
|
series[0].axisTick = axisTick
|
|
|
|
series[0].splitLine = splitLine
|
|
|
|
}
|
|
|
|
},
|
|
|
|
setOptionsData() {
|
|
|
|
const optionsData = this.optionsData; // 数据类型 静态 or 动态
|
|
|
|
optionsData.dataType == "staticData"
|
|
|
|
? this.staticDataFn(optionsData.staticData)
|
|
|
|
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
|
|
|
|
},
|
|
|
|
staticDataFn(val) {
|
|
|
|
const optionsSetup = this.optionsSetup;
|
|
|
|
const series = this.options.series;
|
|
|
|
const num = val[0]['num'];
|
|
|
|
const data = [
|
|
|
|
{
|
|
|
|
value: num
|
|
|
|
}
|
|
|
|
]
|
|
|
|
const detail = {
|
|
|
|
valueAnimation: true,
|
|
|
|
formatter: '{value} %',
|
|
|
|
color: optionsSetup.labelColor,
|
|
|
|
fontSize: optionsSetup.labelFontSize,
|
|
|
|
fontWeight: optionsSetup.labelFontWeight,
|
|
|
|
}
|
|
|
|
series[0].data = data
|
|
|
|
series[0].detail = detail
|
|
|
|
},
|
|
|
|
dynamicDataFn(val, refreshTime) {
|
|
|
|
if (!val) return;
|
|
|
|
if (this.ispreview) {
|
|
|
|
this.getEchartData(val);
|
|
|
|
this.flagInter = setInterval(() => {
|
|
|
|
this.getEchartData(val);
|
|
|
|
}, refreshTime);
|
|
|
|
} else {
|
|
|
|
this.getEchartData(val);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
getEchartData(val) {
|
|
|
|
const data = this.queryEchartsData(val);
|
|
|
|
data.then(res => {
|
|
|
|
this.renderingFn(res);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
renderingFn(val) {
|
|
|
|
const optionsSetup = this.optionsSetup;
|
|
|
|
const series = this.options.series;
|
|
|
|
const data = [
|
|
|
|
{
|
|
|
|
value: val[0].value
|
|
|
|
}
|
|
|
|
]
|
|
|
|
const detail = {
|
|
|
|
valueAnimation: true,
|
|
|
|
formatter: '{value} %',
|
|
|
|
color: optionsSetup.labelColor,
|
|
|
|
fontSize: optionsSetup.labelFontSize,
|
|
|
|
fontWeight: optionsSetup.labelFontWeight,
|
|
|
|
}
|
|
|
|
series[0].data = data
|
|
|
|
series[0].detail = detail
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.echarts {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.title-div{
|
|
|
|
text-align: left;
|
|
|
|
padding:10px;
|
|
|
|
}
|
|
|
|
.title-name{
|
|
|
|
color:rgb(30,159,255);
|
|
|
|
font-size: 16px;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.flex-start{
|
|
|
|
display: flex;
|
|
|
|
justify-content: start;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
