dosb-vue/src/views/billet/operator/index.vue

<template>
  <div
    class="operator-app-container"
    :style="{
      '--op-border-color': '#d9d9d9',
      '--op-text-color-fff': '#fff',
    }"
  >
    <a-layout class="operator-large-layout">
      <a-layout-header class="operator-header cover">
        <div class="shift-wrapper"> {{ shiftText }} </div>
        <div class="clock-wrapper">
          <div class="date">{{ clockObj.date }}</div>
          <div class="week">{{ clockObj.week }}</div>
          <div class="time">{{ clockObj.time }}</div>
        </div>
      </a-layout-header>
      <a-layout-content class="operator-content">
        <head-top @shiftChange="curShiftChange" ref="headTopRef" @lengthChange="(v) => ((lengthList = v), (lengthorgList = cloneDeep(v)))" />
        <div class="operator-content-wrapper flex">
          <div class="operator-content-left">
            <heat-list
              v-if="curShiftInfo.shift != undefined && curShiftInfo.shiftGroup != undefined"
              :ccmNo="ccmNo"
              :carRef="carRef"
              :lengthList="lengthList"
              :lengthOrgList="lengthorgList"
              @changeLengthSuccess="() => headTopRef && headTopRef.reload()"
              :curShiftInfo="curShiftInfo"
            />
          </div>
          <div class="operator-content-right">
            <car :ccmNo="ccmNo" ref="carRef" />
          </div>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>
<script setup lang="ts" name="OperatorRoom">
  import { onMounted, onUnmounted, ref } from 'vue';
  import { getDateTimeWeek } from '/@/utils/dateUtil';
  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
  import headTop from './components/headTop.vue';
  import car from './components/car.vue';
  import heatList from './components/heatList.vue';
  import { getMachineNum } from '../hotDelivery/common.data';
  import { cloneDeep } from 'lodash-es';

  const ccmNo = getMachineNum();

  const carRef = ref();
  const headTopRef = ref();
  // 班次信息
  const shiftText = ref('');
  const curShiftInfo = ref({
    shift: undefined,
    shiftGroup: undefined,
  });
  // 时钟
  const clockObj = ref({
    date: '',
    week: '',
    time: '',
  });

  const lengthList = ref({
    '1': undefined,
    '2': undefined,
    '3': undefined,
    '4': undefined,
    '5': undefined,
    '6': undefined,
    '7': undefined,
    '8': undefined,
  });

  const lengthorgList = ref({
    '1': undefined,
    '2': undefined,
    '3': undefined,
    '4': undefined,
    '5': undefined,
    '6': undefined,
    '7': undefined,
    '8': undefined,
  });
  const clock = () => {
    try {
      const dateStr = getDateTimeWeek().split(' ');
      clockObj.value = {
        date: dateStr[0],
        time: dateStr[1],
        week: dateStr[2],
      };

      start();
    } catch (error) {}
  };

  const { start, stop } = useTimeoutFn(clock, 1000);

  // 获取班次信息
  const curShiftChange = (v, shiftInfo) => {
    shiftText.value = v;
    curShiftInfo.value = shiftInfo;
  };

  onMounted(() => {
    start();
  });

  onUnmounted(() => {
    stop();
  });
</script>
<style lang="less" scoped>
  @import '/@/assets/less/font.less';
  @import './index.less';
</style>