系统管理+设备管理

src/assets/css/global.css

@@ -78,3 +78,104 @@ p{margin:0}
        
 
 
+/* 高标准按钮自定义样式 */
+/* 蓝色 */
+.el-button.el-button--blueInfo{
+    background:#0295ff;
+    border-color: #0295ff;
+    color: #fff;
+}
+.el-button.el-button--blueInfo:hover,
+.el-button.el-button--blueInfo:focus,
+.el-button.el-button--blueInfo:active{
+    background: #63beff;
+    color: #fff;
+    border-color: #0295ff;
+}
+.el-button.el-button--blueInfo.is-plain{
+    border: 1px solid #0295ff;
+    background:#fff;
+    color: #0295ff;
+}
+.el-button.el-button--blueInfo.is-plain:hover,
+.el-button.el-button--blueInfo.is-plain:focus,
+.el-button.el-button--blueInfo.is-plain:active{
+    color: #fff;
+    border: 1px solid #0295ff;
+    background-color: #0295ff;
+}
+/* 绿色 */
+.el-button.el-button--greenInfo{
+    background:#43a659;
+    border-color: #43a659;
+    color: #fff;
+}
+.el-button.el-button--greenInfo:hover,
+.el-button.el-button--greenInfo:focus,
+.el-button.el-button--greenInfo:active{
+    background: #7dba8b;
+    color: #fff;
+    border-color: #43a659;
+}
+.el-button.el-button--greenInfo.is-plain{
+    border: 1px solid #43a659;
+    background:#fff;
+    color: #43a659;
+}
+.el-button.el-button--greenInfo.is-plain:hover,
+.el-button.el-button--greenInfo.is-plain:focus,
+.el-button.el-button--greenInfo.is-plain:active{
+    color: #fff;
+    border: 1px solid #43a659;
+    background-color: #43a659;
+}
+/* 红色 */
+.el-button.el-button--redInfo{
+    background:#e63a3a;
+    border-color: #e63a3a;
+    color: #fff;
+}
+.el-button.el-button--redInfo:hover,
+.el-button.el-button--redInfo:focus,
+.el-button.el-button--redInfo:active{
+    background: #fc6060;
+    color: #fff;
+    border-color: #e63a3a;
+}
+.el-button.el-button--redInfo.is-plain{
+    border: 1px solid #e63a3a;
+    background:#fff;
+    color: #e63a3a;
+}
+.el-button.el-button--redInfo.is-plain:hover,
+.el-button.el-button--redInfo.is-plain:focus,
+.el-button.el-button--redInfo.is-plain:active{
+    color: #fff;
+    border: 1px solid #e63a3a;
+    background-color: #e63a3a;
+}
+/* 灰色 */
+.el-button.el-button--grayInfo{
+    background:#eee;
+    border-color: #dcdfe6;
+    color: #606266;
+}
+.el-button.el-button--grayInfo:hover,
+.el-button.el-button--grayInfo:focus,
+.el-button.el-button--grayInfo:active{
+    background: #dcdfe6;
+    color: #606266;
+    border-color: #dcdfe6;
+}
+.el-button.el-button--grayInfo.is-plain{
+    border: 1px solid #dcdfe6;
+    background:#fff;
+    color: #606266;
+}
+.el-button.el-button--grayInfo.is-plain:hover,
+.el-button.el-button--grayInfo.is-plain:focus,
+.el-button.el-button--grayInfo.is-plain:active{
+    color: #606266;
+    border: 1px solid #dcdfe6;
+    background-color: #eee;
+}

src/components/highStand/equipList.vue

@@ -6,7 +6,6 @@
       </div>
     </div>
     <div class="legend-menu" @click="toggleMenu">
-      <!-- <i class="el-icon-arrow-right"></i> -->
       {{open?"隐藏":"列表"}}
     </div>
   </div>

src/components/highStand/searchBar.vue

@@ -0,0 +1,101 @@
+<template>
+	<div class="check-btns">
+		<div class="type-check">
+			<slot name="left-search"></slot>
+		</div>
+		<div class="search-box">
+			<slot name="right-search">
+				<el-input
+					style="cursor: pointer"
+					placeholder="请输入内容"
+					size="mini"
+					clearable
+					v-model="searchVal"
+					suffix-icon="el-icon-search"
+					class="input-with-select"
+					@change="searchEquipList()"
+				>
+					<el-select
+						v-model="selectItem"
+						class="select02"
+						slot="prepend"
+						placeholder="请选择"
+						@change="selClear()"
+					>
+						<el-option label="设备ID" value="1"></el-option>
+						<el-option label="设备名" value="2"></el-option>
+					</el-select>
+				</el-input>
+				<el-select
+					v-model="is_online"
+					class="select01"
+					clearable
+					size="mini"
+					placeholder="请选择在线状态"
+					@change="isOnlineSelect()"
+				>
+					<el-option label="全部" value=""></el-option>
+					<el-option label="在线" value="1"></el-option>
+					<el-option label="离线" value="0"></el-option>
+				</el-select>
+			</slot>
+			<slot name="search-box"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			selectItem: '1', //1设备号，2用户名
+			searchVal: '',
+			f_id: '',
+			ename: '',
+			is_online: null,
+			btnState: this.displayType
+		}
+	},
+	props: {
+		displayType: {
+			type: String
+		}
+	},
+	methods: {
+		checkType(i) {
+			this.btnState = i
+			this.$emit('fun', this.btnState)
+		},
+		// 搜索组合数据
+		searchEquipList() {
+			if (this.selectItem == 1) {
+				this.f_id = this.searchVal
+			} else if (this.selectItem == 2) {
+				this.ename = this.searchVal
+			}
+			this.$emit('fun2', { f_id: this.f_id, ename: this.ename })
+		},
+		selClear() {
+			if (this.searchVal) {
+				this.searchVal = ''
+				this.f_id = ''
+				this.ename = ''
+				this.$emit('fun2', { f_id: this.f_id, ename: this.ename })
+			}
+		},
+		isOnlineSelect() {
+			this.$emit('fun3', this.is_online)
+		}
+	}
+}
+</script>
+
+<style lang='less' scoped>
+.check-btns {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 20px;
+	align-items: center;
+	
+}
+</style>

src/components/highStand/sidebar.vue

@@ -1,7 +1,6 @@
 <template>
   <div :class="['legend', open ? 'open' : '']">
     <div class="legend-menu" @click="toggleMenu">
-      <!-- <i class="el-icon-arrow-right"></i> -->
       {{open?"隐藏":"显示"}}
     </div>
     <div class="legend-detail">
