fix 功能

src/api/index.js

@@ -56,7 +56,6 @@ const signRequest = request => {
 
 api.interceptors.response.use(
     async response => {
-        console.log(response)
         /**
          * 全局拦截请求发送后返回的数据，如果数据有报错则在这做全局的错误提示
          * 假设返回数据格式为：{"code":500,"msg":"邮箱地址不正确","data":null}

src/assets/styles/form/home.scss

@@ -253,10 +253,7 @@ $lighterBlue: #1890ff;
         }
     }
 }
-.form-name-text:hover {
-    border: 1px dashed #7b7b7b;
-    min-height: 100px;
-}
+
 .form-name-text {
     padding: 6px 10px;
     border: 1px dashed transparent;

src/components/echarts/LineChart.vue

@@ -60,6 +60,7 @@ export default {
         initChart() {
             this.chart = echarts.init(this.$el, 'macarons')
             this.setOptions(this.chartOption)
+            this.chart.resize()
         },
         setOptions(chartOption) {
             this.chart.setOption(chartOption)

src/utils/sign.js

@@ -51,7 +51,6 @@ export default class sign {
         let jsonObj = _.merge(urlParams, requestParams)
         jsonObj = _.merge(jsonObj, dataParams)
         let requestBody = this.sortAsc(jsonObj)
-        console.log(jsonObj)
         return CryptoJS.MD5(constants.signSecret + JSON.stringify(requestBody)).toString().toLowerCase()
     }
 

src/views/form/editor/index.vue

@@ -419,3 +419,9 @@ export default {
 @import '@/assets/styles/form/home';
 @import '@/assets/styles/form/index';
 </style>
+<style lang="scss" scoped>
+.form-name-text:hover{
+  border: 1px dashed #7b7b7b;
+  min-height: 100px;
+}
+</style>

src/views/form/index.vue

@@ -9,7 +9,7 @@
                     <img class="header-logo" src="@/assets/images/indexLogo.png" @click="$router.push({path:'/home'})">
                 </el-col>
                 <el-col :span="1">
-                    <el-button type="primary" icon="el-icon-view">
+                    <el-button type="primary" icon="el-icon-view" @click="previewDialogVisible=true">
                         预览
                     </el-button>
                 </el-col>
@@ -38,15 +38,23 @@
                 <router-view />
             </div>
         </div>
+        <el-dialog
+            :visible.sync="previewDialogVisible"
+            fullscreen
+        >
+            <pre-view :preview-qrcode="true" />
+        </el-dialog>
     </div>
 </template>
 
 <script>
+import PreView from '@/views/form/preview'
 export default {
     name: 'NewIndex',
-    components: {},
+    components: {PreView},
     data() {
         return {
+            previewDialogVisible: false,
             defaultActiveMenu: 'editor',
             projectKey: null,
             isCollapse: false,
@@ -185,4 +193,7 @@ export default {
   }
 }
 
+::v-deep.preview-container{
+  background-color: #ffffff;
+}
 </style>

src/views/form/preview/index.vue

@@ -16,12 +16,18 @@
                         />
                     </div>
                 </div>
+                <div v-if="mobilePreviewUrl&&previewQrcode" class="qrcode-view">
+                    <p>手机扫码查看效果</p>
+                    <vue-qr
+                        v-if="mobilePreviewUrl&&previewQrcode" :size="194" :text="mobilePreviewUrl"
+                    />
+                </div>
             </el-tab-pane>
             <el-tab-pane>
                 <span slot="label"><i class="el-icon-monitor" />
                     电脑
                 </span>
-                <el-scrollbar style="height: 77vh;">
+                <el-scrollbar style="height: 77vh;overflow-x: hidden!important;">
                     <project-form
                         v-if="projectConfig.projectKey"
                         :project-config="projectConfig"
@@ -34,11 +40,16 @@
 
 <script>
 import ProjectForm from './ProjectForm'
+import VueQr from 'vue-qr'
 
 export default {
     name: 'PreView',
     components: {
-        ProjectForm
+        ProjectForm,
+        VueQr
+    },
+    props: {
+        previewQrcode: null
     },
     data() {
         return {
@@ -59,22 +70,27 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 
 .preview-container {
   margin: 0;
   padding-top: 30px;
   background-color: #f7f7f7;
 }
+::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav{
+  border: 1px solid #E4E7ED!important;
+}
 ::v-deep .el-tabs__header {
   width: 300px;
   margin: 0 auto;
   border: none;
 }
+
 ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
   background-color: white;
   border: 1px solid white;
 }
+
 div.preview-layer {
   width: 500px;
   height: 100%;
@@ -82,6 +98,7 @@ div.preview-layer {
   right: 0;
   text-align: center;
 }
+
 div.preview-layer .preview-bg {
   width: 500px;
   height: 100%;
@@ -89,6 +106,7 @@ div.preview-layer .preview-bg {
   z-index: 999;
   opacity: 0.7;
 }
+
 div.preview-layer .preview-phone {
   width: 372px;
   height: 744px;
@@ -96,6 +114,18 @@ div.preview-layer .preview-phone {
   background-size: 372px 744px;
   z-index: 1000;
 }
+
+.qrcode-view{
+  position: absolute;
+  top: 0;
+  right: 20px;
+  p{
+    text-align: center;
+    font-size: 12px;
+    color: #303133;
+  }
+}
+
 .preview-html {
   width: 345px !important;
   height: 568px !important;

src/views/form/statistics/chart.vue

@@ -1,10 +1,11 @@
 <template>
     <div class="dashboard-container">
         <p class="tag-title">回收概览</p>
+        <el-divider />
         <div class="project-index-view">
             <div>
                 <div>
-                    <p style="text-align: center;">有效回收量</p>
+                    <p class="text-center">有效回收量</p>
                     <count-to :end-val="projectStats.completeCount"
                               style="font-size: 20px;"
                     />
@@ -27,23 +28,24 @@
             </div>
         </div>
         <div class="line-chat">
-            <line-chart :chart-option="lineChartOptionData" />
+            <line-chart :width="'100vw'" :chart-option="lineChartOptionData" />
         </div>
         <p class="tag-title">表单提交地域分布图</p>
         <div style="width: 90%">
-            <map-chart :chart-option="mapChartOptionData" :height="'450px'" />
+            <map-chart :width="'100vw'" :chart-option="mapChartOptionData" :height="'450px'" />
         </div>
+        <el-divider />
         <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'" />
+                    <pie-chart :width="'48vw'" :chart-option="pieChartOptionData" :height="'250px'" />
                 </div>
             </div>
             <div style="width: 50%;">
                 <p class="tag-title">来源渠道</p>
                 <div>
-                    <bar-chart :chart-option="barChartOptionData" :height="'250px'" />
+                    <bar-chart :width="'48vw'" :chart-option="barChartOptionData" :height="'250px'" />
                 </div>
             </div>
         </div>
@@ -338,7 +340,7 @@ export default {
     overflow-x: hidden!important;
 }
 .tag-title {
-    font-size: 20px;
+    font-size: 16px;
     line-height: 25px;
    margin-left: 20px;
 }