第一次提交大屏后台

.babelrc

@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
+  ]
+}

.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/package-lock.json
+/dist

README.md

@@ -0,0 +1,61 @@
+#开发需要组件
+> npm i webpack webpack-dev-server webpack-cli -D
+* vue-loader :处理.vue文件
+* vue-style-loader:处理.vue里面的样式
+* vue-template-compiler:编译.vue中template里面的内容
+> npm i css-loader file-loader url-loader babel-loader html-webpack-plugin less less-loader vue-loader vue-style-loader vue-template-compiler -D
+* es6 转 es5
+> npm i @babel/core @babel/cli @babel/preset-env -D
+* ui框架资源按需引入
+> npm i babel-plugin-component -D
+* 处理 svg
+> npm i raw-loader -D
+
+#服务器打包组件
+>npm i child_process -S
+
+#运行时组件
+>npm i vue -S
+>npm i vue-router -S
+>npm i vuex -S
+>npm i md5 -S
+* localStorage,sessionStorage,cookieStorage
+>npm i js-storage -S 
+* UI框架
+>npm i element-ui -S
+* json代码格式化 编辑框
+>npm i vue-json-editor -S
+* 异步请求
+>npm i axios -S
+
+*  模板端修改步骤
++  1、在通用组件中添加编辑组件
+```增加数据同步更新 功能需要
+	state = {
+		data: {
+			list: []
+		}
+	}
+	componentWillReceiveProps(props) {
+		const {data} = props;
+		this.setState({data});
+	}
+//data为数据 mId为组件唯一名称与tplMcode文件中对应-通过构造函数获取组件名称  upData函数用于数据同步跟新展示
+ <EditTpl data={data} mId={this.constructor.name} upData={data=>this.setState({data})}></EditTpl>
+```
+![组件修改图例](README_files/1.jpg)
+
+```请求数据 及 组件
+请求参数  {
+	mId:'BaseInfo',//组件名称
+	id:'llx001',//数据ID 顶级直接写死 与 默认数据顶级数据ID相同
+}
+```
+* 部署
+* 1、后台前端
+* 2、数据服务  代理 /defdata
+* 3、大屏模板  代理 /screen
++ 	1、数据服务 代理 /defdata(如果不通过模板域名访问可不配置)
++ 	2、后台数据 代理 /htdata(如果不通过模板域名访问可不配置)
+* 4、后台数据  代理 /htdata
+* 5、配置穿透域名 lldp lldpscreen

config/webpack.development.js

@@ -0,0 +1,77 @@
+//开发环境配置
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+// vue-loader15.*之后的版本都必须要加上这个,否则会报错
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin'); //复制文件
+
+module.exports = {
+	mode: 'development',
+	output: {
+		filename: 'bundle.js'
+	},
+	devtool: 'source-map',
+	plugins: [
+		new CopyWebpackPlugin([{
+			from: "src/public",
+			to: "public"
+		}]),
+		new HtmlWebpackPlugin({
+			template: 'index.html'
+		}),
+		new VueLoaderPlugin()
+	],
+	devServer: {
+		index: "index.html", //默认文件名
+		hot: true, //热更新
+		host: "0.0.0.0",
+		compress: true,
+		port: 9000,
+		disableHostCheck: true,
+		proxy: {
+			'/screen': {
+				target: "http://127.0.0.1:9008",
+				pathRewrite: {
+					"^/screen": ""
+				},
+				changeOrigin: true,
+			},
+			"/defdata": {
+				target: "http://127.0.0.1:3002",
+				// target: "http://lldp2.z.gyhywa.com:9527",
+				pathRewrite: {
+					"^/defdata": ""
+				},
+				changeOrigin: true
+			},
+			"/htdata": {
+				target: "http://lyfbht.hw.hongweisoft.com",
+				// target: "http://47.111.224.169:8310",
+				// target: 'http://58.16.127.62:2035',
+				
+				// pathRewrite: {
+				// 	"^/htdata": ""
+				// },
+				changeOrigin: true
+			},
+			"/amapData": {
+				target: "https://restapi.amap.com",
+				// target: 'http://58.16.127.62:2035',
+				pathRewrite: {
+					"^/amapData": ""
+				},
+				changeOrigin: true
+			},
+			'/product': {
+				target: 'http://ghost.nat300.top',
+				pathRewrite: {
+					'^/product': ''
+				},
+				changeOrigin: true
+			},
+			'/forest-admin': {
+				target: 'http://lyfbht.hw.hongweisoft.com',
+				changeOrigin: true
+			}
+		}
+	}
+}

config/webpack.production.js

@@ -0,0 +1,40 @@
+//生产环境配置
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const {
+	CleanWebpackPlugin
+} = require('clean-webpack-plugin'); //清除文件夹
+const CopyWebpackPlugin = require('copy-webpack-plugin'); //复制文件
+const WebpackSftpClient = require('webpack-sftp-client'); //打包完成自动上传
+module.exports = {
+	mode: 'production',
+	output: {
+		path: path.resolve(__dirname, './../dist'),
+		filename: 'js/[hash].min.js'
+	},
+	plugins: [
+		new CopyWebpackPlugin([{
+			from: "src/public",
+			to:"public"
+		}]),
+		new HtmlWebpackPlugin({
+			template: 'index.html',
+			minify: {
+				collapseWhitespace: true, //把生成的 index.html 文件的内容的没用空格去掉，减少空间
+			},
+			hash: true, //为了更好的 cache，可以在文件名后加个 hash。
+		}),
+		new VueLoaderPlugin(),
+		/*new WebpackSftpClient({
+			port: '22', //服务器端口
+			host: '172.16.90.253', //服务器地址
+			username: 'root', //用户名
+			password: 'hywa$123', //密码
+			path: path.resolve(__dirname, './../dist'), //本地路径
+			remotePath: '/www/演示项目/湄潭一期/ht-H5', //服务器上的路径
+			verbose: true
+		}),*/
+		new CleanWebpackPlugin()
+	]
+}

index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="pragma" content="no-cache">
+		<meta http-equiv="Cache-Control " content="no-cache,must-revalidate">
+		<meta name="description" content="">
+		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
+		<meta content="telephone=no" name="format-detection" />
+		<meta name="x5-orientation" content="portrait">
+		<title>贵州“林产品态势图”应用平台</title>
+		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=388e4a971a8fb8d616e4a85d7deff144"></script>
+	</head>
+	<body>
+		<div id="app"></div>
+	</body>
+</html>

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "vue-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --env.development",
+    "build": "webpack --env.production"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.6.0",
+    "@babel/core": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-component": "^1.1.1",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.0.5",
+    "css-loader": "^3.2.0",
+    "file-loader": "^4.2.0",
+    "html-webpack-plugin": "^3.2.0",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0",
+    "raw-loader": "^3.1.0",
+    "url-loader": "^2.1.0",
+    "vue-loader": "^15.7.1",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.40.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.8.1",
+    "webpack-sftp-client": "^1.2.1"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.6.0",
+    "axios": "^0.19.0",
+    "child_process": "^1.0.2",
+    "element-ui": "^2.12.0",
+    "js-cookie": "^2.2.1",
+    "js-storage": "^1.1.0",
+    "md5": "^2.2.1",
+    "monaco-editor": "^0.18.1",
+    "vue": "^2.6.10",
+    "vue-amap": "^0.5.10",
+    "vue-json-editor": "^1.4.0",
+    "vue-router": "^3.1.3",
+    "vuex": "^3.1.1"
+  }
+}

src/App.vue

