jhbigscreen/src/pages/projectVideo.vue

<template>
    <div class="project-video">
        <!--大屏背景-->
        <background-video></background-video>
        <div class="screen-content-max">
            <screen-header :nav="6"></screen-header>
            <div class="screen-content">
                <div class="analyse-equipment analyse-equipment-position">视频监控</div>
                <el-row>
                    <el-col :span="6">
                        <module-one-1-1 label="视频概况" :amplify="true" name="amplify-spjk">
                            <div class="equipment-list-max">
                                <el-row>
                                    <el-col :span="12">
                                        <div class="equipment-list-min">
                                            <div class="equipment-list-gif">
                                                <img src="images/video_1.png">
                                            </div>
                                            <div class="equipment-list-data">
                                                <p>项目监控</p>
                                                <div><span v-cloak>{{ cqNum }}</span>个</div>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="equipment-list-min">
                                            <div class="equipment-list-gif">
                                                <img src="images/video_2.png">
                                            </div>
                                            <div class="equipment-list-data">
                                                <p>吊钩监控</p>
                                                <div><span v-cloak>{{ dgNum }}</span>个</div>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="equipment-list-min">
                                            <div class="equipment-list-gif">
                                                <img src="images/video_3.png">
                                            </div>
                                            <div class="equipment-list-data">
                                                <p>AI识别监控</p>
                                                <div><span v-cloak>{{ aiNum }}</span>个</div>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="equipment-list-min">
                                            <div class="equipment-list-gif">
                                                <img src="images/video_4.png">
                                            </div>
                                            <div class="equipment-list-data">
                                                <p>离线视频</p>
                                                <div><span v-cloak>{{ offLineNum }}</span>个</div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </module-one-1-1>
                        <module-one-2-1 label="监控点位图">
                            <div class="video-field-layout" :style="videoMapStyle">                               
                                <div class="video-bgd-img-position" :style="{ 'top': video.x + 'px', 'left': video.y + 'px' }"
                                    v-for="video in VideoDistribution" @click="videoPlay(video)">
                                    <div :class="video.type == true ? 'video-bgd-div active' : 'video-bgd-div'"></div>
                                    <img src="/images/camera.png" class="video-bgd-img">
                                </div>
                            </div>
                        </module-one-2-1>                        
                    </el-col>
                    <el-col :span="3">
                        <module-one-3-1 label="视频列表">
                            <div class="video-list-max">
                                <div class="video-list-min">
                                    <div class="video-list-for" v-for="item in videoListData">
                                        <div class="video-list-title">{{item.project_abbreviation}}</div>
                                        <el-collapse-transition>
                                            <ul class="video-list-ul" v-show="item.type">
                                                <li :class="video.type==true?'active':''" v-for="(video,idx) in item.videoList" @click.stop="handlePlay(video,idx)">
                                                    <button :class="video.signalState == 1?'video-state-zx':'video-state-lx'"></button>
                                                    <span>{{video.videoName}}</span>
                                                </li>
                                            </ul>
                                        </el-collapse-transition>
                                    </div>
                                </div>
                            </div>
                        </module-one-3-1>
                    </el-col>
                    <el-col :span="15">
                        <module-one-video>
                            <div class="video-enlarge-max" v-if="videoType">
                                <div class="video-enlarge-title">
                                    <div>
                                        <span v-cloak>{{ videoReturnData.videoName }}</span>
                                        <label v-if="videoReturnData.signalState == 1" class="color-green">（在线）</label>
                                        <label v-if="videoReturnData.signalState != 1" class="police-data">（离线）</label>
                                    </div>
                                    <div></div>
                                </div>
                                <div class="video-enlarge-content">
                                    <div class="videoView" v-if="showVideoView0">
                                        <H265Player :url="url0" @on-error="handleOnError0" />
                                    </div>
                                    <div class="videoView videoViewError" v-if="showVideoView0 == false">
                                        设备0通道链接失败！请及时检查！
                                    </div>
                                    <div class="videoView" v-if="showVideoView1">
                                        <H265Player :url="url1" @on-error="handleOnError1" />
                                    </div>
                                    <div class="videoView videoViewError" v-if="showVideoView1 == false">
                                        设备1通道链接失败！请及时检查！
                                    </div>
                                    <div class="videoView" v-if="showVideoView2">
                                        <H265Player :url="url2" @on-error="handleOnError2" />
                                    </div>
                                    <div class="videoView videoViewError" v-if="showVideoView2 == false">
                                        设备2通道链接失败！请及时检查！
                                    </div>
                                    <div class="videoView" v-if="showVideoView3">
                                        <H265Player :url="url3" @on-error="handleOnError3" />
                                    </div>
                                    <div class="videoView videoViewError" v-if="showVideoView3 == false">
                                        设备3通道链接失败！请及时检查！
                                    </div>
                                </div>
                            </div>
                            <div class="video-enlarge-max" v-if="vehicleType">                                
                                <div class="video-vehicle-table">                                    
                                    <el-table :data="vehicleMonitorData" class="elTable">                                        
                                        <el-table-column label="进出场照片">
                                            <template slot-scope="scope">
                                                <el-row>
                                                    <el-col :span="6">
                                                        <div class="vehicle-jin-img-max">
                                                            <div class="vehicle-jin-img-bgd">
                                                                <img :src="scope.row.photoUrl" v-if="scope.row.photoUrl">
                                                            </div>
                                                            <div class="vehicle-time" v-cloak>{{ scope.row.uploadTime }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="vehicle-jin-img-max">
                                                            <div class="vehicle-jin-img-bgd">
                                                                <img :src="scope.row.photoUrl2" v-if="scope.row.photoUrl2">
                                                            </div>
                                                            <div class="vehicle-time" v-cloak>{{ scope.row.uploadTime2 }}
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="vehicle-jin-img-max">
                                                            <div class="vehicle-jin-img-bgd">
                                                                <img :src="scope.row.photoUrl3" v-if="scope.row.photoUrl3">
                                                            </div>
                                                            <div class="vehicle-time" v-cloak>{{ scope.row.uploadTime3 }}
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="vehicle-jin-img-max">
                                                            <div class="vehicle-jin-img-bgd">
                                                                <img :src="scope.row.photoUrl4" v-if="scope.row.photoUrl4">
                                                            </div>
                                                            <div class="vehicle-time" v-cloak>{{ scope.row.uploadTime4 }}
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                            </template>
                                        </el-table-column>
                                       
                                    </el-table>
                                </div>
                            </div>
                        </module-one-video>
                    </el-col>
                </el-row>
            </div>
            </div>

        </div>
</template>

<script>
import '../components/module/module-one-1-1'
import '../components/module/module-one-2-1'
import '../components/module/module-one-3-1'
import '../components/module/module-one-0-5'
import '../components/module/module-one-video'
import '../components/background_video'
import '../components/header'
import '../components/staff-survey-chart'
import '../components/classify-bar'
import '../components/amplify/shipinguanli/amplify-spjk'

export default {
    data() {
        return {
            //视频概况
            cqNum: 0,
            dgNum: 0,
            aiNum: 0,
            offLineNum: 0,

            videoTotalNum: 0,
            onLineNum: 0,
            onLinePer: 0,
            dayOffLineNum: 0,
            monthOffLineNum: 0,
            safetyEducationData: [
                { text: "视频在线率", value: 0 },
            ],
            legendData: ['离线路数', '在线路数'],
            classifyBarData: [],
            //项目视频预警
            rowStyle: {
                color: '#B6CFEF',
                fontSize: '12px',
                height: '32px'
            },
            warningInterval: '',
            warningTableData: [],

            //视频场布图分布点位
            VideoDistribution: [],
            //视频列表
            videoListData: [],

            videoReturnData: {},
            videoType: true,
            ptz: false,
            autoPlay: false,
            //车辆列表
            vehicleListData: [],
            vehicleReturnData: {},
            vehicleType: false,
            //监控视频
            mvNav: 1,
            //车辆监控数据
            vehicleMonitorData: [],
            //视频组件
            isplay: true,
            videoHost: "https://video.makalu.cc",
            h5s: "",
            hls: new Hls(),
            hlsvideo: undefined,
            rtmpVideo: "",
            exception: false,
            exMsg: "数据加载异常，请刷新重试...",
            initCount: 0,
            pubKey: "",
            restartInit: false,
            initError: false,
            oWebControl: undefined,
            token: "",
            type: "hls",
            width: 1124,
            height: 850,
            videoMapStyle: {
                background: 'url("images/field_layout_video.png") no-repeat center/100% auto'
            },
            projectId: "163",
            showVideo: false,
            currentIndex: null,
            request:
                "http://111.21.209.230:7086/live/cameraid/{{videoDvrNumber}}${{passage}}/substream/2.m3u8",
            url0: "",
            url1: "",
            url2: "",
            url3: "",
            showVideoView0: true,
            showVideoView1: true,
            showVideoView2: true,
            showVideoView3: true,
            videoPassageList: [],
            videoDvrNumber: null,
            projectInfo:null,
            dept:null,
            videoPassageList:[],

        }
    },
    mounted() {
        this.$bus.$on("projectChange", res => {
            this.projectInfo=res;
            this.initVideoMenu();
        });
        this.$bus.$on("loadProjects", prjs => {
            this.projectInfo = prjs;
            //this.initVideoMenu();
        })
        this.$bus.$on("deptChange", dept => {
            this.dept = dept;
            //this.initVideoMenu();
        }); 
    },
    created() {
        this.init()
    },
    computed: {
        playDivCss() {
            return {
                width: (this.width + "").replace("px", "") + "px",
                height: (this.height + "").replace("px", "") + "px",
                position: "relative"
            }
        },
        exStyle() {
            return {
                textAlign: "center",
                width: (this.width + "").replace("px", "") + "px",
                height: (this.height + "").replace("px", "") + "px"
            }
        },
        PTZDiv() {
            let W = parseInt((this.width + "").replace("px", ""))
            let H = parseInt((this.height + "").replace("px", ""))
            if (W < 400) {
                W = "100px"
                H = "100px"
            } else {
                W = "150px"
                H = "150px"
            }
            return {
                backgroundImage: "url('https://video.makalu.cc/img/jt.png')",
                width: W,
                height: H,
                backgroundSize: "100%",
                position: "relative"
            }
        },
        PTZTop() {
            return {
                width: "33%",
                height: "25%",
                position: "absolute",
                top: "0px",
                left: "33%",
                cursor: "pointer"
            }
        },
        PTZBottom() {
            return {
                width: "33%",
                height: "25%",
                position: "absolute",
                bottom: "0px",
                left: "33%",
                cursor: "pointer"
            }
        },
        PTZLeft() {
            return {
                width: "25%",
                height: "33%",
                position: "absolute",
                top: "33%",
                left: "0px",
                cursor: "pointer"
            }
        },
        PTZRight() {
            return {
                width: "25%",
                height: "33%",
                position: "absolute",
                top: "33%",
                right: "0px",
                cursor: "pointer"
            }
        },
        VIBtnCss() {
            return {
                width: "30px",
                height: "30px",
                background: "#38314b",
                border: "1px solid #38314b",
                fontSize: "20px",
                outline: "0",
                color: "#FFFFFF"
            }
        },
        zoomViewCss() {
            return {
                width: "75px",
                height: "30px",
                color: "#dddddd",
                background: "rgba(65, 63, 70, 0.5)",
                textAlign: "center",
                border: "0px solid rgba(65, 63, 70, 0.5)",
                outline: "0",
                fontSize: "14px"
            }
        }
    },
    methods: {
        init() {

            //this.initVideoMenu();
            //视频列表
            //this.getVideoData()
            //车辆数据初始化
            //this.getVehicleData()

            //预警分析
            //this.warningInterval = setInterval(this.warningScroll,50);
            //this.getVideoMapUrl()
        },
        getVideoMapUrl() {
            $.post("/video/map/list", {
                projectId: this.projectId
            }, res => {
                if (res.rows[0]) {
                    this.videoMapStyle = {
                        background: 'url("' + res.rows[0].videoMap + '") no-repeat center/100% auto'
                    }
                }
            })
        },
        showui(e) {
            let that = this
            if (e) {
                that.oWebControl.JS_CuttingPartWindow(630, 0, 250, 170);
            } else {
                that.setWndCover();
            }
        },
        showsmallui2(e) {
            let that = this
            if (e.flag && e.data.length > 4) {
                var index = e.index;
                var xIndex = 0;
                switch (index) {
                    case 4:
                        xIndex = 100;
                        break;
                    case 5:
                        xIndex = 100;
                        break;
                    case 6:
                        xIndex = 310;
                        break;
                    case 7:
                        xIndex = 410;
                        break;
                    case 8:
                        xIndex = 520;
                        break;
                }
                that.oWebControl.JS_CuttingPartWindow(xIndex, 0, 545, 65);
            } else {
                that.setWndCover();
            }
        },
        //视频概况
        getVideoOverview() {
            axios.get("https://video.makalu.cc/mkl/api/getVideoOverview?projectId=163").then(res => {                
                if (res.data != {} && res.data.data) {

                    this.cqNum = res.data.data.cqNum;
                    this.dgNum = res.data.data.dgNum;
                    this.aiNum = res.data.data.aiNum;
                    this.offLineNum = res.data.data.offLineNum;

                    var data = [];
                    var allVideoList = res.data.data.allVideoList;
                    if (allVideoList) {
                        for (let i = 0; i < allVideoList.length; i++) {
                            var obj = {};
                            obj.x = allVideoList[i].x
                            obj.y = allVideoList[i].y
                            obj.angle = allVideoList[i].angle
                            obj.title = allVideoList[i].title
                            obj.state = allVideoList[i].state
                            obj.token = allVideoList[i].token
                            if (allVideoList[i].videoSource == 1) {
                                obj.videoType = 'h5s'
                            } else if (allVideoList[i].videoSource == 2) {
                                obj.videoType = 'hk'
                            } else if (allVideoList[i].videoSource == 3) {
                                obj.videoType = 'hzhk'
                            }
                            data.push(obj)
                        }
                    }

                    var token = this.videoListData[0].videoList[0].token

                    console.log(token)
                    for (let i = 0; i < data.length; i++) {
                        if (token == data[i].token) {
                            data[i].type = true
                        } else {
                            data[i].type = false
                        }
                    }

                    this.VideoDistribution = data
                }
            })
        },
        //head选择项目返回值
        onItemData(e) {
            if (e.type == 1) {
                location.href = '/weixin/screen/toVideo'
            } else {
                location.reload();
                this.init();
            }
        },
        //视频组件
        playVideo() {
            if (this.type != "hk") {
                this.settingVideoHost()
                this.initVideo()
                this.fullScreenCss()
            } else {
                this.initPlugin("24476525", "hrFzLaMbo60QDvwazqdH", "8.129.144.255", 1443);
                this.windowInitFun();
            }
        },
        //项目视频获取数据
        getVideoData() {
           

            var videoListData = [];

            var cqVideoListData = {};
            var cqVideoList = [];
            var dgVideoListData = {};
            var dgVideoList = [];
            var aiVideoListData = {};
            var aiVideoList = [];
            var onlineVideoList = [];

            cqVideoListData.project_abbreviation = '项目监控'
            dgVideoListData.project_abbreviation = '吊钩监控'
            aiVideoListData.project_abbreviation = 'AI视频'

            var data = []
            axios.post("//video.makalu.cc/ca/isc/info/getVideoPage", {
               deptID: "00010001000300020008"
            }).then(res => {
                let token = res.data.data.token
                axios.post("//video.makalu.cc/ca/isc/info/getVideoListFromDeptID", {
                    "token": token
                }).then(res => {
                    data = res.data.data
                    if (data.length > 0) {
                        var allVideoList = res.data.data;

                        for (let video of allVideoList) {
                            video.type = false
                            if (video.videoSource == 1) {
                                video.videoType = "h5s"
                            } else if (video.videoSource == 2) {
                                video.videoType = "hk"
                            } else if (video.videoSource == 3) {
                                video.videoType = "hzhk"
                            }
                        }

                        if (allVideoList.length > 0) {
                            for (let i = 0; i < allVideoList.length; i++) {
                                if (allVideoList[i].state != 0) {
                                    onlineVideoList.push(allVideoList[i])
                                }
                                if (allVideoList[i].videoArea == 1) {
                                    cqVideoList.push(allVideoList[i]);
                                } else if (allVideoList[i].videoArea == 2) {
                                    dgVideoList.push(allVideoList[i]);
                                } else if (allVideoList[i].videoArea == 3) {
                                    aiVideoList.push(allVideoList[i]);
                                }
                            }
                        }



                        cqVideoListData.videoList = cqVideoList;
                        dgVideoListData.videoList = dgVideoList;
                        aiVideoListData.videoList = aiVideoList;

                        videoListData.push(cqVideoListData);
                        videoListData.push(dgVideoListData);
                        videoListData.push(aiVideoListData);

                        this.cqNum = cqVideoList.length;
                        this.dgNum = dgVideoList.length;
                        this.aiNum = aiVideoList.length;
                        this.offLineNum = onlineVideoList.length;

                        //cqVideoListData.type = true;
                        let init_video_list = 0
                        if (cqVideoListData.videoList[0]) {
                            cqVideoListData.videoList[0].type = true;
                            init_video_list = 0
                        } else if (dgVideoListData.videoList[0]) {
                            dgVideoListData.videoList[0].type = true;
                            init_video_list = 1
                        } else if (aiVideoListData.videoList[0]) {
                            aiVideoListData.videoList[0].type = true;
                            init_video_list = 2
                        }

                        console.log(videoListData)

                        this.videoReturnData = videoListData[init_video_list].videoList[0]
                        this.token = videoListData[init_video_list].videoList[0].token
                        this.type = videoListData[init_video_list].videoList[0].videoType


                        for (var i = 0; i < videoListData.length; i++) {
                            if (i == 0) {
                                videoListData[i].type = true
                            } else {
                                videoListData[i].type = false
                            }
                            videoListData[i].id = i
                        }

                        this.videoListData = videoListData
                        debugger
                        this.playVideo();


                        //视频概况，监控点位图
                        //this.getVideoOverview()

                    }
                })
            })

        },
        goAIPage() {
            // location.href = '/weixin/screen/toAIVideoProject'
            location.href = 'https://szh.makalu.cc/weixin/screen/toAIVideoProject'
        },
        //点击视频项目返回数据   默认第一台设备数据
        videoProjectOneData(e) {
            
             var VideoDistribution = this.VideoDistribution
             for (let i = 0; i < VideoDistribution.length; i++) {
                 if (e.token == VideoDistribution[i].token) {
                     VideoDistribution[i].type = true
                 } else {
                     VideoDistribution[i].type = false
                 }
             }
             this.VideoDistribution = VideoDistribution

             //修改车辆数据
             var vehicle = this.vehicleListData
             for (let i = 0; i < vehicle.length; i++) {
                 vehicle[i].type = false
                 for (let j = 0; j < vehicle[i].videoList.length; j++) {
                     vehicle[i].videoList[j].type = false
                 }
             }
             this.vehicleListData = vehicle

            // //视频和车辆切换
             this.videoType = true
             this.vehicleType = false
             //组件返回值
             this.videoReturnData = e
             this.clearContext()
            // this.playVideo();
        },
        //点击视频设备返回数据
        videoEquipmentData(e) {
            
             var VideoDistribution = this.VideoDistribution
            for (let i = 0; i < VideoDistribution.length; i++) {
                if (e.token == VideoDistribution[i].token) {
                    VideoDistribution[i].type = true
                } else {
                    VideoDistribution[i].type = false
                }
            }
            this.VideoDistribution = VideoDistribution


            // //组件返回值
            this.videoReturnData = e
            this.token = e.token
            this.type = e.videoType
            this.clearContext()
            //this.playVideo();
        },

        //车辆获取数据
        getVehicleData() {
            var data = [
                {
                    "other_projectId": JSON.parse(localStorage.getItem("data1")).spgl,
                    //"project_abbreviation": JSON.parse(localStorage.getItem("data")).text,
                    "id": JSON.parse(localStorage.getItem("data1")).id,
                    "dept_id": JSON.parse(localStorage.getItem("data1")).dept_id,
                    "videoList": [
                        {
                            "accountId": 1,
                            "videoSource": 2,
                            "distinguish": 0,
                            "pro_id": JSON.parse(localStorage.getItem("data1")).id,
                            "groupID": '',
                            "id": 1,
                            "state": 0,
                            "projectId": JSON.parse(localStorage.getItem("data1")).id,
                            "token": '',
                        }
                    ],
                }
            ]
            for (let i = 0; i < data.length; i++) {
                data[i].type = false
                for (let j = 0; j < data[i].videoList.length; j++) {
                    if (i == 0 && j == 0) {
                        data[i].videoList[j].type = true
                    } else {
                        data[i].videoList[j].type = false
                    }
                }
            }
            this.vehicleListData = data
        },
        //点击车辆项目返回数据   默认第一台设备数据
        vehicleProjectOneData(e) {
            //修改视频数据
            var video = this.videoListData
            for (let i = 0; i < video.length; i++) {
                video[i].type = false
                for (let j = 0; j < video[i].videoList.length; j++) {
                    video[i].videoList[j].type = false
                }
            }
            this.videoListData = video
            //视频和车辆切换
            this.videoType = false
            this.vehicleType = true
            this.clearContext()
            //组件返回
            this.vehicleMonitorData = []
            axios.get("https://szh.makalu.cc/api/getPhotoUrl?projectId=" + e.projectId).then(res => {
                if (res.data.data.length > 0) {
                    var data = res.data.data.filter(item => item.deviceType != "04" && item.deviceType != "03").slice(0, 12)
                    var newData = [{
                        photoUrl: '',
                        uploadTime: '',
                        photoUrl2: '',
                        uploadTime2: '',
                        photoUrl3: '',
                        uploadTime3: '',
                        photoUrl4: '',
                        uploadTime4: '',
                    }, {
                        photoUrl: '',
                        uploadTime: '',
                        photoUrl2: '',
                        uploadTime2: '',
                        photoUrl3: '',
                        uploadTime3: '',
                        photoUrl4: '',
                        uploadTime4: '',
                    }, {
                        photoUrl: '',
                        uploadTime: '',
                        photoUrl2: '',
                        uploadTime2: '',
                        photoUrl3: '',
                        uploadTime3: '',
                        photoUrl4: '',
                        uploadTime4: '',
                    }];

                    for (var i = 0; i < data.length; i++) {
                        if (i <= 3) {
                            newData[0].photoUrl = data[0].photoUrl;
                            newData[0].uploadTime = data[0].uploadTime;
                            newData[0].photoUrl2 = data[1].photoUrl;
                            newData[0].uploadTime2 = data[1].uploadTime;
                            newData[0].photoUrl3 = data[2].photoUrl;
                            newData[0].uploadTime3 = data[2].uploadTime;
                            newData[0].photoUrl4 = data[3].photoUrl;
                            newData[0].uploadTime4 = data[3].uploadTime;
                        } else if (i > 3 && i <= 7) {
                            newData[1].photoUrl = data[4].photoUrl;
                            newData[1].uploadTime = data[4].uploadTime;
                            newData[1].photoUrl2 = data[5].photoUrl;
                            newData[1].uploadTime2 = data[5].uploadTime;
                            newData[1].photoUrl3 = data[6].photoUrl;
                            newData[1].uploadTime3 = data[6].uploadTime;
                            newData[1].photoUrl4 = data[7].photoUrl;
                            newData[1].uploadTime4 = data[7].uploadTime;
                        } else if (i > 7 && i <= 11) {
                            newData[2].photoUrl = data[8].photoUrl;
                            newData[2].uploadTime = data[8].uploadTime;
                            newData[2].photoUrl2 = data[9].photoUrl;
                            newData[2].uploadTime2 = data[1].uploadTime;
                            newData[2].photoUrl3 = data[10].photoUrl;
                            newData[2].uploadTime3 = data[10].uploadTime;
                            newData[2].photoUrl4 = data[11].photoUrl;
                            newData[2].uploadTime4 = data[11].uploadTime;
                        }
                    }
                    this.vehicleMonitorData = newData;
                }
            })
        },
        //点击车辆设备返回数据
        vehicleEquipmentData(e) {
            this.vehicleMonitorData = []
            this.clearContext()
            axios.get("https://szh.makalu.cc/api/getPhotoUrl?projectId=" + e.projectId).then(res => {
                if (res.data.data.length > 0) {
                    var data = res.data.data.filter(item => item.deviceType != "04" && item.deviceType != "03").slice(0, 12)
                    var newData = [{
                        photoUrl: '',
                        uploadTime: '',
                        photoUrl2: '',
                        uploadTime2: '',
                        photoUrl3: '',
                        uploadTime3: '',
                        photoUrl4: '',
                        uploadTime4: '',
                    }, {
                        photoUrl: '',
                        uploadTime: '',
                        photoUrl2: '',
                        uploadTime2: '',
                        photoUrl3: '',
                        uploadTime3: '',
                        photoUrl4: '',
                        uploadTime4: '',
                    }, {
                        photoUrl: '',
                        uploadTime: '',
                        photoUrl2: '',
                        uploadTime2: '',
                        photoUrl3: '',
                        uploadTime3: '',
                        photoUrl4: '',
                        uploadTime4: '',
                    }];

                    for (var i = 0; i < data.length; i++) {
                        if (i <= 3) {
                            newData[0].photoUrl = data[0].photoUrl;
                            newData[0].uploadTime = data[0].uploadTime;
                            newData[0].photoUrl2 = data[1].photoUrl;
                            newData[0].uploadTime2 = data[1].uploadTime;
                            newData[0].photoUrl3 = data[2].photoUrl;
                            newData[0].uploadTime3 = data[2].uploadTime;
                            newData[0].photoUrl4 = data[3].photoUrl;
                            newData[0].uploadTime4 = data[3].uploadTime;
                        } else if (i > 3 && i <= 7) {
                            newData[1].photoUrl = data[4].photoUrl;
                            newData[1].uploadTime = data[4].uploadTime;
                            newData[1].photoUrl2 = data[5].photoUrl;
                            newData[1].uploadTime2 = data[5].uploadTime;
                            newData[1].photoUrl3 = data[6].photoUrl;
                            newData[1].uploadTime3 = data[6].uploadTime;
                            newData[1].photoUrl4 = data[7].photoUrl;
                            newData[1].uploadTime4 = data[7].uploadTime;
                        } else if (i > 7 && i <= 11) {
                            newData[2].photoUrl = data[8].photoUrl;
                            newData[2].uploadTime = data[8].uploadTime;
                            newData[2].photoUrl2 = data[9].photoUrl;
                            newData[2].uploadTime2 = data[1].uploadTime;
                            newData[2].photoUrl3 = data[10].photoUrl;
                            newData[2].uploadTime3 = data[10].uploadTime;
                            newData[2].photoUrl4 = data[11].photoUrl;
                            newData[2].uploadTime4 = data[11].uploadTime;
                        }
                    }
                    this.vehicleMonitorData = newData;
                }
            })
            this.open = "close"
        },

        //车辆监控视频切换
        onMonitoringVideo(n) {
            this.mvNav = n
        },

        // 表格滚动  方法 --------- 开始
        warningScroll() {
            let maxHeight = this.$refs.warning.$el.querySelectorAll('.el-table__body')[0].offsetHeight;
            let clientHeight = this.$refs.warning.bodyWrapper.clientHeight;
            if (Math.abs(this.$refs.warning.bodyWrapper.scrollTop - (maxHeight - clientHeight)) < 5) { //预留5像素误差
                this.$refs.warning.bodyWrapper.scrollTop = 0;
            } else {
                this.$refs.warning.bodyWrapper.scrollTop += 1;//32是每一行表格的高度，每秒滚一行
            }
        },
        warningMouseEnter() {//鼠标移入停止滚动
            clearInterval(this.warningInterval);
        },
        warningMouseLeave() {//鼠标离开继续滚动
            this.warningInterval = setInterval(this.warningScroll, 30);
        },
        // 表格滚动  方法 ------  结束
        //视频组件
        clearContext() {
            try {
                if (this.oWebControl && this.oWebControl != null) {
                    this.oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
                    this.oWebControl.JS_Disconnect().then(function () {
                        // 断开与插件服务连接成功
                    },
                        function () {
                            // 断开与插件服务连接失败
                        }
                    );
                }
            } catch (e) {
                console.log(e)
            }
            if (this.$refs.playDiv) {
                this.$refs.playDiv.removeAttribute("poster")
            }
            try {
                if (this.hls) {
                    this.hls.destroy()
                }
            } catch (e) {
                console.log(e);
            }
            try {
                if (this.h5s) {
                    H5sPlayerWS.prototype.disconnect
                    this.h5s.disconnect()
                }
            } catch (e) {
                console.log(e)
            }
            this.hls = new Hls()
        },
        initH5sPlay() {
            let that = this
            let host = window.location.protocol == "https:" ? "47.106.234.91:8443" : "47.106.234.91:8080"
            axios.post(that.videoHost + "/mkl/api/h5sLogin", {}).then(res => {
                let conf = {
                    videodom: that.$refs.playDiv,
                    protocol: window.location.protocol,
                    host: "h5s.makalu.cc",
                    rootpath: '/',
                    token: that.token,
                    hlsver: 'v1',
                    session: res.data
                }
                that.$refs.playDiv.setAttribute("autoplay", "autoplay")
                that.h5s = H5sPlayerCreate(conf)
                that.h5s.connect()
                that.timeoutDetectionFun()
            })
        },
        initHlsPlay() {
            this.hlsvideo = this.$refs.playDiv;
            this.hls.destroy()
            this.hls = new Hls()
            let that = this
            axios.post(this.videoHost + "/ca/isc/info/getPlay", {
                protocol: "hls",
                playAdder: that.token
            }).then(res => {
                if (res.data.code != "200") {
                    that.exception = true
                    setTimeout(function () {
                        that.initVideo()
                    }, 2000)
                } else {
                    that.hls.loadSource(eval("(" + res.data.data + ")").url);
                    that.hls.attachMedia(that.hlsvideo);
                    that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
                        that.hlsvideo.play();
                    })
                }
                that.timeoutDetectionFun()
            }).catch(err => {
                that.exception = true
            })
        },
        initRtmpPlay() {
            let that = this
            let video = this.$refs.playDiv
            axios.post(this.videoHost + "/ca/isc/info/getPlay", {
                protocol: "rtmp",
                playAdder: that.token
            }).then(res => {
                if (res.data.code != "200") {
                    that.exception = true
                    setTimeout(function () {
                        that.initVideo()
                    }, 2000)
                } else {
                    const videoParam = [{
                        type: "video/rtmp",
                        src: eval("(" + res.data.data + ")").url
                    }];
                    that.rtmpVideo = videojs(video)
                    that.rtmpVideo.ready(function () {
                        that.rtmpVideo.src(videoParam)
                        that.rtmpVideo.load()
                        that.rtmpVideo.play()
                    })
                    that.timeoutDetectionFun()
                }
            }).catch(err => {
                that.exception = true
            })
        },
        play() {
            if (this.type === "h5s") {
                if (this.isplay) {
                    this.h5s.disconnect()
                } else {
                    this.h5s.connect();
                }
                this.isplay = !this.isplay
            }
            if (this.type === "hls") {
                if (this.isplay) {
                    this.hlsvideo.stop()
                } else {
                    this.hlsvideo.play()
                }
                this.isplay = !this.isplay
            }
            if (this.type === "rtmp") {
                if (this.isplay) {
                    this.rtmpVideo.pause()
                } else {
                    this.rtmpVideo.play()
                }
                this.isplay = !this.isplay
            }
        },
        guid() {
            function S4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            }

            return (S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
        },
        settingVideoHost() {
            this.videoHost = window.location.protocol + "//video.makalu.cc"
        },
        initVideo() {
            let that = this
            this.exception = false
            this.clearContext()
            this.$nextTick(function () {
                switch (that.type) {
                    case "h5s":
                        that.initH5sPlay()
                        break
                    case "hls":
                        that.initHlsPlay()
                        break
                    case "rtmp":
                        that.initRtmpPlay()
                        break
                    case "hk":
                        that.initPlugin("24476525", "hrFzLaMbo60QDvwazqdH", "8.129.144.255", 1443);
                        that.windowInitFun();
                        break
                    case "hzhk":
                        that.initPlugin("21332599", "772SPtFNM1BHMyKHq4xh", "39.101.132.124", 443);
                        that.windowInitFun();
                        break
                }
            })

        },
        tripodHandle(order) {
            axios.post(this.videoHost + "/mkl/api/moveCamera", {
                token: this.token,
                action: this.type === "h5s" ? order.toLowerCase() : order,
                h5s: this.type == "h5s"
            })
            console.log("按下")
        },
        stop() {
            axios.post(this.videoHost + "/mkl/api/moveCamera", {
                token: this.token,
                action: "stop",
                h5s: this.type == "h5s"
            })
            console.log("松开")
        },
        fullScreenCss() {
            this.fullScreenWidth = (document.body.scrollWidth - 10) + "px"
            this.fullScreenHeight = (document.body.scrollHeight - 10) + "px"
        },
        fullScreenFun() {
            this.fullScreenShow = true
            this.$emit("fullScreenFun")
        },
        fullScreenCloseFun() {
            this.fullScreenShow = false
        },
        timeoutDetectionFun() {
            let that = this
            //超时时间检测是否正常获取到数据流默认为5秒
            this.timeoutDetection = setTimeout(function () {
                if (parseInt(that.hlsvideo.currentTime.toFixed(1)) == 0) {
                    that.hls.destroy()
                    that.exception = true
                    if (that.restart) {
                        that.timeoutDetectionInit = setTimeout(function () {
                            that.initVideo()
                        }, 2000)
                    }
                }
            }, this.outTime * 1000)
        },
        //海康插件开始
        // 创建播放实例
        initPlugin(appkey, secret, ip, port) {
            let that = this
            that.oWebControl = new WebControl({
                szPluginContainer: "uuid",                       // 指定容器id
                iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
                iServicePortEnd: 15909,
                szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
                cbConnectSuccess: function () {                     // 创建WebControl实例成功
                    that.oWebControl.JS_StartService("window", {         // WebControl实例创建成功后需要启动服务
                        dllPath: "./VideoPluginConnect.dll"         // 值"./VideoPluginConnect.dll"写死
                    }).then(function () {                           // 启动插件服务成功
                        that.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
                            cbIntegrationCallBack: that.cbIntegrationCallBack
                        });

                        that.oWebControl.JS_CreateWnd("HKPlayWindowControl", Number(that.width), Number(that.height)).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
                            that.initHKPlay(appkey, secret, ip, port);  // 创建播放实例成功后初始化
                        });
                    }, function () { // 启动插件服务失败
                    });
                },
                cbConnectError: function () { // 创建WebControl实例失败
                    this.oWebControl = null;
                    that.restartInit = true
                    WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
                    that.initCount++;
                    if (that.initCount < 3) {
                        setTimeout(function () {
                            that.initPlugin(appkey, secret, ip, port);
                        }, 3000)
                    } else {
                        that.restartInit = false
                        that.initError = true
                        that.initCount = 0
                    }
                },
                cbConnectClose: function (bNormalClose) {
                    // 异常断开：bNormalClose = false
                    // JS_Disconnect正常断开：bNormalClose = true
                    // console.log("cbConnectClose");
                    this.oWebControl = null;
                }
            });
        },
        // 设置窗口控制回调
        setCallbacks() {
            let that = this
            that.oWebControl.JS_SetWindowControlCallback({
                cbIntegrationCallBack: that.cbIntegrationCallBack
            });
        },
        // 推送消息
        cbIntegrationCallBack(oData) {
            // console.log(JSON.stringify(oData.responseMsg));
        },
        //初始化
        initHKPlay(Appkey, Secret, Ip, Port) {
            let that = this
            this.getPubKey(function () {

                ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
                let appkey = Appkey;                           //综合安防管理平台提供的appkey，必填
                let secret = that.setEncrypt(Secret);   //综合安防管理平台提供的secret，必填
                let ip = Ip;                           //综合安防管理平台IP地址，必填
                let playMode = 0;                                  //初始播放模式：0-预览，1-回放
                let port = Port;                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
                let snapDir = "D:\\SnapDir";                       //抓图存储路径
                let videoDir = "D:\\VideoDir";                     //紧急录像或录像剪辑存储路径
                let layout = "1x1";                                //playMode指定模式的布局
                let enableHTTPS = 1;                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
                let encryptedFields = 'secret';					   //加密字段，默认加密领域为secret
                let showToolbar = 1;                               //是否显示工具栏，0-不显示，非0-显示
                let showSmart = 1;                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
                let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";  //自定义工具条按钮
                let toolBarButtonIDs = "4098";
                ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

                that.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,                       //自定义工具条按钮
                        toolBarButtonIDs: toolBarButtonIDs
                    })
                }).then(function (oData) {
                    that.oWebControl.JS_Resize(Number(that.width), Number(that.height));  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                    that.startPreviewFun()
                });
            });
        },
        //获取公钥
        getPubKey(callback) {
            let that = this
            that.oWebControl.JS_RequestInterface({
                funcName: "getRSAPubKey",
                argument: JSON.stringify({
                    keyLength: 1024
                })
            }).then(function (oData) {
                // console.log(oData);
                if (oData.responseMsg.data) {
                    that.pubKey = oData.responseMsg.data;
                    callback()
                }
            })
        },
        //RSA加密
        setEncrypt(value) {
            let encrypt = new JSEncrypt();
            encrypt.setPublicKey(this.pubKey);
            return encrypt.encrypt(value);
        },
        // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
        setWndCover() {
            let that = this
            let iWidth = $(window).width();
            let iHeight = $(window).height();
            let oDivRect = document.getElementById("HKPlayWindowControl").getBoundingClientRect();

            let iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
            let iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
            let iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
            let iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

            iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft;
            iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop;
            iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
            iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom;

            that.oWebControl.JS_RepairPartWindow(0, 0, 1001, 600);    // 多1个像素点防止还原后边界缺失一个像素条
            if (iCoverLeft != 0) {
                that.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
            }
            if (iCoverTop != 0) {
                that.oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop);    // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
            }
            if (iCoverRight != 0) {
                that.oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600);
            }
            if (iCoverBottom != 0) {
                that.oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom);
            }
        },
        windowInitFun() {
            let that = this
            // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
            $(window).resize(function () {
                if (that.oWebControl != null) {
                    that.oWebControl.JS_Resize(Number(that.width), Number(that.height));
                    that.setWndCover();
                }
            });

            // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
            $(window).scroll(function () {
                if (that.oWebControl != null) {
                    that.oWebControl.JS_Resize(Number(that.width), Number(that.height));
                    that.setWndCover();
                }
            });

            // 标签关闭
            window.onunload = function () {
                if (that.oWebControl != null) {
                    that.oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
                    that.oWebControl.JS_Disconnect().then(function () {  // 断开与插件服务连接成功
                    },
                        function () {  // 断开与插件服务连接失败
                        });
                }
            }

        },
        //视频预览功能
        startPreviewFun() {
            let that = this
            let streamMode = 0;                                     //主子码流标识：0-主码流，1-子码流
            let transMode = 1;                                      //传输协议：0-UDP，1-TCP
            let gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用
            let wndId = 1;                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
            let cameraIndexCode = this.token
            cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
            cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
            // console.log(cameraIndexCode)
            that.oWebControl.JS_RequestInterface({
                funcName: "startPreview",
                argument: JSON.stringify({
                    cameraIndexCode: cameraIndexCode,                //监控点编号
                    streamMode: streamMode,                         //主子码流标识
                    transMode: transMode,                           //传输协议
                    gpuMode: gpuMode,                               //是否开启GPU硬解
                    wndId: wndId                                     //可指定播放窗口
                })
            })
        },
        //停止全部预览
        stopAllPreviewFun() {
            this.oWebControl.JS_RequestInterface({
                funcName: "stopAllPreview"
            });
        },
        closeHk() {
            // console.log(this.oWebControl)
            this.oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
            this.oWebControl.JS_Disconnect().then(function () { }, function () { });
        },
        videoPlay(video) {
            debugger
            //监控点位图数据处理
            // var VideoDistribution = this.VideoDistribution
            // for (var i = 0; i < VideoDistribution.length; i++) {
            //     if (video.token == VideoDistribution[i].token) {
            //         VideoDistribution[i].type = true
            //     } else {
            //         VideoDistribution[i].type = false
            //     }
            // }
            // this.VideoDistribution = VideoDistribution

            // //视频列表数据处理
            // var videoListData = this.videoListData
            // for (var i = 0; i < videoListData.length; i++) {
            //     videoListData[i].type = false
            //     for (var j = 0; j < videoListData[i].videoList.length; j++) {
            //         if (video.token == videoListData[i].videoList[j].token) {
            //             videoListData[i].type = true
            //             videoListData[i].videoList[j].type = true
            //         } else {
            //             videoListData[i].videoList[j].type = false
            //         }
            //     }
            // }
            // this.videoListData = videoListData

            // this.videoReturnData = video
            // this.token = video.token
            // this.type = video.videoType
            // this.playVideo();

        },
        /** 查询视频配置列表 */
        initVideoMenu() {
            var videoListData = [];

            var cqVideoListData = {};
            //var cqVideoList = [];
            var dgVideoListData = {};
            //var dgVideoList = [];
            var aiVideoListData = {};
            //var aiVideoList = [];
            //var onlineVideoList = [];

            cqVideoListData.id=1;
            cqVideoListData.type=true;
            cqVideoListData.project_abbreviation = '项目监控'
            dgVideoListData.id=1;
            dgVideoListData.type=true;
            dgVideoListData.project_abbreviation = '吊钩监控'
            aiVideoListData.id=1;
            aiVideoListData.type=true;
            aiVideoListData.project_abbreviation = 'AI视频'

            this.$api.video.listView(this.dept?.id||0,this.projectInfo?.projectId||0).then((response) => {
                cqVideoListData.videoList = response.data;
                videoListData.push(cqVideoListData);
                videoListData.push(dgVideoListData);
                videoListData.push(aiVideoListData);
                this.videoListData = videoListData;
                this.cqNum=response.data.length;
                let offNum=0;
                response.data.forEach((it) =>{
                    if(it.signalState!="1"){
                        offNum++;
                    }
                });
                this.offLineNum = offNum;
            });
        },
         // 表格滚动调用的函数
        beforeDestroy() {
            clearInterval(this.warningInterval);
        },
        handlePlay(it, idx) {
            this.videoReturnData=it;
        this.currentIndex = idx;
        this.showVideo = false;
        this.url0 = "";
        this.url1 = "";
        this.url2 = "";
        this.url3 = "";
        this.showVideoView0 = true;
        this.showVideoView1 = true;
        this.showVideoView2 = true;
        this.showVideoView3 = true;
        this.videoDvrNumber = it.videoDvrNumber;
        this.initVideo(
            it.videoDvrNumber,
            this.request.replace("{{videoDvrNumber}}", it.videoDvrNumber)
            );
        },
            //查询视频通道
    initVideo(videoDvrNumber, url) {
      let that = this;
      this.$api.video.getVideoPassage(videoDvrNumber).then((response) => {
        let data = response.data;
        this.videoPassageList = data;
        that.showVideo = true;
        data.forEach((it, idx) => {
          if (idx == 0) {
            that.url0 = url.replace("{{passage}}", it.passageValue);
          }
          if (idx == 1) {
            that.url1 = url.replace("{{passage}}", it.passageValue);
          }
          if (idx == 2) {
            that.url2 = url.replace("{{passage}}", it.passageValue);
          }
          if (idx == 3) {
            that.url3 = url.replace("{{passage}}", it.passageValue);
          }
        });
      });
    },
        handleOnError0(error) {
        this.showVideoView0 = false;
        console.log("error: ", error);
        this.updatePassageState(this.videoPassageList[0].id);
        },
        handleOnError1(error) {
        this.showVideoView1 = false;
        console.log("error: ", error);
        this.updatePassageState(this.videoPassageList[1].id);
        },
        handleOnError2(error) {
        this.showVideoView2 = false;
        console.log("error: ", error);
        this.updatePassageState(this.videoPassageList[2].id);
        },
        handleOnError3(error) {
        this.showVideoView3 = false;
        console.log("error: ", error);
        this.updatePassageState(this.videoPassageList[3].id);
        },
        updatePassageState(id) {
        this.$api.video.editPassageState(id,this.videoDvrNumber,"2");
        },

    },
   
};
</script>

<style lang="less" >
.project-video {}

.videoView {
    color: aliceblue;
    float: left;
    width: 50%;
    height: 452.5px;
}
.videoViewError {
    background-color: #575e65;
    text-align: center;
    line-height: 420px;
}
</style>