自动化页面
parent
91c75b6700
commit
58f7b62a21
|
|
@ -43,7 +43,7 @@
|
|||
:bold="true"
|
||||
@change="switchTab"
|
||||
:height="80"></tn-subsection>
|
||||
<swiper class="swiper" :current="current" :acceleration="true" @change="change">
|
||||
<swiper class="swiper" :disable-touch="true" :current="current" :acceleration="true" @change="change" :style="{ height: swiperHeight + 'rpx' }">
|
||||
<swiper-item v-for="item in filmRollerList"
|
||||
:key="item">
|
||||
<view >
|
||||
|
|
@ -55,20 +55,22 @@
|
|||
<tn-button class="param-dialog">参数设置弹窗</tn-button>
|
||||
</view>
|
||||
<!-- F8F7F8-->
|
||||
<view class="condition-content">
|
||||
<view class="term-content">
|
||||
|
||||
<tn-list-cell v-for="(item, index) in conditionList[condition[current]]"
|
||||
:key="index" :index="index" padding="10rpx"
|
||||
:unlined="true" backgroundColor="#F8F7F8" :radius="true">
|
||||
<uni-swipe-action :key="termList[term[current]].length">
|
||||
<uni-swipe-action-item class="swiper-custom" v-for="(item, index) in termList[term[current]]"
|
||||
:key="item.id" :index="index" @click="onDeleteItem($event, item.id)" :right-options="options">
|
||||
<view class="message">
|
||||
<view class="message__left">
|
||||
<tn-avatar shape="square" size="lg" src="https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg"></tn-avatar>
|
||||
<view class="message__tag">温度控制</view>
|
||||
<view class="message__content tn-text-ellipsis">第{{ index+1 }}段</view>
|
||||
<!-- <tn-avatar shape="square" size="lg" src="https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg"></tn-avatar>-->
|
||||
</view>
|
||||
<view class="message__middle" @click="changeTime('start')">
|
||||
<view class="message__middle" @click="changeTime('startTime',index)">
|
||||
<view class="message__name">运行时间开始</view>
|
||||
<view class="message__content tn-text-ellipsis">{{ item.startTime }}</view>
|
||||
</view>
|
||||
<view class="message__middle" @click="changeTime('end')">
|
||||
<view class="message__middle" @click="changeTime('endTime',index)">
|
||||
<view class="message__name">运行时间终止</view>
|
||||
<view class="message__content tn-text-ellipsis">{{ item.endTime }}</view>
|
||||
</view>
|
||||
|
|
@ -77,15 +79,17 @@
|
|||
<tn-button :shadow="true" class="message__right" width="150rpx" height="100rpx"
|
||||
:fontSize="40" shape="icon" margin="10rpx 10rpx">
|
||||
<view class="message__name">温度</view>
|
||||
<view class="message__content tn-text-ellipsis">{{ item.temp }}℃</view>
|
||||
<view class="message__content tn-text-ellipsis">{{ formatValueWithUnit(item.temp, '℃') }}</view>
|
||||
</tn-button>
|
||||
<tn-button :shadow="true" class="message__right" width="150rpx" height="100rpx"
|
||||
:fontSize="40" shape="icon" margin="10rpx 10rpx">
|
||||
<view class="message__name">风口</view>
|
||||
<view class="message__content tn-text-ellipsis">{{ item.vent }}%</view>
|
||||
<view class="message__content tn-text-ellipsis">{{ formatValueWithUnit(item.vent, '%') }}</view>
|
||||
</tn-button>
|
||||
<!-- <view class="message__tag">阶段{{index+1}}</view>-->
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
</view>
|
||||
|
||||
<view class="add-term" @click="addTerm">
|
||||
|
|
@ -98,6 +102,8 @@
|
|||
</view>
|
||||
|
||||
</uni-section>
|
||||
<tn-picker mode="time" v-model="selectTime" :params="timeParams" @confirm="confirmTime"></tn-picker>
|
||||
|
||||
<tn-select title="请选择数据" :safeAreaInsetBottom="true" :searchShow="false" v-model="showSelect" mode="single" :list="tempList" @confirm="confirmTemp"></tn-select>
|
||||
|
||||
<uni-popup ref="inputDialog" mode="center">
|
||||
|
|
@ -139,6 +145,7 @@ import mqttUtil from '@/utils/mqtt';
|
|||
import {addLimit, getAgriByImei, updateLimit} from "../../../api/system/assets/limit";
|
||||
import store from "../../../store";
|
||||
import {addRemark, updateRemark} from "../../../api/system/assets/remark";
|
||||
import {generateUniqueId} from "../../../utils/agri";
|
||||
|
||||
export default {
|
||||
dicts: ['sys_data_map'],
|
||||
|
|
@ -178,6 +185,12 @@ export default {
|
|||
return {}
|
||||
}
|
||||
},
|
||||
limitTimes: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
selectedText: {
|
||||
type: String,
|
||||
default: ""
|
||||
|
|
@ -197,13 +210,22 @@ export default {
|
|||
this.imei = this.value
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 current 变化，切换 tab 时也重新计算高度
|
||||
current: {
|
||||
handler() {
|
||||
this.$nextTick(() => {
|
||||
this.getSwiperHeight();
|
||||
});
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
UniPopup // 注册弹窗组件
|
||||
},
|
||||
mounted() {
|
||||
this.refresh()
|
||||
this.refresh();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -227,19 +249,6 @@ export default {
|
|||
connected: false,
|
||||
imei: '',
|
||||
current: 0,
|
||||
// 新增：限位时间配置
|
||||
limitTimes: {
|
||||
jbkLimit: 0,
|
||||
jbgLimit: 0,
|
||||
jlkLimit: 0,
|
||||
jlgLimit: 0,
|
||||
jm1kLimit: 0,
|
||||
jm1gLimit: 0,
|
||||
jm2kLimit: 0,
|
||||
jm2gLimit: 0,
|
||||
jm3kLimit: 0,
|
||||
jm3gLimit: 0
|
||||
},
|
||||
filmRollerList:["卷膜1", "卷膜2", "卷膜3"],
|
||||
tempList: [
|
||||
{
|
||||
|
|
@ -261,12 +270,35 @@ export default {
|
|||
],
|
||||
showSelect:false,
|
||||
result: "请选择",
|
||||
condition:["jm1", "jm2", "jm3"],
|
||||
conditionList: {
|
||||
term:["jm1", "jm2", "jm3"],
|
||||
termList: {
|
||||
"jm1": [],
|
||||
"jm2": [],
|
||||
"jm3": [],
|
||||
},
|
||||
options: [
|
||||
{
|
||||
text: '删除',
|
||||
icon: 'delete',
|
||||
style: {
|
||||
backgroundColor: '#E83A30'
|
||||
}
|
||||
}
|
||||
],
|
||||
swiperHeight: 800, // 用于动态设置 swiper 高度
|
||||
timeParams: {
|
||||
year: false,
|
||||
month: false,
|
||||
day: false,
|
||||
hour: true,
|
||||
minute: true,
|
||||
second: false
|
||||
},
|
||||
selectTime: false,
|
||||
timeTag: null,
|
||||
timeIndex: null,
|
||||
defaultTime: null,
|
||||
maxTermLength: 5,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -282,8 +314,15 @@ export default {
|
|||
console.info(`选择温度：${event[0]['label']}`)
|
||||
},
|
||||
refresh() {
|
||||
this.termList = {
|
||||
"jm1": [],
|
||||
"jm2": [],
|
||||
"jm3": [],
|
||||
};
|
||||
this.showFlag = !((store.getters && store.getters.name !== 'admin') && this.$auth.hasRole("test"))
|
||||
this.getAgriByImei();
|
||||
this.$nextTick(() => {
|
||||
this.getSwiperHeight(); // 页面初始化时也计算一次
|
||||
});
|
||||
},
|
||||
openDataModal(sensorCard) {
|
||||
if ((store.getters && store.getters.name !== 'admin')
|
||||
|
|
@ -495,14 +534,74 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
updateSwiperHeight() {
|
||||
if (this.termList[this.term[this.current]].length>4) {
|
||||
// 加上 param-setting 和 add-term 的高度，以及一些间距
|
||||
this.swiperHeight = this.swiperHeight + 160;
|
||||
}
|
||||
},
|
||||
getSwiperHeight() {
|
||||
this.swiperHeight = 800;
|
||||
var length = this.termList[this.term[this.current]].length-4;
|
||||
if (length>0) {
|
||||
this.swiperHeight = this.swiperHeight + 160*length ;
|
||||
}
|
||||
},
|
||||
addTerm() {
|
||||
this.conditionList[this.condition[this.current]].push({
|
||||
var tempList = this.termList[this.term[this.current]];
|
||||
if (tempList.length >= this.maxTermLength) {
|
||||
this.$modal.alert(`您设置的条件数量已超过上限！上限为${this.maxTermLength}条，请删除后重试！`,
|
||||
"操作提示");
|
||||
return;
|
||||
}
|
||||
this.termList[this.term[this.current]].push({
|
||||
id: generateUniqueId(),
|
||||
startTime: '请选择时间',
|
||||
endTime: '请选择时间',
|
||||
temp: '选择',
|
||||
vent: '选择'
|
||||
})
|
||||
}
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.updateSwiperHeight(); // 数据更新后，在下一个 tick 更新高度
|
||||
});
|
||||
},
|
||||
// 格式化带单位的数值（通用方法，支持温度/风口等所有字段）
|
||||
formatValueWithUnit(value, unit) {
|
||||
// 容错：如果value是null/undefined，默认显示“选择”
|
||||
if (!value || value === '选择') return '选择';
|
||||
// 确保value是字符串/数字，避免拼接出错
|
||||
return `${value}${unit}`;
|
||||
},
|
||||
onDeleteItem(event, id) {
|
||||
const currentKey = this.term[this.current];
|
||||
const tempList = this.termList[currentKey];
|
||||
const newList = tempList.filter(item => item.id !== id);
|
||||
|
||||
// 1. 先清空当前列表（强制触发组件感知）
|
||||
this.termList[currentKey] = [];
|
||||
// 2. 用$nextTick确保清空后，再赋值新列表
|
||||
this.$nextTick(() => {
|
||||
this.termList = {
|
||||
...this.termList,
|
||||
[currentKey]: newList
|
||||
};
|
||||
// 3. 再次nextTick更新swiper高度
|
||||
this.$nextTick(() => {
|
||||
this.getSwiperHeight();
|
||||
// 可选：关闭滑动删除的展开状态（避免组件样式异常）
|
||||
uni.$emit('uni-swipe-action-hide');
|
||||
});
|
||||
});
|
||||
},
|
||||
changeTime(timeTag, timeIndex) {
|
||||
this.timeTag = timeTag;
|
||||
this.timeIndex = timeIndex;
|
||||
this.selectTime = true;
|
||||
},
|
||||
confirmTime(time) {
|
||||
console.info(this.termList[this.term[this.current]])
|
||||
this.termList[this.term[this.current]][this.timeIndex][this.timeTag] = `${time.hour}:${time.minute}`
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -729,7 +828,6 @@ export default {
|
|||
box-sizing: border-box;
|
||||
border: 2rpx solid rgb(248, 241, 241);
|
||||
border-top: 0;
|
||||
//height: 800rpx;
|
||||
border-bottom-left-radius: 10rpx;
|
||||
border-bottom-right-radius: 10rpx;
|
||||
box-shadow: 8rpx 5rpx 10rpx rgb(233, 231, 239);
|
||||
|
|
@ -756,26 +854,34 @@ export default {
|
|||
margin-left: auto; /* 自动填充左侧空间，将按钮推到最右侧 */
|
||||
}
|
||||
}
|
||||
.condition-content {
|
||||
.term-content {
|
||||
margin: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.tn-list-cell {
|
||||
box-shadow: 8rpx 5rpx 10rpx #D9D9D9;
|
||||
.swiper-custom {
|
||||
box-shadow: 8rpx 5rpx 10rpx #D9D9D9 !important;
|
||||
//border: 2rpx solid #D9D9D9;
|
||||
margin-bottom: 20rpx;
|
||||
background: #F8F7F8;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
.message {
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.message__left {
|
||||
flex:1;
|
||||
flex:3;
|
||||
.message__tag {
|
||||
font-size: 25rpx;
|
||||
margin-bottom: 8rpx;
|
||||
color: #42b3ff;
|
||||
}
|
||||
}
|
||||
.message__middle {
|
||||
text-align: center;
|
||||
flex: 4;
|
||||
}
|
||||
.message__right {
|
||||
|
|
@ -791,6 +897,11 @@ export default {
|
|||
color: #838383;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
//.message__tag {
|
||||
// font-size: 24rpx;
|
||||
// color: #838383;
|
||||
// text-align: center;
|
||||
//}
|
||||
.message__content {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
v-if="currentMode === true"
|
||||
:show="show"
|
||||
:status="status"
|
||||
:limitTimes="limitTimes"
|
||||
:dtu_remark="dtu_remark"
|
||||
:value="value"
|
||||
/>
|
||||
|
|
@ -188,6 +189,9 @@ export default {
|
|||
// this.getAgriList()
|
||||
this.change(this.imei)
|
||||
mqttUtil.setOnMessageCallback(this.ackMessage);
|
||||
if (this.currentMode) {
|
||||
this.$refs.autoPage.refresh();
|
||||
}
|
||||
this.$refs.paging.complete();
|
||||
},
|
||||
getNewSpecialData() {
|
||||
|
|
@ -206,7 +210,9 @@ export default {
|
|||
if ((e === 'A' || e==='B' || e==='C')
|
||||
&& store.getters && store.getters.name === 'admin'
|
||||
&& this.currentMode===false) {
|
||||
if (!this.currentMode) {
|
||||
this.getNewSpecialData(e);
|
||||
}
|
||||
this.mqttConfig.subscribeTopic = `frontend/${clientId}/dtu/862538065276061`;
|
||||
}
|
||||
if (e !== 'A' && e!=='B' && e!=='C') {
|
||||
|
|
@ -216,6 +222,7 @@ export default {
|
|||
var queryParams = {
|
||||
imei: this.imei
|
||||
}
|
||||
if (!this.currentMode) {
|
||||
// 最新温湿度数据
|
||||
findDtuDataByInfo(queryParams).then(response => {
|
||||
Object.keys(response.data).forEach(key => {
|
||||
|
|
@ -224,6 +231,7 @@ export default {
|
|||
this.liveData.temp = "最后更新时间："+response.data.time;
|
||||
this.fontStyle = 'font-size:16px;'
|
||||
})
|
||||
}
|
||||
this.getAgriByImei();
|
||||
// 备注
|
||||
this.getRemarkByImei();
|
||||
|
|
|
|||
|
|
@ -283,7 +283,6 @@ export default {
|
|||
this.getListData();
|
||||
},
|
||||
onDeleteItem(item, agri) {
|
||||
console.info(`点击了${item.content.text},${agri}`)
|
||||
if (item.content.text==='删除') {
|
||||
uni.showModal({
|
||||
title: '操作提示：',
|
||||
|
|
|
|||
|
|
@ -226,3 +226,11 @@ export function getNormalPath(p) {
|
|||
export function blobValidate(data) {
|
||||
return data.type !== 'application/json'
|
||||
}
|
||||
|
||||
// 生成纯数字、无小数点、低重复率的ID
|
||||
// 1. 改造generateUniqueId，返回字符串类型（关键！）
|
||||
export function generateUniqueId() {
|
||||
const timestamp = Date.now();
|
||||
const random = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
|
||||
return (timestamp + random).toString(); // 转成字符串，避免数字精度丢失
|
||||
}
|
||||
Loading…
Reference in New Issue