海康摄像头vue中使用全部代码

<template>
    <div class="mid-block1" style="width: 100%; height: 505px; margin-top:40px ;">
        <!-- 视频 -->
        <div style="width: 100%;height: 500px;margin-top: -42px;padding-top: 5px;box-sizing: border-box;border: 1px solid #101347;
  border-radius: 10px;">
            <div id="divPlugin" ref="mid_block1" style="width: 99%;height: 490px;margin-left: 5px;"></div>
        </div>
        <!-- <div v-if="this.videoData.length <= 0" v-loading="true" element-loading-text="暂无摄像头"
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
            style="width: 100%;height: 500px;margin-top: -42px;padding-top: 5px;box-sizing: border-box;border: 1px solid #101347;">
        </div> -->
        <!-- <div id="divPlugin" ref="mid_block1" style="width: 1000px;height: 500px;margin-top: -42px;"></div> -->
        <div style="color: white;height: 100px;display: flex;margin-top:5px;">
            <div style="margin-right: 5px;line-height: 50px;"><span style="color:#4489E4">当前窗口：</span>{{ g_iWndIndex + 1
                }}
                &emsp;</div>
            <div style="margin-right: 0px;line-height: 50px;color:#4489E4">操作<span>：</span></div>
            <div class="control-wrapper">
                <div class="control-btn control-top" @mousedown="mouseDownPTZControl(1)" @mouseup="mouseUpPTZControl()">
                </div>
                <div class="control-btn control-left" @mousedown="mouseDownPTZControl(3)"
                    @mouseup="mouseUpPTZControl()"> </div>
                <div class="control-btn control-bottom" @mousedown="mouseDownPTZControl(2)"
                    @mouseup="mouseUpPTZControl()"></div>
                <div class="control-btn control-right" @mousedown="mouseDownPTZControl(4)"
                    @mouseup="mouseUpPTZControl()"></div>
                <!-- <div class="control-round">
                    <div class="control-round-inner"></div>
                </div> -->
            </div>
            <div style="width: 28%;border: 1px solid #161a3f00;margin-right: 10px;border-radius: 10px; color: #BBBBBB;
            display: flex;text-align: center;justify-content: space-evenly;font-size: 12px;line-height: 200%;">
                <!-- <dv-decoration-11 style="width:200px;height:60px;">dv-decoration-11</dv-decoration-11> -->
                <div class="button" @click="clickCapturePic"
                    style="border: 1px solid #161A3F;height: 50%; width: 19%; border-radius: 5px;cursor:pointer">
                    <dv-decoration-9 :dur=10>拍照</dv-decoration-9>
                </div>
                <div class="button" @click="clickStartRecord"
                    style="border: 1px solid #161A3F;height: 50%; width: 19%;border-radius: 5px;cursor:pointer">
                    <dv-decoration-9 :dur=10>开始录像</dv-decoration-9>
                </div>
                <div class="button" @click="clickStopRecord"
                    style="border: 1px solid #161A3F;height: 50%; width: 19%;border-radius: 5px;cursor:pointer">
                    <dv-decoration-9 :dur=10>结束录像</dv-decoration-9>
                </div>
                <!-- <div class="button" @mousedown="mouseDownPTZControl(1)" @mouseup="mouseUpPTZControl()"
                    style="border: 1px solid #161A3F;height: 50%; width: 9%;border-radius: 5px;cursor:pointer;">
                    <dv-decoration-9 :dur=10>↑</dv-decoration-9>
                </div>
                <div class="button" @mousedown="mouseDownPTZControl(3)" @mouseup="mouseUpPTZControl()"
                    style="border: 1px solid #161A3F;height: 50%; width: 9%;border-radius: 5px;cursor:pointer">
                    <dv-decoration-9 :dur=10>←</dv-decoration-9>
                </div>
                <div class="button" @mousedown="mouseDownPTZControl(4)" @mouseup="mouseUpPTZControl()"
                    style="border: 1px solid #161A3F;height: 50%; width: 9%;border-radius: 5px;cursor:pointer">
                    <dv-decoration-9 :dur=10>→</dv-decoration-9>
                </div>
                <div class="button" @mousedown="mouseDownPTZControl(2)" @mouseup="mouseUpPTZControl()"
                    style="border: 1px solid #161A3F;height: 50%; width: 9%;border-radius: 5px;cursor:pointer">
                    <dv-decoration-9 :dur=10>↓</dv-decoration-9>
                </div> -->
            </div>
            <div style="margin-right: 5px;line-height: 50px;">
                <span style="color:#4489E4">当前页码：</span>{{ Yema + 1 }}&emsp;
            </div>
            <div v-if="dianj == true"
                style="font-size: 14px; height:30px; text-align: center;color: #BBBBBB; display: flex;line-height: 25px;margin-top: 9px;">
                <div style=" border-radius: 5px;padding: 1px 3px;margin-right: 15px;border: 1px solid #4489E4;">
                    <div style="cursor:pointer;width: 100%; " @click="Shangye()">上一页</div>
                </div>
                <div style="border-radius: 5px;padding: 1px 3px;border: 1px solid #4489E4;">
                    <div style="cursor:pointer;width: 100%; " @click="Xiaye()">下一页</div>
                </div>
            </div>
            <div v-if="dianj == false"
                style="font-size: 14px; height:30px; text-align: center;color: #BBBBBB; display: flex;line-height: 25px;margin-top: 9px;">
                <div style=" border-radius: 5px;padding: 1px 3px;margin-right: 15px;border: 1px solid #4489E4;">
                    <div style="cursor:pointer;width: 100%; ">等待中</div>
                </div>
                <div style="border-radius: 5px;padding: 1px 3px;border: 1px solid #4489E4;">
                    <div style="cursor:pointer;width: 100%; ">等待中</div>
                </div>
            </div>
            <!-- <div @click="shua()">刷新</div> -->
        </div>
    </div>
