<template>
<view>
<view class="map-wrap" style="position: relative;">
<view id="map-box"></view>
<nav id="listing-group" class="listing-group">
<label for="scrollZoom" class="green" @click="getRTP()">
<uni-icons custom-prefix="iconfont" type="icon-dingwei" size="22" color="#eee">
</uni-icons>
<view>定位</view>
</label>
<label for="boxZoom" class="green" @click="initMap(1)">
<uni-icons custom-prefix="iconfont" type="icon-qiye" size="22" color="#eee">
</uni-icons>
<view>企业</view>
</label>
<label for="dragRotate" class="green" @click="initMap(2)">
<uni-icons custom-prefix="iconfont" type="icon-zerenqu" size="22" color="#eee">
</uni-icons>
<view>责任区</view>
</label>
<label for="dragPan" class="green" @click="initMap(3)">
<uni-icons custom-prefix="iconfont" type="icon-xunchadian1" size="22" color="#eee">
</uni-icons>
<view>巡查点</view>
</label>
<label for="search" class="green" @click="open">
<uni-icons custom-prefix="iconfont" type="icon-xunchadian1" size="22" color="#eee">
</uni-icons>
<view>搜索</view>
</label>
</nav>
<nav class="listing-groupss">
<label for="scrollZoom" class="green" style="width: 61px;">
<view style="padding: 15px;">当前所选凤县全部企业事故总数为<span style="color: red;">3</span>起，今年事故总数为
<span style="color: red;">2</span>起
</view>
</label>
</nav>
<u-popup :show="show" @close="close">
<view>
<text>
<u-search shape="square" style="padding: 15px;"></u-search>
<view class="cu-list grid solids-bottom col-4 no-border">
<view class="cu-item" @click="initMap(4)">
<view
style="background-color: #225EA4; border-radius: 50px 50px; width: 32px; height: 32px; margin: 0 auto;">
<uni-icons color=" #fff" custom-prefix="iconfont" type="icon-yitihuajiankong"
size="18" style="line-height: 24px;">
</uni-icons>
</view>
<text class="txtfont">隐患分布</text>
</view>
<view class="cu-item" @click="initMap(5)">
<view
style="background-color: #225EA4; border-radius: 50px 50px; width: 32px; height: 32px; margin: 0 auto;">
<uni-icons color=" #fff" custom-prefix="iconfont" type="icon-yitihuajiankong"
size="18" style="line-height: 24px;">
</uni-icons>
</view>
<text class="txtfont">事故分布</text>
</view>
<view class="cu-item" @click="initMap(6)">
<view
style="background-color: #225EA4; border-radius: 50px 50px; width: 32px; height: 32px; margin: 0 auto;">
<uni-icons color=" #fff" custom-prefix="iconfont" type="icon-yitihuajiankong"
size="18" style="line-height: 24px;">
</uni-icons>
</view>
<text class="txtfont">监控设备</text>
</view>
<view class="cu-item" @click="initMap(7)">
<view
style="background-color: #225EA4; border-radius: 50px 50px; width: 32px; height: 32px; margin: 0 auto;">
<uni-icons color=" #fff" custom-prefix="iconfont" type="icon-yitihuajiankong"
size="18" style="line-height: 24px;">
</uni-icons>
</view>
<text class="txtfont">监测设备</text>
</view>
</view>
</text>
</view>
</u-popup>
<u-popup :show="show2" @open="open2"
style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close2">
<view class="ksorder">
<view @click="close2" class="close">×</view>
<div class="hover-popup">
<div style="font-size:14px; color:#333">
<div style="margin-top:5px"><span
style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 36px;">{{minePointdetails.name}}</span>
</div>
<div
style="background-color: #E1EEFD; color:#225EA4; border: none;border-radius: 50px; line-height: 15px;display: inline-block;width: 100px;text-align: center;padding:5px 0;margin-right: 10px;">
<span v-if='minePointdetails.status == 1'>生产</span>
<span v-if='minePointdetails.status == 2'>停产</span>
</div>
<div
style="background-color: #E1EEFD; color:#225EA4; border: none;border-radius: 50px; line-height: 15px;display: inline-block;width: 100px;text-align: center; padding:5px 0;">
<span v-if='minePointdetails.riskLevel == 1'>低风险</span>
<span v-if='minePointdetails.riskLevel == 2'>一般风险</span>
<span v-if='minePointdetails.riskLevel == 3'>较大风险</span>
<span v-if='minePointdetails.riskLevel == 4'>重大风险</span>
</div>
<div style="margin-top:5px"><span
style="color: #595959;">地址：</span><span>{{minePointdetails.address}}</span></div>
<div style="margin-top:5px"><span
style="color: #595959;">负责人：</span><span>{{minePointdetails.directorName}}</span>
</div>
<div style="margin-top:5px"><span
style="color: #595959;">联系方式：</span><span>{{minePointdetails.directorPhone}}</span>
</div>
</div>
</div>
</view>
</u-popup>
<u-popup :show="show1" @open="open1"
style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close1">
<view class="order cu-from-group-wei">
<view @click="close1" class="close">×</view>
<view style="height: 370px; background-color: rgb(255 255 255);">
<view class="styone">
<view>事故统计</view>
<view style="font-size: 14px;">{{ this.getLocalTime(accidentsdetails.accidentTime) }}</view>
<view>事故等级:{{accidentsdetails.type}}</view>
<view>矿山企业:{{accidentsdetails.enterpriseInfoName}}</view>
</view>
<view class="cu-form-group">
<view class="title fontsize-P">
事故原因</view>
<input name="input" disabled="disabled" placeholder-class="cl"
:placeholder="accidentsdetails.name"></input>
</view>
<view class="cu-form-group">
<view class="title fontsize-P">
事故地址</view>
<input name="input" disabled="disabled" placeholder-class="cl"
:placeholder="accidentsdetails.address"></input>
</view>
<view class="cu-form-group">
<view class="title fontsize-P">
事故描述</view>
<textarea disabled="disabled" placeholder-class="cl" :placeholder="accidentsdetails.remark"
style="margin: 0 0 0 0;font-size: 15px;padding-top: 26px;"></textarea>
</view>
</view>
</view>
</u-popup>
<u-popup :show="show3" @open="open3"
style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close3">
<view class="order cu-from-group-wei">
<view @click="close3" class="close">×</view>
<view style="height: 580px; background-color: rgb(255 255 255);">
<view class="yhyone">
<view>隐患事件</view>
<view style="font-size: 14px;">
{{ this.getLocalTime(hiddenPointPositiondetails.dangerCreateTime) }}
</view>
<view>隐患等级:{{hiddenPointPositiondetails.dangerLevelText}}</view>
<view>矿山企业:{{hiddenPointPositiondetails.mineInfoName}}</view>
<view>
<image v-if="hiddenPointPositiondetails.dangerStatus==0" src="/static/map/map_dcl.png"
class="u-image-error">
<image v-if="hiddenPointPositiondetails.dangerStatus==1"
src="/static/map/map_yxf.png" class="u-image-error">
<image v-if="hiddenPointPositiondetails.dangerStatus==2"
src="/static/map/map_dsh.png" class="u-image-error">
<image v-if="hiddenPointPositiondetails.dangerStatus==3"
src="/static/map/map_ycl.png" class="u-image-error">
<image v-if="hiddenPointPositiondetails.dangerStatus==4"
src="/static/map/map_wjj.png" class="u-image-error">
<image v-if="hiddenPointPositiondetails.dangerStatus==5"
src="/static/map/map_yqx.png" class="u-image-error">
</view>
</view>
<view class="cu-form-group">
<view class="title fontsize-P">上报人员</view>
<input :placeholder="hiddenPointPositiondetails.report" name="input" disabled="disabled"
placeholder-class="cl"></input>
</view>
<view class="cu-form-group">
<view class="title fontsize-P">隐患类型</view>
<input name="input" disabled="disabled" placeholder-class="cl"
:placeholder="hiddenPointPositiondetails.dangerTypeText">
</view>
<view class="cu-form-group">
<view class="title fontsize-P">
隐患来源</view>
<input name="input" disabled="disabled" placeholder-class="cl"
v-if="hiddenPointPositiondetails.dangerSources==1" placeholder="矿区及周边环境条件">
<input name="input" disabled="disabled" placeholder-class="cl"
v-if="hiddenPointPositiondetails.dangerSources==2" placeholder="矿区平面布局">
<input name="input" disabled="disabled" placeholder-class="cl"
v-if="hiddenPointPositiondetails.dangerSources==3" placeholder="建筑物">
<input name="input" disabled="disabled" placeholder-class="cl"
v-if="hiddenPointPositiondetails.dangerSources==4" placeholder="生产工艺场所">
<input name="input" disabled="disabled" placeholder-class="cl"
v-if="hiddenPointPositiondetails.dangerSources==5" placeholder="生产设备装置">
</view>
<view class="cu-form-group">
<view class="title fontsize-P">
隐患原因</view>
<textarea disabled="disabled" placeholder-class="cl"
:placeholder="hiddenPointPositiondetails.dangerCause"
style="margin: 0 0 0 0;font-size: 15px;padding-top: 26px;"></textarea>
</view>
<view class="cu-form-group" v-for="(item, index) in hiddenPointPositiondetails.imgPathList"
:key="index">
<image src="appConfig.baseUrl+item" style="height: 85px; width: 85px; float: right;">
</view>
<view>
<u-button text="查看详情" type="primary" color="linear-gradient(to right, #D36554, #E37757)"
style="width: 650rpx; margin: 20PX auto;" shape="circle"
@click="gajin(hiddenPointPositiondetails.id)">
</u-button>
</view>
</view>
</view>
</u-popup>
<u-popup :show="show4" @open="open4"
style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close4">
<view class="ksorder">
<view @click="close4" class="close">×</view>
<div class="hover-popup">
<div style="font-size:14px; color:#333">
<div>
<span>
<image src="/static/jksbtb.png"
style="width: 32px;height: 32px;vertical-align: middle; "></image>
</span>
<p style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 55px;
display: inline-block; margin-left: 10px;">{{watchdetails.deviceName}}</p>
</div>
<div
style="font-size: 14px; color: #333; background-color: #e1eefd; padding: 10px; border-radius: 21px;overflow: hidden;">
<button v-for="(item, index) in watchdetails.data"
style="margin:5px 5px 5px 0;background: #E1EEFD; color:#225EA4; border: none!important; border-right: 1px solid #5383bb;float: left;line-height: 35px;">{{item.label}}:<span
style="font-weight: 900; font-style: italic;">{{item.field}}{{item.unit}}</span></button>
</div>
</div>
</div>
</view>
</u-popup>
<u-popup :show="show5" @open="open5"
style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close5">
<view class="ksorder">
<view @click="close5" class="close">×</view>
<div class="hover-popup">
<div style="font-size:14px; color:#333">
<div>
<span>
<image src="/static/jksbtb.png"
style="width: 32px;height: 32px;vertical-align: middle; "></image>
</span>
<p style="color:#999; font-size: 16px;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600; color: #343434; line-height: 55px;
display: inline-block; margin-left: 10px;">{{monitoringDetails.deviceName}}</p>
</div>
<div style="width: 95%;margin: 5px auto;">
<video style="width: 100%;margin: 5px auto;"
src="https://www.runoob.com/try/demo_source/movie.mp4"></video>
</div>
</div>
</div>
</view>
</u-popup>
<u-popup :show="show6" @open="open6"
style="transition-duration: 300ms;transition-timing-function: ease-out;" @close="close6">
<view class="ksorder">
<view @click="close6" class="close">×</view>
<div class="hover-popup">
<div style="font-size:14px; color:#333">
<div>
<span style="font-size: 15px;">{{inspectionPointDetails.patrolPointName}}</span>
<p
style="margin-left:10px;background-color: rgb(225, 238, 253); color: rgb(34, 94, 164); border: none; border-radius: 50px; line-height: 15px; display: inline-block; width: 100px; text-align: center; padding: 5px 0px; margin-right: 10px;">
{{inspectionPointDetails.statusText}}
</p>
</div>
<div style="font-size: 15px; margin-top: 10px;">
巡检矿区：{{inspectionPointDetails.zoneName}}
</div>
</div>
</div>
</view>
</u-popup>
</view>
</view>
<script module="mapboxde">
import {
accidentsList,
minePoint,
hiddenPointPosition,
monitoringEquipment,
watchsEquipment,
areaResponsibility,
minePointdetails,
accidentDetails,
hiddendetails,
monitoringDetails,
watchsDetails,
inspectionPointDetails,
inspectionPoint,
} from "@/api/mapbox/accidents.js";
export default {
data() {
return {
show: false,
show1: false,
show2: false,
show3: false,
show4: false,
show5: false,
show6: false,
keyword: '遥看瀑布挂前川',
mineInfoId: '',
accListmarker: [],
accidentId: 1,
accidentTime: "",
minepoint: [],
minePointdetails: {},
accidentsdetails: {},
hiddenPointPositiondetails: {},
watchdetails: {},
monitoringDetails: {},
inspectionPointDetails: {},
}
},
mounted() {
this.iocnOne()
this.initMap(1)
},
methods: {
open() {
this.show = true
},
close() {
this.show = false
},
open1() {
this.show1 = true
},
close1() {
this.show1 = false
},
open2() {
this.show2 = true
},
close2() {
this.show2 = false
},
open3() {
this.show3 = true
},
close3() {
this.show3 = false
},
open4() {
this.show4 = true
},
close4() {
this.show4 = false
},
open5() {
this.show5 = true
},
close5() {
this.show5 = false
},
open6() {
this.show6 = true
},
close6() {
this.show6 = false
},
iocnOne() {
this.show = true
},
iocnTWO() {
this.show1 = true
},
gajin(item) {
this.warnId = item;
this.$tab.navigateTo(
`/pages/work/dangereventetails/index?id=${this.warnId}`
);
},
getLocalTime(nS) {
var date = new Date(nS);
var Y = date.getFullYear() + "年";
var M =
(date.getMonth() + 1 < 10 ?
"0" + (date.getMonth() + 1) :
date.getMonth() + 1) + "月";
var D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "日 ";
var h = date.getHours() + ":";
var m = date.getMinutes() + ":";
var s = date.getSeconds();
return Y + M + D + h + m + s
},
getMapClick(item) {
item
console.log(item)
},
getAccidentsList() {
accidentsList(this.mineInfoId).then(res => {
console.log("获取事故点位列表", res);
console.log("@@@@8", res.data)
res.data.list.forEach(item => {
const el7 = document.createElement('div');
el7.style.backgroundImage = "url('/static/spsg.png')"
el7.style.width = 40 + "px"
el7.style.height = 40 + "px"
el7.id = 'marker';
this.marke7 = new mapboxgl.Marker(el7)
.setLngLat([item.longitude, item.latitude])
.addTo(this.map);
this.marke7.getElement().addEventListener('click', (e) => {
accidentDetails(item.id).then(res => {
console.log(res)
this.show1 = true
this.accidentsdetails = res.data
})
});
})
})
.catch((err) => {
console.log(err);
});
},
getWatchEquipment() {
watchsEquipment().then(res => {
console.log("监测设备", res)
res.data.forEach((item) => {
console.log(item)
const el6 = document.createElement('div');
el6.style.backgroundImage = "url('/static/spjc.png')"
el6.style.width = 40 + "px"
el6.style.height = 30 + "px"
el6.id = 'marker';
this.marke6 = new mapboxgl.Marker(el6)
.setLngLat([item.longitude, item.latitude])
.addTo(this.map);
this.marke6.getElement().addEventListener('click', (e) => {
watchsDetails(item.id).then(res => {
console.log(res)
this.show4 = true
this.watchdetails = res.data
console.log(this.watchdetails)
})
});
})
})
},
getMinePoint() {
minePoint().then((res) => {
this.minepoint = res.data
const newArreyData = res.data
newArreyData.forEach((item) => {
this.marke2 = new mapboxgl.Marker({
color: '#EF9E6A',
top: '500',
}).setLngLat([item.longitude, item.latitude]).setPopup(this.popup2)
.addTo(this.map);
this.marke2.getElement().addEventListener('click', (e) => {
minePointdetails(item.id).then(res => {
this.show2 = true
this.minePointdetails = res.data
console.log(this.minePointdetails)
})
});
})
})
},
getHiddenPointPosition() {
hiddenPointPosition().then((res) => {
console.log("患点位列表", res)
res.data.list.forEach((item) => {
const el10 = document.createElement('div');
el10.style.backgroundImage = "url('/static/sp4.png')"
el10.style.width = 42 + "px"
el10.style.height = 42 + "px"
el10.id = 'marker';
this.marke8 = new mapboxgl.Marker(el10)
.setLngLat([item.longitude, item.latitude])
.addTo(this.map);
this.marke8.getElement().addEventListener('click', (e) => {
hiddendetails(item.id).then(res => {
console.log(res)
this.show3 = true
this.hiddenPointPositiondetails = res.data
})
});
})
})
},
getInspectionPoint() {
inspectionPoint().then(res => {
console.log(res)
res.data.forEach((item) => {
const el11 = document.createElement('div');
el11.style.backgroundImage = "url('/static/sp4.png')"
el11.style.width = 42 + "px"
el11.style.height = 42 + "px"
el11.id = 'marker';
this.marke10 = new mapboxgl.Marker()
.setLngLat([item.longitude, item.latitude])
.addTo(this.map);
this.marke10.getElement().addEventListener('click', (e) => {
inspectionPointDetails(item.id).then(res => {
console.log(res)
this.show6 = true
this.inspectionPointDetails = res.data
})
});
})
})
},
getMonitoringEquipment() {
monitoringEquipment().then((res) => {
console.log("监控设备", res)
res.data.forEach((item) => {
const el12 = document.createElement('div');
el12.style.backgroundImage = "url('/static/spjk.png')"
el12.style.width = 52 + "px"
el12.style.height = 52 + "px"
el12.id = 'marker';
this.marke12 = new mapboxgl.Marker(el12)
.setLngLat([item.longitude, item.latitude])
.addTo(this.map);
this.marke12.getElement().addEventListener('click', (e) => {
monitoringDetails(item.id).then(res => {
console.log(res)
this.show5 = true
this.monitoringDetails = res.data
})
});
})
})
},
getAreaResponsibility() {
areaResponsibility().then((res) => {
var arr = []
console.log("责任区点位列表", res)
res.data.forEach((item) => {
arr.push(JSON.parse(item.areaCoordinates))
console.log(item.areaCoordinates)
})
this.map.on('load', () => {
console.log(arr)
this.map.addSource('maine', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': arr
}
}
})
this.map.addLayer({
'id': 'maine',
'type': 'fill',
'source': 'maine',
'layout': {
},
'paint': {
'fill-color': '#FFFFFF',
'fill-opacity': 0.5,
},
})
this.map.addLayer({
'id': 'outline',
'type': 'line',
'source': 'maine',
'layout': {
'line-join': 'round'
},
'paint': {
'line-color': '#eeeeee',
'line-width': 2
}
})
})
})
},
getRTP() {
uni.getLocation({
type: 'wgs84',
success: (res) => {
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
}
});
}
}
}
</script>
<script module="mapbox" lang="renderjs">
import appConfig from "config";
export default {
data() {
return {
map: null,
popup: null,
popup2: null,
popup6: null,
el: null,
marker: null,
marker1: null,
marker2: null,
marke6: null,
marke7: null,
}
},
mounted() {
if (typeof window.mapboxgl === 'function') {
this.$nextTick(() => {
this.initMap(1)
})
} else {
const script = document.createElement('script')
script.src = 'http://1.85.55.225:8085/YouMapServer/JavaScriptLib/mapbox-gl-cgcs2000.js';
script.onload = this.initMap.bind(this);
document.head.appendChild(script)
}
this.iocnOne()
},
methods: {
initMap(type) {
mapboxgl.accessToken =
'pk.eyJ1IjoiZmxvd2Vyd2VpIiwiYSI6ImNsYXo3NnN3MDE3ZTUzcGxpNzNncGxxdWYifQ.AWmbnSDKRxSygXxsAkMF9Q';
this.map = new mapboxgl.Map({
container: 'map-box',
style: 'http://1.85.55.225:8085/YouMapServer/rest/service/sxwwCGCS2000/VectorTileServer/styles/YXSL-225.json',
center: [109, 35.655],
projection: 'globe',
zoom: 6,
pitch: 5,
minZoom: 5,
maxZoom: 17,
})
this.map.on("load", () => {
console.log(type)
if (type == 1) {
this.getMinePoint()
} else if (type == 2) {
this.getAreaResponsibility()
} else if (type == 3) {
this.getInspectionPoint()
} else if (type == 4) {
this.show = false
this.getHiddenPointPosition()
} else if (type == 5) {
this.show = false
this.getAccidentsList();
} else if (type == 6) {
this.show = false
this.getMonitoringEquipment()
} else if (type == 7) {
this.show = false
this.getWatchEquipment()
}
});
},
}
}
</script>
813
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
