fix 功能

4 years ago · b315248ddd
9 changed files with 1920 additions and 55 deletions
--- a/src/api/index.js
+++ b/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}
--- a/src/assets/images/official/background.svg
+++ b/src/assets/images/official/background.svg
--- a/src/assets/styles/form/home.scss
+++ b/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;
--- a/src/components/echarts/LineChart.vue
+++ b/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)
--- a/src/utils/sign.js
+++ b/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()
    }

--- a/src/views/form/editor/index.vue
+++ b/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>
--- a/src/views/form/index.vue
+++ b/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>
--- a/src/views/form/preview/index.vue
+++ b/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,58 +70,77 @@ export default {
 }
 </script>

-<style scoped>
+<style lang="scss" scoped>

 .preview-container {
-    margin: 0;
-    padding-top: 30px;
-    background-color: #f7f7f7;
+  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;
+  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;
+  background-color: white;
+  border: 1px solid white;
 }
+
 div.preview-layer {
-    width: 500px;
-    height: 100%;
-    margin: 10px auto;
-    right: 0;
-    text-align: center;
+  width: 500px;
+  height: 100%;
+  margin: 10px auto;
+  right: 0;
+  text-align: center;
 }
+
 div.preview-layer .preview-bg {
-    width: 500px;
-    height: 100%;
-    margin: 20px auto;
-    z-index: 999;
-    opacity: 0.7;
+  width: 500px;
+  height: 100%;
+  margin: 20px auto;
+  z-index: 999;
+  opacity: 0.7;
 }
+
 div.preview-layer .preview-phone {
-    width: 372px;
-    height: 744px;
-    background: url('~@/assets/images/appearset_bgc_big.png');
-    background-size: 372px 744px;
-    z-index: 1000;
+  width: 372px;
+  height: 744px;
+  background: url('~@/assets/images/appearset_bgc_big.png');
+  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;
-    margin: 74px 0 0;
-    border-radius: 5px;
-    outline: none;
-    background-color: #fff;
-    border-width: 2px;
-    border-style: inset;
-    border-color: initial;
-    border-image: initial;
-    border-top-width: 0;
-    border-right-width: 0;
-    border-bottom-width: 0;
-    border-left-width: 0;
+  width: 345px !important;
+  height: 568px !important;
+  margin: 74px 0 0;
+  border-radius: 5px;
+  outline: none;
+  background-color: #fff;
+  border-width: 2px;
+  border-style: inset;
+  border-color: initial;
+  border-image: initial;
+  border-top-width: 0;
+  border-right-width: 0;
+  border-bottom-width: 0;
+  border-left-width: 0;
 }

 </style>
--- a/src/views/form/statistics/chart.vue
+++ b/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,9 +340,9 @@ export default {
    overflow-x: hidden!important;
 }
 .tag-title {
-    font-size: 20px;
+    font-size: 16px;
    line-height: 25px;
-  margin-left: 20px;
+   margin-left: 20px;
 }
 .project-index-view {
    & > div {