</template>
<script>
import { postHandle } from "@/api";
import Self from '@/self'
import { forEach } from "jszip";
export default {
    name: "carNvrVideo",
    components: {},
    props: {
        newSpaceId: {
            type: String,
        },
        ddd: {
            type: Boolean
        }
    },
    data() {
        return {
            Zaideng: [],
            szInfo: "",
            rowList: {},
            hkvInfo: {},
            g_iWndIndex: 0, //当前选中的窗口 默认选择第一个窗口
            g_bPTZAuto: false,
            iProtocol: 1,
            loginLoading: false,
            startPlayLoading: false,
            bZeroChannel: false,
            iRtspPort: 0,
            index: 0,
            iWndowType: 2, //当前展示窗口
            videoData: [],
            ua: navigator.userAgent.toLocaleLowerCase(),
            playerList: [],
            result: [], // 上下页默认0 第一页
            Yema: 0,
            isloading: true,
            dianj: true
        };
    },
    computed: {
        spaceId() {
            return this.$store.getters.spaceId;
        }
    },
    watch: {
        ddd() {

        },
        newSpaceId(val) {
            // WebVideoCtrl.I_DestroyPlugin()

            this.$nextTick(() => {
                this.onLogout()
                this.videoData = []
                // this.getList();
                this.getData();
                // this.g_iWndIndex = 0;
                this.clickStopRealPlay2();
                this.clickStopRealPlay();

                this.Yema = 0;
                this.result = [];
                setTimeout(() => {
                    this.videoChange();
                }, 900)
            })
        }
    },
    //获取数据
    created() {
        // this.getData()
    },
    //初始化video界面调用方法
    mounted() {
    },
    destroyed() {
        console.log('离开页面');
        this.clickStopRealPlay2();
        this.clickStopRealPlay();
        this.onLogout();
    },
    methods: {
        //下一页
        Xiaye() {

            // this.aaaa()
            // WebVideoCtrl.I_DestroyPlugin()
            if (this.result.length > 0) {
                this.dianj = false
                setTimeout(() => {
                    this.dianj = true
                }, 2800)
                this.g_iWndIndex = 0
                this.Yema += 1;
                if (this.Yema < this.result.length) {
                    this.getList();
                    this.clickStopRealPlay2();
                    this.clickStopRealPlay();
                    this.onLogout();
                    setTimeout(() => {
                        this.videoChange();
                    }, 900)
                    console.log(this.Yema, this.result.length);
                } else {
                    this.Yema = this.result.length - 1
                    this.$message({
                        showClose: true,
                        message: "已经最后一页",
                        type: "error",
                    });
                }
            } else {
                // this.ddd = true
                // WebVideoCtrl.I_DestroyPlugin()
            }
        },
        Shangye() {
            // this.aaaa()
            // WebVideoCtrl.I_DestroyPlugin()
            if (this.result.length > 0) {
                this.dianj = false
                setTimeout(() => {
                    this.dianj = true
                }, 2800)
                this.g_iWndIndex = 0
                this.Yema -= 1;
                if (this.Yema < this.result.length && this.Yema >= 0) {
                    this.getList();
                    this.clickStopRealPlay2();
                    this.clickStopRealPlay();
                    this.onLogout();
                    setTimeout(() => {
                        this.videoChange();
                    }, 900)
                    console.log(this.Yema, this.result.length);
                } else {
                    this.Yema = 0
                    this.$message({
                        showClose: true,
                        message: "已经是第一页",
                        type: "error",
                    });
                }
            } else {
                // this.ddd = true
                // WebVideoCtrl.I_DestroyPlugin()
            }

        },
        //获取数据
        getData() {
            自己的接口请求
            console.log(this.newSpaceId, '摄像头//');
            postHandle("/api/........", {
                d: {
                    filters: [
                        {
                            field: ".....",
                            operator: "....",
                            value: t.... || ....,
                        },
                    ],
                    sorts: [{ field: "....", isDesc: ..... }],
                },
            }).then((res) => {
                this.videoData = res.result;
                // this.result = []
                console.log('多个摄像头单个登录', res.result);
                // this.videoData = [
                //     {     根据海康给信息进行登录
                //         nwurl: '192.00000',
                //         nwtd: '00',
                //         appKey: 'admin',
                //         appSecret: '0000000',
                //         name: '摄像机1号',
                //         id: 0,
                //         gatewayCode: '0313000001'
                //     },
                // ]
                setTimeout(() => {
                    if (this.videoData.length > 0) {
                        // if (this.videoData.length <= 1) {
                        //     this.iWndowType = 1;
                        //     console.log('单窗口');
                        // } else if (this.videoData.length > 1 && this.videoData.length <= 4) {
                        //     this.iWndowType = 2;
                        //     console.log('多窗口2');
                        // } else if (this.videoData.length > 4) {
                        this.iWndowType = 2;
                        console.log('多窗口3');
                        for (let i = 0; i < this.videoData.length; i += 4) {
                            this.result.push(this.videoData.slice(i, i + 4));
                        }
                        console.log(this.result, 123123123123)
                        this.videoData = this.result[this.Yema]
                        // }
                    } else {
                        WebVideoCtrl.I_DestroyPlugin()
                        this.$message({
                            showClose: true,
                            message: "暂无摄像头",
                            type: "error",
                        })
                    }
                }, 300)
                // 判断数量
                // num是你要分成多少个, 比如这里是均分成四个 , 最后一个数组如果不足四个, 那该多少就是多少个;
                // if (this.videoData.length > 0) {
                //     let result = [], num = 4;
                //     for (let i = 0, len = this.videoData.length; i < len; i += num) {
                //         result.push(data.slice(i, i + num));
                //     }
                //     console.log(result, 123123123123)
                // }
            });
        },
        getList() { // 翻页判断
            setTimeout(() => {
                if (this.result.length > 0) {
                    this.iWndowType = 2;
                    this.videoData = this.result[this.Yema]
                }
            }, 300)
        },
        //1
        videoChange() {
            this.$nextTick(() => {

                // if (this.videoData.length > 0) {
                console.log('初始化前')
                this.videoInitPlugin(); // 初始化video界面
                this.aaaa()
                // }
            })
        },
        handleSelectionChange() { },
        submitForm() { },
        cancel() { },
        // 退出
        onLogout() {
            this.videoData.forEach((element) => {
                var szDeviceIdentify = element.nwurl + "_" + element.nwtd;
                var iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
                console.log('退出成功', szDeviceIdentify);
                if (0 == iRet) {
                    console.log('退出成功');
                } else {
                }
            });
        },
        //2
        videoInitPlugin() {
            this.$nextTick(() => {
                var iRet = WebVideoCtrl.I_CheckPluginInstall();
                if (iRet === -1) {
                    //alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装");
                    this.myFunction();
                    return;
                }
                this.initPlugin();
            });
        },
        myFunction() {
            this.$message({
                showClose: true,
                message: "您还未安装过插件HCWebSDKPlugin.exe，请下载后查看摄像!",
                type: "error",
            })
            // var r = confirm("您还未安装过插件HCWebSDKPlugin.exe，请下载后查看摄像!");
            // if (r == true) {
            //     window.location.href = "/WebComponentsKit.exe";
            // } else {
            // }
        },
        //3
        initPlugin() {
            this.$nextTick(() => {
                WebVideoCtrl.I_InitPlugin({
                    bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
                    iWndowType: this.iWndowType, //默认展示几个摄像头1x1 2x2
                    // 选择窗口
                    cbSelWnd: (xmlDoc) => {
                        this.g_iWndIndex = parseInt($(xmlDoc).find('SelectWnd').eq(0).text(), 10);
                        console.log('窗口ID-当前选择的窗口编号：', this.g_iWndIndex);
                        this.aaaa(this.g_iWndIndex)
                    },
                    cbInitPluginComplete: function () {
                        // 检查插件是否最新
                        if (WebVideoCtrl.I_CheckPluginVersion() === -1) {
                            return;
                        }
                        WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
                    },
                });
                setTimeout(() => {
                    for (var i = 0; i < this.videoData.length; i++) {
                        this.hkvInfo = this.videoData[i];
                        this.index = i;
                        if (this.index == i) {
                            this.onLogin(this.hkvInfo, this.index);
                        }
                        console.log('登录窗口', i, this.hkvInfo)
                    }
                    if (this.this.videoData != 0) {
                        this.$message({
                            showClose: true,
                            message: "摄像头登录中",
                            type: "success",
                        })
                    }

                }, 900)
                // setTimeout(()=>{
                //     let result = [] , num = 4
                //     for( let i =0,len=this.videoData.length;i<len;i+=num){
                //         result.push(this.videoData.slice(i,i+num))
                //     }
                //     let di = result[0]
                //     for (var i = 0; i < di; i++) {
                //         console.log(123);
                //         // this.hkvInfo = di[i];
                //         // this.index = i;
                //         // if (this.index == i) {
                //         //     this.onLogin(this.hkvInfo, this.index);
                //         // }
                //         // console.log('登录窗口', i, this.hkvInfo)
                //     }
                // },0)
            })
        },
        // 兄弟传值 给 mblock2 
        aaaa(e) {
            if (this.videoData && this.g_iWndIndex >= 0) {
                // this.videoData[e]
                // console.log(this.videoData,this.videoData[e]);
                // this.$bus.$emit('brotherEvent', this.videoData[e])
                this.videoData.forEach((item, index) => {
                    if (index == this.g_iWndIndex) {
                        console.log(item);
                        if (item.listGE) {
                            this.$bus.$emit('brotherEvent', item)
                        }

                    }
                })
            }
        },
        getDevicePort(szDeviceIdentify) {
            var oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify);
            this.iRtspPort = oPort.iRtspPort;
        },
        // 停止预览
        clickStopRealPlay: function () {
            for (var i = 0; i <= this.index; i++) {
                setTimeout(this.stopRealPlay(i), 0);
            }
        },
        // 停止预览全部
        clickStopRealPlay2() {
            WebVideoCtrl.I_StopAllPlay({
                success: function () {
                    console.log('停止预览全部成功');
                    setTimeout(() => {
                        WebVideoCtrl.I_DestroyPlugin()
                    }, 300);
                },
                error: function () {
                    console.log('停止预览全部失败');
                }
            })
        },
        stopRealPlay: function (iWndIndex) {
            var that = this;
            WebVideoCtrl.I_Stop({
                iWndIndex: iWndIndex,
                success: function () {
                    console.log('停止预览成功窗口号', iWndIndex);
                    //   that.$notify({
                    //     title: "成功",
                    //     message: "停止预览窗口" + iWndIndex + "成功",
                    //     type: "success",
                    //   });
                },
                error: function () {
                    console.log('停止预览失败');
                    // that.$notify({
                    //   title: "失败",
                    //   message: "停止预览窗口" + iWndIndex + "失败",
                    //   type: "error",
                    // });
                },
            });
        },
        // 获取通道
        getChannelInfo: function (item) {
            var that = this;
            var szDeviceIdentify = item.nwurl + "_" + item.nwtd;
            // 数字通道
            that.hkvInfo.channels = [];
            // WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
            //     async: true,
            //     mysuccess: function (xmlStr) {
            //         console.log('获取数字通道成功');
            //         console.log("mysuccess I_GetDigitalChannelInfo: ", xmlStr);
            //         var jsonObj = that.$x2js.xml2js(xmlStr);
            //         var list = jsonObj.InputProxyChannelStatusList.InputProxyChannelStatus;
            //         for (var x = 0; x < list.length; x++) {
            //             // that.hkvInfo.channels.push(list[x].id);
            //         }
            //     },
            //     success: function (xmlDoc) {
            //         // console.log("获取数字通道成功");
            //     },
            //     error: function (status, xmlDoc) {
            //         // console.log("获取数字通道失败");
            //     },
            // });
            // // 模拟通道
            WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
                // async: true,
                // mysuccess: function (xmlStr) {
                //     console.log('模拟通道');
                //     var jsonObj = that.$x2js.xml2js(xmlStr);
                //     var id = jsonObj.VideoInputChannelList.VideoInputChannel.id;
                //     that.hkvInfo.channels.push(id);
                // },
                success: function (xmlStr) {
                    // var jsonObj = $(xmlStr).find("VideoInputChannel")
                    var oChannels = $(xmlStr).find("VideoInputChannel");
                    // $.each(jsonObj, function (i) {
                    $.each(oChannels, function (i) {
                        var id = $(this).find("id").eq(0).text()
                        // this.hkvInfo.channels.push(id);
                    })
                    console.log(id, '通道号');
                    console.log("模拟通道success", xmlStr, this.hkvInfo.channels);
                },
                error: function (status, xmlDoc) {
                    console.log("模拟通道error", xmlDoc);
                },
            });
            // TODO 零通道
        },
        // 登录
        async onLogin(item, a) {
            var that = this;
            console.log('登陆中', item.nwurl, that.iProtocol, item.nwtd, item.appKey, item.appSecret);
            // that.loginLoading = true;
            // 登录设备
            WebVideoCtrl.I_Login(
                item.nwurl,
                that.iProtocol,
                item.nwtd,
                item.appKey,
                item.appSecret,
                {
                    async: true,
                    timeout: 900,
                    success: (xmlDoc) => {
                        console.log('登录成功', item.nwurl);
                        that.getDevicePort(item.nwurl + "_" + item.nwtd); // 端口
                        that.getChannelInfo(item); // 通道
                        // that.loginLoading = false;
                        this.clickStartRealPlay(item, a); // 预览
                    },
                    error: function (x) {
                        console.log(x, '登录失败', item.nwurl, item.nwtd, item.appKey, item.appSecret, a);
                        const Shibai = { nwurl: item.nwurl, nwtd: item.nwtd, appKey: item.appKey, appSecret: item.appSecret, index: a }
                        this.Zaideng.push(Shibai)
                        // that.loginLoading = false;
                        that.$message({
                            showClose: true,
                            message: "登录失败" + item.nwurl,
                            type: "error",
                        });
                    },
                }
            );
        },
        //刷新
        shua() {
            this.Zaideng.forEach((item) => {
                this.onLogin(item, item.index);
            })
        },
        // 预览
        clickStartRealPlay(item, a) {
            // console.log("开始预览", item);
            // 开始预览
            var that = this;
            // that.startPlayLoading = true;
            var szDeviceIdentify = item.nwurl + "_" + item.nwtd;
            that.startRealPlay(szDeviceIdentify, a, that.hkvInfo.channels[0]);
            // that.startPlayLoading = false;
            console.log("开始预览", szDeviceIdentify, that.hkvInfo.channels[0]);
            this.$message({
                showClose: true,
                message: "摄像头登录成功",
                type: "success",
            })
        },
        async startRealPlay(szDeviceIdentify, iWndIndex) {
            // console.log(szDeviceIdentify, iWndIndex, iChannelID);
            var that = this;
            // if(that.iRtspPort){
            //     alert(that.iRtspPort)
            // }
            WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                async: true,
                timeout: 900,
                // iRtspPort: that.iRtspPort,
                iWndIndex: iWndIndex,
                iChannelID: 1,
                bZeroChannel: false,
                success: function () {
                    console.log('预览成功', szDeviceIdentify);
                },
                error(status, xmlDoc2) {
                    console.log(xmlDoc2, '预览失败'); //不能删除
                    if (status === 403) {
                        console.log("szInfo 设备不支持Websocket取流！");
                    } else {
                        console.log("开始预览失败 ", status, xmlDoc2);
                    }
                },
            });
        },
        // 控制移动
        mouseDownPTZControl(iPTZIndex) {
            console.log('移动了');
            let g_bPTZAuto = false;
            const g_iWndIndex = this.g_iWndIndex
            var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
                iPTZSpeed = $("#ptzspeed").val();
            if (oWndInfo != null) {
                if (9 == iPTZIndex && g_bPTZAuto) {
                    iPTZSpeed = 0;// 自动开启后，速度置为0可以关闭自动
                } else {
                    g_bPTZAuto = false;// 点击其他方向，自动肯定会被关闭
                }

                WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
                    iPTZSpeed: iPTZSpeed,
                    success: function (xmlDoc) {
                        if (9 == iPTZIndex && g_bPTZAuto) {
                            // showOPInfo(oWndInfo.szDeviceIdentify + " 停止云台成功！");
                        } else {
                            // showOPInfo(oWndInfo.szDeviceIdentify + " 开启云台成功！");
                        }
                        if (9 == iPTZIndex) {
                            g_bPTZAuto = !g_bPTZAuto;
                        }
                    },
                    error: function (oError) {
                        // showOPInfo(oWndInfo.szDeviceIdentify + " 开启云台失败！", oError.errorCode, oError.errorMsg);
                    }
                });
            }
        },
        // 控制停
        mouseUpPTZControl() {
            WebVideoCtrl.I_GetWindowStatus(0);

            WebVideoCtrl.I_PTZControl(1, true, {
                success: function (xmlDoc) {
                    // showOPInfo(oWndInfo.szDeviceIdentify + " 停止云台成功！");
                },
                error: function (oError) {
                    // showOPInfo(oWndInfo.szDeviceIdentify + " 停止云台失败！", oError.errorCode, oError.errorMsg);
                }
            });
        },
        // 拍照
        async clickCapturePic(szType) {
            // WebVideoCtrl.I_OpenFileDlg(0,{
            //     success:function (xmlDoc) {console.log(xmlDoc,123);},
            //     error:function(xxxx){console.log(xxxx,123);}
            // }),
            console.log("抓图");
            var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
            if (oWndInfo != null) {
                var oLocalConfig = await WebVideoCtrl.I_GetLocalCfg();
                var szCaptureFileFormat = "0";
                if (oLocalConfig) {
                    szCaptureFileFormat = oLocalConfig.captureFileFormat;
                }
                var szChannelID = $("#channels").val();
                var szPicName = oWndInfo.szDeviceIdentify + "_" + szChannelID + "_" + new Date().getTime();
                //如果是回放抓图，需要增加如下前缀："playback_"
                if ("playback" === szType) {
                    szPicName = "playback_" + oWndInfo.szDeviceIdentify + "_" + szChannelID + "_" + new Date().getTime();
                }

                szPicName += ("0" === szCaptureFileFormat) ? ".jpg" : ".bmp";

                WebVideoCtrl.I_CapturePic(szPicName, {
                    bDateDir: true  //是否生成日期文件
                }).then(() => {
                    this.$message({
                        showClose: true,
                        message: "拍照成功保存在" + oLocalConfig.capturePath,
                        type: "success",
                    });
                }, () => {
                    this.$message({
                        showClose: true,
                        message: "拍照失败",
                        type: "success",
                    });
                })
            }
        },
        // 开始录像
        async clickStartRecord(szType) {
            console.log("开始");
            let g_szRecordType = "";
            let oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
            var oLocalConfig = await WebVideoCtrl.I_GetLocalCfg();
            console.log(oLocalConfig);
            var szInfo = "";
            g_szRecordType = szType;
            var szChannelID = $("#channels").val(),
                szFileName = oWndInfo.szDeviceIdentify + "_" + szChannelID + "_" + new Date().getTime();
            WebVideoCtrl.I_StartRecord(szFileName, {
                bDateDir: true, //是否生成日期文件
                success: () => {
                    this.$message({
                        showClose: true,
                        message: "开始录像保存在" + oLocalConfig.recordPath,
                        type: "success",
                    });
                },
                error: function (oError) {
                    // if ('realplay' === szType) {
                    //     szInfo = " 开始录像失败！";
                    // } else if ('playback' === szType) {
                    //     szInfo = " 开始剪辑失败！";
                    // }
                    // showOPInfo(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
                }
            });
        },
        // 结束录像
        clickStopRecord() {
            console.log("结束");
            WebVideoCtrl.I_StopRecord({
                iWndIndex: this.g_iWndIndex,
                success: () => {
                    this.$message({
                        showClose: true,
                        message: "结束录像",
                        type: "warning",
                    });
                }
            })
        },
    }
};
</script>
<style lang="scss" scoped>
.control-wrapper {
    position: relative;
    width: 3.4vw;
    height: 3.3vw;
    top: -9px;
    // max-width: 300px;
    // max-height: 300px;
    // min-width: 240px;
    // min-height: 240px;
    // margin: 0 auto;
    border-radius: 50%;
}

