Merge remote-tracking branch 'origin/master'

# Conflicts:
#	data-room-ui/packages/BasicComponents/Map/settingConfig.js
main
liu.shiyi 1 year ago
commit 2925abcaf9

@ -29,10 +29,10 @@ const customConfig = {
skewY: 0
},
customize: {
fontSize: 28,
fontWeight: 700,
fontFamily: '', // 字体类型
color: 'rgb(155 159 172)'
fontSize: 14,
fontWeight: 300,
fontFamily: 'ds-digitalbold', // 字体类型
color: '#ffffff'
}
}

@ -28,7 +28,7 @@ const customConfig = {
skewY: 0
},
customize: {
htmlStr: '<h1 style="color:#ffffff;font-size: 30px">我是自定义html内容</h1>' // html的内容
htmlStr: '<h1 style="color:#6b74e4;font-size: 20px;font-style: italic;">我是自定义html内容</h1>' // html的内容
}
}

@ -33,11 +33,11 @@ const customConfig = {
// 自定义属性
customize: {
// 选择框背景颜色
bgColor: '#35393F',
bgColor: '#00000000',
// 选择框文字颜色
fontColor: '#FFFFFF',
// 选择框字大小
fontSize: 20,
// 选择框大小
fontSize: 14,
// 显示类型 year/month/date/ datetime/datetimerange/daterange
type: 'datetimerange',
// 时间格式化类型:时间戳timestamp自定义custom

@ -12,7 +12,7 @@
:model="config.customize"
label-position="left"
class="setting-body bs-el-form"
label-width="90px"
label-width="100px"
>
<SettingTitle>标题</SettingTitle>
<div class="lc-field-body">

@ -60,7 +60,7 @@ const customConfig = {
mapName: false,
// 文字颜色
mapNameColor: '#fff',
// 字大小
// 大小
mapNameSize: 12,
// 文字权重
mapNameWeight: 500,

@ -19,7 +19,7 @@ const customConfig = {
type: 'iframeChart',
root: {
version: '2023071001',
url: 'https://www.runoob.com/',
url: 'http://gcpaas.gccloud.com',
// 绕x轴旋转角度
rotateX: 0,
// 绕y轴旋转角度

@ -27,13 +27,13 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
<!-- <SettingTitle v-if="config.border"></SettingTitle>
<!-- <SettingTitle v-if="config.border"></SettingTitle>
<div class="lc-field-body">
<BorderSetting
v-if="config.border"
@ -44,39 +44,54 @@
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label-width="100px" label="渐变背景色一">
<el-form-item
label-width="100px"
label="渐变背景色一"
>
<ColorPicker
v-model="config.customize.gradientColor0"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="渐变背景色二">
<el-form-item
label-width="100px"
label="渐变背景色二"
>
<ColorPicker
v-model="config.customize.gradientColor1"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="渐变色方向">
<el-select
v-model="config.customize.gradientDirection"
popper-class="bs-el-select"
class="bs-el-select"
>
<el-option
v-for="iconPosition in options"
:key="iconPosition.value"
:label="iconPosition.label"
:value="iconPosition.value"
/>
</el-select>
</el-form-item>
<el-form-item label-width="100px" label="边框颜色">
<el-form-item
label-width="100px"
label="渐变色方向"
>
<el-select
v-model="config.customize.gradientDirection"
popper-class="bs-el-select"
class="bs-el-select"
>
<el-option
v-for="iconPosition in options"
:key="iconPosition.value"
:label="iconPosition.label"
:value="iconPosition.value"
/>
</el-select>
</el-form-item>
<el-form-item
label-width="100px"
label="边框颜色"
>
<ColorPicker
v-model="config.customize.borderColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="边框粗细">
<el-form-item
label-width="100px"
label="边框粗细"
>
<el-input-number
v-model="config.customize.borderWidth"
:precision="0"
@ -84,7 +99,10 @@
label="请输入粗细"
/>
</el-form-item>
<el-form-item label-width="100px" label="边框圆角">
<el-form-item
label-width="100px"
label="边框圆角"
>
<el-input-number
v-model="config.customize.borderRadius"
:precision="0"
@ -100,8 +118,7 @@
v-model="config.customize.src"
clearable
placeholder="请输入链接"
>
</el-input>
/>
</el-form-item>
<el-form-item
label="单位"
@ -111,10 +128,12 @@
v-model="config.customize.unit"
clearable
placeholder="请输入单位"
>
</el-input>
/>
</el-form-item>
<el-form-item label-width="100px" label="单位字体大小">
<el-form-item
label-width="100px"
label="单位字体大小"
>
<el-input-number
v-model="config.customize.unitSize"
:precision="0"
@ -122,13 +141,19 @@
label="请输入单位字体大小"
/>
</el-form-item>
<el-form-item label-width="100px" label="单位字体颜色">
<el-form-item
label-width="100px"
label="单位字体颜色"
>
<ColorPicker
v-model="config.customize.unitColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="左右间距">
<el-form-item
label-width="100px"
label="左右间距"
>
<el-input-number
v-model="config.customize.distance"
:precision="0"
@ -136,7 +161,10 @@
label="请输入左右间距"
/>
</el-form-item>
<el-form-item label-width="100px" label="上下间距">
<el-form-item
label-width="100px"
label="上下间距"
>
<el-input-number
v-model="config.customize.lineDistance"
:precision="0"
@ -144,7 +172,10 @@
label="请输入上下间距"
/>
</el-form-item>
<el-form-item label-width="100px" label="图标大小">
<el-form-item
label-width="100px"
label="图标大小"
>
<el-input-number
v-model="config.customize.imgSize"
:precision="0"
@ -152,15 +183,18 @@
label="请输入图标大小"
/>
</el-form-item>
<el-form-item label-width="100px" label="首行文字大小">
<el-form-item
label-width="100px"
label="第一行字体大小"
>
<el-input-number
v-model="config.customize.firstSize"
:precision="0"
class="bs-el-input-number"
label="请输入首行文字大小"
label="请输入第一行字体大小"
/>
</el-form-item>
<el-form-item
<el-form-item
label="数据文字类型"
label-width="100px"
>
@ -177,19 +211,25 @@
/>
</el-select>
</el-form-item>
<el-form-item label-width="100px" label="首行字体颜色">
<el-form-item
label-width="100px"
label="第一行字体颜色"
>
<ColorPicker
v-model="config.customize.firstColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="首行字体粗细">
<el-form-item
label-width="100px"
label="第一行字体粗细"
>
<el-input-number
v-model="config.customize.firstWeight"
:precision="0"
:step="100"
class="bs-el-input-number"
label="请输入行字体粗细"
label="请输入第一行字体粗细"
/>
</el-form-item>
<el-form-item
@ -202,21 +242,30 @@
placeholder="请输入第二行文字内容"
/>
</el-form-item>
<el-form-item label-width="100px" label="第二行文字大小">
<el-form-item
label-width="100px"
label="第二行字体大小"
>
<el-input-number
v-model="config.customize.secondSize"
:precision="0"
class="bs-el-input-number"
label="请输入行字体粗细"
label="请输入第一行字体粗细"
/>
</el-form-item>
<el-form-item label-width="100px" label="第二行字体颜色">
<el-form-item
label-width="100px"
label="第二行字体颜色"
>
<ColorPicker
v-model="config.customize.secondColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="第二行字体粗细">
<el-form-item
label-width="100px"
label="第二行字体粗细"
>
<el-input-number
v-model="config.customize.secondWeight"
:precision="0"
@ -235,7 +284,7 @@ import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
import {predefineColors} from "data-room-ui/js/utils/colorList";
import { predefineColors } from 'data-room-ui/js/utils/colorList'
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
import fontList from 'data-room-ui/js/utils/fontList'
export default {
@ -250,42 +299,42 @@ export default {
data () {
return {
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: '从左到右',
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'
}
],
//
predefineThemeColors: predefineColors,
fontFamilyList: fontList,
fontFamilyList: fontList
}
},
computed: {

@ -52,24 +52,24 @@ const customConfig = {
src: '',
borderRadius: 0,
borderWidth: 0,
fontFamily:'',
fontFamily: 'ds-digitalbold',
lineDistance: 6,
borderColor: '',
gradientDirection:'to right',
gradientColor0: 'rgba(0, 122, 255, 0.07)',
gradientColor1:'rgba(0, 122, 255, 0.07)',
gradientDirection: 'to right',
gradientColor0: '#4391f4',
gradientColor1: '#67d3fc',
distance: 30,
imgSize: 80,
firstSize: 64,
firstColor: '#007aff',
imgSize: 60,
firstSize: 36,
firstColor: '#ffffff',
firstWeight: 500,
secondSize: 21,
secondSize: 18,
secondColor: '#ffffff',
secondWeight: 500,
secondLine: '装机处理及时率',
secondLine: '已上线数',
unit: '',
unitSize: 32,
unitColor:'#fff'
unitColor: '#fff'
}
}
export const dataConfig = {

@ -36,7 +36,7 @@
:bigTitle='config.title'
/>
</div> -->
<SettingTitle>旋转</SettingTitle>
<SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
@ -44,39 +44,54 @@
</div>
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label-width="100px" label="渐变背景色一">
<el-form-item
label-width="100px"
label="渐变背景色一"
>
<ColorPicker
v-model="config.customize.gradientColor0"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="渐变背景色二">
<el-form-item
label-width="100px"
label="渐变背景色二"
>
<ColorPicker
v-model="config.customize.gradientColor1"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="渐变色方向">
<el-select
v-model="config.customize.gradientDirection"
popper-class="bs-el-select"
class="bs-el-select"
>
<el-option
v-for="iconPosition in options"
:key="iconPosition.value"
:label="iconPosition.label"
:value="iconPosition.value"
/>
</el-select>
</el-form-item>
<el-form-item label-width="100px" label="边框颜色">
<el-form-item
label-width="100px"
label="渐变色方向"
>
<el-select
v-model="config.customize.gradientDirection"
popper-class="bs-el-select"
class="bs-el-select"
>
<el-option
v-for="iconPosition in options"
:key="iconPosition.value"
:label="iconPosition.label"
:value="iconPosition.value"
/>
</el-select>
</el-form-item>
<el-form-item
label-width="100px"
label="边框颜色"
>
<ColorPicker
v-model="config.customize.borderColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="边框粗细">
<el-form-item
label-width="100px"
label="边框粗细"
>
<el-input-number
v-model="config.customize.borderWidth"
:precision="0"
@ -84,7 +99,10 @@
label="请输入粗细"
/>
</el-form-item>
<el-form-item label-width="100px" label="边框圆角">
<el-form-item
label-width="100px"
label="边框圆角"
>
<el-input-number
v-model="config.customize.borderRadius"
:precision="0"
@ -100,10 +118,9 @@
v-model="config.customize.src"
clearable
placeholder="请输入链接"
>
</el-input>
/>
</el-form-item>
<el-form-item
<el-form-item
label="单位"
label-width="100px"
>
@ -111,10 +128,12 @@
v-model="config.customize.unit"
clearable
placeholder="请输入单位"
>
</el-input>
/>
</el-form-item>
<el-form-item label-width="100px" label="单位字体大小">
<el-form-item
label-width="100px"
label="单位字体大小"
>
<el-input-number
v-model="config.customize.unitSize"
:precision="0"
@ -122,13 +141,19 @@
label="请输入单位字体大小"
/>
</el-form-item>
<el-form-item label-width="100px" label="单位字体颜色">
<el-form-item
label-width="100px"
label="单位字体颜色"
>
<ColorPicker
v-model="config.customize.unitColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="左右间距">
<el-form-item
label-width="100px"
label="左右间距"
>
<el-input-number
v-model="config.customize.distance"
:precision="0"
@ -136,7 +161,10 @@
label="请输入左右间距"
/>
</el-form-item>
<el-form-item label-width="100px" label="上下间距">
<el-form-item
label-width="100px"
label="上下间距"
>
<el-input-number
v-model="config.customize.lineDistance"
:precision="0"
@ -144,7 +172,10 @@
label="请输入上下间距"
/>
</el-form-item>
<el-form-item label-width="100px" label="图标大小">
<el-form-item
label-width="100px"
label="图标大小"
>
<el-input-number
v-model="config.customize.imgSize"
:precision="0"
@ -152,45 +183,57 @@
label="请输入图标大小"
/>
</el-form-item>
<el-form-item label-width="100px" label="首行文字大小">
<el-form-item
label-width="100px"
label="第一行字体大小"
>
<el-input-number
v-model="config.customize.firstSize"
:precision="0"
class="bs-el-input-number"
label="请输入首行文字大小"
label="请输入第一行字体大小"
/>
</el-form-item>
<el-form-item label-width="100px" label="首行字体颜色">
<el-form-item
label-width="100px"
label="第一行字体颜色"
>
<ColorPicker
v-model="config.customize.firstColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="首行字体粗细">
<el-form-item
label-width="100px"
label="第一行字体粗细"
>
<el-input-number
v-model="config.customize.firstWeight"
:precision="0"
:step="100"
class="bs-el-input-number"
label="请输入行字体粗细"
label="请输入第一行字体粗细"
/>
</el-form-item>
<el-form-item
label="第行文字内容"
label="第行文字内容"
label-width="100px"
>
<el-input
v-model="config.customize.secondLine"
clearable
placeholder="请输入第行文字内容"
placeholder="请输入第行文字内容"
/>
</el-form-item>
<el-form-item label-width="100px" label="第二行文字大小">
<el-form-item
label-width="100px"
label="第二行字体大小"
>
<el-input-number
v-model="config.customize.secondSize"
:precision="0"
class="bs-el-input-number"
label="请输入第二行字大小"
label="请输入第二行大小"
/>
</el-form-item>
<el-form-item
@ -210,13 +253,19 @@
/>
</el-select>
</el-form-item>
<el-form-item label-width="100px" label="第二行字体颜色">
<el-form-item
label-width="100px"
label="第二行字体颜色"
>
<ColorPicker
v-model="config.customize.secondColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="第二行字体粗细">
<el-form-item
label-width="100px"
label="第二行字体粗细"
>
<el-input-number
v-model="config.customize.secondWeight"
:precision="0"
@ -232,7 +281,7 @@
</template>
<script>
import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
import {predefineColors} from "data-room-ui/js/utils/colorList";
import { predefineColors } from 'data-room-ui/js/utils/colorList'
import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
@ -250,42 +299,42 @@ export default {
data () {
return {
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: '从左到右',
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'
}
],
//
predefineThemeColors: predefineColors,
fontFamilyList: fontList,
fontFamilyList: fontList
}
},
computed: {

@ -54,22 +54,22 @@ const customConfig = {
borderWidth: 0,
lineDistance: 6,
borderColor: '',
fontFamily:'',
gradientDirection:'to right',
gradientColor0: 'rgba(0, 122, 255, 0.07)',
gradientColor1:'rgba(0, 122, 255, 0.07)',
fontFamily: 'ds-digitalbold',
gradientDirection: 'to right',
gradientColor0: '#4391f4',
gradientColor1: '#36c49f',
distance: 30,
imgSize: 80,
firstSize: 21,
imgSize: 60,
firstSize: 18,
firstColor: '#ffffff',
firstWeight: 500,
secondSize: 64,
secondColor: '#007aff',
secondSize: 36,
secondColor: '#ffffff',
secondWeight: 500,
secondLine: '装机处理及时率',
secondLine: '历史工单量',
unit: '',
unitSize: 32,
unitColor:'#fff'
unitColor: '#fff'
}
}
export const dataConfig = {

@ -6,8 +6,8 @@
<div
:style="{
'background-image': `linear-gradient(${customize.gradientDirection}, ${
gradientColor0 ? gradientColor0 : gradientColor1
} , ${gradientColor1 ? gradientColor1 : gradientColor0})`,
gradientColor0 ? gradientColor0 : gradientColor1
} , ${gradientColor1 ? gradientColor1 : gradientColor0})`,
'border-radius':customize.borderRadius + 'px',
border:`${customize.borderWidth}px solid ${customize.borderColor}`,
}"
@ -20,23 +20,24 @@
}"
>
<span
:style="{
'font-family': config.customize.fontFamily,
'font-size': customize.firstSize + 'px',
color:customize.firstColor,
'font-weight':customize.firstWeight,
'margin-bottom':customize.lineDistance +'px'
}"
:style="{
'font-family': config.customize.fontFamily,
'font-size': customize.firstSize + 'px',
color:customize.firstColor,
'font-weight':customize.firstWeight,
'margin-bottom':customize.lineDistance +'px'
}"
>{{ optionData }}</span>
<span
:style="{
'margin-left':'10px',
:style="{
'margin-left':'10px',
'font-size': customize.unitSize + 'px',
'line-height':customize.unitSize + 'px',
color:customize.unitColor,
'margin-bottom':customize.lineDistance +'px'
}">
{{unit}}
}"
>
{{ unit }}
</span>
</div>
<div
@ -83,9 +84,9 @@ export default {
return this.config.customize.gradientColor0 || this.config.customize.gradientColor1 || 'transparent'
},
gradientColor1 () {
return this.config.customize.gradientColor1 || this.config.customize.gradientColor0 || 'transparent'
return this.config.customize.gradientColor1 || this.config.customize.gradientColor0 || 'transparent'
},
unit(){
unit () {
return this.config?.customize.unit || ''
},
option () {
@ -96,7 +97,7 @@ export default {
},
customize () {
return this.config?.customize
},
}
// tableData () {
// let dataList = ''
// if (this.optionData instanceof Array && this.optionData.length > 0) {
@ -112,7 +113,7 @@ export default {
methods: {
dataFormatting (config, data) {
let dataList = ''
if(data.success){
if (data.success) {
if (data.data instanceof Array) {
dataList = config.dataSource.dimensionField
? data.data[0][config.dataSource.dimensionField]
@ -120,8 +121,8 @@ export default {
} else {
dataList = data.data[config.dataSource.dimensionField]
}
}else{
dataList=80
} else {
dataList = 80
}
config.option = {
...config.option,
@ -129,7 +130,7 @@ export default {
}
return config
}
}
}
}
</script>

@ -27,13 +27,13 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
<!-- <SettingTitle v-if="config.border"></SettingTitle>
<!-- <SettingTitle v-if="config.border"></SettingTitle>
<div class="lc-field-body">
<BorderSetting
v-if="config.border"
@ -44,39 +44,54 @@
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label-width="100px" label="渐变背景色一">
<el-form-item
label-width="100px"
label="渐变背景色一"
>
<ColorPicker
v-model="config.customize.gradientColor0"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="渐变背景色二">
<el-form-item
label-width="100px"
label="渐变背景色二"
>
<ColorPicker
v-model="config.customize.gradientColor1"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="渐变色方向">
<el-select
v-model="config.customize.gradientDirection"
popper-class="bs-el-select"
class="bs-el-select"
>
<el-option
v-for="iconPosition in options"
:key="iconPosition.value"
:label="iconPosition.label"
:value="iconPosition.value"
/>
</el-select>
</el-form-item>
<el-form-item label-width="100px" label="边框颜色">
<el-form-item
label-width="100px"
label="渐变色方向"
>
<el-select
v-model="config.customize.gradientDirection"
popper-class="bs-el-select"
class="bs-el-select"
>
<el-option
v-for="iconPosition in options"
:key="iconPosition.value"
:label="iconPosition.label"
:value="iconPosition.value"
/>
</el-select>
</el-form-item>
<el-form-item
label-width="100px"
label="边框颜色"
>
<ColorPicker
v-model="config.customize.borderColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="边框粗细">
<el-form-item
label-width="100px"
label="边框粗细"
>
<el-input-number
v-model="config.customize.borderWidth"
:precision="0"
@ -84,7 +99,10 @@
label="请输入粗细"
/>
</el-form-item>
<el-form-item label-width="100px" label="边框圆角">
<el-form-item
label-width="100px"
label="边框圆角"
>
<el-input-number
v-model="config.customize.borderRadius"
:precision="0"
@ -100,10 +118,12 @@
v-model="config.customize.unit"
clearable
placeholder="请输入单位"
>
</el-input>
/>
</el-form-item>
<el-form-item label-width="100px" label="单位字体大小">
<el-form-item
label-width="100px"
label="单位字体大小"
>
<el-input-number
v-model="config.customize.unitSize"
:precision="0"
@ -111,13 +131,19 @@
label="请输入单位字体大小"
/>
</el-form-item>
<el-form-item label-width="100px" label="单位字体颜色">
<el-form-item
label-width="100px"
label="单位字体颜色"
>
<ColorPicker
v-model="config.customize.unitColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="上下间距">
<el-form-item
label-width="100px"
label="上下间距"
>
<el-input-number
v-model="config.customize.lineDistance"
:precision="0"
@ -125,12 +151,15 @@
label="请输入上下间距"
/>
</el-form-item>
<el-form-item label-width="100px" label="首行文字大小">
<el-form-item
label-width="100px"
label="第一行字体大小"
>
<el-input-number
v-model="config.customize.firstSize"
:precision="0"
class="bs-el-input-number"
label="请输入首行文字大小"
label="请输入第一行字体大小"
/>
</el-form-item>
<el-form-item
@ -150,19 +179,25 @@
/>
</el-select>
</el-form-item>
<el-form-item label-width="100px" label="首行字体颜色">
<el-form-item
label-width="100px"
label="第一行字体颜色"
>
<ColorPicker
v-model="config.customize.firstColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="首行字体粗细">
<el-form-item
label-width="100px"
label="第一行字体粗细"
>
<el-input-number
v-model="config.customize.firstWeight"
:precision="0"
:step="100"
class="bs-el-input-number"
label="请输入行字体粗细"
label="请输入第一行字体粗细"
/>
</el-form-item>
<el-form-item
@ -175,21 +210,30 @@
placeholder="请输入第二行文字内容"
/>
</el-form-item>
<el-form-item label-width="100px" label="第二行文字大小">
<el-form-item
label-width="100px"
label="第二行字体大小"
>
<el-input-number
v-model="config.customize.secondSize"
:precision="0"
class="bs-el-input-number"
label="请输入第二行字大小"
label="请输入第二行大小"
/>
</el-form-item>
<el-form-item label-width="100px" label="第二行字体颜色">
<el-form-item
label-width="100px"
label="第二行字体颜色"
>
<ColorPicker
v-model="config.customize.secondColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="第二行字体粗细">
<el-form-item
label-width="100px"
label="第二行字体粗细"
>
<el-input-number
v-model="config.customize.secondWeight"
:precision="0"
@ -206,7 +250,7 @@
<script>
import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
import {predefineColors} from "data-room-ui/js/utils/colorList";
import { predefineColors } from 'data-room-ui/js/utils/colorList'
import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
@ -223,42 +267,42 @@ export default {
data () {
return {
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: '从左到右',
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'
}
],
//
predefineThemeColors: predefineColors,
fontFamilyList: fontList,
fontFamilyList: fontList
}
},
computed: {

@ -53,20 +53,20 @@ const customConfig = {
borderWidth: 0,
lineDistance: 25,
borderColor: '',
fontFamily:'',
gradientDirection:'to right',
gradientColor0: 'rgba(0, 122, 255, 1)',
gradientColor1:'rgba(0, 122, 255, 1)',
firstSize: 50,
fontFamily: 'ds-digitalbold',
gradientDirection: 'to right',
gradientColor0: '#6b74e4',
gradientColor1: '#4391f4',
firstSize: 36,
firstColor: '#ffffff',
firstWeight: 500,
secondSize: 32,
secondSize: 18,
secondColor: '#ffffff',
secondWeight: 500,
secondLine: '装机处理及时率',
secondLine: '总省份数',
unit: '',
unitSize: 32,
unitColor:'#fff'
unitColor: '#fff'
}
}
export const dataConfig = {

@ -6,8 +6,8 @@
<div
:style="{
'background-image': `linear-gradient(${customize.gradientDirection}, ${
gradientColor0 ? gradientColor0 : gradientColor1
} , ${gradientColor1 ? gradientColor1 : gradientColor0})`,
gradientColor0 ? gradientColor0 : gradientColor1
} , ${gradientColor1 ? gradientColor1 : gradientColor0})`,
'border-radius':customize.borderRadius + 'px',
border:`${customize.borderWidth}px solid ${customize.borderColor}`,
}"
@ -23,7 +23,7 @@
'margin-bottom':customize.lineDistance +'px'
}"
>
{{ customize.secondLine }}
{{ customize.secondLine }}
</div>
<div
:style="{
@ -31,23 +31,25 @@
}"
class="content-right-second"
>
<span
:style="{
'font-family': config.customize.fontFamily,
'font-size': customize.secondSize + 'px',
color:customize.secondColor,
'font-weight':customize.secondWeight,
}">
{{ optionData }}
</span>
<span
:style="{
'margin-left':'10px',
:style="{
'font-family': config.customize.fontFamily,
'font-size': customize.secondSize + 'px',
color:customize.secondColor,
'font-weight':customize.secondWeight,
}"
>
{{ optionData }}
</span>
<span
:style="{
'margin-left':'10px',
'font-size': customize.unitSize + 'px',
'line-height':customize.unitSize + 'px',
color:customize.unitColor,
}">
{{unit}}
}"
>
{{ unit }}
</span>
</div>
</div>
@ -83,9 +85,9 @@ export default {
return this.config.customize.gradientColor0 || this.config.customize.gradientColor1 || 'transparent'
},
gradientColor1 () {
return this.config.customize.gradientColor1 || this.config.customize.gradientColor0 || 'transparent'
return this.config.customize.gradientColor1 || this.config.customize.gradientColor0 || 'transparent'
},
unit(){
unit () {
return this.config?.customize.unit || ''
},
option () {
@ -96,7 +98,7 @@ export default {
},
customize () {
return this.config?.customize
},
}
// tableData () {
// let dataList = ''
// if (this.optionData instanceof Array && this.optionData.length > 0) {
@ -112,7 +114,7 @@ export default {
methods: {
dataFormatting (config, data) {
let dataList = ''
if(data.success){
if (data.success) {
if (data.data instanceof Array) {
dataList = config.dataSource.dimensionField
? data.data[0][config.dataSource.dimensionField]
@ -120,8 +122,8 @@ export default {
} else {
dataList = data.data[config.dataSource.dimensionField]
}
}else{
dataList=0
} else {
dataList = 0
}
config.option = {
...config.option,
@ -129,7 +131,7 @@ export default {
}
return config
}
}
}
}
</script>

@ -125,27 +125,27 @@
label="请输入上下间距"
/>
</el-form-item>
<el-form-item label-width="100px" label="首行文字大小">
<el-form-item label-width="100px" label="第一行字体大小">
<el-input-number
v-model="config.customize.firstSize"
:precision="0"
class="bs-el-input-number"
label="请输入首行文字大小"
label="请输入第一行字体大小"
/>
</el-form-item>
<el-form-item label-width="100px" label="行字体颜色">
<el-form-item label-width="100px" label="第一行字体颜色">
<ColorPicker
v-model="config.customize.firstColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label-width="100px" label="行字体粗细">
<el-form-item label-width="100px" label="第一行字体粗细">
<el-input-number
v-model="config.customize.firstWeight"
:precision="0"
:step="100"
class="bs-el-input-number"
label="请输入行字体粗细"
label="请输入第一行字体粗细"
/>
</el-form-item>
<el-form-item
@ -158,12 +158,12 @@
placeholder="请输入第二行文字内容"
/>
</el-form-item>
<el-form-item label-width="100px" label="第二行字大小">
<el-form-item label-width="100px" label="第二行大小">
<el-input-number
v-model="config.customize.secondSize"
:precision="0"
class="bs-el-input-number"
label="请输入第二行字大小"
label="请输入第二行大小"
/>
</el-form-item>
<el-form-item

@ -50,23 +50,23 @@ const customConfig = {
},
customize: {
borderRadius: 0,
fontFamily:'',
fontFamily: 'ds-digitalbold',
borderWidth: 0,
lineDistance: 25,
borderColor: '',
gradientDirection:'to right',
gradientColor0: 'rgba(0, 122, 255, 1)',
gradientColor1:'rgba(0, 122, 255, 1)',
firstSize: 32,
gradientDirection: 'to right',
gradientColor0: '#4391f4',
gradientColor1: '#38bbe5',
firstSize: 18,
firstColor: '#ffffff',
firstWeight: 500,
secondSize: 50,
secondSize: 36,
secondColor: '#ffffff',
secondWeight: 500,
secondLine: '装机处理及时率',
secondLine: '项目总数',
unit: '',
unitSize: 32,
unitColor:'#fff'
unitColor: '#fff'
}
}
export const dataConfig = {

@ -35,17 +35,17 @@ const customConfig = {
titleStyle: {
// 标题大小
fontSize: 18,
fontSize: 14,
// 标题颜色
color: '#fff',
color: '#ffffff',
// 标题间距
marginRight: 10
},
inputStyle: {
// 输入值字体大小
fontSize: 20,
fontSize: 14,
// 输入值字体颜色
color: '#fff',
color: '#ffffff',
// 输入值左间距
paddingLeft: 10
},
@ -65,7 +65,7 @@ const customConfig = {
// 边框样式
borderStyle: {
// 边框颜色
borderColor: '#dcdfe6',
borderColor: '#ffffff',
// 边框宽度
borderWidth: 1,
// 边框样式
@ -75,7 +75,7 @@ const customConfig = {
},
backgroundStyle: {
// 背景颜色
backgroundColor: '#151a26'
backgroundColor: '#00000000'
}
}
}

@ -31,21 +31,23 @@
<div class="bs-setting-wrap">
<PosWhSetting :config="config" />
</div>
<SettingTitle v-if="config.border"></SettingTitle>
<div class="lc-field-body">
<BorderSetting
v-if="config.border"
label-width="100px"
:config="config.border"
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
<SettingTitle v-if="config.border">
边框
</SettingTitle>
<div class="lc-field-body">
<BorderSetting
v-if="config.border"
label-width="100px"
:config="config.border"
:big-title="config.title"
/>
</div>
<SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
<SettingTitle>基础</SettingTitle>
<div class="bs-setting-wrap">
<el-form-item
@ -69,7 +71,7 @@
class="bs-el-select"
>
<el-option
v-for="type in openTypeList"
v-for="(type) in openTypeList"
:key="type.label"
:label="type.label"
:value="type.value"

@ -46,9 +46,9 @@ const customConfig = {
title: '超链接占位符',
fontSize: 20,
fontWeight: 700,
color: 'left,#ffffff,#ffffff',
url: '', // 链接地址
openType: '', // 打开方式
color: 'left,#007aff,#007aff',
url: 'http://gcpaas.gccloud.com', // 链接地址
openType: '_blank', // 打开方式
dialogW: 1000, // 弹窗宽度
dialogH: 500// 弹窗高度
}

@ -43,8 +43,8 @@ const customConfig = {
skewY: 0
},
customize: {
title: '跑马灯占位符',
fontSize: 40,
title: 'DataRoom由GCPAAS开源社区开源',
fontSize: 14,
fontWeight: 700,
icon: {
name: '',

@ -51,12 +51,12 @@
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item
label="字大小"
label="大小"
label-width="100px"
>
<el-input
v-model="config.customize.fontSize"
placeholder="请输入字大小"
placeholder="请输入大小"
clearable
>
<template slot="append">
@ -87,7 +87,7 @@
/>
</el-form-item>
<el-form-item
label="字类型"
label="类型"
label-width="100px"
>
<el-select

@ -55,9 +55,9 @@ const customConfig = {
},
customize: {
title: '1234',
fontSize: 20,
fontSize: 40,
fontWeight: 700,
fontFamily: '', // 字体类型
fontFamily: 'ds-digitalbold', // 字体类型
color: 'left,#ffffff,#ffffff',
thousands: false, // 千分位分隔
align: 'center', // 文字对齐方式

@ -41,9 +41,9 @@ const customConfig = {
customize: {
placeholder: '请选择',
// 输入框背景颜色
backgroundColor: '#35393F',
backgroundColor: '#00000000',
// 输入框字体大小
fontSize: 20,
fontSize: 14,
// 输入框字体颜色
fontColor: '#FFFFFF',
// 下拉框背景颜色

@ -19,13 +19,15 @@
/>
</el-form-item>
</div>
<SettingTitle v-if="config.border"></SettingTitle>
<SettingTitle v-if="config.border">
边框
</SettingTitle>
<div class="lc-field-body">
<BorderSetting
v-if="config.border"
label-width="120px"
:config="config.border"
:bigTitle='config.title'
:big-title="config.title"
/>
</div>
<SettingTitle>位置</SettingTitle>
@ -36,11 +38,11 @@
/>
</div>
<SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="表头颜色">
@ -115,7 +117,7 @@ import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
import { chartSettingMixins } from 'data-room-ui/js/mixins/chartSettingMixins'
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
import {predefineColors} from "data-room-ui/js/utils/colorList";
import { predefineColors } from 'data-room-ui/js/utils/colorList'
export default {
components: {
ColorPicker,

@ -51,12 +51,12 @@
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item
label="字大小"
label="大小"
label-width="100px"
>
<el-input
v-model="config.customize.fontSize"
placeholder="请输入字大小"
placeholder="请输入大小"
clearable
>
<template slot="append">

@ -28,10 +28,10 @@ const customConfig = {
skewY: 0
},
customize: {
fontSize: 28,
fontWeight: 700,
fontFamily: '', // 字体类型
color: 'rgb(155 159 172)'
fontSize: 14,
fontWeight: 300,
fontFamily: 'ds-digitalbold', // 字体类型
color: '#ffffff'
}
}

@ -34,11 +34,11 @@ const customConfig = {
customize: {
value: '',
// 选择框背景颜色
backgroundColor: '#35393F',
backgroundColor: '#00000000',
// 选择框文字颜色
fontColor: '#FFFFFF',
// 选择框字大小
fontSize: 20,
// 选择框大小
fontSize: 14,
// 下拉框背景颜色
dropDownBackgroundColor: '#35393F',
// 下拉框字体颜色

@ -18,7 +18,7 @@
</template>
<script>
import {predefineColors} from 'data-room-ui/js/utils/colorList'
import { predefineColors } from 'data-room-ui/js/utils/colorList'
export default {
name: 'ColorPicker',
props: {

@ -452,22 +452,22 @@ const setting = [
// 模拟数据
const data = [
{ date: '2016年', value: 100, type: '已处理' },
{ date: '2017年', value: 200, type: '已处理' },
{ date: '2018年', value: 300, type: '已处理' },
{ date: '2019年', value: 200, type: '已处理' },
{ date: '2020年', value: 100, type: '已处理' },
{ date: '2021年', value: 200, type: '已处理' },
{ date: '2022年', value: 300, type: '已处理' },
{ date: '2023年', value: 400, type: '已处理' },
{ date: '2016年', value: 400, type: '未处理' },
{ date: '2017年', value: 100, type: '未处理' },
{ date: '2018年', value: 200, type: '未处理' },
{ date: '2019年', value: 300, type: '未处理' },
{ date: '2020年', value: 200, type: '未处理' },
{ date: '2021年', value: 100, type: '未处理' },
{ date: '2022年', value: 200, type: '未处理' },
{ date: '2023年', value: 300, type: '未处理' }
{ date: '2016年', value: 140, type: '已处理' },
{ date: '2017年', value: 240, type: '已处理' },
{ date: '2018年', value: 340, type: '已处理' },
{ date: '2019年', value: 240, type: '已处理' },
{ date: '2020年', value: 140, type: '已处理' },
{ date: '2021年', value: 240, type: '已处理' },
{ date: '2022年', value: 340, type: '已处理' },
{ date: '2023年', value: 440, type: '已处理' },
{ date: '2016年', value: 400 + 340, type: '未处理' },
{ date: '2017年', value: 100 + 340, type: '未处理' },
{ date: '2018年', value: 200 + 340, type: '未处理' },
{ date: '2019年', value: 300 + 340, type: '未处理' },
{ date: '2020年', value: 200 + 340, type: '未处理' },
{ date: '2021年', value: 100 + 340, type: '未处理' },
{ date: '2022年', value: 200 + 340, type: '未处理' },
{ date: '2023年', value: 300 + 340, type: '未处理' }
]
// 配置处理脚本

@ -1,5 +1,5 @@
//颜色选择器的预设颜色
export const predefineColors =[
// 颜色选择器的预设颜色
export const predefineColors = [
'#6b74e4',
'#4391f4',
'#38bbe5',

@ -129,7 +129,7 @@ export default function getComponentConfig (type) {
icon: Icon.getNameList()[6],
className:
'com.gccloud.dataroom.core.module.chart.components.ScreenCurrentTimeChart',
w: 380,
w: 300,
h: 60,
x: 0,
y: 0,
@ -142,7 +142,7 @@ export default function getComponentConfig (type) {
icon: Icon.getNameList()[7],
className:
'com.gccloud.dataroom.core.module.chart.components.ScreenTimeCountDownChart',
w: 500,
w: 300,
h: 60,
x: 0,
y: 0,
@ -299,58 +299,58 @@ export default function getComponentConfig (type) {
y: 0,
type
}
case 'indicatorCard':
return {
name: '指标卡一',
title: '指标卡一',
icon: null,
img: require('data-room-ui/assets/images/cardImg/card.png'),
className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndicatorCardChart',
w: 400,
h: 170,
x: 0,
y: 0,
type
case 'indicatorCard':
return {
name: '指标卡一',
title: '指标卡一',
icon: null,
img: require('data-room-ui/assets/images/cardImg/card.png'),
className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndicatorCardChart',
w: 300,
h: 114,
x: 0,
y: 0,
type
}
case 'indicatorCard2':
return {
name: '指标卡二',
title: '指标卡二',
icon: null,
img: require('data-room-ui/assets/images/cardImg/card2.png'),
className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndicatorCardChart',
w: 300,
h: 114,
x: 0,
y: 0,
type
}
case 'indicatorCard2':
return {
name: '指标卡二',
title: '指标卡二',
icon: null,
img: require('data-room-ui/assets/images/cardImg/card2.png'),
className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndicatorCardChart',
w: 400,
h: 170,
x: 0,
y: 0,
type
case 'indexCard':
return {
name: '指标卡三',
title: '指标卡三',
icon: null,
img: require('data-room-ui/assets/images/cardImg/indicard.png'),
className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndexCardChart',
w: 300,
h: 114,
x: 0,
y: 0,
type
}
case 'indexCard':
return {
name: '指标卡三',
title: '指标卡三',
icon: null,
img: require('data-room-ui/assets/images/cardImg/indicard.png'),
className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndexCardChart',
w: 400,
h: 170,
x: 0,
y: 0,
type
case 'indexCard2':
return {
name: '指标卡四',
title: '指标卡四',
icon: null,
img: require('data-room-ui/assets/images/cardImg/indcard2.png'),
className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndexCardChart',
w: 300,
h: 114,
x: 0,
y: 0,
type
}
case 'indexCard2':
return {
name: '指标卡四',
title: '指标卡四',
icon: null,
img: require('data-room-ui/assets/images/cardImg/indcard2.png'),
className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndexCardChart',
w: 400,
h: 170,
x: 0,
y: 0,
type
}
default:
return {}
}

Loading…
Cancel
Save