index.vue

<template>
  <div>
	  <div class="contentBox">
		<div class="leftCon">
			<div class="titles">视频设备</div>
			<div class="searchBox">
				<el-input
				  placeholder="输入关键字进行过滤"
				  v-model="filterText">
				</el-input>
			</div>
			<div class="treeBox">
				<el-tree
				  :data="data"
				  :props="defaultProps"
				  default-expand-all
				  :filter-node-method="filterNode"
				  ref="tree">
				</el-tree>
			</div>
		</div>
		<div class="middleCon">
			<div class="objectCon">
				<ocxplay ref="ocx"></ocxplay>
			</div>
			<div>
				<div style="float: left;" class="">
					<el-table
					height="284"
					  :data="sceneData"
					  stripe
					  border
					  style="width: 775px;margin-right: 12px;">
					  <el-table-column
						type="index"
						align="center"
						width="100">
					  </el-table-column>
					  <el-table-column
					  align="center"
						prop="num"
						label="预设位编号">
					  </el-table-column>
					  <el-table-column
						  align="center"
						prop="set"
						label="预设位配置">
						<template slot-scope="scope">
							<el-tooltip content="修改" placement="bottom" effect="light" :visible-arrow=false>
								<span class="iconfont icon-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="iconfont icon-detail delIcon"   @click="delFun(scope.$index, scope.row)"></span>
							</el-tooltip>
						</template>
					  </el-table-column>
					  <el-table-column
						  align="center"
						prop="type"
						width="400"
						label="参数设置">
						<template slot-scope="scope">
								<span class="tableBtn" @click="paramsSet(scope.$index, scope.row)">参数设置</span>
							<span class="tableSpanBorder"></span>
								<span class="tableBtn" @click="areaSet(scope.$index, scope.row)">区域设置</span>
							<span class="tableSpanBorder"></span>
								<span class="tableBtn" @click="markSet(scope.$index, scope.row)">标定设置</span>
							<span class="tableSpanBorder"></span>
								<span class="tableBtn" @click="timeSet(scope.$index, scope.row)">时间设置</span>
						</template>
					  </el-table-column>
					</el-table>
				</div>
				<div class="handleBox">
					<div class="handleTitle">基础操作</div>
					<div class="operaBox">
						<p>场景添加 <span class="iconfont icon-add-circle-s lefts"></span></p>
						<p>轮循播放 <el-switch class="lefts" :width="22" v-model="loopStart" active-color="#0069FF" inactive-color="#cccccc"></el-switch></p>
						<p>配置导入 <span class="iconfont icon-login lefts"></span></p>
						<p>配置导出 <span class="iconfont icon-daochu lefts"></span></p>
						<p>效果展示 <span class="iconfont icon-zhanshi lefts"></span></p>
					</div>
				</div>
			</div>
		</div>
		<div class="rightCon">
			<el-tabs v-model="activeName" @tab-click="handleClick" :stretch=true>
			    <el-tab-pane label="全部数据" name="first">
					<div class="tabCon">
						<div class="cardCon">
							<img src="../../assets/img/map/back.png" alt="">
							<div class="imginfo">
								<span>车牌号码：无牌</span>
								<span>车辆类型：小型轿车</span>
								<span>车身颜色：黑</span>
								<span>车辆品牌：丰田</span>
								<span>违法类型：正常</span>
							</div>
							<div style="clear: both;"></div>
						</div>
					</div>
				</el-tab-pane>
			    <el-tab-pane label="违法" name="second">违法</el-tab-pane>
			    <el-tab-pane label="事件" name="third">事件</el-tab-pane>
			  </el-tabs>
		</div>
		<div style="clear: both;"></div>
	</div>
	<paramset :visible.sync="paramshow"></paramset>
  </div>
</template>
<script>
	import ocxplay from '../../components/ocxplay.vue'
	import paramset from './paramSet.vue'
	export default {
		data(){
			return{
				paramshow:false,
				activeName:'first',
				loopStart:true,
				sceneData:[
					{
						num:1
					},
					{
						num:1
					},{
						num:1
					}
				],
				filterText: '',
				data: [{
				  id: 1,
				  label: '一级 1',
				  children: [{
					id: 4,
					label: '二级 1-1',
					children: [{
					  id: 9,
					  label: '三级 1-1-1'
					}, {
					  id: 10,
					  label: '三级 1-1-2'
					}]
				  }]
				}, {
				  id: 2,
				  label: '一级 2',
				  children: [{
					id: 5,
					label: '二级 2-1'
				  }, {
					id: 6,
					label: '二级 2-2'
				  }]
				}, {
				  id: 3,
				  label: '一级 3',
				  children: [{
					id: 7,
					label: '二级 3-1'
				  }, {
					id: 8,
					label: '二级 3-2'
				  }]
				}],
				defaultProps: {
				  children: 'children',
				  label: 'label'
				}
			}
		},
		 watch: {
		      filterText(val) {
		        this.$refs.tree.filter(val);
		      }
		    },
		components:{
			ocxplay,paramset
		},
		methods:{
			handleClick(tab, event) {
				console.log(tab, event);
			},
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			editFun(index,row){
				  
			},
			delFun(index,row){
				console.log(row)
			},
			paramsSet(index,row){
				this.paramshow=true;
				console.log(row)
			},
			areaSet(index,row){
				console.log(row)
			},
			markSet(index,row){
				console.log(row)
			},
			timeSet(index,row){
				console.log(row)
			}
		},
	}
</script>
<style lang="scss" scoped>
	.tabCon{
		padding: 8px;
		height: 770px;
	}
	.cardCon{
		background: #F1F1F1;
		padding: 7px;
	}
	.cardCon img{
		width: 237px;
		height: 133px;
		float: left;
	}
	.imginfo{
		float: left;
		margin-left: 10px;
	}
	.imginfo span{
		display: block;
		margin-bottom: 6px;
	}
	.imginfo span:first-of-type{
		margin-top: 7px;
	}
	.leftCon{
		width: 210px;
		background: #FFFFFF;
		float: left;
	}
	.middleCon{
		display: inline-block;
		margin-left: 12px;
		float: left;
	}
	.objectCon{
		width: 980px;
		height: 543px;
		margin-bottom: 12px;
		background: #FFFFFF;
	}
	.handleBox{
		float: left;
		width: 193px;
		border:1px solid #F0F3F9;
	}
	.handleTitle{
		height:40px;
		background:#ACC1FF;
		color: $white-font-color;
		font-size:14px;
		text-align: center;
		line-height: 40px;
	}
	.operaBox{
		padding: 1px 19px;
		background: #FFFFFF;
	}
	.operaBox .lefts{
		color: #CCCCCC;
		font-size: 16px;
		margin-left: 70px;
	}
	.operaBox .iconfont{
		margin-left: 72px;
		cursor: pointer;
	}
	.operaBox .iconfont:hover{
		color: #3BB7FF;
	}
	.operaBox p{
		margin:0;
		margin-bottom: 24px;
	}
	.operaBox p:first-of-type{
		margin-top: 24px;
	}
	.titles{
		height:30px;
		background:rgba(59,183,255,1);
		color: $white-font-color;
		font-size:14px;
		padding-left: 13px;
		line-height: 30px;
	}
	.searchBox{
		padding: 10px;
	}
	.treeBox{
		padding: 10px;
	}
	.editIcon{
		cursor: pointer;
		color:#0069ff;
		font-size:16px;
	}
	.delIcon{
		cursor: pointer;
		color:#f2365a;
		font-size:16px;
	}
	.rightCon{
		float: left;
		background: #FFFFFF;
		margin-left: 12px;
		width: 409px;
	}
</style>