<template>
|
<view class="container">
|
<view class="section">
|
<caption-row title="社区概况"></caption-row>
|
<view class="cell flex j-c-s-b flex-wrap ">
|
<view class="cell-item">
|
<text class="f-28 mb-20 c-99">楼栋数（幢）</text>
|
<text class="f-30 fw">{{houseData.result1}}</text>
|
<image class="cell-item-icon" src="/static/icon/statistics-nav-01.png" mode="aspectFill"></image>
|
</view>
|
<view class="cell-item">
|
<text class="f-28 mb-20 c-99">房屋数（套）</text>
|
<text class="f-30 fw">{{houseData.result2}}</text>
|
<image class="cell-item-icon" src="/static/icon/statistics-nav-02.png" mode="aspectFill"></image>
|
</view>
|
<view class="cell-item">
|
<text class="f-28 mb-20 c-99">住户数（人）</text>
|
<text class="f-30 fw">{{houseData.result3}}</text>
|
<image class="cell-item-icon" src="/static/icon/statistics-nav-03.png" mode="aspectFill"></image>
|
</view>
|
<view class="cell-item">
|
<text class="f-28 mb-20 c-99">单元数</text>
|
<text class="f-30 fw">{{houseData.result4}}</text>
|
<image class="cell-item-icon" src="/static/icon/statistics-nav-01.png" mode="aspectFill"></image>
|
</view>
|
</view>
|
</view>
|
|
<!-- 房屋画像 -->
|
<view class="">
|
<caption-row title="房屋画像"></caption-row>
|
<view class="pie-charts-house flex bgc-ff">
|
<view class="pie-charts-box flex j-c-c a-i-c">
|
<qiun-data-charts type="pie" :opts="housePieOpts" :chartData="houseLabelChartData" />
|
</view>
|
<view class="pie-charts-explain-house flex f-d-c j-c-c" v-if="houseLabelData.length">
|
<!-- <view class="f-32 fw mb-20">标签</view> -->
|
<view class="flex a-i-c mb-20" v-for="i in houseLabelData">
|
<text class="f-30 fw">{{i.labelName}}</text>
|
<text class="f-26">({{i.numbers}})</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="">
|
<caption-row title="共治力量"></caption-row>
|
<view class="menu bgc-ff flex flex-wrap">
|
<view class="menu-item flex f-d-c a-i-c">
|
<text class="c-main f-32 fw mb-20">0</text>
|
<text class="f-28">党员</text>
|
</view>
|
<view class="menu-item flex f-d-c a-i-c">
|
<text class="c-main f-32 fw mb-20">0</text>
|
<text class="f-28">党组织</text>
|
</view>
|
<view class="menu-item flex f-d-c a-i-c">
|
<text class="c-main f-32 fw mb-20">{{gridData.gridStatistics}}</text>
|
<text class="f-28">网格员</text>
|
</view>
|
<!-- <view class="menu-item flex f-d-c a-i-c">
|
<text class="c-main f-32 fw mb-20">0</text>
|
<text class="f-28">社工</text>
|
</view> -->
|
<view class="menu-item flex f-d-c a-i-c">
|
<text class="c-main f-32 fw mb-20">{{gridData.companyStatistics}}</text>
|
<text class="f-28">物业人员</text>
|
</view>
|
<view class="menu-item flex f-d-c a-i-c">
|
<text class="c-main f-32 fw mb-20">{{gridData.ownersStatistics}}</text>
|
<text class="f-28">业委会</text>
|
</view>
|
<!-- <view class="menu-item flex f-d-c a-i-c">
|
<text class="c-main f-32 fw mb-20">0</text>
|
<text class="f-28">群团组织</text>
|
</view> -->
|
</view>
|
</view>
|
|
<view class="">
|
<caption-row title="人员画像"></caption-row>
|
<view class="bar-charts bgc-ff">
|
<qiun-data-charts type="bar" :opts="opts" :chartData="chartData" />
|
</view>
|
<view class="pie-charts flex bgc-ff">
|
<view class="pie-charts-box flex j-c-c a-i-c">
|
<qiun-data-charts type="pie" :opts="pieOpts" :chartData="sexChartData" />
|
</view>
|
<view class="pie-charts-explain flex f-d-c j-c-c" v-if="sexData.length">
|
<!-- <view class="f-32 fw mb-20">性别</view> -->
|
<view class="flex a-i-c mb-20" v-for="i in sexData">
|
<text class="f-30 fw">{{i.gender}}</text>
|
<text class="f-26">({{i.numbers}})</text>
|
</view>
|
</view>
|
</view>
|
|
|
</view>
|
<view class="event">
|
<caption-row title="社区事件"></caption-row>
|
<view class="block bgc-ff mt-20 mb-20">
|
<view class="block-caption f-28 fw">
|
总体统计
|
</view>
|
<view class="grid">
|
<u-grid :border="true">
|
<u-grid-item bgColor="#fff">
|
<view class="grid-item flex f-d-c a-i-c">
|
<text class="f-32 fw c-main mb-20">{{reportData.result}}</text>
|
<text class="f-28">事件总数</text>
|
</view>
|
</u-grid-item>
|
<u-grid-item bgColor="#fff">
|
<view class="grid-item flex f-d-c a-i-c">
|
<text class="f-32 fw c-main mb-20">{{reportData.result1}}</text>
|
<text class="f-28">办理数</text>
|
</view>
|
</u-grid-item>
|
<u-grid-item bgColor="#fff">
|
<view class="grid-item flex f-d-c a-i-c">
|
<text class="f-32 fw c-main mb-20">{{ setNumber(reportData.result2)}}%</text>
|
<text class="f-28">办结比例</text>
|
</view>
|
</u-grid-item>
|
</u-grid>
|
</view>
|
</view>
|
<view class="block bgc-ff">
|
<view class="block-caption f-28 fw">
|
事件分类
|
</view>
|
<view class="flex j-c-s-b a-i-c flex-wrap">
|
<view class="report-item">
|
<image class="report-item-bg" src="/static/icon/nav-bg-08.png" mode="aspectFill"></image>
|
<view class="report-item-inner flex f-d-c j-c-c ">
|
<text class="f-30 mb-20">{{reportData.result5}}</text>
|
<text class="f-28 ">矛盾纠纷</text>
|
</view>
|
</view>
|
<view class="report-item">
|
<image class="report-item-bg" src="/static/icon/nav-bg-06.png" mode="aspectFill"></image>
|
<view class="report-item-inner flex f-d-c j-c-c ">
|
<text class="f-30 mb-20">{{reportData.result3}}</text>
|
<text class="f-28 ">公共维护</text>
|
</view>
|
</view>
|
<view class="report-item">
|
<image class="report-item-bg" src="/static/icon/nav-bg-07.png" mode="aspectFill"></image>
|
<view class="report-item-inner flex f-d-c j-c-c ">
|
<text class="f-30 mb-20">{{reportData.result4}}</text>
|
<text class="f-28 ">居家维修</text>
|
</view>
|
</view>
|
<view class="report-item">
|
<image class="report-item-bg" src="/static/icon/nav-bg-09.png" mode="aspectFill"></image>
|
<view class="report-item-inner flex f-d-c j-c-c ">
|
<text class="f-30 mb-20">{{reportData.result6}}</text>
|
<text class="f-28 ">投诉举报</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import captionRow from "@/components/caption/caption.vue"
|
import * as statisticsModal from "@/api/statistics/statistics.js"
|
export default {
|
components: {
|
captionRow
|
},
|
data() {
|
return {
|
reportData: {},
|
houseData: {},
|
chartData: {},
|
opts: {
|
fontSize: 10,
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
"#ea7ccc"
|
],
|
padding: [15, 30, 0, 5],
|
enableScroll: false,
|
legend: {},
|
xAxis: {
|
// boundaryGap: "justify",
|
disableGrid: false,
|
min: 0,
|
axisLine: false,
|
// max: 70,
|
fontSize: 10,
|
|
},
|
yAxis: {},
|
extra: {
|
bar: {
|
type: "stack",
|
width: 14,
|
meterBorde: 1,
|
meterFillColor: "#FFFFFF",
|
activeBgColor: "#000000",
|
activeBgOpacity: 0.08,
|
categoryGap: 2
|
}
|
}
|
},
|
sexChartData: {},
|
pieOpts: {
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
"#ea7ccc"
|
],
|
padding: [5, 5, 5, 5],
|
enableScroll: false,
|
extra: {
|
pie: {
|
customRadius: 60,
|
activeOpacity: 0.5,
|
activeRadius: 10,
|
offsetAngle: 0,
|
labelWidth: 6,
|
border: false,
|
borderWidth: 3,
|
borderColor: "#FFFFFF"
|
}
|
}
|
},
|
houseLabelChartData: {},
|
housePieOpts: {
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
"#ea7ccc"
|
],
|
padding: [5, 5, 5, 5],
|
enableScroll: false,
|
extra: {
|
pie: {
|
customRadius: 55,
|
activeOpacity: 0.5,
|
activeRadius: 10,
|
offsetAngle: 0,
|
labelWidth: 6,
|
border: false,
|
borderWidth: 3,
|
borderColor: "#FFFFFF"
|
}
|
}
|
},
|
gridData: {},
|
houseLabelData: [],
|
sexData: []
|
}
|
},
|
|
onLoad() {
|
this.getHouseHoldData();
|
this.getHouseData();
|
this.getHouseLabelData();
|
this.getReportData();
|
this.getGridData();
|
},
|
|
methods: {
|
|
getRoleType() {
|
let roleName = uni.getStorageSync("activeRole").roleName;
|
if (roleName == "网格员") {
|
return 1;
|
} else if (roleName == "系统管理员") {
|
return 2
|
} else if (roleName == "民警") {
|
return 3;
|
}
|
},
|
|
setNumber(num) {
|
if (num) {
|
let n = Number(this.reportData.result2) * 100
|
return n.toFixed(2)
|
} else {
|
return num
|
}
|
|
},
|
|
|
getHouseHoldData() {
|
statisticsModal.getHouseholdStatistics({
|
code: this.siteInfo.id,
|
roleType: this.getRoleType()
|
}).then(res => {
|
// this.houseHoldData = res.data;
|
let data = res.data;
|
this.sexData = data.gender;
|
this.setPersonData(data.age)
|
this.setSexData(data.gender)
|
})
|
},
|
|
getHouseLabelData(){
|
statisticsModal.getHouseLabelStatistic().then(res => {
|
let data = res.data;
|
this.houseLabelData = data;
|
this.setHouseLabelData(data)
|
})
|
},
|
// 设置房屋标签
|
setHouseLabelData(data){
|
let res = {
|
series: [{
|
data: []
|
}]
|
}
|
for (let i of data) {
|
res.series[0].data.push({
|
name: i.labelName,
|
value: i.numbers
|
})
|
}
|
this.houseLabelChartData = JSON.parse(JSON.stringify(res));
|
},
|
setPersonData(data) {
|
let res = {
|
categories: [],
|
series: [{
|
name: "人数",
|
data: []
|
}]
|
}
|
for (let i of data) {
|
res.categories.push(i.age);
|
res.series[0].data.push(i.number)
|
}
|
this.chartData = JSON.parse(JSON.stringify(res));
|
},
|
|
setSexData(data) {
|
let res = {
|
series: [{
|
data: []
|
}]
|
}
|
for (let i of data) {
|
res.series[0].data.push({
|
name: i.gender,
|
value: i.numbers
|
})
|
}
|
this.sexChartData = JSON.parse(JSON.stringify(res));
|
},
|
|
//获取社区概况数据
|
getHouseData() {
|
statisticsModal.getHouseStatistics({
|
code: this.siteInfo.id,
|
roleType: this.getRoleType()
|
}).then(res => {
|
this.houseData = res.data;
|
})
|
},
|
|
//获取社区事件数据
|
getReportData() {
|
statisticsModal.getReportStatistics({
|
code: this.siteInfo.id,
|
roleType: this.getRoleType()
|
}).then(res => {
|
console.log(res);
|
this.reportData = res.data;
|
})
|
},
|
|
//获取网格物业人员
|
getGridData() {
|
statisticsModal.getGridStatistics({
|
code: this.siteInfo.id,
|
roleType: this.getRoleType()
|
}).then(res => {
|
console.log(res);
|
this.gridData = res.data;
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #f5f5f5;
|
}
|
|
.container {
|
padding: 0 20rpx;
|
}
|
|
// .section {
|
// padding: 0 20rpx;
|
// }
|
|
.cell {
|
padding: 20rpx 0;
|
|
.cell-item {
|
// width: 220rpx;
|
width: calc(50% - 20rpx);
|
height: 190rpx;
|
border-radius: 10rpx;
|
margin-bottom: 20rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
background-color: #fff;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
position: relative;
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.cell-item-icon {
|
width: 64rpx;
|
height: 64rpx;
|
position: absolute;
|
right: 20rpx;
|
top: 20rpx;
|
}
|
}
|
|
.menu {
|
// padding: 20rpx 0;
|
margin-top: 20rpx;
|
|
.menu-item {
|
width: 33%;
|
padding: 20rpx 0;
|
border-right: 1px solid #dadbde;
|
}
|
|
.menu-item:nth-child(3n) {
|
border-right: none;
|
}
|
|
.menu-item:nth-child(-n + 3) {
|
border-bottom: 1px solid #dadbde;
|
}
|
}
|
|
.event {
|
padding: 0 0 20rpx;
|
}
|
|
.block {
|
padding: 20rpx;
|
border-radius: 10rpx;
|
|
.block-caption {
|
padding: 20rpx 0;
|
}
|
|
.grid {
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.grid-item {
|
padding: 20px 0;
|
}
|
}
|
|
.report-item {
|
position: relative;
|
margin-bottom: 10rpx;
|
}
|
|
.report-item,
|
.report-item-bg,
|
.report-item-inner {
|
width: 330rpx;
|
height: 167rpx;
|
border-radius: 10rpx;
|
}
|
|
.report-item-inner {
|
position: absolute;
|
top: 0;
|
left: 0;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
// background-color:#fff;
|
}
|
|
.bar-charts,
|
.pie-charts {
|
width: 100%;
|
height: 300px;
|
border-radius: 10rpx;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
}
|
|
.pie-charts-house {
|
width: 100%;
|
height: 250px;
|
margin-top: 10px;
|
border-radius: 10rpx;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
}
|
|
.bar-charts {
|
margin: 20rpx 0;
|
}
|
|
// .pie-charts-box,.pie-charts-explain{
|
// width:50%;
|
// }
|
.pie-charts-box {
|
width: 70%;
|
}
|
|
.pie-charts-explain {
|
width: 30%;
|
padding-left: 40rpx;
|
box-sizing: border-box;
|
}
|
|
.pie-charts-explain-house {
|
width: 40%;
|
padding-left: 40rpx;
|
box-sizing: border-box;
|
}
|
</style>
|
