完善视频监控

public/components/property/cameraControlInfo/cameraControlInfo.html

@@ -0,0 +1,34 @@
+<div class="row">
+    <div class="col-md-1 ">
+        <div class="vc-line-y"></div>
+    </div>
+    <div class="col-md-11">
+        <div>
+            <p>摄像头信息</p>
+        </div>
+        <div class="form-group">
+            <label class="col-form-label">设备编码：</label>
+            <label class="">{{cameraControlInfo.machineCode}}</label>
+        </div>
+        <div class="form-group">
+            <label class="col-form-label">版本号：</label>
+            <label class="">{{cameraControlInfo.machineVersion}}</label>
+        </div>
+        <div class="form-group">
+            <label class="col-form-label">设备名称：</label>
+            <label class="">{{cameraControlInfo.machineName}}</label>
+        </div>
+        <div class="form-group">
+            <label class="col-form-label">设备类型：</label>
+            <label class="">{{cameraControlInfo.machineTypeCd}}</label>
+        </div>
+        <div class="form-group">
+            <label class="col-form-label">设备IP：</label>
+            <label class="">{{cameraControlInfo.machineIp}}</label>
+        </div>
+        <div class="form-group">
+            <label class="col-form-label">设备MAC：</label>
+            <label class="">{{cameraControlInfo.machineMac}}</label>
+        </div>
+    </div>
+</div>

public/components/property/cameraControlInfo/cameraControlInfo.js

@@ -0,0 +1,40 @@
+/**
+ 入驻小区
+ **/
+(function (vc) {
+    vc.extends({
+        data: {
+            cameraControlInfo: {
+                machineCode: '',
+                machineVersion: '',
+                machineName: '',
+                machineTypeCd: '',
+                machineIp: '',
+                machineMac: '',
+                machineId: ''
+            }
+        },
+        _initMethod: function () {
+        },
+        _initEvent: function () {
+            vc.on('cameraControlInfo', 'notify', function (_data) {
+                $that.refreshCameraControlInfo();
+                vc.copyObject(_data._machine, $that.cameraControlInfo);
+            });
+
+        },
+        methods: {
+            refreshCameraControlInfo: function () {
+                vc.component.cameraControlInfo = {
+                    machineCode: '',
+                    machineVersion: '',
+                    machineName: '',
+                    machineTypeCd: '',
+                    machineIp: '',
+                    machineMac: '',
+                    machineId: ''
+                }
+            }
+        }
+    });
+})(window.vc);

public/components/property/cameraControlVideo/cameraControlVideo.html

@@ -0,0 +1,30 @@
+<div>
+    <div class="form-group row">
+        <label class="col-sm-2 col-form-label">显示方式</label>
+        <div class="col-sm-10">
+            <select class="custom-select" v-model="cameraControlVideoInfo.showType"
+                @change="_initShowType(cameraControlVideoInfo.showType)">
+                <option value="606">1*1显示</option>
+                <option value="607">2*2显示</option>
+                <option value="608">3*3显示</option>
+                <option value="609">4*4显示</option>
+            </select>
+        </div>
+    </div>
+    <div class="row">
+        <!-- 2*2-->
+        <div class="row col-md-12">
+            <div class="col-md-6" name="showName" v-for="(valueItem,valueIndex) in cameraControlVideoInfo.machines"
+                @click="_openCameraControlInfoVideo(valueItem)" @dblclick="openFullscreen($event)"
+                style="margin-top: 5px">
+                <div class="form-group" :id="valueIndex">
+                    <img width="100%" src="../../../img/init.jpg" :id="valueItem.machineId" height="450px" />
+                </div>
+
+            </div>
+        </div>
+
+    </div>
+    <!-- 分页 -->
+    <vc:create path="frame/pagination"></vc:create>
+</div>

public/components/property/cameraControlVideo/cameraControlVideo.js

