From ba8a936772e4e2c58dd515d64d7cb7d7817bbe88 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期六, 28 十月 2023 18:50:42 +0800
Subject: [PATCH] Merge branch 'dev' of http://192.168.5.5:10010/r/web/bulletin-board-style1 into wn
---
src/views/dashboard/components/TaskTabs.vue | 80 ++++++++++++++++++++++++++
src/views/dashboard/components/CurrentDateTime.vue | 21 +++++++
src/views/dashboard/components/TaskInfo.vue | 2
src/views/dashboard/index.vue | 31 +++++++++-
src/views/dashboard/components/ChannelCollapse.vue | 3
5 files changed, 131 insertions(+), 6 deletions(-)
diff --git a/src/views/dashboard/components/ChannelCollapse.vue b/src/views/dashboard/components/ChannelCollapse.vue
index dcedc3d..693ab61 100644
--- a/src/views/dashboard/components/ChannelCollapse.vue
+++ b/src/views/dashboard/components/ChannelCollapse.vue
@@ -4,10 +4,9 @@
<el-collapse-item
v-for="(tasks, channelNumber) in channels"
:key="channelNumber"
- :title="channelNumber + ' 閫氶亾'"
+ :title="CHANNEL_NAME_MAP[channelNumber] + ' 閫氶亾'"
:name="String(channelNumber)"
>
- <template #title>{{ CHANNEL_NAME_MAP[channelNumber] + ' 閫氶亾' }}</template>
<TaskInfo v-for="task in tasks" :key="task.Procedure.ID" :task="task"></TaskInfo>
</el-collapse-item>
</el-collapse>
diff --git a/src/views/dashboard/components/CurrentDateTime.vue b/src/views/dashboard/components/CurrentDateTime.vue
new file mode 100644
index 0000000..3097eab
--- /dev/null
+++ b/src/views/dashboard/components/CurrentDateTime.vue
@@ -0,0 +1,21 @@
+<template>
+ <div class="current-date-time">
+ {{ time }}
+ </div>
+</template>
+
+<script setup lang="ts">
+import { useDateFormat, useNow } from '@vueuse/core'
+
+const time = useDateFormat(useNow(), 'YYYY[骞碷 MM[鏈圿 DD[鏃 dddd HH:mm:ss', { locales: 'zh-cn' })
+</script>
+<style scoped lang="scss">
+$color: #30decd;
+
+.current-date-time {
+ width: 370px;
+ color: $color;
+ font-size: 24px;
+ font-weight: 600;
+}
+</style>
diff --git a/src/views/dashboard/components/TaskInfo.vue b/src/views/dashboard/components/TaskInfo.vue
index 9f151d4..e085d73 100644
--- a/src/views/dashboard/components/TaskInfo.vue
+++ b/src/views/dashboard/components/TaskInfo.vue
@@ -55,6 +55,7 @@
$status-running: #ffcc00;
$status-ready: #13235a;
$status-done: #13235a;
+$text-color: #d7d7d7;
.task-info {
background-color: #6b83ff;
border-radius: 4px;
@@ -81,6 +82,7 @@
.task-info-content {
font-size: 13px;
padding: 10px 20px;
+ color: $text-color;
.row {
width: 100%;
height: 24px;
diff --git a/src/views/dashboard/components/TaskTabs.vue b/src/views/dashboard/components/TaskTabs.vue
new file mode 100644
index 0000000..d2e3311
--- /dev/null
+++ b/src/views/dashboard/components/TaskTabs.vue
@@ -0,0 +1,80 @@
+<template>
+ <div class="task-tabs">
+ <div
+ v-for="tabName in list"
+ :key="tabName"
+ class="task-tab-item triangle-tip"
+ :class="{ active: props.modelValue === tabName }"
+ @click="selectTab(tabName)"
+ >
+ {{ tabName }}
+ </div>
+ </div>
+</template>
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+ /** tab 鍒楄〃*/
+ list: string[]
+ /** 褰撳墠閫変腑鐨� tab*/
+ modelValue?: string
+}>()
+const emit = defineEmits<{
+ 'update:modelValue': [tabName: string]
+}>()
+const data = useVModel(props, 'modelValue', emit)
+
+function selectTab(tabName: string) {
+ data.value = tabName
+}
+</script>
+<style scoped lang="scss">
+$active-bg: #6b83ff;
+$tab-bg: #0b4694;
+$tab-height: 50px;
+.task-tabs {
+ background-color: transparent;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: $tab-height;
+ font-size: 20px;
+
+ .task-tab-item {
+ background-color: $tab-bg;
+ margin-right: 10px;
+ flex: 1;
+ height: $tab-height;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ border-radius: 4px;
+ cursor: pointer;
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ .active {
+ background-color: $active-bg;
+ font-weight: 600;
+ }
+ .triangle-tip:before {
+ content: '';
+ width: 0;
+ height: 0;
+ border-width: 10px 10px 0;
+ border-style: solid;
+ border-color: $active-bg transparent transparent;
+ position: absolute;
+ left: 50%;
+ margin-left: -10px;
+ bottom: -10px;
+ display: none;
+ }
+ .active.triangle-tip:before {
+ display: block;
+ }
+}
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index c2f2e8a..b927f26 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,6 +1,8 @@
<template>
<DashboardLayout>
- <template #leftBlock1>浠诲姟绛涢�塼abs</template>
+ <template #leftBlock1>
+ <TaskTabs v-model="activeTaskTab" style="margin-top: 20px" :list="taskTabsTitle"></TaskTabs>
+ </template>
<template #leftBlock2>
<ChannelCollapse :channels="channels"></ChannelCollapse>
</template>
@@ -14,19 +16,26 @@
>浜哄憳淇℃伅
<PersonInfo :person="person"></PersonInfo>
</template>
- <template #rightBlock1>鏃堕棿</template>
+ <template #rightBlock1>
+ <div class="date-time">
+ <CurrentDateTime></CurrentDateTime>
+ </div>
+ </template>
<template #rightBlock2>鐘舵�侀潰鏉�</template>
<template #rightBlock3>鐭ヨ瘑搴�</template>
</DashboardLayout>
</template>
<script setup lang="ts">
import { getTaskList } from '@/api'
-import { computed, ref } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
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'
+import TaskTabs from '@/views/dashboard/components/TaskTabs.vue'
+import CurrentDateTime from '@/views/dashboard/components/CurrentDateTime.vue'
+
defineOptions({
name: 'DashboardView'
})
@@ -59,6 +68,20 @@
}
})
getChannels()
+const taskTabsTitle = ['鏈畬鎴�', '浠婃棩浠诲姟', '宸插畬鎴�']
+const activeTaskTab = ref('鏈畬鎴�')
+
+watchEffect(() => {
+ // console.log(activeTaskTab?.value, 111111)
+})
</script>
-<style scoped></style>
+<style scoped>
+.date-time {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-top: 12px;
+}
+</style>
--
Gitblit v1.8.0