数据驾驶舱统计图编写，数据渲染

Lou

2023-12-07 9e0307200758fe175bb0779eb99cc22085d5c4f8

数据驾驶舱统计图编写，数据渲染

 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
    })
}

 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
    })
}

 api/task/taskReportForRepairs.js

@@ -49,4 +49,13 @@
        }

    })

}



//报事报修数据统计  (数据驾驶舱)

export const getReportStatistics = (params) => {

    return http.request({

        url: 'blade-taskReportForRepairs/taskReportForRepairs/getReportForStatistics',

        method: 'GET',

        params: {

            ...params

        }

    })

}


 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/',

 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")

                    }




 static/icon/statistics-nav-01.png

 static/icon/statistics-nav-02.png

 static/icon/statistics-nav-03.png

 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>

 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()