tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:点九图开发

Browse Source
main
liu.tao3 1 year ago
parent 05b2e310d4
commit d54a18058d
8 changed files with 322 additions and 260 deletions
Show Stats Download Patch File Download Diff File

BIN
data-room-ui/packages/BorderComponents/GcBorder16/component.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

65
data-room-ui/packages/BorderComponents/GcBorder16/index.vue
Unescape Escape View File

@ -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>

255
data-room-ui/packages/BorderComponents/GcBorder16/setting.js
Unescape Escape View File

@ -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
}

2
data-room-ui/packages/Decorations/Decoration2/setting.vue
Unescape Escape View File

@ -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"

BIN
data-room-ui/packages/RemoteComponents/innerComponents/card/component.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

179
data-room-ui/packages/RemoteComponents/innerComponents/card/config.js
Unescape Escape View File

@ -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
}
}
}
}

79
data-room-ui/packages/RemoteComponents/innerComponents/card/index.vue
Unescape Escape View File

@ -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>

2
data-room-ui/packages/js/config/basicComponentsConfig.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save