.control-btn {
    cursor: pointer;
    position: absolute;
    width: 29px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #78aee4;
    box-sizing: border-box;
    transition: all .3s linear;
}

.control-btn:after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    background: #fff;
    z-index: 2;
}

.control-btn:before {
    content: '';
    position: relative;
    display: block;
    width: 7px;
    height: 7px;
    border-top: 3px solid #78aee4;
    border-right: 3px solid #78aee4;
    border-radius: 0 4px 0 0;
    box-sizing: border-box;
    z-index: 2;
}

.control-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
    border-radius: 4px 100% 4px 4px;
}

.control-top:before {
    transform: translate(30%, -25%);
}

.control-top:after {
    left: 0;
    bottom: 0;
    border-top: 1px solid #78aee4;
    border-right: 9px solid #78aee4;
    border-radius: 0 100% 0 0;
}

.control-bottom {
    left: 51%;
    bottom: 0;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 4px 4px 100% 4px;
}

.control-bottom:before {
    transform: translate(25%, 25%) rotate(90deg);
}

.control-bottom:after {
    top: 0;
    left: 0;
    border-bottom: 1px solid #78aee4;
    border-right: 8px solid #78aee4;
    border-radius: 0 0 100% 0;
}

.control-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
    border-radius: 4px 4px 4px 100%;
}

