From 1c22b65361d81ef23bd76d0f76a3dce7ef72fd99 Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期二, 31 十月 2023 10:06:56 +0800 Subject: [PATCH] 拉代码 --- src/views/dashboard/components/TaskTabs.vue | 25 + src/views/dashboard/components/ProcessingInfo.vue | 220 ++++++++++++++++++++ src/api/task.ts | 10 src/views/dashboard/components/ChannelCollapse.vue | 58 ++++ src/views/dashboard/components/CraftInfo.vue | 10 src/views/dashboard/components/PersonInfo.vue | 8 src/components.d.ts | 11 src/stores/tasks.ts | 106 +++++++++ src/api/index.ts | 39 ++ src/api/plc.ts | 6 src/components/DashboardLayout.vue | 40 ++ /dev/null | 87 ------- vite.config.ts | 2 src/views/dashboard/components/TaskInfo.vue | 24 + 14 files changed, 500 insertions(+), 146 deletions(-) diff --git a/src/api/index.ts b/src/api/index.ts index 1c5ab52..1517ce2 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,5 +1,6 @@ import { request } from '@/common/utils' -import type { TasksResponse } from './task' +import type { TasksGroupByChannel } from './task' +import type { PLCResponse } from './plc' export interface BaseResponse<T = any> { code: number @@ -7,16 +8,38 @@ msg: string } +export interface TaskListParams { + /** 1鏈畬鎴�2浠婂ぉ鏈畬鎴�3宸插畬鎴� */ + type: 1 | 2 | 3 + /** 閫氶亾鍙� 涓嶄紶鏌ユ墍鏈夐�氶亾鐨� */ + channel?: number + /** 浠庣鍑犱釜寮�濮嬫煡锛屼粠0寮�濮� */ + offset: number + /** 鏌ュ灏戞潯 */ + limit: number +} + /** * 鑾峰彇浠诲姟鍒楄〃 - * @param taskMode 1: 寰呯敓浜х殑浠诲姟 2: 鐪嬫澘鍚勯�氶亾褰撳墠灞曠ず鐨勪换鍔� + * @param params */ -export function getTaskList(taskMode: 1 | 2) { - return request<BaseResponse<TasksResponse>>({ - url: '/v1/task/get', +export function getTaskList(params: TaskListParams) { + return request<BaseResponse<TasksGroupByChannel>>({ + url: '/v1/task/list', method: 'get', - params: { - taskMode - } + params + }) +} + +export interface ProductProgressParams { + channel: number + procedureId: number +} + +export function getProductProgress(params: ProductProgressParams) { + return request<BaseResponse<PLCResponse>>({ + url: '/v1/plc/productProgress', + method: 'post', + data: params }) } diff --git a/src/api/plc.ts b/src/api/plc.ts new file mode 100644 index 0000000..686879e --- /dev/null +++ b/src/api/plc.ts @@ -0,0 +1,6 @@ +export interface PLCResponse { + finishNumber: number + totalNumber: number + /** 1鏂紑 2鐢熶骇涓� 3寰呮満*/ + plcStatus: 1 | 2 | 3 +} diff --git a/src/api/task.ts b/src/api/task.ts index a939691..405d0b4 100644 --- a/src/api/task.ts +++ b/src/api/task.ts @@ -48,7 +48,7 @@ workHours: string inputMaterials: string outputMaterials: string - workers: Workers[] + workers: Worker[] allProcedureNames: string[] channel: number } @@ -62,7 +62,7 @@ CanStarted: boolean } -export interface Workers { +export interface Worker { workerId: string workerName: string phoneNum: string @@ -78,7 +78,11 @@ export interface TasksResponse { Tasks: Task[] TaskCount: number - workers: Workers[] + workers: Worker[] Prompt: Prompt ChannelAmount: number } + +export interface TasksGroupByChannel { + [channel: number]: TasksResponse +} diff --git a/src/components.d.ts b/src/components.d.ts index 52bea60..fac83df 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -7,13 +7,8 @@ declare module 'vue' { export interface GlobalComponents { - 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'] - ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] - RouterLink: typeof import('vue-router')['RouterLink'] - RouterView: typeof import('vue-router')['RouterView'] + DashboardLayout: (typeof import('./components/DashboardLayout.vue'))['default'] + RouterLink: (typeof import('vue-router'))['RouterLink'] + RouterView: (typeof import('vue-router'))['RouterView'] } } diff --git a/src/components/DashboardLayout.vue b/src/components/DashboardLayout.vue index 692c86f..e3d5309 100644 --- a/src/components/DashboardLayout.vue +++ b/src/components/DashboardLayout.vue @@ -5,8 +5,8 @@ <slot name="leftBlock1"></slot> </div> <div class="double-height-block padding-4"> - <div class="card"> - <el-scrollbar always> + <div class="card scroll-card"> + <el-scrollbar always class="scroller"> <slot name="leftBlock2"></slot> </el-scrollbar> </div> @@ -16,18 +16,18 @@ <div class="header-block padding-4"> <slot name="middleBlock1"></slot> </div> - <div class="base-block padding-4"> + <div class="top-block padding-4"> <div class="card"> <slot name="middleBlock2"></slot> </div> </div> - <div class="block-container"> - <div class="base-block padding-4"> + <div class="bottom-block"> + <div class="bottom-block-item padding-4"> <div class="card"> <slot name="middleBlock3"></slot> </div> </div> - <div class="base-block padding-4"> + <div class="bottom-block-item padding-4"> <div class="card"> <slot name="middleBlock4"></slot> </div> @@ -67,6 +67,10 @@ $baseBlockHeight: calc((100vh - 2 * $layoutPadding - $headerBlockHeight) / 2); // 鍙屽�嶉珮甯冨眬鍧楅珮搴� $doubleBlockHeight: calc($baseBlockHeight * 2); +// 涓婅竟鍥哄畾楂� +$topBlocHeight: 400px; +// 涓嬭竟楂樺害 +$bottomBlockHeight: calc(100vh - 2 * $layoutPadding - $headerBlockHeight - $topBlocHeight); .dashboard-layout { display: flex; align-items: center; @@ -100,14 +104,24 @@ .padding-4 { padding: 6px; } -.block-container { + +.base-block { + height: $baseBlockHeight; + flex: 1; +} +.top-block { + height: $topBlocHeight; + flex: 0; +} +.bottom-block { display: flex; align-items: center; justify-content: space-between; + height: $bottomBlockHeight; } -.base-block { - height: $baseBlockHeight; - flex-grow: 1; +.bottom-block-item { + height: $bottomBlockHeight; + flex: 1; } .header-block { height: $headerBlockHeight; @@ -123,4 +137,10 @@ border-radius: 6px; padding: 10px 16px; } +.scroll-card { + padding: 0; +} +.scroller { + padding: 10px 16px; +} </style> diff --git a/src/stores/tasks.ts b/src/stores/tasks.ts new file mode 100644 index 0000000..8f8599d --- /dev/null +++ b/src/stores/tasks.ts @@ -0,0 +1,106 @@ +import { computed, ref } from 'vue' +import { defineStore } from 'pinia' +import type { Task, TasksGroupByChannel, TasksResponse } from '@/api/task' +import type { TaskListParams } from '@/api' +import { getTaskList } from '@/api' + +export interface ChannelMoreBtnStatus { + /** true 浠诲姟鏈姞杞藉畬 false 鎵�鏈変换鍔″凡缁忓姞杞藉畬鎴�*/ + [channel: number]: boolean +} + +export const useTasksStore = defineStore('tasks', () => { + const channels = ref<TasksGroupByChannel>({}) + + const currentType = ref<1 | 2 | 3>(1) + + /** + * 鑾峰彇浠诲姟鏁版嵁 + * @param type 1鏈畬鎴�2浠婂ぉ鏈畬鎴�3宸插畬鎴� + */ + function getChannels(type: 1 | 2 | 3) { + currentType.value = type + const params: TaskListParams = { + type, + offset: 0, + limit: 3 + } + getTaskList(params) + .then((res) => { + channels.value = res.data + }) + .catch((err) => { + console.error(err) + channels.value = [] + }) + } + + function moreChannelTasksBtn(channelNumber: number) { + const taskLength = channels.value[channelNumber].Tasks?.length ?? 0 + const params: TaskListParams = { + type: currentType.value, + channel: channelNumber, + offset: taskLength, + limit: 10 + } + getTaskList(params) + .then((res) => { + const existTasks = channels.value![channelNumber].Tasks ?? [] + channels.value[channelNumber] = res.data[channelNumber] ?? {} + channels.value[channelNumber].Tasks = channels.value[channelNumber].Tasks ?? [] + channels.value[channelNumber].Tasks = [...existTasks, ...channels.value[channelNumber].Tasks] + }) + .catch((err) => { + console.error(err) + }) + } + + function foldChannelTasksBtn(channelNumber: number) { + const tasks = channels.value[channelNumber].Tasks ?? [] + channels.value[channelNumber].Tasks = tasks.slice(0, 3) + } + + const moreBtnStatus = computed(() => { + return Object.entries(channels.value).reduce((pre, currentValue) => { + const channelNumber = +currentValue[0] + const channelData = currentValue[1] as TasksResponse + pre[channelNumber] = channelData.TaskCount > (channelData.Tasks?.length ?? 0) + return pre + }, {} as ChannelMoreBtnStatus) + }) + + /** 褰撳墠楂樹寒鐨勪换鍔� */ + const activeTask = ref<Task>() + function setActiveTask(task: Task) { + activeTask.value = task + } + + const requestParamsMap = ref<{ + [channel: number]: TaskListParams + }>({}) + function getParamsByChannel(channel: number) { + return ( + requestParamsMap.value[channel] ?? { + type: 1, + offset: 0, + limit: 3 + } + ) + } + + function setParamsByChannel(channel: number, params: TaskListParams) { + requestParamsMap.value[channel] = params + } + return { + channels, + getChannels, + moreBtnStatus, + activeTask, + setActiveTask, + requestParamsMap, + getParamsByChannel, + setParamsByChannel, + moreChannelTasksBtn, + foldChannelTasksBtn + } +}) diff --git a/src/views/dashboard/components/ChannelCollapse.vue b/src/views/dashboard/components/ChannelCollapse.vue index 693ab61..bde2dd9 100644 --- a/src/views/dashboard/components/ChannelCollapse.vue +++ b/src/views/dashboard/components/ChannelCollapse.vue @@ -2,35 +2,61 @@ <div class="channel-collapse"> <el-collapse v-model="activeChannel"> <el-collapse-item - v-for="(tasks, channelNumber) in channels" + v-for="(channel, channelNumber) in channels" :key="channelNumber" :title="CHANNEL_NAME_MAP[channelNumber] + ' 閫氶亾'" :name="String(channelNumber)" > - <TaskInfo v-for="task in tasks" :key="task.Procedure.ID" :task="task"></TaskInfo> + <TaskInfo + v-for="task in channel.Tasks" + :key="task.Procedure.ID" + :active="task.Procedure.ID === tasksStore.activeTask?.Procedure.ID" + :task="task" + style="margin-bottom: 16px" + @click="tasksStore.setActiveTask(task)" + ></TaskInfo> + + <div + v-show="channel.Tasks?.length && tasksStore.moreBtnStatus?.[channelNumber]" + class="btn more" + @click="tasksStore.moreChannelTasksBtn(channelNumber)" + > + 鏌ョ湅鏇村 + <el-icon style="margin-left: 6px"><ArrowDownBold /></el-icon> + </div> + + <div + v-show="channel.Tasks?.length && !tasksStore.moreBtnStatus?.[channelNumber]" + class="btn fold" + @click="tasksStore.foldChannelTasksBtn(channelNumber)" + > + 鏀惰捣 + <el-icon style="margin-left: 6px"><ArrowUpBold /></el-icon> + </div> </el-collapse-item> </el-collapse> </div> </template> <script setup lang="ts"> import { ref, watchEffect } from 'vue' -import type { Task } from '@/api/task' +import type { TasksGroupByChannel } from '@/api/task' import TaskInfo from './TaskInfo.vue' import { CHANNEL_NAME_MAP } from '@/common/constants' - -export interface Channel { - [channelNumber: number]: Task[] -} +import { useTasksStore } from '@/stores/tasks' +import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue' export interface ChannelCollapseProps { - channels: Channel + channels: TasksGroupByChannel } const props = defineProps<ChannelCollapseProps>() const activeChannel = ref<string[]>([]) +const tasksStore = useTasksStore() + watchEffect(() => { - const channelNumbers = Object.keys(props.channels).sort((a, b) => +a - +b) + // 閫氶亾鏁版嵁鍙樺寲鍚� + const channelNumbers = Object.keys(props?.channels ?? {}).sort((a, b) => +a - +b) activeChannel.value = [...channelNumbers] }) </script> @@ -66,4 +92,18 @@ font-size: 16px; font-weight: 600; } + +.btn { + width: 70%; + height: 50px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + font-size: 18px; + font-weight: 600; + cursor: pointer; + background: linear-gradient(to right, rgb(29, 96, 212) 0%, rgb(47, 122, 251), rgb(29, 96, 212) 100%); +} </style> diff --git a/src/views/dashboard/components/ProcessInfo.vue b/src/views/dashboard/components/CraftInfo.vue similarity index 92% rename from src/views/dashboard/components/ProcessInfo.vue rename to src/views/dashboard/components/CraftInfo.vue index a75e342..3ebac61 100644 --- a/src/views/dashboard/components/ProcessInfo.vue +++ b/src/views/dashboard/components/CraftInfo.vue @@ -1,5 +1,5 @@ <template> - <div class="process-info"> + <div class="craft-info"> <div class="item-l-bng"> <img src="~@/assets/images/process-model.png" /> </div> @@ -9,7 +9,7 @@ <div class="item-r-b">{{ process.name }}</div> </div> <div class="tip-r"> - <img src="~@/assets/images/process-tip.png" /> + <img src="~@/assets/images/process-tip.png" alt="" /> </div> <div class="tip-current">褰撳墠浣跨敤</div> <div class="btn"> @@ -18,7 +18,9 @@ </div> </template> <script setup lang="ts"> -import { computed, toRefs } from 'vue' +// 宸ヨ壓淇℃伅 +import { toRefs } from 'vue' + export interface ProcessInfoProps { process: process } @@ -33,7 +35,7 @@ .font_weight { font-weight: 600; } -.process-info { +.craft-info { width: calc(50% - 35px); height: 110px; padding: 23px 10px 10px; diff --git a/src/views/dashboard/components/PersonInfo.vue b/src/views/dashboard/components/PersonInfo.vue index d054728..95693e4 100644 --- a/src/views/dashboard/components/PersonInfo.vue +++ b/src/views/dashboard/components/PersonInfo.vue @@ -29,10 +29,12 @@ </div> </template> <script setup lang="ts"> -import type { UserFilled } from '@element-plus/icons-vue' -import { computed, toRefs } from 'vue' +import { StarFilled, UserFilled } from '@element-plus/icons-vue' +import { toRefs } from 'vue' +import type { Worker } from '@/api/task' + export interface PersonInfoProps { - person: person + person: Worker } const props = defineProps<PersonInfoProps>() diff --git a/src/views/dashboard/components/ProcessingInfo.vue b/src/views/dashboard/components/ProcessingInfo.vue new file mode 100644 index 0000000..6aaf8d9 --- /dev/null +++ b/src/views/dashboard/components/ProcessingInfo.vue @@ -0,0 +1,220 @@ +<template> + <div class="processing-info"> + <div class="step"> + <el-steps + v-if="task?.AllProcedures" + :active="task.CurrentProcedureIndex ?? 0" + finish-status="success" + class="steps" + > + <el-step v-for="(item, index) in task.AllProcedures" :key="index" icon="" :title="item"></el-step> + </el-steps> + </div> + <div class="details"> + <div class="row"> + <div class="col">宸ュ崟缂栧彿: {{ task?.Order?.workOrderId || '' }}</div> + <div class="col">璁㈠崟缂栧彿: {{ task?.Order?.orderId || '' }}</div> + </div> + + <div class="row"> + <div class="col">浜у搧鍚嶇О: {{ task?.Order?.productName || '--' }}</div> + <div class="col">鏁伴噺: {{ task?.Order?.amount || 0 }}{{ task?.Order?.unit }}</div> + </div> + <div class="row"> + <div class="col">浜よ揣鏃ユ湡: {{ task?.Order?.deliverDate || '--' }}</div> + <div class="col">宸ユ椂: {{ task?.Procedure?.procedure?.workHours || '--' }}</div> + </div> + <div class="row"> + <div class="col"> + 璧锋鏃堕棿: {{ formatDate(task?.Procedure?.startTime) }} + ~ + {{ formatDate(task?.Procedure?.endTime) }} + </div> + <div class="col">閫氶亾: {{ isNumber(task?.Channel) ? CHANNEL_NAME_MAP[task?.Channel] : '--' }}</div> + </div> + <div class="row"> + <div class="col">瀹㈡埛鍚嶇О: {{ task?.Order?.customer || '' }}</div> + <div class="col">鍙傛暟瑕佹眰: {{ task?.Order?.parameter || '' }}</div> + </div> + </div> + <div class="process"> + <div>瀹屾垚杩涘害:</div> + <div class="process-bar"> + <el-progress + define-back-color="#132f6e" + color="#00cc66" + text-color="#fff" + :text-inside="true" + :stroke-width="30" + :percentage="processingPercent" + ></el-progress> + </div> + </div> + </div> +</template> +<script setup lang="ts"> +// 鍔犲伐淇℃伅缁勪欢 +import type { Task } from '@/api/task' +import { computed, onUnmounted, toRefs, watch } from 'vue' +import { useDateFormat } from '@vueuse/core' +import { useRequest } from 'vue-hooks-plus' +import { getProductProgress } from '@/api' +import type { ProductProgressParams } from '@/api' +import { isNumber } from 'lodash-es' +import { CHANNEL_NAME_MAP } from '@/common/constants' + +const props = defineProps<{ + task?: Task +}>() + +const { task } = toRefs(props) +export interface Statistics { + totalNumber: number + finishNumber: number +} + +/** + * 璁$畻鐢熶骇杩涘害 + * @param statistics + * @return 杩涘害,0~100 + */ +function calculateProgress(statistics: Statistics): number { + if (!statistics) { + return 0 + } + + if (statistics.finishNumber === 0) { + return 0 + } + if (statistics.finishNumber === statistics.totalNumber) { + return 100 + } + + const result = Math.floor((statistics.finishNumber / statistics.totalNumber) * 100) + return result > 100 ? 100 : result +} + +/** + * 璁$畻瀹屾垚杩涘害, 浠诲姟鐘舵�佹湭鐢熶骇鍥哄畾涓� 0% 宸插畬鎴愬浐瀹氫负 100% 鐢熶骇涓垯浠巔lc鑾峰彇 + */ +const processingPercent = computed(() => { + if (task?.value?.Procedure?.Status === 1) { + return 0 + } + + if (task?.value?.Procedure?.Status === 3) { + return 100 + } + + if (task?.value?.Procedure?.Status === 2) { + return calculateProgress(plcResponse?.value?.data as Statistics) + } + + return 0 +}) + +/** + * 濡傛灉浠诲姟鐘舵�佹槸杩涜涓�, 鍒欒疆璇� plc 鍙栬繘搴� + */ +const { + data: plcResponse, + run: startPLCPolling, + cancel: cancelPLCPolling +} = useRequest( + () => + getProductProgress({ + channel: task?.value?.Channel, + procedureId: task?.value?.Procedure.ID + } as ProductProgressParams), + { + manual: true, + pollingInterval: 6000, + pollingWhenHidden: false + } +) + +/** + * 浠诲姟鐘舵�佹槸鐢熶骇涓垯杞plc鍙栫洰鏍囨暟鍜屽畬鎴愭暟璁$畻瀹屾垚杩涘害 + */ +watch( + () => task?.value, + () => { + cancelPLCPolling() + if (task?.value?.Procedure?.Status === 2) { + startPLCPolling() + } + } +) + +onUnmounted(() => { + cancelPLCPolling() +}) + +/** + * 鏍煎紡鍖栨椂闂存埑 + * @param timestamp 鍚庣杩旂殑10浣嶆椂闂存埑 + */ +function formatDate(timestamp?: number) { + if (!timestamp) { + return '--' + } + const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD', { locales: 'zh-cn' }) + return time.value +} +</script> +<style scoped lang="scss"> +$text-color: #d7d7ca; + +.step { + width: 100%; + height: 66px; + overflow-x: auto; + margin-top: -5px; + padding: 0 20px; + .steps { + height: 100%; + .el-step__icon { + width: 16px; + height: 16px; + } + .el-step__title { + line-height: 25px; + font-size: 14px; + } + .el-step__title.is-process { + color: #a8abb2; + } + } +} +.details { + font-size: 18px; + padding: 10px 20px; + color: $text-color; + .row { + width: 100%; + padding: 2px 0; + display: flex; + align-items: center; + } + .col { + width: 50%; + flex: 1; + } +} +.process { + font-size: 18px; + padding: 10px 20px; + color: $text-color; + display: flex; +} +.process-bar { + flex: 1; + margin-left: 20px; +} +:deep(.el-progress-bar__outer) { + border-radius: 8px; +} +:deep(.el-progress-bar__inner) { + border-radius: 8px; +} +</style> diff --git a/src/views/dashboard/components/TaskInfo.vue b/src/views/dashboard/components/TaskInfo.vue index e085d73..d0ba6e1 100644 --- a/src/views/dashboard/components/TaskInfo.vue +++ b/src/views/dashboard/components/TaskInfo.vue @@ -1,5 +1,5 @@ <template> - <div class="task-info" :class="{ selected }"> + <div class="task-info" :class="{ active }"> <div class="task-info-title" :class="{ @@ -31,13 +31,13 @@ export interface TaskInfoProps { task: Task - selected?: boolean + active?: boolean } const props = withDefaults(defineProps<TaskInfoProps>(), { - selected: false + active: false }) -const { task, selected } = toRefs(props) +const { task, active } = toRefs(props) const planTimeText = computed(() => { const format = (date: number) => { @@ -56,9 +56,12 @@ $status-ready: #13235a; $status-done: #13235a; $text-color: #d7d7d7; +$active-color: #00dfdf; .task-info { background-color: #6b83ff; border-radius: 4px; + overflow: initial; + cursor: pointer; } .task-info-title { height: 34px; @@ -94,4 +97,17 @@ flex: 1; } } +.active { + position: relative; + &:before { + content: ''; + width: 8px; + background-color: $active-color; + height: 100%; + position: absolute; + top: 0; + left: 0; + border-radius: 6px 0 0 6px; + } +} </style> diff --git a/src/views/dashboard/components/TaskTabs.vue b/src/views/dashboard/components/TaskTabs.vue index d2e3311..4eaf64f 100644 --- a/src/views/dashboard/components/TaskTabs.vue +++ b/src/views/dashboard/components/TaskTabs.vue @@ -1,32 +1,39 @@ <template> <div class="task-tabs"> <div - v-for="tabName in list" - :key="tabName" + v-for="tab in list" + :key="tab.value" class="task-tab-item triangle-tip" - :class="{ active: props.modelValue === tabName }" - @click="selectTab(tabName)" + :class="{ active: props.modelValue === tab.value }" + @click="selectTab(tab)" > - {{ tabName }} + {{ tab.label }} </div> </div> </template> <script setup lang="ts"> import { useVModel } from '@vueuse/core' +export interface LabelValue { + label: string + value: any +} + const props = defineProps<{ /** tab 鍒楄〃*/ - list: string[] + list: LabelValue[] /** 褰撳墠閫変腑鐨� tab*/ - modelValue?: string + modelValue?: any }>() const emit = defineEmits<{ 'update:modelValue': [tabName: string] + change: [tab: LabelValue] }>() const data = useVModel(props, 'modelValue', emit) -function selectTab(tabName: string) { - data.value = tabName +function selectTab(tab: LabelValue) { + data.value = tab.value + emit('change', tab) } </script> <style scoped lang="scss"> diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue deleted file mode 100644 index b927f26..0000000 --- a/src/views/dashboard/index.vue +++ /dev/null @@ -1,87 +0,0 @@ -<template> - <DashboardLayout> - <template #leftBlock1> - <TaskTabs v-model="activeTaskTab" style="margin-top: 20px" :list="taskTabsTitle"></TaskTabs> - </template> - <template #leftBlock2> - <ChannelCollapse :channels="channels"></ChannelCollapse> - </template> - <template #middleBlock1>鏍囬</template> - <template #middleBlock2 - >涓荤湅鏉� - <ProcessInfo :process="process"></ProcessInfo> - </template> - <template #middleBlock3>浠诲姟璇︽儏</template> - <template #middleBlock4 - >浜哄憳淇℃伅 - <PersonInfo :person="person"></PersonInfo> - </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, 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' -}) - -const taskList = ref<Task[]>() - -function getChannels() { - getTaskList(2) - .then((res) => { - taskList.value = res.data.Tasks - }) - .catch((err) => { - console.error(err) - taskList.value = [] - }) -} - -const channels = computed(() => { - return chain<Task>(taskList.value) - .groupBy((ele) => ele.Channel) - .value() -}) -const process = computed(() => { - return { name: '宸ヨ壓鍚嶇О', number: '111' } -}) -const person = computed(() => { - return { - workerName: '濮撳悕', - phone: '111' - } -}) -getChannels() -const taskTabsTitle = ['鏈畬鎴�', '浠婃棩浠诲姟', '宸插畬鎴�'] -const activeTaskTab = ref('鏈畬鎴�') - -watchEffect(() => { - // console.log(activeTaskTab?.value, 111111) -}) -</script> - -<style scoped> -.date-time { - width: 100%; - display: flex; - align-items: center; - justify-content: center; - padding-top: 12px; -} -</style> diff --git a/vite.config.ts b/vite.config.ts index 692b8dc..a45bed3 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -14,7 +14,7 @@ server: { proxy: { '/v1/': { - target: 'http://192.168.20.4:8003', + target: 'http://192.168.20.119:8003', ws: true, changeOrigin: true } -- Gitblit v1.8.0