Merge branch 'dev' of http://git.wisdomcity.com.cn/WisdomCity-Web/SaaS-DataScreen into feat-b2

src/api/hui-jia.js

@@ -5,56 +5,131 @@
  * @LastEditTime: 2025-12-01 10:28:17
  * @Description:
  */
-import axios from "../assets/js/api.request"
+import axios from '../assets/js/api.request'
 export default {
   /**
    * 部分业务 http://yapi.wisdomcity.com.cn/project/25/interface/api/26531
    */
-  getBusinessData(data) {
+  getBusinessData (data) {
     return axios.request({
-      url: "/platform/bigData/business/statistics",
+      url: '/platform/bigData/business/statistics',
       params: data,
-      method: "get",
+      method: 'get'
     })
   },
   /**
    * 智能门禁 http://yapi.wisdomcity.com.cn/project/25/interface/api/26522
    */
-  getFaceDeviceData(data) {
+  getFaceDeviceData (data) {
     return axios.request({
-      url: "/platform/bigData/faceDeviceManage/faceDoorPassRecordSnapshotSta",
+      url: '/platform/bigData/faceDeviceManage/faceDoorPassRecordSnapshotSta',
       params: data,
-      method: "get",
+      method: 'get'
     })
   },
   /**
    * 智能电表 http://yapi.wisdomcity.com.cn/project/25/interface/api/26504
    */
-  getElectricData(data) {
+  getElectricData (data) {
     return axios.request({
-      url: "/platform/bigData/meterHouse/electricMeter/monthStats",
+      url: '/platform/bigData/meterHouse/electricMeter/monthStats',
       params: data,
-      method: "get",
+      method: 'get'
     })
   },
   /**
    * 智能水表 http://yapi.wisdomcity.com.cn/project/25/interface/api/26513
    */
-  getWaterData(data) {
+  getWaterData (data) {
     return axios.request({
-      url: "/platform/bigData/meterHouse/waterMeter/monthStats",
+      url: '/platform/bigData/meterHouse/waterMeter/monthStats',
       params: data,
-      method: "get",
+      method: 'get'
     })
   },
   /**
    * 实施相关数据 http://yapi.wisdomcity.com.cn/project/25/interface/api/26576
    */
-  getScreenData(data) {
+  getScreenData (data) {
     return axios.request({
-      url: "/platform/bigData/screen/statistics",
+      url: '/platform/bigData/screen/statistics',
       params: data,
-      method: "get",
+      method: 'get'
     })
   },
+  /**
+   * 数据大屏线上流水数据统计 http://yapi.wisdomcity.com.cn/project/25/interface/api/26468
+   */
+  getOnlineWaterStatistics () {
+    return axios.request({
+      url: '/platform/bigData/payRecord/statistics',
+      method: 'get'
+    })
+  },
+  /** 线上缴费金额月统计表（近12月） http://yapi.wisdomcity.com.cn/project/25/interface/api/26477
+   */
+  getOnlinePayMonth () {
+    return axios.request({
+      url: '/platform/bigData/payRecord/monthStats',
+      method: 'get'
+    })
+  },
+  /**
+   * 在线支付-周 线上缴费金额周统计表（近5周）http://yapi.wisdomcity.com.cn/project/25/interface/api/26486
+   */
+  getOnlinePayWeek () {
+    return axios.request({
+      url: '/platform/bigData/payRecord/weekStats',
+      method: 'get'
+    })
+  },
+  /**
+   * 线上缴费金额日统计表（近1月） http://yapi.wisdomcity.com.cn/project/25/interface/api/26495
+   */
+  getOnlinePayDay () {
+    return axios.request({
+      url: '/platform/bigData/payRecord/dayStats',
+      method: 'get'
+    })
+  },
+  /**
+   * 客户数据 http://yapi.wisdomcity.com.cn/project/25/interface/api/26540
+   */
+  getCustomerStatistics () {
+    return axios.request({
+      url: '/platform/bigData/customers/statistics',
+      method: 'get'
+    })
+  },
+
+  /**
+   * 项目体量 http://yapi.wisdomcity.com.cn/project/25/interface/api/26549
+   */
+  getCommunityTypeSizeStatistics () {
+    return axios.request({
+      url: '/platform/bigData/community/typeSize/statistics',
+      method: 'get'
+    })
+  },
+
+  /**
+   * 项目地区分布 http://yapi.wisdomcity.com.cn/project/25/interface/api/26558
+   */
+  getCommunityRegionStatistics () {
+    return axios.request({
+      url: '/platform/bigData/community/region/statistics',
+      method: 'get'
+    })
+  },
+
+  /**
+   * 用户信息统计 http://yapi.wisdomcity.com.cn/project/25/interface/api/26567
+   */
+  getUsersStatistics () {
+    return axios.request({
+      url: '/platform/bigData/users/statistics',
+      method: 'get'
+    })
+  }
+
 }

src/api/index.js

@@ -7,12 +7,10 @@
  */
 import api from './api'
 import totalSum from './total-sum'
-import screen from './screen'
 import huiJiaApi from './hui-jia'
 
 export {
   api,
   totalSum,
-  screen,
   huiJiaApi
 }

src/api/screen.js

@@ -1,11 +0,0 @@
-import axios from '../assets/js/api.request'
-
-export default {
-  getProjectStatistics (data) {
-    return axios.request({
-      url: '/log/bi/project/statistics',
-      params: data,
-      method: 'get'
-    })
-  }
-}

src/views/hui-jia/b1-screen/index.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="b1-screen-content">
       <div class="item-1">
-        <CommunityMap />
+        <CommunityMap :center="[105,34]" :zoom="4" />
       </div>
       <div class="middle-wrap">
         <div class="item-2"><User />></div>
@@ -203,15 +203,15 @@
       .item-2 {
         flex: 0 0 100%;
         width: 100%;
-        height: calc(35% - $gap-padding);
+        height: calc(37% - $gap-padding);
       }
       .item-3 {
         width: calc(50% - $gap-padding);
-        height: calc(65% - $gap-padding);
+        height: calc(63% - $gap-padding);
       }
       .item-4 {
         width: calc(50% - $gap-padding);
-        height: calc(65% - $gap-padding);
+        height: calc(63% - $gap-padding);
       }
     }
     .right-wrap {

src/views/hui-jia/components/card/index.vue

@@ -44,15 +44,15 @@ export default {
     .card-header{
       color: rgba(185, 227, 244, 1);
       font-size: halfW(16);
-      padding:  halfH(6) halfW(10);
+      padding:  halfH(4) halfW(10);
       background: var(--title-bg);
       .title{
         display: inline-block;
         vertical-align: middle;
       }
       .icon{
-        width: halfW(24);
-        height: halfH(24);
+        width: halfW(28);
+        height: halfW(28);
         vertical-align: middle;
         margin-right: halfW(8);
       }
@@ -63,7 +63,7 @@ export default {
     .card-body{
       padding: halfH(16) halfW(10);
       box-sizing: border-box;
-      height: calc(100% - halfH(12) - halfH(16) - halfH(10));
+      height: calc(100% - halfH(8) - halfH(16) - halfW(28));
     }
 }
 </style>

src/views/hui-jia/components/community-map/components/map-list.vue

@@ -15,7 +15,16 @@
           <p class="list-name inline-block" v-text="title"></p>
           <p class="list-count inline-block right" v-text="extra"></p>
       </div>
-
+      <vueSeamless
+        :data="list"
+        :class-option="optionScroll"
+        class="map-scroll"
+      >
+        <div v-for="(info, index) in list" :key="index" class="list">
+          <p class="list-name inline-block" v-text="info.label"></p>
+          <p class="list-count inline-block right" v-text="info.content"></p>
+        </div>
+      </vueSeamless>
       <!-- <WcScrollList :list="list" class="list">
           <template v-slot:default="{ info }">
           <p class="list-name inline-block" v-text="info.label"></p>
@@ -27,9 +36,11 @@
 
 <script>
 // import WcScrollList from '_c/wc-scroll-list/wc-scroll-list.vue'
+import vueSeamless from "vue-seamless-scroll"
 
 export default {
   components: {
+    vueSeamless
     // WcScrollList
   },
   name: 'MapList',
@@ -65,6 +76,71 @@ export default {
       default: true
     }
   },
+  data() {
+    return {
+      mapData: [
+        {
+          label: '海南省',
+          content: '100'
+        },
+        {
+          label: '湖北省',
+          content: '100'
+        },
+        {
+          label: '湖南省',
+          content: '100'
+        },
+        {
+          label: '广东省',
+          content: '100'
+        },
+        {
+          label: '广西省',
+          content: '100'
+        },
+        {
+          label: '江西省',
+          content: '100'
+        },
+        {
+          label: '江苏省',
+          content: '100'
+        },
+        {
+          label: '浙江省',
+          content: '100'
+        },
+        {
+          label: '福建省',
+          content: '100'
+        },
+        {
+          label: '河南省',
+          content: '100'
+        },
+        {
+          label: '河北省',
+          content: '100'
+        },
+        {
+          label: '河南省',
+          content: '100'
+        },
+        {
+          label: '河北省',
+          content: '100'
+        }
+      ]
+    }
+  },
+  computed: {
+    optionScroll() {
+        return {
+          step: 0.5,
+        }
+      },
+  },
   watch: {
     position: {
       handler () {
@@ -73,6 +149,9 @@ export default {
       deep: true
     }
   },
+  mounted () {
+    this.draw()
+  },
   methods: {
     draw () {
       if (this.$refs.customOverlay) {
@@ -114,26 +193,28 @@ export default {
   }
 
   .header {
-    height:halfH(58);
-    padding: 0px 20px;
-    line-height:halfH(58);
+    // height:halfH(50%);
+    padding: halfH(12) halfW(20);
+    // line-height:halfH(58);
     background:rgba(34,127,233,0.6);
-    font-size:20px;
+    font-size: halfH(18);
     font-family:Hiragino Sans GB;
     font-weight:bold;
     color:rgba(255,255,255,1);
   }
-
+  .map-scroll {
+    overflow: auto;
+  }
   .list {
-    padding: 20px;
-    top: halfH(58);
-    font-size:16px;
+    padding: halfH(12) halfW(20);
+    // top: halfH(58);
+    font-size: halfH(16);
     font-family:Hiragino Sans GB;
     font-weight:normal;
     color:rgba(255,255,255,1);
 
     .list-name {
-      height: halfH(30);
+      // height: halfH(30);
       width: 70%;
       @include text-ellipsis;
     }

src/views/hui-jia/components/community-map/index.vue

@@ -1,13 +1,8 @@
 <template>
     <Card :title="title" :icon="icon" class="community-map">
       <div class="map-con">
-        <tdt-map style="position: relative;z-index: 0;" mapStyle="indigo" :center="[
-            105,
-            34,
-          ]"
-          :zoom="5"
-          :minZoom="5"
-          :maxZoom="5"
+        <tdt-map style="position: relative;z-index: 0;" mapStyle="indigo" :center="center"
+          :zoom="zoom"
           :controls="[
             {
               name: 'Scale',
@@ -37,13 +32,13 @@
             </tdt-label>
           <!-- </div> -->
         </tdt-map>
-        <MapList title="省份" :isShow="provinceList.length" :list="provinceList" :position="{left: 30, bottom: 30}"></MapList>
+        <MapList title="省份" :list="provinceList" :position="{left: 30, bottom: 30}"></MapList>
       </div>
     </Card>
   </template>
 <script>
 import provincePosition from './province-positon'
-// import { screen } from '@/api'
+import { huiJiaApi } from '@/api'
 import Card from '@/views/hui-jia/components/card'
 import icon from './images/icon-title.png'
 import MapList from './components/map-list.vue'
@@ -53,99 +48,108 @@ export default {
     Card,
     MapList
   },
+  props: {
+    zoom: {
+      type: Number,
+      default: 5
+    },
+    center: {
+      type: Array,
+      default: () => [
+            107,
+            32,
+          ]
+    }
+  },
   data () {
     return {
       title: '项目地区分布',
       icon: icon,
       provinceList: [],
-      state: {
-        center: [113.280637, 23.125178],
-        zoom: 12
-      }
     }
   },
   mounted () {
     // setTimeout(() => {
     //   this.mapInit()
     // }, 500)
-    // this.getProjectStatistics()
+    // this.getCommunityRegionStatistics()
   },
   methods: {
     mapInit () {
-      const _data = [
-        {
-          provinceName: '海南省',
-          count: 100
-        },
-        {
-          provinceName: '广东省',
-          count: 200
-        },
-        {
-          provinceName: '四川省',
-          count: 300
-        },
-        {
-          provinceName: '贵州省',
-          count: 400
-        },
-        {
-          provinceName: '云南省',
-          count: 500
-        },
-        {
-          provinceName: '西藏自治区',
-          count: 600
-        },
-        {
-          provinceName: '陕西省',
-          count: 700
-        },
-        {
-          provinceName: '甘肃省',
-          count: 800
-        }
-      ]
-      let arr = []
-      _data.forEach((item, i) => {
-        let cName = item.provinceName.substring(0, 2)
-        let province = provincePosition.find(p => p.name.indexOf(cName) !== -1)
-        let ele = {
-          label: province.name,
-          content: item.count,
-          point: {
-            lng: province.geoCoord[0],
-            lat: province.geoCoord[1]
-          }
-        }
-        arr.push(ele)
-      })
-      this.provinceList = arr
-    }
-    // getProjectStatistics () {
-    //   this.provinceList = []
-    //   screen.getProjectStatistics()
-    //     .then(({ data }) => {
-    //       if (data.code === '200') {
-    //         let _data = data.data
-    //         let arr = []
-    //         _data.provinceStatistics.forEach((item, i) => {
-    //           let cName = item.provinceName.substring(0, 2)
-    //           let province = provincePosition.find(p => p.name.indexOf(cName) !== -1)
-    //           let ele = {
-    //             label: province.name,
-    //             content: item.count,
-    //             point: {
-    //               lng: province.geoCoord[0],
-    //               lat: province.geoCoord[1]
-    //             }
-    //           }
-    //           arr.push(ele)
-    //         })
-    //         this.provinceList = arr
+      // const _data = [
+      //   {
+      //     provinceName: '海南省',
+      //     count: 100
+      //   },
+      //   {
+      //     provinceName: '广东省',
+      //     count: 200
+      //   },
+      //   {
+      //     provinceName: '四川省',
+      //     count: 300
+      //   },
+      //   {
+      //     provinceName: '贵州省',
+      //     count: 400
+      //   },
+      //   {
+      //     provinceName: '云南省',
+      //     count: 500
+      //   },
+      //   {
+      //     provinceName: '西藏自治区',
+      //     count: 600
+      //   },
+      //   {
+      //     provinceName: '陕西省',
+      //     count: 700
+      //   },
+      //   {
+      //     provinceName: '甘肃省',
+      //     count: 800
+      //   }
+      // ]
+    //   let arr = []
+    //   _data.forEach((item, i) => {
+    //     let cName = item.provinceName.substring(0, 2)
+    //     let province = provincePosition.find(p => p.name.indexOf(cName) !== -1)
+    //     let ele = {
+    //       label: province.name,
+    //       content: item.count,
+    //       point: {
+    //         lng: province.geoCoord[0],
+    //         lat: province.geoCoord[1]
     //       }
-    //     })
+    //     }
+    //     arr.push(ele)
+    //   })
+    //   this.provinceList = arr
     // }
+    // getCommunityRegionStatistics () {
+      this.provinceList = []
+      huiJiaApi.getCommunityRegionStatistics()
+        .then(({ data }) => {
+          if (data.code === '200') {
+            let _data = data.data
+            let arr = []
+            _data.provinceStatistics.forEach((item, i) => {
+              let cName = item.provinceName.substring(0, 2)
+              let province = provincePosition.find(p => p.name.indexOf(cName) !== -1)
+              let ele = {
+                label: province.name,
+                content: item.count,
+                point: {
+                  lng: province.geoCoord[0],
+                  lat: province.geoCoord[1]
+                }
+              }
+              arr.push(ele)
+            })
+            this.provinceList = arr
+          }
+        })
+    }
   }
 }
 </script>

src/views/hui-jia/components/community-type/components/bar.vue

@@ -6,6 +6,34 @@ import * as echarts from 'echarts'
 
 export default {
   name: 'bar',
+  props:{
+    xAxisData: {
+      type: Array,
+      default: () => []
+    },
+    seriesData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    xAxisData: {
+      handler (newVal, oldVal) {
+        if (newVal.length) {
+          this.initChart()
+        }
+      },
+      deep: true
+    },
+    seriesData: {
+      handler (newVal, oldVal) {
+        if (newVal.length) {
+          this.initChart()
+        }
+      },
+      deep: true
+    }
+  },
   mounted () {
     this.initChart()
   },
@@ -23,8 +51,8 @@ export default {
     },
     initChart () {
       const myChart = echarts.init(this.$refs.onlinePayBar)
-      const xAxisData = ['1k以下', '1-5k', '5-10k', '10-20k', '20k以上']
-      const seriesData = [5, 20, 36, 10, 10]
+      const xAxisData = this.xAxisData
+      const seriesData = this.seriesData
       // let max = 0
       // max = seriesData.reduce((max, num) => {
       //   return Math.max(Number(max), Number(num))

src/views/hui-jia/components/community-type/index.vue

@@ -1,7 +1,7 @@
 <template>
     <Card :title="title" :icon="icon" class="community-type">
       <ThreePie :value="value" :legendIcons="legendIcons" class="w-full"></ThreePie>
-      <Bar :value="value" v-if="showBar" class="w-full"></Bar>
+      <Bar :xAxisData="xAxisData" :seriesData="seriesData" v-if="showBar" class="w-full"></Bar>
     </Card>
   </template>
 <script>
@@ -13,6 +13,7 @@ import iconZz from './images/icon-zz.png'
 import iconSy from './images/icon-sy.png'
 import iconZh from './images/icon-zh.png'
 import Bar from './components/bar.vue'
+import { huiJiaApi } from '@/api'
 
 export default {
   name: 'CommunityType',
@@ -29,20 +30,25 @@ export default {
   },
   data () {
     return {
+      xAxisData: [],
+      seriesData: [],
       title: '项目类型',
       icon: icon,
       value: [
         {
           value: 100,
-          name: '住宅'
+          name: '住宅',
+          key: 'flatCount'
         },
         {
           value: 200,
-          name: '商业'
+          name: '商业',
+          key: 'businessCount'
         },
         {
           value: 300,
-          name: '综合'
+          name: '综合',
+          key: 'otherCount'
         }
       ],
       legendIcons: [
@@ -54,10 +60,22 @@ export default {
       subtext: '项目类型占比'
     }
   },
+  mounted() {
+    this.getCommunityTypeSizeStatistics()
+  },
   methods: {
-    // getLegendIcons (url) {
-    //   return require(url)
-    // }
+    getCommunityTypeSizeStatistics () {
+      huiJiaApi.getCommunityTypeSizeStatistics().then(res => {
+        if(res && res.data){
+          const _data = res.data.data
+          this.xAxisData = [_data.intervalOneName, _data.intervalTwoName, _data.intervalThreeName, _data.intervalFourName, _data.intervalFiveName]
+          this.seriesData = [_data.intervalOneCount, _data.intervalTwoCount, _data.intervalThreeCount, _data.intervalFourCount, _data.intervalFiveCount]
+          this.value.forEach(item => {
+            item.value = res.data.data[item.key]
+          })
+        }
+      })
+    }
   }
 }
 </script>

src/views/hui-jia/components/online-pay-day/index.vue

@@ -26,6 +26,7 @@
   </template>
 <script>
 import * as echarts from 'echarts'
+import { huiJiaApi } from '@/api'
 // import { getBigNumberWithUint } from '@/libs/tools.js'
 import Card from '@/views/hui-jia/components/card'
 import icon from './images/icon-title.png'
@@ -47,6 +48,8 @@ export default {
   },
   data () {
     return {
+      xAxisData: ['01:00', '04:00', '07:00', '10:00', '13:00', '16:00', '19:00', '22:00'],
+      seriesData: [0, 0, 0, 0, 0, 0, 0, 0],
       title: '线上缴费日热度',
       subTitle: '近12个月',
       icon: icon
@@ -54,8 +57,16 @@ export default {
   },
   mounted () {
     this.initChart()
+    this.getOnlinePayDay()
   },
   methods: {
+    getOnlinePayDay () {
+      huiJiaApi.getOnlinePayDay().then(res => {
+        this.xAxisData = res.data.data.list.map(item => item.statData)
+        this.seriesData = res.data.data.list.map(item => item.payAmount)
+        this.initChart()
+      })
+    },
     /**
      * 获取一个和max最接近的能被5整除的无零头整数
      */
@@ -69,8 +80,8 @@ export default {
     },
     initChart () {
       const myChart = echarts.init(this.$refs.onlinePayDayBar)
-      const xAxisData = ['01:00', '04:00', '07:00', '10:00', '13:00', '16:00', '19:00', '22:00']
-      const seriesData = [10, 20, 36, 10, 10, 20, 40, 25]
+      const xAxisData = this.xAxisData
+      const seriesData = this.seriesData
       let all = seriesData.reduce((total, num) => {
         return Number(total) + Number(num)
       })
@@ -133,7 +144,7 @@ export default {
           axisLabel: {
             color: '#fff',
             margin: 15,
-            fontSize: 14,
+            fontSize: 12,
             formatter: function (val, idx) {
               let value = xAxisData[idx]
               return value
@@ -177,9 +188,9 @@ export default {
         yAxis: [
           {
             axisLabel: {
-              color: '#fff',
-              margin: 25,
-              fontSize: 14
+              color: 'rgba(160, 179, 214, 0.7)',
+              fontSize: 11,
+              margin: 12
             },
             axisLine: {
               show: false,

src/views/hui-jia/components/online-pay-week/index.vue

@@ -26,6 +26,7 @@
   </template>
 <script>
 import * as echarts from 'echarts'
+import { huiJiaApi } from '@/api'
 import Card from '@/views/hui-jia/components/card'
 import icon from './images/icon-title.png'
 
@@ -46,6 +47,8 @@ export default {
   },
   data () {
     return {
+      xAxisData: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
+      seriesData: [0, 0, 0, 0, 0, 0, 0],
       title: '线上缴费周热度',
       subTitle: '近12个月',
       icon: icon
@@ -53,8 +56,16 @@ export default {
   },
   mounted () {
     this.initChart()
+    this.getOnlinePayWeek()
   },
   methods: {
+    getOnlinePayWeek () {
+      huiJiaApi.getOnlinePayWeek().then(res => {
+        this.xAxisData = res.data.data.list.map(item => item.statData)
+        this.seriesData = res.data.data.list.map(item => item.payAmount)
+        this.initChart()
+      })
+    },
     /**
      * 获取一个和max最接近的能被5整除的无零头整数
      */
@@ -68,8 +79,8 @@ export default {
     },
     initChart () {
       const myChart = echarts.init(this.$refs.onlinePayWeekBar)
-      const xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-      const seriesData = [10, 20, 36, 10, 10, 20, 40]
+      const xAxisData = this.xAxisData
+      const seriesData = this.seriesData
       let all = seriesData.reduce((total, num) => {
         return Number(total) + Number(num)
       })
@@ -132,7 +143,7 @@ export default {
           axisLabel: {
             color: '#fff',
             margin: 15,
-            fontSize: 14,
+            fontSize: 12,
             formatter: function (val, idx) {
               let value = xAxisData[idx]
               return value
@@ -176,9 +187,9 @@ export default {
         yAxis: [
           {
             axisLabel: {
-              color: '#fff',
-              margin: 25,
-              fontSize: 14
+              color: 'rgba(160, 179, 214, 0.7)',
+              fontSize: 11,
+              margin: 12
             },
             axisLine: {
               show: false,

src/views/hui-jia/components/online-pay/index.vue

@@ -5,7 +5,7 @@
           <img src="./images/icon-total.png" alt="" class="icon">
         </div>
         <div>
-          总缴费（近12个月）：￥234554
+          总缴费（近12个月）：￥{{ total }}
         </div>
       </div>
       <div class="bar-con">
@@ -16,6 +16,7 @@
 <script>
 import * as echarts from 'echarts'
 // import { getBigNumberWithUint } from '@/libs/tools.js'
+import { huiJiaApi } from '@/api'
 import Card from '@/views/hui-jia/components/card'
 import icon from './images/icon-title.png'
 
@@ -36,6 +37,9 @@ export default {
   },
   data () {
     return {
+      xAxisData: ['十二月', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月'],
+      seriesData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+      total: 0,
       title: '线上缴费统计',
       subTitle: '近12个月',
       icon: icon
@@ -43,8 +47,17 @@ export default {
   },
   mounted () {
     this.initChart()
+    this.getOnlinePayMonth()
   },
   methods: {
+    getOnlinePayMonth () {
+      huiJiaApi.getOnlinePayMonth().then(res => {
+        this.total = res.data.data.allSum
+        this.xAxisData = res.data.data.list.map(item => item.statData)
+        this.seriesData = res.data.data.list.map(item => item.payAmount)
+        this.initChart()
+      })
+    },
     /**
      * 获取一个和max最接近的能被5整除的无零头整数
      */
@@ -58,8 +71,10 @@ export default {
     },
     initChart () {
       const myChart = echarts.init(this.$refs.onlinePayBar)
-      const xAxisData = ['十二月', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月']
-      const seriesData = [5, 20, 36, 10, 10, 20, 40, 25, 30, 45, 50, 60]
+      // const xAxisData = ['十二月', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月']
+      // const seriesData = [5, 20, 36, 10, 10, 20, 40, 25, 30, 45, 50, 60]
+      const xAxisData = this.xAxisData
+      const seriesData = this.seriesData
       // let max = 0
       // max = seriesData.reduce((max, num) => {
       //   return Math.max(Number(max), Number(num))
@@ -86,7 +101,7 @@ export default {
           axisLabel: {
             color: '#fff',
             margin: 15,
-            fontSize: 14,
+            fontSize: 12,
             formatter: function (val, idx) {
               let value = xAxisData[idx]
               return value
@@ -130,9 +145,9 @@ export default {
         yAxis: [
           {
             axisLabel: {
-              color: '#fff',
-              margin: 25,
-              fontSize: 14
+              color: 'rgba(160, 179, 214, 0.7)',
+              fontSize: 11,
+              margin: 12
             },
             axisLine: {
               show: false,

src/views/hui-jia/components/online-water/index.vue

@@ -6,7 +6,7 @@
       </div>
       <div class="info">
         <p class="title">线上流水总额</p>
-        <p class="num">34656444444.55</p>
+        <p class="num">{{ onlineWaterInfo.allSum || 0 }}</p>
       </div>
     </div>
     <div class="con-center display-flex">
@@ -17,13 +17,13 @@
           </div>
           <div class="info flex-1">
             <p class="title">单笔缴费金额</p>
-            <p class="num">344.55</p>
+            <p class="num">{{ onlineWaterInfo.recentAveAmount || 0 }}</p>
             <p class="desc">(近12个月平均值)</p>
           </div>
         </div>
         <div class="bottom display-flex">
           <span class="title">单笔最大值</span>
-          <span class="num">346544.55</span>
+          <span class="num">{{ onlineWaterInfo.recentMaxAmount || 0 }}</span>
         </div>
 
       </div>
@@ -34,13 +34,13 @@
           </div>
           <div class="info flex-1">
             <p class="title">月在线缴费次数</p>
-            <p class="num">346564</p>
+            <p class="num">{{ onlineWaterInfo.avgMonPayCnt || 0 }}</p>
             <p class="desc">(近12个月平均值)</p>
           </div>
         </div>
         <div class="bottom display-flex">
           <span class="title">单笔最大值</span>
-          <span class="num">346544.55</span>
+          <span class="num">{{ onlineWaterInfo.maxMonthlyCnt || 0 }}</span>
         </div>
       </div>
     </div>
@@ -55,12 +55,13 @@
         </div>
       </div>
       <div class="num">
-        34656444444.55
+        {{ onlineWaterInfo.recentlySum || 0 }}
       </div>
     </div>
   </Card>
 </template>
 <script>
+import { huiJiaApi } from '@/api'
 import Card from '@/views/hui-jia/components/card'
 import icon from './images/icon-title.png'
 
@@ -78,7 +79,18 @@ export default {
   data () {
     return {
       title: '线上流水数据',
-      icon: icon
+      icon: icon,
+      onlineWaterInfo: {}
+    }
+  },
+  mounted () {
+    this.getOnlineWaterStatistics()
+  },
+  methods: {
+    getOnlineWaterStatistics () {
+      huiJiaApi.getOnlineWaterStatistics().then(res => {
+        this.onlineWaterInfo = res.data.data
+      })
     }
   }
 }

src/views/hui-jia/components/resident/index.vue

@@ -6,8 +6,8 @@
         </div>
         <div class="num display-flex flex-1">
           <div v-for="item in residentData" :key="item.title" class="resident-item flex-1">
-          <div class="title">{{ item.title }}</div>
-          <div class="value">{{ item.value }}</div>
+            <div class="title">{{ item.title }}</div>
+            <div class="value">{{ item.value }}</div>
           </div>
         </div>
       </div>
@@ -29,6 +29,7 @@ import icon from './images/icon-title.png'
 import iconReport from './images/icon-report.png'
 import iconQrcode from './images/icon-qrcode.png'
 import iconPay from './images/icon-pay.png'
+import { huiJiaApi } from '@/api'
 
 export default {
   name: 'Resident',
@@ -43,46 +44,69 @@ export default {
   },
   data () {
     return {
+      rate: 0,
       title: '用户信息',
       icon: icon,
       residentData: [
         {
           title: '公众号关注数',
-          value: 1000
+          value: 1000,
+          key: 'mpFollowCount'
         },
         {
           title: '绘服务绑定数',
-          value: 1000
+          value: 1000,
+          key: 'hfwBindCount'
         },
         {
           title: '日活跃数（近1月）',
-          value: 1000
+          value: 1000,
+          key: 'userLiveCount'
         }
       ],
       operateData: [
         {
           title: '绘服务缴费次数',
           value: 1000,
-          icon: iconPay
+          icon: iconPay,
+          key: 'payCount'
         },
         {
           title: '绘服务扫码次数',
           value: 1000,
-          icon: iconQrcode
+          icon: iconQrcode,
+          key: 'scanCodeCount'
         },
         {
           title: '绘服务报事次数',
           value: 1000,
-          icon: iconReport
+          icon: iconReport,
+          key: 'workCount'
         }
       ],
       colorArr: ['#182744', '#82D1F6', '#02338C']
     }
   },
   mounted () {
-    this.initChart()
+    
+    this.getUsersStatistics()
   },
   methods: {
+    getUsersStatistics () {
+      huiJiaApi.getUsersStatistics().then(res => {
+        if(res && res.data){
+          this.rate = res.data.data.attentionRate || 0
+          this.residentData.forEach(item => {
+            item.value = res.data.data[item.key] || 0
+          })
+          this.operateData.forEach(item => {
+            item.value = res.data.data[item.key] || 0
+          })
+          this.initChart()
+        }
+       
+      })
+    },
     initChart () {
       const myChart = echarts.init(this.$refs.dom)
       const option = {
@@ -121,7 +145,7 @@ export default {
         // 圆环位置和大小
         polar: {
           center: ['50%', '50%'],
-          radius: '170'
+          radius: '170%'
         },
         series: [{
           type: 'bar',
@@ -200,9 +224,8 @@ export default {
             color: '#00D2ED'
           },
           data: [{
-            value: 75,
+            value: this.rate,
             name: '绘服务'
-            // name: 75 + '\n' + '{a|' + '首要污染物：PM10' + '}'
           }]
         }
         ]
@@ -229,10 +252,12 @@ export default {
     flex-direction: column;
     text-align: center;
     padding-left: halfW(10);
+    .resident-item{
+      align-content: center;
+    }
     .title{
       font-size: halfH(16);
       color: #82D1F6;
-      text-align: left;
     }
     .value{
       font-size: halfH(20);
@@ -255,8 +280,8 @@ export default {
       border-right: none;
     }
     .img{
-      width: halfW(46);
-      height: halfH(46);
+      width: halfW(40);
+      height: halfW(40);
     }
     .title{
       font-size: halfH(20);

src/views/hui-jia/components/user/index.vue

@@ -1,6 +1,6 @@
 <template>
     <Card :title="title" :icon="icon" class="user">
-      <div class="content display-flex">
+      <div class="content">
         <div v-for="item in userData" :key="item.title" class="user-item flex-1">
           <div class="icon">
             <img :src="item.icon" alt="" class="img">
@@ -12,6 +12,8 @@
     </Card>
   </template>
 <script>
+import { huiJiaApi } from '@/api'
+
 import Card from '@/views/hui-jia/components/card'
 import icon from './images/icon-title.png'
 import iconPark from './images/icon-park.png'
@@ -33,38 +35,59 @@ export default {
       userData: [
         {
           title: '客户数',
+          key: 'customersCount',
           value: 1000,
           icon: iconUser
         },
         {
           title: '项目数',
           value: 1000,
+          key: 'communityCount',
           icon: iconCommunity
         },
         {
           title: '房屋数',
           value: 1000,
+          key: 'houseCount',
           icon: iconHouse
         },
         {
           title: '住户数',
           value: 1000,
+          key: 'residentCount',
           icon: iconResident
         },
         {
           title: '车位数',
           value: 1000,
+          key: 'parkingSpaceCount',
           icon: iconPark
         },
         {
           title: '车辆数',
           value: 1000,
+          key: 'carCount',
           icon: iconCar
         }
 
       ]
     }
-  }
+  },
+  mounted () {
+    this.getCustomerStatistics()
+  },
+  methods: {
+    getCustomerStatistics () {
+      huiJiaApi.getCustomerStatistics().then(res => {
+        if(res && res.data){
+          this.userData.forEach(item => {
+            item.value = res.data.data[item.key]
+          })
+        }
+       
+      })
+    }
+  },
 }
 </script>
 <style lang="scss">
@@ -74,14 +97,17 @@ export default {
 .user{
   .content{
     width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
   }
   .user-item{
     text-align: center;
     // line-height: halfH(50);
   }
   .img{
-    width: halfW(40);
-    height: halfH(40);
+    width: halfW(34);
+    height: halfW(34);
     object-fit: cover;
   }
   .title{
@@ -90,7 +116,7 @@ export default {
     margin: halfH(16) 0;
   }
   .value{
-    font-size: halfH(28);
+    font-size: halfH(22);
     color: #fff;
   }
 }