123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451 |
- 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();
- }
- }
- //---------------------------- 区域 ----------------------------
- }
- })
|