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

src/assets/css/screen.scss

@@ -25,8 +25,8 @@
     border-radius: halfW(5);
 }
 .map-con{
-    width: halfW(660);
-    height: halfH(795);
+    width: 100%;
+    height: halfH(838);
 }
 .screen{
     width: 100%;

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

@@ -13,6 +13,7 @@
               name: 'Scale',
               position: 'topright'
             },]"
+          @init="mapInit"
         >
         <!-- <div v-if="provinceList.length"> -->
 
@@ -64,9 +65,9 @@ export default {
     }
   },
   mounted () {
-    setTimeout(() => {
-      this.mapInit()
-    }, 500)
+    // setTimeout(() => {
+    //   this.mapInit()
+    // }, 500)
     // this.getProjectStatistics()
   },
   methods: {

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

@@ -0,0 +1,200 @@
+<template>
+    <div ref="onlinePayBar" class="online-pay-bar"></div>
+  </template>
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'bar',
+  mounted () {
+    this.initChart()
+  },
+  methods: {
+    /**
+     * 获取一个和max最接近的能被5整除的无零头整数
+     */
+    getMax (max) {
+      if (max <= 10) return 10
+
+      let pow = max.toString().length - 2
+      pow = Math.pow(10, pow)
+      max = Math.ceil(max / pow / 10) * 10 * pow
+      return max
+    },
+    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]
+      // let max = 0
+      // max = seriesData.reduce((max, num) => {
+      //   return Math.max(Number(max), Number(num))
+      // })
+      // max = this.getMax(max)
+      const option = {
+        tooltip: {},
+        legend: {
+          right: '0',
+          top: '0',
+          textStyle: {
+            color: '#fff',
+            padding: 6
+          }
+        },
+        grid: {
+          top: '50px',
+          bottom: '10px',
+          left: '0px',
+          right: '0px',
+          containLabel: true
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#fff',
+            margin: 15,
+            fontSize: 14,
+            formatter: function (val, idx) {
+              let value = xAxisData[idx]
+              return value
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#666',
+              opacity: 1,
+              cap: 'round'
+            }
+          },
+          boundaryGap: false,
+          axisTick: {
+            alignWithLabel: true,
+            length: 7,
+            lineStyle: {
+              width: 3,
+              color: '#fff',
+              opacity: 0.5
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#fff',
+              opacity: 0.3,
+              cap: 'round',
+              type: [5, 10]
+            }
+          },
+          max: function (value) { // x轴左侧留白
+            return value.max + 0.3
+          },
+          min: function (value) { // x轴左侧留白
+            return -0.3
+          },
+          data: xAxisData
+        },
+        yAxis: [
+          {
+            axisLabel: {
+              color: '#fff',
+              margin: 25,
+              fontSize: 14
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisTick: {
+              length: 14,
+              lineStyle: {
+                width: 2,
+                fontSize: 16
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff',
+                opacity: 0.3,
+                cap: 'round',
+                type: 'dashed',
+                dashOffset: 5
+              }
+            }
+          },
+          {
+            type: 'value',
+            position: 'right',
+            axisLabel: {
+              show: false
+            },
+            axisTick: {
+              show: true,
+              length: 14,
+              lineStyle: {
+                width: 2,
+                fontSize: 16
+              }
+            },
+            axisLine: {
+              show: false
+            }
+          }
+        ],
+        series: [{
+          name: '项目体量（户数）',
+          type: 'bar',
+          barWidth: '20%',
+          labelLine: {
+            show: false
+          },
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#8E4CB7' },
+              { offset: 1, color: '#3BB6FE' }
+            ])
+          },
+          data: seriesData
+        }]
+      }
+      myChart.setOption(option)
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '@/assets/css/function.scss';
+.online-pay-bar {
+  width: 100%;
+  height: halfH(280);
+}
+.online-pay {
+  .total{
+    height: halfH(24);
+    line-height: halfH(24);
+    padding: halfH(18) halfW(18);
+    color: #fff;
+    float: left;
+    font-size: halfW(14);
+    border-radius: 5px;
+    background-color: rgba(17, 28, 48, 1);
+    text-align: center;
+    border: 1px solid rgba(0, 123, 211, 0.2);
+  }
+  .img{
+    width: halfW(40);
+    height: halfH(40);
+    margin-right: halfW(27);
+    margin-top: halfH(-7);
+    padding: halfH(8) halfW(8);
+    box-sizing: border-box;
+    background: #12223C;
+    border-radius: 50%;
+    .icon{
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

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

@@ -66,11 +66,12 @@ export default {
         padding: [5, 0, 0, 20],
         rich: {
           title: {
-            fontSize: 17,
+            fontSize: 12,
             fontFamily: 'Microsoft YaHei',
             fontWeight: '400',
-            color: '#5774A2',
-            align: 'left'
+            color: '#82D1F6',
+            align: 'left',
+            lineHeight: 25
           },
           detail: {
             align: 'left',
@@ -78,7 +79,7 @@ export default {
             fontSize: 18,
             fontFamily: 'Microsoft YaHei',
             fontWeight: 'bold',
-            color: '#01DFFC'
+            color: '#fff'
           }
         }
       },
@@ -335,9 +336,17 @@ export default {
   },
   mounted () {
     this.$nextTick(() => {
-      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
+      this.dom = echarts.init(this.$refs.dom)
       this.updateValue()
     })
   }
 }
 </script>
+<style lang="scss">
+@import '@/assets/css/function.scss';
+
+.charts {
+  height: halfH(260);
+  top: halfH(-30);
+}
+</style>

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

@@ -1,6 +1,7 @@
 <template>
     <Card :title="title" :icon="icon" class="community-type">
-      <ThreePie :value="value" :legendIcons="legendIcons" :text="text" :subtext="subtext"></ThreePie>
+      <ThreePie :value="value" :legendIcons="legendIcons"></ThreePie>
+      <Bar :value="value"></Bar>
     </Card>
   </template>
 <script>
@@ -8,11 +9,17 @@
 import Card from '@/views/components/card'
 import icon from './images/icon-title.png'
 import ThreePie from './components/three-pie.vue'
+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'
+
 export default {
   name: 'CommunityType',
   components: {
     Card,
-    ThreePie
+    ThreePie,
+    Bar
   },
   data () {
     return {
@@ -21,25 +28,30 @@ export default {
       value: [
         {
           value: 100,
-          name: '项目类型1'
+          name: '住宅'
         },
         {
           value: 200,
-          name: '项目类型2'
+          name: '商业'
         },
         {
           value: 300,
-          name: '项目类型3'
+          name: '综合'
         }
       ],
       legendIcons: [
-        'images/icon-1.png',
-        'images/icon-2.png',
-        'images/icon-3.png'
+        iconZz,
+        iconSy,
+        iconZh
       ],
       text: '项目类型',
       subtext: '项目类型占比'
     }
+  },
+  methods: {
+    // getLegendIcons (url) {
+    //   return require(url)
+    // }
   }
 }
 </script>

src/views/components/resident/index.vue

@@ -165,7 +165,7 @@ export default {
               fontWeight: 'bold',
               color: '#00D2ED'
             },
-            data: [{ value: 75, name: '' }]
+            data: [{ value: 75, name: '绘服务' }]
           }
         ]
       }
@@ -204,7 +204,7 @@ export default {
     }
   }
   .operate{
-    height: halfH(210);
+    height: halfH(215);
     text-align: center;
     border-radius: 5px;
     background-color: rgba(17, 28, 48, 1);