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>
|