数据驾驶舱完善，修复部分问题

Lou

2023-12-08 8c844ea235546f84035e4a99a9703d797cec80bc

 subPackage/statistics/index.vue

@@ -29,9 +29,29 @@
      <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" v-for="i in 6">
               <text class="c-main f-32 fw mb-20">1</text>
            <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">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>
      </view>
@@ -41,10 +61,19 @@
         <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 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">
@@ -119,15 +148,7 @@

<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"
   import * as statisticsModal from "@/api/statistics/statistics.js"
   export default {
      components: {
         captionRow
@@ -137,8 +158,8 @@
            reportData: {},
            houseData: {},
            chartData: {},
            //您可以通过修改 config-ucharts.js 文件中下标为 ['bar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
            opts: {
               fontSize: 10,
               color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
                  "#ea7ccc"
               ],
@@ -146,17 +167,19 @@
               enableScroll: false,
               legend: {},
               xAxis: {
                  boundaryGap: "justify",
                  // boundaryGap: "justify",
                  disableGrid: false,
                  min: 0,
                  axisLine: false,
                  max: 70
                  // max: 70,
                  fontSize: 10,

               },
               yAxis: {},
               extra: {
                  bar: {
                     type: "stack",
                     width: 30,
                     width: 14,
                     meterBorde: 1,
                     meterFillColor: "#FFFFFF",
                     activeBgColor: "#000000",
@@ -165,7 +188,7 @@
                  }
               }
            },
            sexChartData:{},
            sexChartData: {},
            pieOpts: {
               color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
                  "#ea7ccc"
@@ -174,34 +197,38 @@
               enableScroll: false,
               extra: {
                  pie: {
                     customRadius: 60,
                     activeOpacity: 0.5,
                     activeRadius: 10,
                     offsetAngle: 0,
                     labelWidth: 15,
                     labelWidth: 6,
                     border: false,
                     borderWidth: 3,
                     borderColor: "#FFFFFF"
                  }
               }
            }
            },
            gridData: {},
            sexData: []
         }
      },

      onLoad() {
         this.getHouseHoldData();
         // this.getServerData();
         this.getHouseData();
         this.getReportData();
         this.getGridData();
      },

      methods: {
         getHouseHoldData() {
            getHouseholdStatistics({
            statisticsModal.getHouseholdStatistics({
               code: this.siteInfo.id,
               roleType: uni.getStorageSync("activeRole").roleAlias == "wgy" ? 1 : 2
            }).then(res => {
               // this.houseHoldData = res.data;
               let data = res.data;
               this.sexData = data.gender;
               this.setPersonData(data.age)
               this.setSexData(data.gender)
            })
@@ -222,45 +249,25 @@
            }
            this.chartData = JSON.parse(JSON.stringify(res));
         },
			
         setSexData(data){

         setSexData(data) {
            let res = {
               series:[
                  {
                     data:[]
                  }
               ]
               series: [{
                  data: []
               }]
            }
            for(let i of data){
               res.series[0].data.push(
                  {
                     name:i.gender,
                     value:i.numbers
                  }
               )
            for (let i of data) {
               res.series[0].data.push({
                  name: i.gender,
                  value: i.numbers
               })
            }
             this.sexChartData = JSON.parse(JSON.stringify(res));
            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({
            statisticsModal.getHouseStatistics({
               code: this.siteInfo.id,
               roleType: uni.getStorageSync("activeRole").roleAlias == "wgy" ? 1 : 2
            }).then(res => {
@@ -270,12 +277,23 @@

         //获取社区事件数据
         getReportData() {
            getReportStatistics({
            statisticsModal.getReportStatistics({
               code: this.siteInfo.id,
               roleType: uni.getStorageSync("activeRole").roleAlias == "wgy" ? 1 : 2
            }).then(res => {
               console.log(res);
               this.reportData = res.data;
            })
         },

         //获取网格物业人员
         getGridData() {
            statisticsModal.getGridStatistics({
               code: this.siteInfo.id,
               roleType: uni.getStorageSync("activeRole").roleAlias == "wgy" ? 1 : 2
            }).then(res => {
               console.log(res);
               this.gridData = res.data;
            })
         }
      }
@@ -385,12 +403,29 @@
      // background-color:#fff;
   }

   .bar-charts,.pie-charts {
   .bar-charts,
   .pie-charts {
      width: 100%;
      height: 300px;
      border-radius: 10rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
   }
    .bar-charts{
      margin:20rpx 0;

   .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;
   }
</style>