TEAMModelOS/TEAMModeBI/ClientApp/src/components/AbilityTree.vue

<template>
    <div class="ability-tree-container">
        <div class="left-box">
            <div class="chapter">
                <div style="width:90%">章节</div>
                <div class="addzy" @click="addFirstnode">
                    <svg class="addicon" aria-hidden="true">
                        <use xlink:href="#icon-jia"></use>
                    </svg>
                </div>
            </div>
            <el-tree ref='treeRef' :data="tree" :props="defaultProps" node-key="id" :highlight-current="true" :current-node-key="pitchNow" default-expand-all :expand-on-click-node="false" :render-content="renderContent" @node-click="handleNodeClick" />
        </div>
        <div class="right-box">
            <div class="resource">
                <div class="resource-title">关联资源</div>
                <div class="changebtn" v-show="uploadList.length !==0" @click="changes">
                    <el-button type="primary" size="small ">存储变更</el-button>
                </div>
                <div class="resourceadd-box">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            新增资源
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="openUpload"><i class="el-icon-plus" @click="editAbility"></i>本地文件</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
            <div class="resourcebox" v-if="datais">
                <div class="resource-item" v-for="(item,index) in curNode" :key="item.id">
                    <img src="@/assets/icon/image.png" v-if="item.type === 'image'" />
                    <img src="@/assets/icon/word.png" v-else-if="item.type === 'doc' && docType.includes(getSuffix(item.title))" />
                    <img src="@/assets/icon/excel.png" v-else-if="item.type === 'doc' && excelType.includes(getSuffix(item.title))" />
                    <img src="@/assets/icon/ppt.png" v-else-if="item.type === 'doc' && pptType.includes(getSuffix(item.title))" />
                    <img src="@/assets/icon/pdf.png" v-else-if="item.type === 'doc' && getSuffix(item.title) === 'pdf'" />
                    <img src="@/assets/icon/video.png" v-else-if="item.type === 'video'" />
                    <img src="@/assets/icon/audio.png" v-else-if="item.type === 'audio'" />
                    <img src="@/assets/icon/item.png" v-else-if="item.type === 'item'" />
                    <img src="@/assets/icon/folder.png" v-else-if="item.type === 'paper'" />
                    <img src="@/assets/icon/link.png" v-else-if="item.type === 'link'" />
                    <img src="@/assets/icon/zip.png" v-else-if="item.type === 'res'" />
                    <img src="@/assets/icon/image.png" v-else-if="item.type === 'thum'" />
                    <img src="@/assets/icon/unknow.png" v-else="item.type === 'other'" />
                    <span class="title-name" @click=details(item)>{{index+1}}、{{item.title}}</span>
                    <div class="resource-tools">
                        <!-- <div class="node-resource-tool" >
									<Icon type="md-eye" />
									<span>{{ $t('syllabus.preview') }}</span>
								</div> -->
                        <div class="resource-tool" @click="deleteResource(item,index)">
                            <i class="el-icon-delete-solid"></i>
                            <span>删除</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="none-data" v-else-if="datais ===false">
                暂无数据
            </div>
        </div>
    </div>
    <!--资源预览-->
    <div class="previewState">
        <el-dialog v-model="previewStates" width="60%" center :before-close="closebtn">
            <p class="resource-title">{{detailsInfo.title}}</p>
            <!-- <img :src="detailsInfo.url" v-if="detailsInfo.type==='image'"> -->
            <el-image class="imagepreview" :src="detailsInfo.url" :preview-src-list="srcList" :initial-index="1" v-if="detailsInfo.type==='image'">
            </el-image>
            <video v-else-if="detailsInfo.type == 'video'" id="previewVideo" ref="videobox" :src="detailsInfo.url" width="870" controls="controls" autoplay style="max-height: 800px;">
                {{detailsInfo.title}}
            </video>
            <audio v-else-if="detailsInfo.type == 'audio'" controls>
                <source :src="detailsInfo.url">
                {{detailsInfo.title}}
            </audio>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closebtn">关闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <!--资源图片预览-->
    <!-- <div class="demo-image__preview">
        <el-image style="width: 100px; height: 100px" :src="detailsInfo.url" :preview-src-list="srcList" :initial-index="1" v-if="detailsInfo.type==='image'">
        </el-image>
    </div> -->
    <!-- <div class="demo-image__preview">
        <el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList" :initial-index="1">
        </el-image>
    </div> -->
    <!--资源图片预览end-->
    <!--资源预览end-->
    <!--上传资源-->
    <div class="uploadFile">
        <el-dialog v-model="uploadFiles" title="新增资源" width="30%">
            <el-upload ref="uploadRef" class="upload-demo" drag action="" :auto-upload="false" :on-change="uploadResource" :file-list="nomarl">
                <svg class="resource-upload" aria-hidden="true">
                    <use xlink:href="#icon-yunduanshangchuan"></use>
                </svg>
                <div class="el-upload__text">
                    拖动文件至区域或<em>点击选择文件也可以上传</em>
                </div>
            </el-upload>
            <div class="upload-submitbtn">
                <el-button type="primary" @click="confirmUpload(),uploadBtn=true" :loading="uploadBtn">确认上传</el-button>
            </div>
        </el-dialog>
    </div>
    <!--上传资源end-->
