huangzhidong
/
guoyao-jiankang


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频插件</title>
    <link data-n-head="true" rel="icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/demo.css">
    <link rel="stylesheet" href="./lib/ztree/css/zTreeStyle.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./lib/DHWs.js"></script>
    <script src="./lib/jquery.js"></script>
    <script type='text/javascript' src='./lib/crypto-js.min.js'></script>
    <style type="text/css">
        [v-cloak]{
          display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-container class="shop-video">
            <el-aside :width="asideWidth" class="mgb30">
                <ul class="left-ul" :style="{width: asideWidth}">
                    <li class="left-li float-l" @click="showTab(1)" class="active">
                        <span>通道</span>
                        <span class="current-icon"></span>
                    </li>
                </ul>
                <div class="shop-tree-box video-shop-tree" :class="holderFold ? 'holder-fold' : 'holder-unfold'">
                    <div class="input-box-client">
                        <search-input :max-len="25" mode="search" placeholdertip="请输入关键字搜索"
                            @search="handleTreeEnter"></search-input>
                    </div>
                    <ul id="videoShopTree" class="ztree lighter-scroll-bar" ref="videoShopTree"></ul>
                    <el-alert v-if="noNode" :closable="false" title="没有找到节点" type="warning" show-icon></el-alert>
                </div>
                <holder @holder-click="holderClick" @holder-handle="holderHandle" @switch-fold="switchFold" :brand="brand"></holder>
            </el-aside>
            <el-container>
                <el-main id="cBox" ref="cBox" class="cs-box relative">
                </el-main>
                <el-row class="w-precent-100 h40">
                    <el-col :span="12" class="h40" v-if="windowMap.get(hwnd + 1) && [1,2].includes(windowMap.get(hwnd + 1).playStatus)">
                        <span :class="recording ? 'recording-normal' : 'record-normal'"
                            :title="recording ? '停止录像' : '本地录像'" @click="localRecord"></span>
                        <span :class="audioing ? 'audio-normal' : 'audio-no-normal'"
                            :title="audioing ? '关闭声音' : '打开声音'" @click="audioOperation"></span>
                        <span class="snap1-icon" title="截图" @click="snapPic"></span>
                        <span v-show="windowMap.get(hwnd + 1).playStatus === 1" :class="talking ? 'talking-normal' : 'talk-normal'" :title="talking ? '关闭对讲' : '开启对讲'"
                            @click="talkOperation"></span>
                        <span v-show="windowMap.get(hwnd + 1).playStatus === 1" class="tool-span" :title="definitionMode === 1 ? '切换高清' : '切换标清'" @click="switchClarity">
                            {{definitionMode === 1 ? '标清' : '高清'}}</span>
                        <span class="stop-normal" title="停止" @click="stopPlay(hwnd)"></span>    
                        <p class="inline-block mg-0" v-show="windowMap.get(hwnd + 1) && windowMap.get(hwnd + 1).playStatus === 2">
                            <span class="slow-normal" title="后退15秒" @click="recordBackward"></span>    
                            <span :class="playing ? 'play-normal' : 'pause-normal'" :title="playing ? '暂停' : '播放'" @click="recordPause"></span>    
                            <span class="speed-normal" title="前进15秒" @click="recordForward"></span>    
                            <el-dropdown placement="bottom-end" @command="multipleRecord">
                                <span class="el-dropdown-link" title="播放倍数">
                                  {{multiple}}X<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                  <el-dropdown-item command="1">1X</el-dropdown-item>
                                  <el-dropdown-item command="2">2X</el-dropdown-item>
                                  <el-dropdown-item command="4">4X</el-dropdown-item>
                                  <el-dropdown-item command="6">6X</el-dropdown-item>
                                  <el-dropdown-item command="8">8X</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </p>
                    </el-col>
                    <el-col :span="12" class="h40" v-else></el-col>
                    <el-col :span="12" class="text-right h40">
                        <span class="p4-normal-icon" @click="stepLength = 0" title="1分屏"></span>
                        <el-slider class="el-slider-step" v-model="stepLength" :show-tooltip="false" :min="0" :max="5" @input="stepLengthInput"></el-slider>
                        <span class="p16-normal-icon" @click="stepLength = 5" title="16分屏"></span>
                        <span class="tool-span w34" :title="recordType === 1 ? '切换设备录像' : '切换云录像'" @click="switchRecordType">
                            {{recordType === 1 ? '云' : '设备'}}</span>
                        <span id="record-download-span" class="download-normal-icon" @click="showDownloadMode = true" title="录像下载"></span>
                        <ul v-show="showDownloadMode" class="download-ul" v-clickoutside="toggleMode">
                            <li v-if="recordType !== 1" @click="openByTimeDownloadDialog">按时间下载</li>
                            <li @click="openDownloadDialog">按文件下载</li>
                        </ul>
                        <span class="closeall-normal-icon" title="关闭所有" @click="closeAllVideo"></span>
                    </el-col>
                </el-row>
                <div class="timeline-div">
                    <i class="el-icon-arrow-left" @click="prev"></i>
                    <span class="inline-block w30">{{dateArr[1]}}月</span>
                    <div class="inline-block date-panel">
                        <p v-for="item in dayNum" :key="item" class="w-precent-3 inline-block">
                            <span class="time-point" :class="item === dateArr[2] ? 'time-point-active' : ''" @click="timePointClick(item)">{{item | dealZero}}</span>
                        </p>
                    </div>
                    <i class="el-icon-arrow-right" @click="next"></i>
                    <div class="inline-block select-date w140">
                        <el-date-picker v-model="selectDate" class="select-date" type="datetime" placeholder="选择日期" 
                        @change="updateDateArr" value-format="yyyy-MM-dd HH:mm:ss" @blur="dateBlur" @focus="dateFocus" default-time="12:00:00"></el-date-picker>
                    </div>
                </div>
                <el-footer height="104px" class="relative">
                    <div class="timeline-no">
                        <p v-for="item in screenNum[screenNum.length - 1]" class="timeline-no-p" :key="'p'+item" :class="hwnd === item - 1 ? 'font-red' : ''">
                            <span class="timeline-no-span">{{item}}</span>
                            <span class="timeline-title" :title="windowMap.get(item) ? windowMap.get(item).channelName : ''">
                                {{windowMap.get(item) ? windowMap.get(item).channelName : ''}}
                            </span>
                        </p>
                    </div>
                    <timer v-for="item in screenNum[screenNum.length - 1]" :ref="'timerRef'+item" :key="'timer'+item" @timer-change="timerChange($event, item, true)" :record-infos="recordInfoObj[item]"></timer>
                </el-footer>
            </el-container>
        </el-container>
        
        <!-- 录像下载 -->
        <el-dialog title="录像下载" class="console-info-pop" ref="downLoadDialog" :visible.sync="downLoadDialogVisible" :close-on-click-modal="false" width="850px">
            <el-form label-width="100px" class="record-date-form">
                <el-form-item class="ellipsis" label="录像日期：">
                    <el-date-picker
                        v-model="recordDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        size="mini"
                        @change="recordDateChange"
                        placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
            </el-form>
            <el-table
                highlight-current-row
                size="mini"
                border
                height="380"
                :data="recordData[hwnd]"
                v-loading="loading">
                <el-table-column prop="strBeginTime" label="开始时间" width="150" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column prop="strEndTime" label="结束时间" width="150" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column prop="strName" label="文件名" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        <span>{{windowMap.get(hwnd + 1) ? windowMap.get(hwnd + 1).orgName +'_'+ windowMap.get(hwnd + 1).channelName +'_'+  scope.row.strBeginTime.replace(/\s|-|:/g,"") +'_'+ scope.row.strEndTime.replace(/\s|-|:/g,"") +'.mp4': ''}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="channelName" label="通道名称" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        <span>{{windowMap.get(hwnd + 1) ? windowMap.get(hwnd + 1).channelName : ''}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="nFileLength" label="文件大小" width="70" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        <span>{{Math.round(scope.row.nFileLength / 1024 / 1024, 1)}}MB</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="90" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="downLoadByFile(scope.row, scope.$index)">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <!-- 按时间下载 -->
        <el-dialog title="按时间下载" class="console-info-pop" ref="timeDownLoadDialog" :visible.sync="timeDownLoadDialogVisible" :close-on-click-modal="false" width="540px">
            <el-form ref="downloadForm" label-width="100px" :model="downloadForm" class="w-precent-100">
                <el-form-item class="ellipsis" label="通道名称：">
                    <span>{{windowMap.get(hwnd + 1) ? windowMap.get(hwnd + 1).channelName : ''}}</span>
                </el-form-item>
                <el-form-item class="ellipsis" label="时间区间：" prop="timeRangeValue" :rules="{required: true, message: '时间区间不能为空', trigger: 'blur'}">
                    <el-date-picker
                    v-model="downloadForm.timeRangeValue"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @blur="dateRangeBlur" 
                    @focus="dateRangeFocus"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']">
                  </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="timeDownLoadDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="downLoadByTime">确 定</el-button>
              </span>
        </el-dialog>
    </div>
</body>
<script type="module">
    import { getShopTree, changeStatus, onDataSuccess, GetLeToken } from './lib/demo.js';
    import fetch from './lib/ajax.js'
    import utils from './lib/utils.js'
    import config from './config.js'
    const DHWsInstance = DHWs.getInstance({});
    new Vue({
        el: '#app',
        data: function () {
            return {
                // 窗口map，key为窗口号，从1开始，value为窗口信息，包括窗口的设备信息、通道信息、播放状态等等
                windowMap: new Map(), 
                resizeFn: null,
                // 支持的屏幕数组下标值
                stepLength: 1,
                // 支持的屏幕数组
                screenNum: [1, 4, 6, 8, 9, 16],
                ws: DHWsInstance,
                appName: "appdemo",
                appId: "",
                isLogin: false,
                // 控件的唯一编码
                ctrlCode: "ctrldemo",
                // 当前选择的渠道ID
                channelId: "", 
                // 清晰度模式
                definitionMode: 1,
                // 设备ID
                deviceId: '',
                //控件信息
                ctrlPosX: 205,
                ctrlPosY: 0,
                ctrlWidth: 1490,
                ctrlHeight: 760,
                // 通道map，key为channelId，value为通道信息
                channelMap: new Map(), 
                // 当前激活的窗口号，从0开始
                hwnd: 0,
                recording: false,
                audioing: false,
                talking: false,
                playing: true,
                asideWidth: '205px',
                // 选择的日期时间
                selectDate: '',
                // 选择的日期数组，格式[年, 月, 日]
                dateArr: [],
                isFocus: false,
                isRangeFocus: false,
                // 录像查看的参数，因为录像查看返回的信息是异步返回，所以需要保存，以便用于录像回放
                recordParam: {},
                // 录像片段信息，用于传值给时间轴组件，设置录像片段背景
                recordInfoObj: {},
                timerChangeFn: null,
                // 录像下载弹框里的录像数据
                recordData: {},
                downLoadDialogVisible: false,
                timeDownLoadDialogVisible: false,
                //云台操作折叠
                holderFold: true, 
                loading: false,
                showDownloadMode: false,
                // 录像查看后是否需要回放
                needPlayBack: true, 
                // 按时间下载表单
                downloadForm: {
                    timeRangeValue: ''
                },
                // 要裁剪的位置信息数组
                cutList: [],
                byTimeDownLoad: false,
                // 录像类型 0：设备录像，1：云录像 
                recordType: 0,
                // 播放倍数，默认1倍数
                multiple: 1,
                // 录像日期
                recordDate: '',
                // 设备品牌信息
                brand: 'general',
                // 播放中的结点，用于模糊查询后更新图标 
                playingNodes: [],

                searchKey: '',
                //是否无节点
                noNode: false,
                //乐橙token
                lcToken: '',
                //历史门店浏览
                hisStoreList: [],
                treeObj: '',
                //选择菜单index
                activeIndex: '1',
                // 拖拽显示的标志位
                showNarrow: false
            }
        },
        components: {
            'holder': httpVueLoader('./component/holder.vue'),
            'timer': httpVueLoader('./component/timer.vue'),
            'search-input': httpVueLoader('./component/search-input.vue'),
        },
        computed: {
            // 当前选择月份的天数
            dayNum() {
                if (this.dateArr.length > 0) {
                    return new Date(this.dateArr[0], this.dateArr[1], 0).getDate()
                } else {
                    return 0
                }
            }
        },
        watch: {
            // 按文件下载弹框打开后，要裁剪视频窗口
            downLoadDialogVisible(val) {
                if (val) {
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.cutDownloadDialog()                    
                        }, 0)
                    });
                } else {
                    this.cut([])
                }
            },
            // 按时间下载弹框打开后，要裁剪视频窗口
            timeDownLoadDialogVisible(val) {
                if (val) {
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.cutTimeDownloadDialog()                    
                        }, 0)
                    });
                } else {
                    this.cut([])
                }
            }
        },
        filters: {
            // 日期补0
            dealZero(val) {
                return val <= 9 ? '0' + val : val
            }
        },
        directives: {
            clickoutside: {
                bind (el, binding, vnode) {
                    function documentHandler (e) {
                        if (el.contains(e.target)) {
                            return false;
                        }
                        if (binding.expression) {
                            binding.value(e);
                        }
                    }
                    el.__vueClickOutside__ = documentHandler;
                    document.addEventListener('click', documentHandler);
                },
                unbind (el, binding) {
                    document.removeEventListener('click', el.__vueClickOutside__);
                    delete el.__vueClickOutside__;
                }
            }
        },
        methods: {
            // 连接
            connect() {
                this.ws.connectSocket({
                    port: config.websocket_port,
                })
                window.addEventListener('message', (e) => {  // 监听 message 事件
                    if (e.data.method === 'connectResult' && !e.data.success) {
                        // 连接客户端失败
                        this.$notify({
                            title: '连接提示',
                            message: '连接客户端失败',
                            type: 'warning',
                            position: 'bottom-right'
                        });
                        this.openDHPlayer();
                    }
                });
            },
            // 注销接口
            unregister() {
                this.ws.unregister({
                    appName: this.appName,
                });
            },
            // 注册接口
            register() {
                this.ws.detectConnectQt().then((res) => {
                    if (res) {
                        // 连接客户端成功
                        this.ws.register({
                            appName: this.appName,
                        });
                    } else {
                        // 连接客户端失败
                        // this.$notify({
                        //     title: '连接提示',
                        //     message: '连接客户端失败',
                        //     type: 'warning',
                        //     position: 'bottom-right'
                        // });
                        // this.openDHPlayer();
                    }
                });
            },
            // 未启动客户端的时候，主动打开客户端
            openDHPlayer() {
                var t = document.createElement('iframe');
                t.style.display = 'none';
                t.src = 'ECloudCtrl://';
                document.body.appendChild(t);
                setTimeout(function() {
                    document.body.removeChild(t)
                }, 1000 * 3)
            }, 
            // 创建控件接口
            create() {
                if (!this.isLogin) {
                    this.$notify({
                        title: '提示',
                        message: '请先注册应用名称',
                        type: 'warning',
                        position: 'bottom-right'
                    });
                    return false;
                }
                const params = [
                    {
                        ctrlType: 'playerWin',
                        ctrlCode: this.ctrlCode,
                        ctrlProperty: {
                            // 窗口的初始个数
                            'wndCount': 1,
                            // 是否显示窗口选中框
                            'enableSelectedRect': true,
                            // 窗口选中框颜色
                            'selectedRectColor': '#6B5FDD',
                            // 窗口背景颜色
                            'wndBgColor': '#2B2D33',
                            // 框架(位于所有窗口下层)背景颜色
                            'frameBgColor': '#202227',
                            // // 视频窗口背景图片数据(源图片需为png格式，数据传base64格式，去除前缀"data:image/png;base64,")
                            // 'wndBgPic': 'iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAABHNCSVQICAgIfAhkiAAAAalJREFUWEftmEFWgzAQhmfYwcYeoZ7AeoPeQJYkG+sN9CR6A+smdKknsDewR6gnsG5gx/iGV96rvNAkvAjps1nxYMjwzT+TkEEAgCzLpoj4iIhzAJjwvSEHEW0BYENED6vViq+NI03TSZIk7/xuWZZ3yBBRFH9oJTyFQBujCEYzuBNKZV2uWtDNHYM8hWIGvU3carkeX6pAXXXXXXXXX',
                            // // 视频播放加载动图数据(源动图需为gif格式，数据传base64格式，去除前缀"data:image/gif;base64,")
                            // 'videoLoadingGif': 'R0lGODlhIgFlAPf/AJqO/4Z593Vk9reSsdStjuTe7/S2kJWG5+zr9o6C+/HHr5KG+4h67f2iTfvEW/u8Wc6akYR6/cS88+Xj9JaK+4p993Vp58vF9nlt7ZqF2/+1Rp6S/42C9tvX67Wr+P+1NsnF7sqponRl7XBc93xx7npp+/2nZ+fX3XVp67y094p9+9LN9qyj+PHv9+ypZ9vJ0eq7qO/Ead7c9Ork7e7t/KeKx7q17Xxz/eXIxf/RN96rfoJ0/Hll+/61Z/27U2XXXXXXXXXXXXXXXX'
                        },
                        visible: true,
                        domId: "cBox",
                        posX: this.ctrlPosX,
                        posY: this.ctrlPosY,
                        width: this.$refs.cBox.$el.clientWidth,
                        height: this.$refs.cBox.$el.clientHeight,
                    },
                ];
                this.ws.createCtrl(params).then((res) => {
                    
                }).catch((e) => {
                    console.log(e);
                });
                this.ws.on("createCtrlResult", (res) => {
                    if (res && res.appId === this.appId && res.appName === this.appName) {
                        this.queryVersion()
                    }
                });
            },
            // 定位控件
            setPos() {
                if (!this.isLogin) {
                    return false;
                }
                const params = [
                    {
                        ctrlCode: this.ctrlCode,
                        posX: this.ctrlPosX,
                        posY: this.ctrlPosY,
                        width: this.$refs.cBox.$el.clientWidth,
                        height: this.$refs.cBox.$el.clientHeight,
                    }
                ];
                this.ws.setCtrlPos(params);
            },
            // 裁剪
            cut(cutList) { // 调用设置控件属性接口  修改剪切属性
                if (!this.isLogin) {
                    this.$notify({
                        title: '提示',
                        message: '请先注册应用名称',
                        type: 'warning',
                        position: 'bottom-right'
                    });
                    return false;
                }
                const params = [
                    {
                        ctrlCode: this.ctrlCode,
                        cutList: cutList
                    }
                ];
                this.ws.setCtrlPos(params);
            },
            // 云台点击，8个方向
            holderClick(data) {
                console.log("云台点击:" + JSON.stringify(data))
                if (this.windowMap.get(this.hwnd + 1) == null) {
                    console.log("当前窗口没有有效视频播放，无法操作云台")
                    return
                }
                let channelInfo = this.channelMap.get(this.channelId)
                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": {
                        direct: data.direct,
                        bStop: data.bStop,
                        step: data.stepLength,
                        token: this.lcToken,
                        user: channelInfo.user,
                        passwd: channelInfo.passwd,
                        deviceId: channelInfo.deviceId,
                        channelId: channelInfo.channelId
                    }
                }
                this.ws.transparent('ptzControlDir', param)
            },
            // 云台操作，聚焦 光圈 变倍
            holderHandle(data) {
                console.log("云台操作:" + JSON.stringify(data))
                if (this.windowMap.get(this.hwnd + 1) == null) {
                    console.log("当前窗口没有有效视频播放，无法操作云台")
                    return
                }
                const method = data.method
                let channelInfo = this.channelMap.get(this.channelId)
                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": {
                        bStop: data.bStop,
                        token: this.lcToken,
                        user: channelInfo.user,
                        passwd: channelInfo.passwd,
                        deviceId: channelInfo.deviceId,
                        channelId: channelInfo.channelId
                    }
                }
                if (method === 'ptzApertureOperation') {
                    param.params.apertureAdd = data.add
                } else if (method === 'ptzFocusOperation') {
                    param.params.focusAdd = data.add
                } else if (method === 'ptzZoomOperation') {
                    param.params.zoomAdd = data.add
                }
                this.ws.transparent(method, param)
            },
            // 云台操作面板折叠打开的切换
            switchFold(val) {
                this.holderFold = val
            },
            /**
             * @method openVideo() 播放通道视频
             */
            openVideo(channelItems, storeName) {
                let that = this;
                console.log('start to openVideo channels==========' + JSON.stringify(channelItems))
                channelItems = Array.isArray(channelItems) ? channelItems : [channelItems]
                GetLeToken().then((res) => {
                    let [token, len, params] = [res.data.data.token, channelItems.length, {}]
                    that.lcToken = token;
                    params.channels = []
                    params.module = 0
                    let channelList = []
                    for (let i = 0; i < len; i++) {
                        let channelItem = channelItems[i]
                        if (channelItem.onlineStatus != 0) {
                            channelList.push({ 
                                channelId: channelItem.channelId, 
                                definitionMode: 1, 
                                deviceId: channelItem.deviceId, 
                                hwnd: this.hwnd, 
                                token: that.lcToken,
                                devAbility: channelItem.ability,
                                devModel: channelItem.deviceModel,
                                orgCode: channelItem.storeId,
                                orgName: channelItem.storeName,
                                accessSource: channelItem.accessSource,
                                channelName: channelItem.channelName,
                                brand: channelItem.brand
                            })
                            this.channelMap.set(channelItem.channelId, {
                                user: utils.rDecodeDes('dh-qQ3j!retailcloud', channelItem.devUsername) || '',
                                passwd: utils.rDecodeDes('dh-qQ3j!retailcloud', channelItem.devPassword) || '',
                                deviceId: channelItem.deviceId,
                                channelId: channelItem.channelId
                            })
                        }
                        this.windowMap.set(this.hwnd + 1, {
                            channelId: channelItem.channelId, 
                            deviceId: channelItem.deviceId, 
                            channelName: channelItem.channelName,
                            devAbility: channelItem.ability,
                            devModel: channelItem.deviceModel,
                            orgCode: channelItem.storeId,
                            orgName: channelItem.storeName,
                            accessSource: channelItem.accessSource,
                            brand: channelItem.brand,
                            recordType: 0, //默认初始化为设备录像
                            multiple: 1, //默认初始化1倍数播放
                            playing: true, //默认初始化是播放状态
                            recording: false, //默认初始化是非录像状态
                            talking: false, //默认初始化是非对讲状态
                            initPlay: true //初始化播放
                        })
                        // 传值录像片段给timer组件，设置录像片段背景
                        this.$set(this.recordInfoObj, this.hwnd + 1, [])
                    }
                    this.$forceUpdate();
                    if (channelList.length > 0) {
                        let now = new Date();
                        this.dateArr = [now.getFullYear(), now.getMonth() + 1, now.getDate()]
                        this.updateSelectDate() 
                        this.playReal(channelList)
                    }
                })
            },
            /**
             * @method playReal() 实时预览
             */
            playReal(channelList) {
                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "method": "playReal",
                    "ctrlCode": this.ctrlCode,
                    "params": {
                        "array": channelList
                    }
                }
                this.ws.transparent('playReal', param)
            },
            /**
             * @method stepLengthInput() 视频窗口数目的变化
             */
            stepLengthInput(num) {
                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": {
                        "wndCount": this.screenNum[num]
                    }
                }
                if (this.appId) {
                    this.ws.transparent('setWndCount', param)
                }
            },
            /**
             * @method localRecord() 录像
             */
            localRecord() {
                this.recording = !this.recording
                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": {
                        "bStart": this.recording,
                        "hwnd": this.hwnd
                    }
                }
                this.ws.transparent('localRecord', param)

                // 记录窗口信息
                let windowInfo = this.windowMap.get(this.hwnd + 1)
                if (windowInfo != null) {
                    windowInfo.recording = this.recording
                }
            },
            /**
             * @method audioOperation() 声音操作
             */
            audioOperation() {
                this.audioing = !this.audioing
                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": {
                        "bStart": this.audioing,
                        "hwnd": this.hwnd
                    }
                }
                this.ws.transparent('audioOperation', param)
            },
            /**
             * @method talkOperation() 对讲操作
             */
            talkOperation() {
                this.talking = !this.talking
                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": {
                        "bStart": this.talking,
                        "hwnd": this.hwnd
                    }
                }
                this.ws.transparent('talkOperation', param)

                // 记录窗口信息
                let windowInfo = this.windowMap.get(this.hwnd + 1)
                if (windowInfo != null) {
                    windowInfo.talking = this.talking
                } 
            },
            /**
             * @method switchClarity() 切换清晰度
             */
            switchClarity() {
                this.definitionMode = this.definitionMode === 0 ? 1 : 0
                let channel = { channelId: this.channelId, definitionMode: this.definitionMode, deviceId: this.deviceId, token: this.lcToken, hwnd: this.hwnd }
                this.playReal([channel])
            },
            /**
             * @method snapPic() 截图
             */
            snapPic() {
                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": {
                        "hwnd": this.hwnd
                    }
                }
                this.ws.transparent('snapPic', param)
            },

            /**
             * @method recordBackward() 快退15秒
             */
             recordBackward() {
                 let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": {
                        "hwnd": this.hwnd
                    }
                }
                this.ws.transparent('recordBackward', param)
            },
            /**
             * @method recordForward()  快进15秒
             */
             recordForward() {
                 let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": {
                        "hwnd": this.hwnd
                    }
                }
                this.ws.transparent('recordForward', param)
            },

            /**
             * @method recordPause() 录像暂停/继续播放
             */
            recordPause() {
                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": {
                        "pause": this.playing,
                        "hwnd": this.hwnd
                    }
                }
                this.ws.transparent('recordPause', param)
                this.playing = !this.playing
                // 记录窗口信息
                let windowInfo = this.windowMap.get(this.hwnd + 1)
                if (windowInfo != null) {
                    windowInfo.playing = this.playing
                } 
            },

            /**
             * @method multipleRecord() 录像倍数播放
             */
            multipleRecord(command) {
                this.multiple = parseInt(command)
                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": {
                        "multiple": this.multiple,
                        "hwnd": this.hwnd
                    }
                }
                this.ws.transparent('multipleRecord', param)
                // 记录窗口信息
                let windowInfo = this.windowMap.get(this.hwnd + 1)
                if (windowInfo != null) {
                    windowInfo.multiple = this.multiple
                } 
            },

            /**
             * @method stopPlay() 停止
             */
            stopPlay(hwnd) {
                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": {
                        "hwnd": hwnd
                    }
                }
                this.ws.transparent('stopPlay', param)
            },

            /**
             * @method closeAllVideo() 关闭所有
             */
            closeAllVideo() {
                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                }
                this.ws.transparent('closeAllVideo', param)
            },

            /**
             * @param id 节点id
             * @method openNodeInfo()
             */
            openNodeInfo(id, item) {
                let that = this
                if (item) {
                    for (var i = 0, len = that.hisStoreList.length; i < len; i++) {
                        that.hisStoreList[i].isActive = false
                    }
                    item.isActive = true
                }
                Getone({ id: id }).then((res) => {
                    let shopData = res
                    if (!shopData.picArr || !shopData.picArr[0]) {
                        shopData.picArr = [noShopImg]
                    } else if (shopData.picArr[0]) {
                        shopData.picArr[0] = that.managePicUrl(shopData.picArr[0])
                    }
                    // if (!shopData.storePic1) {
                    //     shopData.storePic1 = noShopImg
                    // }
                    that.shopData = shopData
                })
            },
            /**
             * @method initShopTree() 初始化门店树
             */
            initShopTree(onAsyncSuccess) {
                let that = this
                let searchKey = encodeURIComponent(that.searchKey)
                const promise = new Promise(function (resolve, reject) {
                    getShopTree(
                        searchKey,
                        (isNoNode) => that.noNode = isNoNode,
                        (node) => {
                            console.log('videoShop clickCB')
                            try { console.log(JSON.stringify(node)); } catch (e) { e && console.log(e.stack); }
                            if (node.nodeType === 2) {
                                setTimeout(function () {
                                    let userId = JSON.parse(sessionStorage.dataMsg).id
                                    if (!userId || !node) {
                                        console.log('没有用户id或者没有传入门店信息:userId:' + userId + 'store:' + node)
                                        return
                                    }
                                    let historyStoreObj = localStorage.historyStoreList ? JSON.parse(localStorage.getItem('historyStoreList')) : {}
                                    let historyStoreList = historyStoreObj[userId] || []

                                    let index = historyStoreList.indexOf(node.id)
                                    if (index !== -1) historyStoreList.splice(index, 1)
                                    historyStoreList.unshift(node.id)
                                    if (historyStoreList.length > 10) {
                                        historyStoreList = historyStoreList.splice(0, 10)
                                    }
                                    historyStoreObj[userId] = historyStoreList
                                    localStorage.historyStoreList = JSON.stringify(historyStoreObj)
                                    that.storeId = node.id
                                    that.storeName = node.name
                                    that.openNodeInfo(node.id)
                                }, 300);
                            }
                        },
                        (treeNodes) => {
                            let [len, channelItems, devName] = [treeNodes.length, [], '']
                            for (var i = 0; i < len; i++) {
                                let treeNode = treeNodes[i]
                                let channelItem = {
                                    deviceId: treeNode.deviceId,
                                    channelId: treeNode.channelId,
                                    channelName: treeNode.showName,
                                    ability: treeNode.ability,
                                    deviceModel: treeNode.deviceModel,
                                    storeId: treeNode.storeId,
                                    storeName: treeNode.storeName,
                                    accessSource: treeNode.accessSource,
                                    onlineStatus: treeNode.onlineStatus,
                                    brand: treeNode.brand,
                                    devUsername: treeNode.devUsername || '',
                                    devPassword: treeNode.devPassword || '',
                                }
                                channelItems.push(channelItem)
                            }
                            that.openVideo(channelItems)
                        },
                        that.$refs.videoShopTree,
                        'videoShopTree',
                        onAsyncSuccess,
                        that
                    ).then((treeObj) => {
                        that.treeObj = treeObj
                        if (that.playingNodes.length > 0) {
                            changeStatus(that.playingNodes)
                        }
                        onDataSuccess()
                        resolve(true);
                    })
                });
                return promise
            },
            /**
             * @method handleTreeEnter 查询树节点
             */
            handleTreeEnter(val) {
                this.searchKey = val
                this.initShopTree()
            },

            /**
             * @method showTab() 展示当前tab
             */
            showTab(num) {
                this.tabNum = num
            },

            /**
             * @method switchRecordType() 切换录像类型，录像类型 0：设备录像，1：云录像 
             */
            switchRecordType() {
                this.recordType = this.recordType === 0 ? 1 : 0

                let windowInfo = this.windowMap.get(this.hwnd + 1)
                if (windowInfo != null) {
                    windowInfo.recordType = this.recordType
                    windowInfo.initPlay = false

                    let startTime = `${this.dateArr[0]}-${this.addZero(this.dateArr[1])}-${this.addZero(this.dateArr[2])} 00:00:00`
                    this.checkRecord(startTime, this.hwnd + 1)
                } 
            },

            /**
             * @method timerChange() 时间点变化
             */
            timerChange(time, num, needPlayBack) {
                let oriTime = this.getWindowTime(num)
                if (oriTime == null) {
                    oriTime = this.getNowTime()
                } 
                let selectTime = `${oriTime.split(" ")[0]} ${time}`
                this.setWindowTime(num, selectTime)

                const channelInfo = this.windowMap.get(num)
                if (channelInfo == null) {
                    return;
                } else {
                    channelInfo.initPlay = false
                }

                if (needPlayBack) {
                    if (this.timerChangeFn == null) {
                        this.timerChangeFn = this.debounce((args) => {
                            // 回放
                            this.playBack(args[0], args[1])
                        }, 500)
                    }
                    this.recordParam[num - 1].beginTime = selectTime
                    this.recordParam[num - 1].endTime = selectTime.split(" ")[0] + " 23:59:59"
                    this.timerChangeFn(this.recordData[num - 1], num - 1)
                }
            },
            /**
             * @method checkRecord() 录像查看
             */
            checkRecord(selectTime, num) {
                const channelInfo = this.windowMap.get(num)
                if (channelInfo == null) {
                    console.log(`分屏${num}没有绑定任何有效通道，无法查看录像`)
                    return false;
                }
                let beginTime, endTime
                if (Array.isArray(selectTime)) {
                    beginTime = selectTime[0]
                    endTime = selectTime[1]
                } else {
                    beginTime = selectTime
                    endTime = selectTime.split(" ")[0] + " 23:59:59"
                }
                this.recordParam[num - 1] = {
                    "token": this.lcToken,
                    "deviceId": channelInfo.deviceId,
                    "channelId": channelInfo.channelId,		
                    "beginTime": beginTime,
                    "endTime": endTime,
                    "recordType": channelInfo.recordType,
                    "hwnd": num - 1,
                    "accessSource": channelInfo.accessSource
                }
                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": this.recordParam[num - 1]
                }
                this.ws.transparent('checkRecord', param)
            },
            /**
             * @method playBack() 录像回放
             */
             playBack(recordInfos, hwnd) {
                if(recordInfos.length === 0){
                    this.$notify({
                        title: '提示',
                        message: '没有录像',
                        type: 'warning',
                        customClass: 'fixed-bottom',
                        position: 'bottom-right'
                    });
                    return;
                }

                let params = JSON.parse(JSON.stringify(this.recordParam[hwnd])) 
                if (params.beginTime.indexOf("00:00:00") > -1) {
                    params.recordInfos = recordInfos
                } else {
                    params.recordInfos = recordInfos.filter(record => {
                        const containsStart = record.strBeginTime >= params['beginTime'] && record.strBeginTime <= params['endTime']
                        const containsEnd = record.strEndTime >= params['beginTime'] && record.strEndTime <= params['endTime']
                        const containsAll = record.strEndTime >= params['endTime'] && record.strBeginTime <= params['beginTime']
                        return containsStart || containsEnd || containsAll
                    })
                }

                if (params.recordInfos.length === 0) {
                    this.$notify({
                        title: '提示',
                        message: '没有录像',
                        type: 'warning',
                        customClass: 'fixed-bottom',
                        position: 'bottom-right'
                    });
                    this.stopPlay(this.recordParam[hwnd])
                    return;
                }

                let windowInfo = this.windowMap.get(hwnd + 1)
                params.orgCode = windowInfo.orgCode
                params.orgName = windowInfo.orgName
                params.devAbility = windowInfo.devAbility
                params.devModel = windowInfo.devModel
                params.accessSource = windowInfo.accessSource
                params.channelName = windowInfo.channelName
                params.recordType = windowInfo.recordType

                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": params
                }
                this.ws.transparent('playBack', param)
            },

            /**
             * @method prev() 上个月
             */
            prev() {
                if (this.dateArr[1] === 1) {
                    this.$set(this.dateArr, '1', 12)
                    this.$set(this.dateArr, '0', this.dateArr[0] - 1)
                } else {
                    this.$set(this.dateArr, '1', this.dateArr[1] - 1)
                }
                this.timePointClick(this.dayNum)
            },

            /**
             * @method next() 下个月
             */
            next() {
                if (this.dateArr[1] === 12) {
                    this.$set(this.dateArr, '1', 1)
                    this.$set(this.dateArr, '0', this.dateArr[0] + 1)
                } else {
                    this.$set(this.dateArr, '1', this.dateArr[1] + 1)
                }
                this.timePointClick(this.dayNum)
            },

            /**
            * @method timePointClick() 点击时间点
            */
            timePointClick(item) {
                let num = this.hwnd + 1
                this.$set(this.dateArr, '2', item)
                this.updateSelectDate()
                this.$refs['timerRef'+num][0].positionTime("12:00:00")
                this.timerChange("12:00:00", num)

                // 点击时间点的时候去查录像
                let startTime = `${this.dateArr[0]}-${this.addZero(this.dateArr[1])}-${this.addZero(this.dateArr[2])} 00:00:00`
                this.checkRecord(startTime, num)
            },
            /**
            * @method updateSelectDate() 更新选择的日期时间
            */
            updateSelectDate() {
                this.selectDate = `${this.dateArr[0]}-${this.addZero(this.dateArr[1])}-${this.addZero(this.dateArr[2])} 12:00:00`
                this.setWindowTime(this.hwnd + 1, this.selectDate)
            },
            /**
            * @method updateDateArr() 更新日期数组
            */
            updateDateArr(dateStr) {
                let date = dateStr.split(" ")[0]
                let time = dateStr.split(" ")[1]
                let arr = date.split("-")
                for (let index = 0; index < arr.length; index++) {
                    this.$set(this.dateArr, index, parseInt(arr[index]))
                }
                let num = this.hwnd + 1
                this.$refs['timerRef'+num][0].positionTime(time)
                let preTime = this.getWindowTime(num)
                this.setWindowTime(num, dateStr)
                
                const windowInfo = this.windowMap.get(num)
                if (windowInfo != null && preTime != null && preTime.split(" ")[0] != date) {
                    this.timerChange(time, num)
                    // 切换时间的时候日期有变化才去查录像，不是每次切换都去查
                    let startTime = `${date} 00:00:00`
                    this.checkRecord(startTime, num)
                } else {
                    this.timerChange(time, num, true)
                }
            },
            /**
            * @method dateBlur() 日期失焦
            */
            dateBlur() {
                this.isFocus = false
                this.cut([])
            },
            /**
            * @method dateFocus() 日期聚焦
            */
            dateFocus() {
                let cutAreaWidth = 321
                let cutAreaHeight = 400
                let clientWidth = this.$refs.cBox.$el.clientWidth
                let clientHeight = this.$refs.cBox.$el.clientHeight
                let posX = clientWidth - cutAreaWidth
                let posY = clientHeight - cutAreaHeight
                let cutList = [{
                    "posX": posX, 
                    "posY": posY,
                    "width": cutAreaWidth,
                    "height": cutAreaHeight
                }]
                this.isFocus = true
                this.cut(cutList)
            },
            /**
            * @method dateBlur() 日期范围输入框失焦
            */
            dateRangeBlur() {
                this.isRangeFocus = false
                this.cut([this.cutList[0]])
            },
            /**
            * @method dateFocus() 日期范围输入框聚焦
            */
            dateRangeFocus() {
                let dialog = this.$refs.timeDownLoadDialog.$el.firstChild
                this.$nextTick(() => {
                    let dateRangePicker = document.querySelectorAll(".el-date-range-picker")[0];
                    this.cutList.push({
                        "posX": dateRangePicker.offsetLeft - parseInt(this.asideWidth), 
                        "posY": dateRangePicker.offsetTop,
                        "width": dateRangePicker.clientWidth,
                        "height": dateRangePicker.clientHeight
                    })
                    this.isRangeFocus = true
                    this.cut(this.cutList)
                });
            },

            /**
            * @method queryVersion() 查询客户端版本，只是为了建立连接，没什么特殊意义
            */
            queryVersion() {
                let param = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                }
                this.ws.transparent('checkVersion', param)
            },

            /**
            * @method recordDateChange() 日期变化查询录像文件
            */
            recordDateChange(date) {
                if (date) {
                    this.needPlayBack = false
                    this.checkRecord(date + " 00:00:00", this.hwnd + 1)
                }
            },

            /**
            * @method openDownloadDialog() 打开下载选择文件的弹框
            */
            openDownloadDialog() {
                // 关闭下载模式选择框
                this.showDownloadMode = false
                // 置为无需回放
                this.needPlayBack = false
                let windowTime = this.getWindowTime(this.hwnd + 1)
                if (windowTime != null) {
                    this.checkRecord(windowTime.split(" ")[0] + " 00:00:00", this.hwnd + 1)
                    this.recordDate = windowTime.split(" ")[0]
                    // 打开文件下载框
                    this.downLoadDialogVisible = true
                }
            },
            /**
            * @method downLoadByFile() 录像下载-按文件
            */
            downLoadByFile(row, index) {
                let windowInfo = this.windowMap.get(this.hwnd + 1)
                let params = {
                    "token": this.lcToken,
                    "deviceId": windowInfo.deviceId,
                    "channelId": windowInfo.channelId,		
                    "recordType": windowInfo.recordType,
                    "devAbility": windowInfo.devAbility,
                    "devModel": windowInfo.devModel,
                    "channelName": windowInfo.channelName,
                    "shopName" : windowInfo.orgName,
                    "recordInfo": row
                }
                let data = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": params
                }

                this.recordData[this.hwnd].splice(index, 1);

                this.ws.transparent('startDownloadByFile', data)
            },
            /**
            * @method toggleMode() 点击外部区域关闭下载模式选择面板
            */
            toggleMode(e) {
                if (this.showDownloadMode && e.target.id !== 'record-download-span') {
                    this.showDownloadMode = false
                }
            },
            /**
            * @method openByTimeDownloadDialog() 打开录像下载弹框-按时间
            */
            openByTimeDownloadDialog() {
                // 关闭下载模式选择框
                this.showDownloadMode = false
                // 打开时间下载弹框
                this.timeDownLoadDialogVisible = true
            },
            /**
            * @method downLoadByTime() 录像下载-按时间
            */
            downLoadByTime() {
                this.$refs['downloadForm'].validate((valid) => {
                    if (valid) {
                        // 置为无需回放
                        this.needPlayBack = false
                        // 关闭时间下载弹框
                        this.timeDownLoadDialogVisible = false
                        this.byTimeDownLoad = true
                        this.checkRecord(this.downloadForm.timeRangeValue, this.hwnd + 1)
                    } 
                });
            },
            /**
            * @method startDownloadByTime() 开始录像下载-按时间
            */
            startDownloadByTime(recordInfos) {
                let windowInfo = this.windowMap.get(this.hwnd + 1)
                let params = {
                    "token": this.lcToken,
                    "deviceId": windowInfo.deviceId,
                    "channelId": windowInfo.channelId,	
                    "beginTime": this.recordParam[this.hwnd]['beginTime'],
		            "endTime": this.recordParam[this.hwnd]['endTime'],
                    "recordType": windowInfo.recordType,
                    "devAbility": windowInfo.devAbility,
                    "devModel": windowInfo.devModel,
                    "channelName": windowInfo.channelName,
                    "shopName" : windowInfo.orgName,
                    "recordInfos": recordInfos
                }
                let data = {
                    "appId": this.appId,
                    "appName": this.appName,
                    "ctrlCode": this.ctrlCode,
                    "params": params
                }
                
                this.ws.transparent('startDownloadByTime', data)
            },
            /**
            * @method cutDownloadDialog() 裁剪下载弹框
            */
            cutDownloadDialog() {
                let dialog = this.$refs.downLoadDialog.$el.firstChild
                let clientWidth = dialog.clientWidth
                let clientHeight = 529
                let cutList = [{
                    "posX": dialog.offsetLeft - parseInt(this.asideWidth), 
                    "posY": dialog.offsetTop,
                    "width": clientWidth,
                    "height": clientHeight
                }]
                this.cut(cutList)
            },

            /**
            * @method cutTimeDownloadDialog() 裁剪按时间下载弹框
            */
            cutTimeDownloadDialog() {
                let dialog = this.$refs.timeDownLoadDialog.$el.firstChild
                let clientWidth = dialog.clientWidth
                let clientHeight = dialog.clientHeight
                this.cutList = [{
                    "posX": dialog.offsetLeft - parseInt(this.asideWidth), 
                    "posY": dialog.offsetTop,
                    "width": clientWidth,
                    "height": clientHeight
                }]
                this.cut(this.cutList)
            },

            /**
            * @method setWindowTime() 设置窗口时间
            */
            setWindowTime(num, time) {
                if (this.windowMap.get(num)) {
                    this.windowMap.get(num)['time'] = time
                }
            },

            /**
            * @method getWindowTime() 获取窗口时间
            */
            getWindowTime(num) {
                if (this.windowMap.get(num)) {
                    return this.windowMap.get(num)['time']
                } else {
                    return null
                }
            },

            /**
             * @method addZero() 月日时分秒补0函数
             */
            addZero: (time) => {
                let newTime = time > 9 ? time : '0' + time
                return newTime
            },
            /**
             * 获取格式为yyyy-mm-dd hh:mm:ss的日期
             */
            getNowTime() {
                const time = {}
                let date = new Date()
                time.y = this.addZero(date.getFullYear())
                time.m = this.addZero(date.getMonth() + 1)
                time.d = this.addZero(date.getDate())
                time.h = this.addZero(date.getHours())
                time.min = this.addZero(date.getMinutes())
                time.s = this.addZero(date.getSeconds())
                return `${time.y}-${time.m}-${time.d} ${time.h}:${time.min}:${time.s}`
            },

            /**
            * @method downloadTip() 下载返回的提示
            */
            downloadTip(res, message = '下载中，请稍候...') {
                if (res.success) {
                    this.$notify({
                        title: '提示',
                        message: message,
                        type: 'warning',
                        position: 'bottom-right'
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.dataObj,
                        type: 'warning',
                        position: 'bottom-right'
                    });
                }
            },

            /**
             * 监听客户端消息
             */
            onClientMessage() {
                // 监控注册状态
                this.ws.on("registerState", (res) => {
                    if (res && res.appName === this.appName) {
                        this.isLogin = res.params.registerResult === 0;
                        if (this.isLogin) {
                            this.appId = res.appId
                            console.log("注册成功：" + JSON.stringify(res));
                            this.create()
                        } else {
                            console.log("注册失败");
                        }
                    }
                });

                // 监控激活窗口变化情况
                this.ws.on("activeWnd", (res) => {
                    if (res && res.ctrlCode === this.ctrlCode && res.appId === this.appId && res.appName === this.appName) {
                        let dataObj = JSON.parse(res.dataObj)
                        if (this.hwnd !== dataObj.activeWnd) {
                            // 默认是静音状态
                            this.audioing = false 
                        }
                        this.channelId = dataObj.channelID + ""
                        this.hwnd = dataObj.activeWnd
                        this.definitionMode = dataObj.definitionMode
                        this.deviceId = dataObj.deviceID
                        let time = this.getWindowTime(this.hwnd + 1)
                        if (time != null) {
                            this.selectDate = time
                            let times = time.split(" ")[0].split("-")
                            for (let index = 0; index < times.length; index++) {
                                this.$set(this.dateArr, index, parseInt(times[index]))
                            }
                        }

                        // 窗口变化时，变化对应的录像类型、播放状态、倍数
                        let windowInfo = this.windowMap.get(this.hwnd + 1)
                        if (windowInfo != null) {
                            this.recordType = windowInfo.recordType
                            this.multiple = windowInfo.multiple
                            this.playing = windowInfo.playing
                            this.recording = windowInfo.recording
                            this.talking = windowInfo.talking
                            this.brand = windowInfo.brand
                        } else {
                            this.recordType = 0
                            this.multiple = 1
                            this.playing = true
                            this.recording = false //默认是非录像状态
                            this.talking = false //默认是非对讲状态
                            this.brand = 'general'
                        }
                    }
                });

                //监听查看录像的返回结果
                this.ws.on("checkRecordReply", (res) => {
                    if (res && res.ctrlCode === this.ctrlCode && res.appId === this.appId && res.appName === this.appName) {
                        if (res.recordInfos.length === 0) {
                            this.$notify({
                                title: '提示',
                                message: '没有录像',
                                type: 'warning',
                                customClass: 'fixed-bottom',
                                position: 'bottom-right'
                            });
                            
                            let windowInfo = this.windowMap.get(res.hwnd + 1)
                            if ((windowInfo != null && windowInfo.recordType === 1) || (windowInfo != null && !windowInfo.initPlay && !this.byTimeDownLoad)) {
                                // 没有录像要停止窗口的播放
                                this.stopPlay(res.hwnd)
                                this.$set(this.recordInfoObj, res.hwnd + 1, [])
                            }

                            if (!this.byTimeDownLoad) {
                                this.recordData[res.hwnd] = []
                            } else {
                                this.byTimeDownLoad = false
                            }
                            this.needPlayBack = true
                            return false
                        }
                        let hwnd = res.hwnd
                        let recordInfos = res.recordInfos
                        
                        let windowTime = this.getWindowTime(hwnd + 1)
                        recordInfos.forEach(record => {
                            record.windowTime = windowTime;
                        })

                        // 按时间下载
                        if (this.byTimeDownLoad) {
                            this.startDownloadByTime(res.recordInfos)
                            this.byTimeDownLoad = false
                        } else {
                            this.$set(this.recordData, hwnd, recordInfos)
                            if (!this.downLoadDialogVisible) {
                                // 传值录像片段给timer组件，设置录像片段背景
                                this.$set(this.recordInfoObj, hwnd + 1, recordInfos)
                            }
                        }

                        if (this.needPlayBack) {
                            // 回放
                            this.playBack(recordInfos, hwnd)
                        } else {
                            this.needPlayBack = true
                        }
                        
                    } 
                });

                // 监听开始下载的返回结果
                this.ws.on("startDownloadByFile", (res) => {
                    if (res && res.ctrlCode === this.ctrlCode && res.appId === this.appId && res.appName === this.appName) {
                        this.downloadTip(res)
                    }
                });
                this.ws.on("startDownloadByTime", (res) => {
                    if (res && res.ctrlCode === this.ctrlCode && res.appId === this.appId && res.appName === this.appName) {
                        this.downloadTip(res)
                    }
                });

                // 监听关闭单个窗口（停止）的返回结果
                this.ws.on("stopPlay", (res) => {
                    if (res && res.ctrlCode === this.ctrlCode && res.appId === this.appId && res.appName === this.appName && res.success) {
                        // 播放状态 0.播放关闭  1.实时播放成功，2.录像播放成功，3.实时播放失败，4.录像播放失败
                        let windowInfo = this.windowMap.get(JSON.parse(res.dataObj).hwnd + 1)
                        windowInfo['playStatus'] = 0
                        this.$forceUpdate();
                        // 修改通道状态图标
                        let param = {deviceID: windowInfo.deviceId, channelID: windowInfo.channelId, status: 0}
                        this.playingNodes = this.playingNodes.filter(item => !(item.deviceID === windowInfo.deviceId && item.channelID === windowInfo.channelId))
                        changeStatus([param])
                    }
                });

                // 监听关闭所有窗口的返回结果
                this.ws.on("closeAllVideo", (res) => {
                    if (res && res.ctrlCode === this.ctrlCode && res.appId === this.appId && res.appName === this.appName && res.success) {
                        let statusParam = []
                        this.windowMap.forEach((windowInfo, key) => {
                            windowInfo['playStatus'] = 0
                            this.$forceUpdate();
                            // 修改通道状态图标
                            let param = {deviceID: windowInfo.deviceId, channelID: windowInfo.channelId, status: 0}
                            statusParam.push(param)
                        })
                        this.playingNodes = []
                        changeStatus(statusParam)
                    }
                });

                // 监听下载成功失败的回复
                this.ws.on("downloadStatusNotify", (res) => {
                    if (res && res.ctrlCode === this.ctrlCode && res.appId === this.appId && res.appName === this.appName) {
                        if (res.success) {
                            this.downloadTip(res, "下载成功，请前往客户端安装目录的Download文件夹查看")
                        } else {
                            res.dataObj = "下载失败"
                            this.downloadTip(res)
                        }
                    }
                });

                // 监控播放状态返回
                this.ws.on("videoStatusNotify", (res) => {
                    if (res && res.ctrlCode === this.ctrlCode && res.appId === this.appId && res.appName === this.appName) {
                        let dataObj = JSON.parse(res.dataObj)
                        let hwnd = dataObj.hwnd
                        
                        // 播放状态 0.播放关闭  1.实时播放成功，2.录像播放成功，3.实时播放失败，4.录像播放失败
                        let windowInfo = this.windowMap.get(hwnd + 1)
                        windowInfo['playStatus'] = dataObj.playStatus
                        this.$forceUpdate();
                        // 修改通道状态图标
                        let param = {deviceID: windowInfo.deviceId, channelID: windowInfo.channelId}
                        param.status = [1,2].includes(dataObj.playStatus) ? 1 : 0
                        this.playingNodes.push(param)
                        changeStatus([param])


                        if (dataObj.playStatus === 1) {
                            // 实时播放成功，查询当天的录像
                            let nowTime = this.getNowTime()
                            let nowDate = nowTime.split(" ")[0]
                            this.needPlayBack = false
                            this.setWindowTime(hwnd + 1, `${nowDate} 12:00:00`)
                            this.checkRecord(`${nowDate} 00:00:00`, hwnd + 1)
                        }
                    }
                });
            },

            /**
             * 获取开放平台token
             */
             getToken() {
                let that = this
                // const url = `${config.base_url}/gateway/auth/oauth/token?grant_type=client_credentials&scope=server&client_id=${config.client_id}&client_secret=${config.client_secret}`
                const url = `${config.base_url}/admin/dahua/token`;
                axios({
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    method: 'POST',
                    url: url,
                }).then(res => {
                    if (res.data.access_token) {
                        sessionStorage.setItem('token', res.data.access_token)
                        that.initShopTree().then(function () {
                            that.showNarrow = true;
                        })
                    }
                })
            },

            /**
             * 防抖函数
             */
            debounce(fn, time, timer) {
                var timer = timer || null
                return function () {
                    let args = arguments
                    clearTimeout(timer)
                    timer = setTimeout(() => {
                        fn.call(this, args)
                    }, time)
                }
            },
        },
        mounted() {
            // 获取开放平台token
            this.getToken();    
            // 窗口变化时重新定位视频插件，重新裁剪
            window.addEventListener('resize', this.resizeFn = this.debounce(() => {
                this.setPos()
                if (this.downLoadDialogVisible) {
                    this.cutDownloadDialog()
                }
                if (this.timeDownLoadDialogVisible) {
                    this.cutTimeDownloadDialog()
                }
                if (this.isFocus) {
                    this.dateFocus()
                }
                if (this.isRangeFocus) {
                    this.dateRangeFocus()
                }
            }, 50))

            // 连接websocket
            this.connect()
            if (this.isLogin) {
                this.create()
            } else {
                this.register()
            }

            // 监听客户端返回的消息
            this.onClientMessage();

            // 回放模块的日期默认为当前日期
            let now = new Date();
            // [年, 月, 日]
            this.dateArr = [now.getFullYear(), now.getMonth() + 1, now.getDate()]
            this.updateSelectDate() 

            this.playingNodes = []
        },
        created() {
            const random = Math.ceil((1 + Math.random()) * 100000000)
            this.ctrlCode = 'ctrlDemo' + random
            this.appName = 'appDemo' + random
        },
        deactivated() {
            this.unregister()
            window.removeEventListener('resize', this.resizeFn)
        }
    })
</script>

</html>