621 lines
22 KiB
Vue
621 lines
22 KiB
Vue
<template>
|
||
<div class="pd10" v-loading="loading" element-loading-text="数据加载中">
|
||
<div class="container" id="container">
|
||
<i @click="closeHandle" class="el-icon-circle-close coles"></i>
|
||
<el-form :inline="true" :model="formInline" label-width="90px" class="">
|
||
<!-- <div style="display: flex;"> -->
|
||
<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>
|
||
<Area ref="Area" @click="handleNodeClick"></Area>
|
||
</el-form-item>
|
||
<el-form-item label="电压等级:">
|
||
<el-select
|
||
v-model="formData.scale"
|
||
multiple
|
||
collapse-tags
|
||
clearable
|
||
placeholder="请选择电压等级"
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="item in voltageleveloption"
|
||
: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-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-item label="干扰源类型:">
|
||
<el-select
|
||
v-model="formData.loadType"
|
||
multiple
|
||
collapse-tags
|
||
clearable
|
||
placeholder="请选择干扰源类型"
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="item in interfereoption"
|
||
: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 v-show="falg">
|
||
<el-form :inline="true" class="demo-form-inline">
|
||
<el-form-item>
|
||
<timepicker
|
||
ref="timehg"
|
||
:id="id"
|
||
: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>
|
||
</el-form>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<el-tabs :style="'height:' + vh" type="border-card" v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="稳态合格率表格" name="tab1">
|
||
<qualifiedataintegrity
|
||
:classvalue="classt"
|
||
:tableData="tableData"
|
||
:loading="loading"
|
||
></qualifiedataintegrity>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="稳态合格率图表" name="tab2" id="hgceshi">
|
||
<!-- <span style="font-weight: bold;color:#333;position: absolute;right: 100px;top: 25px;">注意:<span style="color:#CC0000">{{'合格率<60%'}}红色</span><span style="color:#FFCC33">   {{'60%≤合格率<90%'}}黄色</span><span style="color:#339966">    {{ '合格率≥90%' }}绿色</span></span> -->
|
||
<qualifiedechart
|
||
:loading="loading"
|
||
:title="title"
|
||
:classvalue="classt"
|
||
:xdata="xdata"
|
||
:ydata1="ydata1"
|
||
:ydata2="ydata2"
|
||
:ydata3="ydata3"
|
||
:ydata4="ydata4"
|
||
:ydata5="ydata5"
|
||
:ydata6="ydata6"
|
||
:ydata7="ydata7"
|
||
:ydata8="ydata8"
|
||
v-show="'tab2' == activeName"
|
||
ref="child"
|
||
></qualifiedechart>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { dicData } from '../../../assets/commjs/dictypeData'
|
||
import api from '../../../api/integraliy/integraliy'
|
||
import timepicker from '../../components/TimePicker/index4'
|
||
import qualifiedataintegrity from '../../components/qualifiedataintegrity'
|
||
import qualifiedechart from '../../components/echarts/qualifiedechart'
|
||
import Area from '@/views/components/Area/Area.vue'
|
||
|
||
export default {
|
||
name: 'qualificationratestatistics',
|
||
components: {
|
||
Area,
|
||
timepicker,
|
||
qualifiedataintegrity,
|
||
qualifiedechart
|
||
},
|
||
computed: {},
|
||
data() {
|
||
return {
|
||
view: false,
|
||
falg: true,
|
||
quyuname: undefined,
|
||
quyunames: undefined,
|
||
dd: false,
|
||
formInline: {},
|
||
|
||
xdata: [],
|
||
ydata1: [],
|
||
ydata2: [],
|
||
ydata3: [],
|
||
ydata4: [],
|
||
ydata5: [],
|
||
ydata6: [],
|
||
ydata7: [],
|
||
ydata8: [],
|
||
classt: 'Power_Network',
|
||
tablename: 'tab1',
|
||
eacjartflag: true,
|
||
interval: 3,
|
||
treeData: [],
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'name'
|
||
},
|
||
deptName: '',
|
||
deptIndex: '',
|
||
name: 'sjwzx',
|
||
path: '/harmonic-boot/harmonic/getIntegrityData',
|
||
asideheight: undefined,
|
||
id: 1,
|
||
title: '电网拓扑',
|
||
xdata: [],
|
||
ydata: [],
|
||
ydata1: [],
|
||
classvalue: 0,
|
||
activeName: 'tab1',
|
||
treenode: '',
|
||
dataTree: '',
|
||
voltageleve1: '',
|
||
//电压等级
|
||
voltageleveloption: [],
|
||
terminal: '',
|
||
terminaloption: [],
|
||
interfere: '',
|
||
interfereoption: [],
|
||
classificationData: [],
|
||
dictypeData: undefined,
|
||
deptIndex: '',
|
||
formData: {
|
||
//后面需要修改
|
||
deptIndex: '',
|
||
monitorFlag: 2,
|
||
powerFlag: 2,
|
||
loadType: [],
|
||
manufacturer: [],
|
||
searchBeginTime: '',
|
||
searchEndTime: '',
|
||
statisticalType: '',
|
||
scale: []
|
||
},
|
||
periodBeginTime: '',
|
||
periodEndTime: '',
|
||
timehuanbiValue: [],
|
||
tableData: [],
|
||
ping: '',
|
||
time: '',
|
||
loading: true,
|
||
vh: null,
|
||
cu: ''
|
||
}
|
||
},
|
||
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.getclassificationData()
|
||
this.getVoltage()
|
||
this.getManufacturer()
|
||
this.getLoadType()
|
||
},
|
||
mounted() {
|
||
if (this.$route.params.mapid0 != undefined && this.$route.params.mapName0 != undefined) {
|
||
setTimeout(() => {
|
||
this.RoutingChanges(this.$route.params.mapid0, this.$route.params.mapName0)
|
||
}, 500)
|
||
} else {
|
||
this.querfromdata()
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener('resize', this.setHeight)
|
||
},
|
||
methods: {
|
||
setHeight() {
|
||
this.vh = window.sessionStorage.getItem('appheight') - 55 + 'px'
|
||
},
|
||
timechange() {
|
||
this.dd = true
|
||
},
|
||
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'
|
||
}
|
||
},
|
||
|
||
//切换统计类型
|
||
changeclasss(val) {
|
||
this.cu = val.code
|
||
},
|
||
//时间格式转化
|
||
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
|
||
},
|
||
//部门绑定区域触发区域树节点
|
||
handleNodeClick(data, node) {
|
||
this.deptId = data.id
|
||
this.formData.deptIndex = data.id
|
||
},
|
||
formatDate(date) {
|
||
// date = new 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.timehg.intervald
|
||
this.loading = true
|
||
this.timeValue = this.$refs.timehg.timeValue
|
||
// this.timeValue = data;
|
||
// 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
|
||
api.getSteadyQualifyData(this.formData).then(res => {
|
||
if (res.code == 'A0000') {
|
||
if (res.data.length == 0) {
|
||
this.tableData = []
|
||
} else {
|
||
if (
|
||
res.data[0].children[0].children[0].children[0].children !== [] &&
|
||
res.data[0].children[0].children[0].children[0].children !== null
|
||
) {
|
||
res.data.forEach(m => {
|
||
m.id = this.guid()
|
||
m.children.forEach(n => {
|
||
n.id = this.guid()
|
||
n.children.forEach(d => {
|
||
d.id = this.guid()
|
||
d.children.forEach(p => {
|
||
p.id = this.guid()
|
||
p.children.forEach(h => {
|
||
h.id = this.guid()
|
||
})
|
||
})
|
||
})
|
||
})
|
||
})
|
||
} else {
|
||
res.data.forEach(m => {
|
||
m.id = this.guid()
|
||
m.children.forEach(n => {
|
||
n.id = this.guid()
|
||
n.children.forEach(d => {
|
||
d.id = this.guid()
|
||
d.children.forEach(p => {
|
||
p.id = this.guid()
|
||
})
|
||
})
|
||
})
|
||
})
|
||
}
|
||
this.tableData = res.data
|
||
}
|
||
this.gettubiao()
|
||
}
|
||
})
|
||
},
|
||
gettubiao() {
|
||
this.loading = true
|
||
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.ydata = []
|
||
this.ydata1 = []
|
||
this.ydata2 = []
|
||
this.ydata3 = []
|
||
this.ydata4 = []
|
||
this.ydata5 = []
|
||
this.ydata6 = []
|
||
this.ydata7 = []
|
||
this.ydata8 = []
|
||
api.getSteadyQualifyCensus(data).then(res => {
|
||
this.eacjartflag = true
|
||
|
||
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.loading = false
|
||
this.$nextTick(() => {
|
||
this.$refs.child.qualifiedechart()
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//标签切换
|
||
handleClick(tab, event) {
|
||
this.activeName = tab.name
|
||
if (tab.name == 'tab1') {
|
||
this.eacjartflag = false
|
||
this.$nextTick(() => {
|
||
this.$refs.child.qualifiedechart()
|
||
})
|
||
} else if (tab.name == 'tab2') {
|
||
// this.gettubiao();
|
||
this.$nextTick(() => {
|
||
// this.$refs.child.qualifiedechart();
|
||
})
|
||
}
|
||
},
|
||
|
||
//开关触发
|
||
handleStatusChange(val) {
|
||
this.formData.monitorFlag = val
|
||
},
|
||
|
||
//字典获取数据电压等级
|
||
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]
|
||
},
|
||
|
||
//获取数据完整性列表数据
|
||
getQueryData() {
|
||
let data = {
|
||
area: '0',
|
||
comparison: 0,
|
||
interference: [],
|
||
manufacturer: [],
|
||
searchBeginTime: '',
|
||
searchEndTime: '',
|
||
statisticalType: 0,
|
||
voltageLevel: []
|
||
}
|
||
},
|
||
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)
|
||
})
|
||
},
|
||
rest() {},
|
||
RoutingChanges(id, name) {
|
||
this.deptId = id
|
||
this.formData.deptIndex = id
|
||
this.$refs.Area.form.valueTitle = name
|
||
this.querfromdata()
|
||
}
|
||
},
|
||
watch: {
|
||
$route: {
|
||
handler: function (val, oldVal) {
|
||
if (val.params.mapid0 != undefined && val.params.mapName0 != undefined) {
|
||
this.$nextTick(() => {
|
||
this.RoutingChanges(val.params.mapid0, val.params.mapName0)
|
||
})
|
||
}
|
||
},
|
||
// 深度观察监听
|
||
deep: true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import url('../../../styles/comStyle.less');
|
||
|
||
.container {
|
||
/* margin: auto; */
|
||
top: 0px;
|
||
right: 0;
|
||
width: 50%;
|
||
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: 20%;
|
||
top: 0px;
|
||
}
|
||
to {
|
||
top: 0px;
|
||
height: 0px;
|
||
}
|
||
}
|
||
.coles {
|
||
position: absolute;
|
||
right: 0;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|