hc_zhufu
parent
94ad2d3c61
commit
c8c4e33b9b
|
|
@ -115,7 +115,7 @@
|
|||
let arr = props.value?.split(",") as [];
|
||||
fileList.value = [];
|
||||
const { server } = props
|
||||
arr.forEach((item,index)=>{
|
||||
arr?.forEach((item,index)=>{
|
||||
if(item){
|
||||
fileList.value?.push({
|
||||
uid: '-1',
|
||||
|
|
|
|||
|
|
@ -62,7 +62,6 @@
|
|||
const wrapperComp = props.formConfig.layout == 'vertical' ? Col : Row;
|
||||
const { emit } = context;
|
||||
const eFormModel = ref<AForm | null>(null);
|
||||
|
||||
const formModelNew = computed({
|
||||
get: () => props.formModel,
|
||||
set: (value) => emit('update:formModel', value),
|
||||
|
|
|
|||
|
|
@ -236,9 +236,9 @@
|
|||
width: 50,
|
||||
chooseLayer: '',
|
||||
layerFields: {},
|
||||
isAllowAddPolygon: false,
|
||||
isAllowEditPolygon: false,
|
||||
isEnablePostionJump: false,
|
||||
isAllowAddPolygon: true,
|
||||
isAllowEditPolygon: true,
|
||||
isEnablePostionJump: true,
|
||||
};
|
||||
// 选择图层
|
||||
if (shpLayerSourceOptions.value.length == 0) {
|
||||
|
|
|
|||
|
|
@ -35,18 +35,16 @@ export interface LayerFields {
|
|||
* 图斑属性
|
||||
*/
|
||||
export interface MapComponent {
|
||||
// 图斑宽度
|
||||
width?: number;
|
||||
// 选择图层
|
||||
chooseLayer?: any[];
|
||||
// 图层字段解析
|
||||
layerFields: LayerFields;
|
||||
// 是否允许添加图斑
|
||||
isAllowAddPolygon?: boolean;
|
||||
// 是否允许编辑图斑
|
||||
isAllowEditPolygon?: boolean;
|
||||
// 是否开启位置跳转
|
||||
isEnablePostionJump?: boolean;
|
||||
minZoom?: number;
|
||||
maxZoom?: number;
|
||||
zoom?: number;
|
||||
isShowMap?: boolean;
|
||||
layers?: any[];
|
||||
baseLayers?: any[];
|
||||
mode?:string;
|
||||
angle?:number;
|
||||
center?:string,
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -228,6 +228,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
//表单填写数据
|
||||
async function ModalSureClick() {
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -5,134 +5,132 @@
|
|||
label-align="left"
|
||||
layout="vertical"
|
||||
description="图斑控件"
|
||||
style="margin: 20px auto 0; width: 550px; padding-bottom: 20px"
|
||||
size="small"
|
||||
style="padding:0px 15px"
|
||||
>
|
||||
|
||||
<a-card title="基本设置" class="card-item">
|
||||
<FormItem label="是否显示">
|
||||
<Switch v-model:checked="mapConfig.baseConfig.state" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="地图宽度">
|
||||
<a-input-number
|
||||
v-model:value="mapConfig.baseConfig.width"
|
||||
placeholder="请输入地图宽度"
|
||||
:min="1"
|
||||
:max="100"
|
||||
>
|
||||
<template #addonAfter><PercentageOutlined /></template>
|
||||
</a-input-number>
|
||||
</FormItem>
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="12" >
|
||||
<a-card title="基本设置" class="card-item">
|
||||
<FormItem label="是否显示">
|
||||
<Switch v-model:checked="mapConfig.isShowMap" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="地图宽度" >
|
||||
<a-input-number
|
||||
v-model:value="mapConfig.width"
|
||||
placeholder="请输入地图宽度"
|
||||
:min="1"
|
||||
:max="100"
|
||||
>
|
||||
<template #addonAfter><PercentageOutlined /></template>
|
||||
</a-input-number>
|
||||
</FormItem>
|
||||
|
||||
</a-card>
|
||||
<FormItem label=" "></FormItem>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
||||
<a-card title="地图配置" class="card-item">
|
||||
<a-col :span="12" >
|
||||
<a-card title="地图配置" class="card-item" >
|
||||
<FormItem label="地图模式">
|
||||
<a-radio-group v-model:value="mapConfig.mode">
|
||||
<a-radio :value="'2D'">二维地图</a-radio>
|
||||
<a-radio :value="'3D'">三维地图</a-radio>
|
||||
</a-radio-group>
|
||||
</FormItem>
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="12" >
|
||||
<FormItem label="倾斜角度">
|
||||
<a-input-number v-model:value="mapConfig.angle" :min="0"
|
||||
:max="90" />
|
||||
</FormItem>
|
||||
</a-col>
|
||||
<a-col :span="12" >
|
||||
<FormItem label="中心位置">
|
||||
<a-input v-model:value="mapConfig.center" />
|
||||
</FormItem>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="8" >
|
||||
<FormItem label="初始缩放级别">
|
||||
<a-input-number v-model:value="mapConfig.zoom" :min="1"
|
||||
:max="18" />
|
||||
</FormItem>
|
||||
</a-col>
|
||||
<a-col :span="8" >
|
||||
<FormItem label="最小缩放级别">
|
||||
<a-input-number v-model:value="mapConfig.minZoom" :min="1"
|
||||
:max="18" />
|
||||
</FormItem>
|
||||
</a-col>
|
||||
<a-col :span="8" >
|
||||
<FormItem label="最大缩放级别">
|
||||
<a-input-number v-model:value="mapConfig.maxZoom" :min="1"
|
||||
:max="18" />
|
||||
</FormItem>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<FormItem label="地图模式">
|
||||
<a-radio-group v-model:checked="mapConfig.viewerConfig.mode">
|
||||
<a-radio value="2D">二维地图</a-radio>
|
||||
<a-radio value="3D">三维地图</a-radio>
|
||||
</a-radio-group>
|
||||
</FormItem>
|
||||
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="12" >
|
||||
<FormItem label="倾斜角度">
|
||||
<a-input-number v-model="mapConfig.viewerConfig.angle" />
|
||||
</FormItem>
|
||||
</a-col>
|
||||
<a-col :span="12" >
|
||||
<FormItem label="中心位置">
|
||||
<a-input v-model="mapConfig.viewerConfig.center" />
|
||||
</FormItem>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-card title="底图设置" class="card-item" >
|
||||
<a-checkbox v-for="(item,index) in baseLayers" :key="index">{{item.name}}</a-checkbox>
|
||||
</a-card>
|
||||
|
||||
<a-row :gutter="12">
|
||||
<a-col :span="8" >
|
||||
<FormItem label="初始缩放级别">
|
||||
<a-input-number v-model="mapConfig.viewerConfig.zoom" />
|
||||
</FormItem>
|
||||
</a-col>
|
||||
<a-col :span="8" >
|
||||
<FormItem label="最小缩放级别">
|
||||
<a-input-number v-model="mapConfig.viewerConfig.minZoom" />
|
||||
</FormItem>
|
||||
</a-col>
|
||||
<a-col :span="8" >
|
||||
<FormItem label="最大缩放级别">
|
||||
<a-input-number v-model="mapConfig.viewerConfig.maxZoom" />
|
||||
</FormItem>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-card>
|
||||
|
||||
<a-card title="底图设置" class="card-item">
|
||||
|
||||
<a-checkbox v-for="(item,index) in mapConfig.baseLayers" :key="index">{{item.name}}</a-checkbox>
|
||||
|
||||
</a-card>
|
||||
|
||||
<a-card title="图层设置" class="card-item">
|
||||
|
||||
<template #extra><PlusOutlined/></template>
|
||||
|
||||
<a-table :dataSource="mapConfig.layers" :columns="columns" :pagination="false" >
|
||||
<template #bodyCell="{ column, record }">
|
||||
|
||||
<template v-if="column.key === 'show'">
|
||||
<a-switch v-model:checked="record.show" checked-children="显示" un-checked-children="隐藏" />
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'operation'">
|
||||
<span>
|
||||
<DeleteOutlined @click="removeLayer(record)" />
|
||||
</span>
|
||||
</template>
|
||||
<a-card title="图层设置" class="card-item" >
|
||||
<template #extra><PlusOutlined/></template>
|
||||
<a-table :dataSource="mapConfig.layers" :columns="columns" :pagination="false" >
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'show'">
|
||||
<a-switch v-model:checked="record.show" checked-children="显示" un-checked-children="隐藏" />
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
<template v-if="column.key === 'operation'">
|
||||
<span>
|
||||
<DeleteOutlined @click="removeLayer(record)" />
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
|
||||
<!-- <FormItem label="选择图层">
|
||||
<a-select
|
||||
v-model:value="mapSetData.chooseLayer"
|
||||
:options="shpLayerSourceOptions"
|
||||
size="middle"
|
||||
placeholder="请选择图层"
|
||||
@change="handleChangeDataTable"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<a-card title="基本设置" class="card-item" >
|
||||
|
||||
<FormItem label="图层字段解析">
|
||||
<FormItem label="图层数据表">
|
||||
<a-input
|
||||
v-model:value="mapSetData.layerFields.dataTable"
|
||||
v-model:value="mapConfig.layerFields.dataTable"
|
||||
placeholder="请输入图层数据表"
|
||||
disabled="false"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="GID字段">
|
||||
<a-select
|
||||
v-model:value="mapSetData.layerFields.gidField"
|
||||
:options="mapSetData.layerFields.labelFieldOptions"
|
||||
v-model:value="mapConfig.layerFields.gidField"
|
||||
:options="mapConfig.layerFields.labelFieldOptions"
|
||||
size="middle"
|
||||
placeholder="请选择GID字段"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="名称字段标注">
|
||||
<a-select
|
||||
v-model:value="mapSetData.layerFields.labelField"
|
||||
:options="mapSetData.layerFields.labelFieldOptions"
|
||||
v-model:value="mapConfig.layerFields.labelField"
|
||||
:options="mapConfig.layerFields.labelFieldOptions"
|
||||
size="middle"
|
||||
placeholder="请选择名称字段标注"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="Geom字段">
|
||||
<a-select
|
||||
v-model:value="mapSetData.layerFields.geomField"
|
||||
:options="mapSetData.layerFields.labelFieldOptions"
|
||||
v-model:value="mapConfig.layerFields.geomField"
|
||||
:options="mapConfig.layerFields.labelFieldOptions"
|
||||
size="middle"
|
||||
placeholder="请选择Geom字段"
|
||||
/>
|
||||
|
|
@ -140,16 +138,19 @@
|
|||
</FormItem>
|
||||
|
||||
<FormItem label="是否允许添加图斑">
|
||||
<Switch v-model:checked="mapSetData.isAllowAddPolygon" />
|
||||
<Switch v-model:checked="mapConfig.isAllowAddPolygon" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="是否允许编辑图斑">
|
||||
<Switch v-model:checked="mapSetData.isAllowEditPolygon" />
|
||||
<Switch v-model:checked="mapConfig.isAllowEditPolygon" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="是否开启位置跳转">
|
||||
<Switch v-model:checked="mapSetData.isEnablePostionJump" />
|
||||
</FormItem> -->
|
||||
<Switch v-model:checked="mapConfig.isEnablePostionJump" />
|
||||
</FormItem>
|
||||
</a-card>
|
||||
|
||||
|
||||
</Form>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
|
|
@ -161,145 +162,118 @@
|
|||
import { ShpLayerSourceLoadPage, GetTableAndViewColumnList } from '@/api/demo/formScheme';
|
||||
import { DeleteOutlined, PercentageOutlined ,PlusOutlined} from '@ant-design/icons-vue';
|
||||
|
||||
const mapConfig = reactive({
|
||||
baseConfig:{
|
||||
state:true,
|
||||
width:50
|
||||
},
|
||||
viewerConfig:{
|
||||
mode:"2D",
|
||||
angle:90,
|
||||
center:null,
|
||||
zoom:12,
|
||||
minZoom:3,
|
||||
maxZoom:18
|
||||
},
|
||||
baseLayers:[
|
||||
// const mapConfig = reactive({
|
||||
// baseConfig:{
|
||||
// state:true,
|
||||
// width:50
|
||||
// },
|
||||
// viewerConfig:{
|
||||
// mode:"2D",
|
||||
// angle:90,
|
||||
// center:null,
|
||||
// zoom:12,
|
||||
// minZoom:3,
|
||||
// maxZoom:18
|
||||
// },
|
||||
// baseLayers:[
|
||||
// {
|
||||
// name: '天地图底图图层',
|
||||
// show:false,
|
||||
// layer:{
|
||||
|
||||
// }
|
||||
// },{
|
||||
// name: '天地图注记图层',
|
||||
// show:false,
|
||||
// layer:{
|
||||
|
||||
// }
|
||||
// },{
|
||||
// name: '高清影像图层',
|
||||
// show:false,
|
||||
// layer:{
|
||||
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// layers:[
|
||||
// {
|
||||
// name: '违法建设图斑图层',
|
||||
// show:true,
|
||||
// layer:{
|
||||
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// name: '乱战耕地图斑图层',
|
||||
// show:false,
|
||||
// layer:{
|
||||
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
|
||||
// })
|
||||
|
||||
const baseLayers = reactive([
|
||||
{
|
||||
name: '天地图底图图层',
|
||||
show:false,
|
||||
layer:{
|
||||
|
||||
}
|
||||
},{
|
||||
name: '天地图注记图层',
|
||||
show:false,
|
||||
layer:{
|
||||
|
||||
}
|
||||
},{
|
||||
name: '高清影像图层',
|
||||
show:false,
|
||||
layer:{
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
layers:[
|
||||
{
|
||||
name: '违法建设图斑图层',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
name: '乱战耕地图斑图层',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
}
|
||||
]
|
||||
|
||||
})
|
||||
|
||||
const dataSource = reactive([
|
||||
{
|
||||
key: '1',
|
||||
name: '违法建设图斑图层',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '乱战耕地图斑图层',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
])
|
||||
])
|
||||
|
||||
const columns = reactive([
|
||||
{
|
||||
title: '图层名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '默认',
|
||||
dataIndex: 'show',
|
||||
key: 'show',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
key: 'operation',
|
||||
},
|
||||
])
|
||||
{
|
||||
title: '图层名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '默认',
|
||||
dataIndex: 'show',
|
||||
key: 'show',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
key: 'operation',
|
||||
},
|
||||
])
|
||||
|
||||
// config
|
||||
const config: any = inject('formConfig');
|
||||
const mapSetData = ref(config.table.maps);
|
||||
const mapConfig = ref(config.table.maps);
|
||||
console.log("mapConfig2",mapConfig.value);
|
||||
watch(
|
||||
() => config.table.maps,
|
||||
() => {
|
||||
mapSetData.value = config.table.maps;
|
||||
mapConfig.value = config.table.maps;
|
||||
},
|
||||
);
|
||||
const shpLayerSourceOptions: any = ref([]);
|
||||
|
||||
// 选择图层
|
||||
async function getShpLayerSourceOptions() {
|
||||
let options: any = await ShpLayerSourceLoadPage();
|
||||
shpLayerSourceOptions.value = [];
|
||||
options.items.forEach((e) => {
|
||||
shpLayerSourceOptions.value.push({ label: e.name, value: e.relationTable, type: e.type });
|
||||
});
|
||||
}
|
||||
|
||||
function handleChangeDataTable(table) {
|
||||
mapSetData.value.layerFields.dataTable = table;
|
||||
shpLayerSourceOptions.value.forEach((item) => {
|
||||
if (item.value == table) {
|
||||
mapSetData.value.layerFields.type = item.type;
|
||||
}
|
||||
});
|
||||
if (table) {
|
||||
getShpLayerSource(table);
|
||||
}
|
||||
}
|
||||
async function getShpLayerSource(table) {
|
||||
let querys: any = {
|
||||
dbCode: 'hcsystemdb',
|
||||
tableName: table,
|
||||
};
|
||||
const obj: any = await GetTableAndViewColumnList(querys);
|
||||
let labelFieldOptions: any = [];
|
||||
if (obj.length > 0) {
|
||||
obj.forEach((e) => {
|
||||
labelFieldOptions.push({ label: e.column_name, value: e.column_name });
|
||||
});
|
||||
// GID字段/名称字段标注/Geom字段 下拉选项
|
||||
mapSetData.value.layerFields.labelFieldOptions = labelFieldOptions;
|
||||
// GID字段
|
||||
mapSetData.value.layerFields.gidField = obj[0].column_name;
|
||||
// Geom字段
|
||||
mapSetData.value.layerFields.geomField = obj[1].column_name;
|
||||
// 名称字段标注
|
||||
mapSetData.value.layerFields.labelField = obj[2].column_name;
|
||||
} else {
|
||||
// GID字段/名称字段标注/Geom字段 下拉选项
|
||||
mapSetData.value.layerFields.labelFieldOptions = [];
|
||||
// GID字段
|
||||
mapSetData.value.layerFields.gidField = '';
|
||||
// Geom字段
|
||||
mapSetData.value.layerFields.geomField = '';
|
||||
// 名称字段标注
|
||||
mapSetData.value.layerFields.labelField = '';
|
||||
|
||||
config.table.maps = mapSetData.value;
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
getShpLayerSourceOptions();
|
||||
|
||||
});
|
||||
|
||||
const removeLayer = (record)=>{
|
||||
dataSource.splice(parseInt(record.key),1);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue