fix：巡检任务增加地图，养护通知单修改
This commit is contained in:
parent
172c2501cb
commit
6dd0ef6706
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 10:04:12
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-05 15:34:41
|
||||
* @LastEditTime: 2025-01-02 15:10:39
|
||||
* @FilePath: \znxjxt-ui\src\api\xj\task.js
|
||||
* @Description: 巡检任务管理接口
|
||||
*/
|
||||
@ -74,3 +74,12 @@ export function exportDefectData(params) {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 根据任务id查询病害点位
|
||||
export function getDefectPoint(params) {
|
||||
return request({
|
||||
url: "/xj/xjtask/getMapInfoByTaskId",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 10:46:23
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2025-01-02 10:33:02
|
||||
* @LastEditTime: 2025-01-02 16:17:20
|
||||
* @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
|
||||
* @Description: 公共地图
|
||||
-->
|
||||
@ -428,7 +428,9 @@ export default {
|
||||
this.$emit("map-moveend", zoom);
|
||||
});
|
||||
// 图层选择事件
|
||||
this.selectSingClick = new Select();
|
||||
this.selectSingClick = new Select({
|
||||
style: null,
|
||||
});
|
||||
map.addInteraction(this.selectSingClick);
|
||||
this.selectSingClick.on("select", (e) => {
|
||||
this.$emit("feature-select", e);
|
||||
|
||||
@ -180,6 +180,7 @@ export default {
|
||||
handler(val) {
|
||||
this.editForm = {
|
||||
...val,
|
||||
segmentId: val.segmentId === "未知路段" ? "" : val.segmentId,
|
||||
id: null,
|
||||
defectId: val.id,
|
||||
createdTime: null,
|
||||
|
||||
224
src/views/xj/inspection/task-management/components/task-map.vue
Normal file
224
src/views/xj/inspection/task-management/components/task-map.vue
Normal file
@ -0,0 +1,224 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2025-01-02 11:56:20
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2025-01-02 15:54:11
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\task-map.vue
|
||||
* @Description: 巡检任务-地图弹窗
|
||||
-->
|
||||
<template>
|
||||
<div class="content">
|
||||
<!-- 多选框切换坐标类型 -->
|
||||
<div class="check-box">
|
||||
<el-cascader
|
||||
ref="screenCascader"
|
||||
v-model="mapCareSelect"
|
||||
placeholder="病害类型筛选"
|
||||
:options="defectCascaderList"
|
||||
collapse-tags
|
||||
:props="{
|
||||
multiple: true,
|
||||
emitPath: false,
|
||||
children: 'subTypes',
|
||||
}"
|
||||
@change="changeMapCareSelect"
|
||||
clearable
|
||||
></el-cascader>
|
||||
</div>
|
||||
<fssm-map ref="taskMap"></fssm-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 接口
|
||||
import { getDefectPoint } from "@/api/xj/task";
|
||||
import FssmMap from "@/components/map/fssm-map.vue";
|
||||
import { Feature } from "ol";
|
||||
import { Point } from "ol/geom";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import { Style, Icon } from "ol/style";
|
||||
export default {
|
||||
name: "TaskMap",
|
||||
components: {
|
||||
FssmMap,
|
||||
},
|
||||
props: {
|
||||
// 弹窗传的数据
|
||||
dialogItem: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
// 病害类型筛选下拉数据
|
||||
defectCascaderList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 病害类型筛选绑定
|
||||
mapCareSelect: [],
|
||||
// 地图打点图层
|
||||
markLayerPoints: null,
|
||||
// 中心点集合(过滤后得点位)
|
||||
centerPiont: [],
|
||||
// 中心点集合（所有点位）
|
||||
drawPointList: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMapPoint();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 病害类型筛选改变事件
|
||||
* @return {void}
|
||||
*/
|
||||
changeMapCareSelect(value) {
|
||||
if (value.length > 0) {
|
||||
this.centerPiont = this.drawPointList.filter((item) => {
|
||||
return value.includes(item.iconType);
|
||||
});
|
||||
} else {
|
||||
this.centerPiont = this.drawPointList;
|
||||
}
|
||||
this.drawPoint();
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取地图点位的方法
|
||||
* @return {void}
|
||||
*/
|
||||
getMapPoint() {
|
||||
getDefectPoint({ id: this.dialogItem.extId }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.drawPointList = data.map((item) => {
|
||||
if (item.geometry) {
|
||||
return {
|
||||
...item,
|
||||
geometry: [item.geometry[0], item.geometry[1]],
|
||||
};
|
||||
}
|
||||
return [];
|
||||
});
|
||||
this.centerPiont = data.map((item) => {
|
||||
if (item.geometry) {
|
||||
return {
|
||||
...item,
|
||||
geometry: [item.geometry[0], item.geometry[1]],
|
||||
};
|
||||
}
|
||||
return [];
|
||||
});
|
||||
// 如果不是病害巡检，则绘制点位
|
||||
// 如果图片弹窗打开，则绘制点位
|
||||
// if (!this.shouldLoadClusters) {
|
||||
// 修改地图中心点位
|
||||
const pointArray = data.map((item) => {
|
||||
if (item.geometry) {
|
||||
return [item.geometry[0], item.geometry[1]];
|
||||
}
|
||||
return [];
|
||||
});
|
||||
this.fitMapToPoints(pointArray);
|
||||
this.drawPoint();
|
||||
// }
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 根据点位计算地图中心点
|
||||
* @return {void}
|
||||
*/
|
||||
fitMapToPoints(points) {
|
||||
if (points.length > 0) {
|
||||
// 创建一个空的 extent
|
||||
let extent = [Infinity, Infinity, -Infinity, -Infinity];
|
||||
// 计算所有点的边界框（extent）
|
||||
points.forEach((point) => {
|
||||
extent = [
|
||||
Math.min(extent[0], point[0]),
|
||||
Math.min(extent[1], point[1]),
|
||||
Math.max(extent[2], point[0]),
|
||||
Math.max(extent[3], point[1]),
|
||||
];
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
// 获取地图实例
|
||||
const map = this.$refs.taskMap.instance.get("map");
|
||||
|
||||
// 使用 fit 方法根据边界框计算最佳缩放级别
|
||||
map.getView().fit(extent, {
|
||||
duration: 500, // 动画持续时间
|
||||
padding: [10, 10, 10, 10], // 边缘填充
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 绘制地图点位
|
||||
* @return {void}
|
||||
*/
|
||||
drawPoint() {
|
||||
const features = [];
|
||||
this.centerPiont.forEach((element) => {
|
||||
// 修改坐标样式
|
||||
const point = new Point(element.geometry);
|
||||
const feature = new Feature({
|
||||
geometry: point,
|
||||
data: element,
|
||||
// 自己设置一个标识
|
||||
type: "icon",
|
||||
});
|
||||
// 设置点位样式
|
||||
feature.setStyle([
|
||||
new Style({
|
||||
image: new Icon({
|
||||
crossOrigin: "anonymous",
|
||||
src: require(`@/assets/screen/index/${element.iconTypeName}.png`),
|
||||
// size: [40, 40],
|
||||
scale: 0.5, // 图标缩放比例
|
||||
displacement: [0, 30],
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
features.push(feature);
|
||||
});
|
||||
//设置地图的数据源
|
||||
const pointSource = new VectorSource({
|
||||
features,
|
||||
});
|
||||
if (!this.markLayerPoints) {
|
||||
this.markLayerPoints = new VectorLayer({
|
||||
source: pointSource,
|
||||
properties: {
|
||||
type: "point",
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.taskMap.instance.get("map");
|
||||
map.addLayer(this.markLayerPoints);
|
||||
});
|
||||
} else {
|
||||
this.markLayerPoints.setSource(pointSource);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 45rem;
|
||||
position: relative;
|
||||
|
||||
.check-box {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 09:48:43
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-27 14:03:45
|
||||
* @LastEditTime: 2025-01-02 15:21:44
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\index.vue
|
||||
* @Description: 巡检管理-巡检任务
|
||||
-->
|
||||
@ -95,7 +95,11 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="发现病害数" align="center" prop="defectCount">
|
||||
</el-table-column>
|
||||
<el-table-column label="发现新增病害数" align="center" prop="newDefectCount">
|
||||
<el-table-column
|
||||
label="发现新增病害数"
|
||||
align="center"
|
||||
prop="newDefectCount"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="任务id" align="center" prop="extId" />
|
||||
<el-table-column
|
||||
@ -107,10 +111,13 @@
|
||||
<el-popover placement="left" width="auto" trigger="hover">
|
||||
<p>导出是否附带图片？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" @click="wordExport(scope.row,false)"
|
||||
<el-button size="mini" @click="wordExport(scope.row, false)"
|
||||
>取消</el-button
|
||||
>
|
||||
<el-button type="primary" size="mini" @click="wordExport(scope.row,true)"
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="wordExport(scope.row, true)"
|
||||
>确定</el-button
|
||||
>
|
||||
</div>
|
||||
@ -130,6 +137,14 @@
|
||||
@click="viewDefect(scope.row)"
|
||||
>查看
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-help"
|
||||
style="margin-left: 0.5rem"
|
||||
@click="viewMap(scope.row)"
|
||||
>地图
|
||||
</el-button>
|
||||
<!-- <el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@ -177,6 +192,22 @@
|
||||
></task-retrace> -->
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="查看地图"
|
||||
:visible.sync="mapView"
|
||||
width="90%"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="mapCancel"
|
||||
>
|
||||
<task-map
|
||||
v-if="mapView"
|
||||
:dialogItem="dialogItem"
|
||||
:defectCascaderList="defectCascaderList"
|
||||
></task-map>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 回顾巡检任务弹窗 -->
|
||||
<el-dialog
|
||||
title="回顾任务"
|
||||
@ -202,6 +233,7 @@
|
||||
import { Loading } from "element-ui";
|
||||
import TaskRetrace from "./components/task-retrace.vue";
|
||||
import TaskView from "./components/task-view.vue";
|
||||
import taskMap from "./components/task-map.vue";
|
||||
import {
|
||||
getTaskTable,
|
||||
getSegment,
|
||||
@ -212,7 +244,7 @@ import {
|
||||
} from "@/api/xj/task";
|
||||
|
||||
export default {
|
||||
components: { TaskRetrace, TaskView },
|
||||
components: { TaskRetrace, TaskView, taskMap },
|
||||
data() {
|
||||
return {
|
||||
// 查询表单
|
||||
@ -251,11 +283,12 @@ export default {
|
||||
dialogItem: {},
|
||||
// 查看弹窗显隐控制
|
||||
viewVisible: false,
|
||||
// 地图弹窗显隐控制
|
||||
mapView: false,
|
||||
// 回顾弹窗显隐控制
|
||||
retraceVisible: false,
|
||||
// 病害类型下拉
|
||||
defectCascaderList: [],
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -387,6 +420,16 @@ export default {
|
||||
this.dialogItem = item;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 点击地图病害事件
|
||||
* @param {*} item
|
||||
* @return {*}
|
||||
*/
|
||||
viewMap(item) {
|
||||
this.mapView = true;
|
||||
this.dialogItem = item;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 点击回顾事件
|
||||
* @param {*} item
|
||||
@ -401,8 +444,8 @@ export default {
|
||||
* @description: 导出文件
|
||||
* @return {*}
|
||||
*/
|
||||
submitForm(item,type) {
|
||||
console.log(item,'fdfdfd')
|
||||
submitForm(item, type) {
|
||||
console.log(item, "fdfdfd");
|
||||
this.wordExport(this.dialogItem, type);
|
||||
},
|
||||
|
||||
@ -464,6 +507,14 @@ export default {
|
||||
this.dialogItem = {};
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 关闭地图弹窗
|
||||
* @return {*}
|
||||
*/
|
||||
mapCancel() {
|
||||
this.mapView = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 关闭回顾弹窗
|
||||
* @return {*}
|
||||
@ -472,7 +523,6 @@ export default {
|
||||
this.retraceVisible = false;
|
||||
this.dialogItem = {};
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user