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