YQ-August
/
yzCctvHelm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
							<!doctype html>
<html>
<head>
    <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{
		width: 180px;
	}
	.yz_aside ul{
		padding: 5px;
	}
	.yz_aside ul li{
		cursor: pointer;
		list-style: none;
		padding:0 0 0 10px;
		color: rgba(255,255,255,1);
	}
	.yz_aside .iconfont{
		color: rgb(85, 170, 255);
	}
	.yz_aside .el-button{
		padding: 0;
		border-radius: 0;
	}
	.yz_aside .el-button [class*=el-icon-]+span{
		font-size: 12px;
		margin: 0;
	}
	.yz_aside .el-button+.el-button{
		margin: 0;
	}
	.yz_dialog{
		position: absolute;
		left: 10px;
		top: 30%;
		width: 300px;
		columns: #000;
		background-color: #fff;
	}
	.el-dialog__header{
		background-color: #0081ff;
	}
	.el-dialog__title{
		color: #fff;
	}
	.el-dialog__body .el-input__inner,.yz_dialog .el-input__inner{
		border: none;
		background-color: #06162d;
	}
	.el-tree{
		font-size: 14px;
		color: #fff;
		background-color: #06162d;
	}
	.el-tree-node:focus>.el-tree-node__content,.el-tree-node__content:hover{
		background-color: rgba(255, 255, 255, 0.2);
	}
	.yz_aside .el-tree .el-tree-node__expand-icon.expanded {
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	.yz_aside .el-tree .el-icon-caret-right:before {
		content: '\e783';
		font-size: 18px;
		color: rgb(85, 170, 255);
	}
	.yz_aside .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
		content: '\e781';
		font-size: 18px;
		color: rgb(85, 170, 255);
	}
	.yz_aside .el-tree .el-tree-node__expand-icon.is-leaf::before {
		display: none;
	}
	.el-radio{
		color: #e8e8e8;
	}
	.brigCen{
		position: absolute;
		left: 10px;
		top: 10px;
		display: flex;
	}
	.brigCen>div{
		margin-right: 10px;
		background-color: #082041;
	}
	.brigCen .el-input__inner,.brigCen input[type=text] {
		color: #ececec;
		border-color: transparent;
		background-color: transparent;
	}
</style>
<body>
	<div id="app" style="height: 100vh;">
		<div class="yz_aside">
			<div style="height: calc(100% - 36px);overflow: auto;">
				<el-tree :data="areaLi" :props="defaultProps" 
					:default-expanded-keys="[0]"
					node-key="id" @node-click="nodeClick">
					<span class="custom-tree-node" slot-scope="{node,data}">
					    <span>
					       <i class="iconfont" :class="data.icon"></i>{{ data.group_name }}
					    </span>              
					</span>
				</el-tree>
			</div>
			<div class="flex padding-xs justify-between text-center" style="height: 36px;">
				<el-button type="primary" style="width: 25%;" icon="el-icon-plus" @click="reSet">分类</el-button>
				<el-button type="primary" style="width: 25%;" icon="el-icon-plus" @click="reTrSet">区域</el-button>
				<el-button type="primary" style="width: 21%;" :disabled="nowArea.type == -1" @click="editArea" icon="el-icon-edit"></el-button>
				<el-button type="primary" style="width: 21%;" :disabled="nowArea.type != 1" @click="delArea" icon="el-icon-delete"></el-button>
			</div>
		</div>
		<div class="yz_main" style="width: calc(100% - 180px);position: relative;">
			<div id="areaMap" style="width: 100%;height: 100%;"></div>
			<div class="brigCen">
				<div class="br_all flex algin-center">
					<div class="padding-tb-xs text-center"
						style="width: 80px;background-color: #4c4c4c;color: #fff;">中心经纬度</div>
					<div style="width:240px;">
						<el-input placeholder="经纬度" v-model="centerVal"></el-input>
					</div>
				</div>
				<el-button type="primary" size="mini" icon="el-icon-search" @click="setCenter">获取</el-button>
			</div>
		</div>
		<el-dialog title="区域分类管理" :visible.sync="logVis" width="300px">
			<div>
				<div class="br_all flex algin-center">
					<div class="bg-gray padding-tb-xs text-center" style="width: 94px;">所属分类</div>
					<el-tree style="width: calc(100% - 94px);" :data="treeArea" :props="defaultProps" node-key="id" @node-click="treeAreaClick"></el-tree>
				</div>
				<div class="br_all flex algin-center margin-top-sm">
					<div class="bg-gray padding-tb-xs text-center" style="width: 94px;">分类名称</div>
					<div style="width: calc(100% - 94px);background-color: #06162d;"><el-input v-model="treeAreaForm.group_name" placeholder="请输入分类名称"></el-input></div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="hideM">取 消</el-button>
				<el-button size="small" type="primary" @click="saveTreeArea">保 存</el-button>
			</div>
		</el-dialog>
		<div class="yz_dialog" v-if="treeVis">
			<div class="padding-tb-sm padding-lr-lg flex justify-between algin-center bg-blue" style="font-size: 15px;">
				<span>区域管理</span>
				<span class="el-icon-close yz_cursor" @click="hideM"></span>
			</div>
			<div class="padding-tb-sm padding-lr-lg">
				<div class="br_all flex algin-center">
					<div class="bg-gray padding-tb-xs text-center" style="width: 94px;">所属分类</div>
					<el-tree style="width: calc(100% - 94px);" :data="treeLi" :props="defaultProps" node-key="id" @node-click="treeClick"></el-tree>
				</div>
				<div class="br_all flex algin-center margin-top-sm">
					<div class="bg-gray padding-tb-xs text-center" style="width: 94px;">区域名称</div>
					<div style="width: calc(100% - 94px);background-color: #06162d;"><el-input v-model="treeForm.group_name" placeholder="请输入区域名称"></el-input></div>
				</div>
				<div class="br_all flex algin-center margin-top-sm">
					<div class="bg-gray padding-tb-xs text-center" style="width: 94px;">区域类型</div>
					<div style="width: calc(100% - 94px);background-color: #06162d;padding:6px 6px 0;">
						<el-radio-group v-model="treeForm.fence_type" @change="changFence">
						    <el-radio :label="0">圆形</el-radio>
						    <el-radio :label="1">多边形</el-radio>
						</el-radio-group>
					</div>
				</div>
			</div>
			<div class="padding-tb-sm padding-lr-lg text-right">
				<el-button size="small" @click="hideM">取 消</el-button>
				<el-button size="small" type="primary" @click="saveTree">保 存</el-button>
			</div>
		</div>
		<!-- <el-dialog title="区域管理" :visible.sync="treeVis" width="300px" :modal="false">
			<div>
				<div class="br_all flex algin-center">
					<div class="bg-gray padding-tb-xs text-center" style="width: 94px;">所属分类</div>
					<el-tree style="width: calc(100% - 94px);" :data="treeLi" :props="defaultProps" node-key="id" @node-click="treeClick"></el-tree>
				</div>
				<div class="br_all flex algin-center margin-top-sm">
					<div class="bg-gray padding-tb-xs text-center" style="width: 94px;">分类名称</div>
					<div style="width: calc(100% - 94px);"><el-input v-model="treeForm.group_name" placeholder="请输入分类名称"></el-input></div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="hideM">取 消</el-button>
				<el-button size="small" type="primary" @click="saveTree">保 存</el-button>
			</div>
		</el-dialog> -->
	</div>
	<script type="text/javascript">
		document.write('<script src="../assets/areaManage.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
	</script>
</body>
</html>