videoEquipment.vue

<template>
	<div class="innnerBox">
		<el-row :gutter="12">
		<el-col :span="4" class="treeBox minHeight">
			<el-input class="search-input" prefix-icon="el-icon-search" placeholder="请输入内容" v-model="searchText">
			</el-input>
			<cameraTree :filterText="searchText" :treeDatas="cameraTree" @clickHandle="getTable"></cameraTree>
			<videoTree  :filterText="searchText" :treeDatas="videoTree" :devsId="dev_unid" @clickHandle="getTable"></videoTree>
		</el-col>
		<el-col :span="20" >
			<el-table :data="formattterData" stripe border v-if="tableType=='camera'" :height="tableHeight">
				<el-table-column prop="label" align="center" label="名称">
				</el-table-column>
				<el-table-column prop="url" align="center" label="取流地址">
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<el-tooltip content="修改" placement="bottom" effect="light" :visible-arrow=false>
							<span class="icon-fanxing-xiugai editIcon" @click="editFun(scope.$index, scope.row)"></span>
						</el-tooltip>
						<span class="tableSpanBorder"></span>
						<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow=false>
							<span class="el-icon-delete delIcon" @click="delFun(scope.$index, scope.row)"></span>
						</el-tooltip>
						<span class="tableSpanBorder"></span>
						<el-tooltip content="详情" placement="bottom" effect="light" :visible-arrow=false >
							<span class="el-icon-info editIcon" @click="detailFun(scope.$index, scope.row)"></span>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<el-table :data="formattterData" stripe border v-else-if="tableType=='video'"  :height="tableHeight">
				<el-table-column prop="vchan_name" align="center" label="名称">
				</el-table-column>
				<el-table-column prop="video_url" align="center" label="取流地址">
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<el-tooltip content="修改" placement="bottom" effect="light" :visible-arrow=false>
							<span class="icon-fanxing-xiugai editIcon" @click="editVideo(scope.$index, scope.row)"></span>
						</el-tooltip>
						<span class="tableSpanBorder"></span>
						<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow=false>
							<span class="el-icon-delete delIcon" @click="delVideo(scope.$index, scope.row)"></span>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
		</el-col>
		<cameraDialog ref="editCamera"></cameraDialog>
		<el-dialog
			title="修改视频"
			:visible.sync="videoEditVisible"
			width="450px">
			<div>
				<el-form label-position="left" label-width="120px" :model="videoEditParam" ref="videoDialog" inline-message hide-required-asterisk>
				<el-form-item label="名称" :rules="[ { required: true, message: '请输入名称', trigger: 'change' }]">
					<el-input v-model="videoEditParam.vchan_name"></el-input>
				</el-form-item>
				<el-form-item label="取流地址">
					<el-input v-model="videoEditParam.video_url" disabled></el-input>
				</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="videoEditVisible=false">取 消</el-button>
				<el-button type="primary" @click="editSave">确 定</el-button>
			</span>
		</el-dialog>
		</el-row>
	</div>
</template>
<script>
	import cameraTree from './treeComponents/cameraTree'
	import videoTree from './treeComponents/videoTree'
	import cameraDialog from './treeComponents/cameraDialog'
	export default {
		data() {
			return {
				searchText: '',
				detailObj: {},
				detailImg: '',
				detailVisible: false,
				tableType:'camera',
				tableData: [],
				formattterData: [],
				selectcheck: [],
				currentIndex: 0,
				eventList: JSON.parse(window.localStorage.getItem('安防事件')),
				playurl: '',
				dev_unid: sessionStorage.getItem('dev_unid'),
				cameraArr:[],
				cameraTree:[],
				videoTree:[],
				videoEditParam:{
					vchan_name:'',
					video_url:''
				},
				videoEditVisible:false,
				vchan_duid:'',
				tableHeight:window.videoEquitTableHeight
			}
		},
		watch: {
		},
		components: {
			cameraTree,cameraDialog,videoTree
		},
		mounted() {
			console.log('aa',this.tableHeight)
			this.getCameraTree();
			this.getVideoTree();
		},
		methods: {
			getCameraTree(){
				this.tableType='camera'
				this.$api.resource.treeList({
					vchan_type: "camera"
				},this.dev_unid).then(res=>{
					this.cameraTree=res.vchan_struct;
					this.cameraArr=[];
					this.cameraBuildTree(res.vchan_struct)
				})
			},
			getVideoTree(){
				this.tableType='video'
				this.$api.resource.getVideoList({
					vchan_type: "vfile"
				},this.dev_unid).then(res=>{
					this.videoTree=res.list_data;
				})
			},
			submitLaterGet(data){
				this.tableType='camera'
				this.$api.resource.treeList({
					vchan_type: "camera"
				},this.dev_unid).then(res=>{
					this.cameraTree=res.vchan_struct;
					this.cameraArr=[];
					this.cameraBuildTree(res.vchan_struct);
					this.getTable(data)
				})
			},
			//处理树状图数据
			cameraBuildTree(data, orgObject, addrObject) { // 获取相机资源
			    let newData = [];
			    for (var i = 0; i < data.length; i++) {
			        let obj = {};
			        if(data[i].org_type === 'org' || data[i].org_type === 'address') {
			            obj['id'] = data[i].org_code;
			            obj['unid'] = data[i].unid;
			            obj['label'] = data[i].org_name === '' ? '未命名' : data[i].org_name;
			            obj['url'] = '暂无';
			            obj['root'] = '手动添加相机资源';
			            obj['pid'] = data[i].org_pid;
			            obj['type'] = data[i].org_type;
			            if(data[i].childs) {
			                if(data[i].org_type === 'org') {
			                    obj['children'] = this.cameraBuildTree(data[i].childs, data[i], addrObject);
			                } else {
			                    obj['children'] = this.cameraBuildTree(data[i].childs, orgObject, data[i]);
			                }
			            } else {
			                obj['children'] = [];
			            }
			        } else if(data[i].vchan_type === 'camera') {
			            obj['id'] = data[i].vchan_refid;
			            obj['label'] = data[i].vchan_name  === '' ? '未命名' : data[i].vchan_name;
			            obj['type'] = data[i].vchan_type;
			            obj['root'] = '手动添加相机资源';
			            obj['orgNode'] = orgObject;
			            obj['addrNode'] = addrObject;
			            obj['dir_code'] = data[i].dir_code;
			            obj['dir_name'] = data[i].dir_name;
			            obj['ip'] = data[i].ip;
			            obj['port'] = data[i].port;
			            obj['video_proto'] = data[i].video_proto;
			            obj['url'] = data[i].video_url; // 取流地址
			            obj['username'] = data[i].username;
			            obj['password'] = data[i].password;
			            obj['extend_1'] = data[i].extend_1;
			            obj['extend_2'] = data[i].extend_2;
			            this.cameraArr.push(obj)
			        }
			        newData.push(obj);
			    }
			    return newData;
			},
			editFun(index,row){
				this.$refs.editCamera.initDialog(row,'edit',this.dev_unid)
			},
			delFun(index,row){
				this.$confirm('此操作将永久删除该选项, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					this.$api.resource.delCamera({},this.dev_unid,row.id).then(res=>{
						if(res.ecode==200){
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							let data={
								org_type:"address",
								unid:row.addrNode.unid
							}
							this.submitLaterGet(data);
						}
					})
				 
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
			},
			detailFun(index,row){
				this.$refs.editCamera.initDialog(row,'detail',this.dev_unid)
			},
			getTable(data,type) {
				if(data.org_type!="root"){
					this.tableType=type;
					if(this.tableType=="camera"){
						if(data.org_type){
							this.tableType=type;
							this.formattterData = [];
							let filterData=[];
							let search_params = {
								vchan_type: "camera",
								org_unid:data.unid
							}
							this.$api.resource.getCameraTable(search_params,this.dev_unid).then((res) => {
								if(res.list_data.length > 0) {
									for(var i = 0; i < res.list_data.length; i++) {
										filterData = this.cameraArr.filter(list => {
											return list.id === res.list_data[i].vchan_refid;
										})
										if(filterData.length > 0) {
											this.formattterData.push(filterData[0]);
										}
									}
								}
							}).catch((err) => {
							
							})
						}else{
							this.formattterData = [];
							let filterData=[];
							this.$api.resource.getCameraTable({},this.dev_unid,data.vchan_refid).then((res) => {
										filterData = this.cameraArr.filter(list => {
											return list.id === res.refid;
										})
										if(filterData.length > 0) {
											this.formattterData.push(filterData[0]);
										}
							}).catch((err) => {
							
							})
						}
					}else if(this.tableType=="video"){
						if(data.org_type=='video'){
							this.formattterData=data.childs;
						}else{
							this.formattterData=[];
							this.formattterData.push(data)
						}
					}
					
				}
				
			},
			getVideoTable(data,type){
				this.tableType=type;
				this.formattterData=[];
				if(data.childs){
					this.formattterData=data.childs;
				}else{
					this.formattterData.push(data)
				}
			},
			editVideo(index,row){
				this.vchan_duid=row.vchan_duid;
				this.videoEditParam.vchan_name = row.vchan_name;
				this.videoEditParam.video_url = row.video_url;
				this.videoEditVisible=true;
			},
			editSave(){
				this.$api.resource.editVideo({
					name:this.videoEditParam.vchan_name 
				},this.dev_unid,this.vchan_duid).then(res=>{
					if(res.ecode==200){
						this.$message({
							type: 'success',
							message: res.enote
						});
						
						this.getVideoTree();
						this.formattterData.forEach(item=>{
							if(item.vchan_duid==this.vchan_duid){
								item.vchan_name=this.videoEditParam.vchan_name
							}
						})
					}else{
						this.$message.error(res.enote);
					}
					this.videoEditVisible=false;
				})
			},
			delVideo(){
				
			}
		},
	}
</script>
<style lang="scss" scoped>
	.treeBox{
		border: 1px solid #EBEEF5;
    padding: 12px;
	}
</style>