5 changed files with 48 additions and 44561 deletions
File diff suppressed because one or more lines are too long
@ -1,252 +0,0 @@ |
|||
<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> |
|||
Loading…
Reference in new issue