Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua
commit
bc674801f7
|
|
@ -2,7 +2,14 @@
|
|||
<div class="map-container">
|
||||
|
||||
<div :id="mapContainerName" class="map-box"></div>
|
||||
|
||||
<div class="cloud-query-div" v-if="props.geomsList" @click="initiateCloudQuery">
|
||||
<div>
|
||||
<div class="cloud-query-icon">
|
||||
<Icon icon="gis:globe-poi" :size="20"/>
|
||||
</div>
|
||||
<div>云查询</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图层控制 -->
|
||||
<div class="layer-control-center" v-if="false">
|
||||
<a-collapse v-model:activeKey="activeKey" accordion expandIconPosition="end" expandIcon="">
|
||||
|
|
@ -92,6 +99,7 @@
|
|||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import {CloseOutlined,EnvironmentOutlined,DeleteOutlined,CopyOutlined,PlusOutlined,ClearOutlined,SplitCellsOutlined} from "@ant-design/icons-vue"
|
||||
import mapboxgl,{ Map, Popup } from 'mapbox-gl';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
|
||||
// 图形绘制工具类
|
||||
import MapboxDraw from '@mapbox/mapbox-gl-draw';
|
||||
|
|
@ -178,7 +186,11 @@
|
|||
splitPlugin:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
}
|
||||
},
|
||||
geomsList:{
|
||||
type:Array,
|
||||
default:null,
|
||||
},
|
||||
});
|
||||
|
||||
let nextMapControl: Array<any> = reactive([]);
|
||||
|
|
@ -1222,6 +1234,9 @@
|
|||
const handlerLocationDrawPolygon = ()=>{
|
||||
|
||||
}
|
||||
const initiateCloudQuery = () => {
|
||||
console.log('aaa props.geomsList',props.geomsList)
|
||||
}
|
||||
|
||||
|
||||
defineExpose({
|
||||
|
|
@ -1233,6 +1248,28 @@
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cloud-query-div{
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 10px;
|
||||
width:52px;
|
||||
height:60px;
|
||||
background:#fff;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding:5px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 0 2px rgba(0, 0, 0, .1);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cloud-query-icon{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -34,6 +34,10 @@ export const columns: BasicColumn[] = [
|
|||
title: '乡镇',
|
||||
dataIndex: 'streetname',
|
||||
},
|
||||
{
|
||||
title: '社区/村',
|
||||
dataIndex: 'communityname',
|
||||
},
|
||||
{
|
||||
title: '图斑编号',
|
||||
dataIndex: 'caseno',
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div class="detail-container">
|
||||
<div class="map-container">
|
||||
<MapboxMap
|
||||
:geomsList="geomsList"
|
||||
:mapConfig="mapConfig"
|
||||
@handlerDrawComplete="handlerDrawComplete"
|
||||
@mapOnLoad="onMapboxLoad"
|
||||
|
|
@ -267,6 +268,7 @@
|
|||
const activeKey = ref('1');
|
||||
|
||||
console.log('showInfoData123', props.showInfoData);
|
||||
const geomsList = ref()
|
||||
const {
|
||||
id,
|
||||
case_no,
|
||||
|
|
@ -447,11 +449,13 @@
|
|||
mapgeom: item.geometry,
|
||||
};
|
||||
geoms.push(geom);
|
||||
geomsList.value = geoms;
|
||||
});
|
||||
}
|
||||
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
|
||||
MapboxComponent.value.handlerDraw('Details', geoms, false);
|
||||
} else {
|
||||
geomsList.value = null;
|
||||
createMessage.error('当前数据没有图斑！');
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<a-divider orientation="left">图斑信息</a-divider>
|
||||
<div class="map-container">
|
||||
<MapboxMap
|
||||
:geomsList="geomsList"
|
||||
:mapConfig="mapConfig"
|
||||
@handlerDrawComplete="handlerDrawComplete"
|
||||
@handlerSplitPolygon="handlerSplitPolygon"
|
||||
|
|
@ -486,6 +487,7 @@
|
|||
const emits = defineEmits(['closeModal']);
|
||||
const props = defineProps(['showInfoData']);
|
||||
const activeKey = ref('1');
|
||||
const geomsList = ref()
|
||||
|
||||
const {
|
||||
id,
|
||||
|
|
@ -673,11 +675,13 @@
|
|||
mapgeom: item.geometry,
|
||||
};
|
||||
geoms.push(geom);
|
||||
geomsList.value = geoms;
|
||||
});
|
||||
}
|
||||
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
|
||||
MapboxComponent.value.handlerDraw('Details', geoms, false);
|
||||
} else {
|
||||
geomsList.value = null;
|
||||
createMessage.error('当前数据没有图斑！');
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<div class="maper-container" v-if="mapConfig?.isShowMap">
|
||||
<MapboxMap
|
||||
:mapConfig="mapConfig"
|
||||
:geomsList="geomsList"
|
||||
@handlerDrawComplete="handlerDrawComplete"
|
||||
@mapOnLoad="onMapboxLoad"
|
||||
ref="MapboxComponent"
|
||||
|
|
@ -252,6 +253,7 @@
|
|||
import { buildGUID } from '@/utils/uuid';
|
||||
import { settings } from 'nprogress';
|
||||
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
|
||||
const geomsList = ref()
|
||||
const mapConfig = ref({ isShowMap: false });
|
||||
const MapboxComponent = ref();
|
||||
const { createMessage } = useMessage();
|
||||
|
|
@ -886,9 +888,11 @@
|
|||
geoms.push(geom);
|
||||
});
|
||||
}
|
||||
geomsList.value = geoms;
|
||||
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
|
||||
MapboxComponent.value.handlerDraw('Details', geoms, false);
|
||||
} else {
|
||||
geomsList.value = null
|
||||
createMessage.error('当前数据没有图斑！');
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -54,14 +54,15 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, computed, watchEffect } from 'vue';
|
||||
import Map from './LargeScreenMap/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 axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
//
|
||||
const MapboxComponent = ref();
|
||||
|
|
@ -121,30 +122,55 @@
|
|||
// 等比例放大缩小
|
||||
let layerSiderWidth = 210;
|
||||
const viewportWidth = ref(window.innerWidth - layerSiderWidth);
|
||||
const referenceWidth = ref(window.innerWidth - layerSiderWidth);
|
||||
|
||||
const referenceWidth = ref(window.innerWidth - 210);
|
||||
const updateWindowSize = () => {
|
||||
let layerSiderElement: any = document.querySelector('.ant-layout-sider-children');
|
||||
layerSiderWidth = layerSiderElement?.offsetWidth
|
||||
? layerSiderElement?.offsetWidth
|
||||
: layerSiderWidth;
|
||||
referenceWidth.value = 1920 - layerSiderWidth;
|
||||
let layerElement: any = document.querySelector('.ant-tabs-nav');
|
||||
viewportWidth.value = layerElement?.offsetWidth
|
||||
? layerElement?.offsetWidth
|
||||
: viewportWidth.value;
|
||||
setTimeout(() => {
|
||||
let layerSiderElement: any = document.querySelector('.ant-layout-sider-children');
|
||||
layerSiderWidth = layerSiderElement?.offsetWidth ? layerSiderElement?.offsetWidth : 0;
|
||||
referenceWidth.value = 1920 - 210;
|
||||
let layerElement: any = document.querySelector('.ant-tabs-nav');
|
||||
viewportWidth.value = layerElement?.offsetWidth;
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const bi = computed(() => {
|
||||
return viewportWidth.value / referenceWidth.value;
|
||||
});
|
||||
|
||||
// 时间和天气
|
||||
const currentTime = ref(dayjs().format('YYYY年M月D日 ddd HH:mm:ss'));
|
||||
const Weather = ref('');
|
||||
function getWeather() {
|
||||
axios({
|
||||
method:"get",
|
||||
url:`http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
}).then(res => {
|
||||
if(res.data.wea === res.data.wea_night){
|
||||
Weather.value = res.data.wea;
|
||||
} else {
|
||||
Weather.value = res.data.wea + '转' + res.data.wea_night;
|
||||
}
|
||||
})
|
||||
}
|
||||
function updateTime() {
|
||||
currentTime.value = dayjs().format('YYYY年M月D日 ddd HH:mm');
|
||||
}
|
||||
|
||||
// 监听每一秒更新时间
|
||||
watchEffect(() => {
|
||||
const intervalId = setInterval(updateTime, 1000);
|
||||
// 清除定时器
|
||||
onUnmounted(() => clearInterval(intervalId));
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getWeather();
|
||||
window.addEventListener('resize', updateWindowSize);
|
||||
updateWindowSize();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updateWindowSize);
|
||||
updateTime();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue