1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
| <template>
| <div id="ue-view" ref="ueRef">
| <!-- <video is="peer-stream" :id="streamUrl"></video> -->
| </div>
| <Detail v-if="showDetail" :deviceDetail="deviceDetail" @close="showDetail = false" />
| </template>
|
| <script setup>
| import { onMounted, onUnmounted, ref, computed } from "vue"
| import Detail from "@/components/tools/Detail.vue"
| defineOptions({
| name: "UeView",
| })
|
| const ueRef = ref(null)
| const showDetail = ref(false)
| const deviceDetail = ref({
| Name: "BP_POI_C_5",
| Type: "雨量计",
| })
|
| function initTimeSystem() {
| let currentTime = dayjs(new Date()).format("H")
| ps.emitMessage({ func_name: "SetTime", time: currentTime })
| }
|
| const initPs = () => {
| const ps = document.createElement("video", { is: "peer-stream" })
| ps.id = defaultStreamUrl
|
| ps.autoplay = true
| ueRef.value.appendChild(ps)
|
| if (ps.ws) {
| ps.ws.onopen = () => {
| ps.addEventListener(
| "playing",
| () => {
| // console.log("ueview start")
| initView()
| },
| { once: true }
| )
|
| // 监听回调
| ps.addEventListener("message", e => {
| let msg = JSON.parse(e.detail)
| // const data = msg.args
| console.log("callback", msg)
| handleCallBack(msg)
| })
| }
| }
| }
|
| const handleCallBack = data => {
| if (!data) return
| if (data.Type && !data.Type.includes("区")) {
| deviceDetail.value = data
| showDetail.value = true
| }
| }
| function initView() {
| let desc = null
| if (defaultCity == "北京市") {
| desc = {
| func_name: "FlyTo",
| vectorType: "WGS84",
| x: "104.945716",
| y: "32.914062",
| z: "1537.00582",
| yaw: "-48.473782",
| pitch: "-62.876274",
| distance: "20625.462523",
| PlayRate: "5",
| Name: "孙湖沟",
| }
| } else {
| desc = {
| func_name: "FlyTo",
| vectorType: "WGS84",
| x: "102.410951",
| y: "36.838083",
| z: "20611.588439",
| yaw: "-87.464172",
| pitch: "-89.0",
| distance: "4918164.228809",
| PlayRate: "5",
| Name: "甘肃顶视图",
| }
| }
| ps.emitMessage(desc)
| }
|
| onMounted(() => {
| initPs()
| // 执行UE功能
| })
| onUnmounted(() => {
| if (ps && ps.ws) {
| ps.ws.close()
| }
| })
| </script>
|
| <style lang="less" scoped>
| #ue-view {
| width: 100vw;
| height: 100vh;
| position: absolute;
| // z-index: 1;
|
| :deep(video) {
| width: 100%;
| height: 100%;
| object-fit: cover !important;
| aspect-ratio: unset !important;
| }
| }
| </style>
|
|
