大屏

packages/bigscreen/dv/AppQxnEventDv.vue

@@ -92,13 +92,13 @@
                 <div class="AppQxnDv-title">
                   <h2>事件受理率</h2>
                 </div>
-                <DoughnutChart :ratio="sllRate" :value="sllData"></DoughnutChart>
+                <DoughnutChart :labelStyle="{width: '96px'}" :ratio="sllRate" :value="sllData"></DoughnutChart>
               </div>
               <div class="wrapper">
                 <div class="AppQxnDv-title">
                   <h2>事件办结率</h2>
                 </div>
-                <DoughnutChart :ratio="sjbjRate" :value="sjbjData"></DoughnutChart>
+                <DoughnutChart :labelStyle="{width: '96px'}" :ratio="sjbjRate" :value="sjbjData"></DoughnutChart>
               </div>
             </div>
             <div class="right wrapper">
@@ -123,10 +123,13 @@
           <div class="right-left__bottom">
             <div class="AppQxnDv-title">
               <div class="left AppQxnDv-title__tab">
-                <h2 @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">隐患上报</h2>
+                <h2
-                <h2 @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">咨询服务</h2>
+                  @click="onTypeChange(index)"
-                <h2 @click="currIndex = 2" :class="[currIndex === 2 ? 'active' : '']">矛盾调解</h2>
+                  :class="[currIndex === index ? 'active' : '']"
-                <h2 @click="currIndex = 3" :class="[currIndex === 3 ? 'active' : '']">其他</h2>
+                  v-for="(item, index) in eventList"
+                  :key="index">
+                  {{ item.categoryName }}
+                </h2>
               </div>
             </div>
             <ai-echart-v2
@@ -156,63 +159,62 @@
             <div class="AppQxnDv-title">
               <h2>事件列表</h2>
               <div class="right">
-                <el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="上报来源">
+                <el-select clearable @change="getReportList" v-model="search.source" style="width: 82px; margin-right:6px;" 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>
-                <el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件类型">
+                <el-select clearable @change="getReportList" v-model="search.categoryId" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件类型">
-                  <el-option label="XXX派出所" value="1"></el-option>
+                  <el-option
-                  <el-option label="XXX派出所" value="2"></el-option>
+                    v-for="(item, index) in eventList"
-                  <el-option label="XXX派出所" value="3"></el-option>
+                    :key="index"
+                    :label="item.categoryName"
+                    :value="item.categoryId">
+                  </el-option>
                 </el-select>
-                <el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件状态">
+                <el-select clearable @change="getReportList" v-model="search.status" style="width: 82px; margin-right:6px;" 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-option label="已办结" value="2"></el-option>
+                  <el-option label="已拒绝" value="3"></el-option>
                 </el-select>
-                <el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="最近30天">
+                <el-select clearable @change="getReportList" v-model="search.dateRange" style="width: 82px; margin-right:6px;" size="mini" placeholder="最近30天">
-                  <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="近7天" value="1"></el-option>
-                  <el-option label="XXX派出所" value="3"></el-option>
+                  <el-option label="近30天" value="2"></el-option>
                 </el-select>
-                <el-input placeholder="关键词" style="width: 98px;">
+                <el-input placeholder="关键词" v-model="search.param" v-throttle="() => {getReportList()}" style="width: 98px;">
                   <el-button slot="append" icon="el-icon-search"></el-button>
                 </el-input>
               </div>
             </div>
-            <AiDvTable
+            <ai-table
-              style="margin-top: 16px; height: 430px;"
+              style="margin-top: 10px; width: 556px;"
-              :heigth="'100%'"
+              height="420px"
-              size="mini"
+              :tableData="tableData3"
-              stripe="1"
+              :col-configs="colConfigs3"
-              :headerStyle="{
+              :isShowPagination="false"
-                color: '#02FEFF',
+              @getList="() => {}">
-                fontSize: '12px',
+            </ai-table>
-                fontWeight: '600',
-                backgroundColor: 'rgba(33, 180, 253, 0.1)'
-              }"
-              :config="eventTableConfig"
-              :data="eventTableData">
-            </AiDvTable>
           </div>
         </AiDvPanel>
       </div>
       <div class="right-right">
