<!-- 右侧菜单-- 事件面板 -->
<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="width: 132px;" :class="{'active': showDrop}">
{{eventDetailObj.eventResponseLevelName}}
<span class="icon-arrow"></span>
</div>
<el-dropdown-menu slot="dropdown" style="width: 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=",
width: 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",
width: 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;
width: 470px;
.pop-outer {
width: 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;
width: 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;
width: 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);
width: 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);
width: 470px;
height: auto;
.event-detail {
padding: 36px 0;
.com-flex-item {
.flex-item {
padding: 0 30px;
line-height: 36px;
font-size: 16px;
min-width: 0;
&:nth-child(odd) {
background: rgba(0, 0, 0, 0.5);
}
.lb {
width: 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 {
width: 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 {
width: 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;
width: 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;
width: 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>
