From 031b4d9a2a6a757571015b1903bb125d414ecb2a Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期四, 02 十一月 2023 13:59:30 +0800
Subject: [PATCH] Merge branch 'dev' of http://192.168.5.5:10010/r/web/bulletin-board-style1 into wn
---
public/header-bg.png | 0
src/views/dashboard/components/TroubleTrackerModal.vue | 95 +++++++++++++++++++++++++++++++
src/components/BaseModal.vue | 4 +
src/views/dashboard/index.vue | 12 ++--
src/common/constants/index.ts | 5 +
src/components/DashboardLayout.vue | 3 +
src/views/dashboard/components/DashboardTitle.vue | 13 +++-
7 files changed, 122 insertions(+), 10 deletions(-)
diff --git a/public/header-bg.png b/public/header-bg.png
new file mode 100644
index 0000000..1d6254a
--- /dev/null
+++ b/public/header-bg.png
Binary files differ
diff --git a/src/common/constants/index.ts b/src/common/constants/index.ts
index 217acf4..995f28e 100644
--- a/src/common/constants/index.ts
+++ b/src/common/constants/index.ts
@@ -16,3 +16,8 @@
6: 'F',
7: 'G'
}
+
+export const DEVICE_STATUS_NAME_MAP = {
+ 1: '姝ｅ父',
+ 2: '寮傚父'
+}
diff --git a/src/components/BaseModal.vue b/src/components/BaseModal.vue
index 34a552a..76e1411 100644
--- a/src/components/BaseModal.vue
+++ b/src/components/BaseModal.vue
@@ -36,11 +36,12 @@
})
const emit = defineEmits<{
'update:modelValue': [show: boolean]
+ close: []
}>()
const modelData = useVModel(props, 'modelValue', emit)
function closeModal() {
- modelData.value = false
+ emit('close')
}
</script>
<style scoped lang="scss">
@@ -74,6 +75,7 @@
font-weight: 600;
}
&-close {
+ cursor: pointer;
height: 36px;
width: 36px;
border-radius: 50%;
diff --git a/src/components/DashboardLayout.vue b/src/components/DashboardLayout.vue
index 8bebf18..3e48567 100644
--- a/src/components/DashboardLayout.vue
+++ b/src/components/DashboardLayout.vue
@@ -72,6 +72,9 @@
// 涓嬭竟楂樺害
$bottomBlockHeight: calc(100vh - 2 * $layoutPadding - $headerBlockHeight - $topBlocHeight);
.dashboard-layout {
+ background-image: url('/header-bg.png');
+ background-position-x: center;
+ background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: space-between;
diff --git a/src/views/dashboard/components/DashboardTitle.vue b/src/views/dashboard/components/DashboardTitle.vue
index ed14226..d52b218 100644
--- a/src/views/dashboard/components/DashboardTitle.vue
+++ b/src/views/dashboard/components/DashboardTitle.vue
@@ -1,6 +1,6 @@
<template>
<div class="dashboard-title">
- <div class="title-text">鏅鸿兘宸ヤ綔鍙� 鈥� {{ props?.deviceInfo?.currentDeviceID ?? '' }}</div>
+ <div class="title-text">鏅鸿兘宸ヤ綔鍙� 鈥� {{ deviceStore?.devices?.currentDeviceID ?? '' }}</div>
<div class="title-status">
<div class="connection-info" @click="openSelectDeviceModal">
<el-icon size="30" color="red">
@@ -10,14 +10,17 @@
<div class="connection-status"></div>
</div>
</div>
+
+ <TroubleTrackerModal v-model="showModal"></TroubleTrackerModal>
</template>
<script setup lang="ts">
-import type { Devices } from '@/api/device'
import AlertLightIcon from '@/components/icons/AlertLightIcon.vue'
import { ref } from 'vue'
+import { useDevicesStore } from '@/stores/devices'
+import TroubleTrackerModal from '@/views/dashboard/components/TroubleTrackerModal.vue'
export interface DashBoardTitleProps {
- deviceInfo: Devices
+ // deviceInfo: Devices
}
const props = defineProps<DashBoardTitleProps>()
@@ -27,6 +30,10 @@
function openSelectDeviceModal() {
showModal.value = true
}
+
+const deviceStore = useDevicesStore()
+
+deviceStore.getDevicesInfo()
</script>
<style scoped lang="scss">
diff --git a/src/views/dashboard/components/TroubleTrackerModal.vue b/src/views/dashboard/components/TroubleTrackerModal.vue
new file mode 100644
index 0000000..7a9393f
--- /dev/null
+++ b/src/views/dashboard/components/TroubleTrackerModal.vue
@@ -0,0 +1,95 @@
+<template>
+ <div class="trouble-tracker-modal">
+ <BaseModal v-model="modelData" :wider="true" @close="closeModal">
+ <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 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>
+ </div>
+ <div class="trouble-text">{{ item.content }}</div>
+ </div>
+ <div class="trouble-status" :class="{ green: item.status === 1, red: item.status === 2 }">
+ {{ DEVICE_STATUS_NAME_MAP[item.status] }}
+ </div>
+ </div>
+ </div>
+ </el-scrollbar>
+ </div>
+ </BaseModal>
+ </div>
+</template>
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core/index'
+import { ref } from 'vue'
+import { CircleCheckFilled, WarnTriangleFilled } from '@element-plus/icons-vue'
+import { DEVICE_STATUS_NAME_MAP } from '@/common/constants'
+export interface TroubleTrackerModalProps {
+ modelValue: false
+}
+const props = withDefaults(defineProps<TroubleTrackerModalProps>(), {
+ modelValue: false
+})
+const emit = defineEmits<{
+ 'update:modelValue': [show: boolean]
+}>()
+const modelData = useVModel(props, 'modelValue', emit)
+
+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 {
+ height: 600px;
+}
+.trouble {
+ color: #fff;
+ font-size: 18px;
+ padding: 6px 40px 6px 20px;
+
+ &-item {
+ min-height: 40px;
+ padding: 10px 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ &-icon {
+ height: 30px;
+ margin-right: 14px;
+ }
+ &-content {
+ display: flex;
+ align-items: center;
+ }
+ &-status {
+ &.green {
+ color: #00ff00;
+ }
+ &.red {
+ color: #ff0000;
+ }
+ }
+}
+.scroller {
+ padding: 4px 16px;
+}
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index fbbaf4b..fd0f348 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -30,7 +30,7 @@
</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">
@@ -75,12 +75,12 @@
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 } as any
})
--
Gitblit v1.8.0