<template>
<panel-container>
<modular-layout type="roundCorner">
<panel-title-1>智慧管网</panel-title-1>
<div class="Modular_main">
<div>
<vue-scroll>
<div class="row">
<div class="col-30">
<TitleThree title="运行工况" />
<div class="Modular_left workStatu">
<DataList :data="workStatu" :title="['类别','次数']" >
<Corner2 slot="corner" />
</DataList>
</div>
</div>
<div class="col-30">
<TitleThree title="管线条数" />
<div id="pipeline_length_box">
<EchartBar1Color
:id="pipeline_length.id"
:width="pipeline_length.width"
:height="pipeline_length.height"
:xAxisData="pipeline_length.xAxisData"
:seriesData="pipeline_length.seriesData"
/>
</div>
</div>
<div class="col-40">
<TitleThree title="管网附属物" />
<div class="Modular_left Modular_right">
<div class="module-corner">
<div style="width: 100%; overflow:hidden; padding: .05rem 0 .05rem .05rem;">
<div class="col-50 circularChartBox" v-for="(item,index) in appendagesList" :key="index">
<div class="circularChartBox-echart" :id="'appendages_box'+(index+1)">
<EchartAnnular
:id="item.echartData.id"
:width="item.echartData.width"
:height="item.echartData.height"
:data="item.echartData.data"
:color="item.echartData.color"
/>
</div>
<text1
:titles="{name:'名称', num:'设备数量'}"
:options="{color: item.color,name: 'name',num: 'num',unit: '个'}"
:data="item"
/>
</div>
</div>
<Corner />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-60">
<TitleThree title="设备在线情况" />
<div class="Modular_left">
<div class="module-corner" style=" padding: .03rem 0;">
<div style=" padding: 0 .05rem 0 .08rem; overflow:hidden;">
<div class="col-50 circularChartBox" v-for="(item,index) in onlineStatus" :key="index" style="margin: .02rem 0 .03rem;">
<div class="circularChartBox-echart" :id="'onlineStatus_box'+(index+1)">
<EchartAnnular
:id="item.echartData.id"
:width="item.echartData.width"
:height="item.echartData.height"
:data="item.echartData.data"
:color="item.echartData.color"
/>
</div>
<text2
:titles="{name:'名称', num1:'离线率',num2:'在线率'}"
:options="{color: item.color,name: 'name',num1: 'online',num2:'leave',unit1: '%',unit2:'%'}"
:data="item"/>
</div>
</div>
<Corner />
</div>
</div>
</div>
<div class="col-40">
<TitleThree title="监测设备数量" />
<div class="Modular_left Modular_right">
<div class="module-corner">
<EarthViews :data="monitorQty" height="1.04rem" />
<Corner2 />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-30">
<TitleThree title="设备报警次数" />
<div id="alarm_times_box" class="Modular_left">
<EchartBar1Color
:id="alarm_times.id"
:width="alarm_times.width"
:height="alarm_times.height"
:xAxisData="alarm_times.xAxisData"
:seriesData="alarm_times.seriesData"
/>
</div>
</div>
<div class="col-70">
<TitleThree title="监测设备数量" />
<div class="Modular_left Modular_right">
<DataAnalysis />
</div>
</div>
</div>
</vue-scroll>
</div>
</div>
</modular-layout>
</panel-container>
</template>
<script>
import {countSize} from '@/utils/utils'
import EarthViews from '@/components/EarthViews'
import Corner from '@/components/Corner'
import Corner2 from '@/components/Corner2'
import DataList from '@/components/board/DataList'
import EchartBar2Line1 from '@/components/echart/EchartBar2Line1'
import EchartBar1Color from '@/components/echart/EchartBar1Color'
import EchartAnnular from '@/components/echart/EchartAnnular'
import DataAnalysis from './components/DataAnalysis'
import Text1 from "../../components/text/Text1";
import Text2 from "../../components/text/Text2";
export default {
components: {
Text2,
Text1,
EarthViews,
Corner,
Corner2,
DataList,
EchartBar2Line1,
EchartBar1Color,
EchartAnnular,
DataAnalysis
},
data () {
return {
// echart环形进度条颜色
annularColor: [
['#fc5e5f', '#f90006'],
['#39edfb', '#19ddff'],
['#1bfb11', '#08f37a'],
['#da34dc', '#ea48e9'],
['#f9ae07', '#f9cd54'],
['#e7f734', '#a5b60e']
],
// 管线长度
pipeline_length: {
id: 'pipeline_length_id',
width: 0,
height: 0,
xAxisData: ['给水', '雨污水', '燃气', '通讯', '排污', '其他'],
seriesData: [10, 52, 200, 334, 390]
},
// pipeline_length:{
// id: 'pipeline_length_id',
// width: 0,
// height: 0,
// xAxisData: ['给水','雨污水','燃气','通讯','排污','其他'],
// legend: ['规划管线长度','竣工管线长度','完成率'],
// yAxisData: [
// // [200, 34.9, 57, 23.2, 25.6, 76.7],
// // [206, 200, 145, 126.4, 28.7, 70.7],
// // [220, 266, 163, 295, 183, 302]
// ]
// },
// 管网附属物
appendagesList: [
{
name: '井盖',
num: '10',
color: '#fc5e5f',
echartData: {
id: 'appendages_id1',
width: 0,
height: 0,
data: 50,
color: ['#fc5e5f', '#f90006']
}
},
{
name: '液位',
num: '10',
color: '#39edfb',
echartData: {
id: 'appendages_id2',
width: 0,
height: 0,
data: 50,
color: ['#39edfb', '#19ddff']
}
},
{
name: '液位',
num: '10',
color: '#1bfb11',
echartData: {
id: 'appendages_id3',
width: 0,
height: 0,
data: 50,
color: ['#1bfb11', '#08f37a']
}
}
],
// 运行工况
workStatu: [
{ name: '给水管线泄露', num: '100', unit: '（个)' },
{ name: '给水管线泄露', num: '100', unit: '（个)' },
{ name: '给水管线泄露', num: '100', unit: '（个)' },
{ name: '给水管线泄露', num: '100', unit: '（个)' }
],
// 监测设备数量
monitorQty: [
{ name: '噪声记录仪', num: '100' },
{ name: '电子标识器', num: '100' },
{ name: '液位检测仪', num: '100' },
{ name: '液位检测仪', num: '100' }
],
// 设备在线情况
onlineStatus: [
{
name: '电子标识器',
leave: '5',
online: '10',
color: '#fc5e5f',
echartData: {
id: 'onlineStatus_id1',
width: 0,
height: 0,
data: 50,
color: ['#fc5e5f', '#f90006']
}
},
{
name: '井盖状态监测仪',
leave: 5,
online: 10,
color: '#39edfb',
echartData: {
id: 'onlineStatus_id2',
width: 0,
height: 0,
data: 50,
color: ['#39edfb', '#19ddff']
}
}
],
// 设备报警次数
alarm_times: {
id: 'alarm_times_id',
width: 0,
height: 0,
xAxisData: ['井盖', '管线', '燃气', '噪声', '液位'],
seriesData: [10, 52, 200, 334, 390]
}
}
},
mounted () {
// 获取管线长度
this.callEchart('pipeline_length_box', this.pipeline_length, 1.55)
this.getPipelineLength()
// 获取管网附属物
this.appendagesList.map((item, index) => {
this.callEchart('appendages_box' + (index + 1), this.appendagesList[index].echartData, 1)
})
this.getAppendagesList()
// 获取运行工况
this.getWorkStatu()
// 获取设备在线状况
this.onlineStatus.map((item, index) => {
this.callEchart('onlineStatus_box' + (index + 1), this.onlineStatus[index].echartData, 1)
})
this.getOnlineStatus()
// 获取监测设备数量
this.getMonitorQty()
// 获取设备报警次数
this.callEchart('alarm_times_box', this.alarm_times, 1.2)
this.getMonitorAlarmTtimes()
},
methods: {
// 获取管线条度
getPipelineLength () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1042'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
if (res.ret_code == 200) {
let xAxisData = []
let seriesData = []
res.data.forEach(item => {
xAxisData.push(item.LX)
seriesData.push(item.COUNT)
})
this.pipeline_length.xAxisData = xAxisData
this.pipeline_length.seriesData = seriesData
// 管线长度echart
this.callEchart('pipeline_length_box', this.pipeline_length, 1.55)
}
})
},
// 获取管网附属物
getAppendagesList () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1043'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
if (res.ret_code == 200) {
let data = res.data
let appendagesList = []
data.forEach((item, index) => {
appendagesList.push({
name: item.LX,
num: item.SL,
color: this.annularColor[index][0],
echartData: {
id: 'appendages_id' + (index + 1),
width: 0,
height: 0,
data: 50,
color: this.annularColor[index]
}
})
})
this.appendagesList = appendagesList
setTimeout(() => {
// 设备在线情况echart
this.appendagesList.map((item, index) => {
this.callEchart('appendages_box' + (index + 1), this.appendagesList[index].echartData, 1)
})
}, 200)
}
})
},
// 获取运行工况
getWorkStatu () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1085'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
if (res.ret_code == 200) {
let arr = []
res.data.forEach((item, index) => {
arr.push({ name: item.LX, num: item.SL, unit: '（' + item.SLDW + ')' })
})
this.workStatu = arr
}
})
},
getOnlineStatus () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1087'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
if (res.ret_code == 200) {
let data = res.data
let onlineStatus = []
data.forEach((item, index) => {
onlineStatus.push({
name: item.LX,
leave: item.LXL,
online: item.ZXL,
color: this.annularColor[index][0],
echartData: {
id: 'onlineStatus_id' + (index + 1),
width: 0,
height: 0,
data: item.ZXL,
color: this.annularColor[index]
}
})
})
this.onlineStatus = onlineStatus
setTimeout(() => {
// 设备在线情况echart
this.onlineStatus.map((item, index) => {
this.callEchart('onlineStatus_box' + (index + 1), this.onlineStatus[index].echartData, 1)
})
}, 200)
}
})
},
// 获取监测设备数量
getMonitorQty () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1044'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
if (res.ret_code == 200) {
let arr = []
res.data.forEach((item, index) => {
arr.push({name: item.LX, num: item.SL})
})
this.monitorQty = arr
}
})
},
// 获取设备报警次数
getMonitorAlarmTtimes () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1045'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
if (res.ret_code == 200) {
let xAxisData = []
let seriesData = []
res.data.forEach(item => {
xAxisData.push(item.LX)
seriesData.push(item.SL)
})
this.alarm_times.xAxisData = xAxisData
this.alarm_times.seriesData = seriesData
// 设备报警次数echart
this.callEchart('alarm_times_box', this.alarm_times, 1.2)
}
})
},
callEchart (idBox, data, offset) {
const _width = document.getElementById(idBox).clientWidth
this.$set(data, 'width', _width)
this.$set(data, 'height', _width / offset)
}
}
}
</script>
<style scoped>
/* 管网附属物+设备在线情况 */
.circularChartBox{
display: flex;
padding: .02rem 0;
}
.circularChartBox .circularChartBox-echart{
width: .27rem;
margin-right: .02rem;
}
</style>