-        <AiDvPanel class="bottom" style="" border="border6" title="办理排行">
+        <AiDvPanel class="bottom" style="width: 410px" border="border6" title="办理排行">
-          <AiDvTable
+          <ai-table
-            :heigth="'100%'"
+            style="margin-top: 10px;"
-            stripe="1"
+            height="890px"
-            :headerStyle="{
+            :tableData="reportHandleList"
-              color: '#02FEFF',
+            :col-configs="colConfigs2"
-              fontSize: '12px',
+            :isShowPagination="false"
-              fontWeight: '600',
+            @getList="() => {}">
-              backgroundColor: 'rgba(33, 180, 253, 0.1)'
+            <el-table-column slot="index" label="排名" align="center" width="58">
-            }"
+              <template slot-scope="{ $index }">
-            isShowIndex="1"
+                <div class="table-index" :class="[$index < 3 ? 'table-index__active' : '']">
-            :config="tableConfig"
+                  <span>{{ $index + 1 }}</span>
-            :data="tableData">
+                </div>
-          </AiDvTable>
+              </template>
+            </el-table-column>
+          </ai-table>
         </AiDvPanel>
       </div>
     </div>
@@ -243,73 +245,6 @@
         type: '0',
         gridId: '',
         gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
-        tableData: [
-          {
-            name: '姓名',
-            v1: '宗梦瑞',
-            v2: '宗梦瑞',
-            v3: '宗梦瑞',
-            v4: '宗梦瑞',
-            v5: '宗梦瑞',
-            v6: '宗梦瑞',
-            v7: '宗梦瑞',
-            v8: '宗梦瑞',
-            v9: '宗梦瑞',
-            v10: '宗梦瑞'
-          },
-          {
-            name: '己办结',
-            v1: '12',
-            v2: '12',
-            v3: '123',
-            v4: '123',
-            v5: '123',
-            v6: '123',
-            v7: '2',
-            v8: '123',
-            v9: '123',
-            v10: '1234'
-          },
-          {
-            name: '办理中',
-            v1: '12',
-            v2: '12',
-            v3: '123',
-            v4: '123',
-            v5: '123',
-            v6: '123',
-            v7: '2',
-            v8: '123',
-            v9: '123',
-            v10: '1234'
-          },
-          {
-            name: '上报数',
-            v1: '12',
-            v2: '12',
-            v3: '123',
-            v4: '123',
-            v5: '123',
-            v6: '123',
-            v7: '2',
-            v8: '123',
-            v9: '123',
-            v10: '1234'
-          },
-          {
-            name: '联系TA',
-            v1: '联系TA',
-            v2: '联系TA',
-            v3: '联系TA',
-            v4: '联系TA',
-            v5: '联系TA',
-            v6: '联系TA',
-            v7: '联系TA',
-            v8: '联系TA',
-            v9: '联系TA',
-            v10: '联系TA'
-          }
-        ],
         chartConfig1: {
           legend: {
             textStyle: {
@@ -420,91 +355,7 @@
             }
           })
         },
-        bbTableData: [
+        chartData3: [] ,
-          {
-            name: '时间',
-            v: '04/18',
-            v1: '04/18',
-            v2: '04/18',
-            v3: '04/18',
-            v4: '04/18',
-            v5: '04/18'
-          },
-          {
-            name: '姓名',
-            v: '宗梦瑞',
-            v1: '宗梦瑞',
-            v2: '宗梦瑞',
-            v3: '宗梦瑞',
-            v4: '宗梦瑞',
-            v5: '宗梦瑞'
-          },
-          {
-            name: '事件名称',
-            v: '户籍办理',
-            v1: '户籍办理',
-            v2: '户籍办理',
-            v3: '户籍办理',
-            v4: '户籍办理',
-            v5: '户籍办理'
-          }
-        ],
-        blConfig: [{
-          color: '#d0e1e8',
-          align: '',
-          width: '',
-          fontSize: '14px',
-          flex: ''
-        }, {
-          color: '#d0e1e8',
-          align: 'left',
-          width: '',
-          fontSize: '14px',
-          flex: ''
-        }, {
-            color: '#d0e1e8',
-            align: 'right',
-            fontSize: '14px',
-            flex: ''
-          }
-        ],
-        chartData3: [
-          {
-            "name": "人员聚集",
-            "已办理": 223,
-            "待处理": 23,
-            "处理中": 223,
-            "已拒绝": 23
-          },
-          {
-            "name": "非法饲养动物",
-            "已办理": 223,
-            "待处理": 23,
-            "处理中": 223,
-            "已拒绝": 23
-          },
-          {
-            "name": "婚姻家庭纠纷",
-            "已办理": 223,
-            "待处理": 23,
-            "处理中": 223,
-            "已拒绝": 23
-          },
-          {
-            "name": "道路安全",
-            "已办理": 223,
-            "待处理": 23,
-            "处理中": 223,
-            "已拒绝": 23
-          },
-          {
-            "name": "其他",
-            "已办理": 223,
-            "待处理": 23,
-            "处理中": 223,
-            "已拒绝": 23
-          }
-        ] ,
         chartConfig3: {
           xAxis: {
             type: "category",
@@ -589,166 +440,107 @@
             itemStyle: {}
           }
         },
