选择器组件新增边框配置

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/constant/PageDesignConstant.java

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

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/bean/Chart.java

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

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenFlyMapChart.java

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

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenSelectChart.java

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

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/manage/controller/DataRoomPageController.java

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

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/map/controller/DataRoomMapController.java

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

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/map/dto/DataRoomMapDTO.java

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

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/map/dto/MapSearchDTO.java

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

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/map/entity/DataRoomMapEntity.java

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

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/map/service/impl/DataRoomMapServiceImpl.java

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

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/map/vo/DataRoomMapDataVO.java

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

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/map/vo/DataRoomMapVO.java

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

DataRoom/dataroom-core/src/main/resources/mapper/DataRoomMapDao.xml

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

DataRoom/doc/init.sql

@@ -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 ='页面预览缓存表，每日定时删除';

DataRoom/doc/update.sql

@@ -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 '创建时间',

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

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

data-room-ui/packages/BasicComponents/Select/setting.vue

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

data-room-ui/packages/BasicComponents/Select/settingConfig.js

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

data-room-ui/packages/BigScreenDesign/PageDesignTop.vue

@@ -29,9 +29,7 @@
         trigger="click"
         class="align-list-dropdown"
       >
-        <CusBtn
+        <CusBtn type="primary">
-          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
+      <CusBtn @click.native="showHostory">
-        @click.native="showHostory"
-      >
         历史操作
       </CusBtn>
       <CusBtn
@@ -369,71 +365,64 @@ export default {
     },
     // 预览
     async execRun () {
-      this.save('saveAndPreviewLoading').then((res) => {
+      this.save('preview').then((res) => {
-        this.preview()
+        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
+      try {
-      return new Promise((resolve, reject) => {
         if (!hasPageTemplateId) {
           delete pageInfo.pageTemplateId
         }
-        const node = document.querySelector('.render-theme-wrap')
+        if (type === 'preview') {
-        toJpeg(node, { quality: 0.2 })
+          pageInfo.isPreview = true
-          .then((dataUrl) => {
+          const res = await saveScreen(pageInfo)
-            const that = this
+          return res
-            if (showSize(dataUrl) > 200) {
+        } else {
-              const url = dataURLtoBlob(dataUrl)
+          pageInfo.isPreview = false
-              // 压缩到500KB,这里的500就是要压缩的大小,可自定义
+          this.saveLoading = true
-              imageConversion
+          const node = document.querySelector('.render-theme-wrap')
-                .compressAccurately(url, {
+          const dataUrl = await toJpeg(node, { quality: 0.2 })
-                  size: 200, // 图片大小压缩到100kb
+          if (showSize(dataUrl) > 200) {
-                  width: 1280, // 宽度压缩到1280
+            const url = dataURLtoBlob(dataUrl)
-                  height: 720 // 高度压缩到720
+            // 压缩到500KB,这里的500就是要压缩的大小,可自定义
-                })
+            const imgRes = await imageConversion.compressAccurately(url, {
-                .then((res) => {
+              size: 200, // 图片大小压缩到100kb
-                  translateBlobToBase64(res, function (e) {
+              width: 1280, // 宽度压缩到1280
-                    pageInfo.coverPicture = e.result
+              height: 720 // 高度压缩到720
-                    saveScreen(pageInfo)
+            })
-                      .then((res) => {
+            const base64 = await translateBlobToBase64(imgRes)
-                        that.$message.success('保存成功')
+            pageInfo.coverPicture = base64.result
-                        resolve(res)
+            const res = await saveScreen(pageInfo)
-                      })
+            this.$message.success('保存成功')
-                      .finally(() => {
+            return res
-                        that[loadingType] = false
+          } else {
-                      })
+            pageInfo.coverPicture = dataUrl
-                  })
+            const res = await saveScreen(pageInfo)
-                })
+            this.$message.success('保存成功')
-            } else {
+            return res
-              pageInfo.coverPicture = dataUrl
+          }
-              saveScreen(pageInfo)
+        }
-                .then((res) => {
+      } catch (error) {
-                  this.$message.success('保存成功')
+        console.error(error)
-                  resolve(res)
+        this.saveLoading = false
-                })
+        throw error
-                .finally(() => {
+      } finally {
-                  this[loadingType] = false
+        this.saveLoading = false
-                })
+      }
-            }
-          })
-          .catch(() => {
-            this[loadingType] = 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{
+.align-dropdown-menu {
-  background-color: var(--bs-background-2)!important;
+  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{
 
 // }

data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue

@@ -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') {

data-room-ui/packages/assets/images/bigScreenIcon/svg/20themeSelect.svg

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

data-room-ui/packages/assets/images/bigScreenIcon/svg/21select.svg

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

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

@@ -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']},

data-room-ui/packages/js/utils/getComponentConfig.js

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