From 7f75dd84169320720d72434247508386ca9c4f15 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期四, 02 十一月 2023 16:45:26 +0800
Subject: [PATCH] 输入 ，输出资源的组件开发
---
src/views/dashboard/components/InputMaterialsList.vue | 82 +++++++++++
src/views/dashboard/components/InputOutMaterialInfo.vue | 131 ++++++++++++++++++
src/views/dashboard/components/KnowledgeInfo.vue | 6
src/views/dashboard/index.vue | 17 ++
src/api/task.ts | 12 +
src/views/dashboard/components/OutputMaterialsList.vue | 113 ++++++++++++++++
6 files changed, 356 insertions(+), 5 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 89f387f..5a30089 100644
--- a/src/views/dashboard/components/KnowledgeInfo.vue
+++ b/src/views/dashboard/components/KnowledgeInfo.vue
@@ -5,7 +5,7 @@
<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="right: 0px; top: 120px">淇濇姢鍣ㄦ姤璀�</div>
+ <div class="text-item" style="left: 265px; top: 120px">淇濇姢鍣ㄦ姤璀�</div>
<img src="~@/assets/images/voice.png" />
</div>
</template>
@@ -15,6 +15,10 @@
$status-ready: #024fdce8;
.knowledge-info {
height: calc(100% - 100px - 32px);
+ width: 400px;
+ max-width: 430px;
+ min-height: 330px;
+ margin: 0 auto;
margin-top: 30px;
position: relative;
img {
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 fd0f348..09b7532 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'
@@ -137,7 +142,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