<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-40">
<TitleThree title="地下管网" />
<div id="traffic_govern_box" class="">
<EchartBar1Color
:id="traffic_govern.id"
:width="traffic_govern.width"
:height="traffic_govern.height"
:xAxisData="traffic_govern.xAxisData"
:seriesData="traffic_govern.seriesData"
/>
</div>
</div>
<div class="col-60 ">
<TitleThree title="交通治理" />
<div>
<div class="col-45">
<DataList :data="sscw" :title="['实时车位','数据']" >
<Corner2 slot="corner" />
</DataList>
</div>
<div class="col-55" id="traffic_govern_line_box">
<EchartLine
:id="traffic_govern_line.id"
:width="traffic_govern_line.width"
:height="traffic_govern_line.height"
:legend="traffic_govern_line.legend"
:xAxisData="traffic_govern_line.xAxisData"
:yAxisData="traffic_govern_line.yAxisData"
/>
</div>
</div>
</div>
</div>
<div class="row">
<!--问题事件总数-->
<div class="col-40">
<TitleThree title="问题事件总数" />
<div class="Modular_left">
<div class="module-corner">
<EarthViews :data="wtsjzs" height="1rem" />
<Corner2 />
</div>
</div>
</div>
<!--问题事件分析-->
<div class="col-60">
<TitleThree title="问题事件分析" />
<div class="row-flex">
<div id="problem_analysis_box" class="col-60">
<EchartBar1
:id="problem_analysis.id"
:width="problem_analysis.width"
:height="problem_analysis.height"
:xAxisData="problem_analysis.xAxisData"
:seriesData="problem_analysis.seriesData"
/>
</div>
<div class="col-40">
<DataList :data="hwss" class="Modular_right" :title="['环卫设施','数据']" >
<corner3 slot="corner"/>
</DataList>
</div>
</div>
</div>
</div>
<div class="row">
<!--案件状态分布-->
<div class="col-40">
<TitleThree title="案件状态分布" />
<div class="Modular_left">
<div class="module-corner" id="case_status_box">
<EchartPieAnnular
:id="case_status.id"
:width="case_status.width"
:height="case_status.height"
:legend="case_status.legend"
:seriesData="case_status.seriesData"
/>
<Corner2 />
</div>
</div>
</div>
<!--近一周空气质量-->
<div class="col-60">
<TitleThree title="近一周空气质量" />
<div id="air_quality_box" class="Modular_right">
<EchartLine
:id="air_quality.id"
:width="air_quality.width"
:height="air_quality.height"
:legend="air_quality.legend"
:xAxisData="air_quality.xAxisData"
:yAxisData="air_quality.yAxisData"
/>
</div>
</div>
</div>
</vue-scroll>
</div>
</div>
</modular-layout>
</panel-container>
</template>
<script>
import {countSize} from '@/utils/utils'
import EarthViews from '@/components/earthViews/EarthViews'
import Corner2 from '@/components/Corner2'
import DataList from '@/components/board/DataList'
import EchartBar1Color from '@/components/echart/EchartBar1Color'
import EchartLine from '@/components/echart/EchartLine'
import EchartBar1 from '@/components/echart/EchartBar1'
import EchartPieAnnular from '@/components/echart/EchartPieAnnular'
import PanelContainer from '@/components/layout/panelContainer'
import ModularLayout from '@/components/layout/modularLayout'
import PanelTitle1 from '@/components/title/panelTitle1'
import Corner3 from '@/components/corner/Corner3'
export default {
components: {
Corner3,
PanelTitle1,
ModularLayout,
PanelContainer,
EarthViews,
Corner2,
DataList,
EchartBar1Color,
EchartLine,
EchartBar1,
EchartPieAnnular
},
data () {
return {
traffic_govern: {
id: 'traffic_govern_id',
width: 0,
height: 0,
xAxisData: ['给水', '雨污水', '燃气', '通讯', '排污', '其他'],
seriesData: [10, 52, 200, 334, 390]
},
// 交通治理
// traffic_govern:{
// id: 'traffic_govern_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]
// ]
// },
traffic_govern_line: {
id: 'traffic_govern_line_id',
width: 0,
height: 0,
legend: ['近一周日均车位占用率', '近一周日均车位停车次数'],
xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
yAxisData: [
{name: '近一周日均车位占用率', data: [120, 252, 101, 134, 290, 230, 110], color: '58,55,194'},
{name: '近一周日均车位停车次数', data: [120, 222, 191, 234, 250, 200, 310], color: '109,202,23'}
]
},
// 实时车位
sscw: [
{ name: '车位总数', num: '250', unit: '（个)' },
{ name: '占用车位数', num: '80', unit: '（个)' },
{ name: '空闲车位数', num: '170', unit: '（个)' },
{ name: '占用率', num: '32%' }
],
// 环卫设施
hwss: [
{ name: '中转站', num: '15', unit: '（个）' },
{ name: '渣土车', num: '54', unit: '（个）' },
{ name: '洒水车', num: '37', unit: '（个）' },
{ name: '环卫工', num: '267', unit: '（个）' },
{ name: '消纳场', num: '22', unit: '（个）' },
{ name: '工地', num: '28', unit: '（个）' }
],
// 问题事件总数
wtsjzs: [
{ name: '事件总数', num: '457' },
{ name: '处理事件总数', num: '323' },
{ name: '处理率', num: '83%' }
],
/* 问题事件分析 */
problem_analysis: {
id: 'problem_analysis',
width: 0,
height: 0,
xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
seriesData: [320, 302, 301, 334, 390, 330, 320]
},
// 案件状态分布
case_status: {
id: 'case_status',
width: 0,
height: 0,
legend: ['申报立案', '调查取证', '大队执行', '立案审核', '法制审批'],
seriesData: [
{value: 34, name: '申报立案'},
{value: 25, name: '调查取证'},
{value: 45, name: '大队执行'},
{value: 14, name: '立案审核'},
{value: 24, name: '法制审批'}
]
},
// 近一周空气质量
air_quality: {
id: 'air_quality_id',
width: 0,
height: 0,
xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
legend: ['PM2.5', 'NO2'],
yAxisData: [
{name: 'PM2.5', data: [ 855, 1278, 856, 865, 1290, 782, 1210 ], color: '255,45,85'},
{name: 'NO2', data: [400, 632, 333, 554, 490, 530, 610], color: '255,204,0'}
]
}
}
},
created () {},
mounted () {
// 获取智慧官网-井盖开启次数
this.getPipelineAlarm()
// 地下管网echart
this.callEchart('traffic_govern_box', this.traffic_govern, 1.85)
// 交通治理echart
this.callEchart('traffic_govern_line_box', this.traffic_govern_line, 1.7)
// 问题事件分析echart
this.callEchart('problem_analysis_box', this.problem_analysis, 1.5)
// 案件状态分布echart
this.callEchart('case_status_box', this.case_status, 1.7)
// 近一周空气质量echart
this.callEchart('air_quality_box', this.air_quality, 2.5)
},
methods: {
// 获取智慧官网-井盖开启次数
getPipelineAlarm () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1086'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
if (res.ret_code == 200) {
let xAxisData = []
let seriesData = []
res.data.forEach((item, index) => {
if (index < 10) {
xAxisData.push(item.SJ.slice(5, 10))
seriesData.push(item.SL)
} else {
}
})
this.traffic_govern.xAxisData = xAxisData
this.traffic_govern.seriesData = seriesData
this.callEchart('traffic_govern_box', this.traffic_govern, 1.85)
}
})
},
callEchart (idBox, data, offset) {
const _width = document.getElementById(idBox).clientWidth
this.$set(data, 'width', _width)
this.$set(data, 'height', _width / offset)
}
}
}
</script>
<style scoped>
.panel-container{
width: 100%;
height: 100%;
overflow: auto;
}
/* 盒子 */
.row{
width: 100%;
overflow: hidden;
margin: 0.07rem 0;
}
.row-flex{
display:flex;
justify-content:space-between;
}
.col-40{
width: 38%;
float: left;
}
.col-60{
width: 62%;
float: left;
}
.col-45{
width: 45%;
float: left;
}
.col-55{
width: 55%;
float: left;
}
/* 环卫设施-定制的四角 */
/*.corner-top{*/
/*position: absolute;*/
/*top: 0;*/
/*left: 0;*/
/*width: .1rem;*/
/*height: .1rem;*/
/*background: url("../../assets/images/module-horn2.png") no-repeat;*/
/*background-size: 100% 100%;*/
/*}*/
/*.corner-bottom{*/
/*position: absolute;*/
/*bottom: 0;*/
/*left: 0;*/
/*width: 100%;*/
/*height: 40%;*/
/*background: url("../../assets/images/module-horn3.png") no-repeat;*/
/*background-size: 100% 100%;*/
/*}*/
</style>
<style>
.page-cszl .dataListBox li{
padding: .05rem .08rem !important;
}
</style>
