|
|
@@ -0,0 +1,622 @@
|
|
|
+<template>
|
|
|
+ <div class="app-hbox">
|
|
|
+
|
|
|
+
|
|
|
+ <div class="app-main">
|
|
|
+ <div class="app-header">
|
|
|
+ <img src="@/assets/images/logo.png" class="logo" />
|
|
|
+ <div class="title">鹏威质量检测平台</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="app-body index " style="display: flex;justify-content: space-between;">
|
|
|
+ <!-- 实时 -->
|
|
|
+ <div class="shishi">
|
|
|
+ <img src="@/assets/images/photo/pic_zljc_bt_ssjc.png" alt="" style="margin-bottom: 17px;">
|
|
|
+ <div class='flexw'>
|
|
|
+ <div class="shishi_ong">
|
|
|
+ <p><span>1#FCCL覆铜压合机</span> <span>{{time}}</span></p>
|
|
|
+ <div style="position: relative;">
|
|
|
+ <!-- <img src="@/assets/images/photo/pic_ssjc_t1.png" alt=""
|
|
|
+ style="width: 100%;height: 317px;"> -->
|
|
|
+ <!-- <video id="video" autoplay width="100%" height="100%"></video> -->
|
|
|
+ <div id="divPlugin" :style="'width:'+width+'px;height:'+height+'px'" ></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p class="tit"><span>检测中</span> </p>
|
|
|
+ </div>
|
|
|
+ <div class="shishi_ong">
|
|
|
+ <p><span>1#FCCL覆铜压合机</span> <span>{{time}}</span></p>
|
|
|
+ <div>
|
|
|
+ <div id="divPlugina" :style="'width:'+width+'px;height:'+height+'px'" ></div>
|
|
|
+ <!-- <img src="@/assets/images/photo/pic_ssjc_t2.png" alt="" class="tjbg"> -->
|
|
|
+ </div>
|
|
|
+ <p class="tit"><span>检测中</span> </p>
|
|
|
+ </div>
|
|
|
+ <div class="shishi_ong tj">
|
|
|
+
|
|
|
+ <span
|
|
|
+ style="position: absolute;top: 50%;left: 50%;transform: translate(-50%);font-weight: bold;font-size: 24px;color: #A7A7A7;">
|
|
|
+ 停机</span>
|
|
|
+ </div>
|
|
|
+ <div class="shishi_ong tj">
|
|
|
+ <span
|
|
|
+ style="position: absolute;top: 50%;left: 50%;transform: translate(-50%);font-weight: bold;font-size: 24px;color: #A7A7A7;">
|
|
|
+ 停机</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ <div class="sujufen">
|
|
|
+ <img class="mb12" src="@/assets/images/photo/pic_zljc_bt_jcsjfx.png" alt="">
|
|
|
+ <!-- 数据分析 -->
|
|
|
+ <box-table :data="dataListc" type="home" :columns="columnc" tableHeight='356px'
|
|
|
+ :visibleRows='visibleRowsc'></box-table>
|
|
|
+ </div>
|
|
|
+ <!-- 统计 -->
|
|
|
+ <div class="tongju">
|
|
|
+ <div class="topimg">
|
|
|
+ <img src="@/assets/images/photo/pic_zljc_bt_ycsjtj.png" alt="" style="">
|
|
|
+ </div>
|
|
|
+ <div class="flext">
|
|
|
+ <div class="hcount">
|
|
|
+ <div class="hctop">1号机</div>
|
|
|
+ <div style="width: 100%;height: 300px;">
|
|
|
+ <homebar-charts :chart-data="hbarDataa" height='300px'></homebar-charts>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hcount">
|
|
|
+ <div class="hctop">2号机</div>
|
|
|
+ <div style="width: 100%;height: 300px;">
|
|
|
+ <homebar-charts :chart-data="hbarDatab" height='300px'></homebar-charts>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hcount">
|
|
|
+ <div class="hctop">3号机</div>
|
|
|
+ <div style="width: 100%;height: 300px;">
|
|
|
+ <div class="tjtit">停机</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hcount">
|
|
|
+ <div class="hctop">4号机</div>
|
|
|
+ <div style="width: 100%;height: 300px;">
|
|
|
+ <div class="tjtit">停机</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ // import { WebVideo } from '@/utils/webVideo.js'
|
|
|
+ // const Wfs= require('@/utils/sxt/wfs.js')
|
|
|
+ // const bases = require('../settings.js')
|
|
|
+ import boxTable from "./components/table.vue"
|
|
|
+ import homebarCharts from "./components/homebarcharts.vue"
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ boxTable,
|
|
|
+ homebarCharts
|
|
|
+ },
|
|
|
+ props:{
|
|
|
+ scale:'',
|
|
|
+ idx:0,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataListc: [
|
|
|
+ {xh: '1',kh: '1#FCCL覆铜压合机',nb: 'GD250517A103 ',sl: '155m',wcl:"黑点",zt: 'NG',time:'10:15:54'},
|
|
|
+ {xh: '2',kh: '2#FCCL覆铜压合机',nb: 'GD250517A204 ',sl: '149m',wcl:"黑点",zt: 'OK',time:'10:35:14'},
|
|
|
+ {xh: '3',kh: '2#FCCL覆铜 压合机',nb: 'GD250517A206 ',sl: '29m',wcl:"杂质",zt: 'NG',time:'11:25:51'},
|
|
|
+ {xh: '4',kh: '2#高精密烤箱',nb: 'GD250517A107 ',sl: '37m',wcl:"色差",zt: 'NG',time:'11:37:31'},
|
|
|
+ {xh: '1',kh: '1#FCCL覆铜压合机',nb: 'GD250517A207 ',sl: '50m',wcl:"黑点",zt: 'OK',time:'11:40:21'},
|
|
|
+ {xh: '3',kh: '3#高精密烤箱',nb: 'GD250517A109 ',sl: '105m',wcl:"杂质 ",zt: 'NG',time:'11:42:01'},
|
|
|
+ ],
|
|
|
+ visibleRowsc:4,
|
|
|
+ columnc:[{label:'异常图片',prop:'xh',width:"10%",type:'img'},{label:'机台号',prop:'kh',width:"25%"},{label:'卷号/时间',prop:'nb',width:"15%",type:'hh'},{label:'异常位置',prop:'sl',width:"10%"},{label:'异常类型',prop:'wcl',width:"10%"},{label:'OK/NG',prop:'zt',width:"15%"}],
|
|
|
+ hbarDataa:{data:['皱痕','刮痕','缺胶','拉线','黑点','杂质','色差'],bara:[0,0,1,0,2,1,1],},
|
|
|
+ hbarDatab:{data:['皱痕','刮痕','缺胶','拉线','黑点','杂质','色差'],bara:[2,3,0,0,1,4,1],},
|
|
|
+ time:'',
|
|
|
+ timer:null,
|
|
|
+ hkvInfo: {
|
|
|
+ ip: '192.168.101.64',
|
|
|
+ username: 'admin',
|
|
|
+ password: 'zxy123456',
|
|
|
+ port: '80'
|
|
|
+ },
|
|
|
+ g_iWndIndex:0,
|
|
|
+ iRtspPort:'',//预览中的ip
|
|
|
+ szDeviceIdentify:'',//ip_port
|
|
|
+ width:355,
|
|
|
+ height:317,
|
|
|
+ webRtcServer: null,
|
|
|
+ firstfalg:true
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.refreshTime()
|
|
|
+ this.timer = setInterval(this.refreshTime, 1000);
|
|
|
+ this.generateRandomTimes()
|
|
|
+ this.getVideo()
|
|
|
+ // this.webRtcServer = new WebRtcStreamer(
|
|
|
+ // "video",
|
|
|
+ // location.protocol + "//192.168.101.64:80" //这里是后端地址
|
|
|
+ // );
|
|
|
+
|
|
|
+ // this.webRtcServer.connect("rtsp://admin:zxy123456@192.168.150.64:554/h264/ch1/main/av_stream");//这是后端给的rtsp地址，海康的摄像头有说明，如果不会，私信我一下
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ scale(val){
|
|
|
+ var swidth=Number((355*Number(val))).toFixed(2)
|
|
|
+ var sheight=Number((317*Number(val))).toFixed(2)
|
|
|
+ // var sheight=Math.floor(317*Number(val))
|
|
|
+ setTimeout(function(){
|
|
|
+ WebVideoCtrl.I_Resize(swidth,sheight)
|
|
|
+ },200)
|
|
|
+ },
|
|
|
+ idx(val){
|
|
|
+ var that=this;
|
|
|
+ if(val==1){
|
|
|
+ if(that.firstfalg){
|
|
|
+ that.firstfalg=false;
|
|
|
+ }
|
|
|
+ that.getVideo()
|
|
|
+ }else{
|
|
|
+ if(WebVideoCtrl){
|
|
|
+ WebVideoCtrl.I_Logout(that.szDeviceIdentify)
|
|
|
+ WebVideoCtrl.I_DestroyPlugin()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ }
|
|
|
+ if(WebVideoCtrl){
|
|
|
+ WebVideoCtrl.I_Logout(this.szDeviceIdentify)
|
|
|
+ WebVideoCtrl.I_DestroyPlugin()
|
|
|
+ }
|
|
|
+ // this.webRtcServer.disconnect();
|
|
|
+
|
|
|
+ // this.webRtcServer = null;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ refreshTime() {
|
|
|
+ this.time = new Date().toLocaleString('zh-CN', {
|
|
|
+ year: 'numeric',
|
|
|
+ hour12: false,
|
|
|
+ month: '2-digit',
|
|
|
+ day: '2-digit',
|
|
|
+ hour: 'numeric',
|
|
|
+ minute: 'numeric',
|
|
|
+ second: 'numeric',
|
|
|
+ // weekday: 'long',
|
|
|
+ }).replace(/\//g, '-');
|
|
|
+ },
|
|
|
+ generateRandomTimes() {
|
|
|
+ const now = new Date();
|
|
|
+ const currentHours = now.getHours();
|
|
|
+ const currentMinutes = now.getMinutes();
|
|
|
+ const currentSeconds = now.getSeconds();
|
|
|
+
|
|
|
+ const times = [];
|
|
|
+
|
|
|
+ for (let i = 0; i < 6; i++) {
|
|
|
+ // 生成随机小时（0到当前小时）
|
|
|
+ const randomHours = Math.floor(Math.random() * currentHours);
|
|
|
+
|
|
|
+ // 生成随机分钟（如果小时等于当前小时，则限制分钟；否则0-59）
|
|
|
+ let randomMinutes;
|
|
|
+ if (randomHours === currentHours) {
|
|
|
+ randomMinutes = Math.floor(Math.random() * currentMinutes);
|
|
|
+ } else {
|
|
|
+ randomMinutes = Math.floor(Math.random() * 60);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 生成随机秒数（如果小时和分钟都等于当前，则限制秒；否则0-59）
|
|
|
+ let randomSeconds;
|
|
|
+ if (randomHours === currentHours && randomMinutes === currentMinutes) {
|
|
|
+ randomSeconds = Math.floor(Math.random() * currentSeconds);
|
|
|
+ } else {
|
|
|
+ randomSeconds = Math.floor(Math.random() * 60);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 格式化时间为HH:MM:SS
|
|
|
+ const timeString =
|
|
|
+ `${String(randomHours).padStart(2, '0')}:${String(randomMinutes).padStart(2, '0')}:${String(randomSeconds).padStart(2, '0')}`;
|
|
|
+ times.push(timeString);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 按时间排序
|
|
|
+ var time = times.sort();
|
|
|
+ time.forEach((ite, idx) => {
|
|
|
+ this.dataListc[idx].time = ite
|
|
|
+ })
|
|
|
+ console.log(this.randomTimes)
|
|
|
+ },
|
|
|
+ // 播放摄像头
|
|
|
+ getVideo() {
|
|
|
+ var that=this;
|
|
|
+ this.initVideoPlay('192.168.101.64', '80', 'admin', 'zxy123456','divPlugin')
|
|
|
+ this.initVideoPlay('192.168.101.64', '80', 'admin', 'zxy123456','divPlugina')
|
|
|
+ // this.initVideoPlay('192.168.101.64', '80', 'admin', 'zxy123456','')
|
|
|
+ // setTimeout(function() {
|
|
|
+ // //调用预览摄像头这里可以循环创建
|
|
|
+ // var a='192.168.101.64';
|
|
|
+ // var b='80';
|
|
|
+ // that.clickStartRealPlay(a, b,1, 0, 1);
|
|
|
+ // }, 5000);
|
|
|
+ },
|
|
|
+ // 有插件
|
|
|
+ initVideoPlay(ip, port, username, password,id) {
|
|
|
+ var that = this;
|
|
|
+ var g_iWndIndex = 0; //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
|
|
|
+ var g_oLocalConfig = null; //本地配置
|
|
|
+ // let ip = this.szIP //硬盘录像机ip
|
|
|
+ // let port = this.szPort //默认为80端口
|
|
|
+ // let username = this.szUsername //账号：
|
|
|
+ // let password = this.szPassword // 密码
|
|
|
+ var iRtspPort = ''
|
|
|
+
|
|
|
+ // 1.初始化插件参数及插入插件
|
|
|
+ WebVideoCtrl.I_InitPlugin({
|
|
|
+ bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
|
|
|
+ iWndowType: 1,
|
|
|
+ bDebugMode: true,
|
|
|
+ cbSelWnd: function(xmlDoc) {
|
|
|
+ g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
|
|
|
+ const szInfo = "当前选择的窗口编号：" + g_iWndIndex;
|
|
|
+ this.g_iWndIndex = g_iWndIndex;
|
|
|
+ console.log(szInfo, "szInfo");
|
|
|
+ },
|
|
|
+ cbDoubleClickWnd: function(iWndIndex, bFullScreen) {
|
|
|
+ let szInfo = "当前放大的窗口编号：" + iWndIndex;
|
|
|
+ if (!bFullScreen) {
|
|
|
+ szInfo = "当前还原的窗口编号：" + iWndIndex;
|
|
|
+ }
|
|
|
+ // console.log(szInfo, "szInfo");
|
|
|
+ },
|
|
|
+ cbEvent: function(iEventType, iParam1, iParam2) {
|
|
|
+ if (2 == iEventType) {
|
|
|
+ // 回放正常结束
|
|
|
+ console.log("窗口" + iParam1 + "回放结束！");
|
|
|
+ } else if (-1 == iEventType) {
|
|
|
+ console.log("设备" + iParam1 + "网络错误！");
|
|
|
+ } else if (3001 == iEventType) {
|
|
|
+ clickStopRecord(g_szRecordType, iParam1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //2.登录摄像头
|
|
|
+ cbInitPluginComplete: function() {
|
|
|
+ const oLiveView = {
|
|
|
+ iProtocol: 1, // protocol 1：http, 2:https
|
|
|
+ szIP: ip, // protocol ip
|
|
|
+ szPort: port, // protocol port
|
|
|
+ szUsername: username, // device username
|
|
|
+ szPassword: password, // device password
|
|
|
+ iStreamType: 1, // stream 1：main stream 2：sub-stream 3：third stream 4：transcode stream
|
|
|
+ iChannelID: 1, // channel no
|
|
|
+ bZeroChannel: false, // zero channel
|
|
|
+ };
|
|
|
+ var swidth=Number((355*Number(that.scale))).toFixed(2)
|
|
|
+ var sheight=Number((355*Number(that.scale))).toFixed(2)
|
|
|
+ console.log(that.scale,111111,id)
|
|
|
+
|
|
|
+ WebVideoCtrl.I_InsertOBJECTPlugin(id).then(
|
|
|
+ () => {
|
|
|
+ setTimeout(function(){
|
|
|
+ WebVideoCtrl.I_Resize(swidth,sheight)
|
|
|
+ },200)
|
|
|
+ WebVideoCtrl.I_Login(
|
|
|
+ oLiveView.szIP,
|
|
|
+ oLiveView.iProtocol,
|
|
|
+ oLiveView.szPort,
|
|
|
+ oLiveView.szUsername,
|
|
|
+ oLiveView.szPassword, {
|
|
|
+ timeout: 3000,
|
|
|
+ async: false,
|
|
|
+ success: function(xmlDoc) {
|
|
|
+ console.log(" 登录成功！");
|
|
|
+ let a = ip
|
|
|
+ let b = port
|
|
|
+ setTimeout(function() {
|
|
|
+ //延迟方法
|
|
|
+ setTimeout(function() {
|
|
|
+ //调用预览摄像头这里可以循环创建
|
|
|
+ that.clickStartRealPlay(a, b,1, 0, 1);
|
|
|
+ // that.clickStartRealPlay(a, b, 1, 1,2);
|
|
|
+ // that.clickStartRealPlay(a, b, 1, 2,3);
|
|
|
+ // clickStartRealPlay(a,b, 1, 3, 4);
|
|
|
+ // clickStartRealPlay(a,b, 1, 4, 5);
|
|
|
+ // clickStartRealPlay(a,b, 1, 5, 6);
|
|
|
+ // clickStartRealPlay(a,b, 1, 6, 7);
|
|
|
+ // clickStartRealPlay(a,b, 1, 7, 8);
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+
|
|
|
+ setTimeout(function() {
|
|
|
+ // 获取通道 (如果多个摄像头需要获取多个通道需要调用)
|
|
|
+ // getChannelInfo(a);
|
|
|
+ //获取端口 （在这里获取RTSP 端口号 预览时传入）
|
|
|
+ getDevicePort(a);
|
|
|
+ }, 10)
|
|
|
+
|
|
|
+ }, 10);
|
|
|
+ },
|
|
|
+ error: function(oError) {
|
|
|
+ console.log(" 登录失败！", oError);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ );
|
|
|
+ // 检查插件是否最新
|
|
|
+ WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
|
|
|
+ if (bFlag) {
|
|
|
+ alert(
|
|
|
+ "检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！"
|
|
|
+ );
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ () => {
|
|
|
+ alert(
|
|
|
+ "插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！"
|
|
|
+ );
|
|
|
+
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ },
|
|
|
+ });
|
|
|
+ // 3.获取通道
|
|
|
+ function getChannelInfo(a) {
|
|
|
+ var szDeviceIdentify = a,
|
|
|
+ oSel = null; //通道列表
|
|
|
+ if (null == szDeviceIdentify) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 模拟通道 有
|
|
|
+ WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
|
|
|
+ success: function(xmlDoc) {
|
|
|
+ var oChannels = $(xmlDoc).find("VideoInputChannel");
|
|
|
+
|
|
|
+ $.each(oChannels, function(i) {
|
|
|
+ var id = $(this).find("id").eq(0).text(),
|
|
|
+ name = $(this).find("name").eq(0).text();
|
|
|
+ if ("" == name) {
|
|
|
+ name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log(id + "通道id是")
|
|
|
+ // console.log(name + "通道name是")
|
|
|
+ });
|
|
|
+ console.log(szDeviceIdentify + " 获取模拟通道成功！");
|
|
|
+ },
|
|
|
+ error: function(oError) {
|
|
|
+ console.log(szDeviceIdentify + " 获取模拟通道失败！", oError.errorCode, oError.errorMsg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 数字通道
|
|
|
+ WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
|
|
|
+ success: function(xmlDoc) {
|
|
|
+ var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
|
|
|
+
|
|
|
+ $.each(oChannels, function(i) {
|
|
|
+ var id = $(this).find("id").eq(0).text(),
|
|
|
+ name = $(this).find("name").eq(0).text(),
|
|
|
+ online = $(this).find("online").eq(0).text();
|
|
|
+ if ("false" == online) { // 过滤禁用的数字通道
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ if ("" == name) {
|
|
|
+ name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
|
|
|
+ }
|
|
|
+ // console.log(id + "数字通道获取的id是")
|
|
|
+ // console.log(name + "数字通道获取的通道name是")
|
|
|
+ });
|
|
|
+ console.log(szDeviceIdentify + " 获取数字通道成功！");
|
|
|
+ },
|
|
|
+ error: function(oError) {
|
|
|
+ console.log(szDeviceIdentify + " 获取数字通道失败！", oError.errorCode, oError.errorMsg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 零通道
|
|
|
+ WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
|
|
|
+ success: function(xmlDoc) {
|
|
|
+ var oChannels = $(xmlDoc).find("ZeroVideoChannel");
|
|
|
+
|
|
|
+ $.each(oChannels, function(i) {
|
|
|
+ var id = $(this).find("id").eq(0).text(),
|
|
|
+ name = $(this).find("name").eq(0).text();
|
|
|
+ if ("" == name) {
|
|
|
+ name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
|
|
|
+ }
|
|
|
+ if ("true" == $(this).find("enabled").eq(0).text()) { // 过滤禁用的零通道
|
|
|
+ // console.log(id + "零通道获取的id是")
|
|
|
+ // console.log(name + "零通道获取的通道name是")
|
|
|
+ }
|
|
|
+ // console.log(id + "零通道获取的id是")
|
|
|
+ // console.log(name + "零通道获取的通道name是")
|
|
|
+ });
|
|
|
+ console.log(szDeviceIdentify + " 获取零通道成功！");
|
|
|
+ },
|
|
|
+ error: function(oError) {
|
|
|
+ console.log(szDeviceIdentify + " 获取零通道失败！", oError.errorCode, oError.errorMsg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ //4.获取端口
|
|
|
+ function getDevicePort(a) {
|
|
|
+ var szDeviceIdentify = a;
|
|
|
+
|
|
|
+ if (null == szDeviceIdentify) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then((oPort) => {
|
|
|
+ // console.log(oPort.iDevicePort + "iDevicePort的值是")
|
|
|
+ // console.log(oPort.iRtspPort + "iRtspPort的值是")
|
|
|
+ console.log(szDeviceIdentify + " 获取端口成功！");
|
|
|
+ iRtspPort = oPort.iRtspPort
|
|
|
+ that.iRtspPort = iRtspPort
|
|
|
+ }, (oError) => {
|
|
|
+ var szInfo = "获取端口失败！";
|
|
|
+ console.log(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
|
|
|
+ });
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 5.开始预览
|
|
|
+ clickStartRealPlay(szIP, szPort, iStreamType, iWndIndex, iChannelID) {
|
|
|
+ // console.log("szip" + ':' + szIP)
|
|
|
+ // console.log("iStreamType" + ':' + iStreamType)
|
|
|
+ // console.log("iWndIndex" + ':' + iWndIndex)
|
|
|
+ // console.log("iChannelID" + ':' + iChannelID)
|
|
|
+ // console.log("在预览方法中ip的值是" + ':' + this.iRtspPort)
|
|
|
+ // console.log('szDeviceIdentify' + ':' + szIP + "_8049")
|
|
|
+ var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex),
|
|
|
+ szDeviceIdentify = szIP + "_" + szPort, //ip
|
|
|
+ iChannelID = iChannelID,
|
|
|
+ bZeroChannel = false,
|
|
|
+ iPort = this.iRtspPort,
|
|
|
+ szInfo = "";
|
|
|
+ iStreamType = iStreamType;
|
|
|
+ if (null == szDeviceIdentify) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ this.szDeviceIdentify = szDeviceIdentify;
|
|
|
+ var startRealPlay = function() {
|
|
|
+ WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
|
|
|
+ iStreamType: iStreamType,
|
|
|
+ iChannelID: iChannelID,
|
|
|
+ bZeroChannel: bZeroChannel,
|
|
|
+ iWndIndex: iWndIndex, //要播放的窗口
|
|
|
+ iPort: iPort, //如果多个摄像头需要必填 （RTSP 端口号）
|
|
|
+ success: function() {
|
|
|
+ szInfo = "开始预览窗口" + iWndIndex + "成功！";
|
|
|
+ console.log(szDeviceIdentify + " " + szInfo);
|
|
|
+ },
|
|
|
+ error: function(oError) {
|
|
|
+ console.log(szDeviceIdentify + " 开始预览窗口" + iWndIndex + "失败！", oError
|
|
|
+ .errorCode, oError.errorMsg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ if (oWndInfo != null) { // 已经在播放了，先停止
|
|
|
+ WebVideoCtrl.I_Stop({
|
|
|
+ success: function() {
|
|
|
+ startRealPlay();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ startRealPlay();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ .plugin{width: 355px !important;height: 317px !important;display: block;}
|
|
|
+</style>
|
|
|
+<style lang="less" scoped>
|
|
|
+
|
|
|
+ ::v-deep thead{background: linear-gradient(90deg, #0172A6, #124572);}
|
|
|
+ .mb12{margin-bottom: 12px;}
|
|
|
+ .shishi{
|
|
|
+ width: 790px;
|
|
|
+ height: 897px;flex: 0 0 auto;
|
|
|
+ background: url("~@/assets/images/photo/pic_zljc_bk_z1.png") no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ padding: 17px 19px 9px 33px;box-sizing: border-box;margin-right: 26px;
|
|
|
+ }
|
|
|
+ .shishi_ong{
|
|
|
+ width: 355px;
|
|
|
+ height: 396px;margin: 0 14px 20px 0;
|
|
|
+ &.tj{
|
|
|
+ background: url("~@/assets/images/photo/pic_zljc_ssjc_tjbg.png") no-repeat;
|
|
|
+ background-size: contain;position: relative;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ margin: 0;
|
|
|
+ background-color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;padding: 0 11px;
|
|
|
+ color: #000000;
|
|
|
+ &.tit{padding-left: 18px;line-height: 38px;height: 38px;}
|
|
|
+ span{
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ span:nth-child(2){
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000000;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sujufen{
|
|
|
+ width: 950px;
|
|
|
+ height: 450px;
|
|
|
+ background-image: url("~@/assets/images/photo/pic_zljc_bk_y1.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 17px 30px;
|
|
|
+ .sujufen_ong{
|
|
|
+ background: linear-gradient(90deg, #0172A6, #124572);
|
|
|
+ height: 35px;
|
|
|
+ div{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 35px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sujufen_two{
|
|
|
+ div{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #B8FFFF;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tongju{
|
|
|
+ width: 100%;
|
|
|
+ height: 425px;
|
|
|
+ background-image: url("../assets/images/photo/pic_zljc_bk_y2.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 17px 10px;
|
|
|
+ margin-top: 22px;
|
|
|
+ .topimg{
|
|
|
+ margin-bottom: 14px;padding: 0 29px;
|
|
|
+ img{width: 138px;height: 22px;}
|
|
|
+ }
|
|
|
+ .hcount{width: 25%;flex:0 0auto;
|
|
|
+ .hctop{width: 154px;height: 41px;background: url("../assets/images/photo/pic_zljc_jqbt_bg.png") no-repeat;margin: 0 auto ; background-size: 100% 100%;font-weight: bold;font-size: 18px;color: #FFFFFF;display: flex;align-items: center;justify-content: center;margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .tjtit{font-weight: bold;display: flex;align-items: center;justify-content: center;
|
|
|
+ font-size: 18px;width: 100%;height: 100%;
|
|
|
+ color: #A7A7A7;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // .videoplugin{position: fixed;left: 0;right: 0;bottom: 0;}
|
|
|
+</style>
|
zouling