feat:创建新分支

charles

2024-04-29 b95cf940af8e01e4eca30b2599b029c2f645bd1e

 src/views/dashboard/components/TaskInfo.vue

@@ -1,5 +1,5 @@
<template>
  <div class="task-info" :class="{ selected }">
  <div class="task-info" :class="{ active }">
    <div
      class="task-info-title"
      :class="{
@@ -12,14 +12,25 @@
    </div>
    <div class="task-info-content">
      <div class="row">
        <div class="col">工单号: {{ task.Order.workOrderId }}</div>
        <div class="col">生产数量：{{ task.Order.amount || 0 }}{{ task.Order.unit }}</div>
        <div class="col">
          工单号:
          <span>{{ task.Order.workOrderId }}</span>
        </div>
        <div class="col">
          生产数量: <span>{{ task.Order.amount || 0 }}{{ task.Order.unit }}</span>
        </div>
      </div>
      <div class="row">
        <div class="col">当前任务: {{ task.Procedure.procedure.procedureName || '' }}</div>
        <div class="col">产品名称：{{ task.Order.productName || '' }}</div>
        <div class="col">
          当前任务:
          <span>{{ task.Procedure?.procedure?.procedureName || '' }}</span>
        </div>
        <div class="col">
          产品名称:
          <span>{{ task.Order.productName || '' }}</span>
        </div>
      </div>
      <div class="row">计划时间: {{ planTimeText }}</div>
      <div class="row">计划时间:{{ planTimeText }}</div>
    </div>
  </div>
</template>
@@ -31,17 +42,17 @@

export interface TaskInfoProps {
  task: Task
  selected?: boolean
  active?: boolean
}

const props = withDefaults(defineProps<TaskInfoProps>(), {
  selected: false
  active: false
})
const { task, selected } = toRefs(props)
const { task, active } = toRefs(props)

const planTimeText = computed(() => {
  const format = (date: number) => {
    return useDateFormat(date, 'YYYY-MM-DD', { locales: 'zh-cn' })
    return useDateFormat(date, 'YYYY-MM-DD HH:mm:ss', { locales: 'zh-cn' })
  }

  const startTime = task.value.Procedure?.startTime
@@ -56,9 +67,12 @@
$status-ready: #13235a;
$status-done: #13235a;
$text-color: #d7d7d7;
$active-color: #00dfdf;
.task-info {
  background-color: #6b83ff;
  border-radius: 4px;
  overflow: initial;
  cursor: pointer;
}
.task-info-title {
  height: 34px;
@@ -80,8 +94,8 @@
  background-color: $status-done;
}
.task-info-content {
  font-size: 13px;
  padding: 10px 20px;
  font-size: 12px;
  padding: 10px 15px;
  color: $text-color;
  .row {
    width: 100%;
@@ -92,6 +106,27 @@
  .col {
    width: 50%;
    flex: 1;
    span {
      width: calc(100% - 60px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      vertical-align: middle;
    }
  }
}
.active {
  position: relative;
  &:before {
    content: '';
    width: 8px;
    background-color: $active-color;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px 0 0 6px;
  }
}
</style>