<template> <div class="bottle-spread-home"> <div :class="isBottle?'bottle-button active':'bottle-button'" @click="bottleCheck"> <img src="@/assets/image/bottle-mark-button.png"/> <span>气瓶</span> </div> <div :class="isStation?'station-button active':'station-button'" @click="stationCheck"> <img src="@/assets/image/home-work-button.png"/> <span>储配站</span> </div> <!--<el-button class="bottle-button">气瓶</el-button> <el-button class="station-button">储配站</el-button>--> <div id="map"></div> </div> </template> <script> import { EditorMap } from "@/utils/mapClass/mapbigwindow"; import { mapGetters, mapActions } from "vuex"; import { gasStorageStationList } from "@/api/gasBottleTrack/gasHolderStationManage"; import { bottleInfoList } from "@/api/gasBottleTrack/gasBottleManage"; export default { name: "bottle-spread", data(){ return{ map: null, isBottle: true, isStation: false, bottleMarks: [], stationMarks: [] } }, computed: { ...mapGetters(["systemSetting"]), }, mounted(){ this.initMap(); this.getBottleInfoList(); this.getStationInfoList(); }, methods:{ initMap(){ const path = eval(this.systemSetting.map_center); this.map = new EditorMap( "map", { center: path, // mapStyle: "amap://styles/4651b4007b4adfcf5015dd154459ab46", mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758", zoom: 14.5, }, this, ); }, //地图初始化气瓶 initBottleMark(data){ data.forEach(item =>{ let markData = {longitude:item.longitude,latitude:item.latitude,iconType:"1000",nickName:item.bottleCode} this.map.control = '2'; let bottleMark = this.map.addDevice(markData); this.bottleMarks.push(bottleMark); }) }, //地图初始化储配站 initStationMark(data){ data.forEach(item =>{ let markData = {longitude:item.longitude,latitude:item.latitude,iconType:"1001",stationName:item.stationName}; this.map.control = '2'; let stationMark = this.map.addDevice(markData); this.stationMarks.push(stationMark); }) //默认隐藏 this.map.allDevice['1001'].forEach(item =>{ item.hide(); }) }, //查询气瓶信息 getBottleInfoList(){ bottleInfoList().then(res =>{ if(res.code == 200){ this.initBottleMark(res.data); } }) }, //查询储配站信息 getStationInfoList(){ gasStorageStationList().then(res =>{ if(res.code == 200){ this.initStationMark(res.data); } }) }, bottleCheck(){ if(this.isBottle){ this.isBottle = false; this.map.allDevice['1000'].forEach(item =>{ item.hide(); }) }else{ this.isBottle = true; this.map.allDevice['1000'].forEach(item =>{ item.show(); }) } }, stationCheck(){ if(this.isStation){ this.isStation = false; this.map.allDevice['1001'].forEach(item =>{ item.hide(); }) }else{ this.isStation = true; this.map.allDevice['1001'].forEach(item =>{ item.show(); }) } }, } } </script> <style scoped lang="scss"> .bottle-spread-home{ height: 100vh; } #map{ height: 100%; width: 100%; } .station-button{ text-align: center; padding: 7px 0px; width: 99px; height: 40px; border-radius: 2px; opacity: 1; background: #FFFFFF; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.22); border: 1px solid #cccccc; position: fixed; z-index: 9; top: 59px; left: 333px; color: #1890FF; cursor: pointer; img{ position: relative; top: 3px; margin-right: 3px; height: 21px } } .bottle-button{ text-align: center; padding: 9px 0px; width: 99px; height: 40px; border-radius: 2px; opacity: 1; background: #FFFFFF; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.22); border: 1px solid #cccccc; position: fixed; z-index: 9; top: 59px; left: 217px; color: #1890FF; cursor: pointer; img{ position: relative; top: 3px; margin-right: 3px; } } .active{ //background-image: url("~@/assets/image/dg.png"); background-repeat: no-repeat; background-position: top right; } </style>