备份
This commit is contained in:
@@ -1,8 +1,9 @@
|
||||
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_STATIC_FILE_Prefix='https://119.45.242.222/static_file/'
|
||||
|
||||
VUE_APP_SRS_URL='webrtc://119.45.242.222/'
|
||||
|
||||
VUE_APP_IM_API_URL='https://119.45.242.222/im_api/v1'
|
||||
VUE_APP_IM_API_URL='https://dev.shudong.xyz/im_api/v1'
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
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_STATIC_FILE_Prefix='https://172.16.3.19/static_file'
|
||||
VUE_APP_SRS_URL='webrtc://172.16.3.19/'
|
||||
|
||||
VUE_APP_IM_API_URL='https://172.16.3.19/im_api/v1'
|
||||
|
||||
5
hd-glasses-app/package-lock.json
generated
5
hd-glasses-app/package-lock.json
generated
@@ -3538,6 +3538,11 @@
|
||||
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
|
||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||
},
|
||||
"dayjs": {
|
||||
"version": "1.11.10",
|
||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
|
||||
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
||||
},
|
||||
"de-indent": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz",
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
"amfe-flexible": "^2.2.1",
|
||||
"axios": "^1.5.1",
|
||||
"core-js": "^3.8.3",
|
||||
"dayjs": "^1.11.10",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^11.1.3",
|
||||
"lib-flexible": "^0.3.2",
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
/**
|
||||
* The MIT License (MIT)
|
||||
*
|
||||
@@ -29,14 +28,66 @@
|
||||
function SrsRtcPublisherAsync() {
|
||||
var self = {};
|
||||
|
||||
self.cameraIndex=0
|
||||
|
||||
self.cameraDevices = []
|
||||
|
||||
self.url=""
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
|
||||
self.constraints = {
|
||||
audio: true,
|
||||
video: {
|
||||
deviceId:{
|
||||
exact:"136e115ef37b7ec8361207a61d42cd39818381aa0e99728e35eb9746bedce6b4"
|
||||
},
|
||||
width: {ideal: 320, max: 576}
|
||||
}
|
||||
};
|
||||
|
||||
self.initDevices = async function () {
|
||||
// await navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
|
||||
}
|
||||
|
||||
function gotDevices(deviceInfos) {
|
||||
let option = {}
|
||||
// Handles being called several times to update labels. Preserve values.
|
||||
for (let i = 0; i !== deviceInfos.length; ++i) {
|
||||
const deviceInfo = deviceInfos[i];
|
||||
const option = document.createElement('option');
|
||||
option.value = deviceInfo.deviceId;
|
||||
if (deviceInfo.kind === 'audioinput') {
|
||||
console.log(option)
|
||||
console.log(deviceInfo)
|
||||
} else if (deviceInfo.kind === 'audiooutput') {
|
||||
console.log(option)
|
||||
console.log(deviceInfo)
|
||||
} else if (deviceInfo.kind === 'videoinput') {
|
||||
self.cameraDevices.push(deviceInfo)
|
||||
} else {
|
||||
console.log('Some other kind of source/device: ', deviceInfo);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleError(error) {
|
||||
console.log('navigator.getUserMedia error: ', error);
|
||||
}
|
||||
|
||||
self.changeCamera = async function(){
|
||||
// console.log('navigator.getUserMedia')
|
||||
// console.log(self.cameraDevices)
|
||||
self.cameraIndex=self.cameraIndex+1==self.cameraDevices.length?0:self.cameraIndex+1
|
||||
let deviceId={
|
||||
exact:""
|
||||
}
|
||||
deviceId.exact=self.cameraDevices[self.cameraIndex].deviceId
|
||||
self.constraints.video.deviceId=deviceId
|
||||
|
||||
self.publish(self.url)
|
||||
|
||||
console.log(self.constraints)
|
||||
}
|
||||
// @see https://github.com/rtcdn/rtcdn-draft
|
||||
// @url The WebRTC url to play with, for example:
|
||||
// webrtc://r.ossrs.net/live/livestream
|
||||
@@ -59,12 +110,17 @@ function SrsRtcPublisherAsync() {
|
||||
// or any other information, will pass-by in the query:
|
||||
// webrtc://r.ossrs.net/live/livestream?vhost=xxx
|
||||
// webrtc://r.ossrs.net/live/livestream?token=xxx
|
||||
self.publish = async function (url) {
|
||||
self.publish = async function (url,constraints={}) {
|
||||
|
||||
self.url=url;
|
||||
|
||||
var conf = self.__internal.prepareUrl(url);
|
||||
self.pc.addTransceiver("audio", {direction: "sendonly"});
|
||||
self.pc.addTransceiver("video", {direction: "sendonly"});
|
||||
|
||||
var stream = await navigator.mediaDevices.getUserMedia(self.constraints);
|
||||
|
||||
|
||||
var stream = await navigator.mediaDevices.getUserMedia(constraints);
|
||||
|
||||
// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
|
||||
stream.getTracks().forEach(function (track) {
|
||||
@@ -156,7 +212,7 @@ function SrsRtcPublisherAsync() {
|
||||
|
||||
return {
|
||||
apiUrl: apiUrl, streamUrl: streamUrl, schema: schema, urlObject: urlObject, port: port,
|
||||
tid: Number(parseInt(new Date().getTime()*Math.random()*100)).toString(16).slice(0, 7)
|
||||
tid: Number(parseInt(new Date().getTime() * Math.random() * 100)).toString(16).slice(0, 7)
|
||||
};
|
||||
},
|
||||
parse: function (url) {
|
||||
@@ -300,14 +356,14 @@ function SrsRtcPlayerAsync() {
|
||||
// or any other information, will pass-by in the query:
|
||||
// webrtc://r.ossrs.net/live/livestream?vhost=xxx
|
||||
// webrtc://r.ossrs.net/live/livestream?token=xxx
|
||||
self.play = async function(url) {
|
||||
self.play = async function (url) {
|
||||
var conf = self.__internal.prepareUrl(url);
|
||||
self.pc.addTransceiver("audio", {direction: "recvonly"});
|
||||
self.pc.addTransceiver("video", {direction: "recvonly"});
|
||||
|
||||
var offer = await self.pc.createOffer();
|
||||
await self.pc.setLocalDescription(offer);
|
||||
var session = await new Promise(function(resolve, reject) {
|
||||
var session = await new Promise(function (resolve, reject) {
|
||||
// @see https://github.com/rtcdn/rtcdn-draft
|
||||
var data = {
|
||||
api: conf.apiUrl, tid: conf.tid, streamurl: conf.streamUrl,
|
||||
@@ -317,15 +373,16 @@ function SrsRtcPlayerAsync() {
|
||||
|
||||
$.ajax({
|
||||
type: "POST", url: conf.apiUrl, data: JSON.stringify(data),
|
||||
contentType:'application/json', dataType: 'json'
|
||||
}).done(function(data) {
|
||||
contentType: 'application/json', dataType: 'json'
|
||||
}).done(function (data) {
|
||||
console.log("Got answer: ", data);
|
||||
if (data.code) {
|
||||
reject(data); return;
|
||||
reject(data);
|
||||
return;
|
||||
}
|
||||
|
||||
resolve(data);
|
||||
}).fail(function(reason){
|
||||
}).fail(function (reason) {
|
||||
reject(reason);
|
||||
});
|
||||
});
|
||||
@@ -337,7 +394,7 @@ function SrsRtcPlayerAsync() {
|
||||
};
|
||||
|
||||
// Close the player.
|
||||
self.close = function() {
|
||||
self.close = function () {
|
||||
self.pc && self.pc.close();
|
||||
self.pc = null;
|
||||
};
|
||||
@@ -383,7 +440,7 @@ function SrsRtcPlayerAsync() {
|
||||
|
||||
return {
|
||||
apiUrl: apiUrl, streamUrl: streamUrl, schema: schema, urlObject: urlObject, port: port,
|
||||
tid: Number(parseInt(new Date().getTime()*Math.random()*100)).toString(16).slice(0, 7)
|
||||
tid: Number(parseInt(new Date().getTime() * Math.random() * 100)).toString(16).slice(0, 7)
|
||||
};
|
||||
},
|
||||
parse: function (url) {
|
||||
@@ -496,7 +553,7 @@ function SrsRtcPlayerAsync() {
|
||||
self.stream = new MediaStream();
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack
|
||||
self.pc.ontrack = function(event) {
|
||||
self.pc.ontrack = function (event) {
|
||||
if (self.ontrack) {
|
||||
self.ontrack(event);
|
||||
}
|
||||
@@ -511,7 +568,7 @@ function SrsRtcFormatSenders(senders, kind) {
|
||||
var codecs = [];
|
||||
senders.forEach(function (sender) {
|
||||
var params = sender.getParameters();
|
||||
params && params.codecs && params.codecs.forEach(function(c) {
|
||||
params && params.codecs && params.codecs.forEach(function (c) {
|
||||
if (kind && sender.track.kind !== kind) {
|
||||
return;
|
||||
}
|
||||
|
||||
BIN
hd-glasses-app/src/assets/media/call_down.png
Normal file
BIN
hd-glasses-app/src/assets/media/call_down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
hd-glasses-app/src/assets/media/camera_close.png
Normal file
BIN
hd-glasses-app/src/assets/media/camera_close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 812 B |
BIN
hd-glasses-app/src/assets/media/camera_open.png
Normal file
BIN
hd-glasses-app/src/assets/media/camera_open.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 598 B |
BIN
hd-glasses-app/src/assets/media/mute-fill.png
Normal file
BIN
hd-glasses-app/src/assets/media/mute-fill.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
hd-glasses-app/src/assets/media/sound-fill.png
Normal file
BIN
hd-glasses-app/src/assets/media/sound-fill.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
hd-glasses-app/src/assets/media/switch.png
Normal file
BIN
hd-glasses-app/src/assets/media/switch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
hd-glasses-app/src/assets/media/voice_close.png
Normal file
BIN
hd-glasses-app/src/assets/media/voice_close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
hd-glasses-app/src/assets/media/voice_open.png
Normal file
BIN
hd-glasses-app/src/assets/media/voice_open.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -1,17 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="videoRoomContainer">
|
||||
<div class="wrapper">
|
||||
<video ref="videoStreamtopVideo" width="100%" autoplay muted controls></video>
|
||||
<video ref="videoStreamtopVideo" width="100%" autoplay></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>
|
||||
<video class="remoteVideo" :ref="'videoStream'+item.publishId" width="100%" autoplay @click="videoClickAction(item.publishId)"></video>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actionBtnList">
|
||||
<div @click="closeVoice">
|
||||
<div class="actionBtn">
|
||||
<img :src="voiceImg">
|
||||
</div>
|
||||
</div>
|
||||
<div @click="closeCamera">
|
||||
<div class="actionBtn">
|
||||
<img :src="cameraImg">
|
||||
</div>
|
||||
</div>
|
||||
<div @click="switchCamera">
|
||||
<div class="actionBtn">
|
||||
<img :src="switchCameraImg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="callDownBox">
|
||||
<div @click="videoDownAction">
|
||||
<img :src="callDwonImg">
|
||||
</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>-->
|
||||
@@ -23,6 +44,9 @@
|
||||
import axios from "axios";
|
||||
import Swiper from 'swiper'; // 注意引入的是Swiper
|
||||
import 'swiper/css/swiper.min.css' // 注意这里的引入
|
||||
import {Notify, Dialog} from 'vant';
|
||||
|
||||
import {getStatisFileUrl} from '../utils/publicFun'
|
||||
|
||||
/* eslint-disable */
|
||||
export default {
|
||||
@@ -39,6 +63,27 @@ export default {
|
||||
videoRoomSteamList: [],
|
||||
oldVideoStreamList: [],
|
||||
swiperInstance: null,
|
||||
publishSdk: null,
|
||||
publistUrl: "",
|
||||
constraints: {
|
||||
audio: true,
|
||||
video: {
|
||||
// deviceId: {
|
||||
// exact: "136e115ef37b7ec8361207a61d42cd39818381aa0e99728e35eb9746bedce6b4"
|
||||
// },
|
||||
width: {ideal: 320, max: 576}
|
||||
}
|
||||
},
|
||||
cameraDevices: [],
|
||||
cameraIndex: 0,
|
||||
isCloseCamera: false,
|
||||
isCloseVoice: false,
|
||||
voiceImg: "",
|
||||
cameraImg: "",
|
||||
switchCameraImg: "",
|
||||
callDwonImg: "",
|
||||
showConfirmDialog:0,
|
||||
inviteName:0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -46,30 +91,126 @@ export default {
|
||||
this.isPlayer = this.$route.query.isPlayer;
|
||||
this.uid = this.$route.query.uid;
|
||||
this.roomId = this.$route.query.room;
|
||||
this.inviteName = this.$route.query.inviteName||'';
|
||||
this.topVideo = this.uid;
|
||||
this.showConfirmDialog = this.$route.query.showConfirmDialog;
|
||||
|
||||
if (this.isPublish == 1) {
|
||||
this.beginPublish()
|
||||
|
||||
this.voiceImg = getStatisFileUrl("/media/voice_open.png")
|
||||
this.cameraImg = getStatisFileUrl("/media/camera_open.png")
|
||||
this.switchCameraImg = getStatisFileUrl("/media/switch.png")
|
||||
this.callDwonImg = getStatisFileUrl("/media/call_down.png")
|
||||
|
||||
if(this.showConfirmDialog==1){
|
||||
Dialog.confirm({
|
||||
title: '是否接受？',
|
||||
message: `${this.inviteName}邀请你加入视频聊天`,
|
||||
})
|
||||
.then(() => {
|
||||
this.init();
|
||||
// on confirm
|
||||
})
|
||||
.catch(() => {
|
||||
location.href = "uniwebview://action?function=refuseVideoInvite";
|
||||
// on cancel
|
||||
});
|
||||
}else {
|
||||
this.init();
|
||||
}
|
||||
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: {
|
||||
init(){
|
||||
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: {},
|
||||
})
|
||||
},
|
||||
closeVoice() {
|
||||
this.constraints.audio = false;
|
||||
//如果声音是开启状态
|
||||
if (!this.isCloseVoice) {
|
||||
// 关闭声音
|
||||
this.isCloseVoice=true
|
||||
this.voiceImg = getStatisFileUrl("/media/voice_close.png")
|
||||
}else {
|
||||
// 打开声音
|
||||
this.isCloseVoice=false;
|
||||
this.constraints.audio = true
|
||||
this.voiceImg = getStatisFileUrl("/media/voice_open.png")
|
||||
}
|
||||
console.log(this.isCloseVoice)
|
||||
console.log(this.voiceImg)
|
||||
this.beginPublish()
|
||||
},
|
||||
closeCamera() {
|
||||
this.constraints.video = false;
|
||||
//如果视频是开启状态
|
||||
if (!this.isCloseCamera) {
|
||||
this.constraints.video=false
|
||||
this.isCloseCamera=true
|
||||
this.cameraImg = getStatisFileUrl("/media/camera_close.png")
|
||||
}else {
|
||||
let deviceId = {
|
||||
exact: ""
|
||||
}
|
||||
deviceId.exact = this.cameraDevices[this.cameraIndex].deviceId
|
||||
this.constraints.video = {}
|
||||
this.constraints.video.deviceId = deviceId
|
||||
this.isCloseCamera=false
|
||||
this.cameraImg = getStatisFileUrl("/media/camera_open.png")
|
||||
}
|
||||
this.beginPublish()
|
||||
},
|
||||
switchCamera() {
|
||||
let self = this;
|
||||
self.cameraIndex = self.cameraIndex + 1 == self.cameraDevices.length ? 0 : self.cameraIndex + 1
|
||||
let deviceId = {
|
||||
exact: ""
|
||||
}
|
||||
deviceId.exact = self.cameraDevices[self.cameraIndex].deviceId
|
||||
self.constraints.video.deviceId = deviceId
|
||||
|
||||
this.beginPublish()
|
||||
|
||||
},
|
||||
gotDevices(deviceInfos) {
|
||||
for (let i = 0; i !== deviceInfos.length; ++i) {
|
||||
const deviceInfo = deviceInfos[i];
|
||||
const option = document.createElement('option');
|
||||
option.value = deviceInfo.deviceId;
|
||||
if (deviceInfo.kind === 'audioinput') {
|
||||
// console.log(option)
|
||||
// console.log(deviceInfo)
|
||||
} else if (deviceInfo.kind === 'audiooutput') {
|
||||
// console.log(option)
|
||||
// console.log(deviceInfo)
|
||||
} else if (deviceInfo.kind === 'videoinput') {
|
||||
this.cameraDevices.push(deviceInfo)
|
||||
} else {
|
||||
console.log('Some other kind of source/device: ', deviceInfo);
|
||||
}
|
||||
}
|
||||
},
|
||||
handleError(error) {
|
||||
console.log('navigator.getUserMedia error: ', error);
|
||||
},
|
||||
beginPublish() {
|
||||
let _this = this;
|
||||
//http://localhost:8080/hd-glasses-app/#/call_room?isPublish=1&isPlayer=1&uid=123&room=call_room
|
||||
@@ -77,21 +218,24 @@ export default {
|
||||
// var query = parse_query_string();
|
||||
|
||||
const publistUrl = process.env.VUE_APP_SRS_URL + this.roomId + "/" + this.uid;
|
||||
|
||||
_this.publistUrl = publistUrl;
|
||||
// srs_init_rtc("#txt_url", publistUrl);
|
||||
|
||||
//初始化sdk
|
||||
let sdk = null;
|
||||
if (sdk) {
|
||||
sdk.close();
|
||||
navigator.mediaDevices.enumerateDevices().then(this.gotDevices).catch(this.handleError);
|
||||
|
||||
|
||||
if (_this.publishSdk) {
|
||||
_this.publishSdk.close();
|
||||
}
|
||||
sdk = new SrsRtcPublisherAsync();
|
||||
//绑定本地视频流
|
||||
_this.publishSdk = null;
|
||||
|
||||
_this.publishSdk = new SrsRtcPublisherAsync();
|
||||
// 绑定本地视频流
|
||||
// const localVideo = this.$refs.localVideo;
|
||||
// localVideo.srcObject = null;
|
||||
// localVideo.srcObject = sdk.stream;
|
||||
|
||||
sdk.publish(publistUrl).then((session) => {
|
||||
_this.publishSdk.publish(publistUrl, _this.constraints).then((session) => {
|
||||
_this.joinRoom()
|
||||
}).catch(function (reason) {
|
||||
console.error(reason)
|
||||
@@ -106,7 +250,7 @@ export default {
|
||||
alert(`getUserMedia ${reason.name} ${reason.message}`);
|
||||
}
|
||||
}
|
||||
sdk.close();
|
||||
_this.publishSdk.close();
|
||||
console.error(reason);
|
||||
});
|
||||
|
||||
@@ -262,6 +406,14 @@ export default {
|
||||
this.$refs.videoStreamtopVideo.srcObject = video.srcObject;
|
||||
}
|
||||
|
||||
},
|
||||
videoDownAction(){
|
||||
location.href = "uniwebview://action?function=restartCamera";
|
||||
if(this.showConfirmDialog==1){
|
||||
location.href = "uniwebview://action?function=restartCamera";
|
||||
}else {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -269,6 +421,12 @@ export default {
|
||||
|
||||
<style lang="less">
|
||||
|
||||
.videoRoomContainer{
|
||||
width:100vw;
|
||||
height: 100vh;
|
||||
background-color: #333030;
|
||||
}
|
||||
|
||||
.slide {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
@@ -289,4 +447,49 @@ export default {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.actionBtnList {
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
font-size: 16px;
|
||||
|
||||
.actionBtn {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 100%;
|
||||
background:#000000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img{
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.callDownBox{
|
||||
margin-top: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
font-size: 16px;
|
||||
div{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 100%;
|
||||
background:#DA4C4B;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img{
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
1176
hd-glasses-app/src/pages/hd_show_equipment_move_history.vue
Normal file
1176
hd-glasses-app/src/pages/hd_show_equipment_move_history.vue
Normal file
File diff suppressed because it is too large
Load Diff
1224
hd-glasses-app/src/pages/hd_show_patrolTmp_history.vue
Normal file
1224
hd-glasses-app/src/pages/hd_show_patrolTmp_history.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -2,17 +2,19 @@
|
||||
<div id="content">
|
||||
<div id="map" ref="map" style="width: 100vw; height: 100vh"/>
|
||||
<div id="overlay-box"/>
|
||||
|
||||
<div class="addAlarmPoint" v-if="page=='addAlarmPoint'">
|
||||
<div class="addAlarmPointNext" @click="addAlarmPointNextAction">下一步</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- '#FF4D36':'#ffa502'-->
|
||||
|
||||
<div class="iconColorList">
|
||||
<div class="iconColorListItem" style="color: #ffa502"><span style="background-color: #ffa502"></span>计划路线</div>
|
||||
<div class="iconColorListItem" style="color: #FF4D36"><span style="background-color: #FF4D36"></span>实际路线</div>
|
||||
</div>
|
||||
<van-overlay :show="alarmDetailsOverlay" @click="alarmDetailsOverlay = false" z-index="20">
|
||||
<div class="alarmDetailsOverlayWrapper" @click.stop>
|
||||
@@ -31,6 +33,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</van-overlay>
|
||||
|
||||
|
||||
<!--
|
||||
<div class="pcPlanningPath" v-if="page=='pcPlanningPath'">
|
||||
<div class="pcPlanningPathNext" @click="clearPcPlanningPath">清空重新绘制</div>
|
||||
@@ -60,10 +64,15 @@ import {OL as ol} from "plot-ol/plottingol";
|
||||
import GeoJSON from 'ol/format/GeoJSON'
|
||||
import service from "@/utils/service";
|
||||
import {appInit, getStatisFileUrl} from "../utils/publicFun";
|
||||
import dayjs from "dayjs"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showstartDate: false,
|
||||
showendDate: false,
|
||||
startDate: dayjs().subtract(1, 'hour').toDate(),
|
||||
endDate: dayjs().toDate(),
|
||||
map: {},
|
||||
pointLayer: {},
|
||||
canAddPoints: false,
|
||||
@@ -122,11 +131,16 @@ export default {
|
||||
planningVectorLayer: {},
|
||||
parentPostMessageData: [],
|
||||
isCanDraw: true,
|
||||
moveUserId: "",
|
||||
patrolInstanceId: ""
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.page = this.$route.query.page;
|
||||
this.pageType = this.$route.query.type;
|
||||
this.patrolInstanceId = this.$route.query.patrolInstanceId||'1717873511875563522';
|
||||
this.equipmentId = this.$route.query.equipmentId;
|
||||
this.moveUserId = this.$route.query.uerId;
|
||||
|
||||
setInterval(() => {
|
||||
let hd_gps_location = localStorage.getItem("hd_gps_location")
|
||||
@@ -139,6 +153,9 @@ export default {
|
||||
|
||||
this.initMap();
|
||||
|
||||
this.pcDrawType = "LineString";
|
||||
// this.pcPlanningPath()
|
||||
|
||||
|
||||
switch (this.page) {
|
||||
case "addAlarmPoint":
|
||||
@@ -201,6 +218,8 @@ export default {
|
||||
break
|
||||
default:
|
||||
console.log("未匹配到page参数")
|
||||
this.getPatrolInstanceDetailsById()
|
||||
|
||||
// this.planningPath()
|
||||
// this.queryAlarmList()
|
||||
// this.queryAllEquipment()
|
||||
@@ -765,21 +784,31 @@ export default {
|
||||
})
|
||||
|
||||
},
|
||||
drawPcPostMessageDataLayer() {
|
||||
drawPcPostMessageDataLayer(_list=[],type="") {
|
||||
this.map.removeLayer(this.drawPlanningPathLayer);
|
||||
this.pcDrawType = "LineString";
|
||||
const tempGeometryList = []
|
||||
|
||||
this.parentPostMessageData.map(item => {
|
||||
tempGeometryList.push(ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857'))
|
||||
tempGeometryList.push(ol.proj.transform(item,'EPSG:4326','EPSG:3857'))
|
||||
})
|
||||
|
||||
if(_list.length!=0){
|
||||
_list.map(item => {
|
||||
tempGeometryList.push(ol.proj.transform(item,'EPSG:4326','EPSG:3857'))
|
||||
})
|
||||
}
|
||||
|
||||
console.log(tempGeometryList)
|
||||
|
||||
const polygonGeometry = new LineString(tempGeometryList)
|
||||
const polygonFeature = new Feature({
|
||||
geometry: polygonGeometry
|
||||
})
|
||||
polygonFeature.setStyle(new Style({
|
||||
stroke: new Stroke({
|
||||
color: '#ffa502',
|
||||
width: 2
|
||||
color:type=="realyPathLine"?'#FF4D36':'#ffa502',
|
||||
width: 5
|
||||
}),
|
||||
fill: new Fill({
|
||||
color: '#ffffff00'
|
||||
@@ -810,23 +839,21 @@ export default {
|
||||
|
||||
this.map.addLayer(this.drawPlanningPathLayer);
|
||||
|
||||
service.get(`/api/patrol/area/list`, {
|
||||
|
||||
}).then((res) => {
|
||||
service.get(`/api/patrol/area/list`, {}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
console.log(res.data.result.records)
|
||||
res.data.result.records.map((record) =>{
|
||||
res.data.result.records.map((record) => {
|
||||
console.log(record)
|
||||
this.drawAreaLayer(record.areaName,JSON.parse(record.area))
|
||||
this.drawAreaLayer(record.areaName, JSON.parse(record.area))
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
},
|
||||
drawAreaLayer(title,areaList) {
|
||||
drawAreaLayer(title, areaList) {
|
||||
console.log(title)
|
||||
areaList=areaList[0]
|
||||
areaList = areaList[0]
|
||||
console.log(areaList)
|
||||
|
||||
const tempGeometryList = []
|
||||
@@ -837,7 +864,7 @@ export default {
|
||||
|
||||
tempGeometryList.push(tempGeometryList[0])
|
||||
|
||||
const _list=[tempGeometryList]
|
||||
const _list = [tempGeometryList]
|
||||
|
||||
console.log(_list)
|
||||
|
||||
@@ -847,7 +874,7 @@ export default {
|
||||
|
||||
const polygonFeature = new Feature({
|
||||
geometry: polygonGeometry,
|
||||
name:title
|
||||
name: title
|
||||
})
|
||||
|
||||
polygonFeature.setStyle(new Style({
|
||||
@@ -859,15 +886,171 @@ export default {
|
||||
color: 'rgba(255,255,0,0.1)'
|
||||
}),
|
||||
text: new Text({
|
||||
testAlign:'center',
|
||||
text:title,
|
||||
font:'bold 20px 微软雅黑',
|
||||
fill:new Fill({
|
||||
testAlign: 'center',
|
||||
text: title,
|
||||
font: 'bold 20px 微软雅黑',
|
||||
fill: new Fill({
|
||||
color: '#ffa502',
|
||||
})
|
||||
})
|
||||
}))
|
||||
this.drawPlanningPathLayer.getSource().addFeature(polygonFeature)
|
||||
},
|
||||
showMoveHistory() {
|
||||
// 矢量地图源
|
||||
let vectorSource = new VectorSource();
|
||||
// 矢量地图
|
||||
this.drawPlanningPathLayer = new VectorLayer({
|
||||
source: vectorSource,
|
||||
style: new Style({
|
||||
stroke: new Stroke({
|
||||
width: 6,
|
||||
color: [237, 212, 0, 0.8],
|
||||
}),
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
service.get(`/sys/equipment/trajectory`, {
|
||||
params: {
|
||||
uerId: this.moveUserId,
|
||||
equipmentId: this.equipmentId,
|
||||
startTime:dayjs(this.startDate).format('YYYY-MM-DD HH:mm'),
|
||||
endTime:dayjs(this.endDate).format('YYYY-MM-DD HH:mm'),
|
||||
pageSize:1000
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
this.showendDate=false
|
||||
this.showstartDate=false
|
||||
const _list=[]
|
||||
res.data.result.records.map((record,index) => {
|
||||
if(index==0){
|
||||
const startPoint = ol.proj.transform(record.location.split(","),'EPSG:4326','EPSG:3857')
|
||||
this.map.getView().animate({
|
||||
center:startPoint,
|
||||
duration:1000,
|
||||
zoom:18
|
||||
})
|
||||
}
|
||||
_list.push(record.location.split(","))
|
||||
})
|
||||
this.parentPostMessageData=_list
|
||||
this.drawPcPostMessageDataLayer()
|
||||
|
||||
this.map.removeInteraction(this.draw)
|
||||
this.map.removeInteraction(this.snap)
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
endDateConfirm(value) {
|
||||
console.log(dayjs(value))
|
||||
console.log(value)
|
||||
console.log(this.startDate)
|
||||
if (dayjs(value).isBefore(dayjs(this.startDate))) {
|
||||
console.log("结束时间早于开始时间")
|
||||
Notify({ type: 'warning', message: '结束时间不可早于开始时间' });
|
||||
} else {
|
||||
console.log("开始时间早于结束时间")
|
||||
this.endDate = dayjs(value).toDate()
|
||||
console.log("打印结束时间")
|
||||
console.log(this.endDate)
|
||||
setTimeout(()=>{
|
||||
this.showMoveHistory()
|
||||
},1000)
|
||||
|
||||
}
|
||||
},
|
||||
startDateConfirm(value) {
|
||||
console.log(dayjs(value))
|
||||
console.log(value)
|
||||
console.log(this.endDate)
|
||||
if (dayjs(value).isBefore(dayjs(this.endDate))) {
|
||||
this.startDate = dayjs(value).toDate()
|
||||
setTimeout(()=>{
|
||||
this.showMoveHistory()
|
||||
},1000)
|
||||
console.log("开始时间早于结束时间")
|
||||
} else {
|
||||
Notify({ type: 'warning', message: '开始时间不可晚于结束时间' });
|
||||
console.log("结束时间早于开始时间")
|
||||
}
|
||||
},
|
||||
getPatrolInstanceDetailsById(){
|
||||
// 矢量地图源
|
||||
let vectorSource = new VectorSource();
|
||||
// 矢量地图
|
||||
this.drawPlanningPathLayer = new VectorLayer({
|
||||
source: vectorSource,
|
||||
style: new Style({
|
||||
stroke: new Stroke({
|
||||
width: 6,
|
||||
color: [237, 212, 0, 0.8],
|
||||
}),
|
||||
})
|
||||
});
|
||||
|
||||
service.get(`/middlegroundPeriodicWorkOrderInstance/queryById`, {
|
||||
params: {
|
||||
id: this.patrolInstanceId
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
this.showendDate=false
|
||||
this.showstartDate=false
|
||||
let longitudeLatitude=res.data.result.location;
|
||||
longitudeLatitude=JSON.parse(longitudeLatitude)
|
||||
|
||||
const startPoint = ol.proj.transform(longitudeLatitude[0],'EPSG:4326','EPSG:3857')
|
||||
this.map.getView().animate({
|
||||
center:startPoint,
|
||||
duration:1000,
|
||||
zoom:18
|
||||
})
|
||||
|
||||
this.drawPcPostMessageDataLayer(longitudeLatitude,"planPathLine")
|
||||
|
||||
this.map.removeInteraction(this.draw)
|
||||
this.map.removeInteraction(this.snap)
|
||||
this.getPatrolInstanceRealyPath(res.data.result.actualStartTime,res.data.result.actualEndTime);
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
getPatrolInstanceRealyPath(startTime,endTime){
|
||||
|
||||
service.get(`/sys/equipment/trajectory`, {
|
||||
params: {
|
||||
uerId: this.moveUserId,
|
||||
equipmentId: this.equipmentId,
|
||||
startTime:startTime,
|
||||
endTime:endTime,
|
||||
pageSize:1000
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
this.showendDate=false
|
||||
this.showstartDate=false
|
||||
const _list=[]
|
||||
res.data.result.records.map((record,index) => {
|
||||
if(index==0){
|
||||
const startPoint = ol.proj.transform(record.location.split(","),'EPSG:4326','EPSG:3857')
|
||||
this.map.getView().animate({
|
||||
center:startPoint,
|
||||
duration:1000,
|
||||
zoom:18
|
||||
})
|
||||
}
|
||||
_list.push(record.location.split(","))
|
||||
})
|
||||
this.drawPcPostMessageDataLayer(_list,"realyPathLine")
|
||||
|
||||
this.map.removeInteraction(this.draw)
|
||||
this.map.removeInteraction(this.snap)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
@@ -959,12 +1142,15 @@ export default {
|
||||
|
||||
.iconColorList {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 30px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
padding: 10px;
|
||||
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
|
||||
.iconColorListItem {
|
||||
display: flex;
|
||||
@@ -1032,4 +1218,20 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeSelectBox {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -32,6 +32,14 @@ const router = new Router({
|
||||
path: '/hd_show_patrol_history',
|
||||
name: 'hd_show_patrol_history',
|
||||
component: () => import('../pages/hd_show_patrol_history.vue')
|
||||
},{
|
||||
path: '/hd_show_equipment_move_history',
|
||||
name: 'hd_show_equipment_move_history',
|
||||
component: () => import('../pages/hd_show_equipment_move_history.vue')
|
||||
},{
|
||||
path: '/hd_show_patrolTmp_history',
|
||||
name: 'hd_show_patrolTmp_history',
|
||||
component: () => import('../pages/hd_show_patrolTmp_history.vue')
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user