gitY
/
LinYeFangHuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge

Browse Source
main
徐景良 5 days ago
parent 9b378813e4
commit e2ec5da7b2
6 changed files with 731 additions and 193 deletions
Show Stats Download Patch File Download Diff File

13
src/packages/components/Tasks/Tasks/TaskAssign/config.ts
Unescape Escape View File

@ -7,12 +7,23 @@ import cloneDeep from 'lodash/cloneDeep'
export const option = {
textSize: 14,
colors: ['#0C2411','#00611A','#FFFFFF'],
text: '添加途经点'
text: '添加途经点',
list: [
'关闭线索','应急响应'
],
selectButton: '',
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = TaskAssignConfig.key
public attr = { ...chartInitConfig, w: 1139, h: 249, zIndex: 1 }
public chartConfig = cloneDeep(TaskAssignConfig)
public option = cloneDeep(option)
constructor(){
super();
this.attr = { ...chartInitConfig, w: 1139, h: 249, zIndex: 1 }
this.isChildEvent = true
this.events.interactConfigEvents = {}
}
}

460
src/packages/components/Tasks/Tasks/TaskAssign/index.vue
Unescape Escape View File

@ -6,13 +6,13 @@
<div class="clue-information-containers">
<!-- 左侧列表 -->
<div class="left-container">
<div class="left-container" ref="container">
<!-- item 1 -->
<div class="clue-item" v-for="(item,index) in listItem" :key="index">
<!-- 项目 -->
<div class="clue-item" v-for="(item,index) in listItem" :key="index" @click="handlerShowInfo($event,item)">
<!-- 内容 -->
<div class="clue-item-information" @click="handlerShowInfo(item)">
<div class="clue-item-information" >
<div class="icon">
<img v-if="item.state == 1" :src="'/public/components/Task/taskassign/'+item.icon+'-active.png'" alt="">
<img v-else :src="'/public/components/Task/taskassign/'+item.icon+'.png'" alt="">
@ -25,7 +25,7 @@
<!-- 时间线 -->
<div class="item-liner">
<div class="left-line" v-if="index > 0"></div>
<div class="point" @click="handlerShowInfo(item)"></div>
<div class="point" ></div>
<div class="right-line" v-if="index < listItem.length-1"></div>
</div>
@ -35,55 +35,58 @@
{{item.time}}
</span>
</div>
<!-- 点击弹窗 -->
<div class="verify-container" v-if="item.checked"
:style="{'background-image': item.state == 1 ? 'url(/public/components/Task/taskassign/detail-bg-active.png)' : 'url(/public/components/Task/taskassign/detail-bg.png)'}"
</div>
<!-- 点击弹窗 -->
<div class="verify-container" v-if="currentTimeNode.checked"
:style="{
'background-image': currentTimeNode.state == 1 ? 'url(/public/components/Task/taskassign/detail-bg-active.png)' : 'url(/public/components/Task/taskassign/detail-bg.png)',
'left': (clickX-212)+'px'
}"
>
<div class="title"
:style="{
'background': currentTimeNode.state == 1 ? 'linear-gradient( 270deg, #271410 0%, #740B09 47%, #CC0101 100%)' : 'linear-gradient( 270deg, #0A261E 0%, #15AF3F 47%, #17B241 100%)',
'border-left': currentTimeNode.state == 1 ? '3px solid #F02626' : '3px solid #20C24D'
}"
>
<div class="title"
:style="{
'background': item.state == 1 ? 'linear-gradient( 270deg, #271410 0%, #740B09 47%, #CC0101 100%)' : 'linear-gradient( 270deg, #0A261E 0%, #15AF3F 47%, #17B241 100%)',
'border-left':item.state == 1 ? '3px solid #F02626' : '3px solid #20C24D'
}"
>
{{item.name}}
<div class="close-button" @click="handlerCloseInfo(item)">
<img v-if="item.state == 1" src="/public/components/Task/taskassign/close-active.png" alt="">
<img v-else src="/public/components/Task/taskassign/close.png" alt="">
</div>
</div>
{{currentTimeNode.name}}
<div class="close-button" @click="handlerCloseInfo(currentTimeNode)">
<img v-if="currentTimeNode.state == 1" src="/public/components/Task/taskassign/close-active.png" alt="">
<img v-else src="/public/components/Task/taskassign/close.png" alt="">
</div>
</div>
<!-- 图片 -->
<div class="image-container"
:style="{'border': item.state == 1 ? '2px solid rgba(240, 38, 38, 1)' : '2px solid #20C24D'}"
>
<a-carousel autoplay dots-class="slick-dots slick-thumb" preview-disabled v-if="imageLoading" style="height:100px;">
<div v-for="item in handlerAfterImageList" style="height:100px;">
<a-image :src="item" style="height:210px;" />
</div>
</a-carousel>
</div>
<!-- 内容 -->
<div class="description-container">
<div class="description-item" v-for="(item,index) in detailInfo" :key="index">
<div class="label">{{item.label}}</div>
<div class="value">{{item.value}}</div>
</div>
<!-- 图片 -->
<div class="image-container"
:style="{'border': currentTimeNode.state == 1 ? '2px solid rgba(240, 38, 38, 1)' : '2px solid #20C24D'}"
>
<a-carousel autoplay dots-class="slick-dots slick-thumb" preview-disabled v-if="imageLoading" style="height:100px;">
<div v-for="currentTimeNode in handlerAfterImageList" style="height:100px;">
<a-image :src="currentTimeNode" style="height:210px;" />
</div>
</a-carousel>
</div>
<!-- 内容 -->
<div class="description-container">
<div class="description-item" v-for="(item,index) in detailInfo" :key="index">
<div class="label">{{item.label}}</div>
<div class="value">{{item.value}}</div>
</div>
</div>
</div>
</div>
<!-- 右侧添加项目 -->
<div class="right-container">
<div class="add-item-container" @click="methodsShow = true;"></div>
<div class="add-item-container" @click="methodsShow = !methodsShow;"></div>
<div class="add-item-text">操作</div>
<div class="methods-container" v-if="methodsShow">
<div class="methods-item" v-for="(item,index) in methods" :key="index" @click="item.icon == 'response' ? clickBtn(item) : selectMethods(item);">
<div class="methods-item" v-for="(item,index) in methods" :key="index" @click="selectMethods(item)">
<div class="icon">
<img :src="'/public/components/Task/taskassign/methods-'+item.icon+'.png'" alt="">
</div>
@ -361,28 +364,20 @@
</div>
<!-- 视频监控 -->
<div class="hkversion-video-container" v-drag v-if="hikversionShow">
<div class="hkversion-video-container" v-if="hikversionShow">
<div class="title">视频监控
<div class="close-button" @click="hikversionShow = false">
<img src="/public/components/Task/taskassign/close.png" alt="" />
</div>
</div>
<div class="ai-control">
<div class="no-picture" v-if="true">
<!-- <div class="no-picture" v-if="true">
<img src="@/assets/images/chart/uav/no-picture.png" alt="" />
<span>暂无画面 请您耐心等待</span>
<span>......</span>
</div>
<div class="player" style="height: 200px" v-else>
<video
id="player-container-id-live"
height="200"
preload="auto"
playsinline
webkit-playsinline
>
</video>
</div> -->
<div class="player" style="height: 200px" v-if="hikversionShow">
<HKMonitor :videourl="playerUrl" :index="1" :width="360" :height="240" :timestamp="1" :nowFullScreenVideo="false"></HKMonitor>
</div>
</div>
</div>
@ -412,7 +407,9 @@
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css'; //引入插件和样式文件
import { listDronePort, saveHandFlyTask, endHandFlyTask, endAiInspection } from '@/api/situation';
import drag from './drag.ts'
import drag from './drag.ts';
import HKMonitor from './video/HKMonitor.vue';
var { VITE_GLOB_API_URL } = getAppEnvConfig();
@ -524,7 +521,42 @@
})
}
// 时间线左右滑动
function handlerTimeLineScroll(){
const el = container.value
let isDown = false
let startX
let scrollLeft
el.addEventListener('mousedown', (e) => {
isDown = true
el.classList.add('active')
startX = e.pageX - el.offsetLeft
scrollLeft = el.scrollLeft
})
el.addEventListener('mouseleave', () => {
isDown = false
el.classList.remove('active')
})
el.addEventListener('mouseup', () => {
isDown = false
el.classList.remove('active')
})
el.addEventListener('mousemove', (e) => {
if (!isDown) return
e.preventDefault()
const x = e.pageX - el.offsetLeft
const walk = (x - startX) * 1.5 // 拖动速度倍数
el.scrollLeft = scrollLeft - walk
})
}
onMounted(() => {
// 时间线左右滑动
handlerTimeLineScroll();
// 组件通信
// console.log("bindEvents333",props.chartConfig.id + 'dataupdate')
@ -664,6 +696,11 @@
});
onUnmounted(()=>{
monitorGraphicLayer ? monitorGraphicLayer.clear() : null;
userGraphicLayer ? userGraphicLayer.clear() : null;
})
onUnmounted(() => {
window.clearInterval(timer);
destroySeizeConnection();
@ -704,7 +741,6 @@
])
const selectMethods = (item) => {
switch(item.icon){
case "monitor":
handlerGetNearByMonitor(item);
@ -727,7 +763,7 @@
break;
case "response":
clickBtn(item);
changeButton("应急响应")
break;
}
@ -738,22 +774,30 @@
}
// 点击时间线节点获取详情
const handlerShowInfo = (item) => {
const container = ref(null);
const currentTimeNode = ref({})
const clickX = ref(0);
const handlerShowInfo = (event,item) => {
detailInfo.value = item.showInfo;
const parentRect = container.value.getBoundingClientRect() // 父容器位置
clickX.value = event.clientX - parentRect.left // 相对父容器的 X 坐标
listItem.value.forEach((item,index)=>{
item.checked = false;
})
switch(item.icon){
case 'monitor':
break;
case 'verify':
break;
}
item.checked = true;
currentTimeNode.value = item;
}
// 关闭
@ -791,17 +835,6 @@
let data = res.data.result[0];
clueInfo.value = data;
let timeLineInfo = {
name:"初始线索",
icon:"monitor",
checked:false,
time:clueInfo.value.reportTime,
state:1,
info:clueInfo.value
}
listItem.value.push(timeLineInfo);
// 获取任务列表
handlerGetTaskList();
@ -826,6 +859,18 @@
}
]
let timeLineInfo = {
name:"初始线索",
icon:"monitor",
checked:false,
time:clueInfo.value.reportTime,
state:1,
info:clueInfo.value,
showInfo:detailInfo.value,
}
listItem.value.push(timeLineInfo);
let imageList = [];
if(data.image.match(",")){
@ -908,7 +953,9 @@
// 获取任务列表
const handlerGetTaskList = () => {
let sql = `
SELECT "Id","Content","Lng","Lat","Address","State","TaskTime","Image","ActOn" from fm_firecluetask where "Fireclueid" = '${clueInfo.value.id}' ORDER BY "TaskTime"
SELECT "Id","Content","Lng","Lat","Address","State","TaskTime","Image","ActOn"
from fm_firecluetask where "Fireclueid" = '${clueInfo.value.id}' AND "State" IN (2,3)
ORDER BY "TaskTime"
`;
axios.post(VITE_GLOB_API_URL+'/api/FireResources/GetDataBySql',{
sql:sql
@ -918,13 +965,35 @@
data.forEach((item,index)=>{
let method = getMethodsInfo(item.actOn);
let showInfo = [
{
label:"线索描述",
key:"Content",
value:item.content,
},{
label:"线索位置",
key:"Address",
value:item.address,
},{
label:"线索来源",
key:"sourceType",
value:item.sourceType,
},{
label:"上报时间",
key:"reportTime",
value:item.reportTime,
}
]
let timeLineInfo = {
name:method?.name,
icon:method?.icon,
checked:false,
time:item.taskTime,
state:item.state,
info:item
info:item,
showInfo:showInfo
}
listItem.value.push(timeLineInfo)
@ -968,7 +1037,13 @@
// 附近视频监控
const hikversionShow = ref(false);
const playerUrl = ref(null);
let monitorGraphicLayer:mars3d.layer.GraphicLayer;
function handlerGetNearByMonitor(item){
axios({
method: "get",
url: VITE_GLOB_API_URL + '/api/Camera/ListCameraWithInRange',
@ -991,6 +1066,14 @@
})
return null;
}
if(monitorGraphicLayer){
monitorGraphicLayer.clear();
}else{
monitorGraphicLayer = new mars3d.layer.GraphicLayer({ id: 10086 });
window.globalMap.addLayer(monitorGraphicLayer);
}
data.forEach((item,index)=>{
let graphic = new mars3d.graphic.BillboardEntity({
@ -1024,19 +1107,11 @@
graphic.on(mars3d.EventType.click, function (event: any) {
var data = event.graphic.options.attr;
playerUrl.value = data.SerialNumber;
hikversionShow.value = true;
// 更新详情弹窗信息
// let bindEvents = props.chartConfig.events.interactConfigEvents;
// for (let i = 0; i < bindEvents.length; i++) {
// for (let j = 0; j < bindEvents[i].movementList.length; j++) {
// EventBus.emit(bindEvents[i].movementList[j].elementId[j] + 'graphic', data);
// }
// }
});
window.globalMap.graphicLayer.addGraphic(graphic);
monitorGraphicLayer.addGraphic(graphic);
})
}
})
@ -1051,85 +1126,91 @@
function handlerUavVerify(item){
clueInfo.value.lng = 118.295196;
clueInfo.value.lat = 35.13456;
// 指点飞行位置
pointData.value = {
_lng:parseFloat(clueInfo.value.lng),
_lat:parseFloat(clueInfo.value.lat),
_alt:window.globalMap.getHeight([parseFloat(clueInfo.value.lng),parseFloat(clueInfo.value.lat)])+100
}
// listDronePort({
// lng: clueInfo.value.lng,
// lat: clueInfo.value.lat
// }).then((res) => {
// airPortStoreVal.setAirPort('sn', res[0].droneportsn);
// airPortStoreVal.setUAV('sn', res[0].Sn);
// airPortStoreVal.setGateway(res[0].GateWay);
// applyDroneControl({ dronePortSn: res[0].droneportsn }).then((res) => {
// droneData.value = res;
// });
// setTimeout(() => {
// try{
// // 执行飞行
// execute();
// ElMessage({
// message:"操作成功！",
// type: 'success',
// })
// }catch(e){
// ElMessage({
// message: "操作失败！",
// type: 'error',
// })
// }
// createConnection();
// setTimeout(() => {
// // 接收消息
// getClient().on('message', (topic, message) => {
// const rs = JSON.parse(message);
// console.log('接收消息', rs);
// if (rs.method === 'takeoff_to_point' && rs.bid == bid) {
// if (rs.data.result == 0) {
// createMessage.success('一键起飞成功');
// // 关联任务
// saveHandFlyTask({
// flightId: airPortStoreVal.getFlightId,
// workspaceId: airPortStoreVal.getProject,
// }).then((res) => {
// if (res) {
// setTimeout(() => {
// airPortStoreVal.setTaskId(res.taskId);
// }, 1000);
// }
// });
// } else {
// createMessage.error('一键起飞失败，' + errorName(rs.data.result));
// }
// }
// // 指点飞行
// if (rs.method == 'fly_to_point' && rs.bid == bid) {
// if (rs.data.result == 0) {
// createMessage.success('指点飞行成功');
// } else {
// createMessage.error('指点飞行失败，' + errorName(rs.data.result));
// }
// }
// });
// }, 1000);
// }, 500);
// });
// 指点飞行位置
pointData.value = {
_lng:parseFloat(clueInfo.value.lng),
_lat:parseFloat(clueInfo.value.lat),
_alt:window.globalMap.getHeight([parseFloat(clueInfo.value.lng),parseFloat(clueInfo.value.lat)])+100
}
alert(JSON.stringify(pointData.value));
// 下发任务
// handlerTask(3);
listDronePort({
lng: clueInfo.value.lng,
lat: clueInfo.value.lat
}).then((res) => {
airPortStoreVal.setAirPort('sn', res[0].droneportsn);
airPortStoreVal.setUAV('sn', res[0].Sn);
airPortStoreVal.setGateway(res[0].GateWay);
console.log("res",res);
debugger;
applyDroneControl({ dronePortSn: res[0].droneportsn }).then((res) => {
droneData.value = res;
});
setTimeout(() => {
try{
// 执行飞行
execute();
ElMessage({
message:"操作成功！",
type: 'success',
})
}catch(e){
ElMessage({
message: "操作失败！",
type: 'error',
})
}
createConnection();
setTimeout(() => {
// 接收消息
getClient().on('message', (topic, message) => {
const rs = JSON.parse(message);
console.log('接收消息', rs);
if (rs.method === 'takeoff_to_point' && rs.bid == bid) {
if (rs.data.result == 0) {
createMessage.success('一键起飞成功');
// 关联任务
saveHandFlyTask({
flightId: airPortStoreVal.getFlightId,
workspaceId: airPortStoreVal.getProject,
}).then((res) => {
if (res) {
setTimeout(() => {
airPortStoreVal.setTaskId(res.taskId);
}, 1000);
}
});
} else {
createMessage.error('一键起飞失败，' + errorName(rs.data.result));
}
}
// 指点飞行
if (rs.method == 'fly_to_point' && rs.bid == bid) {
if (rs.data.result == 0) {
createMessage.success('指点飞行成功');
} else {
createMessage.error('指点飞行失败，' + errorName(rs.data.result));
}
}
});
}, 1000);
}, 500);
});
// 下发任务
// handlerTask(3);
let graphic = new mars3d.graphic.BillboardEntity({
position: [118.29662,35.134548],
@ -1163,10 +1244,19 @@
}
// 人员核查
let userGraphicLayer:mars3d.layer.GraphicLayer;
function handlerUserVerify(item){
handlerTask(1);
if(userGraphicLayer){
userGraphicLayer.clear();
}else{
userGraphicLayer = new mars3d.layer.GraphicLayer({ id: 10086 });
window.globalMap.addLayer(userGraphicLayer);
}
let graphic = new mars3d.graphic.BillboardEntity({
position: [118.034137,35.424721],
attr: item,
@ -1188,7 +1278,7 @@
console.log('点击了人员', data);
});
window.globalMap.graphicLayer.addGraphic(graphic);
userGraphicLayer.addGraphic(graphic);
}
// 下发任务
@ -1238,18 +1328,11 @@
// 关闭线索
function handlerCloseClue(item){
console.log(chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,)
changeButton("关闭线索")
debugger;
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'click',
item,
);
monitorGraphicLayer ? monitorGraphicLayer.clear() : null;
userGraphicLayer ? userGraphicLayer.clear() : null;
return null;
let submitForm = {
@ -1284,6 +1367,15 @@
})
}
const changeButton = (type) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents[type],
'click',
type,
);
}
/////////////////////////////////
const airPortStoreVal = airPortStore();
@ -1428,7 +1520,7 @@
{
latitude: Number(pointData.value._lat),
longitude: Number(pointData.value._lng),
height: Number(pointData.value._alt) + 100,
height: Number(pointData.value._alt),
},
],
};
@ -1771,6 +1863,10 @@
justify-content: center;
font-size: 14px;
cursor: pointer;
position: relative;
transform: translateZ(0);
img {
width: 16px;
}
@ -1793,8 +1889,12 @@
.left-container{
flex:auto;
display:flex;
justify-content: center; /* 水平居中 */
padding:20px;
overflow-x:auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.clue-item{
flex:1;
flex: 0 0 calc(30% - 40px);
@ -1916,8 +2016,8 @@
.methods-container{
position:absolute;
padding:30px 4px 10px 10px;
bottom:88px;
right:-136px;
bottom: 114px;
right: -160px;
width:160px;
height:300px;
background-image:url(@/assets/images/chart/tasks/taskassign/methods-container-bg.png);

358
src/packages/components/Tasks/Tasks/TaskAssign/video/HKMonitor.vue
Unescape Escape View File

@ -0,0 +1,358 @@
<template>
<div :id="'camera-box-' + props.index" class="camera-box">
<!-- 视口区域 -->
<div :id="'playWnd-' + props.index + '-' + props.timestamp" class="playWnd"></div>
</div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, watch, ref, nextTick } from 'vue';
import { JSEncrypt } from 'jsencrypt';
const props = defineProps([
'videourl',
'index',
'width',
'height',
'timestamp',
'nowFullScreenVideo',
]);
const emit = defineEmits(['changeNowFullScreenVideo']);
//声明公用变量
let initCount = 0;
let pubKey = '';
let oWebControl: any = null;
// 创建播放实例
const initPlugin = () => {
oWebControl = new window.WebControl({
szPluginContainer: 'playWnd-' + props.index + '-' + props.timestamp, // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function () {
// 创建WebControl实例成功后的回调函数
oWebControl.JS_StartService('window', {
// WebControl实例创建成功后需要启动VideoPluginPlugin.exe服务
dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
}).then(
function () {
// 启动插件服务成功
oWebControl.JS_SetWindowControlCallback({
// 设置消息回调
cbIntegrationCallBack: cbIntegrationCallBack,
});
// 实际宽高
let width = props.width;
let height = props.height;
const divElement = document.getElementById('camera-box-' + props.index);
if (divElement) {
const rect = divElement.getBoundingClientRect();
const rectWidth = rect.width;
const rectHeight = rect.height;
if (rectWidth < width) {
width = rectWidth;
}
if (rectHeight < height) {
height = rectHeight;
}
}
oWebControl.JS_CreateWnd('playWnd-' + props.index + '-' + props.timestamp, width, height)
.then(function () {
init(); // 创建播放实例成功后初始化
debugger;
});
},
function () {
// 创建播放实例失败回调
console.log('创建播放实例失败！！！');
},
);
},
cbConnectError: function () {
// 创建WebControl实例失败
oWebControl = null;
let d = document.getElementById('playWnd-' + props.index + '-' + props.timestamp);
if (d) {
d.innerHTML = '插件未启动，正在尝试启动，请稍候...';
}
window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
initCount++;
if (initCount < 3) {
setTimeout(function () {
initPlugin();
}, 3000);
} else {
let d = document.getElementById('playWnd-' + props.index + '-' + props.timestamp);
if (d) {
d.innerHTML = '插件启动失败，请检查插件是否安装！';
}
}
},
cbConnectClose: function (bNormalClose) {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
oWebControl = null;
},
});
};
// 初始化播放内容
function init() {
getPubKey(function () {
let appkey = '23604396'; //综合安防管理平台提供的appkey，必填
let ip = '221.2.83.54'; //综合安防管理平台IP地址，必填
let port = 1443;
let appSecret = 'NZJ8L3bxCOOV6rtTFjsx';
let secret = setEncrypt(appSecret); //综合安防管理平台提供的secret，必填
let layerOut = '1x1';
let playMode = 0; //初始播放模式：0-预览，1-回放
let snapDir = 'D:\\SnapDir'; //抓图存储路径
let videoDir = 'D:\\VideoDir'; //紧急录像或录像剪辑存储路径
let layout = layerOut; //playMode指定模式的布局 默认1*1
let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
let encryptedFields = 'secret'; //加密字段，默认加密领域为secret
let showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
let showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
let buttonIDs = '0'; //自定义工具条按钮
oWebControl.JS_RequestInterface({
funcName: 'init',
argument: JSON.stringify({
appkey: appkey, //API网关提供的appkey
secret: secret, //API网关提供的secret
ip: ip, //API网关IP地址
playMode: playMode, //播放模式（决定显示预览还是回放界面）
port: port, //端口
snapDir: snapDir, //抓图存储路径
videoDir: videoDir, //紧急录像或录像剪辑存储路径
layout: layout, //布局
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
encryptedFields: encryptedFields, //加密字段
showToolbar: showToolbar, //是否显示工具栏
showSmart: showSmart, //是否显示智能信息
buttonIDs: buttonIDs, //自定义工具条按钮
}),
})
.then(function (oData) {
// 重定大小
reSizeVideo();
// 双击-全屏
oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: function (oData) {
// oData 是封装的视频 web 插件回调消息的消息体
if (oData.responseMsg.type == '7') {
setFullScreen();
}
},
});
});
// 开始预览多个视频
oWebControl.JS_RequestInterface({
funcName: 'startPreview',
argument: {
cameraIndexCode: props.videourl,
streamMode: 0,
transMode: 1,
gpuMode: 0,
wndId: 1,
},
});
});
}
// 标签关闭
function closeHkVideo() {
if (oWebControl != null) {
// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
oWebControl.JS_HideWnd();
// 销毁当前播放的视频
oWebControl.JS_RequestInterface({ funcName: 'destroyWnd' });
// 断开与插件服务连接
oWebControl.JS_Disconnect();
}
}
// 标签显示
function showHkVideo() {
if (oWebControl != null) {
oWebControl.JS_ShowWnd();
}
}
// 标签隐藏
function hideHkVideo() {
if (oWebControl != null) {
oWebControl.JS_HideWnd();
}
}
// 重定大小
function reSizeVideo() {
if (oWebControl != null) {
// 实际宽高
let width = props.width;
let height = props.height;
const divElement = document.getElementById('camera-box-' + props.index);
if (divElement) {
const rect = divElement.getBoundingClientRect();
const rectWidth = rect.width;
const rectHeight = rect.height;
if (rectWidth < width) {
width = rectWidth;
}
if (rectHeight < height) {
height = rectHeight;
}
}
oWebControl.JS_Resize(width, height); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
}
}
// 全屏
function setFullScreen() {
oWebControl.JS_RequestInterface({
funcName: 'setFullScreen',
});
emit('changeNowFullScreenVideo', '海康' + props.index);
}
watch(
() => props.videourl,
() => {
// 初始化播放内容
init();
},
);
watch(
() => props.width,
() => {
nextTick(() => {
// 重定大小
reSizeVideo();
});
},
);
// 获取公钥
function getPubKey(callback) {
oWebControl.JS_RequestInterface({
funcName: 'getRSAPubKey',
argument: JSON.stringify({
keyLength: 1024,
}),
}).then(function (oData) {
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data;
callback();
}
});
}
// RSA加密
function setEncrypt(value) {
let encrypt = new JSEncrypt();
encrypt.setPublicKey(pubKey);
return encrypt.encrypt(value);
}
// 推送消息
function cbIntegrationCallBack(oData) {
// showCBInfo(JSON.stringify(oData.responseMsg));
}
onMounted(() => {
// 启动视频窗口
initPlugin();
// 添加监听滚动事件
const elements = document.querySelectorAll('.HuoQingDetailTimeLine');
if (elements.length > 0) {
// 遍历每个元素并绑定 scroll 事件
elements.forEach((element) => {
element.addEventListener('scroll', reSizeVideo);
});
}
});
onUnmounted(() => {
// 销毁视频窗口
closeHkVideo();
// 移除监听滚动事件
const elements = document.querySelectorAll('.HuoQingDetailTimeLine');
if (elements.length > 0) {
// 遍历每个元素并绑定 scroll 事件
elements.forEach((element) => {
element.removeEventListener('scroll', reSizeVideo);
});
}
});
defineExpose({
initPlugin,
init,
closeHkVideo,
showHkVideo,
hideHkVideo,
});
</script>
<style scoped>
.camera-box-0 {
width: v-bind('`${props.width}px`');
height: v-bind('`${props.height}px`');
border-radius: 5px;
position: relative;
z-index: 10 !important;
position: fixed;
left: 50%;
top: 50%;
z-index: 10;
transform: translate(-105%, -135%);
padding: 0px;
}
.camera-box-1 {
width: v-bind('`${props.width}px`');
height: v-bind('`${props.height}px`');
border-radius: 5px;
position: relative;
z-index: 10 !important;
position: fixed;
left: 50%;
top: 50%;
z-index: 10;
transform: translate(-105%, -135%);
padding: 0px;
}
.camera-box-2 {
width: v-bind('`${props.width}px`');
height: v-bind('`${props.height}px`');
border-radius: 5px;
position: relative;
z-index: 10 !important;
position: fixed;
left: 50%;
top: 50%;
z-index: 10;
transform: translate(-105%, -135%);
padding: 0px;
}
.camera-box-3 {
width: v-bind('`${props.width}px`');
height: v-bind('`${props.height}px`');
border-radius: 5px;
position: relative;
z-index: 10 !important;
position: fixed;
left: 50%;
top: 50%;
z-index: 10;
transform: translate(-105%, -135%);
padding: 0px;
}
.playWnd {
width: v-bind('`${props.width}px`');
height: v-bind('`${props.height}px`');
}
</style>

