大屏

2022-07-22 11:53:54 +08:00
parent d9e1f83d05
commit aae17797b7
2 changed files with 229 additions and 85 deletions
--- a/project/dv/apps/AppPdDv.vue
+++ b/project/dv/apps/AppPdDv.vue
@@ -14,21 +14,20 @@
              <div class="item-top__item">
                <h2>居民好友</h2>
                <div class="bottom">
-                  <span>9</span>
-                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+                  <span>{{ residentInfo.customerTotal || 0 }}</span>
                </div>
              </div>
              <div class="item-top__item">
                <h2>昨日新增</h2>
                <div class="bottom">
-                  <span>9</span>
-                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+                  <span>{{ residentInfo.addCustomerCount || 0 }}</span>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/arrow-rise.png" />
                </div>
              </div>
              <div class="item-top__item">
                <h2>昨日流失</h2>
                <div class="bottom">
-                  <span>9</span>
+                  <span>{{ residentInfo.removeCustomerCount || 0 }}</span>
                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
                </div>
              </div>
@@ -101,11 +100,11 @@
            <div class="item-top dl">
              <div class="item-top__item" @click="dlIndex = 0" :class="[dlIndex === 0 ? 'active' : '']">
                <h2>单聊会话</h2>
-                <p>279</p>
+                <p>{{ userChatNumber.chatCnt }}</p>
              </div>
              <div class="item-top__item" @click="dlIndex = 1" :class="[dlIndex === 1 ? 'active' : '']">
-                <h2>单聊会话</h2>
-                <p>279</p>
+                <h2>单聊消息</h2>
+                <p>{{ userChatNumber.messageCnt }}</p>
              </div>
            </div>
            <div class="chart3" v-show="dlIndex === 0" style="width: 336px; height: 170px;"></div>
@@ -115,16 +114,16 @@
            <div class="title">群聊统计</div>
            <div class="item-top ql">
              <div class="item-top__item" @click="qlIndex = 0" :class="[qlIndex === 0 ? 'active' : '']">
-                <h2>单聊会话</h2>
-                <p>279</p>
+                <h2>活跃群聊</h2>
+                <p>{{ groupChatNumber.chatHasMsg }}</p>
              </div>
              <div class="item-top__item" @click="qlIndex = 1" :class="[qlIndex === 1 ? 'active' : '']">
-                <h2>单聊会话</h2>
-                <p>279</p>
+                <h2>活跃群成员</h2>
+                <p>{{ groupChatNumber.memberHasMsg }}</p>
              </div>
              <div class="item-top__item" @click="qlIndex = 2" :class="[qlIndex === 2 ? 'active' : '']">
-                <h2>单聊会话</h2>
-                <p>279</p>
+                <h2>群聊消息</h2>
+                <p>{{ groupChatNumber.msgTotal }}</p>
              </div>
            </div>
            <div class="chart5" v-show="qlIndex === 0" style="width: 336px; height: 170px;"></div>
@@ -136,7 +135,7 @@
    </div>
    <div class="middle">
      <div class="top">
-        <AiGrid :instance="instance"></AiGrid>
+        <AiGrid :instance="instance" @nodeClick="onNodeClick"></AiGrid>
      </div>
      <div class="bottom">
        <div class="bottom-title">
@@ -157,23 +156,23 @@
    <div class="right">
      <div class="appPdDv-title">网格信息</div>
      <div class="right-item top-wrapper">
-        <div class="title">"星"网格</div>
+        <div class="title" :title="girdInfo['网格名称']">{{ girdInfo['网格名称'] }}</div>
        <div class="item-wrapper">
          <div class="item-top__item">
-            <h2>925</h2>
+            <h2>{{ girdInfo['微网格长'] || 0 }}</h2>
            <p>微网格长</p>
          </div>
          <div class="item-top__item">
-            <h2>925</h2>
-            <p>微网格长</p>
+            <h2>{{ girdInfo['居民群'] || 0 }}</h2>
+            <p>居民群</p>
          </div>
          <div class="item-top__item">
