Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua
commit
3a3887fe91
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,538 @@
|
||||||
|
<template>
|
||||||
|
<PageWrapper dense contentFullHeight fixedHeight>
|
||||||
|
<div class="search-box">
|
||||||
|
<BasicForm
|
||||||
|
@register="registerForm"
|
||||||
|
:labelWidth="100"
|
||||||
|
:schemas="searchFormSchema"
|
||||||
|
:actionColOptions="{ span: 24 }"
|
||||||
|
>
|
||||||
|
<template #dangqianzhuangtai>
|
||||||
|
<a-select
|
||||||
|
allowClear
|
||||||
|
showArrow
|
||||||
|
mode="multiple"
|
||||||
|
v-model:value="nowStatus"
|
||||||
|
:options="nowStatusOptions"
|
||||||
|
:max-tag-count="1"
|
||||||
|
placeholder="请选择"
|
||||||
|
@change="changeStatus"
|
||||||
|
:field-names="{ label: 'itemName', value: 'itemValue' }"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #tubanmianji>
|
||||||
|
<div class="scope-box">
|
||||||
|
<a-input v-model:value="areaParams.tubanArea1" placeholder="请输入" />
|
||||||
|
-
|
||||||
|
<a-input v-model:value="areaParams.tubanArea2" placeholder="请输入" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
|
</div>
|
||||||
|
<div class="table-box">
|
||||||
|
<BasicTable @register="registerTable" :searchInfo="searchInfo" @change="handleChange">
|
||||||
|
<template #toolbar>
|
||||||
|
<PermissionBtn @btn-event="onBtnClicked" />
|
||||||
|
</template>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="['area', 'gengdiarea', 'nongyongdiarea'].includes(column.key)">
|
||||||
|
{{ dataProcessingCount(record[column.key]) }}
|
||||||
|
</template>
|
||||||
|
<template v-if="column.key === 'action'">
|
||||||
|
<TableAction
|
||||||
|
:actions="[
|
||||||
|
{
|
||||||
|
// icon: 'ant-design:ellipsis-outlined',
|
||||||
|
label: '查看',
|
||||||
|
onClick: viewAccount.bind(null, record),
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</div>
|
||||||
|
<a-modal v-model:open="open" title="导出文件类型" :footer="null">
|
||||||
|
<div>
|
||||||
|
<a-button class="exportbutton" @click="handleExport('excel')">
|
||||||
|
图斑汇总统计报表（execl）
|
||||||
|
</a-button>
|
||||||
|
<a-button class="exportbutton" @click="handleExport('shp')">
|
||||||
|
图斑汇总矢量数据（shp）
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
<a-modal
|
||||||
|
style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
|
||||||
|
wrap-class-name="full-modal"
|
||||||
|
v-model:open="showInfoOpen"
|
||||||
|
title="详情"
|
||||||
|
:footer="null"
|
||||||
|
:maskClosable="true"
|
||||||
|
:destroyOnClose="true"
|
||||||
|
@cancel="showInfoOpen = false"
|
||||||
|
>
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="handoff">
|
||||||
|
<a-button type="primary" style="margin-right: 25px" @click="downloadFilesAsZip">
|
||||||
|
下载
|
||||||
|
</a-button>
|
||||||
|
<a-button type="primary" style="margin-right: 25px" @click="prevData">上一条</a-button>
|
||||||
|
<a-button type="primary" @click="nextData">下一条</a-button>
|
||||||
|
</div>
|
||||||
|
<Detail ref="detailRef" :id="caseId" />
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</PageWrapper>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, reactive, onMounted, watch } from 'vue';
|
||||||
|
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||||
|
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||||
|
import { columns, searchFormSchema } from './patchsummary.data';
|
||||||
|
import { getAppEnvConfig } from '@/utils/env';
|
||||||
|
import axios from 'axios';
|
||||||
|
import JSZip from 'jszip';
|
||||||
|
import { saveAs } from 'file-saver';
|
||||||
|
import Detail from './detail/index.vue';
|
||||||
|
import { dataProcessingCount } from '@/views/demo/tiankongdi/util';
|
||||||
|
import { BasicForm, useForm } from '@/components/Form';
|
||||||
|
import { PageWrapper } from '@/components/Page';
|
||||||
|
import { getLoadCaseInfoMineralsTuBanList } from '@/api/minerals/index';
|
||||||
|
import { getLoad } from '@/api/sys/sysDataItemDetail';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
|
||||||
|
const nextShowDataId = ref();
|
||||||
|
const prevShowDataId = ref();
|
||||||
|
defineOptions({ name: 'RoleManagement' });
|
||||||
|
const caseId = ref();
|
||||||
|
const searchInfo = reactive<Recordable>({
|
||||||
|
countyid: null,
|
||||||
|
});
|
||||||
|
const showInfoOpen = ref(false);
|
||||||
|
const searchParams = ref({
|
||||||
|
page: 1,
|
||||||
|
limit: 10,
|
||||||
|
});
|
||||||
|
const nowStatusOptions = ref([]);
|
||||||
|
function getOptions() {
|
||||||
|
getLoad({ code: 'kcdangqianzhuangtai' }).then((res) => {
|
||||||
|
nowStatusOptions.value = res;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const nowStatus = ref(undefined);
|
||||||
|
const areaParams = ref({
|
||||||
|
tubanArea1: null,
|
||||||
|
tubanArea2: null,
|
||||||
|
status_base: undefined,
|
||||||
|
});
|
||||||
|
const tableData = ref([]);
|
||||||
|
const tablePaginationRight = ref({
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
size: 'small',
|
||||||
|
defaultPageSize: 10,
|
||||||
|
showSizeChanger: true,
|
||||||
|
pageSizeOptions: ['10', '50', '80', '100'],
|
||||||
|
showQuickJumper: true,
|
||||||
|
total: 0,
|
||||||
|
});
|
||||||
|
const [registerForm, { validate, getFieldsValue }] = useForm({
|
||||||
|
schemas: searchFormSchema,
|
||||||
|
labelWidth: 100,
|
||||||
|
baseColProps: { span: 6 },
|
||||||
|
actionColOptions: { span: 24 },
|
||||||
|
autoSubmitOnEnter: true,
|
||||||
|
submitFunc: handleSubmit,
|
||||||
|
resetFunc: handleReset,
|
||||||
|
autoSubmitOnEnter: handleSubmit,
|
||||||
|
});
|
||||||
|
const [registerTable, { setTableData, reload, clearSelectedRowKeys, setPagination, setLoading }] =
|
||||||
|
useTable({
|
||||||
|
title: '图斑列表',
|
||||||
|
dataSource: tableData.value,
|
||||||
|
columns,
|
||||||
|
rowKey: 'id',
|
||||||
|
useSearchForm: false,
|
||||||
|
showTableSetting: true,
|
||||||
|
bordered: true,
|
||||||
|
// 搜索
|
||||||
|
handleSearchInfoFn(info) {
|
||||||
|
searchParams.value = info;
|
||||||
|
return info;
|
||||||
|
},
|
||||||
|
actionColumn: {
|
||||||
|
width: 80,
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'action',
|
||||||
|
// slots: { customRender: 'action' },
|
||||||
|
fixed: 'right',
|
||||||
|
},
|
||||||
|
pagination: tablePaginationRight.value,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 直接下载接口返回的二进制流
|
||||||
|
function handleExport(exportType) {
|
||||||
|
console.log(searchParams);
|
||||||
|
let params = { ...searchParams.value };
|
||||||
|
let url = '';
|
||||||
|
let fileName = '';
|
||||||
|
if (exportType == 'excel') {
|
||||||
|
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoMinerals/ExportCaseInfoMineralsTuBanList';
|
||||||
|
fileName = '图斑汇总统计报表' + new Date().getTime() + '.xls';
|
||||||
|
} else if (exportType == 'shp') {
|
||||||
|
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoMinerals/ExportIllegalCaiKuangShapefile';
|
||||||
|
fileName = '图斑汇总矢量数据' + new Date().getTime() + '.zip';
|
||||||
|
}
|
||||||
|
axios({
|
||||||
|
method: 'post',
|
||||||
|
url: url,
|
||||||
|
params: params,
|
||||||
|
headers: {
|
||||||
|
'X-Token': localStorage.getItem('X-Token'),
|
||||||
|
},
|
||||||
|
responseType: 'blob',
|
||||||
|
}).then((res) => {
|
||||||
|
const elink = document.createElement('a');
|
||||||
|
elink.download = fileName;
|
||||||
|
elink.style.display = 'none';
|
||||||
|
elink.href = URL.createObjectURL(res.data);
|
||||||
|
document.body.appendChild(elink);
|
||||||
|
elink.click();
|
||||||
|
URL.revokeObjectURL(elink.href);
|
||||||
|
document.body.removeChild(elink);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const open = ref<boolean>(false);
|
||||||
|
function onBtnClicked(domId) {
|
||||||
|
switch (domId) {
|
||||||
|
case 'btnExport':
|
||||||
|
open.value = true;
|
||||||
|
// handleExport('excel');
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function viewAccount(record) {
|
||||||
|
caseId.value = record.Id;
|
||||||
|
showInfoOpen.value = true;
|
||||||
|
}
|
||||||
|
function handleChange(data) {
|
||||||
|
searchParams.value.page = data.current;
|
||||||
|
searchParams.value.limit = data.pageSize;
|
||||||
|
tablePaginationRight.value = data;
|
||||||
|
const querys = Object.assign(searchParams.value, areaParams.value);
|
||||||
|
getTableData(querys);
|
||||||
|
}
|
||||||
|
function changeStatus(val) {
|
||||||
|
areaParams.value.status_base = val.join(',');
|
||||||
|
}
|
||||||
|
function handleSubmit() {
|
||||||
|
searchParams.value = getFieldsValue();
|
||||||
|
searchParams.value.page = 1;
|
||||||
|
tablePaginationRight.value.current = 1;
|
||||||
|
searchParams.value.limit = tablePaginationRight.value.pageSize;
|
||||||
|
const querys = Object.assign(searchParams.value, areaParams.value);
|
||||||
|
getTableData(querys);
|
||||||
|
}
|
||||||
|
async function getTableData(querys) {
|
||||||
|
if (querys.tubanlaiyuan) {
|
||||||
|
querys.tubanlaiyuan = querys.tubanlaiyuan.join(',');
|
||||||
|
}
|
||||||
|
setLoading(true);
|
||||||
|
await getLoadCaseInfoMineralsTuBanList(querys).then((res) => {
|
||||||
|
tableData.value = res.items;
|
||||||
|
tablePaginationRight.value.total = res.total;
|
||||||
|
setTableData(tableData.value);
|
||||||
|
setPagination(tablePaginationRight.value);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function handleReset() {
|
||||||
|
searchParams.value = {
|
||||||
|
page: 1,
|
||||||
|
limit: 10,
|
||||||
|
};
|
||||||
|
areaParams.value = {
|
||||||
|
tubanArea1: null,
|
||||||
|
tubanArea2: null,
|
||||||
|
status_base: undefined,
|
||||||
|
};
|
||||||
|
nowStatus.value = undefined;
|
||||||
|
tablePaginationRight.value.current = 1;
|
||||||
|
getTableData(searchParams.value);
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
getTableData(searchParams.value);
|
||||||
|
getOptions();
|
||||||
|
});
|
||||||
|
watch(
|
||||||
|
() => caseId.value,
|
||||||
|
() => {
|
||||||
|
let index = tableData.value.findIndex((item) => item.Id == caseId.value);
|
||||||
|
if (index < tableData.value.length - 1) {
|
||||||
|
nextShowDataId.value = tableData.value[index + 1].Id;
|
||||||
|
} else {
|
||||||
|
nextShowDataId.value = 0;
|
||||||
|
}
|
||||||
|
if (index > 0) {
|
||||||
|
prevShowDataId.value = tableData.value[index - 1].Id;
|
||||||
|
} else {
|
||||||
|
prevShowDataId.value = 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
// 获取到files
|
||||||
|
function getFiles(caseInfo) {
|
||||||
|
const files: any = [];
|
||||||
|
// 详情_图斑图片
|
||||||
|
if (caseInfo.tubanpic_base) {
|
||||||
|
caseInfo.tubanpic_base.split(',').forEach((item) => {
|
||||||
|
files.push({
|
||||||
|
name: item.split('\\').pop(),
|
||||||
|
url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
|
||||||
|
path: '详情_图斑图片',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 填报_现场照片
|
||||||
|
if (caseInfo.zhaopian_fill) {
|
||||||
|
caseInfo.zhaopian_fill.split(',').forEach((item) => {
|
||||||
|
files.push({
|
||||||
|
name: item.split('\\').pop(),
|
||||||
|
url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
|
||||||
|
path: '填报_现场照片',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 填报_附件
|
||||||
|
if (caseInfo.fujian) {
|
||||||
|
caseInfo.fujian.split(',').forEach((item) => {
|
||||||
|
files.push({
|
||||||
|
name: item.split('\\').pop(),
|
||||||
|
url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
|
||||||
|
path: '填报_附件',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 查处_处罚附件
|
||||||
|
if (caseInfo.chufafile_punish) {
|
||||||
|
caseInfo.chufafile_punish.split(',').forEach((item) => {
|
||||||
|
files.push({
|
||||||
|
name: item.split('\\').pop(),
|
||||||
|
url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
|
||||||
|
path: '查处_处罚附件',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 查处_落实到位文件
|
||||||
|
if (caseInfo.luoshifile_punish) {
|
||||||
|
caseInfo.luoshifile_punish.split(',').forEach((item) => {
|
||||||
|
files.push({
|
||||||
|
name: item.split('\\').pop(),
|
||||||
|
url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
|
||||||
|
path: '查处_落实到位文件',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 整改_现场照片
|
||||||
|
if (caseInfo.zhaopian_reform) {
|
||||||
|
caseInfo.zhaopian_reform.split(',').forEach((item) => {
|
||||||
|
files.push({
|
||||||
|
name: item.split('\\').pop(),
|
||||||
|
url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
|
||||||
|
path: '整改_现场照片',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 整改_附件
|
||||||
|
if (caseInfo.zhenggaifujian) {
|
||||||
|
caseInfo.zhenggaifujian.split(',').forEach((item) => {
|
||||||
|
files.push({
|
||||||
|
name: item.split('\\').pop(),
|
||||||
|
url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
|
||||||
|
path: '整改_附件',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 整改_现场照片-整改前
|
||||||
|
if (caseInfo.zhaopianqian_jgzhg) {
|
||||||
|
caseInfo.zhaopianqian_jgzhg.split(',').forEach((item) => {
|
||||||
|
files.push({
|
||||||
|
name: item.split('\\').pop(),
|
||||||
|
url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
|
||||||
|
path: '整改_现场照片-整改前',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 整改_现场照片-整改后
|
||||||
|
if (caseInfo.zhaopianhou_jgzhg) {
|
||||||
|
caseInfo.zhaopianhou_jgzhg.split(',').forEach((item) => {
|
||||||
|
files.push({
|
||||||
|
name: item.split('\\').pop(),
|
||||||
|
url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
|
||||||
|
path: '整改_现场照片-整改后',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 整改类型（加工）_附件
|
||||||
|
if (caseInfo.fujian_jgzhg) {
|
||||||
|
caseInfo.fujian_jgzhg.split(',').forEach((item) => {
|
||||||
|
files.push({
|
||||||
|
name: item.split('\\').pop(),
|
||||||
|
url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
|
||||||
|
path: '整改_附件',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return files;
|
||||||
|
}
|
||||||
|
|
||||||
|
const detailRef = ref();
|
||||||
|
// 下载
|
||||||
|
async function downloadFilesAsZip() {
|
||||||
|
let caseInfo: any = detailRef.value.caseInfo;
|
||||||
|
const files = getFiles(caseInfo);
|
||||||
|
const zip = new JSZip();
|
||||||
|
// 添加文件到ZIP
|
||||||
|
for (const file of files) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(file.url + '?t=' + Date.now(), {
|
||||||
|
mode: 'cors',
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP 错误: ${response.status} - ${response.statusText}`);
|
||||||
|
}
|
||||||
|
const blob = await response.blob();
|
||||||
|
zip.file(`${file.path}/${file.name}`, blob, { binary: true });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('请求失败:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 生成ZIP文件并触发下载
|
||||||
|
try {
|
||||||
|
const blob = await zip.generateAsync({ type: 'blob' });
|
||||||
|
saveAs(blob, caseInfo.case_no + '.zip'); // 下载的ZIP文件名
|
||||||
|
} catch (error) {
|
||||||
|
console.error('生成ZIP文件时出错:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function prevData() {
|
||||||
|
if (prevShowDataId.value === 0) {
|
||||||
|
if (searchParams.value.page === 1) {
|
||||||
|
message.warning('已经是第一条数据了');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
searchParams.value.page--;
|
||||||
|
tablePaginationRight.value.current--;
|
||||||
|
await getTableData(searchParams.value);
|
||||||
|
setTimeout(() => {
|
||||||
|
caseId.value = tableData.value[tableData.value.length - 1].Id;
|
||||||
|
}, 10);
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
caseId.value = prevShowDataId.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function nextData() {
|
||||||
|
if (nextShowDataId.value === 0) {
|
||||||
|
if (
|
||||||
|
Math.ceil(tablePaginationRight.value.total / searchParams.value.limit) <=
|
||||||
|
searchParams.value.page
|
||||||
|
) {
|
||||||
|
message.warning('已经是最后一条数据了');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
searchParams.value.page++;
|
||||||
|
tablePaginationRight.value.current++;
|
||||||
|
await getTableData(searchParams.value);
|
||||||
|
setTimeout(() => {
|
||||||
|
caseId.value = tableData.value[0].Id;
|
||||||
|
}, 10);
|
||||||
|
} else {
|
||||||
|
caseId.value = nextShowDataId.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.data-preview-container {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 0px);
|
||||||
|
position: absolute;
|
||||||
|
padding: 30px 10px;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.data-preview-container-option {
|
||||||
|
width: 120px;
|
||||||
|
height: 40px;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
.data-preview-container-option div {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.exportbutton {
|
||||||
|
width: 510px;
|
||||||
|
height: 60px;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
.search-box {
|
||||||
|
background: @component-background;
|
||||||
|
margin: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
::v-deep .ant-col-24 {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: fit-content;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.table-box {
|
||||||
|
margin: 16px;
|
||||||
|
}
|
||||||
|
.scope-box {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
.ant-input {
|
||||||
|
width: 48% !important;
|
||||||
|
max-width: 48%;
|
||||||
|
min-width: 48%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .ant-select-selection-overflow-item:first-child .ant-select-selection-item {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
.handoff {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding-right: 25px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,327 @@
|
||||||
|
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||||
|
import { getChildrenTree } from '@/api/demo/system';
|
||||||
|
import { yearOptions } from '@/utils/global';
|
||||||
|
import { getLoad } from '@/api/sys/sysDataItemDetail';
|
||||||
|
|
||||||
|
export const columns: BasicColumn[] = [
|
||||||
|
{
|
||||||
|
title: '年度',
|
||||||
|
dataIndex: 'syear_base',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '图斑编号',
|
||||||
|
dataIndex: 'tubannum_base',
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '区县',
|
||||||
|
dataIndex: 'weizhixianname_base',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '乡镇',
|
||||||
|
dataIndex: 'weizhizhenname_base',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '社区/村',
|
||||||
|
dataIndex: 'weizhicunname_base',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '行政区划编码',
|
||||||
|
dataIndex: 'communityname',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '图斑类型',
|
||||||
|
dataIndex: 'type_base',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '矿种',
|
||||||
|
dataIndex: 'kuangzhong_kcfill',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '图斑变化情况说明',
|
||||||
|
dataIndex: 'shuoming_fill',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '所属重点矿区名称',
|
||||||
|
dataIndex: 'zhongdianname_base',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '所在国家自热保护区名称',
|
||||||
|
dataIndex: 'ziranbaohuname_base',
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '图斑面积',
|
||||||
|
dataIndex: 'weifaarea_base',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '耕地面积',
|
||||||
|
dataIndex: 'gengdi_area',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '违法开采面积',
|
||||||
|
dataIndex: 'kaicaiarea_kcfill',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '违法占地面积',
|
||||||
|
dataIndex: 'weifaarea_punish',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否持续违法',
|
||||||
|
dataIndex: 'handlestatusname',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '当前状态',
|
||||||
|
dataIndex: 'status_base',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '判定结果',
|
||||||
|
dataIndex: 'hefapanding_fill',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '下发时间',
|
||||||
|
dataIndex: 'xiafatime_base',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '项目主体',
|
||||||
|
dataIndex: 'kaicaizhuti_kcfill',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '开采违法类型',
|
||||||
|
dataIndex: 'wefatype_kcfill',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '加工违法类型',
|
||||||
|
dataIndex: 'weifatype_jgfill',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '整改措施',
|
||||||
|
dataIndex: 'zhenggaitype_jgzhg',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '处理时限',
|
||||||
|
dataIndex: 'chulishixian_base',
|
||||||
|
},
|
||||||
|
// 表里没有备注
|
||||||
|
// {
|
||||||
|
// title: '备注',
|
||||||
|
// dataIndex: 'measurename',
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
export const searchFormSchema: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'syear_base',
|
||||||
|
component: 'Select',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
label: '年度',
|
||||||
|
componentProps: {
|
||||||
|
options: yearOptions,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'tubanlaiyuan',
|
||||||
|
label: '图斑来源',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: getLoad,
|
||||||
|
params: { code: 'tubanlaiyuan' },
|
||||||
|
// 接口参数
|
||||||
|
resultField: 'result',
|
||||||
|
labelField: 'itemName',
|
||||||
|
valueField: 'itemValue',
|
||||||
|
mode: 'multiple',
|
||||||
|
maxTagCount: 1
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'type_base',
|
||||||
|
label: '图斑类型',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: getLoad,
|
||||||
|
params: { code: 'kctubanleixing' },
|
||||||
|
// 接口参数
|
||||||
|
resultField: 'result',
|
||||||
|
labelField: 'itemName',
|
||||||
|
valueField: 'itemValue',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'countyid',
|
||||||
|
label: '区县',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
componentProps: ({ tableAction, formModel }) => {
|
||||||
|
return {
|
||||||
|
api: getChildrenTree,
|
||||||
|
params: { parentId: 371300 },
|
||||||
|
// 接口参数
|
||||||
|
resultField: 'result',
|
||||||
|
labelField: 'name',
|
||||||
|
valueField: 'id',
|
||||||
|
onChange: () => {
|
||||||
|
formModel.streetid = '';
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'streetid',
|
||||||
|
label: '乡镇',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: formModel.countyid && getChildrenTree,
|
||||||
|
params: { parentId: formModel.countyid },
|
||||||
|
// 接口参数
|
||||||
|
resultField: 'result',
|
||||||
|
labelField: 'name',
|
||||||
|
valueField: 'id',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'status_base',
|
||||||
|
label: '当前状态',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: getLoad,
|
||||||
|
params: { code: 'kcdangqianzhuangtai' },
|
||||||
|
// 接口参数
|
||||||
|
resultField: 'result',
|
||||||
|
labelField: 'itemName',
|
||||||
|
valueField: 'itemValue',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
slot: 'dangqianzhuangtai',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
field: 'hefapanding_fill',
|
||||||
|
label: '判定结果',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: getLoad,
|
||||||
|
params: { code: 'kcpandingjieguo' },
|
||||||
|
// 接口参数
|
||||||
|
resultField: 'result',
|
||||||
|
labelField: 'itemName',
|
||||||
|
valueField: 'itemValue',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
field: 'zhenggaitype_jgzhg',
|
||||||
|
label: '整改措施',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: getLoad,
|
||||||
|
params: { code: 'kczhenggaicuoshi' },
|
||||||
|
// 接口参数
|
||||||
|
resultField: 'result',
|
||||||
|
labelField: 'itemName',
|
||||||
|
valueField: 'itemValue',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
field: 'wefatype_kcfill',
|
||||||
|
label: '开采违法类型',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: getLoad,
|
||||||
|
params: { code: 'kaicaiweifa' },
|
||||||
|
// 接口参数
|
||||||
|
resultField: 'result',
|
||||||
|
labelField: 'itemName',
|
||||||
|
valueField: 'itemValue',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'weifatype_jgfill',
|
||||||
|
label: '加工违法类型',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: getLoad,
|
||||||
|
params: { code: 'jiagongweifa' },
|
||||||
|
// 接口参数
|
||||||
|
resultField: 'result',
|
||||||
|
labelField: 'itemName',
|
||||||
|
valueField: 'itemValue',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 增加图斑面积、耕地面积、永农面积的筛选项；
|
||||||
|
{
|
||||||
|
field: 'tubanmianji',
|
||||||
|
label: '图斑面积',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
slot: 'tubanmianji',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'zhongdianflag_base',
|
||||||
|
label: '是否重点矿区',
|
||||||
|
component: 'Select',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
componentProps: {
|
||||||
|
options: [
|
||||||
|
{ label: '全部', value: null },
|
||||||
|
{ label: '是', value: '是' },
|
||||||
|
{ label: '否', value: '否' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'kuangzhong_kcfill',
|
||||||
|
label: '权属矿种',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
colProps: { span: 4 },
|
||||||
|
componentProps: ({ formModel }) => {
|
||||||
|
return {
|
||||||
|
api: getLoad,
|
||||||
|
params: { code: 'kuangzhong' },
|
||||||
|
// 接口参数
|
||||||
|
resultField: 'result',
|
||||||
|
labelField: 'itemName',
|
||||||
|
valueField: 'itemValue',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: '[startTime, endTime]',
|
||||||
|
label: '日期范围',
|
||||||
|
component: 'RangePicker',
|
||||||
|
componentProps: {
|
||||||
|
format: 'YYYY-MM-DD',
|
||||||
|
placeholder: ['开始日期', '结束日期'],
|
||||||
|
},
|
||||||
|
colProps: { span: 6 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'tubannum_base',
|
||||||
|
label: '图斑编号',
|
||||||
|
component: 'Input',
|
||||||
|
colProps: { span: 6 },
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<a-spin size="large" tip="图层加载中..." :spinning="spinning" wrapperClassName="solid-spin">
|
||||||
<div class="statistical" id="bg-pan" ref="container">
|
<div class="statistical" id="bg-pan" ref="container">
|
||||||
<Map
|
<Map
|
||||||
@onload="handlerOnMapLoad"
|
@onload="handlerOnMapLoad"
|
||||||
|
|
@ -17,6 +18,7 @@
|
||||||
@handlerQueryIntersectTif="handlerQueryIntersectTif"
|
@handlerQueryIntersectTif="handlerQueryIntersectTif"
|
||||||
:layer="layerSettings"
|
:layer="layerSettings"
|
||||||
:defaultColor="defaultColor"
|
:defaultColor="defaultColor"
|
||||||
|
@changeLoading="changeLoading"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div style="position: absolute; left: 60px; bottom: 20px; z-index: 1" v-if="false">
|
<div style="position: absolute; left: 60px; bottom: 20px; z-index: 1" v-if="false">
|
||||||
|
|
@ -140,6 +142,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</a-spin>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
@ -198,6 +201,7 @@
|
||||||
const preTransformX = ref(0);
|
const preTransformX = ref(0);
|
||||||
const preTransformY = ref(0);
|
const preTransformY = ref(0);
|
||||||
const hiddenInfoMap = ref(false)
|
const hiddenInfoMap = ref(false)
|
||||||
|
const spinning = ref(false)
|
||||||
|
|
||||||
watch([x, y], () => {
|
watch([x, y], () => {
|
||||||
if (!startedDrag.value) {
|
if (!startedDrag.value) {
|
||||||
|
|
@ -420,8 +424,12 @@ watchEffect(() => {
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
spinning.value = true
|
||||||
getLayerSettings();
|
getLayerSettings();
|
||||||
});
|
});
|
||||||
|
const changeLoading = (type: boolean) => {
|
||||||
|
spinning.value = type
|
||||||
|
}
|
||||||
const goRouter = () => {
|
const goRouter = () => {
|
||||||
route.push({ path: '/caseoffence/feifacaikuang' })
|
route.push({ path: '/caseoffence/feifacaikuang' })
|
||||||
}
|
}
|
||||||
|
|
@ -527,7 +535,7 @@ watchEffect(() => {
|
||||||
-ms-user-select: none; /* IE/Edge */
|
-ms-user-select: none; /* IE/Edge */
|
||||||
user-select: none;
|
user-select: none;
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100vh;
|
height:calc(-80px + 100vh);
|
||||||
position:relative;
|
position:relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -644,7 +652,6 @@ watchEffect(() => {
|
||||||
.layer-center-container {
|
.layer-center-container {
|
||||||
width:285px;
|
width:285px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1000;
|
|
||||||
}
|
}
|
||||||
.drag-area{
|
.drag-area{
|
||||||
width:245px;
|
width:245px;
|
||||||
|
|
@ -692,3 +699,11 @@ watchEffect(() => {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
||||||
|
|
|
||||||
|
|
@ -112,7 +112,6 @@
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
||||||
const showSearchResult = ref(false);
|
const showSearchResult = ref(false);
|
||||||
const showFilterOptions = ref(false);
|
const showFilterOptions = ref(false);
|
||||||
const currentFilter = ref('全部');
|
const currentFilter = ref('全部');
|
||||||
|
|
@ -177,6 +176,13 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
showSearchResult.value = true;
|
showSearchResult.value = true;
|
||||||
|
} else if (keyword.value.includes(',')) {
|
||||||
|
// 通过坐标直接移动
|
||||||
|
let location = keyword.value.split(',');
|
||||||
|
let newCoord = transformGCJ2WGS(location[1], location[0]);
|
||||||
|
if (newCoord) {
|
||||||
|
emits('toPosition', [newCoord.lon, newCoord.lat]);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
// 地名搜索
|
// 地名搜索
|
||||||
axios
|
axios
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
export const MAPBOX_TOKEN = "pk.eyJ1IjoiemhhbmcxMjM4ODk5OSIsImEiOiJja3N5Ync1cXcyMTR2Mm9xempmbGE4MnBtIn0.R-j78CRvbs6JZG-MDSoh8Q";
|
export const MAPBOX_TOKEN = "pk.eyJ1IjoibGllYmFvIiwiYSI6ImNsMXg1OHdtcTE3eDEza3FmODBmeXhldmIifQ.CYYMuikQnGHMtTNq60B_xA";
|
||||||
|
|
||||||
export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";
|
export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -58,6 +58,7 @@
|
||||||
'handlerGetDetails',
|
'handlerGetDetails',
|
||||||
'showMonitor',
|
'showMonitor',
|
||||||
'handlerQueryIntersectTif',
|
'handlerQueryIntersectTif',
|
||||||
|
'changeLoading'
|
||||||
]);
|
]);
|
||||||
|
|
||||||
let isZoomVisible: any = false;
|
let isZoomVisible: any = false;
|
||||||
|
|
@ -141,7 +142,6 @@
|
||||||
//挂载mapbox-gl-utils
|
//挂载mapbox-gl-utils
|
||||||
U.init(map);
|
U.init(map);
|
||||||
mp = new MP(map);
|
mp = new MP(map);
|
||||||
|
|
||||||
// 添加地形数据
|
// 添加地形数据
|
||||||
map.addSource('mapbox-dem', {
|
map.addSource('mapbox-dem', {
|
||||||
type: 'raster-dem',
|
type: 'raster-dem',
|
||||||
|
|
@ -151,41 +151,46 @@
|
||||||
minzoom: 10,
|
minzoom: 10,
|
||||||
});
|
});
|
||||||
map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 });
|
map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 });
|
||||||
|
|
||||||
// 设置2D地图
|
// 设置2D地图
|
||||||
map.easeTo({ pitch: 0, bearing: 0, duration: 1000 });
|
map.easeTo({ pitch: 0, bearing: 0, duration: 1000 });
|
||||||
map.dragRotate.disable(); // 禁用拖动旋转
|
map.dragRotate.disable(); // 禁用拖动旋转
|
||||||
map.pitchWithRotate = false; // 禁用旋转时俯仰变化
|
map.pitchWithRotate = false; // 禁用旋转时俯仰变化
|
||||||
mapAngle.value = '2D';
|
mapAngle.value = '2D';
|
||||||
|
|
||||||
handlerCheckUserOrgs();
|
handlerCheckUserOrgs();
|
||||||
// handlerLoadMaskLayer();
|
// handlerLoadMaskLayer();
|
||||||
getMaskData();
|
getMaskData();
|
||||||
handlerDealStreet();
|
handlerDealStreet();
|
||||||
handlerDealCountry();
|
handlerDealCountry();
|
||||||
|
|
||||||
// 视频监控
|
// 视频监控
|
||||||
addMonitorLayer();
|
addMonitorLayer();
|
||||||
|
|
||||||
// 叠加遥感影像和高清影像
|
// 叠加遥感影像和高清影像
|
||||||
try{
|
try{
|
||||||
axios.get(VITE_GLOB_LAN_API_URL+"/api/DroneCloudQuery/IsPublic").then(res=>{
|
axios.get(VITE_GLOB_LAN_API_URL+"/api/DroneCloudQuery/IsPublic").then(res=>{
|
||||||
if(res.data.result){
|
if(res.data.result){
|
||||||
networkType.value = "WAN";
|
networkType.value = "WAN";
|
||||||
}else{
|
}else{
|
||||||
networkType.value = "LAN";
|
networkType.value = "LAN";
|
||||||
// 加载内网影像
|
// 加载内网影像
|
||||||
loadYingXiangLayer()
|
loadYingXiangLayer()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}catch(e){
|
}catch(e){
|
||||||
networkType.value = "WAN";
|
networkType.value = "WAN";
|
||||||
}finally{
|
}finally{}
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadYingXiangLayer(){
|
function loadYingXiangLayer(){
|
||||||
|
|
@ -545,64 +550,53 @@
|
||||||
|
|
||||||
// 获取县区边界数据
|
// 获取县区边界数据
|
||||||
const handlerDealCountry = (countyName: String = '临沂市'): void => {
|
const handlerDealCountry = (countyName: String = '临沂市'): void => {
|
||||||
let center = {};
|
map.addSource("wmsSource", {
|
||||||
let zoom;
|
"type": "vector",
|
||||||
let filterName = '';
|
"scheme": "tms",
|
||||||
if (countyName == '临沂市') {
|
tiles: [
|
||||||
center = { lng: 118.72504868812163, lat: 35.180072027132915 };
|
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Axianjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"
|
||||||
zoom = 7.848587811931849;
|
],
|
||||||
handlerLocation([center['lng'], center['lat']], zoom);
|
tileSize: 512
|
||||||
} else if (countyName) {
|
})
|
||||||
center = MAP_VIEWER[countyName].center;
|
map.addLayer({
|
||||||
zoom = MAP_VIEWER[countyName].zoom;
|
id: "xianjie",
|
||||||
handlerLocation([center['lng'], center['lat']], zoom);
|
type: "line",
|
||||||
filterName = countyName;
|
source: "wmsSource",
|
||||||
}
|
'source-layer': 'xianjie',
|
||||||
|
layout: {
|
||||||
axios({
|
visibility: "visible",
|
||||||
method: 'get',
|
},
|
||||||
// url:`http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=xzqmc%20like%20%27%25${filterName}%25%27`,
|
paint: {
|
||||||
url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson`,
|
"line-color": "#6f7ff4",
|
||||||
}).then((res) => {
|
"line-width": 4,
|
||||||
handlerLoadPanelLayer(res.data);
|
|
||||||
handlerLoadCountyLayer(res.data);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* 县区边界：countyLayer
|
|
||||||
* 县区面板图层：countyPanelLayer
|
|
||||||
* 乡镇边界：streetLayer
|
|
||||||
* 乡镇名称图层：streetLabelLayer
|
|
||||||
* 遮罩图层：mb-tag
|
|
||||||
* 图斑线：historyLayerLine
|
|
||||||
* 图斑面：historyLayerFill
|
|
||||||
*
|
|
||||||
* */
|
|
||||||
// 渲染县区边界数据
|
|
||||||
const handlerLoadCountyLayer = (geojson) => {
|
|
||||||
// 绘制线
|
|
||||||
if (map.getSource('countySource')) {
|
|
||||||
map.getSource('countySource').setData(geojson);
|
|
||||||
} else {
|
|
||||||
map.addSource('countySource', {
|
|
||||||
type: 'geojson',
|
|
||||||
data: geojson,
|
|
||||||
});
|
|
||||||
map.addLayer({
|
|
||||||
id: 'countyLayer',
|
|
||||||
type: 'line',
|
|
||||||
source: 'countySource',
|
|
||||||
paint: {
|
|
||||||
'line-color': '#6f7ff4', // 设置线的颜色
|
|
||||||
'line-width': 3, // 设置线的宽度
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (map.getLayer('countyPanelLayer')) {
|
|
||||||
map.moveLayer('countyLayer', 'countyPanelLayer');
|
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
|
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,
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 渲染县界白板图层
|
// 渲染县界白板图层
|
||||||
|
|
@ -669,13 +663,19 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
function getMaskData() {
|
function getMaskData() {
|
||||||
axios({
|
map.addLayer({
|
||||||
method: 'get',
|
id: "linyishizhezhao",
|
||||||
url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Ashijie&maxFeatures=50&outputFormat=application%2Fjson`,
|
type: "raster",
|
||||||
}).then((res) => {
|
source: {
|
||||||
let geojson = { DATA: res.data.features[0].geometry.coordinates[0][0] };
|
type: "raster",
|
||||||
|
tiles: [
|
||||||
handlerLoadMaskLayer(geojson);
|
"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",
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -716,56 +716,55 @@
|
||||||
|
|
||||||
// 获取乡镇数据
|
// 获取乡镇数据
|
||||||
const handlerDealStreet = (countyName: String = '临沂市'): void => {
|
const handlerDealStreet = (countyName: String = '临沂市'): void => {
|
||||||
|
map.addSource("zhenjie", {
|
||||||
axios({
|
"type": "vector",
|
||||||
method: 'get',
|
"scheme": "tms",
|
||||||
url: `http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Azhenjie&maxFeatures=10000&outputFormat=application%2Fjson`,
|
tiles: [
|
||||||
}).then((res) => {
|
"http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Azhenjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
|
||||||
handlerLoadStreetLayer(res.data);
|
],
|
||||||
|
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 handlerLoadStreetLayer = (geojson) => {
|
|
||||||
// 绘制线
|
|
||||||
if (map.getSource('streetSource')) {
|
|
||||||
map.getSource('streetSource').setData(geojson);
|
|
||||||
} else {
|
|
||||||
map.addSource('streetSource', {
|
|
||||||
type: 'geojson',
|
|
||||||
data: geojson,
|
|
||||||
});
|
|
||||||
map.addLayer({
|
|
||||||
id: 'streetLayer',
|
|
||||||
type: 'line',
|
|
||||||
source: 'streetSource',
|
|
||||||
paint: {
|
|
||||||
'line-color': '#42befb', // 设置线的颜色
|
|
||||||
'line-width': 2, // 设置线的宽度
|
|
||||||
},
|
|
||||||
minzoom: 10,
|
|
||||||
maxzoom: 24,
|
|
||||||
});
|
|
||||||
|
|
||||||
map.addLayer({
|
|
||||||
id: 'streetLabelLayer',
|
|
||||||
type: 'symbol',
|
|
||||||
source: 'streetSource',
|
|
||||||
layout: {
|
|
||||||
'text-field': ['get', 'xzqmc'],
|
|
||||||
'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
|
|
||||||
'text-size': 12,
|
|
||||||
'text-anchor': 'center',
|
|
||||||
},
|
|
||||||
paint: {
|
|
||||||
'text-color': '#041B36',
|
|
||||||
'text-halo-color': '#fff',
|
|
||||||
'text-halo-width': 2,
|
|
||||||
},
|
|
||||||
minzoom: 10,
|
|
||||||
maxzoom: 24,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
let VillageGeojson = {};
|
let VillageGeojson = {};
|
||||||
const handlerLoadVillageLayer = () => {
|
const handlerLoadVillageLayer = () => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue