562 lines
16 KiB
Vue
562 lines
16 KiB
Vue
<template>
|
|
<div class="statistical" id="bg-pan">
|
|
<Map
|
|
@onload="handlerOnMapLoad"
|
|
@handlerGetDetails="handlerGetDetails"
|
|
style="
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
height: calc(100vh - 80px);
|
|
width: 100%;
|
|
z-index: 0;
|
|
"
|
|
ref="MapboxComponent"
|
|
@showMonitor="showMonitor"
|
|
@handlerQueryIntersectTif="handlerQueryIntersectTif"
|
|
:layer="layerSettings"
|
|
:defaultColor="defaultColor"
|
|
/>
|
|
|
|
<div style="position: absolute; left: 60px; bottom: 20px; z-index: 1" v-if="false">
|
|
<div
|
|
:class="`button-item ${buttonSelect == 1 ? 'button-select' : ''}`"
|
|
style="margin-bottom: 10px"
|
|
@click="changeLayer(1)"
|
|
>导航地图</div
|
|
>
|
|
<div
|
|
:class="`button-item ${buttonSelect == 2 ? 'button-select' : ''}`"
|
|
style="margin-bottom: 10px"
|
|
@click="changeLayer(2)"
|
|
>卫星地图</div
|
|
>
|
|
<div
|
|
:class="`button-item ${buttonSelect == 3 ? 'button-select' : ''}`"
|
|
@click="changeLayer(3)"
|
|
>白板地图</div
|
|
>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div v-if="subject == '非法采矿'" class="button-item router-button" style="position: absolute;top: -50px;width: 200px;left: 0px;background-size: 100% 100%;height: 37px;
|
|
font-size: 16px;cursor: pointer" @click="goRouter">汇总表</div>
|
|
<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>
|
|
|
|
<a-modal
|
|
class="dragModal"
|
|
width="100%"
|
|
wrap-class-name="full-modal"
|
|
v-model:open="showInfoOpen"
|
|
title="详情"
|
|
:footer="null"
|
|
:maskClosable="true"
|
|
:destroyOnClose="true"
|
|
@cancel="showInfoOpen = false"
|
|
>
|
|
<div class="modal-content">
|
|
<template v-if="showInfoOpen">
|
|
<ShowInfoModal :showInfoData="showInfoData" v-if="subject == '违法用地'" />
|
|
<MainShowInfoModal :id="showMainInfoId" v-if="subject == '非法采矿'" />
|
|
<DegrainingShowInfoModal :showInfoData="showInfoData" v-if="subject == '耕地非粮化'" />
|
|
<KeyShowInfoModal :showInfoData="showInfoData" v-if="subject == '重点问题'" />
|
|
<InspectionAuditShowInfoModal :showInfoData="showInfoData" v-if="subject == '巡察审计'" />
|
|
<RedLineShowInfoModal :showInfoData="showInfoData" v-if="subject == '生态保护红线监管'" />
|
|
<RepairShowInfoModal :showInfoData="showInfoData" v-if="subject == '生态修复'" />
|
|
</template>
|
|
</div>
|
|
</a-modal>
|
|
|
|
<!-- 图层控制 视频监控-->
|
|
|
|
<div class="layer-center-container">
|
|
<LayerCenter
|
|
v-if="layerCenterShow"
|
|
@drawPolygon="drawPolygon"
|
|
@cancleDrawPolygon="cancleDrawPolygon"
|
|
@changeTifLayer="changeTifLayer"
|
|
:layerInfo="layerInfo"
|
|
ref="LayerCenterComponent"
|
|
></LayerCenter>
|
|
</div>
|
|
|
|
<div class="TC-videoi-container" v-if="showTCLPlayer" v-drag>
|
|
<div class="close-button" @click="showTCLPlayer = false">
|
|
<CloseOutlined></CloseOutlined>
|
|
</div>
|
|
<Monitor v-if="showTCLPlayer" :play-url="playUrl"></Monitor>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
|
import Map from './Converge/index.vue';
|
|
import layerButton from './mapComponent/left_layerButton.vue';
|
|
import statisticalType from './mapComponent/left_statisticalType.vue';
|
|
import county from './mapComponent/left_county.vue';
|
|
import DataScreen from './dataScreen/index.vue';
|
|
import Header from './mapComponent/top_title.vue';
|
|
import {
|
|
ShowInfoModal,
|
|
MainShowInfoModal,
|
|
DegrainingShowInfoModal,
|
|
KeyShowInfoModal,
|
|
InspectionAuditShowInfoModal,
|
|
RedLineShowInfoModal,
|
|
RepairShowInfoModal,
|
|
} from './page';
|
|
|
|
import { getLoadDroneCaseInfoDetail, getCaseInfoById } from '@/api/tiankongdi/index';
|
|
import { useRoute } from 'vue-router';
|
|
import { getConfig } from '@/api/sys/layerManagement';
|
|
import { GetCaseInfoById } from '@/api/degraining/index';
|
|
import { getInspectionAuditCaseInfoById } from '@/api/inspectionaudit/index';
|
|
import { getRedLineCaseInfoById } from '@/api/redlinesupervision/index';
|
|
import { getRepairCaseInfoById } from '@/api/shengtaixiufu/index';
|
|
import { getCaseInfoByIdtotal } from '@/api/keyproblem/keyissuesI/index';
|
|
|
|
const route: any = useRoute();
|
|
const subject = ref(route.params.id);
|
|
const legends: any = ref([]);
|
|
const layerSettings = ref();
|
|
// details
|
|
const showInfoOpen = ref<Boolean>(false);
|
|
const showInfoData = ref();
|
|
const buttonSelect = ref(2);
|
|
const showMainInfoId = ref();
|
|
|
|
const getInfoList = (id) => {
|
|
console.log(id);
|
|
console.log(subject.value);
|
|
if (subject.value == '违法用地') {
|
|
getCaseInfoById({ id: id }).then((res) => {
|
|
if (res) {
|
|
showInfoData.value = res;
|
|
showInfoOpen.value = true;
|
|
// 添加鼠标拖动监听器
|
|
addListener();
|
|
}
|
|
});
|
|
} else if (subject.value == '非法采矿') {
|
|
showMainInfoId.value = id;
|
|
showInfoOpen.value = true;
|
|
// 添加鼠标拖动监听器
|
|
addListener();
|
|
} else if (subject.value == '耕地非粮化') {
|
|
GetCaseInfoById({ id: id }).then((res) => {
|
|
showInfoData.value = res;
|
|
showInfoOpen.value = true;
|
|
// 添加鼠标拖动监听器
|
|
addListener();
|
|
});
|
|
} else if (subject.value == '重点问题') {
|
|
getCaseInfoByIdtotal({ id: id }).then((res) => {
|
|
showInfoData.value = res;
|
|
showInfoOpen.value = true;
|
|
// 添加鼠标拖动监听器
|
|
addListener();
|
|
});
|
|
} else if (subject.value == '巡察审计') {
|
|
getInspectionAuditCaseInfoById({ id: id }).then((res) => {
|
|
showInfoData.value = res;
|
|
showInfoOpen.value = true;
|
|
// 添加鼠标拖动监听器
|
|
addListener();
|
|
});
|
|
} else if (subject.value == '生态保护红线监管') {
|
|
getRedLineCaseInfoById({ id: id }).then((res) => {
|
|
showInfoData.value = res;
|
|
showInfoOpen.value = true;
|
|
// 添加鼠标拖动监听器
|
|
addListener();
|
|
});
|
|
} else if (subject.value == '生态修复') {
|
|
getRepairCaseInfoById({ id: id }).then((res) => {
|
|
showInfoData.value = res;
|
|
showInfoOpen.value = true;
|
|
// 添加鼠标拖动监听器
|
|
addListener();
|
|
});
|
|
}
|
|
};
|
|
|
|
const MapboxComponent = ref();
|
|
const countyId = ref();
|
|
const defaultColor = ref('#FFFFFF');
|
|
const layerCenterShow = ref(false);
|
|
function getLayerSettings() {
|
|
let title = '';
|
|
switch (subject.value) {
|
|
case '违法用地':
|
|
title = 'Subject_WFYD';
|
|
defaultColor.value = '#F70303';
|
|
break;
|
|
case '非法采矿':
|
|
title = 'Subject_FFCK';
|
|
// legends.value.push({
|
|
// label: '默认',
|
|
// color: '#F4E004',
|
|
// });
|
|
defaultColor.value = '#F4E004';
|
|
break;
|
|
case '耕地非粮化':
|
|
title = 'Subject_GDFLH';
|
|
defaultColor.value = '#F70303';
|
|
break;
|
|
case '重点问题':
|
|
title = 'Subject_ZDWT';
|
|
// legends.value.push({
|
|
// label: '默认',
|
|
// color: '#FFFFFF',
|
|
// });
|
|
break;
|
|
case '巡察审计':
|
|
title = 'Subject_XCSJ';
|
|
defaultColor.value = '#F70303';
|
|
break;
|
|
case '生态保护红线监管':
|
|
title = 'Subject_STBHHXJG';
|
|
// legends.value.push({
|
|
// label: '默认',
|
|
// color: '#FFFFFF',
|
|
// });
|
|
break;
|
|
case '生态修复':
|
|
title = 'Subject_STXF';
|
|
// legends.value.push({
|
|
// label: '默认',
|
|
// color: '#F70303',
|
|
// });
|
|
defaultColor.value = '#F70303';
|
|
break;
|
|
}
|
|
getConfig({
|
|
code: title,
|
|
}).then((res) => {
|
|
let obj = JSON.parse(res.codeValue);
|
|
layerSettings.value = obj[0];
|
|
layerInfo.value = layerSettings.value.layerinfo;
|
|
layerCenterShow.value = true;
|
|
let legend = layerSettings.value.legend[0];
|
|
for (const key in legend) {
|
|
legends.value.push({
|
|
label: key,
|
|
color: legend[key].colour,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
function handlerOnMapLoad() {}
|
|
|
|
function handlerGetDetails(e) {
|
|
console.log(e);
|
|
getInfoList(e.Id);
|
|
}
|
|
|
|
// 选择区县
|
|
const currentCounty = ref({ name: '', code: '' });
|
|
function countyClick(data) {
|
|
countyId.value = data.id;
|
|
currentCounty.value = { name: data['name'], code: data['id'] };
|
|
MapboxComponent.value.handlerChangeCounty(currentCounty.value);
|
|
}
|
|
|
|
// 图例点击
|
|
function handlerChangePolygonType(data) {
|
|
MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], data);
|
|
}
|
|
|
|
// 切换图斑类型
|
|
function changeLandType(type): void {
|
|
MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], '', type);
|
|
}
|
|
const changeLayer = (value) => {
|
|
buttonSelect.value = value;
|
|
switch (value) {
|
|
case 1:
|
|
MapboxComponent.value.handlerChangeLayerVisible('tdt-img-tiles', false);
|
|
MapboxComponent.value.handlerChangeLayerVisible('tdt-vec-tiles', true);
|
|
MapboxComponent.value.handlerChangeLayerVisible('countyPanelLayer', false);
|
|
break;
|
|
case 2:
|
|
MapboxComponent.value.handlerChangeLayerVisible('tdt-img-tiles', true);
|
|
MapboxComponent.value.handlerChangeLayerVisible('tdt-vec-tiles', false);
|
|
MapboxComponent.value.handlerChangeLayerVisible('countyPanelLayer', false);
|
|
break;
|
|
case 3:
|
|
MapboxComponent.value.handlerChangeLayerVisible('tdt-img-tiles', false);
|
|
MapboxComponent.value.handlerChangeLayerVisible('tdt-vec-tiles', false);
|
|
MapboxComponent.value.handlerChangeLayerVisible('countyPanelLayer', true);
|
|
break;
|
|
}
|
|
};
|
|
|
|
/*图层控制 视频监控*/
|
|
import LayerCenter from './mapComponent/layers/index.vue';
|
|
|
|
// 视频监控
|
|
import Monitor from './mapComponent/monitor/index.vue';
|
|
import { CloseOutlined } from '@ant-design/icons-vue';
|
|
import { is } from '@/utils/is';
|
|
|
|
const showTCLPlayer = ref(false);
|
|
const playUrl = ref('');
|
|
function showMonitor(info) {
|
|
playUrl.value = info.playUrl;
|
|
showTCLPlayer.value = true;
|
|
}
|
|
|
|
// 历史影像
|
|
|
|
function drawPolygon(state) {
|
|
// 调用Map控件中的绘图方法
|
|
MapboxComponent.value.handlerDrawPolygon();
|
|
}
|
|
|
|
function cancleDrawPolygon() {
|
|
MapboxComponent.value.handlerDeletePolygon();
|
|
}
|
|
|
|
const LayerCenterComponent = ref();
|
|
const layerInfo = ref([]);
|
|
function handlerQueryIntersectTif(wktStr) {
|
|
LayerCenterComponent.value.handlerQueryIntersectTif(wktStr);
|
|
}
|
|
|
|
function changeTifLayer(layer) {
|
|
console.log('layer', layer);
|
|
|
|
MapboxComponent.value.handlerChangeTifLayer(layer);
|
|
}
|
|
|
|
|
|
// 鼠标拖动监听器-参数
|
|
let isDragging = false;
|
|
let initialMouseX;
|
|
let initialMouseY;
|
|
let initialModalX;
|
|
let initialModalY;
|
|
// 添加鼠标拖动监听器
|
|
function addListener() {
|
|
setTimeout(() => {
|
|
const dragModalDocument: any = document.querySelector('.dragModal');
|
|
if (dragModalDocument) {
|
|
// 鼠标按下
|
|
dragModalDocument.addEventListener('mousedown', function(event) {
|
|
isDragging = true;
|
|
initialMouseX = event.clientX;
|
|
initialMouseY = event.clientY;
|
|
initialModalX = dragModalDocument.offsetLeft;
|
|
initialModalY = dragModalDocument.offsetTop;
|
|
dragModalDocument.style.cursor = 'grabbing';
|
|
});
|
|
// 鼠标移动
|
|
dragModalDocument.addEventListener('mousemove', function(event) {
|
|
if (isDragging) {
|
|
const deltaX = event.clientX - initialMouseX;
|
|
const deltaY = event.clientY - initialMouseY;
|
|
dragModalDocument.style.left = initialModalX + deltaX + 'px';
|
|
dragModalDocument.style.top = initialModalY + deltaY + 'px';
|
|
}
|
|
});
|
|
// 鼠标放开
|
|
dragModalDocument.addEventListener('mouseup', function(event) {
|
|
isDragging = false;
|
|
dragModalDocument.style.cursor = 'default';
|
|
});
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
onMounted(() => {
|
|
getLayerSettings();
|
|
});
|
|
const goRouter = () => {
|
|
route.push({ path: '/caseoffence/feifacaikuang' })
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.button-item {
|
|
width: 96px;
|
|
height: 32px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
font-size: 11px;
|
|
color: #7ebbff;
|
|
background: url('@/assets/statistical/blue_bg.png') no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.button-select {
|
|
color: #06ebb7;
|
|
background: url('@/assets/statistical/green_bg.png') no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.statistical {
|
|
// position: relative;
|
|
// 页面不能被选中
|
|
-webkit-user-select: none; /* Safari */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* IE/Edge */
|
|
user-select: none;
|
|
}
|
|
|
|
#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: 200px;
|
|
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 {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**图层控制 视频监控**/
|
|
.layer-center-container {
|
|
width: 208px;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 20px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.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>
|