From 03f97376ff9d57e4529b1389328d077bce6fe840 Mon Sep 17 00:00:00 2001
From: wangqing <smalljop@foxmail.com>
Date: Tue, 8 Jun 2021 18:43:52 +0800
Subject: [PATCH] fix

---
 src/components/HandleProcess/index.vue        |  65 ++++
 src/components/HandleProcess/process.js       |  19 +
 src/main.js                                   |   3 +-
 .../statistics/chart.vue}                     | 164 +++-----
 src/views/form/statistics/index.vue           | 335 +----------------
 src/views/form/statistics/list.vue            | 350 ++++++++++++++++++
 src/views/home/HomeView.vue                   |   2 +-
 src/views/official/index.vue                  |  15 +-
 src/views/test.vue                            |  13 +-
 9 files changed, 536 insertions(+), 430 deletions(-)
 create mode 100644 src/components/HandleProcess/index.vue
 create mode 100644 src/components/HandleProcess/process.js
 rename src/views/{home/dashboard.vue => form/statistics/chart.vue} (72%)
 create mode 100644 src/views/form/statistics/list.vue

diff --git a/src/components/HandleProcess/index.vue b/src/components/HandleProcess/index.vue
new file mode 100644
index 0000000..ceab6f4
--- /dev/null
+++ b/src/components/HandleProcess/index.vue
@@ -0,0 +1,65 @@
+<template>
+    <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        :before-close="handleClose"
+        width="30%"
+    >
+        <p style="text-align: center; color: #a1a1a1;">{{ percentage >= 100 ? completeMessage : message }}</p>
+        <el-progress :percentage="percentage" />
+        <el-link v-if="downloadUrl" :href="downloadUrl" type="primary">
+            下载地址
+        </el-link>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    name: 'HandleProcess',
+    props: {},
+    data() {
+        return {
+            completeMessage: '已完成',
+            message: '处理中',
+            downloadUrl: '',
+            key: '',
+            timer: null,
+            percentage: 0,
+            dialogVisible: true
+        }
+    },
+    created() {
+        this.getHandleProcess()
+        this.timer = setInterval(() => {
+            this.getHandleProcess()
+        }, 5000)
+    },
+    destroyed() {
+        clearInterval(this.timer)
+    },
+    methods: {
+        /**
+         * 获取处理进去
+         */
+        getHandleProcess() {
+            this.$api.get(`/common/process?key=${this.key}`).then(res => {
+                let {rate, url} = res.data
+                if (rate) {
+                    this.percentage = rate
+                }
+                if (url) {
+                    this.downloadUrl = url
+                    clearInterval(this.timer)
+                }
+            })
+        },
+        handleClose() {
+            clearInterval(this.timer)
+            this.$destroy(true)
+            this.$el.parentNode.removeChild(this.$el)
+        }
+    }
+
+}
+</script>
+
diff --git a/src/components/HandleProcess/process.js b/src/components/HandleProcess/process.js
new file mode 100644
index 0000000..d273aec
--- /dev/null
+++ b/src/components/HandleProcess/process.js
@@ -0,0 +1,19 @@
+// 参考文章
+// https://www.jianshu.com/p/514122716e38
+// https://www.cnblogs.com/shandou/p/13812538.html
+import Vue from 'vue' // 引入 Vue 是因为要用到 Vue.extend() 这个方法
+import process from './index.vue' // 引入刚才的 toast 组件
+
+let processConstructor = Vue.extend(process)
+let instance
+
+const Process = function(options = {}) {
+    instance = new processConstructor({
+        data: options // 这里的 data 会传到 message.vue 组件中的 data 中，当然也可以写在 props 里
+    })
+    document.body.appendChild(instance.$mount().$el) // 挂载到 body 下
+    Vue.nextTick(() => {
+        instance.visible = true
+    })
+}
+export default Process
diff --git a/src/main.js b/src/main.js
index e524e35..bc8cd91 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,6 +15,7 @@ import '@/utils/plugins'
 // 全局组件自动注册
 import '@/components/autoRegister'
 import VueClipboard from 'vue-clipboard2'
+import Process from '@/components/HandleProcess/process'
 Vue.prototype.$api = api
 Vue.prototype.$dayjs = dayjs
 Vue.prototype.$store = store
