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

2021-12-22 18:42:42 +08:00
parent f926bf41c0 7623b6e3f1
commit 1e0e951af1
4 changed files with 281 additions and 104 deletions
--- a/src/apps/AppResidentFile/AppResidentFile.vue
+++ b/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: [],
-      nums: '',
-      counts: '',
+      todayList1: [],
+      todayList2: [],
+      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.counts = Object.values(this.weekList)
-            .filter((item) => item.total)
-            .reduce((v, item) => (v += item.total * 1), 0)
+          this.todayList1 = res.data.today
        }
      })
    },

    // 居民统计
    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.$nextTick(() => {
-            this.nums = res.data['总人数']
-          })
+          this.initEcharts2(res.data.list)
+          this.todayList2 = res.data.today
        }
      })
    },

    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: {
-              color: '#666',
-            },
+            show: false,
          },
          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',
-          },
-        },
-        yAxis: {
-          type: 'value',
-          axisLine: {
-            lineStyle: {
-              color: '#666',
-            },
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: '#D8DDE6',
-            },
-          },
-          axisLabel: {
-            show: true,
-            interval: 0,
+            show: false,
          },
        },
        series: [
          {
-            color: '#0072FF',
-            barWidth: 30,
-            data: data.map((v) => v.v2),
+            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),
          },
        ],
      }
@@ -524,6 +611,7 @@ uni-page-body {

      .echartes {
        margin-top: 64px;
+        padding-bottom: 20px;
        height: 616px;
        background: #fff;
        box-sizing: border-box;
--- a/src/apps/AppVideoSurveillance/AppVideoSurveillance.vue
+++ b/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: 55%;
-    font-size: 34px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    color: #333;
-    line-height: 48px;
-    text-align: right;
-    img{
-      width: 48px;
-      margin-right: 16px;
-      vertical-align: bottom;
-    }
-    .mar-l40{
-      margin-left: 20px;
+    width: calc(100% - 40px);
+    height: 164px;
+    background: #EEE;
+    border-radius: 16px;
+    margin: 32px 0 0 20px;
+    display: flex;
+    .item{
+      flex: 1;
+      text-align: center;
+      position: relative;
+      .monitor-icon{
+        width: 48px;
+        height: 48px;
+        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;
+      }
    }
  }

--- a/src/apps/AppVideoSurveillance/img/monitor-icon.png
+++ b/src/apps/AppVideoSurveillance/img/monitor-icon.png
--- a/src/apps/AppWalkask/detail.vue
+++ b/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;