feat: 仪表板编辑视图支持批量设置样式 (#2238)

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

@@ -173,4 +173,11 @@ public class ChartViewController {
         return chartViewService.getFieldData(id, requestList, false, fieldId);
     }
 
+    @ApiIgnore
+    @ApiOperation("更新视图属性")
+    @PostMapping("/viewPropsSave/{panelId}")
+    public void  viewPropsSave(@PathVariable String panelId, @RequestBody ChartViewWithBLOBs chartViewWithBLOBs) {
+         chartViewService.viewPropsSave(chartViewWithBLOBs);
+    }
+
 }

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

@@ -1423,4 +1423,14 @@ public class ChartViewService {
         return res;
     }
 
+    /**
+     * @param chartView
+     * @Description Save the properties and style information of the view
+     */
+    public void viewPropsSave(ChartViewWithBLOBs chartView) {
+        long timestamp = System.currentTimeMillis();
+        chartView.setUpdateTime(timestamp);
+        chartViewMapper.updateByPrimaryKeySelective(chartView);
+    }
+
 }

frontend/src/api/chart/chart.js

@@ -125,3 +125,12 @@ export function checkTitle(data) {
     loading: false
   })
 }
+
+export function viewPropsSave(panelId, data) {
+  return request({
+    url: '/chart/view/viewPropsSave/' + panelId,
+    method: 'post',
+    loading: false,
+    data
+  })
+}

frontend/src/components/DeDrag/index.vue

@@ -11,6 +11,7 @@
         [classNameRotatable]: rotatable,
         [classNameActive]: enabled ,
         ['linkageSetting']:linkageActive,
+        ['batchSetting']:batchOptActive,
         ['positionChange']:!(dragging || resizing||rotating)
       },
       className
