Merge branch 'dev' of http://192.168.5.5:10010/r/web/bulletin-board-style1 ...

haoxuan

2023-10-28 ba8a936772e4e2c58dd515d64d7cb7d7817bbe88

Merge branch 'dev' of http://192.168.5.5:10010/r/web/bulletin-board-style1 into wn

 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>

 src/views/dashboard/components/CurrentDateTime.vue

New file
@@ -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>

 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;

 src/views/dashboard/components/TaskTabs.vue

New file
@@ -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>

 src/views/dashboard/index.vue

@@ -1,6 +1,8 @@
<template>
  <DashboardLayout>
    <template #leftBlock1>任务筛选tabs</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>