364 lines
10 KiB
Vue
364 lines
10 KiB
Vue
<template>
|
|
<div class="curb-spot-city">
|
|
<div class="show-list">
|
|
<a-spin :spinning="spinning">
|
|
<AuditProgress
|
|
v-if="false"
|
|
:year="year"
|
|
:batch="batch"
|
|
:batchOptions="batchOptions"
|
|
:yearOptions="yearOptions"
|
|
:dataList="dataList"
|
|
@auditProgressScreenChange="auditProgressScreenChange"
|
|
@showInfo="changeShowInfo"
|
|
/>
|
|
|
|
<!-- <AuthImage
|
|
style="width:180px;height:180px;"
|
|
src="http://120.222.154.48:6050/DroneEnforcement/2024/20240712/2024071209474128610039.jpg"
|
|
type="native"
|
|
:preview="true"
|
|
@perviewImage="perviewImage"
|
|
></AuthImage>
|
|
|
|
<AuthImage
|
|
style="width:180px;height:180px;"
|
|
src="http://120.222.154.48:6050/S_Common/2024/20240712/2024071209201354610087.jpg"
|
|
type="native"
|
|
:preview="true"
|
|
@perviewImage="perviewImage"
|
|
></AuthImage>
|
|
|
|
<AuthImage
|
|
style="width:180px;height:180px;"
|
|
src="http://111.17.207.220:9001/2023/20231220/2023122014532130590143.png"
|
|
type="ant"
|
|
:preview="true"
|
|
@perviewImage="perviewImage"
|
|
></AuthImage> -->
|
|
|
|
<MapList
|
|
v-if="showInfo"
|
|
:infoScreenData="infoScreenData"
|
|
:cityType="cityType"
|
|
:pageNo="pageNo"
|
|
:pageSize="pageSize"
|
|
:total="total"
|
|
:infoDataList="infoDataList"
|
|
:municipalAreaOptions="municipalAreaOptions"
|
|
:countiesAreaOptions="countiesAreaOptions"
|
|
@infoDataListSort="infoDataListSort"
|
|
@changeInfoPage="changeInfoPage"
|
|
@mapListScreenChange="mapListScreenChange"
|
|
@closeShowInfo="changeShowInfo"
|
|
@changeTask="changeTask"
|
|
@collectChange="collectChange"
|
|
@changeSpin="changeSpin"
|
|
/>
|
|
</a-spin>
|
|
</div>
|
|
<div class="map-box-div">
|
|
<MapboxMap
|
|
:mapConfig="mapConfig"
|
|
@handlerDrawComplete="handlerDrawComplete"
|
|
@mapOnLoad="onMapboxLoad"
|
|
ref="MapboxComponent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// import AuthImage from '@/components/Upload/src/components/AuthImage.vue'
|
|
import { ref, onMounted, onUnmounted, watch, defineAsyncComponent } from 'vue';
|
|
import mapboxgl, { Map } from 'mapbox-gl';
|
|
import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config.ts';
|
|
import AuditProgress from './AuditProgress/index.vue';
|
|
import MapList from './MapList/index.vue';
|
|
import { getLoadDroneCaseInfoCount, getLoadDroneCaseInfoDetail } from '@/api/inspectionaudit/index.ts';
|
|
import { batchOptions, yearOptions } from '@/utils/global';
|
|
import { getChildrenTree } from '@/api/demo/system';
|
|
import { getGeom, getConfig } from '@/api/sys/layerManagement';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
import axios from 'axios';
|
|
|
|
const { createMessage } = useMessage();
|
|
|
|
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
|
|
const MapboxComponent = ref();
|
|
const mapConfig = ref({ isShowMap: false });
|
|
|
|
function onMapboxLoad(): void {
|
|
getConfig({ code: 'mapsetting' }).then((res) => {
|
|
mapConfig.value = JSON.parse(res.codeValue);
|
|
});
|
|
}
|
|
|
|
function perviewImage(e): void {}
|
|
|
|
const spinning = ref(false);
|
|
|
|
const showInfo = ref(false);
|
|
const year = ref<number>();
|
|
const batch = ref();
|
|
const dataList = ref<any>([]);
|
|
const infoDataList = ref<any>([]);
|
|
const infoScreenData = ref({
|
|
year: '',
|
|
batch: '',
|
|
mapNo: '',
|
|
countyId: '',
|
|
streetId: '',
|
|
mapType: '',
|
|
illegalType: '',
|
|
measure: '',
|
|
mapStatus: '',
|
|
markType: '',
|
|
sort: '',
|
|
order: '',
|
|
type: '', // 收藏
|
|
});
|
|
const pageNo = ref(1);
|
|
const pageSize = ref(10);
|
|
const total = ref(0);
|
|
const municipalAreaOptions = ref([{ label: '全部', value: '' }]);
|
|
const countiesAreaOptions = ref([{ label: '全部', value: '' }]);
|
|
const cityType = ref();
|
|
const auditProgressScreenChange = (value, type) => {
|
|
switch (type) {
|
|
case 'year':
|
|
year.value = value;
|
|
break;
|
|
case 'batch':
|
|
batch.value = value;
|
|
break;
|
|
}
|
|
let params = {
|
|
year: year.value,
|
|
};
|
|
getLoadDroneCaseInfoCount(params).then((res) => {
|
|
dataList.value = res;
|
|
});
|
|
};
|
|
const mapListScreenChange = (value, type) => {
|
|
switch (type) {
|
|
case 'year':
|
|
infoScreenData.value.year = value;
|
|
break;
|
|
case 'batch':
|
|
infoScreenData.value.batch = value;
|
|
break;
|
|
case 'mapNo':
|
|
infoScreenData.value.mapNo = value;
|
|
break;
|
|
case 'countyId':
|
|
infoScreenData.value.countyId = value;
|
|
break;
|
|
case 'streetId':
|
|
infoScreenData.value.streetId = value;
|
|
break;
|
|
case 'mapType':
|
|
infoScreenData.value.mapType = value;
|
|
if (value !== 1) {
|
|
infoScreenData.value.illegalType = '';
|
|
infoScreenData.value.measure = '';
|
|
}
|
|
break;
|
|
case 'illegalType':
|
|
infoScreenData.value.illegalType = value;
|
|
if (value !== 0) {
|
|
infoScreenData.value.measure = '';
|
|
}
|
|
break;
|
|
case 'measure':
|
|
infoScreenData.value.measure = value;
|
|
break;
|
|
case 'mapStatus':
|
|
infoScreenData.value.mapStatus = value;
|
|
break;
|
|
case 'markType':
|
|
infoScreenData.value.markType = value;
|
|
break;
|
|
}
|
|
};
|
|
const changeShowInfo = (value, item) => {
|
|
showInfo.value = value;
|
|
if (item) {
|
|
cityType.value = 0;
|
|
// cityType.value = item;
|
|
// infoScreenData.value.countyId = item.areaid;
|
|
|
|
// municipalAreaOptions.value = [{ label: item.areaname, value: item.areaid }];
|
|
// getChildrenTree({ parentId: item.areaid }).then((res) => {
|
|
// res.forEach((cityItem) => {
|
|
// countiesAreaOptions.value.push({
|
|
// label: cityItem.name,
|
|
// value: cityItem.id,
|
|
// });
|
|
// });
|
|
// });
|
|
|
|
// console.log("countiesAreaOptions",municipalAreaOptions,countiesAreaOptions)
|
|
// debugger
|
|
} else {
|
|
cityType.value = 0;
|
|
}
|
|
};
|
|
|
|
const getParams = () => {
|
|
let result = {};
|
|
let params = {
|
|
year: infoScreenData.value.year,
|
|
// batch: batch.value,
|
|
countyid: infoScreenData.value.countyId,
|
|
streetid: infoScreenData.value.streetId,
|
|
geomid: infoScreenData.value.mapNo,
|
|
is_illegal: infoScreenData.value.mapType,
|
|
weifaleixing: infoScreenData.value.illegalType,
|
|
measure_name: infoScreenData.value.measure,
|
|
handle_status_id: infoScreenData.value.mapStatus,
|
|
is_build_complete: infoScreenData.value.markType,
|
|
areaid: cityType.value.areaid,
|
|
level: cityType.value.level,
|
|
page: pageNo.value,
|
|
limit: pageSize.value,
|
|
sort: infoScreenData.value.sort,
|
|
order: infoScreenData.value.order,
|
|
type: infoScreenData.value.type,
|
|
};
|
|
Object.keys(params).forEach((key) => {
|
|
if (params[key] !== '' && params[key] !== null) {
|
|
result[key] = params[key];
|
|
}
|
|
});
|
|
return result;
|
|
};
|
|
watch(
|
|
() => year.value,
|
|
(newVal) => {
|
|
infoScreenData.value.year = newVal;
|
|
},
|
|
);
|
|
watch(
|
|
() => batch.value,
|
|
(newVal) => {
|
|
infoScreenData.value.batch = newVal;
|
|
},
|
|
);
|
|
let map: Map;
|
|
onMounted(() => {
|
|
// mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
|
|
// map = initMap();
|
|
getLoadDroneCaseInfoCount()
|
|
.then((res) => {
|
|
dataList.value = res;
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
|
|
changeShowInfo(true, null);
|
|
});
|
|
onUnmounted(() => {
|
|
map && map.remove();
|
|
});
|
|
const initMap = () => {
|
|
return new mapboxgl.Map({
|
|
container: 'showMap',
|
|
language: 'zh-cmn',
|
|
projection: 'equirectangular', // wgs84参考系
|
|
style: MapboxDefaultStyle,
|
|
maxZoom: 22,
|
|
minZoom: 6,
|
|
zoom: 10,
|
|
// ...props.mapOptions,
|
|
center: [117.984425, 35.270654],
|
|
});
|
|
};
|
|
|
|
const changeInfoPage = (page, limit) => {
|
|
pageNo.value = page;
|
|
pageSize.value = limit;
|
|
};
|
|
const collectChange = (value) => {
|
|
pageNo.value = 1;
|
|
infoScreenData.value.type = value;
|
|
};
|
|
|
|
function changeTask(val) {
|
|
let getGeomPrams = {
|
|
TableName: 'drone_shp_data ',
|
|
FieldName: 'gid',
|
|
FieldValue: val?.split(','),
|
|
page: 1,
|
|
limit: 999,
|
|
key: null,
|
|
};
|
|
if (val) {
|
|
getGeom(getGeomPrams).then((res) => {
|
|
let geoms = [];
|
|
if (res) {
|
|
if (res.items?.length > 0) {
|
|
res.items.forEach((item, index) => {
|
|
let geom = {
|
|
key: item.gid,
|
|
mapgeom: item.geometry,
|
|
};
|
|
geoms.push(geom);
|
|
});
|
|
}
|
|
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
|
|
MapboxComponent.value.handlerDraw('Details', geoms, false);
|
|
} else {
|
|
createMessage.error('当前数据没有线索！');
|
|
}
|
|
});
|
|
} else {
|
|
createMessage.error('当前数据没有线索！');
|
|
}
|
|
}
|
|
const infoDataListSort = (type, order) => {
|
|
switch (order) {
|
|
case 0:
|
|
infoScreenData.value.sort = '';
|
|
infoScreenData.value.order = '';
|
|
break;
|
|
case 1:
|
|
infoScreenData.value.sort = type;
|
|
infoScreenData.value.order = 'asc';
|
|
break;
|
|
case 2:
|
|
infoScreenData.value.sort = type;
|
|
infoScreenData.value.order = 'desc';
|
|
break;
|
|
}
|
|
getLoadDroneCaseInfoDetail(getParams()).then((res) => {
|
|
total.value = res.total;
|
|
infoDataList.value = res.items;
|
|
pageNo.value = 1;
|
|
});
|
|
};
|
|
const changeSpin = (val) => {
|
|
spinning.value = val;
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.curb-spot-city {
|
|
height: 100%;
|
|
display: flex;
|
|
.show-list {
|
|
width: 590px;
|
|
:deep(.ant-spin-nested-loading) {
|
|
height: 100%;
|
|
}
|
|
:deep(.ant-spin-container) {
|
|
height: 100%;
|
|
}
|
|
}
|
|
.map-box-div {
|
|
width: calc(100% - 590px);
|
|
}
|
|
}
|
|
</style>
|