feat:边框组件优化

data-room-ui/packages/BasicComponents/DigitalFlop/setting.vue

@@ -31,7 +31,7 @@
           <div class="lc-field-body">
             <BorderSetting
               v-if="config.border"
-              label-width="100px"
+              label-width="120px"
               :config="config.border"
             />
           </div>

data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js

@@ -110,7 +110,7 @@ export const FlyMapData = {
   name: '飞线图',
   title: '飞线图',
   icon: Icon.getNameList()[18],
-  border:{type:'',titleHeight:60,fontSize:30},
+  border:{type:'',titleHeight:60,fontSize:30,isTitle:true,paddingTop:10},
   className:
     'com.gccloud.dataroom.core.module.chart.components.ScreenFlyMapChart',
   w: 800,

data-room-ui/packages/BasicComponents/Map/settingConfig.js

@@ -102,7 +102,7 @@ export const mapData = {
   name: '地图',
   title: '地图',
   icon: Icon.getNameList()[5],
-  border:{type:'',titleHeight:60,fontSize:30},
+  border:{type:'',titleHeight:60,fontSize:30,isTitle:true,paddingTop:30},
   className:
     'com.gccloud.dataroom.core.module.chart.components.ScreenMapChart',
   w: 800,

data-room-ui/packages/BasicComponents/Select/setting.vue

@@ -25,7 +25,7 @@
           <div class="lc-field-body">
             <BorderSetting
               v-if="config.border"
-              label-width="120px"
+              label-width="100px"
               :config="config.border"
             />
           </div>

data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue

@@ -27,7 +27,32 @@
         ref="BorderSelect"
         />
     </el-form-item>
+    <div v-if="config.type">
     <el-form-item
+      :label-width="labelWidth"
+      label="是否显示标题"
+    >
+      <el-switch
+          v-model="config.isTitle"
+          class="bs-el-switch"
+          :active-value="true"
+          :inactive-value="false"
+        />
+    </el-form-item>
+    <el-form-item
+      v-if="!config.isTitle"
+      :label-width="labelWidth"
+      label="上边距"
+    >
+      <el-input-number
+        v-model="config.paddingTop"
+        class="bs-el-input-number"
+        :min="0"
+        :step="1"
+      />
+    </el-form-item>
+    <el-form-item
+      v-if="config.isTitle"
       :label-width="labelWidth"
       label="标题高度"
     >
@@ -39,6 +64,7 @@
       />
     </el-form-item>
     <el-form-item
+      v-if="config.isTitle"
       :label-width="labelWidth"
       label="标题字体大小"
     >
@@ -49,13 +75,25 @@
         :step="1"
       />
     </el-form-item>
+    <el-form-item
+      v-if="config.isTitle"
+      :label-width="labelWidth"
+      label="标题颜色"
+    >
+      <el-color-picker
+          v-model="config.fontColor"
+          popper-class="bs-el-color-picker"
+          class="bs-el-color-picker"
+          show-alpha
+        />
+    </el-form-item>
     <div
       v-for="(setting, settingIndex) in list"
       :key="settingIndex+1"
     >
       <el-form-item
         :label="setting.type=== 'padding' ? '' : setting.label"
-        :label-width="setting.type=== 'padding' ? '0px' :'120px'"
+        :label-width="labelWidth"
       >
         <el-input
           v-if="setting.type === 'input'"
@@ -165,6 +203,7 @@
           v-model="config[setting.field]"
         />
       </el-form-item>
+      </div>
     </div>
   </div>
 </template>

data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue

@@ -21,8 +21,9 @@
           />
         </el-form-item>
       </div>
+      <SettingTitle>边框</SettingTitle>
       <div class="lc-field-body">
-        <BorderSetting
+         <BorderSetting
           v-if="config.border"
           label-width="120px"
           :config="config.border"

data-room-ui/packages/BigScreenDesign/index.vue

@@ -295,6 +295,11 @@ export default {
     setComponent (component) {
       // 根据component获取页面详情
       getScreenInfo(component.code).then(res => {
+        res.chartList.forEach((item) => {
+          if (!item.border) {
+            item.border={type:'',titleHeight:60,fontSize:30,isTitle:true,paddingTop:20}
+          }
+        })
         // 给组件库导入的组件加入统一的前缀
         const randomStr = randomString(8)
         const pageInfo = handleResData(res)

data-room-ui/packages/BorderComponents/GcBorder1/index.vue

@@ -9,6 +9,7 @@
       :key="updateKey"
     >
     <div class="element"
+    v-if="config.border.isTitle"
     :style="`
     color:${color};
     font-size:${config.border.fontSize}px;

data-room-ui/packages/BorderComponents/GcBorder1/setting.js

@@ -18,19 +18,6 @@ const setting = [
     // 绑定的值
     value: '',
   },
-  // 标题字体颜色
-  {
-    label:'标题字体颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontColor',
-    optionField: 'fontColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
 
 
 ]

data-room-ui/packages/BorderComponents/GcBorder10/index.vue

@@ -9,6 +9,7 @@
       :key="updateKey"
     >
     <div class="element"
+    v-if="config.border.isTitle"
     :style="`
     color:${color};
     font-size:${config.border.fontSize}px;

data-room-ui/packages/BorderComponents/GcBorder10/setting.js

@@ -17,19 +17,6 @@ const setting = [
     // 绑定的值
     value: '',
   },
-  // 标题字体颜色
-  {
-    label:'标题字体颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontColor',
-    optionField: 'fontColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
 
 
 ]

data-room-ui/packages/BorderComponents/GcBorder11/index.vue

@@ -9,6 +9,7 @@
       :key="updateKey"
     >
     <div class="element"
+    v-if="config.border.isTitle"
     :style="`
     color:${color};
     font-size:${config.border.fontSize}px;

data-room-ui/packages/BorderComponents/GcBorder11/setting.js

@@ -16,20 +16,7 @@ const setting = [
     multiple: false,
     // 绑定的值
     value: '',
-  },
+  }
-  // 标题字体颜色
-  {
-    label:'标题字体颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontColor',
-    optionField: 'fontColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
 
 
 ]

data-room-ui/packages/BorderComponents/GcBorder12/index.vue

@@ -9,6 +9,7 @@
       :key="updateKey"
     >
     <div class="element"
+    v-if="config.border.isTitle"
     :style="`
     color:${color};
     font-size:${config.border.fontSize}px;

data-room-ui/packages/BorderComponents/GcBorder12/setting.js

@@ -18,19 +18,6 @@ const setting = [
     // 绑定的值
     value: '',
   },
-  // 标题字体颜色
-  {
-    label:'标题字体颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontColor',
-    optionField: 'fontColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
 
 
 ]

data-room-ui/packages/BorderComponents/GcBorder13/index.vue

@@ -9,6 +9,7 @@
       :key="updateKey"
     >
     <div class="element"
+    v-if="config.border.isTitle"
     :style="`
     color:${color};
     font-size:${config.border.fontSize}px;

data-room-ui/packages/BorderComponents/GcBorder13/setting.js

@@ -16,20 +16,7 @@ const setting = [
     multiple: false,
     // 绑定的值
     value: '',
-  },
+  }
-  // 标题字体颜色
-  {
-    label:'标题字体颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontColor',
-    optionField: 'fontColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
 
 
 ]

data-room-ui/packages/BorderComponents/GcBorder2/index.vue

@@ -9,6 +9,7 @@
       :key="updateKey"
     >
     <div class="element"
+    v-if="config.border.isTitle"
     :style="`
     color:${color};
     font-size:${config.border.fontSize}px;

data-room-ui/packages/BorderComponents/GcBorder2/setting.js

@@ -16,21 +16,7 @@ const setting = [
     multiple: false,
     // 绑定的值
     value: '',
-  },
+  }
-  // 标题字体颜色
-  {
-    label:'标题字体颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontColor',
-    optionField: 'fontColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-
 
 ]
 

data-room-ui/packages/BorderComponents/GcBorder3/index.vue

@@ -9,6 +9,7 @@
       :key="updateKey"
     >
     <div class="element"
+    v-if="config.border.isTitle"
     :style="`
     color:${color};
     font-size:${config.border.fontSize}px;

data-room-ui/packages/BorderComponents/GcBorder3/setting.js

@@ -16,20 +16,7 @@ const setting = [
     multiple: false,
     // 绑定的值
     value: '',
-  },
+  }
-  // 标题字体颜色
-  {
-    label:'标题字体颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontColor',
-    optionField: 'fontColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
 
 
 ]

data-room-ui/packages/BorderComponents/GcBorder4/index.vue

@@ -10,6 +10,7 @@
       :key="updateKey"
     >
     <div class="element"
+    v-if="config.border.isTitle"
     :style="`
     color:${color};
     font-size:${config.border.fontSize}px;

data-room-ui/packages/BorderComponents/GcBorder4/setting.js

@@ -17,19 +17,6 @@ const setting = [
     // 绑定的值
     value: '',
   },
-  // 标题字体颜色
-  {
-    label:'标题字体颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontColor',
-    optionField: 'fontColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
   {
     label:'边框主颜色',
     // 设置组件类型， select / input / colorPicker

data-room-ui/packages/BorderComponents/GcBorder5/index.vue

@@ -9,6 +9,7 @@
       :key="updateKey"
     >
     <div class="element"
+    v-if="config.border.isTitle"
     :style="`
     color:${color};
     font-size:${config.border.fontSize}px;

data-room-ui/packages/BorderComponents/GcBorder5/setting.js

@@ -17,19 +17,6 @@ const setting = [
     // 绑定的值
     value: '',
   },
-  // 标题字体颜色
-  {
-    label:'标题字体颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontColor',
-    optionField: 'fontColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
 
 
 ]

data-room-ui/packages/BorderComponents/GcBorder6/index.vue

@@ -9,6 +9,7 @@
       :key="updateKey"
     >
     <div class="element"
+    v-if="config.border.isTitle"
     :style="`
     color:${color};
     font-size:${config.border.fontSize}px;

data-room-ui/packages/BorderComponents/GcBorder6/setting.js

@@ -17,19 +17,7 @@ const setting = [
     // 绑定的值
     value: '',
   },
-  // 标题字体颜色
+  
-  {
-    label:'标题字体颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontColor',
-    optionField: 'fontColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
 
 
 ]

data-room-ui/packages/BorderComponents/GcBorder7/index.vue

@@ -9,6 +9,7 @@
       :key="updateKey"
     >
     <div class="element"
+    v-if="config.border.isTitle"
     :style="`
     color:${color};
     font-size:${config.border.fontSize}px;

data-room-ui/packages/BorderComponents/GcBorder7/setting.js

@@ -17,19 +17,6 @@ const setting = [
     // 绑定的值
     value: '',
   },
-  // 标题字体颜色
-  {
-    label:'标题字体颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontColor',
-    optionField: 'fontColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
 
 
 ]

data-room-ui/packages/BorderComponents/GcBorder8/index.vue

@@ -9,6 +9,7 @@
       :key="updateKey"
     >
     <div class="element"
+    v-if="config.border.isTitle"
     :style="`
     color:${color};
     font-size:${config.border.fontSize}px;

data-room-ui/packages/BorderComponents/GcBorder8/setting.js

@@ -17,20 +17,6 @@ const setting = [
     // 绑定的值
     value: '',
   },
-  // 标题字体颜色
-  {
-    label:'标题字体颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontColor',
-    optionField: 'fontColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-
 
 ]
 

data-room-ui/packages/BorderComponents/GcBorder9/index.vue

@@ -9,6 +9,7 @@
       :key="updateKey"
     >
     <div class="element"
+    v-if="config.border.isTitle"
     :style="`
     color:${color};
     font-size:${config.border.fontSize}px;

data-room-ui/packages/BorderComponents/GcBorder9/setting.js

@@ -16,20 +16,7 @@ const setting = [
     multiple: false,
     // 绑定的值
     value: '',
-  },
+  }
-  // 标题字体颜色
-  {
-    label:'标题字体颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontColor',
-    optionField: 'fontColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
 
 
 ]

data-room-ui/packages/G2Plots/plotList.js

@@ -32,7 +32,7 @@ function getPlotList (files) {
       category: configMapKey,
       name: config.name,
       title: config.title,
-      border:{type:'',titleHeight:60,fontSize:30},
+      border:{type:'',titleHeight:100,fontSize:30,isTitle:true,paddingTop:30},
       icon: null,
       img: require(`../G2Plots/images/componentLogo/${config.title}.png`),
       className:
@@ -65,7 +65,7 @@ export function getCustomPlots () {
       category: config.category,
       name: config.name,
       title: config.title,
-      border:{type:'',titleHeight:60,fontSize:30},
+      border:{type:'',titleHeight:100,fontSize:30,isTitle:true,paddingTop:30},
       icon: null,
       img: config.img,
       className:

data-room-ui/packages/RemoteComponents/remoteComponentsList.js

@@ -32,7 +32,7 @@ export function getRemoteComponents (comList) {
       title: config.title,
       icon: null,
       img: config.img,
-      border:{type:'',titleHeight:60,fontSize:30},
+      border:{type:'',titleHeight:100,fontSize:30,isTitle:true,paddingTop:30},
       className:
         'com.gccloud.dataroom.core.module.chart.components.RemoteComponentChart',
       w: 450,
@@ -64,7 +64,7 @@ export function getRemoteComponentConfig (code, name) {
     title: name,
     icon: null,
     img: null,
-    border:{type:'',titleHeight:60,fontSize:30},
+    border:{type:'',titleHeight:100,fontSize:30,isTitle:true,paddingTop:30},
     className:
       'com.gccloud.dataroom.core.module.chart.components.RemoteComponentChart',
     w: 450,

data-room-ui/packages/Render/RenderCard.vue

@@ -16,7 +16,7 @@
     />
     <div
       class="render-item-wrap"
-      :style="`height:calc(100% - ${(config.border&&config.border.type)?config.border.titleHeight:0}px)`"
+      :style="`height:calc(100% - ${(config.border&&config.border.type&&config.border.isTitle)?config.border.titleHeight:0}px);padding-top:${(config.border&&config.border.type&&!config.border.isTitle)?config.border.paddingTop:0}px`"
     >
       <component
         :is="resolveComponentType(config.type)"
@@ -113,6 +113,6 @@ export default {
   position: relative;
   overflow: hidden;
   box-sizing: border-box;
-  padding-bottom:20px;
+  padding-bottom: 15px;
 }
 </style>

data-room-ui/packages/js/config/basicComponentsConfig.js

@@ -44,7 +44,7 @@ basicConfigList = basicConfigList.map((item) => {
 export function basicComponentsConfig (item) {
   return {
     ...item,
-    border:{type:'',titleHeight:60,fontSize:30},
+    border:{type:'',titleHeight:60,fontSize:30,isTitle:true,paddingTop:30},
     option: cloneDeep(setModules[item.type]),
     ...cloneDeep(dataModules[item.type])
   }

data-room-ui/packages/js/store/actions.js

@@ -13,6 +13,12 @@ export default {
   initLayout ({ commit, dispatch }, code) {
     return new Promise(resolve => {
       getScreenInfo(code).then(data => {
+        // 兼容边框配置
+        data.chartList.forEach((item) => {
+          if (!item.border) {
+            item.border={type:'',titleHeight:60,fontSize:30,isTitle:true,paddingTop:10}
+          }
+        })
         const pageInfo = handleResData(data)
         // 改变页面数据
         commit('changePageInfo', pageInfo)