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