fix：大屏整合页面，添加按钮切换，添加根据图层层级打点画线

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-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

src/views/big-screen/components/img-dialog.vue

@@ -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>

src/views/big-screen/disease-components/disease-current.vue

@@ -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",
+        "#18F7FF",
-        "#E163EF",
+        "#FFEA68",
-        "#F81F1C",
+        "#AE74F3",
-        "#1D2AF9",
+        "#6FC36F",
-        "#03F0EA",
+        "#FF8F5F",
-        "#FFADAF",
+        "#6FC36F",
-        "#129CFE",
+        "#4C83FF",
-        "#106B6C",
+        "#FC5976",
-        "#96E619",
+        "#5B40B6",
       ],
       // echart数据
       dataList: [],

src/views/big-screen/disease-screen.vue

@@ -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>

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-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>
-      <!-- 底图切换 -->
+      <div class="road-content">
-      <disease-screen v-if="elementDiv === 'DiseaseScreen'"></disease-screen>
+        <!-- 左侧控制 -->
-      <road-screen v-else></road-screen>
+        <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,
+    FssmMap,
-    DiseaseScreen,
     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" },
       ],
-      // 地图切换标识
+      /* 具体icon类别 */
-      mapClick: "1",
+      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,23 +826,167 @@ export default {
     background-image: url("../../assets/screen/index/bg-right.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
+
+    ::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;
+      }
+    }
   }
 
-  .middle-map {
+  .road-content {
-    position: fixed;
+    width: 100%;
-    top: 0;
+    height: 100%;
-    z-index: 0;
+    position: relative;
-  }
 
-  ::v-deep .screen-checkBox {
+    // 病害筛查按钮样式
-    .el-radio-button__inner {
+    .road-select {
-      background-color: transparent;
+      width: 4rem;
-      padding: 0 0.3rem;
+      height: 6.5rem;
-      border: none;
+      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;
+        }
+      }
     }
 
-    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    // 右上角切换图标样式多选框
-      color: #1cb6ff;
+    .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%);
     }
   }
 }
@@ -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>

src/views/big-screen/road-screen.vue

@@ -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>

src/views/xj/inspection/traffic-management/index.vue

@@ -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();
       }

src/views/xj/parameter/index.vue

@@ -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",
             }),
           }),