@@ -0,0 +1,19 @@
+<template>
+	<router-view></router-view>
+</template>
+<script>
+	export default{
+		created() {
+			//同步登录信息
+			this.$store.commit("login");
+		}
+	}
+</script>
+<style lang="less">
+* {
+	margin: 0;
+	border: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+</style>

src/api/CONST.js

@@ -0,0 +1,39 @@
+/* eslint-disable */
+//统一分页
+export const paginationConfig = {
+  pageNo: 1,
+  pageSize:10
+}
+
+//公用图片上传
+export const uploadImgUrl = '/htdata/file/uploadDocument'
+
+//区域数据文件上传
+export const uploadFileAreaUrl = '/htdata/areaData/importXls'
+
+
+//验证规则
+export const globalReg = {
+  // 最多两位小数 大于0
+  regNumberToFixed2: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
+  // 整数 - 包括0
+  regNumberIncludeZero: /^(0)|([1-9][0-9]*)$/,
+  // 整数 - 非0
+  regNumber: /^([1-9][0-9]*)$/,
+  // 手机号
+  regPhone: /^1[\d]{10}$/,
+  // 座机
+  regTel: /^0\d{2,3}-\d{7,8}$/,
+  // 身份证
+  regIdCard: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
+  // 验证中文 2到6位
+  regChinese: /^[\u4e00-\u9fa5]{2,6}$/,
+  // 银行卡 15或19位
+  regBankCard: /^([1-9]{1})(\d{14}|\d{18})$/,
+  // 字母
+  regLetter: /^[a-zA-Z]$/,
+  // 邮箱
+  regEmail: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
+  // 增值税率
+  regVat: /^(([1-9][0-9]{0,2})|(([0]\.\d{1,2}|[1-9][0-9]{0,2}\.\d{1,2})))$/
+}

src/api/code.js

@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import router from '../script/router';
+const v = new Vue();
+//状态码处理
+export default {
+	0: msg => {
+		//成功调用
+	},
+	1004: msg => {
+		//登录问题
+		v.$store.commit('logout');
+		router.push('/login');
+	}
+};

src/api/interface copy.js

@@ -0,0 +1,395 @@
+import $http from '../script/http';
+import code from './code';
+import {
+	Message
+} from "element-ui";
+import cookieStorage from 'js-cookie';
+//统一处理
+const res = (res) => {
+	const {
+		retBody = {}, retHead = {}
+	} = res.data,
+		codeFun = code[retHead.errCode];
+	typeof codeFun == "function" ? codeFun(retHead.errMsg) : Message.error(retHead.errMsg || '未知错误');
+	if (!(retHead.errCode == 0 ? 0 : 1)) {
+		return retBody || {};
+	} else {
+		return {
+			code: 1
+		};
+	}
+};
+//统一处理默认数据
+const resD = (res) => {
+	const {
+		msg,
+		errCode,
+		data
+	} = res.data,
+		codeFun = code[errCode];
+	typeof codeFun == "function" ? codeFun(msg) : Message.error(msg || '未知错误');
+	if (!(errCode == 0 ? 0 : 1)) {
+		return data || {};
+	} else {
+		return {
+			code: 1
+		};
+	}
+};
+
+export default {
+	res,
+	resD,
+	//登录
+	login(data) {
+		return $http.post('/htdata/user/pcLogin', data).then(this.res);
+	},
+	//大屏框架
+	findMapTemplate(data) {
+		return $http.get('/htdata/map/findMapTemplate').then(this.res);
+	},
+	//新增大屏
+	addMap(data) {
+		return $http.post('/htdata/map', data).then(this.res);
+	},
+	//删除大屏
+	delMap(data) {
+		return $http.delete('/htdata/map', {
+			data
+		}).then(this.res);
+	},
+	//发布大屏
+	releaseMap(data) {
+		return $http.post('/htdata/map/updateState', {
+			id: data.id,
+			state: 1
+		}).then(this.res);
+	},
+	//获取大屏列表
+	getMap(data) {
+		return $http.get('/htdata/map/findMapAll', {
+			params: {
+				pageNum: 1,
+				pageSize: 10,
+				...data
+			}
+		}).then(this.res);
+	},
+	//保存组件数据 参数( 大屏ID、组件ID )
+	//删除大屏时通过ID清空组件数据 
+	//通过大屏ID 查询 发布状态 控制大屏展示数据是否返回
+	addModuleData(data) {
+		/**
+		 * data 对象
+		 * id 大屏ID
+		 * moduleCode 组件ID
+		 * dataType 数据类型 1-API 2-数据库 3-CSV数据表 4-静态数据
+		 * sourceName 数据源名称,当静态数据时，此字段为空
+		 * content 组件数据
+		 */
+		return $http.post('/htdata/map/addModuleData', data).then(this.res);
+	},
+	//统一上传接口
+	upIuccess(data) {
+		return new Promise(r => {
+			r(this.res({
+				data
+			}));
+		});
+	},
+	//获取token
+	getMonitorToken() {
+		//过期验证
+		const atName = "accessToken",
+			at = cookieStorage.get(atName);
+		if (!at) {
+			let body = new FormData();
+			body.append("appKey", "519cce9165e94f56a6f30c927a1699f7");
+			body.append("appSecret", "bbfaacaf9ffebb0210f866c035fe81fb");
+			//取得监控token
+			return fetch('https://open.ys7.com/api/lapp/token/get', {
+				method: 'post',
+				body
+			}).then(res => res.json()).then(res => {
+				if (res.code == 200) {
+					const accessToken = (res.data || {}).accessToken || '';
+					cookieStorage.set(atName, accessToken, {
+						expires: 6
+					})
+					return {
+						accessToken
+					}
+				} else {
+					return {
+						code: 200
+					}
+				}
+			});
+		}
+		return new Promise(r => {
+			r({
+				accessToken: at
+			});
+		});
+	},
+	//海康监控列表
+	getMonitorList() {
+		return this.getMonitorToken().then(res => {
+			//获取列表
+			let body = new FormData(), accessToken = res.accessToken || "";
+			body.append("accessToken", res.accessToken);
+			body.append("pageStart", 0);
+			body.append("pageSize", 50);
+			//获取摄像头监控列表
+			return fetch("https://open.ys7.com/api/lapp/camera/list", {
+				method: 'post',
+				body
+			}).then(res => res.json()).then(res => {
+				//组装监控地址
+				return Array.isArray(res.data) ? res.data.map(x => {
+					return {
+						...x,
+						//wss播放模式
+						//“ezopen://open.ys7.com/440912260/1.hd.live”，可以播放序列号为“440912260”设备“1通道”“高清”的“实时视频”  
+						url: `ezopen://open.ys7.com/${x.deviceSerial}/${x.channelNo}.hd.live`,
+						accessToken
+					}
+				}) : [];
+			})
+			/*.then(res => {
+				//筛选掉不能用的摄像头
+				return res.filter(x => {
+					return !!x.status;
+				});
+			});*/
+		});
+	},
+	/*********系统管理->用户列表接口**********/
+	getUserList(data) {
+		return $http.get('/htdata/user/findAll', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********系统管理->获取用户角色**********/
+	getRolesList() {
+		return $http.get('/htdata/role/getAll').then(this.res);
+	},
+	/*********系统管理->获取组织机构*********/
+	getBranchidList() {
+		return $http.get('/htdata/branch/findAll').then(this.res);
+	},
+	/*********系统管理->用户查看*********/
+	viewUser(data) {
+		return $http.get('/htdata/user/findById', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********系统管理->添加用户*********/
+	addUser(data) {
+		return $http.post('/htdata/user/', data).then(this.res);
+	},
+	/*********系统管理->删除用户*********/
+	delUser(data) {
+		return $http.delete('/htdata/user/', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********系统管理->更新用户*********/
+	updateUser(data) {
+		return $http.put('/htdata/user/', data).then(this.res);
+	},
+	/*********系统管理->重置密码*********/
+	resetDefaultPwd(data) {
+		return $http.put('/htdata/user/resetPwd/', data).then(this.res);
+	},
+	/*********系统管理->角色添加*********/
+	addRole(data) {
+		return $http.post('/htdata/role/', data).then(this.res);
+	},
+	/*********系统管理->角色列表*********/
+	getRoleList(data) {
+		return $http.get('/htdata/role/getAll').then(this.res);
+	},
+	/*********系统管理->角色修改*********/
+	updateRoleItem(data) {
+		return $http.put('/htdata/role', data).then(this.res);
+	},
+	/*********系统管理->角色删除*********/
+	delRole(data) {
+		return $http.delete('/htdata/role/', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********系统管理->角色菜单获取*********/
+	getRoleMenu(data) {
+		return $http.get('/htdata/menu/getMenuByRole', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********系统管理->角色菜单获取*********/
+	saveRoleMenu(data) {
+		return $http.post('/htdata/menu/saveRoleMenu', data).then(this.res);
+	},
+	/*********系统管理->账号退出*********/
+	loginOut(data) {
+		return $http.delete('/htdata/user/pcLogout', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********专家团队管理->专家列表*********/
+	getExpertList(data) {
+		return $http.get('/htdata/expert/findAll', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********专家团队管理->专家启用状态*********/
+	updateState(data) {
+		return $http.post('/htdata/expert/updateState', data).then(this.res);
+	},
+	/*********专家团队管理->人员删除*********/
+	delExpert(data) {
+		return $http.delete('/htdata/expert/', {
+			data
+		}).then(this.res);
+	},
+	/*********专家团队管理->所属区域名称*********/
+	getAreaList(data) {
+		return $http.get('/htdata/expert/findArea', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********专家团队管理->获取专家类型*********/
+	getExpertType(data) {
+		return $http.get('/htdata/dict/findValueByCode', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********专家团队管理->坝区信息查询*********/
+	getDamList() {
+		return $http.get('/htdata/dam/findAll').then(this.res);
+	},
+	/*********专家团队管理->坝区信息查询*********/
+	addExpert(data) {
+		return $http.post('/htdata/expert', data).then(this.res);
+	},
+	/*********专家团队管理->专家详情*********/
+	getExpertDetail(data) {
+		return $http.get('/htdata/expert/findById', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********专家团队管理->更新专家详情*********/
+	updateExpert(data) {
+		return $http.put('/htdata/expert', data).then(this.res);
+	},
+	/*********系统全局->跳转至益农社*********/
+	goYlAdmin(data) {
+		return $http.post('/htdata/yinongshe/login').then(this.res);
+	},
+	/*********坝区信息管理->信息列表*********/
+	getDamList(data) {
+		return $http.get('/htdata/dam/findAll', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********坝区信息管理->新增*********/
+	addDam(data) {
+		return $http.post('/htdata/dam', data).then(this.res);
+	},
+	/*********坝区信息管理->删除*********/
+	delDam(data) {
+		return $http.delete('/htdata/dam', {
+			data
+		}).then(this.res);
+	},
+	/*********坝区信息管理->是否启用*********/
+	damUpdateState(data) {
+		return $http.post('/htdata/dam/updateState', data).then(this.res);
+	},
+	/*********坝区信息管理->获取详情*********/
+	getDamInfo(params) {
+		return $http.get('/htdata/dam/findById	', {
+			params
+		}).then(this.res);
+	},
+	/*********坝区信息管理->更新详情*********/
+	updateDam(data) {
+		return $http.put('/htdata/dam', data).then(this.res);
+	},
+	/*********区域数据管理->获取列表*********/
+	getAreaListx(data) {
+		return $http.get('/htdata/areaData/findAll', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********区域数据管理->查询详情*********/
+	getAreaManageInfo(data) {
+		return $http.get('/htdata/areaData/findById', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********区域数据管理->大屏应用状态修改*********/
+	areaDataUpdate(data) {
+		return $http.post('/htdata/areaData/updateState', data).then(this.res);
+	},
+	/*********区域数据管理->大屏删除*********/
+	delareaData(data) {
+		return $http.delete('/htdata/areaData', {
+			data
+		}).then(this.res);
+	},
+	/*********区域数据管理->数据类型*********/
+	getAreaDataTypeList(data) {
+		return $http.get('/htdata/dict/findValueByCode', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********获取系统菜单权限 new add**********/
+	getUserMenuTree() {
+		return $http.get('/htdata/menu/userMenuTree').then(this.res);
+	},
+	/*********大屏模板组件默认数据及数据字典接口**********/
+	getDefaultModuleData(params) {
+		return $http.get('/defdata/default/data', {
+			params
+		}).then(this.resD);
+	},
+	/*********查询口令列表**********/
+	getPwdList(params) {
+		return $http.get('/htdata/map/findPwd', {
+			params
+		}).then(this.res);
+	},
+	/*********更新口令信息**********/
+	upPwdInfo(data) {
+		return $http.post('/htdata/map/updatePwd', data).then(this.res);
+	},
+}

src/api/interface.js

@@ -0,0 +1,505 @@
+import $http from '../script/http';
+import code from './code';
+import {
+	Message
+} from "element-ui";
+import cookieStorage from 'js-cookie';
+//统一处理
+const res = (res) => {
+	const {
+		retBody = {}, retHead = {}
+	} = res.data,
+		codeFun = code[retHead.errCode];
+	typeof codeFun == "function" ? codeFun(retHead.errMsg) : Message.error(retHead.errMsg || '未知错误');
+	if (!(retHead.errCode == 0 ? 0 : 1)) {
+		return retBody || {};
+	} else {
+		return {
+			code: 1
+		};
+	}
+};
+//统一处理默认数据
+const resD = (res) => {
+	const {
+		msg,
+		errCode,
+		data
+	} = res.data,
+		codeFun = code[errCode];
+	typeof codeFun == "function" ? codeFun(msg) : Message.error(msg || '未知错误');
+	if (!(errCode == 0 ? 0 : 1)) {
+		return data || {};
+	} else {
+		return {
+			code: 1
+		};
+	}
+};
+
+export default {
+	res,
+	resD,
+	//登录
+	login(data) {
+		return $http.post('/htdata/user/pcLogin', data).then(this.res);
+	},
+	//大屏框架
+	findMapTemplate(data) {
+		return $http.get('/htdata/map/findMapTemplate').then(this.res);
+	},
+	//新增大屏
+	addMap(data) {
+		return $http.post('/htdata/map', data).then(this.res);
+	},
+	//删除大屏
+	delMap(data) {
+		return $http.delete('/htdata/map', {
+			data
+		}).then(this.res);
+	},
+	//发布大屏
+	releaseMap(data) {
+		return $http.post('/htdata/map/updateState', {
+			id: data.id,
+			state: 1
+		}).then(this.res);
+	},
+	//获取大屏列表
+	getMap(data) {
+		return $http.get('/htdata/map/findMapAll', {
+			params: {
+				pageNum: 1,
+				pageSize: 10,
+				...data
+			}
+		}).then(this.res);
+	},
+	//保存组件数据 参数( 大屏ID、组件ID )
+	//删除大屏时通过ID清空组件数据 
+	//通过大屏ID 查询 发布状态 控制大屏展示数据是否返回
+	addModuleData(data) {
+		/**
+		 * data 对象
+		 * id 大屏ID
+		 * moduleCode 组件ID
+		 * dataType 数据类型 1-API 2-数据库 3-CSV数据表 4-静态数据
+		 * sourceName 数据源名称,当静态数据时，此字段为空
+		 * content 组件数据
+		 */
+		return $http.post('/htdata/map/addModuleData', data).then(this.res);
+	},
+	//统一上传接口
+	upIuccess(data) {
+		return new Promise(r => {
+			r(this.res({
+				data
+			}));
+		});
+	},
+	//获取token
+	getMonitorToken() {
+		//过期验证
+		const atName = "accessToken",
+			at = cookieStorage.get(atName);
+		if (!at) {
+			let body = new FormData();
+			body.append("appKey", "519cce9165e94f56a6f30c927a1699f7");
+			body.append("appSecret", "bbfaacaf9ffebb0210f866c035fe81fb");
+			//取得监控token
+			return fetch('https://open.ys7.com/api/lapp/token/get', {
+				method: 'post',
+				body
+			}).then(res => res.json()).then(res => {
+				if (res.code == 200) {
+					const accessToken = (res.data || {}).accessToken || '';
+					cookieStorage.set(atName, accessToken, {
+						expires: 6
+					})
+					return {
+						accessToken
+					}
+				} else {
+					return {
+						code: 200
+					}
+				}
+			});
+		}
+		return new Promise(r => {
+			r({
+				accessToken: at
+			});
+		});
+	},
+	//海康监控列表
+	getMonitorList() {
+		return this.getMonitorToken().then(res => {
+			//获取列表
+			let body = new FormData(), accessToken = res.accessToken || "";
+			body.append("accessToken", res.accessToken);
+			body.append("pageStart", 0);
+			body.append("pageSize", 50);
+			//获取摄像头监控列表
+			return fetch("https://open.ys7.com/api/lapp/camera/list", {
+				method: 'post',
+				body
+			}).then(res => res.json()).then(res => {
+				//组装监控地址
+				return Array.isArray(res.data) ? res.data.map(x => {
+					return {
+						...x,
+						//wss播放模式
+						//“ezopen://open.ys7.com/440912260/1.hd.live”，可以播放序列号为“440912260”设备“1通道”“高清”的“实时视频”  
+						url: `ezopen://open.ys7.com/${x.deviceSerial}/${x.channelNo}.hd.live`,
+						accessToken
+					}
+				}) : [];
+			})
+			/*.then(res => {
+				//筛选掉不能用的摄像头
+				return res.filter(x => {
+					return !!x.status;
+				});
+			});*/
+		});
+	},
+	/*********系统管理->用户列表接口**********/
+	getUserList(data) {
+		return $http.get('/htdata/user/findAll', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********系统管理->获取用户角色**********/
+	getRolesList() {
+		return $http.get('/htdata/role/getAll').then(this.res);
+	},
+	/*********系统管理->获取组织机构*********/
+	getBranchidList() {
+		return $http.get('/htdata/branch/findAll').then(this.res);
+	},
+	/*********系统管理->用户查看*********/
+	viewUser(data) {
+		return $http.get('/htdata/user/findById', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********系统管理->添加用户*********/
+	addUser(data) {
+		return $http.post('/htdata/user/', data).then(this.res);
+	},
+	/*********系统管理->删除用户*********/
+	delUser(data) {
+		return $http.delete('/htdata/user/', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********系统管理->更新用户*********/
+	updateUser(data) {
+		return $http.put('/htdata/user/', data).then(this.res);
+	},
+	/*********系统管理->重置密码*********/
+	resetDefaultPwd(data) {
+		return $http.put('/htdata/user/resetPwd/', data).then(this.res);
+	},
+	/*********系统管理->角色添加*********/
+	addRole(data) {
+		return $http.post('/htdata/role/', data).then(this.res);
+	},
+	/*********系统管理->角色列表*********/
+	getRoleList(data) {
+		return $http.get('/htdata/role/getAll').then(this.res);
+	},
+	/*********系统管理->角色修改*********/
+	updateRoleItem(data) {
+		return $http.put('/htdata/role', data).then(this.res);
+	},
+	/*********系统管理->角色删除*********/
+	delRole(data) {
+		return $http.delete('/htdata/role/', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********系统管理->角色菜单获取*********/
+	getRoleMenu(data) {
+		return $http.get('/htdata/menu/getMenuByRole', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********系统管理->角色菜单获取*********/
+	saveRoleMenu(data) {
+		return $http.post('/htdata/menu/saveRoleMenu', data).then(this.res);
+	},
+	/*********系统管理->账号退出*********/
+	loginOut(data) {
+		return $http.delete('/htdata/user/pcLogout', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********园区管理->园区列表*********/
+	getExpertList(data) {
+		return $http.get('/htdata/orchard/findAll', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********园区管理->园区删除*********/
+	delExpert(data) {
+		return $http.delete('/htdata/orchard/', {
+			data
+		}).then(this.res);
+	},
+	/*********园区管理->新增**********/
+	addOrchard(data){
+		return $http.post('/htdata/orchard', data).then(this.res);
+	},
+	/*********园区管理->更新**********/
+	updateOrchard(data){
+		return $http.put('/htdata/orchard', data).then(this.res);
+	},
+	/*********园区管理->园区详情查询**********/
+	getOrchard(data){
+		return $http.get('/htdata/orchard/findById',{
+			params:{
+				...data
+			}
+		}).then(this.res)
+	},
+	/*********园区管理->查询产出物*********/
+	getProtypeList(data) {
+		return $http.get('/htdata/orchard/findProdType', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********园区管理->涉及农业*********/
+	getAgriTypeList(data) {
+		return $http.get('/htdata/orchard/findAgriType', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********专家团队管理->坝区信息查询*********/
+	getDamList() {
+		return $http.get('/htdata/dam/findAll').then(this.res);
+	},
+	/*********专家团队管理->坝区信息查询*********/
+	addExpert(data) {
+		return $http.post('/htdata/expert', data).then(this.res);
+	},
+	/*********专家团队管理->专家详情*********/
+	getExpertDetail(data) {
+		return $http.get('/htdata/expert/findById', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********专家团队管理->更新专家详情*********/
+	updateExpert(data) {
+		return $http.put('/htdata/expert', data).then(this.res);
+	},
+	/*********系统全局->跳转至益农社*********/
+	goYlAdmin(data) {
+		return $http.post('/htdata/yinongshe/login').then(this.res);
+	},
+	/*********坝区信息管理->信息列表*********/
+	getDamList(data) {
+		return $http.get('/htdata/dam/findAll', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********坝区信息管理->新增*********/
+	addDam(data) {
+		return $http.post('/htdata/dam', data).then(this.res);
+	},
+	/*********坝区信息管理->删除*********/
+	delDam(data) {
+		return $http.delete('/htdata/dam', {
+			data
+		}).then(this.res);
+	},
+	/*********坝区信息管理->是否启用*********/
+	damUpdateState(data) {
+		return $http.post('/htdata/dam/updateState', data).then(this.res);
+	},
+	/*********坝区信息管理->获取详情*********/
+	getDamInfo(params) {
+		return $http.get('/htdata/dam/findById	', {
+			params
+		}).then(this.res);
+	},
+	/*********坝区信息管理->更新详情*********/
+	updateDam(data) {
+		return $http.put('/htdata/dam', data).then(this.res);
+	},
+	/*********区域数据管理->获取列表*********/
+	getAreaListx(data) {
+		return $http.get('/htdata/areaData/findAll', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********区域数据管理->查询详情*********/
+	getAreaManageInfo(data) {
+		return $http.get('/htdata/areaData/findById', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********区域数据管理->大屏应用状态修改*********/
+	areaDataUpdate(data) {
+		return $http.post('/htdata/areaData/updateState', data).then(this.res);
+	},
+	/*********区域数据管理->大屏删除*********/
+	delareaData(data) {
+		return $http.delete('/htdata/areaData', {
+			data
+		}).then(this.res);
+	},
+	/*********区域数据管理->数据类型*********/
+	getAreaDataTypeList(data) {
+		return $http.get('/htdata/dict/findValueByCode', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********获取系统菜单权限 new add**********/
+	getUserMenuTree() {
+		return $http.get('/htdata/menu/userMenuTree').then(this.res);
+	},
+	/*********大屏模板组件默认数据及数据字典接口**********/
+	getDefaultModuleData(params) {
+		return $http.get('/defdata/default/data', {
+			params
+		}).then(this.resD);
+	},
+	/*********查询口令列表**********/
+	getPwdList(params) {
+		return $http.get('/htdata/map/findPwd', {
+			params
+		}).then(this.res);
+	},
+	/*********更新口令信息**********/
+	upPwdInfo(data) {
+		return $http.post('/htdata/map/updatePwd', data).then(this.res);
+	},
+	/*********组件城市联动->获取省**********/
+	getProvince() {
+		return $http.get('/htdata/depart/findProvince').then(this.res);
+	},
+	/*********组件城市联动->获取市**********/
+	getCity(data) {
+		return $http.get('/htdata/depart/findCity',{
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********组件城市联动->获取区**********/
+	getCounty(data){
+		return $http.get('/htdata/depart/findCounty',{
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********组件城市联动->获取镇**********/
+	getTown(data){
+		return $http.get('/htdata/depart/findTown',{
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	//地图检索
+	serachAmap(data){
+		return $http.get('/amapData/v3/place/text',{
+			params:{
+				...data
+			}
+		}).then()
+	},
+	/*********专题列表->获取分布点数据源**********/
+	getTopIcData(data) {
+		return $http.get('/htdata/topic/findTopicDbField', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********专题列表->专题新增**********/
+	addTopic(data) {
+		return $http.post('/htdata/topic', data).then(this.res);
+	},
+	/*********专题列表->获取专题列表**********/
+	getTopIcList(data){
+		return $http.get('/htdata/topic/findTopicInfo', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********专题列表->删除专题**********/
+	delTopic(data){
+		return $http.delete('/htdata/topic', {
+			data
+		}).then(this.res);
+	},
+	/*********专题列表->修改专题**********/
+	updateTopic(data){
+		return $http.put('/htdata/topic', data).then(this.res);
+	},
+	/*********专题列表->产业扶贫列表**********/
+	getNoticeList(data) {
+		return $http.get('/htdata/notice/findAll', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********专题列表->产业扶贫新增**********/
+	addNotice(data) {
+		return $http.post('/htdata/notice', data).then(this.res);
+	},
+	/*********专题列表->产业扶贫删除**********/
+	delNotice(data) {
+		return $http.delete('/htdata/notice', {
+			data
+		}).then(this.res);
+	},
+	/*********专题列表->获取产业扶贫详情**********/
+	getNotice(data){
+		return $http.get('/htdata/notice/findById', {
+			params: {
+				...data
+			}
+		}).then(this.res);
+	},
+	/*********专题列表->产业扶贫更新**********/
+	updateNotice(data) {
+		return $http.put('/htdata/notice', data).then(this.res);
+	},
+	
+	
+}

src/assets/css/main.less

@@ -0,0 +1,23 @@
+* {
+	margin: 0;
+	border: 0;
+	padding: 0;
+}
+/* 滚动条滑块 */
+::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+    background-color: transparent;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #999;
+    border-radius: 4px;
+}
+/* end 滚动条滑块 */

src/components/Pagination.vue

@@ -0,0 +1,58 @@
+<template>
+	<div>
+		<el-pagination
+		  v-if="show"
+		  background
+		  :page-size.sync="pageSize"
+		  :pager-count="11"
+		  layout="prev,pager,next,total"
+		  @current-change="onChange"
+		  :total="count">
+		</el-pagination>
+	</div>
+	
+</template>
+
+<script>
+	import {paginationConfig} from '@/api/CONST'
+	export default{
+		 name: 'Pagination',
+		 props:{
+			 total: {
+			   type: [String, Number],
+			   default:0
+			 }
+		 },
+		 data(){
+			return{
+				show:true,
+				pageSize: paginationConfig.pageSize,
+				count: 0
+			} 
+		 },
+		 created(){
+		 },
+		 methods:{
+			 onChange(index){
+				 const json = {
+					 pageNo: index,
+					 pageSize: paginationConfig.pageSize
+				 }
+				 this.$emit('change',json)
+			 }
+		 },
+		 watch:{
+			 total(newVal,oldVal){
+				this.show = false
+				this.count = newVal
+				const timer = setTimeout(()=>{
+					this.show = true
+					clearTimeout(timer)
+				},10)
+			 }
+		 }
+	}
+</script>
+
+<style>
+</style>

src/components/mySubMenu.vue

@@ -0,0 +1,33 @@
+<template>
+	<!--导航菜单组件 递归显示-->
+	<el-submenu :index="parIndex | toString">
+		<template slot="title">
+			{{ title }}
+		</template>
+		<template v-for="(item, s_Index) in subData">
+			<el-menu-item v-if="!item.childs" :index="item.entity.path" :key="[parIndex,s_Index] | lj">{{ item.entity.title }}</el-menu-item>
+			<my-sub-menu v-if="item.childs" :subData="item.childs" :parIndex="[parIndex,s_Index] | lj" :title="item.entity.title" :key="[parIndex,s_Index+'1'] | lj"></my-sub-menu>
+		</template>
+	</el-submenu>
+</template>
+
+<script>
+export default {
+	name: 'mySubMenu',
+	props: ['subData', 'parIndex', 'title'],
+	data() {
+		return {};
+	},
+	filters: {
+	  toString:(value) =>{
+	    return value+'';
+	  },
+	  lj:([v,n])=>{
+		  return v+"-"+n;
+	  }
+	},
+	methods: {}
+};
+</script>
+
+<style></style>

src/components/tplEdit/AMap.vue

@@ -0,0 +1,358 @@
+<template>
+	<el-form label-width="80px" size="mini" :inline="inline">
+		<span v-for="(va, key) in value" :key="key">
+			<AMap v-if="includes(va, 'Object')" :value="va" :keys="keys[key] || {}"></AMap>
+			<div v-else-if="includes(va, 'Array') && keys[key]">
+				<el-form-item :label="keys[key]" v-if="key == 'center'">
+					{{ va }}
+					<el-button type="primary" @click="clickCenter(va)">修改中心</el-button>
+				</el-form-item>
+				<el-form-item :label="keys[key]._name" v-else-if="key == 'covers'">
+					<el-button type="primary" @click="clickPolygon(value, key)" style="margin-bottom: 5px;">新增或修改覆盖物</el-button>
+					<el-table :data="value[key]" border style="width: 100%">
+						<el-table-column v-for="(name, prop) in keys[key]" :label="name" v-if="prop != '_name'" :key="prop">
+							<template slot-scope="scope">
+								<el-input v-if="prop == 'legend'" v-model="scope.row[prop]"></el-input>
+								<el-input v-else-if="prop == 'value'" v-model="scope.row[prop]"></el-input>
+								<span v-else>{{ scope.row[prop] }}</span>
+							</template>
+						</el-table-column>
+						<el-table-column label="操作" fixed="right" width="50">
+							<template slot-scope="scope">
+								<el-button type="danger" icon="el-icon-delete" circle @click="value[key].splice(scope.$index,1)"></el-button>
+							</template>
+						</el-table-column>
+					</el-table>
+				</el-form-item>
+				<component
+					:label="keys[key]._name"
+					v-else
+					:is="va | arrayType"
+					:value="va"
+					:keys="keys[key]"
+					:headers="value['tabHeader'] || []"
+					@change="change"
+					:changeData="changeData"
+				></component>
+			</div>
+			<template v-else>
+				<el-form-item :label="keys[key] || key" v-if="keys[key] && key != '_caveat'"><el-input v-model="value[key]" type="textarea"></el-input></el-form-item>
+				<el-alert style="margin-bottom: 10px;" v-if="key == '_caveat'" :title="value[key]" type="error" effect="dark" :closable="false"></el-alert>
+			</template>
+		</span>
+		<el-drawer class="map-address-drawer" size="60%" direction="ltr" :append-to-body="true" :visible.sync="mapInnerDrawer">
+			<template slot="title">
+				<div>{{ mapTitle }}</div>
+				<el-form style="margin-right: 10px;" label-width="6em" size="mini">
+					<el-form-item style="margin-bottom: 0;" label="地名查询">
+						<el-select style="width: 26em;" v-model="mapAddress" filterable placeholder="请输入关键字" remote :remote-method="remoteMethod" @change="addressChange">
+							<el-option v-for="(item, index) in addressTips" :key="item.id" :label="item.name" :value="index" v-if="item.location">
+								<span style="float: left">{{ item.name }}</span>
+								<span style="float: right; color: #8492a6; font-size: 13px">{{ item.district + item.address }}</span>
+							</el-option>
+						</el-select>
+					</el-form-item>
+				</el-form>
+			</template>
+			<el-card class="box-card" style="position: absolute;top: 100px;left: 30px;z-index: 9999;">
+				<div slot="header" class="clearfix"><span>操作说明</span></div>
+				<div>1、圆和矩形通过拖拽来绘制</div>
+				<div>2、其他覆盖物通过点击来绘制、双击结束绘制</div>
+				<div style="color: red;">3、右键单击图形清除绘制</div>
+				<div style="color: red;">4、图形上左键双击再次编辑,再双击结束编辑</div>
+				<div>
+					<el-radio v-model="coversType" label="marker">画点</el-radio>
+					<el-radio v-model="coversType" label="polyline">画折线</el-radio>
+					<el-radio v-model="coversType" label="polygon">画多边形</el-radio>
+					<el-radio v-model="coversType" label="rectangle">画矩形</el-radio>
+					<el-radio v-model="coversType" label="circle">画圆</el-radio>
+				</div>
+			</el-card>
+			<div ref="amap" style="width: 100%;height: 100%;position: relative;"></div>
+		</el-drawer>
+	</el-form>
+</template>
+
+<script>
+import tplArray from './dataTypeTpl/array1Obj.vue';
+export default {
+	name: 'AMap',
+	components: {
+		tplArray
+	},
+	props: {
+		value: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		keys: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		inline: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			//关键字搜索
+			mapAddress: '',
+			addressTips: [],
+			//地图
+			mapInnerDrawer: false,
+			mapTitle: '',
+			center: [106.630153, 26.647661],
+			events: '',
+			//表头变化
+			changeData: {},
+			//保存的轮廓数据Id
+			overlaysId: [],
+			//覆盖物绘画类型
+			coversType: 'polygon',
+			mouseTool: null
+		};
+	},
+	//检测数组 - 对应数据结构类型
+	filters: {
+		arrayType(value) {
+			return value.length ? (Array.isArray(value[0]) ? 'tplTabArray' : 'tplArray') : 'tplArray';
+		}
+	},
+	watch: {
+		coversType(n, v) {
+			this.mouseTool[n]();
+		}
+	},
+	mounted() {
+		//输入提示 多边形编辑器插件
+		AMap.plugin(['AMap.Autocomplete', 'AMap.PolyEditor', 'AMap.ToolBar','AMap.MouseTool'], () => {
+			//输入提示
+			this.autocomplete = new AMap.Autocomplete();
+			this.autocomplete.on('complete', e => {
+				this.addressTips = e.tips || [];
+			});
+		});
+	},
+	methods: {
+		clickCenter(value) {
+			this.mapTitle = '鼠标双击选择点';
+			this.mapInnerDrawer = true;
+			this.initmap().then(map => {
+				map.on('dblclick', e => {
+					value.splice(0, 1, e.lnglat.getLng());
+					value.splice(1, 1, e.lnglat.getLat());
+					this.$message({
+						message: `中心点更新为${value.toString()}`,
+						showClose: true,
+						type: 'success'
+					});
+				});
+			});
+		},
+		clickPolygon(value, key) {
+			this.coversKey = key;
+			this.mapTitle = '鼠标点击绘画轮廓';
+			this.mapInnerDrawer = true;
+			this.initmap().then(map => {
+				//添加轮廓绘画工具
+				this.mouseTool = new AMap.MouseTool(map);
+				//监听draw事件可获取画好的覆盖物
+				this.mouseTool.on('draw', e => {
+					this.addPolyDraw(e.obj,value[key]);
+				});
+				this.mouseTool[this.coversType]();
+				//同步数据ID
+				const fgw = value[key].map((x, i) => {
+					const id = x.id || i+1;
+					this.overlaysId.includes(id) || this.overlaysId.push(id);
+					let m = null;
+					switch (x.type) {
+						case 'Marker':
+							m = new AMap[x.type]({
+								position: x.position,
+								icon: x.iconm,
+								draggable:true
+							});
+							break;
+						case 'Circle':
+							m = new AMap[x.type]({
+								center: { ...x.center },
+								radius: x.radius,
+								...x.style
+							});
+							break;
+						case 'Polygon':
+						case 'Polyline':
+							m = new AMap[x.type]({
+								path: [...x.path],
+								...x.style
+							});
+							break;
+					}
+					if (m) {
+						let pEdit = null;
+						m.on('rightclick', e => {
+							pEdit && pEdit.close();
+							map.remove(e.target);
+							const idIndex = this.overlaysId.indexOf(id);
+							idIndex > -1 && value[key].splice(idIndex, 1);
+							idIndex > -1 && this.overlaysId.splice(idIndex, 1);
+						});
+						this.initEdit(m,map,value[key][i],e=>pEdit=e);
+						map.add(m);
+					}
+					return m;
+				});
+				setTimeout(() => {
+					// map.setFitView(fgw, true, [0, 0, 0, 0], 17.5);
+					map.setFitView(fgw, true, [-100, -100, -100, -100], 17.5);
+					map.setZoom(17.5);
+				}, 500);
+			});
+		},
+		//启用修改理
+		initEdit(m,map,value,fun) {
+			// 实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
+			const pe = new AMap.PolyEditor(map, m);
+			let __edit = false;
+			//编辑
+			m.on('dblclick', e => {
+				//关闭绘图
+				this.mouseTool.close();
+				// 开启编辑模式
+				(__edit = !__edit)?pe.open():pe.close();
+			});
+			//结束编辑
+			pe.on("end",e=>{
+				//开启绘图
+				this.mouseTool[this.coversType]();
+				value && this.addPolyDraw(e.target,value,true);
+			});
+			typeof fun == "function" && fun(pe);
+		},
+		//新增图形处理函数
+		addPolyDraw(e,value,_id){
+			const type = e.CLASS_NAME.split('.')[1],
+				id = e._amap_id;
+			// typeof e.setDraggable == "function" && e.setDraggable(true);
+			switch (type) {
+				case 'Marker':
+					const position = e.getPosition();
+					!_id?value.push({
+						id,
+						type,
+						position,
+						legend: 1,
+						value: ''
+					}):(value.position = position);
+					break;
+				case 'Circle':
+					//获取中心
+					const center = e.getCenter(),
+						//获取半径
+						radius = e.getRadius();
+					if(!_id){
+						value.push({
+							id,
+							type,
+							center,
+							radius,
+							legend: 1,
+							value: ''
+						})
+					}else{
+						value.center = center;
+						value.radius = radius;
+					}
+					break;
+				case 'Polygon':
+				case 'Polyline':
+					const path = e.getPath().map(x => {
+						return [x.lng, x.lat];
+					});
+					if(!_id){
+						value.push({
+							id,
+							type,
+							path,
+							legend: 1,
+							value: ''
+						})
+					}else{
+						value.path = path;
+					}
+					break;
+			}
+			this.initEdit(e,this.mapObject,null,pe=>{
+				if(!_id){
+					this.overlaysId.push(id);
+					//对画好的覆盖物绑定事件
+					e.on('rightclick', e => {
+						pe.close();
+						this.mapObject.remove(e.target);
+						const idIndex = this.overlaysId.indexOf(id);
+						idIndex > -1 && value.splice(idIndex, 1);
+						idIndex > -1 && this.overlaysId.splice(idIndex, 1);
+					});
+				}
+			});
+		},
+		change(data) {
+			this.changeData = data;
+		},
+		initmap() {
+			return this.getAMap().then(div => {
+				this.mapObject = new AMap.Map(div, {
+					layers: [
+						// 卫星
+						new AMap.TileLayer({
+							tileUrl: 'https://mt3.google.cn/vt/imgtp=png32&lyrs=y&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil',
+							zIndex: 2 // 在默认层级之上
+						})
+					],
+					resizeEnable: true, //是否监控地图容器尺寸变化
+					zoom: 10, //初始化地图层级
+					...this.value.map
+				});
+				this.mapObject.addControl(
+					new AMap.ToolBar({
+						position: 'RT'
+					})
+				);
+				return this.mapObject;
+			});
+		},
+		getAMap(i = 0) {
+			if (this.$refs.amap) {
+				return new Promise(r => {
+					r(this.$refs.amap);
+				});
+			} else if (i < 5) {
+				return new Promise(r => {
+					setTimeout(() => {
+						r(this.getAMap(i++));
+					}, 500);
+				});
+			}
+		},
+		remoteMethod(e) {
+			if (!this.autocomplete) return;
+			this.autocomplete.search(e);
+		},
+		addressChange(e) {
+			this.mapObject.setZoomAndCenter(17,this.addressTips[e].location);
+		}
+	}
+};
+</script>
+<style>
+.map-address-drawer #el-drawer__title {
+	margin-bottom: 20px;
+	flex: none;
+}
+</style>

src/components/tplEdit/All.vue

@@ -0,0 +1,71 @@
+<template>
+	<el-form label-width="80px" size="mini" :inline="inline">
+		<span v-for="(va, key) in value" :key="key">
+			<all v-if="includes(va, 'Object')" :value="va" :keys="keys[key] || {}"></all>
+			<div v-else-if="includes(va, 'Array') && keys[key]">
+				<!-- 对象数组 多维数组 -->
+				<component :is="va | arrayType" :value="va" :keys="keys[key]" :headers="value['tabHeader'] || []" @change="change" :changeData="changeData"></component>
+			</div>
+			<template v-else>
+				<el-form-item :label="keys[key] || key" v-if="keys[key] && key != '_caveat'">
+					<el-input v-model="value[key]" type="textarea"></el-input>
+				</el-form-item>
+				<el-alert
+					style="margin-bottom: 10px;"
+					v-if="key == '_caveat'"
+				    :title="value[key]"
+				    type="error"
+				    effect="dark"
+					:closable="false">
+				  </el-alert>
+			</template>
+		</span>
+	</el-form>
+</template>
+
+<script>
+import tplArray from './dataTypeTpl/array1Obj.vue';
+import tplTabArray from './dataTypeTpl/array2Arr.vue';
+export default {
+	name:"All",
+	components: {
+		tplArray,
+		tplTabArray
+	},
+	props: {
+		value: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		keys: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		inline:{
+			type:Boolean,
+			default:false
+		}
+	},
+	data(){
+		return {
+			//表头变化
+			changeData:{}
+		}
+	},
+	filters:{
+		//检测数组 - 对应数据结构类型
+		arrayType(value){
+			return value.length?(Array.isArray(value[0])?'tplTabArray':'tplArray'):'tplArray';
+		}
+	},
+	methods:{
+		change(data){
+			this.changeData = data;
+		}
+	}
+};
+</script>

src/components/tplEdit/DistributedList.vue

@@ -0,0 +1,99 @@
+<template>
+	<el-form label-width="0" size="mini" :inline="inline">
+		<el-form-item label="">
+			<span v-for="(va, key) in value" :key="key">
+				<distributed-list v-if="includes(va, 'Object')" :value="va" :keys="keys[key] || {}" />
+				<div v-else-if="includes(va, 'Array') && keys[key]">
+					<el-table :data="value[key]" border style="width: 100%">
+						<el-table-column v-for="(name, prop) in keys[key]" :label="name" v-if="prop != '_name'" :key="prop" :width='prop == "info" && 300'>
+							<template slot-scope="scope">
+								<template v-if="prop == 'info'">
+									<el-table :data="scope.row[prop]" border style="width: 100%" :show-header="false">
+										<el-table-column>
+											<template slot-scope="sc">
+												<el-input v-model="sc.row.value"></el-input>
+											</template>
+										</el-table-column>
+										<el-table-column width="100">
+											<template slot-scope="sc">
+												<el-button v-if="sc.$index > 0" type="danger" icon="el-icon-delete" circle @click="scope.row[prop].splice(sc.$index,1)"></el-button>
+												<el-button type="primary" icon="el-icon-plus" circle @click="scope.row[prop].splice(sc.$index,0,{value:'信息'})"></el-button>
+											</template>
+										</el-table-column>
+									</el-table>
+								</template>
+								<template v-if="prop == 'addmap'">
+									
+								</template>
+								<el-input v-else v-model="scope.row[prop]"></el-input>
+							</template>
+						</el-table-column>
+						<el-table-column label="操作" fixed="right" width="100">
+							<template slot-scope="scope">
+								<el-button v-if="scope.$index > 0" type="danger" icon="el-icon-delete" circle @click="del(scope.$index)"></el-button>
+								<el-button type="primary" icon="el-icon-plus" circle @click="add(scope.$index)"></el-button>
+							</template>
+						</el-table-column>
+						<template slot="empty">
+							<el-button type="primary" @click="add(-1)">新增</el-button>
+						</template>
+					</el-table>
+				</div>
+			</span>
+		</el-form-item>
+	</el-form>
+</template>
+
+<script>
+	import md5 from "md5";
+export default {
+	name: 'DistributedList',
+	props: {
+		value: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		keys: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		inline: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			
+		};
+	},
+	methods: {
+		add(index) {
+			//如果数据其他项没有ID 则取下标作为ID
+			let newId = [],
+				time = new Date().getTime();
+			this.value.list.map((x, i) => {
+				const id = x.id || (x.id + '' == 'undefined' ? false : x.id + ''),
+					_id = md5(`${i}${time}`);
+				id || (this.value.list[i].id = _id);
+				newId.push(this.value.list[i].id);
+				//处理菜单
+				x.path && (this.value.list[i].uId = md5(x.path).slice(5, 10));
+			});
+			newId.push(time);
+			/**
+			 * 计算该新增项的ID
+			 * 取其他数据项ID相加+时间戳 md5 = 该新增项ID
+			 */
+			this.value.list.splice(index + 1, 0, JSON.parse(JSON.stringify({...(this.value.list[index] || this.keys), id: md5(newId.join('-')) })));
+		},
+		del(index) {
+			this.value.list.splice(index, 1);
+		}
+	}
+};
+</script>

src/components/tplEdit/DistributedList/index.vue

@@ -0,0 +1,317 @@
+<template>
+	<el-form label-width="80" size="mini" :inline="inline">
+		<el-form-item label="" v-for="(va, key) in value" :key="key">
+			<distributed-list v-if="includes(va, 'Object')" :value="va" :keys="keys[key] || {}" />
+			<div v-else-if="includes(va, 'Array') && keys[key]">
+				<el-table :data="value[key]" border style="width: 100%">
+					<el-table-column type="index" width="30"></el-table-column>
+					<el-table-column v-for="(name, prop) in keys[key]" :label="name" v-if="prop != '_name'" :key="prop" :width="prop == 'info' && 300">
+						<template slot-scope="scope">
+							<template v-if="prop == 'info'">
+								<el-table :data="scope.row[prop]" border style="width: 100%" :show-header="false">
+									<el-table-column>
+										<template slot-scope="sc">
+											<el-color-picker v-if="prop == 'color'" v-model="sc.row.value"></el-color-picker>
+											<template v-else>
+												<el-input v-model="sc.row.value"></el-input>
+											</template>
+										</template>
+									</el-table-column>
+									<el-table-column width="100">
+										<template slot-scope="sc">
+											<el-button v-if="sc.$index > 0" type="danger" icon="el-icon-delete" circle @click="scope.row[prop].splice(sc.$index, 1)"></el-button>
+											<el-button type="primary" icon="el-icon-plus" circle @click="scope.row[prop].splice(sc.$index, 0, { value: '信息' })"></el-button>
+										</template>
+									</el-table-column>
+								</el-table>
+							</template>
+							<template v-else-if="prop == 'addmap'">
+								<el-button type="primary" @click="mapedit(scope.row, scope.$index)">编辑</el-button>
+							</template>
+							<template v-else>
+								<el-color-picker v-if="prop == 'color'" v-model="scope.row[prop]"></el-color-picker>
+								<el-input v-else v-model="scope.row[prop]"></el-input>
+							</template>
+						</template>
+					</el-table-column>
+					<el-table-column label="操作" fixed="right" width="100">
+						<template slot-scope="scope">
+							<el-button v-if="scope.$index > 0" type="danger" icon="el-icon-delete" circle @click="del(scope.$index,value[key])"></el-button>
+							<el-button type="primary" icon="el-icon-plus" circle @click="add(scope.$index,value[key])"></el-button>
+						</template>
+					</el-table-column>
+					<template slot="empty">
+						<el-button type="primary" @click="add(-1)">新增</el-button>
+					</template>
+				</el-table>
+			</div>
+			<template v-else>
+				<el-form-item :label="keys[key] || key" v-if="keys[key] && key != '_caveat'"><el-input v-model="value[key]" type="textarea"></el-input></el-form-item>
+				<el-alert style="margin-bottom: 10px;" v-if="key == '_caveat'" :title="value[key]" type="error" effect="dark" :closable="false"></el-alert>
+			</template>
+		</el-form-item>
+		<el-drawer class="map-address-drawer" size="60%" direction="ltr" :append-to-body="true" :visible.sync="mapInnerDrawer">
+			<template slot="title">
+				<div>{{ mapTitle }}</div>
+				<el-form style="margin-right: 10px;" label-width="6em" size="mini">
+					<el-form-item style="margin-bottom: 0;" label="地名查询">
+						<el-select style="width: 26em;" v-model="mapAddress" filterable placeholder="请输入关键字" remote :remote-method="remoteMethod" @change="addressChange">
+							<el-option v-for="(item, index) in addressTips" :key="item.id" :label="item.name" :value="index" v-if="item.location">
+								<span style="float: left">{{ item.name }}</span>
+								<span style="float: right; color: #8492a6; font-size: 13px">{{ item.district + item.address }}</span>
+							</el-option>
+						</el-select>
+					</el-form-item>
+				</el-form>
+			</template>
+			<div ref="amap" style="width: 100%;height: 100%;position: relative;"></div>
+			<el-card class="box-card" style="position: absolute;top: 100px;left: 30px;right:30px;z-index: 9999;">
+				<el-form ref="form" :model="indexEditValue" label-width="60px" size="mini">
+					<el-form-item label="名称"><el-input v-model="indexEditValue.name"></el-input></el-form-item>
+					<!-- <el-form-item label="地址">
+						<div style="display: flex;">
+							<el-input v-model="indexEditValue.url"></el-input>
+							<el-button type="primary" size="mini" style="margin-left: 5px;" @click="drawerJkList = true">选择监控</el-button>
+						</div>
+					</el-form-item> -->
+					<el-form-item label="坐标">{{ indexEditValue.lnglat }}</el-form-item>
+				</el-form>
+			</el-card>
+			<el-drawer :modal="false" title="监控列表" :visible.sync="drawerJkList" direction="rtl" class="monitor-list-1">
+				<div class="m-box">
+					<li v-for="(x, key) in monitorList" :key="key">
+						<el-radio v-model="indexEditValue.url" style="padding: 0 2px;" :label="x.url">
+							<el-image class="el-image" :src="x.picUrl"></el-image>
+							{{ x.channelName }}
+						</el-radio>
+					</li>
+				</div>
+			</el-drawer>
+		</el-drawer>
+	</el-form>
+</template>
+
+<script>
+import md5 from 'md5';
+export default {
+	name: 'DistributedList',
+	props: {
+		value: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		keys: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		inline: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			//地图
+			mapInnerDrawer: false,
+			mapTitle: '',
+			//关键字搜索
+			mapAddress: '',
+			addressTips: [],
+			indexEditValue: {
+				id: 0,
+				areaId: '区域',
+				name: '名称',
+				url: '',
+				lnglat: []
+			},
+			drawerJkList: false,
+			monitorList: []
+		};
+	},
+	mounted() {
+		this.$port.getMonitorList().then(res => {
+			this.monitorList = res;
+		});
+		AMap.plugin('AMap.Autocomplete', () => {
+			//输入提示
+			this.autocomplete = new AMap.Autocomplete();
+			this.autocomplete.on('complete', e => {
+				this.addressTips = e.tips || [];
+			});
+		});
+	},
+	watch: {
+		'indexEditValue.url'(n, v) {
+			if (!n.split('ezopen://')[0]) {
+				//this.makeUrl(n);
+			}
+		}
+	},
+	methods: {
+		makeUrl(url) {
+			this.$port.getMonitorToken().then(res => {
+				this.indexEditValue.url = `https://open.ys7.com/ezopen/h5/iframe?url=
+				${this.indexEditValue.url}&autoplay=1&accessToken=${res.accessToken}`;
+			});
+		},
+		mapedit(value) {
+			this.mapTitle = '地图数据编辑';
+			this.mapInnerDrawer = true;
+			this.indexEditValue = value;
+			this.initmap(value).then(map => {
+				this.mapObject.on('click', e => {
+					value.lnglat = [e.lnglat.lng, e.lnglat.lat];
+					this.addMarker(value);
+				});
+				this.addMarker(value);
+			});
+		},
+		initmap(value) {
+			return this.getAMap().then(div => {
+				this.mapObject = new AMap.Map(div, {
+					layers: [
+						// 卫星
+						// new AMap.TileLayer.Satellite(),
+						new AMap.TileLayer.WMTS({
+							url: 'http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
+							blend: false,
+							tileSize: 256,
+							// zIndex:1,
+							visible: true,
+							params: {
+								f: 'jsapi'
+							}
+						}),
+						// 路网
+						new AMap.TileLayer.RoadNet()
+					],
+					resizeEnable: true, //是否监控地图容器尺寸变化
+					zoom: 13 //初始化地图层级
+				});
+				return this.mapObject;
+			});
+		},
+		// 实例化点标记
+		addMarker(value) {
+			this.mapObject.clearMap();
+			//坐标转换
+			AMap.convertFrom(value.lnglat, 'amap', (status, result) => {
+				if (result.info === 'ok') {
+					var resLnglat = result.locations[0];
+					const marker = new AMap.Marker({
+						content: "<i class='amap-marker-calss-s'></i>",
+						position: resLnglat
+					});
+					marker.setMap(this.mapObject);
+					this.mapObject.setFitView(null, true, [0, 0, 0, 0], 17.5);
+				}
+			});
+		},
+		getAMap(i = 0) {
+			if (this.$refs.amap) {
+				return new Promise(r => {
+					r(this.$refs.amap);
+				});
+			} else if (i < 5) {
+				return new Promise(r => {
+					setTimeout(() => {
+						r(this.getAMap(i++));
+					}, 500);
+				});
+			}
+		},
+		addressChange(e) {
+			AMap.convertFrom(this.addressTips[e].location, 'amap', (status, result) => {
+				this.mapObject.setZoomAndCenter(17, result.locations[0]);
+			});
+		},
+		remoteMethod(e) {
+			if (!this.autocomplete) return;
+			this.autocomplete.search(e);
+		},
+		add(index,value) {
+			//如果数据其他项没有ID 则取下标作为ID
+			let newId = [],
+				time = new Date().getTime();
+			value.map((x, i) => {
+				const id = x.id || (x.id + '' == 'undefined' ? false : x.id + ''),
+					_id = md5(`${i}${time}`);
+				id || (value[i].id = _id);
+				newId.push(value[i].id);
+			});
+			newId.push(time);
+			value.splice(index + 1, 0, JSON.parse(JSON.stringify({ ...(value[index] || def), id: md5(newId.join('-')) })));
+		},
+		del(index,value) {
+			value.splice(index, 1);
+		}
+	}
+};
+</script>
+<style lang="less">
+@keyframes myfirst {
+	from {
+		transform: scale(0.5);
+		opacity: 1;
+	}
+
+	to {
+		transform: scale(4);
+		opacity: 0;
+	}
+}
+.monitor-list-1 {
+	.m-box {
+		margin: 20px;
+		list-style-type: none;
+		height: 92vh;
+		overflow: auto;
+		& > li {
+			border-radius: 4px;
+			overflow: hidden;
+			box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
+			margin: 5px;
+			.el-image {
+				display: inline-block;
+				width: 32%;
+			}
+		}
+	}
+}
+
+.amap-marker-calss-s {
+	height: 30px;
+	width: 30px;
+	border-radius: 50%;
+	background: red;
+	position: relative;
+	display: block;
+	&:after,
+	&:before {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		border: 1px solid #ff0000;
+		box-shadow: 0 0 5px 0 #ff0000, 0 0 5px 0 #ff0000 inset;
+		border-radius: 50%;
+	}
+	&:after {
+		animation: myfirst 1s ease-out infinite;
+	}
+	&:before {
+		animation: myfirst 1s ease-in infinite;
+		animation-delay: 500ms;
+	}
+}
+.map-address-drawer #el-drawer__title {
+	margin-bottom: 20px;
+	flex: none;
+}
+</style>

src/components/tplEdit/Echarts/ArrObj.vue

@@ -0,0 +1,60 @@
+<template>
+	<el-form-item :label="keys._name || label">
+		<el-table :data="value" border style="width: 100%;" size="mini" max-height="400">
+			<el-table-column v-for="(name, prop) in keys" :label="name" v-if="prop != '_name'" :key="prop" min-width="100">
+				<template slot-scope="scope">
+					<el-color-picker v-if="prop == 'color'" v-model="scope.row[prop]"></el-color-picker>
+					<template v-else>
+						<el-input v-model="scope.row[prop]"></el-input>
+					</template>
+				</template>
+			</el-table-column>
+			<el-table-column label="操作" fixed="right" width="100">
+				<template slot-scope="scope">
+					<el-button type="danger" icon="el-icon-delete" circle @click="del(scope.$index)"></el-button>
+					<el-button type="primary" icon="el-icon-plus" circle @click="add(scope.$index)"></el-button>
+				</template>
+			</el-table-column>
+			<template slot="empty">
+				<el-button type="primary" @click="add(-1)">新增</el-button>
+			</template>
+		</el-table>
+	</el-form-item>
+</template>
+
+<script>
+export default {
+	name: 'tplArray',
+	props: {
+		value: {
+			type: Array,
+			default() {
+				return {};
+			}
+		},
+		keys: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		label:{
+			type: String,
+			default() {
+				return "数据集";
+			}
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		add(index) {
+			this.value.splice(index + 1, 0, {...(this.value[index] || this.keys)});
+		},
+		del(index) {
+			this.value.splice(index, 1);
+		}
+	}
+};
+</script>

src/components/tplEdit/Echarts/Echarts.vue

@@ -0,0 +1,43 @@
+<template>
+	<el-form label-width="80px" size="mini" :inline="inline">
+		<span v-for="(va, key) in value" :key="key">
+			<Echarts v-if="includes(va, 'Object')" :value="va" :keys="keys[key] || {}"></Echarts>
+			<template v-else-if="includes(va, 'Array') && keys[key]">
+				<Echarts v-if="key == 'series'" v-for="(ser,serKey) in va" :key="serKey" :value="ser" :keys="keys[key]"></Echarts>
+				<arr-obj v-if="key != 'series'" :value="va" :keys="keys[key]"></arr-obj>
+			</template>
+			<template v-else>
+				<el-form-item :label="keys[key] || key" v-if="keys[key] && key != '_caveat'"><el-input v-model="value[key]" type="textarea"></el-input></el-form-item>
+				<el-alert style="margin-bottom: 10px;" v-if="key == '_caveat'" :title="value[key]" type="error" effect="dark" :closable="false"></el-alert>
+			</template>
+		</span>
+	</el-form>
+</template>
+
+<script>
+import ArrObj from './ArrObj.vue';
+export default {
+	name: 'Echarts',
+	components:{
+		ArrObj
+	},
+	props: {
+		value: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		keys: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		inline: {
+			type: Boolean,
+			default: false
+		}
+	}
+};
+</script>

src/components/tplEdit/MonitorList.vue

@@ -0,0 +1,116 @@
+<template>
+	<el-form label-width="80px" size="mini" :inline="inline" class="monitor-list-form">
+		<el-form-item label="可用监控">
+			<el-checkbox-group v-model="checkList" class="m-box">
+			    <li v-for="(x, key) in monitorList" :key="key">
+			    	<el-image class="el-image" :src="x.picUrl" :preview-src-list="[x.picUrl]"></el-image>
+			    	<el-checkbox style="padding: 0 2px;" :label="x">{{ x.channelName }}</el-checkbox>
+			    </li>
+			</el-checkbox-group>
+		</el-form-item>
+		<span v-for="(va, key) in value" :key="key">
+			<all v-if="includes(va, 'Object')" :value="va" :keys="keys[key] || {}"></all>
+			<div v-else-if="includes(va, 'Array') && keys[key]">
+				<component :is="va | arrayType" :value="va" :keys="keys[key]" :headers="value['tabHeader'] || []" @change="change" :changeData="changeData"></component>
+			</div>
+			<template v-else>
+				<el-form-item :label="keys[key] || key" v-if="keys[key] && key != '_caveat'"><el-input v-model="value[key]" type="textarea"></el-input></el-form-item>
+				<el-alert style="margin-bottom: 10px;" v-if="key == '_caveat'" :title="value[key]" type="error" effect="dark" :closable="false"></el-alert>
+			</template>
+		</span>
+	</el-form>
+</template>
+
+<script>
+import tplArray from './dataTypeTpl/array1Obj.vue';
+import tplTabArray from './dataTypeTpl/array2Arr.vue';
+export default {
+	name: 'All',
+	components: {
+		tplArray,
+		tplTabArray
+	},
+	props: {
+		value: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		keys: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		inline: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			//表头变化
+			changeData: {},
+			//摄像头列表
+			monitorList: [],
+			checkList:[]
+		};
+	},
+	watch:{
+		"checkList.length"(n){
+			this.value.list = this.checkList.map(x=>{
+				return {
+					...x,
+					name:x.channelName
+				};
+			});
+		}
+	},
+	mounted() {
+		this.$port.getMonitorList().then(res => {
+			this.monitorList = res;
+			let value = Object.assign({},this.value).list;
+			//初始化checkList
+			this.checkList = res.filter((x,i)=>{
+				for(let v = 0,c = 0;c = value[v];v++){
+					if(c.url==x.url){
+						value.splice(c,1);
+						return x;
+					}
+				}
+			});
+		});
+	},
+	//检测数组 - 对应数据结构类型
+	filters: {
+		arrayType(value) {
+			return value.length ? (Array.isArray(value[0]) ? 'tplTabArray' : 'tplArray') : 'tplArray';
+		}
+	},
+	methods: {
+		change(data) {
+			this.changeData = data;
+		}
+	}
+};
+</script>
+<style lang="less">
+.monitor-list-form {
+	.m-box {
+		display: flex;
+		list-style-type: none;
+		flex-wrap: wrap;
+		& > li {
+			width: calc(33.33% - 10px);
+			border-radius: 4px;
+			overflow: hidden;
+			box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
+			margin: 5px;
+			.el-image {
+				width: 100%;
+			}
+		}
+	}
+}
+</style>

src/components/tplEdit/ProfessorDoc.vue

@@ -0,0 +1,135 @@
+<template>
+	<el-form label-width="80px" size="mini" :inline="inline">
+		<div v-for="(va, key) in value" :key="key">
+			<template v-if="includes(va,'Array')">
+				<div class="item-box" v-for="(i, index) in va" :key="index">
+					<el-button class="close-btn" icon="el-icon-close" circle @click="value[key].splice(index,1)"></el-button>
+					<el-popover width="300" placement="right" trigger="hover">
+						<el-form label-width="80px">
+							<el-upload style="margin-bottom: 10px;" :limit="1" :action="action" :on-success="success" :on-exceed="limit" :file-list="upfileList">
+								<el-button type="primary" @click="clickUp(index)">
+									本地上传
+									<i class="el-icon-upload el-icon--right"></i>
+								</el-button>
+								<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且只能上传一张</div>
+							</el-upload>
+							<el-form-item label="网络地址:" style="margin-bottom: 0;"><el-input class="el-input" v-model="i.imgUrl"></el-input></el-form-item>
+						</el-form>
+						<el-image slot="reference" :src="i.imgUrl" :preview-src-list="[i.imgUrl]" class="item-box-img" fit="fill">
+							<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
+						</el-image>
+					</el-popover>
+				</div>
+				<div style="width: 100%;text-align: center;">
+					<el-button type="primary" style="font-size: 22px;" @click="value[key].push({...keys[key]})"><i class="el-icon-plus"></i></el-button>
+				</div>
+			</template>
+			<template v-else>
+				<el-form-item :label="keys[key] || key" v-if="keys[key]">
+					<el-input v-model="value[key]"></el-input>
+				</el-form-item>
+			</template>
+		</div>
+	</el-form>
+</template>
+
+<script>
+export default {
+	props: {
+		value: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		keys: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		inline:{
+			type:Boolean,
+			default:false
+		}
+	},
+	data() {
+		return {
+			upIndex: 0, //当前上传项
+			upfileList: []
+		};
+	},
+	computed: {
+		action() {
+			return this.$fileUpServer + '/file/uploadFile?fileType=map';
+		}
+	},
+	methods: {
+		clickUp(index) {
+			this.upfileList = [];
+			this.upIndex = index;
+		},
+		//上传照片
+		success(e) {
+			this.$port.upIuccess(e).then(res => {
+				const src = res.fileUrl;
+				this.value.list[this.upIndex].imgUrl = src.indexOf('http://') == 0 || src.indexOf('https://') == 0 ? src : this.$fileServer + '/' + src;
+			});
+		},
+		//文件超限
+		limit(e) {
+			this.$message.error('只能上传一张');
+		}
+	}
+};
+</script>
+
+<style lang="less">
+.item-box {
+	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+	border-radius: 5px;
+	padding: 5px;
+	margin: 15px;
+	display: inline-block;
+	vertical-align: top;
+	position: relative;
+	.close-btn{
+		position: absolute;
+		right: 0;
+		top: 0;
+		z-index: 5;
+		padding: 5px;
+		transform: translateX(50%) translateY(-50%);
+	}
+	&-img {
+		width: 120px;
+		height: 120px;
+		margin-right: 5px;
+		.image-slot {
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 40px;
+			color: #cccccc;
+		}
+	}
+	&-text {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		.el-input {
+			margin: 2px 0;
+		}
+	}
+	.add-img {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: #000000;
+	}
+}
+</style>

src/components/tplEdit/SwitchLi.vue

@@ -0,0 +1,69 @@
+<template>
+	<el-form label-width="80px" size="mini" :inline="inline">
+		<span v-for="(va, key) in value" :key="key">
+			<all v-if="includes(va, 'Object')" :value="va" :keys="keys[key] || {}"></all>
+			<div v-else-if="includes(va, 'Array') && keys[key]">
+				<component :is="va | arrayType" :value="va" :keys="keys[key]" :headers="value['tabHeader'] || []" @change="change" :changeData="changeData"></component>
+			</div>
+			<template v-else>
+				<el-form-item :label="keys[key] || key" v-if="keys[key] && key != '_caveat'">
+					<el-input v-model="value[key]" type="textarea"></el-input>
+				</el-form-item>
+				<el-alert
+					v-if="key == '_caveat'"
+				    :title="value[key]"
+				    type="error"
+				    effect="dark"
+					:closable="false">
+				  </el-alert>
+			</template>
+		</span>
+	</el-form>
+</template>
+
+<script>
+import tplArray from './dataTypeTpl/array1Obj.vue';
+import array2Obj from './dataTypeTpl/array2Obj.vue';
+export default {
+	name:"All",
+	components: {
+		tplArray,
+		array2Obj
+	},
+	props: {
+		value: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		keys: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		inline:{
+			type:Boolean,
+			default:false
+		}
+	},
+	data(){
+		return {
+			//表头变化
+			changeData:{}
+		}
+	},
+	//检测数组 - 对应数据结构类型
+	filters:{
+		arrayType(value){
+			return value.length?(Array.isArray(value[0])?'array2Obj':'tplArray'):'tplArray';
+		}
+	},
+	methods:{
+		change(data){
+			this.changeData = data;
+		}
+	}
+};
+</script>

src/components/tplEdit/dataTypeTpl/array1Obj.vue

@@ -0,0 +1,93 @@
+<template>
+	<el-form-item :label="keys._name || label">
+		<el-table :data="value" border style="width: 100%;" size="mini" max-height="400">
+			<el-table-column
+			      type="index"
+			      width="50"
+				  label="序号">
+			    </el-table-column>
+			<el-table-column v-for="(name, prop) in keys" :label="name" v-if="prop != '_name'" :key="prop" min-width="100">
+				<template slot-scope="scope">
+					<el-switch v-if="includes(scope.row[prop], 'Boolean')" v-model="scope.row[prop]"></el-switch>
+					<el-color-picker v-else-if="prop == 'color'" v-model="scope.row[prop]"></el-color-picker>
+					<template v-else>
+						<el-input v-model="scope.row[prop]"></el-input>
+					</template>
+				</template>
+			</el-table-column>
+			<el-table-column label="操作" fixed="right" width="100">
+				<template slot-scope="scope">
+					<el-button v-if="scope.$index > 0" type="danger" icon="el-icon-delete" circle @click="del(scope.$index)"></el-button>
+					<el-button type="primary" icon="el-icon-plus" circle @click="add(scope.$index)"></el-button>
+				</template>
+			</el-table-column>
+			<template slot="empty">
+				<el-button type="primary" @click="add(-1)">新增</el-button>
+			</template>
+		</el-table>
+	</el-form-item>
+</template>
+
+<script>
+import md5 from 'md5';
+export default {
+	name: 'tplArray',
+	props: {
+		value: {
+			type: Array,
+			default() {
+				return {};
+			}
+		},
+		keys: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		label:{
+			type: String,
+			default() {
+				return "数据集";
+			}
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		add(index) {
+			this.$emit('change', {
+				keys: this.keys,
+				index,
+				type: 'add'
+			});
+			//如果数据其他项没有ID 则取下标作为ID
+			let newId = [],
+				time = new Date().getTime()+Math.random();
+			this.value.map((x, i) => {
+				const id = x.id || (x.id + '' == 'undefined' ? false : x.id + ''),
+					_id = md5(`${i}${time}`);
+				id || (this.value[i].id = _id);
+				newId.push(this.value[i].id);
+				//处理菜单
+				x.path && (this.value[i].uId = md5(x.path).slice(5, 10));
+			});
+			newId.push(time);
+			/**
+			 * 计算该新增项的ID
+			 * 取其他数据项ID相加+时间戳 md5 = 该新增项ID
+			 */
+			this.value.splice(index + 1, 0, { ...(this.value[index] || this.keys), id: md5(newId.join('-')) });
+		},
+		del(index) {
+			this.$emit('change', {
+				keys: this.keys,
+				index,
+				type: 'del'
+			});
+			this.value.splice(index, 1);
+		}
+	}
+};
+</script>

src/components/tplEdit/dataTypeTpl/array2Arr.vue

@@ -0,0 +1,84 @@
+<template>
+	<el-form-item :label="keys._name || '数据表格'">
+		<el-table :data="value" border style="width: 100%;" size="mini" max-height="400">
+			<el-table-column
+			      type="index"
+			      width="50"
+				  label="序号">
+			    </el-table-column>
+			<el-table-column v-for="(x, index) in headers" :label="x.name" :key="index" min-width="100">
+				<template slot-scope="scope">
+					<el-input v-model="scope.row[index].value"></el-input>
+				</template>
+			</el-table-column>
+			<el-table-column label="操作" fixed="right" width="100">
+				<template slot-scope="scope">
+					<el-button v-if="scope.$index > 0" type="danger" icon="el-icon-delete" circle @click="value.splice(scope.$index,1)"></el-button>
+					<el-button type="primary" icon="el-icon-plus" circle @click="add(scope.$index)"></el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+	</el-form-item>
+</template>
+
+<script>
+export default {
+	name: 'tplTabArray',
+	props: {
+		value: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		keys: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		headers: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		changeData:{
+			type:Object,
+			default(){
+				return {};
+			}
+		}
+	},
+	data(){
+		return {
+			itemKey:this.value[0] || {}
+		}
+	},
+	watch: {
+		//监听检测哪一项发生变化了
+		headers(n){
+			const {index,type} = this.changeData;
+			switch(type){
+				case "add":
+					this.value.map((x,i)=>{
+						this.value[i].splice(index+1, 0, {...this.keys});
+					});
+				break;
+				case "del":
+					this.value.map((x,i)=>{
+						this.value[i].splice(index,1);
+					});
+				break;
+			}
+		}
+	},
+	methods:{
+		add(index){
+			const {length} = this.value,
+			obj = JSON.parse(JSON.stringify({...(this.value[index] || this.itemKey),id:Math.random()+""}));
+			length && this.value.splice(index+1,0,obj);
+		}
+	}
+};
+</script>

src/components/tplEdit/dataTypeTpl/array2Obj.vue

@@ -0,0 +1,85 @@
+<template>
+	<el-form-item :label="keys._name || '数据表格'">
+		<array-2-obj v-for="(x,index) in headers" :keys="[x,keys] | getKeys" :value="value[index]" :key="index"></array-2-obj>
+		<el-table v-if="!headers.length" :data="value" border style="width: 100%;" size="mini" max-height="400">
+			<el-table-column type="index" width="50" label="序号"></el-table-column>
+			<el-table-column v-for="(name,index) in keys" :label="name" v-if="index != '_name'" :key="index" min-width="100">
+				<template slot-scope="scope">
+					<el-input v-model="scope.row[index]"></el-input>
+				</template>
+			</el-table-column>
+			<el-table-column label="操作" fixed="right" width="100">
+				<template slot-scope="scope">
+					<el-button v-if="scope.$index > 0" type="danger" icon="el-icon-delete" circle @click="del(scope.$index)"></el-button>
+					<el-button type="primary" icon="el-icon-plus" circle @click="add(scope.$index)"></el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+	</el-form-item>
+</template>
+
+<script>
+export default {
+	name: 'array2Obj',
+	props: {
+		value: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		keys: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		headers: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		changeData: {
+			type: Object,
+			default() {
+				return {};
+			}
+		}
+	},
+	watch: {
+		//监听检测哪一项发生变化了
+		headers(n) {
+			const { index, type } = this.changeData;
+			switch (type) {
+				case 'add':
+					this.value.splice(index + 1, 0, [...this.value[index]]);
+					break;
+				case 'del':
+					this.value.splice(index, 1);
+					break;
+			}
+		}
+	},
+	filters:{
+		ddd(value){
+			console.log(value);
+			return "100";
+		},
+		getKeys([value,keys]){
+			return {
+				...keys,
+				_name:value.name
+			}
+		}
+	},
+	methods: {
+		add(index) {
+			this.value.splice(index + 1, 0,{...(this.value[index]),id:Math.random()+""});
+		},
+		del(index) {
+			this.value.splice(index,1);
+		}
+	}
+};
+</script>

src/main.js

@@ -0,0 +1,223 @@
+//全局随机数重写
+const random = Math.random;
+Math.random = (a = 0, b = 1, c = 6) => {
+	return (random() * (b - a) + a).toFixed(c) - 0;
+};
+
+import Vue from 'vue';
+
+//全局文件访问地址
+Vue.prototype.$fileServer = '/htdata';
+//全局文件上传地址
+Vue.prototype.$fileUpServer = '/htdata';
+
+//管理数据状态
+import store from './script/store';
+Vue.prototype.$store = store;
+
+//ui框架
+import {
+	Pagination,
+	Dialog, //对话框，弹窗
+	// Autocomplete,
+	Dropdown,
+	DropdownMenu,
+	DropdownItem,
+	Menu, //菜单
+	Submenu, //子菜单
+	MenuItem, //菜单项
+	// MenuItemGroup,
+	Input, //输入框
+	// InputNumber,
+	Radio,
+	RadioGroup,
+	// RadioButton,
+	Checkbox,//复选框
+	// CheckboxButton,
+	CheckboxGroup,//复选框组
+	Switch,//开关
+	Select,
+	Option,
+	// OptionGroup,
+	Button, //按钮
+	// ButtonGroup,
+	Table, //表格
+	TableColumn, //表格
+	DatePicker,
+	// TimeSelect,
+	// TimePicker,
+	Popover, //吸附弹框
+	Tooltip, //文字提示
+	// Breadcrumb,
+	// BreadcrumbItem,
+	Form,
+	FormItem,
+	Tabs,
+	TabPane,
+	Tag,//标签
+	Tree,
+	Alert,//警告提示
+	// Slider,
+	// Icon,
+	Row, //布局
+	Col, //布局
+	Upload, //上传
+	// Progress,
+	// Spinner,
+	// Badge,
+	Card,//卡片
+	// Rate,
+	Steps,
+	Step,
+	// Carousel,
+	// CarouselItem,
+	Collapse, //折叠面板
+	CollapseItem, //折叠项
+	Cascader,
+	ColorPicker,//颜色选择器
+	// Transfer,
+	Container, //布局
+	Header, //头
+	// Aside,
+	Main, //内容
+	Footer, //脚部
+	// Timeline,
+	// TimelineItem,
+	Link,
+	Divider, //分割线
+	Image, //图片
+	// Calendar,
+	// Backtop,
+	// CascaderPanel,
+	Loading, //加载
+	MessageBox, //消息盒子
+	Message, //顶部消息弹框
+	Notification, //消息通知
+	InfiniteScroll, //上拉自动加载
+	PageHeader, //页头
+	Drawer, //抽屉
+} from 'element-ui';
+
+Vue.use(Pagination);
+Vue.use(Dialog);
+// Vue.use(Autocomplete);
+Vue.use(Dropdown);
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);
+Vue.use(Menu);
+Vue.use(Submenu);
+Vue.use(MenuItem);
+// Vue.use(MenuItemGroup);
+Vue.use(Input);
+// Vue.use(InputNumber);
+Vue.use(Radio);
+Vue.use(RadioGroup);
+// Vue.use(RadioButton);
+Vue.use(Checkbox);
+// Vue.use(CheckboxButton);
+Vue.use(CheckboxGroup);
+Vue.use(Switch);
+Vue.use(Select);
+Vue.use(Option);
+// Vue.use(OptionGroup);
+Vue.use(Button);
+// Vue.use(ButtonGroup);
+Vue.use(Table);
+Vue.use(TableColumn);
+Vue.use(DatePicker);
+// Vue.use(TimeSelect);
+// Vue.use(TimePicker);
+Vue.use(Popover);
+Vue.use(Tooltip);
+// Vue.use(Breadcrumb);
+// Vue.use(BreadcrumbItem);
+Vue.use(Form);
+Vue.use(FormItem);
+Vue.use(Tabs);
+Vue.use(TabPane);
+Vue.use(Tag);
+Vue.use(Tree);
+Vue.use(Alert);
+// Vue.use(Slider);
+// Vue.use(Icon);
+Vue.use(Row);
+Vue.use(Col);
+Vue.use(Upload);
+// Vue.use(Progress);
+// Vue.use(Spinner);
+// Vue.use(Badge);
+Vue.use(Card);
+// Vue.use(Rate);
+Vue.use(Steps);
+Vue.use(Step);
+// Vue.use(Carousel);
+// Vue.use(CarouselItem);
+Vue.use(Collapse);
+Vue.use(CollapseItem);
+Vue.use(Cascader);
+Vue.use(ColorPicker);
+// Vue.use(Transfer);
+Vue.use(Container);
+Vue.use(Header);
+// Vue.use(Aside);
+Vue.use(Main);
+Vue.use(Footer);
+// Vue.use(Timeline);
+// Vue.use(TimelineItem);
+Vue.use(Link);
+Vue.use(Divider);
+Vue.use(Image);
+// Vue.use(Calendar);
+// Vue.use(Backtop);
+// Vue.use(CascaderPanel);
+Vue.use(InfiniteScroll);
+Vue.use(PageHeader);
+Vue.use(Drawer); //抽屉
+Vue.use(Loading.directive);
+
+Vue.prototype.$loading = Loading.service;
+Vue.prototype.$msgbox = MessageBox;
+Vue.prototype.$alert = MessageBox.alert;
+Vue.prototype.$confirm = MessageBox.confirm;
+Vue.prototype.$prompt = MessageBox.prompt;
+Vue.prototype.$notify = Notification;
+Vue.prototype.$message = Message;
+
+import './assets/css/main.less';
+
+//全局注册导航组件
+import MySubMenu from './components/mySubMenu.vue';
+Vue.component('MySubMenu', MySubMenu);
+//路由
+import router from './script/router';
+//异步
+import $http from './script/http';
+Vue.prototype.$http = $http;
+//接口
+import $port from './api/interface';
+Vue.prototype.$port = $port;
+//防止多次触发执行 函数
+Vue.prototype.$timeFun = (time = 500, obj = {}) => {
+	//obj传入加载对象 及 加载配置
+	let o = 0,
+		loading = {};
+	return (fun, t) => {
+		clearTimeout(o);
+		typeof loading.close == 'function' && loading.close();
+		loading = typeof obj.loading == 'function' ? obj.loading(obj.loadingConfig || {}) : {};
+		o = setTimeout(() => {
+			fun(loading);
+		}, t || time);
+	}
+}
+//数据类型检测
+Vue.prototype.includes = (a, b) => {
+	const str = Object.prototype.toString.call(a);
+	const type = str.substring(8, str.length - 1);
+	return b ? type.includes(b) : type;
+};
+import App from './App.vue';
+new Vue({
+	router,
+	render: h => h(App)
+}).$mount('#app');

src/public/index.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
+		<meta name="full-screen" content="yes">
+		<meta name="browsermode" content="application">
+		<style type="text/css">
+			html {
+				background: #09071F;
+			}
+
+			* {
+				padding: 0;
+				margin: 0;
+				border: 0;
+			}
+
+			#iframeBox {
+				width: 100vw;
+				overflow: hidden;
+				height: 100vh;
+				position: relative;
+			}
+
+			img {
+				display: block;
+				position: absolute;
+				top: 13px;
+				right: 14px;
+				width: 32px;
+				height: 33px;
+				cursor: pointer;
+				z-index: 9999999;
+			}
+
+			.scale-box {
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform-origin: top left;
+				width: 1920px;
+				height: 1080px;
+			}
+
+			iframe {
+				width: 1920px;
+				height: 1080px;
+			}
+		</style>
+		<script type="text/javascript">
+			/**
+			 * URL参数转换为对象
+			 */
+			Location.prototype.searchObj = function(url) {
+				/**
+				 * 传入的是对象 - 解析为参数字符串 不带？
+				 * 出入是字符串不传入 - 解析为对象
+				 */
+				if (url instanceof Object) {
+					let str = [];
+					for (let i in url) {
+						str.push(`${i}=${url[i]}`);
+					}
+					return str.join('&');
+				} else {
+					var obj = {};
+					var arr = ((url || this.search) + "").match(/[?&][^?&]+=[^?&]+/g);
+					if (arr) {
+						arr.forEach(function(item) {
+							var tempArr = item.substring(1).split('=');
+							obj[decodeURIComponent(tempArr[0])] = decodeURIComponent(tempArr[1]);
+							length++;
+						});
+					}
+					return obj;
+				}
+			}
+
+			function fullScreen(e) {
+				e.stopPropagation();
+				let runPrefixMethod = (element, method) => {
+					let usablePrefixMethod = null;
+					["webkit", "moz", "ms", "o", ""].forEach((prefix) => {
+						if (usablePrefixMethod) return;
+						if (prefix === "") {
+							// 无前缀，方法首字母小写
+							method = method.slice(0, 1).toLowerCase() + method.slice(1);
+						}
+						var typePrefixMethod = typeof element[prefix + method];
+						if (typePrefixMethod + "" !== "undefined") {
+							if (typePrefixMethod === "function") {
+								usablePrefixMethod = element[prefix + method]();
+							} else {
+								usablePrefixMethod = element[prefix + method];
+							}
+						}
+					});
+					return usablePrefixMethod;
+				};
+				if (typeof screenX === "number") {
+					if (runPrefixMethod(document, "FullScreen") || runPrefixMethod(document, "IsFullScreen")) {
+						runPrefixMethod(document, "CancelFullScreen");
+					} else if (runPrefixMethod(document.querySelector("#iframeBox"), "RequestFullScreen")) {
+
+					}
+				} else {
+					alert("浏览器太老了!!");
+				}
+			}
+		</script>
+	</head>
+	<body>
+		<div id="iframeBox">
+			<div class="scale-box">
+				<iframe allow-full-screen="true"></iframe>
+				<img src="fullScreen.png">
+			</div>
+		</div>
+	</body>
+	<script type="text/javascript">
+		var ifr = document.querySelector("#iframeBox");
+		var box = ifr.querySelector('.scale-box');
+		var src = "/screen/?v=" + Math.random() + "#/home/" + (location.searchObj().id || "1") + "/1/";
+		document.querySelector("iframe").src = src;
+
+		function a() {
+			var offsetWidth = ifr.offsetWidth,
+				offsetHeight = ifr.offsetHeight;
+			box.style.transform = `scaleX(${offsetWidth / 1920}) scaleY(${offsetHeight/1080})`;
+		}
+		window.addEventListener('resize', a, false);
+		a();
+		document.querySelector("img").onclick = fullScreen;
+	</script>
+</html>

src/script/http.js

@@ -0,0 +1,30 @@
+import Vue from 'vue';
+import axios from 'axios';
+//登录状态
+let loginStatus = true;
+const service = axios.create({
+	baseURL: '',
+	timeout: 5000,
+});
+
+service.interceptors.request.use(config => {
+	//全局添加头
+	config.headers.accessToken = new Vue().$store.state.accessToken;
+	return config;
+}, error => {
+	return Promise.reject(error);
+});
+service.interceptors.response.use(res => {
+	return res;
+}, (error) => {
+	return {
+		data:{
+			"retHead": {
+				"errCode": 1,
+			},
+			"retBody": {}
+		}
+	}
+	// return Promise.reject(error);
+})
+export default service

src/script/router.js

@@ -0,0 +1,98 @@
+// router.js
+import Vue from 'vue';
+import Router from 'vue-router';
+Vue.use(Router);
+const router = new Router({
+	// mode: 'history',
+	routes: [{
+			path: '/',
+			redirect: '/layout'
+		},
+		{
+			path: '/layout',
+			component: resolve => require(['../view/layout.vue'], resolve),
+			meta: {
+				title: '布局'
+			},
+			children: [
+				{
+					path: '/a-picture',
+					component: resolve => require(['../view/a-picture/index.vue'], resolve),
+					meta: {
+						title: '可视化配置'
+					}
+				},
+				{
+					path: '/a-picture/edit',
+					component: resolve => require(['../view/a-picture/edit.vue'], resolve),
+					meta: {
+						title: '可视化配置'
+					}
+				},
+				{
+					path: '/role',
+					component: resolve => require(['../view/system/role.vue'], resolve),
+					meta: {
+						title: '角色管理'
+					}
+				},
+				{
+					path: '/area-data',
+					component: resolve => require(['../view/areaData/areaData.vue'], resolve),
+					meta: {
+						title: '元数据管理'
+					}
+				},
+				{
+					path: '/help-manage',
+					component: resolve => require(['../view/help-manage/helpManage.vue'], resolve),
+					meta: {
+						title: '产业扶贫'
+					}
+				},
+				{
+					path: '/expert-team',
+					component: resolve => require(['../view/expertTeam/expertTeam.vue'], resolve),
+					meta: {
+						title: '专家团队管理'
+					}
+				},
+				{
+					path: '/dam-manage',
+					component: resolve => require(['../view/damManage/damManage.vue'], resolve),
+					meta: {
+						title: '专题管理管理'
+					}
+				},
+				{
+					path: '/pwd-manage',
+					component: resolve => require(['../view/pwdManage/pwdManage.vue'], resolve),
+					meta: {
+						title: '口令管理'
+					}
+				},
+				{
+					path: '/user',
+					component: resolve => require(['../view/system/user.vue'], resolve),
+					meta: {
+						title: '用户管理'
+					}
+				},{
+					path: '/tpl',
+					component: resolve => require(['../view/system/tpl.vue'], resolve),
+					meta: {
+						title: '模板管理'
+					}
+				}
+			]
+		},
+		{
+			path: '/login',
+			component: resolve => require(['../view/login.vue'], resolve),
+			meta: {
+				title: '登录'
+			}
+		}
+	]
+});
+export default router;

src/script/store.js

@@ -0,0 +1,55 @@
+/**
+ * 登录状态管理
+ * 个人信息数据持久化
+ */
+import Vue from 'vue';
+import Vuex from 'vuex';
+Vue.use(Vuex);
+import md5 from 'md5';
+import {
+	localStorage,
+	sessionStorage,
+	cookieStorage
+} from 'js-storage';
+const userKey = md5("userInfo"),
+	sysTokenKey = md5('accessToken'),
+	userTreeKey = md5('userTree');
+export default new Vuex.Store({
+	state: {
+		hasLogin: false,
+		userInfo: {},
+		userTree:[],
+		accessToken:''
+	},
+	mutations: {
+		login(state) {
+			state.accessToken = sessionStorage.get(sysTokenKey) || '';
+			state.userInfo = sessionStorage.get(userKey) || {};
+			state.hasLogin = state.accessToken || false;
+		},
+		saveToken(state, accessToken = '') {
+			state.accessToken = accessToken;
+			state.hasLogin = Boolean(state.accessToken);
+			//保存accessToken
+			sessionStorage.set(sysTokenKey, state.accessToken);
+		},
+		saveUser(state, info = {}) {
+			state.userInfo = info;
+			//保存userInfo
+			sessionStorage.set(userKey, state.userInfo);
+		},
+		//new add
+		saveUserTree(state, info = []) {
+			state.userTree = info;
+			//保存user tree
+			sessionStorage.set(userTreeKey, state.userTree);
+		},
+		//退出登录
+		logout(state) {
+			state.hasLogin = false;
+			state.userInfo = {};
+			state.accessToken = '';
+			sessionStorage.remove([userKey, sysTokenKey,userTreeKey]);
+		}
+	}
+});

src/view/a-picture/edit.vue

@@ -0,0 +1,305 @@
+<template>
+	<div class="edit-page">
+		<el-button class="round-btn" round size="small" @click="goBack">
+			<i class="el-icon-back"></i>
+			返回
+		</el-button>
+		<div class="iframe-box" ref="iframeBox" v-loading="iframeLoading" :element-loading-text="maskText">
+			<div class="scale-box"><iframe :src="tplSrc" frameborder="0" @load="iframeLoad" allowFullScreen></iframe></div>
+		</div>
+		<el-drawer
+			:before-close="beforeClose"
+			:modal="false"
+			:visible.sync="drawer"
+			ref="drawer"
+			size="620px"
+			:direction="position"
+			destroy-on-close
+			@close="drawerClose('恢复已编辑数据', true)"
+		>
+			<template slot="title">
+				<el-link type="primary" style="margin: 0 15px;" href="/screen/assets/font/demo_index.html" target="_blank">图标名称展示</el-link>
+			</template>
+			<el-main>
+				<el-collapse style="max-height: 78.5vh;" value="1">
+					<el-collapse-item name="1">
+						<template slot="title">
+							<h3>基础配置</h3>
+						</template>
+						<component :is="editData.editName" v-model="editData.config.data" :keys="keys" style="overflow: auto;max-height:calc(100vh - 175px);"></component>
+					</el-collapse-item>
+					<el-collapse-item>
+						<template slot="title">
+							<h3>高级配置</h3>
+							<span style="font-size: 12px;margin-left: 2em;color: #F56C6C;">非专业人员请勿操作</span>
+						</template>
+						<vue-json-editor v-model="editData.config.data" :showBtns="false" @json-change="onJsonChange"></vue-json-editor>
+					</el-collapse-item>
+				</el-collapse>
+			</el-main>
+			<el-row style="margin-top: 20px;text-align: center;">
+				<el-button @click="drawerClose('恢复已编辑数据')">取 消</el-button>
+				<el-button type="primary" @click="onSubmit" :loading="submitLoading">提 交</el-button>
+			</el-row>
+		</el-drawer>
+	</div>
+</template>
+
+<script>
+import vueJsonEditor from 'vue-json-editor';
+import md5 from 'md5';
+export default {
+	components: {
+		vueJsonEditor,
+		All: resolve => require(['../../components/tplEdit/All'], resolve),
+		Echarts: resolve => require(['../../components/tplEdit/Echarts/Echarts'], resolve),
+		ProfessorDoc: resolve => require(['../../components/tplEdit/ProfessorDoc'], resolve),
+		SwitchLi: resolve => require(['../../components/tplEdit/SwitchLi'], resolve),
+		//地图编辑模板
+		AMap: resolve => require(['../../components/tplEdit/AMap'], resolve),
+		//监控列表
+		MonitorList: resolve => require(['../../components/tplEdit/MonitorList'], resolve),
+		DistributedList: resolve => require(['../../components/tplEdit/DistributedList/index'], resolve)
+	},
+	data() {
+		return {
+			iframeLoading: true,
+			editData: {
+				config: {
+					data: {}
+				}
+			},
+			keys: {},
+			formInline: {
+				user: '',
+				region: ''
+			},
+			//抽屉
+			drawer: false,
+			editPosition: 0,
+			submitLoading: false,
+			timeoutfun: this.$timeFun(),
+			timeoutfun2:this.$timeFun()
+		};
+	},
+	watch: {
+		'editData.config.data': {
+			handler(n, v) {
+				this.synchronous();
+			},
+			deep: true
+		}
+	},
+	computed: {
+		//编辑模板出现位置
+		position() {
+			return this.editPosition - 0 > 50 ? 'ltr' : 'rtl';
+		},
+		pageTitle() {
+			return `${this.$route.query.mapName}`;
+		},
+		//模板url
+		tplSrc() {
+			const { id } = this.$route.query;
+			return `/screen/?v=${Math.random(1,9999,0)}#/home/${id}/1/`;
+		},
+		//计算大屏展示地址
+		mapSrc() {
+			const { tplSrc = '', id = '' } = this.$route.query;
+			return `${tplSrc}?v=${Math.random(1,9999,0)}&id=${id}`;
+		},
+		//加载遮罩文字提示
+		maskText() {
+			return '模板系统加载中';
+		},
+		//成功提示消息
+		submitOkMsg() {
+			return '数据提交成功';
+		},
+		//模板code
+		moduleCode() {
+			const {
+				config: {
+					pId,
+					port,
+					mId = '',
+					data: { id = '' }
+				}
+			} = this.editData;
+			console.log('保存', pId, port, id,this.editData);
+			console.log('md5', port, md5(pId + port + this.$route.query.id + mId + id));
+			return md5(pId + port + this.$route.query.id + mId + id);
+		}
+	},
+	methods: {
+		onJsonChange(n) {
+			this.$set(this.editData, 'data', n);
+		},
+		//同步数据
+		synchronous() {
+			this.timeoutfun(e => {
+				this.iframe.contentWindow.postMessage(this.editData, location.href);
+			}, 800);
+		},
+		//关闭抽屉前回调
+		beforeClose(done) {
+			// this.$confirm('即将关闭编辑页面,是否还有数据未提交?', '提示', {
+			// 	confirmButtonText: '关闭',
+			// 	cancelButtonText: '取消',
+			// 	type: 'warning'
+			// }).then(() => {
+			// 	done();
+			// });
+				done();
+		},
+		//关闭抽屉
+		drawerClose(msg, close) {
+			!close &&
+				this.$message({
+					message: msg || this.submitOkMsg,
+					type: msg ? 'info' : 'success'
+				});
+			close || this.$refs.drawer.closeDrawer();
+			//提交成功重新加载数据
+			this.iframe.contentWindow.postMessage(
+				{
+					type: 'reload'
+				},
+				location.href
+			);
+		},
+		//提交当前数据到数据库
+		onSubmit(reset) {
+			this.submitLoading = true;
+			const {
+				config: { data }
+			} = this.editData;
+			this.timeoutfun2(e => {
+				this.$port
+					.addModuleData({
+						mapId: this.$route.query.id,
+						moduleCode: this.moduleCode,
+						dataType: 4,
+						sourceName: '',
+						content:reset == 'reset' ? null : JSON.stringify(data)
+					})
+					.then(res => {
+						this.submitLoading = false;
+						if (!res.code) {
+							this.drawerClose();
+						}
+					});
+			});
+		},
+		goBack() {
+			this.$router.push({
+				path: '/a-picture'
+			});
+		},
+		iframeLoad(e) {
+			this.iframeLoading = false;
+			window.onmessage = event => {
+				const {
+						position,
+						type,
+						config = {
+							data: {},
+							keys: {}
+						}
+					} = event.data,
+					{ keys = {} } = config;
+				console.log(event.data);
+				//把数据同步到编辑模板中
+				switch (type) {
+					case 'release':
+						this.iframeLoading = true;
+						this.release();
+						return '';
+					//重置
+					case 'reset':
+						this.iframeLoading = true;
+						this.editData = event.data;
+						this.onSubmit('reset');
+						return '';
+					//编辑
+					case 'edit':
+						//显示编辑模板
+						this.drawer = true;
+						this.editData = event.data;
+						this.editPosition = position;
+						this.keys = keys;
+						return '';
+					default:
+				}
+			};
+			this.iframe = e.target;
+			const ifw = e => {
+				try {
+					//自适应大小
+					const { offsetHeight, offsetWidth } = this.$refs.iframeBox;
+					let box = this.$refs.iframeBox.querySelector('.scale-box');
+					box.style.transform = `scaleX(${offsetWidth / 1920}) scaleY(${offsetHeight / 1080})`;
+				} catch (e) {
+					//TODO handle the exception
+				}
+			};
+			ifw();
+			//窗口变化重新计算
+			window.onresize = ifw;
+			//向内页发送域名
+			this.iframe.contentWindow.postMessage(
+				{
+					type: 'href',
+					href: location.href //父窗口
+				},
+				location.href
+			);
+		},
+		//预览
+		release() {
+			// window.open(this.tplSrc, '', 'channelmode=1,fullscreen=1,left=0,top=0,location=0');
+			window.open(this.mapSrc);
+		}
+	}
+};
+</script>
+
+<style lang="less">
+#el-drawer__title {
+	margin-bottom: 0;
+}
+
+.edit-page {
+	position: relative;
+	margin-left: -20px;
+	margin-right: -20px;
+	margin-top: -20px;
+
+	.round-btn {
+		position: absolute;
+		top: 10px;
+		left: 10px;
+		z-index: 999;
+		background: linear-gradient(to bottom, #48a3ff, #03dce3);
+		border: none;
+		color: #fff;
+	}
+
+	.iframe-box {
+		height: calc(100vh - 60px);
+		position: relative;
+		overflow: hidden;
+
+		.scale-box {
+			transform-origin: top left;
+			width: 1920px;
+			height: 1080px;
+
+			iframe {
+				width: 1920px;
+				height: 1080px;
+			}
+		}
+	}
+}
+</style>

src/view/a-picture/index.vue

@@ -0,0 +1,321 @@
+<template>
+	<!-- 一张图 -->
+	<div style="height: 100%;">
+		<div class="page-header"><el-input style="width: 260px;" placeholder="请输入大屏名称" prefix-icon="el-icon-search" clearable v-model="mapName"></el-input></div>
+		<div class="content-list" v-infinite-scroll="searchMap" infinite-scroll-disabled="disabled" v-loading="loading">
+			<el-row :gutter="20">
+				<el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="4" v-if="auth.includes('save')">
+					<div class="li-item" @click="centerDialogVisible = true">
+						<div class="add">
+							<i class="el-icon-plus"></i>
+							新增大屏
+						</div>
+					</div>
+				</el-col>
+				<el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="4" v-for="(li, index) in mapListData" :key="li.id">
+					<div class="li-item">
+						<div class="li-item-box">
+							<div class="li-item-box-top">
+								<el-image class="bg-img" :src="li.img | defaultImg" lazy></el-image>
+								<div class="control-btn">
+									<el-button round v-if="!!(li.state - 0)" size="mini" type="primary" @click="release(index)">预览</el-button>
+									<el-button round v-if="auth.includes('publish') && !(li.state - 0)" size="mini" type="primary" @click="release(index)">发布</el-button>
+									<el-button round v-if="auth.includes('update')" size="mini" type="warning" @click="edit(li)">编辑</el-button>
+									<el-button round v-if="auth.includes('delete')" size="mini" type="danger" @click="delMap(li)">删除</el-button>
+								</div>
+							</div>
+							<div class="li-item-box-bottom">
+								<span>{{ li.mapName }}</span>
+								<span>{{ li.state | state }}</span>
+							</div>
+						</div>
+					</div>
+				</el-col>
+			</el-row>
+			<!-- <p class="loading-text" v-if="loading">加载中...</p> -->
+			<p class="loading-text" v-if="noMore">没有数据了</p>
+		</div>
+		<el-dialog title="新建大屏" :visible.sync="centerDialogVisible" width="400">
+			<el-form ref="form" :model="form" label-width="80px" :hide-required-asterisk="true">
+				<el-form-item label="大屏名称"><el-input v-model="form.mapName"></el-input></el-form-item>
+				<el-form-item label="大屏描述"><el-input type="textarea" v-model="form.mapDesc"></el-input></el-form-item>
+				<el-form-item label="套用框架">
+					<el-select v-model="form.templateId" placeholder="请选择框架" style="width: 100%;">
+						<el-option v-for="i in tplSelectData" :label="i.name" :value="i.id" :key="i.id"></el-option>
+					</el-select>
+				</el-form-item>
+			</el-form>
+			<span slot="footer">
+				<el-button @click="centerDialogVisible = false">取 消</el-button>
+				<el-button type="primary" @click="onSubmit">创 建</el-button>
+			</span>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			//框架模板下拉
+			tplSelectData: [],
+			//新增大屏表单
+			form: {
+				mapName: '',
+				templateId: '',
+				mapDesc: ''
+			},
+			mapName: '',
+			searchTimeFun: this.$timeFun(),
+			//大屏列表
+			listData: {
+				total: -1 //默认值必须小于0
+			},
+			loading: false,
+			centerDialogVisible: false,
+			//当前选择大屏
+			nowMapObj: {}
+		};
+	},
+	filters: {
+		state(value) {
+			//0-未发布 1-已发布 2-撤回
+			return value == 1 ? '已发布' : '未发布';
+		},
+		defaultImg(value) {
+			return require('../../assets/images/map-defaut.jpg');
+		}
+	},
+	computed: {
+		//当前页权限
+		auth() {
+			const activePage = this.$route.path;
+			return (
+				this.$store.state.userTree
+					.filter(x => {
+						return x.url == activePage;
+					})
+					.map(x => {
+						return x.auth;
+					})[0] || []
+			);
+		},
+		//大屏列表
+		mapListData() {
+			return (this.listData.list || []).map(x => {
+				return {
+					...x,
+					tplSrc: '/public/'
+				};
+			});
+		},
+		//是否加载
+		noMore() {
+			const { list = [], total = -1 } = this.listData;
+			return !this.loading && total >= list.length;
+		},
+		//滚动条加载控制
+		disabled() {
+			return this.loading || this.noMore;
+		},
+		//计算大屏展示地址
+		mapSrc() {
+			const { tplSrc = '', id = '' } = this.nowMapObj;
+			return `${tplSrc}?v=${Math.random(1,9999,0)}&id=${id}`;
+		}
+	},
+	mounted() {
+		this.$port.findMapTemplate().then(res => {
+			this.tplSelectData = res.list;
+		});
+	},
+	watch: {
+		mapName(n) {
+			this.searchMap(n);
+		}
+	},
+	methods: {
+		//搜索大屏
+		searchMap(n) {
+			this.loading = true;
+			this.searchTimeFun(() => {
+				this.$port
+					.getMap({
+						mapName: n || ''
+					})
+					.then(res => {
+						this.listData = res;
+						this.loading = false;
+					});
+			});
+		},
+		//新增提交
+		onSubmit() {
+			this.centerDialogVisible = false;
+			this.$port.addMap(this.form).then(res => {
+				this.searchMap();
+			});
+		},
+		delMap(li) {
+			this.$confirm('此操作将永久删除该大屏再也不能找回了, 是否继续?', '警告', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			})
+				.then(() => {
+					this.$port.delMap(li).then(res => {
+						this.searchMap();
+						this.$message({
+							type: 'success',
+							message: '删除成功!',
+							duration:800
+						});
+					});
+				})
+				.catch(() => {
+					this.$message({
+						type: 'info',
+						message: '已取消删除',
+						duration:800
+					});
+				});
+		},
+		edit(e) {
+			const { id = '', mapName = '', tplSrc = '' } = e;
+			this.$router.push({
+				path: '/a-picture/edit',
+				query: {
+					id,
+					tplSrc
+				}
+			});
+		},
+		//发布
+		release(index) {
+			const e = (this.nowMapObj = this.mapListData[index]);
+			//e.state == 1 预览 e.state == 0
+			if (e.state == 1) {
+				// window.open(this.mapSrc, '', 'channelmode=1,fullscreen=1,left=0,top=0,location=0');
+				window.open(this.mapSrc);
+			} else {
+				this.$port.releaseMap(e).then(res => {
+					if (!(res.code - 0)) {
+						e.state = 1;
+						this.listData.list.splice(index, 1, e);
+						this.$alert(`发布成功：<a href=${this.mapSrc} target=_blank style="word-wrap:break-word;">去预览</a>`, '提示', {
+							confirmButtonText: '关闭',
+							dangerouslyUseHTMLString: true,
+							type: 'success'
+						});
+					}
+				});
+			}
+		}
+	}
+};
+</script>
+
+<style lang="less" scoped>
+.page-header {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+.content-list {
+	margin-top: 10px;
+	.loading-text {
+		font-size: 14px;
+		display: block;
+		text-align: center;
+	}
+	height: calc(100% - 98px);
+	overflow: auto;
+	padding: 0 2%;
+	.li-item {
+		display: flex;
+		cursor: pointer;
+		margin: 10px 0;
+		zoom: 1; //清除浮动
+		//清除浮动
+		&::after {
+			display: block;
+			clear: both;
+			content: '';
+			visibility: hidden;
+			height: 0;
+		}
+		//支撑高度
+		&::before {
+			content: '';
+			float: left;
+			width: 0;
+			height: 0;
+			padding-top: 60%; //控制高度
+			overflow: hidden;
+			opacity: 0;
+		}
+		//新增样式控制
+		.add {
+			flex: 1;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			color: #409eff;
+			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+			border-radius: 8px;
+			border: 1px dashed;
+			font-size: 1.2em;
+			i {
+				font-size: 1.2em;
+				margin-right: 0.5rem;
+			}
+			&::before {
+				padding-top: calc(60% - 2px);
+			}
+		}
+		&-box {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			overflow: hidden;
+			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+			border-radius: 8px;
+			&-top {
+				position: relative;
+				flex: 9;
+				.bg-img,
+				.control-btn {
+					position: absolute;
+					height: 100%;
+					width: 100%;
+					top: 0;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					z-index: 0;
+				}
+				.control-btn {
+					opacity: 0;
+					transition: opacity 200ms;
+					z-index: 1;
+					background: rgba(255, 255, 255, 0.8);
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: center;
+					align-items: center;
+					&:hover {
+						opacity: 1;
+					}
+				}
+			}
+			&-bottom {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 0 5%;
+				flex: 3;
+			}
+		}
+	}
+}
+</style>

src/view/areaData/areaData.vue

@@ -0,0 +1,254 @@
+<template>
+	<!-- 用户配置 -->
+	<div class="pageBody">
+		<el-row>
+			<el-col :span="24">
+				<div class="tableHead">
+					<el-row>
+						<el-col :span="6">
+							<div class="userTitle"><el-button type="primary" icon="el-icon-upload" size="small" @click="add" v-if="auth.includes('import')">数据导入</el-button></div>
+						</el-col>
+						<el-col :span="18">
+							<div class="grid-content bg-purple-dark fr">
+								<el-form :inline="true" :model="searchParams" ref="form" class="demo-form-inline">
+									<el-form-item>
+										<el-input v-model="searchParams.dataName" placeholder="请输入数据名称"></el-input>
+									</el-form-item>
+									<el-form-item>
+										<el-button type="primary" @click="searchHandle">搜索</el-button>
+										<el-button type="warning" @click="resetSearch">重置</el-button>
+									</el-form-item>
+								</el-form>
+							</div>
+						</el-col>
+					</el-row>
+				</div>
+				<el-divider></el-divider>
+				<el-table :data="listData" border style="width: 100%" v-loading="loading">
+					<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
+					<el-table-column prop="dataName" label="数据名称"></el-table-column>
+					<el-table-column prop="createDate" label="上次修改时间"></el-table-column>
+					<el-table-column prop="createUser" label="修改人"></el-table-column>
+					<el-table-column fixed="right" label="操作" width="360" align="center">
+						<template slot-scope="scope">
+							<el-button type="primary" size="mini" @click="detail(scope.row)">查看</el-button>
+							<!-- <el-button type="success" size="mini" @click="apply(scope.row)" v-if="auth.includes('apply')" :disabled="scope.row.isShow === 1">应用</el-button> -->
+							<el-button type="warning" size="mini" @click="exportFile(scope.row)" v-if="auth.includes('export')">导出</el-button>
+							<el-button type="danger" size="mini" @click="del(scope.row)" v-if="auth.includes('delete')">删除</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+			</el-col>
+		</el-row>
+		<div class="page-right"><Pagination :total="listTotal" @change="paginationChange"></Pagination></div>
+		<aev-mobiel
+			v-if="modal.view.visibleModal"
+			:title="modal.view.title"
+			:visible="modal.view.visibleModal"
+			:selectRow="modal.view.selectRow"
+			@closeModal="closeModal"
+		></aev-mobiel>
+		<import-mobiel
+			v-if="modal.add.visibleModal"
+			:title="modal.add.title"
+			:visible="modal.add.visibleModal"
+			@closeModal="closeModal"
+		></import-mobiel>
+	</div>
+</template>
+
+<script>
+import axios from 'axios';
+import Pagination from '@/components/Pagination';
+import aevMobiel from './modal/aevMobiel';
+import importMobiel from './modal/ImportMobiel';
+import { paginationConfig } from '@/api/CONST';
+export default {
+	name: 'areaData',
+	components: {
+		Pagination,
+		aevMobiel,
+		importMobiel
+	},
+	created() {
+		let params = Object.assign({}, this.searchParams, this.pagination);
+		this.getList(params);
+	},
+	mounted() {},
+	data() {
+		return {
+			loading: true,
+			visibleDel: false,
+			modal: {
+				view:{
+					title: '',
+					visibleModal: false,
+					selectRow: null
+				},
+				add:{
+					title: '',
+					visibleModal: false,
+					selectRow: null
+				}
+			},
+			searchParams: {
+				dataName:''
+			},
+			pagination: Object.assign({}, paginationConfig),
+			listTotal: 0,
+			listData: [],
+			activePages:{}
+		};
+	},
+	methods: {
+		searchHandle() {
+			let params = Object.assign({}, this.searchParams, this.pagination);
+			this.getList(params);
+		},
+		resetSearch() {
+			this.searchParams = {};
+			let params = Object.assign({}, this.searchParams, this.pagination);
+			this.getList(params);
+		},
+		add() {
+			this.modal.add.visibleModal = true;
+			this.modal.add.title = '区域数据导入';
+		},
+		detail(item) {
+			this.modal.view.visibleModal = true;
+			this.modal.view.title = '元数据查看';
+			this.modal.view.selectRow = item
+		},
+		apply(item) {
+			let notice = item.isShow === 1 ? '“' + item.dataName + '”' + '此条数据当前已应用大屏，是否取消?' : '确认后数据将会填充大屏上的数据进行展示，而之前大屏上的数据将会被替换，请确认。';
+			this.$confirm(notice, '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			})
+				.then(() => {
+					let params = {
+						id: item.id,
+						state: item.isShow === 1 ? 0 : 1
+					};
+					this.$port.areaDataUpdate(params).then(res => {
+						if (!res.code) {
+							this.$message({
+								type: 'success',
+								message: '操作成功!'
+							});
+							this.getList();
+						}
+					});
+				})
+				.catch(() => {});
+		},
+		exportFile(item) {
+			window.open("/htdata/areaData/downloadXls?id=" + item.id)
+		},
+		stateSwitch(value, row) {
+			let params = {
+				id: row.id,
+				state: value
+			};
+			this.$port.damUpdateState(params).then(res => {
+				if (!res.code) {
+					if (value == 1) {
+						this.$message({
+							message: '启用成功！',
+							type: 'success'
+						});
+					} else {
+						this.$message({
+							message: '已关闭！',
+							type: 'success'
+						});
+					}
+				} else {
+					row.state = value === 1 ? 0 : 1;
+					this.$message.error('启用失败！');
+				}
+			});
+		},
+		del(item) {
+			this.$confirm('此操作将永久删除此条数据, 是否继续?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			})
+				.then(() => {
+					let params = {
+						id: item.id
+					};
+					this.$port.delareaData(params).then(res => {
+						if (!res.code) {
+							this.$message({
+								type: 'success',
+								message: '删除成功!'
+							});
+							let params = Object.assign({}, this.searchParams,this.pagination);
+							this.getList(params);
+						}
+					});
+				})
+				.catch(() => {});
+		},
+		getList(params) {
+			this.loading = true;
+			this.$port.getAreaListx(params).then(res => {
+				this.loading = false;
+				this.listData = res.list || [];
+				this.listTotal = res.total;
+			});
+		},
+		paginationChange(json) {
+			console.log(json)
+			this.activePages = Object.assign({},json)			
+			let params = Object.assign({}, this.searchParams, json);
+			this.getList(params);
+		},
+		closeModal(flag = false) {
+			this.modal.add.visibleModal = false;
+			this.modal.view.visibleModal = false;
+			flag && this.getList();
+		}
+	},
+	computed: {
+		//当前页权限
+		auth() {
+			const activePage = this.$route.path;
+			return (
+				this.$store.state.userTree
+					.filter(x => {
+						return x.url == activePage;
+					})
+					.map(x => {
+						return x.auth;
+					})[0] || []
+			);
+		}
+	}
+};
+</script>
+
+<style lang="less" scoped>
+.fr {
+	float: right;
+}
+.userTitle {
+	margin-top: 8px;
+}
+.el-form-item {
+	margin-bottom: 0;
+}
+.tableHead {
+	vertical-align: middle;
+	.el-button {
+		margin-left: 15px;
+	}
+}
+.page-right {
+	margin-top: 15px;
+	float: right;
+}
+</style>

src/view/areaData/modal/ImportMobiel.vue

@@ -0,0 +1,157 @@
+<template>
+	<el-dialog 
+		:title="modalTitle" 
+		:visible.sync="modalVisible" 
+		:width="formLabelWidth" 
+		top="2vh"
+		@close="handleCancel">
+		<div class="userMobile">
+			<el-steps :active="3" simple>
+			  <el-step title="下载模板文件" icon="el-icon-edit"></el-step>
+			  <el-step title="按格式填写数据" icon="el-icon-upload"></el-step>
+			  <el-step title="上传模版" icon="el-icon-picture"></el-step>
+			</el-steps>
+			<div class="uploadfile">
+				<div class="downloadFile">
+					模版文件: <a href="/htdata/areaData/downloadTemplate">点击下载</a>
+				</div>
+				<div class="upload">
+					<span class="title">文件上传：</span>
+					<el-upload
+					  class="upload-ele"
+					  ref="upload"
+					  :action="importFileUrl"
+					  :on-remove="handleRemove"
+					  :on-change="handleChange"
+					  :on-success="handleSuccess"
+					  :file-list="fileList"
+					  accept=".xlsx,.xls"
+					  :headers = "headers"
+					  :on-exceed="onExceed"
+					  :limit="1"
+					  :multiple="false"
+					  :auto-upload="false">
+					  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+					  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">开始上传</el-button>
+					  <div slot="tip" class="el-upload__tip">注意: <span style="color:red">只能上传xlsx/xks文件</span></div>
+					</el-upload>
+				</div>
+			</div>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<el-button @click="handleCancel">取 消</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+import {globalReg,uploadFileAreaUrl} from '@/api/CONST'
+export default {
+	name: 'userMobiel',
+	props: {
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: 'title'
+		},
+	},
+	watch: {
+		visible(newVal, oldVal) {
+			this.modalVisible = newVal;
+		},
+		title(newVal, oldVal) {
+			this.modalTitle = newVal;
+		},
+	},
+	data() {
+		return {
+			modalTitle: this.title,
+			modalVisible: this.visible,
+			modalAction: this.action,
+			modalSelectRow:this.selectRow,
+			formLabelWidth: '920px',
+			importFileUrl:uploadFileAreaUrl,
+			headers: {
+			        accessToken:'' 
+			},
+			fileList: []
+		};
+	},
+	created() {
+		this.headers.accessToken = this.getAccessToken
+	},
+	methods: {
+		submitUpload() {
+			this.$refs.upload.submit();
+		},
+		handleRemove(file, fileList) {
+		},
+		handleChange(file){
+		},
+		onExceed(){
+			this.$message({
+			  message: '当前限制选择 1 个文件，请删除后继续上传!',
+			  type: 'warning'
+			});
+		},
+		handleSuccess(response, file, fileList){
+			console.log(response,file,fileList)
+			console.log(response.retHead.errCode)
+			if(response.retHead.errCode === 0){
+				this.$message({
+				  message: '文件上传成功!',
+				  type: 'success'
+				});
+				this.handleCancel()
+				this.$emit('closeModal',true)
+			}else{
+				this.$message.error('数据上传出错，请检查环境！');
+			}
+		},
+		handleCancel() {
+			this.$emit('closeModal', false);
+		}
+	},
+	computed:{
+		getAccessToken(){
+			return this.$store.state.accessToken
+		}
+	}
+	
+};
+</script>
+
+<style scoped lang="less">
+.uploadfile{
+	padding:15px 0;
+}
+.downloadFile,
+.upload{
+	border-bottom:1px solid #EBEEF5;
+}
+.downloadFile{
+	height:40px;
+	line-height:40px;
+	font-weight:bold;
+}
+.downloadFile a{
+	margin-left:10px;
+}
+.upload{
+	padding:20px 0;
+	overflow:hidden;
+}
+.upload .title{
+	display:block;
+	font-weight:bold;
+	margin-top:5px;
+	margin-bottom:15px;
+	float:left;
+}
+.upload-ele{
+	padding-left:70px;
+}
+</style>

src/view/areaData/modal/aevMobiel.vue

@@ -0,0 +1,138 @@
+<template>
+	<el-dialog 
+		:title="modalTitle" 
+		:visible.sync="modalVisible" 
+		:width="formLabelWidth" 
+		top="2vh"
+		@close="handleCancel">
+		<div class="userMobile" v-loading="loading">
+			<!-- {{datas}} -->
+			<el-row :gutter="20">
+				  <el-col :span="14">
+					  <div class="grid-content bg-purple">
+						  <b>数据名称:</b>
+						  {{datas.dataName}}
+					  </div>
+				  </el-col>
+				  <el-col :span="6">
+					  <div class="grid-content bg-purple">
+						  <b>修改人:</b>
+						  {{datas.createUser}}
+					  </div>
+				  </el-col>
+			</el-row>
+			<el-row :gutter="20">
+				<el-col :span="14">
+					 <div class="grid-content bg-purple">
+							  <b>上次修改时间:</b>
+							  {{datas.createDate}}
+					 </div>
+				</el-col>
+			</el-row>
+			<div style="custom-table">
+				<el-table
+				    :data="datas.valList"
+				    border
+					height="330"
+				    style="width: 100%">
+					<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
+				    <el-table-column
+					  align="center"
+					  v-for="(item,index) in column"
+					  :key="index"
+					  :label="item.fieldName"
+					  :prop="item.prop">
+				    </el-table-column>
+				 </el-table>
+			</div>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<el-button @click="handleCancel">取 消</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+import {globalReg} from '@/api/CONST'
+export default {
+	name: 'userMobiel',
+	props: {
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: 'title'
+		},
+		selectRow:{
+			type:Object,
+			default:{}
+		}
+	},
+	watch: {
+		visible(newVal, oldVal) {
+			this.modalVisible = newVal;
+		},
+		title(newVal, oldVal) {
+			this.modalTitle = newVal;
+		},
+		selectRow(newVal,oldVal){
+			this.modalSelectRow = newVal
+		}
+	},
+	data() {
+		return {
+			modalTitle: this.title,
+			modalVisible: this.visible,
+			modalAction: this.action,
+			modalSelectRow:this.selectRow,
+			formLabelWidth: '920px',
+			loading:true,
+			datas:{},
+			column:[],
+			tableconfig:{
+				rowWidth:0,
+				lineWidth:0
+			}
+		};
+	},
+	created() {
+		this.getDetail(this.modalSelectRow.id)
+	},
+	methods: {
+		//获取坝区详情
+		getDetail(id){
+			let params = {
+				id:id
+			}
+			this.$port.getAreaManageInfo(params)
+				.then(res => {
+					this.datas = res
+					let columns = this.datas.fieldList;
+					for(let i = 0;i<columns.length;i++){
+						columns[i].prop = 'fieldVal' + i
+					}
+					this.column = columns;
+					this.loading = false
+				})
+		},
+		handleCancel() {
+			this.$emit('closeModal', false);
+		}
+	}
+};
+</script>
+
+<style scoped lang="less">
+	.table-head table,
+	.table-body table{width:100%;text-align:center;border-collapse: collapse;}
+	.table-head{padding-right:17px;color:#000;border:1px solid #EBEEF5;border-spacing:0px;border-collapse: collapse;}
+	.table-head table tr th{height:45px;border-right:1px solid #EBEEF5;}
+	.table-head table tr th:last-child{border-right:none;}
+	.table-body{width:100%; height:300px;overflow-y:scroll;}
+	.table-body table tr{height:40px;border-spacing: 0px; border-collapse: collapse;}
+	.table-body table tr td{border:1px solid #EBEEF5;}
+	.table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
+	.el-row{margin-bottom:20px;}
+</style>

src/view/damManage/damManage.vue

@@ -0,0 +1,437 @@
+<template>
+	<!-- 用户配置 -->
+	<div class="pageBody">
+		<div class="wrap1200" v-cloak>
+			<div class="specialHead">
+				<!-- <h2 class="title">专题列表</h2> -->
+				<div class="tools">
+					<!-- <el-row>
+						<el-col :span="10">
+							<el-form :inline="true" :model="searchParams" ref="form" class="demo-form-inline">
+								<el-form-item>
+									<el-input v-model="searchParams.topicName" placeholder="请输入数据名称"></el-input>
+								</el-form-item>
+								<el-form-item>
+									<el-button type="primary" @click="searchHandle">搜索</el-button>
+									<el-button type="warning" @click="resetSearch">重置</el-button>
+								</el-form-item>
+							</el-form>
+						</el-col>
+						<el-col :span="14">
+							<div class="switchDsiplay fr">
+								<el-button type="primary" icon="el-icon-menu" v-bind:class="{ active: layout == 'grid' }" v-on:click="layout = 'grid'"></el-button>
+								<el-button type="primary" icon="el-icon-s-fold" v-bind:class="{ active: layout == 'list' }" v-on:click="layout = 'list'" ></el-button>
+							</div>
+						</el-col>
+					</el-row> -->
+					<el-row>
+						<el-col :span="24">
+							<div class="fr">
+								<el-form :inline="true" :model="searchParams" ref="form" class="demo-form-inline">
+									<el-form-item>
+										<el-input v-model="searchParams.topicName" placeholder="请输入数据名称"></el-input>
+									</el-form-item>
+									<el-form-item>
+										<el-button type="primary" @click="searchHandle">搜索</el-button>
+										<el-button type="warning" @click="resetSearch">重置</el-button>
+									</el-form-item>
+								</el-form>
+							</div>
+						</el-col>
+					</el-row>
+				</div>
+			</div>
+			<div class="specalBody" v-loading="loading">
+				<ul class="specal-data" :class="[layout === 'grid' ? 'specal-grid' : 'specal-list']">
+					<li class="add" @click="add" v-if="auth.includes('save')">
+						<i class="el-icon-plus"></i>新增专题
+					</li>
+					<li v-for="(item,index) in listData" :key="index">
+						<div class="wrap">
+							<div class="icon">
+								<i class="el-icon-platform-eleme"></i>
+							</div>
+							<div class="content">
+								<h3 class="title">{{item.topicName}}</h3>
+								<p class="desc">{{item.topicDesc}}</p>
+							</div>
+						</div>
+						<div class="tools">
+							<a @click="view(item)">预览</a>
+							<a @click="edit(item)" v-if="auth.includes('update')">编辑</a>
+							<a @click="del(item)" v-if="auth.includes('delete')">删除</a>
+						</div>
+					</li>
+				</ul>
+				<div class="specal-nodata" v-if="listData.length == 0">
+					<i class="el-icon-c-scale-to-original"></i>
+					<p>您搜索的数据是空的。</p>
+				</div>
+			</div>
+			<div class="page-right">
+				<Pagination :total="listTotal" @change="paginationChange"></Pagination>
+			</div>
+		</div>
+		<add-mobiel
+			v-if="modal.add.visibleModal"
+			:title="modal.add.title"
+			:visible="modal.add.visibleModal"
+			@closeModal="closeModal"
+		></add-mobiel>
+		<ve-mobiel
+			v-if="modal.editView.visibleModal"
+			:title="modal.editView.title"
+			:visible="modal.editView.visibleModal"
+			:selectRow="modal.editView.selectRow"
+			:action="modal.editView.action"
+			@closeModal="closeModal"
+		></ve-mobiel>
+	</div>
+</template>
+
+<script>
+import { paginationConfig } from '@/api/CONST'
+import Pagination from '@/components/Pagination'
+import addMobiel from './modal/addMobiel';
+import veMobiel from './modal/veMobiel'
+export default {
+	name: 'damManage',
+	components:{
+		addMobiel,
+		veMobiel,
+		Pagination,
+	},
+	created(){
+		let params = Object.assign({}, this.searchParams, this.pagination);
+		this.getList(params);
+	},
+	mounted(){},
+	data() {
+		return {
+			layout: 'grid', //grid
+			loading:true,
+			modal:{
+				add:{
+					title:'',
+					visibleModal:false,
+					selectRow:null
+				},
+				editView:{
+					action: 'view',
+					title: '',
+					visibleModal: false,
+					selectRow: null
+				}
+			},
+			searchParams:{
+				topicName:'',
+			},
+			pagination:Object.assign({},paginationConfig),
+			listTotal:0,
+			listData:[],
+			areaList:[]
+		};
+	},
+	methods: {
+		add() {
+			this.modal.add.visibleModal = true
+			this.modal.add.title = '新增专题'
+		},
+		view(item){
+			this.modal.editView.visibleModal = true
+			this.modal.editView.title = '专题查看'
+			this.modal.editView.action = 'view'
+			this.modal.editView.selectRow = item
+		},
+		edit(item){
+			this.modal.editView.visibleModal = true
+			this.modal.editView.title = '专题编辑'
+			this.modal.editView.action = 'edit'
+			this.modal.editView.selectRow = item
+		},
+		del(item) {
+			this.$confirm('此操作将永久删除此条数据, 是否继续?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			})
+				.then(() => {
+					let params = {
+						id: item.id
+					};
+					this.$port.delTopic(params).then(res => {
+						if (!res.code) {
+							this.$message({
+								type: 'success',
+								message: '删除成功!'
+							});
+							let params = Object.assign({}, this.searchParams,this.pagination);
+							this.getList(params);
+						}
+					});
+				})
+				.catch(() => {});
+		},
+		getList(params){
+			this.loading = true;
+			this.$port.getTopIcList(params).then(res => {
+				this.loading = false;
+				this.listData = res.list || [];
+				this.listTotal = res.total;
+			});
+		},
+		paginationChange(json) {
+			let params = Object.assign({}, this.searchParams, json);
+			this.getList(params);
+		},
+		searchHandle() {
+			let params = Object.assign({}, this.searchParams, this.pagination);
+			this.getList(params);
+		},
+		resetSearch() {
+			this.searchParams = {};
+			let params = Object.assign({}, this.searchParams, this.pagination);
+			this.getList(params);
+		},
+		closeModal(flag = false) {
+			this.modal.editView.visibleModal = false
+			this.modal.add.visibleModal = false
+			flag && this.getList();
+		}
+	},
+	computed: {
+		//当前页权限
+		auth() {
+			const activePage = this.$route.path;
+			return (
+				this.$store.state.userTree
+					.filter(x => {
+						return x.url == activePage;
+					})
+					.map(x => {
+						return x.auth;
+					})[0] || []
+			);
+		}
+	}
+};
+</script>
+
+<style lang="less" scoped>
+.fr{
+	float:right;
+}
+[v-cloak] {
+	display: none;
+}
+.wrap1200{
+	// width:1200px;
+	margin:0 4.2%;
+	.specialHead{
+		padding:15px 0 0px 0;
+		border-bottom:1px solid #ddd;
+		.title{
+			margin-bottom:15px;
+		}
+		.tools{
+			.switchDsiplay .el-button{
+				margin:0 !important
+			}
+			.switchDsiplay .active{
+				background: #66b1ff;
+				border-color: #66b1ff;
+				color: #FFF;
+			}
+		}
+	}
+	.specalBody{
+		height:640px;
+		overflow-y:auto;
+		padding:25px 0 15px 0;
+		.specal-grid{
+			list-style:none;
+			margin:0;
+			padding:0;
+			display:flex;
+			flex-wrap:wrap;
+			justify-content:flex-start;
+			li{
+				flex: 0 0 32%;
+				height:190px;
+				margin:7px;
+				border: 1px solid #ebeef5;
+				box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+				border-radius:6px;
+				background-color: #fff;
+				.wrap{
+					height:145px;
+					padding-top:10px;
+					overflow:hidden;
+					.icon{
+						text-align:center;
+						width:85px;
+						height:100%;
+						float:left;
+						i{
+							margin-top:10px;
+							color:#3399ff;
+							font-size:54px;
+						}
+					}
+					.content{
+						padding:10px 10px 0 0;
+						overflow:hidden;
+						.title{
+							margin:3px 0 5px 0;
+							font-size:18px;
+							color:#272727;
+						}
+						.desc{
+							font-size:14px;
+							color:#8d8d8d;
+						}
+					}
+				}
+				.tools{
+					border-top:1px solid #e9e9e9;
+					height:43px;
+					background:#f7f9fa;
+					a{
+						display:block;
+						position:relative;
+						width:33.333%;
+						height:100%;
+						line-height:43px;
+						float:left;
+						cursor:pointer;
+						font-size:12px;
+						text-align:center;
+						color:#8d8f8f;
+						&:before{
+							content:'';
+							display:block;
+							position:absolute;
+							height:28px;
+							width:1px;
+							top:6px;
+							right:0;
+							background:#e9e9e9;
+						}
+						&:last-child:before{
+							display:none;
+						}
+						&:hover{
+							color:#333;
+						}
+					}
+				}
+			}
+			li.add{
+				border:1px dashed #3399ff;
+				box-shadow:none;
+				text-align:center;
+				line-height:190px;
+				color:#3399ff;
+				cursor:pointer;
+				&:hover{
+					border-color:#0066cc;
+					color:#0066cc;
+				}
+			}
+		}
+		.specal-list{
+			list-style:none;
+			margin:0;
+			padding:0;
+			li{
+				overflow:hidden;
+				padding:15px 10px;
+				border-bottom:1px solid #E9E9E9;
+				.wrap{
+					float:left;
+					.icon{
+						float:left;
+						margin-right:13px;
+						i{
+							color:#3399ff;
+							font-size:54px;
+						}
+					}
+					.content{
+						overflow:hidden;
+						.title{
+							margin:3px 0 5px 0;
+							font-size:18px;
+							color:#272727;
+						}
+						.desc{
+							font-size:14px;
+							color:#8d8d8d;
+						}
+					}
+					
+				}
+				.tools{
+					float:right;
+					padding-top:14px;
+					a{
+						position:relative;
+						display:block;
+						float:left;
+						width:60px;
+						height:30px;
+						line-height:39px;
+						text-align:center;
+						cursor:pointer;
+						&:before{
+							content:'';
+							display:block;
+							position:absolute;
+							height:28px;
+							width:1px;
+							top:6px;
+							right:0;
+							background:#e9e9e9;
+						}
+						&:last-child:before{
+							display:none;
+						}
+						&:hover{
+							color:#333;
+						}
+					}
+				}
+			}
+			li.add{
+				border:1px dashed #3399ff;
+				text-align:center;
+				color:#3399ff;
+				font-size:14px;
+				cursor:pointer;
+				&:hover{
+					border-color:#0066cc;
+					color:#0066cc;
+				}
+			}
+		}
+		.specal-nodata{
+			width:300px;
+			margin:30px auto;
+			text-align:center;
+			color:#333;
+			.el-icon-c-scale-to-original{
+				margin-bottom:5px;
+				font-size:68px;
+			}
+			
+		}
+	}
+	.page-right{
+		float:right;
+	}
+}
+
+	
+
+
+</style>

src/view/damManage/modal/addMobiel.vue

@@ -0,0 +1,306 @@
+<template>
+	<el-dialog 
+		:title="modalTitle" 
+		:visible.sync="modalVisible" 
+		:width="formLabelWidth" 
+		top="2vh"
+		@close="handleCancel">
+		<div class="userMobile">
+			<el-steps :active="stepsAcitve">
+				<el-step title="填写基本信息"></el-step>
+				<el-step title="数据源配置"></el-step>
+				<el-step title="专题配置"></el-step>
+			</el-steps>
+			<div class="stepsWrap baseInfo" v-if="stepsAcitve == 1">
+				<el-form label-width="100px" :model="form" :rules="rules" label-position="right" ref="baseInfo">
+					<el-row :gutter="20">
+						<el-col :span="20">
+							<el-form-item label="专题名称：" prop="topicName">
+								<el-input v-model="form.topicName"></el-input>
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row :gutter="20">
+						<el-col :span="20">
+							<el-form-item label="专题说明:">
+								<el-input
+								  type="textarea"
+								  :rows="4"
+								  placeholder="请输入内容"
+								  v-model="form.topicDesc">
+								</el-input>
+							</el-form-item> 
+						</el-col>
+					</el-row>
+				</el-form>
+			</div>	
+			<div class="stepsWrap dataSource" v-if="stepsAcitve == 2">
+				<el-form label-width="100px" :model="form" :rules="rules" label-position="left" ref="dataSource">
+					<el-row :gutter="28">
+						<el-form-item label="数据来源：" prop="sourceId">
+							<el-select v-model="form.sourceId" filterable placeholder="请选择/或搜索">
+							    <el-option
+							      v-for="item in getList.dataSouceList"
+							      :key="item.id"
+							      :label="item.dataName"
+							      :value="item.id">
+							    </el-option>
+							  </el-select>
+						</el-form-item>
+					</el-row>
+				</el-form>
+				<div class="explain">
+					<el-divider></el-divider>
+					<h3 class="descTitle">说明</h3>
+					<p>经纬地址</p>
+					<p>请指定经纬度及地址字段，需指定后才可看到状态地理分布及统计</p>
+					<p>数据筛选</p>
+					<p>可根据专题的主题对数据源的数据进行筛选。</p>
+				</div>
+			</div>
+			<div class="stepsWrap special" v-if="stepsAcitve == 3">
+				<el-form label-width="130px" :model="form" :rules="rules" label-position="right" ref="special">
+					<el-row :gutter="20">
+						<el-col :span="20">
+							<el-form-item label="专题展现形式：" prop="showType">
+								<el-select v-model="form.showType" placeholder="请选择" class="w100">
+								    <el-option
+								      v-for="item in getList.showTypeList"
+								      :key="item.value"
+								      :label="item.label"
+								      :value="item.value">
+								    </el-option>
+								 </el-select>
+							</el-form-item>
+						</el-col>
+					</el-row> 
+					<el-row :gutter="20">
+						  <el-col :span="10">
+							 <el-form-item label="分布点名称：" prop="pointName">
+								<el-select v-model="form.pointName" placeholder="请选择">
+								    <el-option
+								      v-for="item in getList.topIcdataList"
+								      :key="item.id"
+								      :label="item.fieldName"
+								      :value="item.fieldName">
+								    </el-option>
+								 </el-select>
+							 </el-form-item>
+						  </el-col>
+						  <el-col :span="10">
+							  <el-form-item label="地址:" prop="address">
+							  	<el-select v-model="form.address" placeholder="请选择">
+							  	    <el-option
+							  	      v-for="item in getList.topIcdataList"
+							  	      :key="item.id"
+							  	      :label="item.fieldName"
+							  	      :value="item.fieldName">
+							  	    </el-option>
+							  	 </el-select>
+							  </el-form-item>
+						  </el-col>
+					</el-row>
+					<el-row :gutter="20">
+						<el-col :span="20">
+							<el-form-item label="展示地址：" prop="showUrl">
+								<el-select v-model="form.showUrl" placeholder="请选择" class="w100">
+								    <el-option
+								      v-for="item in getList.topIcdataList"
+								      :key="item.id"
+								      :label="item.fieldName"
+								      :value="item.fieldName">
+								    </el-option>
+								 </el-select>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+				<div class="explain">
+					<el-divider></el-divider>
+					<h3 class="descTitle">说明</h3>
+					<p>专题模板</p>
+					<p>根据配置的字段信息，自动计算，并按照模板的展现形式自动进行可视化展示</p>
+				</div>
+			</div>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<el-button style="margin-top: 12px;" @click="pre" v-show="stepsAcitve > 1">上一步</el-button>
+			<el-button style="margin-top: 12px;" @click="next" v-show="stepsAcitve != 3 ">下一步</el-button>
+			<el-button type="primary" @click="submit" v-show="stepsAcitve == 3">确 定</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+import {globalReg} from '@/api/CONST'
+export default {
+	name: 'userMobiel',
+	props: {
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: 'title'
+		},
+		action: {
+			type: String,
+			default: 'add'
+		}
+	},
+	watch: {
+		visible(newVal, oldVal) {
+			this.modalVisible = newVal;
+		},
+		title(newVal, oldVal) {
+			this.modalTitle = newVal;
+		},
+		action(newVal, oldVal) {
+			this.modalAction = newVal;
+		}
+	},
+	data() {
+		return {
+			modalTitle: this.title,
+			modalVisible: this.visible,
+			modalAction: this.action,
+			formLabelWidth: '820px',
+			stepsAcitve:1,
+			rules: {  
+				topicName: [{ required: true, message: '专题名称不能为空!', trigger: 'blur' }],
+				sourceId: [{ required: true, message: '数据来源不能为空!', trigger: 'blur' }],
+				showType: [{ required: true, message: '专题展现形式不能为空!', trigger: 'blur' }],
+				pointName: [{ required: true, message: '分布点名称不能为空!', trigger: 'blur' }],
+				address: [{ required: true, message: '地址不能为空!', trigger: 'blur' }],
+				showUrl: [{ required: true, message: '展示地址不能为空!', trigger: 'blur' }]
+			},
+			getList:{
+				dataSouceList:[],
+				showTypeList:[{
+					label:'气泡',
+					value:1
+				},{
+					label:'点状',
+					value:2
+				},{
+					label:'箭头',
+					value:3
+				}],
+				topIcdataList:[]
+			},
+			form: {}
+		};
+	},
+	created() {
+		this.getDataSource();
+	},
+	methods: {
+		//数据来源
+		getDataSource(){
+			let params = {
+				pageNo:1,
+				pageSize:10000,
+			}
+			this.$port.getAreaListx(params)
+				.then(res=>{
+					this.getList.dataSouceList = res.list
+				})
+		},
+		//获取分布点
+		getRound(){
+			let params = {
+				id:this.form.sourceId
+			}
+			this.$port.getTopIcData(params)
+				.then(res=>{
+					this.getList.topIcdataList = res.list
+				})
+		},
+		pre(){
+			if(this.stepsAcitve <= 3){
+				this.stepsAcitve --
+			}
+		},
+		next(){
+			if(this.stepsAcitve <= 3){
+				switch(this.stepsAcitve){
+					case 1:
+						this.$refs.baseInfo.validate(valid => {
+							if (valid) {
+								this.stepsAcitve ++
+							} else {
+								return false;
+							}
+						});    
+						break;	
+					case 2:
+						this.getRound();
+						this.$refs.dataSource.validate(valid => {
+							if (valid) {
+								this.stepsAcitve ++
+							} else {
+								return false;
+							}
+						});
+						break;
+					default:
+						break;
+				}
+			} 
+		},
+		submit(){
+			this.$refs.special.validate(valid => {
+				if (valid) {
+					this.$port.addTopic(this.form)
+						.then(res=>{
+							this.$message.success('创建成功!')
+							this.handleCancel()
+							this.$emit('closeModal',true)
+						})
+				} else {
+					return false;
+				}
+			});
+		},
+		handleCancel() {
+			this.$emit('closeModal', false);
+		}
+	}
+};
+</script>
+
+<style scoped lang="less">
+	.stepsWrap{
+		padding:60px 0;
+		p{
+			line-height:30px;
+		}
+		.descTitle{
+			margin-bottom:10px;
+		}
+	}
+	.baseInfo{
+		.el-form{
+			width:550px;
+			margin:0 auto;
+		}
+	}
+	.dataSource{
+		.el-form{
+			width:350px;
+			margin:0 auto;
+			.el-select{
+				width: 300px;
+			}
+		}
+	}
+	.special{
+		.el-form{
+			padding:0 30px;
+			.w100{
+				width:600px;
+			}
+		}
+	}
+</style>

src/view/damManage/modal/aevMobiel.vue

@@ -0,0 +1,330 @@
+<template>
+	<el-dialog 
+		:title="modalTitle" 
+		:visible.sync="modalVisible" 
+		:width="formLabelWidth" 
+		top="2vh"
+		@close="handleCancel">
+		<div class="userMobile">
+			<el-form label-width="140px" :model="form" :rules="rules" ref="from">
+				<el-form-item label="坝区名称" prop="damName"> 
+					<el-input v-model="form.damName" :disabled="limit.isRead"></el-input>
+				</el-form-item>
+				<el-form-item label="所属区域名称" prop="areaCode">
+					<el-select v-model="form.areaCode" placeholder="请选择" :disabled="limit.isRead">
+					    <el-option
+					      v-for="item in areaList"
+					      :key="item.posId"
+					      :label="item.posName"
+					      :value="item.posId">
+					    </el-option>
+					  </el-select>
+				</el-form-item>
+				<el-form-item label="海拔" prop="elevation">
+					<el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.elevation" :disabled="limit.isRead"></el-input>
+				</el-form-item>
+				<el-form-item label="种植面积(亩)" prop="totalArea">
+					<el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.totalArea" :disabled="limit.isRead"></el-input>
+				</el-form-item>
+				<el-form-item label="主要产品" prop="plantName">
+					<el-input v-model="form.plantName" :disabled="limit.isRead"></el-input>
+				</el-form-item> 
+				<el-form-item label="耕地产出值(元)" prop="plantVal">
+					<el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.plantVal" :disabled="limit.isRead"></el-input>
+				</el-form-item>
+				<el-form-item label="土地流转率" prop="landRate">
+					<el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.landRate" :disabled="limit.isRead"></el-input>
+				</el-form-item>
+				<el-form-item label="农民收入贡献率" prop="farmerRate">
+					<el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.farmerRate" :disabled="limit.isRead"></el-input>
+				</el-form-item>
+				<el-form-item label="产销对接率" prop="marketRate">
+					<el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.marketRate" :disabled="limit.isRead"></el-input>
+				</el-form-item>
+				<el-form-item label="产业参保率" prop="insureRate">
+					<el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.insureRate" :disabled="limit.isRead"></el-input>
+				</el-form-item>
+				<el-form-item label="坝区简介" prop="damDesc">
+					<el-input
+					  type="textarea"
+					  :rows="2"
+					  placeholder="请输入内容"
+					  v-model="form.damDesc"
+					  :disabled="limit.isRead">
+					</el-input>
+				</el-form-item>
+			</el-form>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<el-button @click="handleCancel">取 消</el-button>
+			<el-button type="primary" @click="submit" v-if="!limit.isRead">确 定</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+import {globalReg} from '@/api/CONST'
+export default {
+	name: 'userMobiel',
+	props: {
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: 'title'
+		},
+		action: {
+			type: String,
+			default: 'add'
+		},
+		selectRow:{
+			type:Object,
+			default:{}
+		}
+	},
+	watch: {
+		visible(newVal, oldVal) {
+			this.modalVisible = newVal;
+		},
+		title(newVal, oldVal) {
+			this.modalTitle = newVal;
+		},
+		action(newVal, oldVal) {
+			this.modalAction = newVal;
+		},
+		selectRow(newVal,oldVal){
+			this.modalSelectRow = newVal
+		}
+	},
+	data() {
+		return {
+			modalTitle: this.title,
+			modalVisible: this.visible,
+			modalAction: this.action,
+			modalSelectRow:this.selectRow,
+			formLabelWidth: '720px',
+			limit:{
+				isRead:false,
+				isAdd:false
+			},
+			addLabel:{
+				inputVisible: false,
+				inputValue: '',
+			},
+			optionProps: {
+				expandTrigger:'hover',
+				checkStrictly: true,
+				value: 'id',
+				label: 'branchName',
+				children: 'children'
+			},
+			areaList: [], //区域列表
+			rules:{
+				damName:[
+					 { required: true, message: '坝区名称!', trigger: 'blur' }
+				],
+				areaCode:[
+					{ required: true, message: '所属区域编码不能为空!', trigger: 'blur' }
+				],
+				elevation:[
+					{ required: true, message: '海拔不能为空!', trigger: 'blur' }
+				],
+				totalArea:[
+					{ required: true, message: '种植面积不能为空!', trigger: 'blur' }
+				],
+				plantName:[
+					{ required: true, message: '主要产品不能为空!', trigger: 'blur' }
+				],
+				plantVal:[
+					{ required: true, message: '耕地产出值不能为空!', trigger: 'blur' }
+				],
+				landRate:[
+					{ required: true, message: '土地流转率不能为空!', trigger: 'blur' }
+				],
+				farmerRate:[
+					{ required: true, message: '农民收入贡献率不能为空!', trigger: 'blur' }
+				],
+				marketRate:[
+					{ required: true, message: '产销对接率不能为空!', trigger: 'blur' }
+				],
+				insureRate:[
+					{ required: true, message: '产业参保率不能为空!', trigger: 'blur' }
+				],
+				damDesc:[
+					{ required: true, message: '坝区简介不能为空!', trigger: 'blur' }
+				]
+			},
+			form: {}
+		};
+	},
+	created() {
+		switch(this.modalAction) {
+		     case 'add':
+				this.limit.isAdd = true
+		        break;
+		     case 'edit':
+				this.getDetail(this.modalSelectRow.id)
+		        break;
+			 case 'view':
+				this.getDetail(this.modalSelectRow.id)
+				this.limit.isRead = true
+			    break;
+		     default:
+		        break;
+		} 
+		this.initPage()
+	},
+	methods: {
+		//强制视图渲染
+		forceUpdate(){
+			this.$forceUpdate()
+		},
+		//初始化角色和组织机构
+		initPage(){
+			this.getAreaList(); //获取区域名称
+		},
+		//获取区域名称
+		getAreaList(){ 
+			let params = {
+				sn:"522730000000"
+			}
+			this.$port.getAreaList(params)
+				.then(res =>{
+					this.areaList = res.list
+				})
+		},
+		//获取坝区详情
+		getDetail(id){
+			let params = {
+				id:id
+			}
+			this.$port.getDamInfo(params)
+				.then(res => {
+					let showInfo = Object.assign({},res)
+					this.form = showInfo
+				})
+		},
+		submit(){
+			switch(this.modalAction){
+				case 'add':
+					this.add()
+					break;
+				case 'edit':
+					this.update()
+					break;
+				default:
+					break;
+			}
+		},
+		add(){
+			this.$refs.from.validate((valid) => {
+				if (valid) {
+					let params = Object.assign({},this.form)
+					console.log(params)
+					this.$port.addDam(params).then(res => {
+						if(!res.code){
+							this.modalVisible = false
+							this.$emit('closeModal', true);
+						}
+					})
+				}else {
+					return false;
+				}
+			})
+		},
+		update(){
+			this.$refs.from.validate((valid) => {
+				if (valid) {
+					let data = Object.assign({},this.form)
+					this.$port.updateDam(data).then(res => {
+						if(!res.code){
+							this.modalVisible = false
+							this.$emit('closeModal', true);
+						}
+					})
+				}else {
+					return false;
+				}
+			})
+		},
+		handleCancel() {
+			this.$emit('closeModal', false);
+		}
+	}
+};
+</script>
+
+<style scoped lang="less">
+.el-tag + .el-tag {
+	margin-left: 10px;
+}
+.button-new-tag {
+	margin-left: 10px;
+	height: 32px;
+	line-height: 30px;
+	padding-top: 0;
+	padding-bottom: 0;
+}
+.input-new-tag {
+	width: 90px;
+	margin-left: 10px;
+	vertical-align: bottom;
+}
+
+.avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+	border-color: #409EFF;
+}
+.avatar-uploader-icon {
+	font-size: 28px;
+	color: #8c939d;
+	width: 128px;
+	height: 128px;
+	line-height: 128px;
+	text-align: center;
+}
+.avatar {
+	width: 128px;
+	height: 128px;
+	display: block;
+}
+.uploaded{
+	position:relative;
+}
+.uploaded .avatar{
+	border-radius:10px;
+}
+.uploaded:hover .action{
+	display:block;
+}
+.uploaded .action{
+	display:none;
+	position:absolute;
+	top:0;
+	bottom:0;
+	width:100%;
+	padding-top:27px;
+	text-align:center;
+	background:rgba(0,0,0,0.5);
+}
+.noPhoto{
+	width:128px;
+	height:128px;
+	line-height:128px;
+	text-align:center;
+	border: 1px dashed #d9d9d9;
+	border-radius: 6px;
+}
+.noPhoto span{
+	display:block;
+	font-size:18px;
+}
+</style>

src/view/damManage/modal/veMobiel.vue

@@ -0,0 +1,254 @@
+<template>
+	<el-dialog 
+		:title="modalTitle" 
+		:visible.sync="modalVisible" 
+		:width="formLabelWidth" 
+		top="2vh"
+		@close="handleCancel">
+		<div class="userMobile">
+			<el-form label-width="120px" :model="form" :rules="rules" label-position="right" ref="form">
+				<el-collapse v-model="activeNames">
+				  <el-collapse-item title="1.基本信息" name="1">
+						<el-row :gutter="20">
+							<el-col :span="20">
+								<el-form-item label="专题名称:" prop="topicName">
+									<el-input v-model="form.topicName" :disabled="limit.isRead"></el-input>
+								</el-form-item>
+							</el-col>
+						</el-row>
+						<el-row :gutter="20">
+							<el-col :span="20">
+								<el-form-item label="专题说明:">
+									<el-input
+									  type="textarea"
+									  :rows="4"
+									  :disabled="limit.isRead"
+									  placeholder="请输入内容"
+									  v-model="form.topicDesc"></el-input>
+								</el-form-item>
+							</el-col>
+						</el-row>
+				  </el-collapse-item>
+				  <el-collapse-item title="2.数据源配置" name="2">
+						<el-row :gutter="20">
+							<el-col :span="20">
+								<el-form-item label="数据来源:" prop="sourceId">
+									<el-select v-model="form.sourceId" filterable placeholder="请选择/或搜索" :disabled="limit.isRead" class="w100">
+									    <el-option
+									      v-for="item in getList.dataSouceList"
+									      :key="item.id"
+									      :label="item.dataName"
+									      :value="item.id">
+									    </el-option>
+									  </el-select>
+								</el-form-item>
+							</el-col>
+						</el-row>
+				  </el-collapse-item>
+				  <el-collapse-item title="3.专题配置" name="3">
+						<el-row :gutter="20">
+							<el-col :span="20">
+								<el-form-item label="专题展现形式:" prop="showType">
+									<el-select v-model="form.showType" placeholder="请选择" class="w100" :disabled="limit.isRead">
+									    <el-option
+									      v-for="item in getList.showTypeList"
+									      :key="item.value"
+									      :label="item.label"
+									      :value="item.value">
+									    </el-option>
+									 </el-select>
+								</el-form-item>
+							</el-col>
+						</el-row>
+						<el-row :gutter="20">
+							<el-col :span="20">
+								<el-form-item label="分布点名称:" prop="pointName">
+										<el-select v-model="form.pointName" class="w100" placeholder="请选择" :disabled="limit.isRead">
+											<el-option
+											  v-for="item in getList.topIcdataList"
+											  :key="item.id"
+											  :label="item.fieldName"
+											  :value="item.fieldName">
+											</el-option>
+										 </el-select>
+								</el-form-item>
+							</el-col>
+						</el-row>
+						<el-row :gutter="20">
+							<el-col :span="20">
+								<el-form-item label="地址:" prop="address" class="w100">
+									<el-select v-model="form.address" class="w100" placeholder="请选择" :disabled="limit.isRead">
+									    <el-option
+									      v-for="item in getList.topIcdataList"
+									      :key="item.id"
+									      :label="item.fieldName"
+									      :value="item.fieldName">
+									    </el-option>
+									 </el-select>
+								</el-form-item>
+							</el-col>
+						</el-row>
+						<el-row :gutter="20">
+							<el-col :span="20">
+								<el-form-item label="展示地址:" prop="showUrl">
+									<el-select v-model="form.showUrl" placeholder="请选择" class="w100" :disabled="limit.isRead">
+									    <el-option
+									      v-for="item in getList.topIcdataList"
+									      :key="item.id"
+									      :label="item.fieldName"
+									      :value="item.fieldName">
+									    </el-option>
+									 </el-select>
+								</el-form-item>
+							</el-col>
+						</el-row>
+				  </el-collapse-item>
+				</el-collapse>
+			</el-form>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<el-button @click="handleCancel">取 消</el-button>
+			<el-button type="primary" @click="submit" v-if="!limit.isRead">确 定</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+import {globalReg} from '@/api/CONST'
+export default {
+	name: 'veMobiel',
+	props: {
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: 'title'
+		},
+		action: {
+			type: String,
+			default: 'add'
+		},
+		selectRow:{
+			type:Object,
+			default:{}
+		}
+	},
+	watch: {
+		visible(newVal, oldVal) {
+			this.modalVisible = newVal;
+		},
+		title(newVal, oldVal) {
+			this.modalTitle = newVal;
+		},
+		action(newVal, oldVal) {
+			this.modalAction = newVal;
+		},
+		selectRow(newVal,oldVal){
+			this.modalSelectRow = newVal
+		}
+	},
+	data() {
+		return {
+			modalTitle: this.title,
+			modalVisible: this.visible,
+			modalAction: this.action,
+			modalSelectRow:this.selectRow,
+			formLabelWidth: '820px',
+			activeNames:['1','2','3'],
+			limit:{
+				isRead:false,
+				isAdd:false
+			},
+			getList:{
+				dataSouceList:[],
+				showTypeList:[{
+					label:'气泡',
+					value:1
+				},{
+					label:'点状',
+					value:2
+				},{
+					label:'箭头',
+					value:3
+				}],
+				topIcdataList:[]
+			},
+			rules: {
+				topicName: [{ required: true, message: '专题名称不能为空!', trigger: 'blur' }],
+				sourceId: [{ required: true, message: '数据来源不能为空!', trigger: 'blur' }],
+				showType: [{ required: true, message: '专题展现形式不能为空!', trigger: 'blur' }],
+				pointName: [{ required: true, message: '分布点名称不能为空!', trigger: 'blur' }],
+				address: [{ required: true, message: '地址不能为空!', trigger: 'blur' }],
+				showUrl: [{ required: true, message: '展示地址不能为空!', trigger: 'blur' }]
+			},
+			form: {
+			}
+		};
+	},
+	created() {
+		this.form = this.modalSelectRow
+		this.getDataSource()
+		this.getRound()
+		if(this.modalAction === 'view'){
+			this.limit.isRead = true
+		}
+	},
+	methods: {
+		//数据来源
+		getDataSource(){
+			let params = {
+				pageNo:1,
+				pageSize:10000,
+			}
+			this.$port.getAreaListx(params)
+				.then(res=>{
+					this.getList.dataSouceList = res.list
+				})
+		},
+		//获取分布点
+		getRound(){
+			let params = {
+				id:this.form.sourceId
+			}
+			this.$port.getTopIcData(params)
+				.then(res=>{
+					this.getList.topIcdataList = res.list
+				})
+		},
+		//获取详情
+		getDetail(id){
+			let params = {
+				id:id
+			}
+			this.$port.viewUser(params)
+				.then(res => {
+					console.log(res)
+					this.form = res
+					this.form.roleIds = res.roles
+				})
+		},
+		submit(){
+			this.$refs.form.validate(valid => {
+				if (valid) {
+					console.log(this.form)
+					this.$port.updateTopic(this.form)
+						.then(res=>{
+							this.$emit('closeModal',true)
+						})
+				}
+			})	
+		},
+		handleCancel() {
+			this.$emit('closeModal', false);
+		}
+	}
+};
+</script>
+
+<style scoped lang="less">
+	.w100{
+		width:529px;
+	}
+</style>

src/view/data-source.vue

@@ -0,0 +1,12 @@
+<template>
+	<!--数据源-->
+	<div>
+		数据源
+	</div>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/view/expertTeam/expertTeam.vue

@@ -0,0 +1,267 @@
+<template>
+	<!-- 用户配置 -->
+	<div class="pageBody">
+		<el-row>
+			<el-col :span="24">
+				<div class="tableHead">
+					<el-row>
+						<el-col :span="6">
+							<div class="userTitle">
+								<el-button type="primary" icon="el-icon-plus" size="small" @click="add" v-if="auth.includes('save')">新增园区</el-button>
+								<!-- <el-button type="primary" icon="el-icon-upload" size="small" @click="importData">导入数据</el-button> -->
+							</div>
+						</el-col>
+						<el-col :span="18">
+							<div class="grid-content bg-purple-dark fr">
+								<el-form :inline="true" :model="searchParams" ref="form" class="demo-form-inline" >
+									<el-select v-model="searchParams.induType" placeholder="涉及农业">
+									    <el-option
+									      v-for="item in agriTypeList"
+									      :key="item.id"
+									      :label="item.name"
+									      :value="item.id">
+									    </el-option>
+									</el-select>
+									<el-select v-model="searchParams.productName" placeholder="产出物">
+									    <el-option
+									      v-for="item in protypeList"
+									      :key="item.id"
+									      :label="item.name"
+									      :value="item.name">
+									    </el-option>
+									</el-select>
+									<el-form-item>
+										<el-input 
+											v-model="searchParams.queryParam" 
+											placeholder="请输入园区编码/园区名称"></el-input>
+									</el-form-item>
+									<el-form-item>
+										<el-button type="primary" @click="searchHandle">搜索</el-button>
+										<el-button type="warning" @click="resetSearch">重置</el-button>
+									</el-form-item>
+								</el-form>
+							</div>
+						</el-col>
+					</el-row>
+				</div>  
+				<el-divider></el-divider>
+				<el-table :data="listData" border style="width: 100%" v-loading="loading">
+					<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
+					<el-table-column prop="orchardCode" label="园区编码" ></el-table-column> 
+					<el-table-column prop="orchardName" label="园区名称" ></el-table-column>
+					<el-table-column prop="induTypeName" label="涉及行业" ></el-table-column>
+					<el-table-column prop="productName" label="产出物" ></el-table-column>
+					<el-table-column prop="orchardArea" label="园区规模（平方米）" ></el-table-column>
+					<el-table-column prop="workerCount" label="人员数" ></el-table-column>
+					<!-- <el-table-column prop="longitude" label="经度" align="center"></el-table-column> -->
+					<!-- <el-table-column prop="latitude" label="纬度" align="center"></el-table-column> -->
+					<el-table-column label="地址" align="center">
+						<template slot-scope="scope">
+							{{scope.row.provinceName}}{{scope.row.cityName}}{{scope.row.countyName}}{{scope.row.townName}}{{scope.row.villageName}}{{scope.row.address}}
+						</template>
+					</el-table-column>
+					<el-table-column fixed="right" label="操作"  width="220" align="center">
+						<template slot-scope="scope">
+							<el-button type="primary" size="mini" @click="detail(scope.row)">查看</el-button>
+						    <el-button type="success" size="mini" @click="edit(scope.row)" v-if="auth.includes('update')">编辑</el-button>
+							<el-button type="warning" size="mini" @click="del(scope.row)" v-if="auth.includes('delete')">删除</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+			</el-col>
+		</el-row>
+		<div class="page-right">
+			<Pagination :total="listTotal" @change="paginationChange"></Pagination>
+		</div>
+		<aev-mobiel
+			v-if="modal.adv.visibleModal"
+			:title="modal.adv.title"
+			:action="modal.adv.action"
+			:visible="modal.adv.visibleModal"
+			:selectRow="modal.adv.selectRow"
+			@closeModal="closeModal">
+		</aev-mobiel>
+		<import-mobiel
+			v-if="modal.import.visibleModal"
+			:title="modal.import.title"
+			:visible="modal.import.visibleModal"
+			@closeModal="closeModal"
+		></import-mobiel>
+	</div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import aevMobiel from './modal/aevMobiel'
+import importMobiel from './modal/ImportMobiel'
+import { paginationConfig } from '@/api/CONST'
+export default {
+	name: 'user',
+	components:{
+		Pagination,
+		aevMobiel,
+		importMobiel
+	},
+	created(){
+		let params = Object.assign({},this.searchParams,this.pagination)
+		this.getList(params)	
+		this.getProtype()
+		this.getAgriType(); 
+	},
+	mounted(){
+		
+	},
+	data() {
+		return {
+			loading:true,
+			visibleDel:false,
+			modal:{
+				adv:{
+					action:'',
+					title:'',
+					visibleModal:false,
+					selectRow:null
+				},
+				import:{
+					title: '',
+					visibleModal: false,
+					selectRow: null
+				}
+			},
+			searchParams:{
+				queryParam:'',
+				productName:'',
+				induType:''
+			},
+			pagination:Object.assign({},paginationConfig),
+			listTotal:0,
+			listData:[],
+			protypeList:[], //产出物
+			agriTypeList:[], //涉及农业
+		};
+	},
+	methods: {
+		getProtype(){
+			this.$port.getProtypeList()
+				.then(res =>{
+					console.log(res)
+					this.protypeList = res.list
+				})
+		},
+		searchHandle() {
+			let params = Object.assign({},this.searchParams,this.pagination)
+			this.getList(params)
+		},
+		resetSearch(){
+			this.searchParams = {}
+			let params = Object.assign({},this.searchParams,this.pagination)
+			this.getList(params)
+		},
+		importData(){
+			this.modal.import.visibleModal = true;
+			this.modal.import.title = '园区数据导入';
+		},
+		add(){
+			this.modal.adv.visibleModal = true
+			this.modal.adv.title = '园区信息添加'
+			this.modal.adv.action = 'add'
+		},
+		detail(item){
+			this.modal.adv.visibleModal = true
+			this.modal.adv.title = '园区信息查看'
+			this.modal.adv.action = 'view'
+			this.modal.adv.selectRow = item
+		},
+		edit(item){
+			this.modal.adv.visibleModal = true
+			this.modal.adv.title = '园区信息编辑'
+			this.modal.adv.action = 'edit'
+			this.modal.adv.selectRow = item
+		},
+		getAgriType(){
+			this.$port.getAgriTypeList()
+				.then(res =>{
+					this.agriTypeList = res.list
+				})
+		},
+		del(item){
+			this.$confirm('此操作将永久删除此条数据, 是否继续?', '提示', {
+			  confirmButtonText: '确定',
+			  cancelButtonText: '取消',
+			  type: 'warning'
+			}).then(() => {
+				let params = {
+					id:item.id
+				}
+				this.$port.delExpert(params).then(res =>{
+					if(!res.code){
+						this.$message({
+							type: 'success',
+							message: '删除成功!',
+							duration:800
+						});
+						this.getList()
+					}
+				})
+			}).catch(() => {
+			            
+			});
+		},
+		getList(params){
+			this.loading = true
+			this.$port.getExpertList(params)
+				.then(res =>{
+					console.log(res)
+					this.loading = false
+					this.listData = res.list || []
+					this.listTotal = res.total
+				})
+		},
+		paginationChange(json){
+			let params = Object.assign({},this.searchParams,json)
+			this.getList(params)
+		},
+		closeModal(flag = false){
+			this.modal.adv.visibleModal = false
+			flag && this.getList()
+		}
+	},
+	computed: {
+		//当前页权限
+		auth() {
+			const activePage = this.$route.path;
+			return (
+				this.$store.state.userTree
+					.filter(x => {
+						return x.url == activePage;
+					})
+					.map(x => {
+						return x.auth;
+					})[0] || []
+			);
+		}
+	}
+};
+</script>
+
+<style lang="less" scoped>
+.fr{
+	float:right;
+}
+.userTitle{
+	margin-top:8px;
+}
+.el-form-item {
+	margin-bottom: 0;
+}
+.tableHead{
+	vertical-align:middle;
+	.el-button{
+		margin-left:15px;
+	}
+}
+.page-right{
+	margin-top:15px;
+	float:right;
+}
+</style>

src/view/expertTeam/modal/aevMobiel.vue

@@ -0,0 +1,799 @@
+<template>
+	<el-dialog :title="modalTitle" :visible.sync="modalVisible" :width="formLabelWidth" top="2vh" @close="handleCancel">
+		<div class="gardenMobile">
+			<el-tabs :tab-position="tabPosition" :stretch="true" style="height:600px;" v-model="activePlanName">
+				<el-tab-pane label="园区基本信息" name="baseinfo" style="height:600px;overflow-y:auto;">
+					<div class="wrap">
+						<h3 class="title">园区基本信息</h3>
+						<el-form label-width="80px" :model="form" :rules="rules" label-position="top" ref="baseinfo" class="gardenFrom">
+							<el-row :gutter="20">
+								<el-col :span="8">
+									<el-form-item label="园区编码" prop="orchardCode">
+										<el-input v-model="form.orchardCode" :disabled="limit.isRead"></el-input>
+									</el-form-item>
+								</el-col>
+								<el-col :span="8">
+									<el-form-item label="园区名称" prop="orchardName">
+										<el-input v-model="form.orchardName" :disabled="limit.isRead"></el-input>
+									</el-form-item>
+								</el-col>
+								<el-col :span="8">
+									<el-form-item label="园区规模（平方米）" prop="orchardArea">
+										<el-input v-model="form.orchardArea" :disabled="limit.isRead"></el-input>
+									</el-form-item>
+								</el-col>
+							</el-row>
+							<el-row :gutter="20">
+								<el-col :span="8">
+									<el-form-item label="行业类型" prop="induType">
+										<el-select v-model="form.induType" placeholder="请选择" :disabled="limit.isRead">
+											<el-option v-for="item in agriTypeList" :key="item.id" :label="item.name" :disabled="limit.isRead" :value="item.id"></el-option>
+										</el-select>
+									</el-form-item>
+								</el-col>
+								<el-col :span="8">
+									<el-form-item label="人员数" prop="workerCount"><el-input v-model="form.workerCount" :disabled="limit.isRead"></el-input></el-form-item>
+								</el-col>
+								<el-col :span="8">
+									<el-form-item label="建园日期">
+										<el-date-picker
+											:disabled="limit.isRead"
+											v-model="form.beginDate"
+											type="date"
+											start-placeholder="请选择日期"
+											value-format="yyyy-MM-dd"
+											align="left"
+										></el-date-picker>
+									</el-form-item>
+								</el-col>
+							</el-row>
+							<el-row :gutter="20">
+								<el-col :span="8">
+									<el-form-item label="负责人">
+										<el-input v-model="form.leaderName" :disabled="limit.isRead"></el-input>
+									</el-form-item>
+								</el-col>
+								<el-col :span="8">
+									<el-form-item label="联系方式" prop="telNo">
+										<el-input v-model="form.telNo" :disabled="limit.isRead"></el-input>
+									</el-form-item>
+								</el-col>
+								<el-col :span="8">
+									<el-form-item label="海拔">
+										<el-input v-model="form.elevation" :disabled="limit.isRead"></el-input>
+									</el-form-item>
+								</el-col>
+							</el-row>
+							<el-row :gutter="20">
+								<el-col :span="24">
+									<el-form-item label="园区简介">
+										<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.orchardDesc" :disabled="limit.isRead"></el-input>
+									</el-form-item>
+								</el-col>
+							</el-row>
+							<h3 class="title">产出管理</h3>
+							<el-table :data="form.products" border style="width: 100%">
+								<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
+								<el-table-column label="产出物">
+									<template slot-scope="scope">
+										<span v-if="!scope.row.editing">{{ scope.row.prodName }}</span>
+										<span v-else><el-input size="mini" placeholder="请输入内容" v-model="scope.row.prodName"></el-input></span>
+									</template>
+								</el-table-column>
+								<el-table-column label="产出面积（亩）">
+									<template slot-scope="scope">
+										<span v-if="!scope.row.editing">{{ scope.row.prodArea }}</span>
+										<span v-else><el-input type="number" size="mini" placeholder="请输入内容" v-model="scope.row.prodArea"></el-input></span>
+									</template>
+								</el-table-column>
+								<el-table-column label="产量估算（公斤）">
+									<template slot-scope="scope">
+										<span v-if="!scope.row.editing">{{ scope.row.prodVol }}</span>
+										<span v-else><el-input type="number" size="mini" placeholder="请输入内容" v-model="scope.row.prodVol"></el-input></span>
+									</template>
+								</el-table-column>
+								<el-table-column fixed="right" label="操作" align="center">
+									<template slot-scope="scope">
+										<el-button type="primary" size="mini" v-if="!scope.row.editing" :disabled="limit.isRead" icon="el-icon-edit-outline" @click="handleRowEdit(scope.$index, scope.row)">
+											编辑
+										</el-button>
+										<el-button type="primary" size="mini" v-if="scope.row.editing" :disabled="limit.isRead" icon="el-icon-success" @click="handleRowSave(scope.$index, scope.row)">
+											保存
+										</el-button>
+										<el-button size="mini" type="warning" v-if="scope.row.editing" :disabled="limit.isRead" icon="el-icon-warning" @click="handleRowCancel(scope.$index, scope.row)">
+											取消
+										</el-button>
+										<el-button size="mini" type="danger" v-if="!scope.row.editing" :disabled="limit.isRead" icon="el-icon-delete" @click="handleRowDelete(scope.$index, scope.row)">
+											删除
+										</el-button>
+									</template>
+								</el-table-column>
+							</el-table>
+							<a class="addCcw" @click="addProduct" v-if="!limit.isRead">
+								<i class="el-icon-plus"></i>
+								新增产出物
+							</a>
+						</el-form>
+					</div>
+				</el-tab-pane>
+				<el-tab-pane label="园区地理配置" name="mapConfig" style="height:600px;overflow-y:auto;">
+					<div class="wrap">
+						<h3 class="title">园区地理配置</h3>
+						<div class="aMap">
+							<el-card v-if="!limit.isRead" class="box-card" style="position: absolute;width:390px;top:60px;right: 30px;z-index: 9999;">
+								<div slot="header" class="clearfix"><span>操作说明</span></div>
+								<div>1、圆和矩形通过拖拽来绘制</div>
+								<div>2、其他覆盖物通过点击来绘制、双击结束绘制</div>
+								<div style="color: red;">3、右键单击图形清除绘制</div>
+								<div style="color: red;">4、双击左键选定中心点</div>
+								<div>
+									<el-radio v-model="coversType" label="marker">画点</el-radio>
+									<el-radio v-model="coversType" label="polyline">画折线</el-radio>
+									<el-radio v-model="coversType" label="polygon">画多边形</el-radio>
+									<el-radio v-model="coversType" label="rectangle">画矩形</el-radio>
+									<el-radio v-model="coversType" label="circle">画圆</el-radio>
+								</div>
+							</el-card>
+							<div ref="amap" style="width:100%;height:100%;position:relative;"></div>
+						</div>
+						<el-form label-width="80px" :model="form" :rules="rules" label-position="top" ref="mapConfig" class="gardenFrom">
+							<el-row :gutter="20">
+								<el-col :span="24">
+									<el-form-item label="详细地址">
+										<el-select
+											v-model="citySelected.ids.provinceId" 
+											placeholder="请选择" 
+											@change="getCityList('add')">
+											<el-option 
+												v-for="item in provinceList" 
+												:key="item.code"
+												:label="item.name"
+												:disabled="limit.isRead"
+												:value="item.code"></el-option>
+										</el-select>
+										<el-select 
+											v-if="citySelected.ids.provinceId"
+											v-model="citySelected.ids.cityId"
+											placeholder="请选择" 
+											@change="getCountyList('add')">
+											<el-option 
+												v-for="item in cityList" 
+												:key="item.code" 
+												:label="item.name"
+												:disabled="limit.isRead"
+												:value="item.code"></el-option>
+										</el-select>
+										<el-select
+											v-if="citySelected.ids.cityId"
+											v-model="citySelected.ids.countyId" 
+											placeholder="请选择" 
+											@change="getTownList('add')"
+											>
+											<el-option 
+												v-for="item in countyList" 
+												:key="item.code" 
+												:label="item.name"
+												:disabled="limit.isRead"
+												:value="item.code"></el-option>
+										</el-select>
+										<el-select 
+											v-if="citySelected.ids.countyId"
+											v-model="citySelected.ids.townId" 
+											placeholder="请选择"
+											@change="getAllAddress"
+											>
+											<el-option 
+												v-for="item in townList" 
+												:key="item.code" 
+												:label="item.name"
+												:disabled="limit.isRead"
+												:value="item.code"></el-option>
+										</el-select>
+									</el-form-item>
+									<el-input 
+										v-model="citySelected.ids.address" 
+										placeholder="详细地址" 
+										:disabled="limit.isRead"
+										class="address"></el-input>
+								</el-col>
+							</el-row>
+						</el-form>
+					</div>
+				</el-tab-pane>
+			</el-tabs>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<el-button @click="submit" v-if="!limit.isRead">保 存</el-button>
+			<el-button type="primary" v-if="!limit.isRead" @click="handelNext">{{ activePlanName == 'baseinfo' ? '下一步' : '上一步' }}</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+import { globalReg } from '@/api/CONST';
+export default {
+	name: 'userMobiel',
+	props: {
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: 'title'
+		},
+		action: {
+			type: String,
+			default: 'add'
+		},
+		selectRow: {
+			type: Object,
+			default: {}
+		}
+	},
+	watch: {
+		visible(newVal, oldVal) {
+			this.modalVisible = newVal;
+		},
+		title(newVal, oldVal) {
+			this.modalTitle = newVal;
+		},
+		action(newVal, oldVal) {
+			this.modalAction = newVal;
+		},
+		selectRow(newVal, oldVal) {
+			this.modalSelectRow = newVal;
+		},
+		activePlanName(newVal,oldVal){
+			console.log(newVal)
+		}
+	},
+	data() {
+		return {
+			modalTitle: this.title,
+			modalVisible: this.visible,
+			modalAction: this.action,
+			modalSelectRow: this.selectRow,
+			formLabelWidth: '80%',
+			tabPosition: 'left',
+			activePlanName: 'baseinfo',
+			agriTypeList: [], //涉及农业
+			provinceList:[],
+			cityList:[],
+			countyList:[],
+			townList:[],
+			citySelected:{
+				ids:{
+					provinceId:'',
+					cityId:'',
+					countyId:'',
+					townId:'',
+					address:''
+				}
+			},
+			limit: {
+				isRead: false,
+				isAdd: false
+			},
+			rules: {
+				orchardCode: [
+					{ required: true, message: '园区编码不能为空!', trigger: 'blur' },
+					{ pattern: /^[0-9a-zA-Z]*$/g, message: '编码格式不正确，只能输入数字或字母!' },
+				],
+				orchardName: [
+					{ required: true, message: '园区名称不能为空!', trigger: 'blur' },
+				],
+				orchardArea: [
+					{ required: true, message: '园区规模不能为空!', trigger: 'blur' }, 
+					{ pattern: /^\d+(\.\d+)?$/, message: '园区规模格式不正确，只能输入数字和小数!' },
+				],
+				induType: [
+					{ required: true, message: '行业类型不能为空!', trigger: 'blur' },
+				],
+				workerCount: [
+					{ required: true, message: '人员数不能为空!', trigger: 'blur' }, 
+					{ pattern: /^[0-9]*$/g, message: '人员格式不正确，只能输入数字!' },
+				],
+				telNo: [
+					{ required: false, validator: this.validateTel, trigger: 'blur' },
+				],
+				address: [
+					{ required: true, message: '地址不能为空!', trigger: 'blur' },
+				]
+			},
+			form: {
+				products: [],
+				orchardBorder:[]
+			},
+			//覆盖物绘画类型
+			coversType: 'polygon',
+			mouseTool: null,
+			overlaysId: [],
+			path:[],
+		};
+	},
+	created() {
+		this.getAgriType()
+		this.getProvince() //城市初始化
+		switch (this.modalAction) {
+			case 'add':
+				this.limit.isAdd = true;
+				break;
+			case 'edit':
+				this.getDetail(this.modalSelectRow.id);
+				break;
+			case 'view':
+				this.getDetail(this.modalSelectRow.id);
+				this.limit.isRead = true;
+				break;
+			default:
+				break;
+		}
+	},
+	mounted() {
+		this.initmap();
+	},
+	watch: {
+		coversType(n, v) {
+			this.mouseTool[n]();
+		}
+	},
+	methods: {
+		//获取省
+		getProvince(){
+			this.$port.getProvince()
+				.then(res=>{
+					this.provinceList = res.list
+				}) 
+		},
+		//获取市
+		getCityList(status){
+			if(status === 'add'){
+				this.reSelCityAll()
+			}
+			let params = {
+				id:this.citySelected.ids.provinceId
+			}
+			this.$port.getCity(params)
+				.then(res=>{
+					this.cityList = res.list
+				})
+		},
+		//获取县区
+		getCountyList(status){
+			if(status === 'add'){
+				this.citySelected.ids.countyId = ''
+				this.citySelected.ids.townId = ''
+			}
+			let params = {
+				id:this.citySelected.ids.cityId
+			}
+			this.$port.getCounty(params)
+				.then(res=>{
+					this.countyList = res.list
+				})
+		},
+		//获取乡镇
+		getTownList(status){
+			if(status === 'add'){
+				this.citySelected.ids.townId = ''
+			}
+			let params = {
+				id:this.citySelected.ids.countyId
+			}
+			this.$port.getTown(params)
+				.then(res=>{
+					this.townList = res.list
+				})
+		},
+		//重置城市选中
+		reSelCityAll(){
+			this.citySelected.ids.cityId = ''
+			this.citySelected.ids.countyId = ''
+			this.citySelected.ids.townId = ''
+			this.citySelected.ids.address = ''
+		},
+		//获取选中对应城市的名称
+		findCityName(type){
+			let arr,activeId,obj = {};
+			switch(type){
+				case 'province':
+					arr = this.provinceList
+					activeId = this.citySelected.ids.provinceId
+					break;
+				case 'city':
+					arr = this.cityList
+					activeId = this.citySelected.ids.cityId
+					break;
+				case 'county':
+					arr = this.countyList
+					activeId = this.citySelected.ids.countyId
+					break;
+				case 'townList':
+					arr = this.townList
+					activeId = this.citySelected.ids.townId
+				default:	
+			}
+			obj = arr.find((item)=>{
+				return item.code === activeId
+			})
+			return obj.name
+		},
+		//获取选择全地址
+		getAllAddress(){
+			let str;
+			let province = this.findCityName('province')
+			let city = this.findCityName('city')
+			let county = this.findCityName('county')
+			let townList = this.findCityName('townList')
+			str = province+city+county+townList
+			this.setMapCenter(str)
+		},
+		//地图操作 -> 检索切换城市
+		setMapCenter(data){
+			let params = {
+				keywords:data,
+				key:'952c5bea7e4b38bc32e1aa3beef06130',
+				extensions: 'all'
+			}
+			this.$port.serachAmap(params)
+				.then(res=>{
+					if(res.data.status == 1){
+						let center = res.data.pois[0].location.split(',');
+						let [lng,lat] = center
+						let position = new AMap.LngLat(lng,lat);
+						this.mapObject.setZoomAndCenter(15, position);
+						this.setAmapArea(this.path)
+					}else{
+						console.log("请求失败，请注意!")
+					}
+				})
+		},
+		//获取行业类型
+		getAgriType() {
+			this.$port.getAgriTypeList().then(res => {
+				this.agriTypeList = res.list;
+			});
+		},
+		//地图组件初始化
+		initmap() {
+			this.getAMap().then(res => {
+				this.mapObject = new AMap.Map(res, {
+					layers: [new AMap.TileLayer.RoadNet()],
+					resizeEnable: true, //是否监控地图容器尺寸变化
+					zoom: 13 //初始化地图层级
+				});
+				AMap.plugin('AMap.ToolBar', () => {
+					this.mapObject.addControl(
+						new AMap.ToolBar()
+					);
+				});
+				//异步加载鼠标工具插件
+				AMap.plugin('AMap.MouseTool', () => {
+					//添加轮廓绘画工具
+					this.mouseTool = new AMap.MouseTool(this.mapObject);
+					//监听draw事件可获取画好的覆盖物
+					if(!this.limit.isRead){
+						this.mouseTool.on('draw', e => {
+							const type = e.obj.CLASS_NAME.split('.')[1],
+								  id = e.obj._amap_id;
+							switch (type) {
+								case 'Marker':
+									const position = e.obj.getPosition();
+									this.path.push({
+										id,
+										type,
+										position
+									});
+									break;
+								case 'Circle':
+									//获取中心
+									const center = e.obj.getCenter(),
+										//获取半径
+										radius = e.obj.getRadius();
+									this.path.push({
+										id,
+										type,
+										center,
+										radius,
+									});
+									break;
+								case 'Polygon':
+								case 'Polyline':
+									const path = e.obj.getPath().map(x => {
+										return [x.lng, x.lat];
+									});
+									this.path.push({
+										id,
+										type,
+										path,
+									});
+									break;
+							}
+							this.overlaysId.push(id);
+							//对画好的覆盖物绑定事件
+							e.obj.on('rightclick', e => {
+								if(!this.limit.isRead){
+									this.mapObject.remove(e.target);
+									const idIndex = this.overlaysId.indexOf(id);
+									idIndex > -1 && this.path.splice(idIndex, 1);
+									idIndex > -1 && this.overlaysId.splice(idIndex, 1);
+								}
+							});
+						});
+						this.mouseTool[this.coversType]();
+					}
+				});
+			});
+		},
+		getAMap(i = 0) {
+			if (this.$refs.amap) {
+				return new Promise(r => {
+					r(this.$refs.amap);
+				});
+			} else if (i < 5) {
+				return new Promise(r => {
+					setTimeout(() => {
+						r(this.getAMap(i++));
+					}, 500);
+				});
+			}
+		},
+		//回填地图边界
+		setAmapArea(data){
+			//同步数据ID
+			const fgw = data.map((x, i) => {
+				const id = x.id || i;
+				this.overlaysId.includes(id) || this.overlaysId.push(id);
+				let m = null;
+				switch (x.type) {
+					case 'Marker':
+						m = new AMap[x.type]({
+							position: x.position,
+							icon: x.icon
+						});
+						break;
+					case 'Circle':
+						m = new AMap[x.type]({
+							center: { ...x.center },
+							radius: x.radius,
+							...x.style
+						});
+						break;
+					case 'Polygon':
+					case 'Polyline':
+						m = new AMap[x.type]({
+							path: [...x.path],
+							...x.style
+						});
+						break;
+				}
+				m && m.on('rightclick', e => {
+					if(!this.limit.isRead){
+						this.mapObject.remove(e.target);
+						const idIndex = this.overlaysId.indexOf(id);
+						idIndex > -1 && this.path.splice(idIndex, 1);
+						idIndex > -1 && this.overlaysId.splice(idIndex, 1);
+					}
+				});
+				m && this.mapObject.add(m);
+				return m;
+			});
+		},
+		//获取园区详情
+		getDetail(id) {
+			let params = {
+				id: id
+			};
+			this.$port.getOrchard(params).then(res => {
+				this.form = Object.assign({},res)
+				// let timerArr = [this.form.beginDate]
+				// this.form.createData = timerArr
+				this.path = JSON.parse(this.form.orchardBorder)
+				this.citySelected.ids['provinceId'] = this.form.provinceId
+				this.citySelected.ids['cityId'] = this.form.cityId
+				this.citySelected.ids['countyId'] = this.form.countyId
+				this.citySelected.ids['townId'] = this.form.townId
+				this.citySelected.ids['address'] = this.form.address
+				this.getCityList();
+				this.getCountyList();
+				this.getTownList();
+				setTimeout(()=>{
+					this.getAllAddress()
+				},2000)
+			});
+		},
+		//切换表单
+		handelNext() {
+			this.activePlanName = this.activePlanName === 'baseinfo' ? 'mapConfig' : 'baseinfo';
+		},
+		//创建产出物
+		addProduct() {
+			let lineData = {
+				prodName: '',
+				prodArea: '',
+				prodVol: '',
+				editing: true
+			};
+			this.form.products = this.form.products || [];
+			if (this.form.products.length == 0) {
+				this.form.products.push(lineData);
+			} else {
+				for (let i of this.form.products) {
+					if (i.editing) return this.$message.warning('请先保存当前编辑项目!');
+				}
+				this.form.products.push(lineData);
+			}
+		},
+		//确定产出物
+		handleRowSave($index, row) {
+			this.$set(this.form.products[$index], 'editing', false);
+		},
+		//编辑产出物
+		handleRowEdit($index, row) {
+			this.$set(this.form.products[$index], 'editing', true);
+		},
+		//取消编辑产出物
+		handleRowCancel($index, row) {
+			this.$set(this.form.products[$index], 'editing', false);
+		},
+		//删除产出物
+		handleRowDelete($index, row) {
+			this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			})
+				.then(() => {
+					this.form.products.splice($index, 1);
+					this.$message({
+						type: 'success',
+						message: '删除成功!'
+					});
+				})
+				.catch(err => {
+					this.$message({
+						type: 'error',
+						message: err
+					});
+				});
+		},
+		//提交前校验一把
+		submit() {
+			if (this.activePlanName === 'baseinfo') {
+				this.$refs.baseinfo.validate(valid => {
+					if (valid) {
+						this.slUpSource();
+					} else {
+						return false;
+					}
+				});
+			} else {
+				// this.$refs.mapConfig.validate(valid => {
+				// 	if (valid) {
+				// 		console.log(this.form);
+				// 		console.log(this.$refs.cityAddress.selected)
+						this.slUpSource();
+				// 	} else {
+				// 		return false;
+				// 	}
+				// });
+			}
+		},
+		//判断数据提交方式
+		slUpSource() {
+			switch (this.modalAction) {
+				case 'add':
+					this.add();
+					break;
+				case 'edit':
+					this.update();
+					break;
+				default:
+					break;
+			}
+		},
+		//数据新增
+		add() {
+			this.form.orchardBorder = JSON.stringify(this.path)
+			let params = Object.assign({},this.form,this.citySelected.ids)
+			console.log(params)
+			// if(params.createData){
+				// params.beginDate = params.createData[0]
+				// params.endDate   = params.createData[1]
+				// delete params.createData;
+			// }
+			this.$port.addOrchard(params).then(res => {
+				if (!res.code) {
+						this.form.id = res.id
+						this.$message.success("操作成功！")
+						this.handleCancel()
+						this.$emit('closeModal',true)
+				}
+			});
+		},
+		//数据修改
+		update() {
+			this.form.orchardBorder = JSON.stringify(this.path)
+			let params = Object.assign({},this.form,this.citySelected.ids)
+			// if(params.createData){
+				// params.beginDate = params.createData[0]
+				// params.endDate   = params.createData[1]
+				// delete params.createData;
+			// }
+			this.$port.updateOrchard(params).then(res => {
+				if (!res.code) {
+						this.form.id = res.id
+						this.$message.success("操作成功！")
+						this.handleCancel()
+						this.$emit('closeModal',true)
+				}
+			});
+		},
+		//自定义校验 -> 电话号码校验
+		validateTel(rule, value, callback) {
+			if (value === undefined || value === '' || value === null) {
+				return callback();
+				// new Error('请输入11位手机号,座机以 - 隔开')
+			}
+			let str = value.trim();
+			if (globalReg.regPhone.test(str) || globalReg.regTel.test(str)) {
+				callback();
+			} else {
+				callback(new Error('请输入11位手机号,座机以 - 隔开'));
+			}
+			callback();
+		},
+		//窗口关闭
+		handleCancel() {
+			this.$emit('closeModal', false);
+		}
+	}
+};
+</script>
+
+<style scoped lang="less">
+.gardenMobile {
+	.wrap {
+		width: 100%;
+		padding: 0 15px;
+		.title {
+			display: block;
+			padding: 15px 0;
+			margin-bottom: 15px;
+			border-bottom: 1px solid #dcdfe6;
+		}
+		.gardenFrom {
+			.el-col {
+				padding-right: 75px !important;
+				&:last-child {
+					padding-right: 0 !important;
+				}
+			}
+		}
+		.addCcw {
+			display: block;
+			cursor: pointer;
+			margin-top: 15px;
+			border: 1px dashed #ddd;
+			padding: 13px 0;
+			text-align: center;
+			&:hover {
+				border-color: #409eff;
+				color: #409eff;
+			}
+		}
+		.aMap {
+			width: 100%;
+			height: 350px;
+			margin-bottom: 20px;
+			background: #ddd;
+		}
+	}
+}
+
+.amap-maps .amap-icon img {
+	width: 25px;
+	height: 34px;
+}
+</style>

src/view/expertTeam/modal/importMobiel.vue

@@ -0,0 +1,157 @@
+<template>
+	<el-dialog 
+		:title="modalTitle" 
+		:visible.sync="modalVisible" 
+		:width="formLabelWidth" 
+		top="2vh"
+		@close="handleCancel">
+		<div class="userMobile">
+			<el-steps :active="3" simple>
+			  <el-step title="下载模板文件" icon="el-icon-edit"></el-step>
+			  <el-step title="按格式填写数据" icon="el-icon-upload"></el-step>
+			  <el-step title="上传模版" icon="el-icon-picture"></el-step>
+			</el-steps>
+			<div class="uploadfile">
+				<div class="downloadFile">
+					模版文件: <a href="/htdata/areaData/downloadTemplate">点击下载</a>
+				</div>
+				<div class="upload">
+					<span class="title">文件上传：</span>
+					<el-upload
+					  class="upload-ele"
+					  ref="upload"
+					  :action="importFileUrl"
+					  :on-remove="handleRemove"
+					  :on-change="handleChange"
+					  :on-success="handleSuccess"
+					  :file-list="fileList"
+					  accept=".xlsx,.xls"
+					  :headers = "headers"
+					  :on-exceed="onExceed"
+					  :limit="1"
+					  :multiple="false"
+					  :auto-upload="false">
+					  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+					  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">开始上传</el-button>
+					  <div slot="tip" class="el-upload__tip">注意: <span style="color:red">只能上传xlsx/xks文件</span></div>
+					</el-upload>
+				</div>
+			</div>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<el-button @click="handleCancel">取 消</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+import {globalReg,uploadFileAreaUrl} from '@/api/CONST'
+export default {
+	name: 'userMobiel',
+	props: {
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: 'title'
+		},
+	},
+	watch: {
+		visible(newVal, oldVal) {
+			this.modalVisible = newVal;
+		},
+		title(newVal, oldVal) {
+			this.modalTitle = newVal;
+		},
+	},
+	data() {
+		return {
+			modalTitle: this.title,
+			modalVisible: this.visible,
+			modalAction: this.action,
+			modalSelectRow:this.selectRow,
+			formLabelWidth: '920px',
+			importFileUrl:uploadFileAreaUrl,
+			headers: {
+			        accessToken:'' 
+			},
+			fileList: []
+		};
+	},
+	created() {
+		this.headers.accessToken = this.getAccessToken
+	},
+	methods: {
+		submitUpload() {
+			this.$refs.upload.submit();
+		},
+		handleRemove(file, fileList) {
+		},
+		handleChange(file){
+		},
+		onExceed(){
+			this.$message({
+			  message: '当前限制选择 1 个文件，请删除后继续上传!',
+			  type: 'warning'
+			});
+		},
+		handleSuccess(response, file, fileList){
+			console.log(response,file,fileList)
+			console.log(response.retHead.errCode)
+			if(response.retHead.errCode === 0){
+				this.$message({
+				  message: '文件上传成功!',
+				  type: 'success'
+				});
+				this.handleCancel()
+				this.$emit('closeModal',true)
+			}else{
+				this.$message.error('数据上传出错，请检查环境！');
+			}
+		},
+		handleCancel() {
+			this.$emit('closeModal', false);
+		}
+	},
+	computed:{
+		getAccessToken(){
+			return this.$store.state.accessToken
+		}
+	}
+	
+};
+</script>
+
+<style scoped lang="less">
+.uploadfile{
+	padding:15px 0;
+}
+.downloadFile,
+.upload{
+	border-bottom:1px solid #EBEEF5;
+}
+.downloadFile{
+	height:40px;
+	line-height:40px;
+	font-weight:bold;
+}
+.downloadFile a{
+	margin-left:10px;
+}
+.upload{
+	padding:20px 0;
+	overflow:hidden;
+}
+.upload .title{
+	display:block;
+	font-weight:bold;
+	margin-top:5px;
+	margin-bottom:15px;
+	float:left;
+}
+.upload-ele{
+	padding-left:70px;
+}
+</style>

src/view/help-manage/helpManage.vue

@@ -0,0 +1,238 @@
+<template>
+	<!-- 用户配置 -->
+	<div class="pageBody">
+		<el-row>
+			<el-col :span="24">
+				<div class="tableHead">
+					<el-row>
+						<el-col :span="6">
+							<div class="userTitle">
+								<el-button type="primary" icon="el-icon-plus" size="small" @click="add" v-if="auth.includes('save')">新增文章</el-button>
+							</div>
+						</el-col>
+						<el-col :span="18">
+							<div class="grid-content bg-purple-dark fr">
+								<el-form :inline="true" :model="searchParams" ref="form" class="demo-form-inline" >
+									<el-form-item>
+										<el-input 
+											v-model="searchParams.queryParam" 
+											placeholder="请输入文章名称"></el-input>
+									</el-form-item>
+									<el-form-item>
+										<el-button type="primary" @click="searchHandle">搜索</el-button>
+										<el-button type="warning" @click="resetSearch">重置</el-button>
+									</el-form-item>
+								</el-form>
+							</div>
+						</el-col>
+					</el-row>
+				</div>  
+				<el-divider></el-divider>
+				<el-table :data="listData" border style="width: 100%" v-loading="loading">
+					<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
+					<el-table-column prop="title" label="文章标题" ></el-table-column> 
+					<!-- <el-table-column label="文章类型" >
+						<template slot-scope="scope">
+							{{scope.row.noticeType | noticeType}}
+						</template>
+					</el-table-column> -->
+					<!-- <el-table-column label="状态">
+						<template slot-scope="scope">
+							{{scope.row.state | articleType}}
+						</template>
+					</el-table-column> -->
+					<el-table-column prop="createDate" label="发布时间" ></el-table-column>
+					<el-table-column fixed="right" label="操作"  width="220" align="center">
+						<template slot-scope="scope">
+							<el-button type="primary" size="mini" @click="detail(scope.row)">查看</el-button>
+						    <el-button type="success" size="mini" @click="edit(scope.row)" v-if="auth.includes('update')">编辑</el-button>
+							<el-button type="warning" size="mini" @click="del(scope.row)" v-if="auth.includes('delete')">删除</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+			</el-col>
+		</el-row>
+		<div class="page-right">
+			<Pagination :total="listTotal" @change="paginationChange"></Pagination>
+		</div>
+		<aev-mobiel
+			v-if="modal.adv.visibleModal"
+			:title="modal.adv.title"
+			:action="modal.adv.action"
+			:visible="modal.adv.visibleModal"
+			:selectRow="modal.adv.selectRow"
+			@closeModal="closeModal">
+		</aev-mobiel>
+	</div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import aevMobiel from './modal/aevMobiel'
+import { paginationConfig } from '@/api/CONST'
+export default {
+	name: 'helpManage',
+	components:{
+		Pagination,
+		aevMobiel
+	},
+	created(){
+		let params = Object.assign({},this.searchParams,this.pagination)
+		this.getList(params)	
+	},
+	mounted(){
+		
+	},
+	data() {
+		return {
+			loading:true,
+			visibleDel:false,
+			modal:{
+				adv:{
+					action:'',
+					title:'',
+					visibleModal:false,
+					selectRow:null
+				}
+			},
+			searchParams:{
+				queryParam:'',
+				productName:'',
+			},
+			pagination:Object.assign({},paginationConfig),
+			listTotal:0,
+			listData:[],
+		};
+	},
+	methods: {
+		searchHandle() {
+			let params = Object.assign({},this.searchParams,this.pagination)
+			this.getList(params)
+		},
+		resetSearch(){
+			this.searchParams = {}
+			let params = Object.assign({},this.searchParams,this.pagination)
+			this.getList(params)
+		},
+		add(){
+			this.modal.adv.visibleModal = true
+			this.modal.adv.title = '添加文章'
+			this.modal.adv.action = 'add'
+		},
+		detail(item){
+			this.modal.adv.visibleModal = true
+			this.modal.adv.title = '文章查看'
+			this.modal.adv.action = 'view'
+			this.modal.adv.selectRow = item
+		},
+		edit(item){
+			this.modal.adv.visibleModal = true
+			this.modal.adv.title = '园区信息编辑'
+			this.modal.adv.action = 'edit'
+			this.modal.adv.selectRow = item
+		},
+		del(item){
+			this.$confirm('此操作将永久删除此条数据, 是否继续?', '提示', {
+			  confirmButtonText: '确定',
+			  cancelButtonText: '取消',
+			  type: 'warning'
+			}).then(() => {
+				let params = {
+					id:item.id
+				}
+				this.$port.delNotice(params).then(res =>{
+					if(!res.code){
+						this.$message({
+							type: 'success',
+							message: '删除成功!',
+							duration:800
+						});
+						this.getList()
+					}
+				})
+			}).catch(() => {
+			            
+			});
+		},
+		getList(params){
+			this.loading = true
+			this.$port.getNoticeList(params)
+				.then(res =>{
+					console.log(res)
+					this.loading = false
+					this.listData = res.list || []
+					this.listTotal = res.total
+				})
+		},
+		paginationChange(json){
+			let params = Object.assign({},this.searchParams,json)
+			this.getList(params)
+		},
+		closeModal(flag = false){
+			this.modal.adv.visibleModal = false
+			flag && this.getList()
+		}
+	},
+	filters:{
+		articleType:function(val){
+			let status
+			if(val == 0){
+				status = '未发布';
+			}else if(val == 1){
+				status = '已发布';
+			}else if(val == 2){
+				status = '撤回';
+			}
+			return status;
+		},
+		noticeType:function(val){
+			let status
+			if(val == 1){
+				status = '新闻';
+			}else if(val == 2){
+				status = '通知公告';
+			}else if(val == 9){
+				status = '产业扶贫';
+			}
+			return status;
+		}
+	},
+	computed: {
+		//当前页权限
+		auth() {
+			const activePage = this.$route.path;
+			return (
+				this.$store.state.userTree
+					.filter(x => {
+						return x.url == activePage;
+					})
+					.map(x => {
+						return x.auth;
+					})[0] || []
+			);
+		}
+	}
+};
+</script>
+
+<style lang="less" scoped>
+.fr{
+	float:right;
+}
+.userTitle{
+	margin-top:8px;
+}
+.el-form-item {
+	margin-bottom: 0;
+}
+.tableHead{
+	vertical-align:middle;
+	.el-button{
+		margin-left:15px;
+	}
+}
+.page-right{
+	margin-top:15px;
+	float:right;
+}
+</style>

src/view/help-manage/modal/aevMobiel.vue

@@ -0,0 +1,335 @@
+<template>
+	<el-dialog :title="modalTitle" :visible.sync="modalVisible" :width="formLabelWidth" top="2vh" @close="handleCancel">
+		<div class="gardenMobile" v-loading="loading">
+			<el-form label-width="100px" :model="form" :rules="rules" label-position="right" ref="form" class="gardenFrom">
+				<el-row :gutter="20">
+					<el-col :span="20">
+						<el-form-item label="文章标题:" prop="title">
+							<el-input v-model="form.title" :disabled="limit.isRead"></el-input>
+						</el-form-item>
+					</el-col>
+					<!-- <el-col :span="20">
+						<el-form-item label="数据来源:">
+							<el-input v-model="form.origin" :disabled="limit.isRead"></el-input>
+						</el-form-item>
+					</el-col> -->
+					<!-- <el-col :span="20">
+						<el-form-item label="文章类型:" prop="noticeType">
+							<el-select v-model="form.noticeType" placeholder="请选择" :disabled="limit.isRead">
+								<el-option v-for="item in list.articleType" :key="item.id" :label="item.name" :disabled="limit.isRead" :value="item.id"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col> -->
+					<!-- <el-col :span="20"> 
+						<el-form-item label="文章状态:" prop="state">
+							<el-select v-model="form.state" placeholder="请选择" :disabled="limit.isRead">
+								<el-option v-for="item in list.stateType" :key="item.id" :label="item.name" :disabled="limit.isRead" :value="item.id"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col> -->
+					<!-- <el-col :span="20">
+						<el-form-item label="内容:" prop="content">
+							<el-input type="textarea" :rows="9" placeholder="请输入内容" v-model="form.content" :disabled="limit.isRead"></el-input>
+						</el-form-item>
+					</el-col> -->
+					<el-col :span="20">
+						<el-form-item label="上传照片" v-if="!limit.isRead">
+							<el-upload
+							  class="upload-demo"
+							  ref="upload"
+							  :multiple="true"
+							  :show-file-list="false"
+							  :auto-upload="true"
+							  :action="uploadImgUrl"
+							  :on-progress="handelProgress"
+							  :before-upload="beforeAvatarUpload"
+							  :on-success="handelSuccess">
+							  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+							  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+							</el-upload>
+							<span v-show="uploadStatus"><i class="el-icon-loading"></i>正在非常努力的上传...</span>
+						</el-form-item>
+					</el-col>
+					<el-col :span="20">
+						<label for="content" class="el-form-item__label" style="width: 100px;" v-show="this.form.files.length > 0">已上传图片:</label>
+						<el-form-item>
+							<ul class="imgList">
+								<li v-for="(item,index) in this.form.files">
+									<div class="img">
+										<img :src="'/htdata/' + item.fileUrl">
+									</div>
+									<div class="textarea">
+										<span class="icon" @click="delUploadImg(index)" v-if="!limit.isRead"><i class="el-icon-close"></i></span>
+										<el-input type="textarea" v-model="item.fileDesc" :rows="5" :disabled="limit.isRead" placeholder="请输入图片描述内容"></el-input>
+									</div>
+								</li>
+							</ul>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<el-button @click="handleCancel">取 消</el-button>
+			<el-button type="primary" @click="submit" v-if="!limit.isRead">保 存</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+import { uploadImgUrl } from '@/api/CONST';
+export default {
+	name: 'userMobiel',
+	props: {
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: 'title'
+		},
+		action: {
+			type: String,
+			default: 'add'
+		},
+		selectRow: {
+			type: Object,
+			default: {}
+		}
+	},
+	watch: {
+		visible(newVal, oldVal) {
+			this.modalVisible = newVal;
+		},
+		title(newVal, oldVal) {
+			this.modalTitle = newVal;
+		},
+		action(newVal, oldVal) {
+			this.modalAction = newVal;
+		},
+		selectRow(newVal, oldVal) {
+			this.modalSelectRow = newVal;
+		}
+	},
+	data() {
+		return {
+			modalTitle: this.title,
+			modalVisible: this.visible,
+			modalAction: this.action,
+			modalSelectRow: this.selectRow,
+			formLabelWidth: '60%',
+			tabPosition: 'left',
+			uploadImgUrl:uploadImgUrl,
+			fileList:[],
+			uploadStatus:false,
+			list:{
+				articleType:[{
+						id:1,
+						name:'新闻'
+					},
+					{
+						id:2,
+						name:'通知公告'
+					},
+					{
+						id:9,
+						name:'产业扶贫'
+				}],
+				stateType:[{
+					id:0,
+					name:'未发布'
+				},{
+					id:1,
+					name:'已发布'
+				},{
+					id:2,
+					name:'撤回'
+				}]
+			},
+			limit: {
+				isRead: false,
+				isAdd: false
+			},
+			rules: {
+				title: [{ required: true, message: '文章标题不能为空!', trigger: 'blur' }],
+				// noticeType: [{ required: true, message: '文章类型不能为空!', trigger: 'blur' }],
+				// state: [{ required: true, message: '文章状态不能为空!', trigger: 'blur' }],
+				// content: [{ required: true, message: '内容不能为空!', trigger: 'blur' }],
+			},
+			form: {
+				noticeType:9,
+				files:[]
+			}
+		};
+	},
+	created() {
+		switch (this.modalAction) {
+			case 'add':
+				this.limit.isAdd = true;
+				break;
+			case 'edit':
+				this.getDetail(this.modalSelectRow.id);
+				break;
+			case 'view':
+				this.getDetail(this.modalSelectRow.id);
+				this.limit.isRead = true;
+				break;
+			default:
+				break;
+		}
+	},
+	mounted() {},
+	methods: {
+		handelProgress(event, file, fileList){
+			this.uploadStatus = true
+		},
+		handelSuccess(file,fileList){
+			console.log(fileList)
+			this.uploadStatus = false
+			let item = {
+				fileDesc:'',
+				...file.retBody
+			}
+			this.form.files.push(item)
+		},
+		beforeAvatarUpload(file) {
+			var isImg = /^image\/(jpeg|png|jpg)$/.test(file.type)
+			// const isJPG = file.type === 'image/jpeg';
+			const isLt2M = file.size / 1024 / 1024 < 2;
+			if (!isImg) {
+			  this.$message.error('上传头像图片只能是 JPG或PNG 格式!');
+			}
+			if (!isLt2M) {
+			  this.$message.error('上传头像图片大小不能超过 2MB!');
+			}
+			return isImg && isLt2M;
+		},
+		delUploadImg(index){
+			this.form.files.splice(index,1)
+		},
+		//获取详情
+		getDetail(id) {
+			this.loading = true
+			let params = {
+				id: id
+			};
+			this.$port.getNotice(params).then(res => {
+				this.form = res
+				this.loading = false
+			});
+		},
+		//提交前校验一把
+		submit() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					this.slUpSource()
+				}else {
+					return false;
+				}
+			})
+		},
+		//判断数据提交方式
+		slUpSource() {
+			switch (this.modalAction) {
+				case 'add':
+					this.add();
+					break;
+				case 'edit':
+					this.update();
+					break;
+				default:
+					break;
+			}
+		},
+		//数据新增
+		add() {
+			let params = Object.assign({},this.form)
+			console.log(params)
+			this.$port.addNotice(params).then(res => {
+				if (!res.code) {
+					this.$message.success("操作成功！")
+					this.modalVisible = false
+					this.$emit('closeModal', true);
+				}
+			});
+		},
+		//数据修改
+		update() {
+			let params = Object.assign({},this.form)
+			this.$port.updateNotice(params).then(res => {
+				if (!res.code) {
+					this.$message.success("操作成功！")
+					this.modalVisible = false
+					this.$emit('closeModal', true);
+				}
+			});
+		},
+		//窗口关闭
+		handleCancel() {
+			this.$emit('closeModal', false);
+		}
+	}
+};
+</script>
+
+<style scoped lang="less">
+.imgList{
+	list-style:none;
+	margin:0;
+	padding:0;
+	li{
+		display:block;
+		padding:6px;
+		margin-bottom:10px;
+		border:1px solid #ddd;
+		border-radius:3px;
+		.img{
+			float:left;
+			width:120px;
+			height:120px;
+			position:relative;
+			.fileName{
+				position:absolute;
+				left:0;
+				right:0
+			}
+			img{
+				width:120px;
+				height:120px;
+			}
+		}
+		.textarea{
+			position:relative;
+			margin-left:130px;
+			.icon{
+				display:none;
+				background:red;
+				position:absolute;
+				top:-10px;
+				right:-10px;
+				z-index:999;
+				font-size:28px;
+				cursor:pointer;
+				width:20px;
+				height:20px;
+				border-radius:50%;
+				color:#fff;
+				text-align:center;
+				line-height:13px;
+				i{
+					font-size:16px;
+					font-weight:block;
+				}
+			}
+			&:hover{
+				.icon{
+					display:block;
+				}
+			}
+		}
+		
+	}
+}
+
+</style>

src/view/layout.vue

@@ -0,0 +1,258 @@
+<template>
+	<el-container style="display: flex;flex-direction: column;">
+		<el-header class="header">
+			<div class="header-logo">
+				贵州“林产品态势图”应用平台
+				<!-- <img src="../assets/images/logo.png" /> -->
+			</div>
+			<div class="header-nav">
+				<el-menu
+					:default-active="activeIndex"
+					mode="horizontal"
+					@select="handleSelect"
+					background-color="#000"
+					text-color="#fff"
+					active-text-color="#409EFF"
+					:router="true"
+				>
+					<template v-for="(item, index) in leftMenus">
+						<el-menu-item :index="item.url" :key="index">{{ item.name }}</el-menu-item>
+						<!-- <el-menu-item v-if="!item.childs" :index="item.entity.path" :key="index">{{ item.entity.title }}</el-menu-item>
+						<my-sub-menu v-if="item.childs" :subData="item.childs" :parIndex="index" :title="item.entity.title" :key="index + '0'"></my-sub-menu> -->
+
+					</template>
+				</el-menu>
+			</div>
+			<div class="header-user">
+			  <div class="header-user-info">
+				  <span>您好! {{getSysName}}</span>
+				  <el-dropdown>
+					  <i class="el-icon-setting" style="margin-right: 15px"></i>
+					  <el-dropdown-menu slot="dropdown">
+						<el-dropdown-item @click.native="loginOut">退出系统</el-dropdown-item>
+					  </el-dropdown-menu>
+				  </el-dropdown>
+			  </div>
+			</div>
+		</el-header>
+		<el-main class="mian">
+			<router-view></router-view>
+		</el-main>
+		<!-- <el-footer class="footer" height="40px"><div>copyright&copy;2019 贵州弘维软件科技有限公司</div></el-footer> -->
+		<!-- <el-footer class="footer" height="20px"></el-footer> -->
+	</el-container>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			//leftMenus: [
+				// {
+				// 	entity: {
+				// 		title: '区域数据管理',
+				// 		path: '/data-source'
+				// 	},
+				// 	childs: false
+				// },
+				// {
+				// 	entity: {
+				// 		title: '坝区信息管理',
+				// 		path: '/data-source'
+				// 	},
+				// 	childs: false
+				// },
+				// {
+				// 	entity: {
+				// 		title: '专家团队管理',
+				// 		path: '/expert-team'
+				// 	},
+				// 	childs: false
+				// },
+				// {
+				// 	entity: {
+				// 		title: '数据源',
+				// 		path: '/data-source'
+				// 	},
+				// 	childs: false
+				// },
+				// {
+				// 	entity: {
+				// 		title: '专题',
+				// 		path: '/special-topic'
+				// 	},
+				// 	childs: false
+				// },
+				// {
+				// 	entity: {
+				// 		title: '可视化配置',
+				// 		path: '/a-picture'
+				// 	},
+				// 	childs: false
+				// },
+				// {
+				// 	entity: {
+				// 		title: '角色管理',
+				// 		path: '/role'
+				// 	},
+				// 	childs: false
+				// },
+				// {
+				// 	entity: {
+				// 		title: '用户管理',
+				// 		path: '/user'
+				// 	},
+				// 	childs: false
+				// },
+				// {
+				// 	entity: {
+				// 		title: '系统管理',
+				// 		path: ''
+				// 	},
+				// 	childs: [
+				// 		{
+				// 			entity: {
+				// 				title: '角色管理',
+				// 				path: '/role'
+				// 			},
+				// 			childs: false
+				// 		},
+				// 		{
+				// 			entity: {
+				// 				title: '用户管理',
+				// 				path: '/user'
+				// 			},
+				// 			childs: false
+				// 		}
+				// 	]
+				// }
+			//]
+		};
+	},
+	created(){
+		//登录成功获取用户菜单及用户权限
+		this.$port.getUserMenuTree().then(res => {
+			this.$store.commit('saveUserTree',res.list || []);
+			//跳转到菜单第计算页
+			this.showPage && this.$router.push(this.showPage);
+		});
+	},
+	computed: {
+		//当前路由
+		activeIndex() {
+			return this.$route.path || '';
+		},
+		//获取登录用户名
+		getSysName(){
+			return this.$store.state.userInfo.name
+		},
+		//当前用户树
+		leftMenus(){
+			return this.$store.state.userTree || [];
+		},
+		//计算显示页
+		showPage(){
+			if(this.leftMenus.length){
+				return (this.leftMenus.filter(x=>{
+					if(x.url == this.activeIndex)return true;
+				}).shift() || {})["url"] || this.leftMenus[0].url || '';
+			}else{
+				return false;
+			}
+		}
+	},
+	methods: {
+		goYiManage(){
+			this.$port.goYlAdmin()
+				.then(res=>{
+					window.open(res.loginUrl)
+				})
+		},
+		loginOut(){
+			let params = {
+				userId:this.$store.state.userInfo.userId
+			}
+			console.log(params)
+			this.$port.loginOut(params)
+				.then(res=>{
+					if (!res.code) {
+						this.$message({
+							message: '退出成功',
+							type: 'success',
+							duration:800
+						});
+						//同步数据到状态管理
+						this.$store.commit("logout");
+						this.$router.push('/login');
+					}
+				})
+		},
+		handleSelect(key, keyPath) {
+			// console.log(key, keyPath);
+		}
+	}
+};
+</script>
+<style lang="less">
+.header {
+	background-color: #000;
+	display: flex;
+	z-index: 2;
+	&-logo {
+		text-align: center;
+		width: 25%;
+		color:#fff;
+		font-size:20px;
+		font-weight:bold;
+		&::after {
+			content: '';
+			display: inline-block;
+			height: 100%;
+			width: 0;
+			opacity: 0;
+			vertical-align: middle;
+		}
+		// img {
+		// 	display: inline-block;
+		// 	height: 70%;
+		// 	vertical-align: middle;
+		// }
+	}
+	&-nav {
+		width:70%;
+		// display: flex;
+		// justify-content: flex-end;
+	}
+	&-user {
+		width:10%;
+		&-info{
+			float:right;
+			height:60px;
+			line-height:60px;
+			font-size:14px;
+			text-align:right;
+			color:#fff;
+			.el-icon-setting{
+				color:#fff;
+				font-size:20px;
+				vertical-align:middle;
+			}
+		}
+	}
+	&-userBtn{
+		margin-top:15px;
+		float:right;
+	}
+}
+.mian {
+	padding-bottom: 0;
+	height: 100%;
+}
+.footer {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	opacity: 0.6;
+	font-size: 14px;
+}
+</style>

src/view/login.vue

@@ -0,0 +1,158 @@
+<template>
+	<div class="c-box">
+		<div class="c-box-form">
+			<div class="sys-logo">
+				<!-- <h2 class="title">湄潭竹香米业</h2> -->
+				<!-- <h3 class="sub-title">数字农业精准管理图系统</h3> -->
+			</div>
+			<el-main>
+				<el-form ref="form" :model="form" :rules="rules">
+					<h3 class="formTitle">
+						<img src="../assets/images/login-logo-bg3.png">
+						贵州“林产品态势图”应用平台</h3>
+					<el-form-item prop="userName">
+						<el-input placeholder="请输入账号" v-model="form.userName"><i slot="prefix" class="el-input__icon el-icon-user iconBlue"></i></el-input>
+					</el-form-item>
+					<el-form-item prop="pwd">
+						<el-input placeholder="请输入密码" v-model="form.pwd" show-password><i slot="prefix" class="el-input__icon el-icon-lock iconBlue"></i></el-input>
+					</el-form-item>
+					<el-form-item><el-button style="width: 100%;" type="primary" native-type="submit" @click="onSubmit" :loading="loading">登录</el-button></el-form-item>
+				</el-form>
+			</el-main>
+		</div>
+	</div>
+</template>
+
+<script>
+import md5 from 'md5';
+export default {
+	data() {
+		return {
+			form: {
+				userName: '',
+				pwd: ''
+			},
+			loading: false,
+			fun: this.$timeFun(400)
+		};
+	},
+	computed: {
+		//需要提交的表单数据
+		submitData() {
+			return {
+				userName: this.form.userName,
+				//加密算法
+				pwd: md5('b8d11ee289394be688ef3a4f6968efed'.substring(0, 8)).substring(0, 5) + btoa(this.form.pwd)
+			};
+		},
+		//表单验证规则
+		rules() {
+			return {
+				userName: [{ required: true, message: '请输入用户名', trigger: 'change' }, { min: 2, max: 8, message: '长度在 3 到 8 个字符', trigger: 'change' }],
+				pwd: [{ pattern: /^.{6,15}$/, message: '密码必须6-15位', trigger: 'change' }]
+			};
+		}
+	},
+	methods: {
+		onSubmit() {
+			this.$refs['form'].validate(valid => {
+				if (valid) {
+					this.loading = true;
+					this.fun(() => {
+						this.$port.login(this.submitData).then(res => {
+							this.loading = false;
+							if (!res.code) {
+								this.$message({
+									message: '登录成功',
+									type: 'success',
+									duration: 800
+								});
+								//同步数据到状态管理
+								this.$store.commit('saveToken', res.accessToken || '');
+								this.$store.commit('saveUser', res);
+								this.$router.push('/layout');
+							}
+						});
+					});
+				} else {
+					return false;
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style lang="less">
+.iconBlue {
+	color: #70BA7B;
+	font-size: 18px;
+}
+.c-box {
+	min-height: 100vh;
+	background: url(../assets/images/login-bg.png) no-repeat center center;
+	background-size: 100% 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	&-form {
+		margin-top: -3%;
+		width: 800px;
+		padding: 0;
+		background: rgba(255, 255, 255, 1);
+		box-shadow: 0 0 15px 0 rgba(0,0,0,.3);
+		border-radius: 10px;
+		overflow: hidden;
+		.sys-logo {
+			width: 340px;
+			height: 300px;
+			background:url(../assets/images/login-logo-bg2.png) no-repeat left center,url(../assets/images/login-logo-bg.png) no-repeat center center;
+			background-size:93% 89%, 102% 107%;
+			float: left;
+			text-align: center;
+			margin-right: 20px;
+			h2,
+			h3 {
+				font-family: PingFangSC-Medium, PingFang SC;
+				font-weight: 500;
+				color: rgba(255, 255, 255, 1);
+				text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.74);
+			}
+			.title {
+				margin: 84px 0 5px 0;
+				font-size: 30px;
+			}
+			.sub-title {
+				font-size: 18px;
+				letter-spacing: 3px;
+			}
+		}
+		.el-main {
+			padding: 20px 36px 20px 22px;
+			.formTitle {
+				display: flex;
+				align-items: center;
+				font-size: 18px;
+				color: #336666;
+				font-weight: 700;
+				margin: 15px 0 18px 0;
+				letter-spacing:4px;
+				img{
+					width: 42px;
+					height: 38px;
+					margin-right: 10px;
+				}
+			}
+			.el-input input:focus{
+				border-color: #70BA7B;
+			}
+		}
+		.el-button {
+			width: 100%;
+			background: linear-gradient(180deg, #70BA7B 1%, #70BA7B 100%);
+			border: none;
+			box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.1);
+		}
+	}
+}
+</style>

src/view/pwdManage/modal/aevMobiel.vue

@@ -0,0 +1,472 @@
+<template>
+	<el-dialog 
+		:title="modalTitle" 
+		:visible.sync="modalVisible" 
+		:width="formLabelWidth" 
+		top="2vh"
+		@close="handleCancel">
+		<div class="userMobile">
+			<el-form label-width="80px" :model="form" :rules="rules" ref="from">
+				<el-form-item label="专家名称" prop="expertName"> 
+					<el-input v-model="form.expertName" :disabled="limit.isRead"></el-input>
+				</el-form-item>
+				<el-form-item label="专家类型" prop="typeId">
+					<el-select v-model="form.typeId" placeholder="请选择" :disabled="limit.isRead">
+					    <el-option
+					      v-for="item in expertTypeList"
+					      :key="item.id"
+					      :label="item.dictValue"
+					      :value="item.id">
+					    </el-option>
+					  </el-select>
+				</el-form-item>
+				<el-form-item label="所属区域" prop="areaCode"> 
+					<el-select v-model="form.areaCode" placeholder="请选择" :disabled="limit.isRead">
+					    <el-option
+					      v-for="item in areaList"
+					      :key="item.posId"
+					      :label="item.posName"
+					      :value="item.posId">
+					    </el-option>
+					  </el-select>
+				</el-form-item>
+				<el-form-item label="所属坝区" prop="damId">
+					  <el-select v-model="form.damId" multiple placeholder="请选择" :disabled="limit.isRead">
+						  <el-option
+							v-for="item in damList"
+							:key="item.id"
+							:label="item.damName"
+							:value="item.id">
+						  </el-option>
+					  </el-select>
+				</el-form-item>
+				<el-form-item label="专家职称" prop="job">
+					<el-input v-model="form.job" :disabled="limit.isRead"></el-input>
+				</el-form-item>
+				<el-form-item label="联系电话" prop="mobile">
+					<el-input v-model="form.mobile" :disabled="limit.isRead"></el-input>
+				</el-form-item>
+				<el-form-item label="领域" prop="domain" v-if="limit.isRead">
+					<el-tag
+					  :key="index"
+					  v-for="(tag,index) in addLabel.dynamicTags">
+					  {{tag}}
+					</el-tag>
+				</el-form-item>
+				<el-form-item label="领域" prop="domain" v-else>
+					<el-tag
+					  :key="index"
+					  v-for="(tag,index) in addLabel.dynamicTags"
+					  closable
+					  :disable-transitions="true"
+					  @close="handleCloseTag(tag)">
+					  {{tag}}
+					</el-tag>
+					<el-input
+					  class="input-new-tag"
+					  v-if="addLabel.inputVisible"
+					  v-model="addLabel.inputValue"
+					  ref="saveTagInput"
+					  size="small"
+					  @keyup.enter.native="handaddTag"
+					  @blur="handaddTag"
+					>
+					</el-input>
+					<el-button v-else class="button-new-tag" size="small" @click="showAddTagInput">+ 新增</el-button>
+				</el-form-item>
+				<el-form-item label="个人简介" prop="personDesc">
+					<el-input
+					  type="textarea"
+					  :rows="2"
+					  placeholder="请输入内容"
+					  v-model="form.personDesc"
+					  :disabled="limit.isRead">
+					</el-input>
+				</el-form-item>
+				<el-form-item label="上传照片" prop="img" v-if="!limit.isRead">
+					<el-upload
+					  class="avatar-uploader"
+					  :action="uploadImgUrl"
+					  :show-file-list="false"
+					  :on-success="handleAvatarSuccess"
+					  :before-upload="beforeAvatarUpload">
+					  <div v-if="form.img !== null" class="uploaded">
+						  <!-- {{form.img}} -->
+						  <!-- {{upload.imgName !== null}} -->
+						  <div class="action">
+							  <el-button type="warning" size="mini" >重新上传</el-button>
+							  <el-button type="danger" size="mini"  @click.stop="delUploadImg">删除</el-button>
+						  </div>
+					  	  <img :src="'/htdata/' + upload.imgName" class="avatar">
+					  </div>
+					  <i v-else class="el-upload el-icon-plus avatar-uploader-icon"></i>
+					</el-upload>
+				</el-form-item>
+				<el-form-item v-else label="上传照片" prop="img">
+					  <div v-if="upload.imgName !== ''" class="uploaded">
+						  <div v-if="form.img === null" class="noPhoto">
+							  <span class="txt">暂无图片</span>
+						  </div>
+						  <img v-else :src="'/htdata/' + upload.imgName"  class="avatar">
+					  </div>
+				</el-form-item>
+			</el-form>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<el-button @click="handleCancel">取 消</el-button>
+			<el-button type="primary" @click="submit" v-if="!limit.isRead">确 定</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+import {globalReg,uploadImgUrl} from '@/api/CONST'
+export default {
+	name: 'userMobiel',
+	props: {
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: 'title'
+		},
+		action: {
+			type: String,
+			default: 'add'
+		},
+		selectRow:{
+			type:Object,
+			default:{}
+		}
+	},
+	watch: {
+		visible(newVal, oldVal) {
+			this.modalVisible = newVal;
+		},
+		title(newVal, oldVal) {
+			this.modalTitle = newVal;
+		},
+		action(newVal, oldVal) {
+			this.modalAction = newVal;
+		},
+		selectRow(newVal,oldVal){
+			this.modalSelectRow = newVal
+		}
+	},
+	data() {
+		return {
+			uploadImgUrl:uploadImgUrl,
+			modalTitle: this.title,
+			modalVisible: this.visible,
+			modalAction: this.action,
+			modalSelectRow:this.selectRow,
+			formLabelWidth: '720px',
+			limit:{
+				isRead:false,
+				isAdd:false
+			},
+			addLabel:{
+				dynamicTags: [],
+				inputVisible: false,
+				inputValue: '',
+			},
+			optionProps: {
+				expandTrigger:'hover',
+				checkStrictly: true,
+				value: 'id',
+				label: 'branchName',
+				children: 'children'
+			},
+			upload:{
+				imgName:''
+			},
+			areaList: [], //区域列表
+			expertTypeList:[], //专家类型
+			damList:[], //坝区信息
+			rules:{
+				expertName:[
+					 { required: true, message: '专家姓名不能为空!', trigger: 'blur' }
+				],
+				typeId:[
+					{ required: true, message: '专家类型不能为空!', trigger: 'blur' }
+				],
+				areaCode:[
+					{ required: true, message: '所属区域不能为空!', trigger: 'blur' }
+				],
+				job:[
+					{ required: true, message: '专家职称不能为空!', trigger: 'blur' }
+				],
+				mobile:[
+					{ required: true,validator:this.validateTel, trigger: 'blur' }
+				]
+			},
+			form: {
+				img:null
+			}
+		};
+	},
+	created() {
+		switch(this.modalAction) {
+		     case 'add':
+				this.limit.isAdd = true
+		        break;
+		     case 'edit':
+				this.getDetail(this.modalSelectRow.id)
+		        break;
+			 case 'view':
+				this.getDetail(this.modalSelectRow.id)
+				this.limit.isRead = true
+			    break;
+		     default:
+		        break;
+		} 
+		this.initPage()
+	},
+	methods: {
+		//强制视图渲染
+		forceUpdate(){
+			this.$forceUpdate()
+		},
+		//初始化角色和组织机构
+		initPage(){
+			this.getAreaList(); //获取区域名称
+			this.getExpertType(); //获取专家类型
+			this.getDamList();//获取坝区
+		},
+		//获取区域名称
+		getAreaList(){ 
+			let params = {
+				sn:"522730000000"
+			}
+			this.$port.getAreaList(params)
+				.then(res =>{
+					this.areaList = res.list
+				})
+		},
+		//获取专家类型
+		getExpertType(){
+			let params = {
+				dictCode:"ZJLX"
+			}
+			this.$port.getExpertType(params)
+				.then(res =>{
+					this.expertTypeList = res.list
+				})
+		},
+		//获取所属坝区
+		getDamList(){
+			this.$port.getDamList()
+				.then(res=>{
+					this.damList = res.list
+				})
+		},
+		//领域标签关闭
+		handleCloseTag(tag) {
+			this.addLabel.dynamicTags.splice(this.addLabel.dynamicTags.indexOf(tag), 1);
+		},
+		//展示输入标签
+		showAddTagInput() {
+			this.addLabel.inputVisible = true;
+			this.$nextTick(_ => {
+			  this.$refs.saveTagInput.$refs.input.focus();
+			});
+		},
+		//保存标签
+		handaddTag() {
+			let inputValue = this.addLabel.inputValue;
+			if (inputValue) {
+			  this.addLabel.dynamicTags.push(inputValue);
+			}
+			this.addLabel.inputVisible = false;
+			this.addLabel.inputValue = '';
+		},
+		//获取专家详情
+		getDetail(id){
+			let params = {
+				id:id
+			}
+			this.$port.getExpertDetail(params)
+				.then(res => {
+					let showInfo = Object.assign({},res)
+					let damId = showInfo.damId === null ? null : showInfo.damId.split(",")
+					let damIdName = showInfo.damIdName === null ? null : showInfo.damIdName.split(",")
+					showInfo.damId = damId
+					showInfo.damIdName = damIdName
+					this.addLabel.dynamicTags = showInfo.domain === null ? null : showInfo.domain.split(",")
+					this.upload.imgName = showInfo.imgUrl
+					this.form = showInfo
+				})
+		},
+		//图片上传
+		handleAvatarSuccess(res, file) {
+			console.log(res.retBody)
+			this.upload.imgName = res.retBody.fileUrl
+			this.form.img = res.retBody.fileName
+		},
+		beforeAvatarUpload(file) {
+			const isJPG = file.type === 'image/jpeg';
+			const isLt2M = file.size / 1024 / 1024 < 2;
+			if (!isJPG) {
+			  this.$message.error('上传头像图片只能是 JPG 格式!');
+			}
+			if (!isLt2M) {
+			  this.$message.error('上传头像图片大小不能超过 2MB!');
+			}
+			return isJPG && isLt2M;
+		},
+		delUploadImg(){
+			this.form.img = null
+			this.upload.imgName = null
+		},
+		submit(){
+			switch(this.modalAction){
+				case 'add':
+					this.add()
+					break;
+				case 'edit':
+					this.update()
+					break;
+				default:
+					break;
+			}
+		},
+		add(){
+			this.$refs.from.validate((valid) => {
+				if (valid) {
+					let params = Object.assign({},this.form)
+					let damidStr = params.damId.join(',')
+					params.damId = damidStr
+					params.domain = this.addLabel.dynamicTags.join(',')
+					console.log(params)
+					this.$port.addExpert(params).then(res => {
+						if(!res.code){
+							this.modalVisible = false
+							this.$emit('closeModal', true);
+						}
+					})
+				}else {
+					return false;
+				}
+			})
+		},
+		update(){
+			this.$refs.from.validate((valid) => {
+				if (valid) {
+					let data = Object.assign({},this.form)
+					let params = {}
+					params['id'] = data['id']
+					params['expertName'] = data['expertName']
+					params['typeId'] = data['typeId']
+					params['areaCode'] = data['areaCode']
+					params['damId'] = data['damId'] === null ? null : data['damId'].join(',')
+					params['job'] = data['job']
+					params['mobile'] = data['mobile']
+					params['domain'] = this.addLabel.dynamicTags === null ? null : this.addLabel.dynamicTags.join(',')
+					params['personDesc'] = data['personDesc']
+					params['img'] = data['img']
+					console.log(params)
+					this.$port.updateExpert(params).then(res => {
+						if(!res.code){
+							this.modalVisible = false
+							this.$emit('closeModal', true);
+						}
+					})
+				}else {
+					return false;
+				}
+			})
+		},
+		validateTel(rule, value, callback){
+			if (value === undefined || value === '' || value === null) {
+			  // return callback() 
+			  new Error('请输入11位手机号,座机以 - 隔开')
+			}
+			let str = value.trim()
+			if (globalReg.regPhone.test(str) || globalReg.regTel.test(str)) {
+			  callback()
+			} else {
+			  callback(new Error('请输入11位手机号,座机以 - 隔开'))
+			}
+			callback()
+		},
+		handleCancel() {
+			this.$emit('closeModal', false);
+		}
+	}
+};
+</script>
+
+<style scoped lang="less">
+.el-tag + .el-tag {
+	margin-left: 10px;
+}
+.button-new-tag {
+	margin-left: 10px;
+	height: 32px;
+	line-height: 30px;
+	padding-top: 0;
+	padding-bottom: 0;
+}
+.input-new-tag {
+	width: 90px;
+	margin-left: 10px;
+	vertical-align: bottom;
+}
+
+.avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+	border-color: #409EFF;
+}
+.avatar-uploader-icon {
+	font-size: 28px;
+	color: #8c939d;
+	width: 128px;
+	height: 128px;
+	line-height: 128px;
+	text-align: center;
+}
+.avatar {
+	width: 128px;
+	height: 128px;
+	display: block;
+}
+.uploaded{
+	position:relative;
+}
+.uploaded .avatar{
+	border-radius:10px;
+}
+.uploaded:hover .action{
+	display:block;
+}
+.uploaded .action{
+	display:none;
+	position:absolute;
+	top:0;
+	bottom:0;
+	width:100%;
+	padding-top:27px;
+	text-align:center;
+	background:rgba(0,0,0,0.5);
+}
+.noPhoto{
+	width:128px;
+	height:128px;
+	line-height:128px;
+	text-align:center;
+	border: 1px dashed #d9d9d9;
+	border-radius: 6px;
+}
+.noPhoto span{
+	display:block;
+	font-size:18px;
+}
+</style>

src/view/pwdManage/pwdManage.vue

@@ -0,0 +1,175 @@
+<template>
+	<!-- 用户配置 -->
+	<div class="pageBody">
+		<el-row>
+			<el-col :span="24">
+				<el-table :data="listData" border style="width: 100%" v-loading="loading">
+					<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
+					<el-table-column prop="pwdType" label="口令类型" >
+						<template slot-scope="scope">
+							{{scope.row.pwdType === 0 ? '农业大数据大屏口令' : '人员监控大屏口令'}}
+						</template>
+					</el-table-column> 
+					<el-table-column prop="pwd" label="口令"></el-table-column> 
+					<el-table-column prop="typeIdName" label="状态" >
+						<template slot-scope="scope">
+							<el-switch
+							  v-model="scope.row.state"
+							  active-value="0"
+							  inactive-value="1"
+							  active-color="#13ce66"
+							  @change="stateSwitch($event, scope.row)"
+							  inactive-color="#ff4949">
+							</el-switch>
+						</template>
+					</el-table-column>
+					<el-table-column fixed="right" label="操作"  width="220" align="center">
+						<template slot-scope="scope">
+							<el-button type="primary" size="mini" @click="updatePasswd(scope.row)">更改口令</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+			</el-col>
+		</el-row>
+		<div class="page-right">
+			<Pagination :total="listTotal" @change="paginationChange"></Pagination>
+		</div>
+	</div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import aevMobiel from './modal/aevMobiel'
+import { paginationConfig } from '@/api/CONST'
+export default {
+	name: 'pw-manage',
+	components:{
+		Pagination,
+	},
+	created(){
+		let params = Object.assign({},this.pagination)
+		console.log(params)
+		this.getList(params)	
+	},
+	mounted(){
+		
+	},
+	data() {
+		return {
+			loading:true,
+			pagination:Object.assign({},paginationConfig),
+			listTotal:0,
+			listData:[],
+		};
+	},
+	methods: {
+		stateSwitch(value,row){
+			let params = {
+				id:row.id,
+				pwd:row.pwd,
+				state:value,
+			}
+			this.$port.upPwdInfo(params)
+				.then(res =>{
+					if(!res.code){
+						if(value == 1){
+							this.$message({
+							  message: '启用成功！',
+							  type: 'success',
+							  duration:800
+							});
+						}else{
+							this.$message({
+							  message: '已关闭！',
+							  type: 'success',
+							  duration:800
+							});
+						}
+					}else{
+						row.state = value === 1 ? 0 : 1
+						this.$message.error('启用失败！');
+					}
+				})
+		},
+		updatePasswd(data){
+			this.$prompt('请输入新的口令密码', '更改口令', {
+			    confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				inputPattern:/\S/,
+				inputErrorMessage: '口令格式不能为空'
+			}).then(({ value }) => {
+				let params = Object.assign({},data)
+				params.pwd = value
+				this.$port.upPwdInfo(params).then(res => {
+					if(!res.code){
+						this.$message({
+							type: 'success',
+							message: '操作成功!'
+						}); 
+						this.getList()
+					}
+				})
+			}).catch(() => {
+			         
+			});
+		},
+		getList(params){
+			this.loading = true
+			this.$port.getPwdList(params)
+				.then(res =>{
+					this.loading = false
+					this.listData = res.list || []
+					this.listTotal = res.total
+				})
+		},
+		paginationChange(json){
+			let params = Object.assign({},this.searchParams,json)
+			this.getList(params)
+		}
+	},
+	computed: {
+		//当前页权限
+		auth() {
+			const activePage = this.$route.path;
+			return (
+				this.$store.state.userTree
+					.filter(x => {
+						return x.url == activePage;
+					})
+					.map(x => {
+						return x.auth;
+					})[0] || []
+			);
+		}
+	}
+};
+</script>
+
+<style lang="less" scoped>
+.fr{
+	float:right;
+}
+.userTitle{
+	margin-top:8px;
+}
+.el-form-item {
+	margin-bottom: 0;
+}
+.tableHead{
+	vertical-align:middle;
+	.el-button{
+		margin-left:15px;
+	}
+}
+.page-right{
+	margin-top:15px;
+	float:right;
+}
+.input-box {
+   display: none
+}
+.current-cell .input-box {
+   display: block;
+   margin-left: -15px;
+}
+</style>

src/view/special-topic.vue

@@ -0,0 +1,10 @@
+<template>
+	<!-- 专题 -->
+	<div>专题</div>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/view/system/modal/addeditMobiel.vue

@@ -0,0 +1,144 @@
+<template>
+	<el-dialog
+		:title="config.modalTitle" 
+		:visible.sync="config.modalVisible" 
+		:width="config.formLabelWidth" 
+		@close="handleCancel">
+		<div class="userMobile">
+			<el-form label-width="80px" :model="form" :rules="rules" ref="from">
+				<el-form-item label="角色名" prop="name">
+					<el-input v-model="form.name"></el-input>
+				</el-form-item>
+				<el-form-item label="角色描述" prop="description">
+					<el-input
+					  type="textarea"
+					  placeholder="请输入内容"
+					  v-model="form.description"
+					  maxlength="60"
+					  show-word-limit
+					></el-input>
+				</el-form-item>
+			</el-form>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<el-button @click="handleCancel">取 消</el-button>
+			<el-button type="primary" @click="submit">确 定</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	export default{
+		name:'addeditMobiel',
+		props:{
+			modalTitle:{
+				type:String
+			},
+			modalVisible:{
+				type:Boolean
+			},
+			action:{
+				type:String
+			},
+			editData:{
+				type:Object,
+				default:null
+			}
+		},
+		watch:{
+			modalTitle(newVal,oldVal){
+				this.config.modalTitle = newVal
+			},
+			modalVisible(newVal,oldVal){
+				this.config.modalVisible = newVal
+			},
+			action(newVal,oldVal){
+				this.config.action = newVal
+			},
+			editData(newVal,oldVal){
+				console.log(newVal)
+				this.editDatas = newVal
+			}
+		},
+		data(){
+			return{
+				config:{
+					formLabelWidth:"520px",
+					modalVisible:this.modalVisible,
+					modalTitle:'角色管理',
+					action:this.action
+				},
+				editDatas:null,
+				rules:{
+					name:[
+						 { required: true, message: '角色名字不能为空!', trigger: 'blur' }
+					],
+					description:[
+						{ required: true, message: '角色描述不能为空!', trigger: 'blur' }
+					]
+				},
+				form:{}
+			}
+		},
+		created(){
+			if(this.config.action == 'edit'){
+				console.log(this.editData)
+				this.form = Object.assign({},this.editData)
+			}
+		},
+		methods:{
+			submit(){
+				switch(this.config.action){
+					case 'add':
+						this.add()
+						break;
+					case 'edit':
+						this.edit()
+						break;
+					default:
+						break;
+				}
+			},
+			add(){
+				this.$refs.from.validate((valid) => {
+					if (valid) {
+						let params = this.form
+						this.$port.addRole(params).then(res => {
+							if(!res.code){
+								this.config.modalVisible = false
+								this.$emit('closeModal', true);
+							}
+						})
+					}else {
+						return false;
+					}
+				})
+			},
+			edit(){
+				this.$refs.from.validate((valid) => {
+					if (valid) {
+						let params = {}
+						params.id = this.form.id
+						params.name = this.form.name
+						params.description = this.form.description
+						this.$port.updateRoleItem(params).then(res => {
+							if(!res.code){
+								this.config.modalVisible = false
+								this.$emit('closeModal', true);
+							}
+						})
+					}else {
+						return false;
+					}
+				})
+			},
+			handleCancel(){
+				this.config.modalVisible = false
+				this.$emit('closeModal',false)
+			}
+		},
+	}
+</script>
+
+<style>
+</style>

src/view/system/modal/userMobiel.vue

@@ -0,0 +1,262 @@
+<template>
+	<el-dialog 
+		:title="modalTitle" 
+		:visible.sync="modalVisible" 
+		:width="formLabelWidth" 
+		@close="handleCancel">
+		<div class="userMobile">
+			<el-form label-width="80px" :model="form" :rules="rules" ref="from">
+				<el-form-item label="账号" prop="name">
+					<el-input v-model="form.name" :disabled="limit.isRead"></el-input>
+				</el-form-item>
+				<el-form-item label="登录密码" prop="pwd" v-if="limit.isAdd">
+					<el-input v-model="form.pwd" show-password></el-input>
+					<span class="hight">默认密码为:123456</span>
+				</el-form-item>
+				<el-form-item label="角色" prop="roleIds">
+					<el-select 
+						v-model="form.roleIds" 
+						placeholder="请选择" 
+						@change="forceUpdate"
+						:disabled="limit.isRead">
+						<el-option 
+							v-for="item in rolesList" 
+							:key="item.id" 
+							:label="item.name" 
+							:value="item.id"
+							></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="组织机构">
+					<el-cascader 
+						ref="refSubCat"
+						v-model="form.branchId" 
+						:options="branchList" 
+						:props="optionProps" 
+						:clearable="true" 
+						:disabled="limit.isRead"></el-cascader>
+				</el-form-item>
+				<el-form-item label="姓名">
+					<el-input v-model="form.realName" :disabled="limit.isRead"></el-input>
+				</el-form-item>
+				<el-form-item label="性别" prop="sex">
+					<el-radio v-model="form.sex" label="男" :disabled="limit.isRead">男</el-radio>
+					<el-radio v-model="form.sex" label="女" :disabled="limit.isRead">女</el-radio>
+				</el-form-item>
+				<el-form-item label="手机号码" prop="phone">
+					<el-input v-model="form.phone" :disabled="limit.isRead"></el-input>
+				</el-form-item>
+			</el-form>
+		</div>
+		<div slot="footer" class="dialog-footer">
+			<el-button @click="handleCancel">取 消</el-button>
+			<el-button type="primary" @click="submit" v-if="!limit.isRead">确 定</el-button>
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+import {globalReg} from '@/api/CONST'
+export default {
+	name: 'userMobiel',
+	props: {
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: 'title'
+		},
+		action: {
+			type: String,
+			default: 'add'
+		},
+		selectRow:{
+			type:Object,
+			default:{}
+		}
+	},
+	watch: {
+		visible(newVal, oldVal) {
+			this.modalVisible = newVal;
+		},
+		title(newVal, oldVal) {
+			this.modalTitle = newVal;
+		},
+		action(newVal, oldVal) {
+			this.modalAction = newVal;
+		},
+		selectRow(newVal,oldVal){
+			this.modalSelectRow = newVal
+		}
+	},
+	data() {
+		return {
+			modalTitle: this.title,
+			modalVisible: this.visible,
+			modalAction: this.action,
+			modalSelectRow:this.selectRow,
+			formLabelWidth: '820px',
+			limit:{
+				isRead:false,
+				isAdd:false
+			},
+			optionProps: {
+				expandTrigger:'hover',
+				checkStrictly: true,
+				value: 'id',
+				label: 'branchName',
+				children: 'children'
+			},
+			rolesList: [],
+			branchList: [],
+			rules:{
+				name:[
+					 { required: true, message: '账号名称不能为空!', trigger: 'blur' }
+				],
+				roleIds:[
+					{ required: true, message: '角色不能为空!', trigger: 'blur' }
+				],
+				phone:[
+					{ validator:this.validateTel, trigger: 'blur' }
+				],
+				pwd:[
+					{ required: true, message: '密码不能为空!', trigger: 'blur' }
+				],
+				sex:[
+					{ required: true, message: '性别不能为空!', trigger: 'blur' }
+				]
+			},
+			form: {
+				pwd:123456 //默认密码123456
+			}
+		};
+	},
+	created() {
+		switch(this.modalAction) {
+		     case 'add':
+				this.limit.isAdd = true
+		        break;
+		     case 'edit':
+				this.getDetail(this.modalSelectRow.userId)
+		        break;
+			 case 'view':
+				this.getDetail(this.modalSelectRow.userId)
+				this.limit.isRead = true
+			    break;
+		     default:
+		        break;
+		} 
+		this.initPage()
+	},
+	methods: {
+		forceUpdate(){
+			this.$forceUpdate()
+		},
+		//初始化角色和组织机构
+		initPage(){
+			this.getRoles();
+			this.getBranchid();
+		},
+		//获取用户详情
+		getDetail(id){
+			let params = {
+				id:id
+			}
+			this.$port.viewUser(params)
+				.then(res => {
+					console.log(res)
+					this.form = res
+					this.form.roleIds = res.roles
+				})
+		},
+		getRoles() {
+			this.$port.getRolesList()
+				.then(res => {
+					this.rolesList = res.list;
+				});
+		},
+		getBranchid() {
+			this.$port.getBranchidList()
+				.then(res => {
+					this.branchList = this.getTreeData(res.list);
+				});
+		},
+		getTreeData(data) {
+			for (let i = 0; i < data.length; i++) {
+				if (data[i].children.length < 1) {
+					data[i].children = undefined;
+				} else {
+					this.getTreeData(data[i].children);
+				}
+			}
+			return data;
+		},
+		submit(){
+			switch(this.modalAction){
+				case 'add':
+					this.add()
+					break;
+				case 'edit':
+					this.update()
+					break;
+				default:
+					break;
+			}
+		},
+		add(){
+			this.$refs.from.validate((valid) => {
+				if (valid) {
+					let params = this.form
+					params["branchId"] = params["branchId"] === undefined ? '' : params["branchId"].slice(-1).toString()
+					this.$port.addUser(params).then(res => {
+						if(!res.code){
+							this.modalVisible = false
+							this.$emit('closeModal', true);
+						}
+					})
+				}else {
+					return false;
+				}
+			})
+		},
+		update(){
+			this.$refs.from.validate((valid) => {
+				if (valid) {
+					let params = this.form
+					params["branchId"] = Array.isArray(params["branchId"]) ? params["branchId"].slice(-1).toString() : params["branchId"]
+					params.userId = params.id
+					delete params.roles
+					this.$port.updateUser(params).then(res => {
+						if(!res.code){
+							this.modalVisible = false
+							this.$emit('closeModal', true);
+						}
+					})
+				}else {
+					return false;
+				}
+			})
+		},
+		validateTel(rule, value, callback){
+			if (value === undefined || value === '' || value === null) {
+			  return callback() 
+			  // new Error('请输入11位手机号,座机以 - 隔开')
+			}
+			let str = value.trim()
+			if (globalReg.regPhone.test(str) || globalReg.regTel.test(str)) {
+			  callback()
+			} else {
+			  callback(new Error('请输入11位手机号,座机以 - 隔开'))
+			}
+			callback()
+		},
+		handleCancel() {
+			this.$emit('closeModal', false);
+		}
+	}
+};
+</script>
+
+<style scoped lang="less"></style>

src/view/system/role.vue

@@ -0,0 +1,348 @@
+<template>
+	<!-- 角色配置 -->
+	<div class="pageBody">
+		<el-row class="h100">
+			<el-col :span="12" class="h100">
+				<div class="role">
+					<div class="roleHead">
+						<el-button type="primary" @click="addRole">添加角色</el-button>
+					</div>
+					<div class="roleBody" v-loading="roleLoading">
+						<ul class="roleName">
+							<li v-for="(item,index) in roleList" :key="index" :class="[ item.status == 0 ? 'open' : 'close']" @click.stop="getRoleMenu(item)">
+								<p class="name">{{item.name}} <span v-show="item.status == 2" class="status">[已禁用]</span></p>
+								<p class="desc">{{item.description}}</p>
+								<span class="action">
+									<el-button type="primary" icon="el-icon-edit" circle size="mini" title="编辑" @click.stop="edit(item)"></el-button>
+									<el-button type="danger" icon="el-icon-delete" circle size="mini" title="删除" @click.stop="del(item)"></el-button>
+									<el-button type="info" icon="el-icon-remove" circle size="mini" title="禁用" @click.stop="edStatus(item)"></el-button>
+								</span>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</el-col>
+			<el-col :span="12" class="h100">
+				<div class="role">
+					<div class="roleHead">
+						<el-button type="primary">角色权限配置</el-button>
+					</div>
+					<div class="roleBody">
+						<div class="roleTree">
+							<div class="roleTreeHead">
+								{{activeTreeLable}}  
+									<el-button 
+										type="primary" 
+										@click="saveTree" 
+										v-show="roleTree.length > 0" 
+										size="small" 
+										class="fr saveTree">保存</el-button>
+							</div>
+							<div class="roleTreeBody" v-loading="roleTreeLoading">
+								<el-tree
+								  :data="roleTree"
+								  node-key="id"
+								  ref="tree"
+								  :show-checkbox="true"
+								  :default-checked-keys="checkedkey"
+								  :default-expand-all="true"
+								  :props="optionProps"
+								  @check-change="checkChange">
+								</el-tree>
+							</div>
+						</div>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+		<addedit-mobiel
+			v-if="modal.visible"
+			:modalTitle="modal.title"
+			:modalVisible="modal.visible"
+			:action="modal.action"
+			:editData='editData'
+			@closeModal="closeModal"
+		></addedit-mobiel>
+	</div>
+</template>
+
+<script>
+import addeditMobiel from './modal/addeditMobiel'
+export default {
+	components:{
+		addeditMobiel
+	},
+	data() {
+		return {
+			modal:{
+				title:'角色增加',
+				visible:false,
+				action:''
+			},
+			roleLoading:true,
+			roleTreeLoading:false,
+			roleList:{},
+			editData:{},
+			roleTree:[],
+			checkedkey:[],
+			activeTreeLable:'后台管理权限',
+			activeRoleId:'',
+			optionProps: {
+				children: 'children',
+				label: 'name'
+			}
+		};
+	},
+	created() {
+		this.getRoleList()
+	},
+	methods:{
+		addRole(){
+			this.modal.title = "角色添加"
+			this.modal.visible = true
+			this.modal.action = 'add'
+		},
+		edit(item){
+			this.modal.title = "角色编辑"
+			this.modal.visible = true
+			this.modal.action = 'edit'
+			this.editData = item
+		},
+		del(item){
+			this.$confirm('此操作将永久删除此角色, 是否继续?', '提示', {
+			  confirmButtonText: '确定',
+			  cancelButtonText: '取消',
+			  type: 'warning'
+			}).then(() => {
+				let params = {
+					roleId:item.id
+				}
+				this.$port.delRole(params).then(res =>{
+					if(!res.code){
+						this.$message({
+							type: 'success',
+							message: '删除成功!',
+							duration:800
+						});
+						this.getRoleList()
+					}
+				})
+			}).catch(() => {
+			            
+			});
+		},
+		edStatus(item){
+			if(item.status == 0){
+				item.status = 2
+			}else if(item.status == 2){
+				item.status = 0
+			}
+			let params = {
+				status:item.status,
+				id:item.id
+			};
+			this.$port.updateRoleItem(params).then(res => {
+				if(!res.code){
+					this.$message({
+					  message: item.status == 0 ? '该角色已被开启!':'该账号已被禁用!',
+					  type: 'success',
+					  duration:800
+					});
+				}
+			})
+		},
+		getRoleList(){
+			this.roleLoading = true
+			this.$port.getRoleList()
+				.then(res=>{
+					this.roleLoading = false
+					if(!res.code){
+						this.roleList = res.list
+					}
+				})
+		},
+		getRoleMenu(item){
+			this.roleTreeLoading = true
+			this.activeRoleId = item.id
+			let params = {
+				roleId:item.id
+			}
+			this.$port.getRoleMenu(params)
+				.then(res => {
+					this.roleTreeLoading = false
+					let tree = res.list.filter(v => v.sysId === '900004')  //只显示后台管理权限菜单
+					this.roleTree = tree[0].list
+					console.log(tree[0])
+					let checkedList = tree[0].checkedList
+					this.activeTreeLable = item.name + "-" +  tree[0].sysName
+					if(checkedList.length >0){
+						this.checkedkey = []
+						this.$nextTick(()=>{
+							this.checkedkey = checkedList
+						})
+					}else{
+						this.checkedkey = []
+						this.$refs.tree.setCheckedKeys([]);
+					}
+				})
+		},
+		//保存权限
+		saveTree(){
+			const loading = this.$loading({
+				  lock: true,
+				  text: '正在努力保存!',
+				  spinner: 'el-icon-loading',
+				  background: 'rgba(0, 0, 0, 0.7)'
+			});
+			let sourceTree = this.roleTree
+			let activeKeyArr = this.$refs.tree.getCheckedKeys()
+			let aKey = this.getCheckedKeys(sourceTree,activeKeyArr, "id")
+			let params = {
+				roleId:this.activeRoleId,
+				menuReq:aKey
+			}
+			this.$port.saveRoleMenu(params)
+				.then(res=>{
+					if(!res.code){
+						setTimeout(() => {
+						  loading.close();
+						  this.$message({
+						    message: '权限菜单已保存!',
+						    type: 'success',
+							duration:800
+						  });
+						}, 1000);
+					}
+				})
+		},
+		//点击子节点获取父节点id
+		getCheckedKeys (data, keys, key) {
+			// console.log(data,keys,key)
+			let res = [];
+			recursion(data, false);
+			return res;
+			// arr -> 树形总数据
+			// keys -> getCheckedKeys获取到的选中key值
+			// isChild -> 用来判断是否是子节点
+			function recursion (arr, isChild) {
+				let aCheck = [];
+				for ( let i = 0; i < arr.length; i++ ) {
+					let obj = arr[i];
+					aCheck[i] = false;
+					if ( obj.children ) {
+						aCheck[i] = recursion(obj.children, true) ? true : aCheck[i];
+						if ( aCheck[i] ) {
+							res.push(obj[key]);
+						}
+					}
+					for ( let j = 0; j < keys.length; j++ ) {
+						if ( obj[key] == keys[j] ) {
+							aCheck[i] = true;
+							if ( res.indexOf(obj[key]) == -1 ) {
+								res.push(obj[key]);
+							}
+							break;
+						}
+					}
+				}
+				if ( isChild ) {
+					return aCheck.indexOf(true) != -1;
+				}
+			}
+		},
+		checkChange(data, checked, indeterminate){
+			// console.log(data, checked, indeterminate);
+		},
+		closeModal(flag = false){
+			this.modal.visible = false
+			flag && this.getRoleList()
+		}
+	}
+};
+</script>
+
+<style scoped lang="less">
+.h100 {
+	height: 100%;
+}
+.fr{
+	float:right;
+}
+.pageBody {
+	height: 100%;
+	overflow:hidden;
+}
+.role {
+	height: 100%;
+	border-right: 1px solid #dcdfe6;
+	.roleHead {
+		height: 60px;
+		border-bottom: 1px solid #dcdfe6;
+		text-align: center;
+	}
+	.roleBody {
+		height:100%;
+		overflow:auto;
+		.roleName {
+			margin: 0;
+			padding:0 0 60px 0;
+			list-style: none;
+		}
+		.roleName li {
+			display: block;
+			position: relative;
+			height: 80px;
+			margin: 0 15px;
+			padding: 16px 15px 0 15px;
+			border-bottom: 1px solid #dcdfe6;
+			line-height:25px;
+			cursor:pointer;
+			p{
+				font-size:14px;
+			}
+			p.name{
+				color:#409EFF;
+				.status{
+					margin-left:10px;
+					color:red;
+					font-weight:block;
+				}
+			}
+			p.desc{
+				color:#999;
+			}
+		}
+		.roleName li span.action {
+			display: none;
+			position: absolute;
+			right: 10px;
+			top: 25px;
+		}
+		.roleName li:hover {
+			color: #1e9fff;
+			background: #f5f5f5;
+		}
+		.roleName li:hover span.action {
+			display: block;
+		}
+		.roleName li.close p{
+			color:#dcdfe6;
+		}
+		.roleTree{
+			.roleTreeHead{
+				height:55px;
+				line-height:55px;
+				text-indent:15px;
+				color:#666;
+				border-bottom:1px dashed #ddd;
+			}
+			.roleTreeBody{
+				padding:10px;
+			}
+		}
+		.saveTree{
+			margin:12px 30px 0 0;
+		}
+	}
+}
+</style>

src/view/system/tpl.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/view/system/user.vue

@@ -0,0 +1,222 @@
+<template>
+	<!-- 用户配置 -->
+	<div class="pageBody">
+		<el-row>
+			<el-col :span="24">
+				<div class="tableHead">
+					<el-row>
+						<el-col :span="12">
+							<div class="userTitle">
+								用户列表
+								<el-button type="primary" icon="el-icon-plus" size="small" @click="add" v-if="auth.includes('save')">新增</el-button>
+							</div>
+						</el-col>
+						<el-col :span="12">
+							<div class="grid-content bg-purple-dark fr">
+								<el-form :inline="true" :model="searchParams" ref="form" class="demo-form-inline">
+									<el-form-item label="账号"><el-input v-model="searchParams.name" placeholder="账号"></el-input></el-form-item>
+									<el-form-item>
+										<el-button type="primary" @click="searchHandle">查询</el-button>
+										<el-button type="warning" @click="resetSearch">重置</el-button>
+									</el-form-item>
+								</el-form>
+							</div>
+						</el-col>
+					</el-row>
+				</div>
+				<el-divider></el-divider>
+				<el-table :data="listData" border style="width: 100%" v-loading="loading">
+					<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
+					<el-table-column prop="name" label="账号"></el-table-column>
+					<el-table-column prop="roleName" label="角色"></el-table-column>
+					<el-table-column prop="areaName" label="区域"></el-table-column>
+					<el-table-column prop="phone" label="电话"></el-table-column>
+					<el-table-column prop="loginTime" label="最后登录时间" align="center"></el-table-column>
+					<el-table-column fixed="right" label="操作" width="350" align="center">
+						<template slot-scope="scope">
+							<el-button type="primary" size="mini" @click="detail(scope.row)">查看</el-button>
+							<el-button v-if="auth.includes('update')" type="success" size="mini" @click="edit(scope.row)">编辑</el-button>
+							<el-button v-if="auth.includes('delete')" type="warning" size="mini" @click="del(scope.row)">删除</el-button>
+							<el-button v-if="auth.includes('resetPwd')" type="danger" size="mini" @click="resetPasswd(scope.row)">重置密码</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+			</el-col>
+		</el-row>
+		<div class="page-right"><Pagination :total="listTotal" @change="paginationChange"></Pagination></div>
+		<user-mobiel
+			v-if="modal.visibleModal"
+			:title="modal.title"
+			:action="modal.action"
+			:visible="modal.visibleModal"
+			:selectRow="modal.selectRow"
+			@closeModal="closeModal"
+		></user-mobiel>
+	</div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination';
+import userMobiel from './modal/userMobiel';
+import { paginationConfig } from '@/api/CONST';
+export default {
+	name: 'user',
+	components: {
+		Pagination,
+		userMobiel
+	},
+	created() {
+		let params = Object.assign({}, this.searchParams, this.pagination);
+		this.getUserlist(params);
+	},
+	data() {
+		return {
+			loading: true,
+			visibleDel: false,
+			modal: {
+				action: '',
+				title: '',
+				visibleModal: false,
+				selectRow: null
+			},
+			searchParams: {
+				name: ''
+			},
+			pagination: Object.assign({}, paginationConfig),
+			listTotal: 0,
+			listData: []
+		};
+	},
+	computed: {
+		//当前页权限
+		auth() {
+			const activePage = this.$route.path;
+			return (
+				this.$store.state.userTree
+					.filter(x => {
+						return x.url == activePage;
+					})
+					.map(x => {
+						return x.auth;
+					})[0] || []
+			);
+		}
+	},
+	methods: {
+		searchHandle() {
+			let params = Object.assign({}, this.searchParams, this.pagination);
+			this.getUserlist(params);
+		},
+		resetSearch() {
+			this.searchParams = {};
+			let params = Object.assign({}, this.pagination);
+			this.getUserlist(params);
+		},
+		add() {
+			this.modal.visibleModal = true;
+			this.modal.title = '用户添加';
+			this.modal.action = 'add';
+		},
+		detail(item) {
+			this.modal.visibleModal = true;
+			this.modal.title = '用户信息查看';
+			this.modal.action = 'view';
+			this.modal.selectRow = item;
+		},
+		edit(item) {
+			this.modal.visibleModal = true;
+			this.modal.title = '用户信息编辑';
+			this.modal.action = 'edit';
+			this.modal.selectRow = item;
+		},
+		del(item) {
+			this.$confirm('此操作将永久删除此账号, 是否继续?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			})
+				.then(() => {
+					let params = {
+						userId: item.userId
+					};
+					this.$port.delUser(params).then(res => {
+						if (!res.code) {
+							this.$message({
+								type: 'success',
+								message: '删除成功!',
+								duration:800
+							});
+							this.getUserlist();
+						}
+					});
+				})
+				.catch(() => {});
+		},
+		resetPasswd(item) {
+			this.$confirm('此操作将此账号密码重置为123456, 是否继续?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			})
+				.then(() => {
+					let params = {
+						id: item.userId
+					};
+					this.$port.resetDefaultPwd(params).then(res => {
+						if (!res.code) {
+							this.$message({
+								type: 'success',
+								message: '重置密码成功!',
+								duration:800
+							});
+							this.getUserlist();
+						}
+					});
+				})
+				.catch(() => {});
+		},
+		getUserlist(params) {
+			this.loading = true;
+			this.$port.getUserList(params).then(res => {
+				this.loading = false;
+				this.listData = res.list || [];
+				this.listTotal = res.total;
+			});
+		},
+		paginationChange(json) {
+			let params = Object.assign({}, this.searchParams, json);
+			this.getUserlist(params);
+		},
+		closeModal(flag = false) {
+			this.modal.visibleModal = false;
+			flag && this.getUserlist();
+		},
+		closeDelModal(flag = false) {
+			this.modalDel.visibleModal = false;
+			flag && this.getUserlist();
+		}
+	}
+};
+</script>
+
+<style lang="less" scoped>
+.fr {
+	float: right;
+}
+.userTitle {
+	margin-top: 8px;
+}
+.el-form-item {
+	margin-bottom: 0;
+}
+.tableHead {
+	vertical-align: middle;
+	.el-button {
+		margin-left: 15px;
+	}
+}
+.page-right {
+	margin-top: 15px;
+	float: right;
+}
+</style>

webpack.config.js

@@ -0,0 +1,78 @@
+//webpack全局配置
+const path = require('path');
+module.exports = function(env, argv) {
+	// env是在package中运行的命令是配置
+	env = env || {};
+	return {
+		entry: './src/main.js', //入口文件
+		module: {
+			rules: [
+				// 处理css
+				{
+					test: /\.css$/i,
+					use: ['vue-style-loader', 'css-loader']
+				},
+				// 处理vue
+				{
+					test: /\.vue$/i,
+					use: 'vue-loader'
+				},
+				// 处理less
+				{
+					test: /\.less$/i,
+					use: ['vue-style-loader', 'css-loader', 'less-loader']
+				},
+				// 小图片转为base64
+				{
+					test: /\.(png|jpg|gif)$/i,
+					use: [{
+						loader: 'url-loader',
+						options: {
+							limit: 10000
+						}
+					}]
+				},
+				// 处理es6
+				{
+					test: /\.(js)$/i,
+					exclude: /node_modules/,
+					use: {
+						loader: 'babel-loader',
+						options: {
+							presets: ['@babel/preset-env']
+						}
+					}
+				},
+				// 多媒体文件
+				{
+					test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+					loader: 'url-loader',
+					options: {
+						limit: 10000,
+					}
+				},
+				// 处理字体
+				{
+					test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+					loader: 'url-loader',
+					options: {
+						limit: 10000,
+					}
+				},
+				//处理文件
+				{
+					test: /\.svg$/,
+					use: 'file-loader'
+				}
+			]
+		},
+		resolve: {
+			extensions: ['.js', '.vue', '.json'],
+			alias: {
+				'vue': 'vue/dist/vue.esm',
+				'@': path.resolve(__dirname, 'src')
+			}
+		},
+		...(env.development ? require('./config/webpack.development') : require('./config/webpack.production'))
+	}
+}