From 58a5242ff58523f5d048da13fc543ffba5065414 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期三, 12 六月 2024 17:36:40 +0800 Subject: [PATCH] 原型制作 --- src/views/inspection/TaskTrack.vue | 2 src/views/management/ManagementView.vue | 4 + src/views/management/EvaluateSummary.vue | 18 ++++++ src/views/inspection/ProblemTrack.vue | 2 src/assets/styles/base.scss | 10 +- src/views/management/TaskStats.vue | 17 +++-- src/components/inspection/TaskNode.vue | 2 src/components/inspection/SubtaskItem.vue | 2 src/views/inspection/SelfInspection.vue | 2 src/components/inspection/TaskItem.vue | 81 +++++++++++++++----------- src/views/main/MonitorView.vue | 9 ++ src/views/inspection/JointEnforcement.vue | 2 src/components/inspection/SubtaskExamineItem.vue | 2 13 files changed, 98 insertions(+), 55 deletions(-) diff --git a/src/assets/styles/base.scss b/src/assets/styles/base.scss index 6227694..02d4233 100644 --- a/src/assets/styles/base.scss +++ b/src/assets/styles/base.scss @@ -1,13 +1,13 @@ /************************************** font size **************************************/ $fontsize: ( - s: var(--el-font-size-small), - b: var(--el-font-size-base), - m: var(--el-font-size-medium), - l: var(--el-font-size-large) + small: var(--el-font-size-small), + base: var(--el-font-size-base), + medium: var(--el-font-size-medium), + large: var(--el-font-size-large) ); @each $dName, $dValue in $fontsize { - .f-#{$dName} { + .font-#{$dName} { font-size: #{$dValue}; } } diff --git a/src/components/inspection/SubtaskExamineItem.vue b/src/components/inspection/SubtaskExamineItem.vue index 52c6b41..1a9c79f 100644 --- a/src/components/inspection/SubtaskExamineItem.vue +++ b/src/components/inspection/SubtaskExamineItem.vue @@ -1,5 +1,5 @@ <template> - <div :class="itemClass + ' p-v-4 f-s'"> + <div :class="itemClass + ' p-v-4 font-small'"> <div> <el-text class="w-200" size="default" truncated> {{ name }} diff --git a/src/components/inspection/SubtaskItem.vue b/src/components/inspection/SubtaskItem.vue index f7f0e75..91ee19f 100644 --- a/src/components/inspection/SubtaskItem.vue +++ b/src/components/inspection/SubtaskItem.vue @@ -1,5 +1,5 @@ <template> - <div :class="itemClass + ' p-v-4 f-s'"> + <div :class="itemClass + ' p-v-4 font-small'"> <div> <!-- <el-row justify="center"> --> <el-text class="w-200" size="default" truncated> diff --git a/src/components/inspection/TaskItem.vue b/src/components/inspection/TaskItem.vue index be50b89..ca54f28 100644 --- a/src/components/inspection/TaskItem.vue +++ b/src/components/inspection/TaskItem.vue @@ -1,42 +1,49 @@ <template> - <div class="demo-progress border-r-small f-b"> - <el-row> - <el-col span="8"> - <el-progress :width="100" type="dashboard" :percentage="(finish / total) * 100"> + <!-- <div class="demo-progress border-r-small"> --> + <el-row justify="space-evenly"> + <el-col span="12"> + <div class="v-center"> + <el-text>鎬婚噺</el-text> + <el-progress + :width="100" + type="circle" + status="warning" + :percentage="(finish / total) * 100" + > <template #default="{ percentage }"> <span class="percentage-value">{{ percentage }}%</span> - <span class="percentage-label">{{ finish + '/' + total }}</span> + <!-- <span class="percentage-label">{{ finish + '/' + total }}</span> --> </template> </el-progress> - </el-col> - <el-col span="16"> - <div>{{ name }}</div> - <!-- <div>{{ planTime }}</div> --> - <div>{{ userName }}</div> - <el-row style="gap: 10px"> - <div class="v-center" v-for="item in count" :key="item.sceneType"> - <el-progress - :width="50" - :stroke-width="3" - type="dashboard" - :percentage="(item.finish / item.total) * 100" - > - <template #default="{ percentage }"> - <span class="percentage-value-small">{{ percentage }}%</span> - </template> - </el-progress> - <div> - <el-text size="small">{{ item.sceneType }}</el-text> - <el-text size="small">{{ item.finish + '/' + item.total }}</el-text> - </div> - <div></div> - <!-- <div class="percentage-label-small">{{ item.sceneType }}</div> --> - <!-- <span class="percentage-label-small">{{ item.finish + '/' + item.total }} </span> --> - </div> - </el-row> - </el-col> - </el-row> - </div> + <el-text size="small">{{ finish + '/' + total }}</el-text> + </div> + </el-col> + <el-col span="12" class="flex-bottom"> + <!-- <div>{{ name }}</div> --> + <!-- <div>{{ planTime }}</div> --> + <!-- <div>{{ userName }}</div> --> + <el-row style="gap: 40px" justify="space-between"> + <div class="v-center" v-for="item in count" :key="item.sceneType"> + <el-text size="small">{{ item.sceneType }}</el-text> + <el-progress + :width="50" + :stroke-width="3" + type="circle" + status="warning" + :percentage="(item.finish / item.total) * 100" + > + <template #default="{ percentage }"> + <span class="percentage-value-small">{{ percentage }}%</span> + </template> + </el-progress> + <el-text size="small">{{ item.finish + '/' + item.total }}</el-text> + <!-- <div class="percentage-label-small">{{ item.sceneType }}</div> --> + <!-- <span class="percentage-label-small">{{ item.finish + '/' + item.total }} </span> --> + </div> + </el-row> + </el-col> + </el-row> + <!-- </div> --> </template> <script> @@ -85,6 +92,12 @@ border-radius: var(--el-border-radius-base); } +.flex-bottom { + display: flex; + flex-direction: column; + justify-content: end; +} + .percentage-value { display: block; margin-top: 10px; diff --git a/src/components/inspection/TaskNode.vue b/src/components/inspection/TaskNode.vue index 71fa853..4988c22 100644 --- a/src/components/inspection/TaskNode.vue +++ b/src/components/inspection/TaskNode.vue @@ -4,7 +4,7 @@ <div>{{ title }}</div> <el-text type="danger" size="small">{{ warning }}</el-text> </el-row> - <div class="border-r-small f-b"> + <div class="border-r-small font-base"> <div v-for="(item, i) in items" :key="title + i"> <slot :item="item" :index="i"></slot> </div> diff --git a/src/views/inspection/JointEnforcement.vue b/src/views/inspection/JointEnforcement.vue index f722836..3e39db6 100644 --- a/src/views/inspection/JointEnforcement.vue +++ b/src/views/inspection/JointEnforcement.vue @@ -1,6 +1,6 @@ <template> <div class="border-r-small" style="height: 200px"> - <div class="f-l">鑱斿悎鎵ф硶</div> + <div class="font-large">鑱斿悎鎵ф硶</div> </div> </template> diff --git a/src/views/inspection/ProblemTrack.vue b/src/views/inspection/ProblemTrack.vue index 2faea00..d0c1de1 100644 --- a/src/views/inspection/ProblemTrack.vue +++ b/src/views/inspection/ProblemTrack.vue @@ -1,6 +1,6 @@ <template> <el-card shadow="hover"> - <div class="f-l">宸℃煡闂璺熻釜</div> + <div class="font-large">宸℃煡闂璺熻釜</div> </el-card> </template> diff --git a/src/views/inspection/SelfInspection.vue b/src/views/inspection/SelfInspection.vue index 86e2f1a..d03f0a1 100644 --- a/src/views/inspection/SelfInspection.vue +++ b/src/views/inspection/SelfInspection.vue @@ -1,6 +1,6 @@ <template> <div class="border-r-small" style="height: 200px"> - <div class="f-l">搴旀�ヨ嚜宸℃煡</div> + <div class="font-large">搴旀�ヨ嚜宸℃煡</div> </div> </template> diff --git a/src/views/inspection/TaskTrack.vue b/src/views/inspection/TaskTrack.vue index e0e6cf2..87430fd 100644 --- a/src/views/inspection/TaskTrack.vue +++ b/src/views/inspection/TaskTrack.vue @@ -1,7 +1,7 @@ <template> <div> <el-row justify="space-evenly"> - <!-- <div class="f-l">鐜板満宸℃煡璺熻釜锛堢幇鍦轰汉鍛樺贰鏌ユ儏鍐靛疄鏃舵帉鎻★級</div> --> + <!-- <div class="font-large">鐜板満宸℃煡璺熻釜锛堢幇鍦轰汉鍛樺贰鏌ユ儏鍐靛疄鏃舵帉鎻★級</div> --> <!-- <SubtaskItem v-for="item in subtaskList" :key="item.guid" v-bind="item"> </SubtaskItem> --> <el-col :span="4"> <TaskNode diff --git a/src/views/main/MonitorView.vue b/src/views/main/MonitorView.vue index 4a88dca..3038b9a 100644 --- a/src/views/main/MonitorView.vue +++ b/src/views/main/MonitorView.vue @@ -1,6 +1,11 @@ <template> <el-row> - <el-col :span="16"> + <el-col :span="6" class="page-right"> + <el-scrollbar height="var(--fy-body-height)"> + <ManagementView></ManagementView> + </el-scrollbar> + </el-col> + <el-col :span="12"> <el-scrollbar class="page-left-top"> <VisualizationView></VisualizationView> </el-scrollbar> @@ -8,7 +13,7 @@ <InspectionView></InspectionView> </el-scrollbar> </el-col> - <el-col :span="8" class="page-right"> + <el-col :span="6" class="page-right"> <el-scrollbar height="var(--fy-body-height)"> <ManagementView></ManagementView> </el-scrollbar> diff --git a/src/views/management/EvaluateSummary.vue b/src/views/management/EvaluateSummary.vue new file mode 100644 index 0000000..4c75e2d --- /dev/null +++ b/src/views/management/EvaluateSummary.vue @@ -0,0 +1,18 @@ +<template> + <div class="border-r-small"> + <div class="font-large">椋庨櫓璇勪及</div> + <el-row justify="space-evenly"> + <el-statistic title="楂橀闄�" :value="10"> </el-statistic> + <el-statistic title="涓闄�" :value="10"> </el-statistic> + <el-statistic title="浣庨闄�" :value="10"> </el-statistic> + </el-row> + </div> +</template> + +<script setup> +/** + * 瀵瑰畬鎴愮殑浠诲姟杩涜璇勪及椋庨櫓锛屾樉绀洪珮椋庨櫓鍦烘櫙锛屾樉绀哄鏍哥殑鍦烘櫙鐨勬儏鍐� + */ +</script> + +<style scoped></style> diff --git a/src/views/management/ManagementView.vue b/src/views/management/ManagementView.vue index 9473a84..9b222cc 100644 --- a/src/views/management/ManagementView.vue +++ b/src/views/management/ManagementView.vue @@ -1,12 +1,14 @@ <template> - <el-row> 缁熻绠$悊 </el-row> + <!-- <el-row> 缁熻绠$悊 </el-row> --> <TaskStats></TaskStats> + <EvaluateSummary></EvaluateSummary> <TaskSummary></TaskSummary> </template> <script setup> import TaskStats from '@/views/management/TaskStats.vue' import TaskSummary from '@/views/management/TaskSummary.vue' +import EvaluateSummary from '@/views/management/EvaluateSummary.vue' </script> <style scoped></style> diff --git a/src/views/management/TaskStats.vue b/src/views/management/TaskStats.vue index 019e240..1cadd40 100644 --- a/src/views/management/TaskStats.vue +++ b/src/views/management/TaskStats.vue @@ -1,17 +1,22 @@ <template> <div class="border-r-small"> - <div class="f-l">鍚勭洃绠″尯鍘跨殑宸℃煡瀹屾垚鎯呭喌</div> - <el-row> - <TaskItem v-for="item in tasks" :key="item.guid" v-bind="item"></TaskItem> + <div class="font-large">宸℃煡閲�</div> + <el-row justify="space-evenly"> + <el-statistic title="浠婃棩瀹屾垚" :value="10"> </el-statistic> + <el-statistic title="鏈懆瀹屾垚" :value="10"> </el-statistic> </el-row> - <el-row> + <!-- <el-row> --> + <TaskItem v-for="item in tasks" :key="item.guid" v-bind="item"></TaskItem> + <!-- </el-row> --> + + <!-- <el-row> <el-col :span="12"> <SelfInspection></SelfInspection> </el-col> <el-col :span="12"> <JointEnforcement></JointEnforcement> </el-col> - </el-row> + </el-row> --> </div> </template> @@ -33,7 +38,7 @@ methods: {}, mounted() { let i = 0 - while (i < 3) { + while (i < 1) { this.tasks.push({ guid: 'SMuheEkjswioSn7A', name: '2024骞�6鏈堜笂娴峰競闈欏畨鍖哄贰鏌ヤ换鍔�', -- Gitblit v1.9.3