-
-
-
-
+
-
+
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);
- }
- },
},
};
diff --git a/src/views/xj/inspection/road-management/components/road-view.vue b/src/views/xj/inspection/road-management/components/road-view.vue
index 5245d13..8ed1355 100644
--- a/src/views/xj/inspection/road-management/components/road-view.vue
+++ b/src/views/xj/inspection/road-management/components/road-view.vue
@@ -34,7 +34,10 @@
-
+
+
+
-
-
+
+
@@ -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();
diff --git a/src/views/xj/inspection/road-management/components/road-add.vue b/src/views/xj/inspection/road-management/components/road-add.vue
index eb5deb5..7824969 100644
--- a/src/views/xj/inspection/road-management/components/road-add.vue
+++ b/src/views/xj/inspection/road-management/components/road-add.vue
@@ -115,7 +115,11 @@
+
+
-
-
-
+
-
-
-
-
-
-
+
+
+
+
-
-
-
- - 上报日期：{{ new Date(viewForm.createdTime).toLocaleString() }} -
-路段名称：{{ viewForm.segmentName }}
- -病害类型：{{ filterDefect(viewForm.defectType) }}
-病害长度：{{ viewForm.targetLen }} 米
-病害id：{{ viewForm.id }}
-快照id：{{ viewForm.snapshotId }}
-
-
-
- ![病害图片]()
-
-
+
+
+
+
+
+
+
+
+
+ + 上报日期：{{ + new Date(viewForm.createdTime).toLocaleString() + }} +
+路段名称：{{ viewForm.segmentName }}
+ +病害类型：{{ filterDefect(viewForm.defectType) }}
+病害长度：{{ viewForm.targetLen }} 米
+病害id：{{ viewForm.id }}
+快照id：{{ viewForm.snapshotId }}
+
+
+
+ ![病害图片]()
+
+
+