1034 lines
41 KiB
Vue
1034 lines
41 KiB
Vue
|
<template>
|
|||
|
|
<div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
|
|||
|
|
<!--查询条件-->
|
|||
|
|
<el-form :inline="true" :model="formData" class="demo-form-inline">
|
|||
|
|
<el-form-item v-if="this.quyunames != undefined">
|
|||
|
|
<el-switch
|
|||
|
|
class="tableScopeSwitch"
|
|||
|
|
:active-value="0"
|
|||
|
|
: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>
|
|||
|
|
<Timeinterval ref="interval" :interval="3"></Timeinterval>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" class="el-icon-search" @click="getList">查询</el-button>
|
|||
|
|
<el-button type="primary" class="el-icon-download" @click="exportEvent">导出</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>
|
|||
|
|
<Area @click="handleNodeClick"></Area>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="终端等级:">
|
|||
|
|
<el-select clearable v-model="formData.lineGrade" placeholder="监测点等级" style="width: 100%">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in terminalClass"
|
|||
|
|
:key="item.id"
|
|||
|
|
:label="item.name"
|
|||
|
|
:value="item.id"
|
|||
|
|
></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="统计类型:">
|
|||
|
|
<el-select v-model="formData.statisticalType" @change="changeclasss" placeholder="请选择统计类型">
|
|||
|
|
<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 v-model="formData.scale" multiple collapse-tags clearable placeholder="请选择电压等级">
|
|||
|
|
<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="请选择终端厂家"
|
|||
|
|
>
|
|||
|
|
<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="请选择干扰源类型"
|
|||
|
|
>
|
|||
|
|
<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>
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<vxe-table
|
|||
|
|
:data="tableData"
|
|||
|
|
border
|
|||
|
|
stripe
|
|||
|
|
:row-config="{ isCurrent: true, isHover: true }"
|
|||
|
|
ref="Statistics"
|
|||
|
|
:height="vh"
|
|||
|
|
style="width: 100%"
|
|||
|
|
:header-cell-style="{
|
|||
|
|
height: '25px',
|
|||
|
|
top: '0px',
|
|||
|
|
padding: '0px'
|
|||
|
|
}"
|
|||
|
|
header-cell-class-name="table_header"
|
|||
|
|
:row-style="{ height: '25px' }"
|
|||
|
|
:cell-style="{ padding: '0px' }"
|
|||
|
|
>
|
|||
|
|
<vxe-table-column align="center" field="orderNo" width="80" title="序号"></vxe-table-column>
|
|||
|
|
<vxe-table-column align="center" field="areaName" title="统计方式" show-overflow></vxe-table-column>
|
|||
|
|
<vxe-table-colgroup align="center" field="jcd" title="监测点">
|
|||
|
|
<vxe-table-column align="center" field="addLineNum" title="监测点新增数"></vxe-table-column>
|
|||
|
|
<vxe-table-column align="center" field="lineNum" title="监测点总数"></vxe-table-column>
|
|||
|
|
</vxe-table-colgroup>
|
|||
|
|
<vxe-table-colgroup align="center" field="zz" title="装置">
|
|||
|
|
<vxe-table-column align="center" field="deviceNum" title="装置新增数"></vxe-table-column>
|
|||
|
|
<vxe-table-column align="center" field="addDeviceNum" title="装置总数"></vxe-table-column>
|
|||
|
|
<vxe-table-colgroup align="center" title="投运">
|
|||
|
|
<vxe-table-column align="center" field="normalStateNum" title="在线">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span style="color: green">{{ scope.row.normalStateNum }}</span>
|
|||
|
|
</template>
|
|||
|
|
</vxe-table-column>
|
|||
|
|
<vxe-table-column align="center" field="suspendStateNum" title="中断">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span style="color: red">{{ scope.row.suspendStateNum }}</span>
|
|||
|
|
</template>
|
|||
|
|
</vxe-table-column>
|
|||
|
|
</vxe-table-colgroup>
|
|||
|
|
<vxe-table-column align="center" field="offStreamStateNum" title="停运"></vxe-table-column>
|
|||
|
|
<vxe-table-column align="center" field="hotSpareStateNum" title="热备用">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span style="color: #960">{{ scope.row.hotSpareStateNum }}</span>
|
|||
|
|
</template>
|
|||
|
|
</vxe-table-column>
|
|||
|
|
</vxe-table-colgroup>
|
|||
|
|
</vxe-table>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<div id="left">
|
|||
|
|
<div id="linexzs" ref="left"></div>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<div id="middle">
|
|||
|
|
<div id="linezs" ref="middle"></div>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<div id="right">
|
|||
|
|
<div id="linestatus" ref="right"></div>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import Timeinterval from '@/views/components/TimePicker/index4'
|
|||
|
|
import yan from '@/assets/commjs/color'
|
|||
|
|
import { dicData } from '@/assets/commjs/dictypeData'
|
|||
|
|
import { getLineStatisticsDetail } from '@/api/BusinessAdministrator/Statistics'
|
|||
|
|
import Area from '@/views/components/Area/Area.vue'
|
|||
|
|
export default {
|
|||
|
|
name: 'monitoringdistribution',
|
|||
|
|
components: {
|
|||
|
|
Area,
|
|||
|
|
Timeinterval
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
quyuname: undefined,
|
|||
|
|
quyunames: undefined,
|
|||
|
|
zoom: '', //图表焦点校验
|
|||
|
|
vh: null,
|
|||
|
|
height: undefined,
|
|||
|
|
statisticalTypeList: [],
|
|||
|
|
classt: 'Power_Network',
|
|||
|
|
treeData: [],
|
|||
|
|
idArr: [],
|
|||
|
|
deptName: '全国',
|
|||
|
|
deptIndex: '',
|
|||
|
|
treenode: '',
|
|||
|
|
dataTree: '',
|
|||
|
|
myChartes2: '',
|
|||
|
|
myChartes1: '',
|
|||
|
|
myChartes3: '',
|
|||
|
|
voltageleve1: '',
|
|||
|
|
//电压等级
|
|||
|
|
voltageleveloption: [],
|
|||
|
|
terminalClass: [],
|
|||
|
|
terminaloption: [],
|
|||
|
|
interfereoption: [],
|
|||
|
|
classificationData: [],
|
|||
|
|
item: ['', ''],
|
|||
|
|
formData: {
|
|||
|
|
//后面需要修改
|
|||
|
|
deptIndex: '',
|
|||
|
|
lineGrade: '',
|
|||
|
|
monitorFlag: 0,
|
|||
|
|
loadType: [],
|
|||
|
|
manufacturer: [],
|
|||
|
|
searchBeginTime: '',
|
|||
|
|
searchEndTime: '',
|
|||
|
|
statisticalType: '',
|
|||
|
|
scale: []
|
|||
|
|
},
|
|||
|
|
tableData: [],
|
|||
|
|
isLoading: false,
|
|||
|
|
view: false,
|
|||
|
|
quyuname: '数据中心'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
// let data = window.sessionStorage.getItem("sysData");
|
|||
|
|
// let yudata = eval("(" + data + ")");
|
|||
|
|
// let str = yudata.dataReport.split("，");
|
|||
|
|
// this.quyuname = str[1];
|
|||
|
|
var info = window.sessionStorage.getItem('Info')
|
|||
|
|
info = eval('(' + info + ')')
|
|||
|
|
this.formData.deptIndex = info.deptId
|
|||
|
|
this.info()
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.getList()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.setHeight()
|
|||
|
|
window.addEventListener('resize', this.setHeight)
|
|||
|
|
let data = window.sessionStorage.getItem('sysData')
|
|||
|
|
let yudata = eval('(' + data + ')')
|
|||
|
|
//debugger
|
|||
|
|
let str = yudata.dataReport.split('，')
|
|||
|
|
this.quyuname = str[0]
|
|||
|
|
this.quyunames = str[1]
|
|||
|
|
this.resizeEchartLeft()
|
|||
|
|
this.resizeEchartRight()
|
|||
|
|
this.resizeEchartMiddle()
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
window.removeEventListener('resize', this.setHeight)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
setHeight() {
|
|||
|
|
this.vh = window.sessionStorage.getItem('appheight') / 2 - 70
|
|||
|
|
if (this.myChartes1 !== '') {
|
|||
|
|
this.myChartes1.resize()
|
|||
|
|
} else if (this.myChartes2 !== '') {
|
|||
|
|
this.myChartes2.resize()
|
|||
|
|
} else if (this.myChartes3 !== '') {
|
|||
|
|
this.myChartes3.resize()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
info() {
|
|||
|
|
//终端等级
|
|||
|
|
this.terminalClass = dicData('Dev_Level', [])
|
|||
|
|
this.formData.lineGrade = this.terminalClass[0].id
|
|||
|
|
// 获取统计类型
|
|||
|
|
this.classificationData = dicData('Statistical_Type', ['Report_Type'])
|
|||
|
|
this.formData.statisticalType = this.classificationData[0]
|
|||
|
|
// 字典获取数据电压等级;
|
|||
|
|
this.voltageleveloption = dicData('Dev_Voltage_Stand', [])
|
|||
|
|
this.formData.scale = this.voltageleveloption
|
|||
|
|
//字典获取数据终端厂家
|
|||
|
|
this.terminaloption = dicData('Dev_Manufacturers', [])
|
|||
|
|
this.formData.manufacturer = this.terminaloption
|
|||
|
|
//字典获取数据干扰源类型
|
|||
|
|
this.interfereoption = dicData('Interference_Source', [])
|
|||
|
|
this.formData.loadType = this.interfereoption
|
|||
|
|
},
|
|||
|
|
//切换统计类型
|
|||
|
|
changeclasss(val) {
|
|||
|
|
this.classt = val.code
|
|||
|
|
// console.log(val);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
initData() {
|
|||
|
|
// console.log(this.tableData );
|
|||
|
|
|
|||
|
|
const echarts = require('echarts')
|
|||
|
|
let domID1 = document.getElementById('linexzs')
|
|||
|
|
this.myChartes1 = echarts.init(domID1, null, { renderer: 'svg' })
|
|||
|
|
let domID2 = document.getElementById('linezs')
|
|||
|
|
this.myChartes2 = echarts.init(domID2, null, { renderer: 'svg' })
|
|||
|
|
let domID3 = document.getElementById('linestatus')
|
|||
|
|
this.myChartes3 = echarts.init(domID3, null, { renderer: 'svg' })
|
|||
|
|
// this.myChartes = echarts.init(document.getElementById("linezs"));
|
|||
|
|
// this.myChartes2 = echarts.init(document.getElementById("linexzs"));
|
|||
|
|
// this.myChartes3 = echarts.init(document.getElementById("linestatus"));
|
|||
|
|
setTimeout(() => {
|
|||
|
|
;(domID1.style.width = window.sessionStorage.getItem('left') / 3 + 'px'),
|
|||
|
|
(domID1.style.height = window.sessionStorage.getItem('appheight') / 2 + 20 + 'px')
|
|||
|
|
;(domID2.style.width = window.sessionStorage.getItem('middle') / 3 + 'px'),
|
|||
|
|
(domID2.style.height = window.sessionStorage.getItem('appheight') / 2 + 20 + 'px')
|
|||
|
|
;(domID3.style.width = window.sessionStorage.getItem('right') / 3 + 'px'),
|
|||
|
|
(domID3.style.height = window.sessionStorage.getItem('appheight') / 2 + 20 + 'px')
|
|||
|
|
}, 0)
|
|||
|
|
var white = '#000'
|
|||
|
|
let areaName = []
|
|||
|
|
let addLineNum = []
|
|||
|
|
let lineNum = []
|
|||
|
|
let normalStateNum = []
|
|||
|
|
let suspendStateNum = []
|
|||
|
|
let offStreamStateNum = []
|
|||
|
|
let hotSpareStateNum = []
|
|||
|
|
let echartsData = JSON.parse(JSON.stringify(this.tableData))
|
|||
|
|
echartsData.splice(-1)
|
|||
|
|
echartsData.forEach(item => {
|
|||
|
|
// console.log(item,'===========');
|
|||
|
|
areaName.push(item.areaName)
|
|||
|
|
addLineNum.push(item.addLineNum)
|
|||
|
|
lineNum.push(item.lineNum)
|
|||
|
|
normalStateNum.push(item.normalStateNum)
|
|||
|
|
suspendStateNum.push(item.suspendStateNum)
|
|||
|
|
offStreamStateNum.push(item.offStreamStateNum)
|
|||
|
|
hotSpareStateNum.push(item.hotSpareStateNum)
|
|||
|
|
})
|
|||
|
|
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
|||
|
|
this.myChartes1.clear()
|
|||
|
|
this.myChartes2.clear()
|
|||
|
|
this.myChartes3.clear()
|
|||
|
|
var option1 = {
|
|||
|
|
//backgroundColor: '#151F2A',
|
|||
|
|
title: {
|
|||
|
|
text: '监测点总数',
|
|||
|
|
left: 'center',
|
|||
|
|
top: '20px',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: yan.EchartObject.titleNamefontSize1,
|
|||
|
|
color: echartsColor.WordColor
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: yan.EchartObject.gridc,
|
|||
|
|
dataZoom: yan.EchartObject.dataZoom,
|
|||
|
|
tooltip: {
|
|||
|
|
//提示框组件
|
|||
|
|
trigger: 'axis',
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var tips = ''
|
|||
|
|
for (var i = 0; i < params.length; i++) {
|
|||
|
|
tips += params[i].name + '</br/>'
|
|||
|
|
tips += '监测点数' + ':' + ' ' + ' ' + params[i].value + '</br/>'
|
|||
|
|
}
|
|||
|
|
return tips
|
|||
|
|
},
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow',
|
|||
|
|
label: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 16
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontStyle: 'normal',
|
|||
|
|
opacity: 0.35,
|
|||
|
|
fontSize: 14
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
|||
|
|
borderWidth: 0
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontFamily: yan.EchartObject.fontFamily,
|
|||
|
|
color: echartsColor.WordColor,
|
|||
|
|
fontSize: yan.EchartObject.xNamefontSize
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
formatter: function (value) {
|
|||
|
|
return yan.formatter(value)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// axisTick: {
|
|||
|
|
// show: false,
|
|||
|
|
// },
|
|||
|
|
// splitLine: {
|
|||
|
|
// show: false,
|
|||
|
|
// },
|
|||
|
|
axisLine: {
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
data: areaName,
|
|||
|
|
type: 'category'
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
minInterval: 1,
|
|||
|
|
axisLabel: {
|
|||
|
|
color: echartsColor.WordColor,
|
|||
|
|
fontSize: yan.EchartObject.xNamefontSize
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: echartsColor.thread
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
name: '单位(个)',
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: echartsColor.WordColor
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: lineNum,
|
|||
|
|
type: 'bar',
|
|||
|
|
// barMaxWidth: "auto",
|
|||
|
|
barMaxWidth: yan.EchartObject.barMaxWidth,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
|
|||
|
|
color: function (params) {
|
|||
|
|
// console.log(params,'1111111111111111111111');
|
|||
|
|
if (params.data == 0) {
|
|||
|
|
return echartsColor.FigureColor[9]
|
|||
|
|
} else {
|
|||
|
|
return echartsColor.FigureColor[0]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
barMinHeight: 5,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
textStyle: {
|
|||
|
|
//数值样式
|
|||
|
|
color: echartsColor.WordColor
|
|||
|
|
}
|
|||
|
|
// distance: 10,
|
|||
|
|
// color: '#fff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
var option2 = {
|
|||
|
|
//backgroundColor: '#151F2A',
|
|||
|
|
title: {
|
|||
|
|
text: '监测点新增数',
|
|||
|
|
left: 'center',
|
|||
|
|
top: '20px',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: yan.EchartObject.titleNamefontSize1,
|
|||
|
|
color: echartsColor.WordColor
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: yan.EchartObject.gridc,
|
|||
|
|
dataZoom: yan.EchartObject.dataZoom,
|
|||
|
|
tooltip: {
|
|||
|
|
//提示框组件
|
|||
|
|
trigger: 'axis',
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var tips = ''
|
|||
|
|
for (var i = 0; i < params.length; i++) {
|
|||
|
|
tips += params[i].name + '</br/>'
|
|||
|
|
tips += '监测点新增数' + ':' + ' ' + ' ' + params[i].value + '</br/>'
|
|||
|
|
}
|
|||
|
|
return tips
|
|||
|
|
},
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow',
|
|||
|
|
label: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 16
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontStyle: 'normal',
|
|||
|
|
opacity: 0.35,
|
|||
|
|
fontSize: 14
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
|||
|
|
borderWidth: 0
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontFamily: yan.EchartObject.fontFamily,
|
|||
|
|
color: echartsColor.WordColor,
|
|||
|
|
fontSize: yan.EchartObject.xNamefontSize
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
formatter: function (value) {
|
|||
|
|
return yan.formatter(value)
|
|||
|
|
}
|
|||
|
|
// padding: [0, 10, 0, 10],
|
|||
|
|
},
|
|||
|
|
// axisTick: {
|
|||
|
|
// show: false,
|
|||
|
|
// },
|
|||
|
|
// splitLine: {
|
|||
|
|
// show: false,
|
|||
|
|
// },
|
|||
|
|
axisLine: {
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
data: areaName,
|
|||
|
|
type: 'category'
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
minInterval: 1,
|
|||
|
|
axisLabel: {
|
|||
|
|
color: echartsColor.WordColor,
|
|||
|
|
fontSize: yan.EchartObject.xNamefontSize
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: echartsColor.thread
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
name: '单位(个)',
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: echartsColor.WordColor
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
data: addLineNum,
|
|||
|
|
type: 'bar',
|
|||
|
|
barMaxWidth: yan.EchartObject.barMaxWidth,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
color: function (params) {
|
|||
|
|
// console.log(params,'1111111111111111111111');
|
|||
|
|
if (params.data == 0) {
|
|||
|
|
return echartsColor.FigureColor[9]
|
|||
|
|
} else {
|
|||
|
|
return echartsColor.FigureColor[0]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
barMinHeight: 5,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
textStyle: {
|
|||
|
|
//数值样式
|
|||
|
|
color: echartsColor.WordColor
|
|||
|
|
}
|
|||
|
|
// distance: 10,
|
|||
|
|
// color: '#fff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
var option3 = {
|
|||
|
|
//backgroundColor: '#151F2A',
|
|||
|
|
title: {
|
|||
|
|
text: '终端状态',
|
|||
|
|
left: 'center',
|
|||
|
|
top: '20px',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: yan.EchartObject.titleNamefontSize1,
|
|||
|
|
color: echartsColor.WordColor
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: yan.EchartObject.gridc,
|
|||
|
|
dataZoom: yan.EchartObject.dataZoom,
|
|||
|
|
legend: {
|
|||
|
|
top: '50px',
|
|||
|
|
left: '80px',
|
|||
|
|
data: [
|
|||
|
|
{ name: '投运(通讯正常)', itemStyle: { color: '#0099CC' } },
|
|||
|
|
{ name: '投运(通讯中断)', itemStyle: { color: '#FF3333' } },
|
|||
|
|
{ name: '停运', itemStyle: { color: '#cc0000' } },
|
|||
|
|
{ name: '热备用', itemStyle: { color: '#996600' } }
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
textStyle: {
|
|||
|
|
color: echartsColor.WordColor,
|
|||
|
|
rich: {
|
|||
|
|
a: {
|
|||
|
|
verticalAlign: 'middle'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
padding: [2, 0, 0, 0] //[上、右、下、左]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
//提示框组件
|
|||
|
|
trigger: 'axis',
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var tips = ''
|
|||
|
|
tips += params[0].name + '</br/>'
|
|||
|
|
for (var i = 0; i < params.length; i++) {
|
|||
|
|
tips += params[i].seriesName + ':' + ' ' + ' ' + params[i].value + '</br/>'
|
|||
|
|
}
|
|||
|
|
return tips
|
|||
|
|
},
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow',
|
|||
|
|
label: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 16
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontStyle: 'normal',
|
|||
|
|
opacity: 0.35,
|
|||
|
|
fontSize: 14
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
|||
|
|
borderWidth: 0
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontFamily: yan.EchartObject.fontFamily,
|
|||
|
|
color: echartsColor.WordColor,
|
|||
|
|
fontSize: yan.EchartObject.xNamefontSize
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
formatter: function (value) {
|
|||
|
|
return yan.formatter(value)
|
|||
|
|
}
|
|||
|
|
// padding: [0, 10, 0, 10],
|
|||
|
|
},
|
|||
|
|
// axisTick: {
|
|||
|
|
// show: false,
|
|||
|
|
// },
|
|||
|
|
// splitLine: {
|
|||
|
|
// show: false,
|
|||
|
|
// },
|
|||
|
|
axisLine: {
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
data: areaName,
|
|||
|
|
type: 'category'
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
minInterval: 1,
|
|||
|
|
axisLabel: {
|
|||
|
|
color: echartsColor.WordColor,
|
|||
|
|
fontSize: yan.EchartObject.xNamefontSize
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: echartsColor.thread
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
name: '单位(个)',
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: echartsColor.WordColor
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '投运(通讯正常)',
|
|||
|
|
data: normalStateNum,
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: 'total',
|
|||
|
|
barMinHeight: 5,
|
|||
|
|
barMaxWidth: yan.EchartObject.barMaxWidth,
|
|||
|
|
// barWidth: 15,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
|
|||
|
|
color: function (params) {
|
|||
|
|
// console.log(params,'1111111111111111111111');
|
|||
|
|
if (params.data == 0) {
|
|||
|
|
return echartsColor.FigureColor[9]
|
|||
|
|
} else {
|
|||
|
|
return '#0099CC'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// itemStyle: {
|
|||
|
|
// color:"#0099CC"
|
|||
|
|
// },
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
// position: 'top',
|
|||
|
|
// distance: 10,
|
|||
|
|
textStyle: {
|
|||
|
|
//数值样式
|
|||
|
|
color: echartsColor.WordColor
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '投运(通讯中断)',
|
|||
|
|
data: suspendStateNum,
|
|||
|
|
type: 'bar',
|
|||
|
|
barMinHeight: 5,
|
|||
|
|
barMaxWidth: yan.EchartObject.barMaxWidth,
|
|||
|
|
// barWidth: 15,
|
|||
|
|
stack: 'total',
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
|
|||
|
|
color: function (params) {
|
|||
|
|
// console.log(params,'1111111111111111111111');
|
|||
|
|
if (params.data == 0) {
|
|||
|
|
return echartsColor.FigureColor[9]
|
|||
|
|
} else {
|
|||
|
|
return '#FF3333'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// itemStyle: {
|
|||
|
|
// color: "#FF3333"
|
|||
|
|
// },
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
// position: 'top',
|
|||
|
|
// distance: 10,
|
|||
|
|
textStyle: {
|
|||
|
|
//数值样式
|
|||
|
|
color: echartsColor.WordColor
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '停运',
|
|||
|
|
data: offStreamStateNum,
|
|||
|
|
type: 'bar',
|
|||
|
|
barMinHeight: 5,
|
|||
|
|
barMaxWidth: yan.EchartObject.barMaxWidth,
|
|||
|
|
// barWidth: 15,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
|
|||
|
|
color: function (params) {
|
|||
|
|
// console.log(params,'1111111111111111111111');
|
|||
|
|
if (params.data == 0) {
|
|||
|
|
return echartsColor.FigureColor[9]
|
|||
|
|
} else {
|
|||
|
|
return '#cc0000'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// itemStyle: {
|
|||
|
|
// color:"#cc0000"
|
|||
|
|
// },
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
// position: 'top',
|
|||
|
|
// distance: 10,
|
|||
|
|
textStyle: {
|
|||
|
|
//数值样式
|
|||
|
|
color: echartsColor.WordColor
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '热备用',
|
|||
|
|
data: hotSpareStateNum,
|
|||
|
|
type: 'bar',
|
|||
|
|
barMinHeight: 5,
|
|||
|
|
barMaxWidth: yan.EchartObject.barMaxWidth,
|
|||
|
|
// barWidth: 15,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
|
|||
|
|
color: function (params) {
|
|||
|
|
// console.log(params,'1111111111111111111111');
|
|||
|
|
if (params.data == 0) {
|
|||
|
|
return echartsColor.FigureColor[9]
|
|||
|
|
} else {
|
|||
|
|
return '#996600'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// itemStyle: {
|
|||
|
|
// color: "#996600"
|
|||
|
|
// },
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
// position: 'top',
|
|||
|
|
// distance: 10,
|
|||
|
|
textStyle: {
|
|||
|
|
//数值样式
|
|||
|
|
color: echartsColor.WordColor
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
this.myChartes1.setOption(option1)
|
|||
|
|
window.echartsArr.push(this.myChartes1)
|
|||
|
|
this.myChartes2.setOption(option2)
|
|||
|
|
window.echartsArr.push(this.myChartes2)
|
|||
|
|
this.myChartes3.setOption(option3)
|
|||
|
|
window.echartsArr.push(this.myChartes3)
|
|||
|
|
// myChart.resize();
|
|||
|
|
let _this = this
|
|||
|
|
_this.$erd.listenTo(_this.$refs.left, element => {
|
|||
|
|
_this.$nextTick(() => {
|
|||
|
|
// domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
|
|||
|
|
;(domID1.style.width = document.getElementById('left').offsetWidth - 0 + 'px'),
|
|||
|
|
_this.myChartes1.resize()
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
_this.$erd.listenTo(_this.$refs.middle, element => {
|
|||
|
|
_this.$nextTick(() => {
|
|||
|
|
// domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
|
|||
|
|
;(domID1.style.width = document.getElementById('middle').offsetWidth - 0 + 'px'),
|
|||
|
|
_this.myChartes2.resize()
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
_this.$erd.listenTo(_this.$refs.right, element => {
|
|||
|
|
_this.$nextTick(() => {
|
|||
|
|
// domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
|
|||
|
|
;(domID1.style.width = document.getElementById('right').offsetWidth - 0 + 'px'),
|
|||
|
|
_this.myChartes3.resize()
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
resizeEchartLeft() {
|
|||
|
|
var elementResizeDetectorMaker = require('element-resize-detector')
|
|||
|
|
var erd = elementResizeDetectorMaker()
|
|||
|
|
erd.listenTo(document.getElementById('left'), element => {
|
|||
|
|
let domeId = document.getElementById('left')
|
|||
|
|
let domeId2 = document.getElementById('linexzs')
|
|||
|
|
domeId2.style.width = domeId.offsetWidth - 0 + 'px'
|
|||
|
|
// this.$nextTick(() => {
|
|||
|
|
if (this.myChartes1 !== '') {
|
|||
|
|
this.myChartes1.resize()
|
|||
|
|
}
|
|||
|
|
// });
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
resizeEchartMiddle() {
|
|||
|
|
var elementResizeDetectorMaker = require('element-resize-detector')
|
|||
|
|
var erd = elementResizeDetectorMaker()
|
|||
|
|
erd.listenTo(document.getElementById('middle'), element => {
|
|||
|
|
let domeId = document.getElementById('middle')
|
|||
|
|
let domeId2 = document.getElementById('linezs')
|
|||
|
|
domeId2.style.width = domeId.offsetWidth - 0 + 'px'
|
|||
|
|
// this.$nextTick(() => {
|
|||
|
|
if (this.myChartes2 !== '') {
|
|||
|
|
this.myChartes2.resize()
|
|||
|
|
}
|
|||
|
|
// });
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
resizeEchartRight() {
|
|||
|
|
var elementResizeDetectorMaker = require('element-resize-detector')
|
|||
|
|
var erd = elementResizeDetectorMaker()
|
|||
|
|
erd.listenTo(document.getElementById('right'), element => {
|
|||
|
|
let domeId = document.getElementById('right')
|
|||
|
|
let domeId2 = document.getElementById('linestatus')
|
|||
|
|
domeId2.style.width = domeId.offsetWidth - 0 + 'px'
|
|||
|
|
// this.$nextTick(() => {
|
|||
|
|
if (this.myChartes3 !== '') {
|
|||
|
|
this.myChartes3.resize()
|
|||
|
|
}
|
|||
|
|
// });
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//获取主列表
|
|||
|
|
getList() {
|
|||
|
|
this.isLoading = true
|
|||
|
|
this.item = this.$refs.interval.timeValue
|
|||
|
|
this.formData.searchBeginTime = this.item[0]
|
|||
|
|
this.formData.searchEndTime = this.item[1]
|
|||
|
|
getLineStatisticsDetail(this.formData).then(res => {
|
|||
|
|
this.isLoading = false
|
|||
|
|
this.tableData = res.data
|
|||
|
|
this.initData()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//导出
|
|||
|
|
exportEvent() {
|
|||
|
|
this.$refs.Statistics.exportData({
|
|||
|
|
filename: 'export', // 文件名字
|
|||
|
|
sheetName: 'Sheet1',
|
|||
|
|
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
|||
|
|
useStyle: true,
|
|||
|
|
data: this.tableData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 区域
|
|||
|
|
handleNodeClick(data) {
|
|||
|
|
// console.log(data);
|
|||
|
|
this.formData.deptIndex = data.id
|
|||
|
|
},
|
|||
|
|
handleStatusChange(e) {}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
@import url('../../../styles/comStyle.less');
|
|||
|
|
::v-deep .el-form-item--small .el-form-item__content,
|
|||
|
|
.el-form-item--small .el-form-item__label {
|
|||
|
|
height: 32px;
|
|||
|
|
}
|
|||
|
|
.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>
|