</template>
<script>
import { ref, reactive, onMounted, getCurrentInstance, watch, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
import BlobTool from '@/until/blobTool.js'
export default {
    props: {
        tree: {
            type: Array,
            default: null,
        },
        defaultinfo: {
            type: String,
            default: null,
        },
        stand: {
            default: null,
        },
        abilityId: {
            type: String,
            default: null,
        },
        datas: {
            type: Array,
            default: null,
        },
        areaId: {
            default: null,
        },
    },
    setup(props, context) {
        let curNode = ref(null)
        const store = useStore()
        let { proxy } = getCurrentInstance()
        let defaultProps = {
            children: 'children',
            title: 'title',
            id: 'id',
        }
        let pitchNow = ref('')
        let treeRef = ref()
        const docType = ['doc', 'docx']
        const excelType = ['xls', 'csv', 'xlsx']
        const pptType = ['ppt', 'pptx']
        console.log(props, '控件接收的值')
        let resourceData = reactive([])
        let previewStates = ref(false)
        let detailsInfo = ref({
            id: '',
            title: '',
            url: '',
            type: '',
        })
        let nowPitchCb = ref()
        let datais = ref(false)
        let uploadFiles = ref(false)
        let fileList = ref({
            id: '',
            title: '',
        })
        let uploadFileData = ref({})
        let uploadBtn = ref(false)
        let uploadList = ref([])
        let changeShow = ref(false)
        let BlobContent = ref({})
        //watch判断用，上传后不重新赋值
        let watchModel = ref(true)
        let uploadRef = ref()
        let nomarl = ref([])
        let videobox = ref()
        let srcList = ref([])
        onMounted(() => {
            resourceData = resourceData.push(...props.tree)
            console.log(props.tree, '树状')
        })
        //添加子节点
        function append(data) {
            console.log(data, '传进方法的内容')
            console.log(props, '获取到的')
            let datas = data
            let user = JSON.parse(localStorage.getItem('userData'))
            ElMessageBox.prompt('输入新节点名称', '新增节点', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
            })
                .then(({ value }) => {
                    onSaveData('', 'add', data, value)
                })
                .catch(() => {})
        }
        //删除子节点defaultinfo
        function remove(node, data) {
            console.log(props, '获取现在的树状')
            console.log(nowPitchCb.value, '当前的数据')
            let user = JSON.parse(localStorage.getItem('userData'))
            console.log(props.stand, '删除查看当前的')
            console.log(node, data)
            ElMessageBox.confirm('确定要删除节点吗？', '温馨提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                let receiveData = data
                const result = props.tree.every((item) => {
                    return item.pid === receiveData.pid
                })
                console.log(result, '得到的结果')
                if (result) {
                    deleteChapter(props.stand, receiveData.id, node)
                } else {
                    let dataEvalue = nowPitchCb.value
                    onSaveData(dataEvalue, 'delete')
                    const parent = node.parent
                    const children = parent.data.children || parent.data
                    const index = children.findIndex((d) => d.id === data.id)
                    children.splice(index, 1)
                }
            })
        }
        function handleNodeClick(data) {
            console.log(data, '当前点击的元素')
            curNode.value = data.rnodes
            console.log(curNode.value, '资源数据')
            fileList.value.id = data.id
            fileList.value.title = data.title
            nowPitchCb.value = data
            data.rnodes.length ? (datais.value = true) : (datais.value = false)
            // console.log(curNode.value.title)
        }
        //渲染tree
        function renderContent(h, { node, data }) {
            return h(
                'span',
                {
                    class: 'custom-tree-node',
                    title: data.title,
                },
                h('span', null, data.title),
                h(
                    'i',
                    data.rnodes && data.rnodes.length ? { class: 'tree-icon' } : { class: 'tree-none' },
                    <svg class="treeResource" aria-hidden="true">
                        <use xlink:href="#icon-ziyuan"></use>
                    </svg>
                ),
                h(
                    'span',
                    {
                        class: 'tree-node-tools',
                    },
                    h(
                        'a',
                        {
                            onClick: (e) => {
                                e.stopPropagation()
                                append(data)
                            },
                        },
                        <i class="el-icon-plus"></i>
                    ),
                    h(
                        'a',
                        {
                            onClick: () => remove(node, data),
                        },
                        <i class="el-icon-minus"></i>
                    )
                )
            )
        }
        function getSuffix(name) {
            return name.substr(name.lastIndexOf('.') + 1)
        }
        //查看资源详情
        function details(val) {
            // detailsInfo = val
            console.log(val, '查看详情传进来的值')
            console.log(detailsInfo, '赋值过后')
            detailsInfo.value = {}
            let bolbs = JSON.parse(localStorage.getItem('blobInfo'))
            let host = getBlobHost(bolbs.osblob_uri)
            let space = bolbs.osblob_uri.slice(bolbs.osblob_uri.indexOf('cn') + 3)
            let urls = host + '/' + space + val.link + '?' + bolbs.osblob_sas
            if (getSuffix(val.title.toLowerCase()) == 'pdf') {
                window.open('https://www.teammodel.cn/web/viewer.html?file=' + encodeURIComponent(urls))
            } else if (val.type === 'doc') {
                window.open('https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(urls))
            } else if (val.type === 'image') {
                detailsInfo.value.title = val.title
                detailsInfo.value.type = val.type
                detailsInfo.value.id = val.id
                detailsInfo.value.url = urls
                detailsInfo.value.url ? (previewStates.value = true) : ''
                srcList.value.push(urls)
            } else {
                detailsInfo.value.title = val.title
                detailsInfo.value.type = val.type
                detailsInfo.value.id = val.id
                detailsInfo.value.url = urls
                detailsInfo.value.url ? (previewStates.value = true) : ''
            }
        }
        //打开上传组件 顺便处理uploadLIst
        function openUpload() {
            nomarl.value = []
            uploadFiles.value = true
        }
        //上传资源
        function uploadResource(val) {
            console.log(val, '触发了')
            uploadFileData.value = val.raw
            // fileList.value.push({ name: val.raw.name, size: val.raw.size, type: val.raw.type })
            // fileList.value.push(val)
            // return true
        }
        //确认上传
        function confirmUpload() {
            watchModel.value = false
            let urlHost = JSON.parse(localStorage.getItem('blobInfo'))
            let urlheader = urlHost.osblob_uri.substring(0, urlHost.osblob_uri.indexOf('cn') + 2)
            let space = urlHost.osblob_uri.slice(urlHost.osblob_uri.indexOf('cn') + 3)
            let standard = props.stand
            let nowid = fileList.value.id
            console.log(nowid)
            let url = urlHost.osblob_uri + '/yxpt/' + standard + '/jyzx/' + nowid + '/' + uploadFileData.value.name + '?/' + urlHost.osblob_sas
            console.log(url, '上传地址')
            let Blobs = new BlobTool(urlheader, space, '?' + urlHost.osblob_sas, 'school')
            BlobContent.value = Blobs
            let path = 'yxpt/' + standard + '/jyzx/' + nowid
            Blobs.upload(uploadFileData.value, path, {}, false, props.areaId).then((res) => {
                console.log(res, '上传成功的返回')
                res.url ? ElMessage.success('上传成功') : ElMessage.error('上传失败')
                uploadList.value.push(res)
                let datas = curNode.value
                datas.push({ title: res.name, link: res.blob, size: res.size, type: res.type, id: proxy.$access.guid(), cntr: 'teammodelos' })
                curNode.value = datas
                uploadBtn.value = false
                uploadFiles.value = false
                console.log(props, '后面的数据')
            })
        }
        //存储变更
        async function changes() {
            let data = nowPitchCb.value
            await onSaveData(data, 'save')
            setTimeout((watchModel.value = true), '2000')
        }
        //删除资源
        function deleteResource(val, index) {
            watchModel.value = false
            console.log(watchModel.value, '删除操作的值')
            let urlHost = JSON.parse(localStorage.getItem('blobInfo'))
            let urlheader = urlHost.osblob_uri.substring(0, urlHost.osblob_uri.indexOf('cn') + 2)
            let space = urlHost.osblob_uri.slice(urlHost.osblob_uri.indexOf('cn') + 3)
            console.log(val, index, uploadList, '删除的信息')
            ElMessageBox.confirm('确定要移除该资源吗?', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    console.log(BlobContent.value, 'BLOB的信息')
                    let user = JSON.parse(localStorage.getItem('userData'))
                    let blobs = {}
                    BlobContent.value.containerClient ? (blobs = BlobContent.value) : ((blobs = new BlobTool(urlheader, space, '?' + urlHost.osblob_sas, 'school')), (BlobContent.value = blobs))
                    blobs.deleteBlob(val.link).then((res) => {
                        console.log(res, '删除的返回')
                        if (res === 200) {
                            curNode.value.splice(index, 1)
                            let data = nowPitchCb.value
                            onSaveData(data, 'deleteResource')
                        } else {
                            ElMessage.warning('删除失败')
                        }
                    })
                })
                .catch(() => {})
        }
        //添加当前父节点（tree一级@章节）
        function addFirstnode() {
            let user = JSON.parse(localStorage.getItem('userData'))
            ElMessageBox.prompt('输入新的章节节点名称', '新增节点', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                watchModel.value = false
                let ids = proxy.$access.guid()
                console.log(props, '这是添加第一级用到的父ID')
                let datsiof = []
                let newChild = { title: value, children: [], rnodes: [], id: ids, cids: [], creatorId: user.tmdId, creatorName: user.tmdName, pid: props.abilityId, order: 0 }
                datsiof.push(newChild)
                props.tree.push(newChild)
                console.log(props.tree, '查看现在的树')
                let dataInfo = { abilityId: props.abilityId, auth: [], codeval: props.stand, scope: 'standard', id: newChild.id, trees: datsiof }
                let datas = { tmdId: user.tmdId, tmdName: user.tmdName, standard: props.stand, abilityTask: [dataInfo] }
                proxy.$api.addChild(datas).then((res) => {
                    console.log(res, '这是创建第一级的父节点的API返回')
                    res.state === 200 ? (ElMessage.success('节点创建成功'), treeRef.value.setCurrentKey(res.recordAbilityTask.abilityTask[0].id)) : ElMessage.error('节点创建失败')
                })
                console.log(datas, '参数')
            })
            setTimeout((watchModel.value = true), '2000')
        }
        //删除父节点（tree一级@章节）
        function deleteChapter(standard, chapterId, node) {
            let user = JSON.parse(localStorage.getItem('userData'))
            let data = { standard: standard, id: chapterId, tmdId: user.tmdId, tmdName: user.tmdName }
            proxy.$api.removeChildnodes(data).then((res) => {
                console.log(res, '删除父节点的返回')
                if (res.state === 200) {
                    ElMessage.success('节点删除成功')
                    const parent = node.parent
                    const children = parent.data.children || parent.data
                    const index = children.findIndex((d) => d.id === data.id)
                    children.splice(index, 1)
                } else {
                    ElMessage.error('节点删除失败')
                }
            })
        }
        //处理HOST返回截取
        function getBlobHost(url) {
            let s = url || store.state.user.userProfile.blob_uri || store.state.user.studentProfile.blob_uri
            let pattern = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/
            return s.split('//')[0] + '//' + s.match(pattern)[0]
        }
        //最后的保存数据操作
        function onSaveData(value, operate, dataWork, titleName) {
            let dataEvalue = value
            let data = dataWork
            let user = JSON.parse(localStorage.getItem('userData'))
            if (operate === 'add') {
                let ids = proxy.$access.guid()
                let newChild = { title: titleName, children: [], rnodes: [], id: ids, cids: [], creatorId: user.tmdId, creatorName: user.tmdName, pid: data.id, order: 0 }
                console.log(newChild)
                if (!data.children) {
                    data.children = []
                }
                data.cids.push(newChild.id)
                data.children.push(newChild)
                dataEvalue = data
            }
            let chidData = []
            //寻找最上级
            for (let i in props.tree) {
                let dataOne = props.tree[i]
                if (dataEvalue.id === dataOne.id) {
                    chidData.push(dataOne)
                } else if (dataEvalue.id !== dataOne.id && dataOne.children.length !== 0) {
                    for (let y in dataOne.children) {
                        if (dataEvalue.id === dataOne.children[y].id) {
                            chidData.push(dataOne)
                        } else if (dataEvalue.id !== dataOne.children[y].id && dataOne.children[y].children.length !== 0) {
                            for (let u in dataOne.children[y].children) {
                                dataEvalue.id === dataOne.children[y].children[u].id ? chidData.push(dataOne) : ''
                            }
                        }
                    }
                }
            }
            //准备API参数
            let codeVals = ''
            let abilityIds = ''
            let scopes = ''
            let idInfo = ''
            for (let x in props.datas) {
                if (chidData[0].id === props.datas[x].id) {
                    codeVals = props.datas[x].codeval
                    abilityIds = props.datas[x].abilityId
                    scopes = props.datas[x].scope
                    idInfo = props.datas[x].id
                }
            }
            let msgInfo = ''
            let dataInfo = { abilityId: abilityIds, auth: [], codeval: codeVals, scope: scopes, id: idInfo, trees: chidData }
            let datas = { tmdId: user.tmdId, tmdName: user.tmdName, standard: props.stand, abilityTask: [dataInfo] }
            proxy.$api.addChild(datas).then((res) => {
                // operate === 'delete' ? (msgInfo = '节点删除') : ''
                // operate === 'add' ? (msgInfo = '节点创建') : ''
                // res.state === 200 ? ElMessage.success(`{{msgInfo}}成功`) : ElMessage.error(`{{msgInfo}}失败`)
                if (operate === 'add') {
                    res.state === 200 ? ElMessage.success('节点创建成功') : ElMessage.error('节点创建失败')
                } else if (operate === 'delete') {
                    res.state === 200 ? ElMessage.success('节点删除成功') : ElMessage.error('节点删除失败')
                } else if (operate === 'save') {
                    res.state === 200 ? (ElMessage.success('储存变更成功'), (uploadList.value = [])) : ElMessage.error('储存变更失败')
                    uploadFileData.value = []
                } else if (operate === 'deleteResource') {
                    console.log(watchModel.value, '删除资源当前的值')
                    res.state === 200
                        ? (ElMessage.success('资源删除成功'),
                          uploadList.value.forEach((item, index) => {
                              item.blob === val.link ? uploadList.value.splice(index, 1) : ''
                          }),
                          setTimeout((watchModel.value = true), '2000'))
                        : (ElMessage.error('资源删除失败'), setTimeout((watchModel.value = true), '2000'))
                }
            })
        }
        //查看资源 关闭视频
        function closebtn() {
            previewStates.value = false
            console.log(videobox, '视频')
            videobox.value ? videobox.value.pause() : ''
        }
        watch(
            props,
            (nweProps) => {
                nextTick(() => {
                    console.log(nweProps.defaultinfo, '值')
                    if (watchModel.value) {
                        treeRef.value.setCurrentKey(nweProps.defaultinfo)
                        fileList.value.id = nweProps.defaultinfo
                        // curNode.value = nweProps.tree[0].rnodes
                        console.log(nweProps)
                        nweProps.tree.length !== 0 && nweProps.tree[0].rnodes ? (curNode.value = nweProps.tree[0].rnodes) : (curNode.value = [])
                    }
                })
            },
            { immediate: true, deep: true }
        )
        return {
            curNode,
            defaultProps,
            append,
            remove,
            renderContent,
            handleNodeClick,
            getSuffix,
            docType,
            excelType,
            pptType,
            previewStates,
            details,
            detailsInfo,
            getBlobHost,
            datais,
            resourceData,
            pitchNow,
            treeRef,
            uploadFiles,
            uploadResource,
            fileList,
            confirmUpload,
            addFirstnode,
            uploadFileData,
            uploadBtn,
            uploadList,
            nowPitchCb,
            changes,
            deleteResource,
            deleteChapter,
            watchModel,
            openUpload,
            nomarl,
            uploadRef,
            onSaveData,
            closebtn,
            videobox,
            srcList,
        }
    },
}
</script>

