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

自动化ui

feasure
lld 2026-02-25 23:23:40 +08:00
parent 0ecae4ec9e
commit 100e916332
1 changed files with 185 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
pages/home/control/automatic.vue
View File

@ -36,7 +36,13 @@
</view>
</view>
</view>
<!---->
</uni-section>
<uni-section title="自动化参数配置" titleFontSize="16px" type="line"
v-if="value!== 1 && !['862538065276939','A','B','C'].includes(value)">
<template v-slot:right>
<button @click="saveAutoTerm" style="margin-right: 10rpx" class="cu-btn bg-cyan shadow">保存</button>
</template>
<!--自动化设置-->
<view class="film-roller">
<tn-subsection :list="filmRollerList"
:current="current"
@ -48,23 +54,23 @@
:key="item">
<view >
<view class="param-setting">
<tn-button @click="showSelect=true">参考温度：{{ result }}
<view class="temp-dialog" @click="showSelect=true">参考温度：{{ termList[term[current] + 'Param'].refTemp }}
<uni-icons type="down"/>
</tn-button>
<!-- <button class="cu-btn line-cyan round shadow" @click="showSelect=true">参考温度：{{ result }}</button>-->
<tn-button class="param-dialog">参数设置弹窗</tn-button>
</view>
<!-- <button class="cu-btn line-cyan round shadow" @click="showSelect=true">参考温度：{{ result }}</button>-->
<text @click="openParamDialog" class="param-dialog">参数设置弹窗</text>
</view>
<!-- F8F7F8-->
<!-- F8F7F8-->
<view class="term-content">
<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">
:key="item.id" :index="index" @click="onDeleteItem($event, item.id)" :right-options="options">
<view class="message">
<view class="message__left">
<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>-->
<!-- <tn-avatar shape="square" size="lg" src="https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg"></tn-avatar>-->
</view>
<view class="message__middle" @click="changeTime('startTime',index)">
<view class="message__name">运行时间开始</view>
@ -74,36 +80,34 @@
<view class="message__name">运行时间终止</view>
<view class="message__content tn-text-ellipsis">{{ item.endTime }}</view>
</view>
<!-- <tn-button backgroundColor="#01BEFF" :plain="true" class="message__right" width="150rpx" height="100rpx"-->
<!-- :fontSize="40" shape="icon" margin="10rpx 10rpx">-->
<!-- <tn-button backgroundColor="#01BEFF" :plain="true" class="message__right" width="150rpx" height="100rpx"-->
<!-- :fontSize="40" shape="icon" margin="10rpx 10rpx">-->
<tn-button :shadow="true" class="message__right" width="150rpx" height="100rpx"
:fontSize="40" shape="icon" margin="10rpx 10rpx">
:fontSize="40" shape="icon" margin="10rpx 10rpx" @click="openSlider('temp', index)">
<view class="message__name">温度</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">
:fontSize="40" shape="icon" margin="10rpx 10rpx" @click="openSlider('vent', index)">
<view class="message__name">风口</view>
<view class="message__content tn-text-ellipsis">{{ formatValueWithUnit(item.vent, '%') }}</view>
</tn-button>
<!-- <view class="message__tag">阶段{{index+1}}</view>-->
<!-- <view class="message__tag">阶段{{index+1}}</view>-->
</view>
</uni-swipe-action-item>
</uni-swipe-action>
</view>
<view class="add-term" @click="addTerm">
<uni-icons color="var(--cyan)" type="plus" size="40"/>
<text>添加条件</text>
<view class="add-term" >
<uni-icons color="var(--cyan)" type="plus" size="40" @click="addTerm"/>
<text @click="addTerm">添加条件</text>
</view>
</view>
</swiper-item>
</swiper>
</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">
@ -136,10 +140,10 @@
</view>
</uni-popup>
<uni-popup ref="inputDialog" mode="center">
<uni-popup ref="autoParam" mode="center">
<!-- 新增：修改运行时间的弹窗 -->
<view class="modal-container">
<view class="modal-title">{{ `【${selectedText} - ${currentCard.name}】设置` }}</view>
<view class="modal-title">{{ `【${selectedText} - 自动化】参数设置` }}</view>
<view class="modal-input-wrap">
<text class="modal-label">当前时间：</text>
<text class="modal-current">{{ currentCardTime > 0 ? `${currentCardTime} 秒` : '未设置' }}</text>
@ -160,8 +164,33 @@
<uni-easyinput style="width: 100px" v-model="remark" placeholder="不填展示默认备注"/>
</view>
<view class="modal-btn-wrap">
<button class="modal-btn cancel" @click="close">取消</button>
<button class="modal-btn confirm" @click="confirmModifyTime">确定</button>
<button class="modal-btn cancel" @click="closeParamDialog">取消</button>
<button class="modal-btn confirm" @click="setAutoParam">确定</button>
</view>
</view>
</uni-popup>
<uni-popup ref="sliderDialog" mode="center">
<view class="modal-container">
<view class="modal-title">{{ `【${selectedText} - 自动化】参数设置` }}</view>
<!-- 核心修改：给容器加 flex 布局样式 -->
<view class="modal-slider">
<text class="slider-label">{{ slider.title }}</text>
<slider
:value="slider.value"
:min="slider.min"
:max="slider.max"
show-value
class="slider-component"
@change="changeSlider"
/>
<text class="slider-unit">{{ slider.unit }}</text>
</view>
<view class="modal-btn-wrap">
<button class="modal-btn cancel" @click="closeSlider">取消</button>
<button class="modal-btn confirm" @click="confirmSlider">确定</button>
</view>
</view>
</uni-popup>
@ -176,6 +205,7 @@ import {addLimit, getAgriByImei, updateLimit} from "../../../api/system/assets/l
import store from "../../../store";
import {addRemark, updateRemark} from "../../../api/system/assets/remark";
import {generateUniqueId} from "../../../utils/agri";
import UniSection from "../../../components/uni-section/uni-section.vue";
export default {
dicts: ['sys_data_map'],
@ -252,6 +282,7 @@ export default {
}
},
components: {
UniSection,
UniPopup // 注册弹窗组件
},
mounted() {
@ -299,12 +330,20 @@ export default {
}
],
showSelect:false,
result: "请选择",
term:["jm1", "jm2", "jm3"],
termList: {
"jm1": [],
"jm2": [],
"jm3": [],
"jm1": [],
"jm1Param":{
refTemp: '请选择',
},
"jm2": [],
"jm2Param":{
refTemp: '请选择',
},
"jm3": [],
"jm3Param":{
refTemp: '请选择'
},
},
options: [
{
@ -326,9 +365,18 @@ export default {
},
selectTime: false,
timeTag: null,
timeIndex: null,
follerIndex: null,
defaultTime: null,
maxTermLength: 5,
autoParam:false,
slider: {
title: '请选择',
min:0,
max:100,
value:0,
unit:'',
mode: null
},
};
},
@ -343,15 +391,24 @@ export default {
},
// 左上角选择时间
confirmTemp(event) {
this.result = event[0]['label']
this.termList[this.term[this.current] + 'Param'].refTemp = event[0]['label']
console.info(`选择温度：${event[0]['label']}`)
},
// 下拉刷新以及进入组件渲染
refresh() {
this.termList = {
"jm1": [],
"jm1Param":{
refTemp: '请选择',
},
"jm2": [],
"jm2Param":{
refTemp: '请选择',
},
"jm3": [],
"jm3Param":{
refTemp: '请选择'
},
};
this.showFlag = !((store.getters && store.getters.name !== 'admin') && this.$auth.hasRole("test"))
this.$nextTick(() => {
@ -607,14 +664,76 @@ export default {
// 选择运行时间
changeTime(timeTag, timeIndex) {
this.timeTag = timeTag;
this.timeIndex = timeIndex;
this.follerIndex = timeIndex;
this.selectTime = true;
},
openParamDialog() {
this.$refs.autoParam.open();
},
// 卷膜参数设置
setAutoParam() {
var jmTerm = this.term[this.current];
// todo 卷膜参数设置
this.$refs.autoParam.close();
},
closeParamDialog() {
this.$refs.autoParam.close();
},
// 选择时间串口点击确定
confirmTime(time) {
this.termList[this.term[this.current]][this.timeIndex][this.timeTag] = `${time.hour}:${time.minute}`
this.termList[this.term[this.current]][this.follerIndex][this.timeTag] = `${time.hour}:${time.minute}`
},
}
/**
* @param tag 参数
* @param index 条件
*/
openSlider(tag, index) {
var fillerTerm = this.termList[this.term[this.current]][index];
if (tag === 'temp') {
this.slider = {
title: '适宜温度',
min: 0,
max: 40,
unit: '℃',
value: fillerTerm.temp==='选择'?0:fillerTerm.temp,
mode: tag
}
} else if (tag === 'vent') {
this.slider = {
title: '风口大小',
min: 0,
max: 100,
unit: '﹪',
value: fillerTerm.vent==='选择'?0:fillerTerm.vent,
mode: tag
}
}
this.follerIndex = index;
this.$refs.sliderDialog.open();
},
changeSlider(e) {
this.slider.value = e.detail.value
},
closeSlider() {
this.$refs.sliderDialog.close();
},
confirmSlider() {
const slideMode = this.slider.mode;
const value = this.slider.value;
if (slideMode === 'temp') {
this.termList[this.term[this.current]][this.follerIndex].temp = value;
} else if (slideMode === 'vent') {
this.termList[this.term[this.current]][this.follerIndex].vent = value;
}
this.$refs.sliderDialog.close();
},
// 保存自动化条件
saveAutoTerm() {
var termMap = this.termList;
// todo 校验、后端保存
}
},
};
</script>
<style lang="scss" scoped>
@ -759,10 +878,31 @@ export default {
font-size: 26rpx;
width: 80rpx;
}
/* 核心样式：让子元素水平排列 */
.modal-slider {
display: flex;
align-items: center; /* 垂直居中对齐 */
padding: 10rpx 20rpx; /* 增加内边距，避免拥挤 */
gap: 10rpx; /* 元素之间的间距 */
}
.modal-unit {
margin-left: 10rpx;
color: #666;
/* 标题样式：固定宽度，避免挤压滑块 */
.slider-label {
flex: 0 0 auto; /* 不拉伸、不收缩 */
font-size: 28rpx;
white-space: nowrap; /* 防止标题换行 */
}
/* 滑块样式：占满剩余空间 */
.slider-component {
flex: 1; /* 自动填充剩余宽度 */
}
/* 单位样式：固定宽度 */
.slider-unit {
flex: 0 0 auto;
font-size: 28rpx;
margin-left: 5rpx;
}
.modal-btn-wrap {
@ -801,7 +941,7 @@ export default {
overflow: hidden;
}
.film-roller {
padding: 20rpx;
padding: 10rpx 20rpx 20rpx 20rpx;
}
.swiper {
box-sizing: border-box;
@ -821,7 +961,7 @@ export default {
//padding: 10px 20px;
font-size: 40rpx;
color: #42b3ff;
margin-top: 30rpx;
margin-top: 50rpx;
//border: 1px solid var(--cyan);
//border-radius: 8px;
//background-color: #fff;
@ -829,8 +969,15 @@ export default {
.param-setting {
display: flex;
align-items: center;
font-size: 28rpx;
color: #0a0a0a;
margin-top: 15rpx;
.temp-dialog {
margin-left: 20rpx;
}
.param-dialog {
margin-left: auto; /* 自动填充左侧空间，将按钮推到最右侧 */
margin-right: 20rpx;
}
}
.term-content {
@ -882,6 +1029,7 @@ export default {
// text-align: center;
//}
.message__content {
font-size: 26rpx;
font-size: 27rpx;
color: #020e15;
}
</style>