Merge remote-tracking branch 'origin/dev' into dev

src/apps/AppResidentFile/AppResidentFile.vue

@@ -14,17 +14,17 @@
             </div>
 
             <div class="items">
-              <span class="items2">{{ counts }}</span>
+              <span class="items2">{{ todayList1.total }}</span>
               <span>群成员总数</span>
             </div>
 
             <div class="items">
-              <span class="items3">{{ todayList.increase }}</span>
+              <span class="items3">{{ todayList1.increase }}</span>
               <span>今日入群</span>
             </div>
 
             <div class="items">
-              <span class="items4">{{ todayList.decrease }}</span>
+              <span class="items4">{{ todayList1.decrease }}</span>
               <span>今日退群</span>
             </div>
           </div>
@@ -39,17 +39,17 @@
         <div class="topcard">
           <div class="cards">
             <div class="items">
-              <span class="items1">{{ nums }}</span>
+              <span class="items1">{{ todayList2.total }}</span>
               <span>居民总数</span>
             </div>
 
             <div class="items">
-              <span class="items3">0</span>
+              <span class="items3">{{ todayList2.increase }}</span>
               <span>今日新增</span>
             </div>
 
             <div class="items">
-              <span class="items4">0</span>
+              <span class="items4">{{ todayList2.decrease }}</span>
               <span>今日流失</span>
             </div>
           </div>
