fix:"摄像头"

This commit is contained in:
Li xia 2024-09-19 09:34:46 +08:00
parent 33a55ffa65
commit f91ed595f2
6 changed files with 406 additions and 74 deletions

View File

@ -200,4 +200,4 @@
}
</script>
</html>
</html>

File diff suppressed because one or more lines are too long

View File

@ -171,6 +171,7 @@
return oPromise
};
var _initPlugin = function (szContainerID) {
let oPromise = new Promise(function (resolve, reject) {
if (!m_utilsInc.isUndefined(szContainerID)) {
m_options.szContainerID = szContainerID
@ -598,6 +599,7 @@
}
;
this.I_Login = function (szIP, iProtocol, iPort, szUserName, szPassword, options) {
let oPromise = new Promise(function (resolve, reject) {
var szDeviceIdentify = szIP + "_" + iPort;
var iIndex = this.findDeviceIndexByIP(szDeviceIdentify);

View File

@ -223,10 +223,16 @@
</div>
<span>监控设备</span>
</div>
<div class="infoLine">
<span :class="['circles', {'circles_1':eqk.running_state==10}]"></span>
<span>{{ eqk.name }}</span>
<div class="infoLine">
<span class="circles"></span>
<span>{{ eqj.name }}</span>
</div>
<el-row class="infoLine">
<el-col :span="12">
<div id="divPlugin" class="plugin"></div>
</el-col>
</el-row>
</div>
</div>
</el-aside>
@ -348,8 +354,9 @@ export default {
eqs: {},//
eqc: {},//
eqz: {},//
eqk: {},//
eqj: {},//
resizeTimeout:null,
}
},
mounted() {
@ -382,6 +389,24 @@ export default {
this.$emit('close')
},
handleClick() {
//退
//退
WebVideoCtrl.I_Stop({
success: function () {
console.log("停止预览成功!");
},
error: function (oError) {
console.log("停止预览失败!")
}
}).then(()=>{
//退
WebVideoCtrl.I_Logout(this.ip).then(() => {
console.log(this.ip + " " + "退出成功!");
WebVideoCtrl.I_DestroyPlugin();//
}, () => {
console.log(this.ip + " " + "退出失败!");
});
});
this.pfkdetail = false;
this.detailItem = {};
},
@ -389,6 +414,7 @@ export default {
this.pfkdetail = true;
this.detailItem = row;
this.$nextTick(() => {
this.init()
this.getEquipments(row.equipments);
})
@ -404,7 +430,11 @@ export default {
that.eqc = res;
} else if (res.type == 30) {
that.eqz = res;
}
}else if (res.type == 50) { //
that.eqj = res;
this.ip = res.ip;
this.login();
}
}))
});
const promise = Promise.all(reqs);
@ -492,12 +522,68 @@ export default {
that.resizeChart("dataChart");
that.resizeChart("dataChart2");
that.resizeChart("dataChart3");
}, 300);
}, 300);
},
//
//
init() {
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
WebVideoCtrl.I_InitPlugin("divPlugin", "100%", "100%", {
iWndowType: 2, //N*N
bWndFull: true, //
cbInitPluginCompleted: function () {
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
//
WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
if (bFlag) {
alert("检测到新的插件版本双击开发包目录里的HCWebSDKPlugin.exe升级");
}
});
}, () => {
alert("插件初始化失败请确认是否已安装插件如果未安装请双击开发包目录里的HCWebSDKPlugin.exe安装");
});
},
});
},
//
login(){
WebVideoCtrl.I_Login(
this.eqj.ip,
1,
this.eqj.port,
this.eqj.login_name,
this.eqj.login_pwd,
{
async: true,
cgi: 1,
success: (xmlDoc) => {
console.log("登录成功", xmlDoc);
//
WebVideoCtrl.I_StartRealPlay(this.eqj.ip + "_" + this.eqj.port, {
success: () => {
console.log("预览成功");
},
});
},
error: (xmlDoc) => {
console.log("登录失败", xmlDoc);
},
}
);
}
}
}
</script>
<style>
/*监控设备样式*/
.plugin {
width: 200px;
height: 200px;
/* background: #ffffff; */
border: 2px solid rgba(237, 159, 23, 0.8);
}
.tableBg {
width: 100%;
height: 88vh;
@ -661,4 +747,4 @@ export default {
font-size:40px;
margin:4px;
}
</style>
</style>

View File

@ -329,12 +329,13 @@ export default {
yAxis: {},
series: [{ type: 'line' }]
},
}
},
mounted() {
let that = this;
that.init();
},
mounted() {
},
methods: {
initDom() {
var chart1 = echarts.init(document.getElementById('dataChart'), 'dark');
@ -359,12 +360,16 @@ export default {
this.$refs.table.queryData(this.query);
},
rowClick(row) {
this.pollutantDetail = true;
this.detailItem = row;
this.$nextTick(() => {
this.init();
this.getEquipments(row.equipments);
this.initTimeNow();
this.initDom();
})
},
getEquipments(ids) {
@ -384,9 +389,11 @@ export default {
that.getDetailData(3, id);
}
else if (res.type == 50) { //
debugger;
this.login(res);//
that.eqj = res;
this.ip = res.ip;
this.login();
}
})
});
@ -444,55 +451,70 @@ export default {
// }
})
},
handleClick() {
this.pollutantDetail = false;
handleClick() {
//退
//退
WebVideoCtrl.I_Stop({
success: function () {
console.log("停止预览成功!");
},
error: function (oError) {
console.log("停止预览失败!")
}
}).then(()=>{
//退
WebVideoCtrl.I_Logout(this.ip).then(() => {
console.log(this.ip + " " + "退出成功!");
WebVideoCtrl.I_DestroyPlugin();//
}, () => {
console.log(this.ip + " " + "退出失败!");
});
});
this.pollutantDetail = false;
this.detailItem = {};
},
//
//
init() {
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
//
alert(1)
WebVideoCtrl.I_InitPlugin("divPlugin", 200, 200, {
WebVideoCtrl.I_InitPlugin("divPlugin", "100%", "100%", {
iWndowType: 2, //N*N
bWndFull: true, //
cbInitPluginCompleted: function () {
alert(1)
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
//
WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
if (bFlag) {
alert("检测到新的插件版本双击开发包目录里的HCWebSDKPlugin.exe升级");
}
});
}, () => {
alert("插件初始化失败请确认是否已安装插件如果未安装请双击开发包目录里的HCWebSDKPlugin.exe安装");
});
},
});
},
}, () => {
alert("插件初始化失败请确认是否已安装插件如果未安装请双击开发包目录里的HCWebSDKPlugin.exe安装");
});
},
});
},
//
login(jkdata){
login(){
WebVideoCtrl.I_Login(
jkdata.ip,
this.eqj.ip,
1,
jkdata.port,
jkdata.login_name,
jkdata.login_pwd,
this.eqj.port,
this.eqj.login_name,
this.eqj.login_pwd,
{
async: true,
cgi: 1,
success: (xmlDoc) => {
console.log("登录成功", xmlDoc);
//
WebVideoCtrl.I_StartRealPlay(szIp + "_" + ipPort, {
WebVideoCtrl.I_StartRealPlay(this.eqj.ip + "_" + this.eqj.port, {
success: () => {
console.log("预览成功");
},
@ -503,8 +525,7 @@ export default {
},
}
);
}
}
}
}
</script>
@ -513,5 +534,6 @@ export default {
width: 200px;
height: 200px;
/* background: #ffffff; */
border: 2px solid rgba(237, 159, 23, 0.8);
}
</style>

View File

@ -1,26 +1,96 @@
<template>
<el-container>
<el-aside width="20%">
<div class="leftDiv">
<el-divider content-position="left">登录预览</el-divider>
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="10">
<div class="grid-content bg-purple-light">
<el-button @click="Login" type="text">登录</el-button>
</div>
</el-col>
<el-col :span="10">
<div class="grid-content bg-purple-light">
<el-button @click="logOut" type="text">登出设备</el-button>
</div>
</el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="10">
<div class="grid-content bg-purple-light">
<el-button @click="vShow" type="text">预览</el-button>
</div>
</el-col>
<el-col :span="10">
<div class="grid-content bg-purple-light">
<el-button @click="stopShow" type="text">停止预览</el-button>
</div>
</el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="10">
<div class="grid-content bg-purple-light">
<el-button @click="breakdom" type="text">销毁设备</el-button>
</div>
</el-col>
<el-col :span="10">
<div class="grid-content bg-purple-light">
<el-button @click="init" type="text">初始化设备</el-button>
</div>
</el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="10">
<div class="grid-content bg-purple-light">
<el-button @click="clickOpenSound" type="text">打开声音</el-button>
</div>
</el-col>
<el-col :span="10">
<div class="grid-content bg-purple-light">
<el-button @click="clickCloseSound" type="text">关闭声音</el-button>
</div>
</el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
<el-col >
<div class="grid-content bg-purple-light">
<el-row>
<el-col :span="12">
<el-button disabled type="text">窗口分割数</el-button>
</el-col>
<el-col :span="12" >
<el-select v-model="video_value" placeholder="请选择" @change="changeWndNum()" style="width:80%;">
<el-option v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
</el-aside>
<el-main>
<div class="about">
<div id="divPlugin" class="plugin"></div>
<div style="margin-top: 30px;">
<el-button @click="Login" type="primary">登录</el-button>
<el-button @click="vShow" type="primary">预览</el-button>
<el-button @click="stopShow" type="warning">停止预览</el-button>
<el-button @click="logOut" type="warning">登出设备</el-button>
<el-button @click="breakdom" type="warning">销毁设备</el-button>
<el-button @click="init" type="warning">初始化设备</el-button>
<el-select v-model="video_value" placeholder="请选择" @change="changeWndNum()">
<el-option v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div id="divPlugin" class="plugin"></div>
</el-main>
</el-container>
</template>
@ -53,19 +123,22 @@ export default {
value: 4,
label: '4x4'
}
]
],
};
},
mounted() {
let that = this;
that.init();
},
methods: {
//
init() {
// alert('init')
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
WebVideoCtrl.I_InitPlugin("divPlugin", 600, 600, {
WebVideoCtrl.I_InitPlugin("divPlugin", "100%", "100%", {
iWndowType: 2, //N*N
bWndFull: true, //
cbInitPluginCompleted: function () {
@ -82,6 +155,7 @@ export default {
});
},
});
},
//
Login() {
@ -95,10 +169,26 @@ export default {
async: true,
cgi: 1,
success: (xmlDoc) => {
console.log("登录成功", xmlDoc);
//TODO
this.getChannelInfo();
this.$message({
showClose: true,
message: '登录成功!',
type: 'success'
});
},
error: (xmlDoc) => {
console.log("登录失败", xmlDoc);
this.$message({
showClose: true,
message: '登录失败!',
type: 'error'
});
},
}
);
@ -107,8 +197,20 @@ export default {
vShow() {
WebVideoCtrl.I_StartRealPlay(this.szIp + "_" + this.ipPort, {
success: () => {
console.log("预览成功");
},
this.$message({
showClose: true,
message: '预览成功!',
type: 'success'
});
},error: () => {
this.$message({
showClose: true,
message: '预览失败!',
type: 'error'
});
},
});
@ -122,10 +224,19 @@ export default {
if (oWndInfo != null) {
WebVideoCtrl.I_Stop({
success: function () {
console.log("停止预览成功!")
this.$message({
showClose: true,
message: '停止预览成功!',
type: 'success'
});
},
error: function (oError) {
console.log("停止预览失败!")
this.$message({
showClose: true,
message: '停止预览失败!',
type: 'error'
});
}
});
}
@ -137,6 +248,7 @@ export default {
},
//
logOut() {
//WebVideoCtrl.I_Logout(this.szIp + "_" + this.ipPort, {});
var szDeviceIdentify =this.szIp;
@ -144,14 +256,35 @@ export default {
return;
}
WebVideoCtrl.I_Logout(szDeviceIdentify).then(() => {
console.log(szDeviceIdentify + " " + "退出成功!");
this.$message({
showClose: true,
message: '退出成功!',
type: 'success'
});
}, () => {
console.log(szDeviceIdentify + " " + "退出失败!");
this.$message({
showClose: true,
message: '退出成功!',
type: 'error'
});
});
},
//
breakdom() {
WebVideoCtrl.I_DestroyPlugin();
WebVideoCtrl.I_DestroyPlugin().then(() => {
this.$message({
showClose: true,
message: '插件已销毁!',
type: 'success'
});
}, () => {
this.$message({
showClose: true,
message: '插件销毁失败!',
type: 'error'
});
});
},
//
@ -173,14 +306,103 @@ export default {
console.log(szInfo, oError.errorCode, oError.errorMsg);
});
}
}
},
//
clickOpenSound() {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
szInfo = "";
if (oWndInfo != null) {
var allWndInfo = WebVideoCtrl.I_GetWindowStatus();
//
for (var i = 0, iLen = allWndInfo.length; i < iLen; i++) {
oWndInfo = allWndInfo[i];
if (oWndInfo.bSound) {
WebVideoCtrl.I_CloseSound(oWndInfo.iIndex);
break;
}
}
WebVideoCtrl.I_OpenSound().then(() => {
console.log(oWndInfo.szDeviceIdentify + " " + "打开声音成功!");
}, (oError) => {
var szInfo = " 打开声音失败!";
console.log(oWndInfo.szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
});
}
},
//
clickCloseSound() {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0),
szInfo = "";
if (oWndInfo != null) {
WebVideoCtrl.I_CloseSound().then(() => {
console.log(oWndInfo.szDeviceIdentify + " " + "关闭声音成功!");
}, (oError) => {
var szInfo = " 关闭声音失败!";
console.log(oWndInfo.szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
});
}
},
},
};
</script>
<style scoped>
.plugin {
width: 600px;
height: 600px;
/* background: #ffffff; */
width:100%;
height:100%;
border: 2px solid rgb(45 188 51);
}
.leftDiv{
margin-top:10px;
width:95%
}
.el-row {
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
text-align:center;
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a8bf;
}
.bg-purple {
background: #1ab5cd;
}
.bg-purple-light {
background: #25a1ad;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
}
.row-bg .el-button{
border:none
}
.bg-purple-left {
background: #25a1ad;
width:80%;
}
.bg-purple-center {
background: #25a1ad;
width:80%;
}
.bg-purple-right {
background: #25a1ad;
width:80%;
}
.yuntai .el-button{
border:none
}
</style>