<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-50">
<TitleThree title="城市部件" />
<div class="Modular_left">
<div id="city_part_box" class="col-60">
<EchartBar1
:id="city_part.id"
:width="city_part.width"
:height="city_part.height"
:unit="city_part.unit"
:xAxisData="city_part.xAxisData"
:seriesData="city_part.seriesData"
/>
</div>
</div>
</div>
<div class="col-50">
<TitleThree title="区域案件" />
<div class="Modular_left Modular_right">
<DataListCols :data="manageCase" :title="['单位','立案数量','结案数量','处置率']" >
<Corner2 slot="corner" />
</DataListCols>
</div>
</div>
</div>
<div class="row">
<div class="col-65">
<TitleThree title="城市部件" />
<div class="Modular_left">
<div class="module-corner" style="padding-right:.08rem;overflow:hidden;">
<div class="col-50">
<LitterTitle :title="'城管人员'" />
<Legend :list="[['处理率', '#bd273c '], ['总数量', '#0197ff']]" />
<div style="overflow:hidden;">
<div v-for="(value,index) in manage_people_bar" :key="index">
<ProgressBar2 :data="value" />
</div>
</div>
</div>
<div class="col-50">
<LitterTitle :title="'城管人员'" />
<Legend :list="[['总占比', '#bd273c '], ['总数量', '#0197ff']]" />
<div style="overflow:hidden;">
<div v-for="(value,index) in manage_people_bar" :key="index">
<ProgressBar2 :data="value" />
</div>
</div>
</div>
<Corner2 />
</div>
</div>
</div>
<div class="col-35">
<TitleThree title="城管车辆" />
<div class="Modular_left Modular_right">
<DataList :data="manageCar" :title="['类别','数量']" >
<Corner2 slot="corner" />
</DataList>
</div>
</div>
</div>
<div class="row">
<div class="col-55">
<TitleThree title="城管路灯" />
<div class="Modular_left">
<EchartLineLitter />
</div>
</div>
<div class="col-45">
<TitleThree title="数据分析" />
<div class="Modular_left Modular_right">
<div class="module-corner" id="echart-dataAnalysis-box">
<EchartPieAnnular
:id="data_analysis.id"
:width="data_analysis.width"
:height="data_analysis.height"
:legend="data_analysis.legend"
:seriesData="data_analysis.seriesData"
/>
<Corner2 />
</div>
</div>
</div>
</div>
</vue-scroll>
</div>
</div>
</modular-layout>
</panel-container>
</template>
<script>
import Corner2 from '@/components/Corner2'
import DataList from '@/components/board/DataList'
import DataListCols from '@/components/board/DataListCols'
import EchartBar1 from '@/components/echart/EchartBar1'
import EchartLineLitter from './components/EchartLineLitter'
import EchartPieAnnular from '@/components/echart/EchartPieAnnular'
import Legend from '@/components/legend/Legend'
import ProgressBar2 from '@/components/progressBar/ProgressBar2'
import LitterTitle from '@/components/title/LitterTitle'
export default {
components: {
Corner2,
DataList,
DataListCols,
EchartBar1,
EchartLineLitter,
EchartPieAnnular,
Legend,
ProgressBar2,
LitterTitle
},
data () {
return {
// 城市部件
manage_people_bar: [
{title: '图书馆', num1: 50, num2: 100},
{title: '报告厅', num1: 50, num2: 100},
{title: '会议室', num1: 50, num2: 100},
{title: '运动场', num1: 50, num2: 100}
],
// 区域案件
manageCase: [
{ name: '街道一', num1: '100', num2: '33', num3: '50%'}
],
// 城管车辆
manageCar: [
{ name: '执法车', num: '100', unit: '（辆)' }
],
// 城市部件
city_part: {
id: 'city_part',
width: 0,
height: 0,
unit: '个',
xAxisData: ['路灯', '道路', '井盖', '垃圾中转站', '垃圾桶', '环卫车辆', '环卫人员', '门前五包', '市场摊位', '执法车辆'],
seriesData: [2206, 1756, 2656, 1223, 1837, 1030, 1320, 1720, 1520, 2020]
},
// 数据分析
data_analysis: {
id: 'cityManage-dataAnalysis',
width: 0,
height: 0,
legend: ['申报立案', '调查取证', '大队执行', '立案审核', '法制审批'],
seriesData: [
{value: 34, name: '申报立案'},
{value: 25, name: '调查取证'},
{value: 45, name: '大队执行'},
{value: 14, name: '立案审核'},
{value: 24, name: '法制审批'}
]
}
}
},
mounted () {
// 城市部件echart
this.callEchart('city_part_box', this.city_part, 2.6)
this.getCityPart()
// 区域案件
this.getManageCase()
// 城管车辆
this.getManageCar()
// 数据分析echart
this.callEchart('echart-dataAnalysis-box', this.data_analysis, 1.53)
this.getDataAnalysis()
},
methods: {
// 城市部件
getCityPart () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1099'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
let xAxisData = []
let seriesData = []
res.data.forEach(item => {
xAxisData.push(item.TYPE)
seriesData.push(item.TYPECOUNT)
})
this.city_part.xAxisData = xAxisData
this.city_part.seriesData = seriesData
this.callEchart('city_part_box', this.city_part, 2.6)
})
},
// 区域案件
getManageCase () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1104'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
if (res.ret_code == 200) {
this.manageCase = []
res.data.forEach(item => {
this.manageCase.push({ name: item.AREANAME, num1: item.LIANCOUNT, num2: item.JIEANCOUNT, num3: Number(item.JIEANCOUNT) / Number(item.LIANCOUNT).toFixed(2) * 100 + '%'})
})
}
})
},
// 城管车辆
getManageCar () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1105'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
if (res.ret_code == 200) {
this.manageCar = []
res.data.forEach(item => {
this.manageCar.push({ name: item.ZTQY, num: item.ZTCOUNT, unit: '（辆)' })
})
}
})
},
// 数据分析
getDataAnalysis () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1100'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
let data = res.data
let seriesData = []
data.forEach(item => {
seriesData.push({value: Number(item.ZB), name: item.AJDL})
})
this.$set(this.data_analysis, 'seriesData', seriesData)
this.callEchart('echart-dataAnalysis-box', this.data_analysis, 1.53)
})
},
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-50{
width: 50%;
float: left;
}
.col-30{
width: 30%;
float: left;
}
.col-35{
width: 35%;
float: left;
}
.col-65{
width: 65%;
float: left;
}
.col-45{
width: 45%;
float: left;
}
.col-55{
width: 55%;
float: left;
}
</style>
<style>
.page-zhcg .dataListBox li{
padding: .05rem .08rem !important;
}
</style>
