26、ztree+hls拉流实时播放-上

<template>
    <div class="dvm-doc-user852-video-monitor" :style="calStyle" @click="clickMe">
        <div class="video-tree-box">
            <div class="tree-title">实时视频播放</div>
            <div class="tree-content">
                <ul id="videoMonitorBox" class="ztree tree-select-box"></ul>
            </div>
        </div>
        <div class="video-play-container">
            <div v-for="(item, i) in 4" :key="i" class="video-play-item">
                <img src="./img/video_bg.png" class="play-icon" v-if="!(videoList[i] && videoList[i].url)" />
                <video
                    v-if="videoList[i] && videoList[i].url"
                    :id="videoList[i].id"
                    controls="controls"
                    controlslist="nodownload"
                    disablePictureInPicture
                    muted
                    preload="auto"
                    style="width: 100%;height: 100%; object-fit: fill"
                >
                </video>
                <i v-if="videoList[i] && videoList[i].url" class="close-video"  @click="closeVideoPlay(videoList[i], i)">×</i>
            </div>
        </div>
    </div>
</template>

<script>
import dataset from './index'
import api from "./factory.js"
import Hls from 'hls.js';
export default {
    name: dataset.element,
    mixin: [],
    components: {
        // figureTitle
    },
    props: {
        datasetdata: {
            type: Object,
        },
        wallData: {
            type: Object
        }
    },
    data() {
        return {
            width: this.datasetdata.width,
            height: this.datasetdata.height,
            selectChannel: "",
            expandedKeys: [],
            autoExpandParent: true,
            checkedKeys: [],
            selectedKeys: [],
            replaceFields: {
                children: "children", title: "name", key: "id"
            },
            zNodes: [
                {
                    name: '测试0',
                    id: '000',
                    pId: "",
                    nodeType: "org",
                },
                {
                    name: '测试1',
                    id: '001',
                    pId: "",
                    nodeType: "org"
                },
                {
                    name: '测试0-1',
                    id: '0001',
                    pId: "000",
                    nodeType: "dev"
                },
                {
                    name: '测试1',
                    id: '0011',
                    pId: "001",
                    nodeType: "dev"
                }
            ],
            allTreeNodes: [],
            newTreeData: [],
            videoList: [],
            hls: {}
        }
    },
    computed: {
        // ...mapState({
        //     alarmMessage: ({emapStore}) => emapStore.alarmMessage
        // }),
        calStyle() {
            return {
                width: this.width + 'px',
                height: this.height + 'px'
            }
        }
    },
    mounted() {
        this.initTree();
    },
    watch: {
        // 报警信息监听
        alarmMessage: function (newVal) {
            // this.addAlarm(newVal)
        }
    },
   
    beforeDestroy() {
        for(let key in this.hls) {
            if(this.hls[key]) {
                this.hls[key].destory();
            }
        }
    }
}
</script>