This commit is contained in:
Iruka 2024-09-27 18:48:24 +08:00
parent e58cc90113
commit 0a9ec18bc0
3 changed files with 333 additions and 242 deletions

73
App.vue
View File

@ -7,11 +7,8 @@
data() {
return {
indexData: new indexUtil(this.indexDataHandler), //
dc: new dc(),
mqtt: new mqttUtil(),
mqttObj: {
topics: []
},
dc: new dc(), //
mqtt: new mqttUtil(this.mqttMsgHandler), //Mqtt
}
},
globalData: {},
@ -22,8 +19,8 @@
// #endif
// mqtt
uni.$on("mqtt-link", () => {
this.mqttLink();
uni.$on("mqtt-link", (userId) => {
this.mqttLink(userId);
});
// mqtt
uni.$on("mqtt-subscribes", topics => {
@ -56,56 +53,26 @@
this.dc.setValves(this.indexData.selectItem.id, this.indexData.device.waterOutlets);
}
uni.hideLoading();
// console.error("indexDataHandler_2:", {
// indexData: this.indexData,
// dc: this.dc,
// })
console.error("indexDataHandler_2:", {
indexData: this.indexData,
dc: this.dc,
})
},
setTime: function() {
console.error(this.globalData.num);
// setTimeout(() => {
// this.globalData.num++
// console.error(this.globalData.num);
// this.setTime();
// }, 1000)
},
mqttLink() {
// wx.connectSocket promisify SocketTask
uni.connectSocket = (function(connectSocket) {
return function(options) {
console.log(options)
options.success = options.success || function() {}
return connectSocket.call(this, options)
}
})(uni.connectSocket)
//Mqtt
mqttLink(userId) {
console.error("mqttLink");
// #ifdef H5
this.mqtt.link();
this.mqtt.client.on("connect", error => {
console.log("连接成功")
console.error("client:", this.mqtt.client);
})
this.mqtt.client.on("error", error => {
console.log("连接异常")
})
this.mqtt.client.on("reconnect", error => {
console.log("重新连接")
})
this.mqtt.client.on("message", (topic, message) => {
console.log("接受消息")
console.log("message", message.toString())
this.mqttSendMsg(message);
})
// #endif
this.mqtt.link(userId);
},
mqttSubscribes(topics) {
this.mqttObj.topics = topics;
console.error("mqttSubscribes:", topics);
//Mqtt
mqttEnd() {
this.mqtt.over();
},
mqttSendMsg(msg) {
uni.$emit("mqtt-msg", msg);
//Mqtt
mqttMsgHandler(topic, data) {
console.error("mqttMsgHandler:", {
topic: topic,
data: data,
});
},
}
}

View File

@ -97,7 +97,9 @@
<text>基站</text>
</view>
<view class="fixed" style="width:calc(100% - 30%); justify-content: flex-end;">
<view class="iconfont icon-xh icon"></view>
<view class="iconfont icon-xh icon"
:class="[ mqtt.connected ? 'xh_green':'xh_red' ]">
</view>
<view @click.stop="">
<u-button type="success" size="small" text="一键刷新" />
</view>
@ -166,15 +168,16 @@
<u-row v-if="item.deviceId">
<u-col span="4">
<view class="fixed">
<text class="font-green"></text>
<view>{{ item.rowKey }}</view>
<text
:class="[item.device.custom.online ? 'font-green':'font-red']"></text>
{{ item.rowKey }}
</view>
</u-col>
<u-col span="5">
<view class="battery-container">
<text>60</text>
<view class="battery-level battery-level-60">
</view>
<text>{{ item.device.custom.battery.value }}</text>
<view class="battery-level"
:style="[`width:${item.device.custom.battery.value}%`]" />
</view>
</u-col>
<u-col span="3" style="align-items: flex-end;">
@ -188,7 +191,11 @@
<view class="card-title">
<u-row>
<u-col span="2">
<view><text class="font-green"></text>{{ item2.rowKey }}</view>
<view>
<text
:class="[item2.device.custom.online ? 'font-green':'font-red']"></text>
{{ item2.rowKey }}
</view>
</u-col>
<u-col span="5">
<view class="fixed">
@ -212,15 +219,23 @@
</u-row>
</view>
<view class="control">
<!-- 三通阀 -->
<u-row
v-if="item2.device.deviceTypeId == 2 || item2.device.deviceTypeId == 3">
<u-col span="3" style=" align-items: flex-end;"
@click="angleSliderShow">
<view class="buttons">
<view class="btn fixed active">
<view class="btn v-btn fixed active ">
<text></text>
<text>(999)</text>
<!-- <view class="iconfont icon-suoding icon"></view> -->
<text class="load-text">(999)</text>
<text class="load-text"
v-if="!item2.device.custom.btnPreload && item2.device.custom.btnState.closeAll.loading && item2.device.custom.ct.endS >= 0"
:class="item2.device.custom.ct.endS > 0 ? '' : 'loading-time-red'">
{{ item2.device.custom.ct.endS > 0 ? `(${item2.device.custom.ct.endS})` : "超时" }}
</text>
<view v-if="!item2.device.custom.btnControllable.open1"
class="iconfont icon-suoding icon">
</view>
</view>
</view>
<u-line-progress height="8" :showText="false" :percentage="60"
@ -231,54 +246,75 @@
<u-col span="6">
<view class="valve">
<view>
<view class="btn fixed">
<u-button>全开</u-button>
<!-- <view class="btn v-btn2 fixed">
<text>全开</text>
</view>
<text class="load-text">(超时)</text>
<view
v-if="!item2.device.custom.btnControllable.openAll"
class="iconfont icon-suoding icon">
</view>
</view> -->
</view>
<view class="btn-img">
<view class="text">
<view class="left">{{ item2.device.custom.p1 }}</view>
<view class="top"></view>
<view class="middle"
v-show="!item2.device.custom.online">离线</view>
v-show="!item2.device.custom.online">
{{ item2.device.custom.showMask.text }}
</view>
<view class="right">{{ item2.device.custom.p2 }}</view>
<view class="bottom"></view>
</view>
<image :src="item2.device.custom.showImg" mode="widthFix" />
</view>
<view>
<view class="btn fixed">
<view class="btn v-btn2 fixed">
<text>全关</text>
<text class="load-text">(超时)</text>
<view
v-if="!item2.device.custom.btnControllable.closeAll"
class="iconfont icon-suoding icon">
</view>
</view>
</view>
</view>
</u-col>
<u-col span="3">
<view class="buttons">
<view class="btn fixed">
<text></text>
<text>(超时)</text>
<!-- <view class="iconfont icon-suoding icon"></view> -->
<view class="btn v-btn fixed activeing">
<text></text>
<text class="load-text">(超时)</text>
<view v-if="!item2.device.custom.btnControllable.open2"
class="iconfont icon-suoding icon">
</view>
</view>
</view>
</u-col>
</u-row>
<!-- 五通阀 -->
<u-row v-if="item2.device.deviceTypeId == 13">
<u-col span="3" style=" align-items: flex-end;">
<view class="buttons">
<view class="btn fixed active">
<view class="btn v-btn fixed active">
<text></text>
<text>0.00</text>
<view class="iconfont icon-suoding icon"></view>
<text class="load-text">(超时)</text>
<view v-if="!item2.device.custom.btnControllable.open1"
class="iconfont icon-suoding icon">
</view>
</view>
</view>
</u-col>
<u-col span="6">
<view class="valve">
<view>
<view class="btn fixed">
<view class="btn v-btn fixed">
<text></text>
<text class="load-text">(超时)</text>
<view v-if="!item2.device.custom.btnControllable.open2"
class="iconfont icon-suoding icon">
</view>
</view>
</view>
<view class="btn-img">
@ -286,7 +322,9 @@
<view class="left">{{ item2.device.custom.p[0] }}</view>
<view class="top">{{ item2.device.custom.p[1] }}</view>
<view class="middle"
v-show="!item2.device.custom.online">离线</view>
v-show="!item2.device.custom.online">
{{ item2.device.custom.showMask.text }}
</view>
<view class="right">{{ item2.device.custom.p[2] }}
</view>
<view class="bottom">{{ item2.device.custom.p[3] }}
@ -295,24 +333,32 @@
<image :src="item2.device.custom.showImg" mode="widthFix" />
</view>
<view>
<view class="btn fixed">
<view class="btn v-btn fixed">
<text></text>
<text class="load-text">(超时)</text>
<view v-if="!item2.device.custom.btnControllable.open4"
class="iconfont icon-suoding icon">
</view>
</view>
</view>
</view>
</u-col>
<u-col span="3">
<view class="buttons">
<view class="btn fixed">
<view class="btn v-btn fixed">
<text></text>
<text>0.00</text>
<view class="iconfont icon-suoding icon"></view>
<text class="load-text">(超时)</text>
<view v-if="!item2.device.custom.btnControllable.open3"
class="iconfont icon-suoding icon">
</view>
</view>
</view>
</u-col>
</u-row>
<view class="font-red">
<view class="iconfont icon-guzhang icon"></view>角度4故障
<view class="font-red" v-if="item2.device.custom.showMask.show">
<view class="iconfont icon-guzhang icon">
{{item2.device.custom.showMask.text}}
</view>
</view>
</view>
</view>
@ -320,84 +366,7 @@
{{ item2.rowKey }}
</view>
</view>
<view class="card-grey" v-if="false">
<view class="card-title">
<u-row>
<u-col span="2">
<view><text class="font-green"></text>1-2</view>
</u-col>
<u-col span="5">
<view class="fixed">
<view class="battery-container">
<text>60</text>
<view class="battery-level battery-level-60">
</view>
</view>
<view>
<view class="iconfont icon-wendu icon"></view>26.2
</view>
</view>
</u-col>
<u-col span="5" style="align-items: flex-end;">
<view class="fixed">
<u-button type="success" size="mini" text="刷新"
icon="reload"></u-button>
</view>
</u-col>
</u-row>
</view>
<view class="control">
<u-row>
<u-col span="3" style=" align-items: flex-end;">
<view class="buttons">
<view class="btn fixed active">
<text></text>
<text>0.00</text>
<view class="iconfont icon-suoding icon"></view>
</view>
</view>
</u-col>
<u-col span="6">
<view class="valve">
<view>
<view class="btn fixed">
<text>全开</text>
</view>
</view>
<view class="btn-img">
<view class="text5">
<view class="left">-99.63</view>
<view class="top">-99.63</view>
<view class="middle">离线</view>
<view class="right">-99.63</view>
<view class="bottom">-99.63</view>
</view>
<!-- <image src="../static/images/fiveValves/valve5.png"
mode="widthFix">
</image> -->
</view>
<view>
<view class="btn fixed">
<text>全关</text>
</view>
</view>
</view>
</u-col>
<u-col span="3">
<view class="buttons">
<view class="btn fixed">
<text></text>
<text>0.00</text>
<view class="iconfont icon-suoding icon"></view>
</view>
</view>
</u-col>
</u-row>
</view>
</view>
</view>
</u-collapse-item>
</u-collapse>
</view>
@ -412,6 +381,14 @@
<!-- 角度 -->
<custom-angle-slider ref="refAngleSlider" mode="bottom" @close="" @confirm="angleSliderConfirm" />
</view>
<button @click="mqttLink">mqttLink</button>
<button @click="mqttEnd">mqttEnd</button>
<button @click="mqttGet">获取信息</button>
<view>
<p>connected:{{mqtt.connected}}</p>
<!-- <p>reconnecting:{{mqtt.client.reconnecting}}</p>
<p>结果{{mqtt.client && (mqtt.client.connected && !mqtt.client.reconnecting)}}</p> -->
</view>
</template>
<script>
@ -420,23 +397,27 @@
export default {
data() {
return {
user: store.state.user.user,
isSticky: false, //
value: false,
indexData: getApp().indexData,
dc: getApp().dc,
// show: false,
mqtt: getApp().mqtt,
isLandChange: false,
}
},
onLoad() {
console.error("onLoad")
// uni.$emit("mqtt-link");
// uni.$emit("mqtt-link", this.user.userId);
// getApp().mqttLink(this.user.userId);
uni.$off("notify-update-land");
uni.$on("notify-update-land", (data) => {
console.error("index监听地块更新", data)
this.isLandChange = true;
});
},
onShow() {
// #ifdef APP-PLUS
@ -454,6 +435,15 @@
}
},
methods: {
mqttLink() {
getApp().mqttLink(this.user.userId);
},
mqttEnd() {
getApp().mqttEnd();
},
mqttGet() {
console.error("mqtt", this.mqtt)
},
//
openLand() {
this.$refs.refLand.open();
@ -689,6 +679,19 @@
.u-row {
margin-bottom: 10px;
}
.btn.v-btn {
width: 80px;
}
.btn.v-btn2 {
font-size: 12px;
width: 90px;
}
.buttons .load-text {
font-size: 12px;
}
}
}
@ -707,6 +710,14 @@
text {
font-size: 32rpx;
}
// .icon-xh.xh_green {
// color: #39ac4f
// }
// .icon-xh.xh_red {
// color: #e60012
// }
}
.sf-title {
@ -833,28 +844,11 @@
transition: width 0.5s;
}
/* 不同的电量级别 */
.battery-level-100 {
width: 100%;
.font-green {
color: #39ac4f
}
.battery-level-80 {
width: 80%;
}
.battery-level-60 {
width: 60%;
}
.battery-level-40 {
width: 40%;
}
.battery-level-20 {
width: 20%;
}
.battery-level-0 {
width: 0%;
.font-red {
color: #e60012
}
</style>

View File

@ -1,66 +1,142 @@
import * as commonUtils from "@/utils/common.js"
// #ifdef H5
import mqtt from "mqtt/dist/mqtt"
// import mqtt from "@/store/modules/mqtt.js"
import store from "@/store"
// #endif
// #ifdef APP-PLUS
import {
connect,
subscribe,
unSubscribe,
getConfig,
onConnectLost,
onReconnect,
disConnect,
publishMessage
} from "@/uni_modules/zy-mqtt";
// #endif
//封装一个类可直接cv
class MqttUtil {
//创建公共变量
static url //mqtt地址
static userId //userId
static clientId //clientId
static options //clientId
static client = null; //mqtt公共变量
static url;
static options;
static client;
static connected = false;
static reconnectCount = 0;
//接收创建来的数据
constructor() {
constructor(eventHandler) {
this.url = import.meta.env.VITE_BASE_MQTT;
// this.userId = store.state.user.user.userId;
this.clientId = "mqtt_app_" + this.getUUID();
this.eventHandler = eventHandler;
}
//初始化参数
init(userId) {
let clientId = `mqtt_app_${userId}_${this.getUUID()}`;
let username = "app_client";
let password = "app_client@2023";
let keepalive = 10; //保持连接的心跳间隔,单位为秒。
let connectTimeout = 30; //接超时的时间,单位为秒。
// #ifdef H5
this.options = {
qos: 1, //QoS 级别
clean: false, // true: 清除会话, false: 保留会话
connectTimeout: 3000, // 超时时间
keepAlive: 60,
username: "app_client",
password: "app_client@2023",
clientId: this.clientId
clientId: clientId, // string 客户端的唯一标识符。
username: username, // string 连接时的用户名。
password: password, // string 连接时的密码。
keepalive: keepalive, // number 60 保持连接的心跳间隔,单位为秒。
clean: false, // boolean true 是否清除会话信息。false 时,断线重连后可继续接收未到达的消息。
reconnectPeriod: 1000, // number 1000 断开后重连的时间间隔,单位为毫秒。当设置为 0 以后将取消自动重连
connectTimeout: connectTimeout * 1000, // number 30 * 1000 连接超时的时间,单位为毫秒。
// will: { // object 无 客户端的遗嘱消息。当客户端异常断开时broker 将会发送该消息。
// topic: '', // 发布消息的主题
// payload: '', // 要发布的消息
// qos: 0, // 消息等级
// retain: false // 保留消息标识
// },
// protocolId: "MQTT", // string MQTT 协议名称。
// protocolVersion: 4, // number MQTT 协议版本4 表示 MQTT v3.1.1。
resubscribe: true, // boolean true 断线重连后是否自动重新订阅之前的主题。
}
// #endif
// #ifdef APP-PLUS
this.options = {
host: this.url, // 主机ip
clientId: clientId, // 客户端id
userName: username, // 用户名
password: password, // 密码
heartBeat: keepalive, // 可选,默认60秒, 心跳
cleanSession: false, // 可选,默认false,是否开启持续会话
automaticReconnect: true, // 可选,默认true,是否自动重连
timeOut: connectTimeout, // 可选,默认30秒,连接超时时间
keepAlive: false, // 可选,是否保活(息屏保活), 对于Android O及以上版本如果你的应用处于后台你需要将服务转变为前台服务来避免系统在一定时间后杀死服务。这需要通过创建一个持续在通知栏显示的通知来实现。
// notificationContentText, // 可选,通知内容,默认(应用正在后台运行,这有助于提供定制的服务和改善用户体验。)
// notificationContentTitle, // 可选,通知标题,默认(后台应用持续运行)
};
// #endif
}
//监听消息回调
onEventHandler(topic, data) {
// console.error("topic", topic);
// console.error("data", data);
this.eventHandler(topic, data);
// var message = JSON.stringify(res);
// // console.error("message:",message);
// if (x.includes("jsy/iot/control/")) {
// // uni.$emit("mqtt-message-refresh", message)
// } else {
// if (message !== "" && message !== null) {
// let str = JSON.parse(message)
// uni.$emit("mqtt-message", str)
// }
// }
}
getUUID() {
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
}
// #ifdef H5
//mqtt链接
link() {
if (this.client == null || this.client.connented == false) {
let client = mqtt.connect(this.url, this.options);
if (this.client == null) {
this.client = client;
link(userId) {
if (!this.options) {
this.init(userId);
}
console.error("link:", this.client)
console.error("开始连接")
this.client.on("connect", error => {
console.log("connect")
})
this.client.on("error", error => {
console.log("error")
})
this.client.on("reconnect", error => {
console.log("reconnect")
})
this.client.on("message", (topic, message) => {
console.log("message", message.toString())
})
}
}
}
//重新连接
reconnect() {
if (this.client.connected) {
this.client.end(); // 关闭当前连接
}
this.client.connect(this.options); // 重新连接
this.client = mqtt.connect(this.url, this.options);
this.client.on("connect", error => {
this.connected = this.client.connected && !this.client.reconnecting;
this.reconnectCount = 0;
console.error("消息连接成功:", this.client)
})
this.client.on("reconnect", error => {
this.connected = this.client.connected && !this.client.reconnecting;
this.reconnectCount++;
console.error(`消息重连中${this.reconnectCount}`, this.client)
})
this.client.on("error", error => {
console.log("error", error)
})
this.client.on("message", (topic, message) => {
console.log("接受消息")
console.log("message", message.toString())
this.onEventHandler(topic, message);
})
this.client.on("close", function() {
console.log("已断开连接1")
this.client = null;
this.connected = false;
this.reconnectCount = 0;
});
}
//结束链接
over() {
this.client.end();
this.client = null;
this.client.end(false, null, () => {});
}
//订阅主题
subscribes(topic) {
@ -82,25 +158,79 @@ class MqttUtil {
}
})
}
//收到的消息
get() {
this.mqtt.client.on("message", (topic, message) => {
console.log("接受消息")
console.log("message", message.toString())
//发送消息
send(message) {
// this.client.publish("test", JSON.stringify(message), res => {
// console.log(res)
// })
}
// #endif
// #ifdef APP-PLUS
//mqtt链接
link(userId) {
if (!this.options) {
this.init(userId);
}
console.error("link:")
console.error("开始连接")
// 先连接mqtt
connect(this.options, (res) => {
console.error("连接成功:", res);
if (res.code == 200) {
this.connected = true;
this.reconnectCount = 0;
console.error("消息连接成功:")
}
})
// 监听连接丢失函数
onConnectLost((res) => {
console.error("连接丢失的原因:", res.message);
this.connected = false;
})
// 监听自动重新连接函数
onReconnect((res) => {
// this.connected = this.client.connected && !this.client.reconnecting;
this.connected = true;
this.reconnectCount++;
console.error(`消息重连中${this.reconnectCount}`)
})
}
//结束链接
over() {
disConnect((res) => {
this.connected = false;
this.reconnectCount = 0;
})
}
//订阅主题
subscribes(topics) {
if (topics && topics.length) {
topics.forEach(x => {
subscribe(topic, 0, (res) => {
console.log("接受消息")
console.log("message", message.toString())
var message = JSON.stringify(res);
this.onEventHandler(topic, message);
})
});
}
}
//取消订阅
unsubscribes(topic) {
if (topic && topic.length) {
topic.forEach(x => {
unSubscribe(x, (res) => {})
});
}
}
//发送消息
send(message) {
this.client.publish("test", JSON.stringify(message), res => {
console.log(res)
})
}
getUUID() {
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
// publishMessage('your/topic', 2, message, (res) => {
// })
}
// #endif
}
export default MqttUtil