1099 lines
34 KiB
Vue
1099 lines
34 KiB
Vue
<!--
|
||
* @Author: SunTao 328867980@qq.com
|
||
* @Date: 2025-02-24 14:18:41
|
||
* @LastEditors: SunTao 328867980@qq.com
|
||
* @LastEditTime: 2025-02-24 15:53:57
|
||
* @FilePath: \znxjxt-ui\src\views\xj\document\view-notification\components\view-dialog.vue
|
||
* @Description: 查看通知单-查看详情
|
||
-->
|
||
<template>
|
||
<div class="edit-dialog">
|
||
<el-form class="editForm" ref="editForm" :model="editForm" :rules="rules" label-width="7rem">
|
||
<el-row :gutter="24">
|
||
<el-col :span="6">
|
||
<el-form-item label="路段类型:" prop="diseRoadPosiType">
|
||
<el-select v-model="editForm.diseRoadPosiType" placeholder="请选择路段类型" disabled clearable>
|
||
<el-option v-for="item in segmentTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="病害成因:" prop="diseCauses">
|
||
<el-select v-model="editForm.diseCauses" placeholder="请选择病害成因" disabled clearable>
|
||
<el-option v-for="item in causesList" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- <el-col :span="6">
|
||
<el-form-item label="病害来源:" prop="diseFrom">
|
||
<el-select v-model="editForm.diseFrom" placeholder="请选择病害来源" clearable>
|
||
<el-option v-for="item in value4List" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col> -->
|
||
<el-col :span="6">
|
||
<el-form-item label="所在路段:" prop="diseRoadPart">
|
||
<el-select v-model="editForm.diseRoadPart" placeholder="请选择所在路段" filterable remote clearable reserve-keyword
|
||
:filter-method="handleDiseRoadPart" @change="changeDiseRoadPart" disabled>
|
||
<el-option v-for="(item, index) in roadPartList" :key="`diseRoadPart-name-${index}`" :label="item.label"
|
||
:value="item.value"></el-option> </el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="病害类型:" prop="diseFirstType">
|
||
<el-select v-model="editForm.diseFirstType" placeholder="请选择病害类型" clearable @change="changeDetailed"
|
||
disabled>
|
||
<el-option v-for="item in diseFirstType" :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="6">
|
||
<el-form-item label="病害二级类型:" prop="diseTypeDetailed">
|
||
<el-select v-model="editForm.diseTypeDetailed" placeholder="请选择病害二级类型" filterable clearable disabled>
|
||
<el-option v-for="item in diseTypeDetailedList" :key="item.value" :label="item.label"
|
||
:value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="工区:" prop="matTaskAreaId">
|
||
<el-select v-model="editForm.matTaskAreaId" placeholder="请选择工区" filterable remote clearable reserve-keyword
|
||
:filter-method="handleMatTaskArea" @change="changeMatTaskArea" disabled>
|
||
<el-option v-for="(item, index) in taskAreaList" :key="`taskAreaList-name-${index}`" :label="item.label"
|
||
:value="item.value"></el-option> </el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="工作站:" prop="matTWorkStationId">
|
||
<el-select v-model="editForm.matTWorkStationId" placeholder="请选择工作站" filterable remote clearable
|
||
reserve-keyword :filter-method="handleMatWorkStation" @change="changeMatWorkStation" disabled>
|
||
<el-option v-for="(item, index) in matWorkStationList" :key="`WorkStationId-name-${index}`"
|
||
:label="item.label" :value="item.value"></el-option> </el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="车道:" prop="diseRoadLine">
|
||
<el-input v-model="editForm.diseRoadLine" placeholder="请填写车道" clearable disabled>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="6">
|
||
<el-form-item label="桥梁:" prop="connBridge" v-if="editForm.diseRoadPosiType !== '1'">
|
||
<el-select v-model="editForm.connBridge" placeholder="请选择桥梁" filterable remote clearable reserve-keyword
|
||
:filter-method="handleConnBridge" @change="changeConnBridge" disabled>
|
||
<el-option v-for="(item, index) in connBridgeList" :key="`connBridge-name-${index}`" :label="item.label"
|
||
:value="item.value"></el-option> </el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="隧道:" prop="connTunnel" v-if="editForm.diseRoadPosiType !== '1'">
|
||
<el-select v-model="editForm.connTunnel" placeholder="请选择隧道" filterable remote clearable reserve-keyword
|
||
:filter-method="handleConnTunnel" @change="changeConnTunnel" disabled>
|
||
<el-option v-for="(item, index) in connTunnelList" :key="`connTunnel-name-${index}`" :label="item.label"
|
||
:value="item.value"></el-option> </el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="收费站:" prop="stationCode" v-if="editForm.diseRoadPosiType === '1'">
|
||
<el-select v-model="editForm.stationCode" placeholder="请选择收费站" filterable remote clearable reserve-keyword
|
||
:filter-method="handleStationCode" @change="changeStationCode" disabled>
|
||
<el-option v-for="(item, index) in stationCodeList" :key="`stationCode-name-${index}`" :label="item.label"
|
||
:value="item.value"></el-option> </el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="收费站位置:" prop="stationLocation" v-if="editForm.diseRoadPosiType === '1'">
|
||
<el-select v-model="editForm.stationLocation" placeholder="请选择收费站位置" clearable disabled>
|
||
<el-option v-for="item in stationLocationList" :key="item.value" :label="item.label"
|
||
:value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="方向:" prop="diseRoadDirec">
|
||
<el-select v-model="editForm.diseRoadDirec" placeholder="请选择方向" clearable disabled>
|
||
<el-option v-for="item in roadDirectionList" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="开始桩号:" prop="diseStartStake">
|
||
<el-input v-model="editForm.diseStartStake" placeholder="K0000+000" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="6">
|
||
<el-form-item label="结束桩号:" prop="diseEndStake">
|
||
<el-input v-model="editForm.diseEndStake" placeholder="K0000+000" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="匝道类型:" prop="rampType">
|
||
<el-select v-model="editForm.rampType" placeholder="请选择匝道类型" clearable disabled>
|
||
<el-option v-for="item in rampTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="匝道立交:" prop="rampInterchangeCode">
|
||
<el-select v-model="editForm.rampInterchangeCode" placeholder="请选择匝道立交" filterable remote clearable
|
||
reserve-keyword :filter-method="handleRampIntOrientation" @change="changeRampIntOrientation" disabled>
|
||
<el-option v-for="(item, index) in rampIntOrientationList" :key="`rampInterchangeCode-name-${index}`"
|
||
:label="item.label" :value="item.value"></el-option> </el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="匝道立交方向:" prop="rampIntOrientation">
|
||
<el-select v-model="editForm.rampIntOrientation" placeholder="请选择匝道立交方向" clearable disabled>
|
||
<el-option v-for="item in rampInterchangeCodeList" :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="24"><el-form-item label="详细说明:" prop="diseElaDecs">
|
||
<el-input v-model="editForm.diseElaDecs" type="textarea" :rows="3" placeholder="请输入内容" resize="none"
|
||
disabled>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<el-card shadow="never">
|
||
<div slot="header" class="clearfix">
|
||
<span style="font-size: 1.2rem">病害列表</span>
|
||
<!-- <el-button style="float: right; padding: 3px 0" type="text" @click="viewSelected">选择病害</el-button> -->
|
||
<el-button style="float: right; padding: 3px 1rem" type="text" v-if="mapTip"
|
||
@click="viewMapSelected(false)">地图查看</el-button>
|
||
<el-button style="float: right; padding: 3px 1rem" type="text" v-if="!mapTip"
|
||
@click="viewMapSelected(true)">列表查看</el-button>
|
||
</div>
|
||
<div style="height: 33rem;">
|
||
<!-- 列表 -->
|
||
<el-table v-if="mapTip" ref="roadTable" :data="checkedDiseaseList" :row-key="getRowKey" height="33rem"
|
||
style="width: 100%">
|
||
<el-table-column type="selection" :reserve-selection="true" width="55" align="center" />
|
||
<el-table-column label="路段名称" align="center" prop="segmentName" />
|
||
<el-table-column label="采集时间" align="center" prop="createdTimeLocal">
|
||
</el-table-column>
|
||
<el-table-column label="病害类型" align="center" prop="defectTypeName">
|
||
</el-table-column>
|
||
<!-- <el-table-column label="病害状态" align="center" prop="state">
|
||
<template slot-scope="scope">
|
||
<span>{{ filterState(scope.row.state) }}</span>
|
||
</template>
|
||
</el-table-column> -->
|
||
<el-table-column label="开始桩号" align="center" prop="stakeStart" />
|
||
<el-table-column label="结束桩号" align="center" prop="stakeEnd" />
|
||
<el-table-column label="病害图片" align="center" prop="media">
|
||
<template slot-scope="scope">
|
||
<img @click="showScreenImg(scope.row)" height="50" :src="scope.row.mediaUrl" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="病害长度" align="center" prop="targetLen">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}米` }} </template>
|
||
</el-table-column>
|
||
<el-table-column label="病害面积" align="center" prop="targetArea" />
|
||
<el-table-column label="道路方向" align="center" prop="inspectDirection">
|
||
<template slot-scope="scope">
|
||
<span>{{
|
||
scope.row.inspectDirection === "0" ? "上行" : "下行"
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 地图 -->
|
||
<fssm-map ref="diseaseMap" v-if="!mapTip" @map-zoom="getZoom" @feature-select="featureSelect"></fssm-map>
|
||
</div>
|
||
</el-card>
|
||
<!-- <div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</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 {
|
||
addMaintenanceNotice,
|
||
getDiseRoadPartDropDown,
|
||
getDiseTypeDetailed,
|
||
getTaskareaDropDown,
|
||
getWorkstationDropDown,
|
||
getBridgeDropDown,
|
||
getTunnelDropDown,
|
||
getStationDropDown,
|
||
getCrossDropDown,
|
||
getRampDropDown,
|
||
} from "@/api/xj/document";
|
||
import { getnoticeDetail } from "@/api/xj/document-view"
|
||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||
import FssmMap from '@/components/map/fssm-map.vue';
|
||
import { Feature } from "ol";
|
||
import { Point } from "ol/geom";
|
||
import { Style, Icon, Fill, Text } from "ol/style";
|
||
import VectorSource from "ol/source/Vector";
|
||
import VectorLayer from "ol/layer/Vector";
|
||
import Cluster from "ol/source/Cluster";
|
||
export default {
|
||
name: "ViewDialog",
|
||
components: { FssmScroll, FssmMap },
|
||
props: {
|
||
dialogItem: {
|
||
type: Object,
|
||
default: () => { },
|
||
},
|
||
// 病害成因下拉数据
|
||
causesList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
// 病害类型下拉数据
|
||
diseFirstType: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
// 路段类型下拉数据
|
||
segmentTypeList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
// 匝道类型下拉数据
|
||
rampTypeList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
// 道路方向下拉数据
|
||
roadDirectionList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
// 收费站位置下拉数据
|
||
stationLocationList: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
// 编辑表单
|
||
editForm: {
|
||
// 病害成因
|
||
diseCauses: "",
|
||
// 路段类型
|
||
diseRoadPosiType: "",
|
||
// 病害类型
|
||
diseFirstType: "",
|
||
// 病害二级id
|
||
diseTypeDetailed: "",
|
||
// 工区id
|
||
matTaskAreaId: "",
|
||
// 病害来源
|
||
diseFrom: "7",
|
||
// 工作站id
|
||
matTWorkStationId: "",
|
||
// 方向
|
||
diseRoadDirec: "",
|
||
// 车道
|
||
diseRoadLine: "",
|
||
// 桥梁
|
||
connBridge: "",
|
||
// 隧道
|
||
connTunnel: "",
|
||
// 收费站
|
||
stationCode: "",
|
||
// 收费站位置
|
||
stationLocation: "",
|
||
// 匝道类型
|
||
rampType: "",
|
||
// 匝道立交
|
||
rampInterchangeCode: "",
|
||
// 匝道立交方向
|
||
rampIntOrientation: "",
|
||
// 病害id
|
||
defectId: "",
|
||
// 道路名称
|
||
segmentId: "",
|
||
// 开始桩号
|
||
diseStartStake: "",
|
||
// 结束桩号
|
||
diseEndStake: "",
|
||
// 所在路段
|
||
diseRoadPart: "",
|
||
// 详细描述
|
||
diseElaDecs: ""
|
||
},
|
||
// 病害类型二级下拉数据
|
||
diseTypeDetailedList: [],
|
||
// 工区下拉数据
|
||
taskAreaList: [],
|
||
// 病害来源下拉数据
|
||
value4List: [],
|
||
// 工作站下拉数据
|
||
matWorkStationList: [],
|
||
// 车道下拉
|
||
value7List: [],
|
||
// 桥梁下拉
|
||
connBridgeList: [],
|
||
// 隧道下拉
|
||
connTunnelList: [],
|
||
// 收费站下拉
|
||
stationCodeList: [],
|
||
// 匝道立交方向下拉
|
||
rampInterchangeCodeList: [],
|
||
// 匝道立交下拉
|
||
rampIntOrientationList: [],
|
||
// 所在路段下拉
|
||
roadPartList: [],
|
||
// 表格是否显示控制
|
||
mapTip: true,
|
||
// 已选病害列表
|
||
checkedDiseaseList: [],
|
||
// 点位图层
|
||
clusters: null,
|
||
// 地图图层层级
|
||
mapZoom: "",
|
||
|
||
// 查看图片大图弹窗显隐控制
|
||
showImageDialog: false,
|
||
// 查看大图片路径
|
||
currentImageItem: {},
|
||
// 图片病害位置信息
|
||
rects: [],
|
||
|
||
// 选择病害弹窗显隐控制
|
||
diseaseVisible: false,
|
||
};
|
||
},
|
||
computed: {
|
||
rules() {
|
||
return {
|
||
diseCauses: [
|
||
{
|
||
required: true,
|
||
message: "请选择病害成因",
|
||
trigger: "change",
|
||
},
|
||
],
|
||
diseRoadPosiType: [
|
||
{ required: true, message: "请选择路段类型", trigger: "change" },
|
||
],
|
||
diseTypeDetailed: [{ required: true, message: "请选择病害二级类型", trigger: "change" }],
|
||
matTaskAreaId: [{ required: true, message: "请选择工区", trigger: "change" }],
|
||
diseFirstType: [
|
||
{ required: true, message: "请选择病害类型", trigger: "change" },
|
||
],
|
||
matTWorkStationId: [
|
||
{ required: true, message: "请选择工作站", trigger: "change" },
|
||
],
|
||
diseRoadDirec: [{ required: true, message: "请选择方向", trigger: "change" }],
|
||
diseRoadLine: [{ required: true, message: "请选择车道", trigger: "blur" }],
|
||
stationCode: [
|
||
{ required: true, message: "请选择收费站", trigger: "change" },
|
||
],
|
||
stationLocation: [
|
||
{ required: true, message: "请选择收费站位置", trigger: "change" },
|
||
],
|
||
rampType: [{ required: true, message: "请选择匝道", trigger: "change" }],
|
||
rampInterchangeCode: [
|
||
{ required: true, message: "请选择匝道立交", trigger: "change" },
|
||
],
|
||
rampIntOrientation: [
|
||
{ required: true, message: "请选择匝道立交方向", trigger: "change" },
|
||
],
|
||
segmentId: [
|
||
{ required: true, message: "请选择路段", trigger: "change" },
|
||
],
|
||
diseStartStake: [
|
||
{
|
||
required: this.isStakeStartRequired,
|
||
message: "请输入开始桩号",
|
||
trigger: "blur",
|
||
},
|
||
{
|
||
pattern: /^K\d{4}\+\d{3}$/,
|
||
message: "请输入正确的桩号格式",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
diseEndStake: [
|
||
{
|
||
required: this.isStakeStartRequired,
|
||
message: "请输入结束桩号",
|
||
trigger: "blur",
|
||
},
|
||
{
|
||
pattern: /^K\d{4}\+\d{3}$/,
|
||
message: "请输入正确的桩号格式",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
diseRoadPart: [
|
||
{ required: true, message: "请选择所在路段", trigger: "change" },
|
||
],
|
||
}
|
||
},
|
||
isStakeStartRequired() {
|
||
return this.editForm.diseRoadPosiType !== '2'
|
||
}
|
||
},
|
||
watch: {
|
||
dialogItem: {
|
||
handler(val) {
|
||
this.editForm = JSON.parse(JSON.stringify(val))
|
||
getnoticeDetail({ id: val.id }).then(({ data, code, }) => {
|
||
if (code === 200) {
|
||
this.checkedDiseaseList = data
|
||
}
|
||
})
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
},
|
||
mounted() {
|
||
this.handleDiseRoadPart()
|
||
this.handleMatTaskArea()
|
||
this.handleMatWorkStation()
|
||
this.handleConnBridge()
|
||
this.handleConnTunnel()
|
||
this.handleStationCode()
|
||
this.handleRampIntOrientation()
|
||
},
|
||
methods: {
|
||
/**
|
||
* @description: 获取所在路段下拉数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
handleDiseRoadPart(str) {
|
||
getDiseRoadPartDropDown({ name: str }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.roadPartList = data
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @description: 修改所在路段事件
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
changeDiseRoadPart(value) {
|
||
if (!value) {
|
||
this.handleDiseRoadPart()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @description: 获取工区下拉数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
handleMatTaskArea(str) {
|
||
getTaskareaDropDown({ name: str }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.taskAreaList = data
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
/**
|
||
* @description: 修改工区事件
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
changeMatTaskArea(value) {
|
||
if (!value) {
|
||
this.handleMatTaskArea()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @description: 获取工作站下拉数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
handleMatWorkStation(str) {
|
||
getWorkstationDropDown({ name: str }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.matWorkStationList = data
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @description: 工作站修改事件
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
changeMatWorkStation(value) {
|
||
if (!value) {
|
||
this.handleMatWorkStation()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @description: 获取桥梁下拉数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
handleConnBridge(str) {
|
||
getBridgeDropDown({ name: str }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.connBridgeList = data
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @description: 桥梁修改事件
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
changeConnBridge(value) {
|
||
if (!value) {
|
||
this.handleConnBridge()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @description: 获取隧道下拉数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
handleConnTunnel(str) {
|
||
getTunnelDropDown({ name: str }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.connTunnelList = data
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @description: 隧道修改事件
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
changeConnTunnel(value) {
|
||
if (!value) {
|
||
this.handleConnTunnel()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @description: 获取收费站下拉数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
handleStationCode(str) {
|
||
getStationDropDown({ name: str }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.stationCodeList = data
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @description: 收费站修改事件
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
changeStationCode(value) {
|
||
if (!value) {
|
||
this.handleStationCode()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @description: 获取互通立交下拉数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
handleRampIntOrientation(str) {
|
||
getCrossDropDown({ name: str }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.rampIntOrientationList = data
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @description: 互通立交修改事件
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
changeRampIntOrientation(value) {
|
||
if (!value) {
|
||
this.handleRampIntOrientation()
|
||
}
|
||
this.editForm.rampIntOrientation = ""
|
||
this.handleRampInterchangeCode()
|
||
},
|
||
|
||
/**
|
||
* @description: 获取匝道下拉数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
handleRampInterchangeCode() {
|
||
getRampDropDown({ crossid: this.editForm.rampInterchangeCode }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.rampInterchangeCodeList = data
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @description: 病害类型一级修改事件
|
||
* @param {*} row
|
||
* @return {*}
|
||
*/
|
||
changeDetailed(value) {
|
||
this.editForm.diseTypeDetailed = "";
|
||
const [child] = this.diseFirstType.filter(item => item.value === value)
|
||
getDiseTypeDetailed({ parentId: child.key }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.diseTypeDetailedList = data;
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @description: 列表行绑定id
|
||
* @param {*} row
|
||
* @return {*}
|
||
*/
|
||
getRowKey(row) {
|
||
return row.snapshotId;
|
||
},
|
||
|
||
/**
|
||
* @description: 列表行删除事件
|
||
* @param {*} row
|
||
* @return {*}
|
||
*/
|
||
handleDelete(index) {
|
||
this.checkedDiseaseList.splice(index, 1);
|
||
},
|
||
|
||
/**
|
||
* @description: 取消
|
||
*/
|
||
cancel() {
|
||
this.$emit("cancel");
|
||
},
|
||
|
||
/**
|
||
* @description: 提交表单
|
||
*/
|
||
submitForm() {
|
||
this.$refs.editForm.validate((valid) => {
|
||
if (valid) {
|
||
const defectId = this.checkedDiseaseList?.map(item => item.id)
|
||
addMaintenanceNotice({ ...this.editForm, defectId }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.$message.success("生成成功");
|
||
this.$emit("cancel");
|
||
} else {
|
||
this.$message.error(data);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* @description: 查看地图的已选中数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
viewMapSelected(tip) {
|
||
this.mapTip = tip
|
||
// 地图打点
|
||
if (!tip && this.checkedDiseaseList.length > 0) {
|
||
// 修改地图中心点位
|
||
const pointArray = this.checkedDiseaseList.map((item) => {
|
||
if (item.coordinates) {
|
||
return item.coordinates;
|
||
}
|
||
return [];
|
||
});
|
||
this.$nextTick(() => {
|
||
this.fitMapToPoints(pointArray);
|
||
this.drawPoint();
|
||
})
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @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.diseaseMap.instance.get("map");
|
||
|
||
// 使用 fit 方法根据边界框计算最佳缩放级别
|
||
map.getView().fit(extent, {
|
||
duration: 500, // 动画持续时间
|
||
padding: [10, 10, 10, 10], // 边缘填充
|
||
});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @description: 传回来的地图图层
|
||
* @param {number} zoom
|
||
* @return {void}
|
||
*/
|
||
getZoom(zoom) {
|
||
this.mapZoom = zoom;
|
||
if (this.clusters && zoom * 1 > 15) {
|
||
this.clusters.getSource().setDistance(0);
|
||
} else if (this.clusters && zoom * 1 <= 15) {
|
||
this.clusters.getSource().setDistance(100);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @description: 绘制地图点位
|
||
* @return {void}
|
||
*/
|
||
drawPoint() {
|
||
const features = [];
|
||
this.checkedDiseaseList.forEach((element) => {
|
||
// 修改坐标样式
|
||
const point = new Point(element.coordinates);
|
||
const feature = new Feature({
|
||
geometry: point,
|
||
data: element,
|
||
// 自己设置一个标识
|
||
type: "icon",
|
||
});
|
||
features.push(feature);
|
||
});
|
||
const clusterSource = new Cluster({
|
||
distance: this.mapZoom > 15 ? 0 : 100,
|
||
minDistance: this.mapZoom > 15 ? 0 : 100,
|
||
source: new VectorSource({
|
||
features,
|
||
}),
|
||
type: "Cluster",
|
||
});
|
||
this.clusters = new VectorLayer({
|
||
source: clusterSource,
|
||
name: "clusterLayer",
|
||
zIndex: 1,
|
||
style: (feature) => {
|
||
const count = feature.get("features").length;
|
||
if (count > 1) {
|
||
return new Style({
|
||
image: new Icon({
|
||
crossOrigin: "anonymous",
|
||
src: require(`@/assets/screen/index/龟裂.png`),
|
||
// 图标缩放比例
|
||
scale: 0.5,
|
||
displacement: [0, 30],
|
||
// 0.3为30度
|
||
// rotation: 0.3,
|
||
}),
|
||
text: new Text({
|
||
textAlign: "center", //位置
|
||
textBaseline: "middle",
|
||
font: "normal 14px 微软雅黑",
|
||
offsetY: -40,
|
||
fill: new Fill({
|
||
color: "black",
|
||
}),
|
||
text: count.toString(),
|
||
}),
|
||
});
|
||
} else {
|
||
return new Style({
|
||
image: new Icon({
|
||
crossOrigin: "anonymous",
|
||
src: require(`@/assets/screen/index/${feature.getProperties().features[0].get("data").defectTypeName
|
||
|| "龟裂"
|
||
}.png`),
|
||
// 图标缩放比例
|
||
scale: 0.5,
|
||
displacement: [0, 30],
|
||
// 0.3为30度
|
||
// rotation: 0.3,
|
||
}),
|
||
text: new Text({
|
||
textAlign: "center", //位置
|
||
textBaseline: "middle",
|
||
font: "normal 14px 微软雅黑",
|
||
offsetY: -40,
|
||
fill: new Fill({
|
||
color: "#ffffff",
|
||
}),
|
||
text: "",
|
||
}),
|
||
});
|
||
}
|
||
},
|
||
});
|
||
this.$nextTick(() => {
|
||
const map = this.$refs.diseaseMap.instance.get("map");
|
||
map.addLayer(this.clusters);
|
||
});
|
||
},
|
||
|
||
/**
|
||
* @description: 点击地图图标事件
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
featureSelect(e) {
|
||
const map = this.$refs.diseaseMap.instance.get("map");
|
||
const selectedFeatures = e.selected;
|
||
if (selectedFeatures.length > 0) {
|
||
let feature = selectedFeatures[0];
|
||
let features = feature.get("features");
|
||
if (features.length === 1) {
|
||
// 单个点位
|
||
// 执行之前的业务逻辑
|
||
// 获取点击的图层信息
|
||
const selectFeature = feature.getProperties().features[0];
|
||
console.log(selectFeature, "点位");
|
||
// 获取点位数据
|
||
this.currentImageItem = selectFeature.get("data");
|
||
this.showImageDialog = true;
|
||
// console.log(selectFeature.get("data"));
|
||
} else {
|
||
// 聚合点
|
||
// 放大地图层级
|
||
map.getView().animate({
|
||
center: feature.getGeometry().getCoordinates(),
|
||
zoom: map.getView().getZoom() + 1,
|
||
});
|
||
|
||
}
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @description: 选择病害弹窗
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
viewSelected() {
|
||
this.diseaseVisible = true
|
||
},
|
||
|
||
/**
|
||
* @description: 获取选择的病害列表
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
getCheckedList(value) {
|
||
this.checkedDiseaseList = value;
|
||
this.diseaseVisible = false;
|
||
},
|
||
|
||
/**
|
||
* @description: 选择病害弹窗关闭方法
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
diseaseCancel() {
|
||
this.diseaseVisible = false
|
||
},
|
||
|
||
/**
|
||
* @description: 打开查看图片弹窗
|
||
* @param {*} item
|
||
* @return {*}
|
||
*/
|
||
showScreenImg(item) {
|
||
this.currentImageItem = item;
|
||
this.showImageDialog = true;
|
||
},
|
||
|
||
/**
|
||
* @description: 图片位置信息获取
|
||
* @param {*} val
|
||
* @return {*}
|
||
*/
|
||
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 {*} left
|
||
* @param {*} top
|
||
* @param {*} width
|
||
* @param {*} height
|
||
* @return {*}
|
||
*/
|
||
getRectStyle({ 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",
|
||
};
|
||
},
|
||
|
||
/**
|
||
* @description: 关闭查看图片弹窗
|
||
* @param {*} val
|
||
* @return {*}
|
||
*/
|
||
imgCancel() {
|
||
if (this.$refs.diseaseMap) {
|
||
this.$refs.diseaseMap.removeSelectClick();
|
||
}
|
||
this.showImageDialog = false;
|
||
this.currentImageItem = {};
|
||
this.rects = [];
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.edit-dialog {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.editForm {
|
||
.el-select {
|
||
width: 100%;
|
||
}
|
||
|
||
.content-box {
|
||
display: flex;
|
||
|
||
span {
|
||
font-size: 1.5rem;
|
||
line-height: 3rem;
|
||
}
|
||
|
||
.el-icon-circle-plus-outline {
|
||
color: #08ce29;
|
||
}
|
||
|
||
.el-icon-delete {
|
||
color: #f01515;
|
||
}
|
||
|
||
>div {
|
||
margin: 0.5rem 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 页脚 */
|
||
.dialog-footer {
|
||
padding: 1rem 0;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
|
||
/* 查看大图弹窗 */
|
||
.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;
|
||
}
|
||
|
||
// 图片信息
|
||
.rect-image {
|
||
width: 90%;
|
||
position: absolute;
|
||
top: 0;
|
||
font-size: 1.2rem;
|
||
color: #ffffff;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
</style>
|