319 lines
7.6 KiB
Vue
319 lines
7.6 KiB
Vue
<template>
|
|
<a-spin size="large" tip="图层加载中..." :spinning="spinning" wrapperClassName="solid-spin">
|
|
<div class="statistical" id="bg-pan" ref="container">
|
|
<Map
|
|
style="
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
height: calc(100vh - 80px);
|
|
width: 100%;
|
|
z-index: 0;
|
|
"
|
|
ref="MapboxComponent"
|
|
@handlerGetDetails="handlerGetDetails"
|
|
@changeLoading="changeLoading"
|
|
/>
|
|
<div class="legend">
|
|
<div class="legend-item" v-for="(item, index) in legends" :key="index">
|
|
<div class="legend-dot" :style="{ background: item.color }"></div>
|
|
<div class="legend-label">{{ item.label }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="layer-center-container"
|
|
:style="style">
|
|
<div class="drag-area"
|
|
@mousedown="startDrag"></div>
|
|
<LayerCenter
|
|
@changeLayer="changeLayer"
|
|
@changeLabel="changeLabel"
|
|
ref="LayerCenterComponent"
|
|
></LayerCenter>
|
|
</div>
|
|
|
|
<a-modal
|
|
title="详情"
|
|
width="100%"
|
|
wrap-class-name="full-modal"
|
|
v-model:open="showInfoOpen"
|
|
:footer="null"
|
|
:destroyOnClose="true">
|
|
<IdleWatersInsertModal v-if="showInfoType == 5" :showInfoData="showInfoData" :showInfoFlyToPoint="showInfoFlyToPoint" :isRead="true"/>
|
|
<IdleLandInsertModal v-if="showInfoType == 3" :showInfoData="showInfoData" :showInfoFlyToPoint="showInfoFlyToPoint" :isRead="true"/>
|
|
<IdleHouseInsertModal v-if="showInfoType == 2" :showInfoData="showInfoData" :showInfoFlyToPoint="showInfoFlyToPoint" :isRead="true"/>
|
|
<IdleFarmingInsertModal v-if="showInfoType == 1" :showInfoData="showInfoData" :showInfoFlyToPoint="showInfoFlyToPoint" :isRead="true"/>
|
|
<IdleNongjiInsertModal v-if="showInfoType == 4" :showInfoData="showInfoData" :showInfoFlyToPoint="showInfoFlyToPoint" :isRead="true"/>
|
|
</a-modal>
|
|
</div>
|
|
</a-spin>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import Map from './Converge/index.vue';
|
|
import useDrag from './drag';
|
|
import LayerCenter from './mapComponent/layers/index.vue';
|
|
import { getDetail } from '@/api/tiankongdi/index'
|
|
import IdleWatersInsertModal from '@/views/demo/IdleWaters/InsertModal.vue'
|
|
import IdleLandInsertModal from '@/views/demo/IdleLand/InsertModal.vue'
|
|
import IdleHouseInsertModal from '@/views/demo/IdleHouse/InsertModal.vue'
|
|
import IdleFarmingInsertModal from '@/views/demo/IdleFarming/InsertModal.vue'
|
|
import IdleNongjiInsertModal from '@/views/demo/IdleNongji/InsertModal.vue'
|
|
|
|
const { style, startDrag } = useDrag();
|
|
|
|
const MapboxComponent = ref();
|
|
const showInfoData = ref()
|
|
const showInfoType = ref()
|
|
const showInfoFlyToPoint = ref()
|
|
const showInfoOpen = ref(false)
|
|
const spinning = ref(false)
|
|
const legends = ref([
|
|
{ label:'房屋', color: '#F70303' },
|
|
{ label:'土地资源', color: '#0AF703' },
|
|
{ label:'水域', color: '#0382F7' },
|
|
{ label:'农业生产设施', color: '#F4E004' },
|
|
])
|
|
|
|
onMounted(() => {
|
|
spinning.value = true
|
|
})
|
|
const changeLoading = (type: boolean) => {
|
|
spinning.value = type
|
|
}
|
|
function changeLayer(layerList) {
|
|
MapboxComponent.value.handlerChangeLayer(layerList);
|
|
}
|
|
const changeLabel = (type) => {
|
|
MapboxComponent.value.changeTiandituLabelOpen(type);
|
|
}
|
|
const handlerGetDetails = (item, flyPoint) => {
|
|
console.log('item',item)
|
|
showInfoType.value = item.Type
|
|
getDetail( {id:item.Id} , item.Type).then(res => {
|
|
console.log('res',res)
|
|
showInfoData.value = res
|
|
showInfoOpen.value = true
|
|
showInfoFlyToPoint.value = flyPoint
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.full-modal {
|
|
.ant-modal {
|
|
min-width: 100vw;
|
|
top: 0px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
.ant-modal-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.ant-modal-body {
|
|
flex: 1;
|
|
}
|
|
}
|
|
.statistical{
|
|
|
|
:deep(.ant-modal-header){
|
|
padding: 0px;
|
|
}
|
|
:deep(.ant-modal-wrap){
|
|
overflow: hidden;
|
|
pointer-events:none;
|
|
}
|
|
:deep(.dragModal){
|
|
margin: 0 !important;
|
|
.hidden-show-icon{
|
|
width: 28px;
|
|
height: 28px;
|
|
background-size: 100% 100%;
|
|
margin-left: 20px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.statistical {
|
|
// position: relative;
|
|
// 页面不能被选中
|
|
-webkit-user-select: none; /* Safari */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* IE/Edge */
|
|
user-select: none;
|
|
width:100%;
|
|
height:calc(-80px + 100vh);
|
|
position:relative;
|
|
}
|
|
|
|
#bg-pan {
|
|
|
|
}
|
|
#alertOverlay::before,
|
|
#alertOverlay::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 50px;
|
|
height: 100%;
|
|
}
|
|
|
|
#alertOverlay div::before,
|
|
#alertOverlay div::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 50px;
|
|
}
|
|
|
|
#alertOverlay::before {
|
|
background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
|
|
top: 0;
|
|
left: 0;
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
#alertOverlay::after {
|
|
background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
|
|
top: 0%;
|
|
left: 100%;
|
|
transform: rotate(0deg) translate(calc(-1 * 50px), 0px);
|
|
}
|
|
|
|
#alertOverlay div::before {
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
|
|
top: 0;
|
|
left: 0;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
#alertOverlay div::after {
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
|
|
top: 100%;
|
|
left: 0;
|
|
transform: rotate(0deg) translate(0px, calc(-1 * 50px));
|
|
}
|
|
|
|
#alertOverlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
opacity: 1;
|
|
transition: opacity 0.5s;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.alert-active {
|
|
animation: blink 0s infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.legend {
|
|
width: 220px;
|
|
padding: 10px;
|
|
position: absolute;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
column-gap: 30px;
|
|
border-radius: 8px;
|
|
background-image: url('/statistical/left_statistical.png');
|
|
background-size: 100% 100%;
|
|
.legend-item {
|
|
width: 120px;
|
|
padding: 5px 0px;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
display: flex;
|
|
flex: 48% 48%;
|
|
color: #7ebbff;
|
|
.legend-dot {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.legend-label {
|
|
margin-left: 12px;
|
|
}
|
|
}
|
|
.flh-item{
|
|
width: 120px;
|
|
}
|
|
}
|
|
|
|
/**图层控制 视频监控**/
|
|
.layer-center-container {
|
|
width:285px;
|
|
position: absolute;
|
|
}
|
|
.drag-area{
|
|
width:245px;
|
|
height:40px;
|
|
position:absolute;
|
|
top:0px;
|
|
left:0px;
|
|
z-index:99999;
|
|
cursor:move;
|
|
}
|
|
.TC-videoi-container {
|
|
position: absolute;
|
|
bottom: 48px;
|
|
right: 38px;
|
|
width: 418px;
|
|
height: 300px;
|
|
.close-button {
|
|
width: 28px;
|
|
height: 28px;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
text-align: center;
|
|
line-height: 28px;
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
z-index: 999999;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.selection-button {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 20px;
|
|
left: 220px;
|
|
width: 140px;
|
|
height: 40px;
|
|
margin-left: 20px;
|
|
background-image: url(/map/change-view-btn.png);
|
|
background-size: 100% 100%;
|
|
color: #efefef;
|
|
text-align: center;
|
|
line-height: 46px;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
<style>
|
|
.solid-spin.ant-spin-nested-loading > .ant-spin-blur::after {
|
|
opacity: 1;
|
|
}
|
|
.solid-spin.ant-spin-nested-loading .ant-spin{
|
|
max-height: none;
|
|
}
|
|
</style>
|