From ce65a6fb8100c9a9dce15733dc23a9f317fed6e4 Mon Sep 17 00:00:00 2001 From: SunTao <328867980@qq.com> Date: Fri, 27 Dec 2024 11:58:54 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E5=A4=A7?= =?UTF-8?q?=E5=B1=8F=E8=BF=94=E5=9B=9E=E9=80=BB=E8=BE=91=EF=BC=8C=E5=8E=BB?= =?UTF-8?q?=E9=99=A4=E9=BB=98=E8=AE=A4=E5=AF=86=E7=A0=81=EF=BC=8C=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E5=9C=B0=E5=9B=BE=E5=85=B1=E7=94=A8=E4=B8=80=E4=B8=AA?= =?UTF-8?q?=EF=BC=8C=E7=BA=BF=E6=AE=B5=E7=82=B9=E5=87=BB=E6=89=93=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/big-screen/index.vue | 564 ++++++++++++++++++--------------- src/views/login.vue | 4 +- 2 files changed, 315 insertions(+), 253 deletions(-) diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue index fe69f6c..6683c8c 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-26 10:40:09 + * @LastEditTime: 2024-12-27 11:39:58 * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue * @Description: 大屏首页 --> @@ -271,7 +271,10 @@ -
+
返回 @@ -321,10 +324,10 @@
- + { const map = this.$refs.roadMap.instance.get("map"); + this.$refs.roadMap.removeSelectClick(); map.getView().setCenter(item.tablePoint); map.getView().setZoom(16); }); - this.roadSelect = item.segmentId; + // this.roadSelect = item.segmentId; this.getCenterPiont(); }, @@ -928,7 +940,7 @@ export default { mapPointList({ type: this.elementDiv, classType: this.bottomTipClick, - segmentId: this.roadSelect, + ...this.defectMapPiont, }).then(({ code, data }) => { if (code === 200) { this.drawPointList = data.map((item) => { @@ -949,15 +961,51 @@ export default { } return []; }); + // 修改地图中心点位 + const pointArray = data.map((item) => { + if (item.geometry) { + return [item.geometry[0], item.geometry[1]]; + } + return []; + }); + // console.log(pointArray); + this.fitMapToPoints(pointArray); // 如果不是病害巡检，则绘制点位 // 如果图片弹窗打开，则绘制点位 - if (this.elementDiv !== "DiseaseScreen" || this.imgVisible) { - this.drawPoint(); - } + this.drawPoint(); } }); }, + /** + * @description: 根据点位计算地图中心点 + * @return {void} + */ + fitMapToPoints(points) { + if (points.length > 0) { + // 创建一个空的 extent + let extent = [Infinity, Infinity, -Infinity, -Infinity]; + // 计算所有点的边界框（extent） + points.forEach((point) => { + extent = [ + Math.min(extent[0], point[0]), + Math.min(extent[1], point[1]), + Math.max(extent[2], point[0]), + Math.max(extent[3], point[1]), + ]; + }); + + // 获取地图实例 + const map = this.$refs.roadMap.instance.get("map"); + + // 使用 fit 方法根据边界框计算最佳缩放级别 + map.getView().fit(extent, { + duration: 500, // 动画持续时间 + padding: [80, 500, 80, 500], // 边缘填充 + }); + } + }, + /** * @description: 绘制地图点位 * @return {void} @@ -995,7 +1043,7 @@ export default { crossOrigin: "anonymous", src: require(`@/assets/screen/index/龟裂.png`), // 图标缩放比例 - scale: 0.6, + scale: 0.5, displacement: [0, 30], // 0.3为30度 // rotation: 0.3, @@ -1004,7 +1052,7 @@ export default { textAlign: "center", //位置 textBaseline: "middle", font: "normal 14px 微软雅黑", - offsetY: -50, + offsetY: -40, fill: new Fill({ color: "#ffffff", }), @@ -1021,7 +1069,7 @@ export default { ] || "龟裂" }.png`), // 图标缩放比例 - scale: 0.6, + scale: 0.5, displacement: [0, 30], // 0.3为30度 // rotation: 0.3, @@ -1030,7 +1078,7 @@ export default { textAlign: "center", //位置 textBaseline: "middle", font: "normal 14px 微软雅黑", - offsetY: -50, + offsetY: -40, fill: new Fill({ color: "#ffffff", }), @@ -1054,12 +1102,7 @@ export default { if (this.markLayerLines) { // 清除线段图层 this.$nextTick(() => { - let map = null; - if (this.$refs.roadMap) { - map = this.$refs.roadMap.instance.get("map"); - } else { - map = this.$refs.overViewMap.instance.get("map"); - } + const map = this.$refs.roadMap.instance.get("map"); map.removeLayer(this.markLayerLines); this.markLayerLines = null; }); @@ -1097,32 +1140,20 @@ export default { 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, - }); - map.getView().fit(extent, { - duration: 500, - padding: [80, 500, 80, 500], // 边缘填充（可选） - }); + + this.$nextTick(() => { + const map = this.$refs.roadMap.instance.get("map"); + // map.getView().setCenter(center); + 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, - }); - map.getView().fit(extent, { - duration: 500, - padding: [80, 500, 80, 500], // 边缘填充（可选） - }); + map.getView().fit(extent, { + duration: 500, + padding: [80, 500, 80, 500], // 边缘填充（可选） }); - } + }); + this.isCenterCalculated = true; } } @@ -1144,6 +1175,7 @@ export default { data: { name: element.segmentName, count: element.defectCount, + segmentId: element.segmentId, stakeEnd: element.stakeEnd, stakeStart: element.stakeStart, }, @@ -1180,17 +1212,11 @@ export default { type: "line", }, }); - if (this.showMap) { - this.$nextTick(() => { - const map = this.$refs.overViewMap.instance.get("map"); - map.addLayer(this.markLayerLines); - }); - } else { - this.$nextTick(() => { - const map = this.$refs.roadMap.instance.get("map"); - map.addLayer(this.markLayerLines); - }); - } + + this.$nextTick(() => { + const map = this.$refs.roadMap.instance.get("map"); + map.addLayer(this.markLayerLines); + }); }, /** @@ -1222,6 +1248,7 @@ export default { this.defectSelect = ""; this.bottomTipClick = value; this.getAllDefectType(); + // 清空打点图层 this.$nextTick(() => { const map = this.$refs.roadMap.instance.get("map"); map.removeLayer(this.clusters); @@ -1232,6 +1259,7 @@ export default { // 地图右上角多选按钮隐藏 this.showIconList = false; // this.getIconType(); + // 绘制线段 this.getLinePoint(); } }, @@ -1285,7 +1313,8 @@ export default { let features = feature.get("features"); // 点击线段事件 if (feature.getProperties().type === "line") { - console.log(feature, "线段参数"); + // console.log(feature.get("data"), "线段参数"); + // this.drawDefectPoint(feature.get("data")); } else if (feature.getProperties().type === "carPoint") { console.log(feature, "小车点位"); } else { @@ -1311,208 +1340,239 @@ export default { } }, + /** + * @description: 地图点击线段进行打点 + * @param {object} + * @return {void} + */ + drawDefectPoint(item) { + this.defectMapPiont = item; + // 地图右上角多选按钮显示 + this.getIconType(); + this.showIconList = true; + // 地图打点\改变地图层级 + // this.$nextTick(() => { + // const map = this.$refs.roadMap.instance.get("map"); + // map.getView().setZoom(16); + // }); + // this.roadSelect = item.segmentId; + this.getCenterPiont(); + }, + /** * @description: 数据栏切换事件 * @param {object} item * @return {void} */ changeElement(item) { - if (this.elementDiv !== item) { + if (this.elementDiv !== item.component) { this.elementDiv = item.component; - this.roadSelect = ""; - // 清除已经点击的公司 - this.companyId = null; - if (item.component === "OverviewScreen") { - // 将线段中心点修改标识置为false - this.isCenterCalculated = false; - /* 清空线段图层 */ - this.markLayerLines = null; - this.leftModuleList = [ - { - width: "100%", - height: "27%", - title: "今日巡查", - component: TodayInspection, - selectIsShow: false, - class: "one", - }, - { - width: "100%", - height: "27%", - title: "病害趋势", - component: DiseaseTrends, - selectIsShow: false, - class: "twe", - }, - { - width: "100%", - height: "29%", - title: "病害统计", - component: DiseaseCurrent, - selectIsShow: true, - select: "", - class: "twe", - }, - ]; - this.rightModuleList = [ - { - width: "100%", - height: "18%", - title: "巡查里程", - component: PatrolOrder, - selectIsShow: false, - class: "one", - }, - { - width: "100%", - height: "65%", - title: "巡检车辆", - component: InspectionVehicles, - selectIsShow: false, - class: "twe", - }, - ]; - // 展示图片地图 - this.showMap = false; - // 不接收小车位置消息 - const data = { type: "carLocation", status: false }; - this.$ws.send(data); - this.$ws.removeEventListener("message", this.indexListenerId); - this.carPointList = []; - this.mapPointFeatures = []; - // 地图右上角多选按钮隐藏 - this.showIconList = false; - // 图层恢复 - this.mapZoom = ""; - } else if (item.component === "RoadScreen") { - this.leftModuleList = [ - { - width: "100%", - height: "17%", - title: "管养道路统计", - component: ManageMaintain, - selectIsShow: false, - class: "one", - }, - { - width: "100%", - height: "55%", - title: "附属设施分布", - component: AncillaryFacilities, - selectIsShow: false, - class: "twe", - }, - ]; - this.rightModuleList = [ - { - width: "100%", - height: "29%", - title: "附属设施异常统计", - component: AnomalyFacilities, - selectIsShow: true, - select: "", - class: "one", - }, - { - width: "100%", - height: "57%", - title: "路产统计", - component: RoadStatistic, - selectIsShow: true, - select: "", - class: "twe", - }, - ]; - // 将线段中心点修改标识置为false - this.isCenterCalculated = false; - // 隐藏总览地图 - this.showMap = false; - // 发送小车位置消息 - const data = { type: "carLocation", status: true }; - this.$ws.send(data); - this.$ws.on("message", this.handleMessage, this.indexListenerId); - // 将地图层级初始化 - this.$nextTick(() => { - const map = this.$refs.roadMap.instance.get("map"); - map.getView().setZoom(10); - map.getView().setCenter([123.30297096718999, 41.87942945541742]); - }); - // 地图右上角多选按钮显示 - this.getIconType(); - this.showIconList = true; - // 进行地图打点 - this.getCenterPiont(); - // 清除线段图层 - this.$nextTick(() => { - let map = null; - if (this.$refs.roadMap) { - map = this.$refs.roadMap.instance.get("map"); - } else { - map = this.$refs.overViewMap.instance.get("map"); - } - map.removeLayer(this.markLayerLines); - this.markLayerLines = null; - }); - } else if (item.component === "DiseaseScreen") { - this.leftModuleList = [ - { - width: "100%", - height: "27%", - title: "今日巡查", - component: TrafficSafety, - selectIsShow: false, - class: "one", - }, - { - width: "100%", - height: "27%", - title: "主要病害趋势", - component: TrafficTrend, - selectIsShow: true, - class: "twe", - }, - { - width: "100%", - height: "33%", - title: "病害统计", - component: TrafficStatistic, - selectIsShow: true, - select: "", - class: "twe", - }, - ]; - this.rightModuleList = [ - { - width: "100%", - height: "85%", - title: "病害日志", - component: TrafficLog, - selectIsShow: false, - select: "", - class: "one", - }, - ]; - //隐藏总览地图 - this.showMap = false; - // 发送小车位置消息 - const data = { type: "carLocation", status: true }; - this.$ws.send(data); - this.$ws.on("message", this.handleMessage, this.indexListenerId); - // 地图右上角多选按钮隐藏 - this.showIconList = false; - // 图层恢复 - this.mapZoom = ""; - this.$nextTick(() => { - const map = this.$refs.roadMap.instance.get("map"); - map.removeLayer(this.clusters); - this.clusters = null; - map.getView().setZoom(10); - }); - this.getLinePoint(); - } + // 清除点击得线段参数 + this.defectMapPiont = {}; + this.changeMapElement(item); } }, + /** + * @description: 数据栏切换两侧数据和地图事件 + * @param {object} item + * @return {void} + */ + changeMapElement: debounce(function (item) { + if (item.component === "OverviewScreen") { + this.leftModuleList = [ + { + width: "100%", + height: "27%", + title: "今日巡查", + component: TodayInspection, + selectIsShow: false, + class: "one", + }, + { + width: "100%", + height: "27%", + title: "病害趋势", + component: DiseaseTrends, + selectIsShow: false, + class: "twe", + }, + { + width: "100%", + height: "29%", + title: "病害统计", + component: DiseaseCurrent, + selectIsShow: true, + select: "", + class: "twe", + }, + ]; + this.rightModuleList = [ + { + width: "100%", + height: "18%", + title: "巡查里程", + component: PatrolOrder, + selectIsShow: false, + class: "one", + }, + { + width: "100%", + height: "65%", + title: "巡检车辆", + component: InspectionVehicles, + selectIsShow: false, + class: "twe", + }, + ]; + // 清除已经点击的公司 + this.companyId = null; + // 将线段中心点修改标识置为false + this.isCenterCalculated = false; + /* 清空线段图层 */ + this.markLayerLines = null; + // 不展示地图 + this.showMap = false; + // 不接收小车位置消息 + const data = { type: "carLocation", status: false }; + this.$ws.send(data); + this.$ws.removeEventListener("message", this.indexListenerId); + this.carPointList = []; + this.mapPointFeatures = []; + // 地图右上角多选按钮隐藏 + this.showIconList = false; + // 图层恢复 + this.mapZoom = ""; + } else if (item.component === "RoadScreen") { + this.leftModuleList = [ + { + width: "100%", + height: "17%", + title: "管养道路统计", + component: ManageMaintain, + selectIsShow: false, + class: "one", + }, + { + width: "100%", + height: "55%", + title: "附属设施分布", + component: AncillaryFacilities, + selectIsShow: false, + class: "twe", + }, + ]; + this.rightModuleList = [ + { + width: "100%", + height: "29%", + title: "附属设施异常统计", + component: AnomalyFacilities, + selectIsShow: true, + select: "", + class: "one", + }, + { + width: "100%", + height: "57%", + title: "路产统计", + component: RoadStatistic, + selectIsShow: true, + select: "", + class: "twe", + }, + ]; + // 清除已经点击的公司 + this.companyId = null; + // 将线段中心点修改标识置为false + this.isCenterCalculated = false; + // 隐藏总览地图 + this.showMap = true; + // 发送小车位置消息 + const data = { type: "carLocation", status: true }; + this.$ws.send(data); + this.$ws.on("message", this.handleMessage, this.indexListenerId); + // 将地图层级初始化 + this.$nextTick(() => { + const map = this.$refs.roadMap.instance.get("map"); + map.getView().setZoom(10); + map.getView().setCenter([123.30297096718999, 41.87942945541742]); + }); + // 地图右上角多选按钮显示 + this.getIconType(); + this.showIconList = true; + // 清除线段图层 + this.$nextTick(() => { + const map = this.$refs.roadMap.instance.get("map"); + map.removeLayer(this.markLayerLines); + this.markLayerLines = null; + }); + // 进行地图打点 + this.getCenterPiont(); + } else if (item.component === "DiseaseScreen") { + this.leftModuleList = [ + { + width: "100%", + height: "27%", + title: "今日巡查", + component: TrafficSafety, + selectIsShow: false, + class: "one", + }, + { + width: "100%", + height: "27%", + title: "主要病害趋势", + component: TrafficTrend, + selectIsShow: true, + class: "twe", + }, + { + width: "100%", + height: "33%", + title: "病害统计", + component: TrafficStatistic, + selectIsShow: true, + select: "", + class: "twe", + }, + ]; + this.rightModuleList = [ + { + width: "100%", + height: "85%", + title: "病害日志", + component: TrafficLog, + selectIsShow: false, + select: "", + class: "one", + }, + ]; + // 清除已经点击的公司 + this.companyId = null; + // 将线段中心点修改标识置为false + this.isCenterCalculated = false; + //隐藏总览地图 + this.showMap = true; + // 发送小车位置消息 + const data = { type: "carLocation", status: true }; + this.$ws.send(data); + this.$ws.on("message", this.handleMessage, this.indexListenerId); + // 地图右上角多选按钮隐藏 + this.showIconList = false; + // 图层恢复 + this.mapZoom = ""; + // 清除打点图层 + this.$nextTick(() => { + const map = this.$refs.roadMap.instance.get("map"); + map.removeLayer(this.clusters); + this.clusters = null; + map.getView().setZoom(10); + }); + this.getLinePoint(); + } + }, 500), + /** * @description: 处理websocket消息 * @return {*} @@ -2030,6 +2090,8 @@ export default { // 消息中心样式 .header-news { + margin-right: 1rem; + i { position: relative; cursor: pointer; diff --git a/src/views/login.vue b/src/views/login.vue index 299c241..2a9beea 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -107,8 +107,8 @@ export default { return { codeUrl: "", loginForm: { - username: "admin", - password: "admin123", + username: "", + password: "", rememberMe: false, code: "", uuid: "",