feat:点九图开发

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

@@ -0,0 +1,65 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+    :style="{
+      'background-image-source':`url(${img})`,
+      border:'100px solid #000',
+      borderImageSlice:'100 100 100 100',
+      borderImageWidth:'100px 100px 100px 100px',
+    }"
+  >
+  </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: {
+    img(){
+      return 'component.png'
+    }
+  },
+  watch: {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+/*滚动条样式*/
+::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/GcBorder16/setting.js

@@ -0,0 +1,255 @@
+
+const type = 'GcBorder15'
+
+const name = '边框15'
+
+const isTitle = true
+
+const padding =[0,0,0,0]
+// 右侧配置项
+const setting = [
+
+  {
+    label:'标题区域背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'gradual',
+    // 字段
+    field: 'fontGradientColor',
+    optionField: 'fontGradientColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: [],
+  },
+  // 背景色
+  // {
+  //   label:'标题区域背景色一',
+  //   // 设置组件类型， select / input / colorPicker
+  //   type: 'colorPicker',
+  //   // 字段
+  //   field: 'fontGradientColor0',
+  //   optionField: 'fontGradientColor0', // 对应options中的字段
+  //   // 是否多选
+  //   multiple: false,
+  //   // 绑定的值
+  //   value: '',
+  // },
+  // {
+  //   label:'标题区域背景色二',
+  //   // 设置组件类型， select / input / colorPicker
+  //   type: 'colorPicker',
+  //   // 字段
+  //   field: 'fontGradientColor1',
+  //   optionField: 'fontGradientColor1', // 对应options中的字段
+  //   // 是否多选
+  //   multiple: false,
+  //   // 绑定的值
+  //   value: '',
+  // },
+  {
+    label:'标题左侧颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontLeftColor',
+    optionField: 'fontLeftColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '#007aff',
+  },
+  {
+    label:'标题左侧宽度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'fontLeftWidth',
+    optionField: 'fontLeftWidth', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 4,
+  },
+  {
+    label:'标题底部分割线颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontBottomColor',
+    optionField: 'fontBottomColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'外边框线颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderColor',
+    optionField: 'borderColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'外边框线宽度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'borderWidth',
+    optionField: 'borderWidth', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 0,
+  },
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'gradual',
+    // 字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: [],
+  },
+  // {
+  //   label:'背景色一',
+  //   // 设置组件类型， select / input / colorPicker
+  //   type: 'colorPicker',
+  //   // 字段
+  //   field: 'gradientColor0',
+  //   optionField: 'gradientColor0', // 对应options中的字段
+  //   // 是否多选
+  //   multiple: false,
+  //   // 绑定的值
+  //   value: '',
+  // },
+  // {
+  //   label:'背景色二',
+  //   // 设置组件类型， select / input / colorPicker
+  //   type: 'colorPicker',
+  //   // 字段
+  //   field: 'gradientColor1',
+  //   optionField: 'gradientColor1', // 对应options中的字段
+  //   // 是否多选
+  //   multiple: false,
+  //   // 绑定的值
+  //   value: '',
+  // },
+  {
+    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: '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,
+  isTitle,
+  padding
+}

data-room-ui/packages/Decorations/Decoration2/setting.vue

@@ -26,7 +26,7 @@
         </div>
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
-          <el-form-item label="装饰主颜色">
+          <el-form-item label="装饰颜色">
             <ColorPicker
               v-model="config.customize.decorationColor1"
               :predefine="predefineThemeColors"

data-room-ui/packages/RemoteComponents/innerComponents/card/config.js

@@ -1,179 +0,0 @@
-const title = '卡片组件'
-// 右侧配置项
-const setting = [
-  {
-    label: '背景色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'customize_backgroundColor',
-    optionField: 'customize.backgroundColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 'rgba(0,0,0,.15)',
-    // tab页。 data: 数据， custom: 自定义
-    tabName: 'custom'
-  },
-  {
-    label: '边框宽度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'customize_border',
-    optionField: 'customize.border', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 1,
-    // tab页。 data: 数据， custom: 自定义
-    tabName: 'custom'
-  },
-  {
-    label: '边框颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'customize_borderColor',
-    optionField: 'customize.borderColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 'rgba(0,0,0,.15)',
-    // tab页。 data: 数据， custom: 自定义
-    tabName: 'custom'
-  },
-  {
-    label: '边框类型',
-    // 设置组件类型， select / input / colorPicker
-    type: 'select',
-    // 字段
-    field: 'customize_borderStyle',
-    optionField: 'customize.borderStyle', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    options: [
-      { label: 'solid', value: 'solid' },
-      { label: 'dashed', value: 'dashed' }
-    ],
-    // 绑定的值
-    value: 'solid',
-    // tab页。 data: 数据， custom: 自定义
-    tabName: 'custom'
-  },
-  {
-    label: '标题颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'customize_headerColor',
-    optionField: 'customize.headerColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 'white',
-    // tab页。 data: 数据， custom: 自定义
-    tabName: 'custom'
-  },
-  {
-    label: '标题左边距',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'customize_titlePaddingLeft',
-    optionField: 'customize.titlePaddingLeft', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 16,
-    // tab页。 data: 数据， custom: 自定义
-    tabName: 'custom'
-  },
-  {
-    label: '标题左线宽度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'customize_titleLineWidth',
-    optionField: 'customize.titleLineWidth', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 3,
-    // tab页。 data: 数据， custom: 自定义
-    tabName: 'custom'
-  },
-  {
-    label: '标题线颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'customize_titleLineColor',
-    optionField: 'customize.titleLineColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '#007aff',
-    // tab页。 data: 数据， custom: 自定义
-    tabName: 'custom'
-  },
-  {
-    label: '标题底边宽度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'customize_titleBottomLineWidth',
-    optionField: 'customize.titleBottomLineWidth', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 1,
-    // tab页。 data: 数据， custom: 自定义
-    tabName: 'custom'
-  },
-  {
-    label: '标题底边颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'customize_titleBottomLineColor',
-    optionField: 'customize.titleBottomLineColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '#0f131d',
-    // tab页。 data: 数据， custom: 自定义
-    tabName: 'custom'
-  }
-]
-
-// 模拟数据
-
-const option = {
-  // 自定义组件其他属性
-  customize: {
-    backgroundColor: 'rgba(0,0,0,.15)',
-    border: 1,
-    borderColor: 'rgba(0,0,0,.15)',
-    borderStyle: 'solid',
-    headerColor: 'white',
-    titlePaddingLeft: 16,
-    titleLineWidth: 3,
-    titleLineColor: '#007aff',
-    titleBottomLineWidth: 1,
-    titleBottomLineColor: '#0f131d'
-  }
-}
-
-export default {
-  title,
-  setting,
-  option: {
-    ...option,
-    displayOption: {
-      dataAllocation: {
-        enable: false
-      }
-    }
-  }
-}

data-room-ui/packages/RemoteComponents/innerComponents/card/index.vue

@@ -1,79 +0,0 @@
-<template>
-  <div
-    :class="`bs-card`"
-    style="width: 100%;height: 100%;position: relative;"
-  >
-    <div
-      :style="{
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        boxSizing: 'border-box',
-        backgroundColor: customize.backgroundColor,
-        border:`${customize.border}px` + ' ' + customize.borderStyle + ' ' + customize.borderColor,
-      }"
-    >
-      <header
-        :style="{
-          color: customize.headerColor,
-          padding: '8px 0',
-          lineHeight: '16px',
-          borderBottom: `${customize.titleBottomLineWidth}px solid ${customize.titleBottomLineColor}`,
-          fontSize: '16px',
-          boxSizing: 'border-box',
-          display: 'flex',
-          justifyContent: 'space-between',
-        }"
-      >
-        <span
-          :style="{
-
-            display: 'inline-block',
-            borderLeft: `${customize.titleLineWidth}px solid ${customize.titleLineColor}`,
-            paddingLeft: customize.titlePaddingLeft+'px'
-          }"
-        >
-          {{ config.title }}
-        </span>
-      </header>
-      <div
-        :style="{
-          flex: 1,
-          position: 'relative'
-        }"
-      />
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'Card',
-  components: {},
-  props: {
-    // 卡片的属性
-    config: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data () {
-    return {
-      customClass: {}
-    }
-  },
-  mounted () {
-  },
-  watch: {},
-  computed: {
-    customize () {
-      return this.config.option.customize
-    }
-  },
-  methods: { }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

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

@@ -35,8 +35,8 @@ const typeList = [
   'timePicker',
   'dateTimePicker',
   'indicatorCard',
-  'indexCard',
   'indicatorCard2',
+  'indexCard',
   'indexCard2'
 
 ]