Merge remote-tracking branch 'origin/master'

data-room-ui/packages/BasicComponents/ChartTab/index.vue

@@ -146,7 +146,6 @@ export default {
 <style lang="scss" scoped>
 .bs-design-wrap{
   width: 100%;
-  padding: 0 16px;
   .tab-title-box{
     height: 40px;
     display: flex;

data-room-ui/packages/BasicComponents/CurrentTime/index.vue

@@ -103,7 +103,6 @@ export default {
 @import "../../BasicComponents/fonts/index.css";
 .bs-design-wrap{
   width: 100%;
-   padding: 0 16px;
 }
 .time {
   width: 100%;

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

@@ -130,7 +130,6 @@ export default {
   background-color: rgb(31, 31, 31);
 }
 .bs-design-wrap {
-   padding: 0 16px;
   position: relative;
   width: 100%;
   height: 100%;

data-room-ui/packages/BasicComponents/FlyMap/index.vue

@@ -332,7 +332,6 @@ export default {
 }
 
 .bs-design-wrap {
-  padding: 0 16px;
   position: relative;
 
   .button {

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,isTitle:true,padding:[16,16,16,16]},
+  border:{type:'',titleHeight:60,fontSize:30,isTitle:true,padding:[0,0,0,0]},
   className:
     'com.gccloud.dataroom.core.module.chart.components.ScreenFlyMapChart',
   w: 800,

data-room-ui/packages/BasicComponents/HorizontalLine/index.vue

@@ -57,7 +57,6 @@ export default {
 .bs-design-wrap {
   position: relative;
   display: flex;
-  padding: 0 16px;
   flex-direction: column;
   justify-content: center;
   align-items: center;

data-room-ui/packages/BasicComponents/IframeChart/index.vue

@@ -75,7 +75,6 @@ export default {
   position: relative;
   overflow: hidden;
   background: #fff;
-  padding: 0 16px;
   width: 100%;
   height: 100%;
   .iframe-wrap {

data-room-ui/packages/BasicComponents/LinkChart/index.vue

@@ -76,7 +76,6 @@ export default {
 <style lang="scss" scoped>
   .bs-design-wrap{
     width: 100%;
-    padding: 0 16px;
   }
   .content-box{
     text-align: center;

data-room-ui/packages/BasicComponents/Map/index.vue

@@ -362,7 +362,6 @@ export default {
 
 .bs-design-wrap {
   position: relative;
-  padding: 0 16px;
 
   .button {
     position: absolute;

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,isTitle:true,padding:[16,16,16,16]},
+  border:{type:'',titleHeight:60,fontSize:30,isTitle:true,padding:[0,0,0,0]},
   className:
     'com.gccloud.dataroom.core.module.chart.components.ScreenMapChart',
   w: 800,

data-room-ui/packages/BasicComponents/Picture/index.vue

@@ -51,7 +51,6 @@ export default {
 
 <style lang="scss" scoped>
 .bs-design-wrap {
-  padding: 0 16px;
   width: 100%;
   background-color: rgba(0, 0, 0, 0);
   .content-box {

data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue

@@ -132,7 +132,6 @@ export default {
 }
   .bs-design-wrap{
     position: relative;
-    padding: 0 16px;
     width: 100%;
     height: 100%;
     background-color: transparent;

data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue

@@ -86,7 +86,6 @@ export default {
 }
   .bs-design-wrap{
     position: relative;
-    padding: 0 16px;
     width: 100%;
     height: 100%;
     background-color: transparent;

data-room-ui/packages/BasicComponents/Tables/index.vue

@@ -302,7 +302,6 @@ export default {
 .bs-design-wrap {
   position: relative;
   width: 100%;
-  padding: 0 16px;
   height: 100%;
   background-color: transparent;
   border-radius: 4px;

data-room-ui/packages/BasicComponents/Texts/index.vue

@@ -50,7 +50,6 @@ export default {
 <style lang="scss" scoped>
   .bs-design-wrap{
     width: 100%;
-    padding: 0 16px;
   }
   .content-box{
     text-align: center;

data-room-ui/packages/BasicComponents/ThemeSelect/index.vue

@@ -99,7 +99,6 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 16px;
 }
 .content-box{
   text-align: center;

data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue

@@ -102,7 +102,6 @@ export default {
 <style lang="scss" scoped>
 .bs-design-wrap{
   width: 100%;
-  padding: 0 16px;
 }
 .content-box{
   text-align: center;

data-room-ui/packages/BasicComponents/TimeCountDown/index.vue

@@ -163,7 +163,6 @@ export default {
 @import "../../BasicComponents/fonts/index.css";
 .bs-design-wrap{
   width: 100%;
-  padding: 0 16px;
 }
 .time {
   height: 100%;

data-room-ui/packages/BasicComponents/VerticalLine/index.vue

@@ -58,7 +58,6 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-  padding: 0 16px;
   display: flex;
   flex-direction: column;
   justify-content: center;

data-room-ui/packages/BasicComponents/Video/index.vue

@@ -93,7 +93,6 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-  padding: 0 16px;
   background-color: transparent;
   border-radius: 4px;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);

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

@@ -154,7 +154,6 @@ export default {
   position: absolute;
   width: 100%;
   height: 100%;
-  // padding: 0 16px;
   background-color: transparent;
   border-radius: 4px;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);

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

@@ -154,7 +154,6 @@ export default {
   position: absolute;
   width: 100%;
   height: 100%;
-  // padding: 0 16px;
   background-color: transparent;
   border-radius: 4px;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);

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

@@ -0,0 +1,125 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <div
+      :key="updateKey"
+      class="custom-border-box"
+      :style="`
+        border-top-left-radius: ${radiusLeftTop}px;
+        border-top-right-radius: ${radiusRightTop}px;
+        border-bottom-left-radius: ${radiusLeftBottom}px;
+        border-bottom-right-radius: ${radiusRightBottom}px;
+        border: ${width}px solid ${color};
+        opacity: ${opacity/ 100};
+        background-image: linear-gradient(${gradientDirection}, ${
+          gradientColor0 ? gradientColor0 : gradientColor1
+        } , ${gradientColor1 ? gradientColor1 : gradientColor0})
+      `"
+    >
+    <div class="element"
+      v-if="config.border.isTitle"
+      :style="`
+      color:${fontColor};
+      font-size:${config.border.fontSize}px;
+      line-height:${config.border.titleHeight}px;
+      height:${config.border.titleHeight};
+      padding:0 0 0 20px`"
+      >
+      {{config.title}}</div>
+    </div>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Border14',
+  components: {
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+     fontColor () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+     color () {
+      return this.config.border.borderColor || 'rgba(135, 136, 142, 1)'
+    },
+    width () {
+      return this.config.border.borderWidth || 2
+    },
+    gradientColor0 () {
+      return this.config.border.gradientColor0 || 'rgba(131, 191, 246, 1)'
+    },
+    gradientColor1 () {
+      return this.config.border.gradientColor1 || 'rgba(24, 141, 240, 1)'
+    },
+    radiusLeftTop () {
+      return this.config.border.radiusLeftTop || 2
+    },
+    radiusRightTop () {
+      return this.config.border.radiusRightTop || 2
+    },
+    radiusLeftBottom () {
+      return this.config.border.radiusLeftBottom || 2
+    },
+    radiusRightBottom () {
+      return this.config.border.radiusRightBottom || 2
+    },
+    gradientDirection () {
+      return this.config.border.gradientDirection || 'to right'
+    },
+    opacity () {
+      return this.config.border.opacity || 100
+    }
+  },
+  watch: {
+  },
+  mounted () {
+    console.log( this.config.border)
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 0px 0px !important;
+  box-sizing: border-box;
+  .custom-border-box {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

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

@@ -0,0 +1,177 @@
+
+const type = 'GcBorder14'
+
+const name='边框十四'
+// 右侧配置项
+const setting = [
+  // 背景色
+
+  {
+    label:'边框线颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderColor',
+    optionField: 'borderColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 'rgba(135, 136, 142, 1)',
+  },
+  {
+    label:'边框线宽度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'borderWidth',
+    optionField: 'borderWidth', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 2,
+  },
+  {
+    label:'背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 'rgba(131, 191, 246, 1)',
+  },
+  {
+    label:'背景色二',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 'rgba(24, 141, 240, 1)',
+  },
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: 'to right',
+    options: [
+      {
+        label: '从左到右',
+        value: 'to right'
+      },
+      {
+        label: '从右到左',
+        value: 'to left'
+      },
+      {
+        label: '从上到下',
+        value: 'to bottom'
+      },
+      {
+        label: '从下到上',
+        value: 'to top'
+      },
+      {
+        label: '从左上到右下',
+        value: 'to bottom right'
+      },
+      {
+        label: '从右上到左下',
+        value: 'to bottom left'
+      },
+      {
+        label: '从左下到右上',
+        value: 'to top right'
+      },
+      {
+        label: '从右下到左上',
+        value: 'to top left'
+      }
+    ]
+  },
+  {
+    label:'不透明度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'opacity',
+    optionField: 'opacity', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 100,
+  },
+  {
+    label:'左上圆角值',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'radiusLeftTop',
+    optionField: 'radiusLeftTop', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 2,
+  },
+  {
+    label:'左下圆角值',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'radiusLeftBottom',
+    optionField: 'radiusLeftBottom', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 2,
+  },
+  {
+    label:'右上圆角值',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'radiusRightTop',
+    optionField: 'radiusRightTop', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 2,
+  },
+  {
+    label:'右下圆角值',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'radiusRightBottom',
+    optionField: 'radiusRightBottom', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 2,
+  },
+
+
+
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name
+}

data-room-ui/packages/BorderComponents/bordersList.js

@@ -12,5 +12,5 @@ files.keys().forEach(key => {
     img,
   })
 })
-// 抛出内置系统组件
+// 抛出边框组件
 export default borderComponents

data-room-ui/packages/assets/style/echartStyle.scss

@@ -2,7 +2,6 @@
   position: relative;
   width: 100%;
   height: 100%;
-  padding: 0 16px;
   background-color: rgba(0,0,0,0);
   border-radius: 4px;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);

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,isTitle:true,padding:[16,16,16,16]},
+    border:{type:'',titleHeight:60,fontSize:30,isTitle:true,padding:[0,0,0,0]},
     option: cloneDeep(setModules[item.type]),
     ...cloneDeep(dataModules[item.type])
   }