From 4757e21f5477d10934c8e26d28e19bbafaa7196f Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期四, 02 十一月 2023 19:26:56 +0800 Subject: [PATCH] 物料详情的弹框开发一半 --- src/views/dashboard/index.vue | 69 +++++++++++++++++++++++++++------- 1 files changed, 54 insertions(+), 15 deletions(-) diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index 7ece016..51c7ff8 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -6,7 +6,9 @@ <template #leftBlock2> <ChannelCollapse :channels="channels"></ChannelCollapse> </template> - <template #middleBlock1>鏍囬</template> + <template #middleBlock1> + <DashboardTitle></DashboardTitle> + </template> <template #middleBlock2> <el-tabs v-model="activeMainTabName" class="main-info-tabs"> <el-tab-pane label="鍔犲伐淇℃伅" name="鍔犲伐淇℃伅"> @@ -15,20 +17,23 @@ <el-tab-pane label="宸ヨ壓淇℃伅" name="宸ヨ壓淇℃伅"> <ProcessInfo :process="process"></ProcessInfo> </el-tab-pane> - <el-tab-pane label="鐗╂枡娓呭崟" name="鐗╂枡娓呭崟">Role</el-tab-pane> + <el-tab-pane label="鐗╂枡娓呭崟" name="鐗╂枡娓呭崟"> + <InputMaterialsList></InputMaterialsList> + <OutputMaterialsList></OutputMaterialsList> + </el-tab-pane> </el-tabs> </template> <template #middleBlock3> <SubTitle>浠诲姟璇︽儏</SubTitle> <div class="task-detail"> - <TaskControl :task="activeTask"></TaskControl> + <TaskControl :task="activeTask" @should-reload="reloadAllData"></TaskControl> </div> <ColorInfo :order="order" :type="1"></ColorInfo> <ColorInfo :order="order" :type="2"></ColorInfo> </template> <template #middleBlock4> <SubTitle>浜哄憳淇℃伅</SubTitle> - <PersonInfo :person="person"></PersonInfo> + <PersonInfo v-for="worker in workers" :key="worker.workerId" :person="worker"></PersonInfo> </template> <template #rightBlock1> <div class="date-time"> @@ -36,23 +41,31 @@ </div> </template> <template #rightBlock2> - <DeviceStatusInfo :device="device" :type="1"></DeviceStatusInfo> - <DeviceStatusInfo :device="device" :type="2"></DeviceStatusInfo> + <DeviceStatusInfo :plc="plcStore.plcInfo" :type="1"></DeviceStatusInfo> + <DeviceStatusInfo :device="deviceStore.deviceInfo" :type="2"></DeviceStatusInfo> + <DeviceNumberInfo></DeviceNumberInfo> </template> <template #rightBlock3> <SubTitle>鐭ヨ瘑搴�</SubTitle> + <KnowledgeInfo></KnowledgeInfo> + <BigButton class="btn" bg-color="red">绾㈢伅鍛煎彨</BigButton> </template> </DashboardLayout> </template> <script setup lang="ts"> -import { computed, ref } from 'vue' +import { computed, ref, watch, onUnmounted } from 'vue' import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue' -import type { Worker, Order } from '@/api/task' +import type { Worker, Order, Task } from '@/api/task' import type { PLCResponse } from '@/api/plc' import PersonInfo from '@/views/dashboard/components/PersonInfo.vue' import ProcessInfo from '@/views/dashboard/components/ProcessInfo.vue' import ColorInfo from '@/views/dashboard/components/ColorInfo.vue' import DeviceStatusInfo from '@/views/dashboard/components/DeviceStatusInfo.vue' +import DeviceNumberInfo from '@/views/dashboard/components/DeviceNumberInfo.vue' +import KnowledgeInfo from '@/views/dashboard/components/KnowledgeInfo.vue' +import InputMaterialsList from '@/views/dashboard/components/InputMaterialsList.vue' +import OutputMaterialsList from '@/views/dashboard/components/OutputMaterialsList.vue' +import BigButton from '@/views/dashboard/components/BigButton.vue' import type { LabelValue } from '@/views/dashboard/components/TaskTabs.vue' import TaskTabs from '@/views/dashboard/components/TaskTabs.vue' import CurrentDateTime from '@/views/dashboard/components/CurrentDateTime.vue' @@ -61,19 +74,22 @@ import ProcessingInfo from '@/views/dashboard/components/ProcessingInfo.vue' import TaskControl from '@/views/dashboard/components/TaskControl.vue' import SubTitle from '@/views/dashboard/components/SubTitle.vue' +import DashboardTitle from '@/views/dashboard/components/DashboardTitle.vue' +import { usePLCStore } from '@/stores/plc' +import { useDevicesStore } from '@/stores/devices' defineOptions({ name: 'DashboardView' }) -const person = computed(() => { - return { - workerName: '濮撳悕', - phone: '111' - } as unknown as Worker +// 鑾峰彇褰撳墠楂樹寒浠诲姟鐨勫�肩彮浜轰俊鎭� +const taskStore = useTasksStore() +const workers = computed(() => { + return taskStore.activeTask?.Procedure?.procedure?.workers ?? [] }) + const process = computed(() => { - return { product: '浜у搧鍚嶇О', number: '111', procedure: '宸ヨ壓鍚嶇О', isUpdate: true } + return { product: '浜у搧鍚嶇О', number: '111', procedure: '宸ヨ壓鍚嶇О', isUpdate: true } as any }) const order = computed(() => { @@ -113,6 +129,17 @@ function changeTab(tab: LabelValue) { tasksStore.getChannels(tab.value) } + +function reloadAllData(task: Task) { + tasksStore.reload(task.Channel) +} + +const plcStore = usePLCStore() +// 鍚姩plc 杞 +plcStore.startPollingPLC() + +const deviceStore = useDevicesStore() +deviceStore.startPollingDevice() </script> <style scoped lang="scss"> @@ -124,7 +151,15 @@ justify-content: center; padding-top: 12px; } - +:deep(.el-tabs) { + height: 100%; +} +:deep(.el-tab-pane) { + height: 100%; +} +:deep(.el-tabs__content) { + height: calc(100% - 56px); +} :deep(.el-tabs__item) { color: #fff; font-size: 20px; @@ -150,4 +185,8 @@ :deep(.el-tabs__nav-wrap::after) { height: 1px; } +.btn { + width: 100%; + font-size: 20px; +} </style> -- Gitblit v1.8.0