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