bug

packages/bigscreen/dv/AppQxnDv.vue

@@ -287,8 +287,9 @@
             </ai-echart-v2>
           </div>
         </AiDvPanel>
-        <AiDvPanel class="bottom" style="" border="border6" title="群动态多维度排行">
+        <AiDvPanel class="bottom" style="width: 100%" border="border6" title="群动态多维度排行">
           <ai-table
+            width="100%"
             height="310px"
             :tableData="tableList"
             :col-configs="colConfigs"
@@ -328,7 +329,6 @@
     data ()  {
       return {
         isShowInfo: false,
-        value: '',
         lineData: [
           {
             "name": "阿斯达",
@@ -764,7 +764,7 @@
       init (gridId) {
         this.gridId = ''
         this.gridParentId = gridId || 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
-        this.instance.post(`/wxgridinfo/tree`, null, {
+        this.instance.post(`/api/wxgridinfo/tree`, null, {
           params: {
             gridParentId: gridId || '',
             corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
@@ -783,7 +783,7 @@
       },
 
       getInfo () {
-        this.instance.post(`/wxgridinfo/comprehensiveOverview`, null, {
+        this.instance.post(`/api/wxgridinfo/comprehensiveOverview`, null, {
           params: {
             corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
           }
@@ -793,7 +793,7 @@
           }
         })
 
-        this.instance.post(`/wxgridinfo/wxGroupOverview`, null, {
+        this.instance.post(`/api/wxgridinfo/wxGroupOverview`, null, {
           params: {
             corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
             gridId: this.gridId || this.gridParentId
@@ -804,7 +804,7 @@
           }
         })
 
-        this.instance.post(`/wxgridinfo/wjwqgk`, null, {
+        this.instance.post(`/api/wxgridinfo/wjwqgk`, null, {
           params: {
             corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
             gridId: this.gridId || this.gridParentId
@@ -815,7 +815,7 @@
           }
         })
 
-        this.instance.post(`/wxgridinfo/wjwqgkGMFB`, null, {
+        this.instance.post(`/api/wxgridinfo/wjwqgkGMFB`, null, {
           params: {
             corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
             gridId: this.gridId || this.gridParentId
@@ -826,7 +826,7 @@
           }
         })
 
-        this.instance.post(`/wxgridinfo/cyActivity`, null, {
+        this.instance.post(`/api/wxgridinfo/cyActivity`, null, {
           params: {
             corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
             gridId: this.gridId || this.gridParentId
@@ -1126,6 +1126,7 @@
     & > .right {
       display: flex;
       flex: 1;
+      overflow: hidden;
 
       .right-left {
         width: 500px;

packages/bigscreen/dv/AppQxnEventDv.vue

@@ -4,19 +4,27 @@
       <AiDvPanel style="width: 100%; height: auto;" border="border6" title="单位列表">
       </AiDvPanel>
       <div class="left-list">
-        <div class="left-item" v-for="(item, index) in 16" :key="index">
+        <div
+          class="left-item"
+          v-for="(item, index) in areaList"
+          :class="[gridParentId === item.gridId ? 'active' : '']"
+          :key="index"
+          @click="init(item.gridId)">
           <i>{{ index + 1 }}</i>
           <div class="left-item__top">
-            <h2>黔西南州公安局</h2>
+            <h2>{{ item.gridName }}</h2>
-            <el-select v-model="value" size="mini" placeholder="请选择派出所">
+            <el-select v-model="gridId" size="mini" v-if="gridParentId === item.gridId && index !== 0" placeholder="请选择派出所">
-              <el-option label="南京派出所" value="1"></el-option>
+              <el-option
-              <el-option label="北京派出所" value="2"></el-option>
+                :label="item.gridName"
-              <el-option label="长安派出所" value="3"></el-option>
+                :value="item.gridId"
+                v-for="(item, index) in policeStationList"
+                :key="index">
+              </el-option>
             </el-select>
           </div>
           <div class="left-item__bottom">
-            <span>居民数量：17246</span>
+            <span>居民数量：{{ item.customerCount + item.groupMemberCount }}</span>
-            <span>成员：2057</span>
+            <span>成员：{{ item.allGridMemberCount }}</span>
           </div>
         </div>
       </div>
@@ -25,10 +33,31 @@
       <div class="right-left">
         <AiDvPanel style="width: 100%" border="border6" title="警格事件概況">
           <div class="right-left__total AppQxnDv-total">
-            <div class="item" v-for="(item, index) in 4" :key="index">
+            <div class="item">
-              <h2>全部人员数</h2>
+              <h2>全部上报事件</h2>
               <div class="item-bottom">
-                <span>726,079</span>
+                <span>{{ wxGridReportOverviewInfo['全部上报事件数量'] }}</span>
+                <i>人</i>
+              </div>
+            </div>
+            <div class="item">
+              <h2>已办结事件</h2>
+              <div class="item-bottom">
+                <span>{{ wxGridReportOverviewInfo['已办结数量'] }}</span>
+                <i>人</i>
+              </div>
+            </div>
+            <div class="item">
+              <h2>办理中事件</h2>
+              <div class="item-bottom">
+                <span>{{ wxGridReportOverviewInfo['办理中数量'] }}</span>
+                <i>人</i>
+              </div>
+            </div>
+            <div class="item">
+              <h2>待处理事件</h2>
+              <div class="item-bottom">
+                <span>{{ wxGridReportOverviewInfo['待受理数量'] }}</span>
                 <i>人</i>
               </div>
             </div>
@@ -39,7 +68,7 @@
                 <h2>上报来源分布</h2>
               </div>
               <ai-echart-v2
-                style="height: 220px; width: 100%; margin-top: 10px;"
+                style="height: 220px; width: 245px; margin-top: 10px;"
                 :ref="'chart1'"
                 :data="chartData1"
                 :ops="chartConfig1">
@@ -50,7 +79,7 @@
                 <h2>事件办理情況</h2>
               </div>
               <ai-echart-v2
-                style="height: 220px; width: 100%; margin-top: 10px;"
+                style="height: 220px; width: 265px; margin-top: 10px;"
                 :ref="'chart2'"
                 :data="chartData2"
                 :ops="chartConfig2">
@@ -63,37 +92,32 @@
                 <div class="AppQxnDv-title">
                   <h2>事件受理率</h2>
                 </div>
-                <DoughnutChart :ratio="60"></DoughnutChart>
+                <DoughnutChart :ratio="sllRate" :value="sllData"></DoughnutChart>
               </div>
               <div class="wrapper">
                 <div class="AppQxnDv-title">
                   <h2>事件办结率</h2>
                 </div>
-                <DoughnutChart :ratio="95"></DoughnutChart>
+                <DoughnutChart :ratio="sjbjRate" :value="sjbjData"></DoughnutChart>
               </div>
             </div>
             <div class="right wrapper">
               <div class="AppQxnDv-title">
                 <h2>最新办理动态</h2>
-                <el-select v-model="value" style="width: 92px" size="mini" placeholder="专属">
+                <el-select v-model="type" @change="onChange" style="width: 92px" size="mini" placeholder="请选择">
-                  <el-option label="XXX派出所" value="1"></el-option>
+                  <el-option label="新办结" value="0"></el-option>
-                  <el-option label="XXX派出所" value="2"></el-option>
+                  <el-option label="新受理" value="1"></el-option>
-                  <el-option label="XXX派出所" value="3"></el-option>
                 </el-select>
               </div>
-              <AiDvTable
+              <ai-table
-                style="margin-top: 16px; height: 220px;"
+                width="265px"
-                stripe="1"
+                style="margin-top: 10px;"
-                size="mini"
+                height="210px"
-                :headerStyle="{
+                :tableData="tableData1"
-                  color: '#02FEFF',
+                :col-configs="colConfigs1"
-                  fontSize: '12px',
+                :isShowPagination="false"
-                  fontWeight: '600',
+                @getList="() => {}">
-                  backgroundColor: 'rgba(33, 180, 253, 0.1)'
+              </ai-table>
-                }"
-                :config="blConfig"
-                :data="bbTableData">
-              </AiDvTable>
             </div>
           </div>
           <div class="right-left__bottom">
@@ -126,7 +150,7 @@
             </div>
           </div>
           <div class="wrapper">
-            <DvMap style="width: 100%; height: 356px;"></DvMap>
+            <DvMap :instance="instance" style="width: 100%; height: 356px;"></DvMap>
           </div>
           <div class="right-middle__bottom">
             <div class="AppQxnDv-title">
@@ -202,6 +226,10 @@
     name: 'AppQxnEventDv',
     label: '事件上报',
 
+    props: {
+      instance: Function
+    },
+
     components: {
       DvMap,
       DoughnutChart
@@ -209,67 +237,12 @@
 
     data ()  {
       return {
-        value: '',
+        policeStationList: [],
         currIndex: 0,
-        chartData2: [
+        areaList: [],
-          {
+        type: '0',
-            "name": "1月",
+        gridId: '',
-            "已办理": 4,
+        gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
-            "待处理": 44,
-            "处理中": 23,
-            "已拒绝": 11
-          },
-          {
-            "name": "2月",
-            "已办理": 2,
-            "待处理": 24,
-            "处理中": 23,
-            "已拒绝": 11
-          },
-          {
-            "name": "3月",
-            "已办理": 44,
-            "待处理": 14,
-            "处理中": 2,
-            "已拒绝": 11
-          },
-          {
-            "name": "4月",
-            "已办理": 4,
-            "待处理": 44,
-            "处理中": 3,
-            "已拒绝": 1
-          },
-          {
-            "name": "5月",
-            "已办理": 4,
-            "待处理": 4,
-            "处理中": 23,
-            "已拒绝": 11
-          }
-        ],
-        chartData1: [
-          {
-            "name": "1月",
-            "警格上报": 23,
-            "居民上报": 23
-          },
-          {
-            "name": "2月",
-            "警格上报": 23,
-            "居民上报": 23
-          },
-          {
-            "name": "3月",
-            "警格上报": 23,
-            "居民上报": 23
-          },
-          {
-            "name": "4月",
-            "警格上报": 23,
-            "居民上报": 23
-          }
-        ],
         tableData: [
           {
             name: '姓名',
@@ -669,6 +642,13 @@
             v9: '详情>>',
             v10: '详情>>'
           }
+        ],
+        wxGridReportOverviewInfo: {},
+        tableData1: [],
+        colConfigs1: [
+          { prop: 'createTime',  label: '时间', align: 'center', width: '60px', dateFormat: 'MM/DD'  },
+          { prop: 'reporterName',  label: '姓名', align: 'center' },
+          { prop: 'caseName', label: '事件名称', align: 'left', width: 130 }
         ]
       }
     },
@@ -767,10 +747,144 @@
             }
           }
         ]
-      }
+      },
+
+      chartData1 () {
+        if (!this.wxGridReportOverviewInfo['上报来源分布+事件办理情况']) {
+          return []
+        }
+
+        return this.wxGridReportOverviewInfo['上报来源分布+事件办理情况'].map(v => {
+          return {
+            name: v['月份'],
+            '警格上报': v['警格上报'],
+            '居民上报': v['居民上报']
+          }
+        })
+      },
+
+      chartData2 () {
+        if (!this.wxGridReportOverviewInfo['上报来源分布+事件办理情况']) {
+          return []
+        }
+
+        return this.wxGridReportOverviewInfo['上报来源分布+事件办理情况'].map(v => {
+          return {
+            name: v['月份'],
+            '上报总数': v['上报数量'],
+            '已办理': v['已拒绝数量'],
+            '已拒绝': v['已拒绝数量']
+          }
+        })
+      },
+
+      sllData () {
+        return [{
+          key: '累计受理事件',
+          value: this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量']
+        },{
+          key: '累计上报事件',
+          value: this.wxGridReportOverviewInfo['全部上报事件数量']
+        }]
+      },
+
+      sllRate () {
+        if (!this.wxGridReportOverviewInfo['待受理数量']) {
+          return 0
+        }
+
+        return Number((((this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量']) / this.wxGridReportOverviewInfo['全部上报事件数量']) * 100).toFixed(2))
+      },
+
+      sjbjData () {
+        return [{key: '累计办结事件', value: this.wxGridReportOverviewInfo['已办结数量']}, {key: '累计受理事件', value: this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量']}]
+      },
+
+      sjbjRate () {
+        if (!this.wxGridReportOverviewInfo['待受理数量']) {
+          return 0
+        }
+
+        return Number(((this.wxGridReportOverviewInfo['已办结数量'] / (this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量'])) * 100).toFixed(2))
+      },
+    },
+
+    mounted () {
+      this.getInfo()
+      this.init()
     },
 
     methods: {
+      init (gridId) {
+        this.gridId = ''
+        this.gridParentId = gridId || 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
+        this.instance.post(`/api/wxgridinfo/tree`, null, {
+          params: {
+            gridParentId: gridId || '',
+            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            if (gridId) {
+              this.policeStationList = res.data
+            } else {
+              this.areaList = res.data
+            }
+          }
+        })
+
+        this.getInfo()
+      },
+
+      onChange () {
+        this.instance.post(`/api/wxgridinfo/wxGridReportNew`, null, {
+          params: {
+            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
+            gridId: this.gridId || this.gridParentId,
+            type: this.type
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.wxGridReportNewInfo = res.data
+          }
+        })
+      },
+
+      getInfo () {
+        this.instance.post(`/api/wxgridinfo/comprehensiveOverview`, null, {
+          params: {
+            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.middleTotalInfo = res.data
+          }
+        })
+
+        this.instance.post(`/api/wxgridinfo/wxGridReportOverview`, null, {
+          params: {
+            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
+            gridId: this.gridId || this.gridParentId
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.wxGridReportOverviewInfo = res.data
+          }
+        })
+
+        this.instance.post(`/api/wxgridinfo/wxGridReportNew`, null, {
+          params: {
+            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
+            gridId: this.gridId || this.gridParentId,
+            type: this.type
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.tableData1 = res.data
+          }
+        })
+      },
+
       Hex2RGBA(color, alpha = 1) {
         let hex = 0;
         if (color.charAt(0) == "#") {
@@ -998,6 +1112,54 @@
       }
     }
 
+    :deep(.ai-table) {
+      .el-table {
+        font-size: 12px;
+        color: #d0e1e8;
+        background-color: transparent!important;
+
+        th.el-table__cell.is-leaf, .el-table td.el-table__cell {
+          border: none!important;
+        }
+
+        tr.el-table__row--striped td {
+          background: rgba(33, 180, 253, 0.1)!important;
+        }
+
+        .el-table__header tr th:first-child .cell {
+          padding: 0!important;
+        }
+
+        .el-table__body tr td:first-child .cell {
+          padding: 0!important;
+        }
+
+        &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+          background-color: rgba(33, 180, 253, 0.1)!important;
+        }
+
+        th.el-table__cell {
+          background-color: transparent;
+        }
+
+        tr {
+          background-color: transparent;
+        }
+
+        .el-table__cell {
+          padding: 7px 0;
+          color: #d0e1e8;
+        }
+
+        .el-table__header tr .cell {
+          color: #02FEFF!important;
+        }
+      }
+      .ai-table__header {
+        background: rgba(33, 180, 253, 0.1)!important;
+      }
+    }
+
     ::-webkit-scrollbar {
       width: 5px;
       height: 14px;
@@ -1024,12 +1186,14 @@
     & > .right {
       display: flex;
       flex: 1;
+      overflow: hidden;
 
       .right-left {
         width: 530px;
 
         .right-left__middle {
           display: flex;
+          justify-content: space-between;
 
           .left {
             width: 245px;
@@ -1037,18 +1201,19 @@
           }
 
           .right {
-            flex: 1;
+            width: 275px;
           }
         }
 
         .right-left__top {
           display: flex;
+          justify-content: space-between;
 
           div {
-            flex: 1;
+            width: 275px;
 
             &:first-child {
-              margin-right: 12px;
+              width: 245px;
             }
           }
         }
@@ -1086,10 +1251,26 @@
         .left-item {
           position: relative;
           width: 100%;
+          cursor: pointer;
           margin-bottom: 10px;
           padding: 30px 14px 14px;
-          background-image: linear-gradient(0deg, rgba(40, 182, 253, 0.08) 1%, rgba(0, 102, 154, 0.65) 100%);
+          background-image: linear-gradient(0deg, rgba(40, 182, 253, 0.08) 1%, rgba(0, 102, 154, 0.2) 100%);
           border-radius: 6px;
+          box-shadow: inset 0 -1px 0 0 transparent;
+          transition: all ease 0.3s;
+
+          &:hover {
+            opacity: 0.7;
+          }
+
+          &.active {
+            background-image: linear-gradient(0deg, #28b6fd24 0%, #00669aa6 99%);
+            box-shadow: inset 0 -1px 0 0 #23B2C7;
+
+            &:hover {
+              opacity: 1;
+            }
+          }
 
           i {
             position: absolute;