|
|
@@ -1,5 +1,6 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
+ <div class="online-title"><span :style="{'background': onlineNum > 0 ? '#ff0000' : '#00ff00'}"></span>在线人数：{{ onlineNum }}</div>
|
|
|
<div id="container" style="width: 100%; height: 100vh" v-loading="loading" element-loading-text="数据量较大，正在为您加载......"
|
|
|
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"></div>
|
|
|
<div v-if="infoWindowVisible" class="info-window">
|
|
|
@@ -29,232 +30,266 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
+
|
|
|
<script>
|
|
|
-import axios from 'axios';
|
|
|
-import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
+import axios from "axios";
|
|
|
+import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- pageNum: 1, //当前页面
|
|
|
- pageSize: 10, //每页显示条数
|
|
|
- totalSum: 0, //全部的数据条数
|
|
|
- tableData: [],
|
|
|
- marker: null,
|
|
|
- infoWindowVisible: false, // 控制信息窗口的显示
|
|
|
- loading: false,
|
|
|
- map: null,
|
|
|
- infoWindow: null, //信息窗口
|
|
|
- positionData: [],
|
|
|
- rowId: ''
|
|
|
-
|
|
|
- };
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageNum: 1, //当前页面
|
|
|
+ pageSize: 10, //每页显示条数
|
|
|
+ totalSum: 0, //全部的数据条数
|
|
|
+ tableData: [],
|
|
|
+ marker: null,
|
|
|
+ infoWindowVisible: false, // 控制信息窗口的显示
|
|
|
+ loading: false,
|
|
|
+ map: null,
|
|
|
+ infoWindow: null, //信息窗口
|
|
|
+ positionData: [],
|
|
|
+ rowId: "",
|
|
|
+ onlineNum: 0 //在线默认人数
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initMap();
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ //标注文字上的点击事件
|
|
|
+ window.handleDetail = id => {
|
|
|
+ this.rowId = id;
|
|
|
+ this.detail();
|
|
|
+ };
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ // 销毁地图，并清空地图容器.该方法执行后，地图对象被注销，内存释放，地图容器被清空。
|
|
|
+ this.map.destroy();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClose() {
|
|
|
+ this.infoWindowVisible = false;
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.initMap();
|
|
|
+ detail() {
|
|
|
+ this.$api.user
|
|
|
+ .queryPositionList({
|
|
|
+ id: this.rowId,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ pageNum: this.pageNum
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.infoWindowVisible = true;
|
|
|
+ this.pageNum = res.data.pageNum;
|
|
|
+ this.pageSize = res.data.pageSize;
|
|
|
+ this.totalSum = res.data.totalSize;
|
|
|
+ this.tableData = res.data.content;
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- created() {
|
|
|
- //标注文字上的点击事件
|
|
|
- window.handleDetail = (id) => {
|
|
|
- this.rowId = id
|
|
|
- this.detail()
|
|
|
- }
|
|
|
+ // 每页条数发生改变
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pageSize = val;
|
|
|
+ this.detail();
|
|
|
},
|
|
|
- destroyed() {
|
|
|
- // 销毁地图，并清空地图容器.该方法执行后，地图对象被注销，内存释放，地图容器被清空。
|
|
|
- this.map.destroy();
|
|
|
+ // 当前页发生改变
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.pageNum = val;
|
|
|
+ this.detail();
|
|
|
},
|
|
|
- methods: {
|
|
|
- handleClose() {
|
|
|
- this.infoWindowVisible = false
|
|
|
- },
|
|
|
- detail() {
|
|
|
- this.$api.user.queryPositionList({
|
|
|
- id: this.rowId,
|
|
|
- pageSize: this.pageSize,
|
|
|
- pageNum: this.pageNum,
|
|
|
- }).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.infoWindowVisible = true
|
|
|
- this.pageNum = res.data.pageNum
|
|
|
- this.pageSize = res.data.pageSize
|
|
|
- this.totalSum = res.data.totalSize
|
|
|
- this.tableData = res.data.content
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 每页条数发生改变
|
|
|
- handleSizeChange(val) {
|
|
|
- this.pageSize = val
|
|
|
- this.detail()
|
|
|
- },
|
|
|
- // 当前页发生改变
|
|
|
- handleCurrentChange(val) {
|
|
|
- this.pageNum = val
|
|
|
- this.detail()
|
|
|
- },
|
|
|
- initMap() {
|
|
|
-
|
|
|
- var _this = this;
|
|
|
- // https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png
|
|
|
- AMapLoader.load({
|
|
|
- key: "262c17c813cdaab1bf93bfeb9873a6c8", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
- version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
- plugins: ['AMap.LineSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
- }).then((AMap) => {
|
|
|
- _this.map = new AMap.Map("container", { //设置地图容器id
|
|
|
- viewMode: "3D", //是否为3D地图模式
|
|
|
- zoom: 8, //初始化地图级别
|
|
|
- expandZoomRange: true, //支持可以扩展最大缩放级别
|
|
|
- // center: ['116.441504', '40.031386'], //初始化地图中心点位置
|
|
|
- center: ['112.34988', '37.827066'],
|
|
|
- // mapStyle: 'amap://styles/blue',
|
|
|
- mapStyle: 'amap://styles/normal', //地图样式，彩色
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- _this.map.on('complete', () => {
|
|
|
- _this.$api.user.queryPosition().then(res => {
|
|
|
- if (res.code == 200 && res.data.length) {
|
|
|
- //处理后台返回要用到的数据
|
|
|
- // _this.positionData = res.data.data
|
|
|
- _this.positionData = res.data.map(item => ({
|
|
|
- "userName": item.userName,
|
|
|
- "id": item.id,
|
|
|
- "address": item.address,
|
|
|
- "onlineImg": item.status ? "Frame-1(2).png" : "Frame(2).png",
|
|
|
- "status": item.status ?'在线':'离线',
|
|
|
- "positionArr": [item.longitude, item.latitude]
|
|
|
- }));
|
|
|
- _this.mapPoint();
|
|
|
+ initMap() {
|
|
|
+ var _this = this;
|
|
|
+ // https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png
|
|
|
+ AMapLoader.load({
|
|
|
+ key: "262c17c813cdaab1bf93bfeb9873a6c8", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
+ version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
+ plugins: ["AMap.LineSearch"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
+ }).then(AMap => {
|
|
|
+ _this.map = new AMap.Map("container", {
|
|
|
+ //设置地图容器id
|
|
|
+ viewMode: "3D", //是否为3D地图模式
|
|
|
+ zoom: 8, //初始化地图级别
|
|
|
+ expandZoomRange: true, //支持可以扩展最大缩放级别
|
|
|
+ // center: ['116.441504', '40.031386'], //初始化地图中心点位置
|
|
|
+ center: ["112.34988", "37.827066"],
|
|
|
+ // mapStyle: 'amap://styles/blue',
|
|
|
+ mapStyle: "amap://styles/normal" //地图样式，彩色
|
|
|
+ });
|
|
|
|
|
|
- } else {
|
|
|
- _this.loading = false;
|
|
|
- }
|
|
|
- })
|
|
|
+ _this.map.on("complete", () => {
|
|
|
+ _this.$api.user.queryPosition().then(res => {
|
|
|
+ console.log(res, "地图数据");
|
|
|
|
|
|
- });
|
|
|
- })
|
|
|
- //放大/缩小的工具条----地图右下角的 + 和 - 按钮
|
|
|
- _this.map.plugin(["AMap.ToolBar"], function () {
|
|
|
- _this.map.addControl(new AMap.ToolBar());
|
|
|
- });
|
|
|
- const bounds = new AMap.Bounds([
|
|
|
- [112.058286, 35.243683], // 左下角坐标
|
|
|
- [114.464586, 39.099962] // 右上角坐标
|
|
|
- ]);
|
|
|
- _this.map.limitBounds(bounds);
|
|
|
- if (location.href.indexOf('&guide=1') !== -1) {
|
|
|
- _this.map.setStatus({ scrollWheel: false })
|
|
|
+ if (res.code == 200 && res.data.list.length) {
|
|
|
+ _this.onlineNum = res.data.manNum; //在线人数
|
|
|
+ //处理后台返回要用到的数据
|
|
|
+ // _this.positionData = res.data.data
|
|
|
+ _this.positionData = res.data.list.map(item => ({
|
|
|
+ userName: item.userName,
|
|
|
+ id: item.id,
|
|
|
+ address: item.address,
|
|
|
+ onlineImg: item.status ? "Frame-1(2).png" : "Frame(2).png",
|
|
|
+ status: item.status ? "在线" : "离线",
|
|
|
+ positionArr: [item.longitude, item.latitude]
|
|
|
+ }));
|
|
|
+ _this.mapPoint();
|
|
|
+ } else {
|
|
|
+ _this.loading = false;
|
|
|
}
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ //放大/缩小的工具条----地图右下角的 + 和 - 按钮
|
|
|
+ _this.map.plugin(["AMap.ToolBar"], function() {
|
|
|
+ _this.map.addControl(new AMap.ToolBar());
|
|
|
+ });
|
|
|
+ const bounds = new AMap.Bounds([
|
|
|
+ [112.058286, 35.243683], // 左下角坐标
|
|
|
+ [114.464586, 39.099962] // 右上角坐标
|
|
|
+ ]);
|
|
|
+ _this.map.limitBounds(bounds);
|
|
|
+ if (location.href.indexOf("&guide=1") !== -1) {
|
|
|
+ _this.map.setStatus({ scrollWheel: false });
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
mapPoint() {
|
|
|
- var _this = this;
|
|
|
- /* 1.创建 LabelMarker，
|
|
|
+ var _this = this;
|
|
|
+ /* 1.创建 LabelMarker，
|
|
|
2.创建 LabelsLayer，将已创建的 LabelMarker 添加到 LabelsLayer 上
|
|
|
3. 将 LabelsLayer 添加到地图实例 */
|
|
|
- var labelsLayer = new AMap.LabelsLayer({
|
|
|
- zooms: [3, 20],
|
|
|
- zIndex: 1000,
|
|
|
- // 该层内标注是否避让
|
|
|
- collision: true,
|
|
|
- // 设置 allowCollision：true，可以让标注避让用户的标注
|
|
|
- allowCollision: true,
|
|
|
- });
|
|
|
- //将 LabelsLayer 添加到地图实例
|
|
|
- _this.map.add(labelsLayer);
|
|
|
-
|
|
|
-
|
|
|
- _this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -4) });//信息窗口
|
|
|
- var position = JSON.parse(JSON.stringify(_this.positionData));
|
|
|
- for (var i = 0; i < position.length; i++) {
|
|
|
- var labelMarker = new AMap.LabelMarker({
|
|
|
- position: position[i].positionArr
|
|
|
- // position: [position[i].longitude,position[i].latitude]
|
|
|
+ var labelsLayer = new AMap.LabelsLayer({
|
|
|
+ zooms: [3, 20],
|
|
|
+ zIndex: 1000,
|
|
|
+ // 该层内标注是否避让
|
|
|
+ collision: true,
|
|
|
+ // 设置 allowCollision：true，可以让标注避让用户的标注
|
|
|
+ allowCollision: true
|
|
|
+ });
|
|
|
+ //将 LabelsLayer 添加到地图实例
|
|
|
+ _this.map.add(labelsLayer);
|
|
|
|
|
|
- });
|
|
|
- //标注信息
|
|
|
- var normalMarker = new AMap.Marker({
|
|
|
- position: position[i].positionArr,
|
|
|
- map: _this.map,
|
|
|
- icon: require("@/assets/" + position[i].onlineImg)
|
|
|
- // icon: require("@/assets/api.png")
|
|
|
- });
|
|
|
- normalMarker.content = position[i].status=='在线'? '<div style="font-weight: 700;padding:20px 20px 6px 20px">员工姓名：' + position[i].userName + '</div>' +
|
|
|
- '<div style="padding:6px 20px">员工工号：' + position[i].id + '</div>' +
|
|
|
- '<div style="color: #DA3B0F;padding:6px 20px"><span style="color: rgba(0,0,0,0.85);">在线状态：</span>' + position[i].status + '</div>' +
|
|
|
- '<div style="padding:6px 20px 20px 20px">地址：' + position[i].address + '</div>' +
|
|
|
- '<div style="height: 32px;line-height:30px;text-align: center;background: rgba(218,59,15,0.15);color: #DA3B0F;cursor:pointer;" onclick="handleDetail(\'' + position[i].id + '\')">查看详情</div>'
|
|
|
- :
|
|
|
- '<div style="font-weight: 700;padding:20px 20px 6px 20px">员工姓名：' + position[i].userName + '</div>' +
|
|
|
- '<div style="padding:6px 20px">员工工号：' + position[i].id + '</div>' +
|
|
|
- '<div style="color: #009900;padding:6px 20px"><span style="color: rgba(0,0,0,0.85);">在线状态：</span>' + position[i].status + '</div>' +
|
|
|
- '<div style="padding:6px 20px 20px 20px">地址：' + position[i].address + '</div>' +
|
|
|
- '<div style="height: 32px;line-height:30px;text-align: center;background: rgba(0,153,0,0.15);color: #009900;cursor:pointer;" onclick="handleDetail(\'' + position[i].id + '\')">查看详情</div>'
|
|
|
- normalMarker.on('click', _this.markerClick);
|
|
|
- normalMarker.setExtData({ id: position[i].id }); //给标注添加信息，点击时可以获取
|
|
|
- }
|
|
|
- // 一次性将海量点添加到图层
|
|
|
- labelsLayer.add(labelMarker);
|
|
|
- this.loading = false; //地图加载完成
|
|
|
+ _this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -4) }); //信息窗口
|
|
|
+ var position = JSON.parse(JSON.stringify(_this.positionData));
|
|
|
+ for (var i = 0; i < position.length; i++) {
|
|
|
+ var labelMarker = new AMap.LabelMarker({
|
|
|
+ position: position[i].positionArr
|
|
|
+ // position: [position[i].longitude,position[i].latitude]
|
|
|
+ });
|
|
|
+ //标注信息
|
|
|
+ var normalMarker = new AMap.Marker({
|
|
|
+ position: position[i].positionArr,
|
|
|
+ map: _this.map,
|
|
|
+ icon: require("@/assets/" + position[i].onlineImg)
|
|
|
+ // icon: require("@/assets/api.png")
|
|
|
+ });
|
|
|
+ normalMarker.content =
|
|
|
+ position[i].status == "在线"
|
|
|
+ ? '<div style="font-weight: 700;padding:20px 20px 6px 20px">员工姓名：' +
|
|
|
+ position[i].userName +
|
|
|
+ "</div>" +
|
|
|
+ '<div style="padding:6px 20px">员工工号：' +
|
|
|
+ position[i].id +
|
|
|
+ "</div>" +
|
|
|
+ '<div style="color: #DA3B0F;padding:6px 20px"><span style="color: rgba(0,0,0,0.85);">在线状态：</span>' +
|
|
|
+ position[i].status +
|
|
|
+ "</div>" +
|
|
|
+ '<div style="padding:6px 20px 20px 20px">地址：' +
|
|
|
+ position[i].address +
|
|
|
+ "</div>" +
|
|
|
+ '<div style="height: 32px;line-height:30px;text-align: center;background: rgba(218,59,15,0.15);color: #DA3B0F;cursor:pointer;" onclick="handleDetail(\'' +
|
|
|
+ position[i].id +
|
|
|
+ "')\">查看详情</div>"
|
|
|
+ : '<div style="font-weight: 700;padding:20px 20px 6px 20px">员工姓名：' +
|
|
|
+ position[i].userName +
|
|
|
+ "</div>" +
|
|
|
+ '<div style="padding:6px 20px">员工工号：' +
|
|
|
+ position[i].id +
|
|
|
+ "</div>" +
|
|
|
+ '<div style="color: #009900;padding:6px 20px"><span style="color: rgba(0,0,0,0.85);">在线状态：</span>' +
|
|
|
+ position[i].status +
|
|
|
+ "</div>" +
|
|
|
+ '<div style="padding:6px 20px 20px 20px">地址：' +
|
|
|
+ position[i].address +
|
|
|
+ "</div>" +
|
|
|
+ '<div style="height: 32px;line-height:30px;text-align: center;background: rgba(0,153,0,0.15);color: #009900;cursor:pointer;" onclick="handleDetail(\'' +
|
|
|
+ position[i].id +
|
|
|
+ "')\">查看详情</div>";
|
|
|
+ normalMarker.on("click", _this.markerClick);
|
|
|
+ normalMarker.setExtData({ id: position[i].id }); //给标注添加信息，点击时可以获取
|
|
|
+ }
|
|
|
+ // 一次性将海量点添加到图层
|
|
|
+ labelsLayer.add(labelMarker);
|
|
|
+ this.loading = false; //地图加载完成
|
|
|
},
|
|
|
markerClick(e) {
|
|
|
- //这个只是标注的点击事件
|
|
|
- // this.map.setZoomAndCenter(8,e.target.getPosition()); //点击标点放大地图-缺点，不管放大/缩小多少倍，点击标点都会被缩放到8倍
|
|
|
- this.infoWindow.setContent(e.target.content);
|
|
|
- this.infoWindow.open(this.map, e.target.getPosition());
|
|
|
- },
|
|
|
-
|
|
|
-},
|
|
|
+ //这个只是标注的点击事件
|
|
|
+ // this.map.setZoomAndCenter(8,e.target.getPosition()); //点击标点放大地图-缺点，不管放大/缩小多少倍，点击标点都会被缩放到8倍
|
|
|
+ this.infoWindow.setContent(e.target.content);
|
|
|
+ this.infoWindow.open(this.map, e.target.getPosition());
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
+
|
|
|
<style scoped lang="scss">
|
|
|
+.online-title {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 20px;
|
|
|
+ z-index: 100;
|
|
|
+ span {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: red;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
.info-window {
|
|
|
- position: fixed;
|
|
|
- top: 20%;
|
|
|
- right: 10px;
|
|
|
- z-index: 100;
|
|
|
- background-color: white;
|
|
|
- padding: 10px;
|
|
|
- width: 30vw;
|
|
|
- box-shadow: 0px 5px 10px #ddd
|
|
|
+ position: fixed;
|
|
|
+ top: 20%;
|
|
|
+ right: 10px;
|
|
|
+ z-index: 100;
|
|
|
+ background-color: white;
|
|
|
+ padding: 10px;
|
|
|
+ width: 30vw;
|
|
|
+ box-shadow: 0px 5px 10px #ddd;
|
|
|
}
|
|
|
|
|
|
.bottomFixed {
|
|
|
- height: 50px;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- background: #fff;
|
|
|
- margin-top: 10px;
|
|
|
+ height: 50px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
.close {
|
|
|
- color: #333;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 15px;
|
|
|
- font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
-/deep/{
|
|
|
- .amap-info-contentContainer{
|
|
|
- border-radius: 8px 8px 8px 8px;
|
|
|
+/deep/ {
|
|
|
+ .amap-info-contentContainer {
|
|
|
+ border-radius: 8px 8px 8px 8px;
|
|
|
box-shadow: 0px 1px 8px #ddd;
|
|
|
- padding-bottom:0;
|
|
|
+ padding-bottom: 0;
|
|
|
font-size: 14px;
|
|
|
- color: rgba(0,0,0,0.85);
|
|
|
- width:310px
|
|
|
- }
|
|
|
- .amap-info-content{
|
|
|
- padding:0
|
|
|
- }
|
|
|
- .bottom-center .amap-info-sharp{
|
|
|
- display: none;
|
|
|
- }
|
|
|
-// .el-pager li.active{
|
|
|
-// color: #000;
|
|
|
-// }
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ width: 310px;
|
|
|
+ }
|
|
|
+ .amap-info-content {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .bottom-center .amap-info-sharp {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ // .el-pager li.active{
|
|
|
+ // color: #000;
|
|
|
+ // }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