@@ -31,7 +32,7 @@ Vue.prototype.msgWarning = function(msg) {
 Vue.prototype.msgInfo = function(msg) {
     this.$message.info(msg)
 }
-
+Vue.prototype.$process = Process
 Vue.use(VueClipboard)
 Vue.use(meta)
 Vue.use(Element, {size: 'small', zIndex: 3000})
diff --git a/src/views/home/dashboard.vue b/src/views/form/statistics/chart.vue
similarity index 72%
rename from src/views/home/dashboard.vue
rename to src/views/form/statistics/chart.vue
index b27401a..39f76ad 100644
--- a/src/views/home/dashboard.vue
+++ b/src/views/form/statistics/chart.vue
@@ -1,85 +1,55 @@
 <template>
     <div class="dashboard-container">
-        <div class="left-view">
-            <div class="project-select-view">
-                <div style="width: 140px;">
-                    <p class="tag-title">回收概览</p>
-                </div>
-                <div style="margin-left: 30px;">
-                    <el-select v-model="activeProjectKey"
-                               placeholder="请选择"
-                               @change="projectChangeHandle"
-                    >
-                        <el-option
-                            v-for="item in projectListData"
-                            :key="item.key"
-                            :label="item.name"
-                            :value="item.key"
-                        />
-                    </el-select>
-                </div>
-            </div>
-            <div class="project-collect-view">
-                <div class="project-index-view">
-                    <div style="display: flex;
-                    width: 80%;
-                    text-align: center;
-                    margin: 0 auto;
-                    justify-content: space-between;"
-                    >
-                        <div>
-                            <p style="text-align: center;">有效回收量</p>
-                            <count-to :end-val="projectStats.completeCount"
-                                      style="font-size: 20px;"
-                            />
-                        </div>
-                        <div>
-                            <p>总浏览量</p>
-                            <count-to :end-val="projectStats.viewCount" style="font-size: 20px;" />
-                        </div>
-                        <div>
-                            <p>回收率</p>
-                            <count-to :end-val="projectStats.completeRate" style="font-size: 20px;" />
-                            %
-                        </div>
-                        <div>
-                            <p>平均完成时间</p>
-                            <span style="font-size: 20px;">
-                                {{ projectStats.avgCompleteFormatStr }}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <line-chart :chart-option="lineChartOptionData" />
-                </div>
+        <div class="project-select-view">
+            <div style="width: 140px;">
+                <p class="tag-title">回收概览</p>
             </div>
         </div>
-        <div class="right-view">
-            <div style="width: 230px;">
-                <p class="tag-title">表单提交地域分布图</p>
-            </div>
-            <div style="width: 460px;">
-                <map-chart :chart-option="mapChartOptionData" :height="'250px'" />
-            </div>
-            <div style="display: flex; flex-direction: row; justify-content: space-around;">
-                <div style="width: 364px;">
-                    <div style="width: 120px;">
-                        <p class="tag-title">常用设备</p>
+        <div v-if="false" class="project-collect-view">
+            <div class="project-index-view">
+                <div>
+                    <div>
+                        <p style="text-align: center;">有效回收量</p>
+                        <count-to :end-val="projectStats.completeCount"
+                                  style="font-size: 20px;"
+                        />
                     </div>
                     <div>
-                        <pie-chart :chart-option="pieChartOptionData" :height="'250px'" />
+                        <p>总浏览量</p>
+                        <count-to :end-val="projectStats.viewCount" style="font-size: 20px;" />
                     </div>
-                </div>
-                <div style="width: 50%;">
-                    <div style="width: 120px;">
-                        <p class="tag-title">来源渠道</p>
+                    <div>
+                        <p>回收率</p>
+                        <count-to :end-val="projectStats.completeRate" style="font-size: 20px;" />
+                        %
                     </div>
                     <div>
-                        <bar-chart :chart-option="barChartOptionData" :height="'250px'" />
+                        <p>平均完成时间</p>
+                        <span style="font-size: 20px;">
+                            {{ projectStats.avgCompleteFormatStr }}
+                        </span>
                     </div>
                 </div>
             </div>
+            <div>
+                <line-chart :chart-option="lineChartOptionData" />
+            </div>
+        </div>
+        <p class="tag-title">表单提交地域分布图</p>
+        <map-chart v-if="false" :chart-option="mapChartOptionData" :height="'450px'" />
+        <div style="display: flex; flex-direction: row; justify-content: space-around;">
+            <div style="width: 50%;">
+                <p class="tag-title">常用设备</p>
+                <div>
+                    <pie-chart :chart-option="pieChartOptionData" :height="'250px'" />
+                </div>
+            </div>
+            <div style="width: 50%;">
+                <p class="tag-title">来源渠道</p>
+                <div>
+                    <bar-chart :chart-option="barChartOptionData" :height="'250px'" />
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -89,10 +59,10 @@ import LineChart from '@/components/echarts/LineChart'
 import MapChart from '@/components/echarts/MapChart'
 import CountTo from '@/components/CountTo'
 import BarChart from '@/components/echarts/BarChart'
-import {timeFormat} from '@/utils/index'
+import {timeFormat} from '@/utils'
 
 export default {
-    name: 'HomeDashboard',
+    name: 'StatisticsChart',
     components: {
         CountTo,
         MapChart,
@@ -186,14 +156,13 @@ export default {
                         name: '提交数',
                         type: 'map',
                         mapType: 'china',
-                        zoom: 1.2,
+                        zoom: 1.4,
                         roam: false,
                         label: {
                             show: false,
                             color: 'rgb(0,0,0)'
                         },
-                        data: [
-                        ]
+                        data: []
                     }
                 ]
             },
@@ -273,13 +242,9 @@ export default {
         }
     },
     created() {
-        this.$api.get('/user/project/list', {params: {status: 2}}).then(res => {
-            this.projectListData = res.data
-            if (res.data && res.data[0]) {
-                this.activeProjectKey = res.data[0].key
-                this.projectChangeHandle()
-            }
-        })
+        this.activeProjectKey = this.$route.query.key
+        this.projectChangeHandle()
+
     }, methods: {
         projectChangeHandle() {
             this.getProjectStats()
@@ -370,35 +335,24 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .dashboard-container {
-    min-width: 980px;
-    display: flex;
-    align-content: center;
-    margin: 35px auto;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
+    width: 100%;
+    margin: 0;
+    padding: 0;
 }
 .tag-title {
     font-size: 20px;
-    border-bottom: 3px solid rgba(68, 68, 68, 100);
     line-height: 25px;
     margin: 10px;
 }
-.project-select-view {
-    display: flex;
-    align-content: center;
-    align-items: center;
-}
-.project-collect-view {
-    width: 730px;
-    height: 500px;
-    border-radius: 10px;
-    border: 1px solid rgba(187, 187, 187, 100);
-}
-.right-view {
-    display: flex;
-    flex-direction: column;
-    min-width: 40%;
+.project-index-view {
+    & > div {
+        display: flex;
+        width: 80%;
+        text-align: center;
+        margin: 0 auto;
+        justify-content: space-between;
+    }
 }
 </style>
diff --git a/src/views/form/statistics/index.vue b/src/views/form/statistics/index.vue
index a082b39..af54659 100644
--- a/src/views/form/statistics/index.vue
+++ b/src/views/form/statistics/index.vue
@@ -1,339 +1,44 @@
 <template>
-    <div class="statistics-container">
-        <div class="filter-table-view">
-            <el-form ref="filterForm" :inline="true">
-                <el-form-item label="提交时间" prop="endDateTime">
-                    <el-date-picker
-                        v-model="queryConditions.beginDateTime"
-                        placeholder="开始时间"
-                        type="datetime"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                    />
-                    <span> 至 </span>
-                    <el-date-picker
-                        v-model="queryConditions.endDateTime"
-                        :default-time="'23:59:59'"
-                        placeholder="结束时间"
-                        type="datetime"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                    />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="queryProjectResult">查询</el-button>
-                    <el-button type="primary" @click="customFilterDialogVisible=true">条件</el-button>
-                    <el-button type="success" @click="exportProjectResult">导出</el-button>
-                    <el-button type="success" @click="exportProjectResult">下载附件</el-button>
-                </el-form-item>
-            </el-form>
-        </div>
-        <div class="result-table-view">
-            <el-table
-                :data="projectResultList"
-                header-cell-class-name="data-table-header"
-                stripe
-                @row-dblclick="(row, column, event)=>{
-                    this.openDetailDrawerHandle(row)
-                }"
-            >
-                <el-table-column
-                    type="selection"
-                    width="55"
-                />
-                <el-table-column
-                    v-for="col in fixedCustomColumns" :key="`t${col}`"
-                    :label="fixedDefaultLabelFormColumn[col]"
-                >
-                    <template slot-scope="scope">
-                        {{ scope.row[col] }}
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    v-for="col in otherCustomColumns"
-                    :key="col" :label="projectItemColumns[col]"
-                    show-overflow-tooltip
-                >
-                    <template slot-scope="scope">
-                        {{ scope.row['processData'][col] }}
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    :render-header="renderHeader"
-                    fixed="right"
-                    width="50"
-                >
-                    <template slot-scope="scope">
-                        <el-button size="small" type="text" @click="openDetailDrawerHandle(scope.row)">查看</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <el-drawer
-                v-if="activeResultRow"
-                :visible.sync="detailDrawer"
-                :with-header="false"
-            >
-                <el-scrollbar style="height: 100%;">
-                    <el-card class="detail-container">
-                        <div slot="header" class="clearfix">
-                            <span>提交详情</span>
-                        </div>
-                        <div>
-                            <div v-for="item in projectItemList" :key="item.id">
-                                <h4>{{ item.label }}</h4>
-                                <result-item :field-item-id="item.formItemId" :project-item-data="item"
-                                             :result-data="activeResultRow"
-                                />
-                                <el-divider />
-                            </div>
-                        </div>
-                    </el-card>
-                </el-scrollbar>
-            </el-drawer>
-            <div style="display: flex; justify-content: center; margin-top: 10px;">
-                <el-pagination
-                    v-if="total>10"
-                    :current-page.sync="queryConditions.current"
-                    :page-size.sync="queryConditions.size"
-                    :total="total"
-                    background
-                    layout="total, prev, pager, next"
-                    @current-change="queryProjectResult"
-                />
-            </div>
-        </div>
-        <div class="custom-col-container">
-            <el-dialog :visible.sync="customColumnDialogVisible" center title="自定义显示列">
-                <el-row>
-                    <el-col :span="3">
-                        <span>显示列：</span>
-                    </el-col>
-                </el-row>
-                <el-divider />
-                <el-checkbox-group v-model="checkedFixedCustomColumns">
-                    <el-row>
-                        <el-col v-for="(val, key) in fixedDefaultLabelFormColumn" :key="key" :span="4">
-                            <el-checkbox :label="key">{{ val }}</el-checkbox>
-                        </el-col>
-                    </el-row>
-                </el-checkbox-group>
-                <el-divider />
-                <el-checkbox-group v-model="checkOtherCustomColumns">
-                    <el-row>
-                        <el-col v-for="(val, key) in projectItemColumns" :key="key" :span="8">
-                            <el-checkbox :label="key">{{ val }}</el-checkbox>
-                        </el-col>
-                    </el-row>
-                </el-checkbox-group>
-                <span slot="footer" class="dialog-footer">
-                    <el-button @click="customColumnDialogVisible = false">取 消</el-button>
-                    <el-button type="primary" @click="saveStatisticsCheckedColumns">确 定</el-button>
-                </span>
-            </el-dialog>
-        </div>
-        <el-dialog :visible.sync="customFilterDialogVisible" center title="结构化筛选">
-            <div class="flex-center">
-                <el-transfer
-                    v-model="checkedFilterColumns"
-                    filterable
-                    :props="{
-                        key: 'formItemId',
-                        label: 'label'
-                    }"
-                    filter-placeholder="请输入问题名称"
-                    :data="projectItemList"
-                />
-            </div>
-            <span slot="footer" class="dialog-footer">
-                <el-button @click="customColumnDialogVisible = false">取 消</el-button>
-                <el-button type="primary" @click="saveStatisticsCheckedColumns">确 定</el-button>
-            </span>
-        </el-dialog>
+    <div class="statistics-tabs">
+        <el-tabs v-model="activeName" type="border-card">
+            <el-tab-pane label="列表视图" name="list">
+                <list />
+            </el-tab-pane>
+            <el-tab-pane label="统计视图" name="chart">
+                <chart />
+            </el-tab-pane>
+        </el-tabs>
     </div>
 </template>
 
 <script>
-import _ from 'lodash'
-import ResultItem from './item'
-import {getCheckedColumn, saveCheckedColumn} from '@/utils/db'
-
-const fixedDefaultFormColumn = ['serialNumber', 'submitAddress', 'createTime']
-const fixedDefaultLabelFormColumn = {serialNumber: '提交序号', submitAddress: '提交地址', createTime: '提交时间'}
-
+import list from './list'
+import chart from './chart'
 export default {
     name: 'ProjectStatistics',
     components: {
-        ResultItem
+        list,
+        chart
     },
     data() {
         return {
-            projectKey: null,
-            customFilterDialogVisible: false,
-            customColumnDialogVisible: false,
-            checkedFilterColumns: [],
-            // 固定自定义列 如序号等
-            fixedCustomColumns: fixedDefaultFormColumn,
-            // 选中的
-            checkedFixedCustomColumns: fixedDefaultFormColumn,
-            fixedDefaultLabelFormColumn: fixedDefaultLabelFormColumn,
-            // 自定义表单属性
-            checkOtherCustomColumns: [],
-            otherCustomColumns: [],
-            projectResultList: [],
-            projectItemList: [],
-            projectData: null,
-            projectItemColumns: {},
-            total: 0,
-            detailDrawer: false,
-            activeResultRow: null,
-            // 查询条件
-            queryConditions: {
-                current: 1,
-                size: 10,
-                projectKey: '',
-                beginDateTime: '',
-                endDateTime: ''
-            }
+            activeName: 'chart'
         }
     },
     mounted() {
-        this.projectKey = this.$route.query.key
-        this.queryConditions.projectKey = this.projectKey
-        this.queryProjectResult()
-        this.queryProjectItems()
-        this.queryProject()
-    }, methods: {
-        renderHeader() {
-            return (
-                <i class="el-icon-setting" style="color:currentColor"
-                    onClick={() => this.customColumnDialogVisible = true}></i>
-            )
-        },
 
-        openDetailDrawerHandle(row) {
-            this.activeResultRow = row
-            this.detailDrawer = true
-        },
-        queryProject() {
-            this.$api.get(`/user/project/${this.projectKey}`).then(res => {
-                this.projectData = res.data
-            })
-        },
-        queryProjectResult() {
-            this.$api.get('/user/project/result/page', {params: this.queryConditions}).then(res => {
-                let {records, total, size} = res.data
-                this.projectResultList = records
-                this.total = total
-                this.queryConditions.size = size
-            })
-        },
-        saveStatisticsCheckedColumns() {
-            this.customColumnDialogVisible = false
-            this.fixedCustomColumns = this.checkedFixedCustomColumns
-            this.otherCustomColumns = this.checkOtherCustomColumns
-            saveCheckedColumn(this.projectKey, {
-                fixedCustomColumns: this.fixedCustomColumns,
-                otherCustomColumns: this.otherCustomColumns
-            })
-        },
-        getDbCheckedColumns() {
-            let checkedColumn = getCheckedColumn(this.projectKey)
-            if (!checkedColumn) {
-                return
-            }
-            let {fixedCustomColumns, otherCustomColumns} = checkedColumn
-            if (fixedCustomColumns) {
-                this.fixedCustomColumns = fixedCustomColumns
-                this.checkedFixedCustomColumns = fixedCustomColumns
-            }
-            if (otherCustomColumns) {
-                this.otherCustomColumns = otherCustomColumns
-                this.checkOtherCustomColumns = otherCustomColumns
-            }
-        },
-        exportProjectResult() {
-            if (!this.total) {
-                this.$message.error('无表单有效反馈结果，无法导出')
-                return
-            }
-            this.$api.get('user/project/result/export', {
-                params: this.queryConditions,
-                responseType: 'blob'
-            }).then(res => {
-                let blob = res
-                let downloadElement = document.createElement('a')
-                let href = window.URL.createObjectURL(blob) // 创建下载的链接
-                downloadElement.href = href
-                downloadElement.download = this.projectData.name + this.$dayjs().format('YYYYMMDDHHMM') + '.xls' // 下载后文件名
-                document.body.appendChild(downloadElement)
-                downloadElement.click() // 点击下载
-                document.body.removeChild(downloadElement) // 下载完成移除元素
-                window.URL.revokeObjectURL(href) // 释放掉blob对象
-            })
-        },
-        queryProjectItems() {
-            this.$api.get('/user/project/item/list', {params: {key: this.projectKey, displayType: false}}).then(res => {
-                if (res.data) {
-                    res.data.map(item => {
-                        _.set(this.projectItemColumns, `field${item.formItemId}`, item.label)
-                    })
-                }
-                this.projectItemList = res.data
-                this.getDbCheckedColumns()
-            })
-        }
-    }
+    }, methods: {}
 
 }
 </script>
 
 <style scoped>
