From d13f2db56f0a82b9324c19e48d41848e7f5909b3 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期六, 28 十月 2023 18:48:54 +0800
Subject: [PATCH] 工艺信息的组件+人员的组件半成品
---
src/assets/images/process-tip.png | 0
src/views/dashboard/components/ProcessInfo.vue | 113 ++++++++++++++++++++++++++++
src/assets/images/process-model.png | 0
src/views/dashboard/index.vue | 23 ++++-
src/views/dashboard/components/PersonInfo.vue | 80 ++++++++++++++++++++
src/components.d.ts | 14 ++-
6 files changed, 220 insertions(+), 10 deletions(-)
diff --git a/src/assets/images/process-model.png b/src/assets/images/process-model.png
new file mode 100644
index 0000000..8becfbb
--- /dev/null
+++ b/src/assets/images/process-model.png
Binary files differ
diff --git a/src/assets/images/process-tip.png b/src/assets/images/process-tip.png
new file mode 100644
index 0000000..dae2876
--- /dev/null
+++ b/src/assets/images/process-tip.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 12b900c..52bea60 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,11 +7,13 @@
declare module 'vue' {
export interface GlobalComponents {
- DashboardLayout: (typeof import('./components/DashboardLayout.vue'))['default']
- ElCollapse: (typeof import('element-plus/es'))['ElCollapse']
- ElCollapseItem: (typeof import('element-plus/es'))['ElCollapseItem']
- ElScrollbar: (typeof import('element-plus/es'))['ElScrollbar']
- RouterLink: (typeof import('vue-router'))['RouterLink']
- RouterView: (typeof import('vue-router'))['RouterView']
+ DashboardLayout: typeof import('./components/DashboardLayout.vue')['default']
+ ElButton: typeof import('element-plus/es')['ElButton']
+ ElCollapse: typeof import('element-plus/es')['ElCollapse']
+ ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+ ElIcon: typeof import('element-plus/es')['ElIcon']
+ ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+ RouterLink: typeof import('vue-router')['RouterLink']
+ RouterView: typeof import('vue-router')['RouterView']
}
}
diff --git a/src/views/dashboard/components/PersonInfo.vue b/src/views/dashboard/components/PersonInfo.vue
new file mode 100644
index 0000000..d054728
--- /dev/null
+++ b/src/views/dashboard/components/PersonInfo.vue
@@ -0,0 +1,80 @@
+<template>
+ <div class="person-info">
+ <div class="person-l">
+ <el-icon>
+ <UserFilled />
+ </el-icon>
+ </div>
+ <div class="person-r">
+ {{ person.workerName || '' }}
+ <!-- <span>{{ person.phoneNum || "" }}</span> -->
+ <span>
+ <el-icon>
+ <StarFilled />
+ </el-icon>
+ <el-icon>
+ <StarFilled />
+ </el-icon>
+ <el-icon>
+ <StarFilled />
+ </el-icon>
+ <el-icon>
+ <StarFilled />
+ </el-icon>
+ <el-icon>
+ <StarFilled />
+ </el-icon>
+ </span>
+ </div>
+ </div>
+</template>
+<script setup lang="ts">
+import type { UserFilled } from '@element-plus/icons-vue'
+import { computed, toRefs } from 'vue'
+export interface PersonInfoProps {
+ person: person
+}
+
+const props = defineProps<PersonInfoProps>()
+const { person } = toRefs(props)
+</script>
+
+<style scoped lang="scss">
+$status-default: #13235a;
+$status-running: #f76c0f;
+$status-ready: #13235a;
+$status-done: #2c5dbb82;
+$status-star: yellow;
+
+.font_weight {
+ font-weight: 600;
+}
+
+.person-info {
+ width: 100%;
+ height: 60px;
+ line-height: 60px;
+ margin-bottom: 10px;
+ border-radius: 10px;
+ background: $status-default;
+ color: #fff;
+
+ .person-l {
+ float: left;
+ margin-right: 10px;
+ font-size: 40px;
+ }
+
+ .person-r {
+ font-size: 20px;
+ font-weight: 600;
+ margin-right: 10px;
+ // background: pink;
+ padding-top: 10px;
+
+ span {
+ color: $status-star;
+ }
+ }
+}
+</style>
diff --git a/src/views/dashboard/components/ProcessInfo.vue b/src/views/dashboard/components/ProcessInfo.vue
new file mode 100644
index 0000000..a75e342
--- /dev/null
+++ b/src/views/dashboard/components/ProcessInfo.vue
@@ -0,0 +1,113 @@
+<template>
+ <div class="process-info">
+ <div class="item-l-bng">
+ <img src="~@/assets/images/process-model.png" />
+ </div>
+ <div class="item-r">
+ <div class="item-r-t font_weight">{{ process.number }}</div>
+ <div class="item-r-b">{{ process.name }}</div>
+ <div class="item-r-b">{{ process.name }}</div>
+ </div>
+ <div class="tip-r">
+ <img src="~@/assets/images/process-tip.png" />
+ </div>
+ <div class="tip-current">褰撳墠浣跨敤</div>
+ <div class="btn">
+ <el-button type="primary" class="color_organge"> 鏇存柊宸ヨ壓</el-button>
+ </div>
+ </div>
+</template>
+<script setup lang="ts">
+import { computed, toRefs } from 'vue'
+export interface ProcessInfoProps {
+ process: process
+}
+
+const props = defineProps<ProcessInfoProps>()
+const { process } = toRefs(props)
+</script>
+
+<style scoped lang="scss">
+$status-running: #f76c0f;
+$status-done: #2c5dbb82;
+.font_weight {
+ font-weight: 600;
+}
+.process-info {
+ width: calc(50% - 35px);
+ height: 110px;
+ padding: 23px 10px 10px;
+ background: $status-done;
+ border-radius: 8px;
+ float: left;
+ overflow: hidden;
+ font-size: 15px;
+ position: relative;
+ margin-bottom: 30px;
+
+ &:nth-of-type(odd) {
+ margin-right: 30px;
+ }
+
+ .item-l-bng {
+ width: 40px;
+ float: left;
+ margin-right: 20px;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ .item-r {
+ width: calc(100% - 60px);
+ float: left;
+ line-height: 25px;
+ color: #fff;
+ font-size: 16px;
+ cursor: pointer;
+
+ .item-r-t {
+ font-size: 16px;
+ }
+
+ .item-r-b {
+ font-size: 14px;
+ }
+ }
+
+ .tip-r {
+ position: absolute;
+ top: 5px;
+ right: 15px;
+ width: 20px;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ .tip-current {
+ background: green;
+ color: #fff;
+ position: absolute;
+ top: 0px;
+ left: 70px;
+ width: auto;
+ padding: 2px 15px;
+ font-size: 12px;
+ border-radius: 0px 0px 6px 6px;
+ }
+
+ .btn {
+ width: 100px;
+ position: absolute;
+ right: 0px;
+ bottom: 10px;
+ .el-button--primary {
+ background: $status-running;
+ border: 0 !important;
+ }
+ }
+}
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index bba3bcc..c2f2e8a 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -5,9 +5,15 @@
<ChannelCollapse :channels="channels"></ChannelCollapse>
</template>
<template #middleBlock1>鏍囬</template>
- <template #middleBlock2>涓荤湅鏉�</template>
+ <template #middleBlock2
+ >涓荤湅鏉�
+ <ProcessInfo :process="process"></ProcessInfo>
+ </template>
<template #middleBlock3>浠诲姟璇︽儏</template>
- <template #middleBlock4>浜哄憳淇℃伅</template>
+ <template #middleBlock4
+ >浜哄憳淇℃伅
+ <PersonInfo :person="person"></PersonInfo>
+ </template>
<template #rightBlock1>鏃堕棿</template>
<template #rightBlock2>鐘舵�侀潰鏉�</template>
<template #rightBlock3>鐭ヨ瘑搴�</template>
@@ -19,7 +25,8 @@
import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue'
import type { Task } from '@/api/task'
import { chain } from 'lodash-es'
-
+import ProcessInfo from '@/views/dashboard/components/ProcessInfo.vue'
+import PersonInfo from '@/views/dashboard/components/PersonInfo.vue'
defineOptions({
name: 'DashboardView'
})
@@ -42,7 +49,15 @@
.groupBy((ele) => ele.Channel)
.value()
})
-
+const process = computed(() => {
+ return { name: '宸ヨ壓鍚嶇О', number: '111' }
+})
+const person = computed(() => {
+ return {
+ workerName: '濮撳悕',
+ phone: '111'
+ }
+})
getChannels()
</script>
--
Gitblit v1.8.0