fix：大屏线段打点逻辑修改,查看点位修改
This commit is contained in:
+215
-24
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-07 09:09:50
|
||||
* @LastEditTime: 2024-11-07 12:01:48
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@@ -96,7 +96,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右上角切换坐标类型多选框 -->
|
||||
<div class="road-checkBox" v-if="!showImgBk && this.mapZoom >= 13">
|
||||
<div class="road-checkBox" v-if="!showImgBk">
|
||||
<fssm-scroll class="road-scroll">
|
||||
<el-checkbox-group v-model="iconType" @change="handleChecked">
|
||||
<el-checkbox
|
||||
@@ -108,6 +108,22 @@
|
||||
</el-checkbox-group>
|
||||
</fssm-scroll>
|
||||
</div>
|
||||
<!-- 切换路段选项框 -->
|
||||
<div class="road-checkBox-twe" v-if="!showImgBk">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="roadSelect"
|
||||
placeholder="请选择路段"
|
||||
@change="getCenterPiont"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roadList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- 图片背景 -->
|
||||
<div class="disease-content" v-if="showImgBk">
|
||||
<div class="disease-title"></div>
|
||||
@@ -178,6 +194,32 @@
|
||||
>
|
||||
<img-dialog></img-dialog>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 查看点位图片弹窗 -->
|
||||
<el-dialog
|
||||
title="查看点位"
|
||||
:visible.sync="showImageDialog"
|
||||
width="80rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="screenImgCancel"
|
||||
>
|
||||
<div class="image-container" ref="imageContainer">
|
||||
<img
|
||||
:src="screenImage.imageUrl"
|
||||
alt="Main Image"
|
||||
ref="mainImage"
|
||||
@load="updateScreenRects"
|
||||
/>
|
||||
<div
|
||||
v-for="(rect, index) in screenRects"
|
||||
:key="index"
|
||||
class="rect-overlay"
|
||||
:style="getScreenRectStyle(rect)"
|
||||
></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -217,6 +259,7 @@ import {
|
||||
mapPciList,
|
||||
comppanyImg,
|
||||
getItemTypes,
|
||||
getRoadListTypes,
|
||||
} from "@/api/xj/screen/index";
|
||||
export default {
|
||||
name: "BigScreen",
|
||||
@@ -320,10 +363,14 @@ export default {
|
||||
{ name: "路产", click: "equipment" },
|
||||
{ name: "事件", click: "event" },
|
||||
],
|
||||
/* 具体icon类别 */
|
||||
// 具体icon类别
|
||||
iconTypeList: [],
|
||||
// icon类别绑定
|
||||
iconType: [],
|
||||
// 路段下拉绑定
|
||||
roadList: [],
|
||||
// 路段选择绑定
|
||||
roadSelect: "",
|
||||
// 图标类别切换标识
|
||||
mapClick: "",
|
||||
// 中间展示的动态组件绑定
|
||||
@@ -354,12 +401,19 @@ export default {
|
||||
imgTitle: "查看",
|
||||
// 图片弹窗显隐控制
|
||||
imgVisible: false,
|
||||
// 查看点位图片数据
|
||||
screenImage: {},
|
||||
// 查看点位图片弹窗显隐控制
|
||||
showImageDialog: false,
|
||||
// 查看点位图片弹窗红框数据
|
||||
screenRects: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.setTime();
|
||||
this.getSelect();
|
||||
this.getMapCare();
|
||||
this.getRoadList();
|
||||
},
|
||||
methods: {
|
||||
/* 获取当前时间 */
|
||||
@@ -404,6 +458,15 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取路段下拉数据 */
|
||||
getRoadList() {
|
||||
getRoadListTypes().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.roadList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取图片背景下坐标数据 */
|
||||
getMapCare() {
|
||||
comppanyImg().then(({ code, data }) => {
|
||||
@@ -423,6 +486,11 @@ export default {
|
||||
this.imgVisible = false;
|
||||
},
|
||||
|
||||
/* 关闭查看点位大图弹窗 */
|
||||
screenImgCancel() {
|
||||
this.showImageDialog = false;
|
||||
},
|
||||
|
||||
/* 切换icon类型多选框事件 */
|
||||
handleChecked(value) {
|
||||
this.centerPiont = this.drawPointList.filter(
|
||||
@@ -455,8 +523,15 @@ export default {
|
||||
/* 获取地图点位信息 */
|
||||
getCenterPiont() {
|
||||
// 如果当前已经有打点坐标
|
||||
if (!this.clusters) {
|
||||
mapPointList({ type: this.mapClick }).then(({ code, data }) => {
|
||||
if (this.clusters) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.clusters);
|
||||
this.clusters = null;
|
||||
});
|
||||
}
|
||||
mapPointList({ type: this.mapClick, segmentId: this.roadSelect }).then(
|
||||
({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.drawPointList = data.map((item) => {
|
||||
if (item.geometry) {
|
||||
@@ -478,8 +553,8 @@ export default {
|
||||
});
|
||||
this.drawPoint();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/* 绘制地图点位 */
|
||||
@@ -492,7 +567,7 @@ export default {
|
||||
geometry: point,
|
||||
data: {
|
||||
iconType: element.iconType,
|
||||
mediaUrl: element.mediaUrl,
|
||||
imageUrl: element.imageUrl,
|
||||
rect: element.rect,
|
||||
},
|
||||
// 自己设置一个标识
|
||||
@@ -586,11 +661,7 @@ export default {
|
||||
getLinePoint() {
|
||||
mapPciList({ zoom: this.mapZoom }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.lineString = data.map((item) => {
|
||||
return item?.coordinates?.split(";").map((it) => {
|
||||
return it.split(",").map(Number);
|
||||
});
|
||||
});
|
||||
this.lineString = data;
|
||||
this.drawLine();
|
||||
}
|
||||
});
|
||||
@@ -600,8 +671,11 @@ export default {
|
||||
drawLine() {
|
||||
const features = [];
|
||||
this.lineString.forEach((element) => {
|
||||
const lines = element?.coordinates?.split(";").map((it) => {
|
||||
return it.split(",").map(Number);
|
||||
});
|
||||
const line = new Feature({
|
||||
geometry: new geomExports.LineString(element),
|
||||
geometry: new geomExports.LineString(lines),
|
||||
type: "line",
|
||||
});
|
||||
line.setStyle([
|
||||
@@ -612,7 +686,7 @@ export default {
|
||||
}),
|
||||
// 边线颜色
|
||||
stroke: new Stroke({
|
||||
color: "blue",
|
||||
color: "#0ABE67",
|
||||
width: 5,
|
||||
}),
|
||||
// 形状
|
||||
@@ -641,7 +715,7 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 图标类别切换点击事件 */
|
||||
/* 地图下方4图标类别切换点击事件 */
|
||||
changeIconType(value) {
|
||||
if (this.mapClick !== value) {
|
||||
this.mapClick = value;
|
||||
@@ -656,7 +730,7 @@ export default {
|
||||
this.getIconType(value);
|
||||
// 请求地图打点/绘制线段接口
|
||||
if (!this.mapZoom) {
|
||||
this.getZoom("10");
|
||||
this.getZoom("11");
|
||||
} else {
|
||||
this.getZoom(this.mapZoom);
|
||||
}
|
||||
@@ -681,23 +755,22 @@ export default {
|
||||
|
||||
/* 传回来的地图图层 */
|
||||
getZoom(zoom) {
|
||||
this.mapZoom = zoom;
|
||||
if (zoom * 1 >= 13) {
|
||||
if (zoom === "11" && this.mapZoom !== zoom) {
|
||||
this.mapZoom = zoom;
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.markLayerLines);
|
||||
this.markLayerLines = null;
|
||||
this.getCenterPiont();
|
||||
});
|
||||
} else if (zoom * 1 < 13) {
|
||||
this.getLinePoint();
|
||||
} else if (zoom === "10" && this.mapZoom !== zoom) {
|
||||
this.mapZoom = zoom;
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.clusters);
|
||||
map.removeLayer(this.markLayerLines);
|
||||
this.clusters = null;
|
||||
this.markLayerLines = null;
|
||||
this.getLinePoint();
|
||||
});
|
||||
this.getLinePoint();
|
||||
}
|
||||
},
|
||||
|
||||
@@ -728,6 +801,8 @@ export default {
|
||||
const selectFeature = feature.getProperties().features[0];
|
||||
console.log(selectFeature, "点位");
|
||||
// 获取点位数据
|
||||
this.screenImage = selectFeature.get("data");
|
||||
this.showImageDialog = true;
|
||||
console.log(selectFeature.get("data"));
|
||||
} else {
|
||||
// 聚合点
|
||||
@@ -894,6 +969,48 @@ export default {
|
||||
goIndex() {
|
||||
this.$router.push("/index");
|
||||
},
|
||||
|
||||
/* 图片位置信息获取 */
|
||||
updateScreenRects() {
|
||||
this.screenRects = [];
|
||||
const image = this.$refs.mainImage;
|
||||
const rects = this.screenImage?.rect?.split(",").map(Number) || [];
|
||||
this.screenRects = [
|
||||
{
|
||||
left: rects[0],
|
||||
top: rects[1],
|
||||
width: rects[2],
|
||||
height: rects[3],
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
/* 图片红框位置 */
|
||||
getScreenRectStyle({ left, top, width, height }) {
|
||||
const image = this.$refs.mainImage;
|
||||
const container = this.$refs.imageContainer;
|
||||
if (!image || !container) return {};
|
||||
|
||||
const scaleX = container.clientWidth / image.naturalWidth;
|
||||
const scaleY = container.clientHeight / image.naturalHeight;
|
||||
const scale = Math.min(scaleX, scaleY);
|
||||
|
||||
const renderedWidth = image.naturalWidth * scale;
|
||||
const renderedHeight = image.naturalHeight * scale;
|
||||
|
||||
const offsetX = (container.clientWidth - renderedWidth) / 2;
|
||||
const offsetY = (container.clientHeight - renderedHeight) / 2;
|
||||
|
||||
return {
|
||||
position: "absolute",
|
||||
left: `${left * scale + offsetX}px`,
|
||||
top: `${top * scale + offsetY}px`,
|
||||
width: `${width * scale}px`,
|
||||
height: `${height * scale}px`,
|
||||
border: "2px solid #FF0000",
|
||||
boxSizing: "border-box",
|
||||
};
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timeFlag);
|
||||
@@ -1080,6 +1197,57 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// 切换线路段
|
||||
.road-checkBox-twe {
|
||||
position: absolute;
|
||||
left: 31.5%;
|
||||
top: 10%;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.4rem;
|
||||
z-index: 1;
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 15rem;
|
||||
|
||||
.el-input .el-select__caret {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.el-input--medium .el-input__inner {
|
||||
height: 1.5rem;
|
||||
background-color: transparent;
|
||||
color: #89c5e8;
|
||||
border-color: #6991cd;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background-color: #102649;
|
||||
border-color: #08204f;
|
||||
.el-scrollbar {
|
||||
.el-select-dropdown__wrap {
|
||||
.el-scrollbar__view {
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select-dropdown__list {
|
||||
background-color: #102649;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 图片背景样式
|
||||
.disease-content {
|
||||
width: 100%;
|
||||
@@ -1339,5 +1507,28 @@ export default {
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
background-color: #113463;
|
||||
|
||||
/* 查看点位大图弹窗 */
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.rect-overlay {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 2px solid red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user