|
@@ -1,26 +1,38 @@
|
|
<template>
|
|
<template>
|
|
<div class="zy-template">
|
|
<div class="zy-template">
|
|
- <div class="zy-main-title">设备列表-路牌</div>
|
|
|
|
- <div class="zy-module">
|
|
|
|
- <el-select v-model="selectedNum" filterable clearable placeholder=" " size="mini">
|
|
|
|
- <el-option v-for="item in openNumList" :key="item" :value="item" />
|
|
|
|
- </el-select>
|
|
|
|
- <el-button type="primary" plain size="mini" style="margin-left: 30px;" @click="searchSubmit()">搜索
|
|
|
|
- </el-button>
|
|
|
|
|
|
+ <div class="zy-main-title title">设备列表-路牌</div>
|
|
|
|
+ <div class="zy-module search">
|
|
|
|
+ <el-form ref="form" :model="form" label-width="60px">
|
|
|
|
+ <el-form-item label="设备码:" class="zy-search-form-item">
|
|
|
|
+ <el-select v-model="form.openNum" filterable clearable placeholder=" " size="mini">
|
|
|
|
+ <el-option v-for="item in openNumList" :key="item" :value="item" />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-button type="primary" size="mini" @click="submit">查询</el-button>
|
|
|
|
+ </el-form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="map" class="map">
|
|
<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>定位模式: {{selectedDevice.mode==1?"GPS定位":"基站定位"}}</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 class="map__panel" v-if="device != null">
|
|
|
|
+ <p>设 备 号: {{device.openNum}}</p>
|
|
|
|
+ <p>设 备 组: {{device.groupId}}</p>
|
|
|
|
+ <p>状 态: {{device.status==1?"在线":"离线"}}</p>
|
|
|
|
+ <p>电 量: {{device.battery}}</p>
|
|
|
|
+ <p>温 度: {{device.temp}}</p>
|
|
|
|
+ <p>信号强度: {{device.s4g}}</p>
|
|
|
|
+ <p>唤醒间隔(小时): {{device.wakeInt}}</p>
|
|
|
|
+ <p>阈值: {{device.thresh}}</p>
|
|
|
|
+ <p>X: {{device.x}}</p>
|
|
|
|
+ <p>Y: {{device.y}}</p>
|
|
|
|
+ <p>Z: {{device.z}}</p>
|
|
|
|
+ <p>angleX: {{device.anglex}}</p>
|
|
|
|
+ <p>angleY: {{device.angley}}</p>
|
|
|
|
+ <p>angleZ: {{device.anglez}}</p>
|
|
|
|
+ <p>经 度: {{device.lon}}</p>
|
|
|
|
+ <p>纬 度: {{device.lat}}</p>
|
|
|
|
+ <p>定位模式: {{device.mode==1?"GPS":"基站"}}</p>
|
|
|
|
+ <p>上传时间: {{device.updateTime}}</p>
|
|
|
|
+ <p>位置: {{device.site}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -33,10 +45,12 @@
|
|
map: null, //地图对象
|
|
map: null, //地图对象
|
|
markers: [], //地图中已经有的标记
|
|
markers: [], //地图中已经有的标记
|
|
icon: '', //地图中的图标
|
|
icon: '', //地图中的图标
|
|
- selectedNum: '', //搜索选择的设备号
|
|
|
|
|
|
+ form: {
|
|
|
|
+ openNum: ""
|
|
|
|
+ }, //搜索选择的设备号
|
|
openNumList: [], // 选择框匹配的设备号
|
|
openNumList: [], // 选择框匹配的设备号
|
|
deviceList: [], //全部的设备集合
|
|
deviceList: [], //全部的设备集合
|
|
- selectedDevice: null, //选中的设备对象
|
|
|
|
|
|
+ device: null, //选中的设备对象
|
|
}
|
|
}
|
|
},
|
|
},
|
|
activated() {
|
|
activated() {
|
|
@@ -50,30 +64,34 @@
|
|
*/
|
|
*/
|
|
initMap: function() {
|
|
initMap: function() {
|
|
const option = {
|
|
const option = {
|
|
- zoom: 5
|
|
|
|
|
|
+ zoom: 6
|
|
};
|
|
};
|
|
this.map = new AMap.Map('map', option);
|
|
this.map = new AMap.Map('map', option);
|
|
//默认图标样式
|
|
//默认图标样式
|
|
this.icon = new AMap.Icon({
|
|
this.icon = new AMap.Icon({
|
|
- size: [45, 45],
|
|
|
|
image: "/static/img/point.png",
|
|
image: "/static/img/point.png",
|
|
- imageSize: [45, 45]
|
|
|
|
|
|
+ size: [40, 40],
|
|
|
|
+ imageSize: [40, 40]
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
|
|
/**
|
|
/**
|
|
* 提交搜索
|
|
* 提交搜索
|
|
*/
|
|
*/
|
|
- searchSubmit: function() {
|
|
|
|
- if (this.selectedNum === "") return;
|
|
|
|
|
|
+ submit: function() {
|
|
|
|
+ if (this.form.openNum === "") return;
|
|
this.deviceList.forEach(item => {
|
|
this.deviceList.forEach(item => {
|
|
- if (this.selectedNum === item.deviceId) {
|
|
|
|
- this.map.setZoomAndCenter(11, [parseFloat(item.lon), parseFloat(item.lat)]);
|
|
|
|
- this.selectedDevice = item;
|
|
|
|
|
|
+ if (this.form.openNum === item.openNum) {
|
|
|
|
+ if (item.latGcj != null && item.lonGcj != null) {
|
|
|
|
+ this.map.setZoomAndCenter(16, [item.lonGcj, item.latGcj]);
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.warning("该设备暂无定位信息")
|
|
|
|
+ }
|
|
|
|
+ this.device = item;
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
-
|
|
|
|
|
|
+
|
|
/**
|
|
/**
|
|
* 向地图中添加标记
|
|
* 向地图中添加标记
|
|
*/
|
|
*/
|
|
@@ -89,12 +107,7 @@
|
|
markers.push(that.buildMarker(item))
|
|
markers.push(that.buildMarker(item))
|
|
}
|
|
}
|
|
});
|
|
});
|
|
- var marker = new AMap.Marker({
|
|
|
|
- position: new AMap.LngLat(116.406315,39.908775), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
|
- title: '北京',
|
|
|
|
- offset: new AMap.Pixel(-10, -10),
|
|
|
|
- });
|
|
|
|
- this.map.add(marker);
|
|
|
|
|
|
+ this.map.add(markers);
|
|
this.markers = markers;
|
|
this.markers = markers;
|
|
},
|
|
},
|
|
|
|
|
|
@@ -104,15 +117,14 @@
|
|
buildMarker: function(item) {
|
|
buildMarker: function(item) {
|
|
const that = this;
|
|
const that = this;
|
|
return new AMap.Marker({
|
|
return new AMap.Marker({
|
|
- position: [parseFloat(item.lonGcj), parseFloat(item.latGcj)],
|
|
|
|
|
|
+ position: [item.lonGcj, item.latGcj],
|
|
icon: this.icon, // 添加 Icon 图标 URL
|
|
icon: this.icon, // 添加 Icon 图标 URL
|
|
- // title: item.deviceId,
|
|
|
|
- // animation: "AMAP_ANIMATION_DROP"
|
|
|
|
|
|
+ title: item.deviceId,
|
|
|
|
+ animation: "AMAP_ANIMATION_DROP"
|
|
|
|
+ }).on("click", function() {
|
|
|
|
+ that.map.setZoomAndCenter(16, [item.lonGcj, item.latGcj]);
|
|
|
|
+ that.device = item;
|
|
})
|
|
})
|
|
- // .on("click", function() {
|
|
|
|
- // that.map.setZoomAndCenter(16, [parseFloat(item.lonGcj), parseFloat(item.latGcj)]);
|
|
|
|
- // that.selectedDevice = item;
|
|
|
|
- // })
|
|
|
|
},
|
|
},
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -135,8 +147,21 @@
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
.zy-template {
|
|
.zy-template {
|
|
|
|
+ position: relative;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding-top: 150px;
|
|
height: 100%;
|
|
height: 100%;
|
|
|
|
|
|
|
|
+ .title {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .search {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 40px;
|
|
|
|
+ }
|
|
|
|
+
|
|
.map {
|
|
.map {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
@@ -149,7 +174,7 @@
|
|
position: absolute;
|
|
position: absolute;
|
|
right: 10px;
|
|
right: 10px;
|
|
top: 10px;
|
|
top: 10px;
|
|
- width: 350px;
|
|
|
|
|
|
+ width: 220px;
|
|
padding: 10px;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
border-radius: 5px;
|
|
background: rgba(0, 0, 0, .5);
|
|
background: rgba(0, 0, 0, .5);
|