修改

src/views/largeScreen/home/components/dialog/dkqkList.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="dialogBox" v-loading="loading">
+    <div class="title">
+      <span class="mc">{{ title }}</span>
+      <span class="close" @click="close">×</span>
+    </div>
+    <ul class="warningList" ref="gjyjList">
+      <li v-for="item in warningList" :key="item.id">
+        <div>打卡人：{{ item.dkrXm }}</div>
+        <div>必到点位置：{{ item.bddMc }}</div>
+        <div>打卡开始时间：{{ item.dkKsSj }}</div>
+        <div class="fj_box">
+          <div>打卡开始附件：</div>
+          <el-image
+            :append-to-body="true"
+            :preview-src-list="[
+              `/mosty-api/mosty-base/minio/image/download/${item.dkKsFj}`
+            ]"
+            style="width: 75px; height: 75px"
+            :src="`/mosty-api/mosty-base/minio/image/download/${item.dkKsFj}`"
+            fit="cover"
+            lazy
+          />
+        </div>
+        <div>打卡结束时间：{{ item.dkJsSj }}</div>
+        <div class="fj_box">
+          <div>打卡结束附件：</div>
+          <el-image
+            :append-to-body="true"
+            :preview-src-list="[
+              `/mosty-api/mosty-base/minio/image/download/${item.dkJsFj}`
+            ]"
+            style="width: 75px; height: 75px"
+            :src="`/mosty-api/mosty-base/minio/image/download/${item.dkJsFj}`"
+            fit="cover"
+            lazy
+          />
+        </div>
+      </li>
+      <el-empty
+        description="没有数据"
+        :image-size="0.1"
+        v-if="!loading && warningList.length <= 0"
+      />
+    </ul>
+  </div>
+</template>
+<script setup>
+import YjItem from "@/views/largeScreen/home/components/yjItem.vue";
+import { qcckPost, qcckGet, qcckPut, qcckDelete } from "@/api/qcckApi.js";
+import {
+  ref,
+  onMounted,
+  getCurrentInstance,
+  defineEmits,
+  defineProps,
+  watch
+} from "vue";
+const { proxy } = getCurrentInstance();
+const { D_BZ_YJLX } = proxy.$dict("D_BZ_YJLX");
+const warningList = ref([]); //预警列表数据
+const pageCurrent = ref(1);
+const pageTotal = ref(0);
+const yjInfo = ref(null); //预警信息
+const gjyjList = ref(null); //预警列表数据
+const loading = ref(false);
+//参数传递
+const props = defineProps({
+  //某条预警详情
+  info: {
+    type: Object,
+    default: {}
+  },
+  //标题数据
+  title: String
+});
+const emit = defineEmits(["close"]);
+onMounted(() => {
+  yjInfo.value = props.info;
+  // _getSelectTrack(props.info.id);
+});
+// 监听视频地址变化
+watch(
+  () => props.info,
+  (val) => {
+    pageCurrent.value = 1;
+    yjInfo.value = val;
+    _getSelectTrack(val.id);
+  },
+  { immediate: true, deep: true }
+);
+//关闭
+function close() {
+  emit("close", false);
+}
+
+//获取轨迹预警列表
+function _getSelectTrack(id) {
+  loading.value = true;
+  qcckGet({ xfbbId: id }, "/mosty-yjzl/tbZdxlFgdwBddxlrwJl/getRwjlByXfbbId")
+    .then((res) => {
+      loading.value = false;
+      warningList.value = res;
+    })
+    .catch((err) => {
+      loading.value = false;
+    });
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.dialogBox {
+  ul.warningList {
+    height: calc(100vh - 198px);
+    overflow: hidden;
+    overflow-y: auto;
+    padding: 7px 10px;
+    box-sizing: border-box;
+    li {
+      margin-bottom: 10px;
+      border: 1px solid #14347b;
+      background: #0f2f59;
+      padding: 10px;
+      box-sizing: border-box;
+      border-radius: 10px;
+    }
+    .photo {
+      width: 60px;
+      height: 80px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+//加载时 取消背景
+::v-deep .el-loading-mask {
+  background-color: transparent !important;
+}
+.fj_box {
+  display: flex;
+  align-items: flex-start;
+}
+</style>

src/views/largeScreen/home/components/rightDialog.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="rightDilog noScollLine" :style="{ right: props.isPosition ? '0px' : '388px' }" style="transition: all 0.5s" >
+  <div
+    class="rightDilog noScollLine"
+    :style="{ right: props.isPosition ? '0px' : '388px' }"
+    style="transition: all 0.5s"
+  >
     <!-- 周边视频更多视频三个视频列表的时候 -->
     <MoreVideo
       @close="onVideoClose('zb')"
@@ -14,7 +18,7 @@
       :title="'视频随动'"
       v-if="showVideoSpsdWindow"
     />
-         <!-- 轨迹预警 -->
+    <!-- 轨迹预警 -->
     <DialogWarningList
       @close="onClose('gj')"
       :info="yjDetail"
@@ -28,6 +32,13 @@
       :title="'周边预警'"
       v-if="showZbyjWindow"
     />
+    <!-- 打卡情况 -->
+    <DkqkList
+      @close="onClose('dk')"
+      :info="dkqkDetail"
+      :title="'打卡情况'"
+      v-if="showDkqkWindow"
+    />
   </div>
 </template>
 
@@ -35,11 +46,14 @@
 import emitter from "@/utils/eventBus.js";
 import MoreVideo from "./dialog/moreVideo.vue";
 import DialogWarningList from "./dialog/warningList.vue";
+import DkqkList from "./dialog/dkqkList.vue";
 import { ref, defineProps, onMounted, onUnmounted } from "vue";
 const props = defineProps({
   isPosition: Boolean
 });
 const zbyjDetail = ref(null); //周边预警详情
+const dkqkDetail = ref(null); //打卡情况详情
+const showDkqkWindow = ref(false); //是否显示周边预警
 const yjDetail = ref(null); //某条预警详情
 const showZbyjWindow = ref(false); //是否显示周边预警
 const jqDetail = ref(null); // 某条警情详情
@@ -47,8 +61,8 @@ const showVideoWindow = ref(false); //是否显示周边视频
 const xzDetail = ref(null); //巡组详情
 const showVideoSpsdWindow = ref(false); //吃否显示视频随动
 const showYjWindow = ref(false); //是否显示预警轨迹弹窗
-onMounted(()=>{
-    emitter.on("videoClick", (res) => {
+onMounted(() => {
+  emitter.on("videoClick", (res) => {
     jqDetail.value = res;
     showVideoWindow.value = true;
   });
@@ -56,11 +70,15 @@ onMounted(()=>{
     showVideoWindow.value = false;
     showVideoSpsdWindow.value = false;
   });
-   emitter.on("clickZbyj", (res) => {
+  emitter.on("clickZbyj", (res) => {
     zbyjDetail.value = res;
     showZbyjWindow.value = true;
   });
-   emitter.on("showCcyj", (res) => {
+  emitter.on("clickDkqk", (res) => {
+    dkqkDetail.value = res;
+    showDkqkWindow.value = true;
+  });
+  emitter.on("showCcyj", (res) => {
     yjDetail.value = res;
     showYjWindow.value = true;
   });
@@ -69,7 +87,7 @@ onMounted(()=>{
     xzDetail.value = res;
     showVideoSpsdWindow.value = true;
   });
-})
+});
 //关闭周边视频 || 视频随动
 function onVideoClose(type) {
   if (type == "zb") {
@@ -82,10 +100,15 @@ function onVideoClose(type) {
 function onClose(type) {
   if (type == "gj") {
     showYjWindow.value = false;
-  } else {
+  } else if (type == "zb") {
     showZbyjWindow.value = false;
+  } else {
+    showDkqkWindow.value = false;
   }
 }
+onUnmounted(() => {
+  emitter.off("clickDkqk");
+});
 </script>
 
 <style lang="scss" scoped>
@@ -94,8 +117,8 @@ function onClose(type) {
   position: absolute;
   top: 91px;
   width: 360px;
-  right: 380px ;
-  z-index:9;
+  right: 380px;
+  z-index: 9;
   max-height: 90vh;
   overflow: hidden;
   overflow-y: auto;

src/views/largeScreen/home/layout/streetInfo.vue

@@ -111,6 +111,7 @@
           <el-button @click.stop="onClickGjhf">回放</el-button>
         </div>
       </el-popover>
+      <button class="dp-default small" @click="getDkqkData">打卡情况</button>
     </div>
   </div>
 </template>
@@ -340,6 +341,10 @@ function onClickZbyj() {
   let { jd, wd } = props.data;
   emitter.emit("clickZbyj", { jd, wd });
 }
+const getDkqkData=()=>{
+  emitter.emit("closeVideo");
+  emitter.emit("clickDkqk", props.data);
+}
 
 </script>