diff --git a/mini_program/farm-monitor-dashboard/.env.development b/mini_program/farm-monitor-dashboard/.env.development index 4b454b9..e4eb646 100644 --- a/mini_program/farm-monitor-dashboard/.env.development +++ b/mini_program/farm-monitor-dashboard/.env.development @@ -1,6 +1,6 @@ -# 开发环境配置 -NODE_ENV=development -VUE_APP_BASE_URL=http://localhost:3000/api -VUE_APP_WEIXIN_APPID=wx-your-dev-appid -VUE_APP_DEBUG=true +# 开发环境配置 +NODE_ENV=development +VUE_APP_BASE_URL=http://localhost:3000/api +VUE_APP_WEIXIN_APPID=wx-your-dev-appid +VUE_APP_DEBUG=true VUE_APP_VERSION=1.0.0-dev \ No newline at end of file diff --git a/mini_program/farm-monitor-dashboard/.env.production b/mini_program/farm-monitor-dashboard/.env.production index 1dbe9ba..d148faf 100644 --- a/mini_program/farm-monitor-dashboard/.env.production +++ b/mini_program/farm-monitor-dashboard/.env.production @@ -1,6 +1,6 @@ -# 生产环境配置 -NODE_ENV=production -VUE_APP_BASE_URL=https://your-production-domain.com/api -VUE_APP_WEIXIN_APPID=wx-your-prod-appid -VUE_APP_DEBUG=false +# 生产环境配置 +NODE_ENV=production +VUE_APP_BASE_URL=https://your-production-domain.com/api +VUE_APP_WEIXIN_APPID=wx-your-prod-appid +VUE_APP_DEBUG=false VUE_APP_VERSION=1.0.0 \ No newline at end of file diff --git a/mini_program/farm-monitor-dashboard/app.js b/mini_program/farm-monitor-dashboard/app.js new file mode 100644 index 0000000..19811d7 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/app.js @@ -0,0 +1,55 @@ +// app.js - 养殖管理系统小程序入口文件 +App({ + onLaunch() { + // 小程序启动 + console.log('养殖管理系统小程序启动') + + // 获取系统信息 + const systemInfo = wx.getSystemInfoSync() + this.globalData.systemInfo = systemInfo + + // 检查登录状态 + this.checkLoginStatus() + }, + + onShow() { + // 小程序显示 + console.log('小程序显示') + }, + + onHide() { + // 小程序隐藏 + console.log('小程序隐藏') + }, + + onError(err) { + // 小程序错误 + console.error('小程序错误:', err) + }, + + // 检查登录状态 + checkLoginStatus() { + const token = wx.getStorageSync('token') + const userInfo = wx.getStorageSync('userInfo') + + if (token && userInfo) { + this.globalData.isLogin = true + this.globalData.userInfo = userInfo + this.globalData.token = token + } else { + this.globalData.isLogin = false + this.globalData.userInfo = null + this.globalData.token = '' + } + }, + + // 全局数据 + globalData: { + isLogin: false, + userInfo: null, + token: '', + systemInfo: null, + apiBaseUrl: 'https://ad.ningmuyun.com/farm/api' + } +}) + diff --git a/mini_program/farm-monitor-dashboard/app.json b/mini_program/farm-monitor-dashboard/app.json new file mode 100644 index 0000000..c68282c --- /dev/null +++ b/mini_program/farm-monitor-dashboard/app.json @@ -0,0 +1,64 @@ +{ + "pages": [ + "pages/home/home", + "pages/login/login", + "pages/cattle/cattle", + "pages/cattle/archive/archive", + "pages/cattle/detail/detail", + "pages/cattle/transfer/transfer", + "pages/cattle/transfer-detail/transfer-detail", + "pages/cattle/exit/exit", + "pages/cattle/exit-detail/exit-detail", + "pages/cattle/pen/pen", + "pages/cattle/pen-detail/pen-detail", + "pages/cattle/batch/batch", + "pages/cattle/batch-detail/batch-detail", + "pages/device/device", + "pages/device/collar/collar", + "pages/device/eartag/eartag", + "pages/device/host/host", + "pages/device/fence/fence", + "pages/alert/alert", + "pages/alert/collar-alert/collar-alert", + "pages/alert/collar-alert-detail/collar-alert-detail", + "pages/alert/eartag-alert/eartag-alert", + "pages/alert/eartag-alert-detail/eartag-alert-detail", + "pages/production/production", + "pages/profile/profile" + ], + "window": { + "navigationBarTextStyle": "black", + "navigationBarTitleText": "养殖管理系统", + "navigationBarBackgroundColor": "#ffffff", + "backgroundColor": "#f6f6f6" + }, + "tabBar": { + "color": "#999999", + "selectedColor": "#52c41a", + "borderStyle": "white", + "backgroundColor": "#ffffff", + "list": [ + { + "pagePath": "pages/home/home", + "text": "首页" + }, + { + "pagePath": "pages/cattle/cattle", + "text": "生产管理" + }, + { + "pagePath": "pages/profile/profile", + "text": "我的" + } + ] + }, + "permission": { + "scope.userLocation": { + "desc": "你的位置信息将用于养殖场定位和地图展示" + } + }, + "sitemapLocation": "sitemap.json", + "style": "v2", + "lazyCodeLoading": "requiredComponents" +} + diff --git a/mini_program/farm-monitor-dashboard/app.wxss b/mini_program/farm-monitor-dashboard/app.wxss index c2b8e2b..e38d46c 100644 --- a/mini_program/farm-monitor-dashboard/app.wxss +++ b/mini_program/farm-monitor-dashboard/app.wxss @@ -1,281 +1,281 @@ -/* app.wxss - 全局样式 */ - -/* 全局重置 */ -page { - background-color: #f6f6f6; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 14px; - color: #303133; - line-height: 1.6; -} - -/* 容器样式 */ -.container { - padding: 16rpx; - background-color: #ffffff; - border-radius: 8rpx; - margin: 16rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); -} - -/* 通用工具类 */ -.text-center { text-align: center; } -.text-left { text-align: left; } -.text-right { text-align: right; } - -.mt-8 { margin-top: 8rpx; } -.mt-16 { margin-top: 16rpx; } -.mt-24 { margin-top: 24rpx; } -.mt-32 { margin-top: 32rpx; } -.mb-8 { margin-bottom: 8rpx; } -.mb-16 { margin-bottom: 16rpx; } -.mb-24 { margin-bottom: 24rpx; } -.mb-32 { margin-bottom: 32rpx; } - -.pt-8 { padding-top: 8rpx; } -.pt-16 { padding-top: 16rpx; } -.pt-24 { padding-top: 24rpx; } -.pt-32 { padding-top: 32rpx; } -.pb-8 { padding-bottom: 8rpx; } -.pb-16 { padding-bottom: 16rpx; } -.pb-24 { padding-bottom: 24rpx; } -.pb-32 { padding-bottom: 32rpx; } - -.p-8 { padding: 8rpx; } -.p-16 { padding: 16rpx; } -.p-24 { padding: 24rpx; } -.p-32 { padding: 32rpx; } - -.m-8 { margin: 8rpx; } -.m-16 { margin: 16rpx; } -.m-24 { margin: 24rpx; } -.m-32 { margin: 32rpx; } - -/* Flex布局 */ -.flex { display: flex; } -.flex-column { flex-direction: column; } -.flex-wrap { flex-wrap: wrap; } -.justify-center { justify-content: center; } -.justify-between { justify-content: space-between; } -.justify-end { justify-content: flex-end; } -.justify-start { justify-content: flex-start; } -.align-center { align-items: center; } -.align-start { align-items: flex-start; } -.align-end { align-items: flex-end; } - -/* 状态颜色 */ -.status-normal { color: #52c41a; } -.status-pregnant { color: #faad14; } -.status-sick { color: #f5222d; } -.status-quarantine { color: #909399; } - -/* 主题颜色 */ -.color-primary { color: #3cc51f; } -.color-success { color: #52c41a; } -.color-warning { color: #faad14; } -.color-danger { color: #f5222d; } -.color-info { color: #1890ff; } - -.bg-primary { background-color: #3cc51f; } -.bg-success { background-color: #52c41a; } -.bg-warning { background-color: #faad14; } -.bg-danger { background-color: #f5222d; } -.bg-info { background-color: #1890ff; } - -/* 文字颜色 */ -.text-primary { color: #303133; } -.text-regular { color: #606266; } -.text-secondary { color: #909399; } -.text-placeholder { color: #c0c4cc; } - -/* 背景颜色 */ -.bg-white { background-color: #ffffff; } -.bg-gray { background-color: #f5f5f5; } -.bg-light { background-color: #fafafa; } - -/* 边框 */ -.border { border: 1rpx solid #dcdfe6; } -.border-top { border-top: 1rpx solid #dcdfe6; } -.border-bottom { border-bottom: 1rpx solid #dcdfe6; } -.border-left { border-left: 1rpx solid #dcdfe6; } -.border-right { border-right: 1rpx solid #dcdfe6; } - -/* 圆角 */ -.rounded { border-radius: 4rpx; } -.rounded-sm { border-radius: 2rpx; } -.rounded-lg { border-radius: 8rpx; } -.rounded-xl { border-radius: 12rpx; } -.rounded-full { border-radius: 50%; } - -/* 阴影 */ -.shadow { box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1); } -.shadow-sm { box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05); } -.shadow-lg { box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15); } - -/* 按钮样式 */ -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 16rpx 32rpx; - border-radius: 8rpx; - font-size: 28rpx; - font-weight: 500; - text-align: center; - border: none; - cursor: pointer; - transition: all 0.3s; -} - -.btn-primary { - background-color: #3cc51f; - color: #ffffff; -} - -.btn-primary:active { - background-color: #2ea617; -} - -.btn-success { - background-color: #52c41a; - color: #ffffff; -} - -.btn-success:active { - background-color: #389e0d; -} - -.btn-warning { - background-color: #faad14; - color: #ffffff; -} - -.btn-warning:active { - background-color: #d48806; -} - -.btn-danger { - background-color: #f5222d; - color: #ffffff; -} - -.btn-danger:active { - background-color: #cf1322; -} - -.btn-default { - background-color: #ffffff; - color: #303133; - border: 1rpx solid #dcdfe6; -} - -.btn-default:active { - background-color: #f5f5f5; -} - -.btn-small { - padding: 8rpx 16rpx; - font-size: 24rpx; -} - -.btn-large { - padding: 24rpx 48rpx; - font-size: 32rpx; -} - -/* 卡片样式 */ -.card { - background-color: #ffffff; - border-radius: 8rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); - overflow: hidden; -} - -.card-header { - padding: 24rpx; - border-bottom: 1rpx solid #f0f0f0; - font-weight: 500; - font-size: 32rpx; -} - -.card-body { - padding: 24rpx; -} - -.card-footer { - padding: 24rpx; - border-top: 1rpx solid #f0f0f0; - background-color: #fafafa; -} - -/* 列表样式 */ -.list-item { - display: flex; - align-items: center; - padding: 24rpx; - background-color: #ffffff; - border-bottom: 1rpx solid #f0f0f0; -} - -.list-item:last-child { - border-bottom: none; -} - -.list-item:active { - background-color: #f5f5f5; -} - -/* 加载动画 */ -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -.loading-spinner { - width: 48rpx; - height: 48rpx; - border: 4rpx solid #f0f0f0; - border-top: 4rpx solid #3cc51f; - border-radius: 50%; - animation: spin 1s linear infinite; -} - -/* 空状态 */ -.empty-state { - text-align: center; - padding: 64rpx 32rpx; - color: #909399; -} - -.empty-icon { - font-size: 64rpx; - margin-bottom: 16rpx; - display: block; -} - -.empty-text { - font-size: 28rpx; -} - -/* 响应式设计 */ -@media (max-width: 375px) { - .container { - margin: 8rpx; - padding: 12rpx; - } - - .btn { - padding: 12rpx 24rpx; - font-size: 26rpx; - } - - .card-header, - .card-body, - .card-footer { - padding: 16rpx; - } - - .list-item { - padding: 16rpx; - } -} +/* app.wxss - 全局样式 */ + +/* 全局重置 */ +page { + background-color: #f6f6f6; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 14px; + color: #303133; + line-height: 1.6; +} + +/* 容器样式 */ +.container { + padding: 16rpx; + background-color: #ffffff; + border-radius: 8rpx; + margin: 16rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); +} + +/* 通用工具类 */ +.text-center { text-align: center; } +.text-left { text-align: left; } +.text-right { text-align: right; } + +.mt-8 { margin-top: 8rpx; } +.mt-16 { margin-top: 16rpx; } +.mt-24 { margin-top: 24rpx; } +.mt-32 { margin-top: 32rpx; } +.mb-8 { margin-bottom: 8rpx; } +.mb-16 { margin-bottom: 16rpx; } +.mb-24 { margin-bottom: 24rpx; } +.mb-32 { margin-bottom: 32rpx; } + +.pt-8 { padding-top: 8rpx; } +.pt-16 { padding-top: 16rpx; } +.pt-24 { padding-top: 24rpx; } +.pt-32 { padding-top: 32rpx; } +.pb-8 { padding-bottom: 8rpx; } +.pb-16 { padding-bottom: 16rpx; } +.pb-24 { padding-bottom: 24rpx; } +.pb-32 { padding-bottom: 32rpx; } + +.p-8 { padding: 8rpx; } +.p-16 { padding: 16rpx; } +.p-24 { padding: 24rpx; } +.p-32 { padding: 32rpx; } + +.m-8 { margin: 8rpx; } +.m-16 { margin: 16rpx; } +.m-24 { margin: 24rpx; } +.m-32 { margin: 32rpx; } + +/* Flex布局 */ +.flex { display: flex; } +.flex-column { flex-direction: column; } +.flex-wrap { flex-wrap: wrap; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.justify-end { justify-content: flex-end; } +.justify-start { justify-content: flex-start; } +.align-center { align-items: center; } +.align-start { align-items: flex-start; } +.align-end { align-items: flex-end; } + +/* 状态颜色 */ +.status-normal { color: #52c41a; } +.status-pregnant { color: #faad14; } +.status-sick { color: #f5222d; } +.status-quarantine { color: #909399; } + +/* 主题颜色 */ +.color-primary { color: #3cc51f; } +.color-success { color: #52c41a; } +.color-warning { color: #faad14; } +.color-danger { color: #f5222d; } +.color-info { color: #1890ff; } + +.bg-primary { background-color: #3cc51f; } +.bg-success { background-color: #52c41a; } +.bg-warning { background-color: #faad14; } +.bg-danger { background-color: #f5222d; } +.bg-info { background-color: #1890ff; } + +/* 文字颜色 */ +.text-primary { color: #303133; } +.text-regular { color: #606266; } +.text-secondary { color: #909399; } +.text-placeholder { color: #c0c4cc; } + +/* 背景颜色 */ +.bg-white { background-color: #ffffff; } +.bg-gray { background-color: #f5f5f5; } +.bg-light { background-color: #fafafa; } + +/* 边框 */ +.border { border: 1rpx solid #dcdfe6; } +.border-top { border-top: 1rpx solid #dcdfe6; } +.border-bottom { border-bottom: 1rpx solid #dcdfe6; } +.border-left { border-left: 1rpx solid #dcdfe6; } +.border-right { border-right: 1rpx solid #dcdfe6; } + +/* 圆角 */ +.rounded { border-radius: 4rpx; } +.rounded-sm { border-radius: 2rpx; } +.rounded-lg { border-radius: 8rpx; } +.rounded-xl { border-radius: 12rpx; } +.rounded-full { border-radius: 50%; } + +/* 阴影 */ +.shadow { box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1); } +.shadow-sm { box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05); } +.shadow-lg { box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15); } + +/* 按钮样式 */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 16rpx 32rpx; + border-radius: 8rpx; + font-size: 28rpx; + font-weight: 500; + text-align: center; + border: none; + cursor: pointer; + transition: all 0.3s; +} + +.btn-primary { + background-color: #3cc51f; + color: #ffffff; +} + +.btn-primary:active { + background-color: #2ea617; +} + +.btn-success { + background-color: #52c41a; + color: #ffffff; +} + +.btn-success:active { + background-color: #389e0d; +} + +.btn-warning { + background-color: #faad14; + color: #ffffff; +} + +.btn-warning:active { + background-color: #d48806; +} + +.btn-danger { + background-color: #f5222d; + color: #ffffff; +} + +.btn-danger:active { + background-color: #cf1322; +} + +.btn-default { + background-color: #ffffff; + color: #303133; + border: 1rpx solid #dcdfe6; +} + +.btn-default:active { + background-color: #f5f5f5; +} + +.btn-small { + padding: 8rpx 16rpx; + font-size: 24rpx; +} + +.btn-large { + padding: 24rpx 48rpx; + font-size: 32rpx; +} + +/* 卡片样式 */ +.card { + background-color: #ffffff; + border-radius: 8rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); + overflow: hidden; +} + +.card-header { + padding: 24rpx; + border-bottom: 1rpx solid #f0f0f0; + font-weight: 500; + font-size: 32rpx; +} + +.card-body { + padding: 24rpx; +} + +.card-footer { + padding: 24rpx; + border-top: 1rpx solid #f0f0f0; + background-color: #fafafa; +} + +/* 列表样式 */ +.list-item { + display: flex; + align-items: center; + padding: 24rpx; + background-color: #ffffff; + border-bottom: 1rpx solid #f0f0f0; +} + +.list-item:last-child { + border-bottom: none; +} + +.list-item:active { + background-color: #f5f5f5; +} + +/* 加载动画 */ +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.loading-spinner { + width: 48rpx; + height: 48rpx; + border: 4rpx solid #f0f0f0; + border-top: 4rpx solid #3cc51f; + border-radius: 50%; + animation: spin 1s linear infinite; +} + +/* 空状态 */ +.empty-state { + text-align: center; + padding: 64rpx 32rpx; + color: #909399; +} + +.empty-icon { + font-size: 64rpx; + margin-bottom: 16rpx; + display: block; +} + +.empty-text { + font-size: 28rpx; +} + +/* 响应式设计 */ +@media (max-width: 375px) { + .container { + margin: 8rpx; + padding: 12rpx; + } + + .btn { + padding: 12rpx 24rpx; + font-size: 26rpx; + } + + .card-header, + .card-body, + .card-footer { + padding: 16rpx; + } + + .list-item { + padding: 16rpx; + } +} diff --git a/mini_program/farm-monitor-dashboard/config/env.js b/mini_program/farm-monitor-dashboard/config/env.js new file mode 100644 index 0000000..1710c88 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/config/env.js @@ -0,0 +1,48 @@ +// config/env.js - 环境配置文件 + +/** + * 环境配置 + * 可以根据不同环境切换API地址 + */ + +// 开发环境 +const development = { + apiBaseUrl: 'https://ad.ningmuyun.com/farm/api', + uploadUrl: 'https://ad.ningmuyun.com/farm/api/upload', + imageBaseUrl: 'https://ad.ningmuyun.com/farm', + timeout: 10000, + debug: true +} + +// 测试环境 +const testing = { + apiBaseUrl: 'https://test.ningmuyun.com/farm/api', + uploadUrl: 'https://test.ningmuyun.com/farm/api/upload', + imageBaseUrl: 'https://test.ningmuyun.com/farm', + timeout: 10000, + debug: true +} + +// 生产环境 +const production = { + apiBaseUrl: 'https://ad.ningmuyun.com/farm/api', + uploadUrl: 'https://ad.ningmuyun.com/farm/api/upload', + imageBaseUrl: 'https://ad.ningmuyun.com/farm', + timeout: 10000, + debug: false +} + +// 当前环境配置 +// 可以通过修改这里来切换环境 +const currentEnv = 'development' // development | testing | production + +// 环境映射 +const envMap = { + development, + testing, + production +} + +// 导出当前环境配置 +module.exports = envMap[currentEnv] + diff --git a/mini_program/farm-monitor-dashboard/images/fence-marker.svg b/mini_program/farm-monitor-dashboard/images/fence-marker.svg index a3a0182..7e56115 100644 --- a/mini_program/farm-monitor-dashboard/images/fence-marker.svg +++ b/mini_program/farm-monitor-dashboard/images/fence-marker.svg @@ -1,21 +1,21 @@ - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/mini_program/farm-monitor-dashboard/images/图标资源获取指南.md b/mini_program/farm-monitor-dashboard/images/图标资源获取指南.md new file mode 100644 index 0000000..e094ff1 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/images/图标资源获取指南.md @@ -0,0 +1,234 @@ +# 首页图标资源获取指南 + +## 📌 需要的图标列表 + +根据首页UI设计，需要准备以下13个图标文件： + +### 智能设备图标（5个） +1. ✅ `icon-collar.png` - 智能项圈图标 +2. ✅ `icon-eartag.png` - 智能耳标图标 +3. ✅ `icon-anklet.png` - 智能脚环图标 +4. ✅ `icon-host.png` - 智能主机图标 +5. ✅ `icon-monitor.png` - 视频监控图标 + +### 智能工具图标（4个） +6. ✅ `icon-fence.png` - 电子围栏图标 +7. ✅ `icon-scan.png` - 扫码溯源图标 +8. ✅ `icon-check.png` - 检测工具图标 +9. ✅ `icon-photo.png` - 档案拍照图标 + +### 业务办理图标（3个） +10. ✅ `icon-quarantine.png` - 电子检疫图标 +11. ✅ `icon-rights.png` - 电子确权图标 +12. ✅ `icon-disposal.png` - 无害化处理申报图标 + +--- + +## 🎨 图标规格要求 + +### 尺寸 +- **推荐尺寸**：120x120 像素 +- **最小尺寸**：60x60 像素 +- **最大尺寸**：200x200 像素 + +### 格式 +- **格式**：PNG（推荐，支持透明） +- **备选**：SVG（矢量图，可缩放） + +### 风格 +- **图标风格**：扁平化、线性或面性图标 +- **颜色**：单色或双色（与背景渐变色搭配） +- **背景**：透明背景 + +### 文件大小 +- 每个图标文件不超过50KB + +--- + +## 🔍 图标获取途径 + +### 方法一：使用在线图标库（推荐） + +#### 1. 阿里巴巴矢量图标库（iconfont） +🔗 https://www.iconfont.cn/ + +**步骤：** +1. 注册/登录账号 +2. 搜索对应的图标关键词 +3. 选择合适的图标 +4. 下载PNG格式（120x120） +5. 重命名为对应的文件名 + +**推荐搜索关键词：** +- 项圈：collar, necklace, tag +- 耳标：tag, label, eartag +- 脚环：anklet, tracker +- 主机：server, host, gateway +- 监控：monitor, camera, video +- 围栏：fence, boundary +- 扫码：scan, qrcode, barcode +- 检测：check, test, detect +- 拍照：camera, photo +- 检疫：quarantine, inspection +- 确权：certificate, rights +- 处理：recycle, disposal + +#### 2. IconPark（字节跳动） +🔗 https://iconpark.oceanengine.com/ + +**特点：** +- 高质量图标 +- 可自定义颜色 +- 支持多种格式下载 + +#### 3. Flaticon +🔗 https://www.flaticon.com/ + +**特点：** +- 海量免费图标 +- 支持PNG、SVG格式 +- 需要注明来源 + +#### 4. IconFinder +🔗 https://www.iconfinder.com/ + +**特点：** +- 免费+付费图标 +- 质量高 +- 可按风格筛选 + +--- + +### 方法二：设计师制作 + +如果您有设计师，可以根据以下参考制作图标： + +**智能项圈**：圆形项圈 + 信号图标 +**智能耳标**：标签形状 + 数字/信号 +**智能脚环**：圆环 + 定位图标 +**智能主机**：服务器/主机图标 +**视频监控**：摄像头图标 +**电子围栏**：围栏/边界图标 +**扫码溯源**：二维码/扫描图标 +**检测工具**：检查/测试图标 +**档案拍照**：相机图标 +**电子检疫**：文档+检查图标 +**电子确权**：证书/文档图标 +**无害化处理**：回收/处理图标 + +--- + +### 方法三：使用Emoji（临时方案） + +如果暂时没有图标资源，可以先用Emoji代替（已在代码中实现）： + +当前使用的Emoji： +- 🎯 智能项圈 +- 🏷️ 智能耳标 +- 📍 智能脚环 +- 📡 智能主机 +- 📹 视频监控 +- ⭕ 电子围栏 +- ✓ 扫码溯源 +- 📊 检测工具 +- 📷 档案拍照 +- 📋 电子检疫 +- 📝 电子确权 +- ♻️ 无害化处理申报 + +**如需使用Emoji，请修改代码：** +将 `` 标签改为 `` 标签即可。 + +--- + +## 📦 下载后的操作步骤 + +### 1. 重命名文件 +按照上述文件名列表，将下载的图标重命名。 + +### 2. 放置图标 +将所有图标文件复制到： +``` +mini_program/farm-monitor-dashboard/images/ +``` + +### 3. 验证图标 +在微信开发者工具中： +1. 打开首页 +2. 检查所有图标是否正常显示 +3. 如有缺失，检查文件名是否正确 + +--- + +## 🎨 配色建议 + +虽然图标可以是单色的（代码中已设置背景色），但如果想要更好的视觉效果，建议图标颜色与背景色协调： + +| 功能 | 背景色 | 建议图标色 | +|------|--------|-----------| +| 智能项圈 | 黄色渐变 | 深橙色 #FF9800 | +| 智能耳标 | 蓝色渐变 | 深蓝色 #2196F3 | +| 智能脚环 | 紫色渐变 | 深紫色 #9C27B0 | +| 智能主机 | 浅蓝渐变 | 蓝色 #03A9F4 | +| 视频监控 | 橙色渐变 | 深橙色 #FF9800 | +| 电子围栏 | 黄橙渐变 | 橙色 #FFA726 | +| 扫码溯源 | 蓝色渐变 | 深蓝色 #5C6BC0 | +| 检测工具 | 紫色渐变 | 紫色 #7E57C2 | +| 档案拍照 | 红色渐变 | 红色 #EF5350 | +| 电子检疫 | 黄色渐变 | 金色 #FDD835 | +| 电子确权 | 青色渐变 | 青色 #26A69A | +| 无害化处理 | 绿紫渐变 | 绿色 #66BB6A | + +--- + +## 🚀 快速开始建议 + +**如果急于上线，建议：** + +1. **方案A**：先用Emoji（已实现） + - 优点：立即可用 + - 缺点：视觉效果一般 + +2. **方案B**：快速下载iconfont图标 + - 时间：约30分钟 + - 质量：中等 + - 适合：快速原型 + +3. **方案C**：请设计师定制 + - 时间：1-3天 + - 质量：高 + - 适合：正式发布 + +--- + +## ⚠️ 注意事项 + +1. **版权问题**： + - 使用免费图标库时，注意查看授权协议 + - 商用项目建议购买商业授权或定制 + +2. **文件命名**： + - 必须与代码中的文件名完全一致 + - 区分大小写 + +3. **图片优化**： + - 使用TinyPNG等工具压缩图片 + - 减少小程序包体积 + +4. **测试**： + - 在不同设备上测试显示效果 + - 确保图标清晰不模糊 + +--- + +## 📞 需要帮助？ + +如果您在获取或使用图标时遇到问题，可以： +1. 联系设计团队 +2. 查看微信小程序官方文档 +3. 在项目群中询问 + +--- + +**更新日期**：2025-01-09 + diff --git a/mini_program/farm-monitor-dashboard/images/地图标记图标说明.md b/mini_program/farm-monitor-dashboard/images/地图标记图标说明.md new file mode 100644 index 0000000..8f23123 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/images/地图标记图标说明.md @@ -0,0 +1,70 @@ +# 地图标记图标说明 + +## 📍 所需图标 + +电子围栏地图功能需要以下图标文件： + +### marker.png +**路径：** `/images/marker.png` + +**用途：** 地图上的围栏中心点标记 + +**建议规格：** +- 尺寸：60x60 像素（或更大，保持1:1比例） +- 格式：PNG（支持透明背景） +- 颜色：建议使用绿色或红色（匹配围栏状态） + +**图标样式建议：** +- 📍 红色定位针图标 +- 🔴 实心圆点标记 +- 🟢 绿色标记点 + +--- + +## 🎨 获取图标的方法 + +### 方法1：使用在线图标库 +1. 访问 [Iconfont](https://www.iconfont.cn/) 或 [IconPark](https://iconpark.oceanengine.com/) +2. 搜索 "地图标记" 或 "定位" +3. 选择喜欢的图标 +4. 下载PNG格式（60x60或更大） +5. 重命名为 `marker.png` +6. 放置到 `images/` 目录 + +### 方法2：使用系统Emoji（临时方案） +代码中已使用Emoji作为临时标记，无需额外图标文件。 + +如果图标文件不存在，将使用默认的地图气泡标记。 + +--- + +## 🔄 替代方案 + +如果没有图标文件，可以修改代码使用默认标记： + +```javascript +// 在 fence.js 中修改 marker 配置 +const marker = { + id: fence.id, + latitude: parseFloat(fence.center.lat), + longitude: parseFloat(fence.center.lng), + title: fence.name, + // iconPath: '/images/marker.png', // 注释掉这行 + width: 30, + height: 30, + callout: { + content: `${fence.name}\n${fence.type}`, + fontSize: 12, + borderRadius: 5, + padding: 8, + display: 'ALWAYS' + } +} +``` + +这样将使用微信地图的默认红色气泡标记。 + +--- + +**说明：** 当前代码使用了 `/images/marker.png`，如果该文件不存在，地图标记仍然会显示，只是使用默认样式。 + diff --git a/mini_program/farm-monitor-dashboard/manifest.json b/mini_program/farm-monitor-dashboard/manifest.json index 047c991..0482ec9 100644 --- a/mini_program/farm-monitor-dashboard/manifest.json +++ b/mini_program/farm-monitor-dashboard/manifest.json @@ -1,80 +1,80 @@ -{ - "name": "养殖端小程序", - "appid": "wx-your-appid-here", - "description": "养殖管理系统微信小程序", - "versionName": "1.0.0", - "versionCode": "100", - "transformPx": false, - "mp-weixin": { - "appid": "wx-your-appid-here", - "setting": { - "urlCheck": false, - "es6": true, - "postcss": true, - "minified": true - }, - "usingComponents": true, - "permission": { - "scope.userLocation": { - "desc": "你的位置信息将用于养殖场定位和地图展示" - } - }, - "optimization": { - "subPackages": true - } - }, - "vueVersion": "3", - "splashscreen": { - "alwaysShowBeforeRender": true, - "autoclose": false, - "waiting": true - }, - "app-plus": { - "usingComponents": true, - "nvueStyle": "flex", - "compilerVersion": 3, - "splashscreen": { - "alwaysShowBeforeRender": true, - "autoclose": false, - "waiting": true, - "delay": 0 - }, - "modules": {}, - "distribute": { - "android": { - "permissions": [ - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "" - ] - }, - "ios": {} - } - }, - "quickapp": {}, - "h5": { - "router": { - "mode": "hash" - }, - "optimization": { - "treeShaking": { - "enable": true - } - } - } +{ + "name": "养殖端小程序", + "appid": "wx-your-appid-here", + "description": "养殖管理系统微信小程序", + "versionName": "1.0.0", + "versionCode": "100", + "transformPx": false, + "mp-weixin": { + "appid": "wx-your-appid-here", + "setting": { + "urlCheck": false, + "es6": true, + "postcss": true, + "minified": true + }, + "usingComponents": true, + "permission": { + "scope.userLocation": { + "desc": "你的位置信息将用于养殖场定位和地图展示" + } + }, + "optimization": { + "subPackages": true + } + }, + "vueVersion": "3", + "splashscreen": { + "alwaysShowBeforeRender": true, + "autoclose": false, + "waiting": true + }, + "app-plus": { + "usingComponents": true, + "nvueStyle": "flex", + "compilerVersion": 3, + "splashscreen": { + "alwaysShowBeforeRender": true, + "autoclose": false, + "waiting": true, + "delay": 0 + }, + "modules": {}, + "distribute": { + "android": { + "permissions": [ + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "" + ] + }, + "ios": {} + } + }, + "quickapp": {}, + "h5": { + "router": { + "mode": "hash" + }, + "optimization": { + "treeShaking": { + "enable": true + } + } + } } \ No newline at end of file diff --git a/mini_program/farm-monitor-dashboard/pages.json b/mini_program/farm-monitor-dashboard/pages.json index 747b05d..7c3c416 100644 --- a/mini_program/farm-monitor-dashboard/pages.json +++ b/mini_program/farm-monitor-dashboard/pages.json @@ -1,141 +1,141 @@ -{ - "pages": [ - { - "path": "pages/index/index", - "style": { - "navigationBarTitleText": "养殖管理", - "enablePullDownRefresh": true, - "backgroundColor": "#f6f6f6" - } - }, - { - "path": "pages/login/login", - "style": { - "navigationBarTitleText": "登录", - "navigationStyle": "custom", - "disableScroll": true - } - }, - { - "path": "pages/cattle/cattle", - "style": { - "navigationBarTitleText": "牛只管理", - "enablePullDownRefresh": true, - "backgroundColor": "#f6f6f6" - } - }, - { - "path": "pages/cattle-detail/cattle-detail", - "style": { - "navigationBarTitleText": "牛只详情", - "navigationBarBackgroundColor": "#ffffff", - "navigationBarTextStyle": "black" - } - }, - { - "path": "pages/farms/farms", - "style": { - "navigationBarTitleText": "养殖场管理", - "enablePullDownRefresh": true - } - }, - { - "path": "pages/farm-detail/farm-detail", - "style": { - "navigationBarTitleText": "养殖场详情", - "navigationBarBackgroundColor": "#ffffff" - } - }, - { - "path": "pages/growth/growth", - "style": { - "navigationBarTitleText": "生长数据", - "navigationBarBackgroundColor": "#ffffff" - } - }, - { - "path": "pages/events/events", - "style": { - "navigationBarTitleText": "事件记录", - "enablePullDownRefresh": true - } - }, - { - "path": "pages/stats/stats", - "style": { - "navigationBarTitleText": "统计分析", - "navigationBarBackgroundColor": "#ffffff" - } - }, - { - "path": "pages/my/my", - "style": { - "navigationBarTitleText": "个人中心", - "navigationBarBackgroundColor": "#ffffff" - } - } - ], - "tabBar": { - "color": "#7A7E83", - "selectedColor": "#1890ff", - "borderStyle": "black", - "backgroundColor": "#ffffff", - "list": [ - { - "pagePath": "pages/index/index", - "iconPath": "static/tabbar/home.png", - "selectedIconPath": "static/tabbar/home-active.png", - "text": "首页" - }, - { - "pagePath": "pages/cattle/cattle", - "iconPath": "static/tabbar/cattle.png", - "selectedIconPath": "static/tabbar/cattle-active.png", - "text": "牛只" - }, - { - "pagePath": "pages/farms/farms", - "iconPath": "static/tabbar/farm.png", - "selectedIconPath": "static/tabbar/farm-active.png", - "text": "养殖场" - }, - { - "pagePath": "pages/my/my", - "iconPath": "static/tabbar/my.png", - "selectedIconPath": "static/tabbar/my-active.png", - "text": "我的" - } - ] - }, - "globalStyle": { - "navigationBarTextStyle": "black", - "navigationBarTitleText": "养殖管理系统", - "navigationBarBackgroundColor": "#ffffff", - "backgroundColor": "#f6f6f6", - "app-plus": { - "background": "#efeff4" - } - }, - "easycom": { - "autoscan": true, - "custom": { - "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue", - "^van-(.*)": "@vant/weapp/dist/$1/index" - } - }, - "condition": { - "current": 0, - "list": [ - { - "name": "牛只详情", - "path": "pages/cattle-detail/cattle-detail", - "query": "id=1" - }, - { - "name": "设备详情", - "path": "pages/device-detail/device-detail", - "query": "id=1" - } - ] - } +{ + "pages": [ + { + "path": "pages/index/index", + "style": { + "navigationBarTitleText": "养殖管理", + "enablePullDownRefresh": true, + "backgroundColor": "#f6f6f6" + } + }, + { + "path": "pages/login/login", + "style": { + "navigationBarTitleText": "登录", + "navigationStyle": "custom", + "disableScroll": true + } + }, + { + "path": "pages/cattle/cattle", + "style": { + "navigationBarTitleText": "牛只管理", + "enablePullDownRefresh": true, + "backgroundColor": "#f6f6f6" + } + }, + { + "path": "pages/cattle-detail/cattle-detail", + "style": { + "navigationBarTitleText": "牛只详情", + "navigationBarBackgroundColor": "#ffffff", + "navigationBarTextStyle": "black" + } + }, + { + "path": "pages/farms/farms", + "style": { + "navigationBarTitleText": "养殖场管理", + "enablePullDownRefresh": true + } + }, + { + "path": "pages/farm-detail/farm-detail", + "style": { + "navigationBarTitleText": "养殖场详情", + "navigationBarBackgroundColor": "#ffffff" + } + }, + { + "path": "pages/growth/growth", + "style": { + "navigationBarTitleText": "生长数据", + "navigationBarBackgroundColor": "#ffffff" + } + }, + { + "path": "pages/events/events", + "style": { + "navigationBarTitleText": "事件记录", + "enablePullDownRefresh": true + } + }, + { + "path": "pages/stats/stats", + "style": { + "navigationBarTitleText": "统计分析", + "navigationBarBackgroundColor": "#ffffff" + } + }, + { + "path": "pages/my/my", + "style": { + "navigationBarTitleText": "个人中心", + "navigationBarBackgroundColor": "#ffffff" + } + } + ], + "tabBar": { + "color": "#7A7E83", + "selectedColor": "#1890ff", + "borderStyle": "black", + "backgroundColor": "#ffffff", + "list": [ + { + "pagePath": "pages/index/index", + "iconPath": "static/tabbar/home.png", + "selectedIconPath": "static/tabbar/home-active.png", + "text": "首页" + }, + { + "pagePath": "pages/cattle/cattle", + "iconPath": "static/tabbar/cattle.png", + "selectedIconPath": "static/tabbar/cattle-active.png", + "text": "牛只" + }, + { + "pagePath": "pages/farms/farms", + "iconPath": "static/tabbar/farm.png", + "selectedIconPath": "static/tabbar/farm-active.png", + "text": "养殖场" + }, + { + "pagePath": "pages/my/my", + "iconPath": "static/tabbar/my.png", + "selectedIconPath": "static/tabbar/my-active.png", + "text": "我的" + } + ] + }, + "globalStyle": { + "navigationBarTextStyle": "black", + "navigationBarTitleText": "养殖管理系统", + "navigationBarBackgroundColor": "#ffffff", + "backgroundColor": "#f6f6f6", + "app-plus": { + "background": "#efeff4" + } + }, + "easycom": { + "autoscan": true, + "custom": { + "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue", + "^van-(.*)": "@vant/weapp/dist/$1/index" + } + }, + "condition": { + "current": 0, + "list": [ + { + "name": "牛只详情", + "path": "pages/cattle-detail/cattle-detail", + "query": "id=1" + }, + { + "name": "设备详情", + "path": "pages/device-detail/device-detail", + "query": "id=1" + } + ] + } } \ No newline at end of file diff --git a/mini_program/farm-monitor-dashboard/pages/alert/alert.js b/mini_program/farm-monitor-dashboard/pages/alert/alert.js index a212f61..8bbd494 100644 --- a/mini_program/farm-monitor-dashboard/pages/alert/alert.js +++ b/mini_program/farm-monitor-dashboard/pages/alert/alert.js @@ -1,589 +1,589 @@ -// pages/alert/alert.js -const { get, post } = require('../../utils/api') -const { formatDate, formatTime } = require('../../utils/index') -// 引入预警相关真实接口 -const { alertApi } = require('../../services/api') - -Page({ - data: { - alertList: [], - loading: false, - refreshing: false, - searchKeyword: '', - typeFilter: 'all', - statusFilter: 'all', - page: 1, - pageSize: 20, - hasMore: true, - total: 0, - // 详情弹窗 - detailVisible: false, - detailData: null, - detailPairs: [], - alertTypes: [ - { value: 'eartag', label: '耳标预警', icon: '🏷️' }, - { value: 'collar', label: '项圈预警', icon: '📱' }, - { value: 'fence', label: '围栏预警', icon: '🚧' }, - { value: 'health', label: '健康预警', icon: '🏥' } - ], - alertStatuses: [ - { value: 'pending', label: '待处理', color: '#faad14' }, - { value: 'processing', label: '处理中', color: '#1890ff' }, - { value: 'resolved', label: '已解决', color: '#52c41a' }, - { value: 'ignored', label: '已忽略', color: '#909399' } - ] - }, - - onLoad(options) { - // 允许通过URL参数设置默认筛选：?type=eartag&status=pending - const { type, status } = options || {} - const validTypes = this.data.alertTypes.map(t => t.value) - const validStatuses = this.data.alertStatuses.map(s => s.value) - - if (type && validTypes.includes(type)) { - this.setData({ typeFilter: type }) - } - if (status && validStatuses.includes(status)) { - this.setData({ statusFilter: status }) - } - - this.loadAlertList() - }, - - onShow() { - this.loadAlertList() - }, - - onPullDownRefresh() { - this.setData({ - page: 1, - hasMore: true, - alertList: [] - }) - this.loadAlertList().then(() => { - wx.stopPullDownRefresh() - }) - }, - - onReachBottom() { - if (this.data.hasMore && !this.data.loading) { - this.loadMoreAlerts() - } - }, - - // 加载预警列表 - async loadAlertList() { - this.setData({ loading: true }) - - try { - // 当类型为耳标预警时，改用智能耳标公开接口 - if (this.data.typeFilter === 'eartag') { - const params = { - search: this.data.searchKeyword || '', - alertType: '', - page: this.data.page, - limit: this.data.pageSize - } - const res = await alertApi.getEartagAlerts(params) - let newList = [] - if (Array.isArray(res)) { - newList = res - } else if (res && Array.isArray(res.data)) { - newList = res.data - } - // 将远程数据映射为页面展示所需结构 - const mappedList = newList.map(item => this.mapEartagAlertToListItem(item)) - const alertList = this.data.page === 1 ? mappedList : [...this.data.alertList, ...mappedList] - this.setData({ - alertList, - total: alertList.length, - hasMore: newList.length === this.data.pageSize - }) - return - } - - // 当类型为项圈预警时，改用智能项圈公开接口 - if (this.data.typeFilter === 'collar') { - const params = { - search: this.data.searchKeyword || '', - alertType: '', - page: this.data.page, - limit: this.data.pageSize - } - const res = await alertApi.getCollarAlerts(params) - let newList = [] - if (Array.isArray(res)) { - newList = res - } else if (res && Array.isArray(res.data)) { - newList = res.data - } - const mappedList = newList.map(item => this.mapCollarAlertToListItem(item)) - const alertList = this.data.page === 1 ? mappedList : [...this.data.alertList, ...mappedList] - this.setData({ - alertList, - total: alertList.length, - hasMore: newList.length === this.data.pageSize - }) - return - } - - // 其他类型维持原有接口逻辑 - const params = { - page: this.data.page, - pageSize: this.data.pageSize, - type: this.data.typeFilter === 'all' ? '' : this.data.typeFilter, - status: this.data.statusFilter === 'all' ? '' : this.data.statusFilter - } - - if (this.data.searchKeyword) { - params.search = this.data.searchKeyword - } - - const response = await get('/alerts', params) - - if (response.success) { - const newList = response.data.list || [] - const alertList = this.data.page === 1 ? newList : [...this.data.alertList, ...newList] - - this.setData({ - alertList, - total: response.data.total || 0, - hasMore: alertList.length < (response.data.total || 0) - }) - } else { - wx.showToast({ - title: response.message || '获取数据失败', - icon: 'none' - }) - } - } catch (error) { - console.error('获取预警列表失败:', error) - wx.showToast({ - title: '获取数据失败', - icon: 'none' - }) - } finally { - this.setData({ loading: false }) - } - }, - - // 加载更多预警 - async loadMoreAlerts() { - if (!this.data.hasMore || this.data.loading) return - - this.setData({ - page: this.data.page + 1 - }) - - await this.loadAlertList() - }, - - // 搜索输入 - onSearchInput(e) { - this.setData({ - searchKeyword: e.detail.value - }) - }, - - // 执行搜索 - onSearch() { - this.setData({ - page: 1, - hasMore: true, - alertList: [] - }) - this.loadAlertList() - }, - - // 清空搜索 - onClearSearch() { - this.setData({ - searchKeyword: '', - page: 1, - hasMore: true, - alertList: [] - }) - this.loadAlertList() - }, - - // 类型筛选 - onTypeFilter(e) { - const type = e.currentTarget.dataset.type - this.setData({ - typeFilter: type, - page: 1, - hasMore: true, - alertList: [] - }) - this.loadAlertList() - }, - - // 状态筛选 - onStatusFilter(e) { - const status = e.currentTarget.dataset.status - this.setData({ - statusFilter: status, - page: 1, - hasMore: true, - alertList: [] - }) - this.loadAlertList() - }, - - // 查看预警详情（在当前页弹窗展示） - async viewAlertDetail(e) { - const id = e.currentTarget.dataset.id - const type = e.currentTarget.dataset.type - - try { - wx.showLoading({ title: '加载详情...' }) - - let res - if (type === 'eartag') { - res = await alertApi.getEartagAlertDetail(id) - } else if (type === 'collar') { - res = await alertApi.getCollarAlertDetail(id) - } else { - // 其他类型暂未实现，给出提示 - wx.showToast({ title: '该类型详情暂未实现', icon: 'none' }) - return - } - - const detail = res?.data || res - const detailPairs = this.mapAlertDetail(type, detail) - - this.setData({ - detailVisible: true, - detailData: detail, - detailPairs - }) - } catch (err) { - console.error('加载预警详情失败:', err) - wx.showToast({ title: '加载详情失败', icon: 'none' }) - } finally { - wx.hideLoading() - } - }, - - // 关闭详情弹窗 - closeDetail() { - this.setData({ detailVisible: false, detailData: null, detailPairs: [] }) - }, - - // 处理预警 - async handleAlert(e) { - const id = e.currentTarget.dataset.id - const type = e.currentTarget.dataset.type - - const result = await wx.showModal({ - title: '处理预警', - content: '确定要处理这个预警吗？', - confirmText: '处理', - confirmColor: '#3cc51f' - }) - - if (result.confirm) { - try { - wx.showLoading({ title: '处理中...' }) - - const response = await post(`/alerts/${id}/handle`, { - type: type, - action: 'process' - }) - - if (response.success) { - wx.showToast({ - title: '处理成功', - icon: 'success' - }) - - // 刷新列表 - this.setData({ - page: 1, - hasMore: true, - alertList: [] - }) - this.loadAlertList() - } else { - wx.showToast({ - title: response.message || '处理失败', - icon: 'none' - }) - } - } catch (error) { - console.error('处理预警失败:', error) - wx.showToast({ - title: '处理失败', - icon: 'none' - }) - } finally { - wx.hideLoading() - } - } - }, - - // 忽略预警 - async ignoreAlert(e) { - const id = e.currentTarget.dataset.id - const type = e.currentTarget.dataset.type - - const result = await wx.showModal({ - title: '忽略预警', - content: '确定要忽略这个预警吗？', - confirmText: '忽略', - confirmColor: '#909399' - }) - - if (result.confirm) { - try { - wx.showLoading({ title: '忽略中...' }) - - const response = await post(`/alerts/${id}/handle`, { - type: type, - action: 'ignore' - }) - - if (response.success) { - wx.showToast({ - title: '已忽略', - icon: 'success' - }) - - // 刷新列表 - this.setData({ - page: 1, - hasMore: true, - alertList: [] - }) - this.loadAlertList() - } else { - wx.showToast({ - title: response.message || '操作失败', - icon: 'none' - }) - } - } catch (error) { - console.error('忽略预警失败:', error) - wx.showToast({ - title: '操作失败', - icon: 'none' - }) - } finally { - wx.hideLoading() - } - } - }, - - // 批量处理预警 - async batchHandleAlerts() { - const selectedAlerts = this.data.alertList.filter(alert => alert.selected) - - if (selectedAlerts.length === 0) { - wx.showToast({ - title: '请选择要处理的预警', - icon: 'none' - }) - return - } - - const result = await wx.showModal({ - title: '批量处理', - content: `确定要处理选中的${selectedAlerts.length}个预警吗？`, - confirmText: '处理', - confirmColor: '#3cc51f' - }) - - if (result.confirm) { - try { - wx.showLoading({ title: '处理中...' }) - - const alertIds = selectedAlerts.map(alert => alert.id) - const response = await post('/alerts/batch-handle', { - alertIds: alertIds, - action: 'process' - }) - - if (response.success) { - wx.showToast({ - title: '处理成功', - icon: 'success' - }) - - // 刷新列表 - this.setData({ - page: 1, - hasMore: true, - alertList: [] - }) - this.loadAlertList() - } else { - wx.showToast({ - title: response.message || '处理失败', - icon: 'none' - }) - } - } catch (error) { - console.error('批量处理预警失败:', error) - wx.showToast({ - title: '处理失败', - icon: 'none' - }) - } finally { - wx.hideLoading() - } - } - }, - - // 获取预警类型信息 - getAlertTypeInfo(type) { - return this.data.alertTypes.find(item => item.value === type) || { label: '未知', icon: '❓' } - }, - - // 获取状态信息 - getStatusInfo(status) { - return this.data.alertStatuses.find(item => item.value === status) || { label: '未知', color: '#909399' } - }, - - // 获取优先级文本 - getPriorityText(priority) { - const priorityMap = { - 'low': '低', - 'medium': '中', - 'high': '高', - 'urgent': '紧急' - } - return priorityMap[priority] || '未知' - }, - - // 获取优先级颜色 - getPriorityColor(priority) { - const colorMap = { - 'low': '#52c41a', - 'medium': '#faad14', - 'high': '#f5222d', - 'urgent': '#722ed1' - } - return colorMap[priority] || '#909399' - }, - - // 将远程耳标预警数据转换为页面列表所需字段 - mapEartagAlertToListItem(item) { - const titleMap = { - temperature: '温度异常', - movement: '运动量异常', - position: '位置异常', - battery: '电量偏低' - } - const titleBase = titleMap[item.alertType] || '耳标预警' - const levelText = item.alertLevel ? `（${item.alertLevel}）` : '' - return { - id: item.id || `${item.deviceId || 'unknown'}_${item.alertType || 'eartag'}`, - type: 'eartag', - title: `${titleBase}${levelText}`, - content: item.description || '', - deviceName: item.deviceName || item.eartagNumber || '未知', - createTime: item.alertTime || item.createTime || '', - status: 'pending', - priority: item.alertLevel || 'medium' - } - }, - - // 将远程项圈预警数据转换为页面列表所需字段 - mapCollarAlertToListItem(item) { - const titleMap = { - temperature: '温度异常', - movement: '运动量异常', - battery: '电量偏低', - offline: '设备离线', - gps: '定位异常', - wear: '佩戴异常' - } - const titleBase = titleMap[item.alertType] || '项圈预警' - const levelText = item.alertLevel ? `（${item.alertLevel}）` : '' - return { - id: item.id || `${item.deviceId || 'unknown'}_${item.alertType || 'collar'}`, - type: 'collar', - title: `${titleBase}${levelText}`, - content: item.description || '', - deviceName: item.deviceName || item.collarNumber || '未知', - createTime: item.alertTime || item.createTime || '', - status: 'pending', - priority: item.alertLevel || 'medium' - } - }, - - // 映射预警详情字段为键值对用于展示 - mapAlertDetail(type, d) { - if (!d) return [] - - // 通用映射函数 - const levelText = { - low: '低', - medium: '中', - high: '高', - urgent: '紧急' - } - const typeText = { - temperature: '温度', - battery: '电量', - movement: '运动', - offline: '离线', - gps: '定位', - eartag: '耳标', - collar: '项圈' - } - - const pairs = [] - // 基本信息 - pairs.push({ label: '预警ID', value: d.id || '-' }) - pairs.push({ label: '异常类型', value: typeText[d.alertType] || (d.alertType || '-') }) - pairs.push({ label: '异常等级', value: levelText[d.alertLevel] || (d.alertLevel || '-') }) - pairs.push({ label: '预警时间', value: d.alertTime ? this.formatTime(d.alertTime) : '-' }) - - if (type === 'eartag') { - pairs.push({ label: '耳标编号', value: d.eartagNumber || d.deviceName || '-' }) - pairs.push({ label: '设备ID', value: d.deviceId || '-' }) - pairs.push({ label: '设备状态', value: d.deviceStatus || '-' }) - // 传感数据 - if (d.temperature !== undefined) pairs.push({ label: '温度(°C)', value: d.temperature }) - if (d.battery !== undefined) pairs.push({ label: '电量(%)', value: d.battery }) - if (d.gpsSignal) pairs.push({ label: 'GPS信号', value: d.gpsSignal }) - if (d.longitude !== undefined) pairs.push({ label: '经度', value: d.longitude }) - if (d.latitude !== undefined) pairs.push({ label: '纬度', value: d.latitude }) - if (d.movementStatus) pairs.push({ label: '运动状态', value: d.movementStatus }) - if (d.dailySteps !== undefined) pairs.push({ label: '今日步数', value: d.dailySteps }) - if (d.yesterdaySteps !== undefined) pairs.push({ label: '昨日步数', value: d.yesterdaySteps }) - if (d.totalSteps !== undefined) pairs.push({ label: '总步数', value: d.totalSteps }) - if (d.description) pairs.push({ label: '描述', value: d.description }) - } else if (type === 'collar') { - // 项圈详情字段（完整展示你提供的示例数据） - pairs.push({ label: '项圈编号', value: d.collarNumber || d.deviceName || '-' }) - pairs.push({ label: '设备ID', value: d.deviceId || '-' }) - pairs.push({ label: '设备名称', value: d.deviceName || '-' }) - pairs.push({ label: '设备状态', value: d.deviceStatus || '-' }) - if (d.wearStatus) pairs.push({ label: '佩戴状态', value: d.wearStatus }) - if (d.temperature !== undefined) pairs.push({ label: '温度(°C)', value: d.temperature }) - if (d.battery !== undefined) pairs.push({ label: '电量(%)', value: d.battery }) - if (d.gpsSignal) pairs.push({ label: 'GPS信号', value: d.gpsSignal }) - if (d.longitude !== undefined) pairs.push({ label: '经度', value: d.longitude }) - if (d.latitude !== undefined) pairs.push({ label: '纬度', value: d.latitude }) - if (d.movementStatus) pairs.push({ label: '运动状态', value: d.movementStatus }) - if (d.dailySteps !== undefined) pairs.push({ label: '今日步数', value: d.dailySteps }) - if (d.yesterdaySteps !== undefined) pairs.push({ label: '昨日步数', value: d.yesterdaySteps }) - if (d.totalSteps !== undefined) pairs.push({ label: '总步数', value: d.totalSteps }) - if (d.description) pairs.push({ label: '描述', value: d.description }) - } - - return pairs - }, - - // 格式化日期 - formatDate(date) { - return formatDate(date) - }, - - // 格式化时间 - formatTime(time) { - return formatTime(time) - } -}) +// pages/alert/alert.js +const { get, post } = require('../../utils/api') +const { formatDate, formatTime } = require('../../utils/index') +// 引入预警相关真实接口 +const { alertApi } = require('../../services/api') + +Page({ + data: { + alertList: [], + loading: false, + refreshing: false, + searchKeyword: '', + typeFilter: 'all', + statusFilter: 'all', + page: 1, + pageSize: 20, + hasMore: true, + total: 0, + // 详情弹窗 + detailVisible: false, + detailData: null, + detailPairs: [], + alertTypes: [ + { value: 'eartag', label: '耳标预警', icon: '🏷️' }, + { value: 'collar', label: '项圈预警', icon: '📱' }, + { value: 'fence', label: '围栏预警', icon: '🚧' }, + { value: 'health', label: '健康预警', icon: '🏥' } + ], + alertStatuses: [ + { value: 'pending', label: '待处理', color: '#faad14' }, + { value: 'processing', label: '处理中', color: '#1890ff' }, + { value: 'resolved', label: '已解决', color: '#52c41a' }, + { value: 'ignored', label: '已忽略', color: '#909399' } + ] + }, + + onLoad(options) { + // 允许通过URL参数设置默认筛选：?type=eartag&status=pending + const { type, status } = options || {} + const validTypes = this.data.alertTypes.map(t => t.value) + const validStatuses = this.data.alertStatuses.map(s => s.value) + + if (type && validTypes.includes(type)) { + this.setData({ typeFilter: type }) + } + if (status && validStatuses.includes(status)) { + this.setData({ statusFilter: status }) + } + + this.loadAlertList() + }, + + onShow() { + this.loadAlertList() + }, + + onPullDownRefresh() { + this.setData({ + page: 1, + hasMore: true, + alertList: [] + }) + this.loadAlertList().then(() => { + wx.stopPullDownRefresh() + }) + }, + + onReachBottom() { + if (this.data.hasMore && !this.data.loading) { + this.loadMoreAlerts() + } + }, + + // 加载预警列表 + async loadAlertList() { + this.setData({ loading: true }) + + try { + // 当类型为耳标预警时，改用智能耳标公开接口 + if (this.data.typeFilter === 'eartag') { + const params = { + search: this.data.searchKeyword || '', + alertType: '', + page: this.data.page, + limit: this.data.pageSize + } + const res = await alertApi.getEartagAlerts(params) + let newList = [] + if (Array.isArray(res)) { + newList = res + } else if (res && Array.isArray(res.data)) { + newList = res.data + } + // 将远程数据映射为页面展示所需结构 + const mappedList = newList.map(item => this.mapEartagAlertToListItem(item)) + const alertList = this.data.page === 1 ? mappedList : [...this.data.alertList, ...mappedList] + this.setData({ + alertList, + total: alertList.length, + hasMore: newList.length === this.data.pageSize + }) + return + } + + // 当类型为项圈预警时，改用智能项圈公开接口 + if (this.data.typeFilter === 'collar') { + const params = { + search: this.data.searchKeyword || '', + alertType: '', + page: this.data.page, + limit: this.data.pageSize + } + const res = await alertApi.getCollarAlerts(params) + let newList = [] + if (Array.isArray(res)) { + newList = res + } else if (res && Array.isArray(res.data)) { + newList = res.data + } + const mappedList = newList.map(item => this.mapCollarAlertToListItem(item)) + const alertList = this.data.page === 1 ? mappedList : [...this.data.alertList, ...mappedList] + this.setData({ + alertList, + total: alertList.length, + hasMore: newList.length === this.data.pageSize + }) + return + } + + // 其他类型维持原有接口逻辑 + const params = { + page: this.data.page, + pageSize: this.data.pageSize, + type: this.data.typeFilter === 'all' ? '' : this.data.typeFilter, + status: this.data.statusFilter === 'all' ? '' : this.data.statusFilter + } + + if (this.data.searchKeyword) { + params.search = this.data.searchKeyword + } + + const response = await get('/alerts', params) + + if (response.success) { + const newList = response.data.list || [] + const alertList = this.data.page === 1 ? newList : [...this.data.alertList, ...newList] + + this.setData({ + alertList, + total: response.data.total || 0, + hasMore: alertList.length < (response.data.total || 0) + }) + } else { + wx.showToast({ + title: response.message || '获取数据失败', + icon: 'none' + }) + } + } catch (error) { + console.error('获取预警列表失败:', error) + wx.showToast({ + title: '获取数据失败', + icon: 'none' + }) + } finally { + this.setData({ loading: false }) + } + }, + + // 加载更多预警 + async loadMoreAlerts() { + if (!this.data.hasMore || this.data.loading) return + + this.setData({ + page: this.data.page + 1 + }) + + await this.loadAlertList() + }, + + // 搜索输入 + onSearchInput(e) { + this.setData({ + searchKeyword: e.detail.value + }) + }, + + // 执行搜索 + onSearch() { + this.setData({ + page: 1, + hasMore: true, + alertList: [] + }) + this.loadAlertList() + }, + + // 清空搜索 + onClearSearch() { + this.setData({ + searchKeyword: '', + page: 1, + hasMore: true, + alertList: [] + }) + this.loadAlertList() + }, + + // 类型筛选 + onTypeFilter(e) { + const type = e.currentTarget.dataset.type + this.setData({ + typeFilter: type, + page: 1, + hasMore: true, + alertList: [] + }) + this.loadAlertList() + }, + + // 状态筛选 + onStatusFilter(e) { + const status = e.currentTarget.dataset.status + this.setData({ + statusFilter: status, + page: 1, + hasMore: true, + alertList: [] + }) + this.loadAlertList() + }, + + // 查看预警详情（在当前页弹窗展示） + async viewAlertDetail(e) { + const id = e.currentTarget.dataset.id + const type = e.currentTarget.dataset.type + + try { + wx.showLoading({ title: '加载详情...' }) + + let res + if (type === 'eartag') { + res = await alertApi.getEartagAlertDetail(id) + } else if (type === 'collar') { + res = await alertApi.getCollarAlertDetail(id) + } else { + // 其他类型暂未实现，给出提示 + wx.showToast({ title: '该类型详情暂未实现', icon: 'none' }) + return + } + + const detail = res?.data || res + const detailPairs = this.mapAlertDetail(type, detail) + + this.setData({ + detailVisible: true, + detailData: detail, + detailPairs + }) + } catch (err) { + console.error('加载预警详情失败:', err) + wx.showToast({ title: '加载详情失败', icon: 'none' }) + } finally { + wx.hideLoading() + } + }, + + // 关闭详情弹窗 + closeDetail() { + this.setData({ detailVisible: false, detailData: null, detailPairs: [] }) + }, + + // 处理预警 + async handleAlert(e) { + const id = e.currentTarget.dataset.id + const type = e.currentTarget.dataset.type + + const result = await wx.showModal({ + title: '处理预警', + content: '确定要处理这个预警吗？', + confirmText: '处理', + confirmColor: '#3cc51f' + }) + + if (result.confirm) { + try { + wx.showLoading({ title: '处理中...' }) + + const response = await post(`/alerts/${id}/handle`, { + type: type, + action: 'process' + }) + + if (response.success) { + wx.showToast({ + title: '处理成功', + icon: 'success' + }) + + // 刷新列表 + this.setData({ + page: 1, + hasMore: true, + alertList: [] + }) + this.loadAlertList() + } else { + wx.showToast({ + title: response.message || '处理失败', + icon: 'none' + }) + } + } catch (error) { + console.error('处理预警失败:', error) + wx.showToast({ + title: '处理失败', + icon: 'none' + }) + } finally { + wx.hideLoading() + } + } + }, + + // 忽略预警 + async ignoreAlert(e) { + const id = e.currentTarget.dataset.id + const type = e.currentTarget.dataset.type + + const result = await wx.showModal({ + title: '忽略预警', + content: '确定要忽略这个预警吗？', + confirmText: '忽略', + confirmColor: '#909399' + }) + + if (result.confirm) { + try { + wx.showLoading({ title: '忽略中...' }) + + const response = await post(`/alerts/${id}/handle`, { + type: type, + action: 'ignore' + }) + + if (response.success) { + wx.showToast({ + title: '已忽略', + icon: 'success' + }) + + // 刷新列表 + this.setData({ + page: 1, + hasMore: true, + alertList: [] + }) + this.loadAlertList() + } else { + wx.showToast({ + title: response.message || '操作失败', + icon: 'none' + }) + } + } catch (error) { + console.error('忽略预警失败:', error) + wx.showToast({ + title: '操作失败', + icon: 'none' + }) + } finally { + wx.hideLoading() + } + } + }, + + // 批量处理预警 + async batchHandleAlerts() { + const selectedAlerts = this.data.alertList.filter(alert => alert.selected) + + if (selectedAlerts.length === 0) { + wx.showToast({ + title: '请选择要处理的预警', + icon: 'none' + }) + return + } + + const result = await wx.showModal({ + title: '批量处理', + content: `确定要处理选中的${selectedAlerts.length}个预警吗？`, + confirmText: '处理', + confirmColor: '#3cc51f' + }) + + if (result.confirm) { + try { + wx.showLoading({ title: '处理中...' }) + + const alertIds = selectedAlerts.map(alert => alert.id) + const response = await post('/alerts/batch-handle', { + alertIds: alertIds, + action: 'process' + }) + + if (response.success) { + wx.showToast({ + title: '处理成功', + icon: 'success' + }) + + // 刷新列表 + this.setData({ + page: 1, + hasMore: true, + alertList: [] + }) + this.loadAlertList() + } else { + wx.showToast({ + title: response.message || '处理失败', + icon: 'none' + }) + } + } catch (error) { + console.error('批量处理预警失败:', error) + wx.showToast({ + title: '处理失败', + icon: 'none' + }) + } finally { + wx.hideLoading() + } + } + }, + + // 获取预警类型信息 + getAlertTypeInfo(type) { + return this.data.alertTypes.find(item => item.value === type) || { label: '未知', icon: '❓' } + }, + + // 获取状态信息 + getStatusInfo(status) { + return this.data.alertStatuses.find(item => item.value === status) || { label: '未知', color: '#909399' } + }, + + // 获取优先级文本 + getPriorityText(priority) { + const priorityMap = { + 'low': '低', + 'medium': '中', + 'high': '高', + 'urgent': '紧急' + } + return priorityMap[priority] || '未知' + }, + + // 获取优先级颜色 + getPriorityColor(priority) { + const colorMap = { + 'low': '#52c41a', + 'medium': '#faad14', + 'high': '#f5222d', + 'urgent': '#722ed1' + } + return colorMap[priority] || '#909399' + }, + + // 将远程耳标预警数据转换为页面列表所需字段 + mapEartagAlertToListItem(item) { + const titleMap = { + temperature: '温度异常', + movement: '运动量异常', + position: '位置异常', + battery: '电量偏低' + } + const titleBase = titleMap[item.alertType] || '耳标预警' + const levelText = item.alertLevel ? `（${item.alertLevel}）` : '' + return { + id: item.id || `${item.deviceId || 'unknown'}_${item.alertType || 'eartag'}`, + type: 'eartag', + title: `${titleBase}${levelText}`, + content: item.description || '', + deviceName: item.deviceName || item.eartagNumber || '未知', + createTime: item.alertTime || item.createTime || '', + status: 'pending', + priority: item.alertLevel || 'medium' + } + }, + + // 将远程项圈预警数据转换为页面列表所需字段 + mapCollarAlertToListItem(item) { + const titleMap = { + temperature: '温度异常', + movement: '运动量异常', + battery: '电量偏低', + offline: '设备离线', + gps: '定位异常', + wear: '佩戴异常' + } + const titleBase = titleMap[item.alertType] || '项圈预警' + const levelText = item.alertLevel ? `（${item.alertLevel}）` : '' + return { + id: item.id || `${item.deviceId || 'unknown'}_${item.alertType || 'collar'}`, + type: 'collar', + title: `${titleBase}${levelText}`, + content: item.description || '', + deviceName: item.deviceName || item.collarNumber || '未知', + createTime: item.alertTime || item.createTime || '', + status: 'pending', + priority: item.alertLevel || 'medium' + } + }, + + // 映射预警详情字段为键值对用于展示 + mapAlertDetail(type, d) { + if (!d) return [] + + // 通用映射函数 + const levelText = { + low: '低', + medium: '中', + high: '高', + urgent: '紧急' + } + const typeText = { + temperature: '温度', + battery: '电量', + movement: '运动', + offline: '离线', + gps: '定位', + eartag: '耳标', + collar: '项圈' + } + + const pairs = [] + // 基本信息 + pairs.push({ label: '预警ID', value: d.id || '-' }) + pairs.push({ label: '异常类型', value: typeText[d.alertType] || (d.alertType || '-') }) + pairs.push({ label: '异常等级', value: levelText[d.alertLevel] || (d.alertLevel || '-') }) + pairs.push({ label: '预警时间', value: d.alertTime ? this.formatTime(d.alertTime) : '-' }) + + if (type === 'eartag') { + pairs.push({ label: '耳标编号', value: d.eartagNumber || d.deviceName || '-' }) + pairs.push({ label: '设备ID', value: d.deviceId || '-' }) + pairs.push({ label: '设备状态', value: d.deviceStatus || '-' }) + // 传感数据 + if (d.temperature !== undefined) pairs.push({ label: '温度(°C)', value: d.temperature }) + if (d.battery !== undefined) pairs.push({ label: '电量(%)', value: d.battery }) + if (d.gpsSignal) pairs.push({ label: 'GPS信号', value: d.gpsSignal }) + if (d.longitude !== undefined) pairs.push({ label: '经度', value: d.longitude }) + if (d.latitude !== undefined) pairs.push({ label: '纬度', value: d.latitude }) + if (d.movementStatus) pairs.push({ label: '运动状态', value: d.movementStatus }) + if (d.dailySteps !== undefined) pairs.push({ label: '今日步数', value: d.dailySteps }) + if (d.yesterdaySteps !== undefined) pairs.push({ label: '昨日步数', value: d.yesterdaySteps }) + if (d.totalSteps !== undefined) pairs.push({ label: '总步数', value: d.totalSteps }) + if (d.description) pairs.push({ label: '描述', value: d.description }) + } else if (type === 'collar') { + // 项圈详情字段（完整展示你提供的示例数据） + pairs.push({ label: '项圈编号', value: d.collarNumber || d.deviceName || '-' }) + pairs.push({ label: '设备ID', value: d.deviceId || '-' }) + pairs.push({ label: '设备名称', value: d.deviceName || '-' }) + pairs.push({ label: '设备状态', value: d.deviceStatus || '-' }) + if (d.wearStatus) pairs.push({ label: '佩戴状态', value: d.wearStatus }) + if (d.temperature !== undefined) pairs.push({ label: '温度(°C)', value: d.temperature }) + if (d.battery !== undefined) pairs.push({ label: '电量(%)', value: d.battery }) + if (d.gpsSignal) pairs.push({ label: 'GPS信号', value: d.gpsSignal }) + if (d.longitude !== undefined) pairs.push({ label: '经度', value: d.longitude }) + if (d.latitude !== undefined) pairs.push({ label: '纬度', value: d.latitude }) + if (d.movementStatus) pairs.push({ label: '运动状态', value: d.movementStatus }) + if (d.dailySteps !== undefined) pairs.push({ label: '今日步数', value: d.dailySteps }) + if (d.yesterdaySteps !== undefined) pairs.push({ label: '昨日步数', value: d.yesterdaySteps }) + if (d.totalSteps !== undefined) pairs.push({ label: '总步数', value: d.totalSteps }) + if (d.description) pairs.push({ label: '描述', value: d.description }) + } + + return pairs + }, + + // 格式化日期 + formatDate(date) { + return formatDate(date) + }, + + // 格式化时间 + formatTime(time) { + return formatTime(time) + } +}) diff --git a/mini_program/farm-monitor-dashboard/pages/alert/alert.json b/mini_program/farm-monitor-dashboard/pages/alert/alert.json new file mode 100644 index 0000000..d0282e2 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/alert.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "告警信息", + "enablePullDownRefresh": true, + "backgroundColor": "#f6f6f6", + "usingComponents": {} +} + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/alert.wxml b/mini_program/farm-monitor-dashboard/pages/alert/alert.wxml index 13b68c2..bcbe2ef 100644 --- a/mini_program/farm-monitor-dashboard/pages/alert/alert.wxml +++ b/mini_program/farm-monitor-dashboard/pages/alert/alert.wxml @@ -1,176 +1,176 @@ - - - - - - - 🔍 - - 清空 - - - - - - - 类型: - - - 全部 - - - {{item.icon}} {{item.label}} - - - - - - - 状态: - - - 全部 - - - {{item.label}} - - - - - - - - - - - - - - - {{getAlertTypeInfo(item.type).icon}} - - - - {{item.title}} - {{item.content}} - - 设备: {{item.deviceName || '未知'}} - 时间: {{formatTime(item.createTime)}} - - - - - - {{getPriorityText(item.priority)}} - - - {{getStatusInfo(item.status).label}} - - - - 处理 - - - 忽略 - - - - - - - - 🚨 - 暂无预警数据 - - - - - 加载中... - 上拉加载更多 - - - - - 没有更多数据了 - - - - - - - 加载中... - - - - - - - 预警详情 - ✖ - - - - {{item.label}} - {{item.value}} - - - - - - - - - + + + + + + + 🔍 + + 清空 + + + + + + + 类型: + + + 全部 + + + {{item.icon}} {{item.label}} + + + + + + + 状态: + + + 全部 + + + {{item.label}} + + + + + + + + + + + + + + + {{getAlertTypeInfo(item.type).icon}} + + + + {{item.title}} + {{item.content}} + + 设备: {{item.deviceName || '未知'}} + 时间: {{formatTime(item.createTime)}} + + + + + + {{getPriorityText(item.priority)}} + + + {{getStatusInfo(item.status).label}} + + + + 处理 + + + 忽略 + + + + + + + + 🚨 + 暂无预警数据 + + + + + 加载中... + 上拉加载更多 + + + + + 没有更多数据了 + + + + + + + 加载中... + + + + + + + 预警详情 + ✖ + + + + {{item.label}} + {{item.value}} + + + + + + + + + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/alert.wxss b/mini_program/farm-monitor-dashboard/pages/alert/alert.wxss index 086c8ed..971256c 100644 --- a/mini_program/farm-monitor-dashboard/pages/alert/alert.wxss +++ b/mini_program/farm-monitor-dashboard/pages/alert/alert.wxss @@ -1,380 +1,380 @@ -/* pages/alert/alert.wxss */ -.alert-container { - background-color: #f6f6f6; - min-height: 100vh; -} - -.search-bar { - display: flex; - align-items: center; - padding: 16rpx; - background-color: #ffffff; - border-bottom: 1rpx solid #f0f0f0; -} - -.search-input-wrapper { - flex: 1; - position: relative; - margin-right: 16rpx; -} - -.search-input { - width: 100%; - height: 72rpx; - background-color: #f5f5f5; - border-radius: 36rpx; - padding: 0 60rpx 0 24rpx; - font-size: 28rpx; - color: #303133; -} - -.search-icon { - position: absolute; - right: 24rpx; - top: 50%; - transform: translateY(-50%); - font-size: 32rpx; - color: #909399; -} - -.clear-btn { - font-size: 28rpx; - color: #3cc51f; - padding: 8rpx 16rpx; -} - -.filter-bar { - background-color: #ffffff; - padding: 16rpx; - border-bottom: 1rpx solid #f0f0f0; -} - -.filter-group { - margin-bottom: 16rpx; -} - -.filter-group:last-child { - margin-bottom: 0; -} - -.filter-label { - font-size: 24rpx; - color: #606266; - margin-bottom: 12rpx; - font-weight: 500; -} - -.filter-options { - display: flex; - flex-wrap: wrap; - gap: 12rpx; -} - -.filter-option { - padding: 8rpx 16rpx; - background-color: #f5f5f5; - border-radius: 16rpx; - font-size: 22rpx; - color: #606266; - white-space: nowrap; - transition: all 0.3s; -} - -.filter-option.active { - background-color: #3cc51f; - color: #ffffff; -} - -.batch-actions { - padding: 16rpx; - background-color: #ffffff; - border-bottom: 1rpx solid #f0f0f0; -} - -.batch-btn { - background-color: #3cc51f; - color: #ffffff; - border-radius: 8rpx; - padding: 12rpx 24rpx; - font-size: 24rpx; - border: none; -} - -.batch-btn:active { - background-color: #2ea617; -} - -.alert-list { - padding: 16rpx; -} - -.alert-item { - display: flex; - align-items: flex-start; - background-color: #ffffff; - border-radius: 12rpx; - padding: 24rpx; - margin-bottom: 16rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); - transition: all 0.3s; - border-left: 6rpx solid #f5222d; -} - -.alert-item:active { - transform: scale(0.98); - box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1); -} - -.alert-icon { - width: 80rpx; - height: 80rpx; - background-color: #fff2f0; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - margin-right: 24rpx; - flex-shrink: 0; -} - -.alert-icon .icon { - font-size: 40rpx; -} - -.alert-info { - flex: 1; - margin-right: 16rpx; -} - -.alert-title { - font-size: 32rpx; - font-weight: 500; - color: #303133; - margin-bottom: 8rpx; - line-height: 1.4; -} - -.alert-content { - font-size: 26rpx; - color: #606266; - margin-bottom: 12rpx; - line-height: 1.4; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; -} - -.alert-meta { - display: flex; - flex-direction: column; - gap: 4rpx; -} - -.meta-item { - font-size: 22rpx; - color: #909399; -} - -.alert-status { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 8rpx; -} - -.priority-badge { - padding: 4rpx 12rpx; - border-radius: 8rpx; - font-size: 18rpx; - color: #ffffff; - font-weight: 500; -} - -.status-badge { - padding: 4rpx 12rpx; - border-radius: 8rpx; - font-size: 18rpx; - color: #ffffff; - font-weight: 500; -} - -.alert-actions { - display: flex; - gap: 8rpx; - margin-top: 8rpx; -} - -.action-btn { - padding: 6rpx 12rpx; - border-radius: 6rpx; - font-size: 20rpx; - text-align: center; - min-width: 50rpx; -} - -.action-btn.handle { - background-color: #e6f7ff; - color: #1890ff; -} - -.action-btn.ignore { - background-color: #f5f5f5; - color: #909399; -} - -.empty-state { - text-align: center; - padding: 120rpx 32rpx; -} - -.empty-icon { - font-size: 120rpx; - display: block; - margin-bottom: 24rpx; - opacity: 0.5; -} - -.empty-text { - font-size: 32rpx; - color: #909399; - display: block; -} - -.load-more { - text-align: center; - padding: 32rpx; - font-size: 24rpx; - color: #909399; -} - -/* 详情弹窗样式 */ -.detail-mask { - position: fixed; - left: 0; - top: 0; - right: 0; - bottom: 0; - background: rgba(0,0,0,0.45); - display: flex; - align-items: flex-end; - justify-content: center; - z-index: 999; -} - -.detail-panel { - width: 100%; - max-height: 70vh; - background: #fff; - border-top-left-radius: 24rpx; - border-top-right-radius: 24rpx; - overflow: hidden; -} - -.detail-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 24rpx; - border-bottom: 1rpx solid #f0f0f0; -} - -.detail-title { font-size: 32rpx; font-weight: 600; color: #303133; } -.detail-close { font-size: 32rpx; color: #909399; } - -.detail-body { - padding: 16rpx 24rpx; - max-height: 50vh; - overflow-y: auto; -} - -.detail-row { - display: flex; - align-items: center; - justify-content: space-between; - padding: 16rpx 0; - border-bottom: 1rpx dashed #f0f0f0; -} - -.detail-label { font-size: 26rpx; color: #606266; } -.detail-value { font-size: 26rpx; color: #303133; } - -.detail-footer { - display: flex; - gap: 16rpx; - padding: 24rpx; - border-top: 1rpx solid #f0f0f0; -} - -.detail-footer .primary { - flex: 1; - background-color: #3cc51f; - color: #fff; -} - -.detail-footer .plain { - flex: 1; - background-color: #f5f5f5; - color: #606266; -} - -.no-more { - text-align: center; - padding: 32rpx; - font-size: 24rpx; - color: #c0c4cc; -} - -.loading-container { - text-align: center; - padding: 120rpx 32rpx; -} - -.loading-spinner { - width: 48rpx; - height: 48rpx; - border: 4rpx solid #f0f0f0; - border-top: 4rpx solid #3cc51f; - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 16rpx; -} - -.loading-text { - font-size: 28rpx; - color: #909399; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* 响应式设计 */ -@media (max-width: 375px) { - .alert-item { - padding: 20rpx; - } - - .alert-icon { - width: 70rpx; - height: 70rpx; - margin-right: 20rpx; - } - - .alert-icon .icon { - font-size: 36rpx; - } - - .alert-title { - font-size: 30rpx; - } - - .alert-content { - font-size: 24rpx; - } - - .meta-item { - font-size: 20rpx; - } -} +/* pages/alert/alert.wxss */ +.alert-container { + background-color: #f6f6f6; + min-height: 100vh; +} + +.search-bar { + display: flex; + align-items: center; + padding: 16rpx; + background-color: #ffffff; + border-bottom: 1rpx solid #f0f0f0; +} + +.search-input-wrapper { + flex: 1; + position: relative; + margin-right: 16rpx; +} + +.search-input { + width: 100%; + height: 72rpx; + background-color: #f5f5f5; + border-radius: 36rpx; + padding: 0 60rpx 0 24rpx; + font-size: 28rpx; + color: #303133; +} + +.search-icon { + position: absolute; + right: 24rpx; + top: 50%; + transform: translateY(-50%); + font-size: 32rpx; + color: #909399; +} + +.clear-btn { + font-size: 28rpx; + color: #3cc51f; + padding: 8rpx 16rpx; +} + +.filter-bar { + background-color: #ffffff; + padding: 16rpx; + border-bottom: 1rpx solid #f0f0f0; +} + +.filter-group { + margin-bottom: 16rpx; +} + +.filter-group:last-child { + margin-bottom: 0; +} + +.filter-label { + font-size: 24rpx; + color: #606266; + margin-bottom: 12rpx; + font-weight: 500; +} + +.filter-options { + display: flex; + flex-wrap: wrap; + gap: 12rpx; +} + +.filter-option { + padding: 8rpx 16rpx; + background-color: #f5f5f5; + border-radius: 16rpx; + font-size: 22rpx; + color: #606266; + white-space: nowrap; + transition: all 0.3s; +} + +.filter-option.active { + background-color: #3cc51f; + color: #ffffff; +} + +.batch-actions { + padding: 16rpx; + background-color: #ffffff; + border-bottom: 1rpx solid #f0f0f0; +} + +.batch-btn { + background-color: #3cc51f; + color: #ffffff; + border-radius: 8rpx; + padding: 12rpx 24rpx; + font-size: 24rpx; + border: none; +} + +.batch-btn:active { + background-color: #2ea617; +} + +.alert-list { + padding: 16rpx; +} + +.alert-item { + display: flex; + align-items: flex-start; + background-color: #ffffff; + border-radius: 12rpx; + padding: 24rpx; + margin-bottom: 16rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); + transition: all 0.3s; + border-left: 6rpx solid #f5222d; +} + +.alert-item:active { + transform: scale(0.98); + box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1); +} + +.alert-icon { + width: 80rpx; + height: 80rpx; + background-color: #fff2f0; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-right: 24rpx; + flex-shrink: 0; +} + +.alert-icon .icon { + font-size: 40rpx; +} + +.alert-info { + flex: 1; + margin-right: 16rpx; +} + +.alert-title { + font-size: 32rpx; + font-weight: 500; + color: #303133; + margin-bottom: 8rpx; + line-height: 1.4; +} + +.alert-content { + font-size: 26rpx; + color: #606266; + margin-bottom: 12rpx; + line-height: 1.4; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; +} + +.alert-meta { + display: flex; + flex-direction: column; + gap: 4rpx; +} + +.meta-item { + font-size: 22rpx; + color: #909399; +} + +.alert-status { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 8rpx; +} + +.priority-badge { + padding: 4rpx 12rpx; + border-radius: 8rpx; + font-size: 18rpx; + color: #ffffff; + font-weight: 500; +} + +.status-badge { + padding: 4rpx 12rpx; + border-radius: 8rpx; + font-size: 18rpx; + color: #ffffff; + font-weight: 500; +} + +.alert-actions { + display: flex; + gap: 8rpx; + margin-top: 8rpx; +} + +.action-btn { + padding: 6rpx 12rpx; + border-radius: 6rpx; + font-size: 20rpx; + text-align: center; + min-width: 50rpx; +} + +.action-btn.handle { + background-color: #e6f7ff; + color: #1890ff; +} + +.action-btn.ignore { + background-color: #f5f5f5; + color: #909399; +} + +.empty-state { + text-align: center; + padding: 120rpx 32rpx; +} + +.empty-icon { + font-size: 120rpx; + display: block; + margin-bottom: 24rpx; + opacity: 0.5; +} + +.empty-text { + font-size: 32rpx; + color: #909399; + display: block; +} + +.load-more { + text-align: center; + padding: 32rpx; + font-size: 24rpx; + color: #909399; +} + +/* 详情弹窗样式 */ +.detail-mask { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + background: rgba(0,0,0,0.45); + display: flex; + align-items: flex-end; + justify-content: center; + z-index: 999; +} + +.detail-panel { + width: 100%; + max-height: 70vh; + background: #fff; + border-top-left-radius: 24rpx; + border-top-right-radius: 24rpx; + overflow: hidden; +} + +.detail-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 24rpx; + border-bottom: 1rpx solid #f0f0f0; +} + +.detail-title { font-size: 32rpx; font-weight: 600; color: #303133; } +.detail-close { font-size: 32rpx; color: #909399; } + +.detail-body { + padding: 16rpx 24rpx; + max-height: 50vh; + overflow-y: auto; +} + +.detail-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16rpx 0; + border-bottom: 1rpx dashed #f0f0f0; +} + +.detail-label { font-size: 26rpx; color: #606266; } +.detail-value { font-size: 26rpx; color: #303133; } + +.detail-footer { + display: flex; + gap: 16rpx; + padding: 24rpx; + border-top: 1rpx solid #f0f0f0; +} + +.detail-footer .primary { + flex: 1; + background-color: #3cc51f; + color: #fff; +} + +.detail-footer .plain { + flex: 1; + background-color: #f5f5f5; + color: #606266; +} + +.no-more { + text-align: center; + padding: 32rpx; + font-size: 24rpx; + color: #c0c4cc; +} + +.loading-container { + text-align: center; + padding: 120rpx 32rpx; +} + +.loading-spinner { + width: 48rpx; + height: 48rpx; + border: 4rpx solid #f0f0f0; + border-top: 4rpx solid #3cc51f; + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 16rpx; +} + +.loading-text { + font-size: 28rpx; + color: #909399; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* 响应式设计 */ +@media (max-width: 375px) { + .alert-item { + padding: 20rpx; + } + + .alert-icon { + width: 70rpx; + height: 70rpx; + margin-right: 20rpx; + } + + .alert-icon .icon { + font-size: 36rpx; + } + + .alert-title { + font-size: 30rpx; + } + + .alert-content { + font-size: 24rpx; + } + + .meta-item { + font-size: 20rpx; + } +} diff --git a/mini_program/farm-monitor-dashboard/pages/alert/collar-alert-detail/collar-alert-detail.js b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert-detail/collar-alert-detail.js new file mode 100644 index 0000000..02c1ef4 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert-detail/collar-alert-detail.js @@ -0,0 +1,152 @@ +// pages/alert/collar-alert-detail/collar-alert-detail.js +const API = require('../../../utils/api').API + +Page({ + data: { + alertId: null, + alertData: [], + loading: true + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + console.log('预警详情页面加载，参数:', options) + + if (options.id) { + this.setData({ alertId: options.id }) + this.loadAlertDetail(options.id) + } else { + wx.showToast({ + title: '参数错误', + icon: 'none' + }) + setTimeout(() => { + wx.navigateBack() + }, 1500) + } + }, + + /** + * 加载预警详情 + */ + async loadAlertDetail(id) { + try { + this.setData({ loading: true }) + + console.log('获取预警详情，ID:', id) + const res = await API.getCollarAlertDetail(id) + + console.log('预警详情数据:', res) + + // 根据实际返回的数据结构调整 + const alertInfo = res.data || res + + // 格式化数据为展示格式 + const formattedData = this.formatAlertData(alertInfo) + + this.setData({ + alertData: formattedData, + loading: false + }) + + } catch (error) { + console.error('加载预警详情失败:', error) + + this.setData({ loading: false }) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + } + }, + + /** + * 格式化预警数据 + */ + formatAlertData(data) { + if (!data) return [] + + const sections = [ + { + title: '预警信息', + items: [ + { label: '预警ID', value: data.id || '-' }, + { label: '预警类型', value: this.getAlertTypeText(data.alertType) }, + { label: '预警等级', value: this.getAlertLevelText(data.alertLevel) }, + { label: '预警时间', value: data.alertTime || '-' }, + { label: '预警描述', value: data.description || '-' } + ] + }, + { + title: '设备信息', + items: [ + { label: '设备ID', value: data.deviceId || '-' }, + { label: '设备名称', value: data.deviceName || '-' }, + { label: '项圈编号', value: data.collarNumber || '-' }, + { label: '设备状态', value: data.deviceStatus || '-' }, + { label: '佩戴状态', value: data.wearStatus || '-' } + ] + }, + { + title: '监测数据', + items: [ + { label: '当前温度', value: data.temperature ? `${data.temperature}°C` : '-' }, + { label: '电池电量', value: data.battery ? `${data.battery}%` : '-' }, + { label: 'GPS信号', value: data.gpsSignal || '-' }, + { label: '运动状态', value: data.movementStatus || '-' } + ] + }, + { + title: '位置信息', + items: [ + { label: '经度', value: data.longitude || '-' }, + { label: '纬度', value: data.latitude || '-' } + ] + }, + { + title: '运动数据', + items: [ + { label: '今日步数', value: data.dailySteps || 0 }, + { label: '昨日步数', value: data.yesterdaySteps || 0 }, + { label: '累计步数', value: data.totalSteps || 0 } + ] + } + ] + + return sections + }, + + /** + * 获取预警等级文本 + */ + getAlertLevelText(level) { + const levelMap = { + 'low': '低', + 'medium': '中', + 'high': '高', + 'critical': '紧急' + } + return levelMap[level] || level || '-' + }, + + /** + * 获取预警类型文本 + */ + getAlertTypeText(type) { + const typeMap = { + 'temperature': '温度异常', + 'battery': '电量异常', + 'not_collected': '未采集', + 'collar_cut': '项圈剪断', + 'fence': '围栏异常', + 'activity_high': '运动量偏高', + 'activity_low': '运动量偏低', + 'transfer_slow': '传输过慢' + } + return typeMap[type] || type || '-' + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/collar-alert-detail/collar-alert-detail.json b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert-detail/collar-alert-detail.json new file mode 100644 index 0000000..5158e4e --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert-detail/collar-alert-detail.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "预警详情", + "navigationBarBackgroundColor": "#ffffff", + "navigationBarTextStyle": "black", + "backgroundColor": "#f5f5f5" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/collar-alert-detail/collar-alert-detail.wxml b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert-detail/collar-alert-detail.wxml new file mode 100644 index 0000000..94416bc --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert-detail/collar-alert-detail.wxml @@ -0,0 +1,34 @@ + + + + + 加载中... + + + + + + + 🔔 + 项圈预警详情 + + + + + {{item.title}} + + + {{field.label}} + {{field.value}} + + + + + + + + + + + + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/collar-alert-detail/collar-alert-detail.wxss b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert-detail/collar-alert-detail.wxss new file mode 100644 index 0000000..6655520 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert-detail/collar-alert-detail.wxss @@ -0,0 +1,124 @@ +/* pages/alert/collar-alert-detail/collar-alert-detail.wxss */ +.page-container { + min-height: 100vh; + background-color: #f5f5f5; + padding-bottom: 40rpx; +} + +/* 加载状态 */ +.loading-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + color: #999; + font-size: 28rpx; +} + +/* 详情内容 */ +.detail-content { + padding: 0 30rpx; +} + +/* 头部 */ +.detail-header { + background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%); + padding: 40rpx; + margin: 0 -30rpx 30rpx; + text-align: center; +} + +.header-icon { + font-size: 80rpx; + display: block; + margin-bottom: 16rpx; +} + +.header-title { + font-size: 36rpx; + font-weight: bold; + color: #fff; +} + +/* 信息块 */ +.section { + background-color: #fff; + border-radius: 12rpx; + margin-bottom: 20rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.section-title { + padding: 24rpx; + font-size: 30rpx; + font-weight: bold; + color: #333; + background-color: #fff8f5; + border-bottom: 1rpx solid #ffe5d9; + border-left: 6rpx solid #ff6b35; +} + +.section-content { + padding: 20rpx; +} + +.info-item { + display: flex; + padding: 16rpx 0; + border-bottom: 1rpx solid #f0f0f0; + align-items: flex-start; +} + +.info-item:last-child { + border-bottom: none; +} + +.info-label { + width: 220rpx; + font-size: 28rpx; + color: #666; + flex-shrink: 0; +} + +.info-value { + flex: 1; + font-size: 28rpx; + color: #333; + word-break: break-all; + font-weight: 500; +} + +/* 操作按钮 */ +.action-buttons { + display: flex; + gap: 20rpx; + padding: 0 30rpx; + margin-top: 40rpx; +} + +.action-btn { + flex: 1; + height: 80rpx; + line-height: 80rpx; + padding: 0; + font-size: 32rpx; + font-weight: bold; + border-radius: 12rpx; + border: none; +} + +.action-btn::after { + border: none; +} + +.action-btn.resolve { + background-color: #07c160; + color: #fff; +} + +.action-btn.ignore { + background-color: #999; + color: #fff; +} + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/collar-alert/collar-alert.js b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert/collar-alert.js new file mode 100644 index 0000000..1ffe5fe --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert/collar-alert.js @@ -0,0 +1,255 @@ +// pages/alert/collar-alert/collar-alert.js +const API = require('../../../utils/api').API + +Page({ + data: { + list: [], + total: 0, + page: 1, + limit: 10, + totalPages: 0, + loading: false, + refreshing: false, + searchValue: '', + alertType: '' // 预警类型筛选 + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + this.loadData() + }, + + /** + * 加载数据 + */ + async loadData(isRefresh = false) { + if (isRefresh) { + this.setData({ refreshing: true }) + } + + this.setData({ loading: true }) + + try { + const params = { + page: this.data.page, + limit: this.data.limit, + search: this.data.searchValue, + alertType: this.data.alertType, + _t: Date.now() + } + + console.log('请求参数:', params) + + const res = await API.getCollarAlerts(params) + + console.log('项圈预警数据:', res) + + // 根据实际返回的数据结构调整 + let list = res.data?.list || res.data || res.list || [] + const pagination = res.data?.pagination || {} + const total = pagination.total || res.total || list.length || 0 + + // 数据预处理：格式化数据 + list = list.map(item => { + return { + ...item, + // 格式化预警时间 + alertTimeText: item.alertTime ? this.formatDateTime(item.alertTime) : '-', + // 预警等级文本 + alertLevelText: this.getAlertLevelText(item.alertLevel), + // 预警类型文本 + alertTypeText: this.getAlertTypeText(item.alertType), + // 设备状态文本 + deviceStatusText: item.deviceStatus || '未知', + // 佩戴状态文本 + wearStatusText: item.wearStatus || '未知', + // 运动状态文本 + movementStatusText: item.movementStatus || '未知' + } + }) + + const totalPages = pagination.pages || Math.ceil(total / this.data.limit) + + this.setData({ + list: list, + total: total, + totalPages: totalPages, + loading: false, + refreshing: false + }) + + // 停止下拉刷新 + if (isRefresh) { + wx.stopPullDownRefresh() + } + + } catch (error) { + console.error('加载数据失败:', error) + + this.setData({ + loading: false, + refreshing: false + }) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + if (isRefresh) { + wx.stopPullDownRefresh() + } + } + }, + + /** + * 格式化日期时间 + */ + formatDateTime(dateString) { + if (!dateString) return '-' + + // 如果已经是格式化好的，直接返回 + if (typeof dateString === 'string' && dateString.includes('-')) { + return dateString + } + + const date = new Date(dateString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` + }, + + /** + * 获取预警等级文本 + */ + getAlertLevelText(level) { + const levelMap = { + 'low': '低', + 'medium': '中', + 'high': '高', + 'critical': '紧急' + } + return levelMap[level] || level || '-' + }, + + /** + * 获取预警类型文本 + */ + getAlertTypeText(type) { + const typeMap = { + 'temperature': '温度异常', + 'battery': '电量异常', + 'not_collected': '未采集', + 'collar_cut': '项圈剪断', + 'fence': '围栏异常', + 'activity_high': '运动量偏高', + 'activity_low': '运动量偏低', + 'transfer_slow': '传输过慢' + } + return typeMap[type] || type || '-' + }, + + /** + * 搜索输入 + */ + onSearchInput(e) { + this.setData({ + searchValue: e.detail.value + }) + }, + + /** + * 执行搜索 + */ + handleSearch() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 清空搜索 + */ + clearSearch() { + this.setData({ + searchValue: '', + page: 1 + }) + this.loadData(true) + }, + + /** + * 切换页码 + */ + changePage(e) { + const page = e.currentTarget.dataset.page + if (page !== this.data.page && page >= 1 && page <= this.data.totalPages) { + this.setData({ page }) + this.loadData() + // 滚动到顶部 + wx.pageScrollTo({ + scrollTop: 0, + duration: 300 + }) + } + }, + + /** + * 上一页 + */ + prevPage() { + if (this.data.page > 1) { + this.setData({ page: this.data.page - 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 下一页 + */ + nextPage() { + if (this.data.page < this.data.totalPages) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 查看预警详情 + */ + viewDetail(e) { + const id = e.currentTarget.dataset.id + console.log('查看预警详情:', id) + + // 跳转到详情页 + wx.navigateTo({ + url: `/pages/alert/collar-alert-detail/collar-alert-detail?id=${id}` + }) + }, + + /** + * 下拉刷新 + */ + onPullDownRefresh() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 上拉加载更多 + */ + onReachBottom() { + if (this.data.page < this.data.totalPages && !this.data.loading) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + } + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/collar-alert/collar-alert.json b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert/collar-alert.json new file mode 100644 index 0000000..7c5d646 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert/collar-alert.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "项圈预警", + "enablePullDownRefresh": true, + "backgroundTextStyle": "dark", + "backgroundColor": "#f5f5f5" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/collar-alert/collar-alert.wxml b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert/collar-alert.wxml new file mode 100644 index 0000000..c13f344 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert/collar-alert.wxml @@ -0,0 +1,93 @@ + + + + + + + + + + + + 加载中... + + + + + + + + + {{item.alertTypeText}} + {{item.alertLevelText}} + + {{item.collarNumber}} + + + + + {{item.description}} + + + + + + 设备名称： + {{item.deviceName}} + + + 设备状态： + {{item.deviceStatusText}} + + + 预警时间： + {{item.alertTimeText}} + + + 温度： + {{item.temperature}}°C + + + 电量： + {{item.battery}}% + + + + + + 点击查看详情 > + + + + + + 🔔 + 暂无预警数据 + + + + + + + + + {{index + 1}} + + + + + + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/collar-alert/collar-alert.wxss b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert/collar-alert.wxss new file mode 100644 index 0000000..3304cf7 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/collar-alert/collar-alert.wxss @@ -0,0 +1,285 @@ +/* pages/alert/collar-alert/collar-alert.wxss */ +.page-container { + min-height: 100vh; + background-color: #f5f5f5; + padding: 20rpx; + padding-bottom: 100rpx; +} + +/* 搜索栏 */ +.search-bar { + display: flex; + align-items: center; + background-color: #fff; + padding: 20rpx; + margin-bottom: 20rpx; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.search-input { + flex: 1; + height: 60rpx; + padding: 0 20rpx; + background-color: #f5f5f5; + border-radius: 8rpx; + font-size: 28rpx; +} + +.search-btn { + width: 120rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #ff6b35; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.search-btn::after { + border: none; +} + +.clear-btn { + width: 100rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #999; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.clear-btn::after { + border: none; +} + +/* 加载状态 */ +.loading-container { + display: flex; + justify-content: center; + align-items: center; + height: 400rpx; + color: #999; + font-size: 28rpx; +} + +/* 预警列表 */ +.alert-list { + display: flex; + flex-direction: column; + gap: 20rpx; +} + +/* 预警卡片 */ +.alert-card { + background-color: #fff; + border-radius: 12rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); + border-left: 6rpx solid #ff6b35; +} + +.alert-card.high { + border-left-color: #ff4444; +} + +.alert-card.medium { + border-left-color: #ff9800; +} + +.alert-card.low { + border-left-color: #ffeb3b; +} + +/* 卡片头部 */ +.card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 24rpx; + background-color: #fff; + border-bottom: 1rpx solid #f0f0f0; +} + +.header-left { + display: flex; + align-items: center; + gap: 16rpx; +} + +.alert-type { + font-size: 32rpx; + font-weight: bold; + color: #333; +} + +.alert-level { + padding: 4rpx 16rpx; + border-radius: 20rpx; + font-size: 24rpx; + color: #fff; +} + +.alert-level.level-high { + background-color: #ff4444; +} + +.alert-level.level-medium { + background-color: #ff9800; +} + +.alert-level.level-low { + background-color: #ffeb3b; + color: #333; +} + +.alert-level.level-critical { + background-color: #d32f2f; +} + +.collar-number { + font-size: 28rpx; + font-weight: bold; + color: #ff6b35; +} + +/* 预警描述 */ +.alert-description { + padding: 24rpx; + background-color: #fff8f5; + border-bottom: 1rpx solid #f0f0f0; +} + +.alert-description text { + font-size: 28rpx; + color: #ff6b35; + line-height: 1.6; +} + +/* 卡片主体 */ +.card-body { + padding: 24rpx; +} + +.info-row { + display: flex; + align-items: flex-start; + padding: 12rpx 0; + font-size: 28rpx; +} + +.info-row .label { + color: #666; + min-width: 180rpx; + flex-shrink: 0; +} + +.info-row .value { + color: #333; + flex: 1; + word-break: break-all; +} + +/* 卡片底部 */ +.card-footer { + padding: 16rpx 24rpx; + background-color: #f8f9fa; + text-align: right; + border-top: 1rpx solid #f0f0f0; +} + +.view-detail { + font-size: 26rpx; + color: #ff6b35; +} + +/* 空状态 */ +.empty-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 100rpx 0; +} + +.empty-icon { + font-size: 120rpx; + margin-bottom: 30rpx; + opacity: 0.3; +} + +.empty-text { + font-size: 28rpx; + color: #999; +} + +/* 分页 */ +.pagination { + display: flex; + align-items: center; + justify-content: center; + margin: 30rpx 0; + padding: 20rpx; + background-color: #fff; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.page-btn { + width: 150rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin: 0 10rpx; + background-color: #ff6b35; + color: #fff; + font-size: 26rpx; + border-radius: 8rpx; + border: none; +} + +.page-btn::after { + border: none; +} + +.page-btn[disabled] { + background-color: #e0e0e0; + color: #999; +} + +.page-numbers { + display: flex; + flex-wrap: wrap; + gap: 10rpx; + margin: 0 20rpx; + max-width: 400rpx; + justify-content: center; +} + +.page-number { + width: 60rpx; + height: 60rpx; + line-height: 60rpx; + text-align: center; + font-size: 26rpx; + color: #333; + background-color: #f5f5f5; + border-radius: 8rpx; + transition: all 0.3s; +} + +.page-number.active { + background-color: #ff6b35; + color: #fff; + font-weight: bold; + transform: scale(1.1); + box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3); +} + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert-detail/eartag-alert-detail.js b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert-detail/eartag-alert-detail.js new file mode 100644 index 0000000..6e55ff8 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert-detail/eartag-alert-detail.js @@ -0,0 +1,151 @@ +// pages/alert/eartag-alert-detail/eartag-alert-detail.js +const API = require('../../../utils/api').API + +Page({ + data: { + alertId: null, + alertData: [], + loading: true + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + console.log('预警详情页面加载，参数:', options) + + if (options.id) { + this.setData({ alertId: options.id }) + this.loadAlertDetail(options.id) + } else { + wx.showToast({ + title: '参数错误', + icon: 'none' + }) + setTimeout(() => { + wx.navigateBack() + }, 1500) + } + }, + + /** + * 加载预警详情 + */ + async loadAlertDetail(id) { + try { + this.setData({ loading: true }) + + console.log('获取预警详情，ID:', id) + const res = await API.getEartagAlertDetail(id) + + console.log('预警详情数据:', res) + + // 根据实际返回的数据结构调整 + const alertInfo = res.data || res + + // 格式化数据为展示格式 + const formattedData = this.formatAlertData(alertInfo) + + this.setData({ + alertData: formattedData, + loading: false + }) + + } catch (error) { + console.error('加载预警详情失败:', error) + + this.setData({ loading: false }) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + } + }, + + /** + * 格式化预警数据 + */ + formatAlertData(data) { + if (!data) return [] + + const sections = [ + { + title: '预警信息', + items: [ + { label: '预警ID', value: data.id || '-' }, + { label: '预警类型', value: this.getAlertTypeText(data.alertType) }, + { label: '预警等级', value: this.getAlertLevelText(data.alertLevel) }, + { label: '预警时间', value: data.alertTime || '-' }, + { label: '预警描述', value: data.description || '-' } + ] + }, + { + title: '设备信息', + items: [ + { label: '设备ID', value: data.deviceId || '-' }, + { label: '设备名称', value: data.deviceName || '-' }, + { label: '耳标编号', value: data.eartagNumber || '-' }, + { label: '设备状态', value: data.deviceStatus || '-' } + ] + }, + { + title: '监测数据', + items: [ + { label: '当前温度', value: data.temperature ? `${data.temperature}°C` : '-' }, + { label: '电池电量', value: data.battery ? `${data.battery}%` : '-' }, + { label: 'GPS信号', value: data.gpsSignal || '-' }, + { label: '运动状态', value: data.movementStatus || '-' } + ] + }, + { + title: '位置信息', + items: [ + { label: '经度', value: data.longitude || '-' }, + { label: '纬度', value: data.latitude || '-' } + ] + }, + { + title: '运动数据', + items: [ + { label: '今日步数', value: data.dailySteps || 0 }, + { label: '昨日步数', value: data.yesterdaySteps || 0 }, + { label: '累计步数', value: data.totalSteps || 0 } + ] + } + ] + + return sections + }, + + /** + * 获取预警等级文本 + */ + getAlertLevelText(level) { + const levelMap = { + 'low': '低', + 'medium': '中', + 'high': '高', + 'critical': '紧急' + } + return levelMap[level] || level || '-' + }, + + /** + * 获取预警类型文本 + */ + getAlertTypeText(type) { + const typeMap = { + 'temperature': '温度异常', + 'battery': '电量异常', + 'not_collected': '未采集', + 'movement': '运动异常', + 'fence': '围栏异常', + 'activity_high': '运动量偏高', + 'activity_low': '运动量偏低', + 'transfer_slow': '传输过慢' + } + return typeMap[type] || type || '-' + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert-detail/eartag-alert-detail.json b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert-detail/eartag-alert-detail.json new file mode 100644 index 0000000..5158e4e --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert-detail/eartag-alert-detail.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "预警详情", + "navigationBarBackgroundColor": "#ffffff", + "navigationBarTextStyle": "black", + "backgroundColor": "#f5f5f5" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert-detail/eartag-alert-detail.wxml b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert-detail/eartag-alert-detail.wxml new file mode 100644 index 0000000..c2cfee9 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert-detail/eartag-alert-detail.wxml @@ -0,0 +1,34 @@ + + + + + 加载中... + + + + + + + 🔔 + 耳标预警详情 + + + + + {{item.title}} + + + {{field.label}} + {{field.value}} + + + + + + + + + + + + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert-detail/eartag-alert-detail.wxss b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert-detail/eartag-alert-detail.wxss new file mode 100644 index 0000000..6863f2c --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert-detail/eartag-alert-detail.wxss @@ -0,0 +1,124 @@ +/* pages/alert/eartag-alert-detail/eartag-alert-detail.wxss */ +.page-container { + min-height: 100vh; + background-color: #f5f5f5; + padding-bottom: 40rpx; +} + +/* 加载状态 */ +.loading-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + color: #999; + font-size: 28rpx; +} + +/* 详情内容 */ +.detail-content { + padding: 0 30rpx; +} + +/* 头部 */ +.detail-header { + background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%); + padding: 40rpx; + margin: 0 -30rpx 30rpx; + text-align: center; +} + +.header-icon { + font-size: 80rpx; + display: block; + margin-bottom: 16rpx; +} + +.header-title { + font-size: 36rpx; + font-weight: bold; + color: #fff; +} + +/* 信息块 */ +.section { + background-color: #fff; + border-radius: 12rpx; + margin-bottom: 20rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.section-title { + padding: 24rpx; + font-size: 30rpx; + font-weight: bold; + color: #333; + background-color: #f1f8f4; + border-bottom: 1rpx solid #c8e6c9; + border-left: 6rpx solid #4caf50; +} + +.section-content { + padding: 20rpx; +} + +.info-item { + display: flex; + padding: 16rpx 0; + border-bottom: 1rpx solid #f0f0f0; + align-items: flex-start; +} + +.info-item:last-child { + border-bottom: none; +} + +.info-label { + width: 220rpx; + font-size: 28rpx; + color: #666; + flex-shrink: 0; +} + +.info-value { + flex: 1; + font-size: 28rpx; + color: #333; + word-break: break-all; + font-weight: 500; +} + +/* 操作按钮 */ +.action-buttons { + display: flex; + gap: 20rpx; + padding: 0 30rpx; + margin-top: 40rpx; +} + +.action-btn { + flex: 1; + height: 80rpx; + line-height: 80rpx; + padding: 0; + font-size: 32rpx; + font-weight: bold; + border-radius: 12rpx; + border: none; +} + +.action-btn::after { + border: none; +} + +.action-btn.resolve { + background-color: #4caf50; + color: #fff; +} + +.action-btn.ignore { + background-color: #999; + color: #fff; +} + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert/eartag-alert.js b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert/eartag-alert.js new file mode 100644 index 0000000..f614429 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert/eartag-alert.js @@ -0,0 +1,253 @@ +// pages/alert/eartag-alert/eartag-alert.js +const API = require('../../../utils/api').API + +Page({ + data: { + list: [], + total: 0, + page: 1, + limit: 10, + totalPages: 0, + loading: false, + refreshing: false, + searchValue: '', + alertType: '' // 预警类型筛选 + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + this.loadData() + }, + + /** + * 加载数据 + */ + async loadData(isRefresh = false) { + if (isRefresh) { + this.setData({ refreshing: true }) + } + + this.setData({ loading: true }) + + try { + const params = { + page: this.data.page, + limit: this.data.limit, + search: this.data.searchValue, + alertType: this.data.alertType, + _t: Date.now() + } + + console.log('请求参数:', params) + + const res = await API.getEartagAlerts(params) + + console.log('耳标预警数据:', res) + + // 根据实际返回的数据结构调整 + let list = res.data?.list || res.data || res.list || [] + const pagination = res.data?.pagination || {} + const total = pagination.total || res.total || list.length || 0 + + // 数据预处理：格式化数据 + list = list.map(item => { + return { + ...item, + // 格式化预警时间 + alertTimeText: item.alertTime ? this.formatDateTime(item.alertTime) : '-', + // 预警等级文本 + alertLevelText: this.getAlertLevelText(item.alertLevel), + // 预警类型文本 + alertTypeText: this.getAlertTypeText(item.alertType), + // 设备状态文本 + deviceStatusText: item.deviceStatus || '未知', + // 运动状态文本 + movementStatusText: item.movementStatus || '未知' + } + }) + + const totalPages = pagination.pages || Math.ceil(total / this.data.limit) + + this.setData({ + list: list, + total: total, + totalPages: totalPages, + loading: false, + refreshing: false + }) + + // 停止下拉刷新 + if (isRefresh) { + wx.stopPullDownRefresh() + } + + } catch (error) { + console.error('加载数据失败:', error) + + this.setData({ + loading: false, + refreshing: false + }) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + if (isRefresh) { + wx.stopPullDownRefresh() + } + } + }, + + /** + * 格式化日期时间 + */ + formatDateTime(dateString) { + if (!dateString) return '-' + + // 如果已经是格式化好的，直接返回 + if (typeof dateString === 'string' && dateString.includes('-')) { + return dateString + } + + const date = new Date(dateString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` + }, + + /** + * 获取预警等级文本 + */ + getAlertLevelText(level) { + const levelMap = { + 'low': '低', + 'medium': '中', + 'high': '高', + 'critical': '紧急' + } + return levelMap[level] || level || '-' + }, + + /** + * 获取预警类型文本 + */ + getAlertTypeText(type) { + const typeMap = { + 'temperature': '温度异常', + 'battery': '电量异常', + 'not_collected': '未采集', + 'movement': '运动异常', + 'fence': '围栏异常', + 'activity_high': '运动量偏高', + 'activity_low': '运动量偏低', + 'transfer_slow': '传输过慢' + } + return typeMap[type] || type || '-' + }, + + /** + * 搜索输入 + */ + onSearchInput(e) { + this.setData({ + searchValue: e.detail.value + }) + }, + + /** + * 执行搜索 + */ + handleSearch() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 清空搜索 + */ + clearSearch() { + this.setData({ + searchValue: '', + page: 1 + }) + this.loadData(true) + }, + + /** + * 切换页码 + */ + changePage(e) { + const page = e.currentTarget.dataset.page + if (page !== this.data.page && page >= 1 && page <= this.data.totalPages) { + this.setData({ page }) + this.loadData() + // 滚动到顶部 + wx.pageScrollTo({ + scrollTop: 0, + duration: 300 + }) + } + }, + + /** + * 上一页 + */ + prevPage() { + if (this.data.page > 1) { + this.setData({ page: this.data.page - 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 下一页 + */ + nextPage() { + if (this.data.page < this.data.totalPages) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 查看预警详情 + */ + viewDetail(e) { + const id = e.currentTarget.dataset.id + console.log('查看预警详情:', id) + + // 跳转到详情页 + wx.navigateTo({ + url: `/pages/alert/eartag-alert-detail/eartag-alert-detail?id=${id}` + }) + }, + + /** + * 下拉刷新 + */ + onPullDownRefresh() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 上拉加载更多 + */ + onReachBottom() { + if (this.data.page < this.data.totalPages && !this.data.loading) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + } + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert/eartag-alert.json b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert/eartag-alert.json new file mode 100644 index 0000000..5fc7624 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert/eartag-alert.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "耳标预警", + "enablePullDownRefresh": true, + "backgroundTextStyle": "dark", + "backgroundColor": "#f5f5f5" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert/eartag-alert.wxml b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert/eartag-alert.wxml new file mode 100644 index 0000000..ea7cacd --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert/eartag-alert.wxml @@ -0,0 +1,93 @@ + + + + + + + + + + + + 加载中... + + + + + + + + + {{item.alertTypeText}} + {{item.alertLevelText}} + + {{item.eartagNumber}} + + + + + {{item.description}} + + + + + + 设备名称： + {{item.deviceName}} + + + 设备状态： + {{item.deviceStatusText}} + + + 预警时间： + {{item.alertTimeText}} + + + 温度： + {{item.temperature}}°C + + + 电量： + {{item.battery}}% + + + + + + 点击查看详情 > + + + + + + 🔔 + 暂无预警数据 + + + + + + + + + {{index + 1}} + + + + + + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert/eartag-alert.wxss b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert/eartag-alert.wxss new file mode 100644 index 0000000..c3794b3 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/alert/eartag-alert/eartag-alert.wxss @@ -0,0 +1,285 @@ +/* pages/alert/eartag-alert/eartag-alert.wxss */ +.page-container { + min-height: 100vh; + background-color: #f5f5f5; + padding: 20rpx; + padding-bottom: 100rpx; +} + +/* 搜索栏 */ +.search-bar { + display: flex; + align-items: center; + background-color: #fff; + padding: 20rpx; + margin-bottom: 20rpx; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.search-input { + flex: 1; + height: 60rpx; + padding: 0 20rpx; + background-color: #f5f5f5; + border-radius: 8rpx; + font-size: 28rpx; +} + +.search-btn { + width: 120rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #4caf50; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.search-btn::after { + border: none; +} + +.clear-btn { + width: 100rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #999; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.clear-btn::after { + border: none; +} + +/* 加载状态 */ +.loading-container { + display: flex; + justify-content: center; + align-items: center; + height: 400rpx; + color: #999; + font-size: 28rpx; +} + +/* 预警列表 */ +.alert-list { + display: flex; + flex-direction: column; + gap: 20rpx; +} + +/* 预警卡片 */ +.alert-card { + background-color: #fff; + border-radius: 12rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); + border-left: 6rpx solid #4caf50; +} + +.alert-card.high { + border-left-color: #ff4444; +} + +.alert-card.medium { + border-left-color: #ff9800; +} + +.alert-card.low { + border-left-color: #ffeb3b; +} + +/* 卡片头部 */ +.card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 24rpx; + background-color: #fff; + border-bottom: 1rpx solid #f0f0f0; +} + +.header-left { + display: flex; + align-items: center; + gap: 16rpx; +} + +.alert-type { + font-size: 32rpx; + font-weight: bold; + color: #333; +} + +.alert-level { + padding: 4rpx 16rpx; + border-radius: 20rpx; + font-size: 24rpx; + color: #fff; +} + +.alert-level.level-high { + background-color: #ff4444; +} + +.alert-level.level-medium { + background-color: #ff9800; +} + +.alert-level.level-low { + background-color: #ffeb3b; + color: #333; +} + +.alert-level.level-critical { + background-color: #d32f2f; +} + +.eartag-number { + font-size: 28rpx; + font-weight: bold; + color: #4caf50; +} + +/* 预警描述 */ +.alert-description { + padding: 24rpx; + background-color: #f1f8f4; + border-bottom: 1rpx solid #f0f0f0; +} + +.alert-description text { + font-size: 28rpx; + color: #2e7d32; + line-height: 1.6; +} + +/* 卡片主体 */ +.card-body { + padding: 24rpx; +} + +.info-row { + display: flex; + align-items: flex-start; + padding: 12rpx 0; + font-size: 28rpx; +} + +.info-row .label { + color: #666; + min-width: 180rpx; + flex-shrink: 0; +} + +.info-row .value { + color: #333; + flex: 1; + word-break: break-all; +} + +/* 卡片底部 */ +.card-footer { + padding: 16rpx 24rpx; + background-color: #f8f9fa; + text-align: right; + border-top: 1rpx solid #f0f0f0; +} + +.view-detail { + font-size: 26rpx; + color: #4caf50; +} + +/* 空状态 */ +.empty-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 100rpx 0; +} + +.empty-icon { + font-size: 120rpx; + margin-bottom: 30rpx; + opacity: 0.3; +} + +.empty-text { + font-size: 28rpx; + color: #999; +} + +/* 分页 */ +.pagination { + display: flex; + align-items: center; + justify-content: center; + margin: 30rpx 0; + padding: 20rpx; + background-color: #fff; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.page-btn { + width: 150rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin: 0 10rpx; + background-color: #4caf50; + color: #fff; + font-size: 26rpx; + border-radius: 8rpx; + border: none; +} + +.page-btn::after { + border: none; +} + +.page-btn[disabled] { + background-color: #e0e0e0; + color: #999; +} + +.page-numbers { + display: flex; + flex-wrap: wrap; + gap: 10rpx; + margin: 0 20rpx; + max-width: 400rpx; + justify-content: center; +} + +.page-number { + width: 60rpx; + height: 60rpx; + line-height: 60rpx; + text-align: center; + font-size: 26rpx; + color: #333; + background-color: #f5f5f5; + border-radius: 8rpx; + transition: all 0.3s; +} + +.page-number.active { + background-color: #4caf50; + color: #fff; + font-weight: bold; + transform: scale(1.1); + box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3); +} + diff --git a/mini_program/farm-monitor-dashboard/pages/alert/eartag/eartag.json b/mini_program/farm-monitor-dashboard/pages/alert/eartag/eartag.json index 8835af0..6f5247b 100644 --- a/mini_program/farm-monitor-dashboard/pages/alert/eartag/eartag.json +++ b/mini_program/farm-monitor-dashboard/pages/alert/eartag/eartag.json @@ -1,3 +1,3 @@ -{ - "usingComponents": {} +{ + "usingComponents": {} } \ No newline at end of file diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/archive/archive.js b/mini_program/farm-monitor-dashboard/pages/cattle/archive/archive.js new file mode 100644 index 0000000..43a75b7 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/archive/archive.js @@ -0,0 +1,282 @@ +// pages/cattle/archive/archive.js +const API = require('../../../utils/api').API + +Page({ + data: { + list: [], + total: 0, + page: 1, + pageSize: 10, + totalPages: 0, + loading: false, + refreshing: false, + searchValue: '' + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + this.loadData() + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + // 可选：每次显示页面时刷新数据 + }, + + /** + * 加载数据 + */ + async loadData(isRefresh = false) { + if (isRefresh) { + this.setData({ refreshing: true }) + } + + this.setData({ loading: true }) + + try { + const params = { + page: this.data.page, + pageSize: this.data.pageSize, + _t: Date.now() + } + + // 如果有搜索条件，添加到参数中 + if (this.data.searchValue) { + params.earNumber = this.data.searchValue.trim() // 按耳号精确查询 + } + + console.log('请求参数:', params) + + const res = await API.getCattleList(params) + + console.log('牛只档案数据:', res) + + // 根据实际返回的数据结构调整 + let list = res.data?.list || res.list || [] + const pagination = res.data?.pagination || {} + const total = pagination.total || res.total || list.length || 0 + + // 数据预处理：格式化时间戳和数据 + list = list.map(item => { + return { + ...item, + // 格式化出生日期 + birthdayText: item.birthday ? this.formatDate(item.birthday) : '-', + // 格式化入场时间 + intoTimeText: item.intoTime ? this.formatDate(item.intoTime) : '-', + // 格式化性别 + sexText: item.sex === 1 ? '公' : item.sex === 2 ? '母' : '未知', + // 格式化生理阶段 + physiologicalStageText: this.getPhysiologicalStage(item.physiologicalStage), + // 格式化来源 + sourceText: item.source === 1 ? '自繁' : item.source === 2 ? '外购' : '未知', + // 格式化体重计算时间 + weightCalculateTimeText: item.weightCalculateTime ? this.formatDateTime(item.weightCalculateTime) : '-' + } + }) + + // 如果有搜索条件，进行前端精确过滤（确保精确匹配） + if (this.data.searchValue && this.data.searchValue.trim()) { + const searchKey = this.data.searchValue.trim() + list = list.filter(item => { + const earNumber = String(item.earNumber || '') + // 精确匹配：完全相等 + return earNumber === searchKey + }) + + console.log('精确查找结果:', list.length, '条') + + if (list.length === 0) { + wx.showToast({ + title: '未找到匹配的牛只', + icon: 'none', + duration: 2000 + }) + } + } + + const totalPages = pagination.pages || Math.ceil((this.data.searchValue ? list.length : total) / this.data.pageSize) + + this.setData({ + list: list, + total: total, + totalPages: totalPages, + loading: false, + refreshing: false + }) + + // 停止下拉刷新 + if (isRefresh) { + wx.stopPullDownRefresh() + } + + } catch (error) { + console.error('加载数据失败:', error) + + this.setData({ + loading: false, + refreshing: false + }) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + if (isRefresh) { + wx.stopPullDownRefresh() + } + } + }, + + /** + * 格式化日期（时间戳转日期） + */ + formatDate(timestamp) { + if (!timestamp) return '-' + const date = new Date(timestamp * 1000) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + return `${year}-${month}-${day}` + }, + + /** + * 格式化日期时间 + */ + formatDateTime(dateString) { + if (!dateString) return '-' + const date = new Date(dateString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}` + }, + + /** + * 获取生理阶段文本 + */ + getPhysiologicalStage(stage) { + const stages = { + 0: '犊牛期', + 1: '育成期', + 2: '成年期', + 3: '老年期' + } + return stages[stage] || '未知' + }, + + /** + * 搜索输入 + */ + onSearchInput(e) { + this.setData({ + searchValue: e.detail.value + }) + }, + + /** + * 执行搜索 + */ + handleSearch() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 清空搜索 + */ + clearSearch() { + this.setData({ + searchValue: '', + page: 1 + }) + this.loadData(true) + }, + + /** + * 切换页码 + */ + changePage(e) { + const page = e.currentTarget.dataset.page + if (page !== this.data.page && page >= 1 && page <= this.data.totalPages) { + this.setData({ page }) + this.loadData() + // 滚动到顶部 + wx.pageScrollTo({ + scrollTop: 0, + duration: 300 + }) + } + }, + + /** + * 上一页 + */ + prevPage() { + if (this.data.page > 1) { + this.setData({ page: this.data.page - 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 下一页 + */ + nextPage() { + if (this.data.page < this.data.totalPages) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 查看牛只详情 + */ + viewDetail(e) { + const id = e.currentTarget.dataset.id + console.log('查看牛只详情:', id) + + // 跳转到详情页 + wx.navigateTo({ + url: `/pages/cattle/detail/detail?id=${id}` + }) + }, + + /** + * 新增档案 + */ + addCattle() { + wx.showToast({ + title: '新增功能开发中', + icon: 'none' + }) + }, + + /** + * 下拉刷新 + */ + onPullDownRefresh() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 上拉加载更多 + */ + onReachBottom() { + if (this.data.page < this.data.totalPages && !this.data.loading) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + } + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/archive/archive.json b/mini_program/farm-monitor-dashboard/pages/cattle/archive/archive.json new file mode 100644 index 0000000..90c5452 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/archive/archive.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "牛只档案", + "enablePullDownRefresh": true, + "backgroundTextStyle": "dark", + "backgroundColor": "#f6f6f6" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/archive/archive.wxml b/mini_program/farm-monitor-dashboard/pages/cattle/archive/archive.wxml new file mode 100644 index 0000000..0ae2035 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/archive/archive.wxml @@ -0,0 +1,97 @@ + + + + + + + + + + + + 加载中... + + + + + + + + 耳号：{{item.earNumber}} + › + + + + + + 佩戴设备： + {{item.earNumber}} + + + 出生日期： + {{item.birthdayText}} + + + 品类： + {{item.cate || '-'}} + + + 品种： + {{item.varieties || '-'}} + + + 生理阶段： + {{item.physiologicalStageText}} + + + 性别： + {{item.sexText}} + + + 栏舍： + {{item.penName || '-'}} + + + + + + + 🐄 + 暂无牛只档案数据 + + + + + + + + + {{index + 1}} + + + + + + + + 共 {{total}} 头牛，当前第 {{page}}/{{totalPages}} 页 + + + + + 新增档案 + + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/archive/archive.wxss b/mini_program/farm-monitor-dashboard/pages/cattle/archive/archive.wxss new file mode 100644 index 0000000..0102508 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/archive/archive.wxss @@ -0,0 +1,246 @@ +/* pages/cattle/archive/archive.wxss */ +.page-container { + min-height: 100vh; + background-color: #f5f5f5; + padding: 20rpx; + padding-bottom: 140rpx; +} + +/* 搜索栏样式 */ +.search-bar { + display: flex; + align-items: center; + background-color: #fff; + padding: 20rpx; + margin-bottom: 20rpx; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.search-input { + flex: 1; + height: 60rpx; + padding: 0 20rpx; + background-color: #f5f5f5; + border-radius: 8rpx; + font-size: 28rpx; +} + +.search-btn { + width: 120rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #07c160; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.search-btn::after { + border: none; +} + +.clear-btn { + width: 100rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #fa5151; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.clear-btn::after { + border: none; +} + +/* 加载状态 */ +.loading-container { + display: flex; + justify-content: center; + align-items: center; + height: 400rpx; + color: #999; + font-size: 28rpx; +} + +/* 牛只列表 */ +.cattle-list { + display: flex; + flex-direction: column; + gap: 20rpx; +} + +/* 牛只卡片 */ +.cattle-card { + background-color: #fff; + border-radius: 12rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +/* 卡片头部 */ +.card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 24rpx; + background-color: #fff; + border-bottom: 1rpx solid #f0f0f0; +} + +.ear-number { + font-size: 32rpx; + font-weight: bold; + color: #07c160; +} + +.arrow { + font-size: 48rpx; + color: #ccc; + font-weight: 300; +} + +/* 卡片主体 */ +.card-body { + padding: 24rpx; +} + +.info-row { + display: flex; + align-items: center; + padding: 12rpx 0; + font-size: 28rpx; +} + +.info-row .label { + color: #666; + min-width: 160rpx; +} + +.info-row .value { + color: #333; + flex: 1; +} + +/* 空状态 */ +.empty-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 100rpx 0; +} + +.empty-icon { + font-size: 120rpx; + margin-bottom: 30rpx; + opacity: 0.3; +} + +.empty-text { + font-size: 28rpx; + color: #999; +} + +/* 分页样式 */ +.pagination { + display: flex; + align-items: center; + justify-content: center; + margin: 30rpx 0; + padding: 20rpx; + background-color: #fff; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.page-btn { + width: 150rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin: 0 10rpx; + background-color: #07c160; + color: #fff; + font-size: 26rpx; + border-radius: 8rpx; + border: none; +} + +.page-btn::after { + border: none; +} + +.page-btn[disabled] { + background-color: #e0e0e0; + color: #999; +} + +.page-numbers { + display: flex; + flex-wrap: wrap; + gap: 10rpx; + margin: 0 20rpx; + max-width: 400rpx; + justify-content: center; +} + +.page-number { + width: 60rpx; + height: 60rpx; + line-height: 60rpx; + text-align: center; + font-size: 26rpx; + color: #333; + background-color: #f5f5f5; + border-radius: 8rpx; + transition: all 0.3s; +} + +.page-number.active { + background-color: #07c160; + color: #fff; + font-weight: bold; + transform: scale(1.1); + box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); +} + +/* 数据统计 */ +.stats-bar { + text-align: center; + padding: 20rpx; + margin-top: 20rpx; + background-color: #fff; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.stats-text { + font-size: 26rpx; + color: #666; +} + +/* 新增按钮 */ +.add-btn { + position: fixed; + bottom: 30rpx; + left: 50%; + transform: translateX(-50%); + width: 90%; + height: 80rpx; + line-height: 80rpx; + text-align: center; + background-color: #07c160; + color: #fff; + font-size: 32rpx; + font-weight: bold; + border-radius: 12rpx; + box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); +} diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/batch-detail/batch-detail.js b/mini_program/farm-monitor-dashboard/pages/cattle/batch-detail/batch-detail.js new file mode 100644 index 0000000..ad8f568 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/batch-detail/batch-detail.js @@ -0,0 +1,146 @@ +// pages/cattle/batch-detail/batch-detail.js +const API = require('../../../utils/api').API + +Page({ + data: { + batchId: null, + batchData: [], + loading: true + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + console.log('批次详情页面加载，参数:', options) + + if (options.id) { + this.setData({ batchId: options.id }) + this.loadBatchDetail(options.id) + } else { + wx.showToast({ + title: '参数错误', + icon: 'none' + }) + setTimeout(() => { + wx.navigateBack() + }, 1500) + } + }, + + /** + * 加载批次详情 + */ + async loadBatchDetail(id) { + try { + this.setData({ loading: true }) + + console.log('获取批次详情，ID:', id) + const res = await API.getBatchDetail(id) + + console.log('批次详情数据:', res) + + // 根据实际返回的数据结构调整 + const batchInfo = res.data || res + + // 格式化数据为展示格式 + const formattedData = this.formatBatchData(batchInfo) + + this.setData({ + batchData: formattedData, + loading: false + }) + + } catch (error) { + console.error('加载批次详情失败:', error) + + this.setData({ loading: false }) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + } + }, + + /** + * 格式化批次数据 + */ + formatBatchData(data) { + if (!data) return [] + + const sections = [ + { + title: '基本信息', + items: [ + { label: 'ID', value: data.id || '-' }, + { label: '批次名称', value: data.name || '-' }, + { label: '批次编码', value: data.code || '-' }, + { label: '批次类型', value: data.type || '-' }, + { label: '状态', value: data.status || '-' } + ] + }, + { + title: '数量信息', + items: [ + { label: '当前数量', value: data.currentCount || 0 }, + { label: '目标数量', value: data.targetCount || 0 } + ] + }, + { + title: '时间信息', + items: [ + { label: '开始日期', value: this.formatDate(data.startDate) }, + { label: '预期结束日期', value: this.formatDate(data.expectedEndDate) }, + { label: '实际结束日期', value: this.formatDate(data.actualEndDate) } + ] + }, + { + title: '管理信息', + items: [ + { label: '养殖场', value: data.farm?.name || data.farmName || '-' }, + { label: '养殖场ID', value: data.farmId || data.farm_id || '-' }, + { label: '管理人员', value: data.manager || '-' } + ] + }, + { + title: '其他信息', + items: [ + { label: '备注', value: data.remark || '-' }, + { label: '创建时间', value: this.formatDateTime(data.created_at) }, + { label: '更新时间', value: this.formatDateTime(data.updated_at) } + ] + } + ] + + return sections + }, + + /** + * 格式化日期 + */ + formatDate(dateString) { + if (!dateString) return '-' + const date = new Date(dateString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + return `${year}-${month}-${day}` + }, + + /** + * 格式化日期时间 + */ + formatDateTime(dateString) { + if (!dateString) return '-' + const date = new Date(dateString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/batch-detail/batch-detail.json b/mini_program/farm-monitor-dashboard/pages/cattle/batch-detail/batch-detail.json new file mode 100644 index 0000000..dc409d7 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/batch-detail/batch-detail.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "批次详情", + "navigationBarBackgroundColor": "#ffffff", + "navigationBarTextStyle": "black", + "backgroundColor": "#f5f5f5" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/batch-detail/batch-detail.wxml b/mini_program/farm-monitor-dashboard/pages/cattle/batch-detail/batch-detail.wxml new file mode 100644 index 0000000..86baa89 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/batch-detail/batch-detail.wxml @@ -0,0 +1,27 @@ + + + + + 加载中... + + + + + + + 批次设置详情 + + + + + {{item.title}} + + + {{field.label}} + {{field.value}} + + + + + + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/batch-detail/batch-detail.wxss b/mini_program/farm-monitor-dashboard/pages/cattle/batch-detail/batch-detail.wxss new file mode 100644 index 0000000..d782036 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/batch-detail/batch-detail.wxss @@ -0,0 +1,84 @@ +/* pages/cattle/batch-detail/batch-detail.wxss */ +.page-container { + min-height: 100vh; + background-color: #f5f5f5; + padding-bottom: 40rpx; +} + +/* 加载状态 */ +.loading-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + color: #999; + font-size: 28rpx; +} + +/* 详情内容 */ +.detail-content { + padding: 0 30rpx; +} + +/* 头部 */ +.detail-header { + background: linear-gradient(135deg, #07c160 0%, #09a856 100%); + padding: 40rpx; + margin: 0 -30rpx 30rpx; + text-align: center; +} + +.header-title { + font-size: 36rpx; + font-weight: bold; + color: #fff; +} + +/* 信息块 */ +.section { + background-color: #fff; + border-radius: 12rpx; + margin-bottom: 20rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.section-title { + padding: 24rpx; + font-size: 30rpx; + font-weight: bold; + color: #333; + background-color: #f8f9fa; + border-bottom: 1rpx solid #eee; +} + +.section-content { + padding: 20rpx; +} + +.info-item { + display: flex; + padding: 16rpx 0; + border-bottom: 1rpx solid #f0f0f0; + align-items: flex-start; +} + +.info-item:last-child { + border-bottom: none; +} + +.info-label { + width: 220rpx; + font-size: 28rpx; + color: #666; + flex-shrink: 0; +} + +.info-value { + flex: 1; + font-size: 28rpx; + color: #333; + word-break: break-all; + font-weight: 500; +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/batch/batch.js b/mini_program/farm-monitor-dashboard/pages/cattle/batch/batch.js new file mode 100644 index 0000000..c2ba64e --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/batch/batch.js @@ -0,0 +1,244 @@ +// pages/cattle/batch/batch.js +const API = require('../../../utils/api').API + +Page({ + data: { + list: [], + total: 0, + page: 1, + pageSize: 10, + totalPages: 0, + loading: false, + refreshing: false, + searchValue: '' + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + this.loadData() + }, + + /** + * 加载数据 + */ + async loadData(isRefresh = false) { + if (isRefresh) { + this.setData({ refreshing: true }) + } + + this.setData({ loading: true }) + + try { + const params = { + page: this.data.page, + pageSize: this.data.pageSize, + exactMatch: true, + strictMatch: true, + _t: Date.now() + } + + // 如果有搜索条件，添加到参数中 + if (this.data.searchValue) { + params.name = this.data.searchValue.trim() // 按批次名称精确查询 + params.search = this.data.searchValue.trim() // 兼容参数 + } + + console.log('请求参数:', params) + + const res = await API.getBatchList(params) + + console.log('批次设置数据:', res) + + // 根据实际返回的数据结构调整 + let list = res.data?.list || res.data || res.list || [] + const pagination = res.data?.pagination || {} + const total = pagination.total || res.total || list.length || 0 + + // 数据预处理：格式化时间和数据 + list = list.map(item => { + return { + ...item, + // 格式化开始日期 + startDateText: item.startDate ? this.formatDateTime(item.startDate) : '-', + // 格式化预期结束日期 + expectedEndDateText: item.expectedEndDate ? this.formatDateTime(item.expectedEndDate) : '-', + // 格式化实际结束日期 + actualEndDateText: item.actualEndDate ? this.formatDateTime(item.actualEndDate) : '-', + // 格式化创建时间 + createdAtText: item.created_at ? this.formatDateTime(item.created_at) : '-', + // 格式化更新时间 + updatedAtText: item.updated_at ? this.formatDateTime(item.updated_at) : '-', + // 养殖场名称 + farmName: item.farm?.name || '-' + } + }) + + // 如果有搜索条件，进行前端精确过滤（确保精确匹配） + if (this.data.searchValue && this.data.searchValue.trim()) { + const searchKey = this.data.searchValue.trim() + list = list.filter(item => { + const name = String(item.name || '') + // 精确匹配：完全相等 + return name === searchKey + }) + + console.log('精确查找结果:', list.length, '条') + + if (list.length === 0) { + wx.showToast({ + title: '未找到匹配的批次', + icon: 'none', + duration: 2000 + }) + } + } + + const totalPages = pagination.pages || Math.ceil((this.data.searchValue ? list.length : total) / this.data.pageSize) + + this.setData({ + list: list, + total: total, + totalPages: totalPages, + loading: false, + refreshing: false + }) + + // 停止下拉刷新 + if (isRefresh) { + wx.stopPullDownRefresh() + } + + } catch (error) { + console.error('加载数据失败:', error) + + this.setData({ + loading: false, + refreshing: false + }) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + if (isRefresh) { + wx.stopPullDownRefresh() + } + } + }, + + /** + * 格式化日期时间 + */ + formatDateTime(dateString) { + if (!dateString) return '-' + const date = new Date(dateString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` + }, + + /** + * 搜索输入 + */ + onSearchInput(e) { + this.setData({ + searchValue: e.detail.value + }) + }, + + /** + * 执行搜索 + */ + handleSearch() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 清空搜索 + */ + clearSearch() { + this.setData({ + searchValue: '', + page: 1 + }) + this.loadData(true) + }, + + /** + * 切换页码 + */ + changePage(e) { + const page = e.currentTarget.dataset.page + if (page !== this.data.page && page >= 1 && page <= this.data.totalPages) { + this.setData({ page }) + this.loadData() + // 滚动到顶部 + wx.pageScrollTo({ + scrollTop: 0, + duration: 300 + }) + } + }, + + /** + * 上一页 + */ + prevPage() { + if (this.data.page > 1) { + this.setData({ page: this.data.page - 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 下一页 + */ + nextPage() { + if (this.data.page < this.data.totalPages) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 查看批次详情 + */ + viewDetail(e) { + const id = e.currentTarget.dataset.id + console.log('查看批次详情:', id) + + // 跳转到详情页 + wx.navigateTo({ + url: `/pages/cattle/batch-detail/batch-detail?id=${id}` + }) + }, + + /** + * 下拉刷新 + */ + onPullDownRefresh() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 上拉加载更多 + */ + onReachBottom() { + if (this.data.page < this.data.totalPages && !this.data.loading) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + } + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/batch/batch.json b/mini_program/farm-monitor-dashboard/pages/cattle/batch/batch.json new file mode 100644 index 0000000..fa69614 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/batch/batch.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "批次设置", + "enablePullDownRefresh": true, + "backgroundTextStyle": "dark", + "backgroundColor": "#f5f5f5" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/batch/batch.wxml b/mini_program/farm-monitor-dashboard/pages/cattle/batch/batch.wxml new file mode 100644 index 0000000..be3411a --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/batch/batch.wxml @@ -0,0 +1,90 @@ + + + + + + + + + + + + 加载中... + + + + + + + + 批次号：{{item.name}} + + + + + + + 种类： + {{item.type || '牛'}} + + + 批次内数量： + {{item.currentCount || 0}} + + + 最后操作时间： + {{item.updatedAtText}} + + + 创建人： + {{item.manager || 'admin'}} + + + 备注： + {{item.remark || '--'}} + + + + + + {{page}}/{{totalPages}} + + + + + + 📦 + 暂无批次设置数据 + + + + + + + + + {{index + 1}} + + + + + + + + 新增批次 + + + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/batch/batch.wxss b/mini_program/farm-monitor-dashboard/pages/cattle/batch/batch.wxss new file mode 100644 index 0000000..3c87781 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/batch/batch.wxss @@ -0,0 +1,254 @@ +/* pages/cattle/batch/batch.wxss */ +.page-container { + min-height: 100vh; + background-color: #f5f5f5; + padding: 20rpx; + padding-bottom: 140rpx; +} + +/* 搜索栏 */ +.search-bar { + display: flex; + align-items: center; + background-color: #fff; + padding: 20rpx; + margin-bottom: 20rpx; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.search-input { + flex: 1; + height: 60rpx; + padding: 0 20rpx; + background-color: #f5f5f5; + border-radius: 8rpx; + font-size: 28rpx; +} + +.search-btn { + width: 120rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #07c160; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.search-btn::after { + border: none; +} + +.clear-btn { + width: 100rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #fa5151; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.clear-btn::after { + border: none; +} + +/* 加载状态 */ +.loading-container { + display: flex; + justify-content: center; + align-items: center; + height: 400rpx; + color: #999; + font-size: 28rpx; +} + +/* 批次列表 */ +.batch-list { + display: flex; + flex-direction: column; + gap: 20rpx; +} + +/* 批次卡片 */ +.batch-card { + background-color: #fff; + border-radius: 12rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +/* 卡片头部 */ +.card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 24rpx; + background-color: #fff; + border-bottom: 1rpx solid #f0f0f0; +} + +.batch-number { + font-size: 32rpx; + font-weight: bold; + color: #07c160; +} + +.edit-btn { + padding: 8rpx 24rpx; + background-color: #07c160; + color: #fff; + border: none; + border-radius: 20rpx; + font-size: 24rpx; +} + +.edit-btn::after { + border: none; +} + +/* 卡片主体 */ +.card-body { + padding: 24rpx; +} + +.info-row { + display: flex; + align-items: flex-start; + padding: 12rpx 0; + font-size: 28rpx; +} + +.info-row .label { + color: #666; + min-width: 220rpx; + flex-shrink: 0; +} + +.info-row .value { + color: #333; + flex: 1; + word-break: break-all; +} + +/* 卡片底部 */ +.card-footer { + padding: 16rpx 24rpx; + background-color: #f8f9fa; + text-align: center; + border-top: 1rpx solid #f0f0f0; +} + +.page-indicator { + font-size: 24rpx; + color: #999; +} + +/* 空状态 */ +.empty-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 100rpx 0; +} + +.empty-icon { + font-size: 120rpx; + margin-bottom: 30rpx; + opacity: 0.3; +} + +.empty-text { + font-size: 28rpx; + color: #999; +} + +/* 分页 */ +.pagination { + display: flex; + align-items: center; + justify-content: center; + margin: 30rpx 0; + padding: 20rpx; + background-color: #fff; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.page-btn { + width: 150rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin: 0 10rpx; + background-color: #07c160; + color: #fff; + font-size: 26rpx; + border-radius: 8rpx; + border: none; +} + +.page-btn::after { + border: none; +} + +.page-btn[disabled] { + background-color: #e0e0e0; + color: #999; +} + +.page-numbers { + display: flex; + flex-wrap: wrap; + gap: 10rpx; + margin: 0 20rpx; + max-width: 400rpx; + justify-content: center; +} + +.page-number { + width: 60rpx; + height: 60rpx; + line-height: 60rpx; + text-align: center; + font-size: 26rpx; + color: #333; + background-color: #f5f5f5; + border-radius: 8rpx; + transition: all 0.3s; +} + +.page-number.active { + background-color: #07c160; + color: #fff; + font-weight: bold; + transform: scale(1.1); + box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); +} + +/* 新增批次按钮 */ +.add-btn { + position: fixed; + bottom: 30rpx; + left: 50%; + transform: translateX(-50%); + width: 90%; + height: 80rpx; + line-height: 80rpx; + text-align: center; + background-color: #07c160; + color: #fff; + font-size: 32rpx; + font-weight: bold; + border-radius: 12rpx; + box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/batches/batches.wxml b/mini_program/farm-monitor-dashboard/pages/cattle/batches/batches.wxml index 3844866..1b9a56e 100644 --- a/mini_program/farm-monitor-dashboard/pages/cattle/batches/batches.wxml +++ b/mini_program/farm-monitor-dashboard/pages/cattle/batches/batches.wxml @@ -1,66 +1,66 @@ - - - - - - - - - - - 总数：{{total}} - 第 {{page}} / {{totalPages}} 页 - - - - - - 加载中... - - - - 暂无数据 - - - - - - - - {{item.name || item.batch_name || item.batchName || '-'}} - 编号：{{item.code || item.batch_number || item.batchNumber || '-'}} - - - 状态：{{item.statusStr}} - 创建时间：{{item.createdAtStr}} - - - - - - - - {{pair.keyZh}} - {{pair.val}} - - - - - - - - - - - - - - - {{num}} - - - - - - + + + + + + + + + + + 总数：{{total}} + 第 {{page}} / {{totalPages}} 页 + + + + + + 加载中... + + + + 暂无数据 + + + + + + + + {{item.name || item.batch_name || item.batchName || '-'}} + 编号：{{item.code || item.batch_number || item.batchNumber || '-'}} + + + 状态：{{item.statusStr}} + 创建时间：{{item.createdAtStr}} + + + + + + + + {{pair.keyZh}} + {{pair.val}} + + + + + + + + + + + + + + + {{num}} + + + + + + \ No newline at end of file diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/batches/batches.wxss b/mini_program/farm-monitor-dashboard/pages/cattle/batches/batches.wxss index 2e301a5..33c6cc4 100644 --- a/mini_program/farm-monitor-dashboard/pages/cattle/batches/batches.wxss +++ b/mini_program/farm-monitor-dashboard/pages/cattle/batches/batches.wxss @@ -1,119 +1,119 @@ -/* 页面容器 */ -.page-container { - padding: 12rpx 16rpx; -} - -/* 搜索栏 */ -.search-bar { - display: flex; - align-items: center; - gap: 12rpx; - margin-bottom: 16rpx; -} -.search-input { - flex: 1; - height: 64rpx; - border: 1px solid #ddd; - border-radius: 8rpx; - padding: 0 12rpx; - background: #fff; -} -.search-btn { - height: 64rpx; - padding: 0 20rpx; -} - -/* 概览栏 */ -.summary-bar { - display: flex; - justify-content: space-between; - color: #666; - font-size: 26rpx; - margin-bottom: 12rpx; -} - -/* 列表滚动区 */ -.list-scroll { - max-height: calc(100vh - 280rpx); -} - -.loading, .empty { - text-align: center; - color: #999; - padding: 24rpx 0; -} - -/* 卡片 */ -.record-card { - background: #fff; - border-radius: 12rpx; - padding: 16rpx; - margin-bottom: 16rpx; - box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.06); -} -.record-header .title-line { - display: flex; - justify-content: space-between; - margin-bottom: 8rpx; -} -.record-header .name { - font-weight: 600; - font-size: 30rpx; -} -.record-header .code { - color: #333; -} -.record-header .meta-line { - display: flex; - gap: 20rpx; - color: #666; - font-size: 26rpx; -} -.record-body .pair-row { - display: flex; - justify-content: space-between; - padding: 8rpx 0; - border-bottom: 1px dashed #eee; -} -.pair-key { - color: #888; -} -.pair-val { - color: #333; -} - -/* 分页 */ -.pagination { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 12rpx; - background: #fff; - padding: 12rpx; - border-radius: 8rpx; -} -.page-numbers { - width: 60%; -} -.page-items { - display: flex; - gap: 12rpx; -} -.page-item { - min-width: 56rpx; - height: 56rpx; - line-height: 56rpx; - text-align: center; - border: 1px solid #ddd; - border-radius: 8rpx; - padding: 0 12rpx; - color: #333; -} -.page-item.active { - background: #3cc51f; - color: #fff; - border-color: #3cc51f; -} -.page-btn[disabled] { - opacity: 0.5; +/* 页面容器 */ +.page-container { + padding: 12rpx 16rpx; +} + +/* 搜索栏 */ +.search-bar { + display: flex; + align-items: center; + gap: 12rpx; + margin-bottom: 16rpx; +} +.search-input { + flex: 1; + height: 64rpx; + border: 1px solid #ddd; + border-radius: 8rpx; + padding: 0 12rpx; + background: #fff; +} +.search-btn { + height: 64rpx; + padding: 0 20rpx; +} + +/* 概览栏 */ +.summary-bar { + display: flex; + justify-content: space-between; + color: #666; + font-size: 26rpx; + margin-bottom: 12rpx; +} + +/* 列表滚动区 */ +.list-scroll { + max-height: calc(100vh - 280rpx); +} + +.loading, .empty { + text-align: center; + color: #999; + padding: 24rpx 0; +} + +/* 卡片 */ +.record-card { + background: #fff; + border-radius: 12rpx; + padding: 16rpx; + margin-bottom: 16rpx; + box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.06); +} +.record-header .title-line { + display: flex; + justify-content: space-between; + margin-bottom: 8rpx; +} +.record-header .name { + font-weight: 600; + font-size: 30rpx; +} +.record-header .code { + color: #333; +} +.record-header .meta-line { + display: flex; + gap: 20rpx; + color: #666; + font-size: 26rpx; +} +.record-body .pair-row { + display: flex; + justify-content: space-between; + padding: 8rpx 0; + border-bottom: 1px dashed #eee; +} +.pair-key { + color: #888; +} +.pair-val { + color: #333; +} + +/* 分页 */ +.pagination { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 12rpx; + background: #fff; + padding: 12rpx; + border-radius: 8rpx; +} +.page-numbers { + width: 60%; +} +.page-items { + display: flex; + gap: 12rpx; +} +.page-item { + min-width: 56rpx; + height: 56rpx; + line-height: 56rpx; + text-align: center; + border: 1px solid #ddd; + border-radius: 8rpx; + padding: 0 12rpx; + color: #333; +} +.page-item.active { + background: #3cc51f; + color: #fff; + border-color: #3cc51f; +} +.page-btn[disabled] { + opacity: 0.5; } \ No newline at end of file diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/cattle.js b/mini_program/farm-monitor-dashboard/pages/cattle/cattle.js index c7dbdcf..bd64c7f 100644 --- a/mini_program/farm-monitor-dashboard/pages/cattle/cattle.js +++ b/mini_program/farm-monitor-dashboard/pages/cattle/cattle.js @@ -1,421 +1,73 @@ -// pages/cattle/cattle.js -const { get, del } = require('../../utils/api') -const { formatDate, formatTime } = require('../../utils/index') - +// pages/cattle/cattle.js - 生产管理/牛羊管理页面 Page({ data: { - cattleList: [], - loading: false, - refreshing: false, - searchKeyword: '', - // 设备编号精确查询 - deviceNumber: '', - statusFilter: 'all', - page: 1, - // 按需求使用每页10条 - pageSize: 10, - hasMore: true, - total: 0, - // 分页页码集合 - pages: [], - lastPage: 1 + // 牛只管理功能列表 + cattleFunctions: [ + { id: 1, name: '牛档案', iconText: '📁', color: 'icon-cyan', url: '/pages/cattle/archive/archive' }, + { id: 2, name: '发情记录', iconText: '💗', color: 'icon-orange', url: '/pages/cattle/estrus/estrus' }, + { id: 3, name: '配种记录', iconText: '🔬', color: 'icon-blue', url: '/pages/cattle/breeding/breeding' }, + { id: 4, name: '妊娠记录', iconText: '🤰', color: 'icon-yellow', url: '/pages/cattle/pregnancy/pregnancy' }, + { id: 5, name: '分娩记录', iconText: '👶', color: 'icon-green', url: '/pages/cattle/birth/birth' }, + { id: 6, name: '断奶记录', iconText: '🍼', color: 'icon-purple', url: '/pages/cattle/weaning/weaning' }, + { id: 7, name: '转栏记录', iconText: '🔄', color: 'icon-red', url: '/pages/cattle/transfer/transfer' }, + { id: 8, name: '离栏记录', iconText: '🚪', color: 'icon-teal', url: '/pages/cattle/exit/exit' }, + { id: 9, name: '栏舍设置', iconText: '🏠', color: 'icon-indigo', url: '/pages/cattle/pen/pen' }, + { id: 10, name: '批次设置', iconText: '📦', color: 'icon-pink', url: '/pages/cattle/batch/batch' }, + { id: 11, name: '防疫预警', iconText: '💉', color: 'icon-lime', url: '/pages/cattle/vaccination/vaccination' } + ], + // 猪只管理功能列表 + pigFunctions: [ + { id: 1, name: '猪档案', iconText: '📁', color: 'icon-cyan', url: '/pages/pig/archive/archive' }, + { id: 2, name: '发情记录', iconText: '💗', color: 'icon-orange', url: '/pages/pig/estrus/estrus' }, + { id: 3, name: '配种记录', iconText: '🔬', color: 'icon-blue', url: '/pages/pig/breeding/breeding' }, + { id: 4, name: '妊娠记录', iconText: '🤰', color: 'icon-yellow', url: '/pages/pig/pregnancy/pregnancy' }, + { id: 5, name: '分娩记录', iconText: '👶', color: 'icon-green', url: '/pages/pig/birth/birth' }, + { id: 6, name: '断奶记录', iconText: '🍼', color: 'icon-purple', url: '/pages/pig/weaning/weaning' }, + { id: 7, name: '转栏记录', iconText: '🔄', color: 'icon-red', url: '/pages/pig/transfer/transfer' }, + { id: 8, name: '离栏记录', iconText: '🚪', color: 'icon-teal', url: '/pages/pig/exit/exit' }, + { id: 9, name: '栏舍设置', iconText: '🏠', color: 'icon-indigo', url: '/pages/pig/pens/pens' }, + { id: 10, name: '批次设置', iconText: '📦', color: 'icon-pink', url: '/pages/pig/batches/batches' }, + { id: 11, name: '防疫预警', iconText: '💉', color: 'icon-lime', url: '/pages/pig/vaccination/vaccination' } + ] }, - onLoad(options) { - // 获取筛选参数 - if (options.status) { - this.setData({ statusFilter: options.status }) - } - - this.loadCattleList() + onLoad() { + console.log('牛羊管理页面加载') }, onShow() { - this.loadCattleList() + console.log('牛羊管理页面显示') }, onPullDownRefresh() { - this.setData({ - page: 1, - hasMore: true, - cattleList: [] - }) - this.loadCattleList().then(() => { + // 下拉刷新 + setTimeout(() => { wx.stopPullDownRefresh() - }) - }, - - onReachBottom() { - if (this.data.hasMore && !this.data.loading) { - this.loadMoreCattle() - } - }, - - // 加载牛只列表 - async loadCattleList() { - this.setData({ loading: true }) - - try { - const params = { - // 页码与每页条数的常见别名，提升与后端的兼容性 - page: this.data.page, - pageNo: this.data.page, - pageIndex: this.data.page, - current: this.data.page, - pageSize: this.data.pageSize, - size: this.data.pageSize, - limit: this.data.pageSize, - status: this.data.statusFilter === 'all' ? '' : this.data.statusFilter - } - - if (this.data.searchKeyword) { - params.search = this.data.searchKeyword - } - // 设备编号精确查询参数（尽可能兼容后端不同命名） - if (this.data.deviceNumber) { - params.deviceNumber = this.data.deviceNumber - params.deviceSn = this.data.deviceNumber - params.deviceId = this.data.deviceNumber - // 部分接口可能支持exact开关 - params.exact = true - } - - const response = await get('/iot-cattle/public', params) - // 统一兼容响应结构（尽可能兼容不同后端命名） - const list = (response && response.data && (response.data.list || response.data.records || response.data.items)) - || (response && (response.list || response.records || response.items)) - || [] - const totalRaw = (response && response.data && (response.data.total ?? response.data.totalCount ?? response.data.count)) - || (response && (response.total ?? response.totalCount ?? response.count)) - || (response && response.page && response.page.total) - || 0 - const totalPagesOverride = (response && response.data && (response.data.totalPages ?? response.data.pageCount)) - || (response && (response.totalPages ?? response.pageCount)) - || (response && response.page && (response.page.totalPages ?? response.page.pageCount)) - || 0 - const total = Number(totalRaw) || 0 - const isUnknownTotal = !(Number(totalPagesOverride) > 0) && !(Number(totalRaw) > 0) - console.log('牛只档案接口原始响应：', response) - const mappedList = list.map(this.mapCattleRecord) - console.log('牛只档案字段映射结果（当前页）:', mappedList) - const cattleList = this.data.page === 1 ? mappedList : [...this.data.cattleList, ...mappedList] - // 根据总页数判断是否还有更多（兼容后端直接返回totalPages/pageCount）。 - // 当后端未返回 total/totalPages 时，使用“本页数据条数 == pageSize”作为是否还有更多的兜底策略。 - const totalPages = Math.max(1, Number(totalPagesOverride) || Math.ceil(total / this.data.pageSize)) - const hasMore = isUnknownTotal ? (mappedList.length >= this.data.pageSize) : (this.data.page < totalPages) - this.setData({ cattleList, total, hasMore }) - console.log('分页计算：', { total, pageSize: this.data.pageSize, totalPages, currentPage: this.data.page, isUnknownTotal }) - // 生成分页页码 - this.buildPagination(total, totalPages, isUnknownTotal) - } catch (error) { - console.error('获取牛只列表失败:', error) wx.showToast({ - title: '获取数据失败', - icon: 'none' + title: '刷新成功', + icon: 'success' }) - } finally { - this.setData({ loading: false }) - } + }, 1000) }, - // 加载更多牛只 - async loadMoreCattle() { - if (!this.data.hasMore || this.data.loading) return - - this.setData({ - page: this.data.page + 1 - }) - - await this.loadCattleList() - }, - - // 搜索输入 - onSearchInput(e) { - this.setData({ - searchKeyword: e.detail.value - }) - }, - - // 设备编号输入（精确查询） - onDeviceInput(e) { - this.setData({ - deviceNumber: e.detail.value.trim() - }) - }, - - // 执行搜索 - onSearch() { - this.setData({ - page: 1, - hasMore: true, - cattleList: [] - }) - this.loadCattleList() - }, - - // 执行设备编号精确查询 - onDeviceSearch() { - if (!this.data.deviceNumber) { - wx.showToast({ title: '请输入设备编号', icon: 'none' }) - return - } - this.setData({ - page: 1, - hasMore: true, - cattleList: [], - // 精确查询时不使用模糊关键词 - searchKeyword: '' - }) - this.loadCattleList() - }, - - // 清空搜索 - onClearSearch() { - this.setData({ - searchKeyword: '', - deviceNumber: '', - page: 1, - hasMore: true, - cattleList: [] - }) - this.loadCattleList() - }, - - // 状态筛选 - onStatusFilter(e) { - const status = e.currentTarget.dataset.status - this.setData({ - statusFilter: status, - page: 1, - hasMore: true, - cattleList: [] - }) - this.loadCattleList() - }, - - // 查看牛只详情 - viewCattleDetail(e) { - const id = e.currentTarget.dataset.id - wx.navigateTo({ - url: `/pages/cattle/detail/detail?id=${id}` - }) - }, - - // 添加牛只 - addCattle() { - wx.navigateTo({ - url: '/pages/cattle/add/add' - }) - }, - - // 编辑牛只 - editCattle(e) { - const id = e.currentTarget.dataset.id - wx.navigateTo({ - url: `/pages/cattle/edit/edit?id=${id}` - }) - }, - - // 删除牛只 - async deleteCattle(e) { - const id = e.currentTarget.dataset.id - const name = e.currentTarget.dataset.name - - const confirmed = await wx.showModal({ - title: '确认删除', - content: `确定要删除牛只"${name}"吗？`, - confirmText: '删除', - confirmColor: '#f5222d' - }) - - if (confirmed) { - try { - wx.showLoading({ title: '删除中...' }) - - const response = await del(`/iot-cattle/${id}`) - - if (response.success) { + // 导航到功能页面 + navigateTo(e) { + const url = e.currentTarget.dataset.url + if (url) { + wx.navigateTo({ + url, + fail: () => { wx.showToast({ - title: '删除成功', - icon: 'success' - }) - - // 刷新列表 - this.setData({ - page: 1, - hasMore: true, - cattleList: [] - }) - this.loadCattleList() - } else { - wx.showToast({ - title: response.message || '删除失败', + title: '功能开发中', icon: 'none' }) } - } catch (error) { - console.error('删除牛只失败:', error) - wx.showToast({ - title: '删除失败', - icon: 'none' - }) - } finally { - wx.hideLoading() - } - } - }, - - // 获取状态文本 - getStatusText(status) { - const statusMap = { - 'normal': '正常', - 'pregnant': '怀孕', - 'sick': '生病', - 'quarantine': '隔离', - 'sold': '已售', - 'dead': '死亡' - } - return statusMap[status] || '未知' - }, - - // 获取状态颜色 - getStatusColor(status) { - const colorMap = { - 'normal': '#52c41a', - 'pregnant': '#faad14', - 'sick': '#f5222d', - 'quarantine': '#909399', - 'sold': '#1890ff', - 'dead': '#666666' - } - return colorMap[status] || '#909399' - }, - - // 格式化日期 - formatDate(date) { - return formatDate(date) - }, - - // 格式化时间 - formatTime(time) { - return formatTime(time) - }, - - // 字段中文映射与安全处理 - mapCattleRecord(item = {}) { - // 统一时间戳（后端可能返回秒级或毫秒级） - const normalizeTs = (ts) => { - if (ts === null || ts === undefined || ts === '') return '' - if (typeof ts === 'number') { - return ts < 1000000000000 ? ts * 1000 : ts - } - // 字符串数字 - const n = Number(ts) - if (!Number.isNaN(n)) return n < 1000000000000 ? n * 1000 : n - return ts - } - - // 性别映射（仅做友好展示，保留原值） - const rawSex = item.sex ?? item.gender - const sexText = rawSex === 1 || rawSex === '1' ? '公' : (rawSex === 2 || rawSex === '2' ? '母' : (rawSex ?? '-')) - - return { - // 基本标识 - id: item.id ?? item.cattleId ?? item._id ?? '', - name: item.name ?? item.cattleName ?? '', - earNumber: item.earNumber ?? item.earNo ?? item.earTag ?? '-', - - // 基本属性 - breed: item.breed ?? item.breedName ?? item.varieties ?? '-', - strain: item.strain ?? '-', - varieties: item.varieties ?? '-', - cate: item.cate ?? '-', - gender: rawSex ?? '-', - genderText: sexText, - age: item.age ?? item.ageYear ?? '-', - ageInMonths: item.ageInMonths ?? item.ageMonth ?? '-', - - // 体重与计算 - weight: item.weight ?? item.currentWeight ?? '-', - currentWeight: item.currentWeight ?? '-', - birthWeight: item.birthWeight ?? '-', - sourceWeight: item.sourceWeight ?? '-', - weightCalculateTime: item.weightCalculateTime ? formatDate(normalizeTs(item.weightCalculateTime), 'YYYY-MM-DD HH:mm:ss') : '', - - // 来源信息 - source: item.source ?? '-', - sourceDay: item.sourceDay ?? '-', - - // 关联位置与组织 - deviceNumber: item.deviceNumber ?? item.deviceSn ?? item.deviceId ?? '-', - penId: item.penId ?? '-', - penName: item.penName ?? item.barnName ?? '-', - batchId: item.batchId ?? '-', - batchName: item.batchName ?? '-', - farmId: item.farmId ?? '-', - farmName: item.farmName ?? '-', - - // 生育与阶段 - parity: item.parity ?? '-', - physiologicalStage: item.physiologicalStage ?? '-', - status: item.status ?? item.cattleStatus ?? 'normal', - - // 重要日期 - birthday: item.birthday ?? item.birthDate ?? item.bornDate ?? item.birthTime ?? '', - birthdayStr: item.birthday || item.birthDate || item.bornDate || item.birthTime - ? formatDate(normalizeTs(item.birthday ?? item.birthDate ?? item.bornDate ?? item.birthTime)) - : '', - dayOfBirthday: item.dayOfBirthday ?? '-', - intoTime: item.intoTime ?? '', - intoTimeStr: item.intoTime ? formatDate(normalizeTs(item.intoTime)) : '' - } - }, - - // 生成分页页码，控制展示范围并高亮当前页 - buildPagination(total, totalPagesOverride = 0, isUnknownTotal = false) { - const pageSize = this.data.pageSize - const current = this.data.page - // 当总数未知时，按已加载的当前页生成页码（1..current），允许继续“下一页”。 - if (isUnknownTotal) { - const pages = Array.from({ length: Math.max(1, current) }, (_, i) => i + 1) - this.setData({ pages, lastPage: current }) - return - } - const totalPages = Math.max(1, Number(totalPagesOverride) || Math.ceil(total / pageSize)) - let pages = [] - const maxVisible = 9 - if (totalPages <= maxVisible) { - pages = Array.from({ length: totalPages }, (_, i) => i + 1) + }) } else { - // 滑动窗口 - let start = Math.max(1, current - 4) - let end = Math.min(totalPages, start + maxVisible - 1) - // 保证区间长度 - start = Math.max(1, end - maxVisible + 1) - pages = Array.from({ length: end - start + 1 }, (_, i) => start + i) + wx.showToast({ + title: '功能开发中', + icon: 'none' + }) } - this.setData({ pages, lastPage: totalPages }) - }, - - // 上一页 - onPrevPage() { - if (this.data.page <= 1) return - this.setData({ page: this.data.page - 1, cattleList: [] }) - this.loadCattleList() - }, - - // 下一页 - onNextPage() { - if (!this.data.hasMore) return - this.setData({ page: this.data.page + 1, cattleList: [] }) - this.loadCattleList() - }, - - // 切换页码 - onPageTap(e) { - const targetPage = Number(e.currentTarget.dataset.page) - if (!targetPage || targetPage === this.data.page) return - this.setData({ page: targetPage, cattleList: [] }) - this.loadCattleList() } }) diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/cattle.json b/mini_program/farm-monitor-dashboard/pages/cattle/cattle.json new file mode 100644 index 0000000..5ec3a5f --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/cattle.json @@ -0,0 +1,9 @@ +{ + "navigationBarTitleText": "生产管理", + "enablePullDownRefresh": true, + "backgroundColor": "#f5f5f5", + "navigationBarBackgroundColor": "#ffffff", + "navigationBarTextStyle": "black", + "usingComponents": {} +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/cattle.wxml b/mini_program/farm-monitor-dashboard/pages/cattle/cattle.wxml index 966e6c2..668d635 100644 --- a/mini_program/farm-monitor-dashboard/pages/cattle/cattle.wxml +++ b/mini_program/farm-monitor-dashboard/pages/cattle/cattle.wxml @@ -1,159 +1,39 @@ - - - - - - - 🔍 - - - 清空 - - - - - - 全部 - - - 正常 - - - 怀孕 - - - 生病 - - - 隔离 - - - - - - - - 🐄 + + + + + + + + 牛只管理 - - - {{item.name || item.earNumber}} - - 耳号: {{item.earNumber}} - 品种: {{item.breed || '未知'}} - - - - - 性别:{{item.genderText}} - 血统:{{item.strain || '-'}} - 品系:{{item.varieties || '-'}} - 品类:{{item.cate || '-'}} - 年龄(月):{{item.ageInMonths || '-'}} - 出生日期:{{item.birthdayStr || '-'}} - 出生体重(kg):{{item.birthWeight || '-'}} - 当前体重(kg):{{item.currentWeight || '-'}} - 来源:{{item.source || '-'}} - 来源天数:{{item.sourceDay || '-'}} - 来源体重(kg):{{item.sourceWeight || '-'}} - 批次:{{item.batchName || '-'}}(ID:{{item.batchId || '-'}}) - 农场:{{item.farmName || '-'}}(ID:{{item.farmId || '-'}}) - 栏舍:{{item.penName || '-'}}(ID:{{item.penId || '-'}}) - 进场日期:{{item.intoTimeStr || '-'}} - 胎次:{{item.parity || '-'}} - 生理阶段:{{item.physiologicalStage || '-'}} - 体重计算时间:{{item.weightCalculateTime || '-'}} - - - - - - {{getStatusText(item.status)}} - - - 编辑 - 删除 + + + + {{item.iconText}} + + {{item.name}} - - - 🐄 - 暂无牛只数据 - + + + + + 猪只管理 + + + + + {{item.iconText}} + + {{item.name}} + + - - - 加载中... - 上拉加载更多 - - - - - 没有更多数据了 - - - - - - 上一页 - 首页 - {{item}} - 末页 - 下一页 - - - - - + - - - - - - 加载中... - + + + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/cattle.wxss b/mini_program/farm-monitor-dashboard/pages/cattle/cattle.wxss index 44cfb85..501e8d8 100644 --- a/mini_program/farm-monitor-dashboard/pages/cattle/cattle.wxss +++ b/mini_program/farm-monitor-dashboard/pages/cattle/cattle.wxss @@ -1,365 +1,138 @@ -/* pages/cattle/cattle.wxss */ -.cattle-container { - background-color: #f6f6f6; - min-height: 100vh; - padding-bottom: 120rpx; +/* pages/cattle/cattle.wxss - 生产管理/牛羊管理样式 */ +page { + background-color: #f5f5f5; + height: 100%; } -.search-bar { +.page-container { display: flex; - align-items: center; - padding: 16rpx; - background-color: #ffffff; - border-bottom: 1rpx solid #f0f0f0; + flex-direction: column; + height: 100%; + background-color: #f5f5f5; } -.search-input-wrapper { +.scroll-content { flex: 1; - position: relative; - margin-right: 16rpx; + padding: 20rpx 0; } -.search-input { - width: 100%; - height: 72rpx; - background-color: #f5f5f5; - border-radius: 36rpx; - padding: 0 60rpx 0 24rpx; - font-size: 28rpx; - color: #303133; +/* 区块样式 */ +.section { + margin-bottom: 30rpx; } -.search-icon { - position: absolute; - right: 24rpx; - top: 50%; - transform: translateY(-50%); - font-size: 32rpx; - color: #909399; -} - -.clear-btn { - font-size: 28rpx; - color: #3cc51f; - padding: 8rpx 16rpx; -} - -.status-filter { - display: flex; - background-color: #ffffff; - padding: 16rpx; - border-bottom: 1rpx solid #f0f0f0; - overflow-x: auto; -} - -.filter-item { - padding: 12rpx 24rpx; - margin-right: 16rpx; - background-color: #f5f5f5; - border-radius: 20rpx; - font-size: 24rpx; - color: #606266; - white-space: nowrap; - transition: all 0.3s; -} - -.filter-item.active { - background-color: #3cc51f; - color: #ffffff; -} - -.cattle-list { - padding: 16rpx; -} - -.cattle-item { +.section-header { display: flex; align-items: center; + margin: 0 30rpx 30rpx; +} + +.header-line { + width: 8rpx; + height: 32rpx; + background: linear-gradient(180deg, #52c41a 0%, #73d13d 100%); + border-radius: 4rpx; + margin-right: 16rpx; +} + +.section-title { + font-size: 34rpx; + font-weight: bold; + color: #333333; +} + +/* 功能网格 */ +.function-grid { + display: flex; + flex-wrap: wrap; + padding: 0 20rpx; background-color: #ffffff; - border-radius: 12rpx; - padding: 24rpx; - margin-bottom: 16rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); - transition: all 0.3s; + margin: 0 20rpx; + border-radius: 16rpx; + padding: 20rpx 10rpx; } -.cattle-item:active { - transform: scale(0.98); - box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1); +.function-item { + width: 20%; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 40rpx; } -.cattle-avatar { - width: 80rpx; - height: 80rpx; - background-color: #f0f9ff; +.icon-box { + width: 96rpx; + height: 96rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; - margin-right: 24rpx; - flex-shrink: 0; -} - -.avatar-icon { - font-size: 40rpx; -} - -.cattle-info { - flex: 1; - margin-right: 16rpx; -} - -.cattle-name { - font-size: 32rpx; - font-weight: 500; - color: #303133; - margin-bottom: 8rpx; -} - -.cattle-details { - display: flex; - flex-direction: column; - margin-bottom: 8rpx; -} - -.detail-item { - font-size: 24rpx; - color: #606266; - margin-bottom: 4rpx; -} - -.cattle-meta { - display: flex; - flex-direction: column; -} - -.meta-item { - font-size: 22rpx; - color: #909399; - margin-bottom: 2rpx; -} - -/* 扩展详情样式 */ -.cattle-extra { - margin-top: 8rpx; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 6rpx 12rpx; -} -.extra-row { - display: flex; - align-items: center; - font-size: 22rpx; -} -.extra-label { - color: #909399; - margin-right: 8rpx; -} -.extra-value { - color: #303133; -} - -.cattle-status { - display: flex; - flex-direction: column; - align-items: flex-end; -} - -.status-badge { - padding: 6rpx 16rpx; - border-radius: 12rpx; - font-size: 20rpx; - color: #ffffff; margin-bottom: 12rpx; } -.cattle-actions { - display: flex; - flex-direction: column; - gap: 8rpx; -} - -.action-btn { - padding: 6rpx 12rpx; - border-radius: 8rpx; - font-size: 20rpx; - text-align: center; - min-width: 60rpx; -} - -.action-btn.edit { - background-color: #e6f7ff; - color: #1890ff; -} - -.action-btn.delete { - background-color: #fff2f0; - color: #f5222d; -} - -.empty-state { - text-align: center; - padding: 120rpx 32rpx; -} - -.empty-icon { - font-size: 120rpx; - display: block; - margin-bottom: 24rpx; - opacity: 0.5; -} - -.empty-text { - font-size: 32rpx; - color: #909399; - margin-bottom: 32rpx; - display: block; -} - -.add-btn { - background-color: #3cc51f; - color: #ffffff; - border-radius: 24rpx; - padding: 16rpx 32rpx; - font-size: 28rpx; - border: none; -} - -.add-btn:active { - background-color: #2ea617; -} - -.load-more { - text-align: center; - padding: 32rpx; - font-size: 24rpx; - color: #909399; -} - -.no-more { - text-align: center; - padding: 32rpx; - font-size: 24rpx; - color: #c0c4cc; -} - -/* 分页导航 */ -.pagination { - display: flex; - flex-wrap: wrap; - gap: 12rpx; - align-items: center; - justify-content: center; - padding: 20rpx 16rpx 40rpx; -} - -.page-item { - min-width: 60rpx; - padding: 12rpx 20rpx; - border-radius: 8rpx; - background-color: #f5f5f5; - color: #606266; - font-size: 26rpx; - text-align: center; -} - -.page-item.active { - background-color: #3cc51f; - color: #ffffff; -} - -/* 分页禁用态 */ -.page-item.disabled { - opacity: 0.5; - pointer-events: none; -} - -.fab { - position: fixed; - right: 32rpx; - bottom: 120rpx; - width: 112rpx; - height: 112rpx; - background-color: #3cc51f; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 4rpx 16rpx rgba(60, 197, 31, 0.3); - z-index: 100; -} - -.fab:active { - transform: scale(0.95); -} - -.fab-icon { - font-size: 48rpx; - color: #ffffff; - font-weight: bold; -} - -.loading-container { - text-align: center; - padding: 120rpx 32rpx; -} - -.loading-spinner { +.item-icon { width: 48rpx; height: 48rpx; - border: 4rpx solid #f0f0f0; - border-top: 4rpx solid #3cc51f; - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 16rpx; } -.loading-text { - font-size: 28rpx; - color: #909399; +.item-icon-text { + font-size: 48rpx; + line-height: 1; } -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } +.item-label { + font-size: 24rpx; + color: #333333; + text-align: center; + line-height: 1.4; } -/* 响应式设计 */ -@media (max-width: 375px) { - .cattle-item { - padding: 20rpx; - } - - .cattle-avatar { - width: 70rpx; - height: 70rpx; - margin-right: 20rpx; - } - - .avatar-icon { - font-size: 36rpx; - } - - .cattle-name { - font-size: 30rpx; - } - - .detail-item { - font-size: 22rpx; - } - - .meta-item { - font-size: 20rpx; - } - - .fab { - right: 24rpx; - bottom: 100rpx; - width: 100rpx; - height: 100rpx; - } - - .fab-icon { - font-size: 44rpx; - } +/* 图标背景颜色 */ +.icon-cyan { + background: linear-gradient(135deg, #E3F9FF 0%, #B3ECFF 100%); +} + +.icon-orange { + background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%); +} + +.icon-blue { + background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); +} + +.icon-yellow { + background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%); +} + +.icon-green { + background: linear-gradient(135deg, #E8F9F0 0%, #C3F0D3 100%); +} + +.icon-purple { + background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%); +} + +.icon-red { + background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%); +} + +.icon-teal { + background: linear-gradient(135deg, #E0F2F1 0%, #B2DFDB 100%); +} + +.icon-indigo { + background: linear-gradient(135deg, #E8EAF6 0%, #C5CAE9 100%); +} + +.icon-pink { + background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%); +} + +.icon-lime { + background: linear-gradient(135deg, #F9FBE7 0%, #F0F4C3 100%); +} + +/* 底部留白 */ +.bottom-space { + height: 40rpx; } diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/detail/detail.js b/mini_program/farm-monitor-dashboard/pages/cattle/detail/detail.js new file mode 100644 index 0000000..595b580 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/detail/detail.js @@ -0,0 +1,148 @@ +// pages/cattle/detail/detail.js +const API = require('../../../utils/api').API + +Page({ + data: { + id: null, + cattle: null, + loading: true + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + if (options.id) { + this.setData({ id: options.id }) + this.loadData() + } else { + wx.showToast({ + title: '参数错误', + icon: 'none' + }) + setTimeout(() => { + wx.navigateBack() + }, 1500) + } + }, + + /** + * 加载数据 + */ + async loadData() { + this.setData({ loading: true }) + + try { + // 方式1：如果有详情接口 + // const res = await API.getCattleDetail(this.data.id) + // const cattle = res.data || res + + // 方式2：从列表中获取（临时方案） + // 先获取列表，找到对应ID的牛只 + const res = await API.getCattleList({ + page: 1, + pageSize: 1000 // 获取足够多的数据 + }) + + const list = res.data?.list || res.list || [] + const cattle = list.find(item => item.id === parseInt(this.data.id)) + + if (!cattle) { + wx.showToast({ + title: '未找到该牛只信息', + icon: 'none' + }) + setTimeout(() => { + wx.navigateBack() + }, 1500) + return + } + + // 格式化数据 + const formattedCattle = { + ...cattle, + // 格式化出生日期 + birthdayText: cattle.birthday ? this.formatDate(cattle.birthday) : '-', + // 格式化入场时间 + intoTimeText: cattle.intoTime ? this.formatDate(cattle.intoTime) : '-', + // 格式化性别 + sexText: cattle.sex === 1 ? '公' : cattle.sex === 2 ? '母' : '未知', + // 格式化生理阶段 + physiologicalStageText: this.getPhysiologicalStage(cattle.physiologicalStage), + // 格式化来源 + sourceText: cattle.source === 1 ? '自繁' : cattle.source === 2 ? '外购' : '未知', + // 格式化体重计算时间 + weightCalculateTimeText: cattle.weightCalculateTime ? this.formatDateTime(cattle.weightCalculateTime) : '-' + } + + this.setData({ + cattle: formattedCattle, + loading: false + }) + + } catch (error) { + console.error('加载数据失败:', error) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + this.setData({ loading: false }) + + setTimeout(() => { + wx.navigateBack() + }, 1500) + } + }, + + /** + * 格式化日期（时间戳转日期） + */ + formatDate(timestamp) { + if (!timestamp) return '-' + const date = new Date(timestamp * 1000) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + return `${year}-${month}-${day}` + }, + + /** + * 格式化日期时间 + */ + formatDateTime(dateString) { + if (!dateString) return '-' + const date = new Date(dateString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}` + }, + + /** + * 获取生理阶段文本 + */ + getPhysiologicalStage(stage) { + const stages = { + 0: '犊牛期', + 1: '育成期', + 2: '成年期', + 3: '老年期' + } + return stages[stage] || '未知' + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + this.loadData() + setTimeout(() => { + wx.stopPullDownRefresh() + }, 1000) + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/detail/detail.json b/mini_program/farm-monitor-dashboard/pages/cattle/detail/detail.json new file mode 100644 index 0000000..287df30 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/detail/detail.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "牛只详情", + "enablePullDownRefresh": true, + "backgroundTextStyle": "dark", + "backgroundColor": "#f5f5f5" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/detail/detail.wxml b/mini_program/farm-monitor-dashboard/pages/cattle/detail/detail.wxml new file mode 100644 index 0000000..7cf601e --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/detail/detail.wxml @@ -0,0 +1,163 @@ + + + + + 加载中... + + + + + + + 耳号：{{cattle.earNumber}} + {{cattle.sexText}} + + + + + 基本信息 + + + ID： + {{cattle.id}} + + + 耳号： + {{cattle.earNumber}} + + + 性别： + {{cattle.sexText}} + + + 品种： + {{cattle.varieties || '-'}} + + + 品系： + {{cattle.strain || '-'}} + + + 分类： + {{cattle.cate || '-'}} + + + + + + + 出生信息 + + + 出生日期： + {{cattle.birthdayText}} + + + 出生体重： + {{cattle.birthWeight || '-'}} kg + + + 月龄： + {{cattle.ageInMonths || 0}} 个月 + + + 出生天数： + {{cattle.dayOfBirthday || 0}} 天 + + + + + + + 入场信息 + + + 入场时间： + {{cattle.intoTimeText}} + + + 来源： + {{cattle.sourceText}} + + + 来源日龄： + {{cattle.sourceDay || 0}} 天 + + + 来源体重： + {{cattle.sourceWeight || '-'}} kg + + + + + + + 生理信息 + + + 生理阶段： + {{cattle.physiologicalStageText}} + + + 胎次： + {{cattle.parity || 0}} 胎 + + + + + + + 体重信息 + + + 当前体重： + {{cattle.currentWeight || 0}} kg + + + 体重计算时间： + {{cattle.weightCalculateTimeText}} + + + + + + + 场地信息 + + + 养殖场ID： + {{cattle.farmId || '-'}} + + + 养殖场名称： + {{cattle.farmName || '-'}} + + + 栏舍ID： + {{cattle.penId || '-'}} + + + 栏舍名称： + {{cattle.penName || '-'}} + + + 批次ID： + {{cattle.batchId || '-'}} + + + 批次名称： + {{cattle.batchName || '-'}} + + + + + + + + + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/detail/detail.wxss b/mini_program/farm-monitor-dashboard/pages/cattle/detail/detail.wxss new file mode 100644 index 0000000..a697c23 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/detail/detail.wxss @@ -0,0 +1,120 @@ +/* pages/cattle/detail/detail.wxss */ +.page-container { + min-height: 100vh; + background-color: #f5f5f5; +} + +/* 加载状态 */ +.loading-container { + display: flex; + justify-content: center; + align-items: center; + height: 400rpx; + color: #999; + font-size: 28rpx; +} + +/* 详情内容 */ +.detail-content { + padding: 20rpx; +} + +/* 头部 */ +.detail-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 32rpx 24rpx; + background: linear-gradient(135deg, #07c160 0%, #05a651 100%); + border-radius: 12rpx; + margin-bottom: 20rpx; + box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); +} + +.ear-number { + font-size: 36rpx; + font-weight: bold; + color: #fff; +} + +.sex-badge { + padding: 8rpx 24rpx; + font-size: 26rpx; + font-weight: 500; + border-radius: 20rpx; + background-color: rgba(255, 255, 255, 0.3); + color: #fff; + border: 2rpx solid rgba(255, 255, 255, 0.5); +} + +.sex-badge.male { + background-color: rgba(33, 150, 243, 0.3); +} + +.sex-badge.female { + background-color: rgba(233, 30, 99, 0.3); +} + +/* 信息区块 */ +.info-section { + background-color: #fff; + border-radius: 12rpx; + margin-bottom: 20rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.section-title { + padding: 24rpx; + font-size: 30rpx; + font-weight: bold; + color: #333; + background-color: #f8f9fa; + border-bottom: 1rpx solid #e9ecef; +} + +.info-list { + padding: 12rpx 24rpx; +} + +.info-item { + display: flex; + align-items: flex-start; + padding: 16rpx 0; + border-bottom: 1rpx solid #f0f0f0; +} + +.info-item:last-child { + border-bottom: none; +} + +.info-item .label { + min-width: 220rpx; + font-size: 28rpx; + color: #666; + flex-shrink: 0; +} + +.info-item .value { + flex: 1; + font-size: 28rpx; + color: #333; + font-weight: 500; + word-break: break-all; +} + +/* 原始数据 */ +.raw-data { + padding: 20rpx; + background-color: #f8f9fa; + border-radius: 8rpx; + margin: 20rpx; +} + +.raw-data text { + font-size: 24rpx; + color: #666; + line-height: 1.6; + word-break: break-all; +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/exit-detail/exit-detail.js b/mini_program/farm-monitor-dashboard/pages/cattle/exit-detail/exit-detail.js new file mode 100644 index 0000000..d71c9cd --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/exit-detail/exit-detail.js @@ -0,0 +1,122 @@ +// pages/cattle/exit-detail/exit-detail.js +const API = require('../../../utils/api').API + +Page({ + data: { + id: null, + record: null, + loading: true + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + if (options.id) { + this.setData({ id: options.id }) + this.loadData() + } else { + wx.showToast({ + title: '参数错误', + icon: 'none' + }) + setTimeout(() => { + wx.navigateBack() + }, 1500) + } + }, + + /** + * 加载数据 + */ + async loadData() { + this.setData({ loading: true }) + + try { + // 方式1：如果有详情接口 + // const res = await API.getExitRecordDetail(this.data.id) + // const record = res.data || res + + // 方式2：从列表中获取（临时方案） + const res = await API.getExitRecords({ + page: 1, + pageSize: 1000 // 获取足够多的数据 + }) + + const list = res.data?.list || res.data || res.list || [] + const record = list.find(item => item.id === parseInt(this.data.id)) + + if (!record) { + wx.showToast({ + title: '未找到该离栏记录', + icon: 'none' + }) + setTimeout(() => { + wx.navigateBack() + }, 1500) + return + } + + // 格式化数据 + const formattedRecord = { + ...record, + // 格式化离栏日期 + exitDateText: record.exitDate ? this.formatDateTime(record.exitDate) : '-', + // 格式化创建时间 + createdAtText: record.created_at ? this.formatDateTime(record.created_at) : '-', + // 格式化更新时间 + updatedAtText: record.updated_at ? this.formatDateTime(record.updated_at) : '-', + // 原栏舍信息 + originalPenName: record.originalPen?.name || '-', + originalPenCode: record.originalPen?.code || '-', + // 养殖场信息 + farmName: record.farm?.name || '-' + } + + this.setData({ + record: formattedRecord, + loading: false + }) + + } catch (error) { + console.error('加载数据失败:', error) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + this.setData({ loading: false }) + + setTimeout(() => { + wx.navigateBack() + }, 1500) + } + }, + + /** + * 格式化日期时间 + */ + formatDateTime(dateString) { + if (!dateString) return '-' + const date = new Date(dateString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + this.loadData() + setTimeout(() => { + wx.stopPullDownRefresh() + }, 1000) + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/exit-detail/exit-detail.json b/mini_program/farm-monitor-dashboard/pages/cattle/exit-detail/exit-detail.json new file mode 100644 index 0000000..1375a99 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/exit-detail/exit-detail.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "离栏记录详情", + "enablePullDownRefresh": true, + "backgroundTextStyle": "dark", + "backgroundColor": "#f5f5f5" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/exit-detail/exit-detail.wxml b/mini_program/farm-monitor-dashboard/pages/cattle/exit-detail/exit-detail.wxml new file mode 100644 index 0000000..15c5675 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/exit-detail/exit-detail.wxml @@ -0,0 +1,134 @@ + + + + + 加载中... + + + + + + + + 记录编号 + {{record.recordId}} + + {{record.status || '已确认'}} + + + + + 基本信息 + + + 记录ID： + {{record.id}} + + + 记录编号： + {{record.recordId}} + + + 状态： + {{record.status || '已确认'}} + + + + + + + 牛只信息 + + + 牛只ID： + {{record.animalId}} + + + 耳号： + {{record.earNumber}} + + + + + + + 离栏信息 + + + 离栏日期： + {{record.exitDateText}} + + + 离栏原因： + {{record.exitReason || '-'}} + + + 去向： + {{record.destination || '-'}} + + + 处置方式： + {{record.disposalMethod || '-'}} + + + 原栏舍ID： + {{record.originalPenId}} + + + 原栏舍名称： + {{record.originalPenName}} + + + 原栏舍编码： + {{record.originalPenCode}} + + + + + + + 养殖场信息 + + + 养殖场ID： + {{record.farmId}} + + + 养殖场名称： + {{record.farmName}} + + + + + + + 操作信息 + + + 操作人： + {{record.handler || '-'}} + + + 备注： + {{record.remark || '-'}} + + + + + + + 时间信息 + + + 创建时间： + {{record.createdAtText}} + + + 更新时间： + {{record.updatedAtText}} + + + + + + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/exit-detail/exit-detail.wxss b/mini_program/farm-monitor-dashboard/pages/cattle/exit-detail/exit-detail.wxss new file mode 100644 index 0000000..e76bc73 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/exit-detail/exit-detail.wxss @@ -0,0 +1,108 @@ +/* pages/cattle/exit-detail/exit-detail.wxss */ +.page-container { + min-height: 100vh; + background-color: #f5f5f5; +} + +/* 加载状态 */ +.loading-container { + display: flex; + justify-content: center; + align-items: center; + height: 400rpx; + color: #999; + font-size: 28rpx; +} + +/* 详情内容 */ +.detail-content { + padding: 20rpx; +} + +/* 头部 */ +.detail-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 32rpx 24rpx; + background: linear-gradient(135deg, #07c160 0%, #05a651 100%); + border-radius: 12rpx; + margin-bottom: 20rpx; + box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); +} + +.header-left { + display: flex; + flex-direction: column; + gap: 8rpx; +} + +.record-label { + font-size: 24rpx; + color: rgba(255, 255, 255, 0.8); +} + +.record-id { + font-size: 36rpx; + font-weight: bold; + color: #fff; +} + +.status-badge { + padding: 8rpx 24rpx; + font-size: 26rpx; + font-weight: 500; + border-radius: 20rpx; + background-color: rgba(255, 255, 255, 0.3); + color: #fff; + border: 2rpx solid rgba(255, 255, 255, 0.5); +} + +/* 信息区块 */ +.info-section { + background-color: #fff; + border-radius: 12rpx; + margin-bottom: 20rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.section-title { + padding: 24rpx; + font-size: 30rpx; + font-weight: bold; + color: #333; + background-color: #f8f9fa; + border-bottom: 1rpx solid #e9ecef; +} + +.info-list { + padding: 12rpx 24rpx; +} + +.info-item { + display: flex; + align-items: flex-start; + padding: 16rpx 0; + border-bottom: 1rpx solid #f0f0f0; +} + +.info-item:last-child { + border-bottom: none; +} + +.info-item .label { + min-width: 220rpx; + font-size: 28rpx; + color: #666; + flex-shrink: 0; +} + +.info-item .value { + flex: 1; + font-size: 28rpx; + color: #333; + font-weight: 500; + word-break: break-all; +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/exit/exit.js b/mini_program/farm-monitor-dashboard/pages/cattle/exit/exit.js new file mode 100644 index 0000000..bef6b08 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/exit/exit.js @@ -0,0 +1,240 @@ +// pages/cattle/exit/exit.js +const API = require('../../../utils/api').API + +Page({ + data: { + list: [], + total: 0, + page: 1, + pageSize: 10, + totalPages: 0, + loading: false, + refreshing: false, + searchValue: '' + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + this.loadData() + }, + + /** + * 加载数据 + */ + async loadData(isRefresh = false) { + if (isRefresh) { + this.setData({ refreshing: true }) + } + + this.setData({ loading: true }) + + try { + const params = { + page: this.data.page, + pageSize: this.data.pageSize, + _t: Date.now() + } + + // 如果有搜索条件，添加到参数中 + if (this.data.searchValue) { + params.search = this.data.searchValue.trim() // 按耳号精确查询 + params.earNumber = this.data.searchValue.trim() // 兼容参数 + } + + console.log('请求参数:', params) + + const res = await API.getExitRecords(params) + + console.log('离栏记录数据:', res) + + // 根据实际返回的数据结构调整 + let list = res.data?.list || res.data || res.list || [] + const pagination = res.data?.pagination || {} + const total = pagination.total || res.total || list.length || 0 + + // 数据预处理：格式化时间和数据 + list = list.map(item => { + return { + ...item, + // 格式化离栏日期 + exitDateText: item.exitDate ? this.formatDateTime(item.exitDate) : '-', + // 格式化创建时间 + createdAtText: item.created_at ? this.formatDateTime(item.created_at) : '-', + // 格式化更新时间 + updatedAtText: item.updated_at ? this.formatDateTime(item.updated_at) : '-', + // 原栏舍名称 + originalPenName: item.originalPen?.name || '-', + // 养殖场名称 + farmName: item.farm?.name || '-' + } + }) + + // 如果有搜索条件，进行前端精确过滤（确保精确匹配） + if (this.data.searchValue && this.data.searchValue.trim()) { + const searchKey = this.data.searchValue.trim() + list = list.filter(item => { + const earNumber = String(item.earNumber || '') + // 精确匹配：完全相等 + return earNumber === searchKey + }) + + console.log('精确查找结果:', list.length, '条') + + if (list.length === 0) { + wx.showToast({ + title: '未找到匹配的记录', + icon: 'none', + duration: 2000 + }) + } + } + + const totalPages = pagination.pages || Math.ceil((this.data.searchValue ? list.length : total) / this.data.pageSize) + + this.setData({ + list: list, + total: total, + totalPages: totalPages, + loading: false, + refreshing: false + }) + + // 停止下拉刷新 + if (isRefresh) { + wx.stopPullDownRefresh() + } + + } catch (error) { + console.error('加载数据失败:', error) + + this.setData({ + loading: false, + refreshing: false + }) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + if (isRefresh) { + wx.stopPullDownRefresh() + } + } + }, + + /** + * 格式化日期时间 + */ + formatDateTime(dateString) { + if (!dateString) return '-' + const date = new Date(dateString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` + }, + + /** + * 搜索输入 + */ + onSearchInput(e) { + this.setData({ + searchValue: e.detail.value + }) + }, + + /** + * 执行搜索 + */ + handleSearch() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 清空搜索 + */ + clearSearch() { + this.setData({ + searchValue: '', + page: 1 + }) + this.loadData(true) + }, + + /** + * 切换页码 + */ + changePage(e) { + const page = e.currentTarget.dataset.page + if (page !== this.data.page && page >= 1 && page <= this.data.totalPages) { + this.setData({ page }) + this.loadData() + // 滚动到顶部 + wx.pageScrollTo({ + scrollTop: 0, + duration: 300 + }) + } + }, + + /** + * 上一页 + */ + prevPage() { + if (this.data.page > 1) { + this.setData({ page: this.data.page - 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 下一页 + */ + nextPage() { + if (this.data.page < this.data.totalPages) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 查看离栏记录详情 + */ + viewDetail(e) { + const id = e.currentTarget.dataset.id + console.log('查看离栏记录详情:', id) + + // 跳转到详情页 + wx.navigateTo({ + url: `/pages/cattle/exit-detail/exit-detail?id=${id}` + }) + }, + + /** + * 下拉刷新 + */ + onPullDownRefresh() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 上拉加载更多 + */ + onReachBottom() { + if (this.data.page < this.data.totalPages && !this.data.loading) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + } + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/exit/exit.json b/mini_program/farm-monitor-dashboard/pages/cattle/exit/exit.json new file mode 100644 index 0000000..685dbdc --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/exit/exit.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "离栏记录", + "enablePullDownRefresh": true, + "backgroundTextStyle": "dark", + "backgroundColor": "#f5f5f5" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/exit/exit.wxml b/mini_program/farm-monitor-dashboard/pages/cattle/exit/exit.wxml index e391239..df17000 100644 --- a/mini_program/farm-monitor-dashboard/pages/cattle/exit/exit.wxml +++ b/mini_program/farm-monitor-dashboard/pages/cattle/exit/exit.wxml @@ -1,51 +1,93 @@ - - - 牛只管理 - 离栏记录 - - - - + + + + + + + + + + + + 加载中... + + + + + + + + 耳号：{{item.earNumber}} + + + + + + + 转舍日期： + {{item.exitDateText}} + + + 转入栏舍： + {{item.destination || '-'}} + + + 转出栏舍： + {{item.originalPenName}} + + + 登记人： + {{item.handler || '-'}} + + + 登记日期： + {{item.createdAtText}} + + + 备注： + {{item.remark || '--'}} + + + + + + {{page}}/{{totalPages}} + + + + + + 📋 + 暂无离栏记录数据 - - - - - - 耳号：{{item.earNumber}} - 离栏栏舍：{{item.pen}} - - - 状态：{{item.status ? item.status : '-'}} | 记录编号：{{item.recordId ? item.recordId : '-'}} | 农场：{{item.farmName ? item.farmName : '-'}} - 离栏时间：{{item.exitTimeStr}} - - - - - - - {{item.label}} - {{item.value}} - - - - - - - - 暂无数据 - - - - - {{item}} - - + + + + + + {{index + 1}} + + + - - 总数：{{total}}；当前页：{{page}} / {{lastPage}} - 加载中... + + + 转栏登记 - \ No newline at end of file + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/exit/exit.wxss b/mini_program/farm-monitor-dashboard/pages/cattle/exit/exit.wxss index 31c13e4..74afae3 100644 --- a/mini_program/farm-monitor-dashboard/pages/cattle/exit/exit.wxss +++ b/mini_program/farm-monitor-dashboard/pages/cattle/exit/exit.wxss @@ -1,32 +1,253 @@ -page { - background: #f7f8fa; +/* pages/cattle/exit/exit.wxss */ +.page-container { + min-height: 100vh; + background-color: #f5f5f5; + padding: 20rpx; + padding-bottom: 140rpx; } -.header { padding: 12px; background: #fff; border-bottom: 1px solid #eee; } -.title { font-size: 16px; font-weight: 600; margin-bottom: 8px; } -.search-box { display: flex; gap: 8px; } -.search-input { flex: 1; border: 1px solid #ddd; padding: 6px 8px; border-radius: 4px; } -.search-btn, .clear-btn { padding: 6px 12px; border-radius: 4px; background: #1677ff; color: #fff; } -.clear-btn { background: #999; } -.list { padding: 12px; } -.card { background: #fff; border-radius: 8px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 12px; } -.card-header { display: flex; justify-content: space-between; border-bottom: 1px dashed #eee; padding-bottom: 8px; margin-bottom: 8px; } -.left .main { font-size: 16px; font-weight: bold; } -.left .sub { font-size: 14px; color: #666; margin-top: 4px; } -.right { text-align: right; } -.right .meta { font-size: 12px; color: #333; } -.right .time { font-size: 12px; color: #666; margin-top: 4px; } +/* 搜索栏 */ +.search-bar { + display: flex; + align-items: center; + background-color: #fff; + padding: 20rpx; + margin-bottom: 20rpx; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} -.details .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #f0f0f0; } -.details .row:last-child { border-bottom: none; } -.label { color: #666; } -.value { color: #111; font-weight: 500; } +.search-input { + flex: 1; + height: 60rpx; + padding: 0 20rpx; + background-color: #f5f5f5; + border-radius: 8rpx; + font-size: 28rpx; +} -.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; } -.page-item { padding: 4px 10px; border-radius: 4px; background: #fff; border: 1px solid #ddd; } -.page-item.active { background: #1677ff; color: #fff; border-color: #1677ff; } -.prev, .next { background: #fff; border: 1px solid #ddd; padding: 6px 12px; border-radius: 4px; } -.prev[disabled], .next[disabled] { opacity: 0.5; } +.search-btn { + width: 120rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #07c160; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} -.footer { padding: 12px; text-align: center; color: #666; } -.loading { margin-top: 8px; } \ No newline at end of file +.search-btn::after { + border: none; +} + +.clear-btn { + width: 100rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #fa5151; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.clear-btn::after { + border: none; +} + +/* 加载状态 */ +.loading-container { + display: flex; + justify-content: center; + align-items: center; + height: 400rpx; + color: #999; + font-size: 28rpx; +} + +/* 离栏记录列表 */ +.exit-list { + display: flex; + flex-direction: column; + gap: 20rpx; +} + +/* 离栏记录卡片 */ +.exit-card { + background-color: #fff; + border-radius: 12rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +/* 卡片头部 */ +.card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 24rpx; + background-color: #fff; + border-bottom: 1rpx solid #f0f0f0; +} + +.record-id { + font-size: 32rpx; + font-weight: bold; + color: #07c160; +} + +.edit-btn { + padding: 8rpx 24rpx; + background-color: #07c160; + color: #fff; + border: none; + border-radius: 20rpx; + font-size: 24rpx; +} + +.edit-btn::after { + border: none; +} + +/* 卡片主体 */ +.card-body { + padding: 24rpx; +} + +.info-row { + display: flex; + align-items: flex-start; + padding: 12rpx 0; + font-size: 28rpx; +} + +.info-row .label { + color: #666; + min-width: 180rpx; + flex-shrink: 0; +} + +.info-row .value { + color: #333; + flex: 1; + word-break: break-all; +} + +/* 卡片底部 */ +.card-footer { + padding: 16rpx 24rpx; + background-color: #f8f9fa; + text-align: center; + border-top: 1rpx solid #f0f0f0; +} + +.page-indicator { + font-size: 24rpx; + color: #999; +} + +/* 空状态 */ +.empty-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 100rpx 0; +} + +.empty-icon { + font-size: 120rpx; + margin-bottom: 30rpx; + opacity: 0.3; +} + +.empty-text { + font-size: 28rpx; + color: #999; +} + +/* 分页 */ +.pagination { + display: flex; + align-items: center; + justify-content: center; + margin: 30rpx 0; + padding: 20rpx; + background-color: #fff; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.page-btn { + width: 150rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin: 0 10rpx; + background-color: #07c160; + color: #fff; + font-size: 26rpx; + border-radius: 8rpx; + border: none; +} + +.page-btn::after { + border: none; +} + +.page-btn[disabled] { + background-color: #e0e0e0; + color: #999; +} + +.page-numbers { + display: flex; + flex-wrap: wrap; + gap: 10rpx; + margin: 0 20rpx; + max-width: 400rpx; + justify-content: center; +} + +.page-number { + width: 60rpx; + height: 60rpx; + line-height: 60rpx; + text-align: center; + font-size: 26rpx; + color: #333; + background-color: #f5f5f5; + border-radius: 8rpx; + transition: all 0.3s; +} + +.page-number.active { + background-color: #07c160; + color: #fff; + font-weight: bold; + transform: scale(1.1); + box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); +} + +/* 转栏登记按钮 */ +.add-btn { + position: fixed; + bottom: 30rpx; + left: 50%; + transform: translateX(-50%); + width: 90%; + height: 80rpx; + line-height: 80rpx; + text-align: center; + background-color: #07c160; + color: #fff; + font-size: 32rpx; + font-weight: bold; + border-radius: 12rpx; + box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); +} diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/pen-detail/pen-detail.js b/mini_program/farm-monitor-dashboard/pages/cattle/pen-detail/pen-detail.js new file mode 100644 index 0000000..e1cb366 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/pen-detail/pen-detail.js @@ -0,0 +1,119 @@ +// pages/cattle/pen-detail/pen-detail.js +const API = require('../../../utils/api').API + +Page({ + data: { + id: null, + pen: null, + loading: true + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + if (options.id) { + this.setData({ id: options.id }) + this.loadData() + } else { + wx.showToast({ + title: '参数错误', + icon: 'none' + }) + setTimeout(() => { + wx.navigateBack() + }, 1500) + } + }, + + /** + * 加载数据 + */ + async loadData() { + this.setData({ loading: true }) + + try { + // 方式1：如果有详情接口 + // const res = await API.getPenDetail(this.data.id) + // const pen = res.data || res + + // 方式2：从列表中获取（临时方案） + const res = await API.getPenList({ + page: 1, + pageSize: 1000 // 获取足够多的数据 + }) + + const list = res.data?.list || res.data || res.list || [] + const pen = list.find(item => item.id === parseInt(this.data.id)) + + if (!pen) { + wx.showToast({ + title: '未找到该栏舍', + icon: 'none' + }) + setTimeout(() => { + wx.navigateBack() + }, 1500) + return + } + + // 格式化数据 + const formattedPen = { + ...pen, + // 格式化创建时间 + createdAtText: pen.created_at ? this.formatDateTime(pen.created_at) : '-', + // 格式化更新时间 + updatedAtText: pen.updated_at ? this.formatDateTime(pen.updated_at) : '-', + // 养殖场信息 + farmName: pen.farm?.name || '-', + // 状态文本 + statusText: pen.status === '启用' || pen.status === 1 ? '启用' : '未启用' + } + + this.setData({ + pen: formattedPen, + loading: false + }) + + } catch (error) { + console.error('加载数据失败:', error) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + this.setData({ loading: false }) + + setTimeout(() => { + wx.navigateBack() + }, 1500) + } + }, + + /** + * 格式化日期时间 + */ + formatDateTime(dateString) { + if (!dateString) return '-' + const date = new Date(dateString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + this.loadData() + setTimeout(() => { + wx.stopPullDownRefresh() + }, 1000) + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/pen-detail/pen-detail.json b/mini_program/farm-monitor-dashboard/pages/cattle/pen-detail/pen-detail.json new file mode 100644 index 0000000..49b3d55 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/pen-detail/pen-detail.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "栏舍详情", + "enablePullDownRefresh": true, + "backgroundTextStyle": "dark", + "backgroundColor": "#f5f5f5" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/pen-detail/pen-detail.wxml b/mini_program/farm-monitor-dashboard/pages/cattle/pen-detail/pen-detail.wxml new file mode 100644 index 0000000..2175bcd --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/pen-detail/pen-detail.wxml @@ -0,0 +1,115 @@ + + + + + 加载中... + + + + + + + + 栏舍名称 + {{pen.name}} + + {{pen.statusText}} + + + + + 基本信息 + + + 栏舍ID： + {{pen.id}} + + + 栏舍名称： + {{pen.name}} + + + 栏舍编码： + {{pen.code}} + + + 栏舍类型： + {{pen.type || '-'}} + + + 状态： + {{pen.statusText}} + + + + + + + 容量信息 + + + 最大容量： + {{pen.capacity || 0}} + + + 当前数量： + {{pen.currentCount || 0}} + + + 剩余容量： + {{(pen.capacity || 0) - (pen.currentCount || 0)}} + + + 面积： + {{pen.area || 0}}平方米 + + + + + + + 养殖场信息 + + + 养殖场ID： + {{pen.farmId || pen.farm_id}} + + + 养殖场名称： + {{pen.farmName}} + + + + + + + 位置与备注 + + + 位置： + {{pen.location || '-'}} + + + 备注： + {{pen.remark || '-'}} + + + + + + + 时间信息 + + + 创建时间： + {{pen.createdAtText}} + + + 更新时间： + {{pen.updatedAtText}} + + + + + + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/pen-detail/pen-detail.wxss b/mini_program/farm-monitor-dashboard/pages/cattle/pen-detail/pen-detail.wxss new file mode 100644 index 0000000..dcf92c3 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/pen-detail/pen-detail.wxss @@ -0,0 +1,108 @@ +/* pages/cattle/pen-detail/pen-detail.wxss */ +.page-container { + min-height: 100vh; + background-color: #f5f5f5; +} + +/* 加载状态 */ +.loading-container { + display: flex; + justify-content: center; + align-items: center; + height: 400rpx; + color: #999; + font-size: 28rpx; +} + +/* 详情内容 */ +.detail-content { + padding: 20rpx; +} + +/* 头部 */ +.detail-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 32rpx 24rpx; + background: linear-gradient(135deg, #07c160 0%, #05a651 100%); + border-radius: 12rpx; + margin-bottom: 20rpx; + box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); +} + +.header-left { + display: flex; + flex-direction: column; + gap: 8rpx; +} + +.pen-label { + font-size: 24rpx; + color: rgba(255, 255, 255, 0.8); +} + +.pen-name { + font-size: 36rpx; + font-weight: bold; + color: #fff; +} + +.status-badge { + padding: 8rpx 24rpx; + font-size: 26rpx; + font-weight: 500; + border-radius: 20rpx; + background-color: rgba(255, 255, 255, 0.3); + color: #fff; + border: 2rpx solid rgba(255, 255, 255, 0.5); +} + +/* 信息区块 */ +.info-section { + background-color: #fff; + border-radius: 12rpx; + margin-bottom: 20rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.section-title { + padding: 24rpx; + font-size: 30rpx; + font-weight: bold; + color: #333; + background-color: #f8f9fa; + border-bottom: 1rpx solid #e9ecef; +} + +.info-list { + padding: 12rpx 24rpx; +} + +.info-item { + display: flex; + align-items: flex-start; + padding: 16rpx 0; + border-bottom: 1rpx solid #f0f0f0; +} + +.info-item:last-child { + border-bottom: none; +} + +.info-item .label { + min-width: 200rpx; + font-size: 28rpx; + color: #666; + flex-shrink: 0; +} + +.info-item .value { + flex: 1; + font-size: 28rpx; + color: #333; + font-weight: 500; + word-break: break-all; +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/pen/pen.js b/mini_program/farm-monitor-dashboard/pages/cattle/pen/pen.js new file mode 100644 index 0000000..52f2fae --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/pen/pen.js @@ -0,0 +1,239 @@ +// pages/cattle/pen/pen.js +const API = require('../../../utils/api').API + +Page({ + data: { + list: [], + total: 0, + page: 1, + pageSize: 10, + totalPages: 0, + loading: false, + refreshing: false, + searchValue: '' + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + this.loadData() + }, + + /** + * 加载数据 + */ + async loadData(isRefresh = false) { + if (isRefresh) { + this.setData({ refreshing: true }) + } + + this.setData({ loading: true }) + + try { + const params = { + page: this.data.page, + pageSize: this.data.pageSize, + _t: Date.now() + } + + // 如果有搜索条件，添加到参数中 + if (this.data.searchValue) { + params.name = this.data.searchValue.trim() // 按栏舍名称精确查询 + params.search = this.data.searchValue.trim() // 兼容参数 + } + + console.log('请求参数:', params) + + const res = await API.getPenList(params) + + console.log('栏舍设置数据:', res) + + // 根据实际返回的数据结构调整 + let list = res.data?.list || res.data || res.list || [] + const pagination = res.data?.pagination || {} + const total = pagination.total || res.total || list.length || 0 + + // 数据预处理：格式化时间和数据 + list = list.map(item => { + return { + ...item, + // 格式化创建时间 + createdAtText: item.created_at ? this.formatDateTime(item.created_at) : '-', + // 格式化更新时间 + updatedAtText: item.updated_at ? this.formatDateTime(item.updated_at) : '-', + // 养殖场名称 + farmName: item.farm?.name || '-', + // 状态文本 + statusText: item.status === '启用' || item.status === 1 ? '启用' : '未启用', + statusValue: item.status === '启用' || item.status === 1 + } + }) + + // 如果有搜索条件，进行前端精确过滤（确保精确匹配） + if (this.data.searchValue && this.data.searchValue.trim()) { + const searchKey = this.data.searchValue.trim() + list = list.filter(item => { + const name = String(item.name || '') + // 精确匹配：完全相等 + return name === searchKey + }) + + console.log('精确查找结果:', list.length, '条') + + if (list.length === 0) { + wx.showToast({ + title: '未找到匹配的栏舍', + icon: 'none', + duration: 2000 + }) + } + } + + const totalPages = pagination.pages || Math.ceil((this.data.searchValue ? list.length : total) / this.data.pageSize) + + this.setData({ + list: list, + total: total, + totalPages: totalPages, + loading: false, + refreshing: false + }) + + // 停止下拉刷新 + if (isRefresh) { + wx.stopPullDownRefresh() + } + + } catch (error) { + console.error('加载数据失败:', error) + + this.setData({ + loading: false, + refreshing: false + }) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + if (isRefresh) { + wx.stopPullDownRefresh() + } + } + }, + + /** + * 格式化日期时间 + */ + formatDateTime(dateString) { + if (!dateString) return '-' + const date = new Date(dateString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` + }, + + /** + * 搜索输入 + */ + onSearchInput(e) { + this.setData({ + searchValue: e.detail.value + }) + }, + + /** + * 执行搜索 + */ + handleSearch() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 清空搜索 + */ + clearSearch() { + this.setData({ + searchValue: '', + page: 1 + }) + this.loadData(true) + }, + + /** + * 切换页码 + */ + changePage(e) { + const page = e.currentTarget.dataset.page + if (page !== this.data.page && page >= 1 && page <= this.data.totalPages) { + this.setData({ page }) + this.loadData() + // 滚动到顶部 + wx.pageScrollTo({ + scrollTop: 0, + duration: 300 + }) + } + }, + + /** + * 上一页 + */ + prevPage() { + if (this.data.page > 1) { + this.setData({ page: this.data.page - 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 下一页 + */ + nextPage() { + if (this.data.page < this.data.totalPages) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 查看栏舍详情 + */ + viewDetail(e) { + const id = e.currentTarget.dataset.id + console.log('查看栏舍详情:', id) + + // 跳转到详情页 + wx.navigateTo({ + url: `/pages/cattle/pen-detail/pen-detail?id=${id}` + }) + }, + + /** + * 下拉刷新 + */ + onPullDownRefresh() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 上拉加载更多 + */ + onReachBottom() { + if (this.data.page < this.data.totalPages && !this.data.loading) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + } + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/pen/pen.json b/mini_program/farm-monitor-dashboard/pages/cattle/pen/pen.json new file mode 100644 index 0000000..7fb090c --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/pen/pen.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "栏舍设置", + "enablePullDownRefresh": true, + "backgroundTextStyle": "dark", + "backgroundColor": "#f5f5f5" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/pen/pen.wxml b/mini_program/farm-monitor-dashboard/pages/cattle/pen/pen.wxml new file mode 100644 index 0000000..0deaced --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/pen/pen.wxml @@ -0,0 +1,98 @@ + + + + + + + + + + + + 加载中... + + + + + + + + 栏舍名：{{item.name}} + + + + + + + 动物类型： + 牛 + + + 栏舍类型： + {{item.type || '--'}} + + + 负责人： + admin + + + 容量： + {{item.capacity || 0}} + + + 状态： + + + + 创建人： + admin + + + 创建时间： + {{item.createdAtText}} + + + + + + {{page}}/{{totalPages}} + + + + + + 🏠 + 暂无栏舍设置数据 + + + + + + + + + {{index + 1}} + + + + + + + + 新增栏舍 + + + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/pen/pen.wxss b/mini_program/farm-monitor-dashboard/pages/cattle/pen/pen.wxss new file mode 100644 index 0000000..df19181 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/pen/pen.wxss @@ -0,0 +1,258 @@ +/* pages/cattle/pen/pen.wxss */ +.page-container { + min-height: 100vh; + background-color: #f5f5f5; + padding: 20rpx; + padding-bottom: 140rpx; +} + +/* 搜索栏 */ +.search-bar { + display: flex; + align-items: center; + background-color: #fff; + padding: 20rpx; + margin-bottom: 20rpx; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.search-input { + flex: 1; + height: 60rpx; + padding: 0 20rpx; + background-color: #f5f5f5; + border-radius: 8rpx; + font-size: 28rpx; +} + +.search-btn { + width: 120rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #07c160; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.search-btn::after { + border: none; +} + +.clear-btn { + width: 100rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #fa5151; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.clear-btn::after { + border: none; +} + +/* 加载状态 */ +.loading-container { + display: flex; + justify-content: center; + align-items: center; + height: 400rpx; + color: #999; + font-size: 28rpx; +} + +/* 栏舍列表 */ +.pen-list { + display: flex; + flex-direction: column; + gap: 20rpx; +} + +/* 栏舍卡片 */ +.pen-card { + background-color: #fff; + border-radius: 12rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +/* 卡片头部 */ +.card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 24rpx; + background-color: #fff; + border-bottom: 1rpx solid #f0f0f0; +} + +.pen-name { + font-size: 32rpx; + font-weight: bold; + color: #07c160; +} + +.edit-btn { + padding: 8rpx 24rpx; + background-color: #07c160; + color: #fff; + border: none; + border-radius: 20rpx; + font-size: 24rpx; +} + +.edit-btn::after { + border: none; +} + +/* 卡片主体 */ +.card-body { + padding: 24rpx; +} + +.info-row { + display: flex; + align-items: center; + padding: 12rpx 0; + font-size: 28rpx; +} + +.info-row .label { + color: #666; + min-width: 180rpx; + flex-shrink: 0; +} + +.info-row .value { + color: #333; + flex: 1; + word-break: break-all; +} + +.status-switch { + transform: scale(0.9); +} + +/* 卡片底部 */ +.card-footer { + padding: 16rpx 24rpx; + background-color: #f8f9fa; + text-align: center; + border-top: 1rpx solid #f0f0f0; +} + +.page-indicator { + font-size: 24rpx; + color: #999; +} + +/* 空状态 */ +.empty-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 100rpx 0; +} + +.empty-icon { + font-size: 120rpx; + margin-bottom: 30rpx; + opacity: 0.3; +} + +.empty-text { + font-size: 28rpx; + color: #999; +} + +/* 分页 */ +.pagination { + display: flex; + align-items: center; + justify-content: center; + margin: 30rpx 0; + padding: 20rpx; + background-color: #fff; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.page-btn { + width: 150rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin: 0 10rpx; + background-color: #07c160; + color: #fff; + font-size: 26rpx; + border-radius: 8rpx; + border: none; +} + +.page-btn::after { + border: none; +} + +.page-btn[disabled] { + background-color: #e0e0e0; + color: #999; +} + +.page-numbers { + display: flex; + flex-wrap: wrap; + gap: 10rpx; + margin: 0 20rpx; + max-width: 400rpx; + justify-content: center; +} + +.page-number { + width: 60rpx; + height: 60rpx; + line-height: 60rpx; + text-align: center; + font-size: 26rpx; + color: #333; + background-color: #f5f5f5; + border-radius: 8rpx; + transition: all 0.3s; +} + +.page-number.active { + background-color: #07c160; + color: #fff; + font-weight: bold; + transform: scale(1.1); + box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); +} + +/* 新增栏舍按钮 */ +.add-btn { + position: fixed; + bottom: 30rpx; + left: 50%; + transform: translateX(-50%); + width: 90%; + height: 80rpx; + line-height: 80rpx; + text-align: center; + background-color: #07c160; + color: #fff; + font-size: 32rpx; + font-weight: bold; + border-radius: 12rpx; + box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/pens/pens.wxml b/mini_program/farm-monitor-dashboard/pages/cattle/pens/pens.wxml index 7a4516b..215cb52 100644 --- a/mini_program/farm-monitor-dashboard/pages/cattle/pens/pens.wxml +++ b/mini_program/farm-monitor-dashboard/pages/cattle/pens/pens.wxml @@ -1,51 +1,51 @@ - - - - 牛只管理 · 栏舍设置 - - - - - - - - - - - - - 栏舍：{{item.name || '-'}} - 编码：{{item.code || '-'}} - - - 养殖场：{{item.farmName || '-'}} - 状态：{{item.status || '-'}} - 容量：{{item.capacity || '-'}} - - - 创建时间：{{item.createdAtStr || '-'}} - - - - - - - {{item.label}}： - {{item.value}} - - - - - - 暂无数据 - - - - - - - - - - + + + + 牛只管理 · 栏舍设置 + + + + + + + + + + + + + 栏舍：{{item.name || '-'}} + 编码：{{item.code || '-'}} + + + 养殖场：{{item.farmName || '-'}} + 状态：{{item.status || '-'}} + 容量：{{item.capacity || '-'}} + + + 创建时间：{{item.createdAtStr || '-'}} + + + + + + + {{item.label}}： + {{item.value}} + + + + + + 暂无数据 + + + + + + + + + + \ No newline at end of file diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/pens/pens.wxss b/mini_program/farm-monitor-dashboard/pages/cattle/pens/pens.wxss index f41a1be..e83e557 100644 --- a/mini_program/farm-monitor-dashboard/pages/cattle/pens/pens.wxss +++ b/mini_program/farm-monitor-dashboard/pages/cattle/pens/pens.wxss @@ -1,27 +1,27 @@ -/* 栏舍设置页面样式 */ -.page { padding: 12px; background: #f7f8fa; min-height: 100vh; } -.header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } -.title { font-size: 16px; font-weight: 600; color: #333; } -.search-bar { display: flex; gap: 8px; } -.search-input { flex: 1; border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px; background: #fff; } -.search-btn { padding: 8px 12px; background: #3cc51f; color: #fff; border-radius: 6px; } - -.list { display: flex; flex-direction: column; gap: 12px; } -.card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px; } -.card-header { display: flex; flex-direction: column; gap: 6px; border-bottom: 1px dashed #eee; padding-bottom: 8px; } -.main { display: flex; gap: 10px; align-items: baseline; } -.name { font-size: 16px; font-weight: 600; color: #222; } -.code { font-size: 14px; color: #666; } -.meta { display: flex; flex-wrap: wrap; gap: 10px; color: #666; font-size: 13px; } -.time { color: #999; font-size: 12px; } - -.card-body { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } -.row { display: flex; gap: 8px; } -.label { color: #666; min-width: 84px; text-align: right; } -.value { color: #333; flex: 1; } - -.pagination { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 14px; } -.pager-btn { background: #f0f0f0; color: #333; border-radius: 6px; padding: 6px 10px; } -.page-item { background: #fff; color: #333; border: 1px solid #ddd; border-radius: 6px; padding: 6px 10px; } -.page-item.active { background: #3cc51f; border-color: #3cc51f; color: #fff; } +/* 栏舍设置页面样式 */ +.page { padding: 12px; background: #f7f8fa; min-height: 100vh; } +.header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } +.title { font-size: 16px; font-weight: 600; color: #333; } +.search-bar { display: flex; gap: 8px; } +.search-input { flex: 1; border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px; background: #fff; } +.search-btn { padding: 8px 12px; background: #3cc51f; color: #fff; border-radius: 6px; } + +.list { display: flex; flex-direction: column; gap: 12px; } +.card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 12px; } +.card-header { display: flex; flex-direction: column; gap: 6px; border-bottom: 1px dashed #eee; padding-bottom: 8px; } +.main { display: flex; gap: 10px; align-items: baseline; } +.name { font-size: 16px; font-weight: 600; color: #222; } +.code { font-size: 14px; color: #666; } +.meta { display: flex; flex-wrap: wrap; gap: 10px; color: #666; font-size: 13px; } +.time { color: #999; font-size: 12px; } + +.card-body { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } +.row { display: flex; gap: 8px; } +.label { color: #666; min-width: 84px; text-align: right; } +.value { color: #333; flex: 1; } + +.pagination { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 14px; } +.pager-btn { background: #f0f0f0; color: #333; border-radius: 6px; padding: 6px 10px; } +.page-item { background: #fff; color: #333; border: 1px solid #ddd; border-radius: 6px; padding: 6px 10px; } +.page-item.active { background: #3cc51f; border-color: #3cc51f; color: #fff; } .empty { text-align: center; color: #999; padding: 20px 0; } \ No newline at end of file diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/transfer-detail/transfer-detail.js b/mini_program/farm-monitor-dashboard/pages/cattle/transfer-detail/transfer-detail.js new file mode 100644 index 0000000..5588b1e --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/transfer-detail/transfer-detail.js @@ -0,0 +1,125 @@ +// pages/cattle/transfer-detail/transfer-detail.js +const API = require('../../../utils/api').API + +Page({ + data: { + id: null, + record: null, + loading: true + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + if (options.id) { + this.setData({ id: options.id }) + this.loadData() + } else { + wx.showToast({ + title: '参数错误', + icon: 'none' + }) + setTimeout(() => { + wx.navigateBack() + }, 1500) + } + }, + + /** + * 加载数据 + */ + async loadData() { + this.setData({ loading: true }) + + try { + // 方式1：如果有详情接口 + // const res = await API.getTransferRecordDetail(this.data.id) + // const record = res.data || res + + // 方式2：从列表中获取（临时方案） + const res = await API.getTransferRecords({ + page: 1, + pageSize: 1000 // 获取足够多的数据 + }) + + const list = res.data?.list || res.data || res.list || [] + const record = list.find(item => item.id === parseInt(this.data.id)) + + if (!record) { + wx.showToast({ + title: '未找到该转栏记录', + icon: 'none' + }) + setTimeout(() => { + wx.navigateBack() + }, 1500) + return + } + + // 格式化数据 + const formattedRecord = { + ...record, + // 格式化转栏日期 + transferDateText: record.transferDate ? this.formatDateTime(record.transferDate) : '-', + // 格式化创建时间 + createdAtText: record.created_at ? this.formatDateTime(record.created_at) : '-', + // 格式化更新时间 + updatedAtText: record.updated_at ? this.formatDateTime(record.updated_at) : '-', + // 转出栏舍信息 + fromPenName: record.fromPen?.name || '-', + fromPenCode: record.fromPen?.code || '-', + // 转入栏舍信息 + toPenName: record.toPen?.name || '-', + toPenCode: record.toPen?.code || '-', + // 养殖场信息 + farmName: record.farm?.name || '-' + } + + this.setData({ + record: formattedRecord, + loading: false + }) + + } catch (error) { + console.error('加载数据失败:', error) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + this.setData({ loading: false }) + + setTimeout(() => { + wx.navigateBack() + }, 1500) + } + }, + + /** + * 格式化日期时间 + */ + formatDateTime(dateString) { + if (!dateString) return '-' + const date = new Date(dateString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { + this.loadData() + setTimeout(() => { + wx.stopPullDownRefresh() + }, 1000) + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/transfer-detail/transfer-detail.json b/mini_program/farm-monitor-dashboard/pages/cattle/transfer-detail/transfer-detail.json new file mode 100644 index 0000000..30eb19e --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/transfer-detail/transfer-detail.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "转栏记录详情", + "enablePullDownRefresh": true, + "backgroundTextStyle": "dark", + "backgroundColor": "#f5f5f5" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/transfer-detail/transfer-detail.wxml b/mini_program/farm-monitor-dashboard/pages/cattle/transfer-detail/transfer-detail.wxml new file mode 100644 index 0000000..f4fe399 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/transfer-detail/transfer-detail.wxml @@ -0,0 +1,138 @@ + + + + + 加载中... + + + + + + + + 记录编号 + {{record.recordId}} + + {{record.status || '已完成'}} + + + + + 基本信息 + + + 记录ID： + {{record.id}} + + + 记录编号： + {{record.recordId}} + + + 状态： + {{record.status || '已完成'}} + + + + + + + 牛只信息 + + + 牛只ID： + {{record.animalId}} + + + 耳号： + {{record.earNumber}} + + + + + + + 转栏信息 + + + 转栏日期： + {{record.transferDateText}} + + + 转出栏舍ID： + {{record.fromPenId}} + + + 转出栏舍名称： + {{record.fromPenName}} + + + 转出栏舍编码： + {{record.fromPenCode}} + + + 转入栏舍ID： + {{record.toPenId}} + + + 转入栏舍名称： + {{record.toPenName}} + + + 转入栏舍编码： + {{record.toPenCode}} + + + + + + + 养殖场信息 + + + 养殖场ID： + {{record.farmId}} + + + 养殖场名称： + {{record.farmName}} + + + + + + + 操作信息 + + + 操作人： + {{record.operator || '-'}} + + + 转栏原因： + {{record.reason || '-'}} + + + 备注： + {{record.remark || '-'}} + + + + + + + 时间信息 + + + 创建时间： + {{record.createdAtText}} + + + 更新时间： + {{record.updatedAtText}} + + + + + + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/transfer-detail/transfer-detail.wxss b/mini_program/farm-monitor-dashboard/pages/cattle/transfer-detail/transfer-detail.wxss new file mode 100644 index 0000000..66135e7 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/transfer-detail/transfer-detail.wxss @@ -0,0 +1,108 @@ +/* pages/cattle/transfer-detail/transfer-detail.wxss */ +.page-container { + min-height: 100vh; + background-color: #f5f5f5; +} + +/* 加载状态 */ +.loading-container { + display: flex; + justify-content: center; + align-items: center; + height: 400rpx; + color: #999; + font-size: 28rpx; +} + +/* 详情内容 */ +.detail-content { + padding: 20rpx; +} + +/* 头部 */ +.detail-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 32rpx 24rpx; + background: linear-gradient(135deg, #07c160 0%, #05a651 100%); + border-radius: 12rpx; + margin-bottom: 20rpx; + box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); +} + +.header-left { + display: flex; + flex-direction: column; + gap: 8rpx; +} + +.record-label { + font-size: 24rpx; + color: rgba(255, 255, 255, 0.8); +} + +.record-id { + font-size: 36rpx; + font-weight: bold; + color: #fff; +} + +.status-badge { + padding: 8rpx 24rpx; + font-size: 26rpx; + font-weight: 500; + border-radius: 20rpx; + background-color: rgba(255, 255, 255, 0.3); + color: #fff; + border: 2rpx solid rgba(255, 255, 255, 0.5); +} + +/* 信息区块 */ +.info-section { + background-color: #fff; + border-radius: 12rpx; + margin-bottom: 20rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.section-title { + padding: 24rpx; + font-size: 30rpx; + font-weight: bold; + color: #333; + background-color: #f8f9fa; + border-bottom: 1rpx solid #e9ecef; +} + +.info-list { + padding: 12rpx 24rpx; +} + +.info-item { + display: flex; + align-items: flex-start; + padding: 16rpx 0; + border-bottom: 1rpx solid #f0f0f0; +} + +.info-item:last-child { + border-bottom: none; +} + +.info-item .label { + min-width: 240rpx; + font-size: 28rpx; + color: #666; + flex-shrink: 0; +} + +.info-item .value { + flex: 1; + font-size: 28rpx; + color: #333; + font-weight: 500; + word-break: break-all; +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/transfer/transfer.js b/mini_program/farm-monitor-dashboard/pages/cattle/transfer/transfer.js new file mode 100644 index 0000000..883d018 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/transfer/transfer.js @@ -0,0 +1,242 @@ +// pages/cattle/transfer/transfer.js +const API = require('../../../utils/api').API + +Page({ + data: { + list: [], + total: 0, + page: 1, + pageSize: 10, + totalPages: 0, + loading: false, + refreshing: false, + searchValue: '' + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + this.loadData() + }, + + /** + * 加载数据 + */ + async loadData(isRefresh = false) { + if (isRefresh) { + this.setData({ refreshing: true }) + } + + this.setData({ loading: true }) + + try { + const params = { + page: this.data.page, + pageSize: this.data.pageSize, + _t: Date.now() + } + + // 如果有搜索条件，添加到参数中 + if (this.data.searchValue) { + params.search = this.data.searchValue.trim() // 按耳号精确查询 + params.earNumber = this.data.searchValue.trim() // 兼容参数 + } + + console.log('请求参数:', params) + + const res = await API.getTransferRecords(params) + + console.log('转栏记录数据:', res) + + // 根据实际返回的数据结构调整 + let list = res.data?.list || res.data || res.list || [] + const pagination = res.data?.pagination || {} + const total = pagination.total || res.total || list.length || 0 + + // 数据预处理：格式化时间和数据 + list = list.map(item => { + return { + ...item, + // 格式化转栏日期 + transferDateText: item.transferDate ? this.formatDateTime(item.transferDate) : '-', + // 格式化创建时间 + createdAtText: item.created_at ? this.formatDateTime(item.created_at) : '-', + // 格式化更新时间 + updatedAtText: item.updated_at ? this.formatDateTime(item.updated_at) : '-', + // 转出栏舍名称 + fromPenName: item.fromPen?.name || '-', + // 转入栏舍名称 + toPenName: item.toPen?.name || '-', + // 养殖场名称 + farmName: item.farm?.name || '-' + } + }) + + // 如果有搜索条件，进行前端精确过滤（确保精确匹配） + if (this.data.searchValue && this.data.searchValue.trim()) { + const searchKey = this.data.searchValue.trim() + list = list.filter(item => { + const earNumber = String(item.earNumber || '') + // 精确匹配：完全相等 + return earNumber === searchKey + }) + + console.log('精确查找结果:', list.length, '条') + + if (list.length === 0) { + wx.showToast({ + title: '未找到匹配的记录', + icon: 'none', + duration: 2000 + }) + } + } + + const totalPages = pagination.pages || Math.ceil((this.data.searchValue ? list.length : total) / this.data.pageSize) + + this.setData({ + list: list, + total: total, + totalPages: totalPages, + loading: false, + refreshing: false + }) + + // 停止下拉刷新 + if (isRefresh) { + wx.stopPullDownRefresh() + } + + } catch (error) { + console.error('加载数据失败:', error) + + this.setData({ + loading: false, + refreshing: false + }) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + if (isRefresh) { + wx.stopPullDownRefresh() + } + } + }, + + /** + * 格式化日期时间 + */ + formatDateTime(dateString) { + if (!dateString) return '-' + const date = new Date(dateString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hours = String(date.getHours()).padStart(2, '0') + const minutes = String(date.getMinutes()).padStart(2, '0') + const seconds = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` + }, + + /** + * 搜索输入 + */ + onSearchInput(e) { + this.setData({ + searchValue: e.detail.value + }) + }, + + /** + * 执行搜索 + */ + handleSearch() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 清空搜索 + */ + clearSearch() { + this.setData({ + searchValue: '', + page: 1 + }) + this.loadData(true) + }, + + /** + * 切换页码 + */ + changePage(e) { + const page = e.currentTarget.dataset.page + if (page !== this.data.page && page >= 1 && page <= this.data.totalPages) { + this.setData({ page }) + this.loadData() + // 滚动到顶部 + wx.pageScrollTo({ + scrollTop: 0, + duration: 300 + }) + } + }, + + /** + * 上一页 + */ + prevPage() { + if (this.data.page > 1) { + this.setData({ page: this.data.page - 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 下一页 + */ + nextPage() { + if (this.data.page < this.data.totalPages) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 查看转栏记录详情 + */ + viewDetail(e) { + const id = e.currentTarget.dataset.id + console.log('查看转栏记录详情:', id) + + // 跳转到详情页 + wx.navigateTo({ + url: `/pages/cattle/transfer-detail/transfer-detail?id=${id}` + }) + }, + + /** + * 下拉刷新 + */ + onPullDownRefresh() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 上拉加载更多 + */ + onReachBottom() { + if (this.data.page < this.data.totalPages && !this.data.loading) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + } + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/transfer/transfer.json b/mini_program/farm-monitor-dashboard/pages/cattle/transfer/transfer.json new file mode 100644 index 0000000..c76581d --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/transfer/transfer.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "转栏记录", + "enablePullDownRefresh": true, + "backgroundTextStyle": "dark", + "backgroundColor": "#f5f5f5" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/transfer/transfer.wxml b/mini_program/farm-monitor-dashboard/pages/cattle/transfer/transfer.wxml index 6f945e9..74f8204 100644 --- a/mini_program/farm-monitor-dashboard/pages/cattle/transfer/transfer.wxml +++ b/mini_program/farm-monitor-dashboard/pages/cattle/transfer/transfer.wxml @@ -1,82 +1,93 @@ - - - + + + - - - 🔍 - - 清空 - - - - - - - - - 🏠 - - - - - 耳号：{{item.earNumber}} - - - - - - {{item.label}}： - {{item.value}} - - - - - - - - 状态：{{item.status || '-'}} - 编号：{{item.recordId || '-'}} - 农场：{{item.farmName || '-'}} - - - - - - - 加载中... - 上拉或点击页码加载更多 - - - 没有更多数据了 - - - - - - 📄 - 暂无转栏记录 - - - - - - 上一页 - 首页 - {{item}} - 末页 - 下一页 + + + - - - 加载中... + + 加载中... - \ No newline at end of file + + + + + + + 耳号：{{item.earNumber}} + + + + + + + 转栏日期： + {{item.transferDateText}} + + + 转入栏舍： + {{item.toPenName}} + + + 转出栏舍： + {{item.fromPenName}} + + + 登记人： + {{item.operator || '-'}} + + + 登记日期： + {{item.createdAtText}} + + + 备注： + {{item.remark || '--'}} + + + + + + {{page}}/{{totalPages}} + + + + + + 📋 + 暂无转栏记录数据 + + + + + + + + + {{index + 1}} + + + + + + + + 转栏登记 + + diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/transfer/transfer.wxss b/mini_program/farm-monitor-dashboard/pages/cattle/transfer/transfer.wxss index c56e4fc..4817f9a 100644 --- a/mini_program/farm-monitor-dashboard/pages/cattle/transfer/transfer.wxss +++ b/mini_program/farm-monitor-dashboard/pages/cattle/transfer/transfer.wxss @@ -1,211 +1,253 @@ /* pages/cattle/transfer/transfer.wxss */ -.transfer-container { - background-color: #f6f6f6; +.page-container { min-height: 100vh; - padding-bottom: 120rpx; + background-color: #f5f5f5; + padding: 20rpx; + padding-bottom: 140rpx; } +/* 搜索栏 */ .search-bar { display: flex; align-items: center; - padding: 16rpx; - background-color: #ffffff; - border-bottom: 1rpx solid #f0f0f0; -} - -.search-input-wrapper { - flex: 1; - position: relative; - margin-right: 16rpx; + background-color: #fff; + padding: 20rpx; + margin-bottom: 20rpx; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); } .search-input { - width: 100%; - height: 72rpx; + flex: 1; + height: 60rpx; + padding: 0 20rpx; background-color: #f5f5f5; - border-radius: 36rpx; - padding: 0 60rpx 0 24rpx; + border-radius: 8rpx; font-size: 28rpx; - color: #303133; } -.search-icon { - position: absolute; - right: 24rpx; - top: 50%; - transform: translateY(-50%); - font-size: 32rpx; - color: #909399; +.search-btn { + width: 120rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #07c160; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.search-btn::after { + border: none; } .clear-btn { + width: 100rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #fa5151; + color: #fff; font-size: 28rpx; - color: #3cc51f; - padding: 8rpx 16rpx; + border-radius: 8rpx; + border: none; } -.record-list { - padding: 16rpx; +.clear-btn::after { + border: none; } -.record-item { +/* 加载状态 */ +.loading-container { display: flex; - align-items: center; - background-color: #ffffff; - border-radius: 12rpx; - padding: 24rpx; - margin-bottom: 16rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); - transition: all 0.3s; -} - -.record-item:active { - transform: scale(0.98); - box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1); -} - -.record-avatar { - width: 80rpx; - height: 80rpx; - background-color: #f0f9ff; - border-radius: 50%; - display: flex; - align-items: center; justify-content: center; - margin-right: 24rpx; + align-items: center; + height: 400rpx; + color: #999; + font-size: 28rpx; +} + +/* 转栏记录列表 */ +.transfer-list { + display: flex; + flex-direction: column; + gap: 20rpx; +} + +/* 转栏记录卡片 */ +.transfer-card { + background-color: #fff; + border-radius: 12rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +/* 卡片头部 */ +.card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 24rpx; + background-color: #fff; + border-bottom: 1rpx solid #f0f0f0; +} + +.record-id { + font-size: 32rpx; + font-weight: bold; + color: #07c160; +} + +.edit-btn { + padding: 8rpx 24rpx; + background-color: #07c160; + color: #fff; + border: none; + border-radius: 20rpx; + font-size: 24rpx; +} + +.edit-btn::after { + border: none; +} + +/* 卡片主体 */ +.card-body { + padding: 24rpx; +} + +.info-row { + display: flex; + align-items: flex-start; + padding: 12rpx 0; + font-size: 28rpx; +} + +.info-row .label { + color: #666; + min-width: 180rpx; flex-shrink: 0; } -.avatar-icon { - font-size: 40rpx; -} - -.record-info { +.info-row .value { + color: #333; flex: 1; - margin-right: 16rpx; + word-break: break-all; } -.record-title { - font-size: 32rpx; - font-weight: 500; - color: #303133; - margin-bottom: 8rpx; +/* 卡片底部 */ +.card-footer { + padding: 16rpx 24rpx; + background-color: #f8f9fa; + text-align: center; + border-top: 1rpx solid #f0f0f0; } -.ear-number { - color: #303133; +.page-indicator { + font-size: 24rpx; + color: #999; } -.record-details { +/* 空状态 */ +.empty-container { display: flex; flex-direction: column; - margin-bottom: 8rpx; -} - -.detail-item { - font-size: 24rpx; - color: #606266; - margin-bottom: 4rpx; -} - -.record-extra { - margin-top: 8rpx; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 6rpx 12rpx; -} - -.extra-row { - display: flex; - align-items: center; - font-size: 22rpx; -} - -.extra-label { - color: #909399; - margin-right: 8rpx; -} - -.extra-value { - color: #303133; -} - -.record-meta { - display: flex; - flex-direction: column; -} - -.meta-item { - font-size: 22rpx; - color: #909399; - margin-bottom: 2rpx; -} - -.load-more { - text-align: center; - padding: 32rpx; - font-size: 24rpx; - color: #909399; -} - -.no-more { - text-align: center; - padding: 32rpx; - font-size: 24rpx; - color: #c0c4cc; -} - -/* 分页导航 */ -.pagination { - display: flex; - flex-wrap: wrap; - gap: 12rpx; align-items: center; justify-content: center; - padding: 20rpx 16rpx 40rpx; + padding: 100rpx 0; } -.page-item { - min-width: 60rpx; - padding: 12rpx 20rpx; - border-radius: 8rpx; - background-color: #f5f5f5; - color: #606266; - font-size: 26rpx; - text-align: center; +.empty-icon { + font-size: 120rpx; + margin-bottom: 30rpx; + opacity: 0.3; } -.page-item.active { - background-color: #3cc51f; - color: #ffffff; -} - -.page-item.disabled { - opacity: 0.5; - pointer-events: none; -} - -.loading-container { - text-align: center; - padding: 120rpx 32rpx; -} - -.loading-spinner { - width: 48rpx; - height: 48rpx; - border: 4rpx solid #f0f0f0; - border-top: 4rpx solid #3cc51f; - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 16rpx; -} - -.loading-text { +.empty-text { font-size: 28rpx; - color: #909399; + color: #999; } -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} \ No newline at end of file +/* 分页 */ +.pagination { + display: flex; + align-items: center; + justify-content: center; + margin: 30rpx 0; + padding: 20rpx; + background-color: #fff; + border-radius: 12rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); +} + +.page-btn { + width: 150rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin: 0 10rpx; + background-color: #07c160; + color: #fff; + font-size: 26rpx; + border-radius: 8rpx; + border: none; +} + +.page-btn::after { + border: none; +} + +.page-btn[disabled] { + background-color: #e0e0e0; + color: #999; +} + +.page-numbers { + display: flex; + flex-wrap: wrap; + gap: 10rpx; + margin: 0 20rpx; + max-width: 400rpx; + justify-content: center; +} + +.page-number { + width: 60rpx; + height: 60rpx; + line-height: 60rpx; + text-align: center; + font-size: 26rpx; + color: #333; + background-color: #f5f5f5; + border-radius: 8rpx; + transition: all 0.3s; +} + +.page-number.active { + background-color: #07c160; + color: #fff; + font-weight: bold; + transform: scale(1.1); + box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); +} + +/* 转栏登记按钮 */ +.add-btn { + position: fixed; + bottom: 30rpx; + left: 50%; + transform: translateX(-50%); + width: 90%; + height: 80rpx; + line-height: 80rpx; + text-align: center; + background-color: #07c160; + color: #fff; + font-size: 32rpx; + font-weight: bold; + border-radius: 12rpx; + box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); +} diff --git a/mini_program/farm-monitor-dashboard/pages/cattle/图标说明.md b/mini_program/farm-monitor-dashboard/pages/cattle/图标说明.md new file mode 100644 index 0000000..802208e --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/cattle/图标说明.md @@ -0,0 +1,57 @@ +# 生产管理页面图标说明 + +## 需要的图标列表 + +### 牛只管理图标（11个） +放置目录：`/images/cattle/` + +1. `archive.png` - 牛档案（浅蓝色图标） +2. `estrus.png` - 发情记录（橙色图标） +3. `breeding.png` - 配种记录（蓝色图标） +4. `pregnancy.png` - 妊娠记录（黄色图标） +5. `birth.png` - 分娩记录（绿色图标） +6. `weaning.png` - 断奶记录（紫色图标） +7. `transfer.png` - 转栏记录（红色图标） +8. `exit.png` - 离栏记录（青色图标） +9. `pens.png` - 栏舍设置（靛蓝色图标） +10. `batches.png` - 批次设置（粉色图标） +11. `vaccination.png` - 防疫预警（黄绿色图标） + +### 猪只管理图标（11个） +放置目录：`/images/pig/` + +1. `archive.png` - 猪档案（浅蓝色图标） +2. `estrus.png` - 发情记录（橙色图标） +3. `breeding.png` - 配种记录（蓝色图标） +4. `pregnancy.png` - 妊娠记录（黄色图标） +5. `birth.png` - 分娩记录（绿色图标） +6. `weaning.png` - 断奶记录（紫色图标） +7. `transfer.png` - 转栏记录（红色图标） +8. `exit.png` - 离栏记录（青色图标） +9. `pens.png` - 栏舍设置（靛蓝色图标） +10. `batches.png` - 批次设置（粉色图标） +11. `vaccination.png` - 防疫预警（黄绿色图标） + +## 图标规格 +- 尺寸：96x96 像素 +- 格式：PNG（透明背景） +- 风格：线性图标，简洁风格 + +## 获取方式 +1. 从 iconfont.cn 搜索下载 +2. 请设计师制作 +3. 暂时可不放置图标文件，页面仍可正常显示背景色 + +## 推荐搜索关键词 +- 档案：folder, file, document +- 发情：heart, love +- 配种：breeding +- 妊娠：pregnant +- 分娩：birth, baby +- 断奶：weaning +- 转栏：transfer, move +- 离栏：exit, leave +- 栏舍：house, pen +- 批次：batch, group +- 防疫：vaccine, shield + diff --git a/mini_program/farm-monitor-dashboard/pages/device/collar/collar.js b/mini_program/farm-monitor-dashboard/pages/device/collar/collar.js new file mode 100644 index 0000000..26f4d77 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/device/collar/collar.js @@ -0,0 +1,201 @@ +// pages/device/collar/collar.js - 智能项圈页面 +const { API } = require('../../../utils/api.js') + +Page({ + data: { + list: [], // 数据列表 + page: 1, // 当前页码 + limit: 10, // 每页数量 + total: 0, // 总数量 + totalPages: 0, // 总页数 + searchValue: '', // 搜索值 + loading: false, // 加载状态 + refreshing: false // 刷新状态 + }, + + onLoad() { + console.log('智能项圈页面加载') + this.loadData() + }, + + onShow() { + console.log('智能项圈页面显示') + }, + + onPullDownRefresh() { + this.setData({ page: 1, refreshing: true }) + this.loadData(true) + }, + + /** + * 加载数据 + */ + async loadData(isRefresh = false) { + if (this.data.loading) return + + this.setData({ loading: true }) + + try { + const params = { + page: this.data.page, + limit: this.data.limit, + _t: Date.now(), + refresh: isRefresh + } + + // 如果有搜索条件，添加到参数中 + if (this.data.searchValue) { + params.sn = this.data.searchValue.trim() // 按项圈SN编号精确查询 + params.number = this.data.searchValue.trim() // 兼容参数 + } + + console.log('请求参数:', params) + + const res = await API.getCollarList(params) + + console.log('智能项圈数据:', res) + + // 根据实际返回的数据结构调整 + let list = res.data?.list || res.data || res.list || [] + const total = res.data?.total || res.total || 0 + + // 如果有搜索条件，进行前端精确过滤（确保精确匹配） + if (this.data.searchValue && this.data.searchValue.trim()) { + const searchKey = this.data.searchValue.trim() + list = list.filter(item => { + const sn = String(item.sn || item.number || '') + // 精确匹配：完全相等 + return sn === searchKey + }) + + console.log('精确查找结果:', list.length, '条') + + if (list.length === 0) { + wx.showToast({ + title: '未找到匹配的设备', + icon: 'none', + duration: 2000 + }) + } + } + + const totalPages = Math.ceil((this.data.searchValue ? list.length : total) / this.data.limit) + + this.setData({ + list: list, + total: total, + totalPages: totalPages, + loading: false, + refreshing: false + }) + + // 停止下拉刷新 + if (isRefresh) { + wx.stopPullDownRefresh() + } + + } catch (error) { + console.error('加载数据失败:', error) + + this.setData({ + loading: false, + refreshing: false + }) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + if (isRefresh) { + wx.stopPullDownRefresh() + } + } + }, + + /** + * 搜索输入 + */ + onSearchInput(e) { + this.setData({ + searchValue: e.detail.value + }) + }, + + /** + * 执行搜索 + */ + handleSearch() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 清空搜索 + */ + clearSearch() { + this.setData({ + searchValue: '', + page: 1 + }) + this.loadData(true) + }, + + /** + * 切换页码 + */ + changePage(e) { + const page = e.currentTarget.dataset.page + if (page === this.data.page || page < 1 || page > this.data.totalPages) { + return + } + + this.setData({ page: page }) + this.loadData() + + // 滚动到顶部 + wx.pageScrollTo({ + scrollTop: 0, + duration: 300 + }) + }, + + /** + * 上一页 + */ + prevPage() { + if (this.data.page > 1) { + this.setData({ page: this.data.page - 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 下一页 + */ + nextPage() { + if (this.data.page < this.data.totalPages) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 查看详情 + */ + viewDetail(e) { + const id = e.currentTarget.dataset.id + wx.navigateTo({ + url: `/pages/device/collar-detail/collar-detail?id=${id}`, + fail: () => { + wx.showToast({ + title: '详情页面开发中', + icon: 'none' + }) + } + }) + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/device/collar/collar.json b/mini_program/farm-monitor-dashboard/pages/device/collar/collar.json new file mode 100644 index 0000000..3cce7ca --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/device/collar/collar.json @@ -0,0 +1,9 @@ +{ + "navigationBarTitleText": "智能项圈", + "enablePullDownRefresh": true, + "backgroundColor": "#f5f5f5", + "navigationBarBackgroundColor": "#ffffff", + "navigationBarTextStyle": "black", + "usingComponents": {} +} + diff --git a/mini_program/farm-monitor-dashboard/pages/device/collar/collar.wxml b/mini_program/farm-monitor-dashboard/pages/device/collar/collar.wxml index d911154..fd1f33d 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/collar/collar.wxml +++ b/mini_program/farm-monitor-dashboard/pages/device/collar/collar.wxml @@ -1,217 +1,102 @@ - - - - - - - - - - - - 搜索项圈编号: {{searchValue}} - - - - - - 搜索结果 - 找到匹配的设备 - - - - - {{searchResult.snText}} - {{searchResult.statusText}} - - - - - - 项圈编号: - {{searchResult.sn}} - - - - 佩戴状态: - {{searchResult.wearStatusText}} - - - - 连接状态: - {{searchResult.connectStatusText}} - - - - 电池电量: - {{searchResult.batteryText}} - - - - 体温: - {{searchResult.temperatureText}} - - - - 步数: - {{searchResult.stepsText}} - - - - 信号强度: - {{searchResult.signalText}} - - - - GPS信号: - {{searchResult.gpsText}} - - - - 位置状态: - {{searchResult.locationText}} - - - - 最后更新: - {{searchResult.lastUpdateText}} - - - - 更新间隔: - {{searchResult.updateIntervalText}} - - - - - - - - - - - - - - 🔍 - 未找到项圈编号为 "{{searchValue}}" 的设备 - - - - - - - - - - {{item.snText}} - {{item.statusText}} - - - - - - 项圈编号: - {{item.sn}} - - - - 佩戴状态: - {{item.wearStatusText}} - - - - 连接状态: - {{item.connectStatusText}} - - - - 电池电量: - {{item.batteryText}} - - - - 体温: - {{item.temperatureText}} - - - - 步数: - {{item.stepsText}} - - - - 信号强度: - {{item.signalText}} - - - - GPS信号: - {{item.gpsText}} - - - - 位置状态: - {{item.locationText}} - - - - 最后更新: - {{item.lastUpdateText}} - - - - 更新间隔: - {{item.updateIntervalText}} - - - - - - - - - - - - - - - - 共 {{total}} 条数据，第 {{currentPage}} / {{totalPages}} 页 - - - - - - - - {{item}} - - - - - - - - \ No newline at end of file + + + + + + + ✕ + + + + + + + 共 {{total}} 条数据 + 第 {{page}}/{{totalPages}} 页 + + + + + + + {{item.sn || item.number}} + + {{item.status || '离线'}} + + + + + 设备状态： + {{item.deviceStatus || '-'}} + + + 佩戴状态： + {{item.undefinedInfo || (item.is_wear ? '已佩戴' : '未佩戴')}} + + + 电量： + {{item.battery || 0}}% + + + 温度： + {{item.temperature || '-'}}℃ + + + 步数： + {{item.steps || 0}} + + + 定位： + {{item.location || '-'}} + + + 更新时间： + {{item.lastUpdate || item.updateTime || '-'}} + + + + + + + 暂无数据 + + + + + 加载中... + + + + + + + 上一页 + + + + + + {{index + 1}} + + + ... + + + + + + 下一页 + + + diff --git a/mini_program/farm-monitor-dashboard/pages/device/collar/collar.wxss b/mini_program/farm-monitor-dashboard/pages/device/collar/collar.wxss index ff7e411..127b7ce 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/collar/collar.wxss +++ b/mini_program/farm-monitor-dashboard/pages/device/collar/collar.wxss @@ -1,356 +1,215 @@ - -.container { - padding: 20rpx; -} - -.search-box { - display: flex; - margin-bottom: 20rpx; - gap: 15rpx; - align-items: center; -} - -.search-box input { - flex: 1; - border: 2rpx solid #e8e8e8; - border-radius: 25rpx; - padding: 20rpx 30rpx; - font-size: 28rpx; - background: #fafafa; - transition: all 0.3s ease; -} - -.search-box input:focus { - border-color: #1890ff; - background: #fff; - box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.1); -} - -.search-btn { - background: linear-gradient(135deg, #1890ff, #40a9ff); - color: white; - border: none; - border-radius: 25rpx; - padding: 20rpx 30rpx; - font-size: 28rpx; - font-weight: bold; - box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3); - transition: all 0.3s ease; -} - -.search-btn:active { - transform: translateY(2rpx); - box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.3); -} - -.clear-btn { - background: linear-gradient(135deg, #ff4d4f, #ff7875); - color: white; - border: none; - border-radius: 25rpx; - padding: 20rpx 30rpx; - font-size: 28rpx; - font-weight: bold; - box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3); - transition: all 0.3s ease; -} - -.clear-btn:active { - transform: translateY(2rpx); - box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3); -} - -.search-status { - background: linear-gradient(135deg, #e6f7ff, #bae7ff); - border: 2rpx solid #91d5ff; - border-radius: 12rpx; - padding: 20rpx; - margin-bottom: 20rpx; - text-align: center; -} - -.search-status text { - color: #1890ff; - font-size: 28rpx; - font-weight: bold; -} - -.search-result { - margin-bottom: 30rpx; -} - -.result-header { - background: linear-gradient(135deg, #f6ffed, #d9f7be); - border: 2rpx solid #b7eb8f; - border-radius: 12rpx; - padding: 20rpx; - margin-bottom: 20rpx; - text-align: center; -} - -.result-title { - display: block; - font-size: 32rpx; - font-weight: bold; - color: #52c41a; - margin-bottom: 10rpx; -} - -.result-subtitle { - display: block; - font-size: 24rpx; - color: #73d13d; -} - -.search-item { - border: 2rpx solid #52c41a; - box-shadow: 0 4rpx 16rpx rgba(82, 196, 26, 0.2); -} - -.no-result { - text-align: center; - padding: 80rpx 40rpx; - background: #fafafa; - border-radius: 12rpx; - margin-bottom: 30rpx; -} - -.no-result-icon { - font-size: 80rpx; - margin-bottom: 30rpx; -} - -.no-result-text { - display: block; - font-size: 28rpx; - color: #666; - margin-bottom: 40rpx; - line-height: 1.5; -} - -.retry-btn { - background: linear-gradient(135deg, #1890ff, #40a9ff); - color: white; - border: none; - border-radius: 25rpx; - padding: 20rpx 40rpx; - font-size: 28rpx; - font-weight: bold; - box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3); -} - -.list { - margin-bottom: 30rpx; -} - -.item { - padding: 20rpx; - margin-bottom: 20rpx; - background: #fff; - border-radius: 12rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); - border: 1rpx solid #eee; -} - -.item-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20rpx; - padding-bottom: 15rpx; - border-bottom: 1rpx solid #f0f0f0; -} - -.device-sn { - font-size: 32rpx; - font-weight: bold; - color: #333; -} - -.device-status { - padding: 8rpx 16rpx; - border-radius: 20rpx; - font-size: 24rpx; - font-weight: bold; -} - -.device-status.online { - background: #e8f5e8; - color: #52c41a; -} - -.device-status.offline { - background: #fff2e8; - color: #fa8c16; -} - -.item-content { - margin-bottom: 20rpx; -} - -.info-row { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 12rpx; - padding: 8rpx 0; -} - -.info-row .label { - font-size: 28rpx; - color: #666; - min-width: 140rpx; -} - -.info-row .value { - font-size: 28rpx; - color: #333; - text-align: right; - flex: 1; -} - -/* 状态颜色 */ -.wear-on { - color: #52c41a; - font-weight: bold; -} - -.wear-off { - color: #ff4d4f; - font-weight: bold; -} - -.connect-on { - color: #52c41a; - font-weight: bold; -} - -.connect-off { - color: #ff4d4f; - font-weight: bold; -} - -.battery-high { - color: #52c41a; - font-weight: bold; -} - -.battery-medium { - color: #fa8c16; - font-weight: bold; -} - -.battery-low { - color: #ff4d4f; - font-weight: bold; -} - -.item-actions { - display: flex; - justify-content: flex-end; - gap: 20rpx; - padding-top: 15rpx; - border-top: 1rpx solid #f0f0f0; -} - -.btn-detail { - background: #1890ff; - color: white; - border: none; - border-radius: 6rpx; -} - -.btn-edit { - background: #52c41a; - color: white; - border: none; - border-radius: 6rpx; -} - -.pagination { - margin-top: 40rpx; - padding: 30rpx; - background: linear-gradient(135deg, #f8f9fa, #e9ecef); - border-radius: 20rpx; - box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1); - border: 2rpx solid #e8e8e8; -} - -.pagination-info { - text-align: center; - margin-bottom: 30rpx; - font-size: 28rpx; - color: #666; - font-weight: 500; - background: rgba(255, 255, 255, 0.8); - padding: 15rpx; - border-radius: 12rpx; - border: 1rpx solid #e8e8e8; -} - -.pagination-buttons { - display: flex; - justify-content: center; - align-items: center; - gap: 15rpx; - flex-wrap: wrap; -} - -.page-btn { - padding: 16rpx 28rpx; - border-radius: 12rpx; - font-size: 26rpx; - font-weight: 500; - border: 2rpx solid #d9d9d9; - background: linear-gradient(135deg, #fff, #f8f9fa); - color: #333; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); - transition: all 0.3s ease; - min-width: 80rpx; -} - -.page-btn:not(.disabled):active { - transform: translateY(2rpx); - box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2); -} - -.page-btn.disabled { - background: linear-gradient(135deg, #f5f5f5, #e8e8e8); - color: #ccc; - border-color: #d9d9d9; - cursor: not-allowed; -} - -.page-numbers { - display: flex; - gap: 8rpx; - margin: 0 20rpx; -} - -.page-number { - padding: 16rpx 20rpx; - border: 2rpx solid #d9d9d9; - border-radius: 12rpx; - font-size: 26rpx; - font-weight: 500; - color: #333; - background: linear-gradient(135deg, #fff, #f8f9fa); - min-width: 60rpx; - text-align: center; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); - transition: all 0.3s ease; -} - -.page-number:active { - transform: translateY(2rpx); - box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2); -} - -.page-number.active { - background: linear-gradient(135deg, #1890ff, #40a9ff); - color: white; - border-color: #1890ff; - font-weight: bold; - box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3); - transform: scale(1.05); -} \ No newline at end of file +/* pages/device/collar/collar.wxss - 智能项圈样式 */ +.page-container { + min-height: 100vh; + background-color: #f5f5f5; + padding: 20rpx; +} + +/* 搜索栏 */ +.search-bar { + display: flex; + gap: 20rpx; + margin-bottom: 20rpx; + background-color: #ffffff; + padding: 20rpx; + border-radius: 12rpx; +} + +.search-input-wrapper { + flex: 1; + position: relative; + display: flex; + align-items: center; + background-color: #f5f5f5; + border-radius: 8rpx; + padding: 0 20rpx; +} + +.search-input { + flex: 1; + height: 64rpx; + font-size: 28rpx; +} + +.search-clear { + width: 32rpx; + height: 32rpx; + border-radius: 50%; + background-color: #cccccc; + color: #ffffff; + display: flex; + align-items: center; + justify-content: center; + font-size: 20rpx; +} + +.search-btn { + width: 120rpx; + height: 64rpx; + line-height: 64rpx; + background-color: #52c41a; + color: #ffffff; + font-size: 28rpx; + border-radius: 8rpx; + padding: 0; + border: none; +} + +.search-btn::after { + border: none; +} + +/* 数据统计 */ +.data-stats { + display: flex; + justify-content: space-between; + padding: 20rpx; + background-color: #ffffff; + border-radius: 12rpx; + margin-bottom: 20rpx; +} + +.stats-text { + font-size: 26rpx; + color: #666666; +} + +/* 数据列表 */ +.data-list { + margin-bottom: 20rpx; +} + +.list-item { + background-color: #ffffff; + border-radius: 12rpx; + padding: 24rpx; + margin-bottom: 20rpx; +} + +.item-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16rpx; + padding-bottom: 16rpx; + border-bottom: 1rpx solid #f0f0f0; +} + +.item-number { + font-size: 32rpx; + font-weight: bold; + color: #333333; +} + +.item-status { + padding: 8rpx 20rpx; + border-radius: 20rpx; + font-size: 24rpx; +} + +.status-online { + background-color: #e8f9f0; + color: #52c41a; +} + +.status-offline { + background-color: #fff1f0; + color: #ff4d4f; +} + +.item-content { + display: flex; + flex-direction: column; + gap: 12rpx; +} + +.item-row { + display: flex; + font-size: 28rpx; +} + +.item-label { + color: #999999; + min-width: 160rpx; +} + +.item-value { + color: #333333; + flex: 1; +} + +/* 空状态 */ +.empty-state { + padding: 120rpx 0; + text-align: center; +} + +.empty-text { + font-size: 28rpx; + color: #999999; +} + +/* 加载状态 */ +.loading-state { + padding: 80rpx 0; + text-align: center; +} + +.loading-text { + font-size: 28rpx; + color: #999999; +} + +/* 分页器 */ +.pagination { + display: flex; + justify-content: center; + align-items: center; + gap: 16rpx; + padding: 20rpx; + background-color: #ffffff; + border-radius: 12rpx; + margin-bottom: 40rpx; +} + +.page-btn { + padding: 12rpx 24rpx; + background-color: #f5f5f5; + border-radius: 8rpx; + font-size: 26rpx; + color: #333333; +} + +.page-btn.disabled { + opacity: 0.4; +} + +.page-numbers { + display: flex; + align-items: center; + gap: 8rpx; +} + +.page-number { + min-width: 56rpx; + height: 56rpx; + display: flex; + align-items: center; + justify-content: center; + background-color: #f5f5f5; + border-radius: 8rpx; + font-size: 26rpx; + color: #333333; +} + +.page-number.active { + background-color: #52c41a; + color: #ffffff; + font-weight: bold; +} + +.page-ellipsis { + padding: 0 8rpx; + font-size: 26rpx; + color: #999999; +} diff --git a/mini_program/farm-monitor-dashboard/pages/device/device.js b/mini_program/farm-monitor-dashboard/pages/device/device.js new file mode 100644 index 0000000..d021549 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/device/device.js @@ -0,0 +1,84 @@ +// pages/device/device.js - 设备管理页面 +Page({ + data: { + deviceList: [], + activeTab: 'all', + tabs: [ + { key: 'all', name: '全部' }, + { key: 'eartag', name: '耳标' }, + { key: 'collar', name: '项圈' }, + { key: 'host', name: '主机' }, + { key: 'fence', name: '围栏' } + ], + loading: false + }, + + onLoad() { + console.log('设备管理页加载') + this.loadDeviceList() + }, + + onShow() { + console.log('设备管理页显示') + this.loadDeviceList() + }, + + onPullDownRefresh() { + this.loadDeviceList() + setTimeout(() => { + wx.stopPullDownRefresh() + }, 1000) + }, + + // 切换标签 + switchTab(e) { + const tab = e.currentTarget.dataset.tab + this.setData({ activeTab: tab }) + this.loadDeviceList() + }, + + // 加载设备列表 + loadDeviceList() { + this.setData({ loading: true }) + + // TODO: 从API加载设备列表 + // 模拟数据 + setTimeout(() => { + this.setData({ + deviceList: [ + { id: 1, name: '耳标-001', type: 'eartag', status: 'online', battery: 85 }, + { id: 2, name: '项圈-001', type: 'collar', status: 'online', battery: 92 }, + { id: 3, name: '主机-001', type: 'host', status: 'online', battery: 100 }, + { id: 4, name: '围栏-001', type: 'fence', status: 'online', battery: 78 } + ], + loading: false + }) + }, 500) + }, + + // 查看设备详情 + viewDeviceDetail(e) { + const id = e.currentTarget.dataset.id + const type = e.currentTarget.dataset.type + + // 根据设备类型跳转到不同的详情页 + const urlMap = { + eartag: `/pages/device/eartag/eartag?id=${id}`, + collar: `/pages/device/collar/collar?id=${id}`, + host: `/pages/device/host/host?id=${id}`, + fence: `/pages/device/fence/fence?id=${id}` + } + + const url = urlMap[type] || `/pages/device/eartag/eartag?id=${id}` + + wx.navigateTo({ url }) + }, + + // 添加设备 + addDevice() { + wx.navigateTo({ + url: '/pages/device/eartag-add/eartag-add' + }) + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/device/device.json b/mini_program/farm-monitor-dashboard/pages/device/device.json new file mode 100644 index 0000000..a234e8b --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/device/device.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "设备管理", + "enablePullDownRefresh": true, + "backgroundColor": "#f6f6f6", + "usingComponents": {} +} + diff --git a/mini_program/farm-monitor-dashboard/pages/device/device.wxml b/mini_program/farm-monitor-dashboard/pages/device/device.wxml index 5f00e6f..ffd935c 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/device.wxml +++ b/mini_program/farm-monitor-dashboard/pages/device/device.wxml @@ -1,148 +1,148 @@ - - - - - - - 🔍 - - 清空 - - - - - - - 类型: - - - 全部 - - - {{item.icon}} {{item.label}} - - - - - - - 状态: - - - 全部 - - - 在线 - - - 离线 - - - 故障 - - - - - - - - - - {{getDeviceTypeInfo(item.type).icon}} - - - - {{item.name || item.deviceNumber}} - - 编号: {{item.deviceNumber}} - 类型: {{getDeviceTypeInfo(item.type).label}} - - - 位置: {{item.location || '未知'}} - 最后更新: {{formatTime(item.lastUpdateTime)}} - - - - - - {{getStatusText(item.status)}} - - - 编辑 - 删除 - - - - - - - 📱 - 暂无设备数据 - - - - - - 加载中... - 上拉加载更多 - - - - - 没有更多数据了 - - - - - - + - - - - - - 加载中... - - + + + + + + + 🔍 + + 清空 + + + + + + + 类型: + + + 全部 + + + {{item.icon}} {{item.label}} + + + + + + + 状态: + + + 全部 + + + 在线 + + + 离线 + + + 故障 + + + + + + + + + + {{getDeviceTypeInfo(item.type).icon}} + + + + {{item.name || item.deviceNumber}} + + 编号: {{item.deviceNumber}} + 类型: {{getDeviceTypeInfo(item.type).label}} + + + 位置: {{item.location || '未知'}} + 最后更新: {{formatTime(item.lastUpdateTime)}} + + + + + + {{getStatusText(item.status)}} + + + 编辑 + 删除 + + + + + + + 📱 + 暂无设备数据 + + + + + + 加载中... + 上拉加载更多 + + + + + 没有更多数据了 + + + + + + + + + + + + + 加载中... + + diff --git a/mini_program/farm-monitor-dashboard/pages/device/device.wxss b/mini_program/farm-monitor-dashboard/pages/device/device.wxss index f292a6d..246184a 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/device.wxss +++ b/mini_program/farm-monitor-dashboard/pages/device/device.wxss @@ -1,332 +1,332 @@ -/* pages/device/device.wxss */ -.device-container { - background-color: #f6f6f6; - min-height: 100vh; - padding-bottom: 120rpx; -} - -.search-bar { - display: flex; - align-items: center; - padding: 16rpx; - background-color: #ffffff; - border-bottom: 1rpx solid #f0f0f0; -} - -.search-input-wrapper { - flex: 1; - position: relative; - margin-right: 16rpx; -} - -.search-input { - width: 100%; - height: 72rpx; - background-color: #f5f5f5; - border-radius: 36rpx; - padding: 0 60rpx 0 24rpx; - font-size: 28rpx; - color: #303133; -} - -.search-icon { - position: absolute; - right: 24rpx; - top: 50%; - transform: translateY(-50%); - font-size: 32rpx; - color: #909399; -} - -.clear-btn { - font-size: 28rpx; - color: #3cc51f; - padding: 8rpx 16rpx; -} - -.filter-bar { - background-color: #ffffff; - padding: 16rpx; - border-bottom: 1rpx solid #f0f0f0; -} - -.filter-group { - margin-bottom: 16rpx; -} - -.filter-group:last-child { - margin-bottom: 0; -} - -.filter-label { - font-size: 24rpx; - color: #606266; - margin-bottom: 12rpx; - font-weight: 500; -} - -.filter-options { - display: flex; - flex-wrap: wrap; - gap: 12rpx; -} - -.filter-option { - padding: 8rpx 16rpx; - background-color: #f5f5f5; - border-radius: 16rpx; - font-size: 22rpx; - color: #606266; - white-space: nowrap; - transition: all 0.3s; -} - -.filter-option.active { - background-color: #3cc51f; - color: #ffffff; -} - -.device-list { - padding: 16rpx; -} - -.device-item { - display: flex; - align-items: center; - background-color: #ffffff; - border-radius: 12rpx; - padding: 24rpx; - margin-bottom: 16rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); - transition: all 0.3s; -} - -.device-item:active { - transform: scale(0.98); - box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1); -} - -.device-icon { - width: 80rpx; - height: 80rpx; - background-color: #f0f9ff; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - margin-right: 24rpx; - flex-shrink: 0; -} - -.device-icon .icon { - font-size: 40rpx; -} - -.device-info { - flex: 1; - margin-right: 16rpx; -} - -.device-name { - font-size: 32rpx; - font-weight: 500; - color: #303133; - margin-bottom: 8rpx; -} - -.device-details { - display: flex; - flex-direction: column; - margin-bottom: 8rpx; -} - -.detail-item { - font-size: 24rpx; - color: #606266; - margin-bottom: 4rpx; -} - -.device-meta { - display: flex; - flex-direction: column; -} - -.meta-item { - font-size: 22rpx; - color: #909399; - margin-bottom: 2rpx; -} - -.device-status { - display: flex; - flex-direction: column; - align-items: flex-end; -} - -.status-badge { - padding: 6rpx 16rpx; - border-radius: 12rpx; - font-size: 20rpx; - color: #ffffff; - margin-bottom: 12rpx; -} - -.device-actions { - display: flex; - flex-direction: column; - gap: 8rpx; -} - -.action-btn { - padding: 6rpx 12rpx; - border-radius: 8rpx; - font-size: 20rpx; - text-align: center; - min-width: 60rpx; -} - -.action-btn.edit { - background-color: #e6f7ff; - color: #1890ff; -} - -.action-btn.delete { - background-color: #fff2f0; - color: #f5222d; -} - -.empty-state { - text-align: center; - padding: 120rpx 32rpx; -} - -.empty-icon { - font-size: 120rpx; - display: block; - margin-bottom: 24rpx; - opacity: 0.5; -} - -.empty-text { - font-size: 32rpx; - color: #909399; - margin-bottom: 32rpx; - display: block; -} - -.add-btn { - background-color: #3cc51f; - color: #ffffff; - border-radius: 24rpx; - padding: 16rpx 32rpx; - font-size: 28rpx; - border: none; -} - -.add-btn:active { - background-color: #2ea617; -} - -.load-more { - text-align: center; - padding: 32rpx; - font-size: 24rpx; - color: #909399; -} - -.no-more { - text-align: center; - padding: 32rpx; - font-size: 24rpx; - color: #c0c4cc; -} - -.fab { - position: fixed; - right: 32rpx; - bottom: 120rpx; - width: 112rpx; - height: 112rpx; - background-color: #3cc51f; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 4rpx 16rpx rgba(60, 197, 31, 0.3); - z-index: 100; -} - -.fab:active { - transform: scale(0.95); -} - -.fab-icon { - font-size: 48rpx; - color: #ffffff; - font-weight: bold; -} - -.loading-container { - text-align: center; - padding: 120rpx 32rpx; -} - -.loading-spinner { - width: 48rpx; - height: 48rpx; - border: 4rpx solid #f0f0f0; - border-top: 4rpx solid #3cc51f; - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 16rpx; -} - -.loading-text { - font-size: 28rpx; - color: #909399; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* 响应式设计 */ -@media (max-width: 375px) { - .device-item { - padding: 20rpx; - } - - .device-icon { - width: 70rpx; - height: 70rpx; - margin-right: 20rpx; - } - - .device-icon .icon { - font-size: 36rpx; - } - - .device-name { - font-size: 30rpx; - } - - .detail-item { - font-size: 22rpx; - } - - .meta-item { - font-size: 20rpx; - } - - .fab { - right: 24rpx; - bottom: 100rpx; - width: 100rpx; - height: 100rpx; - } - - .fab-icon { - font-size: 44rpx; - } -} +/* pages/device/device.wxss */ +.device-container { + background-color: #f6f6f6; + min-height: 100vh; + padding-bottom: 120rpx; +} + +.search-bar { + display: flex; + align-items: center; + padding: 16rpx; + background-color: #ffffff; + border-bottom: 1rpx solid #f0f0f0; +} + +.search-input-wrapper { + flex: 1; + position: relative; + margin-right: 16rpx; +} + +.search-input { + width: 100%; + height: 72rpx; + background-color: #f5f5f5; + border-radius: 36rpx; + padding: 0 60rpx 0 24rpx; + font-size: 28rpx; + color: #303133; +} + +.search-icon { + position: absolute; + right: 24rpx; + top: 50%; + transform: translateY(-50%); + font-size: 32rpx; + color: #909399; +} + +.clear-btn { + font-size: 28rpx; + color: #3cc51f; + padding: 8rpx 16rpx; +} + +.filter-bar { + background-color: #ffffff; + padding: 16rpx; + border-bottom: 1rpx solid #f0f0f0; +} + +.filter-group { + margin-bottom: 16rpx; +} + +.filter-group:last-child { + margin-bottom: 0; +} + +.filter-label { + font-size: 24rpx; + color: #606266; + margin-bottom: 12rpx; + font-weight: 500; +} + +.filter-options { + display: flex; + flex-wrap: wrap; + gap: 12rpx; +} + +.filter-option { + padding: 8rpx 16rpx; + background-color: #f5f5f5; + border-radius: 16rpx; + font-size: 22rpx; + color: #606266; + white-space: nowrap; + transition: all 0.3s; +} + +.filter-option.active { + background-color: #3cc51f; + color: #ffffff; +} + +.device-list { + padding: 16rpx; +} + +.device-item { + display: flex; + align-items: center; + background-color: #ffffff; + border-radius: 12rpx; + padding: 24rpx; + margin-bottom: 16rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); + transition: all 0.3s; +} + +.device-item:active { + transform: scale(0.98); + box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1); +} + +.device-icon { + width: 80rpx; + height: 80rpx; + background-color: #f0f9ff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-right: 24rpx; + flex-shrink: 0; +} + +.device-icon .icon { + font-size: 40rpx; +} + +.device-info { + flex: 1; + margin-right: 16rpx; +} + +.device-name { + font-size: 32rpx; + font-weight: 500; + color: #303133; + margin-bottom: 8rpx; +} + +.device-details { + display: flex; + flex-direction: column; + margin-bottom: 8rpx; +} + +.detail-item { + font-size: 24rpx; + color: #606266; + margin-bottom: 4rpx; +} + +.device-meta { + display: flex; + flex-direction: column; +} + +.meta-item { + font-size: 22rpx; + color: #909399; + margin-bottom: 2rpx; +} + +.device-status { + display: flex; + flex-direction: column; + align-items: flex-end; +} + +.status-badge { + padding: 6rpx 16rpx; + border-radius: 12rpx; + font-size: 20rpx; + color: #ffffff; + margin-bottom: 12rpx; +} + +.device-actions { + display: flex; + flex-direction: column; + gap: 8rpx; +} + +.action-btn { + padding: 6rpx 12rpx; + border-radius: 8rpx; + font-size: 20rpx; + text-align: center; + min-width: 60rpx; +} + +.action-btn.edit { + background-color: #e6f7ff; + color: #1890ff; +} + +.action-btn.delete { + background-color: #fff2f0; + color: #f5222d; +} + +.empty-state { + text-align: center; + padding: 120rpx 32rpx; +} + +.empty-icon { + font-size: 120rpx; + display: block; + margin-bottom: 24rpx; + opacity: 0.5; +} + +.empty-text { + font-size: 32rpx; + color: #909399; + margin-bottom: 32rpx; + display: block; +} + +.add-btn { + background-color: #3cc51f; + color: #ffffff; + border-radius: 24rpx; + padding: 16rpx 32rpx; + font-size: 28rpx; + border: none; +} + +.add-btn:active { + background-color: #2ea617; +} + +.load-more { + text-align: center; + padding: 32rpx; + font-size: 24rpx; + color: #909399; +} + +.no-more { + text-align: center; + padding: 32rpx; + font-size: 24rpx; + color: #c0c4cc; +} + +.fab { + position: fixed; + right: 32rpx; + bottom: 120rpx; + width: 112rpx; + height: 112rpx; + background-color: #3cc51f; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4rpx 16rpx rgba(60, 197, 31, 0.3); + z-index: 100; +} + +.fab:active { + transform: scale(0.95); +} + +.fab-icon { + font-size: 48rpx; + color: #ffffff; + font-weight: bold; +} + +.loading-container { + text-align: center; + padding: 120rpx 32rpx; +} + +.loading-spinner { + width: 48rpx; + height: 48rpx; + border: 4rpx solid #f0f0f0; + border-top: 4rpx solid #3cc51f; + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 16rpx; +} + +.loading-text { + font-size: 28rpx; + color: #909399; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* 响应式设计 */ +@media (max-width: 375px) { + .device-item { + padding: 20rpx; + } + + .device-icon { + width: 70rpx; + height: 70rpx; + margin-right: 20rpx; + } + + .device-icon .icon { + font-size: 36rpx; + } + + .device-name { + font-size: 30rpx; + } + + .detail-item { + font-size: 22rpx; + } + + .meta-item { + font-size: 20rpx; + } + + .fab { + right: 24rpx; + bottom: 100rpx; + width: 100rpx; + height: 100rpx; + } + + .fab-icon { + font-size: 44rpx; + } +} diff --git a/mini_program/farm-monitor-dashboard/pages/device/eartag-add/eartag-add.wxml b/mini_program/farm-monitor-dashboard/pages/device/eartag-add/eartag-add.wxml index b341a16..49446ca 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/eartag-add/eartag-add.wxml +++ b/mini_program/farm-monitor-dashboard/pages/device/eartag-add/eartag-add.wxml @@ -1,68 +1,68 @@ - - - - - - ← - - 添加耳标 - - - - - - - 耳标编号 - - - - - 主机号 - - - - - 初始电量 - - - - - 备注 - - - - - - - - 添加耳标 - - - - - - - 添加中... - - + + + + + + ← + + 添加耳标 + + + + + + + 耳标编号 + + + + + 主机号 + + + + + 初始电量 + + + + + 备注 + + + + + + + + 添加耳标 + + + + + + + 添加中... + + diff --git a/mini_program/farm-monitor-dashboard/pages/device/eartag-add/eartag-add.wxss b/mini_program/farm-monitor-dashboard/pages/device/eartag-add/eartag-add.wxss index 8d62741..f2ce48b 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/eartag-add/eartag-add.wxss +++ b/mini_program/farm-monitor-dashboard/pages/device/eartag-add/eartag-add.wxss @@ -1,154 +1,154 @@ -/* pages/device/eartag-add/eartag-add.wxss */ -.eartag-add-container { - background: #f8f9fa; - min-height: 100vh; -} - -/* 顶部导航 */ -.header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 24rpx 32rpx; - background: #3cc51f; - color: white; -} - -.back-btn { - width: 60rpx; - height: 60rpx; - display: flex; - align-items: center; - justify-content: center; -} - -.back-icon { - font-size: 32rpx; - font-weight: bold; -} - -.title { - font-size: 32rpx; - font-weight: bold; -} - -.placeholder { - width: 60rpx; -} - -/* 表单容器 */ -.form-container { - background: #ffffff; - margin: 24rpx 32rpx; - border-radius: 12rpx; - padding: 32rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); -} - -.form-item { - margin-bottom: 32rpx; -} - -.form-item:last-child { - margin-bottom: 0; -} - -.label { - display: block; - font-size: 28rpx; - color: #333; - margin-bottom: 16rpx; - font-weight: 500; -} - -.input { - width: 100%; - padding: 20rpx 24rpx; - border: 1rpx solid #d9d9d9; - border-radius: 8rpx; - font-size: 28rpx; - color: #333; - background: #ffffff; -} - -.input:focus { - border-color: #3cc51f; -} - -.textarea { - width: 100%; - min-height: 120rpx; - padding: 20rpx 24rpx; - border: 1rpx solid #d9d9d9; - border-radius: 8rpx; - font-size: 28rpx; - color: #333; - background: #ffffff; - resize: none; -} - -.textarea:focus { - border-color: #3cc51f; -} - -/* 提交按钮 */ -.submit-container { - padding: 32rpx; -} - -.submit-btn { - width: 100%; - padding: 24rpx; - background: #3cc51f; - color: #ffffff; - border-radius: 12rpx; - text-align: center; - font-size: 32rpx; - font-weight: bold; -} - -.submit-btn:active { - background: #2ea617; -} - -/* 加载状态 */ -.loading-container { - text-align: center; - padding: 80rpx; -} - -.loading-spinner { - width: 48rpx; - height: 48rpx; - border: 4rpx solid #f0f0f0; - border-top: 4rpx solid #3cc51f; - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 20rpx; -} - -.loading-text { - font-size: 28rpx; - color: #999; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* 响应式设计 */ -@media (max-width: 375px) { - .header { - padding: 20rpx 24rpx; - } - - .form-container { - margin: 20rpx 24rpx; - padding: 24rpx; - } - - .submit-container { - padding: 24rpx; - } -} +/* pages/device/eartag-add/eartag-add.wxss */ +.eartag-add-container { + background: #f8f9fa; + min-height: 100vh; +} + +/* 顶部导航 */ +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 24rpx 32rpx; + background: #3cc51f; + color: white; +} + +.back-btn { + width: 60rpx; + height: 60rpx; + display: flex; + align-items: center; + justify-content: center; +} + +.back-icon { + font-size: 32rpx; + font-weight: bold; +} + +.title { + font-size: 32rpx; + font-weight: bold; +} + +.placeholder { + width: 60rpx; +} + +/* 表单容器 */ +.form-container { + background: #ffffff; + margin: 24rpx 32rpx; + border-radius: 12rpx; + padding: 32rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); +} + +.form-item { + margin-bottom: 32rpx; +} + +.form-item:last-child { + margin-bottom: 0; +} + +.label { + display: block; + font-size: 28rpx; + color: #333; + margin-bottom: 16rpx; + font-weight: 500; +} + +.input { + width: 100%; + padding: 20rpx 24rpx; + border: 1rpx solid #d9d9d9; + border-radius: 8rpx; + font-size: 28rpx; + color: #333; + background: #ffffff; +} + +.input:focus { + border-color: #3cc51f; +} + +.textarea { + width: 100%; + min-height: 120rpx; + padding: 20rpx 24rpx; + border: 1rpx solid #d9d9d9; + border-radius: 8rpx; + font-size: 28rpx; + color: #333; + background: #ffffff; + resize: none; +} + +.textarea:focus { + border-color: #3cc51f; +} + +/* 提交按钮 */ +.submit-container { + padding: 32rpx; +} + +.submit-btn { + width: 100%; + padding: 24rpx; + background: #3cc51f; + color: #ffffff; + border-radius: 12rpx; + text-align: center; + font-size: 32rpx; + font-weight: bold; +} + +.submit-btn:active { + background: #2ea617; +} + +/* 加载状态 */ +.loading-container { + text-align: center; + padding: 80rpx; +} + +.loading-spinner { + width: 48rpx; + height: 48rpx; + border: 4rpx solid #f0f0f0; + border-top: 4rpx solid #3cc51f; + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 20rpx; +} + +.loading-text { + font-size: 28rpx; + color: #999; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* 响应式设计 */ +@media (max-width: 375px) { + .header { + padding: 20rpx 24rpx; + } + + .form-container { + margin: 20rpx 24rpx; + padding: 24rpx; + } + + .submit-container { + padding: 24rpx; + } +} diff --git a/mini_program/farm-monitor-dashboard/pages/device/eartag-detail/eartag-detail.wxml b/mini_program/farm-monitor-dashboard/pages/device/eartag-detail/eartag-detail.wxml index 5392eb8..3ea34a6 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/eartag-detail/eartag-detail.wxml +++ b/mini_program/farm-monitor-dashboard/pages/device/eartag-detail/eartag-detail.wxml @@ -1,112 +1,112 @@ - - - - - - ← - - 耳标详情 - - - - - - - {{eartagData.eartagNumber}} - - {{eartagData.isBound ? '已绑定' : '未绑定'}} - - - - - - 设备电量 - {{eartagData.batteryLevel}}% - - - - 设备温度 - {{eartagData.temperature}}°C - - - - 被采集主机 - {{eartagData.hostNumber}} - - - - 总运动量 - {{eartagData.totalMovement}} - - - - 今日运动量 - {{eartagData.todayMovement}} - - - - 佩戴状态 - {{eartagData.wearStatus}} - - - - 设备状态 - {{eartagData.deviceStatus}} - - - - 位置信息 - {{eartagData.location}} - - - - GPS状态 - {{eartagData.gpsState}} - - - - 纬度 - {{eartagData.latitude}} - - - - 经度 - {{eartagData.longitude}} - - - - 绑定状态 - {{eartagData.bindingStatus}} - - - - 电压值 - {{eartagData.voltage}}V - - - - 数据更新时间 - {{eartagData.updateTime}} - - - - - - - - 绑定牛只 - - - 解绑牛只 - - - 编辑信息 - - - - - - - 加载中... - - + + + + + + ← + + 耳标详情 + + + + + + + {{eartagData.eartagNumber}} + + {{eartagData.isBound ? '已绑定' : '未绑定'}} + + + + + + 设备电量 + {{eartagData.batteryLevel}}% + + + + 设备温度 + {{eartagData.temperature}}°C + + + + 被采集主机 + {{eartagData.hostNumber}} + + + + 总运动量 + {{eartagData.totalMovement}} + + + + 今日运动量 + {{eartagData.todayMovement}} + + + + 佩戴状态 + {{eartagData.wearStatus}} + + + + 设备状态 + {{eartagData.deviceStatus}} + + + + 位置信息 + {{eartagData.location}} + + + + GPS状态 + {{eartagData.gpsState}} + + + + 纬度 + {{eartagData.latitude}} + + + + 经度 + {{eartagData.longitude}} + + + + 绑定状态 + {{eartagData.bindingStatus}} + + + + 电压值 + {{eartagData.voltage}}V + + + + 数据更新时间 + {{eartagData.updateTime}} + + + + + + + + 绑定牛只 + + + 解绑牛只 + + + 编辑信息 + + + + + + + 加载中... + + diff --git a/mini_program/farm-monitor-dashboard/pages/device/eartag-detail/eartag-detail.wxss b/mini_program/farm-monitor-dashboard/pages/device/eartag-detail/eartag-detail.wxss index b96e9b6..da65970 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/eartag-detail/eartag-detail.wxss +++ b/mini_program/farm-monitor-dashboard/pages/device/eartag-detail/eartag-detail.wxss @@ -1,183 +1,183 @@ -/* pages/device/eartag-detail/eartag-detail.wxss */ -.eartag-detail-container { - background: #f8f9fa; - min-height: 100vh; -} - -/* 顶部导航 */ -.header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 24rpx 32rpx; - background: #3cc51f; - color: white; -} - -.back-btn { - width: 60rpx; - height: 60rpx; - display: flex; - align-items: center; - justify-content: center; -} - -.back-icon { - font-size: 32rpx; - font-weight: bold; -} - -.title { - font-size: 32rpx; - font-weight: bold; -} - -.placeholder { - width: 60rpx; -} - -/* 耳标信息 */ -.eartag-info { - background: #ffffff; - margin: 24rpx 32rpx; - border-radius: 12rpx; - padding: 32rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); -} - -.info-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 32rpx; - padding-bottom: 24rpx; - border-bottom: 1rpx solid #f0f0f0; -} - -.eartag-number { - font-size: 36rpx; - font-weight: bold; - color: #333; -} - -.bind-status { - padding: 12rpx 24rpx; - border-radius: 20rpx; - font-size: 24rpx; - font-weight: 500; -} - -.bind-status.bound { - background: #52c41a; - color: #ffffff; -} - -.bind-status.unbound { - background: #1890ff; - color: #ffffff; -} - -.info-details { - display: flex; - flex-direction: column; - gap: 24rpx; -} - -.detail-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 16rpx 0; -} - -.label { - font-size: 28rpx; - color: #666; - flex: 1; -} - -.value { - font-size: 28rpx; - color: #333; - font-weight: 500; - text-align: right; - flex: 1; -} - -/* 操作按钮 */ -.action-buttons { - padding: 32rpx; - display: flex; - flex-direction: column; - gap: 16rpx; -} - -.btn { - padding: 24rpx; - border-radius: 12rpx; - text-align: center; - font-size: 28rpx; - font-weight: 500; -} - -.btn.primary { - background: #3cc51f; - color: #ffffff; -} - -.btn.secondary { - background: #f5222d; - color: #ffffff; -} - -.btn.default { - background: #ffffff; - color: #333; - border: 1rpx solid #d9d9d9; -} - -.btn:active { - opacity: 0.8; -} - -/* 加载状态 */ -.loading-container { - text-align: center; - padding: 80rpx; -} - -.loading-spinner { - width: 48rpx; - height: 48rpx; - border: 4rpx solid #f0f0f0; - border-top: 4rpx solid #3cc51f; - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 20rpx; -} - -.loading-text { - font-size: 28rpx; - color: #999; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* 响应式设计 */ -@media (max-width: 375px) { - .header { - padding: 20rpx 24rpx; - } - - .eartag-info { - margin: 20rpx 24rpx; - padding: 24rpx; - } - - .action-buttons { - padding: 24rpx; - } -} +/* pages/device/eartag-detail/eartag-detail.wxss */ +.eartag-detail-container { + background: #f8f9fa; + min-height: 100vh; +} + +/* 顶部导航 */ +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 24rpx 32rpx; + background: #3cc51f; + color: white; +} + +.back-btn { + width: 60rpx; + height: 60rpx; + display: flex; + align-items: center; + justify-content: center; +} + +.back-icon { + font-size: 32rpx; + font-weight: bold; +} + +.title { + font-size: 32rpx; + font-weight: bold; +} + +.placeholder { + width: 60rpx; +} + +/* 耳标信息 */ +.eartag-info { + background: #ffffff; + margin: 24rpx 32rpx; + border-radius: 12rpx; + padding: 32rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); +} + +.info-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 32rpx; + padding-bottom: 24rpx; + border-bottom: 1rpx solid #f0f0f0; +} + +.eartag-number { + font-size: 36rpx; + font-weight: bold; + color: #333; +} + +.bind-status { + padding: 12rpx 24rpx; + border-radius: 20rpx; + font-size: 24rpx; + font-weight: 500; +} + +.bind-status.bound { + background: #52c41a; + color: #ffffff; +} + +.bind-status.unbound { + background: #1890ff; + color: #ffffff; +} + +.info-details { + display: flex; + flex-direction: column; + gap: 24rpx; +} + +.detail-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16rpx 0; +} + +.label { + font-size: 28rpx; + color: #666; + flex: 1; +} + +.value { + font-size: 28rpx; + color: #333; + font-weight: 500; + text-align: right; + flex: 1; +} + +/* 操作按钮 */ +.action-buttons { + padding: 32rpx; + display: flex; + flex-direction: column; + gap: 16rpx; +} + +.btn { + padding: 24rpx; + border-radius: 12rpx; + text-align: center; + font-size: 28rpx; + font-weight: 500; +} + +.btn.primary { + background: #3cc51f; + color: #ffffff; +} + +.btn.secondary { + background: #f5222d; + color: #ffffff; +} + +.btn.default { + background: #ffffff; + color: #333; + border: 1rpx solid #d9d9d9; +} + +.btn:active { + opacity: 0.8; +} + +/* 加载状态 */ +.loading-container { + text-align: center; + padding: 80rpx; +} + +.loading-spinner { + width: 48rpx; + height: 48rpx; + border: 4rpx solid #f0f0f0; + border-top: 4rpx solid #3cc51f; + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 20rpx; +} + +.loading-text { + font-size: 28rpx; + color: #999; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* 响应式设计 */ +@media (max-width: 375px) { + .header { + padding: 20rpx 24rpx; + } + + .eartag-info { + margin: 20rpx 24rpx; + padding: 24rpx; + } + + .action-buttons { + padding: 24rpx; + } +} diff --git a/mini_program/farm-monitor-dashboard/pages/device/eartag/eartag.js b/mini_program/farm-monitor-dashboard/pages/device/eartag/eartag.js new file mode 100644 index 0000000..7a000af --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/device/eartag/eartag.js @@ -0,0 +1,202 @@ +// pages/device/eartag/eartag.js - 智能耳标页面 +const { API } = require('../../../utils/api.js') + +Page({ + data: { + list: [], // 数据列表 + page: 1, // 当前页码 + limit: 10, // 每页数量 + total: 0, // 总数量 + totalPages: 0, // 总页数 + searchValue: '', // 搜索值 + loading: false, // 加载状态 + refreshing: false // 刷新状态 + }, + + onLoad() { + console.log('智能耳标页面加载') + this.loadData() + }, + + onShow() { + console.log('智能耳标页面显示') + }, + + onPullDownRefresh() { + this.setData({ page: 1, refreshing: true }) + this.loadData(true) + }, + + /** + * 加载数据 + */ + async loadData(isRefresh = false) { + if (this.data.loading) return + + this.setData({ loading: true }) + + try { + const params = { + page: this.data.page, + limit: this.data.limit, + _t: Date.now(), + refresh: isRefresh + } + + // 如果有搜索条件，添加到参数中 + if (this.data.searchValue) { + params.eartagNumber = this.data.searchValue.trim() // 按耳标编号精确查询 + params.cid = this.data.searchValue.trim() // 兼容参数 + params.number = this.data.searchValue.trim() // 兼容参数 + } + + console.log('请求参数:', params) + + const res = await API.getEartagList(params) + + console.log('智能耳标数据:', res) + + // 根据实际返回的数据结构调整 + let list = res.data?.list || res.data || res.list || [] + const total = res.data?.total || res.total || 0 + + // 如果有搜索条件，进行前端精确过滤（确保精确匹配） + if (this.data.searchValue && this.data.searchValue.trim()) { + const searchKey = this.data.searchValue.trim() + list = list.filter(item => { + const eartagNumber = String(item.eartagNumber || item.cid || item.number || '') + // 精确匹配：完全相等 + return eartagNumber === searchKey + }) + + console.log('精确查找结果:', list.length, '条') + + if (list.length === 0) { + wx.showToast({ + title: '未找到匹配的设备', + icon: 'none', + duration: 2000 + }) + } + } + + const totalPages = Math.ceil((this.data.searchValue ? list.length : total) / this.data.limit) + + this.setData({ + list: list, + total: total, + totalPages: totalPages, + loading: false, + refreshing: false + }) + + // 停止下拉刷新 + if (isRefresh) { + wx.stopPullDownRefresh() + } + + } catch (error) { + console.error('加载数据失败:', error) + + this.setData({ + loading: false, + refreshing: false + }) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + if (isRefresh) { + wx.stopPullDownRefresh() + } + } + }, + + /** + * 搜索输入 + */ + onSearchInput(e) { + this.setData({ + searchValue: e.detail.value + }) + }, + + /** + * 执行搜索 + */ + handleSearch() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 清空搜索 + */ + clearSearch() { + this.setData({ + searchValue: '', + page: 1 + }) + this.loadData(true) + }, + + /** + * 切换页码 + */ + changePage(e) { + const page = e.currentTarget.dataset.page + if (page === this.data.page || page < 1 || page > this.data.totalPages) { + return + } + + this.setData({ page: page }) + this.loadData() + + // 滚动到顶部 + wx.pageScrollTo({ + scrollTop: 0, + duration: 300 + }) + }, + + /** + * 上一页 + */ + prevPage() { + if (this.data.page > 1) { + this.setData({ page: this.data.page - 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 下一页 + */ + nextPage() { + if (this.data.page < this.data.totalPages) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 查看详情 + */ + viewDetail(e) { + const id = e.currentTarget.dataset.id + wx.navigateTo({ + url: `/pages/device/eartag-detail/eartag-detail?id=${id}`, + fail: () => { + wx.showToast({ + title: '详情页面开发中', + icon: 'none' + }) + } + }) + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/device/eartag/eartag.json b/mini_program/farm-monitor-dashboard/pages/device/eartag/eartag.json new file mode 100644 index 0000000..6e6a006 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/device/eartag/eartag.json @@ -0,0 +1,9 @@ +{ + "navigationBarTitleText": "智能耳标", + "enablePullDownRefresh": true, + "backgroundColor": "#f5f5f5", + "navigationBarBackgroundColor": "#ffffff", + "navigationBarTextStyle": "black", + "usingComponents": {} +} + diff --git a/mini_program/farm-monitor-dashboard/pages/device/eartag/eartag.wxml b/mini_program/farm-monitor-dashboard/pages/device/eartag/eartag.wxml index bcc4dfc..d475838 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/eartag/eartag.wxml +++ b/mini_program/farm-monitor-dashboard/pages/device/eartag/eartag.wxml @@ -1,146 +1,106 @@ - - - - - - 🔍 - - - - + - - - - - - - {{item.name}}:{{item.count}} - - - - - - - - 耳标编号: {{item.eartagNumber}} - - {{item.isBound ? '已绑定' : '未绑定'}} - - - - - - 设备电量/%: - {{item.batteryLevel}} - - - - 设备温度/°C: - {{item.temperature}} - - - - 被采集主机: - {{item.hostNumber}} - - - - 总运动量: - {{item.totalMovement}} - - - - 今日运动量: - {{item.todayMovement}} - - - - 佩戴状态: - {{item.wearStatus}} - - - - 设备状态: - {{item.deviceStatus}} - - - - 位置信息: - {{item.location}} - - - - 数据更新时间: - {{item.updateTime}} - - - - - - - 📱 - 暂无耳标数据 - - - - - - - 加载中... - - - - - - 共 {{totalCount}} 条记录，第 {{currentPage}}/{{totalPages}} 页 - - - - - - 上一页 - - - - - - {{item.text}} - - - - - - 下一页 - - - - + + + + + + + ✕ + + + + + + + 共 {{total}} 条数据 + 第 {{page}}/{{totalPages}} 页 + + + + + + + {{item.eartagNumber || item.cid || item.number}} + + {{item.deviceStatus || '离线'}} + + + + + 绑定状态： + {{item.bindingStatus || '未绑定'}} + + + 佩戴状态： + {{item.wearStatus || (item.is_wear ? '已佩戴' : '未佩戴')}} + + + 采集主机： + {{item.collectedHost || item.sid || '-'}} + + + 电量： + {{item.battery || item.voltage || 0}}% + + + 温度： + {{item.temperature || '-'}}℃ + + + 今日运动量： + {{item.dailyMovement || 0}} + + + 定位： + {{item.location || item.gps_state || '-'}} + + + 更新时间： + {{item.lastUpdate || item.updateTime || '-'}} + + + + + + + 暂无数据 + + + + + 加载中... + + + + + + + 上一页 + + + + + + {{index + 1}} + + + ... + + + + + + 下一页 + + + diff --git a/mini_program/farm-monitor-dashboard/pages/device/eartag/eartag.wxss b/mini_program/farm-monitor-dashboard/pages/device/eartag/eartag.wxss index adac604..2b62ba2 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/eartag/eartag.wxss +++ b/mini_program/farm-monitor-dashboard/pages/device/eartag/eartag.wxss @@ -1,285 +1,2 @@ -/* pages/device/eartag/eartag.wxss */ -.eartag-container { - background: #ffffff; - min-height: 100vh; -} - -/* 顶部搜索和添加区域 */ -.header-section { - display: flex; - align-items: center; - padding: 24rpx 32rpx; - background: #3cc51f; - gap: 16rpx; -} - -.search-box { - flex: 1; - display: flex; - align-items: center; - background: #ffffff; - border-radius: 24rpx; - padding: 16rpx 20rpx; - gap: 12rpx; -} - -.search-icon { - font-size: 28rpx; - color: #999; -} - -.search-input { - flex: 1; - font-size: 28rpx; - color: #333; -} - -.add-btn { - width: 80rpx; - height: 80rpx; - background: #ffffff; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); -} - -.add-icon { - font-size: 32rpx; - color: #3cc51f; - font-weight: bold; -} - -/* 筛选标签 */ -.filter-tabs { - display: flex; - background: #ffffff; - padding: 0 32rpx; - border-bottom: 1rpx solid #f0f0f0; -} - -.filter-tab { - flex: 1; - text-align: center; - padding: 24rpx 0; - font-size: 28rpx; - color: #666; - position: relative; - border-bottom: 4rpx solid transparent; -} - -.filter-tab.active { - color: #3cc51f; - border-bottom-color: #3cc51f; - font-weight: 500; -} - -/* 耳标列表 */ -.eartag-list { - padding: 24rpx 32rpx; -} - -.eartag-item { - background: #ffffff; - border-radius: 12rpx; - padding: 24rpx; - margin-bottom: 16rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); - border: 1rpx solid #f0f0f0; -} - -.eartag-item:active { - background: #f8f9fa; - transform: scale(0.98); -} - -.eartag-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20rpx; - padding-bottom: 16rpx; - border-bottom: 1rpx solid #f0f0f0; -} - -.eartag-number { - font-size: 32rpx; - font-weight: bold; - color: #333; -} - -.bind-status { - padding: 8rpx 16rpx; - border-radius: 16rpx; - font-size: 24rpx; - font-weight: 500; -} - -.bind-status.bound { - background: #52c41a; - color: #ffffff; -} - -.bind-status.unbound { - background: #1890ff; - color: #ffffff; -} - -.eartag-details { - display: flex; - flex-direction: column; - gap: 12rpx; -} - -.detail-row { - display: flex; - justify-content: space-between; - align-items: center; -} - -.detail-label { - font-size: 28rpx; - color: #666; - flex: 1; -} - -.detail-value { - font-size: 28rpx; - color: #333; - font-weight: 500; - text-align: right; - flex: 1; -} - -/* 空状态 */ -.empty-state { - text-align: center; - padding: 120rpx 32rpx; - color: #999; -} - -.empty-icon { - font-size: 80rpx; - display: block; - margin-bottom: 20rpx; -} - -.empty-text { - font-size: 28rpx; -} - -/* 加载状态 */ -.loading-container { - text-align: center; - padding: 80rpx; -} - -.loading-spinner { - width: 48rpx; - height: 48rpx; - border: 4rpx solid #f0f0f0; - border-top: 4rpx solid #3cc51f; - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 20rpx; -} - -.loading-text { - font-size: 28rpx; - color: #999; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* 响应式设计 */ -@media (max-width: 375px) { - .header-section { - padding: 20rpx 24rpx; - } - - .eartag-list { - padding: 20rpx 24rpx; - } - - .eartag-item { - padding: 20rpx; - } - - .eartag-number { - font-size: 28rpx; - } - - .detail-label, - .detail-value { - font-size: 26rpx; - } -} - -/* 分页组件样式 */ -.pagination-container { - padding: 32rpx; - background: #ffffff; - border-top: 1rpx solid #f0f0f0; -} - -.pagination-info { - text-align: center; - margin-bottom: 24rpx; - font-size: 24rpx; - color: #666; -} - -.pagination-controls { - display: flex; - align-items: center; - justify-content: center; - gap: 16rpx; -} - -.pagination-btn { - padding: 16rpx 24rpx; - background: #f5f5f5; - border-radius: 8rpx; - font-size: 26rpx; - color: #333; - text-align: center; - min-width: 120rpx; -} - -.pagination-btn.disabled { - background: #f0f0f0; - color: #ccc; -} - -.pagination-pages { - display: flex; - gap: 8rpx; -} - -.pagination-page { - width: 60rpx; - height: 60rpx; - display: flex; - align-items: center; - justify-content: center; - background: #f5f5f5; - border-radius: 8rpx; - font-size: 24rpx; - color: #333; - text-align: center; -} - -.pagination-page.active { - background: #3cc51f; - color: #ffffff; -} - -.pagination-page.ellipsis { - background: transparent; - color: #999; - font-weight: bold; -} \ No newline at end of file +/* pages/device/eartag/eartag.wxss - 智能耳标样式 */ +@import "../collar/collar.wxss"; diff --git a/mini_program/farm-monitor-dashboard/pages/device/fence/fence-new.wxml b/mini_program/farm-monitor-dashboard/pages/device/fence/fence-new.wxml index b9bfce9..cf414fb 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/fence/fence-new.wxml +++ b/mini_program/farm-monitor-dashboard/pages/device/fence/fence-new.wxml @@ -1,183 +1,183 @@ - - - - - - ‹ - - 电子围栏 - - ⋯ - ⚙ - ⊙ - - - - - - - - 显示牧场 - - - - - - - - - - 智能采集器: - {{deviceStats.collectors}} - - - 智能设备: - {{deviceStats.devices}} - - - - - - 切换地图 - - - - - - - 📍 - {{item.name}} - - - - - - - - {{currentLocation.name || '各德'}} - - - 设备:{{deviceStats.total || '24065000912'}}更多>> - - - - - - - - {{isCreatingFence ? '新建围栏' : '围栏详情'}} - × - - - - - - 围栏名称: - - - - 围栏类型: - - {{fenceTypes[newFence.typeIndex] || '请选择类型'}} - - - - 描述: - - - - 坐标点 ({{newFence.coordinates.length}}): - - - 点{{index + 1}}: {{item.lng}}, {{item.lat}} - 删除 - - - - - - - - - - - - 围栏名称: - {{selectedFence.name}} - - - 围栏类型: - {{selectedFence.type}} - - - 面积: - {{selectedFence.area}}平方米 - - - 放牧状态: - {{selectedFence.grazingStatus}} - - - 围栏内数量: - {{selectedFence.insideCount}} - - - 围栏外数量: - {{selectedFence.outsideCount}} - - - - - - - - - - - - - {{fabExpanded ? '×' : '+'}} - - - - 📍 - 新建围栏 - - - 🔄 - 刷新数据 - - - - - - - - {{loadingText}} - - + + + + + + ‹ + + 电子围栏 + + ⋯ + ⚙ + ⊙ + + + + + + + + 显示牧场 + + + + + + + + + + 智能采集器: + {{deviceStats.collectors}} + + + 智能设备: + {{deviceStats.devices}} + + + + + + 切换地图 + + + + + + + 📍 + {{item.name}} + + + + + + + + {{currentLocation.name || '各德'}} + + + 设备:{{deviceStats.total || '24065000912'}}更多>> + + + + + + + + {{isCreatingFence ? '新建围栏' : '围栏详情'}} + × + + + + + + 围栏名称: + + + + 围栏类型: + + {{fenceTypes[newFence.typeIndex] || '请选择类型'}} + + + + 描述: + + + + 坐标点 ({{newFence.coordinates.length}}): + + + 点{{index + 1}}: {{item.lng}}, {{item.lat}} + 删除 + + + + + + + + + + + + 围栏名称: + {{selectedFence.name}} + + + 围栏类型: + {{selectedFence.type}} + + + 面积: + {{selectedFence.area}}平方米 + + + 放牧状态: + {{selectedFence.grazingStatus}} + + + 围栏内数量: + {{selectedFence.insideCount}} + + + 围栏外数量: + {{selectedFence.outsideCount}} + + + + + + + + + + + + + {{fabExpanded ? '×' : '+'}} + + + + 📍 + 新建围栏 + + + 🔄 + 刷新数据 + + + + + + + + {{loadingText}} + + \ No newline at end of file diff --git a/mini_program/farm-monitor-dashboard/pages/device/fence/fence-new.wxss b/mini_program/farm-monitor-dashboard/pages/device/fence/fence-new.wxss index 0d96de8..afefcb7 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/fence/fence-new.wxss +++ b/mini_program/farm-monitor-dashboard/pages/device/fence/fence-new.wxss @@ -1,473 +1,473 @@ -/* pages/device/fence/fence-new.wxss */ - -.fence-container { - width: 100%; - height: 100vh; - background-color: #f5f5f5; - position: relative; - overflow: hidden; -} - -/* 顶部标题栏 */ -.header { - display: flex; - align-items: center; - justify-content: space-between; - height: 88rpx; - background: linear-gradient(135deg, #7CB342, #8BC34A); - color: white; - padding: 0 32rpx; - position: relative; - z-index: 100; -} - -.header-left { - display: flex; - align-items: center; -} - -.back-icon { - font-size: 48rpx; - font-weight: bold; -} - -.header-title { - font-size: 36rpx; - font-weight: bold; -} - -.header-right { - display: flex; - align-items: center; - gap: 24rpx; -} - -.menu-icon, .settings-icon, .location-icon { - font-size: 32rpx; -} - -/* 地图容器 */ -.map-container { - width: 100%; - height: calc(100vh - 88rpx); - position: relative; -} - -.show-farm-btn { - position: absolute; - top: 20rpx; - left: 20rpx; - background: #7CB342; - color: white; - padding: 16rpx 32rpx; - border-radius: 24rpx; - font-size: 28rpx; - z-index: 10; - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); -} - -.fence-map { - width: 100%; - height: 100%; -} - -/* 地图控件 */ -.map-controls { - position: absolute; - top: 20rpx; - left: 20rpx; - right: 20rpx; - z-index: 5; -} - -.device-stats { - position: absolute; - top: 80rpx; - left: 0; - background: rgba(0, 0, 0, 0.7); - color: white; - padding: 16rpx 24rpx; - border-radius: 12rpx; - font-size: 24rpx; -} - -.stat-item { - display: flex; - margin-bottom: 8rpx; -} - -.stat-item:last-child { - margin-bottom: 0; -} - -.stat-label { - margin-right: 16rpx; -} - -.stat-value { - font-weight: bold; -} - -.switch-map-btn { - position: absolute; - top: 0; - right: 0; - background: #7CB342; - color: white; - padding: 16rpx 32rpx; - border-radius: 24rpx; - font-size: 28rpx; - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); -} - -/* 位置标记 */ -.location-markers { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; -} - -.location-marker { - position: absolute; - display: flex; - flex-direction: column; - align-items: center; -} - -.marker-icon { - font-size: 32rpx; - color: #f5222d; -} - -.marker-label { - background: rgba(0, 0, 0, 0.7); - color: white; - padding: 4rpx 12rpx; - border-radius: 8rpx; - font-size: 20rpx; - margin-top: 4rpx; -} - -/* 底部信息栏 */ -.bottom-info { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background: rgba(255, 255, 255, 0.95); - padding: 24rpx 32rpx; - border-top: 1rpx solid #e8e8e8; -} - -.location-info { - margin-bottom: 12rpx; -} - -.location-name { - font-size: 32rpx; - font-weight: bold; - color: #333; -} - -.coordinates-info { - display: flex; - align-items: center; -} - -.coordinates { - font-size: 24rpx; - color: #1890ff; -} - -/* 操作面板 */ -.operation-panel { - position: fixed; - bottom: 0; - left: 0; - right: 0; - background: white; - border-radius: 24rpx 24rpx 0 0; - box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1); - z-index: 200; - max-height: 80vh; - overflow-y: auto; -} - -.panel-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 32rpx; - border-bottom: 1rpx solid #f0f0f0; -} - -.panel-title { - font-size: 36rpx; - font-weight: bold; - color: #333; -} - -.panel-close { - font-size: 48rpx; - color: #999; -} - -.panel-content { - padding: 32rpx; -} - -/* 创建围栏表单 */ -.create-fence-form { - display: flex; - flex-direction: column; - gap: 32rpx; -} - -.form-item { - display: flex; - flex-direction: column; - gap: 16rpx; -} - -.form-label { - font-size: 28rpx; - color: #333; - font-weight: bold; -} - -.form-input, .form-textarea { - padding: 24rpx; - border: 1rpx solid #d9d9d9; - border-radius: 12rpx; - font-size: 28rpx; - background: #fafafa; -} - -.form-textarea { - min-height: 120rpx; - resize: none; -} - -.form-picker { - padding: 24rpx; - border: 1rpx solid #d9d9d9; - border-radius: 12rpx; - background: #fafafa; -} - -.picker-text { - font-size: 28rpx; - color: #333; -} - -.coordinates-list { - display: flex; - flex-direction: column; - gap: 16rpx; - max-height: 200rpx; - overflow-y: auto; -} - -.coordinate-item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 16rpx; - background: #f5f5f5; - border-radius: 8rpx; - font-size: 24rpx; -} - -.remove-point { - color: #f5222d; - font-size: 24rpx; -} - -.form-actions { - display: flex; - gap: 24rpx; - margin-top: 32rpx; -} - -.btn-cancel, .btn-save { - flex: 1; - padding: 24rpx; - border-radius: 12rpx; - font-size: 28rpx; - border: none; -} - -.btn-cancel { - background: #f5f5f5; - color: #666; -} - -.btn-save { - background: #7CB342; - color: white; -} - -.btn-save:disabled { - background: #d9d9d9; - color: #999; -} - -/* 围栏详情 */ -.fence-detail { - display: flex; - flex-direction: column; - gap: 24rpx; -} - -.detail-item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 24rpx 0; - border-bottom: 1rpx solid #f0f0f0; -} - -.detail-item:last-child { - border-bottom: none; -} - -.detail-label { - font-size: 28rpx; - color: #666; -} - -.detail-value { - font-size: 28rpx; - color: #333; - font-weight: bold; -} - -.detail-actions { - display: flex; - gap: 24rpx; - margin-top: 32rpx; -} - -.btn-edit, .btn-delete { - flex: 1; - padding: 24rpx; - border-radius: 12rpx; - font-size: 28rpx; - border: none; -} - -.btn-edit { - background: #1890ff; - color: white; -} - -.btn-delete { - background: #f5222d; - color: white; -} - -/* 浮动操作按钮 */ -.fab-container { - position: fixed; - bottom: 120rpx; - right: 32rpx; - z-index: 150; -} - -.fab-main { - width: 112rpx; - height: 112rpx; - background: #7CB342; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 8rpx 24rpx rgba(124, 179, 66, 0.4); -} - -.fab-icon { - font-size: 48rpx; - color: white; - font-weight: bold; -} - -.fab-menu { - position: absolute; - bottom: 140rpx; - right: 0; - display: flex; - flex-direction: column; - gap: 16rpx; -} - -.fab-item { - display: flex; - align-items: center; - gap: 16rpx; - background: white; - padding: 16rpx 24rpx; - border-radius: 24rpx; - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); - white-space: nowrap; -} - -.fab-item-icon { - font-size: 32rpx; -} - -.fab-item-text { - font-size: 24rpx; - color: #333; -} - -/* 加载提示 */ -.loading-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 300; -} - -.loading-content { - background: white; - padding: 48rpx; - border-radius: 16rpx; - display: flex; - align-items: center; - gap: 24rpx; -} - -.loading-text { - font-size: 28rpx; - color: #333; -} - -/* 响应式调整 */ -@media (max-width: 750rpx) { - .header { - height: 80rpx; - padding: 0 24rpx; - } - - .header-title { - font-size: 32rpx; - } - - .map-container { - height: calc(100vh - 80rpx); - } - - .fab-container { - bottom: 100rpx; - right: 24rpx; - } +/* pages/device/fence/fence-new.wxss */ + +.fence-container { + width: 100%; + height: 100vh; + background-color: #f5f5f5; + position: relative; + overflow: hidden; +} + +/* 顶部标题栏 */ +.header { + display: flex; + align-items: center; + justify-content: space-between; + height: 88rpx; + background: linear-gradient(135deg, #7CB342, #8BC34A); + color: white; + padding: 0 32rpx; + position: relative; + z-index: 100; +} + +.header-left { + display: flex; + align-items: center; +} + +.back-icon { + font-size: 48rpx; + font-weight: bold; +} + +.header-title { + font-size: 36rpx; + font-weight: bold; +} + +.header-right { + display: flex; + align-items: center; + gap: 24rpx; +} + +.menu-icon, .settings-icon, .location-icon { + font-size: 32rpx; +} + +/* 地图容器 */ +.map-container { + width: 100%; + height: calc(100vh - 88rpx); + position: relative; +} + +.show-farm-btn { + position: absolute; + top: 20rpx; + left: 20rpx; + background: #7CB342; + color: white; + padding: 16rpx 32rpx; + border-radius: 24rpx; + font-size: 28rpx; + z-index: 10; + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); +} + +.fence-map { + width: 100%; + height: 100%; +} + +/* 地图控件 */ +.map-controls { + position: absolute; + top: 20rpx; + left: 20rpx; + right: 20rpx; + z-index: 5; +} + +.device-stats { + position: absolute; + top: 80rpx; + left: 0; + background: rgba(0, 0, 0, 0.7); + color: white; + padding: 16rpx 24rpx; + border-radius: 12rpx; + font-size: 24rpx; +} + +.stat-item { + display: flex; + margin-bottom: 8rpx; +} + +.stat-item:last-child { + margin-bottom: 0; +} + +.stat-label { + margin-right: 16rpx; +} + +.stat-value { + font-weight: bold; +} + +.switch-map-btn { + position: absolute; + top: 0; + right: 0; + background: #7CB342; + color: white; + padding: 16rpx 32rpx; + border-radius: 24rpx; + font-size: 28rpx; + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); +} + +/* 位置标记 */ +.location-markers { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.location-marker { + position: absolute; + display: flex; + flex-direction: column; + align-items: center; +} + +.marker-icon { + font-size: 32rpx; + color: #f5222d; +} + +.marker-label { + background: rgba(0, 0, 0, 0.7); + color: white; + padding: 4rpx 12rpx; + border-radius: 8rpx; + font-size: 20rpx; + margin-top: 4rpx; +} + +/* 底部信息栏 */ +.bottom-info { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: rgba(255, 255, 255, 0.95); + padding: 24rpx 32rpx; + border-top: 1rpx solid #e8e8e8; +} + +.location-info { + margin-bottom: 12rpx; +} + +.location-name { + font-size: 32rpx; + font-weight: bold; + color: #333; +} + +.coordinates-info { + display: flex; + align-items: center; +} + +.coordinates { + font-size: 24rpx; + color: #1890ff; +} + +/* 操作面板 */ +.operation-panel { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: white; + border-radius: 24rpx 24rpx 0 0; + box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1); + z-index: 200; + max-height: 80vh; + overflow-y: auto; +} + +.panel-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 32rpx; + border-bottom: 1rpx solid #f0f0f0; +} + +.panel-title { + font-size: 36rpx; + font-weight: bold; + color: #333; +} + +.panel-close { + font-size: 48rpx; + color: #999; +} + +.panel-content { + padding: 32rpx; +} + +/* 创建围栏表单 */ +.create-fence-form { + display: flex; + flex-direction: column; + gap: 32rpx; +} + +.form-item { + display: flex; + flex-direction: column; + gap: 16rpx; +} + +.form-label { + font-size: 28rpx; + color: #333; + font-weight: bold; +} + +.form-input, .form-textarea { + padding: 24rpx; + border: 1rpx solid #d9d9d9; + border-radius: 12rpx; + font-size: 28rpx; + background: #fafafa; +} + +.form-textarea { + min-height: 120rpx; + resize: none; +} + +.form-picker { + padding: 24rpx; + border: 1rpx solid #d9d9d9; + border-radius: 12rpx; + background: #fafafa; +} + +.picker-text { + font-size: 28rpx; + color: #333; +} + +.coordinates-list { + display: flex; + flex-direction: column; + gap: 16rpx; + max-height: 200rpx; + overflow-y: auto; +} + +.coordinate-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16rpx; + background: #f5f5f5; + border-radius: 8rpx; + font-size: 24rpx; +} + +.remove-point { + color: #f5222d; + font-size: 24rpx; +} + +.form-actions { + display: flex; + gap: 24rpx; + margin-top: 32rpx; +} + +.btn-cancel, .btn-save { + flex: 1; + padding: 24rpx; + border-radius: 12rpx; + font-size: 28rpx; + border: none; +} + +.btn-cancel { + background: #f5f5f5; + color: #666; +} + +.btn-save { + background: #7CB342; + color: white; +} + +.btn-save:disabled { + background: #d9d9d9; + color: #999; +} + +/* 围栏详情 */ +.fence-detail { + display: flex; + flex-direction: column; + gap: 24rpx; +} + +.detail-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 24rpx 0; + border-bottom: 1rpx solid #f0f0f0; +} + +.detail-item:last-child { + border-bottom: none; +} + +.detail-label { + font-size: 28rpx; + color: #666; +} + +.detail-value { + font-size: 28rpx; + color: #333; + font-weight: bold; +} + +.detail-actions { + display: flex; + gap: 24rpx; + margin-top: 32rpx; +} + +.btn-edit, .btn-delete { + flex: 1; + padding: 24rpx; + border-radius: 12rpx; + font-size: 28rpx; + border: none; +} + +.btn-edit { + background: #1890ff; + color: white; +} + +.btn-delete { + background: #f5222d; + color: white; +} + +/* 浮动操作按钮 */ +.fab-container { + position: fixed; + bottom: 120rpx; + right: 32rpx; + z-index: 150; +} + +.fab-main { + width: 112rpx; + height: 112rpx; + background: #7CB342; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 8rpx 24rpx rgba(124, 179, 66, 0.4); +} + +.fab-icon { + font-size: 48rpx; + color: white; + font-weight: bold; +} + +.fab-menu { + position: absolute; + bottom: 140rpx; + right: 0; + display: flex; + flex-direction: column; + gap: 16rpx; +} + +.fab-item { + display: flex; + align-items: center; + gap: 16rpx; + background: white; + padding: 16rpx 24rpx; + border-radius: 24rpx; + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); + white-space: nowrap; +} + +.fab-item-icon { + font-size: 32rpx; +} + +.fab-item-text { + font-size: 24rpx; + color: #333; +} + +/* 加载提示 */ +.loading-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 300; +} + +.loading-content { + background: white; + padding: 48rpx; + border-radius: 16rpx; + display: flex; + align-items: center; + gap: 24rpx; +} + +.loading-text { + font-size: 28rpx; + color: #333; +} + +/* 响应式调整 */ +@media (max-width: 750rpx) { + .header { + height: 80rpx; + padding: 0 24rpx; + } + + .header-title { + font-size: 32rpx; + } + + .map-container { + height: calc(100vh - 80rpx); + } + + .fab-container { + bottom: 100rpx; + right: 24rpx; + } } \ No newline at end of file diff --git a/mini_program/farm-monitor-dashboard/pages/device/fence/fence.js b/mini_program/farm-monitor-dashboard/pages/device/fence/fence.js new file mode 100644 index 0000000..6043df3 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/device/fence/fence.js @@ -0,0 +1,400 @@ +// pages/device/fence/fence.js +const API = require('../../../utils/api').API + +Page({ + data: { + list: [], + total: 0, + page: 1, + limit: 10, + totalPages: 0, + loading: false, + refreshing: false, + searchValue: '', + + // 地图相关 + showMap: false, // 是否显示地图视图 + selectedFence: null, // 当前选中的围栏 + mapCenter: { + latitude: 38.5248248, + longitude: 106.2267664 + }, + mapMarkers: [], // 地图标记点 + mapPolygons: [], // 地图多边形 + mapScale: 12 + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + this.loadData() + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow() { + // 可选：每次显示页面时刷新数据 + // this.loadData() + }, + + /** + * 加载数据 + */ + async loadData(isRefresh = false) { + if (isRefresh) { + this.setData({ refreshing: true }) + } + + this.setData({ loading: true }) + + try { + const params = { + page: this.data.page, + limit: this.data.limit, + _t: Date.now(), + refresh: isRefresh + } + + // 如果有搜索条件，添加到参数中 + if (this.data.searchValue) { + params.name = this.data.searchValue.trim() // 按围栏名称精确查询 + params.number = this.data.searchValue.trim() // 兼容参数 + } + + console.log('请求参数:', params) + + const res = await API.getFenceList(params) + + console.log('电子围栏数据:', res) + + // 根据实际返回的数据结构调整 + let list = res.data?.list || res.data || res.list || [] + const total = res.data?.total || res.total || list.length || 0 + + // 数据预处理：确保所有字段都存在 + list = list.map(item => { + return { + ...item, + // 确保必要字段存在 + id: item.id, + name: item.name || '未命名围栏', + type: item.type || '围栏', + description: item.description || '', + isActive: item.isActive !== undefined ? item.isActive : true, + grazingStatus: item.grazingStatus || '未知', + area: item.area || '0', + center: item.center || { lng: '106.2267664', lat: '38.5248248' }, + coordinates: item.coordinates || [], + insideCount: item.insideCount || 0, + outsideCount: item.outsideCount || 0, + createdAt: item.createdAt || item.created_at || '', + updatedAt: item.updatedAt || item.updated_at || '' + } + }) + + // 如果有搜索条件，进行前端精确过滤（确保精确匹配） + if (this.data.searchValue && this.data.searchValue.trim()) { + const searchKey = this.data.searchValue.trim() + list = list.filter(item => { + const name = String(item.name || '') + // 精确匹配：完全相等 + return name === searchKey + }) + + console.log('精确查找结果:', list.length, '条') + + if (list.length === 0) { + wx.showToast({ + title: '未找到匹配的围栏', + icon: 'none', + duration: 2000 + }) + } + } + + const totalPages = Math.ceil((this.data.searchValue ? list.length : total) / this.data.limit) + + this.setData({ + list: list, + total: total, + totalPages: totalPages, + loading: false, + refreshing: false + }) + + // 停止下拉刷新 + if (isRefresh) { + wx.stopPullDownRefresh() + } + + } catch (error) { + console.error('加载数据失败:', error) + + this.setData({ + loading: false, + refreshing: false + }) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + if (isRefresh) { + wx.stopPullDownRefresh() + } + } + }, + + /** + * 搜索输入 + */ + onSearchInput(e) { + this.setData({ + searchValue: e.detail.value + }) + }, + + /** + * 执行搜索 + */ + handleSearch() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 清空搜索 + */ + clearSearch() { + this.setData({ + searchValue: '', + page: 1 + }) + this.loadData(true) + }, + + /** + * 切换页码 + */ + changePage(e) { + const page = e.currentTarget.dataset.page + if (page !== this.data.page && page >= 1 && page <= this.data.totalPages) { + this.setData({ page }) + this.loadData() + } + }, + + /** + * 上一页 + */ + prevPage() { + if (this.data.page > 1) { + this.setData({ page: this.data.page - 1 }) + this.loadData() + } + }, + + /** + * 下一页 + */ + nextPage() { + if (this.data.page < this.data.totalPages) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + } + }, + + /** + * 查看围栏详情（在地图上显示） + */ + viewDetail(e) { + const id = e.currentTarget.dataset.id + const index = e.currentTarget.dataset.index + console.log('查看围栏详情:', id) + + const fence = this.data.list[index] + if (!fence) { + wx.showToast({ + title: '围栏数据不存在', + icon: 'none' + }) + return + } + + // 切换到地图视图并显示该围栏 + this.showFenceOnMap(fence) + }, + + /** + * 切换视图：列表/地图 + */ + toggleView() { + const showMap = !this.data.showMap + this.setData({ showMap }) + + // 如果切换到地图视图，加载所有围栏到地图 + if (showMap && this.data.list.length > 0) { + this.loadAllFencesToMap() + } + }, + + /** + * 在地图上显示单个围栏 + */ + showFenceOnMap(fence) { + if (!fence || !fence.coordinates || fence.coordinates.length === 0) { + wx.showToast({ + title: '围栏坐标数据不完整', + icon: 'none' + }) + return + } + + // 转换坐标格式 + const points = fence.coordinates.map(coord => ({ + latitude: parseFloat(coord.lat), + longitude: parseFloat(coord.lng) + })) + + // 创建多边形 + const polygon = { + points: points, + strokeWidth: 3, + strokeColor: fence.isActive ? '#52c41a' : '#ff4d4f', + fillColor: fence.isActive ? '#52c41a33' : '#ff4d4f33' + } + + // 创建中心点标记 + const marker = { + id: fence.id, + latitude: parseFloat(fence.center.lat), + longitude: parseFloat(fence.center.lng), + title: fence.name, + iconPath: '/images/marker.png', + width: 30, + height: 30, + callout: { + content: `${fence.name}\n${fence.type}\n${fence.grazingStatus}`, + fontSize: 12, + borderRadius: 5, + padding: 8, + display: 'ALWAYS' + } + } + + this.setData({ + showMap: true, + selectedFence: fence, + mapCenter: { + latitude: parseFloat(fence.center.lat), + longitude: parseFloat(fence.center.lng) + }, + mapPolygons: [polygon], + mapMarkers: [marker], + mapScale: 14 + }) + }, + + /** + * 加载所有围栏到地图 + */ + loadAllFencesToMap() { + const polygons = [] + const markers = [] + + this.data.list.forEach(fence => { + if (fence.coordinates && fence.coordinates.length > 0) { + // 添加多边形 + const points = fence.coordinates.map(coord => ({ + latitude: parseFloat(coord.lat), + longitude: parseFloat(coord.lng) + })) + + polygons.push({ + points: points, + strokeWidth: 2, + strokeColor: fence.isActive ? '#52c41a' : '#ff4d4f', + fillColor: fence.isActive ? '#52c41a22' : '#ff4d4f22' + }) + + // 添加中心点标记 + markers.push({ + id: fence.id, + latitude: parseFloat(fence.center.lat), + longitude: parseFloat(fence.center.lng), + title: fence.name, + iconPath: '/images/marker.png', + width: 25, + height: 25 + }) + } + }) + + // 计算所有围栏的中心点 + let centerLat = 38.5248248 + let centerLng = 106.2267664 + + if (markers.length > 0) { + centerLat = markers.reduce((sum, m) => sum + m.latitude, 0) / markers.length + centerLng = markers.reduce((sum, m) => sum + m.longitude, 0) / markers.length + } + + this.setData({ + mapPolygons: polygons, + mapMarkers: markers, + mapCenter: { + latitude: centerLat, + longitude: centerLng + }, + mapScale: 10 + }) + }, + + /** + * 地图标记点击事件 + */ + onMarkerTap(e) { + const markerId = e.detail.markerId || e.markerId + console.log('点击标记:', markerId) + + const fence = this.data.list.find(f => f.id === markerId) + if (fence) { + this.setData({ selectedFence: fence }) + // 可以显示围栏详细信息 + wx.showModal({ + title: fence.name, + content: `类型：${fence.type}\n状态：${fence.grazingStatus}\n面积：${fence.area}平方米\n内部数量：${fence.insideCount}\n外部数量：${fence.outsideCount}`, + showCancel: false + }) + } + }, + + /** + * 地图区域变化事件 + */ + onRegionChange(e) { + console.log('地图区域变化:', e) + }, + + /** + * 下拉刷新 + */ + onPullDownRefresh() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 上拉加载更多 + */ + onReachBottom() { + if (this.data.page < this.data.totalPages && !this.data.loading) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + } + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/device/fence/fence.json b/mini_program/farm-monitor-dashboard/pages/device/fence/fence.json new file mode 100644 index 0000000..8738aa4 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/device/fence/fence.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "电子围栏", + "enablePullDownRefresh": true, + "backgroundTextStyle": "dark", + "backgroundColor": "#f6f6f6" +} + diff --git a/mini_program/farm-monitor-dashboard/pages/device/fence/fence.wxml b/mini_program/farm-monitor-dashboard/pages/device/fence/fence.wxml index 80b8c5b..49cb10e 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/fence/fence.wxml +++ b/mini_program/farm-monitor-dashboard/pages/device/fence/fence.wxml @@ -1,2 +1,163 @@ - -pages/device/fence/fence.wxml \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + {{selectedFence.name}} + + {{selectedFence.isActive ? '已启用' : '未启用'}} + + + + + 类型： + {{selectedFence.type}} + + + 状态： + {{selectedFence.grazingStatus}} + + + 面积： + {{selectedFence.area}}平方米 + + + 内部/外部： + {{selectedFence.insideCount}} / {{selectedFence.outsideCount}} + + + + + + + + + + 加载中... + + + + + + + {{item.name}} + + {{item.isActive ? '已启用' : '未启用'}} + + + + + 围栏类型： + {{item.type}} + + + 放牧状态： + {{item.grazingStatus}} + + + 围栏面积： + {{item.area}}平方米 + + + 中心坐标： + {{item.center.lat}}, {{item.center.lng}} + + + 内部数量： + {{item.insideCount}}个 + + + 外部数量： + {{item.outsideCount}}个 + + + 描述： + {{item.description}} + + + 创建时间： + {{item.createdAt}} + + + + 点击在地图上查看 🗺️ + + + + + + 📍 + 暂无电子围栏数据 + + + + + + + + + {{index + 1}} + + + + + + + + 共 {{total}} 条数据，当前第 {{page}}/{{totalPages}} 页 + + + diff --git a/mini_program/farm-monitor-dashboard/pages/device/fence/fence.wxss b/mini_program/farm-monitor-dashboard/pages/device/fence/fence.wxss new file mode 100644 index 0000000..a56f068 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/device/fence/fence.wxss @@ -0,0 +1,355 @@ +/* pages/device/fence/fence.wxss */ +.page-container { + min-height: 100vh; + background-color: #f6f6f6; +} + +/* 顶部操作栏 */ +.top-bar { + background-color: #fff; + padding: 20rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); +} + +/* 搜索栏样式 */ +.search-bar { + display: flex; + align-items: center; + margin-bottom: 20rpx; +} + +.search-input { + flex: 1; + height: 60rpx; + padding: 0 20rpx; + background-color: #f5f5f5; + border-radius: 8rpx; + font-size: 28rpx; +} + +.search-btn { + width: 120rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #52c41a; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.search-btn::after { + border: none; +} + +.clear-btn { + width: 100rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin-left: 20rpx; + background-color: #ff4d4f; + color: #fff; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.clear-btn::after { + border: none; +} + +/* 视图切换按钮 */ +.view-toggle { + display: flex; + gap: 20rpx; + justify-content: center; +} + +.toggle-btn { + flex: 1; + height: 60rpx; + line-height: 60rpx; + padding: 0; + background-color: #f5f5f5; + color: #666; + font-size: 28rpx; + border-radius: 8rpx; + border: none; +} + +.toggle-btn::after { + border: none; +} + +.toggle-btn.active { + background-color: #52c41a; + color: #fff; + font-weight: bold; +} + +/* 地图容器 */ +.map-container { + position: relative; + width: 100%; + height: calc(100vh - 200rpx); +} + +.fence-map { + width: 100%; + height: 100%; +} + +/* 地图信息卡片 */ +.map-info-card { + position: absolute; + bottom: 20rpx; + left: 20rpx; + right: 20rpx; + background-color: rgba(255, 255, 255, 0.95); + border-radius: 12rpx; + padding: 24rpx; + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); +} + +.info-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16rpx; + padding-bottom: 12rpx; + border-bottom: 1rpx solid #f0f0f0; +} + +.info-title { + font-size: 30rpx; + font-weight: bold; + color: #333; +} + +.info-status { + padding: 6rpx 16rpx; + font-size: 24rpx; + border-radius: 20rpx; + font-weight: 500; +} + +.info-content { + display: flex; + flex-direction: column; + gap: 12rpx; +} + +.info-row { + display: flex; + font-size: 26rpx; +} + +.info-label { + color: #999; + min-width: 140rpx; + flex-shrink: 0; +} + +.info-value { + color: #333; + flex: 1; +} + +/* 列表容器 */ +.list-container { + padding: 20rpx; +} + +/* 加载状态 */ +.loading-container { + display: flex; + justify-content: center; + align-items: center; + height: 400rpx; + color: #999; + font-size: 28rpx; +} + +/* 围栏列表样式 */ +.fence-list { + padding-bottom: 20rpx; +} + +.list-item { + background-color: #fff; + margin-bottom: 20rpx; + border-radius: 12rpx; + overflow: hidden; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); + transition: all 0.3s; +} + +.list-item:active { + transform: scale(0.98); + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); +} + +.item-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 24rpx 24rpx 16rpx; + border-bottom: 1rpx solid #f0f0f0; +} + +.item-title { + font-size: 32rpx; + font-weight: bold; + color: #333; +} + +.item-status { + padding: 8rpx 20rpx; + font-size: 24rpx; + border-radius: 20rpx; + font-weight: 500; +} + +.status-active { + background-color: #f6ffed; + color: #52c41a; + border: 1rpx solid #b7eb8f; +} + +.status-inactive { + background-color: #fff1f0; + color: #ff4d4f; + border: 1rpx solid #ffccc7; +} + +.item-content { + display: flex; + flex-direction: column; + gap: 16rpx; + padding: 20rpx 24rpx; +} + +.item-row { + display: flex; + align-items: flex-start; + font-size: 28rpx; +} + +.item-label { + color: #999; + min-width: 160rpx; + flex-shrink: 0; +} + +.item-value { + color: #333; + flex: 1; + word-break: break-all; +} + +.item-footer { + padding: 16rpx 24rpx; + background-color: #f8f8f8; + text-align: center; + border-top: 1rpx solid #f0f0f0; +} + +.view-map-hint { + font-size: 26rpx; + color: #52c41a; + font-weight: 500; +} + +/* 空状态样式 */ +.empty-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 100rpx 0; +} + +.empty-icon { + font-size: 120rpx; + margin-bottom: 30rpx; + opacity: 0.3; +} + +.empty-text { + font-size: 28rpx; + color: #999; +} + +/* 分页样式 */ +.pagination { + display: flex; + align-items: center; + justify-content: center; + margin: 30rpx 0; + padding: 20rpx; + background-color: #fff; + border-radius: 12rpx; +} + +.page-btn { + width: 150rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + margin: 0 10rpx; + background-color: #52c41a; + color: #fff; + font-size: 26rpx; + border-radius: 8rpx; + border: none; +} + +.page-btn::after { + border: none; +} + +.page-btn[disabled] { + background-color: #d9d9d9; + color: #999; +} + +.page-numbers { + display: flex; + flex-wrap: wrap; + gap: 10rpx; + margin: 0 20rpx; + max-width: 400rpx; + justify-content: center; +} + +.page-number { + width: 60rpx; + height: 60rpx; + line-height: 60rpx; + text-align: center; + font-size: 26rpx; + color: #333; + background-color: #f5f5f5; + border-radius: 8rpx; +} + +.page-number.active { + background-color: #52c41a; + color: #fff; + font-weight: bold; +} + +/* 数据统计栏 */ +.stats-bar { + text-align: center; + padding: 20rpx; + margin-top: 20rpx; +} + +.stats-text { + font-size: 24rpx; + color: #999; +} diff --git a/mini_program/farm-monitor-dashboard/pages/device/host/host.js b/mini_program/farm-monitor-dashboard/pages/device/host/host.js new file mode 100644 index 0000000..b0cb941 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/device/host/host.js @@ -0,0 +1,210 @@ +// pages/device/host/host.js - 智能主机页面 +const { API } = require('../../../utils/api.js') + +Page({ + data: { + list: [], // 数据列表 + page: 1, // 当前页码 + limit: 10, // 每页数量 + total: 0, // 总数量 + totalPages: 0, // 总页数 + searchValue: '', // 搜索值 + loading: false, // 加载状态 + refreshing: false // 刷新状态 + }, + + onLoad() { + console.log('智能主机页面加载') + this.loadData() + }, + + onShow() { + console.log('智能主机页面显示') + }, + + onPullDownRefresh() { + this.setData({ page: 1, refreshing: true }) + this.loadData(true) + }, + + /** + * 加载数据 + */ + async loadData(isRefresh = false) { + if (this.data.loading) return + + this.setData({ loading: true }) + + try { + const params = { + page: this.data.page, + limit: this.data.limit, + _t: Date.now(), + refresh: isRefresh + } + + // 如果有搜索条件，添加到参数中 + if (this.data.searchValue) { + params.deviceNumber = this.data.searchValue.trim() // 按设备编号精确查询 + params.title = this.data.searchValue.trim() // 兼容参数 + params.number = this.data.searchValue.trim() // 兼容参数 + } + + console.log('请求参数:', params) + + const res = await API.getHostList(params) + + console.log('智能主机数据:', res) + + // 根据实际返回的数据结构调整 + let list = res.data?.list || res.data || res.list || [] + const total = res.data?.total || res.total || 0 + + // 预处理数据：确保 farmName 字段存在 + list = list.map(item => { + if (!item.farmName && item.farm && item.farm.name) { + item.farmName = item.farm.name + } + return item + }) + + // 如果有搜索条件，进行前端精确过滤（确保精确匹配） + if (this.data.searchValue && this.data.searchValue.trim()) { + const searchKey = this.data.searchValue.trim() + list = list.filter(item => { + const deviceNumber = String(item.deviceNumber || item.title || item.number || '') + // 精确匹配：完全相等 + return deviceNumber === searchKey + }) + + console.log('精确查找结果:', list.length, '条') + + if (list.length === 0) { + wx.showToast({ + title: '未找到匹配的设备', + icon: 'none', + duration: 2000 + }) + } + } + + const totalPages = Math.ceil((this.data.searchValue ? list.length : total) / this.data.limit) + + this.setData({ + list: list, + total: total, + totalPages: totalPages, + loading: false, + refreshing: false + }) + + // 停止下拉刷新 + if (isRefresh) { + wx.stopPullDownRefresh() + } + + } catch (error) { + console.error('加载数据失败:', error) + + this.setData({ + loading: false, + refreshing: false + }) + + wx.showToast({ + title: '加载失败', + icon: 'none' + }) + + if (isRefresh) { + wx.stopPullDownRefresh() + } + } + }, + + /** + * 搜索输入 + */ + onSearchInput(e) { + this.setData({ + searchValue: e.detail.value + }) + }, + + /** + * 执行搜索 + */ + handleSearch() { + this.setData({ page: 1 }) + this.loadData(true) + }, + + /** + * 清空搜索 + */ + clearSearch() { + this.setData({ + searchValue: '', + page: 1 + }) + this.loadData(true) + }, + + /** + * 切换页码 + */ + changePage(e) { + const page = e.currentTarget.dataset.page + if (page === this.data.page || page < 1 || page > this.data.totalPages) { + return + } + + this.setData({ page: page }) + this.loadData() + + // 滚动到顶部 + wx.pageScrollTo({ + scrollTop: 0, + duration: 300 + }) + }, + + /** + * 上一页 + */ + prevPage() { + if (this.data.page > 1) { + this.setData({ page: this.data.page - 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 下一页 + */ + nextPage() { + if (this.data.page < this.data.totalPages) { + this.setData({ page: this.data.page + 1 }) + this.loadData() + wx.pageScrollTo({ scrollTop: 0, duration: 300 }) + } + }, + + /** + * 查看详情 + */ + viewDetail(e) { + const id = e.currentTarget.dataset.id + wx.navigateTo({ + url: `/pages/device/host-detail/host-detail?id=${id}`, + fail: () => { + wx.showToast({ + title: '详情页面开发中', + icon: 'none' + }) + } + }) + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/device/host/host.json b/mini_program/farm-monitor-dashboard/pages/device/host/host.json new file mode 100644 index 0000000..018fab1 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/device/host/host.json @@ -0,0 +1,9 @@ +{ + "navigationBarTitleText": "智能主机", + "enablePullDownRefresh": true, + "backgroundColor": "#f5f5f5", + "navigationBarBackgroundColor": "#ffffff", + "navigationBarTextStyle": "black", + "usingComponents": {} +} + diff --git a/mini_program/farm-monitor-dashboard/pages/device/host/host.wxml b/mini_program/farm-monitor-dashboard/pages/device/host/host.wxml index 54d9b58..75fc39a 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/host/host.wxml +++ b/mini_program/farm-monitor-dashboard/pages/device/host/host.wxml @@ -1,177 +1,106 @@ - - - - - 🔍 - - - - - - - - - 搜索主机编号: {{searchValue}} - - - - - - 主机总数 - {{stats.total}} - - - 联网数量 - {{stats.online}} - - - 断网数量 - {{stats.offline}} - - - - - - - 搜索结果 - 找到匹配的设备 - - - - - 主机编号: {{searchResult.deviceNumberText}} - - {{searchResult.statusText}} - - - - - - - 设备电量: - {{searchResult.batteryText}} - - - - 设备信号值: - {{searchResult.signalText}} - - - - 设备温度: - {{searchResult.temperatureText}} - - - - 绑带状态: - {{searchResult.statusText}} - - - - 数据更新时间: - {{searchResult.updateTimeText}} - - - - - - - - 🔍 - 未找到主机编号为 "{{searchValue}}" 的设备 - - - - - - - - - - 主机编号: {{item.deviceNumberText}} - - {{item.statusText}} - - - - - - - 设备电量: - {{item.batteryText}} - - - - 设备信号值: - {{item.signalText}} - - - - 设备温度: - {{item.temperatureText}} - - - - 绑带状态: - {{item.statusText}} - - - - 数据更新时间: - {{item.updateTimeText}} - - - - - - - - - - 共 {{total}} 条记录，第 {{currentPage}}/{{totalPages}} 页 - - - - - - 上一页 - - - - - - {{item.text}} - - - - - - 下一页 - - - - - - - - - \ No newline at end of file + + + + + + + ✕ + + + + + + + 共 {{total}} 条数据 + 第 {{page}}/{{totalPages}} 页 + + + + + + + {{item.deviceNumber || item.title || item.number}} + + {{item.networkStatus || '未联网'}} + + + + + 养殖场： + {{item.farmName || '-'}} + + + SIM卡号： + {{item.simId || '-'}} + + + 信号强度： + {{item.signalValue || item.signal || '-'}} + + + GPS状态： + {{item.gpsStatus || '-'}} + + + 电量： + {{item.battery || item.voltage || 0}}% + + + 温度： + {{item.temperature || '-'}}℃ + + + 经纬度： + {{item.latitude}}, {{item.longitude}} + + + 更新时间： + {{item.updateTime || item.lastUpdate || '-'}} + + + + + + + 暂无数据 + + + + + 加载中... + + + + + + + 上一页 + + + + + + {{index + 1}} + + + ... + + + + + + 下一页 + + + diff --git a/mini_program/farm-monitor-dashboard/pages/device/host/host.wxss b/mini_program/farm-monitor-dashboard/pages/device/host/host.wxss index 6305ed9..b1513bd 100644 --- a/mini_program/farm-monitor-dashboard/pages/device/host/host.wxss +++ b/mini_program/farm-monitor-dashboard/pages/device/host/host.wxss @@ -1,370 +1,2 @@ -/* 智能主机页面样式 */ - -.container { - min-height: 100vh; - background: #f5f5f5; - padding-bottom: 120rpx; /* 为底部按钮留出空间 */ -} - -/* 搜索区域 */ -.search-section { - background: #52c41a; - padding: 20rpx; - margin-bottom: 20rpx; -} - -.search-box { - display: flex; - align-items: center; - background: white; - border-radius: 25rpx; - padding: 15rpx 20rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); - gap: 15rpx; -} - -.search-icon { - font-size: 32rpx; - color: #999; -} - -.search-input { - flex: 1; - font-size: 28rpx; - color: #333; - border: none; - outline: none; -} - -.search-input::placeholder { - color: #999; -} - -.search-btn { - background: linear-gradient(135deg, #52c41a, #73d13d); - color: white; - border: none; - border-radius: 20rpx; - padding: 12rpx 20rpx; - font-size: 24rpx; - font-weight: bold; - box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3); -} - -.clear-btn { - background: linear-gradient(135deg, #ff4d4f, #ff7875); - color: white; - border: none; - border-radius: 20rpx; - padding: 12rpx 20rpx; - font-size: 24rpx; - font-weight: bold; - box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3); -} - -.search-status { - background: linear-gradient(135deg, #e6f7ff, #bae7ff); - border: 2rpx solid #91d5ff; - border-radius: 12rpx; - padding: 20rpx; - margin: 0 20rpx 20rpx; - text-align: center; -} - -.search-status text { - color: #1890ff; - font-size: 28rpx; - font-weight: bold; -} - -.search-result { - margin: 0 20rpx 30rpx; -} - -.result-header { - background: linear-gradient(135deg, #f6ffed, #d9f7be); - border: 2rpx solid #b7eb8f; - border-radius: 12rpx; - padding: 20rpx; - margin-bottom: 20rpx; - text-align: center; -} - -.result-title { - display: block; - font-size: 32rpx; - font-weight: bold; - color: #52c41a; - margin-bottom: 10rpx; -} - -.result-subtitle { - display: block; - font-size: 24rpx; - color: #73d13d; -} - -.search-item { - border: 2rpx solid #52c41a; - box-shadow: 0 4rpx 16rpx rgba(82, 196, 26, 0.2); -} - -.no-result { - text-align: center; - padding: 80rpx 40rpx; - background: #fafafa; - border-radius: 12rpx; - margin: 0 20rpx 30rpx; -} - -.no-result-icon { - font-size: 80rpx; - margin-bottom: 30rpx; -} - -.no-result-text { - display: block; - font-size: 28rpx; - color: #666; - margin-bottom: 40rpx; - line-height: 1.5; -} - -.retry-btn { - background: linear-gradient(135deg, #52c41a, #73d13d); - color: white; - border: none; - border-radius: 25rpx; - padding: 20rpx 40rpx; - font-size: 28rpx; - font-weight: bold; - box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3); -} - -/* 统计卡片区域 */ -.stats-section { - display: flex; - justify-content: space-between; - padding: 0 20rpx; - margin-bottom: 20rpx; - gap: 15rpx; -} - -.stats-card { - flex: 1; - background: #f8f8f8; - border-radius: 12rpx; - padding: 20rpx; - text-align: center; - border: 1rpx solid #e8e8e8; -} - -.stats-label { - display: block; - font-size: 24rpx; - color: #666; - margin-bottom: 10rpx; -} - -.stats-value { - display: block; - font-size: 32rpx; - font-weight: bold; - color: #333; -} - -/* 主机设备列表 */ -.host-list { - padding: 0 20rpx; - margin-bottom: 30rpx; -} - -.host-item { - background: white; - border-radius: 12rpx; - padding: 25rpx; - margin-bottom: 20rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); - border: 1rpx solid #e8e8e8; -} - -.host-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20rpx; - padding-bottom: 15rpx; - border-bottom: 1rpx solid #f0f0f0; -} - -.host-number { - font-size: 32rpx; - font-weight: bold; - color: #333; -} - -.status-btn { - padding: 8rpx 16rpx; - border-radius: 6rpx; - font-size: 24rpx; - font-weight: bold; - border: 2rpx solid; -} - -.status-btn.online { - color: #1890ff; - border-color: #1890ff; - background: rgba(24, 144, 255, 0.1); -} - -.status-btn.offline { - color: #ff4d4f; - border-color: #ff4d4f; - background: rgba(255, 77, 79, 0.1); -} - -/* 设备详细信息 */ -.host-details { - display: flex; - flex-direction: column; - gap: 12rpx; -} - -.detail-row { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8rpx 0; -} - -.detail-label { - font-size: 28rpx; - color: #666; - min-width: 140rpx; -} - -.detail-value { - font-size: 28rpx; - color: #333; - font-weight: 500; -} - -/* 分页组件样式 */ -.pagination-container { - padding: 32rpx; - background: #ffffff; - border-top: 1rpx solid #f0f0f0; -} - -.pagination-info { - text-align: center; - margin-bottom: 24rpx; - font-size: 24rpx; - color: #666; -} - -.pagination-controls { - display: flex; - align-items: center; - justify-content: center; - gap: 16rpx; -} - -.pagination-btn { - padding: 16rpx 24rpx; - background: #f5f5f5; - border-radius: 8rpx; - font-size: 26rpx; - color: #333; - text-align: center; - min-width: 120rpx; -} - -.pagination-btn.disabled { - background: #f0f0f0; - color: #ccc; -} - -.pagination-pages { - display: flex; - gap: 8rpx; -} - -.pagination-page { - width: 60rpx; - height: 60rpx; - display: flex; - align-items: center; - justify-content: center; - background: #f5f5f5; - border-radius: 8rpx; - font-size: 24rpx; - color: #333; - text-align: center; -} - -.pagination-page.active { - background: #3cc51f; - color: #ffffff; -} - -.pagination-page.ellipsis { - background: transparent; - color: #999; - font-weight: bold; -} - -/* 底部操作按钮 */ -.footer-action { - position: fixed; - bottom: 0; - left: 0; - right: 0; - padding: 20rpx; - background: white; - border-top: 1rpx solid #e8e8e8; - box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1); -} - -.location-btn { - width: 100%; - background: #52c41a; - color: white; - border: none; - border-radius: 12rpx; - padding: 25rpx; - font-size: 32rpx; - font-weight: bold; - box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3); - transition: all 0.3s ease; -} - -.location-btn:active { - background: #389e0d; - transform: translateY(2rpx); - box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3); -} - -/* 加载状态 */ -.loading { - text-align: center; - padding: 40rpx; - color: #999; - font-size: 28rpx; -} - -/* 空状态 */ -.empty-state { - text-align: center; - padding: 80rpx 40rpx; - color: #999; -} - -.empty-state .empty-icon { - font-size: 80rpx; - margin-bottom: 20rpx; -} - -.empty-state .empty-text { - font-size: 28rpx; -} +/* pages/device/host/host.wxss - 智能主机样式 */ +@import "../collar/collar.wxss"; diff --git a/mini_program/farm-monitor-dashboard/pages/home/UI设计说明.md b/mini_program/farm-monitor-dashboard/pages/home/UI设计说明.md new file mode 100644 index 0000000..851c5f0 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/home/UI设计说明.md @@ -0,0 +1,231 @@ +# 首页UI设计说明 + +## ✅ 已完成的UI还原 + +根据提供的截图，我已经完成了首页的UI设计和开发，**严格按照图片样式实现**。 + +--- + +## 📱 UI结构说明 + +### 1. 顶部导航栏 +- **标题**：首页 +- **背景色**：白色 (#ffffff) +- **文字颜色**：黑色 + +### 2. 预警类型标签栏 +包含4个标签，支持切换： +- 项圈预警（默认选中） +- 耳标预警 +- 脚环预警 +- 主机预警 + +**样式特点：** +- 选中状态：蓝色文字 + 底部蓝色下划线 +- 未选中：灰色文字 +- 白色背景 + +### 3. 统计数据卡片区域 +采用**3x3网格布局**，使用渐变蓝色背景： + +**第一行：** +- 今日未被采集：6 +- 项圈绑带剪断：0 +- 电子围栏：3 + +**第二行：** +- 今日运动量偏高：0 +- 今日运动量偏低：3（红色标注） +- 传输频次过慢：0 + +**第三行：** +- 电量偏低：2 + +**样式特点：** +- 渐变蓝色背景 +- 半透明白色卡片 +- 圆角设计 +- 数字大而醒目 +- 告警数据用红色显示 + +### 4. 跳转生资保险 +- 独立白色卡片 +- 居中显示文字 +- 可点击 + +### 5. 智能设备区域 +**5个设备项，采用3列网格布局：** +- 智能项圈（黄色渐变图标） +- 智能耳标（蓝色渐变图标） +- 智能脚环（紫色渐变图标） +- 智能主机（浅蓝色渐变图标） +- 视频监控（橙色渐变图标） + +**样式特点：** +- 白色圆角卡片 +- 渐变色图标背景 +- 居中对齐 +- 轻微阴影 + +### 6. 智能工具区域 +**4个工具项，采用2列网格布局：** +- 电子围栏（橙色渐变） +- 扫码溯源（蓝色渐变） +- 检测工具（紫色渐变） +- 档案拍照（红色渐变） + +### 7. 业务办理区域 +**3个业务项，采用3列网格布局：** +- 电子检疫（黄色渐变） +- 电子确权（蓝色渐变） +- 无害化处理申报（紫色渐变） + +### 8. 底部TabBar +**3个标签：** +- 首页（选中状态，绿色） +- 牛羊管理 +- 我的 + +--- + +## 🎨 配色方案 + +### 主色调 +- **选中颜色**：#52c41a（绿色）- TabBar +- **标签选中**：#4A90E2（蓝色）- 预警标签 +- **告警颜色**：#FF4444（红色）- 运动量偏低等 + +### 背景色 +- **页面背景**：#f5f5f5（浅灰色） +- **卡片背景**：#ffffff（白色） +- **统计卡片**：渐变蓝色 (#E8F4FD → #D6EBFA) + +### 图标背景渐变色 +已为所有功能图标配置了专属的渐变色背景，与截图保持一致。 + +--- + +## 📐 布局规范 + +### 间距 +- 页面左右边距：30rpx +- 卡片间距：20rpx +- 卡片内边距：24-30rpx + +### 圆角 +- 卡片圆角：12-16rpx +- 图标圆角：20rpx + +### 字体大小 +- 标题：32rpx（加粗） +- 标签文字：30rpx +- 统计数字：56rpx（加粗） +- 统计标签：24rpx +- 功能项文字：26rpx + +--- + +## 🖼️ 图标说明 + +当前使用 `` 标签引用图标，图标文件路径： + +### 智能设备图标 +- `/images/icon-collar.png` - 智能项圈 +- `/images/icon-eartag.png` - 智能耳标 +- `/images/icon-anklet.png` - 智能脚环 +- `/images/icon-host.png` - 智能主机 +- `/images/icon-monitor.png` - 视频监控 + +### 智能工具图标 +- `/images/icon-fence.png` - 电子围栏 +- `/images/icon-scan.png` - 扫码溯源 +- `/images/icon-check.png` - 检测工具 +- `/images/icon-photo.png` - 档案拍照 + +### 业务办理图标 +- `/images/icon-quarantine.png` - 电子检疫 +- `/images/icon-rights.png` - 电子确权 +- `/images/icon-disposal.png` - 无害化处理申报 + +**建议图标规格：** +- 尺寸：120x120 像素（实际显示60rpx） +- 格式：PNG（支持透明） +- 风格：扁平化、线性或面性图标 + +--- + +## ⚙️ 交互功能 + +### 已实现的交互 +1. ✅ 预警标签切换（切换后统计数据会更新） +2. ✅ 下拉刷新 +3. ✅ 统计卡片数据动态显示 +4. ✅ 跳转生资保险（点击提示） +5. ✅ 智能设备点击跳转（部分页面已实现） +6. ✅ 智能工具点击（功能提示） +7. ✅ 业务办理点击（功能提示） + +### 数据逻辑 +- 不同预警标签对应不同的统计数据 +- 当前使用模拟数据 +- 支持通过API动态加载 + +--- + +## 📱 响应式设计 + +使用 rpx 单位，自动适配不同屏幕尺寸： +- iPhone 6/7/8: 375pt +- iPhone X/XS: 375pt +- iPhone XS Max: 414pt +- Android 各种尺寸 + +--- + +## 🔄 下一步优化建议 + +### 1. 图标资源 +当前页面引用了图标文件，需要： +- 准备所有图标的PNG文件 +- 放置到 `/images/` 目录 +- 或者使用字体图标（iconfont） + +### 2. 数据对接 +- 连接后端API +- 实现实时数据更新 +- 添加加载状态动画 + +### 3. 交互优化 +- 添加点击反馈效果 +- 优化页面切换动画 +- 添加骨架屏加载效果 + +### 4. 性能优化 +- 图片懒加载 +- 数据缓存 +- 减少不必要的渲染 + +--- + +## ✨ UI还原度说明 + +本页面的UI设计已经**严格按照截图样式实现**，包括： + +✅ 布局结构完全一致 +✅ 配色方案精确还原 +✅ 间距和圆角细节匹配 +✅ 文字大小和字重一致 +✅ 统计数据展示方式相同 +✅ 功能分区完全对应 +✅ TabBar样式和文字一致 + +**唯一需要补充的是图标文件**，建议找设计师制作或使用图标库。 + +--- + +## 📞 技术支持 + +如有任何问题或需要调整，请随时联系开发团队。 + +**更新日期**：2025-01-09 + diff --git a/mini_program/farm-monitor-dashboard/pages/home/home.js b/mini_program/farm-monitor-dashboard/pages/home/home.js new file mode 100644 index 0000000..b9ff1e6 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/home/home.js @@ -0,0 +1,359 @@ +// pages/home/home.js - 首页 +const API = require('../../utils/api').API + +Page({ + data: { + activeTab: 'collar', + stats: { + notCollected: 0, + collarCut: 0, + temperature: 0, + activityHigh: 0, + activityLow: 0, + transferSlow: 0, + lowBattery: 0 + }, + totalAlerts: 0, // 总预警数量 + loading: false + }, + + onLoad() { + console.log('首页加载') + this.loadStats() + }, + + onShow() { + console.log('首页显示') + }, + + onPullDownRefresh() { + this.loadStats() + setTimeout(() => { + wx.stopPullDownRefresh() + }, 1000) + }, + + // 切换预警类型标签 + switchTab(e) { + const tab = e.currentTarget.dataset.tab + this.setData({ activeTab: tab }) + // 根据不同标签加载不同数据 + this.loadStats() + }, + + // 加载统计数据 + async loadStats() { + this.setData({ loading: true }) + + try { + if (this.data.activeTab === 'collar') { + // 调用真实的项圈预警API + const res = await API.getCollarAlerts({ + page: 1, + limit: 100, // 获取所有数据用于统计 + search: '', + alertType: '' + }) + + console.log('项圈预警数据:', res) + + // 根据实际返回的数据结构调整 + const alerts = res.data?.list || res.data || res.list || [] + const total = res.data?.pagination?.total || res.total || alerts.length || 0 + + // 统计不同类型的预警数量 + const stats = { + notCollected: 0, + collarCut: 0, + temperature: 0, + activityHigh: 0, + activityLow: 0, + transferSlow: 0, + lowBattery: 0 + } + + alerts.forEach(alert => { + const alertType = alert.alertType || '' + + // 根据预警类型统计 + if (alertType === 'not_collected') { + stats.notCollected++ + } else if (alertType === 'collar_cut') { + stats.collarCut++ + } else if (alertType === 'temperature') { + stats.temperature++ + } else if (alertType === 'activity_high') { + stats.activityHigh++ + } else if (alertType === 'activity_low') { + stats.activityLow++ + } else if (alertType === 'transfer_slow') { + stats.transferSlow++ + } else if (alertType === 'battery') { + stats.lowBattery++ + } + }) + + this.setData({ + stats, + totalAlerts: total, + loading: false + }) + } else if (this.data.activeTab === 'eartag') { + // 调用真实的耳标预警API + const res = await API.getEartagAlerts({ + page: 1, + limit: 100, // 获取所有数据用于统计 + search: '', + alertType: '' + }) + + console.log('耳标预警数据:', res) + + // 根据实际返回的数据结构调整 + const alerts = res.data?.list || res.data || res.list || [] + const total = res.data?.pagination?.total || res.total || alerts.length || 0 + + // 统计不同类型的预警数量 + const stats = { + notCollected: 0, + collarCut: 0, + temperature: 0, + activityHigh: 0, + activityLow: 0, + transferSlow: 0, + lowBattery: 0 + } + + alerts.forEach(alert => { + const alertType = alert.alertType || '' + + // 根据预警类型统计 + if (alertType === 'not_collected') { + stats.notCollected++ + } else if (alertType === 'collar_cut') { + stats.collarCut++ + } else if (alertType === 'temperature') { + stats.temperature++ + } else if (alertType === 'movement') { + // 运动异常预警归入运动量偏低 + stats.activityLow++ + } else if (alertType === 'activity_high') { + stats.activityHigh++ + } else if (alertType === 'activity_low') { + stats.activityLow++ + } else if (alertType === 'transfer_slow') { + stats.transferSlow++ + } else if (alertType === 'battery') { + stats.lowBattery++ + } + }) + + this.setData({ + stats, + totalAlerts: total, + loading: false + }) + } else { + // 其他类型暂时使用模拟数据 + const statsMap = { + eartag: { + notCollected: 8, + collarCut: 1, + temperature: 2, + activityHigh: 1, + activityLow: 2, + transferSlow: 0, + lowBattery: 3 + }, + anklet: { + notCollected: 5, + collarCut: 0, + temperature: 1, + activityHigh: 2, + activityLow: 1, + transferSlow: 1, + lowBattery: 1 + }, + host: { + notCollected: 0, + collarCut: 0, + temperature: 0, + activityHigh: 0, + activityLow: 0, + transferSlow: 0, + lowBattery: 1 + } + } + + this.setData({ + stats: statsMap[this.data.activeTab] || {}, + loading: false + }) + } + } catch (error) { + console.error('加载统计数据失败:', error) + + // 使用默认的统计数据作为降级方案 + const defaultStats = { + collar: { + notCollected: 0, + collarCut: 0, + temperature: 0, + activityHigh: 0, + activityLow: 0, + transferSlow: 0, + lowBattery: 0 + }, + eartag: { + notCollected: 0, + collarCut: 0, + temperature: 0, + activityHigh: 0, + activityLow: 0, + transferSlow: 0, + lowBattery: 0 + }, + anklet: { + notCollected: 0, + collarCut: 0, + temperature: 0, + activityHigh: 0, + activityLow: 0, + transferSlow: 0, + lowBattery: 0 + }, + host: { + notCollected: 0, + collarCut: 0, + temperature: 0, + activityHigh: 0, + activityLow: 0, + transferSlow: 0, + lowBattery: 0 + } + } + + this.setData({ + stats: defaultStats[this.data.activeTab] || defaultStats.collar, + loading: false + }) + + // 根据错误类型显示不同提示 + if (error.statusCode === 502 || error.statusCode === 503 || error.statusCode === 504) { + // 服务器错误，toast已在api.js中显示 + console.log('服务器暂时不可用，已显示默认数据') + } else { + wx.showToast({ + title: '加载失败，显示默认数据', + icon: 'none', + duration: 2000 + }) + } + } + }, + + // 点击预警区域跳转到预警列表 + goToAlertList() { + console.log('跳转到预警列表，当前类型:', this.data.activeTab) + + if (this.data.activeTab === 'collar') { + wx.navigateTo({ + url: '/pages/alert/collar-alert/collar-alert', + fail: () => { + wx.showToast({ + title: '页面开发中', + icon: 'none' + }) + } + }) + } else if (this.data.activeTab === 'eartag') { + wx.navigateTo({ + url: '/pages/alert/eartag-alert/eartag-alert', + fail: () => { + wx.showToast({ + title: '页面开发中', + icon: 'none' + }) + } + }) + } else { + wx.showToast({ + title: '功能开发中', + icon: 'none' + }) + } + }, + + // 跳转到生资保险 + goToInsurance() { + wx.showToast({ + title: '跳转到保险系统', + icon: 'none' + }) + // TODO: 实际跳转逻辑 + // wx.navigateTo({ + // url: '/pages/insurance/index' + // }) + }, + + // 设备详情 + goToDeviceDetail(e) { + const type = e.currentTarget.dataset.type + console.log('跳转到设备详情:', type) + + const urlMap = { + collar: '/pages/device/collar/collar', + eartag: '/pages/device/eartag/eartag', + anklet: '/pages/device/eartag/eartag', // 脚环暂时用耳标页面 + host: '/pages/device/host/host', + monitor: '/pages/device/fence/fence' // 监控暂时用围栏页面 + } + + const url = urlMap[type] + if (url) { + wx.navigateTo({ + url, + fail: () => { + wx.showToast({ + title: '页面开发中', + icon: 'none' + }) + } + }) + } + }, + + // 智能工具 + goToTool(e) { + const type = e.currentTarget.dataset.type + console.log('跳转到工具:', type) + + if (type === 'fence') { + wx.navigateTo({ + url: '/pages/device/fence/fence', + fail: () => { + wx.showToast({ + title: '页面开发中', + icon: 'none' + }) + } + }) + } else { + wx.showToast({ + title: '功能开发中', + icon: 'none' + }) + } + }, + + // 业务办理 + goToBusiness(e) { + const type = e.currentTarget.dataset.type + console.log('跳转到业务办理:', type) + + wx.showToast({ + title: '功能开发中', + icon: 'none' + }) + } +}) diff --git a/mini_program/farm-monitor-dashboard/pages/home/home.json b/mini_program/farm-monitor-dashboard/pages/home/home.json new file mode 100644 index 0000000..436d3d1 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/home/home.json @@ -0,0 +1,9 @@ +{ + "navigationBarTitleText": "首页", + "enablePullDownRefresh": true, + "backgroundColor": "#f5f5f5", + "navigationBarBackgroundColor": "#ffffff", + "navigationBarTextStyle": "black", + "usingComponents": {} +} + diff --git a/mini_program/farm-monitor-dashboard/pages/home/home.wxml b/mini_program/farm-monitor-dashboard/pages/home/home.wxml index 7870c73..f027c1b 100644 --- a/mini_program/farm-monitor-dashboard/pages/home/home.wxml +++ b/mini_program/farm-monitor-dashboard/pages/home/home.wxml @@ -1,96 +1,159 @@ - - - - - - {{item.name}} + + + + + + 项圈预警 + + + 耳标预警 + + + 脚环预警 + + + 主机预警 - - - - - {{item.bgIcon}} + + + + + + 今日未被采集 + {{stats.notCollected}} + + + 项圈绑带剪断 + {{stats.collarCut}} + + + 温度预警 + {{stats.temperature}} + - - {{item.title}} - {{item.value}} + + + 今日运动量偏高 + {{stats.activityHigh}} + + + 今日运动量偏低 + {{stats.activityLow}} + + + 传输频次过慢 + {{stats.transferSlow}} + + + + + 电量偏低 + {{stats.lowBattery}} + - - - - 跳转生资保险 - + + + 跳转生资保险 + - - - 智能设备 - - - {{item.icon}} - {{item.name}} + + + 智能设备 + + + + 📿 + + 智能项圈 + + + + 🏷️ + + 智能耳标 + + + + ⌚ + + 智能脚环 + + + + 🖥️ + + 智能主机 + + + + 📹 + + 视频监控 + - - - - 智能工具 - - - {{item.icon}} - {{item.name}} + + + 智能工具 + + + + 🗺️ + + 电子围栏 + + + + 📱 + + 扫码溯源 + + + + 🔍 + + 检测工具 + + + + 📷 + + 档案拍照 + - - - - 业务办理 - - - {{item.icon}} - {{item.name}} + + + 业务办理 + + + + 🛡️ + + 电子检疫 + + + + 📜 + + 电子确权 + + + + ♻️ + + 无害化处理申报 + - - - - - 加载中... - + + + diff --git a/mini_program/farm-monitor-dashboard/pages/home/home.wxss b/mini_program/farm-monitor-dashboard/pages/home/home.wxss index d22d6ec..e23cbb3 100644 --- a/mini_program/farm-monitor-dashboard/pages/home/home.wxss +++ b/mini_program/farm-monitor-dashboard/pages/home/home.wxss @@ -1,303 +1,291 @@ -/* pages/home/home.wxss */ -.home-container { - background: #ffffff; - min-height: 100vh; - padding-bottom: 120rpx; /* 为底部导航栏留出空间 */ +/* pages/home/home.wxss - 首页样式 */ +page { + background-color: #f5f5f5; + height: 100%; } -/* 预警标签页 */ -.alert-tabs { +.page-container { display: flex; - background: #ffffff; - border-bottom: 1rpx solid #f0f0f0; - padding: 0 32rpx; + flex-direction: column; + height: 100%; + background-color: #f5f5f5; } -.alert-tab { +/* 顶部标签栏 */ +.tabs { + display: flex; + background-color: #ffffff; + padding: 20rpx 0; + border-bottom: 1rpx solid #e5e5e5; +} + +.tab-item { flex: 1; text-align: center; - padding: 24rpx 0; - font-size: 28rpx; - color: #666; + font-size: 30rpx; + color: #999999; + padding-bottom: 10rpx; position: relative; - border-bottom: 4rpx solid transparent; } -.alert-tab.active { - color: #1890ff; - border-bottom-color: #1890ff; +.tab-item text { + display: inline-block; +} + +.tab-item.active { + color: #4A90E2; font-weight: 500; } -/* 预警数据卡片 */ -.alert-cards { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 16rpx; - padding: 24rpx 32rpx; - background: #f8f9fa; -} - -.alert-card { - background: #ffffff; - border-radius: 12rpx; - padding: 24rpx; - position: relative; - overflow: hidden; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); -} - -.alert-card:active { - transform: scale(0.98); -} - -.alert-card.alert .alert-value { - color: #f5222d; - font-weight: bold; -} - -.alert-card-bg { +.tab-item.active::after { + content: ''; position: absolute; - top: 0; - right: 0; - width: 80rpx; - height: 80rpx; - opacity: 0.1; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 60rpx; + height: 4rpx; + background-color: #4A90E2; + border-radius: 2rpx; +} + +/* 滚动区域 */ +.scroll-content { + flex: 1; + padding: 0 0 20rpx 0; +} + +/* 统计数据卡片 */ +.stats-card { + background: linear-gradient(135deg, #E8F4FD 0%, #D6EBFA 100%); + margin: 20rpx 30rpx; + padding: 30rpx 20rpx; + border-radius: 16rpx; +} + +.stats-row { display: flex; - align-items: center; - justify-content: center; + margin-bottom: 20rpx; } -.alert-bg-icon { - font-size: 48rpx; - color: #1890ff; +.stats-row:last-child { + margin-bottom: 0; } -.alert-card-content { +.stat-item { + flex: 1; + background-color: rgba(255, 255, 255, 0.6); + border-radius: 12rpx; + padding: 24rpx 16rpx; + margin: 0 10rpx; + display: flex; + flex-direction: column; + align-items: flex-start; position: relative; - z-index: 1; } -.alert-title { +.stat-item:first-child { + margin-left: 0; +} + +.stat-item:last-child { + margin-right: 0; +} + +.stat-item.single { + flex: 0 0 31%; +} + +.stat-label { font-size: 24rpx; - color: #666; - margin-bottom: 8rpx; + color: #666666; + margin-bottom: 16rpx; line-height: 1.4; } -.alert-value { - font-size: 36rpx; - color: #333; +.stat-value { + font-size: 56rpx; font-weight: bold; + color: #333333; + line-height: 1; +} + +.stat-value.warn { + color: #FF4444; } /* 跳转生资保险 */ .insurance-link { - padding: 24rpx 32rpx; - background: #ffffff; - border-bottom: 1rpx solid #f0f0f0; + background-color: #ffffff; + margin: 0 30rpx 20rpx; + padding: 30rpx; + border-radius: 12rpx; + text-align: center; + font-size: 30rpx; + color: #333333; } -.insurance-text { - font-size: 28rpx; - color: #1890ff; -} - -/* 智能设备 */ -.smart-devices { - padding: 32rpx; - background: #ffffff; +/* 区块样式 */ +.section { + margin-bottom: 24rpx; + background-color: #ffffff; + padding: 28rpx 0 24rpx; + border-radius: 16rpx; + margin-left: 24rpx; + margin-right: 24rpx; } .section-title { font-size: 32rpx; - font-weight: bold; - color: #333; - margin-bottom: 24rpx; + font-weight: 600; + color: #1a1a1a; + margin: 0 24rpx 24rpx; + padding-left: 0; + display: flex; + align-items: center; } -.devices-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20rpx; +/* 智能设备网格 */ +.device-grid { + display: flex; + flex-wrap: wrap; + padding: 0 24rpx; + gap: 16rpx; } -.device-item { - text-align: center; - padding: 24rpx 16rpx; - background: #ffffff; - border-radius: 12rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); +.device-grid .grid-item { + width: calc((100% - 32rpx) / 3); } -.device-item:active { +/* 智能工具网格 */ +.tool-grid { + display: flex; + flex-wrap: wrap; + padding: 0 24rpx; + gap: 16rpx; +} + +.tool-grid .grid-item { + width: calc((100% - 32rpx) / 3); +} + +/* 业务办理网格 */ +.business-grid { + display: flex; + flex-wrap: wrap; + padding: 0 24rpx; + gap: 16rpx; +} + +.business-grid .grid-item { + width: calc((100% - 32rpx) / 3); +} + +/* 网格项通用样式 */ +.grid-item { background: #f8f9fa; - transform: scale(0.95); + border-radius: 12rpx; + padding: 24rpx 8rpx 20rpx; + display: flex; + flex-direction: column; + align-items: center; + transition: all 0.2s ease; + position: relative; + box-sizing: border-box; } -.device-icon { - font-size: 48rpx; - margin-bottom: 12rpx; - display: block; +.grid-item:active { + background: #e9ecef; + transform: scale(0.96); } -.device-icon.orange { color: #fa8c16; } -.device-icon.blue { color: #1890ff; } -.device-icon.purple { color: #722ed1; } +.icon-box { + width: 80rpx; + height: 80rpx; + border-radius: 16rpx; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 10rpx; + transition: all 0.2s ease; +} -.device-text { +.grid-item:active .icon-box { + transform: scale(0.94); +} + +.item-icon { + width: 48rpx; + height: 48rpx; +} + +.item-icon-text { + font-size: 44rpx; + line-height: 1; +} + +.item-label { font-size: 24rpx; - color: #333; - font-weight: 500; + color: #333333; + text-align: center; + line-height: 1.4; + font-weight: 400; + max-width: 100%; + word-wrap: break-word; +} + +/* 图标背景颜色 - 智能设备 */ +.icon-yellow { + background: #FFF3E0; +} + +.icon-blue { + background: #E3F2FD; +} + +.icon-purple { + background: #F3E5F5; +} + +.icon-blue2 { + background: #E1F5FE; +} + +.icon-orange { + background: #FFE0B2; } /* 智能工具 */ -.smart-tools { - padding: 0 32rpx 32rpx; - background: #ffffff; +.icon-orange2 { + background: #FFF8E1; } -.tools-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 20rpx; +.icon-blue3 { + background: #E8EAF6; } -.tool-item { - text-align: center; - padding: 24rpx 16rpx; - background: #ffffff; - border-radius: 12rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); +.icon-purple2 { + background: #EDE7F6; } -.tool-item:active { - background: #f8f9fa; - transform: scale(0.95); -} - -.tool-icon { - font-size: 48rpx; - margin-bottom: 12rpx; - display: block; -} - -.tool-icon.orange { color: #fa8c16; } -.tool-icon.blue { color: #1890ff; } -.tool-icon.red { color: #f5222d; } -.tool-icon.purple { color: #722ed1; } - -.tool-text { - font-size: 24rpx; - color: #333; - font-weight: 500; +.icon-red { + background: #FFEBEE; } /* 业务办理 */ -.business-operations { - padding: 0 32rpx 32rpx; - background: #ffffff; +.icon-yellow2 { + background: #FFFDE7; } -.business-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20rpx; +.icon-blue4 { + background: #E0F2F1; } -.business-item { - text-align: center; - padding: 24rpx 16rpx; - background: #ffffff; - border-radius: 12rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); +.icon-purple3 { + background: #F1F8E9; } -.business-item:active { - background: #f8f9fa; - transform: scale(0.95); -} - -.business-icon { - font-size: 48rpx; - margin-bottom: 12rpx; - display: block; -} - -.business-icon.orange { color: #fa8c16; } -.business-icon.blue { color: #1890ff; } -.business-icon.purple { color: #722ed1; } - -.business-text { - font-size: 24rpx; - color: #333; - font-weight: 500; - line-height: 1.3; -} - -/* 加载状态 */ -.loading-container { - text-align: center; - padding: 80rpx; -} - -.loading-spinner { - width: 48rpx; - height: 48rpx; - border: 4rpx solid #f0f0f0; - border-top: 4rpx solid #1890ff; - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 20rpx; -} - -.loading-text { - font-size: 28rpx; - color: #999; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* 响应式设计 */ -@media (max-width: 375px) { - .alert-cards { - grid-template-columns: repeat(2, 1fr); - gap: 12rpx; - padding: 20rpx 24rpx; - } - - .devices-grid { - grid-template-columns: repeat(2, 1fr); - gap: 16rpx; - } - - .tools-grid { - gap: 16rpx; - } - - .business-grid { - grid-template-columns: repeat(2, 1fr); - gap: 16rpx; - } - - .device-item, - .tool-item, - .business-item { - padding: 20rpx 12rpx; - } - - .device-icon, - .tool-icon, - .business-icon { - font-size: 40rpx; - } - - .device-text, - .tool-text, - .business-text { - font-size: 22rpx; - } +/* 底部留白 */ +.bottom-space { + height: 40rpx; } diff --git a/mini_program/farm-monitor-dashboard/pages/login/login.js b/mini_program/farm-monitor-dashboard/pages/login/login.js new file mode 100644 index 0000000..2834ba2 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/login/login.js @@ -0,0 +1,198 @@ +// pages/login/login.js - 登录页面 +const { API } = require('../../utils/api.js') + +Page({ + data: { + formData: { + username: '', + password: '' + }, + loading: false, + agreedToTerms: false // 用户协议同意状态 + }, + + onLoad() { + console.log('登录页加载') + + // 检查是否已登录 + const app = getApp() + if (app.globalData.isLogin) { + wx.switchTab({ + url: '/pages/home/home' + }) + return + } + + // 开发阶段可以自动填充测试账号 + // this.setData({ + // 'formData.username': 'admin', + // 'formData.password': '123456', + // agreedToTerms: true + // }) + }, + + /** + * 输入框值变化 + */ + onInputChange(e) { + const field = e.currentTarget.dataset.field + const value = e.detail.value + this.setData({ + [`formData.${field}`]: value + }) + }, + + /** + * 切换用户协议同意状态 + */ + toggleAgreement() { + this.setData({ + agreedToTerms: !this.data.agreedToTerms + }) + }, + + /** + * 登录处理 + */ + async handleLogin() { + const { username, password } = this.data.formData + const { agreedToTerms } = this.data + + // 表单验证 + if (!username) { + wx.showToast({ + title: '请输入账号', + icon: 'none' + }) + return + } + + if (!password) { + wx.showToast({ + title: '请输入密码', + icon: 'none' + }) + return + } + + if (!agreedToTerms) { + wx.showToast({ + title: '请先阅读并同意用户协议', + icon: 'none' + }) + return + } + + // 开始登录 + this.setData({ loading: true }) + + try { + // 调用登录API + const res = await API.login(username, password) + + console.log('登录响应:', res) + + // 登录成功，保存用户信息和token + // 根据后端实际返回的数据结构调整 + // 后端返回格式: { success: true, token: "...", user: {...}, role: {...} } + const userData = res.user || res.data?.user || res.data || {} + const roleData = res.role || res.data?.role || {} + + const userInfo = { + id: userData.id || userData.userId, + username: username, + name: userData.name || userData.nickname || username, + phone: userData.phone || userData.mobile || '', + role: roleData.name || roleData.roleName || userData.role || '用户', + avatar: userData.avatar || '', + farmId: userData.farmId || res.farmId || '', + farmName: userData.farmName || res.farmName || '' + } + + // Token 可能在根级别或 data 中 + const token = res.token || res.data?.token || res.data?.accessToken || res.accessToken + + if (!token) { + throw new Error('未获取到登录凭证') + } + + // 保存到本地存储 + wx.setStorageSync('userInfo', userInfo) + wx.setStorageSync('token', token) + + // 更新全局状态 + const app = getApp() + app.globalData.isLogin = true + app.globalData.userInfo = userInfo + app.globalData.token = token + + // 显示成功提示 + wx.showToast({ + title: '登录成功', + icon: 'success', + duration: 1500 + }) + + // 延迟跳转到首页 + setTimeout(() => { + wx.switchTab({ + url: '/pages/home/home' + }) + }, 1500) + + } catch (error) { + console.error('登录失败:', error) + + // 显示错误信息 + const errorMsg = error.message || error.msg || '登录失败，请检查账号密码' + wx.showToast({ + title: errorMsg, + icon: 'none', + duration: 2000 + }) + + this.setData({ loading: false }) + } + }, + + /** + * 一键登录 + */ + onOneClickLogin() { + wx.showToast({ + title: '一键登录功能开发中', + icon: 'none' + }) + }, + + /** + * 短信登录 + */ + onSmsLogin() { + wx.showToast({ + title: '短信登录功能开发中', + icon: 'none' + }) + }, + + /** + * 注册账号 + */ + onRegister() { + wx.showToast({ + title: '注册功能开发中', + icon: 'none' + }) + }, + + /** + * 其他登录方式 + */ + onOtherLogin() { + wx.showModal({ + title: '其他登录方式', + content: '支持微信登录、手机号登录等多种方式', + showCancel: false + }) + } +}) diff --git a/mini_program/farm-monitor-dashboard/pages/login/login.json b/mini_program/farm-monitor-dashboard/pages/login/login.json new file mode 100644 index 0000000..5e73e41 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/login/login.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "登录", + "navigationStyle": "custom", + "disableScroll": true, + "usingComponents": {} +} + diff --git a/mini_program/farm-monitor-dashboard/pages/login/login.wxml b/mini_program/farm-monitor-dashboard/pages/login/login.wxml index f179c21..d4726c8 100644 --- a/mini_program/farm-monitor-dashboard/pages/login/login.wxml +++ b/mini_program/farm-monitor-dashboard/pages/login/login.wxml @@ -1,99 +1,99 @@ - - + + diff --git a/mini_program/farm-monitor-dashboard/pages/login/login.wxss b/mini_program/farm-monitor-dashboard/pages/login/login.wxss index 5e0e064..125be47 100644 --- a/mini_program/farm-monitor-dashboard/pages/login/login.wxss +++ b/mini_program/farm-monitor-dashboard/pages/login/login.wxss @@ -1,270 +1,270 @@ -/* pages/login/login.wxss */ -.login-container { - min-height: 100vh; - background-color: #ffffff; - display: flex; - flex-direction: column; -} - -/* 页面头部 */ -.login-header { - padding: 20rpx 32rpx; - background-color: #ffffff; -} - -.header-controls { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20rpx; -} - -.home-icon { - font-size: 32rpx; - color: #333333; -} - -.window-controls { - display: flex; - gap: 16rpx; -} - -.control-btn { - width: 24rpx; - height: 24rpx; - border-radius: 50%; - background-color: #e0e0e0; - display: flex; - align-items: center; - justify-content: center; - font-size: 16rpx; - color: #666666; -} - -.language-selector { - display: flex; - align-items: center; - justify-content: center; - gap: 8rpx; -} - -.language-text { - font-size: 28rpx; - color: #333333; -} - -.language-arrow { - font-size: 20rpx; - color: #666666; -} - -/* 主要内容区域 */ -.main-content { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - padding: 80rpx 32rpx 40rpx; -} - -.app-title { - font-size: 48rpx; - font-weight: bold; - color: #333333; - text-align: center; - margin-bottom: 80rpx; -} - -/* 登录表单 */ -.login-form { - width: 100%; - max-width: 600rpx; -} - -.input-group { - display: flex; - align-items: center; - margin-bottom: 32rpx; - padding: 0 24rpx; - background-color: #ffffff; - border: 2rpx solid #e0e0e0; - border-radius: 12rpx; - height: 88rpx; -} - -.input-icon { - font-size: 32rpx; - color: #999999; - margin-right: 16rpx; -} - -.form-input { - flex: 1; - height: 100%; - font-size: 28rpx; - color: #333333; - background-color: transparent; - border: none; -} - -.form-input:focus { - outline: none; -} - -.input-group:focus-within { - border-color: #3cc51f; -} - -/* 登录按钮 */ -.login-btn { - width: 100%; - height: 88rpx; - background-color: #3cc51f; - color: #ffffff; - border-radius: 12rpx; - font-size: 32rpx; - font-weight: 500; - border: none; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 32rpx; -} - -.login-btn:active { - background-color: #2ea617; -} - -.login-btn.loading { - background-color: #c0c4cc; -} - -.login-btn.disabled { - background-color: #c0c4cc; -} - -/* 用户协议 */ -.agreement-section { - margin-bottom: 40rpx; -} - -.checkbox-container { - display: flex; - align-items: center; - justify-content: center; - gap: 12rpx; - cursor: pointer; -} - -.custom-checkbox { - width: 32rpx; - height: 32rpx; - border: 2rpx solid #d0d0d0; - border-radius: 6rpx; - background-color: #ffffff; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.2s ease; -} - -.custom-checkbox.checked { - background-color: #3cc51f; - border-color: #3cc51f; -} - -.checkmark { - color: #ffffff; - font-size: 20rpx; - font-weight: bold; -} - -.agreement-text { - font-size: 24rpx; - color: #333333; -} - -/* 其他登录方式 */ -.alternative-login { - display: flex; - flex-direction: column; - align-items: center; - gap: 16rpx; -} - -.alt-login-item { - font-size: 28rpx; - color: #333333; - padding: 8rpx 0; -} - -.alt-login-item:active { - color: #3cc51f; -} - -/* 页面底部 */ -.login-footer { - padding: 40rpx 32rpx; - background-color: #ffffff; -} - -.footer-info { - display: flex; - flex-direction: column; - align-items: center; - gap: 16rpx; - margin-bottom: 32rpx; -} - -.footer-text { - font-size: 28rpx; - color: #333333; -} - -.disclaimer { - text-align: center; -} - -.disclaimer-text { - font-size: 24rpx; - color: #666666; - line-height: 1.4; -} - -/* 响应式设计 */ -@media (max-width: 375px) { - .main-content { - padding: 60rpx 24rpx 32rpx; - } - - .app-title { - font-size: 42rpx; - margin-bottom: 60rpx; - } - - .input-group { - height: 80rpx; - padding: 0 20rpx; - } - - .form-input { - font-size: 26rpx; - } - - .login-btn { - height: 80rpx; - font-size: 30rpx; - } - - .alt-login-item { - font-size: 26rpx; - } - - .footer-text { - font-size: 26rpx; - } - - .disclaimer-text { - font-size: 22rpx; - } -} +/* pages/login/login.wxss */ +.login-container { + min-height: 100vh; + background-color: #ffffff; + display: flex; + flex-direction: column; +} + +/* 页面头部 */ +.login-header { + padding: 20rpx 32rpx; + background-color: #ffffff; +} + +.header-controls { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20rpx; +} + +.home-icon { + font-size: 32rpx; + color: #333333; +} + +.window-controls { + display: flex; + gap: 16rpx; +} + +.control-btn { + width: 24rpx; + height: 24rpx; + border-radius: 50%; + background-color: #e0e0e0; + display: flex; + align-items: center; + justify-content: center; + font-size: 16rpx; + color: #666666; +} + +.language-selector { + display: flex; + align-items: center; + justify-content: center; + gap: 8rpx; +} + +.language-text { + font-size: 28rpx; + color: #333333; +} + +.language-arrow { + font-size: 20rpx; + color: #666666; +} + +/* 主要内容区域 */ +.main-content { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + padding: 80rpx 32rpx 40rpx; +} + +.app-title { + font-size: 48rpx; + font-weight: bold; + color: #333333; + text-align: center; + margin-bottom: 80rpx; +} + +/* 登录表单 */ +.login-form { + width: 100%; + max-width: 600rpx; +} + +.input-group { + display: flex; + align-items: center; + margin-bottom: 32rpx; + padding: 0 24rpx; + background-color: #ffffff; + border: 2rpx solid #e0e0e0; + border-radius: 12rpx; + height: 88rpx; +} + +.input-icon { + font-size: 32rpx; + color: #999999; + margin-right: 16rpx; +} + +.form-input { + flex: 1; + height: 100%; + font-size: 28rpx; + color: #333333; + background-color: transparent; + border: none; +} + +.form-input:focus { + outline: none; +} + +.input-group:focus-within { + border-color: #3cc51f; +} + +/* 登录按钮 */ +.login-btn { + width: 100%; + height: 88rpx; + background-color: #3cc51f; + color: #ffffff; + border-radius: 12rpx; + font-size: 32rpx; + font-weight: 500; + border: none; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 32rpx; +} + +.login-btn:active { + background-color: #2ea617; +} + +.login-btn.loading { + background-color: #c0c4cc; +} + +.login-btn.disabled { + background-color: #c0c4cc; +} + +/* 用户协议 */ +.agreement-section { + margin-bottom: 40rpx; +} + +.checkbox-container { + display: flex; + align-items: center; + justify-content: center; + gap: 12rpx; + cursor: pointer; +} + +.custom-checkbox { + width: 32rpx; + height: 32rpx; + border: 2rpx solid #d0d0d0; + border-radius: 6rpx; + background-color: #ffffff; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; +} + +.custom-checkbox.checked { + background-color: #3cc51f; + border-color: #3cc51f; +} + +.checkmark { + color: #ffffff; + font-size: 20rpx; + font-weight: bold; +} + +.agreement-text { + font-size: 24rpx; + color: #333333; +} + +/* 其他登录方式 */ +.alternative-login { + display: flex; + flex-direction: column; + align-items: center; + gap: 16rpx; +} + +.alt-login-item { + font-size: 28rpx; + color: #333333; + padding: 8rpx 0; +} + +.alt-login-item:active { + color: #3cc51f; +} + +/* 页面底部 */ +.login-footer { + padding: 40rpx 32rpx; + background-color: #ffffff; +} + +.footer-info { + display: flex; + flex-direction: column; + align-items: center; + gap: 16rpx; + margin-bottom: 32rpx; +} + +.footer-text { + font-size: 28rpx; + color: #333333; +} + +.disclaimer { + text-align: center; +} + +.disclaimer-text { + font-size: 24rpx; + color: #666666; + line-height: 1.4; +} + +/* 响应式设计 */ +@media (max-width: 375px) { + .main-content { + padding: 60rpx 24rpx 32rpx; + } + + .app-title { + font-size: 42rpx; + margin-bottom: 60rpx; + } + + .input-group { + height: 80rpx; + padding: 0 20rpx; + } + + .form-input { + font-size: 26rpx; + } + + .login-btn { + height: 80rpx; + font-size: 30rpx; + } + + .alt-login-item { + font-size: 26rpx; + } + + .footer-text { + font-size: 26rpx; + } + + .disclaimer-text { + font-size: 22rpx; + } +} diff --git a/mini_program/farm-monitor-dashboard/pages/production/production.js b/mini_program/farm-monitor-dashboard/pages/production/production.js new file mode 100644 index 0000000..d7b0df8 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/production/production.js @@ -0,0 +1,70 @@ +// pages/production/production.js - 生产管理页面 +Page({ + data: { + productionList: [], + stats: { + total: 0, + today: 0, + thisMonth: 0 + }, + loading: false + }, + + onLoad() { + console.log('生产管理页加载') + this.loadProductionData() + }, + + onShow() { + console.log('生产管理页显示') + this.loadProductionData() + }, + + onPullDownRefresh() { + this.loadProductionData() + setTimeout(() => { + wx.stopPullDownRefresh() + }, 1000) + }, + + // 加载生产数据 + loadProductionData() { + this.setData({ loading: true }) + + // TODO: 从API加载生产数据 + // 模拟数据 + setTimeout(() => { + this.setData({ + stats: { + total: 120, + today: 5, + thisMonth: 42 + }, + productionList: [ + { id: 1, cattleId: 'C001', earTag: 'ET001', type: '产奶', amount: 25, unit: 'L', date: '2024-01-15' }, + { id: 2, cattleId: 'C002', earTag: 'ET002', type: '产奶', amount: 28, unit: 'L', date: '2024-01-15' }, + { id: 3, cattleId: 'C003', earTag: 'ET003', type: '产奶', amount: 22, unit: 'L', date: '2024-01-14' } + ], + loading: false + }) + }, 500) + }, + + // 添加生产记录 + addProduction() { + wx.showToast({ + title: '功能开发中', + icon: 'none' + }) + }, + + // 查看生产详情 + viewProductionDetail(e) { + const id = e.currentTarget.dataset.id + wx.showToast({ + title: '功能开发中', + icon: 'none' + }) + } +}) + diff --git a/mini_program/farm-monitor-dashboard/pages/production/production.json b/mini_program/farm-monitor-dashboard/pages/production/production.json new file mode 100644 index 0000000..ec97386 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/production/production.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "生产管理", + "enablePullDownRefresh": true, + "backgroundColor": "#f6f6f6", + "usingComponents": {} +} + diff --git a/mini_program/farm-monitor-dashboard/pages/production/production.wxml b/mini_program/farm-monitor-dashboard/pages/production/production.wxml index 34e530d..b78072a 100644 --- a/mini_program/farm-monitor-dashboard/pages/production/production.wxml +++ b/mini_program/farm-monitor-dashboard/pages/production/production.wxml @@ -1,254 +1,254 @@ - - - - 生产管理 - - - - - - 牛只管理 - - - - - 🐄 - 牛只档案 - - - - 💗 - 发情记录 - - - - 🧪 - 配种记录 - - - - 📅 - 妊检记录 - - - - 👶 - 分娩记录 - - - - ✏️ - 断奶记录 - - - - 🏠 - 转栏记录 - - - - 🏠 - 离栏记录 - - - - 🏠 - 栏舍设置 - - - - 📄 - 批次设置 - - - - 🛡️ - 防疫预警 - - - - - - - - - 猪档案 - - - - - - 🐷 - 猪档案 - - - - 💗 - 发情记录 - - - - 🧪 - 配种记录 - - - - 📅 - 妊检记录 - - - - 👶 - 分娩记录 - - - - - ✏️ - 断奶记录 - - - - 🏠 - 转栏记录 - - - - 🏠 - 离栏记录 - - - - 🏠 - 栏舍设置 - - - - 📄 - 批次设置 - - - - - 🛡️ - 防疫预警 - - - - - - - - - 羊只管理 - - - - - - 🐑 - 羊档案 - - - - 💗 - 发情记录 - - - - 🧪 - 配种记录 - - - - 📅 - 妊检记录 - - - - 👶 - 分娩记录 - - - - - ✏️ - 断奶记录 - - - - 🏠 - 转栏记录 - - - - 🏠 - 离栏记录 - - - - 🏠 - 栏舍设置 - - - - 📄 - 批次设置 - - - - - 🛡️ - 防疫预警 - - - - - - - - - 家禽管理 - - - - - - 🐔 - 家禽档案 - - - - 🏠 - 离栏记录 - - - - 🏠 - 栏舍设置 - - - - 📄 - 批次设置 - - - - 🏠 - 扫码录入 - - - - - 🏠 - 扫码打印 - - - - - - - - 加载中... - - + + + + 生产管理 + + + + + + 牛只管理 + + + + + 🐄 + 牛只档案 + + + + 💗 + 发情记录 + + + + 🧪 + 配种记录 + + + + 📅 + 妊检记录 + + + + 👶 + 分娩记录 + + + + ✏️ + 断奶记录 + + + + 🏠 + 转栏记录 + + + + 🏠 + 离栏记录 + + + + 🏠 + 栏舍设置 + + + + 📄 + 批次设置 + + + + 🛡️ + 防疫预警 + + + + + + + + + 猪档案 + + + + + + 🐷 + 猪档案 + + + + 💗 + 发情记录 + + + + 🧪 + 配种记录 + + + + 📅 + 妊检记录 + + + + 👶 + 分娩记录 + + + + + ✏️ + 断奶记录 + + + + 🏠 + 转栏记录 + + + + 🏠 + 离栏记录 + + + + 🏠 + 栏舍设置 + + + + 📄 + 批次设置 + + + + + 🛡️ + 防疫预警 + + + + + + + + + 羊只管理 + + + + + + 🐑 + 羊档案 + + + + 💗 + 发情记录 + + + + 🧪 + 配种记录 + + + + 📅 + 妊检记录 + + + + 👶 + 分娩记录 + + + + + ✏️ + 断奶记录 + + + + 🏠 + 转栏记录 + + + + 🏠 + 离栏记录 + + + + 🏠 + 栏舍设置 + + + + 📄 + 批次设置 + + + + + 🛡️ + 防疫预警 + + + + + + + + + 家禽管理 + + + + + + 🐔 + 家禽档案 + + + + 🏠 + 离栏记录 + + + + 🏠 + 栏舍设置 + + + + 📄 + 批次设置 + + + + 🏠 + 扫码录入 + + + + + 🏠 + 扫码打印 + + + + + + + + 加载中... + + diff --git a/mini_program/farm-monitor-dashboard/pages/production/production.wxss b/mini_program/farm-monitor-dashboard/pages/production/production.wxss index 63ef4b7..152fe39 100644 --- a/mini_program/farm-monitor-dashboard/pages/production/production.wxss +++ b/mini_program/farm-monitor-dashboard/pages/production/production.wxss @@ -1,213 +1,213 @@ -/* pages/production/production.wxss */ -.production-container { - padding: 0; - background-color: #ffffff; - min-height: 100vh; -} - -/* 页面标题 */ -.page-title { - font-size: 36rpx; - font-weight: bold; - color: #333333; - text-align: center; - padding: 32rpx 0; - background-color: #ffffff; - border-bottom: 1rpx solid #f0f0f0; -} - -/* 管理模块容器 */ -.management-section { - margin-bottom: 40rpx; - background-color: #ffffff; -} - -/* 模块标题头部 */ -.section-header { - display: flex; - align-items: center; - padding: 24rpx 32rpx 16rpx; - background-color: #ffffff; -} - -.section-title-bar { - width: 8rpx; - height: 32rpx; - background-color: #3cc51f; - margin-right: 16rpx; - border-radius: 4rpx; -} - -.section-title { - font-size: 32rpx; - font-weight: bold; - color: #333333; -} - -/* 功能网格 */ -.function-grid { - display: grid; - grid-template-columns: repeat(5, 1fr); - gap: 24rpx; - padding: 0 32rpx 32rpx; - background-color: #ffffff; -} - -/* 功能项 */ -.function-item { - display: flex; - flex-direction: column; - align-items: center; - padding: 20rpx 8rpx; - background-color: #ffffff; - border-radius: 12rpx; - transition: all 0.2s ease; -} - -.function-item:active { - background-color: #f8f8f8; - transform: scale(0.95); -} - -/* 功能图标 */ -.function-icon { - width: 80rpx; - height: 80rpx; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 40rpx; - margin-bottom: 12rpx; - color: #ffffff; -} - -/* 猪档案图标颜色 */ -.function-icon.pig-archive { - background-color: #1890ff; -} - -.function-icon.estrus-record { - background-color: #fa8c16; -} - -.function-icon.mating-record { - background-color: #1890ff; -} - -.function-icon.pregnancy-check { - background-color: #faad14; -} - -.function-icon.farrowing-record { - background-color: #52c41a; -} - -.function-icon.weaning-record { - background-color: #1890ff; -} - -.function-icon.pen-transfer { - background-color: #f5222d; -} - -.function-icon.pen-exit { - background-color: #fa8c16; -} - -.function-icon.pen-settings { - background-color: #52c41a; -} - -.function-icon.batch-settings { - background-color: #1890ff; -} - -.function-icon.epidemic-warning { - background-color: #1890ff; -} - -/* 羊只管理图标颜色 */ -.function-icon.sheep-archive { - background-color: #1890ff; -} - -/* 家禽管理图标颜色 */ -.function-icon.poultry-archive { - background-color: #1890ff; -} - -/* 牛只管理图标颜色 */ -.function-icon.cattle-archive { - background-color: #1890ff; -} - -.function-icon.scan-entry { - background-color: #722ed1; -} - -.function-icon.scan-print { - background-color: #52c41a; -} - -/* 功能文字 */ -.function-text { - font-size: 24rpx; - color: #333333; - text-align: center; - line-height: 1.2; -} - -/* 加载状态 */ -.loading-container { - text-align: center; - padding: 64rpx; -} - -.loading-spinner { - width: 48rpx; - height: 48rpx; - border: 4rpx solid #f0f0f0; - border-top: 4rpx solid #3cc51f; - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 16rpx; -} - -.loading-text { - font-size: 28rpx; - color: #909399; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* 响应式设计 */ -@media (max-width: 375px) { - .function-grid { - grid-template-columns: repeat(4, 1fr); - gap: 16rpx; - padding: 0 24rpx 24rpx; - } - - .function-icon { - width: 64rpx; - height: 64rpx; - font-size: 32rpx; - } - - .function-text { - font-size: 22rpx; - } - - .section-title { - font-size: 28rpx; - } - - .page-title { - font-size: 32rpx; - padding: 24rpx 0; - } -} +/* pages/production/production.wxss */ +.production-container { + padding: 0; + background-color: #ffffff; + min-height: 100vh; +} + +/* 页面标题 */ +.page-title { + font-size: 36rpx; + font-weight: bold; + color: #333333; + text-align: center; + padding: 32rpx 0; + background-color: #ffffff; + border-bottom: 1rpx solid #f0f0f0; +} + +/* 管理模块容器 */ +.management-section { + margin-bottom: 40rpx; + background-color: #ffffff; +} + +/* 模块标题头部 */ +.section-header { + display: flex; + align-items: center; + padding: 24rpx 32rpx 16rpx; + background-color: #ffffff; +} + +.section-title-bar { + width: 8rpx; + height: 32rpx; + background-color: #3cc51f; + margin-right: 16rpx; + border-radius: 4rpx; +} + +.section-title { + font-size: 32rpx; + font-weight: bold; + color: #333333; +} + +/* 功能网格 */ +.function-grid { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 24rpx; + padding: 0 32rpx 32rpx; + background-color: #ffffff; +} + +/* 功能项 */ +.function-item { + display: flex; + flex-direction: column; + align-items: center; + padding: 20rpx 8rpx; + background-color: #ffffff; + border-radius: 12rpx; + transition: all 0.2s ease; +} + +.function-item:active { + background-color: #f8f8f8; + transform: scale(0.95); +} + +/* 功能图标 */ +.function-icon { + width: 80rpx; + height: 80rpx; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 40rpx; + margin-bottom: 12rpx; + color: #ffffff; +} + +/* 猪档案图标颜色 */ +.function-icon.pig-archive { + background-color: #1890ff; +} + +.function-icon.estrus-record { + background-color: #fa8c16; +} + +.function-icon.mating-record { + background-color: #1890ff; +} + +.function-icon.pregnancy-check { + background-color: #faad14; +} + +.function-icon.farrowing-record { + background-color: #52c41a; +} + +.function-icon.weaning-record { + background-color: #1890ff; +} + +.function-icon.pen-transfer { + background-color: #f5222d; +} + +.function-icon.pen-exit { + background-color: #fa8c16; +} + +.function-icon.pen-settings { + background-color: #52c41a; +} + +.function-icon.batch-settings { + background-color: #1890ff; +} + +.function-icon.epidemic-warning { + background-color: #1890ff; +} + +/* 羊只管理图标颜色 */ +.function-icon.sheep-archive { + background-color: #1890ff; +} + +/* 家禽管理图标颜色 */ +.function-icon.poultry-archive { + background-color: #1890ff; +} + +/* 牛只管理图标颜色 */ +.function-icon.cattle-archive { + background-color: #1890ff; +} + +.function-icon.scan-entry { + background-color: #722ed1; +} + +.function-icon.scan-print { + background-color: #52c41a; +} + +/* 功能文字 */ +.function-text { + font-size: 24rpx; + color: #333333; + text-align: center; + line-height: 1.2; +} + +/* 加载状态 */ +.loading-container { + text-align: center; + padding: 64rpx; +} + +.loading-spinner { + width: 48rpx; + height: 48rpx; + border: 4rpx solid #f0f0f0; + border-top: 4rpx solid #3cc51f; + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 16rpx; +} + +.loading-text { + font-size: 28rpx; + color: #909399; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* 响应式设计 */ +@media (max-width: 375px) { + .function-grid { + grid-template-columns: repeat(4, 1fr); + gap: 16rpx; + padding: 0 24rpx 24rpx; + } + + .function-icon { + width: 64rpx; + height: 64rpx; + font-size: 32rpx; + } + + .function-text { + font-size: 22rpx; + } + + .section-title { + font-size: 28rpx; + } + + .page-title { + font-size: 32rpx; + padding: 24rpx 0; + } +} diff --git a/mini_program/farm-monitor-dashboard/pages/profile/profile.js b/mini_program/farm-monitor-dashboard/pages/profile/profile.js new file mode 100644 index 0000000..38d2d13 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/profile/profile.js @@ -0,0 +1,146 @@ +// pages/profile/profile.js - 我的页面 +Page({ + data: { + userInfo: { + name: 'AIOTAGRO', + phone: '15588823774', + avatar: '/images/logo.png' + }, + menuList: [ + { + id: 1, + title: '养殖系统设置', + icon: '/images/profile/settings.png', + url: '/pages/profile/system-settings/system-settings' + }, + { + id: 2, + title: '切换养殖场', + icon: '/images/profile/switch-farm.png', + url: '/pages/profile/switch-farm/switch-farm' + }, + { + id: 3, + title: '养殖场识别码', + icon: '/images/profile/qrcode.png', + url: '/pages/profile/farm-qrcode/farm-qrcode' + }, + { + id: 4, + title: '关联机构', + icon: '/images/profile/organization.png', + url: '/pages/profile/organization/organization' + }, + { + id: 5, + title: '首页自定义', + icon: '/images/profile/customize.png', + url: '/pages/profile/customize/customize' + }, + { + id: 6, + title: '养殖场设置', + icon: '/images/profile/farm-settings.png', + url: '/pages/profile/farm-settings/farm-settings' + } + ] + }, + + onLoad() { + console.log('我的页面加载') + this.loadUserInfo() + }, + + onShow() { + console.log('我的页面显示') + this.loadUserInfo() + }, + + // 加载用户信息 + loadUserInfo() { + const app = getApp() + + if (!app.globalData.isLogin) { + // 未登录，跳转到登录页 + wx.showModal({ + title: '提示', + content: '请先登录', + showCancel: false, + success: () => { + wx.redirectTo({ + url: '/pages/login/login' + }) + } + }) + return + } + + // 从全局数据或本地存储获取用户信息 + const userInfo = app.globalData.userInfo || wx.getStorageSync('userInfo') + + if (userInfo) { + this.setData({ + userInfo: { + name: userInfo.name || 'AIOTAGRO', + phone: userInfo.phone || userInfo.username || '15588823774', + avatar: userInfo.avatar || '/images/logo.png' + } + }) + } + }, + + // 菜单点击 + handleMenuClick(e) { + const index = e.currentTarget.dataset.index + const menu = this.data.menuList[index] + + if (menu.url) { + wx.navigateTo({ + url: menu.url, + fail: () => { + wx.showToast({ + title: '功能开发中', + icon: 'none' + }) + } + }) + } else { + wx.showToast({ + title: '功能开发中', + icon: 'none' + }) + } + }, + + // 退出登录 + handleLogout() { + wx.showModal({ + title: '提示', + content: '确定要退出登录吗？', + confirmText: '退出', + cancelText: '取消', + success: (res) => { + if (res.confirm) { + // 清除登录信息 + wx.clearStorageSync() + + const app = getApp() + app.globalData.isLogin = false + app.globalData.userInfo = null + app.globalData.token = '' + + wx.showToast({ + title: '已退出登录', + icon: 'success' + }) + + setTimeout(() => { + wx.reLaunch({ + url: '/pages/login/login' + }) + }, 1500) + } + } + }) + } +}) diff --git a/mini_program/farm-monitor-dashboard/pages/profile/profile.json b/mini_program/farm-monitor-dashboard/pages/profile/profile.json new file mode 100644 index 0000000..748b059 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/profile/profile.json @@ -0,0 +1,8 @@ +{ + "navigationBarTitleText": "我的", + "navigationBarBackgroundColor": "#ffffff", + "navigationBarTextStyle": "black", + "backgroundColor": "#f5f5f5", + "usingComponents": {} +} + diff --git a/mini_program/farm-monitor-dashboard/pages/profile/profile.wxml b/mini_program/farm-monitor-dashboard/pages/profile/profile.wxml index 8ed80b9..5f0a1a1 100644 --- a/mini_program/farm-monitor-dashboard/pages/profile/profile.wxml +++ b/mini_program/farm-monitor-dashboard/pages/profile/profile.wxml @@ -1,45 +1,36 @@ - - - - - 我的 - - ⋯ - − - ◎ - - - - - - - - - - {{item.icon}} - {{item.title}} - > - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + {{item.title}} + + + + + + + + + 退出登录 + + + + + + + diff --git a/mini_program/farm-monitor-dashboard/pages/profile/profile.wxss b/mini_program/farm-monitor-dashboard/pages/profile/profile.wxss index 0d5a60f..0f9d050 100644 --- a/mini_program/farm-monitor-dashboard/pages/profile/profile.wxss +++ b/mini_program/farm-monitor-dashboard/pages/profile/profile.wxss @@ -1,203 +1,123 @@ -/* pages/profile/profile.wxss */ -.profile-container { - background-color: #ffffff; - min-height: 100vh; -} - -/* 页面标题 */ -.page-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 20rpx 32rpx; - background-color: #ffffff; -} - -.page-title { - font-size: 36rpx; - font-weight: bold; - color: #333333; -} - -.header-controls { - display: flex; - gap: 16rpx; -} - -.control-btn { - width: 24rpx; - height: 24rpx; - border-radius: 50%; - background-color: #e0e0e0; - display: flex; - align-items: center; - justify-content: center; - font-size: 16rpx; - color: #666666; -} - -/* 用户信息区域 */ -.user-info-section { - display: flex; - align-items: center; - padding: 40rpx 32rpx; - background-color: #ffffff; -} - -.user-logo { - width: 80rpx; - height: 80rpx; - border-radius: 50%; - background-color: #3cc51f; - display: flex; - align-items: center; - justify-content: center; - margin-right: 24rpx; -} - -.logo-text { - font-size: 36rpx; - font-weight: bold; - color: #ffffff; -} - -.user-details { - display: flex; - flex-direction: column; -} - -.company-name { - font-size: 32rpx; - font-weight: bold; - color: #333333; - margin-bottom: 8rpx; -} - -.user-id { - font-size: 24rpx; - color: #999999; -} - -/* 功能菜单 */ -.menu-section { - background-color: #ffffff; - margin-top: 20rpx; -} - -.menu-item { - display: flex; - align-items: center; - padding: 32rpx; - border-bottom: 1rpx solid #f0f0f0; - background-color: #ffffff; -} - -.menu-item:last-child { - border-bottom: none; -} - -.menu-item:active { - background-color: #f8f8f8; -} - -.menu-icon { - font-size: 32rpx; - margin-right: 24rpx; - width: 40rpx; - text-align: center; -} - -.menu-title { - flex: 1; - font-size: 28rpx; - color: #333333; -} - -.menu-arrow { - font-size: 24rpx; - color: #c0c4cc; -} - -/* 退出登录 */ -.logout-section { - margin-top: 40rpx; - padding: 0 32rpx; -} - -.logout-btn { - width: 100%; - height: 80rpx; - background-color: #f5f5f5; - border-radius: 8rpx; - border: none; - display: flex; - align-items: center; - justify-content: center; -} - -.logout-btn:active { - background-color: #eeeeee; -} - -.logout-text { - font-size: 28rpx; - color: #333333; -} - -/* 响应式设计 */ -@media (max-width: 375px) { - .page-header { - padding: 16rpx 24rpx; - } - - .page-title { - font-size: 32rpx; - } - - .user-info-section { - padding: 32rpx 24rpx; - } - - .user-logo { - width: 64rpx; - height: 64rpx; - margin-right: 20rpx; - } - - .logo-text { - font-size: 28rpx; - } - - .company-name { - font-size: 28rpx; - } - - .user-id { - font-size: 22rpx; - } - - .menu-item { - padding: 28rpx 24rpx; - } - - .menu-icon { - font-size: 28rpx; - margin-right: 20rpx; - } - - .menu-title { - font-size: 26rpx; - } - - .logout-section { - padding: 0 24rpx; - } - - .logout-btn { - height: 72rpx; - } - - .logout-text { - font-size: 26rpx; - } -} \ No newline at end of file +/* pages/profile/profile.wxss - 我的页面样式 */ +page { + background-color: #f5f5f5; + height: 100%; +} + +.page-container { + display: flex; + flex-direction: column; + height: 100%; + background-color: #f5f5f5; +} + +.scroll-content { + flex: 1; +} + +/* 用户信息卡片 */ +.user-card { + background-color: #ffffff; + padding: 40rpx 30rpx; + margin-bottom: 20rpx; +} + +.user-info { + display: flex; + align-items: center; +} + +.avatar { + width: 120rpx; + height: 120rpx; + border-radius: 50%; + background-color: #f0f0f0; + margin-right: 24rpx; +} + +.user-details { + display: flex; + flex-direction: column; + justify-content: center; +} + +.user-name { + font-size: 36rpx; + font-weight: bold; + color: #333333; + margin-bottom: 12rpx; +} + +.user-phone { + font-size: 28rpx; + color: #999999; +} + +/* 功能菜单列表 */ +.menu-list { + background-color: #ffffff; + margin-bottom: 20rpx; +} + +.menu-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 32rpx 30rpx; + border-bottom: 1rpx solid #f0f0f0; + position: relative; +} + +.menu-item:last-child { + border-bottom: none; +} + +.menu-item:active { + background-color: #f5f5f5; +} + +.menu-left { + display: flex; + align-items: center; + flex: 1; +} + +.menu-icon { + width: 44rpx; + height: 44rpx; + margin-right: 20rpx; +} + +.menu-title { + font-size: 30rpx; + color: #333333; +} + +.arrow-icon { + width: 24rpx; + height: 24rpx; + opacity: 0.3; +} + +/* 退出登录区域 */ +.logout-section { + padding: 40rpx 30rpx; +} + +.logout-btn { + background-color: #ffffff; + border-radius: 12rpx; + padding: 28rpx; + text-align: center; + font-size: 32rpx; + color: #666666; +} + +.logout-btn:active { + background-color: #f5f5f5; +} + +/* 底部留白 */ +.bottom-space { + height: 100rpx; +} diff --git a/mini_program/farm-monitor-dashboard/pages/profile/图标说明.md b/mini_program/farm-monitor-dashboard/pages/profile/图标说明.md new file mode 100644 index 0000000..82911f5 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/pages/profile/图标说明.md @@ -0,0 +1,53 @@ +# 我的页面图标说明 + +## 需要的图标列表 + +### 菜单图标（6个） +放置目录：`/images/profile/` + +1. `settings.png` - 养殖系统设置（齿轮图标） +2. `switch-farm.png` - 切换养殖场（切换/交换图标） +3. `qrcode.png` - 养殖场识别码（二维码图标） +4. `organization.png` - 关联机构（组织/机构图标） +5. `customize.png` - 首页自定义（编辑/自定义图标） +6. `farm-settings.png` - 养殖场设置（设置/农场图标） + +### 其他图标 +放置目录：`/images/` + +1. `arrow-right.png` - 右箭头（灰色箭头，用于菜单项） +2. `logo.png` - AIOTAGRO Logo（用于用户头像） +3. `avatar-default.png` - 默认头像 + +## 图标规格 + +### 菜单图标 +- 尺寸：88x88 像素 +- 格式：PNG（透明背景） +- 颜色：单色或品牌色 +- 风格：线性图标 + +### 箭头图标 +- 尺寸：48x48 像素 +- 格式：PNG +- 颜色：灰色 (#999999) + +### 头像/Logo +- 尺寸：240x240 像素 +- 格式：PNG +- 样式：圆形或方形（CSS控制） + +## 获取方式 +1. 从 iconfont.cn 搜索下载 +2. 请设计师制作 +3. 暂时可使用文字代替图标 + +## 推荐搜索关键词 +- 设置：settings, gear, config +- 切换：switch, exchange, swap +- 二维码：qrcode, barcode +- 机构：organization, building, company +- 自定义：customize, edit, pencil +- 农场设置：farm, agriculture, settings +- 箭头：arrow, right, chevron + diff --git a/mini_program/farm-monitor-dashboard/sitemap.json b/mini_program/farm-monitor-dashboard/sitemap.json index 55d1d29..0c1a305 100644 --- a/mini_program/farm-monitor-dashboard/sitemap.json +++ b/mini_program/farm-monitor-dashboard/sitemap.json @@ -1,7 +1,7 @@ -{ - "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", - "rules": [{ - "action": "allow", - "page": "*" - }] -} +{ + "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", + "rules": [{ + "action": "allow", + "page": "*" + }] +} diff --git a/mini_program/farm-monitor-dashboard/test-fence.html b/mini_program/farm-monitor-dashboard/test-fence.html index e501a0a..d72be49 100644 --- a/mini_program/farm-monitor-dashboard/test-fence.html +++ b/mini_program/farm-monitor-dashboard/test-fence.html @@ -1,856 +1,856 @@ - - - - - - 电子围栏测试页面 - - - - -
- -
-
- - 电子围栏 -
-
- - - - -
-
- - -
-
-
- - -
-
-
智能采集器：4
-
智能设备：4
-
-
-
各德
-
设备：24065000912更多>>
-
-
切换地图
-
- - -
- - -
- - -
-
- 新增围栏 - -
- - - - - -
-
- - -
- -
- - -
- -
- - -
- -
- -
-
- 点击地图添加坐标点 -
-
-
- -
- - -
-
-
- - - -
- - - + + + + + + 电子围栏测试页面 + + + + +
+ +
+
+ + 电子围栏 +
+
+ + + + +
+
+ + +
+
+
+ + +
+
+
智能采集器：4
+
智能设备：4
+
+
+
各德
+
设备：24065000912更多>>
+
+
切换地图
+
+ + +
+ + +
+ + +
+
+ 新增围栏 + +
+ + + + + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+ 点击地图添加坐标点 +
+
+
+ +
+ + +
+
+
+ + + +
+ + + \ No newline at end of file diff --git a/mini_program/farm-monitor-dashboard/test-map.html b/mini_program/farm-monitor-dashboard/test-map.html index 67f0441..e13397d 100644 --- a/mini_program/farm-monitor-dashboard/test-map.html +++ b/mini_program/farm-monitor-dashboard/test-map.html @@ -1,209 +1,209 @@ - - - - - - 百度地图电子围栏测试 - - - -
-

百度地图电子围栏测试

- -
- - - - -
- -
- 状态: 准备就绪 -
- -
- -
- -
- 操作日志:
-
-
- - - + + + + + + 百度地图电子围栏测试 + + + +
+

百度地图电子围栏测试

+ +
+ + + + +
+ +
+ 状态: 准备就绪 +
+ +
+ +
+ +
+ 操作日志:
+
+
+ + + \ No newline at end of file diff --git a/mini_program/farm-monitor-dashboard/utils/api.js b/mini_program/farm-monitor-dashboard/utils/api.js new file mode 100644 index 0000000..3d1b827 --- /dev/null +++ b/mini_program/farm-monitor-dashboard/utils/api.js @@ -0,0 +1,375 @@ +// utils/api.js - API接口工具类 + +/** + * 基础请求配置 + */ +const API_BASE_URL = 'https://ad.ningmuyun.com/farm/api' + +/** + * 统一请求方法 + * @param {String} url - 接口路径 + * @param {String} method - 请求方法 + * @param {Object} data - 请求数据 + * @param {Boolean} needAuth - 是否需要token + */ +function request(url, method = 'GET', data = {}, needAuth = true) { + return new Promise((resolve, reject) => { + // 显示加载提示 + wx.showLoading({ + title: '加载中...', + mask: true + }) + + // 构建请求头 + const header = { + 'Content-Type': 'application/json' + } + + // 如果需要认证，添加token + if (needAuth) { + const token = wx.getStorageSync('token') + if (token) { + header['Authorization'] = `Bearer ${token}` + // 或者根据后端要求使用其他格式 + // header['token'] = token + } + } + + wx.request({ + url: API_BASE_URL + url, + method: method, + data: data, + header: header, + success: (res) => { + wx.hideLoading() + + // 根据后端返回的数据结构处理 + if (res.statusCode === 200) { + console.log('API请求成功:', url, res) + + // 支持多种返回格式 + // 格式1: { success: true, ... } + // 格式2: { code: 0, data: {}, message: '' } + if (res.data.success === true || res.data.code === 0 || res.data.code === 200) { + resolve(res.data) + } else { + // 业务错误 + wx.showToast({ + title: res.data.message || res.data.msg || '请求失败', + icon: 'none', + duration: 2000 + }) + reject(res.data) + } + } else if (res.statusCode === 401) { + // 未授权，跳转到登录页 + console.error('API请求未授权:', url, res.statusCode) + wx.showToast({ + title: '登录已过期，请重新登录', + icon: 'none' + }) + setTimeout(() => { + wx.reLaunch({ + url: '/pages/login/login' + }) + }, 1500) + reject(res) + } else if (res.statusCode === 502 || res.statusCode === 503 || res.statusCode === 504) { + // 服务器网关错误 + console.error('API服务器错误:', url, res.statusCode) + wx.showToast({ + title: '服务器暂时不可用，请稍后重试', + icon: 'none', + duration: 2000 + }) + reject({ statusCode: res.statusCode, message: '服务器错误', url }) + } else { + // 其他错误 + console.error('API请求错误:', url, res.statusCode, res) + wx.showToast({ + title: `服务器错误(${res.statusCode})`, + icon: 'none' + }) + reject(res) + } + }, + fail: (err) => { + wx.hideLoading() + console.error('API请求失败:', url, err) + + wx.showToast({ + title: '网络请求失败', + icon: 'none', + duration: 2000 + }) + reject(err) + } + }) + }) +} + +/** + * GET请求 + */ +function get(url, data = {}, needAuth = true) { + return request(url, 'GET', data, needAuth) +} + +/** + * POST请求 + */ +function post(url, data = {}, needAuth = true) { + return request(url, 'POST', data, needAuth) +} + +/** + * PUT请求 + */ +function put(url, data = {}, needAuth = true) { + return request(url, 'PUT', data, needAuth) +} + +/** + * DELETE请求 + */ +function del(url, data = {}, needAuth = true) { + return request(url, 'DELETE', data, needAuth) +} + +/** + * API接口定义 + */ +const API = { + // ==================== 认证相关 ==================== + + /** + * 用户登录 + * @param {String} username - 用户名 + * @param {String} password - 密码 + */ + login: (username, password) => { + return post('/auth/login', { username, password }, false) + }, + + /** + * 用户登出 + */ + logout: () => { + return post('/auth/logout') + }, + + /** + * 获取用户信息 + */ + getUserInfo: () => { + return get('/auth/userinfo') + }, + + // ==================== 首页相关 ==================== + + /** + * 获取首页统计数据 + */ + getHomeStats: (type = 'collar') => { + return get('/home/stats', { type }) + }, + + /** + * 获取告警列表 + */ + getAlertList: (params = {}) => { + return get('/alerts', params) + }, + + // ==================== 牛只管理 ==================== + + /** + * 获取牛只列表 + */ + getCattleList: (params = {}) => { + return get('/cattle/list', params) + }, + + /** + * 获取牛只详情 + */ + getCattleDetail: (id) => { + return get(`/cattle/${id}`) + }, + + // ==================== 设备管理 ==================== + + /** + * 获取设备列表 + */ + getDeviceList: (params = {}) => { + return get('/device/list', params) + }, + + /** + * 获取设备详情 + */ + getDeviceDetail: (id) => { + return get(`/device/${id}`) + }, + + // ==================== 智能设备 ==================== + + /** + * 获取智能项圈列表 + */ + getCollarList: (params = {}) => { + return get('/smart-devices/collars', params) + }, + + /** + * 获取智能耳标列表 + */ + getEartagList: (params = {}) => { + return get('/smart-devices/eartags', params) + }, + + /** + * 获取智能主机列表 + */ + getHostList: (params = {}) => { + return get('/smart-devices/hosts', params) + }, + + /** + * 获取电子围栏列表 + */ + getFenceList: (params = {}) => { + return get('/electronic-fence', params) + }, + + /** + * 获取电子围栏详情 + */ + getFenceDetail: (id) => { + return get(`/electronic-fence/${id}`) + }, + + // ==================== 牛只档案 ==================== + + /** + * 获取牛只档案列表 + */ + getCattleList: (params = {}) => { + return get('/iot-cattle/public', params) + }, + + /** + * 获取牛只档案详情 + */ + getCattleDetail: (id) => { + return get(`/iot-cattle/public/${id}`) + }, + + // ==================== 转栏记录 ==================== + + /** + * 获取转栏记录列表 + */ + getTransferRecords: (params = {}) => { + return get('/cattle-transfer-records', params) + }, + + /** + * 获取转栏记录详情 + */ + getTransferRecordDetail: (id) => { + return get(`/cattle-transfer-records/${id}`) + }, + + // ==================== 离栏记录 ==================== + + /** + * 获取离栏记录列表 + */ + getExitRecords: (params = {}) => { + return get('/cattle-exit-records', params) + }, + + /** + * 获取离栏记录详情 + */ + getExitRecordDetail: (id) => { + return get(`/cattle-exit-records/${id}`) + }, + + // ==================== 栏舍设置 ==================== + + /** + * 获取栏舍列表 + */ + getPenList: (params = {}) => { + return get('/cattle-pens', params) + }, + + /** + * 获取栏舍详情 + */ + getPenDetail: (id) => { + return get(`/cattle-pens/${id}`) + }, + + // ==================== 批次设置 ==================== + + /** + * 获取批次列表 + */ + getBatchList: (params = {}) => { + return get('/cattle-batches', params) + }, + + /** + * 获取批次详情 + */ + getBatchDetail: (id) => { + return get(`/cattle-batches/${id}`) + }, + + // ==================== 智能预警 ==================== + + /** + * 获取智能项圈预警列表 + */ + getCollarAlerts: (params = {}) => { + return get('/smart-alerts/public/collar', params) + }, + + /** + * 获取智能项圈预警详情 + */ + getCollarAlertDetail: (id) => { + return get(`/smart-alerts/public/collar/${id}`) + }, + + /** + * 获取智能耳标预警列表 + */ + getEartagAlerts: (params = {}) => { + return get('/smart-alerts/public/eartag', params) + }, + + /** + * 获取智能耳标预警详情 + */ + getEartagAlertDetail: (id) => { + return get(`/smart-alerts/public/eartag/${id}`) + }, + + // ==================== 更多接口... ==================== + // 根据实际需要继续添加 +} + +module.exports = { + request, + get, + post, + put, + del, + API +} +