fix

README.md

@@ -1,19 +1,46 @@
-# tduck-front
+# Tduck-WEB
 
-## 这是什么
+![s8sdOO.png](https://s3.ax1x.com/2021/01/11/s8sdOO.png)
+TDuck 前端源码
 
-tduck-front 前端项目
+#### 项目源码
 
-## 特点
+|   后端源码  |   前端源码  |
+|--- | --- |
+|  https://gitee.com/TDuckApp/tduck-platform   |  https://gitee.com/TDuckApp/tduck-front   |
 
-- 默认集成 vue-router 和 vuex
-- 全局 SASS 资源自动引入
-- 精灵图自动生成
-- 全局组件自动注册
-- CDN支持，优化打包体积
-- 轻松实现团队代码规范
 
-## 目录简介
+#### Build Setup
+``` bash
+# 配置镜像加速
+https://www.ydyno.com/archives/1219.html
+
+# 安装依赖
+npm install
+
+# 启动服务 localhost:8013
+npm run serve
+
+# 构建生产环境
+npm run build
+```
+
+#### 常见问题
+
+1、linux 系统在安装依赖的时候会出现 node-sass 无法安装的问题
+
+解决方案：
+```
+1. 单独安装：npm install --unsafe-perm node-sass 
+2. 直接使用：npm install --unsafe-perm
+```
+
+2、加速node-sass安装
+
+https://www.ydyno.com/archives/1219.html
+
+
+####  目录简介
 - api axios 封装
 - assets 静态资源
 - components 公共组件
@@ -22,3 +49,16 @@ tduck-front 前端项目
 - theme elementui主题
 - util 工具类
 - views 页面
+
+
+#### 特别鸣谢
+
+
+- 感谢 (https://gitee.com/eoner/vue-automation) 前端脚手架
+
+- 感谢 (https://gitee.com/TDuckApp/form-generator) 表单生成器
+
+
+
+
+

src/api/index.js

@@ -77,8 +77,12 @@ api.interceptors.response.use(
                         confirmButtonText: '重新登录',
                         cancelButtonText: '取消',
                         type: 'warning'
-                    }).then(() => {
+                    }).then(() => {     // 重置状态
+                        this.$store.dispatch('global/loginExpired', false).then(() => {
+                        })
                         toLogin()
+                    }).catch(() => {
+
                     })
                 })
             }

src/router/modules/root.js

@@ -82,6 +82,11 @@ export default [
                 meta: {requireLogin: true},
                 component: () => import(/* webpackChunkName: 'root' */ '@/views/project/MyProject.vue')
             },
