yiqiuyang/kxfx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增导出功能

Browse Source
This commit is contained in:
yiqiuyang
2025-10-10 18:32:13 +08:00
parent ae2f9d94e1
commit 31f8c849b8
11 changed files with 1209 additions and 1260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

593
src/views/residentAnalysis/index.vue
View File

@ -3,13 +3,8 @@
<div class="header">
<div class="images flex a-c" v-for="item in imagesList" :key="item.id">
<img :src="item.src" @click="drawRectangle" />
<el-button
class="form-btn"
type="primary"
size="mini"
@click="analyzeAverageSlope"
>确定</el-button
>
<el-button class="form-btn" type="primary" size="mini" @click="analyzeAverageSlope">确定</el-button>
<el-button class="form-btn right" type="primary" size="mini" @click="dialogVisible = true">导出</el-button>
</div>
</div>
@ -20,21 +15,14 @@
<div class="control-panel">
<div class="title">范围</div>
<el-form-item label="左上角">
<el-input v-model="form.leftTop" @blur="updateArea"></el-input>
<el-input v-model="form.leftTop" @blur="updateArea" placeholder="请输入经纬度，以 ',' 隔开'"></el-input>
</el-form-item>
<el-form-item label="右下角">
<el-input v-model="form.rightBottom" @blur="updateArea">
<el-input v-model="form.rightBottom" @blur="updateArea" placeholder="请输入经纬度，以 ',' 隔开'">
</el-input>
</el-form-item>
<input
type="file"
ref="fileInput"
@change="handleFileUpload"
style="display: none"
/>
<div class="importJson flex j-c a-c" @click="triggerFileUpload">
导入json文件
</div>
<input type="file" ref="fileInput" @change="handleFileUpload" style="display: none" />
<div class="importJson flex j-c a-c" @click="triggerFileUpload">导入json文件</div>
</div>
<!-- 权重 -->
@ -72,71 +60,232 @@
</div>
</el-form>
</div>
<!-- 地图 -->
<div class="center" id="cesiumContainer"></div>
<div
class="right flex column"
v-loading="showLoading"
element-loading-text="数据加载中"
>
<div class="right flex column" v-loading="showLoading" element-loading-text="数据加载中">
<!-- 路点 -->
<div class="table-title" v-if="roadPointList.length > 0">
道路附属点
</div>
<vxe-table
class="item"
:data="roadPointList"
v-if="roadPointList.length > 0"
>
<div class="table-title" v-if="roadPointList.length > 0">道路附属点</div>
<vxe-table class="item" :data="roadPointList" v-if="roadPointList.length > 0">
<vxe-column type="seq" width="70"></vxe-column>
<vxe-column field="编码" title="编码"></vxe-column>
<vxe-column field="名称" title="名称"></vxe-column>
<vxe-column field="A" title="A"></vxe-column>
<vxe-column field="A" title="种类"></vxe-column>
</vxe-table>
<!-- 路线 -->
<div class="table-title" v-if="roadLineList.length > 0">道路附属线</div>
<vxe-table
class="item"
:data="roadLineList"
v-if="roadLineList.length > 0"
>
<vxe-table class="item" :data="roadLineList" v-if="roadLineList.length > 0">
<vxe-column type="seq" width="70"></vxe-column>
<vxe-column field="编码" title="编码"></vxe-column>
<vxe-column field="名称" title="名称"></vxe-column>
<vxe-column field="A" title="A"></vxe-column>
<vxe-column field="A" title="种类"></vxe-column>
</vxe-table>
<!-- 水点 -->
<div class="table-title" v-if="waterPointList.length > 0">
水系附属点
</div>
<vxe-table
class="item"
:data="waterPointList"
v-if="waterPointList.length > 0"
>
<div class="table-title" v-if="waterPointList.length > 0">水系附属点</div>
<vxe-table class="item" :data="waterPointList" v-if="waterPointList.length > 0">
<vxe-column type="seq" width="70"></vxe-column>
<vxe-column field="编码" title="编码"></vxe-column>
<vxe-column field="名称" title="名称"></vxe-column>
<vxe-column field="A" title="A"></vxe-column>
<vxe-column field="类型" title="类型"></vxe-column>
<vxe-column field="A" title="种类"></vxe-column>
</vxe-table>
<!-- 水线 -->
<div class="table-title" v-if="waterLineList.length > 0">
水系附属线
</div>
<vxe-table
class="item"
:data="waterLineList"
v-if="waterLineList.length > 0"
>
<div class="table-title" v-if="waterLineList.length > 0">水系附属线</div>
<vxe-table class="item" :data="waterLineList" v-if="waterLineList.length > 0">
<vxe-column type="seq" width="70"></vxe-column>
<vxe-column field="编码" title="编码"></vxe-column>
<vxe-column field="名称" title="名称"></vxe-column>
<vxe-column field="A" title="A"></vxe-column>
<vxe-column field="A" title="种类"></vxe-column>
</vxe-table>
</div>
<!-- 导出界面 -->
<el-dialog :visible.sync="dialogVisible" title="导出目录" width="90%" top="10vh">
<div class="road flex j-s a-c">
<!-- 道路附属点 -->
<div class="point">
<div class="table-title">
<span>道路附属点</span>
<el-button type="primary" size="mini" @click="handleAdd('roadPointList')">新增</el-button>
</div>
<vxe-table
class="item"
ref="roadPointListREF"
:data="exportList.roadPointList"
align="center"
:height="tableHeight"
:row-config="{isCurrent: true, isHover: true, keyField: 'seq'}"
>
<vxe-column type="seq" width="70"></vxe-column>
<vxe-column field="编码" title="编码">
<template v-slot="{row}">
<el-input v-if="row.editing" v-model="row.编码" size="mini"></el-input>
<span v-else>{{ row.编码 }}</span>
</template>
</vxe-column>
<vxe-column field="名称" title="名称">
<template v-slot="{row}">
<el-input v-if="row.editing" v-model="row.名称" size="mini"></el-input>
<span v-else>{{ row.名称 }}</span>
</template>
</vxe-column>
<vxe-column field="A" title="种类">
<template v-slot="{row}">
<el-input v-if="row.editing" v-model="row.A" size="mini"></el-input>
<span v-else>{{ row.A }}</span>
</template>
</vxe-column>
<vxe-column title="操作" width="100">
<template v-slot="{row}">
<el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
<el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
<el-button type="text" size="mini" @click="handleDelete('roadPointList', row)">删除</el-button>
</template>
</vxe-column>
</vxe-table>
</div>
<!-- 道路附属线 -->
<div class="line">
<div class="table-title">
<span>道路附属线</span>
<el-button type="primary" size="mini" @click="handleAdd('roadLineList')">新增</el-button>
</div>
<vxe-table
class="item"
ref="roadLineListREF"
:data="exportList.roadLineList"
align="center"
:height="tableHeight"
:row-config="{isCurrent: true, isHover: true, keyField: 'seq'}"
>
<vxe-column type="seq" width="70"></vxe-column>
<vxe-column field="编码" title="编码">
<template v-slot="{row}">
<el-input v-if="row.editing" v-model="row.编码" size="mini"></el-input>
<span v-else>{{ row.编码 }}</span>
</template>
</vxe-column>
<vxe-column field="名称" title="名称">
<template v-slot="{row}">
<el-input v-if="row.editing" v-model="row.名称" size="mini"></el-input>
<span v-else>{{ row.名称 }}</span>
</template>
</vxe-column>
<vxe-column field="A" title="种类">
<template v-slot="{row}">
<el-input v-if="row.editing" v-model="row.A" size="mini"></el-input>
<span v-else>{{ row.A }}</span>
</template>
</vxe-column>
<vxe-column title="操作" width="100">
<template v-slot="{row}">
<el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
<el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
<el-button type="text" size="mini" @click="handleDelete('roadLineList', row)">删除</el-button>
</template>
</vxe-column>
</vxe-table>
</div>
</div>
<div class="water flex j-s a-c">
<!-- 水系附属点 -->
<div class="point">
<div class="table-title">
<span>水系附属点</span>
<el-button type="primary" size="mini" @click="handleAdd('waterPointList')">新增</el-button>
</div>
<vxe-table
class="item"
ref="waterPointListREF"
:data="exportList.waterPointList"
align="center"
:height="tableHeight"
:row-config="{isCurrent: true, isHover: true, keyField: 'seq'}"
>
<vxe-column type="seq" width="70"></vxe-column>
<vxe-column field="编码" title="编码">
<template v-slot="{row}">
<el-input v-if="row.editing" v-model="row.编码" size="mini"></el-input>
<span v-else>{{ row.编码 }}</span>
</template>
</vxe-column>
<vxe-column field="名称" title="名称">
<template v-slot="{row}">
<el-input v-if="row.editing" v-model="row.名称" size="mini"></el-input>
<span v-else>{{ row.名称 }}</span>
</template>
</vxe-column>
<vxe-column field="A" title="种类">
<template v-slot="{row}">
<el-input v-if="row.editing" v-model="row.A" size="mini"></el-input>
<span v-else>{{ row.A }}</span>
</template>
</vxe-column>
<vxe-column title="操作" width="100">
<template v-slot="{row}">
<el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
<el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
<el-button type="text" size="mini" @click="handleDelete('waterPointList', row)">删除</el-button>
</template>
</vxe-column>
</vxe-table>
</div>
<!-- 水系附属线 -->
<div class="line">
<div class="table-title">
<span>水系附属线</span>
<el-button type="primary" size="mini" @click="handleAdd('waterLineList')">新增</el-button>
</div>
<vxe-table
class="item"
ref="waterLineListREF"
:data="exportList.waterLineList"
align="center"
:height="tableHeight"
:row-config="{isCurrent: true, isHover: true, keyField: 'seq'}"
>
<vxe-column type="seq" width="70"></vxe-column>
<vxe-column field="编码" title="编码">
<template v-slot="{row}">
<el-input v-if="row.editing" v-model="row.编码" size="mini"></el-input>
<span v-else>{{ row.编码 }}</span>
</template>
</vxe-column>
<vxe-column field="名称" title="名称">
<template v-slot="{row}">
<el-input v-if="row.editing" v-model="row.名称" size="mini"></el-input>
<span v-else>{{ row.名称 }}</span>
</template>
</vxe-column>
<vxe-column field="A" title="种类">
<template v-slot="{row}">
<el-input v-if="row.editing" v-model="row.A" size="mini"></el-input>
<span v-else>{{ row.A }}</span>
</template>
</vxe-column>
<vxe-column title="操作" width="100">
<template v-slot="{row}">
<el-button v-if="!row.editing" type="text" size="mini" @click="handleEdit(row)">编辑</el-button>
<el-button v-else type="text" size="mini" @click="handleSave(row)">保存</el-button>
<el-button type="text" size="mini" @click="handleDelete('waterLineList', row)">删除</el-button>
</template>
</vxe-column>
</vxe-table>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogVisible = false">取消</el-button>
<el-button type="primary" size="mini" @click="exportJSON">导出</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
@ -145,6 +294,8 @@
import {getStorage} from '@/utils/localStorage'
import plantJson from '/public/config/plant.json'
import soilJson from '/public/config/soil.json'
import axios from 'axios'
import iniParser from 'ini-parser'
export default {
name: '',
@ -192,6 +343,16 @@ export default {
validBlocks: [],
colorList: [],
roadWaterLock: false,
dialogVisible: false,
rectTotalScore: '0.31',
exportList: {
roadPointList: [],
roadLineList: [],
waterPointList: [],
waterLineList: [],
},
tableHeight: 280,
}
},
created() {
@ -270,10 +431,7 @@ export default {
return
}
// 清除现有矩形
if (
this.polygon &&
(uploadedJson?.leftTop || uploadedJson?.rightBottom)
) {
if (this.polygon && (uploadedJson?.leftTop || uploadedJson?.rightBottom)) {
window.graphicLayer.removeGraphic(this.polygon)
}
@ -293,17 +451,13 @@ export default {
// 初始化地图
initMarsMap() {
window.viewer = new window.mars3d.Map(
'cesiumContainer',
this.viewerOptions
)
window.viewer = new window.mars3d.Map('cesiumContainer', this.viewerOptions)
window.graphicLayer = new window.mars3d.layer.GraphicLayer()
window.viewer.addLayer(window.graphicLayer)
window.shortestPathLayer = new window.mars3d.layer.GraphicLayer()
window.viewer.addLayer(window.shortestPathLayer)
// this.drawInitialArea()
this.loadGeoJson()
},
@ -313,26 +467,10 @@ export default {
people: this.createLayerConfig('./config/people.geojson', '#ff0000'),
plant: this.createLayerConfig('./config/plant.geojson', '#00ff00'),
soil: this.createLayerConfig('./config/soil.geojson', '#0000ff'),
roadPoint: this.createLayerConfig(
'./config/road_points.geojson',
'#ff0ff0',
'point'
),
roadLine: this.createLayerConfig(
'./config/road_lines.geojson',
'#ff0ff0',
'polyline'
),
waterPoint: this.createLayerConfig(
'./config/water_points.geojson',
'#ff0ff0',
'point'
),
waterLine: this.createLayerConfig(
'./config/water_lines.geojson',
'#ff0ff0',
'polyline'
),
roadPoint: this.createLayerConfig('./config/road_points.geojson', '#ff0ff0', 'point'),
roadLine: this.createLayerConfig('./config/road_lines.geojson', '#ff0ff0', 'polyline'),
waterPoint: this.createLayerConfig('./config/water_points.geojson', '#ff0ff0', 'point'),
waterLine: this.createLayerConfig('./config/water_lines.geojson', '#ff0ff0', 'polyline'),
}
// 默认只加载一个，其他按需加载
@ -418,9 +556,7 @@ export default {
return
}
this.layers[layerName].layer = new mars3d.layer.GeoJsonLayer(
this.layers[layerName].config
)
this.layers[layerName].layer = new mars3d.layer.GeoJsonLayer(this.layers[layerName].config)
isLoad ? await window.viewer.addLayer(this.layers[layerName].layer) : null
},
@ -463,17 +599,12 @@ export default {
let minDist = Infinity
let inside = false
const polygons = geoJSONLayer
.getGraphics()
.filter((g) => g.type === 'polygon')
const polygons = geoJSONLayer.getGraphics().filter((g) => g.type === 'polygon')
polygons.forEach((g) => {
const lnglats = g.positions.map((p) => {
const carto = Cesium.Cartographic.fromCartesian(p)
return [
Cesium.Math.toDegrees(carto.longitude),
Cesium.Math.toDegrees(carto.latitude),
]
return [Cesium.Math.toDegrees(carto.longitude), Cesium.Math.toDegrees(carto.latitude)]
})
lnglats.push(lnglats[0])
const poly = turf.polygon([lnglats])
@ -486,21 +617,17 @@ export default {
const polyLine = turf.lineString(lnglats)
rectLine.geometry.coordinates.forEach((pt) => {
const closest = turf.nearestPointOnLine(polyLine, pt)
const d = turf.distance(pt, closest, {units: 'kilometers'}) * 1000
const d = turf.distance(pt, closest, {units: 'metres'})
minDist = Math.min(minDist, d)
})
polyLine.geometry.coordinates.forEach((pt) => {
const closest = turf.nearestPointOnLine(rectLine, pt)
const d = turf.distance(pt, closest, {units: 'kilometers'}) * 1000
const d = turf.distance(pt, closest, {units: 'metres'})
minDist = Math.min(minDist, d)
})
})
console.log(
'矩形 → polygonP 边界最短距离（米）',
inside ? -1 : false,
minDist
)
console.log('矩形 → polygonP 边界最短距离（米）', inside, minDist)
// 5. 面内直接返回 -1
return inside ? -1 : minDist
@ -530,10 +657,7 @@ export default {
if (g.type === 'polygon') {
const coords = g.positions.map((p) => {
const carto = Cesium.Cartographic.fromCartesian(p)
return [
Cesium.Math.toDegrees(carto.longitude),
Cesium.Math.toDegrees(carto.latitude),
]
return [Cesium.Math.toDegrees(carto.longitude), Cesium.Math.toDegrees(carto.latitude)]
})
coords.push(coords[0]) // 闭合
features.push({
@ -546,10 +670,7 @@ export default {
else if (g.type === 'polyline') {
const coords = g.positions.map((p) => {
const carto = Cesium.Cartographic.fromCartesian(p)
return [
Cesium.Math.toDegrees(carto.longitude),
Cesium.Math.toDegrees(carto.latitude),
]
return [Cesium.Math.toDegrees(carto.longitude), Cesium.Math.toDegrees(carto.latitude)]
})
features.push({
type: 'Feature',
@ -560,10 +681,7 @@ export default {
// 处理点要素
else if (g.type === 'point') {
const carto = Cesium.Cartographic.fromCartesian(g.position)
const coord = [
Cesium.Math.toDegrees(carto.longitude),
Cesium.Math.toDegrees(carto.latitude),
]
const coord = [Cesium.Math.toDegrees(carto.longitude), Cesium.Math.toDegrees(carto.latitude)]
features.push({
type: 'Feature',
geometry: {type: 'Point', coordinates: coord},
@ -629,13 +747,11 @@ export default {
},
// 绘制矩形区域
drawInitialArea(val) {
drawInitialArea() {
// 如果多边形尚未创建，则创建它
if (!this.polygon) {
this.polygon = new mars3d.graphic.PolygonEntity({
positions: this.positions.map((p) =>
Cesium.Cartesian3.fromDegrees(p[0], p[1], 0)
),
positions: this.positions.map((p) => Cesium.Cartesian3.fromDegrees(p[0], p[1], 0)),
style: {
color: '#ffff00',
opacity: 0.3,
@ -654,13 +770,11 @@ export default {
},
})
console.log(' this.polygon===>', this.polygon)
window.graphicLayer.addGraphic(this.polygon)
this.isInitialized = true
} else {
// 如果多边形已存在，则更新它的位置
this.updateArea(val)
this.updateArea()
}
},
@ -669,12 +783,15 @@ export default {
this.isHand = false
return
}
if (!this.polygon) return
if (!this.form.leftTop || !this.form.rightBottom) return
if (this.form.leftTop && this.form.rightBottom && !this.polygon) {
this.drawInitialArea()
}
// 将经纬度转换为笛卡尔坐标
const cartesianPositions = this.positions.map((p) =>
Cesium.Cartesian3.fromDegrees(p[0], p[1], 0)
)
const cartesianPositions = this.positions.map((p) => Cesium.Cartesian3.fromDegrees(p[0], p[1], 0))
// 更新多边形位置
this.polygon.positions = cartesianPositions
@ -778,48 +895,26 @@ export default {
]
const slope = slopes[index]
const distance = this.calcMinDistance(
rectPos,
this.layers['people'].layer
)
const distance = this.calcMinDistance(rectPos, this.layers['people'].layer)
if (
slope < this.form.maxSlope &&
distance > this.form.minPeopleDis
) {
console.log('111===>', slope, distance)
const soilGeoId = this.getIntersectId(
rectPos,
this.layers['soil'].layer
)
const plantGeoId = this.getIntersectId(
rectPos,
this.layers['plant'].layer
)
if (slope < this.form.maxSlope && distance > this.form.minPeopleDis) {
const soilGeoId = this.getIntersectId(rectPos, this.layers['soil'].layer)
const plantGeoId = this.getIntersectId(rectPos, this.layers['plant'].layer)
const plantScore = plantGeoId
? this.getScore(
this.layers['plant'].layer.getGraphicById(plantGeoId)
.options.attr['编码'],
this.layers['plant'].layer.getGraphicById(plantGeoId).options.attr['编码'],
this.plantJson
)
: 0
const soilScore = soilGeoId
? this.getScore(
this.layers['soil'].layer.getGraphicById(soilGeoId).options
.attr['编码'],
this.soilJson
)
? this.getScore(this.layers['soil'].layer.getGraphicById(soilGeoId).options.attr['编码'], this.soilJson)
: 1
/* 2. 合并成一条记录 */
this.validBlocks.push({
id: `rect_${index + 1}`,
positions: rectPos,
center: [
(rectInfo.minLng + rectInfo.maxLng) / 2,
(rectInfo.minLat + rectInfo.maxLat) / 2,
],
center: [(rectInfo.minLng + rectInfo.maxLng) / 2, (rectInfo.minLat + rectInfo.maxLat) / 2],
slope,
distance,
plantScore,
@ -844,7 +939,10 @@ export default {
/* 1. 计算总分（保持原逻辑） */
const list = this.calcTotalScore(this.validBlocks)
const len = list.length
if (!len) return
if (!len) {
this.$message.success('计算结束，暂无符合条件的区域！')
return
}
/* 2. 一次性构造 options 数组，不 new Graphic */
const rectOpts = []
@ -907,9 +1005,7 @@ export default {
}
/* 3. 批量创建 Graphic（底层一次性构造，避免反复 new） */
this.rectangles = rectOpts.map(
(opt) => new mars3d.graphic.PolygonEntity(opt)
)
this.rectangles = rectOpts.map((opt) => new mars3d.graphic.PolygonEntity(opt))
this.labels = labelOpts.map((opt) => new mars3d.graphic.LabelEntity(opt))
/* 4. 一次性添加到图层（mars3d 支持数组）*/
@ -934,7 +1030,7 @@ export default {
this.selectRectangle(graphic)
}
}
this.$message.success('计算成功！')
this.$message.success(`计算成功！共有${len}个符合条件的区域`)
},
/**
@ -979,10 +1075,7 @@ export default {
const item = data[i]
// 计算slope分数
const slopeScore =
slopeRange > 0
? ((item.slope - minSlope) / slopeRange) * slopePer
: 0.5 * slopePer // 处理slope范围很小的情况
const slopeScore = slopeRange > 0 ? ((item.slope - minSlope) / slopeRange) * slopePer : 0.5 * slopePer // 处理slope范围很小的情况
// 计算distance分数
const peopleScore = isDistanceRangeSmall
@ -993,12 +1086,7 @@ export default {
const plantScore = (item.plantScore || 0) * plantPer
const soilScore = item.soilScore * soilPer
const totalScore = (
slopeScore +
peopleScore +
plantScore +
soilScore
).toFixed(2)
const totalScore = (slopeScore + peopleScore + plantScore + soilScore).toFixed(2)
results[i] = {
...item,
@ -1024,9 +1112,7 @@ export default {
if (!targetCode) {
return 0
}
const hit = list.find(
(item) => Array.isArray(item.code) && item.code.includes(targetCode)
)
const hit = list.find((item) => Array.isArray(item.code) && item.code.includes(targetCode))
if (hit) return hit.score
const fallback = list.find((item) => item.code === null)
@ -1051,67 +1137,102 @@ export default {
this.waterPointList = []
this.waterLineList = []
this.exportList.roadPointList = []
this.exportList.roadLineList = []
this.exportList.waterPointList = []
this.exportList.waterLineList = []
if (!this.roadWaterLock) {
this.loadLayers(
['roadPoint', 'roadLine', 'waterPoint', 'waterLine'],
(results) => {
this.roadWaterLock = true
this.getRoadWaterIds(rect)
}
)
this.loadLayers(['roadPoint', 'roadLine', 'waterPoint', 'waterLine'], (results) => {
this.roadWaterLock = true
this.getRoadWaterIds(rect)
})
} else {
this.getRoadWaterIds(rect)
}
this.rectTotalScore = rect.attr.originalData.totalScore
},
getRoadWaterIds(rect) {
const positions = rect.points.map((d) => [d.lng, d.lat])
let roadPointId = this.getIntersectId(
positions,
this.layers['roadPoint'].layer
)
let roadLineId = this.getIntersectId(
positions,
this.layers['roadLine'].layer
)
let waterPointId = this.getIntersectId(
positions,
this.layers['waterPoint'].layer
)
let waterLineId = this.getIntersectId(
positions,
this.layers['waterLine'].layer
)
let roadPointId = this.getIntersectId(positions, this.layers['roadPoint'].layer)
let roadLineId = this.getIntersectId(positions, this.layers['roadLine'].layer)
let waterPointId = this.getIntersectId(positions, this.layers['waterPoint'].layer)
let waterLineId = this.getIntersectId(positions, this.layers['waterLine'].layer)
if (roadPointId) {
this.roadPointList.push(
this.layers['roadPoint'].layer.getGraphicById(roadPointId).options
.attr
)
this.roadPointList.push(this.layers['roadPoint'].layer.getGraphicById(roadPointId).options.attr)
this.exportList.roadPointList.push(this.layers['roadPoint'].layer.getGraphicById(roadPointId).options.attr)
} else if (roadLineId) {
this.roadLineList.push(
this.layers['roadLine'].layer.getGraphicById(roadLineId).options.attr
)
this.roadLineList.push(this.layers['roadLine'].layer.getGraphicById(roadLineId).options.attr)
this.exportList.roadLineList.push(this.layers['roadLine'].layer.getGraphicById(roadLineId).options.attr)
} else if (waterPointId) {
this.waterPointList.push(
this.layers['waterPoint'].layer.getGraphicById(waterPointId).options
.attr
)
this.waterPointList.push(this.layers['waterPoint'].layer.getGraphicById(waterPointId).options.attr)
this.exportList.waterPointList.push(this.layers['waterPoint'].layer.getGraphicById(waterPointId).options.attr)
} else if (waterLineId) {
this.waterLineList.push(
this.layers['waterLine'].layer.getGraphicById(waterLineId).options
.attr
)
this.waterLineList.push(this.layers['waterLine'].layer.getGraphicById(waterLineId).options.attr)
this.exportList.waterLineList.push(this.layers['waterLine'].layer.getGraphicById(waterLineId).options.attr)
}
},
console.log(
'roadPointId===>',
this.roadPointList,
this.roadLineList,
this.waterPointList,
this.waterLineList
)
// 导出为 JSON文件
exportJSON() {
try {
let file = {
id: 1,
[this.rectTotalScore]: this.exportList,
}
fetch('./config.ini')
.then((r) => r.text())
.then((res) => {
const parsedData = iniParser.parse(res)
this.$alert(parsedData)
axios
.post(`http://${parsedData.http.address}:${parsedData.http.port}/api/area`, JSON.stringify(file), {
headers: {'Content-Type': 'application/json'},
})
.then((res) => {
this.$alert(res)
// this.$message.success(res)
// this.$message.success('导出成功!')
})
.catch((error) => {
this.$message.error(error)
})
})
} catch (error) {
console.error(error)
}
},
// 新增
handleAdd(type) {
const newRow = {
seq: this.exportList[type].length + 1,
编码: '',
名称: '',
A: '',
editing: true,
}
this.exportList[type].push(newRow)
setTimeout(() => {
this.$refs[`${type}REF`].refreshScroll()
this.$refs[`${type}REF`].scrollToRow(newRow, 'id')
}, 50)
},
handleEdit(row) {
this.$set(row, 'editing', true)
},
handleSave(row) {
this.$set(row, 'editing', false)
},
handleDelete(type, row) {
const index = this.exportList[type].findIndex((item) => item.id === row.id)
if (index !== -1) {
this.exportList[type].splice(index, 1)
}
},
// 清除所有矩形
@ -1172,6 +1293,10 @@ export default {
transform: translateY(-50%);
right: 32px;
}
.right {
position: absolute;
right: 30px;
}
}
.content {
@ -1223,14 +1348,32 @@ export default {
.item {
margin-bottom: 10px;
}
.table-title {
font-size: 16px;
font-family: 'Pingfang';
font-weight: bold;
letter-spacing: 0.1em;
margin-bottom: 10px;
}
}
}
.table-title {
font-size: 16px;
font-family: 'Pingfang';
font-weight: bold;
letter-spacing: 0.1em;
margin-bottom: 10px;
span {
margin-right: 10px;
}
}
.export {
position: relative;
top: -20px;
}
.road,
.water {
width: 100%;
.point,
.line {
width: 49%;
}
}
.road {
margin-bottom: 20px;
}
</style>