ljf
/
shuili-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'release-sy-v1.0.0' into 'dev' 

Release sy v1.0.0

See merge request project/water/shuili-vue!56
master_tdsql
潘裕艺 1 year ago
parent
0fa9d597fe 996c432b76
commit
d78b1bea40
2 changed files with 204 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 79
      src/views/dike/runManage/enginerring/components/Drawer.vue
  2. 228
      src/views/dike/runManage/enginerring/components/GaoDeMap.vue

79
src/views/dike/runManage/enginerring/components/Drawer.vue
View File

@ -68,13 +68,11 @@ export default {
let _xcTreeData = this.transformArr(dictData?.data);
const detailData = await getDikePatrolDetails(this.$route.query.id);
console.log("detailData >>>>> ", detailData);
if (detailData?.data?.items) {
// 匹配xcTreeData
this.matchXcTreeData(_xcTreeData, detailData.data.items);
}
this.xcTreeData = _xcTreeData;
console.log("最后结果 >>>>> ", this.xcTreeData);
},
},
created() {
@ -170,7 +168,30 @@ export default {
</div>
<div
class="w-p-50 flex items-center p-2 r-b-border h-full"
></div>
>
<el-image
v-for="(url, index) in item3.images"
style="width: 120px; min-height: 80px; height: auto"
:src="url"
class="mr-4 mb-4"
:key="index"
:preview-src-list="[url]"
>
<template #error>
<div
class="w-full flex justify-center items-center"
style="
height: 100px;
border: 1px solid #f0f0f0;
font-style: italic;
color: #ccc;
"
>
图片加载失败
</div>
</template>
</el-image>
</div>
</div>
</div>
</div>
@ -180,7 +201,28 @@ export default {
{{ item2.problem }}
</div>
<div class="w-p-50 flex items-center p-2 r-b-border h-full">
{{ item2.images }}
<el-image
v-for="(url, index) in item2.images"
style="width: 120px; min-height: 80px; height: auto"
:src="url"
:key="index"
class="mr-4 mb-4"
:preview-src-list="[url]"
>
<template #error>
<div
class="w-full flex justify-center items-center"
style="
height: 100px;
border: 1px solid #f0f0f0;
font-style: italic;
color: #ccc;
"
>
图片加载失败
</div>
</template>
</el-image>
</div>
</div>
</div>
@ -191,7 +233,28 @@ export default {
{{ item.problem }}
</div>
<div class="w-p-50 flex items-center p-2 r-b-border h-full">
{{ item.images }}
<el-image
v-for="(url, index) in item.images"
style="width: 120px; min-height: 80px; height: auto"
:src="url"
:key="index"
class="mr-4 mb-4"
:preview-src-list="[url]"
>
<template #error>
<div
class="w-full flex justify-center items-center"
style="
height: 100px;
border: 1px solid #f0f0f0;
font-style: italic;
color: #ccc;
"
>
图片加载失败
</div>
</template>
</el-image>
</div>
</div>
</div>
@ -208,12 +271,12 @@ export default {
top: 0;
width: 70%;
height: 100%;
right: 0;
right: -70%;
z-index: 10;
background-color: #fff;
transition: left 0.5s ease-in-out;
box-shadow: -8px 0px 38px 0px rgba(0, 0, 0, 0.6);
transform: all 0.5s;
.close-btn {
width: 32px;
height: 32px;
@ -249,7 +312,7 @@ export default {
}
.masking-in {
left: 50%;
right: 0;
}
.l-t-border {

228
src/views/dike/runManage/enginerring/components/GaoDeMap.vue
View File

@ -1,42 +1,69 @@
<!-- 高德地图 -->
<template>
<div style="height: 100%;">
<div id="container" @mouseenter="showTooltip = true" @mouseout="showTooltip = false"
@mousemove="updateTooltipPosition" style="zoom: calc(1 / 0.8)">
<div class="tooltip" v-if="showTooltip" :style="{ top: tooltipTop + 'px', left: tooltipLeft + 'px' }">
<div style="height: 100%">
<div
id="container"
@mouseenter="showTooltip = true"
@mouseout="showTooltip = false"
@mousemove="updateTooltipPosition"
style="zoom: calc(1 / 0.8)"
>
<div
class="tooltip"
v-if="showTooltip"
:style="{ top: tooltipTop + 'px', left: tooltipLeft + 'px' }"
>
左键选点，双击结束绘制，右键取消绘制
</div>
<Drawer :drawer-visible="drawerVisible" @close-drawer="drawerVisible = false"></Drawer>
<Drawer
:drawer-visible="drawerVisible"
@close-drawer="drawerVisible = !drawerVisible"
></Drawer>
</div>
<el-button class="open-drawer-btn" size="mini" @click="drawerVisible = true">展开抽屉</el-button>
<el-button class="open-drawer-btn" size="mini" @click="drawerVisible = true"
>展开抽屉</el-button
>
<div class="box">
<el-button size="mini" @click="addPoint = true">
<svg-icon icon-class="icon-line" />
绘制线路</el-button>
<el-button :disabled="checkpoints.length < 1" style="width: 29px; padding: 7px;" size="mini"
@click="clearLine"><svg-icon icon-class="icon-clear" /></el-button>
绘制线路</el-button
>
<el-button
:disabled="checkpoints.length < 1"
style="width: 29px; padding: 7px"
size="mini"
@click="clearLine"
><svg-icon icon-class="icon-clear"
/></el-button>
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { postDFInspectionRoute, postSZInspectionRoute, getDFInspectionRoute, getSZInspectionRoute, postDFInspectionRecordsTrajectoryList, postSZInspectionRecordsTrajectoryList } from '@/api/management'
import Drawer from './Drawer.vue'
import {
postDFInspectionRoute,
postSZInspectionRoute,
getDFInspectionRoute,
getSZInspectionRoute,
postDFInspectionRecordsTrajectoryList,
postSZInspectionRecordsTrajectoryList,
} from "@/api/management";
import Drawer from "./Drawer.vue";
export default {
name: "map-view",
props: {
type: {
type: String,
default: ''
}
default: "",
},
},
components: { Drawer },
data() {
return {
drawerVisible: false, //抽屉开关
addPoint: false, //是否允许添加点位
showTooltip: false, //展示鼠标提示
drawerVisible: false, //抽屉开关
addPoint: false, //是否允许添加点位
showTooltip: false, //展示鼠标提示
addSum: 0,
tooltipLeft: 0,
tooltipTop: 0,
@ -66,19 +93,19 @@ export default {
methods: {
// 获取鼠标位置
updateTooltipPosition(event) {
this.tooltipLeft = event.clientX - ((296 + 15) / 8 * 10);
this.tooltipTop = event.clientY - (174 / 8 * 10);
this.tooltipLeft = event.clientX - ((296 + 15) / 8) * 10;
this.tooltipTop = event.clientY - (174 / 8) * 10;
},
// 渲染线段
renderedPolyline() {
this.map.remove(this.map.getAllOverlays('polyline'));
this.map.remove(this.map.getAllOverlays("polyline"));
if (this.checkpoints.length > 1) {
const polyline = new this.AMap.Polyline({
path: this.checkpoints.map((checkpoint) => checkpoint.location),
strokeColor: "#37E4FF",
strokeWeight: 4,
strokeOpacity: 1,
bubble: true
bubble: true,
});
polyline.setMap(this.map);
}
@ -87,42 +114,44 @@ export default {
addCheckpoint(name, location) {
const icon = new this.AMap.Icon({
size: new this.AMap.Size(20, 20),
image: require('@/assets/image/map-point.png'),
image: require("@/assets/image/map-point.png"),
imageSize: new AMap.Size(20, 20),
anchor: 'center',
})
anchor: "center",
});
const marker = new this.AMap.Marker({
position: location,
title: name,
icon,
anchor: 'bottom-center',
anchor: "bottom-center",
bubble: true,
label: { content: name, direction: 'top' },
label: { content: name, direction: "top" },
});
marker.on("mouseover", () => {
this.showTooltip = true
this.showTooltip = true;
}),
marker.on("mouseout", () => {
this.showTooltip = true
this.showTooltip = true;
}),
marker.setMap(this.map);
this.checkpoints.push({ name, location, marker });
this.renderedPolyline()
this.renderedPolyline();
},
// 修改选中点位
selectCheckpoint(checkpoint) {
const icon = new this.AMap.Icon({
size: new this.AMap.Size(20, 20),
image: require('@/assets/image/map-point.png'),
image: require("@/assets/image/map-point.png"),
imageSize: new AMap.Size(20, 20),
anchor: 'center',
})
anchor: "center",
});
this.map.setCenter(checkpoint.location);
this.map.setZoom(18)
this.map.setZoom(18);
this.checkpoints.forEach((cp) => {
const marker = cp.marker;
if (cp === checkpoint) {
marker.setIcon('https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png');
marker.setIcon(
"https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
);
} else {
marker.setIcon(icon);
}
@ -131,52 +160,52 @@ export default {
// 清空路线
clearLine() {
// this.removeLastCheckpoint();
this.addSum = 0
this.addSum = 0;
this.checkpoints.forEach((checkpoint) => {
checkpoint.marker.setMap(null); // 将每个点位的 marker 从地图上移除
});
this.checkpoints = []; // 清空 checkpoints 数组
this.renderedPolyline() // 清空连线
this.saveInspectionRoute() // 保存
this.renderedPolyline(); // 清空连线
this.saveInspectionRoute(); // 保存
},
// 删除最后一个点位
removeLastCheckpoint() {
const lastCheckpoint = this.checkpoints.pop();
const marker = lastCheckpoint.marker;
marker.setMap(null);
this.renderedPolyline()
this.renderedPolyline();
},
// 保存巡查路线
saveInspectionRoute() {
let data = []
this.checkpoints.forEach(element => {
let data = [];
this.checkpoints.forEach((element) => {
let a = {
longitude: element.location[0],
latitude: element.location[1]
}
data.push(a)
latitude: element.location[1],
};
data.push(a);
});
switch (this.type) {
case 'DF':
case "DF":
postDFInspectionRoute(this.$route.query.id, data).then((res) => {
this.$message({
message: '保存成功',
type: 'success'
message: "保存成功",
type: "success",
});
})
});
break;
case 'SZ':
case "SZ":
postSZInspectionRoute(this.$route.query.id, data).then((res) => {
this.$message({
message: '保存成功',
type: 'success'
message: "保存成功",
type: "success",
});
})
});
break;
default:
console.log('未选中');
console.log("未选中");
break;
}
},
@ -188,132 +217,142 @@ export default {
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
this.AMap = AMap
var satellite = new AMap.TileLayer.Satellite() // 创建卫星图层
this.AMap = AMap;
var satellite = new AMap.TileLayer.Satellite(); // 创建卫星图层
this.map = new AMap.Map("container", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 15, // 初始化地图级别
doubleClickZoom: false, // 禁用双击放大
layers: [
satellite,
],
center: [112.90,23.36], // 初始化地图中心点位置
layers: [satellite],
center: [112.9, 23.36], // 初始化地图中心点位置
});
// 在地图加载完成后执行操作
this.map.on("complete", () => {
console.log('🚀地图加载完毕🚀')
console.log("🚀地图加载完毕🚀");
if (this.$route.query.editor) {
// 添加点位
switch (this.type) {
case 'DF':
case "DF":
getDFInspectionRoute(this.$route.query.id).then((res) => {
res.data.forEach((element, index) => {
this.addCheckpoint("检查点" + (index + 1), [element.longitude, element.latitude])
this.addCheckpoint("检查点" + (index + 1), [
element.longitude,
element.latitude,
]);
});
})
});
break;
case 'SZ':
case "SZ":
getSZInspectionRoute(this.$route.query.id).then((res) => {
res.data.forEach((element, index) => {
this.addCheckpoint("检查点" + (index + 1), [element.longitude, element.latitude])
this.addCheckpoint("检查点" + (index + 1), [
element.longitude,
element.latitude,
]);
});
})
});
break;
default:
console.log('未选中');
console.log("未选中");
break;
}
} else {
switch (this.type) {
case 'DF':
case "DF":
postDFInspectionRecordsTrajectoryList({
data: {
timeView: {
timeField: "create_time"
timeField: "create_time",
},
recordId: this.$route.query.id
recordId: this.$route.query.id,
},
cv: {
name: "name",
type: "like",
},
pageSize: 100,
pageNum: 1
pageNum: 1,
}).then((res) => {
console.log('🚀res🚀', res)
console.log("🚀res🚀", res);
res.records.forEach((element, index) => {
this.addCheckpoint("检查点" + (index + 1), [element.longitude, element.latitude])
this.addCheckpoint("检查点" + (index + 1), [
element.longitude,
element.latitude,
]);
});
})
});
break;
case 'SZ':
case "SZ":
postSZInspectionRecordsTrajectoryList({
data: {
timeView: {
timeField: "create_time"
timeField: "create_time",
},
recordId: this.$route.query.id
recordId: this.$route.query.id,
},
cv: {
name: "name",
type: "like",
},
pageSize: 100,
pageNum: 1
pageNum: 1,
}).then((res) => {
console.log('🚀res🚀', res)
console.log("🚀res🚀", res);
res.records.forEach((element, index) => {
this.addCheckpoint("检查点" + (index + 1), [element.longitude, element.latitude])
this.addCheckpoint("检查点" + (index + 1), [
element.longitude,
element.latitude,
]);
});
})
});
break;
default:
console.log('未选中');
console.log("未选中");
break;
}
}
// 给点位添加连接线
if (this.checkpoints.length > 1) {
this.renderedPolyline()
this.renderedPolyline();
}
});
if (this.$route.query.editor) {
// 点击添加检查点
this.map.on('click', (e) => {
this.map.on("click", (e) => {
if (this.addPoint) {
this.addSum++
this.addSum++;
const { lng, lat } = e.lnglat;
const name = `检查点${this.checkpoints.length + 1}`;
this.addCheckpoint(name, [lng, lat]);
} else {
this.$message({
message: '请先点击绘制线路',
type: 'warning'
message: "请先点击绘制线路",
type: "warning",
});
}
});
// 双击保存
this.map.on('dblclick', () => {
this.map.on("dblclick", () => {
if (this.addPoint) {
this.addSum = 0
this.saveInspectionRoute()
console.log('双击保存', this.checkpoints);
this.addPoint = false
this.addSum = 0;
this.saveInspectionRoute();
console.log("双击保存", this.checkpoints);
this.addPoint = false;
}
});
// 右键取消保存
this.map.on('rightclick', () => {
this.map.on("rightclick", () => {
for (let i = 0; i < this.addSum; i++) {
this.removeLastCheckpoint()
this.removeLastCheckpoint();
}
this.addSum = 0
})
this.addSum = 0;
});
}
})
.catch((e) => {
@ -328,7 +367,6 @@ export default {
width: 100%;
height: 100%;
position: relative;
}
.open-drawer-btn {

Write Preview
Loading…
Cancel
Save