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

<!--
 * @description: 标题属性设置面板
 * @Date: 2022-08-17 16:53:28
 * @Author: shiyi
-->
<template>
  <div>
    <el-form
      ref="form"
      label-width="100px"
      label-position="left"
      :model="config"
      :rules="rules"
      class="bs-el-form"
    >
      <SettingTitle>标题</SettingTitle>
      <div class="bs-setting-wrap">
        <el-form-item
          label="标题"
          label-width="100px"
          prop="title"
        >
          <el-input
            v-model="config.customize.title"
            placeholder="请输入标题"
            clearable
          />
        </el-form-item>
      </div>
      <SettingTitle>位置</SettingTitle>
      <div class="lc-field-body">
        <PosWhSetting :config="config" />
      </div>
      <SettingTitle>基础</SettingTitle>
      <div class="lc-field-body">
        <el-form-item
          label="字体大小"
          label-width="100px"
        >
          <el-input
            v-model="config.customize.fontSize"
            placeholder="请输入标题字体大小"
            clearable
          >
            <template slot="append">
              px
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="字体权重"
          label-width="100px"
        >
          <el-input-number
            v-model="config.customize.fontWeight"
            class="bs-el-input-number"
            placeholder="请输入标题字体权重"
          />
        </el-form-item>
        <!-- 走马灯走向 -->
        <el-form-item
          label="滚动方向"
          label-width="100px"
        >
          <el-select
            v-model="config.customize.direction"
            class="bs-el-select"
            popper-class="bs-el-select"
          >
            <el-option
              v-for="direction in directionList"
              :key="direction.value"
              :label="direction.label"
              :value="direction.value"
            />
          </el-select>
        </el-form-item>
        <!-- 滚动速度 -->
        <el-form-item
          label="滚动间隔"
          label-width="100px"
        >
          <el-input-number
            v-model="config.customize.dur"
            class="bs-el-input-number"
            placeholder="请输入滚动间隔"
            :min="1"
            :step="1"
          >
            <template slot="append">
              s
            </template>
          </el-input-number>
        </el-form-item>
        <!-- 图标选择 -->
        <el-form-item
          label="图标选择"
          label-width="100px"
        >
          <IconPicker v-model="config.customize.icon.name" />
        </el-form-item>
        <!-- 图标位置 -->
        <el-form-item
          v-if="config.customize.icon.name"
          label="图标位置"
          label-width="100px"
        >
          <el-select
            v-model="config.customize.icon.position"
            class="bs-el-select"
            popper-class="bs-el-select"
          >
            <el-option
              v-for="iconPosition in iconPositionOptions"
              :key="iconPosition.value"
              :label="iconPosition.label"
              :value="iconPosition.value"
            />
          </el-select>
        </el-form-item>
        <!-- 图标颜色 -->
        <el-form-item
          v-if="config.customize.icon.name"
          label="图标颜色"
          label-width="100px"
        >
          <ColorPicker
            v-model="config.customize.icon.color"
            placeholder="请选择图标颜色"
            :predefine-colors="predefineThemeColors"
          />
        </el-form-item>
        <el-form-item label="文字颜色类型">
          <el-select
            v-model="config.customize.textColorType"
            popper-class="bs-el-select"
            class="bs-el-select"
          >
            <el-option
              label="纯色"
              value="pure"
            />
            <el-option
              label="渐变色"
              value="gradient"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="config.customize.textColorType === 'pure'"
          label="文字颜色"
        >
          <ColorPicker
            v-model="config.customize.textColor"
            placeholder="请选择文字颜色"
            :predefine-colors="predefineThemeColors"
          />
        </el-form-item>
        <el-form-item
          v-if="config.customize.textColorType === 'gradient'"
          label="文字渐变色方向"
        >
          <el-select
            v-model="config.customize.textGradientDirection"
            popper-class="bs-el-select"
            class="bs-el-select"
          >
            <el-option
              v-for="direction in gradientDirection"
              :key="direction.value"
              :label="direction.label"
              :value="direction.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="config.customize.textColorType === 'gradient'"
          label="文字渐变开始色"
        >
          <ColorPicker
            v-model="config.customize.textGradientColor0"
            placeholder="请选择渐变色开始色值"
            :predefine-colors="predefineThemeColors"
          />
        </el-form-item>
        <el-form-item
          v-if="config.customize.textColorType === 'gradient'"
          label="文字渐变结束色"
        >
          <ColorPicker
            v-model="config.customize.textGradientColor1"
            placeholder="请选择渐变色结束色值"
            :predefine-colors="predefineThemeColors"
          />
        </el-form-item>
        <el-form-item label="背景色类型">
          <el-select
            v-model="config.customize.backgroundColorType"
            popper-class="bs-el-select"
            class="bs-el-select"
          >
            <el-option
              label="透明"
              value="transparent"
            />
            <el-option
              label="纯色"
              value="pure"
            />
            <el-option
              label="渐变色"
              value="gradient"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="config.customize.backgroundColorType === 'pure'"
          label="背景色"
        >
          <ColorPicker
            v-model="config.customize.backgroundColor"
            placeholder="请选择背景色"
            :predefine-colors="predefineThemeColors"
          />
        </el-form-item>
        <el-form-item
          v-if="config.customize.backgroundColorType === 'gradient'"
          label="背景渐变色方向"
        >
          <el-select
            v-model="config.customize.bgGradientDirection"
            popper-class="bs-el-select"
            class="bs-el-select"
          >
            <el-option
              v-for="direction in gradientDirection"
              :key="direction.value"
              :label="direction.label"
              :value="direction.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="config.customize.backgroundColorType === 'gradient'"
          label="背景渐变开始色"
        >
          <ColorPicker
            v-model="config.customize.bgGradientColor0"
            placeholder="请选择渐变色开始色值"
            :predefine-colors="predefineThemeColors"
          />
        </el-form-item>
        <el-form-item
          v-if="config.customize.backgroundColorType === 'gradient'"
          label="背景渐变结束色"
        >
          <ColorPicker
            v-model="config.customize.bgGradientColor1"
            placeholder="请选择渐变色结束色值"
            :predefine-colors="predefineThemeColors"
          />
        </el-form-item>
      </div>
      <SettingTitle>其他</SettingTitle>
      <div class="lc-field-body">
        <!-- 是否开启语音播报 -->
        <el-form-item
          label="语音播报"
          label-width="100px"
        >
          <el-switch
            v-model="config.customize.voiceBroadcast"
            :active-value="true"
            :inactive-value="false"
            class="bs-el-switch"
          />
        </el-form-item>
      </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 IconPicker from 'data-room-ui/IconPicker/index.vue'
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
export default {
  name: 'TextSetting',
  components: {
    PosWhSetting,
    ColorPicker,
    SettingTitle,
    IconPicker
  },
  data () {
    return {
      predefineThemeColors: [
        '#007aff',
        '#1aa97b',
        '#ff4d53',
        '#1890FF',
        '#DF0E1B',
        '#0086CC',
        '#2B74CF',
        '#00BC9D',
        '#ED7D32'
      ],
      directionList: [
        {
          value: 'right',
          label: '从右到左'
        },
        {
          value: 'left',
          label: '从左到右'
        },
        {
          value: 'top',
          label: '从上到下'
        },
        {
          value: 'bottom',
          label: '从下到上'
        }
      ],
      gradientDirection: [
        {
          label: '从左到右',
          value: 'to right'
        },
        {
          label: '从上到下',
          value: 'to bottom'
        },

        {
          label: '从左上到右下',
          value: 'to bottom right'
        },
        {
          label: '从左下到右上',
          value: 'to top right'
        }
      ],
      iconPositionOptions: [
        {
          label: '左侧',
          value: 'left'
        },
        {
          label: '右侧',
          value: 'right'
        }
      ],
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    config: {
      get () {
        return this.$store.state.bigScreen.activeItemConfig
      },
      set (val) {
        this.$store.state.bigScreen.activeItemConfig = val
      }
    }
  },
  watch: {
  },
  mounted () { },
  methods: {
    changeStyle () { }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/style/settingWrap.scss';
@import '../../assets/style/bsTheme.scss';

.bs-setting-wrap {
  padding:12px 16px;
}

.lc-field-body {
  padding: 12px 16px;
}
</style>