|
@@ -0,0 +1,189 @@
|
|
|
+<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="change-shift print-billet-card">
|
|
|
+ <a-button
|
|
|
+ type="primary"
|
|
|
+ style="margin-right: 20px"
|
|
|
+ size="large"
|
|
|
+ @click="() => openPrintOriginalRecordsModal(true, { ccmNo, queryType: '1', shiftText, curShiftInfo })"
|
|
|
+ >
|
|
|
+ 原始记录
|
|
|
+ </a-button>
|
|
|
+ <a-button type="primary" size="large" @click="() => openModal(true, { ccmNo, queryType: '1', shiftText, curShiftInfo })"> 送样卡 </a-button>
|
|
|
+ </div>
|
|
|
+ <div class="shift-wrapper"> {{ shiftText }} </div>
|
|
|
+ <div class="change-shift">
|
|
|
+ <a-button type="primary" size="large" danger @click="() => (openJiaobanModal = true)"> 交班 </a-button>
|
|
|
+ </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 @onShiftChange="curShiftChange" ref="headTopRef" @lengthChange="(v, auto) => ((lengthList = v), (cuttolength = auto))" />
|
|
|
+ <div class="operator-content-wrapper flex">
|
|
|
+ <div class="operator-content-left">
|
|
|
+ <heat-list
|
|
|
+ ref="heatListRef"
|
|
|
+ v-if="curShiftInfo.shift && curShiftInfo.shiftGroup"
|
|
|
+ :ccmNo="ccmNo"
|
|
|
+ :carRef="carRef"
|
|
|
+ :lengthList="lengthList"
|
|
|
+ :cuttolength="cuttolength"
|
|
|
+ @changeLengthSuccess="() => headTopRef && headTopRef.reload()"
|
|
|
+ :curShiftInfo="curShiftInfo"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="operator-content-right">
|
|
|
+ <car :ccmNo="ccmNo" ref="carRef" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-layout-content>
|
|
|
+ </a-layout>
|
|
|
+
|
|
|
+ <!-- 打印钢坯送样卡 -->
|
|
|
+ <print-billet-sample-card @register="registerPrintModal" />
|
|
|
+ <!-- 打印原始数据 -->
|
|
|
+ <printOriginalRecords @register="registerPrintOriginalRecordsModal" />
|
|
|
+ <!-- 交班 -->
|
|
|
+ <a-modal
|
|
|
+ v-model:open="openJiaobanModal"
|
|
|
+ title="切换牌号"
|
|
|
+ centered
|
|
|
+ width="400px"
|
|
|
+ ok-text="确认"
|
|
|
+ :okButtonProps="{ loading: okLoading }"
|
|
|
+ cancel-text="取消"
|
|
|
+ @ok="confirmChangeShift"
|
|
|
+ @cancel="
|
|
|
+ () => {
|
|
|
+ openJiaobanModal = false;
|
|
|
+ newShiftGroup = '';
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="flex justify-center items-center" style="margin: 20px 0">
|
|
|
+ <div>选择班组:</div>
|
|
|
+ <JSearchSelect type="list" style="width: 277px" v-model:value="newShiftGroup" dict="lg_bz" placeholder="请选择" allowClear />
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+ </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, getMachineDict } from '../hotDelivery/common.data';
|
|
|
+ import { changeShift } from '../hotDelivery/hotDelivery.api';
|
|
|
+ import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
+ import { useModal } from '/@/components/Modal';
|
|
|
+ import printBilletSampleCard from './components/printBilletSampleCard.vue';
|
|
|
+ import printOriginalRecords from './components/printOriginalRecords.vue';
|
|
|
+ import JSearchSelect from '/@/components/Form/src/jeecg/components/JSearchSelect.vue';
|
|
|
+
|
|
|
+ const { createConfirm, createMessage } = useMessage();
|
|
|
+
|
|
|
+ // 注册打印送样卡modal
|
|
|
+ const [registerPrintModal, { openModal }] = useModal();
|
|
|
+ // 注册打印原始记录modal
|
|
|
+ const [registerPrintOriginalRecordsModal, { openModal: openPrintOriginalRecordsModal }] = useModal();
|
|
|
+
|
|
|
+ const ccmNo = getMachineNum();
|
|
|
+
|
|
|
+ const carRef = ref();
|
|
|
+ const headTopRef = ref();
|
|
|
+ const heatListRef = ref();
|
|
|
+ // 班次信息
|
|
|
+ const shiftText = ref('');
|
|
|
+ const curShiftInfo = ref({
|
|
|
+ shift: undefined,
|
|
|
+ shiftGroup: undefined,
|
|
|
+ });
|
|
|
+ // 时钟
|
|
|
+ const clockObj = ref({
|
|
|
+ date: '',
|
|
|
+ week: '',
|
|
|
+ time: '',
|
|
|
+ });
|
|
|
+
|
|
|
+ const lengthList = ref('');
|
|
|
+ const cuttolength = ref(2); // 1 手动定尺, 2 自动定尺
|
|
|
+
|
|
|
+ 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 = (shiftInfo) => {
|
|
|
+ if (shiftInfo) {
|
|
|
+ const { shift, shiftGroup } = shiftInfo;
|
|
|
+ shiftText.value = `${getMachineDict(shift, 'lg_bb')} - ${getMachineDict(shiftGroup, 'lg_bz')}`;
|
|
|
+ }
|
|
|
+ curShiftInfo.value = shiftInfo;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 交班
|
|
|
+ const newShiftGroup = ref('');
|
|
|
+ const openJiaobanModal = ref(false);
|
|
|
+ const okLoading = ref(false);
|
|
|
+ const confirmChangeShift = () => {
|
|
|
+ if (!newShiftGroup.value) {
|
|
|
+ createMessage.error('请选择班组');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ createConfirm({
|
|
|
+ iconType: 'warning',
|
|
|
+ title: '交班确认',
|
|
|
+ content: '确定要交班吗?',
|
|
|
+ onOk: () => {
|
|
|
+ return changeShift({
|
|
|
+ ccmNo,
|
|
|
+ shiftGroup: newShiftGroup.value,
|
|
|
+ }).then(() => {
|
|
|
+ headTopRef && headTopRef.value.reload();
|
|
|
+ carRef && carRef.value.refreshCarList();
|
|
|
+ heatListRef && heatListRef.value.reload();
|
|
|
+
|
|
|
+ openJiaobanModal.value = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ start();
|
|
|
+ });
|
|
|
+
|
|
|
+ onUnmounted(() => {
|
|
|
+ stop();
|
|
|
+ });
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import '/@/assets/less/font.less';
|
|
|
+ @import './index.less';
|
|
|
+</style>
|