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

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

@@ -40,7 +40,7 @@ export default {
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 @import '@/assets/css/function.scss';
 @import '@/assets/css/screen.scss';
 
@@ -49,23 +49,21 @@ export default {
   height: 100%;
   height: calc(100% - $title-hd);
   display: flex;
+  flex-direction: row;
   gap: halfW(16);
   .screen-l{
     width: calc(35%);
-    // flex: 1 1 0%;
-    // background-color: red;
+    flex: 1 1 0%;
+    height: calc(100%);
   }
   .screen-r{
     width: calc(65%);
-    // flex: 2 1 0%;
     display: flex;
     flex-direction: column;
     gap: halfH(16);
+    flex: 2 1 0%;
     .screen-r-top{
       flex: 1 1 0%;
-      // width: 100%;
-      // height: calc(20% - halfH(16));
-      // background-color: yellow;
     }
     .screen-r-bottom{
       flex: 2 1 0%;
@@ -73,11 +71,9 @@ export default {
       gap: halfW(16);
       .item-l{
         flex: 1 1 0%;
-        // background-color: blue;
       }
       .item-r{
         flex: 1 1 0%;
-        // background-color: orange;
       }
     }
   }

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

@@ -69,64 +69,9 @@ export default {
     }
   },
   mounted () {
-    // setTimeout(() => {
-    //   this.mapInit()
-    // }, 500)
-    // 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
-    // }
-    // getCommunityRegionStatistics () {
       this.provinceList = []
       huiJiaApi.getCommunityRegionStatistics()
         .then(({ data }) => {

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

@@ -16,6 +16,11 @@ export default {
       default: () => []
     }
   },
+  data () {
+    return {
+      barInstance: null
+    }
+  },
   watch: {
     xAxisData: {
       handler (newVal, oldVal) {
@@ -36,6 +41,13 @@ export default {
   },
   mounted () {
     this.initChart()
+    window.addEventListener("resize", this.handleResize)
+  },
+  beforeDestroy() {
+    if (this.barInstance) {
+      this.barInstance.dispose()
+    }
+    window.removeEventListener("resize", this.handleResize)
   },
   methods: {
     /**
@@ -50,7 +62,7 @@ export default {
       return max
     },
     initChart () {
-      const myChart = echarts.init(this.$refs.onlinePayBar)
+      this.barInstance = echarts.init(this.$refs.onlinePayBar)
       const xAxisData = this.xAxisData
       const seriesData = this.seriesData
       // let max = 0
@@ -186,8 +198,14 @@ export default {
           data: seriesData
         }]
       }
-      myChart.setOption(option)
-    }
+      this.barInstance.setOption(option)
+      this.barInstance.resize()
+    },
+    handleResize() {
+      if (this.barInstance) {
+        this.barInstance.resize()
+      }
+    },
   }
 }
 </script>

src/views/hui-jia/components/community-type/components/three-pie.vue

@@ -55,6 +55,7 @@ export default {
   },
   data () {
     return {
+      pieInstance: null,
       titleStyle: {
         fontSize: 14,
         fontFamily: 'Microsoft YaHei',
@@ -136,7 +137,7 @@ export default {
         graphic: [
           {
             type: 'group',
-            left: '45%',
+            left: '50%',
             top: 'middle',
             silent: true,
             children: [
@@ -178,7 +179,7 @@ export default {
           },
           {
             type: 'group',
-            left: '45%',
+            left: '50%',
             bottom: '60%',
             silent: true,
             rotation: -5.85,
@@ -221,7 +222,7 @@ export default {
           },
           {
             type: 'group',
-            left: '45%',
+            left: '50%',
             top: '60%',
             silent: true,
             rotation: 5.85,
@@ -331,15 +332,24 @@ export default {
           }
         ]
       }
-      this.dom.setOption(option)
-    }
+      this.pieInstance.setOption(option)
+      this.pieInstance.resize()
+    },
+
   },
   mounted () {
     this.$nextTick(() => {
-      this.dom = echarts.init(this.$refs.dom)
+      this.pieInstance = echarts.init(this.$refs.dom)
       this.updateValue()
+      window.addEventListener("resize", this.handleResize)
     })
-  }
+  },
+  beforeDestroy() {
+    if (this.pieInstance) {
+      this.pieInstance.dispose()
+    }
+    window.removeEventListener("resize", this.handleResize)
+  },
 }
 </script>
 <style lang="scss">

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

@@ -48,6 +48,7 @@ export default {
   },
   data () {
     return {
+      onlinePayDayBarInstance: null,
       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: '线上缴费日热度',
@@ -58,12 +59,19 @@ export default {
   mounted () {
     this.initChart()
     this.getOnlinePayDay()
+    window.addEventListener("resize", this.handleResize)
+  },
+  beforeDestroy() {
+    if (this.onlinePayDayBarInstance) {
+      this.onlinePayDayBarInstance.dispose()
+    }
+    window.removeEventListener("resize", this.handleResize)
   },
   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.xAxisData = (res.data.data.list || []).map(item => item.statData)
+        this.seriesData = (res.data.data.list || []).map(item => item.payAmount)
         this.initChart()
       })
     },
@@ -79,7 +87,7 @@ export default {
       return max
     },
     initChart () {
-      const myChart = echarts.init(this.$refs.onlinePayDayBar)
+      this.onlinePayDayBarInstance = echarts.init(this.$refs.onlinePayDayBar)
       const xAxisData = this.xAxisData
       const seriesData = this.seriesData
       let all = seriesData.reduce((total, num) => {
@@ -304,8 +312,14 @@ export default {
             data: seriesData
           }]
       }
-      myChart.setOption(option)
-    }
+      this.onlinePayDayBarInstance.setOption(option)
+      this.onlinePayDayBarInstance.resize()
+    },
+    handleResize() {
+      if (this.onlinePayDayBarInstance) {
+        this.onlinePayDayBarInstance.resize()
+      }
+    },
   }
 }
 </script>

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

@@ -47,6 +47,7 @@ export default {
   },
   data () {
     return {
+      onlinePayWeekBarInstance: null,
       xAxisData: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
       seriesData: [0, 0, 0, 0, 0, 0, 0],
       title: '线上缴费周热度',
@@ -57,12 +58,19 @@ export default {
   mounted () {
     this.initChart()
     this.getOnlinePayWeek()
+    window.addEventListener("resize", this.handleResize)
+  },
+  beforeDestroy() {
+    if (this.onlinePayWeekBarInstance) {
+      this.onlinePayWeekBarInstance.dispose()
+    }
+    window.removeEventListener("resize", this.handleResize)
   },
   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.xAxisData = (res.data.data.list || []).map(item => item.statData)
+        this.seriesData = (res.data.data.list || []).map(item => item.payAmount)
         this.initChart()
       })
     },
@@ -78,7 +86,7 @@ export default {
       return max
     },
     initChart () {
-      const myChart = echarts.init(this.$refs.onlinePayWeekBar)
+      this.onlinePayWeekBarInstance = echarts.init(this.$refs.onlinePayWeekBar)
       const xAxisData = this.xAxisData
       const seriesData = this.seriesData
       let all = seriesData.reduce((total, num) => {
@@ -303,8 +311,14 @@ export default {
             data: seriesData
           }]
       }
-      myChart.setOption(option)
-    }
+      this.onlinePayWeekBarInstance.setOption(option)
+      this.onlinePayWeekBarInstance.resize()
+    },
+    handleResize() {
+      if (this.onlinePayWeekBarInstance) {
+        this.onlinePayWeekBarInstance.resize()
+      }
+    },
   }
 }
 </script>

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

@@ -37,6 +37,7 @@ export default {
   },
   data () {
     return {
+      onlinePayInstance: null,
       xAxisData: ['十二月', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月'],
       seriesData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
       total: 0,
@@ -45,17 +46,27 @@ export default {
       icon: icon
     }
   },
+  
   mounted () {
     this.initChart()
     this.getOnlinePayMonth()
+    window.addEventListener("resize", this.handleResize)
+  },
+  beforeDestroy() {
+    if (this.onlinePayInstance) {
+      this.onlinePayInstance.dispose()
+    }
+    window.removeEventListener("resize", this.handleResize)
   },
   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()
+        if(res && res.data && res.data.data && res.data.data.list.length) {
+          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()
+        }
       })
     },
     /**
@@ -70,9 +81,8 @@ export default {
       return max
     },
     initChart () {
-      const myChart = echarts.init(this.$refs.onlinePayBar)
-      // const xAxisData = ['十二月', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月']
-      // const seriesData = [5, 20, 36, 10, 10, 20, 40, 25, 30, 45, 50, 60]
+      this.onlinePayInstance = echarts.init(this.$refs.onlinePayBar)
+     
       const xAxisData = this.xAxisData
       const seriesData = this.seriesData
       // let max = 0
@@ -210,8 +220,14 @@ export default {
           data: seriesData
         }]
       }
-      myChart.setOption(option)
-    }
+      this.onlinePayInstance.setOption(option)
+      this.onlinePayInstance.resize()
+    },
+    handleResize() {
+      if (this.onlinePayInstance) {
+        this.onlinePayInstance.resize()
+      }
+    },
   }
 }
 </script>

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

@@ -44,6 +44,7 @@ export default {
   },
   data () {
     return {
+      hfwInstance: null,
       rate: 0,
       title: '用户信息',
       icon: icon,
@@ -88,7 +89,15 @@ export default {
     }
   },
   mounted () {
+    this.initChart()
     this.getUsersStatistics()
+    window.addEventListener("resize", this.handleResize)
+  },
+  beforeDestroy() {
+    if (this.hfwInstance) {
+      this.hfwInstance.dispose()
+    }
+    window.removeEventListener("resize", this.handleResize)
   },
   methods: {
     getUsersStatistics () {
@@ -107,7 +116,7 @@ export default {
       })
     },
     initChart () {
-      const myChart = echarts.init(this.$refs.dom)
+      this.hfwInstance = echarts.init(this.$refs.dom)
       const option = {
         title: {
           show: true,
@@ -229,9 +238,14 @@ export default {
         }
         ]
       }
-      myChart.setOption(option)
-      myChart.resize()
-    }
+      this.hfwInstance.setOption(option)
+      this.hfwInstance.resize()
+    },
+    handleResize() {
+      if (this.hfwInstance) {
+        this.hfwInstance.resize()
+      }
+    },
   }
 }
 </script>

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

@@ -5,7 +5,7 @@
           <div class="icon">
             <img :src="item.icon" alt="" class="img">
           </div>
-          <div class="title">{{ item.title }}</div>
+          <div class="text">{{ item.title }}</div>
           <div class="value">{{ item.value | formatNumber }}</div>
         </div>
       </div>
@@ -110,7 +110,7 @@ export default {
     height: halfW(34);
     object-fit: cover;
   }
-  .title{
+  .text{
     font-size: halfW(16);
     color: #9BDAFF;
     margin: halfH(16) 0;