谐波监测-区域-终端在线率页面迁移
This commit is contained in:
zhujiyan
618
src/views/pqs/harmonicMonitoring/area/terminalonlinerate.vue
Normal file
618
src/views/pqs/harmonicMonitoring/area/terminalonlinerate.vue
Normal file
@@ -0,0 +1,618 @@
|
||||
<template>
|
||||
<div class="pd10" v-loading="loading" element-loading-text="数据加载中">
|
||||
<!-- <transition appear>
|
||||
<div v-show="dd" class="dhys">
|
||||
<timepicker style="right:0;margin-left: -0.5%;"
|
||||
:id="id"
|
||||
@querfromdata="querfromdata"
|
||||
:interval="interval"
|
||||
:treenode="treenode"
|
||||
:tablename="tablename"
|
||||
:name="name"
|
||||
:path="path"
|
||||
:dataTree="dataTree"
|
||||
></timepicker>
|
||||
</div>
|
||||
</transition>
|
||||
-->
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<!-- <div style="display: flex;"> -->
|
||||
|
||||
<!-- <div style="display: flex;justify-content: space-between;flex-grow:1;"> -->
|
||||
<el-form-item>
|
||||
<timepicker
|
||||
:id="id" ref="timezd"
|
||||
:interval="interval"
|
||||
:treenode="treenode"
|
||||
:tablename="tablename"
|
||||
:name="name"
|
||||
:path="path"
|
||||
:dataTree="dataTree"
|
||||
></timepicker>
|
||||
<!-- <el-button class="el-icon-d-arrow-right" type="primary" round @click="timechange">时间选择</el-button> -->
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="querfromdata" type="primary" icon="el-icon-search" >查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="text" @click="closeHandle">条件筛选<i :class="!view?'el-icon-arrow-down':'el-icon-arrow-right'"></i></el-button>
|
||||
</el-form-item>
|
||||
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
</el-form>
|
||||
|
||||
<div class='container' id='container'>
|
||||
<i @click="closeHandle" class="el-icon-circle-close coles"></i>
|
||||
<el-form :inline="true" :model="formData" label-width="90px" class="">
|
||||
<el-form-item v-if="this.quyunames != undefined">
|
||||
<el-switch
|
||||
class="tableScopeSwitch"
|
||||
:active-value="2"
|
||||
:inactive-value="1"
|
||||
@change="handleStatusChange"
|
||||
:active-text="quyuname"
|
||||
:inactive-text="quyunames"
|
||||
inactive-color="#007878"
|
||||
active-color="#666666"
|
||||
v-model="this.formData.monitorFlag"
|
||||
>
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="formData.statisticalType"
|
||||
@change="changeclasss"
|
||||
placeholder="请选择统计类型"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
code: item.code,
|
||||
sort: item.sort,
|
||||
}"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="区域选择:">
|
||||
<el-select
|
||||
ref="select1"
|
||||
v-model="deptName"
|
||||
placeholder="请选择所属部门区域"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option :value="deptIndex" style="height: auto">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
accordion
|
||||
:default-expanded-keys="idArr"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<span class="span-ellipsis" slot-scope="{ node, data }">
|
||||
<span :title="data.name">{{ data.name }}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:" >
|
||||
<el-select
|
||||
v-model="formData.manufacturer"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
placeholder="请选择终端厂家"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort,
|
||||
}"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="24" style="margin-top: 0%">
|
||||
<el-tabs :style="'height:'+vh"
|
||||
type="border-card"
|
||||
v-model="activeName"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane label="终端状态统计表" name="tab1">
|
||||
|
||||
<terminalonlineratetable
|
||||
v-if="activeName == 'tab1'"
|
||||
:classvalue="classt"
|
||||
:tableData="tableData"
|
||||
:loading="loading"
|
||||
></terminalonlineratetable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="终端状态统计图" name="tab2">
|
||||
|
||||
<!-- <span style="font-weight: bold;color:#333;position: absolute;right: 100px;top: 25px;"><span>注意:</span><span style="color:#CC0000">{{'在线率<60%'}}红色</span><span style="color:#FFCC33">   {{'60%≤在线率<90%'}}黄色</span><span style="color:#339966">    {{ '在线率≥90%' }}绿色</span></span> -->
|
||||
<terminalonlinerateechart
|
||||
v-show="eacjartflag && activeName == 'tab2'"
|
||||
:loading="loading"
|
||||
:classvalue="classt"
|
||||
:timeValue="time"
|
||||
:timehuanbiValue="ping"
|
||||
:xdata="xdata"
|
||||
:ydata1="ydata1"
|
||||
:ydata2="ydata2"
|
||||
:ydata3="ydata3"
|
||||
:ydata4="ydata4"
|
||||
ref="trem"
|
||||
></terminalonlinerateechart>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import api1 from "@/api/pollution/pollution";
|
||||
import timepicker from "../../components/TimePicker/index4";
|
||||
import { dicData } from "../../../assets/commjs/dictypeData";
|
||||
import api from "../../../api/integraliy/integraliy";
|
||||
import terminalonlineratetable from "../../components/terminalonlineratetable";
|
||||
import terminalonlinerateechart from "../../components/echarts/terminalonlinerateechart";
|
||||
export default {
|
||||
name:'terminalstatusstatistics',
|
||||
components: {
|
||||
timepicker,
|
||||
terminalonlineratetable,
|
||||
terminalonlinerateechart,
|
||||
},
|
||||
watch: {},
|
||||
computed: {},
|
||||
data() {
|
||||
return {
|
||||
cu:'',
|
||||
quyuname: undefined,
|
||||
quyunames: undefined,
|
||||
dd:false,
|
||||
formInline: {},
|
||||
loading: true,
|
||||
asideheight: undefined,
|
||||
|
||||
eacjartflag: false,
|
||||
classt: "Power_Network",
|
||||
tablename: "tab1",
|
||||
deptIndex: "",
|
||||
interval: 3,
|
||||
treeData: [],
|
||||
idArr: [],
|
||||
treenode: "",
|
||||
dataTree: "",
|
||||
name: "sjwzx",
|
||||
path: "/harmonic-boot/harmonic/getIntegrityData",
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "name",
|
||||
},
|
||||
deptName: "",
|
||||
formData: {
|
||||
//后面需要修改
|
||||
deptIndex: "",
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
loadType: [],
|
||||
manufacturer: [],
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: "",
|
||||
scale: [],
|
||||
},
|
||||
id: 1,
|
||||
title: "电网拓扑",
|
||||
xdata: [],
|
||||
ydata1: [],
|
||||
ydata2: [],
|
||||
ydata3: [],
|
||||
ydata4: [],
|
||||
classvalue: 0,
|
||||
activeName: "tab1",
|
||||
panindexOptions: [],
|
||||
classificationData: [],
|
||||
voltageleve1: [],
|
||||
terminal: [],
|
||||
interfere: [],
|
||||
voltageleveloption: [],
|
||||
terminaloption: [],
|
||||
interfereoption: [],
|
||||
periodBeginTime: "",
|
||||
periodEndTime: "",
|
||||
timehuanbiValue: [],
|
||||
tableData: [],
|
||||
ping: "",
|
||||
time: "",
|
||||
vh:null,
|
||||
view:false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
|
||||
let data = window.sessionStorage.getItem("sysData");
|
||||
let yudata = eval("(" + data + ")");
|
||||
let str = yudata.dataReport.split("，");
|
||||
this.quyuname = str[0];
|
||||
this.quyunames = str[1];
|
||||
var info = window.sessionStorage.getItem("Info");
|
||||
info = eval("(" + info + ")");
|
||||
this.formData.deptIndex = info.deptId;
|
||||
this.getAreaDept();
|
||||
this.getclassificationData();
|
||||
this.getVoltage();
|
||||
this.getManufacturer();
|
||||
this.getLoadType();
|
||||
},
|
||||
mounted() {
|
||||
this.querfromdata()
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') -55+'px';
|
||||
|
||||
},
|
||||
closeHandle(){
|
||||
if(this.view){
|
||||
this.view = false
|
||||
}else{
|
||||
this.view = true
|
||||
}
|
||||
//console.log('关闭和展开');
|
||||
const dom = document.getElementById('container');
|
||||
const closeDom = document.getElementsByClassName('close')[0];
|
||||
if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
|
||||
dom.className = "container expend";
|
||||
} else {
|
||||
dom.className = "container close-container";
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
timechange(){
|
||||
this.dd = true
|
||||
},
|
||||
//切换统计类型
|
||||
changeclasss(val) {
|
||||
this.cu = val.code;
|
||||
},
|
||||
//标签切换
|
||||
handleClick(tab, event) {
|
||||
// this.tablename = tab.name
|
||||
this.activeName = tab.name;
|
||||
if (tab.name == "tab1") {
|
||||
this.eacjartflag = false;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.trem.terminalonlinerateechart();
|
||||
});
|
||||
} else if (tab.name == "tab2") {
|
||||
this.eacjartflag = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.trem.terminalonlinerateechart();
|
||||
});
|
||||
}
|
||||
},
|
||||
//部门绑定区域触发区域树节点
|
||||
handleNodeClick(data, node) {
|
||||
this.deptName = data.name;
|
||||
this.$refs.select1.blur();
|
||||
this.deptId = data.id;
|
||||
this.formData.deptIndex = data.id;
|
||||
},
|
||||
//时间格式转化
|
||||
dateFormat(dateData1, dateData2) {
|
||||
var timearr = [];
|
||||
var date = new Date(dateData1);
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? "0" + d : d;
|
||||
var h = date.getHours();
|
||||
h = h < 10 ? "0" + h : h;
|
||||
var f = date.getMinutes();
|
||||
f = f < 10 ? "0" + f : f;
|
||||
var s = date.getSeconds();
|
||||
s = s < 10 ? "0" + s : s;
|
||||
this.formData.searchBeginTime = y + "-" + m + "-" + d;
|
||||
timearr.push(this.formData.startTime);
|
||||
var date = new Date(dateData2);
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? "0" + d : d;
|
||||
var h = date.getHours();
|
||||
h = h < 10 ? "0" + h : h;
|
||||
var f = date.getMinutes();
|
||||
f = f < 10 ? "0" + f : f;
|
||||
var s = date.getSeconds();
|
||||
s = s < 10 ? "0" + s : s;
|
||||
this.formData.searchEndTime = y + "-" + m + "-" + d;
|
||||
timearr.push(this.formData.endTime);
|
||||
return timearr;
|
||||
},
|
||||
//时间格式转化
|
||||
formatDate(date) {
|
||||
date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();
|
||||
|
||||
var y = date.getFullYear();
|
||||
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? "0" + d : d;
|
||||
return y + "-" + m + "-" + d;
|
||||
},
|
||||
//2次组件触发事件
|
||||
querfromdata() {
|
||||
this.classt = this.cu
|
||||
//this.closeHandle()
|
||||
this.dd = false
|
||||
this.interval = this.$refs.timezd.intervald;
|
||||
this.loading = true;
|
||||
this.timeValue = this.$refs.timezd.timeValue;
|
||||
// this.timehuanbiValue = timehbValue;
|
||||
|
||||
// this.periodBeginTime = this.timehuanbiValue[0];
|
||||
// this.periodEndTime = this.timehuanbiValue[1];
|
||||
|
||||
// this.ping = this.periodBeginTime + "至" + this.periodEndTime;
|
||||
this.dateFormat(this.timeValue[0], this.timeValue[1]);
|
||||
this.time =
|
||||
this.formData.searchBeginTime + "至" + this.formData.searchEndTime;
|
||||
var data = {
|
||||
deptIndex: this.formData.deptIndex,
|
||||
loadType: this.formData.loadType,
|
||||
monitorFlag: this.formData.monitorFlag,
|
||||
powerFlag: 2,
|
||||
manufacturer: this.formData.manufacturer,
|
||||
searchBeginTime: this.formData.searchBeginTime,
|
||||
searchEndTime: this.formData.searchEndTime,
|
||||
statisticalType: this.formData.statisticalType,
|
||||
scale: this.formData.scale,
|
||||
periodBeginTime: this.periodBeginTime,
|
||||
periodEndTime: this.periodEndTime,
|
||||
};
|
||||
api.getTerminalData(data).then((res) => {
|
||||
this.eacjartflag = true;
|
||||
if (res.code == "A0000") {
|
||||
res.data.forEach((m) => {
|
||||
m.id = this.guid();
|
||||
m.children.forEach((n) => {
|
||||
n.id = this.guid();
|
||||
n.children.forEach((d) => {
|
||||
d.id = this.guid();
|
||||
});
|
||||
});
|
||||
});
|
||||
this.tableData = res.data;
|
||||
this.loading = false;
|
||||
}
|
||||
this.gettubiao()
|
||||
});
|
||||
|
||||
},
|
||||
gettubiao(){
|
||||
var data = {
|
||||
deptIndex: this.formData.deptIndex,
|
||||
loadType: this.formData.loadType,
|
||||
monitorFlag: this.formData.monitorFlag,
|
||||
powerFlag: 2,
|
||||
manufacturer: this.formData.manufacturer,
|
||||
searchBeginTime: this.formData.searchBeginTime,
|
||||
searchEndTime: this.formData.searchEndTime,
|
||||
statisticalType: this.formData.statisticalType,
|
||||
scale: this.formData.scale,
|
||||
periodBeginTime: this.periodBeginTime,
|
||||
periodEndTime: this.periodEndTime,
|
||||
};
|
||||
(this.xdata = []),
|
||||
(this.ydata1 = []),
|
||||
(this.ydata2 = []),
|
||||
(this.ydata3 = []),
|
||||
(this.ydata4 = []);
|
||||
api.getTerminalDataCensus(data).then((res) => {
|
||||
this.eacjartflag = true;
|
||||
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.$refs.trem.terminalonlinerateechart();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//开关触发
|
||||
handleStatusChange(val) {
|
||||
this.formData.monitorFlag = val;
|
||||
//this.fiveTreeData()
|
||||
},
|
||||
guid() {
|
||||
return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
|
||||
let r = (Math.random() * 16) | 0,
|
||||
v = c === "x" ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
},
|
||||
//获取区域
|
||||
async getAreaDept() {
|
||||
await api.getAreaDept().then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
var data = res.data;
|
||||
this.deptName =res.data[0].name
|
||||
data.forEach((element) => {
|
||||
this.idArr.push(element.id);
|
||||
});
|
||||
this.treeData = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
//字典获取数据电压等级
|
||||
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",
|
||||
"Voltage_Level",
|
||||
"Load_Type",
|
||||
]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
rest() {
|
||||
this.deptName = "全国";
|
||||
this.formData = {
|
||||
deptIndex: "",
|
||||
monitorFlag: 2,
|
||||
loadType: [],
|
||||
manufacturer: [],
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: "",
|
||||
scale: [],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../styles/comStyle.less");
|
||||
// .dhys {
|
||||
// background:rgb(244, 246, 247);
|
||||
// width:36.5%;
|
||||
// height:33px;
|
||||
// position: absolute;
|
||||
// right :0;
|
||||
// z-index: 2000000;
|
||||
// }
|
||||
// //展示标签时激活
|
||||
// .v-enter-active{
|
||||
// animation: atguigu 0.5s linear;
|
||||
// }
|
||||
// //不展示标签时激活
|
||||
// .v-leave-active{
|
||||
// animation: atguigu 0.5s linear reverse;
|
||||
// }
|
||||
|
||||
// @keyframes atguigu {
|
||||
// from{
|
||||
// transform: translateX(-100%);
|
||||
// }
|
||||
// to{
|
||||
// transform: translateX(0px);
|
||||
// }
|
||||
// }
|
||||
|
||||
.container {
|
||||
/* margin: auto; */
|
||||
top: 0px;
|
||||
right: 0;
|
||||
width:40%;
|
||||
height:0px;
|
||||
z-index:2000;
|
||||
position: absolute;
|
||||
background-color: #e4e7ebb9;
|
||||
overflow: auto;
|
||||
scroll-behavior: smooth;
|
||||
-radius: 20px;
|
||||
}
|
||||
/* 隐藏滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
.expend {
|
||||
animation: expend ease 5s forwards;
|
||||
}
|
||||
.close-container {
|
||||
animation: no-expend ease 1s forwards;
|
||||
}
|
||||
@keyframes expend {
|
||||
from {
|
||||
top: 0px;
|
||||
height: auto;
|
||||
}
|
||||
to {
|
||||
height: auto;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
@keyframes no-expend {
|
||||
from {
|
||||
height: 10%;
|
||||
top: 0px;
|
||||
}
|
||||
to {
|
||||
top: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
.coles{
|
||||
position:absolute;
|
||||
right:0;
|
||||
font-size:20px;
|
||||
cursor:pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user