<template>
|
<div class="streetlight-view">
|
<el-row :gutter="13">
|
<el-col :span="4">
|
<streetlight-list></streetlight-list>
|
</el-col>
|
<el-col :span="8">
|
<streetlight-light></streetlight-light>
|
</el-col>
|
<el-col :span="12">
|
<div style="float: right;margin-right: 20px">
|
<button class="btn-time" @click="streetlightTimeClick()">路灯定时</button>
|
<button class="btn-time" @click="nbTimeClick()">NB定时</button>
|
</div>
|
<!-- <streetlight-time></streetlight-time> -->
|
<streetlight-info></streetlight-info>
|
<streetlight-lightdata></streetlight-lightdata>
|
</el-col>
|
</el-row>
|
<time-streetlight v-if="timeStreetlightVisible" ref="timeStreetlight"></time-streetlight>
|
<nb-time v-if="nbTimeVisible" ref="nbTime"></nb-time>
|
</div>
|
</template>
|
|
<script>
|
import StreetlightList from './streetlight-list'
|
import StreetlightLight from './streetlight-light'
|
import StreetlightTime from './streetlight-time'
|
import StreetlightInfo from './streetlight-info'
|
import StreetlightLightdata from './streetlight-lightdata'
|
import TimeStreetlight from './time/time-streetlight'
|
import NbTime from './nb-time/nb-time'
|
export default {
|
data () {
|
return {
|
timeStreetlightVisible: false,
|
nbTimeVisible: false
|
}
|
},
|
components: {
|
StreetlightList,
|
StreetlightLight,
|
StreetlightTime,
|
StreetlightInfo,
|
StreetlightLightdata,
|
TimeStreetlight,
|
NbTime
|
},
|
methods: {
|
streetlightTimeClick () {
|
this.timeStreetlightVisible = true
|
this.$nextTick(() => {
|
this.$refs.timeStreetlight.init()
|
})
|
},
|
nbTimeClick () {
|
this.nbTimeVisible = true
|
this.$nextTick(() => {
|
this.$refs.nbTime.init()
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.streetlight-view {
|
background-image: url(~@/assets/img/camera/bg-content.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
/deep/ .title-text {
|
padding: 8px;
|
width: 200px;
|
text-align: center;
|
font-size: 1.4em;
|
font-weight: 650
|
};
|
/deep/ .modeltop {
|
margin-top: 15px
|
};
|
button:focus {
|
outline:none;
|
};
|
.btn-time {
|
padding: 6px 20px;
|
background: url(~@/assets/img/streetlight/btn-time.png);
|
background-repeat:no-repeat;
|
border-style: none;
|
background-size: 100%;
|
color: #fff;
|
font-size: 1.1em;
|
font-weight: 550;
|
}
|
}
|
div {
|
/deep/ .el-dialog__header {
|
background: url(~@/assets/img/streetlight/dialog-title.png);
|
background-size:100% 100%;
|
};
|
/deep/ .el-dialog {
|
background: #143251;
|
border:3px solid #458aad
|
};
|
}
|
</style>
|
|
<style lang="scss">
|
div{
|
/deep/ .btn-config {
|
background: url(~@/assets/img/btn-config.png);
|
background-size:100% 100%;
|
width:90px;
|
height:30px;
|
border: 0px;
|
}
|
/deep/ .btn-cancel {
|
background: url(~@/assets/img/btn-cacel.png);
|
background-size:100% 100%;
|
width:90px;
|
height:30px;
|
border: 0px;
|
}
|
/deep/ .btn-add {
|
background: url(~@/assets/img/btn-add.png);
|
background-size:100% 100%;
|
width:90px;
|
height:30px;
|
border: 0px;
|
}
|
}
|
</style>
|
