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

Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

dianlixunjian
刘妍 2024-07-06 17:45:59 +08:00
parent 530cace976 e93920f5fa
commit d2dbbf6722
12 changed files with 586 additions and 463 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/demo/system.ts
View File

@ -68,8 +68,8 @@ enum Api {
DeleteNotice = '/api/DroneCaseinfo/UpdateDelMessage',
UserList = '/api/users/load',
// StatisticalList='/api/DroneCaseinfo/CaseSynthesisCensus',
StatisticalList = '/api/DroneCaseinfo/CaseSynthesisCensusSingle',
StatisticalListExport = '/api/DroneCaseinfo/ExportCaseSynthesisCensusStreet',
StatisticalList = '/api/DroneCaseInfoSingle/CaseSynthesisCensusSingle',
StatisticalListExport = '/api/DroneCaseInfoSingle/ExportCaseSynthesisCensusStreet',
LoadNoticeDetail = '/api/DroneCaseinfo/LoadMessage',
getChildrenTree = '/api/Orgs/LoadChildren',
GetUserRoles = '/api/Roles/UserRoles',

58
src/components/MapboxMaps/MapComponent.vue
View File

@ -283,6 +283,13 @@
});
});
function handlerLayerChange(){
var allLayers = map.getStyle().layers;
allLayers.forEach(function(layer){
map.moveLayer('detailsLayer', layer.id);
map.moveLayer('detailsLayerLine', layer.id);
});
}
// 地图图层控制
const handlerLoadMapLayer = ()=>{
if(switchLayerControler){
@ -336,18 +343,18 @@
let layers = {
name:item.name,
layer: layer,
fixed:true,
zoom:0,
easeToOptions:{},
mutex:false,
mutexIdentity:generateUUID(),
fixed:false,
// zoom:0,
easeToOptions:{},
active:false,
backgroundImage:VITE_GLOB_API_URL_VAR.value+image,
backgroundImageActive:"",
onVisibleChange:(visible:boolean)=>{}
onVisibleChange:(visible:boolean)=>{
handlerLayerChange()
}
}
baseLayers.push(layers)
})
});
configlayers["地图底图"] = {
"collapse": !0,
"defaultCollapsed": !0,
@ -357,7 +364,8 @@
// 图层管理工具
switchLayerControler = new SwitchLayerControl({
name:"图层管理" ,
position:"top-left",
position:"top-left",
showToTop:true,
layerGroups:configlayers
});
map.addControl(switchLayerControler,"top-left");
@ -828,22 +836,22 @@
type:"geojson",
data:geojson
})
map.addLayer(
{
"id": "detailsLayer",
"type": "fill",
"source": "detailsSource",
'layout':{
// map.addLayer(
// {
// "id": "detailsLayer",
// "type": "fill",
// "source": "detailsSource",
// 'layout':{
},
'paint': {
//填充颜色
'fill-color': '#3badc9',
//透明度设置
"fill-opacity": 0.4,
}
}
)
// },
// 'paint': {
// //填充颜色
// 'fill-color': '#fcf003',
// //透明度设置
// "fill-opacity": 0.5,
// }
// }
// )
map.addLayer(
{
"id": "detailsLayerLine",
@ -853,8 +861,8 @@
},
'paint': {
'line-color': '#3badc9',
'line-width': 2
'line-color': '#fcf003',
'line-width': 3
}
}
)

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

@ -25,11 +25,9 @@
<div style="margin-top: 8px">{{ t('component.upload.upload') }}</div>
</div>
</Upload>
<Modal :open="previewOpen" :title="previewTitle" :footer="null" @cancel="handleCancel">
<img alt="" style="width: 100%" :src="previewImage" />
</Modal>
</div>
</template>

186
src/router/routes/modules/dashboard.ts
View File

