fix：修改病害管理，地图展示2

src/router/index.js

@@ -74,7 +74,7 @@ export const constantRoutes = [
   {
     path: '',
     component: Layout,
-    redirect: 'screen',
+    redirect: 'index',
     children: [
       {
         path: 'index',

src/views/xj/inspection/diease-line/index.vue

@@ -2,60 +2,356 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2025-03-25 11:10:16
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-04-08 13:56:59
+ * @LastEditTime: 2025-05-09 09:21:07
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\diease-line\index.vue
  * @Description: 地图展示病害-首页
 -->
 <template>
   <div class="diease-line-content">
-    <fssm-map class="map-diease-map" :popupType="'dieaseLine'"></fssm-map>
+    <div class="diease-form">
+      <el-form :model="queryParams" :rules="rules" ref="queryForm" size="small" :inline="true" label-width="100px">
+        <el-form-item label="巡检任务" prop="segmentId">
+          <el-select v-model="queryParams.segmentId" placeholder="请选择巡检任务" filterable clearable>
+            <el-option v-for="item in segmentList" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="桩号">
+          <el-input v-model="queryParams.stakeStart" placeholder="起始公里桩" style="width: 10rem" clearable />
+          <span style="margin: 0 5px">-</span>
+          <el-input v-model="queryParams.stakeEnd" placeholder="终止公里桩" style="width: 10rem" clearable />
+          <el-tooltip class="item" effect="dark" content="格式为K0000+000" placement="top">
+            <i class="el-icon-info"></i>
+          </el-tooltip>
+        </el-form-item>
+        <el-form-item label="护栏高度">
+          <el-input-number v-model="queryParams.minHei" controls-position="right" placeholder="最小高度"
+            :min="0"></el-input-number>
+          <span style="margin: 0 5px">-</span>
+          <el-input-number v-model="queryParams.maxHei" controls-position="right" placeholder="最大高度"
+            :min="0"></el-input-number>
+        </el-form-item>
+        <el-form-item label="">
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">筛选</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="diease-container">
+      <div class="diease-left">
+        <!-- 列表 -->
+        <el-table ref="roadTable" v-loading="loading" :data="tableList" style="width: 100%">
+          <el-table-column label="路段名称" align="center" prop="segmentName">
+          </el-table-column>
+          <el-table-column label="类型" align="center" prop="defectTypeName" />
+          <el-table-column label="开始桩号" align="center" prop="stakeStart" />
+          <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
+          <el-table-column label="创建时间" align="center" prop="createdTimeLocal">
+            <template slot-scope="scope">
+              {{ scope.row.createdTimeLocal.replace("T", " ") }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-view" @click="showScreenImg(scope.row)">查看
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页组件 -->
+        <div class="pagination-part">
+          <el-pagination background :current-page.sync="pagination.page" @current-change="handleCurrentChange"
+            :page-sizes="[10, 20, 50, 100, 200, 500]" :page-size.sync="pagination.size" @size-change="handleSizeChange"
+            layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
+          </el-pagination>
+        </div>
+      </div>
+      <div class="diease-right">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>护拦板高度展示</span>
+          </div>
+          <div class="card-item" ref="cardChart">
+          </div>
+        </el-card>
+      </div>
+    </div>
+    <!-- 查看图片大图 -->
+    <el-dialog title="查看图片" :visible.sync="showImageDialog" width="85rem" append-to-body destroy-on-close
+      @close="imgCancel">
+      <div class="image-container" ref="imageContainer">
+        <img :src="currentImageItem.mediaUrl" alt="Main Image" ref="mainImage" @load="updateRects" />
+        <div v-for="(rect, index) in rects" :key="index" class="rect-overlay" :style="getRectStyle(rect)"></div>
+        <div class="rect-image">
+          采集时间:
+          {{ new Date(currentImageItem.createdTime).toLocaleString() }}
+          起始桩号： {{ currentImageItem.stakeStart || "暂无数据" }} 终止桩号：
+          {{ currentImageItem.stakeEnd || "暂无数据" }}
+          病害类型：
+          {{ currentImageItem.defectTypeName || "暂无数据" }}
+          病害面积：{{ currentImageItem.targetArea }}平方米 病害长度：{{
+            currentImageItem.targetLen * 1 <= 0 ? "暂无数据" : `${currentImageItem.targetLen}米` }} </div>
+        </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { getBarrierBoardList } from "@/api/xj/diseaseLine";
-import FssmMap from "@/components/map/fssm-map.vue";
+import * as echarts from "echarts";
 export default {
   name: "DieaseLine",
   components: {
-    FssmMap,
   },
   data() {
     return {
-      pointList: [],
+      // 搜索表单
-      lineList: [],
+      queryParams: {
+        // 道路名称
+        segmentId: "",
+        // 起始公里桩
+        stakeStart: "",
+        // 终止公里桩
+        stakeEnd: "",
+        // 最小高度
+        minHei: "",
+        // 最大高度
+        maxHei: "",
+      },
+      // 查询表单
+      searchForm: {},
+      // 巡检任务下拉
+      segmentList: [],
+      // 表单规则
+      rules: {
+        segmentId: [
+          { required: true, message: "请选择巡检任务", trigger: "change" },
+        ],
+      },
+      // 列表加载状态
+      loading: false,
+      // 列表数据
+      tableList: [],
+      // 分页-列表总数
+      tableTotal: 0,
+      // 分页-页数页码
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+
+      // 查看图片弹窗显隐控制
+      showImageDialog: false,
+      // 查看大图图片数据
+      currentImageItem: {},
+      // 图片病害位置信息
+      rects: [],
     };
   },
-  created() {
+  mounted() {
-    this.getMapPoint();
+    this.getTableList()
   },
   methods: {
     /**
-     * @description: 获取地图点位数据
+     * @description: 获取表格数据
      * @param {*}
      * @return {*}
      */
-    getMapPoint() {
+    getTableList() {
-      getBarrierBoardList({ page: 0, size: 100000 }).then(({ code, data }) => {
+
-        if (code === 200) {
+      this.drawChart()
-          console.log(data, "dfdfdf");
+    },
+
+    /**
+     * @description: 点击筛选事件
+     * @param {*}
+     * @return {*}
+     */
+    handleQuery() {
+
+    },
+
+    /**
+     * @description: 切换分页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleCurrentChange(arg) {
+      this.pagination.page = arg;
+      this.getTableList();
+    },
+
+    /**
+     * @description: 切换每条/页
+     * @param {*} arg
+     * @return {*}
+     */
+    handleSizeChange(arg) {
+      this.pagination.size = arg;
+      this.getTableList();
+    },
+
+    /**
+     * @description: 绘制echart图
+     * @param {*}
+     * @return {*}
+     */
+    drawChart() {
+      const chart = echarts.init(this.$refs.cardChart);
+      chart.setOption({
+
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(33,56,77,1)',
+          borderColor: 'rgba(33,56,77,1)',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14
+          },
+          axisPointer: {
+            lineStyle: {
+              color: 'rgba(19,255,241,1)',
+              type: 'dashed',
+              width: 2
             }
+          }
+        },
+        legend: {
+          right: 'center',
+          top: '5%',
+          itemWidth: 16,
+          itemHeight: 16,
+          itemGap: 25,
+          icon: 'stack',
+          textStyle: {
+            color: '#E1E5E6'
+          }
+        },
+        grid: {
+          top: '16%',
+          right: '4%',
+          bottom: '4%',
+          left: '6%',
+          containLabel: true
+        },
+        xAxis: {
+          data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
+          type: 'category',
+          boundaryGap: true,
+          axisLabel: {
+            textStyle: {
+              color: '#B5C5D4',
+              fontSize: 12
+            }
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false // 去除刻度线
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisTick: { show: false },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#B5C5D4',
+              fontSize: 12
+            }
+          },
+          // y轴分割线的颜色
+          splitLine: {
+            lineStyle: {
+              color: '#9EA6B4',
+              type: 'solid'
+            }
+          }
+        },
+        series: [
+
+          {
+            name: '护拦板高度',
+            smooth: true,
+            type: 'line',
+            // 填充颜色设置
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: 'rgba(26, 119, 221,.4)' // 渐变色的起始颜色
+                  },
+                  {
+                    offset: 0.9,
+                    color: 'rgba(26, 119, 221,0)' // 渐变线的结束颜色
+                  }
+                ],
+                false
+              ),
+              shadowColor: 'rgba(0, 0, 0, 0.1)'
+            },
+            // 开始不显示拐点， 鼠标经过显示
+            showSymbol: false,
+            symbolSize: 4,
+            // 设置拐点颜色以及边框
+            itemStyle: {
+              // color: "rgba(241,162,42,1)",
+              color: 'rgba(26, 119, 221, 1)'
+            },
+            data: [40, 58, 40, 44, 61, 58, 77, 60, 78, 53, 70, 53]
+          }
+        ]
+      })
+      window.addEventListener("resize", () => {
+        chart.resize();
       });
     },
 
     /**
-     * @description: 绘制地图点位
+     * @description: 打开查看图片弹窗
-     * @param {*}
+     * @param {*} item
      * @return {*}
      */
-    drawMapPoint() {},
+    showScreenImg(item) {
+      this.currentImageItem = item;
+      this.showImageDialog = true;
+    },
 
     /**
-     * @description: 绘制地图线段
+     * @description: 图片位置信息获取
-     * @param {*}
+     * @param {*} val
      * @return {*}
      */
-    drawMap() {},
+    updateRects() {
+      this.rects = [];
+      this.rectsItem = {};
+      const rects = this.currentImageItem?.rect?.split(",").map(Number) || [];
+      this.rects = [
+        {
+          left: rects[0],
+          top: rects[1],
+          width: rects[2],
+          height: rects[3],
+        },
+      ];
+    },
+
+    /**
+     * @description: 关闭查看图片弹窗
+     * @param {*} val
+     * @return {*}
+     */
+    imgCancel() {
+      this.showImageDialog = false;
+      this.currentImageItem = {};
+      this.rects = [];
+    },
   },
 };
 </script>
@@ -66,9 +362,42 @@ export default {
   height: calc(100vh - 5.3rem);
   padding: 0.5rem;
 
-  .map-diease-map {
+  .diease-form {
     width: 100%;
+    height: 6%;
+  }
+
+  .diease-container {
+    width: 100%;
+    height: 94%;
+    display: flex;
+
+    .diease-left,
+    .diease-right {
+      width: 50%;
       height: 100%;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      padding: 0 1rem;
+
+    }
+
+    .diease-right {
+
+      .card-item {
+        width: 100%;
+        height: 40rem;
+      }
+    }
   }
 }
+
+/* 分页样式 */
+.pagination-part {
+  width: 100%;
+  display: flex;
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
 </style>

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

@@ -2,7 +2,7 @@
  * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
  * @Date: 2024-10-08 10:58:25
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-05-06 10:08:17
+ * @LastEditTime: 2025-05-09 09:49:23
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management\index.vue
  * @Description: 巡检信息管理-病害管理
 -->
@@ -204,39 +204,14 @@
               </el-form-item>
             </el-col>
           </el-row>
-          <el-row :gutter="24">
-            <el-col :span="24" v-if="dialogTitle != '添加缺陷'">
-              <el-form-item label="校验状态" prop="dataStatus">
-                <el-select v-model="form.dataStatus" placeholder="请选择校验状态" clearable>
-                  <el-option v-for="item in states" :key="item.value" :label="item.label" :value="item.value" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <!-- <el-col :span="dialogTitle === '添加缺陷' ? 24 : 12">
-              <el-form-item label="病害状态" prop="state">
-                <el-select
-                  v-model="form.state"
-                  placeholder="请选择病害状态"
-                  clearable
-                >
-                  <el-option
-                    v-for="item in defectStatus"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col> -->
-          </el-row>
           <el-row :gutter="24">
             <el-col :span="12">
-              <el-form-item label="开始桩号" prop="stakeStart">
+              <el-form-item label="开始桩号">
                 <el-input v-model="form.stakeStart" placeholder="请输入开始桩号" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="结束桩号" prop="stakeEnd">
+              <el-form-item label="结束桩号">
                 <el-input v-model="form.stakeEnd" placeholder="请输入结束桩号" />
               </el-form-item>
             </el-col>
@@ -359,9 +334,7 @@
           起始桩号： {{ currentImageItem.stakeStart || "暂无数据" }} 终止桩号：
           {{ currentImageItem.stakeEnd || "暂无数据" }}
           病害类型：
-          {{ currentImageItem.defectTypeName || "暂无数据" }}
+          {{ currentImageItem.defectTypeName || "暂无数据" }}</div>
-          病害面积：{{ currentImageItem.targetArea }}平方米 病害长度：{{
-            currentImageItem.targetLen * 1 <= 0 ? "暂无数据" : `${currentImageItem.targetLen}米` }} </div>
       </div>
     </el-dialog>
   </div>
@@ -1182,8 +1155,6 @@ export default {
      */
     showScreenImg(item) {
       this.currentImageItem = item;
-      console.log(item, "ddddd");
-
       this.showImageDialog = true;
     },
 
@@ -1194,16 +1165,15 @@ export default {
      */
     updateRects() {
       this.rects = [];
-      this.rectsItem = {};
+      const rects = JSON.parse(this.currentImageItem?.rect)
-      const rects = this.currentImageItem?.rect?.split(",").map(Number) || [];
+      this.rects = rects.map((item) => {
-      this.rects = [
+        return {
-        {
+          left: item[0],
-          left: rects[0],
+          top: item[1],
-          top: rects[1],
+          width: item[2],
-          width: rects[2],
+          height: item[3],
-          height: rects[3],
+        }
-        },
+      })
-      ];
     },
 
     /**

src/views/xj/inspection/map-diease/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2025-03-25 11:10:16
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2025-04-15 17:13:01
+ * @LastEditTime: 2025-05-08 11:10:01
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\map-diease\index.vue
  * @Description: 地图展示筛选病害-首页
 -->
@@ -10,109 +10,49 @@
   <div class="map-diease-content">
     <div class="diease-left">
       <div class="diease-form">
-        <el-form
+        <el-form :model="queryParams" :rules="rules" ref="queryForm" size="small" :inline="true" label-width="100px">
-          :model="queryParams"
-          :rules="rules"
-          ref="queryForm"
-          size="small"
-          :inline="true"
-          label-width="100px"
-        >
           <el-form-item label="道路名称" prop="segmentId">
-            <el-select
+            <el-select v-model="queryParams.segmentId" placeholder="请选择路段" filterable clearable>
-              v-model="queryParams.segmentId"
+              <el-option v-for="item in segmentList" :key="item.value" :label="item.label" :value="item.value" />
-              placeholder="请选择路段"
-              filterable
-              clearable
-            >
-              <el-option
-                v-for="item in segmentList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
             </el-select>
           </el-form-item>
           <el-form-item label="">
-            <el-button
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">筛选</el-button>
-              type="primary"
-              icon="el-icon-search"
-              size="mini"
-              @click="handleQuery"
-              >筛选</el-button
-            >
           </el-form-item>
         </el-form>
       </div>
       <!-- 列表 -->
-      <el-table
+      <el-table ref="roadTable" v-loading="loading" :data="tableList" style="width: 100%" @row-dblclick="handleDbClick">
-        ref="roadTable"
-        v-loading="loading"
-        :data="tableList"
-        style="width: 100%"
-        @row-dblclick="handleDbClick"
-      >
         <el-table-column label="路段名称" align="center" prop="segmentName">
         </el-table-column>
         <el-table-column label="类型" align="center" prop="defectTypeName" />
         <el-table-column label="开始桩号" align="center" prop="stakeStart" />
         <el-table-column label="结束桩号" align="center" prop="stakeEnd" />
-        <el-table-column
+        <el-table-column label="创建时间" align="center" prop="createdTimeLocal">
-          label="创建时间"
-          align="center"
-          prop="createdTimeLocal"
-        >
           <template slot-scope="scope">
             {{ scope.row.createdTimeLocal.replace("T", " ") }}
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          label="操作"
-          align="center"
-          class-name="small-padding fixed-width"
-        >
           <template slot-scope="scope">
-            <el-button
+            <el-button size="mini" type="text" icon="el-icon-view" @click="viewMapPicture(scope.row)">查看
-              size="mini"
-              type="text"
-              icon="el-icon-view"
-              @click="viewMapPicture(scope.row)"
-              >查看
             </el-button>
           </template>
         </el-table-column>
       </el-table>
       <!-- 分页组件 -->
       <div class="pagination-part">
-        <el-pagination
+        <el-pagination background :current-page.sync="pagination.page" @current-change="handleCurrentChange"
-          background
+          :page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.size" @size-change="handleSizeChange"
-          :current-page.sync="pagination.page"
+          layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
-          @current-change="handleCurrentChange"
-          :page-sizes="[10, 20, 30, 40]"
-          :page-size.sync="pagination.size"
-          @size-change="handleSizeChange"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="tableTotal"
-        >
         </el-pagination>
       </div>
     </div>
-    <fssm-map
+    <fssm-map ref="mapDieaseMap" class="map-diease-map" :maxZoom="24"></fssm-map>
-      ref="mapDieaseMap"
-      class="map-diease-map"
-      :maxZoom="24"
-    ></fssm-map>
     <!-- @feature-select="featureSelect" -->
     <!-- 查看弹窗 -->
-    <el-dialog
+    <el-dialog title="查看" :visible.sync="viewVisible" width="80rem" append-to-body :close-on-click-modal="false"
-      title="查看"
+      destroy-on-close @close="viewCancel">
-      :visible.sync="viewVisible"
-      width="80rem"
-      append-to-body
-      :close-on-click-modal="false"
-      destroy-on-close
-      @close="viewCancel"
-    >
       <diease-view v-if="viewVisible" :dislogItem="dislogItem"></diease-view>
     </el-dialog>
   </div>
@@ -143,10 +83,6 @@ export default {
       rules: {
         maxLength: [
           { required: false, message: "请选择路段", trigger: "blur" },
-          {
-            pattern: /^\d+$/,
-            message: "请输入非负整数",
-          },
         ],
       },
       // 道路名称下拉数据
@@ -361,7 +297,7 @@ export default {
      * @description: 点击地图点位
      * @return {void}
      */
-    featureSelect(e) {},
+    featureSelect(e) { },
 
     /**
      * @description: 关闭查看图片弹窗

vue.config.js

@@ -40,7 +40,7 @@ module.exports = {
         // 内网
         // target: `http://10.60.5.83:8080`,
         // target: `http://192.168.1.188:8080`,
-        target: `http://localhost:8080`,
+        target: `http://localhost:8081`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''