huangzhidong
/
guoyao-jiankang


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787
							<!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;
        }
        .abow_dialog {
            display: flex;
            justify-content: center;
            align-items: Center;
            overflow: hidden;
            
        }
        .abow_dialog .el-dialog {
            margin: 0 auto !important;
            height: 90%;
            overflow: hidden;
            width: 90%;
        }

        .abow_dialog .el-dialog .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
        }
        .el-footer {
            font-size: 13px;
        }
        .timeline-main {
            word-break: normal;
        }
    </style>
</head>

<body>
   <div id="app">    
       <el-button @click="open">打开视频插件</el-button> 
        <!-- 录像下载 -->
        <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>

        <el-dialog title="视频播放插件" class="console-info-pop abow_dialog" ref="pluginDialog" :visible.sync="pluginDialogVisible" :close-on-click-modal="false" >
            <div v-cloak style="height:100%;">
                <el-container class="shop-video" v-cloak>
                    <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>
            </div>
        </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: "appbox",
                appId: "",
                isLogin: false,
                // 控件的唯一编码
                ctrlCode: "ctrlbox",
                // 当前选择的渠道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,
                pluginDialogVisible: 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([])
                }
            },
            // 插件弹框关闭后，要销毁视频窗口
            pluginDialogVisible(val) {
                if (!val) {
                    this.unregister()
                    this.isLogin = false
                    this.windowMap.clear()
                    for (const key in this.recordInfoObj) {
                        this.$set(this.recordInfoObj, key, [])
                    }
                } 
            },

            
        },
        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": 4 },
                        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()
                        this.setPos()
                    }
                });
            },
            // 定位控件
            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 pluginDialog = this.$refs.pluginDialog.$refs.dialog
                let right = window.innerWidth - pluginDialog.offsetWidth - pluginDialog.offsetLeft
                let cutList = [{
                    "posX": posX + right, 
                    "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];

                    let pluginDialog = this.$refs.pluginDialog.$refs.dialog
                    this.cutList.push({
                        "posX": dateRangePicker.offsetLeft - pluginDialog.offsetLeft - parseInt(this.asideWidth), 
                        "posY": dateRangePicker.offsetTop - pluginDialog.offsetTop - 54,
                        "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 pluginDialog = this.$refs.pluginDialog.$refs.dialog
                let cutList = [{
                    "posX": dialog.offsetLeft - pluginDialog.offsetLeft - parseInt(this.asideWidth), 
                    "posY": dialog.offsetTop - pluginDialog.offsetTop - 54,
                    "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
                let pluginDialog = this.$refs.pluginDialog.$refs.dialog
                this.cutList = [{
                    "posX": dialog.offsetLeft - pluginDialog.offsetLeft - parseInt(this.asideWidth), 
                    "posY": dialog.offsetTop - pluginDialog.offsetTop - 54,
                    "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;
                        })
                    }
                })
            },

            getOffsetTopByBody (el) {
                let offsetTop = 0
                while (el && el.tagName !== 'BODY') {
                    offsetTop += el.offsetTop
                    el = el.offsetParent
                }
                return offsetTop
            },

            // 打开插件弹框
            open() {
                this.pluginDialogVisible = true
                this.$nextTick(() => {
                    let dialog = this.$refs.pluginDialog.$refs.dialog
                    this.ctrlPosY = dialog.offsetTop + 54
                    this.ctrlPosX = dialog.offsetLeft + 205
                    this.init()
                });
            },
            // 弹框初始化
            init() {
                // 获取开放平台token
                this.getToken();    
                // 窗口变化时重新定位视频插件，重新裁剪
                window.addEventListener('resize', this.resizeFn = this.debounce(() => {
                    if (this.$refs.pluginDialog) {
                        let dialog = this.$refs.pluginDialog.$refs.dialog
                        this.ctrlPosX = dialog.offsetLeft + 205
                        this.ctrlPosY = dialog.offsetTop + 54
                    }
                    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 = []
            },

            /**
             * 防抖函数
             */
            debounce(fn, time, timer) {
                var timer = timer || null
                return function () {
                    let args = arguments
                    clearTimeout(timer)
                    timer = setTimeout(() => {
                        fn.call(this, args)
                    }, time)
                }
            },
        },
        created() {
            const random = Math.ceil((1 + Math.random()) * 100000000)
            this.ctrlCode = 'ctrlBox' + random
            this.appName = 'appBox' + random
        },
        deactivated() {
            this.unregister()
            window.removeEventListener('resize', this.resizeFn)
        }
    })
</script>

</html>