no message

src/App.vue

@@ -13,7 +13,7 @@
         playsinline
         autoplay
         muted
-        src="@/assets/videos/1.mp4"
+        src="@/assets/videos/3.mp4"
       ></video>
     </div>
   </div>

src/components/map/map.vue

@@ -46,8 +46,8 @@ const $props = defineProps({
 
 const $emit = defineEmits(["clickMarker"]);
 
-console.log($props.type);
-console.log($props.showFire);
+// console.log($props.type);
+// console.log($props.showFire);
 
 // 地图实例对象
 let map: any = null;
@@ -104,9 +104,9 @@ const initAMap = () => {
             // 是否展示地图文字和 POI 信息
             showLabel: false,
             // 是否可通过鼠标拖拽平移
-            dragEnable: false,
+            dragEnable: true,
             // 地图是否可缩放
-            zoomEnable: false,
+            zoomEnable: true,
             // 是否可通过键盘控制
             keyboardEnable: false,
             // 地图是否可旋转

src/utils/draggable.ts

@@ -0,0 +1,47 @@
+export const draggableFun = (dom: any) => {
+  const draggable: any = document.getElementById(dom);
+
+  let isDragging = false;
+  let currentX: any;
+  let currentY: any;
+  let initialX: any;
+  let initialY: any;
+  let xOffset = 0;
+  let yOffset = 0;
+
+  draggable.addEventListener("mousedown", dragStart);
+  document.addEventListener("mouseup", dragEnd);
+  document.addEventListener("mousemove", drag);
+
+  function dragStart(e: any) {
+    initialX = e.clientX - xOffset;
+    initialY = e.clientY - yOffset;
+
+    if (e.target === draggable) {
+      isDragging = true;
+    }
+  }
+
+  function drag(e: any) {
+    if (isDragging) {
+      e.preventDefault();
+      currentX = e.clientX - initialX;
+      currentY = e.clientY - initialY;
+
+      xOffset = currentX;
+      yOffset = currentY;
+
+      setTranslate(currentX, currentY, draggable);
+    }
+  }
+
+  function setTranslate(xPos: any, yPos: any, el: any) {
+    el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
+  }
+
+  function dragEnd() {
+    initialX = currentX;
+    initialY = currentY;
+    isDragging = false;
+  }
+};

src/views/safe/center/fireDetailDialog.vue

@@ -3,7 +3,7 @@
     <!-- 遮罩层区域 -->
     <div class="mask" @click="handleClose"></div>
     <!-- 弹窗内容区域 -->
-    <div class="fire">
+    <div class="fire" id="draggable">
       <!-- 标题区域 -->
       <div class="title" :title="currentFire">{{ currentFire }}</div>
 
@@ -61,6 +61,8 @@ import { onMounted, ref } from "vue";
 import { reqGetSmokeByPlace, reqGetHandleSmoke } from "@/api/fire/index";
 import dayjs from "dayjs";
 import { ElMessage, ElMessageBox } from "element-plus";
+// 引入拖拽功能文件
+import { draggableFun } from "@/utils/draggable";
 
 const $props = defineProps(["currentFire"]);
 
@@ -78,6 +80,8 @@ const videoSrc = ref("");
 onMounted(() => {
   // 根据地址查询烟雾报警信息
   getSmokeByPlace();
+  // 调用拖拽功能
+  draggableFun("draggable");
 });
 
 // 根据地址查询烟雾报警信息
@@ -150,11 +154,12 @@ const handleClose = () => {
   }
 
   .fire {
-    position: relative;
+    position: absolute;
     width: 748px;
     height: 600px;
     background-image: url(@/assets/images/75.png);
     background-size: 100% 100%;
+    user-select: none; /* 防止文字被选中 */
 
     .title {
       padding: 0 20px;

src/views/safe/center/otherDetailDialog.vue

@@ -3,7 +3,7 @@
     <!-- 遮罩层区域 -->
     <div class="mask" @click="handleClose"></div>
     <!-- 弹窗内容区域 -->
-    <div class="other">
+    <div class="other" id="draggable">
       <!-- 标题区域 -->
       <div class="title">{{ currentOther }}</div>
 
@@ -19,9 +19,18 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from "vue";
+// 引入拖拽功能文件
+import { draggableFun } from "@/utils/draggable";
+
 defineProps(["currentOther"]);
 const $emit = defineEmits(["closeDialog"]);
 
+onMounted(() => {
+  // 调用拖拽功能
+  draggableFun("draggable");
+});
+
 // 点击关闭按钮回调
 const handleClose = () => {
   $emit("closeDialog", false);
@@ -50,11 +59,12 @@ const handleClose = () => {
   }
 
   .other {
-    position: relative;
+    position: absolute;
     width: 748px;
     height: 491px;
     background-image: url(@/assets/images/75.png);
     background-size: 100% 100%;
+    user-select: none; /* 防止文字被选中 */
 
     .title {
       padding: 0 20px;

src/views/safe/center/radioDetailDialog.vue

@@ -3,7 +3,7 @@
     <!-- 遮罩层区域 -->
     <div class="mask" @click="handleClose"></div>
     <!-- 弹窗内容区域 -->
-    <div class="radio">
+    <div class="radio" id="draggable">
       <!-- 标题区域 -->
       <div class="title" :title="currentRadio">{{ currentRadio }}</div>
 
@@ -45,6 +45,8 @@
 import { ref, onMounted } from "vue";
 // 引入广播点位数据
 import { radioData } from "@/components/map/radioData";
+// 引入拖拽功能文件
+import { draggableFun } from "@/utils/draggable";
 
 const porps = defineProps(["currentRadio"]);
 
@@ -63,6 +65,8 @@ const listData = ref();
 onMounted(() => {
   // 获取广播列表数据
   getListData();
+  // 调用拖拽功能
+  draggableFun("draggable");
 });
 
 // 获取广播列表数据
@@ -115,11 +119,12 @@ const handleClose = () => {
   }
 
   .radio {
-    position: relative;
+    position: absolute;
     width: 749px;
     height: 952px;
     background-image: url(@/assets/images/86.png);
     background-size: 100% 100%;
+    user-select: none; /* 防止文字被选中 */
 
     .title {
       padding: 0 20px;

src/views/safe/center/watchDetailDialog.vue

@@ -3,7 +3,7 @@
     <!-- 遮罩层区域 -->
     <div class="mask" @click="handleClose"></div>
     <!-- 弹窗内容区域 -->
-    <div class="watch">
+    <div class="watch" id="draggable">
       <!-- 标题区域 -->
       <div class="title" :title="currentWatch">{{ currentWatch }}</div>
 
@@ -52,6 +52,8 @@ import {
 } from "@/api/video/index";
 // @ts-ignore
 import WasmPlayer from "@easydarwin/easywasmplayer";
+// 引入拖拽功能文件
+import { draggableFun } from "@/utils/draggable";
 
 const props = defineProps(["currentWatch"]);
 const $emit = defineEmits(["closeDialog"]);
@@ -96,6 +98,9 @@ onMounted(() => {
     // 获取监控视频地址
     getVideosData("");
   }
+
+  // 调用拖拽功能
+  draggableFun("draggable");
 });
 
 onUnmounted(() => {
@@ -219,12 +224,13 @@ const handleClose = () => {
   }
 
   .watch {
-    position: relative;
+    position: absolute;
     padding: 0 50px;
     width: 1156px;
     height: 700px;
     background-image: url(@/assets/images/75.png);
     background-size: 100% 100%;
+    user-select: none; /* 防止文字被选中 */
 
     .title {
       padding: 0 20px;

src/views/safe/left/leftSafe.vue

@@ -118,17 +118,16 @@ const getVideosData = () => {
       if (a === "videoTimestamp") {
         ele.isShow = true;
       } else {
-        // 开启一个延时10秒的延时器
+        // 开启一个延时20秒的延时器
         if (!ele.timer) {
           (ele.timer as any) = setTimeout(() => {
             //  如果isShow为false表示播放失败，此时断开连接节约性能
             if (!ele.isShow) {
               player.destroy();
             }
-
             // 收集延时器实例方便后面销毁
             timerList.value.push(ele.timer);
-          }, 10000);
+          }, 20000);
         }
       }
     });

src/views/safe/right/rightSafe.vue

@@ -164,7 +164,20 @@
       <!-- 播发记录区域 -->
       <div class="broadcast_right">
         <div class="right_title">
-          <div>播发记录</div>
+          <div>
+            播发记录
+            <span
+              style="
+                margin-left: 20px;
+                font-size: 20px;
+                color: #2493f1;
+                cursor: pointer;
+              "
+              @click="goPage"
+            >
+              点击进入
+            </span>
+          </div>
           <div class="icon_box" @click="handleClickMore">
             查看更多
             <img src="@/assets/images/right.png" />
@@ -409,17 +422,16 @@ const getVideosData = () => {
       if (a === "videoTimestamp") {
         ele.isShow = true;
       } else {
-        // 开启一个延时10秒的延时器
+        // 开启一个延时20秒的延时器
         if (!ele.timer) {
           ele.timer = setTimeout(() => {
             //  如果isShow为false表示播放失败，此时断开连接节约性能
             if (!ele.isShow) {
               player.destroy();
             }
-
             // 收集延时器实例方便后面销毁
             timerList.value.push(ele.timer);
-          }, 10000);
+          }, 20000);
         }
       }
     });
@@ -553,6 +565,10 @@ const closeDialog = (data: boolean) => {
   showSmoke.value = data;
   showBroadcast.value = data;
 };
+
+const goPage = () => {
+  window.open("http://6.200.0.4/admin/auth/login");
+};
 </script>
 
 <style lang="scss" scoped>

src/views/server/center/hotelListDialog.vue

@@ -3,7 +3,7 @@
     <!-- 遮罩层区域 -->
     <div class="mask" @click="handleClose"></div>
     <!-- 内容区域 -->
-    <div class="container">
+    <div class="container" id="draggable">
       <!-- 关闭按钮区域 -->
       <div class="close_icon" @click="handleClose"></div>
 
@@ -71,6 +71,8 @@ import { Search } from "@element-plus/icons-vue";
 import HotelDetailDialog from "./hotelDetailDialog.vue";
 // 引入旅游服务相关的接口
 import { reqGetHotelList } from "@/api/serve/index";
+// 引入拖拽功能文件
+import { draggableFun } from "@/utils/draggable";
 
 const $props = defineProps(["currentTown"]);
 const $emit = defineEmits(["closeDialog"]);
@@ -96,6 +98,8 @@ const detailObj = ref({});
 onMounted(() => {
   // 获取民宿列表数据
   getHotelList();
+  // 调用拖拽功能
+  draggableFun("draggable");
 });
 
 // 获取民宿列表数据
@@ -169,6 +173,7 @@ const handleLookDetail = (item: any) => {
     height: 853px;
     background-image: url(@/assets/images/53.png);
     background-size: 100% 100%;
+    user-select: none; /* 防止文字被选中 */
 
     .close_icon {
       position: absolute;

src/views/server/center/parkingDetailDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="mask" @click="handleClose"></div>
-    <div class="parking">
+    <div class="parking" id="draggable">
       <!-- 名称区域 -->
       <div class="title" :title="currentParking">{{ currentParking }}</div>
 
@@ -22,6 +22,8 @@
 import { onMounted, ref } from "vue";
 // 引入停车场数据
 import { parkingData } from "@/components/map/parkingData";
+// 引入拖拽功能文件
+import { draggableFun } from "@/utils/draggable";
 
 const props = defineProps(["currentParking"]);
 const $emit = defineEmits(["closeDialog"]);
@@ -34,6 +36,9 @@ onMounted(() => {
   info.value = parkingData.find(
     (ele: any) => ele.title === props.currentParking
   );
+
+  // 调用拖拽功能
+  draggableFun("draggable");
 });
 
 // 点击关闭按钮回调
@@ -64,11 +69,12 @@ const handleClose = () => {
   }
 
   .parking {
-    position: relative;
+    position: absolute;
     width: 668px;
     height: 401px;
     background-image: url(@/assets/images/56.png);
     background-size: 100% 100%;
+    user-select: none; /* 防止文字被选中 */
 
     .title {
       margin-top: 3px;

src/views/server/center/petrolDetailDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="mask" @click="handleClose"></div>
-    <div class="petrol">
+    <div class="petrol" id="draggable">
       <!-- 名称区域 -->
       <div class="title" :title="currentPetrol">{{ currentPetrol }}</div>
 
@@ -24,9 +24,18 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from "vue";
+// 引入拖拽功能文件
+import { draggableFun } from "@/utils/draggable";
+
 defineProps(["currentPetrol"]);
 const $emit = defineEmits(["closeDialog"]);
 
+onMounted(() => {
+  // 调用拖拽功能
+  draggableFun("draggable");
+});
+
 // 点击关闭按钮回调
 const handleClose = () => {
   $emit("closeDialog", false);
@@ -55,11 +64,12 @@ const handleClose = () => {
   }
 
   .petrol {
-    position: relative;
+    position: absolute;
     width: 668px;
     height: 401px;
     background-image: url(@/assets/images/56.png);
     background-size: 100% 100%;
+    user-select: none; /* 防止文字被选中 */
 
     .title {
       margin-top: 3px;

src/views/server/center/toiletDetailDialog.vue

@@ -4,7 +4,7 @@
     <div class="mask" @click="handleClose"></div>
 
     <!-- 内容弹窗区域 -->
-    <div class="toilet">
+    <div class="toilet" id="draggable">
       <!-- 名称区域 -->
       <div class="title" :title="currentToilet">{{ currentToilet }}</div>
 
@@ -33,6 +33,8 @@
 import { onMounted, ref } from "vue";
 // 引入厕所数据
 import { toiletData } from "@/components/map/toiletData";
+// 引入拖拽功能文件
+import { draggableFun } from "@/utils/draggable";
 
 const $emit = defineEmits(["closeDialog"]);
 const props = defineProps(["currentToilet"]);
@@ -44,6 +46,8 @@ onMounted(() => {
   // 匹配出当前厕所的信息
   info.value = toiletData.find((ele: any) => ele.title === props.currentToilet);
   // console.log(info.value);
+  // 调用拖拽功能
+  draggableFun("draggable");
 });
 
 // 点击关闭按钮回调
@@ -74,11 +78,12 @@ const handleClose = () => {
   }
 
   .toilet {
-    position: relative;
+    position: absolute;
     width: 668px;
     height: 672px;
     background-image: url(@/assets/images/88.png);
     background-size: 100% 100%;
+    user-select: none; /* 防止文字被选中 */
 
     .title {
       margin-top: 3px;

vite.config.ts

@@ -9,6 +9,9 @@ export default defineConfig(({ command, mode }) => {
   return {
     plugins: [vue()],
     base: "/2024/",
+    build: {
+      outDir: "2024",
+    },
     resolve: {
       alias: {
         // 相对路径别名配置，使用 @ 代替 src