@@ -332,6 +333,11 @@ export default {
     linkageActive: {
       type: Boolean,
       default: false
+    },
+    // batch operation
+    batchOptActive: {
+      type: Boolean,
+      default: false
     }
   },
   data: function() {
@@ -381,8 +387,8 @@ export default {
   computed: {
     // 编辑组件显示
     editBarShow() {
-      // 编辑组件显示条件：1.当前组件存在 2.组件是激活状态或者当前在联动设置撞他 3.当前不在移动端画布编辑状态
-      return this.curComponent && (this.active || this.linkageSettingStatus) && !this.mobileLayoutStatus
+      // 编辑组件显示条件：1.当前组件存在 2.组件是激活状态或者当前在联动设置状态 3.当前不在移动端画布编辑状态 4.或者批量操作状态
+      return (this.curComponent && (this.active || this.linkageSettingStatus) && !this.mobileLayoutStatus) || this.batchOptStatus
     },
     // 移动端编辑组件选择按钮显示
     mobileCheckBarShow() {
@@ -580,7 +586,8 @@ export default {
       'linkageSettingStatus',
       'mobileLayoutStatus',
       'componentGap',
-      'scrollAutoMove'
+      'scrollAutoMove',
+      'batchOptStatus'
     ])
   },
   watch: {
@@ -1858,6 +1865,10 @@ export default {
   opacity: 0.5;
 }
 
+.batchSetting{
+  opacity: 0.7;
+}
+
 .positionChange{
   transition: 0.2s
 }

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

@@ -5,6 +5,9 @@
       <el-checkbox v-model="linkageInfo.linkageActive" />
       <linkage-field v-if="linkageInfo.linkageActive" :element="element" />
     </div>
+    <div v-if="batchOptAreaShow" style="margin-right: -1px;width: 18px;z-index: 5">
+      <el-checkbox @change="batchOptChange" />
+    </div>
     <div v-if="normalAreaShow">
       <setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;" @amRemoveItem="amRemoveItem" @linkJumpSet="linkJumpSet" @boardSet="boardSet">
         <span slot="icon" :title="$t('panel.setting')">
@@ -44,10 +47,9 @@ import bus from '@/utils/bus'
 import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
 import LinkageField from '@/components/canvas/components/Editor/LinkageField'
 import toast from '@/components/canvas/utils/toast'
-import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
 
 export default {
-  components: { Hyperlinks, SettingMenu, LinkageField },
+  components: { SettingMenu, LinkageField },
 
   props: {
     element: {
@@ -87,13 +89,17 @@ export default {
     showJumpFlag() {
       return this.curComponent && this.curComponent.hyperlinks && this.curComponent.hyperlinks.enable
     },
+    // batch operation area
+    batchOptAreaShow() {
+      return this.batchOptStatus && this.element.type === 'view'
+    },
     // 联动区域按钮显示
     linkageAreaShow() {
       return this.linkageSettingStatus && this.element !== this.curLinkageView && this.element.type === 'view'
     },
     // 编辑或预览区域显示
     normalAreaShow() {
-      return !this.linkageSettingStatus
+      return !this.linkageSettingStatus && !this.batchOptStatus
     },
     existLinkage() {
       let linkageFiltersCount = 0
@@ -131,7 +137,9 @@ export default {
       'linkageSettingStatus',
       'targetLinkageInfo',
       'curLinkageView',
-      'curCanvasScale'
+      'curCanvasScale',
+      'batchOptStatus',
+      'curBatchOptComponents'
     ])
   },
   beforeDestroy() {
@@ -264,6 +272,17 @@ export default {
     },
     boardSet() {
       this.$emit('boardSet')
+    },
+    batchOptChange(val) {
+      if (val) {
+        // push
+        this.$store.commit('addCurBatchComponent', this.element.propValue.viewId)
+        console.log('push')
+      } else {
+        // remove
+        this.$store.commit('removeCurBatchComponentWithId', this.element.propValue.viewId)
+        console.log('remove')
+      }
     }
   }
 }
@@ -279,7 +298,7 @@ export default {
     padding-left: 5px;
     padding-right: 2px;
     cursor:pointer!important;
-    background-color: #0a7be0;
+    background-color: rgba(10,123,224, 1);
   }
   .bar-main i{
     color: white;

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

@@ -41,9 +41,10 @@
       :snap="true"
       :snap-tolerance="2"
       :change-style="customStyle"
-      :draggable="!linkageSettingStatus"
-      :resizable="!linkageSettingStatus"
-      :linkage-active="linkageSettingStatus&&item===curLinkageView"
+      :draggable="deDraggable"
+      :resizable="deResizable"
+      :linkage-active="linkageActiveCheck(item)"
+      :batch-opt-active="batchOptActiveCheck(item)"
       @refLineParams="getRefLineParams"
       @showViewDetails="showViewDetails(index)"
       @resizeView="resizeView(index,item)"
@@ -955,6 +956,12 @@ export default {
     }
   },
   computed: {
+    deDraggable() {
+      return !this.linkageSettingStatus && !this.batchOptStatus
+    },
+    deResizable() {
+      return !this.linkageSettingStatus && !this.batchOptStatus
+    },
     showExportImgButton() {
       // if the chart type belong to table,'export image' button should be hidden
       return this.showChartInfo.type && !this.showChartInfo.type.includes('table')
@@ -1016,7 +1023,8 @@ export default {
       'doSnapshotIndex',
       'componentGap',
       'mobileLayoutStatus',
-      'curCanvasScale'
+      'curCanvasScale',
+      'batchOptStatus'
     ]),
     filterMap() {
       return buildFilterMap(this.componentData)
@@ -1090,6 +1098,12 @@ export default {
   created() {
   },
   methods: {
+    linkageActiveCheck(item) {
+      return this.linkageSettingStatus && item === this.curLinkageView
+    },
+    batchOptActiveCheck(item) {
+      return this.batchOptStatus && item.type === 'view'
+    },
     canvasInit() {
       this.editShow = false
       setTimeout(() => {

frontend/src/components/canvas/components/Toolbar.vue

@@ -47,6 +47,9 @@
       <el-tooltip v-if="canvasStyleData.aidedDesign.showGrid" :content="$t('panel.aided_grid')+':'+$t('panel.aided_grid_open')">
         <el-button class="icon iconfont-tb icon-wangge-open" size="mini" circle @click="showGridChange" />
       </el-tooltip>
+      <el-tooltip :content="$t('panel.batch_opt')">
+        <el-button class="icon iconfont-tb icon-piliang-copy" size="mini" circle @click="batchOption" />
+      </el-tooltip>
       <span style="float: right;margin-left: 10px">
         <el-button size="mini" :disabled="saveButtonDisabled" @click="save(false)">
           {{ $t('commons.save') }}
@@ -135,7 +138,8 @@ export default {
       'targetLinkageInfo',
       'mobileLayoutStatus',
       'mobileComponentData',
-      'componentDataCache'
+      'componentDataCache',
+      'batchOptStatus'
     ])
   },
   created() {
@@ -382,6 +386,11 @@ export default {
       this.$store.state.styleChangeTimes++
       this.canvasStyleData.aidedDesign.showGrid = !this.canvasStyleData.aidedDesign.showGrid
     },
+    // batch option
+    batchOption() {
+      bus.$emit('change_panel_right_draw', !this.batchOptStatus)
+      this.$store.commit('setBatchOptStatus', !this.batchOptStatus)
+    },
     // 启用移动端布局
     openMobileLayout() {
       this.$store.commit('openMobileLayout')

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

@@ -115,6 +115,7 @@ import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/componen
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
+import { viewPropsSave } from '@/api/chart/chart'
 export default {
   name: 'UserView',
   components: { LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
@@ -185,8 +186,14 @@ export default {
       changeScaleIndex: 0,
       pre: null,
       preCanvasPanel: null,
+      // string
       sourceCustomAttrStr: null,
+      // obj
+      sourceCustomAttr: null,
+      // string
       sourceCustomStyleStr: null,
+      // obj
+      sourceCustomStyle: null,
       scale: 1
     }
   },
@@ -299,7 +306,8 @@ export default {
       'mobileLayoutStatus',
       'componentData',
       'panelViewDetailsInfo',
-      'componentViewsData'
+      'componentViewsData',
+      'curBatchOptComponents'
     ])
   },
 
@@ -392,6 +400,30 @@ export default {
     }
   },
   methods: {
+    batchOptChange(param) {
+      if (this.curBatchOptComponents.includes(this.element.propValue.viewId)) {
+        this.$store.state.styleChangeTimes++
+        // stylePriority change to 'view'
+        const updateParams = { 'id': this.chart.id, 'stylePriority': 'view' }
+        if (param.custom === 'customAttr') {
+          const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
+          sourceCustomAttr[param.property] = param.value
+          this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
+          this.chart.customAttr = this.sourceCustomAttrStr
+          updateParams['customAttr'] = this.sourceCustomAttrStr
+        } else if (param.custom === 'customStyle') {
+          this.sourceCustomStyleStr = this.chart.customStyle
+          const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
+          sourceCustomStyle[param.property] = param.value
+          this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
+          this.chart.customStyle = this.sourceCustomStyleStr
+          updateParams['customStyle'] = this.sourceCustomStyleStr
+        }
+        viewPropsSave(this.panelInfo.id, updateParams)
+        this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
+        this.mergeScale()
+      }
+    },
     resizeChart() {
       if (this.chart.type === 'map') {
         this.destroyTimeMachine()
@@ -416,6 +448,9 @@ export default {
       bus.$on('view-in-cache', param => {
         param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
       })
+      bus.$on('batch-opt-change', param => {
+        this.batchOptChange(param)
+      })
     },
 
     addViewTrackFilter(linkageParam) {
@@ -488,7 +523,10 @@ export default {
             this.chart = response.data
             if (this.isEdit) {
               this.componentViewsData[this.chart.id] = {
-                'title': this.chart.title
+                'title': this.chart.title,
+                'render': this.chart.render,
+                'type': this.chart.type,
+                'isPlugin': this.chart.isPlugin
               }
             }
             this.chart['position'] = this.inTab ? 'tab' : 'panel'
@@ -797,7 +835,6 @@ export default {
         this.sourceCustomAttrStr = this.chart.customAttr
         this.sourceCustomStyleStr = this.chart.customStyle
         this.mergeScale()
-        this.mergeStyle()
       }
     }
   }

frontend/src/lang/en.js

@@ -1430,6 +1430,7 @@ export default {
     sure_bt: 'Confirm'
   },
   panel: {
+    batch_opt: 'Batch Operation',
     edit_leave_tips: 'Do You Want To Abandon And Leave The Current Page?',
     hyperlinks: 'Hyperlinks',
     is_live: 'Is Live',

frontend/src/lang/tw.js

@@ -1431,6 +1431,7 @@ export default {
     sure_bt: '確定'
   },
   panel: {
+    batch_opt: '批量操作',
     edit_leave_tips: '是否放弃编辑离开当前界面？',
     hyperlinks: '超鏈接',
     is_live: '是否直播',

frontend/src/lang/zh.js

@@ -1438,6 +1438,7 @@ export default {
     sure_bt: '确定'
   },
   panel: {
+    batch_opt: '批量操作',
     edit_leave_tips: '是否放弃编辑离开当前界面？',
     hyperlinks: '超链接',
     is_live: '是否直播',

frontend/src/store/index.js

@@ -29,6 +29,8 @@ import {
 } from '@/views/panel/panel'
 import bus from '@/utils/bus'
 import { BASE_MOBILE_STYLE } from '@/components/canvas/custom-component/component-list'
+import { TYPE_CONFIGS } from '@/views/chart/chart/util'
+import { deepCopy } from '@/components/canvas/utils/utils'
 
 Vue.use(Vuex)
 
@@ -111,7 +113,19 @@ const data = {
     // 当前tab页内组件
     curActiveTabInner: null,
     // static resource local path
-    staticResourcePath: '/static-resource/'
+    staticResourcePath: '/static-resource/',
+    // panel edit batch operation status
+    batchOptStatus: false,
+    // Currently selected components
+    curBatchOptComponents: [],
+    mixProperties: [],
+    batchOptChartInfo: null,
+    batchOptViews: {},
+    // properties changed
+    changeProperties: {
+      customStyle: {},
+      customAttr: {}
+    }
   },
   mutations: {
     ...animation.mutations,
@@ -512,6 +526,115 @@ const data = {
     },
     resetViewEditInfo(state) {
       state.panelViewEditInfo = {}
+    },
+    removeCurBatchComponentWithId(state, id) {
+      for (let index = 0; index < state.curBatchOptComponents.length; index++) {
+        const element = state.curBatchOptComponents[index]
+        if (element === id) {
+          delete state.batchOptViews[id]
+          state.curBatchOptComponents.splice(index, 1)
+          this.commit('setBatchOptChartInfo')
+          break
+        }
+      }
+    },
+    addCurBatchComponent(state, id) {
+      if (id) {
+        state.curBatchOptComponents.push(id)
+        // get view base info
+        const viewBaseInfo = state.componentViewsData[id]
+        // get properties
+        const viewConfig = TYPE_CONFIGS.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
+        const viewProperties = viewConfig ? viewConfig[0].properties : []
+        if (state.mixProperties.length > 0) {
+          // If it exists , taking the intersection
+          state.mixProperties = state.mixProperties.filter(property => viewProperties.indexOf(property) > -1)
+        } else {
+          // If it doesn't exist, assignment directly
+          state.mixProperties = deepCopy(viewProperties)
+        }
+
+        if (viewConfig && viewConfig.length > 0) {
+          state.batchOptViews[id] = viewConfig[0]
+          this.commit('setBatchOptChartInfo')
+        }
+      }
+    },
+    setBatchOptChartInfo(state) {
+      let render = null
+      let type = null
+      let isPlugin = null
+      state.mixProperties = []
+      if (state.batchOptViews && JSON.stringify(state.batchOptViews) !== '{}') {
+        for (const key in state.batchOptViews) {
+          if (state.mixProperties.length > 0) {
+            // If it exists , taking the intersection
+            state.mixProperties = state.mixProperties.filter(property => state.batchOptViews[key].properties.indexOf(property) > -1)
+          } else {
+            // If it doesn't exist, assignment directly
+            state.mixProperties = deepCopy(state.batchOptViews[key].properties)
+          }
+
+          if (render && render !== state.batchOptViews[key].render) {
+            render = 'mix'
+          } else {
+            render = state.batchOptViews[key].render
+          }
+
+          if (type && type !== state.batchOptViews[key].value) {
+            type = 'mix'
+          } else {
+            type = state.batchOptViews[key].value
+          }
+
+          if (isPlugin && isPlugin !== state.batchOptViews[key].isPlugin) {
+            isPlugin = 'mix'
+          } else {
+            isPlugin = state.batchOptViews[key].isPlugin
+          }
+        }
+        // Assembly history settings 'customAttr' & 'customStyle'
+        state.batchOptChartInfo = {
+          'mode': 'batchOpt',
+          'render': render,
+          'type': type,
+          'isPlugin': isPlugin,
+          'customAttr': state.changeProperties.customAttr,
+          'customStyle': state.changeProperties.customStyle
+        }
+      } else {
+        state.batchOptChartInfo = null
+      }
+    },
+    setBatchOptStatus(state, status) {
+      state.batchOptStatus = status
+      // Currently selected components
+      state.curBatchOptComponents = []
+      state.mixProperties = []
+      state.batchOptChartInfo = null
+      state.batchOptViews = {}
+      state.changeProperties = {
+        customStyle: {},
+        customAttr: {}
+      }
+    },
+    setChangeProperties(state, propertyInfo) {
+      state.changeProperties[propertyInfo.custom][propertyInfo.property] = propertyInfo.value
+    },
+    initCanvas(state) {
+      this.commit('setCurComponent', { component: null, index: null })
+      this.commit('clearLinkageSettingInfo', false)
+      this.commit('resetViewEditInfo')
+      state.batchOptStatus = false
+      // Currently selected components
+      state.curBatchOptComponents = []
+      state.mixProperties = []
+      state.batchOptChartInfo = null
+      state.batchOptViews = {}
+      state.changeProperties = {
+        customStyle: {},
+        customAttr: {}
+      }
     }
   },
   modules: {

frontend/src/views/chart/components/shape-attr/SizeSelectorCommon.vue

+<template>
+  <div style="width: 100%" >
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SizeSelector',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  watch: {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -652,9 +652,11 @@
         </el-tab-pane>
         <el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 300px">
           <chart-style
+            v-if="chartProperties"
             :param="param"
             :view="view"
             :chart="chart"
+            :properties="chartProperties"
             @calcStyle="calcStyle"
             @onColorChange="onColorChange"
             @onSizeChange="onSizeChange"
@@ -1015,9 +1017,12 @@ import { pluginTypes } from '@/api/chart/chart'
 import ValueFormatterEdit from '@/views/chart/components/value-formatter/ValueFormatterEdit'
 import ChartStyle from '@/views/chart/view/ChartStyle'
 import CustomSortEdit from '@/views/chart/components/compare/CustomSortEdit'
+import { TYPE_CONFIGS } from '@/views/chart/chart/util'
+import ChartStyleBack from '@/views/chart/view/ChartStyleBack'
 export default {
   name: 'ChartEdit',
   components: {
+    ChartStyleBack,
     CustomSortEdit,
     ChartStyle,
     ValueFormatterEdit,
@@ -1159,6 +1164,19 @@ export default {
     }
   },
   computed: {
+    chartProperties() {
+      const _this = this
+      if (_this.chart && _this.chart.render) {
+        const viewConfig = TYPE_CONFIGS.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
+        if (viewConfig) {
+          return viewConfig[0].properties
+        } else {
+          return null
+        }
+      } else {
+        return null
+      }
+    },
     chartType() {
       return this.chart.type
     },

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

+<template>
+  <div class="batch-opt-main">
+    <el-row style="height: 40px">
+      <span class="title-text view-title-name" style="line-height: 40px;">{{ $t('panel.batch_opt') }}</span>
+    </el-row>
+    <chart-style
+      v-if="mixProperties&&batchOptChartInfo"
+      :param="param"
+      :view="batchOptChartInfo"
+      :chart="batchOptChartInfo"
+      :properties="mixProperties"
+      @calcStyle="calcStyle"
+      @onColorChange="onColorChange"
+      @onSizeChange="onSizeChange"
+      @onLabelChange="onLabelChange"
+      @onTooltipChange="onTooltipChange"
+      @onTotalCfgChange="onTotalCfgChange"
+      @onChangeXAxisForm="onChangeXAxisForm"
+      @onChangeYAxisForm="onChangeYAxisForm"
+      @onChangeYAxisExtForm="onChangeYAxisExtForm"
+      @onChangeSplitForm="onChangeSplitForm"
+      @onTextChange="onTextChange"
+      @onLegendChange="onLegendChange"
+    />
+    <el-row v-else>
+      <div class="view-selected-message-class">
+        <span style="font-size: 14px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.select_view') }}</span>
+      </div>
+    </el-row>
+  </div>
+
+</template>
+
+<script>
+import ChartStyle from '@/views/chart/view/ChartStyle'
+import { mapState } from 'vuex'
+import bus from '@/utils/bus'
+export default {
+  name: 'ChartStyleBatchSet',
+  components: { ChartStyle },
+  props: {
+
+  },
+  data() {
+    return {
+      param: { 'id': 'mixId', 'optType': 'edit' }
+    }
+  },
+  computed: {
+    ...mapState([
+      'batchOptChartInfo',
+      'mixProperties'
+    ])
+  },
+  watch: {
+  },
+  mounted() {
+  },
+  methods: {
+    calcStyle() {
+      this.$emit('calcStyle')
+    },
+    onColorChange(val) {
+      this.batchOptChange('customAttr', 'color', val)
+    },
+    onSizeChange(val) {
+      this.batchOptChange('customAttr', 'size', val)
+    },
+    onLabelChange(val) {
+      this.batchOptChange('customAttr', 'label', val)
+    },
+    onTooltipChange(val) {
+      this.batchOptChange('customAttr', 'tooltip', val)
+    },
+    onTotalCfgChange(val) {
+      this.batchOptChange('customAttr', 'totalCfg', val)
+    },
+    onChangeXAxisForm(val) {
+      this.batchOptChange('customStyle', 'xAxis', val)
+    },
+    onChangeYAxisForm(val) {
+      this.batchOptChange('customStyle', 'xAxis', val)
+    },
+    onChangeYAxisExtForm(val) {
+      this.batchOptChange('customStyle', 'yAxis', val)
+    },
+    onChangeSplitForm(val) {
+      this.batchOptChange('customStyle', 'split', val)
+    },
+    onTextChange(val) {
+      this.batchOptChange('customStyle', 'text', val)
+    },
+    onLegendChange(val) {
+      this.batchOptChange('customStyle', 'legend', val)
+    },
+    batchOptChange(custom, property, value) {
+      this.$store.commit('setChangeProperties', {
+        'custom': custom,
+        'property': property,
+        'value': value
+      })
+      bus.$emit('batch-opt-change', {
+        'custom': custom,
+        'property': property,
+        'value': value
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+  .view-selected-message-class {
+    font-size: 12px;
+    color: #9ea6b2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(100vh - 35px);
+  }
+
+  .batch-opt-main{
+    height:  calc(100vh - 35px);
+    overflow-y: hidden;
+    width: 100%;
+    border-left: 1px solid #E6E6E6
+  }
+
+  .view-title-name {
+    display: -moz-inline-box;
+    display: inline-block;
+    width: 130px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-left: 10px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #9ea6b2;
+  }
+</style>

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

@@ -226,11 +226,14 @@
         </el-row>
       </de-main-container>
 
-      <div v-if="!mobileLayoutStatus&&rightDrawOpen" class="tools-window-main">
-        <div v-if="showViewToolsAside">
-          <chart-edit v-if="curComponent" ref="chartEditRef" :edit-from="'panel'" :param="chartEditParam" />
+      <div v-show="!mobileLayoutStatus&&rightDrawOpen" class="tools-window-main">
+        <div v-show="showViewToolsAside">
+          <chart-edit ref="chartEditRef" :edit-from="'panel'" :param="chartEditParam" />
         </div>
-        <div v-if="!showViewToolsAside">
+        <div v-show="showBatchViewToolsAside">
+          <chart-style-batch-set />
+        </div>
+        <div v-show="!showViewToolsAside&&!showBatchViewToolsAside">
           <el-row style="height: 40px">
             <el-tooltip :content="$t('chart.draw_back')">
               <el-button class="el-icon-d-arrow-right" style="position:absolute;left: 4px;top: 5px;" size="mini" circle @click="changeRightDrawOpen(false)" />
@@ -368,10 +371,12 @@ import ComponentWait from '@/views/panel/edit/ComponentWait'
 import { deleteEnshrine, saveEnshrine, starStatus } from '@/api/panel/enshrine'
 import ChartEdit from '@/views/chart/view/ChartEdit'
 import OuterParamsSet from '@/views/panel/OuterParamsSet/index'
+import ChartStyleBatchSet from '@/views/chart/view/ChartStyleBatchSet'
 
 export default {
   name: 'PanelEdit',
   components: {
+    ChartStyleBatchSet,
     OuterParamsSet,
     ComponentWait,
     DeMainContainer,
@@ -473,7 +478,10 @@ export default {
     },
     // 显示视图工具栏
     showViewToolsAside() {
-      return this.curComponent && (this.curComponent.type === 'view' || this.curComponent.type === 'de-tabs')
+      return !this.batchOptStatus && this.curComponent && (this.curComponent.type === 'view' || this.curComponent.type === 'de-tabs')
+    },
+    showBatchViewToolsAside() {
+      return this.batchOptStatus
     },
     showViewToolAsideType() {
       if (this.curComponent) {
@@ -571,7 +579,8 @@ export default {
       'pcMatrixCount',
       'mobileMatrixCount',
       'mobileLayoutStyle',
-      'scrollAutoMove'
+      'scrollAutoMove',
+      'batchOptStatus'
     ])
   },
 
@@ -598,13 +607,6 @@ export default {
   },
   created() {
     this.init(this.$store.state.panel.panelInfo.id)
-    // this.restore()
-    // 全局监听按键事件
-    // listenGlobalKeyDown()
-
-    this.$store.commit('setCurComponent', { component: null, index: null })
-    this.$store.commit('clearLinkageSettingInfo', false)
-    this.$store.commit('resetViewEditInfo')
   },
   mounted() {
     // this.insertToBody()
@@ -657,6 +659,7 @@ export default {
     init(panelId) {
       const _this = this
       _this.initHasStar()
+      this.$store.commit('initCanvas')
       if (panelId) {
         initPanelData(panelId, function() {
           // 初始化视图缓存