From 8be1cd495fdcbc3a3599e57b7d21c4c186a018ed Mon Sep 17 00:00:00 2001 From: songshankun <songshankun@foxmail.com> Date: 星期四, 02 十一月 2023 16:56:11 +0800 Subject: [PATCH] Merge branch 'dev' into songshankun/refactor-new-style --- src/views/dashboard/components/InputMaterialsList.vue | 82 ++++++++++ src/views/dashboard/components/InputOutMaterialInfo.vue | 131 ++++++++++++++++ src/views/dashboard/components/KnowledgeInfo.vue | 111 +++---------- src/views/dashboard/index.vue | 17 + src/api/task.ts | 12 + src/views/dashboard/components/OutputMaterialsList.vue | 113 ++++++++++++++ 6 files changed, 381 insertions(+), 85 deletions(-) diff --git a/src/api/task.ts b/src/api/task.ts index 521f229..bb0f969 100644 --- a/src/api/task.ts +++ b/src/api/task.ts @@ -47,8 +47,8 @@ startTime: number endTime: number workHours: string - inputMaterials: string - outputMaterials: string + inputMaterials: inputMaterial[] + outputMaterials: inputMaterial[] workers: Worker[] allProcedureNames: string[] channel: number @@ -62,6 +62,14 @@ CurrentProcedureIndex: number CanStarted: boolean } +export interface inputMaterial { + materialId: string + materialName: string + amount: number + unit: string + background: string + date: string +} export interface Worker { workerId: string diff --git a/src/views/dashboard/components/InputMaterialsList.vue b/src/views/dashboard/components/InputMaterialsList.vue new file mode 100644 index 0000000..1cc551a --- /dev/null +++ b/src/views/dashboard/components/InputMaterialsList.vue @@ -0,0 +1,82 @@ +<template> + <div class="input-materials-list"> + <div class="materials-t"> + <div class="materials-t-l">杈撳叆璧勬簮</div> + <BigButton class="btn" bg-color="rgba(255, 11, 142, 1)">鐗╂枡鍛煎彨</BigButton> + </div> + <el-scrollbar always class="scroller"> + <div class="materials-b"> + <div v-for="item in inputMaterials" :key="item.materialId"> + <InputOutMaterialInfo :item="item" :background="item.background"></InputOutMaterialInfo> + </div> + </div> + </el-scrollbar> + </div> +</template> +<script setup lang="ts"> +import InputOutMaterialInfo from '@/views/dashboard/components/InputOutMaterialInfo.vue' +import BigButton from '@/views/dashboard/components/BigButton.vue' +import { toRefs } from 'vue' +const inputMaterials = [ + { + materialId: '1111', + materialName: '杈撳叆鍚嶇О', + amount: 10, + unit: '涓�', + date: 10 + }, + { + materialId: '2222222222222222', + materialName: '杈撳叆鍚嶇О2', + amount: 20, + unit: '涓�', + background: '#33ccff' + } +] +</script> + +<style scoped lang="scss"> +// #ff0000 +$status-default: rgba(255, 11, 142, 1); +$status-running: #f76c0f; +$status-ready: #13235a; +$status-done: #0059ffd0; +$status-star: yellow; + +.input-materials-list { + width: 50%; + height: 100%; + padding: 0px 0 5px; + color: #fff; + overflow: hidden; + float: left; + border-right: 1px solid #efefef; + box-sizing: border-box; + .materials-t { + width: 100%; + height: 35px; + line-height: 35px; + margin-bottom: 15px; + .materials-t-l { + float: left; + font-weight: bold; + font-size: 16px; + } + .btn { + width: 90px; + float: right; + font-size: 14px; + height: 35px; + line-height: 35px; + margin-right: 10px; + } + } + + .materials-b { + width: 100%; + height: auto; + overflow-y: auto; + padding-right: 5px; + } +} +</style> diff --git a/src/views/dashboard/components/InputOutMaterialInfo.vue b/src/views/dashboard/components/InputOutMaterialInfo.vue new file mode 100644 index 0000000..a178b56 --- /dev/null +++ b/src/views/dashboard/components/InputOutMaterialInfo.vue @@ -0,0 +1,131 @@ +<template> + <div class="input-out-material-info"> + <div class="card-t"> + <div class="card-t-t card_drop"> + <el-popover :width="200" placement="top-start" trigger="click"> + <template #reference> + {{ item.materialId }} + </template> + {{ item.materialId }} + </el-popover> + </div> + <div class="card-t-b"> + 璁惧12 + <el-icon class="right-arrow"> + <Right /> + </el-icon> + 璁惧13 + </div> + </div> + <div class="card-b"> + <div class="card_drop card-b-l"> + <el-popover :width="200" placement="top-start" trigger="click"> + <template #reference> + {{ item.materialName }} + </template> + {{ item.materialName }} + </el-popover> + </div> + <div class="card-b-r"> + <el-popover v-if="item.date" popper-class="card-info" :width="110" placement="top" trigger="click"> + <template #reference> {{ item.amount }} {{ item.unit }} </template> + 棰勮{{ item.date }}鍒嗛挓閫佽揪 + </el-popover> + <div v-else>{{ item.amount }} {{ item.unit }}</div> + </div> + </div> + </div> +</template> +<script setup lang="ts"> +import type { inputMaterial } from '@/api/task' +import { Right } from '@element-plus/icons-vue' +import { toRefs } from 'vue' + +export interface InputOutMaterialInfoProps { + item: inputMaterial + background?: string +} + +const props = withDefaults(defineProps<InputOutMaterialInfoProps>(), { + background: '#ffcc00' +}) +const { item, background } = toRefs(props) +</script> + +<style scoped lang="scss"> +$status-default: #13235a; +$status-running: #f76c0f; +$status-ready: #13235a; +$status-done: #ffcc00; + +.input-out-material-info { + width: calc(50% - 10px); + height: auto; + border-radius: 4px; + color: #333; + overflow: hidden; + float: left; + font-size: 15px; + background: #fff; + margin-right: 10px; + margin-bottom: 10px; + position: relative; + + .card_drop { + width: 100%; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + cursor: pointer; + } + .card-t { + width: 100%; + height: auto; + line-height: 18px; + font-size: 12px; + color: #333; + padding: 3px 5px; + // background: $status-done; + background-color: v-bind(background); + text-align: left; + .card-t-t { + width: 100%; + font-size: 16px; + } + } + .card-b { + width: 100%; + height: 36px; + line-height: 20px; + font-size: 14px; + padding: 8px 5px; + .card-b-l { + width: calc(100% - 70px); + float: left; + font-size: 13px; + } + .card-b-r { + width: 70px; + float: right; + text-align: right; + } + } +} +</style> +<style lang="scss"> +.el-popover.el-popper.card-info { + min-width: 110px; + background: red !important; + font-size: 12px; + color: #fff; + border: 0px; + border-radius: 10px; + // height:20px!important; + line-height: 8px !important; + .el-popper__arrow::before { + background: red !important; + border-color: red; + } +} +</style> diff --git a/src/views/dashboard/components/KnowledgeInfo.vue b/src/views/dashboard/components/KnowledgeInfo.vue index 1768889..5a30089 100644 --- a/src/views/dashboard/components/KnowledgeInfo.vue +++ b/src/views/dashboard/components/KnowledgeInfo.vue @@ -1,94 +1,43 @@ <template> <div class="knowledge-info"> - <svg width="100%" height="100%"> - <text - class="text-item" - x="60" - y="80" - style=" - fill: rgb(211 211 211); - font-weight: bold; - padding: 5px; - font-size: 14px; - display: inline-block; - border-radius: 8px; - cursor: pointer; - postion: absolute; - left: 200; - top: 40; - " - > - 璇姤璀� - </text> - <text - class="text-item" - x="50" - y="170" - text-anchor="middle" - style="padding: 5px; font-size: 14px; display: inline-block; border-radius: 8px; fill: rgb(211 211 211)" - > - 绠¤矾鏁村姩 - </text> - <text - class="text-item" - x="245" - y="250" - text-anchor="middle" - font-size="20px" - style="padding: 5px; font-size: 14px; display: inline-block; border-radius: 8px; fill: rgb(211 211 211)" - > - 鍐峰嵈娌瑰害楂� - </text> - <text - x="50" - y="270" - class="text-item" - style="padding: 5px; font-size: 14px; display: inline-block; border-radius: 8px; fill: rgb(211 211 211)" - text-anchor="middle" - > - 娓呮磥搴﹁秴宸� - </text> - <text - x="220" - class="text-item" - y="60" - text-anchor="middle" - font-size="20px" - style="padding: 5px; font-size: 14px; display: inline-block; border-radius: 8px; fill: rgb(211 211 211)" - > - 娓呮磥搴﹁秴宸� - </text> - <text - x="280" - class="text-item" - y="110" - text-anchor="middle" - font-size="20px" - style="padding: 5px; font-size: 14px; display: inline-block; border-radius: 8px" - > - 淇濇姢鍣ㄦ姤璀� - </text> - <image xlink:href="~@/assets/images/voice.png" x="105" y="100" width="110" height="110" /> - </svg> + <div class="text-item" style="left: 20px; top: 80px">璇姤璀�</div> + <div class="text-item" style="left: 0px; top: 190px">绠¤矾鏁村姩</div> + <div class="text-item" style="left: 215px; top: 250px">鍐峰嵈娌瑰害楂�</div> + <div class="text-item" style="left: 160px; top: 20px">娓呮磥搴﹁秴宸�</div> + <div class="text-item" style="left: 30px; top: 280px">娓呮磥搴﹁秴宸�</div> + <div class="text-item" style="left: 265px; top: 120px">淇濇姢鍣ㄦ姤璀�</div> + <img src="~@/assets/images/voice.png" /> </div> </template> -<script setup lang="ts"> -import { toRefs } from 'vue' -</script> +<script setup lang="ts"></script> <style scoped lang="scss"> +$status-ready: #024fdce8; .knowledge-info { - height: calc(100% - 90px - 32px); - margin-top: 10px; + height: calc(100% - 100px - 32px); + width: 400px; + max-width: 430px; + min-height: 330px; + margin: 0 auto; + margin-top: 30px; + position: relative; + img { + width: 130px; + height: 130px; + position: absolute; + top: 100px; + left: 120px; + } .text-item { - width: 100px; - padding: 5px; + color: #e9e7e7; + cursor: pointer; + font-weight: bold; + padding: 6px 15px; font-size: 14px; display: inline-block; - border-radius: 8px; - fill: #fff; - color: #fff; - cursor: pointer; + border-radius: 10px; + position: absolute; + background: $status-ready; } } </style> diff --git a/src/views/dashboard/components/OutputMaterialsList.vue b/src/views/dashboard/components/OutputMaterialsList.vue new file mode 100644 index 0000000..092af0e --- /dev/null +++ b/src/views/dashboard/components/OutputMaterialsList.vue @@ -0,0 +1,113 @@ +<template> + <div class="output-materials-list"> + <div class="materials-t"> + <div class="materials-t-l">杈撳嚭璧勬簮</div> + <BigButton class="btn" bg-color="#ff0000">杩愯緭鍛煎彨</BigButton> + </div> + <el-scrollbar always class="scroller"> + <div class="materials-b"> + <div v-for="item in outputMaterials" :key="item.materialId"> + <InputOutMaterialInfo :item="item" :background="item.background"></InputOutMaterialInfo> + </div> + </div> + </el-scrollbar> + </div> +</template> +<script setup lang="ts"> +import InputOutMaterialInfo from '@/views/dashboard/components/InputOutMaterialInfo.vue' +import BigButton from '@/views/dashboard/components/BigButton.vue' +import { toRefs } from 'vue' +const outputMaterials = [ + { + materialId: '1111', + materialName: '杈撳叆鍚嶇О', + amount: 10, + unit: '涓�' + }, + { + materialId: '2222222222222222', + materialName: '杈撳叆鍚嶇О2', + amount: 20, + unit: '涓�', + background: '#33ccff' + }, + { + materialId: '1111', + materialName: '杈撳叆鍚嶇О', + amount: 10, + unit: '涓�' + }, + { + materialId: '2222222222222222', + materialName: '杈撳叆鍚嶇О2', + amount: 20, + unit: '涓�', + background: '#33ccff' + }, + { + materialId: '1111', + materialName: '杈撳叆鍚嶇О', + amount: 10, + unit: '涓�' + }, + { + materialId: '2222222222222222', + materialName: '杈撳叆鍚嶇О2', + amount: 20, + unit: '涓�', + background: '#33ccff' + }, + { + materialId: '2222222222222222', + materialName: '杈撳叆鍚嶇О2', + amount: 20, + unit: '涓�', + background: '#33ccff' + } +] +</script> + +<style scoped lang="scss"> +// #ff0000 +$status-default: rgba(255, 11, 142, 1); +$status-running: #f76c0f; +$status-ready: #13235a; +$status-done: #0059ffd0; +$status-star: yellow; + +.output-materials-list { + width: 50%; + height: 100%; + padding: 0px 0 5px 10px; + color: #fff; + overflow: hidden; + float: left; + box-sizing: border-box; + .materials-t { + width: 100%; + height: 35px; + line-height: 35px; + margin-bottom: 15px; + .materials-t-l { + float: left; + font-weight: bold; + font-size: 16px; + } + .btn { + width: 90px; + float: right; + font-size: 14px; + height: 35px; + line-height: 35px; + margin-right: 10px; + } + } + + .materials-b { + width: 100%; + height: calc(100% - 50px); + overflow-y: auto; + padding-right: 5px; + } +} +</style> diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index c733a51..51c7ff8 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -17,7 +17,10 @@ <el-tab-pane label="宸ヨ壓淇℃伅" name="宸ヨ壓淇℃伅"> <ProcessInfo :process="process"></ProcessInfo> </el-tab-pane> - <el-tab-pane label="鐗╂枡娓呭崟" name="鐗╂枡娓呭崟">Role</el-tab-pane> + <el-tab-pane label="鐗╂枡娓呭崟" name="鐗╂枡娓呭崟"> + <InputMaterialsList></InputMaterialsList> + <OutputMaterialsList></OutputMaterialsList> + </el-tab-pane> </el-tabs> </template> <template #middleBlock3> @@ -60,6 +63,8 @@ import DeviceStatusInfo from '@/views/dashboard/components/DeviceStatusInfo.vue' import DeviceNumberInfo from '@/views/dashboard/components/DeviceNumberInfo.vue' import KnowledgeInfo from '@/views/dashboard/components/KnowledgeInfo.vue' +import InputMaterialsList from '@/views/dashboard/components/InputMaterialsList.vue' +import OutputMaterialsList from '@/views/dashboard/components/OutputMaterialsList.vue' import BigButton from '@/views/dashboard/components/BigButton.vue' import type { LabelValue } from '@/views/dashboard/components/TaskTabs.vue' import TaskTabs from '@/views/dashboard/components/TaskTabs.vue' @@ -146,7 +151,15 @@ justify-content: center; padding-top: 12px; } - +:deep(.el-tabs) { + height: 100%; +} +:deep(.el-tab-pane) { + height: 100%; +} +:deep(.el-tabs__content) { + height: calc(100% - 56px); +} :deep(.el-tabs__item) { color: #fff; font-size: 20px; -- Gitblit v1.8.0