.control-left:before {
    transform: translate(-25%, 30%) rotate(180deg);
}

.control-left:after {
    right: 0;
    top: 0;
    border-bottom: 1px solid #78aee4;
    border-left: 8px solid #78aee4;
    border-radius: 0 0 0 100%;
}

.control-right {
    top: 49%;
    right: 0;
    transform: translateY(-50%) rotate(45deg);
    border-radius: 4px 100% 4px 4px;
}

.control-right:before {
    transform: translate(30%, -25%);
}

.control-right:after {
    left: 0;
    bottom: 0;
    border-top: 1px solid #78aee4;
    border-right: 8px solid #78aee4;
    border-radius: 0 100% 0 0;
}

.control-round {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 51.2%;
    height: 51.2%;
    background: #fff;
    border-radius: 50%;
}

.control-round-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 66%;
    height: 66%;
    border: 1px solid #78aee4;
    border-radius: 50%;
}

.control-round-inner:after {
    content: "| |";
    display: block;
    width: 50px;
    line-height: 50px;
    text-align: center;
    background: #78aee4;
    font-weight: bolder;
    color: #fff;
    border-radius: 50%;
}


/
.button-group {
    width: 50px;
    height: 50px;
    border: 1px solid #161A3F;
    // background-color: pink;
    margin-left: 2%;
}



