Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/ShiJiTianKongDiPingTai
commit
b4ee18d2e8
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
|
||||
<a-descriptions-item label="办理人">{{
|
||||
caseHandleInfo.info.transactor_name
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="办理时间">
|
||||
{{ caseHandleInfo.info.transact_time }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="批准文件名称">
|
||||
{{ caseHandleInfo.info.evidence_file_name }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="批准文件编号">
|
||||
{{ caseHandleInfo.info.evidence_file_number }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="批文有效日期">
|
||||
{{ caseHandleInfo.info.evidence_file_indate }}
|
||||
</a-descriptions-item>
|
||||
|
||||
<a-descriptions-item label="合法举证材料">
|
||||
<div>
|
||||
<ImagePreview :imageList="evidenceFileList" />
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="勘测定界图">
|
||||
<div>
|
||||
<ImagePreview :imageList="boundaryImageList" />
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { watch, ref } from 'vue';
|
||||
import { ImagePreview } from '@/components/Preview';
|
||||
import { caseHandleInfoObj } from '../model';
|
||||
const labelStyle = ref({
|
||||
width: '100px',
|
||||
});
|
||||
const caseHandleInfo = ref<caseHandleInfoObj>({
|
||||
info: {},
|
||||
});
|
||||
const playerOptions: any = ref([]);
|
||||
const boundaryImageList: any = ref([]);
|
||||
const evidenceFileList: any = ref([]);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
playerOptions: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
boundaryImageList: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
evidenceFileList: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
});
|
||||
caseHandleInfo.value = props.data;
|
||||
playerOptions.value = props.playerOptions;
|
||||
boundaryImageList.value = props.boundaryImageList;
|
||||
evidenceFileList.value = props.boundaryImageList;
|
||||
const imgList = ref([
|
||||
'https://picsum.photos/id/66/346/216',
|
||||
'https://picsum.photos/id/67/346/216',
|
||||
'https://picsum.photos/id/68/346/216',
|
||||
]);
|
||||
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(newVal, oldVal) => {
|
||||
caseHandleInfo.value = newVal;
|
||||
playerOptions.value = props.playerOptions;
|
||||
boundaryImageList.value = props.boundaryImageList;
|
||||
evidenceFileList.value = props.boundaryImageList;
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
::v-deep .ant-image .ant-image-img {
|
||||
width: 85px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
|
||||
<a-descriptions-item label="办理人">{{
|
||||
caseHandleInfo.info.transactor_name
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="办理时间">
|
||||
{{ caseHandleInfo.info.transact_time }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="立案号">
|
||||
{{ caseHandleInfo.info.registr_number }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="当事人姓名">
|
||||
{{ caseHandleInfo.info.illegal_contact }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="身份证号码">
|
||||
{{ caseHandleInfo.info.illegal_contact_idcard }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="违法类型">
|
||||
{{ caseHandleInfo.info.illegal_type }}
|
||||
</a-descriptions-item>
|
||||
|
||||
<a-descriptions-item label="处罚通知书">
|
||||
<div>
|
||||
<ImagePreview :imageList="punishImageList" />
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="交款通知单">
|
||||
<div>
|
||||
<ImagePreview :imageList="paymentImageList" />
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { watch, ref } from 'vue';
|
||||
import { ImagePreview } from '@/components/Preview';
|
||||
import { caseHandleInfoObj } from '../model';
|
||||
const labelStyle = ref({
|
||||
width: '100px',
|
||||
});
|
||||
const caseHandleInfo = ref<caseHandleInfoObj>({
|
||||
info: {},
|
||||
});
|
||||
const playerOptions: any = ref([]);
|
||||
const paymentImageList: any = ref([]);
|
||||
const punishImageList: any = ref([]);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
playerOptions: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
paymentImageList: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
punishImageList: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
});
|
||||
caseHandleInfo.value = props.data;
|
||||
playerOptions.value = props.playerOptions;
|
||||
paymentImageList.value = props.paymentImageList;
|
||||
punishImageList.value = props.paymentImageList;
|
||||
const imgList = ref([
|
||||
'https://picsum.photos/id/66/346/216',
|
||||
'https://picsum.photos/id/67/346/216',
|
||||
'https://picsum.photos/id/68/346/216',
|
||||
]);
|
||||
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(newVal, oldVal) => {
|
||||
caseHandleInfo.value = newVal;
|
||||
playerOptions.value = props.playerOptions;
|
||||
paymentImageList.value = props.paymentImageList;
|
||||
punishImageList.value = props.paymentImageList;
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
::v-deep .ant-image .ant-image-img {
|
||||
width: 85px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<MapboxMaps :mapOptions="mapOptions" @map-on-load="mapOnLoad" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import rodeImg from '@/assets/images/icon_fly2.png';
|
||||
import { ref, watch } from 'vue';
|
||||
import MapboxMaps from '@/components/MapboxMaps/index.vue';
|
||||
import { getDroneGeoJson } from '@/api/monitor/index';
|
||||
const detailMap = ref();
|
||||
const props = defineProps({
|
||||
ruleForm: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
});
|
||||
const geojson = ref();
|
||||
const droneMarker = ref();
|
||||
const mapBox = ref();
|
||||
|
||||
const mapOptions = {
|
||||
center: [117.84714891969796, 35.22152309532066],
|
||||
zoom: 10,
|
||||
};
|
||||
watch(
|
||||
() => props.ruleForm,
|
||||
(newVal, oldVal) => {
|
||||
console.log(newVal);
|
||||
loadCaseGeoJson();
|
||||
detailMap.value.flyTo({
|
||||
center: [newVal.lng, newVal.lat], // 中心点
|
||||
zoom: 18, // 缩放比例
|
||||
pitch: 0, // 倾斜度
|
||||
});
|
||||
loadDroneMarker(newVal.lng, newVal.lat);
|
||||
},
|
||||
);
|
||||
const mapOnLoad = (map) => {
|
||||
mapBox.value = map;
|
||||
// 测试地址
|
||||
const testSource =
|
||||
'http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
|
||||
map.U.addVector('name', testSource);
|
||||
map.U.addLineLayer('ffff', {
|
||||
source: 'name',
|
||||
'source-layer': 'lindi',
|
||||
});
|
||||
detailMap.value = map;
|
||||
loadImageLayer();
|
||||
loadStreetBorderLayer();
|
||||
loadCaseGeoJson();
|
||||
};
|
||||
// 费县图斑
|
||||
function loadImageLayer() {
|
||||
detailMap.value.addLayer({
|
||||
id: 'wms-test-layer',
|
||||
type: 'raster',
|
||||
source: {
|
||||
type: 'raster',
|
||||
tiles: [
|
||||
'http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
|
||||
],
|
||||
tileSize: 256,
|
||||
},
|
||||
paint: {},
|
||||
});
|
||||
}
|
||||
// 费县镇界
|
||||
function loadStreetBorderLayer() {
|
||||
detailMap.value.addLayer({
|
||||
id: 'street-border',
|
||||
type: 'raster',
|
||||
source: {
|
||||
type: 'raster',
|
||||
tiles: [
|
||||
'http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:zhenjie&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
|
||||
],
|
||||
tileSize: 256,
|
||||
},
|
||||
paint: {},
|
||||
layout: {
|
||||
visibility: 'visible',
|
||||
},
|
||||
});
|
||||
detailMap.value.resize();
|
||||
}
|
||||
// 获取GeoJSON图层
|
||||
async function loadCaseGeoJson() {
|
||||
const data = await getDroneGeoJson({ id: props.ruleForm.info.id });
|
||||
console.log(data);
|
||||
geojson.value = data;
|
||||
if (geojson.value.features.length == 0) {
|
||||
detailMap.value.addLayer({
|
||||
id: 'points',
|
||||
type: 'symbol',
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [props.ruleForm.info.lng, props.ruleForm.info.lng],
|
||||
},
|
||||
properties: {
|
||||
title: 'Mapbox DC',
|
||||
icon: 'monument',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
layout: {},
|
||||
});
|
||||
}
|
||||
// 报错的修改方法There is already a source with ID "geojsonfill"
|
||||
if (detailMap.value.getLayer('geojsonfill')) {
|
||||
detailMap.value.removeLayer('geojsonfill');
|
||||
detailMap.value.removeSource('geojsonfill');
|
||||
}
|
||||
if (detailMap.value.getLayer('geojsonline')) {
|
||||
detailMap.value.removeLayer('geojsonline');
|
||||
detailMap.value.removeSource('geojsonline');
|
||||
}
|
||||
|
||||
detailMap.value.addLayer({
|
||||
id: 'geojsonfill',
|
||||
type: 'fill',
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: geojson.value,
|
||||
},
|
||||
paint: {
|
||||
'fill-color': '#FE9003',
|
||||
'fill-opacity': 0.2,
|
||||
'fill-outline-color': '#FE9003',
|
||||
},
|
||||
});
|
||||
|
||||
detailMap.value.addLayer({
|
||||
id: 'geojsonline',
|
||||
type: 'line',
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: geojson.value,
|
||||
},
|
||||
layout: {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round',
|
||||
},
|
||||
paint: {
|
||||
'line-color': '#FE9003',
|
||||
'line-width': 4,
|
||||
},
|
||||
});
|
||||
}
|
||||
// 案件位置显示无人机图标
|
||||
function loadDroneMarker(lng, lat) {
|
||||
if (detailMap.value.getLayer('cat-on-building')) {
|
||||
detailMap.value.removeLayer('cat-on-building');
|
||||
detailMap.value.removeSource('cat-on-building');
|
||||
detailMap.value.removeImage('cat');
|
||||
}
|
||||
detailMap.value.loadImage(rodeImg, (error, image) => {
|
||||
detailMap.value.addImage('cat', image);
|
||||
detailMap.value.addLayer({
|
||||
id: 'cat-on-building',
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [lng, lat],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
slot: 'top',
|
||||
type: 'symbol',
|
||||
layout: {
|
||||
'icon-image': 'cat',
|
||||
'icon-size': 0.05,
|
||||
'symbol-placement': 'point',
|
||||
'symbol-z-elevate': true,
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.w-full {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
|
||||
<a-descriptions-item label="办理人">{{
|
||||
caseHandleInfo.info.transactor_name
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="办理时间">
|
||||
{{ caseHandleInfo.info.transact_time }}
|
||||
</a-descriptions-item>
|
||||
|
||||
<a-descriptions-item label="政府统一完善手续证明">
|
||||
<div>
|
||||
<ImagePreview :imageList="agreeImageList" />
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="办理手续照片">
|
||||
<div>
|
||||
<ImagePreview :imageList="checkoutImageList" />
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
|
||||
<a-descriptions-item label="手续有效期">
|
||||
{{ caseHandleInfo.info.procedure_indate }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="批准文件编号">
|
||||
{{ caseHandleInfo.info.evidence_file_number }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="批文有效日期">
|
||||
{{ caseHandleInfo.info.evidence_file_indate }}
|
||||
</a-descriptions-item>
|
||||
|
||||
<a-descriptions-item label="勘测定界图">
|
||||
<div>
|
||||
<ImagePreview :imageList="boundaryImageList" />
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { watch, ref } from 'vue';
|
||||
import { ImagePreview } from '@/components/Preview';
|
||||
import { caseHandleInfoObj } from '../model';
|
||||
const labelStyle = ref({
|
||||
width: '100px',
|
||||
});
|
||||
const caseHandleInfo = ref<caseHandleInfoObj>({
|
||||
info: {},
|
||||
});
|
||||
const playerOptions: any = ref([]);
|
||||
const checkoutImageList: any = ref([]);
|
||||
const boundaryImageList: any = ref([]);
|
||||
const agreeImageList: any = ref([]);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
playerOptions: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
checkoutImageList: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
boundaryImageList: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
agreeImageList: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
});
|
||||
caseHandleInfo.value = props.data;
|
||||
playerOptions.value = props.playerOptions;
|
||||
boundaryImageList.value = props.checkoutImageList;
|
||||
checkoutImageList.value = props.checkoutImageList;
|
||||
agreeImageList.value = props.checkoutImageList;
|
||||
const imgList = ref([
|
||||
'https://picsum.photos/id/66/346/216',
|
||||
'https://picsum.photos/id/67/346/216',
|
||||
'https://picsum.photos/id/68/346/216',
|
||||
]);
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(newVal, oldVal) => {
|
||||
caseHandleInfo.value = newVal;
|
||||
playerOptions.value = props.playerOptions;
|
||||
boundaryImageList.value = props.checkoutImageList;
|
||||
checkoutImageList.value = props.checkoutImageList;
|
||||
agreeImageList.value = props.checkoutImageList;
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
::v-deep .ant-image .ant-image-img {
|
||||
width: 85px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,22 @@
|
||||
// 案件详情首页
|
||||
export { default as CaseView } from './caseview/index.vue';
|
||||
// 【案件下发信息】
|
||||
export { default as Issue } from './caseview/src/issue.vue';
|
||||
// 【案件核查信息】
|
||||
export { default as Inspect } from './caseview/src/inspect.vue';
|
||||
// 【案件审核信息】
|
||||
export { default as Audit } from './caseview/src/audit.vue';
|
||||
// 【案件办理信息-违法-拟拆除】
|
||||
export { default as Dismantle } from './caseview/src/dismantle.vue';
|
||||
// 地图位置
|
||||
export { default as MapDetail } from './caseview/src/mapDetail.vue';
|
||||
// 案件办理信息-合法举证
|
||||
export { default as Evidence } from './caseview/src/evidence.vue';
|
||||
// 【案件办理信息-违法-查处】
|
||||
export { default as Investigate } from './caseview/src/investigate.vue';
|
||||
// 【案件办理信息-违法-拟完善手续】
|
||||
export { default as Procedure } from './caseview/src/procedure.vue';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue