394 lines
10 KiB
Vue
394 lines
10 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 :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"
|
|
v-if="logList.length>0"
|
|
:height="80"></tn-subsection>
|
|
<swiper :current="current" :acceleration="true"
|
|
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="logList.length>0">
|
|
<!-- 一个 uni-collapse 容器 + accordion="true" 实现互斥展开 -->
|
|
<uni-collapse :accordion="true">
|
|
<!-- v-for 写在 uni-collapse-item 上 -->
|
|
<uni-collapse-item
|
|
v-for="(item, index) in logList"
|
|
:key="index"
|
|
:title="item.title || '视频标题'"
|
|
:border="true"
|
|
title-border="show">
|
|
<view class="content">
|
|
<view>{{}}</view>
|
|
<view>{{}}</view>
|
|
<view>{{}}</view>
|
|
<view>{{}}</view>
|
|
<view>{{}}</view>
|
|
</view>
|
|
</uni-collapse-item>
|
|
</uni-collapse>
|
|
</scroll-view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<view class="empty__item tn-margin-top empty__view" v-else>
|
|
<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 {getAutoLogList} from "@/api/warn/autolog";
|
|
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
|
|
}
|
|
},
|
|
mounted() {
|
|
// 只允许查询七天以内消息默认展示今天
|
|
// this.videoList = this.getDateList1();
|
|
},
|
|
onShow() {
|
|
if (!this.imei) {
|
|
this.getImeiList()
|
|
}
|
|
},
|
|
methods: {
|
|
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().then(response => {
|
|
if (response.code === 200) {
|
|
this.range = response.rows.map(item => ({
|
|
agriId: item.id,
|
|
text: item.agriName,
|
|
value: item.imei // 提取并改名
|
|
}));
|
|
}
|
|
})
|
|
},
|
|
|
|
getLogInfo() {
|
|
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.roller === `jm${this.current+1}`);
|
|
// }
|
|
// this.loading = false;
|
|
// }
|
|
setTimeout(() => {
|
|
this.logList = [
|
|
// jm1 卷膜数据
|
|
{
|
|
id: 1,
|
|
imei: "868402051234567",
|
|
roll_film: "jm1",
|
|
monitor_period: "08:00-12:00",
|
|
current_temp: 25.3,
|
|
ref_temp: "26.0",
|
|
suitable_temp: 1,
|
|
fan_status: 1.0,
|
|
is_last: 0,
|
|
exec_cmd: "rollerjm1: 开棚",
|
|
log_id: 1001,
|
|
create_time: "2026-03-30 09:15:22"
|
|
},
|
|
{
|
|
id: 2,
|
|
imei: "868402051234567",
|
|
roll_film: "jm1",
|
|
monitor_period: "12:00-16:00",
|
|
current_temp: 28.7,
|
|
ref_temp: "26.0",
|
|
suitable_temp: 0,
|
|
fan_status: 1.0,
|
|
is_last: 0,
|
|
exec_cmd: "rollerjm1: 关棚",
|
|
log_id: 1002,
|
|
create_time: "2026-03-30 13:20:45"
|
|
},
|
|
{
|
|
id: 3,
|
|
imei: "868402051234567",
|
|
roll_film: "jm1",
|
|
monitor_period: "16:00-20:00",
|
|
current_temp: 26.2,
|
|
ref_temp: "26.0",
|
|
suitable_temp: 1,
|
|
fan_status: 0.5,
|
|
is_last: 1,
|
|
exec_cmd: "rollerjm1: 开棚",
|
|
log_id: 1003,
|
|
create_time: "2026-03-30 17:40:18"
|
|
},
|
|
// jm2 卷膜数据
|
|
{
|
|
id: 4,
|
|
imei: "868402057654321",
|
|
roll_film: "jm2",
|
|
monitor_period: "08:00-12:00",
|
|
current_temp: 24.1,
|
|
ref_temp: "24.0",
|
|
suitable_temp: 1,
|
|
fan_status: 0.0,
|
|
is_last: 0,
|
|
exec_cmd: "rollerjm2: 开棚",
|
|
log_id: 1004,
|
|
create_time: "2026-03-30 10:05:11"
|
|
},
|
|
{
|
|
id: 5,
|
|
imei: "868402057654321",
|
|
roll_film: "jm2",
|
|
monitor_period: "12:00-16:00",
|
|
current_temp: 25.8,
|
|
ref_temp: "24.0",
|
|
suitable_temp: 1,
|
|
fan_status: 0.5,
|
|
is_last: 0,
|
|
exec_cmd: "rollerjm2: 关棚",
|
|
log_id: 1005,
|
|
create_time: "2026-03-30 14:35:33"
|
|
},
|
|
{
|
|
id: 6,
|
|
imei: "868402057654321",
|
|
roll_film: "jm2",
|
|
monitor_period: "16:00-20:00",
|
|
current_temp: 23.9,
|
|
ref_temp: "24.0",
|
|
suitable_temp: 1,
|
|
fan_status: 0.0,
|
|
is_last: 1,
|
|
exec_cmd: "rollerjm2: 开棚",
|
|
log_id: 1006,
|
|
create_time: "2026-03-30 18:22:09"
|
|
},
|
|
// jm3 卷膜数据
|
|
{
|
|
id: 7,
|
|
imei: "868402059876543",
|
|
roll_film: "jm3",
|
|
monitor_period: "08:00-12:00",
|
|
current_temp: 23.5,
|
|
ref_temp: "25.0",
|
|
suitable_temp: 1,
|
|
fan_status: 0.0,
|
|
is_last: 0,
|
|
exec_cmd: "rollerjm3: 开棚",
|
|
log_id: 1007,
|
|
create_time: "2026-03-30 08:45:33"
|
|
},
|
|
{
|
|
id: 8,
|
|
imei: "868402059876543",
|
|
roll_film: "jm3",
|
|
monitor_period: "12:00-16:00",
|
|
current_temp: 27.4,
|
|
ref_temp: "25.0",
|
|
suitable_temp: 0,
|
|
fan_status: 1.0,
|
|
is_last: 0,
|
|
exec_cmd: "rollerjm3: 关棚",
|
|
log_id: 1008,
|
|
create_time: "2026-03-30 12:50:27"
|
|
},
|
|
{
|
|
id: 9,
|
|
imei: "868402059876543",
|
|
roll_film: "jm3",
|
|
monitor_period: "16:00-20:00",
|
|
current_temp: 25.1,
|
|
ref_temp: "25.0",
|
|
suitable_temp: 1,
|
|
fan_status: 0.5,
|
|
is_last: 1,
|
|
exec_cmd: "rollerjm3: 开棚",
|
|
log_id: 1009,
|
|
create_time: "2026-03-30 16:10:55"
|
|
}
|
|
];
|
|
if (this.logList && this.logList.length>0) {
|
|
this.tabList = this.logList.filter(item => item.roller === `jm${this.current+1}`);
|
|
}
|
|
this.loading = false;
|
|
}, 1000);
|
|
},
|
|
switchTab(e) {
|
|
this.current=e.index
|
|
},
|
|
change(e) {
|
|
this.current=e.detail.current
|
|
}
|
|
|
|
}
|
|
}
|
|
</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: 90vh;
|
|
}
|
|
.content {
|
|
padding: 15px;
|
|
}
|
|
|
|
/deep/.uni-select__input-placeholder {
|
|
font-size: 24rpx !important;
|
|
}
|
|
</style> |