From 6b027c18660b828ec7b57ad0e3f4ffca9f4d14d1 Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期五, 03 十一月 2023 15:15:24 +0800 Subject: [PATCH] Merge branch 'dev' of http://192.168.5.5:10010/r/web/bulletin-board-style1 into wn --- src/stores/plc.ts | 3 src/views/dashboard/components/InputMaterialsList.vue | 33 ++-- src/views/dashboard/components/TroubleTrackerModal.vue | 36 +--- package-lock.json | 19 ++ src/views/dashboard/components/InputOutMaterialInfo.vue | 57 +++---- src/api/task.ts | 7 src/common/constants/index.ts | 10 src/views/dashboard/components/MaterialDetails.vue | 31 ++-- src/api/device.ts | 1 src/api/index.ts | 11 + src/views/dashboard/components/OutputMaterialsList.vue | 65 ++------- src/api/problem.ts | 6 src/components/icons/AlertLightIcon.vue | 2 src/views/dashboard/components/DeviceNumberInfo.vue | 2 src/views/dashboard/index.vue | 36 +++- package.json | 1 src/stores/devices.ts | 3 src/views/dashboard/components/DashboardTitle.vue | 88 ++++++++++- 18 files changed, 237 insertions(+), 174 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1451e6f..6d767bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "xstate": "^4.38.3" }, "devDependencies": { + "@iconify-json/bx": "^1.1.7", "@iconify-json/material-symbols-light": "^1.1.0", "@iconify-json/mdi": "^1.1.55", "@rushstack/eslint-patch": "^1.3.3", @@ -811,6 +812,15 @@ "resolved": "https://registry.npmmirror.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz", "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==", "dev": true + }, + "node_modules/@iconify-json/bx": { + "version": "1.1.7", + "resolved": "https://registry.npmmirror.com/@iconify-json/bx/-/bx-1.1.7.tgz", + "integrity": "sha512-Ugh8uUU9VtK8fI9BBnhLA7VvhPh7erSmJz+eqjvl8HCRRjkz5mbMO5/KYpCOriUVdiiKB9Yv1ObMqS73WLMSwA==", + "dev": true, + "dependencies": { + "@iconify/types": "*" + } }, "node_modules/@iconify-json/material-symbols-light": { "version": "1.1.0", @@ -5463,6 +5473,15 @@ "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==", "dev": true }, + "@iconify-json/bx": { + "version": "1.1.7", + "resolved": "https://registry.npmmirror.com/@iconify-json/bx/-/bx-1.1.7.tgz", + "integrity": "sha512-Ugh8uUU9VtK8fI9BBnhLA7VvhPh7erSmJz+eqjvl8HCRRjkz5mbMO5/KYpCOriUVdiiKB9Yv1ObMqS73WLMSwA==", + "dev": true, + "requires": { + "@iconify/types": "*" + } + }, "@iconify-json/material-symbols-light": { "version": "1.1.0", "resolved": "https://registry.npmmirror.com/@iconify-json/material-symbols-light/-/material-symbols-light-1.1.0.tgz", diff --git a/package.json b/package.json index 99df410..9360d7f 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "xstate": "^4.38.3" }, "devDependencies": { + "@iconify-json/bx": "^1.1.7", "@iconify-json/material-symbols-light": "^1.1.0", "@iconify-json/mdi": "^1.1.55", "@rushstack/eslint-patch": "^1.3.3", diff --git a/src/api/device.ts b/src/api/device.ts index 6023675..83a9c45 100644 --- a/src/api/device.ts +++ b/src/api/device.ts @@ -1,4 +1,5 @@ export interface Devices { + /** 鏈満璁惧缂栫爜 */ systemDeviceID: string currentDeviceID: string systemDeviceStatus: number diff --git a/src/api/index.ts b/src/api/index.ts index afab391..84fceb8 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -3,6 +3,7 @@ import type { PLCResponse } from './plc' import type { Devices } from './device' import type { CraftModel } from './craftModel' +import type { Problem } from './problem' export interface BaseResponse<T = any> { code: number @@ -141,3 +142,13 @@ data: params }) } + +/** + * 鑾峰彇闂璇婃柇闂鍒楄〃 + */ +export function apiGetProblemList() { + return request<BaseResponse<Problem[]>>({ + url: '/v1/system/problemList', + method: 'get' + }) +} diff --git a/src/api/problem.ts b/src/api/problem.ts new file mode 100644 index 0000000..af784f6 --- /dev/null +++ b/src/api/problem.ts @@ -0,0 +1,6 @@ +export interface Problem { + /** true姝e父 false寮傚父 */ + CheckResult: boolean + ItemCode: string + ItemName: string +} diff --git a/src/api/task.ts b/src/api/task.ts index 125883a..ca76d50 100644 --- a/src/api/task.ts +++ b/src/api/task.ts @@ -47,8 +47,8 @@ startTime: number endTime: number workHours: string - inputMaterials: inputMaterial[] - outputMaterials: inputMaterial[] + inputMaterials: Material[] + outputMaterials: Material[] workers: Worker[] allProcedureNames: string[] channel: number @@ -62,12 +62,11 @@ CurrentProcedureIndex: number CanStarted: boolean } -export interface inputMaterial { +export interface Material { materialId: string materialName: string amount: number unit: string - background: string date: string } diff --git a/src/common/constants/index.ts b/src/common/constants/index.ts index 995f28e..a739be6 100644 --- a/src/common/constants/index.ts +++ b/src/common/constants/index.ts @@ -17,7 +17,9 @@ 7: 'G' } -export const DEVICE_STATUS_NAME_MAP = { - 1: '姝e父', - 2: '寮傚父' -} +// plc 杞闂撮殧 +export const PLC_POLLING_DURATION = 6_000 +// 璁惧淇℃伅 杞闂撮殧 +export const DEVICE_INFO_POLLING_DURATION = 15_000 +// 闂璇婃柇 +export const PROBLEMS_POLLING_DURATION = 30_000 diff --git a/src/components/icons/AlertLightIcon.vue b/src/components/icons/AlertLightIcon.vue index 3a70684..27c398b 100644 --- a/src/components/icons/AlertLightIcon.vue +++ b/src/components/icons/AlertLightIcon.vue @@ -19,14 +19,12 @@ <g> <path style="opacity: 0.988" - fill="#d71d05" d="M 87.5,-0.5 C 95.1667,-0.5 102.833,-0.5 110.5,-0.5C 146.888,7.72465 167.388,30.3913 172,67.5C 172.5,101.165 172.667,134.832 172.5,168.5C 123.833,168.5 75.1667,168.5 26.5,168.5C 26.3333,132.498 26.5,96.4985 27,60.5C 33.9986,27.0017 54.1653,6.66837 87.5,-0.5 Z M 101.5,40.5 C 103.678,52.6006 105.011,64.9339 105.5,77.5C 116.858,77.4139 128.191,77.9139 139.5,79C 123.945,100.223 108.778,121.723 94,143.5C 93.167,128.176 92.667,112.842 92.5,97.5C 80.4954,97.6665 68.4954,97.4999 56.5,97C 71.8692,78.4097 86.8692,59.5764 101.5,40.5 Z" /> </g> <g> <path style="opacity: 0.995" - fill="#d81d05" d="M 199.5,183.5 C 199.5,186.833 199.5,190.167 199.5,193.5C 197.167,195.167 195.167,197.167 193.5,199.5C 130.833,199.5 68.1667,199.5 5.5,199.5C 3.83333,197.167 1.83333,195.167 -0.5,193.5C -0.5,190.167 -0.5,186.833 -0.5,183.5C 1.67098,181.5 4.00432,179.666 6.5,178C 68.5,177.333 130.5,177.333 192.5,178C 194.996,179.666 197.329,181.5 199.5,183.5 Z" /> </g> diff --git a/src/stores/devices.ts b/src/stores/devices.ts index 4c74113..fb0fd53 100644 --- a/src/stores/devices.ts +++ b/src/stores/devices.ts @@ -3,6 +3,7 @@ import { getDeviceList } from '@/api' import { useRequest } from 'vue-hooks-plus' import type { Devices } from '@/api/device' +import { DEVICE_INFO_POLLING_DURATION } from '@/common/constants' export const useDevicesStore = defineStore('device', () => { const deviceInfo = computed(() => { @@ -18,7 +19,7 @@ cancel: cancelDevicePolling } = useRequest(getDeviceList, { manual: true, - pollingInterval: 6000, + pollingInterval: DEVICE_INFO_POLLING_DURATION, pollingWhenHidden: false }) diff --git a/src/stores/plc.ts b/src/stores/plc.ts index 50e7926..b42f370 100644 --- a/src/stores/plc.ts +++ b/src/stores/plc.ts @@ -5,6 +5,7 @@ import { useRequest } from 'vue-hooks-plus' import { useTasksStore } from '@/stores/tasks' import type { PLCResponse } from '@/api/plc' +import { PLC_POLLING_DURATION } from '@/common/constants' // 鍏ㄥ眬 watcher ref 闃叉澶氭璋冪敤 usePLCStore 鏃堕噸澶嶆敞鍐屼睛鍚櫒 const unwatch = ref() @@ -31,7 +32,7 @@ } as ProductProgressParams), { manual: true, - pollingInterval: 6000, + pollingInterval: PLC_POLLING_DURATION, pollingWhenHidden: false } ) diff --git a/src/views/dashboard/components/DashboardTitle.vue b/src/views/dashboard/components/DashboardTitle.vue index b55e9fb..57f1a01 100644 --- a/src/views/dashboard/components/DashboardTitle.vue +++ b/src/views/dashboard/components/DashboardTitle.vue @@ -1,41 +1,103 @@ <template> <div class="dashboard-title"> - <div class="title-text">鏅鸿兘宸ヤ綔鍙� 鈥� {{ deviceStore?.deviceInfo?.currentDeviceID ?? '' }}</div> + <div class="title-text"> + 鏅鸿兘宸ヤ綔鍙� 鈥� {{ deviceStore?.deviceInfo?.currentDeviceID ?? '' }} + <el-icon size="32" color="#0db7f5" style="margin-left: 20px; cursor: pointer" @click="openDevicesModal"> + <IconSlider></IconSlider> + </el-icon> + </div> <div class="title-status"> - <div class="connection-info" @click="openSelectDeviceModal"> - <el-icon size="30" color="red"> + <div class="connection-info" @click="openProblemsModal"> + <el-icon size="30" :color="problemsIconStatus ? '#00ff00' : '#ff0000'"> <AlertLightIcon></AlertLightIcon> </el-icon> </div> <div class="cloud-connection-status"> - <el-icon size="45" color="#ff0000"> - <IconCloudOff></IconCloudOff> + <el-icon v-if="cloudConnectionIconStatus" size="45" color="#00ff00"> + <IconCloudDone></IconCloudDone> </el-icon> - <el-icon size="45" color="#00ff00"> - <IconCloudDone></IconCloudDone> + <el-icon v-else size="45" color="#ff0000"> + <IconCloudOff></IconCloudOff> </el-icon> </div> </div> </div> - <TroubleTrackerModal v-model="showModal"></TroubleTrackerModal> + <TroubleTrackerModal v-model="showProblemsModal" :problems="problemList"></TroubleTrackerModal> </template> <script setup lang="ts"> import AlertLightIcon from '@/components/icons/AlertLightIcon.vue' -import { ref } from 'vue' +import { computed, onUnmounted, ref } from 'vue' import { useDevicesStore } from '@/stores/devices' import TroubleTrackerModal from '@/views/dashboard/components/TroubleTrackerModal.vue' import IconCloudDone from '~icons/material-symbols-light/cloud-done-outline' import IconCloudOff from '~icons/material-symbols-light/cloud-off-outline' +import IconSlider from '~icons/bx/slider' +import { useRequest } from 'vue-hooks-plus' +import { apiGetProblemList } from '@/api' +import { PROBLEMS_POLLING_DURATION } from '@/common/constants' -const showModal = ref(false) - -function openSelectDeviceModal() { - showModal.value = true +// 鏄惁鏄剧ず闂璇婃柇modal +const showProblemsModal = ref(false) +/** + * 鎵撳紑闂璇婃柇modal + */ +function openProblemsModal() { + showProblemsModal.value = true } +// 鏄惁鏄剧ず璁惧鍒囨崲modal +const showDevicesModal = ref(false) +/** + * 鎵撳紑璁惧鍒囨崲modal + */ +function openDevicesModal() { + showDevicesModal.value = true +} + +// 鑾峰彇褰撳墠璁惧鍚� const deviceStore = useDevicesStore() + +// 闂璇婃柇鍒楄〃 +const problemList = computed(() => { + return problemsRes?.value?.data ?? [] +}) +// 闂璇婃柇icon鐘舵��, 闂鍒楄〃涓湁涓�鏉″紓甯稿嵆涓虹孩鐏� 鍚﹀垯鏄豢鐏� true缁跨伅 +const problemsIconStatus = computed(() => { + if (!problemList.value || !problemList.value?.length) { + // 榛樿缁跨伅, 鎷垮埌涓�娆℃暟鎹悗鎵嶄互鎺ュ彛涓哄噯 + return true + } + return !problemList.value.some((ele) => !ele.CheckResult) +}) +// 浜戠杩炴帴icon鐘舵��, 闂鍒楄〃涓湁涓�鏉′唬琛ㄤ簯绔摼鎺ョ殑, 寮傚父鍗充负绾㈣壊浜慽con 鍚﹀垯鏄豢鑹� true缁夸簯 +const cloudConnectionIconStatus = computed(() => { + if (!problemList.value || !problemList.value?.length) { + // 榛樿缁跨伅, 鎷垮埌涓�娆℃暟鎹悗鎵嶄互鎺ュ彛涓哄噯 + return true + } + // 娌℃暟鎹氨褰撴槸閾炬帴姝e父 + const cloudConnection = problemList.value.find((ele) => ele.ItemCode === 'cloud') + return cloudConnection ? cloudConnection?.CheckResult : true +}) + +/** + * 杞闂璇婃柇 + */ +const { + data: problemsRes, + run: startProblemsPolling, + cancel: cancelProblemsPolling +} = useRequest(apiGetProblemList, { + manual: true, + pollingInterval: PROBLEMS_POLLING_DURATION, + pollingWhenHidden: false +}) +startProblemsPolling() +onUnmounted(() => { + cancelProblemsPolling() +}) </script> <style scoped lang="scss"> diff --git a/src/views/dashboard/components/DeviceNumberInfo.vue b/src/views/dashboard/components/DeviceNumberInfo.vue index eaff37b..82086ed 100644 --- a/src/views/dashboard/components/DeviceNumberInfo.vue +++ b/src/views/dashboard/components/DeviceNumberInfo.vue @@ -4,7 +4,7 @@ <div class="device-t">鏈満璁惧缂栫爜</div> <div class="device-b"> <div class="device-info"> - {{ deviceInfo?.currentDeviceID }} + {{ deviceInfo?.systemDeviceID }} </div> </div> </div> diff --git a/src/views/dashboard/components/InputMaterialsList.vue b/src/views/dashboard/components/InputMaterialsList.vue index 1cc551a..f4d946f 100644 --- a/src/views/dashboard/components/InputMaterialsList.vue +++ b/src/views/dashboard/components/InputMaterialsList.vue @@ -6,8 +6,8 @@ </div> <el-scrollbar always class="scroller"> <div class="materials-b"> - <div v-for="item in inputMaterials" :key="item.materialId"> - <InputOutMaterialInfo :item="item" :background="item.background"></InputOutMaterialInfo> + <div v-for="item in props.materialList" :key="item.materialId"> + <InputOutMaterialInfo :material="item" @detail-click="onDetailClick"></InputOutMaterialInfo> </div> </div> </el-scrollbar> @@ -16,23 +16,18 @@ <script setup lang="ts"> import InputOutMaterialInfo from '@/views/dashboard/components/InputOutMaterialInfo.vue' import BigButton from '@/views/dashboard/components/BigButton.vue' -import { toRefs } from 'vue' -const inputMaterials = [ - { - materialId: '1111', - materialName: '杈撳叆鍚嶇О', - amount: 10, - unit: '涓�', - date: 10 - }, - { - materialId: '2222222222222222', - materialName: '杈撳叆鍚嶇О2', - amount: 20, - unit: '涓�', - background: '#33ccff' - } -] +import type { Material } from '@/api/task' + +const props = defineProps<{ + materialList?: Material[] +}>() +const emits = defineEmits<{ + detailClick: [material: Material] +}>() + +function onDetailClick(material: Material) { + emits('detailClick', material) +} </script> <style scoped lang="scss"> diff --git a/src/views/dashboard/components/InputOutMaterialInfo.vue b/src/views/dashboard/components/InputOutMaterialInfo.vue index fa0766c..35e858a 100644 --- a/src/views/dashboard/components/InputOutMaterialInfo.vue +++ b/src/views/dashboard/components/InputOutMaterialInfo.vue @@ -4,57 +4,55 @@ <div class="card-t-t card_drop"> <el-popover :width="200" placement="top-start" trigger="click"> <template #reference> - {{ item.materialId }} + {{ material.materialId }} </template> - {{ item.materialId }} + {{ material.materialId }} </el-popover> </div> <div class="card-t-b"> - 璁惧12 - <el-icon class="right-arrow"> - <Right /> - </el-icon> - 璁惧13 + <!-- TODO: 鎺ュ彛缂哄け鏁版嵁, 寰呮坊鍔�--> + <!-- 璁惧12--> + <!-- <el-icon class="right-arrow">--> + <!-- <Right />--> + <!-- </el-icon>--> + <!-- 璁惧13--> </div> </div> <div class="card-b"> <div class="card_drop card-b-l"> <el-popover :width="200" placement="top-start" trigger="click"> <template #reference> - {{ item.materialName }} + {{ material.materialName }} </template> - {{ item.materialName }} + {{ material.materialName }} </el-popover> </div> <div class="card-b-r"> - <el-popover v-if="item.date" popper-class="card-info" :width="110" placement="top" trigger="click"> - <template #reference> {{ item.amount }} {{ item.unit }} </template> - 棰勮{{ item.date }}鍒嗛挓閫佽揪 + <el-popover v-if="material.date" popper-class="card-info" :width="110" placement="top" trigger="click"> + <template #reference> {{ material.amount }} {{ material.unit }} </template> + 棰勮{{ material.date }}鍒嗛挓閫佽揪 </el-popover> - <div v-else>{{ item.amount }} {{ item.unit }}</div> + <div v-else>{{ material.amount }} {{ material.unit }}</div> </div> </div> </div> - <MaterialDetails v-model="showModal"></MaterialDetails> </template> <script setup lang="ts"> -import type { inputMaterial } from '@/api/task' -import MaterialDetails from '@/views/dashboard/components/MaterialDetails.vue' -import { Right } from '@element-plus/icons-vue' -import { ref, toRefs } from 'vue' +import type { Material } from '@/api/task' +import { toRefs } from 'vue' export interface InputOutMaterialInfoProps { - item: inputMaterial - background?: string + material: Material + // TODO: 鎺ュ彛杩樹笉鏀寔, 棰勭暀 + type?: '宸查�佽揪' | '杩愯緭涓�' } -const props = withDefaults(defineProps<InputOutMaterialInfoProps>(), { - background: '#ffcc00' -}) -const { item, background } = toRefs(props) -const showModal = ref(false) - +const props = defineProps<InputOutMaterialInfoProps>() +const { material } = toRefs(props) +const emits = defineEmits<{ + detailClick: [material: Material] +}>() function materialInfoClick() { - showModal.value = true + emits('detailClick', material.value) } </script> @@ -93,8 +91,7 @@ font-size: 12px; color: #333; padding: 3px 5px; - // background: $status-done; - background-color: v-bind(background); + background: $status-done; text-align: left; .card-t-t { width: 100%; @@ -126,7 +123,7 @@ background: red !important; font-size: 12px; color: #fff; - border: 0px; + border: 0; border-radius: 10px; // height:20px!important; line-height: 8px !important; diff --git a/src/views/dashboard/components/MaterialDetails.vue b/src/views/dashboard/components/MaterialDetails.vue index 1df2fdc..0077c34 100644 --- a/src/views/dashboard/components/MaterialDetails.vue +++ b/src/views/dashboard/components/MaterialDetails.vue @@ -3,19 +3,22 @@ <BaseModal v-model="modelData" :wider="true" @close="closeModal"> <template #title>鐗╂枡璇︽儏 </template> <div class="details-box"> - <div class="details-t"> - <div class="details-t-t">{{ materialObj.form.materialId }}</div> + <div v-if="material" class="details-t"> + <div class="details-t-t">{{ material.materialId }}</div> <div class="details-t-b"> <div class="details-t-b-l"> - <div class="item">鐗╂枡鍚嶇О锛歿{ materialObj.form.materialName }}</div> - <div class="item">鏁伴噺锛歿{ materialObj.form.amount }}</div> - <div class="item">鐗╂枡瑙勬牸锛歿{ materialObj.form.amount }}</div> - <div class="item">鐗╂枡绫诲瀷锛歿{ materialObj.form.amount }}</div> + <div class="item">鐗╂枡鍚嶇О锛歿{ material.materialName }}</div> + <div class="item">鏁伴噺锛歿{ material.amount }}</div> + <div class="item">鐗╂枡瑙勬牸锛歿{ material.amount }}</div> + <div class="item">鐗╂枡绫诲瀷锛歿{ material.amount }}</div> </div> - <BigButton class="btn" bg-color="#03d203f0">宸查�佽揪</BigButton> + <!-- TODO: 鐗╂枡閫佽揪缂烘帴鍙�--> + <BigButton v-if="false" class="btn" bg-color="#03d203f0">宸查�佽揪</BigButton> </div> </div> - <div class="details-b"> + + <!-- TODO: 鐗╂枡閫佽揪缂烘帴鍙�--> + <div v-if="false" class="details-b"> <div class="details-b-t">杩愯緭璇︽儏</div> <div class="details-b-b"> @@ -44,11 +47,13 @@ <script setup lang="ts"> import { useVModel } from '@vueuse/core' import BigButton from '@/views/dashboard/components/BigButton.vue' -import { ref } from 'vue' +import type { Material } from '@/api/task' export interface MaterialDetailsProps { + material?: Material modelValue: boolean } const props = withDefaults(defineProps<MaterialDetailsProps>(), { + material: undefined, modelValue: false }) const emit = defineEmits<{ @@ -59,14 +64,8 @@ function closeModal() { modelData.value = false } +// 鍋囨暟鎹� const materialObj = { - form: { - materialId: '1111', - materialName: '杈撳叆鍚嶇О', - amount: 10, - unit: '涓�', - date: 10 - }, materialFlow: [ { label: '宸查�佽揪', diff --git a/src/views/dashboard/components/OutputMaterialsList.vue b/src/views/dashboard/components/OutputMaterialsList.vue index 092af0e..9ae2fca 100644 --- a/src/views/dashboard/components/OutputMaterialsList.vue +++ b/src/views/dashboard/components/OutputMaterialsList.vue @@ -6,8 +6,8 @@ </div> <el-scrollbar always class="scroller"> <div class="materials-b"> - <div v-for="item in outputMaterials" :key="item.materialId"> - <InputOutMaterialInfo :item="item" :background="item.background"></InputOutMaterialInfo> + <div v-for="item in props.materialList" :key="item.materialId"> + <InputOutMaterialInfo :material="item" @detail-click="onDetailClick"></InputOutMaterialInfo> </div> </div> </el-scrollbar> @@ -16,55 +16,18 @@ <script setup lang="ts"> import InputOutMaterialInfo from '@/views/dashboard/components/InputOutMaterialInfo.vue' import BigButton from '@/views/dashboard/components/BigButton.vue' -import { toRefs } from 'vue' -const outputMaterials = [ - { - materialId: '1111', - materialName: '杈撳叆鍚嶇О', - amount: 10, - unit: '涓�' - }, - { - materialId: '2222222222222222', - materialName: '杈撳叆鍚嶇О2', - amount: 20, - unit: '涓�', - background: '#33ccff' - }, - { - materialId: '1111', - materialName: '杈撳叆鍚嶇О', - amount: 10, - unit: '涓�' - }, - { - materialId: '2222222222222222', - materialName: '杈撳叆鍚嶇О2', - amount: 20, - unit: '涓�', - background: '#33ccff' - }, - { - materialId: '1111', - materialName: '杈撳叆鍚嶇О', - amount: 10, - unit: '涓�' - }, - { - materialId: '2222222222222222', - materialName: '杈撳叆鍚嶇О2', - amount: 20, - unit: '涓�', - background: '#33ccff' - }, - { - materialId: '2222222222222222', - materialName: '杈撳叆鍚嶇О2', - amount: 20, - unit: '涓�', - background: '#33ccff' - } -] +import type { Material } from '@/api/task' + +const props = defineProps<{ + materialList?: Material[] +}>() +const emits = defineEmits<{ + detailClick: [material: Material] +}>() + +function onDetailClick(material: Material) { + emits('detailClick', material) +} </script> <style scoped lang="scss"> diff --git a/src/views/dashboard/components/TroubleTrackerModal.vue b/src/views/dashboard/components/TroubleTrackerModal.vue index 31c8c01..d5ef715 100644 --- a/src/views/dashboard/components/TroubleTrackerModal.vue +++ b/src/views/dashboard/components/TroubleTrackerModal.vue @@ -4,17 +4,17 @@ <template #title>闂璇婃柇 </template> <div class="modal-content"> <el-scrollbar always class="scroller"> - <div v-if="fakeTroubles?.length" class="trouble"> - <div v-for="(item, index) in fakeTroubles" :key="index" class="trouble-item"> + <div v-if="problems?.length" class="trouble"> + <div v-for="(item, index) in problems" :key="index" class="trouble-item"> <div class="trouble-content"> <div class="trouble-icon"> - <el-icon v-if="item.status === 2" size="30" color="#ff0000"><WarnTriangleFilled /></el-icon> - <el-icon v-if="item.status === 1" size="30" color="#00ff00"><CircleCheckFilled /></el-icon> + <el-icon v-if="item.CheckResult" size="30" color="#00ff00"><CircleCheckFilled /></el-icon> + <el-icon v-if="!item.CheckResult" size="30" color="#ff0000"><WarnTriangleFilled /></el-icon> </div> - <div class="trouble-text">{{ item.content }}</div> + <div class="trouble-text">{{ item.ItemName }}</div> </div> - <div class="trouble-status" :class="{ green: item.status === 1, red: item.status === 2 }"> - {{ DEVICE_STATUS_NAME_MAP[item.status] }} + <div class="trouble-status" :class="{ green: item.CheckResult, red: !item.CheckResult }"> + {{ item.CheckResult ? '姝e父' : '寮傚父' }} </div> </div> </div> @@ -25,15 +25,18 @@ </template> <script setup lang="ts"> import { useVModel } from '@vueuse/core' -import { ref } from 'vue' import { CircleCheckFilled, WarnTriangleFilled } from '@element-plus/icons-vue' -import { DEVICE_STATUS_NAME_MAP } from '@/common/constants' +import type { Problem } from '@/api/problem' +import { toRefs } from 'vue' export interface TroubleTrackerModalProps { modelValue: boolean + problems?: Problem[] } const props = withDefaults(defineProps<TroubleTrackerModalProps>(), { - modelValue: false + modelValue: false, + problems: undefined }) +const { problems } = toRefs(props) const emit = defineEmits<{ 'update:modelValue': [show: boolean] }>() @@ -42,19 +45,6 @@ function closeModal() { modelData.value = false } - -const fakeTroubles = ref<{ content: string; status: 1 | 2 }[]>([{ content: '浜戠缃戠粶杩炴帴', status: 1 }]) -// TODO: 绛夋帴鍙� -fakeTroubles.value.push( - ...Array(100) - .fill(0) - .map(() => { - return { - content: '浜戠缃戠粶杩炴帴', - status: Math.ceil(Math.random() + 1) - } as { content: string; status: 1 | 2 } - }) -) </script> <style scoped lang="scss"> .modal-content { diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index 815948f..4f255f6 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -23,8 +23,14 @@ ></ProcessInfo> </el-tab-pane> <el-tab-pane label="鐗╂枡娓呭崟" name="鐗╂枡娓呭崟"> - <InputMaterialsList></InputMaterialsList> - <OutputMaterialsList></OutputMaterialsList> + <InputMaterialsList + :material-list="activeTask?.Procedure.procedure.inputMaterials" + @detail-click="showMaterialDetailModal" + ></InputMaterialsList> + <OutputMaterialsList + :material-list="activeTask?.Procedure.procedure.outputMaterials" + @detail-click="showMaterialDetailModal" + ></OutputMaterialsList> </el-tab-pane> </el-tabs> </template> @@ -33,8 +39,8 @@ <div class="task-detail"> <TaskControl :task="activeTask" @should-reload="reloadAllData"></TaskControl> </div> - <ColorInfo :order="order" :type="1"></ColorInfo> - <ColorInfo :order="order" :type="2"></ColorInfo> + <ColorInfo :type="1"></ColorInfo> + <ColorInfo :type="2"></ColorInfo> </template> <template #middleBlock4> <SubTitle>浜哄憳淇℃伅</SubTitle> @@ -57,11 +63,12 @@ </template> </DashboardLayout> <CraftDetailModal v-model="showCraftModelDetail" @close="showCraftModelDetail = false"></CraftDetailModal> + <MaterialDetails v-model="showMaterialDetail" :material="currentMaterialInfo"></MaterialDetails> </template> <script setup lang="ts"> import { computed, ref, watch } from 'vue' import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue' -import type { Worker, Order, Task } from '@/api/task' +import type { Worker, Order, Task, Material } from '@/api/task' import PersonInfo from '@/views/dashboard/components/PersonInfo.vue' import ProcessInfo from '@/views/dashboard/components/ProcessInfo.vue' import ColorInfo from '@/views/dashboard/components/ColorInfo.vue' @@ -84,6 +91,7 @@ import { useDevicesStore } from '@/stores/devices' import { useCraftModelStore } from '@/stores/craftModel' import CraftDetailModal from '@/views/dashboard/components/CraftDetailModal.vue' +import MaterialDetails from '@/views/dashboard/components/MaterialDetails.vue' defineOptions({ name: 'DashboardView' @@ -93,10 +101,6 @@ const taskStore = useTasksStore() const workers = computed(() => { return taskStore.activeTask?.Procedure?.procedure?.workers ?? [] -}) - -const process = computed(() => { - return { product: '浜у搧鍚嶇О', number: '111', procedure: '宸ヨ壓鍚嶇О', isUpdate: true } as any }) const order = computed(() => { @@ -157,6 +161,20 @@ console.log(1) showCraftModelDetail.value = true } + +// 鏄惁灞曠ず鐗╂枡璇︽儏寮圭獥 +const showMaterialDetail = ref(false) +// 褰撳墠瑕佸睍绀虹殑鐗╂枡璇︽儏 +const currentMaterialInfo = ref<Material>() + +/** + * 鏄剧ず鐗╂枡璇︽儏寮圭獥 + * @param material + */ +function showMaterialDetailModal(material: Material) { + currentMaterialInfo.value = material + showMaterialDetail.value = true +} </script> <style scoped lang="scss"> -- Gitblit v1.8.0