云查询图层
parent
aa6335b9dd
commit
c1273a32c9
|
|
@ -413,7 +413,7 @@ export const ShpGeoLayerUpdateLayer = (params) =>
|
|||
defHttp.post({ url: Api.ShpGeoLayerUpdateLayer, params });
|
||||
|
||||
export const ShpGeoLayerDelete = (params) =>
|
||||
defHttp.post({ url: Api.ShpGeoLayerDelete, params });
|
||||
defHttp.post({ url: Api.ShpGeoLayerDelete + '/' + params.id });
|
||||
|
||||
export const ShpGeoLayerParseShpInfo = (params) =>
|
||||
defHttp.post({ url: Api.ShpGeoLayerParseShpInfo + "?srid=" + params.srid + "&tableName=" + params.tableName + "&zipFilePath=" + params.zipFilePath });
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<a-form-item label="云查询分类" name="overlay">
|
||||
<a-select
|
||||
v-model:value="props.modalData.data.overlay"
|
||||
:options="props.showLTree"
|
||||
:options="props.showTree"
|
||||
:fieldNames="{ label: 'itemName', value: 'itemValue' }"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits, ref } from 'vue';
|
||||
const props = defineProps(['modalData', 'showLTree']);
|
||||
const props = defineProps(['modalData', 'showTree']);
|
||||
const emit = defineEmits(['closeModal', 'submit']);
|
||||
const formRef = ref();
|
||||
const treeRules = {
|
||||
|
|
|
|||
|
|
@ -20,13 +20,13 @@
|
|||
<div class="showTree">
|
||||
<BasicTree
|
||||
ref="treeRef"
|
||||
:treeData="showLTree"
|
||||
:treeData="showTree"
|
||||
:loading="lLoading"
|
||||
:fieldNames="{ key: 'itemValue', title: 'itemName' }"
|
||||
@select="
|
||||
(selectedKeys, { node }) => {
|
||||
getLeftSelectId(node.itemDetailId);
|
||||
changeTypeId(node.key);
|
||||
getSelectId(node.itemDetailId);
|
||||
changeTypeId(node.itemValue);
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
|
@ -39,8 +39,8 @@
|
|||
<PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key == 'overlay'">
|
||||
{{ getOverlay(record) }}
|
||||
<template v-if="column.key == 'code'">
|
||||
{{ getCode(record) }}
|
||||
</template>
|
||||
<template v-if="column.key == 'overlayList'">
|
||||
<div v-for="tag in record.overlayList" :key="tag">
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
<UseModal
|
||||
ref="modalForm"
|
||||
:modalData="modalData"
|
||||
:showLTree="showLTree"
|
||||
:showTree="showTree"
|
||||
@closeModal="closeModal"
|
||||
@submit="submit"
|
||||
/>
|
||||
|
|
@ -84,7 +84,13 @@
|
|||
Update,
|
||||
Delete,
|
||||
} from '@/api/sys/cloud';
|
||||
import { columns, emptyRightItem, emptyLeftItem, searchFormSchema } from './util';
|
||||
import {
|
||||
columns,
|
||||
emptyRightItem,
|
||||
emptyLeftItem,
|
||||
searchFormSchema_1,
|
||||
searchFormSchema_2,
|
||||
} from './util';
|
||||
import { Modal, message } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { cloneDeep, forEach } from 'lodash-es';
|
||||
|
|
@ -93,7 +99,7 @@
|
|||
let lLoading = ref(false);
|
||||
let typeId = ref('');
|
||||
let selectTreeId = ref('');
|
||||
let showLTree = ref([]);
|
||||
let showTree = ref([]);
|
||||
let openModal = ref(false);
|
||||
const modalData = reactive({
|
||||
title: '',
|
||||
|
|
@ -102,19 +108,36 @@
|
|||
});
|
||||
const treeRef = ref();
|
||||
const firstRequestCode = ref('');
|
||||
const searchFormSchema = ref(searchFormSchema_1);
|
||||
|
||||
watch(
|
||||
() => typeId.value,
|
||||
(newVal) => {
|
||||
if (newVal == 'imgage_data') {
|
||||
searchFormSchema.value = searchFormSchema_2;
|
||||
} else {
|
||||
searchFormSchema.value = searchFormSchema_1;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
const [registerTable, { reload, getSelectRows }] = useTable({
|
||||
beforeFetch: (params) => {
|
||||
console.log(firstRequestCode.value, 'before');
|
||||
if (firstRequestCode.value !== '') {
|
||||
params = { ...params, code: firstRequestCode.value };
|
||||
} else {
|
||||
} else if (typeId.value !== '') {
|
||||
params = { ...params, code: typeId.value };
|
||||
} else {
|
||||
params = { ...params };
|
||||
}
|
||||
return params;
|
||||
},
|
||||
api: LoadPage,
|
||||
columns,
|
||||
title: '云查询管理',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
|
|
@ -135,16 +158,18 @@
|
|||
return res;
|
||||
},
|
||||
});
|
||||
const getLeftTreeData = (isMounted) => {
|
||||
|
||||
const getTreeData = (isMounted) => {
|
||||
lLoading.value = true;
|
||||
getLeftTree({ code: 'cloudQueryManagement' })
|
||||
.then((res) => {
|
||||
showLTree.value = res;
|
||||
showTree.value = res;
|
||||
lLoading.value = false;
|
||||
if (isMounted && res.length > 0) {
|
||||
firstRequestCode.value = res[0].key;
|
||||
typeId.value = res[0].key;
|
||||
unref(treeRef).setSelectedKeys([res[0].key]);
|
||||
firstRequestCode.value = res[0].itemValue;
|
||||
selectTreeId.value = res[0].itemDetailId;
|
||||
typeId.value = res[0].itemValue;
|
||||
unref(treeRef).setSelectedKeys([res[0].itemValue]);
|
||||
}
|
||||
reload();
|
||||
})
|
||||
|
|
@ -153,16 +178,27 @@
|
|||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getLeftTreeData(true);
|
||||
getTreeData(true);
|
||||
});
|
||||
const changeTypeId = (value) => {
|
||||
typeId.value = value;
|
||||
reload();
|
||||
|
||||
const changeTypeId = (itemValue) => {
|
||||
if (typeId.value != itemValue) {
|
||||
typeId.value = itemValue;
|
||||
reload();
|
||||
} else {
|
||||
typeId.value = '';
|
||||
reload();
|
||||
}
|
||||
};
|
||||
const getLeftSelectId = (value) => {
|
||||
selectTreeId.value = value;
|
||||
const getSelectId = (itemDetailId) => {
|
||||
if (selectTreeId.value != itemDetailId) {
|
||||
selectTreeId.value = itemDetailId;
|
||||
} else {
|
||||
selectTreeId.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
// 按钮分类
|
||||
const buttonClick = (diffType) => {
|
||||
let check = false;
|
||||
switch (diffType) {
|
||||
|
|
@ -185,7 +221,7 @@
|
|||
onOk() {
|
||||
return delLeftItem({ id: selectTreeId.value })
|
||||
.then((res) => {
|
||||
getLeftTreeData(false);
|
||||
getTreeData(false);
|
||||
typeId.value = '';
|
||||
reload();
|
||||
})
|
||||
|
|
@ -240,6 +276,7 @@
|
|||
break;
|
||||
}
|
||||
};
|
||||
// 表单提交
|
||||
const submit = () => {
|
||||
let userName = localStorage.getItem('fireUserLoginName');
|
||||
switch (modalData.type) {
|
||||
|
|
@ -252,10 +289,10 @@
|
|||
createDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||
modifyDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||
enabledMark: 1,
|
||||
sortCode: showLTree.value.length,
|
||||
sortCode: showTree.value.length,
|
||||
})
|
||||
.then((res) => {
|
||||
getLeftTreeData(false);
|
||||
getTreeData(false);
|
||||
openModal.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -307,10 +344,10 @@
|
|||
modalForm.value = cloneDeep(emptyLeftItem);
|
||||
};
|
||||
|
||||
const getOverlay = (record) => {
|
||||
const getCode = (record) => {
|
||||
let result = '';
|
||||
showLTree.value.forEach((item: any) => {
|
||||
if (item.itemValue === record.overlay) {
|
||||
showTree.value.forEach((item: any) => {
|
||||
if (item.itemValue === record.code) {
|
||||
result = item.itemName;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import dayjs from 'dayjs';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
|
|
@ -71,7 +73,8 @@ export const emptyRightItem = {
|
|||
areaField:'',
|
||||
isSum: false,
|
||||
};
|
||||
export const searchFormSchema = [
|
||||
|
||||
export const searchFormSchema_1 = [
|
||||
{
|
||||
field: 'key',
|
||||
label: '关键字',
|
||||
|
|
@ -79,3 +82,23 @@ export const searchFormSchema = [
|
|||
colProps: { span: 8 },
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema_2 = [
|
||||
{
|
||||
field: 'key',
|
||||
label: '关键字',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
{
|
||||
field: '[startTime, endTime]',
|
||||
helpMessage: '查询范围只包含时序影像大类',
|
||||
label: '日期范围',
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="updateimage">更新最新影像</a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'enabledMark'">
|
||||
<a-tag v-if="record.enabledMark" color="success">正常</a-tag>
|
||||
<a-tag v-else color="error">停用</a-tag>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// vben
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { BasicTable, useTable } from '@/components/Table';
|
||||
import { columns, searchFormSchema } from './util';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
// 历史记录
|
||||
const [registerTable, { reload, getSelectRows }] = useTable({
|
||||
// api: getRightTable,
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
showIndexColumn: false,
|
||||
rowSelection: {
|
||||
type: 'radio',
|
||||
},
|
||||
useSearchForm: true,
|
||||
bordered: true,
|
||||
showTableSetting: true,
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
immediate: false,
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,233 +0,0 @@
|
|||
<template>
|
||||
<div class="flex-column">
|
||||
<a-row style="overflow-y: hidden">
|
||||
<a-col :span="12" style="padding: 20px; border: 1px silver solid; margin-left: 10px">
|
||||
<div class="upload-div">
|
||||
<a-upload-dragger
|
||||
style="height: 174px; width: 100%"
|
||||
class="upload-dragger"
|
||||
v-model:fileList="fileList"
|
||||
name="imageBoundary_name"
|
||||
:multiple="false"
|
||||
:maxCount="1"
|
||||
:before-upload="beforeUpload"
|
||||
accept=".zip,.xlsx"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<PlusOutlined />
|
||||
</p>
|
||||
<div style="opacity: 0.7"> 文件上传 </div>
|
||||
</a-upload-dragger>
|
||||
</div>
|
||||
<p />
|
||||
<p />
|
||||
<p />
|
||||
<div class="upload-span">
|
||||
<div class="upload-span-content">
|
||||
<div style="opacity: 0.7">将文件拖拽到这里或点击上传按钮</div>
|
||||
<div style="color: #1e5eff">支持扩展名：zip,xlsx</div>
|
||||
<div style="opacity: 0.7">zip中需要包含 .shp .shx .dbf 文件 且.shp文件大小小于10MB</div>
|
||||
</div>
|
||||
</div>
|
||||
<p />
|
||||
<a-form
|
||||
ref="form"
|
||||
v-modal:model="currentAppForm"
|
||||
labelAlign="right"
|
||||
label-width="80px"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
size="mini"
|
||||
>
|
||||
<a-form-item label="服务名称" name="serverName">
|
||||
<a-input v-model:value="currentAppForm.serverName" placeholder="请输入服务名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="图斑数据" name="hasFeature">
|
||||
<a-select
|
||||
v-model:value="currentAppForm.hasFeature"
|
||||
placeholder="请选择是否具有图斑数据"
|
||||
>
|
||||
<a-select-option value="1">是</a-select-option>
|
||||
<a-select-option value="0">否</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="空间参考" name="spaceType">
|
||||
<a-select v-model:value="currentAppForm.spaceType" placeholder="请选择空间参考">
|
||||
<a-select-option value="EPSG:4326">EPSG:4326</a-select-option>
|
||||
<a-select-option value="3857">EPSG:3857</a-select-option>
|
||||
<a-select-option value="900913">EPSG:900913</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="数据类型" name="spaceType">
|
||||
<a-select v-model:value="currentAppForm.layerType" placeholder="请选择数据类型">
|
||||
<a-select-option value="point">点</a-select-option>
|
||||
<a-select-option value="linestring">线</a-select-option>
|
||||
<a-select-option value="polygon">面</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="数据表名" name="tableName">
|
||||
<a-input v-model:value="currentAppForm.tableName" placeholder="请输入表名" />
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ offset: 10, span: 14 }">
|
||||
<a-button type="primary" @click="onSubmit">立即创建</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
import { ref, onMounted } from 'vue';
|
||||
// vben
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
UploadOutlined,
|
||||
MinusOutlined,
|
||||
CloseOutlined,
|
||||
CloudDownloadOutlined,
|
||||
PlusOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { message, Upload } from 'ant-design-vue';
|
||||
import type { UploadProps } from 'ant-design-vue';
|
||||
import { BasicTable, useTable } from '@/components/Table';
|
||||
import { useGlobSetting } from '@/hooks/setting';
|
||||
// api
|
||||
import { fun_GetUpdateFiles, fun_AddAppFiles } from '@/api/demo/version';
|
||||
import { fun_Load, fun_Upload } from '@/api/demo/files';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
// 表单栅格
|
||||
const labelCol = { span: 4 };
|
||||
const wrapperCol = { span: 20 };
|
||||
|
||||
// 影像边界shp
|
||||
const currentAppForm = ref({
|
||||
edition: '',
|
||||
description: '',
|
||||
filepath: '',
|
||||
must_update: '',
|
||||
project_name: '',
|
||||
createuser: '',
|
||||
createtime: '',
|
||||
});
|
||||
|
||||
// 上传文件列表
|
||||
let fileList: any = ref([]);
|
||||
const imageBoundary_loading = ref<boolean>(false);
|
||||
const imageBoundary_name = ref<string>('');
|
||||
// 上传的文件
|
||||
const fileName = ref('');
|
||||
let filePath = '';
|
||||
|
||||
// 上传之前
|
||||
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||
let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
|
||||
let size = file.size / 1024 / 1024;
|
||||
const isZip = extension === 'zip' || extension === 'xlsx';
|
||||
const suitableSize = size < 10;
|
||||
|
||||
imageBoundary_name.value = file.name;
|
||||
if (!isZip) {
|
||||
createMessage.error('只能上传后缀是.zip或者.xlsx的文件');
|
||||
}
|
||||
if (!suitableSize) {
|
||||
createMessage.error('文件大小不得超过10M');
|
||||
}
|
||||
if (isZip && suitableSize) {
|
||||
imageBoundary_loading.value = true;
|
||||
}
|
||||
return (isZip && suitableSize) || Upload.LIST_IGNORE;
|
||||
};
|
||||
|
||||
// 上传文件接口
|
||||
const handleCustomRequest = (file, progress) => {
|
||||
fileList.value = [];
|
||||
fun_Upload(file, progress)
|
||||
.then((res: any) => {
|
||||
if (res.data.result.length > 0) {
|
||||
fileName.value = res.data.result[0].fileName;
|
||||
filePath = res.data.result[0].filePath;
|
||||
imageBoundary_loading.value = false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
imageBoundary_loading.value = false;
|
||||
file.onError(err);
|
||||
createMessage.error(err.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 删除文件
|
||||
function deleteFileName() {
|
||||
// 影像边界shp-删除文件
|
||||
fileName.value = '';
|
||||
filePath = '';
|
||||
fileList.value = [];
|
||||
}
|
||||
|
||||
// 影像边界shp-立即创建
|
||||
function onSubmit() {
|
||||
if (fileName.value == '' || filePath == '') {
|
||||
createMessage.warn(`请选择上传文件!`);
|
||||
return;
|
||||
}
|
||||
if (currentAppForm.value.edition == '') {
|
||||
createMessage.warn(`请先填写版本号!`);
|
||||
return;
|
||||
}
|
||||
fun_Load({ key: fileName.value }).then((res) => {
|
||||
if (res.items.length > 0) {
|
||||
currentAppForm.value.filepath = res.items[0].filePath;
|
||||
fun_AddAppFiles(currentAppForm.value).then((res2) => {
|
||||
if (res2) {
|
||||
createMessage.success(`上传成功!`);
|
||||
currentAppForm.value = {
|
||||
createtime: '',
|
||||
createuser: '',
|
||||
edition: '',
|
||||
description: '',
|
||||
filepath: '',
|
||||
must_update: '',
|
||||
project_name: '',
|
||||
};
|
||||
fileList.value = [];
|
||||
} else {
|
||||
createMessage.warn(`接口错误!`);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
createMessage.warn(`上传文件出现错误!`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 影像边界shp-当前版本信息
|
||||
let currentAppInfo = ref({});
|
||||
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.upload-div {
|
||||
display: flex; /* 启用 Flexbox 布局 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
|
||||
width: 100%; /* 使容器占据父元素的全部宽度 */
|
||||
}
|
||||
|
||||
.upload-span-content {
|
||||
position: relative;
|
||||
left: calc(16.5%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.upload_span {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,178 +0,0 @@
|
|||
<template>
|
||||
<div class="flex-column">
|
||||
<a-row style="overflow-y: hidden">
|
||||
<a-col :span="12" style="padding: 20px; border: 1px silver solid; margin-left: 10px">
|
||||
<a-form
|
||||
ref="form"
|
||||
v-model:model="currentAppForm"
|
||||
labelAlign="right"
|
||||
label-width="80px"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
size="mini"
|
||||
>
|
||||
<a-form-item label="当前版本">
|
||||
<span style="font-size: 15px; font-weight: bold; color: #000">
|
||||
<a-input :bordered="false" />
|
||||
</span>
|
||||
</a-form-item>
|
||||
<a-form-item label="版本号">
|
||||
<a-input-number v-model:value="currentAppForm.edition" />
|
||||
</a-form-item>
|
||||
<a-form-item label="项目名称">
|
||||
<a-input v-model:value="currentAppForm.project_name" />
|
||||
</a-form-item>
|
||||
<a-form-item label="上传">
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
:name="imageRelease_name"
|
||||
:multiple="true"
|
||||
:customRequest="handleCustomRequest"
|
||||
:headers="headers"
|
||||
:progress="progress"
|
||||
:beforeUpload="beforeUpload"
|
||||
>
|
||||
<a-button :loading="imageRelease_loading"> 点击上传 </a-button>
|
||||
</a-upload>
|
||||
{{ fileName }}
|
||||
<DeleteOutlined v-if="fileName != ''" @click="deleteFileName" />
|
||||
</a-form-item>
|
||||
<a-form-item label="描述信息">
|
||||
<a-textarea type="textarea" v-model:value="currentAppForm.description" :rows="4" />
|
||||
</a-form-item>
|
||||
<a-form-item label="是否必须更新" label-width="120px">
|
||||
<a-radio-group v-model:value="currentAppForm.must_update" size="medium">
|
||||
<a-radio :bordered="false" :value="1">是</a-radio>
|
||||
<a-radio :bordered="false" :value="0">否</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ offset: 10, span: 14 }">
|
||||
<a-button type="primary" @click="onFlyControlSubmit">立即创建</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
import { ref, onMounted } from 'vue';
|
||||
// vben
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { DeleteOutlined, UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { message, Upload } from 'ant-design-vue';
|
||||
import type { UploadProps } from 'ant-design-vue';
|
||||
// api
|
||||
import { fun_AddAppFiles } from '@/api/demo/version';
|
||||
import { fun_Load, fun_Upload } from '@/api/demo/files';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
// 表单栅格
|
||||
const labelCol = { span: 6 };
|
||||
const wrapperCol = { span: 18 };
|
||||
// 上传文件列表
|
||||
let fileList: any = ref([]);
|
||||
const imageRelease_loading = ref<boolean>(false);
|
||||
const imageRelease_name = ref<string>('');
|
||||
// 上传的文件
|
||||
const fileName = ref('');
|
||||
let filePath = '';
|
||||
|
||||
// 影像发布事件
|
||||
const currentAppForm = ref({
|
||||
edition: '',
|
||||
description: '',
|
||||
filepath: '',
|
||||
must_update: '',
|
||||
project_name: '',
|
||||
createuser: '',
|
||||
createtime: '',
|
||||
});
|
||||
|
||||
// 上传文件接口
|
||||
const handleCustomRequest = (file, progress) => {
|
||||
fileList.value = [];
|
||||
fun_Upload(file, progress)
|
||||
.then((res: any) => {
|
||||
if (res.data.result.length > 0) {
|
||||
fileName.value = res.data.result[0].fileName;
|
||||
filePath = res.data.result[0].filePath;
|
||||
imageRelease_loading.value = false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
imageRelease_loading.value = false;
|
||||
file.onError(err);
|
||||
createMessage.error(err.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 上传之前
|
||||
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||
let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
|
||||
let size = file.size / 1024 / 1024;
|
||||
const isZip = extension === 'zip' || extension === 'xlsx';
|
||||
const suitableSize = size < 10;
|
||||
|
||||
imageRelease_name.value = file.name;
|
||||
if (!isZip) {
|
||||
createMessage.error('只能上传后缀是.zip或者.xlsx的文件');
|
||||
}
|
||||
if (!suitableSize) {
|
||||
createMessage.error('文件大小不得超过10M');
|
||||
}
|
||||
if (isZip && suitableSize) {
|
||||
imageRelease_loading.value = true;
|
||||
}
|
||||
return (isZip && suitableSize) || Upload.LIST_IGNORE;
|
||||
};
|
||||
|
||||
// 删除文件
|
||||
function deleteFileName() {
|
||||
// 影像发布事件-删除文件
|
||||
fileName.value = '';
|
||||
filePath = '';
|
||||
fileList.value = [];
|
||||
}
|
||||
|
||||
// 影像发布事件-立即创建
|
||||
function onFlyControlSubmit() {
|
||||
if (fileName.value == '' || filePath == '') {
|
||||
createMessage.warn(`请选择上传文件!`);
|
||||
return;
|
||||
}
|
||||
if (currentAppForm.value.edition == '') {
|
||||
createMessage.warn(`请先填写版本号!`);
|
||||
return;
|
||||
}
|
||||
if (currentAppForm.value.project_name == '') {
|
||||
createMessage.warn(`请先填写项目名称!`);
|
||||
return;
|
||||
}
|
||||
fun_Load({ key: fileName.value }).then((res) => {
|
||||
if (res.items.length > 0) {
|
||||
currentAppForm.value.filepath = res.items[0].filePath;
|
||||
fun_AddAppFiles(currentAppForm.value).then((res2) => {
|
||||
if (res2) {
|
||||
createMessage.success(`上传成功!`);
|
||||
currentAppForm.value = {
|
||||
createtime: '',
|
||||
createuser: '',
|
||||
edition: '',
|
||||
description: '',
|
||||
filepath: '',
|
||||
must_update: '',
|
||||
project_name: '',
|
||||
};
|
||||
fileList.value = [];
|
||||
} else {
|
||||
createMessage.warn(`接口错误!`);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
createMessage.warn(`上传文件出现错误!`);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,34 +1,45 @@
|
|||
<template>
|
||||
<div style="padding: 24px; overflow-y: hidden">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="imageBoundary" tab="影像边界shp">
|
||||
<ImageBoundary />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="imageRelease" tab="影像发布事件">
|
||||
<ImageRelease />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="history" tab="历史记录">
|
||||
<History />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="updateimage">更新最新影像</a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'enabledMark'">
|
||||
<a-tag v-if="record.enabledMark" color="success">正常</a-tag>
|
||||
<a-tag v-else color="error">停用</a-tag>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// vue
|
||||
import { ref, onMounted } from 'vue';
|
||||
// vben
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { DeleteOutlined, UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { message, Upload } from 'ant-design-vue';
|
||||
import type { UploadProps } from 'ant-design-vue';
|
||||
import { BasicTable, useTable } from '@/components/Table';
|
||||
import { useGlobSetting } from '@/hooks/setting';
|
||||
//
|
||||
import ImageBoundary from './imageBoundary.vue';
|
||||
import ImageRelease from './imageRelease.vue';
|
||||
import History from './history.vue';
|
||||
import { columns, searchFormSchema } from './util';
|
||||
|
||||
// 标签页
|
||||
let activeKey = ref('imageBoundary');
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
// 历史记录
|
||||
const [registerTable, { reload, getSelectRows }] = useTable({
|
||||
// api: getRightTable,
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
showIndexColumn: false,
|
||||
rowSelection: {
|
||||
type: 'radio',
|
||||
},
|
||||
useSearchForm: true,
|
||||
bordered: true,
|
||||
showTableSetting: true,
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
immediate: false,
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div>
|
||||
<BasicTable @register="headersTable" :searchInfo="searchInfo">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'refName'">
|
||||
<a-input
|
||||
v-model:value="record.refName"
|
||||
@change="record.refName = record.refName.toLowerCase()"
|
||||
/>
|
||||
<p style="color: #ff0000; font-size: 12px" v-if="!regExp.test(record.refName)">
|
||||
使用小写字母、数字、下划线的组合
|
||||
</p>
|
||||
</template>
|
||||
<template v-if="column.key === 'initName'">
|
||||
<a-input v-model:value="record.initName" />
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '删除',
|
||||
onClick: () => {
|
||||
deleteRow(record);
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, h, onMounted } from 'vue';
|
||||
// vben
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
|
||||
import { headersColumns, headersSearchFormSchema } from './clound.data';
|
||||
import axios from 'axios';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const props = defineProps(['headers']);
|
||||
const headers = ref(props.headers);
|
||||
// 查询前的备份
|
||||
const searchBeforeHeaders = ref();
|
||||
const emit = defineEmits(['headersTableSubmit']);
|
||||
// 正则表达式
|
||||
let regExp = /^[a-z0-9_]+$/;
|
||||
|
||||
// 步骤2
|
||||
const searchParams = ref();
|
||||
const [headersTable, { reload, getDataSource }] = useTable({
|
||||
dataSource: headers,
|
||||
columns: headersColumns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: headersSearchFormSchema,
|
||||
},
|
||||
canResize: true,
|
||||
useSearchForm: true,
|
||||
showTableSetting: false,
|
||||
pagination: true,
|
||||
bordered: true,
|
||||
showIndexColumn: true,
|
||||
handleSearchInfoFn(info) {
|
||||
if (info.name == undefined) {
|
||||
// 重置
|
||||
reset();
|
||||
} else {
|
||||
reset();
|
||||
// 搜索
|
||||
searchBeforeHeaders.value = cloneDeep(headers.value);
|
||||
searchParams.value = info;
|
||||
headers.value = headers.value.filter((item) => item.name.includes(info.name));
|
||||
}
|
||||
return info;
|
||||
},
|
||||
});
|
||||
|
||||
// 重置
|
||||
function reset() {
|
||||
if (searchBeforeHeaders.value) {
|
||||
headers.value.forEach((item1) => {
|
||||
searchBeforeHeaders.value.forEach((item2) => {
|
||||
item2 = item1.name == item2.name ? item1 : item2;
|
||||
});
|
||||
});
|
||||
headers.value = cloneDeep(searchBeforeHeaders.value);
|
||||
}
|
||||
searchBeforeHeaders.value = null;
|
||||
}
|
||||
// 删除
|
||||
const deleteRow = (record) => {
|
||||
headers.value = headers.value.filter((item) => {
|
||||
return item.name != record.name;
|
||||
});
|
||||
if (searchBeforeHeaders.value) {
|
||||
searchBeforeHeaders.value = searchBeforeHeaders.value.filter((item) => {
|
||||
return item.name != record.name;
|
||||
});
|
||||
}
|
||||
};
|
||||
// 提交
|
||||
const submit2 = () => {
|
||||
reset();
|
||||
let data = getDataSource();
|
||||
let flag: Boolean = true;
|
||||
data.forEach((item) => {
|
||||
flag = regExp.test(item.refName);
|
||||
});
|
||||
if (flag) {
|
||||
emit('headersTableSubmit', getDataSource());
|
||||
} else {
|
||||
createMessage.warn('提交的refName字段名中有不符合字段名命名规则的');
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
submit2,
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
::v-deep .ant-table-container table {
|
||||
line-height: 1.1 !important;
|
||||
|
||||
.ant-table-row {
|
||||
td {
|
||||
padding-top: 8px !important;
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ant-table-body {
|
||||
height: 410px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,287 @@
|
|||
<template>
|
||||
<div class="current1">
|
||||
<div class="upload-div w-1/2 xl:w-1/2 m-4 mr-0">
|
||||
<a-upload-dragger
|
||||
v-model:fileList="shpFileList"
|
||||
name="shpFileName"
|
||||
style="height: 274px; width: 300px"
|
||||
class="upload-dragger"
|
||||
:multiple="false"
|
||||
:maxCount="1"
|
||||
:before-upload="shpBeforeUpload"
|
||||
:customRequest="shpCustomRequest"
|
||||
accept=".zip,.xlsx"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<PlusOutlined />
|
||||
</p>
|
||||
<div style="opacity: 0.7"> 文件上传 </div>
|
||||
<div class="upload-span">
|
||||
<div class="upload-span-content">
|
||||
<div style="opacity: 0.7">将文件拖拽到这里或点击上传按钮</div>
|
||||
<div style="color: #1e5eff">支持扩展名：zip、xls、xlsx</div>
|
||||
<div style="opacity: 0.7"> zip中需要包含 .shp .shx .dbf 文件 </div>
|
||||
<div style="opacity: 0.7"> 且.shp文件大小小于10MB </div>
|
||||
</div>
|
||||
</div>
|
||||
</a-upload-dragger>
|
||||
</div>
|
||||
<div class="upload-form w-1/2 xl:w-1/2 m-4 mr-0">
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="uploadFrom"
|
||||
:labelCol="{ width: '75px' }"
|
||||
labelAlign="right"
|
||||
:rules="uploadFormRules"
|
||||
>
|
||||
<a-form-item label="服务名称" name="serverName">
|
||||
<a-input v-model:value="uploadFrom.serverName" placeholder="请输入服务名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="空间参考" name="spatialRef">
|
||||
<a-select v-model:value="uploadFrom.spatialRef" placeholder="请选择空间参考">
|
||||
<a-select-option value="EPSG:4326">EPSG:4326</a-select-option>
|
||||
<a-select-option value="EPSG:3857">EPSG:3857</a-select-option>
|
||||
<a-select-option value="EPSG:900913">EPSG:900913</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="数据表名" name="dataTable">
|
||||
<a-input v-model:value="uploadFrom.dataTable" placeholder="请输入表名" />
|
||||
</a-form-item>
|
||||
<a-form-item label="图层样式" name="appendPath">
|
||||
<a-upload
|
||||
v-model:fileList="tucengFileList"
|
||||
name="tucengFileName"
|
||||
list-type="picture-card"
|
||||
class="upload-dragger"
|
||||
:multiple="false"
|
||||
:maxCount="1"
|
||||
:show-upload-list="false"
|
||||
:before-upload="tucengBeforeUpload"
|
||||
:custom-request="tucengCustomRequest"
|
||||
accept=".sld"
|
||||
>
|
||||
<div>
|
||||
<PlusOutlined />
|
||||
<div class="ant-upload-text">上传图层样式</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<div style="position: relative; top: -50px" v-if="tucengFileName">
|
||||
{{ tucengFileName }}
|
||||
<DeleteOutlined @click="deleteTuceng" />
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, h } from 'vue';
|
||||
// vben
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import type { UploadProps } from 'ant-design-vue';
|
||||
import { message, Upload } from 'ant-design-vue';
|
||||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import {
|
||||
getStatisticalList,
|
||||
ShpGeoLayerAdd,
|
||||
ShpGeoLayerLoadPage,
|
||||
ShpGeoLayerGet,
|
||||
ShpGeoLayerUpdateLayer,
|
||||
ShpGeoLayerDelete,
|
||||
ShpGeoLayerParseShpInfo,
|
||||
} from '@/api/demo/system';
|
||||
import { CheckTableExist } from '@/api/database/index';
|
||||
|
||||
import axios from 'axios';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const props = defineProps(['uploadForm']);
|
||||
const uploadFrom = ref(props.uploadForm);
|
||||
const emit = defineEmits(['uploadFormSubmit', 'isZipOrXls']);
|
||||
|
||||
const uploadFormRules = reactive({
|
||||
serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
|
||||
spatialRef: [{ required: true, message: '请选择空间参考', trigger: 'blur' }],
|
||||
// dataType: [{ required: true, message: '请选择数据类型', trigger: 'blur' }],
|
||||
appendPath: [{ required: true, message: '请上传图层样式', trigger: 'blur' }],
|
||||
dataTable: [
|
||||
{ required: true, message: '请输入数据表名', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
let reg = /^[a-z]\w{0,28}$/;
|
||||
if (value !== '' && !reg.test(value)) {
|
||||
callback(
|
||||
new Error('小写字母开头，可包含下划线，但不能有汉字和大写字母，不能超过30字符'),
|
||||
);
|
||||
}
|
||||
callback();
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
validator: async (rule, value, callback) => {
|
||||
try {
|
||||
let query: any = { tableName: value };
|
||||
const response = await CheckTableExist(query);
|
||||
if (!response) {
|
||||
callback(new Error('数据库已有此数据表名，请更换表名'));
|
||||
}
|
||||
} catch (error) {
|
||||
callback(new Error('检查数据表名时发生错误'));
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 步骤1-提交
|
||||
const submit1 = () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
let params = {
|
||||
zipFilePath: uploadFrom.value.shpPath,
|
||||
tableName: uploadFrom.value.dataTable,
|
||||
srid: uploadFrom.value.spatialRef,
|
||||
};
|
||||
ShpGeoLayerParseShpInfo(params).then((res) => {
|
||||
uploadFrom.value.dataType = res.dataType;
|
||||
uploadFrom.value.headers = res.headers;
|
||||
emit('uploadFormSubmit', uploadFrom.value);
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
// 步骤1-shp上传
|
||||
const shpFileList = ref<UploadProps['fileList']>([]);
|
||||
const shpFileName = ref<string>('');
|
||||
let isUpload = false;
|
||||
// 步骤1-shp上传之前
|
||||
const shpBeforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||
let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
|
||||
let size = file.size / 1024 / 1024;
|
||||
const isZipOrXls = extension === 'zip' || extension === 'xls' || extension === 'xlsx';
|
||||
const suitableSize = size < 30;
|
||||
if (!isZipOrXls) {
|
||||
createMessage.error('只能上传后缀是.zip .xls或者.xlsx的文件');
|
||||
}
|
||||
if (extension == 'zip') {
|
||||
emit('isZipOrXls', 'shp');
|
||||
} else if (['xls', 'xlsx'].includes(extension)) {
|
||||
emit('isZipOrXls', 'excel');
|
||||
}
|
||||
if (!suitableSize) {
|
||||
createMessage.error('文件大小不得超过30M');
|
||||
}
|
||||
isUpload = isZipOrXls && suitableSize;
|
||||
return isUpload;
|
||||
};
|
||||
// 步骤1-shp上传文件接口
|
||||
const shpCustomRequest = (options) => {
|
||||
if (isUpload) {
|
||||
const formData = new FormData();
|
||||
formData.append('files', options.file);
|
||||
// 假设 Token 存储在 localStorage 中
|
||||
const token = localStorage.getItem('X-Token');
|
||||
// 设置请求头部，带上 Token
|
||||
const headers = {
|
||||
'X-Token': token,
|
||||
};
|
||||
axios
|
||||
.post(VITE_GLOB_API_URL + '/api/Files/Upload', formData, { headers })
|
||||
.then((response) => {
|
||||
options.onSuccess(response.data, options.file);
|
||||
shpFileName.value = response.data.result[0].fileName;
|
||||
uploadFrom.value.shpPath = response.data.result[0].filePath;
|
||||
})
|
||||
.catch((error) => {
|
||||
options.onError(error);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 步骤1-图层样式上传
|
||||
const tucengFileList = ref<UploadProps['fileList']>([]);
|
||||
const tucengFileName = ref<string>('');
|
||||
// 步骤1-图层上传之前
|
||||
const tucengBeforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||
let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
|
||||
let size = file.size / 1024 / 1024;
|
||||
const isSld = extension === 'sld';
|
||||
const suitableSize = size < 1;
|
||||
|
||||
if (!isSld) {
|
||||
createMessage.error('只能上传后缀是.sld的文件');
|
||||
}
|
||||
if (!suitableSize) {
|
||||
createMessage.error('文件大小不得超过1M');
|
||||
}
|
||||
return (isSld && suitableSize) || Upload.LIST_IGNORE;
|
||||
};
|
||||
// 步骤1-图层上传文件接口
|
||||
const tucengCustomRequest = (options) => {
|
||||
const formData = new FormData();
|
||||
formData.append('files', options.file);
|
||||
// 假设 Token 存储在 localStorage 中
|
||||
const token = localStorage.getItem('X-Token');
|
||||
// 设置请求头部，带上 Token
|
||||
const headers = {
|
||||
'X-Token': token,
|
||||
};
|
||||
axios
|
||||
.post(VITE_GLOB_API_URL + '/api/Files/Upload', formData, { headers })
|
||||
.then((response) => {
|
||||
options.onSuccess(response.data, options.file);
|
||||
tucengFileName.value = response.data.result[0].fileName;
|
||||
uploadFrom.value.appendPath = response.data.result[0].filePath;
|
||||
})
|
||||
.catch((error) => {
|
||||
options.onError(error);
|
||||
});
|
||||
};
|
||||
// 步骤1-删除图层样式
|
||||
const deleteTuceng = () => {
|
||||
tucengFileName.value = '';
|
||||
uploadFrom.value.appendPath = '';
|
||||
};
|
||||
// 清除验证
|
||||
const clearValidation = () => {
|
||||
formRef.value.clearValidate();
|
||||
shpFileName.value = '';
|
||||
tucengFileName.value = '';
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
submit1,
|
||||
clearValidation,
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.current1 {
|
||||
display: flex;
|
||||
}
|
||||
.upload-div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: -30px;
|
||||
}
|
||||
.upload-span {
|
||||
margin: 30px;
|
||||
}
|
||||
.upload-form {
|
||||
margin-left: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,541 +1,309 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-row ::gutter="0">
|
||||
<a-col :span="12">
|
||||
<BasicTable @register="registerTable" :searchInfo="searchInfo">
|
||||
<a-col :span="24">
|
||||
<BasicTable @register="registerTable" :searchInfo="searchInfo">
|
||||
<template #toolbar>
|
||||
<PermissionBtn @btn-event="onBtnClicked" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-col :span="0">
|
||||
<div class="map-outer">
|
||||
<MapboxMap
|
||||
:geomsList="geomsList"
|
||||
:mapConfig="mapConfig"
|
||||
@handlerDrawComplete="handlerDrawComplete"
|
||||
@mapOnLoad="onMapboxLoad"
|
||||
ref="MapboxComponent"
|
||||
/>
|
||||
<!-- <MapboxMap
|
||||
:geomsList="geomsList"
|
||||
:mapConfig="mapConfig"
|
||||
@handlerDrawComplete="handlerDrawComplete"
|
||||
@mapOnLoad="onMapboxLoad"
|
||||
ref="MapboxComponent"
|
||||
/> -->
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<div class="data-preview-container" v-if="showRecordList">
|
||||
<a-tabs v-model:activeKey="activeKey" hide-add type="editable-card" @edit="onEdit" @change="handleTabChange">
|
||||
<a-tab-pane v-for="(pane,index) in tablist" :key="index.toString()" :tab="pane.streetname+'-'+pane.label" :closable="pane.closable">
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<RecordList :tablist="tablist" :currentListQuery="currentListQuery.listQuery"></RecordList>
|
||||
|
||||
<div class="data-preview-container-option">
|
||||
|
||||
<div @click="exportList()">
|
||||
<CloudDownloadOutlined />
|
||||
</div>
|
||||
<div @click="handleCloseRecordList()">
|
||||
<MinusOutlined />
|
||||
</div>
|
||||
<div @click="handleCloseAllRecordList()">
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-modal
|
||||
v-model:open="addModalShow"
|
||||
v-model:open="modalShow"
|
||||
:maskClosable="false"
|
||||
:afterClose="closeAndCreate"
|
||||
title="添加GeoServer服务"
|
||||
width="800px"
|
||||
width="1000px"
|
||||
style="top: 20px"
|
||||
size="small"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="select-file-div">
|
||||
<div class="upload-div">
|
||||
<a-upload-dragger
|
||||
style="height: 174px; width: 174px"
|
||||
class="upload-dragger"
|
||||
v-model:fileList="fileList"
|
||||
name="file"
|
||||
:multiple="false"
|
||||
:maxCount="1"
|
||||
:before-upload="beforeUpload"
|
||||
accept=".zip,.xlsx"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<inbox-outlined></inbox-outlined>
|
||||
</p>
|
||||
<div style="opacity: 0.7">
|
||||
<a-button :icon="h(PlusOutlined)">文件上传</a-button>
|
||||
</div>
|
||||
</a-upload-dragger>
|
||||
<div class="content">
|
||||
<div>
|
||||
<a-steps :current="current" size="small" label-placement="vertical" :items="items" />
|
||||
</div>
|
||||
<div class="upload-span">
|
||||
<div class="upload-span-content">
|
||||
<div style="opacity: 0.7">将文件拖拽到这里或点击上传按钮</div>
|
||||
<div style="color: #1e5eff">支持扩展名：zip,xlsx</div>
|
||||
<div style="opacity: 0.7">zip中需要包含 .shp .shx .dbf 文件 且.shp文件大小小于10MB</div>
|
||||
</div>
|
||||
<div class="current1" v-if="current == 0">
|
||||
<UploadFrom
|
||||
ref="uploadFormRef"
|
||||
:uploadForm="uploadFrom"
|
||||
@isZipOrXls="isZipOrXls"
|
||||
@uploadFormSubmit="uploadFormSubmit"
|
||||
/>
|
||||
</div>
|
||||
<div class="upload-form">
|
||||
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="uploadFrom"
|
||||
:label-col="{ style: { width: '75px' } }"
|
||||
labelAlign="right"
|
||||
:rules="uploadFormRules"
|
||||
<div class="current2" v-if="current == 1 && uploadFrom.dataSourceType == 'shp'">
|
||||
<HeadersTable
|
||||
ref="headersTableRef"
|
||||
:headers="uploadFrom.headers"
|
||||
@headersTableSubmit="headersTableSubmit"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="current3"
|
||||
v-if="current == 2 || (current == 1 && uploadFrom.dataSourceType == 'excel')"
|
||||
>
|
||||
<a-result
|
||||
status="success"
|
||||
title="图层创建成功"
|
||||
subTitle="图层创建成功，请在云查询图层列表查看"
|
||||
>
|
||||
<a-form-item label="服务名称" name="serverName">
|
||||
<a-input v-model:value="uploadFrom.serverName" placeholder="请输入服务名称" />
|
||||
</a-form-item>
|
||||
|
||||
<!-- 显示条件：文件类型为Excel时 -->
|
||||
<a-form-item label="图斑数据" name="hasFeature" v-if="!isShp">
|
||||
<a-select v-model:value="uploadFrom.hasFeature" placeholder="请选择是否具有图斑数据">
|
||||
<a-select-option value="1">是</a-select-option>
|
||||
<a-select-option value="0">否</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 显示条件：文件类型为shp 或者 类型为Excel时有图斑数据 -->
|
||||
<a-form-item label="空间参考" name="spaceType" v-if="isShp || (!isShp && uploadFrom.hasFeature == '1')">
|
||||
<a-select v-model:value="uploadFrom.spaceType" placeholder="请选择空间参考">
|
||||
<a-select-option value="EPSG:4326">EPSG:4326</a-select-option>
|
||||
<a-select-option value="3857">EPSG:3857</a-select-option>
|
||||
<a-select-option value="900913">EPSG:900913</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 显示条件：文件类型为Excel有图斑时 -->
|
||||
<a-form-item label="数据类型" name="spaceType" v-if="!isShp && uploadFrom.hasFeature == '1'">
|
||||
<a-select v-model:value="uploadFrom.layerType" placeholder="请选择数据类型">
|
||||
<a-select-option value="point">点</a-select-option>
|
||||
<a-select-option value="linestring">线</a-select-option>
|
||||
<a-select-option value="polygon">面</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="数据表名" name="tableName">
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="20">
|
||||
<a-input v-model:value="uploadFrom.tableName" placeholder="请输入表名" />
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-button type="" :icon="h(PlusOutlined)" @click="handlerGetExistsTableList()" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!-- <div class="upload-span-button">
|
||||
<a-button type="primary" :icon="h(CloudUploadOutlined)" @click="submitShp">上传</a-button>
|
||||
</div> -->
|
||||
|
||||
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="handleClose">再次创建</a-button>
|
||||
<a-button @click="handleClose">关闭窗口</a-button>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<a-button type="default" >取消</a-button>
|
||||
<a-button type="primary" >添加</a-button>
|
||||
<a-button
|
||||
type="default"
|
||||
@click="handleClose"
|
||||
v-if="
|
||||
!(uploadFrom.dataSourceType == 'shp' && current == 3) ||
|
||||
!(uploadFrom.dataSourceType == 'excel' && current == 2)
|
||||
"
|
||||
>
|
||||
取消
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="nextStep"
|
||||
v-if="
|
||||
!(uploadFrom.dataSourceType == 'shp' && current == 3) ||
|
||||
!(uploadFrom.dataSourceType == 'excel' && current == 2)
|
||||
"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref,reactive,h } from 'vue';
|
||||
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { getStatisticalList, deleteRole } from '@/api/demo/system';
|
||||
|
||||
// import {DataPreivew} from './RecordList.vue'
|
||||
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import { RecordList } from './page';
|
||||
|
||||
import { ref, reactive, h } from 'vue';
|
||||
// vben
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
|
||||
import { columns, columnsDataPreview,searchFormSchema } from './statistical.data';
|
||||
import {MinusOutlined,CloseOutlined,CloudDownloadOutlined,PlusOutlined} from '@ant-design/icons-vue'
|
||||
import axios from 'axios';
|
||||
import print from "vue3-print-nb";
|
||||
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
// 组件
|
||||
import UploadFrom from './clound/uploadFrom.vue';
|
||||
import HeadersTable from './clound/headersTable.vue';
|
||||
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
|
||||
import type { UploadProps } from 'ant-design-vue';
|
||||
import {
|
||||
indexColumns,
|
||||
indexSearchFormSchema,
|
||||
defaultData2,
|
||||
items_shp,
|
||||
items_excel,
|
||||
} from './clound/clound.data';
|
||||
import {
|
||||
getStatisticalList,
|
||||
ShpGeoLayerAdd,
|
||||
ShpGeoLayerLoadPage,
|
||||
ShpGeoLayerGet,
|
||||
ShpGeoLayerUpdateLayer,
|
||||
ShpGeoLayerDelete,
|
||||
ShpGeoLayerParseShpInfo,
|
||||
} from '@/api/demo/system';
|
||||
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
|
||||
const addModalShow = ref<Boolean>(false);
|
||||
|
||||
const vPrint = print;
|
||||
|
||||
const printOpen = ref<boolean>(false);
|
||||
|
||||
const uploadFrom = ref({})
|
||||
const uploadFormRules = reactive({
|
||||
serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
|
||||
imageServerAddress: [{ required: true, message: '请输入服务地址', trigger: 'blur' }],
|
||||
hasFeature: [{ required: true, message: '请选择是否有图斑数据', trigger: 'blur' }],
|
||||
spaceType: [{ required: true, message: '请选择参考系', trigger: 'blur' }],
|
||||
layerType: [{ required: true, message: '请选数据类型', trigger: 'blur' }],
|
||||
tableName: [{ required: true, message: '请输入表名', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const printObj = reactive({
|
||||
id:"printMe",
|
||||
popTitle: "",
|
||||
beforeOpenCallback() {
|
||||
|
||||
},
|
||||
openCallback() {
|
||||
|
||||
},
|
||||
closeCallback() {
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
const beforeUpload:UploadProps['beforeUpload'] = (file) => {
|
||||
// file.type === FILETYPE.ZIP ? isShp.value = true: isShp.value = false
|
||||
fileList.value = [file];
|
||||
return false;
|
||||
};
|
||||
|
||||
const fileList = ref<UploadProps['fileList']>([]);
|
||||
|
||||
|
||||
defineOptions({ name: 'RoleManagement' });
|
||||
|
||||
let activeKey = ref('0')
|
||||
import axios from 'axios';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
const [registerModal, { openModal: openRoleModal }] = useModal();
|
||||
const [registerModulesModal, { openModal: openModulesModal }] = useModal();
|
||||
const [registerAccountModal, { openModal: openAccountModal }] = useModal();
|
||||
const searchInfo = reactive<Recordable>({
|
||||
countyid:null
|
||||
});
|
||||
|
||||
const currentOrgLevel = ref<string>("country")
|
||||
|
||||
const showRecordList = ref<boolean>(false);
|
||||
|
||||
const panes = reactive<{ title: string; content: string; key: string; closable?: boolean}[]>([])
|
||||
// 页面表格
|
||||
const searchParams = ref();
|
||||
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, updateTableData}] = useTable({
|
||||
// 表格名称
|
||||
title: 'GeoServer服务管理',
|
||||
// 获取数据的接口
|
||||
api: getStatisticalList,
|
||||
// 表单列信息 BasicColumn[]
|
||||
columns,
|
||||
rowKey: 'streetid',
|
||||
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||||
title: '云查询图层',
|
||||
api: ShpGeoLayerLoadPage,
|
||||
columns: indexColumns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
schemas: indexSearchFormSchema,
|
||||
},
|
||||
// 使用搜索表单
|
||||
useSearchForm: true,
|
||||
// 显示表格设置工具
|
||||
showTableSetting: true,
|
||||
// 是否显示分页
|
||||
pagination:true,
|
||||
// 是否显示表格边框
|
||||
pagination: true,
|
||||
bordered: true,
|
||||
// 序号列
|
||||
showIndexColumn: true,
|
||||
// 勾选列
|
||||
rowSelection: {
|
||||
type: 'radio',
|
||||
},
|
||||
// 搜索
|
||||
handleSearchInfoFn(info) {
|
||||
searchParams.value = info;
|
||||
return info;
|
||||
},
|
||||
});
|
||||
|
||||
const [registerPrintTable] = useTable({
|
||||
// 表格名称
|
||||
title: '',
|
||||
// 获取数据的接口
|
||||
api: getStatisticalList,
|
||||
// 表单列信息 BasicColumn[]
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
// 使用搜索表单
|
||||
useSearchForm: false,
|
||||
// 显示表格设置工具
|
||||
showTableSetting: false,
|
||||
// 是否显示分页
|
||||
pagination:false,
|
||||
// 是否显示表格边框
|
||||
bordered: true,
|
||||
// 序号列
|
||||
showIndexColumn: false,
|
||||
// 勾选列
|
||||
rowSelection: false,
|
||||
// 搜索
|
||||
handleSearchInfoFn(info) {
|
||||
searchParams.value = info;
|
||||
return info;
|
||||
},
|
||||
});
|
||||
// 步骤
|
||||
const current = ref(0);
|
||||
const items = ref(items_shp);
|
||||
|
||||
|
||||
// 步骤1信息
|
||||
const uploadFormRef = ref();
|
||||
const uploadFromAdd = {
|
||||
serverName: '',
|
||||
spatialRef: '',
|
||||
dataSourceType: '',
|
||||
dataType: '',
|
||||
dataTable: '',
|
||||
shpPath: '',
|
||||
appendPath: '',
|
||||
headers: [] as any,
|
||||
};
|
||||
const uploadFrom = ref(uploadFromAdd);
|
||||
|
||||
|
||||
|
||||
const [registerTableDataPreview,{ reloadDataPreview, getSelectRowsDataPreview, clearSelectedRowKeysDataPreview }] = useTable({
|
||||
// 表格名称
|
||||
title: '',
|
||||
// 获取数据的接口
|
||||
api: getStatisticalList,
|
||||
// 表单列信息 BasicColumn[]
|
||||
columnsDataPreview,
|
||||
rowKey: 'id',
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
// schemas: searchFormSchema,
|
||||
},
|
||||
// 使用搜索表单
|
||||
useSearchForm: false,
|
||||
// 显示表格设置工具
|
||||
showTableSetting: false,
|
||||
// 是否显示表格边框
|
||||
bordered: true,
|
||||
// 序号列
|
||||
showIndexColumn: false,
|
||||
// 勾选列
|
||||
rowSelection: false,
|
||||
// 搜索
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
function handleCloseRecordList(){
|
||||
showRecordList.value = false;
|
||||
}
|
||||
function exportList(){
|
||||
createMessage.success("接口待对接！")
|
||||
// 确认上传的文件类型
|
||||
function isZipOrXls(value) {
|
||||
uploadFrom.value.dataSourceType = value;
|
||||
if (value === 'shp') {
|
||||
items.value = items_shp;
|
||||
} else if (value === 'excel') {
|
||||
items.value = items_excel;
|
||||
}
|
||||
}
|
||||
|
||||
// 步骤1提交
|
||||
function uploadFormSubmit(value) {
|
||||
uploadFrom.value = value;
|
||||
if (uploadFrom.value.headers) {
|
||||
uploadFrom.value.headers.forEach((item) => {
|
||||
item.refName = item.refName != null ? item.refName.toLowerCase() : item.name.toLowerCase();
|
||||
});
|
||||
}
|
||||
current.value = 1;
|
||||
}
|
||||
|
||||
// 步骤2提交
|
||||
const headersTableRef = ref();
|
||||
function headersTableSubmit(value) {
|
||||
uploadFrom.value.headers = value;
|
||||
if (isEdit) {
|
||||
// 编辑
|
||||
ShpGeoLayerUpdateLayer(uploadFrom.value)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (uploadFrom.value.dataSourceType == 'shp') {
|
||||
current.value = 2;
|
||||
} else if (uploadFrom.value.dataSourceType == 'excel') {
|
||||
current.value = 1;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
} else {
|
||||
// 新增
|
||||
ShpGeoLayerAdd(uploadFrom.value)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (uploadFrom.value.dataSourceType == 'shp') {
|
||||
current.value = 2;
|
||||
} else if (uploadFrom.value.dataSourceType == 'excel') {
|
||||
current.value = 1;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 下一步
|
||||
function nextStep() {
|
||||
// 新增状态下的
|
||||
if (!isEdit && uploadFrom.value.dataSourceType == '') {
|
||||
createMessage.warn('请先上传shp文件或者excel文件');
|
||||
return;
|
||||
}
|
||||
if (current.value == 0 && uploadFrom.value.dataSourceType == 'shp') {
|
||||
// uploadFormRef.value.submit1();
|
||||
uploadFormSubmit(defaultData2);
|
||||
} else if (current.value == 0 && uploadFrom.value.dataSourceType == 'excel') {
|
||||
headersTableSubmit([]);
|
||||
} else if (current.value == 1) {
|
||||
headersTableRef.value.submit2();
|
||||
}
|
||||
}
|
||||
|
||||
// 按键
|
||||
let isEdit: Boolean = false;
|
||||
function onBtnClicked(domId) {
|
||||
switch (domId) {
|
||||
case 'btnAdd':
|
||||
handleCreate();
|
||||
isEdit = false;
|
||||
break;
|
||||
case 'btnEdit':
|
||||
handleEdit();
|
||||
isEdit = true;
|
||||
break;
|
||||
case 'btnDelete':
|
||||
handleDelete();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 打开新增弹窗
|
||||
const modalShow = ref<Boolean>(false);
|
||||
function handleCreate() {
|
||||
addModalShow.value = true;
|
||||
}
|
||||
function viewAccount(record: Recordable) {
|
||||
openAccountModal(true, {
|
||||
record,
|
||||
});
|
||||
}
|
||||
function onEdit(targetKey: string){
|
||||
tablist.splice(parseInt(targetKey),1);
|
||||
if(tablist.length==0){
|
||||
showRecordList.value = false;
|
||||
uploadFrom.value = cloneDeep(uploadFromAdd);
|
||||
modalShow.value = true;
|
||||
if (uploadFormRef.value) {
|
||||
uploadFormRef.value.clearValidation();
|
||||
}
|
||||
if(parseInt(targetKey)>1){
|
||||
activeKey.value = (parseInt(targetKey)-1).toString();
|
||||
|
||||
}else{
|
||||
activeKey.value = '0';
|
||||
}
|
||||
currentListQuery.listQuery = tablist[activeKey.value].listQuery
|
||||
}
|
||||
|
||||
let currentListQuery = reactive({listQuery:{}});
|
||||
|
||||
function handleTabChange(e){
|
||||
currentListQuery.listQuery = tablist[e].listQuery
|
||||
|
||||
console.log(currentListQuery)
|
||||
// 关闭窗口
|
||||
function handleClose() {
|
||||
current.value = 0;
|
||||
modalShow.value = false;
|
||||
uploadFrom.value = cloneDeep(uploadFromAdd);
|
||||
}
|
||||
|
||||
|
||||
// function remvoeTab(){
|
||||
|
||||
// }
|
||||
|
||||
const tablist = reactive<{streetname:string;label:string;listQuery:searchListSchema}[]>([])
|
||||
// 查询条件
|
||||
interface searchListSchema{
|
||||
is_intact?:number;
|
||||
streetid?:number;
|
||||
countyid?:number;
|
||||
identification_start_time?:string;
|
||||
identification_end_time?:string;
|
||||
page?:number;
|
||||
limit?:number;
|
||||
is_deal?:number;
|
||||
is_not_deal_hour24?:number;
|
||||
is_drawback?:number;
|
||||
typeid?:number;
|
||||
is_illegal?:number;
|
||||
is_complete?:number;
|
||||
handle_status_id?:number;
|
||||
out_time_flag?:number;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// const searchForm = reactive<searchListSchema>({
|
||||
|
||||
// })
|
||||
|
||||
function handlePreViewData(column,record:Recordable){
|
||||
|
||||
const searchForm = reactive<searchListSchema>({
|
||||
identification_start_time:searchParams.value?.identification_start_time,
|
||||
identification_end_time:searchParams.value?.identification_end_time,
|
||||
is_intact:1,
|
||||
page:1,
|
||||
limit:10,
|
||||
})
|
||||
|
||||
if(currentOrgLevel.value == 'country'){
|
||||
searchForm.countyid = record.streetid;
|
||||
}else if(currentOrgLevel.value == 'street'){
|
||||
searchForm.streetid = record.streetid;
|
||||
}
|
||||
|
||||
console.log("searchForm",searchForm);
|
||||
|
||||
switch(column.dataIndex){
|
||||
case 'allCount':
|
||||
break;
|
||||
case 'handleStatus':
|
||||
searchForm.is_deal = 1;
|
||||
break;
|
||||
case 'notDealHour24':
|
||||
searchForm.is_not_deal_hour24 = 1;
|
||||
searchForm.is_drawback = 0;
|
||||
break;
|
||||
case 'notDealHour24':
|
||||
searchForm.is_not_deal_hour24 = 1;
|
||||
searchForm.is_drawback = 0;
|
||||
break;
|
||||
case 'typeFanxinCount':
|
||||
searchForm.typeid = record.typeid
|
||||
case 'typeJiagaiCount':
|
||||
searchForm.typeid = record.typeid
|
||||
case 'typeFanjianCount':
|
||||
searchForm.typeid = record.typeid
|
||||
case 'typeCunliangCount':
|
||||
searchForm.typeid = record.typeid
|
||||
case 'typeTuituCount':
|
||||
searchForm.typeid = record.typeid
|
||||
case 'illegal0Count':
|
||||
searchForm.is_illegal = 0;
|
||||
searchForm.is_deal = 1;
|
||||
break;
|
||||
case 'illegal1Count':
|
||||
searchForm.is_illegal = 1;
|
||||
searchForm.is_deal = 1;
|
||||
break;
|
||||
case 'illegal2Count':
|
||||
searchForm.is_illegal = 2;
|
||||
searchForm.is_deal = 1;
|
||||
break;
|
||||
case 'illegal1Count1':
|
||||
searchForm.is_illegal = 1;
|
||||
searchForm.is_deal = 1;
|
||||
break;
|
||||
case 'illegalHandle2Status':
|
||||
searchForm.handle_status_id = 1;
|
||||
searchForm.is_deal = 1;
|
||||
break;
|
||||
case 'illegalHandle01Status':
|
||||
searchForm.is_illegal = 1;
|
||||
searchForm.is_deal = 1;
|
||||
searchForm.is_complete = 0;
|
||||
break;
|
||||
case 'notComplete3':
|
||||
searchForm.is_illegal = 1;
|
||||
searchForm.is_complete = 0;
|
||||
searchForm.out_time_flag = 1;
|
||||
break;
|
||||
case 'notComplete7':
|
||||
searchForm.is_illegal = 1;
|
||||
searchForm.is_complete = 0;
|
||||
searchForm.out_time_flag = 2;
|
||||
break;
|
||||
case 'notComplete30':
|
||||
searchForm.is_illegal = 1;
|
||||
searchForm.is_complete = 0;
|
||||
searchForm.out_time_flag = 4;
|
||||
break;
|
||||
case 'notComplete30More':
|
||||
searchForm.is_illegal = 1;
|
||||
searchForm.is_complete = 0;
|
||||
searchForm.out_time_flag = 5;
|
||||
break;
|
||||
}
|
||||
|
||||
let tabItem = {
|
||||
streetname:record.streetname,
|
||||
label:column.title,
|
||||
listQuery:searchForm,
|
||||
}
|
||||
|
||||
tablist.push(tabItem)
|
||||
activeKey.value = tablist.length > 1 ? (tablist.length-1).toString() : '0';
|
||||
|
||||
showRecordList.value = true;
|
||||
currentListQuery.listQuery = searchForm
|
||||
|
||||
}
|
||||
|
||||
// 获取下级行政结构案件统计
|
||||
function getOrgCaseList(column,record:Recordable){
|
||||
|
||||
if(currentOrgLevel.value == 'country'){
|
||||
currentOrgLevel.value = 'street'
|
||||
}else if(currentOrgLevel.value == 'street'){
|
||||
currentOrgLevel.value = 'country'
|
||||
}
|
||||
searchInfo.countyid = record.streetid;
|
||||
console.log("searchInfo",searchInfo);
|
||||
reload();
|
||||
console.log("searchInfo",searchInfo);
|
||||
}
|
||||
function handleCloseAllRecordList(){
|
||||
for(let i=0;i<tablist.length;i++){
|
||||
tablist.pop();
|
||||
}
|
||||
showRecordList.value = false;
|
||||
|
||||
// 再次创建
|
||||
function closeAndCreate() {
|
||||
current.value = 0;
|
||||
uploadFrom.value = cloneDeep(uploadFromAdd);
|
||||
if (uploadFormRef.value) {
|
||||
uploadFormRef.value.clearValidation();
|
||||
}
|
||||
}
|
||||
// 编辑
|
||||
function handleEdit() {
|
||||
let rows = getSelectRows();
|
||||
let rows: any = getSelectRows();
|
||||
if (rows.length == 0) {
|
||||
return createMessage.warn('请勾选一个角色进行编辑');
|
||||
return createMessage.warn('请勾选一个图层进行编辑');
|
||||
}
|
||||
const record = rows[0];
|
||||
openRoleModal(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
});
|
||||
uploadFrom.value = rows[0];
|
||||
isZipOrXls(uploadFrom.value.dataSourceType);
|
||||
modalShow.value = true;
|
||||
current.value = 0;
|
||||
}
|
||||
|
||||
// 删除
|
||||
async function handleDelete() {
|
||||
let rows = getSelectRows();
|
||||
if (rows.length == 0) {
|
||||
return createMessage.warn('请勾选一个角色进行删除');
|
||||
return createMessage.warn('请勾选一个图层进行删除');
|
||||
}
|
||||
const query = [rows[0].id];
|
||||
const query = { id: rows[0].id };
|
||||
createConfirm({
|
||||
iconType: 'info',
|
||||
title: '删除',
|
||||
content: '确定要删除当前角色吗',
|
||||
content: '确定要删除当前图层吗？',
|
||||
onOk: async () => {
|
||||
const data = await deleteRole(query);
|
||||
const data = await ShpGeoLayerDelete(query);
|
||||
if (data) {
|
||||
handleSuccess();
|
||||
createMessage.success('删除成功');
|
||||
|
|
@ -545,135 +313,20 @@
|
|||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handlePrint(){
|
||||
printOpen.value = true;
|
||||
}
|
||||
|
||||
// 直接下载接口返回的二进制流
|
||||
|
||||
function handleExport(){
|
||||
let params = {...searchParams.value}
|
||||
params.countyid = searchInfo?.countyid;
|
||||
axios({
|
||||
method:"post",
|
||||
url:VITE_GLOB_API_URL+"/api/DroneCaseinfo/ExportCaseSynthesisCensusStreet",
|
||||
params:params,
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
},
|
||||
responseType:"blob"
|
||||
}).then(res=>{
|
||||
console.log("excel",res);
|
||||
let fileName = "统计报表" + new Date().getTime() + ".xls";
|
||||
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)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
function handleExcelDownload(data) {
|
||||
// 将二进制数据转换为Excel文件
|
||||
const workbook = XLSX.read(data, { type: 'array' });
|
||||
|
||||
// 可以进一步处理workbook对象，例如提取工作表数据等
|
||||
const firstSheetName = workbook.SheetNames[0];
|
||||
const worksheet = workbook.Sheets[firstSheetName];
|
||||
const excelData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
|
||||
|
||||
console.log('Excel Data:', excelData);
|
||||
|
||||
// 下载Excel文件
|
||||
XLSX.writeFile(workbook, 'example.xlsx');
|
||||
}
|
||||
|
||||
|
||||
// 刷新表格
|
||||
function handleSuccess() {
|
||||
clearSelectedRowKeys();
|
||||
reload();
|
||||
reloadDataPreview();
|
||||
}
|
||||
|
||||
function onBtnClicked(domId) {
|
||||
switch (domId) {
|
||||
case 'btnBack':
|
||||
currentOrgLevel.value = 'street'
|
||||
getOrgCaseList({},{streetid:null});
|
||||
break;
|
||||
case 'btnAdd':
|
||||
handleCreate();
|
||||
break;
|
||||
case 'btnEdit':
|
||||
handleEdit();
|
||||
break;
|
||||
case 'btnDelete':
|
||||
handleDelete();
|
||||
break;
|
||||
case 'btnModules':
|
||||
let rows = getSelectRows();
|
||||
if (rows.length == 0) {
|
||||
return createMessage.warn('请勾选一个角色进行编辑');
|
||||
}
|
||||
const record = rows[0];
|
||||
openModulesModal(true, {
|
||||
record,
|
||||
});
|
||||
break;
|
||||
case 'btnPrint':
|
||||
handlePrint();
|
||||
break;
|
||||
case 'btnExport':
|
||||
handleExport();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.map-outer{
|
||||
width:100%;
|
||||
height: calc( 100vh - 80px);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.content{
|
||||
padding:20px;
|
||||
}
|
||||
|
||||
.upload-div{
|
||||
}
|
||||
|
||||
.upload-span{
|
||||
margin:30px auto;
|
||||
}
|
||||
.current1 {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
width: 800px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue