圆形统计、多边形统计

This commit is contained in:
2025-11-03 13:58:04 +08:00
parent 3e5f5fbd65
commit 3195e3ccc7
3 changed files with 84 additions and 85 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,19 +1,26 @@
<template>
<Dialog
v-if="show"
ref="baseDialog"
title="物质统计"
left="180px"
top="100px"
:closeCallback="closeCallBack"
>
<Dialog ref="baseDialog" title="物质统计" left="180px" top="100px" :closeCallback="closeCallBack">
<template #content>
<div id="goodSearchEchart" style="width: 100%; height: 100%"></div>
</template>
<template #footer>
<button>绘制</button>
<div id="goodSearchEchart" style="width: 650px; height: 400px"></div>
</template>
</Dialog>
<!-- <el-dialog
v-model="show"
title="物质统计"
width="500"
draggable
:before-close="closeCallBack"
:modal="false"
:close-on-click-modal="false"
>
<div id="goodSearchEchart" style="width: 300px; height: 200px"></div>
<template #footer>
<div class="dialog-footer">
<el-button>绘制</el-button>
</div>
</template>
</el-dialog> -->
</template>
<script setup lang="ts">
@ -22,32 +29,50 @@ import { inject } from 'vue'
import { nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import Dialog from '@/components/dialog/baseDialog.vue'
import { MaterialApi } from '@/api/material/index'
const baseDialog: any = ref(null)
const eventBus: any = inject('bus')
const shpTotalDict: any = reactive({
shlwz_jzzp: '救灾帐篷',
mb: '棉被',
mymdy: '棉衣、棉大衣',
mjb: '毛巾被',
mt: '毛毯',
dgnsd: '睡袋',
zdc: '折叠床',
jycs: '简易厕所',
xpct: '橡皮船(艇)',
cfz: '冲锋舟',
jsc: '救生船',
jsy: '救生衣',
jsq: '救生圈',
bzd: '编织袋',
md: '麻袋',
csb: '抽水泵',
fdj: '发电机',
yjd: '应急灯',
jzzp: '救灾帐篷',
jzyb: '救灾衣被',
jygj: '救援工具'
const shpTotalDict: any = reactive(
// {
// shlwz_jzzp: '救灾帐篷',
// mb: '棉被',
// mymdy: '棉衣、棉大衣',
// mjb: '毛巾被',
// mt: '毛毯',
// dgnsd: '睡袋',
// zdc: '折叠床',
// jycs: '简易厕所',
// xpct: '橡皮船(艇)',
// cfz: '冲锋舟',
// jsc: '救生船',
// jsy: '救生衣',
// jsq: '救生圈',
// bzd: '编织袋',
// md: '麻袋',
// csb: '抽水泵',
// fdj: '发电机',
// yjd: '应急灯',
// jzzp: '救灾帐篷',
// jzyb: '救灾衣被',
// jygj: '救援工具'
// }
[]
)
//获取物资类型
const getResource = () => {
let formData = new FormData()
formData.append('pageNum', 1)
formData.append('pageSize', 10000)
formData.append('name', '')
MaterialApi.getList(formData).then((res) => {
shpTotalDict = res.data.data.map((item) => {
return item.name
})
})
}
getResource()
var draw: any = reactive([])
@ -56,11 +81,10 @@ eventBus.on('goodsSearchCircleDialog', () => {
// baseDialog.value?.open()
draw = new YJ.Draw.DrawCircle(window.earth)
draw.start((err, positions) => {
console.log('err, positions', err, positions)
if (!err && positions.center.lng) {
show.value = true
// show.value = true
baseDialog.value?.open()
let nodes = booleanOverlaps(positions)
console.log('goodsSearchCircle', nodes)
renderCanvas(nodes)
}
})
@ -69,11 +93,10 @@ eventBus.on('goodsSearchCircleDialog', () => {
const open = () => {
draw = new YJ.Draw.DrawCircle(window.earth)
draw.start((err, positions) => {
console.log('err, positions', err, positions)
if (!err && positions.center.lng) {
show.value = true
// show.value = true
baseDialog.value?.open()
let nodes = booleanOverlaps(positions)
console.log('goodsSearchCircle', nodes)
renderCanvas(nodes)
}
})
@ -95,17 +118,14 @@ function booleanOverlaps(positions1, flag = 'circle') {
let res = []
types.forEach((type) => {
let nodes = treeObj.getNodesByParam('sourceType', type, null)
// console.log("nodes",nodes)
res = res.concat(nodes)
})
return res
}
//绘制的区域
// console.log("[set3Array(positions1)]", [set3Array(positions1)])
// 获取物资处(特定的标注类型)
let allNodes = getNode(['point', 'vr', 'picture', 'Feature'])
console.log('allNodes', allNodes)
let itemInArea: any = [] //区域内的类型符合的标注
for (let i = 0; i < allNodes.length; i++) {
@ -113,7 +133,7 @@ function booleanOverlaps(positions1, flag = 'circle') {
let getAllItemInArea = (lng, lat) => {
if (flag == 'circle') {
let { center, radius } = positions1
let distance = new YJ.Tools().randomString(center, { lng, lat })
let distance = new YJ.Tools().pointDistance(center, { lng, lat })
distance < radius && itemInArea.push(item)
} else {
let polygon1 = (window as any).turf.polygon([set3Array(positions1)])
@ -121,13 +141,11 @@ function booleanOverlaps(positions1, flag = 'circle') {
;(window as any).turf.booleanPointInPolygon(pt, polygon1) && itemInArea.push(item)
}
}
console.log(item, item.sourceType, 'ooooo')
switch (item.sourceType) {
case 'point':
case 'vr':
case 'picture':
let params = JSON.parse(item.params)
console.log('params', params)
let lng = params.position.lng
let lat = params.position.lat
getAllItemInArea(lng, lat)
@ -144,8 +162,6 @@ function booleanOverlaps(positions1, flag = 'circle') {
return itemInArea
}
function renderCanvas(nodes) {
console.log('nodes', nodes)
let x: any = []
let y: any = []
nodes.forEach((item) => {
@ -154,8 +170,10 @@ function renderCanvas(nodes) {
let obj = JSON.parse(JSON.stringify(item.detail.properties))
for (const key in obj) {
let name = key
if (shpTotalDict[key]) {
name = shpTotalDict[key]
// if (shpTotalDict[key]) {
// name = shpTotalDict[key]
if (shpTotalDict.indexOf(key) != -1) {
name = key
// 把相同名称的物资数量相加,名称相同时,累加数据
let index = x.findIndex((item) => item === name)
if (index !== -1) {
@ -170,7 +188,6 @@ function renderCanvas(nodes) {
let params = JSON.parse(item.params)
if (params.attribute && params.attribute.goods) {
let goods = params.attribute.goods.content
console.log('goods', goods)
if (goods.length) {
// $root_home_index.goodSearchDialog = false;
goods.forEach((good) => {
@ -187,9 +204,6 @@ function renderCanvas(nodes) {
}
})
console.log('x,y')
console.log(x)
console.log(y)
let notZeroX: any = []
let notZeroY: any = []
for (let i = 0; i < y.length; i++) {
@ -198,12 +212,10 @@ function renderCanvas(nodes) {
notZeroY.push(y[i])
}
}
console.log(notZeroX)
console.log(notZeroY)
x = notZeroX
y = notZeroY
if (!x.length) show.value = false
if (show.value) {
if (!x.length) baseDialog.value?.close()
if (x.length) {
nextTick(() => {
let option: any = {
grid: {

View File

@ -1,17 +1,7 @@
<template>
<Dialog
v-if="show"
ref="baseDialog"
title="物质统计"
left="180px"
top="100px"
:closeCallback="closeCallBack"
>
<Dialog ref="baseDialog" title="物质统计" left="180px" top="100px" :closeCallback="closeCallBack">
<template #content>
<div id="goodSearchEchart2" style="width: 100%; height: 100%"></div>
</template>
<template #footer>
<button>绘制</button>
<div id="goodSearchEchart2" style="width: 650px; height: 400px"></div>
</template>
</Dialog>
</template>
@ -56,7 +46,8 @@ eventBus.on('goodsSearchPolgonDialog', () => {
draw = new YJ.Draw.DrawPolygon(window.earth)
draw.start((err, params) => {
if (!err && params.length > 2) {
show.value = true
// show.value = true
baseDialog.value?.open()
let nodes = booleanOverlaps(params, 'polygon')
renderCanvas(nodes)
}
@ -67,7 +58,8 @@ const open = () => {
draw = new YJ.Draw.DrawPolygon(window.earth)
draw.start((err, params) => {
if (!err && params.length > 2) {
show.value = true
// show.value = true
baseDialog.value?.open()
let nodes = booleanOverlaps(params, 'polygon')
renderCanvas(nodes)
}
@ -174,9 +166,6 @@ function renderCanvas(nodes) {
}
})
console.log('x,y')
console.log(x)
console.log(y)
let notZeroX: any = []
let notZeroY: any = []
for (let i = 0; i < y.length; i++) {
@ -185,12 +174,10 @@ function renderCanvas(nodes) {
notZeroY.push(y[i])
}
}
console.log(notZeroX)
console.log(notZeroY)
x = notZeroX
y = notZeroY
if (!x.length) show.value = false
if (show.value) {
if (!x.length) baseDialog.value?.close()
if (x.length) {
nextTick(() => {
let option: any = {
grid: {