fix：大屏线段打点逻辑修改,查看点位修改

src/api/xj/screen/index.js

@@ -45,28 +45,35 @@ export function comppanyImg() {
 
 // 获取病害筛选弹窗列表数据
 export function defeaseList(data) {
-    return request({
+  return request({
-      url: "/bigscreen/getCurrentDefectPage",
+    url: "/bigscreen/getCurrentDefectPage",
-      method: "post",
+    method: "post",
-      data,
+    data,
-    });
+  });
-  }
+}
 
 //   获取病害筛选弹窗路段下拉数据
 export function getSegment(data) {
-    return request({
+  return request({
-      url: "/bigscreen/selectIdList",
+    url: "/bigscreen/selectIdList",
-      method: "post",
+    method: "post",
-      data,
+    data,
-    });
+  });
-  }
+}
 
+// 根据选择的按钮类型查下级选项框
+export function getItemTypes(params) {
+  return request({
+    url: "/metadata/getItemTypes",
+    method: "get",
+    params,
+  });
+}
 
-  // 根据选择的按钮类型查下级选项框
+// 获取地图右上角路段下拉数据
-  export function getItemTypes(params) {
+export function getRoadListTypes() {
-    return request({
+  return request({
-      url: "/metadata/getItemTypes",
+    url: "/api/v2/segment/selectList",
-      method: "get",
+    method: "post",
-      params,
+  });
-    });
+}
-  }

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-11-07 09:09:50
+ * @LastEditTime: 2024-11-07 12:01:48
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -96,7 +96,7 @@
           </div>
         </div>
         <!-- 右上角切换坐标类型多选框 -->
-        <div class="road-checkBox" v-if="!showImgBk && this.mapZoom >= 13">
+        <div class="road-checkBox" v-if="!showImgBk">
           <fssm-scroll class="road-scroll">
             <el-checkbox-group v-model="iconType" @change="handleChecked">
               <el-checkbox
@@ -108,6 +108,22 @@
             </el-checkbox-group>
           </fssm-scroll>
         </div>
+        <!-- 切换路段选项框 -->
+        <div class="road-checkBox-twe" v-if="!showImgBk">
+          <el-select
+            :popper-append-to-body="false"
+            v-model="roadSelect"
+            placeholder="请选择路段"
+            @change="getCenterPiont"
+          >
+            <el-option
+              v-for="item in roadList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
         <!-- 图片背景 -->
         <div class="disease-content" v-if="showImgBk">
           <div class="disease-title"></div>
@@ -178,6 +194,32 @@
     >
       <img-dialog></img-dialog>
     </el-dialog>
+
+    <!-- 查看点位图片弹窗 -->
+    <el-dialog
+      title="查看点位"
+      :visible.sync="showImageDialog"
+      width="80rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="screenImgCancel"
+    >
+      <div class="image-container" ref="imageContainer">
+        <img
+          :src="screenImage.imageUrl"
+          alt="Main Image"
+          ref="mainImage"
+          @load="updateScreenRects"
+        />
+        <div
+          v-for="(rect, index) in screenRects"
+          :key="index"
+          class="rect-overlay"
+          :style="getScreenRectStyle(rect)"
+        ></div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -217,6 +259,7 @@ import {
   mapPciList,
   comppanyImg,
   getItemTypes,
+  getRoadListTypes,
 } from "@/api/xj/screen/index";
 export default {
   name: "BigScreen",
@@ -320,10 +363,14 @@ export default {
         { name: "路产", click: "equipment" },
         { name: "事件", click: "event" },
       ],
-      /* 具体icon类别 */
+      // 具体icon类别
       iconTypeList: [],
       // icon类别绑定
       iconType: [],
+      // 路段下拉绑定
+      roadList: [],
+      // 路段选择绑定
+      roadSelect: "",
       // 图标类别切换标识
       mapClick: "",
       // 中间展示的动态组件绑定
@@ -354,12 +401,19 @@ export default {
       imgTitle: "查看",
       // 图片弹窗显隐控制
       imgVisible: false,
+      // 查看点位图片数据
+      screenImage: {},
+      // 查看点位图片弹窗显隐控制
+      showImageDialog: false,
+      // 查看点位图片弹窗红框数据
+      screenRects: [],
     };
   },
   created() {
     this.setTime();
     this.getSelect();
     this.getMapCare();
+    this.getRoadList();
   },
   methods: {
     /* 获取当前时间 */
@@ -404,6 +458,15 @@ export default {
       });
     },
 
