mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

减少homtmap层级

develop
little4 1 month ago
parent
526a82ab1f
commit
6ce2a836b4
2 changed files with 280 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
  2. 252
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/index_bc.vue

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

@ -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()

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

@ -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>
Write Preview
Loading…
Cancel
Save