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

选择器组件新增边框配置

Browse Source
main
liu.tao3 2 years ago
parent 2b023a13b1 d8cb636342
commit d2c69b16f1
24 changed files with 624 additions and 97 deletions
Show Stats Download Patch File Download Diff File

7
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/constant/PageDesignConstant.java
Unescape Escape View File

@ -156,6 +156,13 @@ public interface PageDesignConstant {
* Tab切换
*/
String TAB_CHART = "chartTab";
/**
* 选择器
*/
String SELECT = "select";
}
}

12
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/bean/Chart.java
Unescape Escape View File

@ -76,4 +76,16 @@ public class Chart {
@ApiModelProperty(notes = "主题配置")
private Map<String, Object> theme;
/**
* 边框配置,格式如下
* {
* type: '',
* titleHeight: 60,
* fontSize: 30,
* color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']
*/
@ApiModelProperty(notes = "边框配置")
private Map<String, Object> border;
}

3
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenFlyMapChart.java
Unescape Escape View File

@ -56,6 +56,9 @@ public class ScreenFlyMapChart extends Chart{
@ApiModelProperty(notes = "是否开启下钻")
private Boolean down;
@ApiModelProperty(notes = "允许下钻的层级")
private Integer downLevel;
@ApiModelProperty(notes = "轨迹图像")
private String symbol;

55
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenSelectChart.java
Unescape Escape View File

@ -0,0 +1,55 @@
package com.gccloud.dataroom.core.module.chart.components;
import com.gccloud.dataroom.core.constant.PageDesignConstant;
import com.gccloud.dataroom.core.module.chart.bean.Chart;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
/**
* 下拉选择
* @author hongyang
* @version 1.0
* @date 2023/3/13 16:44
*/
@Data
public class ScreenSelectChart extends Chart {
@ApiModelProperty(notes = "组件类型")
private String type = PageDesignConstant.BigScreen.Type.SELECT;
@ApiModelProperty(notes = "个性化")
private Customize customize = new Customize();
@Data
public static class Customize {
@ApiModelProperty("输入框背景颜色")
private String backgroundColor;
@ApiModelProperty("输入框字体大小")
private Integer fontSize;
@ApiModelProperty("输入框字体颜色")
private String fontColor;
@ApiModelProperty("下拉框背景颜色")
private String dropDownBackgroundColor;
@ApiModelProperty("下拉框字体颜色")
private String dropDownFontColor;
@ApiModelProperty("下拉项hover背景颜色")
private String dropDownHoverBackgroundColor;
@ApiModelProperty("下拉项hover字体颜色")
private String dropDownHoverFontColor;
@ApiModelProperty("激活项背景颜色")
private String activeBackgroundColor;
@ApiModelProperty("激活项字体颜色")
private String activeFontColor;
}
}

2
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/manage/controller/DataRoomPageController.java
Unescape Escape View File

@ -94,7 +94,7 @@ public class DataRoomPageController {
@PostMapping("/update")
@ApiOperation(value = "修改大屏/组件", position = 30, produces = MediaType.APPLICATION_JSON_VALUE)
public R<String> update(@RequestBody DataRoomPageDTO bigScreenPageDTO) {
if (bigScreenPageDTO.getIsPreview().equals(Boolean.TRUE)) {
if (Boolean.TRUE.equals(bigScreenPageDTO.getIsPreview())) {
// 保存到预览临时缓存表
String code = previewService.add(bigScreenPageDTO);
return R.success(code);

1
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/map/controller/DataRoomMapController.java
Unescape Escape View File

@ -104,7 +104,6 @@ public class DataRoomMapController {
if (info.getUploadedGeoJson().equals(1)) {
vo.setAvailable(1);
}
vo.setEnableDown(info.getEnableDown());
vo.setGeoJson(info.getGeoJson());
vo.setId(info.getId());
return R.success(vo);

3
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/map/dto/DataRoomMapDTO.java
Unescape Escape View File

@ -26,9 +26,6 @@ public class DataRoomMapDTO {
@ApiModelProperty(notes = "地图级别 0-世界 1-国家 2-省 3-市 4-区县")
private Integer level;
@ApiModelProperty(notes = "是否支持下钻")
private Integer enableDown;
@ApiModelProperty(notes = "geo地图数据json")
private String geoJson;

2
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/map/dto/MapSearchDTO.java
Unescape Escape View File

@ -21,7 +21,5 @@ public class MapSearchDTO extends SearchDTO {
@ApiModelProperty(notes = "是否已上传")
private Integer uploadedGeoJson;
@ApiModelProperty(notes = "是否支持下钻")
private Integer enableDown;
}

3
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/map/entity/DataRoomMapEntity.java
Unescape Escape View File

@ -33,9 +33,6 @@ public class DataRoomMapEntity extends SuperEntity {
@ApiModelProperty(notes = "地图级别 0-世界 1-国家 2-省 3-市 4-区县")
private Integer level;
@ApiModelProperty(notes = "是否支持下钻 0-否 1-是")
private Integer enableDown;
@ApiModelProperty(notes = "geo地图数据json")
private String geoJson;

4
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/map/service/impl/DataRoomMapServiceImpl.java
Unescape Escape View File

@ -46,7 +46,7 @@ public class DataRoomMapServiceImpl extends ServiceImpl<DataRoomMapDao, DataRoom
// 根据层级，如果某个地图的某个子级（或子级的子级...）也符合该层级，那么把该地图也返回
LambdaQueryWrapper<DataRoomMapEntity> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.select(DataRoomMapEntity::getId, DataRoomMapEntity::getLevel, DataRoomMapEntity::getParentId,
DataRoomMapEntity::getMapCode, DataRoomMapEntity::getName, DataRoomMapEntity::getEnableDown, DataRoomMapEntity::getUploadedGeoJson);
DataRoomMapEntity::getMapCode, DataRoomMapEntity::getName, DataRoomMapEntity::getUploadedGeoJson);
queryWrapper.le(DataRoomMapEntity::getLevel, level);
List<DataRoomMapEntity> list = list(queryWrapper);
// 转成树形结构
@ -162,7 +162,6 @@ public class DataRoomMapServiceImpl extends ServiceImpl<DataRoomMapDao, DataRoom
updateWrapper.eq(DataRoomMapEntity::getId, mapDTO.getId());
// 只允许修改名称和是否开启下钻
updateWrapper.set(DataRoomMapEntity::getName, mapDTO.getName());
updateWrapper.set(DataRoomMapEntity::getEnableDown, mapDTO.getEnableDown());
// 如果之前没有上传过geoJson，现在上传了，那么允许更新geoJson
if (!uploadedGeoJson.equals(YES) && StringUtils.isNotBlank(mapDTO.getGeoJson())) {
if (mapDTO.getAutoParseNextLevel().equals(YES)) {
@ -198,7 +197,6 @@ public class DataRoomMapServiceImpl extends ServiceImpl<DataRoomMapDao, DataRoom
childMapEntity.setLevel(mapEntity.getLevel() + 1);
childMapEntity.setMapCode(properties.getString("name"));
childMapEntity.setName(properties.getString("name"));
childMapEntity.setEnableDown(NO);
childMapEntity.setUploadedGeoJson(NO);
mapEntityList.add(childMapEntity);
}

3
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/map/vo/DataRoomMapDataVO.java
Unescape Escape View File

@ -14,9 +14,6 @@ public class DataRoomMapDataVO {
@ApiModelProperty(notes = "主键")
private String id;
@ApiModelProperty(notes = "是否支持下钻 0-否 1-是")
private Integer enableDown;
@ApiModelProperty(notes = "geo地图数据json")
private String geoJson;

3
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/map/vo/DataRoomMapVO.java
Unescape Escape View File

@ -28,9 +28,6 @@ public class DataRoomMapVO {
@ApiModelProperty(notes = "地图级别 0-世界 1-国家 2-省 3-市 4-区县")
private Integer level;
@ApiModelProperty(notes = "是否支持下钻 0-否 1-是")
private Integer enableDown;
@ApiModelProperty(notes = "geo地图数据json")
private String geoJson;

4
DataRoom/dataroom-core/src/main/resources/mapper/DataRoomMapDao.xml
Unescape Escape View File

@ -10,7 +10,6 @@
map_code,
name,
level,
enable_down,
geo_json,
uploaded_geo_json,
create_date,
@ -37,9 +36,6 @@
OR map_code like concat('%', #{searchDTO.searchKey}, '%')
)
</if>
<if test="searchDTO.enableDown != null">
AND enable_down = #{searchDTO.enableDown}
</if>
<if test="searchDTO.level != null">
AND level = #{searchDTO.level}
</if>

14
DataRoom/doc/init.sql
Unescape Escape View File

@ -196,7 +196,6 @@ CREATE TABLE `big_screen_map`
`name` varchar(255) DEFAULT NULL COMMENT '地图名称',
`geo_json` longtext DEFAULT NULL COMMENT '地图geoJson',
`level` tinyint(2) NOT NULL DEFAULT 0 COMMENT '地图级别 0-世界 1-国家 2-省 3-市 4-区县',
`enable_down` tinyint(2) NOT NULL DEFAULT 0 COMMENT '是否支持下钻 0-否 1-是',
`uploaded_geo_json` tinyint(2) NOT NULL DEFAULT 0 COMMENT '是否已上传geoJson 0-否 1-是',
`update_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '更新时间',
`create_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
@ -205,4 +204,15 @@ CREATE TABLE `big_screen_map`
`del_flag` tinyint(2) NOT NULL DEFAULT '0' COMMENT '删除标识',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB
DEFAULT CHARSET = utf8 COMMENT ='地图数据维护表';
DEFAULT CHARSET = utf8 COMMENT ='地图数据维护表';
DROP TABLE IF EXISTS `big_screen_page_preview`;
CREATE TABLE `big_screen_page_preview`
(
`id` bigint(32) NOT NULL AUTO_INCREMENT COMMENT '主键',
`code` varchar(255) NOT NULL DEFAULT '' COMMENT '页面编码，页面唯一标识符',
`config` longtext COMMENT '页面配置',
`create_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
PRIMARY KEY (`id`)
) ENGINE = InnoDB
DEFAULT CHARSET = utf8mb4 COMMENT ='页面预览缓存表，每日定时删除';

1
DataRoom/doc/update.sql
Unescape Escape View File

@ -122,7 +122,6 @@ CREATE TABLE `big_screen_map`
`name` varchar(255) DEFAULT NULL COMMENT '地图名称',
`geo_json` longtext DEFAULT NULL COMMENT '地图geoJson',
`level` tinyint(2) NOT NULL DEFAULT 0 COMMENT '地图级别 0-世界 1-国家 2-省 3-市 4-区县',
`enable_down` tinyint(2) NOT NULL DEFAULT 0 COMMENT '是否支持下钻 0-否 1-是',
`uploaded_geo_json` tinyint(2) NOT NULL DEFAULT 0 COMMENT '是否已上传geoJson 0-否 1-是',
`update_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '更新时间',
`create_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',

208
data-room-ui/packages/BasicComponents/Select/index.vue
Unescape Escape View File

@ -0,0 +1,208 @@
<template>
<el-select
:key="config.code"
v-model="selectValue"
:popper-class="'basic-component-select selct-popper-' + config.code"
:class="['basic-component-select', `selct-${config.code}`]"
:placeholder="`请选择${placeholder}`"
filterable
clearable
@visible-change="visibleChange"
@change="selectChange"
>
<el-option
v-for="(option, key) in config.option.data"
:key="key"
:label="option[config.dataSource.dimensionField]"
:value="option[config.dataSource.metricField]"
/>
</el-select>
</template>
<script>
import { EventBus } from 'data-room-ui/js/utils/eventBus'
import commonMixins from 'data-room-ui/js/mixins/commonMixins'
import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
import { getDataSetDetails } from 'data-room-ui/js/api/bigScreenApi'
window.dataSetFields = []
export default {
name: 'BasicComponentSelect',
components: {},
mixins: [commonMixins, linkageMixins],
props: {
// 组件配置
config: {
type: Object,
default: () => ({})
}
},
data () {
return {
selectValue: '',
innerConfig: {}
}
},
computed: {
placeholder () {
return window.dataSetFields.find(field => field.value === this.config.dataSource.dimensionField)?.label || ''
}
},
watch: { },
created () { },
mounted () {
this.changeStyle(this.config)
EventBus.$on('changeBusinessKey', () => {
window.dataSetFields = []
})
},
beforeDestroy () {
EventBus.$off('changeBusinessKey')
},
methods: {
dataFormatting (config, data) {
// 数据返回成功则赋值
if (data.success) {
data = data.data
// 获取到后端返回的数据，有则赋值
if (config.dataHandler) {
try {
// 此处函数处理data
eval(config.dataHandler)
} catch (e) {
console.info(e)
}
}
config.option.data = data
config.customize.title = config.option.data[config.dataSource.dimensionField] || config.customize.title
if (window.dataSetFields.length === 0) {
getDataSetDetails(this.config.dataSource.businessKey).then(res => {
window.dataSetFields = res.fields.map(field => {
return {
label: field.comment || field.fieldDesc,
value: field.name || field.fieldName
}
})
})
}
// 语音播报
} else {
// 数据返回失败则赋前端的模拟数据
config.option.data = []
}
return config
},
changeStyle (config) {
this.innerConfig = config
// 选择器元素
const selectInputEl = document.querySelector(`.selct-${config.code} .el-input__inner`)
// 背景颜色
selectInputEl.style.backgroundColor = config.customize.backgroundColor
// 字体大小
selectInputEl.style.fontSize = config.customize.fontSize + 'px'
// 字体颜色
selectInputEl.style.color = config.customize.fontColor
// 选择器下拉框元素
const selectDropdownEl = document.querySelector(`.selct-${config.code} .el-select-dropdown`)
// 箭头背景颜色和下拉框背景颜色一致
if (selectDropdownEl) {
// 下拉框无边框
selectDropdownEl.style.border = 'none'
// 背景颜色
selectDropdownEl.style.backgroundColor = config.customize.dropDownBackgroundColor
// 下拉项hover颜色
const selectDropdownItemEl = document.querySelectorAll(`.selct-${this.innerConfig.code} .el-select-dropdown__item`)
selectDropdownItemEl.forEach(item => {
// 下拉项字体颜色
item.style.color = this.innerConfig.customize.dropDownFontColor
item.addEventListener('mouseenter', () => {
item.style.color = this.innerConfig.customize.dropDownHoverFontColor
item.style.backgroundColor = this.innerConfig.customize.dropDownHoverBackgroundColor
})
item.addEventListener('mouseleave', () => {
item.style.color = this.innerConfig.customize.dropDownFontColor
item.style.backgroundColor = this.innerConfig.customize.dropDownBackgroundColor
})
})
}
},
// 组件联动
selectChange (val) {
this.linkage(this.config.option.data.find(item => item[this.config.dataSource.metricField] === val))
},
visibleChange (val) {
if (val) {
// 修改下拉框背景颜色，让下拉框背景颜色和箭头背景颜色一致
const selectDropdownEl = document.querySelector(`.selct-popper-${this.innerConfig.code}`)
selectDropdownEl.style.color = this.innerConfig.customize.dropDownBackgroundColor
// 空状态
const selectDropdownEmptyEl = document.querySelector(`.selct-popper-${this.innerConfig.code} .el-select-dropdown__empty`)
if (selectDropdownEmptyEl) {
selectDropdownEmptyEl.style.backgroundColor = this.innerConfig.customize.dropDownBackgroundColor
}
// 激活项
const selectDropdownItemSelectedEl = document.querySelectorAll(`.selct-popper-${this.innerConfig.code} .el-select-dropdown__item.selected`)
selectDropdownItemSelectedEl.forEach(item => {
item.style.color = this.innerConfig.customize.activeFontColor
item.style.backgroundColor = this.innerConfig.customize.activeBackgroundColor
})
}
// 不是激活项的还是使用背景颜色
const selectDropdownItemEl = document.querySelectorAll(`.selct-popper-${this.innerConfig.code} .el-select-dropdown__item`)
selectDropdownItemEl.forEach(item => {
// 检查是否是激活项，不是则使用背景颜色
if (!item.classList.contains('selected')) {
item.style.color = this.innerConfig.customize.dropDownFontColor
item.style.backgroundColor = this.innerConfig.customize.dropDownBackgroundColor
}
})
}
}
}
</script>
<style lang="scss">
.basic-component-select{
color: '';
.el-select-dropdown__wrap {
margin-bottom: 0px !important;
}
.el-select-group__wrap:not(:last-of-type)::after {
background-color: transparent !important;
}
.popper__arrow{
border-bottom-color:var(--color) !important;
&::after{
border-bottom-color:var(--color) !important;
}
}
}
</style>
<style lang="scss" scoped>
.basic-component-select {
width: 100%;
height: 100%;
::v-deep .el-input {
height: 100% !important;
// 选择器输入框样式
.el-input__inner {
height: 100% !important;
border-color: var(--bs-el-border) !important;
}
}
.el-tag.el-tag--info {
color: var(--bs-el-text) !important;
}
.popper__arrow {
bottom: 0 !important;
&:after {
bottom: 0 !important;
}
}
}
</style>

182
data-room-ui/packages/BasicComponents/Select/setting.vue
Unescape Escape View File

@ -0,0 +1,182 @@
<template>
<div class="bs-setting-wrap">
<el-form
ref="form"
:model="config"
label-width="100px"
label-position="left"
class="setting-body bs-el-form"
>
<div>
<slot name="top" />
<el-form
:model="config.customize"
label-position="left"
class="setting-body bs-el-form"
label-width="100px"
>
<SettingTitle>位置</SettingTitle>
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle v-if="config.border">边框</SettingTitle>
<div class="lc-field-body">
<BorderSetting
v-if="config.border"
label-width="120px"
:config="config.border"
/>
</div>
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<!-- 选择器背景颜色 -->
<el-form-item label="背景颜色">
<ColorPicker
v-model="config.customize.backgroundColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<!-- 字体大小 -->
<el-form-item label="字体大小">
<el-input-number
v-model="config.customize.fontSize"
class="bs-el-input-number"
:min="12"
:max="100"
/>
</el-form-item>
<!-- 字体颜色 -->
<el-form-item label="字体颜色">
<ColorPicker
v-model="config.customize.fontColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<!-- 下拉框是否需要边框 -->
<!-- <el-form-item label="下拉框边框">
<el-switch v-model="config.customize.dropDownBorder" />
</el-form-item> -->
<!-- 下拉框如果有边框，再选择边框颜色 -->
<!-- <el-form-item
v-if="config.customize.dropDownBorder"
label="下拉框边框颜色"
>
<ColorPicker
v-model="config.customize.dropDownBorderColor"
:predefine="predefineThemeColors"
/>
</el-form-item> -->
<!-- hover 颜色 -->
<!-- 下拉框字体大小 -->
<!-- <el-form-item label="下拉框字体大小">
<el-input-number
v-model="config.customize.dropDownFontSize"
class="bs-el-input-number"
:min="12"
:max="100"
/>
</el-form-item> -->
<!-- 下拉框字体颜色 -->
</div>
<SettingTitle>下拉项</SettingTitle>
<!-- 选择器下拉框背景颜色 -->
<div class="lc-field-body">
<el-form-item label="背景颜色">
<ColorPicker
v-model="config.customize.dropDownBackgroundColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label="字体颜色">
<ColorPicker
v-model="config.customize.dropDownFontColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<!-- 下拉项悬浮背景颜色 -->
<el-form-item label="悬浮颜色">
<ColorPicker
v-model="config.customize.dropDownHoverBackgroundColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<!-- 下拉项悬浮字体颜色 -->
<el-form-item label="悬浮字体颜色">
<ColorPicker
v-model="config.customize.dropDownHoverFontColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<!-- 激活项背景颜色 -->
<el-form-item label="激活项背景颜色">
<ColorPicker
v-model="config.customize.activeBackgroundColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<!-- 激活项文字颜色 -->
<el-form-item label="激活项文字颜色">
<ColorPicker
v-model="config.customize.activeFontColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
</div>
</el-form>
</div>
</el-form>
</div>
</template>
<script>
import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
// import IconPicker from 'data-room-ui/IconPicker/index.vue'
import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
export default {
name: 'Border14Setting',
components: {
// IconPicker,
ColorPicker,
PosWhSetting,
SettingTitle,
BorderSetting
},
props: {
config: {
type: Object,
required: true
},
predefineThemeColors: {
type: Array,
default: () => {
return [
'#007aff',
'#1aa97b',
'#ff4d53',
'#1890FF',
'#DF0E1B',
'#0086CC',
'#2B74CF',
'#00BC9D',
'#ED7D32'
]
}
}
},
data () {
return {
}
},
watch: {},
mounted () {},
methods: {}
}
</script>
<style lang="scss" scoped>
.lc-field-body {
width: 97%;
padding: 16px;
}
</style>

56
data-room-ui/packages/BasicComponents/Select/settingConfig.js
Unescape Escape View File

@ -0,0 +1,56 @@
import { commonConfig, displayOption } from 'data-room-ui/js/config'
export const settingConfig = {
// text内容
text: '选择器',
// 设置面板属性的显隐
displayOption: {
...displayOption,
dimensionField: {
// 维度
label: '选项的标签', // 维度/查询字段
enable: true,
multiple: false // 是否多选
},
metricField: {
// 指标
label: '绑定值',
enable: true,
multiple: false // 是否多选
}
}
}
const customConfig = {
type: 'select',
// 名称
title: '下拉框',
root: {
version: '2023071001'
},
// 自定义属性
customize: {
// 输入框背景颜色
backgroundColor: '#35393F',
// 输入框字体大小
fontSize: 20,
// 输入框字体颜色
fontColor: '#FFFFFF',
// 下拉框背景颜色
dropDownBackgroundColor: '#35393F',
// 下拉框字体颜色
dropDownFontColor: '#FFFFFF',
// 下拉项hover背景颜色
dropDownHoverBackgroundColor: '#6A7E9D',
// 下拉项hover字体颜色
dropDownHoverFontColor: '#FFFFFF',
// 激活项背景颜色
activeBackgroundColor: '#6A7E9D',
// 激活项字体颜色
activeFontColor: '#FFFFFF'
}
}
export const dataConfig = {
...commonConfig(customConfig)
}

134
data-room-ui/packages/BigScreenDesign/PageDesignTop.vue
Unescape Escape View File

@ -29,9 +29,7 @@
trigger="click"
class="align-list-dropdown"
>
<CusBtn
type="primary"
>
<CusBtn type="primary">
对齐方式<i class="el-icon-arrow-down el-icon--right" />
</CusBtn>
<el-dropdown-menu
@ -39,7 +37,7 @@
class="align-dropdown-menu"
>
<el-dropdown-item
v-for="(mode,index) in alignList"
v-for="(mode, index) in alignList"
:key="mode.value"
@click.native="setAlign(mode.value)"
>
@ -58,9 +56,7 @@
>
设计分工
</CusBtn>
<CusBtn
@click.native="showHostory"
>
<CusBtn @click.native="showHostory">
历史操作
</CusBtn>
<CusBtn
@ -369,71 +365,64 @@ export default {
},
// 预览
async execRun () {
this.save('saveAndPreviewLoading').then((res) => {
this.preview()
this.save('preview').then((res) => {
this.preview(res)
})
},
// 预览
preview () {
preview (previewCode) {
const { href } = this.$router.resolve({
path: window.BS_CONFIG?.routers?.previewUrl || '/big-screen/preview',
query: {
code: this.pageCode
code: previewCode || this.pageCode
}
})
window.open(href, '_blank')
},
// 保存
save (loadingType = 'saveLoading', hasPageTemplateId = false) {
async save (type, hasPageTemplateId = false) {
const pageInfo = cloneDeep(this.handleSaveData())
// 保存页面
this[loadingType] = true
return new Promise((resolve, reject) => {
try {
if (!hasPageTemplateId) {
delete pageInfo.pageTemplateId
}
const node = document.querySelector('.render-theme-wrap')
toJpeg(node, { quality: 0.2 })
.then((dataUrl) => {
const that = this
if (showSize(dataUrl) > 200) {
const url = dataURLtoBlob(dataUrl)
// 压缩到500KB,这里的500就是要压缩的大小,可自定义
imageConversion
.compressAccurately(url, {
size: 200, // 图片大小压缩到100kb
width: 1280, // 宽度压缩到1280
height: 720 // 高度压缩到720
})
.then((res) => {
translateBlobToBase64(res, function (e) {
pageInfo.coverPicture = e.result
saveScreen(pageInfo)
.then((res) => {
that.$message.success('保存成功')
resolve(res)
})
.finally(() => {
that[loadingType] = false
})
})
})
} else {
pageInfo.coverPicture = dataUrl
saveScreen(pageInfo)
.then((res) => {
this.$message.success('保存成功')
resolve(res)
})
.finally(() => {
this[loadingType] = false
})
}
})
.catch(() => {
this[loadingType] = false
})
})
if (type === 'preview') {
pageInfo.isPreview = true
const res = await saveScreen(pageInfo)
return res
} else {
pageInfo.isPreview = false
this.saveLoading = true
const node = document.querySelector('.render-theme-wrap')
const dataUrl = await toJpeg(node, { quality: 0.2 })
if (showSize(dataUrl) > 200) {
const url = dataURLtoBlob(dataUrl)
// 压缩到500KB,这里的500就是要压缩的大小,可自定义
const imgRes = await imageConversion.compressAccurately(url, {
size: 200, // 图片大小压缩到100kb
width: 1280, // 宽度压缩到1280
height: 720 // 高度压缩到720
})
const base64 = await translateBlobToBase64(imgRes)
pageInfo.coverPicture = base64.result
const res = await saveScreen(pageInfo)
this.$message.success('保存成功')
return res
} else {
pageInfo.coverPicture = dataUrl
const res = await saveScreen(pageInfo)
this.$message.success('保存成功')
return res
}
}
} catch (error) {
console.error(error)
this.saveLoading = false
throw error
} finally {
this.saveLoading = false
}
},
goBack (path) {
this.$router.push({
@ -520,6 +509,7 @@ export default {
</script>
<style lang="scss" scoped>
@import '../BigScreenDesign/fonts/iconfont.css';
.default-layout-box {
display: flex;
flex-wrap: wrap;
@ -585,6 +575,7 @@ export default {
display: flex;
margin-left: 50px;
align-items: center;
i {
font-size: 14px;
}
@ -620,27 +611,34 @@ export default {
text-overflow: ellipsis;
}
}
.theme-switch{
.theme-switch {
margin-right: 10px;
/deep/.el-switch__label{
color: #bcc9d4!important;
/deep/.el-switch__label {
color: #bcc9d4 !important;
}
/deep/.el-switch__label.is-active{
color: var(--bs-el-color-primary)!important;
/deep/.el-switch__label.is-active {
color: var(--bs-el-color-primary) !important;
}
}
.align-list-dropdown{
.align-list-dropdown {
width: 100px !important;
color: #ffffff!important;
color: #ffffff !important;
}
}
// 自定义dropdown的样式
.align-dropdown-menu{
background-color: var(--bs-background-2)!important;
.align-dropdown-menu {
background-color: var(--bs-background-2) !important;
border: 1px solid var(--bs-border-1);
/deep/ .el-dropdown-menu__item{
background-color: var(--bs-background-2)!important;
/deep/ .el-dropdown-menu__item {
background-color: var(--bs-background-2) !important;
&:hover {
color: var(--bs-el-color-primary) !important;
background-color: var(--bs-el-background-3) !important;
@ -648,6 +646,7 @@ export default {
}
}
::v-deep .el-input__inner,
::v-deep .el-color-picker__color-inner,
::v-deep .el-input-number--mini,
@ -658,6 +657,7 @@ export default {
border: 0 !important;
width: 100px;
}
// .bs-el-input-number{
// }

2
data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue
Unescape Escape View File

@ -578,6 +578,7 @@
</template>
<script>
import ElDragSelect from './ElDragSelect.vue'
import { EventBus } from 'data-room-ui/js/utils/eventBus'
// import { isEmpty, cloneDeep } from 'lodash'
import isEmpty from 'lodash/isEmpty'
import cloneDeep from 'lodash/cloneDeep'
@ -736,6 +737,7 @@ export default {
if (id) {
this.config.dataSource.businessKey = id
getDataSetDetails(id).then(res => {
EventBus.$emit('changeBusinessKey')
this.fieldsList = res.fields
// 初始化时以组件本来的参数设置为主
if (type === 'initial') {

2
data-room-ui/packages/assets/images/bigScreenIcon/svg/20themeSelect.svg
Unescape Escape View File

@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1693807714061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13871" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M912.6912 205.380267H110.3872A109.397333 109.397333 0 0 0 1.024 314.7776v364.680533a109.397333 109.397333 0 0 0 109.397333 109.397334H912.725333a109.397333 109.397333 0 0 0 109.397334-109.397334V314.7776a109.397333 109.397333 0 0 0-109.397334-109.397333z m36.4544 455.816533c0 30.208-24.507733 54.715733-54.715733 54.715733H128.682667a54.715733 54.715733 0 0 1-54.715734-54.715733V333.0048c0-30.208 24.4736-54.715733 54.715734-54.715733h765.781333c30.208 0 54.715733 24.507733 54.715733 54.715733v328.192z" fill="#3366FF" p-id="13872"></path><path d="M850.670933 490.530133a18.2272 18.2272 0 0 0-13.858133-29.9008h-119.6032a18.2272 18.2272 0 0 0-13.858133 29.9008l59.8016 70.0416a18.2272 18.2272 0 0 0 27.716266 0l59.8016-70.0416z" fill="#32EDCC" p-id="13873"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694587929030" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5108" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M692.095 184C663.52 255.494 593.655 306 512 306s-151.52-50.506-180.095-122h-98.308l-68.71 90.491 64.29 49.346a104.021 104.021 0 0 1 40.678 82.518V840h484.29V406.355a104.021 104.021 0 0 1 40.677-82.518l64.291-49.346L790.403 184h-98.308z m-71.9 0h-216.39c23.288 34.964 63.053 58 108.195 58 45.142 0 84.907-23.036 108.194-58z m-406.431-72h596.472a31.975 31.975 0 0 1 25.466 12.642l104.78 137.996c10.65 14.026 7.969 34.027-6 44.748l-95.863 73.579a32.007 32.007 0 0 0-12.516 25.39V880c0 17.673-14.318 32-31.981 32H229.878c-17.663 0-31.981-14.327-31.981-32V406.355c0-9.95-4.626-19.334-12.516-25.39l-95.863-73.579c-13.969-10.721-16.65-30.722-6-44.748l104.78-137.996A31.975 31.975 0 0 1 213.764 112z" fill="#5090F1" p-id="5109"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

1
data-room-ui/packages/assets/images/bigScreenIcon/svg/21select.svg
Unescape Escape View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1693807714061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13871" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M912.6912 205.380267H110.3872A109.397333 109.397333 0 0 0 1.024 314.7776v364.680533a109.397333 109.397333 0 0 0 109.397333 109.397334H912.725333a109.397333 109.397333 0 0 0 109.397334-109.397334V314.7776a109.397333 109.397333 0 0 0-109.397334-109.397333z m36.4544 455.816533c0 30.208-24.507733 54.715733-54.715733 54.715733H128.682667a54.715733 54.715733 0 0 1-54.715734-54.715733V333.0048c0-30.208 24.4736-54.715733 54.715734-54.715733h765.781333c30.208 0 54.715733 24.507733 54.715733 54.715733v328.192z" fill="#3366FF" p-id="13872"></path><path d="M850.670933 490.530133a18.2272 18.2272 0 0 0-13.858133-29.9008h-119.6032a18.2272 18.2272 0 0 0-13.858133 29.9008l59.8016 70.0416a18.2272 18.2272 0 0 0 27.716266 0l59.8016-70.0416z" fill="#32EDCC" p-id="13873"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@ -28,9 +28,10 @@ const typeList = [
'input',
'button',
'marquee',
'themeSwitcher',
'chartTab',
'themeSelect'
'themeSwitcher',
'themeSelect',
'select'
]
let basicConfigList = []
basicConfigList = typeList.map((type) => {
@ -40,7 +41,7 @@ basicConfigList = basicConfigList.map((item) => {
return basicComponentsConfig(item)
})
// 生成基本配置
export function basicComponentsConfig(item) {
export function basicComponentsConfig (item) {
return {
...item,
border:{type:'',titleHeight:60,fontSize:30,color:['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9']},

12
data-room-ui/packages/js/utils/getComponentConfig.js
Unescape Escape View File

@ -249,6 +249,18 @@ export default function getComponentConfig (type) {
y: 0,
type
}
case 'select':
return {
name: '选择器',
title: '选择器',
icon: Icon.getNameList()[21],
className: 'com.gccloud.dataroom.core.module.chart.components.ScreenSelectChart',
w: 200,
h: 100,
x: 0,
y: 0,
type
}
default:
return {}
}

Write Preview
Loading…
Cancel
Save