-            <h2>925</h2>
-            <p>微网格长</p>
+            <h2>{{ girdInfo['群成员'] || 0 }}</h2>
+            <p>群成员</p>
          </div>
          <div class="item-top__item">
-            <h2>925</h2>
-            <p>微网格长</p>
+            <h2>{{ girdInfo['居民好友'] || 0 }}</h2>
+            <p>居民好友</p>
          </div>
        </div>
      </div>
@@ -186,10 +185,10 @@
            <span style="width: 60px; text-align: right;">群人数</span>
          </div>
          <div class="item-table__body">
-            <div class="item-table__item" v-for="(item, index) in 6" :key="index">
-              <span style="width: 110px">XX网格居民群</span>
-              <span style="flex: 1; text-align: center;">王磊</span>
-              <span style="width: 60px; text-align: right;">150</span>
+            <div class="item-table__item" v-for="(item, index) in gridList" :key="index">
+              <span style="width: 110px" :title="item.name">{{ item.name }}</span>
+              <span style="flex: 1; text-align: center;">{{ item.ownerName }}</span>
+              <span style="width: 60px; text-align: right;">{{ item.personCount }}</span>
            </div>
          </div>
        </div>
@@ -244,35 +243,25 @@
        leftIndex: 0,
        rightIndex: 0,
        dlIndex: 0,
-        qlIndex: 0
+        qlIndex: 0,
+        currGirdName: '',
+        girdInfo: {},
+        gridList: [],
+        userChatNumber: {},
+        residentInfo: {},
+        groupChatNumber: {}
      }
    },

