Merge branch 'v1.10' of github.com:dataease/dataease into v1.10

README.md

@@ -68,7 +68,7 @@ curl -sSL https://github.com/dataease/dataease/releases/latest/download/quick_st
 ```
 
 -   [在线文档](https://dataease.io/docs/)
--   [演示视频](https://www.bilibili.com/video/BV1UB4y1K7jA)
+-   [演示视频](https://www.bilibili.com/video/BV1i34y1v7hq/)
 
 ## 微信群
 

backend/src/main/java/io/dataease/controller/chart/ChartViewController.java

@@ -5,10 +5,7 @@ import io.dataease.auth.annotation.DePermission;
 import io.dataease.auth.annotation.DePermissionProxy;
 import io.dataease.commons.constants.DePermissionType;
 import io.dataease.commons.constants.ResourceAuthLevel;
-import io.dataease.controller.request.chart.ChartCalRequest;
-import io.dataease.controller.request.chart.ChartExtRequest;
-import io.dataease.controller.request.chart.ChartViewCacheRequest;
-import io.dataease.controller.request.chart.ChartViewRequest;
+import io.dataease.controller.request.chart.*;
 import io.dataease.controller.response.ChartDetail;
 import io.dataease.dto.chart.ChartViewDTO;
 import io.dataease.plugins.common.base.domain.ChartViewCacheWithBLOBs;
@@ -23,6 +20,7 @@ import springfox.documentation.annotations.ApiIgnore;
 
 import javax.annotation.Resource;
 import java.util.List;
+import java.util.Map;
 
 /**
  * @Author gin
@@ -112,6 +110,13 @@ public class ChartViewController {
         return chartViewService.chartCopy(id, panelId);
     }
 
+    @DePermission(type = DePermissionType.PANEL, level = ResourceAuthLevel.PANNEL_LEVEL_MANAGE, paramIndex = 1)
+    @ApiOperation("批量复制")
+    @PostMapping("chartBatchCopy/{panelId}")
+    public Map<String,String> chartBatchCopy(@RequestBody ChartCopyBatchRequest request, @PathVariable String panelId) {
+        return chartViewService.chartBatchCopy(request,panelId);
+    }
+
     @ApiIgnore
     @GetMapping("searchAdviceSceneId/{panelId}")
     public String searchAdviceSceneId(@PathVariable String panelId) {

backend/src/main/java/io/dataease/controller/request/chart/ChartCopyBatchRequest.java

+package io.dataease.controller.request.chart;
+
+import lombok.Data;
+
+import java.util.HashMap;
+import java.util.Map;
+
+/**
+ * Author: wangjiahao
+ * Date: 2022/4/26
+ * Description:
+ */
+@Data
+public class ChartCopyBatchRequest {
+
+    private String panelId;
+
+    private Map<String,String> sourceAndTargetIds;
+
+}

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

 package io.dataease.service.chart;
 
+import cn.hutool.core.lang.Assert;
 import com.google.gson.Gson;
 import com.google.gson.reflect.TypeToken;
 import io.dataease.auth.entity.SysUserEntity;
@@ -1024,13 +1025,35 @@ public class ChartViewService {
         return chartViewMapper.selectByPrimaryKey(id);
     }
 
-    public String chartCopy(String id, String panelId) {
+    public String chartCopy(String sourceViewId,String newViewId, String panelId) {
+        extChartViewMapper.chartCopy(newViewId, sourceViewId, panelId);
+        extChartViewMapper.copyCache(sourceViewId, newViewId);
+        extPanelGroupExtendDataMapper.copyExtendData(sourceViewId, newViewId, panelId);
+        chartViewCacheService.refreshCache(newViewId);
+        return newViewId;
+    }
+
+    public String chartCopy(String sourceViewId, String panelId) {
         String newChartId = UUID.randomUUID().toString();
-        extChartViewMapper.chartCopy(newChartId, id, panelId);
-        extChartViewMapper.copyCache(id, newChartId);
-        extPanelGroupExtendDataMapper.copyExtendData(id, newChartId, panelId);
-        chartViewCacheService.refreshCache(newChartId);
-        return newChartId;
+       return chartCopy(sourceViewId,newChartId,panelId);
+    }
+
+
+    /**
+     * @Description Copy a set of views with a given source ID and target ID
+     * @param request
+     * @param panelId
+     * @return
+     */
+    public Map<String,String> chartBatchCopy(ChartCopyBatchRequest request,String panelId){
+        Assert.notNull(panelId,"panelId should not be null");
+        Map<String,String> sourceAndTargetIds = request.getSourceAndTargetIds();
+        if(sourceAndTargetIds != null && !sourceAndTargetIds.isEmpty()){
+            for(Map.Entry<String,String> entry:sourceAndTargetIds.entrySet()){
+                chartCopy(entry.getKey(),entry.getValue(),panelId);
+            }
+        }
+        return request.getSourceAndTargetIds();
     }
 
     public String searchAdviceSceneId(String panelId) {

frontend/src/api/chart/chart.js

@@ -27,6 +27,14 @@ export function chartCopy(id, panelId) {
     loading: false
   })
 }
+export function chartBatchCopy(params, panelId) {
+  return request({
+    url: '/chart/view/chartBatchCopy/' + panelId,
+    method: 'post',
+    data: params,
+    loading: false
+  })
+}
 export function chartGroupTree(data) {
   return request({
     url: '/chart/group/tree',

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -37,7 +37,7 @@
                 {{ $t('chart.export') }}<i class="el-icon-download" />
               </el-button>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excle</el-dropdown-item>
+                <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excel</el-dropdown-item>
                 <el-dropdown-item v-if="showExportImgButton" icon="el-icon-picture-outline" @click.native="exportViewImg">{{ $t('chart.image') }}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>

frontend/src/components/canvas/components/Editor/index.vue

@@ -159,7 +159,7 @@
             {{ $t('chart.export') }}<i class="el-icon-download" />
           </el-button>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excle</el-dropdown-item>
+            <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excel</el-dropdown-item>
             <el-dropdown-item v-if="showExportImgButton" icon="el-icon-picture-outline" @click.native="exportViewImg">{{ $t('chart.image') }}</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>

frontend/src/components/canvas/custom-component/DeFrame.vue

@@ -2,11 +2,15 @@
   <el-row class="main-frame">
     <div v-if="element.frameLinks.src" class="main-frame">
       <iframe v-if="frameShow" id="iframe" :src="element.frameLinks.src" scrolling="auto" frameborder="0" class="main-frame" @load="loaded" @error="onError" />
-      <div v-if="editMode==='edit'" class="frame-mask">
+      <div v-if="editMode==='edit'" class="frame-mask edit-mask">
         <span style="opacity: 1;">
           <span style="font-weight: bold;color: lawngreen;">{{ $t('panel.edit_web_tips') }}</span>
         </span>
       </div>
+      <!--Here are three 15px wide masks(left top right) for easy clicking on the display jump button-->
+      <div v-if="editMode!=='edit'" class="frame-mask preview-top-mask" />
+      <div v-if="editMode!=='edit'" class="frame-mask preview-right-mask" />
+      <div v-if="editMode!=='edit'" class="frame-mask preview-left-mask" />
       <div v-if="screenShot" class="frame-mask" />
     </div>
     <div v-else class="info-class">
@@ -100,17 +104,34 @@ export default {
   }
   .frame-mask {
     display: flex;
-    height: 100%!important;
-    width: 100% !important;
-    background-color: #5c5e61;
     opacity: 0.5;
     position:absolute;
     top:0px;
-    left: 0px;
-    z-index: 2;
+    z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
   }
+  .edit-mask{
+    left: 0px;
+    background-color: #5c5e61;
+    height: 100%!important;
+    width: 100% !important;
+  }
+  .preview-top-mask{
+    left: 0px;
+    height: 15px!important;
+    width: 100% !important;
+  }
+  .preview-right-mask{
+    right: 0px;
+    height: 100%!important;
+    width: 15px !important;
+  }
+  .preview-left-mask{
+    left: 0px;
+    height: 100%!important;
+    width: 15px !important;
+  }
 </style>
 

frontend/src/components/canvas/custom-component/UserViewDialog.vue

@@ -65,7 +65,7 @@ export default {
   computed: {
 
     showChartCanvas() {
-      return !this.chart.type.includes('table')
+      return this.chart.type !== 'table-normal' && this.chart.type !== 'table-info'
     },
     customStyle() {
       let style = {

frontend/src/components/canvas/custom-component/component-list.js

@@ -227,6 +227,7 @@ const list = [
     icon: 'wenben',
     type: 'v-text',
     mobileStyle: BASE_MOBILE_STYLE,
+    hyperlinks: HYPERLINKS,
     style: {
       width: 400,
       height: 100,
@@ -238,7 +239,6 @@ const list = [
       color: '#000000',
       verticalAlign: 'middle'
     },
-    hyperlinks: HYPERLINKS,
     x: 1,
     y: 1,
     sizex: 10,
@@ -279,6 +279,7 @@ const list = [
     type: 'Picture',
     propValue: require('@/components/canvas/assets/title.jpg'),
     mobileStyle: BASE_MOBILE_STYLE,
+    hyperlinks: HYPERLINKS,
     style: {
       width: 300,
       height: 200
@@ -298,6 +299,7 @@ const list = [
     type: 'Picture',
     propValue: require('@/components/canvas/assets/bg-kj-1.jpg'),
     mobileStyle: BASE_MOBILE_STYLE,
+    hyperlinks: HYPERLINKS,
     style: {
       borderStyle: 'solid',
       borderWidth: 0,
@@ -316,6 +318,7 @@ const list = [
     icon: 'juxing',
     type: 'rect-shape',
     mobileStyle: BASE_MOBILE_STYLE,
+    hyperlinks: HYPERLINKS,
     style: {
       width: 300,
       height: 200,
@@ -338,6 +341,7 @@ const list = [
     icon: 'juxing',
     type: 'view',
     mobileStyle: BASE_MOBILE_STYLE,
+    hyperlinks: HYPERLINKS,
     style: {
       width: 300,
       height: 200
@@ -358,6 +362,7 @@ const list = [
     icon: 'tabs',
     type: 'de-tabs',
     mobileStyle: BASE_MOBILE_STYLE,
+    hyperlinks: HYPERLINKS,
     style: {
       width: 200,
       height: 200,
@@ -387,6 +392,7 @@ const list = [
     icon: 'shijian',
     type: 'de-show-date',
     mobileStyle: BASE_MOBILE_STYLE,
+    hyperlinks: HYPERLINKS,
     style: {
       width: 250,
       height: 100,
@@ -424,6 +430,7 @@ const list = [
     icon: 'iconfont icon-iframe',
     defaultClass: 'text-filter',
     mobileStyle: BASE_MOBILE_STYLE,
+    hyperlinks: HYPERLINKS,
     style: {
       width: 400,
       height: 200
@@ -464,6 +471,7 @@ const list = [
     icon: 'iconfont icon-picture',
     defaultClass: 'text-filter',
     mobileStyle: BASE_MOBILE_STYLE,
+    hyperlinks: HYPERLINKS,
     style: {
       width: 400,
       height: 200
@@ -484,6 +492,7 @@ const list = [
     icon: 'iconfont icon-picture',
     defaultClass: 'text-filter',
     mobileStyle: BASE_MOBILE_STYLE,
+    hyperlinks: HYPERLINKS,
     style: {
       width: 400,
       height: 200

frontend/src/components/canvas/store/copy.js

@@ -2,7 +2,7 @@ import store from '@/store/index'
 import toast from '@/components/canvas/utils/toast'
 import generateID from '@/components/canvas/utils/generateID'
 import { deepCopy } from '@/components/canvas/utils/utils'
-import { chartCopy } from '@/api/chart/chart'
+import { chartBatchCopy, chartCopy } from '@/api/chart/chart'
 import { uuid } from 'vue-uuid'
 
 export default {
@@ -53,6 +53,19 @@ export default {
           newView.propValue.viewId = res.data
           store.commit('addComponent', { component: newView })
         })
+      } if (data.type === 'de-tabs') {
+        const sourceAndTargetIds = {}
+        const newCop = deepCopy(data)
+        newCop.options.tabList.forEach((item) => {
+          if (item.content && item.content.type === 'view') {
+            const newViewId = uuid.v1()
+            sourceAndTargetIds[item.content.propValue.viewId] = newViewId
+            item.content.propValue.viewId = newViewId
+          }
+        })
+        chartBatchCopy({ 'sourceAndTargetIds': sourceAndTargetIds }, state.panel.panelInfo.id).then((rsp) => {
+          store.commit('addComponent', { component: newCop })
+        })
       } else {
         const newCop = deepCopy(data)
         newCop.id = uuid.v1()

frontend/src/components/widget/DeWidget/DeSelect.vue

@@ -227,7 +227,8 @@ export default {
       this.onFocus = true
       // 下拉框弹出时，设置弹框的宽度
       this.$nextTick(() => {
-        this.selectOptionWidth = event.srcElement.offsetWidth + 'px'
+        // this.selectOptionWidth = event.srcElement.offsetWidth + 'px'
+        this.selectOptionWidth = event.srcElement.parentElement.parentElement.offsetWidth + 'px'
       })
     }
 

frontend/src/components/widget/DeWidget/DeTabs.vue

@@ -6,10 +6,13 @@
       type="card"
       style-type="radioGroup"
       class="de-tabs-height"
+      :class="isCurrentEdit ? 'de-tabs-edit' : ''"
       :font-color="fontColor"
       :active-color="activeColor"
       :border-color="borderColor"
       :border-active-color="borderActiveColor"
+      :addable="isEdit"
+      @tab-add="addTab"
       @tab-click="handleClick"
     >
       <!--  <plugin-com ref="dataease-tabs" v-model="activeTabName" type="card" class="de-tabs" component-name="dataease-tabs" @tab-click="handleClick"> -->
@@ -246,6 +249,9 @@ export default {
     },
     titleValid() {
       return !!this.textarea && !!this.textarea.trim()
+    },
+    isCurrentEdit() {
+      return this.isEdit && this.curComponent && this.curComponent.id === this.element.id
     }
   },
   watch: {
@@ -400,6 +406,9 @@ export default {
       this.$store.dispatch('chart/setViewId', null)
       this.styleChange()
     },
+    addTab() {
+      this.addNewTab(this.element.id)
+    },
 
     addNewTab(componentId) {
       if (!componentId || componentId !== this.element.id) return

frontend/src/styles/index.scss

@@ -143,7 +143,9 @@ div:focus {
     height: 100vh !important;
   }
 }
-
+.de-tabs-edit>.el-tabs__header{
+    padding-right: 50px !important;
+}
 .de-tabs {
   .el-tabs__header {
     margin: 0 0 0 0 !important;

frontend/src/views/background/index.vue

@@ -110,6 +110,7 @@ import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
 import { uploadFileResult } from '@/api/staticResource/staticResource'
+import { COMMON_BACKGROUND_NONE } from '@/components/canvas/custom-component/component-list'
 
 export default {
   name: 'Background',
@@ -144,7 +145,7 @@ export default {
       if (this.curComponent && this.curComponent.commonBackground && this.curComponent.commonBackground.outerImage && typeof (this.curComponent.commonBackground.outerImage) === 'string') {
         this.fileList.push({ url: this.curComponent.commonBackground.outerImage })
       }
-      this.backgroundOrigin = deepCopy(this.curComponent.commonBackground)
+      this.backgroundOrigin = deepCopy(this.curComponent.commonBackground ? this.curComponent.commonBackground : COMMON_BACKGROUND_NONE)
       this.queryBackground()
     },
     queryBackground() {

frontend/src/views/chart/chart/chart.js

@@ -674,8 +674,7 @@ export const BASE_CHART_STRING = {
     legend: DEFAULT_LEGEND_STYLE,
     xAxis: DEFAULT_XAXIS_STYLE,
     yAxis: DEFAULT_YAXIS_STYLE,
-    yAxisExt: DEFAULT_YAXIS_EXT_STYLE,
-    background: DEFAULT_BACKGROUND_COLOR
+    yAxisExt: DEFAULT_YAXIS_EXT_STYLE
   }),
   customFilter: '[]'
 }
@@ -698,8 +697,7 @@ export const BASE_CHART = {
     legend: DEFAULT_LEGEND_STYLE,
     xAxis: DEFAULT_XAXIS_STYLE,
     yAxis: DEFAULT_YAXIS_STYLE,
-    yAxisExt: DEFAULT_YAXIS_EXT_STYLE,
-    background: DEFAULT_BACKGROUND_COLOR
+    yAxisExt: DEFAULT_YAXIS_EXT_STYLE
   },
   customFilter: []
 }

frontend/src/views/chart/components/ChartComponent.vue

@@ -215,7 +215,7 @@ export default {
       } else if (chart.type === 'radar') {
         chart_option = baseRadarOption(JSON.parse(JSON.stringify(BASE_RADAR)), chart)
       } else if (chart.type === 'gauge') {
-        chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart, this.scale)
+        chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart, this.terminalType === 'pc' ? this.scale : '0.7')
       } else if (chart.type === 'scatter') {
         chart_option = baseScatterOption(JSON.parse(JSON.stringify(BASE_SCATTER)), chart, this.terminalType)
       } else if (chart.type === 'treemap') {

frontend/src/views/chart/components/drag-item/utils.js

 export function getItemType(dimensionData, quotaData, item) {
+  // Check whether the current view is in template status
+  // ( dimensionData and quotaData have no data). If yes, return 'success' directly
+  if (dimensionData.length === 0 && quotaData.length === 0) {
+    return 'success'
+  }
   // 将item的字段在数据集维度、指标字段中查询一遍，如果遇到id不存在、字段类型不一致、维度指标不一致，则提示
   const status = item.groupType
   let checked = false

frontend/src/views/chart/components/normal/LabelNormal.vue

@@ -175,37 +175,38 @@ export default {
       if (this.chart.senior) {
         const senior = JSON.parse(this.chart.senior)
         if (senior.threshold && senior.threshold.labelThreshold && senior.threshold.labelThreshold.length > 0) {
-          const value = this.chart.data.series[0].data[0]
+          const value = parseFloat(this.chart.data.series[0].data[0])
           for (let i = 0; i < senior.threshold.labelThreshold.length; i++) {
             let flag = false
             const t = senior.threshold.labelThreshold[i]
+            const tv = parseFloat(t.value)
             if (t.term === 'eq') {
-              if (value === t.value) {
+              if (value === tv) {
                 this.label_content_class.color = t.color
                 flag = true
               }
             } else if (t.term === 'not_eq') {
-              if (value !== t.value) {
+              if (value !== tv) {
                 this.label_content_class.color = t.color
                 flag = true
               }
             } else if (t.term === 'lt') {
-              if (value < t.value) {
+              if (value < tv) {
                 this.label_content_class.color = t.color
                 flag = true
               }
             } else if (t.term === 'gt') {
-              if (value > t.value) {
+              if (value > tv) {
                 this.label_content_class.color = t.color
                 flag = true
               }
             } else if (t.term === 'le') {
-              if (value <= t.value) {
+              if (value <= tv) {
                 this.label_content_class.color = t.color
                 flag = true
               }
             } else if (t.term === 'ge') {
-              if (value >= t.value) {
+              if (value >= tv) {
                 this.label_content_class.color = t.color
                 flag = true
               }

frontend/src/views/chart/view/ChartEdit.vue

@@ -1178,7 +1178,6 @@ import bus from '@/utils/bus'
 import DatasetChartDetail from '../../dataset/common/DatasetChartDetail'
 // shape attr,component style
 import {
-  DEFAULT_BACKGROUND_COLOR,
   DEFAULT_COLOR_CASE,
   DEFAULT_FUNCTION_CFG,
   DEFAULT_LABEL,
@@ -1333,7 +1332,6 @@ export default {
           xAxis: DEFAULT_XAXIS_STYLE,
           yAxis: DEFAULT_YAXIS_STYLE,
           yAxisExt: DEFAULT_YAXIS_EXT_STYLE,
-          background: DEFAULT_BACKGROUND_COLOR,
           split: DEFAULT_SPLIT
         },
         senior: {
@@ -1472,7 +1470,8 @@ export default {
       })
       this.pluginRenderOptions = [...this.renderOptions, ...pluginOptions]
     },
-    emptyTableData() {
+    emptyTableData(id) {
+      console.log('emptyTableData:' + id)
       this.table = {}
       this.dimension = []
       this.quota = []
@@ -1500,8 +1499,11 @@ export default {
     initTableData(id, optType) {
       if (id != null) {
         post('/dataset/table/getWithPermission/' + id, null).then(response => {
-          this.table = response.data
-          this.initTableField(id, optType)
+          // If click too fast on the panel, the data here may be inconsistent, so make a verification
+          if (this.view.tableId === id) {
+            this.table = response.data
+            this.initTableField(id, optType)
+          }
         }).catch(err => {
           this.table = null
           this.resetDatasetField()
@@ -1514,17 +1516,20 @@ export default {
     initTableField(id, optType) {
       if (this.table) {
         post('/dataset/table/getFieldsFromDE', this.table).then(response => {
-          this.dimension = response.data.dimension
-          this.quota = response.data.quota
-          this.dimensionData = JSON.parse(JSON.stringify(this.dimension))
-          this.quotaData = JSON.parse(JSON.stringify(this.quota))
-          this.fieldFilter(this.searchField)
-          if (optType === 'change') {
-            this.resetChangeTable()
-            this.$nextTick(() => {
-              bus.$emit('reset-change-table', 'change')
-              this.calcData()
-            })
+          // If click too fast on the panel, the data here may be inconsistent, so make a verification
+          if (this.view.tableId === id) {
+            this.dimension = response.data.dimension
+            this.quota = response.data.quota
+            this.dimensionData = JSON.parse(JSON.stringify(this.dimension))
+            this.quotaData = JSON.parse(JSON.stringify(this.quota))
+            this.fieldFilter(this.searchField)
+            if (optType === 'change') {
+              this.resetChangeTable()
+              this.$nextTick(() => {
+                bus.$emit('reset-change-table', 'change')
+                this.calcData()
+              })
+            }
           }
         }).catch(err => {
           console.log(err)
@@ -1911,27 +1916,30 @@ export default {
     getChart(id, queryFrom = 'panel_edit') {
       if (id) {
         getChartDetails(id, this.panelInfo.id, { queryFrom: queryFrom }).then(response => {
-          if (response.data.dataFrom === 'template') {
-            this.emptyTableData()
-          } else {
-            this.initTableData(response.data.tableId)
+          // If click too fast on the panel, the data here may be inconsistent, so make a verification
+          if (response.data.id === this.param.id) {
+            if (response.data.dataFrom === 'template') {
+              this.emptyTableData(response.data.id)
+            } else {
+              this.initTableData(response.data.tableId)
+            }
+            this.view = JSON.parse(JSON.stringify(response.data))
+            this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
+            this.view.xaxisExt = this.view.xaxisExt ? JSON.parse(this.view.xaxisExt) : []
+            this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
+            this.view.yaxisExt = this.view.yaxisExt ? JSON.parse(this.view.yaxisExt) : []
+            this.view.extStack = this.view.extStack ? JSON.parse(this.view.extStack) : []
+            this.view.drillFields = this.view.drillFields ? JSON.parse(this.view.drillFields) : []
+            this.view.extBubble = this.view.extBubble ? JSON.parse(this.view.extBubble) : []
+            this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
+            this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
+            this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
+            this.view.senior = this.view.senior ? JSON.parse(this.view.senior) : {}
+
+            // 将视图传入echart组件
+            this.chart = response.data
+            this.data = response.data.data
           }
-          this.view = JSON.parse(JSON.stringify(response.data))
-          this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
-          this.view.xaxisExt = this.view.xaxisExt ? JSON.parse(this.view.xaxisExt) : []
-          this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
-          this.view.yaxisExt = this.view.yaxisExt ? JSON.parse(this.view.yaxisExt) : []
-          this.view.extStack = this.view.extStack ? JSON.parse(this.view.extStack) : []
-          this.view.drillFields = this.view.drillFields ? JSON.parse(this.view.drillFields) : []
-          this.view.extBubble = this.view.extBubble ? JSON.parse(this.view.extBubble) : []
-          this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
-          this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
-          this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
-          this.view.senior = this.view.senior ? JSON.parse(this.view.senior) : {}
-
-          // 将视图传入echart组件
-          this.chart = response.data
-          this.data = response.data.data
         }).catch(err => {
           this.httpRequest.status = err.response.data.success
           this.httpRequest.msg = err.response.data.message

frontend/src/views/panel/SubjectSetting/index.vue

@@ -23,16 +23,16 @@
             <panel-view-result class="attr-selector" />
           </el-row>
         </el-collapse-item>
-        <el-collapse-item :title="$t('chart.module_style')" name="component">
-          <el-row class="selector-div">
-            <panel-background-color-selector
-              v-if="chart"
-              class="attr-selector"
-              :chart="chart"
-              @onChangeBackgroundForm="onChangeBackgroundForm"
-            />
-          </el-row>
-        </el-collapse-item>
+<!--        <el-collapse-item :title="$t('chart.module_style')" name="component">-->
+<!--          <el-row class="selector-div">-->
+<!--            <panel-background-color-selector-->
+<!--              v-if="chart"-->
+<!--              class="attr-selector"-->
+<!--              :chart="chart"-->
+<!--              @onChangeBackgroundForm="onChangeBackgroundForm"-->
+<!--            />-->
+<!--          </el-row>-->
+<!--        </el-collapse-item>-->
         <el-collapse-item :title="$t('chart.shape_attr')" name="graphical">
           <el-row class="selector-div">
             <panel-color-selector

frontend/src/views/panel/edit/index.vue

@@ -949,6 +949,7 @@ export default {
             hyperlinks: HYPERLINKS,
             mobileStyle: BASE_MOBILE_STYLE,
             propValue: fileResult,
+            commonBackground: deepCopy(COMMON_BACKGROUND),
             style: {
               ...commonStyle
             }

frontend/src/views/panel/list/PanelViewShow.vue

@@ -307,8 +307,8 @@ export default {
               this.dataLoading = false
             }, 300)
           })
-        }, 500)
-      }, 0)
+        }, 1500)
+      }, 500)
     },
 
     downloadAsPDF() {

frontend/src/views/wizard/details/DemoVideo.vue

@@ -2,7 +2,7 @@
   <el-row class="demo_main">
     <div class="demo_title" />
     <div class="demo_content">
-      <a href="https://www.bilibili.com/video/BV1UB4y1K7jA" target="_blank">{{ $t('wizard.demo_video_hint') }}</a>
+      <a href="https://www.bilibili.com/video/BV1i34y1v7hq/" target="_blank">{{ $t('wizard.demo_video_hint') }}</a>
     </div>
   </el-row>
 </template>

frontend/src/views/wizard/index.vue

@@ -43,7 +43,7 @@ export default {
           head: this.$t('wizard.quick_start'),
           content: this.$t('wizard.demo_video_hint'),
           bottom: '',
-          href: 'https://www.bilibili.com/video/BV1UB4y1K7jA',
+          href: 'https://www.bilibili.com/video/BV1i34y1v7hq/',
           component: 'CardDetail'
         },
         {