gitY
/
LanLingXiangMu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: gitY:2945c442611db9c68e436aaa0d04671dd7ab8699
Branches Tags
gitY:hedong
gitY:main
...
compare: gitY:4e93784a8b9cf2a7e1913f500129588bfb46a9b0
Branches Tags
gitY:hedong
gitY:main

2 Commits
2945c44261 ... 4e93784a8b

Author SHA1 Message Date
徐景良 4e93784a8b Merge branch 'main' of http://123.132.248.154:10000/gitY/LanLingXiangMu 2025-05-22 10:32:28 +08:00
徐景良 744b8e649d 地图首页 2025-05-22 10:32:21 +08:00
28 changed files with 189681 additions and 87 deletions
Show Stats Expand all files Collapse all files

7
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,7 @@
{
"i18n-ally.localesPaths": [
"src/locales",
"src/locales/lang",
"public/resource/tinymce/langs"
]
}

6
src/views/demo/homepage/index.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<Converge />
</template>
<script lang="ts" setup>
import Converge from '@/views/sys/exception/Converge.vue';
</script>

5
src/views/sys/exception/Converge.vue
View File

@ -273,7 +273,7 @@ watchEffect(() => {
const MapboxComponent = ref();
const countyId = ref();
const defaultColor = ref('#FFFFFF');
const layerCenterShow = ref(false);
const layerCenterShow = ref(true);
function getLayerSettings() {
let title = '';
switch (subject.value) {
@ -325,7 +325,8 @@ watchEffect(() => {
break;
}
getConfig({
code: title,
// code: title,
code:"Subject_WFYD",
}).then((res) => {
let obj = JSON.parse(res.codeValue);
layerSettings.value = obj[0];

318
src/views/sys/exception/Converge/Converge.vue Normal file
View File

@ -0,0 +1,318 @@
<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>

16
src/views/sys/exception/Converge/Converge/MonitoringData.json Normal file
View File

@ -0,0 +1,16 @@
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [118.429056,35.387537]
},
"properties": {
"name":"沂南县砖埠镇东岳庄村北可见光",
"playUrl":"http://221.2.83.254:7012/live/37130100181328000001.m3u8"
}
}
]
}

389
src/views/sys/exception/Converge/Converge/SearchComponent.vue Normal file
View File

@ -0,0 +1,389 @@
<template>
<div class="search-container">
<div class="search-input">
<a-input
placeholder="请输入资源编号或地址"
v-model:value="keyword"
allow-clear
@blur="onInputBlue"
></a-input>
</div>
<div class="search-button" @click="searchArea">
<img src="/statistical/search-btn.png" alt="" />
</div>
<div class="search-result-container" v-if="showSearchResult">
<div class="result-item" v-for="(item, index) in searchResult" @click="toPosition(item)">
<div class="search-icon">
<img src="/statistical/search-icon.png" alt="" />
</div>
<div class="level-0">{{ item.type?item.serialNumber: item.id }}</div>
<div class="level-1"></div>
<div class="level-2">{{ item.type? getTypeName(item.type): `${item.county} ${item.street}` }}</div>
</div>
<a-empty v-if="searchResult.length == 0" />
</div>
<!-- <div class="filter-container">
<div class="filter-name">{{ currentFilter }}</div>
<div class="filter-icon" @click="handlerChangeFilterOptions">
<CaretDownOutlined />
</div>
<div class="filter-item-container" v-if="showFilterOptions">
<div
class="filter-item"
v-for="(item, index) in filters"
:key="index"
@click="handlerCheckedFilter(item.name)"
>{{ item.name }}</div
>
</div>
</div> -->
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineExpose, defineEmits, watch } from 'vue';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons-vue';
import axios from 'axios';
// import { getLoadDroneCaseInfoDetail, getPolygonCenter } from '@/api/tiankongdi/index';
// import { homePageLoadCaseInfoTuBanList } from '@/api/demo/system';
// import { getLoadCaseInfoMineralsTuBanList } from '@/api/minerals/index';
import { WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { transformGCJ2WGS } from '@/utils/EpsgTransform';
import { getPageList, getPolygonCenter } from '@/api/tiankongdi/index'
const emits = defineEmits(['toPosition', 'handlerFilter', 'flyToLocation']);
const props = defineProps(['layer', 'layerSettings']);
watch(
() => props.layerSettings,
() => {
subjectName.value = props.layerSettings.subjectname;
subjectTable.value = props.layerSettings.tablename;
Object.keys(props.layerSettings.legend[0]).forEach((item) => {
if (item != '默认') {
filters.value.push({ name: item });
}
});
},
);
const subjectName = ref();
const subjectTable = ref();
async function toPosition(item) {
if (item.location) {
let newCoord = transformGCJ2WGS(item.location[1], item.location[0]);
if (newCoord) {
emits('toPosition', [newCoord.lon, newCoord.lat]);
}
return
}
let filter = '"Id"=\'' + item.id + "'";
let point = await getPolygonCenter({ tablename: 'view_shp_idle', filter: filter });
console.log('point',point)
if (point.length > 0) {
try {
let geojson = WktToGeojson(point[0].centroid_point);
emits('toPosition', geojson.coordinates);
} catch (e) {}
}
}
const searchResult = ref<any>([]);
const filters: any = ref([
{
name: '全部',
},
]);
const showSearchResult = ref(false);
const showFilterOptions = ref(false);
const address = ref()
onMounted(() => {});
function onInputFocus() {
showSearchResult.value = true;
}
function onInputBlue() {
showSearchResult.value = false;
}
async function searchAddress(){
axios({
method: 'get',
url: `https://restapi.amap.com/v3/geocode/geo?key=ed310f0b1f6cfd93edfba42f1a09d4d9&address=`+address.value,
}).then((res) => {
if(res.data){
let location = res.data.geocodes[0].location.split(',')
emits('flyToLocation', location);
}
});
}
const keyword = ref('');
async function searchArea() {
if (keyword.value.match(/^[0-9A-Z]+(-[0-9A-Z]+)*$/)) {
searchResult.value = [];
const params = { page: 1, limit: 10, key: keyword.value};
const types = [1,2,3,5]
Promise.all(types.map(type => getPageList(params, type)))
.then(results => {
console.log('所有请求成功', results);
for(let index = 0; index < results.length; index ++){
let type = 0
switch(index){
case 0:
type = 1;
break
case 1:
type = 2;
break
case 2:
type = 3;
break
case 3:
type = 5;
break
}
results[index].items.forEach(item => {
searchResult.value.push({...item,type:type})
})
}
console.log('searchResult',searchResult.value)
showSearchResult.value = true;
})
.catch(error => {
console.error('至少有一个请求失败', error);
});
} else {
// 地名搜索
axios
.get(
'https://restapi.amap.com/v5/place/text?&key=ee7f561fae9249aeb971bcc661083438&keywords=' +
keyword.value +
'&region=371300&citylimit=true&page_num=1&page_size=10',
)
.then((res) => {
if (res.data.info == 'OK') {
searchResult.value = [];
res.data?.pois?.forEach((item, index) => {
let obj = {
id: item.name,
county: item.cityname,
street: item.adname,
location: item.location?.split(','),
};
searchResult.value.push(obj);
});
showSearchResult.value = true;
}
});
}
}
watch(
() => keyword.value,
(newVal) => {
if (!newVal) {
showSearchResult.value = false;
searchResult.value = [];
}
},
);
const getTypeName = (type) => {
switch(type){
case 3:
return '土地资源'
case 2:
return '房屋'
case 1:
return '农业生产设施'
case 5:
return '水域'
}
}
// 抛出函数
defineExpose({});
</script>
<style type="less" scoped>
.addressbox{
width: 100%;
height: 100%;
display: flex;
background-image: url('/statistical/search-bg.png');
background-size: 100% 100%;
border-top-right-radius: 8px;
position: relative;
.search-input {
flex: auto;
height: 100%;
}
.search-button {
width: 62px;
height: 36px;
border-top-right-radius: 8px;
background: #0a62c6;
text-align: center;
line-height: 36px;
cursor: pointer;
}
}
.search-container {
width: 100%;
height: 100%;
display: flex;
background-image: url('/statistical/search-bg.png');
background-size: 100% 100%;
border-top-right-radius: 8px;
position: relative;
.search-input {
flex: auto;
height: 100%;
}
.search-button {
width: 62px;
height: 36px;
border-top-right-radius: 8px;
background: #0a62c6;
text-align: center;
line-height: 36px;
cursor: pointer;
}
.search-result-container {
width: 100%;
position: absolute;
top: 36px;
left: 0px;
background: rgba(11, 39, 68, 0.8);
border: 1px solid #0a62c6;
border-top: 0px;
padding: 8px 0px;
.result-item {
width: 100%;
height: 38px;
color: #e1ecf8;
display: flex;
line-height: 38px;
padding: 0px 12px;
font-size: 14px;
.search-icon {
width: 28px;
height: 36px;
}
.level-0 {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.level-1 {
margin: 0px 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.level-2 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:hover {
cursor: pointer;
background: #0f3863;
}
}
}
.filter-container {
position: absolute;
top: 0px;
right: -120px;
width: 100px;
border-radius: 6px;
height: 36px;
background: #0a62c6;
line-height: 36px;
color: #fff;
display: flex;
cursor: pointer;
.filter-name {
width: 70px;
text-align: center;
padding: 0px 2px;
font-size: 14px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&::after {
content: '';
width: 2px;
height: 22px;
position: absolute;
top: 7px;
right: 0px;
background: #0751a5;
}
}
.filter-icon {
width: 30px;
line-height: 38px;
text-align: center;
}
.filter-item-container {
width: 100%;
position: absolute;
background: rgba(11, 39, 68, 0.8);
border: 1px solid #0a62c6;
top: 36px;
left: 0px;
.filter-item {
height: 36px;
text-align: center;
&:hover {
cursor: pointer;
background: #0f3863;
}
}
}
}
}
::v-deep .mapboxgl-ctrl-logo {
display: none !important;
}
::v-deep .ant-input {
background: none;
border: 0px;
color: #5e90e1;
line-height: 30px;
text-indent: 8px;
outline: none;
&::placeholder {
color: #5e90e1;
}
}
::v-deep .ant-input-affix-wrapper {
background: none;
border: 0px;
color: #5e90e1;
line-height: 30px;
text-indent: 8px;
outline: none;
}
::v-deep .anticon svg {
color: #fff !important;
}
::v-deep .ant-input::placeholder {
color: #5e90e1;
}
::v-deep .ant-empty-description {
color: #fff;
}
</style>

63
src/views/sys/exception/Converge/Converge/config.ts Normal file
View File

@ -0,0 +1,63 @@
export const MAPBOX_TOKEN = "pk.eyJ1IjoibGllYmFvIiwiYSI6ImNsMXg1OHdtcTE3eDEza3FmODBmeXhldmIifQ.CYYMuikQnGHMtTNq60B_xA";
export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";
export const MAP_VIEWER = {
"兰山区":{
center:{lng: 118.35182370979693, lat: 35.183090621691385},
zoom:10.048587811931847
},
"河东区":{
center:{lng: 118.59697279346507, lat: 35.18490235060048},
zoom:10,
},
"罗庄区":{
center:{lng: 118.32214269732968, lat: 34.88793861991461},
zoom:10.348587811931848,
},
"高新区":{
center:{lng: 118.22321338283429, lat: 35.02848900013085},
zoom:11.197175623863698,
},
"沂河新区":{
center:{lng: 118.56406202558459, lat: 35.02402208121399},
zoom:9.848587811931848,
},
"费县":{
center:{lng: 118.07423584053117, lat: 35.25200708547465},
zoom:9.700000000000005,
},
"平邑县":{
center:{lng: 117.7943998613617, lat: 35.397797381650626},
zoom:9.5,
},
"蒙阴县":{
center:{lng: 118.16071230795704, lat: 35.706258658571166},
zoom:9.500000000000002,
},
"沂水县":{
center:{lng: 118.7262955596875, lat: 35.875369642007094},
zoom:9.500000000000002,
},
"沂南县":{
center:{lng: 118.45908849919756, lat: 35.49273684421736},
zoom:9.748587811931854,
},
"兰陵县":{
center:{lng: 118.10841982910361, lat: 34.81986176408728},
zoom:9.597175623863698,
},
"郯城县":{
center:{lng: 118.32120708234048, lat: 34.635986538650336},
zoom:9.7,
},
"临沭县":{
center:{lng: 118.74187031029359, lat: 34.850952753798644},
zoom:9.848587811931848,
},
"莒南县":{
center:{lng: 118.96807389575793, lat: 35.186365164136504},
zoom:9.848587811931848,
}
}

498
src/views/sys/exception/Converge/Converge/index.vue Normal file
View File

@ -0,0 +1,498 @@
<template>
<div :id="mapContainerName" class="map-container">
<div class="search-container-box">
<SearchComponent
@flyToLocation="flyToLocation"
@toPosition="toPosition"
@handlerFilter="handlerFilter"
:layerSettings="layerSettings"
></SearchComponent>
</div>
<div class="home-button" @click="handlerInitialize"></div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineExpose, defineEmits, defineProps, watch } from 'vue';
import { generateUUID } from '@/components/MapboxMaps/src/tool';
import { WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import mapboxgl, { Map, Popup } from 'mapbox-gl';
import { MAPBOX_TOKEN, TINADITU_TOKEN, MAP_VIEWER } from './config.js';
import axios from 'axios';
import SearchComponent from './SearchComponent.vue';
import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL,VITE_GLOB_LAN_API_URL } = getAppEnvConfig();
const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL);
const mapContainerName = ref<String>();
mapContainerName.value = 'mapContainer-' + generateUUID();
const { VITE_GLOB_YINGXIANG_SERVER, VITE_GLOB_YAOGANYINGXIANG_SERVER } = getAppEnvConfig();
import { getUserOrgs } from '@/api/tiankongdi';
const networkType = ref("WAN");
//
import { TableOutlined, GlobalOutlined, HomeOutlined } from '@ant-design/icons-vue';
// 图层控制 历史影像
import { message, Modal } from 'ant-design-vue';
import U from 'mapbox-gl-utils';
import { MP } from './src/MP.js';
import { GeojsonToWkt } from './src/WktGeojsonTransform.js';
import { layers } from '@/views/sys/exception/util'
const emits = defineEmits([
'onload',
'handlerGetDetails',
'showMonitor',
'handlerQueryIntersectTif',
'changeLoading'
]);
let isZoomVisible: any = false;
let map: Map;
let mp: any = null;
const props = defineProps({
layer: Object,
defaultColor: String,
});
const layerSettings = ref<any>({});
const layerDefaultColor = ref<String>();
watch(
() => props.layer,
(val) => {
layerSettings.value = val;
layerDefaultColor.value = props.defaultColor;
},
);
const initMap = () => {
return new mapboxgl.Map({
container: mapContainerName.value,
language: 'zh-cmn',
projection: 'globe', // wgs84参考系
style: {
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tiles: [
`http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
],
tileSize: 256,
minzoom: 1,
maxzoom: 17,
},
'raster-tiles-font': {
type: 'raster',
tiles: [
`https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`,
],
tileSize: 256,
}
},
layers: [
{
id: 'tdt-vec-tiles',
type: 'raster',
source: 'raster-tiles-font',
maxZoom: 32,
},
{
id: 'tdt-img-tiles',
type: 'raster',
source: 'raster-tiles',
maxZoom: 32,
}
// {
// id: 'tdt-wms-tiles',
// type: 'raster',
// source: 'raster-tiles-geo',
// },
],
},
maxZoom: 22,
minZoom: 8,
zoom: 8,
pitch: 0,
center: [118.30207505530701, 35.30123435040745],
});
};
function loadMapInfo(){
map = initMap();
map.on('load', () => {
//挂载mapbox-gl-utils
U.init(map);
mp = new MP(map);
// 设置2D地图
map.easeTo({ pitch: 0, bearing: 0, duration: 1000 });
map.dragRotate.disable(); // 禁用拖动旋转
map.pitchWithRotate = false; // 禁用旋转时俯仰变化
handlerDealStreet()
handlerDealCountry();
handlerCheckUserOrgs()
getMaskData()
const sources = map.getStyle().sources;
let loadedSources = 0;
Object.keys(sources).forEach(sourceId => {
map.on('sourcedata', (e) => {
if (e.sourceId === sourceId && e.isSourceLoaded) {
loadedSources++;
if (loadedSources === Object.keys(sources).length) {
console.log('所有图层关联的数据源已加载完成');
emits('changeLoading',false)
}
}
});
});
});
}
onMounted(() => {
mapboxgl.accessToken = MAPBOX_TOKEN;
// 获取网络环境后加载地图
loadMapInfo();
})
// 回到初始视角
const handlerInitialize = () => {
map.flyTo({
center: [118.30207505530701, 35.30123435040745], // 设置中心点坐标
zoom: 8, // 设置缩放等级
pitch: 0,
bearing: 0,
duration: 1000,
});
};
function toPosition(item) {
handlerLocation(item, 17.2);
}
function handlerFilter(item) {
}
async function handlerCheckUserOrgs() {
handlerLoadPolygon();
}
function getMaskData() {
map.addLayer({
id: "linyishizhezhao",
type: "raster",
source: {
type: "raster",
tiles: [
"http://175.27.168.120:8080/geoserver/gwc/service/wms?service=WMS&version=1.1.0&request=GetMap&layers=linyishi%3Alinyishizhezhao&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
],
tileSize: 256,
},
layout: {
visibility: "visible",
}
});
}
const handlerGetDetails = (e) => {
emits('handlerGetDetails', e.features[0].properties, [e.lngLat.lng, e.lngLat.lat]);
}
const handlerNongjiGetDetails = (e) => {
emits('handlerGetDetails', e.features[0].properties, e.features[0].geometry.coordinates);
}
function handlerLoadPolygon(code = '', filter = '', type = '', level = '') {
let field_filter = '&field="SerialNumber","Type","Id",';
map.addSource('tianditu-label', {
type: 'raster',
tiles: [
`https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`
],
tileSize: 256
});
map.addLayer({
id: 'tianditu-label-layer',
type: 'raster',
source: 'tianditu-label',
layout: {
visibility: 'none',
}
});
map.loadImage('/homepage/nong.png', (error, image) => {
if (error) throw error;
if (!map.hasImage('nongji-marker')) {
map.addImage('nongji-marker', image);
}
});
layers.forEach(layerItem => {
const sourceId = `${layerItem.id}Source`
map.addSource(sourceId, {
type: 'vector',
tiles: [
VITE_GLOB_API_URL_VAR.value +
'/api/IdleLand/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=' +
layerItem.tableName +
field_filter
],
minzoom: 1,
maxzoom: 20,
});
if(layerItem.id == 'nongji'){
const layerId = `${layerItem.id}SourceLayer`
map.addLayer({
id: layerId,
type: 'symbol',
source: sourceId,
'source-layer': layerItem.tableName,
layout: {
'icon-image': 'nongji-marker',
'icon-size': 0.8,
'icon-allow-overlap': true,
'icon-anchor': 'bottom',
visibility: 'none'
},
});
map.on('click', layerId, handlerNongjiGetDetails);
}else{
const lineLayerId = `${layerItem.id}SourceLineLayer`
const fillLayerId = `${layerItem.id}SourceFillLayer`
map.addLayer({
id: lineLayerId,
type: 'line',
source: sourceId,
'source-layer': layerItem.tableName,
layout: {
'line-join': 'round',
'line-cap': 'round',
visibility: 'none',
},
paint: {
'line-color': layerItem.color,
'line-width': 5,
},
});
map.addLayer({
id: fillLayerId,
type: 'fill',
source: sourceId,
'source-layer': layerItem.tableName,
layout: {
visibility: 'none',
},
paint: {
'fill-color': layerItem.color,
'fill-opacity': 0.5,
},
});
map.on('click', fillLayerId, handlerGetDetails);
}
})
}
// 获取乡镇数据
const handlerDealStreet = (countyName: String = '临沂市'): void => {
map.addSource("zhenjie", {
"type": "vector",
"scheme": "tms",
tiles: [
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Azhenjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
],
tileSize: 512
})
map.addLayer({
id: "zhenjie",
type: "line",
source: "zhenjie",
'source-layer': 'zhenjie',
layout: {
visibility: "visible",
},
paint: {
'line-color': '#42befb', // 设置线的颜色
'line-width': 1, // 设置线的宽度
},
minzoom: 10,
maxzoom: 24,
})
map.addSource("zhenjiepoint", {
"type": "vector",
"scheme": "tms",
tiles: [
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Azhenjiepoint@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
],
tileSize: 512,
})
map.addLayer({
id: "zhenjiepoint",
type: "symbol",
source: "zhenjiepoint",
'source-layer': 'zhenjiepoint',
layout: {
visibility: "visible",
"text-field": "{xzqmc}",
},
paint: {
'text-color': '#041B36',
'text-halo-color': '#fff',
'text-halo-width': 2,
},
minzoom: 10,
maxzoom: 24,
});
};
// 获取县区边界数据
const handlerDealCountry = (countyName: String = '临沂市'): void => {
map.addSource("wmsSource", {
"type": "vector",
"scheme": "tms",
tiles: [
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Axianjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"
],
tileSize: 512
})
map.addLayer({
id: "xianjie",
type: "line",
source: "wmsSource",
'source-layer': 'xianjie',
layout: {
visibility: "visible",
},
paint: {
"line-color": "#6f7ff4",
"line-width": 4,
}
})
map.addSource("xianjiepoint", {
"type": "vector",
"scheme": "tms",
tiles: [
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Alinyishixianjie_point@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
],
tileSize: 512,
})
map.addLayer({
id: "xianjiepoint",
type: "symbol",
source: "xianjiepoint",
'source-layer': 'linyishixianjie_point',
layout: {
visibility: "visible",
"text-field": "{xzqmc}",
"text-size": 18
},
paint: {
'text-color': '#041B36',
'text-halo-color': '#fff',
'text-halo-width': 2,
},
minzoom: 8,
maxzoom: 10,
});
};
// 地图定位
function handlerLocation(lngLat, zoom) {
map.flyTo({
center: lngLat,
zoom: zoom,
bearing: 0,
speed: 1, // 飞行速度
curve: 2, // 飞行曲线
essential: true,
easing(t) {
// 飞行动画函数
return t;
},
});
}
function flyToLocation(e){
map.flyTo({
center: e,
zoom: 12,
bearing: 0,
speed: 1, // 飞行速度
curve: 2, // 飞行曲线
essential: true,
easing(t) {
// 飞行动画函数
return t;
},
});
}
const handlerChangeLayer = (list) => {
const layerIds = layers.map(item => item.id);
layerIds.forEach(id => {
const visibility = list.includes(id) ? 'visible' : 'none';
if(id == 'nongji'){
const layerId = `${id}SourceLayer`
map.setLayoutProperty(layerId, 'visibility', visibility);
}else{
const lineLayerId = `${id}SourceLineLayer`
const fillLayerId = `${id}SourceFillLayer`
map.setLayoutProperty(lineLayerId, 'visibility', visibility);
map.setLayoutProperty(fillLayerId, 'visibility', visibility);
}
})
}
const changeTiandituLabelOpen = (type) => {
map.setLayoutProperty('tianditu-label-layer', 'visibility', type ? 'visible' : 'none');
}
// 抛出函数
defineExpose({
handlerChangeLayer,
changeTiandituLabelOpen
});
</script>
<style type="less" scoped>
.map-container {
width: 100%;
height: 100%;
position: relative;
}
.search-container-box {
position: absolute;
width: 330px;
height: 40px;
top: 72px;
left: 73px;
z-index: 9999;
}
.map-type-switch-container {
width: 208px;
height: 40px;
position: absolute;
top: 72px;
right: 23px;
z-index: 9999;
font-size: 22px;
color: #fff;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.map-type-switch-container .switch-button {
line-height: 40px;
width: 150px;
height: 40px;
float: left;
background: url(/map/change-view-btn.png);
background-size: 100% 100%;
}
.map-type-switch-container .switch-button span {
font-size: 14px;
}
.home-button {
width:40px;
height:40px;
background: url(/map/home-btn.png);
background-size: 100% 100%;
float: right;
position: relative;
text-align: center;
z-index: 10;
top: 72px;
right: 23px;
}
::v-deep .mapboxgl-ctrl-logo {
display: none !important;
}
</style>

554
src/views/sys/exception/Converge/Converge/src/MP.ts Normal file
View File

@ -0,0 +1,554 @@
import U from 'mapbox-gl-utils';
import * as turf from '@turf/turf';
type EventType = 'Point' | 'LineString' | 'Polygon';
interface GenerateGeoJSONDataInterface {
lng: number;
lat: number;
}
interface FeatureCollection {
type: string;
features: Array<any>;
}
const CIRCLE_STYLE = {
'circle-color': '#6495ED',
'circle-radius': 8,
'circle-stroke-width': 2,
'circle-stroke-color': '#ffffff',
};
const LINE_STYLE = {
'line-color': '#6495ED',
'line-width': 3,
};
const LINE_IS_DRAW_STYLE = {
'line-dasharray': [2, 2],
'line-color': '#00FA9A',
'line-width': 3,
};
const POLYGON_STYLE = {
'fill-color': '#FAFAD2',
'fill-opacity': 0.1,
};
function typeOf(obj: any): any {
const toString: any = Object.prototype.toString;
const map: any = {
'[object Boolean]': 'boolean',
'[object Number]': 'number',
'[object String]': 'string',
'[object Function]': 'function',
'[object Array]': 'array',
'[object Date]': 'date',
'[object RegExp]': 'regExp',
'[object Undefined]': 'undefined',
'[object Null]': 'null',
'[object Object]': 'object',
};
return map[toString.call(obj)];
}
function deepClone(data: any): any {
// 获取传入拷贝函数的数据类型
const type = typeOf(data);
// 定义一个返回any类型的数据
let reData: any;
// 递归遍历一个array类型数据，
if (type === 'array') {
reData = [];
for (let i = 0; i < data.length; i++) {
reData.push(deepClone(data[i]));
}
} else if (type === 'object') {
//递归遍历一个object类型数据
reData = {};
for (const i in data) {
reData[i] = deepClone(data[i]);
}
} else {
// 返回基本数据类型
return data;
}
// 将any类型的数据return出去，作为deepClone的结果
return reData;
}
class BaseMP {
map: any;
listeners: {};
constructor(map: any) {
this.map = map;
// 初始化mapbox工具类
U.init(this.map);
this.listeners = {};
}
//监听
on(event: EventType, callback: void) {
console.log('on', event);
this.listeners[event] = callback;
}
off(event: EventType) {
console.log('off', event);
if (this.listeners[event]) {
delete this.listeners[event];
}
}
emit(event: EventType, data: any) {
if (this.listeners[event]) {
this.listeners[event](data);
}
}
//防抖函数
debounce = (func: Function, delay: number) => {
let timer: any = null;
return (...args: any) => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
};
//切换鼠标样式
_changeMouseCursor = (cursor: string = 'pointer') => {
this.map.getCanvas().style.cursor = cursor;
};
//生成geoJson
_generateGeoJSON(data: GenerateGeoJSONDataInterface[], geometryType: EventType) {
/**
* // 生成点类型的GeoJSON
* var data = [{lng: -122.4194, lat: 37.7749}, {lng: -122.408, lat: 37.791}, {lng: -122.431, lat: 37.769}];
* var geoJSON = generateGeoJSON(data, "Point");
*
* // 生成线类型的GeoJSON
* var data = [{lng: -122.4194, lat: 37.7749}, {lng: -122.408, lat: 37.791}, {lng: -122.431, lat: 37.769}];
* var geoJSON = generateGeoJSON(data, "LineString");
*
* // 生成面类型的GeoJSON
* var data = [{lng: -122.4194, lat: 37.7749}, {lng: -122.408, lat: 37.791}, {lng: -122.431, lat: 37.769}];
* var geoJSON = generateGeoJSON(data, "Polygon");
* **/
const featureCollection: FeatureCollection = {
type: 'FeatureCollection',
features: [],
};
switch (geometryType) {
case 'Point':
for (let i = 0; i < data.length; i++) {
const feature = {
type: 'Feature',
geometry: {
type: geometryType,
coordinates: [data[i].lng, data[i].lat],
},
properties: {},
};
featureCollection.features.push(feature);
}
break;
case 'LineString':
const lineFeature = {
type: 'Feature',
geometry: {
type: geometryType,
coordinates: [],
},
properties: {},
};
for (let i = 0; i < data.length; i++) {
lineFeature['geometry']['coordinates'].push([data[i].lng, data[i].lat]);
}
featureCollection.features.push(lineFeature);
break;
case 'Polygon':
const polygonFeature = {
type: 'Feature',
geometry: {
type: geometryType,
coordinates: [[]],
},
properties: {},
};
for (let i = 0; i < data.length; i++) {
polygonFeature['geometry']['coordinates'][0].push([data[i].lng, data[i].lat]);
}
featureCollection.features.push(polygonFeature);
break;
}
return featureCollection;
}
}
export class MP extends BaseMP {
drawModelChoose: { LineString: string; Point: string; Polygon: string; DEFAULT: string };
drawModel: string;
drawLocal: never[];
drawCurrentId: {
point: string; //点
line: string; //线
lastLine: string; //鼠标位置的点
polygon: string;
};
currentMouseLocation: null;
correctionMouseLocation: any;
clickCount: number;
clickTimeout: any;
constructor(map) {
super(map);
this.drawModelChoose = {
LineString: 'LineString',
Point: 'Point',
Polygon: 'Polygon',
DEFAULT: 'default',
};
this.drawModel = this.drawModelChoose.DEFAULT;
this.drawLocal = [];
this.drawCurrentId = {
point: 'current-draw-point', //点
line: 'current-draw-line', //线
lastLine: 'current-draw-last-line', //鼠标位置的点
polygon: 'current-draw-polygon',
};
this.currentMouseLocation = null; //当前鼠标位置
this.correctionMouseLocation = null; //校正后的鼠标位置
this.clickCount = 0; // 定义一个计数器
this.clickTimeout = null; // 定义一个超时变量
}
//添加或更新source
_addOrUpdateSource = (gS, id) => {
if (this.map.getSource(id)) {
this.map.getSource(id).setData(gS);
} else {
this.map.U.addGeoJSON(id, gS);
}
};
// 添加layer，有则不操作
_addLayer = (layerId, sourceId, type, style) => {
// 如果图层不存在，添加图层。如果存在，不做操作
if (!this.map.getLayer(sourceId)) {
switch (type) {
case this.drawModelChoose.Point:
//addCircleLayer
this.map.U.addCircleLayer(layerId, sourceId, style);
break;
case this.drawModelChoose.LineString:
//addLineLayer
this.map.U.addLineLayer(layerId, sourceId, style);
break;
case this.drawModelChoose.Polygon:
//addPolygonLayer
this.map.U.addFillLayer(layerId, sourceId, style);
break;
default:
console.log('layer类型错误');
}
}
};
_currentDrawSource = () => {
// currentGSP 点 currentGSL 线 currentGSPL 面
const currentGSP = this._generateGeoJSON(this.drawLocal, 'Point');
this._addOrUpdateSource(currentGSP, this.drawCurrentId.point);
if (
this.drawModel === this.drawModelChoose.LineString ||
this.drawModel === this.drawModelChoose.Polygon
) {
const currentGSL = this._generateGeoJSON(this.drawLocal, 'LineString');
this._addOrUpdateSource(currentGSL, this.drawCurrentId.line);
}
if (this.drawModel === this.drawModelChoose.Polygon) {
const lastGSPL = this._generateGeoJSON(this.drawLocal, 'Polygon');
this._addOrUpdateSource(lastGSPL, this.drawCurrentId.polygon);
}
};
//绘制当前的layer
_currentDrawLayer = () => {
// 如果是点，直接绘制点
this._addLayer(this.drawCurrentId.point, this.drawCurrentId.point, 'Point', CIRCLE_STYLE);
// 如果是线，在点的基础上，加上线
// 如果是面，在线的基础上，加上面
if (
this.drawModel === this.drawModelChoose.LineString ||
this.drawModel === this.drawModelChoose.Polygon
) {
this._addLayer(this.drawCurrentId.line, this.drawCurrentId.line, 'LineString', LINE_STYLE);
}
if (this.drawModel === this.drawModelChoose.Polygon) {
this._addLayer(
this.drawCurrentId.polygon,
this.drawCurrentId.polygon,
'Polygon',
POLYGON_STYLE,
);
}
};
//最后动态的一笔
_currentDrawLastLine = () => {
if (
this.drawModel === this.drawModelChoose.LineString ||
this.drawModel === this.drawModelChoose.Polygon
) {
if (!this.drawLocal.length) {
this.map.U.removeLayer(this.drawCurrentId.lastLine);
this.map.U.removeSource(this.drawCurrentId.lastLine);
return false;
}
const startPoint = this.drawLocal[this.drawLocal.length - 1];
const endPoint = this.getDrawEndPoint();
// 添加动态线
const lastGSL = this._generateGeoJSON([startPoint, endPoint], 'LineString');
this.crossesLine(this.drawLocal, [startPoint, endPoint]);
this._addOrUpdateSource(lastGSL, this.drawCurrentId.lastLine);
this._addLayer(
this.drawCurrentId.lastLine,
this.drawCurrentId.lastLine,
'LineString',
LINE_IS_DRAW_STYLE,
);
}
if (this.drawModel === this.drawModelChoose.Polygon) {
this._currentDrawLastPolygon();
}
};
//获取矫正的最后点
getDrawEndPoint = () => {
let endPoint = null;
if (this.nearlyClientDistant()) {
endPoint = this.correctionMouseLocation;
} else {
endPoint = this.currentMouseLocation;
}
return endPoint;
};
//最后动态的一笔,跟随面生成
_currentDrawLastPolygon = () => {
// 添加动态面
const endPoint = this.getDrawEndPoint();
const drawLocalCopy = deepClone(this.drawLocal);
drawLocalCopy.push(endPoint);
drawLocalCopy.push(drawLocalCopy[0]);
const lastGSPL = this._generateGeoJSON(drawLocalCopy, 'Polygon');
this._addOrUpdateSource(lastGSPL, this.drawCurrentId.polygon);
this._addLayer(
this.drawCurrentId.polygon,
this.drawCurrentId.polygon,
'Polygon',
POLYGON_STYLE,
);
};
//鼠标点击
clickHandler = (e) => {
const _this = this;
this.clickCount++; // 每次单击事件计数器加1
if (this.clickCount === 1) {
// 如果是第一次单击
this.clickTimeout = setTimeout(function () {
// 启动超时变量
// 单击事件
_this.clickCount = 0; // 计数器清零
if (_this.nearlyClientDistant()) {
_this.drawLocal.push(_this.correctionMouseLocation);
// 如果是第一个点，那么就结束绘制
// todo 画面第一点后结束
if (
_this.drawModel === _this.drawModelChoose.Polygon &&
_this.correctionMouseLocation === _this.drawLocal[0]
) {
_this._currentDrawSource();
_this._currentDrawLayer();
_this.emit(_this.drawModel, _this.drawLocal);
_this.finishDraw();
return false;
} else {
_this.drawLocal.pop();
}
} else {
_this.drawLocal.push(e.lngLat);
}
_this._currentDrawSource();
_this._currentDrawLayer();
if (_this.drawModel === _this.drawModelChoose.Point) {
_this.drawIsFinish();
}
}, 200); // 设置超时时间为300毫秒
} else {
// 如果不是第一次单击
clearTimeout(this.clickTimeout); // 清除超时变量
this.clickCount = 0; // 计数器清零
// 在这里编写双击事件的操作
// 鼠标双击事件
if (this.drawModel === this.drawModelChoose.LineString) {
_this.drawLocal.push(e.lngLat);
_this._currentDrawSource();
_this._currentDrawLayer();
this.drawIsFinish();
}
if (this.drawModel === this.drawModelChoose.Polygon) {
_this.drawLocal.push(e.lngLat);
_this._currentDrawSource();
_this._currentDrawLayer();
this.drawIsFinish();
}
}
};
//右键点击
contextmenuHandler = (e) => {
if (this.drawLocal.length < 1) {
return false;
}
this.drawLocal.pop();
this._currentDrawSource();
this._currentDrawLayer();
this._currentDrawLastLine();
};
// 鼠标移动
mousemoveHandler = this.debounce((e) => {
this.currentMouseLocation = e.lngLat;
this._currentDrawLastLine();
}, 5);
// 判断是否吸附，距离12像素
nearlyClientDistant = () => {
// 判断屏幕距离，鼠标吸附
let _this = this;
let mousePoint = [this.currentMouseLocation.lng, this.currentMouseLocation.lat];
let closestFeature = null;
let closestDistance = Infinity;
let threshold = 10; // 阈值，单位为像素
// 遍历所有特征，找到距离最近的特征
let clientPosition = _this.map.project(mousePoint);
this.drawLocal.forEach(function (feature) {
_this.map.project([feature.lng, feature.lat]);
let featurePosition = _this.map.project([feature.lng, feature.lat]);
// 计算两个点在屏幕上的像素距离
let distance = Math.sqrt(
Math.pow(clientPosition.x - featurePosition.x, 2) +
Math.pow(clientPosition.y - featurePosition.y, 2),
);
if (distance < closestDistance && distance < threshold) {
closestFeature = feature;
closestDistance = distance;
}
});
// 如果距离小于阈值，则将标注吸附到特征上
if (closestFeature) {
this._changeMouseCursor('pointer');
this.correctionMouseLocation = closestFeature;
return true;
} else {
// console.log('范围外')
this._changeMouseCursor('crosshair');
return false;
}
};
// 判断是否相交 true 相交 false 不相交
crossesLine = (line1, line2) => {
let _this = this;
if (this.drawLocal.length >= 3) {
let _line1 = line1.map((e) => {
return [e.lng, e.lat];
});
_line1.pop();
let _line2 = line2.map((e) => {
return [e.lng, e.lat];
});
//判断是否有交叉
let intersect = turf.lineIntersect(turf.lineString(_line1), turf.lineString(_line2));
if (intersect.features.length > 0) {
let coordinates = intersect.features[0].geometry.coordinates;
//判断是否交叉在点上
const isExist = _line1.some(
(item) => item[0] === coordinates[0] && item[1] === coordinates[1],
);
if (isExist) {
// console.log('no cross,穿过了交点')
_this.map.U.setProperty(this.drawCurrentId.lastLine, 'line-color', '#00FA9A');
_this.map.on('click', this.clickHandler);
} else {
// console.log('cross')
_this.map.U.setProperty(this.drawCurrentId.lastLine, 'line-color', '#DC143C');
_this._changeMouseCursor('no-drop');
_this.map.off('click', this.clickHandler);
}
} else {
// console.log('no cross,不沾边')
_this.map.U.setProperty(this.drawCurrentId.lastLine, 'line-color', '#00FA9A');
_this.map.on('click', this.clickHandler);
}
} else {
return false;
}
};
drawStart = () => {
//每次绘制都要初始化数据
this.drawLocal = [];
this.deleteDraw();
//禁用鼠标双击放大事件
this.map.doubleClickZoom.disable();
this._changeMouseCursor('crosshair');
this.map.on('click', this.clickHandler);
this.map.on('contextmenu', this.contextmenuHandler);
this.map.on('mousemove', this.mousemoveHandler);
};
draw = (shape) => {
if(this.drawModelChoose[shape]) {
this.drawModel = this.drawModelChoose[shape];
this.drawStart();
} else {
console.log(`暂无${shape}类型`);
}
};
drawIsFinish = () => {
let _this = this;
this.emit(this.drawModel, this.drawLocal);
this.finishDraw();
//恢复双击放大功能
setTimeout(() => {
_this.map.doubleClickZoom.enable();
}, 10);
};
// 结束绘制线和面
finishDraw = () => {
this.map.U.removeSource(this.drawCurrentId.lastLine);
this.map.U.removeLayer(this.drawCurrentId.lastLine);
this.drawModel = this.drawModelChoose.DEFAULT;
this.unDraw();
};
unDraw = () => {
// console.log('推出绘制模式');
this.map.off('click', this.clickHandler);
this.map.off('contextmenu', this.contextmenuHandler);
this.map.off('mousemove', this.mousemoveHandler);
this._changeMouseCursor('pointer');
this.drawLocal = [];
};
//删除绘制的内容
deleteDraw = () => {
this.map.U.removeSource([
this.drawCurrentId.line,
this.drawCurrentId.point,
this.drawCurrentId.lastLine,
this.drawCurrentId.polygon,
]);
this.map.U.removeLayer([
this.drawCurrentId.line,
this.drawCurrentId.point,
this.drawCurrentId.lastLine,
this.drawCurrentId.polygon,
]);
this.unDraw();
};
}

18
src/views/sys/exception/Converge/Converge/src/WktGeojsonTransform.ts Normal file
View File

@ -0,0 +1,18 @@
import WKT from "terraformer-wkt-parser"
import { wktToGeoJSON,geojsonToWKT } from "@terraformer/wkt"
const WktToGeojson = (wktData)=> {
// return WKT.parse(wktData)
return wktToGeoJSON(wktData);
}
const GeojsonToWkt = (geojsonData)=> {
// return WKT.convert(geojsonData)
console.log("geojsonData",geojsonData)
return geojsonToWKT(geojsonData)
}
export {WktToGeojson,GeojsonToWkt}

80
src/views/sys/exception/Converge/Converge/src/config.ts Normal file
View File

@ -0,0 +1,80 @@
export enum MapboxConfig {
ACCESS_TOKEN = 'pk.eyJ1IjoiemhhbmcxMjM4ODk5OSIsImEiOiJja3N5Ync1cXcyMTR2Mm9xempmbGE4MnBtIn0.R-j78CRvbs6JZG-MDSoh8Q',
// ACCESS_TOKEN = "1234",
TDT_TOKEN = 'b6585bc41ee16251dbe6b1af64f375d9',
// add more config options here
}
export const MapboxDefaultStyle = {
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
version: 8,
sources: {
'dianzi': {
type: 'raster',
tiles: [
`https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
],
tileSize: 256,
minzoom:18,
maxzoom:24,
},
'dianzi-biaozhu': {
type: 'raster',
tiles: [
`https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
],
tileSize: 256,
},
'raster-tiles': {
type: 'raster',
tiles: [
`https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
],
tileSize: 256,
minzoom:0,
maxzoom:18,
},
},
layers: [
{
id: 'dianzi-biaozhu',
type: 'raster',
source: 'dianzi-biaozhu',
layout: {
visibility: 'visible',
},
},{
id: 'tdt-img-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 0,
maxzoom: 18,
},{
id: 'dianzi',
type: 'raster',
source: 'dianzi',
layout: {
visibility: 'visible',
},
minzoom: 18,
maxzoom: 24,
}
],
};
export const MapControlConfig = {
DrawPoint: {
handler: 'handlerDrawPoint',
icon: '/point.png',
title: '绘制点',
},
DrawLineString: {
handler: 'handlerDrawLineString',
icon: '/line.png',
title: '绘制线',
},
DrawPolygon: {
handler: 'handlerDrawPolygon',
icon: '/polygon.png',
title: '绘制面',
},
};

22
src/views/sys/exception/Converge/Converge/src/index.css Normal file
View File

@ -0,0 +1,22 @@
.mapboxgl-ctrl-logo {
display: none !important;
}
.map-container {
position: relative;
}
.map-box,
.map-container {
width: 100%;
height: 100%;
}
.map-control {
position: absolute;
right: 10px;
top: 10px;
display: flex;
}
.map-control img {
width: 40px;
height: 40px;
cursor: pointer;
}

27
src/views/sys/exception/Converge/Converge/src/index.less Normal file
View File

@ -0,0 +1,27 @@
.mapboxgl-ctrl-logo {
display: none !important;
}
.map-container{
position: relative;
}
.map-box,
.map-container {
width: 100%;
height: 100%;
}
.map-control {
position: absolute;
right: 10px;
top: 10px;
display: flex;
img {
width: 40px;
height: 40px;
cursor: pointer;
}
img:hover {
scale: 1.2;
}
}

62
src/views/sys/exception/Converge/Converge/src/tool.ts Normal file
View File

@ -0,0 +1,62 @@
import { ControlOutlined } from '@ant-design/icons-vue';
import * as turf from '@turf/turf'
// js生成UUID
const generateUUID = ()=>{
var d = new Date().getTime(); //Timestamp
var d2 = (performance && performance.now && (performance.now()*1000)) || 0;
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16;
if(d > 0) {
r = (d + r)%16 | 0;
d = Math.floor(d/16);
} else {
r = (d2 + r)%16 | 0;
d2 = Math.floor(d2/16);
}
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
}
// js 针对后端post接口参数拼接到url的情况 将json参数转换为 ?key1=value1&key2=value2
const ObjectToUrl = (obj)=>{
let params = "?";
for(let item in obj){
params+=item+"="+obj[item]+"&"
}
return params;
}
// turf获取几何图形的中心
const getGeometryCenter = (geometry)=>{
let coordinates = [];
switch(geometry.geometry.type.toUpperCase()){
case "POINT":
break;
case "MULTIPOINT":
break;
case "LINESTRING":
break;
case "MULTILINESTRING":
break;
case "POLYGON":
coordinates = geometry.geometry.coordinates
break;
case "MULTIPOLYGON":
coordinates = geometry.geometry.coordinates[0]
break;
}
// let polygon = turf.polygon(coordinates);
// let center = turf.centerOfMass(polygon);
return [coordinates[0][0][0],coordinates[0][0][1]];
// return [117.732878836452,35.1320944773393]
}
export { generateUUID,ObjectToUrl,getGeometryCenter }

186075
src/views/sys/exception/Converge/Converge/市4490.json Normal file
View File

File diff suppressed because it is too large Load Diff

148
src/views/sys/exception/Converge/Exception.vue Normal file
View File

@ -0,0 +1,148 @@
<script lang="tsx">
import type { PropType } from 'vue';
import { Result, Button } from 'ant-design-vue';
import { defineComponent, ref, computed, unref } from 'vue';
import { ExceptionEnum } from '@/enums/exceptionEnum';
import notDataSvg from '@/assets/svg/no-data.svg';
import netWorkSvg from '@/assets/svg/net-error.svg';
import { useRoute } from 'vue-router';
import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '@/hooks/web/useI18n';
import { useGo, useRedo } from '@/hooks/web/usePage';
import { PageEnum } from '@/enums/pageEnum';
interface MapValue {
title: string;
subTitle: string;
btnText?: string;
icon?: string;
handler?: any;
status?: string;
}
export default defineComponent({
name: 'ErrorPage',
props: {
// 状态码
status: {
type: Number as PropType<number>,
default: ExceptionEnum.PAGE_NOT_FOUND,
},
title: {
type: String as PropType<string>,
default: '',
},
subTitle: {
type: String as PropType<string>,
default: '',
},
full: {
type: Boolean as PropType<boolean>,
default: false,
},
},
setup(props) {
const statusMapRef = ref(new Map<string | number, MapValue>());
const { query } = useRoute();
const go = useGo();
const redo = useRedo();
const { t } = useI18n();
const { prefixCls } = useDesign('app-exception-page');
const getStatus = computed(() => {
const { status: routeStatus } = query;
const { status } = props;
return Number(routeStatus) || status;
});
const getMapValue = computed((): MapValue => {
return unref(statusMapRef).get(unref(getStatus)) as MapValue;
});
const backLoginI18n = t('sys.exception.backLogin');
const backHomeI18n = t('sys.exception.backHome');
unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_ACCESS, {
title: '403',
status: `${ExceptionEnum.PAGE_NOT_ACCESS}`,
subTitle: t('sys.exception.subTitle403'),
btnText: props.full ? backLoginI18n : backHomeI18n,
handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
});
unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_FOUND, {
title: '404',
status: `${ExceptionEnum.PAGE_NOT_FOUND}`,
subTitle: t('sys.exception.subTitle404'),
btnText: props.full ? backLoginI18n : backHomeI18n,
handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
});
unref(statusMapRef).set(ExceptionEnum.ERROR, {
title: '500',
status: `${ExceptionEnum.ERROR}`,
subTitle: t('sys.exception.subTitle500'),
btnText: backHomeI18n,
handler: () => go(),
});
unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_DATA, {
title: t('sys.exception.noDataTitle'),
subTitle: '',
btnText: t('common.redo'),
handler: () => redo(),
icon: notDataSvg,
});
unref(statusMapRef).set(ExceptionEnum.NET_WORK_ERROR, {
title: t('sys.exception.networkErrorTitle'),
subTitle: t('sys.exception.networkErrorSubTitle'),
btnText: t('common.redo'),
handler: () => redo(),
icon: netWorkSvg,
});
return () => {
const { title, subTitle, btnText, icon, handler, status } = unref(getMapValue) || {};
return (
<Result
class={prefixCls}
status={status as any}
title={props.title || title}
sub-title={props.subTitle || subTitle}
>
{{
extra: () =>
btnText && (
<Button type="primary" onClick={handler}>
{() => btnText}
</Button>
),
icon: () => (icon ? <img src={icon} /> : null),
}}
</Result>
);
};
},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-app-exception-page';
.@{prefix-cls} {
display: flex;
flex-direction: column;
align-items: center;
.ant-result-icon {
img {
max-width: 400px;
max-height: 300px;
}
}
}
</style>

178
src/views/sys/exception/Converge/SearchComponent.vue
View File

@ -1,27 +1,37 @@
<template>
<div class="search-container">
<div class="search-input">
<a-input
placeholder="请输入图斑号或位置"
v-model:value="keyword"
allow-clear
@blur="onInputBlue"
></a-input>
<div class="component-container">
<!-- 分类过滤 -->
<div class="search-select">
临时用地
</div>
<div class="search-button" @click="searchArea">
<img src="/statistical/search-btn.png" alt="" />
</div>
<div class="search-result-container" v-if="showSearchResult">
<div class="result-item" v-for="(item, index) in searchResult" @click="toPosition(item)">
<div class="search-icon">
<img src="/statistical/search-icon.png" alt="" />
</div>
<div class="level-0">{{ item.id }}</div>
<div class="level-1">{{ item.county }}</div>
<div class="level-2">{{ item.street }}</div>
<!-- 搜索框 -->
<div class="search-container">
<div class="search-input">
<a-input
placeholder="请输入图斑号或位置"
v-model:value="keyword"
allow-clear
@blur="onInputBlue"
></a-input>
</div>
<div class="search-button" @click="searchArea">
<img src="/statistical/search-btn.png" alt="" />
</div>
<div class="search-result-container" v-if="showSearchResult">
<div class="result-item" v-for="(item, index) in searchResult" @click="toPosition(item)">
<div class="search-icon">
<img src="/statistical/search-icon.png" alt="" />
</div>
<div class="level-0">{{ item.id }}</div>
<div class="level-1">{{ item.county }}</div>
<div class="level-2">{{ item.street }}</div>
</div>
<a-empty v-if="searchResult.length == 0" />
</div>
<a-empty v-if="searchResult.length == 0" />
</div>
<!-- 图斑过滤 -->
<div class="filter-container">
<div class="filter-name">{{ currentFilter }}</div>
<div class="filter-icon" @click="handlerChangeFilterOptions">
@ -38,6 +48,8 @@
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineExpose, defineEmits, watch } from 'vue';
@ -217,6 +229,74 @@
</script>
<style type="less" scoped>
.component-container{
width:100%;
height:100%;
display: flex;
column-gap: 12px;
.search-select{
width:320px;
line-height:36px;
font-weight: bold;
height:100%;
background-image: url('/statistical/search-bg.png');
background-size: 100% 100%;
text-align: center;
color:#fff;
}
.filter-container {
width: 100px;
border-radius: 6px;
height: 36px;
background: #0a62c6;
line-height: 36px;
color: #fff;
display: flex;
cursor: pointer;
.filter-name {
width: 70px;
text-align: center;
padding: 0px 2px;
font-size: 14px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&::after {
content: '';
width: 2px;
height: 22px;
position: absolute;
top: 7px;
right: 0px;
background: #0751a5;
}
}
.filter-icon {
width: 30px;
line-height: 38px;
text-align: center;
}
.filter-item-container {
width: 100%;
position: absolute;
background: rgba(11, 39, 68, 0.8);
border: 1px solid #0a62c6;
top: 36px;
left: 0px;
.filter-item {
height: 36px;
text-align: center;
&:hover {
cursor: pointer;
background: #0f3863;
}
}
}
}
}
.search-container {
width: 100%;
height: 100%;
@ -225,8 +305,10 @@
background-size: 100% 100%;
border-top-right-radius: 8px;
position: relative;
column-gap: 15px;
.search-input {
flex: auto;
flex:auto;
height: 100%;
}
.search-button {
@ -283,59 +365,7 @@
}
}
.filter-container {
position: absolute;
top: 0px;
right: -120px;
width: 100px;
border-radius: 6px;
height: 36px;
background: #0a62c6;
line-height: 36px;
color: #fff;
display: flex;
cursor: pointer;
.filter-name {
width: 70px;
text-align: center;
padding: 0px 2px;
font-size: 14px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&::after {
content: '';
width: 2px;
height: 22px;
position: absolute;
top: 7px;
right: 0px;
background: #0751a5;
}
}
.filter-icon {
width: 30px;
line-height: 38px;
text-align: center;
}
.filter-item-container {
width: 100%;
position: absolute;
background: rgba(11, 39, 68, 0.8);
border: 1px solid #0a62c6;
top: 36px;
left: 0px;
.filter-item {
height: 36px;
text-align: center;
&:hover {
cursor: pointer;
background: #0f3863;
}
}
}
}
}
::v-deep .mapboxgl-ctrl-logo {

58
src/views/sys/exception/Converge/drag.ts Normal file
View File

@ -0,0 +1,58 @@
import { ref, onBeforeUnmount } from 'vue';
export default function useDrag() {
const isDragging = ref(false); // 是否正在拖动
const offsetX = ref(0); // 鼠标按下时的 X 坐标偏移
const offsetY = ref(0); // 鼠标按下时的 Y 坐标偏移
const style = ref({
position: 'absolute', // 设置为绝对定位
top: '200px', // 初始位置
left: '70px', // 初始位置
});
// 鼠标按下时，记录偏移量并开始拖动
const startDrag = (event: MouseEvent) => {
isDragging.value = true;
offsetX.value = event.clientX - (event.target as HTMLElement).getBoundingClientRect().left;
offsetY.value = event.clientY - (event.target as HTMLElement).getBoundingClientRect().top;
// 添加鼠标移动和鼠标松开事件监听
document.addEventListener('mousemove', onDrag);
document.addEventListener('mouseup', stopDrag);
};
// 鼠标移动时，更新元素的位置
const onDrag = (event: MouseEvent) => {
if (isDragging.value) {
if(event.clientX - offsetX.value + 280 > window.innerWidth){
return null;
}
if(event.clientY - offsetY.value + 20 > window.innerHeight){
return null;
}
style.value.left = (event.clientX - offsetX.value - 200) > 0 ? `${event.clientX - offsetX.value - 200}px` : '0px'
style.value.top = (event.clientY - offsetY.value - 100) > 0 ? `${event.clientY - offsetY.value - 100}px` : '0px';
}
};
// 鼠标松开时，停止拖动
const stopDrag = () => {
isDragging.value = false;
document.removeEventListener('mousemove', onDrag);
document.removeEventListener('mouseup', stopDrag);
};
// 在组件卸载时移除事件监听
onBeforeUnmount(() => {
document.removeEventListener('mousemove', onDrag);
document.removeEventListener('mouseup', stopDrag);
});
return {
style,
startDrag,
};
}

1
src/views/sys/exception/Converge/index.ts Normal file
View File

@ -0,0 +1 @@
export { default as Exception } from './Exception.vue';

26
src/views/sys/exception/Converge/index.vue
View File

@ -69,7 +69,9 @@
defaultColor: String,
});
const layerSettings = ref<any>({});
const layerDefaultColor = ref<String>();
watch(
() => props.layer,
(val) => {
@ -126,9 +128,9 @@
},
maxZoom: 22,
minZoom: 8,
zoom: 8,
zoom: 9.6,
pitch: 0,
center: [118.30207505530701, 35.30123435040745],
center: [117.97256,34.85481],
});
};
@ -240,6 +242,7 @@
let isLevel = orgs.find((item, index) => {
return item.name == '临沂市' || item.parentId == 0 || item.parentName == '根节点';
});
if (isLevel) {
isRootLevel.value = true;
handlerLoadPolygon('', '', '', '1');
@ -554,7 +557,7 @@
"type": "vector",
"scheme": "tms",
tiles: [
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Axianjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/lanling%3Axianjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"
],
tileSize: 512
})
@ -585,7 +588,7 @@
source: "xianjiepoint",
'source-layer': 'linyishixianjie_point',
layout: {
visibility: "visible",
visibility: "none",
"text-field": "{xzqmc}",
"text-size": 18
},
@ -669,7 +672,7 @@
source: {
type: "raster",
tiles: [
"http://175.27.168.120:8080/geoserver/gwc/service/wms?service=WMS&version=1.1.0&request=GetMap&layers=linyishi%3Alinyishizhezhao&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
"http://175.27.168.120:8080/geoserver/gwc/service/wms?service=WMS&version=1.1.0&request=GetMap&layers=lanling%3Alanlingxian_zhezhao&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
],
tileSize: 256,
},
@ -720,7 +723,7 @@
"type": "vector",
"scheme": "tms",
tiles: [
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Azhenjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/lanling%3Azhenjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
],
tileSize: 512
})
@ -743,7 +746,7 @@
"type": "vector",
"scheme": "tms",
tiles: [
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Azhenjiepoint@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/lanling%3Alanlignxian_zhenjie_point@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
],
tileSize: 512,
})
@ -751,7 +754,7 @@
id: "zhenjiepoint",
type: "symbol",
source: "zhenjiepoint",
'source-layer': 'zhenjiepoint',
'source-layer': 'lanlignxian_zhenjie_point',
layout: {
visibility: "visible",
"text-field": "{xzqmc}",
@ -868,8 +871,8 @@
// 回到初始视角
const handlerInitialize = () => {
map.flyTo({
center: [118.30207505530701, 35.30123435040745], // 设置中心点坐标
zoom: 8, // 设置缩放等级
center: [117.97256,34.85481], // 设置中心点坐标
zoom: 9.5, // 设置缩放等级
pitch: 0,
bearing: 0,
duration: 1000,
@ -1030,6 +1033,7 @@
}
}
} else if (item.id == 'Data') {
if (map.getLayer('historyLayerLine')) {
if (item.checked) {
map.setLayoutProperty('historyLayerLine', 'visibility', 'visible');
@ -1155,7 +1159,7 @@
}
.search-container-box {
position: absolute;
width: 330px;
width: 600px;
height: 40px;
top: 72px;
left: 73px;

163
src/views/sys/exception/Converge/mapComponent/layers/index.vue Normal file
View File

@ -0,0 +1,163 @@
<template>
<div :class="`layer-list-container ${openLayer? '': 'layer-list-container-close'}`" >
<div class="title">
图层资源
<div class="hidden-button" @click="openLayer = !openLayer">
<img v-if="openLayer" src="/public/map/top.png" alt="">
<img v-else src="/public/map/bottom.png" alt="">
</div>
</div>
<div class="layers-container">
<p class="cate-name">数据图层</p>
<div class="case-list">
<div class="case-item" v-for="(item,index) in dataLayerList" :key="index" >
<img src="/statistical/prove-icon.png" alt="" />
<a-checkbox v-model:checked="item.checked" @change="layerChange(item,'dataLayer')" >
<span style="color:#fff;">{{item.name}}</span>
</a-checkbox>
</div>
<div class="case-item">
<img src="/statistical/prove-icon.png" alt="" />
<a-checkbox v-model:checked="tiandituLabelOpen" @change="labelChange" >
<span style="color:#fff;">地图注记</span>
</a-checkbox>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import {
defineEmits,
ref,
} from 'vue'
import { layers } from '@/views/sys/exception/util'
const emits = defineEmits(['changeLayer','changeLabel'])
const openLayer = ref(true)
const tiandituLabelOpen = ref(false)
const dataLayerList = ref(layers)
const layerChange = (item,type)=>{
let showLayer = dataLayerList.value.filter(itemLayer => itemLayer.checked).map(itemLayer => itemLayer.id)
emits("changeLayer",showLayer);
}
const labelChange = () => {
emits("changeLabel",tiandituLabelOpen.value);
}
</script>
<style type="less" scoped>
.layer-list-container-close{
height: 41px !important;
}
.layer-list-container {
width: 285px;
height: 600px;
background: #041b36;
position: relative;
margin-bottom: 20px;
transition: 0.5s;
&::before {
content: '';
height: 26px;
width: 26px;
position: absolute;
bottom: 0px;
left: 0px;
background: url('/map/layer-center-left.png');
background-size: 100% 100%;
}
&::after {
content: '';
height: 26px;
width: 26px;
position: absolute;
bottom: 0px;
right: 0px;
background: url('/map/layer-center-right.png');
background-size: 100% 100%;
}
.layers-container{
width:100%;
height: calc( 100% - 60px);
overflow-y:auto;
}
.title {
width: 100%;
height: 40px;
background-image: url('/videosupervision/title.png');
background-size: 100% 100%;
line-height: 40px;
text-indent: 18px;
font-size: 18px;
font-weight: bold;
color: #fff;
position: relative;
}
.hidden-button{
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
z-index: 2;
}
.switch-button {
float: right;
margin-right: 20px;
}
}
.case-list {
padding: 10px 24px;
overflow: auto;
.case-item {
cursor:pointer;
border-bottom: 1px dashed #1d60b4;
color:#fff;
padding: 5px 0;
height:40px;
overflow:hidden;
img {
width: 15px;
margin-right:12px;
}
span {
color: #7ebbff;
margin-left: 10px;
}
}
}
::v-deep .ant-empty-image{
height:50px;
position:relative;
}
::v-deep .ant-empty-description{
color:#fff;
}
.cate-name{
color:#fff;
padding:12px;
font-size:14px;
margin-bottom:0px;
background:rgba(0, 0, 0, 0.2)
}
::v-deeep .ant-empty-image img{
width:50px;
height:50px;
}
::v-deep .ant-checkbox-wrapper{
width: calc( 100% - 40px);
height: 20px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>

243
src/views/sys/exception/Converge/mapComponent/left_county.vue Normal file
View File

@ -0,0 +1,243 @@
<template>
<div class="county">
<div class="county_div">
<img class="county_div_leftButton" :src="scrollImgLeft" @click="scrollToElement('left')" />
<div ref="countyList" id="scrollContainer" class="county_div_list">
<div v-for="item in list" :key="item.id" :id="item.id" @click="clickCounty(item)">
<span v-if="!item.isClick" class="county_div_list_span_nochoose">{{ item.name }}</span>
<img
class="county_div_list_nochoose"
v-if="!item.isClick"
src="/statistical/left_county_nochoose.png"
/>
<span v-if="item.isClick" class="county_div_list_span_choose">{{ item.name }}</span>
<img
class="county_div_list_choose"
v-if="item.isClick"
src="/statistical/left_county_choose.png"
/>
</div>
</div>
<img class="county_div_rightButton" :src="scrollImgRight" @click="scrollToElement('right')" />
</div>
<div>
<img
src="/statistical/left_decorative_bottom.png"
:style="{
width: '840px',
}"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, computed, defineEmits, watch, defineExpose } from 'vue';
import { getChildrenTree } from '@/api/demo/system';
import { message } from 'ant-design-vue';
import { getUserOrgs } from '@/api/tiankongdi';
// emit
const emit = defineEmits(['countyClick']);
const props = defineProps(['bi']);
// 按键控制滚动条
let countyWidth: number = 110;
const countyList = ref<HTMLElement | null>(null);
const scrollImgLeft = ref('/statistical/left_direction_left1.png');
const scrollImgRight = ref('/statistical/left_direction_right1.png');
const scrollToElement = async (type) => {
if (countyList.value) {
if (type == 'left') {
countyList.value.scrollLeft = countyList.value.scrollLeft - countyWidth;
}
if (type == 'right') {
countyList.value.scrollLeft = countyList.value.scrollLeft + countyWidth;
}
// if (countyList.value.scrollLeft < countyWidth) {
// scrollImgLeft.value = '/statistical/left_direction_left1.png';
// } else {
// scrollImgLeft.value = '/statistical/left_direction_left2.png';
// }
// if (countyList.value.scrollLeft > (list.value.length - 7 - 1) * countyWidth) {
// scrollImgRight.value = '/statistical/left_direction_right1.png';
// } else {
// scrollImgRight.value = '/statistical/left_direction_right2.png';
// }
}
};
// 获取用户可以访问的机构信息
async function handlerGetOrgs() {
let orgs = await getUserOrgs({});
let isLevel = orgs.find((item, index) => {
return item.name == '临沂市' || item.parentId == 0 || item.parentName == '根节点';
});
if (isLevel) {
// 市级
getOptions();
} else {
// 县区级
let levesl = orgs.filter((item, index) => {
return item.parentName == '临沂市' || item.parentId == 371300;
});
list.value = levesl;
}
// clickCounty(list.value[0])
}
//
function selectCounty() {}
// 选择区县
function clickCounty(record) {
list.value.forEach((item) => {
if (item.cascadeId == record.cascadeId) {
item.isClick = true;
} else {
item.isClick = false;
}
});
emit('countyClick', record);
}
// 初始数据
const list = ref();
async function getOptions() {
const data = await getChildrenTree({
parentId: 371300,
});
data.forEach((item) => {
item.isClick = false;
});
list.value = data;
list.value.sort((a, b) => a.id - b.id);
let linyishi = {
id: '',
name: '临沂市',
};
console.log('listValue', list.value);
list.value.unshift(linyishi);
clickCounty(linyishi);
}
onMounted(() => {
handlerGetOrgs();
let scrollContainer = document.getElementById('scrollContainer');
scrollContainer?.addEventListener('wheel', (evt) => {
evt.preventDefault();
scrollContainer?.scrollBy({
left: evt.deltaY * 5,
behavior: 'smooth',
});
});
});
defineExpose({
selectCounty,
});
</script>
<style lang="less" scoped>
.county {
cursor: pointer;
&_div {
display: flex;
position: relative;
width: 840px;
bottom: 10px;
&_leftButton {
position: relative;
top: 42px;
left: -4px;
height: 31px;
width: 31px;
}
&_list {
display: flex;
max-width: 770px;
margin: 0px auto;
overflow-x: auto;
scroll-behavior: smooth;
&::-webkit-scrollbar {
display: none;
}
div {
width: 110px;
}
&_span_nochoose {
position: relative;
top: 30px;
width: 110px;
z-index: 999;
display: inline-flex;
align-items: center;
text-align: center;
justify-content: center;
font-family: Alibaba PuHuiTi;
font-size: 15px;
color: rgba(255, 255, 255, 0);
background: linear-gradient(0deg, #6f81d4 0.146484375%, #ffffff 86.7919921875%);
opacity: 0.6;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
color: #fff;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
font-weight: 10000;
}
&_nochoose {
position: relative;
top: -7px;
width: 87px;
margin-left: 11.5px;
margin-right: 11.5px;
color: red;
}
&_span_choose {
position: relative;
top: 30px;
width: 110px;
z-index: 999;
display: inline-flex;
align-items: center;
text-align: center;
justify-content: center;
font-family: Alibaba PuHuiTi;
font-weight: bold;
font-size: 14px;
color: #014ce2;
}
&_choose {
position: relative;
width: 110px;
}
}
&_rightButton {
position: relative;
top: 42px;
left: 4px;
height: 31px;
width: 31px;
}
}
}
</style>

74
src/views/sys/exception/Converge/mapComponent/left_layerButton.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<div class="layerbutton">
<div
class="layerbutton_div"
:style="{
marginBottom: '15px',
}"
>
<img
id="left_layerButton_1"
:src="button_1 ? '/statistical/layer-btn1-active.png' : '/statistical/layer-btn1.png'"
@click="handlerLayerChange(1)"
/>
</div>
<div class="layerbutton_div">
<img
id="left_layerButton_2"
:src="button_2 ? '/statistical/layer-btn2-active.png' : '/statistical/layer-btn2.png'"
@click="handlerLayerChange(2)"
/>
</div>
<div class="layerbutton_div">
<img
id="left_layerButton_2"
:src="button_3 ? '/statistical/layer-btn3-active.png' : '/statistical/layer-btn3.png'"
@click="handlerLayerChange(3)"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, defineEmits, defineProps } from 'vue';
// emit
const emit = defineEmits(['handlerLayerChange']);
const button_1 = ref(false);
const button_2 = ref(true);
const button_3 = ref(false);
// 控制图层
function handlerLayerChange(type: number) {
switch (type) {
case 1:
button_1.value = true;
button_2.value = false;
button_3.value = false;
break;
case 2:
button_1.value = false;
button_2.value = true;
button_3.value = false;
break;
case 3:
button_1.value = false;
button_2.value = false;
button_3.value = true;
break;
}
emit('handlerLayerChange', type);
}
</script>
<style lang="less" scoped>
.layerbutton {
position: absolute;
top: 130px;
left: 60px;
.layerbutton_div {
margin-bottom: 14px;
cursor: pointer;
img {
width: 60px;
}
}
}
</style>

82
src/views/sys/exception/Converge/mapComponent/left_statisticalType.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<div class="statistical">
<img src="/statistical/left_statistical.png" />
<div class="statistical_div">
<a-row>
<a-col :span="10" @click="handlerChangePolygonType('违法')">
<span class="statistical_div_dot" style="background: #F70303" />
<span class="statistical_div_span"> 违法 </span>
</a-col>
<a-col :span="10" @click="handlerChangePolygonType('补办手续')">
<span class="statistical_div_dot" style="background: #AD04F4" />
<span class="statistical_div_span"> 补办手续 </span>
</a-col>
</a-row>
<a-row>
<a-col :span="10" @click="handlerChangePolygonType('合法')">
<span class="statistical_div_dot" style="background: #0AF703" />
<span class="statistical_div_span"> 合法 </span>
</a-col>
<a-col :span="10" @click="handlerChangePolygonType('拆除复耕')">
<span class="statistical_div_dot" style="background: #F4E004" />
<span class="statistical_div_span"> 拆除复耕 </span>
</a-col>
</a-row>
<a-row>
<a-col :span="10" @click="handlerChangePolygonType('其他')">
<span class="statistical_div_dot" style="background: #0382F7" />
<span class="statistical_div_span"> 其他 </span>
</a-col>
</a-row>
</div>
</div>
</template>
<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';
const emits = defineEmits(['handlerChangePolygonType']);
const props = defineProps(['bi']);
function handlerChangePolygonType(type: String): void {
emits('handlerChangePolygonType', type);
}
</script>
<style lang="less" scoped>
.statistical {
cursor: pointer;
img {
position: relative;
height: 100px;
width: 200px;
}
&_div {
position: relative;
top: -75px;
left: 30px;
&_dot {
display: inline-block;
width: 10px;
height: 10px;
position: relative;
left: -2px;
top: -2px;
margin-right: 5px;
margin-bottom: 17px;
// border-radius: 50%;
}
&_span {
position: relative;
top: -20px;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 13px;
color: #7ebbff;
}
}
}
</style>

156
src/views/sys/exception/Converge/mapComponent/monitor/index.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<div class="uav-container">
<div class="title">
视频监控
</div>
<div v-show="isShowPlayer">
<video
class="TCPlayer-video-contaiiner"
id="TCPlaeyrContainer"
width="235px"
height="178px"
autoplay
preload="auto"
playsinline
muted
webkit-playsinline
></video>
</div>
</div>
</template>
<script lang="ts" setup>
import {ref,onMounted,defineProps,onBeforeUnmount} from 'vue';
const props = defineProps(["playUrl"])
let player = null;
const isShowPlayer = ref(false);
function handlerPlayVideo(item){
isShowPlayer.value = true;
if (player) {
player.src(props.playUrl);
} else {
player = TCPlayer("TCPlaeyrContainer", {});
player.src(props.playUrl);
}
}
// 初始化视频控件
onMounted(()=>{
setTimeout(function(){
handlerPlayVideo(123);
},1000)
})
// 销毁视频控件
onBeforeUnmount(()=>{
player.dispose();
player = null;
})
</script>
<style type="less" scoped>
.uav-container{
width: 418px;
height: 300px;
background:#041B36;
position: relative;
.title{
width:100%;
height:40px;
background-image:url("/videosupervision/title.png");
background-size:100% 100%;
line-height:40px;
text-indent:18px;
font-size:18px;
font-weight:bold;
color:#fff;
}
.switch-button{
float:right;
margin-right:20px;
}
.uav-list-container{
width:100%;
height: calc( 100% - 60px);
overflow:auto;
padding:20px 20px;
position:relative;
z-index:999;
.uav-empty{
width:100%;
height:100%;
text-align:center;
color:#999;
img{
width:120px;
margin:40px 0px 18px 0px;
}
}
.uav-item{
width:100%;
height:40px;
padding:0px 15px;
line-height:40px;
color:#f1f1f1;
display:flex;
background:rgba(0,0,0,0.2);
&:hover{
background:rgba(0,0,0,0.4);
}
div{
flex:1;
}
.position{
max-width:30px;
cursor:pointer;
}
.play{
max-width:30px;
cursor:pointer;
}
}
}
.TCPlayer-video-contaiiner{
width: calc( 100% - 30px);
height: calc( 100% - 70px);
position:absolute;
margin:15px;
top:40px;
right:0px;
z-index:1000;
background:#041B36;
.video-contain {
width: 100%;
height: 100%;
}
}
.close-video-button{
position:absolute;
top:40px;
right:10px;
background:rgba(0,0,0,0.3);
z-index:100100;
color:#fff;
padding:10px;
cursor:pointer;
&:hover{
color:#408eff;
}
}
}
</style>

138
src/views/sys/exception/Converge/mapComponent/silder_county.vue Normal file
View File

@ -0,0 +1,138 @@
<template>
<div class="county-container">
<div class="slider-container" @mousedown="startDrag" @mouseup="endDrag" @mousemove="onDrag"
@touchstart="startDrag" @touchend="endDrag" @touchmove="onDrag">
<div class="slider-content" :style="{ transform: `translateX(${translateX}px)` }">
<!-- 滑动内容项 -->
<div class="slider-item" v-for="(item, index) in list" :key="index" :style="{background:url('/statistical/left_county_nochoose.png')}">
<div calss="county-name">{{ item.name }}</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, computed, defineEmits, watch, defineExpose } from 'vue';
import { getChildrenTree } from '@/api/demo/system';
import { getUserOrgs } from '@/api/tiankongdi';
// emit
const emit = defineEmits(['countyClick']);
// 初始数据
const list = ref();
// 获取用户可以访问的机构信息
async function handlerGetOrgs() {
let orgs = await getUserOrgs({});
let isLevel = orgs.find((item, index) => {
return item.name == '临沂市' || item.parentId == 0 || item.parentName == '根节点';
});
if (isLevel) {
// 市级
getOptions();
} else {
// 县区级
let levesl = orgs.filter((item, index) => {
return item.parentName == '临沂市' || item.parentId == 371300;
});
list.value = levesl;
}
// clickCounty(list.value[0])
}
async function getOptions() {
const data = await getChildrenTree({
parentId: 371300,
});
data.forEach((item) => {
item.isClick = false;
});
list.value = data;
let linyishi = {
id: '',
name: '临沂市',
};
console.log("countyList",list.value);
list.value.unshift(linyishi);
clickCounty(linyishi);
}
//
function selectCounty() {}
// 选择区县
function clickCounty(record) {
list.value.forEach((item) => {
if (item.cascadeId == record.cascadeId) {
item.isClick = true;
} else {
item.isClick = false;
}
});
emit('countyClick', record);
}
onMounted(() => {
handlerGetOrgs();
});
defineExpose({
selectCounty,
});
const isDragging = ref(false);
const startX = ref(0);
const translateX = ref(0);
const currentTranslateX = ref(0);
const items = ref(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'])
function startDrag(event) {
isDragging.value = true;
startX.value = event.type.includes('mouse') ? event.clientX : event.touches[0].clientX;
currentTranslateX.value = translateX.value;
}
function endDrag() {
isDragging.value = false;
currentTranslateX.value = translateX.value;
}
function onDrag(event) {
if (!isDragging.value) return;
const currentX = event.type.includes('mouse') ? event.clientX : event.touches[0].clientX;
const deltaX = currentX - startX.value;
translateX.value = currentTranslateX.value + deltaX;
}
</script>
<style type="less" scoped>
.county-container{
position:absolute;
bottom:50px;
left:300px;
z-index:999999;
width:840px;
height:80px;
background:rgba(0,0,0,0.4);
.slider-container {
width: 100%;
overflow: hidden;
position: relative;
cursor: grab;
}
.slider-content {
display: flex;
transition: transform 0.3s ease;
}
.slider-item {
min-width: 100px;
margin: 0px 0px;
background-color: #ddd;
padding: 20px;
text-align: center;
}
}
</style>

324
src/views/sys/exception/Converge/mapComponent/top_title.vue Normal file
View File

@ -0,0 +1,324 @@
<template>
<div class="screen-header-container">
<div class="screen-title">
<img src="/statistical/logo.png" alt="" /> {{ t('sys.subject.header_title') }}
</div>
<span class="screen-currentTime">
<span class="time">{{ currentTime }}</span>
&nbsp; &nbsp; &nbsp;
<span class="weather">{{ Weather }}</span>
</span>
<div class="left-category-container">
<div
class="category-item"
v-for="(item, index) in left_categorys"
:key="index"
:style="{
left: `${-(index * 26)}px`,
'background-image': item.hovered
? `url(/statistical/category-left-active.png)`
: `url(/statistical/category-left.png)`,
}"
@click="getHome(item)"
@mouseover="item.hovered = true"
@mouseout="item.hovered = false"
>
{{ item.title }}
</div>
</div>
<div class="right_category-container">
<div
class="category-item"
v-for="(item, index) in right_categorys"
:key="index"
:style="{
left: `${-(index * 26 - 55)}px`,
'background-image': item.hovered
? `url(/statistical/category-right-active.png)`
: `url(/statistical/category-right.png)`,
}"
@click="getHome(item)"
@mouseover="item.hovered = true"
@mouseout="item.hovered = false"
>
{{ item.title }}
</div>
</div>
<div class="user-info" style="z-index: 9999">
<span style="color: #325e95">{{ fireUserLoginName }}</span>
&nbsp;
<span style="color: #ddd" @click="logout">退出</span>
</div>
</div>
<div class="right_category-container">
<div
v-for="(item, index) in right_categorys"
:key="item.id"
class="category-item"
:style="{
left: `${-(index * 26)}px`,
'background-image': item.hovered
? `url(/statistical/category-right-active.png)`
: `url(/statistical/category-right.png)`,
}"
@click="getHome(item)"
@mouseover="item.hovered = true"
@mouseout="item.hovered = false"
>
{{ item.title }}
</div>
</div>
<div class="user-info" style="z-index: 9999">
<span style="color: #325e95">{{ fireUserLoginName }}</span>
&nbsp;&nbsp;&nbsp;
<span style="color: #ddd" @click="logout">退出</span>
</div>
</template>
<script lang="ts" setup>
import { ref, defineEmits, onMounted, onUnmounted, watchEffect, h } from 'vue';
import axios from 'axios';
import dayjs from 'dayjs';
import { useI18n } from '@/hooks/web/useI18n';
const { t } = useI18n();
import { message } from 'ant-design-vue';
import { getSpecialData } from '@/api/demo/system';
import { useRouter } from 'vue-router';
import { PageEnum } from '@/enums/pageEnum';
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const router = useRouter();
import { useMessage } from '@/hooks/web/useMessage';
import { useMultipleTabStore } from '@/store/modules/multipleTab';
const { createConfirm } = useMessage();
// 上方菜单
const left_categorys = ref([]);
const right_categorys = ref([]);
async function getMenu() {
const res: any = await getSpecialData();
console.log('res123', res);
// 综合监管
let category: any = {
title: '综合监管',
isDevelop: false,
hovered: false,
};
left_categorys.value?.push(category);
res?.forEach((item, index) => {
if (index < 2) {
// 违法用地、非法采矿
item.hovered = false;
left_categorys.value?.push(item);
} else if (index >= 2 && index < 5) {
// 重点问题、耕地非粮化、巡察审计
item.hovered = false;
right_categorys.value?.push(item);
}
});
}
// 登陆用户
const fireUserLoginName = ref(localStorage.getItem('fireUserLoginName'));
function getFireUserLoginName() {
fireUserLoginName.value = localStorage.getItem('fireUserLoginName')
? localStorage.getItem('fireUserLoginName')
: '';
}
const tabStore = useMultipleTabStore();
function logout() {
createConfirm({
iconType: 'warning',
title: () => h('span', t('sys.navigation.logoutTip')),
content: () => h('span', t('sys.navigation.logoutMessage')),
onOk: async () => {
tabStore.resetState();
await router.replace(PageEnum.SUBJECT_HOME);
},
});
}
async function getHome(item) {
console.log(window.innerWidth);
if (!item.isDevelop) {
message.warn(item.title + '系统暂未开放！');
return;
}
if (item.isExternal) {
if (item.linkOrApi) {
window.location.href = item.linkOrApi;
} else {
message.warn('系统外部链接未配置！');
return;
}
} else {
if (!item.linkOrApi) {
item.linkOrApi = PageEnum.WELCOME_HOME;
}
userStore.setSubject(item.id, item.title, item.logoTitle, item.linkOrApi);
}
}
// 时间和天气
const currentTime = ref(dayjs().locale('zh-cn').format('YYYY年M月D日 dddd HH:mm:ss'));
const Weather = ref('');
async function getWeather() {
try {
// 百度国内天气查询API
const response = await axios.get('https://api.map.baidu.com/weather/v1/', {
params: {
district_id: 371300,
data_type: 'all',
ak: 'qbMvuMbWe1fJnOBNLJFsjoeHC3wfWkoB',
},
timeout: 15000,
});
Weather.value = response?.result?.now?.text;
} catch (error) {
// 备用
// http://www.tianqiapi.com/index/doc?version=v63
// 若次数试用用尽，注册账号后，切换appid和appsecret即可
axios({
method: 'get',
url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
}).then((res) => {
Weather.value = res.data.wea;
});
}
}
function updateTime() {
currentTime.value = dayjs().locale('zh-cn').format('YYYY年M月D日 dddd HH:mm');
}
// 监听每一秒更新时间
watchEffect(() => {
const intervalId = setInterval(updateTime, 1000);
// 清除定时器
onUnmounted(() => clearInterval(intervalId));
});
onUnmounted(() => {
updateTime();
});
onMounted(() => {
getWeather();
getMenu();
getFireUserLoginName();
});
</script>
<style lang="less" scoped>
.screen-header-container {
width: 100%;
height: 100px;
// background-image: url('/statistical/header.png');
// background-size: 100% 96px;
background:
// linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0) 100%)
// no-repeat top left / 100% 90px,
url('/statistical/mask.png') no-repeat top left / 100% 100px,
url('/statistical/header.png') no-repeat top left / 100% 96px;
position: absolute;
top: 0px;
left: 0px;
z-index: 3;
height: 94px;
.screen-title {
width: 682px;
// height: 96px;
line-height: 90px;
font-family: Alibaba PuHuiTi;
font-weight: bold;
font-size: 45px;
color: #8be5ee;
background: linear-gradient(0deg, #c6f3ff 0%, #f3feff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0px auto;
text-align: center;
img {
position: relative;
top: -5px;
}
}
.screen-currentTime {
position: relative;
left: 50px;
top: -60px;
width: 344px;
height: 14px;
font-family: DengXian;
font-weight: 400;
font-size: 14px;
color: #8bd8ff;
line-height: 3px;
font-style: italic;
display: flex;
align-items: center;
}
.time,
.weather {
display: inline-block;
}
.separator {
margin: 0 50px;
}
.left-category-container {
position: absolute;
top: 50px;
left: 50%;
transform: translate(calc(-50% - 570px), 0);
.category-item {
float: left;
width: 138px;
height: 32px;
font-size: 14px;
line-height: 32px;
text-align: center;
background-image: url('/statistical/category-left.png');
background-size: 138px 32px;
color: #fff;
position: relative;
cursor: pointer;
}
}
.right_category-container {
position: absolute;
top: 50px;
right: 50%;
transform: translate(calc(50% + 570px), 0);
.category-item {
float: left;
width: 138px;
height: 32px;
font-size: 14px;
line-height: 32px;
text-align: center;
background-image: url('/statistical/category-right.png');
background-size: 138px 32px;
color: #fff;
cursor: pointer;
position: relative;
}
}
.user-info {
width: 120px;
color: #e1e1e1;
position: absolute;
top: 48px;
right: 50px;
font-size: 14px;
z-index: 9;
&:hover {
cursor: pointer;
color: #8be5ee;
}
}
}
</style>

37
src/views/sys/exception/Converge/util.ts Normal file
View File

@ -0,0 +1,37 @@
export const layers = [
{
id: 'house',
name:"房屋",
checked:false,
tableName: 'view_shp_idle_house',
color: '#F70303',
},
{
id: 'land',
name:"土地资源",
checked:false,
tableName: 'view_shp_idle_land',
color: '#0AF703',
},
{
id: 'waters',
name:"水域",
checked:false,
tableName: 'view_shp_idle_waters',
color: '#0382F7',
},
{
id: 'farming',
name:"农业生产设施",
checked:false,
tableName: 'view_shp_idle_farming',
color: '#F4E004',
},
{
id: 'nongji',
name:"农机组织",
checked:false,
tableName: 'view_shp_idle_nongji',
color: '#F70303',
},
]