初始化

2025-11-08 10:38:36 +08:00
commit 3beeec7296
1626 changed files with 198488 additions and 0 deletions
--- a/frontend/packages/BasicComponents/Select/index.vue
+++ b/frontend/packages/BasicComponents/Select/index.vue
@@ -0,0 +1,224 @@
+<template>
+  <el-select
+    :key="config.code"
+    v-model="value"
+    :popper-class="'basic-component-select select-popper-' + config.code"
+    :class="['basic-component-select', `select-${config.code}`]"
+    :placeholder="config.customize.placeholder"
+    clearable
+    :filterable="filterable"
+    :style="{'--input-placeholder-color':config.customize.placeholderColor,'--input-placeholder-font-size':config.customize.placeholderFontSize + 'px'}"
+    @visible-change="visibleChange"
+    @change="selectChange"
+    @mouseenter.native="mouseenter"
+  >
+    <el-option
+      v-for="(option, key) in optionData"
+      :key="key"
+      :label="option[config.dataSource.dimensionField]"
+      :value="option[config.dataSource.metricField]"
+    />
+  </el-select>
+</template>
+
+<script>
+import commonMixins from 'data-room-ui/js/mixins/commonMixins'
+import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+import cloneDeep from 'lodash/cloneDeep'
+window.dataSetFields = []
+export default {
+  name: 'BasicComponentSelect',
+  components: {},
+  mixins: [commonMixins, linkageMixins],
+  props: {
+    // 组件配置
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      value: '',
+      innerConfig: {},
+      optionData: [],
+      filterable: false
+    }
+  },
+  computed: {
+    isPreview () {
+      return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
+    }
+  },
+  watch: {},
+  created () {
+  },
+  mounted () {
+    this.changeStyle(this.config)
+    if (this.isPreview) {
+      this.filterable = true
+    } else {
+      document.querySelector(`.select-${this.config.code}`).style.pointerEvents = 'none'
+    }
+  },
+  beforeDestroy () { },
+  methods: {
+    dataFormatting (config, data) {
+      // 数据返回成功则赋值
+      if (data.success) {
+        data = data.data
+        // 获取到后端返回的数据，有则赋值
+        if (config.dataHandler) {
+          try {
+            // 此处函数处理data
+            eval(config.dataHandler)
+          } catch (e) {
+            console.info(e)
+          }
+        }
+        this.optionData = data
+        // 语音播报
+      } else {
+        // 数据返回失败则赋前端的模拟数据
+        config.option.data = []
+        this.optionData = []
+      }
+      return config
+    },
+    changeStyle (config) {
+      config = { ...this.config, ...config }
+      // 样式改变时更新主题配置
+      config.theme = settingToTheme(cloneDeep(config), this.customTheme)
+      this.changeChartConfig(config)
+      this.innerConfig = config
+      // 选择器元素
+      const selectInputEl = document.querySelector(`.select-${config.code} .el-input__inner`)
+      // 背景颜色
+      selectInputEl.style.backgroundColor = config.customize.backgroundColor
+      // 字体大小
+      selectInputEl.style.fontSize = config.customize.fontSize + 'px'
+      // 字体颜色
+      selectInputEl.style.color = config.customize.fontColor
+      // 边框颜色
+      selectInputEl.style.borderColor = config.customize.borderColor
+      // 下拉图标
+      const selectDropdownIcon = document.querySelector(`.select-${config.code} .el-icon-arrow-up`)
+      selectDropdownIcon.style.fontSize = config.customize.fontSize + 'px'
+      // 选择器下拉框元素
+      const selectDropdownEl = document.querySelector(`.select-${config.code} .el-select-dropdown`)
+      // 箭头背景颜色和下拉框背景颜色一致
+      if (selectDropdownEl) {
+        // 下拉框无边框
+        selectDropdownEl.style.border = 'none'
+        // 背景颜色
+        selectDropdownEl.style.backgroundColor = config.customize.dropDownBackgroundColor
+      }
+    },
+    // 组件联动
+    selectChange (val) {
+      if (val) {
+        this.linkage(this.optionData.find(item => item[this.config.dataSource.metricField] === val))
+      }
+    },
+    visibleChange (val) {
+      if (val) {
+        // 修改下拉框背景颜色，让下拉框背景颜色和箭头背景颜色一致
+        const selectDropdownEl = document.querySelector(`.select-popper-${this.innerConfig.code}`)
+        selectDropdownEl.style.color = this.innerConfig.customize.dropDownBackgroundColor
+        // 空状态
+        const selectDropdownEmptyEl = document.querySelector(`.select-popper-${this.innerConfig.code} .el-select-dropdown__empty`)
+        if (selectDropdownEmptyEl) {
+          selectDropdownEmptyEl.style.backgroundColor = this.innerConfig.customize.dropDownBackgroundColor
+        }
+        // 下拉项hover颜色
+        const selectDropdownWrap = document.querySelector(`.select-popper-${this.innerConfig.code} .el-select-dropdown__wrap`)
+        selectDropdownWrap.style.setProperty('--drop-down-hover-font-color', this.innerConfig.customize.dropDownHoverFontColor)
+        selectDropdownWrap.style.setProperty('--drop-down-hover-background-color', this.innerConfig.customize.dropDownHoverBackgroundColor)
+      }
+      // 不是激活项的还是使用背景颜色
+      const selectDropdownItemEl = document.querySelectorAll(`.select-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
+        }
+      })
+    },
+    // 鼠标进入
+    mouseenter () {
+      if (this.value) {
+        setTimeout(() => {
+          // 清空图标
+          const selectDropdownCloseIcon = document.querySelector(`.select-${this.innerConfig.code} .el-icon-circle-close`)
+          if (selectDropdownCloseIcon) {
+            selectDropdownCloseIcon.style.fontSize = this.innerConfig.customize.fontSize + 'px'
+          }
+        }, 30)
+      }
+    }
+  }
+
+}
+</script>
+
+<style lang="scss">
+.basic-component-select {
+  .el-select-dropdown__wrap {
+    margin-bottom: 0px !important;
+  }
+
+  .el-select-group__wrap:not(:last-of-type)::after {
+    background-color: transparent !important;
+  }
+
+  .popper__arrow {
+    bottom: -6px !important;
+    border-top-color: var(--color) !important;
+    border-bottom-color: var(--color) !important;
+
+    &::after {
+      bottom: 0px !important;
+      border-top-color: var(--color) !important;
+      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-select__caret {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    //  选择器输入框样式
+    .el-input__inner {
+      height: 100% !important;
+    }
+  }
+  ::v-deep .el-input__inner::placeholder {
+      color: var(--input-placeholder-color);
+      font-size: var(--input-placeholder-font-size);
+    }
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    color: var(--drop-down-hover-font-color) !important;
+    background-color: var(--drop-down-hover-background-color) !important;
+  }
+
+  .el-tag.el-tag--info {
+    color: var(--bs-el-text) !important;
+  }
+}
+</style>
--- a/frontend/packages/BasicComponents/Select/setting.vue
+++ b/frontend/packages/BasicComponents/Select/setting.vue
@@ -0,0 +1,155 @@
+<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>旋转</SettingTitle>
+          <div class="lc-field-body">
+            <RotateSetting
+              :config="config"
+            />
+          </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="边框颜色">
+              <ColorPicker
+                v-model="config.customize.borderColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 占位符字体颜色 -->
+            <el-form-item label="占位符字体颜色">
+              <ColorPicker
+                v-model="config.customize.placeholderColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+            <!-- 占位符字体大小 -->
+            <el-form-item label="占位符字体大小">
+              <el-input-number
+                v-model="config.customize.placeholderFontSize"
+                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>
+          </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'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import { predefineColors } from 'data-room-ui/js/utils/colorList'
+export default {
+  name: 'Border14Setting',
+  components: {
+    // IconPicker,
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle,
+    BorderSetting
+  },
+  props: {
+    config: {
+      type: Object,
+      required: true
+    },
+    predefineThemeColors: {
+      type: Array,
+      default: () => predefineColors
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+  <style lang="scss" scoped>
+  .lc-field-body {
+    width: 97%;
+    padding: 16px;
+  }
+  </style>
--- a/frontend/packages/BasicComponents/Select/settingConfig.js
+++ b/frontend/packages/BasicComponents/Select/settingConfig.js
@@ -0,0 +1,67 @@
+
+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',
+  // 名称
+  root: {
+    version: '2023091402',
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  // 自定义属性
+  customize: {
+    placeholder: '请选择',
+    // 输入框背景颜色
+    backgroundColor: '#00000000',
+    // 输入框字体大小
+    fontSize: 14,
+    // 输入框字体颜色
+    fontColor: '#ffffff',
+    // 边框颜色
+    borderColor: '#ffffff',
+    // 占位符字体颜色
+    placeholderColor: '#ffffff',
+    // 占位符字体大小
+    placeholderFontSize: 14,
+    // 下拉框背景颜色
+    dropDownBackgroundColor: '#35393F',
+    // 下拉框字体颜色
+    dropDownFontColor: '#ffffff',
+    // 下拉项hover背景颜色
+    dropDownHoverBackgroundColor: '#6A7E9D',
+    // 下拉项hover字体颜色
+    dropDownHoverFontColor: '#ffffff'
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}