点名记录详情2

src/router/routes.ts

@@ -49,9 +49,9 @@ const routes: Array<RouteRecordRaw> = [
         }
       },
       {
-        path: "/rollCallDetails2",
-        name: "RollCallDetails2",
-        component: () => import("@/views/onlineRollCall/rollCallDetails2.vue"),
+        path: "/rollCallRecord2",
+        name: "rollCallRecord2",
+        component: () => import("@/views/onlineRollCall/rollCallRecord2.vue"),
         meta: {
           title: "点名记录",
           noCache: true

src/views/onlineRollCall/index.vue

@@ -29,7 +29,7 @@ const handleClick = (key: string) => {
   } else if (key === '4') {
     router.push({ name : 'RollCallRecord'});
   } else if (key === '5') {
-
+    router.push({ name : 'rollCallRecord2'});
   }
 }
 </script>

src/views/onlineRollCall/rollCallDetails.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="container">
-    <div class="box">
+    <div v-if="detailsData.status === '1'" class="box">
       <div class="box-item1">
         <i class="icon"/>
         <div class="box-right">
           <div class="btn">开始点名</div>
-          <div class="time">00:00:01</div>
+          <div class="time">{{ durationTime }}</div>
         </div>
       </div>
       <div class="box-item2">
         <i class="icon"/>
         <div class="box-right">
-          <div class="btn2">结束点名</div>
+          <div class="btn2" @click="handleEnd">结束点名</div>
         </div>
       </div>
       <div class="box-item3">
@@ -19,29 +19,67 @@
         <div class="label">下载</div>
       </div>
     </div>
-    <div class="box2">
+    <div v-else class="box">
+      <div class="box-item4">
+        <i class="icon"/>
+        <div class="box-right">
+          <div class="time2">开始点名时间</div>
+          <div class="time2">{{ parseTime(detailsData.time1, '{y}-{m}-{d}') }}</div>
+          <div class="time2">{{ parseTime(detailsData.time1, '{h}:{i}:{s}') }}</div>
+        </div>
+      </div>
+      <div class="box-item5">
+        <i class="icon"/>
+        <div class="box-right">
+          <div class="time2">结束点名时间</div>
+          <div class="time2">{{ parseTime(detailsData.time2, '{y}-{m}-{d}') }}</div>
+          <div class="time2">{{ parseTime(detailsData.time2, '{h}:{i}:{s}') }}</div>
+        </div>
+      </div>
+    </div>
+    <div v-if="detailsData.status === '1'" class="box2">
       <div class="card bg1">
         <div class="text1">本次点名时间</div>
-        <div class="text2">2024-10-22</div>
-        <div class="text2">12:36:09</div>
+        <div class="text2">{{ parseTime(detailsData.time1, '{y}-{m}-{d}') }}</div>
+        <div class="text2">{{ parseTime(detailsData.time1, '{h}:{i}:{s}') }}</div>
+      </div>
+      <div class="card bg2">
+        <div class="text1">已应答镇/街</div>
+        <div class="line">
+          <div class="text3">{{ detailsData.data1 }}</div>
+          <div class="text1">个</div>
+        </div>
+      </div>
+      <div class="card bg3">
+        <div class="text1">未应答镇/街</div>
+        <div class="line">
+          <div class="text4">{{ detailsData.data2 }}</div>
+          <div class="text1">个</div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="box2">
+      <div class="card bg1">
+        <div class="text1">点名时间时长</div>
+        <div class="text5">{{ detailsData.durationTime }}</div>
       </div>
       <div class="card bg2">
         <div class="text1">已应答镇/街</div>
         <div class="line">
-          <div class="text3">10</div>
+          <div class="text3">{{ detailsData.data1 }}</div>
           <div class="text1">个</div>
         </div>
       </div>
       <div class="card bg3">
         <div class="text1">未应答镇/街</div>
         <div class="line">
-          <div class="text4">10</div>
+          <div class="text4">{{ detailsData.data2 }}</div>
           <div class="text1">个</div>
         </div>
       </div>
     </div>
     <div class="custom-list">
-      <div v-for="(item, index) in dataList" :key="index" class="item">
+      <div v-for="(item, index) in detailsData.dataList" :key="index" class="item">
         <div class="item-header">
           <div class="text1">{{ item.data1 }}</div>
           <div :class="getClass(item.status)">{{ item.status }}</div>
@@ -64,22 +102,44 @@
 
 <script setup lang="ts" name="rollCallDetails">
 import {useRoute} from "vue-router";
-import {onMounted, ref} from "vue";
+import {computed, onMounted, onUnmounted, ref} from "vue";
+import {parseTime} from "../../utils/ruoyi";
 
 const route = useRoute();
 let id = ref();
 
-// 单位列表
-let dataList = ref([]);
-
+let detailsData = ref({
+  time1: '',
+  time2: '',
+  durationTime: '',
+  data1: '',
+  data2: '',
+  data3: '',
+  // 状态 0 结束 1开始
+  status: '',
+  dataList: []
+});
+let durationTime = ref('');
+let timer;
 const initData = () => {
-  dataList.value = [
-    {data1: '水东街道1', status: '未应答', data2: '谭景津', data3: '谭大大'},
-    {data1: '水东街道2', status: '呼叫中', data2: '谭景津', data3: '谭大大'},
-    {data1: '水东街道3', status: '已接通', data2: '谭景津', data3: '谭大大'},
-    {data1: '水东街道4', status: '未应答', data2: '谭景津', data3: '谭大大'},
-    {data1: '水东街道5', status: '未应答', data2: '谭景津', data3: '谭大大'},
-  ];
+  detailsData.value = {
+    time1: '2024-10-22 12:36:09',
+    time2: '2024-10-23 12:36:09',
+    durationTime: '24:00:00',
+    data1: '10',
+    data2: '10',
+    status: '1',
+    dataList: [
+      {data1: '水东街道1', status: '未应答', data2: '谭景津', data3: '谭大大'},
+      {data1: '水东街道2', status: '呼叫中', data2: '谭景津', data3: '谭大大'},
+      {data1: '水东街道3', status: '已接通', data2: '谭景津', data3: '谭大大'},
+      {data1: '水东街道4', status: '未应答', data2: '谭景津', data3: '谭大大'},
+      {data1: '水东街道5', status: '未应答', data2: '谭景津', data3: '谭大大'},
+    ]
+  }
+  if (!timer && detailsData.value.status !== '0') {
+    timer = setInterval(calculateDuration, 1000)
+  }
 };
 const getClass = (value) => {
   let res = '';
@@ -91,11 +151,46 @@ const getClass = (value) => {
     res = 'text-blue'
   }
   return res;
+};
+const calculateDuration = () => {
+  // 将起始时间字符串转换为日期对象
+  const startTime = new Date(detailsData.value.time1);
+
+  // 获取当前时间作为结束时间
+  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')}`;
+
+  // 返回格式化的持续时间
+  durationTime.value = formattedDuration;
+};
+// 结束点名
+const handleEnd = () => {
+
 };
 onMounted(() => {
   id.value = route.query.id;
   initData();
 })
+onUnmounted(() => {
+  if (!!timer) {
+    clearInterval(timer)
+  }
+})
 </script>
 
 <style scoped lang="scss">
@@ -146,6 +241,43 @@ onMounted(() => {
       }
     }
 
+    .box-item4 {
+      width: 165px;
+      height: 69px;
+      background: url('@/assets/images/onlineRollCall/box4.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      padding: 7px;
+
+      .icon {
+        display: inline-block;
+        width: 38px;
+        height: 39px;
+        background: url('@/assets/images/onlineRollCall/icon4.png') no-repeat;
+        background-size: 100% 100%;
+        margin-right: 9px;
+      }
+    }
+
+    .box-item5 {
+      width: 167px;
+      height: 69px;
+      background: url('@/assets/images/onlineRollCall/box6.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      padding: 7px;
+
+      .icon {
+        display: inline-block;
+        width: 38px;
+        height: 38px;
+        background: url('@/assets/images/onlineRollCall/icon5.png') no-repeat;
+        background-size: 100% 100%;
+        margin-right: 9px;
+      }
+    }
     .box-right {
       .btn {
         width: 70px;
@@ -173,6 +305,9 @@ onMounted(() => {
         margin-top: 3px;
         font-size: 16px;
       }
+      .time2 {
+        font-size: 13px;
+      }
     }
 
     .box-item3 {
@@ -221,7 +356,7 @@ onMounted(() => {
       width: 106px;
       height: 71px;
       background-size: 100% 100%;
-      padding: 10px;
+      padding: 5px;
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -241,17 +376,21 @@ onMounted(() => {
       }
 
       .text3 {
-        font-size: 24px;
+        font-size: 23px;
         color: #40C75F;
         font-weight: bold;
       }
 
       .text4 {
-        font-size: 24px;
+        font-size: 23px;
         color: #FF2F3C;
         font-weight: bold;
       }
-
+      .text5 {
+        font-size: 23px;
+        color: #FFAF00;
+        font-weight: bold;
+      }
       .line {
         display: flex;
         justify-content: center;

src/views/onlineRollCall/rollCallRecord.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts" setup name="rollCallRecord">
-import {onMounted, reactive, ref} from "vue";
+import {onMounted, onUnmounted, reactive, ref} from "vue";
 import closeImg from "@/assets/images/close.png";
 import searchImg from "@/assets/images/search.png";
 import {parseTime} from "@/utils/ruoyi";
@@ -137,13 +137,18 @@ const getList = () => {
 
 const handleToDetails = (id) => {
   router.push({
-    name: 'RollCallDetails2',
+    name: 'RollCallDetails',
     query: { id }
   });
 }
 onMounted(() => {
   getList();
 })
+onUnmounted(() => {
+  if (!!timer) {
+    clearInterval(timer)
+  }
+})
 </script>
 
 <style scoped lang="scss">

src/views/onlineRollCall/rollCallDetails2.vue → src/views/onlineRollCall/rollCallRecord2.vue

@@ -63,7 +63,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="rollCallDetails2">
+<script lang="ts" setup name="rollCallRecord2">
 import searchImg from "@/assets/images/search.png";
 import closeImg from "@/assets/images/close.png";
 import {ref} from "vue";