大屏地图作为整体底图 修改

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+**/*.log
+
+tests/**/coverage/
+tests/e2e/reports
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.local
+
+package-lock.json
+yarn.lock

package-lock.json

@@ -14,6 +14,7 @@
         "echarts": "^5.5.0",
         "element-plus": "^2.6.2",
         "lodash-es": "^4.17.21",
+        "mitt": "^3.0.1",
         "mockjs": "^1.1.0",
         "pinia": "^2.1.7",
         "vite-plugin-html": "^3.2.2",
@@ -3562,6 +3563,11 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "node_modules/mlly": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.1.tgz",

package.json

@@ -17,6 +17,7 @@
     "echarts": "^5.5.0",
     "element-plus": "^2.6.2",
     "lodash-es": "^4.17.21",
+    "mitt": "^3.0.1",
     "mockjs": "^1.1.0",
     "pinia": "^2.1.7",
     "vite-plugin-html": "^3.2.2",

public/static/map_load.js

@@ -5,9 +5,9 @@ var bmapcfg = {
   'imgext': '.jpg',   //瓦片图的后缀 ------ 根据需要修改，一般是 .png .jpg
 //这里我直接用的路径是/static/bmap_offline_demo/tiles，如果瓦片数量较大，可改为瓦片服务的地址
      tiles_dir: "images", //普通瓦片图的地址，为空默认在 offlinemap/tiles/ 目
-    tiles_path  : 'http://172.16.1.162:8123/HeBeiDarkMap/',
+    tiles_path  : 'http://111.229.30.246:4008/HeBeiDarkMap/',
-    tiles_hybrid: 'http://172.16.1.162:8123/HeBeiDarkMap/',       //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目
+    tiles_hybrid: 'http://111.229.30.246:4008/HeBeiDarkMap/',       //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目
-    tiles_self  : 'http://172.16.1.162:8123/HeBeiDarkMap/'        //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
+    tiles_self  : 'http://111.229.30.246:4008/HeBeiDarkMap/'        //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
     // tiles_path: "http://111.229.30.246:4008/HeBeiDarkMap/",
     // tiles_hybrid: "http://111.229.30.246:4008/HeBeiDarkMap/", //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目
     // tiles_self: "http://111.229.30.246:4008/HeBeiDarkMap/", //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录

src/utils/eventBus.ts

@@ -0,0 +1,2 @@
+import mitt from 'mitt';
+export const emitter = mitt();

src/views/HomeView.vue

@@ -2,12 +2,16 @@
 import { ref } from "vue";
 import { RouterView } from "vue-router";
 import ScaleScreen from "@/components/scale-screen";
+import Left from "./component/left.vue";
+import Right from "./component/right.vue";
+import Center from "./component/center.vue";
 import Headers from "./header.vue";
 import Setting from "./setting.vue";
 import { useSettingStore } from "@/stores/index";
 import { storeToRefs } from "pinia";
 import MessageContent from "@/components/Plugins/MessageContent";
-import Map from "./component/map.vue"
+import Map from "./component/map.vue";
+import Home from "./index/index.vue"
 const settingStore = useSettingStore();
 const { isScale } = storeToRefs(settingStore);
 const wrapperStyle = {};
@@ -26,11 +30,27 @@ const wrapperStyle = {};
     :wrapperStyle="wrapperStyle"
     :autoScale="isScale"
   >
-   <Map width="12960"
-    height="2430"></Map>
     <div class="content_wrap">
+      <!-- 背景层 -->
+      <div class="background_layer">
+        <Map />
+        <div class="header_layer">
+          <!-- <Headers /> -->
+        </div>
+        <div class="left">
+          <Left title=""></Left>
+        </div>
+        <div class="right">
+          <Right title=""></Right>
+        </div>
+        <Center class="center" />
+      </div>
+
+      <!-- 前景层 -->
+      <!-- <div class="foreground_layer">
         <Headers />
         <RouterView />
+      </div> -->
       <!-- <MessageContent /> -->
     </div>
   </scale-screen>
@@ -40,11 +60,43 @@ const wrapperStyle = {};
 .content_wrap {
   width: 100%;
   height: 100%;
-  // padding: 16px 16px 16px 16px;
+  position: relative;
-  box-sizing: border-box;
   background-image: url("@/assets/img/pageBg.png");
   background-size: cover;
   background-position: center center;
+  overflow: hidden; // 防止地图溢出边界
+}
+
+.background_layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  // z-index: 0; // 确保在前景层之下
   position: relative;
+  .header_layer{
+    position: absolute;
+    top: 0;
+  }
+  .left{
+    position: absolute;
+    top: 100px;
+    left: 0;
+  }
+  .right{
+    position: absolute;
+    top: 100px;
+    right: 0;
+  }
+  .center{
+    position: absolute;
+    top: 100px;
+  }
+}
+
+.foreground_layer {
+  position: relative;
+  // z-index: 1; // 确保在背景层之上
 }
 </style>

src/views/component/center.vue

@@ -47,10 +47,6 @@
         <DeviceInfoComponentTwo :deviceInfo="deviceInfoTwo" />
       </div>
     </div>
