黔西南大屏

packages/bigscreen/dv/AppQxnEventDv.vue

@@ -229,6 +229,11 @@
       </div>
       <div class="right-right">
         <AiDvPanel class="bottom" style="width: 410px" border="border6" title="办理排行">
+          <div class="title-right">
+            <span :class="[dateRange === 0 ? 'active' : '']" @click="onReportChange(0)">昨天</span>
+            <span :class="[dateRange === 1 ? 'active' : '']" @click="onReportChange(1)">近七天</span>
+            <span :class="[dateRange === 2 ? 'active' : '']" @click="onReportChange(2)">近30天</span>
+          </div>
           <ai-table
             height="890px"
             :tableData="reportHandleList"
@@ -648,6 +653,7 @@
           status: '',
           categoryId: ''
         },
+        dateRange: 2,
         eventList: []
       }
     },
@@ -848,6 +854,14 @@
         })
       },
 
+      onReportChange (index) {
+        this.dateRange = index
+
+        this.$nextTick(() => {
+          this.getReportHandleList()
+        })
+      },
+
       getReportList () {
         this.instance.post(`/api/wxgridinfo/reportList`, null, {
           params: {
@@ -885,6 +899,23 @@
         })
       },
 
+      getReportHandleList () {
+        this.instance.post(`/api/wxgridinfo/reportHandleList`, null, {
+          params: {
+            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
+            gridId: this.gridId || this.gridParentId,
+            size: '50',
+            dateRange: this.dateRange
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.reportHandleList = [
+              ...res.data
+            ]
+          }
+        })
+      },
+
       getInfo () {
         this.instance.post(`/api/wxgridinfo/comprehensiveOverview`, null, {
           params: {
@@ -897,22 +928,7 @@
         })
 
         this.getWxGridReportCata()
-
-        this.instance.post(`/api/wxgridinfo/reportHandleList`, null, {
-          params: {
-            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
-            gridId: this.gridId || this.gridParentId,
-            size: '50',
-            dateRange: '2'
-          }
-        }).then(res => {
-          if (res.code === 0) {
-            this.reportHandleList = [
-              ...res.data
-            ]
-          }
-        })
-
+        this.getReportHandleList()
         this.getReportList()
 
         this.instance.post(`/api/wxgridinfo/wxGridReportOverview`, null, {
@@ -972,6 +988,33 @@
     background: #0c0c0c;
     overflow: hidden;
 
+    .title-right {
+      display: flex;
+      position: absolute;
+      align-items: center;
+      top: 4px;
+      right: 0;
+      z-index: 11;
+
+      span {
+        width: 58px;
+        height: 22px;
+        line-height: 22px;
+        margin-right: 4px;
+        color: #1FBECC;
+        text-align: center;
+        font-size: 12px;
+        cursor: pointer;
+        transition: all ease 0.3s;
+        border: 1px solid transparent;
+        background: rgba(31, 158, 204, 0.16);
+
+        &.active, &:hover {
+          background: rgba(31, 158, 204, 0.2);
+          border: 1px solid #20B4C5;
+        }
+      }
+    }
     .event-info {
       position: fixed;
       left: 0;