指标优化

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

@@ -1,9 +1,12 @@
 <template>
 <div class="cradDataControllerShow" :style="getCardStyle()">
   <template v-for="(item,index) in list" >
-    <div :key="index" v-if="index < (config.showRow * config.showColumn)" :style="getStyle(item)">
-      <div >
-        {{item.title}} : {{item.execValue}}
+    <div :key="index" v-if="index < (config.showRow * config.showColumn)" :style="config.showMode === 1 ? getStyle(item) : getTextStyle(item)">
+      <div :style="titleStyle(item)">
+        {{item.title}} :
+      </div>
+      <div :style="dataStyle(item)">
+        {{item.execValue}}
       </div>
     </div>
   </template>
@@ -24,10 +27,31 @@ export default {
         'flex-wrap':this.config.showRow == 1 ? 'nowrap' : 'wrap'
       }
     },
+    titleStyle(item){
+      let styleJson = JSON.parse(this.config.styleJson);
+      let itemStyleJson = item.style ? JSON.parse(item.style) : null
+      return {
+        'color':itemStyleJson && itemStyleJson.titleFontColor,
+        'font-size': `${Number(itemStyleJson.titleFontSize)}px`,
+        display:styleJson && styleJson.titleDataStyle === '1' ? 'inline' : 'block'
+      }
+    },
+    dataStyle(item){
+      let styleJson = JSON.parse(this.config.styleJson);
+      let itemStyleJson = item.style ? JSON.parse(item.style) : null
+      return {
+        'color':itemStyleJson && itemStyleJson.fontColor,
+        'font-size': `${Number(itemStyleJson.fontSize)}px`,
+        display:styleJson && styleJson.titleDataStyle === '1' ? 'inline' : 'block'
+      }
+    },
     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
+      // 添加默认值以防止 undefined
+      const boxHeight = Number(styleJson.boxHeight || 0);
+      const dbBoxHeight = boxHeight / 2
       return {
         borderWidth: itemStyleJson && itemStyleJson.shadowFlag ? itemStyleJson.borderWeight + 'px' : 'none',
         borderStyle: itemStyleJson && itemStyleJson.shadowFlag ? itemStyleJson.borderStyle : 'none',
@@ -37,20 +61,27 @@ export default {
         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',
         fontWeight: styleJson.fontWeight == 1 ? '500' : '600',
         borderRadius: `${Number(styleJson.borderRadio)}px`,
         width: `${Number(styleJson.boxWidth)}px`,
-        height: this.config.showMode == 1 ? `${Number(styleJson.boxHeight)}px` : '',
-        'line-height': this.config.showMode == 1 && styleJson.linHeight == 2 ? `${Number(styleJson.boxHeight)}px` : '',
-        'text-align': styleJson.linHeight == 2 ? 'center' : '',
+        height:  `${Number(styleJson.boxHeight)}px`,
+        'line-height': styleJson.linHeight == 2 ? styleJson.titleDataStyle === '1' ? `${boxHeight}px` : `${ dbBoxHeight }px` : '',
+        'text-align':  'center',
         'flex': `1 1 ${flexBasis}`,
         'margin':'0 5px',
-        'padding':this.config.showMode == 2 ? '10px' : ''
+        'padding': ''
       };
+    },
+    getTextStyle(){
+      let styleJson = JSON.parse(this.config.styleJson);
+      return {
+        width: `${Number(styleJson.boxWidth)}px`,
+        height:'',
+        'text-align': 'center',
+        'padding': '10px',
+      }
     }
   }
 }

src/views/form/webDesign/dataController.vue

@@ -44,9 +44,18 @@
                class="dataset-edit-computed-fields"
                width="600px">
       <el-form ref="form" :model="dataContCssForm" label-width="80px" style="height: 500px;overflow: hidden;overflow-y: auto;">
-        <el-form-item label="字体颜色">
+        <el-form-item label="标题字体颜色" label-width="100px">
+          <el-color-picker v-model="dataContCssForm.titleFontColor" show-alpha ></el-color-picker>
+        </el-form-item>
+        <el-form-item label="标题字体大小" label-width="100px">
+          <el-input-number v-model="dataContCssForm.titleFontSize" :min="12" :max="40"></el-input-number>
+        </el-form-item>
+        <el-form-item label="指标字体颜色" label-width="100px">
           <el-color-picker v-model="dataContCssForm.fontColor" show-alpha ></el-color-picker>
         </el-form-item>
