设备状态ui提交

api/warn/message.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询系统消息中心列表
+export function listMessage(query) {
+  return request({
+    url: '/warn/message/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询系统消息中心详细
+export function getMessage(id) {
+  return request({
+    url: '/warn/message/' + id,
+    method: 'get'
+  })
+}
+
+// 新增系统消息中心
+export function addMessage(data) {
+  return request({
+    url: '/warn/message',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改系统消息中心
+export function updateMessage(data) {
+  return request({
+    url: '/warn/message',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除系统消息中心
+export function delMessage(id) {
+  return request({
+    url: '/warn/message/' + id,
+    method: 'delete'
+  })
+}

pages.json

@@ -24,19 +24,27 @@
     {
       "path": "pages/data/index",
       "style": {
-        "navigationBarTitleText": "数据中心"
+        "navigationBarTitleText": "数据中心",
+//        "navigationBarBackgroundColor": "pink",
+//        "navigationBarTextStyle": "white",
+        "navigationBarShadow": {
+//          grey、blue、green、orange、red、yellow
+          "colorType": "red"
+        }
+      }
+    },
+    {
+      "path": "pages/data/indexDemo",
+      "style": {
+        "navigationBarTitleText": "数据中心11"
       }
     },
-//    {
-//      "path": "pages/data/indexDemo",
-//      "style": {
-//        "navigationBarTitleText": "数据中心11"
-//      }
-//    },
     {
       "path": "pages/news/index",
       "style": {
-        "navigationBarTitleText": "消息中心"
+        "navigationBarTitleText": "消息中心",
+        "navigationStyle": "custom",
+        "disableScroll": true
       }
     },
     {
@@ -92,12 +100,36 @@
       "root": "pages/data",
       "pages": [
       ]
-    },
-    {
-      "root": "pages/news",
-      "pages": [
-      ]
     },*/
+  {
+      "root": "pages/news/subpages",
+      "pages": [
+        {
+          "path": "sysNotice/index",
+          "style": {
+            "navigationBarTitleText": "系统公告"
+          }
+        },
+        {
+          "path": "eventCenter/index",
+          "style": {
+            "navigationBarTitleText": "活动中心"
+          }
+        },
+        {
+          "path": "videoCenter/index",
+          "style": {
+            "navigationBarTitleText": "视频中心"
+          }
+        },
+        {
+          "path": "deviceCenter/index",
+          "style": {
+            "navigationBarTitleText": "设备状态"
+          }
+        }
+      ]
+    },
     {
       "root": "pages/work",
       "pages": [
@@ -187,12 +219,12 @@
         "selectedIconPath": "static/images/tabbar/data_.png",
         "text": "历史数据"
       },
-//      {
+      {
-//        "pagePath": "pages/data/indexDemo",
+        "pagePath": "pages/data/indexDemo",
-//        "iconPath": "static/images/tabbar/data.png",
+        "iconPath": "static/images/tabbar/data.png",
-//        "selectedIconPath": "static/images/tabbar/data_.png",
+        "selectedIconPath": "static/images/tabbar/data_.png",
-//        "text": "历史数据"
+        "text": "历史数据"
-//      },
+      },
       {
         "pagePath": "pages/news/index",
         "iconPath": "static/images/tabbar/news.png",

pages/news/index.vue

@@ -24,12 +24,14 @@
     </view>
 
     <!-- 系统通知提示条 -->
-    <view class="notice-bar" >
+    <view class="notice-out">
-      <view class="notice-left">
+      <view class="notice-bar" v-if="isShowTips">
-        <uni-icons @click="goToClose" style="margin-right: 12rpx" type="closeempty" color="#FF6D00" size="15"/>
+        <view class="notice-left">
-        <text class="notice-text">系统通知未开启，报警消息无法通知</text>
+          <uni-icons @click="goToClose" style="margin-right: 12rpx" type="closeempty" color="#FF6D00" size="15"/>
+          <text class="notice-text">系统通知未开启，报警消息无法通知</text>
+        </view>
+        <view class="notice-btn" @click="goToOpen">去开启</view>
       </view>
-      <view class="notice-btn" @click="goToOpen">去开启</view>
     </view>
 
     <!-- 功能入口区 -->
@@ -103,6 +105,7 @@ export default {
   data() {
     return {
       title: '消息中心',
+      isShowTips: true,
       isShowNumBadge: true,
       messageList: [
         {
@@ -143,18 +146,13 @@ export default {
           // iconBg: '#FFA726',
           title: '活动中心',
           desc: '没有新的消息',
-          time: Date.now()-9900000,
+          time: Date.now()-119900000,
           badge: false,
           numBadge: 25, // 无值则不显示
           width: '100rpx'
         }
       ],
-      options: [{
+      options: [
-        text: '置顶',
-        style: {
-          backgroundColor: '#FFA726'
-        }
-      },
         {
           text: '删除',
           style: {
@@ -167,32 +165,36 @@ export default {
   methods: {
     isTodayDate,
     navBack() {
+      // 消息推送设置
       this.showDrawer('showLeft');
-      console.log('点击消息中心')
+      console.log('点击消息中心：消息推送设置')
     },
     clearUnread() {
+      // 全部已读
       this.$modal.showToast('模块建设中~')
-      console.log('清除未读')
+      console.log('清除未读：当前页面全部已读')
     },
     openSetting() {
+      // 当前页面勿扰模式设置
       this.$modal.showToast('模块建设中~')
-      console.log('打开通知设置')
+      console.log('打开通知设置：当前页面勿扰模式设置')
     },
     goToOpen() {
       this.$modal.showToast('模块建设中~')
-      console.log('去开启系统通知')
+      console.log('去开启系统通知：同左侧消息中心')
     },
     goToClose() {
+      this.isShowTips = false
       this.$modal.showToast('模块建设中~')
-      console.log('关闭系统通知')
+      console.log('关闭系统通知提示')
     },
     goToSubscribe() {
       this.$modal.showToast('模块建设中~')
-      console.log('进入消息订阅')
+      console.log('进入消息订阅：暂未开发')
     },
     goToAI() {
       this.$modal.showToast('模块建设中~')
-      console.log('进入AI识别')
+      console.log('进入AI识别：暂未开发')
     },
     handleItemClick(item) {
       this.$modal.showToast('敬请期待~')
@@ -203,11 +205,12 @@ export default {
         this.$tab.navigateTo('/pages/news/subpages/eventCenter/index');
       } else if (item.title === '视频中心') {
         this.$tab.navigateTo('/pages/news/subpages/videoCenter/index');
+      } else if (item.title === '设备状态') {
+        this.$tab.navigateTo('/pages/news/subpages/deviceCenter/index');
       }
     },
     deleteItem(event, index) {
-      this.$modal.showToast('敬请期待~')
+      this.$modal.showToast('敬请期待~，删除当前消息')
-      console.log('删除消息:', event, index)
     },
     // 打开窗口
     showDrawer(e) {
@@ -288,12 +291,14 @@ export default {
   }
 }
 
+.notice-out {
+  margin: 20rpx 30rpx;
+}
 /* 系统通知提示条 */
 .notice-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 20rpx 30rpx;
   padding: 20rpx;
   background-color: #FFF3E0;
   border-radius: 12rpx;

pages/news/subpages/deviceCenter/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <view class="message-page">
+    <!-- 消息列表 -->
+    <scroll-view scroll-y class="message-list">
+      <view
+          v-for="(item, index) in messageList"
+          :key="index"
+          class="message-item"
+      >
+        <!-- 时间标签 -->
+        <view class="time-label">{{ formatTime(item.time) }}</view>
+
+        <!-- 点赞消息卡片 -->
+        <view class="like-card" v-if="item.type === 'like'">
+          <view class="sender-info">
+            <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
+            <text class="sender-text">{{ item.sender }} 刚刚赞了你</text>
+          </view>
+          <text class="arrow">></text>
+        </view>
+
+        <!-- 步数数据卡片 -->
+        <view class="step-card" v-else-if="item.type === 'step'">
+          <view class="step-item">
+            <text class="step-num">{{ item.rank }}</text>
+            <text class="step-label">名次</text>
+          </view>
+          <view class="step-item">
+            <text class="step-num">{{ item.steps }}</text>
+            <text class="step-label">步数</text>
+          </view>
+        </view>
+
+        <!-- 冠军通知卡片 -->
+        <view class="champion-card" v-else-if="item.type === 'champion'">
+          <view class="sender-info">
+            <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
+            <text class="sender-text">{{ item.sender }} 夺得{{ item.date }}日排行榜冠军</text>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      messageList: [
+        {
+          time: '2026-03-26 22:19:00',
+          type: 'champion',
+          avatar: 'https://picsum.photos/id/237/60/60',
+          sender: '王冕',
+          date: '03月26'
+        },
+        {
+          time: '2026-03-25 22:19:00',
+          type: 'step',
+          rank: 71,
+          steps: 6084
+        },
+        {
+          time: '2026-03-16 22:19:00',
+          type: 'champion',
+          avatar: 'https://picsum.photos/id/237/60/60',
+          sender: '王冕',
+          date: '03月25'
+        },
+        {
+          time: '2026-03-26 05:36:00',
+          type: 'like',
+          avatar: 'https://picsum.photos/id/1005/60/60',
+          sender: 'JFather'
+        },
+        {
+          time: '2026-03-24 22:19:00',
+          type: 'step',
+          rank: 160,
+          steps: 1838
+        },
+        {
+          time: '2026-03-27 05:36:00',
+          type: 'champion',
+          avatar: 'https://picsum.photos/id/1012/60/60',
+          sender: 'T薛策恒',
+          date: '03月24'
+        }
+      ]
+    }
+  },
+  methods: {
+    // 核心时间格式化方法
+    formatTime(timeStr) {
+      const now = new Date();
+      const target = new Date(timeStr);
+      const nowTime = now.getTime();
+      const targetTime = target.getTime();
+      const diffTime = nowTime - targetTime;
+      const oneDay = 24 * 60 * 60 * 1000;
+      const sevenDays = 7 * oneDay;
+
+      // 格式化时分秒
+      const hh = String(target.getHours()).padStart(2, '0');
+      const mm = String(target.getMinutes()).padStart(2, '0');
+      const timeSuffix = `${hh}:${mm}`;
+
+      // 今天
+      if (now.toDateString() === target.toDateString()) {
+        return `今天 ${timeSuffix}`;
+      }
+      // 昨天
+      const yesterday = new Date(now);
+      yesterday.setDate(now.getDate() - 1);
+      if (yesterday.toDateString() === target.toDateString()) {
+        return `昨天 ${timeSuffix}`;
+      }
+      // 7天内（含昨天）
+      if (diffTime <= sevenDays) {
+        const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
+        const week = weekMap[target.getDay()];
+        return `星期${week} ${timeSuffix}`;
+      }
+      // 7天以前
+      const y = target.getFullYear();
+      const m = String(target.getMonth() + 1).padStart(2, '0');
+      const d = String(target.getDate()).padStart(2, '0');
+      return `${y}-${m}-${d} ${timeSuffix}`;
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 页面容器 */
+.message-page {
+  height: 100vh;
+  background-color: #f5f5f5;
+}
+
+/* 消息列表 */
+.message-list {
+  padding: 20rpx;
+}
+.message-item {
+  margin-bottom: 30rpx;
+}
+
+/* 时间标签 */
+.time-label {
+  text-align: center;
+  font-size: 26rpx;
+  color: #999;
+  margin-bottom: 20rpx;
+}
+
+/* 通用卡片样式 */
+.like-card, .step-card, .champion-card {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* 发送者信息（点赞/冠军） */
+.sender-info {
+  display: flex;
+  align-items: center;
+}
+.avatar {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  margin-right: 16rpx;
+}
+.sender-text {
+  font-size: 30rpx;
+  color: #333;
+}
+.arrow {
+  font-size: 32rpx;
+  color: #ccc;
+}
+
+/* 步数卡片 */
+.step-card {
+  display: flex;
+  justify-content: space-between;
+}
+.step-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.step-num {
+  font-size: 64rpx;
+  color: #09bb07;
+  font-weight: 500;
+}
+.step-label {
+  font-size: 28rpx;
+  color: #666;
+  margin-top: 8rpx;
+}
+</style>