feat(仪表板): 移动端支持自定义背景

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

@@ -220,15 +220,19 @@ export default {
         width: '100%'
       }
       if (this.canvasStyleData.openCommonStyle && this.isMainCanvas()) {
-        if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
+        const styleInfo = this.terminal === 'mobile' && this.canvasStyleData.panel.mobileSetting && this.canvasStyleData.panel.mobileSetting.customSetting
+          ? this.canvasStyleData.panel.mobileSetting : this.canvasStyleData.panel
+        if (styleInfo.backgroundType === 'image' && typeof (styleInfo.imageUrl) === 'string') {
           style = {
-            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
+            background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
-            ...style
           }
-        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
+        } else if (styleInfo.backgroundType === 'color') {
           style = {
-            background: this.canvasStyleData.panel.color,
+            background: styleInfo.color
-            ...style
+          }
+        } else {
+          style = {
+            background: '#f7f8fa'
           }
         }
       }

frontend/src/components/canvas/utils/utils.js

@@ -7,7 +7,7 @@ import {
 import { ApplicationContext } from '@/utils/ApplicationContext'
 import { uuid } from 'vue-uuid'
 import store from '@/store'
-import { AIDED_DESIGN, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel'
+import { AIDED_DESIGN, MOBILE_SETTING, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel'
 import html2canvas from 'html2canvasde'
 
 export function deepCopy(target) {
@@ -86,6 +86,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
   componentStyle.chartInfo.tabStyle = (componentStyle.chartInfo.tabStyle || deepCopy(TAB_COMMON_STYLE))
   componentStyle.themeId = (componentStyle.themeId || 'NO_THEME')
   componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')
+  componentStyle.panel.mobileSetting = (componentStyle.panel.mobileSetting || MOBILE_SETTING)
   componentData.forEach((item, index) => {
     if (item.component && item.component === 'de-date') {
       const widget = ApplicationContext.getService(item.serviceName)

frontend/src/lang/en.js

@@ -1865,6 +1865,8 @@ export default {
     sure_bt: 'Confirm'
   },
   panel: {
+    mobile_style_setting: 'Style setting',
+    mobile_style_setting_tips: 'Customize the mobile background',
     board: 'Border',
     text: 'Text',
     board_background: 'Background',

frontend/src/lang/tw.js

@@ -1865,6 +1865,8 @@ export default {
     sure_bt: '確定'
   },
   panel: {
+    mobile_style_setting: '樣式設置',
+    mobile_style_setting_tips: '自定義移動端背景',
     board: '邊框',
     text: '文字',
     board_background: '背景',

frontend/src/lang/zh.js

@@ -1865,6 +1865,8 @@ export default {
     sure_bt: '确定'
   },
   panel: {
+    mobile_style_setting: '样式设置',
+    mobile_style_setting_tips: '自定义移动端背景',
     board: '边框',
     text: '文字',
     board_background: '背景',

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

@@ -1,9 +1,22 @@
 <template>
   <el-row class="component-wait">
-    <el-row class="component-wait-title">
+    <el-tabs
-      {{ $t('panel.component_hidden') }}
+      v-model="activeName"
-    </el-row>
+    >
-    <el-row class="component-wait-main">
+      <el-tab-pane
+        :label="$t('panel.component_hidden')"
+        name="component-area"
+      />
+      <el-tab-pane
+        :label="$t('panel.mobile_style_setting')"
+        name="style-area"
+      />
+    </el-tabs>
+    <el-row
+      v-show="activeName === 'component-area'"
+      class="component-wait-main"
+      :style="mobileCanvasStyle"
+    >
       <el-col
         v-for="(config) in pcComponentData"
         v-if="!config.mobileSelected && config.canvasId === 'canvas-main'"
@@ -17,18 +30,25 @@
       </el-col>
 
     </el-row>
-
+    <el-row
+      v-show="activeName === 'style-area'"
+      class="component-wait-main"
+      style="padding:10px"
+    >
+      <mobile-background-selector />
+    </el-row>
   </el-row>
-
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import ComponentWaitItem from '@/views/panel/edit/ComponentWaitItem'
+import MobileBackgroundSelector from '@/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector'
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'ComponentWait',
-  components: { ComponentWaitItem },
+  components: { MobileBackgroundSelector, ComponentWaitItem },
   props: {
     template: {
       type: Object,
@@ -39,6 +59,7 @@ export default {
   },
   data() {
     return {
+      activeName: 'component-area',
       itemWidth: 280,
       itemHeight: 200,
       outStyle: {
@@ -48,6 +69,27 @@ export default {
     }
   },
   computed: {
+    mobileCanvasStyle() {
+      let style
+      if (this.canvasStyleData.openCommonStyle) {
+        const styleInfo = this.canvasStyleData.panel.mobileSetting && this.canvasStyleData.panel.mobileSetting.customSetting
+          ? this.canvasStyleData.panel.mobileSetting : this.canvasStyleData.panel
+        if (styleInfo.backgroundType === 'image' && typeof (styleInfo.imageUrl) === 'string') {
+          style = {
+            background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
+          }
+        } else if (styleInfo.backgroundType === 'color') {
+          style = {
+            background: styleInfo.color
+          }
+        } else {
+          style = {
+            background: '#f7f8fa'
+          }
+        }
+      }
+      return style
+    },
     // 移动端编辑组件选择按钮显示
     mobileCheckBarShow() {
       // 显示条件：1.当前是移动端画布编辑状态
@@ -62,36 +104,44 @@ export default {
     },
     ...mapState([
       'mobileLayoutStatus',
+      'canvasStyleData',
       'pcComponentData'
     ])
   },
-  methods: {
+  methods: {}
-  }
 }
 </script>
 
 <style scoped>
-  .component-wait{
+.component-wait {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-  }
+}
-  .component-wait-title {
+
-    width: 100%;
+.component-wait-title {
-    height: 30px;
+  width: 100%;
-    color: #FFFFFF;
+  height: 30px;
-    vertical-align: center;
+  color: #FFFFFF;
-    background-color: #9ea6b2;
+  vertical-align: center;
-    border-bottom: 1px black;
+  background-color: #9ea6b2;
-  }
+  border-bottom: 1px black;
-  .component-wait-main {
+}
-    width: 100%;
+
-    height: calc(100% - 30px);
+.component-wait-main {
-    float: left;
+  width: 100%;
-    overflow-y: auto;
+  height: calc(100% - 40px);
-  }
+  float: left;
-  .component-custom {
+  overflow-y: auto;
-    outline: none;
+}
-    width: 100% !important;
+
-    height: 100%;
+.component-custom {
-  }
+  outline: none;
+  width: 100% !important;
+  height: 100%;
+}
+
+::v-deep .el-tabs--top {
+  height: 40px !important;
+  background-color: #9ea6b2;
+}
 </style>

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

@@ -251,7 +251,6 @@
           <el-col
             :span="16"
             class="this_mobile_canvas_cell this_mobile_canvas_wait_cell"
-            :style="mobileCanvasStyle"
           >
             <component-wait />
           </el-col>
@@ -680,13 +679,15 @@ export default {
     mobileCanvasStyle() {
       let style
       if (this.canvasStyleData.openCommonStyle) {
-        if (this.canvasStyleData.panel.backgroundType === 'image' && typeof (this.canvasStyleData.panel.imageUrl) === 'string') {
+        const styleInfo = this.canvasStyleData.panel.mobileSetting && this.canvasStyleData.panel.mobileSetting.customSetting
+          ? this.canvasStyleData.panel.mobileSetting : this.canvasStyleData.panel
+        if (styleInfo.backgroundType === 'image' && typeof (styleInfo.imageUrl) === 'string') {
           style = {
-            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`
+            background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
           }
-        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
+        } else if (styleInfo.backgroundType === 'color') {
           style = {
-            background: this.canvasStyleData.panel.color
+            background: styleInfo.color
           }
         } else {
           style = {
@@ -1537,7 +1538,7 @@ export default {
 
 .this_mobile_canvas_wait_cell {
   background-size: 100% 100% !important;
-  border: 2px solid #9ea6b2
+  border: 1px solid #9ea6b2
 }
 
 .canvas_main_content {

frontend/src/views/panel/panel.js

@@ -29,7 +29,15 @@ export const FILTER_COMMON_STYLE_DARK = {
   innerBgColor: '#131E42'
 }
 
+export const MOBILE_SETTING = {
+  customSetting: false,
+  color: '#ffffff',
+  imageUrl: null,
+  backgroundType: 'image'
+}
+
 export const DEFAULT_PANEL_STYLE = {
+  mobileSetting: MOBILE_SETTING,
   themeColor: 'light',
   color: '#ffffff',
   imageUrl: null,

frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue

@@ -0,0 +1,268 @@
+<template>
+  <div style="width: 100%;margin-top: 12px">
+    <el-form
+      ref="overallMobileSettingForm"
+      size="mini"
+    >
+      <el-col>
+        <el-checkbox v-model="mobileSetting.customSetting">{{ $t('panel.mobile_style_setting_tips') }}</el-checkbox>
+      </el-col>
+      <el-col>
+        <el-radio-group
+          v-model="mobileSetting.backgroundType"
+          size="mini"
+          :disabled="!mobileSetting.customSetting"
+          @change="onChangeType()"
+        >
+          <el-radio label="color">{{ $t('chart.color') }}</el-radio>
+          <el-radio label="image">{{ $t('panel.photo') }}</el-radio>
+        </el-radio-group>
+      </el-col>
+      <el-col
+        v-show="mobileSetting.backgroundType==='color'"
+        :span="10"
+      >
+        <el-color-picker
+          v-model="mobileSetting.color"
+          :predefine="predefineColors"
+          size="mini"
+          class="color-picker-custom"
+          :disabled="!mobileSetting.customSetting"
+          @change="onChangeType"
+        />
+      </el-col>
+      <el-col
+        v-show="mobileSetting.backgroundType==='image'"
+        :span="10"
+      >
+        <el-upload
+          action=""
+          accept=".jpeg,.jpg,.png,.gif"
+          class="avatar-uploader"
+          list-type="picture-card"
+          :http-request="upload"
+          :class="{disabled:uploadDisabled}"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+          :disabled="!mobileSetting.customSetting"
+          :file-list="fileList"
+        >
+          <i class="el-icon-plus" />
+        </el-upload>
+        <el-dialog
+          top="25vh"
+          width="600px"
+          :modal-append-to-body="false"
+          :visible.sync="dialogVisible"
+        >
+          <img
+            width="100%"
+            :src="dialogImageUrl"
+            alt=""
+          >
+        </el-dialog>
+      </el-col>
+      <el-col v-show="mobileSetting.backgroundType==='image'">
+        <span
+          v-show="!mobileSetting.imageUrl"
+          class="image-hint"
+        >{{ $t('panel.panel_background_image_tips') }}</span>
+        <span
+          v-show="mobileSetting.imageUrl && mobileSetting.customSetting"
+          class="re-update-span"
+          @click="goFile"
+        >{{ $t('panel.reUpload') }}</span>
+      </el-col>
+      <input
+        id="input"
+        ref="files"
+        type="file"
+        accept=".jpeg,.jpg,.png,.gif"
+        hidden
+        @click="e => {e.target.value = '';}"
+        @change="reUpload"
+      >
+    </el-form>
+  </div>
+</template>
+
+<script>
+
+import { mapState } from 'vuex'
+import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
+import { COLOR_PANEL } from '@/views/chart/chart/chart'
+import { uploadFileResult } from '@/api/staticResource/staticResource'
+
+export default {
+  name: 'MobileBackgroundSelector',
+  data() {
+    return {
+      maxImageSize: 15000000,
+      fileList: [],
+      dialogImageUrl: '',
+      dialogVisible: false,
+      uploadDisabled: false,
+      mobileSetting: null,
+      predefineColors: COLOR_PANEL
+    }
+  },
+  computed: mapState([
+    'canvasStyleData'
+  ]),
+  watch: {
+    // deep监听panel 如果改变 提交到 store
+  },
+  created() {
+    // 初始化赋值
+    this.mobileSetting = this.canvasStyleData.panel.mobileSetting
+    if (this.mobileSetting.imageUrl && typeof (this.mobileSetting.imageUrl) === 'string') {
+      this.fileList.push({ url: imgUrlTrans(this.mobileSetting.imageUrl) })
+    }
+  },
+  methods: {
+    goFile() {
+      this.$refs.files.click()
+    },
+    commitStyle() {
+      const canvasStyleData = deepCopy(this.canvasStyleData)
+      canvasStyleData.panel.mobileSetting = this.mobileSetting
+      this.$store.commit('setCanvasStyle', canvasStyleData)
+      this.$store.commit('recordSnapshot', 'commitStyle')
+    },
+    onChangeType() {
+      this.commitStyle()
+    },
+    handleRemove(file, fileList) {
+      this.uploadDisabled = false
+      this.mobileSetting.imageUrl = null
+      this.fileList = []
+      this.commitStyle()
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    upload(file) {
+      const _this = this
+      if (file.size > this.maxImageSize) {
+        this.sizeMessage()
+      }
+      uploadFileResult(file.file, (fileUrl) => {
+        _this.$store.commit('canvasChange')
+        _this.mobileSetting.imageUrl = fileUrl
+        _this.fileList = [{ url: imgUrlTrans(this.mobileSetting.imageUrl) }]
+        _this.commitStyle()
+      })
+    },
+    reUpload(e) {
+      const file = e.target.files[0]
+      const _this = this
+      if (file.size > this.maxImageSize) {
+        this.sizeMessage()
+      }
+      uploadFileResult(file, (fileUrl) => {
+        _this.$store.commit('canvasChange')
+        _this.mobileSetting.imageUrl = fileUrl
+        _this.fileList = [{ url: imgUrlTrans(this.mobileSetting.imageUrl) }]
+        _this.commitStyle()
+      })
+    },
+    sizeMessage() {
+      this.$notify({
+        message: this.$t('panel.image_size_tips'),
+        position: 'top-left'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.avatar-uploader {
+  position: relative;
+  margin-left: 0px;
+  margin-top: 8px;
+  height: 80px;
+  width: 80px;
+  line-height: 80px;
+  overflow: hidden;
+}
+
+.avatar-uploader ::v-deep .el-upload {
+  width: 80px;
+  height: 80px;
+  line-height: 80px;
+}
+
+.avatar-uploader ::v-deep .el-upload-list li {
+  width: 80px !important;
+  height: 80px !important;
+}
+
+.disabled ::v-deep .el-upload--picture-card {
+  display: none;
+}
+
+.shape-item {
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.form-item-slider ::v-deep .el-form-item__label {
+  font-size: 12px;
+  line-height: 38px;
+}
+
+.form-item ::v-deep .el-form-item__label {
+  font-size: 12px;
+}
+
+.el-select-dropdown__item {
+  padding: 0 20px;
+}
+
+span {
+  font-size: 12px
+}
+
+.el-form-item {
+  margin-bottom: 6px;
+}
+
+.color-picker-custom {
+  margin-left: 0px;
+  cursor: pointer;
+  margin-top: 8px;
+  z-index: 1004;
+}
+
+.custom-item {
+  width: 70px;
+}
+
+.re-update-span {
+  cursor: pointer;
+  color: #3370FF;
+  size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
+
+.image-hint {
+  color: #8F959E;
+  size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
+
+.custom-item-text {
+  font-weight: 400 !important;
+  font-size: 14px !important;
+  color: var(--TextPrimary, #1F2329) !important;
+  line-height: 22px;
+}
+</style>