fix：大屏整合页面，添加按钮切换，添加根据图层层级打点画线
This commit is contained in:
parent
ebb4b51161
commit
e52a22edb7
BIN
src/assets/screen/road/road-select.png
Normal file
BIN
src/assets/screen/road/road-select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 15 KiB |
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 10:46:23
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-17 16:51:32
|
||||
* @LastEditTime: 2024-10-23 15:33:10
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\fssm-map.vue
|
||||
* @Description: 公共地图
|
||||
-->
|
||||
@ -70,7 +70,7 @@ export default {
|
||||
// 接受传过来得地图层级
|
||||
zoom: {
|
||||
type: String,
|
||||
default: "9",
|
||||
default: "10",
|
||||
},
|
||||
// 是否显示绘图功能
|
||||
showDraw: {
|
||||
@ -116,6 +116,8 @@ export default {
|
||||
source: new VectorSource(),
|
||||
// 绘制图形保存的点位
|
||||
drawMarkers: [],
|
||||
// 当前地图层级
|
||||
sendZoom: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -146,7 +148,7 @@ export default {
|
||||
/* 监听传过来的底图类型 */
|
||||
baseMap: {
|
||||
handler(val) {
|
||||
this.changeImg(val)
|
||||
this.changeImg(val);
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
@ -165,7 +167,7 @@ export default {
|
||||
title: "矢量底图",
|
||||
id: "vec_c",
|
||||
source: new XYZ({
|
||||
url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=c691040443c68cda625755c5c3e2acc3",
|
||||
url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=1eb44fae5b9dc454442b322e9a41d233",
|
||||
projection: "EPSG:4326",
|
||||
}),
|
||||
visible: true,
|
||||
@ -174,7 +176,7 @@ export default {
|
||||
title: "矢量地图",
|
||||
id: "cva_c",
|
||||
source: new XYZ({
|
||||
url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=cva_c&tk=c691040443c68cda625755c5c3e2acc3",
|
||||
url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=cva_c&tk=1eb44fae5b9dc454442b322e9a41d233",
|
||||
projection: "EPSG:4326",
|
||||
}),
|
||||
visible: true,
|
||||
@ -183,7 +185,7 @@ export default {
|
||||
title: "影像地图",
|
||||
id: "img_c",
|
||||
source: new XYZ({
|
||||
url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=img_c&tk=c691040443c68cda625755c5c3e2acc3",
|
||||
url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=img_c&tk=1eb44fae5b9dc454442b322e9a41d233",
|
||||
projection: "EPSG:4326",
|
||||
}),
|
||||
visible: false,
|
||||
@ -250,6 +252,41 @@ export default {
|
||||
map.getTargetElement().style.cursor = "auto";
|
||||
}
|
||||
});
|
||||
// 图层选择事件
|
||||
let selectSingClick = new Select({ style: null });
|
||||
map.addInteraction(selectSingClick);
|
||||
selectSingClick.on("select", (e) => {
|
||||
this.$emit("feature-select", e);
|
||||
// let selectedFeatures = e.selected;
|
||||
// if (selectedFeatures.length > 0) {
|
||||
// let feature = selectedFeatures[0];
|
||||
// let features = feature.get("features");
|
||||
// console.log(feature.getProperties(),'fff');
|
||||
// if(feature.getProperties().type!=="line"){
|
||||
|
||||
// }
|
||||
// if (features.length === 1) {
|
||||
// // 单个点位
|
||||
// // 执行之前的业务逻辑
|
||||
// // 获取点击的图层信息
|
||||
// const selectFeature = feature.getProperties().features[0];
|
||||
// } else {
|
||||
// // 聚合点
|
||||
// // 放大地图层级
|
||||
// map.getView().animate({
|
||||
// center: feature.getGeometry().getCoordinates(),
|
||||
// zoom: map.getView().getZoom() + 1,
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
});
|
||||
// 图层缩放事件监听
|
||||
map.getView().on("change:resolution", () => {
|
||||
if (this.sendZoom !== map.getView().getZoom().toFixed()) {
|
||||
this.sendZoom = map.getView().getZoom().toFixed();
|
||||
this.$emit("map-zoom", this.sendZoom);
|
||||
}
|
||||
});
|
||||
this.instance.set("map", map);
|
||||
this.instance.set("overlay-list", []);
|
||||
},
|
||||
@ -459,6 +496,15 @@ export default {
|
||||
map.removeLayer(layer);
|
||||
},
|
||||
|
||||
/* 根据类型清除地图线段图层 */
|
||||
clearMapLine() {
|
||||
const map = this.instance.get("map");
|
||||
const [layer] = map
|
||||
.getAllLayers()
|
||||
.filter((item) => item.get("type") === "line");
|
||||
map.removeLayer(layer);
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 调整地图缩放等级
|
||||
* @return
|
||||
|
||||
532
src/views/big-screen/components/img-dialog.vue
Normal file
532
src/views/big-screen/components/img-dialog.vue
Normal file
@ -0,0 +1,532 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-22 15:30:25
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-23 10:38:26
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
|
||||
* @Description: 大屏查看图片弹窗
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="app">
|
||||
<div class="sidebar" ref="sidebar" @scroll="handleScroll">
|
||||
<img
|
||||
v-for="(item, index) in defectData"
|
||||
:key="item.id"
|
||||
:src="item.media[0].img"
|
||||
:alt="'Image ' + (index + 1)"
|
||||
@click="showImage(index)"
|
||||
:class="{ selected: currentIndex === index }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<!-- 搜索表单 -->
|
||||
<div class="toolbar">
|
||||
<el-form
|
||||
:model="imgForm"
|
||||
ref="imgForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
label-width="5rem"
|
||||
>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="路段名称">
|
||||
<el-select
|
||||
v-model="imgForm.roadName"
|
||||
placeholder="请选择路段名称"
|
||||
:popper-append-to-body="false"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roadTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="公里桩">
|
||||
<el-input
|
||||
v-model="imgForm.stakeStart"
|
||||
placeholder="起始公里桩"
|
||||
style="width: 8rem"
|
||||
clearable
|
||||
/>
|
||||
<span style="margin: 0 5px">-</span>
|
||||
<el-input
|
||||
v-model="imgForm.stakeEnd"
|
||||
placeholder="终止公里桩"
|
||||
style="width: 8rem"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 图片展示 -->
|
||||
<div class="image-viewer">
|
||||
<div class="image-container" ref="imageContainer">
|
||||
<img
|
||||
:src="currentImage"
|
||||
alt="Main Image"
|
||||
ref="mainImage"
|
||||
@load="updateRects"
|
||||
/>
|
||||
<div
|
||||
v-for="(rect, index) in rects"
|
||||
:key="index"
|
||||
class="rect-overlay"
|
||||
:style="getRectStyle(rect)"
|
||||
></div>
|
||||
</div>
|
||||
<div class="image-info">
|
||||
采集时间: 2024-08-26 15:44:42<br />
|
||||
起始桩号: K0003+204 终止桩号: K0003+204<br />
|
||||
路产状态: 新增 融合状态: 未融合
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小图展示 -->
|
||||
<div class="thumbnail-row">
|
||||
<img
|
||||
v-for="(mediaItem, index) in currentThumbnails"
|
||||
:key="'thumb-' + index"
|
||||
:src="mediaItem.img"
|
||||
:alt="'Thumb ' + (index + 1)"
|
||||
@click="showThumbnailImage(index)"
|
||||
:class="{ selected: selectedThumbnail === index }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listDefect, getSegment } from "@/api/xj/disease";
|
||||
|
||||
export default {
|
||||
name: "ImgDialog",
|
||||
data() {
|
||||
return {
|
||||
// 左侧图片数据
|
||||
defectData: [],
|
||||
// 当前选择的index
|
||||
currentIndex: 0,
|
||||
// 点击的index绑定
|
||||
selectedThumbnail: null,
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 表单绑定
|
||||
imgForm: {
|
||||
// 路段名称
|
||||
roadName: "",
|
||||
// 起始公里桩
|
||||
stakeStart: "",
|
||||
// 终止公里桩
|
||||
stakeEnd: "",
|
||||
},
|
||||
// 路段下拉数据
|
||||
roadTypeList: [],
|
||||
// 分页绑定
|
||||
params: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
},
|
||||
rects: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentImage() {
|
||||
const thumbnails = this.currentThumbnails;
|
||||
return (
|
||||
thumbnails[this.selectedThumbnail]?.img || thumbnails[0]?.img || ""
|
||||
);
|
||||
},
|
||||
currentThumbnails() {
|
||||
return this.defectData[this.currentIndex]?.media || [];
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getSegmentList();
|
||||
},
|
||||
methods: {
|
||||
/* 获取路段下拉数据 */
|
||||
getSegmentList() {
|
||||
getSegment().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.roadTypeList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 获取图片列表/点击搜索事件 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
const data = {
|
||||
...this.imgForm,
|
||||
...this.params,
|
||||
};
|
||||
listDefect(data)
|
||||
.then((response) => {
|
||||
this.defectData.push(...response.rows);
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/* 点击搜索事件 */
|
||||
handleQuery() {
|
||||
const stakeReg = /^K\d{4}\+\d{3}$/;
|
||||
if (this.imgForm.stakeStart) {
|
||||
if (stakeReg.test(this.imgForm.stakeStart)) {
|
||||
this.defectData = [];
|
||||
this.params = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
};
|
||||
this.getList();
|
||||
this.showImage(0);
|
||||
} else {
|
||||
this.$modal.msgWarning("请按照'K0000+000'格式填写公里桩进行修改");
|
||||
}
|
||||
} else if (this.imgForm.stakeEnd) {
|
||||
if (stakeReg.test(this.imgForm.stakeEnd)) {
|
||||
this.defectData = [];
|
||||
this.params = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
};
|
||||
this.getList();
|
||||
this.showImage(0);
|
||||
} else {
|
||||
this.$modal.msgWarning("请按照'K0000+000'格式填写公里桩进行修改");
|
||||
}
|
||||
} else {
|
||||
this.defectData = [];
|
||||
|
||||
this.params = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
};
|
||||
this.getList();
|
||||
this.showImage(0);
|
||||
}
|
||||
},
|
||||
/* 重置事件 */
|
||||
resetQuery() {
|
||||
this.defectData = [];
|
||||
this.imgForm = {
|
||||
roadName: "",
|
||||
stakeStart: "",
|
||||
stakeEnd: "",
|
||||
};
|
||||
this.params = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
};
|
||||
this.getList();
|
||||
this.showImage(0);
|
||||
},
|
||||
/* 左侧点击图片事件 */
|
||||
showImage(index) {
|
||||
this.currentIndex = index;
|
||||
this.selectedThumbnail = 0; // Reset to the first thumbnail when changing the main item
|
||||
this.scrollToCurrentImage();
|
||||
this.$nextTick(() => {
|
||||
this.updateRects();
|
||||
});
|
||||
},
|
||||
showThumbnailImage(index) {
|
||||
this.selectedThumbnail = index;
|
||||
this.updateRects();
|
||||
},
|
||||
scrollToCurrentImage() {
|
||||
const sidebarImages = this.$refs.sidebar.querySelectorAll("img");
|
||||
const currentImageElement = sidebarImages[this.currentIndex];
|
||||
if (currentImageElement) {
|
||||
currentImageElement.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 滚动触发事件 */
|
||||
handleScroll() {
|
||||
// 滚动高度+容器高度 滚动区域高度
|
||||
const sidebar = this.$refs.sidebar;
|
||||
if (
|
||||
sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 1 &&
|
||||
!this.loading
|
||||
) {
|
||||
this.loadMoreImages();
|
||||
}
|
||||
},
|
||||
/* 加载更多图片方法 */
|
||||
loadMoreImages() {
|
||||
this.params.page += 1;
|
||||
this.getList();
|
||||
},
|
||||
/* 键盘事件 */
|
||||
handleKeydown(event) {
|
||||
if (event.key === "ArrowUp") {
|
||||
if (this.currentIndex > 0) {
|
||||
this.currentIndex--;
|
||||
this.selectedThumbnail = 0; // Reset when changing main images via keyboard
|
||||
this.scrollToCurrentImage();
|
||||
this.updateRects();
|
||||
}
|
||||
} else if (event.key === "ArrowDown") {
|
||||
if (this.currentIndex <= this.defectData.length - 1) {
|
||||
this.currentIndex === this.defectData.length - 1
|
||||
? this.currentIndex
|
||||
: this.currentIndex++;
|
||||
this.selectedThumbnail = 0; // Reset when changing main images via keyboard
|
||||
this.scrollToCurrentImage();
|
||||
this.updateRects();
|
||||
} else {
|
||||
this.loadMoreImages();
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 图片位置信息获取 */
|
||||
updateRects() {
|
||||
const image = this.$refs.mainImage;
|
||||
const rects =
|
||||
this.defectData[this.currentIndex]?.media[this.selectedThumbnail]?.rect
|
||||
.split(",")
|
||||
.map(Number) || [];
|
||||
this.rects = [
|
||||
{
|
||||
left: rects[0],
|
||||
top: rects[1],
|
||||
width: rects[2],
|
||||
height: rects[3],
|
||||
},
|
||||
];
|
||||
},
|
||||
/* 图片红框位置 */
|
||||
getRectStyle({ 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",
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
window.addEventListener("keydown", this.handleKeydown);
|
||||
window.addEventListener("resize", this.updateRects);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener("keydown", this.handleKeydown);
|
||||
window.removeEventListener("resize", this.updateRects);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 45rem;
|
||||
background-color: #2e3a46;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background-color: #1f292e;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-track {
|
||||
background: #2e3a46;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background: #444c51;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb:hover {
|
||||
background: #00aaff;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: transform 0.2s, border 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sidebar img.selected {
|
||||
border: 3px solid #00aaff;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
width: calc(100% - 250px);
|
||||
background-color: #1b2126;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #333c42;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #333c42;
|
||||
|
||||
::v-deep .el-form {
|
||||
width: 100%;
|
||||
|
||||
.el-form-item--small .el-form-item__label {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
|
||||
.el-input--small .el-input__inner {
|
||||
color: #ffffff;
|
||||
background-color: #333c42;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background-color: #102649;
|
||||
border-color: #08204f;
|
||||
.el-scrollbar {
|
||||
.el-select-dropdown__wrap {
|
||||
.el-scrollbar__view {
|
||||
.el-select-dropdown__item {
|
||||
color: #ffffff;
|
||||
}
|
||||
.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: #333c42;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-input--small .el-input__inner {
|
||||
color: #ffffff;
|
||||
background-color: #333c42;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.image-viewer {
|
||||
height: 33rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #22272b;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.thumbnail-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow-x: auto;
|
||||
padding: 10px;
|
||||
background-color: #333c42;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.thumbnail-row img {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: transform 0.2s, border 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.thumbnail-row img.selected {
|
||||
border: 3px solid #00aaff;
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:19:56
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-21 17:14:45
|
||||
* @LastEditTime: 2024-10-23 14:32:47
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-current.vue
|
||||
* @Description: 病害巡检-病害三维饼图
|
||||
-->
|
||||
@ -75,15 +75,15 @@ export default {
|
||||
options: {},
|
||||
// 颜色盘
|
||||
colorList: [
|
||||
"#F29C1F",
|
||||
"#E163EF",
|
||||
"#F81F1C",
|
||||
"#1D2AF9",
|
||||
"#03F0EA",
|
||||
"#FFADAF",
|
||||
"#129CFE",
|
||||
"#106B6C",
|
||||
"#96E619",
|
||||
"#18F7FF",
|
||||
"#FFEA68",
|
||||
"#AE74F3",
|
||||
"#6FC36F",
|
||||
"#FF8F5F",
|
||||
"#6FC36F",
|
||||
"#4C83FF",
|
||||
"#FC5976",
|
||||
"#5B40B6",
|
||||
],
|
||||
// echart数据
|
||||
dataList: [],
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 16:05:15
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-21 14:26:47
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-screen.vue
|
||||
* @Description: 大屏-病害巡检
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="disease-content">
|
||||
<div class="disease-title"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DiseaseScreen",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.disease-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../assets/screen/index/map-liaoning.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.disease-title {
|
||||
width: 20rem;
|
||||
height: 2.8rem;
|
||||
position: absolute;
|
||||
// top: 5rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%,5rem);
|
||||
background-image: url("../../assets/screen/index/disease-title.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:52:38
|
||||
* @LastEditTime: 2024-10-23 16:12:45
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -70,19 +70,53 @@
|
||||
</template>
|
||||
</module-block>
|
||||
</div>
|
||||
<!-- 底图切换 -->
|
||||
<disease-screen v-if="elementDiv === 'DiseaseScreen'"></disease-screen>
|
||||
<road-screen v-else></road-screen>
|
||||
<div class="road-content">
|
||||
<!-- 左侧控制 -->
|
||||
<div class="road-select">
|
||||
<!-- 左上角病害筛查 -->
|
||||
<div class="road-div" v-if="mapClick === '2'" @click="clickImg">
|
||||
<span>病害筛查</span>
|
||||
</div>
|
||||
<!-- 返回图片底图 -->
|
||||
<div class="road-return" v-if="!showImgBk" @click="changeMap(true)">
|
||||
返回
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右上角切换坐标类型多选框 -->
|
||||
<div class="road-checkBox" v-if="!showImgBk">
|
||||
<fssm-scroll class="road-scroll">
|
||||
<el-checkbox-group v-model="iconType" @change="handleChecked">
|
||||
<el-checkbox
|
||||
v-for="(item, index) in iconTypeList"
|
||||
:label="item.value"
|
||||
:key="`check-${index}`"
|
||||
>{{ item.name }}</el-checkbox
|
||||
>
|
||||
</el-checkbox-group>
|
||||
</fssm-scroll>
|
||||
</div>
|
||||
<!-- 图片背景 -->
|
||||
<div class="disease-content" v-if="showImgBk">
|
||||
<div class="disease-title" @click="changeMap(false)"></div>
|
||||
</div>
|
||||
<!-- 地图 -->
|
||||
<fssm-map
|
||||
v-if="!showImgBk"
|
||||
ref="roadMap"
|
||||
@map-zoom="getZoom"
|
||||
@feature-select="featureSelect"
|
||||
></fssm-map>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen-footer">
|
||||
<div class="footer-change-map">
|
||||
<template v-if="elementDiv !== 'DiseaseScreen'">
|
||||
<template v-if="!showImgBk">
|
||||
<div
|
||||
class="change-map-div"
|
||||
:class="mapClick === item.click ? 'change-map-click' : ''"
|
||||
v-for="(item, index) in changeMapBtn"
|
||||
:key="`btn-${index}`"
|
||||
@click="changeMap(item)"
|
||||
@click="changeIconType(item.click)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
@ -101,12 +135,33 @@
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片弹窗 -->
|
||||
<el-dialog
|
||||
:title="imgTitle"
|
||||
:visible.sync="imgVisible"
|
||||
width="80rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="imgCancel"
|
||||
>
|
||||
<img-dialog></img-dialog>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RoadScreen from "./road-screen.vue";
|
||||
import DiseaseScreen from "./disease-screen.vue";
|
||||
// 地图
|
||||
import FssmMap from "@/components/map/fssm-map.vue";
|
||||
import { Feature } from "ol";
|
||||
import { Point } from "ol/geom";
|
||||
import { Style, Icon, Fill, Stroke, Circle, Text } from "ol/style";
|
||||
import logo from "@/assets/xc.png";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import * as geomExports from "ol/geom";
|
||||
import Cluster from "ol/source/Cluster";
|
||||
// 组件
|
||||
import ModuleBlock from "./module-block.vue";
|
||||
import TodayInspection from "./disease-components/today-inspection.vue";
|
||||
import DiseaseTrends from "./disease-components/disease-trends.vue";
|
||||
@ -123,11 +178,12 @@ import TrafficTrend from "./traffic-components/traffic-trend.vue";
|
||||
import TrafficStatistic from "./traffic-components/traffic-statistic.vue";
|
||||
import TrafficRank from "./traffic-components/traffic-rank.vue";
|
||||
import TrafficEmergency from "./traffic-components/traffic-emergency.vue";
|
||||
import ImgDialog from "./components/img-dialog.vue";
|
||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
export default {
|
||||
name: "BigScreen",
|
||||
components: {
|
||||
RoadScreen,
|
||||
DiseaseScreen,
|
||||
FssmMap,
|
||||
ModuleBlock,
|
||||
TodayInspection,
|
||||
DiseaseTrends,
|
||||
@ -144,6 +200,8 @@ export default {
|
||||
TrafficStatistic,
|
||||
TrafficRank,
|
||||
TrafficEmergency,
|
||||
ImgDialog,
|
||||
FssmScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -211,22 +269,43 @@ export default {
|
||||
class: "twe",
|
||||
},
|
||||
],
|
||||
// 切换地图按钮
|
||||
// 是否显示图片背景
|
||||
showImgBk: true,
|
||||
// 切换地图图标类别按钮
|
||||
changeMapBtn: [
|
||||
{ name: "巡查车", click: "1" },
|
||||
{ name: "病害", click: "2" },
|
||||
{ name: "路产", click: "3" },
|
||||
{ name: "PCL", click: "4" },
|
||||
],
|
||||
// 地图切换标识
|
||||
mapClick: "1",
|
||||
/* 具体icon类别 */
|
||||
iconTypeList: [],
|
||||
// icon类别绑定
|
||||
iconType: [],
|
||||
// 图标类别切换标识
|
||||
mapClick: "",
|
||||
// 中间展示的动态组件绑定
|
||||
elementDiv: "DiseaseScreen",
|
||||
// 下方三个按钮数据
|
||||
elementList: [
|
||||
{ name: "病害巡检", component: "DiseaseScreen" },
|
||||
{ name: "道路资产", component: "RoadScreen" },
|
||||
{ name: "交安事件", component: "TrafficScreen" },
|
||||
],
|
||||
// 中心点集合
|
||||
centerPiont: [],
|
||||
// 线段点集合
|
||||
lineString: [],
|
||||
// 地图放大缩小层级
|
||||
mapZoom: "",
|
||||
// 聚合图层
|
||||
clusters: null,
|
||||
// 线段图层
|
||||
markLayerLines: null,
|
||||
// 图片弹窗标题
|
||||
imgTitle: "查看",
|
||||
// 图片弹窗显隐控制
|
||||
imgVisible: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -269,10 +348,260 @@ export default {
|
||||
this.dataTime = `${hours}:${minutes}:${seconds}`;
|
||||
}, 1000);
|
||||
},
|
||||
/* 地图切换点击事件 */
|
||||
/* 点击病害筛查 */
|
||||
clickImg() {
|
||||
this.imgVisible = true;
|
||||
},
|
||||
/* 关闭图片查看弹窗 */
|
||||
imgCancel() {
|
||||
this.imgVisible = false;
|
||||
},
|
||||
/* 切换icon类型多选框事件 */
|
||||
handleChecked(value) {
|
||||
console.log(value, "icontype");
|
||||
},
|
||||
/* 点击图片点位切换地图事件 */
|
||||
changeMap(value) {
|
||||
this.mapZoom = "";
|
||||
this.showImgBk = value;
|
||||
// 默认点击的图标是巡查车
|
||||
this.changeIconType("1");
|
||||
if (!value) {
|
||||
this.mapZoom = "";
|
||||
this.getZoom("10");
|
||||
}
|
||||
},
|
||||
/* 获取地图点位信息 */
|
||||
getCenterPiont() {
|
||||
this.centerPiont = [
|
||||
[123.30297096718999, 41.87942945541742],
|
||||
[123.08770760049077, 41.99409925522211],
|
||||
[123.6210023341045, 41.94237193236056],
|
||||
];
|
||||
this.drawPoint();
|
||||
},
|
||||
/* 绘制地图点位 */
|
||||
drawPoint() {
|
||||
const features = [];
|
||||
this.centerPiont.forEach((element) => {
|
||||
// 修改坐标样式
|
||||
const point = new Point(element);
|
||||
const feature = new Feature({
|
||||
geometry: point,
|
||||
data: { data: "123", type: "icon" },
|
||||
// 自己设置一个标识
|
||||
type: "icon",
|
||||
});
|
||||
// 可以给点位设置样式
|
||||
// feature.setStyle([
|
||||
// new Style({
|
||||
// image: new Icon({
|
||||
// crossOrigin: "anonymous",
|
||||
// src: logo,
|
||||
// // 图标缩放比例
|
||||
// scale: 0.05,
|
||||
// }),
|
||||
// }),
|
||||
// ]);
|
||||
features.push(feature);
|
||||
});
|
||||
const clusterSource = new Cluster({
|
||||
distance: 200,
|
||||
minDistance: 20,
|
||||
source: new VectorSource({
|
||||
features,
|
||||
}),
|
||||
type: "Cluster",
|
||||
});
|
||||
this.clusters = new VectorLayer({
|
||||
source: clusterSource,
|
||||
name: "clusterLayer",
|
||||
zIndex: 10,
|
||||
style: function clusterStyle(feature) {
|
||||
const count = feature.get("features").length;
|
||||
return new Style({
|
||||
image: new Icon({
|
||||
crossOrigin: "anonymous",
|
||||
src: logo,
|
||||
// 图标缩放比例
|
||||
scale: 0.05,
|
||||
// 0.3为30度
|
||||
rotation: 0.3,
|
||||
}),
|
||||
text: new Text({
|
||||
textAlign: "center", //位置
|
||||
textBaseline: "middle",
|
||||
font: "normal 14px 微软雅黑",
|
||||
offsetY: 15,
|
||||
fill: new Fill({
|
||||
color: "#ffffff",
|
||||
}),
|
||||
text: count > 1 ? count.toString() : "",
|
||||
}),
|
||||
});
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.addLayer(this.clusters);
|
||||
});
|
||||
},
|
||||
/* 获取地图线段点位信息 */
|
||||
getLinePoint() {
|
||||
this.lineString = [
|
||||
[
|
||||
[123.32282646995006, 41.97498761493642],
|
||||
[123.35200891450947, 41.973156567233836],
|
||||
[123.37958916875502, 41.97956525514763],
|
||||
[123.39286432222431, 42.0021101177337],
|
||||
[123.40184182160729, 42.02952420024438],
|
||||
[123.4845914544503, 42.03583748930991],
|
||||
],
|
||||
[
|
||||
[122.5518798295274, 42.19039770874923],
|
||||
[123.7871925821671, 42.236903621119346],
|
||||
],
|
||||
];
|
||||
this.drawLine();
|
||||
},
|
||||
/* 绘制地图线段 */
|
||||
drawLine() {
|
||||
const features = [];
|
||||
this.lineString.forEach((element) => {
|
||||
const line = new Feature({
|
||||
geometry: new geomExports.LineString(element),
|
||||
type: "line",
|
||||
});
|
||||
line.setStyle([
|
||||
new Style({
|
||||
// 填充色
|
||||
fill: new Fill({
|
||||
color: "red",
|
||||
}),
|
||||
// 边线颜色
|
||||
stroke: new Stroke({
|
||||
color: "blue",
|
||||
width: 5,
|
||||
}),
|
||||
// 形状
|
||||
image: new Circle({
|
||||
radius: 17,
|
||||
fill: new Fill({
|
||||
color: "#ffffff",
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
features.push(line);
|
||||
});
|
||||
const lineSource = new VectorSource({
|
||||
features,
|
||||
});
|
||||
this.markLayerLines = new VectorLayer({
|
||||
source: lineSource,
|
||||
properties: {
|
||||
type: "line",
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.addLayer(this.markLayerLines);
|
||||
});
|
||||
},
|
||||
/* 图标类别切换点击事件 */
|
||||
changeIconType(value) {
|
||||
if (this.mapClick !== value) {
|
||||
this.mapClick = value.click;
|
||||
this.mapClick = value;
|
||||
// 获取对应右上角icon类型
|
||||
this.getIconType(value);
|
||||
}
|
||||
},
|
||||
/* 获取icon多选数据 */
|
||||
getIconType(value) {
|
||||
if (value === "2") {
|
||||
this.iconTypeList = [
|
||||
{ name: "淤泥路面", value: "1" },
|
||||
{ name: "沥青路面", value: "2" },
|
||||
{ name: "面", value: "3" },
|
||||
];
|
||||
this.iconType = this.iconTypeList.map((item) => {
|
||||
return item.value;
|
||||
});
|
||||
} else {
|
||||
this.iconTypeList = [
|
||||
{ name: "淤泥路面", value: "1" },
|
||||
{ name: "沥青路面", value: "2" },
|
||||
{ name: "面", value: "3" },
|
||||
{ name: "淤泥", value: "4" },
|
||||
{ name: "淤泥路面阿萨", value: "5" },
|
||||
{ name: "淤泥路面", value: "6" },
|
||||
{ name: "淤泥", value: "4" },
|
||||
{ name: "淤泥路面阿萨", value: "5" },
|
||||
{ name: "淤泥路面", value: "6" },
|
||||
{ name: "淤泥", value: "4" },
|
||||
{ name: "淤泥路面阿萨", value: "5" },
|
||||
{ name: "淤泥路面", value: "6" },
|
||||
{ name: "淤泥", value: "4" },
|
||||
{ name: "淤泥路面阿萨", value: "5" },
|
||||
{ name: "淤泥路面", value: "6" },
|
||||
];
|
||||
this.iconType = this.iconTypeList.map((item) => {
|
||||
return item.value;
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 传回来的地图图层 */
|
||||
getZoom(zoom) {
|
||||
if (zoom === "10") {
|
||||
// 绘制点位
|
||||
if (this.mapZoom !== zoom) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.markLayerLines);
|
||||
});
|
||||
this.mapZoom = zoom;
|
||||
this.getCenterPiont();
|
||||
}
|
||||
} else if (zoom === "9") {
|
||||
// 绘制线段
|
||||
if (this.mapZoom !== zoom) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.clusters);
|
||||
});
|
||||
this.getLinePoint();
|
||||
this.mapZoom = zoom;
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 地图选中feature事件 */
|
||||
featureSelect(e) {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
let selectedFeatures = e.selected;
|
||||
if (selectedFeatures.length > 0) {
|
||||
let feature = selectedFeatures[0];
|
||||
let features = feature.get("features");
|
||||
// 点击线段事件
|
||||
if (feature.getProperties().type === "line") {
|
||||
console.log(feature, "线段参数");
|
||||
} else {
|
||||
if (features.length === 1) {
|
||||
// 单个点位
|
||||
// 执行之前的业务逻辑
|
||||
// 获取点击的图层信息
|
||||
const selectFeature = feature.getProperties().features[0];
|
||||
console.log(selectFeature, "点位");
|
||||
// 获取点位数据
|
||||
console.log(selectFeature.get("data"));
|
||||
} else {
|
||||
// 聚合点
|
||||
// 放大地图层级
|
||||
map.getView().animate({
|
||||
center: feature.getGeometry().getCoordinates(),
|
||||
zoom: map.getView().getZoom() + 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 数据栏切换事件 */
|
||||
@ -472,6 +801,18 @@ export default {
|
||||
.three {
|
||||
grid-area: three;
|
||||
}
|
||||
|
||||
::v-deep .screen-checkBox {
|
||||
.el-radio-button__inner {
|
||||
background-color: transparent;
|
||||
padding: 0 0.3rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
color: #1cb6ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screen-right {
|
||||
@ -485,13 +826,6 @@ export default {
|
||||
background-image: url("../../assets/screen/index/bg-right.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.middle-map {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
::v-deep .screen-checkBox {
|
||||
.el-radio-button__inner {
|
||||
@ -506,6 +840,157 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.road-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
// 病害筛查按钮样式
|
||||
.road-select {
|
||||
width: 4rem;
|
||||
height: 6.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 29rem;
|
||||
top: 6rem;
|
||||
|
||||
.road-div {
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
cursor: pointer;
|
||||
color: #8deeff;
|
||||
background-image: url("../../assets/screen/road/road-select.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 80%;
|
||||
background-position: 50% 0;
|
||||
z-index: 1;
|
||||
|
||||
span {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 8rem;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 返回样式
|
||||
.road-return {
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// position: absolute;
|
||||
// left: 30rem;
|
||||
// top: 12rem;
|
||||
font-size: 0.8rem;
|
||||
color: #ffffff;
|
||||
background-color: #395569;
|
||||
border: 1px #1cb6ff solid;
|
||||
border-radius: 0.5rem;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
background-color: #2b4367;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 右上角切换图标样式多选框
|
||||
.road-checkBox {
|
||||
width: 8rem;
|
||||
height: 10rem;
|
||||
position: absolute;
|
||||
right: 28rem;
|
||||
top: 6rem;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.4rem;
|
||||
border: 1px solid #193dae;
|
||||
background-color: #082843;
|
||||
z-index: 1;
|
||||
|
||||
.road-scroll {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
color: #9aadd8;
|
||||
}
|
||||
}
|
||||
|
||||
// 图片背景样式
|
||||
.disease-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../assets/screen/index/map-liaoning.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.disease-title {
|
||||
width: 20rem;
|
||||
height: 2.8rem;
|
||||
position: absolute;
|
||||
// top: 5rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 5rem);
|
||||
background-image: url("../../assets/screen/index/disease-title.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ol-layer:nth-child(1) {
|
||||
filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
|
||||
brightness(80%) saturate(550%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 头部样式
|
||||
.screen-header {
|
||||
width: 100%;
|
||||
@ -585,6 +1070,7 @@ export default {
|
||||
font-size: 0.7rem;
|
||||
|
||||
.change-map-div {
|
||||
cursor: pointer;
|
||||
margin: 0 1.2rem;
|
||||
}
|
||||
|
||||
@ -656,4 +1142,18 @@ export default {
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
/* 修改弹窗样式 */
|
||||
::v-deep .el-dialog__header {
|
||||
background-color: #113463;
|
||||
|
||||
span,
|
||||
i {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
background-color: #113463;
|
||||
}
|
||||
</style>
|
||||
@ -2,23 +2,259 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 16:23:48
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-17 16:46:58
|
||||
* @LastEditTime: 2024-10-23 11:26:47
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\road-screen.vue
|
||||
* @Description: 大屏-其他切换
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="road-content">
|
||||
<fssm-map ref="roadMap" :baseMap="'img_c'"></fssm-map>
|
||||
<!-- 下拉框 -->
|
||||
<div class="road-select" @click="clickImg">
|
||||
<span>病害筛查</span>
|
||||
</div>
|
||||
<div class="disease-content" v-if="showImgBk">
|
||||
<div class="disease-title" @click="changeMap"></div>
|
||||
</div>
|
||||
<fssm-map
|
||||
v-if="!showImgBk"
|
||||
ref="roadMap"
|
||||
@feature-select="FeatureSelect"
|
||||
></fssm-map>
|
||||
<!-- 图片弹窗 -->
|
||||
<el-dialog
|
||||
:title="imgTitle"
|
||||
:visible.sync="imgVisible"
|
||||
width="80rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="imgCancel"
|
||||
>
|
||||
<img-dialog></img-dialog>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FssmMap from "@/components/map/fssm-map.vue";
|
||||
import { Feature } from "ol";
|
||||
import { Point } from "ol/geom";
|
||||
import { Style, Icon, Fill, Stroke, Circle, Text } from "ol/style";
|
||||
import logo from "@/assets/xc.png";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import * as geomExports from "ol/geom";
|
||||
import Cluster from "ol/source/Cluster";
|
||||
import ImgDialog from "./components/img-dialog.vue";
|
||||
export default {
|
||||
name: "RoadScreen",
|
||||
components: { FssmMap },
|
||||
components: { FssmMap, ImgDialog },
|
||||
props: {},
|
||||
watch: {},
|
||||
data() {
|
||||
return {
|
||||
// 是否显示图片背景
|
||||
showImgBk: true,
|
||||
// 中心点集合
|
||||
centerPiont: [],
|
||||
// 线段点集合
|
||||
lineString: [],
|
||||
// 图片弹窗标题
|
||||
imgTitle: "查看",
|
||||
// 图片弹窗显隐控制
|
||||
imgVisible: false,
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
/* 点击病害筛查事件 */
|
||||
clickImg() {
|
||||
this.imgVisible = true;
|
||||
},
|
||||
/* 点击图片点位信息 */
|
||||
changeMap() {
|
||||
this.showImgBk = false;
|
||||
this.getCenterPiont();
|
||||
this.getLinePoint();
|
||||
},
|
||||
/* 获取地图点位信息 */
|
||||
getCenterPiont() {
|
||||
this.centerPiont = [
|
||||
[123.30297096718999, 41.87942945541742],
|
||||
[123.08770760049077, 41.99409925522211],
|
||||
[123.6210023341045, 41.94237193236056],
|
||||
];
|
||||
this.drawPoint();
|
||||
},
|
||||
/* 绘制地图点位 */
|
||||
drawPoint() {
|
||||
const features = [];
|
||||
this.centerPiont.forEach((element) => {
|
||||
// 修改坐标样式
|
||||
const point = new Point(element);
|
||||
const feature = new Feature({
|
||||
geometry: point,
|
||||
data: { data: "123", type: "icon" },
|
||||
// 自己设置一个标识
|
||||
type: "icon",
|
||||
});
|
||||
// 可以给点位设置样式
|
||||
// feature.setStyle([
|
||||
// new Style({
|
||||
// image: new Icon({
|
||||
// crossOrigin: "anonymous",
|
||||
// src: logo,
|
||||
// // 图标缩放比例
|
||||
// scale: 0.05,
|
||||
// }),
|
||||
// }),
|
||||
// ]);
|
||||
features.push(feature);
|
||||
});
|
||||
const clusterSource = new Cluster({
|
||||
distance: 200,
|
||||
minDistance: 20,
|
||||
source: new VectorSource({
|
||||
features,
|
||||
}),
|
||||
});
|
||||
const clusters = new VectorLayer({
|
||||
source: clusterSource,
|
||||
name: "clusterLayer",
|
||||
zIndex: 10,
|
||||
style: function clusterStyle(feature) {
|
||||
const count = feature.get("features").length;
|
||||
return new Style({
|
||||
image: new Icon({
|
||||
crossOrigin: "anonymous",
|
||||
src: logo,
|
||||
// 图标缩放比例
|
||||
scale: 0.05,
|
||||
// 0.3为30度
|
||||
rotation: 0.3,
|
||||
}),
|
||||
text: new Text({
|
||||
textAlign: "center", //位置
|
||||
textBaseline: "middle",
|
||||
font: "normal 14px 微软雅黑",
|
||||
offsetY: 15,
|
||||
fill: new Fill({
|
||||
color: "#ffffff",
|
||||
}),
|
||||
text: count > 1 ? count.toString() : "",
|
||||
}),
|
||||
});
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.addLayer(clusters);
|
||||
});
|
||||
},
|
||||
/* 选中地图图标/线段事件 */
|
||||
FeatureSelect(e) {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
let selectedFeatures = e.selected;
|
||||
if (selectedFeatures.length > 0) {
|
||||
let feature = selectedFeatures[0];
|
||||
let features = feature.get("features");
|
||||
// 点击线段事件
|
||||
if (feature.getProperties().type === "line") {
|
||||
console.log(feature, "线段参数");
|
||||
} else {
|
||||
if (features.length === 1) {
|
||||
// 单个点位
|
||||
// 执行之前的业务逻辑
|
||||
// 获取点击的图层信息
|
||||
const selectFeature = feature.getProperties().features[0];
|
||||
console.log(selectFeature, "点位");
|
||||
// 获取点位数据
|
||||
console.log(selectFeature.get("data"));
|
||||
} else {
|
||||
// 聚合点
|
||||
// 放大地图层级
|
||||
map.getView().animate({
|
||||
center: feature.getGeometry().getCoordinates(),
|
||||
zoom: map.getView().getZoom() + 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 获取地图线段点位信息 */
|
||||
getLinePoint() {
|
||||
this.lineString = [
|
||||
[
|
||||
[123.32282646995006, 41.97498761493642],
|
||||
[123.35200891450947, 41.973156567233836],
|
||||
[123.37958916875502, 41.97956525514763],
|
||||
[123.39286432222431, 42.0021101177337],
|
||||
[123.40184182160729, 42.02952420024438],
|
||||
[123.4845914544503, 42.03583748930991],
|
||||
],
|
||||
[
|
||||
[122.5518798295274, 42.19039770874923],
|
||||
[123.7871925821671, 42.236903621119346],
|
||||
],
|
||||
];
|
||||
this.drawLine();
|
||||
},
|
||||
/* 绘制地图线段 */
|
||||
drawLine() {
|
||||
const features = [];
|
||||
this.lineString.forEach((element) => {
|
||||
const line = new Feature({
|
||||
geometry: new geomExports.LineString(element),
|
||||
type: "line",
|
||||
});
|
||||
line.setStyle([
|
||||
new Style({
|
||||
// 填充色
|
||||
fill: new Fill({
|
||||
color: "red",
|
||||
}),
|
||||
// 边线颜色
|
||||
stroke: new Stroke({
|
||||
color: "blue",
|
||||
width: 5,
|
||||
}),
|
||||
// 形状
|
||||
image: new Circle({
|
||||
radius: 17,
|
||||
fill: new Fill({
|
||||
color: "#ffffff",
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
features.push(line);
|
||||
});
|
||||
const lineSource = new VectorSource({
|
||||
features,
|
||||
});
|
||||
let markLayerLines = new VectorLayer({
|
||||
source: lineSource,
|
||||
properties: {
|
||||
type: "line",
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.addLayer(markLayerLines);
|
||||
});
|
||||
},
|
||||
/* 清空地图图层的方法 */
|
||||
clearMapPoint() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.roadMap.clearMapFeature();
|
||||
});
|
||||
},
|
||||
/* 关闭图片查看弹窗 */
|
||||
imgCancel() {
|
||||
this.imgVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -27,5 +263,110 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
// 病害筛查按钮样式
|
||||
.road-select {
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
position: absolute;
|
||||
left: 30rem;
|
||||
top: 6rem;
|
||||
color: #8deeff;
|
||||
background-image: url("../../assets/screen/road/road-select.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 80%;
|
||||
background-position: 50% 0;
|
||||
z-index: 1;
|
||||
|
||||
span {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 8rem;
|
||||
|
||||
.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%;
|
||||
height: 100%;
|
||||
background-image: url("../../assets/screen/index/map-liaoning.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.disease-title {
|
||||
width: 20rem;
|
||||
height: 2.8rem;
|
||||
position: absolute;
|
||||
// top: 5rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 5rem);
|
||||
background-image: url("../../assets/screen/index/disease-title.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ol-layer:nth-child(1) {
|
||||
filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
|
||||
brightness(80%) saturate(550%);
|
||||
}
|
||||
|
||||
/* 修改弹窗样式 */
|
||||
::v-deep .el-dialog__header {
|
||||
background-color: #113463;
|
||||
|
||||
span,
|
||||
i {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
background-color: #113463;
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-12 14:52:23
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-12 17:24:45
|
||||
* @LastEditTime: 2024-10-23 10:24:00
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\traffic-management\index.vue
|
||||
* @Description: 巡检管理-交安事件
|
||||
-->
|
||||
@ -479,7 +479,6 @@ export default {
|
||||
} else if (this.queryParams.stakeEnd) {
|
||||
if (phonereg.test(this.queryParams.stakeEnd)) {
|
||||
this.pagination.page = 1;
|
||||
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
|
||||
this.getRoadList();
|
||||
} else {
|
||||
@ -487,7 +486,6 @@ export default {
|
||||
}
|
||||
} else {
|
||||
this.pagination.page = 1;
|
||||
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
|
||||
this.getRoadList();
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-09 13:11:56
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-14 17:05:20
|
||||
* @LastEditTime: 2024-10-22 16:38:50
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\parameter\index.vue
|
||||
* @Description: 系统工具-系统参数
|
||||
-->
|
||||
@ -154,7 +154,7 @@ export default {
|
||||
crossOrigin: "anonymous",
|
||||
src: logo,
|
||||
// size: [40, 40],
|
||||
scale: 0.2, // 图标缩放比例
|
||||
scale: 0.05, // 图标缩放比例
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
@ -196,13 +196,13 @@ export default {
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=c691040443c68cda625755c5c3e2acc3",
|
||||
url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=1eb44fae5b9dc454442b322e9a41d233",
|
||||
projection: "EPSG:4326",
|
||||
}),
|
||||
}),
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=cva_c&tk=c691040443c68cda625755c5c3e2acc3",
|
||||
url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=cva_c&tk=1eb44fae5b9dc454442b322e9a41d233",
|
||||
projection: "EPSG:4326",
|
||||
}),
|
||||
}),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user