Merge branch 'dev' of http://192.168.5.5:10010/r/web/bulletin-board-style1 ...

haoxuan

2023-10-31 65494b72a7272842a3c1c07fda8b2e1a9eefeac1

Merge branch 'dev' of http://192.168.5.5:10010/r/web/bulletin-board-style1 into wn

 src/components/DashboardLayout.vue

@@ -38,12 +38,12 @@
      <div class="header-block padding-4">
        <slot name="rightBlock1"></slot>
      </div>
      <div class="base-block padding-4">
      <div class="top-block padding-4">
        <div class="card">
          <slot name="rightBlock2"></slot>
        </div>
      </div>
      <div class="base-block padding-4">
      <div class="bottom-block padding-4">
        <div class="card">
          <slot name="rightBlock3"></slot>
        </div>

 src/views/dashboard/components/BigButton.vue

New file
@@ -0,0 +1,51 @@
<template>
  <button class="big-button user-style" :class="{ disabled: props.disabled }" :disabled="props.disabled">
    <slot></slot>
  </button>
</template>
<script setup lang="ts">
import { toRefs } from 'vue'

const props = withDefaults(
  defineProps<{
    bgColor?: string
    color?: string
    disabled?: boolean
  }>(),
  {
    bgColor: '#4efefa',
    color: '#fff',
    disabled: false
  }
)

const { bgColor, color } = toRefs(props)
</script>
<style scoped lang="scss">
.big-button {
  width: 180px;
  background-color: #4efefa;
  color: #fff;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 26px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  outline: none;
  margin: 0;
  padding: 0;
  border: none;
}
.user-style {
  color: v-bind(color);
  background-color: v-bind(bgColor);
}
.big-button.disabled {
  cursor: not-allowed;
  background-color: #afafaf;
  color: #868686;
}
</style>

 src/views/dashboard/components/SubTitle.vue

New file
@@ -0,0 +1,26 @@
<template>
  <div class="sub-title">
    <slot></slot>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.sub-title {
  position: relative;
  padding-left: 20px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  height: 32px;
  &:before {
    content: '';
    background-color: #00dfdf;
    width: 5px;
    height: 24px;
    position: absolute;
    margin-top: 4px;
    top: 0;
    left: 0;
  }
}
</style>

 src/views/dashboard/components/TaskControl.vue

New file
@@ -0,0 +1,118 @@
<template>
  <div class="task-control">
    <div class="task-info">
      <div class="task-info-item">
        <div class="task-info-title">计划开始时间</div>
        <div class="task-info-content">{{ formatDate(task?.Procedure?.startTime) }}</div>
      </div>
      <div class="task-info-item">
        <div class="task-info-title">实际开始时间</div>
        <div class="task-info-content">{{ formatDate(task?.Procedure?.realStartTime) }}</div>
      </div>

      <div class="task-info-item">
        <div class="task-info-title">实际结束时间</div>
        <div class="task-info-content">{{ formatDate(task?.Procedure?.realEndTime) }}</div>
      </div>
    </div>

    <div class="produce-btn">
      <BigButton v-if="task?.Procedure.Status === 1" class="btn" :disabled="!task?.CanStarted" @click="startProduce">
        开始生产
      </BigButton>
      <template v-if="task?.Procedure.Status === 2 || task?.Procedure.Status === 3">
        <BigButton class="btn" bg-color="#ff9933">打印</BigButton>
        <BigButton class="btn" bg-color="#00cc33">报工</BigButton>
        <BigButton class="btn" bg-color="#ff0000">完成</BigButton>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { Task } from '@/api/task'
import { toRefs } from 'vue'
import BigButton from '@/views/dashboard/components/BigButton.vue'
import { useDateFormat } from '@vueuse/core'

const props = defineProps<{
  task?: Task
}>()
const { task } = toRefs(props)
/**
 * 开始生产
 */
function startProduce() {
  // TODO:
  // console.log(1)
}

/**
 * 格式化时间戳
 * @param timestamp 后端返的10位时间戳
 */
function formatDate(timestamp?: number) {
  if (!timestamp) {
    return '--'
  }
  const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD', { locales: 'zh-cn' })
  return time.value
}
</script>
<style scoped lang="scss">
$title-text-color: #9599af;
$content-text-color: #d7d7d7;

.task-control {
  display: flex;
  align-items: start;
  width: 100%;
}
.task-info,
.produce-btn {
  width: 50%;
  flex: 1;
  height: 100%;
}
.produce-btn {
  padding: 16px 0;
  & > .btn {
    margin-bottom: 14px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.task-info-item {
  padding: 10px 20px;
  margin-bottom: 6px;
}
.task-info-title {
  font-size: 18px;
  color: $title-text-color;
}
.task-info-content {
  font-size: 19px;
  color: $content-text-color;
  font-weight: 600;
  margin-top: 12px;
}
.produce-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.start-btn {
  background-color: #4efefa;
}
.print-btn {
  background-color: #ff9933;
}
.report-btn {
  background-color: #00cc33;
}
.finish-btn {
  background-color: #ff0000;
}
</style>

 src/views/dashboard/index.vue

@@ -18,9 +18,14 @@
        <el-tab-pane label="物料清单" name="物料清单">Role</el-tab-pane>
      </el-tabs>
    </template>
    <template #middleBlock3> 任务详情 </template>
    <template #middleBlock4
      >人员信息
    <template #middleBlock3>
      <SubTitle>任务详情</SubTitle>
      <div class="task-detail">
        <TaskControl :task="activeTask"></TaskControl>
      </div>
    </template>
    <template #middleBlock4>
      <SubTitle>人员信息</SubTitle>
      <PersonInfo :person="person"></PersonInfo>
    </template>
    <template #rightBlock1>
@@ -29,7 +34,9 @@
      </div>
    </template>
    <template #rightBlock2>状态面板</template>
    <template #rightBlock3>知识库</template>
    <template #rightBlock3>
      <SubTitle>知识库</SubTitle>
    </template>
  </DashboardLayout>
</template>
<script setup lang="ts">
@@ -44,6 +51,8 @@
import { useTasksStore } from '@/stores/tasks'
import { storeToRefs } from 'pinia'
import ProcessingInfo from '@/views/dashboard/components/ProcessingInfo.vue'
import TaskControl from '@/views/dashboard/components/TaskControl.vue'
import SubTitle from '@/views/dashboard/components/SubTitle.vue'

defineOptions({
  name: 'DashboardView'