<style>
.ability-tree-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.left-box {
    width: 600px;
    border-right: 1px dashed rgb(180, 178, 178);
    padding-right: 20px;
    height: 85vh;
    margin-top: 35px;
    overflow: hidden;
}
.left-box:hover {
    overflow-y: auto;
}
.left-box .el-tree {
    width: 600px;
}
.right-box {
    width: 54%;
    height: 85vh;
    margin-top: 35px;
}
.el-tree-node__content {
    height: 40px;
    position: relative;
}
.custom-tree-node {
    width: 80%;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-node-tools {
    position: absolute;
    right: 0;
    color: rgb(77, 130, 245);
}

.tree-node-tools a {
    font-size: 12px;
    margin-right: 10px;
}
/*章节样式*/
.chapter {
    /* width: 600px !important; */
    position: sticky !important;
    top: 0px;
    z-index: 999;
}
.chapter,
.resource {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 15px;
    font-size: 14px;
    position: sticky;
    top: 0px;
    background-color: #e9eef3;
    z-index: 999;
}
.resource-title {
    width: 80%;
    display: inline-block;
}
.resourceadd-box {
    height: 40px;
    width: 80px;
    display: inline-block;
    padding-left: 15px;
    font-size: 18px;
    position: sticky;
    background-color: #e9eef3;
    z-index: 999;
    line-height: 55px;
    text-align: center;
    margin-left: 5%;
    border: 1px dashed #ccc;
    border-radius: 5px;
    padding: 5px;
}
.chapter::before,
.resource::before {
    content: '';
    display: inline-block;
    border: 4px solid #16c18e;
    border-radius: 50%;
    margin-right: 10px;
    margin-bottom: 2px;
}
/*资源内容*/
.resourcebox {
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    overflow: auto;
}
.resource-item {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(229, 229, 229);
    padding: 10px 20px;
}
.resource-item img {
    width: 25px;
    margin-right: 20px;
}
.resource-tools {
    position: absolute;
    right: 30px;
    align-items: center;
    display: none;
    font-size: 12px;
}
.resource-tool {
    display: flex;
    align-items: center;
    margin-right: 15px;
    cursor: pointer;
}
.resource-item:hover .resource-tools {
    display: block;
}
.resource-item:hover {
    background-color: #d6d6d6;
}
.title-name {
    max-width: 70%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
    color: #515a6e;
}
.left-box .tree-node-tools {
    display: none;
}
.left-box .el-tree-node__content:hover .tree-node-tools {
    display: inline-block;
}
.previewState .el-dialog__body {
    text-align: center;
}
.previewState .el-dialog__body .resource-title {
    font-size: 16px;
    font-weight: 700;
}
.previewState .el-dialog--center {
    background-color: #e9eef3;
}
.previewState .el-dialog__body img {
    max-width: 1100px;
    max-height: 600px;
}
.none-data {
    width: 100%;
    height: 85vh;
    font-size: 28px;
    font-weight: 800;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    color: #ccc;
}
.tree-none {
    opacity: 0;
}
.tree-icon {
    opacity: 1;
}
.treeResource {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.5em;
    fill: currentColor;
    overflow: hidden;
    margin-bottom: 1px;
    margin-left: 1%;
}
.resource-upload {
    width: 8em;
    height: 8em;
    vertical-align: -0.5em;
    fill: currentColor;
    overflow: hidden;
    margin-bottom: 1px;
    margin-left: 1%;
    margin-top: 8%;
}
.upload-demo {
    text-align: center;
}
.upload-submitbtn {
    width: 85%;
    margin: 0 auto;
    padding: 3%;
    margin-top: 5%;
}
.upload-submitbtn .el-button {
    width: 100%;
}
.addicon {
    width: 0.8em;
    height: 0.8em;
    /* vertical-align: -0.5em; */
    fill: currentColor;
    overflow: hidden;
    margin-bottom: 1px;
    margin-left: 1%;
    /* margin-top: 8%; */
}
.addzy:hover {
    cursor: pointer;
}
.changebtn {
    width: 100px;
    height: 40px;
    line-height: 40px;
}
.changebtn button {
    width: 100%;
    height: 40px;
}
.imagepreview {
    margin: 0 auto;
    max-width: 1100px;
    max-height: 600px;
}
#previewVideo {
    width: 100%;
}
</style>