提示浮窗

src/router/routes.ts

@@ -40,7 +40,7 @@ const routes: Array<RouteRecordRaw> = [
         }
       },
       {
-        path: "/rollCallDetails",
+        path: "rollCallDetails",
         name: "RollCallDetails",
         component: () => import("@/views/onlineRollCall/rollCallDetails.vue"),
         meta: {
@@ -49,7 +49,7 @@ const routes: Array<RouteRecordRaw> = [
         }
       },
       {
-        path: "/rollCallRecord2",
+        path: "rollCallRecord2",
         name: "rollCallRecord2",
         component: () => import("@/views/onlineRollCall/rollCallRecord2.vue"),
         meta: {

src/views/leader/index.vue

@@ -64,12 +64,29 @@
         </div>
       </div>
     </div>
+    <van-dialog class="custom-dialog" v-model:show="show" 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 class="custom-dialog2" v-model:show="show2" title="在线点名提醒" :showConfirmButton="false">
+      <div class="dialog-content">
+        <div class="img-box"></div>
+        <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"></div>
   </dic>
 </template>
 
 <script lang="ts" setup>
 import {onClickOutside} from "@vueuse/core";
-import { ref, reactive, onMounted } from 'vue';
+import {ref, reactive, onMounted, onUnmounted} from 'vue';
 import { getActiveEventList } from "@/api/event";
 import noticeImg from '@/assets/images/notice.png'
 import searchImg from '@/assets/images/search.png'
@@ -197,8 +214,77 @@ const handleClickItem = (item) => {
   finished.value = false;
   searchList.value = [];
 }
+// 在线点名弹窗
+let timer;
+let show = ref();
+let durationTime = ref('');
+let rollCallData = ref({
+  id: '',
+  time1: ''
+})
+// 在线点名
+let show2 = ref();
+let img = ref('');
+const handleToRollCall = () => {
+  show.value = false;
+  show2.value = true;
+  setTimeout(() => {
+    img.value = '2';
+  }, 3000)
+}
+const handleToRollCall2 = () => {
+  router.push({
+    name: 'RollCallDetails',
+    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;
+};
 onMounted(() => {
   initData()
+  show.value = true;
+  rollCallData.value = {
+    id: '11111',
+    time1: '2024-10-22 12:00:00'
+  };
+  if (!timer && !!rollCallData.value.time1) {
+    timer = setInterval(updateTime, 1000)
+  }
+})
+onUnmounted(() => {
+  if (!!timer) {
+    clearInterval(timer)
+  }
 })
 </script>
 
@@ -387,4 +473,76 @@ onMounted(() => {
     }
   }
 }
+.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>

src/views/onlineRollCall/rollCallDetails.vue

@@ -319,7 +319,8 @@ onUnmounted(() => {
     .box-item3 {
       width: 36px;
       height: 69px;
-      background: #86b7ff21;
+      background: url('@/assets/images/onlineRollCall/downloadBg.png') no-repeat;
+      background-size: 100% 100%;
       border-radius: 2px;
       display: flex;
       flex-direction: column;