指标样式优化

src/views/basic/dynamicModel/list/dataController.vue

@@ -27,10 +27,17 @@ export default {
     getStyle(item) {
       let styleJson = JSON.parse(this.config.styleJson);
       const flexBasis = `calc(${100 / this.config.showColumn}% - 10px)`;
+      let itemStyleJson = item.style ? JSON.parse(item.style) : null
       return {
-        // background: linear-gradient(252deg, yellow, green);
-        'background-color': item.blockColor,
-        'color':item.fontColor,
+        borderWidth: itemStyleJson && itemStyleJson.shadowFlag ? itemStyleJson.borderWeight + 'px' : 'none',
+        borderStyle: itemStyleJson && itemStyleJson.shadowFlag ? itemStyleJson.borderStyle : 'none',
+        borderColor: itemStyleJson && itemStyleJson.shadowFlag ? itemStyleJson.borderColor : '',
+        boxShadow: itemStyleJson && itemStyleJson.shadowFlag ? `${itemStyleJson.shadowColor} ${itemStyleJson.borderVerticalOffset}px  ${itemStyleJson.borderSpreadRadius}px ${itemStyleJson.borderVerticalOffset}px` : 'none',
+        background: itemStyleJson ? itemStyleJson.backgroundType === 1 ? itemStyleJson.blockColor : itemStyleJson.backgroundType === 2 ? `linear-gradient(${itemStyleJson.linearBlockColorDeg}deg, ${itemStyleJson.linearBlockColorFrom}, ${itemStyleJson.linearBlockColorto})` : '' : '',
+        backgroundImage:itemStyleJson && itemStyleJson.backgroundType === 3 ? `url(${JSON.stringify(itemStyleJson.blockImg)})` : 'transparent',
+        'background-size': itemStyleJson && itemStyleJson.backgroundType === 3 ? 'cover' : 'cover',
+        'background-position': itemStyleJson && itemStyleJson.backgroundType === 3 ? 'center' : 'center',
+        'color':itemStyleJson && itemStyleJson.fontColor,
         'font-size': `${Number(styleJson.fontSize)}px`,
         'text-decoration': styleJson.textDecoration == 1 ? 'none' : 'underline',
         fontStyle: styleJson.fontStyle == 1 ? 'normal' : 'italic',

src/views/form/webDesign/dataController.vue

@@ -32,7 +32,7 @@
         <template slot-scope="scope">
           <el-button size="mini" @click="editTab(scope.row)">编辑</el-button>
           <el-button size="mini" @click="deleteTab(scope.row.id)">删除</el-button>
-          <el-button size="mini" @click="setTabCss(scope.row.id)">设置样式</el-button>
+          <el-button size="mini" @click="setTabCss(scope.row.id,scope.row.style)">设置样式</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -43,8 +43,24 @@
                append-to-body
                class="dataset-edit-computed-fields"
                width="600px">
-      <el-form ref="form" :model="dataContCssForm" label-width="80px">
-        <el-form-item label="颜色类型">
+      <el-form ref="form" :model="dataContCssForm" label-width="80px" style="height: 500px;overflow: hidden;overflow-y: auto;">
+        <el-form-item label="字体颜色">
+          <el-color-picker v-model="dataContCssForm.fontColor" show-alpha ></el-color-picker>
+        </el-form-item>
+        <el-form-item label="边框粗细">
+          <el-input v-model="dataContCssForm.borderWeight" style="width:200px" clearable placeholder="请输入" size="mini"></el-input>
+        </el-form-item>
+        <el-form-item label="边框样式">
+          <el-radio-group v-model="dataContCssForm.borderStyle">
+            <el-radio label="solid">实线</el-radio>
+            <el-radio label="dashed">虚线</el-radio>
+            <el-radio label="dotted">点线</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="边框颜色">
+          <el-color-picker v-model="dataContCssForm.borderColor" show-alpha ></el-color-picker>
+        </el-form-item>
+        <el-form-item label="背景类型">
           <el-radio-group v-model="dataContCssForm.backgroundType">
             <el-radio :label="1">纯色</el-radio>
             <el-radio :label="2">渐变色</el-radio>
@@ -69,6 +85,34 @@
             渐变方向：
             <el-slider :min="1" :max="365" v-model="dataContCssForm.linearBlockColorDeg" style="width:250px"></el-slider>
           </div>
+          <div :style="dynamicStyle"></div>
+        </el-form-item>
+        <el-form-item label="背景图片" v-if="dataContCssForm.backgroundType === 3">
+          <el-upload
+            :action="define.comUploadUrl" :headers="uploadHeaders" :limit="1"
+            accept="image/*" :on-success="handleAvatarSuccess" list-type="picture-card"
+            :before-upload="beforeAvatarUpload" :file-list="fileList"
+            :on-remove="handleRemove">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="阴影边框">
+          <el-switch v-model="dataContCssForm.shadowFlag" >
+          </el-switch>
+        </el-form-item>
+        <el-form-item label="阴影颜色" v-if="dataContCssForm.shadowFlag">
+          <el-color-picker v-model="dataContCssForm.shadowColor" show-alpha ></el-color-picker>
+        </el-form-item>
+        <el-form-item label="阴影模糊" v-if="dataContCssForm.shadowFlag">
+          <el-input v-model="dataContCssForm.borderVerticalOffset" style="width:200px" clearable placeholder="请输入" size="mini"></el-input>
+        </el-form-item>
+        <el-form-item label="阴影偏移" v-if="dataContCssForm.shadowFlag">
+          <el-input v-model="dataContCssForm.borderSpreadRadius" style="width:200px" clearable placeholder="请输入" size="mini"></el-input>
+          <div :style="borderStyle"></div>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="dataContCssConfigVis = false">取消</el-button>
+          <el-button type="primary" @click="onCssFormSubmit">确认</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -147,7 +191,7 @@
     <el-dialog
       :close-on-click-modal="false"
       :close-on-press-escape="false"
-      :title="'新增指标'"
+      :title="addForm.id ? '编辑指标' :'新增指标'"
       :visible.sync="showEditComputedField"
       append-to-body
       class="dataset-edit-computed-fields"
@@ -162,10 +206,6 @@
           状态：
           <el-switch v-model="addForm.status" active-value="1" inactive-value="0">
           </el-switch>
-          设置区块颜色
-          <el-color-picker v-model="addForm.blockColor" show-alpha style="vertical-align: bottom;"></el-color-picker>
-          设置字体颜色
-          <el-color-picker v-model="addForm.fontColor" show-alpha style="vertical-align: bottom;"></el-color-picker>
         </div>
       </div>
       <div class="panels">
@@ -249,6 +289,7 @@ import {
   getDataCintrollerlist
 } from "@/api/onlineDev/visualDev";
 import {deepClone} from "@/utils";
+import {getToken} from "@/utils/auth";
 
 export default {
   name: "dataController",
@@ -256,6 +297,7 @@ export default {
   props:['dbSourceId','activeName','cubeId','modelId'],
   data(){
     return {
+      uploadHeaders: { 'Blade-Auth': 'bearer ' + getToken() },
       tableName:'',
       tabData:[],
       showEditComputedField:false,
@@ -307,6 +349,8 @@ export default {
         linHeight:1,
       },
       dataContCssForm:{
+        id:'',
+        fontColor:'',
         backgroundType:1,
         blockColor:'',
         linearBlockColorFrom:'',
@@ -315,7 +359,13 @@ export default {
         blockImg:'',
         shadowFlag:false,
         shadowColor:'',
-      }
+        borderWeight:1,
+        borderStyle:'solid',
+        borderColor:'',
+        borderSpreadRadius:'',
+        borderVerticalOffset:'',
+      },
+      fileList:[]
     }
   },
   watch: {
@@ -336,6 +386,27 @@ export default {
         return i.columnName.toUpperCase().includes(key) || i.columnTitle.includes(key)
       })
     },
+    dynamicStyle() {
+      return {
+        width: '100px',
+        height: '50px',
+        float: 'right',
+        marginTop:'-70px',
+        background:`linear-gradient(${this.dataContCssForm.linearBlockColorDeg}deg, ${this.dataContCssForm.linearBlockColorFrom}, ${this.dataContCssForm.linearBlockColorto})`
+      };
+    },
+    borderStyle(){
+      return {
+        width: '100px',
+        height: '50px',
+        float: 'right',
+        marginTop:'-70px',
+        borderWidth: this.dataContCssForm.borderWeight + 'px',
+        borderStyle: this.dataContCssForm.borderStyle,
+        borderColor: this.dataContCssForm.borderColor,
+        boxShadow: `${this.dataContCssForm.shadowColor} ${this.dataContCssForm.borderVerticalOffset}px  ${this.dataContCssForm.borderSpreadRadius}px ${this.dataContCssForm.borderVerticalOffset}px`
+      };
+    }
   },
   methods:{
     init(){
@@ -361,6 +432,25 @@ export default {
         }
       })
     },
+    handleAvatarSuccess(res, file) {
+      this.dataContCssForm.blockImg = res.msg
+      if (process.env.NODE_ENV === 'development') {
+        this.dataContCssForm.blockImg = this.define.comUrl + '/' + res.msg
+      } else {
+        this.dataContCssForm.blockImg = document.location.origin + '/' + res.msg
+      }
+      // this.imageUrl = URL.createObjectURL(file.raw);
+    },
+    handleRemove(){
+      this.dataContCssForm.blockImg = ''
+    },
+    beforeAvatarUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!');
+      }
+      return isLt2M;
+    },
     addFormClick(){
       this.showEditComputedField = true
       this.addForm = {
@@ -489,8 +579,6 @@ export default {
         status:this.addForm.status,
         visualdevId:this.modelId,
         indexConfigId:this.configForm.id,
-        fontColor:this.addForm.fontColor,
-        blockColor:this.addForm.blockColor,
       }
       dataCintrollerSave(params).then((res)=>{
         this.$message({
@@ -528,8 +616,70 @@ export default {
         })
       })
     },
-    setTabCss(){
+    setTabCss(id,style){
       this.dataContCssConfigVis = true
+      if (style){
+        try {
+          this.dataContCssForm = JSON.parse(style)
+        }catch(e){
+          this.dataContCssForm = {
+            id:id,
+            fontColor:'',
+            backgroundType:1,
+            blockColor:'',
+            linearBlockColorFrom:'',
+            linearBlockColorto:'',
+            linearBlockColorDeg:100,
+            blockImg:'',
+            shadowFlag:false,
+            shadowColor:'',
+            borderWeight:1,
+            borderStyle:'solid',
+            borderColor:'',
+            borderSpreadRadius:'',
+            borderVerticalOffset:'',
+          }
+          this.fileList = []
+        }
+      }else {
+        this.dataContCssForm = {
+          id:id,
+          fontColor:'',
+          backgroundType:1,
+          blockColor:'',
+          linearBlockColorFrom:'',
+          linearBlockColorto:'',
+          linearBlockColorDeg:100,
+          blockImg:'',
+          shadowFlag:false,
+          shadowColor:'',
+          borderWeight:1,
+          borderStyle:'solid',
+          borderColor:'',
+          borderSpreadRadius:'',
+          borderVerticalOffset:'',
+        }
+        this.fileList = []
+      }
+    },
+    onCssFormSubmit(){
+      let params = {
+        id:this.dataContCssForm.id,
+        visualdevId:this.modelId,
+        indexConfigId:this.configForm.id,
+        style:JSON.stringify(this.dataContCssForm)
+      }
+      dataCintrollerSave(params).then((res)=>{
+        this.$message({
+          message: res.data.msg,
+          type: 'success',
+          duration: 1500,
+          onClose: () => {
+            this.dataContCssConfigVis = false
+            this.init()
+          }
+        })
+      })
     },
     onSubmit(){
       let params = deepClone(this.configForm)