yjxp-web/src/components/OnlineRollCall/index.vue

<template>
    <van-dialog
      v-model:show="show"
      class="custom-dialog"
      title="在线点名提醒"
      confirmButtonText="确认点名"
      @confirm="handleToRollCall"
    >
      <div class="btn" @click="handleHideDialog">浮窗显示</div>
      <div class="line">
        <i class="icon-tip" />
        <div class="text1">{{ durationTime }}</div>
      </div>
    </van-dialog>
    <van-dialog
      v-model:show="show2"
      class="custom-dialog2"
      title="在线点名提醒"
      :showConfirmButton="false"
    >
      <div class="dialog-content">
        <div class="img-box" />
        <div v-show="!img" class="text1">即将通过摄像头捕捉画面</div>
        <div v-show="!img" class="text2">请稍等</div>
        <div v-show="img" class="btn" @click="handleToRollCall2">
          上传视频截图
        </div>
        <div v-show="img" class="text3">已完成</div>
      </div>
    </van-dialog>
    <div v-if="!!rollCallData.id" class="float-box" @click="show = true" />
</template>

<script lang="ts" setup name="OnlineRollCall">
import { ref, onUnmounted, nextTick } from "vue";
import { useRouter } from "vue-router";
import { hasMyCall, ackMyCall } from "@/api/onlineRollCall";

const router = useRouter();

// 在线点名弹窗
let timer;
let show = ref(false);
let durationTime = ref("");
let rollCallData = ref({
  id: 0,
  time1: ""
});
// 在线点名
let show2 = ref();
let img = ref("");
const handleToRollCall = () => {
  show.value = false;
  show2.value = true;
  setTimeout(() => {
    img.value = "2";
  }, 3000);
};
const handleToRollCall2 = () => {  
  ackMyCall({call_id: rollCallData.value.id}).then((res)=>{
    router.push({
      name: "rollCallRecord2",
      query: { id: rollCallData.value.id }
    });
  })
};
const calculateDuration = startTimeStr => {
  // 将起始时间字符串转换为日期对象
  const startTime = new Date(startTimeStr);

  // 获取当前时间作为结束时间
  const endTime = new Date();

  // 确保起始时间在结束时间之前（可选，用于验证输入）
  if (startTime > endTime) {
    return "";
  }

  // 计算时间差（以毫秒为单位）
  let timeDifference = endTime - startTime;

  // 将毫秒转换为秒、分钟和小时
  const seconds = Math.floor((timeDifference / 1000) % 60);
  const minutes = Math.floor((timeDifference / (1000 * 60)) % 60);
  const hours = Math.floor(timeDifference / (1000 * 60 * 60));

  // 格式化时间为 HH:MM:SS
  const formattedDuration = `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;

  // 返回格式化的持续时间
  return formattedDuration;
};
const updateTime = () => {
  durationTime.value = calculateDuration(rollCallData.value.time1);
};
const handleHideDialog = () => {
  show.value = false;
};
nextTick(() => {
  const env = import.meta.env.VITE_APP_ENV
  if (env != 'development_') {
    hasMyCall({}).then((res)=>{
      if(res.data && res.data.length > 0) {
        rollCallData.value = res.data[0];
        show.value = true;
        if (!timer && !!rollCallData.value.time1) {
          timer = setInterval(updateTime, 1000);
        }
      }
    })
  }
});
onUnmounted(() => {
  if (!!timer) {
    clearInterval(timer);
  }
});
</script>

<style lang="scss" scoped>

.custom-dialog {
  position: relative;
  .btn {
    position: absolute;
    top: 10px;
    right: 6px;
    font-size: 12px;
    color: #2c81ff;
  }
  .line {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    .icon-tip {
      width: 30px;
      height: 31px;
      background: url("@/assets/images/onlineRollCall/tip.png") no-repeat;
      background-size: 100% 100%;
    }
    .text1 {
      font-size: 24px;
      color: #2c81ff;
    }
  }
}
.float-box {
  position: fixed;
  right: 10px;
  bottom: 70px;
  width: 86px;
  height: 77px;
  background: url("@/assets/images/onlineRollCall/float.png") no-repeat;
  background-size: 100% 100%;
}
.custom-dialog2 {
  .dialog-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
  }
  .img-box {
    width: 267px;
    height: 284px;
    background-color: #ededed;
    margin-bottom: 16px;
  }
  .text1 {
    font-size: 14px;
    color: #2c81ff;
    line-height: 26px;
  }
  .text2 {
    font-size: 12px;
    color: #ffaf00;
    line-height: 26px;
  }
  .text3 {
    font-size: 12px;
    color: #40c75f;
    line-height: 26px;
  }
  .btn {
    background: #2c81ff;
    border-radius: 2px;
    font-size: 12px;
    color: #ffffff;
    padding: 3px 14px;
  }
}
</style>