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