|
@@ -1,644 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="app-container">
|
|
|
- <!-- 平面图 -->
|
|
|
- <div class="floorMap" :id="mapId"></div>
|
|
|
- <!-- 右侧列表 -->
|
|
|
- <div id="floorMapPanel">
|
|
|
-
|
|
|
- <!-- 左侧:楼层 -->
|
|
|
- <div id="floorList">
|
|
|
- <el-tooltip content="展开/收起" placement="left" effect="light" enterable>
|
|
|
- <el-button type="text" id="toggleStationList" :icon="'el-icon-d-arrow-' + toggleIcon" style="font-size: 20px;"></el-button>
|
|
|
- </el-tooltip>
|
|
|
-
|
|
|
- <p>楼层</p>
|
|
|
-
|
|
|
- <el-button type="text" id="scrollUp" icon="el-icon-caret-top"></el-button>
|
|
|
- <ul id="floorUl">
|
|
|
- <li v-for="(floor,index) in floorList" :key="index" :class="currentFloorInfo.id == floor.id ? 'actived' : ''" @click="changeFloor(floor, $event)">{{ floor.name }}</li>
|
|
|
- </ul>
|
|
|
- <!-- 向下翻页 -->
|
|
|
- <el-button type="text" id="scrollDown" icon="el-icon-caret-bottom"></el-button>
|
|
|
- <!-- 添加插座 -->
|
|
|
- <el-tooltip content="点击此按钮后,再点击平面图上要安装的位置添加插座" effect="light" placement="left" enterable>
|
|
|
- <el-button type="text" id="addStationBtn" icon="el-icon-add-location" @click="addStation"></el-button>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 右侧:插座列表 -->
|
|
|
- <div id="stationList">
|
|
|
- <!-- 标题 -->
|
|
|
- <div id="stationTitle">插座列表</div>
|
|
|
- <div id="stationBody">
|
|
|
- <el-table
|
|
|
- @row-click="rowClick"
|
|
|
- :data="stationList"
|
|
|
- style="width: 100%"
|
|
|
- height="450">
|
|
|
- <el-table-column
|
|
|
- type="index"
|
|
|
- label="序号"
|
|
|
- align="center"
|
|
|
- width="50"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="room_no"
|
|
|
- label="房间号"
|
|
|
- align="center"
|
|
|
- width="66">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="station_mac"
|
|
|
- label="设备MAC"
|
|
|
- align="center"
|
|
|
- width="133">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="online_time"
|
|
|
- label="在线时间"
|
|
|
- align="center"
|
|
|
- sortable
|
|
|
- width="133">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- fixed="right"
|
|
|
- label="操作"
|
|
|
- align="center"
|
|
|
- width="66">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-tooltip content="修改" placement="top" effect="light" enterable>
|
|
|
- <el-button type="text" id="scrollUp" icon="el-icon-edit" @click="editStation(scope.row)"></el-button>
|
|
|
- </el-tooltip>
|
|
|
- <el-tooltip content="删除" placement="top" effect="light" enterable>
|
|
|
- <el-button type="text" id="scrollUp" icon="el-icon-delete" @click="deleteStation(scope.row.id)"></el-button>
|
|
|
- </el-tooltip>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <div id="stationFooter">
|
|
|
- <!-- <el-pagination
|
|
|
- small
|
|
|
- layout="prev, pager, next"
|
|
|
- :total="50">
|
|
|
- </el-pagination> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <el-dialog title="插座信息" :visible.sync="showForm" append-to-body>
|
|
|
- <el-form :model="formData" status-icon :rules="rules" ref="floorForm" label-width="100px">
|
|
|
- <el-form-item label="房间号" prop="room_no">
|
|
|
- <el-input v-model="formData.room_no" placeholder="请输入设备安装房间号"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="设备MAC" prop="station_mac" required>
|
|
|
- <el-input type="text" v-model="formData.station_mac" placeholder="请输入设备MAC编号" ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="设备名称" prop="station_name" required>
|
|
|
- <el-input type="text" v-model="formData.station_name" placeholder="请输入设备名称" ></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="横向坐标" prop="coordinate_x" required>
|
|
|
- <el-input v-model="formData.coordinate_x" placeholder="请输入设备在房间的横向坐标位置(取值范围:0~500)"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="纵向坐标" prop="coordinate_y" required>
|
|
|
- <el-input v-model="formData.coordinate_y" placeholder="请输入设备在房间的纵向坐标位置(取值范围:-374~0)"></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="submitForm">提交</el-button>
|
|
|
- <el-button @click="cancelSubmit">取消</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import L from "leaflet/dist/leaflet-src.js";
|
|
|
-import "leaflet/dist/leaflet.css";
|
|
|
-import { addClass, removeClass } from "@/utils/index.js"
|
|
|
-
|
|
|
-L.Icon.Default.prototype.options.imagePath = '/icons/';
|
|
|
-
|
|
|
-export default {
|
|
|
- props: {
|
|
|
- buildingId: {
|
|
|
- type: [Number,String],
|
|
|
- required: true
|
|
|
- },
|
|
|
- studentId: {
|
|
|
- type: [Number,String],
|
|
|
- // default: 83
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- buildingId: function(val) {
|
|
|
- this.clearData()
|
|
|
-
|
|
|
- this.bid = val
|
|
|
- this.getFloorList()
|
|
|
- },
|
|
|
- studentId: function(val) {
|
|
|
- this.currentStudentId = val
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- mapId: 'floorMap' + Math.random(), // 防止id重复
|
|
|
- bid: this.buildingId, // 建筑id
|
|
|
- currentStudentId: this.studentId, // 当前学生id
|
|
|
- studentMarker: null,
|
|
|
- floorList: [], // 楼层数据
|
|
|
- stationList: [], // 基站数据
|
|
|
- currentFloorInfo: {}, // 当前楼层信息
|
|
|
- currentStudentInfo: {}, // 当前学生信息
|
|
|
- lmap: null, // leaflet map object
|
|
|
- markersLayer: null, // 覆盖物群组
|
|
|
- imageObj: null, // 图片覆盖物对象
|
|
|
- defaultImageUrl: '/icons/picture-outline.png',
|
|
|
- studentImageUrl: '/icons/student_alarm.png',
|
|
|
- toggleIcon: 'left',
|
|
|
- showForm: false, // 显示添加/修改表单
|
|
|
- formData: {}, // 表单数据
|
|
|
- rules: {
|
|
|
- station_mac: [
|
|
|
- { required: true, message: '请输入设备MAC编号', trigger: 'blur' },
|
|
|
- { required: true, message: '请输入设备MAC编号', trigger: 'change' },
|
|
|
- // { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
|
|
|
- ],
|
|
|
- station_name: [
|
|
|
- { required: true, message: '请输入设备名称', trigger: 'blur' },
|
|
|
- { required: true, message: '请输入设备名称', trigger: 'change' },
|
|
|
- { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
|
|
|
- ],
|
|
|
- coordinate_x: [
|
|
|
- { required: true, message: '请输入设备在房间的横向坐标位置', trigger: 'blur' },
|
|
|
- { required: true, message: '请输入设备在房间的横向坐标位置', trigger: 'change' },
|
|
|
- ],
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- if (this.studentId) {
|
|
|
- // 学生定位
|
|
|
- this.initStudentLocation()
|
|
|
- } else {
|
|
|
- // 获取楼层数据
|
|
|
- this.getFloorList()
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.initMap()
|
|
|
- });
|
|
|
-
|
|
|
- var that = this;
|
|
|
- // 楼层滚动
|
|
|
- var scrollUp = document.getElementById('scrollUp')
|
|
|
- var scrollDown = document.getElementById('scrollDown')
|
|
|
- var floorUl = document.getElementById('floorUl')
|
|
|
- scrollUp.onclick = function(e) {
|
|
|
- floorUl.scrollTop -= 300
|
|
|
- }
|
|
|
- scrollDown.onclick = function(e) {
|
|
|
- floorUl.scrollTop = floorUl.scrollTop + 300
|
|
|
- }
|
|
|
- // 显示隐藏插座列表
|
|
|
- var stationListElem = document.getElementById('stationList')
|
|
|
- var toggleStationListElem = document.getElementById('toggleStationList')
|
|
|
- toggleStationListElem.onclick = function(e){
|
|
|
- if (stationListElem.style.display === 'none' || !stationListElem.style.display) {
|
|
|
- stationListElem.style.display = 'block';
|
|
|
- that.toggleIcon = 'right';
|
|
|
- } else {
|
|
|
- stationListElem.style.display = 'none'
|
|
|
- that.toggleIcon = 'left';
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /**
|
|
|
- * 平面图
|
|
|
- */
|
|
|
- initMap() {
|
|
|
- // this.lmap = L.map('floorMap', {
|
|
|
- this.lmap = L.map(this.mapId, {
|
|
|
- minZoom: 1,
|
|
|
- maxZoom: 4,
|
|
|
- center: [0, 0],
|
|
|
- zoom: 1,
|
|
|
- crs: L.CRS.Simple,
|
|
|
- drawControl: true, // 使用draw
|
|
|
- });
|
|
|
- // 隐藏右下角的控制栏
|
|
|
- this.lmap.attributionControl.remove()
|
|
|
- // 图片参数
|
|
|
- var w = 4000,
|
|
|
- h = 3000,
|
|
|
- url = this.currentFloorInfo.drawing_path || this.defaultImageUrl;
|
|
|
- // calculate the edges of the image, in coordinate space
|
|
|
- var southWest = this.lmap.unproject([0, h], this.lmap.getMaxZoom()-1);
|
|
|
- var northEast = this.lmap.unproject([w, 0], this.lmap.getMaxZoom()-1);
|
|
|
- var bounds = new L.LatLngBounds(southWest, northEast);
|
|
|
- // 添加图片覆盖物
|
|
|
- this.imageObj = L.imageOverlay(url, bounds);
|
|
|
- this.imageObj.addTo(this.lmap)
|
|
|
- // tell leaflet that the map is exactly as big as the image
|
|
|
- this.lmap.setMaxBounds(bounds);
|
|
|
- // 初始化覆盖物群组
|
|
|
- this.markersLayer = L.layerGroup()
|
|
|
- },
|
|
|
- // 学生定位
|
|
|
- initStudentLocation() {
|
|
|
- // 获取学生室内基站信息
|
|
|
- this.$http.get('student/getIndoorStationInfo/' + this.currentStudentId)
|
|
|
- .then( resp => {
|
|
|
- if (resp.code === 10000) {
|
|
|
- this.currentStudentInfo = resp.data
|
|
|
- // 先获取学生信息再获取楼层信息(需要用到学生最后经过基站的楼层)
|
|
|
- this.getFloorList()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 添加基站
|
|
|
- addStation() {
|
|
|
- if (!this.lmap) {
|
|
|
- this.$message.warning('图片加载错误,请关闭重新打开')
|
|
|
- return;
|
|
|
- }
|
|
|
- var that = this;
|
|
|
- // 修改鼠标样式
|
|
|
- // L.DomUtil.addClass(this.lmap._container,'leaflet-cursor-Crosshair');
|
|
|
- // 添加点击事件
|
|
|
- this.lmap.once('click', function(e) {
|
|
|
- if (!that.currentFloorInfo.drawing_path) {
|
|
|
- that.$message.error('请先上传楼层图片')
|
|
|
- return;
|
|
|
- }
|
|
|
- that.formData = {
|
|
|
- coordinate_x: e.latlng.lng,
|
|
|
- coordinate_y: e.latlng.lat,
|
|
|
- school_id: that.currentFloorInfo.school_id,
|
|
|
- building_id: that.currentFloorInfo.building_id,
|
|
|
- floor_id: that.currentFloorInfo.id,
|
|
|
- }
|
|
|
- that.showForm = true
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取楼层数据
|
|
|
- getFloorList() {
|
|
|
- if (!this.bid) {
|
|
|
- this.$message.warn('获取楼层数据失败')
|
|
|
- return;
|
|
|
- }
|
|
|
- this.$http.get('kqFloor/getBuildingFloorData/'+ this.bid)
|
|
|
- .then(resp => {
|
|
|
- this.floorList = []
|
|
|
- if (resp.code === 10000) {
|
|
|
- this.floorList = resp.data
|
|
|
- let len = this.floorList.length;
|
|
|
- // 无楼层数据
|
|
|
- if (!len) {
|
|
|
- return;
|
|
|
- }
|
|
|
- this.currentFloorInfo = null
|
|
|
- // 如果有学生信息存在,定位到学生所在楼层
|
|
|
- if (this.currentStudentInfo && this.currentStudentInfo.floor_id) {
|
|
|
- this.floorList.forEach(item => {
|
|
|
- if (this.currentStudentInfo.floor_id == item.id) {
|
|
|
- this.currentFloorInfo = item
|
|
|
- }
|
|
|
- })
|
|
|
- if (!this.currentFloorInfo) {
|
|
|
- this.currentFloorInfo = this.floorList[this.floorList.length - 1]
|
|
|
- }
|
|
|
-
|
|
|
- } else { // 默认选择最底层
|
|
|
- this.currentFloorInfo = this.floorList[this.floorList.length - 1]
|
|
|
- }
|
|
|
-
|
|
|
- this.imageObj.setUrl(this.currentFloorInfo.drawing_path || this.defaultImageUrl)
|
|
|
- this.getStationList(this.currentFloorInfo.id)
|
|
|
-
|
|
|
- this.$nextTick(() => {
|
|
|
- // 目前容器内只能显示10层,超过10层要将容器的滚动到最底层
|
|
|
- let floorUl = document.getElementById('floorUl')
|
|
|
- floorUl.scrollTo(0, floorUl.scrollHeight)
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- }).catch(()=>{})
|
|
|
- },
|
|
|
- // 切换楼层
|
|
|
- changeFloor(info, event) {
|
|
|
- this.currentFloorInfo = info
|
|
|
- // 换底图
|
|
|
- this.imageObj.setUrl(info.drawing_path || this.defaultImageUrl)
|
|
|
- // 换插座数据
|
|
|
- this.getStationList(info.id)
|
|
|
- // 按钮样式
|
|
|
- // addClass(event.target, 'actived')
|
|
|
- // 移除其他同胞元素样式
|
|
|
- this.removeSiblingsClass(event.target, 'actived')
|
|
|
- },
|
|
|
- // 移除同胞元素样式
|
|
|
- removeSiblingsClass(el, cls) {
|
|
|
- var _el = el;
|
|
|
- // 前
|
|
|
- while (el = el.previousSibling) {
|
|
|
- removeClass(el, cls)
|
|
|
- }
|
|
|
- // 后
|
|
|
- var el = _el;
|
|
|
- while (el = el.nextSibling) {
|
|
|
- removeClass(el, cls)
|
|
|
- }
|
|
|
- },
|
|
|
- // 获取插座数据
|
|
|
- getStationList(fid) {
|
|
|
- if (!fid) {
|
|
|
- let len = this.floorList.length
|
|
|
- if (!len) {
|
|
|
- this.stationList = [];
|
|
|
- return false;
|
|
|
- }
|
|
|
- fid = this.floorList[len - 1]; // 默认排序最小层
|
|
|
- }
|
|
|
- this.$http.get('station', {params: {floor_id: fid}})
|
|
|
- .then(resp => {
|
|
|
- this.stationList = []
|
|
|
- // 清空地图覆盖物
|
|
|
- this.markersLayer.clearLayers();
|
|
|
- // 清除学生覆盖物
|
|
|
- this.studentMarker && this.studentMarker.remove()
|
|
|
-
|
|
|
- if (resp.code === 10000) {
|
|
|
- this.stationList = resp.data || []
|
|
|
- // 添加覆盖物
|
|
|
- this.addMultiMarkers()
|
|
|
- }
|
|
|
- }).catch(()=>{})
|
|
|
- },
|
|
|
- // 添加多覆盖物
|
|
|
- addMultiMarkers() {
|
|
|
- if (!this.lmap) {
|
|
|
- this.initMap()
|
|
|
- }
|
|
|
- this.stationList.forEach(item => {
|
|
|
- if (!item.coordinate_x || !item.coordinate_y) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- let latlng = L.latLng(item.coordinate_y, item.coordinate_x);
|
|
|
- // 单个添加
|
|
|
- this.addMarker(latlng, item)
|
|
|
- // 如果有学生
|
|
|
- if (this.currentStudentInfo && this.currentStudentInfo.station_mac == item.station_mac) {
|
|
|
- let lng = parseFloat(item.coordinate_x) + 1.5,
|
|
|
- lat = item.coordinate_y,
|
|
|
- stuIcon = L.icon({
|
|
|
- iconUrl: '/icons/student_alarm.png',
|
|
|
- iconSize: [16, 16],
|
|
|
- }),
|
|
|
- content = [
|
|
|
- '<b>姓名:</b>' + this.currentStudentInfo.student_name,
|
|
|
- '<b>性别:</b>' + this.currentStudentInfo.sex,
|
|
|
- '<b>年龄:</b>' + this.currentStudentInfo.age,
|
|
|
- '<b>电话:</b>' + this.currentStudentInfo.phone,
|
|
|
- '<b>在线时间:</b>' + this.currentStudentInfo.online_time,
|
|
|
- ]
|
|
|
- this.studentMarker = L.marker(L.latLng(lat, lng), {icon: stuIcon}).addTo(this.lmap);
|
|
|
- this.studentMarker.bindPopup(content.join('<br/>')).openPopup();
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 添加单个覆盖物
|
|
|
- addMarker(latlng, info) {
|
|
|
- var myIcon = L.icon({
|
|
|
- iconUrl: '/icons/chazuo.png',
|
|
|
- iconSize: [24, 24],
|
|
|
- });
|
|
|
- var marker = L.marker(latlng, {icon: myIcon, draggable: true, title: info.room_no}).addTo(this.lmap);
|
|
|
- // 将点信息保存
|
|
|
- marker._infoData = info;
|
|
|
- // 信息窗
|
|
|
- marker.bindPopup(`<b>房间号:</b> ${info.room_no || ''}<br><b>设备名称:</b> ${info.station_name}<br><b>设备MAC:</b> ${info.station_mac}`);
|
|
|
- // 移动事件
|
|
|
- marker.on('moveend', (e) => {
|
|
|
- this.onMarkerMoved(e.target)
|
|
|
- })
|
|
|
- // 存入群组
|
|
|
- this.markersLayer.addLayer(marker).addTo(this.lmap)
|
|
|
- },
|
|
|
- // 移动覆盖物
|
|
|
- onMarkerMoved(marker) {
|
|
|
- var info = marker._infoData
|
|
|
-
|
|
|
- this.$confirm('确定要移动到当前位置吗?', '移动设备位置', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- var data = {
|
|
|
- coordinate_x: marker._latlng.lng,
|
|
|
- coordinate_y: marker._latlng.lat,
|
|
|
- }
|
|
|
- this.$http.put('indoorStation/updateLocation/' + info.id, data)
|
|
|
- .then(resp => {
|
|
|
- if (resp.code === 10000) {
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: resp.message
|
|
|
- });
|
|
|
- // 重新获取基站数据
|
|
|
- this.getStationList(this.currentFloorInfo.id)
|
|
|
- }
|
|
|
- }).catch(() => {})
|
|
|
-
|
|
|
- }).catch(() => {
|
|
|
- marker.setLatLng(L.latLng(info.coordinate_y, info.coordinate_x))
|
|
|
- })
|
|
|
- },
|
|
|
- // 提交表单
|
|
|
- submitForm() {
|
|
|
- // 检测
|
|
|
- this.$refs.floorForm.validate((valid) => {
|
|
|
- if (!valid) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- if (this.formData.id) {
|
|
|
- // 修改
|
|
|
- this.$http.put('indoorStation/'+ this.formData.id, this.formData)
|
|
|
- .then(resp => {
|
|
|
- if (resp.code === 10000) {
|
|
|
- this.$message.success(resp.message)
|
|
|
- this.getStationList(this.currentFloorInfo.id)
|
|
|
-
|
|
|
- this.showForm = false
|
|
|
- }
|
|
|
- }).catch(() => {})
|
|
|
- } else {
|
|
|
- // 添加
|
|
|
- this.$http.post('indoorStation', this.formData)
|
|
|
- .then(resp => {
|
|
|
- if (resp.code === 10000) {
|
|
|
- this.$message.success(resp.message)
|
|
|
- this.getStationList(this.currentFloorInfo.id)
|
|
|
- this.showForm = false
|
|
|
- }
|
|
|
- }).catch(() => {})
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 取消
|
|
|
- cancelSubmit() {
|
|
|
- this.showForm = false
|
|
|
- },
|
|
|
- // 表格中选中设备时
|
|
|
- rowClick(row, col, e) {
|
|
|
- // 显示覆盖物弹窗
|
|
|
- var layers = this.markersLayer.getLayers();
|
|
|
- layers.length && layers.forEach(item => {
|
|
|
- if (!item._infoData) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (row.id == item._infoData.id) {
|
|
|
- item.openPopup()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 修改基站
|
|
|
- editStation(info) {
|
|
|
- console.log('editStation',info);
|
|
|
- // this.formData = info
|
|
|
- this.formData = {
|
|
|
- id: info.id,
|
|
|
- room_no: info.room_no,
|
|
|
- station_mac: info.station_mac,
|
|
|
- station_name: info.station_name,
|
|
|
- coordinate_x: info.coordinate_x,
|
|
|
- coordinate_y: info.coordinate_y,
|
|
|
- }
|
|
|
- this.showForm = true
|
|
|
- },
|
|
|
- // 删除楼层
|
|
|
- deleteStation(id) {
|
|
|
- this.$confirm('确定要删除吗?', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- this.$http.delete('indoorStation/' + id)
|
|
|
- .then(resp => {
|
|
|
- if (resp.code === 10000) {
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '删除成功!'
|
|
|
- });
|
|
|
- // 重新获取基站数据
|
|
|
- this.getStationList(this.currentFloorInfo.id)
|
|
|
- }
|
|
|
- }).catch(() => {})
|
|
|
-
|
|
|
- }).catch(() => {});
|
|
|
- },
|
|
|
- // 清除数据
|
|
|
- clearData() {
|
|
|
- this.floorList = []
|
|
|
- this.stationList = []
|
|
|
- this.currentFloorInfo = []
|
|
|
- this.currentStudentInfo = []
|
|
|
-
|
|
|
- this.imageObj.setUrl(this.defaultImageUrl)
|
|
|
- this.markersLayer && this.markersLayer.clearLayers()
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
- }
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
- .app-container {
|
|
|
- .actived {
|
|
|
- background-color: #63a8e0;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .floorMap {
|
|
|
- width: 100%;
|
|
|
- min-width: 500px;
|
|
|
- height: 100%;
|
|
|
- min-height: 500px;
|
|
|
- border: 1px solid #bbb;
|
|
|
- }
|
|
|
-
|
|
|
- #floorMapPanel {
|
|
|
- display: flex;
|
|
|
- position: absolute;
|
|
|
- top: 100px;
|
|
|
- right: 45px;
|
|
|
- background-color: #ffffff;
|
|
|
- box-shadow: 0 2px 6px 0 rgb(27 142 236 / 50%);
|
|
|
- z-index: 10000;
|
|
|
- // width: 440px;
|
|
|
- height: 500px;
|
|
|
-
|
|
|
- #floorList {
|
|
|
- text-align: center;
|
|
|
- width: 40px;
|
|
|
- height: 100%;
|
|
|
- border-right: 1px dashed #9e9e9e;
|
|
|
- ul {
|
|
|
- height: 300px;
|
|
|
- list-style: none;
|
|
|
- overflow: hidden;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- li {
|
|
|
- width: 40px;
|
|
|
- line-height: 30px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- li:hover {
|
|
|
- background-color: #63a8e0;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- #addStationBtn {
|
|
|
- display: block;
|
|
|
- text-align: center;
|
|
|
- font-size: 20px;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- #stationList {
|
|
|
- display: none;
|
|
|
- width: 450px;
|
|
|
- height: 100%;
|
|
|
- #stationTitle {
|
|
|
- line-height: 35px;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 18px;
|
|
|
- text-align: center;
|
|
|
- border-bottom: 1px dashed #ccc;
|
|
|
- }
|
|
|
- #stationBody {
|
|
|
- font-size: 14px;
|
|
|
- line-height: 33px;
|
|
|
- text-align: center;
|
|
|
- height: 433px;
|
|
|
- }
|
|
|
- .stationListHead {
|
|
|
- background-color: #cfeff8;
|
|
|
- }
|
|
|
-
|
|
|
- #stationFooter {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|