+    created () {
+      this.getInfo()
+      this.getGridInfo()
+    },
+
    mounted () {
      this.$nextTick(() => {
        setTimeout(() => {
-          this.initLineChart('.chart1')
-          this.initLineChart('.chart2')
-          this.initBarChart('.chart4', [
-            {offset: 0, color: 'rgba(66, 255, 254, 1)'},
-            {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}
-          ])
-          this.initBarChart('.chart3', [
-            {offset: 0, color: 'rgba(66, 187, 255, 1)'},
-            {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
-          ])
-          this.initBarChart('.chart5', [
-            {offset: 0, color: 'rgba(66, 255, 254, 1)'},
-            {offset: 1, color: 'rgba(66, 255, 254, 0.2)'}
-          ])
-          this.initBarChart('.chart6', [
-            {offset: 0, color: 'rgba(255, 190, 66, 1)'},
-            {offset: 1, color: 'rgba(255, 190, 66, 0.2)'}
-          ])
-          this.initBarChart('.chart7', [
-            {offset: 0, color: 'rgba(66, 187, 255, 1)'},
-            {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
-          ])
+          // this.initLineChart('.chart2')
        }, 500)

        if (document.querySelector('.AiDvWrapper .viewPanel')) {
@@ -282,15 +271,103 @@
    },

    methods: {
-      initLineChart (el) {
+      onNodeClick (e) {
+        this.getGridInfo(e.id)
+      },
+
+      getInfo () {
+        this.instance.post(`/app/wxgroupstatistic/getCustommerNumber`).then(res => {
+          if (res.code === 0) {
+            this.residentInfo = res.data['居民统计']
+            this.initLineChart('.chart1', {
+              x: res.data['居民好友数'].map(v => v.month),
+              value: res.data['居民好友数'].map(v => v.totalNumber),
+              name: '居民好友'
+            })
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getGroupNumber`).then(res => {
+          if (res.code === 0) {
+
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getTagNumber`).then(res => {
+          if (res.code === 0) {
+
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getUserChatNumber`).then(res => {
+          if (res.code === 0) {
+            this.userChatNumber = res.data['单聊总和']
+            this.initBarChart('.chart4', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.messageCnt),
+              name: '单聊消息'
+            }, [
+              {offset: 0, color: 'rgba(66, 255, 254, 1)'},
+              {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}
+            ])
+            this.initBarChart('.chart3', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.chatCnt),
+              name: '单聊会话'
+            }, [
+              {offset: 0, color: 'rgba(66, 187, 255, 1)'},
+              {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
+            ])
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getgroupChatNumber`).then(res => {
+          this.groupChatNumber = res.data['群聊总和']
+          if (res.code === 0) {
+            this.initBarChart('.chart5', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.chatHasMsg),
+              name: '活跃群聊'
+            }, [
+              {offset: 0, color: 'rgba(66, 255, 254, 1)'},
+              {offset: 1, color: 'rgba(66, 255, 254, 0.2)'}
+            ])
+            this.initBarChart('.chart6', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.memberHasMsg),
+              name: '活跃群成员'
+            }, [
+              {offset: 0, color: 'rgba(255, 190, 66, 1)'},
+              {offset: 1, color: 'rgba(255, 190, 66, 0.2)'}
+            ])
+            this.initBarChart('.chart7', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.msgTotal),
+              name: '群聊消息'
+            }, [
+              {offset: 0, color: 'rgba(66, 187, 255, 1)'},
+              {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
+            ])
+          }
+        })
+      },
+
+      getGridInfo (id) {
+        this.instance.post(`/app/appgirdinfo/piduGirdCount?girdId=${id || ''}`).then(res => {
+          if (res.code === 0) {
+            this.girdInfo = res.data
+          }
+        })
+        this.instance.post(`/app/wxcp/wxgroup/listBtGridId?size=1000&girdId=${id || ''}`).then(res => {
+          if (res.code === 0) {
+            this.gridList = res.data.records
+          }
+        })
+      },
+
+      initLineChart (el, data) {
        var chartDom = document.querySelector(el)
        var myChart = echarts.init(chartDom)
-        var option
-
-        option = {
+        var option = {
          xAxis: {
            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            data: data.x,
            axisTick: {
              show: false
            },
@@ -346,13 +423,14 @@
          },
          series: [
            {
-              data: [820, 932, 901, 934, 1290, 1330, 1320],
+              data: data.value,
              type: 'line',
              label: {
                show: false,
                position: 'top',
                color: '#fff'
              },
+              name: data.name,
              areaStyle: {},
              barWidth: 16,
              barCategoryGap: 40,
@@ -364,7 +442,7 @@
        option && myChart.setOption(option)
      },

-      initBarChart (el, color) {
+      initBarChart (el, data, color) {
        var chartDom = document.querySelector(el)
        var myChart = echarts.init(chartDom)
        var option
@@ -372,7 +450,7 @@
        option = {
          xAxis: {
            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            data: data.x,
            axisTick: {
              show: false
            },
@@ -425,7 +503,8 @@
          },
          series: [
            {
-              data: [820, 932, 901, 934, 1290, 1330, 1320],
+              data: data.value,
+              name: data.name,
              type: 'bar',
              label: {
                show: false,
@@ -453,6 +532,20 @@
    background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png);
    background-size: 100% 100%;

+    ::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    ::-webkit-scrollbar-track {
+      border-radius: 5px;
+      background: rgba(93, 163, 255, 0.1);
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: rgba(173, 208, 255, 0.5);
+    }
+
    * {
      box-sizing: border-box;
    }
@@ -630,6 +723,9 @@
      padding: 4px 0 0 34px;
      color: #fff;
      font-size: 16px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
      background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/title.png);
      background-size: 100% 100%;
    }
@@ -955,6 +1051,9 @@
          }

          .item-table__body {
+            height: 280px;
+            overflow-y: overlay;
+
            .item-table__item {
              display: flex;
              align-items: center;
@@ -968,6 +1067,12 @@
              &:nth-of-type(2n - 1) {
                background: transparent;
              }
+
+              span {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
            }
          }
        }
--- a/project/dv/apps/components/AiGrid.vue
+++ b/project/dv/apps/components/AiGrid.vue
@@ -9,9 +9,11 @@
        :props="props"
        node-key="id"
        show-collapsable
-        default-expand-all
        show-node-num
+        current-lable-class-name="aigrid-active"
+        :default-expanded-keys="defaultExpandedKeys"
        ref="VueOkrTree"
+        @node-click="onNodeClick"
        :data="treeData">
      </VueOkrTree>
    </div>
@@ -36,9 +38,10 @@
        scale: 1,
        x: '50%',
        y: '50%',
+        defaultExpandedKeys: [],
        treeData: [],
        props: {
-          label: 'name',
+          label: 'girdName',
          children: 'children'
        }
      }
@@ -101,19 +104,34 @@
        this.isMove = false
      },

+      onNodeClick (e) {
+        this.$emit('nodeClick', e)
+      },
+
      getPartyOrg () {
-        this.instance.post('/app/partyOrganization/queryPartyOrganizationServiceList').then(res => {
+        this.instance.post('/app/appgirdinfo/listAll3').then(res => {
          if (res.code === 0) {
-            this.treeData = res.data.filter(e => !e.parentId)
-            this.treeData.map(p => this.addChild(p, res.data.map(v => {
+            this.treeData = res.data.filter(e => !e.parentGirdId)
+            const parentGirdId = this.treeData[0].id
+            const arr = res.data.filter(v => {
+              return v.parentGirdId === parentGirdId || !v.parentGirdId
+            })
+            this.treeData.map(p => this.addChild(p, arr.map(v => {
+              if (v.id === parentGirdId) {
+                this.defaultExpandedKeys.push(v.id)
+              }
+
              return {
                ...v,
-                name: v.name.substr(0, 12)
+                girdName: v.girdName.substr(0, 8)
              }
-            }), {parent: 'parentId'}))
+            }), {
+              parent: 'parentGirdId'
+            }))

            this.$nextTick(() => {
              this.autoScale()
+              this.$refs.VueOkrTree.setCurrentKey(parentGirdId)
            })
          }
        })
@@ -150,6 +168,10 @@
      height: 300%;
    }

+    .aigrid-active {
+      background: linear-gradient(180deg, #42C6CE 0%, #307598 100%);
+    }
+
    ::v-deep .org-chart-container {
      color: #FFFFFF;
      font-size: 16px;
@@ -187,19 +209,51 @@

        .org-chart-node-label {
          width: 40px;
-          height: 330px;
+          height: 230px;
          margin-right: 15px;
          padding: 0 0;
-          border: 1px solid;
-          background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
-          border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;

          .org-chart-node-label-inner {
+            width: 40px!important;
+            height: 230px!important;
+            border: 1px solid;
+            background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
+            border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
            line-height: 1.3;
            padding: 10px 4px;
            text-align: center;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.8);
+
+            &.aigrid-active {
+              background: linear-gradient(180deg, #42C6CE 0%, #307598 100%)!important;
+            }
+          }
+
+          &.is-root-label {
+            width: auto!important;
+            min-width: 240px;
+            height: 40px!important;
+            line-height: 40px!important;
+            min-height: 40px!important;
+            text-align: center;
+
+            .org-chart-node-label-inner {
+              padding: 0 30px!important;
+              color: #fff!important;
+              width: auto!important;
+              min-width: 240px;
+              height: 40px!important;
+              line-height: 40px!important;
+              min-height: 40px!important;
+              text-align: center;
+              background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
+              border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
+
+              &.aigrid-active {
+                background: linear-gradient(180deg, #42C6CE 0%, #307598 100%)!important;
+              }
+            }
          }
        }

@@ -210,21 +264,6 @@
        }
      }

-      .is-root-label {
-        width: auto!important;
-        height: 40px!important;
-        line-height: 40px!important;
-        min-height: 40px!important;
-        text-align: center;
-        background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
-        border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
-
-        .org-chart-node-label-inner {
-          padding: 0 30px!important;
-          color: #fff!important;
-        }
-      }
-
      .org-chart-node-children:before, .org-chart-node:after, .org-chart-node:last-child:before,
      .org-chart-node.is-leaf:before {
        border-radius: 0;