.outter-circle {

    position: relative;


    width: 50px;

    height: 50px;
    // background-color: lightcyan;
    border-radius: 100%;

    overflow: hidden;

    transform-origin: center;

    transform: rotate(45deg);

}



.inner-parts {

    float: left;

    width: 25px;

    height: 25px;

    // line-height: 40px;

    text-align: center;

}



.silver {
    background-color: #0396CC;
    border: 1px solid rgba(255, 255, 255, 0);
    // color: #4489E4;
}

.gold {
    background-color: #0396CC;
    border: 1px solid rgba(255, 255, 255, 0);
}

.blue {
    background-color: #0396CC;
    border: 1px solid rgba(255, 255, 255, 0);
}

.brown {
    background-color: #4489E4;
    border: 1px solid rgba(255, 255, 255, 0);
}

.inner-circle {

    position: absolute;

    margin-top: 25px;

    margin-left: 25px;

    // width: 40px;

    // height: 40px;

    // line-height: 140px;

    text-align: center;

    border-radius: 100%;

    background-color: lightblue;

}



.rotate {
    display: inline-block;
    transform: rotate(-45deg);
}

//
td {
    width: 40px;
    text-align: center;
}

.playWnd {
    margin: 0 0 0 0;
    width: 960px;
    height: 500px;
}

