<template xmlns="">
|
<div class="device-select-modal">
|
<el-dialog
|
title="设备选择"
|
:visible.sync="visible"
|
width="30%"
|
:before-close="handleClose">
|
<div class="device-box">
|
<template v-if="deviceInfo?.deviceList?.length">
|
<div
|
v-for="item in deviceInfo?.deviceList"
|
:key="item.deviceID"
|
:class="selectedDevice === item.deviceID ? 'device-item check-item' : 'device-item'"
|
@click="deviceClick(item.deviceID)"
|
>
|
<div class="item-l">
|
<span>{{ item.deviceID }}</span>
|
{{ item.deviceName }}
|
</div>
|
<div v-if="selectedDevice === item.deviceID" class="item-r">
|
<i class="el-icon-success checked-icon"></i>
|
</div>
|
</div>
|
</template>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button class="submit" @click="saveModal">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {mapState} from "vuex";
|
import {apiSetCurrentDevice} from "@/api/home";
|
|
export default {
|
name: "DeviceSelectModal",
|
props: {
|
visible: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
selectedDevice:null
|
}
|
},
|
watch: {
|
visible(val) {
|
if (val) {
|
this.selectedDevice = this.deviceInfo?.currentDeviceID ?? ''
|
}
|
}
|
},
|
computed: {
|
...mapState(['deviceInfo'])
|
},
|
methods: {
|
handleClose() {
|
this.$emit('update:visible', false)
|
this.$emit('close')
|
},
|
deviceClick(deviceId) {
|
this.selectedDevice = deviceId
|
},
|
saveModal() {
|
if (!this.selectedDevice) {
|
this.$message.error('请先选中一个设备')
|
return
|
}
|
apiSetCurrentDevice({ currentDeviceID: this.selectedDevice })
|
.then(() => {
|
this.$message.success({message:'设定成功',duration:2000})
|
this.$emit('update:visible',false)
|
this.$emit('should-reload')
|
})
|
.catch((err) => {
|
console.error(err)
|
this.$message.error('err.msg')
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
::v-deep {
|
.el-dialog {
|
background-color: #10256c;
|
color: #fff;
|
}
|
|
.el-dialog__title, .el-dialog__body {
|
color: #fff;
|
}
|
}
|
|
.submit {
|
background-color: #0dfde6;
|
outline: none;
|
border: none;
|
color: #333333;
|
width: 100px;
|
height: 40px;
|
font-size: 14px;
|
font-weight: 500;
|
|
&:hover {
|
background-color: #0dfde6;
|
color: #333333;
|
}
|
|
&:focus {
|
background-color: #0dfde6;
|
color: #333333;
|
}
|
|
&:active {
|
background-color: #0dfde6;
|
color: #333333;
|
}
|
}
|
|
$status-done: #0dfde6;
|
$status-d: #213e9e;
|
.device-box {
|
overflow-y: auto;
|
height: 300px;
|
padding-right: 12px;
|
.check-item {
|
border: 1px solid $status-done;
|
}
|
.device-item {
|
box-sizing: border-box;
|
width: 100%;
|
height: 45px;
|
line-height: 45px;
|
padding: 0 10px;
|
border-radius: 6px;
|
font-size: 14px;
|
color: #fff;
|
cursor: pointer;
|
.item-l {
|
width: calc(100% - 80px);
|
float: left;
|
span {
|
margin-right: 10px;
|
}
|
}
|
.item-icon {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
}
|
.item-r {
|
height: 100%;
|
float: right;
|
}
|
}
|
}
|
.device-b {
|
width: 210px;
|
margin: 10px auto 10px;
|
display: flex;
|
align-items: center;
|
.btn,
|
.btn1 {
|
width: 100px;
|
height: 40px;
|
line-height: 40px;
|
border-radius: 4px;
|
float: left;
|
color: #333;
|
font-size: 14px;
|
cursor: pointer;
|
text-align: center;
|
}
|
.btn1 {
|
color: #fff;
|
margin-right: 10px;
|
}
|
}
|
.checked-icon{
|
color: #00ff00;
|
font-size: 22px;
|
}
|
</style>
|
