359 lines
7.6 KiB
Vue
359 lines
7.6 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>
|
||
<!-- 控制弹出 -->
|
||
<button class="button" type="primary" @click="toggle('bottom')"><text class="button-text">底部</text></button>
|
||
<uni-popup ref="popup" @change="change">
|
||
<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
|
||
<view class="card-grey">
|
||
<view class="card-title">
|
||
<u-row>
|
||
<u-col span="2">
|
||
<view>
|
||
<text class="font-green">●</text>
|
||
A1-1
|
||
</view>
|
||
</u-col>
|
||
<u-col span="5">
|
||
<view class="fixed">
|
||
<view class="iconfont icon-wendu icon" style="float: left;margin-left: 5px;">
|
||
</view>
|
||
</view>
|
||
</u-col>
|
||
<u-col span="5" style="align-items: flex-end;">
|
||
<view class="fixed">
|
||
<u-button type="success" size="mini" text="刷新" />
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view class="control">
|
||
<u-row>
|
||
<u-col span="3">
|
||
<u-button type="success">
|
||
<span>60</span>
|
||
①
|
||
<i class="iconfont icon-suoding"></i>
|
||
</u-button>
|
||
|
||
</u-col>
|
||
<u-col span="6">
|
||
<view class="valve">
|
||
<view>
|
||
<u-button type="success">
|
||
<span>60</span>
|
||
①
|
||
<i class="iconfont icon-suoding"></i>
|
||
</u-button>
|
||
</view>
|
||
<view class="btn-img">
|
||
<view class="text">
|
||
<view class="left">
|
||
111
|
||
</view>
|
||
<view class="top">22</view>
|
||
<view class="middle">
|
||
离线
|
||
</view>
|
||
<view class="right">
|
||
333
|
||
</view>
|
||
<view class="bottom">444</view>
|
||
</view>
|
||
<image src="../static/images/valves/3/valve3_open.gif" mode="widthFix" />
|
||
</view>
|
||
<view>
|
||
<u-button type="success">
|
||
<span>60</span>
|
||
①
|
||
<i class="iconfont icon-suoding"></i>
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</u-col>
|
||
<u-col span="3">
|
||
<u-button type="success">
|
||
<span>60</span>
|
||
①
|
||
<i class="iconfont icon-suoding"></i>
|
||
</u-button>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 地块选择 -->
|
||
<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
|
||
}
|
||
})
|
||
},
|
||
// 控制弹出
|
||
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> |