谐波监测-区域-终端在线率页面迁移
This commit is contained in:
zhujiyan
414
src/views/pqs/harmonicMonitoring/area/powerassessment.vue
Normal file
414
src/views/pqs/harmonicMonitoring/area/powerassessment.vue
Normal file
@@ -0,0 +1,414 @@
|
||||
<template>
|
||||
<el-container :style="'height:' + asideheight">
|
||||
<el-main class="main">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<span style="font-size: 14px">统计类型:</span>
|
||||
<el-select
|
||||
v-model="formData.statisticalType"
|
||||
@change="changeclasss"
|
||||
placeholder="请选择统计类型"
|
||||
style="width: 35%"
|
||||
>
|
||||
<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>
|
||||
|
||||
<span style="font-size: 14px">区域:</span>
|
||||
<el-select
|
||||
v-model="deptName"
|
||||
placeholder="请选择所属部门区域"
|
||||
style="width: 35%"
|
||||
>
|
||||
<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-col>
|
||||
<el-col :span="18">
|
||||
<timepicker
|
||||
@querfromdata="querfromdata"
|
||||
:interval="interval"
|
||||
:falg="true"
|
||||
:tablename="tablename"
|
||||
></timepicker>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-tabs type="border-card" v-model="activeName">
|
||||
<el-tab-pane :lazy="false" label="综合评估" name="tab1">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<comprehensivemap
|
||||
v-if="'tab1' == activeName"
|
||||
:dataList="dataList"
|
||||
:title="'电能质量综合评估'"
|
||||
ref="child2"
|
||||
></comprehensivemap>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<evaluation
|
||||
v-if="'tab1' == activeName"
|
||||
:xdata="xdata"
|
||||
:ydata="ydata"
|
||||
:title="title"
|
||||
ref="child"
|
||||
>
|
||||
</evaluation>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
stripe
|
||||
:data="tableData"
|
||||
border
|
||||
v-loading="loading"
|
||||
highlight-current-row
|
||||
:height="rightheight"
|
||||
style="width: 100%"
|
||||
>
|
||||
<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 == 0.2">暂无数据</span>
|
||||
<span v-if="scope.row.data !== 0.2">{{
|
||||
scope.row.data
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="level"
|
||||
label="等级"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
import { guanzhou } from "@/assets/commjs/token";
|
||||
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 dataintegrity from "../../components/dataintegrity";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
timepicker,
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classt: "Power_Network",
|
||||
loading: true,
|
||||
tablename: "tab1",
|
||||
eacjartflag: true,
|
||||
interval: 3,
|
||||
treeData: [],
|
||||
idArr: [],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "name",
|
||||
},
|
||||
deptName: "",
|
||||
deptIndex: "",
|
||||
name: "sjwzx",
|
||||
path: "/harmonic-boot/harmonic/getIntegrityData",
|
||||
asideheight: undefined,
|
||||
asideheight: undefined,
|
||||
rightheight: undefined,
|
||||
id: 1,
|
||||
title: "区域",
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
dataList: [
|
||||
{ name: "南海诸岛", value: 54 },
|
||||
{ name: "北京", value: 5.4 },
|
||||
{ name: "天津", value: 5.3 },
|
||||
{ name: "上海", value: 4.0 },
|
||||
{ name: "重庆", value: 5.5 },
|
||||
{ name: "河北", value: 5.3 },
|
||||
{ name: "河南", value: 5.3 },
|
||||
{ name: "云南", value: 4.1 },
|
||||
{ name: "辽宁", value: 0.2 },
|
||||
{ name: "黑龙江", value: 5.5 },
|
||||
{ name: "湖南", value: 5.2 },
|
||||
{ name: "安徽", value: 5.0 },
|
||||
{ name: "山东", value: 3.9 },
|
||||
{ name: "新疆", value: 2.5 },
|
||||
{ name: "江苏", value: 3.1 },
|
||||
{ name: "浙江", value: 5.0 },
|
||||
{ name: "江西", value: 2.2 },
|
||||
{ name: "湖北", value: 3.8 },
|
||||
{ name: "广西", value: 3.3 },
|
||||
{ name: "甘肃", value: 0.2 },
|
||||
{ name: "山西", value: 3.9 },
|
||||
{ name: "陕西", value: 5.2 },
|
||||
{ name: "吉林", value: 3.0 },
|
||||
{ name: "福建", value: 1.8 },
|
||||
{ name: "贵州", value: 3.5 },
|
||||
{ name: "广东", value: 1.3 },
|
||||
{ name: "青海", value: 4.5 },
|
||||
{ name: "西藏", value: 5.0 },
|
||||
{ name: "四川", value: 5.4 },
|
||||
{ name: "宁夏", value: 3.0 },
|
||||
{ name: "海南", value: 2.2 },
|
||||
{ name: "台湾", value: 5.0 },
|
||||
{ name: "香港", value: 0.2 },
|
||||
{ name: "澳门", value: 0.2 },
|
||||
],
|
||||
classvalue: 0,
|
||||
activeName: "tab1",
|
||||
panindexOptions: [],
|
||||
classificationData: [],
|
||||
tableData: [],
|
||||
deptIndex: "",
|
||||
formData: {
|
||||
//后面需要修改
|
||||
deptIndex: "",
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
loadType: [
|
||||
{
|
||||
code: "",
|
||||
id: "",
|
||||
name: "",
|
||||
sort: 0,
|
||||
},
|
||||
],
|
||||
manufacturer: [
|
||||
{
|
||||
code: "",
|
||||
id: "",
|
||||
name: "",
|
||||
sort: 0,
|
||||
},
|
||||
],
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
serverName: "",
|
||||
statisticalType: "",
|
||||
scale: [
|
||||
{
|
||||
code: "",
|
||||
id: "",
|
||||
name: "",
|
||||
sort: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
timeValue: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.guanzhou()
|
||||
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.asideheight = getappheight()
|
||||
// this.rightheight=gettwoechartsheight()
|
||||
},
|
||||
methods: {
|
||||
guanzhou() {
|
||||
var data = {
|
||||
token: this.$route.query.token,
|
||||
};
|
||||
api1.guanzhou(data).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
return;
|
||||
} else {
|
||||
this.$router.push("/error/massege/403");
|
||||
}
|
||||
});
|
||||
},
|
||||
//切换统计类型
|
||||
changeclasss(val) {
|
||||
this.classt = val.code;
|
||||
},
|
||||
//字典获取数据电压等级
|
||||
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;
|
||||
},
|
||||
//部门绑定区域触发区域树节点
|
||||
handleNodeClick(data, node) {
|
||||
this.deptName = data.name;
|
||||
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;
|
||||
},
|
||||
//获取区域
|
||||
getAreaDept() {
|
||||
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;
|
||||
}
|
||||
});
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
//2次组件触发事件
|
||||
querfromdata(data, timehbValue, interval) {
|
||||
this.interval = interval;
|
||||
this.timeValue = data;
|
||||
this.dateFormat(this.timeValue[0], this.timeValue[1]);
|
||||
api.getComAccessData(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.$nextTick(() => {
|
||||
this.$refs.child2.compmapcharts();
|
||||
this.$refs.child.evaluation();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../styles/common.less");
|
||||
.main {
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 0px;
|
||||
}
|
||||
::v-deep .el-select-dropdown__item,
|
||||
.el-select-dropdown__item {
|
||||
background-color: #fff;
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
background-color: #79878769;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user