From cdfbc4cb9bc80827f93fc099a35f228814a4fa00 Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Tue, 24 Dec 2024 11:27:06 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E5=8E=BB=E9=99=A4=E5=A4=A7?=
=?UTF-8?q?=E5=B1=8F=E7=97=85=E5=AE=B3=E7=8A=B6=E6=80=81=EF=BC=8C=E4=BF=AE?=
=?UTF-8?q?=E6=94=B9=E5=A4=A7=E5=B1=8F=E7=BA=BF=E6=AE=B5=E4=B8=AD=E5=BF=83?=
=?UTF-8?q?=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/map/fssm-map.vue | 31 +++++----
.../disease-components/traffic-log.vue | 66 ++++---------------
src/views/big-screen/index.vue | 47 ++++++++++++-
.../xj/inspection-warn/warning-line/index.vue | 8 +--
4 files changed, 79 insertions(+), 73 deletions(-)
diff --git a/src/components/map/fssm-map.vue b/src/components/map/fssm-map.vue
index bc1fe00..fb84414 100644
--- a/src/components/map/fssm-map.vue
+++ b/src/components/map/fssm-map.vue
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-14 10:46:23
* @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-23 11:07:04
+ * @LastEditTime: 2024-12-23 17:37:59
* @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
* @Description: 公共地图
-->
@@ -389,7 +389,10 @@ export default {
// 获取弹窗数据
const popupData = feature.get("data");
// 获取弹窗内元素并赋值
- this.$refs.popupContent.innerHTML = `路段名称：${popupData.name}
病害数：${popupData.count}个
起始桩号：${popupData.stakeStart}
终止桩号：${popupData.stakeEnd}`;
+ this.$refs.popupContent.innerHTML = `路段名称：${popupData.name}
+ 病害数：${popupData.count}个
+ 起始桩号：${popupData.stakeStart}
+ 终止桩号：${popupData.stakeEnd}`;
dislogLay.setPosition(coordinate);
} else {
dislogLay.setPosition(undefined);
@@ -413,7 +416,7 @@ export default {
this.$emit("map-moveend", zoom);
});
// 图层选择事件
- this.selectSingClick = new Select({ style: null });
+ this.selectSingClick = new Select();
map.addInteraction(this.selectSingClick);
this.selectSingClick.on("select", (e) => {
this.$emit("feature-select", e);
@@ -825,14 +828,20 @@ export default {
}
// 地图弹窗样式
- .ol-popup > div {
- padding: 0.5rem;
- box-sizing: border-box;
- background: rgba(79, 79, 79, 0.7);
- border-radius: 0.2rem;
- border: 1px solid #3976f1;
- font-size: 0.7rem;
- color: #ffffff;
+ .ol-popup{
+ width:10rem;
+ position: absolute;
+ margin: 0.5rem;
+
+ > div {
+ padding: 0.5rem;
+ box-sizing: border-box;
+ background: rgba(79, 79, 79, 0.7);
+ border-radius: 0.2rem;
+ border: 1px solid #3976f1;
+ font-size: 0.7rem;
+ color: #ffffff;
+ }
}
// 放大缩小控件
diff --git a/src/views/big-screen/disease-components/traffic-log.vue b/src/views/big-screen/disease-components/traffic-log.vue
index c8cf0f8..f7eb36b 100644
--- a/src/views/big-screen/disease-components/traffic-log.vue
+++ b/src/views/big-screen/disease-components/traffic-log.vue
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-08 11:56:02
* @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-23 13:23:20
+ * @LastEditTime: 2024-12-24 09:07:12
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-log.vue
* @Description: 病害巡检-病害日志
-->
@@ -112,21 +112,6 @@
/>
-
-
-
-
-
@@ -146,7 +131,8 @@
style="width: 100%; background: none"
height="85%"
>
-
+
+
-
-
- {{ scope.row.state === "2" ? "已修复" : "未修复" }}
-
-
-
+
[],
- }
+ default: () => [],
+ },
},
data() {
return {
@@ -224,8 +205,6 @@ export default {
stakeEnd: "",
// 病害类型
defectType: "",
- // 病害状态
- state: "",
},
// 时间选择筛选
dateTime: [],
@@ -235,13 +214,6 @@ export default {
lineList: [],
// 路段名称下拉数据
segmentList: [],
- // 病害类型下拉数据
- // eventType: [],
- // 病害状态下拉数据
- defectStatus: [
- { label: "已修复", value: "2" },
- { label: "未修复", value: "1" },
- ],
// 事件列表
emergencyList: [],
// 分页数据绑定
@@ -257,7 +229,6 @@ export default {
bottomTipClick: {
handler() {
this.trafficForm.defectType = "";
- // this.getAllDefectType();
this.getData();
},
},
@@ -265,7 +236,6 @@ export default {
mounted() {
this.getData();
this.getLineList();
- // this.getAllDefectType();
this.getSegmentList();
},
methods: {
@@ -305,19 +275,6 @@ export default {
});
},
- // /**
- // * @description: 获取病害类型下拉数据
- // * @param {*}
- // * @return {*}
- // */
- // getAllDefectType() {
- // DefectType({ classType: this.bottomTipClick }).then(({ code, data }) => {
- // if (code === 200) {
- // this.eventType = data;
- // }
- // });
- // },
-
/**
* @description: 点击搜索事件
* @param {*}
@@ -382,8 +339,6 @@ export default {
stakeEnd: "",
// 病害类型
defectType: "",
- // 病害状态
- state: "",
};
this.dateTime = [];
this.segmentList = [];
@@ -443,7 +398,7 @@ export default {
.traffic-form {
width: calc(100% - 0.5rem);
- height: 22rem;
+ height: 19rem;
padding: 0.5rem;
.form-item {
@@ -530,7 +485,7 @@ export default {
}
.form-btn {
- height: 4%;
+ height: 5%;
width: 100%;
display: flex;
justify-content: flex-end;
@@ -569,7 +524,7 @@ export default {
::v-deep .traffic-table {
width: 100%;
- height: 42%;
+ height: 50%;
padding: 0.5rem 0;
overflow: hidden;
@@ -646,6 +601,7 @@ export default {
// 按钮样式
.btn-submit {
+ height: 2rem;
background-color: transparent;
background-image: url("~@/assets/screen/index/btn-submit.png");
background-repeat: no-repeat;
diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue
index 6365978..0ed52bd 100644
--- a/src/views/big-screen/index.vue
+++ b/src/views/big-screen/index.vue
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 11:34:00
* @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-23 14:29:26
+ * @LastEditTime: 2024-12-24 11:20:36
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页
-->
@@ -432,6 +432,8 @@ import VectorLayer from "ol/layer/Vector";
import * as geomExports from "ol/geom";
import Cluster from "ol/source/Cluster";
import logo from "@/assets/xc.png";
+import { getCenter } from "ol/extent";
+import MultiLineString from "ol/geom/MultiLineString";
// 组件
import ModuleBlock from "./module-block.vue";
import TodayInspection from "./overview-components/today-inspection.vue";
@@ -622,6 +624,8 @@ export default {
clusters: null,
// 线段图层
markLayerLines: null,
+ // 是否需要修改地图中心点
+ isCenterCalculated: false,
// 图片弹窗标题
imgTitle: "查看",
@@ -847,6 +851,7 @@ export default {
this.showMap = false;
this.markLayerLines = null;
this.companyId = null;
+ this.isCenterCalculated = false;
},
/**
@@ -1011,7 +1016,7 @@ export default {
src: require(`@/assets/screen/index/${
this.mapLogeList[
feature.getProperties().features[0].get("data").iconType
- ]
+ ] || "龟裂"
}.png`),
// 图标缩放比例
scale: 0.6,
@@ -1077,6 +1082,39 @@ export default {
this.mapLegendList = data.basLinetypeSetting;
this.lineString = data.lines;
this.drawLine();
+ // 修改地图中心点
+ if (!this.isCenterCalculated) {
+ const lineArray = data.lines.map((item) => {
+ return JSON.parse(item.line).map((it) => {
+ return [it.lon, it.lat];
+ });
+ });
+ // 创建 MultiLineString 对象
+ const multiLine = new MultiLineString(lineArray);
+ // 获取 MultiLineString 的边界框（extent）
+ const extent = multiLine.getExtent();
+ // 计算边界框的中心点
+ const center = getCenter(extent);
+ if (this.showMap) {
+ this.$nextTick(() => {
+ const map = this.$refs.overViewMap.instance.get("map");
+ map.getView().animate({
+ center,
+ duration: 500,
+ });
+ });
+ } else {
+ this.$nextTick(() => {
+ const map = this.$refs.roadMap.instance.get("map");
+ // map.getView().setCenter(center);
+ map.getView().animate({
+ center,
+ duration: 500,
+ });
+ });
+ }
+ this.isCenterCalculated = true;
+ }
}
});
},
@@ -1275,6 +1313,8 @@ export default {
// 清除已经点击的公司
this.companyId = null;
if (item.component === "OverviewScreen") {
+ // 将线段中心点修改标识置为false
+ this.isCenterCalculated = false;
/* 清空线段图层 */
this.markLayerLines = null;
this.leftModuleList = [
@@ -1373,6 +1413,8 @@ export default {
class: "twe",
},
];
+ // 将线段中心点修改标识置为false
+ this.isCenterCalculated = false;
// 隐藏总览地图
this.showMap = false;
// 发送小车位置消息
@@ -1455,7 +1497,6 @@ export default {
map.removeLayer(this.clusters);
this.clusters = null;
map.getView().setZoom(10);
- map.getView().setCenter([123.30297096718999, 41.87942945541742]);
});
this.getLinePoint();
}
diff --git a/src/views/xj/inspection-warn/warning-line/index.vue b/src/views/xj/inspection-warn/warning-line/index.vue
index 36a57fb..9c5bd79 100644
--- a/src/views/xj/inspection-warn/warning-line/index.vue
+++ b/src/views/xj/inspection-warn/warning-line/index.vue
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-12-17 09:18:08
* @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-23 11:44:13
+ * @LastEditTime: 2024-12-24 10:52:05
* @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-line\index.vue
* @Description: 预警中心-大屏图例设置
-->
@@ -28,9 +28,9 @@
≤{{ scope.row.s4 }}
-
+
+ >{{ scope.row.s4 }}
+