+            {
+                path: 'template/preview',
+                meta: {requireLogin: true},
+                component: () => import(/* webpackChunkName: 'root' */ '@/views/project/TemplatePreview.vue')
+            },
             {
                 path: 'form',
                 meta: {requireLogin: true},

src/utils/convert.js

@@ -138,6 +138,9 @@ let dataParams = {
         'step': 'step'
     },//时间选择
     11: {},
+    15: {
+        'max': 'max',
+    },
     //文件上传
     17: {
         'buttonText': '__config__.buttonText',

src/views/form/ProjectForm.vue

@@ -47,7 +47,9 @@ export default {
     props: {
         projectConfig: {
             projectKey: '',
-            showBtns: true
+            showBtns: true,
+            // 项目种类  1 普通  2模板
+            projectKind: 1
         }
     },
     data() {
@@ -62,6 +64,7 @@ export default {
             formConf: {
                 fields: [],
                 projectKey: '',
+                projectKind: 1,
                 __methods__: {},
                 formRef: 'elForm',
                 formModel: 'formData',
@@ -90,16 +93,25 @@ export default {
     created() {
         if (this.projectConfig && this.projectConfig.projectKey) {
             this.formConf.projectKey = this.projectConfig.projectKey
-            // this.formConf.formBtns = this.projectConfig.showBtns
+            if (this.projectConfig.projectKind) {
-            //不存去路由中尝试获取 iframe
+                this.formConf.projectKind = this.projectConfig.projectKind
+            }
         } else if (this.$route.query.key) {
+            //不存去路由中尝试获取 iframe
             this.formConf.projectKey = this.$route.query.key
+            if (this.$route.query.kind) {
+                this.formConf.projectKind = this.$route.query.kind
+            }
             this.formConf.formBtns = true
         }
         this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small'
     },
     mounted() {
-        this.$api.get(`/user/project/details/${this.formConf.projectKey}`).then(res => {
+        let url = `/user/project/details/${this.formConf.projectKey}`
+        if (this.formConf.projectKind == 2) {
+            url = `/project/template/details/${this.formConf.projectKey}`
+        }
+        this.$api.get(url).then(res => {
             if (res.data) {
                 let serialNumber = 1
                 let fields = res.data.projectItems.map(item => {

src/views/form/statistics.vue

@@ -61,7 +61,7 @@
                 />
             </div>
         </div>
-        <div >
+        <div>
             <el-dialog center title="自定义显示列" :visible.sync="customColumnDialogVisible">
                 <el-row>
                     <el-col :span="3">
@@ -139,7 +139,7 @@ export default {
     }, methods: {
         renderHeader(h) {
             return (
-                <i class="el-icon-setting" onClick={() => this.customColumnDialogVisible = true}></i>
+                <i class="el-icon-setting" style="color:currentColor" onClick={() => this.customColumnDialogVisible = true}></i>
             )
         },
         queryProjectResult() {
@@ -160,7 +160,11 @@ export default {
             })
         },
         getDbCheckedColumns() {
-            let {fixedCustomColumns, otherCustomColumns} = getCheckedColumn(this.projectKey)
+            let checkedColumn = getCheckedColumn(this.projectKey)
+            if (!checkedColumn) {
+                return
+            }
+            let {fixedCustomColumns, otherCustomColumns} = checkedColumn
             if (fixedCustomColumns) {
                 this.fixedCustomColumns = fixedCustomColumns
                 this.checkFixedCustomColumns = fixedCustomColumns

src/views/form/write.vue

@@ -224,6 +224,9 @@ export default {
             this.$api.post('/user/project/result/create', {
                 'completeTime': inActiveTime,
                 'projectKey': this.projectConfig.projectKey,
+                'submitOs': ua.os.name,
+                'submitBrowser': ua.browser.name,
+                'submitUa': ua,
                 'originalData': data.formModel,
                 'processData': data.labelFormModel
             }).then(res => {
@@ -243,6 +246,13 @@ export default {
 
 }
 
+.project-grid-container {
+    margin-top: 20px;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+
 .title-icon-view {
     display: flex;
     align-items: center;

src/views/home/HomButton.vue

@@ -11,7 +11,9 @@
             </el-button>
         </el-col>
         <el-col :span="5">
-            <el-button class="home-fun-btn">行业模板<i class="el-icon-s-management" /></el-button>
+            <el-button class="home-fun-btn" @click="$router.push({path:'/project/create'})">
+                行业模板<i class="el-icon-s-management" />
+            </el-button>
         </el-col>
         <el-col :span="5">
             <el-button class="home-fun-btn">回收站<i class="el-icon-delete-solid" /></el-button>

src/views/home/HomeView.vue

@@ -1,17 +1,17 @@
 <template>
     <el-row>
         <!--      轮播·1-->
-        <el-row>
+        <!--        <el-row>-->
-            <el-col :span="24">
+        <!--            <el-col :span="24">-->
-                <el-carousel height="55px">
+        <!--                <el-carousel height="55px">-->
-                    <el-carousel-item v-for="item in 2" :key="item">
+        <!--                    <el-carousel-item v-for="item in 2" :key="item">-->
-                        <img style="height: 55px; width: 100%;"
+        <!--                        <img style="height: 55px; width: 100%;"-->
-                             src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c4aj.png"
+        <!--                             src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c4aj.png"-->
-                        >
+        <!--                        >-->
-                    </el-carousel-item>
+        <!--                    </el-carousel-item>-->
-                </el-carousel>
+        <!--                </el-carousel>-->
-            </el-col>
+        <!--            </el-col>-->
-        </el-row>
+        <!--        </el-row>-->
         <Dashboard />
         <HomeFunction />
     </el-row>

src/views/home/dashboard.vue

@@ -12,7 +12,6 @@
                                    @change="projectChangeHandle"
                         >
                             <el-option
-
                                 v-for="item in projectListData"
                                 :key="item.key"
                                 :label="item.name"
@@ -22,7 +21,7 @@
                     </el-col>
                 </el-row>
                 <el-row
-                    style="width: 719px; height: 450px; border-radius: 10px; border: 1px solid rgba(187, 187, 187, 100);"
+                    style="width: 730px; height: 500px; border-radius: 10px; border: 1px solid rgba(187, 187, 187, 100);"
                 >
                     <el-row style="height: 50px;" />
                     <el-row>
@@ -73,7 +72,7 @@
                 </el-row>
                 <el-row>
                     <el-col :span="18">
-                        <map-chart :chart-option="mapChartOptionData" />
+                        <map-chart :chart-option="mapChartOptionData" :height="'250px'" />
                     </el-col>
                 </el-row>
                 <el-row type="flex" justify="space-around">
@@ -84,7 +83,7 @@
                             </el-col>
                         </el-row>
                         <el-row>
-                            <bar-chart :chart-option="barChartOptionData" />
+                            <pie-chart :chart-option="pieChartOptionData" :height="'250px'" />
                         </el-row>
                     </el-col>
                     <el-col :span="12">
@@ -94,7 +93,7 @@
                             </el-col>
                         </el-row>
                         <el-row>
-                            <pie-chart :chart-option="pieChartOptionData" />
+                            <bar-chart :chart-option="barChartOptionData" :height="'250px'" />
                         </el-row>
                     </el-col>
                 </el-row>
@@ -252,7 +251,7 @@ export default {
                             zoom: 1.2,
                             roam: false,
                             label: {
-                                show: true,
+                                show: false,
                                 color: 'rgb(0,0,0)'
                             },
                             data: Object.keys(res.data).map(key => {
@@ -263,90 +262,92 @@ export default {
                 }
             })
 
-        },
-        // 常用设备
-        getProjectSubmitDevice() {
-            this.barChartOptionData = {
-                tooltip: {
-                    trigger: 'axis',
-                    backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
-                    color: 'black',
-                    borderWidth: '1',
-                    borderColor: 'rgb(156,209,255)',
-                    textStyle: {
-                        color: 'black'
-                    },
-                    axisPointer: {
-                        type: 'shadow'
-                    }
-                },
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'value',
-                    boundaryGap: [0, 0.01]
-                },
-                yAxis: {
-                    type: 'category',
-                    data: ['虾米', '印尼', '美国', '印度', '中国', '世界人口(万)']
-                },
-                series: [
-                    {
-                        name: '2011年',
-                        type: 'bar',
-                        data: [18203, 23489, 29034, 104970, 131744, 630230]
-                    }
-                ]
-            }
-
         },
         getProjectSubmitSource() {
-            this.pieChartOptionData = {
+            this.$api.get('/user/project/report/source', {params: {projectKey: this.activeProjectKey}}).then(res => {
-                tooltip: {
+                this.barChartOptionData = {
-                    trigger: 'item',
+                    tooltip: {
-                    backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
+                        trigger: 'axis',
-                    color: 'black',
+                        backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
-                    borderWidth: '1',
+                        color: 'black',
-                    borderColor: 'rgb(156,209,255)',
+                        borderWidth: '1',
-                    textStyle: {
+                        borderColor: 'rgb(156,209,255)',
-                        color: 'black'
+                        textStyle: {
-                    }
+                            color: 'black'
-                },
-                series: [
-                    {
-                        name: '访问来源',
-                        type: 'pie',
-                        radius: ['50%', '70%'],
-                        avoidLabelOverlap: false,
-                        label: {
-                            show: false,
-                            position: 'center'
                         },
-                        emphasis: {
+                        axisPointer: {
+                            type: 'shadow'
+                        }
+                    },
+                    grid: {
+                        left: '3%',
+                        right: '4%',
+                        bottom: '3%',
+                        containLabel: true
+                    },
+                    xAxis: {
+                        type: 'value',
+                        boundaryGap: [0, 0.01]
+                    },
+                    yAxis: {
+                        type: 'category',
+                        data: res.data.map(item => {
+                            return item.browserName ? item.browserName : '其他'
+                        })
+                    },
+                    series: [
+                        {
+                            barWidth: 30,
+                            name: '数量',
+                            type: 'bar',
+                            data: res.data.map(item => {
+                                return item.count
+                            })
+                        }
+                    ]
+                }
+            })
+        },
+        getProjectSubmitDevice() {
+            this.$api.get('/user/project/report/device', {params: {projectKey: this.activeProjectKey}}).then(res => {
+                this.pieChartOptionData = {
+                    tooltip: {
+                        trigger: 'item',
+                        backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
+                        color: 'black',
+                        borderWidth: '1',
+                        borderColor: 'rgb(156,209,255)',
+                        textStyle: {
+                            color: 'black'
+                        }
+                    },
+                    series: [
+                        {
+                            name: '设备类型',
+                            type: 'pie',
+                            radius: ['50%', '70%'],
+                            avoidLabelOverlap: false,
                             label: {
-                                show: true,
+                                show: false,
-                                fontSize: '30',
+                                position: 'center'
-                                fontWeight: 'bold'
+                            },
-                            }
+                            emphasis: {
-                        },
+                                label: {
-                        labelLine: {
+                                    show: true,
-                            show: false
+                                    fontSize: '30',
-                        },
+                                    fontWeight: 'bold'
-                        data: [
+                                }
-                            {value: 335, name: '直接访问'},
+                            },
-                            {value: 310, name: '邮件营销'},
+                            labelLine: {
-                            {value: 234, name: '联盟广告'},
+                                show: false
-                            {value: 135, name: '视频广告'},
+                            },
-                            {value: 1548, name: '搜索引擎'}
+                            data: res.data.map(item => {
-                        ]
+                                return {value: item.count, name: item.osName ? item.osName : '其他'}
-                    }
+                            })
-                ]
+                        }
-            }
+                    ]
-
+                }
+            })
         }
     }
 }

src/views/project/MyProject.vue

@@ -72,7 +72,7 @@
                 v-loading="projectListLoading"
                 class="project-grid-view"
             >
-                <div v-for="p in projectList" :key="p.id" class="project-grid-item-view pointer" :span="4">
+                <div v-for="p in projectList" :key="p.id" class="project-grid-item-view pointer">
                     <el-row type="flex" align="middle" justify="center">
                         <el-col :span="5">
                             <span
@@ -244,7 +244,6 @@ export default {
             this.$router.push({path: '/project/form', query: {key: key, active: type}})
         },
         queryProjectPage() {
-
             this.$api.get('/user/project/page', {
                 params: this.queryParams
             }).then(res => {

src/views/project/TemplatePreview.vue

@@ -0,0 +1,91 @@
+<template>
+    <div v-loading="createProjectLoading" class="template-preview-container">
+        <div class="back-view">
+            <el-button size="mini" round @click="$router.back(-1)">
+                <i class="el-icon-arrow-left" />
+                返回
+            </el-button>
+        </div>
+        <div class="template-preview-content">
+            <el-scrollbar style="height: 90vh;">
+                <project-form
+                    v-if="projectConfig.projectKey"
+                    :project-config="projectConfig"
+                    @submit="submitForm"
+                />
+            </el-scrollbar>
+            <div style="margin: 20px;">
+                <el-button
+                    type="primary"
+                    @click="createProjectByTemplate"
+                >
+                    使用该模板
+                </el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ProjectForm from '@/views/form/ProjectForm'
+
+export default {
+    name: 'TemplatePreview',
+    components: {
+        ProjectForm
+    },
+    props: {},
+    data() {
+        return {
+            createProjectLoading: false,
+            projectConfig: {
+                projectKey: '',
+                preview: false,
+                projectKind: 2,
+                showBtns: true
+            }
+        }
+    },
+    mounted() {
+        this.projectConfig.projectKey = this.$route.query.key
+    },
+    methods: {
+        createProjectByTemplate() {
+            this.createProjectLoading = true
+            this.$api.post('/user/project/template/create/', {'key': this.projectConfig.projectKey}).then(res => {
+                this.createProjectLoading = false
+                if (res.data) {
+                    this.$router.push({path: '/project/form', query: {key: res.data, active: 1}})
+                }
+            }).catch(res => {
+                console.log(res)
+                this.createProjectLoading = false
+            })
+        },
+        submitForm() {
+
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.template-preview-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    overflow-y: hidden;
+}
+.back-view {
+    display: flex;
+    width: 80%;
+    align-content: flex-start;
+    margin: 10px;
+}
+.template-preview-content {
+    display: flex;
+}
+</style>

src/views/project/create.vue

@@ -1,84 +1,104 @@
 <template>
     <div class="create-wrapper">
-        <el-backtop target=".create-wrapper" :visibility-height="100" :bottom="60" />
+        <div class="back-view">
+            <el-button size="mini" round @click="$router.back(-1)">
+                <i class="el-icon-arrow-left" />
+                返回
+            </el-button>
+        </div>
         <el-row>
-            <el-row style="height: 20px;" />
-            <el-row>
-                <el-col :offset="1" :span="2">
-                    <el-button size="mini" round @click="$router.back(-1)">
-                        <i class="el-icon-arrow-left" />
-                        返回
-                    </el-button>
-                </el-col>
-            </el-row>
             <el-row type="flex" justify="center">
-                <el-col :offset="4" :span="8">
+                <el-col :span="20">
-                    <el-form ref="form">
+                    <el-form ref="form" :inline="true">
                         <el-form-item label="">
-                            <el-input class="search-template-input" />
+                            <el-input
+                                v-model="queryParams.name"
+                                class="search-template-input"
+                                @keyup.enter="queryTemplatePage"
+                            />
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="primary"
+                                       class="search-template-btn"
+                                       @click="queryTemplatePage"
+                            >
+                                查询
+                            </el-button>
                         </el-form-item>
                     </el-form>
                 </el-col>
-                <el-col :offset="1" :span="4">
-                    <el-button type="primary" class="search-template-btn">查询</el-button>
-                </el-col>
-                <el-col :span="6" />
             </el-row>
             <el-row>
                 <el-col :offset="6" :span="10">
-                    <el-menu default-active="1" style="background-color: transparent;" mode="horizontal">
+                    <el-menu :default-active="queryParams.type"
-                        <el-menu-item index="1">全部</el-menu-item>
+                             style="background-color: transparent;"
-                        <el-menu-item index="2">问卷调查</el-menu-item>
+                             mode="horizontal" @select="(index)=>{
-                        <el-menu-item index="3">满意度调查</el-menu-item>
+                                 this.queryParams.type=index
-                        <el-menu-item index="4">投票评选</el-menu-item>
+                                 this.queryTemplatePage()}"
-                        <el-menu-item index="5">报名登记表</el-menu-item>
+                    >
-                        <el-menu-item index="6">考试测评</el-menu-item>
+                        <el-menu-item :`index`="null">全部</el-menu-item>
+                        <el-menu-item v-for="(item, index) in templateTypeList" :key="index"
+                                      :index="item.id.toString()"
+                        >
+                            {{ item.name }}
+                        </el-menu-item>
                     </el-menu>
                 </el-col>
             </el-row>
             <el-row>
-                <el-col :offset="3" :span="3">
+                <el-col :span="3">
                     <span class="tagTitle">推荐模板</span>
                 </el-col>
             </el-row>
-            <el-row>
+            <div class="project-grid-container">
-                <el-col :offset="3" :span="3" @click.native="createBlankTemplate">
+                <div
-                    <div class="project-template-view" style="display: flex; align-items: center;">
+                    class="project-grid-view"
+                >
+                    <div class="project-template-view"
+                         style="display: flex; align-items: center;"
+                         @click="createBlankTemplate"
+                    >
                         <div style="flex: 1;">
                             <i style="font-size: 40px; align-items: center;" class="el-icon-plus" />
                             <p style="font-size: 14px;">创建一个空白模板</p>
                         </div>
                     </div>
-                </el-col>
+                    <div v-for="template in templateList" :key="template.title" class="project-template-view">
-                <el-col v-for="(template,index) in templateList" :key="template.title"
+                        <img style="width: 144px; height: 133px;" :src="template.coverImg">
-                        :offset="getTemplateOffset(index)"
+                        <p class="project-template-title">
-                        :span="3"
+                            {{ template.name }}
-                >
-                    <div class="project-template-view">
-                        <img style="width: 144px; height: 133px;" :src="template.image">
-                        <p style="color: rgba(16, 16, 16, 100); font-size: 14px; margin: 0; line-height: 30px;">
-                            {{ template.title }}
                         </p>
                         <p style="color: rgba(189, 188, 188, 100); font-size: 12px; margin: 0;">
                             {{ template.likeCount }}人喜欢
                             <svg-icon name="like" style="width: 12px; height: 12px;" />
                         </p>
+                        <div class="project-template-use-view">
+                            <div
+                                class="project-template-use-view-btn"
+                                @click="toProjectTemplate(template.key)"
+                            >
+                                <div>
+                                    <font-icon class="fa fa-eye" style="font-size: 40px;" />
+                                </div>
+                                <el-button type="text">查看</el-button>
+                            </div>
+                        </div>
                     </div>
-                </el-col>
+                </div>
-            </el-row>
+            </div>
-            <el-row style="height: 20px;" />
-            <el-row type="flex" justify="center">
-                <el-col :span="5">
-                    <el-pagination
-                        background
-                        :hide-on-single-page="true"
-                        :total="50"
-                        layout="prev, pager, next"
-                    />
-                </el-col>
-            </el-row>
-            <el-row />
         </el-row>
+        <el-row style="height: 20px;" />
+        <div>
+            <el-pagination
+                v-if="total>10"
+                background
+                :page-size.sync="queryParams.size"
+                :current-page.sync="queryParams.current"
+                layout="total, prev, pager, next"
+                :total="total"
+                @current-change="queryTemplatePage"
+            />
+        </div>
     </div>
 </template>
 
@@ -89,104 +109,39 @@ export default {
     name: 'CreateProject',
     data() {
         return {
-            templateList: [
+            queryParams: {
-                {
+                current: 1,
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
+                size: 11,
-                    title: '垃圾分类问卷调查',
+                name: '',
-                    likeCount: 10000
+                type: null
-                },
+            },
-                {
+            total: 0,
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
+            templateTypeList: [],
-                    title: '垃圾分类问卷调查',
+            templateList: []
-                    likeCount: 10000
-                },
-                {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }, {
-                    image: 'https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c3ec.png',
-                    title: '垃圾分类问卷调查',
-                    likeCount: 10000
-                }
-            ]
         }
     },
     computed: {},
+    created() {
+        this.queryTemplateType()
+        this.queryTemplatePage()
+    },
     methods: {
-        getTemplateOffset(index) {
+        queryTemplateType() {
-            console.log(index)
+            this.$api.get('/project/template/type/list').then(res => {
-            // if (index == 5 || (index != 6 && index != 0 && index % 6 === 0)) {
+                this.templateTypeList = res.data
-            //     return 3
+            })
-            // }
+        },
-            if ((index + 1) % 6 == 0) {
+        toProjectTemplate(key) {
-                return 3
+            this.$router.push({path: '/project/template/preview', query: {key: key}})
-            }
+        },
-            return 0
+        queryTemplatePage() {
+            this.$api.get('/project/template/page', {params: this.queryParams}).then(res => {
+                let {records, total, size} = res.data
+                this.templateList = records
+                this.total = total
+                this.queryParams.size = size
+                this.projectListLoading = false
+            })
         },
         createBlankTemplate() {
             this.$api.post('/user/project/create', {
@@ -201,10 +156,26 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .create-wrapper {
+    display: flex;
+    width: 100%;
     height: 100%;
-    overflow-x: hidden;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+}
+.back-view {
+    display: flex;
+    width: 80%;
+    align-content: flex-start;
+    margin: 10px;
+}
+.project-grid-view {
+    display: flex;
+    width: 1200px;
+    flex-direction: row;
+    flex-wrap: wrap;
 }
 .tagTitle {
     font-size: 20px;
@@ -217,13 +188,44 @@ export default {
     line-height: 20px;
     border-radius: 3px;
     text-align: center;
-    margin-top: 20px;
+    margin: 20px;
     border: 1px solid rgba(187, 187, 187, 100);
+    position: relative;
+}
+.project-template-view:hover .project-template-use-view {
+    display: block;
+}
+.project-template-use-view {
+    position: absolute;
+    width: 100%;
+    height: 196px;
+    z-index: 100;
+    margin: 0;
+    padding: 0;
+    background-color: #f0f0f0;
+    bottom: 0;
+    filter: alpha(opacity=60);
+    -moz-opacity: 0.6;
+    opacity: 0.6;
+    display: none;
+    border: none;
+}
+.project-template-title {
+    color: rgba(16, 16, 16, 100);
+    font-size: 14px;
+    margin: 0 3px;
+    line-height: 30px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.project-template-use-view-btn {
+    margin-top: 50%;
 }
 .el-menu.el-menu--horizontal {
     border-bottom: none;
 }
-/deep/ .search-template-input input {
+::v-deep .search-template-input input {
     width: 651px;
     height: 50px;
     line-height: 20px;
@@ -231,7 +233,7 @@ export default {
     text-align: center;
     border: 1px solid rgba(187, 187, 187, 100);
 }
-/deep/ .search-template-btn {
+.search-template-btn {
     width: 132px;
     height: 50px;
     border-radius: 10px;