@@ -0,0 +1,155 @@
+/**
+ 入驻小区
+ **/
+(function (vc) {
+    var DEFAULT_PAGE = 1;
+    var DEFAULT_ROWS = 1;
+    vc.extends({
+        data: {
+            cameraControlVideoInfo: {
+                paId: '',
+                inMachineId: '',
+                outMachineId: '',
+                machines: [],
+                showType:'606',
+                outMachines: []
+
+            }
+        },
+        _initMethod: function () {
+            $that._initShowType($that.cameraControlVideoInfo.showType);
+
+        },
+        _initEvent: function () {
+            vc.on('cameraControlVideo', 'notify', function (param) {
+            })
+            vc.on('pagination', 'page_event', function (_currentPage) {
+                vc.component._listMachines(_currentPage, DEFAULT_ROWS);
+            });
+            vc.on('cameraControlInfo', 'page_event', function (_currentPage) {
+                vc.component._listMachines(_currentPage, DEFAULT_ROWS);
+            });
+        },
+        methods: {
+            _listMachines: function (_page, _rows) {
+                let param = {
+                    params: {
+                        page: _page,
+                        row: _rows,
+                        machineTypeCd: '9998',
+                        communityId: vc.getCurrentCommunity().communityId
+                    }
+                }
+                //发送get请求
+                vc.http.get('machineManage',
+                    'list',
+                    param,
+                    function (json, res) {
+                        let _machineManageInfo = JSON.parse(json);
+                        $that.cameraControlVideoInfo.machines = _machineManageInfo.machines;
+                        let _machine = $that.cameraControlVideoInfo.machines[0];
+                        vc.emit('pagination', 'init', {
+                            total: _machineManageInfo.records,
+                            currentPage: _page
+                        });
+                        vc.emit('cameraControlInfo', 'notify', {
+                            _machine
+                        });
+                    }, function (errInfo, error) {
+                        console.log('请求失败处理');
+                    }
+                );
+            },
+            _swatchVedio: function () {
+                //创建一个socket实例
+                let wsUrl = "";
+                let _enterMachineId = $that.cameraControlVideoInfo.inMachineId;
+                vc.emit('parkingAreaControl', 'notify', {
+                    inMachineId: _enterMachineId
+                });
+                $that.cameraControlVideoInfo.inMachines.forEach((item) => {
+                    if (item.machineId == _enterMachineId) {
+                        wsUrl = item.machineIp;
+                        if (item.machineVersion.indexOf('300') > -1) {
+                            wsUrl += "/ws.flv"
+                        } else {
+                            wsUrl += "/ws"
+                        }
+                    }
+                });
+
+                wsUrl = wsUrl.replace(':8131', ':9080');
+                let _protocol = window.location.protocol;
+                if (_protocol.startsWith('https')) {
+                    wsUrl =
+                        "wss://" + wsUrl;
+                } else {
+                    wsUrl =
+                        "ws://" + wsUrl;
+                }
+                let image = document.getElementById("receiver1");
+                if (wsUrl.endsWith(".flv")) {
+                    image = document.getElementById("receiver1Div");
+                    let jessibuca = new Jessibuca({
+                        container: image,
+                        videoBuffer: 0.2,
+                        isResize: false,
+                    });
+                    jessibuca.onLoad = function () {
+                        this.play(wsUrl);
+                    };
+                    return;
+                }
+                let receiver_socket = new WebSocket(wsUrl);
+                // 监听消息
+                receiver_socket.onmessage = function (data) {
+                    let reader = new FileReader();
+                    reader.onload = function (evt) {
+                        if (evt.target.readyState == FileReader.DONE) {
+                            let url = evt.target.result;
+                            image.src = "data:image/png;" + url;
+                        }
+                    };
+                    reader.readAsDataURL(data.data);
+                };
+            },
+            openFullscreen: function (e) {
+                var parents = $(e.target).parent().parent();
+     
+                // $('#' + parents[0].id).height(650);
+                // $('#' + parents[0].id).width(400);
+                // $('#'+ parents[0].id).toggle(function () {
+                //     $('#' + parents[0].id).height($('#' + parents[0].id).height() + 600);
+                // }, function () {
+                //     $('#' + parents[0].id).height($('#' + parents[0].id).height() - 100);
+                // })
+            },
+            _openCameraControlInfoVideo: function (_machine) {
+                vc.emit('cameraControlInfo', 'notify', {
+                    _machine
+                });
+            },
+            _initShowType: function(_typeCd){
+                if(_typeCd == '606'){
+                    DEFAULT_ROWS=1;
+                   $("div[name='showName']").attr('class','col-md-12');
+                }
+                if(_typeCd == '607'){
+                    DEFAULT_ROWS=4;
+                   $("div[name='showName']").attr('class','col-md-6');
+                }
+                if(_typeCd == '608'){
+                    DEFAULT_ROWS=9;
+                   $("div[name='showName']").attr('class','col-md-4');
+                }
+                if(_typeCd == '609'){
+                    DEFAULT_ROWS=16;
+                   $("div[name='showName']").attr('class','col-md-3');
+                }
+                $that._listMachines(DEFAULT_PAGE, DEFAULT_ROWS);
+                
+            }
+
+        }
+    });
+})(window.vc);

public/components/property/parkingAreaControlVideo/parkingAreaControlVideo.html

@@ -66,12 +66,12 @@
     <div class="row">
         <div class="col-md-6">
             <div id="receiver1Div">
-                <img width="100%" height="350px" id="receiver1"/>
+                <img width="100%" src="../../../img/init.jpg" height="350px" id="receiver1"/>
             </div>
         </div>
         <div class="col-md-6">
             <div id="receiver2Div">
-                <img width="100%" height="350px" id="receiver2"/>
+                <img width="100%" src="../../../img/init.jpg" height="350px" id="receiver2"/>
             </div>
         </div>
     </div>

public/pages/property/videoControl/videoControl.html