-        eventTableData: [
-          {
-            name: '时间',
-            v1: '04/18',
-            v2: '02/18',
-            v3: '04/18',
-            v4: '04/18',
-            v5: '04/18',
-            v6: '04/18',
-            v7: '04/18',
-            v8: '04/18',
-            v9: '04/18',
-            v10: '04/18'
-          },
-          {
-            name: '事件内容',
-            v1: '咨询如何报考摩托车驾驶咨询如',
-            v2: '咨询如何报考摩托车驾驶咨询如',
-            v3: '咨询如何报考摩托车驾驶咨询如',
-            v4: '咨询如何报考摩托车驾驶咨询如',
-            v5: '咨询如何报考摩托车驾驶咨询如',
-            v6: '咨询如何报考摩托车驾驶咨询如',
-            v7: '咨询如何报考摩托车驾驶咨询如',
-            v8: '咨询如何报考摩托车驾驶咨询如咨询如何报考摩托车驾驶咨询如',
-            v9: '咨询如何报考摩托车驾驶咨询如',
-            v10: '咨询如何报考摩托车驾驶咨询如'
-          },
-          {
-            name: '状态',
-            v1: '已办理',
-            v2: '已办理',
-            v3: '已办理',
-            v4: '已办理',
-            v5: '处理中',
-            v6: '已拒绝',
-            v7: '处理中',
-            v8: '待处理',
-            v9: '处理中',
-            v10: '处理中'
-          },
-          {
-            name: '查看',
-            v1: '详情>>',
-            v2: '详情>>',
-            v3: '详情>>',
-            v4: '详情>>',
-            v5: '详情>>',
-            v6: '详情>>',
-            v7: '详情>>',
-            v8: '详情>>',
-            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 }
-        ]
+        ],
-      }
+        reportHandleList: [],
-    },
+        colConfigs2: [
-
+          { slot: 'index' },
-    computed: {
+          { prop: 'name',  label: '姓名', align: 'center'  },
-      tableConfig () {
+          { prop: 'overCount',  label: '已办结', align: 'center', width: 60 },
-        return this.tableData.map((v, index) => {
+          { prop: 'handleCount', label: '办理中', align: 'center', width: 60 },
-          if (index === 4) {
+          { prop: 'reportCount', label: '上报数', align: 'center', width: 60 },
-            return {
+          {
-              color: '#d0e1e8',
+            prop: 'reportCount',
-              align: 'center',
+            label: '查看',
-              width: '',
+            align: 'center',
-              fontSize: '12px',
+            render: (h, params) => {
-              flex: '',
+              return h(
-              render: (h, params) => {
+                'p', {
-                return h(
+                  style: {
-                  'p', {
+                    width: '52px',
-                    style: {
+                    height: '22px',
-                      width: '52px',
+                    textAlign: 'center',
-                      height: '22px',
+                    lineHeight: '22px',
-                      textAlign: 'center',
+                    color: '#D4F2FF',
-                      lineHeight: '22px',
+                    cursor: 'pointer',
-                      color: '#D4F2FF',
+                    margin: '0 auto',
-                      cursor: 'pointer',
+                    borderRadius: '4px',
-                      margin: '0 auto',
+                    backgroundImage: 'linear-gradient(175deg, #02bcee99 0%, #0144d899 100%)'
-                      borderRadius: '4px',
+                  },
-                      backgroundImage: 'linear-gradient(175deg, #02bcee99 0%, #0144d899 100%)'
+                  on: {
-                    },
+                    click: e => {
-                    on: {
+                      console.log(params)
-                      click: e => {
+                    }
-                        console.log(params)
+                  },
-                      }
+                }, '联系TA'
-                    },
+              )
-                  }, params.column
-                )
-              }
             }
           }
-          return {
+        ],
-            color: '#d0e1e8',
+        colConfigs3: [
-            align: '',
+          { prop: 'createTime',  label: '时间', align: 'center', dateFormat: 'MM/DD'  },
-            width: index === 0 ? '100' : '',
+          { prop: 'desc',  label: '事件内容', align: 'left', width: 300 },
-            fontSize: '14px',
-            flex: ''
-          }
-        })
-      },
-
-      eventTableConfig () {
-        return [
           {
-            color: '#d0e1e8',
+            prop: 'status',
-            align: '',
+            label: '状态',
-            width: '',
-            fontSize: '14px',
-            flex: ''
-          },
-          {
-            color: '#d0e1e8',
-            align: 'left',
-            width: '250',
-            fontSize: '14px',
-            flex: ''
-          },
-          {
-            color: '#d0e1e8',
             align: 'center',
-            width: '',
-            fontSize: '14px',
-            flex: '',
             render: (h, params) => {
               return h(
                 'i', {
                   style: {
+                    display: 'inline-block',
+                    fontStyle: 'normal',
                     width: '52px',
                     height: '20px',
                     textAlgin: 'center',
                     lineHeight: '20px',
-                    color: '#07B794',
+                    color: this.mapStatus(params.row.status, 'color'),
                     margin: '0 auto',
                     borderRadius: '2px',
-                    background: 'rgba(19, 246, 201, 0.14)',
+                    background: this.mapStatus(params.row.status, 'bgColor'),
                   }
-                }, params.column
+                }, this.mapStatus(params.row.status, 'name')
               )
             }
           },
           {
-            color: '#00AAFF',
+            prop: 'reportCount',
-            align: '',
+            label: '联系TA',
-            width: '',
+            align: 'center',
-            fontSize: '14px',
+            render: (h, params) => {
-            flex: '',
+              return h(
-            click: e => {
+                'p', {
-              console.log(e)
+                  style: {
+                    color: '#00AAFF'
+                  },
+                  on: {
+                    click: e => {
+                      console.log(params)
+                    }
+                  },
+                }, '查看>>'
+              )
             }
           }
-        ]
+        ],
-      },
+        tableData3: [],
+        search: {
+          dateRange: '',
+          param: '',
+          source: '',
+          status: '',
+          categoryId: ''
+        },
+        eventList: []
+      }
+    },
 
+    computed: {
       chartData1 () {
         if (!this.wxGridReportOverviewInfo['上报来源分布+事件办理情况']) {
           return []
@@ -756,7 +548,7 @@
 
         return this.wxGridReportOverviewInfo['上报来源分布+事件办理情况'].map(v => {
           return {
-            name: v['月份'],
+            name: v['月份'] + '月',
             '警格上报': v['警格上报'],
             '居民上报': v['居民上报']
           }
@@ -770,7 +562,7 @@
 
         return this.wxGridReportOverviewInfo['上报来源分布+事件办理情况'].map(v => {
           return {
-            name: v['月份'],
+            name: v['月份'] + '月',
             '上报总数': v['上报数量'],
             '已办理': v['已拒绝数量'],
             '已拒绝': v['已拒绝数量']
@@ -810,11 +602,42 @@
     },
 
     mounted () {
-      this.getInfo()
+      this.instance.post(`/api/wxgridcata/list`, null, {
-      this.init()
+        params: {
+          level: 1,
+          corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.eventList = res.data.records
+          this.init()
+        }
+      })
     },
 
     methods: {
+      mapStatus (status, type) {
+        console.log(status)
+        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'
@@ -825,6 +648,7 @@
           }
         }).then(res => {
           if (res.code === 0) {
+            this.getInfo()
             if (gridId) {
               this.policeStationList = res.data
             } else {
@@ -832,16 +656,28 @@
             }
           }
         })
-
-        this.getInfo()
       },
 
       onStationChange () {
         this.$nextTick(() => {
-          this.getInfo()
+          this.instance.post(`/api/wxgridinfo/tree`, null, {
+            params: {
+              gridParentId: this.gridId,
+              corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
+            }
+          }).then(res => {
+            if (res.code === 0) {
+              this.getInfo()
+            }
+          })
         })
       },
 
+      onTypeChange (index) {
+        this.currIndex = index
+        this.getWxGridReportCata()
+      },
+
       onChange () {
         this.instance.post(`/api/wxgridinfo/wxGridReportNew`, null, {
           params: {
@@ -856,6 +692,42 @@
         })
       },
 
+      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,
+            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.chartData3 = res.data.map(v => {
+              return {
+                name: v['二级分类名称'],
+                '已办结': v['已办结'],
+                '待受理': v['待处理'],
+                '处理中': v['处理中'],
+                '已拒绝': v['已拒绝']
+              }
+            })
+          }
+        })
+      },
+
       getInfo () {
         this.instance.post(`/api/wxgridinfo/comprehensiveOverview`, null, {
           params: {
@@ -867,6 +739,23 @@
           }
         })
 
+        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.getReportList()
+
         this.instance.post(`/api/wxgridinfo/wxGridReportOverview`, null, {
           params: {
             corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
@@ -924,6 +813,25 @@
     background: #0c0c0c;
     overflow: hidden;
 
+    .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;
     }