<template>
|
<div class="led-controller">
|
<div class="title-text">播放内容设置</div>
|
<el-row>
|
<el-col :span="6">
|
<div>
|
<div><button class="btn img-btn" :class="{'click': isactive == 0}" @click="click(0)">图片上传</button></div>
|
<div><button class="btn vid-btn" :class="{'click': isactive == 1}" @click="click(1)">视频上传</button></div>
|
<div><button class="btn sub-btn" :class="{'click': isactive == 2}" @click="click(2)">字幕上传</button></div>
|
<div><button class="btn sub-btn" :class="{'click': isactive == 3}" @click="click(3)">天气上传</button></div>
|
</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="led-controller-controller">
|
<image-upload v-if="isactive == 0"></image-upload>
|
<video-upload v-if="isactive == 1"></video-upload>
|
<subtext-upload v-if="isactive == 2"></subtext-upload>
|
<weather-upload v-if="isactive == 3"></weather-upload>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import ImageUpload from './led-controller/image-upload'
|
import VideoUpload from './led-controller/video-upload'
|
import SubtextUpload from './led-controller/subtext-upload'
|
import WeatherUpload from './led-controller/weather-upload'
|
export default {
|
data () {
|
return {
|
isactive: 0
|
}
|
},
|
computed: {
|
lightemitStateId () {
|
return this.$store.state.led.lightemitId
|
}
|
},
|
watch: {
|
lightemitStateId (curVal, oldVal) {
|
}
|
},
|
components: {
|
ImageUpload,
|
VideoUpload,
|
SubtextUpload,
|
WeatherUpload
|
},
|
methods: {
|
click (val) {
|
this.isactive = val
|
},
|
// 推送天气数据
|
pushLED () {
|
var ids = [this.lightemitStateId]
|
this.$http({
|
url: this.$http.adornUrl(`/pole/polelightemit/pushLED`),
|
method: 'post',
|
data: this.$http.adornData({
|
lightemitIds: ids
|
})
|
}).then(({data}) => {
|
if (data && data.code === 0) {
|
this.$message({
|
message: '操作成功',
|
type: 'success',
|
duration: 1500,
|
onClose: () => {
|
this.visible = false
|
this.$emit('refreshDataList')
|
}
|
})
|
} else {
|
this.$message.error(data.msg)
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.led-controller {
|
margin-top: 10px;
|
// background-image: url(~@/assets/img/led/controller.png);
|
// background-size: 100% 100%;
|
height: 451px;
|
button:focus {
|
outline:none;
|
};
|
.btn {
|
border-style: none;
|
width: 156px;
|
height: 56px;
|
margin: 15px;
|
background: url(~@/assets/img/led/btn.png);
|
background-repeat:no-repeat;
|
background-size: 100%;
|
color: #fff;
|
font-size: 1.4em;
|
font-weight: 550;
|
};
|
&-controller {
|
border: 1px #d9d9d9 solid;
|
display:block;
|
margin: 20px;
|
height: 345px;
|
}
|
/deep/ .el-upload-dragger {
|
background-color: transparent;
|
border: 1px dashed #d9d9d9;
|
}
|
}
|
.click {
|
background: url(~@/assets/img/led/btn-click.png) !important;
|
background-repeat:no-repeat !important;
|
}
|
</style>
|
