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