减少homtmap层级

ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue

@@ -1,6 +1,15 @@
 <template>
   <div style="width: 100%;height: 100%;">
-      <component :is="mapContainer" ref="MapContainerRef" @update:isGisCompleted="(data) => { this.isGisCompleted = data; }"  />
+      <!-- <component :is="mapContainer" ref="MapContainerRef" @update:isGisCompleted="(data) => { this.isGisCompleted = data; }"  /> -->
+        <div class="BMapContainer">
+          <gisMap2d ref="gisMap2d"
+          :mapZoom = "mapZoom"
+          :mapCenter="mapCenter"
+
+          radarSliderBottom="33%"
+          radarSliderRight="14%"
+          mapBoxHeight="100vh" @clickPointEvent="clickPointEvent" widgetBoxDisplay="none"></gisMap2d>
+        </div>
     <div class="Home">
       <section class="content">
         <!-- 左侧 -->
@@ -60,10 +69,13 @@ import RoadAndEvents from "./components/RoadAndEvents/index.vue";
 import Button from "@screen/components/Buttons/Button.vue";
 import Vue from "vue";
 import BMapContainer from "./components/BMapContainer/index.vue";
+import { gisMap2d } from 'gis-map-universal'
+const lnglat = [117.16515148266497,35.2797674572588]
 
 export default {
   name: "Home",
   components: {
+    gisMap2d,
     FocusedMonitoring,
     ConditionStatistics,
     Thumbnail,
@@ -85,21 +97,33 @@ export default {
     return {
       selectedDevice: null,
       isGisCompleted: false,
-      mapContainer:'BMapContainer'
+      mapContainer:'BMapContainer',
+      mapBoxHeight: '100vh',
+      mapZoom: '7.5',   // 默认值'7.5'   String类型
+      mapCenter: lnglat, //默认值[118.75, 36.46] Array类型
+
     };
   },
   provide() {
     return {
       // 2024-06-04更新地图==========================================
       getMap: () => {
-        return this.$refs.MapContainerRef.getMapInstance();
+        return this.$refs.gisMap2d //.getMapInstance();
       },
       setMapZoomAndCenter: (zoom,lnglat) => {
-        this.$refs.MapContainerRef.setMapZoomAndCenter(zoom,lnglat);
+        this.$refs.gisMap2d.setMapZoomAndCenter(zoom,lnglat);
       },
       activeDeviceTypes: Vue.observable([]),
     };
   },
+  async mounted() {
+    // this.$refs.gisMap2d.zoomInBylatlon(
+    //   lnglat,7.5
+    // );
+    // Vue.prototype.map2d = this.$refs.gisMap2d;
+    Vue.prototype.mapIns = this.$refs.gisMap2d;
+    this.isGisCompleted = true;
+  },
   methods: {
     debug(){
       this.$refs.Thumbnail.debug()

ruoyi-ui/src/views/JiHeExpressway/pages/Home/index_bc.vue

@@ -0,0 +1,252 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+      <component :is="mapContainer" ref="MapContainerRef" @update:isGisCompleted="(data) => { this.isGisCompleted = data; }"  />
+    <div class="Home">
+      <section class="content">
+        <!-- 左侧 -->
+        <div class="content-l">
+          <!-- 上 -->
+          <FocusedMonitoring class="card-menu" style="height: 288px;" />
+          <!-- 下 -->
+          <RoadAndEvents ref="RoadAndEventsRef" :isGisCompleted="isGisCompleted" :mapContainer="mapContainer" style="flex:1" class="card-menu" />
+        </div>
+        <div class="content-m">
+        </div>
+
+        <div class="home-icons" >
+          <HomeFilter class="item" />
+          <HomeFrame class="item" />
+          <HomeVector class="item" v-hasPermi="['business:home:exportOperationalReport']" />
+          <HomeWord class="item" />
+          <HomeFrameControl class="item" v-hasPermi="['business:home:batchControl']"  />
+          <HomeWeather class="item" />
+          <HomeWeatherLayer class="item" />
+          <HomeTraffic class="item" />
+        </div>
+        <div class="content-r">
+          <ConditionStatistics class="right card-menu" style="height: 100%;" />
+        </div>
+      </section>
+      <footer class="footer card-menu">
+        <div class="footer-title">
+          <span>济菏高速缩略图</span>
+          <i class="el-icon-s-fold" style="color: #2ad9fd; transform: rotate(-90deg)" @click.stop="handleShrink" />
+        </div>
+        <div class="footer-content">
+          <Thumbnail ref="Thumbnail" />
+        </div>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+import FocusedMonitoring from "./components/FocusedMonitoring/index.vue";
+import Thumbnail from "./components/Thumbnail/index.vue";
+import ConditionStatistics from "./components/ConditionStatistics/index.vue";
+
+import AMapContainer from "./components/AMapContainer/index.vue";
+import HomeFilter from "./components/HomeFilter/index.vue";
+import HomeFrame from "./components/HomeFrame/index.vue";
+import HomeVector from "./components/HomeVector/index.vue";
+import HomeWord from "./components/HomeWord/index.vue";
+import HomeFrameControl from "./components/HomeFrameControl/index.vue";
+import HomeVectorControl from "./components/HomeVectorControl/index.vue";
+import HomeWeather from "./components/HomeWeather/index.vue";
+import HomeWeatherLayer from "./components/HomeWeatherLayer/index.vue";
+import HomeTraffic from "./components/HomeTraffic/index.vue";
+
+import RoadAndEvents from "./components/RoadAndEvents/index.vue";
+import Button from "@screen/components/Buttons/Button.vue";
+import Vue from "vue";
+import BMapContainer from "./components/BMapContainer/index.vue";
+
+export default {
+  name: "Home",
+  components: {
+    FocusedMonitoring,
+    ConditionStatistics,
+    Thumbnail,
+    RoadAndEvents,
+    AMapContainer,
+    BMapContainer,
+    Button,
+    HomeFilter,
+    HomeFrame,
+    HomeVector,
+    HomeFrameControl,
+    HomeVectorControl,
+    HomeWord,
+    HomeWeather,
+    HomeWeatherLayer,
+    HomeTraffic
+  },
+  data() {
+    return {
+      selectedDevice: null,
+      isGisCompleted: false,
+      mapContainer:'BMapContainer'
+    };
+  },
+  provide() {
+    return {
+      // 2024-06-04更新地图==========================================
+      getMap: () => {
+        return this.$refs.MapContainerRef.getMapInstance();
+      },
+      setMapZoomAndCenter: (zoom,lnglat) => {
+        this.$refs.MapContainerRef.setMapZoomAndCenter(zoom,lnglat);
+      },
+      activeDeviceTypes: Vue.observable([]),
+    };
+  },
+  methods: {
+    debug(){
+      this.$refs.Thumbnail.debug()
+    },
+    handleShrink(e) {
+      const translateXElement = e.target.parentElement.parentElement;
+
+      const result =
+        (e.target.style.transform.match(/[-0-9]+/)?.[0] || -90) * -1;
+
+      e.target.style.transform = `rotate(${result}deg)`;
+      if (
+        translateXElement.style.transform !== `translateY(calc(100% - 36px))`
+      ) {
+        translateXElement.style.transform = `translateY(calc(100% - 36px))`;
+        translateXElement.style.position = `absolute`;
+        translateXElement.style.bottom = `0px`;
+      } else {
+        translateXElement.style.transform = `translateY(0)`;
+        translateXElement.style.position = `relative`;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.Home {
+  width: 100%;
+  height: 100%;
+  // height: 100%;
+  // z-index: 6;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  // gap: 30px;
+  padding: 19px 31px 0 25px;
+  // justify-content: center;
+
+
+
+  .card-menu {
+    transition: all 0.24s linear;
+  }
+
+  .content {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    height: 62vh;
+
+    .content-l {
+      width: 480px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      height: 100%;
+      gap: 10px;
+    }
+
+    .content-m {
+      display: flex;
+      gap: 9px;
+      flex: 1;
+    }
+
+    .home-icons {
+      display: flex;
+      gap: 0px;
+      flex-direction: column;
+      z-index: 0;
+      margin-right: 10px;
+      .item {
+        padding-top: 15px;
+      }
+    }
+
+    .content-r {
+      width: 480px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      overflow: hidden;
+      height: 100%;
+    }
+  }
+
+  .footer {
+    width: 100%;
+    // margin: auto;
+    pointer-events: none;
+    overflow: hidden;
+    height: min-content;
+    will-change: height;
+    bottom: 0;
+    z-index: 0;
+
+    >div {
+      pointer-events: all;
+    }
+
+    // position: fixed;
+    // bottom: 0;
+    .footer-title {
+      width: 164px;
+      height: 36px;
+      border-radius: 11px 11px 0px 0px;
+      opacity: 1;
+      border: 1px solid #2ad9fd;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+
+      gap: 15px;
+
+      span {
+        font-size: 16px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        color: #2ad9fd;
+      }
+
+      i {
+        transition: all 0.24s linear;
+        cursor: pointer;
+      }
+
+      // img {
+      //   display: inline-block;
+      //   margin-left: 11px;
+      //   width: 16px;
+      //   height: 13px;
+      //   cursor: pointer;
+      // }
+    }
+
+    .footer-content {
+      width: 100%;
+      height: 200px;
+      background: #005570;
+      border-top: 1px solid #003354;
+    }
+  }
+}
+</style>