JG-CLIENT-TEMP/src/views/process/popUpView/operatePop.vue

<template>
  <div
    class="midPopUp"
    @click="emits('update:modelValue', false)"
    v-if="modelValue"
  >
    <div class="container" @click.stop>
      <div
        :class="lcDisabled ? 'operatorBox disableOp' : 'operatorBox'"
        @click="lastOpCall"
        v-loading="map.get('callItems')"
        :style="lcRes ? 'background-color: white !important;' : ''"
      >
        <transition>
          <div v-if="!lcRes">
            <div class="titleText">流程叫料</div>
            <div class="describeText">（向上一流程工序呼叫流程物料）</div>
          </div>
          <div v-else>
            <el-progress type="circle" :percentage="100" status="success">
              <template #default>
                <div class="percentage-label">叫料成功</div>
                <div class="percentage-label">请等待{{ time }}秒后再试</div>
              </template>
            </el-progress>
          </div>
        </transition>
      </div>

      <div
        :class="gxDisabled ? 'operatorBox disableOp' : 'operatorBox'"
        @click="opeateCall"
      >
        <div>
          <div class="titleText">工序叫料</div>
          <div class="describeText">（向本工序呼叫涉及物料）</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useProcessStore } from "@/store";
import { emitter, EventsNames } from "@/utils/common";
import { callItems } from "@/api/process";
import { useCommonStoreHook } from "@/store";
const commonS = useCommonStoreHook();
const store = useProcessStore();
const router = useRouter();
const map = commonS.loadingMap;
const lcRes = ref(false);
const time = ref(3);
const emits = defineEmits(["update:modelValue"]);
const modelValue = defineModel<boolean>();
const gxDisabled = ref(true);
const lcDisabled = ref(true);
const callBoxStatus = ref(false);
//工序叫料
const opeateCall = () => {
  if (gxDisabled.value) return;
  router.push({ name: "call-materiel" });
  emits("update:modelValue", false);
};
const scanStatus = inject("scanStatus");
const callLast = async () => {
  const { data, code } = await callItems({
    operationId: store.odersData.operationId,
    workOrderCode: store.odersData.workOrderCode,
  });
  if (code == "200") {
    lcRes.value = true;
    const intervalID = setInterval(() => {
      if (time.value > 0) {
        time.value = time.value - 1;
      }
    }, 1000);
    setTimeout(() => {
      clearInterval(intervalID);
      lcRes.value = false;
      time.value = 3;
    }, 3000);
  }
};
//流程叫料
const lastOpCall = () => {
  if (lcDisabled.value || lcRes.value) return;
  callLast();
};
//监听工序index等
emitter.on(EventsNames.PROCESS_STEPOBJ, (data: any) => {
  if (data.index == null) {
    lcDisabled.value = true;
    gxDisabled.value = true;
  } else {
    if (data.index == 0) {
      lcDisabled.value = true;
    } else {
      lcDisabled.value = false;
    }
    gxDisabled.value = false;
  }
});
</script>

<style lang="scss" scoped>
.titleText {
  text-align: center;
}

.container {
  height: 50vh;
  width: 40vw;
  background-color: #ffffff60;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 24px;

  .disableOp {
    opacity: 0.6;
    background-color: red !important;
    color: white;
    cursor: not-allowed !important;

    .describeText {
      color: white;
    }
  }

  .operatorBox {
    width: 50%;
    height: 100%;
    background-color: #ffffff95;
    margin: 0 20px;
    border-radius: 16px;
    @include flex;
    cursor: pointer;
  }

  .operatorBox:hover {
    background-color: #0a59f7;

    .titleText {
      color: white;
    }

    .describeText {
      color: white;
    }
  }
}

.active {
  background-image: url("@/assets/images/caijiwancheng.png");
  background-position: right top;
  background-repeat: no-repeat;
}
</style>