feat: 仪表板组件背景支持上传图片

frontend/src/components/DeDrag/index.vue

@@ -30,7 +30,7 @@
       ]"
       :style="mainSlotStyle"
     >
-      <edit-bar v-if="editBarShow" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" @linkJumpSet="linkJumpSet"  @boardSet="boardSet" />
+      <edit-bar v-if="editBarShow" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" @linkJumpSet="linkJumpSet" @boardSet="boardSet" />
       <mobile-check-bar v-if="mobileCheckBarShow" :element="element" @amRemoveItem="amRemoveItem" />
       <div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
       <div
@@ -532,7 +532,11 @@ export default {
         height: this.computedMainSlotHeight
       }
       if (this.element.commonBackground.enable) {
-        style['background'] = `url(${this.element.commonBackground.innerImage}) no-repeat`
+        if (this.element.commonBackground.backgroundType === 'innerImage') {
+          style['background'] = `url(${this.element.commonBackground.innerImage}) no-repeat`
+        } else if (this.element.commonBackground.backgroundType === 'outerImage') {
+          style['background'] = `url(${this.element.commonBackground.outerImage}) no-repeat`
+        }
         style['background-size'] = `100% 100%`
       }
       return style

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

@@ -95,7 +95,11 @@ export default {
         height: '100%'
       }
       if (this.config.commonBackground.enable) {
-        style['background'] = `url(${this.config.commonBackground.innerImage}) no-repeat`
+        if (this.config.commonBackground.backgroundType === 'innerImage') {
+          style['background'] = `url(${this.config.commonBackground.innerImage}) no-repeat`
+        } else if (this.config.commonBackground.backgroundType === 'outerImage') {
+          style['background'] = `url(${this.config.commonBackground.outerImage}) no-repeat`
+        }
         style['background-size'] = `100% 100%`
       }
       return style

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

@@ -172,7 +172,6 @@
     <el-dialog
       :visible.sync="boardSetVisible"
       width="750px"
-      :title="$t('panel.choose_border')"
       class="dialog-css"
       :show-close="false"
       :destroy-on-close="true"

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

