From 35b1ce8f65b78fcdfdd56481b29ed8d74a8a6621 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期五, 03 十一月 2023 17:57:45 +0800
Subject: [PATCH] feat: 进度条背景色,对接设备切换组件接口数据
---
src/components/CommonModal.vue | 2
src/views/dashboard/components/DeviceCheckList.vue | 81 +++++++++++++++++++--------
src/views/dashboard/components/ProcessingInfo.vue | 1
src/views/dashboard/index.vue | 12 ++-
src/stores/devices.ts | 10 +--
src/components.d.ts | 1
src/stores/tasks.ts | 11 ++-
src/api/index.ts | 15 +++++
src/views/dashboard/components/DashboardTitle.vue | 6 +
9 files changed, 99 insertions(+), 40 deletions(-)
diff --git a/src/api/index.ts b/src/api/index.ts
index 6b41213..03bc1c8 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -108,6 +108,21 @@
})
}
+export interface SetCurrentDeviceParams {
+ currentDeviceID: string
+}
+
+/**
+ * 鑾峰彇褰撳墠闈㈡澘缁戝畾鐨勮澶囧垪琛�
+ */
+export function apiSetCurrentDevice(data: SetCurrentDeviceParams) {
+ return request<BaseResponse<Devices>>({
+ url: `/v1/device/setCurrentDeviceId`,
+ method: 'post',
+ data
+ })
+}
+
export interface CraftModelListParams {
procedureId: number
page: number
diff --git a/src/components.d.ts b/src/components.d.ts
index ab30609..5374a8f 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -10,7 +10,6 @@
AlertLightIcon: typeof import('./components/icons/AlertLightIcon.vue')['default']
BaseModal: typeof import('./components/BaseModal.vue')['default']
CommonModal: typeof import('./components/CommonModal.vue')['default']
- copy: typeof import('./components/BaseModal copy.vue')['default']
DashboardLayout: typeof import('./components/DashboardLayout.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
diff --git a/src/components/CommonModal.vue b/src/components/CommonModal.vue
index 372690b..43c79aa 100644
--- a/src/components/CommonModal.vue
+++ b/src/components/CommonModal.vue
@@ -28,7 +28,7 @@
/** 鏄惁灞曠ず妯℃�佹 */
modelValue: boolean
/** 鏇村鐗堟湰 */
- wider: boolean
+ wider?: boolean
}
const props = withDefaults(defineProps<BaseModalProps>(), {
modelValue: false,
diff --git a/src/stores/devices.ts b/src/stores/devices.ts
index fb0fd53..36362b0 100644
--- a/src/stores/devices.ts
+++ b/src/stores/devices.ts
@@ -1,9 +1,11 @@
-import { computed, onUnmounted } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
import { defineStore } from 'pinia'
-import { getDeviceList } from '@/api'
+import { apiSetCurrentDevice, getDeviceList } from '@/api'
+import type { SetCurrentDeviceParams } from '@/api'
import { useRequest } from 'vue-hooks-plus'
import type { Devices } from '@/api/device'
import { DEVICE_INFO_POLLING_DURATION } from '@/common/constants'
+import { ElMessage } from 'element-plus'
export const useDevicesStore = defineStore('device', () => {
const deviceInfo = computed(() => {
@@ -27,10 +29,6 @@
cancelDevicePolling()
startDevicePolling()
}
-
- onUnmounted(() => {
- cancelDevicePolling()
- })
return { deviceInfo, startPollingDevice }
})
diff --git a/src/stores/tasks.ts b/src/stores/tasks.ts
index 3a97ead..e115738 100644
--- a/src/stores/tasks.ts
+++ b/src/stores/tasks.ts
@@ -77,10 +77,14 @@
/**
* 鍒锋柊鎵�鏈夋暟鎹�
*/
- function reload(channel: number) {
+ function reloadChannel(channel: number) {
getChannels(currentType.value).then(() => {
autoSelectTask(channel)
})
+ }
+
+ function reloadAllData() {
+ getChannels(currentType.value)
}
function moreChannelTasksBtn(channelNumber: number) {
@@ -128,9 +132,10 @@
getChannels,
moreBtnStatus,
activeTask,
- reload,
+ reloadChannel,
setActiveTask,
moreChannelTasksBtn,
- foldChannelTasksBtn
+ foldChannelTasksBtn,
+ reloadAllData
}
})
diff --git a/src/views/dashboard/components/DashboardTitle.vue b/src/views/dashboard/components/DashboardTitle.vue
index 637ef35..981972f 100644
--- a/src/views/dashboard/components/DashboardTitle.vue
+++ b/src/views/dashboard/components/DashboardTitle.vue
@@ -23,7 +23,7 @@
</div>
</div>
</div>
- <DeviceCheckList v-model="showDevicesModal" :devices="deviceList"></DeviceCheckList>
+ <DeviceCheckList v-model="showDevicesModal" @should-reload="emits('shouldReload')"></DeviceCheckList>
<TroubleTrackerModal v-model="showProblemsModal" :problems="problemList"></TroubleTrackerModal>
</template>
<script setup lang="ts">
@@ -39,6 +39,10 @@
import { apiGetProblemList } from '@/api'
import { PROBLEMS_POLLING_DURATION } from '@/common/constants'
+const emits = defineEmits<{
+ shouldReload: []
+}>()
+
// 鏄惁鏄剧ず闂璇婃柇modal
const showProblemsModal = ref(false)
/**
diff --git a/src/views/dashboard/components/DeviceCheckList.vue b/src/views/dashboard/components/DeviceCheckList.vue
index 3091543..b63dfe5 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?.deviceIDList?.length">
<div
- v-for="(item, index) in devices"
+ v-for="(item, index) in deviceInfo?.deviceIDList"
:key="index"
- :class="item.checked ? 'device-item check-item' : 'device-item'"
- @click="deviceClick(index)"
+ :class="selectedDevice === item ? 'device-item check-item' : 'device-item'"
+ @click="deviceClick(item)"
>
<div class="item-l">
- <span>{{ item.number }}</span>
- {{ item.name }}
+ <span>{{ item }}</span>
+ <!-- {{ item }}-->
</div>
- <div v-if="item.checked" class="item-r">
+ <div v-if="selectedDevice === item" 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,57 @@
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
+ }
+ 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">
diff --git a/src/views/dashboard/components/ProcessingInfo.vue b/src/views/dashboard/components/ProcessingInfo.vue
index f29a18e..276eb7f 100644
--- a/src/views/dashboard/components/ProcessingInfo.vue
+++ b/src/views/dashboard/components/ProcessingInfo.vue
@@ -179,6 +179,7 @@
}
:deep(.el-progress-bar__outer) {
border-radius: 8px;
+ background-color: #13235a;
}
:deep(.el-progress-bar__inner) {
border-radius: 8px;
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d006860..6ab459c 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -7,7 +7,7 @@
<ChannelCollapse :channels="channels"></ChannelCollapse>
</template>
<template #middleBlock1>
- <DashboardTitle></DashboardTitle>
+ <DashboardTitle @should-reload="reloadAllData"></DashboardTitle>
</template>
<template #middleBlock2>
<el-tabs v-model="activeMainTabName" class="main-info-tabs">
@@ -39,7 +39,7 @@
<template #middleBlock3>
<SubTitle>浠诲姟璇︽儏</SubTitle>
<div class="task-detail">
- <TaskControl :task="activeTask" @should-reload="reloadAllData"></TaskControl>
+ <TaskControl :task="activeTask" @should-reload="reloadChannel"></TaskControl>
</div>
<ColorInfo :type="1"></ColorInfo>
<ColorInfo :type="2"></ColorInfo>
@@ -142,8 +142,12 @@
* 瀹屾垚浠诲姟鎴栬�呬笅鍙戝弬鏁版垚鍔熷悗瑕佸埛鏂伴�氶亾鏁版嵁
* @param task
*/
-function reloadAllData(task: Task) {
- tasksStore.reload(task.Channel)
+function reloadChannel(task: Task) {
+ tasksStore.reloadChannel(task.Channel)
+}
+
+function reloadAllData() {
+ tasksStore.reloadAllData()
}
// 鍚姩plc 杞
const plcStore = usePLCStore()
--
Gitblit v1.8.0