@@ -162,10 +162,10 @@ export default {
       currentTabs: 0,
       tabList: [
         {
-          name: '居民群管理',
+          name: '居民群统计',
         },
         {
-          name: '居民管理',
+          name: '居民统计',
         },
       ],
       Echarts1: null,
@@ -188,9 +188,10 @@ export default {
       list: [],
       weekList: [],
       groupSum: '',
-      todayList: [],
+      todayList1: [],
-      nums: '',
+      todayList2: [],
-      counts: '',
+      counts1: '',
+      counts2: '',
     }
   },
   computed: {
@@ -261,36 +262,139 @@ export default {
     getEchart1() {
       this.$http.post(`/app/wxcp/wxgroup/groupStatistic`).then((res) => {
         if (res.code === 0) {
-          this.initEcharts1(res.data.list)
           this.weekList = res.data.list
+          this.initEcharts1(this.weekList)
           this.groupSum = res.data.groupSum
-          this.todayList = res.data.today
+          this.todayList1 = res.data.today
-          this.counts = Object.values(this.weekList)
-            .filter((item) => item.total)
-            .reduce((v, item) => (v += item.total * 1), 0)
         }
       })
     },
 
     // 居民统计
     getEchart2() {
-      this.$http.post(`/app/appresident/queryCustInfoByAreaId?areaId=${this.user.areaId}`).then((res) => {
+      this.$http.post(`/app/wxcp/wxcustomerlog/customerStatistic?areaId=${this.user.areaId}`).then((res) => {
         if (res.code === 0) {
-          this.initEcharts2(res.data['年龄层次'])
+          this.initEcharts2(res.data.list)
-          this.$nextTick(() => {
+          this.todayList2 = res.data.today
-            this.nums = res.data['总人数']
-          })
         }
       })
     },
 
     initEcharts1(data) {
       var option = {
+        legend: {
+          data: ['群成员总数', '入群人数', '退群人数'],
+          y: 'bottom',
+        },
+        color: ['#4A86FD', '#32C5FF', '#FFAA44'],
+        tooltip: {
+          trigger: 'axis',
+        },
         grid: {
           top: '9%',
           left: '6%',
           right: '8%',
-          bottom: '6%',
+          bottom: '9%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: Object.keys(data).map((e) => e.substring(e.length - 5, e.length)),
+          axisLine: {
+            show: true,
+            lineStyle: { color: '#666' },
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#D8DDE6',
+            },
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            lineStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#4A86FD',
+                },
+              },
+            },
+            color: '#4A86FD',
+            name: '群成员总数',
+            type: 'line',
+            stack: 'Total',
+            data: Object.values(data).map((e) => e.total),
+          },
+          {
+            lineStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#32C5FF',
+                },
+              },
+            },
+            color: '#32C5FF',
+            name: '入群人数',
+            type: 'line',
+            stack: 'Total',
+            data: Object.values(data).map((e) => e.increase),
+          },
+          {
+            lineStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#FFAA44',
+                },
+              },
+            },
+            color: '#FFAA44',
+            name: '退群人数',
+            type: 'line',
+            stack: 'Total',
+            data: Object.values(data).map((e) => e.decrease),
+          },
+        ],
+      }
+
+      option && this.Echarts1.setOption(option)
+    },
+
+    initEcharts2(data) {
+      var options = {
+        legend: {
+          data: ['居民总数', '新增居民数', '流失居民数'],
+          y: 'bottom',
+        },
+        color: ['#4A86FD', '#32C5FF', '#FFAA44'],
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: '9%',
+          left: '6%',
+          right: '8%',
+          bottom: '9%',
           containLabel: true,
         },
         xAxis: {
@@ -304,15 +408,13 @@ export default {
             interval: 0,
           },
           axisTick: {
-            interval: 'auto',
+            show: false,
           },
         },
         yAxis: {
           type: 'value',
           axisLine: {
-            lineStyle: {
+            show: false,
-              color: '#666',
-            },
           },
           splitLine: {
             show: true,
@@ -324,67 +426,52 @@ export default {
             show: true,
             interval: 0,
           },
-        },
-        series: [
-          {
-            color: '#0072FF',
-            barWidth: 30,
-            data: Object.values(data).map((e) => e.total),
-            type: 'line',
-          },
-        ],
-      }
-
-      option && this.Echarts1.setOption(option)
-    },
-
-    initEcharts2(data) {
-      var options = {
-        grid: {
-          top: '9%',
-          left: '6%',
-          right: '8%',
-          bottom: '6%',
-          containLabel: true,
-        },
-        xAxis: {
-          type: 'category',
-          data: data.map((v) => v.v1),
-          axisLine: {
-            lineStyle: { color: '#157EFF' },
-          },
-          axisLabel: {
-            show: true,
-            interval: 0,
-          },
           axisTick: {
-            interval: 'auto',
+            show: false,
-          },
-        },
-        yAxis: {
-          type: 'value',
-          axisLine: {
-            lineStyle: {
-              color: '#666',
-            },
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: '#D8DDE6',
-            },
-          },
-          axisLabel: {
-            show: true,
-            interval: 0,
           },
         },
         series: [
           {
-            color: '#0072FF',
+            lineStyle: {
-            barWidth: 30,
+              normal: {
-            data: data.map((v) => v.v2),
+                lineStyle: {
+                  color: '#4A86FD',
+                },
+              },
+            },
+            color: '#4A86FD',
+            name: '居民总数',
             type: 'line',
+            stack: 'Total',
+            data: Object.values(data).map((e) => e.total),
+          },
+          {
+            lineStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#32C5FF',
+                },
+              },
+            },
+            color: '#32C5FF',
+            name: '新增居民数',
+            type: 'line',
+            stack: 'Total',
+            data: Object.values(data).map((e) => e.increase),
+          },
+          {
+            lineStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#FFAA44',
+                },
+              },
+            },
+            color: '#FFAA44',
+            name: '流失居民数',
+            type: 'line',
+            stack: 'Total',
+            data: Object.values(data).map((e) => e.decrease),
           },
         ],
       }
