From dee681d2462a6885e38f1eac77cb8249901030cc Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Tue, 2 Apr 2024 15:16:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=8D=A2corpId?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/bigscreen/dv/AppQxnDv.vue      |   21 +-
 packages/bigscreen/dv/AppQxnEventDv.vue | 2623 ++++++++++++-----------
 2 files changed, 1325 insertions(+), 1319 deletions(-)

diff --git a/packages/bigscreen/dv/AppQxnDv.vue b/packages/bigscreen/dv/AppQxnDv.vue
index e812146e..923e607e 100644
--- a/packages/bigscreen/dv/AppQxnDv.vue
+++ b/packages/bigscreen/dv/AppQxnDv.vue
@@ -311,6 +311,7 @@
 </template>
 
 <script>
+  const corpId = "wwb182f88f0327b37f"
   import DvMap from './components/DvMap'
   import DoughnutChart from './components/DoughnutChart'
   export default {
@@ -849,8 +850,7 @@
         this.$nextTick(() => {
           this.instance.post(`/api/wxgridinfo/tree`, null, {
             params: {
-              gridParentId: this.gridId,
-              corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
+              gridParentId: this.gridId, corpId
             }
           }).then(res => {
             if (res.code === 0) {
@@ -865,8 +865,7 @@
         this.gridParentId = gridId || 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
         this.instance.post(`/api/wxgridinfo/tree`, null, {
           params: {
-            gridParentId: gridId || '',
-            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
+            gridParentId: gridId || '', corpId
           }
         }).then(res => {
           if (res.code === 0) {
@@ -884,7 +883,7 @@
       getInfo () {
         this.instance.post(`/api/wxgridinfo/comprehensiveOverview`, null, {
           params: {
-            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
+            corpId
           }
         }).then(res => {
           if (res.code === 0) {
@@ -894,7 +893,7 @@
 
         this.instance.post(`/api/wxgridinfo/wxGroupTag`, null, {
           params: {
-            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
+            corpId
           }
         }).then(res => {
           if (res.code === 0) {
@@ -915,7 +914,7 @@
 
         this.instance.post(`/api/wxgridinfo/wxGroupOverview`, null, {
           params: {
-            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
+            corpId,
             gridId: this.gridId || this.gridParentId
           }
         }).then(res => {
@@ -926,7 +925,7 @@
 
         this.instance.post(`/api/wxgridinfo/wjwqgk`, null, {
           params: {
-            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
+            corpId,
             gridId: this.gridId || this.gridParentId
           }
         }).then(res => {
@@ -937,7 +936,7 @@
 
         this.instance.post(`/api/wxgridinfo/wjwqgkGMFB`, null, {
           params: {
-            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
+            corpId,
             gridId: this.gridId || this.gridParentId
           }
         }).then(res => {
@@ -948,7 +947,7 @@
 
         this.instance.post(`/api/wxgridinfo/cyActivity`, null, {
           params: {
-            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
+            corpId,
             gridId: this.gridId || this.gridParentId
           }
         }).then(res => {
@@ -1166,7 +1165,7 @@
 
       .el-input__suffix {
         right: 1px;
-        top: 0px;
+        top: 0;
       }
 
       i {
diff --git a/packages/bigscreen/dv/AppQxnEventDv.vue b/packages/bigscreen/dv/AppQxnEventDv.vue
index a080e015..733e59c9 100644
--- a/packages/bigscreen/dv/AppQxnEventDv.vue
+++ b/packages/bigscreen/dv/AppQxnEventDv.vue
@@ -5,20 +5,20 @@
       </AiDvPanel>
       <div class="left-list">
         <div
-          class="left-item"
-          v-for="(item, index) in areaList"
-          :class="[gridParentId === item.gridId ? 'active' : '']"
-          :key="index"
-          @click="init(item.gridId)">
+            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>{{ item.gridName }}</h2>
             <el-select v-model="gridId" @change="onStationChange" size="mini" v-if="gridParentId === item.gridId && index !== 0" placeholder="请选择派出所">
               <el-option
-                :label="item.gridName"
-                :value="item.gridId"
-                v-for="(item, index) in policeStationList"
-                :key="index">
+                  :label="item.gridName"
+                  :value="item.gridId"
+                  v-for="(item, index) in policeStationList"
+                  :key="index">
               </el-option>
             </el-select>
           </div>
@@ -69,10 +69,10 @@
                 <h2>上报来源分布</h2>
               </div>
               <ai-echart-v2
-                style="height: 220px; width: 245px; margin-top: 10px;"
-                :ref="'chart1'"
-                :data="chartData1"
-                :ops="chartConfig1">
+                  style="height: 220px; width: 245px; margin-top: 10px;"
+                  :ref="'chart1'"
+                  :data="chartData1"
+                  :ops="chartConfig1">
               </ai-echart-v2>
             </div>
             <div class="wrapper">
@@ -80,10 +80,10 @@
                 <h2>事件办理情況</h2>
               </div>
               <ai-echart-v2
-                style="height: 220px; width: 265px; margin-top: 10px;"
-                :ref="'chart2'"
-                :data="chartData2"
-                :ops="chartConfig2">
+                  style="height: 220px; width: 265px; margin-top: 10px;"
+                  :ref="'chart2'"
+                  :data="chartData2"
+                  :ops="chartConfig2">
               </ai-echart-v2>
             </div>
           </div>
@@ -111,13 +111,13 @@
                 </el-select>
               </div>
               <ai-table
-                width="265px"
-                style="margin-top: 10px;"
-                height="210px"
-                :tableData="tableData1"
-                :col-configs="colConfigs1"
-                :isShowPagination="false"
-                @getList="() => {}">
+                  width="265px"
+                  style="margin-top: 10px;"
+                  height="210px"
+                  :tableData="tableData1"
+                  :col-configs="colConfigs1"
+                  :isShowPagination="false"
+                  @getList="() => {}">
               </ai-table>
             </div>
           </div>
@@ -125,19 +125,19 @@
             <div class="AppQxnDv-title">
               <div class="left AppQxnDv-title__tab">
                 <h2
-                  @click="onTypeChange(index)"
-                  :class="[currIndex === index ? 'active' : '']"
-                  v-for="(item, index) in eventList"
-                  :key="index">
+                    @click="onTypeChange(index)"
+                    :class="[currIndex === index ? 'active' : '']"
+                    v-for="(item, index) in eventList"
+                    :key="index">
                   {{ item.categoryName }}
                 </h2>
               </div>
             </div>
             <ai-echart-v2
-              style="height: 224px; margin-top: 10px; width: 100%;"
-              :ref="'chart3'"
-              :data="chartData3"
-              :ops="chartConfig3">
+                style="height: 224px; margin-top: 10px; width: 100%;"
+                :ref="'chart3'"
+                :data="chartData3"
+                :ops="chartConfig3">
             </ai-echart-v2>
           </div>
         </AiDvPanel>
@@ -194,10 +194,10 @@
                 </el-select>
                 <el-select clearable @change="getReportList" v-model="search.categoryId" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件类型">
                   <el-option
-                    v-for="(item, index) in eventList"
-                    :key="index"
-                    :label="item.categoryName"
-                    :value="item.categoryId">
+                      v-for="(item, index) in eventList"
+                      :key="index"
+                      :label="item.categoryName"
+                      :value="item.categoryId">
                   </el-option>
                 </el-select>
                 <el-select clearable @change="getReportList" v-model="search.status" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件状态">
@@ -217,12 +217,12 @@
               </div>
             </div>
             <ai-table
-              style="margin-top: 10px; width: 548px;"
-              height="416px"
-              :tableData="tableData3"
-              :col-configs="colConfigs3"
-              :isShowPagination="false"
-              @getList="() => {}">
+                style="margin-top: 10px; width: 548px;"
+                height="416px"
+                :tableData="tableData3"
+                :col-configs="colConfigs3"
+                :isShowPagination="false"
+                @getList="() => {}">
             </ai-table>
           </div>
         </AiDvPanel>
@@ -235,11 +235,11 @@
             <span :class="[dateRange === 2 ? 'active' : '']" @click="onReportChange(2)">近30天</span>
           </div>
           <ai-table
-            height="890px"
-            :tableData="reportHandleList"
-            :col-configs="colConfigs2"
-            :isShowPagination="false"
-            @getList="() => {}">
+              height="890px"
+              :tableData="reportHandleList"
+              :col-configs="colConfigs2"
+              :isShowPagination="false"
+              @getList="() => {}">
             <el-table-column slot="index" label="排名" align="center" width="58">
               <template slot-scope="{ $index }">
                 <div class="table-index" :class="[$index < 3 ? 'table-index__active' : '']">
@@ -258,7 +258,7 @@
           <div class="info-title">
             <h2>事件详情</h2>
           </div>
-          <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/close.png" @click="isShow = false" />
+          <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/close.png" @click="isShow = false"/>
           <h3 :title="eventInfo.desc">{{ eventInfo.desc }}</h3>
           <div class="info-wrapper">
             <div class="info-wrapper__item">
@@ -312,270 +312,272 @@
 </template>
 
 <script>
-  import DvMap from './components/DvMap'
-  import DoughnutChart from './components/DoughnutChart'
-  export default {
-    name: 'AppQxnEventDv',
-    label: '事件上报',
+const corpId = "wwb182f88f0327b37f"
+import DvMap from './components/DvMap'
+import DoughnutChart from './components/DoughnutChart'
 
-    props: {
-      instance: Function
-    },
+export default {
+  name: 'AppQxnEventDv',
+  label: '事件上报',
 
-    components: {
-      DvMap,
-      DoughnutChart
-    },
+  props: {
+    instance: Function
+  },
 
-    data ()  {
-      return {
-        policeStationList: [],
-        currIndex: 0,
-        areaList: [],
-        type: '0',
-        isShow: false,
-        middleTotalInfo: {},
-        gridId: '',
-        gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
-        chartConfig1: {
-          legend: {
-            textStyle: {
-              color: "#fff"
-            }
-          },
-          grid: {
-            left: '0%',
-            right: '0%',
-            bottom: '0%',
-            top: '40px',
-            containLabel: true
-          },
-          tooltip: {
-            trigger: 'axis',
-            backgroundColor: 'rgba(0, 102, 154, 0.65)',
-            borderColor: 'rgba(0, 102, 154, 0.65)',
-            textStyle: { color: '#fff' },
-            axisPointer: { type: 'cross' }
-          },
-          color: ['#33CCCC', '#DBB36E'],
-          xAxis: {
-            type: "category",
-            axisTick: {show: false},
-            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
-            axisLabel: {color: '#8FABBF', fontSize: 12}
-          },
-          yAxis: {
-            nameGap: 23,
-            minInterval: 1,
-            splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
-            axisLabel: {color: '#8FABBF', fontSize: 12},
-            axisPointer: { snap: true }
-          },
-          series: [
-            {
-              name: '警格上报',
-              type: 'bar',
-              barWidth: '15',
-              stack: 'one'
-            },
-            {
-              name: '居民上报',
-              barWidth: '15',
-              type: 'bar',
-              stack: 'one'
-            }
-          ]
+  components: {
+    DvMap,
+    DoughnutChart
+  },
+
+  data() {
+    return {
+      policeStationList: [],
+      currIndex: 0,
+      areaList: [],
+      type: '0',
+      isShow: false,
+      middleTotalInfo: {},
+      gridId: '',
+      gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
+      chartConfig1: {
+        legend: {
+          textStyle: {
+            color: "#fff"
+          }
         },
-        chartConfig2: {
-          legend: {
-            itemWidth: 16,
-            itemGap: 4,
-            textStyle: {
-              color: "#fff",
-              fontSize: '12'
-            },
-            icon: 'roundRect'
-          },
-          grid: {
-            left: '0%',
-            right: '0%',
-            bottom: '0%',
-            top: '40px',
-            containLabel: true
-          },
-          tooltip: {
-            trigger: 'axis',
-            backgroundColor: 'rgba(0, 102, 154, 0.65)',
-            borderColor: 'rgba(0, 102, 154, 0.65)',
-            textStyle: { color: '#fff' },
-            axisPointer: { type: 'cross' }
-          },
-          color: ['#33CCCC', '#2C97E8','#BFEAFF', '#DBB36E'],
-          xAxis: {
-            type: "category",
-            axisTick: {show: false},
-            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
-            axisLabel: {color: '#8FABBF', fontSize: 12}
-          },
-          yAxis: {
-            nameGap: 23,
-            minInterval: 1,
-            splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
-            axisLabel: {color: '#8FABBF', fontSize: 12},
-            axisPointer: { snap: true }
-          },
-          daemon: (color) => ({
-            showSymbol: false,
-            smooth: true,
-            lineStyle: {
-              shadowBlur: 4,
-              shadowOffsetY: 2,
-              width: 2
-            },
-            areaStyle: {
-              color: {
-                type: 'linear',
-                x: 0,
-                x2: 0,
-                y: 0,
-                y2: 1,
-                colorStops: [
-                  { offset: 0, color: this.Hex2RGBA(color, 0.3) },
-                  { offset: 1, color: this.Hex2RGBA(color, 0.1) }
-                ]
-              }
-            }
-          })
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '0%',
+          top: '40px',
+          containLabel: true
         },
-        chartData3: [] ,
-        chartConfig3: {
-          xAxis: {
-            type: "category",
-            axisTick: {show: false},
-            axisLabel: {color: '#8FABBF', fontSize: 12},
-            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } }
-          },
-          tooltip: {
-            trigger: 'axis',
-            backgroundColor: 'rgba(0, 102, 154, 0.65)',
-            borderColor: 'rgba(0, 102, 154, 0.65)',
-            textStyle: { color: '#fff' },
-            axisPointer: { type: 'cross' }
-          },
-          grid: {
-            left: '0%',
-            right: '0%',
-            bottom: '0%',
-            top: '40px',
-            containLabel: true
-          },
-          legend: {
-            textStyle: {
-              color: "#fff"
-            }
-          },
-          yAxis: {
-            nameGap: 23,
-            minInterval: 1,
-            splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
-            axisPointer: { show: false },
-            axisLabel: {color: '#8FABBF', fontSize: 12}
-          },
-          axisPointer: {
-            type: 'shadow',
-            triggerTooltip: false,
-            shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
-          },
-          color: [
-            {
-              type: 'linear',
-              x: 0,
-              x2: 0,
-              y: 0,
-              y2: 1,
-              colorStops: [
-                { offset: 0, color: 'rgba(51, 204, 204, 1)' },
-                { offset: 1, color: 'rgba(31, 89, 89, 0.25)' }
-              ]
-            },
-            {
-              type: 'linear',
-              x: 0,
-              x2: 0,
-              y: 0,
-              y2: 1,
-              colorStops: [
-                { offset: 0, color: 'rgba(44, 151, 232, 1)' },
-                { offset: 1, color: 'rgba(21, 154, 255, 0)' }
-              ]
-            },
-            {
-              type: 'linear',
-              x: 0,
-              x2: 0,
-              y: 0,
-              y2: 1,
-              colorStops: [
-                { offset: 0, color: 'rgba(191, 234, 255, 1)' },
-                { offset: 1, color: 'rgba(191, 234, 255, 0.1)' }
-              ]
-            },
-            {
-              type: 'linear',
-              x: 0,
-              x2: 0,
-              y: 0,
-              y2: 1,
-              colorStops: [
-                { offset: 0, color: 'rgba(219, 179, 110, 1)' },
-                { offset: 1, color: 'rgba(219, 179, 110, 0.1)' }
-              ]
-            }
-          ],
-          series: [
-            {
-              name: '已办结',
-              type: 'bar',
-              barWidth: '8'
-            },
-            {
-              name: '待受理',
-              barWidth: '8',
-              type: 'bar'
-            },
-            {
-              name: '处理中',
-              barWidth: '8',
-              type: 'bar'
-            },
-            {
-              name: '已拒绝',
-              barWidth: '8',
-              type: 'bar'
-            }
-          ]
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0, 102, 154, 0.65)',
+          borderColor: 'rgba(0, 102, 154, 0.65)',
+          textStyle: {color: '#fff'},
+          axisPointer: {type: 'cross'}
         },
-        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 }
-        ],
-        eventInfo: {},
-        reportHandleList: [],
-        colConfigs2: [
-          { slot: 'index' },
-          { prop: 'name',  label: '姓名', align: 'center'  },
-          { prop: 'overCount',  label: '已办结', align: 'center', width: 60 },
-          { prop: 'handleCount', label: '办理中', align: 'center', width: 60 },
-          { prop: 'reportCount', label: '上报数', align: 'center', width: 60 },
+        color: ['#33CCCC', '#DBB36E'],
+        xAxis: {
+          type: "category",
+          axisTick: {show: false},
+          axisLine: {lineStyle: {color: 'rgba(179, 223, 255, 0.4)'}},
+          axisLabel: {color: '#8FABBF', fontSize: 12}
+        },
+        yAxis: {
+          nameGap: 23,
+          minInterval: 1,
+          splitLine: {lineStyle: {color: 'rgba(108, 128, 151, 0.3)', type: 'dashed'}},
+          axisLabel: {color: '#8FABBF', fontSize: 12},
+          axisPointer: {snap: true}
+        },
+        series: [
           {
-            prop: 'reportCount',
-            label: '联系TA',
-            align: 'center',
-            render: (h, params) => {
-              return h(
+            name: '警格上报',
+            type: 'bar',
+            barWidth: '15',
+            stack: 'one'
+          },
+          {
+            name: '居民上报',
+            barWidth: '15',
+            type: 'bar',
+            stack: 'one'
+          }
+        ]
+      },
+      chartConfig2: {
+        legend: {
+          itemWidth: 16,
+          itemGap: 4,
+          textStyle: {
+            color: "#fff",
+            fontSize: '12'
+          },
+          icon: 'roundRect'
+        },
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '0%',
+          top: '40px',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0, 102, 154, 0.65)',
+          borderColor: 'rgba(0, 102, 154, 0.65)',
+          textStyle: {color: '#fff'},
+          axisPointer: {type: 'cross'}
+        },
+        color: ['#33CCCC', '#2C97E8', '#BFEAFF', '#DBB36E'],
+        xAxis: {
+          type: "category",
+          axisTick: {show: false},
+          axisLine: {lineStyle: {color: 'rgba(179, 223, 255, 0.4)'}},
+          axisLabel: {color: '#8FABBF', fontSize: 12}
+        },
+        yAxis: {
+          nameGap: 23,
+          minInterval: 1,
+          splitLine: {lineStyle: {color: 'rgba(108, 128, 151, 0.3)', type: 'dashed'}},
+          axisLabel: {color: '#8FABBF', fontSize: 12},
+          axisPointer: {snap: true}
+        },
+        daemon: (color) => ({
+          showSymbol: false,
+          smooth: true,
+          lineStyle: {
+            shadowBlur: 4,
+            shadowOffsetY: 2,
+            width: 2
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              x2: 0,
+              y: 0,
+              y2: 1,
+              colorStops: [
+                {offset: 0, color: this.Hex2RGBA(color, 0.3)},
+                {offset: 1, color: this.Hex2RGBA(color, 0.1)}
+              ]
+            }
+          }
+        })
+      },
+      chartData3: [],
+      chartConfig3: {
+        xAxis: {
+          type: "category",
+          axisTick: {show: false},
+          axisLabel: {color: '#8FABBF', fontSize: 12},
+          axisLine: {lineStyle: {color: 'rgba(179, 223, 255, 0.4)'}}
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0, 102, 154, 0.65)',
+          borderColor: 'rgba(0, 102, 154, 0.65)',
+          textStyle: {color: '#fff'},
+          axisPointer: {type: 'cross'}
+        },
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '0%',
+          top: '40px',
+          containLabel: true
+        },
+        legend: {
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        yAxis: {
+          nameGap: 23,
+          minInterval: 1,
+          splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+          axisPointer: {show: false},
+          axisLabel: {color: '#8FABBF', fontSize: 12}
+        },
+        axisPointer: {
+          type: 'shadow',
+          triggerTooltip: false,
+          shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
+        },
+        color: [
+          {
+            type: 'linear',
+            x: 0,
+            x2: 0,
+            y: 0,
+            y2: 1,
+            colorStops: [
+              {offset: 0, color: 'rgba(51, 204, 204, 1)'},
+              {offset: 1, color: 'rgba(31, 89, 89, 0.25)'}
+            ]
+          },
+          {
+            type: 'linear',
+            x: 0,
+            x2: 0,
+            y: 0,
+            y2: 1,
+            colorStops: [
+              {offset: 0, color: 'rgba(44, 151, 232, 1)'},
+              {offset: 1, color: 'rgba(21, 154, 255, 0)'}
+            ]
+          },
+          {
+            type: 'linear',
+            x: 0,
+            x2: 0,
+            y: 0,
+            y2: 1,
+            colorStops: [
+              {offset: 0, color: 'rgba(191, 234, 255, 1)'},
+              {offset: 1, color: 'rgba(191, 234, 255, 0.1)'}
+            ]
+          },
+          {
+            type: 'linear',
+            x: 0,
+            x2: 0,
+            y: 0,
+            y2: 1,
+            colorStops: [
+              {offset: 0, color: 'rgba(219, 179, 110, 1)'},
+              {offset: 1, color: 'rgba(219, 179, 110, 0.1)'}
+            ]
+          }
+        ],
+        series: [
+          {
+            name: '已办结',
+            type: 'bar',
+            barWidth: '8'
+          },
+          {
+            name: '待受理',
+            barWidth: '8',
+            type: 'bar'
+          },
+          {
+            name: '处理中',
+            barWidth: '8',
+            type: 'bar'
+          },
+          {
+            name: '已拒绝',
+            barWidth: '8',
+            type: 'bar'
+          }
+        ]
+      },
+      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}
+      ],
+      eventInfo: {},
+      reportHandleList: [],
+      colConfigs2: [
+        {slot: 'index'},
+        {prop: 'name', label: '姓名', align: 'center'},
+        {prop: 'overCount', label: '已办结', align: 'center', width: 60},
+        {prop: 'handleCount', label: '办理中', align: 'center', width: 60},
+        {prop: 'reportCount', label: '上报数', align: 'center', width: 60},
+        {
+          prop: 'reportCount',
+          label: '联系TA',
+          align: 'center',
+          render: (h, params) => {
+            return h(
                 'p', {
                   style: {
                     width: '52px',
@@ -594,19 +596,19 @@
                     }
                   },
                 }, '联系TA'
-              )
-            }
+            )
           }
-        ],
-        colConfigs3: [
-          { prop: 'createTime',  label: '时间', align: 'center', dateFormat: 'MM/DD'  },
-          { prop: 'desc',  label: '事件内容', align: 'left', width: 300 },
-          {
-            prop: 'status',
-            label: '状态',
-            align: 'center',
-            render: (h, params) => {
-              return h(
+        }
+      ],
+      colConfigs3: [
+        {prop: 'createTime', label: '时间', align: 'center', dateFormat: 'MM/DD'},
+        {prop: 'desc', label: '事件内容', align: 'left', width: 300},
+        {
+          prop: 'status',
+          label: '状态',
+          align: 'center',
+          render: (h, params) => {
+            return h(
                 'i', {
                   style: {
                     display: 'inline-block',
@@ -621,15 +623,15 @@
                     background: this.mapStatus(params.row.status, 'bgColor'),
                   }
                 }, this.mapStatus(params.row.status, 'name')
-              )
-            }
-          },
-          {
-            prop: 'reportCount',
-            label: '查看',
-            align: 'center',
-            render: (h, params) => {
-              return h(
+            )
+          }
+        },
+        {
+          prop: 'reportCount',
+          label: '查看',
+          align: 'center',
+          render: (h, params) => {
+            return h(
                 'p', {
                   style: {
                     color: '#00AAFF',
@@ -641,768 +643,729 @@
                     }
                   },
                 }, '查看>>'
-              )
-            }
+            )
           }
-        ],
-        tableData3: [],
-        search: {
-          dateRange: '',
-          param: '',
-          source: '',
-          status: '',
-          categoryId: ''
-        },
-        dateRange: 2,
-        eventList: []
+        }
+      ],
+      tableData3: [],
+      search: {
+        dateRange: '',
+        param: '',
+        source: '',
+        status: '',
+        categoryId: ''
+      },
+      dateRange: 2,
+      eventList: []
+    }
+  },
+
+  computed: {
+    chartData1() {
+      if (!this.wxGridReportOverviewInfo['上报来源分布+事件办理情况']) {
+        return []
       }
-    },
 
-    computed: {
-      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['全部上报事件数量']) * 100).toFixed(2))
-      },
-    },
-
-    mounted () {
-      this.instance.post(`/api/wxgridcata/list`, null, {
-        params: {
-          level: 1,
-          corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
-        }
-      }).then(res => {
-        if (res.code === 0) {
-          this.eventList = res.data.records
-          this.init()
+      return this.wxGridReportOverviewInfo['上报来源分布+事件办理情况'].map(v => {
+        return {
+          name: v['月份'] + '月',
+          '警格上报': v['警格上报'],
+          '居民上报': v['居民上报']
         }
       })
     },
 
-    methods: {
-      mapProcessType (status) {
+    chartData2() {
+      if (!this.wxGridReportOverviewInfo['上报来源分布+事件办理情况']) {
+        return []
+      }
+
+      return this.wxGridReportOverviewInfo['上报来源分布+事件办理情况'].map(v => {
         return {
-          '1': '创建',
-          '2': '受理',
-          '3': '分配',
-          '4': '转交',
-          '5': '办结',
-          '6': '拒绝',
-          '7': '办理中'
-        }[status]
-      },
+          name: v['月份'] + '月',
+          '上报总数': v['上报数量'],
+          '已办理': v['已拒绝数量'],
+          '已拒绝': v['已拒绝数量']
+        }
+      })
+    },
 
-      getLaunchCode (wxUserId) {
-        this.instance.post(`/api/appdvcpconfig/getLaunchCode`, null, {
-          params: {
-            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
-            userid: wxUserId,
-            operatorUserid: this.$store.state.user.info.wxUserId
+    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['全部上报事件数量']) * 100).toFixed(2))
+    },
+  },
+
+  mounted() {
+    this.instance.post(`/api/wxgridcata/list`, null, {
+      params: {
+        level: 1,
+        corpId
+      }
+    }).then(res => {
+      if (res.code === 0) {
+        this.eventList = res.data.records
+        this.init()
+      }
+    })
+  },
+
+  methods: {
+    mapProcessType(status) {
+      return {
+        '1': '创建',
+        '2': '受理',
+        '3': '分配',
+        '4': '转交',
+        '5': '办结',
+        '6': '拒绝',
+        '7': '办理中'
+      }[status]
+    },
+
+    getLaunchCode(wxUserId) {
+      this.instance.post(`/api/appdvcpconfig/getLaunchCode`, null, {
+        params: {
+          corpId,
+          userid: wxUserId,
+          operatorUserid: this.$store.state.user.info.wxUserId
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          location.href = `wxwork://launch?launch_code=${res.data}`
+        }
+      })
+    },
+
+    mapStatus(status, type) {
+      const index = Number(status)
+      return [{
+        color: '#FFB300',
+        name: '待受理',
+        bgColor: 'rgba(255, 203, 82, 0.14)'
+      }, {
+        color: '#508AFE',
+        name: '办理中',
+        bgColor: 'rgba(123, 176, 254, 0.14)'
+      }, {
+        color: '#07B759',
+        name: '已办结',
+        bgColor: 'rgba(19, 246, 201, 0.14)'
+      }, {
+        color: '#FF4C4C',
+        name: '已拒绝',
+        bgColor: 'rgba(255, 112, 112, 0.14)'
+      }][index][type]
+    },
+
+    init(gridId) {
+      this.gridId = ''
+      this.gridParentId = gridId || 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
+      this.instance.post(`/api/wxgridinfo/tree`, null, {
+        params: {
+          gridParentId: gridId || '',
+          corpId
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.getInfo()
+          if (gridId) {
+            this.policeStationList = res.data
+          } else {
+            this.areaList = res.data
           }
-        }).then(res => {
-          if (res.code === 0) {
-            location.href = `wxwork://launch?launch_code=${res.data}`
-          }
-        })
-      },
+        }
+      })
+    },
 
-      mapStatus (status, type) {
-        const index = Number(status)
-        return [{
-          color: '#FFB300',
-          name: '待受理',
-          bgColor: 'rgba(255, 203, 82, 0.14)'
-        }, {
-          color: '#508AFE',
-          name: '办理中',
-          bgColor: 'rgba(123, 176, 254, 0.14)'
-        }, {
-          color: '#07B759',
-          name: '已办结',
-          bgColor: 'rgba(19, 246, 201, 0.14)'
-        }, {
-          color: '#FF4C4C',
-          name: '已拒绝',
-          bgColor: 'rgba(255, 112, 112, 0.14)'
-        }][index][type]
-      },
-
-      init (gridId) {
-        this.gridId = ''
-        this.gridParentId = gridId || 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
+    onStationChange() {
+      this.$nextTick(() => {
         this.instance.post(`/api/wxgridinfo/tree`, null, {
           params: {
-            gridParentId: gridId || '',
-            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
+            gridParentId: this.gridId,
+            corpId
           }
         }).then(res => {
           if (res.code === 0) {
             this.getInfo()
-            if (gridId) {
-              this.policeStationList = res.data
-            } else {
-              this.areaList = res.data
-            }
           }
         })
-      },
+      })
+    },
 
-      onStationChange () {
-        this.$nextTick(() => {
-          this.instance.post(`/api/wxgridinfo/tree`, null, {
-            params: {
-              gridParentId: this.gridId,
-              corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
-            }
-          }).then(res => {
-            if (res.code === 0) {
-              this.getInfo()
+    getEventInfo(orderId, info) {
+      this.instance.post(`/api/wxgridinfo/reportInfo`, null, {
+        params: {
+          orderId,
+          corpId
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.eventInfo = {
+            ...res.data,
+            typeName: info.type === '1' ? '居民上报' : '巡查上报',
+            status: info.status
+          }
+
+          this.isShow = true
+        }
+      })
+    },
+
+    onTypeChange(index) {
+      this.currIndex = index
+      this.getWxGridReportCata()
+    },
+
+    onChange() {
+      this.instance.post(`/api/wxgridinfo/wxGridReportNew`, null, {
+        params: {
+          corpId,
+          gridId: this.gridId || this.gridParentId,
+          type: this.type
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.tableData1 = res.data
+        }
+      })
+    },
+
+    onReportChange(index) {
+      this.dateRange = index
+
+      this.$nextTick(() => {
+        this.getReportHandleList()
+      })
+    },
+
+    getReportList() {
+      this.instance.post(`/api/wxgridinfo/reportList`, null, {
+        params: {
+          corpId,
+          gridId: this.gridId || this.gridParentId,
+          size: '50',
+          ...this.search
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.tableData3 = res.data
+        }
+      })
+    },
+
+    getWxGridReportCata() {
+      this.instance.post(`/api/wxgridinfo/wxGridReportCata`, null, {
+        params: {
+          categoryId: this.eventList[this.currIndex].categoryId,
+          gridId: this.gridId || this.gridParentId,
+          corpId
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.chartData3 = res.data.map(v => {
+            return {
+              name: v['二级分类名称'],
+              '已办结': v['已办结'] || 0,
+              '待受理': v['待处理'] || 0,
+              '处理中': v['处理中'] || 0,
+              '已拒绝': v['已拒绝'] || 0
             }
           })
-        })
-      },
-
-      getEventInfo (orderId, info) {
-        this.instance.post(`/api/wxgridinfo/reportInfo`, null, {
-          params: {
-            orderId,
-            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
-          }
-        }).then(res => {
-          if (res.code === 0) {
-            this.eventInfo = {
-              ...res.data,
-              typeName: info.type === '1' ? '居民上报' : '巡查上报',
-              status: info.status
-            }
-
-            this.isShow = true
-          }
-        })
-      },
-
-      onTypeChange (index) {
-        this.currIndex = index
-        this.getWxGridReportCata()
-      },
-
-      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.tableData1 = res.data
-          }
-        })
-      },
-
-      onReportChange (index) {
-        this.dateRange = index
-
-        this.$nextTick(() => {
-          this.getReportHandleList()
-        })
-      },
-
-      getReportList () {
-        this.instance.post(`/api/wxgridinfo/reportList`, null, {
-          params: {
-            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
-            gridId: this.gridId || this.gridParentId,
-            size: '50',
-            ...this.search
-          }
-        }).then(res => {
-          if (res.code === 0) {
-            this.tableData3 = res.data
-          }
-        })
-      },
-
-      getWxGridReportCata () {
-        this.instance.post(`/api/wxgridinfo/wxGridReportCata`, null, {
-          params: {
-            categoryId: this.eventList[this.currIndex].categoryId,
-            gridId: this.gridId || this.gridParentId,
-            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
-          }
-        }).then(res => {
-          if (res.code === 0) {
-            this.chartData3 = res.data.map(v => {
-              return {
-                name: v['二级分类名称'],
-                '已办结': v['已办结'] || 0,
-                '待受理': v['待处理'] || 0,
-                '处理中': v['处理中'] || 0,
-                '已拒绝': v['已拒绝'] || 0
-              }
-            })
-          }
-        })
-      },
-
-      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: {
-            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
-          }
-        }).then(res => {
-          if (res.code === 0) {
-            this.middleTotalInfo = res.data
-          }
-        })
-
-        this.getWxGridReportCata()
-        this.getReportHandleList()
-        this.getReportList()
-
-        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) == "#") {
-          if (color.length == 4) {
-            //检测诸如#FFF简写格式
-            color = "#" + color.charAt(1).repeat(2) +
-                color.charAt(2).repeat(2) +
-                color.charAt(3).repeat(2);
-          }
-          hex = parseInt(color.slice(1), 16);
         }
-        let r = hex >> 16 & 0xFF;
-        let g = hex >> 8 & 0xFF;
-        let b = hex & 0xFF;
-        return `rgba(${r},${g},${b},${alpha})`;
-      },
-      RGBtoHex(r, g, b) {
-        let hex = r << 16 | g << 8 | b;
-        return "#" + hex.toString(16);
+      })
+    },
+
+    getReportHandleList() {
+      this.instance.post(`/api/wxgridinfo/reportHandleList`, null, {
+        params: {
+          corpId,
+          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: {
+          corpId
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.middleTotalInfo = res.data
+        }
+      })
+
+      this.getWxGridReportCata()
+      this.getReportHandleList()
+      this.getReportList()
+
+      this.instance.post(`/api/wxgridinfo/wxGridReportOverview`, null, {
+        params: {
+          corpId,
+          gridId: this.gridId || this.gridParentId
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.wxGridReportOverviewInfo = res.data
+        }
+      })
+
+      this.instance.post(`/api/wxgridinfo/wxGridReportNew`, null, {
+        params: {
+          corpId,
+          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) == "#") {
+        if (color.length == 4) {
+          //检测诸如#FFF简写格式
+          color = "#" + color.charAt(1).repeat(2) +
+              color.charAt(2).repeat(2) +
+              color.charAt(3).repeat(2);
+        }
+        hex = parseInt(color.slice(1), 16);
       }
+      let r = hex >> 16 & 0xFF;
+      let g = hex >> 8 & 0xFF;
+      let b = hex & 0xFF;
+      return `rgba(${r},${g},${b},${alpha})`;
+    },
+    RGBtoHex(r, g, b) {
+      let hex = r << 16 | g << 8 | b;
+      return "#" + hex.toString(16);
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .AppQxnDv {
+.AppQxnDv {
+  display: flex;
+  height: 100%;
+  padding-top: 16px;
+  box-sizing: border-box;
+  background: #0c0c0c;
+  overflow: hidden;
+
+  .title-right {
     display: flex;
-    height: 100%;
-    padding-top: 16px;
-    box-sizing: border-box;
-    background: #0c0c0c;
-    overflow: hidden;
+    position: absolute;
+    align-items: center;
+    top: 4px;
+    right: 0;
+    z-index: 11;
 
-    .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);
 
-      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;
-        }
+      &.active, &:hover {
+        background: rgba(31, 158, 204, 0.2);
+        border: 1px solid #20B4C5;
       }
     }
-    .event-info {
-      position: fixed;
-      left: 0;
-      top: 0;
-      z-index: 111;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
+  }
 
-      .info-bottom__wrapper {
-        height: 120px;
-        margin-top: 20px;
-        overflow-y: auto;
+  .event-info {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 111;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    .info-bottom__wrapper {
+      height: 120px;
+      margin-top: 20px;
+      overflow-y: auto;
+    }
+
+    .info-bottom__item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      line-height: 1;
+      margin-bottom: 12px;
+      color: #fff;
+
+      &:last-child {
+        margin-bottom: 0;
       }
 
-      .info-bottom__item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        line-height: 1;
-        margin-bottom: 12px;
-        color: #fff;
+      div {
+        flex: 1;
+        margin: 0 18px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 12px;
+        color: #d0e1e8;
 
-        &:last-child {
-          margin-bottom: 0;
-        }
-
-        div {
-          flex: 1;
-          margin: 0 18px;
+        p {
+          margin-bottom: 8px;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
-          font-size: 12px;
-          color: #d0e1e8;
+        }
+      }
+
+      i {
+        font-style: normal;
+        font-size: 14px;
+      }
+
+      h4 {
+        font-size: 14px;
+        font-weight: normal;
+        color: #9BB7D4;
+      }
+    }
+
+    .info-mask {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      background: rgba($color: #000000, $alpha: 0.1);
+    }
+
+    .info-content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 11;
+      width: 498px;
+      padding: 15px 25px 30px;
+      background: url(https://cdn.cunwuyun.cn/dvcp/dv/qxn/event-bg.png);
+      background-size: 100% 100%;
+      transform: translate(-50%, -50%);
+
+      & > h3 {
+        word-break: break-all;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        margin-top: 28px;
+        font-weight: 600;
+        font-size: 16px;
+        color: #02FEFF;
+      }
+
+      .info-bottom {
+        margin-top: 20px;
+        padding-top: 14px;
+        border-top: 1px solid #1b3145;
+
+        & > h3 {
+          font-weight: 600;
+          font-size: 16px;
+          color: #02FEFF;
+        }
+      }
+
+      .progress {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        margin-top: 18px;
+        padding: 0 28px;
+        color: #9BB7D4;
+        font-size: 12px;
+        text-align: center;
+
+        .progress-item {
+          display: flex;
+          position: relative;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          width: 78px;
+
+          &:after {
+            position: absolute;
+            top: 37px;
+            left: 0;
+            width: 105px;
+            height: 2px;
+            background: #647886;
+            content: ' ';
+          }
+
+          &:first-child::after {
+            width: 133px;
+            left: -28px;
+          }
+
+          &:first-child::before {
+            position: absolute;
+            top: 38px;
+            left: -28px;
+            width: 8px;
+            height: 8px;
+            z-index: 11;
+            background: #647886;
+            border-radius: 50%;
+            content: ' ';
+            transform: translateY(-50%);
+          }
+
+          &:nth-of-type(4n)::before {
+            position: absolute;
+            top: 38px;
+            right: -28px;
+            z-index: 11;
+            width: 8px;
+            height: 8px;
+            background: #647886;
+            border-radius: 50%;
+            content: ' ';
+            transform: translateY(-50%);
+          }
+
+          &.active {
+            h4 {
+              color: rgba(7, 183, 89, 1);
+            }
+
+            &:first-child::before {
+              background: rgba(7, 183, 89, 1);
+            }
+
+            &:nth-of-type(4n)::before {
+              background: rgba(7, 183, 89, 1);
+            }
+
+            &:after {
+              background: rgba(7, 183, 89, 1);
+            }
+
+            .progress-item__middle {
+              background: rgba(7, 183, 89, 0.4);
+
+              i {
+                background: rgba(7, 183, 89, 1);
+              }
+            }
+          }
+
+          h4 {
+            margin-bottom: 12px;
+            font-size: 12px;
+            color: #fff;
+            font-weight: 500;
+          }
+
+          .progress-item__middle {
+            position: relative;
+            z-index: 11;
+            width: 20px;
+            height: 20px;
+            margin-bottom: 11px;
+            border-radius: 50%;
+            background: rgba(47, 140, 232, 0.4);
+
+            i {
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              width: 8px;
+              height: 8px;
+              border-radius: 50%;
+              background: #2F8CE8;
+              transform: translate(-50%, -50%);
+              content: '';
+            }
+          }
+
+          span {
+            line-height: 16px;
+          }
 
           p {
-            margin-bottom: 8px;
+            margin-bottom: 5px;
+          }
+        }
+      }
+
+      .info-wrapper {
+        margin-top: 12px;
+
+        .info-wrapper__item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          line-height: 1;
+          margin-bottom: 10px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          label {
+            width: 70px;
+            margin-right: 20px;
+            color: #9BB7D4;
+            text-align: right;
+            font-size: 14px;
+            font-weight: 500;
+          }
+
+          span {
+            width: 70%;
+            text-align: right;
+            font-size: 14px;
+            color: #fff;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
           }
         }
-
-        i {
-          font-style: normal;
-          font-size: 14px;
-        }
-
-        h4 {
-          font-size: 14px;
-          font-weight: normal;
-          color: #9BB7D4;
-        }
       }
 
-      .info-mask {
+      img {
         position: absolute;
-        left: 0;
-        top: 0;
+        top: 30px;
+        right: 18px;
         z-index: 1;
-        width: 100%;
-        height: 100%;
-        background: rgba($color: #000000, $alpha: 0.1);
-      }
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        transition: all ease 300ms;
 
-      .info-content {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        z-index: 11;
-        width: 498px;
-        padding: 15px 25px 30px;
-        background: url(https://cdn.cunwuyun.cn/dvcp/dv/qxn/event-bg.png);
-        background-size: 100% 100%;
-        transform: translate(-50%, -50%);
-
-        & > h3 {
-          word-break: break-all;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 3;
-          margin-top: 28px;
-          font-weight: 600;
-          font-size: 16px;
-          color: #02FEFF;
-        }
-
-        .info-bottom {
-          margin-top: 20px;
-          padding-top: 14px;
-          border-top: 1px solid #1b3145;
-
-          & > h3 {
-            font-weight: 600;
-            font-size: 16px;
-            color: #02FEFF;
-          }
-        }
-
-        .progress {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          width: 100%;
-          margin-top: 18px;
-          padding: 0 28px;
-          color: #9BB7D4;
-          font-size: 12px;
-          text-align: center;
-
-          .progress-item {
-            display: flex;
-            position: relative;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            width: 78px;
-
-            &:after {
-              position: absolute;
-              top: 37px;
-              left: 0%;
-              width: 105px;
-              height: 2px;
-              background: #647886;
-              content: ' ';
-            }
-
-            &:first-child::after {
-              width: 133px;
-              left: -28px;
-            }
-
-            &:first-child::before {
-              position: absolute;
-              top: 38px;
-              left: -28px;
-              width: 8px;
-              height: 8px;
-              z-index: 11;
-              background: #647886;
-              border-radius: 50%;
-              content: ' ';
-              transform: translateY(-50%);
-            }
-
-            &:nth-of-type(4n)::before {
-              position: absolute;
-              top: 38px;
-              right: -28px;
-              z-index: 11;
-              width: 8px;
-              height: 8px;
-              background: #647886;
-              border-radius: 50%;
-              content: ' ';
-              transform: translateY(-50%);
-            }
-
-            &.active {
-              h4 {
-                color: rgba(7, 183, 89, 1);
-              }
-
-              &:first-child::before {
-                background: rgba(7, 183, 89, 1);
-              }
-
-              &:nth-of-type(4n)::before {
-                background: rgba(7, 183, 89, 1);
-              }
-
-              &:after {
-                background: rgba(7, 183, 89, 1);
-              }
-
-              .progress-item__middle {
-                background: rgba(7, 183, 89, 0.4);
-
-                i {
-                  background: rgba(7, 183, 89, 1);
-                }
-              }
-            }
-
-            h4 {
-              margin-bottom: 12px;
-              font-size: 12px;
-              color: #fff;
-              font-weight: 500;
-            }
-
-            .progress-item__middle {
-              position: relative;
-              z-index: 11;
-              width: 20px;
-              height: 20px;
-              margin-bottom: 11px;
-              border-radius: 50%;
-              background: rgba(47, 140, 232, 0.4);
-
-              i {
-                position: absolute;
-                left: 50%;
-                top: 50%;
-                width: 8px;
-                height: 8px;
-                border-radius: 50%;
-                background: #2F8CE8;
-                transform: translate(-50%, -50%);
-                content: '';
-              }
-            }
-
-            span {
-              line-height: 16px;
-            }
-
-            p {
-              margin-bottom: 5px;
-            }
-          }
-        }
-
-        .info-wrapper {
-          margin-top: 12px;
-
-          .info-wrapper__item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            width: 100%;
-            line-height: 1;
-            margin-bottom: 10px;
-
-            &:last-child {
-              margin-bottom: 0;
-            }
-
-            label {
-              width: 70px;
-              margin-right: 20px;
-              color: #9BB7D4;
-              text-align: right;
-              font-size: 14px;
-              font-weight: 500;
-            }
-
-            span {
-              width: 70%;
-              text-align: right;
-              font-size: 14px;
-              color: #fff;
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            }
-          }
-        }
-
-        img {
-          position: absolute;
-          top: 30px;
-          right: 18px;
-          z-index: 1;
-          width: 24px;
-          height: 24px;
-          cursor: pointer;
-          transition: all ease 300;
-
-          &:hover {
-            opacity: 0.6;
-          }
-        }
-
-        .info-title {
-          display: flex;
-          align-items: center;
-
-          h2 {
-            font-size: 16px;
-            color: #fff;
-          }
+        &:hover {
+          opacity: 0.6;
         }
       }
-    }
-    .table-index {
-      display: flex;
-      align-items: center;
-      justify-content: center;
 
-      span {
-        width: 22px;
-        height: 20px;
-        line-height: 20px;
-        text-align: center;
-        border-radius: 4px;
-        border: 1px solid #42BED5;
-      }
-
-      &.table-index__active span {
-        border-color: #EDAA38;
-      }
-    }
-
-    .wrapper {
-      margin-bottom: 12px;
-    }
-
-    .AppQxnDv-title {
-      display: flex;
-      position: relative;
-      align-items: center;
-      justify-content: space-between;
-      height: 30px;
-      line-height: 30px;
-      color: rgba(172, 201, 230, 0.8);
-      background-image: linear-gradient(270deg, rgba(31, 67, 102, 0) 0%, rgba(31, 67, 102, 0.25) 100%);
-
-      & > div {
+      .info-title {
         display: flex;
         align-items: center;
 
-        &:first-child {
-          h2:first-child {
-            &::after {
-              position: absolute;
-              bottom: 0;
-              left: 27px;
-              z-index: 1;
-              width: 9px;
-              height: 2px;
-              background: rgba(41, 77, 102, 1);
-              content: ' ';
-            }
+        h2 {
+          font-size: 16px;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .table-index {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    span {
+      width: 22px;
+      height: 20px;
+      line-height: 20px;
+      text-align: center;
+      border-radius: 4px;
+      border: 1px solid #42BED5;
+    }
+
+    &.table-index__active span {
+      border-color: #EDAA38;
+    }
+  }
+
+  .wrapper {
+    margin-bottom: 12px;
+  }
+
+  .AppQxnDv-title {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: space-between;
+    height: 30px;
+    line-height: 30px;
+    color: rgba(172, 201, 230, 0.8);
+    background-image: linear-gradient(270deg, rgba(31, 67, 102, 0) 0%, rgba(31, 67, 102, 0.25) 100%);
+
+    & > div {
+      display: flex;
+      align-items: center;
+
+      &:first-child {
+        h2:first-child {
+          &::after {
+            position: absolute;
+            bottom: 0;
+            left: 27px;
+            z-index: 1;
+            width: 9px;
+            height: 2px;
+            background: rgba(41, 77, 102, 1);
+            content: ' ';
           }
         }
       }
+    }
 
-      & > h2 {
-        &::after {
-          position: absolute;
-          bottom: 0;
-          left: 27px;
-          z-index: 1;
-          width: 9px;
-          height: 2px;
-          background: rgba(41, 77, 102, 1);
-          content: ' ';
-        }
-      }
-
-
-    .AppQxnDv-title__tab {
-        h2 {
-          cursor: pointer;
-        }
-
-        h2.active {
-          color: #fff;
-          font-size: 16px;
-        }
-      }
-      h2 {
-        position: relative;
-        font-size: 16px;
-        font-weight: 500;
-        padding: 0 10px;
-      }
-
+    & > h2 {
       &::after {
         position: absolute;
         bottom: 0;
-        left: 0;
-        z-index: 1;
-        width: 9px;
-        height: 2px;
-        background: #5299CC;
-        content: ' ';
-      }
-
-      &::before {
-        position: absolute;
-        bottom: 0;
-        left: 14px;
+        left: 27px;
         z-index: 1;
         width: 9px;
         height: 2px;
@@ -1411,318 +1374,362 @@
       }
     }
 
-    .AppQxnDv-total {
+
+    .AppQxnDv-title__tab {
+      h2 {
+        cursor: pointer;
+      }
+
+      h2.active {
+        color: #fff;
+        font-size: 16px;
+      }
+    }
+
+    h2 {
+      position: relative;
+      font-size: 16px;
+      font-weight: 500;
+      padding: 0 10px;
+    }
+
+    &::after {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 9px;
+      height: 2px;
+      background: #5299CC;
+      content: ' ';
+    }
+
+    &::before {
+      position: absolute;
+      bottom: 0;
+      left: 14px;
+      z-index: 1;
+      width: 9px;
+      height: 2px;
+      background: rgba(41, 77, 102, 1);
+      content: ' ';
+    }
+  }
+
+  .AppQxnDv-total {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .item {
       display: flex;
       align-items: center;
-      margin-bottom: 16px;
+      justify-content: center;
+      flex-direction: column;
+      flex: 1;
 
-      .item {
+      h2 {
+        margin-bottom: 10px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #FFFFFF;
+      }
+
+      .item-bottom {
         display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        flex: 1;
+        align-items: baseline;
 
-        h2 {
-          margin-bottom: 10px;
-          font-size: 14px;
-          font-weight: 500;
-          color: #FFFFFF;
+        span {
+          font-weight: 700;
+          font-size: 18px;
+          color: #02FEFF;
         }
 
-        .item-bottom {
+        i {
+          margin-left: 4px;
+          font-style: normal;
+          color: rgba(255, 255, 255, 0.5);
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  :deep(.el-select) {
+    height: 24px;
+    line-height: 24px;
+
+    input {
+      width: 100%;
+      height: 24px;
+      line-height: 24px;
+      padding: 0 26px 0 6px;
+      font-size: 12px;
+      color: rgba(179, 229, 229, 1);
+      border: 1px solid #2A7A92;
+      border-radius: 2px;
+      background: transparent;
+
+      &::placeholder {
+        color: rgba(179, 229, 229, 0.6);
+      }
+    }
+
+    .el-input__suffix {
+      right: 1px;
+      top: 0;
+    }
+
+    i {
+      color: #B3E5E5;
+    }
+  }
+
+  :deep(.el-input) {
+    height: 24px;
+    line-height: 24px;
+
+    input {
+      width: 100%;
+      height: 24px;
+      line-height: 24px;
+      padding: 0 6px;
+      font-size: 12px;
+      color: rgba(179, 229, 229, 1);
+      border: 1px solid #2A7A92;
+      border-radius: 2px;
+      background: transparent;
+
+      &::placeholder {
+        color: rgba(179, 229, 229, 0.6);
+      }
+    }
+
+    .el-input-group__append {
+      padding: 0 16px;
+      background: #007994;
+      border: none;
+      border-radius: 0 2px 2px 0;
+    }
+
+    .el-input__suffix {
+      right: 1px;
+      top: 0;
+    }
+
+    i {
+      color: #B3E5E5;
+    }
+  }
+
+  :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;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    min-height: 20px;
+    background-clip: content-box;
+    box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
+  }
+
+  ::-webkit-scrollbar-track {
+    box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  & > .right {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+
+    .right-left {
+      width: 530px;
+
+      .right-left__middle {
+        display: flex;
+        justify-content: space-between;
+
+        .left {
+          width: 245px;
+          margin-right: 12px;
+        }
+
+        .right {
+          width: 275px;
+        }
+      }
+
+      .right-left__top {
+        display: flex;
+        justify-content: space-between;
+
+        div {
+          width: 275px;
+
+          &:first-child {
+            width: 245px;
+          }
+        }
+      }
+    }
+
+    .right-middle {
+      width: 556px;
+      margin: 0 40px;
+
+      .right-middle__middle {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 16px;
+      }
+    }
+
+    .right-right {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+  }
+
+  & > .left {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 240px;
+    margin-right: 20px;
+
+    .left-list {
+      flex: 1;
+      overflow-y: auto;
+      width: 100%;
+
+      .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.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;
+          left: 0;
+          top: 0;
+          width: 22px;
+          height: 21px;
+          line-height: 21px;
+          text-align: center;
+          font-weight: 600;
+          font-style: normal;
+          font-size: 14px;
+          color: #FFFFFF;
+          background-image: linear-gradient(177deg, #02eeee66 0%, #0190d866 100%);
+          border-radius: 6px 0 6px 0;
+        }
+
+        .left-item__bottom {
           display: flex;
-          align-items: baseline;
+          align-items: center;
+          justify-content: space-between;
 
           span {
-            font-weight: 700;
-            font-size: 18px;
-            color: #02FEFF;
-          }
-
-          i {
-            margin-left: 4px;
-            font-style: normal;
-            color: rgba(255, 255, 255, 0.5);
+            color: #fff;
+            font-weight: 600;
             font-size: 12px;
           }
         }
-      }
-    }
 
-    :deep(.el-select) {
-      height: 24px;
-      line-height: 24px;
-
-      input {
-        width: 100%;
-        height: 24px;
-        line-height: 24px;
-        padding: 0 26px 0 6px;
-        font-size: 12px;
-        color: rgba(179, 229, 229, 1);
-        border: 1px solid #2A7A92;
-        border-radius: 2px;
-        background: transparent;
-
-        &::placeholder {
-          color: rgba(179, 229, 229, 0.6);
-        }
-      }
-
-      .el-input__suffix {
-        right: 1px;
-        top: 0px;
-      }
-
-      i {
-        color: #B3E5E5;
-      }
-    }
-
-    :deep(.el-input) {
-      height: 24px;
-      line-height: 24px;
-
-      input {
-        width: 100%;
-        height: 24px;
-        line-height: 24px;
-        padding: 0 6px;
-        font-size: 12px;
-        color: rgba(179, 229, 229, 1);
-        border: 1px solid #2A7A92;
-        border-radius: 2px;
-        background: transparent;
-
-        &::placeholder {
-          color: rgba(179, 229, 229, 0.6);
-        }
-      }
-
-      .el-input-group__append {
-        padding: 0 16px;
-        background: #007994;
-        border: none;
-        border-radius: 0 2px 2px 0;
-      }
-
-      .el-input__suffix {
-        right: 1px;
-        top: 0px;
-      }
-
-      i {
-        color: #B3E5E5;
-      }
-    }
-
-    :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;
-    }
-
-    ::-webkit-scrollbar-corner {
-      background: transparent;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      min-height: 20px;
-      background-clip: content-box;
-      box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
-    }
-
-    ::-webkit-scrollbar-track {
-      box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
-    }
-
-    * {
-      box-sizing: border-box;
-    }
-
-    & > .right {
-      display: flex;
-      flex: 1;
-      overflow: hidden;
-
-      .right-left {
-        width: 530px;
-
-        .right-left__middle {
+        .left-item__top {
           display: flex;
+          align-items: center;
           justify-content: space-between;
-
-          .left {
-            width: 245px;
-            margin-right: 12px;
-          }
-
-          .right {
-            width: 275px;
-          }
-        }
-
-        .right-left__top {
-          display: flex;
-          justify-content: space-between;
-
-          div {
-            width: 275px;
-
-            &:first-child {
-              width: 245px;
-            }
-          }
-        }
-      }
-      .right-middle {
-        width: 556px;
-        margin: 0 40px;
-
-        .right-middle__middle {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 16px;
-        }
-      }
-
-      .right-right {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-      }
-    }
-
-    & > .left {
-      display: flex;
-      align-items: center;
-      flex-direction: column;
-      width: 240px;
-      margin-right: 20px;
-
-      .left-list {
-        flex: 1;
-        overflow-y: auto;
-        width: 100%;
-
-        .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.2) 100%);
-          border-radius: 6px;
-          box-shadow: inset 0 -1px 0 0 transparent;
-          transition: all ease 0.3s;
 
-          &:hover {
-            opacity: 0.7;
+          .el-select {
+            width: 100px;
           }
 
-          &.active {
-            background-image: linear-gradient(0deg, #28b6fd24 0%, #00669aa6 99%);
-            box-shadow: inset 0 -1px 0 0 #23B2C7;
-
-            &:hover {
-              opacity: 1;
-            }
-          }
-
-          i {
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 22px;
-            height: 21px;
-            line-height: 21px;
-            text-align: center;
+          h2 {
             font-weight: 600;
-            font-style: normal;
             font-size: 14px;
             color: #FFFFFF;
-            background-image: linear-gradient(177deg, #02eeee66 0%, #0190d866 100%);
-            border-radius: 6px 0 6px 0;
-          }
-
-          .left-item__bottom {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            span {
-              color: #fff;
-              font-weight: 600;
-              font-size: 12px;
-            }
-          }
-
-          .left-item__top {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 10px;
-
-            .el-select {
-              width: 100px;
-            }
-
-            h2 {
-              font-weight: 600;
-              font-size: 14px;
-              color: #FFFFFF;
-            }
           }
         }
       }
     }
   }
+}
 </style>