<template>
<panel-container>
<modular-layout>
<panel-title-1>智慧社区</panel-title-1>
<div class="Modular_main">
<div>
<vue-scroll>
<div class="row">
<div class="col-50">
<TitleThree title="社区基础设施" />
<div id="infrastructure_box" class="">
<EchartBar1Color
:id="infrastructure.id"
:width="infrastructure.width"
:height="infrastructure.height"
:xAxisData="infrastructure.xAxisData"
:seriesData="infrastructure.seriesData"
/>
</div>
</div>
<div class="col-50">
<TitleThree title="社区人口" />
<div class="Modular_left">
<div id="echart-population-box">
<EchartLine
:id="population.id"
:width="population.width"
:height="population.height"
:legend="population.legend"
:xAxisData="population.xAxisData"
:yAxisData="population.yAxisData"
/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-35">
<TitleThree title="社区治安" />
<div class="Modular_left communitySecurity">
<DataListCols :data="communitySecurity" :title="['区域','案件数','处理数','处理率']" />
</div>
</div>
<div class="col-65">
<TitleThree title="社区设备" />
<div class="Modular_left Modular_right">
<CommunityEquipment />
</div>
</div>
</div>
<div class="row">
<TitleThree title="案件分析" />
<div class="col-65">
<div class="Modular_left">
<div id="echart-community-box">
<EchartLine
:id="community.id"
:width="community.width"
:height="community.height"
:legend="community.legend"
:xAxisData="community.xAxisData"
:yAxisData="community.yAxisData"
/>
</div>
</div>
</div>
<div class="col-35">
<div class="Modular_right">
<div class="module-corner" id="community_case_box">
<EchartPieAnnular
:id="community_case.id"
:width="community_case.width"
:height="community_case.height"
:legend="community_case.legend"
:seriesData="community_case.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/DataList'
import Legend from "@/components/echart/Legend"
import ProgressBar from "@/components/echart/ProgressBar"
import LitterTitle from "@/components/title/LitterTitle"
import DataListCols from '@/components/board/DataListCols'
import CommunityEquipment from './components/CommunityEquipment'
import EchartLine from '@/components/echart/EchartLine'
import EchartPieAnnular from '@/components/echart/EchartPieAnnular'
import EchartBar1Color from '@/components/echart/EchartBar1Color'
export default {
components:{
Corner2,
DataList,
Legend,
ProgressBar,
LitterTitle,
DataListCols,
CommunityEquipment,
EchartLine,
EchartPieAnnular,
EchartBar1Color
},
data() {
return {
arr:[{title:'a',children:[1,2,3]},{title:'b',children:[1,2,3]},{title:'c',children:[1,2,3]}],
// 社区基础设施
infrastructure: {
id: 'infrastructure_id',
width: 0,
height: 0,
xAxisData: [],
seriesData: []
},
//社区人口
population:{
id: 'echart-population',
width: 0,
height: 0,
xAxisData:[],
yAxisData: [
{name:'户数',data:[],color:'255,248,98'},
{name:'人口数',data:[],color:'95,193,0'},
{name:'出租户数',data:[],color:'216,46,215'},
{name:'出租人口数',data:[],color:'255,45,82'},
]
},
// 社区治安
communitySecurity:[
// { name: "区域一", num1: "100", num2: "100", num3: "100%"}
],
// 案件分析
community:{
id: 'echart-community',
width: 0,
height: 0,
xAxisData:[],
yAxisData: [
{name:'黄赌毒事件户数',data:[],color:'255,248,98'},
{name:'聚众群体事件',data:[],color:'95,193,0'},
{name:'民事纠纷事件',data:[],color:'216,46,215'},
{name:'消防事件',data:[],color:'255,45,82'},
{name:'刑事案件',data:[],color:'3,179,177'},
]
},
community_case:{
id: 'community_case',
width: 0,
height: 0,
legend: ['申报立案','调查取证','大队执行','立案审核','法制审批'],
seriesData: [
{value:34, name:'申报立案'},
{value:25, name:'调查取证'},
{value:45, name:'大队执行'},
{value:14, name:'立案审核'},
{value:24, name:'法制审批'}
]
},
}
},
created(){
},
mounted() {
// 社区基础设施
this.getInfrastructure();
// 社区人口
this.getPopulation();
// 社区治安
this.getCommunitySecurity();
// 案件分析
this.getCaseAnalysis();
},
methods: {
// 社区基础设施
getInfrastructure(){
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1066'
}
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.infrastructure.xAxisData = xAxisData;
this.infrastructure.seriesData = seriesData;
// 社区服务echart
this.callEchart('infrastructure_box',this.infrastructure, 2.3);
}
})
},
// 社区人口
getPopulation(){
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1081'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params,
}).then(res => {
if (res.ret_code == 200) {
let xAxisData = [];
let CZHS = []; // 出租户数
let CZRKS = []; // 出租人口数
let HS = []; // 户数
let RKS = []; // 人口数
res.data.forEach(item=>{
xAxisData.push(item.QY);
CZHS.push(item.CZHS);
CZRKS.push(item.CZRKS);
HS.push(item.HS);
RKS.push(item.RKS);
})
this.population.xAxisData = xAxisData;
this.population.yAxisData[0].data = HS;
this.population.yAxisData[1].data = RKS;
this.population.yAxisData[2].data = CZHS;
this.population.yAxisData[3].data = CZRKS;
setTimeout(() => {
this.callEchart("echart-population-box", this.population,2.22);
}, 200);
}
})
},
// 社区治安
getCommunitySecurity(){
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1082'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params,
}).then(res => {
if (res.ret_code == 200) {
let arr = [];
res.data.forEach((item,index)=>{
// { name: "区域一", num1: "100", num2: "100%",}
arr.push({ name: item.QY, num1: item.AJS, num2:item.AJCLS, num3:item.CLL+"%" });
})
this.communitySecurity = arr;
}
})
},
// 获取案件分析数据
getCaseAnalysis(){
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1080'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params,
}).then(res => {
if (res.ret_code == 200) {
// 曲线图
let xAxisData = []; // x轴数据
let HDDSJ = []; // 黄赌毒事件
let JZQTSJ = []; // 聚众群体事件
let MSJFSJ = []; // 民事纠纷事件
let XFSJ = []; // 消防事件
let XSAJ = []; // 刑事案件
res.data.forEach((item,index)=>{
xAxisData.push(item.SJ);
HDDSJ.push(Number(item.HDDSJ));
JZQTSJ.push(Number(item.JZQTSJ));
MSJFSJ.push(Number(item.MSJFSJ));
XFSJ.push(Number(item.XFSJ));
XSAJ.push(Number(item.XSAJ));
})
this.community.xAxisData = xAxisData;
this.community.yAxisData[0].data = HDDSJ;
this.community.yAxisData[1].data = JZQTSJ;
this.community.yAxisData[2].data = MSJFSJ;
this.community.yAxisData[3].data = XFSJ;
this.community.yAxisData[4].data = XSAJ;
// 饼图
let seriesData = [
{value:this.sum(HDDSJ), name:'黄赌毒事件'},
{value:this.sum(JZQTSJ), name:'聚众群体事件'},
{value:this.sum(MSJFSJ), name:'民事纠纷事件'},
{value:this.sum(XFSJ), name:'消防事件'},
{value:this.sum(XSAJ), name:'刑事案件'}
]
this.$set(this.community_case,'seriesData',seriesData)
setTimeout(() => {
this.callEchart("echart-community-box", this.community,2.7);
this.callEchart('community_case_box',this.community_case, 1.5);
}, 100);
}
})
},
callEchart(idBox, data, offset) {
const _width = document.getElementById(idBox).clientWidth;
this.$set(data,'width',_width);
this.$set(data,'height', _width/offset);
},
sum(arr) {
var s = 0;
arr.forEach(function(val, idx, arr) {
s += val;
}, 0);
return s;
}
}
}
</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-65{
width: 65%;
float: left;
}
.col-30{
width: 30%;
float: left;
}
.col-35{
width: 35%;
float: left;
}
.col-50{
width: 50%;
float: left;
}
</style>
<style>
.page-zhsq .dataListBox li{
padding: .052rem .08rem !important;
}
.page-zhsq .communitySecurity .dataList{
min-height: 1.08rem;
}
</style>
