<template> <el-dialog title="详情" :visible.sync="detailOpen" width="1200px" append-to-body destroy-on-close :close-on-click-modal="false"> <el-row> <el-col :span="14"> <el-form label-width="120px"> <el-row> <el-col :span="11"> <el-form-item label="事故名称:" > <span v-if="detailInfo.troubleName">{{ detailInfo.troubleName }}</span> <span v-else>-</span> </el-form-item> <el-form-item label="事故原因:"> <span v-if="detailInfo.troubleReason">{{ detailInfo.troubleReason }}</span> <span v-else>-</span> </el-form-item> <el-form-item label="责任单位:" > <span v-if="detailInfo.responsibleUnit">{{ detailInfo.responsibleUnit }}</span> <span v-else>-</span> </el-form-item> <el-form-item label="是否人员伤亡:" > <span v-if="detailInfo.isCasualties == '1'">是</span> <span v-else-if="detailInfo.isCasualties == '2'">否</span> <span v-else>-</span> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="事故类型:" > <span v-if="detailInfo.troubleType == '1'">安全生产事故</span> <span v-else-if="detailInfo.troubleType == '2'">非生产安全事故</span> <span v-else>-</span> </el-form-item> <el-form-item label="事故地点:" > <span v-if="detailInfo.troubleLocation">{{ detailInfo.troubleLocation }}</span> <span v-else>-</span> </el-form-item> <el-form-item label="责任人员:" > <span v-if="detailInfo.responsiblePeople">{{ detailInfo.responsiblePeople }}</span> <span v-else>-</span> </el-form-item> <el-form-item label="是否处理:" > <span v-if="detailInfo.isDeal == '1'">已处理</span> <span v-else-if="detailInfo.isDeal == '2'">未处理</span> <span v-else>-</span> </el-form-item> </el-col> </el-row> <el-row v-if="detailInfo.isCasualties == '1'"> <el-col :span="11"> <el-form-item label="受伤人数:" > <span v-if="detailInfo.injuryNum">{{ detailInfo.injuryNum }}</span> <span v-else>-</span> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="死亡人数:" > <span v-if="detailInfo.deathNum">{{ detailInfo.deathNum }}</span> <span v-else>-</span> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="23"> <el-form-item label="处理完成时间:" > <span v-if="detailInfo.dealDate">{{ detailInfo.dealDate }}</span> <span v-else>-</span> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="23"> <el-form-item label="简要经过:" > <span v-if="detailInfo.briefProcess">{{ detailInfo.briefProcess }}</span> <span v-else>-</span> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="23"> <el-form-item label="备注信息:" > <span v-if="detailInfo.remarks">{{ detailInfo.remarks }}</span> <span v-else>-</span> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="23"> <el-form-item label="所属企业:" > <span v-if="detailInfo.enterpriseName">{{ detailInfo.enterpriseName }}</span> <span v-else>-</span> </el-form-item> </el-col> </el-row> </el-form> </el-col> <el-col :span="9"> <div style="width: 100%;height: 390px; border: 1px solid rgb(218, 213, 213);margin-bottom: 10px;"> <div style="width: 100%;height: 100%" id="troubleContainer"></div> </div> </el-col> </el-row> </el-dialog> </template> <script> import { getTrouble} from "@/api/standingBook/trouble"; import { EditorMap } from "@/utils/mapClass/getPath.js"; export default { name: "detail-info", data(){ return{ detailInfo: {}, enterpriseName:"", detailOpen: false, devicePos: [], map: null, reasonOptions:[], } }, created() { this.getDicts("t_trouble_reason").then(response => { this.reasonOptions = response.data; }); }, methods:{ statusFormat2(row, column) { return this.selectDictLabel(this.reasonOptions, row.troubleReason); }, getDetailInfo(id){ getTrouble(id).then(response => { this.detailInfo = response.data; this.detailInfo.troubleReason = this.statusFormat2(this.detailInfo,0); this.devicePos = [this.detailInfo.longitude, this.detailInfo.latitude]; this.detailOpen = true; this.$nextTick(() => { this.map = new EditorMap("troubleContainer", {}, this); this.map.addDevice({ path: this.devicePos }); this.map.nowMouseTarget = null; this.map.mousetoolClose(false); }); }); } } } </script> <style scoped> </style>