@@ -524,6 +611,7 @@ uni-page-body {
 
       .echartes {
         margin-top: 64px;
+        padding-bottom: 20px;
         height: 616px;
         background: #fff;
         box-sizing: border-box;

src/apps/AppVideoSurveillance/AppVideoSurveillance.vue

@@ -15,11 +15,27 @@
           <u-icon name="arrow-down" color="#666" size="24" />
         </AiAreaPicker>
       </div>
-      <div class="num-content">
-        <img src="./img/on-icon.png" alt="">在线 {{count.online || 0}}
-        <img src="./img/off-icon.png" alt="" class="mar-l40">离线 {{count.sum - count.online || 0}}
-      </div>
     </AiTopFixed>
+    <div class="num-content">
+      <!-- <img src="./img/on-icon.png" alt="">在线 {{count.online || 0}}
+      <img src="./img/off-icon.png" alt="" class="mar-l40">离线 {{count.sum - count.online || 0}} -->
+      <div class="item">
+        <div id="echarts" style="width:100%;height:100%;"></div>
+        <img src="./img/monitor-icon.png" alt="" class="monitor-icon">
+      </div>
+      <div class="item">
+        <h3>{{count.online || 0}}</h3>
+        <p>在线</p>
+      </div>
+      <div class="item">
+        <h3>{{count.sum - count.online || 0}}</h3>
+        <p>离线</p>
+      </div>
+      <div class="item">
+        <h3>{{onlineRate*100 || 0}}%</h3>
+        <p>在线率</p>
+      </div>
+    </div>
     <!-- <div class="list">
       <div class="item" v-for="row in monitors" :key="row.nodeId" :class="{online:!row.online}">
         <template v-if="!!row.deviceId">
@@ -46,6 +62,7 @@
   </section>
 </template>
 <script>
+import echarts from 'echarts'
 import { mapState } from 'vuex'
 export default {
   name: "AppVideoSurveillance",
@@ -60,7 +77,10 @@ export default {
       areaId: '',
       areaName: '',
       list: [],
-      count: {}
+      count: {},
+      Echart: null,
+      onlineRate: '',
+      offlineRate: ''
     }
   },
   computed: { ...mapState(['user']) },
@@ -93,6 +113,9 @@ export default {
         if (res.code == 0) {
           this.list = res.data.list
           this.count = res.data.count
+          this.onlineRate = (this.count.online / this.count.sum).toFixed(2)
+          this.offlineRate = (1-this.onlineRate).toFixed(2)
+          this.initEchart()
         }
       })
     },
@@ -105,12 +128,59 @@ export default {
       if(row.deviceStatus != 1) return
       uni.navigateTo({url: `./monitorDetail?id=${row.id}`})
     },
+    initEchart() {
+      var option = {
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '60%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: this.onlineRate},
+              { value: this.offlineRate},
+            ],
+            itemStyle: {
+              emphasis: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+              },
+              normal:{
+                color:function(params) {
+                  //自定义颜色
+                  var colorList = ['#3192F4','#ccc',];
+                  return colorList[params.dataIndex]
+              }
+              }
+            }
+          }
+        ]
+      };
+
+      option && this.Echart.setOption(option)
+    },
   },
   created() {
+    
     this.areaId = this.user.areaId
     this.areaName = this.user.areaName
     this.getList()
     // this.getMonitors()
+  },
+  mounted() {
+    this.Echart = echarts.init(document.getElementById('echarts'))     
   }
 }
 </script>
@@ -188,7 +258,7 @@ export default {
 
   .area-content{
     display: inline-block;
-    width: 45%;
+    width: 100%;
     line-height: 64px;
     img{
       width: 42px;
@@ -200,20 +270,39 @@ export default {
     }
   }
   .num-content{
-    display: inline-block;
+    width: calc(100% - 40px);
-    width: 55%;
+    height: 164px;
-    font-size: 34px;
+    background: #EEE;
-    font-family: PingFangSC-Regular, PingFang SC;
+    border-radius: 16px;
-    color: #333;
+    margin: 32px 0 0 20px;
-    line-height: 48px;
+    display: flex;
-    text-align: right;
+    .item{
-    img{
+      flex: 1;
-      width: 48px;
+      text-align: center;
-      margin-right: 16px;
+      position: relative;
-      vertical-align: bottom;
+      .monitor-icon{
-    }
+        width: 48px;
-    .mar-l40{
+        height: 48px;
-      margin-left: 20px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-left: -24px;
+        margin-top: -24px;
+      }
+      h3{
+        font-size: 44px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #333;
+        line-height: 60px;
+        margin-top: 32px;
+      }
+      p{
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #666;
+        line-height: 40px;
+      }
     }
   }
 

src/apps/AppWalkask/detail.vue

@@ -28,7 +28,7 @@
       <div class="hint-con" v-if="data.description">{{ data.description }}</div>
 
       <div class="imgs">
-        <img :src="item.url" alt="" v-for="(item, index) in data.images" :key="index"/>
+        <img :src="item.url" alt="" v-for="(item, index) in data.images" :key="index" />
       </div>
     </div>
 
@@ -54,8 +54,7 @@ export default {
       this.getDetail()
     })
   },
-  mounted() {
+  mounted() {},
-  },
   methods: {
     getDetail() {
       this.$http.post(`/app/appvisitvondolence/queryDetailById?id=${this.params.id}`).then((res) => {
@@ -74,6 +73,7 @@ export default {
 <style lang="scss" scoped>
 .detail {
   height: 100%;
+  background: #fff;
 
   .header-top {
     background: #3975c6;