fix：大屏修改查看详情弹窗，增加地图取消选择事件，病害巡检今日巡查修改
This commit is contained in:
parent
98ff8d75ec
commit
0a090e70d8
@ -123,6 +123,7 @@ export default {
|
||||
drawMarkers: [],
|
||||
// 当前地图层级
|
||||
sendZoom: "",
|
||||
selectSingClick: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -268,9 +269,9 @@ export default {
|
||||
this.$emit("map-moveend", zoom);
|
||||
});
|
||||
// 图层选择事件
|
||||
let selectSingClick = new Select({ style: null });
|
||||
map.addInteraction(selectSingClick);
|
||||
selectSingClick.on("select", (e) => {
|
||||
this.selectSingClick = new Select({ style: null });
|
||||
map.addInteraction(this.selectSingClick);
|
||||
this.selectSingClick.on("select", (e) => {
|
||||
this.$emit("feature-select", e);
|
||||
// let selectedFeatures = e.selected;
|
||||
// if (selectedFeatures.length > 0) {
|
||||
@ -305,6 +306,11 @@ export default {
|
||||
this.instance.set("map", map);
|
||||
this.instance.set("overlay-list", []);
|
||||
},
|
||||
|
||||
/* 删除图层选择对象 */
|
||||
removeSelectClick() {
|
||||
this.selectSingClick.getFeatures().clear();
|
||||
},
|
||||
/* 绘制地图 */
|
||||
drawMap() {
|
||||
if (this.drawMarkers.length < 1) {
|
||||
|
||||
@ -85,14 +85,14 @@
|
||||
<el-input
|
||||
v-model="imgForm.stakeStart"
|
||||
placeholder="起始公里桩"
|
||||
style="width: 6rem"
|
||||
style="width: 8rem"
|
||||
clearable
|
||||
/>
|
||||
<span style="margin: 0 5px">-</span>
|
||||
<el-input
|
||||
v-model="imgForm.stakeEnd"
|
||||
placeholder="终止公里桩"
|
||||
style="width: 6rem"
|
||||
style="width: 8rem"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
@ -128,22 +128,45 @@
|
||||
<div class="image-container" ref="imageContainer">
|
||||
<div
|
||||
class="rect-overlay"
|
||||
v-for="(item, index) in rectItem"
|
||||
v-for="(item, index) in checkedRectList"
|
||||
:key="`rect-overlay-${index}`"
|
||||
: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>
|
||||
<div class="rect-image">
|
||||
<div
|
||||
<el-checkbox-group
|
||||
v-model="checkedRect"
|
||||
@change="handleCheckedRectChange"
|
||||
>
|
||||
<el-checkbox
|
||||
class="image-info"
|
||||
v-for="(item, index) in rectItem"
|
||||
:label="item.id"
|
||||
:key="`image-info-${index}`"
|
||||
:style="{ color: colorList[index] }"
|
||||
>采集时间:
|
||||
{{ new Date(item.createdTime).toLocaleString() }} 起始桩号:
|
||||
{{ item.stakeStart || "暂无数据" }} 终止桩号:
|
||||
{{ item.stakeEnd || "暂无数据" }}
|
||||
病害类型:
|
||||
{{ item.type || "暂无数据" }} 病害面积：{{ item.area }}平方米
|
||||
病害长度{{ item.length }}米</el-checkbox
|
||||
>
|
||||
</el-checkbox-group>
|
||||
<!-- <div
|
||||
class="image-info"
|
||||
v-for="(item, index) in rectItem"
|
||||
:key="`image-info-${index}`"
|
||||
:style="{ color: colorList[index] }"
|
||||
>
|
||||
|
||||
采集时间:
|
||||
{{ new Date(item.createdTime).toLocaleString() }} 起始桩号:
|
||||
{{ item.stakeStart || "暂无数据" }} 终止桩号:
|
||||
@ -151,7 +174,7 @@
|
||||
病害类型:
|
||||
{{ item.type || "暂无数据" }} 病害面积：{{ item.area }}平方米
|
||||
病害长度{{ item.length }}米
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<img
|
||||
:src="currentImage"
|
||||
@ -209,6 +232,10 @@ export default {
|
||||
currentIndex: 0,
|
||||
// 下方点击的index绑定
|
||||
selectedThumbnail: 0,
|
||||
// 选中框绑定
|
||||
checkedRect: [],
|
||||
// 顶端选中框数据
|
||||
checkedRectList: [],
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表单绑定
|
||||
@ -564,7 +591,22 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 图片位置信息获取 */
|
||||
/**
|
||||
* @description: 选择框修改事件
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
handleCheckedRectChange(val) {
|
||||
this.checkedRectList = this.rectItem.filter((item) => {
|
||||
return val.includes(item.id);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 图片位置信息获取
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
updateRects() {
|
||||
this.rectItem = [];
|
||||
if (this.defectData.length > 0) {
|
||||
@ -576,6 +618,8 @@ export default {
|
||||
rectPosition: item.rect?.split(",").map(Number),
|
||||
};
|
||||
});
|
||||
this.checkedRectList = this.rectItem;
|
||||
this.checkedRect = this.rectItem.map((item) => item.id);
|
||||
}
|
||||
},
|
||||
|
||||
@ -621,9 +665,9 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 54rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 45rem;
|
||||
background-color: #2e3a46;
|
||||
}
|
||||
|
||||
@ -720,7 +764,7 @@ export default {
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 8rem;
|
||||
width: 12rem;
|
||||
|
||||
.el-input--small .el-input__inner {
|
||||
color: #ffffff;
|
||||
@ -767,16 +811,21 @@ export default {
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
.image-info {
|
||||
::v-deep .image-info {
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
color: inherit;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -805,13 +854,13 @@ export default {
|
||||
|
||||
// 图片信息
|
||||
.rect-image {
|
||||
width: 80%;
|
||||
width: 67%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.image-viewer {
|
||||
height: 34rem;
|
||||
height: 43rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 09:59:32
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-18 13:37:03
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-safety.vue
|
||||
* @LastEditTime: 2024-11-21 09:05:48
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-safety.vue
|
||||
* @Description: 病害巡检大屏-今日巡查
|
||||
-->
|
||||
|
||||
@ -17,8 +17,12 @@
|
||||
<span>{{ all }}</span
|
||||
>个
|
||||
</div>
|
||||
<div class="right-rate">
|
||||
<!-- <div class="right-rate">
|
||||
<span> {{ scale }} </span>%
|
||||
</div> -->
|
||||
<div class="right-rate">
|
||||
较昨日<span class="up">增长</span> 50.26%
|
||||
<i class="el-icon-top"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -691,32 +695,51 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// .right-rate {
|
||||
// width: 100%;
|
||||
// height: 4rem;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// padding-left: 1rem;
|
||||
// line-height: 3rem;
|
||||
// // background-image: url("../../../assets/screen/traffic/right-rate.png");
|
||||
// background-image: url("~@/assets/screen/disease/right-rate.png");
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100%;
|
||||
// background-position: 100% 50%;
|
||||
// color: #aac6c7;
|
||||
// font-size: 0.9rem;
|
||||
|
||||
// span {
|
||||
// margin-right: 0.5rem;
|
||||
// font-size: 1.2rem;
|
||||
// font-family: "DouYu";
|
||||
// background: linear-gradient(
|
||||
// to bottom,
|
||||
// #ffffff,
|
||||
// #e9bc5c
|
||||
// ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
// background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
// -webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
// }
|
||||
// }
|
||||
|
||||
.right-rate {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
height: 45%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 1rem;
|
||||
line-height: 3rem;
|
||||
// background-image: url("../../../assets/screen/traffic/right-rate.png");
|
||||
background-image: url("~@/assets/screen/disease/right-rate.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color: #aac6c7;
|
||||
align-items: center;
|
||||
font-family: "DouYu";
|
||||
font-size: 0.9rem;
|
||||
|
||||
span {
|
||||
margin-right: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
font-family: "DouYu";
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#e9bc5c
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
.up {
|
||||
color: #ff2e2e;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.el-icon-top {
|
||||
font-size: 1.5rem;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-20 17:08:11
|
||||
* @LastEditTime: 2024-11-21 09:12:52
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -249,8 +249,9 @@
|
||||
<el-dialog
|
||||
:title="imgTitle"
|
||||
:visible.sync="imgVisible"
|
||||
width="85rem"
|
||||
width="95rem"
|
||||
append-to-body
|
||||
fullscreen
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="imgCancel"
|
||||
@ -266,7 +267,7 @@
|
||||
<el-dialog
|
||||
title="查看点位"
|
||||
:visible.sync="showImageDialog"
|
||||
width="80rem"
|
||||
width="90rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@ -484,8 +485,6 @@ export default {
|
||||
clusters: null,
|
||||
// 线段图层
|
||||
markLayerLines: null,
|
||||
// 地图选中图层
|
||||
selectedFeatures:null,
|
||||
|
||||
// 图片弹窗标题
|
||||
imgTitle: "查看",
|
||||
@ -660,11 +659,7 @@ export default {
|
||||
|
||||
/* 关闭查看点位大图弹窗 */
|
||||
screenImgCancel() {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeInteraction(this.selectedFeatures);
|
||||
this.selectedFeatures = null;
|
||||
});
|
||||
this.$refs.roadMap.removeSelectClick();
|
||||
this.showImageDialog = false;
|
||||
},
|
||||
|
||||
@ -716,7 +711,8 @@ export default {
|
||||
return [];
|
||||
});
|
||||
// 如果不是病害巡检，则绘制点位
|
||||
if (this.elementDiv !== "DiseaseScreen") {
|
||||
// 如果图片弹窗打开，则绘制点位
|
||||
if (this.elementDiv !== "DiseaseScreen" || this.imgVisible) {
|
||||
this.drawPoint();
|
||||
}
|
||||
}
|
||||
@ -944,9 +940,9 @@ export default {
|
||||
/* 地图选中feature事件 */
|
||||
featureSelect(e) {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
this.selectedFeatures = e.selected;
|
||||
if (this.selectedFeatures.length > 0) {
|
||||
let feature = this.selectedFeatures[0];
|
||||
const selectedFeatures = e.selected;
|
||||
if (selectedFeatures.length > 0) {
|
||||
let feature = selectedFeatures[0];
|
||||
let features = feature.get("features");
|
||||
// 点击线段事件
|
||||
if (feature.getProperties().type === "line") {
|
||||
@ -1582,6 +1578,10 @@ export default {
|
||||
}
|
||||
|
||||
/* 修改弹窗样式 */
|
||||
::v-deep .el-dialog {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__header {
|
||||
padding: 10px;
|
||||
background-color: #113463;
|
||||
@ -1626,6 +1626,7 @@ export default {
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 1.2rem;
|
||||
color: #ffffff;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user