From b95cf940af8e01e4eca30b2599b029c2f645bd1e Mon Sep 17 00:00:00 2001
From: charles <981744753@qq.com>
Date: 星期一, 29 四月 2024 10:44:26 +0800
Subject: [PATCH] feat:创建新分支
---
src/views/dashboard/components/DeviceCheckList.vue | 86 ++++++++++++++++++++++++++++++-------------
1 files changed, 60 insertions(+), 26 deletions(-)
diff --git a/src/views/dashboard/components/DeviceCheckList.vue b/src/views/dashboard/components/DeviceCheckList.vue
index 3091543..13a4a39 100644
--- a/src/views/dashboard/components/DeviceCheckList.vue
+++ b/src/views/dashboard/components/DeviceCheckList.vue
@@ -4,18 +4,18 @@
<template #title>璁惧閫夋嫨</template>
<div class="device-box">
<el-scrollbar always class="scroller">
- <template v-if="devices?.length">
+ <template v-if="deviceInfo?.deviceList?.length">
<div
- v-for="(item, index) in devices"
- :key="index"
- :class="item.checked ? 'device-item check-item' : 'device-item'"
- @click="deviceClick(index)"
+ 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.number }}</span>
- {{ item.name }}
+ <span>{{ item.deviceID }}</span>
+ {{ item.deviceName }}
</div>
- <div v-if="item.checked" class="item-r">
+ <div v-if="selectedDevice === item.deviceID" class="item-r">
<el-icon class="item-icon" size="22" color="#00ff00"><CircleCheckFilled /></el-icon>
</div>
</div>
@@ -35,7 +35,11 @@
import { useVModel } from '@vueuse/core'
import { CircleCheckFilled } from '@element-plus/icons-vue'
import BigButton from '@/views/dashboard/components/BigButton.vue'
-import { ref } from '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
}
@@ -45,28 +49,58 @@
const emit = defineEmits<{
'update:modelValue': [show: boolean]
+ shouldReload: []
}>()
const modelData = useVModel(props, 'modelValue', emit)
+const deviceStore = useDevicesStore()
+const { deviceInfo } = storeToRefs(deviceStore)
-const devices = ref([
- {
- number: '111',
- name: '璁惧A',
- checked: true
- },
- {
- number: '222',
- name: '璁惧b'
+// 寮圭獥鎵撳紑鏃惰瀹氬綋鍓嶉�変腑鐨勮澶�
+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
+ }
+ localStorage.setItem('currentDeviceID', selectedDevice.value || '')
+ 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
-}
-function saveModal() {}
-const deviceClick = (index) => {
- devices.value.find((ele) => (ele.checked = false))
-
- devices.value[index].checked = true
}
</script>
<style scoped lang="scss">
@@ -133,6 +167,6 @@
}
}
.scroller {
- padding: 4px 16px;
+ padding: 4px 10px;
}
</style>
--
Gitblit v1.8.0