-    <div v-if="showMap" class="map-container">
-      <!-- <div id="baiduMap" style="width: 100%; height: 100%;"></div> -->
-      <Map @show-device-info="handleShowDeviceInfo"></Map>
-    </div>
   </div>
 </template>
 
@@ -67,7 +63,7 @@ import hub from "@/assets/img/hub.png";
 import { getDeviceList } from "@/api/modules/index";
 import DeviceInfoComponentTwo from "./DeviceInfoComponentTwo.vue";
 import Map from "./map.vue"
-
+import { emitter } from '@/utils/eventBus';
 const showServiceArea = ref(false);
 const showMap = ref(true);
 const showDeviceInfo = ref(false);
@@ -131,12 +127,18 @@ const deviceInfoTwo = ref({
 
 // const deviceInfo = ref({});
 function handleShowDeviceInfo(data) {
-  console.log("设备信息数据:", data);
+  console.log("接收到设备信息:", data);
-  if(data.deviceTypeId=="22"){
+
+  // 关闭其他面板
+  showDeviceInfo.value = false;
+  showDeviceInfoTwo.value = false;
+
+  if (data.deviceTypeId === "22" || data.deviceTypeId === "44") {
     showDeviceInfo.value = true;
-  } else if(data.deviceTypeId=="15"){
+  } else if (data.deviceTypeId === "15" || data.deviceTypeId === "53") {
     showDeviceInfoTwo.value = true;
   }
+
   deviceInfo.value = data;
 }
 const closeDeviceInfo = () => {
@@ -145,46 +147,23 @@ const closeDeviceInfo = () => {
    showMap.value = true;
 };
 const mapFlag = ref(true);
-onMounted(async () => {
+onMounted(() => {
-  // 初始化地图相关代码...
+  emitter.on("show-device-info", handleShowDeviceInfo);
-  // if (mapFlag.value) {
-  //   const map = new BMap.Map("baiduMap");
-  //   const point = new BMap.Point(116.827009, 37.890385);
-  //   map.setMinZoom(11);
-  //   map.setMaxZoom(19);
-  //   map.centerAndZoom(point, 11);
-  //   map.enableScrollWheelZoom(true);
-  // }
-
-  // const query = {
-  //   area: "",
-  //   deviceType: 22,
-  //   pageNum: 1,
-  //   pageSize: 9999
-  // };
-  // 调用接口获取设备列表数据
-  // try {
-  //   const res = await getDeviceList(query);
-  //   console.log("设备列表数据:", res);
-  //   // 在这里可以处理返回的数据，例如更新页面状态或渲染内容
-  // } catch (error) {
-  //   console.error("请求设备列表失败:", error);
-  // }
 });
 </script>
 
 <style scoped lang="scss">
 .center-container {
   width: 100%;
-  height: 100%;
+  // height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
   .map-container.bg-header {
     position: absolute;
-    top: 20%;
+    top: 500px;
-    left: 36%;
+    left: 42.5%;
     // transform: translate(-50%, -50%);
     z-index: 2000;
     // box-shadow: 0 8px 40px rgba(0,0,0,0.3);

src/views/component/map.vue

@@ -1,36 +1,36 @@
 <template>
-    <div id="baiduMap" style="width: 100%; height: 100%;">
+  <div id="baiduMap" style="width: 100%; height: 100%">
-        <div style="position:absolute;z-index:10;">
+    <!-- <div style="position: absolute; z-index: 10; top: 10px; left: 10px">
       <button @click="toggleType('22')">切换视频监控</button>
       <button @click="toggleType('44')">切换气象检测器</button>
       <button @click="toggleType('53')">切换广播</button>
       <button @click="toggleType('21')">切换情报板</button>
-        </div>
+    </div> -->
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, nextTick } from "vue";
-import { onMounted } from 'vue';
+import { onMounted } from "vue";
 import { getDeviceList } from "@/api/modules/index";
-const emit = defineEmits(['show-device-info']);
+import { emitter } from '@/utils/eventBus';
+const emit = defineEmits(["show-device-info"]);
 const markerMap = ref({
-  '22': [],
+  "22": [],
-  '44': [],
+  "44": [],
-  '53': [],
+  "53": [],
-  '21': []
+  "21": [],
 });
 const showType = ref({
-  '22': true,
+  "22": true,
-  '44': true,
+  "44": true,
-  '53': true,
+  "53": true,
-  '21': true
+  "21": true,
 });
 let map = null;
-
 function toggleType(type) {
   showType.value[type] = !showType.value[type];
-  markerMap.value[type].forEach(marker => {
+  markerMap.value[type].forEach((marker) => {
     if (showType.value[type]) {
       map.addOverlay(marker);
     } else {
@@ -42,15 +42,19 @@ function toggleType(type) {
 // ...existing code...
 const selectedMarker = ref(null); // 当前选中的marker
 
-const iconModules = import.meta.glob('@/assets/img/map/*.png', { eager: true, import: 'default' });
+const iconModules = import.meta.glob("@/assets/img/map/*.png", {
+  eager: true,
+  import: "default",
+});
 
 function getIcon(type, active = false) {
-  const iconName = {
+  const iconName =
-    '22': active ? 'video-active.png' : 'video.png',
+    {
-    '44': active ? 'weather-active.png' : 'weather.png',
+      "22": active ? "video-active.png" : "video.png",
-    '53': active ? 'broadcast-active.png' : 'broadcast.png',
+      "44": active ? "weather-active.png" : "weather.png",
-    '15': active ? 'info-active.png' : 'info.png'
+      "53": active ? "broadcast-active.png" : "broadcast.png",
-  }[type] || 'default.png';
+      "15": active ? "info-active.png" : "info.png",
+    }[type] || "default.png";
 
   // 获取图片路径
   const iconPath = iconModules[`/src/assets/img/map/${iconName}`];
@@ -60,49 +64,28 @@ function getIcon(type, active = false) {
 onMounted(async () => {
   await nextTick();
   map = new BMap.Map("baiduMap");
-  const point = new BMap.Point(116.827009, 37.890385);
+  // const point = new BMap.Point(116.827009, 37.890385);
+  // const point = new BMap.Point(116.92761921711724 , 38.001363273882994);
+  const point = new BMap.Point(116.54300072996494 ,38.02274278314041);
   map.setMinZoom(11);
   map.setMaxZoom(17);
-  map.centerAndZoom(point, 17);
+  map.centerAndZoom(point, 14);
   map.enableScrollWheelZoom(true);
-  // mapStyle={  style : "midnight" }  
+  map.addEventListener("click", (e) => {
-  // map.setMapStyle(mapStyle);
+    console.log("点击的坐标：", e.point.lng, e.point.lat);
-  map.centerAndZoom(point, 15);  // 初始化地图
+  });
-
-// // 设置深色风格
-// var styleJson = [
-//     {
-//         "featureType": "all",
-//         "elementType": "all",
-//         "stylers": {
-//             "lightness": -40,  // 设置亮度
-//             "saturation": -80  // 设置饱和度
-//         }
-//     }
-// ];
-// map.setMapStyle({
-//     styleJson: styleJson
-// });
-
-// map.setMapStyleV2(
-//   {styleJson:styleJson}
-// )
-// setTimeout(() => {
-//   map.setMapStyleV2(
-//   {styleJson:styleJson}
-// )},10)
 
   const query = {
     area: "",
     deviceType: "",
     pageNum: 1,
-    pageSize: 9999
+    pageSize: 9999,
   };
   try {
     const res = await getDeviceList(query);
     // 假设res.data.list为设备数组
     console.log("设备列表:", res);
-    res.rows.forEach(device => {
+    res.rows.forEach((device) => {
       const type = String(device.deviceTypeId); // 22/53/15/44
       // if (!['22','53','15','44'].includes(type)) return;
       if (!device.lat || !device.lon) return;
@@ -120,19 +103,17 @@ onMounted(async () => {
       console.log("marker:", marker);
       map.addOverlay(marker);
       // 可选：marker点击事件
-      marker.addEventListener('click', () => {
+      marker.addEventListener("click", () => {
         selectedMarker.value = marker;
-        console.log('tttttttt',marker.deviceType, selectedMarker.value)
+
-        if(marker.deviceType === '22') {
+        if (marker.deviceType === "22") {
-          console.log("视频监控设备:", marker.deviceData);
+          emitter.emit("show-device-info", marker.deviceData);
-          emit('show-device-info', marker.deviceData);
+        } else if (marker.deviceType === "44") {
-        } else if (marker.deviceType === '44') {
+          emitter.emit("show-device-info", marker.deviceData);
-          console.log("气象检测器设备:", marker.deviceData);
+        } else if (marker.deviceType === "53") {
-        } else if (marker.deviceType === '53') {
+          emitter.emit("show-device-info", marker.deviceData);
-          console.log("广播设备:", marker.deviceData);
+        } else if (marker.deviceType === "15") {
-        } else if (marker.deviceType === '15') {
+          emitter.emit("show-device-info", marker.deviceData);
-          emit('show-device-info', marker.deviceData);
-          console.log("情报板设备:", marker.deviceData);
         }
       });
     });
@@ -141,3 +122,13 @@ onMounted(async () => {
   }
 });
 </script>
+<style lang="scss" scoped>
+#baiduMap {
+  // z-index: 1;
+}
+.content_wrap {
+  // position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>

vite.config.ts

@@ -57,12 +57,12 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
       strictPort: false,
       proxy: {
         [viteEnv.VITE_APP_CONTROL_BASE_API]: {
-          target: 'http://172.16.1.113:8080/xjIotApi',
+          target: 'http://192.168.1.117:8090/xjIotApi',
           changeOrigin: true,
           rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_CONTROL_BASE_API}`), ''),
         },
         [viteEnv.VITE_APP_BASE_API]: {
-          target: 'http://172.16.1.113:8080/iotApi',
+          target: 'http://192.168.1.117:8090/iotApi',
           changeOrigin: true,
           rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_BASE_API}`), ''),
         }