434 lines
12 KiB
Vue
434 lines
12 KiB
Vue
<template>
|
||
<view class="video-page">
|
||
<!-- 日期选择栏 -->
|
||
<view class="date-tabs">
|
||
<view
|
||
v-for="(item, index) in dateList"
|
||
:key="index"
|
||
class="date-tab"
|
||
:class="{ active: item.active }"
|
||
@click="handleDateClick(item)"
|
||
>
|
||
<text class="week">{{ item.week }}</text>
|
||
<text class="day">{{ item.day }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 日期标题 + 分类筛选（靠右） -->
|
||
<view class="filter-bar">
|
||
<uni-dateformat style="font-size: 40rpx;line-height: 60rpx;font-weight: bolder" :date="date" format="MM-dd" />
|
||
<view class="category-tabs" v-if="isShowSelect">
|
||
请选择大棚：<uni-data-select align="left" :clear="false" v-model="imei" :localdata="range" @change="getLogInfo" />
|
||
</view>
|
||
</view>
|
||
<uni-load-more iconType="auto" v-if="loading" :status="status" :content-text="contentText" />
|
||
|
||
<tn-subsection :list="filmRollerList"
|
||
:current="current"
|
||
:bold="true"
|
||
@change="switchTab"
|
||
class="subsection"
|
||
v-if="logList.length>0"
|
||
:height="80"></tn-subsection>
|
||
<swiper :current="current" :acceleration="true" style="height: calc(100vh - 300rpx)"
|
||
v-if="logList.length>0"
|
||
@change="change">
|
||
<swiper-item v-for="(roller, key) in filmRollerList"
|
||
@touchmove.stop
|
||
:key="key">
|
||
<!-- 视频列表（带时间轴） -->
|
||
<scroll-view scroll-y class="log-list" v-if="tabList.length>0">
|
||
<uni-collapse :accordion="true">
|
||
|
||
<!-- 循环 tabList（当前卷膜的数据） -->
|
||
<uni-collapse-item
|
||
v-for="(item, index) in tabList"
|
||
:key="index"
|
||
:title="`【${agriName}】于${formatDate(item.createTime,'hh:mm:ss')}触发自动化条件执行卷膜${current+1}${item.execCmd}!`"
|
||
title-border="show"
|
||
:border="true"
|
||
>
|
||
<view class="content">
|
||
<view>大棚：{{ agriName }}</view>
|
||
<view>卷膜：卷膜{{ current+1 }}</view>
|
||
<view>监测时段：{{ item.monitorPeriod }}</view>
|
||
<view>执行时间：{{ item.createTime }}</view>
|
||
<view>当时温度：{{ item.currentTemp }}℃</view>
|
||
<view>参考温度计：{{ item.refTemp.replace('20','温度') }} </view>
|
||
<view>适宜温度：{{ item.suitableTemp }}℃</view>
|
||
<view>运行风口：{{ item.fanStatus }}cm</view>
|
||
<view>是否最后一个条件：{{ item.isLast? '是' : '否' }}</view>
|
||
<view>执行指令：{{ item.execCmd }}</view>
|
||
</view>
|
||
</uni-collapse-item>
|
||
</uni-collapse>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<view class="empty__item tn-margin-top empty__view" v-if="isShowEmpty">
|
||
<tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png"
|
||
text="暂无日志" :imgWidth="200"
|
||
:imgHeight="200"></tn-empty>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {listAgri} from "@/api/system/assets/agri";
|
||
import {formatDate} from "@/uni_modules/uni-dateformat/components/uni-dateformat/date-format";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
dateList: this.getDateList(),
|
||
logList: [],
|
||
range: [],
|
||
imei: '',
|
||
isShowSelect: true,
|
||
date: Date.now(),
|
||
filmRollerList:["卷膜1", "卷膜2", "卷膜3"],
|
||
current: 0,
|
||
tabList: [],
|
||
contentText: {
|
||
contentdown: '查看更多',
|
||
contentrefresh: '正在加载中....',
|
||
contentnomore: '没有更多数据了'
|
||
},
|
||
status: 'more',
|
||
loading: false,
|
||
agriName: null,
|
||
isShowEmpty: false,
|
||
}
|
||
},
|
||
mounted() {
|
||
// 只允许查询七天以内消息默认展示今天
|
||
// this.videoList = this.getDateList1();
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
onLoad(option) {
|
||
|
||
if (option.logInfo) {
|
||
const decodedStr = decodeURIComponent(option.logInfo);
|
||
const logInfo = JSON.parse(decodedStr); // 反序列化为原对象
|
||
this.imei=logInfo.imei;
|
||
console.info(this.imei)
|
||
this.agriName = logInfo.agriName;
|
||
this.getLogInfo();
|
||
this.isShowSelect = false;
|
||
}
|
||
if (!this.imei) {
|
||
this.getImeiList()
|
||
}
|
||
},
|
||
methods: {
|
||
formatDate,
|
||
handleDateClick(item) {
|
||
this.dateList = this.dateList.map(d => ({...d, active: d === item}))
|
||
var number = new Date();
|
||
if (item.day !== '今') {
|
||
number.setDate(item.day)
|
||
}
|
||
this.date = +number;
|
||
this.getLogInfo()
|
||
},
|
||
|
||
getDateList() {
|
||
const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
|
||
const today = new Date();
|
||
const list = [];
|
||
for (let i = 6; i >= 0; i--) {
|
||
const date = new Date(today);
|
||
date.setDate(today.getDate() - i);
|
||
|
||
list.push({
|
||
week: weekMap[date.getDay()],
|
||
day: i === 0 ? '今' : date.getDate() + '',
|
||
active: i === 0
|
||
});
|
||
}
|
||
return list;
|
||
},
|
||
|
||
getDateList1() {
|
||
const w = ['日', '一', '二', '三', '四', '五', '六'];
|
||
const t = new Date();
|
||
return Array.from({length: 7}, (_, i) => {
|
||
const d = new Date(t);
|
||
d.setDate(t.getDate() - 6 + i);
|
||
return {week: w[d.getDay()], day: i === 6 ? '今' : d.getDate() + '', active: i === 6}
|
||
})
|
||
},
|
||
|
||
getImeiList() {
|
||
// 获取已启用的设备列表
|
||
listAgri({status: 1}).then(response => {
|
||
if (response.code === 200) {
|
||
this.range = response.rows.map(item => ({
|
||
agriId: item.id,
|
||
text: item.agriName,
|
||
value: item.imei // 提取并改名
|
||
}));
|
||
}
|
||
})
|
||
},
|
||
|
||
getLogInfo() {
|
||
if (!this.agriName) {
|
||
this.agriName = this.range.find(item => item.value === this.imei).text || null
|
||
}
|
||
if (!this.imei || !this.date) {
|
||
return;
|
||
}
|
||
this.loading = true;
|
||
this.status = 'loading';
|
||
var loginfo = {
|
||
imei: this.imei,
|
||
monitorDate: formatDate(this.date, "yyyy-MM-dd")
|
||
}
|
||
// getAutoLogList(loginfo).then(response => {
|
||
// if (response.code === 200) {
|
||
// this.logList = response.data;
|
||
// }
|
||
// }).finally(() => {
|
||
// if (this.logList && this.logList.length>0) {
|
||
// this.tabList = this.logList.filter(item => item.roll_film === `jm${this.current+1}`);
|
||
// } else {
|
||
// this.isShowEmpty = true;
|
||
// this.loading = false;
|
||
// }
|
||
setTimeout(() => {
|
||
this.logList = [
|
||
// jm1 卷膜数据
|
||
{
|
||
id: 1,
|
||
imei: "868402051234567",
|
||
rollFilm: "jm1",
|
||
monitorPeriod: "08:00-12:00",
|
||
currentTemp: 25.3,
|
||
refTemp: "202",
|
||
suitableTemp: 25.9,
|
||
fanStatus: 1.0,
|
||
isLast: 0,
|
||
execCmd: "开",
|
||
logId: 1001,
|
||
createTime: "2026-03-30 09:15:22"
|
||
},
|
||
{
|
||
id: 2,
|
||
imei: "868402051234567",
|
||
rollFilm: "jm1",
|
||
monitorPeriod: "12:00-16:00",
|
||
currentTemp: 28.7,
|
||
refTemp: "201",
|
||
suitableTemp: 28.7,
|
||
fanStatus: 1.0,
|
||
isLast: 0,
|
||
execCmd: "关",
|
||
logId: 1002,
|
||
createTime: "2026-03-30 13:20:45"
|
||
},
|
||
{
|
||
id: 3,
|
||
imei: "868402051234567",
|
||
rollFilm: "jm1",
|
||
monitorPeriod: "16:00-20:00",
|
||
currentTemp: 26.2,
|
||
refTemp: "202",
|
||
suitableTemp: 28.2,
|
||
fanStatus: 0.5,
|
||
isLast: 1,
|
||
execCmd: "开",
|
||
logId: 1003,
|
||
createTime: "2026-03-30 17:40:18"
|
||
},
|
||
// jm2 卷膜数据
|
||
{
|
||
id: 4,
|
||
imei: "868402057654321",
|
||
rollFilm: "jm2",
|
||
monitorPeriod: "08:00-12:00",
|
||
currentTemp: 24.1,
|
||
refTemp: "202",
|
||
suitableTemp: 34.2,
|
||
fanStatus: 0.0,
|
||
isLast: 0,
|
||
execCmd: "开",
|
||
logId: 1004,
|
||
createTime: "2026-03-30 10:05:11"
|
||
},
|
||
{
|
||
id: 5,
|
||
imei: "868402057654321",
|
||
rollFilm: "jm2",
|
||
monitorPeriod: "12:00-16:00",
|
||
currentTemp: 25.8,
|
||
refTemp: "203",
|
||
suitableTemp: 24.1,
|
||
fanStatus: 0.5,
|
||
isLast: 0,
|
||
execCmd: "关",
|
||
logId: 1005,
|
||
createTime: "2026-03-30 14:35:33"
|
||
},
|
||
{
|
||
id: 6,
|
||
imei: "868402057654321",
|
||
rollFilm: "jm2",
|
||
monitorPeriod: "16:00-20:00",
|
||
currentTemp: 23.9,
|
||
refTemp: "204",
|
||
suitableTemp: 35.2,
|
||
fanStatus: 0.0,
|
||
isLast: 1,
|
||
execCmd: "开",
|
||
logId: 1006,
|
||
createTime: "2026-03-30 18:22:09"
|
||
},
|
||
// jm3 卷膜数据
|
||
{
|
||
id: 7,
|
||
imei: "868402059876543",
|
||
rollFilm: "jm3",
|
||
monitorPeriod: "08:00-12:00",
|
||
currentTemp: 23.5,
|
||
refTemp: "203",
|
||
suitableTemp: 27,
|
||
fanStatus: 0.0,
|
||
isLast: 0,
|
||
execCmd: "开",
|
||
logId: 1007,
|
||
createTime: "2026-03-30 08:45:33"
|
||
},
|
||
{
|
||
id: 8,
|
||
imei: "868402059876543",
|
||
rollFilm: "jm3",
|
||
monitorPeriod: "12:00-16:00",
|
||
currentTemp: 27.4,
|
||
refTemp: "202",
|
||
suitableTemp: 23.3,
|
||
fanStatus: 1.0,
|
||
isLast: 0,
|
||
execCmd: "关",
|
||
logId: 1008,
|
||
createTime: "2026-03-30 12:50:27"
|
||
},
|
||
{
|
||
id: 9,
|
||
imei: "868402059876543",
|
||
rollFilm: "jm3",
|
||
monitorPeriod: "16:00-20:00",
|
||
currentTemp: 25.1,
|
||
refTemp: "202",
|
||
suitableTemp: 26.5,
|
||
fanStatus: 0.5,
|
||
isLast: 1,
|
||
execCmd: "开",
|
||
logId: 1009,
|
||
createTime: "2026-03-30 16:10:55"
|
||
}
|
||
];
|
||
if (this.logList && this.logList.length>0) {
|
||
this.tabList = this.logList.filter(item => item.rollFilm === `jm${this.current+1}`);
|
||
}
|
||
this.loading = false;
|
||
}, 1000);
|
||
},
|
||
switchTab(e) {
|
||
this.current=e.index
|
||
},
|
||
change(e) {
|
||
this.current=e.detail.current
|
||
this.tabList = this.logList.filter(item => item.rollFilm === `jm${this.current+1}`);
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面容器 */
|
||
.video-page {
|
||
height: 100vh;
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 日期选择栏 */
|
||
.date-tabs {
|
||
display: flex;
|
||
padding: 30rpx 20rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
.date-tab {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #666;
|
||
background: #f7f8fd;
|
||
margin: 0 10rpx;
|
||
//border: 1rpx solid #e0e0e0;
|
||
border-radius: 12rpx;
|
||
padding: 16rpx 0;
|
||
}
|
||
.date-tab.active {
|
||
background-color: #1677ff;
|
||
color: #fff;
|
||
border-color: #1677ff;
|
||
}
|
||
.week {
|
||
font-size: 25rpx;
|
||
margin-bottom: 8rpx;
|
||
color: #bdbdbd;
|
||
}
|
||
.day {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 筛选栏 */
|
||
.filter-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
|
||
.category-tabs {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 50%;
|
||
}
|
||
|
||
.log-list {
|
||
flex: 1;
|
||
padding: 0 30rpx;
|
||
height: calc(100vh - 300rpx); /* 关键 */
|
||
}
|
||
.content {
|
||
padding: 20rpx;
|
||
line-height: 1.6;
|
||
}
|
||
/deep/.uni-select__input-placeholder {
|
||
font-size: 24rpx !important;
|
||
}
|
||
/deep/ .uni-swiper-wrapper {
|
||
height: calc(100vh - 300rpx);
|
||
}
|
||
.subsection {
|
||
margin: 0 30rpx;
|
||
}
|
||
/deep/ .uni-collapse-item__title-box {
|
||
padding: 0;
|
||
|
||
}
|
||
/deep/.uni-collapse-item__title-text {
|
||
font-size: 25rpx!important;
|
||
}
|
||
</style> |