349 lines
7.6 KiB
Vue
349 lines
7.6 KiB
Vue
<template>
|
||
<view class="content" style="width: 100%;height: calc(100vh - 50px);" v-show="mapshow">
|
||
<web-view ref="mapRef" :webview-styles="webviewStyles" src="/static/html/index-map.html"
|
||
@message="getMessage" />
|
||
</view>
|
||
<!-- 地块选择 -->
|
||
<custom-select-land ref="landRef" :data="ijs.companys" :defaultSelect="ijs.land" @getLand="getLand"
|
||
@select="landChange" style="z-index: 99999;" />
|
||
</template>
|
||
<script>
|
||
import store from "@/store"
|
||
export default {
|
||
data() {
|
||
return {
|
||
webviewStyles: {
|
||
width: "100%",
|
||
height: "100%"
|
||
},
|
||
mapshow: true,
|
||
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;
|
||
// });
|
||
|
||
// #ifdef H5
|
||
const that = this;
|
||
window.addEventListener('message', function(e) {
|
||
that.getMessage({
|
||
detail: {
|
||
data: [e.data.data.arg]
|
||
}
|
||
});
|
||
})
|
||
// #endif
|
||
},
|
||
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: {
|
||
//监听web-view传递的数据
|
||
getMessage(e) {
|
||
const that = this;
|
||
const parameter = e.detail.data[0];
|
||
console.error("App收到的消息:", JSON.stringify(parameter));
|
||
switch (parameter.action) {
|
||
case 'onLoad': //初始化完成
|
||
const mapkey = import.meta.env.VITE_APP_TIAN_DI_TU_KEY;
|
||
const centerPoint = [87.624947, 43.791789]; //默认乌鲁木齐
|
||
that.sendHtmlData("loadMap", {
|
||
key: mapkey,
|
||
centerPoint: centerPoint,
|
||
});
|
||
break;
|
||
case 'select-land': //初始化完成
|
||
console.error("select-land2")
|
||
that.showPopup();
|
||
// that.mapshow = false;
|
||
// that.$refs.landRef.open();
|
||
// uni.showModal({
|
||
// title: '提示',
|
||
// content: '啊实打实的',
|
||
// success: function(res) {}
|
||
// });
|
||
break;
|
||
case 'map-navigation': //地图导航
|
||
const coordinate = JSON.parse(parameter.data);
|
||
that.openAmapNavigation(coordinate[1], coordinate[0], "地块地址");
|
||
break;
|
||
case 'uni-modal': //确认提示框
|
||
uni.showModal({
|
||
title: parameter.data?.title || '提示',
|
||
content: parameter.data?.content || '',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
that.sendHtmlData("marker", parameter);
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
});
|
||
break;
|
||
case 'uni-toast': //消息提示
|
||
uni.showToast({
|
||
title: parameter.data,
|
||
icon: "none"
|
||
})
|
||
break;
|
||
|
||
}
|
||
},
|
||
//给web-view传参
|
||
sendHtmlData(action, data) {
|
||
let obj = {
|
||
action: action,
|
||
data: data
|
||
};
|
||
// #ifdef H5
|
||
const iframe = document.querySelector('iframe');
|
||
iframe.contentWindow.postMessage(obj);
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
const currentWebview = this.$scope.$getAppWebview().children()[0];
|
||
currentWebview.evalJS(`VUEPageMsg(${JSON.stringify(obj)})`);
|
||
// #endif
|
||
},
|
||
showPopup() {
|
||
uni.navigateTo({
|
||
url: '/pages/popup/index-popup'
|
||
})
|
||
},
|
||
|
||
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
|
||
}
|
||
})
|
||
},
|
||
// 控制弹出
|
||
toggle(type) {
|
||
this.type = type
|
||
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
|
||
this.$refs.popup.open(type)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.uni-popup {
|
||
z-index: 1000;
|
||
}
|
||
|
||
// 水阀列表title
|
||
.card-grey {
|
||
border-radius: 10px 10px 0 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.sf-title {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
padding: 10px 0;
|
||
|
||
.text {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.icon {
|
||
vertical-align: top;
|
||
margin-right: 5px;
|
||
font-size: 44rpx;
|
||
color: #39ac4f;
|
||
}
|
||
}
|
||
|
||
.font-green {
|
||
color: #39ac4f !important;
|
||
}
|
||
|
||
.font-red {
|
||
color: #e60012 !important;
|
||
}
|
||
|
||
/* 首页阀门列表 */
|
||
.control {
|
||
padding: 20px 10px;
|
||
|
||
.u-button {
|
||
width: 100% !important;
|
||
min-width: 77px;
|
||
}
|
||
|
||
.u-line-progress {
|
||
min-width: 77px;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
font-size: 12rpx;
|
||
margin: 10px;
|
||
}
|
||
|
||
|
||
.valve {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.timeout {
|
||
color: red !important;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.btn-img {
|
||
width: 160px;
|
||
margin: 15px;
|
||
position: relative;
|
||
|
||
img {
|
||
width: 100%;
|
||
}
|
||
|
||
.text,
|
||
.text5 {
|
||
&>view {
|
||
position: absolute;
|
||
z-index: 2;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
.left {
|
||
left: 0;
|
||
top: calc(50% - 17px);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.top {
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.middle {
|
||
font-size: 24px;
|
||
top: calc(50% - 18px);
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: #e60012;
|
||
text-align: center;
|
||
}
|
||
|
||
.right {
|
||
right: 0;
|
||
top: calc(50% - 17px);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.bottom {
|
||
bottom: 0;
|
||
right: 50%;
|
||
transform: translateX(50%);
|
||
}
|
||
}
|
||
|
||
.text5 {
|
||
.left {
|
||
left: 0;
|
||
top: calc(50% - 4px);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.middle {
|
||
top: calc(50% - 5px);
|
||
}
|
||
|
||
.right {
|
||
right: 0;
|
||
top: calc(50% - 4px);
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |