输入 ，输出资源的组件开发

haoxuan

2023-11-02 7f75dd84169320720d72434247508386ca9c4f15

输入 ，输出资源的组件开发

 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

 src/views/dashboard/components/InputMaterialsList.vue

New file
@@ -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>

 src/views/dashboard/components/InputOutMaterialInfo.vue

New file
@@ -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>

 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 {

 src/views/dashboard/components/OutputMaterialsList.vue

New file
@@ -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>

 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;