@@ -39,6 +38,7 @@ export default {
   .legend-menu {
     background: #242424;
     color: #fff;
+    opacity: .7;
     width: 23px;
     // height: 58px;
     border-top-left-radius: 4px;
@@ -53,6 +53,9 @@ export default {
       transition: 0.5s;
     }
   }
+  .legend-menu:hover{
+    opacity: 1;
+  }
   .legend-detail {
     transition: 0.8s;
     width: 0px;
@@ -72,8 +75,9 @@ export default {
   }
 }
 .legend.open {
-  .legend-menu i {
-    transform: rotateY(180deg);
+  .legend-menu{
+    opacity: 1;
+    border-radius: 4px;
   }
   .legend-detail {
     width: 440px;

src/components/index.vue

@@ -6,7 +6,7 @@
         <!-- logo -->
         <div class="logoinfo">
           <img :src="$imghost + logoIcon" width="40" alt />
-          <span>高标准农田管理系统</span>
+          <span>高标准农田管理系统1</span>
         </div>
         <!-- 菜单 -->
         <ul class="topMenu">
@@ -26,7 +26,7 @@
           欢迎您！
           <el-dropdown>
             <span class="el-dropdown-link">
-              admin
+              {{username}}
               <i class="el-icon-arrow-down el-icon--right"></i>
             </span>
             <el-dropdown-menu slot="dropdown">
@@ -155,9 +155,20 @@ export default {
           id: "6",
           children: [
             {
-              name: "设备列表",
-              path: ""
-            }
+              name: "用户管理",
+              path: "/page4",
+              id: "22"
+            },
+            {
+              name: "角色管理",
+              path: "/page6",
+              id: "22"
+            },
+            {
+              name: "主题定制",
+              path: "/page7",
+              id: "22"
+            },
           ]
         },
         {
@@ -166,7 +177,8 @@ export default {
           children: [
             {
               name: "设备列表",
-              path: ""
+              path: "/page8",
+              id: "22"
             }
           ]
         }
@@ -188,9 +200,10 @@ export default {
         "7": require("@/assets/images/home/home02/scd.png")
       },
       //动态标签
+      // menuTabs:[{ "path": "/plantGuard/page1", "name": "设备列表", "par": "数据监测", "order": 0 } ],
       menuTabs:[],
       menuTabsValue:'',
-
+      username:"",
     };
   },
   //监听属性 类似于data概念
@@ -200,8 +213,8 @@ export default {
     '$route' (to, from) {
       let flag = false
       for (let item of this.menuTabs) {
-        if (item.name === to.name) {
-          this.menuTabsValue = to.name
+        if (item.name === to.meta.navname) {
+          this.menuTabsValue = to.meta.navname
           flag = true
           break
         }
@@ -209,8 +222,8 @@ export default {
 
       if (!flag) {
         console.log(to)
-        this.add_tabs({path: to.path, name: to.name,par:to.meta.title,order:to.meta.order})
-        this.menuTabsValue = to.name
+        this.add_tabs({path: to.path, name: to.meta.navname,par:to.meta.title,order:to.meta.order})
+        this.menuTabsValue = to.meta.navname
       }
       
     }
@@ -235,7 +248,6 @@ export default {
       this.currLeftMenuId = item.name;
       console.log('234')
       console.log(item)
-      // this.add_tabs(item)
       this.$router.push({ path: '/plantGuard'+item.path });
     },
     //添加tab标签
@@ -280,7 +292,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.username = localStorage.getItem("cUsername");
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -294,6 +308,7 @@ export default {
 .el-header {
   background-color: #252b37;
   color: #eee;
+  z-index: 9999999;
   .headMenu {
     height: 80px;
     display: flex;
@@ -373,14 +388,26 @@ export default {
   .tabsNav{
     position: fixed;
     background: #fff;
+    z-index: 9999999;
+    width: 100%;
   }
   .content{
     padding-top: 56px;
     height: calc(100vh - 136px);
+    .innerMargin{
+      padding: 0px 20px 20px;
+    }
   }
-  
 }
 /deep/.el-tabs__nav .el-tabs__item:nth-child(1) span{
       display: none;
   }
+
+
+
+
+  /deep/.el-tabs__item.is-active,
+  /deep/.el-tabs__item:hover{
+    color: #0295ff;
+  }
 </style>

src/pages/plantGuard/page1.vue

@@ -20,8 +20,8 @@
         <el-radio :label="1">卫星图</el-radio>
       </el-radio-group>
     </div>
-    <sidebar>1</sidebar>
-    <equip-list>1</equip-list>
+    <sidebar></sidebar>
+    <equip-list></equip-list>
   </div>
 </template>
 

src/pages/plantGuard/page4.vue

@@ -0,0 +1,889 @@
+<!-- 用户管理 -->
+<template>
+  <div class="innerMargin">
+    <el-card class="box-card">
+      <search-bar>
+        <template v-slot:left-search>
+          <div class="search-box">
+            <el-select 
+              v-model="role" 
+              clearable 
+              class="select02" 
+              @change="checkList()" 
+              size="small" 
+              placeholder="请选择角色类型"
+            >
+              <el-option
+                v-for="item in roleList"
+                :label="item.role_name"
+                :value="item.role_id"
+                :key="item.role_id"
+              ></el-option>
+            </el-select>
+            <el-select
+              v-model="userTypeCheck"
+              clearable
+              class="select02"
+              size="small"
+              @change="checkList()"
+              placeholder="请选择用户类型"
+            >
+              <el-option label="超级管理员" :value="1"></el-option>
+              <el-option label="经销商" :value="2"></el-option>
+              <el-option label="农林政府单位" :value="3"></el-option>
+              <el-option label="普通用户" :value="4"></el-option>
+            </el-select>
+            <el-input
+              style="cursor: pointer"
+              placeholder="请输入用户名"
+              size="small"
+              clearable
+              @change="checkList()"
+              v-model="username"
+              suffix-icon="el-icon-search"
+              class="input-with-select"
+            ></el-input>
+            <!-- 管理员权限 -->
+            <el-button type="blueInfo" size="small" @click="selUserTest()">{{txtInner}}</el-button>
+          </div>
+        </template>
+        <template v-slot:right-search>
+          <el-button type="blueInfo" size="small" @click="addUser()">添加新用户</el-button>
+        </template>
+      </search-bar>
+       <template>
+        <el-table :data="userList" stripe style="width: 100%">
+          <el-table-column prop="username" width="150" fixed label="用户名称"></el-table-column>
+          <el-table-column prop="role_name" label="用户角色">
+          </el-table-column>
+          <el-table-column prop="user_type" width="150" label="用户类型">
+            <template slot-scope="scope">{{ scope.row.user_type | formatUserType }}</template>
+          </el-table-column>
+          <el-table-column prop="regiest_source_name" width="150" label="用户所属">
+            <template slot-scope="scope">{{ scope.row.regiest_source_name || '--' }}</template>
+          </el-table-column>
+          <el-table-column prop="addtime" width="200" label="创建时间">
+              <template slot-scope="scope">{{ ( scope.row.addtime * 1000) | formatTime }}</template>
+          </el-table-column>
+          <el-table-column prop="mobile" width="120" label="联系方式"></el-table-column>
+          <el-table-column prop="state" label="账号状态">
+              <template slot-scope="scope"><div :class="[scope.row.state==1?'greenState':'redState']">{{ scope.row.state==1?'正常':'禁用' }}</div></template>
+          </el-table-column>
+          <el-table-column prop="login_time" width="200" label="上次登录">
+              <template slot-scope="scope">{{ ( scope.row.login_time * 1000) | formatTime }}</template>
+          </el-table-column>
+          <el-table-column prop="expire_time" width="200" label="到期时间">
+              <template slot-scope="scope">{{ ( scope.row.expire_time * 1000) | formatTime }}</template>
+          </el-table-column>
+          <el-table-column prop label="操作" fixed="right" width="350">
+            <template slot-scope="scope">
+              <el-button type="blueInfo" size="mini" title="一键登录" plain @click="login(scope.row.uid, scope.row.username)">
+                <i class="el-icon-edit"></i>
+              </el-button>
+              <el-button type="greenInfo" v-if="scope.row.user_type!=3" size="mini" title="分配设备" plain @click="distribute(scope.row.uid, scope.row.username)">
+                <i class="el-icon-edit"></i>
+              </el-button>
+              <el-button type="redInfo" size="mini" title="充值" plain @click="recharge(scope.row.uid)">
+                <i class="el-icon-edit"></i>
+              </el-button>
+              <el-button type="blueInfo" size="mini" title="编辑" plain @click="edit(scope.row)">
+                <i class="el-icon-edit"></i>
+              </el-button>
+              <template v-if="scope.row.state == 1">
+                <el-button type="greenInfo" size="mini" title="禁用" plain @click="forbidUse(scope.row.uid,4, '确认禁用该用户?')">
+                  禁用
+                </el-button>
+              </template>
+              <template v-else>
+                <el-button type="redInfo" size="mini" title="恢复" plain @click="forbidUse(scope.row.uid, 1, '确认恢复该用户?')">
+                  恢复
+                </el-button>
+              </template>
+              <el-button type="blueInfo" size="mini" title="重置密码" plain @click="resetPassword(scope.row.uid, scope.row.username)">
+                <i class="el-icon-edit"></i>
+              </el-button>
+            </template>
+            
+          </el-table-column>
+        </el-table>
+      </template>
+      <el-pagination
+        v-if="userList.length > 0"
+        background
+        :page-size="8"
+        layout="prev, pager, next, jumper"
+        :current-page="page"
+        :total="totalNum"
+        @current-change="changePage"
+      ></el-pagination>
+    </el-card>
+    <!-- 添加新用户 -->
+		<el-dialog
+			title="添加新用户"
+			:visible.sync="addUserDialogVisible"
+			width="30%"
+			@close="addUserDialogClosed"
+		>
+			<el-form
+				ref="addUserFormRef"
+				:model="addUserForm"
+				label-width="80px"
+				:rules="addUserFormRules"
+			>
+				<el-form-item label="用户名 : " prop="username">
+					<el-input v-model="addUserForm.username"></el-input>
+				</el-form-item>
+				<el-form-item label="电话 : " prop="mobile">
+					<el-input v-model="addUserForm.mobile"></el-input>
+				</el-form-item>
+				<el-form-item label="密码  : " prop="pass">
+					<el-input type="password" v-model="addUserForm.pass"></el-input>
+				</el-form-item>
+				<el-form-item label="角色类型 : ">
+					<el-select
+						style="width: 100%"
+						size="small"
+						v-model="addUserForm.role_id"
+						placeholder="请选择角色类型"
+					>
+						<el-option
+							v-for="item in roleList"
+							:label="item.role_name"
+							:value="item.role_id"
+							:key="item.role_id"
+						></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="主题 : " prop="user_group_id">
+					<el-select
+						style="width: 100%"
+						clearable
+						v-model="addUserForm.user_group_id"
+						placeholder="请选择主题"
+					>
+						<el-option
+							v-for="(item, index) in userGroupList"
+							:label="item.role_describe"
+							:value="item.id"
+							:key="index"
+						></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="用户类型 : " prop="user_type" v-if="userType == 1">
+					<el-select
+						style="width: 100%"
+						clearable
+						v-model="addUserForm.user_type"
+						@change="userTypeChange"
+						placeholder="请选择角色类型"
+					>
+						<el-option label="超级管理员" :value="1"></el-option>
+						<el-option label="经销商" :value="2"></el-option>
+						<el-option label="农林政府单位" :value="3"></el-option>
+						<el-option label="普通用户" :value="4"></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="用户类型 : " prop="user_type" v-if="userType != 1">
+					<el-select
+						style="width: 100%"
+						clearable
+						v-model="addUserForm.user_type"
+						@change="userTypeChange"
+						placeholder="请选择角色类型"
+					>
+						<el-option label="普通用户" :value="4"></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="省/市/区 : " v-show="editIsShow" prop="pcd">
+					<el-select
+						style="width: 100%"
+						clearable
+						v-model="addUserForm.pcd"
+						placeholder="请选择省、市、县"
+						@change="pcdChange"
+					>
+						<el-option label="省" value="1"></el-option>
+						<el-option label="市" value="2"></el-option>
+						<el-option label="县" value="3"></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="省/市/区 : " v-show="editIsShow" prop="user_area">
+					<el-select
+						style="width: 100%"
+						clearable
+						v-model="addUserForm.user_area"
+						placeholder="请选择省、市、县"
+						@change="pcdChange"
+					>
+						<el-option
+							:label="item"
+							:value="item"
+							v-for="item in areaList"
+							:key="item"
+						></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="测试用户" prop="cs_user">
+					<el-switch active-color="#0295ff" inactive-color="#b4b4b4" v-model="addUserForm.cs_user"></el-switch>
+				</el-form-item>
+			</el-form>
+			<span slot="footer" class="dialog-footer">
+				<el-button type="blueInfo" @click="addUserSubm">保 存</el-button>
+				<el-button type="grayInfo" plain @click="addUserDialogVisible = false">取 消</el-button>
+			</span>
+		</el-dialog>
+    <!-- 用户编辑 -->
+		<el-dialog
+			title="用户信息编辑"
+			:visible.sync="editUserDialogVisible"
+			width="500px"
+			@close="editUserDialogClosed"
+		>
+			<el-form
+				ref="editUserFormRef"
+				:model="editUserForm"
+				label-width="100px"
+				:rules="editUserFormRules"
+			>
+				<el-form-item label="用户名 : ">
+					<el-input v-model="editUserForm.username" disabled></el-input>
+				</el-form-item>
+				<el-form-item label="电话 : " prop="mobile">
+					<el-input v-model="editUserForm.mobile"></el-input>
+				</el-form-item>
+				<el-form-item label="角色类型 : " prop="role_id">
+					<el-select
+						style="width: 100%"
+						clearable
+						v-model="editUserForm.role_id"
+						placeholder="请选择角色类型"
+					>
+						<el-option
+							v-for="item in roleList"
+							:label="item.role_name"
+							:value="item.role_id"
+							:key="item.role_id"
+						></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="主题 : " prop="user_group_id">
+					<el-select
+						style="width: 100%"
+						clearable
+						v-model="editUserForm.user_group_id"
+						placeholder="请选择主题"
+					>
+						<el-option
+							v-for="(item, index) in userGroupList"
+							:label="item.role_describe"
+							:value="item.id"
+							:key="index"
+						></el-option>
+					</el-select>
+				</el-form-item>
+				<!-- 当用户为超级管理员 -->
+				<el-form-item label="用户类型 : " prop="user_type" v-if="userType == 1">
+					<el-select
+						disabled
+						style="width: 100%"
+						clearable
+						v-model="editUserForm.user_type"
+						@change="userTypeChange"
+						placeholder="请选择角色类型"
+					>
+						<el-option label="超级管理员" :value="1"></el-option>
+						<el-option label="经销商" :value="2"></el-option>
+						<el-option label="农林政府单位" :value="3"></el-option>
+						<el-option label="普通用户" :value="4"></el-option>
+					</el-select>
+				</el-form-item>
+				<!-- 当用户不是超级管理员 -->
+				<el-form-item label="用户类型 : " prop="user_type" v-if="userType != 1">
+					<el-select
+						disabled
+						style="width: 100%"
+						clearable
+						v-model="editUserForm.user_type"
+						@change="userTypeChange"
+						placeholder="请选择角色类型"
+					>
+						<el-option label="普通用户" :value="4"></el-option>
+					</el-select>
+				</el-form-item>
+				<!-- 用户类型为经销商时，显示子账户数量 -->
+				<!-- <el-form-item
+					label="子账户数量 : "
+					prop="sub_account_num"
+					v-if="editUserForm.user_type == 2"
+				>
+					<el-input v-model="editUserForm.sub_account_num"></el-input>
+				</el-form-item> -->
+				<el-form-item
+					label="省/市/区 : "
+					v-show="editIsShow || editUserForm.user_type == 3"
+					prop="pcd"
+				>
+					<el-select
+						style="width: 100%"
+						clearable
+						v-model="editUserForm.pcd"
+						placeholder="请选择省、市、县"
+						@change="pcdChange"
+					>
+						<el-option label="省" value="1"></el-option>
+						<el-option label="市" value="2"></el-option>
+						<el-option label="县" value="3"></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item
+					label="省/市/区 : "
+					v-show="editIsShow || editUserForm.user_type == 3"
+					prop="user_area"
+				>
+					<el-select
+						style="width: 100%"
+						clearable
+						v-model="editUserForm.user_area"
+						placeholder="请选择省、市、县"
+						@change="pcdChange"
+					>
+						<el-option
+							:label="item"
+							:value="item"
+							v-for="item in areaList"
+							:key="item"
+						></el-option>
+					</el-select>
+				</el-form-item>
+			</el-form>
+			<span slot="footer" class="dialog-footer">
+				<el-button @click="editUserDialogVisible = false">取 消</el-button>
+				<el-button type="primary" @click="editUserSubm">确认</el-button>
+			</span>
+		</el-dialog>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+import searchBar from "@/components/highStand/searchBar";
+import cityData from './citydata'
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    searchBar
+  },
+  inject: ['reload'],
+  data() {
+    var checkMobile = (rule, value, callback) => {
+			const regMobile = /^1\d{10}$/
+			if (regMobile.test(value)) {
+				callback()
+			} else {
+				// 返回一个错误提示
+				callback(new Error('请输入合法的手机号码'))
+			}
+		}
+		var validatePass = (rule, value, callback) => {
+			if (value === '') {
+				callback(new Error('请输入新密码'))
+			} else {
+				if (this.resetPassForm.checkPass !== '') {
+					this.$refs.resetPassFormRef.validateField('checkPass')
+				}
+				callback()
+			}
+		}
+		var validatePass2 = (rule, value, callback) => {
+			if (value === '') {
+				callback(new Error('请再次输入密码'))
+			} else if (value !== this.resetPassForm.pass) {
+				callback(new Error('两次输入密码不一致!'))
+			} else {
+				callback()
+			}
+		}
+    //这里存放数据
+    return {
+      role: "",
+      username: "",
+      txtInner:"筛选测试用户",
+      userList: [],
+			userGroupList: [],
+      roleList: [],
+      page: 1,
+      totalNum: 0,
+      userTypeCheck: '', //筛选项 用户类型
+      tets_user: '', //测试用户筛选
+      addUserDialogVisible: false,
+      addUserForm: {
+				username: '',
+				mobile: '',
+				pass: '',
+				role_id: '',
+				user_type: '',
+				pcd: '',
+				user_area: '',
+				cs_user: false, //1为普通用户
+				user_group_id: '' //用户组id
+      },
+      cityData,
+      areaList: [],//省市县
+      //控制省/市/区显示
+      editIsShow: false,
+      editUserForm: {},
+      editUserDialogVisible:false,
+			//编辑用户规则
+			editUserFormRules: {
+				user_phone: [{ validator: checkMobile, trigger: 'blur' }]
+			},
+			//添加用户规则
+			addUserFormRules: {
+				username: [
+					{ required: true, message: '请填写用户名', trigger: 'blur' }
+				],
+				mobile: [
+					{ required: true, trigger: 'blur', message: '手机号不能为空' },
+					{ validator: checkMobile, trigger: 'blur' }
+				],
+				pass: [{ required: true, message: '请填写用户密码', trigger: 'blur' }]
+			},
+			//重置密码格规则
+			resetPassFormRules: {
+				oldPass: [{ required: true, message: '请填原始密码', trigger: 'blur' }],
+				pass: [
+					{ validator: validatePass, trigger: 'blur' },
+					{ required: true, message: '请填写新密码', trigger: 'blur' }
+				],
+				checkPass: [
+					{ validator: validatePass2, trigger: 'blur' },
+					{ required: true, message: '请确认新密码', trigger: 'blur' }
+				]
+      },
+      // 筛选
+      checkList() {
+        this.page = 1
+        this.getList()
+      },
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {
+    //获取用户类型
+		userType: function () {
+			return window.sessionStorage.getItem('myuser_type')
+		}
+  },
+  //监控data中的数据变化
+  watch: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getRoleList();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.getList();
+    this.getUserGroup(); //获取用户组
+  },
+  //方法集合
+  methods: {
+    //获取用户列表
+    getList() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=user.login.users_info",
+        data: this.qs.stringify({
+          role_id: this.role,
+          page_size: 8,
+          user_type: this.userTypeCheck,
+          page: this.page,
+          username: this.username,
+          tets_user: this.tets_user
+        })
+      }).then(res => {
+        if (res.data.message == "") {
+          this.userList = res.data.data.data;
+          this.totalNum = res.data.data.count;
+        }
+      });
+    },
+    getUserGroup() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=pest.warning_record.rolemanage_view",
+        data: this.qs.stringify({
+          add_role: "all"
+        })
+      }).then(res => {
+        if (res.data.message == "") {
+          this.userGroupList = res.data.data.data;
+        }
+      });
+    },
+    getRoleList() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=user.perms.role_list"
+      }).then(res => {
+        if (res.data.message == "") {
+          this.roleList = res.data.data.map(item => {
+            return {
+              role_id: item.role_id,
+              role_name: item.role_name
+            };
+          });
+        }
+      });
+    },
+    selUserTest() {
+			this.tets_user = this.tets_user == '' ? 1 : ''
+			this.getList()
+			this.txtInner = this.txtInner == '筛选测试用户' ? '全部用户' : '筛选测试用户'
+    },
+    //添加用户
+		addUser() {
+			this.addUserDialogVisible = true
+    },
+    //监听省/市/区
+		pcdChange(val) {
+      let addr_type = ''
+      var _this = this
+			switch (val) {
+				case '1':
+          addr_type = 'province'
+					break
+				case '2':
+					addr_type = 'city'
+					break
+				case '3':
+					addr_type = 'district'
+					break
+			}
+			this.$axios({
+				method: 'POST',
+				url: '/api/api_gateway?method=device.device_manage.device_addr',
+				data: this.qs.stringify({
+					addr_type
+				})
+			}).then((res) => {
+				if (res.data.message == '') {
+					_this.areaList = res.data.data
+          _this.addUserForm.user_area = ''
+          _this.editUserForm.user_area = ''
+				}
+			})
+    },
+    //监听用户类型改变
+		userTypeChange(val) {
+			if (val == 3) {
+				this.editIsShow = true
+			} else {
+				this.editIsShow = false
+			}
+    },
+    addUserDialogClosed() {
+      this.$refs.addUserFormRef.resetFields()
+      this.editIsShow = false
+      this.addUserForm.role_id = ''
+    },
+    changePage(value) {
+			this.page = value
+			this.getList()
+    },
+    //添加用户提交
+		addUserSubm() {
+			this.$refs.addUserFormRef.validate((valid) => {
+				if (!valid) return
+				let cs_user = this.addUserForm.cs_user ? '1' : ''
+				this.$axios({
+					method: 'POST',
+					url: '/api/api_gateway?method=user.login.regiest',
+					data: this.qs.stringify({
+						username: this.addUserForm.username,
+						mobile: this.addUserForm.mobile,
+						password: this.addUserForm.pass,
+						role_id: this.addUserForm.role_id,
+						user_type: this.addUserForm.user_type,
+						pcd: this.addUserForm.pcd,
+						user_area: this.addUserForm.user_area,
+						user_group_id: this.addUserForm.user_group_id,
+						cs_user
+					})
+				}).then((res) => {
+					if (res.data.message == '') {
+						this.$message.success('添加用户成功！')
+						this.addUserDialogVisible = false
+						this.getList()
+					} else {
+						this.$message.error(res.data.message)
+					}
+				})
+			})
+    },
+    // 编辑用户信息
+		edit(role) {
+			console.log(role)
+			let data = JSON.stringify(role)
+			this.editUserForm = JSON.parse(data)
+			if (role.role_id == 0) {
+				//把0转换成""
+				this.editUserForm.role_id = ''
+      }
+      if (role.user_group_id=='0') {
+				//把0转换成""
+				this.editUserForm.user_group_id = ''
+			}
+			this.editUserDialogVisible = true
+    },
+    editUserDialogClosed() {
+			this.$refs.editUserFormRef.resetFields()
+			this.areaList = [] //清空省/市/区
+			this.editIsShow = false
+    },
+    //修改用户信息提交
+	editUserSubm() {
+		this.$refs.editUserFormRef.validate((valid) => {
+			if (!valid) return
+			console.log(this.editUserForm.user_group_id)
+			this.$axios({
+				method: 'POST',
+				url: '/api/api_gateway?method=user.login.users_info_updata',
+				data: this.qs.stringify({
+					uid: this.editUserForm.uid,
+					username: this.editUserForm.username,
+					mobile: this.editUserForm.mobile,
+					role_id: this.editUserForm.role_id,
+					user_type: this.editUserForm.user_type,
+					pcd: this.editUserForm.pcd,
+					user_area: this.editUserForm.user_area,
+					user_group_id: this.editUserForm.user_group_id=='0'?'':this.editUserForm.user_group_id
+				})
+			}).then((res) => {
+				if (res.data.message == '') {
+					this.editUserDialogVisible = false
+					this.getList()
+				}
+			})
+		})
+	},
+	login(uid, username) {
+		//一键登录
+		this.$confirm('一键登录将登录此用户，是否继续?', '提示', {
+			confirmButtonText: '确定',
+			cancelButtonText: '取消',
+			type: 'warning'
+		})
+			.then(() => {
+				this.$axios({
+					method: 'POST',
+					url: '/api/api_gateway?method=user.login.auto_login',
+					data: this.qs.stringify({
+						uid
+					})
+				}).then((res) => {
+					if (res.data.message == '') {
+						this.$message({
+							type: 'success',
+							message: '操作成功!'
+						})
+						localStorage.setItem('cUsername',username) //修改当前登录的用户名
+						this.reload() //整体刷新
+						this.$EventBus.$on('firstPage', (data) => {
+							//默认显示菜单第一项
+							this.$router.push(`${data}`)
+						})
+					} else {
+						this.$message({
+							type: 'warning',
+							message: res.data.message
+						})
+					}
+				})
+			})
+			.catch(() => {
+				this.$message({
+					type: 'info',
+					message: '取消一键登录！'
+				})
+			})
+	},
+	//用户禁用
+	forbidUse(id, state, txt) {
+		this.$confirm(txt, '提示', {
+			confirmButtonText: '确定',
+			cancelButtonText: '取消',
+			type: 'warning'
+		})
+			.then(() => {
+				this.$axios({
+					method: 'POST',
+					url: '/api/api_gateway?method=user.login.users_statu_updata',
+					data: this.qs.stringify({
+						uid: id,
+						state: state
+					})
+				}).then((res) => {
+					if (res.data.message == '') {
+						this.$message({
+							type: 'success',
+							message: '操作成功!'
+						})
+						this.getList()
+					}
+				})
+			})
+			.catch(() => {
+				this.$message({
+					type: 'info',
+					message: '禁用取消！'
+				})
+			})
+	},
+	distribute(id, username) {
+		this.$router.push({
+			name: 'page5',
+			params: {id:id, username: username }
+		})
+	},
+	recharge(id) {
+			this.$confirm('是否向该用户充值一年费用?', '信息', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			})
+				.then(() => {
+					this.$axios({
+						method: 'POST',
+						url: '/api/api_gateway?method=user.login.user_add_package_time',
+						data: this.qs.stringify({
+							uid: id
+						})
+					}).then((res) => {
+						if (res.data.message == '') {
+							this.$message({
+								type: 'success',
+								message: '充值成功!'
+							})
+							this.getList()
+						} else {
+							this.$message({
+								type: 'error',
+								message: '充值失败!'
+							})
+						}
+					})
+				})
+				.catch(() => {
+					this.$message({
+						type: 'info',
+						message: '充值取消！'
+					})
+				})
+	},
+	//密码重置
+	resetPassword(id, name) {
+		// this.resetPassForm.uid = id
+		// this.resetPassForm.username = name
+		// this.resetPassDialogVisible = true
+		this.$confirm('是否重置密码 ? 重置后的密码为 yf_123456', '提示', {
+			confirmButtonText: '确定',
+			cancelButtonText: '取消',
+			type: 'warning'
+		})
+			.then(() => {
+				this.$axios({
+					method: 'POST',
+					url: '/api/api_gateway?method=user.login.admin_changepwd',
+					data: this.qs.stringify({
+						uid: id
+					})
+				}).then((res) => {
+					if (res.data.message == '') {
+						this.$message({
+							type: 'success',
+							message: '操作成功!'
+						})
+						this.getList()
+					} else {
+						this.$message({
+							type: 'warning',
+							message: res.data.message
+						})
+					}
+				})
+			})
+			.catch(() => {
+				this.$message({
+					type: 'info',
+					message: '取消重置密码！'
+				})
+			})
+	},
+    
+  },
+  filters: {
+      formatUserType(value) {
+			switch (value) {
+				case 1:
+					return '超级管理员'
+					break
+				case 2:
+					return '经销商'
+					break
+				case 3:
+					return '农林政府单位'
+					break
+				case 4:
+					return '普通用户'
+					break
+			}
+		}
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.search-box {
+  text-align: right;
+  .el-input {
+    width: 200px;
+    vertical-align: middle;
+  }
+  .el-select {
+    vertical-align: middle;
+  }
+}
+/deep/.el-table th, /deep/.el-table td{
+    text-align: center;
+}
+/deep/.el-table th{
+    background-color: #f6f6f6;
+}
+/deep/.el-table thead{
+    color: #373737;
+}
+.greenState{
+  color: green;
+}
+.redState{
+  color: red;
+}
+// 分页为蓝色调
+/deep/.el-pagination .el-pager li.active{
+  background-color: #0295ff!important;  
+}
+/deep/.el-pagination.is-background .el-pager li:not(.disabled):hover{
+  color: #0295ff;
+}
+/deep/.el-input__inner:focus{
+  outline: none;
+  border-color: #0295ff;
+}
+</style>

src/pages/plantGuard/page5.vue

@@ -0,0 +1,321 @@
+<!-- 设备分配 -->
+<template>
+  <div class="innerMargin">
+      <el-card class="box-card">
+        <div style="cursor: default">
+          <div class="search-box">
+            <div class="filter-box">
+              <el-select
+                size="small"
+                v-model="type"
+                @change="equipCheck()"
+                clearable
+                placeholder="请选择设备类型"
+              >
+                <el-option label="杀虫灯" value="2"></el-option>
+                <el-option label="测报灯" value="3"></el-option>
+                <el-option label="智能性诱" value="4"></el-option>
+                <el-option label="气象站" value="5"></el-option>
+                <el-option label="监控设备" value="6"></el-option>
+                <el-option label="孢子仪" value="7"></el-option>
+                <el-option label="性诱设备" value="8"></el-option>
+                <el-option label="糖醋测报" value="9"></el-option>
+              </el-select>
+              <el-input
+                style="cursor: pointer"
+                size="small"
+                clearable
+                placeholder="请输入设备ID"
+                @change="equipCheck()"
+                v-model="equipId"
+              >
+                <i slot="suffix" class="el-input__icon el-icon-search"></i>
+              </el-input>
+              <el-date-picker
+                style="cursor: pointer"
+                size="small"
+                v-model="timeRange"
+                @change="DateChange"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              ></el-date-picker>
+            </div>
+            <el-button type="blueInfo" @click="distSubm" size="mini"
+              >确定分配</el-button
+            >
+          </div>
+          <el-row :gutter="10">
+            <el-col
+              :xs="24"
+              :sm="24"
+              :md="12"
+              :lg="6"
+              :xl="4"
+              v-for="(item, index) in dataList"
+              :key="index"
+            >
+              <el-card
+                @click.native="itemFun(item)"
+                :class="['box-card', item.checked ? 'selected' : '']"
+              >
+                <el-checkbox
+                  :ref="'checkboxRef'"
+                  v-model="item.checked"
+                  @click.native="stopDefault($event)"
+                  @change="checkboxChange($event, item.d_id)"
+                ></el-checkbox>
+                <div class="img-box">
+                  <template v-if="item.device_type_id == 2">
+                    <img src="@/assets/images/equipdistribute/scdIconOn.png" />
+                  </template>
+                  <template v-if="item.device_type_id == 3">
+                    <img src="@/assets/images/equipdistribute/cbdIconOn.png" />
+                  </template>
+                  <template v-if="item.device_type_id == 4">
+                    <img src="@/assets/images/equipdistribute/znxyOn.png" />
+                  </template>
+                  <template v-if="item.device_type_id == 5">
+                    <img src="@/assets/images/equipdistribute/hjjcIconOn.png" />
+                  </template>
+                  <template v-if="item.device_type_id == 6">
+                    <img src="@/assets/images/equipdistribute/jkIconOn.png" />
+                  </template>
+                  <template v-if="item.device_type_id == 7">
+                    <img src="@/assets/images/equipdistribute/bzyIconOn.png" />
+                  </template>
+                  <template v-if="item.device_type_id == 8">
+                    <img src="@/assets/images/equipdistribute/xyOn.png" />
+                  </template>
+                  <template v-if="item.device_type_id == 9">
+                    <img src="@/assets/images/equipdistribute/tccbOn.png" />
+                  </template>
+                  <p>{{ item.device_id }}</p>
+                </div>
+                <div class="detail">
+                  <p>
+                    设备名称
+                    <span>{{ item.device_name || "无" }}</span>
+                  </p>
+                  <p>
+                    设备类型
+                    <span>{{ (item.device_type_id + "") | equipType }}</span>
+                  </p>
+                  <p>
+                    设备添加时间
+                    <span>{{ (item.creat_time * 1000) | formatTime }}</span>
+                  </p>
+                  <p>
+                    设备地址
+                    <span>{{ item.device_location }}</span>
+                  </p>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+          <!-- 暂无数据 -->
+          <div class="expertDiagnosis_referral_units_not" v-if="dataList.length <= 0">
+            <img
+              :src="$imghost + zanwu"
+              alt
+              class="expertDiagnosis_referral_units_notImg"
+            />
+          </div>
+          <div class="userTip">
+            *注：以上所选设备分配给用户：{{ this.$route.params.username }}
+          </div>
+          <el-pagination
+            v-if="dataList.length > 0"
+            background
+            :page-size="12"
+            layout="prev, pager, next"
+            :current-page="page"
+            :total="totalNum"
+            @current-change="changePage"
+          ></el-pagination>
+        </div>
+      </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      zanwu: "/images/expertDiagnosis/zanwu.png",
+      uid: this.$route.params.id,
+      timeRange: "",
+      equipId: "",
+      begin: "",
+      end: "",
+      type: "",
+      dataList: [],
+      own_device: [],
+      device_ids: [], //选中的所有设备ID
+      page: 1,
+      totalNum: 0,
+      equipID: [],
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=device.device_manage.user_device_info",
+        data: this.qs.stringify({
+          owner_uid: this.uid,
+          page_size: 12,
+          device_id: this.equipId,
+          device_type_id: this.type,
+          start_time: this.begin,
+          end_time: this.end,
+          page: this.page,
+        }),
+      }).then((res) => {
+        if (res.data.message == "") {
+          let data = res.data.data.data;
+          this.dataList = data.map((item) => {
+            item.checked = item.device_user != 0; //device_user=0代表待分配
+            return item;
+          });
+          this.own_device = res.data.data.own_device;
+          this.totalNum = res.data.data.counts;
+        }
+      });
+    },
+    DateChange(val) {
+      if (this.timeRange) {
+        this.begin = parseInt(new Date(this.timeRange[0]).getTime() / 1000);
+        this.end = parseInt(new Date(this.timeRange[1]).getTime() / 1000);
+        this.page = 1;
+        this.getList();
+      } else {
+        this.begin = "";
+        this.end = "";
+        this.getList();
+      }
+    },
+    changePage(val) {
+      this.page = val;
+      this.getList();
+    },
+    distSubm() {
+      this.dataList.forEach((item) => {
+        if (item.checked == true) {
+          this.device_ids.push(item.d_id);
+        }
+      });
+      this.device_ids = this.device_ids.concat(this.own_device);
+      this.device_ids = [...new Set(this.device_ids)]; //数组去重
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=device.device_manage.allot_device",
+        data: this.qs.stringify({
+          device_ids: this.device_ids.join(","),
+          uid: this.uid,
+        }),
+      }).then((res) => {
+        if (res.data.message == "") {
+          this.$message.success("分配设备成功！");
+          this.$router.go(-1);
+        }
+      });
+    },
+    equipCheck() {
+      this.page = 1;
+      this.getList();
+    },
+    stopDefault(e) {
+      e.stopPropagation();
+    },
+    checkboxChange(event, d_id) {
+      for (let i in this.own_device) {
+        if (!event && d_id == this.own_device[i]) {
+          //取消勾选并且是用户已拥有的设备
+          this.own_device.splice(i, 1);
+        }
+	  }
+    },
+    itemFun(item) {
+      item.checked = !item.checked;
+      this.checkboxChange(item.checked, item.d_id);
+    },
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.search-box {
+  display: flex;
+  justify-content: flex-left;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  .filter-box > div {
+    margin-right: 15px;
+  }
+  .el-input {
+    width: 200px;
+  }
+  .el-date-editor--daterange {
+    width: 222px;
+  }
+}
+.el-card.selected {
+  border: 1px solid #0295ff;
+}
+.el-card {
+  box-sizing: border-box;
+  .img-box {
+    text-align: center;
+    border-bottom: 1px solid #eee;
+    padding: 15px 0;
+    img {
+      height: 45px;
+    }
+    p {
+      font-size: 14px;
+      font-weight: 800;
+      margin-top: 10px;
+    }
+  }
+  .detail {
+    border-bottom: 1px solid #eee;
+    padding: 10px 0;
+    p {
+      display: flex;
+      justify-content: space-between;
+      font-size: 13px;
+      line-height: 34px;
+      color: #666;
+      padding: 0 0px;
+    }
+  }
+}
+.userTip {
+  text-align: left;
+  font-size: 14px;
+}
+// 分页为蓝色调
+/deep/.el-pagination .el-pager li.active{
+  background-color: #0295ff!important;  
+}
+/deep/.el-pagination.is-background .el-pager li:not(.disabled):hover{
+  color: #0295ff;
+}
+/deep/.el-input__inner:focus{
+  outline: none;
+  border-color: #0295ff;
+}
+// 复选框颜色覆盖
+/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: #0295ff;
+    border-color: #007bd3;
+}
+/deep/.el-checkbox__inner:hover{
+  border-color: #007bd3;
+}
+</style>

