SunTao/xjsaas-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：病害筛查弹窗修改逻辑，道路线道路段修改，地图更换

Browse Source
This commit is contained in:
SunTao 2024-11-22 15:14:32 +08:00
parent 151f95b06c
commit f27c2f7544
9 changed files with 612 additions and 381 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/xj/section.js
View File

@ -44,3 +44,12 @@ export function updateSection(query) {
});
}
// 查询管理站下拉数据
export function getDeptList(params) {
return request({
url: "/system/dept/listDropDown",
method: "get",
params,
});
}

238
src/components/map/fssm-map.vue
View File

@ -11,9 +11,14 @@
<div class="map-container">
<div ref="container" :id="`map-${mapId}`"></div>
<div ref="mapController" :style="controlStyle" class="control-container">
<!-- 绘制线段 -->
<div class="draw-line" v-if="showLine">
<i class="el-icon-edit" @click="drawLineMap()"></i>
<i class="el-icon-delete" @click="deleteLinedraw()"></i>
</div>
<!-- 绘制图形 -->
<div class="draw-map" v-if="showDraw">
<i class="el-icon-edit" @click="drawMap()"></i>
<i class="el-icon-edit-outline" @click="drawMap()"></i>
<i class="el-icon-delete" @click="deletedraw()"></i>
</div>
<!-- 切换底图控件 -->
@ -55,7 +60,7 @@ import {
defaults as defaultInteractions,
} from "ol/interaction";
import * as styleExports from "ol/style";
import { Polygon } from "ol/geom";
import { Polygon, LineString } from "ol/geom";
export default {
name: "FssmMap",
@ -72,11 +77,16 @@ export default {
type: String,
default: "10",
},
// 是否显示绘图功能
// 是否显示绘制多边形功能
showDraw: {
type: Boolean,
default: false,
},
// 是否显示绘制线段功能
showLine: {
type: Boolean,
default: false,
},
// 是否显示地图放大缩小
showZoom: {
type: Boolean,
@ -106,6 +116,11 @@ export default {
type: Array,
default: () => [],
},
// 接收传过来的绘制线段数组
editCoordinatesLine:{
type: Array,
default: () => [],
},
// 接收传过来的底图类型
baseMap: {
type: String,
@ -120,14 +135,26 @@ export default {
mapType: "cva_c",
// 地图图层
mapLayers: [],
// 绘制图层
// 绘制多边形图层
draw: null,
// 绘制线段图层
drawLine: null,
// 绘制图层源
source: new VectorSource(),
// 绘制图形保存的点位
drawMarkers: [],
// 绘制线段图层源
sourceLine: new VectorSource(),
// 当前地图层级
sendZoom: "",
// 当前选中得图层
selectSingClick: null,
// 绘制图形保存的点位
drawMarkers: [],
// 绘制多边形图层layer
drawLayer: null,
// 绘制线段保存的点位
drawLineMarkers: [],
// 绘制线段图层layer
drawLineLayer: null,
};
},
watch: {
@ -140,22 +167,87 @@ export default {
});
this.drawMarkers = aa;
const map = this.instance.get("map");
// 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构
const snap = new Snap({
source: this.source,
});
map.addInteraction(snap);
// 添加修改元素使得绘制的多边形可以编辑
const modify = new Modify({ source: this.source });
map.addInteraction(modify);
// 增加绘图层
const drawLayer = new VectorLayer({
this.drawLayer = new VectorLayer({
source: this.source,
id: "draw",
style: new styleExports.Style({
stroke: new styleExports.Stroke({
color: "blue",
size: 2,
}),
}),
});
const feature = new Feature({
geometry: new Polygon([aa]),
});
drawLayer.getSource().addFeature(feature);
map.addLayer(drawLayer);
this.drawLayer.getSource().addFeature(feature);
map.addLayer(this.drawLayer);
modify.on("modifyend", (e) => {
e.features.forEach((feature) => {
this.drawMarkers = feature.getGeometry().getCoordinates().flat();
this.$emit("endEoordinate", this.drawMarkers);
});
});
});
},
deep: true,
immediate: true,
},
/* 监听传过来的绘制线段坐标 */
editCoordinatesLine: {
handler(val) {
this.$nextTick(() => {
const aa = val.map((item) => {
return [item[0] * 1, item[1] * 1];
});
this.drawLineMarkers = aa;
const map = this.instance.get("map");
// 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构
const snap = new Snap({
source: this.sourceLine,
});
map.addInteraction(snap);
// 添加修改元素使得绘制的多边形可以编辑
const modify = new Modify({ source: this.sourceLine });
map.addInteraction(modify);
// 增加绘图层
this.drawLineLayer = new VectorLayer({
source: this.sourceLine,
id: "drawLine",
style: new styleExports.Style({
stroke: new styleExports.Stroke({
color: "red",
size: 4,
}),
}),
});
const feature = new Feature({
geometry: new LineString(aa),
});
this.drawLineLayer.getSource().addFeature(feature);
map.addLayer(this.drawLineLayer);
modify.on("modifyend", (e) => {
e.features.forEach((feature) => {
this.drawLineMarkers = feature.getGeometry().getCoordinates();
this.$emit("endEoordinateLine", this.drawLineMarkers);
});
});
});
},
immediate: true,
deep: true,
},
/* 监听传过来的底图类型 */
baseMap: {
handler(val) {
@ -323,18 +415,18 @@ export default {
},
/**
* @description: 绘制地图
* @description: 绘制多边形地图
* @return {*}
*/
drawMap() {
if (this.drawMarkers.length < 1) {
const map = this.instance.get("map");
// 增加绘图层
const drawLayer = new VectorLayer({
this.drawLayer = new VectorLayer({
source: this.source,
id: "draw",
});
map.addLayer(drawLayer);
map.addLayer(this.drawLayer);
// 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构
const snap = new Snap({
source: this.source,
@ -367,6 +459,8 @@ export default {
this.drawend(e);
});
modify.on("modifyend", (e) => {
console.log(11111111);
e.features.forEach((feature) => {
this.drawMarkers = feature.getGeometry().getCoordinates().flat();
this.$emit("endEoordinate", this.drawMarkers);
@ -376,7 +470,7 @@ export default {
},
/**
* @description: 监听绘制完成的事件
* @description: 监听绘制多边形完成的事件
* @param {*} event
* @return {*}
*/
@ -389,9 +483,10 @@ export default {
// 在 drawend 结束后检查是否有交叉的线段
if (coordinates.length > 3 && this.isSelfCrossing(coordinates)) {
this.$modal.msgWarning("线段交叉，请重新绘制");
this.deletedraw();
this.drawMap();
// map.removeInteraction(this.draw);
this.$nextTick(() => {
this.deletedraw();
this.drawMap();
});
} else {
const map = this.instance.get("map");
map.removeInteraction(this.draw);
@ -399,6 +494,75 @@ export default {
this.$emit("endEoordinate", this.drawMarkers);
},
/**
* @description: 绘制线段地图
* @return {*}
*/
drawLineMap() {
if (this.drawLineMarkers.length < 1) {
const map = this.instance.get("map");
// 增加绘图层
this.drawLineLayer = new VectorLayer({
source: this.sourceLine,
id: "drawLine",
});
map.addLayer(this.drawLineLayer);
// 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构
const snap = new Snap({
source: this.sourceLine,
});
map.addInteraction(snap);
// 添加修改元素使得绘制的多边形可以编辑
const modify = new Modify({ source: this.sourceLine });
map.addInteraction(modify);
this.drawLine = new Draw({
source: this.sourceLine,
type: "LineString",
style: new styleExports.Style({
image: new styleExports.Circle({
radius: 5,
fill: new styleExports.Fill({
color: "blue",
}),
}),
stroke: new styleExports.Stroke({
color: "blue",
width: 2,
}),
fill: new styleExports.Fill({
color: "rgba(0, 0, 255, 0.2)",
}),
}),
});
map.addInteraction(this.drawLine);
this.drawLine.on("drawend", (e) => {
this.drawLineend(e);
});
modify.on("modifyend", (e) => {
e.features.forEach((feature) => {
this.drawLineMarkers = feature.getGeometry().getCoordinates();
this.$emit("endEoordinateLine", this.drawLineMarkers);
});
});
}
},
/**
* @description: 监听绘制线段完成的事件
* @param {*} e
* @return {*}
*/
drawLineend(e) {
const feature = e.feature;
const geometry = feature.getGeometry();
// 获取区域点位
const coordinates = geometry.getCoordinates();
this.drawLineMarkers = coordinates;
this.$emit("endEoordinateLine", this.drawLineMarkers);
const map = this.instance.get("map");
map.removeInteraction(this.drawLine);
},
/**
* @description: 检测交叉点位方法
* @param {*} coordinates
@ -453,22 +617,35 @@ export default {
},
/**
* @description: 删除绘制功能
* @description: 删除绘制多边形功能
* @return {*}
*/
deletedraw() {
const map = this.instance.get("map");
map.removeInteraction(this.draw);
const [layer] = map.getAllLayers().filter((item) => {
return item.get("id") === "draw";
});
map.removeLayer(layer);
this.drawLayer.getSource().clear();
map.removeLayer(this.drawLayer);
this.draw = null;
this.source = new VectorSource();
this.drawMarkers = [];
this.$emit("endEoordinate", []);
},
/**
* @description: 删除绘制线段功能
* @return {*}
*/
deleteLinedraw(){
const map = this.instance.get("map");
map.removeInteraction(this.drawLine);
this.drawLineLayer.getSource().clear();
map.removeLayer(this.drawLineLayer);
this.drawLine = null;
this.source = new VectorSource();
this.drawLineMarkers = [];
this.$emit("endEoordinateLine", []);
},
/**
* @description: 修改地图底图样式
* @param {*} item
@ -612,6 +789,25 @@ export default {
position: absolute;
// left: 1rem;
// top: 1rem;
.draw-line {
width: 1.5rem;
height: 3rem;
background-color: rgb(198, 216, 216);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
i {
cursor: pointer;
padding: 0.1rem 0;
font-size: 1.2rem;
}
.change-map-click {
background-color: rgb(240, 240, 240);
}
}
.draw-map {
width: 1.5rem;

38
src/views/big-screen/components/img-dialog.vue
View File

@ -133,10 +133,7 @@
:style="getRectStyle(item.rectPosition, index)"
@click="clickImage(item)"
>
<div
:style="{ color: colorList[index] }"
class="rect-overlay-text"
>
<div :style="{ color: colorList[index] }" class="rect-overlay-text">
目标详情>>
</div>
</div>
@ -281,8 +278,8 @@ export default {
this.defectData.length > this.currentIndex
) {
// this.showImage(this.currentIndex);
return this.defectData[this.currentIndex].items[this.selectedThumbnail]
.img;
const index = this.defectData[this.currentIndex].items.length - 1;
return this.defectData[this.currentIndex].items[index].img;
}
},
// 下方小列表数据
@ -488,8 +485,10 @@ export default {
// if (this.currentIndex === this.defectData.length - 1) {
// this.loadMoreBottomImages();
// }
this.currentIndex = index;
this.selectedThumbnail = 0; // Reset to the first thumbnail when changing the main item
const indexInfo = this.defectData[this.currentIndex].items.length - 1;
this.selectedThumbnail = indexInfo; // Reset to the first thumbnail when changing the main item
this.scrollToCurrentImage();
this.$nextTick(() => {
this.updateRects();
@ -572,7 +571,8 @@ export default {
event.preventDefault();
if (this.currentIndex > 0) {
this.currentIndex--;
this.selectedThumbnail = 0; // Reset when changing main images via keyboard
const index = this.defectData[this.currentIndex].items.length - 1;
this.selectedThumbnail = index; // Reset when changing main images via keyboard
this.scrollToCurrentImage();
this.updateRects();
}
@ -582,7 +582,8 @@ export default {
this.currentIndex === this.defectData.length - 1
? this.currentIndex
: this.currentIndex++;
this.selectedThumbnail = 0; // Reset when changing main images via keyboard
const index = this.defectData[this.currentIndex].items.length - 1;
this.selectedThumbnail = index; // Reset when changing main images via keyboard
this.scrollToCurrentImage();
this.updateRects();
} else {
@ -610,6 +611,13 @@ export default {
updateRects() {
this.rectItem = [];
if (this.defectData.length > 0) {
if (
this.selectedThumbnail >
this.defectData[this.currentIndex]?.items.length - 1
) {
this.selectedThumbnail =
this.defectData[this.currentIndex]?.items.length - 1;
}
this.rectItem = this.defectData[this.currentIndex]?.items[
this.selectedThumbnail
].children.map((item) => {
@ -665,7 +673,8 @@ export default {
<style lang="scss" scoped>
.app {
width: 100%;
height: 54rem;
// height: 54rem;
height: calc(100vh - 3rem);
display: flex;
flex-direction: row;
background-color: #2e3a46;
@ -741,6 +750,7 @@ export default {
.main-content {
width: calc(100% - 250px);
height: 100%;
background-color: #1b2126;
padding: 10px;
display: flex;
@ -826,6 +836,11 @@ export default {
color: inherit;
font-size: 1.1rem;
}
.el-checkbox__label {
color: inherit;
font-size: 1.1rem;
}
}
}
@ -860,7 +875,8 @@ export default {
}
.image-viewer {
height: 43rem;
// height: 43rem;
height: calc(100% - 9rem);
display: flex;
flex-direction: column;
align-items: center;

4
src/views/big-screen/index.vue
View File

@ -820,7 +820,7 @@ export default {
if (!this.markLayerLines) {
mapPciList().then(({ code, data }) => {
if (code === 200) {
this.lineString = data;
this.lineString = data.filter((item) => item.coordinates !== null);
this.drawLine();
}
});
@ -831,7 +831,7 @@ export default {
drawLine() {
const features = [];
this.lineString.forEach((element) => {
const lines = element?.coordinates?.split(";").map((it) => {
const lines = element?.coordinates?.split(";")?.map((it) => {
return it.split(",").map(Number);
});
const line = new Feature({

306
src/views/xj/route/route-line/index.vue
View File

@ -67,18 +67,6 @@
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['xj:route:edit']"
>修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
@ -118,8 +106,6 @@
<el-table-column label="路线名称" align="center" prop="routeName" />
<el-table-column label="路线全称" align="center" prop="fullName" />
<el-table-column label="方向" align="center" prop="direction" />
<el-table-column label="起点" align="center" prop="startPoint" />
<el-table-column label="终点" align="center" prop="endPoint" />
<el-table-column label="起点桩号" align="center" prop="startMilepost" />
<el-table-column label="止点桩号" align="center" prop="endMilepost" />
<el-table-column label="创建人" align="center" prop="createdBy" />
@ -183,136 +169,118 @@
<el-dialog
:title="title"
:visible.sync="dialogVisible"
:close-on-click-modal="false"
width="80%"
append-to-body
>
<div style="display: flex">
<!-- 左侧表单部分 -->
<div style="flex: 1; padding-right: 40px">
<el-form ref="form" :model="form" :rules="rules" label-width="70px">
<el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="路线编码">
<el-input v-model="form.routeCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="路线名称">
<el-input v-model="form.routeName"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="路线类型">
<el-select
v-model="form.routeType"
placeholder="请选择路线类型"
>
<el-option
v-for="dict in dict.type.bas_road_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12"> </el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-row :gutter="5">
<el-col :span="12">
<el-form-item label="路线全称">
<el-input v-model="form.fullName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="方向">
<el-select
v-model="queryParams.direction"
placeholder="请选择方向"
clearable
>
<el-option
v-for="dict in dict.type.bas_direction"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="起点">
<el-input v-model="form.startPoint"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="终点">
<el-input v-model="form.endPoint"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="起点桩号">
<el-input v-model="form.startMilepost"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="止点桩号">
<el-input v-model="form.endMilepost"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="坐标点">
<el-input
type="textarea"
:disabled="true"
v-model="form.coordinates"
rows="4"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="form.remarks"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
</el-form>
</div>
<template v-if="dialogVisible">
<div style="display: flex">
<!-- 左侧表单部分 -->
<div style="flex: 1; padding-right: 40px">
<el-form
ref="form"
:model="lineForm"
:rules="rules"
label-width="5rem"
>
<el-form-item>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="路线编码" prop="routeCode">
<el-input v-model="lineForm.routeCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="路线名称" prop="routeName">
<el-input v-model="lineForm.routeName"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-row :gutter="24">
<!-- <el-col :span="12">
<el-form-item label="路线全称" prop="fullName">
<el-input v-model="lineForm.fullName"></el-input>
</el-form-item>
</el-col> -->
<el-col :span="24">
<el-form-item label="方向" prop="direction">
<el-select
v-model="lineForm.direction"
placeholder="请选择方向"
style="width: 100%"
clearable
>
<el-option
v-for="dict in dict.type.bas_direction"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<!-- 右侧地图部分 -->
<div style="flex: 1; position: relative">
<!-- <div id="add_map" ref="mapContainer" class="no-hand-cursor"></div> -->
<fssm-map :showDraw="true" class="no-hand-cursor" ref="mapContainer"></fssm-map>
<el-form-item>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="起点桩号" prop="startMilepost">
<el-input v-model="lineForm.startMilepost"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="止点桩号" prop="endMilepost">
<el-input v-model="lineForm.endMilepost"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="坐标点" prop="coordinates">
<el-input
type="textarea"
:disabled="true"
v-model="lineForm.coordinates"
rows="4"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="lineForm.remarks"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
</el-form>
</div>
<!-- 右侧地图部分 -->
<div style="flex: 1; position: relative">
<!-- <div id="add_map" ref="mapContainer" class="no-hand-cursor"></div> -->
<fssm-map
:showLine="true"
@endEoordinateLine="getEndEoordinate"
:editCoordinatesLine="editCoordinatesLine"
class="no-hand-cursor"
ref="mapContainer"
></fssm-map>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
@ -327,12 +295,6 @@ import {
} 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"],
@ -349,8 +311,6 @@ export default {
routeName: "",
routeFullName: "",
direction: "",
startPoint: "",
endPoint: "",
startStake: "",
endStake: "",
coordinates: "",
@ -385,10 +345,9 @@ export default {
routeCode: null,
routeName: null,
fullName: null,
routeType: null,
},
// 表单参数
form: {
lineForm: {
coordinates: "",
},
// 表单校验
@ -403,10 +362,22 @@ export default {
routeName: [
{ required: true, message: "路线名称不能为空", trigger: "blur" },
],
routeType: [
{ required: true, message: "路线类型不能为空", trigger: "change" },
direction: [
{ required: true, message: "方向不能为空", trigger: "change" },
],
startMilepost: [
{ required: true, message: "起点桩号不能为空", trigger: "blur" },
],
endMilepost: [
{ required: true, message: "止点桩号不能为空", trigger: "blur" },
],
coordinates: [
{ required: true, message: "坐标点不能为空", trigger: "blur" },
],
},
// 编辑坐标点
editCoordinatesLine: [],
};
},
created() {
@ -426,19 +397,23 @@ export default {
});
},
/**
* @description: 获取线段坐标点
* @param {coordinates}
* @return {*}
*/
getEndEoordinate(coordinates) {
this.$set(this.lineForm, "coordinates", coordinates.join(";"));
},
/**
* @description: 取消按钮
* @return {*}
*/
cancel() {
this.dialogVisible = false;
},
/**
* @description: 表单重置
* @return {*}
*/
reset() {
this.lineForm = {};
this.editCoordinatesLine = [];
},
/**
@ -475,7 +450,6 @@ export default {
* @return {*}
*/
handleAdd() {
this.reset();
this.dialogVisible = true;
this.title = "添加道路线";
},
@ -486,10 +460,14 @@ export default {
* @return {*}
*/
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getRoute(id).then((response) => {
this.form = response.data;
this.lineForm = response.data;
this.editCoordinatesLine = response.data.coordinates
.split(";")
.map((item) => {
return item.split(",");
});
this.dialogVisible = true;
this.title = "修改道路线";
});
@ -502,14 +480,14 @@ export default {
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
updateRoute(this.form).then((response) => {
if (this.lineForm.id != null) {
updateRoute(this.lineForm).then((response) => {
this.$modal.msgSuccess("修改成功");
this.dialogVisible = false;
this.getList();
});
} else {
addRoute(this.form).then((response) => {
addRoute(this.lineForm).then((response) => {
this.$modal.msgSuccess("新增成功");
this.dialogVisible = false;
this.getList();

39
src/views/xj/route/route-scope/components/scope-add.vue
View File

@ -18,9 +18,9 @@
>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="作业范围名称" prop="segCode">
<el-form-item label="作业范围名称" prop="segmentCode">
<el-input
v-model="dialogForm.segCode"
v-model="dialogForm.segmentCode"
placeholder="请输入作业范围名称"
clearable
></el-input>
@ -93,12 +93,12 @@ export default {
return {
// 表单绑定
dialogForm: {
segCode: "",
segmentCode: "",
roadType: "",
coordinates: "",
},
rules: {
segCode: [
segmentCode: [
{ required: true, message: "作业范围名称不能为空", trigger: "blur" },
],
roadType: [
@ -112,6 +112,7 @@ export default {
},
],
},
// 回显的多边形区域
editCoordinates: [],
};
},
@ -119,8 +120,11 @@ export default {
dialogItem: {
handler(val) {
if (val.title === "修改") {
this.dialogForm = val.item;
// 获取多边形区域
// const a =val.item.coordinates;
const a =
"122.2772084092066,42.1903654574782;122.4566518803403,41.91936930784885;123.0608999272153,41.9541594027907;122.9638539170191,42.419247153717315;122.37425425176474,42.413753989654815;122.36143698071095,42.24529693046514;122.2772084092066,42.1903654574782";
"123.10796364297124,42.017659779208934;123.12993629922124,41.87346422256831;123.35652931679937,41.789693470615184;123.91271217812749,41.76085435928706;123.74379738320562,42.00530016006831;123.35790260781499,42.05199205459956;123.17662819375249,42.10143053116206;123.10796364297124,42.017659779208934";
this.dialogForm.coordinates = a;
this.editCoordinates = a.split(";").map((item) => {
return item.split(",");
@ -128,20 +132,35 @@ export default {
}
},
immediate: true,
deep: true,
// deep: true,
},
},
created() {},
methods: {
/* 获取多边形坐标方法 */
/**
* @description: 获取多边形坐标方法
* @param {list}
* @return {*}
*/
geteoordinate(list) {
this.dialogForm.coordinates = list.join(";");
console.log(list,'ssss');
// this.dialogForm.coordinates = list.join(";");
this.$set(this.dialogForm, "coordinates", list.join(";"));
},
/* 点击取消事件 */
/**
* @description: 点击取消事件
* @return {*}
*/
cancel() {
this.$emit("addCancel");
},
/* 点击确认事件 */
/**
* @description: 点击确认事件
* @return {*}
*/
submitForm() {
this.$refs["dialogForm"].validate((valid) => {
if (valid) {

4
src/views/xj/route/route-scope/index.vue
View File

@ -116,6 +116,7 @@
@close="addCancel"
>
<scope-add
v-if="addVisible"
:bindCarList="bindCarList"
:dialogItem="dialogItem"
@addCancel="addCancel"
@ -220,10 +221,11 @@ export default {
this.multiple = !selection.length;
},
/* 列表修改事件 */
editTable() {
editTable(item) {
this.addTitle = "修改作业范围";
this.dialogItem = {
title: "修改",
item,
};
this.addVisible = true;
},

242
src/views/xj/route/route-section/components/section-add.vue
View File

@ -19,18 +19,18 @@
>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="路段编码" prop="segCode">
<el-form-item label="路段编码" prop="segmentCode">
<el-input
v-model="dialogForm.segCode"
v-model="dialogForm.segmentCode"
placeholder="请输入路段编码"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="路段名称" prop="segName">
<el-form-item label="路段名称" prop="segmentName">
<el-input
v-model="dialogForm.segName"
v-model="dialogForm.segmentName"
placeholder="请输入路段名称"
clearable
></el-input>
@ -60,7 +60,7 @@
placeholder="请选择管理站"
>
<el-option
v-for="dict in dict.type.bas_road_type"
v-for="dict in deptIdList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
@ -137,9 +137,9 @@
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="最大限速" prop="maxspeedLimit">
<el-form-item label="最大限速" prop="maxSpeedLimit">
<el-input-number
v-model="dialogForm.maxspeedLimit"
v-model="dialogForm.maxSpeedLimit"
controls-position="right"
placeholder="请填写最大限速"
:min="0"
@ -166,7 +166,7 @@
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="坐标点" prop="coordinates">
<el-form-item label="路段坐标点" prop="coordinates">
<el-input
type="textarea"
:disabled="true"
@ -177,6 +177,19 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="范围坐标点" prop="polygon">
<el-input
type="textarea"
:disabled="true"
v-model="dialogForm.polygon"
rows="4"
resize="none"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="备注">
@ -187,7 +200,16 @@
</el-form>
</div>
<div class="right-map">
<div id="add_map" ref="mapContainer"></div>
<fssm-map
:showLine="true"
:showDraw="true"
id="add_map"
ref="mapContainer"
@endEoordinateLine="getEndEoordinate"
@endEoordinate="getEndPolygon"
:editCoordinates="editCoordinates"
:editCoordinatesLine="editCoordinatesLine"
></fssm-map>
</div>
</div>
<div class="dialog-footer">
@ -199,8 +221,12 @@
<script>
import { addSection, updateSection } from "@/api/xj/section";
import FssmMap from "@/components/map/fssm-map.vue";
export default {
name: "SectionAdd",
components: {
FssmMap,
},
dicts: ["bas_road_type", "bas_direction"],
props: {
dialogItem: {
@ -211,13 +237,17 @@ export default {
type: Array,
default: () => [],
},
deptIdList: {
type: Array,
default: () => [],
},
},
data() {
return {
// 表单绑定
dialogForm: {
segCode: "",
segName: "",
segmentCode: "",
segmentName: "",
roadType: "",
deptId: "",
stakeStart: "",
@ -226,17 +256,20 @@ export default {
mileage: "",
laneCount: "",
curingLevel: "",
maxspeedLimit: "",
city: "沈阳市",
district: "和平区",
maxSpeedLimit: "",
routeId: "",
coordinates: "",
polygon: "",
mark: "",
},
// 表单验证规则
rules: {
segCode: [
segmentCode: [
{ required: true, message: "路段编码不能为空", trigger: "blur" },
],
segName: [
segmentName: [
{ required: true, message: "路段名称不能为空", trigger: "blur" },
],
roadType: [
@ -267,164 +300,67 @@ export default {
curingLevel: [
{ required: true, message: "养护级别不能为空", trigger: "blur" },
],
maxspeedLimit: [
maxSpeedLimit: [
{ required: true, message: "最大限速不能为空", trigger: "blur" },
],
routeId: [{ required: true, message: "请选择路线", trigger: "change" }],
coordinates: [
{ required: true, message: "请在右侧地图添加路段", trigger: "blur" },
],
polygon: [
{ required: true, message: "请在右侧地图添加范围", trigger: "blur" },
],
},
// 养护单位下拉数据
deptOptions: [],
// 上一点位
previousPoint: null,
// 保存所有添加的连线
lines: [],
// 保存所有添加的点
markers: [],
// 地图右键菜单显隐控制
menuOpen: false,
// 编辑线段坐标点
editCoordinatesLine: [],
// 编辑范围坐标点
editCoordinates: [],
};
},
watch: {
// 监听弹窗数据
dialogItem: {
handler(val) {
if (val.title === "修改") {
this.$nextTick(() => {
this.initMap();
this.drawExistingCoordinates(this.dialogForm.coordinates);
});
} else {
this.$nextTick(() => {
this.initMap();
this.dialogForm = val.item;
this.editCoordinates = val.item.polygon.split(";").map((item) => {
return item.split(",");
});
this.editCoordinatesLine = val.item.coordinates
.split(";")
.map((item) => {
return item.split(",");
});
console.log(val, "ddssss");
}
},
immediate: true,
deep: true,
},
},
mounted() {
// this.initMap();
},
mounted() {},
methods: {
/* 初始化地图 */
initMap() {
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);
/**
* @description: 获取线段坐标点
* @param {coordinates}
* @return {*}
*/
getEndEoordinate(coordinates) {
this.$set(this.dialogForm, "coordinates", coordinates.join(";"));
},
/* 地图单击事件 */
onMapClick(e) {
if (this.menuOpen) {
this.menuOpen = false;
return;
}
const latLng = e.lnglat;
const point = `${latLng.lng},${latLng.lat}`;
// 追加经纬度到textarea
if (this.dialogForm.coordinates == null) {
this.dialogForm.coordinates = "";
}
this.dialogForm.coordinates += this.dialogForm.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; // 记录上一个点
},
/* 地图右键事件 */
onMapRightClick() {
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);
},
/* 地图右键撤销事件 */
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.dialogForm.coordinates.split(";");
coordArr.pop(); // 移除最后一个坐标
this.dialogForm.coordinates = coordArr.join(";");
/**
* @description: 获取范围坐标点
* @param {polygon}
* @return {*}
*/
getEndPolygon(polygon) {
this.$set(this.dialogForm, "polygon", polygon.join(";"));
},
/* 回显地图路径 */
drawExistingCoordinates(e) {
const coordArr = e.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;
},
/* 清空坐标点/地图上的所有覆盖物 */
resetMap() {
this.dialogForm.coordinates = "";
this.previousPoint = null;
this.map.clearOverLays();
this.markers = [];
this.lines = [];
},
/* 点击确定事件 */
/**
* @description: 点击确定事件
* @return {*}
*/
submitForm() {
this.$refs["dialogForm"].validate((valid) => {
if (valid) {
@ -444,7 +380,11 @@ export default {
}
});
},
/* 点击取消事件 */
/**
* @description: 点击取消事件
* @return {*}
*/
cancel() {
this.$emit("addCancel");
},
@ -455,10 +395,10 @@ export default {
<style lang="scss" scoped>
.add-content {
width: 100%;
height: 35rem;
height: 40rem;
> div {
height: 32.5rem;
height: 37.5rem;
display: flex;
.left-form {

107
src/views/xj/route/route-section/index.vue
View File

@ -86,7 +86,12 @@
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="路段编码" align="center" prop="segmentCode" />
<el-table-column label="路段名称" align="center" prop="segmentName" />
<el-table-column
label="路段名称"
show-overflow-tooltip
align="center"
prop="segmentName"
/>
<el-table-column label="道路类型" align="center" prop="roadType" />
<el-table-column label="里程" align="center" prop="mileage" />
<el-table-column label="路宽" align="center" prop="width" />
@ -140,11 +145,12 @@
append-to-body
:close-on-click-modal="false"
destroy-on-close
@close="addCancel"
>
<section-add
v-if="addVisible"
:dialogItem="dialogItem"
:routeList="routeList"
:deptIdList="deptIdList"
@addCancel="addCancel"
></section-add>
</el-dialog>
@ -156,6 +162,7 @@ import {
getSectionList,
deleteSection,
getSegmentList,
getDeptList,
} from "@/api/xj/section";
import SectionAdd from "./components/section-add.vue";
@ -194,15 +201,32 @@ export default {
dialogItem: {},
// 路线下拉数据
routeList: [],
// 管理站下拉数据
deptIdList: [],
};
},
mounted() {},
created() {
mounted() {
this.getTableList();
},
created() {
this.getRoadList();
this.getDeptIdList();
},
methods: {
/* 获取路线下拉数据 */
/**
* @description: 获取管理站下拉数据
* @return {*}
*/
getDeptIdList() {
getDeptList().then(({ data }) => {
this.deptIdList = data;
});
},
/**
* @description: 获取路线下拉数据
* @return {*}
*/
getRoadList() {
getSegmentList().then(({ code, data }) => {
if (code === 200) {
@ -210,12 +234,20 @@ export default {
}
});
},
/* 点击搜索事件 */
/**
* @description: 点击搜索事件
* @return {*}
*/
handleQuery() {
this.searchForm = JSON.parse(JSON.stringify(this.sectionForm));
this.getTableList();
},
/* 点击重置事件 */
/**
* @description: 点击重置事件
* @return {*}
*/
resetQuery() {
this.sectionForm = {
// segmentCode: "",
@ -224,7 +256,11 @@ export default {
this.searchForm = {};
this.getTableList();
},
/* 获取列表数据 */
/**
* @description: 获取列表数据
* @return {*}
*/
getTableList() {
const params = {
...this.searchForm,
@ -233,10 +269,15 @@ export default {
getSectionList(params).then(({ code, data }) => {
if (code === 200) {
this.sectionList = data.rows;
this.tableTotal = data.total;
}
});
},
/* 点击新增 */
/**
* @description: 点击新增
* @return {*}
*/
handleAdd() {
this.addTitle = "新增路段";
this.dialogItem = {
@ -244,23 +285,40 @@ export default {
};
this.addVisible = true;
},
/* 点击导出 */
/**
* @description: 点击导出
* @return {*}
*/
handleExport() {},
/* 列表选择改变事件 */
/**
* @description: 列表选择改变事件
* @return {*}
*/
handleSelectionChange(selection) {
this.checkIds = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/* 列表修改事件 */
editTable() {
/**
* @description: 列表修改事件
* @return {*}
*/
editTable(item) {
this.addTitle = "修改路段";
this.dialogItem = {
title: "修改",
item,
};
this.addVisible = true;
},
/* 列表删除/批量删除事件 */
/**
* @description: 列表删除/批量删除事件
* @return {*}
*/
deleteTable(row) {
const checkIds = row ? [row.id] : this.checkIds;
if (!checkIds.length) {
@ -279,21 +337,34 @@ export default {
})
.catch(() => {});
},
/* 切换分页 */
/**
* @description: 切换分页
* @return {*}
*/
handleCurrentChange(arg) {
this.pagination.page = arg;
this.getTableList();
},
/* 切换每条/页 */
/**
* @description: 切换每条/页
* @return {*}
*/
handleSizeChange(arg) {
this.pagination.size = arg;
this.getTableList();
},
/* 关闭弹窗事件 */
/**
* @description: 关闭弹窗事件
* @return {*}
*/
addCancel() {
this.addVisible = false;
this.addTitle = "";
this.dialogItem = {};
this.addVisible = false;
this.getTableList();
},
},
};