HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

合并

hc_zhufu
徐景良 2024-06-05 08:29:55 +08:00
parent a98ca3e24c
commit 127da0e0ee
2 changed files with 174 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Upload/src/components/ImageUpload.vue
View File

@ -302,6 +302,7 @@
color:#fff;
line-height: 30px;
text-align: center;
z-index:999;
}
.video-item img{

190
src/views/demo/onlineform/formModule/config/maps.vue
View File

@ -7,20 +7,95 @@
description="图斑控件"
style="margin: 20px auto 0; width: 550px; padding-bottom: 20px"
>
<FormItem label="是否显示">
<Switch v-model:checked="mapSetData.isShowMap" />
</FormItem>
<FormItem label="地图宽度">
<a-input-number
v-model:value="mapSetData.width"
placeholder="请输入地图宽度"
:min="1"
:max="100"
>
<template #addonAfter><PercentageOutlined /></template>
</a-input-number>
</FormItem>
<FormItem label="选择图层">
<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-card>
<a-card title="地图配置" class="card-item">
<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-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>
</template>
</a-table>
</a-card>
<!-- <FormItem label="选择图层">
<a-select
v-model:value="mapSetData.chooseLayer"
:options="shpLayerSourceOptions"
@ -29,6 +104,7 @@
@change="handleChangeDataTable"
/>
</FormItem>
<FormItem label="图层字段解析">
<FormItem label="图层数据表">
<a-input
@ -62,26 +138,98 @@
/>
</FormItem>
</FormItem>
<FormItem label="是否允许添加图斑">
<Switch v-model:checked="mapSetData.isAllowAddPolygon" />
</FormItem>
<FormItem label="是否允许编辑图斑">
<Switch v-model:checked="mapSetData.isAllowEditPolygon" />
</FormItem>
<FormItem label="是否开启位置跳转">
<Switch v-model:checked="mapSetData.isEnablePostionJump" />
</FormItem>
</FormItem> -->
</Form>
</div>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, inject, watch, onMounted } from 'vue';
import { ref, inject, watch, onMounted,reactive } from 'vue';
import { Form, FormItem, Switch } from 'ant-design-vue';
import { PageWrapper } from '@/components/Page';
import { ShpLayerSourceLoadPage, GetTableAndViewColumnList } from '@/api/demo/formScheme';
import { PercentageOutlined } from '@ant-design/icons-vue';
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:[
{
name: '天地图底图图层',
},{
name: '天地图注记图层',
},{
name: '高清影像图层',
}
],
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',
},
])
// config
const config: any = inject('formConfig');
const mapSetData = ref(config.table.maps);
@ -148,6 +296,10 @@
onMounted(() => {
getShpLayerSourceOptions();
});
const removeLayer = (record)=>{
dataSource.splice(parseInt(record.key),1);
}
</script>
<style lang="less" scoped>
@ -156,4 +308,8 @@
height: calc(100vh - 120px);
width: 100%;
}
.card-item{
margin-top:30px!important;
}
</style>