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