619 lines
18 KiB
Vue
619 lines
18 KiB
Vue
<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>
|