驾驶舱新增房屋画像统计

zhongrj

2024-03-16 8de6f9eb267f1f3cb2f711303b05e6ae7cdd1ae8

 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>