merege
commit
fa56b958f5
|
|
@ -190,37 +190,6 @@ export function functionGetSchemePageList(params: schemePageListModel) {
|
|||
});
|
||||
}
|
||||
|
||||
// 获取表单分页数据 【先不写】
|
||||
export function functionGetFormDataPage(params: AccountParams) {
|
||||
return defHttp.post<FromSchemandAndInfoModel>({
|
||||
url: Api.GetFormDataPage,
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 获取表单分页数据【先不写】
|
||||
export function functionGetFormDataList(params: AccountParams) {
|
||||
return defHttp.post<FromSchemandAndInfoModel>({
|
||||
url: Api.GetFormDataList,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取表单数据【先不写】
|
||||
export function functionGetFormDataFormScheme(params: AccountParams) {
|
||||
return defHttp.get<FromSchemandAndInfoModel>({
|
||||
url: Api.GetFormDataFormScheme,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 保存自定表单数据【先不写】
|
||||
export function functionsaveForm(params: AccountParams) {
|
||||
return defHttp.post<FromSchemandAndInfoModel>({
|
||||
url: Api.saveForm,
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// CodeTable 数据对象模型管理
|
||||
// 获取CodeTable的分页数据
|
||||
export function function_Get_LoadCodeTablePage(
|
||||
|
|
@ -280,10 +249,10 @@ export function LoadFormScheme(params) {
|
|||
export function AddTable(params) {
|
||||
params.dbColumnInfoList.push({
|
||||
tableName: params.tableName,
|
||||
dbColumnName: 'gemo',
|
||||
dbColumnName: 'geom',
|
||||
dataType: 'geometry',
|
||||
length: 0,
|
||||
columnDescription: 'gemo',
|
||||
columnDescription: 'geom',
|
||||
isNullable: 0,
|
||||
isIdentity: 0,
|
||||
isPrimarykey: 0,
|
||||
|
|
@ -296,6 +265,7 @@ export function AddTable(params) {
|
|||
}
|
||||
|
||||
// 创建字段
|
||||
|
||||
export function AddColumn(params) {
|
||||
return defHttp.post({
|
||||
url: Api.AddColumn,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<template>
|
||||
<a-modal class="insert-shp-modal" width="1290px" :destroyOnClose="true" v-model:open="props.openModal" @cancel="closeModal">
|
||||
<a-modal
|
||||
class="insert-shp-modal"
|
||||
width="1290px"
|
||||
:destroyOnClose="true"
|
||||
v-model:open="props.openModal"
|
||||
@cancel="closeModal"
|
||||
>
|
||||
<template #closeIcon>
|
||||
<CloseCircleOutlined />
|
||||
</template>
|
||||
|
|
@ -9,36 +15,33 @@
|
|||
class="steps"
|
||||
:current="current"
|
||||
label-placement="vertical"
|
||||
:items="[
|
||||
{title: '选择文件',},
|
||||
{title: '编辑信息',},
|
||||
{title: '完成',},
|
||||
]"
|
||||
:items="[{ title: '选择文件' }, { title: '编辑信息' }, { title: '完成' }]"
|
||||
></a-steps>
|
||||
<div class="select-file-div" v-show="current === 0">
|
||||
<div class="upload-div">
|
||||
<a-upload-dragger
|
||||
style="height: 174px; width: 174px;"
|
||||
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;">
|
||||
<div style="opacity: 0.7">
|
||||
<a-button :icon="h(PlusOutlined)">文件上传</a-button>
|
||||
</div>
|
||||
</a-upload-dragger>
|
||||
</div>
|
||||
<div class="upload-span">
|
||||
<div class="upload-span-content">
|
||||
<div style="opacity: 0.7;">将文件拖拽到这里或点击上传按钮</div>
|
||||
<div style="color: #1E5EFF;">支持扩展名：zip</div>
|
||||
<div style="opacity: 0.7;">zip中需要包含 .shp .shx .dbf 文件 且.shp文件大小小于10MB</div>
|
||||
<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>
|
||||
<div class="upload-form">
|
||||
|
|
@ -47,9 +50,10 @@
|
|||
:model="uploadFrom"
|
||||
:label-col="{ style: { width: '75px' } }"
|
||||
labelAlign="right"
|
||||
:rules="uploadFormRules">
|
||||
:rules="uploadFormRules"
|
||||
>
|
||||
<a-form-item label="服务名称" name="serverName">
|
||||
<a-input v-model:value="uploadFrom.serverName" placeholder="请输入服务名称"/>
|
||||
<a-input v-model:value="uploadFrom.serverName" placeholder="请输入服务名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="空间参考" name="spaceType">
|
||||
<!-- <a-input v-model:value="uploadFrom.spaceType" /> -->
|
||||
|
|
@ -60,7 +64,7 @@
|
|||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="表名" name="tableName">
|
||||
<a-input v-model:value="uploadFrom.tableName" placeholder="请输入表名"/>
|
||||
<a-input v-model:value="uploadFrom.tableName" placeholder="请输入表名" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="upload-span-button">
|
||||
|
|
@ -69,10 +73,16 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="edit-info-div" v-show="current === 1">
|
||||
<a-table :columns="columns" :data-source="dataList" :pagination="false" :bordered="true" :scroll="{y: 260}">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="dataList"
|
||||
:pagination="false"
|
||||
:bordered="true"
|
||||
:scroll="{ y: 260 }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-select v-model:value="record.type" style="width: 120px;">
|
||||
<a-select v-model:value="record.type" style="width: 120px">
|
||||
<a-select-option value="geometry">geometry</a-select-option>
|
||||
<a-select-option value="varchar">varchar</a-select-option>
|
||||
<a-select-option value="text">text</a-select-option>
|
||||
|
|
@ -97,13 +107,15 @@
|
|||
<div class="insert-list-button" @click="insertListItem">新增一条</div>
|
||||
<div class="footer-button">
|
||||
<a-button @click="current--">取消</a-button>
|
||||
<a-button style="margin-left: 25px;" type="primary" @click="submitDataList">下一步</a-button>
|
||||
<a-button style="margin-left: 25px" type="primary" @click="submitDataList"
|
||||
>下一步</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="submit-success" v-show="current === 2">
|
||||
<div class="success-content">
|
||||
<CheckCircleOutlined style="font-size: 100px;color: #1FD286;margin-bottom:30px"/>
|
||||
<div style="margin-bottom:19px;font-size:26px">导入成功</div>
|
||||
<CheckCircleOutlined style="font-size: 100px; color: #1fd286; margin-bottom: 30px" />
|
||||
<div style="margin-bottom: 19px; font-size: 26px">导入成功</div>
|
||||
<div><a-button type="primary">查看数据</a-button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -112,46 +124,53 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineEmits, defineProps, ref, h, reactive, onUnmounted, toRaw } from "vue"
|
||||
import { CloseCircleOutlined, PlusOutlined, DeleteOutlined,CheckCircleOutlined } from "@ant-design/icons-vue"
|
||||
import './index.scss'
|
||||
import { InboxOutlined } from '@ant-design/icons-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import type { UploadChangeParam } from 'ant-design-vue';
|
||||
import type { UploadProps } from 'ant-design-vue';
|
||||
// import { uploadShp } from '@/api/sys/analysis.ts'
|
||||
import axios from 'axios'
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { defineEmits, defineProps, ref, h, reactive, onUnmounted, toRaw } from 'vue';
|
||||
import {
|
||||
CloseCircleOutlined,
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
CheckCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import './index.scss';
|
||||
import { InboxOutlined } from '@ant-design/icons-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import type { UploadChangeParam } from 'ant-design-vue';
|
||||
import type { UploadProps } from 'ant-design-vue';
|
||||
// import { uploadShp } from '@/api/sys/analysis.ts'
|
||||
import axios from 'axios';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { FILETYPE } from '../util'
|
||||
|
||||
const current = ref(0)
|
||||
const fileList = ref<UploadProps['fileList']>([]);
|
||||
const props = defineProps(['openModal'])
|
||||
const emits = defineEmits(['update:openModal'])
|
||||
const uploadFrom = reactive({
|
||||
serverName:'',
|
||||
spaceType:null,
|
||||
tableName:'',
|
||||
})
|
||||
const formRef = ref()
|
||||
const dataList = ref([])
|
||||
const isShp = ref(false)
|
||||
// todo
|
||||
const columns = [
|
||||
{title: 'Shp原始字段',dataIndex: 'name',key: 'name'},
|
||||
{title: '数据类型',dataIndex: 'type',key: 'type'},
|
||||
{title: '数据长度',dataIndex: 'length',key: 'length'},
|
||||
{title: '英文名称',dataIndex: 'refName',key: 'refName'},
|
||||
{title: '中文名称',dataIndex: 'initName',key: 'initName'},
|
||||
{title: '操作',dataIndex: 'operation',key: 'operation'},
|
||||
]
|
||||
const uploadFormRules = {
|
||||
serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' },],
|
||||
spaceType: [{ required: true, message: '请选择参考系', trigger: 'blur' },],
|
||||
tableName: [{ required: true, message: '请输入表名', trigger: 'blur' },],
|
||||
}
|
||||
const current = ref(0);
|
||||
const fileList = ref<UploadProps['fileList']>([]);
|
||||
const props = defineProps(['openModal']);
|
||||
const emits = defineEmits(['update:openModal']);
|
||||
const uploadFrom = reactive({
|
||||
serverName: '',
|
||||
spaceType: null,
|
||||
tableName: '',
|
||||
});
|
||||
const formRef = ref();
|
||||
const dataList = ref([]);
|
||||
const isShp = ref(false);
|
||||
// todo
|
||||
const columns = [
|
||||
{ title: 'Shp原始字段', dataIndex: 'name', key: 'name' },
|
||||
{ title: '数据类型', dataIndex: 'type', key: 'type' },
|
||||
{ title: '数据长度', dataIndex: 'length', key: 'length' },
|
||||
{ title: '英文名称', dataIndex: 'refName', key: 'refName' },
|
||||
{ title: '中文名称', dataIndex: 'initName', key: 'initName' },
|
||||
{ title: '操作', dataIndex: 'operation', key: 'operation' },
|
||||
];
|
||||
const uploadFormRules = {
|
||||
serverName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
|
||||
spaceType: [{ required: true, message: '请选择参考系', trigger: 'blur' }],
|
||||
tableName: [{ required: true, message: '请输入表名', trigger: 'blur' }],
|
||||
};
|
||||
|
||||
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||
console.log('beforeUpload',file)
|
||||
file.type === FILETYPE.ZIP? isShp.value = true: isShp.value = false
|
||||
fileList.value = [file];
|
||||
return false;
|
||||
};
|
||||
|
|
@ -168,31 +187,12 @@ const submitShp = () => {
|
|||
formData.append('serverName',uploadFrom.serverName)
|
||||
formData.append('spaceType',uploadFrom.spaceType)
|
||||
formData.append('tableName',uploadFrom.tableName)
|
||||
axios.post('http://221.2.83.254:9006/geoserver/uploadFile',formData,{headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
|
||||
console.log(res)
|
||||
let data = {
|
||||
"dataType": "线",
|
||||
"heads": [
|
||||
{
|
||||
"name": "geom",
|
||||
"length": "",
|
||||
"type": "geometry"
|
||||
},
|
||||
{
|
||||
"name": "MINGCHENG",
|
||||
"length": 319,
|
||||
"type": "varchar"
|
||||
},
|
||||
{
|
||||
"name": "CHANGDU",
|
||||
"length": 319,
|
||||
"type": "varchar"
|
||||
}
|
||||
],
|
||||
"styleName": null,
|
||||
"tableName": "aa"
|
||||
}
|
||||
let showData = data.heads.map(item => {
|
||||
let url = ""
|
||||
isShp.value? url = 'http://221.2.83.254:9006/geoserver/uploadFile': url = 'http://221.2.83.254:9006/geoserver/uploadExcelFile'
|
||||
axios.post(url,formData,{headers: {'Content-Type': 'multipart/form-data;charset=UTF-8'}}).then(res => {
|
||||
let data = res.data.data.heads
|
||||
console.log(data)
|
||||
let showData = data.map(item => {
|
||||
return {...item,refName:item.name.toLowerCase(),initName:item.name,key:uuidv4()}
|
||||
})
|
||||
dataList.value = showData
|
||||
|
|
@ -230,91 +230,91 @@ const submitDataList = () => {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.insert-shp-modal{
|
||||
.title{
|
||||
height: 77px;
|
||||
border-bottom: 1px solid #D7DBEC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 63px;
|
||||
font-size: 28px;
|
||||
}
|
||||
.content{
|
||||
padding: 106px;
|
||||
}
|
||||
.steps{
|
||||
// margin-bottom: 80px;
|
||||
}
|
||||
.select-file-div{
|
||||
padding-left: 52px;
|
||||
padding-top: 80px;
|
||||
display: flex;
|
||||
.upload-div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 52px 103px 0px rgba(192,199,218,0.35);
|
||||
border-radius: 4px;
|
||||
.insert-shp-modal {
|
||||
.title {
|
||||
height: 77px;
|
||||
border-bottom: 1px solid #d7dbec;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.upload-dragger{
|
||||
height: 174px;
|
||||
}
|
||||
padding-left: 63px;
|
||||
font-size: 28px;
|
||||
}
|
||||
.upload-span{
|
||||
margin-left: 40px;
|
||||
.content {
|
||||
padding: 106px;
|
||||
}
|
||||
.steps {
|
||||
// margin-bottom: 80px;
|
||||
}
|
||||
.select-file-div {
|
||||
padding-left: 52px;
|
||||
padding-top: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.upload-span-content{
|
||||
font-size:16px;
|
||||
margin-top: 8px;
|
||||
.upload-div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 52px 103px 0px rgba(192, 199, 218, 0.35);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.upload-dragger {
|
||||
height: 174px;
|
||||
}
|
||||
}
|
||||
.upload-span {
|
||||
margin-left: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.upload-span-content {
|
||||
font-size: 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.upload-form {
|
||||
flex: 1;
|
||||
margin-left: 40px;
|
||||
.upload-span-button {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload-form{
|
||||
flex: 1;
|
||||
margin-left:40px;
|
||||
.upload-span-button{
|
||||
.edit-info-div {
|
||||
padding-top: 26px;
|
||||
.footer-button {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.insert-list-button {
|
||||
background-color: #91b0ff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
font-weight: 400;
|
||||
transition: 1s;
|
||||
}
|
||||
.insert-list-button:hover {
|
||||
font-weight: 900;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.submit-success {
|
||||
.success-content {
|
||||
width: 200px;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
.edit-info-div{
|
||||
padding-top:26px;
|
||||
.footer-button{
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.insert-list-button{
|
||||
background-color: #91b0ff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
font-weight: 400;
|
||||
transition: 1s;
|
||||
}
|
||||
.insert-list-button:hover{
|
||||
font-weight: 900;
|
||||
color:#000;
|
||||
}
|
||||
}
|
||||
.submit-success{
|
||||
.success-content{
|
||||
width: 200px;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,13 @@
|
|||
<div class="LayerComponent">
|
||||
<div class="title">图层</div>
|
||||
<div class="insert-layer">
|
||||
<a-button class="add-layer-button" type="primary" :icon="h(PlusOutlined)" @click="openInsertShpModal">添加图层</a-button>
|
||||
<a-button
|
||||
class="add-layer-button"
|
||||
type="primary"
|
||||
:icon="h(PlusOutlined)"
|
||||
@click="openInsertShpModal"
|
||||
>添加图层</a-button
|
||||
>
|
||||
<span class="clear-layer-button">清空</span>
|
||||
</div>
|
||||
<div class="show-current-layer">
|
||||
|
|
@ -12,21 +18,31 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="show-layers">
|
||||
<div :class="`show-layer-item ${isSelected === item.id ? 'select-list-item': ''}`"
|
||||
v-for="item in layerList" :key='item.id' @click="selectLayer(item.id)">
|
||||
<a-checkbox v-model:checked="item.checked" @change="handlerCheckboxChange(item)" />
|
||||
<div
|
||||
:class="`show-layer-item ${isSelected === item.id ? 'select-list-item' : ''}`"
|
||||
v-for="item in dataList"
|
||||
:key="item.id"
|
||||
@click="selectLayer(item.id)"
|
||||
>
|
||||
<a-checkbox v-model:checked="item.checked" />
|
||||
<a-image
|
||||
:width="119"
|
||||
:height="87"
|
||||
style="margin-left: 10px;border-radius: 5px;"
|
||||
style="margin-left: 10px; border-radius: 5px"
|
||||
src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
|
||||
:preview="false"
|
||||
:fallback="errorImage"/>
|
||||
:fallback="errorImage"
|
||||
/>
|
||||
<div class="layer-item-text">
|
||||
<div class="item-title">名称： {{ item.name }}</div>
|
||||
<div class="item-control">
|
||||
<a-button type="primary" size="small" style="background-color:#09B66D;margin-right: 7px;" @click="handlerPreviewLayer(item)">查看数据</a-button>
|
||||
<a-button type="primary" size="small" style="background-color: #0081FF;">操作</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
style="background-color: #09b66d; margin-right: 7px"
|
||||
>查看数据</a-button
|
||||
>
|
||||
<a-button type="primary" size="small" style="background-color: #0081ff">操作</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,137 +51,158 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PlusOutlined } from '@ant-design/icons-vue'
|
||||
import { h, defineEmits, ref,defineProps } from "vue"
|
||||
import { errorImage } from "../util.ts"
|
||||
const dataList = ref([])
|
||||
const isSelected = ref()
|
||||
const props = defineProps({
|
||||
layerList:{
|
||||
type: Array,
|
||||
required: true,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(["changeOpenModal","changeOpenInsertShpModal","handlerPreviewLayer"])
|
||||
const changeClick = () => {
|
||||
emits("changeOpenModal",true)
|
||||
}
|
||||
const openInsertShpModal = () => {
|
||||
emits("changeOpenInsertShpModal",true)
|
||||
}
|
||||
const selectLayer = (id:number) => {
|
||||
isSelected.value = id
|
||||
}
|
||||
|
||||
// 叠加与定位图层
|
||||
const handlerCheckboxChange = (item) => {
|
||||
handlerPreviewLayer(item)
|
||||
}
|
||||
|
||||
const handlerPreviewLayer = (item)=>{
|
||||
emits("handlerPreviewLayer",item);
|
||||
}
|
||||
|
||||
|
||||
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { h, defineEmits, ref } from 'vue';
|
||||
import { errorImage } from '../util.ts';
|
||||
const dataList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '111',
|
||||
checked: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '222',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '333',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '444',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '555',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '666',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: '777',
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: '888',
|
||||
checked: false,
|
||||
},
|
||||
]);
|
||||
const isSelected = ref();
|
||||
const emits = defineEmits(['changeOpenModal', 'changeOpenInsertShpModal']);
|
||||
const changeClick = () => {
|
||||
emits('changeOpenModal', true);
|
||||
};
|
||||
const openInsertShpModal = () => {
|
||||
emits('changeOpenInsertShpModal', true);
|
||||
};
|
||||
const selectLayer = (id: number) => {
|
||||
isSelected.value = id;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.LayerComponent{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 356px;
|
||||
height: 100%;
|
||||
background-color: #E0E5ED;
|
||||
.title{
|
||||
height:61px;
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.insert-layer{
|
||||
height:61px;
|
||||
background-color: #fff;
|
||||
padding-left: 16px;
|
||||
padding-right: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
.add-layer-button{
|
||||
background-color: #0081FF;
|
||||
}
|
||||
.clear-layer-button{
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.show-current-layer{
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
.current-layer-div{
|
||||
height: 37px;
|
||||
.LayerComponent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 356px;
|
||||
height: 100%;
|
||||
background-color: #e0e5ed;
|
||||
.title {
|
||||
height: 61px;
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
user-select: none;;
|
||||
.current-layer-title{
|
||||
background-color: #fff;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.insert-layer {
|
||||
height: 61px;
|
||||
background-color: #fff;
|
||||
padding-left: 16px;
|
||||
padding-right: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
.add-layer-button {
|
||||
background-color: #0081ff;
|
||||
}
|
||||
.current-layer-title::before{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-color: #09B66D;
|
||||
border-radius: 50%;
|
||||
margin: 6px;
|
||||
}
|
||||
.create-new-layer-button{
|
||||
width: 106px;
|
||||
background-color: #0081FF;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
.clear-layer-button {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.show-layers{
|
||||
height: calc(100% - 179px);
|
||||
padding-top: 14px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
overflow: auto;
|
||||
|
||||
.show-layer-item{
|
||||
background-color: #fff;
|
||||
height: 133px;
|
||||
border-radius: 5px;
|
||||
padding: 23px 10px;
|
||||
display: flex;
|
||||
margin-bottom: 14px;
|
||||
.layer-item-text{
|
||||
margin-left: 20px;
|
||||
flex: 1;
|
||||
.show-current-layer {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
.current-layer-div {
|
||||
height: 37px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
.current-layer-title {
|
||||
background-color: #fff;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
.current-layer-title::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-color: #09b66d;
|
||||
border-radius: 50%;
|
||||
margin: 6px;
|
||||
}
|
||||
.create-new-layer-button {
|
||||
width: 106px;
|
||||
background-color: #0081ff;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.show-layers {
|
||||
height: calc(100% - 179px);
|
||||
padding-top: 14px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
overflow: auto;
|
||||
|
||||
.show-layer-item {
|
||||
background-color: #fff;
|
||||
height: 133px;
|
||||
border-radius: 5px;
|
||||
padding: 23px 10px;
|
||||
display: flex;
|
||||
margin-bottom: 14px;
|
||||
.layer-item-text {
|
||||
margin-left: 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-list-item {
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
.select-list-item{
|
||||
border:1px solid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<div class="LayerControl">
|
||||
<a-button type="primary" class="blue line-up" :icon="h(EditOutlined)">绘制</a-button>
|
||||
<a-button type="primary" class="blue line-up" @click="drawClick" :icon="h(EditOutlined)"
|
||||
>绘制</a-button
|
||||
>
|
||||
<a-button type="primary" class="blue line-up" :icon="h(FormOutlined)">编辑</a-button>
|
||||
<a-button type="primary" class="blue last-line-up" :icon="h(BlockOutlined)">合并</a-button>
|
||||
<a-button type="primary" class="orange line-up" :icon="h(SplitCellsOutlined)">分割</a-button>
|
||||
|
|
@ -12,35 +14,47 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { EditOutlined, FormOutlined, BlockOutlined,
|
||||
SplitCellsOutlined, DragOutlined, DeleteOutlined, RollbackOutlined, CloseCircleOutlined, } from "@ant-design/icons-vue"
|
||||
import { h } from "vue"
|
||||
import {
|
||||
EditOutlined,
|
||||
FormOutlined,
|
||||
BlockOutlined,
|
||||
SplitCellsOutlined,
|
||||
DragOutlined,
|
||||
DeleteOutlined,
|
||||
RollbackOutlined,
|
||||
CloseCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { h } from 'vue';
|
||||
const emit = defineEmits(['draw']);
|
||||
function drawClick() {
|
||||
emit('draw');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.LayerControl{
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 386px;
|
||||
background-color: #fff;
|
||||
padding: 13px 13px 8px 13px;
|
||||
button{
|
||||
margin-bottom: 5px;
|
||||
.LayerControl {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 386px;
|
||||
background-color: #fff;
|
||||
padding: 13px 13px 8px 13px;
|
||||
button {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
.blue {
|
||||
background-color: #0081ff;
|
||||
}
|
||||
.orange {
|
||||
background-color: #ff8a48;
|
||||
}
|
||||
.green {
|
||||
background-color: #09b66d;
|
||||
}
|
||||
.line-up {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.last-line-up {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
.blue{
|
||||
background-color: #0081FF;
|
||||
}
|
||||
.orange{
|
||||
background-color: #FF8A48;
|
||||
}
|
||||
.green{
|
||||
background-color: #09B66D;
|
||||
}
|
||||
.line-up{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.last-line-up{
|
||||
margin-right: 15px
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,103 +1,66 @@
|
|||
<template>
|
||||
<div class="map-container">
|
||||
<div id="mapContainer" class="map-box"></div>
|
||||
<!-- <div class="map-control">
|
||||
<img
|
||||
v-for="(item, index) in nextMapControl"
|
||||
:key="index"
|
||||
:src="item.icon"
|
||||
:title="item.title"
|
||||
@click="handlerMapControlClick(item.handler)"
|
||||
<div class="map-container">
|
||||
<div id="mapContainer" class="map-box"></div>
|
||||
<!-- <div class="map-control">
|
||||
<img
|
||||
v-for="(item, index) in nextMapControl"
|
||||
:key="index"
|
||||
:src="item.icon"
|
||||
:title="item.title"
|
||||
@click="handlerMapControlClick(item.handler)"
|
||||
/>
|
||||
<img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
|
||||
</div> -->
|
||||
<LayerComponent
|
||||
@changeOpenModal="changeOpenModal"
|
||||
@changeOpenInsertShpModal="changeOpenInsertShpModal"
|
||||
/>
|
||||
<img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
|
||||
</div> -->
|
||||
<LayerComponent @changeOpenModal="changeOpenModal" @changeOpenInsertShpModal="changeOpenInsertShpModal" :layerList="layerList" @handlerPreviewLayer="handlerPreviewLayer"/>
|
||||
<LayerControl />
|
||||
<UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" @handlerAddToLayerList="handlerAddToLayerList"/>
|
||||
<InsertShp v-model:openModal="insertShpModal" />
|
||||
<DataListComponent @handlerLocation="handlerLocation" @handlerEdit="handlerEdit"/>
|
||||
<RightShowInfo :isOpen="isOpen" @handlerClose="handlerClose" />
|
||||
</div>
|
||||
</template>
|
||||
<LayerControl @draw="handlerDrawPolygon" />
|
||||
<UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" />
|
||||
<InsertShp v-model:openModal="insertShpModal" />
|
||||
<DataListComponent />
|
||||
<RightShowInfo v-model:openModal="openRightInfo" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, defineProps, reactive, ref } from 'vue';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import mapboxgl, { Map,Popup } from 'mapbox-gl';
|
||||
|
||||
import mapboxgl, { Map, Popup } from 'mapbox-gl';
|
||||
|
||||
// 图形绘制工具类
|
||||
import MapboxDraw from "@mapbox/mapbox-gl-draw";
|
||||
|
||||
import MapboxDraw from '@mapbox/mapbox-gl-draw';
|
||||
|
||||
import U from 'mapbox-gl-utils';
|
||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
import './src/index.less';
|
||||
import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
|
||||
import { MP } from './src/MP';
|
||||
import { DrawingType } from '@/enums/mapEnum';
|
||||
|
||||
|
||||
import {
|
||||
SnapPolygonMode,
|
||||
SnapPointMode,
|
||||
SnapLineMode,
|
||||
SnapModeDrawStyles,
|
||||
SnapDirectSelect,
|
||||
} from "mapbox-gl-draw-snap-mode";
|
||||
|
||||
import {customDrawStyles} from './Styles/Styles'
|
||||
|
||||
import LayerComponent from './LayerComponent/index.vue'
|
||||
import LayerControl from './LayerControl/index.vue'
|
||||
import UseModal from './Modal/index.vue'
|
||||
import InsertShp from './InsertShp/index.vue'
|
||||
import DataListComponent from './DataListComponent/index.vue'
|
||||
import RightShowInfo from './RightShowInfo/index.vue'
|
||||
|
||||
const isOpen = ref(false)
|
||||
const layerList = reactive([
|
||||
{
|
||||
id:1,
|
||||
name:"沂水县道路中心线",
|
||||
checked:false,
|
||||
layer:{
|
||||
'id': 'roadnetLine1',
|
||||
'type': 'line',
|
||||
'source': {
|
||||
type: 'vector',
|
||||
tiles: [ 'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&X-Token=1ded3fe7'],
|
||||
minzoom: 1,
|
||||
maxzoom: 20
|
||||
},
|
||||
"source-layer": "yishuixian",
|
||||
'layout': {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round'
|
||||
},
|
||||
'paint': {
|
||||
'line-color': [
|
||||
"case",
|
||||
["==", ["get", "handle_status_id"], 0],
|
||||
"#E6A23C",
|
||||
["==", ["get", "handle_status_id"], 1],
|
||||
"#409EFF",
|
||||
["==", ["get", "handle_status_id"], 2],
|
||||
"#67C23A",
|
||||
// 默认
|
||||
"#67C23A",
|
||||
],
|
||||
'line-width': 1
|
||||
}
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
SnapPolygonMode,
|
||||
SnapPointMode,
|
||||
SnapLineMode,
|
||||
SnapModeDrawStyles,
|
||||
SnapDirectSelect,
|
||||
} from 'mapbox-gl-draw-snap-mode';
|
||||
import LayerComponent from './LayerComponent/index.vue';
|
||||
import LayerControl from './LayerControl/index.vue';
|
||||
import UseModal from './Modal/index.vue';
|
||||
import InsertShp from './InsertShp/index.vue';
|
||||
import DataListComponent from './DataListComponent/index.vue';
|
||||
import RightShowInfo from './RightShowInfo/index.vue';
|
||||
|
||||
const openModal = ref(false);
|
||||
const insertShpModal = ref(false)
|
||||
const insertShpModal = ref(false);
|
||||
const openRightInfo = ref(false);
|
||||
const changeOpenModal = (value) => {
|
||||
openModal.value = value
|
||||
}
|
||||
openModal.value = value;
|
||||
};
|
||||
const changeOpenInsertShpModal = (value) => {
|
||||
insertShpModal.value = value
|
||||
}
|
||||
insertShpModal.value = value;
|
||||
};
|
||||
|
||||
// map参数类型
|
||||
interface MapboxOptionsInterface {
|
||||
|
|
@ -113,45 +76,43 @@
|
|||
return MapControlConfig[item];
|
||||
})
|
||||
: [];
|
||||
|
||||
|
||||
console.log('nextMapControl::: ', nextMapControl);
|
||||
|
||||
// 定义地图容器
|
||||
let map: Map;
|
||||
let popup:Popup;
|
||||
let clickPoisition:Array<number> = [];
|
||||
let selectFeature:Object = {};
|
||||
let popup: Popup;
|
||||
let clickPoisition: Array<number> = [];
|
||||
let selectFeature: Object = {};
|
||||
let mp: any = null;
|
||||
|
||||
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
|
||||
|
||||
// 定义地图回调emit
|
||||
// 地图加载完成回调
|
||||
const emit = defineEmits(['mapOnLoad', 'mapDraw']);
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
|
||||
map = initMap();
|
||||
map.on('load', () => {
|
||||
//挂载mapbox-gl-utils
|
||||
// U.init(map);
|
||||
// mp = new MP(map);
|
||||
// emit('mapOnLoad', map);
|
||||
|
||||
mp = new MP(map);
|
||||
emit('mapOnLoad', map);
|
||||
|
||||
// 初始化绘图空间
|
||||
// handlerInitDrawTool();
|
||||
|
||||
map.on("click",(e)=>{
|
||||
handlerPreviewFeatureInfo(e);
|
||||
clickPoisition = e.lngLat
|
||||
})
|
||||
|
||||
map.on("draw.selectionchange",(e)=>{
|
||||
handlerCopyToTargetLayer(e);
|
||||
})
|
||||
|
||||
handlerInitDrawTool();
|
||||
|
||||
map.on('click', (e) => {
|
||||
clickPoisition = e.lngLat;
|
||||
});
|
||||
|
||||
map.on('draw.selectionchange', (e) => {
|
||||
handlerCopyToTargetLayer(e);
|
||||
});
|
||||
|
||||
window.handlerCopyFeature = handlerCopyFeature;
|
||||
|
||||
});
|
||||
});
|
||||
// 销毁地图
|
||||
|
|
@ -204,260 +165,130 @@
|
|||
mp.deleteDraw();
|
||||
emit('mapDraw', 'cancel');
|
||||
};
|
||||
|
||||
|
||||
// 初始化绘图空间
|
||||
const handlerInitDrawTool = () => {
|
||||
let drawTool = new MapboxDraw({
|
||||
modes: {
|
||||
...MapboxDraw.modes,
|
||||
draw_point: SnapPointMode,
|
||||
draw_polygon: SnapPolygonMode,
|
||||
draw_line_string: SnapLineMode,
|
||||
direct_select: SnapDirectSelect,
|
||||
},
|
||||
// Styling guides
|
||||
styles: customDrawStyles,
|
||||
userProperties: true,
|
||||
// Config snapping features
|
||||
snap: true,
|
||||
snapOptions: {
|
||||
snapPx: 15, // defaults to 15
|
||||
snapToMidPoints: true, // defaults to false
|
||||
snapVertexPriorityDistance: 0.0025, // defaults to 1.25
|
||||
},
|
||||
guides: false,
|
||||
});
|
||||
|
||||
map.addControl(drawTool, "top-right");
|
||||
}
|
||||
|
||||
let drawTool = new MapboxDraw({
|
||||
modes: {
|
||||
...MapboxDraw.modes,
|
||||
draw_point: SnapPointMode,
|
||||
draw_polygon: SnapPolygonMode,
|
||||
draw_line_string: SnapLineMode,
|
||||
direct_select: SnapDirectSelect,
|
||||
},
|
||||
// Styling guides
|
||||
styles: SnapModeDrawStyles,
|
||||
userProperties: true,
|
||||
// Config snapping features
|
||||
snap: true,
|
||||
snapOptions: {
|
||||
snapPx: 15, // defaults to 15
|
||||
snapToMidPoints: true, // defaults to false
|
||||
snapVertexPriorityDistance: 0.0025, // defaults to 1.25
|
||||
},
|
||||
guides: true,
|
||||
});
|
||||
|
||||
map.addControl(drawTool, 'top-right');
|
||||
};
|
||||
|
||||
// 将图斑复制到指定图层
|
||||
const handlerCopyToTargetLayer = (e) => {
|
||||
|
||||
if(e.features.length>0){
|
||||
if(popup){
|
||||
popup.remove();
|
||||
popup = null;
|
||||
}
|
||||
|
||||
selectFeature = e.features[0];
|
||||
|
||||
popup = new mapboxgl.Popup({
|
||||
closeButton: false,
|
||||
closeOnClick: false,
|
||||
});
|
||||
|
||||
// 设置 popup 的位置和内容
|
||||
popup
|
||||
.setLngLat(clickPoisition)
|
||||
.setHTML(`
|
||||
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`
|
||||
).addTo(map);
|
||||
|
||||
}else{
|
||||
popup.remove();
|
||||
if (e.features.length > 0) {
|
||||
if (popup) {
|
||||
popup.remove();
|
||||
popup = null;
|
||||
}
|
||||
}
|
||||
|
||||
const handlerCopyFeature = () => {
|
||||
console.log("selectFeature",selectFeature);
|
||||
|
||||
selectFeature = e.features[0];
|
||||
|
||||
popup = new mapboxgl.Popup({
|
||||
closeButton: false,
|
||||
closeOnClick: false,
|
||||
});
|
||||
|
||||
// 设置 popup 的位置和内容
|
||||
popup
|
||||
.setLngLat(clickPoisition)
|
||||
.setHTML(
|
||||
`
|
||||
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`,
|
||||
)
|
||||
.addTo(map);
|
||||
} else {
|
||||
popup.remove();
|
||||
createMessage.success("复制成功！")
|
||||
}
|
||||
|
||||
// 添加到图层
|
||||
const handlerAddToLayerList = (layer) => {
|
||||
handlerCheckLayerExist(layer);
|
||||
}
|
||||
|
||||
// 判断图层列表中是否一定添加
|
||||
const handlerCheckLayerExist = (layer) =>{
|
||||
|
||||
for(let i=0;i<layerList.length;i++){
|
||||
if(layerList[i] == layer.id){
|
||||
return;
|
||||
}
|
||||
}
|
||||
layerList.push(layer);
|
||||
}
|
||||
|
||||
|
||||
// 控制图层是否显示
|
||||
const handlerPreviewLayer = (layer) => {
|
||||
handlerLayerControler(layer)
|
||||
}
|
||||
|
||||
// 图层控制中心
|
||||
const handlerLayerControler = (layerInfo)=>{
|
||||
console.log("layerinfoinfo",layerInfo)
|
||||
if(map.getSource(layerInfo.layer.id)){
|
||||
if(layerInfo.checked){
|
||||
map.setLayoutProperty(layerInfo.layer.id, "visibility", "visible");
|
||||
}else{
|
||||
map.setLayoutProperty(layerInfo.layer.id, "visibility", "none");
|
||||
}
|
||||
}else{
|
||||
map.addLayer(layerInfo.layer)
|
||||
map.on("click",layerInfo.layer.id,function(e){
|
||||
handlerPreviewFeatureInfo(e);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 查看列表数据
|
||||
const handlerDataList = () => {
|
||||
|
||||
}
|
||||
|
||||
// 图斑属性查看
|
||||
const handlerPreviewFeatureInfo = (e) => {
|
||||
if(e.features){
|
||||
console.log("EEEEEEE",e.features[0].layer.id,e.features[0].properties);
|
||||
isOpen.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
const handlerClose = (e) => {
|
||||
isOpen.value = e;
|
||||
}
|
||||
|
||||
|
||||
// 图斑定位
|
||||
const handlerLocation = (lngLat) => {
|
||||
map.flyTo({
|
||||
center: lngLat,
|
||||
zoom: 16,
|
||||
speed: 10, // 飞行速度
|
||||
curve: 1, // 飞行曲线
|
||||
easing(t) {
|
||||
// 飞行动画函数
|
||||
return t;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 编辑图斑
|
||||
const handlerEdit = (info) => {
|
||||
initDraw(info);
|
||||
}
|
||||
|
||||
const initDraw = (layerInfo)=> {
|
||||
// 实例化绘图工具
|
||||
|
||||
let drawTool = new MapboxDraw({
|
||||
modes: {
|
||||
...MapboxDraw.modes,
|
||||
draw_point: SnapPointMode,
|
||||
draw_polygon: SnapPolygonMode,
|
||||
draw_line_string: SnapLineMode,
|
||||
direct_select: SnapDirectSelect,
|
||||
},
|
||||
styles: customDrawStyles,
|
||||
userProperties: true,
|
||||
snap: true,
|
||||
snapOptions: {
|
||||
snapPx: 15, // defaults to 15
|
||||
snapToMidPoints: true, // defaults to false
|
||||
snapVertexPriorityDistance: 0.0025, // defaults to 1.25
|
||||
},
|
||||
guides: false,
|
||||
});
|
||||
|
||||
map.addControl(drawTool, "top-right");
|
||||
|
||||
// let geojson:Object = {};
|
||||
// if (layerInfo.dataType == "面") {
|
||||
// geojson.type = "Polygon";
|
||||
// geojson.coordinates = geojson.coordinates[0];
|
||||
// } else if (layerInfo.dataType == "点") {
|
||||
// geojson.type = "Point";
|
||||
// geojson.coordinates = geojson.coordinates;
|
||||
// } else if (layerInfo.dataType == "线") {
|
||||
// geojson.type = "LineString";
|
||||
// geojson.coordinates = geojson.coordinates[0];
|
||||
// }
|
||||
// if (formData.lat && formData.lng) {
|
||||
// formData.lat = geojson.coordinates[1];
|
||||
// formData.lng = geojson.coordinates[0];
|
||||
// }
|
||||
// geojson = {
|
||||
// type: "FeatureCollection",
|
||||
// features: [
|
||||
// {
|
||||
// type: "Feature",
|
||||
// geometry: geojson,
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
// map.setLayoutProperty("pbfLayer", "visibility", "none");
|
||||
// drawTool.set(geojson);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const handlerCopyFeature = () => {
|
||||
console.log(selectFeature);
|
||||
popup.remove();
|
||||
createMessage.success('复制成功！');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.mapboxgl-ctrl-group:not(:empty){
|
||||
box-shadow: none;
|
||||
}
|
||||
.mapboxgl-ctrl-group{
|
||||
background:none!important;
|
||||
}
|
||||
.mapbox-gl-draw_ctrl-draw-btn{
|
||||
width:40px!important;
|
||||
height:40px!important;
|
||||
float:left;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.mapboxgl-ctrl-top-right{
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button+button{
|
||||
border:0px;
|
||||
margin:0px 3px;
|
||||
}
|
||||
|
||||
.mapbox-gl-draw_ctrl-draw-btn:hover{
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.mapbox-gl-draw_polygon{
|
||||
background-image:url(/polygon.png);
|
||||
background-size:100% 100%;
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
.mapbox-gl-draw_point{
|
||||
background-image:url(/point.png);
|
||||
background-size:100% 100%;
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
.mapbox-gl-draw_line{
|
||||
background-image:url(/line.png);
|
||||
background-size:100% 100%;
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
|
||||
.mapbox-gl-draw_trash{
|
||||
background-image:url(/del.png);
|
||||
background-size:100% 100%;
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
|
||||
.mapbox-gl-draw_combine{
|
||||
background-image:url(/combine.png);
|
||||
background-size:100% 100%;
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
|
||||
.mapbox-gl-draw_uncombine{
|
||||
background-image:url(/uncombine.png);
|
||||
background-size:100% 100%;
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.mapboxgl-ctrl-group:not(:empty) {
|
||||
box-shadow: none;
|
||||
}
|
||||
.mapboxgl-ctrl-group {
|
||||
background: none !important;
|
||||
}
|
||||
.mapbox-gl-draw_ctrl-draw-btn {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
float: left;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.mapboxgl-ctrl-top-right {
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button + button {
|
||||
border: 0px;
|
||||
margin: 0px 3px;
|
||||
}
|
||||
|
||||
.mapbox-gl-draw_ctrl-draw-btn:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.mapbox-gl-draw_polygon {
|
||||
background-image: url(/polygon.png);
|
||||
background-size: 100% 100%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.mapbox-gl-draw_point {
|
||||
background-image: url(/point.png);
|
||||
background-size: 100% 100%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.mapbox-gl-draw_line {
|
||||
background-image: url(/line.png);
|
||||
background-size: 100% 100%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.mapbox-gl-draw_trash {
|
||||
background-image: url(/del.png);
|
||||
background-size: 100% 100%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.mapbox-gl-draw_combine {
|
||||
background-image: url(/combine.png);
|
||||
background-size: 100% 100%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.mapbox-gl-draw_uncombine {
|
||||
background-image: url(/uncombine.png);
|
||||
background-size: 100% 100%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
</a-select>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="show-item" v-for="item in 10" :key="item" @click="showInfo">
|
||||
<div class="show-item" v-for="item in dataList" :key="item.id" @click="showInfo(item)">
|
||||
<div class="info">
|
||||
<a-image
|
||||
:width="119"
|
||||
|
|
@ -31,15 +31,20 @@
|
|||
:fallback="errorImage"
|
||||
/>
|
||||
<div class="show-text">
|
||||
<div class="title">名称： {{ "费县行政边界" }}</div>
|
||||
<div class="sub-title">描述： {{ "山东省临沂市费县行政边界" }}</div>
|
||||
<div class="title">名称： {{ item.name }}</div>
|
||||
<div class="sub-title">描述： {{ item.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button">
|
||||
<a-button type="primary" style="background-color:#09B66D;margin-right: 10px">
|
||||
<!-- <a-button type="primary" style="background-color:#09B66D;margin-right: 10px">
|
||||
编辑
|
||||
<<<<<<< HEAD
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handlerAddToLayerList">
|
||||
=======
|
||||
</a-button> -->
|
||||
<a-button type="primary">
|
||||
>>>>>>> 2aed0750b8d9679d2f0bc47b0c629ecf78313c2c
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
|
|
@ -97,12 +102,28 @@ const key = ref('')
|
|||
const current = ref()
|
||||
const pageSize = ref()
|
||||
const jsonData = ref('')
|
||||
const dataList = ref([
|
||||
{
|
||||
id:1,
|
||||
name:'test',
|
||||
description:'test111asdf asdf asdf asdf s',
|
||||
table:'test',
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
name:'TEST',
|
||||
description:'啊士大夫啊手动阀撒地方',
|
||||
table:'a_test',
|
||||
}
|
||||
])
|
||||
const mapOptions = {
|
||||
center: [116.404, 39.905],
|
||||
zoom: 8,
|
||||
};
|
||||
const mapDrawControl: DrawingType[] = [DrawingType.Polygon, DrawingType.Line];
|
||||
const useMap = ref()
|
||||
const mapOnLoad = (map) => {
|
||||
useMap.value = map
|
||||
// map 对象
|
||||
console.log('map::: ', map);
|
||||
// mapU封装对象
|
||||
|
|
@ -122,7 +143,33 @@ const handlerMapDraw = (type: string, data: any) => {
|
|||
console.log('type::: ', type);
|
||||
};
|
||||
|
||||
const showInfo = () => {
|
||||
const showInfo = (item) => {
|
||||
// useMap.value.removeLayer('street-border')
|
||||
// useMap.value.removeSource('wmsSource')
|
||||
if (useMap.value.getLayer('street-border')) useMap.value.removeLayer('street-border')
|
||||
if(useMap.value.getSource('wmsSource')) useMap.value.removeSource('wmsSource')
|
||||
useMap.value.addSource("wmsSource",{
|
||||
type: "raster",
|
||||
tiles: [
|
||||
"http://123.132.248.154:9235" +
|
||||
"/geoserver/ksp/wms?service=WMS&version=1.1.0&request=GetMap&layers=ksp:" +
|
||||
item.table +
|
||||
"&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
|
||||
],
|
||||
})
|
||||
useMap.value.addLayer({
|
||||
id: "street-border",
|
||||
type: "raster",
|
||||
source: "wmsSource",
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
},
|
||||
});
|
||||
console.log(item,useMap.value,'11111')
|
||||
useMap.value.flyTo({
|
||||
center:[117.9838535, 35.4819155],
|
||||
zoom: 12,
|
||||
})
|
||||
console.log(111111)
|
||||
let data = {
|
||||
sources:{
|
||||
|
|
@ -207,6 +254,7 @@ const handlerAddToLayerList = (item) => {
|
|||
max-height: 565px;
|
||||
overflow: auto;
|
||||
margin-bottom: 8px;
|
||||
height: 565px;
|
||||
.show-item{
|
||||
background-color: #fff;
|
||||
height: 119px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<template>
|
||||
<<<<<<< HEAD
|
||||
<a-drawer class="right-show-info" placement="right" :open="isOpen" @close="handlerClose">
|
||||
=======
|
||||
<a-drawer class="right-show-info" placement="right" :open="open" @close="() => (open = false)">
|
||||
>>>>>>> 2aed0750b8d9679d2f0bc47b0c629ecf78313c2c
|
||||
<div class="title">
|
||||
<div class="tag"></div>
|
||||
<div class="title-text">操作</div>
|
||||
|
|
@ -16,6 +20,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<<<<<<< HEAD
|
||||
import { ref,defineProps,defineEmits } from "vue"
|
||||
import './index.scss'
|
||||
|
||||
|
|
@ -33,36 +38,48 @@ const handlerClose = () => {
|
|||
}
|
||||
|
||||
|
||||
=======
|
||||
import { ref, defineProps, watch } from 'vue';
|
||||
import './index.scss';
|
||||
const open = ref(true);
|
||||
const props = defineProps(['openModal']);
|
||||
watch(
|
||||
() => props.openModal,
|
||||
(newValue) => {
|
||||
open.value = newValue;
|
||||
},
|
||||
);
|
||||
>>>>>>> 2aed0750b8d9679d2f0bc47b0c629ecf78313c2c
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.right-show-info {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 356px;
|
||||
height: 100%;
|
||||
background-color: #FFF;
|
||||
.title{
|
||||
height: 61px;
|
||||
padding-left: 26px;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #D9E2F2;
|
||||
.tag{
|
||||
width: 3px;
|
||||
height: 23px;
|
||||
background-color:#0081FF;
|
||||
margin-right: 19px;
|
||||
.right-show-info {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 356px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
.title {
|
||||
height: 61px;
|
||||
padding-left: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #d9e2f2;
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 23px;
|
||||
background-color: #0081ff;
|
||||
margin-right: 19px;
|
||||
}
|
||||
.title-text {
|
||||
color: #141d27;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.title-text{
|
||||
color: #141D27 ;
|
||||
font-size: 24px;
|
||||
.content {
|
||||
height: calc(100% - 61px);
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
height: calc(100% - 61px);
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1 +1,5 @@
|
|||
export const errorImage = "data:image/png;base64,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"
|
||||
export const errorImage = "data:image/png;base64,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"
|
||||
export enum FILETYPE {
|
||||
ZIP = 'application/x-zip-compressed',
|
||||
XLSX = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
}
|
||||
|
|
@ -5,6 +5,35 @@
|
|||
<div class="properties-content">
|
||||
<div class="properties-body" v-if="formConfig.currentItem?.itemProps">
|
||||
<Empty class="hint-box" v-if="!formConfig.currentItem.key" description="未选择控件" />
|
||||
<Form
|
||||
v-else-if="formConfig.currentItem.field == 'MapGeom'"
|
||||
label-align="left"
|
||||
layout="vertical"
|
||||
description="地图控件"
|
||||
>
|
||||
<FormItem label="地图宽度">
|
||||
<a-input-number
|
||||
v-model:value="formConfig.mapSetData.width"
|
||||
placeholder="请输入地图宽度"
|
||||
:min="1"
|
||||
:max="100"
|
||||
defaultValue="100"
|
||||
>
|
||||
<template #addonAfter><PercentageOutlined /></template>
|
||||
</a-input-number>
|
||||
</FormItem>
|
||||
<!-- <FormItem label="选择图层">
|
||||
</FormItem> -->
|
||||
<FormItem label="是否允许添加图斑">
|
||||
<Switch v-model:checked="formConfig.mapSetData.isAllowAddPolygon" />
|
||||
</FormItem>
|
||||
<FormItem label="是否允许编辑图斑">
|
||||
<Switch v-model:checked="formConfig.mapSetData.isAllowEditPolygon" />
|
||||
</FormItem>
|
||||
<FormItem label="是否开启位置跳转">
|
||||
<Switch v-model:checked="formConfig.mapSetData.isEnablePostionJump" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
<Form v-else label-align="left" layout="vertical">
|
||||
<div v-for="item of baseFormItemProps" :key="item.name">
|
||||
<FormItem :label="item.label" v-if="showProps(item.exclude)">
|
||||
|
|
@ -14,10 +43,7 @@
|
|||
v-bind="item.componentProps"
|
||||
:is="item.component"
|
||||
v-model:value="formConfig.currentItem[item.name]"
|
||||
:disabled="
|
||||
formConfig.currentItem.field == 'MapGemo' &&
|
||||
(item.name == 'field' || item.name == 'component' || item.name == 'label')
|
||||
"
|
||||
:key="formConfig.currentItem.component + '===' + formConfig.currentItem.label"
|
||||
/>
|
||||
</FormItem>
|
||||
</div>
|
||||
|
|
@ -78,7 +104,7 @@
|
|||
} from '../../VFormDesign/config/formItemPropsConfig';
|
||||
|
||||
import { Empty, Input, Form, FormItem, Switch, Checkbox, Col, SelectProps } from 'ant-design-vue';
|
||||
|
||||
import { PercentageOutlined } from '@ant-design/icons-vue';
|
||||
import RuleProps from './RuleProps.vue';
|
||||
import { useFormDesignState } from '../../../hooks/useFormDesignState';
|
||||
import { isArray } from 'lodash-es';
|
||||
|
|
@ -94,6 +120,7 @@
|
|||
formConfig.value.currentItem.itemProps.labelCol || {};
|
||||
formConfig.value.currentItem.itemProps.wrapperCol =
|
||||
formConfig.value.currentItem.itemProps.wrapperCol || {};
|
||||
formConfig.value.mapSetData = formConfig.value.mapSetData || {};
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
|
|
|
|||
|
|
@ -185,9 +185,11 @@ export const baseFormItemProps: IBaseFormAttrs[] = [
|
|||
label: '控件-FormItem',
|
||||
component: Select,
|
||||
componentProps: {
|
||||
options: baseComponents
|
||||
.concat(customComponents)
|
||||
.map((item) => ({ value: item.component, label: item.label })),
|
||||
options: baseComponents.concat(customComponents[0]).map((item) => ({
|
||||
value: item.component,
|
||||
label: item.label,
|
||||
key: item.component + '===' + item.label,
|
||||
})),
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<div>
|
||||
<img
|
||||
src="/mars/img/onlineform/map.png"
|
||||
v-if="schema.field == 'MapGemo'"
|
||||
v-if="schema.field == 'MapGeom'"
|
||||
class="v-form-item-wrapper"
|
||||
:defaultValue="schema.defaultValue"
|
||||
v-bind="{ ...cmpProps, ...asyncProps }"
|
||||
|
|
|
|||
|
|
@ -135,10 +135,10 @@ export const customComponents: IVFormComponent[] = [
|
|||
},
|
||||
},
|
||||
{
|
||||
component: 'InputGuid',
|
||||
component: 'MapGeom',
|
||||
label: '地图',
|
||||
icon: 'ant-design:heat-map-outlined',
|
||||
field: 'MapGemo',
|
||||
field: 'MapGeom',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -72,6 +72,37 @@ export interface IVFormComponent {
|
|||
columns?: Array<{ span: number; children: any[] }>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 图层字段
|
||||
*/
|
||||
export interface LayerFields {
|
||||
// GID字段
|
||||
gidField?: string;
|
||||
// 标注字段
|
||||
labelField?: string;
|
||||
// geom字段
|
||||
geomField?: string;
|
||||
// 标注字段options
|
||||
labelFieldOptions?: any[];
|
||||
}
|
||||
/**
|
||||
* 地图属性
|
||||
*/
|
||||
export interface MapComponent {
|
||||
// 地图宽度
|
||||
width?: string;
|
||||
// 选择图层
|
||||
chooseLayer: string;
|
||||
// 图层字段解析
|
||||
layerFields?: LayerFields;
|
||||
// 是否允许添加图斑
|
||||
isAllowAddPolygon?: boolean;
|
||||
// 是否允许编辑图斑
|
||||
isAllowEditPolygon?: boolean;
|
||||
// 是否开启位置跳转
|
||||
isEnablePostionJump?: boolean;
|
||||
}
|
||||
|
||||
declare type namesType = string | string[];
|
||||
|
||||
/**
|
||||
|
|
@ -98,6 +129,7 @@ export interface IFormConfig extends PickAntFormConfig {
|
|||
activeKey?: PropsTabKey;
|
||||
status?: string;
|
||||
defaultValue?: string;
|
||||
mapSetData?: MapComponent;
|
||||
}
|
||||
|
||||
export interface AForm {
|
||||
|
|
|
|||
|
|
@ -100,6 +100,7 @@
|
|||
return {};
|
||||
},
|
||||
},
|
||||
isUpdate: Boolean,
|
||||
});
|
||||
const emit = defineEmits(['closeModel']);
|
||||
const keyValue = ref('');
|
||||
|
|
@ -177,7 +178,7 @@
|
|||
var processId = buildGUID();
|
||||
var querys = {
|
||||
schemeId: designerData.formCurrentNode.formVerison,
|
||||
isUpdate: false,
|
||||
isUpdate: props.isUpdate,
|
||||
pkey: keyValue.value,
|
||||
pkeyValue: processId,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -33,14 +33,20 @@
|
|||
:destroyOnClose="true"
|
||||
>
|
||||
<template #footer> </template>
|
||||
<CreateFlow ref="posRef" :code="flowCode" @closeModel="closeMolder" :flowFormData="flowFormData"/>
|
||||
<CreateFlow
|
||||
ref="posRef"
|
||||
:code="flowCode"
|
||||
@closeModel="closeMolder"
|
||||
:flowFormData="flowFormData"
|
||||
:isUpdate="isUpdate"
|
||||
/>
|
||||
</a-modal>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, nextTick, unref, h } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { BasicTable, useTable, BasicColumn } from '@/components/Table';
|
||||
import { BasicTable, useTable, BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { BasicTree, TreeItem, TreeActionItem, TreeActionType } from '@/components/Tree';
|
||||
import { getFormsDesignData, getFormsPageData, delFormsData } from '@/api/formrender/index';
|
||||
import { getOutKeyList } from '@/api/formdesign/index';
|
||||
|
|
@ -68,6 +74,7 @@
|
|||
const addParamsArr: any = ref([]);
|
||||
const paramsCode = route.query.code;
|
||||
const callColumns: BasicColumn[] = [];
|
||||
const searchFormSchema: FormSchema[] = ref([]);
|
||||
const btnList: any = ref([]);
|
||||
const treeData = ref<TreeItem[]>([]);
|
||||
const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
|
||||
|
|
@ -75,6 +82,106 @@
|
|||
const previewOpen = ref(false); //是否打开流程发起弹窗
|
||||
const flowCode = ref(''); //流程code
|
||||
const flowFormData = ref({}); //编辑时表单的数据
|
||||
const isUpdate = ref(false); //是否是编辑
|
||||
if (paramsCode == '数据统计') {
|
||||
searchFormSchema.value = [
|
||||
{
|
||||
field: 'typeid',
|
||||
component: 'ApiSelect',
|
||||
label: '企业类型',
|
||||
colProps: { span: 6 },
|
||||
componentProps: () => {
|
||||
return {
|
||||
// api: getLoadCaseType, // 接口
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'itemName',
|
||||
valueField: 'itemDetailId',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'deal_username',
|
||||
component: 'Input',
|
||||
label: '面积（m²）',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
{
|
||||
field: '[report_start_time, report_end_time]',
|
||||
component: 'RangePicker',
|
||||
label: '成立时间',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
placeholder: ['开始时间', '结束时间'],
|
||||
},
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
{
|
||||
field: 'is_intact',
|
||||
component: 'Select',
|
||||
label: '是否纳税',
|
||||
colProps: { span: 6 },
|
||||
defaultValue: 1,
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '未判读', value: 0, key: '0' },
|
||||
{ label: '已提交', value: 1, key: '1' },
|
||||
{ label: '已关闭', value: 99, key: '99' },
|
||||
{ label: '全部', value: null, key: '' },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
} else if (paramsCode == '数据审核') {
|
||||
searchFormSchema.value = [
|
||||
{
|
||||
field: 'typeid',
|
||||
component: 'ApiSelect',
|
||||
label: '企业类型',
|
||||
colProps: { span: 6 },
|
||||
componentProps: () => {
|
||||
return {
|
||||
// api: getLoadCaseType, // 接口
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'itemName',
|
||||
valueField: 'itemDetailId',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'deal_username',
|
||||
component: 'Input',
|
||||
label: '面积（m²）',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
{
|
||||
field: '[report_start_time, report_end_time]',
|
||||
component: 'RangePicker',
|
||||
label: '成立时间',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
placeholder: ['开始时间', '结束时间'],
|
||||
},
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
{
|
||||
field: 'is_intact',
|
||||
component: 'Select',
|
||||
label: '是否已审核',
|
||||
colProps: { span: 6 },
|
||||
defaultValue: 1,
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '未判读', value: 0, key: '0' },
|
||||
{ label: '已提交', value: 1, key: '1' },
|
||||
{ label: '已关闭', value: 99, key: '99' },
|
||||
{ label: '全部', value: null, key: '' },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerTable, { reload, setColumns, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||||
title: '表单列表',
|
||||
|
|
@ -83,6 +190,8 @@
|
|||
columns: callColumns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
showAdvancedButton: false,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
rowSelection: {
|
||||
type: 'radio',
|
||||
|
|
@ -192,6 +301,7 @@
|
|||
}
|
||||
switch (status) {
|
||||
case 'Add':
|
||||
console.log(btnList.valueField);
|
||||
btnList.value.forEach((element) => {
|
||||
if (element.prop === 'Add' && element.isWFlow) {
|
||||
flowCode.value = element.wFlowCode;
|
||||
|
|
@ -208,6 +318,7 @@
|
|||
});
|
||||
} else {
|
||||
previewOpen.value = true;
|
||||
isUpdate.value = false;
|
||||
}
|
||||
|
||||
break;
|
||||
|
|
@ -232,6 +343,7 @@
|
|||
} else {
|
||||
previewOpen.value = true;
|
||||
flowFormData.value = rows[0];
|
||||
isUpdate.value = true;
|
||||
}
|
||||
break;
|
||||
case 'Delete':
|
||||
|
|
|
|||
|
|
@ -41,6 +41,8 @@
|
|||
ref="modalFrom_formData"
|
||||
:editData="editData"
|
||||
:isNextSteps="isNextSteps"
|
||||
:isEdit="isEdit"
|
||||
:formVerison_now="formVerison_now"
|
||||
@set-steps-current="setStepsCurrent"
|
||||
/>
|
||||
<ModalDesign
|
||||
|
|
@ -71,12 +73,14 @@
|
|||
// 提交按钮
|
||||
let isSubmitClick = ref(false);
|
||||
// 是否是编辑
|
||||
let formEdit = false;
|
||||
const isEdit = ref(false);
|
||||
// 子组件的暴露属性
|
||||
const modalFrom_formData = ref();
|
||||
const modalDesign_config = ref();
|
||||
// 编辑时发送给子组件的数据
|
||||
const editData = ref();
|
||||
// 当前formVerison
|
||||
const formVerison_now = ref();
|
||||
|
||||
const defaultFormData = {
|
||||
type: 1,
|
||||
|
|
@ -95,8 +99,9 @@
|
|||
};
|
||||
|
||||
const [registerModal, { closeModal }] = useModalInner((data: any) => {
|
||||
formEdit = data.formEdit;
|
||||
if (formEdit) {
|
||||
isEdit.value = data.isEdit;
|
||||
formVerison_now.value = data.formVerison;
|
||||
if (isEdit.value) {
|
||||
editData.value = data;
|
||||
} else {
|
||||
data.record = defaultFormData;
|
||||
|
|
@ -136,7 +141,7 @@
|
|||
// 提交
|
||||
async function submitClick() {
|
||||
const postData = getForm();
|
||||
if (formEdit) {
|
||||
if (isEdit.value) {
|
||||
await Post_UpdateForm(postData);
|
||||
} else {
|
||||
await Post_AddForm(postData);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@
|
|||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { useModal } from '@/components/Modal';
|
||||
import { TreeItem } from '@/components/Tree';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
// 子组件
|
||||
import MenuTree from './FormTree.vue';
|
||||
import FormModal from './FormModal.vue';
|
||||
|
|
@ -108,15 +109,16 @@
|
|||
function handleAddForm() {
|
||||
formModalVisible.value = true;
|
||||
openModal(true, {
|
||||
formEdit: false,
|
||||
isEdit: false,
|
||||
});
|
||||
}
|
||||
// 表单列表-编辑
|
||||
function handleEdit(record: Recordable) {
|
||||
formModalVisible.value = true;
|
||||
openModal(true, {
|
||||
formEdit: true,
|
||||
record: record,
|
||||
isEdit: true,
|
||||
record: cloneDeep(record),
|
||||
formVerison: record.formVerison,
|
||||
});
|
||||
}
|
||||
// 表单列表-删除
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
const notInColumns = [
|
||||
'Divider',
|
||||
'InputGuid',
|
||||
'MapGemo',
|
||||
'MapGeom',
|
||||
'Upload',
|
||||
'slot',
|
||||
'Grid',
|
||||
|
|
@ -188,8 +188,6 @@
|
|||
}
|
||||
});
|
||||
|
||||
console.log(columns);
|
||||
|
||||
const colunmsMap = {};
|
||||
columns.forEach((item) => {
|
||||
colunmsMap[item.field] = item;
|
||||
|
|
|
|||
|
|
@ -94,6 +94,14 @@
|
|||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
formVerison_now: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
// 表单栅格
|
||||
const labelCol = { span: 4 };
|
||||
|
|
@ -139,7 +147,7 @@
|
|||
watch(
|
||||
() => props.editData,
|
||||
() => {
|
||||
if (props.editData.formEdit) {
|
||||
if (props.isEdit) {
|
||||
// 编辑
|
||||
setFormData(props.editData.record);
|
||||
} else {
|
||||
|
|
@ -198,9 +206,9 @@
|
|||
formVerisons.value = formVerisons_temp;
|
||||
|
||||
// 编辑-按照旧的版本
|
||||
if (props.editData.formEdit) {
|
||||
if (props.isEdit) {
|
||||
formData.value.formVerison = formVerisons_temp.find((t) => {
|
||||
return t.value === props.editData.record.formVerison;
|
||||
return t.value === props.formVerison_now;
|
||||
});
|
||||
} else {
|
||||
// 新增-默认最新的版本
|
||||
|
|
@ -225,7 +233,7 @@
|
|||
const result: any = await functionGetForm(query);
|
||||
record.isSys = true;
|
||||
formData.value = record;
|
||||
formData.value.formVerison = result.info.schemeId;
|
||||
formData.value.formVerison = props.formVerison_now;
|
||||
getSchemeRow(result.info);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -110,12 +110,13 @@
|
|||
tableNames: item.componentProps.dataTable,
|
||||
};
|
||||
getOutKeyList(params).then((res: Recordable) => {
|
||||
console.log(res);
|
||||
res[0].db_codecolumnsList.forEach((val) => {
|
||||
if (item.componentProps.fieldName == val.dbColumnName) {
|
||||
item.csType = val.csType;
|
||||
}
|
||||
});
|
||||
if (res.length > 0) {
|
||||
res[0].db_codecolumnsList.forEach((val) => {
|
||||
if (item.componentProps.fieldName == val.dbColumnName) {
|
||||
item.csType = val.csType;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
tabArr.push(item.componentProps.fieldName);
|
||||
|
|
|
|||
|
|
@ -10,14 +10,20 @@
|
|||
:showOkBtn="true"
|
||||
:useWrapper="false"
|
||||
@ok="submit"
|
||||
@visible-change="
|
||||
() => {
|
||||
dbColumnInfo_new.value = [];
|
||||
dbColumnInfo_new_list = [];
|
||||
}
|
||||
"
|
||||
>
|
||||
<a-alert message="() 为主表，字段名可进行修改，数据格式默认为 varchar" type="info" />
|
||||
<a-alert message="主表的字段名可进行修改，数据格式默认为 varchar" type="info" />
|
||||
<a-alert
|
||||
message="* 表名、字段名由数字、字母或下划线组成，且不能以数字，特殊字符串开头。"
|
||||
type="error"
|
||||
/>
|
||||
<a-alert message="* 表名、字段名一旦生成不可修改。" type="error" />
|
||||
<a-alert message="自动建表内的地图组件有专用gemo字段负责，无需配置" type="info" />
|
||||
<a-alert message="自动建表内的地图组件有专用geom字段负责，无需配置" type="info" />
|
||||
<a-divider />
|
||||
<div style="align: center; width: 80%">
|
||||
<a-form ref="formRef" :model="tableInfo" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
|
|
@ -34,7 +40,13 @@
|
|||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'dbColumnName'">
|
||||
<div>
|
||||
<a-input v-model:value="record.dbColumnName" :disabled="!props.isAddVisible" />
|
||||
<a-input
|
||||
v-model:value="record.dbColumnName"
|
||||
:disabled="
|
||||
!props.isAddVisible &&
|
||||
!dbColumnInfo_new_list.includes(record.dbColumnName + record.columnDescription)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'length'">
|
||||
|
|
@ -99,6 +111,7 @@
|
|||
decimalDigits: 0,
|
||||
};
|
||||
let dbColumnInfo_new: any = ref([]);
|
||||
let dbColumnInfo_new_list: any = [];
|
||||
// 数据格式-下拉框
|
||||
let dataTypeOptions = [
|
||||
{ label: '字符串', value: 'varchar' },
|
||||
|
|
@ -109,10 +122,11 @@
|
|||
];
|
||||
// 不需要添加表结构的
|
||||
let componentArray = ['Divider'];
|
||||
let fieldArray = ['MapGemo'];
|
||||
let fieldArray = ['MapGeom'];
|
||||
|
||||
// 异步传参
|
||||
const [automaticModal, { closeModal }] = useModalInner(async (data) => {
|
||||
// 获取db
|
||||
if (!props.isAddVisible) {
|
||||
let query: any = { id: data.saveFormDatas.info.id };
|
||||
let result = await functionGetForm(query);
|
||||
|
|
@ -121,18 +135,19 @@
|
|||
data_json.db = result_json.db;
|
||||
data.saveFormDatas.scheme.scheme = JSON.stringify(data_json);
|
||||
}
|
||||
// 表名和备注
|
||||
let scheme = JSON.parse(data.saveFormDatas.scheme.scheme);
|
||||
tableInfo.value.tableName = scheme.db[0].tableName;
|
||||
tableInfo.value.description = scheme.db[0].description;
|
||||
tableInfo.value.dbCode = data.saveFormDatas.info.DbCode;
|
||||
|
||||
// 制作表格
|
||||
let schemas = scheme.formInfo.schemas;
|
||||
tableInfo.value.dbColumnInfoList = [];
|
||||
schemas.forEach((item: any) => {
|
||||
if (!item.component.includes(componentArray)) {
|
||||
if (item.field.includes(fieldArray)) {
|
||||
if (fieldArray.includes(item.field)) {
|
||||
item.componentProps.dataTable = tableInfo.value.tableName;
|
||||
item.componentProps.fieldName = 'gemo';
|
||||
item.componentProps.fieldName = 'geom';
|
||||
} else if (!item.dbColumnInfo) {
|
||||
// 初始默认值
|
||||
let temp = cloneDeep(dbColumnInfo);
|
||||
|
|
@ -146,6 +161,7 @@
|
|||
|
||||
// 编辑-添加新的行
|
||||
dbColumnInfo_new.value.push(temp);
|
||||
dbColumnInfo_new_list.push(temp.dbColumnName + temp.columnDescription);
|
||||
item.componentProps.dataTable = tableInfo.value.tableName;
|
||||
item.componentProps.fieldName = temp.dbColumnName;
|
||||
} else {
|
||||
|
|
@ -153,6 +169,7 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
// 表格赋值
|
||||
setTableData(tableInfo.value.dbColumnInfoList);
|
||||
data.saveFormDatas.scheme.scheme = JSON.stringify(scheme);
|
||||
saveFormDatas = data.saveFormDatas;
|
||||
|
|
@ -174,6 +191,8 @@
|
|||
await AddColumn(item);
|
||||
});
|
||||
}
|
||||
dbColumnInfo_new.value = [];
|
||||
dbColumnInfo_new_list = [];
|
||||
getFromAndTable();
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue