提交
This commit is contained in:
494
src/views/componentschild/areaconstf47.vue
Normal file
494
src/views/componentschild/areaconstf47.vue
Normal file
@@ -0,0 +1,494 @@
|
||||
<template>
|
||||
<div ref="f47area" id="f47eacharts" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import {getPlot} from "@/api/monitoringpointStatistics/echart";
|
||||
import yan from "@/assets/commjs/color";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.f47area.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('areaconstf47').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.f47area.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1:{
|
||||
startTime:'',
|
||||
lineIndex: "0a5a5f475914c0e08c025e8f00e832f3",
|
||||
endTime:''
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
//ITIC模拟数据
|
||||
datalist: [],
|
||||
pointI: [],
|
||||
pointIun: [],
|
||||
pointF: [],
|
||||
pointFun: [],
|
||||
white: "#ffffff",
|
||||
top: [
|
||||
[0.001, 200],
|
||||
[0.003, 140],
|
||||
[0.003, 120],
|
||||
[0.5, 120],
|
||||
[0.5, 110],
|
||||
[10, 110],
|
||||
[1000, 110],
|
||||
],
|
||||
bot: [
|
||||
[0.02, 0],
|
||||
[0.02, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[10, 90],
|
||||
[1000, 90],
|
||||
],
|
||||
part: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80],
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('areaconstf47').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.f47area.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
//公共的方法
|
||||
gongfunction() {
|
||||
var standI = 0;
|
||||
var unstandI = 0;
|
||||
var standF = 0;
|
||||
var unstandF = 0;
|
||||
var total = 0;
|
||||
total = this.datalist.length;
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (var i = 0; i < this.datalist.length; i++) {
|
||||
var point = [];
|
||||
var xx = this.datalist[i].persistTime;
|
||||
var yy = this.datalist[i].eventValue*100;
|
||||
var time = this.datalist[i].time;
|
||||
point = [xx, yy, time];
|
||||
|
||||
if (xx <= 0.003) {
|
||||
var line = 0;
|
||||
line = 230 - 30000 * xx;
|
||||
if (yy > line) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$emit("dataList", {
|
||||
name: "事件个数",
|
||||
gs: this.datalist.length,
|
||||
krr: this.pointF.length,
|
||||
bkrr: this.pointFun.length,
|
||||
});
|
||||
},
|
||||
|
||||
queryData() {
|
||||
this.formData1.startTime=this.time[0]
|
||||
this.formData1.endTime=this.time[1]
|
||||
getPlot(this.formData1).then((res) => {
|
||||
if(res.code =='A0000'){
|
||||
this.datalist = res.data.voltageToleranceCurveDataList;
|
||||
this.gongfunction();
|
||||
this.$nextTick(() => {
|
||||
this.f47emis();
|
||||
});
|
||||
}
|
||||
|
||||
this.datategrity();
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
f47emis() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("f47eacharts"));
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
//backgroundColor: "#fff", //背景色,
|
||||
title: {
|
||||
text: "SEMI F47曲线",
|
||||
x: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "30px", // 等价于 y: '16%'
|
||||
left: "10px",
|
||||
right: "60px",
|
||||
bottom: "10px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (a) {
|
||||
var relVal = "";
|
||||
relVal =
|
||||
"<font style='color:#fff'>发生时间:" +
|
||||
a.value[2] +
|
||||
"</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:#fff'>持续时间:" +
|
||||
a.value[0] +
|
||||
"s</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:#fff'>特征幅值:" + a.value[1] + "%</font>";
|
||||
return relVal;
|
||||
},
|
||||
},
|
||||
// toolbox: {
|
||||
// show: true,
|
||||
// feature: {
|
||||
// dataView: { show: true },
|
||||
// dataZoom: { show: true },
|
||||
////restore: { show: true },
|
||||
//saveAsImage: { show: true },
|
||||
// myFull: {
|
||||
// show: true,
|
||||
// title: "全屏查看",
|
||||
// icon:
|
||||
// "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
|
||||
// onclick: e => {
|
||||
// this.fullFlag = true;
|
||||
// let element = document.getElementById("semi");
|
||||
|
||||
// if (element.requestFullScreen) {
|
||||
// // HTML W3C 提议
|
||||
// element.requestFullScreen();
|
||||
// } else if (element.msRequestFullscreen) {
|
||||
// // IE11
|
||||
// element.msRequestFullScreen();
|
||||
// } else if (element.webkitRequestFullScreen) {
|
||||
// // Webkit (works in Safari5.1 and Chrome 15)
|
||||
// element.webkitRequestFullScreen();
|
||||
// } else if (element.mozRequestFullScreen) {
|
||||
// // Firefox (works in nightly)
|
||||
// element.mozRequestFullScreen();
|
||||
// }
|
||||
// // 退出全屏
|
||||
// if (element.requestFullScreen) {
|
||||
// document.exitFullscreen();
|
||||
// } else if (element.msRequestFullScreen) {
|
||||
// document.msExitFullscreen();
|
||||
// } else if (element.webkitRequestFullScreen) {
|
||||
// document.webkitCancelFullScreen();
|
||||
// } else if (element.mozRequestFullScreen) {
|
||||
// document.mozCancelFullScreen();
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
legend: {
|
||||
data: ["边界线", "可容忍事件", "不可容忍事件"],
|
||||
// selectedMode: false,
|
||||
right: "10px",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
color: ["yellow", "green", "red"],
|
||||
xAxis: [
|
||||
{
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize:12,
|
||||
left: "0%",
|
||||
},
|
||||
type: "log",
|
||||
min: "0.001",
|
||||
max: "1000",
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
name:'暂降\n次数',
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
fontSize:yan.EchartObject.xNamefontSize,
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
left: "0%",
|
||||
},
|
||||
type: "value",
|
||||
max: function (value) {
|
||||
return value.max + 20;
|
||||
},
|
||||
splitNumber: 10,
|
||||
minInterval: 0.1,
|
||||
name: yan.EchartObject.nuit1,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "边界线",
|
||||
type: "line",
|
||||
data: this.part,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointF,
|
||||
},
|
||||
{
|
||||
name: "不可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointFun,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.f47area, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
478
src/views/componentschild/areaconstitic-hb.vue
Normal file
478
src/views/componentschild/areaconstitic-hb.vue
Normal file
@@ -0,0 +1,478 @@
|
||||
<template>
|
||||
<div ref="iticArea" id="iticEcharts" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import {getPwEventFeatureAmplitudeCurve} from "@/api/Distributionnetwork/transient/transient";
|
||||
import yan from "@/assets/commjs/color";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.iticArea.style.height =
|
||||
document.getElementById("conmentId").offsetHeight - 50 + "px";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaconstitic").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.iticArea.style.height = height;
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1: {
|
||||
startTime:'',
|
||||
id: '',
|
||||
endTime:'',
|
||||
type: 3
|
||||
},
|
||||
//曲线icit和semi曲线模拟数据
|
||||
datalist: [],
|
||||
pointI: [],
|
||||
pointIun: [],
|
||||
pointF: [],
|
||||
pointFun: [],
|
||||
zoom: "", //图表焦点校验
|
||||
myChartes: null,
|
||||
white: "#ffffff",
|
||||
top: [
|
||||
[0.001, 200],
|
||||
[0.003, 140],
|
||||
[0.003, 120],
|
||||
[0.5, 120],
|
||||
[0.5, 110],
|
||||
[10, 110],
|
||||
[1000, 110],
|
||||
],
|
||||
bot: [
|
||||
[0.02, 0],
|
||||
[0.02, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[10, 90],
|
||||
[1000, 90],
|
||||
],
|
||||
part: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80],
|
||||
],
|
||||
voltageleveloption: [],
|
||||
terminaloption: [],
|
||||
interfereoption: [],
|
||||
classificationData: [],
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
title:'',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaconstitic").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.iticArea.style.height = height;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
this.formData1.startTime = this.time[0];
|
||||
this.formData1.endTime = this.time[1];
|
||||
var info = window.sessionStorage.getItem("Info");
|
||||
info = eval("(" + info + ")");
|
||||
this.formData1.id =info.deptId;
|
||||
getPwEventFeatureAmplitudeCurve(this.formData1).then((res) => {
|
||||
this.datalist = res.data.eventFeatureAmplitudeCurveDataList;
|
||||
this.gongfunction();
|
||||
this.title = '总统计:'+(this.pointI.length+this.pointIun.length)+'个,可容忍:'+this.pointI.length+'个,不可容忍:'+this.pointIun.length+'个'
|
||||
//let pointIunData=
|
||||
this.iticData();
|
||||
});
|
||||
|
||||
},
|
||||
//公共的方法
|
||||
gongfunction() {
|
||||
var standI = 0;
|
||||
var unstandI = 0;
|
||||
var standF = 0;
|
||||
var unstandF = 0;
|
||||
this.pointI = [];
|
||||
this.pointIun = [];
|
||||
this.pointF = [];
|
||||
this.pointFun = [];
|
||||
var total = 0;
|
||||
total = this.datalist.length;
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (var i = 0; i < this.datalist.length; i++) {
|
||||
var point = [];
|
||||
var xx = this.datalist[i].duration / 1000;
|
||||
var yy = this.datalist[i].featureAmplitude;
|
||||
var time = this.datalist[i].startTime.replace("T", " ");
|
||||
// var index = this.datalist[i].eventDetailIndex;
|
||||
point = [xx, yy, time];
|
||||
|
||||
if (xx <= 0.003) {
|
||||
var line = 0;
|
||||
line = 250 - 30000 * xx;
|
||||
if (yy > line) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
iticData() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("iticEcharts"));
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let option = {
|
||||
// backgroundColor: "#f9f9f9", //地图背景色深蓝
|
||||
title: {
|
||||
text: "ITIC曲线("+this.title+')',
|
||||
x: "center",
|
||||
y:'20px',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "50px",
|
||||
left: "10px",
|
||||
right: "40px",
|
||||
bottom: "20px",
|
||||
containLabel: true,
|
||||
},
|
||||
// toolbox: {
|
||||
// show: true,
|
||||
// feature: {
|
||||
// saveAsImage: { show: true },
|
||||
// },
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
show: true,
|
||||
formatter: function (a) {
|
||||
let relVal = "";
|
||||
relVal +=
|
||||
"<font style='color:#000'>发生时刻:" +" " +" " +a.value[2] +"</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:#000'>持续时间:" +" " +" " +(a.value[0]).toFixed(3) +"s</font><br/>";
|
||||
relVal += "<font style='color:#000'>特征幅值:" +" " +" " +a.value[1] + "%</font>";
|
||||
return relVal;
|
||||
},
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
color: "#000",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
// backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
data: ["上限", "下限", "可容忍事件", "不可容忍事件"],
|
||||
|
||||
x: "10px",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
},
|
||||
},
|
||||
color: ["#FF8C00", "#00BFFF", "green", "red"],
|
||||
xAxis: [
|
||||
{
|
||||
type: "log",
|
||||
min: "0.001",
|
||||
max: "1000",
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
name: "s",
|
||||
nameTextStyle: {
|
||||
padding: 5,
|
||||
color:'#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitNumber: 10,
|
||||
minInterval: 3,
|
||||
name: "%",
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
padding: 0,
|
||||
},
|
||||
minInterval: 1,
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#fff'],
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "上限",
|
||||
type: "line",
|
||||
data: this.top,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "下限",
|
||||
type: "line",
|
||||
data: this.bot,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointI,
|
||||
},
|
||||
{
|
||||
name: "不可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointIun,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
//由于网格布局拖拽放大缩小图表不能自适应，这里设置一个定时器使得echart加载为一个异步过程
|
||||
this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
}, 0);
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.iticArea, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
463
src/views/componentschild/areaconstitic.vue
Normal file
463
src/views/componentschild/areaconstitic.vue
Normal file
@@ -0,0 +1,463 @@
|
||||
<template>
|
||||
<div ref="iticArea" id="iticEcharts" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getPlot } from '@/api/monitoringpointStatistics/echart'
|
||||
import yan from "@/assets/commjs/color";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.iticArea.style.height =
|
||||
document.getElementById("conmentId").offsetHeight - 50 + "px";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaconstitic").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.iticArea.style.height = height;
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1: {
|
||||
endTime: "",
|
||||
lineIndex: "0a5a5f475914c0e08c025e8f00e832f3",
|
||||
startTime: "",
|
||||
},
|
||||
//曲线icit和semi曲线模拟数据
|
||||
datalist: [],
|
||||
pointI: [],
|
||||
pointIun: [],
|
||||
pointF: [],
|
||||
pointFun: [],
|
||||
zoom: "", //图表焦点校验
|
||||
myChartes: null,
|
||||
white: "#ffffff",
|
||||
top: [
|
||||
[0.001, 200],
|
||||
[0.003, 140],
|
||||
[0.003, 120],
|
||||
[0.5, 120],
|
||||
[0.5, 110],
|
||||
[10, 110],
|
||||
[1000, 110],
|
||||
],
|
||||
bot: [
|
||||
[0.02, 0],
|
||||
[0.02, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[10, 90],
|
||||
[1000, 90],
|
||||
],
|
||||
part: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80],
|
||||
],
|
||||
voltageleveloption: [],
|
||||
terminaloption: [],
|
||||
interfereoption: [],
|
||||
classificationData: [],
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaconstitic").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.iticArea.style.height = height;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
this.formData1.startTime = this.time[0];
|
||||
this.formData1.endTime = this.time[1];
|
||||
getPlot(this.formData1).then((res) => {
|
||||
this.datalist = res.data.voltageToleranceCurveDataList;
|
||||
this.datategrity();
|
||||
});
|
||||
},
|
||||
//公共的方法
|
||||
gongfunction() {
|
||||
var standI = 0;
|
||||
var unstandI = 0;
|
||||
var standF = 0;
|
||||
var unstandF = 0;
|
||||
var total = 0;
|
||||
this.pointIun = [];
|
||||
this.pointI = [];
|
||||
total = this.datalist.length;
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (var i = 0; i < this.datalist.length; i++) {
|
||||
var point = [];
|
||||
var xx = this.datalist[i].persistTime;
|
||||
var yy = this.datalist[i].eventValue;
|
||||
var time = this.datalist[i].time;
|
||||
// var index = this.datalist[i].eventDetailIndex;
|
||||
point = [xx, yy, time];
|
||||
|
||||
if (xx <= 0.003) {
|
||||
var line = 0;
|
||||
line = 250 - 30000 * xx;
|
||||
if (yy > line) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
datategrity() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("iticEcharts"));
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
var option = {
|
||||
// backgroundColor: "#FFF", //背景色,
|
||||
title: {
|
||||
text: "ITIC曲线",
|
||||
x: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridi,
|
||||
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (a) {
|
||||
var relVal = "";
|
||||
relVal =
|
||||
"<font style='color:" +
|
||||
white +
|
||||
"'>发生时间:" +
|
||||
a.value[2] +
|
||||
"</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
white +
|
||||
"'>持续时间:" +
|
||||
a.value[0] +
|
||||
"s</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
white +
|
||||
"'>特征幅值:" +
|
||||
a.value[1] +
|
||||
"%</font>";
|
||||
return relVal;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["上限", "下限", "可容忍事件", "不可容忍事件"],
|
||||
right:'10px',
|
||||
// selectedMode: false,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
//x: "5%",
|
||||
},
|
||||
color: ["#FF8C00", "#00BFFF", "green", "red"],
|
||||
xAxis: [
|
||||
{
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize:12,
|
||||
left: "0%",
|
||||
},
|
||||
type: "log",
|
||||
min: "0.001",
|
||||
max: "1000",
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
name:'s',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
fontSize:yan.EchartObject.xNamefontSize,
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitNumber: 10,
|
||||
minInterval: 3,
|
||||
name: yan.EchartObject.nuit1,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: "#fff",
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "上限",
|
||||
type: "line",
|
||||
data: this.top,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "下限",
|
||||
type: "line",
|
||||
data: this.bot,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointI,
|
||||
},
|
||||
{
|
||||
name: "不可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointIun,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
//由于网格布局拖拽放大缩小图表不能自适应，这里设置一个定时器使得echart加载为一个异步过程
|
||||
this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
}, 0);
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.iticArea, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
212
src/views/componentschild/areaconsttype.vue
Normal file
212
src/views/componentschild/areaconsttype.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div ref="areaType" id="typeEcharts" style="width: 100%"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getStatistic } from "@/api/monitoringpointStatistics/echart";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.areaType.style.height =
|
||||
document.getElementById("conmentId").offsetHeight - 50 + "px";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaconsttype").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areaType.style.height = height;
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
initTypeData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1: {
|
||||
endTime: "",
|
||||
lineIndex: "0a5a5f475914c0e08c025e8f00e832f3",
|
||||
startTime: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaconsttype").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areaType.style.height = height;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
this.formData1.startTime = this.time[0];
|
||||
this.formData1.endTime = this.time[1];
|
||||
getStatistic(this.formData1).then((res) => {
|
||||
this.initTypeData = res.data.types;
|
||||
this.qualifiedechart();
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
qualifiedechart() {
|
||||
var typeArray = [];
|
||||
var valueArray = [];
|
||||
if (null === this.initTypeData) {
|
||||
typeArray = ["单相接地", "两相接地", "三相短路", "相间故障", "未知"];
|
||||
valueArray = [
|
||||
{ name: "单相接地", value: 0 },
|
||||
{ name: "两相接地", value: 0 },
|
||||
{ name: "三相短路", value: 0 },
|
||||
{
|
||||
name: "相间故障",
|
||||
value: 0,
|
||||
},
|
||||
{ name: "未知", value: 0 },
|
||||
];
|
||||
} else {
|
||||
for (var i = 0; i < this.initTypeData.length; i++) {
|
||||
typeArray.push(this.initTypeData[i].type);
|
||||
var typeValue = {};
|
||||
typeValue.name = this.initTypeData[i].type;
|
||||
typeValue.value = this.initTypeData[i].times;
|
||||
valueArray.push(typeValue);
|
||||
}
|
||||
}
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("typeEcharts"));
|
||||
myChartes.clear();
|
||||
//let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
var option = {
|
||||
// backgroundColor: "#fff", //背景色,
|
||||
animation: false,
|
||||
title: {
|
||||
text: "暂降类型",
|
||||
x: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
data: typeArray,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "暂降类型",
|
||||
type: "pie",
|
||||
radius: "70%",
|
||||
center: ["50%", "55%"],
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
lableLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
data: valueArray,
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.areaType, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
136
src/views/componentschild/areaconsttypetable.vue
Normal file
136
src/views/componentschild/areaconsttypetable.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div style="padding: 0px">
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
stripe
|
||||
:data="resembleData"
|
||||
:height="vh"
|
||||
border
|
||||
class="mt10"
|
||||
style="width: 100%; height: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderType">
|
||||
<el-table-column
|
||||
:prop="item.prop"
|
||||
align="center"
|
||||
:label="item.label"
|
||||
:key="index"
|
||||
:min-width="item.width"
|
||||
>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getStatisticData } from "@/api/statistics";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.vh = document.getElementById("conmentId").offsetHeight-50;
|
||||
this.queryData();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaconsttypetable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
this.queryData();
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
vh: null,
|
||||
h: 0,
|
||||
tableHeaderType: [
|
||||
{ prop: "name", label: "暂降类型" },
|
||||
{ prop: "value", label: "暂降次数" },
|
||||
],
|
||||
resembleData: [],
|
||||
time: this.timefamt(),
|
||||
formData: {
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
reportFlag: 3,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: {},
|
||||
},
|
||||
// classificationData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaconsttypetable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
queryData() {
|
||||
this.isLoading = true;
|
||||
this.formData.searchBeginTime = this.time[0];
|
||||
this.formData.searchEndTime = this.time[1];
|
||||
getStatisticData(this.formData).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
this.resembleData = res.data.type;
|
||||
this.isLoading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
219
src/views/componentschild/areaconstyy.vue
Normal file
219
src/views/componentschild/areaconstyy.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div ref="areayy" id="yyEcharts" style="width: 100%"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getStatistic } from "@/api/monitoringpointStatistics/echart";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.areayy.style.height =
|
||||
document.getElementById("conmentId").offsetHeight - 50 + "px";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaconstyy").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areayy.style.height = height;
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
initCauseData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1: {
|
||||
endTime: "",
|
||||
lineIndex: "0a5a5f475914c0e08c025e8f00e832f3",
|
||||
startTime: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaconstyy").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areayy.style.height = height;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
this.formData1.startTime = this.time[0];
|
||||
this.formData1.endTime = this.time[1];
|
||||
getStatistic(this.formData1).then((res) => {
|
||||
this.initCauseData = res.data.reason;
|
||||
this.qualifiedechart();
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
qualifiedechart() {
|
||||
var reaArray = [];
|
||||
var valueArray = [];
|
||||
if (null === this.initCauseData) {
|
||||
reaArray = [
|
||||
"组合暂降",
|
||||
"变压器激磁",
|
||||
"短路故障",
|
||||
"大型感应电动机启动",
|
||||
"未明",
|
||||
];
|
||||
valueArray = [
|
||||
{ name: "组合暂降", value: 0 },
|
||||
{ name: "变压器激磁", value: 0 },
|
||||
{
|
||||
name: "短路故障",
|
||||
value: 0,
|
||||
},
|
||||
{ name: "大型感应电动机启动", value: 0 },
|
||||
{ name: "未明", value: 0 },
|
||||
];
|
||||
} else {
|
||||
this.initCauseData.reverse();
|
||||
for (var i = 0; i < this.initCauseData.length; i++) {
|
||||
reaArray.push(this.initCauseData[i].reason);
|
||||
var causeValue = {};
|
||||
causeValue.name = this.initCauseData[i].reason;
|
||||
causeValue.value = this.initCauseData[i].times;
|
||||
valueArray.push(causeValue);
|
||||
}
|
||||
}
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("yyEcharts"));
|
||||
myChartes.clear();
|
||||
//let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
var option = {
|
||||
// backgroundColor: "#fff", //背景色,
|
||||
animation: false,
|
||||
title: {
|
||||
text: "暂降原因",
|
||||
x: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
data: reaArray,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "暂降原因",
|
||||
type: "pie",
|
||||
radius: "70%",
|
||||
center: ["50%", "55%"],
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
lableLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
data: valueArray,
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.areayy, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
136
src/views/componentschild/areaconstyytable.vue
Normal file
136
src/views/componentschild/areaconstyytable.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div style="padding: 0px;" >
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
stripe
|
||||
:data="descentData"
|
||||
:height="vh"
|
||||
border
|
||||
class="mt10"
|
||||
style="width: 100%; height: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderAera">
|
||||
<el-table-column
|
||||
:prop="item.prop"
|
||||
align="center"
|
||||
:label="item.label"
|
||||
:key="index"
|
||||
:min-width="item.width"
|
||||
>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getStatisticData } from "@/api/statistics";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.vh = document.getElementById("conmentId").offsetHeight-50;
|
||||
this.queryData();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaconstyytable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
this.queryData();
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
vh: null,
|
||||
h: 0,
|
||||
tableHeaderAera: [
|
||||
{ prop: "name", label: "暂降原因" },
|
||||
{ prop: "value", label: "暂降次数" },
|
||||
],
|
||||
descentData: [],
|
||||
time: this.timefamt(),
|
||||
formData: {
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
reportFlag: 3,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: {},
|
||||
},
|
||||
// classificationData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaconstyytable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
queryData() {
|
||||
this.isLoading = true;
|
||||
this.formData.searchBeginTime = this.time[0];
|
||||
this.formData.searchEndTime = this.time[1];
|
||||
getStatisticData(this.formData).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
this.descentData = res.data.type;
|
||||
this.isLoading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
170
src/views/componentschild/areahotable.vue
Normal file
170
src/views/componentschild/areahotable.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div style="padding: 0px">
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
stripe
|
||||
:data="list"
|
||||
:height="vh"
|
||||
border
|
||||
class="mt10"
|
||||
style="width: 100%; height: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
label="供电公司"
|
||||
prop="gdName"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="变电站"
|
||||
show-overflow-tooltip
|
||||
prop="subName"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="监测点"
|
||||
show-overflow-tooltip
|
||||
prop="lineName"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="暂降次数"
|
||||
show-overflow-tooltip
|
||||
prop="tail"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getEventHeatMap } from "@/api/sagSeverity.js";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.vh = document.getElementById("conmentId").offsetHeight;
|
||||
this.queryData();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areahotable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height;
|
||||
this.queryData();
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
vh: null,
|
||||
h: 0,
|
||||
classificationData: [],
|
||||
list: [],
|
||||
time: this.timefamt(),
|
||||
formData: {
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
lineGrade: null,
|
||||
loadType: null,
|
||||
manufacturer: null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 1,
|
||||
reportFlag: 3,
|
||||
scale: null,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
serverName: "",
|
||||
statFlag: true,
|
||||
statisticalType: "",
|
||||
timeFlag: 0,
|
||||
},
|
||||
// classificationData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areahotable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
queryData() {
|
||||
this.isLoading = true;
|
||||
this.formData.searchBeginTime = this.time[0];
|
||||
this.formData.searchEndTime = this.time[1];
|
||||
getEventHeatMap(this.formData).then((res) => {
|
||||
if (res.data.eventHeatMapValue != []) {
|
||||
res.data.eventHeatMapValue.forEach((val) => {
|
||||
val.forEach((item) => {
|
||||
this.list.push(item);
|
||||
});
|
||||
});
|
||||
}
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
293
src/views/componentschild/areahottu.vue
Normal file
293
src/views/componentschild/areahottu.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div ref="areahot" id="hotEcharts" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getEventHeatMap } from "@/api/sagSeverity.js";
|
||||
import yan from "@/assets/commjs/color";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.areahot.style.height =
|
||||
document.getElementById("conmentId").offsetHeight - 50 + "px";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areahottu").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areahot.style.height = height;
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classificationData: [],
|
||||
allData: [],
|
||||
time: this.timefamt(),
|
||||
formData1: {
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
lineGrade: null,
|
||||
loadType: null,
|
||||
manufacturer: null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 1,
|
||||
reportFlag: 3,
|
||||
scale: null,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
serverName: "",
|
||||
statFlag: true,
|
||||
statisticalType: "",
|
||||
timeFlag: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areahottu").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areahot.style.height = height;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData1.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
this.formData1.searchBeginTime = this.time[0];
|
||||
this.formData1.searchEndTime = this.time[1];
|
||||
getEventHeatMap(this.formData1).then((res) => {
|
||||
this.allData = res.data.areaValue;
|
||||
this.qualifiedechart();
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
qualifiedechart() {
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let xdata = [];
|
||||
let xVal = [];
|
||||
this.allData.forEach((item) => {
|
||||
xdata.push(item.name);
|
||||
xVal.push(item.count);
|
||||
});
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("hotEcharts"));
|
||||
myChartes.clear();
|
||||
//let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let option = {
|
||||
title: {
|
||||
text: "区域监测点次数",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
fontWeight: "400",
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["暂降次数"],
|
||||
// top: "10%",
|
||||
right: "5%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
//提示框组件
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0,
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips += params[0].name + "</br/>";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.141592) {
|
||||
tips += params[i].seriesName + ":暂无数据<br/>";
|
||||
} else {
|
||||
tips += params[i].seriesName + ":" + params[i].value + "<br/>";
|
||||
}
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridf,
|
||||
color: echartsColor.FigureColor,
|
||||
xAxis: {
|
||||
type: "category",
|
||||
name:yan.EchartObject.area,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
data: xdata,
|
||||
},
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: yan.EchartObject.monitoring,
|
||||
minInterval: 20,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
//fontSize:10
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: "#fff",
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "暂降次数",
|
||||
data: xVal,
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value == 3.141592) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#999999",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: echartsColor.FigureColor[0], // 0% 处的颜色
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.areahot, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
683
src/views/componentschild/areamontormap.vue
Normal file
683
src/views/componentschild/areamontormap.vue
Normal file
@@ -0,0 +1,683 @@
|
||||
<template>
|
||||
<div ref="jcwmap" id="jcwditu" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import jquery from "jquery";
|
||||
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getAreaLineDetailData, mapjson } from "@/api/distribution";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.jcwmap.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('areamontormap').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.jcwmap.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
formData1:{
|
||||
statisticalType:null,
|
||||
id:'',
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
reportFlag: 3,
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
isfanhui: false,
|
||||
myChart: null,
|
||||
mapData: [
|
||||
// {
|
||||
// srbName: "南京",
|
||||
// coordY: 118.801847,
|
||||
// coordX: 32.094268,
|
||||
// color: "green",
|
||||
// vlaue: 100,
|
||||
// // srbNO:'4343',
|
||||
// // deptName:'南京',
|
||||
// // srbType:'电力',
|
||||
// // trade:'储能',
|
||||
// // riskLevel:'陈先生',
|
||||
// // inchargeTel:'陈先生',
|
||||
// // inCharge_Safety:'kkjs',
|
||||
// // a_Company:'jdksfj'
|
||||
// },
|
||||
// {
|
||||
// srbName: "江宁",
|
||||
// coordY: 118.903859,
|
||||
// coordX: 32.195278,
|
||||
// color: "red",
|
||||
// },
|
||||
// {
|
||||
// srbName: "合肥",
|
||||
// coordY: 117.322553,
|
||||
// coordX: 31.891106,
|
||||
// color: "green",
|
||||
// },
|
||||
// {
|
||||
// srbName: "北京",
|
||||
// coordY: 116.401314,
|
||||
// coordX: 39.916458,
|
||||
// color: "red",
|
||||
// },
|
||||
// {
|
||||
// srbName: "重庆",
|
||||
// coordY: 106.551861,
|
||||
// coordX: 29.579873,
|
||||
// color: "red",
|
||||
// },
|
||||
// {
|
||||
// srbName: "武汉",
|
||||
// coordY: 114.273057,
|
||||
// coordX: 30.626191,
|
||||
// color: "green",
|
||||
// },
|
||||
// {
|
||||
// srbName: "广州",
|
||||
// coordY: 113.219812,
|
||||
// coordX: 23.163485,
|
||||
// color: "green",
|
||||
// },
|
||||
// {
|
||||
// srbName: "昆明",
|
||||
// coordY: 102.788544,
|
||||
// coordX: 24.937427,
|
||||
// color: "green",
|
||||
// },
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
this.getclassificationData();
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('areamontormap').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.jcwmap.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData1.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData1.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData1.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData1.statisticalType = this.classificationData[0];
|
||||
},
|
||||
//返回
|
||||
fanhui() {
|
||||
this.isfanhui = false;
|
||||
this.queryData();
|
||||
},
|
||||
queryData() {
|
||||
this.formData1.searchBeginTime=this.time[0]
|
||||
this.formData1.searchEndTime=this.time[1]
|
||||
getAreaLineDetailData(this.formData1).then((res) => {
|
||||
this.mapData = res.data.substationDetailVOList;
|
||||
|
||||
let _this = this;
|
||||
// _this.mapData
|
||||
let mapList = [[], [], []];
|
||||
_this.mapData.forEach((item) => {
|
||||
if (item.color == "green") {
|
||||
mapList[0].push(item);
|
||||
} else if (item.color == "red") {
|
||||
mapList[1].push(item);
|
||||
}
|
||||
// else if (item.color == "blue") {
|
||||
// mapList[2].push(item);
|
||||
// }
|
||||
});
|
||||
//各份的地图json文件
|
||||
|
||||
|
||||
// for (var i = 0; i < allData.length; i++) {
|
||||
// allData[i].value = Math.round(Math.random() * 100);
|
||||
// }
|
||||
// areaName
|
||||
loadMap(
|
||||
"./static/mapjson/" +
|
||||
JSON.parse(window.sessionStorage.getItem("Info")).areaName +
|
||||
".json",
|
||||
""
|
||||
);
|
||||
|
||||
function loadMap(mapCode, name) {
|
||||
jquery.get(mapCode, function (data) {
|
||||
if (!(data instanceof Object)) {
|
||||
loadMap("./static/mapjson/全国.json", "");
|
||||
return;
|
||||
}
|
||||
_this.isLoading = true;
|
||||
if (data) {
|
||||
if (_this.myChart != null) {
|
||||
_this.myChart.dispose();
|
||||
}
|
||||
let echarts = require("echarts");
|
||||
let domID1 = document.getElementById("jcwditu");
|
||||
|
||||
_this.myChart = echarts.init(domID1);
|
||||
_this.isLoading = false;
|
||||
echarts.registerMap(name, data);
|
||||
var white = "#fff";
|
||||
var option = {
|
||||
title: {
|
||||
text: "监测网分布区域图",
|
||||
left: "center",
|
||||
top: "5%",
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
// triggerOn: "click",
|
||||
// formatter: function(e, t, n) {
|
||||
// return "<br />" + e.name + "<br/>区域暂降评估等级 :" + e.value
|
||||
// }
|
||||
trigger: "item",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
//console.log(params)
|
||||
var tips = "";
|
||||
if (params.value == 0) {
|
||||
tips =
|
||||
"<font style='color:" + white + "'>暂无数据</font><br/>";
|
||||
} else {
|
||||
tips +=
|
||||
"<font style='color:" +
|
||||
white +
|
||||
"'>" +
|
||||
params.name +
|
||||
"</font><br/>区域暂降评估" +
|
||||
"<font style='color:" +
|
||||
white +
|
||||
"'>:" +
|
||||
params.value +
|
||||
"</font><br/>";
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
color: ["green", "red", "blue"],
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: 26,
|
||||
bottom: 40,
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
name: "正常",
|
||||
},
|
||||
{
|
||||
name: "中断",
|
||||
},
|
||||
{
|
||||
name: "变电站",
|
||||
},
|
||||
],
|
||||
},
|
||||
// visualMap: {
|
||||
// min: 0,
|
||||
// max: 1000,
|
||||
// left: 26,
|
||||
// bottom: 40,
|
||||
// showLabel: !0,
|
||||
// //text: ["高", "低"],
|
||||
// color: ["green", "red", "blue"],
|
||||
// pieces: [
|
||||
// {
|
||||
// gte: 60,
|
||||
// lte: 100,
|
||||
// label: "正常",
|
||||
// },
|
||||
// {
|
||||
// gt: 0,
|
||||
// lt: 20,
|
||||
// label: "中断",
|
||||
// },
|
||||
// {
|
||||
// gt: 0,
|
||||
// lt: 20,
|
||||
// label: "变电站",
|
||||
// },
|
||||
// ],
|
||||
// show: !0,
|
||||
// },
|
||||
geo: {
|
||||
map: name,
|
||||
roam: true,
|
||||
// scaleLimit: {
|
||||
// min: 1,
|
||||
// max: 2
|
||||
// },
|
||||
zoom: 1.5,
|
||||
top: 160,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: "14",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(51, 69, 129, .8)", //地图背景色
|
||||
borderColor: "#999999",
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(147, 135, 148, .2)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(128, 217, 248, 1)",
|
||||
// shadowColor: 'rgba(255, 255, 255, 1)',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: "#ccc",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [],
|
||||
};
|
||||
mapList.forEach((item, ind) => {
|
||||
option.series.push({
|
||||
type: "scatter",
|
||||
mapName: name,
|
||||
name: ind == 0 ? "正常" : ind == 1 ? "中断" : "变电站",
|
||||
coordinateSystem: "geo",
|
||||
geoIndex: 0,
|
||||
animation: false, //坐标点是否显示动画
|
||||
roam: true,
|
||||
selectedMode: "false", //是否允许选中多个区域
|
||||
symbol: "pin",
|
||||
rippleEffect: {
|
||||
brushType: "fill", // stroke|fill
|
||||
},
|
||||
symbolSize: function (val, params) {
|
||||
//坐标点大小
|
||||
return 30;
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: item.map(function (itemOpt) {
|
||||
// console.log(itemOpt);
|
||||
return {
|
||||
name: itemOpt.srbName,
|
||||
value: [
|
||||
parseFloat(itemOpt.coordY), //经度
|
||||
parseFloat(itemOpt.coordX), //维度
|
||||
],
|
||||
|
||||
itemStyle: {
|
||||
//地图区域的多边形
|
||||
normal: {
|
||||
color: itemOpt.color, //坐标点颜色
|
||||
shadowBlur: 0, // 图形阴影的模糊大小
|
||||
shadowOffsetX: 0, // 阴影水平方向上的偏移距离。
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
//仅在 options中最外层的 tooltip.trigger 为 'item'时有效
|
||||
position: "bottom", //提示框位置,仅在 options中最外层的 tooltip.trigger 为 'item'时有效
|
||||
formatter: function (params, ticket, callback) {
|
||||
var strHtml = "<div>";
|
||||
strHtml += '<table class="table">';
|
||||
strHtml +=
|
||||
'<tr><td colspan="4" style="text-align:center">' +
|
||||
itemOpt.srbName +
|
||||
"</td></tr>";
|
||||
// strHtml += '<tr><td>项目编号：</td><td>' + itemOpt.srbNO + '</td><td>项目名称：</td><td>' + itemOpt.srbName + '</td></tr>';
|
||||
// strHtml += '<tr><td>所属部门：</td><td>' + itemOpt.deptName + '</td></tr>';
|
||||
// strHtml += '<tr><td>项目类型：</td><td>' + itemOpt.srbType + '</td><td>合同金额(万元)：</td><td>' + itemOpt.contractMoney + '</td></tr>';
|
||||
// strHtml += '<tr><td>业务行业：</td><td>' + itemOpt.trade + '</td><td>业务类型：</td><td>' + itemOpt.category + '</td></tr>';
|
||||
// strHtml += '<tr><td>业务等级：</td><td>' + itemOpt.riskLevel + '</td><td>单位负责人：</td><td>' + itemOpt.incharge + '</td></tr>';
|
||||
// strHtml += '<tr><td>单位负责人电话：</td><td>' + itemOpt.inchargeTel + '</td><td>项目负责人：</td><td>' + itemOpt.p_Incharge + '</td></tr>';
|
||||
// strHtml += '<tr><td>安全负责人：</td><td>' + itemOpt.inCharge_Safety + '</td><td>安全负责人电话：</td><td>' + itemOpt.inChargeTel_Safety + '</td></tr>';
|
||||
// strHtml += '<tr><td>甲方单位：</td><td>' + itemOpt.a_Company + '</td><td>施工地点：</td><td>'+itemOpt.srbAddress+'</td></tr>';
|
||||
// strHtml += '</table>';
|
||||
strHtml += "</div>";
|
||||
return strHtml;
|
||||
},
|
||||
},
|
||||
};
|
||||
}),
|
||||
// data: allData,
|
||||
});
|
||||
});
|
||||
|
||||
_this.myChart.setOption(option)
|
||||
window.echartsArr.push(_this.myChart);
|
||||
setTimeout(() => {
|
||||
_this.myChart.resize();
|
||||
}, 200);
|
||||
var timeFn = null;
|
||||
//单击切换到级地图，当mapCode有值,说明可以切换到下级地图
|
||||
_this.myChart.on("click", function (params) {
|
||||
clearTimeout(timeFn);
|
||||
//由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
|
||||
timeFn = setTimeout(function () {
|
||||
var name = params.name; //地区name
|
||||
var mapCode = './static/mapjson/'+name+'.json'; //地区的json数据
|
||||
if (!mapCode) {
|
||||
// alert("无此区域地图显示");
|
||||
return;
|
||||
}
|
||||
if (name != "全国") {
|
||||
_this.isfanhui = true;
|
||||
}
|
||||
loadMap(mapCode, name);
|
||||
}, 250);
|
||||
});
|
||||
// 绑定双击事件，返回全国地图
|
||||
_this.myChart.on("dblclick", function (params) {
|
||||
//当双击事件发生时，清除单击事件，仅响应双击事件
|
||||
clearTimeout(timeFn);
|
||||
_this.isfanhui = false;
|
||||
|
||||
//返回全国地图
|
||||
loadMap("./static/mapjson/全国.json", "");
|
||||
});
|
||||
} else {
|
||||
// alert("无法加载该地图");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
// jcwditu() {
|
||||
// const echarts = require("echarts");
|
||||
// var myChartes = echarts.init(document.getElementById("jcwditu"));
|
||||
// let mapname = require("@/assets/js/zhonguo.json");
|
||||
// myChartes.clear();
|
||||
// echarts.registerMap("中国", mapname);
|
||||
// var option = {
|
||||
// title: {
|
||||
// text: "监测网分布区域图",
|
||||
// left: "center",
|
||||
// top: "5%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
// },
|
||||
// visualMap: {
|
||||
// min: 0,
|
||||
// max: 1000,
|
||||
// left: 26,
|
||||
// bottom: 40,
|
||||
// showLabel: !0,
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
// //text: ["高", "低"],
|
||||
// pieces: [
|
||||
// {
|
||||
// gte: 60,
|
||||
// lte: 100,
|
||||
// label: "正常",
|
||||
// color: "green",
|
||||
// },
|
||||
// {
|
||||
// gt: 0,
|
||||
// lt: 20,
|
||||
// label: "中断",
|
||||
// color: "red",
|
||||
// },
|
||||
// {
|
||||
// gt: 0,
|
||||
// lt: 20,
|
||||
// label: "变电站",
|
||||
// color: "blue",
|
||||
// },
|
||||
// ],
|
||||
// show: !0,
|
||||
// },
|
||||
// geo: {
|
||||
// type: "map",
|
||||
// map: "中国",
|
||||
// roam: true,
|
||||
// top: "25%",
|
||||
// zoom: 1.8,
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: true,
|
||||
// fontSize: "14",
|
||||
// color: "#fff",
|
||||
// },
|
||||
// },
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: "rgba(51, 69, 129, .8)", //地图背景色
|
||||
// borderColor: "#999999",
|
||||
// borderWidth: 1,
|
||||
// areaColor: {
|
||||
// type: "radial",
|
||||
// x: 0.5,
|
||||
// y: 0.5,
|
||||
// r: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(147, 135, 148, .2)", // 100% 处的颜色
|
||||
// },
|
||||
// ],
|
||||
// globalCoord: false, // 缺省为 false
|
||||
// },
|
||||
// shadowColor: "rgba(128, 217, 248, 1)",
|
||||
// // shadowColor: 'rgba(255, 255, 255, 1)',
|
||||
// shadowOffsetX: -2,
|
||||
// shadowOffsetY: 2,
|
||||
// shadowBlur: 10,
|
||||
// },
|
||||
// emphasis: {
|
||||
// areaColor: "#ccc",
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 0,
|
||||
// borderWidth: 0,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// type: "scatter",
|
||||
// mapName: name,
|
||||
// coordinateSystem: "geo",
|
||||
// geoIndex: 0,
|
||||
// animation: false, //坐标点是否显示动画
|
||||
// roam: true,
|
||||
// selectedMode: "false", //是否允许选中多个区域
|
||||
// symbol: "pin",
|
||||
// rippleEffect: {
|
||||
// brushType: "fill", // stroke|fill
|
||||
// },
|
||||
// symbolSize: function (val, params) {
|
||||
// return 30;
|
||||
// },
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// emphasis: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// data: this.mapData.map(function (itemOpt) {
|
||||
// return {
|
||||
// name: itemOpt.srbName,
|
||||
// value: [
|
||||
// parseFloat(itemOpt.coordY), //经度
|
||||
// parseFloat(itemOpt.coordX) //维度
|
||||
// ],
|
||||
|
||||
// itemStyle: {
|
||||
// //地图区域的多边形
|
||||
// normal: {
|
||||
// color: itemOpt.color, //坐标点颜色
|
||||
// shadowBlur: 0, // 图形阴影的模糊大小
|
||||
// shadowOffsetX: 0, // 阴影水平方向上的偏移距离。
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// position: "bottom", //提示框位置,仅在 options中最外层的 tooltip.trigger 为 'item'时有效
|
||||
// formatter: function (params, ticket, callback) {
|
||||
// var strHtml = "<div>";
|
||||
// strHtml += '<table class="table">';
|
||||
// strHtml +=
|
||||
// '<tr><td colspan="4" style="text-align:center">' +
|
||||
// itemOpt.srbName +
|
||||
// "</td></tr>";
|
||||
// strHtml += "</div>";
|
||||
// return strHtml;
|
||||
// },
|
||||
// },
|
||||
// };
|
||||
// }),
|
||||
// },
|
||||
// // {
|
||||
// // name: "综合评估为",
|
||||
// // type: "map",
|
||||
// // geoIndex: 0,
|
||||
// // data: this.dataList,
|
||||
// // },
|
||||
// ],
|
||||
// };
|
||||
|
||||
// setTimeout(() => {
|
||||
// myChartes.resize();
|
||||
// }, 100);
|
||||
// this.loadingd = false;
|
||||
// let _this = this;
|
||||
// _this.$erd.listenTo(_this.$refs.jcwmap, (element) => {
|
||||
// _this.$nextTick(() => {
|
||||
// myChartes.resize();
|
||||
// });
|
||||
// });
|
||||
// window.onresize = function () {
|
||||
// myChartes.resize();
|
||||
// };
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
157
src/views/componentschild/areamontortable.vue
Normal file
157
src/views/componentschild/areamontortable.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div style="padding: 0px">
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
stripe
|
||||
:data="distributionData"
|
||||
:height="vh"
|
||||
border
|
||||
class="mt10"
|
||||
style="width: 100%; height: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column
|
||||
prop="qy"
|
||||
label="区域"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="jcd"
|
||||
label="监测点数(个数)"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="zc"
|
||||
label="通讯正常(个数)"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="zd"
|
||||
label="通讯中断(个数)"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getAreaLineDetailData } from "@/api/distribution";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.vh = document.getElementById("conmentId").offsetHeight-50;
|
||||
this.queryData();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areamontortable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
this.queryData();
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
vh: null,
|
||||
h: 0,
|
||||
classificationData: [],
|
||||
distributionData: [],
|
||||
time: this.timefamt(),
|
||||
formData: {
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
serverName: "event-boot",
|
||||
statisticalType: {},
|
||||
},
|
||||
// classificationData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areamontortable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
queryData() {
|
||||
this.isLoading = true;
|
||||
// this.formData.searchBeginTime = this.time[0];
|
||||
// this.formData.searchEndTime = this.time[1];
|
||||
getAreaLineDetailData(this.formData).then((res) => {
|
||||
let table = [];
|
||||
for (var i = 0; i < res.data.areaValue.length; i++) {
|
||||
let t = {
|
||||
qy: res.data.areaValue[i][0],
|
||||
jcd: res.data.areaValue[i][1],
|
||||
zc: res.data.areaValue[i][2],
|
||||
zd: res.data.areaValue[i][3],
|
||||
};
|
||||
table.push(t);
|
||||
}
|
||||
this.distributionData = table;
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
285
src/views/componentschild/areamontortu.vue
Normal file
285
src/views/componentschild/areamontortu.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div ref="areaMontor" id="montorEcharts" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getAreaLineDetailData } from "@/api/distribution";
|
||||
import yan from "@/assets/commjs/color";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.areaMontor.style.height =
|
||||
document.getElementById("conmentId").offsetHeight - 50 + "px";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areamontortu").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areaMontor.style.height = height;
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classificationData: [],
|
||||
distributionData: [],
|
||||
time: this.timefamt(),
|
||||
formData: {
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
serverName: "event-boot",
|
||||
statisticalType: {},
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areamontortu").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areaMontor.style.height = height;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
// this.formData1.searchBeginTime = this.time[0];
|
||||
// this.formData1.searchEndTime = this.time[1];
|
||||
getAreaLineDetailData(this.formData).then((res) => {
|
||||
let table = [];
|
||||
for (var i = 0; i < res.data.areaValue.length; i++) {
|
||||
let t = {
|
||||
qy: res.data.areaValue[i][0],
|
||||
jcd: res.data.areaValue[i][1],
|
||||
zc: res.data.areaValue[i][2],
|
||||
zd: res.data.areaValue[i][3],
|
||||
};
|
||||
table.push(t);
|
||||
}
|
||||
this.distributionData = table;
|
||||
this.qualifiedechart();
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
qualifiedechart() {
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let xdata = [];
|
||||
let ydata = [];
|
||||
this.distributionData.forEach((item) => {
|
||||
xdata.push(item.qy);
|
||||
ydata.push(item.jcd);
|
||||
});
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("montorEcharts"));
|
||||
myChartes.clear();
|
||||
//let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let option = {
|
||||
title: {
|
||||
text: JSON.parse(window.sessionStorage.getItem("Info")).areaName,
|
||||
left: "center",
|
||||
textStyle: {
|
||||
fontWeight: "400",
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
//提示框组件
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0,
|
||||
},
|
||||
grid: yan.EchartObject.gridf,
|
||||
// legend: {
|
||||
// data: ['暂降次数',],
|
||||
// icon: 'rect',
|
||||
// top: 10,
|
||||
// left: '7%',
|
||||
// itemGap: 20,
|
||||
// itemWidth: 12,
|
||||
// itemHeight: 8,
|
||||
// },
|
||||
xAxis: [
|
||||
{
|
||||
name:yan.EchartObject.area,
|
||||
type: "category",
|
||||
data: xdata,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: yan.EchartObject.monitoring1,
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
//fontSize:10
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: "#fff",
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: "bar",
|
||||
data: ydata,
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: echartsColor.FigureColor[0], // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: echartsColor.FigureColor[0], // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
|
||||
shadowBlur: 0,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
lineHeight: 10,
|
||||
formatter: "{c}",
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.areaMontor, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
130
src/views/componentschild/areaseveritytable.vue
Normal file
130
src/views/componentschild/areaseveritytable.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div style="padding: 0px">
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
stripe
|
||||
:data="areaData"
|
||||
:height="vh"
|
||||
border
|
||||
class="mt10"
|
||||
style="width: 100%; height: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column label="区域" prop="name" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column label="暂降次数" prop="count" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column label="监测点个数" prop="size" align="center">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getAreaDownStatisticsData } from "@/api/center/DropEvent.js";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.vh = document.getElementById("conmentId").offsetHeight-50;
|
||||
this.queryData();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaseveritytable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
this.queryData();
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
vh: null,
|
||||
h: 0,
|
||||
classificationData: [],
|
||||
areaData: [],
|
||||
time: this.timefamt(),
|
||||
formData: {
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
},
|
||||
// classificationData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaseveritytable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
queryData() {
|
||||
this.isLoading = true;
|
||||
this.formData.searchBeginTime = this.time[0];
|
||||
this.formData.searchEndTime = this.time[1];
|
||||
getAreaDownStatisticsData(this.formData).then((res) => {
|
||||
this.areaData = res.data.param;
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
268
src/views/componentschild/areaseveritytu.vue
Normal file
268
src/views/componentschild/areaseveritytu.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div ref="areaSeverity" id="severityEcharts" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getAreaDownStatisticsData } from "@/api/center/DropEvent.js";
|
||||
import yan from "@/assets/commjs/color";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.areaSeverity.style.height =
|
||||
document.getElementById("conmentId").offsetHeight - 50 + "px";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaseveritytu").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areaSeverity.style.height = height;
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classificationData: [],
|
||||
areaData: [],
|
||||
time: this.timefamt(),
|
||||
formData: {
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaseveritytu").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areaSeverity.style.height = height;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
this.formData.searchBeginTime = this.time[0];
|
||||
this.formData.searchEndTime = this.time[1];
|
||||
getAreaDownStatisticsData(this.formData).then((res) => {
|
||||
this.areaData = res.data.param;
|
||||
this.qualifiedechart();
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
qualifiedechart() {
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let xdata = [];
|
||||
let xVal = [];
|
||||
this.areaData.forEach((item) => {
|
||||
xdata.push(item.name);
|
||||
xVal.push(item.count);
|
||||
});
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("severityEcharts"));
|
||||
myChartes.clear();
|
||||
//let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let option = {
|
||||
title: {
|
||||
text: "区域暂降次数",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
fontWeight: "400",
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["暂降次数"],
|
||||
right: "10px",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0,
|
||||
},
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
grid: yan.EchartObject.gridf,
|
||||
color: echartsColor.FigureColor,
|
||||
xAxis: {
|
||||
type: "category",
|
||||
name:yan.EchartObject.area,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
data: xdata,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: yan.EchartObject.times,
|
||||
minInterval: 1,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
//fontSize:10
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: "#fff",
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "暂降次数",
|
||||
data: xVal,
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value == 3.141592) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#999999",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: echartsColor.FigureColor[0], // 0% 处的颜色
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.areaSeverity, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
228
src/views/componentschild/areatransienttable-jb.vue
Normal file
228
src/views/componentschild/areatransienttable-jb.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div style="padding: 0px">
|
||||
<el-col :span="24">
|
||||
<vxe-table
|
||||
:data="domainData"
|
||||
:height="vh"
|
||||
border
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
size="mini"
|
||||
ref="EventDetails"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
style="width: 100%"
|
||||
>
|
||||
<vxe-table-column
|
||||
field="deptName"
|
||||
title="所属单位"
|
||||
align="center"
|
||||
show-overflow
|
||||
min-width="180"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="measurementPointName"
|
||||
title="监测点名称"
|
||||
show-overflow
|
||||
align="center"
|
||||
min-width="180"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="monitorSort"
|
||||
title="监测点类别"
|
||||
align="center"
|
||||
min-width="150"
|
||||
show-overflow
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="eventType"
|
||||
title="暂态指标类型"
|
||||
align="center"
|
||||
min-width="130"
|
||||
show-overflow
|
||||
></vxe-table-column>
|
||||
<!-- <vxe-table-column
|
||||
field="phase"
|
||||
title="相别"
|
||||
align="center"
|
||||
min-width="100"
|
||||
show-overflow
|
||||
></vxe-table-column> -->
|
||||
<vxe-table-column
|
||||
field="startTime"
|
||||
title="事件发生时间"
|
||||
align="center"
|
||||
min-width="150"
|
||||
show-overflow
|
||||
></vxe-table-column>
|
||||
<vxe-table-column field="duration" title="持续时间(s)" min-width="110" show-overflow align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.duration.toFixed(2) }}
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="featureAmplitude"
|
||||
title="特征幅值(%)"
|
||||
align="center"
|
||||
min-width="100"
|
||||
></vxe-table-column>
|
||||
</vxe-table>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
import {
|
||||
getDetailsOfTransientEvents,
|
||||
getTransientAnalyseWave,
|
||||
getTransientAnalyseWaves
|
||||
} from '@/api/Statistical-analysis/transientIndicators/transientIndicators'
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.vh = document.getElementById('conmentId').offsetHeight - 180
|
||||
this.queryData()
|
||||
} else {
|
||||
return
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById('areatransienttable').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50
|
||||
this.vh = height + 10
|
||||
this.queryData()
|
||||
}, 200)
|
||||
} else {
|
||||
return
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
vh: null,
|
||||
h: 0,
|
||||
classificationData: [],
|
||||
eventType: [],
|
||||
domainData: [],
|
||||
time: this.timefamt(),
|
||||
total: undefined,
|
||||
rowClassName: '',
|
||||
formData: {
|
||||
endTime: '',
|
||||
id: '',
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
eventType: ['e2e73da64f106fbf8322caa762ea7781', 'c37861896dafab0883321e1d508caa51'],
|
||||
monitorName: '',
|
||||
monitorSort: ['78a96acb276a5fe9d6eff737fdf1973f'],
|
||||
startTime: '',
|
||||
subName: '',
|
||||
type: 3
|
||||
// timeFlag: "",
|
||||
}
|
||||
// classificationData: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData()
|
||||
this.queryData()
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById('areatransienttableJb').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50
|
||||
this.vh = height + 10
|
||||
}, 200)
|
||||
},
|
||||
methods: {
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
this.formData.statisticalType = dicData('Statistical_Type', [])[0]
|
||||
this.eventType = dicData('Event_Statis', [])
|
||||
},
|
||||
//过滤
|
||||
formFilter(row, column) {
|
||||
//console.log();
|
||||
if (row.column.property == 'eventType') {
|
||||
// let title = "";
|
||||
this.eventType.forEach(item => {
|
||||
if (item.value == row.row.eventType) {
|
||||
row.row.depth = item.label
|
||||
}
|
||||
})
|
||||
// row.row.eventType = title
|
||||
return row.row.depth
|
||||
} else {
|
||||
return row.row[row.column.property]
|
||||
}
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date()
|
||||
var year = date.getFullYear()
|
||||
var month = date.getMonth() + 1
|
||||
var day = date.getDate()
|
||||
month = month > 9 ? month : '0' + month
|
||||
day = day < 10 ? '0' + day : day
|
||||
var arr = []
|
||||
var time1 = year + '-' + month + '-01'
|
||||
arr.push(time1)
|
||||
var time2 = year + '-' + month + '-' + day
|
||||
arr.push(time2)
|
||||
return arr
|
||||
},
|
||||
queryData() {
|
||||
this.isLoading = true
|
||||
this.formData.startTime = this.time[0]
|
||||
this.formData.endTime = this.time[1]
|
||||
var info = window.sessionStorage.getItem('Info')
|
||||
info = eval('(' + info + ')')
|
||||
this.formData.id = info.deptId
|
||||
getDetailsOfTransientEvents(this.formData).then(res => {
|
||||
res.data.records.forEach(item => {
|
||||
for (let key in item) {
|
||||
if (item[key] == null) {
|
||||
item[key] = '/'
|
||||
}
|
||||
}
|
||||
})
|
||||
this.domainData = res.data.records
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.formData.pageSize = val
|
||||
this.queryData()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.foformDatarm.pageNum = val
|
||||
this.queryData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
299
src/views/componentschild/areatransienttable.vue
Normal file
299
src/views/componentschild/areatransienttable.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<div style="padding: 0px">
|
||||
<el-col :span="24">
|
||||
<vxe-table
|
||||
:data="domainData"
|
||||
:height="vh"
|
||||
stripe
|
||||
border
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
size="mini"
|
||||
ref="EventDetails"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
:row-class-name="rowClassName"
|
||||
>
|
||||
|
||||
<vxe-table-column
|
||||
field="gdName"
|
||||
title="所属单位"
|
||||
align="center"
|
||||
min-width="120"
|
||||
show-overflow
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="lineName"
|
||||
title="监测点名称"
|
||||
show-overflow
|
||||
align="center"
|
||||
min-width="120"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="subName"
|
||||
title="变电站"
|
||||
align="center"
|
||||
min-width="120"
|
||||
show-overflow
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="ip"
|
||||
title="网络参数"
|
||||
align="center"
|
||||
show-overflow
|
||||
min-width="120"
|
||||
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="eventType"
|
||||
title="触发类型"
|
||||
|
||||
:formatter="formFilter"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="advanceReason"
|
||||
title="暂降原因"
|
||||
|
||||
align="center"
|
||||
min-width="120"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="scale"
|
||||
title="电压等级"
|
||||
align="center"
|
||||
show-overflow
|
||||
min-width="120"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="startTime"
|
||||
title="开始时间"
|
||||
align="center"
|
||||
show-overflow
|
||||
min-width="120"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="duration"
|
||||
title="持续时间(s)"
|
||||
show-overflow
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.duration.toFixed(2) }}
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="featureAmplitude"
|
||||
title="特征幅值(%)"
|
||||
align="center"
|
||||
min-width="140"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ ((scope.row.featureAmplitude)*100).toFixed(2) }}
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
</vxe-table>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import {
|
||||
getDetailsOfTransientEvents,
|
||||
getTransientAnalyseWave,
|
||||
getTransientAnalyseWaves,
|
||||
} from "@/api/Statistical-analysis/transientIndicators/transientIndicators";
|
||||
import api2 from "@/api/harmonic/harmonic";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.vh = document.getElementById("conmentId").offsetHeight - 50;
|
||||
this.queryData();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areatransienttable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
this.queryData();
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
vh: null,
|
||||
h: 0,
|
||||
classificationData: [],
|
||||
eventType: [],
|
||||
domainData: [],
|
||||
time: this.timefamt(),
|
||||
total: undefined,
|
||||
rowClassName:'',
|
||||
formData: {
|
||||
statisticalType:null,
|
||||
scale:null,
|
||||
isType: 0,
|
||||
manufacturer:null,
|
||||
loadType:null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
pageNum: 1,
|
||||
statFlag: true,
|
||||
pageSize: 20,
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
// classificationData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
this.getclassificationData();
|
||||
this.getclassificationDatad()
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areatransienttable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
// 数据过滤
|
||||
//过滤
|
||||
formFilter(row, column) {
|
||||
//console.log(row);
|
||||
if (row.column.property == "eventType") {
|
||||
// let title = "";
|
||||
this.eventType.forEach((item) => {
|
||||
if (item.value == row.row.eventType) {
|
||||
row.row.depth = item.label;
|
||||
}
|
||||
});
|
||||
// row.row.eventType = title
|
||||
return row.row.depth;
|
||||
} else {
|
||||
return row.row[row.column.property];
|
||||
}
|
||||
},
|
||||
// 获取类型
|
||||
getclassificationDatad() {
|
||||
//地区特征
|
||||
this.eventType = dicData("Event_Statis", []);
|
||||
},
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData.scale = this.voltageleveloption;
|
||||
},
|
||||
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
|
||||
//过滤
|
||||
formFilter(row, column) {
|
||||
// console.log();
|
||||
if (row.column.property == "eventType") {
|
||||
// let title = "";
|
||||
this.eventType.forEach((item) => {
|
||||
if (item.value == row.row.eventType) {
|
||||
row.row.depth = item.label;
|
||||
}
|
||||
});
|
||||
// row.row.eventType = title
|
||||
return row.row.depth;
|
||||
} else {
|
||||
return row.row[row.column.property];
|
||||
}
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
queryData() {
|
||||
this.formData.searchBeginTime = this.time[0];
|
||||
this.formData.searchEndTime = this.time[1];
|
||||
var info = window.sessionStorage.getItem("Info");
|
||||
info = eval("(" + info + ")");
|
||||
this.formData.id =info.deptId;
|
||||
api2.getTransientData(this.formData).then((res) => {
|
||||
this.domainData = res.data.records;
|
||||
});
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.formData.pageSize = val;
|
||||
this.queryData();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.foformDatarm.pageNum = val;
|
||||
this.queryData();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
283
src/views/componentschild/areaview.vue
Normal file
283
src/views/componentschild/areaview.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<div ref="areaView" id="viewEcharts" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getAreaData } from "@/api/Tableabove";
|
||||
import yan from "@/assets/commjs/color";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.areaView.style.height =
|
||||
document.getElementById("conmentId").offsetHeight - 50 + "px";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaview").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areaView.style.height = height;
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classificationData: [],
|
||||
areaStatistics: [],
|
||||
time: this.timefamt(),
|
||||
formData: {
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
serverName: "event-boot",
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: {},
|
||||
timeFlag: 1,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaview").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areaView.style.height = height;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
this.formData.searchBeginTime = this.time[0];
|
||||
this.formData.searchEndTime = this.time[1];
|
||||
getAreaData(this.formData).then((res) => {
|
||||
this.areaStatistics = res.data.areaStatistics.areaCalculation;
|
||||
this.qualifiedechart();
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
qualifiedechart() {
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let echartsndArr = [];
|
||||
let echartsArr = [];
|
||||
this.areaStatistics.forEach((item) => {
|
||||
echartsndArr.push(item.areaName);
|
||||
echartsArr.push(item.frequency);
|
||||
});
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("viewEcharts"));
|
||||
myChartes.clear();
|
||||
//let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let option = {
|
||||
title: {
|
||||
text: "区域",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
//提示框组件
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0,
|
||||
formatter: function (params) {
|
||||
// console.log(params);
|
||||
var tips = "";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.14159) {
|
||||
tips += params[i].name + "<br/>";
|
||||
tips += params[i].seriesName + ":暂无数据<br/>";
|
||||
} else {
|
||||
tips += params[i].name + "<br/>";
|
||||
tips += params[i].seriesName + ":" + params[i].value + "<br/>";
|
||||
}
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridj,
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
color: echartsColor.FigureColor,
|
||||
legend: {
|
||||
data: ["暂降次数"],
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
right: 80,
|
||||
itemGap: 28,
|
||||
itemStyle: {
|
||||
color: echartsColor.FigureColor[0],
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
name: yan.EchartObject.area1,
|
||||
type: "category",
|
||||
data: echartsndArr,
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: yan.EchartObject.nuit2,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
minInterval: 1,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
//fontSize:10
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: "#fff",
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//这里是颜色
|
||||
color: function (params) {
|
||||
// console.log(params,'1111111111111111111111');
|
||||
if (params.data == 3.14159) {
|
||||
return echartsColor.FigureColor[9];
|
||||
} else {
|
||||
return echartsColor.FigureColor[0];
|
||||
}
|
||||
},
|
||||
},
|
||||
// color: echartsColor.FigureColor[0],
|
||||
},
|
||||
name: "暂降次数",
|
||||
type: "bar",
|
||||
data: echartsArr,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.areaView, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
283
src/views/componentschild/areaviewdydj.vue
Normal file
283
src/views/componentschild/areaviewdydj.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<div ref="areadydj" id="dydjEcharts" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getAreaData } from "@/api/Tableabove";
|
||||
import yan from "@/assets/commjs/color";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.areadydj.style.height =
|
||||
document.getElementById("conmentId").offsetHeight - 50 + "px";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaviewdydj").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areadydj.style.height = height;
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classificationData: [],
|
||||
voltageStatistics: [],
|
||||
time: this.timefamt(),
|
||||
formData: {
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
serverName: "event-boot",
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: {},
|
||||
timeFlag: 1,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaviewdydj").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areadydj.style.height = height;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
this.formData.searchBeginTime = this.time[0];
|
||||
this.formData.searchEndTime = this.time[1];
|
||||
getAreaData(this.formData).then((res) => {
|
||||
this.voltageStatistics =
|
||||
res.data.voltageStatistics.voltageLevelCalculation;
|
||||
this.qualifiedechart();
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
qualifiedechart() {
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let echartsndArr = [];
|
||||
let echartsArr = [];
|
||||
this.voltageStatistics.forEach((item) => {
|
||||
echartsndArr.push(item.voltageLevel);
|
||||
echartsArr.push(item.frequency);
|
||||
});
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("dydjEcharts"));
|
||||
myChartes.clear();
|
||||
//let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let option = {
|
||||
title: {
|
||||
text: "电压等级",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
fontWeight: "400",
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
//提示框组件
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0,
|
||||
formatter: function (params) {
|
||||
// console.log(params);
|
||||
var tips = "";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.14159) {
|
||||
tips += params[i].name + "<br/>";
|
||||
tips += params[i].seriesName + ":暂无数据<br/>";
|
||||
} else {
|
||||
tips += params[i].name + "<br/>";
|
||||
tips += params[i].seriesName + ":" + params[i].value + "<br/>";
|
||||
}
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridj,
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
legend: {
|
||||
data: ["暂降次数"],
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
right: 80,
|
||||
itemGap: 28,
|
||||
itemStyle: {
|
||||
color: echartsColor.FigureColor[0],
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
name: yan.EchartObject.voltage1,
|
||||
type: "category",
|
||||
data: echartsndArr,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: yan.EchartObject.nuit2,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
minInterval: 1,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
//fontSize:10
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: "#fff",
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//这里是颜色
|
||||
color: function (params) {
|
||||
// console.log(params,'1111111111111111111111');
|
||||
if (params.data == 3.14159) {
|
||||
return echartsColor.FigureColor[9];
|
||||
} else {
|
||||
return echartsColor.FigureColor[0];
|
||||
}
|
||||
},
|
||||
},
|
||||
// color: echartsColor.FigureColor[0],
|
||||
},
|
||||
name: "暂降次数",
|
||||
type: "bar",
|
||||
data: echartsArr,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.areadydj, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
346
src/views/componentschild/areaviewmonth.vue
Normal file
346
src/views/componentschild/areaviewmonth.vue
Normal file
@@ -0,0 +1,346 @@
|
||||
<template>
|
||||
<div ref="areamonth" id="monthEcharts" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getAreaData } from "@/api/Tableabove";
|
||||
import yan from "@/assets/commjs/color";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.areamonth.style.height =
|
||||
document.getElementById("conmentId").offsetHeight - 50 + "px";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaviewmonth").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areamonth.style.height = height;
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classificationData: [],
|
||||
monthlyStatistics: [],
|
||||
time: this.timefamt(),
|
||||
formData: {
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
serverName: "event-boot",
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: {},
|
||||
timeFlag: 1,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("areaviewmonth").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.areamonth.style.height = height;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
this.formData.searchBeginTime = this.time[0];
|
||||
this.formData.searchEndTime = this.time[1];
|
||||
getAreaData(this.formData).then((res) => {
|
||||
this.monthlyStatistics = res.data.monthlyStatistics.monthCalculation;
|
||||
this.qualifiedechart();
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
qualifiedechart() {
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let echartsndArr = [];
|
||||
let echartsArr = [];
|
||||
let echartswArr = [];
|
||||
this.monthlyStatistics.forEach((item) => {
|
||||
echartsndArr.push(item.month);
|
||||
echartsArr.push(item.linked);
|
||||
echartswArr.push(item.notAssociated);
|
||||
});
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("monthEcharts"));
|
||||
myChartes.clear();
|
||||
//let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let option = {
|
||||
title: {
|
||||
text:"月份",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
fontWeight: "400",
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
//提示框组件
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0,
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips += params[0].name + "<br/>";
|
||||
// for (var i = 0; i < params.length; i++) {
|
||||
// if (params[i].value == 3.14159) {
|
||||
// tips += params[i].seriesName + ":暂无数据<br/>";
|
||||
// } else {
|
||||
// // tips += params[i].name + "<br/>";
|
||||
// tips += params[i].seriesName + ":" + params[i].value + "<br/>";
|
||||
// }
|
||||
// }
|
||||
params.forEach((item, i) => {
|
||||
if (item.value == 3.14159) {
|
||||
tips += item.seriesName + ":暂无数据<br/>";
|
||||
} else {
|
||||
tips += item.seriesName + ":" + item.value + "<br/>";
|
||||
}
|
||||
});
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridj,
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
legend: {
|
||||
data: ["未关联暂降次数", "已关联处理事件"],
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
right: 80,
|
||||
itemGap: 28,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
name: yan.EchartObject.month,
|
||||
type: "category",
|
||||
data: echartsndArr,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
color: [echartsColor.FigureColor[0],echartsColor.FigureColor[5]],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: yan.EchartObject.nuit2,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
minInterval: 1,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
//fontSize:10
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: "#fff",
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
// {
|
||||
// name: '未关联暂降次数',
|
||||
// type: 'bar',
|
||||
// data: list1,
|
||||
// },
|
||||
{
|
||||
name: "未关联暂降次数",
|
||||
type: "bar",
|
||||
stack: "总数",
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
|
||||
data: echartswArr,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
// show: true, //数字开启显示
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
color: function (params) {
|
||||
// console.log(params,'1111111111111111111111');
|
||||
if (params.data == 3.14159) {
|
||||
return echartsColor.FigureColor[9];
|
||||
} else {
|
||||
return echartsColor.FigureColor[0];
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "已关联处理事件",
|
||||
type: "bar",
|
||||
stack: "总数",
|
||||
// itemStyle: {
|
||||
// color: echartsColor.FigureColor,
|
||||
// },
|
||||
// barWidth: 30,
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
data: echartsArr,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
// show: true, //数字开启显示
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
color: function (params) {
|
||||
// console.log(params,'1111111111111111111111');
|
||||
if (params.data == 3.14159) {
|
||||
return echartsColor.FigureColor[9];
|
||||
} else {
|
||||
return echartsColor.FigureColor[5];
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
// {
|
||||
// name: '已关联处理事件',
|
||||
// type: 'bar',
|
||||
// data: list2,
|
||||
// },
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.areamonth, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
495
src/views/componentschild/compentwuqutu.vue
Normal file
495
src/views/componentschild/compentwuqutu.vue
Normal file
@@ -0,0 +1,495 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="height:30px;height:20px;position:absolute;right:10px">
|
||||
<el-tag style="background:#CC0000;width:30px;height:15px;border:1px solid #CC0000;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#CC0000;font-weight:400;;float:left">  重度污染  </span>
|
||||
<el-tag size="mini" style="background:#ff9900;width:30px;height:15px;border:1px solid #ff9900;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#ff9900;font-weight:400;float:left" >  中度污染  </span>
|
||||
<el-tag style="background:#FFCC33;width:30px;height:15px;border:1px solid #FFCC33;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#FFCC33;font-weight:400;float:left" >  轻度污染  </span>
|
||||
<el-tag style="background:#3399ff;width:30px;height:15px;border:1px solid #3399ff;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#3399ff;font-weight:400;float:left" >  轻微污染  </span>
|
||||
<el-tag style="background:#339966;width:30px;height:15px;border:1px solid #339966;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#339966;font-weight:400;float:left" >  无污染</span>
|
||||
</div>
|
||||
<div ref="compf" id="comp" style="width: 100%;"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/pollution/pollution";
|
||||
import yan from "@/assets/commjs/color";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.compf.style.height =
|
||||
document.getElementById("conmentId").offsetHeight - 50 + "px";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("compentwuqutu").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.compf.style.height = height;
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classificationData: [],
|
||||
areaData: [],
|
||||
time: this.timefamt(),
|
||||
formData: {
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
id:'',
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
reportFlag: 3,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: [],
|
||||
},
|
||||
xdata:[],
|
||||
ydata:[]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("compentwuqutu").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.compf.style.height = height;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
//获取统计类型
|
||||
getIndexType() {
|
||||
var code = "Pollution_Statis";
|
||||
this.classificationData = dicData(code, [
|
||||
"I_Neg",
|
||||
"V_Inharm",
|
||||
"V_Dev",
|
||||
"V_Unbalance",
|
||||
"Plt",
|
||||
"Freq_Dev",
|
||||
]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
this.formData.searchBeginTime = this.time[0];
|
||||
this.formData.searchEndTime = this.time[1];
|
||||
api.deptSubstationRelations(this.formData).then((res) => {
|
||||
this.areaData = res.data;
|
||||
let xarr =[]
|
||||
let yarr =[]
|
||||
this.areaData.forEach((item) => {
|
||||
xarr.push(item.name);
|
||||
yarr.push(item.data);
|
||||
});
|
||||
this.xdata = xarr;
|
||||
for (var i = 0; i < yarr.length; i++) {
|
||||
if (yarr[i] == 0 || yarr[i] == -1) {
|
||||
yarr[i] = 0.05;
|
||||
}
|
||||
}
|
||||
this.ydata = yarr;
|
||||
this.qualifiedechart();
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
qualifiedechart() {
|
||||
// let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("comp"));
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
myChartes.clear();
|
||||
let option = {
|
||||
title: {
|
||||
//text: "区域",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: "#fff",
|
||||
},
|
||||
// subtext: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips +=
|
||||
'<span style="">' +
|
||||
params[0].name +'</br>'
|
||||
"</span>";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 0.05) {
|
||||
tips += params[i].seriesName + ":暂无数据<br/>";
|
||||
} else {
|
||||
tips += params[i].seriesName + ":"+params[i].value;
|
||||
}
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridf,
|
||||
|
||||
xAxis: [
|
||||
|
||||
{
|
||||
name:yan.EchartObject.area,
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
type: "category",
|
||||
data: this.xdata,
|
||||
splitLine: {
|
||||
show: false,
|
||||
type: "dashed",
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
symbol: ["none", "arrow"],
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
fontFamily: "dinproRegular",
|
||||
color: '#fff',
|
||||
},
|
||||
rotate: yan.rotate(this.xdata.length)
|
||||
},
|
||||
},
|
||||
],
|
||||
//toolbox: yan.EchartObject.toolbox1,
|
||||
yAxis: {
|
||||
name: yan.EchartObject.grade,
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 2,
|
||||
interval: 0.2,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
// 这里重新定义就可以
|
||||
formatter: function (value, index) {
|
||||
var texts = [];
|
||||
if (value ===1) {
|
||||
texts.push("1级");
|
||||
} else if (value ===1.2) {
|
||||
texts.push("2级");
|
||||
} else if (value === 1.4) {
|
||||
texts.push("3级");
|
||||
} else if (value === 1.6) {
|
||||
texts.push("4级");
|
||||
} else if (value === 2) {
|
||||
texts.push("5级");
|
||||
}
|
||||
return texts;
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show:false,
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ["#fff"],
|
||||
//type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
},
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
series: [
|
||||
{
|
||||
name: "污染值",
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >2) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.zdContaminated,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (1.6< params.value && params.value <= 2) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.centerContaminated,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (1.2< params.value && params.value <= 1.6) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qdContaminated,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (1< params.value && params.value <=1.2) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qwContaminated,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (
|
||||
0 < params.value &&
|
||||
params.value <=1 && params.value >= 0 &&
|
||||
params.value !== 0.05
|
||||
) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.noContaminated,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value == 0.05) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#999999",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: "circle",
|
||||
lineStyle: {
|
||||
color: "red",
|
||||
width: 1,
|
||||
},
|
||||
emphasis: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: "",
|
||||
yAxis: 1,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.noContaminated,
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.noContaminated,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 1.2,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.qwContaminated,
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.qwContaminated,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 1.4,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.qdContaminated,
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.qdContaminated,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 1.6,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.centerContaminated,
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.centerContaminated,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 2,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.zdContaminated,
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.zdContaminated,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
data: this.ydata,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
// let _this = this;
|
||||
// _this.$erd.listenTo(_this.$refs.areaSeverity, (element) => {
|
||||
// _this.$nextTick(() => {
|
||||
// myChartes.resize();
|
||||
// });
|
||||
// });
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
486
src/views/componentschild/compevaluation.vue
Normal file
486
src/views/componentschild/compevaluation.vue
Normal file
@@ -0,0 +1,486 @@
|
||||
<template>
|
||||
<div id="compeva" ref="dfsr" style="width: 100%;">
|
||||
<!-- 监测点规模--负荷类型内容 -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
import api from "@/api/harmonic/onlineData";
|
||||
import yan from "@/assets/commjs/color";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.dfsr.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('compevaluation').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.dfsr.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
obj: this.item,
|
||||
ydata1: null,
|
||||
time: this.timefamt(),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('compevaluation').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.dfsr.style.height = height
|
||||
},200)
|
||||
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
var formData = {
|
||||
id: "333ff66a28acd0c68834f5a0d4ca68bd",
|
||||
searchBeginTime: this.time[0],
|
||||
searchEndTime: this.time[0],
|
||||
periodBeginTime: "",
|
||||
periodEndTime: "",
|
||||
};
|
||||
api.getQualityAssessData(formData).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
var data = res.data.syn[0];
|
||||
if (data == 3.14159) {
|
||||
this.ydata1 = 0.25;
|
||||
} else if (data == 3.1415) {
|
||||
this.ydata1 = 0.15;
|
||||
} else {
|
||||
this.ydata1 = data;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.MonitTypeEcharts();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
MonitTypeEcharts() {
|
||||
let echarts = require("echarts");
|
||||
var myChart = echarts.init(
|
||||
document.getElementById("compeva"),
|
||||
null,
|
||||
{ renderer: "svg" }
|
||||
);
|
||||
var option = {
|
||||
title: {
|
||||
// text: "综合评估",
|
||||
x: "center",
|
||||
y: "0%",
|
||||
//subtext: '综合评估',
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "16",
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "12",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
// debugger
|
||||
if (params.value >= 5) {
|
||||
return params.name + " : " + "优质";
|
||||
} else if (params.value > 4 && params.value <= 5) {
|
||||
return params.name + " : " + "良好";
|
||||
} else if (params.value > 3 && params.value <= 4) {
|
||||
return params.name + " : " + "合格";
|
||||
} else if (params.value > 2 && params.value <= 3) {
|
||||
return params.name + " : " + "较差";
|
||||
} else if (params.value <= 2 && params.value >= 1) {
|
||||
return params.name + " : " + "极差";
|
||||
} else if (params.value >= 0.25 && params.value < 1) {
|
||||
return params.name + " : " + "暂无数据";
|
||||
} else if (params.value <= 0.15 && params.value >= 0) {
|
||||
return params.name + " : " + "/";
|
||||
}
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "10px",
|
||||
right: "50px",
|
||||
bottom: "20px",
|
||||
top: "10px",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
data: ["综合评估"],
|
||||
left: "50%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
|
||||
xAxis: [
|
||||
{
|
||||
name: "指标",
|
||||
type: "category",
|
||||
data: ['稳态综合评估'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//margin: 10,
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
symbol: ["none", "arrow"],
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
width: 1
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
yAxis: {
|
||||
// name: '单位:',
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 6,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
// 这里重新定义就可以
|
||||
formatter: function (value, index) {
|
||||
var texts = [];
|
||||
if (value === 1) {
|
||||
texts.push("1级[1,2]");
|
||||
} else if (value === 2) {
|
||||
texts.push("2级(2,3]");
|
||||
} else if (value === 3) {
|
||||
texts.push("3级(3,4]");
|
||||
} else if (value === 4) {
|
||||
texts.push("4级(4,5]");
|
||||
} else if (value === 5) {
|
||||
texts.push("5级(4,5.5]");
|
||||
}
|
||||
return texts;
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
symbol: ["none", "arrow"],
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
width: 1
|
||||
},
|
||||
},
|
||||
splitLine: { //分割线配置
|
||||
show:false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "综合评估",
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value > 5) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00CC00",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value > 4 && params.value <= 5) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#99CC99",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value > 3 && params.value <= 4) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#FF9900",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value > 2 && params.value <= 3) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#996600",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value <= 2 && params.value >= 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#990000",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value <= 0.25) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ccc",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
//silent: true,
|
||||
barMaxWidth: "30",
|
||||
//barGap: '-100%', // Make series be overlap
|
||||
data: [
|
||||
{
|
||||
value: this.ydata1,
|
||||
},
|
||||
],
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: "circle",
|
||||
data: [
|
||||
{
|
||||
name: "优质",
|
||||
yAxis: 5,
|
||||
|
||||
lineStyle: {
|
||||
// cap: 'round' ,
|
||||
color: "#00CC00",
|
||||
},
|
||||
label: {
|
||||
color: "#00CC00", // 文字颜色
|
||||
padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
// alert(params)
|
||||
var tips = "";
|
||||
tips += "优质";
|
||||
////console.log(params)
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "良好",
|
||||
yAxis: 4,
|
||||
lineStyle: {
|
||||
color: "#99CC99",
|
||||
},
|
||||
label: {
|
||||
color: "#99CC99", // 文字颜色
|
||||
padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
// alert(params)
|
||||
var tips = "";
|
||||
tips += "良好";
|
||||
////console.log(params)
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "合格",
|
||||
yAxis: 3,
|
||||
lineStyle: {
|
||||
color: "#FF9900",
|
||||
},
|
||||
label: {
|
||||
color: "#FF9900", // 文字颜色
|
||||
padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
// alert(params)
|
||||
var tips = "";
|
||||
tips += "合格";
|
||||
////console.log(params)
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "较差",
|
||||
yAxis: 2,
|
||||
lineStyle: {
|
||||
color: "#996600",
|
||||
},
|
||||
label: {
|
||||
color: "#996600", // 文字颜色
|
||||
padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
// alert(params)
|
||||
var tips = "";
|
||||
tips += "较差";
|
||||
////console.log(params)
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "极差",
|
||||
yAxis: 1,
|
||||
lineStyle: {
|
||||
color: "#990000",
|
||||
},
|
||||
label: {
|
||||
color: "#990000", // 文字颜色
|
||||
padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
// alert(params)
|
||||
var tips = "";
|
||||
tips += "极差";
|
||||
////console.log(params)
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
window.echartsArr.push(myChart);
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.dfsr, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
// setInterval(function (){
|
||||
// window.onresize = function () {
|
||||
// myChart.resize();
|
||||
// }
|
||||
// },200)
|
||||
},
|
||||
},
|
||||
beforeMount() {},
|
||||
beforeDestroy() {},
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
423
src/views/componentschild/datantegritydiagram.vue
Normal file
423
src/views/componentschild/datantegritydiagram.vue
Normal file
@@ -0,0 +1,423 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="height:30px;height:20px;position:absolute;right:10px">
|
||||
<el-tag style="background:#CC0000;width:30px;height:15px;border:1px solid #CC0000;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#CC0000;font-weight:400;;float:left">  完整性<60%   </span>
|
||||
<el-tag size="mini" style="background:#FFCC33;width:30px;height:15px;border:1px solid #FFCC33;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#FFCC33;font-weight:400;float:left" >  60%≤完整性<90%   </span>
|
||||
<el-tag style="background:#339966;width:30px;height:15px;border:1px solid #339966;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#339966;font-weight:400;float:left" >  完整性≥90%</span>
|
||||
</div>
|
||||
<div ref="datazhi" id="dataintegrity" style="width: 100%"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/integraliy/integraliy";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.datazhi.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('datantegritydiagram').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.datazhi.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1:{
|
||||
statisticalType:null,
|
||||
scale:null,
|
||||
manufacturer:null,
|
||||
loadType:null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
this.getclassificationData();
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('datantegritydiagram').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.datazhi.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData1.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData1.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData1.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData1.statisticalType = this.classificationData[0];
|
||||
},
|
||||
|
||||
queryData() {
|
||||
this.formData1.searchBeginTime=this.time[0]
|
||||
this.formData1.searchEndTime=this.time[1]
|
||||
api.IntegrityIcon(this.formData1).then((res) => {
|
||||
if(res.code =='A0000'){
|
||||
let arr =[]
|
||||
let arry =[]
|
||||
//let arry =[]
|
||||
res.data.forEach(item=>{
|
||||
arr.push(item.type)
|
||||
if(item.single !==null){
|
||||
if(item.single==0 ||item.single==3.14159){
|
||||
item.single=1
|
||||
}
|
||||
arry.push(item.single)
|
||||
}
|
||||
if(item.ratio !==null){
|
||||
this.ydata1.push(item.ratio)
|
||||
}
|
||||
this.xdata = arr
|
||||
this.ydata= arry
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
this.datategrity();
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
datategrity() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("dataintegrity"));
|
||||
var option = {
|
||||
title: {
|
||||
text: this.title,
|
||||
left: "center",
|
||||
|
||||
//subtext: '单位(%)'
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips += params[0].name+'<br/>';
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value ==1 ) {
|
||||
tips += "数据完整性:暂无数据<br/>";
|
||||
} else {
|
||||
tips += "数据完整性:"+params[i].value + "<br/>";
|
||||
}
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridf,
|
||||
xAxis: [
|
||||
{
|
||||
name:yan.EchartObject.area,
|
||||
type: "category",
|
||||
data: this.xdata,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
//fontSize:10
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
name: yan.EchartObject.nuit1,
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ccc",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
//fontSize:10
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
series: [
|
||||
{
|
||||
name: this.timeValue,
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.Integrity1,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.Integrity2,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value <= 60 && params.value > 3.14159 && params.value !== 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.Integrity3,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value = 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ccc",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: "circle",
|
||||
data: [
|
||||
{
|
||||
name: "",
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.Integrity1,
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.Integrity1,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.Integrity2,
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.Integrity2,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.Integrity3,
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.Integrity3,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
data: this.ydata,
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
//由于网格布局拖拽放大缩小图表不能自适应，这里设置一个定时器使得echart加载为一个异步过程
|
||||
this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
}, 0);
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.datazhi, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
334
src/views/componentschild/dstortionratest.vue
Normal file
334
src/views/componentschild/dstortionratest.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div ref="kjff" id="qualifiedechart" style="width: 100%"></div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/integraliy/integraliy";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.kjff.style.height =
|
||||
document.getElementById("conmentId").offsetHeight - 50 + "px";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("dstortionratest").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.kjff.style.height = height;
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1: {
|
||||
statisticalType: null,
|
||||
scale: null,
|
||||
manufacturer: null,
|
||||
loadType: null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
timeFlag: 1,
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
},
|
||||
voltageleveloption: [],
|
||||
terminaloption: [],
|
||||
interfereoption: [],
|
||||
classificationData: [],
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
this.getclassificationData();
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("dstortionratest").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.kjff.style.height = height;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData1.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData1.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData1.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData1.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
this.formData1.searchBeginTime = this.time[0];
|
||||
this.formData1.searchEndTime = this.time[1];
|
||||
api.getTHDistortionCensus(this.formData1).then((res) => {
|
||||
//this.xdata = res.data.type;
|
||||
var arr = [];
|
||||
if (res.data.type.length == 0 && res.data.single.length == 0) {
|
||||
this.xdata = res.data.type;
|
||||
this.ydata1 = res.data.single;
|
||||
} else {
|
||||
this.xdata = res.data.type;
|
||||
var arr = [];
|
||||
if (res.data.single) {
|
||||
for (var j = 0; j < res.data.single.length - 1; j++) {
|
||||
for (var i = 0; i < res.data.single.length - 1 - j; i++) {
|
||||
// 判断，如果数组中的当前一个比后一个大，那么两个交换一下位置
|
||||
if (arr[i] > arr[i + 1]) {
|
||||
var tmp = arr[i];
|
||||
res.data.single[i] = arr[i + 1];
|
||||
res.data.single[i + 1] = tmp;
|
||||
}
|
||||
}
|
||||
}
|
||||
arr = res.data.single;
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (arr[i] == 0 || arr[i] == 3.14159) {
|
||||
arr[i] = arr[arr.length - 1] * 0.03;
|
||||
this.mindata = arr[arr.length - 1] * 0.03;
|
||||
}
|
||||
}
|
||||
this.ydata1 = arr;
|
||||
}
|
||||
}
|
||||
this.ydata = arr;
|
||||
this.qualifiedechart();
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
qualifiedechart() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("qualifiedechart"));
|
||||
myChartes.clear();
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let this2 = this;
|
||||
var option = {
|
||||
title: {
|
||||
text: this.title,
|
||||
left: "center",
|
||||
//subtext: '单位(%)'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips += params[0].name + "</br/>";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3) {
|
||||
tips += params[i].seriesName + ":暂无数据<br/>";
|
||||
} else {
|
||||
tips += params[i].seriesName + ":" + params[i].value + "%<br/>";
|
||||
}
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
color:[echartsColor.FigureColor[0]],
|
||||
legend: {
|
||||
data: ["总畸变率"],
|
||||
color: [echartsColor.FigureColor[0]],
|
||||
right: "20px",
|
||||
top: "-5px",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridf,
|
||||
xAxis: [
|
||||
{
|
||||
name: yan.EchartObject.area,
|
||||
type: "category",
|
||||
data: this.xdata,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: "dinproRegular",
|
||||
color: "#fff",
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
rotate: 0,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
// symbol: ["none", "arrow"],
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
name: yan.EchartObject.nuit1,
|
||||
type: "value",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: "#fff",
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
series: [
|
||||
{
|
||||
name: "总畸变率",
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
// show: true,
|
||||
// position: 'top'
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
color: function (params) {
|
||||
if (params.value == this2.mindata) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[{ offset: 1, color: "#ccc" }],
|
||||
false
|
||||
);
|
||||
} else {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[{ offset: 1, color: echartsColor.FigureColor[0] }],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
data: this.ydata,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.kjff, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
478
src/views/componentschild/f47curveianalysisi-hb.vue
Normal file
478
src/views/componentschild/f47curveianalysisi-hb.vue
Normal file
@@ -0,0 +1,478 @@
|
||||
<template>
|
||||
<div ref="f47area" id="f47" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import {getPwEventFeatureAmplitudeCurve} from "@/api/Distributionnetwork/transient/transient";
|
||||
import yan from "@/assets/commjs/color";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.f47area.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('f47curveianalysisi').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.f47area.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1:{
|
||||
startTime:'',
|
||||
id: '',
|
||||
endTime:'',
|
||||
type: 3
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
//ITIC模拟数据
|
||||
datalist: [],
|
||||
title:'',
|
||||
pointI: [],
|
||||
pointIun: [],
|
||||
pointF: [],
|
||||
pointFun: [],
|
||||
white: "#ffffff",
|
||||
top: [
|
||||
[0.001, 200],
|
||||
[0.003, 140],
|
||||
[0.003, 120],
|
||||
[0.5, 120],
|
||||
[0.5, 110],
|
||||
[10, 110],
|
||||
[1000, 110],
|
||||
],
|
||||
bot: [
|
||||
[0.02, 0],
|
||||
[0.02, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[10, 90],
|
||||
[1000, 90],
|
||||
],
|
||||
part: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80],
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('f47curveianalysisi').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.f47area.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
//公共的方法
|
||||
gongfunction() {
|
||||
var standI = 0;
|
||||
var unstandI = 0;
|
||||
var standF = 0;
|
||||
var unstandF = 0;
|
||||
var total = 0;
|
||||
total = this.datalist.length;
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (var i = 0; i < this.datalist.length; i++) {
|
||||
var point = [];
|
||||
var xx = this.datalist[i].duration / 1000;
|
||||
var yy = this.datalist[i].featureAmplitude;
|
||||
var time = this.datalist[i].startTime.replace("T", " ");
|
||||
point = [xx, yy, time];
|
||||
|
||||
if (xx <= 0.003) {
|
||||
var line = 0;
|
||||
line = 230 - 30000 * xx;
|
||||
if (yy > line) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
queryData() {
|
||||
this.formData1.startTime=this.time[0]
|
||||
this.formData1.endTime=this.time[1]
|
||||
var info = window.sessionStorage.getItem("Info");
|
||||
info = eval("(" + info + ")");
|
||||
this.formData1.id =info.deptId;
|
||||
getPwEventFeatureAmplitudeCurve(this.formData1).then((res) => {
|
||||
if(res.code =='A0000'){
|
||||
this.datalist = res.data.eventFeatureAmplitudeCurveDataList;
|
||||
this.gongfunction();
|
||||
this.title = '总统计:'+(this.pointI.length+this.pointIun.length)+'个,可容忍:'+this.pointI.length+'个,不可容忍:'+this.pointIun.length+'个'
|
||||
this.f47emis();
|
||||
}
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
f47emis() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("f47"));
|
||||
myChartes.clear();
|
||||
let option = {
|
||||
//backgroundColor: "#f9f9f9", //地图背景色深蓝
|
||||
title: {
|
||||
text: "F47曲线("+this.title+')',
|
||||
x: "center",
|
||||
y:'20px',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "50px",
|
||||
left: "10px",
|
||||
right: "40px",
|
||||
bottom: "20px",
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
// trigger: "item",
|
||||
show: true,
|
||||
formatter: function (a) {
|
||||
// console.log(a);
|
||||
let relVal = "";
|
||||
// relVal =
|
||||
// "<font style='color:" +
|
||||
// white +
|
||||
// "'>供电公司:" +
|
||||
// " " +
|
||||
// " " +
|
||||
// a.value[3] +
|
||||
// "</font><br/>";
|
||||
// relVal +=
|
||||
// "<font style='color:" +
|
||||
// white +
|
||||
// "'>变电站:" +
|
||||
// " " +
|
||||
// " " +
|
||||
// a.value[4] +
|
||||
// "</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:#000'>发生时刻:" + " " + " " +a.value[2] +"</font><br/>";
|
||||
relVal += "<font style='color:#000'>持续时间:" +" " + " " +(a.value[0]).toFixed(3) +"s</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:#000'>特征幅值:" + " " + " " + a.value[1] +"%</font>";
|
||||
return relVal;
|
||||
},
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
color: "#000",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
// backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: { show: true },
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["分割线", "可容忍事件", "不可容忍事件"],
|
||||
// selectedMode: false,
|
||||
left: "1%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
},
|
||||
},
|
||||
color: ["yellow", "green", "red"],
|
||||
xAxis: [
|
||||
{
|
||||
type: "log",
|
||||
min: "0.001",
|
||||
max: "1000",
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
name: "s",
|
||||
nameTextStyle: {
|
||||
padding: 5,
|
||||
color:"#fff"
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
// max: function (value) {
|
||||
// return value.max + 20;
|
||||
// },
|
||||
splitNumber: 10,
|
||||
minInterval: 0.1,
|
||||
name: "%",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
padding: 0,
|
||||
},
|
||||
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ["#fff",],
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "分割线",
|
||||
type: "line",
|
||||
data: this.part,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointF,
|
||||
},
|
||||
{
|
||||
name: "不可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointFun,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.f47area, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
478
src/views/componentschild/f47curveianalysisi-hi.vue
Normal file
478
src/views/componentschild/f47curveianalysisi-hi.vue
Normal file
@@ -0,0 +1,478 @@
|
||||
<template>
|
||||
<div ref="f47area" id="f47" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import {getPwEventFeatureAmplitudeCurve} from "@/api/Distributionnetwork/transient/transient";
|
||||
import yan from "@/assets/commjs/color";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.f47area.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('f47curveianalysisi').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.f47area.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1:{
|
||||
startTime:'',
|
||||
id: '',
|
||||
endTime:'',
|
||||
type: 3
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
//ITIC模拟数据
|
||||
datalist: [],
|
||||
title:'',
|
||||
pointI: [],
|
||||
pointIun: [],
|
||||
pointF: [],
|
||||
pointFun: [],
|
||||
white: "#ffffff",
|
||||
top: [
|
||||
[0.001, 200],
|
||||
[0.003, 140],
|
||||
[0.003, 120],
|
||||
[0.5, 120],
|
||||
[0.5, 110],
|
||||
[10, 110],
|
||||
[1000, 110],
|
||||
],
|
||||
bot: [
|
||||
[0.02, 0],
|
||||
[0.02, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[10, 90],
|
||||
[1000, 90],
|
||||
],
|
||||
part: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80],
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('f47curveianalysisi').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.f47area.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
//公共的方法
|
||||
gongfunction() {
|
||||
var standI = 0;
|
||||
var unstandI = 0;
|
||||
var standF = 0;
|
||||
var unstandF = 0;
|
||||
var total = 0;
|
||||
total = this.datalist.length;
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (var i = 0; i < this.datalist.length; i++) {
|
||||
var point = [];
|
||||
var xx = this.datalist[i].duration / 1000;
|
||||
var yy = this.datalist[i].featureAmplitude;
|
||||
var time = this.datalist[i].startTime.replace("T", " ");
|
||||
point = [xx, yy, time];
|
||||
|
||||
if (xx <= 0.003) {
|
||||
var line = 0;
|
||||
line = 230 - 30000 * xx;
|
||||
if (yy > line) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
queryData() {
|
||||
this.formData1.startTime=this.time[0]
|
||||
this.formData1.endTime=this.time[1]
|
||||
var info = window.sessionStorage.getItem("Info");
|
||||
info = eval("(" + info + ")");
|
||||
this.formData1.id =info.deptId;
|
||||
getPwEventFeatureAmplitudeCurve(this.formData1).then((res) => {
|
||||
if(res.code =='A0000'){
|
||||
this.datalist = res.data.eventFeatureAmplitudeCurveDataList;
|
||||
this.gongfunction();
|
||||
this.title = '总统计:'+(this.pointI.length+this.pointIun.length)+'个,可容忍:'+this.pointI.length+'个,不可容忍:'+this.pointIun.length+'个'
|
||||
this.f47emis();
|
||||
}
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
f47emis() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("f47"));
|
||||
myChartes.clear();
|
||||
let option = {
|
||||
//backgroundColor: "#f9f9f9", //地图背景色深蓝
|
||||
title: {
|
||||
text: "F47曲线("+this.title+')',
|
||||
x: "center",
|
||||
y:'20px',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "50px",
|
||||
left: "10px",
|
||||
right: "40px",
|
||||
bottom: "20px",
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
// trigger: "item",
|
||||
show: true,
|
||||
formatter: function (a) {
|
||||
// console.log(a);
|
||||
let relVal = "";
|
||||
// relVal =
|
||||
// "<font style='color:" +
|
||||
// white +
|
||||
// "'>供电公司:" +
|
||||
// " " +
|
||||
// " " +
|
||||
// a.value[3] +
|
||||
// "</font><br/>";
|
||||
// relVal +=
|
||||
// "<font style='color:" +
|
||||
// white +
|
||||
// "'>变电站:" +
|
||||
// " " +
|
||||
// " " +
|
||||
// a.value[4] +
|
||||
// "</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:#000'>发生时刻:" + " " + " " +a.value[2] +"</font><br/>";
|
||||
relVal += "<font style='color:#000'>持续时间:" +" " + " " +(a.value[0]).toFixed(3) +"s</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:#000'>特征幅值:" + " " + " " + a.value[1] +"%</font>";
|
||||
return relVal;
|
||||
},
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
color: "#000",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
// backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: { show: true },
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["分割线", "可容忍事件", "不可容忍事件"],
|
||||
// selectedMode: false,
|
||||
left: "1%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
},
|
||||
},
|
||||
color: ["yellow", "green", "red"],
|
||||
xAxis: [
|
||||
{
|
||||
type: "log",
|
||||
min: "0.001",
|
||||
max: "1000",
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
name: "s",
|
||||
nameTextStyle: {
|
||||
padding: 5,
|
||||
color:"#fff"
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
// max: function (value) {
|
||||
// return value.max + 20;
|
||||
// },
|
||||
splitNumber: 10,
|
||||
minInterval: 0.1,
|
||||
name: "%",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
padding: 0,
|
||||
},
|
||||
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ["#fff",],
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "分割线",
|
||||
type: "line",
|
||||
data: this.part,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointF,
|
||||
},
|
||||
{
|
||||
name: "不可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointFun,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.f47area, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
508
src/views/componentschild/f47curveianalysisi.vue
Normal file
508
src/views/componentschild/f47curveianalysisi.vue
Normal file
@@ -0,0 +1,508 @@
|
||||
<template>
|
||||
<div ref="f47" id="f47emis" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getVoltageToleranceCurve } from "@/api/monitoringpointStatistics/echart";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.f47.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('f47curveianalysisi').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.f47.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1:{
|
||||
statisticalType:null,
|
||||
scale:null,
|
||||
manufacturer:null,
|
||||
loadType:null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
timeFlag: 1,
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
//ITIC模拟数据
|
||||
datalist: [],
|
||||
pointI: [],
|
||||
pointIun: [],
|
||||
pointF: [],
|
||||
pointFun: [],
|
||||
white: "#ffffff",
|
||||
top: [
|
||||
[0.001, 200],
|
||||
[0.003, 140],
|
||||
[0.003, 120],
|
||||
[0.5, 120],
|
||||
[0.5, 110],
|
||||
[10, 110],
|
||||
[1000, 110],
|
||||
],
|
||||
bot: [
|
||||
[0.02, 0],
|
||||
[0.02, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[10, 90],
|
||||
[1000, 90],
|
||||
],
|
||||
part: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80],
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
this.getclassificationData();
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('f47curveianalysisi').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.f47.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData1.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData1.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData1.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData1.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
this.formData1.searchBeginTime=this.time[0]
|
||||
this.formData1.searchEndTime=this.time[1]
|
||||
getVoltageToleranceCurve(this.formData1).then((res) => {
|
||||
this.datalist = res.data.voltageToleranceCurveDataList;
|
||||
this.gongfunction();
|
||||
this.$nextTick(() => {
|
||||
this.f47emis();
|
||||
});
|
||||
});
|
||||
},
|
||||
//公共的方法
|
||||
gongfunction() {
|
||||
var standI = 0;
|
||||
var unstandI = 0;
|
||||
var standF = 0;
|
||||
var unstandF = 0;
|
||||
this.pointI = [];
|
||||
this.pointIun = [];
|
||||
this.pointF = [];
|
||||
this.pointFun = [];
|
||||
var total = 0;
|
||||
// console.log(this.datalist);
|
||||
total = this.datalist.length;
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (var i = 0; i < this.datalist.length; i++) {
|
||||
var point = [];
|
||||
var xx = this.datalist[i].persistTime;
|
||||
var yy = this.datalist[i].eventValue * 100;
|
||||
var time = this.datalist[i].time.replace("T", " ");
|
||||
var company = this.datalist[i].gdName;
|
||||
var substation = this.datalist[i].subName;
|
||||
var index = this.datalist[i].lineId;
|
||||
var eventId = this.datalist[i].eventId;
|
||||
|
||||
point = [xx, yy, time, company, substation, index, eventId];
|
||||
|
||||
if (xx <= 0.003) {
|
||||
var line = 0;
|
||||
line = 230 - 30000 * xx;
|
||||
if (yy > line) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
f47emis() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("f47emis"));
|
||||
myChartes.clear();
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
var option = {
|
||||
// backgroundColor: "#f9f9f9", //地图背景色深蓝
|
||||
title: {
|
||||
// text: "F47曲线",
|
||||
x: "center",
|
||||
textStyle: {
|
||||
fontSize: yan.EchartObject.titleNamefontSize1,
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridp,
|
||||
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
show: true,
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0,
|
||||
formatter: function (a) {
|
||||
let relVal = "";
|
||||
relVal =
|
||||
"<font style='color:" +
|
||||
"'>供电公司:" +
|
||||
" " +
|
||||
" " +
|
||||
a.value[3] +
|
||||
"</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
"'>变电站:" +
|
||||
" " +
|
||||
" " +
|
||||
a.value[4] +
|
||||
"</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
"'>发生时刻:" +
|
||||
" " +
|
||||
" " +
|
||||
a.value[2] +
|
||||
"</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
"'>持续时间:" +
|
||||
" " +
|
||||
" " +
|
||||
a.value[0].toFixed(3) +
|
||||
"s</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
"'>特征幅值:" +
|
||||
" " +
|
||||
" " +
|
||||
a.value[1].toFixed(3) +
|
||||
"%</font>";
|
||||
return relVal;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["分割线", "可容忍事件", "不可容忍事件"],
|
||||
// selectedMode: false,
|
||||
right: "10px",
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
color: ["yellow", "green", "red"],
|
||||
xAxis: [
|
||||
{
|
||||
type: "log",
|
||||
min: "0.001",
|
||||
max: "1000",
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
name: "s",
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: '#fff',
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
},
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitNumber: 10,
|
||||
minInterval: 3,
|
||||
name: yan.EchartObject.nuit1,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: yan.EchartObject.yNamefontSize,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "分割线",
|
||||
type: "line",
|
||||
data: this.part,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointF,
|
||||
},
|
||||
{
|
||||
name: "不可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointFun,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.f47, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
328
src/views/componentschild/harmonicfz.vue
Normal file
328
src/views/componentschild/harmonicfz.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<div
|
||||
ref="cspevoltag"
|
||||
id="electriccurrent"
|
||||
style="width: 100%;"
|
||||
></div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/harmonic/onlineData";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.cspevoltag.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('harmonicfz').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 60 +'px'
|
||||
this.$refs.cspevoltag.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
//电压含有率
|
||||
harmInHarmValue: [],
|
||||
harmInOverLimit: [],
|
||||
//电流幅值
|
||||
yData1: [],
|
||||
yData2: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
var data = window.sessionStorage.getItem("Info");
|
||||
data = eval("(" + data + ")");
|
||||
this.deptIndex = data.deptId;
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('harmonicfz').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 60 +'px'
|
||||
this.$refs.cspevoltag.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
var formData = {
|
||||
id: "333ff66a28acd0c68834f5a0d4ca68bd",
|
||||
harmState: 1,
|
||||
searchBeginTime: this.time[0],
|
||||
searchEndTime: this.time[1],
|
||||
};
|
||||
api.getHarmInHarmData(formData).then((res) => {
|
||||
this.harmInHarmValue = res.data.harmInHarmValue;
|
||||
this.harmInOverLimit = res.data.harmInOverLimit;
|
||||
this.electriccurrent();
|
||||
});
|
||||
},
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
electriccurrent() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("electriccurrent"));
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
// backgroundColor: "#fff",
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
// type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
// },
|
||||
// formatter: function (params) {
|
||||
// var tips = "";
|
||||
// tips += params[0].name + '</br/>';
|
||||
// for (var i = 0; i < params.length; i++) {
|
||||
// tips += params[i].seriesName + ":" + params[i].value + "<br/>";
|
||||
// }
|
||||
// return tips;
|
||||
// }
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
},
|
||||
grid:yan.EchartObject.gridt,
|
||||
legend: {
|
||||
data: ["国标限值", "电流幅值"],
|
||||
right: "10px",
|
||||
top: "-5px",
|
||||
//icon:'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
//itemWidth: 10,
|
||||
//itemHeight: 10,
|
||||
},
|
||||
xAxis: {
|
||||
name:yan.EchartObject.number,
|
||||
type: "category",
|
||||
data: [
|
||||
"2次",
|
||||
"3次",
|
||||
"4次",
|
||||
"5次",
|
||||
"6次",
|
||||
"7次",
|
||||
"8次",
|
||||
"9次",
|
||||
"10次",
|
||||
"11次",
|
||||
"12次",
|
||||
"13次",
|
||||
"14次",
|
||||
"15次",
|
||||
"16次",
|
||||
"17次",
|
||||
"18次",
|
||||
"19次",
|
||||
"20次",
|
||||
"21次",
|
||||
"22次",
|
||||
"23次",
|
||||
"24次",
|
||||
"25次",
|
||||
"26次",
|
||||
"27次",
|
||||
"28次",
|
||||
"29次",
|
||||
"30次",
|
||||
"31次",
|
||||
"32次",
|
||||
"33次",
|
||||
"34次",
|
||||
"35次",
|
||||
"36次",
|
||||
"37次",
|
||||
"38次",
|
||||
"39次",
|
||||
"40次",
|
||||
"41次",
|
||||
"42次",
|
||||
"43次",
|
||||
"44次",
|
||||
"45次",
|
||||
"46次",
|
||||
"47次",
|
||||
"48次",
|
||||
"49次",
|
||||
"50次",
|
||||
],
|
||||
axisLine: {
|
||||
show: true,
|
||||
// symbol:['none', 'arrow'],
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
//fontSize:10
|
||||
},
|
||||
rotate: 0,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
type: "value",
|
||||
// max: '100',
|
||||
name: yan.EchartObject.dwa,
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
left: "0%",
|
||||
},
|
||||
position: "left",
|
||||
axisLine: {
|
||||
show: true,
|
||||
//symbol:['none', 'arrow'],
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#f1f1f1",
|
||||
type:yan.EchartObject.type
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "国标限值",
|
||||
type: "bar",
|
||||
barMaxWidth: yan.EchartObject.hbarMaxWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#00CC99",
|
||||
barBorderRadius: [5, 5, 0, 0],
|
||||
},
|
||||
},
|
||||
data: this.harmInOverLimit,
|
||||
},
|
||||
{
|
||||
name: "电流幅值",
|
||||
type: "bar",
|
||||
barMaxWidth: yan.EchartObject.hbarMaxWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#FF9900",
|
||||
barBorderRadius: [12, 12, 0, 0],
|
||||
},
|
||||
},
|
||||
data: this.harmInHarmValue,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.cspevoltag, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
299
src/views/componentschild/harmonicspectrum.vue
Normal file
299
src/views/componentschild/harmonicspectrum.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<div ref="cspevoltagf" id="cspevoltage" style="width: 100%;"
|
||||
></div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from '@/api/harmonic/onlineData'
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.cspevoltagf.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('harmonicspectrum').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 60 +'px'
|
||||
this.$refs.cspevoltagf.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
//电压含有率
|
||||
harmInHarmValue: [],
|
||||
harmInOverLimit: [],
|
||||
//电流幅值
|
||||
yData1: [],
|
||||
yData2: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
var data = window.sessionStorage.getItem("Info");
|
||||
data = eval("(" + data + ")");
|
||||
this.deptIndex = data.deptId;
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('harmonicspectrum').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 60 +'px'
|
||||
this.$refs.cspevoltagf.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
var formData = {
|
||||
id: "333ff66a28acd0c68834f5a0d4ca68bd",
|
||||
harmState: 0,
|
||||
searchBeginTime: this.time[0],
|
||||
searchEndTime: this.time[1],
|
||||
};
|
||||
api.getHarmInHarmData(formData).then((res) => {
|
||||
this.harmInHarmValue = res.data.harmInHarmValue
|
||||
this.harmInOverLimit = res.data.harmInOverLimit
|
||||
this.cspevoltage();
|
||||
});
|
||||
},
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
cspevoltage() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("cspevoltage"));
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
//backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
},
|
||||
grid:yan.EchartObject.gridt,
|
||||
legend: {
|
||||
data: ["国标限值", "电压含有率"],
|
||||
right: "10px",
|
||||
top: '-5px',
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
name:yan.EchartObject.number,
|
||||
type: "category",
|
||||
data: [
|
||||
"2次",
|
||||
"3次",
|
||||
"4次",
|
||||
"5次",
|
||||
"6次",
|
||||
"7次",
|
||||
"8次",
|
||||
"9次",
|
||||
"10次",
|
||||
"11次",
|
||||
"12次",
|
||||
"13次",
|
||||
"14次",
|
||||
"15次",
|
||||
"16次",
|
||||
"17次",
|
||||
"18次",
|
||||
"19次",
|
||||
"20次",
|
||||
"21次",
|
||||
"22次",
|
||||
"23次",
|
||||
"24次",
|
||||
"25次",
|
||||
"26次",
|
||||
"27次",
|
||||
"28次",
|
||||
"29次",
|
||||
"30次",
|
||||
"31次",
|
||||
"32次",
|
||||
"33次",
|
||||
"34次",
|
||||
"35次",
|
||||
"36次",
|
||||
"37次",
|
||||
"38次",
|
||||
"39次",
|
||||
"40次",
|
||||
"41次",
|
||||
"42次",
|
||||
"43次",
|
||||
"44次",
|
||||
"45次",
|
||||
"46次",
|
||||
"47次",
|
||||
"48次",
|
||||
"49次",
|
||||
"50次",
|
||||
],
|
||||
axisLine: {
|
||||
show: true,
|
||||
// symbol:['none', 'arrow'],
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
//max: '100',
|
||||
name: yan.EchartObject.nuit1,
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
left: "0%",
|
||||
},
|
||||
position: "left",
|
||||
axisLine: {
|
||||
show: true,
|
||||
// symbol:['none', 'arrow'],
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#f1f1f1",
|
||||
type:yan.EchartObject.type,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
fontSize: yan.EchartObject.xNamefontSize
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "国标限值",
|
||||
type: "bar",
|
||||
barMaxWidth:yan.EchartObject.barMaxWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#00CC99",
|
||||
barBorderRadius: [5, 5, 0, 0],
|
||||
},
|
||||
},
|
||||
data: this.harmInOverLimit,
|
||||
},
|
||||
{
|
||||
name: "电压含有率",
|
||||
type: "bar",
|
||||
barMaxWidth:yan.EchartObject.barMaxWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#FF9900",
|
||||
barBorderRadius: [12, 12, 0, 0],
|
||||
},
|
||||
},
|
||||
data: this.harmInHarmValue,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.cspevoltagf, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
216
src/views/componentschild/harmonictable.vue
Normal file
216
src/views/componentschild/harmonictable.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div style="padding: 0px">
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
stripe
|
||||
:data="tableData"
|
||||
border
|
||||
class="xshou mt10"
|
||||
highlight-current-row
|
||||
header-cell-class-name="table_header"
|
||||
:header-cell-style="{
|
||||
height: '25px',
|
||||
padding: '0px',
|
||||
}"
|
||||
:row-style="{ height: '28px' }"
|
||||
:cell-style="{ padding: '0px' }"
|
||||
:height="vh"
|
||||
:style="'width: 100%'"
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="name"
|
||||
label="名称"
|
||||
min-width="60"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
sortable
|
||||
prop="onlineCount"
|
||||
label="在线监测点数（个）"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.onlineCount == -1">暂无数据</span>
|
||||
<span
|
||||
v-if="
|
||||
scope.row.onlineCount !== -1 &&
|
||||
scope.row.onlineCount !== 0
|
||||
"
|
||||
>{{ scope.row.onlineCount }}</span
|
||||
>
|
||||
<span v-if="scope.row.onlineCount == 0">/</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
sortable
|
||||
prop="overLineCount"
|
||||
label="超标监测点数（个）"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.overLineCount == -1">暂无数据</span>
|
||||
<span
|
||||
v-if="
|
||||
scope.row.overLineCount !== -1 &&
|
||||
scope.row.overLineCount !== 0
|
||||
"
|
||||
>{{ scope.row.overLineCount }}</span
|
||||
>
|
||||
<span v-if="scope.row.overLineCount == 0">/</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
sortable
|
||||
prop="averageOverDay"
|
||||
label="平均超标天数（天）"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.averageOverDay == -1">暂无数据</span>
|
||||
<span
|
||||
v-if="
|
||||
scope.row.averageOverDay !== -1 &&
|
||||
scope.row.averageOverDay !== 0
|
||||
"
|
||||
>{{ scope.row.averageOverDay }}</span
|
||||
>
|
||||
<span v-if="scope.row.averageOverDay == 0">/</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
sortable
|
||||
prop="ratio"
|
||||
label="监测点超标占比(%)"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.ratio == -1">暂无数据</span>
|
||||
<span
|
||||
v-if="scope.row.ratio !== -1 && scope.row.ratio !== 0"
|
||||
>{{ scope.row.ratio }}</span
|
||||
>
|
||||
<span v-if="scope.row.ratio == 0">/</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/harmonic/harmonic";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.vh = document.getElementById("conmentId").offsetHeight-50;
|
||||
this.queryData();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("harmonictable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
this.queryData();
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
vh: null,
|
||||
h: 0,
|
||||
tableData:[],
|
||||
classificationData: [],
|
||||
distributionData: [],
|
||||
time: this.timefamt(),
|
||||
formData: {
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
id: "",
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: [],
|
||||
},
|
||||
// classificationData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("harmonictable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
queryData() {
|
||||
this.formData.searchBeginTime = this.time[0],
|
||||
this.formData.searchEndTime = this.time[1]
|
||||
api.deptInfolins(this.formData).then((res) => {
|
||||
if (res.code === "A0000") {
|
||||
this.tableData = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
425
src/views/componentschild/harmonictu.vue
Normal file
425
src/views/componentschild/harmonictu.vue
Normal file
@@ -0,0 +1,425 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="height:30px;height:20px;position:absolute;right:10px">
|
||||
<el-tag style="background:#339966 ;width:30px;height:15px;border:1px solid #339966;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#339966;font-weight:400;;float:left">  超标占比<60%   </span>
|
||||
<el-tag size="mini" style="background:#FFCC33;width:30px;height:15px;border:1px solid #FFCC33;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#FFCC33;font-weight:400;float:left" >  60%≤超标占比<90%   </span>
|
||||
<el-tag style="background:#CC0000;width:30px;height:15px;border:1px solid #CC0000;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#CC0000;font-weight:400;float:left" >  超标占比≥90%</span>
|
||||
</div>
|
||||
<div
|
||||
ref="qyxxb"
|
||||
id="xbcbtjechart"
|
||||
style="width: 100%;"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/harmonic/harmonic";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.qyxxb.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('harmonictu').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.qyxxb.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData:{
|
||||
statisticalType:null,
|
||||
id:'',
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
this.getclassificationData();
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('harmonictu').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.qyxxb.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, ["PLPC","DYPC", "SXDYBPHD","CSSB","FXDL","JXBDY",
|
||||
]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
queryData() {
|
||||
this.formData.searchBeginTime=this.time[0]
|
||||
this.formData.searchEndTime=this.time[1]
|
||||
api.deptSubstationRelations(this.formData).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
var xarr = [];
|
||||
var yarr = [];
|
||||
res.data.forEach((element) => {
|
||||
xarr.push(element.name);
|
||||
yarr.push(element.data);
|
||||
});
|
||||
this.xdata = xarr;
|
||||
for (var i = 0; i < yarr.length; i++) {
|
||||
if (yarr[i] == -1 ||yarr[i] == 0) {
|
||||
yarr[i] = 1;
|
||||
}
|
||||
}
|
||||
this.ydata = yarr;
|
||||
// this.$nextTick(() => {
|
||||
this.cbtjechart();
|
||||
// })
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
cbtjechart() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("xbcbtjechart"));
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
title: {
|
||||
textStyle: {
|
||||
font: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips +=params[0].name +"<br/>";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value ==1) {
|
||||
tips += "超标占比:暂无数据<br/>";
|
||||
} else {
|
||||
tips += "超标占比:" + params[i].value + "<br/>";
|
||||
}
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridf,
|
||||
xAxis: [
|
||||
{
|
||||
name:yan.EchartObject.area,
|
||||
type: "category",
|
||||
data: this.xdata,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
},
|
||||
rotate: 0,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
name: yan.EchartObject.nuit1,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
|
||||
fontSize: 12,
|
||||
},
|
||||
min: 0,
|
||||
max: 100,
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// formatter: "{value}", //右侧Y轴文字显示
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
dataZoom:yan.EchartObject.dataZoom ,
|
||||
series: [
|
||||
{
|
||||
name: "占比",
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90 && params.value !== 1.33333) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.Integrity3,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.Integrity2,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value !== 1 && params.value <= 60) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.Integrity1,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value ==1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#999999",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: "circle",
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
},
|
||||
emphasis: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: "",
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.Integrity3,
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.Integrity3,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.Integrity2,
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.Integrity2,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.Integrity1,
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.Integrity1,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
data: this.ydata,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 200);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.qyxxb, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
478
src/views/componentschild/iticcurveianalysisi-h.vue
Normal file
478
src/views/componentschild/iticcurveianalysisi-h.vue
Normal file
@@ -0,0 +1,478 @@
|
||||
<template>
|
||||
<div ref="tic" id="itic" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import {getPwEventFeatureAmplitudeCurve} from "@/api/Distributionnetwork/transient/transient";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.tic.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('iticcurveianalysisi').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.tic.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1:{
|
||||
statisticalType:null,
|
||||
scale:null,
|
||||
manufacturer:null,
|
||||
loadType:null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
timeFlag: 1,
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
//ITIC模拟数据
|
||||
datalist: [],
|
||||
pointI: [],
|
||||
pointIun: [],
|
||||
pointF: [],
|
||||
pointFun: [],
|
||||
white: "#ffffff",
|
||||
top: [
|
||||
[0.001, 200],
|
||||
[0.003, 140],
|
||||
[0.003, 120],
|
||||
[0.5, 120],
|
||||
[0.5, 110],
|
||||
[10, 110],
|
||||
[1000, 110],
|
||||
],
|
||||
bot: [
|
||||
[0.02, 0],
|
||||
[0.02, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[10, 90],
|
||||
[1000, 90],
|
||||
],
|
||||
part: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80],
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
this.getclassificationData();
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('iticcurveianalysisi').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.tic.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData1.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData1.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData1.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData1.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
this.formData1.searchBeginTime=this.time[0]
|
||||
this.formData1.searchEndTime=this.time[1]
|
||||
getPwEventFeatureAmplitudeCurve(this.formData1).then((res) => {
|
||||
this.datalist = res.data.voltageToleranceCurveDataList;
|
||||
this.gongfunction();
|
||||
this.$nextTick(() => {
|
||||
this.itic();
|
||||
});
|
||||
});
|
||||
},
|
||||
//公共的方法
|
||||
gongfunction() {
|
||||
var standI = 0;
|
||||
var unstandI = 0;
|
||||
var standF = 0;
|
||||
var unstandF = 0;
|
||||
var total = 0;
|
||||
total = this.datalist.length;
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (var i = 0; i < this.datalist.length; i++) {
|
||||
var point = [];
|
||||
var xx = this.datalist[i].persistTime;
|
||||
var yy = (this.datalist[i].eventValue*100).toFixed(2);
|
||||
var time = this.datalist[i].time;
|
||||
// var index = this.datalist[i].eventDetailIndex;
|
||||
point = [xx, yy, time];
|
||||
|
||||
if (xx <= 0.003) {
|
||||
var line = 0;
|
||||
line = 250 - 30000 * xx;
|
||||
if (yy > line) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$emit("dataList", {
|
||||
name: "事件个数",
|
||||
gs: this.datalist.length,
|
||||
krr: this.pointI.length,
|
||||
bkrr: this.pointIun.length,
|
||||
});
|
||||
},
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
itic() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("itic"));
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
// backgroundColor: "#FFF", //背景色,
|
||||
title: {
|
||||
// text: "ITIC曲线",
|
||||
x: "center",
|
||||
},
|
||||
grid: yan.EchartObject.gridp,
|
||||
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (a) {
|
||||
var relVal = "";
|
||||
relVal =
|
||||
"<font style='color:#000'>发生时间:" +
|
||||
a.value[2] +
|
||||
"</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:#000'>持续时间:" +
|
||||
a.value[0] +
|
||||
"s</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:#000'>特征幅值:" + a.value[1] + "%</font>";
|
||||
return relVal;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["上限", "下限", "可容忍事件", "不可容忍事件"],
|
||||
// selectedMode: false,
|
||||
right: "10px",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
color: ["#FF8C00", "#00BFFF", "green", "red"],
|
||||
xAxis: [
|
||||
{
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
left: "0%",
|
||||
},
|
||||
type: "log",
|
||||
min: "0.001",
|
||||
max: "1000",
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
name: "s",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
left: "0%",
|
||||
},
|
||||
type: "value",
|
||||
splitNumber: 10,
|
||||
minInterval: 3,
|
||||
name: yan.EchartObject.nuit1 ,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "上限",
|
||||
type: "line",
|
||||
data: this.top,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "下限",
|
||||
type: "line",
|
||||
data: this.bot,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointI,
|
||||
},
|
||||
{
|
||||
name: "不可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointIun,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.tic, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
490
src/views/componentschild/iticcurveianalysisi.vue
Normal file
490
src/views/componentschild/iticcurveianalysisi.vue
Normal file
@@ -0,0 +1,490 @@
|
||||
<template>
|
||||
<div ref="tic" id="itic" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getVoltageToleranceCurve } from "@/api/monitoringpointStatistics/echart";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.tic.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('iticcurveianalysisi').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.tic.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1:{
|
||||
statisticalType:null,
|
||||
scale:null,
|
||||
manufacturer:null,
|
||||
loadType:null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
timeFlag: 1,
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
//ITIC模拟数据
|
||||
datalist: [],
|
||||
pointI: [],
|
||||
pointIun: [],
|
||||
pointF: [],
|
||||
pointFun: [],
|
||||
white: "#ffffff",
|
||||
top: [
|
||||
[0.001, 200],
|
||||
[0.003, 140],
|
||||
[0.003, 120],
|
||||
[0.5, 120],
|
||||
[0.5, 110],
|
||||
[10, 110],
|
||||
[1000, 110],
|
||||
],
|
||||
bot: [
|
||||
[0.02, 0],
|
||||
[0.02, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[10, 90],
|
||||
[1000, 90],
|
||||
],
|
||||
part: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80],
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
this.getclassificationData();
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('iticcurveianalysisi').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.tic.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData1.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData1.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData1.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData1.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
this.formData1.searchBeginTime=this.time[0]
|
||||
this.formData1.searchEndTime=this.time[1]
|
||||
getVoltageToleranceCurve(this.formData1).then((res) => {
|
||||
this.datalist = res.data.voltageToleranceCurveDataList;
|
||||
this.gongfunction();
|
||||
this.$nextTick(() => {
|
||||
this.itic();
|
||||
});
|
||||
});
|
||||
},
|
||||
//公共的方法
|
||||
gongfunction() {
|
||||
var standI = 0;
|
||||
var unstandI = 0;
|
||||
var standF = 0;
|
||||
var unstandF = 0;
|
||||
var total = 0;
|
||||
total = this.datalist.length;
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (var i = 0; i < this.datalist.length; i++) {
|
||||
var point = [];
|
||||
var xx = this.datalist[i].persistTime;
|
||||
var yy = (this.datalist[i].eventValue*100).toFixed(2);
|
||||
var time = this.datalist[i].time;
|
||||
// var index = this.datalist[i].eventDetailIndex;
|
||||
point = [xx, yy, time];
|
||||
|
||||
if (xx <= 0.003) {
|
||||
var line = 0;
|
||||
line = 250 - 30000 * xx;
|
||||
if (yy > line) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$emit("dataList", {
|
||||
name: "事件个数",
|
||||
gs: this.datalist.length,
|
||||
krr: this.pointI.length,
|
||||
bkrr: this.pointIun.length,
|
||||
});
|
||||
},
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
itic() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("itic"));
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
// backgroundColor: "#FFF", //背景色,
|
||||
title: {
|
||||
// text: "ITIC曲线",
|
||||
x: "center",
|
||||
},
|
||||
grid: yan.EchartObject.gridp,
|
||||
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (a) {
|
||||
var relVal = "";
|
||||
relVal =
|
||||
"<font style='color:#fff'>发生时间:" +
|
||||
a.value[2] +
|
||||
"</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:#fff'>持续时间:" +
|
||||
a.value[0] +
|
||||
"s</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:#fff'>特征幅值:" + a.value[1] + "%</font>";
|
||||
return relVal;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["上限", "下限", "可容忍事件", "不可容忍事件"],
|
||||
// selectedMode: false,
|
||||
right: "10px",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
color: ["#FF8C00", "#00BFFF", "green", "red"],
|
||||
xAxis: [
|
||||
{
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
left: "0%",
|
||||
},
|
||||
type: "log",
|
||||
min: "0.001",
|
||||
max: "1000",
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
name: "s",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
left: "0%",
|
||||
},
|
||||
type: "value",
|
||||
splitNumber: 10,
|
||||
minInterval: 3,
|
||||
name: yan.EchartObject.nuit1 ,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "上限",
|
||||
type: "line",
|
||||
data: this.top,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "下限",
|
||||
type: "line",
|
||||
data: this.bot,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointI,
|
||||
},
|
||||
{
|
||||
name: "不可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointIun,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.tic, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
533
src/views/componentschild/onliedataity.vue
Normal file
533
src/views/componentschild/onliedataity.vue
Normal file
@@ -0,0 +1,533 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="height:30px;height:20px;position:absolute;right:10px">
|
||||
<el-tag style="background:#CC0000;width:30px;height:15px;border:1px solid #CC0000;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#CC0000;font-weight:400;;float:left">  在线率<60%   </span>
|
||||
<el-tag size="mini" style="background:#FFCC33;width:30px;height:15px;border:1px solid #FFCC33;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#FFCC33;font-weight:400;float:left" >  60%≤在线率<90%   </span>
|
||||
<el-tag style="background:#339966;width:30px;height:15px;border:1px solid #339966;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#339966;font-weight:400;float:left" >  在线率≥90%</span>
|
||||
</div>
|
||||
<div ref="datainter" id="onliedata" style="width: 100%;"></div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/integraliy/integraliy";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.datainter.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a == 16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('onliedataity').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.datainter.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
time: this.timefamt(),
|
||||
formData1:{
|
||||
statisticalType:null,
|
||||
scale:null,
|
||||
manufacturer:null,
|
||||
loadType:null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
xdata:[],ydata1:[],ydata2:[],ydata3:[],ydata4:[],
|
||||
ydata1: [23],
|
||||
ydata2: [68],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
this.getclassificationData();
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('onliedataity').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.datainter.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData1.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData1.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData1.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData1.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
async queryData() {
|
||||
this.formData1.searchBeginTime = this.time[0]
|
||||
this.formData1.searchEndTime=this.time[1]
|
||||
await api.getTerminalDataCensus(this.formData1).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
var data = res.data;
|
||||
var single = [];
|
||||
if (data.single !== null) {
|
||||
for (var i = 0; i < data.single.length; i++) {
|
||||
if (data.single[i] == 3.14159) {
|
||||
data.single[i] = 0.5;
|
||||
}
|
||||
single.push(data.single[i].toFixed(2));
|
||||
}
|
||||
this.xdata = res.data.type;
|
||||
this.ydata1 = res.data.runFlag;
|
||||
this.ydata2 = res.data.reaFlag;
|
||||
this.ydata3 = res.data.stopFlag;
|
||||
this.ydata4 = single;
|
||||
this.$nextTick(() => {
|
||||
this.onliedata();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
},
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
onliedata() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("onliedata"));
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips +=
|
||||
"<span style:font-weight: bold;>" +
|
||||
params[0].name +
|
||||
"</span></br/>";
|
||||
tips += params[0].seriesName + ":" + params[0].value + "<br/>";
|
||||
tips += params[1].seriesName + ":" + params[1].value + "<br/>";
|
||||
tips += params[2].seriesName + ":" + params[2].value + "<br/>";
|
||||
if (params[3].value == 0.5) {
|
||||
tips += params[3].seriesName + ":暂无数据<br/>";
|
||||
} else {
|
||||
tips += params[3].seriesName + ":" + params[3].value + "<br/>";
|
||||
}
|
||||
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gride,
|
||||
legend: {
|
||||
data: ["投运", "热备用", "停运"],
|
||||
left: "45px",
|
||||
top: "-3px",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
itemWidth: 30,
|
||||
itemHeight: 15,
|
||||
itemGap: 25,
|
||||
},
|
||||
xAxis: {
|
||||
name: yan.EchartObject.area,
|
||||
type: "category",
|
||||
// data: ['江苏省', '江西省', '安徽省', '湖北省', '浙江省', '湖南省', '广东省', '福建省', '海南省', '四川省', '青海省', '河北省'],
|
||||
data: this.xdata,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
//fontSize:10
|
||||
},
|
||||
rotate: 0,
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: false,
|
||||
},
|
||||
},
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: yan.EchartObject.dwt,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
// max:50,
|
||||
// interval: 2,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
//fontSize:10
|
||||
},
|
||||
rotate: 0,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: yan.EchartObject.nuit1,
|
||||
max: 100,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
position: "right",
|
||||
//offset: 110,
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
// symbol: ["none", "arrow"],
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
formatter: "{value}", //右侧Y轴文字显示
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
dataZoom:yan.EchartObject.dataZoom,
|
||||
series: [
|
||||
{
|
||||
name: "投运",
|
||||
type: "bar",
|
||||
stack: "false",
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#0099CC",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#0099CC",
|
||||
},
|
||||
]),
|
||||
barBorderRadius: 0,
|
||||
},
|
||||
},
|
||||
// data: [0, 1, 8, 5, 7, 6,1, 4, 7, 7,3,2]
|
||||
data: this.ydata1,
|
||||
},
|
||||
{
|
||||
name: "热备用",
|
||||
type: "bar",
|
||||
stack: "false",
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#996600",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#996600",
|
||||
},
|
||||
]),
|
||||
barBorderRadius: 0,
|
||||
},
|
||||
},
|
||||
//data: [2, 1, 8, 5, 7, 6, 1, 4, 7, 7,3,2]
|
||||
data: this.ydata2,
|
||||
},
|
||||
{
|
||||
name: "停运",
|
||||
type: "bar",
|
||||
stack: "false",
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#cc0000",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#cc0000",
|
||||
},
|
||||
]),
|
||||
barBorderRadius: 0,
|
||||
},
|
||||
},
|
||||
// data: [2, 5, 8, 5, 7, 6, 2, 4, 7, 7,3,2]
|
||||
data: this.ydata3,
|
||||
},
|
||||
{
|
||||
name: "在线率",
|
||||
type: "bar",
|
||||
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
||||
smooth: false, //平滑曲线显示
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
symbol: "circle", //标记的图形为实心圆
|
||||
symbolSize: 8, //标记的大小
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.onLienRate1,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.onLienRate2,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value > 0.5 && params.value <= 60) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color:yan.ColorObject.onLienRate3,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value > 0 && params.value <= 0.5) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ccc",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
color: "#ffa43a",
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: "circle",
|
||||
data: [
|
||||
{
|
||||
name: "",
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.qualifiedRate1
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color:yan.ColorObject.qualifiedRate1
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.qualifiedRate2
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.qualifiedRate2
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.qualifiedRate3
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.qualifiedRate3
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
//data: [22.6, 75.9, 39.0, 66.4, 28.7, 90.7, 95.6, 82.2, 78.7, 58.8, 86.0, 72.3]
|
||||
data: this.ydata4,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.datainter, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
387
src/views/componentschild/onlinerate.vue
Normal file
387
src/views/componentschild/onlinerate.vue
Normal file
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="height:30px;height:20px;position:absolute;right:10px">
|
||||
<el-tag style="background:#CC0000;width:30px;height:15px;border:1px solid #CC0000;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#CC0000;font-weight:400;;float:left">  在线率<60%   </span>
|
||||
<el-tag size="mini" style="background:#FFCC33;width:30px;height:15px;border:1px solid #FFCC33;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#FFCC33;font-weight:400;float:left" >  60%≤在线率<90%   </span>
|
||||
<el-tag style="background:#339966;width:30px;height:15px;border:1px solid #339966;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#339966;font-weight:400;float:left" >  在线率≥90%</span>
|
||||
</div>
|
||||
<div ref="zxl" id="onlinerateff" style="width: 100%;"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import {
|
||||
getComFlagInfoData,
|
||||
getRunOnlineRateData,
|
||||
} from "@/api/monitoringpointStatistics/echart";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.zxl.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('onlinerate').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.zxl.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
onlineReate: [],
|
||||
timeFlag: 0,
|
||||
//run模拟数据
|
||||
ydata: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
var data = window.sessionStorage.getItem("Info");
|
||||
data = eval("(" + data + ")");
|
||||
this.deptIndex = data.deptId;
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('onlinerate').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.zxl.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
var formData = {
|
||||
id: "b7f94884e69deb54a26414dcb015b88d",
|
||||
periodBeginTime: "",
|
||||
periodEndTime: "",
|
||||
timeFlag: 1,
|
||||
searchBeginTime: this.time[0],
|
||||
searchEndTime: this.time[1],
|
||||
};
|
||||
getRunOnlineRateData(formData).then((res) => {
|
||||
this.onlineReate = res.data;
|
||||
this.$nextTick(() => {
|
||||
this.onlinerate();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var today2 = year + "-01-01";
|
||||
var today = year + "-" + month + "-" + day;
|
||||
arr.push(today2);
|
||||
arr.push(today);
|
||||
return arr;
|
||||
},
|
||||
onlinerate() {
|
||||
var months = new Array();
|
||||
var handle = new Array();
|
||||
var year = this.onlineReate[0].year;
|
||||
for (var i = 0; i < this.onlineReate.length; i++) {
|
||||
if (this.timeFlag == 0) {
|
||||
months[i] = this.onlineReate[i].month;
|
||||
} else {
|
||||
months[i] = this.onlineReate[i].month + "-" + this.onlineReate[i].day;
|
||||
}
|
||||
handle.push(this.onlineReate[i].onlineRate);
|
||||
}
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("onlinerateff"));
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
myChartes.clear();
|
||||
|
||||
var option = {
|
||||
// backgroundColor: canvasBG,//背景色,
|
||||
title: {
|
||||
//text: "在线率统计",
|
||||
x: "center",
|
||||
textStyle: {
|
||||
fontWeight: "normal",
|
||||
fontSize: yan.EchartObject.titleNamefontSize1,
|
||||
},
|
||||
},
|
||||
// legend: {
|
||||
// data: ["在线率"],
|
||||
// left: "5%",
|
||||
// },
|
||||
grid: yan.EchartObject.gridf,
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips += "时间:" + year + "-" + params[0].name + "</br/>";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.14159) {
|
||||
tips += params[i].seriesName + ":暂无数据<br/>";
|
||||
} else {
|
||||
tips += params[i].seriesName + ":" + params[i].value + "%<br/>";
|
||||
}
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: months,
|
||||
name: "时间",
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
symbol: ["none", "arrow"],
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: '#fff',
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
min: 0,
|
||||
max: 100,
|
||||
type: "value",
|
||||
name: yan.EchartObject.nuit1,
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
symbol: ["none", "arrow"],
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
splitLine: {
|
||||
show:false,
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
|
||||
color: [echartsColor.thread],
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "在线率",
|
||||
type: "bar",
|
||||
data: handle,
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[{ offset: 1, color: yan.ColorObject.Integrity1 }],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[{ offset: 1, color: yan.ColorObject.Integrity2 }],
|
||||
false
|
||||
);
|
||||
} else if (
|
||||
params.value <= 60 &&
|
||||
params.value !== 3.14159 &&
|
||||
params.value !== 1
|
||||
) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[{ offset: 1, color: yan.ColorObject.Integrity3 }],
|
||||
false
|
||||
);
|
||||
} else if (params.value == 3.14159 || params.value == 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[{ offset: 1, color: "#ccc" }],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: "circle",
|
||||
data: [
|
||||
{
|
||||
// name: "在线率≥90%",
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.Integrity1,
|
||||
},
|
||||
label: {
|
||||
position: "end",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.Integrity1,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
// name: "60%≤在线率<90%",
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.Integrity2,
|
||||
},
|
||||
label: {
|
||||
position: "end",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.Integrity2,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
// name: "在线率<60%",
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.Integrity3,
|
||||
},
|
||||
label: {
|
||||
position: "end",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.Integrity3,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.zxl, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
244
src/views/componentschild/operationanalysis.vue
Normal file
244
src/views/componentschild/operationanalysis.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div ref="run" id="runstatus" style="width: 100%; height: 235px"></div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/harmonic/onlineData";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.run.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('operationanalysis').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.run.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
formData:{
|
||||
id: "333ff66a28acd0c68834f5a0d4ca68bd",
|
||||
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
var data = window.sessionStorage.getItem("Info");
|
||||
data = eval("(" + data + ")");
|
||||
this.deptIndex = data.deptId;
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('operationanalysis').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.run.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
this.formData.searchBeginTime = this.time[0],
|
||||
this.formData.searchEndTime = this.time[1]
|
||||
api.getComFlagInfoData(this.formData).then((res) => {
|
||||
this.xdata= res.data.updateTime;
|
||||
this.ydata = res.data.type;
|
||||
this.$nextTick(() => {
|
||||
this.runstatus();
|
||||
});
|
||||
|
||||
});
|
||||
},
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
runstatus() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("runstatus"));
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
// title: {
|
||||
// text: '运行状态'
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var res = params[0].name + "<br/>终端运行状态为：";
|
||||
var texts = "";
|
||||
if (params[0].value === 2 || params[0].value === "2") {
|
||||
texts = "退出";
|
||||
} else if (params[0].value === 0 || params[0].value === "0") {
|
||||
texts = "中断";
|
||||
} else if (params[0].value === 1 || params[0].value === "1") {
|
||||
texts = "正常";
|
||||
}
|
||||
res = res + texts;
|
||||
return res;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["运行状态"],
|
||||
right: "10px",
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "10px",
|
||||
top:'30px',
|
||||
right: "50px",
|
||||
bottom: "40px",
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
|
||||
xAxis: {
|
||||
name: "时间",
|
||||
type: "category",
|
||||
data: this.xdata,
|
||||
axisLine: {
|
||||
show: true,
|
||||
// symbol: ["none", "arrow"],
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "状态",
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
//symbol: ["none", "arrow"],
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
// 这里重新定义就可以
|
||||
formatter: function (value, index) {
|
||||
var texts = [];
|
||||
if (value === 2) {
|
||||
texts.push("退出");
|
||||
} else if (value === 0) {
|
||||
texts.push("中断");
|
||||
} else if (value === 1) {
|
||||
texts.push("正常");
|
||||
}
|
||||
return texts;
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "运行状态",
|
||||
type: "line",
|
||||
step: "end",
|
||||
data: this.ydata,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.run, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
254
src/views/componentschild/overviewdistrib-hb.vue
Normal file
254
src/views/componentschild/overviewdistrib-hb.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div ref="glfb" id="eventChance2" style="width: 100%; height: 235px"></div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
onLienRate1,
|
||||
onLienRate2,
|
||||
onLienRate3,
|
||||
colorB,
|
||||
} from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import yan from "@/assets/commjs/color";
|
||||
//import { getProbabilityDistribution } from "@/api/monitoringpointStatistics/echart";
|
||||
import {getPwDurationLineChart} from "@/api/Distributionnetwork/transient/transient";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.glfb.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('overviewdistrib').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.glfb.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
//暂降类型模拟数据
|
||||
eventList: {},
|
||||
dataListX:[],
|
||||
dataListY:[]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
var data = window.sessionStorage.getItem("Info");
|
||||
data = eval("(" + data + ")");
|
||||
this.deptIndex = data.deptId;
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('overviewdistrib').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.glfb.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
var info = window.sessionStorage.getItem("Info");
|
||||
info = eval("(" + info + ")");
|
||||
var id =info.deptId;
|
||||
var formData = {
|
||||
endTime: this.time[0],
|
||||
id: id,
|
||||
startTime: this.time[1],
|
||||
type:3
|
||||
// timeFlag: 0,
|
||||
};
|
||||
getPwDurationLineChart(formData).then((res) => {
|
||||
// this.eventList = res.data;
|
||||
this.dataListX=[]
|
||||
this.dataListY=[]
|
||||
res.data.forEach(item => {
|
||||
this.dataListX.push(item.name)
|
||||
this.dataListY.push(item.value)
|
||||
});
|
||||
this.eventChance();
|
||||
});
|
||||
},
|
||||
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var today = year + "-" + month + "-" + day;
|
||||
var today2 = year + "-01-01";
|
||||
arr.push(today);
|
||||
arr.push(today2);
|
||||
return arr;
|
||||
},
|
||||
eventChance() {
|
||||
// var sisttime = this.eventList.name;
|
||||
// var persisttime = this.eventList.value;
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("eventChance2"));
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
myChartes.clear();
|
||||
let option = {
|
||||
title: {
|
||||
text: "持续时间的概率分布函数 ",
|
||||
left: "center",
|
||||
top: 0,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "50px",
|
||||
left: "10px",
|
||||
bottom: "20px",
|
||||
right: "40px",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.dataListX,
|
||||
name: "s",
|
||||
//nameLocation: "middle",
|
||||
boundaryGap: false,
|
||||
nameTextStyle: {
|
||||
padding: 5,
|
||||
color:"#fff",
|
||||
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
// type: "value",
|
||||
name: "概率分布",
|
||||
nameGap: '20',
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
padding: 0,
|
||||
},
|
||||
minInterval: 1,
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ["#fff",],
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.dataListY,
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[0] },
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#fff",
|
||||
},
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.glfb, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
318
src/views/componentschild/overviewdistrib.vue
Normal file
318
src/views/componentschild/overviewdistrib.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div ref="glfb" id="eventChance2" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
onLienRate1,
|
||||
onLienRate2,
|
||||
onLienRate3,
|
||||
colorB,
|
||||
} from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { getProbabilityDistribution } from "@/api/monitoringpointStatistics/echart";
|
||||
//import {getPwDurationLineChart} from "@/api/Distributionnetwork/transient/transient";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.glfb.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('overviewdistrib').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.glfb.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
//暂降类型模拟数据
|
||||
eventList: {},
|
||||
dataListX:[],
|
||||
dataListY:[]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
var data = window.sessionStorage.getItem("Info");
|
||||
data = eval("(" + data + ")");
|
||||
this.deptIndex = data.deptId;
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('overviewdistrib').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.glfb.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
var info = window.sessionStorage.getItem("Info");
|
||||
info = eval("(" + info + ")");
|
||||
var id =info.deptId;
|
||||
var formData = {
|
||||
endTime: this.time[0],
|
||||
lineIndex: "d14b23ad514bc8db840ab29a29573ce5",
|
||||
startTime: this.time[1],
|
||||
};
|
||||
getProbabilityDistribution(formData).then((res) => {
|
||||
this.eventList = res.data;
|
||||
// this.dataListX=[]
|
||||
// this.dataListY=[]
|
||||
// res.data.forEach(item => {
|
||||
// this.dataListX.push(item.name)
|
||||
// this.dataListY.push(item.value)
|
||||
// });
|
||||
this.eventChance();
|
||||
});
|
||||
},
|
||||
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var today = year + "-" + month + "-" + day;
|
||||
var today2 = year + "-01-01";
|
||||
arr.push(today);
|
||||
arr.push(today2);
|
||||
return arr;
|
||||
},
|
||||
eventChance() {
|
||||
var eventValue = this.eventList.eventvalue;
|
||||
var pereventValue = this.eventList.pereventvalue;
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("eventChance2"));
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
// backgroundColor: "#fff", //背景色,
|
||||
title: {
|
||||
text: "暂降幅值的概率分布函数",
|
||||
x: "center",
|
||||
textStyle: {
|
||||
color:'#fff',
|
||||
fontSize: yan.EchartObject.titleNamefontSize1,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
right: 10,
|
||||
data: ["概率分布", "占比"],
|
||||
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
},
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
//提示框组件
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0,
|
||||
},
|
||||
calculable: true,
|
||||
grid: yan.EchartObject.grid111,
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
name: "暂降幅值",
|
||||
nameGap: 10,
|
||||
nameTextStyle: {
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: '#fff',
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
},
|
||||
},
|
||||
data: [
|
||||
"0",
|
||||
"10%",
|
||||
"20%",
|
||||
"30%",
|
||||
"40%",
|
||||
"50%",
|
||||
"60%",
|
||||
"70%",
|
||||
"80%",
|
||||
"90%",
|
||||
"100%",
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "概率分布",
|
||||
nameTextStyle: {
|
||||
fontSize: 15,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: "{value}%",
|
||||
fontSize: yan.EchartObject.yNamefontSize,
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: '#fff',
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: "占比",
|
||||
|
||||
nameTextStyle: {
|
||||
fontSize: 15,
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value}%",
|
||||
color: '#fff',
|
||||
fontSize: yan.EchartObject.yNamefontSize,
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: [echartsColor.thread],
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "概率分布",
|
||||
type: "line",
|
||||
data: eventValue,
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[0] },
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "占比",
|
||||
type: "bar",
|
||||
data: pereventValue,
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[1] },
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.glfb, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
464
src/views/componentschild/powerquality.vue
Normal file
464
src/views/componentschild/powerquality.vue
Normal file
@@ -0,0 +1,464 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="height:30px;height:20px;position:absolute;right:10px">
|
||||
<el-tag style="background:#339966;width:30px;height:15px;border:1px solid #339966;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#339966;font-weight:400;;float:left">  优质(4.5,5]   </span>
|
||||
<el-tag size="mini" style="background:#99CC99;width:30px;height:15px;border:1px solid #99CC99;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#99CC99;font-weight:400;float:left" >  良好(4,5]   </span>
|
||||
<el-tag style="background:#FF9900;width:30px;height:15px;border:1px solid #FF9900;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#FF9900;font-weight:400;float:left" >  合格(3,4]  </span>
|
||||
<el-tag style="background:#996600;width:30px;height:15px;border:1px solid #996600;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#996600;font-weight:400;float:left" >  较差(2,3]  </span>
|
||||
<el-tag style="background:#CC0000;width:30px;height:15px;border:1px solid #CC0000;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#CC0000;font-weight:400;float:left" >  极差[1,2]</span>
|
||||
</div>
|
||||
<div id="powerqualitydd" ref="pwerf" style="width: 100%; "></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from '@/api/pollution/pollution'
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.pwerf.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('powerquality').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.pwerf.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
echartsheight: undefined,
|
||||
deptIndex: "",
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
statisticalType: null,
|
||||
formData: {
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId ,
|
||||
id: "",
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
reportFlag: 3,
|
||||
statisticalType: null,
|
||||
},
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getIndexType()
|
||||
this.queryData()
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('powerquality').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.pwerf.style.height = height
|
||||
},200);
|
||||
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
this.formData.searchBeginTime=this.time[0]
|
||||
this.formData.searchEndTime=this.time[1]
|
||||
api.deptSubstationRelations(this.formData).then((res) => {
|
||||
if(res.code=='A0000'){
|
||||
//this.tableData = res.data
|
||||
var xdata = []
|
||||
var ydata = []
|
||||
var arr = []
|
||||
this.loading = false
|
||||
for(var i=0;i<res.data.length;i++){
|
||||
|
||||
if(res.data[i].data==3.14159){
|
||||
res.data[i].data=0.2
|
||||
var p = {
|
||||
name:res.data[i].name.substr(0,2),
|
||||
value:res.data[i].data
|
||||
}
|
||||
arr.push(p)
|
||||
ydata.push(res.data[i].data)
|
||||
}else{
|
||||
ydata.push(res.data[i].data)
|
||||
}
|
||||
xdata.push(res.data[i].name)
|
||||
|
||||
}
|
||||
//this.dataList = arr
|
||||
this.xdata = xdata
|
||||
this.ydata = ydata
|
||||
}
|
||||
this.powerquality()
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
//字典获取数据指标类型
|
||||
getIndexType() {
|
||||
var code = "Pollution_Statis";
|
||||
this.classificationData = dicData(code, [
|
||||
"I_Neg",
|
||||
"V_Inharm",
|
||||
"V_Dev",
|
||||
"V_Unbalance",
|
||||
"Plt",
|
||||
"Freq_Dev",
|
||||
]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
powerquality() {
|
||||
//debugger
|
||||
//var _this1 = this
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("powerqualitydd"));
|
||||
var option = {
|
||||
title: {
|
||||
//text: this.title,
|
||||
//subtext: "单位(级)",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips += params[0].name + "</br/>";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 0.2) {
|
||||
tips += params[i].seriesName + ":暂无数据<br/>";
|
||||
} else {
|
||||
tips += params[i].seriesName + ":" + params[i].value + "%<br/>";
|
||||
}
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridf,
|
||||
xAxis: [
|
||||
{
|
||||
name:yan.EchartObject.area,
|
||||
type: "category",
|
||||
data: this.xdata,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
rotate: 0,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
yAxis: {
|
||||
name:yan.EchartObject.grade ,
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 5,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fonSize:yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
// 这里重新定义就可以
|
||||
formatter: function (value, index) {
|
||||
var texts = [];
|
||||
if (value === 1) {
|
||||
texts.push("1级[1,2]");
|
||||
} else if (value === 2) {
|
||||
texts.push("2级(2,3]");
|
||||
} else if (value === 3) {
|
||||
texts.push("3级(3,4]");
|
||||
} else if (value === 4) {
|
||||
texts.push("4级(4,5]");
|
||||
} else if (value === 5) {
|
||||
texts.push("5级(4,5.5]");
|
||||
}
|
||||
return texts;
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
type:yan.EchartObject.type
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
},
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
series: [
|
||||
{
|
||||
name: "综合评估",
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 5 && params.value !== 0.2) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.electricEQuality,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (4 < params.value && params.value <= 5 && params.value !== 0.2) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.electricGood,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (3 < params.value && params.value <= 4 && params.value !== 0.2) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.electricQualified,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (2 < params.value && params.value <= 3 && params.value !== 0.2) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.electricPoor,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (0 <= params.value && params.value <= 2 && params.value !== 0.2) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.electricRange,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if ((params.value = 0.2)) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#999999",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: "circle",
|
||||
data: [
|
||||
{
|
||||
name: "",
|
||||
yAxis: 5,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.electricEQuality,
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.electricEQuality,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 4,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.electricGood,
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.electricGood,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 3,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.electricQualified,
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.electricQualified,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 2,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.electricPoor,
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.electricPoor,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 1,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.electricRange,
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.electricRange,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
data: this.ydata,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.pwerf, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
161
src/views/componentschild/powerqualitybg.vue
Normal file
161
src/views/componentschild/powerqualitybg.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div style="padding: 0px">
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
stripe
|
||||
ref="bgzh"
|
||||
:data="tableData"
|
||||
:height="vh"
|
||||
border
|
||||
v-loading="konzhi"
|
||||
header-cell-class-name="table_header"
|
||||
element-loading-text="拼命加载中"
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="name"
|
||||
label="名称"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" prop="data" label="谐波电压(%)">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.data == 3.14159" type="primary" size="small"
|
||||
>暂无数据</span
|
||||
>
|
||||
<span
|
||||
v-if="scope.row.data !== 3.14159"
|
||||
type="primary"
|
||||
size="small"
|
||||
>{{ scope.row.data }}</span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="monitors"
|
||||
label="监测点个数(个)"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" prop="level" label="评估">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/integraliy/integraliy";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.vh = document.getElementById("conmentId").offsetHeight - 50;
|
||||
this.queryData();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("powerqualitybg").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
this.queryData();
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
konzhi: false,
|
||||
vh: null,
|
||||
h: 0,
|
||||
tableData: [],
|
||||
time: this.timefamt(),
|
||||
formData: {
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
id: "",
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
reportFlag: 3,
|
||||
statisticalType: null,
|
||||
},
|
||||
classificationData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("powerqualitybg").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据指标类型
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
queryData() {
|
||||
this.konzhi = true;
|
||||
this.formData.searchBeginTime = this.time[0];
|
||||
this.formData.searchEndTime = this.time[1];
|
||||
api.getComAccessData(this.formData).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
this.tableData = res.data;
|
||||
this.konzhi = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
422
src/views/componentschild/powerqualitymap.vue
Normal file
422
src/views/componentschild/powerqualitymap.vue
Normal file
@@ -0,0 +1,422 @@
|
||||
<template>
|
||||
<div ref="xbmap" id="xbditu" style="width: 100%; height: 500px"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from '@/api/pollution/pollution'
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.xbmap.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('powerqualitymap').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.xbmap.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
mapData: [],
|
||||
formData:{
|
||||
statisticalType:null,
|
||||
id:'',
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
reportFlag: 3,
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
fff:null,
|
||||
// dataList:[],
|
||||
dataList: [
|
||||
// {name: "南海诸岛", value:1},
|
||||
// {name: '北京市',value: 0.1},
|
||||
// {name: '天津市',value: 2},
|
||||
// {name: '上海市',value: 2.6},
|
||||
// {name: '重庆市',value: 1.5},
|
||||
// {name: '河北省',value: 1.3},
|
||||
// {name: '河南省',value: 1.2},
|
||||
// {name: '云南省',value: 0.8},
|
||||
// {name: '辽宁省',value: 0},
|
||||
// {name: '黑龙江省',value: 0},
|
||||
// {name: '湖南省',value: 1.2},
|
||||
// {name: '安徽省',value: 2.5},
|
||||
// {name: '山东省',value: 1.3},
|
||||
// {name: '新疆',value: 1.2},
|
||||
// {name: '江苏省',value: 1.5},
|
||||
// {name: '浙江省',value: 1.8},
|
||||
// {name: '江西省',value: 1.2},
|
||||
// {name: '湖北省',value: 0.3},
|
||||
// {name: '广西省',value: 0.6},
|
||||
// {name: '甘肃省',value: 0},
|
||||
// {name: '山西省',value: 0.56},
|
||||
// {name: '内蒙古',value: 37},
|
||||
// {name: '陕西省',value: 0.56},
|
||||
// {name: '吉林省',value: 0.4},
|
||||
// {name: '福建省',value: 1.2},
|
||||
// {name: '贵州省',value: 1.5},
|
||||
// {name: '广东省',value: 1.8},
|
||||
// {name: '青海省',value: 1.2},
|
||||
// {name: '西藏',value: 0.6},
|
||||
// {name: '四川省',value: 54},
|
||||
// {name: '宁夏',value: 1.5},
|
||||
// {name: '海南省',value: 1.6},
|
||||
// {name: '台湾省',value: 1.7},
|
||||
// {name: '香港',value: 1.2},
|
||||
// {name: '澳门',value: 0.56}
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('powerqualitymap').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.xbmap.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
this.formData.searchBeginTime=this.time[0]
|
||||
this.formData.searchEndTime=this.time[1]
|
||||
api.deptSubstationRelations(this.formData).then(res=>{
|
||||
if(res.code=='A0000'){
|
||||
let data = res.data
|
||||
let arr =[]
|
||||
let arr1=[]
|
||||
data.forEach(item=>{
|
||||
// let name=item.name.slice(0,item.name.length-1)
|
||||
let p={
|
||||
name: item.name,
|
||||
value:item.data
|
||||
}
|
||||
arr.push(p)
|
||||
let d = item.name.split("\n");
|
||||
let p1 = {
|
||||
name: d[0],
|
||||
value: item.data,
|
||||
};
|
||||
|
||||
arr1.push(p1);
|
||||
})
|
||||
this.dataList = arr1
|
||||
this.cbtjechart(arr1);
|
||||
// console.log("测试数组",arr)
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// });
|
||||
},
|
||||
//字典获取数据指标类型
|
||||
getIndexType() {
|
||||
var code = "Pollution_Statis";
|
||||
this.classificationData = dicData(code, [
|
||||
"I_Neg",
|
||||
"V_Inharm",
|
||||
"V_Dev",
|
||||
"V_Unbalance",
|
||||
"Plt",
|
||||
"Freq_Dev",
|
||||
]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
cbtjechart(arr) {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("xbditu"));
|
||||
let mapname = require("@/assets/js/zhonguo.json");
|
||||
myChartes.clear();
|
||||
echarts.registerMap("中国", mapname);
|
||||
var option = {
|
||||
title: {
|
||||
text: "电能质量污区图",
|
||||
left: "center",
|
||||
top: "5%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
// triggerOn: "click",
|
||||
// formatter: function(e, t, n) {
|
||||
// return "<br />" + e.name + "<br/>区域暂降评估等级 :" + e.value
|
||||
// }
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
|
||||
if (params.value === -1 || window.isNaN(params.value)) {
|
||||
tips =
|
||||
"<font style='color:#fff'>" +
|
||||
params.name +
|
||||
"</font><br/>区域污染评估:" +
|
||||
"<font style='color:#fff'><font style='color:#fff'>暂无数据</font><br/>";
|
||||
} else if (params.value === 0.1 || window.isNaN(params.value)) {
|
||||
tips =
|
||||
"<font style='color:#fff'>" +
|
||||
params.name +
|
||||
"</font><br/>区域污染评估:" +
|
||||
"<font style='color:#fff'><font style='color:#fff'>暂无数据</font><br/>";
|
||||
} else {
|
||||
tips +=
|
||||
"<font style='color:#fff'>" +
|
||||
params.name +
|
||||
"</font><br/>区域污染评估" +
|
||||
"<font style='color:#fff'>：" +
|
||||
params.value +
|
||||
"</font><br/>";
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
left: 26,
|
||||
bottom: 40,
|
||||
showLabel: !0,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
//text: ["高", "低"],
|
||||
pieces: [
|
||||
{
|
||||
gt: 2,
|
||||
lt: 10000,
|
||||
label: "重度污染",
|
||||
color: "#990000",
|
||||
},
|
||||
{
|
||||
gte: 1.2,
|
||||
lt: 1.6,
|
||||
label: "轻度污染",
|
||||
color: "#FF9900",
|
||||
},
|
||||
{
|
||||
gt: 1.6,
|
||||
lt: 2,
|
||||
label: "中度污染",
|
||||
color: "#FF3300",
|
||||
},
|
||||
{
|
||||
gte: 1,
|
||||
lte: 1.2,
|
||||
label: "轻微污染",
|
||||
color: "#0099FF",
|
||||
},
|
||||
{
|
||||
gte: 0.1,
|
||||
lte: 1,
|
||||
label: "无污染",
|
||||
color: "#00CC00",
|
||||
},
|
||||
{
|
||||
gte: -1,
|
||||
lte: 0.05,
|
||||
label: "无数据",
|
||||
color: "#ccc",
|
||||
}
|
||||
],
|
||||
show: !0,
|
||||
},
|
||||
geo: {
|
||||
type: "map",
|
||||
map: "中国",
|
||||
roam: true,
|
||||
top: "25%",
|
||||
zoom: 1.6,
|
||||
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: "14",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(51, 69, 129, .8)", //地图背景色
|
||||
borderColor: "#999999",
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(147, 135, 148, .2)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(128, 217, 248, 1)",
|
||||
// shadowColor: 'rgba(255, 255, 255, 1)',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: "#ccc",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
// {
|
||||
// type: "scatter",
|
||||
// mapName: name,
|
||||
// coordinateSystem: "geo",
|
||||
// geoIndex: 0,
|
||||
// animation: false, //坐标点是否显示动画
|
||||
// roam: true,
|
||||
// selectedMode: "false", //是否允许选中多个区域
|
||||
// symbol: "pin",
|
||||
// rippleEffect: {
|
||||
// brushType: "fill", // stroke|fill
|
||||
// },
|
||||
// symbolSize: function (val, params) {
|
||||
// return 30;
|
||||
// },
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// emphasis: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// data: this.mapData.map(function (itemOpt) {
|
||||
// return {
|
||||
// name: itemOpt.srbName,
|
||||
// value: [
|
||||
// parseFloat(itemOpt.coordY), //经度
|
||||
// parseFloat(itemOpt.coordX), //维度
|
||||
// ],
|
||||
|
||||
// itemStyle: {
|
||||
// //地图区域的多边形
|
||||
// normal: {
|
||||
// color: itemOpt.color, //坐标点颜色
|
||||
// shadowBlur: 0, // 图形阴影的模糊大小
|
||||
// shadowOffsetX: 0, // 阴影水平方向上的偏移距离。
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// position: "bottom", //提示框位置,仅在 options中最外层的 tooltip.trigger 为 'item'时有效
|
||||
// formatter: function (params, ticket, callback) {
|
||||
// var strHtml = "<div>";
|
||||
// strHtml += '<table class="table">';
|
||||
// strHtml +=
|
||||
// '<tr><td colspan="4" style="text-align:center">' +
|
||||
// itemOpt.srbName +
|
||||
// "</td></tr>";
|
||||
// strHtml += "</div>";
|
||||
// return strHtml;
|
||||
// },
|
||||
// },
|
||||
// };
|
||||
// }),
|
||||
// },
|
||||
{
|
||||
name: "综合评估为",
|
||||
type: "map",
|
||||
geoIndex: 0,
|
||||
data: arr,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.xbmap, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
287
src/views/componentschild/sagdistribution.vue
Normal file
287
src/views/componentschild/sagdistribution.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div ref="sag" id="sagdistrib" style="width: 100%; height: 235px"></div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getReasonTypeTime } from "@/api/monitoringpointStatistics/echart";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.sag.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('sagdistribution').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.sag.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
datamock: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
var data = window.sessionStorage.getItem("Info");
|
||||
data = eval("(" + data + ")");
|
||||
this.deptIndex = data.deptId;
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('sagdistribution').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.sag.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
var formData = {
|
||||
endTime: this.time[0],
|
||||
lineIndex: "e5807e73521aa58dec3cb1cf74805281",
|
||||
startTime: this.time[1],
|
||||
flag: 0,
|
||||
};
|
||||
getReasonTypeTime(formData).then((res) => {
|
||||
this.datamock = res.data;
|
||||
this.$nextTick(() => {
|
||||
this.sagdistrib();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var today = year + "-" + month + "-" + day;
|
||||
var today2 = year + "-01-01";
|
||||
arr.push(today);
|
||||
arr.push(today2);
|
||||
return arr;
|
||||
},
|
||||
sagdistrib() {
|
||||
var months = new Array();
|
||||
var handle = new Array();
|
||||
if (this.datamock != null) {
|
||||
for (var i = 0; i < this.datamock.length; i++) {
|
||||
if ((this.datamock[i].month == "01") | (i == 0)) {
|
||||
if (this.timeFlag == 0) {
|
||||
months[i] =
|
||||
this.datamock[i].month + "\n(" + this.datamock[i].year + ")";
|
||||
} else {
|
||||
months[i] =
|
||||
this.datamock[i].month +
|
||||
"-" +
|
||||
this.datamock[i].day +
|
||||
"\n(" +
|
||||
this.datamock[i].year +
|
||||
")";
|
||||
}
|
||||
} else {
|
||||
if (this.timeFlag == 0) {
|
||||
months[i] = this.datamock[i].month;
|
||||
} else {
|
||||
months[i] = this.datamock[i].month + "-" + this.datamock[i].day;
|
||||
}
|
||||
}
|
||||
handle[i] = this.datamock[i].times;
|
||||
}
|
||||
}
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("sagdistrib"));
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
// backgroundColor: "#fff", //背景色,
|
||||
title: {
|
||||
text:
|
||||
this.intervald == 3
|
||||
? "月份统计"
|
||||
: this.intervald == 2
|
||||
? "季度统计"
|
||||
: this.intervald == 1
|
||||
? "年份统计"
|
||||
: "",
|
||||
x: "center",
|
||||
textStyle: {
|
||||
fontSize: yan.EchartObject.titleNamefontSize1,
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips += "<font>时间:" + params[0].name + "</font><br/>";
|
||||
tips += "<font>暂降次数:" + params[0].data + "</font>";
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
color: ["#FF8C00"],
|
||||
legend: {
|
||||
data: ["暂降次数"],
|
||||
right:'10px',
|
||||
textStyle: {
|
||||
// fontSize: yan.EchartObject.titleNamefontSize1,
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridf,
|
||||
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: months,
|
||||
name: "时间",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: '#fff',
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "次",
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
minInterval: 1,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
splitLine: {
|
||||
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#fff'],
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "暂降次数",
|
||||
type: "bar",
|
||||
barMaxWidth: 30,
|
||||
barMinHeight: 5,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
// console.log(params,'1111111111111111111111');
|
||||
if (params.data == 0) {
|
||||
return "#ccc";
|
||||
} else {
|
||||
return "#FF8C00";
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
label: { show: true, position: "top" },
|
||||
color: "#8B008B",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
data: handle,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.sag, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
330
src/views/componentschild/seadsstatestandard.vue
Normal file
330
src/views/componentschild/seadsstatestandard.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<div ref="wtzbt" id="steadzb" style="width: 100%"></div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/integraliy/integraliy";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.wtzbt.style.height =
|
||||
document.getElementById("conmentId").offsetHeight - 50 + "px";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("seadsstatestandard").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.wtzbt.style.height = height;
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1: {
|
||||
statisticalType: null,
|
||||
scale: null,
|
||||
manufacturer: null,
|
||||
loadType: null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
timeFlag: 1,
|
||||
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
},
|
||||
voltageleveloption: [],
|
||||
terminaloption: [],
|
||||
interfereoption: [],
|
||||
classificationData: [],
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
valueData: [],
|
||||
ydata1: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
this.getclassificationData();
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("seadsstatestandard").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50 + "px";
|
||||
this.$refs.wtzbt.style.height = height;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData1.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData1.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData1.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData1.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
this.formData1.searchBeginTime = this.time[0];
|
||||
this.formData1.searchEndTime = this.time[1];
|
||||
api.getSteadyExceedRateCensus(this.formData1).then((res) => {
|
||||
var ydata = res.data.type;
|
||||
this.ydata = ydata;
|
||||
//this.ydata = ['江苏省', '浙江省', '福建省','江西省', '安徽省', '河北省', '海南省','上海市']
|
||||
var xdata = res.data.time;
|
||||
this.xdata = xdata;
|
||||
// this.xdata = ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月','10月','11月','12月']
|
||||
var data = res.data.steadyExceedRate;
|
||||
// this.centerdata = [[56,28,57,39,60,86,95,''],[36,18,67,59,80,66,95,45],[76,78,47,69,90,56,25,''],[66,88,67,89,90,86,95,80],
|
||||
// [96,58,57,39,90,86,95,89],[46,68,87,99,80,76,55,70,''],[26,53,57,59,90,86,85,90],[66,98,77,89,60,66,95,''],
|
||||
// [86,68,67,89,90,96,55,90],[56,58,67,89,90,86,65,''],[76,78,67,89,30,66,75,''],[46,88,87,89,90,86,95,17],
|
||||
// ]
|
||||
var arr = [];
|
||||
for(var i=0;i<data.length;i++){
|
||||
for(var j=0;j<data[i].length;j++){
|
||||
if(data[i][j]==3.14159 || data[i][j]==0){
|
||||
arr.push([i,j,0])
|
||||
}else if(data[i][j]==3.1415 ){
|
||||
arr.push([i,j,'/'])
|
||||
}else{
|
||||
arr.push([i,j,data[i][j]])
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
this.valueData = arr;
|
||||
this.steadyqualified();
|
||||
});
|
||||
},
|
||||
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
steadyqualified() {
|
||||
let _this = this;
|
||||
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("steadzb"));
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
title: {
|
||||
//text: "监测点符合性统计",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "16",
|
||||
},
|
||||
// subtext: "统计类型:",
|
||||
x: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
// position: "top",
|
||||
formatter: function (param) {
|
||||
if(param.value[2]===0){
|
||||
return ` ${_this.ydata[param.value[1]]} </br> ${
|
||||
_this.xdata[param.value[0]]
|
||||
} </br> ${param.seriesName}: 暂无数据`;
|
||||
}else{
|
||||
return ` ${_this.ydata[param.value[1]]} </br> ${
|
||||
_this.xdata[param.value[0]]
|
||||
} </br> ${param.seriesName}: ${param.value[2]}%`;
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
animation: true,
|
||||
grid:yan.EchartObject.gridf,
|
||||
|
||||
|
||||
xAxis: {
|
||||
name: yan.EchartObject.date,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
type: "category",
|
||||
data: this.xdata,
|
||||
splitArea: {
|
||||
show: true,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
},
|
||||
rotate: 0,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
// symbol:['none', 'arrow']
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name:yan.EchartObject.area ,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
type: "category",
|
||||
data: this.ydata,
|
||||
splitArea: {
|
||||
show: true,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
//fontSize:10
|
||||
},
|
||||
rotate: 0,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
//symbol:['none', 'arrow']
|
||||
},
|
||||
},
|
||||
dataZoom:yan.EchartObject.dataZoom,
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
text: ["", "稳态指标符合性占比(%)"],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
//calculable: true,
|
||||
orient: "horizontal",
|
||||
top: '-5px',
|
||||
right: '10px',
|
||||
inRange: {
|
||||
color: ['#ccc', yan.ColorObject.qualifiedRate3,yan.ColorObject.qualifiedRate1]
|
||||
// color: ["#ccc",yan.ColorObject.qualifiedRate1, yan.ColorObject.qualifiedRate2, yan.ColorObject.qualified],
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "稳态指标符合性占比",
|
||||
type: "heatmap",
|
||||
data: this.valueData,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value == 3.14159 || params.value == 0) {
|
||||
return new echarts.graphic.LinearGradient(0,1,0,0,[{ offset: 1,color: "#ccc"}],false);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: '10px',
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
// shadowBlur: 0.1,
|
||||
//shadowColor: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
|
||||
_this.$erd.listenTo(_this.$refs.wtzbt, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
438
src/views/componentschild/steadyratechart.vue
Normal file
438
src/views/componentschild/steadyratechart.vue
Normal file
@@ -0,0 +1,438 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="height:30px;height:20px;position:absolute;right:10px">
|
||||
<el-tag style="background:#CC0000;width:30px;height:15px;border:1px solid #CC0000;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#CC0000;font-weight:400;;float:left">  合格率<60%   </span>
|
||||
<el-tag size="mini" style="background:#FFCC33;width:30px;height:15px;border:1px solid #FFCC33;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#FFCC33;font-weight:400;float:left" >  60%≤合格率<90%   </span>
|
||||
<el-tag style="background:#339966;width:30px;height:15px;border:1px solid #339966;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#339966;font-weight:400;float:left" >  合格率≥90%</span>
|
||||
</div>
|
||||
<div ref="kofghj" id="qualifiedechartko" style="width: 100%;"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from '@/api/harmonic/onlineData'
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.kofghj.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('steadyratechart').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.kofghj.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
xdata: [],
|
||||
yData: [],
|
||||
yData1: [],
|
||||
formData1:{
|
||||
id:'333ff66a28acd0c68834f5a0d4ca68bd',
|
||||
periodBeginTime: "",
|
||||
periodEndTime: "",
|
||||
searchBeginTime:'',
|
||||
searchEndTime:''
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('steadyratechart').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.kofghj.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
this.formData1.searchBeginTime = this.time[0]
|
||||
this.formData1.searchEndTime = this.time[1]
|
||||
api.getSteadyData(this.formData1).then((res) => {
|
||||
if(res.code =='A0000'){
|
||||
var data = res.data.steadyInfoList
|
||||
var data1 = res.data.steadyInfoData
|
||||
var arr=[],arr2=[]
|
||||
for(var i=0;i<data.length;i++){
|
||||
if(data[i]==3.1415){
|
||||
data[i]=1
|
||||
arr.push(data[i])
|
||||
}else if(data[i]==3.14159){
|
||||
data[i]=1
|
||||
arr.push(data[i])
|
||||
}else if(data[i] !==3.14159){
|
||||
arr.push(data[i])
|
||||
}
|
||||
}
|
||||
this.yData = arr
|
||||
for(var i=0;i<data1.length;i++){
|
||||
if(data1[i]==3.1415){
|
||||
data1[i]=1
|
||||
arr2.push(data1[i])
|
||||
}else if(data1[i]==3.14159){
|
||||
data1[i]=1
|
||||
arr2.push(data1[i])
|
||||
}else if(data1[i] !==3.14159){
|
||||
arr2.push(data1[i])
|
||||
}
|
||||
}
|
||||
this.yData1 = arr2
|
||||
this.qualifiedechart();
|
||||
}
|
||||
});
|
||||
},
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
qualifiedechart() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("qualifiedechartko"));
|
||||
var xData=['频率偏差', '闪变', '三相电压不平衡', '谐波电压', '谐波电流', '电压偏差', '负序电流', '间谐波电压含有率']
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
title: {
|
||||
//text: "稳态指标合格率",
|
||||
left: "center",
|
||||
top:"0px",
|
||||
// subtext:this.thname , //副标题
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: yan.EchartObject.titleNamefontSize,
|
||||
},
|
||||
subtextStyle: {
|
||||
name:this.thname,
|
||||
color: '#000',
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function(params) {
|
||||
//console.log(params)
|
||||
var msg = "";
|
||||
msg += '指标类型<br/>' ;
|
||||
for (let i in params) {
|
||||
if(params[i].data==1){
|
||||
msg +=params[i].name +":暂无数据<br/>"
|
||||
|
||||
}else{
|
||||
msg +=params[i].name +':'+params[i].data+'<br/>'
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
return msg;
|
||||
}
|
||||
},
|
||||
grid: yan.EchartObject.gridf,
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
xAxis: {
|
||||
name:yan.EchartObject.Indicatortype,
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
width: 1
|
||||
},
|
||||
symbol:['none', 'arrow']
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: 'dinproRegular',
|
||||
color: '#fff'
|
||||
},
|
||||
rotate: yan.rotate(this.yData.length),
|
||||
},
|
||||
data: xData,
|
||||
},
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// // restore: {},
|
||||
// saveAsImage: {}
|
||||
// }
|
||||
// },
|
||||
yAxis: [
|
||||
{
|
||||
name: yan.EchartObject.nuit1,
|
||||
type: "value",
|
||||
min:0,
|
||||
max:100,
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize:yan.EchartObject.NamefontSize ,
|
||||
// left:'0%'
|
||||
|
||||
},
|
||||
position:'left',
|
||||
splitLine: {
|
||||
show:false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
width: 1
|
||||
},
|
||||
symbol:['none', 'arrow']
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: '#fff'
|
||||
},
|
||||
rotate:0,
|
||||
},
|
||||
},
|
||||
{
|
||||
position:'left',
|
||||
axisLine: {
|
||||
show:true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
|
||||
},
|
||||
symbol:['none', 'arrow']
|
||||
},
|
||||
splitLine: { //分割线配置
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
}
|
||||
},
|
||||
}],
|
||||
|
||||
series:[
|
||||
{
|
||||
name: this.time,
|
||||
type: 'bar',
|
||||
// stack: '余额',
|
||||
barMaxWidth:yan.EchartObject.barMaxWidth,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
distance: 2,
|
||||
color: '#fff',
|
||||
fontWeight: 'bolder',
|
||||
fontSize: yan.EchartObject.NamefontSize,
|
||||
},
|
||||
data:this.yData ,
|
||||
markLine: {
|
||||
silent:false,
|
||||
symbol :'circle',
|
||||
data: [
|
||||
{
|
||||
name:"",
|
||||
yAxis: 100,
|
||||
lineStyle:{
|
||||
color:yan.ColorObject.qualifiedRate1,
|
||||
},
|
||||
label: {
|
||||
color: yan.ColorObject.qualifiedRate1, // 文字颜色
|
||||
// position: "middle",
|
||||
padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
|
||||
show: true,
|
||||
formatter:function (params){
|
||||
// alert(params)
|
||||
var tips = "";
|
||||
tips+=''
|
||||
|
||||
return tips
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name:"",
|
||||
yAxis: 90,
|
||||
lineStyle:{
|
||||
color:yan.ColorObject.qualifiedRate2,
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
color: yan.ColorObject.qualifiedRate2, // 文字颜色
|
||||
padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
|
||||
show: true,
|
||||
formatter:function (params){
|
||||
// alert(params)
|
||||
var tips = "";
|
||||
tips+=''
|
||||
|
||||
return tips
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name:"",
|
||||
yAxis: 60,
|
||||
lineStyle:{
|
||||
color:yan.ColorObject.qualifiedRate3,
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
color: yan.ColorObject.qualifiedRate3, // 文字颜色
|
||||
padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
|
||||
show: true,
|
||||
formatter:function (params){
|
||||
// alert(params)
|
||||
var tips = "";
|
||||
tips+=''
|
||||
|
||||
return tips
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color:function(params){
|
||||
if(params.value >=90 && params.value<=100){
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate1
|
||||
}
|
||||
],false)
|
||||
}else if(params.value >=60 && params.value<=90 ){
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate2
|
||||
}
|
||||
],false)
|
||||
}else if(params.value <=60 && params.value >=10){
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate3
|
||||
}
|
||||
],false)
|
||||
}else if(params.value <=5 && params.value >0){
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
],false)
|
||||
}else if(params.value <=8 && params.value >5){
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
],false)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
}, 0);
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.kofghj, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
969
src/views/componentschild/steadystaterate.vue
Normal file
969
src/views/componentschild/steadystaterate.vue
Normal file
@@ -0,0 +1,969 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="height:30px;height:20px;position:absolute;right:10px">
|
||||
<el-tag style="background:#CC0000;width:30px;height:15px;border:1px solid #CC0000;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#CC0000;font-weight:400;;float:left">  合格率<60%   </span>
|
||||
<el-tag size="mini" style="background:#FFCC33;width:30px;height:15px;border:1px solid #FFCC33;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#FFCC33;font-weight:400;float:left" >  60%≤合格率<90%   </span>
|
||||
<el-tag style="background:#339966;width:30px;height:15px;border:1px solid #339966;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#339966;font-weight:400;float:left" >  合格率≥90%</span>
|
||||
</div>
|
||||
<div
|
||||
ref="sty"
|
||||
id="steadyqualification"
|
||||
style="width: 100%;"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/integraliy/integraliy";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.sty.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('steadystaterate').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.sty.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
zoom:'',
|
||||
formData:{
|
||||
statisticalType:null,
|
||||
scale:null,
|
||||
manufacturer:null,
|
||||
loadType:null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
xdata:[],ydata1:[],ydata2:[],ydata3:[],ydata4:[],ydata5:[],ydata6:[],ydata7:[],ydata8:[]
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
this.getclassificationData();
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('steadystaterate').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.sty.style.height = height
|
||||
},300)
|
||||
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
this.formData.searchBeginTime=this.time[0]
|
||||
this.formData.searchEndTime=this.time[1]
|
||||
api.getSteadyQualifyCensus(this.formData).then((res) => {
|
||||
if(res.code == "A0000"){
|
||||
this.xdata = res.data.type;
|
||||
this.ydata1 = res.data.freqOffset;
|
||||
this.ydata2 = res.data.flicker;
|
||||
this.ydata3 = res.data.voltageUnbalance;
|
||||
this.ydata4 = res.data.harmonicVoltage;
|
||||
this.ydata5 = res.data.voltageOffset;
|
||||
this.ydata6 = res.data.harmonicCurrent;
|
||||
this.ydata7 = res.data.negativeCurrent;
|
||||
this.ydata8 = res.data.interHarmonic;
|
||||
this.steadyqualification();
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
steadyqualification() {
|
||||
const echarts = require("echarts");
|
||||
let domID1 = document.getElementById("steadyqualification")
|
||||
var myChartes = echarts.init(domID1);
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
title: {
|
||||
left: "center",
|
||||
// subtext: '单位(%)'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips += params[0].name + "</br/>";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 1) {
|
||||
tips += params[i].seriesName + ":暂无数据<br/>";
|
||||
} else {
|
||||
tips += params[i].seriesName + ":" + params[i].value + "<br/>";
|
||||
}
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridf,
|
||||
dataZoom:yan.EchartObject.dataZoom,
|
||||
xAxis: [
|
||||
{
|
||||
name:yan.EchartObject.area,
|
||||
|
||||
type: "category",
|
||||
data: this.xdata,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name:yan.EchartObject.nuit1,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
|
||||
fontSize: 12,
|
||||
},
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: "dinproRegular",
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "频率偏差",
|
||||
barMaxWidth:yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
//show: true,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate1,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate2,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value <= 60 && params.value !== 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate3,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value == 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#cccccc",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: this.ydata1,
|
||||
},
|
||||
{
|
||||
name: "闪变",
|
||||
barMaxWidth:yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
// show: true,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate1,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate2,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value <= 60 && params.value !== 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate3,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value == 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#cccccc",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: this.ydata2,
|
||||
},
|
||||
{
|
||||
name: "三相电压不平衡",
|
||||
barMaxWidth:yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
// show: true,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate1,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate2,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value <= 60 && params.value !== 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate3,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value == 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#cccccc",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: this.ydata3,
|
||||
},
|
||||
{
|
||||
name: "谐波电压",
|
||||
barMaxWidth:yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
//show: true,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate1,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate2,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value <= 60 && params.value !== 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate3,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value == 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#cccccc",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: this.ydata4,
|
||||
},
|
||||
{
|
||||
name: "电压偏差",
|
||||
barMaxWidth:yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
//show: true,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate1,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate2,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value <= 60 && params.value !== 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate3,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value == 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#cccccc",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: this.ydata5,
|
||||
},
|
||||
{
|
||||
name: "谐波电流",
|
||||
barMaxWidth:yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
// show: true,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate1,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate2,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value <= 60 && params.value !== 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate3,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value == 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#cccccc",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: this.ydata6,
|
||||
},
|
||||
{
|
||||
name: "负序电流",
|
||||
barMaxWidth:yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
// show: true,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate1,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate2,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value <= 60 && params.value !== 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate3,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value == 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#cccccc",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: this.ydata7,
|
||||
},
|
||||
{
|
||||
name: "间谐波电压含有率",
|
||||
barMaxWidth:yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
//show: true,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate1,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate2,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value <= 60 && params.value !== 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.qualifiedRate3,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value == 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#cccccc",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: "circle",
|
||||
data: [
|
||||
{
|
||||
name: "",
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.qualifiedRate1,
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.qualifiedRate1,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.qualifiedRate2,
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.qualifiedRate2,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.qualifiedRate3,
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.qualifiedRate3,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
data: this.ydata8,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.sty, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
278
src/views/componentschild/tenharmonictabletu.vue
Normal file
278
src/views/componentschild/tenharmonictabletu.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<div ref="glfb" id="tenharmonictu" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getProbabilityDistribution } from "@/api/monitoringpointStatistics/echart";
|
||||
import api from "@/api/harmonic/harmonic";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.glfb.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('tenharmonictabletu').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.glfb.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
//暂降类型模拟数据
|
||||
eventList: {},
|
||||
xdata:[],
|
||||
ydata:[],
|
||||
formData:{
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId,
|
||||
id: "",
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: [],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('tenharmonictabletu').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.glfb.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
api.getLineRank(this.formData).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
var data = res.data;
|
||||
var xarr = [];
|
||||
var yarr = [];
|
||||
data.forEach((element) => {
|
||||
xarr.push(element.name);
|
||||
yarr.push(element.overDays);
|
||||
});
|
||||
this.xdata = xarr;
|
||||
this.ydata = yarr;
|
||||
}
|
||||
this.eventChance2();
|
||||
});
|
||||
},
|
||||
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var today = year + "-" + month + "-" + day;
|
||||
var today2 = year + "-01-01";
|
||||
arr.push(today);
|
||||
arr.push(today2);
|
||||
return arr;
|
||||
},
|
||||
eventChance2() {
|
||||
var eventValue = this.eventList.eventvalue;
|
||||
var pereventValue = this.eventList.pereventvalue;
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("tenharmonictu"));
|
||||
myChartes.clear();
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
var option = {
|
||||
title: {
|
||||
//text: this.title,
|
||||
// subtext: '单位(污染值)'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips += params[0].name + "<br/>";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
tips += params[i].seriesName + ":" + params[i].value + "天<br/>";
|
||||
// }
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridf,
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
xAxis: [
|
||||
{
|
||||
name: "监测点",
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
type: "category",
|
||||
data: this.xdata,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
//symbol: ["none", "arrow"],
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: "dinproRegular",
|
||||
color: "#fff",
|
||||
},
|
||||
formatter(value) {
|
||||
return `${value.slice(0, 6)}...`;
|
||||
},
|
||||
rotate: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
yAxis: {
|
||||
name: "超标天数",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
type: "value",
|
||||
min: 0,
|
||||
//max:500,
|
||||
//interval: 20,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
// symbol: ["none", "arrow"],
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
|
||||
lineStyle: {
|
||||
color: "#ccc",
|
||||
type:'dashed',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "超标天数",
|
||||
barMaxWidth: 30,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#0099CC",
|
||||
},
|
||||
},
|
||||
|
||||
data: this.ydata,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.glfb, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
278
src/views/componentschild/terminalconts.vue
Normal file
278
src/views/componentschild/terminalconts.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<div style="padding: 0px">
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
|
||||
:data="ptableDate"
|
||||
align="center"
|
||||
:height="vh"
|
||||
border
|
||||
v-loading="loading"
|
||||
element-loading-text="数据加载中"
|
||||
header-cell-class-name="table_header"
|
||||
:row-style="{ height: '25px' }"
|
||||
:cell-style="{ padding: '0px' }"
|
||||
|
||||
:span-method="objectOneMethod"
|
||||
>
|
||||
<el-table-column
|
||||
width="80"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
prop="num"
|
||||
label="序号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
prop="name"
|
||||
label="区域"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
prop="lx"
|
||||
label="类型"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
prop="flx"
|
||||
label="分类型"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
prop="bdzgs"
|
||||
label="变电站个数(个)"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="color: blue">{{ scope.row.bdzgs }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
prop="zdgs"
|
||||
label="终端个数(个)"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="color: #006699">{{ scope.row.zdgs }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
prop="jcdgs"
|
||||
label="监测点个数(个)"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="color: green">{{ scope.row.jcdgs }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/Terminal/decive";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.vh = document.getElementById("conmentId").offsetHeight - 50;
|
||||
this.queryData();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("terminalconts").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
this.queryData();
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: "235px",
|
||||
vh:null,
|
||||
ptableDate: [],
|
||||
loading:false,
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("terminalconts").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
}, 200);
|
||||
},
|
||||
mounted() {
|
||||
var data = window.sessionStorage.getItem("Info");
|
||||
data = eval("(" + data + ")");
|
||||
this.deptIndex = data.deptId;
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
this.loading = true
|
||||
var formData = {
|
||||
deptIndex: this.deptIndex,
|
||||
id: "",
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
searchBeginTime: this.time[0],
|
||||
searchEndTime: this.time[0],
|
||||
statisticalType: this.statisticalType,
|
||||
};
|
||||
api.getTerminalLedger(formData).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
if (res.data.length == 0) {
|
||||
this.ptableDate = [];
|
||||
this.loading = false
|
||||
} else {
|
||||
var arrData = [];
|
||||
var arr = [];
|
||||
var number;
|
||||
var tableData = res.data;
|
||||
for (var i = 0; i < tableData.length; i++) {
|
||||
for (var j = 0; j < tableData[i].list.length; j++) {
|
||||
for (var n = 0; n < tableData[i].list[j].list.length; n++) {
|
||||
arr.push(tableData[i].list[j].list[n]);
|
||||
for (var p = 1; p < arr.length + 1; p++) {
|
||||
number = p;
|
||||
}
|
||||
var map = {
|
||||
num: number,
|
||||
name: tableData[i].areaName,
|
||||
lx: tableData[i].list[j].name,
|
||||
flx: tableData[i].list[j].list[n].dicName,
|
||||
bdzgs: tableData[i].list[j].list[n].subCount,
|
||||
zdgs: tableData[i].list[j].list[n].devCount,
|
||||
jcdgs: tableData[i].list[j].list[n].lineCount,
|
||||
};
|
||||
arrData.push(map);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
////console.log(arrData)
|
||||
this.ptableDate = arrData;
|
||||
// this.powerquality()
|
||||
});
|
||||
},
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var today = year + "-" + month + "-" + day;
|
||||
arr.push(today);
|
||||
return arr;
|
||||
},
|
||||
//判断计算合并单元格
|
||||
objectOneMethod({ row, column, rowIndex, columnIndex }) {
|
||||
if (columnIndex === 1) {
|
||||
const _row = this.setTable(this.ptableDate).one[rowIndex];
|
||||
const _col = _row > 0 ? 1 : 0;
|
||||
return {
|
||||
rowspan: _row,
|
||||
colspan: _col,
|
||||
};
|
||||
}
|
||||
if (columnIndex === 2) {
|
||||
const _row = this.setTable(this.ptableDate).two[rowIndex];
|
||||
const _col = _row > 0 ? 1 : 0;
|
||||
return {
|
||||
rowspan: _row,
|
||||
colspan: _col,
|
||||
};
|
||||
}
|
||||
},
|
||||
//设置表格
|
||||
setTable(tableData) {
|
||||
let spanOneArr = [],
|
||||
spanTwoArr = [],
|
||||
concatOne = 0,
|
||||
concatTwo = 0;
|
||||
tableData.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
spanOneArr.push(1);
|
||||
spanTwoArr.push(1);
|
||||
} else {
|
||||
if (item.name === tableData[index - 1].name) {
|
||||
//第一列需合并相同内容的判断条件
|
||||
spanOneArr[concatOne] += 1;
|
||||
spanOneArr.push(0);
|
||||
} else {
|
||||
spanOneArr.push(1);
|
||||
concatOne = index;
|
||||
}
|
||||
if (item.lx === tableData[index - 1].lx) {
|
||||
//第二列和需合并相同内容的判断条件
|
||||
spanTwoArr[concatTwo] += 1;
|
||||
spanTwoArr.push(0);
|
||||
} else {
|
||||
spanTwoArr.push(1);
|
||||
concatTwo = index;
|
||||
}
|
||||
}
|
||||
});
|
||||
return {
|
||||
one: spanOneArr,
|
||||
two: spanTwoArr,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
249
src/views/componentschild/terminalstatus.vue
Normal file
249
src/views/componentschild/terminalstatus.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div ref="run" id="runstatus" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/harmonic/onlineData";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.run.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('terminalstatus').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 60 +'px'
|
||||
this.$refs.run.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
ydata1: [],
|
||||
ydata2: [],
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
var data = window.sessionStorage.getItem("Info");
|
||||
data = eval("(" + data + ")");
|
||||
this.deptIndex = data.deptId;
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('terminalstatus').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 60 +'px'
|
||||
this.$refs.run.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
var formData = {
|
||||
id: "333ff66a28acd0c68834f5a0d4ca68bd",
|
||||
searchBeginTime: this.time[0],
|
||||
searchEndTime: this.time[1],
|
||||
};
|
||||
api.getComFlagInfoData(formData).then((res) => {
|
||||
if (res.code === "A0000") {
|
||||
this.xdata = res.data.updateTime;
|
||||
|
||||
this.ydata = res.data.type;
|
||||
this.$nextTick(() => {
|
||||
this.runstatus();
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
runstatus() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("runstatus"));
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
// title: {
|
||||
// text: '运行状态'
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var res = params[0].name + "<br/>终端运行状态为：";
|
||||
var texts = "";
|
||||
if (params[0].value === 2 || params[0].value === "2") {
|
||||
texts = "退出";
|
||||
} else if (params[0].value === 0 || params[0].value === "0") {
|
||||
texts = "中断";
|
||||
} else if (params[0].value === 1 || params[0].value === "1") {
|
||||
texts = "正常";
|
||||
}
|
||||
res = res + texts;
|
||||
return res;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["运行状态"],
|
||||
right: "20px",
|
||||
top:'-5px',
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridf,
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
xAxis: {
|
||||
name: yan.EchartObject.date,
|
||||
type: "category",
|
||||
data: this.xdata,
|
||||
axisLine: {
|
||||
show: true,
|
||||
symbol: ["none", "arrow"],
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "状态",
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
symbol: ["none", "arrow"],
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
type:yan.EchartObject.type
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
},
|
||||
// 这里重新定义就可以
|
||||
formatter: function (value, index) {
|
||||
var texts = [];
|
||||
if (value === 2) {
|
||||
texts.push("退出");
|
||||
} else if (value === 0) {
|
||||
texts.push("中断");
|
||||
} else if (value === 1) {
|
||||
texts.push("正常");
|
||||
}
|
||||
return texts;
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "运行状态",
|
||||
type: "line",
|
||||
step: "end",
|
||||
data: this.ydata,
|
||||
itemStyle:{
|
||||
color:'#FF9900'
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.run, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
411
src/views/componentschild/terminaonlinetu.vue
Normal file
411
src/views/componentschild/terminaonlinetu.vue
Normal file
@@ -0,0 +1,411 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="height:30px;height:20px;position:absolute;right:10px">
|
||||
<el-tag style="background:#CC0000;width:30px;height:15px;border:1px solid #CC0000;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#CC0000;font-weight:400;;float:left">  在线率<60%   </span>
|
||||
<el-tag size="mini" style="background:#FFCC33;width:30px;height:15px;border:1px solid #FFCC33;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#FFCC33;font-weight:400;float:left" >  60%≤在线率<90%   </span>
|
||||
<el-tag style="background:#339966;width:30px;height:15px;border:1px solid #339966;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#339966;font-weight:400;float:left" >  在线率≥90%</span>
|
||||
</div>
|
||||
<div ref="onl" id="onlinerateechart" style="width: 100%;"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/onlinerate/onlinerate";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.onl.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('terminaonlinetu').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.onl.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1:{
|
||||
statisticalType:null,
|
||||
scale:null,
|
||||
manufacturer:null,
|
||||
loadType:null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
this.getclassificationData();
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('terminaonlinetu').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.onl.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData1.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData1.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData1.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData1.statisticalType = this.classificationData[0];
|
||||
},
|
||||
|
||||
queryData() {
|
||||
this.formData1.searchBeginTime=this.time[0]
|
||||
this.formData1.searchEndTime=this.time[1]
|
||||
api.getOnlineRateDataCensus(this.formData1).then((res) => {
|
||||
this.xdata = res.data.type;
|
||||
var data = res.data.single;
|
||||
var single = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i] == 3.14159 || data[i] == 0) {
|
||||
data[i] = 1;
|
||||
}
|
||||
single.push(data[i].toFixed(2));
|
||||
}
|
||||
this.ydata = single;
|
||||
this.onlinerateechart();
|
||||
});
|
||||
},
|
||||
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
onlinerateechart() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("onlinerateechart"));
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
title: {
|
||||
// text: "终端在线率",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: yan.EchartObject.titleNamefontSize1,
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
//subtext: '单位(%)'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips += params[0].name+'<br/>';
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 1) {
|
||||
tips += "在线率:暂无数据<br/>";
|
||||
} else {
|
||||
tips += "在线率:" + params[i].value + "<br/>";
|
||||
}
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
grid: yan.EchartObject.gridf,
|
||||
xAxis: [
|
||||
{
|
||||
name:yan.EchartObject.area,
|
||||
type: "category",
|
||||
data: this.xdata,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
//fontSize:10
|
||||
},
|
||||
rotate: 0,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
name: yan.EchartObject.nuit1,
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily:yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize:yan.EchartObject.xNamefontSize
|
||||
//fontSize:10
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
},
|
||||
],
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
series: [
|
||||
{
|
||||
name: this.time,
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.onLienRate1,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.onLienRate2,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value <= 60 && params.value>1 && params.value !== 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: yan.ColorObject.onLienRate3,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if ( params.value == 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ccc",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: "circle",
|
||||
data: [
|
||||
{
|
||||
name: "",
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.onLienRate1,
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.onLienRate1,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.onLienRate2,
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.onLienRate2,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: yan.ColorObject.onLienRate3,
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: yan.ColorObject.onLienRate3,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
data: this.ydata,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.onl, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
428
src/views/componentschild/terminaoptstatustu.vue
Normal file
428
src/views/componentschild/terminaoptstatustu.vue
Normal file
@@ -0,0 +1,428 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="height:30px;height:20px;position:absolute;right:10px">
|
||||
<el-tag style="background:#CC0000;width:30px;height:15px;border:1px solid #CC0000;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#CC0000;font-weight:400;;float:left">  在线率<60%   </span>
|
||||
<el-tag size="mini" style="background:#FFCC33;width:30px;height:15px;border:1px solid #FFCC33;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#FFCC33;font-weight:400;float:left" >  60%≤在线率<90%   </span>
|
||||
<el-tag style="background:#339966;width:30px;height:15px;border:1px solid #339966;float:left;margin-top:2px"></el-tag>
|
||||
<span style="color:#339966;font-weight:400;float:left" >  在线率≥90%</span>
|
||||
</div>
|
||||
<div ref="zdcj" id="mestutery" style="width: 100%"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import {
|
||||
getStatisticsmanufactorData,
|
||||
getTerminalRunningStatisticsData,
|
||||
} from "@/api/monitoringpointstatistics";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.zdcj.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('terminaoptstatustu').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.zdcj.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
formData1:{
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
serverName: "event-boot",
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
statisticalType: {},
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
this.getclassificationData();
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('terminaoptstatustu').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.zdcj.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData1.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData1.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData1.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Load_Type"]);
|
||||
this.formData1.statisticalType = this.classificationData[0];
|
||||
// console.log(this.form.statisticalType);
|
||||
},
|
||||
|
||||
queryData() {
|
||||
this.formData1.searchBeginTime=this.time[0]
|
||||
this.formData1.searchEndTime=this.time[1]
|
||||
let area = [];
|
||||
let PutIntoOperation = [];
|
||||
let hotstandby = [];
|
||||
let shutDown = [];
|
||||
let onlineRateData = [];
|
||||
getTerminalRunningStatisticsData(this.formData1).then(res=>{
|
||||
res.data.factory.areaInfo.forEach((item) => {
|
||||
area.push(item.areaName + "\n" + "(" + item.numberOfTerminals + ")");
|
||||
shutDown.push(item.shutdownRate);
|
||||
hotstandby.push(item.breaksRate);
|
||||
PutIntoOperation.push(item.normalRate);
|
||||
onlineRateData.push(item.onlineRate);
|
||||
});
|
||||
this.datategrity(area,shutDown,hotstandby,PutIntoOperation,onlineRateData)
|
||||
})
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
datategrity(area,shutDown,hotstandby,PutIntoOperation,onlineRateData) {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("mestutery"));
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let option = {
|
||||
title: {
|
||||
text: "终端厂家",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: yan.EchartObject.titleNamefontSize1,
|
||||
},
|
||||
},
|
||||
color: ['#0099CC', '#996600', '#cc0000'],
|
||||
legend: {
|
||||
data: ["投运", "热备用", "停运",''],
|
||||
|
||||
left: "45px",
|
||||
top: "-3px",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
itemWidth: 30,
|
||||
itemHeight: 15,
|
||||
itemGap: 25,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips += params[0].name + "</br/>";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.14159) {
|
||||
tips += params[i].seriesName + ":暂无数据<br/>";
|
||||
} else {
|
||||
tips += params[i].seriesName + ":" + params[i].value + "%<br/>";
|
||||
}
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
// legend: {
|
||||
// data: ['在线', '离线',],
|
||||
// left: '10%',
|
||||
// top:'5%',
|
||||
// textStyle: {
|
||||
// color: "#666666"
|
||||
// },
|
||||
// itemWidth: 15,
|
||||
// itemHeight: 10,
|
||||
// itemGap: 25
|
||||
// },
|
||||
grid: yan.EchartObject.grid13,
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
xAxis: {
|
||||
name: "终端厂家\n(终端个数)",
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// rotate: 30,
|
||||
align: "center",
|
||||
textStyle: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: '#fff',
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
type: "category",
|
||||
data: area,
|
||||
},
|
||||
yAxis: {
|
||||
name: yan.EchartObject.nuit1,
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: yan.EchartObject.yNamefontSize,
|
||||
},
|
||||
max:100,
|
||||
type: "value",
|
||||
axisLabel: { color: '#fff' },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#fff'],
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "投运",
|
||||
type: "bar",
|
||||
stack: "false",
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value != 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "#0099CC",
|
||||
},
|
||||
]);
|
||||
} else if ((params.value = 3.14159)) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ccc",
|
||||
},
|
||||
]);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: PutIntoOperation,
|
||||
},
|
||||
{
|
||||
name: "热备用",
|
||||
type: "bar",
|
||||
stack: "false",
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value != 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "#996600",
|
||||
},
|
||||
]);
|
||||
} else if ((params.value = 3.14159)) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ccc",
|
||||
},
|
||||
]);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: hotstandby,
|
||||
},
|
||||
{
|
||||
name: "停运",
|
||||
type: "bar",
|
||||
stack: "false",
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value != 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "#cc0000",
|
||||
},
|
||||
]);
|
||||
} else if ((params.value = 3.14159)) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ccc",
|
||||
},
|
||||
]);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: shutDown,
|
||||
},
|
||||
{
|
||||
name: "在线率",
|
||||
type: "bar",
|
||||
stack: "Ad",
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "#2e8b57",
|
||||
},
|
||||
]);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "#daa520",
|
||||
},
|
||||
]);
|
||||
} else if (params.value <= 60 && params.value != 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "#CC0000",
|
||||
},
|
||||
]);
|
||||
} else if ((params.value = 3.14159)) {
|
||||
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ccc",
|
||||
},
|
||||
]);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: onlineRateData,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
//由于网格布局拖拽放大缩小图表不能自适应，这里设置一个定时器使得echart加载为一个异步过程
|
||||
this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
}, 0);
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.zdcj, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
355
src/views/componentschild/timedistribution.vue
Normal file
355
src/views/componentschild/timedistribution.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div ref="glfb" id="eventChance" style="width: 100%; height: 235px"></div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
onLienRate1,
|
||||
onLienRate2,
|
||||
onLienRate3,
|
||||
colorB,
|
||||
} from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import yan from "@/assets/commjs/color";
|
||||
import { getProbabilityDistribution } from "@/api/monitoringpointStatistics/echart";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.glfb.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('timedistribution').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.glfb.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
//暂降类型模拟数据
|
||||
eventList: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
var data = window.sessionStorage.getItem("Info");
|
||||
data = eval("(" + data + ")");
|
||||
this.deptIndex = data.deptId;
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('timedistribution').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.glfb.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
var formData = {
|
||||
endTime: this.time[0],
|
||||
lineIndex: "9509492917be55860994cb5d1a9758bd",
|
||||
startTime: this.time[1],
|
||||
// timeFlag: 0,
|
||||
};
|
||||
getProbabilityDistribution(formData).then((res) => {
|
||||
this.eventList = res.data;
|
||||
this.$nextTick(() => {
|
||||
this.eventChance();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var today = year + "-" + month + "-" + day;
|
||||
var today2 = year + "-01-01";
|
||||
arr.push(today);
|
||||
arr.push(today2);
|
||||
return arr;
|
||||
},
|
||||
eventChance() {
|
||||
var eventValue = this.eventList.eventvalue;
|
||||
var pereventValue = this.eventList.pereventvalue;
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("eventChance"));
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
title: {
|
||||
text: "暂降幅值的概率分布函数",
|
||||
x: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
right: 50,
|
||||
data: ["概率分布", "占比"],
|
||||
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
},
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
// //restore: { show: true },
|
||||
saveAsImage: { show: true },
|
||||
// myFull: {
|
||||
// show: true,
|
||||
// title: "全屏查看",
|
||||
// icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
|
||||
// onclick: (e) => {
|
||||
// this.fullFlag = true;
|
||||
// let element = document.getElementById("eventChance2");
|
||||
|
||||
// if (element.requestFullScreen) {
|
||||
// // HTML W3C 提议
|
||||
// element.requestFullScreen();
|
||||
// } else if (element.msRequestFullscreen) {
|
||||
// // IE11
|
||||
// element.msRequestFullScreen();
|
||||
// } else if (element.webkitRequestFullScreen) {
|
||||
// // Webkit (works in Safari5.1 and Chrome 15)
|
||||
// element.webkitRequestFullScreen();
|
||||
// } else if (element.mozRequestFullScreen) {
|
||||
// // Firefox (works in nightly)
|
||||
// element.mozRequestFullScreen();
|
||||
// }
|
||||
// // 退出全屏
|
||||
// if (element.requestFullScreen) {
|
||||
// document.exitFullscreen();
|
||||
// } else if (element.msRequestFullScreen) {
|
||||
// document.msExitFullscreen();
|
||||
// } else if (element.webkitRequestFullScreen) {
|
||||
// document.webkitCancelFullScreen();
|
||||
// } else if (element.mozRequestFullScreen) {
|
||||
// document.mozCancelFullScreen();
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
//提示框组件
|
||||
trigger: "axis",
|
||||
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips += "暂降幅值" + " " + " " + " " + params[0].name + "</br/>";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
tips += params[i].seriesName + ":" + " " + " " + " " + params[i].value + "%<br/>";
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0,
|
||||
},
|
||||
calculable: true,
|
||||
grid: yan.EchartObject.grid14,
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
name: "暂降\n幅值(%)",
|
||||
nameGap: 10,
|
||||
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: "#fff",
|
||||
fontSize: yan.EchartObject.xNamefontSize,
|
||||
},
|
||||
data: [
|
||||
"0",
|
||||
"10%",
|
||||
"20%",
|
||||
"30%",
|
||||
"40%",
|
||||
"50%",
|
||||
"60%",
|
||||
"70%",
|
||||
"80%",
|
||||
"90%",
|
||||
"100%",
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "概率分布",
|
||||
|
||||
nameTextStyle: {
|
||||
fontSize: 15,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
formatter: "{value}%",
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
fontSize: yan.EchartObject.yNamefontSize,
|
||||
},
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: "#fff",
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
name: "占比",
|
||||
|
||||
nameTextStyle: {
|
||||
fontSize: 15,
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value}%",
|
||||
color: "#fff",
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
fontSize: yan.EchartObject.yNamefontSize,
|
||||
},
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: "#fff",
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "概率分布",
|
||||
type: "line",
|
||||
data: eventValue,
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[0] },
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "占比",
|
||||
type: "bar",
|
||||
data: pereventValue,
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[1] },
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.glfb, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
231
src/views/componentschild/voltagecause.vue
Normal file
231
src/views/componentschild/voltagecause.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div ref="zjj" id="zjyy" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
onLienRate1,
|
||||
onLienRate2,
|
||||
onLienRate3,
|
||||
colorB,
|
||||
} from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getEventReason } from "@/api/monitoringpointStatistics/echart";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.zjj.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('voltagecause').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.zjj.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
formData1:{
|
||||
statisticalType:{},
|
||||
scale:null,
|
||||
manufacturer:null,
|
||||
loadType:null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
timeFlag: 1,
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
//暂降原因模拟数据
|
||||
initCauseData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
// this.getclassificationData();
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('voltagecause').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.zjj.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData1.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData1.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData1.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData1.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
this.formData1.searchBeginTime=this.time[0]
|
||||
this.formData1.searchEndTime=this.time[1]
|
||||
|
||||
getEventReason(this.formData1).then((res) => {
|
||||
this.initCauseData = res.data.reason;
|
||||
this.$nextTick(()=>{
|
||||
this.initCause();
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
initCause() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("zjyy"));
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
legend: {
|
||||
type: "scroll",
|
||||
orient: "vertical",
|
||||
left: 10,
|
||||
top: "5%",
|
||||
color:'#fff',
|
||||
textStyle:{
|
||||
color:'#fff',
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||||
confine: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '暂降原因',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: { borderColor: '#fff', borderWidth: 2 },
|
||||
color: echartsColor.FigureColor,
|
||||
label: {
|
||||
// alignTo: 'labelLine', // ! 文字对齐方式
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#fff",
|
||||
},
|
||||
formatter: function (e) {
|
||||
let {
|
||||
data: { value, name },
|
||||
} = e;
|
||||
return `{x|}{a|${name}}\n{b|${value}个}{c|}`;
|
||||
},
|
||||
minMargin: 5,
|
||||
lineHeight: 15,
|
||||
rich: {
|
||||
x: { width: 10, height: 10, backgroundColor: 'inherit', borderRadius: 5 },
|
||||
a: { fontSize: 14, color: 'inherit', padding: [0, 20, 0, 8] },
|
||||
b: { fontSize: 12, align: 'left', color: '#fff', padding: [8, 0, 0, 18] },
|
||||
c: { fontSize: 12, align: 'left', color: '#fff', padding: [8, 0, 0, 8] },
|
||||
},
|
||||
},
|
||||
data: this.initCauseData
|
||||
},
|
||||
]
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.zjj, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
365
src/views/componentschild/voltagesagdensity.vue
Normal file
365
src/views/componentschild/voltagesagdensity.vue
Normal file
@@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<div ref="dis" id="disec" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
onLienRate1,
|
||||
onLienRate2,
|
||||
onLienRate3,
|
||||
colorB,
|
||||
} from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getCoords } from "@/api/monitoringpointStatistics/echart";
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-gl";
|
||||
require("echarts/lib/chart/bar.js");
|
||||
require("echarts/lib/component/tooltip.js");
|
||||
require("echarts/lib/component/title.js");
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.$refs.dis.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('voltagesagdensity').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 60 +'px'
|
||||
this.$refs.dis.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
statisticalType: null,
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
trdata: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
var data = window.sessionStorage.getItem("Info");
|
||||
data = eval("(" + data + ")");
|
||||
this.deptIndex = data.deptId;
|
||||
this.getIndexType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('voltagesagdensity').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 60 +'px'
|
||||
this.$refs.dis.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
queryData() {
|
||||
var formData = {
|
||||
lineIndex: "af1fe3d9cf15891ce52d2feb8aaa46f8",
|
||||
startTime: this.time[0],
|
||||
endTime: this.time[1],
|
||||
};
|
||||
getCoords(formData).then((res) => {
|
||||
this.trdata = res.data;
|
||||
this.$nextTick(() => {
|
||||
this.disec();
|
||||
});
|
||||
});
|
||||
},
|
||||
getIndexType() {
|
||||
var code = "Indicator_Type";
|
||||
this.classificationData = dicData(code, [
|
||||
"PLPC",
|
||||
"DYPC",
|
||||
"SXDYBPHD",
|
||||
"CSSB",
|
||||
"FXDL",
|
||||
"JXBDY",
|
||||
]);
|
||||
this.statisticalType = this.classificationData[0];
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
disec() {
|
||||
var xx;
|
||||
var yy;
|
||||
var zz;
|
||||
var datalistmd = [];
|
||||
for (var i = 0; i < this.trdata.length; i++) {
|
||||
xx = this.trdata[i].x;
|
||||
yy = this.trdata[i].y;
|
||||
zz = this.trdata[i].z;
|
||||
datalistmd[i] = [xx, yy, zz];
|
||||
}
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("disec"));
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
// background: "#fff",
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
},
|
||||
title: {
|
||||
// text: "暂降密度图",
|
||||
x: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
// toolbox: {
|
||||
// show: true,
|
||||
// feature: {
|
||||
// dataView: { show: true },
|
||||
// dataZoom: { show: true },
|
||||
// //restore: { show: true },
|
||||
// saveAsImage: { show: true },
|
||||
// myFull: {
|
||||
// show: true,
|
||||
// title: "全屏查看",
|
||||
// icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
|
||||
// onclick: (e) => {
|
||||
// this.fullFlag = true;
|
||||
// let element = document.getElementById("main");
|
||||
|
||||
// if (element.requestFullScreen) {
|
||||
// // HTML W3C 提议
|
||||
// element.requestFullScreen();
|
||||
// } else if (element.msRequestFullscreen) {
|
||||
// // IE11
|
||||
// element.msRequestFullScreen();
|
||||
// } else if (element.webkitRequestFullScreen) {
|
||||
// // Webkit (works in Safari5.1 and Chrome 15)
|
||||
// element.webkitRequestFullScreen();
|
||||
// } else if (element.mozRequestFullScreen) {
|
||||
// // Firefox (works in nightly)
|
||||
// element.mozRequestFullScreen();
|
||||
// }
|
||||
// // 退出全屏
|
||||
// if (element.requestFullScreen) {
|
||||
// document.exitFullscreen();
|
||||
// } else if (element.msRequestFullScreen) {
|
||||
// document.msExitFullscreen();
|
||||
// } else if (element.webkitRequestFullScreen) {
|
||||
// document.webkitCancelFullScreen();
|
||||
// } else if (element.mozRequestFullScreen) {
|
||||
// document.mozCancelFullScreen();
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
visualMap: {
|
||||
max: 20,
|
||||
show: false,
|
||||
inRange: {
|
||||
color: ["#313695", "#00BB00", "#ff8000", "#a50026"],
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
type: "category",
|
||||
name: "剩余电压(%)",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
left: "0%",
|
||||
},
|
||||
data: [
|
||||
"0-10",
|
||||
"10-20",
|
||||
"20-30",
|
||||
"30-40",
|
||||
"40-50",
|
||||
"50-60",
|
||||
"60-70",
|
||||
"70-80",
|
||||
"80-90",
|
||||
"90-100",
|
||||
],
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
},
|
||||
yAxis3D: {
|
||||
type: "category",
|
||||
name: "持续时间(cyc)",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
left: "0%",
|
||||
},
|
||||
data: [
|
||||
"1cyc",
|
||||
"2cyc",
|
||||
"3cyc",
|
||||
"4cyc",
|
||||
"5cyc",
|
||||
"6~10cyc",
|
||||
"10~20cyc",
|
||||
"20~30cyc",
|
||||
"30~60cyc",
|
||||
],
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
},
|
||||
zAxis3D: {
|
||||
type: "value",
|
||||
splitNumber: 10,
|
||||
minInterval: 10,
|
||||
name: "次数",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
left: "0%",
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
},
|
||||
grid3D: {
|
||||
boxWidth: 200,
|
||||
boxDepth: 80,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2,
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.3,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar3D",
|
||||
data: datalistmd.map(function (item) {
|
||||
return {
|
||||
value: [item[0], item[1], item[2]],
|
||||
};
|
||||
}),
|
||||
shading: "realistic",
|
||||
label: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
opacity: 1,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
line: {
|
||||
color: "#fff",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.dis, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
160
src/views/componentschild/voltagesagtable.vue
Normal file
160
src/views/componentschild/voltagesagtable.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div style="padding: 0px">
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
stripe
|
||||
:data="disdipTable"
|
||||
border
|
||||
style="width: 100%"
|
||||
:height="vh"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="剩余电压"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column label="持续时间" align="center">
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="20ms"
|
||||
prop="twentyMs"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="100ms"
|
||||
prop="oneHundredMs"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="500ms"
|
||||
prop="fiveHundredMs"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="1s"
|
||||
prop="oneS"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="2s"
|
||||
prop="threeS"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="20s"
|
||||
prop="twentyS"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="60s"
|
||||
prop="sixtyS"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="180s"
|
||||
prop="oneEightyS"
|
||||
></el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { eventDisdip } from "@/api/monitoringpointStatistics/echart";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.vh = document.getElementById("conmentId").offsetHeight - 50;
|
||||
this.queryData();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("voltagesagtable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
this.queryData();
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disdipTable: [],
|
||||
vh: null,
|
||||
time: this.timefamt(),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("voltagesagtable").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
queryData() {
|
||||
let form = {
|
||||
lineIndex: "0a5a5f475914c0e08c025e8f00e832f3",
|
||||
startTime: this.time[0],
|
||||
endTime: this.time[1],
|
||||
};
|
||||
eventDisdip(form).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
this.disdipTable = res.data;
|
||||
}
|
||||
// this.powerquality()
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.xshou {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
231
src/views/componentschild/voltagetype.vue
Normal file
231
src/views/componentschild/voltagetype.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div ref="zjt" id="zjyyt" style="width: 100%;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
onLienRate1,
|
||||
onLienRate2,
|
||||
onLienRate3,
|
||||
colorB,
|
||||
} from "@/assets/commjs/color";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import { getEventReason } from "@/api/monitoringpointStatistics/echart";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default: null,
|
||||
},
|
||||
height2:{
|
||||
type:Number,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a.h == 24) {
|
||||
this.$refs.zjt.style.height = document.getElementById('conmentId').offsetHeight -50 + 'px';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a==8 || a==9 || a==16) {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('voltagetype').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.zjt.style.height = height
|
||||
},200)
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
formData1:{
|
||||
statisticalType:{},
|
||||
scale:null,
|
||||
manufacturer:null,
|
||||
loadType:null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
timeFlag: 1,
|
||||
deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
voltageleveloption:[],
|
||||
terminaloption:[],
|
||||
interfereoption:[],
|
||||
classificationData:[],
|
||||
classificationData: [],
|
||||
time: this.timefamt(),
|
||||
//暂降原因模拟数据
|
||||
initCauseData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
// this.getclassificationData();
|
||||
this.getLoadType();
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let str = document.getElementById('voltagetype').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50 +'px'
|
||||
this.$refs.zjt.style.height = height
|
||||
},200)
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData1.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData1.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData1.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData1.statisticalType = this.classificationData[0];
|
||||
},
|
||||
queryData() {
|
||||
this.formData1.searchBeginTime=this.time[0]
|
||||
this.formData1.searchEndTime=this.time[1]
|
||||
|
||||
getEventReason(this.formData1).then((res) => {
|
||||
this.initCauseData = res.data.type;
|
||||
this.$nextTick(()=>{
|
||||
this.initCause();
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day ;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
initCause() {
|
||||
const echarts = require("echarts");
|
||||
var myChartes = echarts.init(document.getElementById("zjyyt"));
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
legend: {
|
||||
type: "scroll",
|
||||
orient: "vertical",
|
||||
left: 10,
|
||||
top: "5%",
|
||||
color:'#fff',
|
||||
textStyle:{
|
||||
color:'#fff',
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||||
confine: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '暂降类型',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: { borderColor: '#fff', borderWidth: 2 },
|
||||
color: echartsColor.FigureColor,
|
||||
label: {
|
||||
// alignTo: 'labelLine', // ! 文字对齐方式
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#fff",
|
||||
},
|
||||
formatter: function (e) {
|
||||
let {
|
||||
data: { value, name },
|
||||
} = e;
|
||||
return `{x|}{a|${name}}\n{b|${value}个}{c|}`;
|
||||
},
|
||||
minMargin: 5,
|
||||
lineHeight: 15,
|
||||
rich: {
|
||||
x: { width: 10, height: 10, backgroundColor: 'inherit', borderRadius: 5 },
|
||||
a: { fontSize: 14, color: 'inherit', padding: [0, 20, 0, 8] },
|
||||
b: { fontSize: 12, align: 'left', color: '#fff', padding: [8, 0, 0, 18] },
|
||||
c: { fontSize: 12, align: 'left', color: '#fff', padding: [8, 0, 0, 8] },
|
||||
},
|
||||
},
|
||||
data: this.initCauseData
|
||||
},
|
||||
]
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.zjt, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
471
src/views/componentschild/wtzbcbmxbg.vue
Normal file
471
src/views/componentschild/wtzbcbmxbg.vue
Normal file
@@ -0,0 +1,471 @@
|
||||
<template>
|
||||
<div style="padding: 0px">
|
||||
<el-col :span="24">
|
||||
<vxe-table
|
||||
:data="totalData"
|
||||
:height="vh"
|
||||
border
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
size="mini"
|
||||
ref="Steadystateschedule"
|
||||
v-loading="isLoading1"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
v-for="(item, index) in tableHeaderTotal"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
show-overflow
|
||||
>
|
||||
<!-- <template slot-scope="scope"> -->
|
||||
<!-- <span v-if="item.label == '指标趋势图'">
|
||||
<el-button type="primary" size="mini" icon="el-icon-view" @click="trendChartFn(scope.row)"
|
||||
>查看</el-button
|
||||
></span
|
||||
> -->
|
||||
<!-- <span
|
||||
v-if="item.label == '指标趋势图'"
|
||||
type="primary"
|
||||
size="small"
|
||||
style="color: blue; text-decoration: underline; cursor: pointer"
|
||||
@click="trendChartFn(scope.row)"
|
||||
>查看</span
|
||||
>
|
||||
<span v-else>{{ scope.row[item.prop] }}</span>
|
||||
</template> -->
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
v-for="(item, index) in item.children"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
>
|
||||
<!-- <template v-for="(item, index) in item.children">
|
||||
<vxe-table-column
|
||||
:field="item.prop"
|
||||
:label="item.label"
|
||||
:key="index"
|
||||
></vxe-table-column>
|
||||
</template> -->
|
||||
</vxe-table-column>
|
||||
</vxe-table-colgroup>
|
||||
</vxe-table>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getRMpPartHarmonicDetail,
|
||||
getPmsPowerrInfoWithInOrg,
|
||||
getRMpPartHarmonicDetailIcon,
|
||||
} from "@/api/Statistical-analysis/steadyStateIndicators/steadyStateIndicators";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.vh = document.getElementById("conmentId").offsetHeight - 50;
|
||||
this.queryData();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("wtzbcbmxbg").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
this.queryData();
|
||||
}, 200);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading1:false,
|
||||
disdipTable: [],
|
||||
totalData:[],
|
||||
vh: null,
|
||||
time: this.timefamt(),
|
||||
//区域超标统计
|
||||
tableHeaderTotal: [
|
||||
{ prop: "orgName", label: "所属单位", width: 180 },
|
||||
{ prop: "powerrName", label: "所属变电站", width: 120 },
|
||||
{ prop: "monitorVoltageName", label: "监测点电压等级", width: 180 },
|
||||
{ prop: "measurementPointName", label: "监测点名称", width: 120 },
|
||||
// { prop: "measurementPointId", label: "监测点编号", width: 120 },
|
||||
{ prop: "measurementOverDay", label: "监测点总超标天数", width: 160 },
|
||||
// / { prop: "onlineMonitoring", label: "指标趋势图", width: 120 },
|
||||
{ prop: "freqOverDay", label: "频率偏差", width: 120 },
|
||||
{
|
||||
label: "电压偏差",
|
||||
children: [
|
||||
{
|
||||
prop: "vdevUpOverDay",
|
||||
label: "上偏差",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "vdevLowOverDay",
|
||||
label: "下偏差",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "vdevOverDay",
|
||||
label: "合计",
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{ prop: "vthdOverDay", label: "电压总谐波畸变率", width: 160 },
|
||||
{ prop: "voverDay", label: "谐波电压", width: 120 },
|
||||
{ prop: "ioverDay", label: "谐波电流", width: 120 },
|
||||
{
|
||||
label: "谐波电压含有率",
|
||||
children: [
|
||||
{
|
||||
prop: "v2OverDay",
|
||||
label: "2次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v3OverDay",
|
||||
label: "3次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v4OverDay",
|
||||
label: "4次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v5OverDay",
|
||||
label: "5次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v6OverDay",
|
||||
label: "6次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v7OverDay",
|
||||
label: "7次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v8OverDay",
|
||||
label: "8次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v9OverDay",
|
||||
label: "9次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v10OverDay",
|
||||
label: "10次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v11OverDay",
|
||||
label: "11次",
|
||||
width:80,
|
||||
},
|
||||
{
|
||||
prop: "v12OverDay",
|
||||
label: "12次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v13OverDay",
|
||||
label: "13次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v14OverDay",
|
||||
label: "14次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v15OverDay",
|
||||
label: "15次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v16OverDay",
|
||||
label: "16次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v17OverDay",
|
||||
label: "17次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v18OverDay",
|
||||
label: "18次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v19OverDay",
|
||||
label: "19次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v20OverDay",
|
||||
label: "20次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v21OverDay",
|
||||
label: "21次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v22OverDay",
|
||||
label: "22次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v23OverDay",
|
||||
label: "23次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v24OverDay",
|
||||
label: "24次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v25OverDay",
|
||||
label: "25次",
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "谐波电流含有率",
|
||||
children: [
|
||||
{
|
||||
prop: "i2OverDay",
|
||||
label: "2次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i3OverDay",
|
||||
label: "3次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i4OverDay",
|
||||
label: "4次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i5OverDay",
|
||||
label: "5次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i6OverDay",
|
||||
label: "6次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i7OverDay",
|
||||
label: "7次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i8OverDay",
|
||||
label: "8次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i9OverDay",
|
||||
label: "9次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i10OverDay",
|
||||
label: "10次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i11OverDay",
|
||||
label: "11次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i12OverDay",
|
||||
label: "12次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i13OverDay",
|
||||
label: "13次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i14OverDay",
|
||||
label: "14次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i15OverDay",
|
||||
label: "15次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i16OverDay",
|
||||
label: "16次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i17OverDay",
|
||||
label: "17次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i18OverDay",
|
||||
label: "18次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i19OverDay",
|
||||
label: "19次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i20OverDay",
|
||||
label: "20次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i21OverDay",
|
||||
label: "21次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i22OverDay",
|
||||
label: "22次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i23OverDay",
|
||||
label: "23次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i24OverDay",
|
||||
label: "24次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i25OverDay",
|
||||
label: "25次",
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{ prop: "inuharmOverDay", label: "间谐波电压含有率", width: 160 },
|
||||
{ prop: "unbalanceOverDay", label: "三相电压不平衡度", width: 160 },
|
||||
{ prop: "inegOverDay", label: "负序电流", width: 120 },
|
||||
{ prop: "flickerOverDay", label: "长时闪变", width: 120 },
|
||||
],
|
||||
form: {
|
||||
endTime: "",
|
||||
id: "",
|
||||
startTime: "",
|
||||
monitorName: "",
|
||||
voltageLevels: [],
|
||||
powerrIds: [],
|
||||
type: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
this.form.id = JSON.parse(window.sessionStorage.getItem("Info")).deptId;
|
||||
this.queryData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById("wtzbcbmxbg").style.height;
|
||||
let strsec = str.split("p");
|
||||
let height = parseInt(strsec) - 50;
|
||||
this.vh = height+10;
|
||||
}, 200);
|
||||
},
|
||||
methods: {
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
//电压等级
|
||||
var code = "Dev_Voltage";
|
||||
this.voltageLevel = dicData(code, []);
|
||||
this.voltageLevel.forEach((item) => {
|
||||
this.form.voltageLevels.push(item.id);
|
||||
});
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day < 10 ? "0" + day : day;
|
||||
var arr = [];
|
||||
var time1 = year + "-" + month + "-01";
|
||||
arr.push(time1);
|
||||
var time2 = year + "-" + month + "-" + day;
|
||||
arr.push(time2);
|
||||
return arr;
|
||||
},
|
||||
// 表格查询
|
||||
queryData() {
|
||||
this.isLoading1 = true;
|
||||
this.form.startTime = this.time[0];
|
||||
this.form.endTime = this.time[1];
|
||||
getRMpPartHarmonicDetail(this.form).then((res) => {
|
||||
this.isLoading1 = false;
|
||||
this.totalData = res.data.splice(0,20)
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.xshou {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
196
src/views/componentschild/wtzbtjbg.vue
Normal file
196
src/views/componentschild/wtzbtjbg.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div style="padding: 0px">
|
||||
<el-col :span="24">
|
||||
<vxe-table
|
||||
:data="totalData"
|
||||
:height="vh"
|
||||
border
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
size="mini"
|
||||
ref="Regionalstatistics"
|
||||
v-loading="isLoading1"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderTotal">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
show-overflow
|
||||
>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
>
|
||||
<!-- <template v-for="(item, index) in item.children">
|
||||
<vxe-table-column :field="item.prop" :title="item.label" :key="index" ></vxe-table-column>
|
||||
</template> -->
|
||||
</vxe-table-column>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
import { getAllRStatHarmonicOrg } from '@/api/Statistical-analysis/steadyStateIndicators/steadyStateIndicators'
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.vh = document.getElementById('conmentId').offsetHeight - 50
|
||||
this.queryData()
|
||||
} else {
|
||||
return
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById('wtzbtjbg').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50
|
||||
this.vh = height + 10
|
||||
this.queryData()
|
||||
}, 200)
|
||||
} else {
|
||||
return
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
totalData: [],
|
||||
jianceduixiangOptions: [],
|
||||
isLoading1: false,
|
||||
//区域超标统计
|
||||
tableHeaderTotal: [
|
||||
{ prop: 'orgName', label: '单位', width: '140' },
|
||||
{ prop: 'measurementTypeClassName', label: '监测对象类别', width: '110' },
|
||||
{
|
||||
label: '有效接入监测点数',
|
||||
children: [
|
||||
{
|
||||
prop: 'effectiveMeasurementAverage',
|
||||
label: '日均'
|
||||
},
|
||||
{
|
||||
prop: 'effectiveMeasurementAccrued',
|
||||
label: '累计'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '超标监测点数',
|
||||
children: [
|
||||
{
|
||||
prop: 'overLimitMeasurementAverage',
|
||||
label: '日均'
|
||||
},
|
||||
{
|
||||
prop: 'overLimitMeasurementAccrued',
|
||||
label: '累计'
|
||||
}
|
||||
]
|
||||
},
|
||||
{ prop: 'averageOverDay', label: '平均超标天数' }
|
||||
],
|
||||
vh: null,
|
||||
time: this.timefamt(),
|
||||
form: {
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
type: 3,
|
||||
id: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.jianceduixiangOptions = dicData('Monitoring_Labels', [])
|
||||
|
||||
this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
this.queryData()
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById('wtzbtjbg').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50
|
||||
this.vh = height + 10
|
||||
}, 200)
|
||||
},
|
||||
methods: {
|
||||
timefamt() {
|
||||
var date = new Date()
|
||||
var year = date.getFullYear()
|
||||
var month = date.getMonth() + 1
|
||||
var day = date.getDate()
|
||||
month = month > 9 ? month : '0' + month
|
||||
day = day < 10 ? '0' + day : day
|
||||
var arr = []
|
||||
var time1 = year + '-' + month + '-01'
|
||||
arr.push(time1)
|
||||
var time2 = year + '-' + month + '-' + day
|
||||
arr.push(time2)
|
||||
return arr
|
||||
},
|
||||
queryData() {
|
||||
this.isLoading1 = true
|
||||
this.form.startTime = this.time[0]
|
||||
this.form.endTime = this.time[1]
|
||||
//方法调用获取暂态事件统计数据接口
|
||||
getAllRStatHarmonicOrg(this.form).then(res => {
|
||||
if (res.data == []) {
|
||||
this.total = 0
|
||||
} else {
|
||||
this.isLoading1 = false
|
||||
res.data.forEach(item => {
|
||||
for (let key in item) {
|
||||
if (key === 'measurementTypeClass') {
|
||||
item['measurementTypeClassName'] =
|
||||
this.jianceduixiangOptions.find(item2 => item2.id === item[key]) &&
|
||||
this.jianceduixiangOptions.find(item2 => item2.id === item[key]).label
|
||||
}
|
||||
}
|
||||
})
|
||||
this.totalData = res.data
|
||||
// this.total = this.totalData.length;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.xshou {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
185
src/views/componentschild/zwqyzbwqt.vue
Normal file
185
src/views/componentschild/zwqyzbwqt.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div style="padding: 0px">
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
stripe
|
||||
:data="tableData"
|
||||
border
|
||||
v-loading="konzhi"
|
||||
header-cell-class-name="table_header"
|
||||
element-loading-text="拼命加载中"
|
||||
:height="vh"
|
||||
>
|
||||
<el-table-column align="center" prop="name" label="名称/(监测点个数)"></el-table-column>
|
||||
<el-table-column align="center" prop="data" :label="changeName">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.data == 3.14159" type="primary" size="small">暂无数据</span>
|
||||
<span v-else type="primary" size="small">{{ scope.row.data }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="data" label="评估">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.data == 3.14159" type="primary" size="small">暂无评估</span>
|
||||
<span v-else-if="0 <= scope.row.data && scope.row.data < 1" type="primary" size="small">
|
||||
无污染
|
||||
</span>
|
||||
<span v-else-if="1 <= scope.row.data && scope.row.data < 1.2" type="success" size="small">
|
||||
轻微污染
|
||||
</span>
|
||||
<span v-else-if="1.2 <= scope.row.data && scope.row.data < 1.6" type="primary" size="small">
|
||||
轻度污染
|
||||
</span>
|
||||
<span v-else-if="1.6 <= scope.row.data && scope.row.data < 2" type="success" size="small">
|
||||
中度污染
|
||||
</span>
|
||||
<span v-else-if="2 <= scope.row.data && scope.row.data" type="primary" size="small">
|
||||
重度污染
|
||||
</span>
|
||||
<span v-else-if="scope.row.data == -1" type="primary" size="small">暂无评估</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import api from '@/api/pollution/pollution'
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
item2: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
height2: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
height2(a, b) {
|
||||
if (a == 24) {
|
||||
this.vh = document.getElementById('conmentId').offsetHeight - 50
|
||||
this.queryData()
|
||||
} else {
|
||||
return
|
||||
}
|
||||
},
|
||||
height(a, b) {
|
||||
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById('zwqyzbwqt').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50
|
||||
this.vh = height + 10
|
||||
this.queryData()
|
||||
}, 200)
|
||||
} else {
|
||||
return
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
konzhi: false,
|
||||
changeName: '谐波电压(%)',
|
||||
tableData: [],
|
||||
vh: null,
|
||||
time: this.timefamt(),
|
||||
formData: {
|
||||
deptIndex: '',
|
||||
id: '',
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
reportFlag: 3,
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
statisticalType: [],
|
||||
type: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getIndexType()
|
||||
this.formData.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
this.queryData()
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
let str = document.getElementById('zwqyzbwqt').style.height
|
||||
let strsec = str.split('p')
|
||||
let height = parseInt(strsec) - 50
|
||||
this.vh = height + 10
|
||||
}, 200)
|
||||
},
|
||||
methods: {
|
||||
//字典获取数据指标类型
|
||||
getIndexType() {
|
||||
var code = 'Pollution_Statis'
|
||||
this.classificationData = dicData(code, [
|
||||
'Freq_Dev',
|
||||
'V_Dev',
|
||||
'V_Unbalance',
|
||||
'V_Unbalance',
|
||||
'I_Neg',
|
||||
'V_Inharm',
|
||||
'Plt'
|
||||
])
|
||||
// console.log("🚀 ~ file: zwqyzbwqt.vue:131 ~ getIndexType ~ this.classificationData:", this.classificationData)
|
||||
this.formData.statisticalType = this.classificationData[1]
|
||||
},
|
||||
// 字典数据过滤
|
||||
formFilter(row, column) {
|
||||
if (column.property == 'voltageLevel') {
|
||||
let title = ''
|
||||
dicData('Dev_Voltage', []).forEach(item => {
|
||||
if (item.id == row.voltageLevel) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
return title
|
||||
}
|
||||
},
|
||||
timefamt() {
|
||||
var date = new Date()
|
||||
var year = date.getFullYear()
|
||||
var month = date.getMonth() + 1
|
||||
var day = date.getDate()
|
||||
month = month > 9 ? month : '0' + month
|
||||
day = day < 10 ? '0' + day : day
|
||||
var arr = []
|
||||
var time1 = year + '-' + month + '-01'
|
||||
arr.push(time1)
|
||||
var time2 = year + '-' + month + '-' + day
|
||||
arr.push(time2)
|
||||
return arr
|
||||
},
|
||||
queryData() {
|
||||
this.konzhi = true
|
||||
this.formData.searchBeginTime = this.time[0]
|
||||
this.formData.searchEndTime = this.time[1]
|
||||
|
||||
api.deptSubstationRelations(this.formData).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
this.tableData = res.data
|
||||
this.konzhi = false
|
||||
}
|
||||
// this.powerquality()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.xshou {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user