yzCctvHelm/assets/areaManage.js

var map,mouseTool;
var cirCle,circleEdi = null,cirToo = false;
var Poly,polyEdit = null,polToo = false;
var poinLi = {
	"lon":[],
	"lat":[],
	"radius": 0
};
new Vue({
	el: '#app',
	data: function() {
		return {
			areaLi: [],
			treeLi: [],
			treeVis:false,
			treeForm:{
				group_name: "",
				pid: 0,
				type: 1,
				fence_type: 0,
				add_userid: 1
			},
			treeArea: [],
			logVis: false,
			treeAreaForm:{
				group_name: "",
				pid: 0,
				type: 0,
				fence_type: null,
				add_userid: 1
			},
			defaultProps: {
				children: 'children',
				label: 'group_name'
			},
			nowArea:{type: -1},
			centerVal: ""
		}
	},
	created() {
		_this = this;
		_this.getList();
		_this.getTreeLi();
	},
	mounted(){
		map = new AMap.Map("areaMap", {
			center: [116.433322, 39.900256],
			zoom: 14
		});
	},
	methods:{
		getList(){
			const loading = this.$loading({
				background: 'rgba(0, 0, 0, 0.4)'
			})
			let _opts = {
				url: baseUrl + "/SelGroupConfig?add_userid=1&type=2&_t="+new Date().getTime(),
				type:"GET"
			};
			let _data = {};
			getAxios(_opts,_data,{}).then((res) => {
				_this.areaLi = [{
						"group_name": "区域管理",
						"id": 0,
						"pid": -1,
						"show": true,
						"type": -1,
						"children": getTree(res.data,0)
				}];
				dkslfjk = _this.areaLi;
				loading.close();
			})
		},
		getTreeLi(){
			let _opts = {
				url: baseUrl + "/SelGroupConfig?add_userid=1&type=0&_t="+new Date().getTime(),
				type:"GET"
			};
			let _data = {};
			getAxios(_opts,_data,{}).then((res) => {
				_this.treeArea = [{
						"group_name": "区域管理",
						"id": 0,
						"pid": -1,
						"show": true,
						"type": -1,
						"children": getTree(res.data,0)
				}]
				_this.treeLi = getTree(res.data,0);
			})
		},
		
		// 显示圆形
		showCircle(_obj){
			cirCle = new AMap.Circle({
				center: [_obj.lng, _obj.lat],
				radius: _obj.radius,
				strokeColor: "#0081FF",
				strokeOpacity: 1,
				strokeWeight: 3,
				strokeOpacity: 0.8,
				fillColor: '#519efc',
				fillOpacity: 0.4,
				strokeStyle: 'solid',
			})
			cirCle.setMap(map);
			map.setFitView([ cirCle ]);
			// circleEdi.on('end', function(event) {
			// 	console.log(event)
			// })
		},
		// 显示多边形
		showPoly(_obj){
			Poly = new AMap.Polygon({
				path: _obj,
				strokeColor: "#0081FF",
				strokeOpacity: 1,
				strokeWeight: 3,
				strokeOpacity: 0.8,
				fillColor: '#519efc',
				fillOpacity: 0.4,
				strokeStyle: 'solid',
			});
			Poly.setMap(map);
			map.setFitView([ Poly ]);
		},
		// 根据区域ID获取经纬度
		getPoint(_data){
			let _opts = {
				url: baseUrl + "/SelFenceConfig?pid="+(_data.id)+"&_t="+new Date().getTime(),
				type:"GET"
			};
			let _ocn = {};
			getAxios(_opts,_ocn,{}).then((res) => {
				if(res.result == "ok"){
					let _ocj = JSON.parse(res.data[0].fence_gps);
					if(_data.fence_type == 0){
						_data["lng"] = _ocj.lon[0];
						_data["lat"] = _ocj.lat[0];
						_data["radius"] = _ocj.radius;
						_this.showCircle(_data);
					}else{
						let _arr = [],_saf = _ocj.lon,_xvj = _ocj.lat;
						for(let i=0;i<_saf.length;i++){
							_arr.push([_saf[i], _xvj[i]]);
						}
						_this.showPoly(_arr);
					}
				}
			})
		},
		// 编辑
		editArea(){
			if(_this.nowArea.id != undefined){
				if(_this.nowArea.type == 0){
					_this.logVis = true;
					_this.treeAreaForm = _this.nowArea;
				}else if(_this.nowArea.type == 1){
					if(_this.nowArea.fence_type == 0){
						circleEdi = new AMap.CircleEditor(map, cirCle);
						circleEdi.open();
					}else{
						polyEdit = new AMap.PolygonEditor(map, Poly);
						polyEdit.open();
					}
				}
			}
		},
		// 删除
		delArea(){
			if(_this.nowArea.id != undefined){
				_this.$confirm('你确定要删除['+(_this.nowArea.name)+']吗?', '温馨提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					_this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {});
			}
		},
		//---------------------------- 分类 ----------------------------
		// 侧边树形
		nodeClick(data){
			if(data.type == 1){
				if(_this.nowArea.id != data.id){
					map.clearMap();
					_this.getPoint(data);
				}
			}else{
				map.clearMap();
			}
			_this.nowArea = data;
		},
		// 重置分类表单
		reSet(){
			_this.treeAreaForm = {
				group_name: "",
				pid: 0,
				type: 0,
				fence_type: null,
				add_userid: 1
			};
			_this.logVis = true;
		},
		hideM(){
			_this.getList();
			map.clearMap();
			_this.logVis = false;
			_this.treeVis = false;
		},
		// 分类树形
		treeAreaClick(data){
			_this.treeAreaForm.pid = data.id;
		},
		// 提交分类
		saveTreeArea(){
			if(_this.treeAreaForm.group_name == ""){
				_this.$message({
					type: 'warning',
					message: '请先填写分类名称!'
				});
				return;
			}
			let _opts = {
				url: baseUrl + "/AddGroupConfig?_t="+new Date().getTime(),
				type:"GET"
			};
			let _data = _this.treeAreaForm;
			getAxios(_opts,_data,{}).then((res) => {
				if(res.result == "ok"){
					_this.$message({
						type: 'success',
						message: '操作成功!'
					});
					_this.getList();
					_this.getTreeLi();
					_this.logVis = false;
				}else{
					_this.$message.error('操作失败');
				}
			})
		},
		//---------------------------- 分类 ----------------------------
		//---------------------------- 区域 ----------------------------
		// 区域树形
		treeClick(data){
			_this.treeForm.pid = data.id;
		},
		reTrSet(){
			_this.treeForm = {
				group_name: "",
				pid: (_this.treeLi.length?_this.treeLi[0].id:0),
				type: 1,
				fence_type: 0,
				add_userid: 1
			};
			poinLi = {
				"lon":[],
				"lat":[],
				"radius": 0
			};
			mouseTool = new AMap.MouseTool(map);
			_this.drawCircle();
			_this.treeVis = true;
		},
		// 提交区域
		saveTree(){
			if(circleEdi != null){
				circleEdi.close();
			}
			if(polyEdit != null){
				polyEdit.close();
			}
			if(!poinLi.lon.length){
				_this.$message({
					type: 'warning',
					message: '请先绘制区域!'
				});
				return;
			}
			if(_this.treeForm.group_name == ""){
				_this.$message({
					type: 'warning',
					message: '请先填写分类名称!'
				});
				return;
			}
			let _opts = {
				url: baseUrl + "/AddGroupConfig?_t="+new Date().getTime(),
				type:"GET"
			};
			let _data = _this.treeForm;
			getAxios(_opts,_data,{}).then((res) => {
				if(res.result == "ok"){
					let _xv = {
						url: baseUrl + "/AddFenceConfig?_t="+new Date().getTime()
					};
					let _fdh = {
						fence_gps: JSON.stringify(poinLi),
						pid: res.msg
					};
					getAxios(_xv,_fdh,{}).then((res) => {
						_this.$message({
							type: 'success',
							message: '操作成功!'
						});
						_this.getList();
						map.clearMap();
						_this.treeVis = false;
					})
				}else{
					_this.$message.error('操作失败');
				}
			})
		},
		// 画圆形
		drawCircle(){
			mouseTool.circle({
				strokeColor: "#0081FF",
				strokeOpacity: 1,
				strokeWeight: 3,
				strokeOpacity: 0.8,
				fillColor: '#519efc',
				fillOpacity: 0.4,
				strokeStyle: 'solid',
			})
			cirToo = true;
			mouseTool.on('draw', function(e) {
				var _ocj = e.obj["De"];
				mouseTool.close(true);
				if(_this.treeForm.fence_type == 0){
					cirCle = new AMap.Circle({
						center: [_ocj.center.lng, _ocj.center.lat],
						radius: _ocj.radius,
						strokeColor: "#0081FF",
						strokeOpacity: 1,
						strokeWeight: 3,
						strokeOpacity: 0.8,
						fillColor: '#519efc',
						fillOpacity: 0.4,
						strokeStyle: 'solid',
					})
					cirCle.setMap(map);
					map.setFitView([ cirCle ]);
					circleEdi = new AMap.CircleEditor(map, cirCle);
					circleEdi.open();
					circleEdi.on('end', function(e) {
						var _zxv = e.target["De"];
						poinLi = {
							"lon":[_ocj.center.lng],
							"lat":[_ocj.center.lat],
							"radius": _ocj.radius
						};
					})
				}else{
					let _xcv = _this.getEN(_ocj.path);
					Poly = new AMap.Polygon({
						path: _xcv,
						strokeColor: "#0081FF",
						strokeOpacity: 1,
						strokeWeight: 3,
						strokeOpacity: 0.8,
						fillColor: '#519efc',
						fillOpacity: 0.4,
						strokeStyle: 'solid',
					});
					Poly.setMap(map);
					map.setFitView([ Poly ]);
					polyEdit = new AMap.PolyEditor(map, Poly);
					polyEdit.open();
					polyEdit.on('end', function(e) {
						var _zxv = e.target["De"];
						_this.getEN(_zxv.path);
					})
				}
			})
		},
		// 提取多边形经纬度
		getEN(xcv){
			let _anv = [],_ikg = [], _zli = [];
			if(xcv.length){
				for(let i=0;i<xcv.length;i++){
					_anv.push([xcv[i].lng, xcv[i].lat]);
					_ikg.push(xcv[i].lng);
					_zli.push(xcv[i].lat);
				}
			}
			poinLi = {
				"lon": _ikg,
				"lat": _zli,
				"radius": 0
			};
			return _anv;
		},
		// 画多边形
		drawPoly(){
			mouseTool.polyline({
				strokeColor: "#0081FF",
				strokeOpacity: 1,
				strokeWeight: 3,
				strokeOpacity: 0.8,
				fillColor: '#519efc',
				fillOpacity: 0.4,
				strokeStyle: 'solid',
			})
			polToo = true;
		},
		// 单选框事件
		changFence(e){
			_this.treeForm.fence_type = e;
			map.clearMap();
			poinLi = {
				"lon":[],
				"lat":[],
				"radius": 0
			};
			if(e == 0){
				if(circleEdi != null){
					circleEdi.close();
				}
				_this.drawCircle();
			}else{
				if(polyEdit != null){
					polyEdit.close();
				}
				_this.drawPoly();
			}
		},
		setCenter(){
			if(_this.centerVal != ""){
				let _obj = _this.centerVal;
				let _cbv = [];
				if(_obj.indexOf(",") != -1){
					_cbv = _obj.split(",");
				}else if(_obj.indexOf("，") != -1){
					_cbv = _obj.split("，")
				}
				var marker = new AMap.Marker({
					icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
					position: [parseFloat(_cbv[0]), parseFloat(_cbv[1])]
				});
				map.add(marker);
				map.setFitView();
			}
		}
		//---------------------------- 区域 ----------------------------
	}
})