408 lines
9.9 KiB
Vue
408 lines
9.9 KiB
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>
|