Merge branch 'master' of http://192.168.1.22:3000/frontend/admin-sjzx
This commit is contained in:
49
src/api/harmonic-boot/area.ts
Normal file
49
src/api/harmonic-boot/area.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getTypeIdData(data: any) {
|
||||
return request({
|
||||
url: '/system-boot/dictData/getTypeIdData',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getOnlineRateData2(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/onlineRateData/getOnlineRateData',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getAreaDept() {
|
||||
return request({
|
||||
url: '/user-boot/dept/loginDeptTree',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
export function getOnlineRateDataCensus(data:any) {
|
||||
return request({
|
||||
url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function IntegrityIcon(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/integrity/getIntegrityIcon',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getDeptIdAreaTree() {
|
||||
return request({
|
||||
url: '/system-boot/area/getDeptIdAreaTree',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
export function getOnlineRateData(data:any) {
|
||||
return request({
|
||||
url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
@@ -61,7 +61,7 @@ import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from
|
||||
import { isString } from '@/utils/is'
|
||||
import { useUpload } from '@/components/UploadFile/src/useUpload'
|
||||
import { UploadFile } from 'element-plus/es/components/upload/src/upload'
|
||||
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
defineOptions({ name: 'UploadFile' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
@@ -53,7 +53,7 @@ import { ElNotification } from 'element-plus'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { useUpload } from '@/components/UploadFile/src/useUpload'
|
||||
import { Plus, Edit, ZoomIn, Delete } from '@element-plus/icons-vue'
|
||||
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
defineOptions({ name: 'UploadImgs' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
672
src/views/pqs/harmonicMonitoring/area/harmonicdistortionrate.vue
Normal file
672
src/views/pqs/harmonicMonitoring/area/harmonicdistortionrate.vue
Normal file
@@ -0,0 +1,672 @@
|
||||
<template>
|
||||
<div class="pd10" v-loading="loading" element-loading-text="数据加载中">
|
||||
<!-- <transition appear>
|
||||
<div v-show="animation" class="dhys">
|
||||
<timepicker style="margin-left:-1.8%"
|
||||
: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;"> -->
|
||||
<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>
|
||||
<!-- <div style="display: flex;justify-content: space-between;flex-grow:1;"> -->
|
||||
<el-form-item>
|
||||
<timepicker
|
||||
:id="id"
|
||||
ref="timejb"
|
||||
: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 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.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 :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">
|
||||
<harmonicdistortiontable
|
||||
:classvalue="classt"
|
||||
:tableData="tableData"
|
||||
:loading="loading"
|
||||
></harmonicdistortiontable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="谐波畸变率统计图" name="tab2">
|
||||
<!-- <span style="font-weight: bold;color:#333;position: absolute;right: 10px;"><span style="color:red">注意:</span>{{'畸变合格率<60%'}}   <span style="color:#00CC33">绿色</span>   {{'60%≤畸变合格率<90%'}}   <span style="color:#FFCC00">黄色</span>   {{ '畸变合格率≥90%' }}   <span style="color:red"> 红色</span></span> -->
|
||||
<harmonicdistortionechart
|
||||
v-show="eacjartflag && activeName == 'tab2'"
|
||||
:classvalue="classt"
|
||||
:timeValue="time"
|
||||
:timehuanbiValue="ping"
|
||||
:xdata="xdata"
|
||||
:ydata1="ydata1"
|
||||
:ydata2="ydata2"
|
||||
:ydata3="ydata3"
|
||||
:ydata4="ydata4"
|
||||
:ydata5="ydata5"
|
||||
:ydata6="ydata6"
|
||||
:ydata7="ydata7"
|
||||
:ydata8="ydata8"
|
||||
:mindata="mindata"
|
||||
ref="harm"
|
||||
></harmonicdistortionechart>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import api1 from '@/api/pollution/pollution'
|
||||
import { dicData } from '../../../assets/commjs/dictypeData'
|
||||
import api from '../../../api/integraliy/integraliy'
|
||||
import timepicker from '../../components/TimePicker/index4'
|
||||
import harmonicdistortiontable from '../../components/harmonicdistortiontable'
|
||||
import harmonicdistortionechart from '../../components/echarts/harmonicdistortionechart'
|
||||
export default {
|
||||
name: 'distortionratestatistics',
|
||||
components: {
|
||||
timepicker,
|
||||
harmonicdistortiontable,
|
||||
harmonicdistortionechart
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function (val, oldVal) {
|
||||
if (val.params.mapid2 != undefined && val.params.mapName2 != undefined) {
|
||||
this.$nextTick(() => {
|
||||
this.RoutingChanges(val.params.mapid2, val.params.mapName2)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 深度观察监听
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
data() {
|
||||
return {
|
||||
cu: '',
|
||||
quyuname: undefined,
|
||||
quyunames: undefined,
|
||||
formInline: {},
|
||||
animation: false,
|
||||
asideheight: undefined,
|
||||
view: false,
|
||||
id: 1,
|
||||
loading: true,
|
||||
tablename: 'tab1',
|
||||
eacjartflag: true,
|
||||
interval: 3,
|
||||
title: '电网拓扑',
|
||||
xdata: [],
|
||||
ydata1: [],
|
||||
ydata2: [],
|
||||
ydata3: [],
|
||||
ydata4: [],
|
||||
ydata5: [],
|
||||
ydata6: [],
|
||||
ydata7: [],
|
||||
ydata8: [],
|
||||
activeName: 'tab1',
|
||||
treenode: '',
|
||||
dataTree: '',
|
||||
name: 'sjwzx',
|
||||
path: '/harmonic-boot/harmonic/getIntegrityData',
|
||||
formData: {
|
||||
//后面需要修改
|
||||
deptIndex: '',
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
loadType: [],
|
||||
manufacturer: [],
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
serverName: '',
|
||||
statisticalType: '',
|
||||
scale: []
|
||||
},
|
||||
deptId: '',
|
||||
deptName: '',
|
||||
deptIndex: '',
|
||||
treeData: [],
|
||||
idArr: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
//统计类型
|
||||
classificationData: [],
|
||||
//电压等级
|
||||
voltageleveloption: [],
|
||||
//终端厂家
|
||||
terminaloption: [],
|
||||
//干扰源类型
|
||||
interfereoption: [],
|
||||
classt: 'Power_Network',
|
||||
tableData: [],
|
||||
ping: '',
|
||||
time: '',
|
||||
vh: null,
|
||||
mindata: null
|
||||
}
|
||||
},
|
||||
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() {
|
||||
|
||||
if (this.$route.params.mapid2 != undefined && this.$route.params.mapName2 != undefined) {
|
||||
setTimeout(() => {
|
||||
this.RoutingChanges(this.$route.params.mapid2, this.$route.params.mapName2)
|
||||
}, 500)
|
||||
} else {
|
||||
this.querfromdata()
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 55 + 'px'
|
||||
},
|
||||
RoutingChanges(id, name) {
|
||||
this.deptName = name
|
||||
this.$refs.select1.blur()
|
||||
this.deptId = id
|
||||
this.formData.deptIndex = id
|
||||
|
||||
this.querfromdata()
|
||||
},
|
||||
timechange() {
|
||||
this.animation = true
|
||||
},
|
||||
closeHandle() {
|
||||
if (this.view) {
|
||||
this.view = false
|
||||
} else {
|
||||
this.view = true
|
||||
}
|
||||
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
|
||||
},
|
||||
//开关触发
|
||||
handleStatusChange(val) {
|
||||
this.formData.monitorFlag = val
|
||||
//this.fiveTreeData()
|
||||
},
|
||||
//时间格式转化
|
||||
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 = 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.animation = false
|
||||
this.interval = this.$refs.timejb.intervald
|
||||
this.loading = true
|
||||
this.timeValue = this.$refs.timejb.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.getTHDistortionData(this.formData).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
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() {
|
||||
api.getTHDistortionCensus(this.formData).then(res => {
|
||||
this.eacjartflag = true
|
||||
if (res.code == 'A0000') {
|
||||
if (res.data.type.length == 0 && res.data.single.length == 0) {
|
||||
this.xdata = res.data.type
|
||||
this.ydata1 = res.data.single
|
||||
} else {
|
||||
this.xdata = res.data.type
|
||||
var arr = []
|
||||
if (res.data.single) {
|
||||
for (var j = 0; j < res.data.single.length - 1; j++) {
|
||||
for (var i = 0; i < res.data.single.length - 1 - j; i++) {
|
||||
// 判断，如果数组中的当前一个比后一个大，那么两个交换一下位置
|
||||
if (arr[i] > arr[i + 1]) {
|
||||
var tmp = arr[i]
|
||||
res.data.single[i] = arr[i + 1]
|
||||
res.data.single[i + 1] = tmp
|
||||
}
|
||||
}
|
||||
}
|
||||
arr = res.data.single
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (arr[i] == 0 || arr[i] == 3.14159) {
|
||||
arr[i] = arr[arr.length - 1] * 0.03
|
||||
this.mindata = arr[arr.length - 1] * 0.03
|
||||
}
|
||||
}
|
||||
this.ydata1 = arr
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.harm.qualifiedechart()
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
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)
|
||||
})
|
||||
},
|
||||
//标签切换
|
||||
handleClick(tab, event) {
|
||||
this.tablename = tab.name
|
||||
this.activeName = tab.name
|
||||
if (tab.name == 'tab1') {
|
||||
this.eacjartflag = false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.harm.qualifiedechart()
|
||||
})
|
||||
} else if (tab.name == 'tab2') {
|
||||
this.eacjartflag = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.harm.qualifiedechart()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
//部门绑定区域触发区域树节点
|
||||
handleNodeClick(data, node) {
|
||||
this.deptName = data.name
|
||||
this.$refs.select1.blur()
|
||||
this.deptId = data.id
|
||||
this.formData.deptIndex = data.id
|
||||
},
|
||||
//查询触发方法
|
||||
queryDataInfo() {
|
||||
api.getLineLedger(this.formData).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
this.tableData = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取区域
|
||||
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
|
||||
}
|
||||
})
|
||||
},
|
||||
//字典获取数据电压等级
|
||||
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]
|
||||
},
|
||||
rest() {
|
||||
this.deptName = '全国'
|
||||
this.formData = {
|
||||
deptIndex: '',
|
||||
monitorFlag: 2,
|
||||
loadType: [],
|
||||
manufacturer: [],
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
statisticalType: '',
|
||||
scale: []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../styles/comStyle.less');
|
||||
.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>
|
||||
718
src/views/pqs/harmonicMonitoring/area/integralitytable.vue
Normal file
718
src/views/pqs/harmonicMonitoring/area/integralitytable.vue
Normal file
@@ -0,0 +1,718 @@
|
||||
<template>
|
||||
<div class="pd10" element-loading-text="数据加载中" v-loading="loading">
|
||||
<!-- <transition appear>
|
||||
<div v-show="dd" class="dhys">
|
||||
|
||||
</div>
|
||||
</transition> -->
|
||||
<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="">
|
||||
<!-- <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="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.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>
|
||||
<!-- <div style="display: flex;justify-content: space-between;flex-grow:1;"> -->
|
||||
<el-row v-show="falg">
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<timepicker
|
||||
ref="timepk"
|
||||
:id="id"
|
||||
:interval="interval"
|
||||
:treenode="treenode"
|
||||
:tablename="tablename"
|
||||
:name="name"
|
||||
:path="path"
|
||||
:dataTree="dataTree"
|
||||
></timepicker>
|
||||
</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>
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
|
||||
<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 :lazy="false" label="数据完整性列表" name="tab1">
|
||||
<dataintegrity
|
||||
:classvalue="classt"
|
||||
:tableData="tableData"
|
||||
:loading="loading"
|
||||
></dataintegrity>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :lazy="false" label="数据完整性图表" name="tab2">
|
||||
<!-- <span style="font-weight: bold;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> -->
|
||||
<dataintegrityechart
|
||||
v-show="eacjartflag && activeName == 'tab2'"
|
||||
:classvalue="classt"
|
||||
:timeValue="time"
|
||||
:timehuanbiValue="ping"
|
||||
:xdata="xdata"
|
||||
:ydata="ydata"
|
||||
:ydata1="ydata1"
|
||||
ref="child"
|
||||
></dataintegrityechart>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import api1 from "@/api/pollution/pollution";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "../../../api/integraliy/integraliy";
|
||||
import timepicker from "../../components/TimePicker/index4";
|
||||
import dataintegrity from "../../components/dataintegrity";
|
||||
import dataintegrityechart from "../../components/dataintegrityechart";
|
||||
export default {
|
||||
name: "dataintegritydd",
|
||||
components: {
|
||||
timepicker,
|
||||
dataintegrity,
|
||||
dataintegrityechart,
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function (val, oldVal) {
|
||||
if (
|
||||
val.params.mapid1 != undefined &&
|
||||
val.params.mapName1 != undefined
|
||||
) {
|
||||
this.$nextTick(() => {
|
||||
this.RoutingChanges(val.params.mapid1, val.params.mapName1);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 深度观察监听
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
data() {
|
||||
return {
|
||||
cu: "",
|
||||
view: false,
|
||||
falg: true,
|
||||
quyuname: undefined,
|
||||
quyunames: undefined,
|
||||
dd: false,
|
||||
formInline: {},
|
||||
loading: true,
|
||||
classt: "Power_Network",
|
||||
tablename: "tab1",
|
||||
thb: false,
|
||||
eacjartflag: true,
|
||||
interval: 3,
|
||||
treeData: [],
|
||||
idArr: [],
|
||||
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: null,
|
||||
manufacturer: null,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: "",
|
||||
scale: null,
|
||||
},
|
||||
periodBeginTime: "",
|
||||
periodEndTime: "",
|
||||
timehuanbiValue: [],
|
||||
tableData: [],
|
||||
ping: "",
|
||||
time: "",
|
||||
quyuname: undefined,
|
||||
vh: null,
|
||||
};
|
||||
},
|
||||
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() {
|
||||
if (
|
||||
this.$route.params.mapid1 != undefined &&
|
||||
this.$route.params.mapName1 != undefined
|
||||
) {
|
||||
setTimeout(() => {
|
||||
this.RoutingChanges(
|
||||
this.$route.params.mapid1,
|
||||
this.$route.params.mapName1
|
||||
);
|
||||
}, 500);
|
||||
} else {
|
||||
this.querfromdata();
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 55 + "px";
|
||||
|
||||
},
|
||||
RoutingChanges(id, name) {
|
||||
this.deptName = name;
|
||||
this.$refs.select1.blur();
|
||||
this.deptId = id;
|
||||
this.formData.deptIndex = id;
|
||||
|
||||
this.querfromdata();
|
||||
},
|
||||
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.deptName = data.name;
|
||||
this.$refs.select1.blur();
|
||||
this.deptId = data.id;
|
||||
this.formData.deptIndex = data.id;
|
||||
},
|
||||
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.dd = false;
|
||||
this.interval = this.$refs.timepk.intervald;
|
||||
this.loading = true;
|
||||
this.timeValue = this.$refs.timepk.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;
|
||||
api.integrityData(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() {
|
||||
var data = {
|
||||
deptIndex: this.formData.deptIndex,
|
||||
loadType: this.formData.loadType,
|
||||
monitorFlag: this.formData.monitorFlag,
|
||||
manufacturer: this.formData.manufacturer,
|
||||
searchBeginTime: this.formData.searchBeginTime,
|
||||
searchEndTime: this.formData.searchEndTime,
|
||||
statisticalType: this.formData.statisticalType,
|
||||
scale: this.formData.scale,
|
||||
powerFlag: 2,
|
||||
periodBeginTime: this.periodBeginTime,
|
||||
periodEndTime: this.periodEndTime,
|
||||
};
|
||||
this.ydata = [];
|
||||
this.ydata1 = [];
|
||||
api.IntegrityIcon(data).then((res) => {
|
||||
this.eacjartflag = true;
|
||||
//this.loading = true;
|
||||
if (res.code == "A0000") {
|
||||
let arr = [];
|
||||
let arry = [];
|
||||
res.data.forEach((item) => {
|
||||
arr.push(item.type);
|
||||
if (item.single == 0 || item.single == 3.14159) {
|
||||
arry.push(1);
|
||||
} else {
|
||||
arry.push(item.single);
|
||||
}
|
||||
if (item.ratio !== null) {
|
||||
this.ydata1.push(item.ratio);
|
||||
}
|
||||
this.xdata = arr;
|
||||
this.ydata = arry;
|
||||
});
|
||||
//
|
||||
this.$nextTick(() => {
|
||||
this.$refs.child.dataintegrityecharts();
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//标签切换
|
||||
handleClick(tab, event) {
|
||||
this.tablename = tab.name;
|
||||
this.activeName = tab.name;
|
||||
if (tab.name == "tab1") {
|
||||
this.thb = false;
|
||||
this.eacjartflag = false;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.child.dataintegrityecharts();
|
||||
});
|
||||
} else if (tab.name == "tab2") {
|
||||
this.thb = true;
|
||||
this.eacjartflag = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.child.dataintegrityecharts();
|
||||
});
|
||||
}
|
||||
},
|
||||
//开关触发
|
||||
handleStatusChange(val) {
|
||||
this.formData.monitorFlag = val;
|
||||
//this.fiveTreeData()
|
||||
},
|
||||
//获取区域
|
||||
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;
|
||||
}
|
||||
});
|
||||
},
|
||||
//字典获取数据电压等级
|
||||
getVoltage() {
|
||||
// debugger
|
||||
var code = "Dev_Voltage_Stand";
|
||||
this.voltageleveloption = dicData(code, []);
|
||||
this.formData.scale = this.voltageleveloption;
|
||||
},
|
||||
//字典获取数据终端厂家
|
||||
getManufacturer() {
|
||||
//debugger
|
||||
var code = "Dev_Manufacturers";
|
||||
this.terminaloption = dicData(code, []);
|
||||
this.formData.manufacturer = this.terminaloption;
|
||||
},
|
||||
//字典获取数据干扰源类型
|
||||
getLoadType() {
|
||||
//debugger
|
||||
var code = "Interference_Source";
|
||||
this.interfereoption = dicData(code, []);
|
||||
this.formData.loadType = this.interfereoption;
|
||||
},
|
||||
//获取统计类型
|
||||
getclassificationData() {
|
||||
//debugger
|
||||
var code = "Statistical_Type";
|
||||
this.classificationData = dicData(code, ["Report_Type"]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
},
|
||||
|
||||
//获取数据完整性列表数据
|
||||
getQueryData() {
|
||||
var data = {
|
||||
area: "0",
|
||||
comparison: 0,
|
||||
interference: [],
|
||||
manufacturer: [],
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: 0,
|
||||
voltageLevel: [],
|
||||
};
|
||||
},
|
||||
guid() {
|
||||
return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
|
||||
var r = (Math.random() * 16) | 0,
|
||||
v = c === "x" ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
},
|
||||
//导出文件
|
||||
exportExcel() {
|
||||
api.getExportIntegrityData(this.formData).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
var path = res.data;
|
||||
//window.location.href=('/api/harmonic-boot/integrity/exportIntegrityDataExcel?filePath='+path)
|
||||
this.getpath(path);
|
||||
}
|
||||
});
|
||||
},
|
||||
getpath(path) {
|
||||
var fileName = path.substring(path.lastIndexOf("/") + 1, path.length); //获取文件名
|
||||
api.getExportIntegrityDataExcel(path).then((res) => {
|
||||
var blob = new Blob([res], {
|
||||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
}); //response是返回的数据对象
|
||||
var downloadElement = document.createElement("a");
|
||||
var href = window.URL.createObjectURL(blob); //创建下载的链接
|
||||
downloadElement.href = href;
|
||||
downloadElement.setAttribute("download", fileName);
|
||||
document.body.appendChild(downloadElement);
|
||||
downloadElement.click(); //点击下载
|
||||
document.body.removeChild(downloadElement); //下载完成移除元素
|
||||
window.URL.revokeObjectURL(href); //释放掉blob对象
|
||||
});
|
||||
},
|
||||
rest() {
|
||||
this.deptName = "全国";
|
||||
this.formData = {
|
||||
deptIndex: "",
|
||||
monitorFlag: 2,
|
||||
loadType: null,
|
||||
manufacturer: null,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: "",
|
||||
scale: null,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<!-- <TableHeader area datePicker ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.statisticalType"
|
||||
value-key="id"
|
||||
placeholder="请选择统计类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.scale"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择电压等级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.manufacturer"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择终端厂家"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.loadType"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择干扰源类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in interfereoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader> -->
|
||||
<my-echart
|
||||
v-loading="loading"
|
||||
class="mt10"
|
||||
:style="`height: calc(${tableStore.table.height} - 75px)`"
|
||||
:options="options"
|
||||
/>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import * as echarts from 'echarts/core'
|
||||
const dictData = useDictData()
|
||||
const options = ref({})
|
||||
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
const TableHeaderRef = ref()
|
||||
const tableStoreParams: any = ref({})
|
||||
const loading = ref(false)
|
||||
const getTableStoreParams = async (val: any) => {
|
||||
tableStoreParams.value = val
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
tableStore.index()
|
||||
}, 2000)
|
||||
}
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
|
||||
showPage: false,
|
||||
method: 'POST',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params = tableStoreParams.value
|
||||
},
|
||||
loadCallback: () => {
|
||||
// tableStore.table.data.type
|
||||
let code = tableStore.table.params.statisticalType.code
|
||||
let title = '',
|
||||
titleX = ''
|
||||
if (code == 'Power_Network') {
|
||||
title = '区域'
|
||||
titleX = '区域'
|
||||
} else if (code == 'Manufacturer') {
|
||||
title = '终端厂家'
|
||||
titleX = '终端\n厂家'
|
||||
} else if (code == 'Voltage_Level') {
|
||||
title = '电压等级'
|
||||
titleX = '电压\n等级'
|
||||
} else if (code == 'Load_Type') {
|
||||
title = '干扰源类型'
|
||||
titleX = '干扰\n源类型'
|
||||
} else if (code == 'Report_Type') {
|
||||
title = '上报类型'
|
||||
titleX = '上报\n类型'
|
||||
}
|
||||
options.value = {
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var tips = ''
|
||||
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 1) {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '在线率:暂无数据'
|
||||
} else {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '在线率:' + params[i].value.toFixed(2)
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '50px',
|
||||
right: '80px'
|
||||
},
|
||||
xAxis: {
|
||||
name: titleX,
|
||||
data: tableStore.table.data.type
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
max: 100
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '在线率',
|
||||
type: 'bar',
|
||||
data: tableStore.table.data.single,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params: any) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#339966'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFCC33'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value <= 60 && params.value > 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#CC0000'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value > 0 && params.value <= 1) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
data: [
|
||||
{
|
||||
name: '',
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: '#339966'
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#339966'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: '#FFCC33'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FFCC33'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: '#CC0000'
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#CC0000'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
// tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||
// tableStore.table.params.monitorFlag = 2
|
||||
// tableStore.table.params.powerFlag = 2
|
||||
// tableStore.table.params.serverName = 'harmonicBoot'
|
||||
// tableStore.table.params.deptIndex = '5699e5916a18a6381e1ac92da5bd2628'
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {})
|
||||
defineExpose({ getTableStoreParams })
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -0,0 +1,377 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 过滤筛选: <el-input v-model="search" clearable size="small" style="width: 250px" placeholder="筛选数据"/>
|
||||
<el-button @click="exportExcel" style="float:right;margin-bottom:10px" size="small" type="primary">导出Excel文件</el-button>
|
||||
<el-button @click="exporeCSV(tables)" size="small" type="primary" style="float:right;margin-right:10px;margin-bottom:10px">导出CSV文件</el-button> -->
|
||||
<el-select
|
||||
v-show="false"
|
||||
v-model="ExpandedNum"
|
||||
@change="handleExpandNumChange"
|
||||
placeholder="选择展开级别"
|
||||
size="mini"
|
||||
style="width: 100px; left: 0px"
|
||||
>
|
||||
<el-option label="不展开" :value="0"></el-option>
|
||||
<el-option label="展开1" :value="1"></el-option>
|
||||
<el-option label="展开2" :value="2"></el-option>
|
||||
<el-option label="展开3" :value="3"></el-option>
|
||||
</el-select>
|
||||
<u-table
|
||||
stripe
|
||||
class="xshou"
|
||||
ref="plTreeTable"
|
||||
header-cell-class-name="table_header"
|
||||
fixed-columns-roll
|
||||
:data="tableData"
|
||||
:row-height="rowHeight"
|
||||
:height="vth"
|
||||
:treeConfig="{
|
||||
children: 'children',
|
||||
iconClose: 'el-icon-arrow-right',
|
||||
iconOpen: 'el-icon-arrow-down',
|
||||
expandAll: true
|
||||
}"
|
||||
@toggle-tree-expand="toggleTreeExpand"
|
||||
use-virtual
|
||||
row-id="id"
|
||||
border
|
||||
>
|
||||
<u-table-column
|
||||
min-width="200"
|
||||
prop="name"
|
||||
:label="typedata"
|
||||
:treeNode="true"
|
||||
:showOverflowTooltip="true"
|
||||
:show-overflow-tooltip="true"
|
||||
></u-table-column>
|
||||
<!-- <u-table-column min-width='150' align="center" prop="voltageLevel" v-if="dydj" label="电压等级" sortable >
|
||||
<template slot-scope="scope">
|
||||
<span v-if="(scope.row.voltageLevel==null)" type="primary" size="small">/</span>
|
||||
<span v-if="(scope.row.voltageLevel!=null)" type="primary" size="small">{{scope.row.voltageLevel}}</span>
|
||||
</template>
|
||||
</u-table-column> -->
|
||||
<u-table-column min-width="120" align="center" prop="ip" label="网络参数">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.ip == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.ip != null" type="primary" size="small">{{ scope.row.ip }}</span>
|
||||
</template>
|
||||
</u-table-column>
|
||||
<u-table-column
|
||||
min-width="80"
|
||||
align="center"
|
||||
prop="dataName"
|
||||
:show-overflow-tooltip="true"
|
||||
label="终端名称"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.dataName == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.dataName != null" type="primary" size="small">{{ scope.row.dataName }}</span>
|
||||
</template>
|
||||
</u-table-column>
|
||||
<u-table-column min-width="80" align="center" prop="manufacturer" label="厂家">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.manufacturer == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.manufacturer != null" type="primary" size="small">
|
||||
{{ scope.row.manufacturer }}
|
||||
</span>
|
||||
</template>
|
||||
</u-table-column>
|
||||
<!-- <u-table-column min-width='150' align="center" prop="deviceName" label="终端名称" sortable >
|
||||
<template slot-scope="scope">
|
||||
<span v-if="(scope.row.deviceName==null)" type="primary" size="small">/</span>
|
||||
<span v-if="(scope.row.deviceName!=null)" type="primary" size="small">{{scope.row.deviceName}}</span>
|
||||
|
||||
</template>
|
||||
</u-table-column> -->
|
||||
<u-table-column min-width="80" align="center" prop="state" label="通讯状态" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span type="primary" v-if="scope.row.comFlag == null" size="small">/</span>
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.comFlag == 0"
|
||||
style="background: #cc0000; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
中断
|
||||
</el-tag>
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.comFlag == 1"
|
||||
style="background: #339966; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
正常
|
||||
</el-tag>
|
||||
</template>
|
||||
</u-table-column>
|
||||
<u-table-column
|
||||
min-width="120"
|
||||
align="center"
|
||||
prop="updateTime"
|
||||
label="最新数据时间"
|
||||
:show-overflow-tooltip="true"
|
||||
sortable
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.updateTime == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.updateTime != null" type="primary" size="small">
|
||||
{{ scope.row.updateTime }}
|
||||
</span>
|
||||
</template>
|
||||
</u-table-column>
|
||||
<u-table-column min-width="80" align="center" prop="onlineRate" label="在线率(%)" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.onlineRate == 3.14159" type="primary" size="small">暂无数据</span>
|
||||
<span v-if="scope.row.onlineRate != 3.14159" type="primary" size="small">
|
||||
{{ scope.row.onlineRate.toFixed(2) }}
|
||||
</span>
|
||||
</template>
|
||||
</u-table-column>
|
||||
<u-table-column min-width="80" align="center" prop="valueOver" label="评估" sortable>
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
v-if="scope.row.onlineRate == 3.14159"
|
||||
type="primary"
|
||||
size="small"
|
||||
style="background: #cccccc; color: #fff"
|
||||
>
|
||||
暂无评估
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="scope.row.onlineRate >= 90 && scope.row.onlineRate != 3.14159"
|
||||
type="primary"
|
||||
size="small"
|
||||
style="background: #339966; color: #fff"
|
||||
>
|
||||
优秀
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="
|
||||
60 <= scope.row.onlineRate && scope.row.onlineRate < 90 && scope.row.onlineRate != 3.14159
|
||||
"
|
||||
type="primary"
|
||||
size="small"
|
||||
style="background: #ffcc33; color: #fff"
|
||||
>
|
||||
合格
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="scope.row.onlineRate < 60 && scope.row.onlineRate != 3.14159"
|
||||
type="primary"
|
||||
size="small"
|
||||
style="background: #cc0000; color: #fff"
|
||||
>
|
||||
不合格
|
||||
</el-tag>
|
||||
</template>
|
||||
</u-table-column>
|
||||
</u-table>
|
||||
<!-- <pagination :pageData="pageData" @changePageNum="changePageNum" @changePageSize="changePageSize"></pagination> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import {getheight} from '../../assets/commjs/common'
|
||||
// import pagination from '../components/pagination/index'
|
||||
import FileSaver from 'file-saver'
|
||||
import XLSX from 'xlsx'
|
||||
import json2csv from 'json2csv'
|
||||
export default {
|
||||
computed: {
|
||||
// 实时监听表格
|
||||
// tables: function() {
|
||||
// const search = this.search
|
||||
// if (search) {
|
||||
// return this.tableData.filter(dataNews => {
|
||||
// return Object.keys(dataNews).some(key => {
|
||||
// return String(dataNews[key]).toLowerCase().indexOf(search) > -1
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
// return this.tableData
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vth: null,
|
||||
rowKey: 0,
|
||||
ExpandedNum: 3,
|
||||
rowHeight: 20,
|
||||
expandID: [],
|
||||
search: '',
|
||||
typedata: '电网拓扑',
|
||||
dydj: false,
|
||||
tableheight: undefined,
|
||||
pageData: {
|
||||
pageNum: 3,
|
||||
pageSize: 15,
|
||||
total: 100
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
classvalue: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
classvalue: function (a, b) {
|
||||
if (a == 'Power_Network') {
|
||||
this.typedata = '电网拓扑'
|
||||
} else if (a == 'Manufacturer') {
|
||||
this.typedata = '终端厂家'
|
||||
} else if (a == 'Voltage_Level') {
|
||||
this.typedata = '电压等级'
|
||||
} else if (a == 'Load_Type') {
|
||||
this.typedata = '干扰源类型'
|
||||
}
|
||||
},
|
||||
tableData: function (a, b) {
|
||||
if (a.length > 0) {
|
||||
this.tableData = a
|
||||
//this.expandID=[]
|
||||
this.handleExpandNumChange()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
// pagination
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.handleExpandNumChange()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vth = window.sessionStorage.getItem('appheight') - 115 + 'px'
|
||||
},
|
||||
//判断需要展开层级
|
||||
handleExpandNumChange() {
|
||||
if (this.ExpandedNum > 0) {
|
||||
this.setExpandKeys(this.tableData)
|
||||
}
|
||||
},
|
||||
//层级展开递归方法
|
||||
setExpandKeys(dataList, n) {
|
||||
if (!n) n = 1
|
||||
for (let i = 0; i < dataList.length; i++) {
|
||||
if (n <= this.ExpandedNum) {
|
||||
//this.expandID=[]
|
||||
this.expandID.push(`${dataList[i].id}`)
|
||||
if (dataList[i].hasOwnProperty('children')) {
|
||||
const children = dataList[i].children
|
||||
this.setExpandKeys(children, n + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleTreeExpand() {},
|
||||
// 判断是否IE浏览器
|
||||
MyBrowserIsIE() {
|
||||
let isIE = false
|
||||
if (navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1) {
|
||||
// ie浏览器
|
||||
isIE = true
|
||||
}
|
||||
if (navigator.userAgent.indexOf('Trident') > -1) {
|
||||
// edge 浏览器
|
||||
isIE = true
|
||||
}
|
||||
return isIE
|
||||
},
|
||||
//创建a标签下载
|
||||
createDownLoadClick(content, fileName) {
|
||||
const link = document.createElement('a')
|
||||
link.href = encodeURI(content)
|
||||
link.download = fileName
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
},
|
||||
exporeCSV(rows) {
|
||||
try {
|
||||
const result = json2csv.parse(rows, {
|
||||
// fields: fields,
|
||||
excelStrings: true
|
||||
})
|
||||
if (this.MyBrowserIsIE()) {
|
||||
// IE10以及Edge浏览器
|
||||
var BOM = '\uFEFF'
|
||||
// 文件转Blob格式
|
||||
var csvData = new Blob([BOM + result], { type: 'text/csv' })
|
||||
navigator.msSaveBlob(csvData, `导出数据.csv`)
|
||||
} else {
|
||||
let csvContent = 'data:text/csv;charset=utf-8,\uFEFF' + result
|
||||
// 非ie 浏览器
|
||||
this.createDownLoadClick(csvContent, `导出数据.csv`)
|
||||
}
|
||||
} catch (err) {
|
||||
alert(err)
|
||||
}
|
||||
},
|
||||
exportExcel() {
|
||||
/* generate workbook object from table */
|
||||
let wb = XLSX.utils.table_to_book(document.querySelector('#rebateSetTable'))
|
||||
/* get binary string as output */
|
||||
let wbout = XLSX.write(wb, {
|
||||
bookType: 'xlsx',
|
||||
bookSST: true,
|
||||
type: 'array'
|
||||
})
|
||||
try {
|
||||
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '数据表.xlsx')
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') {
|
||||
} //console.log(e, wbout);
|
||||
}
|
||||
return wbout
|
||||
},
|
||||
changePageNum(data) {
|
||||
this.pageData.pageNum = data
|
||||
alert('父组件当前页' + this.pageData.pageNum)
|
||||
},
|
||||
changePageSize(data) {
|
||||
this.pageData.pageSize = data
|
||||
alert('父组件当前条数' + this.pageData.pageSize)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.xshou {
|
||||
cursor: pointer;
|
||||
}
|
||||
// ::v-deep .u-table__body-wrapper {
|
||||
// height: calc(100% - 30px) !important;
|
||||
// //overflow-x: scroll !important;
|
||||
// }
|
||||
// ::v-deep.plTableBox
|
||||
// .el-table--striped
|
||||
// .el-table__body
|
||||
// tr.el-table__row--striped
|
||||
// td {
|
||||
// background-color: $whirt !important;
|
||||
// }
|
||||
// ::v-deep.plTableBox
|
||||
// .el-table--striped
|
||||
// .el-table__body
|
||||
// tr.el-table__row--striped.current-row
|
||||
// td {
|
||||
// background-color: $current-blue !important;
|
||||
// color: #fff !important;
|
||||
// }
|
||||
</style>
|
||||
401
src/views/pqs/harmonicMonitoring/area/onlinerate/index.vue
Normal file
401
src/views/pqs/harmonicMonitoring/area/onlinerate/index.vue
Normal file
@@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<div class="default-main online">
|
||||
<div class="online_header">
|
||||
<TableHeader date-picker ref="tableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="formData.statisticalType"
|
||||
placeholder="请选择统计类型"
|
||||
value-key="id"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></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="formData.deptIndex" style="height: auto"> -->
|
||||
<!-- {{ formData.deptIndex }} -->
|
||||
<el-cascader
|
||||
v-model="formData.deptIndex"
|
||||
:props="defaultProps"
|
||||
:options="treeData"
|
||||
clearable
|
||||
filterable
|
||||
collapse-tags
|
||||
placeholder="请选择区域"
|
||||
/>
|
||||
<!-- <el-tree
|
||||
ref="tree"
|
||||
v-model="formData.deptName"
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
accordion
|
||||
:default-expanded-keys="idArr"
|
||||
:props="defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span :title="data.name">{{ data?.name }}</span>
|
||||
</template>
|
||||
</el-tree> -->
|
||||
<!-- </el-option>
|
||||
</el-select> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model="formData.scale"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
placeholder="请选择电压等级"
|
||||
style="width: 100%"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></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%"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in terminaloption"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></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%"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in interfereoption"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
</div>
|
||||
<div class="online_main">
|
||||
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
|
||||
<el-tab-pane :name="0" label="终端在线率列表">
|
||||
<Table
|
||||
ref="tableRef"
|
||||
:tree-config="{ transform: true, parentField: 'pid' }"
|
||||
:scroll-y="{ enabled: true }"
|
||||
v-if="activeName == 0"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :name="1" label="终端在线率图表">
|
||||
<onlineCharts ref="onlineChartsRef" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import { getAreaDept } from '@/api/harmonic-boot/area'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import onlineCharts from './components/onlineCharts.vue'
|
||||
const tableRef = ref()
|
||||
const onlineChartsRef = ref()
|
||||
const dictData = useDictData()
|
||||
//字典获取电压等级
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
//字典获取终端厂家
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
//字典获取干扰源类型
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
//字典获取统计类型
|
||||
const classificationData = dictData.getBasicData('Statistical_Type')
|
||||
//调用区域接口获取区域
|
||||
const treeData = ref([])
|
||||
const idArr = ref([])
|
||||
const activeName = ref(0)
|
||||
const getTreeData = async () => {
|
||||
await getAreaDept().then(res => {
|
||||
var data = res.data
|
||||
data.forEach(element => {
|
||||
idArr.value.push(element.id)
|
||||
})
|
||||
treeData.value = JSON.parse(JSON.stringify(res.data))
|
||||
})
|
||||
}
|
||||
getTreeData()
|
||||
|
||||
const formData = ref({
|
||||
statisticalType: classificationData[0], //统计类型
|
||||
deptIndex: treeData.value[0]?.id, //区域选择
|
||||
scale: voltageleveloption, //电压等级
|
||||
manufacturer: terminaloption, //终端厂家
|
||||
loadType: interfereoption //干扰源类型
|
||||
// searchBeginTime: '',
|
||||
// searchEndTime: ''
|
||||
})
|
||||
formData.value.deptIndex = treeData.value[0]?.id
|
||||
const defaultProps = ref({
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
expandTrigger: 'click' as const
|
||||
})
|
||||
const handleClick = (tab: any, e: any) => {
|
||||
// console.log(tab,e,"??????????");
|
||||
// if(activeName.value===1){
|
||||
tableStore.index()
|
||||
// }
|
||||
}
|
||||
|
||||
// const datePickerRef = ref()
|
||||
const tableHeaderRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
// publicHeight: 60,
|
||||
showPage: false,
|
||||
url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
align: 'left',
|
||||
treeNode: true
|
||||
},
|
||||
{
|
||||
title: '网络参数',
|
||||
field: 'ip',
|
||||
align: 'center',
|
||||
formatter: function (row) {
|
||||
return row.cellValue ? row.cellValue : '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '终端名称',
|
||||
field: 'dataName',
|
||||
align: 'center',
|
||||
formatter: function (row) {
|
||||
return row.cellValue ? row.cellValue : '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '厂家',
|
||||
field: 'manufacturer',
|
||||
align: 'center',
|
||||
formatter: function (row) {
|
||||
return row.cellValue ? row.cellValue : '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '通讯状态',
|
||||
field: 'comFlag',
|
||||
align: 'center',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
null: 'primary',
|
||||
0: 'danger',
|
||||
1: 'success'
|
||||
},
|
||||
replaceValue: {
|
||||
null: '/',
|
||||
0: '中断',
|
||||
1: '正常'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '最新数据时间',
|
||||
field: 'updateTime',
|
||||
align: 'center',
|
||||
formatter: function (row) {
|
||||
return row.cellValue ? row.cellValue : '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '在线率(%)',
|
||||
field: 'onlineRate',
|
||||
align: 'center',
|
||||
formatter: function (row) {
|
||||
return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue.toFixed(2)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '评估',
|
||||
field: 'valueOver',
|
||||
align: 'center',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
null: 'danger',
|
||||
0: 'danger',
|
||||
1: 'success',
|
||||
2: 'primary',
|
||||
3: 'danger'
|
||||
},
|
||||
replaceValue: {
|
||||
null: '暂无评估',
|
||||
0: '暂无评估',
|
||||
1: '优秀',
|
||||
2: '合格',
|
||||
3: '不合格'
|
||||
}
|
||||
}
|
||||
// {
|
||||
// title: '操作',
|
||||
// align: 'center',
|
||||
// width: '180',
|
||||
// render: 'buttons',
|
||||
// buttons: [
|
||||
// {
|
||||
// name: 'edit',
|
||||
// text: '新增',
|
||||
// type: 'primary',
|
||||
// icon: 'el-icon-Plus',
|
||||
// render: 'basicButton'
|
||||
// },
|
||||
// {
|
||||
// name: 'edit',
|
||||
// text: '编辑',
|
||||
// type: 'primary',
|
||||
// icon: 'el-icon-EditPen',
|
||||
// render: 'basicButton'
|
||||
// },
|
||||
// {
|
||||
// name: 'del',
|
||||
// text: '删除',
|
||||
// type: 'danger',
|
||||
// icon: 'el-icon-Delete',
|
||||
// render: 'basicButton'
|
||||
// },
|
||||
// {
|
||||
// name: 'edit',
|
||||
// text: '绑定监测点',
|
||||
// type: 'primary',
|
||||
// icon: 'el-icon-Plus',
|
||||
// render: 'basicButton',
|
||||
// disabled: (row: any) => {
|
||||
// return row.children.length > 0
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.deptIndex = formData.value.deptIndex
|
||||
tableStore.table.params.statisticalType = formData.value.statisticalType
|
||||
tableStore.table.params.scale = formData.value.scale
|
||||
tableStore.table.params.manufacturer = formData.value.manufacturer
|
||||
tableStore.table.params.loadType = formData.value.loadType
|
||||
tableStore.table.params.serverName = 'harmonicBoot'
|
||||
delete tableStore.table.params.timeFlag
|
||||
delete tableStore.table.params.startTime
|
||||
delete tableStore.table.params.endTime
|
||||
delete tableStore.table.params.pageNum
|
||||
delete tableStore.table.params.pageSize
|
||||
onlineChartsRef.value.getTableStoreParams(tableStore.table.params)
|
||||
// tableStore.table.params.searchBeginTime = tableHeaderRef.value.datePickerRef.timeValue[0]
|
||||
// tableStore.table.params.searchEndTime = tableHeaderRef.value.datePickerRef.timeValue[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
let treeData = []
|
||||
|
||||
treeData = tree2List(tableStore.table.data)
|
||||
tableStore.table.data = JSON.parse(JSON.stringify(treeData))
|
||||
setTimeout(() => {
|
||||
activeName.value == 0 && tableRef.value && tableRef.value.getRef().setAllTreeExpand(true)
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
const handleSearch = () => {
|
||||
formData.value.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
formData.value.searchEndTime = datePickerRef.value.timeValue[1]
|
||||
}
|
||||
tableStore.table.params.deptIndex = ''
|
||||
tableStore.table.params.statisticalType = []
|
||||
tableStore.table.params.scale = []
|
||||
tableStore.table.params.manufacturer = []
|
||||
tableStore.table.params.loadType = []
|
||||
provide('tableStore', tableStore)
|
||||
const tree2List = (list: any, pid?: string) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
// item.comFlag = item.comFlag == null ? 3 : item.comFlag
|
||||
item.valueOver == 3.14159 ? 0 : item.valueOver >= 90 ? 1 : item.valueOver && item.valueOver < 90 ? 2 : 3
|
||||
item.pid = pid
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.id)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
onMounted(() => {})
|
||||
|
||||
watch(
|
||||
() => treeData.value,
|
||||
(val, oldVal) => {
|
||||
if (val && val.length != 0) {
|
||||
formData.value.deptIndex = val[0].id
|
||||
tableStore.index()
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.online {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.online_header {
|
||||
width: 100%;
|
||||
max-height: 140px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.online_main {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
620
src/views/pqs/harmonicMonitoring/area/qualifiedRate.vue
Normal file
620
src/views/pqs/harmonicMonitoring/area/qualifiedRate.vue
Normal file
@@ -0,0 +1,620 @@
|
||||
<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>
|
||||
884
src/views/pqs/harmonicMonitoring/area/qypowerment.vue
Normal file
884
src/views/pqs/harmonicMonitoring/area/qypowerment.vue
Normal file
@@ -0,0 +1,884 @@
|
||||
<template>
|
||||
<div class="pd10" v-loading="konzhi" element-loading-text="数据加载中">
|
||||
<el-form :inline="true" :model="formData" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<timepicker :id="id" ref="timepg" :interval="interval" :name="name" :path="path"></timepicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="querfromdata" type="primary" icon="el-icon-search">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<!-- <span class="wr h3">综合评估:</span> -->
|
||||
<!-- <el-tag class="ws" circle style="color:#fff;background:#999999">无</el-tag><span class="h3" style="color:#999999;font-weight:bold">:无数据</span> -->
|
||||
<el-tag class="wd" circle style="color: #fff; background: #339966" size="mini">5级</el-tag>
|
||||
<span class="h3" style="color: #339966; font-weight: bold">:优秀--(4.5,5]</span>
|
||||
<el-tag class="qw" circle style="color: #fff; background: #3399ff" size="mini">4级</el-tag>
|
||||
<span class="h3" style="color: #3399ff; font-weight: bold">:良好--(4,4.5]</span>
|
||||
<el-tag class="qd" circle style="color: #fff; background: #ffcc33" size="mini">3级</el-tag>
|
||||
<span class="h3" style="color: #ffcc33; font-weight: bold">:合格--(3,4]</span>
|
||||
<el-tag class="zzd" circle style="color: #fff; background: #ff9900" size="mini">2级</el-tag>
|
||||
<span class="h3" style="color: #ff9900; font-weight: bold">:较差--(2,3]</span>
|
||||
<el-tag class="zd" circle style="color: #fff; background: #cc0000" size="mini">1级</el-tag>
|
||||
<span class="h3" style="color: #cc0000; font-weight: bold">:极差--[1,2]</span>
|
||||
|
||||
<div :style="`height:${vh};overflow-y:auto;overflow-x:hidden;cursor:pointer;`">
|
||||
<el-row :gutter="5">
|
||||
<el-col
|
||||
v-for="(item, index) in listcard"
|
||||
:key="index"
|
||||
:span="8"
|
||||
style="margin-top: 5px"
|
||||
class="qwe"
|
||||
>
|
||||
<el-card
|
||||
class="box-card3"
|
||||
:style="
|
||||
'height:25vh;color:#fff;opacity:0.8;background-image:linear-gradient(' +
|
||||
settings.themeColor +
|
||||
',#ccc);'
|
||||
"
|
||||
>
|
||||
<div
|
||||
slot="header"
|
||||
class="clearfix"
|
||||
:style="
|
||||
'height:30px;background:' +
|
||||
settings.themeColor +
|
||||
';padding:2%;cursor: pointer;'
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
line-height: 15px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
"
|
||||
>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
<el-tag
|
||||
size="mini"
|
||||
v-if="item.data == 3.14159 || item.data == 0"
|
||||
style="
|
||||
line-height: 10px;
|
||||
padding: 1.5%;
|
||||
float: left;
|
||||
color: #fff;
|
||||
background: #999999;
|
||||
"
|
||||
type=""
|
||||
circle
|
||||
>
|
||||
无
|
||||
</el-tag>
|
||||
<el-tag
|
||||
size="mini"
|
||||
v-if="4.5 < item.data && item.data <= 5 && item.data !== 3.14159"
|
||||
style="
|
||||
line-height: 10px;
|
||||
padding: 1.5%;
|
||||
float: left;
|
||||
color: #fff;
|
||||
background: #339966;
|
||||
"
|
||||
type=""
|
||||
circle
|
||||
>
|
||||
5级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
size="mini"
|
||||
v-if="4 < item.data && item.data <= 4.5 && item.data !== 3.14159"
|
||||
style="
|
||||
line-height: 10px;
|
||||
padding: 1.5%;
|
||||
float: left;
|
||||
color: #fff;
|
||||
background: #3399ff;
|
||||
"
|
||||
type=""
|
||||
circle
|
||||
>
|
||||
4级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
size="mini"
|
||||
v-if="3 < item.data && item.data <= 4 && item.data !== 3.14159"
|
||||
style="
|
||||
line-height: 10px;
|
||||
padding: 1.5%;
|
||||
float: left;
|
||||
color: #fff;
|
||||
background: #ffcc33;
|
||||
"
|
||||
type=""
|
||||
circle
|
||||
>
|
||||
3级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
size="mini"
|
||||
v-if="2 < item.data && item.data <= 3 && item.data !== 3.14159"
|
||||
style="
|
||||
line-height: 10px;
|
||||
padding: 1.5%;
|
||||
float: left;
|
||||
color: #fff;
|
||||
background: #ff9900;
|
||||
"
|
||||
type=""
|
||||
circle
|
||||
>
|
||||
2级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
size="mini"
|
||||
v-if="1 <= item.data && item.data <= 2 && item.data !== 3.14159"
|
||||
style="
|
||||
line-height: 10px;
|
||||
padding: 1.5%;
|
||||
float: left;
|
||||
color: #fff;
|
||||
background: #cc0000;
|
||||
"
|
||||
type=""
|
||||
circle
|
||||
>
|
||||
1级
|
||||
</el-tag>
|
||||
</div>
|
||||
<div style="height: 20vh; overflow-y: auto; overflow-x: hidden">
|
||||
<el-col
|
||||
:span="12"
|
||||
v-for="(item1, index1) in item.children"
|
||||
:key="index1"
|
||||
style="height: 5vh"
|
||||
>
|
||||
<div
|
||||
style="height: 0.3%; background: ; margin-top: 1%; cursor: pointer"
|
||||
>
|
||||
<el-tag
|
||||
size="mini"
|
||||
v-if="item1.data == 3.14159 || item1.data == 0"
|
||||
style="'float: left;color:#fff;background:#999999"
|
||||
type=""
|
||||
icon=""
|
||||
circle
|
||||
>
|
||||
无
|
||||
</el-tag>
|
||||
<el-tag
|
||||
size="mini"
|
||||
v-if="
|
||||
4.5 <= item1.data &&
|
||||
item1.data < 5 &&
|
||||
item1.data !== 3.14159
|
||||
"
|
||||
style="'float: left;color:#fff;background:#339966"
|
||||
type=""
|
||||
icon=""
|
||||
circle
|
||||
>
|
||||
5级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
size="mini"
|
||||
v-if="
|
||||
4 < item1.data && item1.data < 4.5 && item1.data !== 3.14159
|
||||
"
|
||||
style="'float: left;color:#fff;background:#3399FF"
|
||||
type=""
|
||||
icon=""
|
||||
circle
|
||||
>
|
||||
4级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
size="mini"
|
||||
v-if="
|
||||
3 < item1.data && item1.data <= 4 && item1.data !== 3.14159
|
||||
"
|
||||
style="'float: left;color:#fff;background:#FFCC33"
|
||||
type=""
|
||||
icon=""
|
||||
circle
|
||||
>
|
||||
3级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
size="mini"
|
||||
v-if="
|
||||
2 < item1.data && item1.data <= 3 && item1.data !== 3.14159
|
||||
"
|
||||
style="'float: left;color:#fff;background:#FF9900"
|
||||
type=""
|
||||
icon=""
|
||||
circle
|
||||
>
|
||||
2级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
size="mini"
|
||||
v-if="
|
||||
1 <= item1.data && item1.data <= 2 && item1.data !== 3.14159
|
||||
"
|
||||
style="'float: left;color:#fff;background:#CC0000"
|
||||
type=""
|
||||
icon=""
|
||||
circle
|
||||
>
|
||||
1级
|
||||
</el-tag>
|
||||
<span
|
||||
style="
|
||||
line-height: 0.6rem;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-left: 2%;
|
||||
font-size: 12px;
|
||||
"
|
||||
>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="light"
|
||||
:content="item1.name"
|
||||
:open-delay="500"
|
||||
popper-class="atooltip"
|
||||
placement="bottom-start"
|
||||
:visible-arrow="false"
|
||||
>
|
||||
<el-button
|
||||
class="h3"
|
||||
size="mini"
|
||||
type="text"
|
||||
style="color: #000; font-weight: bold"
|
||||
>
|
||||
{{ item1.name.substr(0, 6) }}
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-col :span="24" id="pgcshi" :style="`height:${vhh};overflow: hidden;`">
|
||||
<qypower :xdata="xdata" :ydata="ydata" :title="title" ref="child"></qypower>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
stripe
|
||||
:data="tableData"
|
||||
border
|
||||
class="xshou mt10"
|
||||
highlight-current-row
|
||||
header-cell-class-name="table_header"
|
||||
:header-cell-style="{
|
||||
height: '25px',
|
||||
padding: '0px'
|
||||
}"
|
||||
:row-style="{ height: '28px' }"
|
||||
:cell-style="{ padding: '0px' }"
|
||||
:height="vvh"
|
||||
>
|
||||
<el-table-column align="center" prop="name" label="名称"></el-table-column>
|
||||
<el-table-column sortable align="center" prop="data" label="综合评估值">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.data == 3.14159" type="primary" size="small">
|
||||
暂无数据
|
||||
</span>
|
||||
<span
|
||||
v-if="scope.row.data !== 3.14159 && scope.row.data !== 0"
|
||||
type="primary"
|
||||
size="small"
|
||||
>
|
||||
{{ scope.row.data }}
|
||||
</span>
|
||||
<span v-if="scope.row.data == 0" type="primary" size="small">/</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="monitors"
|
||||
label="监测点个数(个)"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="level"
|
||||
label="评估等级"
|
||||
sortable
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!--变电站-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="stationNmae + '详情'"
|
||||
width="70%"
|
||||
:visible.sync="dialogTableVisible"
|
||||
>
|
||||
<el-table
|
||||
stripe
|
||||
:data="stationData"
|
||||
border
|
||||
height="60vh"
|
||||
v-loading="konzhi"
|
||||
element-loading-text="数据加载中"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column align="center" property="name" label="名称"></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
property="voltageLevel"
|
||||
v-if="flag"
|
||||
:label="zdname"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" property="data" :label="changeName">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.data == -1" type="primary" size="small">暂无数据</span>
|
||||
<span v-if="scope.row.data !== -1" type="primary" size="small">
|
||||
{{ scope.row.data }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" property="data" label="评估">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.data == -1" type="primary" size="small">暂无评估</span>
|
||||
<span v-if="0 <= scope.row.data && scope.row.data < 1" type="primary" size="small">
|
||||
无污染
|
||||
</span>
|
||||
<span v-if="1 <= scope.row.data && scope.row.data < 1.2" type="success" size="small">
|
||||
轻微污染
|
||||
</span>
|
||||
<span v-if="1.2 <= scope.row.data && scope.row.data < 1.6" type="primary" size="small">
|
||||
轻度污染
|
||||
</span>
|
||||
<span v-if="1.6 <= scope.row.data && scope.row.data < 2" type="success" size="small">
|
||||
中度污染
|
||||
</span>
|
||||
<span v-if="2 <= scope.row.data && scope.row.data" type="primary" size="small">
|
||||
重度污染
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
<!--监测点-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="lineName + '所属监测点详情'"
|
||||
width="70%"
|
||||
:visible.sync="dialogTableVisible1"
|
||||
>
|
||||
<el-table
|
||||
stripe
|
||||
:data="lineData"
|
||||
v-loading="konzhi"
|
||||
element-loading-text="拼命加载中"
|
||||
border
|
||||
height="60vh"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column align="center" property="name" label="名称"></el-table-column>
|
||||
<el-table-column align="center" property="powerCompany" label="供电公司"></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
property="substation"
|
||||
label="变电站"
|
||||
:show-overflow-tooltip="true"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" property="busBar" label="母线"></el-table-column>
|
||||
<el-table-column align="center" property="data" :label="changeName">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.data == -1" type="primary" size="small">暂无数据</span>
|
||||
<span v-if="scope.row.data !== -1" type="primary" size="small">
|
||||
{{ scope.row.data }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" property="data" label="评估">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.data == -1" type="primary" size="small">暂无评估</span>
|
||||
<span v-if="0 <= scope.row.data && scope.row.data < 1" type="primary" size="small">
|
||||
无污染
|
||||
</span>
|
||||
<span v-if="1 <= scope.row.data && scope.row.data < 1.2" type="success" size="small">
|
||||
轻微污染
|
||||
</span>
|
||||
<span v-if="1.2 <= scope.row.data && scope.row.data < 1.6" type="primary" size="small">
|
||||
轻度污染
|
||||
</span>
|
||||
<span v-if="1.6 <= scope.row.data && scope.row.data < 2" type="success" size="small">
|
||||
中度污染
|
||||
</span>
|
||||
<span v-if="2 <= scope.row.data && scope.row.data" type="primary" size="small">
|
||||
重度污染
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
<!--排名前十监测点-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="排名前10的监测点"
|
||||
width="70%"
|
||||
:visible.sync="dialogTableVisible2"
|
||||
>
|
||||
<div id="tenlineechart" :style="'width:100%;height:calc(100vh - 400px);zoom:' + device"></div>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import api from '../../../api/integraliy/integraliy'
|
||||
import api1 from '@/api/pollution/pollution'
|
||||
import { mapActions } from 'vuex'
|
||||
import store from '@/store'
|
||||
import defaultSettings from '@/settings'
|
||||
import { dicData } from '../../../assets/commjs/dictypeData'
|
||||
import timepicker from '../../components/TimePicker/index4'
|
||||
import qypower from '../../components/echarts/qypower'
|
||||
|
||||
import { color } from 'echarts'
|
||||
export default {
|
||||
name: 'qualityestimate',
|
||||
components: {
|
||||
timepicker,
|
||||
qypower
|
||||
},
|
||||
computed: {
|
||||
settings() {
|
||||
return this.$store.state.settings
|
||||
}
|
||||
// ...mapActions({
|
||||
// changeSetting: 'settings/changeSetting'
|
||||
// }),
|
||||
},
|
||||
watch: {},
|
||||
data() {
|
||||
return {
|
||||
color: window.localStorage.CUSTOM_SETTINGS.themeColor,
|
||||
h: undefined,
|
||||
vh: null,
|
||||
vhh: null,
|
||||
vvh: null,
|
||||
tvh: '',
|
||||
zoom: '',
|
||||
loading: true,
|
||||
echartsheight: undefined,
|
||||
tenheight: undefined,
|
||||
konzhi: true,
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
timevalue: [],
|
||||
zdname: '',
|
||||
Indextype: undefined,
|
||||
interval: 3,
|
||||
stationData: [],
|
||||
lineData: [],
|
||||
// tenlineData:[],
|
||||
dialogTableVisible: false,
|
||||
dialogTableVisible1: false,
|
||||
dialogTableVisible2: false,
|
||||
path: '/harmonic-boot/qydetailedAnalysis/pollutionqy',
|
||||
name: 'wtzhpg',
|
||||
asideheight: undefined,
|
||||
rightheight: undefined,
|
||||
tableheight: undefined,
|
||||
changeName: '谐波电压(%)',
|
||||
voltage: 0,
|
||||
voltageoption: [],
|
||||
fanwei: 0,
|
||||
fanweioption: [],
|
||||
copent: 0,
|
||||
copentoption: [],
|
||||
id: 1,
|
||||
title: '部门',
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
dataList: [],
|
||||
activeName: 'tab1',
|
||||
panindexOptions: [],
|
||||
classvalue: '',
|
||||
classificationData: [],
|
||||
flag: false,
|
||||
stationNmae: '',
|
||||
lineName: '',
|
||||
formData: {
|
||||
deptIndex: '',
|
||||
id: '',
|
||||
//loadType:null,
|
||||
//manufacturer:null,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
//scale:null,
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
//serverName:'',
|
||||
statisticalType: {}
|
||||
},
|
||||
device: 1,
|
||||
listcard: [],
|
||||
tableData: [],
|
||||
eachartfalg: false,
|
||||
xdata1: [],
|
||||
ydata1: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
var data = window.sessionStorage.getItem('Info')
|
||||
data = eval('(' + data + ')')
|
||||
this.formData.deptIndex = data.deptId
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.querfromdata()
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
changeSetting: 'settings/changeSetting'
|
||||
}),
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
|
||||
this.vvh = window.sessionStorage.getItem('appheight') / 2 - 25 + 'px'
|
||||
this.vhh = (window.sessionStorage.getItem('appheight') - 80) / 2 + 'px'
|
||||
if (this.myChartes) {
|
||||
this.myChartes.resize()
|
||||
}
|
||||
},
|
||||
//切换指标类型
|
||||
//字典获取数据指标类型
|
||||
getIndexType() {
|
||||
var code = 'Indicator_Type'
|
||||
this.classificationData = dicData(code, ['PLPC', 'DYPC', 'SXDYBPHD', 'CSSB', 'FXDL', 'JXBDY'])
|
||||
this.formData.statisticalType = this.classificationData[0]
|
||||
},
|
||||
|
||||
//时间格式转化
|
||||
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.searchBeginTime)
|
||||
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.searchEndTime)
|
||||
return timearr
|
||||
},
|
||||
//查询触发//获取部门变电站数据
|
||||
querfromdata() {
|
||||
this.interval = this.$refs.timepg.intervald
|
||||
if (this.$refs.timepg.intervald == 3) {
|
||||
let timedate = this.$refs.timepg.timeValue[1]
|
||||
let timedate1 = timedate.split('-')
|
||||
if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
|
||||
let strTime = this.$refs.timepg.timeValue[0]
|
||||
let strTime1 = this.$refs.timepg.timeValue[1]
|
||||
let str1 = strTime.split('-')
|
||||
let str2 = strTime1.split('-')
|
||||
var now = new Date()
|
||||
let month = now.getMonth()
|
||||
if (month == 0) {
|
||||
month = 12
|
||||
str1[0] = str1[0] - 1
|
||||
str2[0] = str2[0] - 1
|
||||
}
|
||||
if (month < 10) {
|
||||
month = '0' + month
|
||||
}
|
||||
this.formData.searchBeginTime = str1[0] + '-' + month + '-' + str1[2]
|
||||
if (
|
||||
month == 1 ||
|
||||
month == 3 ||
|
||||
month == 5 ||
|
||||
month == 7 ||
|
||||
month == 8 ||
|
||||
month == 10 ||
|
||||
month == 12
|
||||
) {
|
||||
this.formData.searchEndTime = str2[0] + '-' + month + '-31'
|
||||
} else {
|
||||
this.formData.searchEndTime = str2[0] + '-' + month + '-30'
|
||||
}
|
||||
} else {
|
||||
this.formData.searchBeginTime = this.$refs.timepg.timeValue[0]
|
||||
this.formData.searchEndTime = this.$refs.timepg.timeValue[1]
|
||||
}
|
||||
} else if (this.$refs.timepg.intervald == 4) {
|
||||
let timedate = this.$refs.timepg.timeValue[1]
|
||||
let timedate1 = timedate.split('-')
|
||||
if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
|
||||
// 获取前七天的日期
|
||||
var previousDates = []
|
||||
for (var i = 6; i >= 0; i--) {
|
||||
//var previousDate = new Date(currentDate);
|
||||
let strTime = this.$refs.timepg.timeValue[0]
|
||||
var currentDate = new Date(strTime)
|
||||
let previousDate = new Date(Date.parse(strTime.replace(/-/g, '/')))
|
||||
previousDate.setDate(currentDate.getDate() - i)
|
||||
previousDates.push(previousDate)
|
||||
}
|
||||
// 格式化日期
|
||||
var formattedDates = previousDates.map(function (date) {
|
||||
var year = date.getFullYear()
|
||||
var month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||||
var day = date.getDate().toString().padStart(2, '0')
|
||||
|
||||
let d = year + '-' + month + '-' + day
|
||||
// console.log("+++++++++++",d)
|
||||
// 输出前七天的日期数组
|
||||
return d
|
||||
})
|
||||
this.formData.searchBeginTime = formattedDates[0]
|
||||
this.formData.searchEndTime = formattedDates[formattedDates.length - 1]
|
||||
//console.log(formattedDates);
|
||||
} else {
|
||||
this.formData.searchBeginTime = this.$refs.timepg.timeValue[0]
|
||||
this.formData.searchEndTime = this.$refs.timepg.timeValue[1]
|
||||
}
|
||||
} else if (this.$refs.timepg.intervald == 5) {
|
||||
let timedate = this.$refs.timepg.timeValue[1]
|
||||
let timedate1 = timedate.split('-')
|
||||
if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
|
||||
let strTime = this.$refs.timepg.timeValue[0]
|
||||
let currentDate = new Date(Date.parse(strTime.replace(/-/g, '/')))
|
||||
// console.log('当前日期（中国标准时间）：', currentDate);
|
||||
// console.log("++++",currentDate)
|
||||
|
||||
// 向前推一天
|
||||
currentDate.setDate(currentDate.getDate() - 1)
|
||||
|
||||
// 格式化日期字符串
|
||||
const formatDate = date => {
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
let strTime2 = this.$refs.timepg.timeValue[1]
|
||||
let currentDate2 = new Date(Date.parse(strTime2.replace(/-/g, '/')))
|
||||
// console.log('当前日期（中国标准时间）：', currentDate);
|
||||
// console.log("++++",currentDate)
|
||||
|
||||
// 向前推一天
|
||||
currentDate.setDate(currentDate.getDate() - 1)
|
||||
|
||||
// 格式化日期字符串
|
||||
const formatDate2 = date => {
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
// console.log('当前日期：', formatDate(new Date())); // 当前日期
|
||||
// console.log('向前推一天：', formatDate(currentDate)); // 一天前的日期
|
||||
this.formData.searchBeginTime = formatDate(currentDate)
|
||||
this.formData.searchEndTime = formatDate(currentDate2)
|
||||
} else {
|
||||
this.formData.searchBeginTime = this.$refs.timepg.timeValue[0]
|
||||
this.formData.searchEndTime = this.$refs.timepg.timeValue[1]
|
||||
}
|
||||
|
||||
//let estr = this.$refs.fff.timeValue[1]
|
||||
} else {
|
||||
this.formData.searchBeginTime = this.$refs.timepg.timeValue[0]
|
||||
this.formData.searchEndTime = this.$refs.timepg.timeValue[1]
|
||||
}
|
||||
|
||||
this.konzhi = true
|
||||
this.tableData = []
|
||||
// this.timeValue = this.$refs.timepg.timeValue;
|
||||
// this.dateFormat(this.timeValue[0], this.timeValue[1]);
|
||||
|
||||
var data = window.sessionStorage.getItem('Info')
|
||||
data = eval('(' + data + ')')
|
||||
this.formData.deptIndex = data.deptId
|
||||
//this.eachartfalg = false
|
||||
//this.formData.type = this.Indextype
|
||||
api.getComAccessData(this.formData).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
this.listcard = res.data
|
||||
this.tableData = res.data
|
||||
this.konzhi = false
|
||||
var xarr = []
|
||||
var yarr = []
|
||||
res.data.forEach(element => {
|
||||
let name = element.name + '\n(' + element.monitors + ')'
|
||||
xarr.push(name)
|
||||
|
||||
yarr.push(element.data)
|
||||
})
|
||||
this.xdata = xarr
|
||||
|
||||
for (var i = 0; i < yarr.length; i++) {
|
||||
if (yarr[i] == 3.14159 || yarr[i] == 0) {
|
||||
yarr[i] = 0.2
|
||||
}
|
||||
}
|
||||
this.ydata = yarr
|
||||
|
||||
// this.eachartfalg = true
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$refs.child.evaluation()
|
||||
})
|
||||
})
|
||||
|
||||
//alert('父组件条件查询触发方法'+ data)
|
||||
},
|
||||
handleClick(tab, event) {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../styles/comStyle.less');
|
||||
::v-deep .el-card__header {
|
||||
padding: 0px 0px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wr {
|
||||
margin-left: 0%;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
.zd {
|
||||
background: #cc0000;
|
||||
color: #fff;
|
||||
}
|
||||
.zzd {
|
||||
background: #ff9900;
|
||||
color: #fff;
|
||||
}
|
||||
.qd {
|
||||
background: #ffcc33;
|
||||
color: #fff;
|
||||
}
|
||||
.qw {
|
||||
background: #3399ff;
|
||||
color: #fff;
|
||||
}
|
||||
.wd {
|
||||
background: #339966;
|
||||
color: #fff;
|
||||
}
|
||||
.ws {
|
||||
background: #999999;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main {
|
||||
overflow: hidden;
|
||||
}
|
||||
.conent {
|
||||
}
|
||||
.qwe {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 0px 0px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: block;
|
||||
width: 8px !important;
|
||||
height: 14px;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
background-color: #79878769;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
.is-leaf {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
</style>
|
||||
<style></style>
|
||||
671
src/views/pqs/harmonicMonitoring/area/steadystate.vue
Normal file
671
src/views/pqs/harmonicMonitoring/area/steadystate.vue
Normal file
@@ -0,0 +1,671 @@
|
||||
<template>
|
||||
<div class="pd10" v-loading="loading" element-loading-text="数据加载中">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<!-- <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>
|
||||
<timepicker
|
||||
:id="id"
|
||||
ref="timewt"
|
||||
:interval="interval"
|
||||
:treenode="treenode"
|
||||
:tablename="tablename"
|
||||
:name="name"
|
||||
:path="path"
|
||||
:dataTree="dataTree"
|
||||
></timepicker>
|
||||
</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>
|
||||
<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 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="selet1" 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.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 :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-tabs :style="'height:' + vh" type="border-card" v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane :lazy="false" label="稳态指标符合性占比表格" name="tab1">
|
||||
<steadystatetable
|
||||
:classvalue="classt"
|
||||
:tableData="tableData"
|
||||
:loading="loading"
|
||||
></steadystatetable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :lazy="false" label="稳态指标符合性占比图表" name="tab2">
|
||||
<steadystateechart
|
||||
ref="wtcbzb"
|
||||
v-show="eacjartflag && activeName == 'tab2'"
|
||||
:loading="loading"
|
||||
:title="title"
|
||||
:classvalue="classt"
|
||||
:xdata="xdata"
|
||||
:ydata="ydata"
|
||||
:valueData="valueData"
|
||||
></steadystateechart>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import api1 from '@/api/pollution/pollution'
|
||||
import { dicData } from '../../../assets/commjs/dictypeData'
|
||||
import api from '../../../api/integraliy/integraliy'
|
||||
import timepicker from '../../components/TimePicker/index4'
|
||||
import steadystatetable from '../../components/steadystatetable'
|
||||
import steadystateechart from '../../components/echarts/steadystateechart'
|
||||
export default {
|
||||
name: 'exceedingstandards',
|
||||
components: {
|
||||
timepicker,
|
||||
steadystatetable,
|
||||
steadystateechart
|
||||
},
|
||||
watch: {},
|
||||
computed: {},
|
||||
data() {
|
||||
return {
|
||||
cu: '',
|
||||
quyuname: undefined,
|
||||
quyunames: undefined,
|
||||
timeValue: [],
|
||||
dd: false,
|
||||
formInline: {},
|
||||
view: false,
|
||||
xdata: [],
|
||||
ydata1: [],
|
||||
ydata8: [],
|
||||
classt: 'Power_Network',
|
||||
tablename: 'tab1',
|
||||
eacjartflag: true,
|
||||
interval: 3,
|
||||
falg: true,
|
||||
treeData: [],
|
||||
idArr: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
deptName: '',
|
||||
deptIndex: '',
|
||||
name: 'sjwzx',
|
||||
path: '/harmonic-boot/harmonic/getIntegrityData',
|
||||
asideheight: undefined,
|
||||
id: 1,
|
||||
title: '电网拓扑',
|
||||
xdata: [],
|
||||
ydata: [],
|
||||
centerdata: [],
|
||||
valueData: [],
|
||||
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: [],
|
||||
timeFlag: 1
|
||||
},
|
||||
periodBeginTime: '',
|
||||
periodEndTime: '',
|
||||
timehuanbiValue: [],
|
||||
tableData: [],
|
||||
ping: '',
|
||||
time: '',
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
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'
|
||||
},
|
||||
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.deptName = data.name
|
||||
this.$refs.selet1.blur()
|
||||
this.deptId = data.id
|
||||
this.formData.deptIndex = data.id
|
||||
},
|
||||
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.dd = false
|
||||
this.interval = this.$refs.timewt.intervald
|
||||
if (this.interval == 1 || this.interval == 2) {
|
||||
this.formData.timeFlag = 0
|
||||
} else if (this.interval == 3 || this.interval == 4 || this.interval == 5) {
|
||||
this.formData.timeFlag = 1
|
||||
}
|
||||
this.loading = true
|
||||
this.timeValue = this.$refs.timewt.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
|
||||
api.getSteadyExceedRateData(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() {
|
||||
var data = {
|
||||
deptIndex: this.formData.deptIndex,
|
||||
loadType: this.formData.loadType,
|
||||
monitorFlag: this.formData.monitorFlag,
|
||||
manufacturer: this.formData.manufacturer,
|
||||
searchBeginTime: this.formData.searchBeginTime,
|
||||
searchEndTime: this.formData.searchEndTime,
|
||||
statisticalType: this.formData.statisticalType,
|
||||
powerFlag: this.formData.powerFlag,
|
||||
scale: this.formData.scale,
|
||||
periodBeginTime: this.periodBeginTime,
|
||||
periodEndTime: this.periodEndTime,
|
||||
timeFlag: this.formData.timeFlag
|
||||
}
|
||||
this.ydata = []
|
||||
this.ydata1 = []
|
||||
api.getSteadyExceedRateCensus(data).then(res => {
|
||||
this.eacjartflag = true
|
||||
if (res.code == 'A0000') {
|
||||
var ydata = res.data.type
|
||||
this.ydata = ydata
|
||||
//this.ydata = ['江苏省', '浙江省', '福建省','江西省', '安徽省', '河北省', '海南省','上海市']
|
||||
// var xdata = res.data.time;
|
||||
let time = res.data.time
|
||||
for (var i = 0; i < time.length; i++) {
|
||||
if (i != 0) {
|
||||
i
|
||||
time[i] = time[i].slice(5)
|
||||
} else if (i == 0) {
|
||||
let date = time[i].slice(5)
|
||||
let t = time[i].slice(0, 4)
|
||||
time[i] = date + '\n' + '(' + t + ')'
|
||||
}
|
||||
}
|
||||
this.xdata = time
|
||||
|
||||
// this.xdata = ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月','10月','11月','12月']
|
||||
var data = res.data.steadyExceedRate
|
||||
|
||||
// this.centerdata = [[56,28,57,39,60,86,95,''],[36,18,67,59,80,66,95,45],[76,78,47,69,90,56,25,''],[66,88,67,89,90,86,95,80],
|
||||
// [96,58,57,39,90,86,95,89],[46,68,87,99,80,76,55,70,''],[26,53,57,59,90,86,85,90],[66,98,77,89,60,66,95,''],
|
||||
// [86,68,67,89,90,96,55,90],[56,58,67,89,90,86,65,''],[76,78,67,89,30,66,75,''],[46,88,87,89,90,86,95,17],
|
||||
// ]
|
||||
var arr = []
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
for (var j = 0; j < data[i].length; j++) {
|
||||
if (data[i][j] == 3.14159 || data[i][j] == 0) {
|
||||
arr.push([i, j, 0])
|
||||
} else if (data[i][j] == 3.1415) {
|
||||
arr.push([i, j, '/'])
|
||||
} else {
|
||||
arr.push([i, j, data[i][j]])
|
||||
}
|
||||
}
|
||||
}
|
||||
this.valueData = arr
|
||||
this.$nextTick(() => {
|
||||
this.$refs.wtcbzb.steadyqualified()
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
//标签切换
|
||||
handleClick(tab, event) {
|
||||
this.tablename = tab.name
|
||||
if (tab.name == 'tab1') {
|
||||
//this.thb = false
|
||||
this.eacjartflag = false
|
||||
this.$nextTick(() => {
|
||||
this.$refs.wtcbzb.steadyqualified()
|
||||
})
|
||||
} else if (tab.name == 'tab2') {
|
||||
//this.thb = true
|
||||
this.eacjartflag = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.wtcbzb.steadyqualified()
|
||||
})
|
||||
}
|
||||
},
|
||||
//开关触发
|
||||
handleStatusChange(val) {
|
||||
this.formData.monitorFlag = val
|
||||
//this.fiveTreeData()
|
||||
},
|
||||
//获取区域
|
||||
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
|
||||
}
|
||||
})
|
||||
},
|
||||
//字典获取数据电压等级
|
||||
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)
|
||||
})
|
||||
},
|
||||
changePageNum(data) {
|
||||
this.pageData.pageNum = data
|
||||
alert('父组件当前页' + this.pageData.pageNum)
|
||||
},
|
||||
changePageSize(data) {
|
||||
this.pageData.pageSize = data
|
||||
alert('父组件当前条数' + this.pageData.pageSize)
|
||||
},
|
||||
rest() {}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
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>
|
||||
1073
src/views/pqs/harmonicMonitoring/area/transienteventlist.vue
Normal file
1073
src/views/pqs/harmonicMonitoring/area/transienteventlist.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -97,9 +97,28 @@ const tableStore = new TableStore({
|
||||
|
||||
loadCallback: () => {
|
||||
// tableStore.table.data.type
|
||||
let code = tableStore.table.params.statisticalType.code
|
||||
let title = '',
|
||||
titleX = ''
|
||||
if (code == 'Power_Network') {
|
||||
title = '区域'
|
||||
titleX = '区域'
|
||||
} else if (code == 'Manufacturer') {
|
||||
title = '终端厂家'
|
||||
titleX = '终端\n厂家'
|
||||
} else if (code == 'Voltage_Level') {
|
||||
title = '电压等级'
|
||||
titleX = '电压\n等级'
|
||||
} else if (code == 'Load_Type') {
|
||||
title = '干扰源类型'
|
||||
titleX = '干扰\n源类型'
|
||||
} else if (code == 'Report_Type') {
|
||||
title = '上报类型'
|
||||
titleX = '上报\n类型'
|
||||
}
|
||||
options.value = {
|
||||
title: {
|
||||
text: tableStore.table.params.statisticalType.name
|
||||
text: title
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
@@ -122,7 +141,7 @@ const tableStore = new TableStore({
|
||||
right: '80px'
|
||||
},
|
||||
xAxis: {
|
||||
name: tableStore.table.params.statisticalType.name,
|
||||
name: titleX,
|
||||
data: tableStore.table.data.map((item: any) => item.type)
|
||||
},
|
||||
yAxis: {
|
||||
|
||||
@@ -97,9 +97,28 @@ const tableStore = new TableStore({
|
||||
|
||||
loadCallback: () => {
|
||||
// tableStore.table.data.type
|
||||
let code = tableStore.table.params.statisticalType.code
|
||||
let title = '',
|
||||
titleX = ''
|
||||
if (code == 'Power_Network') {
|
||||
title = '区域'
|
||||
titleX = '区域'
|
||||
} else if (code == 'Manufacturer') {
|
||||
title = '终端厂家'
|
||||
titleX = '终端\n厂家'
|
||||
} else if (code == 'Voltage_Level') {
|
||||
title = '电压等级'
|
||||
titleX = '电压\n等级'
|
||||
} else if (code == 'Load_Type') {
|
||||
title = '干扰源类型'
|
||||
titleX = '干扰\n源类型'
|
||||
} else if (code == 'Report_Type') {
|
||||
title = '上报类型'
|
||||
titleX = '上报\n类型'
|
||||
}
|
||||
options.value = {
|
||||
title: {
|
||||
text: tableStore.table.params.statisticalType.name
|
||||
text: title
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
@@ -122,7 +141,7 @@ const tableStore = new TableStore({
|
||||
right: '80px'
|
||||
},
|
||||
xAxis: {
|
||||
name: tableStore.table.params.statisticalType.name,
|
||||
name: titleX,
|
||||
data: tableStore.table.data.type
|
||||
},
|
||||
yAxis: {
|
||||
|
||||
@@ -317,6 +317,7 @@ const startRunTest = () => {
|
||||
// 下载报告
|
||||
const downloadTheReport = (url: string) => {
|
||||
getFileNameAndFilePath({ filePath: url }).then((res: any) => {
|
||||
console.log(res.data.url,"res");
|
||||
const link = document.createElement('a')
|
||||
link.href = res.data.url
|
||||
link.download = res.data.name
|
||||
|
||||
Reference in New Issue
Block a user