YQ-August
/
yzCctvHelm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
							<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
   <meta name="viewport"
   	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>规则管理</title>
	<link rel="stylesheet" href="../css/index.css">
	<link rel="stylesheet" href="../css/style.css">
	<link rel="stylesheet" href="../css/comm.css">
	<link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
	<script src="../js/vue.min.js"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=3705e0f15b2b36d6902e9ebdf24a93d8&plugin=AMap.CircleEditor&plugin=AMap.MouseTool&plugin=AMap.PolyEditor"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
	<script src="../js/index.js"></script>
	<script src="../js/jquery.min.js"></script>
	<script type="text/javascript">
		document.write('<script src="../assets/init.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
	</script>
	<script>
		checkLogin();
	</script>
</head>
<style>
	.yz_aside{
		font-size: 15px;
		width: 180px;
	}
	.yz_aside ul{
		padding-left: 20px;
		font-size: 14px;
	}
	.yz_aside ul li{
		cursor: pointer;
		list-style: none;
		padding: 5px 0;
		color: #fff;
	}
	.yz_aside ul li.act{
		color: #25a1ff;
	}
	.el-form-item__label{
		color: #fff;
	}
	input[type=text]{
		padding:0 10px;
		height: 36px;
		color: #ececec;
		border-color: transparent;
		background-color: rgba(255, 255, 255, 0.2);
	}
	.el-input.is-disabled .el-input__inner{
		background-color: transparent;
	}
	.el-input-group__append, .el-input-group__prepend{
		color: #ececec;
		border: none;
		background-color: rgba(255, 255, 255, 0);
	}
	.el-tree{
		font-size: 14px;
		color: #fff;
		background-color: transparent;
	}
	.el-tree-node:focus>.el-tree-node__content,.el-tree-node__content:hover{
		background-color: rgba(255, 255, 255, 0.2);
	}
	.el-tree .el-tree-node__expand-icon.expanded {
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	.el-tree .el-icon-caret-right:before {
		content: '\e783';
		font-size: 18px;
		color: rgb(85, 170, 255);
	}
	.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
		content: '\e781';
		font-size: 18px;
		color: rgb(85, 170, 255);
	}
	.el-tree .el-tree-node__expand-icon.is-leaf::before {
		display: none;
	}
	.el-tree .iconfont{
		vertical-align: middle;
		color: rgb(85, 170, 255);
	}
</style>
<body>
	<div id="app" style="height: 100vh;">
		<div class="yz_aside">
			<div style="height: calc(100% - 36px);overflow: auto;">
				<div class="padding-sm">
					<div @click="ruleVis = !ruleVis" class="yz_cursor">
						<i :class="ruleVis?'el-icon-folder-remove':'el-icon-folder-add'"></i>
						<span>规则管理</span>
					</div>
					<ul v-if="ruleVis&&ruleLi.length">
						<li v-for="(item,index) in ruleLi" :key="index" @click="changTab(index)"
							class="padding-tb-xs" :class="tabBar == index?'act':''">
							{{item.rule_name}}
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="yz_main padding-sm" style="width: calc(100% - 180px);">
			<div class="margin-bottom">
				<el-button type="primary" size="mini" icon="el-icon-plus" @click="newAdd">新增</el-button>
				<el-button type="success" size="mini" icon="el-icon-edit" @click="editVis = false;">编辑</el-button>
				<el-button type="danger" size="mini" icon="el-icon-delete" @click="delRule">删除</el-button>
			</div>
			<el-row>
			  <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
				  <div class="grid-content">
					  <el-form ref="form" :rules="rules" :model="ruleForm" label-width="80px" style="max-width: 400px;">
					  	<el-form-item label="规则名称" prop="rule_name">
					  		<el-input :disabled="editVis" v-model="ruleForm.rule_name" placeholder="规则名称"></el-input>
					  	</el-form-item>
					  	<el-form-item label="规则内容" prop="text">
					  		<el-input :disabled="editVis" v-model="ruleForm.text" placeholder="规则内容"></el-input>
					  	</el-form-item>
					  	<el-form-item label="报警速度" prop="speed">
					  		<el-input :disabled="editVis" v-model="ruleForm.speed" placeholder="报警速度">
					  			<template slot="append">Km/h</template>
					  		</el-input>
					  	</el-form-item>
					  	<el-form-item label="报警间隔" prop="rule_interval">
					  		<el-input :disabled="editVis" v-model="ruleForm.rule_interval" placeholder="报警间隔">
					  			<template slot="append">秒</template>
					  		</el-input>
					  	</el-form-item>
					  	<el-form-item label="开启状态">
					  		<el-switch :disabled="editVis" v-model="ruleForm.statusn">
					  	</el-form-item>
					  	<el-form-item label="规则描述">
					  		<el-input :disabled="editVis" v-model="ruleForm.rule_describe" placeholder="规则描述"></el-input>
					  	</el-form-item>
						<el-form-item class="margin-top" v-if="!editVis">
							<el-button size="small" @click="editVis = true;">取消</el-button>
							<el-button size="small" type="primary" @click="saveRule">提交</el-button>
						</el-form-item>
					</el-form>
				  </div>
				</el-col>
			  <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
				  <div class="grid-content">
					  <div class="text-white text-lg">区域管理：</div>
					  <div class="padding-sm">
						  <el-tree style="width: calc(100% - 94px);" ref="treeRef"
						  	:data="treeLi" :props="defaultProps" @check="changCheck" 
							:default-expand-all="true" show-checkbox node-key="id" 
							:default-checked-keys="ruleForm.checkKey">
						  	<span class="custom-tree-node" slot-scope="{node,data}">
						  	    <span>
						  	       <i class="iconfont text-orange" :class="data.icon"></i>{{ data.group_name }}
						  	    </span>              
						  	</span>
						  </el-tree>
					  </div>
				  </div>
				</el-col>
			</el-row>
			
		</div>
	</div>
	<script type="text/javascript">
		document.write('<script src="../assets/ruleManage.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
	</script>
</body>
</html>