+    /* 获取路段下拉数据 */
+    getRoadList() {
+      getRoadListTypes().then(({ code, data }) => {
+        if (code === 200) {
+          this.roadList = data;
+        }
+      });
+    },
+
     /* 获取图片背景下坐标数据 */
     getMapCare() {
       comppanyImg().then(({ code, data }) => {
@@ -423,6 +486,11 @@ export default {
       this.imgVisible = false;
     },
 
+    /* 关闭查看点位大图弹窗 */
+    screenImgCancel() {
+      this.showImageDialog = false;
+    },
+
     /* 切换icon类型多选框事件 */
     handleChecked(value) {
       this.centerPiont = this.drawPointList.filter(
@@ -455,8 +523,15 @@ export default {
     /* 获取地图点位信息 */
     getCenterPiont() {
       // 如果当前已经有打点坐标
-      if (!this.clusters) {
+      if (this.clusters) {
-        mapPointList({ type: this.mapClick }).then(({ code, data }) => {
+        this.$nextTick(() => {
+          const map = this.$refs.roadMap.instance.get("map");
+          map.removeLayer(this.clusters);
+          this.clusters = null;
+        });
+      }
+      mapPointList({ type: this.mapClick, segmentId: this.roadSelect }).then(
+        ({ code, data }) => {
           if (code === 200) {
             this.drawPointList = data.map((item) => {
               if (item.geometry) {
@@ -478,8 +553,8 @@ export default {
             });
             this.drawPoint();
           }
-        });
+        }
-      }
+      );
     },
 
     /* 绘制地图点位 */
@@ -492,7 +567,7 @@ export default {
           geometry: point,
           data: {
             iconType: element.iconType,
-            mediaUrl: element.mediaUrl,
+            imageUrl: element.imageUrl,
             rect: element.rect,
           },
           // 自己设置一个标识
@@ -586,11 +661,7 @@ export default {
     getLinePoint() {
       mapPciList({ zoom: this.mapZoom }).then(({ code, data }) => {
         if (code === 200) {
-          this.lineString = data.map((item) => {
+          this.lineString = data;
-            return item?.coordinates?.split(";").map((it) => {
-              return it.split(",").map(Number);
-            });
-          });
           this.drawLine();
         }
       });
@@ -600,8 +671,11 @@ export default {
     drawLine() {
       const features = [];
       this.lineString.forEach((element) => {
+        const lines = element?.coordinates?.split(";").map((it) => {
+          return it.split(",").map(Number);
+        });
         const line = new Feature({
-          geometry: new geomExports.LineString(element),
+          geometry: new geomExports.LineString(lines),
           type: "line",
         });
         line.setStyle([
@@ -612,7 +686,7 @@ export default {
             }),
             // 边线颜色
             stroke: new Stroke({
-              color: "blue",
+              color: "#0ABE67",
               width: 5,
             }),
             // 形状
@@ -641,7 +715,7 @@ export default {
       });
     },
 
-    /* 图标类别切换点击事件 */
+    /* 地图下方4图标类别切换点击事件 */
     changeIconType(value) {
       if (this.mapClick !== value) {
         this.mapClick = value;
@@ -656,7 +730,7 @@ export default {
         this.getIconType(value);
         // 请求地图打点/绘制线段接口
         if (!this.mapZoom) {
-          this.getZoom("10");
+          this.getZoom("11");
         } else {
           this.getZoom(this.mapZoom);
         }
@@ -681,23 +755,22 @@ export default {
 
     /* 传回来的地图图层 */
     getZoom(zoom) {
-      this.mapZoom = zoom;
+      if (zoom === "11" && this.mapZoom !== zoom) {
-      if (zoom * 1 >= 13) {
+        this.mapZoom = zoom;
         this.$nextTick(() => {
           const map = this.$refs.roadMap.instance.get("map");
           map.removeLayer(this.markLayerLines);
           this.markLayerLines = null;
-          this.getCenterPiont();
         });
-      } else if (zoom * 1 < 13) {
+        this.getLinePoint();
+      } else if (zoom === "10" && this.mapZoom !== zoom) {
+        this.mapZoom = zoom;
         this.$nextTick(() => {
           const map = this.$refs.roadMap.instance.get("map");
-          map.removeLayer(this.clusters);
           map.removeLayer(this.markLayerLines);
-          this.clusters = null;
           this.markLayerLines = null;
-          this.getLinePoint();
         });
+        this.getLinePoint();
       }
     },
 
@@ -728,6 +801,8 @@ export default {
             const selectFeature = feature.getProperties().features[0];
             console.log(selectFeature, "点位");
             // 获取点位数据
+            this.screenImage = selectFeature.get("data");
+            this.showImageDialog = true;
             console.log(selectFeature.get("data"));
           } else {
             // 聚合点
@@ -894,6 +969,48 @@ export default {
     goIndex() {
       this.$router.push("/index");
     },
+
+    /* 图片位置信息获取 */
+    updateScreenRects() {
+      this.screenRects = [];
+      const image = this.$refs.mainImage;
+      const rects = this.screenImage?.rect?.split(",").map(Number) || [];
+      this.screenRects = [
+        {
+          left: rects[0],
+          top: rects[1],
+          width: rects[2],
+          height: rects[3],
+        },
+      ];
+    },
+
+    /* 图片红框位置 */
+    getScreenRectStyle({ 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",
+      };
+    },
   },
   beforeDestroy() {
     clearInterval(this.timeFlag);
@@ -1080,6 +1197,57 @@ export default {
       }
     }
 
+    // 切换线路段
+    .road-checkBox-twe {
+      position: absolute;
+      left: 31.5%;
+      top: 10%;
+      padding: 0.4rem;
+      border-radius: 0.4rem;
+      z-index: 1;
+
+      ::v-deep .el-select {
+        width: 15rem;
+
+        .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%;
@@ -1339,5 +1507,28 @@ export default {
 
 ::v-deep .el-dialog__body {
   background-color: #113463;
+
+  /* 查看点位大图弹窗 */
+  .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;
+  }
 }
 </style>

src/views/index-components/daily-index.vue

@@ -216,13 +216,13 @@ export default {
             {
               type: "bar",
               barWidth: 10,
-              name: "架梁完成量",
+              name: "累计病害",
               data: [400, 600, 1400, 1700],
             },
             {
               type: "line",
               symbolSize: 5,
-              name: "墩身完成率",
+              name: "巡查里程",
               smooth: 1,
               data: [10, 40, 50, 90],
               yAxisIndex: 1,
@@ -237,30 +237,24 @@ export default {
     /* 绘制病害分布柱状图 */
     drawDistributionChart() {
       const xData = [
-        { name: "1月", value: 10 },
+        { name: "G1", value: 10 },
-        { name: "2月", value: 12 },
+        { name: "G11", value: 12 },
-        { name: "3月", value: 10 },
+        { name: "G25", value: 10 },
-        { name: "4月", value: 30 },
+        { name: "G91", value: 30 },
-        { name: "5月", value: 20 },
+        { name: "G1113", value: 20 },
-        { name: "6月", value: 50 },
+        { name: "S2", value: 50 },
-        { name: "7月", value: 30 },
+        { name: "S20", value: 30 },
-        { name: "8月", value: 40 },
-        { name: "9月", value: 40 },
-        { name: "10月", value: 15 },
       ].map((item) => {
         return item.name;
       });
       const yData = [
-        { name: "1月", value: 10 },
+        { name: "G1", value: 10 },
-        { name: "2月", value: 12 },
+        { name: "G11", value: 12 },
-        { name: "3月", value: 10 },
+        { name: "G25", value: 10 },
-        { name: "4月", value: 30 },
+        { name: "G91", value: 30 },
-        { name: "5月", value: 20 },
+        { name: "G1113", value: 20 },
-        { name: "6月", value: 50 },
+        { name: "S2", value: 50 },
-        { name: "7月", value: 30 },
+        { name: "S20", value: 30 },
-        { name: "8月", value: 40 },
-        { name: "9月", value: 40 },
-        { name: "10月", value: 15 },
       ].map((item, index) => {
         if (index % 2 == 0) {
           return {

src/views/index-components/disease-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:17:58
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-05 11:51:10
+ * @LastEditTime: 2024-11-07 11:35:42
  * @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue
  * @Description: 首页-病害识别
 -->
@@ -24,20 +24,6 @@
       <div class="right">
         <div ref="statisticsChart"></div>
         <div>
-          <el-select
-            v-model="diseaseType"
-            @change="getChartData"
-            placeholder="请选择"
-            size="mini"
-          >
-            <el-option
-              v-for="item in diseaseOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
           <div class="distribution-div" ref="distributionChart"></div>
           <div class="distribution-legnd">
             <fssm-scroll>
@@ -95,81 +81,40 @@ export default {
     };
   },
   created() {
-    this.getOptions();
     this.getChartData();
   },
   methods: {
-    /* 获取病害类别下拉 */
-    getOptions() {
-      this.diseaseOptions = [
-        {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
-        },
-      ];
-    },
     /* 获取echart图数据 */
     getChartData() {
       this.distributionList = [
         {
           value: 15461,
-          name: "一类",
+          name: "纵向裂缝",
           rate: "10%",
         },
         {
           value: 1,
-          name: "二类",
+          name: "块状裂缝",
           rate: "10%",
         },
         {
           value: 6546,
-          name: "三类",
+          name: "龟裂",
           rate: "10%",
         },
         {
           value: 2718,
-          name: "四类",
+          name: "坑槽",
           rate: "10%",
         },
         {
           value: 1704,
-          name: "五类",
+          name: "车辙",
           rate: "10%",
         },
         {
           value: 1,
-          name: "二类",
+          name: "沉陷",
-          rate: "10%",
-        },
-        {
-          value: 6546,
-          name: "三类",
-          rate: "10%",
-        },
-        {
-          value: 2718,
-          name: "四类",
-          rate: "10%",
-        },
-        {
-          value: 1704,
-          name: "五类",
           rate: "10%",
         },
       ];

src/views/index-components/traffic-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:30:35
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-05 11:46:15
+ * @LastEditTime: 2024-11-07 11:29:32
  * @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue
  * @Description: 首页-路况评定
 -->
@@ -13,11 +13,11 @@
     <div class="traffic-table">
       <el-table :data="trafficTableData" style="width: 100%" height="180">
         <el-table-column type="index" label="序号"></el-table-column>
-        <el-table-column prop="date" label="日期" width="180">
+        <el-table-column prop="date" label="路线名称" >
         </el-table-column>
-        <el-table-column prop="name" label="姓名" width="180">
+        <el-table-column prop="name" label="PCI" > </el-table-column>
+        <el-table-column prop="pci" label="PCI等级" >
         </el-table-column>
-        <el-table-column prop="address" label="地址"> </el-table-column>
       </el-table>
     </div>
     <div class="traffic-chart" ref="trafficChart"></div>
@@ -42,64 +42,19 @@ export default {
     getTableData() {
       this.trafficTableData = [
         {
-          date: "2016-05-02",
+          date: "S225",
-          name: "王小虎",
+          name: "99.52",
-          address: "上海市普陀区金沙江路 1518 弄",
+          pci: "优",
         },
         {
-          date: "2016-05-04",
+          date: "G107",
-          name: "王小虎",
+          name: "98.6",
-          address: "上海市普陀区金沙江路 1517 弄",
+          pci: "优",
         },
         {
-          date: "2016-05-01",
+          date: "G105",
-          name: "王小虎",
+          name: "100",
-          address: "上海市普陀区金沙江路 1519 弄",
+          pci: "优",
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄",
-        },
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1517 弄",
-        },
-        {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1519 弄",
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄",
-        },
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1517 弄",
-        },
-        {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1519 弄",
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄",
         },
       ];
       this.$nextTick(() => {
@@ -121,7 +76,7 @@ export default {
           title: [
             // 中心比例
             {
-              text: "道路新增病害分布",
+              text: "路产趋势",
               x: "1%",
               y: "1%",
               textStyle: {
@@ -131,7 +86,7 @@ export default {
           ],
           legend: {
             show: true,
-            right:"3%"
+            right: "3%",
           },
           tooltip: {
             trigger: "axis",
@@ -145,7 +100,7 @@ export default {
           },
           xAxis: [
             {
-              data: ["1月", "二月", "3", "4", "5", "6", "7", "8", "9", "10"],
+              data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月"],
               type: "category",
               axisTick: {
                 show: false, //隐藏X轴刻度