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

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2025-03-25 11:10:16
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2025-04-10 17:12:07
 * @FilePath: \znxjxt-ui\src\views\xj\inspection\map-diease\index.vue
 * @Description: 地图展示筛选病害-首页
-->
<template>
  <div class="map-diease-content">
    <div class="diease-left">
      <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-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >筛选</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表 -->
      <el-table
        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
          label="创建时间"
          align="center"
          prop="createdTimeLocal"
        >
        </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="viewMapPicture(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, 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
      ref="mapDieaseMap"
      class="map-diease-map"
      :maxZoom="24"
      @feature-select="featureSelect"
    ></fssm-map>
    <!-- 查看弹窗 -->
    <el-dialog
      title="查看"
      :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>
</template>

<script>
import { Feature } from "ol";
import { Point } from "ol/geom";
import { Style, Icon, Fill, Stroke, Circle, Text } from "ol/style";
import Cluster from "ol/source/Cluster";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import { getSegment, getDelineatorList } from "@/api/xj/mapDisease";
import fssmMap from "@/components/map/fssm-map.vue";
import DieaseView from "./components/diease-view.vue";
export default {
  components: { fssmMap, DieaseView },
  name: "MapDiease",
  data() {
    return {
      // 搜索表单
      queryParams: {
        // 道路名称
        segmentId: "",
      },
      // 查询表单
      searchForm: {},
      // 表单规则
      rules: {
        maxLength: [
          { required: false, message: "请选择路段", trigger: "blur" },
          {
            pattern: /^\d+$/,
            message: "请输入非负整数",
          },
        ],
      },
      // 道路名称下拉数据
      segmentList: [],
      // 表格加载状态
      loading: false,
      // 表格数据
      tableList: [],
      // 地图打点数据
      centerPiont: [],
      // 分页-列表总数
      tableTotal: 0,
      // 分页-页数页码
      pagination: {
        page: 1,
        size: 10,
      },
      // 查看弹窗显隐控制
      viewVisible: false,
      // 传查看弹窗数据
      dislogItem: [],
    };
  },
  created() {
    this.getSegmentList();
    this.getTableList();
  },
  methods: {
    /**
     * @description: 获取路段下拉数据
     * @param {*} val
     * @return {*}
     */
    getSegmentList() {
      getSegment().then(({ code, data }) => {
        if (code === 200) {
          this.segmentList = data;
        }
      });
    },

    /**
     * @description: 获取表格数据
     * @param {*}
     * @return {*}
     */
    getTableList() {
      getDelineatorList({ ...this.searchForm, ...this.pagination }).then(
        ({ code, rows, total }) => {
          if (code === 200) {
            this.tableList = rows;
            this.tableTotal = total;
          }
        }
      );
    },

    /**
     * @description: 筛选事件
     * @param {*}
     * @return {*}
     */
    handleQuery() {
      this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
      this.pagination.page = 1;
      this.getTableList();
    },

    /**
     * @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: 点击选中行
     * @param {*} e
     * @return {*}
     */
    handleDbClick(e) {
      if (this.clusters) {
        const map = this.$refs.mapDieaseMap.instance.get("map");
        map.removeLayer(this.clusters);
        this.clusters = null;
      }
      this.centerPiont = [];
      this.centerPiont = [
        ...e.defectLocation.map((item) => {
          return {
            geometry: item,
            flag: "nomal",
          };
        }),
        ...e.endCoordinates?.map((item) => {
          return {
            geometry: item,
            flag: "green",
          };
        }),
        ...e.startCoordinates?.map((item) => {
          return {
            geometry: item,
            flag: "green",
          };
        }),
      ].filter((item) => {
        return item.geometry;
      });
      this.fitMapToPoints(e.defectLocation);
      this.drawPoint();
    },

    /**
     * @description: 点击查看绘制点位
     * @param {*}
     * @return {*}
     */
    viewMapPicture(item) {
      this.viewVisible = true;
      this.dislogItem = item.media;
    },

    /**
     * @description: 根据点位计算地图中心点
     * @return {void}
     */
    fitMapToPoints(points) {
      if (points.length > 0) {
        // 创建一个空的 extent
        let extent = [Infinity, Infinity, -Infinity, -Infinity];
        // 计算所有点的边界框（extent）
        points.forEach((point) => {
          extent = [
            Math.min(extent[0], point[0]),
            Math.min(extent[1], point[1]),
            Math.max(extent[2], point[0]),
            Math.max(extent[3], point[1]),
          ];
        });

        // 获取地图实例
        const map = this.$refs.mapDieaseMap.instance.get("map");

        // 使用 fit 方法根据边界框计算最佳缩放级别
        map.getView().fit(extent, {
          duration: 500, // 动画持续时间
          padding: [100, 100, 100, 100], // 边缘填充
        });
      }
    },

    /**
     * @description: 绘制地图点位
     * @return {void}
     */
    drawPoint() {
      const features = [];
      this.centerPiont.forEach((element) => {
        // 修改坐标样式
        const point = new Point(element.geometry);
        const feature = new Feature({
          geometry: point,
          data: element.flag,
          // 自己设置一个标识
          type: "icon",
        });
        feature.setStyle([
          new Style({
            image: new Icon({
              crossOrigin: "anonymous",
              src: require(`@/assets/index/${element.flag}.png`),
              // size: [40, 40],
              scale: 0.5, // 图标缩放比例
            }),
          }),
        ]);
        features.push(feature);
      });
      this.clusters = new VectorLayer({
        source: new VectorSource({
          features,
        }),
        properties: {
          type: "point",
        },
      });
      this.$nextTick(() => {
        const map = this.$refs.mapDieaseMap.instance.get("map");
        map.addLayer(this.clusters);
      });
    },

    /**
     * @description: 点击地图点位
     * @return {void}
     */
    featureSelect(e) {},

    /**
     * @description: 关闭查看图片弹窗
     * @return {void}
     */
    viewCancel() {
      this.viewVisible = false;
      this.dislogItem = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.map-diease-content {
  width: 100%;
  height: calc(100vh - 5.3rem);
  padding: 0.5rem;
  box-sizing: border-box;
  display: flex;

  .diease-left {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 1rem;

    .diease-form {
      width: 100%;
      height: 6%;
    }
  }

  .map-diease-map {
    width: 50%;
    height: 100%;
  }
}

/* 分页样式 */
.pagination-part {
  width: 100%;
  display: flex;
  padding-top: 1rem;
  justify-content: flex-end;
}
</style>