fix：修改部分页面适配，设置地图最大最小缩放等级

src/api/xj/screen/index.js

@@ -2,30 +2,35 @@ import request from "@/utils/request";
 
 // 获取数据栏右上角选择数据接口
 export function selectTypeList(query) {
-    return request({
+  return request({
-      url: "/bigscreen/getSwitch",
+    url: "/bigscreen/getSwitch",
-      method: "get",
+    method: "get",
-      params: query,
+    params: query,
-    });
+  });
-  }
+}
-
 
 // 获取地图打点数据接口
 export function mapPointList(query) {
-    return request({
+  return request({
-      url: "/bigscreen/getMapPoint",
+    url: "/bigscreen/getMapPoint",
-      method: "get",
+    method: "get",
-      params: query,
+    params: query,
-    });
+  });
-  }
+}
-
 
 // 获取地图绘制线段数据接口
 export function mapPciList(query) {
-    return request({
+  return request({
-      url: "/bigscreen/roadPci",
+    url: "/bigscreen/roadPci",
-      method: "get",
+    method: "get",
-      params: query,
+    params: query,
-    });
+  });
-  }
+}
 
+//  获取图片背景下地图坐标信息
+export function comppanyImg() {
+  return request({
+    url: "/bigscreen/getCompanyInfo",
+    method: "get",
+  });
+}

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-24 17:17:45
+ * @LastEditTime: 2024-10-31 13:58:48
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\fssm-map.vue
  * @Description: 公共地图
 -->
@@ -203,6 +203,8 @@ export default {
           center: [this.centerPoint.lat, this.centerPoint.lon], //中心点经纬度
           zoom: this.zoom, //图层缩放大小
           projection: "EPSG:4326",
+          minZoom: 7,
+          maxZoom: 14,
         }),
         layers: [tianditu_vec_c, tianditu_img_c, tianditu_cva_c],
       });
@@ -255,7 +257,7 @@ export default {
         }
       });
       // 地图缩放级别事件