src/pages/plantGuard/page6.vue

@@ -0,0 +1,322 @@
+<!-- 角色管理 -->
+<template>
+  <div class="innerMargin">
+    <el-card class="box-card">
+      <div style="cursor: default">
+          <template>
+            <!-- 添加角色按钮 -->
+            <el-row>
+                <el-col>
+                  <el-button type="blueInfo" @click="AddRoleDialogVisible=true">添加角色</el-button>
+                </el-col>
+            </el-row>
+                  <!-- 角色列表 -->
+            <el-table :data="roleList" border stripe>
+            <!-- 索引列 -->
+            <el-table-column type="index" label="#"></el-table-column>
+            <el-table-column label="角色名称" prop="role_name"></el-table-column>
+            <el-table-column label="角色描述" prop="role_message"></el-table-column>
+            <el-table-column label="操作" width="300px">
+                <template slot-scope="scope">
+                  <el-button type="blueInfo" plain icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
+                  <el-button type="redInfo" plain icon="el-icon-delete" size="mini" @click="removeRoleById(scope.row)">删除</el-button>
+                  <el-button
+                  type="greenInfo"
+                  icon="el-icon-setting"
+                  size="mini"
+                  plain
+                  @click="showSetRightDialog(scope.row)"
+                  >分配权限</el-button>
+                </template>
+            </el-table-column>
+            </el-table>
+          </template>
+          <!-- 添加角色对话框 -->
+          <el-dialog title="添加角色" :visible.sync="AddRoleDialogVisible" width="40%" @close="addRoleDialogClosed">
+            <el-form
+            :model="addRoleForm"
+            ref="addRoleFormRef"
+            :rules="addRoleFormRules"
+            label-width="100px"
+            >
+            <el-form-item label="角色名称" prop="roleName">
+                <el-input v-model="addRoleForm.roleName"></el-input>
+            </el-form-item>
+            <el-form-item label="角色描述" prop="roleDesc">
+                <el-input v-model="addRoleForm.roleDesc"></el-input>
+            </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+            <el-button type="grayInfo" @click="AddRoleDialogVisible = false">取 消</el-button>
+            <el-button type="blueInfo" @click="addRoles">确 定</el-button>
+            </span>
+          </el-dialog>
+          <!-- 编辑角色对话框 -->
+          <el-dialog title="编辑角色" :visible.sync="editRoleDialogVisible" width="40%" @close="editRoleDialogClosed">
+            <el-form
+            :model="editRoleForm"
+            ref="editRoleFormRef"
+            :rules="editRoleFormRules"
+            label-width="100px"
+            >
+            <el-form-item label="角色名称" prop="roleName">
+                <el-input v-model="editRoleForm.roleName"></el-input>
+            </el-form-item>
+            <el-form-item label="角色描述" prop="roleDesc">
+                <el-input v-model="editRoleForm.roleDesc"></el-input>
+            </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+            <el-button type="grayInfo" @click="editRoleDialogVisible = false">取 消</el-button>
+            <el-button type="blueInfo" @click="editRoles">确 定</el-button>
+            </span>
+          </el-dialog>
+          <!-- 分配权限 -->
+          <el-dialog
+            title="分配权限"
+            :visible.sync="setRightDialogVisible"
+            width="50%"
+            @close="setRightDialogClosed"
+          > 
+            <div style="height:500px;overflow-y:scroll">
+              <el-tree
+              :data="rightsList"
+              :props="treeProps"
+              ref="treeRef"
+              show-checkbox
+              node-key="pur_id"
+              default-expand-all
+              :default-checked-keys="defKeys"
+              ></el-tree>
+            </div>
+            
+            <span slot="footer" class="dialog-footer">
+            <el-button type="grayInfo" @click="setRightDialogVisible = false">取 消</el-button>
+            <el-button type="blueInfo" @click="allotRights">确 定</el-button>
+            </span>
+          </el-dialog>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+   export default {
+      data(){
+         return {
+            AddRoleDialogVisible:false,
+            editRoleDialogVisible:false,
+            setRightDialogVisible:false,
+            roleList:[],
+            rightsList:[],
+            // 当前即将分配权限的Id
+            roleId:'',
+            //  树形控件的属性绑定对象
+            treeProps: {
+               label: 'purview_name',
+               children: 'children'
+            },
+            //  默认选中节点ID值
+            defKeys: [],
+            // 添加角色表单
+            addRoleForm: {
+               roleName:'',
+               roleDesc:''
+            },
+            // 添加角色表单验证
+            addRoleFormRules: {
+               roleName: [
+                  { required: true, message: '请输入角色名称', trigger: 'blur' }
+               ],
+               roleDesc: [
+                  { required: true, message: '请输入角色描述', trigger: 'blur' }
+               ]
+            },
+            // 编辑角色信息
+            editId:'',
+            editRoleForm: {
+               roleName:'',
+               roleDesc:''
+            },
+            editRoleFormRules: {
+               roleName: [
+                  { required: true, message: '请输入角色名称', trigger: 'blur' }
+               ],
+               roleDesc: [
+                  { required: true, message: '请输入角色描述', trigger: 'blur' }
+               ]
+            },
+         }
+      },
+      created(){
+         this.getRoleList();
+      },
+      methods:{
+         getRoleList(){
+            this.$axios({
+               method:'POST',
+               url:'/api/api_gateway?method=user.perms.role_list'
+            }).then(res=>{
+               if(res.data.message==""){
+                  this.roleList=res.data.data;
+               }
+            })
+         },
+         showEditDialog(row){
+            this.editId=row.role_id;
+            this.$axios({
+               method:'POST',
+               url:'/api/api_gateway?method=user.perms.role_list',
+               data:this.qs.stringify({
+                  role_id:row.role_id,
+               })
+            }).then(res=>{
+               if(res.data.message==""){
+                  this.editRoleForm.roleName = res.data.data[0].role_name;
+                  this.editRoleForm.roleDesc = res.data.data[0].role_message;
+               }else{
+                  this.$message.error('查询角色信息失败！')
+               }
+            })
+            this.editRoleDialogVisible = true
+         },
+         removeRoleById(row){
+            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
+                  confirmButtonText: '确定',
+                  cancelButtonText: '取消',
+                  type: 'warning'
+               }).then(() => {
+                  this.$axios({
+                     method:'POST',
+                     url:'/api/api_gateway?method=user.perms.add_role',
+                     data:this.qs.stringify({
+                        make_type:4,
+                        role_id:row.role_id,
+                        role_name:row.role_name
+                     })
+                  }).then(res=>{
+                     if(res.data.message==""){
+                        this.$message.success('删除角色成功！')
+                        this.getRoleList();
+                     }else{
+                        this.$message.error(res.data.message)
+                     }
+                  })
+               }).catch(() => {
+                  this.$message({
+                     type: 'info',
+                     message: '已取消删除'
+                  });          
+            });
+         },
+         showSetRightDialog(role){
+            this.roleId=role.role_id;
+            this.$axios({
+               method:'POST',
+               url:'/api/api_gateway?method=user.perms.all_pur_list',
+            }).then(res=>{
+               if(res.data.message==""){
+                  this.rightsList=res.data.data;
+               }else{
+                  this.$message.error('获取权限列表失败!')
+               }
+            })
+            this.defKeys = [];
+            this.getLeafkeys(role,this.defKeys);
+            this.setRightDialogVisible=true;
+         },
+         getLeafkeys(node,arr){
+            if(!node.children){
+               return arr.push(node.pur_id) 
+            }
+            node.children.forEach(item=>this.getLeafkeys(item,arr))
+         },
+         setRightDialogClosed(){
+            this.rightsList=[];
+         },
+         addRoleDialogClosed(){
+            this.$refs.addRoleFormRef.resetFields();
+         },
+         editRoleDialogClosed(){
+            this.$refs.editRoleFormRef.resetFields();
+         },
+         // 添加角色
+         addRoles(){
+            this.$refs.addRoleFormRef.validate(valid=>{
+               if(!valid) return
+               this.$axios({
+                  method:'POST',
+                  url:'/api/api_gateway?method=user.perms.add_role',
+                  data:this.qs.stringify({
+                     role_name:this.addRoleForm.roleName,
+                     role_message :this.addRoleForm.roleDesc,
+                     make_type:1 
+                  })
+               }).then(res=>{
+                  if(res.data.message==""){
+                     this.$message.success('添加角色成功！')
+                  }else{
+                     this.$message.error('添加角色失败！')
+                  }
+                  this.AddRoleDialogVisible=false;
+                  this.getRoleList()
+                  })
+               })
+         },
+         editRoles(){
+            this.$refs.editRoleFormRef.validate(valid=>{
+               if(!valid){
+                  return false;
+               }
+            })
+            this.$axios({
+               method:'POST',
+               url:'/api/api_gateway?method=user.perms.add_role',
+               data:this.qs.stringify({
+                  role_name:this.editRoleForm.roleName,
+                  role_message :this.editRoleForm.roleDesc,
+                  role_id:this.editId,
+                  make_type:3 
+               })
+            }).then(res=>{
+               if(res.data.message==""){
+                  this.$message.success('编辑角色成功！')
+               }else{
+                  this.$message.error('编辑角色失败！')
+               }
+                this.editRoleDialogVisible=false;
+                this.getRoleList()
+            })
+         },
+         allotRights(){
+            // 获得当前选中的Id
+            const keys = [
+               ...this.$refs.treeRef.getCheckedKeys(),
+               ...this.$refs.treeRef.getHalfCheckedKeys()
+               ]
+            const idStr = keys.join(',');
+            this.$axios({
+               method:'POST',
+               url:'/api/api_gateway?method=user.perms.allot_perm',
+               data:this.qs.stringify({
+                  role_id:this.roleId,
+                  pur_id:idStr
+               })
+            }).then(res=>{
+               if(res.data.message==""){
+                  this.$message.success('分配权限成功!')
+                  this. getRoleList()  
+               }
+               this.setRightDialogVisible=false;  
+            })
+         }
+      }
+   }
+</script>
+
+<style lang='less' scoped>
+/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: #0295ff;
+    border-color: #0685e1;
+}
+</style>

