Skip to content

W
web-project
Commit 3db2e857 authored by 张伯涛's avatar 张伯涛
Browse files
Options

修改

parent 78d34d0e
Show whitespace changes
Inline Side-by-side
Showing with 219 additions and 143 deletions
src/api/ar.js 0 → 100644
View file @ 3db2e857
import http from './http'
export const getLoginTgc = params => {
var url = "/api/HIK/getLoginTgc";
return http.post(url).then(res => res).catch(function (error) {
console.log(error);
})
}
src/components/screenDisplay.vue
View file @ 3db2e857
......@@ -1011,6 +1011,7 @@ export default defineComponent({
});
popupButtons2.addEventListener("dblclick", function (event) {
if (markerId.includes("marker3")) {
window.open('/GisAr', '_blank');
console.log('ggggggggggggggggggggggggggggggggggggggggggggggggggggggg')
}
})
......
src/components/videoComponents.vue
View file @ 3db2e857
<template>
<!-- <el-card>-->
<!-- <div class="div-dropdown text-center">-->
<!-- <el-row>-->
<!-- <el-col :span="7">-->
<!-- <span>换热站&nbsp;:&nbsp;</span>-->
<!-- <el-cascader :options="VideoInfo.selectOptions" v-model="VideoInfo.value" :props="props"-->
<!-- collapse-tags clearable :show-all-levels="false" filterable placeholder="请选择" style=""-->
<!-- :change="getVideoFromVideoList(VideoInfo.value)" @visible-change="visibleCascader" />-->
<!-- </el-col>-->
<!-- <el-col :span="10">-->
<!-- </el-col>-->
<!-- <el-col :span="7">-->
<!-- <el-row>-->
<!-- <el-col :span="6">-->
<!-- </el-col>-->
<!-- <el-col :span="18">-->
<!-- <el-button id="startPlay" class="el-button-button" type="primary" :span="6">-->
<!-- 显示视频</el-button>-->
<!-- <el-button id="stopPlay" class="el-button-button" type="primary" :span="6"-->
<!-- @click="autoColBoxShow = !autoColBoxShow">隐藏视频</el-button>-->
<!-- <el-button id="down" class="el-button-button" type="primary" :span="6"-->
<!-- @click="down">下载插件</el-button>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<!-- &lt;!&ndash; <div>-->
<!-- 点击此处前往海康平台下载视频播放插件-->
<!--</div> &ndash;&gt;-->
<!-- </el-card>-->
<div class="videoPlayer" id="playWnd">
<!-- <el-card>-->
<!-- <div class="div-dropdown text-center">-->
<!-- <el-row>-->
<!-- <el-col :span="7">-->
<!-- <span>换热站&nbsp;:&nbsp;</span>-->
<!-- <el-cascader :options="VideoInfo.selectOptions" v-model="VideoInfo.value" :props="props"-->
<!-- collapse-tags clearable :show-all-levels="false" filterable placeholder="请选择" style=""-->
<!-- :change="getVideoFromVideoList(VideoInfo.value)" @visible-change="visibleCascader" />-->
<!-- </el-col>-->
<!-- <el-col :span="10">-->
<!-- </el-col>-->
<!-- <el-col :span="7">-->
<!-- <el-row>-->
<!-- <el-col :span="6">-->
<!-- </el-col>-->
<!-- <el-col :span="18">-->
<!-- <el-button id="startPlay" class="el-button-button" type="primary" :span="6">-->
<!-- 显示视频</el-button>-->
<!-- <el-button id="stopPlay" class="el-button-button" type="primary" :span="6"-->
<!-- @click="autoColBoxShow = !autoColBoxShow">隐藏视频</el-button>-->
<!-- <el-button id="down" class="el-button-button" type="primary" :span="6"-->
<!-- @click="down">下载插件</el-button>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<!-- &lt;!&ndash; <div>-->
<!-- 点击此处前往海康平台下载视频播放插件-->
<!--</div> &ndash;&gt;-->
<!-- </el-card>-->
<div className="videoPlayer" id="playWnd">
</div>
</template>
......@@ -58,19 +58,20 @@
<script setup>
// ../OutputFile/VideoWebPlugin.zip
const stopShow = ref(false);
import {ref, reactive, onMounted,defineEmits, onUnmounted, provide, computed, handleError, watch} from 'vue'
import { useRoute } from 'vue-router'
import {ref, reactive, onMounted, defineEmits, onUnmounted, provide, computed, handleError, watch} from 'vue'
import {useRoute} from 'vue-router'
import http from '../api/http'
import store from "../store/index";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import {onBeforeRouteLeave, onBeforeRouteUpdate} from 'vue-router'
import $ from 'jquery'
import { JSEncrypt } from 'jsencrypt'
import { WebControl } from '../assets/script/video/web-control.esm.min.js'
import { onActivated, onDeactivated } from 'vue'
onActivated(()=>{
if(route.query.id){
VideoInfo.value=route.query.id;
import {JSEncrypt} from 'jsencrypt'
import {WebControl} from '../assets/script/video/web-control.esm.min.js'
import {onActivated, onDeactivated} from 'vue'
onActivated(() => {
if (route.query.id) {
VideoInfo.value = route.query.id;
getVideoFromVideoList(route.query.id);
}
// showPlay();
......@@ -83,11 +84,11 @@ onDeactivated(() => {
const route = useRoute();
onBeforeRouteUpdate((to, from) => {
var r=useRoute();
var r = useRoute();
console.log('update')
console.log(r.query.id);
if(r.query.id){
VideoInfo.value=r.query.id;
if (r.query.id) {
VideoInfo.value = r.query.id;
getVideoFromVideoList(r.query.id);
}
})
......@@ -118,9 +119,10 @@ var initCount = 0;
var pubKey = '';
var playWnd_width = pProps.divWidth;
var playWnd_height = pProps.divHeight;
var oWebControl;
var videoIp="218.69.97.198";;
var videoPort=1443;
var oWebControl = null;
var videoIp = "218.69.97.198";
;
var videoPort = 1443;
const enterpriseId = ref(null);
enterpriseId.value = store.getters.getEnterpriseId();
var VideoInfo = reactive({
......@@ -129,17 +131,19 @@ var VideoInfo = reactive({
videoList: [],
playVideoList: []
});
const props = { multiple: false, emitPath: false }
const props = {multiple: false, emitPath: false}
initPage();
function down(){
function down() {
//下载插件
const filepath='/OutputFile/VideoWebPlugin.zip';
const filepath = '/OutputFile/VideoWebPlugin.zip';
window.open(filepath);
}
function resetVideoWidth(){
console.log('playVW',playWnd_width);
function resetVideoWidth() {
console.log('playVW', playWnd_width);
}
//获取服务中心->供热站->换热站，三级列表
......@@ -167,11 +171,11 @@ function getStats() {
s.children = [];
supply.stationList.forEach(station => {
var tmpStation = { value: station.stationId, label: station.stationName }
var tmpStation = {value: station.stationId, label: station.stationName}
s.children.push(tmpStation);
})
//增加供热站节点
s.children.push({ value: s.value, label: s.label })
s.children.push({value: s.value, label: s.label})
if (s.children.length > 0) {
//判断该供热站是否有换热站机组，若有则加入列表
serv.children.push(s);
......@@ -190,7 +194,7 @@ function getStats() {
s.label = supply.supplyName;
s.children = [];
supply.transferList.forEach(unit => {
var tmpUnit = { value: unit.unitId, label: unit.unitName }
var tmpUnit = {value: unit.unitId, label: unit.unitName}
s.children.push(tmpUnit);
})
......@@ -219,15 +223,16 @@ function getVideoInfo() {
function initPage() {
getVideoInfo();//视频信息
getStats();//下拉列表
console.log('VideoInfo.selectOptions',VideoInfo.selectOptions)
if(route.query.id){
console.log('VideoInfo.selectOptions', VideoInfo.selectOptions)
if (route.query.id) {
//设置选择框
VideoInfo.value=route.query.id;
VideoInfo.value = route.query.id;
//播放视频
getVideoFromVideoList(route.query.id);
}
}
// console.log("初始化")
//从视频列表中找到当前被选中的换热站对应的所有视频id
function getVideoFromVideoList(value) {
stopAllPreview();
......@@ -243,6 +248,7 @@ function getVideoFromVideoList(value) {
playVideoByVideoList(VideoInfo.playVideoList)
}
}
// function visibleCascader(isshow) {
// if (!oWebControl) {
// return;
......@@ -277,8 +283,26 @@ onUnmounted(() => {
hidePlay();
})
const emit = defineEmits(['initSuccess'])
// 创建播放实例
function initPlugin() {
try {
if (oWebControl != null) {
var tmp = oWebControl;
tmp.JS_Disconnect().then(function () { // oWebControl 为 WebControl 的对象
// 断开与插件服务的连接成功
console.log("销毁成功")
}, function () {
// 断开与插件服务的连接失败
console.log("销毁失败")
});
}
} catch (e) {
oWebControl = null;
}
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
......@@ -292,12 +316,13 @@ function initPlugin() {
oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
cbIntegrationCallBack: cbIntegrationCallBack
});
if(stopShow.value === false) {
if (stopShow.value === false) {
oWebControl.JS_CreateWnd("playWnd", pProps.divWidth, pProps.divHeight).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
init(); // 创建播放实例成功后初始化
});
}
}, function () { // 启动插件服务失败
console.log("插件启动失败")
});
//playVideo()
setTimeout(() => playVideoByVideoList(VideoInfo.playVideoList), 2000)
......@@ -306,32 +331,32 @@ function initPlugin() {
cbConnectError: function () { // 创建WebControl实例失败
console.log('创建失败')
oWebControl = null;
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
initCount++;
if (initCount < 3) {
setTimeout(function () {
initPlugin();
}, 3000)
} else {
// $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
// WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
// initCount++;
// if (initCount < 3) {
// setTimeout(function () {
// initPlugin();
// }, 3000)
// } else {
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
}
// }
},
cbConnectClose: function (bNormalClose) {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
console.log("cbConnectClose");
oWebControl = null;
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://");
initCount++;
if (initCount < 3) {
setTimeout(function () {
initPlugin();
}, 3000)
} else {
// oWebControl = null;
// $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
// WebControl.JS_WakeUp("VideoWebPlugin://");
// initCount++;
// if (initCount < 3) {
// setTimeout(function () {
// initPlugin();
// }, 3000)
// } else {
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
}
// }
}
});
}
......@@ -348,31 +373,30 @@ function cbIntegrationCallBack(oData) {
}
//初始化ip
async function initIp(){
async function initIp() {
var res;
try{
try {
res = await fetch('https://api.ipify.org?format=json');
const data = await res.json();
var serverIP = data.ip;
if(serverIP === "111.160.132.74" || serverIP === "218.69.97.198"){
videoIp="192.168.1.130";
}else{
videoIp="218.69.97.198";
if (serverIP === "111.160.132.74" || serverIP === "218.69.97.198") {
videoIp = "192.168.1.130";
} else {
videoIp = "218.69.97.198";
}
}catch(e){
videoIp="218.69.97.198";
} catch (e) {
videoIp = "218.69.97.198";
}
videoPort=1443;
videoPort = 1443;
}
//初始化插件
function init() {
getPubKey(function () {
console.log("ip:"+videoIp);
console.log("ip:" + videoIp);
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
var appkey = "27337031"; //综合安防管理平台提供的appkey，必填
var secret = setEncrypt("MI9Q4eAHC0Ip7bVX2Sov"); //综合安防管理平台提供的secret，必填
......@@ -638,14 +662,15 @@ function playVideotest(cameraIndexCode) {
})
}
watch(
() => pProps.queryParams,
async (newData) => {
console.log('pProps.queryParams',pProps.queryParams)
if(pProps.queryParams) {
console.log('pProps.queryParams', pProps.queryParams)
if (pProps.queryParams) {
const params = JSON.parse(pProps.queryParams)
// const params = ['31c0d567dd1944d5b4ea3eddf94f740b']
if(params && params.length > 0) {
if (params && params.length > 0) {
stopShow.value = false
hidePlay();
await initIp();//ip
......@@ -653,7 +678,7 @@ watch(
showPlay()
getVideoFromVideoList(params)
}
}else {
} else {
hidePlay();
}
}
......
src/components/videoComponentsTwo.vue
View file @ 3db2e857
......@@ -32,7 +32,7 @@
<!-- 点击此处前往海康平台下载视频播放插件-->
<!--</div> &ndash;&gt;-->
<!-- </el-card>-->
<div class="videoPlayerDialog" id="playWndDialog">
<div className="videoPlayerDialog" id="playWndDialog">
</div>
</template>
......@@ -57,7 +57,7 @@
<script setup>
// ../OutputFile/VideoWebPlugin.zip
import {ref, reactive, onMounted,defineEmits, onUnmounted, provide, computed, handleError, watch} from 'vue'
import { ref, reactive, onMounted, defineEmits, onUnmounted, provide, computed, handleError, watch, toRefs } from 'vue'
import { useRoute } from 'vue-router'
import http from '../api/http'
import store from "../store/index";
......@@ -67,9 +67,10 @@ import $ from 'jquery'
import { JSEncrypt } from 'jsencrypt'
import { WebControl } from '../assets/script/video/web-control.esm.min.js'
import { onActivated, onDeactivated } from 'vue'
onActivated(()=>{
if(route.query.id){
VideoInfo.value=route.query.id;
onActivated(() => {
if (route.query.id) {
VideoInfo.value = route.query.id;
getVideoFromVideoList(route.query.id);
}
// showPlay();
......@@ -81,11 +82,11 @@ onDeactivated(() => {
const route = useRoute();
onBeforeRouteUpdate((to, from) => {
var r=useRoute();
var r = useRoute();
console.log('update')
console.log(r.query.id);
if(r.query.id){
VideoInfo.value=r.query.id;
if (r.query.id) {
VideoInfo.value = r.query.id;
getVideoFromVideoList(r.query.id);
}
})
......@@ -108,17 +109,24 @@ const pProps = defineProps({
stopParams: {
type: Number,
required: true,
},
videoShow:{
type:Boolean,
required:true
}
});
const VideoCon=toRefs(pProps);
//声明公用变量
var initCount = 0;
var pubKey = '';
var playWnd_width = pProps.divWidth;
var playWnd_height = pProps.divHeight;
var oWebControl;
var videoIp="218.69.97.198";;
var videoPort=1443;
var videoIp = "218.69.97.198";
;
var videoPort = 1443;
const enterpriseId = ref(null);
enterpriseId.value = store.getters.getEnterpriseId();
var VideoInfo = reactive({
......@@ -130,14 +138,16 @@ var VideoInfo = reactive({
const props = { multiple: false, emitPath: false }
initPage();
function down(){
function down() {
//下载插件
const filepath='/OutputFile/VideoWebPlugin.zip';
const filepath = '/OutputFile/VideoWebPlugin.zip';
window.open(filepath);
}
function resetVideoWidth(){
console.log('playVW',playWnd_width);
function resetVideoWidth() {
console.log('playVW', playWnd_width);
}
//获取服务中心->供热站->换热站，三级列表
......@@ -217,10 +227,10 @@ function getVideoInfo() {
function initPage() {
getVideoInfo();//视频信息
getStats();//下拉列表
console.log('VideoInfo.selectOptions',VideoInfo.selectOptions)
if(route.query.id){
console.log('VideoInfo.selectOptions', VideoInfo.selectOptions)
if (route.query.id) {
//设置选择框
VideoInfo.value=route.query.id;
VideoInfo.value = route.query.id;
//播放视频
getVideoFromVideoList(route.query.id);
}
......@@ -241,6 +251,7 @@ function getVideoFromVideoList(value) {
playVideoByVideoList(VideoInfo.playVideoList)
}
}
// function visibleCascader(isshow) {
// if (!oWebControl) {
// return;
......@@ -275,8 +286,27 @@ onUnmounted(() => {
hidePlay();
})
const emit = defineEmits(['initSuccess'])
// 创建播放实例
function initPlugin() {
try {
if (oWebControl != null) {
var tmp = oWebControl;
tmp.JS_Disconnect().then(function () { // oWebControl 为 WebControl 的对象
// 断开与插件服务的连接成功
console.log("销毁成功")
}, function () {
// 断开与插件服务的连接失败
console.log("销毁失败")
});
}
} catch (e) {
oWebControl = null;
}
oWebControl = new WebControl({
szPluginContainer: "playWndDialog", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
......@@ -345,31 +375,30 @@ function cbIntegrationCallBack(oData) {
}
//初始化ip
async function initIp(){
async function initIp() {
var res;
try{
try {
res = await fetch('https://api.ipify.org?format=json');
const data = await res.json();
var serverIP = data.ip;
if(serverIP === "111.160.132.74" || serverIP === "218.69.97.198"){
videoIp="192.168.1.130";
}else{
videoIp="218.69.97.198";
if (serverIP === "111.160.132.74" || serverIP === "218.69.97.198") {
videoIp = "192.168.1.130";
} else {
videoIp = "218.69.97.198";
}
}catch(e){
videoIp="218.69.97.198";
} catch (e) {
videoIp = "218.69.97.198";
}
videoPort=1443;
videoPort = 1443;
}
//初始化插件
function init() {
getPubKey(function () {
console.log("ip:"+videoIp);
console.log("ip:" + videoIp);
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
var appkey = "27337031"; //综合安防管理平台提供的appkey，必填
var secret = setEncrypt("MI9Q4eAHC0Ip7bVX2Sov"); //综合安防管理平台提供的secret，必填
......@@ -556,6 +585,7 @@ function playVideo(videoCode) {
function playVideoByVideoList(videoList) {
if (!videoList || videoList.length === 0) {
VideoCon.value = false;
return;
}
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
......@@ -635,20 +665,21 @@ function playVideotest(cameraIndexCode) {
})
}
watch(
() => pProps.queryParams,
async (newData) => {
if(pProps.queryParams) {
if (pProps.queryParams) {
const params = JSON.parse(pProps.queryParams)
// const params = ['31c0d567dd1944d5b4ea3eddf94f740b']
if(params && params.length > 0) {
if (params && params.length > 0) {
hidePlay();
await initIp();//ip
initPlugin();
showPlay()
getVideoFromVideoList(params)
}
}else {
} else {
hidePlay();
}
}
......
src/router/index.js
View file @ 3db2e857
......@@ -575,6 +575,14 @@ const routes = [
title: "地图",
},
},
{
path: "/GisAr",
name: "/GisAr",
component: () => import("@/views/Gis/arDisplay.vue"),
meta: {
title: "ar实景",
},
},
//捕获404路由
{
path: "/:pathMatch(.*)*",
......
src/components/ar/index.vue → src/views/Gis/arDisplay.vue
View file @ 3db2e857
......@@ -28,7 +28,7 @@
<script>
import ARWebControl from "./arWebControl.debug";
// 该接口为vlmas组件ui接口，如果是在copas中调用，可以使用vlmas wiki中提供的api接口，如果是组件中使用，需要对应组件参照wiki提供相应接口
import { getClientInfo } from "@/api/index";
import { getLoginTgc } from "@/api/ar";
export default {
name: "OpenClient",
......@@ -141,7 +141,7 @@ export default {
},
async getClientInfo() {
try {
const { code, data } = await getClientInfo();
const { code, data } = await getLoginTgc();
if (code === "0") {
this.userInfo = data.currentUser || {};
this.domainId = data.domainId;
......
src/components/ar/arWebControl.debug.js → src/views/Gis/arWebControl.debug.js
View file @ 3db2e857
/* eslint-disable */
import store from "@/store/index.js";
;(function(global, factory) {
typeof exports === 'object' && typeof module !== 'undefined'
? (module.exports = factory())
......@@ -497,7 +499,7 @@
WEBSOCKET_URL: 'ws://127.0.0.1'
}
var ARWebControl =
const ARWebControl =
/*#__PURE__*/
(function() {
/**
......@@ -1167,3 +1169,4 @@
return ARWebControl
})
//# sourceMappingURL=arWebControl.js.map
export default ARWebControl
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment