controlslist 属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件
代码：
<template><div class="schematicDiagramIndex"><el-container><el-header v-if="this.radiooCar==1"><el-button @click="addOpen">新增</el-button><el-button @click="updateOpen">编辑</el-button><el-button @click="delOpen">删除</el-button></el-header><el-container><!-- 左侧树 --><el-aside width="20rem;height: 100%;"><div style="height: 100%;overflow-y: scroll"><el-inputplaceholder="输入关键字进行过滤"v-model="filterText"></el-input><el-tree:accordion="true"class="filter-tree":data="CompanyLeftData":props="defaultProps":expand-on-click-node="false":default-expanded-keys="[1]"highlight-currentnode-key="value":default-expand-all="true"@node-click="handleNodeClick":filter-node-method="filterNode"ref="treeList":height="heights"></el-tree></div></el-aside><el-main v-loading="showVideo"><!-- 视频 --><div class="video1"><!-- controlslist 属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件loop属性用于设置或返回视频结束时是否应该重新开始播放。--><videoid="video1"controls="controls"loop="loop"ref="video":height="heights"controlslist="nodownload "><source:src="videoURL"type="video/mp4"/>您的浏览器不支持 HTML5 video 标签。</video></div></el-main></el-container></el-container><!-- 车的弹框--><el-dialog:title="title"v-model="dialogVisible"width="30%":before-close="handleClose"><!-- 表单--><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="上级节点" prop="ParentId"><!-- <el-input v-model="ruleForm.ParentId" placeholder="请输入内容"></el-input>--><el-select v-model="ruleForm.ParentId" placeholder="请选择"><el-optionv-for="item in ParentIdOptions":key="item.ID":label="item.Text":value="item.ID"></el-option></el-select></el-form-item><el-form-item label="视频名称" prop="VideoName"><el-input v-model="ruleForm.VideoName" placeholder="请输入内容"></el-input></el-form-item><el-form-item label="序号" prop="SortID"><el-input min="0" v-model="ruleForm.SortID" placeholder="请输入内容" type="number"@input="changeInput(ruleForm.SortID)"></el-input></el-form-item><el-form-item label="上传视频" prop="pass"><el-uploadref="videoUpload"class="upload-demo"action="#"multiple:limit="1":on-change="handleChange":before-upload="beforeUpload":on-success="onSuccess":on-error="onError"accept="video/*":auto-upload="false":on-exceed="handleExceedVisio":file-list="fileList"><el-button size="small" type="primary">点击上传</el-button></el-upload></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></el-dialog></div> </template> <script> export default {name: "schematicDiagramIndex",data() {return {//树形结构defaultProps: {children: "Children",label: "Text",id: "ID",},//左侧树形数据CompanyLeftData: [],//油泵车oldoil: {// value: "1",label: "油泵车",children: [{value: "1-1",label: "操作部分",type: "YBC",children: [{value: "1",label: "双系统独立自循环",type: "YBC",},{value: "4",label: "双系统合流自循环",type: "YBC",},{value: "5",label: "液压系统排气",type: "YBC",},{value: "8",label: "油液固体颗粒污染自检和取样检测",type: "YBC",},{value: "9",label: "双系统独立输出",type: "YBC",},{value: "10",label: "双系统合流输出",type: "YBC",},{value: "11",label: "加油软管内液压油自循环净化",type: "YBC",},{value: "12",label: "为飞机补充加注液压油",type: "YBC",},{value: "13",label: "液压油箱自加油",type: "YBC",},{value: "14",label: "液压系统除水除气",type: "YBC",},{value: "15",label: "操作界面",type: "YBC",},],},{value: "1-2",label: "产品组成",type: "YBC",children: [{value: "2",label: "箱体组成",type: "YBC",},{value: "3",label: "电气系统组成",type: "YBC",},{value: "6",label: "液压系统组成",type: "YBC",},{value: "7",label: "动力系统组成",type: "YBC",},],},{value: "1-3",label: "原理构图",type: "YBC",children: [{value: "17",label: "清洗飞机液压系统油液原理",type: "YBC",},{value: "18",label: "双系统独立输出对接保障原理",type: "YBC",},{value: "19",label: "双系统合流并联输出对接保障原理",type: "YBC",},{value: "20",label: "为飞机补充加注液压油原理",type: "YBC",},{value: "21",label: "液压系统油箱自加油原理",type: "YBC",},{value: "22",label: "液压系统自循环原理",type: "YBC",},],},{value: "1-4",label: "功能用途",type: "YBC",children: [{value: "16",label: "功能用途",type: "YBC",},],},],},//电源车PowerTruck: {},filterText: "",//树形数据过滤字段//视频地址videoURL: "",heights: "", //高度radiooCar: null, //车辆选择的类型dialogVisible: false,//dialog弹出框控制显隐dialogTitle: "",//dialog的标题提示rules: {VideoName: [{required: true, message: '请输入活动名称', trigger: 'blur'},],},//校验ruleForm: {},//表单数据fileList: [],//上传视频的数组submitVideo: null,//父级下拉数据ParentIdOptions: [],//选中左侧树数据checkedLeftTreeData: null,//video loadingshowVideo:true,};},created() {this.init();},mounted() {this.$nextTick(() => {this.$refs.treeList.$el.getBoundingClientRect().top; //表格距离浏览器的高度// 根据浏览器高度设置初始高度this.heights =window.innerHeight - this.$refs.treeList.$el.offsetTop - 150;// 监听浏览器高度变化，修改表格高度window.onresize = () => {this.heights =window.innerHeight - this.$refs.treeList.$el.offsetTop - 150;};});},methods: {//初始数据init() {this.getCarData();},// 获取本地存储的车辆选择类型，判断是电源车还是油泵车getCarData() {this.radiooCar = sessionStorage.getItem("radioCar");this.getTreeData()},// 获取左侧树结构getTreeData() {//获取本地存储的选择的车型 调接口let params = {EquipmentType: this.radiooCar}this.$WAPI.Ts_VideoGetTreeList(params).then((res) => {//赋值this.CompanyLeftData = res.data.data//父级IDthis.ParentIdOptions = res.data.data//默认选中展示this.setCurrentKeyData();})},//进行切换数据（点击事件）handleNodeClick(data, checked) {this.$refs.video.load();if (checked) {//进行勾选的数据this.$refs.treeList.setCheckedNodes([data]);//勾选的数据进行赋值保存this.checkedLeftTreeData = data//获取视频url 传递后端参数let param={ ID:data.ID }this.$WAPI.Ts_VideoGetVideoUrl(param).then((res) => {this.showVideo=false//赋值视频路径this.$refs.video.src = res.data.data ? res.data.data.URL : ""})}},//进行模糊查询filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;},// 默认选中setCurrentKeyData() {this.$nextTick(() => {this.$refs.treeList &&this.$refs.treeList.setCurrentKey(this.CompanyLeftData[0].Children[0]);this.handleNodeClick(this.CompanyLeftData[0].Children[0],true);});},//#region 电源车 有新增、编辑、删除等功能//新增打开dialog事件addOpen() {this.dialogVisible = truethis.title = "新增"this.ruleForm = {}this.fileList = []},//编辑updateOpen() {this.dialogVisible = truethis.title = "编辑"this.ruleForm = this.checkedLeftTreeData.Modelconst fileList = []if (this.ruleForm.FileName !== null||this.ruleForm.FileUrl !== null){fileList.push({name: this.ruleForm.VideoName,url: this.ruleForm.FileUrl,})}this.fileList=fileList},//删除delOpen() {//选中的参数let param = {IDs: this.checkedLeftTreeData.ID}this.$WAPI.Ts_VideoDelete(param).then(res => {this.$message({message: res.data.msg,type: "success",});this.$refs.video.src = ""this.init()})},//dialog关闭事件handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});},//提交数据submitForm() {// 要从这个接口传递文件 我知道啊this.dialogVisible = falseconst formData = new FormData();//上级节点不选择就是0this.ruleForm.ParentId = this.ruleForm.ParentId ? this.ruleForm.ParentId : 0//赋值this.ruleForm.ID !==undefined ? formData.append('ID', this.ruleForm.ID) :"" //IDformData.append('ParentId', this.ruleForm.ParentId) //父级节点formData.append('VideoName', this.ruleForm.VideoName) //视频名称formData.append('VideoType', this.radiooCar) //车辆类型formData.append('SortID', this.ruleForm.SortID) //序号formData.append('files', this.submitVideo) //序号this.$WAPI.Ts_VideoOperation(formData).then((res) => {this.$message({message: res.data.msg,type: "success",});this.showVideo=falsethis.init()})},//清空表单resetForm() {this.$refs.ruleForm.resetFields();//清空文件this.fileList=[]},//#endregion//#region 上传视频// 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。beforeUpload(file) {const isVideo = file.type === 'video/mp4';if (!isVideo) {this.$message.error('请上传视频文件');}return isVideo;},//文件上传成功时的钩子onSuccess(response, file, fileList) {this.$message.success('视频上传成功');// 处理上传成功后的逻辑，例如更新UI或者处理其他数据},//文件上传失败时的钩子onError(err, file, fileList) {console.log(err, file)this.$message.error('视频上传失败');// 处理上传失败后的逻辑},//改变handleChange(file, fileLists) {//文件流this.submitVideo = file.raw;//名称回显this.ruleForm.VideoName = this.submitVideo.name.split(".")[0]},//上传限制handleExceedVisio() {this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传！`)},//#endregion//正则表达changeInput(value) {this.ruleForm.SortID = value.replace(/^[0]+[0-9]{1,}|[^\d]/g, '');}},computed: {},watch: {filterText(val) {this.$refs.treeList.filter(val);},}, }; </script><style scoped> .schematicDiagramIndex {width: 100%; }.video1 {width: 100%;background: transparent; }::v-deep .el-tree-node__content {color: black;font-size: 14px;font-weight: 400;margin: 5px; }::v-deep .el-tree {background-color: transparent;--el-tree-node-hover-bg-color: #b5b7b7;margin-top: 20px;padding-top: 10px;padding-bottom: 10px;background-size: 100% 100%; }::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {background-color: #1a518c;color: #fcfbfb; }.filter-tree {padding-top: 1%;height: 48rem;overflow: scroll; } </style>
