|
@@ -1,228 +1,184 @@
|
|
|
<template>
|
|
|
- <div class="zy-template">
|
|
|
- <div class="zy-module search">
|
|
|
- <el-select v-model="selectedNum" filterable clearable placeholder="请输入设备号" :filter-method="remoteMethod" size="mini">
|
|
|
- <el-option v-for="item in options" :key="item" :value="item" />
|
|
|
- </el-select>
|
|
|
- <el-button type="primary" plain size="mini" style="margin-left: 30px;" @click="searchSubmit()">搜索</el-button>
|
|
|
- </div>
|
|
|
- <div id="map" class="map">
|
|
|
- <div class="map__panel" v-if="selectedDevice != null">
|
|
|
- <p>设 备 号: {{selectedDevice.deviceId}}</p>
|
|
|
- <p>电 量: {{selectedDevice.batteryNum}}</p>
|
|
|
- <p>信号强度: {{selectedDevice.signalNum}}</p>
|
|
|
- <p>定位模式: {{parseMode(selectedDevice.mode)}}</p>
|
|
|
- <p>经 度: {{selectedDevice.lon}}</p>
|
|
|
- <p>纬 度: {{selectedDevice.lat}}</p>
|
|
|
- <p>移动速度: {{selectedDevice.speed}}</p>
|
|
|
- <p>卫星颗数: {{selectedDevice.num}}</p>
|
|
|
- <p>上传时间: {{selectedDevice.dataCreateTime}}</p>
|
|
|
- <p>位置: {{selectedDevice.site}}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="zy-template">
|
|
|
+ <div class="zy-module search">
|
|
|
+ <el-select v-model="selectedNum" filterable clearable placeholder="请输入设备号" :filter-method="remoteMethod"
|
|
|
+ size="mini">
|
|
|
+ <el-option v-for="item in options" :key="item" :value="item"/>
|
|
|
+ </el-select>
|
|
|
+ <el-button type="primary" plain size="mini" style="margin-left: 30px;" @click="searchSubmit()">搜索
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div id="map" class="map">
|
|
|
+ <div class="map__panel" v-if="selectedDevice != null">
|
|
|
+ <p>设 备 号: {{selectedDevice.deviceId}}</p>
|
|
|
+ <p>电 量: {{selectedDevice.batteryNum}}</p>
|
|
|
+ <p>信号强度: {{selectedDevice.signalNum}}</p>
|
|
|
+ <p>定位模式: {{parseMode(selectedDevice.mode)}}</p>
|
|
|
+ <p>经 度: {{selectedDevice.lon}}</p>
|
|
|
+ <p>纬 度: {{selectedDevice.lat}}</p>
|
|
|
+ <p>移动速度: {{selectedDevice.speed}}</p>
|
|
|
+ <p>卫星颗数: {{selectedDevice.num}}</p>
|
|
|
+ <p>上传时间: {{selectedDevice.dataCreateTime}}</p>
|
|
|
+ <p>位置: {{selectedDevice.site}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- map: null, //地图对象
|
|
|
- markers: [], //地图中已经有的标记
|
|
|
- icon: '', //地图中的图标
|
|
|
- selectedNum: '', //搜索选择的设备号
|
|
|
- options: [], // 选择框匹配的设备号
|
|
|
- deviceNumList: [], //全部的设备号集合
|
|
|
- deviceList: [], //全部的设备集合
|
|
|
- selectedDevice: null, //选中的设备对象
|
|
|
- }
|
|
|
- },
|
|
|
- activated: function() {
|
|
|
- this.initMap();
|
|
|
- this.getLocationList();
|
|
|
- },
|
|
|
- methods: {
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ map: null, //地图对象
|
|
|
+ markers: [], //地图中已经有的标记
|
|
|
+ icon: '', //地图中的图标
|
|
|
+ selectedNum: '', //搜索选择的设备号
|
|
|
+ options: [], // 选择框匹配的设备号
|
|
|
+ deviceNumList: [], //全部的设备号集合
|
|
|
+ deviceList: [], //全部的设备集合
|
|
|
+ selectedDevice: null, //选中的设备对象
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ this.initMap();
|
|
|
+ this.getLocationList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
|
|
|
- /**
|
|
|
- * 初始化地图
|
|
|
- */
|
|
|
- initMap: function() {
|
|
|
- const option = {
|
|
|
- zoom: 5
|
|
|
- };
|
|
|
- this.map = new AMap.Map('map', option);
|
|
|
- //默认图标样式
|
|
|
- this.icon = new AMap.Icon({
|
|
|
- size: [45, 45],
|
|
|
- image: "/static/img/point.png",
|
|
|
- imageSize: [45, 45],
|
|
|
- })
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 初始化地图
|
|
|
+ */
|
|
|
+ initMap: function () {
|
|
|
+ const option = {
|
|
|
+ zoom: 5
|
|
|
+ };
|
|
|
+ this.map = new AMap.Map('map', option);
|
|
|
+ //默认图标样式
|
|
|
+ this.icon = new AMap.Icon({
|
|
|
+ size: [45, 45],
|
|
|
+ image: "/static/img/point.png",
|
|
|
+ imageSize: [45, 45],
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 构建 地图标记物
|
|
|
- */
|
|
|
- buildMarker: function(item) {
|
|
|
- const that = this;
|
|
|
- return new AMap.Marker({
|
|
|
- position: [parseFloat(item.lon), parseFloat(item.lat)],
|
|
|
- icon: this.icon, // 添加 Icon 图标 URL
|
|
|
- title: item.deviceId,
|
|
|
- animation: "AMAP_ANIMATION_DROP"
|
|
|
- }).on("click", function() {
|
|
|
- that.map.setZoomAndCenter(11, [parseFloat(item.lon), parseFloat(item.lat)]);
|
|
|
- that.selectedDevice = item;
|
|
|
- })
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 构建 地图标记物
|
|
|
+ */
|
|
|
+ buildMarker: function (item) {
|
|
|
+ const that = this;
|
|
|
+ return new AMap.Marker({
|
|
|
+ position: [parseFloat(item.lon), parseFloat(item.lat)],
|
|
|
+ icon: this.icon, // 添加 Icon 图标 URL
|
|
|
+ title: item.deviceId,
|
|
|
+ animation: "AMAP_ANIMATION_DROP"
|
|
|
+ }).on("click", function () {
|
|
|
+ that.map.setZoomAndCenter(11, [parseFloat(item.lon), parseFloat(item.lat)]);
|
|
|
+ that.selectedDevice = item;
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- *下拉框模糊匹配方法
|
|
|
- */
|
|
|
- remoteMethod: function(query) {
|
|
|
- if (query !== '') {
|
|
|
- this.options = this.deviceNumList.filter(item => {
|
|
|
- return item.indexOf(query) > -1;
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.options = [];
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 提交搜索
|
|
|
- */
|
|
|
- searchSubmit: function() {
|
|
|
- if (this.selectedNum == "") return;
|
|
|
- this.deviceList.forEach(item => {
|
|
|
- if (this.selectedNum === item.deviceId) {
|
|
|
- this.map.setZoomAndCenter(11, [parseFloat(item.lon), parseFloat(item.lat)]);
|
|
|
- this.selectedDevice = item;
|
|
|
- return;
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 向地图中添加标记
|
|
|
- */
|
|
|
- addMarkers: function(devices) {
|
|
|
- const that = this;
|
|
|
- const markers = [];
|
|
|
- //清空原来的标记点
|
|
|
- if (this.markers != null && this.markers.length != 0) {
|
|
|
- this.map.remove(this.markers);
|
|
|
- }
|
|
|
- devices.forEach(item => {
|
|
|
- markers.push(that.buildMarker(item))
|
|
|
- })
|
|
|
- this.map.add(markers);
|
|
|
- this.markers = markers;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 转换定位模式
|
|
|
- */
|
|
|
- parseMode: function(mode) {
|
|
|
- if (mode == 0) return "无法定位";
|
|
|
- if (mode == 1) return "北斗定位";
|
|
|
- if (mode == 2) return "基站定位";
|
|
|
- if (mode == 3) return "GPS定位";
|
|
|
- },
|
|
|
+ /**
|
|
|
+ *下拉框模糊匹配方法
|
|
|
+ */
|
|
|
+ remoteMethod: function (query) {
|
|
|
+ if (query !== '') {
|
|
|
+ this.options = this.deviceNumList.filter(item => {
|
|
|
+ return item.indexOf(query) > -1;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.options = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 提交搜索
|
|
|
+ */
|
|
|
+ searchSubmit: function () {
|
|
|
+ if (this.selectedNum === "") return;
|
|
|
+ this.deviceList.forEach(item => {
|
|
|
+ if (this.selectedNum === item.deviceId) {
|
|
|
+ this.map.setZoomAndCenter(11, [parseFloat(item.lon), parseFloat(item.lat)]);
|
|
|
+ this.selectedDevice = item;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 向地图中添加标记
|
|
|
+ */
|
|
|
+ addMarkers: function (devices) {
|
|
|
+ const that = this;
|
|
|
+ const markers = [];
|
|
|
+ //清空原来的标记点
|
|
|
+ if (this.markers != null && this.markers.length !== 0) {
|
|
|
+ this.map.remove(this.markers);
|
|
|
+ }
|
|
|
+ devices.forEach(item => {
|
|
|
+ markers.push(that.buildMarker(item))
|
|
|
+ });
|
|
|
+ this.map.add(markers);
|
|
|
+ this.markers = markers;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 转换定位模式
|
|
|
+ */
|
|
|
+ parseMode: function (mode) {
|
|
|
+ if (mode === 0) return "无法定位";
|
|
|
+ if (mode === 1) return "北斗定位";
|
|
|
+ if (mode === 2) return "基站定位";
|
|
|
+ if (mode === 3) return "GPS定位";
|
|
|
+ },
|
|
|
|
|
|
- getLocationList: function() {
|
|
|
- this.deviceList = [{
|
|
|
- id: '1',
|
|
|
- deviceId: "qwe",
|
|
|
- batteryNum: 100,
|
|
|
- signalNum: 50,
|
|
|
- mode: 1,
|
|
|
- lon: "116.4073963",
|
|
|
- lat: "39.9041999",
|
|
|
- site: "河北省廊坊市安次区永华道街道安次区永华道办事处社区卫生中心尚华城",
|
|
|
- speed: 0,
|
|
|
- num: 7,
|
|
|
- dataCreateTime: "2021-03-11 12:22:22"
|
|
|
- }, {
|
|
|
- id: '2',
|
|
|
- deviceId: "asd",
|
|
|
- batteryNum: 90,
|
|
|
- signalNum: 50,
|
|
|
- mode: 1,
|
|
|
- lon: "115.4073963",
|
|
|
- lat: "41.9041999",
|
|
|
- site: "河北省廊坊市安次区永华道街道安次区永华道办事处社区卫生中心尚华城",
|
|
|
- speed: 0,
|
|
|
- num: 7,
|
|
|
- dataCreateTime: "2021-03-11 12:22:22"
|
|
|
- }, {
|
|
|
- id: '3',
|
|
|
- deviceId: "zxc",
|
|
|
- batteryNum: 80,
|
|
|
- signalNum: 50,
|
|
|
- mode: 1,
|
|
|
- lon: "113.4073963",
|
|
|
- lat: "35.102131",
|
|
|
- site: "河北省廊坊市安次区永华道街道安次区永华道办事处社区卫生中心尚华城",
|
|
|
- speed: 0,
|
|
|
- num: 7,
|
|
|
- dataCreateTime: "2021-03-11 12:22:22"
|
|
|
- }, {
|
|
|
- id: '4',
|
|
|
- deviceId: "qaz",
|
|
|
- batteryNum: 70,
|
|
|
- signalNum: 50,
|
|
|
- mode: 1,
|
|
|
- lon: "117.102131",
|
|
|
- lat: "40.102131",
|
|
|
- site: "河北省廊坊市安次区永华道街道安次区永华道办事处社区卫生中心尚华城",
|
|
|
- speed: 0,
|
|
|
- num: 7,
|
|
|
- dataCreateTime: "2021-03-11 12:22:22"
|
|
|
- }];
|
|
|
- this.deviceNumList = this.deviceList.map(item => {
|
|
|
- return item.deviceId;
|
|
|
- });
|
|
|
- this.addMarkers(this.deviceList);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ getLocationList: function () {
|
|
|
+ this.$http.Get(this.$global.getLatestLocation, {}).then(res => {
|
|
|
+ this.deviceList = res.data;
|
|
|
+ this.deviceNumList = this.deviceList.map(item => {
|
|
|
+ return item.deviceId;
|
|
|
+ });
|
|
|
+ this.addMarkers(this.deviceList);
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .zy-template {
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding-top: 60px;
|
|
|
+ .zy-template {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding-top: 60px;
|
|
|
|
|
|
- .search {
|
|
|
- text-align: center;
|
|
|
- top: 0;
|
|
|
- padding: 10px 20px;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
+ .search {
|
|
|
+ text-align: center;
|
|
|
+ top: 0;
|
|
|
+ padding: 10px 20px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
|
|
|
- .map {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
+ .map {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
|
|
|
- &__panel {
|
|
|
- color: white;
|
|
|
- box-sizing: border-box;
|
|
|
- z-index: 9;
|
|
|
- position: absolute;
|
|
|
- right: 10px;
|
|
|
- top: 10px;
|
|
|
- width: 220px;
|
|
|
- padding: 10px;
|
|
|
- border-radius: 5px;
|
|
|
- background: rgba(0, 0, 0, .5);
|
|
|
+ &__panel {
|
|
|
+ color: white;
|
|
|
+ box-sizing: border-box;
|
|
|
+ z-index: 9;
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 10px;
|
|
|
+ width: 350px;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: rgba(0, 0, 0, .5);
|
|
|
|
|
|
- & p {
|
|
|
- font-size: 14px;
|
|
|
- line-height: 20px;
|
|
|
- margin: 0 0 3px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ & p {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ margin: 0 0 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|