src/pages/plantGuard/page7.vue

@@ -0,0 +1,811 @@
+<!-- 主题订制 -->
+<template>
+   <div class="innerMargin">
+      <el-card class="box-card">
+         <div style="cursor: default">
+            <div class="search-box">
+               <div class="filter-box">
+                  <el-input
+                     style="cursor: pointer"
+                     size="small"
+                     placeholder="请输入主题名称"
+                     v-model="userGroupName"
+                     clearable
+                     @change="searchData()"
+                  >
+                     <i slot="suffix" class="el-input__icon el-icon-search"></i>
+                  </el-input>
+                  <el-date-picker
+                     style="cursor: pointer"
+                     size="small"
+                     v-model="timeRange"
+                     type="daterange"
+                     range-separator="至"
+                     start-placeholder="开始日期"
+                     end-placeholder="结束日期"
+                     @change="dateData"
+                  ></el-date-picker>
+               </div>
+               <el-button type="blueInfo" size="mini" @click="addUserGroup()"
+                  >新增主题</el-button
+               >
+            </div>
+            <el-row :gutter="10">
+               <el-col
+                  :xs="24"
+                  :sm="24"
+                  :md="12"
+                  :lg="6"
+                  :xl="4"
+                  v-for="item in userGroupList"
+                  :key="item.id"
+               >
+                  <el-card class="box-card pad0">
+                     <div class="img-box">
+                        <span class="logo-box">
+                           <template v-if="item.role_logo == ''">
+                              <img
+                                 :src="require('@/assets/images/equipdistribute/user.png')"
+                              />
+                           </template>
+                           <img v-else :src="item.role_logo" alt="" class="" />
+                           <!-- <img v-else :src=" $host + item.role_logo" alt="" class=""> -->
+                        </span>
+                        <p>{{ item.role_describe }}</p>
+                     </div>
+                     <div class="detail">
+                        <p>
+                           创建时间
+                           <span>{{ (item.role_cre_time * 1000) | formatTime }}</span>
+                        </p>
+                        <p>
+                           首页主题
+                           <span>{{ item.role_header }}</span>
+                        </p>
+                     </div>
+                     <div class="bottom">
+                        <span @click="viewDetail(item.role_describe)">
+                           <i class="el-icon-document"></i> 查看详情
+                        </span>
+                        <span @click="edit(item.role_describe)">
+                           <i class="el-icon-edit-outline"></i> 编辑
+                        </span>
+                     </div>
+                  </el-card>
+               </el-col>
+            </el-row>
+            <!-- 暂无数据 -->
+            <div
+               class="expertDiagnosis_referral_units_not"
+               v-if="userGroupList.length <= 0"
+            >
+               <img
+                  :src="$imghost + zanwu"
+                  alt
+                  class="expertDiagnosis_referral_units_notImg"
+               />
+            </div>
+            <el-pagination
+               v-if="userGroupList.length > 0"
+               :current-page="page"
+               background
+               layout="prev, pager, next"
+               :total="totalNum"
+               :page-size="12"
+               @current-change="changePage"
+            ></el-pagination>
+            <!-- 详情对话框 -->
+            <el-dialog
+               title="详情"
+               :visible.sync="detailDialogVisible"
+               class="detailDialog"
+               width="30%"
+            >
+               <!-- <p>
+                  <span>主题名称 :</span>
+                  <span>{{ userDetail.role_cre_user }}</span>
+               </p> -->
+               <p>
+                  <span>首页主题 :</span>
+                  <span>{{ userDetail.role_header }}</span>
+               </p>
+               <p>
+                  <span>创建时间 :</span>
+                  <span>{{ (userDetail.role_cre_time * 1000) | formatTime }}</span>
+               </p>
+               <p>
+                  <span>首页logo :</span>
+                  <span>
+                     <img
+                        style="width: 3rem; height: 2.2rem"
+                        :src="userDetail.role_logo"
+                     />
+                  </span>
+               </p>
+               <p>
+                  <span>首页footer :</span>
+                  <span>{{ userDetail.role_footer }}</span>
+               </p>
+            </el-dialog>
+            <!-- 编辑对话框 -->
+            <el-dialog
+               title="编辑"
+               :visible.sync="editDialogVisible"
+               class="editDialog"
+               width="30%"
+            >
+               <el-form
+                  ref="form"
+                  label-position="left"
+                  :model="userDetail"
+                  label-width="100px"
+               >
+                  <el-form-item label="首页logo : ">
+                     <el-upload
+                        class="avatar-uploader"
+                        ref="upload"
+                        :http-request="ImgUploadSectionFile"
+                        :with-credentials="true"
+                        :auto-upload="false"
+                        accept=".png, .jpg, .gif, .svg"
+                        action
+                        :on-change="handleChange"
+                        list-type="list"
+                        :file-list="fileList"
+                        multiple
+                        :show-file-list="false"
+                     >
+                        <img
+                           v-if="userDetail.role_logo"
+                           :src="userDetail.role_logo"
+                           class="avatar"
+                        />
+                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                     </el-upload>
+                  </el-form-item>
+                  <el-form-item label="主题 : ">
+                     <el-input v-model="userDetail.role_header"></el-input>
+                  </el-form-item>
+                  <el-form-item label="版权 : ">
+                     <el-input
+                        type="textarea"
+                        :rows="2"
+                        v-model="userDetail.role_footer"
+                     ></el-input>
+                  </el-form-item>
+               </el-form>
+               <span slot="footer" class="dialog-footer">
+                  <el-button type="grayInfo" plain @click="editDialogVisible = false">取 消</el-button>
+                  <el-button type="blueInfo" @click=";(editDialogVisible = false), addr()"
+                     >保 存</el-button
+                  >
+               </span>
+            </el-dialog>
+            <!-- 新增主题 -->
+            <el-dialog
+               title="新增主题"
+               :visible.sync="addUserGroupDialogVisible"
+               class="editDialog"
+               width="25%"
+            >
+               <el-form ref="form" :model="adduserGroupForm" label-width="100px">
+                  <el-form-item label="主题名称">
+                     <el-input v-model="adduserGroupForm.userGroupName"></el-input>
+                  </el-form-item>
+               </el-form>
+               <span slot="footer" class="dialog-footer">
+                  <el-button type="grayInfo" plain @click="addUserGroupDialogVisible = false">取 消</el-button>
+                  <el-button
+                     type="blueInfo"
+                     @click="listAddr()"
+                     >确 定</el-button
+                  >
+               </span>
+            </el-dialog>
+
+            <!-- vueCropper 剪裁图片实现-->
+            <el-dialog
+               title="图片剪裁"
+               :close-on-click-modal="false"
+               :visible.sync="cropperVisible"
+               width="500px"
+            >
+               <div class="cropper-content">
+                  <div style="width: 100%; height: 300px">
+                     <vue-cropper
+                        ref="cropper"
+                        :img="option.img"
+                        :output-size="option.size"
+                        :output-type="option.outputType"
+                        :info="true"
+                        :full="option.full"
+                        :fixed="option.fixed"
+                        :fixed-number="option.fixedNumber"
+                        :can-move="option.canMove"
+                        :can-move-box="option.canMoveBox"
+                        :fixed-box="option.fixedBox"
+                        :original="option.original"
+                        :auto-crop="option.autoCrop"
+                        :auto-crop-width="option.autoCropWidth"
+                        :auto-crop-height="option.autoCropHeight"
+                        :center-box="option.centerBox"
+                        :high="option.high"
+                        mode="cover"
+                        :max-img-size="option.max"
+                     ></vue-cropper>
+                  </div>
+               </div>
+               <div slot="footer" class="dialog-footer">
+                  <el-button type="grayInfo" plain @click="cropperVisible = false">取 消</el-button>
+                  <el-button type="blueInfo" @click="cropperFinish">确认</el-button>
+               </div>
+            </el-dialog>
+         </div>
+      </el-card>
+   </div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			zanwu: '/images/expertDiagnosis/zanwu.png',
+			// 裁剪组件的基础配置option
+			cropperVisible: false,
+			option: {
+				img: null,
+				size: 1,
+				full: false,
+				outputType: 'png',
+				canMove: true,
+				fixed: false,
+				// fixedNumber: [16, 9],
+				// fixedNumber: [7, 6],
+				fixedBox: false,
+				original: false,
+				canMoveBox: true,
+				autoCrop: true,
+				// 只有自动截图开启 宽度高度才生效
+				autoCropWidth: 160,
+				autoCropHeight: 150,
+				centerBox: false,
+				high: true,
+				max: 99999
+			},
+			userGroupName: '',
+			timeRange: '',
+			fullHeight: document.documentElement.clientHeight, //自适应高度
+			userGroupList: [],
+			userDetail: {},
+			detailDialogVisible: false,
+			editDialogVisible: false,
+			addUserGroupDialogVisible: false,
+			totalNum: 0,
+			adduserGroupForm: {
+				userGroupName: ''
+			},
+			fileList: [],
+			imageSrc: '', //后端返回的图片链接
+			Str: '', //转换后的开始时间
+			end: '', //转换后的结束时间
+			page: 1,
+			ulrData: '',
+			img_file: ''
+		}
+	},
+	watch: {
+		fullHeight(val) {
+			//监控浏览器高度变化
+			if (!this.timer) {
+				this.fullHeight = val
+				this.timer = true
+				let that = this
+				setTimeout(function () {
+					//防止过度调用监测事件，导致卡顿
+					that.timer = false
+				}, 400)
+			}
+		},
+
+		// 编辑弹框监测
+		editDialogVisible(val) {
+			if (val == true) {
+				//显示
+				console.log('显示')
+			} else if (val == false) {
+				// 关闭
+				this.$refs.upload.clearFiles() //清空
+			}
+		},
+
+		// 新增主题监测
+		addUserGroupDialogVisible(val) {
+			if (val == false) {
+				this.adduserGroupForm.userGroupName = ''
+			}
+		}
+	},
+	methods: {
+		//动态获取浏览器高度
+		get_boderHeight() {
+			const that = this
+			window.onresize = () => {
+				return (() => {
+					window.fullHeight = document.documentElement.clientHeight
+					that.fullHeight = window.fullHeight - 128
+					console.log(that.fullHeight)
+				})()
+			}
+		},
+
+		// 查看详情
+		viewDetail(name) {
+			let that = this
+			let postData = that.qs.stringify({
+				role: name, //名称
+				req: 'details', //详情数据回显
+				img_file: '', //首页图片
+				role_footer: '', //版权
+				role_header: '', //主题
+				role_logo: '' //首页图片链接
+			})
+			that
+				.$axios({
+					method: 'post',
+					url: 'api/api_gateway?method=pest.warning_record.rolemanage_img',
+					data: postData
+				})
+				.then((res) => {
+					if (res.data.data.nums !== 0) {
+						this.userDetail = res.data.data
+						that.detailDialogVisible = true
+					}
+				})
+				.catch((err) => {
+					console.log(err)
+				})
+		},
+
+		//编辑
+		edit(name) {
+			let that = this
+			let postData = that.qs.stringify({
+				role: name, //名称
+				req: 'details', //详情数据回显
+				img_file: '', //首页图片
+				role_footer: '', //版权
+				role_header: '', //主题
+				role_logo: '' //首页图片链接
+			})
+			that
+				.$axios({
+					method: 'post',
+					url: 'api/api_gateway?method=pest.warning_record.rolemanage_img',
+					data: postData
+				})
+				.then((res) => {
+					if (res.data.data.nums !== 0) {
+						this.userDetail = res.data.data
+						this.img_file = res.data.data.role_logo
+						that.editDialogVisible = true
+					}
+				})
+				.catch((err) => {
+					console.log(err)
+				})
+		},
+
+		// 新增主题
+		addUserGroup() {
+			this.addUserGroupDialogVisible = true
+		},
+		//新增主题确定按钮
+		listAddr() {
+         let that = this
+         if(!that.adduserGroupForm.userGroupName){
+            return
+         }
+         this.addUserGroupDialogVisible = false
+			let postData = that.qs.stringify({
+				// add_role: that.adduserGroupForm.userGroupName, //角色描述
+				add_role: 'add', //角色描述
+				role_describe: that.adduserGroupForm.userGroupName,
+				page: this.page
+			})
+			that
+				.$axios({
+					method: 'post',
+					url: 'api/api_gateway?method=pest.warning_record.rolemanage_view',
+					data: postData
+				})
+				.then((res) => {
+					if (res.data.data.data == 200) {
+						that.$message({
+							message: '添加新主题成功',
+							type: 'success',
+							duration: 1500
+						})
+						var timeoutId = setTimeout(function () {
+							that.listData(1, '') //列表数据请求
+						}, 1500)
+					} else if (res.data.data.data == 201) {
+						that.$message.error({
+							message: '该主题名称已存在',
+							duration: 1500
+						})
+					}
+				})
+				.catch((err) => {
+					console.log(err)
+				})
+		},
+
+		// // 上传过图片编辑保存
+		ImgUploadSectionFile(param) {
+			let that = this
+			let formData = new FormData()
+			var dataUrl = that.dataURLtoFile(that.ulrData)
+			var dataUrlA = that.blobToFile(that.ulrData, param.file.name)
+			formData.append('img_file', dataUrlA) //首页图片
+			formData.append('role', that.userDetail.role_describe) //角色描述
+			formData.append('req', 'img') //上传图片
+			that
+				.$axios({
+					method: 'post',
+					url: 'api/api_gateway?method=pest.warning_record.rolemanage_img',
+					data: formData
+				})
+				.then((res) => {
+					if (res.data.data.src !== '0') {
+						that.imageSrc = res.data.data.src
+						that.userDetail.role_logo = res.data.data.src
+					} else {
+						that.$message.error({
+							message: '上传图片失败，请重试',
+							duration: 1500
+						})
+					}
+				})
+				.catch((err) => {
+					console.log(err)
+				})
+			that.clearUploadBox()
+		},
+
+		clearUploadBox() {
+			this.userDetail.role_logo = ''
+			this.img_file = ''
+		},
+		handleChange(file, fileList) {
+			if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(file.raw.name)) {
+				alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
+				return false
+			}
+			let reader = new FileReader()
+			reader.onload = (e) => {
+				let data
+				if (typeof e.target.result === 'object') {
+					// 把Array Buffer转化为blob 如果是base64不需要
+					data = window.URL.createObjectURL(new Blob([e.target.result]))
+				} else {
+					data = e.target.result
+				}
+				this.option.img = data
+			}
+			this.cropperVisible = true
+			reader.readAsArrayBuffer(file.raw)
+			this.fileList = fileList
+		},
+		//转成blob
+		blobToFile(Blob, fileName) {
+			Blob.lastModifiedDate = new Date()
+			Blob.name = fileName
+			return Blob
+		},
+		cropperFinish() {
+			var that = this
+			that.$refs.cropper.getCropData((data) => {
+				that.userDetail.role_logo = data
+				that.ulrData = data
+				that.cropperVisible = false
+				that.btnShow = true
+				that.$refs.upload.submit()
+			})
+		},
+
+		// base64转换为blob文件类型
+		dataURLtoFile(dataurl) {
+			var arr = dataurl.split(','),
+				mime = arr[0].match(/:(.*?);/)[1],
+				bstr = atob(arr[1]),
+				n = bstr.length,
+				u8arr = new Uint8Array(n)
+			while (n--) {
+				u8arr[n] = bstr.charCodeAt(n)
+			}
+			return new Blob([u8arr], { type: mime })
+		},
+
+		// blob转换为file文件类型
+		blobToFile(dataurl, filename) {
+			var arr = dataurl.split(','),
+				mime = arr[0].match(/:(.*?);/)[1],
+				bstr = atob(arr[1]),
+				n = bstr.length,
+				u8arr = new Uint8Array(n)
+			while (n--) {
+				u8arr[n] = bstr.charCodeAt(n)
+			}
+			return new File([u8arr], filename, { type: mime })
+		},
+
+		// 编辑保存
+		addr() {
+			this.upDataList() //上传数据
+		},
+		// 在没有上传图片的情况下编辑上传数据
+		upDataList() {
+			let that = this
+			var img = that.img_file == '' ? that.imageSrc : that.img_file
+			let postData = that.qs.stringify({
+				req: 'add', //主题信息保存
+				img_file: '', //首页图片
+				role_footer: that.userDetail.role_footer, //版权
+				role_header: that.userDetail.role_header, //主题
+				role_logo: img, //首页图片链接
+				role: that.userDetail.role_describe //角色描述
+			})
+			console.log(that.img_file)
+			that
+				.$axios({
+					method: 'post',
+					url: 'api/api_gateway?method=pest.warning_record.rolemanage_img',
+					data: postData
+				})
+				.then((res) => {
+					if (res.data.data.data == 200) {
+						that.$message({
+							message: '编辑成功',
+							type: 'success',
+							duration: 1500
+						})
+						that.listData(1, '') //列表数据请求
+					} else if (res.data.data.data == 400) {
+						that.$message.error({
+							message: '编辑失败，请重试',
+							duration: 1500
+						})
+					}
+				})
+				.catch((err) => {
+					console.log(err)
+				})
+		},
+
+		// 分页
+		changePage(e) {
+			this.listData(e, '')
+		},
+
+		// 列表数据请求
+		listData(page, add_role) {
+			let that = this
+			let postData = that.qs.stringify({
+				page: page, //页码
+				add_role: add_role //角色描述
+			})
+			that
+				.$axios({
+					method: 'post',
+					url: 'api/api_gateway?method=pest.warning_record.rolemanage_view',
+					data: postData
+				})
+				.then((res) => {
+					var data = res.data.data
+					that.userGroupList = data.data
+					var nums = data.nums
+					that.totalNum = nums
+				})
+				.catch((err) => {
+					console.log(err)
+				})
+		},
+
+		//搜索主题名称
+		searchData() {
+			let that = this
+			console.log(that.timeRange)
+			let postData = that.qs.stringify({
+				page: this.page, //页数
+				role: that.userGroupName, //名称
+				time_begin: that.Str, //开始时间
+				time_end: that.end //结束时间
+			})
+			that
+				.$axios({
+					method: 'post',
+					url: 'api/api_gateway?method=pest.warning_record.rolemanage_search',
+					data: postData
+				})
+				.then((res) => {
+					var data = res.data.data.data
+					that.userGroupList = data
+					var nums = res.data.data.nums
+					that.totalNum = nums
+				})
+				.catch((err) => {
+					console.log(err)
+				})
+		},
+
+		// 时间筛选
+		dateData() {
+			let that = this
+			// 开始时间
+			let date = new Date(that.timeRange[0])
+			let Str =
+				date.getFullYear() +
+				'-' +
+				(date.getMonth() + 1) +
+				'-' +
+				date.getDate() +
+				' ' +
+				date.getHours() +
+				':' +
+				date.getMinutes() +
+				':' +
+				date.getSeconds()
+			Str = Str.replace(' 0:0:0', '')
+			that.Str = Str
+
+			// 结束时间
+			let dateA = new Date(that.timeRange[1])
+			let end =
+				dateA.getFullYear() +
+				'-' +
+				(dateA.getMonth() + 1) +
+				'-' +
+				dateA.getDate() +
+				' ' +
+				dateA.getHours() +
+				':' +
+				dateA.getMinutes() +
+				':' +
+				dateA.getSeconds()
+			end = end.replace(' 0:0:0', '')
+			that.end = end
+
+			let postData = that.qs.stringify({
+				page: this.page, //页数
+				role: that.userGroupName, //名称
+				time_begin: Str, //开始时间
+				time_end: end //结束时间
+			})
+			that
+				.$axios({
+					method: 'post',
+					url: 'api/api_gateway?method=pest.warning_record.rolemanage_search',
+					data: postData
+				})
+				.then((res) => {
+					var data = res.data.data.data
+					that.userGroupList = data
+					var nums = res.data.data.nums
+					that.totalNum = nums
+				})
+				.catch((err) => {
+					console.log(err)
+				})
+		}
+	},
+	created() {},
+	mounted() {
+		this.get_boderHeight() //自适应
+		this.listData(this.page, '') //列表数据请求
+	}
+}
+</script>
+
+<style lang='less' scoped>
+.search-box {
+	display: flex;
+	justify-content: flex-left;
+	justify-content: space-between;
+	margin-bottom: 10px;
+	.filter-box > div {
+		margin-right: 15px;
+	}
+	.el-input {
+		width: 200px;
+	}
+	.el-date-editor--daterange {
+		width: 222px;
+	}
+}
+.el-card {
+	.img-box {
+		text-align: center;
+		border-bottom: 1px solid #e1e1e1;
+		padding: 15px 0;
+		.logo-box {
+			display: inline-block;
+			width: 60px;
+			height: 60px;
+			overflow: hidden;
+			border-radius: 100%;
+			background: #ddd;
+			img {
+				width: 100%;
+				height: 100%;
+				border-radius: 50px;
+			}
+		}
+		p {
+			font-size: 14px;
+			font-weight: 800;
+			width: 70%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			margin: 10px auto 0;
+		}
+	}
+	.detail {
+		border-bottom: 1px solid #e1e1e1;
+		padding: 10px 0;
+		padding: 0 20px;
+		p {
+			display: flex;
+			justify-content: space-between;
+			font-size: 13px;
+			line-height: 34px;
+			color: #666;
+			padding: 0 0px;
+		}
+	}
+	.bottom {
+		display: flex;
+		font-size: 13px;
+		color: #666;
+		line-height: 50px;
+		span {
+			flex: 1;
+			text-align: center;
+			cursor: pointer;
+			i {
+				font-size: 16px;
+			}
+		}
+		span:first-child {
+			border-right: 1px solid #e1e1e1;
+		}
+	}
+}
+.detailDialog {
+	p {
+		display: flex;
+		padding: 10px 0;
+		span:nth-child(1) {
+			width: 100px;
+			margin-right: 10px;
+			text-align: left;
+		}
+		span:nth-child(2) {
+			flex: 1;
+			text-align: left;
+		}
+	}
+}
+// 分页为蓝色调
+/deep/.el-pagination .el-pager li.active{
+  background-color: #0295ff!important;  
+}
+/deep/.el-pagination.is-background .el-pager li:not(.disabled):hover{
+  color: #0295ff;
+}
+/deep/.el-input__inner:focus{
+  outline: none;
+  border-color: #0295ff;
+}
+
+</style>