-      map.on("moveend",(e)=> {
+      map.on("moveend", (e) => {
         const zoom = map.getView().getZoom().toFixed(); //获取当前地图的缩放级别
         this.$emit("map-moveend", zoom);
       });

src/views/big-screen/disease-components/today-inspection.vue

@@ -96,12 +96,12 @@ export default {
     padding: 1rem;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: space-around;
     color: #ffffff;
 
     .right-sum {
       width: 100%;
-      height: 4rem;
+      height: 45%;
       display: flex;
       padding-left: 1rem;
       justify-content: center;
@@ -129,7 +129,7 @@ export default {
 
     .right-rate {
       width: 100%;
-      height: 4rem;
+      height: 45%;
       padding-left: 1rem;
       display: flex;
       justify-content: center;

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-29 14:00:48
+ * @LastEditTime: 2024-10-31 13:32:00
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -115,7 +115,7 @@
           <div class="map-care">
             <div
               class="map-care-div"
-              :class="`map-care-div-${index + 1}`"
+              :class="`map-care-div-${item.tip}`"
               v-for="(item, index) in mapCareList"
               :key="`map-care-${index}`"
               :style="{ left: item.left, top: item.top }"
@@ -211,6 +211,7 @@ import {
   selectTypeList,
   mapPointList,
   mapPciList,
+  comppanyImg,
 } from "@/api/xj/screen/index";
 export default {
   name: "BigScreen",
@@ -251,7 +252,7 @@ export default {
       leftModuleList: [
         {
           width: "100%",
-          height: "14rem",
+          height: "27%",
           title: "今日巡查",
           component: TodayInspection,
           selectIsShow: false,
@@ -259,7 +260,7 @@ export default {
         },
         {
           width: "100%",
-          height: "14rem",
+          height: "27%",
           title: "病害趋势",
           component: DiseaseTrends,
           selectIsShow: false,
@@ -267,7 +268,7 @@ export default {
         },
         {
           width: "100%",
-          height: "15rem",
+          height: "29%",
           title: "病害趋势",
           component: DiseaseCurrent,
           selectIsShow: true,
@@ -279,7 +280,7 @@ export default {
       rightModuleList: [
         {
           width: "100%",
-          height: "13rem",
+          height: "25%",
           title: "工单统计",
           component: WorkOrder,
           selectIsShow: false,
@@ -287,7 +288,7 @@ export default {
         },
         {
           width: "100%",
-          height: "17rem",
+          height: "33%",
           title: "PIC排名",
           component: PicRank,
           selectIsShow: false,
@@ -295,7 +296,7 @@ export default {
         },
         {
           width: "100%",
-          height: "13rem",
+          height: "25%",
           title: "路面状况排名",
           component: RoadRank,
           selectIsShow: true,
@@ -392,6 +393,11 @@ export default {
     },
     /* 获取图片背景下坐标数据 */
     getMapCare() {
+      comppanyImg().then(({ code, data }) => {
+        if (code === 200) {
+          console.log(data, "ffff");
+        }
+      });
       this.mapCareList = [
         {
           name: "沈抚",
@@ -399,9 +405,63 @@ export default {
           top: "15%",
           tip: "1",
         },
+        {
+          name: "葫芦岛",
+          left: "24%",
+          top: "38%",
+          tip: "1",
+        },
+        {
+          name: "阜新",
+          left: "40%",
+          top: "10%",
+          tip: "1",
+        },
+        {
+          name: "盘锦",
+          left: "44%",
+          top: "27%",
+          tip: "1",
+        },
+        {
+          name: "铁岭",
+          left: "70%",
+          top: "3%",
+          tip: "1",
+        },
+        {
+          name: "抚顺",
+          left: "75%",
+          top: "17%",
+          tip: "1",
+        },
+        {
+          name: "本溪",
+          left: "67%",
+          top: "26%",
+          tip: "1",
+        },
+        {
+          name: "辽阳",
+          left: "60%",
+          top: "30%",
+          tip: "1",
+        },
+        {
+          name: "营口",
+          left: "48%",
+          top: "42%",
+          tip: "1",
+        },
+        {
+          name: "鞍山",
+          left: "57%",
+          top: "38%",
+          tip: "1",
+        },
         {
           name: "沈阳",
-          left: "55%",
+          left: "54%",
           top: "12%",
           tip: "2",
         },
@@ -419,14 +479,14 @@ export default {
         },
         {
           name: "大连",
-          left: "50%",
+          left: "43%",
-          top: "50%",
+          top: "53%",
           tip: "5",
         },
         {
           name: "丹东",
-          left: "70%",
+          left: "71%",
-          top: "40%",
+          top: "39%",
           tip: "6",
         },
       ];
@@ -463,11 +523,10 @@ export default {
         mapPointList({ type: this.mapClick }).then(({ code, data }) => {
           if (code === 200) {
             this.centerPiont = data.map((item) => {
-              if(item.geometry){
+              if (item.geometry) {
-
                 return [item.geometry[0], item.geometry[1]];
               }
-              return []
+              return [];
             });
             this.drawPoint();
           }
@@ -500,8 +559,8 @@ export default {
         features.push(feature);
       });
       const clusterSource = new Cluster({
-        distance: 40,
+        distance: 60,
-        minDistance: 40,
+        minDistance: 60,
         source: new VectorSource({
           features,
         }),
@@ -681,7 +740,7 @@ export default {
       if (this.clusters && zoom > 13) {
         this.clusters.getSource().setDistance(0);
       } else if (this.clusters && zoom <= 13) {
-        this.clusters.getSource().setDistance(40);
+        this.clusters.getSource().setDistance(60);
       }
     },
     /* 地图选中feature事件 */
@@ -722,7 +781,7 @@ export default {
           this.leftModuleList = [
             {
               width: "100%",
-              height: "14rem",
+              height: "27%",
               title: "今日巡查",
               component: TodayInspection,
               selectIsShow: false,
@@ -730,7 +789,7 @@ export default {
             },
             {
               width: "100%",
-              height: "14rem",
+              height: "27%",
               title: "病害趋势",
               component: DiseaseTrends,
               selectIsShow: false,
@@ -738,7 +797,7 @@ export default {
             },
             {
               width: "100%",
-              height: "15rem",
+              height: "29%",
               title: "病害趋势",
               component: DiseaseCurrent,
               selectIsShow: true,
@@ -749,7 +808,7 @@ export default {
           this.rightModuleList = [
             {
               width: "100%",
-              height: "13rem",
+              height: "25%",
               title: "工单统计",
               component: WorkOrder,
               selectIsShow: false,
@@ -757,7 +816,7 @@ export default {
             },
             {
               width: "100%",
-              height: "17rem",
+              height: "33%",
               title: "PIC排名",
               component: PicRank,
               selectIsShow: false,
@@ -765,7 +824,7 @@ export default {
             },
             {
               width: "100%",
-              height: "13rem",
+              height: "25%",
               title: "路面状况排名",
               component: RoadRank,
               selectIsShow: true,
@@ -777,7 +836,7 @@ export default {
           this.leftModuleList = [
             {
               width: "100%",
-              height: "9rem",
+              height: "17%",
               title: "管养道路统计",
               component: ManageMaintain,
               selectIsShow: false,
@@ -785,7 +844,7 @@ export default {
             },
             {
               width: "100%",
-              height: "28rem",
+              height: "55%",
               title: "附属设施分布",
               component: AncillaryFacilities,
               selectIsShow: false,
@@ -795,7 +854,7 @@ export default {
           this.rightModuleList = [
             {
               width: "100%",
-              height: "15rem",
+              height: "29%",
               title: "附属设施异常统计",
               component: AnomalyFacilities,
               selectIsShow: true,
@@ -804,7 +863,7 @@ export default {
             },
             {
               width: "100%",
-              height: "29rem",
+              height: "57%",
               title: "路产统计",
               component: RoadStatistic,
               selectIsShow: true,
@@ -816,7 +875,7 @@ export default {
           this.leftModuleList = [
             {
               width: "100%",
-              height: "14rem",
+              height: "27%",
               title: "交安事件",
               component: TrafficSafety,
               selectIsShow: false,
@@ -824,7 +883,7 @@ export default {
             },
             {
               width: "100%",
-              height: "14rem",
+              height: "27%",
               title: "交安事件趋势",
               component: TrafficTrend,
               selectIsShow: true,
@@ -832,7 +891,7 @@ export default {
             },
             {
               width: "100%",
-              height: "17rem",
+              height: "33%",
               title: "交安事件统计",
               component: TrafficStatistic,
               selectIsShow: true,
@@ -843,7 +902,7 @@ export default {
           this.rightModuleList = [
             {
               width: "100%",
-              height: "29rem",
+              height: "50%",
               title: "交安事件排名",
               component: TrafficRank,
               selectIsShow: true,
@@ -852,7 +911,7 @@ export default {
             },
             {
               width: "100%",
-              height: "15rem",
+              height: "29%",
               title: "交安突发事件",
               component: TrafficEmergency,
               selectIsShow: false,
@@ -894,23 +953,6 @@ export default {
     background-image: url("../../assets/screen/index/bg-left.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    grid-template-columns: 94.4rem 94.4rem;
-    grid-template-areas:
-      "one "
-      "two "
-      "three ";
-
-    .one {
-      grid-area: one;
-    }
-
-    .two {
-      grid-area: two;
-    }
-
-    .three {
-      grid-area: three;
-    }
 
     ::v-deep .screen-checkBox {
       .el-radio-button__inner {

src/views/big-screen/module-block.vue

@@ -61,7 +61,7 @@ export default {
     background-size: 100% 100%;
 
     .header-title {
-      width: 18rem;
+      width: 75%;
       height: 100%;
       padding-left: 6rem;
       line-height: 2rem;
@@ -74,7 +74,7 @@ export default {
     }
 
     .header-operation {
-      width: calc(100% - 18rem);
+      width: 25%;
       height: 2.5rem;
       line-height: 2rem;
     }

src/views/big-screen/road-components/anomaly-facilities.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 15:21:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-30 17:13:17
+ * @LastEditTime: 2024-10-31 14:24:19
  * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\anomaly-facilities.vue
  * @Description: 附属设施异常统计
 -->
@@ -48,7 +48,7 @@ export default {
       // echart图数据
       anomalyData: [],
       // echart实例
-      chart:null
+      chart: null,
     };
   },
   watch: {
@@ -97,8 +97,8 @@ export default {
     },
     /* 绘制echart */
     drawChart() {
-      if(this.chart){
+      if (this.chart) {
-        this.chart.dispose()
+        this.chart.dispose();
       }
       const xData = this.anomalyData.map((item) => {
         return item.label;
@@ -249,6 +249,51 @@ export default {
             data: yData,
           },
         ],
+        dataZoom: [
+          {
+            // 设置滚动条的隐藏与显示
+            show: false,
+            // 设置滚动条类型
+            type: "slider",
+            // 设置背景颜色
+            backgroundColor: "rgba(225,225,225,0.2)",
+            // 设置选中范围的填充颜色
+            fillerColor: "#ccc",
+            // 设置边框颜色
+            borderColor: "rgba(225,225,225,0.2)",
+            // 是否显示detail，即拖拽时候显示详细数值信息
+            showDetail: false,
+            // 数据窗口范围的起始数值
+            startValue: 0,
+            // 数据窗口范围的结束数值（一页显示多少条数据）
+            endValue: 10,
+            // empty：当前数据窗口外的数据，被设置为空。
+            // 即不会影响其他轴的数据范围
+            filterMode: "empty",
+            // 设置滚动条宽度，相对于盒子宽度
+            width: "80%",
+            // 设置滚动条高度
+            height: 5,
+            // 设置滚动条显示位置
+            left: "center",
+            // 是否锁定选择区域（或叫做数据窗口）的大小
+            zoomLoxk: true,
+            // 控制手柄的尺寸
+            handleSize: 10,
+            // dataZoom-slider组件离容器下侧的距离
+            bottom: 0,
+          },
+          {
+            // 没有下面这块的话，只能拖动滚动条，
+            // 鼠标滚轮在区域内不能控制外部滚动条
+            type: "inside",
+            // 滚轮是否触发缩放
+            zoomOnMouseWheel: false,
+            // 鼠标滚轮触发滚动
+            moveOnMouseMove: true,
+            moveOnMouseWheel: true,
+          },
+        ],
       });
       window.addEventListener("resize", () => {
         this.chart.resize();

src/views/big-screen/traffic-components/traffic-rank.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 10:11:03
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-31 09:12:01
+ * @LastEditTime: 2024-10-31 14:25:18
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-rank.vue
  * @Description: 交安事件大屏-交安事件排名
 -->
@@ -14,7 +14,7 @@
       class="vue-scroll"
       :class-option="defaultOption"
       :data="rankList"
-      v-if="rankList.length > 9"
+      v-if="rankList.length > 7"
     >
       <div
         class="rank-div"

src/views/big-screen/traffic-components/traffic-trend.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 10:03:08
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-30 16:32:10
+ * @LastEditTime: 2024-10-31 14:34:36
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
  * @Description: 交安事件大屏-交安事件趋势
 -->
@@ -248,6 +248,51 @@ export default {
             data: yData,
           },
         ],
+        dataZoom: [
+          {
+            // 设置滚动条的隐藏与显示
+            show: false,
+            // 设置滚动条类型
+            type: "slider",
+            // 设置背景颜色
+            backgroundColor: "rgba(225,225,225,0.2)",
+            // 设置选中范围的填充颜色
+            fillerColor: "#ccc",
+            // 设置边框颜色
+            borderColor: "rgba(225,225,225,0.2)",
+            // 是否显示detail，即拖拽时候显示详细数值信息
+            showDetail: false,
+            // 数据窗口范围的起始数值
+            startValue: 0,
+            // 数据窗口范围的结束数值（一页显示多少条数据）
+            endValue: 6,
+            // empty：当前数据窗口外的数据，被设置为空。
+            // 即不会影响其他轴的数据范围
+            filterMode: "empty",
+            // 设置滚动条宽度，相对于盒子宽度
+            width: "80%",
+            // 设置滚动条高度
+            height: 5,
+            // 设置滚动条显示位置
+            left: "center",
+            // 是否锁定选择区域（或叫做数据窗口）的大小
+            zoomLoxk: true,
+            // 控制手柄的尺寸
+            handleSize: 10,
+            // dataZoom-slider组件离容器下侧的距离
+            bottom: 0,
+          },
+          {
+            // 没有下面这块的话，只能拖动滚动条，
+            // 鼠标滚轮在区域内不能控制外部滚动条
+            type: "inside",
+            // 滚轮是否触发缩放
+            zoomOnMouseWheel: false,
+            // 鼠标滚轮触发滚动
+            moveOnMouseMove: true,
+            moveOnMouseWheel: true,
+          },
+        ],
       });
       window.addEventListener("resize", () => {
         this.chart.resize();