820 lines
26 KiB
Vue
820 lines
26 KiB
Vue
<template>
|
||
<div class="map_assembly_container">
|
||
|
||
<!-- 地图 -->
|
||
<div id="map"/>
|
||
|
||
<div id="mapAssembly_container" class="body_container">
|
||
<div class="body_flex_box">
|
||
<!-- 左侧面板 -->
|
||
<div class="left">
|
||
<base-table :info="info" use-type="dutyInfo" @goInfo="goInfo"/>
|
||
<base-table :info="info" use-type="reservePlanInfo" is-reserve-plan @goInfo="goInfo"/>
|
||
<base-table :info="info" use-type="addressBook" @goInfo="goInfo"/>
|
||
</div>
|
||
<!-- 右侧面板 -->
|
||
<div id="right_height" class="right">
|
||
<sysChat :chat-data="chatData" @orderMessage="handlerOrderMessage" @reFlush="initInfo()" @endRescue="endRescue()"/>
|
||
</div>
|
||
</div>
|
||
<div class="top_search">
|
||
<span
|
||
v-for="(item, index) in rangeList"
|
||
:class="{ active: activeIndex === index }"
|
||
:key="index"
|
||
class="range_item"
|
||
@click="setActive(item, index)"
|
||
>{{ item }} 米</span>
|
||
</div>
|
||
<div class="bottom-center">
|
||
<div class="secon_modal">
|
||
<span v-for="(sos, ind) in currSubControlPoint" :key="ind" @click="subToggleCheck(sos, ind)">
|
||
<img :src="!sos.check ? sos.imgUrl : sos.check_img" alt="">
|
||
<p>{{ sos.label }}</p>
|
||
</span>
|
||
</div>
|
||
<div class="control_pointer">
|
||
<span
|
||
v-for="(item, index) in controlPoint"
|
||
:key="index"
|
||
style="cursor: pointer;"
|
||
@click="toggleCheck(item, index)">
|
||
<img :src="!item.check ? item.imgUrl : item.check_img" alt="">
|
||
<p>{{ item.label }}</p>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<dialog-index :visible.sync="infoDialog.visible" :value="{ ...infoDialog.info }" :title="infoDialog.title"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { requestFN } from '@/utils/request'
|
||
import baseTable from './baseTable.vue'
|
||
import sysChat from './sysChat.vue'
|
||
import DialogIndex from './dialog.vue'
|
||
|
||
let mapInstance
|
||
|
||
export default {
|
||
components: { baseTable, sysChat, DialogIndex },
|
||
data() {
|
||
return {
|
||
info: {
|
||
dutyInfoData: [],
|
||
reservePlan: {},
|
||
addressBook: []
|
||
},
|
||
chatData: [],
|
||
infoDialog: {
|
||
visible: false,
|
||
id: '',
|
||
info: {},
|
||
title: ''
|
||
},
|
||
activeIndex: 0,
|
||
range: 20,
|
||
rangeList: [20, 50, 100, 500, 1000, 5000],
|
||
mapIco: [
|
||
{
|
||
id: 'e1899a925eb7478653007a9e7d17d588',
|
||
ico: require('../../../../assets/map/emergency_rescue/point/img1.png')
|
||
},
|
||
{
|
||
id: 'ea3555185c6498b2d3d07023de723806',
|
||
ico: require('../../../../assets/map/emergency_rescue/point/img2.png')
|
||
},
|
||
{
|
||
id: '52ddb251b528987c58c4d84fe0d83952',
|
||
ico: require('../../../../assets/map/emergency_rescue/point/img3.png')
|
||
},
|
||
{
|
||
id: '7f3d41464cdf450422ffe385c3aa870e',
|
||
ico: require('../../../../assets/map/emergency_rescue/point/img4.png')
|
||
},
|
||
{
|
||
id: '2ef8327624adad89b2dbf6b2e03ac6ef',
|
||
ico: require('../../../../assets/map/emergency_rescue/point/img5.png')
|
||
},
|
||
{
|
||
id: 'e1899a925eb7478653007a9e7d17d588',
|
||
ico: require('../../../../assets/map/emergency_rescue/point/img6.png')
|
||
},
|
||
{
|
||
id: '122abe9858feaecae1c80d2d851fcd57',
|
||
ico: require('../../../../assets/map/emergency_rescue/point/img7.png')
|
||
},
|
||
{
|
||
id: '637b70684bddcfbee0421db1443a972a',
|
||
ico: require('../../../../assets/map/emergency_rescue/point/img8.png')
|
||
},
|
||
{
|
||
id: '950700c9cd80c5e1b22a6c6cdf63a61d',
|
||
ico: require('../../../../assets/map/emergency_rescue/point/img9.png')
|
||
},
|
||
{
|
||
id: '1edb69abc25785c02e2e475162d65b17',
|
||
ico: require('../../../../assets/map/emergency_rescue/point/img10.png')
|
||
},
|
||
{
|
||
id: 'd25f2cae07902e373b72e74757e7a6ea',
|
||
ico: require('../../../../assets/map/emergency_rescue/point/img11.png')
|
||
},
|
||
{
|
||
id: 'be31acea122c423a9dbb431cc66a1351',
|
||
ico: require('../../../../assets/map/emergency_rescue/point/img12.png')
|
||
},
|
||
{
|
||
id: '759d323be34eae4bd83289b36af9ea47',
|
||
ico: require('../../../../assets/map/emergency_rescue/point/img13.png')
|
||
}
|
||
],
|
||
controlPoint: [
|
||
{
|
||
id: '0',
|
||
label: '应急资源',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/ico1.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/ico1_on.png'),
|
||
check: true
|
||
},
|
||
{
|
||
id: '1',
|
||
label: '消防信息',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/ico2.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/ico2_on.png'),
|
||
check: false
|
||
},
|
||
{
|
||
id: '2',
|
||
label: '人员定位',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/ico3.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/ico3_on.png'),
|
||
check: false
|
||
},
|
||
{
|
||
id: '3',
|
||
label: '视频监控',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/ico4.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/ico4_on.png'),
|
||
check: false
|
||
},
|
||
{
|
||
id: '4',
|
||
label: '气象监测',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/ico5.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/ico5_on.png'),
|
||
check: false
|
||
}
|
||
],
|
||
ctlActiveIndex: 0,
|
||
subControlPoint: {
|
||
'0': [
|
||
{
|
||
id: '9b3b9451cf9a86b1e8a44c9a9b0de826',
|
||
code: '0',
|
||
label: '资料装备库',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/i1.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/i1_on.png'),
|
||
check: true
|
||
},
|
||
{
|
||
id: 'f61af43a0af59c86187913f9fe084588',
|
||
code: '1',
|
||
label: '应急避难场所',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/i2.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/i2_on.png'),
|
||
check: false
|
||
},
|
||
{
|
||
id: '7a38cf58e55995c0a5ce2c8e1f5bcc79',
|
||
code: '2',
|
||
label: '排水井',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/i3.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/i3_on.png'),
|
||
check: false
|
||
},
|
||
{
|
||
id: 'a0fd60946978e28dac5b8a2965e00a2b',
|
||
code: '3',
|
||
label: '封闭卡口',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/i4.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/i4_on.png'),
|
||
check: false
|
||
}
|
||
],
|
||
'1': [
|
||
{
|
||
id: '1768cf2b0fb0844dedbb6db1dca3cc79',
|
||
code: '4',
|
||
label: '消防控制室',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/i5.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/i5_on.png'),
|
||
check: false
|
||
},
|
||
{
|
||
id: '18849e29cce63a9408117ca26186203b',
|
||
code: '5',
|
||
label: '消防泵房',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/i6.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/i6_on.png'),
|
||
check: false
|
||
},
|
||
{
|
||
id: 'da52ba25c3f15ad932b18fbd4d028062',
|
||
code: '6',
|
||
label: '消防水源',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/i7.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/i7_on.png'),
|
||
check: false
|
||
},
|
||
{
|
||
id: 'e241e3ef479ac7fb217c7b496816dc7e',
|
||
code: '7',
|
||
label: '消防点位',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/i8.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/i8_on.png'),
|
||
check: false
|
||
}
|
||
],
|
||
'2': [
|
||
{
|
||
id: '93f7e01c8e4d906053916d314e1d3a2a',
|
||
code: '8',
|
||
label: '人员定位',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/i9.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/i9_on.png'),
|
||
check: false
|
||
},
|
||
{
|
||
id: '30fcda69c3eae93adbab78dea360b6b0',
|
||
code: '9',
|
||
label: '人员轨迹',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/i10.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/i10_on.png'),
|
||
check: false
|
||
}
|
||
],
|
||
'3': [
|
||
{
|
||
id: '6ac1fc24fde38671ee70d7aebeed5276',
|
||
code: '10',
|
||
label: '摄像头',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/i11.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/i11_on.png'),
|
||
check: false
|
||
}
|
||
],
|
||
'4': [
|
||
{
|
||
id: '3f858ab418dbf791353ba6ff87c59e85',
|
||
code: '12',
|
||
label: '气象站',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/i12.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/i12_on.png'),
|
||
check: false
|
||
},
|
||
{
|
||
id: '997392774d64efd8507c7c518c23fc44',
|
||
code: '11',
|
||
label: '风速站',
|
||
imgUrl: require('../../../../assets/map/emergency_rescue/i13.png'),
|
||
check_img: require('../../../../assets/map/emergency_rescue/i13_on.png'),
|
||
check: false
|
||
}
|
||
]
|
||
},
|
||
// 当前点击后选择的二级坐标点位分类集合
|
||
currSubControlPoint: [],
|
||
subControlPointIndex: 0,
|
||
webSocket: null,
|
||
heartbeat: null,
|
||
REPORT_ID: null,
|
||
FIRERESERVEPLAN_ID: null,
|
||
CODE: null,
|
||
CORPIFNO_ID: JSON.parse(sessionStorage.getItem('user')).CORPIFNO_ID,
|
||
firstPoint: {
|
||
x: null,
|
||
y: null
|
||
},
|
||
mapLevel: 20,
|
||
goBackFlag: true
|
||
}
|
||
},
|
||
mounted() {
|
||
/** 调用地图初始化方法 */
|
||
this.firstInitPoint()
|
||
/** 调用初始化点位绘制方法 */
|
||
/** 初始化选中首个二级坐标点位分类 */
|
||
this.currSubControlPoint = this.subControlPoint['0']
|
||
},
|
||
created() {
|
||
this.REPORT_ID = this.$route.query.REPORT_ID
|
||
this.FIRERESERVEPLAN_ID = this.$route.query.FIRERESERVEPLAN_ID
|
||
this.initInfo()
|
||
this.initWebsocket()
|
||
this.initPoint({ code: 0, REPORT_ID: this.REPORT_ID, range: this.range })
|
||
},
|
||
beforeDestroy() {
|
||
if (this.webSocket) {
|
||
this.webSocket.close()
|
||
}
|
||
if (this.heartbeat) {
|
||
clearInterval(this.heartbeat)
|
||
}
|
||
},
|
||
methods: {
|
||
/** 地图初始化 */
|
||
mapInit(e) {
|
||
this.firstPoint.x = e.x
|
||
this.firstPoint.y = e.y
|
||
mapInstance = new window.BMapGL.Map('map') // 创建地图实例
|
||
mapInstance.centerAndZoom(new window.BMapGL.Point(e.y, e.x), this.mapLevel) // 创建点坐标
|
||
mapInstance.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放能力
|
||
var point = new window.BMapGL.Point(this.firstPoint.y, this.firstPoint.x) // 设置中心点坐标（例如北京天安门）
|
||
mapInstance.centerAndZoom(point, this.mapLevel) // 设置中心点和缩放级别
|
||
mapInstance.enableScrollWheelZoom(true)
|
||
var circle = new window.BMapGL.Circle(point, this.range, {
|
||
strokeColor: 'blue',
|
||
strokeWeight: 2,
|
||
strokeOpacity: 0.5,
|
||
fillColor: 'blue',
|
||
fillOpacity: 0.2
|
||
})
|
||
mapInstance.addOverlay(circle)
|
||
},
|
||
setActive(item, index) {
|
||
// 设置被选中项的索引
|
||
this.activeIndex = index
|
||
this.range = item
|
||
mapInstance.clearOverlays()
|
||
var point = new window.BMapGL.Point(this.firstPoint.y, this.firstPoint.x) // 设置中心点坐标（例如北京天安门）
|
||
mapInstance.centerAndZoom(point, this.mapLevel) // 设置中心点和缩放级别
|
||
mapInstance.enableScrollWheelZoom(true)
|
||
var circle = new window.BMapGL.Circle(point, item, { // 2000米半径
|
||
strokeColor: 'blue',
|
||
strokeWeight: 2,
|
||
strokeOpacity: 0.5,
|
||
fillColor: 'blue',
|
||
fillOpacity: 0.2
|
||
})
|
||
mapInstance.addOverlay(circle)
|
||
this.initPoint({ code: this.CODE, reportId: this.REPORT_ID, range: this.range })
|
||
},
|
||
/** 扎点方法 */
|
||
addPoint(anchor) {
|
||
if (!anchor.icon) throw new Error('请传入图标')
|
||
if (!anchor.y) throw new Error('请传入经度')
|
||
if (!anchor.x) throw new Error('请传入纬度')
|
||
const imageSize = new window.BMapGL.Size(23, 30)
|
||
const icon = new window.BMapGL.Icon(config.fileUrl + anchor.icon, imageSize, { imageSize })
|
||
const point = new window.BMapGL.Point(anchor.y, anchor.x)
|
||
const marker = new window.BMapGL.Marker(point, { icon }) // 创建标注
|
||
marker.addEventListener('click', async() => {
|
||
this.infoDialog.visible = true
|
||
this.infoDialog.info = anchor
|
||
this.infoDialog.title = anchor.typeName
|
||
})
|
||
mapInstance.addOverlay(marker) // 将标注添加到地图中
|
||
},
|
||
/** 给地图扎点标记事件事故 */
|
||
addPointCallback(anchor) {
|
||
if (!anchor.icon) throw new Error('请传入图标')
|
||
if (!anchor.y) throw new Error('请传入经度')
|
||
if (!anchor.x) throw new Error('请传入纬度')
|
||
const imageSize = new window.BMapGL.Size(33, 40)
|
||
const icon = new window.BMapGL.Icon(config.fileUrl + anchor.icon, imageSize, { imageSize }) // 创建 icon 图标
|
||
var point = new window.BMapGL.Point(anchor.y, anchor.x)
|
||
const marker = new window.BMapGL.Marker(point, { icon }) // 创建标注
|
||
mapInstance.addOverlay(marker) // 将标注添加到地图中
|
||
// 处理标注事件点击行为
|
||
marker.addEventListener('click', async() => {
|
||
let accidentParams = {}
|
||
let nearbyResourcesList = []
|
||
// 获取指定点位所对应的范围等详细信息
|
||
this.currentSelectPointAccident = anchor
|
||
const result = await this.getQueryScopeAsync(anchor)
|
||
if (result.code === 200) {
|
||
mapInstance.clearOverlays() // 清除地图上所有覆盖物
|
||
const { accident, nearbyResources } = result.data
|
||
accidentParams = accident
|
||
nearbyResourcesList = nearbyResources
|
||
const point = new window.BMapGL.Point(accidentParams.LONGITUDE, accidentParams.LATITUDE)
|
||
const marker = new window.BMapGL.Marker(point, { icon })
|
||
mapInstance.addOverlay(marker)
|
||
this.infoWindowPointerController({ point, marker, info: result.data })
|
||
|
||
if (nearbyResourcesList.length === 0) return
|
||
nearbyResourcesList.forEach(item => {
|
||
this.addPoint(item)
|
||
})
|
||
}
|
||
})
|
||
},
|
||
infoWindowPointerController(config) {
|
||
const { point, marker, info } = config
|
||
var opts = {
|
||
width: 300,
|
||
height: 200,
|
||
title: '事故点位信息'
|
||
}
|
||
const sContent = `
|
||
<div>
|
||
<ul>
|
||
<li>机主姓名: ${info.accident.OWNER_NAME || '无'}</li>
|
||
<li>访问模式: ${info.accident.ACCESS_MODE || '无'}</li>
|
||
<li>呼入电话: ${info.accident.INCOMING_PHONE || '无'}</li>
|
||
<li>事件类型: ${info.accident.EVENT_TYPE || '无'}</li>
|
||
<li>接报时间: ${info.accident.REPORT_TIME || '无'}</li>
|
||
<li>发生时间: ${info.accident.OCCURRENCE_TIME || '无'}</li>
|
||
<li>救援情况: ${info.accident.RESCUE_SITUATION || '无'}</li>
|
||
</ul>
|
||
</div>
|
||
`
|
||
const infoWindow = new window.BMapGL.InfoWindow(sContent, opts)
|
||
marker.addEventListener('mouseover', () => {
|
||
mapInstance.openInfoWindow(infoWindow, point)
|
||
})
|
||
},
|
||
/** 获取指定点位所在周围范围等详细信息 */
|
||
getQueryScopeAsync(enterParams) {
|
||
return new Promise((resolve, reject) => {
|
||
requestFN('major/comprehensive/scope', {
|
||
accidentId: enterParams.id,
|
||
type: enterParams.type ? enterParams.type : ''
|
||
}).then((data) => {
|
||
resolve(data)
|
||
return data
|
||
}).catch((error) => {
|
||
reject(error)
|
||
})
|
||
})
|
||
},
|
||
/** 初始化点位绘制方法 */
|
||
async initPoints() {
|
||
const result = await this.getAccidentList()
|
||
result.data.forEach((item) => {
|
||
this.addPointCallback(item)
|
||
})
|
||
},
|
||
/** 获取事故列表的所有点位信息 */
|
||
getAccidentList() {
|
||
return new Promise((resolve, reject) => {
|
||
requestFN('/major/comprehensive/accidentList')
|
||
.then((data) => {
|
||
resolve(data)
|
||
}).catch((e) => {
|
||
})
|
||
})
|
||
},
|
||
// 一级坐标点位点击事件
|
||
toggleCheck(item, index) {
|
||
// 遍历所有项，将点击项的 check 设置为 true，其他项的 check 设置为 false
|
||
this.controlPoint.forEach((item, idx) => {
|
||
if (idx === index) {
|
||
item.check = true
|
||
} else {
|
||
item.check = false
|
||
}
|
||
})
|
||
this.currSubControlPoint = this.subControlPoint[index]
|
||
},
|
||
// 二级坐标点位点击事件
|
||
subToggleCheck(sos, ind) {
|
||
mapInstance.clearOverlays()
|
||
var point = new window.BMapGL.Point(this.firstPoint.y, this.firstPoint.x) // 设置中心点坐标（例如北京天安门）
|
||
mapInstance.centerAndZoom(point, 10) // 设置中心点和缩放级别
|
||
mapInstance.enableScrollWheelZoom(true)
|
||
var circle = new window.BMapGL.Circle(point, this.range, { // 2000米半径
|
||
strokeColor: 'blue',
|
||
strokeWeight: 2,
|
||
strokeOpacity: 0.5,
|
||
fillColor: 'blue',
|
||
fillOpacity: 0.2
|
||
})
|
||
mapInstance.addOverlay(circle)
|
||
this.initPoint(sos)
|
||
this.currSubControlPoint.forEach((item, idx) => {
|
||
if (idx === ind) {
|
||
item.check = true
|
||
} else {
|
||
item.check = false
|
||
}
|
||
})
|
||
},
|
||
// 接收子组件传递出来的指令发送的事件
|
||
handlerOrderMessage() {
|
||
this.infoDialog.visible = true
|
||
this.infoDialog.info = { type: 'sendMessage', FIRERESERVEPLAN_ID: this.FIRERESERVEPLAN_ID, REPORT_ID: this.REPORT_ID }
|
||
this.infoDialog.title = '指令信息'
|
||
},
|
||
initInfo() {
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
})
|
||
requestFN(
|
||
'/bi/emergency/getYjBiInformation',
|
||
{
|
||
FIRERESERVEPLAN_ID: this.FIRERESERVEPLAN_ID,
|
||
REPORT_ID: this.REPORT_ID
|
||
}
|
||
).then((data) => {
|
||
if (data.result === 'success') {
|
||
// 值班列表
|
||
this.info.dutyInfoData = data.dutyList
|
||
// 预案信息
|
||
this.info.reservePlan = data.planInfo
|
||
this.info.addressBook = data.addressBookList
|
||
this.chatData = data.instructList
|
||
}
|
||
loading.close()
|
||
}).catch((e) => {
|
||
console.log(e)
|
||
loading.close()
|
||
})
|
||
},
|
||
goInfo(e) {
|
||
if (e === '值班信息') {
|
||
this.goBackFlag = false
|
||
this.$router.push('/emergen_cyrescue/duty_management/shift_registration')
|
||
}
|
||
if (e === '预案信息') {
|
||
if (this.FIRERESERVEPLAN_ID) {
|
||
this.goBackFlag = false
|
||
this.$router.push('/plan/company_plan?FIRERESERVEPLAN_ID=' + this.FIRERESERVEPLAN_ID)
|
||
} else {
|
||
this.$message.error('救援没启动预案')
|
||
}
|
||
}
|
||
if (e === '通讯录') {
|
||
this.goBackFlag = false
|
||
this.$router.push('/emergencyuser/communication')
|
||
}
|
||
},
|
||
initWebsocket() {
|
||
const wsUrl = config.YjSysUrl + '/yjMessage/' + this.REPORT_ID
|
||
this.webSocket = new WebSocket(encodeURI(wsUrl))
|
||
this.webSocket.onopen = () => {
|
||
console.info('指挥调度的webSocket链接成功')
|
||
this.webSocket.send('链接成功')
|
||
}
|
||
this.webSocket.onerror = () => {
|
||
console.log('指挥调度的webSocket链接失败')
|
||
this.$router.back()
|
||
}
|
||
this.webSocket.onclose = () => {
|
||
console.log('指挥调度的webSocket链接关闭')
|
||
if (this.goBackFlag) {
|
||
this.$router.push('/emergen_cyrescue/incident_management')
|
||
} else {
|
||
this.goBackFlag = true
|
||
}
|
||
}
|
||
var _this = this
|
||
this.webSocket.onmessage = function(message) {
|
||
_this.initInfo()
|
||
}
|
||
// 新建心跳，持续监听链接是否存活
|
||
this.heartbeat = setInterval(() => {
|
||
try {
|
||
if (this.webSocket) {
|
||
this.webSocket.send('企业端' + this.REPORT_ID)
|
||
}
|
||
} catch (e) {
|
||
console.log('链接已断开')
|
||
}
|
||
}, 3000)
|
||
},
|
||
initPoint(row) {
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
})
|
||
this.CODE = row.code
|
||
requestFN(
|
||
'/bi/emergency/getPoint',
|
||
{
|
||
code: row.code,
|
||
reportId: this.REPORT_ID,
|
||
range: this.range
|
||
}
|
||
).then((data) => {
|
||
if (data.result === 'success') {
|
||
for (let i = 0; i < data.list.length; i++) {
|
||
this.addPoint(data.list[i])
|
||
}
|
||
}
|
||
loading.close()
|
||
}).catch((e) => {
|
||
console.log(e)
|
||
loading.close()
|
||
})
|
||
},
|
||
firstInitPoint() {
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
})
|
||
requestFN(
|
||
'/bi/emergency/firstPoint', { code: 0, reportId: this.REPORT_ID, range: this.range }
|
||
).then((data) => {
|
||
if (data.result === 'success') {
|
||
this.mapInit(data.firstPoint)
|
||
}
|
||
loading.close()
|
||
}).catch((e) => {
|
||
console.log(e)
|
||
loading.close()
|
||
})
|
||
},
|
||
endRescue() {
|
||
requestFN('/bi/emergency/endRescue', { ID: this.REPORT_ID })
|
||
.then((data) => {
|
||
this.$message({
|
||
message: '确认已收到指令',
|
||
type: 'success'
|
||
})
|
||
this.$router.push('/emergen_cyrescue/incident_management')
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.map_assembly_container {
|
||
height: 100%;
|
||
|
||
position: relative;
|
||
|
||
// 地图的宽高样式限制
|
||
#map {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.body_container {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
padding: 18px;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.body_flex_box {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.left,
|
||
.right {
|
||
box-sizing: border-box;
|
||
z-index: 99;
|
||
width: 380px;
|
||
height: 100%;
|
||
background-color: #00133b;
|
||
border-radius: 6px;
|
||
border: 2px solid #034383;
|
||
}
|
||
|
||
.left {
|
||
.scroll-box {
|
||
height: 40px;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
position: relative;
|
||
width: 410px;
|
||
}
|
||
}
|
||
|
||
.top_search {
|
||
z-index: 99;
|
||
position: absolute;
|
||
left: 405px;
|
||
top: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.range_item {
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
border-right: 1px solid #183c70;
|
||
display: inline-block;
|
||
width: 67px;
|
||
text-align: center;
|
||
height: 34px;
|
||
line-height: 34px;
|
||
color: #fff;
|
||
background-color: #223050;
|
||
|
||
&:first-child {
|
||
border-top-left-radius: 6px;
|
||
border-bottom-left-radius: 6px;
|
||
}
|
||
|
||
&:last-child {
|
||
border-top-right-radius: 6px;
|
||
border-bottom-right-radius: 6px;
|
||
border-right: none;
|
||
}
|
||
|
||
&.active {
|
||
background-color: #06417d;
|
||
color: #4aecff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-center {
|
||
z-index: 99;
|
||
position: absolute;
|
||
bottom: 18px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: calc(100% - 1123px);
|
||
min-width: 335px;
|
||
height: 80px;
|
||
background-image: url('../../../../assets/map/emergency_rescue/menubg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
background-size: 100% 77px;
|
||
|
||
.secon_modal {
|
||
gap: 23px;
|
||
padding: 0 18px;
|
||
height: 60px;
|
||
border-radius: 6px;
|
||
border: 1px solid #364260;
|
||
background-color: #214e8caf;
|
||
position: absolute;
|
||
left: 0px;
|
||
top: -75px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
|
||
& span {
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
& img {
|
||
width: 30px;
|
||
height: 30px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
& p {
|
||
color: #ffffff;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.control_pointer {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
position: absolute;
|
||
top: -23px;
|
||
|
||
& img {
|
||
width: 70px;
|
||
height: 70px;
|
||
}
|
||
|
||
& p {
|
||
color: #ffffff;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|