@ -3,97 +3,99 @@ import type { AppRouteModule } from '@/router/types';
import { LAYOUT } from '@/router/constant';
import { t } from '@/hooks/web/useI18n';
const dashboard: AppRouteModule = {
path: '/dashboard',
name: 'Dashboard',
component: LAYOUT,
redirect: '/dashboard/analysis',
meta: {
orderNo: 10,
icon: 'ion:grid-outline',
title: t('routes.dashboard.dashboard'),
},
children: [
{
path: '/dashboard/analysis',
name: 'Analysis',
component: () => import('@/views/dashboard/analysis/index.vue'),
meta: {
// affix: true,
title: t('routes.dashboard.analysis'),
},
},
{
path: '/dashboard/test',
name: 'test',
component: () => import('@/views/dashboard/test/index.vue'),
meta: {
// affix: true,
title: t('routes.dashboard.test'),
},
},
{
path: '/formCallPage',
name: 'formCallPage',
meta: {
title: '表单调用',
hideMenu: true,
},
beforeEnter: (to: any, from: any, next: Function) => {
to.meta.title = to.query.name;
next();
},
component: () => import('@/views/demo/onlineform/formCall/index.vue'),
},
{
path: 'scheme_preview/:id',
name: 'SchemePreview',
meta: {
hideMenu: true,
title: t('routes.demo.workflow.scheme_preview'),
ignoreKeepAlive: true,
showMenu: false,
currentActiveMenu: '/workflow/scheme',
},
component: () => import('@/views/demo/workflow/scheme/preview.vue'),
},
{
path: 'create_preview/:id',
name: 'CreatePreview',
meta: {
hideMenu: true,
title: t('routes.demo.workflow.create_preview'),
ignoreKeepAlive: true,
showMenu: false,
currentActiveMenu: '/workflow/create',
},
component: () => import('@/views/demo/workflow/h5/create.vue'),
},
{
path: 'task_audit_preview/:id',
name: 'TaskAuditPreview',
meta: {
hideMenu: true,
title: t('routes.demo.workflow.task_audit_preview'),
ignoreKeepAlive: true,
showMenu: false,
currentActiveMenu: '/workflow/task',
},
component: () => import('@/views/demo/workflow/h5/audit.vue'),
},
{
path: 'task_look_preview/:id',
name: 'TaskLookPreview',
meta: {
hideMenu: true,
title: t('routes.demo.workflow.task_look_preview'),
ignoreKeepAlive: true,
showMenu: false,
currentActiveMenu: '/workflow/task',
},
component: () => import('@/views/demo/workflow/h5/look.vue'),
},
],
const dashboard: AppRouteModule =
{
// path: '/dashboard',
// name: 'Dashboard',
// component: LAYOUT,
// redirect: '/dashboard/analysis',
// meta: {
// orderNo: 10,
// icon: 'ion:grid-outline',
// title: t('routes.dashboard.dashboard'),
// },
// children: [
// {
// path: '/dashboard/analysis',
// name: 'Analysis',
// component: () => import('@/views/dashboard/analysis/index.vue'),
// meta: {
// // affix: true,
// title: t('routes.dashboard.analysis'),
// },
// },
// {
// path: '/dashboard/test',
// name: 'test',
// component: () => import('@/views/dashboard/test/index.vue'),
// meta: {
// // affix: true,
// title: t('routes.dashboard.test'),
// },
// },
// {
// path: '/formCallPage',
// name: 'formCallPage',
// meta: {
// title: '表单调用',
// hideMenu: true,
// },
// beforeEnter: (to: any, from: any, next: Function) => {
// to.meta.title = to.query.name;
// next();
// },
// component: () => import('@/views/demo/onlineform/formCall/index.vue'),
// },
// {
// path: 'scheme_preview/:id',
// name: 'SchemePreview',
// meta: {
// hideMenu: true,
// title: t('routes.demo.workflow.scheme_preview'),
// ignoreKeepAlive: true,
// showMenu: false,
// currentActiveMenu: '/workflow/scheme',
// },
// component: () => import('@/views/demo/workflow/scheme/preview.vue'),
// },
// {
// path: 'create_preview/:id',
// name: 'CreatePreview',
// meta: {
// hideMenu: true,
// title: t('routes.demo.workflow.create_preview'),
// ignoreKeepAlive: true,
// showMenu: false,
// currentActiveMenu: '/workflow/create',
// },
// component: () => import('@/views/demo/workflow/h5/create.vue'),
// },
// {
// path: 'task_audit_preview/:id',
// name: 'TaskAuditPreview',
// meta: {
// hideMenu: true,
// title: t('routes.demo.workflow.task_audit_preview'),
// ignoreKeepAlive: true,
// showMenu: false,
// currentActiveMenu: '/workflow/task',
// },
// component: () => import('@/views/demo/workflow/h5/audit.vue'),
// },
// {
// path: 'task_look_preview/:id',
// name: 'TaskLookPreview',
// meta: {
// hideMenu: true,
// title: t('routes.demo.workflow.task_look_preview'),
// ignoreKeepAlive: true,
// showMenu: false,
// currentActiveMenu: '/workflow/task',
// },
// component: () => import('@/views/demo/workflow/h5/look.vue'),
// },
// ],
};
// export default dashboard;
export default dashboard;

2
src/views/demo/bootstraps/auditinfo/AuditProgress/index.vue
View File

@ -34,7 +34,7 @@
class="data-item"
v-for="(item, index) in dataList"
:key="index"
@click="emits('showInfo', item.areaid)"
@click="emits('showInfo', item)"
v-if="dataList.length > 0"
>
<div class="name-div">

4
src/views/demo/bootstraps/auditinfo/index.vue
View File

@ -48,7 +48,7 @@
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
const MapboxComponent = ref();
const mapConfig = ref({ isShowMap: false });
function onMapboxLoad():void {
getConfig({code:"mapsetting"}).then(res=>{
mapConfig.value = JSON.parse(res.codeValue)
@ -127,7 +127,7 @@
}
function changeTask(record) {
if(record?.geomid){
handlerGetMapConfigByFormId(record.processcode);
// handlerGetMapConfigByFormId(record.processcode);
let val = record.geomid
let getGeomPrams = {
TableName: 'drone_shp_data ',

343
src/views/demo/bootstraps/mapconfig/index.vue
View File

@ -197,8 +197,11 @@
getConfig({code:"mapsetting"}).then(res=>{
mapConfig.value = JSON.parse(res.codeValue)
})
/*
*/
// const mapConfig = reactive({
// baseConfig:{
// state:true,
@ -340,345 +343,7 @@
// config
// const config: any = inject('formConfig');
const config = {
"layoutType": 1,
"queryType": 1,
"left": {
"title": "左侧树形",
"colField": "",
"dataType": "1",
"dataIdKey": "",
"dataPIdKey": "",
"dataValueKey": "",
"dataLabelKey": "",
"colNames": [],
"options": [],
"dataCode": ""
},
"table": {
"isPage": true,
"columns": [
{
"key": "_input_39",
"label": "案件编号",
"value": "案件编号",
"width": 120,
"align": "left",
"isMinWidth": false,
"component": "Input"
},
{
"key": "_input_15",
"label": "案件类型",
"value": "案件类型",
"width": 120,
"align": "left",
"isMinWidth": false,
"component": "Input"
},
{
"key": "_input_3",
"label": "县区",
"value": "县区",
"width": 120,
"align": "left",
"isMinWidth": false,
"component": "Input"
},
{
"key": "_input_10",
"label": "乡镇",
"value": "乡镇",
"width": 120,
"align": "left",
"isMinWidth": false,
"component": "Input"
},
{
"key": "_input_11",
"label": "村/社区",
"value": "村/社区",
"width": 120,
"align": "left",
"isMinWidth": false,
"component": "Input"
},
{
"key": "_input_520d1d8068f4492ea8c42ce9bb61b3cf",
"label": "农用地面积",
"value": "农用地面积",
"width": 120,
"align": "left",
"isMinWidth": false,
"component": "Input"
},
{
"key": "_input_16",
"label": "案件描述",
"value": "案件描述",
"width": 120,
"align": "left",
"isMinWidth": false,
"component": "Input"
},
{
"key": "_input_7",
"label": "判读人",
"value": "判读人",
"width": 120,
"align": "left",
"isMinWidth": false,
"component": "Input"
},
{
"key": "_input_44",
"label": "下发时间",
"value": "下发时间",
"width": 120,
"align": "left",
"isMinWidth": false,
"component": "Input"
},
{
"key": "_card_group_155",
"label": "判定结果",
"value": "判定结果",
"width": 120,
"align": "left",
"isMinWidth": false,
"component": "CardGroup"
},
{
"key": "_input_21f2a3b800f8402c8161bb767bce5e75",
"label": "审核人",
"value": "审核人",
"width": 120,
"align": "left",
"isMinWidth": false,
"component": "Input"
}
],
"querys": [
{
"key": "_input_39",
"label": "案件编号",
"type": "Input",
"componentProps": {
"type": "text",
"dataTable": "drone_caseinfo_single",
"fieldName": "case_no"
}
},
{
"key": "_input_15",
"label": "案件类型",
"type": "Input",
"componentProps": {
"type": "text",
"dataTable": "drone_caseinfo_single",
"fieldName": "typename"
}
},
{
"key": "_input_3",
"label": "县区",
"type": "Input",
"componentProps": {
"type": "text",
"dataTable": "drone_caseinfo_single",
"fieldName": "countyname"
}
},
{
"key": "_input_10",
"label": "乡镇",
"type": "Input",
"componentProps": {
"type": "text",
"dataTable": "drone_caseinfo_single",
"fieldName": "streetname"
}
},
{
"key": "_input_11",
"label": "村/社区",
"type": "Input",
"componentProps": {
"type": "text",
"dataTable": "drone_caseinfo_single",
"fieldName": "communityname"
}
}
],
"btns": [
{
"label": "导出",
"id": "Export",
"prop": "Export",
"icon": "ant-design:download-outlined",
"isRowBtn": false,
"class": "primary",
"sort": 2
},
{
"label": "编辑",
"id": "Edit",
"prop": "Edit",
"icon": "ant-design:edit-outlined",
"isRowBtn": true,
"class": "success",
"sort": 3,
"isWFlow": true,
"wFlowCode": "0000001"
},
{
"label": "详情",
"id": "Details",
"prop": "Details",
"icon": "ant-design:align-center-outlined",
"isRowBtn": true,
"class": "default",
"sort": 5
}
],
"maps": {
"chooseLayer": "drone_shp_data",
"isAllowEditPolygon": false,
"isEnablePostionJump": true,
"width": 50,
"baseLayers": [
{
"id": "1e0be368-1276-4d31-8b33-db837ea7b319",
"name": "天地图注记",
"description": "天地图注记",
"type": 0,
"image": "20240703\\2024070317544709510069.png",
"relationTable": null,
"createTime": "2024-07-03 17:54:49",
"createId": "-1",
"srid": null,
"status": 1,
"shpPath": null,
"style": "{\"id\":\"be961f7a-2d92-4c66-8365-dba8904d14dd\",\"type\":\"raster\",\"source\":{\"type\":\"raster\",\"tiles\":[\"https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9\"],\"tileSize\":256},\"layout\":{\"visibility\":\"none\"},\"paint\":{}}",
"vectorType": null,
"attributeTable": null,
"attributeField": null,
"checked": false
},
{
"id": "252d2353-22a3-4a62-8d8c-fb37e8254abd",
"name": "费县高清影像服务",
"description": "费县高清影像服务",
"type": 0,
"image": "20240704\\2024070410225737170146.jpg",
"relationTable": null,
"createTime": "2024-07-04 10:22:59",
"createId": "-1",
"srid": null,
"status": 1,
"shpPath": null,
"style": "{\"id\":\"293577da-a17d-4c6f-bab3-6dd669bad36c\",\"type\":\"raster\",\"source\":{\"type\":\"raster\",\"tiles\":[\"http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE\"],\"tileSize\":256},\"layout\":{\"visibility\":\"visible\"},\"paint\":{}}",
"vectorType": null,
"attributeTable": null,
"attributeField": null,
"checked": false
}
],
"layers": [
{
"name": "违建图斑",
"layers": [
{
"id": "5ce51b19-5db3-47b9-a48f-e0a389294426",
"name": "天空地案件图斑-关联属性",
"description": "天空地案件图斑-关联属性",
"type": 0,
"image": null,
"relationTable": "drone_shp_data",
"createTime": "2024-06-21 15:50:26",
"createId": "-1",
"srid": "EPSG:4326",
"status": 1,
"shpPath": null,
"style": "{\n \"id\": \"5ce51b19-5db3-47b9-a48f-e0a389294426\",\n \"type\": \"line\",\n \"source\": {\n \"type\": \"vector\",\n \"tiles\": [\n \"http://192.168.10.102:9023/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=drone_shp_data&field=\\\"gid\\\",\"\n ],\n \"minzoom\": 1,\n \"maxzoom\": 20\n },\n \"source-layer\": \"drone_shp_data\",\n \"layout\": {\n \"line-join\": \"round\",\n \"line-cap\": \"round\"\n },\n \"paint\": {\n \"line-color\": \"#408eff\",\n \"line-width\": 3\n },\n \"state\": {\n \"attributeField\": \"geomid\",\n \"attributeTable\": \"drone_caseinfo_single\"\n }\n}",
"vectorType": "面",
"attributeTable": "drone_caseinfo_single",
"attributeField": "geomid",
"checked": false
}
]
}
],
"isShowMap": true,
"mode": "3D",
"angle": 0,
"zoom": 13,
"minZoom": 1,
"maxZoom": 18,
"center": "117,39"
},
"sidx": "",
"isDESC": false
},
"btns": [
{
"label": "新增",
"id": "Add",
"prop": "Add",
"icon": "ant-design:plus-outlined",
"isRowBtn": false,
"class": "primary",
"sort": 0
},
{
"label": "导入",
"id": "Import",
"prop": "Import",
"icon": "ant-design:upload-outlined",
"isRowBtn": false,
"class": "success",
"sort": 1
},
{
"label": "导出",
"id": "Export",
"prop": "Export",
"icon": "ant-design:download-outlined",
"isRowBtn": false,
"class": "primary",
"sort": 2
},
{
"label": "编辑",
"id": "Edit",
"prop": "Edit",
"icon": "ant-design:edit-outlined",
"isRowBtn": true,
"class": "success",
"sort": 3,
"isWFlow": true,
"wFlowCode": "0000001"
},
{
"label": "删除",
"id": "Delete",
"prop": "Delete",
"icon": "ant-design:delete-outlined",
"isRowBtn": true,
"class": "error",
"sort": 4
},
{
"label": "详情",
"id": "Details",
"prop": "Details",
"icon": "ant-design:align-center-outlined",
"isRowBtn": true,
"class": "default",
"sort": 5
}
]
};
const config = {}
// const mapConfig = ref(config.table.maps);

82
src/views/demo/layermanagement/components/VisitSource.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<Card title="访问来源" :loading="loading">
<div ref="chartRef" :style="{ width, height }"></div>
</Card>
</template>
<script lang="ts" setup>
import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '@/hooks/web/useECharts';
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setOptions({
tooltip: {
trigger: 'item',
},
legend: {
bottom: '1%',
left: 'center',
},
series: [
{
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '12',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 100;
},
},
],
});
},
{ immediate: true },
);
</script>

142
src/views/demo/layermanagement/index.vue Normal file
View File

@ -0,0 +1,142 @@
<template>
<div class="w-full" style="height:100%;">
<MapboxMaps
:layers="layers"
:location="location"
@handlerDrawComplete="handlerDrawComplete"
ref="MapboxComponent"
/>
</div>
</template>
<script lang="ts" setup>
import MapboxMaps from '@/components/MapboxMaps/MapboxMap.vue';
// import MapboxMaps from '@/components/MapboxMaps/MapComponent.vue';
import {ref,reactive} from 'vue';
import { DrawingType } from '@/enums/mapEnum';
const mapOptions = {
center: [118.556717,35.80391],
zoom: 8,
};
// 展示的图层列表
const layers = 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
}
}
}
])
// 图层定位数据
const location = reactive([118.556717,35.80391])
// 图层绘制类型
const type = ref('add')
// 图斑数据
// const feature ="LINESTRING (118.55483239594203 35.81329409678203, 118.54889167836416 35.806406839795216, 118.55647247134772 35.80285975465173, 118.56157492816281 35.803303140294986)"
// const feature = "POLYGON ((118.54774514802972 35.80786133598188, 118.54515277045988 35.79816597053564, 118.55919536113471 35.80085134034624, 118.56021460056033 35.80462789316549, 118.5595188628206 35.80695604583504, 118.5580066425723 35.80815336506183, 118.54774514802972 35.80786133598188))"
let drawFeatures = [
{
"columnName": "mapgeom",
"value": "MULTIPOLYGON (((118.55901684631719 35.8045110934671, 118.55946931550466 35.80449259041045, 118.55946551324392 35.80463444717644, 118.559024450841 35.80464061486234, 118.55901684631719 35.8045110934671)))"
}, {
"columnName": "mapgeom",
"value": "POLYGON ((118.5591119028685 35.804344565958516, 118.5594579087177 35.804344565958516, 118.55945410645693 35.80424279914757, 118.55910049608158 35.80423663146167, 118.5591119028685 35.804344565958516))"
}, {
"columnName": "mapgeom",
"value": "POLYGON ((118.55922520818172 35.8049069756666, 118.5594647506927 35.80490080800186, 118.55945714616884 35.80477128705068, 118.55921380139475 35.804783622380114, 118.55922520818172 35.8049069756666))"
}
];
// 绘图完成返回geom
const handlerDrawComplete = (geom)=>{
console.log("绘制完成返回的图斑",geom);
}
// 地图组件
const MapboxComponent = ref()
// 添加 或者 编辑图斑
// setTimeout(function(){
// // 添加图斑
// // MapboxComponent.value.handlerDraw()
// // 编辑图斑
// MapboxComponent.value.handlerDraw(drawFeatures)
// },3000)
// setTimeout(function(){
// // MapboxComponent.value.handlerDraw()
// },6000)
// 图斑定位
// setTimeout(function(){
// MapboxComponent.value.handlerLocation([118.556717,35.80391]);
// },6000)
const mapDrawControl: DrawingType[] = [DrawingType.Polygon, DrawingType.Line];
const mapOnLoad = (map) => {
// map 对象
console.log('map::: ', map);
// mapU封装对象
console.log('map.U::: ', map.U);
// 测试地址
const testSource =
'http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
// 添加矢量瓦片图层
map.U.addVector('sourceId', testSource).addLineLayer('layerId', {
source: 'sourceId',
'source-layer': 'lindi', // source-layer对应数据库的表名
});
};
//地图绘制的回调
const handlerMapDraw = (type: string, data: any) => {
console.log('data::: ', data);
console.log('type::: ', type);
};
</script>

