|
|
@@ -4,11 +4,11 @@
|
|
|
:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap"
|
|
|
@callouttap='callouttap'></map>
|
|
|
<view class="cover-box ddflex">
|
|
|
- <view style="justify-content: center;" class="ddflex fflex">
|
|
|
+ <!-- <view style="justify-content: center;" class="ddflex fflex">
|
|
|
<image class="cover-icon" src="../static/images/baojing.png"></image>
|
|
|
<view>报警</view>
|
|
|
- </view>
|
|
|
- <view style="justify-content: center;" class="ddflex fflex">
|
|
|
+ </view> -->
|
|
|
+ <view style="justify-content: center;" class="ddflex fflex" @click="daohang">
|
|
|
<image class="cover-icon" src="../static/images/daohang.png"></image>
|
|
|
<view>导航</view>
|
|
|
</view>
|
|
|
@@ -22,46 +22,25 @@
|
|
|
</view>
|
|
|
<view class="ddflex info-card-item">
|
|
|
<view class="fflex">
|
|
|
- 名称: ZX03D209685
|
|
|
- </view>
|
|
|
- <view class="fflex info-card-item-right">
|
|
|
- 状态:静止(30秒)
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="ddflex info-card-item">
|
|
|
- <view class="fflex">
|
|
|
- 编号: 016881209685
|
|
|
+ 设备名称: {{info.user_name}}
|
|
|
</view>
|
|
|
<view class="fflex info-card-item-right">
|
|
|
- 设防状态:撤防
|
|
|
+ 设备类型:{{info.product_type}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="ddflex info-card-item">
|
|
|
<view class="fflex">
|
|
|
- 控制: 已通电
|
|
|
- </view>
|
|
|
- <view class="fflex info-card-item-right">
|
|
|
- 定位类型:LBS
|
|
|
+ 设备编号: {{info.sim_id}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="ddflex info-card-item">
|
|
|
<view class="fflex">
|
|
|
- 电压: 66.99V(主电接通)
|
|
|
+ 设备定位时间: {{getTime(info.datetime)}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="ddflex info-card-item">
|
|
|
<view class="fflex">
|
|
|
- 通信: 2023-04-0311:08:16
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="ddflex info-card-item">
|
|
|
- <view class="fflex">
|
|
|
- 定位: 2023-04-03 11:07:46
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="ddflex info-card-item">
|
|
|
- <view class="fflex">
|
|
|
- 地址:广东省东莞市兴育路东一街2号
|
|
|
+ 地址:{{info.address}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -69,155 +48,80 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import util from "../../utils/util.js";
|
|
|
const app = getApp();
|
|
|
const req = require("../../utils/request.js");
|
|
|
+ // 引入SDK核心类
|
|
|
+ var QQMapWX = require("../../utils/qqmap.js");
|
|
|
|
|
|
export default {
|
|
|
components: {},
|
|
|
props: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- map:null,
|
|
|
+ id: null,
|
|
|
+ map: null,
|
|
|
+ info: {},
|
|
|
latitude: 23.106574, //纬度
|
|
|
longitude: 113.324587, //经度
|
|
|
scale: 13, //缩放级别
|
|
|
- marker: [{
|
|
|
- id: 0,
|
|
|
- latitude: 23.13065, //纬度
|
|
|
- longitude: 113.3274, //经度
|
|
|
- iconPath: '', //显示的图标
|
|
|
- rotate: 0, // 旋转度数
|
|
|
- width: 20, //宽
|
|
|
- height: 30, //高
|
|
|
- // title:'我在这里',//标注点名
|
|
|
- alpha: 0.5, //透明度
|
|
|
- callout: { //自定义标记点上方的气泡窗口 点击有效
|
|
|
- content: '天宝大厦', //文本
|
|
|
- color: '#ffffff', //文字颜色
|
|
|
- fontSize: 14, //文本大小
|
|
|
- borderRadius: 15, //边框圆角
|
|
|
- borderWidth: '10',
|
|
|
- bgColor: '#e51860', //背景颜色
|
|
|
- display: 'ALWAYS', //常显
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- id: 1234597,
|
|
|
- latitude: 23.106574, //纬度
|
|
|
- longitude: 113.324587, //经度
|
|
|
- iconPath: '', //显示的图标
|
|
|
- rotate: 0, // 旋转度数
|
|
|
- width: 20, //宽
|
|
|
- height: 30, //高
|
|
|
- // title:'我在这里',//标注点名
|
|
|
- alpha: 0.5, //透明度
|
|
|
- // label:{//为标记点旁边增加标签 //因背景颜色H5不支持
|
|
|
- // color:'red',//文本颜色
|
|
|
- // },
|
|
|
- callout: { //自定义标记点上方的气泡窗口 点击有效
|
|
|
- content: '广州塔', //文本
|
|
|
- color: '#ffffff', //文字颜色
|
|
|
- fontSize: 14, //文本大小
|
|
|
- borderRadius: 15, //边框圆角
|
|
|
- borderWidth: '10',
|
|
|
- bgColor: '#e51860', //背景颜色
|
|
|
- display: 'ALWAYS', //常显
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- latitude: 23.1338, //纬度
|
|
|
- longitude: 113.33052, //经度
|
|
|
- iconPath: '', //显示的图标
|
|
|
- rotate: 0, // 旋转度数
|
|
|
- width: 20, //宽
|
|
|
- height: 30, //高
|
|
|
- alpha: 0.5, //透明度
|
|
|
- callout: { //自定义标记点上方的气泡窗口 点击有效
|
|
|
- content: '德隆大厦', //文本
|
|
|
- color: '#ffffff', //文字颜色
|
|
|
- fontSize: 14, //文本大小
|
|
|
- borderRadius: 15, //边框圆角
|
|
|
- borderWidth: '10',
|
|
|
- bgColor: '#e51860', //背景颜色
|
|
|
- display: 'ALWAYS', //常显
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- latitude: 23.136455, //纬度
|
|
|
- longitude: 113.329002, //经度
|
|
|
- iconPath: '', //显示的图标
|
|
|
- rotate: 0, // 旋转度数
|
|
|
- width: 20, //宽
|
|
|
- height: 30, //高
|
|
|
- alpha: 0.5, //透明度
|
|
|
- callout: { //自定义标记点上方的气泡窗口 点击有效
|
|
|
- content: '羊城国际商贸中心', //文本
|
|
|
- color: '#ffffff', //文字颜色
|
|
|
- fontSize: 14, //文本大小
|
|
|
- borderRadius: 15, //边框圆角
|
|
|
- borderWidth: '10',
|
|
|
- bgColor: '#e51860', //背景颜色
|
|
|
- display: 'ALWAYS', //常显
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- latitude: 23.224781, //纬度
|
|
|
- longitude: 113.293911, //经度
|
|
|
- iconPath: '', //显示的图标
|
|
|
- rotate: 0, // 旋转度数
|
|
|
- width: 20, //宽
|
|
|
- height: 30, //高
|
|
|
- alpha: 0.5, //透明度
|
|
|
- callout: { //自定义标记点上方的气泡窗口 点击有效
|
|
|
- content: '天瑞广场A座', //文本
|
|
|
- color: '#ffffff', //文字颜色
|
|
|
- fontSize: 16, //文本大小
|
|
|
- borderRadius: 15, //边框圆角
|
|
|
- borderWidth: '12',
|
|
|
- bgColor: '#e51860', //背景颜色
|
|
|
- display: 'ALWAYS', //常显
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- id: 5,
|
|
|
- latitude: 23.072726, //纬度
|
|
|
- longitude: 113.277921, //经度
|
|
|
- iconPath: '', //显示的图标
|
|
|
- rotate: 0, // 旋转度数
|
|
|
- width: 20, //宽
|
|
|
- height: 30, //高
|
|
|
- alpha: 0.5, //透明度
|
|
|
- callout: { //自定义标记点上方的气泡窗口 点击有效
|
|
|
- content: '大米和小米儿童康复(广州盈丰)中心', //文本
|
|
|
- color: '#ffffff', //文字颜色
|
|
|
- fontSize: 14, //文本大小
|
|
|
- borderRadius: 15, //边框圆角
|
|
|
- borderWidth: '8',
|
|
|
- bgColor: '#e51860', //背景颜色
|
|
|
- display: 'ALWAYS', //常显
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
+ marker: [],
|
|
|
|
|
|
|
|
|
}
|
|
|
},
|
|
|
- onLoad(options) {
|
|
|
+ async onLoad(options) {
|
|
|
+ this.id = options.id
|
|
|
+ await this.getMap()
|
|
|
this.toLocation()
|
|
|
},
|
|
|
onShow() {
|
|
|
|
|
|
},
|
|
|
onReady() {
|
|
|
-
|
|
|
- },
|
|
|
- mounted(){
|
|
|
+
|
|
|
},
|
|
|
+ mounted() {},
|
|
|
computed: {},
|
|
|
methods: {
|
|
|
+ getMap() {
|
|
|
+ return new Promise((r, j) => {
|
|
|
+ req.getRequest('/admin/v2/battery/bmsLocation', {
|
|
|
+ batteryId: this.id
|
|
|
+ }, res => {
|
|
|
+ // this.info = res
|
|
|
+ for (let key in res.key) {
|
|
|
+ let index = res.key[key]
|
|
|
+ this.info[key] = res.records[0][index]
|
|
|
+ }
|
|
|
+ this.marker = [{
|
|
|
+ id: 0,
|
|
|
+ latitude: this.info.weidu, //纬度
|
|
|
+ longitude: this.info.jingdu, //经度
|
|
|
+ iconPath: '', //显示的图标
|
|
|
+ rotate: 0, // 旋转度数
|
|
|
+ width: 20, //宽
|
|
|
+ height: 30, //高
|
|
|
+ // title:'我在这里',//标注点名
|
|
|
+ alpha: 0.5, //透明度
|
|
|
+ callout: { //自定义标记点上方的气泡窗口 点击有效
|
|
|
+ content: this.info.user_name, //文本
|
|
|
+ color: '#ffffff', //文字颜色
|
|
|
+ fontSize: 14, //文本大小
|
|
|
+ borderRadius: 15, //边框圆角
|
|
|
+ borderWidth: '10',
|
|
|
+ bgColor: '#e51860', //背景颜色
|
|
|
+ display: 'ALWAYS', //常显
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ this.getAddress()
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title:this.info.user_name
|
|
|
+ })
|
|
|
+ r()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
//地图点击事件
|
|
|
markertap(e) {
|
|
|
console.log("===你点击了标记点===", e)
|
|
|
@@ -228,16 +132,46 @@
|
|
|
},
|
|
|
toLocation() {
|
|
|
console.log('地图控件回到原位');
|
|
|
- req.getLocation((res) =>{
|
|
|
- console.log('当前位置:' ,res);
|
|
|
- console.log('当前位置的经度:' + res.longitude);
|
|
|
- console.log('当前位置的纬度:' + res.latitude);
|
|
|
- this.longitude = res.longitude;
|
|
|
- this.latitude = res.latitude;
|
|
|
- this.map = uni.createMapContext("map", this);
|
|
|
- this.map.moveToLocation()
|
|
|
- })
|
|
|
- }
|
|
|
+ req.getLocation((res) => {
|
|
|
+ console.log('当前位置:', res);
|
|
|
+ console.log('当前位置的经度:' + res.longitude);
|
|
|
+ console.log('当前位置的纬度:' + res.latitude);
|
|
|
+ this.longitude = res.longitude;
|
|
|
+ this.latitude = res.latitude;
|
|
|
+ this.map = uni.createMapContext("map", this);
|
|
|
+ this.map.moveToLocation()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getAddress() {
|
|
|
+ QQMapWX.initMap();
|
|
|
+ this.location = {
|
|
|
+ longitude: this.info.jingdu,
|
|
|
+ latitude: this.info.weidu
|
|
|
+ }
|
|
|
+ QQMapWX.reverseGeocoder(location, data => {
|
|
|
+ this.info.address = data.address
|
|
|
+ console.log('解析后的地址地址数据:', data);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getTime(time) {
|
|
|
+ if (!time) return ''
|
|
|
+ return util.formatTime(new Date(parseInt(time))).t1
|
|
|
+ },
|
|
|
+ daohang() {
|
|
|
+ let plugin = requirePlugin('routePlan');
|
|
|
+ let key = req.public.mapLBSKEY; //使用在腾讯位置服务申请的key
|
|
|
+ let referer = '皮小店商家端'; //调用插件的app的名称
|
|
|
+ // console.log("名称====" + referer);
|
|
|
+ let endPoint = JSON.stringify({
|
|
|
+ //终点
|
|
|
+ 'name': this.info.user_name,
|
|
|
+ 'latitude': this.info.weidu,
|
|
|
+ 'longitude':this.info.jingdu,
|
|
|
+ });
|
|
|
+ uni.navigateTo({
|
|
|
+ url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
|