18
src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/video/monitorHK.vue
Unescape Escape View File

@ -33,12 +33,10 @@
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function () {
// 创建WebControl实例成功后的回调函数
oWebControl
.JS_StartService('window', {
oWebControl.JS_StartService('window', {
// WebControl实例创建成功后需要启动VideoPluginPlugin.exe服务
dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
})
.then(
}).then(
function () {
// 启动插件服务成功
oWebControl.JS_SetWindowControlCallback({
@ -61,8 +59,7 @@
height = rectHeight;
}
}
oWebControl
.JS_CreateWnd('playWnd-' + props.index + '-' + props.timestamp, width, height)
oWebControl.JS_CreateWnd('playWnd-' + props.index + '-' + props.timestamp, width, height)
.then(function () {
init(); // 创建播放实例成功后初始化
});
@ -121,8 +118,7 @@
let showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
let buttonIDs = '0'; //自定义工具条按钮
oWebControl
.JS_RequestInterface({
oWebControl.JS_RequestInterface({
funcName: 'init',
argument: JSON.stringify({
appkey: appkey, //API网关提供的appkey
@ -242,14 +238,12 @@
// 获取公钥
function getPubKey(callback) {
oWebControl
.JS_RequestInterface({
oWebControl.JS_RequestInterface({
funcName: 'getRSAPubKey',
argument: JSON.stringify({
keyLength: 1024,
}),
})
.then(function (oData) {
}).then(function (oData) {
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data;
callback();

2
src/utils/debugging/remote.ts
Unescape Escape View File

@ -34,7 +34,9 @@ export const errorName = (code) => {
}
};
export const servicesTopic = (data) => {
console.log(data);
console.log(airPortStoreVal.getGateway);
debugger
// 发送消息
clientPublish('thing/product/' + airPortStoreVal.getGateway + '/services', data);
};

73
vite.config.ts.timestamp-1762996410975-4fb74b3ad78b2.mjs
Unescape Escape View File

@ -0,0 +1,73 @@
// vite.config.ts
import { defineApplicationConfig } from "file:///E:/projects/%E6%9E%97%E4%B8%9A%E9%98%B2%E7%81%AB/LinYeFangHuoVersion1.0/LinYeFangHuo/internal/vite-config/dist/index.mjs";
import { mars3dPlugin } from "file:///E:/projects/%E6%9E%97%E4%B8%9A%E9%98%B2%E7%81%AB/LinYeFangHuoVersion1.0/LinYeFangHuo/node_modules/.pnpm/vite-plugin-mars3d@3.1.3_rollup@3.29.5/node_modules/vite-plugin-mars3d/dist/index.js";
var vite_config_default = defineApplicationConfig({
overrides: {
optimizeDeps: {
include: [
"echarts/core",
"echarts/charts",
"echarts/components",
"echarts/renderers",
"qrcode",
"@iconify/iconify",
"ant-design-vue/es/locale/zh_CN",
"ant-design-vue/es/locale/en_US",
"@/../lib/vform/designer.umd.js"
]
},
build: {
/* 其他build生产打包配置省略 */
//...
target: "esnext",
commonjsOptions: {
include: [
/node_modules|lib/,
/node_modules|packages/
]
//这里记得把lib目录加进来，否则生产打包会报错！！
}
},
server: {
proxy: {
"/basic-api": {
target: "http://localhost:3000",
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(new RegExp(`^/basic-api`), "")
// only https
// secure: false
},
"/upload": {
target: "http://localhost:3300/upload",
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(new RegExp(`^/upload`), "")
}
},
warmup: {
clientFiles: ["./index.html", "./src/{views,components}/*"]
}
},
define: {
"process.env": {
BASE_URL: "/"
}
},
css: {
preprocessorOptions: {
scss: {
javascriptEnabled: true,
additionalData: `@import "src/styles/common/style.scss";`
}
}
},
plugins: [
mars3dPlugin()
]
}
});
export {
vite_config_default as default
};
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJFOlxcXFxwcm9qZWN0c1xcXFxcdTY3OTdcdTRFMUFcdTk2MzJcdTcwNkJcXFxcTGluWWVGYW5nSHVvVmVyc2lvbjEuMFxcXFxMaW5ZZUZhbmdIdW9cIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkU6XFxcXHByb2plY3RzXFxcXFx1Njc5N1x1NEUxQVx1OTYzMlx1NzA2QlxcXFxMaW5ZZUZhbmdIdW9WZXJzaW9uMS4wXFxcXExpblllRmFuZ0h1b1xcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vRTovcHJvamVjdHMvJUU2JTlFJTk3JUU0JUI4JTlBJUU5JTk4JUIyJUU3JTgxJUFCL0xpblllRmFuZ0h1b1ZlcnNpb24xLjAvTGluWWVGYW5nSHVvL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQXBwbGljYXRpb25Db25maWcgfSBmcm9tICdAdmJlbi92aXRlLWNvbmZpZyc7XG5pbXBvcnQge21hcnMzZFBsdWdpbn0gZnJvbSAndml0ZS1wbHVnaW4tbWFyczNkJztcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQXBwbGljYXRpb25Db25maWcoe1xuICBvdmVycmlkZXM6IHtcbiAgICBvcHRpbWl6ZURlcHM6IHtcbiAgICAgIGluY2x1ZGU6IFtcbiAgICAgICAgJ2VjaGFydHMvY29yZScsXG4gICAgICAgICdlY2hhcnRzL2NoYXJ0cycsXG4gICAgICAgICdlY2hhcnRzL2NvbXBvbmVudHMnLFxuICAgICAgICAnZWNoYXJ0cy9yZW5kZXJlcnMnLFxuICAgICAgICAncXJjb2RlJyxcbiAgICAgICAgJ0BpY29uaWZ5L2ljb25pZnknLFxuICAgICAgICAnYW50LWRlc2lnbi12dWUvZXMvbG9jYWxlL3poX0NOJyxcbiAgICAgICAgJ2FudC1kZXNpZ24tdnVlL2VzL2xvY2FsZS9lbl9VUycsXG4gICAgICAgICdALy4uL2xpYi92Zm9ybS9kZXNpZ25lci51bWQuanMnLFxuICAgICAgXSxcbiAgICB9LFxuICAgIGJ1aWxkOiB7XG4gICAgICAvKiBcdTUxNzZcdTRFRDZidWlsZFx1NzUxRlx1NEVBN1x1NjI1M1x1NTMwNVx1OTE0RFx1N0Y2RVx1NzcwMVx1NzU2NSAqL1xuICAgICAgLy8uLi5cbiAgICAgIHRhcmdldDogJ2VzbmV4dCcsXG4gICAgICBjb21tb25qc09wdGlvbnM6IHtcbiAgICAgICAgaW5jbHVkZTogW1xuICAgICAgICAgIC9ub2RlX21vZHVsZXN8bGliLyxcbiAgICAgICAgICAvbm9kZV9tb2R1bGVzfHBhY2thZ2VzL1xuICAgICAgICBdIC8vXHU4RkQ5XHU5MUNDXHU4QkIwXHU1Rjk3XHU2MjhBbGliXHU3NkVFXHU1RjU1XHU1MkEwXHU4RkRCXHU2NzY1XHVGRjBDXHU1NDI2XHU1MjE5XHU3NTFGXHU0RUE3XHU2MjUzXHU1MzA1XHU0RjFBXHU2MkE1XHU5NTE5XHVGRjAxXHVGRjAxXG4gICAgICB9LFxuICAgIH0sXG4gICAgc2VydmVyOiB7XG4gICAgICBwcm94eToge1xuICAgICAgICAnL2Jhc2ljLWFwaSc6IHtcbiAgICAgICAgICB0YXJnZXQ6ICdodHRwOi8vbG9jYWxob3N0OjMwMDAnLFxuICAgICAgICAgIGNoYW5nZU9yaWdpbjogdHJ1ZSxcbiAgICAgICAgICB3czogdHJ1ZSxcbiAgICAgICAgICByZXdyaXRlOiAocGF0aCkgPT4gcGF0aC5yZXBsYWNlKG5ldyBSZWdFeHAoYF4vYmFzaWMtYXBpYCksICcnKSxcbiAgICAgICAgICAvLyBvbmx5IGh0dHBzXG4gICAgICAgICAgLy8gc2VjdXJlOiBmYWxzZVxuICAgICAgICB9LFxuICAgICAgICAnL3VwbG9hZCc6IHtcbiAgICAgICAgICB0YXJnZXQ6ICdodHRwOi8vbG9jYWxob3N0OjMzMDAvdXBsb2FkJyxcbiAgICAgICAgICBjaGFuZ2VPcmlnaW46IHRydWUsXG4gICAgICAgICAgd3M6IHRydWUsXG4gICAgICAgICAgcmV3cml0ZTogKHBhdGgpID0+IHBhdGgucmVwbGFjZShuZXcgUmVnRXhwKGBeL3VwbG9hZGApLCAnJyksXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgICAgd2FybXVwOiB7XG4gICAgICAgIGNsaWVudEZpbGVzOiBbJy4vaW5kZXguaHRtbCcsICcuL3NyYy97dmlld3MsY29tcG9uZW50c30vKiddLFxuICAgICAgfSxcbiAgICB9LFxuICAgIGRlZmluZToge1xuICAgICAgJ3Byb2Nlc3MuZW52Jzoge1xuICAgICAgICBCQVNFX1VSTDogJy8nLFxuICAgICAgfSxcbiAgICB9LFxuICAgIGNzczoge1xuICAgICAgcHJlcHJvY2Vzc29yT3B0aW9uczoge1xuICAgICAgICBzY3NzOiB7XG4gICAgICAgICAgamF2YXNjcmlwdEVuYWJsZWQ6IHRydWUsXG4gICAgICAgICAgYWRkaXRpb25hbERhdGE6IGBAaW1wb3J0IFwic3JjL3N0eWxlcy9jb21tb24vc3R5bGUuc2Nzc1wiO2AsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH0sXG4gICAgcGx1Z2luczogW1xuICAgICAgbWFyczNkUGx1Z2luKClcbiAgICBdLFxuICB9LFxufSk7XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXdYLFNBQVMsK0JBQStCO0FBQ2hhLFNBQVEsb0JBQW1CO0FBRTNCLElBQU8sc0JBQVEsd0JBQXdCO0FBQUEsRUFDckMsV0FBVztBQUFBLElBQ1QsY0FBYztBQUFBLE1BQ1osU0FBUztBQUFBLFFBQ1A7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLE1BQ0Y7QUFBQSxJQUNGO0FBQUEsSUFDQSxPQUFPO0FBQUE7QUFBQTtBQUFBLE1BR0wsUUFBUTtBQUFBLE1BQ1IsaUJBQWlCO0FBQUEsUUFDZixTQUFTO0FBQUEsVUFDUDtBQUFBLFVBQ0E7QUFBQSxRQUNGO0FBQUE7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLElBQ0EsUUFBUTtBQUFBLE1BQ04sT0FBTztBQUFBLFFBQ0wsY0FBYztBQUFBLFVBQ1osUUFBUTtBQUFBLFVBQ1IsY0FBYztBQUFBLFVBQ2QsSUFBSTtBQUFBLFVBQ0osU0FBUyxDQUFDLFNBQVMsS0FBSyxRQUFRLElBQUksT0FBTyxhQUFhLEdBQUcsRUFBRTtBQUFBO0FBQUE7QUFBQSxRQUcvRDtBQUFBLFFBQ0EsV0FBVztBQUFBLFVBQ1QsUUFBUTtBQUFBLFVBQ1IsY0FBYztBQUFBLFVBQ2QsSUFBSTtBQUFBLFVBQ0osU0FBUyxDQUFDLFNBQVMsS0FBSyxRQUFRLElBQUksT0FBTyxVQUFVLEdBQUcsRUFBRTtBQUFBLFFBQzVEO0FBQUEsTUFDRjtBQUFBLE1BQ0EsUUFBUTtBQUFBLFFBQ04sYUFBYSxDQUFDLGdCQUFnQiw0QkFBNEI7QUFBQSxNQUM1RDtBQUFBLElBQ0Y7QUFBQSxJQUNBLFFBQVE7QUFBQSxNQUNOLGVBQWU7QUFBQSxRQUNiLFVBQVU7QUFBQSxNQUNaO0FBQUEsSUFDRjtBQUFBLElBQ0EsS0FBSztBQUFBLE1BQ0gscUJBQXFCO0FBQUEsUUFDbkIsTUFBTTtBQUFBLFVBQ0osbUJBQW1CO0FBQUEsVUFDbkIsZ0JBQWdCO0FBQUEsUUFDbEI7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLElBQ0EsU0FBUztBQUFBLE1BQ1AsYUFBYTtBQUFBLElBQ2Y7QUFBQSxFQUNGO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K
Write Preview
Loading…
Cancel
Save