初始化

2025-11-08 10:38:36 +08:00
commit 3beeec7296
1626 changed files with 198488 additions and 0 deletions
--- a/frontend/packages/BasicComponents/TimePicker/index.vue
+++ b/frontend/packages/BasicComponents/TimePicker/index.vue
@@ -0,0 +1,295 @@
+<template>
+  <el-time-picker
+    v-model="value"
+    :picker-options="config.customize.pickerOptions"
+    placeholder="选择时间"
+    clearable
+    :class="['basic-component-time-picker', `time-picker-${config.code}`]"
+    :popper-class="'basic-component-time-picker time-picker-popper-' + config.code"
+    :format="config.customize.format"
+    :value-format="config.customize.format"
+    :default-value="value"
+    @focus="focusEvent"
+    @change="changeValue"
+    @mouseenter.native="mouseenter"
+  />
+</template>
+
+<script>
+import moment from 'moment'
+import cloneDeep from 'lodash/cloneDeep'
+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'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+import { mapState } from 'vuex'
+window.dataSetFields = []
+export default {
+  name: 'BasicComponentsTimePicker',
+  components: {},
+  mixins: [commonMixins, linkageMixins],
+  props: {
+    // 组件配置
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      value: '',
+      innerConfig: {}
+    }
+  },
+  computed: {
+    ...mapState({
+      chartList: state => state.bigScreen.pageInfo.chartList
+    }),
+    isPreview () {
+      return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
+    }
+  },
+  watch: {
+    'config.customize.formatType': {
+      handler (val) {
+        if (val === 'timestamp') {
+          this.value = new Date().getTime()
+        } else if (val === 'custom') {
+          const newFomat = this.config.customize.format.replace(/y/g, 'Y').replace(/d/g, 'D')
+          this.value = moment(new Date()).format(newFomat)
+        }
+      },
+      immediate: true
+    },
+    'config.customize.format': {
+      handler (val) {
+        if (this.config.customize.formatType === 'timestamp') {
+          this.value = new Date().getTime()
+        } else if (this.config.customize.formatType === 'custom') {
+          const newFomat = val.replace(/y/g, 'Y').replace(/d/g, 'D')
+          this.value = moment(new Date()).format(newFomat)
+        }
+      },
+      immediate: true
+    }
+  },
+  created () { },
+  mounted () {
+    if (!this.isPreview) {
+      document.querySelector(`.time-picker-${this.config.code}`).style.pointerEvents = 'none'
+    }
+    if (this.value === '') {
+      const newFomat = this.config.customize.format.replace(/y/g, 'Y').replace(/d/g, 'D')
+      this.value = moment(new Date()).format(newFomat)
+    }
+    this.changeStyle(this.config)
+  },
+  beforeDestroy () { },
+  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) {
+      config = { ...this.config, ...config }
+      // 样式改变时更新主题配置
+      config.theme = settingToTheme(cloneDeep(config), this.customTheme)
+      this.changeChartConfig(config)
+      this.innerConfig = config
+      // 时间选择器元素
+      const timePicker = document.querySelector(`.time-picker-${config.code} .el-input__inner`)
+      // 时间选择器背景颜色
+      timePicker.style.backgroundColor = config.customize.backgroundColor
+      // 时间选择器字体颜色
+      timePicker.style.color = config.customize.fontColor
+      // 时间选择器字体大小
+      timePicker.style.fontSize = config.customize.fontSize + 'px'
+      // 时间选择器图标
+      const timePickerCloseIcon = document.querySelector(`.time-picker-${config.code} .el-input__icon`)
+      if (timePickerCloseIcon) {
+        timePickerCloseIcon.style.fontSize = config.customize.fontSize + 'px'
+      }
+    },
+    // 组件联动
+    changeValue (val) {
+      this.linkage({ [this.config.code]: val })
+    },
+    focusEvent () {
+      this.$nextTick(() => {
+        const { code } = this.innerConfig
+        const { dropDownBackgroundColor, dropDownFontColor, dropDownHoverFontColor, dropDownHoverBackgroundColor, dropDownSelectedFontColor } = this.innerConfig.customize
+        const timePickerPopper = document.querySelector(`.time-picker-popper-${code}`)
+        if (timePickerPopper) {
+          // 去除边框
+          timePickerPopper.style.border = 'none'
+          // 确保下拉项的箭头颜色与下拉框的背景颜色保持一致
+          timePickerPopper.style.color = dropDownBackgroundColor
+        }
+        // 下拉项背景颜色
+        const pickerDropdownPanleContent = document.querySelector(`.time-picker-popper-${code}`)
+        if (pickerDropdownPanleContent) {
+          // 文字颜色
+          pickerDropdownPanleContent.style.color = dropDownFontColor
+          // 背景颜色
+          pickerDropdownPanleContent.style.backgroundColor = dropDownBackgroundColor
+          // 下拉项添加var变量
+          pickerDropdownPanleContent.style.setProperty('--dropDownFontColor', dropDownFontColor)
+          pickerDropdownPanleContent.style.setProperty('--dropDownHoverFontColor', dropDownHoverFontColor)
+          pickerDropdownPanleContent.style.setProperty('--dropDownBackgroundColor', dropDownBackgroundColor)
+          pickerDropdownPanleContent.style.setProperty('--dropDownSelectedFontColor', dropDownSelectedFontColor)
+          pickerDropdownPanleContent.style.setProperty('--dropDownHoverBackgroundColor', dropDownHoverBackgroundColor)
+          // 选中项字体颜色
+          const selectedEl = pickerDropdownPanleContent.querySelector('.selected')
+          if (selectedEl) {
+            selectedEl.style.color = dropDownSelectedFontColor
+          }
+          // 选择过的，需要将选中颜色重置
+          const pickerItemEl = document.querySelectorAll(`.time-picker-popper-${code} .el-time-spinner__item`)
+          pickerItemEl.forEach((el) => {
+            el.style.color = dropDownFontColor
+          })
+        }
+      })
+    },
+    mouseenter () {
+      if (this.value) {
+        setTimeout(() => {
+          // 清空图标
+          const timePickerCloseIcon = document.querySelector(`.time-picker-${this.innerConfig.code} .el-icon-circle-close`)
+          if (timePickerCloseIcon) {
+            timePickerCloseIcon.style.fontSize = this.innerConfig.customize.fontSize + 'px'
+          }
+        }, 25)
+      }
+    }
+  }
+
+}
+</script>
+
+<style lang="scss">
+.basic-component-time-picker {
+  color: '';
+
+  // 清空图标
+  .el-icon-circle-close {
+    width: 100% !important;
+    height: 100% !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  // 时间选择器
+  .el-icon-time {
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  .el-time-spinner {
+    margin-bottom: 0px !important;
+
+    .el-time-spinner__item {
+      &:hover {
+        color: var(--dropDownHoverFontColor) !important;
+        background-color: var(--dropDownHoverBackgroundColor) !important;
+      }
+    }
+
+    .active {
+      color: var(--dropDownSelectedFontColor) !important;
+
+      &:hover {
+        color: var(--dropDownSelectedFontColor) !important;
+        background-color: transparent !important;
+      }
+    }
+  }
+
+  .el-time-panel__content::before {
+    content: "";
+    top: 50%;
+    position: absolute;
+    margin-top: -15px;
+    height: 32px;
+    z-index: 1;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+    padding-top: 6px;
+    text-align: left;
+    border-top: 1px solid var(--dropDownFontColor);
+    border-bottom: 1px solid var(--dropDownFontColor);
+  }
+
+  .popper__arrow {
+    border-bottom-color: var(--dropDownBackgroundColor) !important;
+
+    &::after {
+      top: 0px !important;
+      border-bottom-color: var(--dropDownBackgroundColor) !important;
+    }
+  }
+
+  .cancel {
+    color: var(--dropDownFontColor) !important;
+  }
+
+  .confirm {
+    color: var(--dropDownSelectedFontColor);
+  }
+
+  .el-time-panel__footer {
+    border-color: 1px solid var(--dropDownFontColor) !important;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.basic-component-time-picker {
+  width: 100% !important;
+  height: 100% !important;
+
+  .el-input--mini ::v-deep .el-input__inner {
+    height: 100% !important;
+    line-height: 100% !important;
+  }
+
+  .el-tag.el-tag--info {
+    color: var(--bs-el-text) !important;
+  }
+
+}
+
+::v-deep .el-input__inner {
+  height: 100% !important;
+  line-height: 100% !important;
+}
+</style>
--- a/frontend/packages/BasicComponents/TimePicker/setting.vue
+++ b/frontend/packages/BasicComponents/TimePicker/setting.vue
@@ -0,0 +1,246 @@
+<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>
+          </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.dropDownSelectedFontColor"
+                :predefine="predefineThemeColors"
+              />
+            </el-form-item>
+          </div>
+          <SettingTitle>时间格式</SettingTitle>
+          <div class="lc-field-body">
+            <!-- <el-form-item label="时间显示格式化">
+              <div class="description">
+                <el-input
+                  v-model="config.customize.format"
+                  placeholder="例如：HH:mm:ss"
+                  clearable
+                />
+                <el-tooltip placement="top">
+                  <span
+                    class="el-icon-question"
+                    style="color:#9e9e9e"
+                  />
+                  <div slot="content">
+                    小时：H，表示小时（24小时制），不补0，例如：3<br>
+                    小时：HH，表示小时（24小时制），补0，例如：03<br>
+                    小时：h，表示小时（12小时制），须和 A 或 a 使用，不补0，例如：3<br>
+                    小时：hh，表示小时（12小时制），须和 A 或 a 使用，补0，例如：03<br>
+                    分钟：m，表示分钟，不补0，例如：4<br>
+                    分钟：mm，表示分钟，补0，例如：04<br>
+                    秒：s，表示秒钟，不补0，例如：5<br>
+                    秒：ss，表示秒钟，补0，例如：05<br>
+                    JS时间戳：timestamp，仅 value-format 可用，组件绑定值为number类型，例如：1483326245000<br>
+                    不需要格式化字符：[MM]，使用方括号标识不需要格式化的字符，例如：MM<br>
+                    具体的时间格式化字符和使用方式，可以参考Element-UI官网的日期选择器的时间格式化部分。
+                  </div>
+                </el-tooltip>
+              </div>
+            </el-form-item> -->
+            <el-form-item label="时间类型">
+              <div class="description">
+                <el-select
+                  v-model="config.customize.formatType"
+                  class="bs-el-select"
+                  popper-class="bs-el-select"
+                  @change="changeFormatType"
+                >
+                  <el-option
+                    v-for="(type) in formatTypeOptions"
+                    :key="type.value"
+                    :label="type.label"
+                    :value="type.value"
+                  />
+                </el-select>
+                <el-tooltip placement="top">
+                  <span
+                    class="el-icon-question"
+                    style="color:#9e9e9e"
+                  />
+                  <div slot="content">
+                    时间戳：从1970年1月1日开始计算的秒数，数据类型为数值型，例如：1483326245000。<br>
+                    自定义：通过输入特定的格式字符串来指定时间的数据格式，例如：HH:mm:ss对应数据为 09:30:00。<br>
+                  </div>
+                </el-tooltip>
+              </div>
+            </el-form-item>
+            <el-form-item
+              v-if="config.customize.formatType === 'custom'"
+              label="时间格式"
+            >
+              <div class="description">
+                <el-input
+                  v-model="config.customize.format"
+                  placeholder="例如：HH:mm:ss"
+                  clearable
+                />
+                <el-tooltip placement="top">
+                  <span
+                    class="el-icon-question"
+                    style="color:#9e9e9e"
+                  />
+                  <div slot="content">
+                    小时：H，表示小时（24小时制），不补0，例如：3<br>
+                    小时：HH，表示小时（24小时制），补0，例如：03<br>
+                    小时：h，表示小时（12小时制），须和 A 或 a 使用，不补0，例如：3<br>
+                    小时：hh，表示小时（12小时制），须和 A 或 a 使用，补0，例如：03<br>
+                    分钟：m，表示分钟，不补0，例如：4<br>
+                    分钟：mm，表示分钟，补0，例如：04<br>
+                    秒：s，表示秒钟，不补0，例如：5<br>
+                    秒：ss，表示秒钟，补0，例如：05<br>
+                    JS时间戳：timestamp，仅 value-format 可用，组件绑定值为number类型，例如：1483326245000<br>
+                    不需要格式化字符：[MM]，使用方括号标识不需要格式化的字符，例如：MM<br>
+                    具体的时间格式化字符和使用方式，可以参考Element-UI官网的日期选择器的时间格式化部分。
+                  </div>
+                </el-tooltip>
+              </div>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import SettingTitle from 'data-room-ui/SettingTitle/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: 'TimePickerSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    SettingTitle,
+    RotateSetting
+  },
+  props: {
+    config: {
+      type: Object,
+      required: true
+    },
+     predefineThemeColors: {
+      type: Array,
+      default: () => predefineColors
+    }
+  },
+  watch: {},
+  data () {
+    return {
+      // 时间格式化类型选项
+      formatTypeOptions: [
+        { label: '时间戳', value: 'timestamp' },
+        { label: '自定义格式', value: 'custom' }
+      ]
+    }
+  },
+  mounted () { },
+  methods: {
+    changeFormatType (val) {
+      if (val === 'timestamp') {
+        this.config.customize.format = 'timestamp'
+      } else if (val === 'custom') {
+        this.config.customize.format = 'HH:mm:ss'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.lc-field-body {
+  width: 97%;
+  padding: 16px;
+}
+
+.description {
+  display: flex;
+  align-items: center;
+
+  .el-tooltip {
+    margin-left: 5px;
+  }
+}
+</style>
--- a/frontend/packages/BasicComponents/TimePicker/settingConfig.js
+++ b/frontend/packages/BasicComponents/TimePicker/settingConfig.js
@@ -0,0 +1,62 @@
+
+import { commonConfig, displayOption } from 'data-room-ui/js/config'
+
+export const settingConfig = {
+  // text内容
+  text: '时间选择器',
+  // 设置面板属性的显隐
+  displayOption: {
+    ...displayOption,
+    dataAllocation: { enable: true },
+    dataSourceType: { enable: false },
+    params: { enable: false }
+  }
+}
+
+const customConfig = {
+  type: 'timePicker',
+  // 名称
+  title: '时间选择器',
+  root: {
+    version: '2023071001',
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  // 自定义属性
+  customize: {
+    value: '',
+    // 选择框背景颜色
+    backgroundColor: '#00000000',
+    // 选择框文字颜色
+    fontColor: '#FFFFFF',
+    // 选择框字体大小
+    fontSize: 14,
+    // 下拉框背景颜色
+    dropDownBackgroundColor: '#35393F',
+    // 下拉框字体颜色
+    dropDownFontColor: '#FFFFFF',
+    // 下拉项hover背景颜色
+    dropDownHoverBackgroundColor: '#6A7E9D',
+    // 下拉项hover字体颜色
+    dropDownHoverFontColor: '#FFFFFF',
+    // 下拉项激活文字颜色
+    dropDownSelectedFontColor: '#409EFF',
+    // 时间格式化类型:时间戳（timestamp），自定义（custom）
+    formatType: 'custom',
+    // 时间格式化
+    format: 'HH:mm:ss',
+    // 绑定值的格式
+    valueFormat: 'HH:mm:ss'
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}