内网开发
This commit is contained in:
@@ -2,3 +2,7 @@ VUE_APP_MAP_URL='http://82.157.23.170:8600/geoserver'
|
||||
VUE_APP_MAP_AUTHKEY='9b488ac6-5309-4ef4-ab99-2180d2da161d'
|
||||
VUE_APP_API="http://work.ii999.live:19002/znzq"
|
||||
VUE_APP_STATIC_FILE_Prefix='http://43.139.191.204:8908'
|
||||
|
||||
VUE_APP_SRS_URL='webrtc://119.45.242.222/'
|
||||
|
||||
VUE_APP_IM_API_URL='https://119.45.242.222/im_api/v1'
|
||||
|
||||
@@ -2,3 +2,6 @@ VUE_APP_MAP_URL='http://172.16.2.2:8600/geoserver'
|
||||
VUE_APP_MAP_AUTHKEY='30efbafe-d218-4d77-8200-0207246924be'
|
||||
VUE_APP_API="http://172.16.2.3:19000/znzq"
|
||||
VUE_APP_STATIC_FILE_Prefix='http://43.139.191.204:8908'
|
||||
VUE_APP_SRS_URL='webrtc://172.16.3.19/'
|
||||
|
||||
VUE_APP_IM_API_URL='https://172.16.3.19/im_api/v1'
|
||||
|
||||
22
hd-glasses-app/package-lock.json
generated
22
hd-glasses-app/package-lock.json
generated
@@ -3774,6 +3774,14 @@
|
||||
"entities": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"dom7": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
|
||||
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
|
||||
"requires": {
|
||||
"ssr-window": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"domelementtype": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
|
||||
@@ -7992,6 +8000,11 @@
|
||||
"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
|
||||
"dev": true
|
||||
},
|
||||
"ssr-window": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
|
||||
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
|
||||
},
|
||||
"ssri": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
|
||||
@@ -8126,6 +8139,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"swiper": {
|
||||
"version": "5.4.5",
|
||||
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-5.4.5.tgz",
|
||||
"integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
|
||||
"requires": {
|
||||
"dom7": "^2.1.5",
|
||||
"ssr-window": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"table": {
|
||||
"version": "6.8.1",
|
||||
"resolved": "https://registry.npmmirror.com/table/-/table-6.8.1.tgz",
|
||||
|
||||
@@ -3,7 +3,9 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"local-server": "vue-cli-service serve --mode local",
|
||||
"serve": "vue-cli-service serve --mode dev",
|
||||
"prod-serve": "vue-cli-service serve --mode prod",
|
||||
"build": "vue-cli-service build --mode prod",
|
||||
"build:online": "vue-cli-service build --mode dev",
|
||||
"lint": "vue-cli-service lint"
|
||||
@@ -19,6 +21,7 @@
|
||||
"plot-ol": "^1.0.1",
|
||||
"postcss-pxtorem": "^5.1.1",
|
||||
"process": "^0.11.10",
|
||||
"swiper": "5.4.5",
|
||||
"vant": "^2.13.1",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.6.5"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<script type="text/javascript" src="./vconsole.min.js"></script>
|
||||
<script>
|
||||
var vConsole = new VConsole();
|
||||
// var vConsole = new VConsole();
|
||||
console.log('Hello world');
|
||||
</script>
|
||||
<meta charset="utf-8">
|
||||
@@ -13,7 +13,7 @@
|
||||
<link rel="stylesheet" href="./reset.css">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<script type="text/javascript" src="srs/jquery-1.12.2.min.js"></script>
|
||||
<script type="text/javascript" src="srs/adapter-7.4.0.min.js"></script>
|
||||
<script type="text/javascript" src="srs/adapter.js"></script>
|
||||
<script type="text/javascript" src="srs/srs.sdk.js"></script>
|
||||
<script type="text/javascript" src="srs/winlin.utility.js"></script>
|
||||
<script type="text/javascript" src="srs/srs.page.js"></script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@charset "utf-8";
|
||||
html{background-color:#fff;color:#000;font-size:12px,margin:0;padding:0}
|
||||
html{background-color:#fff;color:#000;font-size:12px;margin:0;padding:0}
|
||||
body,html,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
|
||||
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
|
||||
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
|
||||
|
||||
3364
hd-glasses-app/public/srs/adapter.js
Normal file
3364
hd-glasses-app/public/srs/adapter.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -68,6 +68,8 @@ function SrsRtcPublisherAsync() {
|
||||
|
||||
// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
|
||||
stream.getTracks().forEach(function (track) {
|
||||
console.log("获取到一个流")
|
||||
console.log(track.kind);
|
||||
self.pc.addTrack(track);
|
||||
|
||||
// Notify about local track when stream is ok.
|
||||
|
||||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
@@ -13,7 +13,6 @@ Vue.use(Vant);
|
||||
|
||||
import 'amfe-flexible';
|
||||
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.prototype.$utils = utils;
|
||||
|
||||
@@ -1,47 +1,136 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>call_room</h1>
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" label="文本" placeholder="请输入用户名" />
|
||||
</van-cell-group>
|
||||
<video ref="video" id="rtc_media_player" width="310" autoplay muted controls></video>
|
||||
<van-button type="primary" @click="playVideo">主要按钮</van-button>
|
||||
<div class="wrapper">
|
||||
<video ref="videoStreamtopVideo" width="100%" autoplay muted controls></video>
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<template v-for="(item,index) in videoRoomSteamList">
|
||||
<div :key="item.webrtcUrl" class="swiper-slide">
|
||||
<video class="remoteVideo" :ref="'videoStream'+item.publishId" width="100%" autoplay
|
||||
@click="videoClickAction(item.publishId)"></video>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <video ref="localVideo" id="rtc_media_local_player" width="310" autoplay muted controls></video>-->
|
||||
<!-- <van-button type="primary" @click="playVideo">主要按钮</van-button>-->
|
||||
<!-- <van-button type="primary" @click="beginPublish">开始推流</van-button>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import Swiper from 'swiper'; // 注意引入的是Swiper
|
||||
import 'swiper/css/swiper.min.css' // 注意这里的引入
|
||||
|
||||
/* eslint-disable */
|
||||
export default {
|
||||
name: "call_room",
|
||||
data() {
|
||||
return {
|
||||
value:"webrtc://119.45.242.222/live/livestream123",
|
||||
value: "webrtc://119.45.242.222/live/livestream123",
|
||||
isPublish: 0,
|
||||
isPlayer: 0,
|
||||
uid: 0,
|
||||
roomId: 0,
|
||||
roomTimer: null,
|
||||
topVideo: "",
|
||||
videoRoomSteamList: [],
|
||||
oldVideoStreamList: [],
|
||||
swiperInstance: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let player = new SrsRtcPlayerAsync();
|
||||
var url = 'webrtc://119.45.242.222/live/livestream123';
|
||||
this.isPublish = this.$route.query.isPublish;
|
||||
this.isPlayer = this.$route.query.isPlayer;
|
||||
this.uid = this.$route.query.uid;
|
||||
this.roomId = this.$route.query.room;
|
||||
this.topVideo = this.uid;
|
||||
|
||||
player.play(url).then(function(session){
|
||||
console.log(session);
|
||||
// ui.children('#peer').text('Peer: ' + url);
|
||||
// video.prop('muted', false);
|
||||
}).catch(function (reason) {
|
||||
|
||||
// player.close();
|
||||
// video.hide();
|
||||
console.error(reason);
|
||||
});
|
||||
if (this.isPublish == 1) {
|
||||
this.beginPublish()
|
||||
}
|
||||
if (this.isPlayer == 1) {
|
||||
this.roomTimer = setInterval(() => {
|
||||
this.getRoomVideoList();
|
||||
}, 2000)
|
||||
}
|
||||
this.swiperInstance = new Swiper('.swiper-container', {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 30,
|
||||
observer: true,
|
||||
on: {},
|
||||
})
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.roomTimer);
|
||||
this.roomTimer = null;
|
||||
this.leaveRoom();
|
||||
},
|
||||
methods: {
|
||||
playVideo(){
|
||||
let sdk=null;
|
||||
const video = this.$refs.video;
|
||||
video.srcObject=null;
|
||||
beginPublish() {
|
||||
let _this = this;
|
||||
//http://localhost:8080/hd-glasses-app/#/call_room?isPublish=1&isPlayer=1&uid=123&room=call_room
|
||||
|
||||
// var query = parse_query_string();
|
||||
|
||||
const publistUrl = process.env.VUE_APP_SRS_URL + this.roomId + "/" + this.uid;
|
||||
|
||||
// srs_init_rtc("#txt_url", publistUrl);
|
||||
|
||||
//初始化sdk
|
||||
let sdk = null;
|
||||
if (sdk) {
|
||||
sdk.close();
|
||||
}
|
||||
sdk = new SrsRtcPublisherAsync();
|
||||
//绑定本地视频流
|
||||
// const localVideo = this.$refs.localVideo;
|
||||
// localVideo.srcObject = null;
|
||||
// localVideo.srcObject = sdk.stream;
|
||||
|
||||
sdk.publish(publistUrl).then((session) => {
|
||||
_this.joinRoom()
|
||||
}).catch(function (reason) {
|
||||
console.error(reason)
|
||||
// Throw by sdk.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#exceptions
|
||||
if (reason instanceof DOMException) {
|
||||
if (reason.name === 'NotFoundError') {
|
||||
alert(`找不到麦克风和摄像头设备：getUserMedia ${reason.name} ${reason.message}`);
|
||||
} else if (reason.name === 'NotAllowedError') {
|
||||
alert(`你禁止了网页访问摄像头和麦克风：getUserMedia ${reason.name} ${reason.message}`);
|
||||
} else if (['AbortError', 'NotAllowedError', 'NotFoundError', 'NotReadableError', 'OverconstrainedError', 'SecurityError', 'TypeError'].includes(reason.name)) {
|
||||
alert(`getUserMedia ${reason.name} ${reason.message}`);
|
||||
}
|
||||
}
|
||||
sdk.close();
|
||||
console.error(reason);
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
playVideo(publishId = "", url = "") {
|
||||
let sdk = null;
|
||||
let video = null;
|
||||
// const _key=`${}`
|
||||
|
||||
video = eval('this.$refs.videoStream' + publishId)[0]
|
||||
|
||||
// const video = this.$refs[_key];
|
||||
if (video.srcObject != null) {
|
||||
return false;
|
||||
}
|
||||
// console.warn(video.srcObject )
|
||||
// console.warn(video.srcObject )
|
||||
// console.warn(video.srcObject )
|
||||
// console.warn(video.srcObject )
|
||||
// console.warn(video.srcObject )
|
||||
|
||||
var query = parse_query_string();
|
||||
|
||||
|
||||
srs_init_rtc("#txt_url", this.value);
|
||||
|
||||
if (sdk) {
|
||||
@@ -49,8 +138,14 @@ export default {
|
||||
}
|
||||
sdk = new SrsRtcPlayerAsync();
|
||||
|
||||
// https://webrtc.org/getting-started/remote-streams
|
||||
this.rtcSteam=sdk.stream
|
||||
if (this.topVideo == publishId) {
|
||||
const topVideo = this.$refs.videoStreamtopVideo
|
||||
topVideo.srcObject = sdk.stream;
|
||||
topVideo.onloadedmetadata = function (e) {
|
||||
topVideo.play();
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
video.srcObject = sdk.stream;
|
||||
video.onloadedmetadata = function (e) {
|
||||
@@ -62,8 +157,8 @@ export default {
|
||||
// sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
|
||||
|
||||
// For example: webrtc://r.ossrs.net/live/livestream
|
||||
var url = this.value
|
||||
sdk.play(url).then(function(session){
|
||||
// var url = this.value
|
||||
sdk.play(url).then(function (session) {
|
||||
// $('#sessionid').html(session.sessionid);
|
||||
// $('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
|
||||
}).catch(function (reason) {
|
||||
@@ -72,11 +167,126 @@ export default {
|
||||
console.error(reason);
|
||||
});
|
||||
|
||||
},
|
||||
getRoomVideoList() {
|
||||
axios({
|
||||
method: "post",
|
||||
url: process.env.VUE_APP_IM_API_URL + "/room/getRoomInfo",
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=utf-8'
|
||||
},
|
||||
// mode: 'no-cors',
|
||||
data: {
|
||||
roomId: this.roomId
|
||||
},
|
||||
}).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.generateVideoRoomStream(res.data.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
leaveRoom() {
|
||||
axios({
|
||||
method: "post",
|
||||
url: process.env.VUE_APP_IM_API_URL + "/room/leaveRoom",
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=utf-8'
|
||||
},
|
||||
data: {
|
||||
roomId: this.roomId,
|
||||
publishId: this.uid,
|
||||
type: 'webrtc'
|
||||
},
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
joinRoom() {
|
||||
axios({
|
||||
method: "post",
|
||||
url: process.env.VUE_APP_IM_API_URL + "/room/joinRoom",
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=utf-8'
|
||||
},
|
||||
// mode: 'no-cors',
|
||||
data: {
|
||||
roomId: this.roomId,
|
||||
publishId: this.uid,
|
||||
type: 'webrtc',
|
||||
webrtcUrl: process.env.VUE_APP_SRS_URL + this.roomId + "/" + this.uid
|
||||
},
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
generateVideoRoomStream(videoList) {
|
||||
let hasUpdate = false;
|
||||
if (this.oldVideoStreamList == null) {
|
||||
this.oldVideoStreamList = videoList;
|
||||
} else {
|
||||
if (JSON.stringify(this.oldVideoStreamList) != JSON.stringify(videoList)) {
|
||||
hasUpdate = true
|
||||
}
|
||||
}
|
||||
this.oldVideoStreamList = videoList;
|
||||
this.videoRoomSteamList = videoList;
|
||||
|
||||
setTimeout(() => {
|
||||
videoList.map((item) => {
|
||||
this.playVideo(item.publishId, item.webrtcUrl)
|
||||
})
|
||||
if (hasUpdate) {
|
||||
this.swiperInstance.update();
|
||||
console.log("数据有变化，更新swipper")
|
||||
//视频流有变化，检查置顶用户是否以及走掉
|
||||
this.updateTopVideoStream();
|
||||
|
||||
}
|
||||
|
||||
}, 1000)
|
||||
//videoSteamList
|
||||
},
|
||||
videoClickAction(publishId) {
|
||||
this.topVideo = publishId;
|
||||
var video = eval('this.$refs.videoStream' + publishId)[0]
|
||||
console.log(video.srcObject)
|
||||
this.$refs.videoStreamtopVideo.srcObject = video.srcObject;
|
||||
},
|
||||
//讲列表有人下线，判断top流是否正常，如果不正常则把列表第一个移到Top
|
||||
updateTopVideoStream() {
|
||||
console.log(this.$refs.videoStreamtopVideo.srcObject)
|
||||
let topVideo = this.oldVideoStreamList.find(item => item.publishId == this.topVideo)
|
||||
//如果置顶用户已经走掉，则把用户自己的视频置顶
|
||||
if (topVideo == undefined) {
|
||||
var video = eval('this.$refs.videoStream' + this.uid)[0]
|
||||
this.$refs.videoStreamtopVideo.srcObject = video.srcObject;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less">
|
||||
|
||||
.slide {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
background: #000000;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
|
||||
.remoteVideo {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,6 +8,29 @@
|
||||
<div class="mobileHomePageExpandBtn" v-if="page=='mobileHomePage'">
|
||||
<van-icon name="expand-o" color="white" @click="switchFullScreen"/>
|
||||
</div>
|
||||
<div class="iconColorList" v-if="page=='mobileHomePage'&&pageType=='large'">
|
||||
<div class="iconColorListItem"><span style="background-color: #FF0000"></span>报警点位</div>
|
||||
<div class="iconColorListItem"><span style="background-color: #369FFF"></span>在线</div>
|
||||
<div class="iconColorListItem"><span style="background-color: #9B9B9B"></span>离线</div>
|
||||
<div class="iconColorListItem"><span style="background-color: #16CE81"></span>接收报警</div>
|
||||
</div>
|
||||
<van-overlay :show="alarmDetailsOverlay" @click="alarmDetailsOverlay = false" z-index="20">
|
||||
<div class="alarmDetailsOverlayWrapper" @click.stop>
|
||||
<div class="alarmDetailsBox">
|
||||
<div class="title">{{ alarmDetailsData.title }}</div>
|
||||
<div class="alarmDetailsBoxItem"><span>报警类型:</span><span>{{ alarmDetailsData.alarmCategory_dictText }}</span>
|
||||
</div>
|
||||
<div class="alarmDetailsBoxItem"><span>报警时间:</span><span>{{ alarmDetailsData.createTime }}</span></div>
|
||||
<div class="alarmDetailsBoxItem"><span>警情内容:</span><span>{{ alarmDetailsData.msgContent }}</span></div>
|
||||
<div class="alarmDetailsBoxItem"><span>发布人:</span><span>{{ alarmDetailsData.sender }}</span></div>
|
||||
<div class="alarmDetailsBoxItem"><span>关联设备:</span><span>内容</span></div>
|
||||
</div>
|
||||
<div class="btnList">
|
||||
<div class="btnItem" @click="alarmClickAction(1)">确认</div>
|
||||
<div class="btnItem" @click="alarmClickAction(2)">导航</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-overlay>
|
||||
<!--
|
||||
<div class="pcPlanningPath" v-if="page=='pcPlanningPath'">
|
||||
<div class="pcPlanningPathNext" @click="clearPcPlanningPath">清空重新绘制</div>
|
||||
@@ -23,12 +46,14 @@ import VectorLayer from "ol/layer/Vector";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import XYZ from "ol/source/XYZ";
|
||||
import {Map, View, Feature} from "ol";
|
||||
import {Icon, Fill, Stroke, Style, Circle} from "ol/style";
|
||||
import {Icon, Fill, Stroke, Style, Circle, Text} from "ol/style";
|
||||
import Overlay from "ol/Overlay";
|
||||
import {Point, LineString} from "ol/geom.js";
|
||||
import {Point, LineString, Polygon} from "ol/geom.js";
|
||||
import {getVectorContext} from "ol/render";
|
||||
import axios from "axios";
|
||||
import TileWMS from "ol/source/TileWMS"
|
||||
import WMTS from "ol/source/WMTS"
|
||||
import TileGrid from "ol/tilegrid/TileGrid"
|
||||
import {Notify, Dialog} from 'vant';
|
||||
import * as interaction from 'ol/interaction'; // 交互
|
||||
import {OL as ol} from "plot-ol/plottingol";
|
||||
@@ -83,38 +108,100 @@ export default {
|
||||
snap: null,
|
||||
pcDrawType: "",
|
||||
equipmentLayer: {},
|
||||
alarmLayer: {}
|
||||
alarmLayer: {},
|
||||
alarmAnimation: null,
|
||||
planningTargetPoint: [],
|
||||
alarmDetailsOverlay: false,
|
||||
alarmDetailsData: {
|
||||
alarmCategory_dictText: ""
|
||||
},
|
||||
navigationStartPoint: [],
|
||||
navigationEndPoint: [],
|
||||
hd_gps_location: [],
|
||||
pageType: "",
|
||||
planningVectorLayer: {},
|
||||
parentPostMessageData: [],
|
||||
isCanDraw: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.page = this.$route.query.page;
|
||||
this.pageType = this.$route.query.type;
|
||||
|
||||
setInterval(() => {
|
||||
let hd_gps_location = localStorage.getItem("hd_gps_location")
|
||||
if (hd_gps_location) {
|
||||
hd_gps_location = hd_gps_location.split(",")
|
||||
this.hd_gps_location = hd_gps_location
|
||||
this.navigationStartPoint = this.hd_gps_location
|
||||
}
|
||||
}, 2000)
|
||||
|
||||
this.initMap();
|
||||
|
||||
|
||||
switch (this.page) {
|
||||
case "addAlarmPoint":
|
||||
console.log("新增报警点");
|
||||
//处理ok
|
||||
this.PageAddAlarmPoint()
|
||||
break
|
||||
case "pcPlanningPath":
|
||||
this.pcDrawType = "LineString";
|
||||
window.addEventListener('message', (event) => {
|
||||
this.isCanDraw = false
|
||||
if (this.parentPostMessageData.length == 0) {
|
||||
this.map.removeLayer(this.drawPlanningPathLayer);
|
||||
this.parentPostMessageData = event.data;
|
||||
this.drawPcPostMessageDataLayer()
|
||||
}
|
||||
});
|
||||
//处理ok
|
||||
this.pcPlanningPath()
|
||||
break
|
||||
case "pcDrawArea":
|
||||
this.pcDrawType = "Polygon"
|
||||
window.addEventListener('message', (event) => {
|
||||
this.isCanDraw = false
|
||||
if (this.parentPostMessageData.length == 0) {
|
||||
this.map.removeLayer(this.drawPlanningPathLayer);
|
||||
this.parentPostMessageData = event.data;
|
||||
this.drawPcPostMessageDataLayer()
|
||||
}
|
||||
});
|
||||
//处理ok
|
||||
this.pcPlanningPath();
|
||||
break
|
||||
case "planningPath":
|
||||
// http://localhost:8080/hd-glasses-app/#/hd_map?page=planningPath&alarmId=1714938284919808002
|
||||
if (this.$route.query.alarmId == null) {
|
||||
console.error("告警id不可为空")
|
||||
}
|
||||
this.getAlarmDetails(this.$route.query.alarmId)
|
||||
// this.planningPath()
|
||||
break
|
||||
case "mobileHomePage":
|
||||
// http://localhost:8080/hd-glasses-app/#/hd_map?page=mobileHomePage
|
||||
appInit(500).then((e) => {
|
||||
console.log("获取到token，开始执行后续")
|
||||
console.log(e)
|
||||
this.queryAlarmList();
|
||||
this.queryAllEquipment();
|
||||
this.getAreaList()
|
||||
setInterval(() => {
|
||||
this.queryAlarmList();
|
||||
}, 3500)
|
||||
setInterval(() => {
|
||||
this.queryAllEquipment();
|
||||
}, 5000)
|
||||
|
||||
}).then((e) => {
|
||||
console.error(e)
|
||||
})
|
||||
break
|
||||
default:
|
||||
console.log("未匹配到page参数")
|
||||
this.planningPath()
|
||||
// this.planningPath()
|
||||
// this.queryAlarmList()
|
||||
// this.queryAllEquipment()
|
||||
}
|
||||
@@ -129,7 +216,6 @@ export default {
|
||||
|
||||
showHistory() {
|
||||
var _list = [[113.94755498147583, 22.565597285534384], [113.9468468782959, 22.563151110912802], [113.9487566111145, 22.56018995216036], [113.95017281747437, 22.55748628547335]]
|
||||
console.log(_list)
|
||||
|
||||
},
|
||||
clearPointsLayers() {
|
||||
@@ -147,72 +233,63 @@ export default {
|
||||
},
|
||||
initMap() {
|
||||
|
||||
this.geometryMove = new Point(this.route.getFirstCoordinate());
|
||||
|
||||
this.featureMove = new Feature({
|
||||
type: "featureMove",
|
||||
geometry: this.geometryMove,
|
||||
});
|
||||
|
||||
console.log(this.route)
|
||||
|
||||
this.vectorLayer = new VectorLayer({
|
||||
source: new VectorSource({
|
||||
features: [
|
||||
new Feature({
|
||||
type: "route",
|
||||
geometry: this.route,
|
||||
}),
|
||||
this.featureMove,
|
||||
new Feature({
|
||||
type: "icon",
|
||||
geometry: new Point(this.route.getFirstCoordinate()),
|
||||
}),
|
||||
new Feature({
|
||||
type: "icon",
|
||||
geometry: new Point(this.route.getLastCoordinate()),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
style: (feature) => {
|
||||
return this.styles[feature.get("type")];
|
||||
},
|
||||
});
|
||||
|
||||
const wmsLayer = new TileLayer({
|
||||
const wmsLayer_0 = new TileLayer({
|
||||
source: new TileWMS({
|
||||
// 设置 Geoserver 服务的 URL
|
||||
url: process.env.VUE_APP_MAP_URL + "/wms",
|
||||
// 设置请求参数
|
||||
params: {
|
||||
// 指定要获取的图层名称
|
||||
LAYERS: "china:yangjianghedian",
|
||||
// 设置为平铺模式获取
|
||||
TILED: true
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
const wmsLayer_1 = new TileLayer({
|
||||
source: new TileWMS({
|
||||
// 设置 Geoserver 服务的 URL
|
||||
url: process.env.VUE_APP_MAP_URL + "/wms",
|
||||
params: {
|
||||
LAYERS: "china:yangjianghedian_dt",
|
||||
TILED: true
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
this.map = new Map({
|
||||
target: "map",
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new XYZ({
|
||||
url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
|
||||
}),
|
||||
}),
|
||||
wmsLayer
|
||||
// new TileLayer({
|
||||
// source: new XYZ({
|
||||
// url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
|
||||
// }),
|
||||
// }),
|
||||
wmsLayer_1,
|
||||
wmsLayer_0,
|
||||
],
|
||||
|
||||
view: new View({
|
||||
projection: "EPSG:4326",
|
||||
center: [112.26173, 21.70896],
|
||||
projection: "EPSG:3857",
|
||||
center: [12497018.585823221, 2476783.2447665134],
|
||||
zoom: 15,
|
||||
}),
|
||||
});
|
||||
this.map.on('singleclick', e => {
|
||||
this.map.forEachFeatureAtPixel(
|
||||
e.pixel,
|
||||
(feature) => {
|
||||
console.log("Feature被点击了")
|
||||
console.log(feature)
|
||||
if (feature.values_.type == 'alarm') {
|
||||
this.alarmDetailsData = feature.values_.data;
|
||||
this.alarmDetailsOverlay = true;
|
||||
}
|
||||
},
|
||||
{
|
||||
hitTolerance: 30
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// this.map.addLayer(this.vectorLayer);
|
||||
},
|
||||
/**
|
||||
* 点击地图添加摄像头要素
|
||||
@@ -227,6 +304,13 @@ export default {
|
||||
},
|
||||
planningPath() {
|
||||
|
||||
const startPoint = ol.proj.transform(this.navigationStartPoint, 'EPSG:4326', 'EPSG:3857');
|
||||
const endPoint = ol.proj.transform(this.navigationEndPoint, 'EPSG:4326', 'EPSG:3857');
|
||||
console.log(startPoint)
|
||||
console.log(endPoint)
|
||||
|
||||
const _points = `${startPoint[0]}#${startPoint[1]}@${endPoint[0]}#${endPoint[1]}`
|
||||
|
||||
axios({
|
||||
method: "post",
|
||||
url: process.env.VUE_APP_MAP_URL + "/wfs?authkey=" + process.env.VUE_APP_MAP_AUTHKEY,
|
||||
@@ -235,13 +319,13 @@ export default {
|
||||
},
|
||||
data: `<GetFeature xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0"
|
||||
outputFormat="application/json"
|
||||
viewParams="points:12496603.063359383#2476576.2207514597@12497163.153583003#2477213.6636166913@12497590.025377853#2477169.2574819643@12497545.869867127#2477020.727166339@12496603.063359383#2476576.2207514597"
|
||||
viewParams="points:${_points}"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
|
||||
<Query typeName="china:planning-path" xmlns:china="www.shgis.com"/>
|
||||
</GetFeature>`,
|
||||
}).then(res => {
|
||||
// console.log(res.data.features)
|
||||
// console.log("================================获取到了导航结果")
|
||||
|
||||
let pathList = [];
|
||||
res.data.features.map((item, index) => {
|
||||
@@ -250,8 +334,6 @@ export default {
|
||||
// console.log(item.geometry.coordinates[0])
|
||||
// console.log(item.geometry.coordinates[0])
|
||||
})
|
||||
|
||||
|
||||
const route = new LineString(pathList)
|
||||
|
||||
const geometryMove = new Point(route.getFirstCoordinate());
|
||||
@@ -260,8 +342,10 @@ export default {
|
||||
type: "featureMove",
|
||||
geometry: geometryMove,
|
||||
});
|
||||
|
||||
const vectorLayer = new VectorLayer({
|
||||
this.planningVectorLayer.set('id', 'planningVectorLayer');
|
||||
//先清空 再清除
|
||||
this.map.removeLayer(this.planningVectorLayer)
|
||||
this.planningVectorLayer = new VectorLayer({
|
||||
source: new VectorSource({
|
||||
features: [
|
||||
new Feature({
|
||||
@@ -284,18 +368,15 @@ export default {
|
||||
},
|
||||
});
|
||||
|
||||
console.log(route.getFirstCoordinate())
|
||||
console.log(route.getLastCoordinate())
|
||||
this.map.addLayer(vectorLayer)
|
||||
this.map.addLayer(this.planningVectorLayer)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 根据经纬度坐标添加摄像头要素
|
||||
*/
|
||||
addPoints(coordinate) {
|
||||
console.log(coordinate)
|
||||
if (this.selectPoint.length > 0) {
|
||||
|
||||
if (this.selectPoint.length > 0) {
|
||||
this.coordinate = []
|
||||
this.map.removeLayer(this.pointLayer);
|
||||
this.pointLayer = {};
|
||||
@@ -307,8 +388,15 @@ export default {
|
||||
// 图层添加到地图上
|
||||
this.map.addLayer(this.pointLayer);
|
||||
}
|
||||
|
||||
} else {
|
||||
// 创建图层
|
||||
this.pointLayer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
});
|
||||
// 图层添加到地图上
|
||||
this.map.addLayer(this.pointLayer);
|
||||
}
|
||||
|
||||
this.selectPoint = coordinate;
|
||||
this.coordinate = coordinate;
|
||||
|
||||
@@ -380,13 +468,15 @@ export default {
|
||||
if (this.selectPoint.length == 0) {
|
||||
Dialog({message: '请先选择点位'});
|
||||
}
|
||||
const result = JSON.stringify(this.selectPoint)
|
||||
// 上传之前将3857转4326
|
||||
const center = ol.proj.transform(this.selectPoint, 'EPSG:3857', 'EPSG:4326');
|
||||
console.log("================center: " + JSON.stringify(center))
|
||||
const result = JSON.stringify(center)
|
||||
location.href = "uniwebview://action?function=addAlarmPoint¶ms1=" + result;
|
||||
},
|
||||
pcPlanningPath() {
|
||||
//https://blog.csdn.net/Raccon_/article/details/127491268
|
||||
|
||||
console.log("pcPlanningPath")
|
||||
// const interaction = this.map
|
||||
// .getInteractions()
|
||||
// .getArray()
|
||||
@@ -438,17 +528,28 @@ export default {
|
||||
this.map.addInteraction(this.snap);
|
||||
|
||||
this.draw.on('drawend', (e) => {
|
||||
if (!this.isCanDraw) {
|
||||
return;
|
||||
}
|
||||
|
||||
Dialog.confirm({
|
||||
title: '绘制完成',
|
||||
message: '取消则会重新绘制',
|
||||
})
|
||||
.then(() => {
|
||||
// on confirm
|
||||
console.log(this.drawPlanningPathLayer.getSource().getFeatures())
|
||||
const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(e.feature))
|
||||
console.log(featureGeoJson.geometry.coordinates)
|
||||
|
||||
window.parent.postMessage(JSON.stringify(featureGeoJson.geometry.coordinates), "*");
|
||||
// on confirm
|
||||
const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(e.feature))
|
||||
|
||||
let pointList = []
|
||||
|
||||
featureGeoJson.geometry.coordinates.map(item => {
|
||||
const _item = ol.proj.transform(item, 'EPSG:3857', 'EPSG:4326');
|
||||
pointList.push(_item)
|
||||
})
|
||||
console.log(pointList)
|
||||
|
||||
window.parent.postMessage(JSON.stringify(pointList), "*");
|
||||
|
||||
})
|
||||
.catch(() => {
|
||||
@@ -472,19 +573,22 @@ export default {
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
this.map.removeLayer(this.equipmentLayer)
|
||||
this.equipmentLayer = {};
|
||||
res.data.result.records.map(record => {
|
||||
try {
|
||||
if (record.leastLocation!=null) {
|
||||
this.addPointWidthCoordinate(record.leastLocation, "equipment")
|
||||
if (record.leastLocation != null) {
|
||||
this.addPointWidthCoordinate(record.leastLocation, "equipment", record)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
console.log(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
queryAlarmList() {
|
||||
|
||||
service.get(`/api/alarm/list`, {
|
||||
params: {
|
||||
sendStatus: 1,
|
||||
@@ -493,10 +597,15 @@ export default {
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
clearInterval(this.alarmAnimation)
|
||||
this.alarmAnimation = null
|
||||
this.map.removeLayer(this.alarmLayer)
|
||||
this.alarmLayer = {};
|
||||
res.data.result.records.map(record => {
|
||||
|
||||
try {
|
||||
if (record.location!=null) {
|
||||
this.addPointWidthCoordinate(record.location, "alarm")
|
||||
if (record.location != null) {
|
||||
this.addPointWidthCoordinate(record.location, "alarm", record)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
@@ -509,10 +618,15 @@ export default {
|
||||
switchFullScreen() {
|
||||
location.href = "uniwebview://action?function=switchBigScreen"
|
||||
},
|
||||
addPointWidthCoordinate(coordinate, type) {
|
||||
coordinate=coordinate.split(",")
|
||||
if(type=='alarm'){
|
||||
console.log("addPointWidthCoordinate", type, coordinate)
|
||||
addPointWidthCoordinate(coordinate, type, record) {
|
||||
|
||||
coordinate = coordinate.split(",")
|
||||
|
||||
coordinate = ol.proj.transform(coordinate, 'EPSG:4326', 'EPSG:3857');
|
||||
|
||||
// console.log("================addPointWidthCoordinate",coordinate)
|
||||
|
||||
if (type == 'alarm') {
|
||||
if (Object.keys(this.alarmLayer).length == 0) {
|
||||
// 创建图层
|
||||
this.alarmLayer = new VectorLayer({
|
||||
@@ -520,15 +634,17 @@ export default {
|
||||
});
|
||||
// 图层添加到地图上
|
||||
this.map.addLayer(this.alarmLayer);
|
||||
var flag=true
|
||||
var animation=setInterval(() => {
|
||||
flag=!flag
|
||||
var flag = true
|
||||
this.alarmAnimation = setInterval(() => {
|
||||
flag = !flag
|
||||
this.alarmLayer.setVisible(flag)
|
||||
}, 300);
|
||||
}, 900);
|
||||
}
|
||||
|
||||
const feature = new Feature({
|
||||
geometry: new Point(coordinate),
|
||||
data: record,
|
||||
type: 'alarm'
|
||||
});
|
||||
// 设置要素的图标
|
||||
feature.setStyle(
|
||||
@@ -545,8 +661,7 @@ export default {
|
||||
this.alarmLayer.getSource().addFeature(feature);
|
||||
|
||||
}
|
||||
if(type=='equipment'){
|
||||
console.log("addPointWidthCoordinate", type, coordinate)
|
||||
if (type == 'equipment') {
|
||||
if (Object.keys(this.equipmentLayer).length == 0) {
|
||||
// 创建图层
|
||||
this.equipmentLayer = new VectorLayer({
|
||||
@@ -555,32 +670,206 @@ export default {
|
||||
// 图层添加到地图上
|
||||
this.map.addLayer(this.equipmentLayer);
|
||||
}
|
||||
|
||||
const feature = new Feature({
|
||||
geometry: new Point(coordinate),
|
||||
});
|
||||
// 设置要素的图标
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
// 设置图片效果
|
||||
image: new Icon({
|
||||
src: getStatisFileUrl("/map/icon_paishuibeng_h_2.png"),
|
||||
// anchor: [0.5, 0.5],
|
||||
scale: 0.4,
|
||||
}),
|
||||
})
|
||||
);
|
||||
// 要素添加到地图图层上
|
||||
|
||||
this.equipmentLayer.getSource().addFeature(feature);
|
||||
if (record.isOnline == "true") {
|
||||
const feature = new Feature({
|
||||
geometry: new Point(coordinate),
|
||||
data: record,
|
||||
type: 'equipment'
|
||||
});
|
||||
// 设置要素的图标
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
// 设置图片效果
|
||||
image: new Icon({
|
||||
src: getStatisFileUrl("/map/Group_29@2x.png"),
|
||||
// anchor: [0.5, 0.5],
|
||||
scale: 0.4,
|
||||
}),
|
||||
})
|
||||
);
|
||||
// 要素添加到地图图层上
|
||||
this.equipmentLayer.getSource().addFeature(feature);
|
||||
}
|
||||
if (record.isOnline == "false") {
|
||||
const feature = new Feature({
|
||||
geometry: new Point(coordinate),
|
||||
data: record,
|
||||
type: 'equipment'
|
||||
});
|
||||
// 设置要素的图标
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
// 设置图片效果
|
||||
image: new Icon({
|
||||
src: getStatisFileUrl("/map/Group_30@2x.png"),
|
||||
// anchor: [0.5, 0.5],
|
||||
scale: 0.4,
|
||||
}),
|
||||
})
|
||||
);
|
||||
// 要素添加到地图图层上
|
||||
this.equipmentLayer.getSource().addFeature(feature);
|
||||
}
|
||||
if (record.isAlarm == false) {
|
||||
const feature = new Feature({
|
||||
geometry: new Point(coordinate),
|
||||
data: record,
|
||||
type: 'equipment'
|
||||
});
|
||||
// 设置要素的图标
|
||||
feature.setStyle(
|
||||
new Style({
|
||||
// 设置图片效果
|
||||
image: new Icon({
|
||||
src: getStatisFileUrl("/map/Group_190514@2x.png"),
|
||||
// anchor: [0.5, 0.5],
|
||||
scale: 0.4,
|
||||
}),
|
||||
})
|
||||
);
|
||||
feature.on("click", (event) => {
|
||||
console.log("告警图标被点击")
|
||||
console.log(event)
|
||||
})
|
||||
// 要素添加到地图图层上
|
||||
this.equipmentLayer.getSource().addFeature(feature);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
alarmClickAction(index) {
|
||||
if (index == 1) {
|
||||
location.href = "uniwebview://action?function=alarmConfirmAction¶ms1=" + this.alarmDetailsData.id;
|
||||
}
|
||||
if (index == 2) {
|
||||
location.href = "uniwebview://action?function=alarmPlanningAction¶ms1=" + this.alarmDetailsData.id + "¶ms2=" + this.alarmDetailsData.location;
|
||||
}
|
||||
},
|
||||
getAlarmDetails(id) {
|
||||
service.get(`/api/alarm/queryById`, {
|
||||
params: {
|
||||
id: id
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
console.log(res.data.result)
|
||||
this.navigationEndPoint = res.data.result.location.split(",")
|
||||
this.addPointWidthCoordinate(res.data.result.location, "alarm", res.data.result)
|
||||
setInterval(() => {
|
||||
this.planningPath()
|
||||
}, 2000)
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
},
|
||||
drawPcPostMessageDataLayer() {
|
||||
const tempGeometryList = []
|
||||
|
||||
this.parentPostMessageData.map(item => {
|
||||
tempGeometryList.push(ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857'))
|
||||
})
|
||||
|
||||
const polygonGeometry = new LineString(tempGeometryList)
|
||||
const polygonFeature = new Feature({
|
||||
geometry: polygonGeometry
|
||||
})
|
||||
polygonFeature.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
color: '#ffa502',
|
||||
width: 2
|
||||
}),
|
||||
fill: new Fill({
|
||||
color: '#ffffff00'
|
||||
})
|
||||
}))
|
||||
this.drawPlanningPathLayer.getSource().addFeature(polygonFeature)
|
||||
this.map.addLayer(this.drawPlanningPathLayer)
|
||||
},
|
||||
removeMapLayerById(id) {
|
||||
this.map.getLayers().forEach(function (layer) {
|
||||
if (layer instanceof ol.layer.Tile && layer.get('id') === id) {
|
||||
this.map.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
},
|
||||
getAreaList() {
|
||||
let vectorSource = new VectorSource();
|
||||
// 矢量地图
|
||||
this.drawPlanningPathLayer = new VectorLayer({
|
||||
source: vectorSource,
|
||||
style: new Style({
|
||||
stroke: new Stroke({
|
||||
width: 6,
|
||||
color: [237, 212, 0, 0.8],
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
this.map.addLayer(this.drawPlanningPathLayer);
|
||||
|
||||
service.get(`/api/patrol/area/list`, {
|
||||
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
console.log(res.data.result.records)
|
||||
res.data.result.records.map((record) =>{
|
||||
console.log(record)
|
||||
this.drawAreaLayer(record.areaName,JSON.parse(record.area))
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
},
|
||||
drawAreaLayer(title,areaList) {
|
||||
console.log(title)
|
||||
areaList=areaList[0]
|
||||
console.log(areaList)
|
||||
|
||||
const tempGeometryList = []
|
||||
|
||||
areaList.map(item => {
|
||||
tempGeometryList.push(ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857'))
|
||||
})
|
||||
|
||||
tempGeometryList.push(tempGeometryList[0])
|
||||
|
||||
const _list=[tempGeometryList]
|
||||
|
||||
console.log(_list)
|
||||
|
||||
const polygonGeometry = new Polygon(_list)
|
||||
|
||||
console.log(polygonGeometry)
|
||||
|
||||
const polygonFeature = new Feature({
|
||||
geometry: polygonGeometry,
|
||||
name:title
|
||||
})
|
||||
|
||||
polygonFeature.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
color: '#ffa502',
|
||||
width: 2
|
||||
}),
|
||||
fill: new Fill({
|
||||
color: 'rgba(255,255,0,0.1)'
|
||||
}),
|
||||
text: new Text({
|
||||
testAlign:'center',
|
||||
text:title,
|
||||
font:'bold 20px 微软雅黑',
|
||||
fill:new Fill({
|
||||
color: '#ffa502',
|
||||
})
|
||||
})
|
||||
}))
|
||||
this.drawPlanningPathLayer.getSource().addFeature(polygonFeature)
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -667,4 +956,80 @@ export default {
|
||||
right: 30px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.iconColorList {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 30px;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
|
||||
.iconColorListItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 20px;
|
||||
margin-right: 20px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.alarmDetailsOverlayWrapper {
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
font-size: 14px;
|
||||
padding-top: 50px;
|
||||
|
||||
.alarmDetailsBox {
|
||||
margin-left: 20px;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
font-weight: 900;
|
||||
font-size: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.alarmDetailsBoxItem {
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.btnList {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
||||
.btnItem {
|
||||
background-color: #369FFF;
|
||||
border-radius: 10px;
|
||||
width: 40%;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
1034
hd-glasses-app/src/pages/hd_map_area.vue
Normal file
1034
hd-glasses-app/src/pages/hd_map_area.vue
Normal file
File diff suppressed because it is too large
Load Diff
1035
hd-glasses-app/src/pages/hd_show_patrol_history.vue
Normal file
1035
hd-glasses-app/src/pages/hd_show_patrol_history.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -24,6 +24,14 @@ const router = new Router({
|
||||
path: '/hd_map',
|
||||
name: 'hd_map',
|
||||
component: () => import('../pages/hd_map.vue')
|
||||
},{
|
||||
path: '/hd_map_area',
|
||||
name: 'hd_map_area',
|
||||
component: () => import('../pages/hd_map_area.vue')
|
||||
},{
|
||||
path: '/hd_show_patrol_history',
|
||||
name: 'hd_show_patrol_history',
|
||||
component: () => import('../pages/hd_show_patrol_history.vue')
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
@@ -27,11 +27,13 @@ export function appInit(ms) {
|
||||
var i = 0;
|
||||
let timer = setInterval(() => {
|
||||
var hd_token = localStorage.getItem("hd_token")
|
||||
// var im_userId = localStorage.getItem("im_userId")
|
||||
i = i + 1;
|
||||
if (i > 10) {
|
||||
reject("error")
|
||||
}
|
||||
if (hd_token) {
|
||||
localStorage.setItem("token", hd_token)
|
||||
clearInterval(timer)
|
||||
timer = null
|
||||
resolve("ok")
|
||||
|
||||
Reference in New Issue
Block a user