@@ -19,10 +19,12 @@ export const BASE_MOBILE_STYLE = {
 // 公共背景
 export const COMMON_BACKGROUND = {
   enable: false,
-  backgroundType: 'color',
+  backgroundType: 'innerImage',
   color: '#FFFFFF',
   innerImage: null,
-  outerImage: null
+  outerImage: null,
+  alpha: 100,
+  borderRadius: 5
 }
 
 // 公共样式

frontend/src/lang/en.js

@@ -1556,7 +1556,8 @@ export default {
     input_title: 'Input Title',
     show_title: 'Show Title',
     default_settings: 'Default Settings',
-    choose_border: 'Choose Border'
+    choose_background: 'Choose Component Background',
+    choose_background_tips: 'The component`s own background settings will overwrite the current settings'
   },
   plugin: {
     local_install: 'Local installation',

frontend/src/lang/tw.js

@@ -1557,7 +1557,8 @@ export default {
     input_title: '請輸入標題',
     show_title: '顯示標題',
     default_settings: '默認值設置',
-    choose_border: '选择边框'
+    choose_background: '选择组件背景',
+    choose_background_tips: '组件自有的背景设置会覆盖当前设置'
   },
   plugin: {
     local_install: '本地安裝',

frontend/src/lang/zh.js

@@ -1566,7 +1566,8 @@ export default {
     input_title: '请输入标题',
     show_title: '显示标题',
     default_settings: '默认值设置',
-    choose_border: '选择边框'
+    choose_background: '选择组件背景',
+    choose_background_tips: '组件自有的背景设置会覆盖当前设置'
   },
   plugin: {
     local_install: '本地安装',

frontend/src/views/background/BackgroundItem.vue

@@ -10,9 +10,7 @@
       :style="classBackground"
       @click.stop="setBoard"
     />
-    <el-tooltip class="item" effect="light" :content="template.name" placement="bottom">
       <span class="demonstration">{{ template.name }}</span>
-    </el-tooltip>
   </div>
 </template>
 
@@ -59,25 +57,25 @@ export default {
 
   .testcase-template {
     display: inline-block;
-    margin: 10px 30px;
+    margin: 10px 0px;
-    width: 150px;
+    width: 90px;
   }
 
   .demonstration {
     display: block;
-    font-size: 14px;
+    font-size: 8px;
     color: gray;
     text-align: center;
     margin: 10px auto;
-    width: 150px;
+    width: 130px;
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
   }
 
   .template-img {
-    height: 112px;
+    height: 80px;
-    width: 200px;
+    width: 130px;
     margin: 0 auto;
     box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
     border: solid 2px #fff;

frontend/src/views/background/index.vue

@@ -1,24 +1,75 @@
 <template>
   <el-row>
-    <el-row class="main-row">
+    <el-row>
-      <el-row v-for="(value, key) in BackgroundShowMap" :key="key">
+      <el-col :span="24">
-        <el-col :span="24"><span>{{ key }}</span> </el-col>
+        <span style="font-weight:600;margin-right: 20px;font-size: 14px">{{ $t('panel.choose_background') }}</span>
-        <el-col
+        <el-checkbox v-model="curComponent.commonBackground.enable">{{ $t('commons.enable') }}</el-checkbox>
-          v-for="item in value"
+        <span style="color: #909399; font-size: 8px;margin-left: 3px">
-          :key="item.id"
+          Tips:{{ $t('panel.choose_background_tips') }}
-          :span="8"
+        </span>
-        >
+      </el-col>
-          <background-item
+    </el-row>
-            :template="item"
+    <el-row class="main-content" disabled="!curComponent.commonBackground.enable">
-          />
+      <!--      <el-row style="height: 80px;margin-top:10px;margin-bottom:20px;overflow: hidden">-->
+      <!--        <el-col :span="3" style="padding-left: 10px">-->
+      <!--          <el-radio v-model="curComponent.commonBackground.backgroundType" label="color" @change="onChangeType">颜色</el-radio>-->
+      <!--        </el-col>-->
+      <!--        <el-col :span="3">-->
+      <!--          <el-color-picker v-model="curComponent.commonBackground.color" class="color-picker-style" :predefine="predefineColors" />-->
+      <!--        </el-col>-->
+      <!--        <el-col :span="3" style="text-align: right;margin-top: 8px">-->
+      <!--          <span>不透明度：</span>-->
+      <!--        </el-col>-->
+      <!--        <el-col :span="9">-->
+      <!--          <el-slider v-model="curComponent.commonBackground.alpha" show-input :show-input-controls="false" input-size="mini" />-->
+      <!--        </el-col>-->
+      <!--      </el-row>-->
+      <el-row style="height: 80px;margin-top:10px;margin-bottom:20px;overflow: hidden">
+        <el-col :span="3" style="padding-left: 10px">
+          <el-radio v-model="curComponent.commonBackground.backgroundType" label="outerImage" @change="onChangeType">{{ $t('panel.photo') }}</el-radio>
+        </el-col>
+        <el-col style="width: 130px!important;">
+          <el-upload
+            action=""
+            accept=".jpeg,.jpg,.png,.gif,.svg"
+            class="avatar-uploader"
+            list-type="picture-card"
+            :class="{disabled:uploadDisabled}"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
+            :http-request="upload"
+            :file-list="fileList"
+            :on-change="onChange"
+          >
+            <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-row>
+      <el-row>
+        <el-col :span="3" style="padding-left: 10px">
+          <el-radio v-model="curComponent.commonBackground.backgroundType" label="innerImage" @change="onChangeType">边框</el-radio>
+        </el-col>
+        <el-col :span="21" class="main-row">
+          <el-row v-for="(value, key) in BackgroundShowMap" :key="key">
+            <el-col :span="24"><span>{{ key }}</span> </el-col>
+            <el-col
+              v-for="item in value"
+              :key="item.id"
+              :span="6"
+            >
+              <background-item
+                :template="item"
+              />
+            </el-col>
+          </el-row>
         </el-col>
       </el-row>
     </el-row>
     <el-row class="root-class">
-      <el-col :span="9" style="text-align: right;vertical-align: middle">
+      <el-col :span="24">
-        <el-checkbox v-model="curComponent.commonBackground.enable">{{ $t('commons.enable') }}</el-checkbox>
-      </el-col>
-      <el-col :span="6">
         <el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
         <el-button type="primary" size="mini" @click="save()">{{ $t('commons.confirm') }}</el-button>
       </el-col>
@@ -32,6 +83,7 @@ import BackgroundItem from '@/views/background/BackgroundItem'
 import { mapState } from 'vuex'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { deepCopy } from '@/components/canvas/utils/utils'
+import { COLOR_PANEL } from '@/views/chart/chart/chart'
 
 export default {
   name: 'Background',
@@ -40,11 +92,19 @@ export default {
     return {
       BackgroundShowMap: {},
       checked: false,
-      backgroundOrigin: {}
+      backgroundOrigin: {},
-
+      fileList: [],
+      dialogImageUrl: '',
+      dialogVisible: false,
+      uploadDisabled: false,
+      panel: null,
+      predefineColors: COLOR_PANEL
     }
   },
   mounted() {
+    if (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.queryBackground()
   },
@@ -65,11 +125,44 @@ export default {
       this.curComponent.commonBackground.color = this.backgroundOrigin.color
       this.curComponent.commonBackground.innerImage = this.backgroundOrigin.innerImage
       this.curComponent.commonBackground.outerImage = this.backgroundOrigin.outerImage
+      this.curComponent.commonBackground.alpha = this.backgroundOrigin.alpha
+      this.curComponent.commonBackground.borderRadius = this.backgroundOrigin.borderRadius
       eventBus.$emit('backgroundSetClose')
     },
     save() {
       this.$store.commit('recordSnapshot')
       eventBus.$emit('backgroundSetClose')
+    },
+    commitStyle() {
+      const canvasStyleData = deepCopy(this.canvasStyleData)
+      canvasStyleData.panel = this.panel
+      this.$store.commit('setCanvasStyle', canvasStyleData)
+      this.$store.commit('recordSnapshot', 'commitStyle')
+    },
+    onChangeType() {
+      this.commitStyle()
+    },
+    handleRemove(file, fileList) {
+      this.uploadDisabled = false
+      this.panel.imageUrl = null
+      this.fileList = []
+      this.commitStyle()
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    onChange(file, fileList) {
+      var _this = this
+      _this.uploadDisabled = true
+      const reader = new FileReader()
+      reader.onload = function() {
+        _this.curComponent.commonBackground.outerImage = reader.result
+      }
+      reader.readAsDataURL(file.raw)
+    },
+    upload(file) {
+      // console.log('this is upload')
     }
 
   }
@@ -85,7 +178,7 @@ export default {
   }
 
   .main-row{
-    height: 60vh;
+    height: 40vh;
     overflow-y: auto;
   }
 
@@ -93,5 +186,44 @@ export default {
     margin: 15px 0px 5px;
     text-align: center;
   }
+  .avatar-uploader>>>.el-upload {
+    width: 120px;
+    height: 80px;
+    line-height: 90px;
+  }
+  .avatar-uploader>>>.el-upload-list li{
+    width: 120px !important;
+    height: 80px !important;
+  }
+  .disabled>>>.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>>>.el-form-item__label{
+    font-size: 12px;
+    line-height: 38px;
+  }
+  .form-item>>>.el-form-item__label{
+    font-size: 12px;
+  }
+  .el-select-dropdown__item{
+    padding: 0 20px;
+  }
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+  .main-content{
+    border:1px solid #E6E6E6;
+  }
 
 </style>