fix：巡检信息修改地图
This commit is contained in:
parent
0a090e70d8
commit
151f95b06c
@ -62,9 +62,9 @@ export default {
|
||||
props: {
|
||||
// 接收传过来得中心点
|
||||
centerPoint: {
|
||||
type: Object,
|
||||
type: Array,
|
||||
default: () => {
|
||||
return { lat: 123.30297096718999, lon: 41.87942945541742 };
|
||||
return [123.30297096718999, 41.87942945541742];
|
||||
},
|
||||
},
|
||||
// 接受传过来得地图层级
|
||||
@ -90,7 +90,11 @@ export default {
|
||||
// 地图控件位置
|
||||
controlStyle: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
default: () => {
|
||||
return {
|
||||
top: 0,
|
||||
};
|
||||
},
|
||||
},
|
||||
// 用于区分同一个页面多个地图的id
|
||||
mapId: {
|
||||
@ -168,7 +172,10 @@ export default {
|
||||
// this.changeImg("cva_c");
|
||||
},
|
||||
methods: {
|
||||
/* 初始化openlayer地图 */
|
||||
/**
|
||||
* @description: 初始化openlayer地图
|
||||
* @return {*}
|
||||
*/
|
||||
initMap() {
|
||||
// const tianditu_vec_c = new TileLayer({
|
||||
// className: "baseLayerClass",
|
||||
@ -207,7 +214,7 @@ export default {
|
||||
rotate: false,
|
||||
}),
|
||||
view: new View({
|
||||
center: [this.centerPoint.lat, this.centerPoint.lon], //中心点经纬度
|
||||
center: this.centerPoint, //中心点经纬度
|
||||
zoom: this.zoom, //图层缩放大小
|
||||
projection: "EPSG:4326",
|
||||
minZoom: 7,
|
||||
@ -307,11 +314,18 @@ export default {
|
||||
this.instance.set("overlay-list", []);
|
||||
},
|
||||
|
||||
/* 删除图层选择对象 */
|
||||
/**
|
||||
* @description: 删除图层选择对象
|
||||
* @return {*}
|
||||
*/
|
||||
removeSelectClick() {
|
||||
this.selectSingClick.getFeatures().clear();
|
||||
},
|
||||
/* 绘制地图 */
|
||||
|
||||
/**
|
||||
* @description: 绘制地图
|
||||
* @return {*}
|
||||
*/
|
||||
drawMap() {
|
||||
if (this.drawMarkers.length < 1) {
|
||||
const map = this.instance.get("map");
|
||||
@ -360,7 +374,12 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 监听绘制完成的事件 */
|
||||
|
||||
/**
|
||||
* @description: 监听绘制完成的事件
|
||||
* @param {*} event
|
||||
* @return {*}
|
||||
*/
|
||||
drawend(event) {
|
||||
const feature = event.feature;
|
||||
const geometry = feature.getGeometry();
|
||||
@ -379,7 +398,12 @@ export default {
|
||||
}
|
||||
this.$emit("endEoordinate", this.drawMarkers);
|
||||
},
|
||||
/* 检测交叉点位方法 */
|
||||
|
||||
/**
|
||||
* @description: 检测交叉点位方法
|
||||
* @param {*} coordinates
|
||||
* @return {*}
|
||||
*/
|
||||
isSelfCrossing(coordinates) {
|
||||
for (let i = 0; i < coordinates.length - 1; i++) {
|
||||
const segment1 = [coordinates[i], coordinates[i + 1]];
|
||||
@ -393,7 +417,13 @@ export default {
|
||||
}
|
||||
return false;
|
||||
},
|
||||
/* 检测交叉线段 */
|
||||
|
||||
/**
|
||||
* @description: 检测交叉线段
|
||||
* @param {*} segment1
|
||||
* @param {*} segment2
|
||||
* @return {*}
|
||||
*/
|
||||
doSegmentsCross(segment1, segment2) {
|
||||
const [p1, p2] = segment1;
|
||||
const [q1, q2] = segment2;
|
||||
@ -421,7 +451,11 @@ export default {
|
||||
// 判断是否相交并且不是共线
|
||||
return t > 0 && t < 1 && u > 0 && u < 1;
|
||||
},
|
||||
/* 删除绘制功能 */
|
||||
|
||||
/**
|
||||
* @description: 删除绘制功能
|
||||
* @return {*}
|
||||
*/
|
||||
deletedraw() {
|
||||
const map = this.instance.get("map");
|
||||
map.removeInteraction(this.draw);
|
||||
@ -434,7 +468,12 @@ export default {
|
||||
this.drawMarkers = [];
|
||||
this.$emit("endEoordinate", []);
|
||||
},
|
||||
/* 修改地图底图样式 */
|
||||
|
||||
/**
|
||||
* @description: 修改地图底图样式
|
||||
* @param {*} item
|
||||
* @return {*}
|
||||
*/
|
||||
changeImg(item) {
|
||||
if (this.mapType !== item) {
|
||||
this.mapType = item;
|
||||
@ -487,6 +526,7 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 切换当前位置
|
||||
* @param {Array} position 中心点位置
|
||||
@ -517,7 +557,10 @@ export default {
|
||||
map.removeLayer(layer);
|
||||
},
|
||||
|
||||
/* 根据类型清除地图线段图层 */
|
||||
/**
|
||||
* @description: 根据类型清除地图线段图层
|
||||
* @return {*}
|
||||
*/
|
||||
clearMapLine() {
|
||||
const map = this.instance.get("map");
|
||||
const [layer] = map
|
||||
|
||||
@ -368,6 +368,7 @@
|
||||
destroy-on-close
|
||||
@close="cancel"
|
||||
>
|
||||
<template v-if="dialogVisible">
|
||||
<el-form
|
||||
class="addForm"
|
||||
ref="defectForm"
|
||||
@ -454,7 +455,10 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="结束桩号" prop="stakeEnd">
|
||||
<el-input v-model="form.stakeEnd" placeholder="请输入结束桩号" />
|
||||
<el-input
|
||||
v-model="form.stakeEnd"
|
||||
placeholder="请输入结束桩号"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -495,7 +499,11 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="病害位置">
|
||||
<div ref="addMap" id="addMap" class="no-hand-cursor"></div>
|
||||
<fssm-map
|
||||
ref="diseaseMap"
|
||||
@map-click="getMapClick"
|
||||
class="no-hand-cursor"
|
||||
></fssm-map>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传病害图片">
|
||||
<el-upload
|
||||
@ -530,6 +538,7 @@
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 查看病害详细信息对话框 -->
|
||||
@ -541,6 +550,7 @@
|
||||
destroy-on-close
|
||||
@close="cancel"
|
||||
>
|
||||
<template v-if="openViewDialog">
|
||||
<div>
|
||||
<!-- 上半部分 -->
|
||||
<div style="display: flex; flex-direction: column; height: 50%">
|
||||
@ -564,7 +574,9 @@
|
||||
<!-- 左侧病害信息 -->
|
||||
<div style="width: 50%; padding: 10px">
|
||||
<p>
|
||||
上报日期：{{ new Date(viewForm.createdTime).toLocaleString() }}
|
||||
上报日期：{{
|
||||
new Date(viewForm.createdTime).toLocaleString()
|
||||
}}
|
||||
</p>
|
||||
<p>路段名称：{{ viewForm.segmentName }}</p>
|
||||
<!-- <p>病害坐标：{{ viewForm.geometry.coordinates }}</p> -->
|
||||
@ -589,12 +601,17 @@
|
||||
</div>
|
||||
|
||||
<!-- 下半部分显示天地图 -->
|
||||
<div id="viewMap" style="height: 300px; margin-top: 20px"></div>
|
||||
<!-- <div id="viewMap" style="height: 300px; margin-top: 20px"></div> -->
|
||||
<fssm-map
|
||||
style="height: 300px; margin-top: 20px"
|
||||
ref="diseaseMap"
|
||||
></fssm-map>
|
||||
</div>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeDialog">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 合并病害弹窗 -->
|
||||
@ -660,11 +677,19 @@ import {
|
||||
} from "@/api/xj/disease";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import MergeDialog from "./components/merge-dialog.vue";
|
||||
|
||||
// 地图
|
||||
import FssmMap from "@/components/map/fssm-map.vue";
|
||||
import { Feature } from "ol";
|
||||
import { Point } from "ol/geom";
|
||||
import { Style } from "ol/style";
|
||||
import * as styleExports from "ol/style";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import { Vector as VectorSource } from "ol/source";
|
||||
export default {
|
||||
name: "Defect",
|
||||
components: {
|
||||
MergeDialog,
|
||||
FssmMap,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -803,8 +828,6 @@ export default {
|
||||
viewOptions: [],
|
||||
// 查看弹窗信息绑定
|
||||
viewForm: {},
|
||||
// 地图中心点
|
||||
centerPoint: [123.30297096718999, 41.87942945541742],
|
||||
// 查看图片大图弹窗显隐控制
|
||||
showImageDialog: false,
|
||||
// 查看大图片路径
|
||||
@ -826,7 +849,11 @@ export default {
|
||||
this.getDefectStatusList();
|
||||
},
|
||||
methods: {
|
||||
/* 获取路段下拉数据 */
|
||||
/**
|
||||
* @description: 获取路段下拉数据
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
getSegmentList() {
|
||||
getSegment().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
@ -835,7 +862,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取列表病害类型对应数据 */
|
||||
/**
|
||||
* @description: 获取列表病害类型对应数据
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
getTableDefect() {
|
||||
getDefectList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
@ -844,7 +875,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 过滤列表病害类型 */
|
||||
/**
|
||||
* @description: 过滤列表病害类型
|
||||
* @param {*} value
|
||||
* @return {*}
|
||||
*/
|
||||
filterDefect(value) {
|
||||
let a = null;
|
||||
[a] = this.tableDefect.filter((item) => {
|
||||
@ -855,7 +890,11 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 过滤列表病害状态 */
|
||||
/**
|
||||
* @description: 过滤列表病害状态
|
||||
* @param {*} value
|
||||
* @return {*}
|
||||
*/
|
||||
filterState(value) {
|
||||
let a = null;
|
||||
[a] = this.defectStatus.filter((item) => {
|
||||
@ -866,7 +905,11 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 获取病害类型下拉数据 */
|
||||
/**
|
||||
* @description: 获取病害类型下拉数据
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
getdefectTypes() {
|
||||
getDefectTypes().then((response) => {
|
||||
this.defectTypeOptions = JSON.parse(response.msg).map((item) => {
|
||||
@ -879,7 +922,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 查询校验状态下拉数据 */
|
||||
/**
|
||||
* @description: 查询校验状态下拉数据
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
getStates() {
|
||||
getStatesList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
@ -888,7 +935,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 查询病害状态下拉数据 */
|
||||
/**
|
||||
* @description: 查询病害状态下拉数据
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
getDefectStatusList() {
|
||||
getDefectStatus().then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
@ -897,7 +948,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/** 查询缺陷列表 */
|
||||
/**
|
||||
* @description: 查询缺陷列表
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
getList() {
|
||||
// 处理日期范围
|
||||
this.loading = true;
|
||||
@ -917,12 +972,15 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 新增/编辑弹窗取消按钮 */
|
||||
/**
|
||||
* @description: 新增/编辑弹窗取消按钮
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
cancel() {
|
||||
this.dialogVisible = false;
|
||||
this.upload.fileList = [];
|
||||
this.markers = [];
|
||||
this.centerPoint = [123.30297096718999, 41.87942945541742];
|
||||
this.form = {
|
||||
id: null,
|
||||
segmentId: "",
|
||||
@ -936,18 +994,23 @@ export default {
|
||||
inspectDirection: "",
|
||||
media: [],
|
||||
};
|
||||
if (this.$refs.addForm) {
|
||||
this.$refs["addForm"].resetFields();
|
||||
}
|
||||
// this.resetFormData();
|
||||
},
|
||||
|
||||
/* 重置表单方法 */
|
||||
/**
|
||||
* @description: 重置表单方法
|
||||
* @param {*} formName
|
||||
* @return {*}
|
||||
*/
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
|
||||
/* 表单重置事件 */
|
||||
/**
|
||||
* @description: 表单重置事件
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.queryParams = {
|
||||
@ -968,10 +1031,15 @@ export default {
|
||||
id: "",
|
||||
snapshotId: "",
|
||||
};
|
||||
(this.dateTime = []), this.getList();
|
||||
this.dateTime = [];
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/** 点击搜索按钮操作 */
|
||||
/**
|
||||
* @description: 点击搜索按钮操作
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
handleQuery() {
|
||||
const phonereg = /^K\d{4}\+\d{3}$/;
|
||||
if (this.queryParams.stakeStart) {
|
||||
@ -994,39 +1062,40 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 多选框选中数据 */
|
||||
/**
|
||||
* @description: 多选框选中数据
|
||||
* @param {*} selection
|
||||
* @return {*}
|
||||
*/
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.id);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
|
||||
/** 新增按钮操作 */
|
||||
/**
|
||||
* @description: 新增按钮操作
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
handleAdd() {
|
||||
this.dialogVisible = true;
|
||||
this.dialogTitle = "添加缺陷";
|
||||
this.$nextTick(() => {
|
||||
this.initMap("addMap");
|
||||
});
|
||||
},
|
||||
|
||||
/** 修改按钮操作 */
|
||||
/**
|
||||
* @description: 修改按钮操作
|
||||
* @param {*} row
|
||||
* @return {*}
|
||||
*/
|
||||
handleUpdate(row) {
|
||||
this.dialogVisible = true;
|
||||
this.dialogTitle = "修改缺陷";
|
||||
this.centerPoint = [
|
||||
row.geometry.coordinates[0],
|
||||
row.geometry.coordinates[1],
|
||||
];
|
||||
this.$nextTick(() => {
|
||||
this.initMap("addMap");
|
||||
const e = {
|
||||
lnglat: {
|
||||
lng: row.geometry.coordinates[0],
|
||||
lat: row.geometry.coordinates[1],
|
||||
},
|
||||
};
|
||||
this.onMapClick(e);
|
||||
const map = this.$refs.diseaseMap.instance.get("map");
|
||||
map.getView().setCenter(row.geometry.coordinates);
|
||||
this.markers = row.geometry.coordinates;
|
||||
this.drawMapPoint();
|
||||
});
|
||||
this.form = { ...row, dataStatus: row.dataStatus.toString() };
|
||||
this.upload.fileList = row.media.map((item) => {
|
||||
@ -1037,7 +1106,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 批量确认操作 */
|
||||
/**
|
||||
* @description: 批量确认操作
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
handleUpdateBatch() {
|
||||
if (this.ids.length > 0) {
|
||||
changeDefectStatus(this.ids).then(({ code, data }) => {
|
||||
@ -1052,17 +1125,90 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 文件提交处理 */
|
||||
/**
|
||||
* @description: 传回来的地图点击事件获取点位数据
|
||||
* @param {*} e
|
||||
* @return {*}
|
||||
*/
|
||||
getMapClick(e) {
|
||||
const map = this.$refs.diseaseMap.instance.get("map");
|
||||
map.removeLayer(this.markLayerPoints);
|
||||
const { coordinate } = e;
|
||||
this.markers = coordinate;
|
||||
this.drawMapPoint();
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 绘制地图点位
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
drawMapPoint() {
|
||||
const features = [];
|
||||
const point = new Point(this.markers); // 修改坐标格式
|
||||
const feature = new Feature({
|
||||
geometry: point,
|
||||
type: "icon", // 自己设置一个标识
|
||||
});
|
||||
feature.setStyle([
|
||||
new Style({
|
||||
image: new styleExports.Circle({
|
||||
//点样式
|
||||
radius: 6,
|
||||
stroke: new styleExports.Stroke({
|
||||
color: "#9a9c9e",
|
||||
width: 4,
|
||||
}),
|
||||
fill: new styleExports.Fill({
|
||||
color: "blue",
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
features.push(feature);
|
||||
//设置地图的数据源
|
||||
const pointSource = new VectorSource({
|
||||
features,
|
||||
});
|
||||
this.markLayerPoints = new VectorLayer({
|
||||
source: pointSource,
|
||||
properties: {
|
||||
type: "point",
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.diseaseMap.instance.get("map");
|
||||
map.addLayer(this.markLayerPoints);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 文件提交处理
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
submitUpload() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
|
||||
/* 文件上传中处理 */
|
||||
/**
|
||||
* @description: 文件上传中处理
|
||||
* @param {*} event
|
||||
* @param {*} file
|
||||
* @param {*} fileList
|
||||
* @return {*}
|
||||
*/
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true;
|
||||
},
|
||||
|
||||
/* 文件上传成功处理 */
|
||||
/**
|
||||
* @description: 文件上传成功处理
|
||||
* @param {*} response
|
||||
* @param {*} file
|
||||
* @param {*} fileList
|
||||
* @return {*}
|
||||
*/
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
this.upload.fileList = fileList.map((item) => {
|
||||
if (item.response) {
|
||||
@ -1073,7 +1219,11 @@ export default {
|
||||
this.upload.isUploading = false;
|
||||
},
|
||||
|
||||
/** 提交按钮 */
|
||||
/**
|
||||
* @description: 提交按钮
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
submitForm() {
|
||||
this.$refs["defectForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
@ -1094,7 +1244,7 @@ export default {
|
||||
}),
|
||||
geometry: {
|
||||
type: "Point",
|
||||
coordinates: [this.markers[0].lng, this.markers[0].lat],
|
||||
coordinates: this.markers,
|
||||
id: this.form?.geometry?.id,
|
||||
},
|
||||
};
|
||||
@ -1131,7 +1281,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/** 删除按钮操作 */
|
||||
/**
|
||||
* @description: 删除按钮操作
|
||||
* @param {*} row
|
||||
* @return {*}
|
||||
*/
|
||||
handleDelete(row) {
|
||||
const ids = row ? [row.id] : this.ids;
|
||||
if (!ids.length) {
|
||||
@ -1150,13 +1304,21 @@ export default {
|
||||
.catch(() => {});
|
||||
},
|
||||
|
||||
/* 合并按钮事件 */
|
||||
/**
|
||||
* @description: 合并按钮事件
|
||||
* @param {*} row
|
||||
* @return {*}
|
||||
*/
|
||||
mergeDefect(row) {
|
||||
this.mergeItem = row;
|
||||
this.mergeVisibleDialog = true;
|
||||
},
|
||||
|
||||
/* 拆分按钮事件 */
|
||||
/**
|
||||
* @description: 拆分按钮事件
|
||||
* @param {*} row
|
||||
* @return {*}
|
||||
*/
|
||||
splitDefect(row) {
|
||||
const snapshotId = row.snapshotId;
|
||||
this.$modal
|
||||
@ -1171,7 +1333,11 @@ export default {
|
||||
.catch(() => {});
|
||||
},
|
||||
|
||||
/** 导出按钮操作 */
|
||||
/**
|
||||
* @description: 导出按钮操作
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
handleExport() {
|
||||
this.download(
|
||||
"xj/defect/export",
|
||||
@ -1182,7 +1348,11 @@ export default {
|
||||
);
|
||||
},
|
||||
|
||||
/** 重置表单数据 */
|
||||
/**
|
||||
* @description: 重置表单数据
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
resetFormData() {
|
||||
this.form = {
|
||||
id: null,
|
||||
@ -1200,7 +1370,11 @@ export default {
|
||||
this.resetForm("defectForm");
|
||||
},
|
||||
|
||||
/* 点击行列表查看事件 */
|
||||
/**
|
||||
* @description: 点击行列表查看事件
|
||||
* @param {*} defect
|
||||
* @return {*}
|
||||
*/
|
||||
viewDefect(defect) {
|
||||
// this.loadDefect(defect.id);
|
||||
this.getSnapShotIdList(defect.id);
|
||||
@ -1208,24 +1382,18 @@ export default {
|
||||
this.openViewDialog = true;
|
||||
this.viewForm = defect;
|
||||
this.$nextTick(() => {
|
||||
this.centerPoint = [
|
||||
defect.geometry.coordinates[0],
|
||||
defect.geometry.coordinates[1],
|
||||
];
|
||||
this.initMap("viewMap");
|
||||
const e = {
|
||||
lnglat: {
|
||||
lng: defect.geometry.coordinates[0],
|
||||
lat: defect.geometry.coordinates[1],
|
||||
},
|
||||
};
|
||||
this.onMapClick(e);
|
||||
// 移除点击事件
|
||||
this.map.removeEventListener("click", this.onMapClick);
|
||||
const map = this.$refs.diseaseMap.instance.get("map");
|
||||
map.getView().setCenter(defect.geometry.coordinates);
|
||||
this.markers = defect.geometry.coordinates;
|
||||
this.drawMapPoint();
|
||||
});
|
||||
},
|
||||
|
||||
/* 根据病害id获取所有下拉快照数据 */
|
||||
/**
|
||||
* @description: 根据病害id获取所有下拉快照数据
|
||||
* @param {*} id
|
||||
* @return {*}
|
||||
*/
|
||||
getSnapShotIdList(id) {
|
||||
getDefectById(id).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
@ -1234,62 +1402,46 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 查看弹窗选择改变触发事件 */
|
||||
/**
|
||||
* @description: 查看弹窗选择改变触发事件
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
changeView(val) {
|
||||
getDetailsBySnapShotId(val).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
console.log(data, "fff");
|
||||
console.log(data, "查看弹窗选择改变触发事件");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 初始化天地图 */
|
||||
initMap(ele) {
|
||||
// if (this.map) {
|
||||
// this.map.remove(); // 如果已经有地图实例，先移除再重新加载
|
||||
// }
|
||||
|
||||
// 初始化天地图
|
||||
this.map = new T.Map(ele);
|
||||
this.map.centerAndZoom(
|
||||
new T.LngLat(this.centerPoint[0], this.centerPoint[1]),
|
||||
9
|
||||
); // 设置中心点和缩放级别
|
||||
// 添加单击事件
|
||||
this.map.on("click", this.onMapClick);
|
||||
},
|
||||
|
||||
/* 新增/编辑地图单击事件 */
|
||||
onMapClick(e) {
|
||||
const marker = new T.Marker(e.lnglat);
|
||||
if (this.markers.length > 0) {
|
||||
this.markers.shift();
|
||||
this.map.clearOverLays();
|
||||
this.map.addOverLay(marker);
|
||||
this.markers.push(e.lnglat);
|
||||
} else {
|
||||
this.map.addOverLay(marker);
|
||||
this.markers.push(e.lnglat);
|
||||
}
|
||||
},
|
||||
|
||||
/* 关闭查看对话框 */
|
||||
/**
|
||||
* @description: 关闭查看对话框
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
closeDialog() {
|
||||
this.centerPoint = [123.30297096718999, 41.87942945541742];
|
||||
this.openViewDialog = false;
|
||||
},
|
||||
|
||||
/* 打开查看图片弹窗 */
|
||||
/**
|
||||
* @description: 打开查看图片弹窗
|
||||
* @param {*} item
|
||||
* @return {*}
|
||||
*/
|
||||
showScreenImg(item) {
|
||||
this.currentImageItem = item;
|
||||
this.showImageDialog = true;
|
||||
},
|
||||
|
||||
/* 图片位置信息获取 */
|
||||
/**
|
||||
* @description: 图片位置信息获取
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
updateRects() {
|
||||
this.rects = [];
|
||||
this.rectsItem = {};
|
||||
const image = this.$refs.mainImage;
|
||||
const rects = this.currentImageItem?.rect?.split(",").map(Number) || [];
|
||||
this.rects = [
|
||||
{
|
||||
@ -1299,10 +1451,16 @@ export default {
|
||||
height: rects[3],
|
||||
},
|
||||
];
|
||||
// this.rectsItem = this.defectData[this.currentIndex];
|
||||
},
|
||||
|
||||
/* 图片红框位置 */
|
||||
/**
|
||||
* @description: 图片红框位置
|
||||
* @param {*} left
|
||||
* @param {*} top
|
||||
* @param {*} width
|
||||
* @param {*} height
|
||||
* @return {*}
|
||||
*/
|
||||
getRectStyle({ left, top, width, height }) {
|
||||
const image = this.$refs.mainImage;
|
||||
const container = this.$refs.imageContainer;
|
||||
@ -1329,14 +1487,22 @@ export default {
|
||||
};
|
||||
},
|
||||
|
||||
/* 关闭查看图片弹窗 */
|
||||
/**
|
||||
* @description: 关闭查看图片弹窗
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
imgCancel() {
|
||||
this.showImageDialog = false;
|
||||
this.currentImageItem = {};
|
||||
this.rects = [];
|
||||
},
|
||||
|
||||
/* 关闭合并病害弹窗 */
|
||||
/**
|
||||
* @description: 关闭合并病害弹窗
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
mergeCancel() {
|
||||
this.mergeVisibleDialog = false;
|
||||
this.getList();
|
||||
|
||||
@ -115,7 +115,11 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="病害位置">
|
||||
<div ref="addMap" id="addMap" class="no-hand-cursor"></div>
|
||||
<fssm-map
|
||||
ref="addMap"
|
||||
@map-click="getMapClick"
|
||||
class="no-hand-cursor"
|
||||
></fssm-map>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传病害图片">
|
||||
<el-upload
|
||||
@ -156,9 +160,20 @@
|
||||
<script>
|
||||
import { addRoad, uploadRoad } from "@/api/xj/road";
|
||||
import { getToken } from "@/utils/auth";
|
||||
// 地图
|
||||
import FssmMap from "@/components/map/fssm-map.vue";
|
||||
import { Feature } from "ol";
|
||||
import { Point } from "ol/geom";
|
||||
import { Style } from "ol/style";
|
||||
import * as styleExports from "ol/style";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import { Vector as VectorSource } from "ol/source";
|
||||
|
||||
export default {
|
||||
name: "RoadAdd",
|
||||
components: {
|
||||
FssmMap,
|
||||
},
|
||||
props: {
|
||||
dialogItem: {
|
||||
type: Object,
|
||||
@ -254,8 +269,6 @@ export default {
|
||||
// 上传的文件列表
|
||||
fileList: [],
|
||||
},
|
||||
// 地图中心点
|
||||
centerPoint: [123.30297096718999, 41.87942945541742],
|
||||
// 点击坐标
|
||||
markers: [],
|
||||
};
|
||||
@ -273,13 +286,10 @@ export default {
|
||||
};
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const e = {
|
||||
lnglat: {
|
||||
lng: val.geometry.coordinates[0],
|
||||
lat: val.geometry.coordinates[1],
|
||||
},
|
||||
};
|
||||
this.onMapClick(e);
|
||||
const map = this.$refs.addMap.instance.get("map");
|
||||
map.getView().setCenter(val.geometry.coordinates);
|
||||
this.markers = val.geometry.coordinates;
|
||||
this.drawMapPoint();
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -287,20 +297,96 @@ export default {
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
/* 生命周期函数-mouted */
|
||||
mounted() {
|
||||
this.initMap();
|
||||
},
|
||||
/**
|
||||
* @description: 生命周期函数-mouted
|
||||
* @return {*}
|
||||
*/
|
||||
mounted() {},
|
||||
methods: {
|
||||
/* 文件提交处理 */
|
||||
/**
|
||||
* @description: 传回来的地图点击事件获取点位数据
|
||||
* @param {*} e
|
||||
* @return {*}
|
||||
*/
|
||||
getMapClick(e) {
|
||||
const map = this.$refs.addMap.instance.get("map");
|
||||
map.removeLayer(this.markLayerPoints);
|
||||
const { coordinate } = e;
|
||||
this.markers = coordinate;
|
||||
this.drawMapPoint();
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 绘制地图点位
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
drawMapPoint() {
|
||||
const features = [];
|
||||
const point = new Point(this.markers); // 修改坐标格式
|
||||
const feature = new Feature({
|
||||
geometry: point,
|
||||
type: "icon", // 自己设置一个标识
|
||||
});
|
||||
feature.setStyle([
|
||||
new Style({
|
||||
image: new styleExports.Circle({
|
||||
//点样式
|
||||
radius: 6,
|
||||
stroke: new styleExports.Stroke({
|
||||
color: "#9a9c9e",
|
||||
width: 4,
|
||||
}),
|
||||
fill: new styleExports.Fill({
|
||||
color: "blue",
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
features.push(feature);
|
||||
//设置地图的数据源
|
||||
const pointSource = new VectorSource({
|
||||
features,
|
||||
});
|
||||
this.markLayerPoints = new VectorLayer({
|
||||
source: pointSource,
|
||||
properties: {
|
||||
type: "point",
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.addMap.instance.get("map");
|
||||
map.addLayer(this.markLayerPoints);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 文件提交处理
|
||||
* @param {*} e
|
||||
* @return {*}
|
||||
*/
|
||||
submitUpload() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
/* 文件上传中处理 */
|
||||
|
||||
/**
|
||||
* @description: 文件上传中处理
|
||||
* @param {*} event
|
||||
* @param {*} file
|
||||
* @param {*} fileList
|
||||
* @return {*}
|
||||
*/
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true;
|
||||
},
|
||||
/* 文件上传成功处理 */
|
||||
|
||||
/**
|
||||
* @description: 文件上传成功处理
|
||||
* @param {*} response
|
||||
* @param {*} file
|
||||
* @param {*} fileList
|
||||
* @return {*}
|
||||
*/
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
this.upload.fileList = fileList.map((item) => {
|
||||
if (item.response) {
|
||||
@ -310,7 +396,11 @@ export default {
|
||||
});
|
||||
this.upload.isUploading = false;
|
||||
},
|
||||
/* 点击确定事件 */
|
||||
|
||||
/**
|
||||
* @description: 点击确定事件
|
||||
* @return {*}
|
||||
*/
|
||||
submitForm() {
|
||||
this.$refs["roadForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
@ -331,7 +421,7 @@ export default {
|
||||
}),
|
||||
geometry: {
|
||||
type: "Point",
|
||||
coordinates: [this.markers[0].lng, this.markers[0].lat],
|
||||
coordinates: this.markers,
|
||||
id: this.roadForm?.geometry?.id,
|
||||
},
|
||||
};
|
||||
@ -369,34 +459,14 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 点击取消事件 */
|
||||
|
||||
/**
|
||||
* @description: 点击取消事件
|
||||
* @return {*}
|
||||
*/
|
||||
cancel() {
|
||||
this.$emit("cancel");
|
||||
},
|
||||
/* 初始化天地图 */
|
||||
initMap() {
|
||||
// 初始化天地图
|
||||
this.map = new T.Map("addMap");
|
||||
this.map.centerAndZoom(
|
||||
new T.LngLat(this.centerPoint[0], this.centerPoint[1]),
|
||||
9
|
||||
);
|
||||
// 添加单击事件
|
||||
this.map.on("click", this.onMapClick);
|
||||
},
|
||||
/* 新增/编辑地图单击事件 */
|
||||
onMapClick(e) {
|
||||
const marker = new T.Marker(e.lnglat);
|
||||
if (this.markers.length > 0) {
|
||||
this.markers.shift();
|
||||
this.map.clearOverLays();
|
||||
this.map.addOverLay(marker);
|
||||
this.markers.push(e.lnglat);
|
||||
} else {
|
||||
this.map.addOverLay(marker);
|
||||
this.markers.push(e.lnglat);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -34,7 +34,10 @@
|
||||
</div>
|
||||
|
||||
<!-- 下半部分显示天地图 -->
|
||||
<div id="viewMap" style="height: 300px; margin-top: 20px"></div>
|
||||
<fssm-map
|
||||
style="height: 300px; margin-top: 20px"
|
||||
ref="viewMap"
|
||||
></fssm-map>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeDialog">关闭</el-button>
|
||||
@ -43,8 +46,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 地图
|
||||
import FssmMap from "@/components/map/fssm-map.vue";
|
||||
import { Feature } from "ol";
|
||||
import { Point } from "ol/geom";
|
||||
import { Style } from "ol/style";
|
||||
import * as styleExports from "ol/style";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import { Vector as VectorSource } from "ol/source";
|
||||
export default {
|
||||
name: "RoadView",
|
||||
components: {
|
||||
FssmMap,
|
||||
},
|
||||
props: {
|
||||
dialogItem: {
|
||||
type: Object,
|
||||
@ -71,20 +85,10 @@ export default {
|
||||
if (val.title === "查看路产") {
|
||||
this.viewForm = JSON.parse(JSON.stringify(val));
|
||||
this.$nextTick(() => {
|
||||
this.centerPoint = [
|
||||
val.geometry.coordinates[0],
|
||||
val.geometry.coordinates[1],
|
||||
];
|
||||
this.initMap("viewMap");
|
||||
const e = {
|
||||
lnglat: {
|
||||
lat: val.geometry.coordinates[1],
|
||||
lng: val.geometry.coordinates[0],
|
||||
},
|
||||
};
|
||||
this.onMapClick(e);
|
||||
// 移除点击事件
|
||||
this.map.removeEventListener("click", this.onMapClick);
|
||||
const map = this.$refs.viewMap.instance.get("map");
|
||||
map.getView().setCenter(val.geometry.coordinates);
|
||||
this.markers = val.geometry.coordinates;
|
||||
this.drawMapPoint();
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -92,11 +96,13 @@ export default {
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// this.initMap("viewMap");
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
/* 过滤列表路产类型 */
|
||||
/**
|
||||
* @description: 过滤列表路产类型
|
||||
* @param {*} value
|
||||
* @return {*}
|
||||
*/
|
||||
filterDefect(value) {
|
||||
let a = null;
|
||||
[a] = this.roadType.filter((item) => {
|
||||
@ -106,37 +112,58 @@ export default {
|
||||
return a.label;
|
||||
}
|
||||
},
|
||||
/* 关闭弹窗 */
|
||||
|
||||
/**
|
||||
* @description: 绘制地图点位
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
drawMapPoint() {
|
||||
const features = [];
|
||||
const point = new Point(this.markers); // 修改坐标格式
|
||||
const feature = new Feature({
|
||||
geometry: point,
|
||||
type: "icon", // 自己设置一个标识
|
||||
});
|
||||
feature.setStyle([
|
||||
new Style({
|
||||
image: new styleExports.Circle({
|
||||
//点样式
|
||||
radius: 6,
|
||||
stroke: new styleExports.Stroke({
|
||||
color: "#9a9c9e",
|
||||
width: 4,
|
||||
}),
|
||||
fill: new styleExports.Fill({
|
||||
color: "blue",
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
features.push(feature);
|
||||
//设置地图的数据源
|
||||
const pointSource = new VectorSource({
|
||||
features,
|
||||
});
|
||||
this.markLayerPoints = new VectorLayer({
|
||||
source: pointSource,
|
||||
properties: {
|
||||
type: "point",
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.viewMap.instance.get("map");
|
||||
map.addLayer(this.markLayerPoints);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 关闭弹窗
|
||||
* @return {*}
|
||||
*/
|
||||
closeDialog() {
|
||||
this.$emit("cancel");
|
||||
},
|
||||
/* 初始化天地图 */
|
||||
initMap(ele) {
|
||||
// if (this.map) {
|
||||
// this.map.remove(); // 如果已经有地图实例，先移除再重新加载
|
||||
// }
|
||||
// 初始化天地图
|
||||
this.map = new T.Map(ele);
|
||||
this.map.centerAndZoom(
|
||||
new T.LngLat(this.centerPoint[0], this.centerPoint[1]),
|
||||
9
|
||||
); // 设置中心点和缩放级别
|
||||
// 添加单击事件
|
||||
this.map.on("click", this.onMapClick);
|
||||
},
|
||||
/* 新增/编辑地图单击事件 */
|
||||
onMapClick(e) {
|
||||
const marker = new T.Marker(e.lnglat);
|
||||
if (this.markers.length > 0) {
|
||||
this.markers.shift();
|
||||
this.map.clearOverLays();
|
||||
this.map.addOverLay(marker);
|
||||
this.markers.push(e.lnglat);
|
||||
} else {
|
||||
this.map.addOverLay(marker);
|
||||
this.markers.push(e.lnglat);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -319,6 +319,7 @@
|
||||
@close="addCancel"
|
||||
>
|
||||
<road-add
|
||||
v-if="addVisible"
|
||||
@cancel="addCancel"
|
||||
:dialogItem="dialogItem"
|
||||
:segmentList="segmentList"
|
||||
@ -338,6 +339,7 @@
|
||||
@close="viewCancel"
|
||||
>
|
||||
<road-view
|
||||
v-if="viewVisible"
|
||||
@cancel="viewCancel"
|
||||
:dialogItem="dialogItem"
|
||||
:roadType="roadType"
|
||||
|
||||
@ -305,7 +305,8 @@
|
||||
|
||||
<!-- 右侧地图部分 -->
|
||||
<div style="flex: 1; position: relative">
|
||||
<div id="add_map" ref="mapContainer" class="no-hand-cursor"></div>
|
||||
<!-- <div id="add_map" ref="mapContainer" class="no-hand-cursor"></div> -->
|
||||
<fssm-map :showDraw="true" class="no-hand-cursor" ref="mapContainer"></fssm-map>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
@ -324,10 +325,20 @@ import {
|
||||
addRoute,
|
||||
updateRoute,
|
||||
} from "@/api/xj/route";
|
||||
|
||||
// 地图
|
||||
import FssmMap from "@/components/map/fssm-map.vue";
|
||||
import { Feature } from "ol";
|
||||
import { Point } from "ol/geom";
|
||||
import { Style } from "ol/style";
|
||||
import * as styleExports from "ol/style";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import { Vector as VectorSource } from "ol/source";
|
||||
export default {
|
||||
name: "Route",
|
||||
dicts: ["bas_road_type", "bas_direction"],
|
||||
components: {
|
||||
FssmMap,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuOpen: false,
|
||||
@ -400,143 +411,12 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.dialogVisible = true;
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
methods: {
|
||||
undoLastAction() {
|
||||
// 撤销最后一次添加的点和连线
|
||||
if (this.lines.length > 0) {
|
||||
const lastLine = this.lines.pop();
|
||||
this.map.removeOverLay(lastLine); // 从地图中移除最后一条线
|
||||
}
|
||||
|
||||
if (this.lines.length == 0) {
|
||||
this.resetMap();
|
||||
return;
|
||||
}
|
||||
this.markers.pop();
|
||||
// 更新上一个点为撤销后的点
|
||||
this.previousPoint =
|
||||
this.markers.length > 0
|
||||
? this.markers[this.markers.length - 1].getLngLat()
|
||||
: null;
|
||||
|
||||
// 更新坐标点 textarea
|
||||
const coordArr = this.form.coordinates.split(";");
|
||||
coordArr.pop(); // 移除最后一个坐标
|
||||
this.form.coordinates = coordArr.join(";");
|
||||
},
|
||||
|
||||
resetMap() {
|
||||
// 清空坐标点、地图上的所有覆盖物
|
||||
this.form.coordinates = "";
|
||||
this.previousPoint = null;
|
||||
this.map.clearOverLays();
|
||||
this.markers = [];
|
||||
this.lines = [];
|
||||
},
|
||||
initMap() {
|
||||
if (!this.map) {
|
||||
// 初始化天地图
|
||||
|
||||
this.map = new T.Map("add_map");
|
||||
this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12); // 设置中心点和缩放级别
|
||||
|
||||
// 添加双击事件
|
||||
this.map.on("click", this.onMapClick);
|
||||
|
||||
// 添加右键菜单
|
||||
this.map.on("contextmenu", this.onMapRightClick);
|
||||
} else {
|
||||
this.resetMap();
|
||||
}
|
||||
},
|
||||
onMapClick(e) {
|
||||
if (this.menuOpen) {
|
||||
this.menuOpen = false;
|
||||
return;
|
||||
}
|
||||
const latLng = e.lnglat;
|
||||
const point = `${latLng.lng},${latLng.lat}`;
|
||||
|
||||
// 追加经纬度到textarea
|
||||
if (this.form.coordinates == null) {
|
||||
this.form.coordinates = "";
|
||||
}
|
||||
this.form.coordinates += this.form.coordinates ? `;${point}` : point;
|
||||
|
||||
// 绘制点和连线
|
||||
|
||||
const marker = new T.Marker(latLng);
|
||||
|
||||
this.markers.push(marker); // 保存点
|
||||
// 连线
|
||||
if (this.previousPoint) {
|
||||
const line = new T.Polyline([this.previousPoint, latLng], {
|
||||
strokeColor: "blue",
|
||||
strokeWeight: 3,
|
||||
strokeOpacity: 0.7,
|
||||
});
|
||||
this.map.addOverLay(line);
|
||||
this.lines.push(line);
|
||||
}
|
||||
if (this.lines.length == 0) {
|
||||
this.map.addOverLay(marker);
|
||||
}
|
||||
this.previousPoint = latLng; // 记录上一个点
|
||||
},
|
||||
drawExistingCoordinates() {
|
||||
// 如果有保存的坐标点数据
|
||||
// console.log(this.form.coordinates, "this.form.coordinates");
|
||||
|
||||
if (this.form.coordinates) {
|
||||
const coordArr = this.form.coordinates.split(";");
|
||||
let previousLatLng = null;
|
||||
|
||||
coordArr.forEach((coord, index) => {
|
||||
const [lng, lat] = coord.split(",").map(Number);
|
||||
const latLng = new T.LngLat(lng, lat);
|
||||
|
||||
// 绘制点
|
||||
const marker = new T.Marker(latLng);
|
||||
this.markers.push(marker);
|
||||
|
||||
// 如果有上一个点，绘制连线
|
||||
if (previousLatLng) {
|
||||
const line = new T.Polyline([previousLatLng, latLng], {
|
||||
strokeColor: "blue",
|
||||
strokeWeight: 3,
|
||||
strokeOpacity: 0.7,
|
||||
});
|
||||
this.map.addOverLay(line);
|
||||
this.lines.push(line);
|
||||
}
|
||||
|
||||
// 将当前点设置为 previousPoint，最后一个点会被设置为最后的 previousPoint
|
||||
previousLatLng = latLng;
|
||||
});
|
||||
|
||||
// 设置最后一个点为当前的 previousPoint，方便继续绘制
|
||||
this.previousPoint = previousLatLng;
|
||||
}
|
||||
},
|
||||
onMapRightClick(e) {
|
||||
this.menuOpen = true;
|
||||
var menu = new T.ContextMenu({
|
||||
width: 50,
|
||||
});
|
||||
var _MenuItem1 = new T.MenuItem("撤销", this.undoLastAction);
|
||||
|
||||
var _MenuItem2 = new T.MenuItem("重绘", this.resetMap);
|
||||
|
||||
menu.addItem(_MenuItem1);
|
||||
|
||||
menu.addItem(_MenuItem2);
|
||||
this.map.addContextMenu(menu);
|
||||
},
|
||||
|
||||
/** 查询道路线列表 */
|
||||
/**
|
||||
* @description: 查询道路线列表
|
||||
* @return {*}
|
||||
*/
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listRoute(this.queryParams).then((response) => {
|
||||
@ -545,66 +425,66 @@ export default {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
|
||||
/**
|
||||
* @description: 取消按钮
|
||||
* @return {*}
|
||||
*/
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.dialogVisible = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
|
||||
/**
|
||||
* @description: 表单重置
|
||||
* @return {*}
|
||||
*/
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
routeCode: null,
|
||||
routeName: null,
|
||||
fullName: null,
|
||||
routeType: null,
|
||||
direction: null,
|
||||
startPoint: null,
|
||||
endPoint: null,
|
||||
coordinates: null,
|
||||
startMilepost: null,
|
||||
endMilepost: null,
|
||||
remarks: null,
|
||||
createdBy: null,
|
||||
createdAt: null,
|
||||
updatedBy: null,
|
||||
updatedAt: null,
|
||||
deletedBy: null,
|
||||
deletedAt: null,
|
||||
isDeleted: null,
|
||||
companyId: null,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
|
||||
/**
|
||||
* @description: 搜索按钮操作
|
||||
* @return {*}
|
||||
*/
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
|
||||
/**
|
||||
* @description: 重置按钮操作
|
||||
* @return {*}
|
||||
*/
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
|
||||
/**
|
||||
* @description: 多选框选中数据
|
||||
* @param {selection}
|
||||
* @return {*}
|
||||
*/
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.id);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
|
||||
/**
|
||||
* @description: 新增按钮操作
|
||||
* @return {*}
|
||||
*/
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.dialogVisible = true;
|
||||
|
||||
this.title = "添加道路线";
|
||||
let that = this;
|
||||
setTimeout(function () {
|
||||
that.initMap();
|
||||
}, 100);
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
|
||||
/**
|
||||
* @description: 修改按钮操作
|
||||
* @param {row}
|
||||
* @return {*}
|
||||
*/
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids;
|
||||
@ -612,15 +492,13 @@ export default {
|
||||
this.form = response.data;
|
||||
this.dialogVisible = true;
|
||||
this.title = "修改道路线";
|
||||
let that = this;
|
||||
|
||||
setTimeout(function () {
|
||||
that.initMap();
|
||||
that.drawExistingCoordinates();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
|
||||
/**
|
||||
* @description: 提交按钮
|
||||
* @return {*}
|
||||
*/
|
||||
submitForm() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
@ -640,7 +518,12 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
|
||||
/**
|
||||
* @description: 删除按钮操作
|
||||
* @param {row}
|
||||
* @return {*}
|
||||
*/
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal
|
||||
@ -654,7 +537,11 @@ export default {
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
|
||||
/**
|
||||
* @description: 导出按钮操作
|
||||
* @return {*}
|
||||
*/
|
||||
handleExport() {
|
||||
this.download(
|
||||
"xj/route/export",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user