From d121a240e62aea84383b22af1aea70a246bb9e65 Mon Sep 17 00:00:00 2001
From: lld <15027638633@163.com>
Date: Sun, 29 Mar 2026 23:22:35 +0800
Subject: [PATCH] =?UTF-8?q?ui=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                |   6 +
 pages/home/control/automatic.vue          |   3 +-
 pages/news/subpages/deviceLog/log.vue     | 335 ++++++++++++++++++++++
 pages/news/subpages/videoCenter/index.vue |  11 +-
 4 files changed, 352 insertions(+), 3 deletions(-)

diff --git a/pages.json b/pages.json
index 0c0397d..9bc717a 100644
--- a/pages.json
+++ b/pages.json
@@ -127,6 +127,12 @@
           "style": {
             "navigationBarTitleText": "设备状态"
           }
+        },
+        {
+          "path": "deviceLog/log",
+          "style": {
+            "navigationBarTitleText": "自动模式设备日志"
+          }
         }
       ]
     },
diff --git a/pages/home/control/automatic.vue b/pages/home/control/automatic.vue
index 3737b1b..35f02b7 100644
--- a/pages/home/control/automatic.vue
+++ b/pages/home/control/automatic.vue
@@ -1162,7 +1162,8 @@ export default {
           this.$refs.historyDataRef.getAgriList()
         })
       } else if (e.index===1) {
-        this.$refs.logDialog.open();
+        // this.$refs.logDialog.open();
+        this.$tab.navigateTo('/pages/news/subpages/deviceLog/log');
       }
     },
     closeLogDialog() {
diff --git a/pages/news/subpages/deviceLog/log.vue b/pages/news/subpages/deviceLog/log.vue
index e69de29..da48093 100644
--- a/pages/news/subpages/deviceLog/log.vue
+++ b/pages/news/subpages/deviceLog/log.vue
@@ -0,0 +1,335 @@
+<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">
+      <text class="date-title">
+        <uni-dateformat :date="date" format="MM-dd" />
+      </text>
+      <view class="category-tabs" v-if="isShowSelect">
+        请选择大棚：<uni-data-select align="left" :clear="false" v-model="imei" :localdata="range" />
+      </view>
+    </view>
+
+    <!-- 视频列表（带时间轴） -->
+    <scroll-view scroll-y class="video-list" v-if="videoList.length>0">
+      <view
+          v-for="(item, index) in videoList"
+          :key="index"
+          class="video-item"
+      >
+        <!-- 时间轴（uni-icons实现） -->
+        <view class="time-axis">
+          <uni-icons type="circle" size="14" color="#1677ff"></uni-icons>
+          <view class="axis-line" v-if="index !== videoList.length"></view>
+        </view>
+
+        <!-- 时间 + 卡片 垂直排列 -->
+        <view class="time-card-wrap">
+          <!-- 时间 + 未读红点（在卡片正上方） -->
+          <view class="time-info">
+            <text class="time-text">{{ item.time }}</text>
+            <view class="unread-dot" v-if="item.unread"></view>
+          </view>
+
+          <!-- 视频卡片 -->
+          <view class="video-card" @click="gotoDetail(item)">
+            <view class="video-info">
+              <text class="device-name">{{ item.device }}</text>
+              <text class="event-type">{{ item.event }}</text>
+            </view>
+            <image class="video-cover" :src="item.cover" mode="aspectFill"></image>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+    <view class="empty__item tn-margin-top" 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 {parseTime} from "@/utils/agri";
+import {listAgri} from "@/api/system/assets/agri";
+
+export default {
+  data() {
+    return {
+      dateList: this.getDateList(),
+      videoList: [
+        {
+          time: '13:22:04',
+          device: 'DS-2DE4423DW-D/GLT/...',
+          event: '画面变化',
+          cover: 'https://picsum.photos/id/1015/400/200',
+          unread: true
+        },
+        {
+          time: '13:20:20',
+          device: 'DS-2DE4423DW-D/G我饿全额钱31313122LT/...',
+          event: '画面变化',
+          cover: 'https://picsum.photos/id/1015/400/200',
+          unread: true
+        },
+        {
+          time: '13:19:12',
+          device: 'DS-2DE4423DW-D/GLT/...',
+          event: '画面变化',
+          cover: 'https://picsum.photos/id/1015/400/200',
+          unread: true
+        },
+        {
+          time: '13:18:11',
+          device: 'DS-2DE4423DW-D/GLT/...',
+          event: '画面变化',
+          cover: 'https://picsum.photos/id/1015/400/200',
+          unread: true
+        }
+      ],
+      range: [],
+      imei: '',
+      isShowSelect: true,
+      date: Date.now()
+    }
+  },
+  mounted() {
+    // 只允许查询七天以内消息默认展示今天
+    // this.videoList = this.getDateList1();
+  },
+  onShow() {
+    if (!this.imei) {
+      this.getImeiList()
+    }
+  },
+  methods: {
+    parseTime,
+    handleDateClick(item) {
+      this.dateList = this.dateList.map(d => ({...d, active: d === item}))
+      uni.showToast({title: `切换到${item.day} ${item.week}`})
+        
+      var number = new Date();
+      if (item.day !== '今')  {
+        number.setDate(item.day)
+      }
+      this.date = +number;
+      // todo 切换日期后，更新视频列表
+      // this.videoList = this.getDateList1();
+    },
+
+    handleFilterClick() {
+      // todo 打开筛选面板
+      uni.showToast({title: '打开筛选面板'})
+    },
+    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}
+      })
+    },
+    gotoDetail(item) {
+      // 更新已读
+      this.$modal.msg("暂未开放！");
+      return;
+    },
+    getImeiList() {
+      listAgri().then(response => {
+        if (response.code === 200) {
+          this.range = response.rows.map(item => ({
+            agriId: item.id,
+            text: item.agriName,
+            value: item.imei // 提取并改名
+          }));
+        }
+      })
+    },
+  }
+}
+</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;
+}
+.date-title {
+  font-size: 36rpx;
+  font-weight: 400;
+  color: #333;
+}
+.category-tabs {
+  display: flex;
+  align-items: center;
+  width: 50%;
+}
+
+/* 视频列表 */
+.video-list {
+  flex: 1;
+  padding: 0 30rpx;
+  height: calc(100vh - var(--status-bar-height) - 180rpx);
+}
+.video-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30rpx;
+}
+
+/* 时间轴 */
+.time-axis {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 14rpx;
+  padding-top: 20rpx;
+}
+.axis-line {
+  width: 1rpx;
+  height: 170rpx; /* 适配时间+卡片高度 */
+  background-color: #e0e0e0;
+  margin-top: 8rpx;
+}
+
+/* 时间+卡片 垂直包裹 */
+.time-card-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 时间信息（在卡片正上方） */
+.time-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15rpx;
+}
+.time-text {
+  font-size: 30rpx;
+  color: #333;
+  margin-top: 20rpx;
+}
+.unread-dot {
+  width: 12rpx;
+  height: 12rpx;
+  background-color: #ff3b30;
+  border-radius: 50%;
+  margin-left: 10rpx;
+}
+
+/* 视频卡片 */
+.video-card {
+  display: flex;
+  background-color: #f7f8fd;
+  border-radius: 12rpx;
+  padding: 20rpx;
+}
+.video-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 0;
+}
+.device-name {
+  font-size: 28rpx;
+  color: #8f8f8f;
+  margin-bottom: 10rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 10rpx;
+}
+.event-type {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+}
+.video-cover {
+  width: 320rpx;
+  height: 180rpx;
+  border-radius: 8rpx;
+}
+/deep/.uni-select__input-placeholder {
+  font-size: 24rpx !important;
+}
+</style>
\ No newline at end of file
diff --git a/pages/news/subpages/videoCenter/index.vue b/pages/news/subpages/videoCenter/index.vue
index 8e65f3f..1cd610f 100644
--- a/pages/news/subpages/videoCenter/index.vue
+++ b/pages/news/subpages/videoCenter/index.vue
@@ -17,7 +17,7 @@
     <!-- 日期标题 + 分类筛选（靠右） -->
     <view class="filter-bar">
       <text class="date-title">
-        <uni-dateformat :date="Date.now()" format="MM-dd" />
+        <uni-dateformat :date="date" format="MM-dd" />
       </text>
       <view class="category-tabs">
         <view
@@ -117,7 +117,8 @@ export default {
           cover: 'https://picsum.photos/id/1015/400/200',
           unread: true
         }
-      ]
+      ],
+      date: Date.now()
     }
   },
   mounted() {
@@ -129,6 +130,12 @@ export default {
     handleDateClick(item) {
       this.dateList = this.dateList.map(d => ({...d, active: d === item}))
       uni.showToast({title: `切换到${item.day} ${item.week}`})
+
+      var number = new Date();
+      if (item.day !== '今')  {
+        number.setDate(item.day)
+      }
+      this.date = +number;
       // todo 切换日期后，更新视频列表
       // this.videoList = this.getDateList1();
     },