From f8b2d2f20433f41183d8cd126af45517938d9bd6 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期二, 31 十月 2023 16:56:40 +0800
Subject: [PATCH] 人员信息的组件开发
---
src/views/dashboard/components/ProcessInfo.vue | 113 +++++++++++++++++++++++++++++++++++++
src/views/dashboard/index.vue | 8 ++
src/views/dashboard/components/PersonInfo.vue | 15 +++--
src/components.d.ts | 25 ++++----
4 files changed, 142 insertions(+), 19 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 0face0a..4e375f9 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,17 +7,18 @@
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']
- ElIcon: (typeof import('element-plus/es'))['ElIcon']
- ElProgress: (typeof import('element-plus/es'))['ElProgress']
- ElScrollbar: (typeof import('element-plus/es'))['ElScrollbar']
- ElStep: (typeof import('element-plus/es'))['ElStep']
- ElSteps: (typeof import('element-plus/es'))['ElSteps']
- ElTabPane: (typeof import('element-plus/es'))['ElTabPane']
- ElTabs: (typeof import('element-plus/es'))['ElTabs']
- 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']
+ ElProgress: typeof import('element-plus/es')['ElProgress']
+ ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+ ElStep: typeof import('element-plus/es')['ElStep']
+ ElSteps: typeof import('element-plus/es')['ElSteps']
+ ElTabPane: typeof import('element-plus/es')['ElTabPane']
+ ElTabs: typeof import('element-plus/es')['ElTabs']
+ 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
index 95693e4..72df2e2 100644
--- a/src/views/dashboard/components/PersonInfo.vue
+++ b/src/views/dashboard/components/PersonInfo.vue
@@ -56,26 +56,29 @@
width: 100%;
height: 60px;
line-height: 60px;
- margin-bottom: 10px;
+ margin-top: 10px;
border-radius: 10px;
background: $status-default;
color: #fff;
+ overflow: hidden;
.person-l {
+ width: 80px;
+ height: 40px;
+ line-height: 40px;
+ padding: 10px 0px;
+ text-align: center;
float: left;
- margin-right: 10px;
font-size: 40px;
}
.person-r {
+ width: calc(100% - 80px);
font-size: 20px;
font-weight: 600;
- margin-right: 10px;
- // background: pink;
- padding-top: 10px;
-
span {
color: $status-star;
+ margin-left: 10px;
}
}
}
diff --git a/src/views/dashboard/components/ProcessInfo.vue b/src/views/dashboard/components/ProcessInfo.vue
new file mode 100644
index 0000000..18d6995
--- /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 7e6127a..5597a04 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -12,7 +12,9 @@
<el-tab-pane label="鍔犲伐淇℃伅" name="鍔犲伐淇℃伅">
<ProcessingInfo style="margin-top: 6px" :task="activeTask"></ProcessingInfo>
</el-tab-pane>
- <el-tab-pane label="宸ヨ壓淇℃伅" name="宸ヨ壓淇℃伅">Config</el-tab-pane>
+ <el-tab-pane label="宸ヨ壓淇℃伅" name="宸ヨ壓淇℃伅">
+ <ProcessInfo :process="process"></ProcessInfo>
+ </el-tab-pane>
<el-tab-pane label="鐗╂枡娓呭崟" name="鐗╂枡娓呭崟">Role</el-tab-pane>
</el-tabs>
</template>
@@ -35,6 +37,7 @@
import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue'
import type { Worker } from '@/api/task'
import PersonInfo from '@/views/dashboard/components/PersonInfo.vue'
+import ProcessInfo from '@/views/dashboard/components/ProcessInfo.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'
@@ -52,6 +55,9 @@
phone: '111'
} as unknown as Worker
})
+const process = computed(() => {
+ return { name: '宸ヨ壓鍚嶇О', number: '111' }
+})
const taskTabsList = [
{
label: '鏈畬鎴�',
--
Gitblit v1.8.0