+        <el-form-item label="指标字体大小" label-width="100px">
+          <el-input-number v-model="dataContCssForm.fontSize" :min="12" :max="40"></el-input-number>
+        </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>
@@ -146,9 +155,15 @@
             <el-radio :label="5">5列</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="文字大小">
-          <el-input-number v-model="configFormCss.fontSize" :min="12" :max="40"></el-input-number>
+        <el-form-item label="标题与指标" label-width="90px">
+          <el-radio-group v-model="configFormCss.titleDataStyle">
+            <el-radio label="1">单行展示</el-radio>
+            <el-radio label="2">换行展示</el-radio>
+          </el-radio-group>
         </el-form-item>
+<!--        <el-form-item label="文字大小">-->
+<!--          <el-input-number v-model="configFormCss.fontSize" :min="12" :max="40"></el-input-number>-->
+<!--        </el-form-item>-->
         <el-form-item label="下划线">
           <el-radio-group v-model="configFormCss.textDecoration">
             <el-radio :label="1">关</el-radio>
@@ -167,16 +182,16 @@
             <el-radio :label="2">加粗</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="圆角度数">
+        <el-form-item label="圆角度数" v-if="configForm.showMode === 1">
           <el-input-number v-model="configFormCss.borderRadio" :min="0" :max="100"></el-input-number>
         </el-form-item>
-        <el-form-item label="组件宽度">
+        <el-form-item label="组件宽度" v-if="configForm.showMode === 2">
           <el-input-number v-model="configFormCss.boxWidth" :min="0" :max="300"></el-input-number>
         </el-form-item>
-        <el-form-item label="组件高度">
+        <el-form-item label="组件高度" v-if="configForm.showMode === 1">
           <el-input-number v-model="configFormCss.boxHeight" :min="0" :max="300"></el-input-number>
         </el-form-item>
-        <el-form-item label="垂直居中">
+        <el-form-item label="垂直居中" v-if="configForm.showMode === 1">
           <el-radio-group v-model="configFormCss.linHeight">
             <el-radio :label="1">关闭</el-radio>
             <el-radio :label="2">开启</el-radio>
@@ -204,7 +219,7 @@
           指标说明：
           <el-input v-model="addForm.describeTitle" clearable placeholder="请输入" size="mini" style="width: 200px"></el-input>
           状态：
-          <el-switch v-model="addForm.status" active-value="1" inactive-value="0">
+          <el-switch v-model="addForm.status" :active-value="1" :inactive-value="0">
           </el-switch>
         </div>
       </div>
@@ -325,7 +340,7 @@ export default {
         eventName:'',
         columnFormula:'',
         describeTitle:'',
-        status:'1',
+        status:1,
         blockColor:'',
         fontColor:'',
       },
@@ -339,6 +354,7 @@ export default {
         styleJson:'',
       },
       configFormCss:{
+        titleDataStyle:'1',
         fontSize:14,
         textDecoration:1,
         fontStyle:1,
@@ -350,7 +366,10 @@ export default {
       },
       dataContCssForm:{
         id:'',
+        titleFontColor:'',
         fontColor:'',
+        titleFontSize:14,
+        fontSize:14,
         backgroundType:1,
         blockColor:'',
         linearBlockColorFrom:'',
@@ -458,9 +477,8 @@ export default {
         eventName:'',
         columnFormula:'请输入标准SQL查询语句，例如：select count(*) from tb_name',
         describeTitle:'',
-        status:'1',
+        status:1,
         blockColor:'',
-        fontColor:'',
       }
     },
     onDataSourceId() {
@@ -601,7 +619,6 @@ export default {
         describeTitle:row.describeTitle,
         status:row.status,
         blockColor:row.blockColor,
-        fontColor:row.fontColor,
       }
     },
     deleteTab(id){
@@ -624,7 +641,10 @@ export default {
         }catch(e){
           this.dataContCssForm = {
             id:id,
+            titleFontColor:'',
             fontColor:'',
+            titleFontSize:14,
+            fontSize:14,
             backgroundType:1,
             blockColor:'',
             linearBlockColorFrom:'',
@@ -644,7 +664,10 @@ export default {
       }else {
         this.dataContCssForm = {
           id:id,
+          titleFontColor:'',
           fontColor:'',
+          titleFontSize:14,
+          fontSize:14,
           backgroundType:1,
           blockColor:'',
           linearBlockColorFrom:'',