驾驶舱新增房屋画像统计

zhongrj

2024-03-16 8de6f9eb267f1f3cb2f711303b05e6ae7cdd1ae8

驾驶舱新增房屋画像统计

 api/statistics/statistics.js

@@ -20,6 +20,15 @@
    })
}

//获取社区概况数据统计 （数据驾驶舱）
export const getHouseLabelStatistic  =(param)=>{
    return http.request({
        url: 'blade-house/house/getHouseLabelStatistic',
        method: 'GET',
        params: param
    })
}

// 获取住户数据统计 （数据驾驶舱）
export const getHouseholdStatistics = (params) => {
    return http.request({

 subPackage/statistics/index.vue

@@ -25,6 +25,23 @@
                </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>
@@ -70,7 +87,7 @@
                    <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="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>
@@ -212,7 +229,28 @@
                        }
                    }
                },
                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: []
            }
        },
@@ -220,6 +258,7 @@
        onLoad() {
            this.getHouseHoldData();
            this.getHouseData();
            this.getHouseLabelData();
            this.getReportData();
            this.getGridData();
        },
@@ -260,8 +299,29 @@
                    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: [],
@@ -438,6 +498,15 @@
        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;
@@ -455,4 +524,10 @@
        padding-left: 40rpx;
        box-sizing: border-box;
    }
	
    .pie-charts-explain-house {
        width: 40%;
        padding-left: 40rpx;
        box-sizing: border-box;
    }
</style>