@@ -0,0 +1,9 @@
+<div class="white-bg padding" style="margin-top:-20px">
+    <div class="row">
+        <div class="col-md-10">
+            <vc:create path="property/cameraControlVideo"></vc:create>
+        </div>    
+        <div class="col-md-2">
+            <vc:create path="property/cameraControlInfo"></vc:create>
+        </div>
+    </div>

public/pages/property/videoControl/videoControl.js

@@ -0,0 +1,140 @@
+/**
+ 入驻小区
+ **/
+(function (vc) {
+    vc.extends({
+        data: {
+            parkingAreaControlInfo: {
+                _currentTab: 'parkingAreaControlCarInout',
+                paId: '',
+                inMachineId: '',
+                outMachineId: '',
+
+            }
+        },
+        _initMethod: function () {
+            $that.parkingAreaControlInfo.paId = vc.getParam('paId');
+            $that._initParkingAreaWs();
+            vc.emit('parkingAreaControlVideo', 'notify', {
+                paId: $that.parkingAreaControlInfo.paId
+            });
+        },
+        _initEvent: function () {
+            vc.on('parkingAreaControl', 'notify', function (_param) {
+                vc.copyObject(_param, $that.parkingAreaControlInfo);
+            })
+        },
+        methods: {
+            changeTab: function (_tab) {
+                $that.parkingAreaControlInfo._currentTab = _tab;
+                vc.emit(_tab, 'switch', {
+                    paId: $that.parkingAreaControlInfo.paId
+                })
+            },
+            _initParkingAreaWs: function () {
+                let clientId = vc.uuid();
+                let heartCheck = {
+                    timeout: 30000,        // 9分钟发一次心跳，比server端设置的连接时间稍微小一点，在接近断开的情况下以通信的方式去重置连接时间。
+                    serverTimeoutObj: null,
+                    pingTime: new Date().getTime(),
+                    reset: function () {
+                        clearTimeout(this.serverTimeoutObj);
+                        return this;
+                    },
+                    start: function () {
+                        let self = this;
+                        this.serverTimeoutObj = setInterval(function () {
+                            if (websocket.readyState == 1) {
+                                console.log("连接状态，发送消息保持连接");
+                                let _pingTime = new Date().getTime();
+                                //保护，以防 异常
+                                if (_pingTime - self.pingTime < 15 * 1000) {
+                                    return;
+                                }
+                                websocket.send("{'cmd':'ping'}");
+                                self.pingTime = _pingTime;
+
+                                heartCheck.reset().start();    // 如果获取到消息，说明连接是正常的，重置心跳检测
+                            } else {
+                                console.log("断开状态，尝试重连");
+                                $that._initParkingAreaWs();
+                            }
+                        }, this.timeout)
+                    }
+                }
+
+                let _protocol = window.location.protocol;
+                let url = '';
+                if (_protocol.startsWith('https')) {
+                    url =
+                        "wss://" + window.location.host + "/ws/parkingArea/" +
+                        $that.parkingAreaControlInfo.paId + "/" + clientId;
+                } else {
+                    // url =
+                    //     "ws://" + window.location.host + "/ws/parkingArea/" +
+                    //     $that.parkingAreaControlInfo.paId + "/" + clientId;
+                    url =
+                        "ws://demo.homecommunity.cn:9011/ws/parkingArea/" +
+                        $that.parkingAreaControlInfo.paId + "/" + clientId;
+                }
+
+
+                if ("WebSocket" in window) {
+                    websocket = new WebSocket(url);
+                } else if ("MozWebSocket" in window) {
+                    websocket = new MozWebSocket(url);
+                } else {
+                    websocket = new SockJS(url);
+                }
+
+                //连接发生错误的回调方法
+                websocket.onerror = function (_err) {
+                    console.log("初始化失败", _err);
+                    this.$notify.error({
+                        title: "错误",
+                        message: "连接失败，请检查网络"
+                    });
+                };
+
+                //连接成功建立的回调方法
+                websocket.onopen = function () {
+                    heartCheck.reset().start();
+                    console.log("ws初始化成功");
+                };
+
+                //接收到消息的回调方法
+                websocket.onmessage = function (event) {
+                    heartCheck.reset().start();
+                    console.log("event", event);
+                    let _data = event.data;
+                    try {
+                        _data = JSON.parse(_data);
+                    } catch (err) {
+                        return;
+                    }
+
+                    vc.emit('parkingAreaControlCarInout', 'notify', {
+                        data: _data,
+                        parkingAreaControl: $that.parkingAreaControlInfo
+                    });
+                    vc.emit('parkingAreaControlFee', 'notify', _data);
+                };
+
+                //连接关闭的回调方法
+                websocket.onclose = function () {
+                    console.log("初始化失败");
+                    //$that._initParkingAreaWs();
+                    this.$notify.error({
+                        title: "错误",
+                        message: "连接关闭，请刷新浏览器"
+                    });
+                };
+
+                //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+                window.onbeforeunload = function () {
+                    websocket.close();
+                };
+            }
+        }
+    });
+})(window.vc);