From 9e0307200758fe175bb0779eb99cc22085d5c4f8 Mon Sep 17 00:00:00 2001
From: Lou <luzhiping@qqyjz.com>
Date: Thu, 07 Dec 2023 17:57:41 +0800
Subject: [PATCH] 数据驾驶舱统计图编写，数据渲染
---
api/task/taskReportForRepairs.js | 11 +
static/icon/statistics-nav-01.png | 0
subPackage/workbench/views/rental.vue | 14 +
api/house/house.js | 9 +
pages/home/index.vue | 7
static/icon/statistics-nav-03.png | 0
static/icon/statistics-nav-02.png | 0
common/setting.js | 4
subPackage/statistics/index.vue | 393 +++++++++++++++++++++++++++++++++++++++---------
api/house/household.js | 10 +
10 files changed, 366 insertions(+), 82 deletions(-)
diff --git a/api/house/house.js b/api/house/house.js
index 9e237d3..e4e059a 100644
--- a/api/house/house.js
+++ b/api/house/house.js
@@ -25,4 +25,13 @@
method: 'GET',
params: param
})
+}
+
+//获取社区概况数据统计 （数据驾驶舱）
+export const getHouseStatistics =(param)=>{
+ return http.request({
+ url: 'blade-house/house/getHouseStatistics',
+ method: 'GET',
+ params: param
+ })
}
\ No newline at end of file
diff --git a/api/house/household.js b/api/house/household.js
index 5603106..89347cf 100644
--- a/api/house/household.js
+++ b/api/house/household.js
@@ -47,3 +47,13 @@
params: params
})
}
+
+
+// 获取住户数据统计 （数据驾驶舱）
+export const getHouseholdStatistics = (params) => {
+ return http.request({
+ url: 'blade-household/household/getHouseHoldStatistics',
+ method: 'GET',
+ params: params
+ })
+}
diff --git a/api/task/taskReportForRepairs.js b/api/task/taskReportForRepairs.js
index 1db5fdd..deed599 100644
--- a/api/task/taskReportForRepairs.js
+++ b/api/task/taskReportForRepairs.js
@@ -49,4 +49,13 @@
}
})
}
-
+//报事报修数据统计 (数据驾驶舱)
+export const getReportStatistics = (params) => {
+ return http.request({
+ url: 'blade-taskReportForRepairs/taskReportForRepairs/getReportForStatistics',
+ method: 'GET',
+ params: {
+ ...params
+ }
+ })
+}
diff --git a/common/setting.js b/common/setting.js
index cfa849f..8a75d7d 100644
--- a/common/setting.js
+++ b/common/setting.js
@@ -14,8 +14,8 @@
// devUrl:'http://192.168.1.50:9528',
// devUrl: 'http://192.168.0.102:9528',
// devUrl:'https://srgdjczzxtpt.com:2080/api',
- // devUrl: 'http://192.168.0.102:9528',
- devUrl: 'https://srgdjczzxtpt.com:2080/api',
+ devUrl: 'http://192.168.0.100:9528',
+ // devUrl: 'https://srgdjczzxtpt.com:2080/api',
minioBaseUrl: "https://srgdjczzxtpt.com:2080/gminio/jczz/",
// minioBaseUrl:"http://192.168.0.103:9528/",
// minioBaseUrl: 'https://srgdjczzxtpt.com:2080/',
diff --git a/pages/home/index.vue b/pages/home/index.vue
index d69a6e3..d1b1901 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -640,13 +640,14 @@
title: "尚无绑定房屋信息",
icon: "error"
})
-
- } else if (path == "/subPackage/statistics/index") {
+ }
+ else if (path == "/subPackage/statistics/index") {
uni.showToast({
title: "功能开发中~",
icon: "none"
})
- } else {
+ }
+ else {
this.$u.func.globalNavigator(`${path}?houseCode=${this.curHouseCode}`, "navTo")
}
diff --git a/static/icon/statistics-nav-01.png b/static/icon/statistics-nav-01.png
new file mode 100644
index 0000000..0bf8694
--- /dev/null
+++ b/static/icon/statistics-nav-01.png
Binary files differ
diff --git a/static/icon/statistics-nav-02.png b/static/icon/statistics-nav-02.png
new file mode 100644
index 0000000..5808470
--- /dev/null
+++ b/static/icon/statistics-nav-02.png
Binary files differ
diff --git a/static/icon/statistics-nav-03.png b/static/icon/statistics-nav-03.png
new file mode 100644
index 0000000..4e4490d
--- /dev/null
+++ b/static/icon/statistics-nav-03.png
Binary files differ
diff --git a/subPackage/statistics/index.vue b/subPackage/statistics/index.vue
index 6bfcb32..c2127d5 100644
--- a/subPackage/statistics/index.vue
+++ b/subPackage/statistics/index.vue
@@ -1,64 +1,117 @@
<template>
<view class="container">
- <view class="">
+ <view class="section">
<caption-row title="社区概况"></caption-row>
- <view class="cell flex j-c-s-b flex-wrap">
- <view class="cell-item bgc-ff" v-for="i in 6">
-
+ <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="menu">
- <u-grid :border="true">
- <u-grid-item v-for="i in 6" bgColor="#fff">
- <view class="menu-item flex f-d-c a-i-c">
- <text class="c-main f-32 fw">1</text>
- <text class="f-28">党员</text>
- </view>
- </u-grid-item>
- </u-grid>
+ <view class="menu bgc-ff flex flex-wrap">
+ <view class="menu-item flex f-d-c a-i-c" v-for="i in 6">
+ <text class="c-main f-32 fw mb-20">1</text>
+ <text class="f-28">党员</text>
+ </view>
</view>
</view>
- <!-- <view class="">
- <caption-row title="人员画像"></caption-row>
- </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 bgc-ff">
+ <qiun-data-charts type="pie" :opts="pieOpts" :chartData="sexChartData" />
+ </view>
+
+ </view>
+ <view class="event">
<caption-row title="社区事件"></caption-row>
- <view class="block">
+ <view class="block bgc-ff mt-20 mb-20">
<view class="block-caption f-28 fw">
总体统计
</view>
-
-
- <u-grid :border="true">
- <u-grid-item v-for="i in 3" bgColor="#fff">
- <view class="grid-item flex f-d-c a-i-c">
- <text class="f-30 fw c-main mb-20">20</text>
- <text class="f-28">事件总数</text>
- </view>
- </u-grid-item>
- </u-grid>
-
+ <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">{{Number(reportData.result2) * 100}}</text>
+ <text class="f-28">办结比例</text>
+ </view>
+ </u-grid-item>
+ </u-grid>
+ </view>
</view>
- <view class="block">
+ <view class="block bgc-ff">
<view class="block-caption f-28 fw">
事件分类
</view>
- <view class="flex j-c-s-b a-i-c">
- <view class="report-item" v-for="(item,index) in reportData" :key="index">
- <image class="report-item-bg" :src="item.bg" mode="right"></image>
- <view class="report-item-inner flex f-d-c j-c-c a-i-c">
- <text class="f-30">{{item.num}}</text>
- <text class="f-28">{{item.title}}</text>
+ <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>
@@ -66,34 +119,164 @@
<script>
import captionRow from "@/components/caption/caption.vue"
+ import {
+ getReportStatistics
+ } from "@/api/task/taskReportForRepairs.js"
+ import {
+ getHouseStatistics
+ } from "@/api/house/house.js"
+ import {
+ getHouseholdStatistics
+ } from "@/api/house/household.js"
export default {
components: {
captionRow
},
- data(){
- return{
- reportData:[
- {
- title:"矛盾纠纷",
- num:1,
- bg:"/static/icon/nav-bg-08.png"
+ data() {
+ return {
+ reportData: {},
+ houseData: {},
+ chartData: {},
+ //您可以通过修改 config-ucharts.js 文件中下标为 ['bar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
+ opts: {
+ 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
},
- {
- title:"公共维护",
- num:1,
- bg:"/static/icon/nav-bg-06.png"
- },
- {
- title:"居家维修",
- num:1,
- bg:"/static/icon/nav-bg-07.png"
- },
- {
- title:"投诉举报",
- num:1,
- bg:"/static/icon/nav-bg-09.png"
+ yAxis: {},
+ extra: {
+ bar: {
+ type: "stack",
+ width: 30,
+ 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: {
+ activeOpacity: 0.5,
+ activeRadius: 10,
+ offsetAngle: 0,
+ labelWidth: 15,
+ border: false,
+ borderWidth: 3,
+ borderColor: "#FFFFFF"
+ }
+ }
+ }
+ }
+ },
+
+ onLoad() {
+ this.getHouseHoldData();
+ // this.getServerData();
+ this.getHouseData();
+ this.getReportData();
+ },
+
+ methods: {
+ getHouseHoldData() {
+ getHouseholdStatistics({
+ code: this.siteInfo.id,
+ roleType: uni.getStorageSync("activeRole").roleAlias == "wgy" ? 1 : 2
+ }).then(res => {
+ // this.houseHoldData = res.data;
+ let data = res.data;
+ this.setPersonData(data.age)
+ this.setSexData(data.gender)
+ })
+ },
+
+
+ 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));
+ },
+
+ getServerData() {
+ //模拟从服务器获取数据时的延时
+ setTimeout(() => {
+ //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+ let res = {
+ categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
+ series: [{
+ name: "目标值",
+ data: [35, 36, 31, 33, 13, 34]
+ }]
+ };
+ this.chartData = JSON.parse(JSON.stringify(res));
+ }, 500);
+ },
+
+
+ //获取社区概况数据
+ getHouseData() {
+ getHouseStatistics({
+ code: this.siteInfo.id,
+ roleType: uni.getStorageSync("activeRole").roleAlias == "wgy" ? 1 : 2
+ }).then(res => {
+ this.houseData = res.data;
+ })
+ },
+
+ //获取社区事件数据
+ getReportData() {
+ getReportStatistics({
+ code: this.siteInfo.id,
+ roleType: uni.getStorageSync("activeRole").roleAlias == "wgy" ? 1 : 2
+ }).then(res => {
+ console.log(res);
+ this.reportData = res.data;
+ })
}
}
}
@@ -108,44 +291,106 @@
padding: 0 20rpx;
}
+ // .section {
+ // padding: 0 20rpx;
+ // }
+
.cell {
padding: 20rpx 0;
.cell-item {
- width: 220rpx;
+ // 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;
+ // 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;
}
- }
- .block{
- padding:20rpx 0;
- .block-caption{
- padding:20rpx 0;
+
+ .grid {
+ box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
}
- .grid-item{
- padding:30px 0;
+
+ .grid-item {
+ padding: 20px 0;
}
}
- .report-item{
+
+ .report-item {
position: relative;
+ margin-bottom: 10rpx;
}
- .report-item,.report-item-bg,.report-item-inner{
- width:168rpx;
- height:190rpx;
+
+ .report-item,
+ .report-item-bg,
+ .report-item-inner {
+ width: 330rpx;
+ height: 167rpx;
border-radius: 10rpx;
}
- .report-item-inner{
+
+ .report-item-inner {
position: absolute;
- top:0;
- left:0;
+ 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;
+ }
+ .bar-charts{
+ margin:20rpx 0;
}
</style>
\ No newline at end of file
diff --git a/subPackage/workbench/views/rental.vue b/subPackage/workbench/views/rental.vue
index b008c3f..6ed6668 100644
--- a/subPackage/workbench/views/rental.vue
+++ b/subPackage/workbench/views/rental.vue
@@ -11,7 +11,7 @@
</view>
<view class="search-box">
<u-search placeholder="请输入租户名" v-model="keyword" :clearabled="true" :showAction="true" :animation="true"
- @search="search" @clear="clear"></u-search>
+ @search="search" @clear="clear" @custom="search"></u-search>
</view>
</view>
@@ -46,7 +46,7 @@
<text class="f-28 ml-10">{{ records.phone || '未填写' }}</text>
</view>
</view>
- <u-tag text="未到期" type="success" plain plainFill></u-tag>
+ <u-tag :text="showStatus(records.auditStatus)" type="success" plain plainFill></u-tag>
</view>
<view class="list-address f-28 c-99">
{{ records.houseName }}
@@ -204,6 +204,15 @@
this.getRentalHouseInfo()
},
methods: {
+
+ showStatus(status){
+ for(let i of this.tabsList){
+ if(i.value == status){
+ return i.name
+ }
+ }
+ },
+
handleSelect(res) {
const [auditStatus, floor] = res
this.resetParams()
@@ -231,6 +240,7 @@
tabClick(item) {
this.tabIndex = item.index;
+ this.pagingParams.current = 1;
this.pagingParams.auditStatus = item.value;
this.tenantList = []
this.getRentalHouseInfo()
--
Gitblit v1.9.3