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