<template>
|
<div class="device-check-list">
|
<CommonModal v-model="modelData" @close="closeModal">
|
<template #title>设备选择</template>
|
<div class="device-box">
|
<el-scrollbar always class="scroller">
|
<template v-if="deviceInfo?.deviceIDList?.length">
|
<div
|
v-for="(item, index) in deviceInfo?.deviceIDList"
|
:key="index"
|
:class="selectedDevice === item ? 'device-item check-item' : 'device-item'"
|
@click="deviceClick(item)"
|
>
|
<div class="item-l">
|
<span>{{ item }}</span>
|
<!-- {{ item }}-->
|
</div>
|
<div v-if="selectedDevice === item" class="item-r">
|
<el-icon class="item-icon" size="22" color="#00ff00"><CircleCheckFilled /></el-icon>
|
</div>
|
</div>
|
</template>
|
</el-scrollbar>
|
</div>
|
<template #footer>
|
<div class="device-b dialog-footer">
|
<BigButton class="btn1" bg-color="#213e9e" @click="closeModal">取消</BigButton>
|
<BigButton class="btn" bg-color="#0dfde6" @click="saveModal">保存</BigButton>
|
</div>
|
</template>
|
</CommonModal>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { useVModel } from '@vueuse/core'
|
import { CircleCheckFilled } from '@element-plus/icons-vue'
|
import BigButton from '@/views/dashboard/components/BigButton.vue'
|
import { useDevicesStore } from '@/stores/devices'
|
import { storeToRefs } from 'pinia'
|
import { ref, watch } from 'vue'
|
import { apiSetCurrentDevice } from '@/api'
|
import { ElMessage } from 'element-plus'
|
export interface DeviceCheckListProps {
|
modelValue: boolean
|
}
|
const props = withDefaults(defineProps<DeviceCheckListProps>(), {
|
modelValue: false
|
})
|
|
const emit = defineEmits<{
|
'update:modelValue': [show: boolean]
|
shouldReload: []
|
}>()
|
const modelData = useVModel(props, 'modelValue', emit)
|
const deviceStore = useDevicesStore()
|
const { deviceInfo } = storeToRefs(deviceStore)
|
|
// 弹窗打开时设定当前选中的设备
|
const selectedDevice = ref<string>('')
|
watch(modelData, () => {
|
if (modelData.value) {
|
selectedDevice.value = deviceInfo.value?.currentDeviceID ?? ''
|
}
|
})
|
|
function deviceClick(deviceId: string) {
|
selectedDevice.value = deviceId
|
}
|
|
function saveModal() {
|
if (!selectedDevice.value) {
|
ElMessage({
|
message: '请先选中一个设备',
|
type: 'error',
|
duration: 3 * 1000
|
})
|
return
|
}
|
apiSetCurrentDevice({ currentDeviceID: selectedDevice.value })
|
.then(() => {
|
ElMessage({
|
message: '设定成功',
|
type: 'success',
|
duration: 2 * 1000
|
})
|
modelData.value = false
|
emit('shouldReload')
|
})
|
.catch((err) => {
|
console.error(err)
|
ElMessage({
|
message: err.msg,
|
type: 'error',
|
duration: 3 * 1000
|
})
|
})
|
.finally(() => {
|
deviceStore.startPollingDevice()
|
})
|
}
|
function closeModal() {
|
modelData.value = false
|
}
|
</script>
|
<style scoped lang="scss">
|
$status-done: #0dfde6;
|
$status-d: #213e9e;
|
:deep(.el-dialog__body) {
|
padding-top: 10px !important;
|
padding-bottom: 10px !important;
|
}
|
.device-box {
|
height: 200px;
|
overflow-y: auto;
|
.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;
|
}
|
}
|
.scroller {
|
padding: 4px 16px;
|
}
|
</style>
|
