上传项目

Xxxu

2020-07-07 4f953ffc89fc95f83b152e914c5e65938b440f17

 src/views/modules/led/led-controller/subtext-upload.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,321 @@
<template>
  <div class="subtext-upload">
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="80px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="文本类型" prop="textType">
            <el-radio-group v-model="dataForm.textType">
              <el-radio :label="0">单行文本</el-radio>
              <el-radio :label="1">多行文本</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-col :span="24">
            <div style="padding: 10px">
              æ’­æ”¾å†…容
            </div>
          </el-col>
          <el-col :span="24">
            <div class="content-in">
              <el-form-item label="" lable-width="0px" prop="content" v-if="dataForm.textType == 0">
                <el-input v-if="dataForm.textType == 0" v-model="dataForm.content" placeholder="播放字幕内容"></el-input>
              </el-form-item>
              <el-form-item label="" lable-width="0px" prop="content" v-if="dataForm.textType == 1">
                <el-input type="textarea" :rows="4" v-model="dataForm.content" placeholder="播放字幕内容"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-col>
        <el-col :span="16">
          <el-col :span="12">
            <el-form-item label="字体大小" prop="fontSize">
              <el-input v-model="dataForm.fontSize" placeholder="1为默认大小" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="播放次数" prop="num">
              <el-input v-model="dataForm.num" placeholder="-1永久滚动" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="移动间隔" prop="interval">
              <el-input v-model="dataForm.interval" placeholder="单位:毫秒" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="移动距离" prop="step">
              <el-input v-model="dataForm.step" placeholder="单位:像素" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="前进方向" prop="direction" v-if="dataForm.textType == 0">
              <el-select v-model="dataForm.direction" placeholder="请选择" @change="directionChange">
                <el-option
                  v-for="item in directionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="前进方向" prop="direction" v-if="dataForm.textType == 1">
              <el-select v-model="dataForm.direction" placeholder="请选择" @change="directionChange">
                <el-option
                  v-for="item in directionMultVerticalList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示位置" prop="align" v-if="dataForm.textType == 0">
              <el-select v-model="dataForm.align" placeholder="请选择">
                <el-option
                  v-for="item in alignList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="显示位置" prop="align" v-if="dataForm.textType == 1">
              <el-select v-model="dataForm.align" placeholder="请选择">
                <el-option
                  v-for="item in alignVerticalList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="背景颜色" prop="color">
              <el-color-picker v-model="dataForm.color"></el-color-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文字颜色" prop="fontColor">
              <el-color-picker v-model="dataForm.fontColor"></el-color-picker>
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <button class="btn" @click="dataFormSubmit()"></button>
    </div>
    <div style="clear:both"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        id: '',
        color: '',
        content: '',
        fontSize: '',
        fontColor: '',
        num: '',
        interval: '',
        step: '',
        direction: '',
        align: '',
        textType: ''
      },
      directionList: [{
        value: 'left',
        label: '向左移动'
      }, {
        value: 'right',
        label: '向右移动'
      }, {
        value: 'up',
        label: '向上移动'
      }, {
        value: 'down',
        label: '向下移动'
      }],
      directionVerticalList: [{
        value: 'up',
        label: '向上移动'
      }, {
        value: 'down',
        label: '向下移动'
      }],
      directionMultVerticalList: [{
        value: 'up',
        label: '向上移动'
      }, {
        value: 'down',
        label: '向下移动'
      }, {
        value: 'static',
        label: '静止'
      }],
      alignList: [],
      alignHorizonList: [{
        value: 'top',
        label: '上'
      }, {
        value: 'center',
        label: '中'
      }, {
        value: 'bottom',
        label: '下'
      }],
      alignVerticalList: [{
        value: 'left',
        label: 'å·¦'
      }, {
        value: 'center',
        label: '中'
      }, {
        value: 'right',
        label: '右'
      }],
      dataRule: {
        content: [
          { required: true, message: '播放内容不能为空', trigger: 'blur' }
        ],
        fontSize: [
          { required: true, message: '字体大小不能为空', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '播放次数不能为空', trigger: 'blur' }
        ],
        interval: [
          { required: true, message: '进步间隔不能为空', trigger: 'blur' }
        ],
        step: [
          { required: true, message: '进步距离不能为空', trigger: 'blur' }
        ],
        direction: [
          { required: true, message: '前进方向不能为空', trigger: 'blur' }
        ],
        align: [
          { required: true, message: '显示位置不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.init(this.$store.state.led.lightemitId)
  },
  methods: {
    init (id) {
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.dataForm.id = id || 0
        this.dataForm.color = '#000000'
        this.dataForm.content = ''
        this.dataForm.fontSize = 1
        this.dataForm.fontColor = '#fff'
        this.dataForm.num = -1
        this.dataForm.interval = 50
        this.dataForm.step = 1
        this.dataForm.direction = 'left'
        this.dataForm.align = 'center'
        this.dataForm.textType = 0
        this.visible = true
        this.alignList = this.alignHorizonList
      })
    },
    dataFormSubmit () {
      this.$refs['dataForm'].validate((vaild) => {
        if (vaild) {
          this.$http({
            url: this.$http.adornUrl(`/pole/polelightemit/subTitleSet`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataForm.id,
              'color': this.dataForm.color,
              'content': this.dataForm.content,
              'fontSize': this.dataForm.fontSize,
              'fontColor': this.dataForm.fontColor,
              'num': this.dataForm.num,
              'interval': this.dataForm.interval,
              'step': this.dataForm.step,
              'direction': this.dataForm.direction,
              'align': this.dataForm.align,
              'textType': this.dataForm.textType
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // æ–¹å‘改变触发函数
    directionChange (val) {
      if (val === 'left' || val === 'right') {
        this.alignList = this.alignHorizonList
      } else if (val === 'up' || val === 'down') {
        this.alignList = this.alignVerticalList
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.subtext-upload {
  padding: 0 10px;
  max-height: 100%;
  /deep/ .el-form-item {
    .el-form-item__label {
      color: white;
    };
    .el-radio__label {
      color: white;
    };
  }
  /deep/ .content-in {
    .el-form-item__content {
      margin-left: 0px !important;
    }
  };
  .btn {
    border-style: none;
    width: 100px;
    height: 35px;
    background: url(~@/assets/img/btn-config.png);
    background-repeat:no-repeat;
    border-style: none;
    background-size: 100%;
    color: #fff;
    font-size: 1.1em;
    font-weight: 550;
  };
  /deep/ .el-input__inner {
    background-color: transparent;
    color: #fff
  }
  /deep/ .el-textarea__inner {
    background-color: transparent;
    color: #fff
  }
}
</style>