src/pages/plantGuard/page8.vue

@@ -0,0 +1,695 @@
+<!-- 主题订制 -->
+<template>
+  <div style="cursor: default">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>设备管理</el-breadcrumb-item>
+      <el-breadcrumb-item>设备列表</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="search-box">
+      <div class="filter-box">
+        <el-select
+          size="small"
+          v-model="queryInfo.device_type_id"
+          clearable
+          placeholder="请选择设备类型"
+          @change="searchChange()"
+        >
+          <el-option label="杀虫灯" value="2"></el-option>
+          <el-option label="测报灯" value="3"></el-option>
+          <el-option label="智能性诱" value="4"></el-option>
+          <el-option label="环境监测" value="5"></el-option>
+          <el-option label="监控设备" value="6"></el-option>
+          <el-option label="孢子仪" value="7"></el-option>
+          <el-option label="性诱设备" value="8"></el-option>
+          <el-option label="糖醋测报" value="9"></el-option>
+        </el-select>
+        <el-input
+          style="cursor: pointer"
+          size="small"
+          clearable
+          @change="searchChange()"
+          placeholder="请输入设备ID"
+          v-model="queryInfo.f_id"
+        >
+          <i slot="suffix" class="el-input__icon el-icon-search"></i>
+        </el-input>
+      </div>
+      <el-date-picker
+        style="cursor: pointer"
+        size="small"
+        @change="DateChange()"
+        v-model="timeRange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></el-date-picker>
+    </div>
+    <el-row :gutter="10">
+      <el-col
+        :xs="24"
+        :sm="24"
+        :md="12"
+        :lg="6"
+        :xl="4"
+        v-for="item in dataList"
+        :key="item.id"
+      >
+        <el-card class="box-card pad0">
+          <i class="del-icon el-icon-delete" @click="delEquip(item.d_id)"></i>
+          <div class="img-box">
+            <template v-if="item.device_type_id == '2'">
+              <img src="@/assets/images/equipdistribute/scdIconOn.png" />
+              <p>杀虫灯</p>
+            </template>
+            <template v-if="item.device_type_id == '3'">
+              <img src="@/assets/images/equipdistribute/cbdIconOn.png" />
+              <p>测报灯</p>
+            </template>
+            <template v-if="item.device_type_id == '4'">
+              <img src="@/assets/images/equipdistribute/znxyOn.png" />
+              <p>智能性诱</p>
+            </template>
+            <template v-if="item.device_type_id == '5'">
+              <img src="@/assets/images/equipdistribute/hjjcIconOn.png" />
+              <p>环境监测</p>
+            </template>
+            <template v-if="item.device_type_id == '6'">
+              <img src="@/assets/images/equipdistribute/jkIconOn.png" />
+              <p>监控设备</p>
+            </template>
+            <template v-if="item.device_type_id == '7'">
+              <img src="@/assets/images/equipdistribute/bzyIconOn.png" />
+              <p>孢子仪</p>
+            </template>
+            <template v-if="item.device_type_id == '8'">
+              <img src="@/assets/images/equipdistribute/xyOn.png" />
+              <p>性诱设备</p>
+            </template>
+            <template v-if="item.device_type_id == 9">
+              <img src="@/assets/images/equipdistribute/tccbOn.png" />
+              <p>糖醋测报</p>
+            </template>
+          </div>
+          <div class="detail">
+            <p>
+              设备ID
+              <span>{{ item.device_id }}</span>
+            </p>
+            <p>
+              适配用户
+              <span>{{ item.device_user || "无" }}</span>
+            </p>
+            <p>
+              设备名称
+              <span>{{ item.device_name || "无" }}</span>
+            </p>
+            <p>
+              位置
+              <span>{{ item.device_location || "无" }}</span>
+            </p>
+            <p>
+              设备添加时间
+              <span>{{ (item.creat_time * 1000) | formatTime }}</span>
+            </p>
+          </div>
+          <div class="bottom">
+            <span @click="modifyName(item.device_id, item.device_name)">
+              <i class="el-icon-edit-outline"></i> 修改名称
+            </span>
+            <span @click="addPosition(item.device_id, item.lng, item.lat)">
+              <i class="el-icon-location-outline"></i> 添加位置
+            </span>
+            <span @click="addFault(item.device_id, item.device_type_id)">
+              <i class="el-icon-edit-outline"></i> 故障上报
+            </span>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 暂无数据 -->
+    <div class="expertDiagnosis_referral_units_not" v-if="dataList.length <= 0">
+      <img
+        :src="$imghost + zanwu"
+        alt
+        class="expertDiagnosis_referral_units_notImg"
+      />
+    </div>
+    <el-pagination
+      v-if="dataList.length > 0"
+      background
+      layout="prev, pager, next"
+      :page-size="12"
+      :total="totalNum"
+      @current-change="changePage"
+    ></el-pagination>
+    <!-- 添加定位弹框 -->
+    <el-dialog
+      class="map_dialog"
+      title="添加定位"
+      v-if="addLocationDialogVisible"
+      :visible.sync="addLocationDialogVisible"
+      width="800px"
+      @closed="addLocationDialogClosed"
+    >
+      <el-form
+        :inline="true"
+        :model="locationForm"
+        class="demo-form-inline"
+        size="mini"
+      >
+        <el-form-item label="经度">
+          <el-input clearable v-model="locationForm.lng"></el-input>
+        </el-form-item>
+        <el-form-item label="维度">
+          <el-input clearable v-model="locationForm.lat"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="mini" @click="locationSearch"
+            >定位</el-button
+          >
+        </el-form-item>
+        <el-form-item label="">
+          <el-input
+            placeholder="请输入地区检索"
+            v-model="addr"
+            clearable
+            @change="addrChange()"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <el-amap
+        class="bm-view"
+        vid="amapDemo"
+        :center="center"
+        :amap-manager="amapManager"
+        :zoom="mapZoom"
+        :plugin="plugin"
+        :events='mapEvents'
+      >
+        <el-amap-marker vid="component-marker" v-if="point.length" :position="point"  ></el-amap-marker>
+      </el-amap>
+      <!-- <baidu-map
+        class="Bmap"
+        :center="center"
+        :zoom="mapZoom"
+        :scroll-wheel-zoom="true"
+        @ready="handlerBMap"
+        @click="locationPoint"
+      >
+        <bm-marker :position="point" :dragging="true"></bm-marker>
+      </baidu-map> -->
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="addLocationDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addLocationSubm">确 定</el-button>
+      </span>
+    </el-dialog>
+    <!-- 故障上报  -->
+    <el-dialog
+      class="map_dialog"
+      title="故障上报"
+      v-if="addFaultDialogVisible"
+      :visible.sync="addFaultDialogVisible"
+      width="500px"
+      @closed="addLocationDialogClosed"
+    >
+      <el-form
+        ref="editFaultform"
+        :rules="editFaultrules"
+        :model="editFault"
+        label-width="80px"
+      >
+        <el-form-item label="设备ID">
+          <el-input v-model="editFault.imei" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="联系人" prop="user">
+          <el-input v-model="editFault.user"></el-input>
+        </el-form-item>
+        <el-form-item label="联系电话" prop="tel">
+          <el-input
+            type="text"
+            maxlength="11"
+            v-model="editFault.tel"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="故障原因" prop="detail">
+          <el-input type="textarea" v-model="editFault.detail"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="addFaultDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addFaultSubm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import VueAMap from "vue-amap";
+let amapManager = new VueAMap.AMapManager();
+export default {
+  data() {
+    var checkphone = (rule, value, callback) => {
+      let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
+      if (value == "") {
+        callback(new Error("请输入手机号"));
+      } else if (!phoneReg.test(value)) {
+        //引入methods中封装的检查手机格式的方法
+        callback(new Error("请输入正确的手机号!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      amapManager,
+      zanwu: "/images/expertDiagnosis/zanwu.png",
+      timeRange: "",
+      queryInfo: {
+        f_id: "",
+        page: 1,
+        device_type_id: null,
+        start_time: "",
+        end_time: "",
+      },
+      dataList: [],
+      totalNum: 0,
+      addr: "",
+      locationForm: {
+        lat: "",
+        lng: "",
+      },
+      editFault: {
+        imei: "",
+        user: "",
+        tel: "",
+        detail: "",
+        type: "",
+      },
+      device_id: "",
+      mapZoom: 6,
+      mapEvents: { 
+        init: (o) => {
+          // console.log(o.getCenter())
+          // console.log(this.$refs.map.$$getInstance())
+          // o.getCity(result => {
+          //   console.log(result)
+          // })
+        },
+        'moveend': () => {
+        },
+        'zoomchange': () => {
+        },
+        'click': (e) => {
+          console.log(this)
+          console.log(e.lnglat)
+          this.point = [e.lnglat.lng,e.lnglat.lat]
+          this.locationForm.lng = e.lnglat.lng;
+          this.locationForm.lat = e.lnglat.lat;
+        }
+      },
+      plugin: [
+        {
+          pName: "ToolBar",
+          events: {
+            init(instance) {
+              console.log(instance);
+            }
+          }
+        },
+        {
+          pName: "Scale",
+          events: {
+            init(instance) {
+              console.log(instance);
+            }
+          }
+        },
+        // {
+        //     pName: 'MapType',
+        //     defaultType: 0,
+        //     events: {
+        //       init(instance) {
+        //         console.log(instance);
+        //       }
+        //     }
+        //   }
+      ],
+      point: { lng: "", lat: "" },
+      center: [104.776123,33.118667],
+      addLocationDialogVisible: false,
+      addFaultDialogVisible: false,
+      editFaultrules: {
+        user: { required: true, message: "请输入联系人", trigger: "blur" },
+        tel: { required: true, validator: checkphone, trigger: "blur" },
+        detail: { required: true, message: "请输入故障原因", trigger: "blur" },
+      },
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  beforeMount() {},
+  methods: {
+    //获取设备列表
+    getList() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=device.device_manage.device_info",
+        data: this.qs.stringify({
+          device_id: this.queryInfo.f_id,
+          page: this.queryInfo.page,
+          page_size: 12,
+          device_type_id: this.queryInfo.device_type_id,
+          start_time: this.queryInfo.start_time,
+          end_time: this.queryInfo.end_time,
+        }),
+      }).then((res) => {
+        if (res.data.message == "") {
+          this.dataList = res.data.data.data;
+          this.totalNum = res.data.data.counts;
+        }
+      });
+    },
+    searchChange() {
+      this.queryInfo.page = 1;
+      this.getList();
+    },
+    DateChange(val) {
+      this.queryInfo.page = 1;
+      if (this.timeRange) {
+        this.queryInfo.start_time = parseInt(
+          new Date(this.timeRange[0]).getTime() / 1000
+        );
+        this.queryInfo.end_time = parseInt(
+          new Date(this.timeRange[1]).getTime() / 1000
+        );
+        this.getList();
+      } else {
+        this.queryInfo.start_time = "";
+        this.queryInfo.end_time = "";
+        this.getList();
+      }
+    },
+    //在地图中点击定位
+    locationPoint(e) {
+      let { point } = e;
+      this.point = point;
+      this.locationForm = point;
+      this.map.clearOverlays();
+      this.map.addOverlay(new BMap.Marker(this.point));
+    },
+    addrChange() {
+      this.geocoder = new AMap.Geocoder({
+          city: "全国", //城市设为北京，默认：“全国”
+      });
+      var _this = this;
+      if(!this.addr){
+        this.point = []
+        return false;
+      }
+      this.geocoder.getLocation(this.addr, function(status, result) {
+          if (status === 'complete'&&result.geocodes.length) {
+              var lnglat = result.geocodes[0].location
+              _this.point = [lnglat.lng,lnglat.lat];
+              _this.center = [lnglat.lng,lnglat.lat];
+          }else{
+              log.error('根据地址查询位置失败');
+          }
+      });
+    },
+    // 修改设备名称
+    modifyName(id, device_name) {
+      let value = device_name;
+      this.$prompt("", "修改名字", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputPlaceholder: device_name,
+      })
+        .then(({ value }) => {
+          if (value) {
+            this.$axios({
+              method: "POST",
+              url: "/api/api_gateway?method=forecast.worm_lamp.revise_device",
+              data: this.qs.stringify({
+                device_id: id,
+                device_name: value,
+              }),
+            }).then((res) => {
+              if (res.data.message == "") {
+                this.getList();
+                this.$message({
+                  type: "success",
+                  message: "修改成功",
+                });
+              }
+            });
+          } else {
+            this.$message({
+              type: "info",
+              message: "内容不能为空",
+            });
+          }
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "取消输入",
+          });
+        });
+    },
+    //通过经纬度搜索定位
+    locationSearch() {
+      if (this.locationForm.lat && this.locationForm.lng) {
+        this.point = [this.locationForm.lng,this.locationForm.lat];
+        this.center = [this.locationForm.lng,this.locationForm.lat];
+      }
+    },
+    handlerBMap({ BMap, map }) {
+      this.BMap = BMap;
+      this.map = map;
+      let point = new BMap.Point(this.point.lng, this.point.lat);
+      map.centerAndZoom(point, 15);
+    },
+    //点击“添加定位”按钮
+    addPosition(device_id, lng, lat) {
+      this.device_id = device_id;
+      this.point = [lng, lat ];
+      this.center = [lng, lat ];
+      this.locationForm.lng = lng
+      this.locationForm.lat = lat
+      this.addLocationDialogVisible = true;
+    },
+    // 故障上报
+    addFault(device_id, type) {
+      this.device_id = device_id;
+      this.editFault.imei = device_id;
+      this.editFault.type = type;
+      this.addFaultDialogVisible = true;
+    },
+    changePage(val) {
+      console.log(val);
+      this.queryInfo.page = val;
+      this.getList();
+    },
+    //关闭定位弹框时调用
+    addLocationDialogClosed() {
+      this.locationForm = { lat: "", lng: "" };
+      this.point = [0,0];
+      this.center = [113.271429, 23.135336];
+
+      //   this.map.clearOverlays();
+      this.map = null;
+      this.BMap = null;
+    },
+    //选择定位点后，提交
+    addLocationSubm() {
+      console.log(this.point);
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=forecast.worm_lamp.revise_device",
+        data: this.qs.stringify({
+          device_id: this.device_id,
+          lat: this.point[1],
+          lng: this.point[0],
+        }),
+      }).then((res) => {
+        if (res.data.message == "") {
+          this.getList();
+          this.$message({
+            type: "success",
+            message: "定位成功",
+          });
+        } else {
+          this.$message({
+            type: "error",
+            message: "定位失败",
+          });
+        }
+      });
+      this.addLocationDialogVisible = false;
+    },
+    addFaultSubm() {
+      this.$refs.editFaultform.validate((valid) => {
+        if (valid) {
+          this.$axios({
+            method: "POST",
+            url:
+              "/api/api_gateway?method=after_sale.after_sale_manage.aftersale_apply",
+            data: this.qs.stringify({
+              device_id: this.device_id,
+              errordesc: this.editFault.detail,
+              errorimg: [],
+              addr: "",
+              user: this.editFault.user,
+              userphone: this.editFault.tel,
+              repairtime: "",
+              d_type: this.editFault.type,
+              is_pc: "1", //0 手机  1 电脑
+              errorvideo: "",
+            }),
+          }).then((res) => {
+            if (res.data.message == "") {
+              this.$message({
+                type: "success",
+                message: "修改成功",
+              });
+              this.addFaultDialogVisible = false;
+            } else {
+              this.$message({
+                type: "error",
+                message: res.data.message,
+              });
+            }
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    //删除设备
+    delEquip(d_id) {
+      this.$confirm("确定删除此设备么?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$axios({
+            method: "POST",
+            url: "/api/api_gateway?method=device.device_manage.delete_device",
+            data: this.qs.stringify({
+              d_id,
+            }),
+          }).then((res) => {
+            if (res.data.message == "") {
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+			  });
+			  this.getList()
+            } else {
+              this.$message({
+                type: "error",
+                message: res.data.message,
+              });
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.search-box {
+  display: flex;
+  justify-content: flex-left;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  .filter-box > div {
+    margin-right: 15px;
+  }
+  .el-input {
+    width: 200px;
+  }
+  .el-date-editor--daterange {
+    width: 222px;
+  }
+}
+.el-card.selected {
+  border: 1px solid #14a478;
+}
+.el-card {
+  position: relative;
+  .del-icon {
+    display: none;
+    font-size: 16px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    color: red;
+    cursor: pointer;
+  }
+  &:hover {
+    .del-icon {
+      display: block;
+    }
+  }
+  .img-box {
+    text-align: center;
+    border-bottom: 1px solid #e1e1e1;
+    padding: 20px 0;
+    img {
+      height: 55px;
+    }
+    p {
+      font-size: 14px;
+      font-weight: 800;
+      margin-top: 10px;
+    }
+  }
+  .detail {
+    border-bottom: 1px solid #e1e1e1;
+    padding: 10px 0;
+    padding: 0 20px;
+    p {
+      display: flex;
+      justify-content: space-between;
+      font-size: 13px;
+      line-height: 34px;
+      color: #666;
+    }
+  }
+  .bottom {
+    display: flex;
+    font-size: 13px;
+    color: #666;
+    line-height: 50px;
+    span {
+      flex: 1;
+      text-align: center;
+      cursor: pointer;
+      border-left: 1px solid #e1e1e1;
+      i {
+        font-size: 16px;
+      }
+    }
+    span:first-child {
+      border-left: none;
+    }
+  }
+}
+.bm-view {
+  width: 100%;
+  height: 400px;
+}
+.map_dialog /deep/ .el-dialog__body {
+  padding: 20px 20px 0 20px;
+}
+</style>

src/router/index.js

@@ -130,6 +130,11 @@ const PlantGuard = () => import('@/components/index')
 const Page1 = () => import('@/Pages/plantGuard/page1')
 const Page2 = () => import('@/Pages/plantGuard/page2')
 const Page3 = () => import('@/Pages/plantGuard/page3')
+const Page4 = () => import('@/Pages/plantGuard/page4') //系统管理-用户管理
+const Page5 = () => import('@/Pages/plantGuard/page5') //系统管理-设备分配
+const Page6 = () => import('@/Pages/plantGuard/page6') //系统管理-角色管理
+const Page7 = () => import('@/Pages/plantGuard/page7') //系统管理-主题定制
+const Page8 = () => import('@/Pages/plantGuard/page8') //设备管理-设备列表
 
 Vue.use(Router)
 
@@ -150,21 +155,51 @@ export default new Router({
       children:[
         {
           path: 'page1',
-          name: '设备列表',
+          name:'page1',
           component: Page1,
-          meta: { title: '数据监测',order:0 }
+          meta: { title: '数据监测',order:0, navname:'设备列表',}
         },
         {
           path: 'page2',
-          name: '数据目录管理',
+          name: 'page2',
           component: Page2,
-          meta: { title: '数据监测',order:0 }
+          meta: { title: '数据监测',order:0 ,navname:'数据目录管理',}
         },
         {
           path: 'page3',
-          name: '系统管理',
+          name: 'page3',
           component: Page3,
-          meta: { title: '智能灌溉系统',order:1 }
+          meta: { title: '智能灌溉系统',order:1 ,navname:'系统管理',}
+        },
+        {
+          path: 'page4',
+          name: 'page4',
+          component: Page4,
+          meta: { title: '系统管理',order:5, navname: '用户管理',}
+        },
+        {
+          path: 'page5',
+          name: 'page5',
+          component: Page5,
+          meta: { title: '系统管理',order:5,navname: '设备分配', }
+        },
+        {
+          path: 'page6',
+          name: 'page6',
+          component: Page6,
+          meta: { title: '系统管理',order:5,navname: '角色管理', }
+        },
+        {
+          path: 'page7',
+          name: 'page7',
+          component: Page7,
+          meta: { title: '系统管理',order:5,navname: '主题定制', }
+        },
+        {
+          path: 'page8',
+          name: 'page8',
+          component: Page8,
+          meta: { title: '设备管理',order:6,navname: '设备列表', }
         },
       ]
     },