root
/
agri-app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

微信小程序适配

master
xce 2026-01-15 16:56:54 +08:00
parent 2c224682d2
commit d01b66256b
6 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,5 +1,5 @@
{
"dependencies": {
"mqtt": "^3.0.0"
"mqtt": "^2.18.8"
}
}

4
pages/control/index.vue
View File

@ -23,7 +23,7 @@
>
<text class="data" :style="fontStyle">
{{ liveData[item.key] }}
<p v-if="isEffectiveValue(liveData[item.key])" class="tempStyle">℃</p>
<text v-if="isEffectiveValue(liveData[item.key])" class="tempStyle">℃</text>
</text>
<text class="data">{{ item.label }}</text>
</view>
@ -38,7 +38,7 @@
>
<text class="data" :style="fontStyle">
{{ liveData[item.key] }}
<p v-if="isEffectiveValue(liveData[item.key])" class="humiStyle"> %RH</p>
<text v-if="isEffectiveValue(liveData[item.key])" class="humiStyle"> %RH</text>
</text>
<text class="data">{{ item.label }}</text>
</view>

6
pages/login.vue
View File

@ -12,7 +12,9 @@
</view>
<view class="input-item flex align-center" style="position: relative;">
<view class="iconfont icon-password icon"></view>
<input v-model="loginForm.password" :type="isShowPwd?'text':'password'" class="input" placeholder="请输入密码" maxlength="20" />
<input v-if="!isShowPwd"
v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
<input v-else v-model="loginForm.password" type="text" class="input" placeholder="请输入密码" maxlength="20" />
<!-- 替换为 uni-icons 密码图标 -->
<uni-icons
class="pwd-icon"
@ -146,7 +148,7 @@
const subscribeList = [`dtu/864865085016294/up`, `dtu/864536071808560/up`,`dtu/864865085008135/up`,`dtu/862538065276939/up`]
if (store.getters && store.getters.name === 'admin') {
subscribeList.push(`dtu/862538063921866/up`);
subscribeList.push(`dtu/862538065276061/up`);
}
// 4. 调用App.vue的loginSuccess方法，初始化MQTT
app.loginSuccess(token, subscribeList)

4
pages/mine/mqtt/index.vue
View File

@ -231,14 +231,14 @@
</template>
<script>
import mqtt from 'mqtt/dist/mqtt.min'
import mqtt from 'mqtt/dist/mqtt'
export default {
data() {
return {
// MQTT配置
mqttConfig: {
broker: 'ws://122.51.109.52:9001/mqtt', // 公共测试服务器
broker: 'wxs://mq.xiaoces.com:443/mqtt', // 公共测试服务器
clientId: 'uniapp_mqtt_' + Math.random().toString(16).substr(2, 8),
username: 'admin',
password: 'Admin#12345678',

53
pages/mine/require/index.vue
View File

@ -5,7 +5,6 @@
<!-- 基础表单校验：缩小字体+一行两列布局 -->
<uni-forms
ref="valiForm"
label-width="50px"
label-position="left"
:modelValue="form"
style="font-size: 10px;"
@ -18,7 +17,7 @@
placeholder="请输入标题搜索"
/>
</uni-forms-item>
<uni-forms-item label="详情:" label-width="35px" name="detail" class="form-item">
<uni-forms-item label="详情:" name="detail" class="form-item">
<uni-easyinput
v-model="form.detail"
placeholder="请输入详情搜索"
@ -34,7 +33,7 @@
:localdata="priorityList"
/>
</uni-forms-item>
<uni-forms-item label="进度:" label-width="35px" name="progress" class="form-item">
<uni-forms-item label="进度:" name="progress" class="form-item">
<uni-data-select
v-model="form.progress"
:localdata="progressList"
@ -102,13 +101,13 @@
>
<uni-tr>
<uni-th align="center" class="ui-th" sortable width="200rpx" @sort-change="idSort">需求单号</uni-th>
<uni-th align="center" width="200rpx" class="ui-th">需求标题</uni-th>
<uni-th align="center" width="300rpx" class="ui-th">需求标题</uni-th>
<uni-th align="center" width="240rpx" class="ui-th">需求详情</uni-th>
<uni-th align="center" width="140rpx" @sort-change="prioritySort" sortable class="ui-th">优先级</uni-th>
<uni-th align="center" width="140rpx" class="ui-th">进度</uni-th>
<uni-th align="center" width="200rpx" class="ui-th">需求类型</uni-th>
<uni-th align="center" width="200rpx" class="ui-th">经办人名称</uni-th>
<uni-th align="center" class="ui-th">操作</uni-th>
<uni-th align="center" width="300rpx" class="ui-th">操作</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in tableData" :key="index" style="height: 30px; line-height: 30px;">
@ -487,15 +486,49 @@ page {
background: #fff;
}
/* 表单一行两列布局核心样式 */
/* 表单一行两列布局核心样式 - 优化版 */
.form-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 10rpx 10rpx 10rpx;
width: 100%;
/* 新增：清除flex布局默认的基线对齐，避免垂直错位 */
align-items: flex-start;
/* 新增：计算宽度时包含内边距/边框，避免溢出 */
box-sizing: border-box;
}
.form-item {
display: flex;
align-items: center;
width: 48%; /* 保留你的48%宽度，留2%间距 */
box-sizing: border-box;
margin: 0 !important; /* 保留清除默认间距 */
/* 新增适配uni-forms-item的关键样式 */
padding: 0; /* 清除组件默认内边距 */
min-height: auto; /* 取消组件默认最小高度，避免高度不一致 */
}
/* 新增：适配uni-data-select组件，防止下拉框溢出 */
.form-item .uni-data-select {
width: 100%; /* 下拉选择器占满form-item宽度 */
flex: 1; /* 让选择器自适应剩余空间 */
}
/* 新增：统一label标签样式，避免文字错位 */
.form-item .uni-forms-item__label {
/* 根据你的需求调整label宽度，比如固定120rpx */
flex: 0 0 120rpx;
padding: 0; /* 清除默认内边距 */
margin-right: 10rpx; /* label和选择器之间留间距 */
}
/* 新增：统一表单项内容区域样式 */
.form-item .uni-forms-item__content {
flex: 1; /* 内容区域占满剩余宽度 */
padding: 0; /* 清除默认内边距 */
}
/* 核心：父容器flex布局，通过justify-content: space-between实现左右分布 */
.btn-group {
display: flex;
@ -553,14 +586,6 @@ page {
height: 30px;
}
.form-item {
display: flex;
align-items: center;
width: 48%; /* 每个表单项占48%宽度，留间距 */
box-sizing: border-box;
margin: 0 !important; /* 清除默认间距 */
}
/* 弹窗样式 */
.dialog-container {
background: #fff;

2
utils/mqtt.js
View File

@ -86,7 +86,7 @@ export function connectMqtt() {
try {
// 创建客户端实例（同步操作）
// #ifndef MP-WEIXIN
MQTT_CONFIG.server = 'wss://mq.xiaoces.com:443/mqtt'
MQTT_CONFIG.server = 'wxs://mq.xiaoces.com:443/mqtt'
// #endif
console.info("mqttState.connect",mqttState)
mqttState.client = mqtt.connect(MQTT_CONFIG.server, mqttState.options)