<!-- 右侧菜单-- 事件面板 --> <template> <div class="eventBar-wrap com-pop-wrap"> <div class="com-drag-header drag-ing" v-drag> <div class="close" @click="closePanel">×</div> </div> <span class="deg-1"></span> <span class="deg-2"></span> <span class="deg-3"></span> <span class="deg-4"></span> <div class="pop-outer"> <div class="pop-title">应急处置</div> <el-scrollbar> <div class="event-list" style="max-height: 650px;" v-if="this.eventList"> <div class="event-item" v-for="(item, index) in eventList" :key="index" :class="{'active': currIndex === index}"> <div class="event-tit of-1" @click="selectEvent(item, index)" :title="`${item.eventTypeName}-${item.eventTiltle}`"> <span class="event-status" :class="`status-${item.eventLevelcode}`"></span> {{item.eventTypeName}}-{{item.eventTiltle}} </div> </div> </div> </el-scrollbar> </div> <div class="event-plan-wrap com-pop-wrap" :style="{'z-index': topIndex === 0 ? '999' : ''}" v-show="showPlanPanel"> <div class="com-drag-header drag-ing" v-drag> <div class="close" @click="closePlanPanel">×</div> </div> <span class="deg-1"></span> <span class="deg-2"></span> <span class="deg-3"></span> <span class="deg-4"></span> <div class="pop-outer"> <div class="pop-title">推荐预案</div> <div class="event-plan-list"> <div class="plan-item of-1" v-for="(item, index) in eventPlan" :key="index" @click="selectPlan(item.id)">{{item.planname}}</div> </div> <el-pagination v-show="eventPlan.length" class="custom-el-pagination" style="text-align: right;margin: 10px 10px 0 0;" @current-change="handlePageChange" :page-size="planConfig.pageSize" :current-page="planConfig.pageNum" :pager-count="5" layout="prev,pager,next" :total="planConfig.total" prev-text="上一页" next-text="下一页"> </el-pagination> </div> </div> <div class="event-detail-wrap com-pop-wrap" v-show="showDetailPanel"> <div class="com-drag-header drag-ing" v-drag> <div class="close" @click="closeDetailPanel">×</div> </div> <span class="deg-1"></span> <span class="deg-2"></span> <span class="deg-3"></span> <span class="deg-4"></span> <div class="event-detail" v-if="eventDetailObj"> <div class="com-flex-item single"> <div class="flex-item"> <div class="lb">事件名称</div> <div class="rb of-1" :title="eventDetailObj.eventTiltle">{{eventDetailObj.eventTiltle}}</div> </div> <div class="flex-item"> <div class="lb">事件位置</div> <div class="rb of-1" :title="eventDetailObj.eventAddress">{{eventDetailObj.eventAddress}}</div> </div> <div class="flex-item"> <div class="lb">事件时间</div> <div class="rb of-1" :title="eventDetailObj.eventOccurtime">{{eventDetailObj.eventOccurtime}}</div> </div> <div class="flex-item"> <div class="lb">事件类型</div> <div class="rb">{{eventDetailObj.eventTypeName}}</div> </div> <div class="flex-item"> <div class="lb">事件描述</div> <div class="rb of-1" :title="eventDetailObj.eventDesc">{{eventDetailObj.eventDesc}}</div> </div> <div class="flex-item"> <div class="lb">处理预案</div> <div class="rb of-1" @click="openLeftPanel(eventDetailObj.eventTypecode)" style="cursor: pointer;" :title="eventDetailObj.eventEppPlanName">{{eventDetailObj.eventEppPlanName}} <span class="icon-right-arrow"></span></div> </div> <div class="flex-item"> <div class="lb">响应类型</div> <div class="rb"> <el-dropdown trigger="click" @visible-change="onDropRChanged" class="custom-el-select" placement="bottom-start"> <div class="current-select" :class="{'active': showDropR}"> {{eventDetailObj.responseTypeName || '未选择' }} <span class="icon-arrow"></span> </div> <el-dropdown-menu slot="dropdown" class="custom-el-drop"> <el-dropdown-item style="text-align:left;" @click.native="selectResponseType(l.responseTypeCode)" v-for="(l, index) in responseTypes" :key="index">{{l.responseTypeName}}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </div> <div class="flex-item"> <div class="lb">响应等级</div> <div class="rb"> <el-dropdown trigger="click" @visible-change="onDropChanged" class="custom-el-select"> <div class="current-select" style=" 132px;" :class="{'active': showDrop}"> {{eventDetailObj.eventResponseLevelName}} <span class="icon-arrow"></span> </div> <el-dropdown-menu slot="dropdown" style=" 132px;" class="custom-el-drop"> <el-dropdown-item @click.native="selectLevel(l.rsponseId)" v-for="(l, index) in levels" :key="index">{{l.rsponseName}}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 选择预案、类型、等级之后才能启动响应或完结响应 --> <div class="response-button" @click="startResponse" v-if="!!eventDetailObj.eventEppPlanName && !!eventDetailObj.responseTypeName && !!eventDetailObj.eventResponseLevelName">启动响应</div> <div class="response-button" @click="endResponse" v-if="!!eventDetailObj.eventEppPlanName && !!eventDetailObj.responseTypeName && !!eventDetailObj.eventResponseLevelName">完结</div> </div> </div> </div> <div class="event-block"> 重点防护目标及应急资源 (<span style="color: #ff2a2a;">{{(radius / 1000).toFixed(2)}}</span>公里内) <img class="icon-event-position" :src="require('@/assets/img/mapTool/event_leida.png')" @click="fullExentLayer"> </div> <div class="event-filter-list"> <div class="filter-item" v-for="(item, index) in filterData" @click="checkPoint(item)" :key="index" :class="{'active': checkedPoint.indexOf(item.type) > -1}"> <div class="filter-inner"> <div class="icon" :class="`${item.cls}`"></div> <div class="title">{{item.title}}</div> <div class="num">({{item.num}})</div> </div> </div> </div> </div> </div> <!-- 物资装备 --> <MaterialEquipment :style="{'z-index': topIndex === 1 ? '999' : ''}" :datas="equipmentData" v-if="checkedPoint.indexOf('yjwz') > -1" @close-panel="onCloseWzzb"></MaterialEquipment> <!-- 物资专家 --> <MaterialExpert :style="{'z-index': topIndex === 2 ? '999' : ''}" :datas="expertData" v-if="checkedPoint.indexOf('yjzj') > -1" @close-panel="onCloseWzzj"></MaterialExpert> </div> </template> <script lang="ts"> import { Component, Vue, Prop, Watch, Emit, Inject } from "vue-property-decorator"; import { baseServer, eventServer } from "@/api/installServer"; import ol from "../../../public/deps/gis-lib/ol/ol.js"; import MaterialEquipment from "@/components/feature/myPop/MaterialEquipment.vue"; import MaterialExpert from "@/components/feature/myPop/MaterialExpert.vue"; @Component({ name: "EventBar", components: { MaterialEquipment, MaterialExpert } }) export default class EventBar extends Vue { private radius: any = 10000; // 缓冲区范围，默认5公里 private map: any = this.$store.state.mapModule.map; private showDrop: any = false; // 是否展示等级下拉框 private checkedPoint: any = []; // 选中的过滤点位 private eventList: any = [ // 事件列表数据 ]; private eventPlan: any = []; // 预案列表 private currLevel: any = "一级"; // 当前选中的等级 private levels: any = []; // 等级列表 private responseTypes: any = []; // 响应类型列表 private showDropR: any = false; // 响应类型下拉 private currIndex: any = -1; // 当前选中的事件 private filterData: any = [ // 点位过滤查询 { title: "危化企业", type: "aqscc_whqy", num: 0, data: [], cls: "whqy" }, { title: "医疗设施", type: "ylws", num: 0, data: [], cls: "ylss" }, { title: "应急物资", type: "yjwz", num: 0, data: [], cls: "yjwz" }, { title: "救援队伍", type: "jydw", num: 0, data: [], cls: "jydw" }, { title: "学校设施", type: "fhmb_xx", num: 0, data: [], cls: "xxss" }, { title: "避难场所", type: "bhcs", num: 0, data: [], cls: "bncs" }, { title: "应急专家", type: "yjzj", num: 0, data: [], cls: "yjzj" }, { title: "视频信息", type: "spc", num: 0, data: [], cls: "spxx" } ]; private equipmentData: any = []; // 装备数据 private expertData: any = []; // 专家数据 private planConfig: any = { // 预案分页配置 pageSize: 7, total: 0, pageNum: 1 }; private showPlanPanel: any = false; // 是否展示左侧预案 private showDetailPanel: any = false; // 是否展示右侧事件详情 private eventDetailObj: any = null; // 事件详情对象 private topIndex: any = 0; // 0 预案 1 物资装备 2 物资专家 private closePanel() { this.$store.commit("baseModule/setMapToolIndex", -1); // 清除地图 this.$store.commit("eventModule/setEventItem", null); this.clearRes(); this.clearBuffer(); this.clearPnt(); } // 关闭预案面板 private closePlanPanel() { this.showPlanPanel = false; } // 关闭详情面板 private closeDetailPanel() { this.showDetailPanel = false; // 隐藏详情面板 this.showPlanPanel = false; // 隐藏预案面板 this.currIndex = -1; // 取消列表选中 // 清除地图 this.$store.commit("eventModule/setEventItem", null); this.clearRes(); this.clearBuffer(); this.clearPnt(); } private selectEvent(obj: any, index) { if (this.currIndex === index) { this.currIndex = -1; return; } this.currIndex = index; this.checkedPoint = []; // 清空选中的类型 this.showPlanPanel = false; this.eventDetailObj = obj; this.showDetailPanel = true; this.$store.commit("eventModule/setEventItem", obj); // 将选中的事件对象存入 vuex console.log(this.$store.state.eventModule.eventItemForMap); this.handlerEvent(obj); } // 切换事件 private handlerEvent(event: any) { // 清空结果 this.clearRes(); // 绘制缓冲区 this.gBufferDraw(event); // 事件点 this.addPnt(event); // 周边查询 this.getBaseData(event); // 地图视角 this.extentTo(); } // 设置地图视角 private extentTo() { const event = this.$store.state.eventModule.eventItemForMap; const opts = { x: event.lon, y: event.lat, zoom: 13 }; const center = new (g2 as any).sfs.Point({ x: event.lon * 1, y: event.lat * 1 }); this.$store.state.mapModule.mapObj.getInstance().zoomTo(12.5); this.$store.state.mapModule.mapObj.getInstance().setCenter(center); } private fullExentLayer() { const layers = this.$store.state.mapModule.mapObj.getInstance().getLayers(); const bufferLayer = layers.find((item: any) => { return item.getLayerId() === "buffer-layer"; }); if (bufferLayer) { const extent = (G as any).utils.LayerUtil.getLayerExtent(bufferLayer); this.$store.state.mapModule.mapObj.getInstance().pan(extent); } } // 绘制缓冲区 private gBufferDraw(event: any) { // 创建图层 // const layerType = 'buffer-layer' this.clearBuffer(); const gMap = this.$store.state.mapModule.mapObj.getInstance(); // let bufferlayer = gMap.findLayer(layerType); // if (!bufferlayer) { // bufferlayer = new (g2 as any).carto.ElementLayer({ // map: gMap, // id: layerType // }) // gMap.addLayer(bufferlayer); // } // // 创建圆 // const cirEle = this.createCircle(event) // bufferlayer.add(cirEle) // 创建拖拽动作 const param = { id: "drag", name: "drag", data: { type: "wkt", geom: `POINT(${event.lon} ${event.lat})` }, buffer: { radius: this.radius, callback: this.callbackBufferDraw, drag: { visible: true, style: { type: "PictureMarkerSymbol", options: { source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAUCAYAAADskT9PAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzdCRTQ5OTYzRkFFMTFFNDk1NTE5ODREMUQwMDhDMzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzdCRTQ5OTczRkFFMTFFNDk1NTE5ODREMUQwMDhDMzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDN0JFNDk5NDNGQUUxMUU0OTU1MTk4NEQxRDAwOEMzMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDN0JFNDk5NTNGQUUxMUU0OTU1MTk4NEQxRDAwOEMzMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpA7b9wAAAPDSURBVHjarFZbTxNREJ7d7ba7lbaAgqBUMETEW9OggCYiYIyKJhp+gA/6B4wPhGhMjET9CaivXggxXogkaqLxQXxofCCKFRSjQohRgZa2WLbXXWfWs02tB2ONk3xJe2Z25pvvzDm7Ql9fH3BMQEigaeWQTu8Cw9iB/0sQ1fA3ZhgGCMIs/gojXiGeg8czzwu1cQrbIJWqhETiOOj6YX9LS+X6hga3Q1Gk0rIyB/ylLcZiqaV4PPN5evr7i5GROYhEhpDUFSQS/qVgngJUXIFkcgsWP9dx4IC/pa2t2m63S8bPrqBoEwQzKT5pvHj27Mvj4eGXuHYKSUwWKkBxKmQyjVj8Uld397amnTurdF2HbDYL/8GE5ra2NStcLnloYKAfotFjSOJLPgHZ3F9NO7m3q2uzv7W1KpPJwH81bGaTz1eRTCS2PLx79yKunKBlkaEU9313jdfb3NrevjaLxal7Hvb1BE0U6yNkUE2cqaqtTU17UIUOi4AdUYkE9qCznDon2XkJ9veO5zX0u98yiuOSwLyU37d9+0qcqSMWAdUkoOt1NXV1nmw6bQYW4uDpt7kCDy5s4MbQumUUz4shdau9XjeGNFsEFEQZMnKqTqecpcErwKGz73OJh/vqgRdjgfyW0XOFftoGUZJErFWC2+CysQFUkIAoCoJAAcYfjpxe5KngxRtIRLbbRS2RUMTcMRTFBF4caYPtVT7unfXmHj56foorrQXyW0bPFfpZfiMWiWjgdoeIAFFMIoHw/Oxs3MDLgyft7TNrc4m7L8xwY2jdMornxZC2USouCNMkhmgWx5sTZHn6XTC4INtswFOBcKu36hdpC2EZxfH8lNeG+SffvAkhgadEgGZgCTEHDsfE2Oior76hwbOmtnYVXhjcWRjsqcwdw2J8OF5gk2UIzc1FR548mQRFGbJOASnwDfEVVDVwb2DgYyQcjuKQmHItd6kUA2qEiqeSyaWbV6++B0m6jA2HiIDU2dlJdTLmIEqSDanqrwMBtaa21rGyosJpsARFg3UtoeSKqkIkFIpc6+9/h1t9HUpK7rDGc++CBGLGvBUd+MYVxfjQ4GB8q9+/rtHnK3N7PKq7tFQ1ONIu+/YRRdDi8eRiNKqNjo8vjAYCnzD3DVT5Ptt2I5+Abg4iwAdEClnGaCiDExMbg2Nj61FHD8L9D6/jRWwmhJM3Bi7XI/xN+SPs5P32QUKLMUZiAbEaGU8h3Oy2lIq5f5iq1FTInK+fX0dLzLfsF5HOgpLsASfCweKEIghYc5VCaAzcK/SHAAMA4XIlf6DGCVoAAAAASUVORK5CYII=", 32, height: 20, opacity: 1, rotation: 0 } } }, fill: { visible: true, style: { type: "SimpleFillSymbol", options: { fillColor: { a: 80, r: 181, g: 181, b: 10 } } } } } }; const bufferDraw = new (G as any).interact.Buffer({ map: gMap, id: "buffer-layer" }); bufferDraw.load(); bufferDraw.buffer(param); // this.$store.state.mapModule.mapObj.setCenter(opts); } // 缓冲区拖动回调函数 private callbackBufferDraw(bufferGeom, radius) { this.radius = radius; this.getBaseData(this.$store.state.eventModule.eventItemForMap); } // 周边重点防护目标及应急资源 private getBaseData(event: any) { this.filterData.forEach((layer) => { if (layer.type === "yjwz" || layer.type === "yjzj") { baseServer.getBDataByType({ type: layer.type }).then((res: any) => { layer.num = res.data.length; if (layer.type === "yjwz") { this.equipmentData = res.data; } else { this.expertData = res.data; } }); } else { baseServer.getDataByType({ type: layer.type }).then((res: any) => { if (res.data && res.data.length > 0) { const opts = { x: event.lon, y: event.lat, radius: this.radius, data: res.data }; if (layer.type === "fhmb_xx" || layer.type === "aqscc_whqy") { const bufferRes: any = this.getComBufferQuery(opts); layer.num = bufferRes.length; layer.data = bufferRes; } else { let bufferRes = this.getBufferQuery(opts); layer.num = bufferRes.len; layer.data = bufferRes.data; } // 更新地图缓冲区查询结果 if (this.checkedPoint.indexOf(layer.type) > -1) { let data = layer.data; if (layer.type === "fhmb_xx" || layer.type === "aqscc_whqy") { data = [ { type: layer.type, data: layer.data } ]; this.$store.state.mapModule.mapObj.clearLayers([ "buffer_" + layer.type ]); } else { let layers: any = []; if (layer.data && layer.data.length > 0) { layer.data.forEach((d)=> { if (d.type) { layers.push("buffer_" + d.type); } }); this.$store.state.mapModule.mapObj.clearLayers(layers); } } // 防止缓冲区图层冲突 let res: any = []; data.forEach((ele) => { res.push({ type: "buffer_" + ele.type, name: ele.name, data: ele.data }); }); this.$store.state.mapModule.mapObj.loadLayers(res); } } }); } }); console.log("周边重点防护目标及应急资源", this.filterData); } // 缓冲区查询 private getBufferQuery(opts: any) { let res = { data: [], len: 0 }; let len = 0; let allRest: any = []; if (opts.data.length > 0) { const center = new (g2 as any).geom.Point({ x: opts.x * 1, y: opts.y * 1 }); const jstsGeom = (G as any).utils.GeometryUtil.toJstsGeometry( center ).toString(); const bufferWkt = (G as any).utils.SpatialOPUtil.getBuffer({ geometry: jstsGeom, radius: opts.radius - 900, spatialReference: this.$store.state.mapModule.mapObj.getInstance() .spatialReference }); const geom = (G as any).utils.GeometryUtil.toJstsGeometry(bufferWkt); if (opts.data && opts.data.length > 0) { opts.data.forEach((layer) => { let rest: any = []; const item = { type: layer.type, name: layer.name, data: [] }; layer.data.forEach((pnt) => { const ptGeoJson = { type: "Point", coordinates: [pnt.lon * 1, pnt.lat * 1] }; const ptGeom = (G as any).utils.GeometryUtil.toJstsGeometry( ptGeoJson ); if (geom.contains(ptGeom)) { rest.push(pnt); len++; } }); item.data = rest; allRest.push(item); }); // opts.data.forEach((layer) => { // if(layer.data && layer.data.length > 0) { // len += layer.data.length; // for(let i = 0; i < layer.data.length; i++) { // const pnt = layer.data[i]; // const ptGeoJson = { type: 'Point', coordinates: [pnt.lon*1, pnt.lat*1] }; // const ptGeom = (G as any).utils.GeometryUtil.toJstsGeometry(ptGeoJson); // if (!geom.contains(ptGeom)) { // layer.data.splice(i, 1) // len = len -1; // } // } // } // }) } } // res.data = opts.data; res.data = allRest; res.len = len; return res; } // 缓冲区查询 private getComBufferQuery(opts: any) { let res: any = []; const center = new (g2 as any).geom.Point({ x: opts.x * 1, y: opts.y * 1 }); const jstsGeom = (G as any).utils.GeometryUtil.toJstsGeometry( center ).toString(); const bufferWkt = (G as any).utils.SpatialOPUtil.getBuffer({ geometry: jstsGeom, radius: opts.radius - 900, spatialReference: this.$store.state.mapModule.mapObj.getInstance() .spatialReference }); const geom = (G as any).utils.GeometryUtil.toJstsGeometry(bufferWkt); if (opts.data && opts.data.length > 0) { opts.data.forEach((pnt) => { const ptGeoJson = { type: "Point", coordinates: [pnt.lon * 1, pnt.lat * 1] }; const ptGeom = (G as any).utils.GeometryUtil.toJstsGeometry(ptGeoJson); if (geom.contains(ptGeom)) { res.push(pnt); } }); } return res; } // emap渲染器画事件点，地图缩放会偏移，先用原生openlayers private addPnt(event: any) { // 移除 this.clearPnt(); const opts = { layerType: "event", featureName: "突发事件", idField: "id", iconKey: "event", 32, height: 32 }; this.$store.state.mapModule.mapObj.addPointLayer(opts, [event]); return; let layerType = "event"; const saoguan = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([event.lon, event.lat])) }); saoguan.setStyle( new ol.style.Style({ image: new ol.style.Circle({ radius: 50, fill: new ol.style.Fill({ color: "#FF0000" }) }) }) ); const source1 = new ol.source.Vector({ features: [saoguan] }); const layer = new ol.layer.Vector({ source: source1 }); const pot = new ol.Feature(new ol.geom.Point([event.lon, event.lat])); pot.setStyle( new ol.style.Style({ image: new ol.style.Circle({ radius: 5, fill: new ol.style.Fill({ color: "#FF0000" }) }) }) ); const source = new ol.source.Vector({ features: [pot] }); const clusterL = new ol.layer.Vector({ source }); clusterL.set("id", layerType); this.$store.state.mapModule.mapObj.getInstance().map.addLayer(clusterL); } // 创建元素 private createCircle(args: any) { // const gsLineSymbol = new (g2 as any).sfs.SimpleLineSymbol( // { opacity: 1, color: new (g2 as any).syms.Color({ r: 255, g: 97, b: 0 }) }) const gsLineSymbol = new (g2 as any).sfs.SimpleFillSymbol({ color: new (g2 as any).syms.Color({ r: 255, g: 97, b: 0, a: 80 }) }); const radiusT = 0.0089932202929999989 * 10; const centerT = new (g2 as any).geom.Point({ x: args.lon, y: args.lat }); const eleId = "bufferSearchCircle"; const circle = new (g2 as any).geom.Circle({ center: centerT, radius: radiusT, spatialReference: "4326" }); const circleEle = new (g2 as any).sfs.Element({ id: eleId, geometry: circle, symbol: gsLineSymbol }); return circleEle; } // 清除缓冲区 private clearBuffer() { const layers = this.$store.state.mapModule.mapObj.getInstance().getLayers(); const bufferLayer = layers.find((item: any) => { return item.getLayerId() === "buffer-layer"; }); if (bufferLayer) { this.$store.state.mapModule.mapObj.getInstance().removeLayer(bufferLayer); } } // 清除事件点 private clearPnt() { this.$store.state.mapModule.mapObj.clearLayer("event"); return; const layers = this.$store.state.mapModule.mapObj .getInstance() .map.getLayers() .getArray(); const eventLayer = layers.find((item) => { return item.get("id") === "event"; }); if (eventLayer) { this.$store.state.mapModule.mapObj .getInstance() .map.removeLayer(eventLayer); } } // 清除缓冲区查询结果 private clearRes() { let layers: any = []; this.filterData.forEach((item) => { if (item.type === "fhmb_xx" || item.type === "aqscc_whqy") { this.$store.state.mapModule.mapObj.clearLayers(["buffer_" + item.type]); } else { if (item.data && item.data.length > 0) { item.data.forEach((d) => { if (d.type) { layers.push("buffer_" + d.type); } }); } this.$store.state.mapModule.mapObj.clearLayers(layers); } }); // 清除路径 const allLayers = this.$store.state.mapModule.mapObj .getInstance() .getLayers(); const routeLayer = allLayers.find((item: any) => { return item.getLayerId() === "route"; }); if (routeLayer) { routeLayer.clear(); } } private checkPoint(p: any) { if (this.checkedPoint.indexOf(p.type) > -1) { this.checkedPoint.splice(this.checkedPoint.indexOf(p.type), 1); // 物资，专家列表弹窗 // gis 清除 if (p.type === "fhmb_xx" || p.type === "aqscc_whqy") { this.$store.state.mapModule.mapObj.clearLayers(["buffer_" + p.type]); } else { let layers: any = []; if (p.data && p.data.length > 0) { p.data.forEach((item) => { layers.push("buffer_" + item.type); }); } this.$store.state.mapModule.mapObj.clearLayers(layers); } return; } this.checkedPoint.push(p.type); // gis 上图 let data = p.data; if (p.type === "fhmb_xx" || p.type === "aqscc_whqy") { data = [ { type: p.type, data: p.data } ]; } // 防止缓冲区图层冲突 let res: any = []; data.forEach((ele) => { res.push({ type: "buffer_" + ele.type, name: ele.name, data: ele.data }); }); this.$store.state.mapModule.mapObj.loadLayers(res); this.topIndex = p.type === "yjwz" ? 1 : p.type === "yjzj" ? 2 : 0; } // 打开左侧预案列表数据 private openLeftPanel(id: any) { this.showPlanPanel = true; this.topIndex = 0; this.handlePageChange(); } private handlePageChange() { let params = { eventTypeCode: this.eventDetailObj.eventTypecode, pageNum: this.planConfig.pageNum, pageSize: this.planConfig.pageSize }; eventServer.getEventPlan(params).then((res: any) => { if (res && res.data) { this.eventPlan = res.data.content; this.planConfig.total = res.data.total; } }); } get mapToolIndex() { return this.$store.state.baseModule.mapToolIndex; } @Watch("mapToolIndex") private onMapToolIndexChanged(n: any) { if (n !== 2) { this.closeDetailPanel(); } else { this.getEventList(); } } // 默认的获取事件列表 private getEventList() { eventServer .getEventList({ pageSize: 10000, pageNum: 0 }) .then((res: any) => { if (res.data && res.data.content) { this.eventList = res.data.content; if (this.showDetailPanel) { let details = this.eventList.filter( (res: any) => res.id === this.eventDetailObj.id ); if (details.length) { this.eventDetailObj = details[0]; this.showDetailPanel = true; this.$store.commit( "eventModule/setEventItem", this.eventDetailObj ); // 将选中的事件对象存入 vuex this.handlerEvent(this.eventDetailObj); } } else { this.closeDetailPanel(); } } }); } // 修改操作后的 回显查询 private getNEventList() { eventServer .getEventList({ pageSize: 10000, pageNum: 0 }) .then((res: any) => { if (res.data && res.data.content) { this.eventList = res.data.content; if (this.showDetailPanel) { let details = this.eventList.filter( (res: any) => res.id === this.eventDetailObj.id ); if (details.length) { this.eventDetailObj = details[0]; this.showDetailPanel = true; this.$store.commit( "eventModule/setEventItem", this.eventDetailObj ); // 将选中的事件对象存入 vuex } } else { this.closeDetailPanel(); } } }); } private onCloseWzzb() { this.checkedPoint = this.checkedPoint.filter((d: any) => { return d !== "yjwz"; }); } private onCloseWzzj() { this.checkedPoint = this.checkedPoint.filter((d: any) => { return d !== "yjzj"; }); } // 获取所有等级 private getLevels() { eventServer.getEventLevels().then((res: any) => { if (res.data) { this.levels = res.data; } }); } // 获取所有响应类型 private getResponseType() { eventServer.getResponseType().then((res: any) => { if (res.data) { this.responseTypes = res.data; } }); } private onDropChanged(e: any) { this.showDrop = e; } private onDropRChanged(e: any) { this.showDropR = e; } // 选择等级 private selectLevel(id: any) { let params = { eventId: this.eventDetailObj.id, eventResponseLevel: id }; eventServer.setEventLevels(params).then((res: any) => { if (res.code === 200) { this.getNEventList(); // 获取最新列表 this.$message({ message: "修改响应等级成功!", type: "success" }); } }); } // 选择响应类型 private selectResponseType(id: any) { let params = { eventId: this.eventDetailObj.id, responseTypeCode: id }; eventServer.setResponseType(params).then((res: any) => { if (res.code === 200) { this.getNEventList(); // 获取最新列表 this.$message({ message: "修改响应类型成功!", type: "success" }); } }); } // 修改预案 private selectPlan(id: any) { let params = { eventId: this.eventDetailObj.id, eventEppPlanid: id }; eventServer.setEventPlan(params).then((res: any) => { if (res.code === 200) { this.showPlanPanel = false; this.getNEventList(); // 获取最新列表 this.$message({ message: "修改预案成功!", type: "success" }); } }); } private startResponse() { let params = { eventId: this.eventDetailObj.id, eventStatus: "2" }; eventServer.updateEventStatus(params).then((res: any) => { if (res.code === 200) { this.getNEventList(); // 获取最新列表 this.$message({ message: "启动响应成功!", type: "success" }); this.$store.commit( "eventModule/setCurrentResponseLevel", this.eventDetailObj ); } }); } private endResponse() { if (this.eventDetailObj.eventStatus === "0") { this.$message({ message: "未启动响应无法完结", type: "warning" }); return; } let params = { eventId: this.eventDetailObj.id, eventStatus: "3" }; eventServer.updateEventStatus(params).then((res: any) => { if (res.code === 200) { this.showDetailPanel = false; this.getNEventList(); // 获取最新列表 this.$message({ message: "完结成功!", type: "success" }); this.$store.commit("eventModule/setCurrentResponseLevel", null); } }); } private created() { this.getLevels(); // 获取响应等级 this.getResponseType(); // 获取相应类型 } } </script> <style lang="less" scoped> .eventBar-wrap { position: absolute; left: 340px; top: 160px; 470px; .pop-outer { 100%; height: 100%; padding: 20px 0; max-height: 830px; overflow: hidden; .pop-title { font-size: 18px; color: #00e3ff; margin-bottom: 20px; padding: 0 30px; } .event-list { .event-item { &:nth-child(odd) { .event-tit { background: rgba(0, 0, 0, 0.5); } } &.active { .event-tit { background-color: rgba(2, 76, 85, 0.5); &:after { transform: rotate(180deg); opacity: 1; } } } .event-tit { padding: 0 55px; position: relative; line-height: 40px; cursor: pointer; &:hover { background-color: rgba(2, 76, 85, 0.5); } &:after { content: ""; position: absolute; right: 0; top: 0; 55px; height: 40px; background: url("../../assets/img/home/icon_weather_up.png") no-repeat center center; transform: rotate(90deg); opacity: 0.5; transition: 0.5s all; } .event-status { position: absolute; left: 20px; top: 50%; margin-top: -7px; 14px; height: 14px; border-radius: 50%; &.status-1 { background-color: #f0210b; } &.status-2 { background-color: #e26e07; } &.status-3 { background-color: #ffe16a; } &.status-4 { background-color: #2a96f1; } } } } } } .event-plan-wrap { position: absolute; top: 0; left: calc(100% + 510px); 600px; height: 400px; .event-plan-list { .plan-item { height: 36px; line-height: 36px; padding: 0 30px; cursor: pointer; &:nth-child(odd) { background: rgba(0, 0, 0, 0.5); } &:hover { color: #00e3ff; } } } } .event-detail-wrap { position: absolute; top: 0; left: calc(100% + 20px); 470px; height: auto; .event-detail { padding: 36px 0; .com-flex-item { .flex-item { padding: 0 30px; line-height: 36px; font-size: 16px; min- 0; &:nth-child(odd) { background: rgba(0, 0, 0, 0.5); } .lb { 70px; margin-right: 20px; } .rb { flex: 1; text-align: left; } } } .event-block { padding: 0 30px; line-height: 36px; margin-bottom: 20px; background: rgba(0, 0, 0, 0.5); } .event-filter-list { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 30px; .filter-item { 90px; height: 125px; margin-bottom: 15px; border: 2px solid #024c55; background-color: rgba(2, 76, 85, 0.5); text-align: center; cursor: pointer; .filter-inner { 100%; height: 100%; .icon { height: 58px; background: no-repeat center center; &.whqy { background-image: url("../../assets/img/mapTool/event_whqy.png"); } &.ylss { background-image: url("../../assets/img/mapTool/event_ylss.png"); } &.yjwz { background-image: url("../../assets/img/mapTool/event_yjwz.png"); } &.jydw { background-image: url("../../assets/img/mapTool/event_jydw.png"); } &.xxss { background-image: url("../../assets/img/mapTool/event_xxss.png"); } &.bncs { background-image: url("../../assets/img/mapTool/event_bncs.png"); } &.yjzj { background-image: url("../../assets/img/mapTool/event_yjzj.png"); } &.spxx { background-image: url("../../assets/img/mapTool/event_spxh.png"); } } .title { font-size: 16px; color: #fff; margin-bottom: 10px; } .num { font-size: 16px; color: #00e3ff; } } &.active { background-color: rgba(2, 76, 85, 1); border-color: rgba(255, 255, 94, 0.8); box-shadow: 0 0 15px rgba(255, 255, 94, 1); } } } } } .icon-right-arrow { display: inline-block; vertical-align: -12px; 36px; height: 36px; background: url("../../assets/img/home/icon_weather_up.png") no-repeat center center; transform: rotate(90deg); } .icon-event-position, .icon-event-list { display: inline-block; vertical-align: -6px; margin-left: 10px; cursor: pointer; } .response-button { display: inline-block; margin-left: 8px; 80px; height: 40px; line-height: 40px; text-align: center; font-size: 14px; color: #fff; background: url("../../assets/img/mapPop/bg_btn_n.png") no-repeat center center; background-size: cover; cursor: pointer; &:hover, &.active { color: #ffff5e; background-image: url("../../assets/img/mapPop/bg_btn_p.png"); } } } </style>