备份

hd-glasses-app/src/pages/call_room.vue

@@ -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>

hd-glasses-app/src/pages/hd_show_patrol_history.vue

@@ -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>

hd-glasses-app/src/router/index.js

@@ -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')
         }
     ]
 });