Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

谐波监测-区域-终端在线率页面迁移

Browse Source
This commit is contained in:
zhujiyan
2024-08-05 18:07:23 +08:00
parent bd3dbca8e1
commit c80cbe20fb
15 changed files with 6805 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

884
src/views/pqs/harmonicMonitoring/area/qypowerment.vue Normal file
View 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>