<template>
|
<div class="led-image" :style="{ 'height': documentClientHeight-300 + 'px' }">
|
<div class="title-text">实时画面</div>
|
<div>
|
<div class="led-image-image" :style="{width: documentClientHeight*0.25+20 + 'px', height: documentClientHeight*0.5+20 + 'px'}">
|
<img
|
style="object-fit: cover"
|
:style="{width: documentClientHeight*0.25 + 'px', height: documentClientHeight*0.5 + 'px'}"
|
:src="showSrc"
|
:onerror="errorSrc" />
|
</div>
|
<div class="led-image-volume">
|
<el-slider
|
v-model="volume"
|
:show-tooltip="false"
|
:step="1"
|
:min="0"
|
:max="15"
|
show-stops
|
@change="setVolume">
|
</el-slider>
|
</div>
|
<div style="width: 100%">
|
<div class="led-image-volume-text">
|
音量调整
|
<!-- <span>{{volume}}</span> -->
|
<el-input v-model="volume" maxlength="2" minlength="1" max="15" min="0" @keyup.enter.native="setVolume()"></el-input>
|
</div>
|
</div>
|
<div class="led-image-button">
|
<button id="onled" :class="{'click': status}" @click="setScreenOpen(true)" :disabled="status">ON</button>
|
<button id="offled" :class="{'click': !status}" @click="setScreenOpen(false)" :disabled="!status">OFF</button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
showSrc: '',
|
volume: 0,
|
status: false,
|
errorSrc: 'this.src="' + require('@/assets/img/led/error.png') + '"'
|
}
|
},
|
computed: {
|
lightemitStateId () {
|
return this.$store.state.led.lightemitId
|
},
|
documentClientHeight: {
|
get () { return this.$store.state.common.documentClientHeight }
|
}
|
},
|
watch: {
|
lightemitStateId (curVal, oldVal) {
|
this.getPicture(curVal)
|
this.getStatus(curVal)
|
this.getVolume(curVal)
|
}
|
},
|
// mounted () {
|
// this.errorSrc = './assets/img/led/error.png'
|
// console.log(this.errorSrc)
|
// },
|
methods: {
|
// 获取正在显示内容
|
getPicture (id) {
|
this.visible = true
|
this.$http({
|
url: this.$http.adornUrl(`/pole/polelightemit/getPicture`),
|
method: 'post',
|
data: this.$http.adornData(id, false)
|
}).then(({data}) => {
|
if (data && data.code === 0) {
|
this.showSrc = 'data:image/png;base64,' + data.msg
|
} else {
|
this.$message.error(data.msg)
|
}
|
})
|
},
|
getStatus (lightemitId) {
|
var ids = [lightemitId]
|
this.$http({
|
url: this.$http.adornUrl(`/pole/polelightemit/ledStatus/`),
|
method: 'post',
|
data: this.$http.adornData(ids, false)
|
}).then(({data}) => {
|
if (data && data.code === 0) {
|
this.status = data.result === 'true'
|
}
|
})
|
},
|
// 获取音量
|
getVolume (Id) {
|
this.$http({
|
url: this.$http.adornUrl(`/pole/polelightemit/getVolume`),
|
method: 'post',
|
data: this.$http.adornData(Id, false)
|
}).then(({data}) => {
|
if (data && data.code === 0) {
|
var str = data.msg
|
var n = Number(str)
|
if (!isNaN(n)) {
|
this.volume = n
|
} else {
|
this.volume = 0
|
}
|
} else {
|
this.$message.error(data.msg)
|
}
|
})
|
},
|
// 设置音量
|
setVolume () {
|
var n = Number(this.volume)
|
if (isNaN(n)) {
|
this.$message.error('音量请输入数字')
|
return
|
}
|
if (this.volume === undefined || this.volume === null || this.volume < 0 || this.volume > 15) {
|
this.$message.error('音量请选择0~15之间')
|
return
|
}
|
this.$http({
|
url: this.$http.adornUrl(`/pole/polelightemit/setVolume`),
|
method: 'post',
|
data: this.$http.adornData({
|
ids: [this.$store.state.led.lightemitId],
|
volume: this.volume
|
})
|
}).then(({data}) => {
|
if (data && data.code === 0) {
|
this.$message({
|
message: '操作成功',
|
type: 'success',
|
duration: 1500
|
})
|
} else {
|
this.$message.error(data.msg)
|
}
|
})
|
},
|
// 屏幕开关
|
setScreenOpen (control) {
|
var ids = [this.$store.state.led.lightemitId]
|
this.$http({
|
url: this.$http.adornUrl(`/pole/polelightemit/setScreenOpen`),
|
method: 'post',
|
data: this.$http.adornData({
|
ids: ids,
|
bool: control
|
})
|
}).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-image {
|
// height: 861px;
|
// background-image: url(~@/assets/img/led/image.png);
|
// background-size: 100% 100%;
|
&-image {
|
margin:20px auto;
|
// background-image: url(~@/assets/img/led/image-background.png);
|
// background-size: 100% 100%;
|
// width: 330px;
|
// height: 620px;
|
padding-left: 20px;
|
padding-top: 20px;
|
};
|
&-volume {
|
background-color: #095088;
|
border-radius: 20px;
|
padding-left: 10px;
|
padding-right: 10px;
|
margin: 10px;
|
};
|
&-volume-text {
|
margin: 0 auto;
|
text-align: center;
|
padding: 10px;
|
font-size: 1.2em;
|
font-weight: 550;
|
display: block;
|
/deep/ .el-input{
|
width: 60px;
|
/deep/ .el-input__inner {
|
height: 24px;
|
line-height: 24px;
|
background-color: transparent;
|
border-color: #094f8a;
|
color: #fff;
|
text-align: center;
|
}
|
}
|
span {
|
width: 20px;
|
margin: 10px;
|
padding: 0px 20px;
|
border: 2px solid #094f8a
|
}
|
}
|
&-button {
|
text-align: center;
|
button {
|
margin: 10px;
|
width: 113px;
|
height: 40px;
|
background: url(~@/assets/img/led/btn.png);
|
background-repeat:no-repeat;
|
border-style: none;
|
background-size: 100%;
|
color: #fff;
|
font-size: 1.2em;
|
font-weight: 600;
|
};
|
button:focus {
|
outline:none;
|
};
|
}
|
/deep/ .el-slider__bar {
|
height: 3px;
|
}
|
/deep/ .el-slider__runway {
|
margin: 5px 0
|
};
|
/deep/ .el-slider__button {
|
height: 30px;
|
border-radius: 10px;
|
background-color: #266ea9;
|
border-color: #1c5289;
|
};
|
/deep/ .el-slider__runway {
|
background-color: #15263c;
|
height: 3px
|
};
|
/deep/ .el-slider__stop {
|
background-color: #15263c;
|
width: 3px;
|
height: 3px;
|
};
|
}
|
.click {
|
background: url(~@/assets/img/led/btn-click.png) !important;
|
background-repeat:no-repeat !important;
|
background-size: 100% 100% !important;
|
}
|
</style>
|
