131 lines
3.5 KiB
Vue
131 lines
3.5 KiB
Vue
<template>
|
||
<!-- 顶部导航栏 -->
|
||
<custom-nav-bar :left="false" leftText="" @leftClick="" :title="title">
|
||
<template v-slot:left>
|
||
<view @click="$refs.landRef.open()">地块</view>
|
||
</template>
|
||
<template v-slot:right>
|
||
<view class="fixed">
|
||
<view align="right" class="icon iconfont icon-scan" @click="toQRCode"></view>
|
||
</view>
|
||
</template>
|
||
</custom-nav-bar>
|
||
<!-- 地图容器 -->
|
||
<view ref="mapContainer"></view>
|
||
|
||
<!-- 地块选择 -->
|
||
<custom-select-land ref="landRef" :data="ijs.companys" :defaultSelect="ijs.land" @getLand="getLand"
|
||
@select="landChange" />
|
||
</template>
|
||
|
||
<script>
|
||
import store from "@/store"
|
||
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
map: null,
|
||
user: store.state.user.user,
|
||
title: "",
|
||
ijs: getApp().ijs, // 首页公共js
|
||
dc: getApp().dc, // 设备控制公共代码
|
||
mqttshow: false, // h5端手动链接mqtt按钮显示
|
||
mqttConnected: false, // mqtt链接状态
|
||
}
|
||
},
|
||
onLoad() {
|
||
console.error("onLoad")
|
||
// 监听mqtt链接状态
|
||
uni.$off("mqtt-connected");
|
||
uni.$on("mqtt-connected", (e) => {
|
||
this.mqttConnected = e;
|
||
});
|
||
|
||
},
|
||
onShow() {
|
||
this.title = this.ijs?.land?.landName || "田间";
|
||
|
||
// 监听控制角度弹窗通知
|
||
uni.$off("open-angle-slider");
|
||
uni.$on("open-angle-slider", (e) => {
|
||
console.error("打开角度选择：", e)
|
||
this.$refs.refAngleSlider.show(e.title, e.extra, e.value, e.other);
|
||
});
|
||
},
|
||
onHide() {
|
||
uni.$off("index-showLoading");
|
||
uni.$off("open-angle-slider");
|
||
},
|
||
onPageScroll(e) {},
|
||
mounted() {
|
||
this.initMap();
|
||
},
|
||
methods: {
|
||
initMap() {
|
||
// 动态加载天地图JSAPI
|
||
const script = document.createElement('script');
|
||
script.src = 'https://api.tianditu.gov.cn/api?v=4.0&tk=16bef4eafae69a2af0ef268fbf64e3c9';
|
||
script.onload = () => {
|
||
// 地图初始化
|
||
const map = new T.Map('mapContainer');
|
||
// 设置地图中心点和级别
|
||
map.centerAndZoom(new T.LngLat(116.404, 39.915), 10);
|
||
// 添加缩放控件
|
||
map.addControl(new T.Control.Zoom());
|
||
// 添加比例尺控件
|
||
map.addControl(new T.Control.Scale());
|
||
// 添加地图类型切换控件
|
||
map.addControl(new T.Control.LayerSwitcher());
|
||
};
|
||
document.head.appendChild(script);
|
||
},
|
||
mqttLink() {
|
||
getApp().mqttLink(this.user.userId);
|
||
},
|
||
mqttEnd() {
|
||
getApp().mqttEnd();
|
||
},
|
||
mqttSubscribes() {
|
||
getApp().mqttSubscribes();
|
||
},
|
||
// 地块选择回调
|
||
landChange(e) {
|
||
this.title = e.landName;
|
||
},
|
||
// 获取地块信息
|
||
getLand(e) {
|
||
this.ijs.getLand(e.node).then(res => {
|
||
this.$refs.landRef.addLand(e, res.data);
|
||
});
|
||
},
|
||
// 去扫码
|
||
toQRCode() {
|
||
var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
|
||
|
||
mpaasScanModule.mpaasScan({
|
||
// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
|
||
'scanType': ['qrCode', 'barCode'],
|
||
// 是否隐藏相册，默认false不隐藏
|
||
'hideAlbum': false,
|
||
//ios需要设置这个参数，只支持中英文 zh-Hans、en，默认中文
|
||
'language': 'en',
|
||
//相册选择照片识别错误提示(ios)
|
||
'failedMsg': '未识别到二维码，请重试',
|
||
//Android支持全屏需要设置此参数
|
||
'screenType': 'full'
|
||
}, (ret) => {
|
||
console.error("ret:", ret);
|
||
if (ret.resp_code == 1000) {
|
||
// bingdingData.value.privateSeal = ret.resp_result;
|
||
// showModal.value = true
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
</style> |