<template>
|
<div class="streetlight-light-img" :style="{ 'height': documentClientHeight + 'px' }">
|
<div class="title-text">智能路灯信息</div>
|
<div class="streetlight-light-light">
|
<div class="streetlight-light-light-img" style="position: absolute:transform：translateX(20px)">
|
<img :src="lightImg" v-if="light != 0">
|
</div>
|
<div style="position: relative;left: 58%;">
|
<div class="streetlight-light-img-knob-new">
|
<div class="light-text">{{light}}0%</div>
|
<div class="streetlight-light-img-knob-new-ring" ref="knobBtn"></div>
|
<!-- 亮度50% -->
|
<div class="streetlight-light-img-knob-new-button button-0" @click="clicklLight(5)"></div>
|
<!-- 亮度80% -->
|
<div class="streetlight-light-img-knob-new-button button-1" @click="clicklLight(8)"></div>
|
<!-- 亮度20% -->
|
<div class="streetlight-light-img-knob-new-button button-2" @click="clicklLight(2)"></div>
|
<!-- 亮度100% -->
|
<div class="streetlight-light-img-knob-new-button button-3" @click="clicklLight(10)"></div>
|
<!-- 关 -->
|
<div class="streetlight-light-img-knob-new-button button-4" @click="clicklLight(0)"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
lightImg: null,
|
knobBotton: '',
|
light: 0
|
}
|
},
|
computed: {
|
streetlightStateId () {
|
return this.$store.state.streetlight.streetlightId
|
},
|
documentClientHeight: {
|
get () { return this.$store.state.common.documentClientHeight - 225 }
|
}
|
},
|
watch: {
|
streetlightStateId (curVal, oldVal) {
|
this.getStreetlightLight(curVal)
|
}
|
},
|
mounted () {
|
this.knobBotton = this.$refs.knobBtn
|
},
|
methods: {
|
// 获取路灯亮度
|
getStreetlightLight (streetlightId) {
|
this.$http({
|
url: this.$http.adornUrl(`/pole/polestreetlight/info/${streetlightId}`),
|
method: 'get',
|
params: this.$http.adornParams()
|
}).then(({data}) => {
|
if (data && data.code === 0) {
|
this.light = data.polestreetlight.light
|
this.flashLightImg(this.light)
|
}
|
})
|
},
|
// 选中按钮
|
clicklLight (opt) {
|
this.light = opt
|
this.flashLightImg(opt)
|
this.lightBatch(opt)
|
},
|
// 控灯
|
lightBatch (option) {
|
if (option === undefined || option === null) {
|
return
|
}
|
this.$http({
|
url: this.$http.adornUrl(`/pole/polestreetlight/lightbatch`),
|
method: 'post',
|
data: this.$http.adornData({
|
'adIds': [this.streetlightStateId],
|
'operate': option
|
})
|
}).then(({data}) => {
|
if (data && data.code === 0) {
|
this.$message({
|
message: '操作成功',
|
type: 'success',
|
duration: 1500
|
})
|
} else {
|
this.$message.error(data.msg)
|
}
|
})
|
},
|
// 根据操作修改按钮角度与路灯图片
|
flashLightImg (light) {
|
var angle = 0
|
if (light === undefined || light === null || light === 0) {
|
this.light = 0
|
angle = 4
|
this.lightImg = null
|
} else if (light > 0 && light <= 2) {
|
angle = 0
|
this.lightImg = require('@/assets/img/streetlight/lig20.png')
|
} else if (light > 2 && light <= 5) {
|
angle = 1
|
this.lightImg = require('@/assets/img/streetlight/lig50.png')
|
} else if (light > 5 && light <= 8) {
|
angle = 2
|
this.lightImg = require('@/assets/img/streetlight/lig80.png')
|
} else if (light > 8 && light <= 10) {
|
angle = 3
|
this.lightImg = require('@/assets/img/streetlight/lig100.png')
|
}
|
this.knobBotton.style.transform = `rotate(${angle * 72}deg)`
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.streetlight-light-light-img {
|
position: absolute;
|
margin: auto 0;
|
transform: translateX(5%);
|
}
|
.streetlight-light-img {
|
background-image: url(~@/assets/img/streetlight/light-new.png);
|
// height:868px;
|
// height:861px;
|
background-size: 100% 100%;
|
&-knob-new {
|
position: absolute;
|
background: url(~@/assets/img/streetlight/knob-background.png) no-repeat;
|
height: 190px;
|
width: 190px;
|
&-ring {
|
float: left;
|
background: url(~@/assets/img/streetlight/knob-ring.png) no-repeat;
|
height: 190px;
|
width: 190px;
|
transform-origin:96.5px 96.5px;
|
}
|
.light-text{
|
font-family: 'my-font';
|
position: absolute;
|
font-size: 2em;
|
width: 100%;
|
text-align: center;
|
margin: 0 auto;
|
line-height: 190px;
|
}
|
&-button {
|
position: absolute;
|
width: 40px;
|
height: 30px;
|
}
|
.button-0{
|
top: 27px;
|
left: 24px;
|
}
|
.button-1{
|
top: 20px;
|
left: 130px;
|
}
|
.button-2{
|
top: 107px;
|
left: 0px;
|
}
|
.button-3{
|
top: 107px;
|
left: 150px;
|
}
|
.button-4{
|
top: 157px;
|
left: 75px;
|
}
|
}
|
}
|
|
img{
|
-webkit-user-drag: none;
|
width: 110%;
|
transform: translateX(20%);
|
}
|
</style>
|
