415 lines
12 KiB
Vue
415 lines
12 KiB
Vue
|
<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>
|