2
src/views/demo/onlineform/formCall/index.vue
View File

@ -607,6 +607,8 @@
// showFormModalData.value = toProps;
// openShowFormModal.value = true;
// 根据ids获取图斑
console.log(rows);
console.log("formConfig");
try {
console.log('formConfig', formConfig);
handlerShowGeomtrys(formConfig, rows[0]);

82
src/views/demo/system/layermanagement/components/VisitSource.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<Card title="访问来源" :loading="loading">
<div ref="chartRef" :style="{ width, height }"></div>
</Card>
</template>
<script lang="ts" setup>
import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '@/hooks/web/useECharts';
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setOptions({
tooltip: {
trigger: 'item',
},
legend: {
bottom: '1%',
left: 'center',
},
series: [
{
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '12',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 100;
},
},
],
});
},
{ immediate: true },
);
</script>

142
src/views/demo/system/layermanagement/index.vue Normal file
View File

@ -0,0 +1,142 @@
<template>
<div class="w-full" style="height:100%;">
<MapboxMaps
:layers="layers"
:location="location"
@handlerDrawComplete="handlerDrawComplete"
ref="MapboxComponent"
/>
</div>
</template>
<script lang="ts" setup>
import MapboxMaps from '@/components/MapboxMaps/MapboxMap.vue';
// import MapboxMaps from '@/components/MapboxMaps/MapComponent.vue';
import {ref,reactive} from 'vue';
import { DrawingType } from '@/enums/mapEnum';
const mapOptions = {
center: [118.556717,35.80391],
zoom: 8,
};
// 展示的图层列表
const layers = 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
}
}
}
])
// 图层定位数据
const location = reactive([118.556717,35.80391])
// 图层绘制类型
const type = ref('add')
// 图斑数据
// const feature ="LINESTRING (118.55483239594203 35.81329409678203, 118.54889167836416 35.806406839795216, 118.55647247134772 35.80285975465173, 118.56157492816281 35.803303140294986)"
// const feature = "POLYGON ((118.54774514802972 35.80786133598188, 118.54515277045988 35.79816597053564, 118.55919536113471 35.80085134034624, 118.56021460056033 35.80462789316549, 118.5595188628206 35.80695604583504, 118.5580066425723 35.80815336506183, 118.54774514802972 35.80786133598188))"
let drawFeatures = [
{
"columnName": "mapgeom",
"value": "MULTIPOLYGON (((118.55901684631719 35.8045110934671, 118.55946931550466 35.80449259041045, 118.55946551324392 35.80463444717644, 118.559024450841 35.80464061486234, 118.55901684631719 35.8045110934671)))"
}, {
"columnName": "mapgeom",
"value": "POLYGON ((118.5591119028685 35.804344565958516, 118.5594579087177 35.804344565958516, 118.55945410645693 35.80424279914757, 118.55910049608158 35.80423663146167, 118.5591119028685 35.804344565958516))"
}, {
"columnName": "mapgeom",
"value": "POLYGON ((118.55922520818172 35.8049069756666, 118.5594647506927 35.80490080800186, 118.55945714616884 35.80477128705068, 118.55921380139475 35.804783622380114, 118.55922520818172 35.8049069756666))"
}
];
// 绘图完成返回geom
const handlerDrawComplete = (geom)=>{
console.log("绘制完成返回的图斑",geom);
}
// 地图组件
const MapboxComponent = ref()
// 添加 或者 编辑图斑
// setTimeout(function(){
// // 添加图斑
// // MapboxComponent.value.handlerDraw()
// // 编辑图斑
// MapboxComponent.value.handlerDraw(drawFeatures)
// },3000)
// setTimeout(function(){
// // MapboxComponent.value.handlerDraw()
// },6000)
// 图斑定位
// setTimeout(function(){
// MapboxComponent.value.handlerLocation([118.556717,35.80391]);
// },6000)
const mapDrawControl: DrawingType[] = [DrawingType.Polygon, DrawingType.Line];
const mapOnLoad = (map) => {
// map 对象
console.log('map::: ', map);
// mapU封装对象
console.log('map.U::: ', map.U);
// 测试地址
const testSource =
'http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
// 添加矢量瓦片图层
map.U.addVector('sourceId', testSource).addLineLayer('layerId', {
source: 'sourceId',
'source-layer': 'lindi', // source-layer对应数据库的表名
});
};
//地图绘制的回调
const handlerMapDraw = (type: string, data: any) => {
console.log('data::: ', data);
console.log('type::: ', type);
};
</script>