.btn2 {
    height: 100%;
    font-size: 20px;
    background-color: #06071C;
    color: #e5e5e5;
    border: none;
    padding: 1px;
    width: 0px;
    overflow: hidden;
    width: 40px;
    background-color: #06071C;
    border: 1px solid rgb(180, 177, 177);
    transition: all .5s ease;
}

.btn3 {
    height: 100%;
    font-size: 20px;
    background-color: #06071C;
    color: #e5e5e5;
    border: none;
    padding: 1px;
    width: 0px;
    overflow: hidden;
    width: 40px;
    background-color: #06071C;
    background-color: #464ee4;
    border: 1px solid rgb(26, 180, 226);
    transition: all .5s ease;
}

.bigbtn {
    background-color: #06071C;
}

.bigbtn:hover .btn2 {
    width: 40px;
    background-color: #464ee4;
    border: 1px solid rgb(26, 180, 226);

}

.controls {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.controls button {
    border: none;
    box-sizing: border-box;
    height: 0px;
    flex: 1;
    overflow: hidden;
    transition: all .5s ease;
    // background-color:rgb(129, 130, 132) ;
    background-color: #06071C;
    color: #e5e5e5;
}

.controls:hover button {
    // height: 30px;
    height: 100px;
}

// .imgx{

//    border: 1px solid #ffffff;
//    background-color: rgb(129, 130, 132); 
//    color: #ffffff; width: 40px;
//    display: flex;
//    flex-direction: column;
//    height: 100%;  
//    font-size: 32px;
//    line-height:100%;
//    text-align: center;
//   justify-content: center;
// }
// .imgx:hover{
//   border: 1px solid #ffffff;
//    background-color: rgb(22, 26, 63); 
//    color: rgb(92, 213, 200); width: 40px;
//    height: 100%;  
//    margin: auto; 
//    font-size: 32px;
//    line-height:100%;
// }

.cbInfoDiv {
    float: left;
    width: 360px;
    margin-left: 16px;
    border: 1px solid #7f9db9;
}

.cbInfo {
    height: 200px;
    padding: 5px;
    border: 1px solid #7f9db9;
    word-break: break-all;
    overflow: scroll／auto;
}

.operate {
    margin-top: 24px;
}

.operate::after {
    content: "";
    display: block;
    clear: both;
}

.operate .btns {
    height: 32px;
}

.module {
    float: left;
    width: 120px;
    min-height: 290px;
    margin-left: 10px;
    padding: 16px 8px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
}

.module .item {
    margin-bottom: 4px;
}

.module .label {
    width: 150px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    text-align: right;
}

.module input[type="text"],
.module select {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0;
    width: 150px;
    min-height: 20px;
}

.module .btn {
    min-width: 80px;
    min-height: 24px;
    margin-top: 16px;
    margin-left: 158px;
}

.el-aside {
    margin: 0px;
    height: 84vh;
    color: #333;
    background-color: #0c0d0d;
}

.el-main {
    background-color: #0c0d0d;
    color: #333;
    text-align: center;
}
</style>