fix：修改大屏返回逻辑，去除默认密码，修改地图共用一个，线段点击打点

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 @@
           </el-select>
         </div>
         <!-- 图片背景返回 -->
-        <div class="return-image" v-if="showMap">
+        <div
+          class="return-image"
+          v-if="showMap && elementDiv === 'OverviewScreen'"
+        >
           <el-button type="info" size="mini" round @click="disabledMapCompany"
             >返回</el-button
           >
@@ -321,10 +324,10 @@
           </div>
         </div>
         <!-- 总览地图 -->
-        <fssm-map ref="overViewMap" v-if="showMap"> </fssm-map>
+        <!-- <fssm-map ref="overViewMap" v-if="showMap"> </fssm-map> -->
         <!-- 病害巡检、道路资产地图 -->
         <fssm-map
-          v-if="elementDiv !== 'OverviewScreen' && !showMap"
+          v-if="showMap"
           ref="roadMap"
           :showChange="false"
           :controlStyle="{ top: '20%', left: '26%' }"
@@ -455,6 +458,7 @@ import ImgDialog from "./components/img-dialog.vue";
 import FssmScroll from "@/components/scroll/fssm-scroll.vue";
 import CountTo from "vue-count-to";
 import "animate.css";
+import debounce from "lodash/debounce";
 // 接口
 import {
   selectTypeList,
@@ -577,12 +581,12 @@ export default {
       showIconList: false,
 
       // 图片背景下病害类型下拉选择绑定
-      mapCareSelect: "",
+      mapCareSelect: [],
       // 图片背景下病害类型下拉选择数据
       dieaseOptions: [],
       // 地图打点-路段绑定
       roadSelect: "",
-      // 总览页面是否展示地图显隐控制
+      // 是否展示地图显隐控制
       showMap: false,
       // 图片背景下popover弹窗病害名称
       screenMapPopoverName: "",
@@ -612,9 +616,9 @@ export default {
         { name: "道路资产", component: "RoadScreen" },
       ],
 
-      // 中心点集合(全部)
+      // 中心点集合(过滤后得点位)
       centerPiont: [],
-      // 中心点集合（当前）
+      // 中心点集合（所有点位）
       drawPointList: [],
       // 点位图标map
       mapLogeList: {},
@@ -628,6 +632,8 @@ export default {
       markLayerLines: null,
       // 是否需要修改地图中心点
       isCenterCalculated: false,
+      // 线段点击保存得参数
+      defectMapPiont: {},
 
       // 图片弹窗标题
       imgTitle: "查看",
@@ -854,6 +860,9 @@ export default {
       this.markLayerLines = null;
       this.companyId = null;
       this.isCenterCalculated = false;
+      this.mapCareSelect = [];
+      this.getMapCare([]);
+      this.changeOrder(this.workOrderType);
     },
 
     /**
@@ -864,16 +873,19 @@ export default {
       this.imgTitle = "查看";
       this.imageItem = item;
       this.imgVisible = true;
+      // 清除点击得线段参数
+      this.defectMapPiont = {};
       // 地图右上角多选按钮显示
       this.getIconType();
       this.showIconList = true;
       // 地图打点\改变地图层级
       this.$nextTick(() => {
         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;
+          const map = this.$refs.roadMap.instance.get("map");
-          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;
         });
@@ -1097,32 +1140,20 @@ export default {
             const extent = multiLine.getExtent();
             // 计算边界框的中心点
             const center = getCenter(extent);
-            if (this.showMap) {
+
-              this.$nextTick(() => {
+            this.$nextTick(() => {
-                const map = this.$refs.overViewMap.instance.get("map");
+              const map = this.$refs.roadMap.instance.get("map");
-                map.getView().animate({
+              // map.getView().setCenter(center);
-                  center,
+              map.getView().animate({
-                  duration: 500,
+                center,
-                });
+                duration: 500,
-                map.getView().fit(extent, {
-                  duration: 500,
-                  padding: [80, 500, 80, 500], // 边缘填充（可选）
-                });
               });
-            } else {
+              map.getView().fit(extent, {
-              this.$nextTick(() => {
+                duration: 500,
-                const map = this.$refs.roadMap.instance.get("map");
+                padding: [80, 500, 80, 500], // 边缘填充（可选）
-                // map.getView().setCenter(center);
-                map.getView().animate({
-                  center,
-                  duration: 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(() => {
+      this.$nextTick(() => {
-          const map = this.$refs.overViewMap.instance.get("map");
+        const map = this.$refs.roadMap.instance.get("map");
-          map.addLayer(this.markLayerLines);
+        map.addLayer(this.markLayerLines);
-        });
+      });
-      } else {
-        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.defectMapPiont = {};
-        this.companyId = null;
+        this.changeMapElement(item);
-        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();
-        }
       }
     },
 
+    /**
+     * @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;

src/views/login.vue

@@ -107,8 +107,8 @@ export default {
     return {
       codeUrl: "",
       loginForm: {
-        username: "admin",
+        username: "",
-        password: "admin123",
+        password: "",
         rememberMe: false,
         code: "",
         uuid: "",