-.statistics-container {
+.statistics-tabs {
+    padding: 20px;
     width: 100%;
     height: 100%;
-    padding-top: 30px;
-    min-height: 85vh;
-    background-color: #f7f7f7;
-}
-.custom-col-container >>> .el-checkbox__label {
-    width: 200px;
-    min-height: 25px;
-    line-height: 25px;
-    vertical-align: middle;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-.result-table-view {
-    width: 80%;
-    margin: 6px auto;
-}
-.detail-container {
-    padding: 20px;
-    height: 100% !important;
-}
-.filter-table-view {
-    width: 80%;
-    margin: 0 auto;
-}
-::v-deep .el-icon-setting {
-    font-size: 24px;
-    line-height: 25px;
-    color: white;
-}
-::v-deep .data-table-header .cell {
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
-}
-
-/* 1.显示滚动条：当内容超出容器的时候，可以拖动： */
-::v-deep .el-drawer__body {
-    overflow: auto;
-
-    /* overflow-x: auto; */
-}
-
-/* 2.隐藏滚动条，太丑了 */
-::v-deep .el-drawer__container ::-webkit-scrollbar {
-    display: none;
+    .el-tab-pane {
+        height: 100%;
+    }
 }
-
 </style>
diff --git a/src/views/form/statistics/list.vue b/src/views/form/statistics/list.vue
new file mode 100644
index 0000000..5a6d074
--- /dev/null
+++ b/src/views/form/statistics/list.vue
@@ -0,0 +1,350 @@
+<template>
+    <div class="statistics-container">
+        <div class="filter-table-view">
+            <el-form ref="filterForm" :inline="true">
+                <el-form-item label="提交时间" prop="endDateTime">
+                    <el-date-picker
+                        v-model="queryConditions.beginDateTime"
+                        placeholder="开始时间"
+                        type="datetime"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                    />
+                    <span> 至 </span>
+                    <el-date-picker
+                        v-model="queryConditions.endDateTime"
+                        :default-time="'23:59:59'"
+                        placeholder="结束时间"
+                        type="datetime"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                    />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="queryProjectResult">查询</el-button>
+                    <el-button type="primary" @click="customFilterDialogVisible=true">条件</el-button>
+                    <el-button type="success" @click="exportProjectResult">导出</el-button>
+                    <el-button type="success" @click="downloadProjectResultFile">下载附件</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div class="result-table-view">
+            <el-table
+                :data="projectResultList"
+                header-cell-class-name="data-table-header"
+                stripe
+                @row-dblclick="(row, column, event)=>{
+                    this.openDetailDrawerHandle(row)
+                }"
+            >
+                <el-table-column
+                    type="selection"
+                    width="55"
+                />
+                <el-table-column
+                    v-for="col in fixedCustomColumns" :key="`t${col}`"
+                    :label="fixedDefaultLabelFormColumn[col]"
+                >
+                    <template slot-scope="scope">
+                        {{ scope.row[col] }}
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    v-for="col in otherCustomColumns"
+                    :key="col" :label="projectItemColumns[col]"
+                    show-overflow-tooltip
+                >
+                    <template slot-scope="scope">
+                        {{ scope.row['processData'][col] }}
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    :render-header="renderHeader"
+                    fixed="right"
+                    width="50"
+                >
+                    <template slot-scope="scope">
+                        <el-button size="small" type="text" @click="openDetailDrawerHandle(scope.row)">查看</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-drawer
+                v-if="activeResultRow"
+                :visible.sync="detailDrawer"
+                :with-header="false"
+            >
+                <el-scrollbar style="height: 100%;">
+                    <el-card class="detail-container">
+                        <div slot="header" class="clearfix">
+                            <span>提交详情</span>
+                        </div>
+                        <div>
+                            <div v-for="item in projectItemList" :key="item.id">
+                                <h4>{{ item.label }}</h4>
+                                <result-item :field-item-id="item.formItemId" :project-item-data="item"
+                                             :result-data="activeResultRow"
+                                />
+                                <el-divider />
+                            </div>
+                        </div>
+                    </el-card>
+                </el-scrollbar>
+            </el-drawer>
+            <div style="display: flex; justify-content: center; margin-top: 10px;">
+                <el-pagination
+                    v-if="total>10"
+                    :current-page.sync="queryConditions.current"
+                    :page-size.sync="queryConditions.size"
+                    :total="total"
+                    background
+                    layout="total, prev, pager, next"
+                    @current-change="queryProjectResult"
+                />
+            </div>
+        </div>
+        <div class="custom-col-container">
+            <el-dialog :visible.sync="customColumnDialogVisible" center title="自定义显示列">
+                <el-row>
+                    <el-col :span="3">
+                        <span>显示列：</span>
+                    </el-col>
+                </el-row>
+                <el-divider />
+                <el-checkbox-group v-model="checkedFixedCustomColumns">
+                    <el-row>
+                        <el-col v-for="(val, key) in fixedDefaultLabelFormColumn" :key="key" :span="4">
+                            <el-checkbox :label="key">{{ val }}</el-checkbox>
+                        </el-col>
+                    </el-row>
+                </el-checkbox-group>
+                <el-divider />
+                <el-checkbox-group v-model="checkOtherCustomColumns">
+                    <el-row>
+                        <el-col v-for="(val, key) in projectItemColumns" :key="key" :span="8">
+                            <el-checkbox :label="key">{{ val }}</el-checkbox>
+                        </el-col>
+                    </el-row>
+                </el-checkbox-group>
+                <span slot="footer" class="dialog-footer">
+                    <el-button @click="customColumnDialogVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="saveStatisticsCheckedColumns">确 定</el-button>
+                </span>
+            </el-dialog>
+        </div>
+        <el-dialog :visible.sync="customFilterDialogVisible" center title="结构化筛选">
+            <div class="flex-center">
+                <el-transfer
+                    v-model="checkedFilterColumns"
+                    filterable
+                    :props="{
+                        key: 'formItemId',
+                        label: 'label'
+                    }"
+                    filter-placeholder="请输入问题名称"
+                    :data="projectItemList"
+                />
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="customColumnDialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="saveStatisticsCheckedColumns">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import ResultItem from './item'
+import {getCheckedColumn, saveCheckedColumn} from '@/utils/db'
+
+const fixedDefaultFormColumn = ['serialNumber', 'submitAddress', 'createTime']
+const fixedDefaultLabelFormColumn = {serialNumber: '提交序号', submitAddress: '提交地址', createTime: '提交时间'}
+
+export default {
+    name: 'ProjectStatisticsList',
+    components: {
+        ResultItem
+    },
+    data() {
+        return {
+            projectKey: null,
+            customFilterDialogVisible: false,
+            customColumnDialogVisible: false,
+            checkedFilterColumns: [],
+            // 固定自定义列 如序号等
+            fixedCustomColumns: fixedDefaultFormColumn,
+            // 选中的
+            checkedFixedCustomColumns: fixedDefaultFormColumn,
+            fixedDefaultLabelFormColumn: fixedDefaultLabelFormColumn,
+            // 自定义表单属性
+            checkOtherCustomColumns: [],
+            otherCustomColumns: [],
+            projectResultList: [],
+            projectItemList: [],
+            projectData: null,
+            projectItemColumns: {},
+            total: 0,
+            detailDrawer: false,
+            activeResultRow: null,
+            // 查询条件
+            queryConditions: {
+                current: 1,
+                size: 10,
+                projectKey: '',
+                beginDateTime: '',
+                endDateTime: ''
+            }
+        }
+    },
+    mounted() {
+        this.projectKey = this.$route.query.key
+        this.queryConditions.projectKey = this.projectKey
+        this.queryProjectResult()
+        this.queryProjectItems()
+        this.queryProject()
+    }, methods: {
+        renderHeader() {
+            return (
+                <i class="el-icon-setting" style="color:currentColor"
+                    onClick={() => this.customColumnDialogVisible = true}></i>
+            )
+        },
+
+        openDetailDrawerHandle(row) {
+            this.activeResultRow = row
+            this.detailDrawer = true
+        },
+        queryProject() {
+            this.$api.get(`/user/project/${this.projectKey}`).then(res => {
+                this.projectData = res.data
+            })
+        },
+        queryProjectResult() {
+            this.$api.get('/user/project/result/page', {params: this.queryConditions}).then(res => {
+                let {records, total, size} = res.data
+                this.projectResultList = records
+                this.total = total
+                this.queryConditions.size = size
+            })
+        },
+        saveStatisticsCheckedColumns() {
+            this.customColumnDialogVisible = false
+            this.fixedCustomColumns = this.checkedFixedCustomColumns
+            this.otherCustomColumns = this.checkOtherCustomColumns
+            saveCheckedColumn(this.projectKey, {
+                fixedCustomColumns: this.fixedCustomColumns,
+                otherCustomColumns: this.otherCustomColumns
+            })
+        },
+        getDbCheckedColumns() {
+            let checkedColumn = getCheckedColumn(this.projectKey)
+            if (!checkedColumn) {
+                return
+            }
+            let {fixedCustomColumns, otherCustomColumns} = checkedColumn
+            if (fixedCustomColumns) {
+                this.fixedCustomColumns = fixedCustomColumns
+                this.checkedFixedCustomColumns = fixedCustomColumns
+            }
+            if (otherCustomColumns) {
+                this.otherCustomColumns = otherCustomColumns
+                this.checkOtherCustomColumns = otherCustomColumns
+            }
+        },
+        downloadProjectResultFile() {
+            if (!this.total) {
+                this.$message.error('无附件，无法导出')
+                return
+            }
+            this.$api.get('/user/project/result/download/file', {
+                params: this.queryConditions
+            }).then(res => {
+                this.$process({
+                    message: '附件导出中',
+                    key: res.data
+                })
+            })
+        },
+        exportProjectResult() {
+            if (!this.total) {
+                this.$message.error('无表单有效反馈结果，无法导出')
+                return
+            }
+            this.$api.get('user/project/result/export', {
+                params: this.queryConditions,
+                responseType: 'blob'
+            }).then(res => {
+                let blob = res
+                let downloadElement = document.createElement('a')
+                let href = window.URL.createObjectURL(blob) // 创建下载的链接
+                downloadElement.href = href
+                downloadElement.download = this.projectData.name + this.$dayjs().format('YYYYMMDDHHMM') + '.xls' // 下载后文件名
+                document.body.appendChild(downloadElement)
+                downloadElement.click() // 点击下载
+                document.body.removeChild(downloadElement) // 下载完成移除元素
+                window.URL.revokeObjectURL(href) // 释放掉blob对象
+            })
+        },
+        queryProjectItems() {
+            this.$api.get('/user/project/item/list', {params: {key: this.projectKey, displayType: false}}).then(res => {
+                if (res.data) {
+                    res.data.map(item => {
+                        _.set(this.projectItemColumns, `field${item.formItemId}`, item.label)
+                    })
+                }
+                this.projectItemList = res.data
+                this.getDbCheckedColumns()
+            })
+        }
+    }
+
+}
+</script>
+
+<style scoped>
+.statistics-container {
+    width: 100%;
+    height: 100%;
+}
+.custom-col-container >>> .el-checkbox__label {
+    width: 200px;
+    min-height: 25px;
+    line-height: 25px;
+    vertical-align: middle;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.result-table-view {
+    width: 80%;
+    margin: 6px auto;
+}
+.detail-container {
+    padding: 20px;
+    height: 100% !important;
+}
+.filter-table-view {
+    width: 80%;
+    margin: 0 auto;
+}
+::v-deep .el-icon-setting {
+    font-size: 24px;
+    line-height: 25px;
+    color: white;
+}
+::v-deep .data-table-header .cell {
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+}
+
+/* 1.显示滚动条：当内容超出容器的时候，可以拖动： */
+::v-deep .el-drawer__body {
+    overflow: auto;
+
+    /* overflow-x: auto; */
+}
+
+/* 2.隐藏滚动条，太丑了 */
+::v-deep .el-drawer__container ::-webkit-scrollbar {
+    display: none;
+}
+
+</style>
diff --git a/src/views/home/HomeView.vue b/src/views/home/HomeView.vue
index a664401..5bf24c0 100644
--- a/src/views/home/HomeView.vue
+++ b/src/views/home/HomeView.vue
@@ -19,7 +19,7 @@
 
 <script>
 import HomeFunction from './HomButton'
-import Dashboard from './dashboard'
+import Dashboard from '../form/statistics/chart'
 
 export default {
     name: 'HomeView',
diff --git a/src/views/official/index.vue b/src/views/official/index.vue
index 3dc01f1..f05cbbe 100644
--- a/src/views/official/index.vue
+++ b/src/views/official/index.vue
@@ -306,6 +306,7 @@ body {
             line-height: 43px;
         }
         .right img {
+            padding-top: 30px;
             height: 540px;
             width: 375px;
         }
@@ -404,6 +405,9 @@ body {
     align-content: center;
     align-items: center;
     justify-content: flex-start;
+    div {
+        margin: 10px 3px;
+    }
     img {
         margin-right: 30px;
     }
@@ -415,27 +419,28 @@ body {
     background: linear-gradient(163deg, rgba(32, 84, 241, 0.67), rgba(34, 78, 243, 0.67), rgba(56, 234, 255, 0.67));
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: space-evenly;
     .top {
         display: flex;
         flex-direction: row;
         justify-content: space-evenly;
-        text-align: center;
+        text-align: left;
         .title {
-            font-size: 25px;
+            font-size: 20px;
             font-weight: bold;
             color: #fff;
             line-height: 60px;
+            text-align: left;
         }
         .desc {
-            font-size: 16px;
+            font-size: 12px;
             font-weight: 300;
             color: #fff;
             line-height: 20px;
             max-width: 292px;
         }
         a {
-            font-size: 16px;
+            font-size: 12px;
             font-weight: 300;
             color: #fff;
             cursor: pointer;
diff --git a/src/views/test.vue b/src/views/test.vue
index 2ce2328..1bfeadb 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -5,6 +5,8 @@
         <province-city />
         <input-map />
         <phone-verification />
+        <el-button @click="test">测试</el-button>
+        <!--        <handle-process />-->
     </div>
 </template>
 
@@ -15,10 +17,12 @@ import ProvinceCity from '@/components/form/ProvinceCity'
 
 import InputMap from '@/components/form/InputMap/index'
 import PhoneVerification from '@/components/form/PhoneVerification/index'
+// import HandleProcess from '@/components/HandleProcess'
 
 export default {
     name: 'App',
     components: {
+        // HandleProcess,
         ProvinceCity,
         PhoneVerification,
         SignPad,
@@ -26,13 +30,16 @@ export default {
         InputMap
     },
     data() {
-        return {
-        }
+        return {}
     },
     mounted() {
     },
     methods: {
-
+        test() {
+            this.$process({
+                message: '处理中'
+            })
+        }
     }
 }
 </script>