refactor(app): 项目从 uni-app Vue3 整体迁移至 Taro4 + React18
- 移除 uni-app 入口（main.js/App.vue/pages.json/manifest.json/uni.scss 等）， 原 pages/api/utils/store 迁移至 src/ 目录并重写为 TSX + module.scss - 新增 Taro 编译配置（config/index.ts cssModules 修复、babel、tsconfig、 eslint、vitest）与微信项目配置 project.config.json - 页面基础组件自绘替代 uview-plus：navbar/popup/tabs/loading/empty/vital-wave - 状态管理迁移至 Redux Toolkit（auth/device/event/scene slices） - BLE 模块整体迁至 src/ble，新增 adapter 适配层与 useBle hook， 新增 packet/parsers/profiles 单元测试 - 厂家协议文档归档至 docs/vendor/
This commit is contained in:
parent
c7cebc2fc9
commit
c65f15d3a0
|
|
@ -0,0 +1,45 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
parser: '@typescript-eslint/parser',
|
||||
parserOptions: { ecmaVersion: 2022, sourceType: 'module', ecmaFeatures: { jsx: true } },
|
||||
plugins: ['@typescript-eslint', 'react', 'react-hooks'],
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react-hooks/recommended'
|
||||
],
|
||||
settings: { react: { version: '18.3' } },
|
||||
rules: {
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
'react/prop-types': 'off',
|
||||
'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
|
||||
// 单测 import 未类型化的纯 JS BLE 资产时需要 @ts-ignore
|
||||
'@typescript-eslint/ban-ts-comment': 'off'
|
||||
},
|
||||
ignorePatterns: [
|
||||
'dist/',
|
||||
'node_modules/',
|
||||
'src/ble/core/',
|
||||
'src/ble/parsers/',
|
||||
'src/ble/protocols/',
|
||||
'src/ble/discovery.js',
|
||||
'src/ble/modules/',
|
||||
// 旧 uni-app 源码（P5 整体删除，不参与新工程 lint）
|
||||
'pages/',
|
||||
'components/',
|
||||
'api/',
|
||||
'store/',
|
||||
'hooks/',
|
||||
'utils/',
|
||||
'constants/',
|
||||
'styles/',
|
||||
'scripts/',
|
||||
// 根目录旧 uni-app 入口
|
||||
'main.js',
|
||||
'uni.promisify.adaptor.js',
|
||||
// CommonJS 配置文件
|
||||
'babel.config.js',
|
||||
'.eslintrc.cjs'
|
||||
]
|
||||
}
|
||||
|
|
@ -1,23 +1,25 @@
|
|||
node_modules/
|
||||
unpackage/
|
||||
.hbuilderx/
|
||||
dist/
|
||||
.DS_Store
|
||||
.codex-tasks/
|
||||
|
||||
.idea/
|
||||
|
||||
.vscode/
|
||||
|
||||
.swc/
|
||||
|
||||
*.log
|
||||
.hbuilderx/
|
||||
.codex-tasks/
|
||||
.codegraph/
|
||||
.claude/
|
||||
CLAUDE.md
|
||||
AGENTS.md
|
||||
|
||||
.prettierignore
|
||||
.prettierrc
|
||||
|
||||
# Graphify (generated)
|
||||
graphify-out/
|
||||
|
||||
# Claude Code && Codex
|
||||
.claude/
|
||||
CLAUDE.md
|
||||
AGENTS.md
|
||||
|
||||
# Codegraph
|
||||
.codegraph/
|
||||
|
||||
|
|
|
|||
27
App.vue
27
App.vue
|
|
@ -1,27 +0,0 @@
|
|||
<script>
|
||||
import { ensureCurrentPageAuth } from './utils/auth'
|
||||
|
||||
/**
|
||||
* 应用根组件：仅承载全局生命周期与登录态兜底校验。
|
||||
*/
|
||||
export default {
|
||||
onLaunch() {
|
||||
console.log('App Launch')
|
||||
},
|
||||
onShow() {
|
||||
console.log('App Show')
|
||||
|
||||
// 每次回到前台时检查当前页权限，避免未登录状态残留在受保护页面。
|
||||
ensureCurrentPageAuth()
|
||||
},
|
||||
onHide() {
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'uview-plus/index.scss';
|
||||
|
||||
/* 每个页面公共 css（当前按需在页面中引入 common.css） */
|
||||
</style>
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
import request from '@/api/http/client'
|
||||
|
||||
// 后端就绪后置为 false 即可恢复真实请求。
|
||||
const USE_MOCK = true
|
||||
|
||||
// 模拟设备列表数据（后端 /device/list 就绪后删除）。
|
||||
const MOCK_DEVICES = [
|
||||
{ id: 1, name: '客厅体征监测仪', model: 'ED713', online: true },
|
||||
{ id: 2, name: '卧室体征监测仪', model: 'ED713', online: false },
|
||||
{ id: 3, name: '书房跌倒检测雷达', model: 'ED719', online: true },
|
||||
{ id: 4, name: '走廊跌倒检测雷达', model: 'ED719', online: false }
|
||||
]
|
||||
|
||||
/**
|
||||
* 获取指定场所下的设备列表。
|
||||
* 约定：data 为数组，每项至少含 { id, name, model, online }，model 取值 ED713 | ED719。
|
||||
* @param {*} sceneId 场景 id，全部/未选择时可传 null
|
||||
*/
|
||||
export function getDeviceList(sceneId) {
|
||||
if (USE_MOCK) {
|
||||
// 模拟网络延迟，让 loading 态可见。
|
||||
return new Promise((resolve) => setTimeout(() => resolve(MOCK_DEVICES), 500))
|
||||
}
|
||||
return request.get('/device/list', { sceneId })
|
||||
}
|
||||
|
||||
// 模拟 ED713 实时体征数据（后端 /device/vitals 就绪后删除）。
|
||||
// 字段与 web 端 runTimeInfo.properties 对齐；枚举值见 detail 页映射表。
|
||||
const MOCK_VITALS = {
|
||||
heartRate: 72,
|
||||
respiratoryRate: 16,
|
||||
bodyMovement: 3,
|
||||
moveState: 3,
|
||||
onbedStatus: 1,
|
||||
bodyStatus: 2,
|
||||
bodyPosition: 8
|
||||
}
|
||||
|
||||
// 心率读数模拟状态：跨调用保留最近 50 个读数（与 web 端 pageSize:50 一致），
|
||||
// 每次轮询推进 2~3 个新读数、挤出最旧的——等价于 web 端每 3 秒按 createTime 倒序重拉最新 50 条。
|
||||
const heartState = {
|
||||
series: [],
|
||||
value: 72
|
||||
}
|
||||
|
||||
// 心率读数小幅随机游走（60~90 BPM）。
|
||||
function driftHeartRate() {
|
||||
heartState.value += Math.round((Math.random() - 0.5) * 4)
|
||||
heartState.value = Math.min(90, Math.max(60, heartState.value))
|
||||
return heartState.value
|
||||
}
|
||||
|
||||
// 初始预填 50 个读数，首屏即有完整曲线。
|
||||
for (let i = 0; i < 50; i++) {
|
||||
heartState.series.push(driftHeartRate())
|
||||
}
|
||||
|
||||
// 推进若干新读数并保留最近 50 个。
|
||||
function pushHeartReadings() {
|
||||
const n = 2 + Math.round(Math.random())
|
||||
for (let i = 0; i < n; i++) {
|
||||
heartState.series.push(driftHeartRate())
|
||||
}
|
||||
if (heartState.series.length > 50) {
|
||||
heartState.series = heartState.series.slice(-50)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 ED713 设备实时体征属性。
|
||||
* 约定：data 含 { heartRate, respiratoryRate, bodyMovement, moveState, onbedStatus, bodyStatus, bodyPosition }。
|
||||
* @param {*} deviceId 设备 id
|
||||
*/
|
||||
export function getVitalSigns(deviceId) {
|
||||
if (USE_MOCK) {
|
||||
const heartRate = driftHeartRate()
|
||||
return new Promise((resolve) =>
|
||||
setTimeout(() => resolve({ ...MOCK_VITALS, heartRate, deviceId }), 300)
|
||||
)
|
||||
}
|
||||
return request.get('/device/vitals', { deviceId })
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取心率历史序列（与 web 端一致：最近 50 条心率读数、按时间升序喂给面积图）。
|
||||
* 约定：data 为 number 数组；每次调用推进若干新读数，曲线随轮询向左滚动。
|
||||
* @param {*} deviceId 设备 id
|
||||
*/
|
||||
export function getHeartRateHistory(deviceId) {
|
||||
if (USE_MOCK) {
|
||||
pushHeartReadings()
|
||||
return new Promise((resolve) =>
|
||||
setTimeout(() => resolve([...heartState.series]), 300)
|
||||
)
|
||||
}
|
||||
return request.get('/device/heart-history', { deviceId })
|
||||
}
|
||||
|
|
@ -1,268 +0,0 @@
|
|||
import { DEFAULT_BASE_URL, DEFAULT_TIMEOUT, SUCCESS_CODE } from '@/constants/request'
|
||||
import { clearAuth, getToken, isAuthEnabled, redirectToLogin } from '@/utils/auth'
|
||||
import { showToast } from '@/utils/toast'
|
||||
|
||||
let baseURL = DEFAULT_BASE_URL
|
||||
|
||||
/**
|
||||
* 拼接请求地址：支持绝对地址 / 相对地址 / 仅 baseURL。
|
||||
*/
|
||||
function buildUrl(url = '') {
|
||||
if (!url) {
|
||||
return baseURL
|
||||
}
|
||||
|
||||
if (/^https?:\/\//.test(url)) {
|
||||
return url
|
||||
}
|
||||
|
||||
if (url.startsWith('/')) {
|
||||
return `${baseURL}${url}`
|
||||
}
|
||||
|
||||
return `${baseURL}/${url}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 构造请求头。
|
||||
* @param {Record<string, string>} customHeader 自定义请求头
|
||||
* @param {boolean} needAuth 是否需要携带 token
|
||||
* @param {boolean} withJson 是否设置 JSON Content-Type
|
||||
* @returns {Record<string, string>}
|
||||
*/
|
||||
function buildHeaders(customHeader = {}, needAuth = true, withJson = true) {
|
||||
const headers = {
|
||||
...(withJson ? { 'Content-Type': 'application/json' } : {}),
|
||||
...customHeader
|
||||
}
|
||||
|
||||
if (needAuth && isAuthEnabled()) {
|
||||
const token = getToken()
|
||||
if (token) {
|
||||
headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
}
|
||||
|
||||
return headers
|
||||
}
|
||||
|
||||
/**
|
||||
* 401 统一处理：清理本地登录态并回到登录页。
|
||||
*/
|
||||
function handleUnauthorized() {
|
||||
if (!isAuthEnabled()) {
|
||||
return
|
||||
}
|
||||
|
||||
clearAuth()
|
||||
redirectToLogin()
|
||||
}
|
||||
|
||||
/**
|
||||
* 统一解析后端响应结构。
|
||||
* 约定：`code === 0` 为成功，最终返回 `data` 字段。
|
||||
*/
|
||||
function resolveResponseData(responseData) {
|
||||
const code = typeof responseData?.code === 'number' ? responseData.code : SUCCESS_CODE
|
||||
|
||||
if (code !== SUCCESS_CODE) {
|
||||
const error = new Error(responseData?.message || '业务处理失败')
|
||||
error.code = code
|
||||
throw error
|
||||
}
|
||||
|
||||
return responseData?.data !== undefined ? responseData.data : responseData
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用请求方法。
|
||||
* @param {object} options uni.request 参数扩展
|
||||
* @returns {Promise<any>}
|
||||
*/
|
||||
function request(options = {}) {
|
||||
const {
|
||||
url,
|
||||
method = 'GET',
|
||||
data,
|
||||
header,
|
||||
timeout = DEFAULT_TIMEOUT,
|
||||
needAuth = true,
|
||||
showErrorToast = true,
|
||||
showToast: showToastLegacy
|
||||
} = options
|
||||
|
||||
const shouldShowErrorToast = typeof showToastLegacy === 'boolean'
|
||||
? showToastLegacy
|
||||
: showErrorToast
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: buildUrl(url),
|
||||
method: String(method).toUpperCase(),
|
||||
data,
|
||||
timeout,
|
||||
header: buildHeaders(header, needAuth, true),
|
||||
success: (res) => {
|
||||
const { statusCode = 0, data: responseData = {} } = res
|
||||
|
||||
if (statusCode === 401) {
|
||||
handleUnauthorized()
|
||||
reject(new Error('登录状态已失效'))
|
||||
return
|
||||
}
|
||||
|
||||
if (statusCode < 200 || statusCode >= 300) {
|
||||
const message = responseData?.message || `网络错误(${statusCode})`
|
||||
if (shouldShowErrorToast) {
|
||||
showToast(message)
|
||||
}
|
||||
reject(new Error(message))
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const finalData = resolveResponseData(responseData)
|
||||
resolve(finalData)
|
||||
} catch (error) {
|
||||
if (error.code === 401) {
|
||||
handleUnauthorized()
|
||||
}
|
||||
if (shouldShowErrorToast) {
|
||||
showToast(error.message)
|
||||
}
|
||||
reject(error)
|
||||
}
|
||||
},
|
||||
fail: (error) => {
|
||||
if (shouldShowErrorToast) {
|
||||
showToast('网络异常，请稍后重试')
|
||||
}
|
||||
reject(error)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 语义化快捷方法，保持页面侧调用简洁。
|
||||
request.get = (url, params = {}, config = {}) => {
|
||||
return request({
|
||||
url,
|
||||
method: 'GET',
|
||||
data: params,
|
||||
...config
|
||||
})
|
||||
}
|
||||
|
||||
request.post = (url, data = {}, config = {}) => {
|
||||
return request({
|
||||
url,
|
||||
method: 'POST',
|
||||
data,
|
||||
...config
|
||||
})
|
||||
}
|
||||
|
||||
request.put = (url, data = {}, config = {}) => {
|
||||
return request({
|
||||
url,
|
||||
method: 'PUT',
|
||||
data,
|
||||
...config
|
||||
})
|
||||
}
|
||||
|
||||
request.delete = (url, data = {}, config = {}) => {
|
||||
return request({
|
||||
url,
|
||||
method: 'DELETE',
|
||||
data,
|
||||
...config
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传文件封装：保持与 request 一致的错误处理与鉴权策略。
|
||||
*/
|
||||
request.upload = (url, filePath, name = 'file', formData = {}, config = {}) => {
|
||||
const {
|
||||
header = {},
|
||||
needAuth = true,
|
||||
showErrorToast = true,
|
||||
showToast: showToastLegacy
|
||||
} = config
|
||||
|
||||
const shouldShowErrorToast = typeof showToastLegacy === 'boolean'
|
||||
? showToastLegacy
|
||||
: showErrorToast
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: buildUrl(url),
|
||||
filePath,
|
||||
name,
|
||||
formData,
|
||||
header: buildHeaders(header, needAuth, false),
|
||||
success: (res) => {
|
||||
if (res.statusCode === 401) {
|
||||
handleUnauthorized()
|
||||
reject(new Error('登录状态已失效'))
|
||||
return
|
||||
}
|
||||
|
||||
if (res.statusCode < 200 || res.statusCode >= 300) {
|
||||
const message = `上传失败(${res.statusCode})`
|
||||
if (shouldShowErrorToast) {
|
||||
showToast(message)
|
||||
}
|
||||
reject(new Error(message))
|
||||
return
|
||||
}
|
||||
|
||||
let responseData = {}
|
||||
try {
|
||||
responseData = JSON.parse(res.data || '{}')
|
||||
} catch (error) {
|
||||
if (shouldShowErrorToast) {
|
||||
showToast('上传返回数据格式错误')
|
||||
}
|
||||
reject(error)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const finalData = resolveResponseData(responseData)
|
||||
resolve(finalData)
|
||||
} catch (error) {
|
||||
if (error.code === 401) {
|
||||
handleUnauthorized()
|
||||
}
|
||||
if (shouldShowErrorToast) {
|
||||
showToast(error.message)
|
||||
}
|
||||
reject(error)
|
||||
}
|
||||
},
|
||||
fail: (error) => {
|
||||
if (shouldShowErrorToast) {
|
||||
showToast('上传失败，请稍后重试')
|
||||
}
|
||||
reject(error)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 动态设置 API 基础地址。
|
||||
*/
|
||||
request.setBaseUrl = (url) => {
|
||||
if (!url || typeof url !== 'string') {
|
||||
return
|
||||
}
|
||||
|
||||
baseURL = url.replace(/\/$/, '')
|
||||
}
|
||||
|
||||
request.getBaseUrl = () => baseURL
|
||||
|
||||
export default request
|
||||
23
api/scene.js
23
api/scene.js
|
|
@ -1,23 +0,0 @@
|
|||
import request from '@/api/http/client'
|
||||
|
||||
// 后端就绪后置为 false 即可恢复真实请求。
|
||||
const USE_MOCK = true
|
||||
|
||||
// 模拟场景列表数据（后端 /scene/list 就绪后删除）。
|
||||
const MOCK_SCENES = [
|
||||
{ id: 1, name: '家里' },
|
||||
{ id: 2, name: '养老院' },
|
||||
{ id: 3, name: '社区中心' }
|
||||
]
|
||||
|
||||
/**
|
||||
* 获取场景列表。
|
||||
* 约定：data 为数组，每项至少含 { id, name }，多余字段不影响前端。
|
||||
*/
|
||||
export function getSceneList() {
|
||||
if (USE_MOCK) {
|
||||
// 模拟网络延迟，让 loading 态可见。
|
||||
return new Promise((resolve) => setTimeout(() => resolve(MOCK_SCENES), 500))
|
||||
}
|
||||
return request.get('/scene/list')
|
||||
}
|
||||
30
api/user.js
30
api/user.js
|
|
@ -1,30 +0,0 @@
|
|||
import request from '@/api/http/client'
|
||||
|
||||
/**
|
||||
* 发送短信验证码。
|
||||
* @param {string} mobile 手机号
|
||||
*/
|
||||
export function sendSmsCode(mobile) {
|
||||
return request.post('/auth/sms-code', { mobile }, { needAuth: false })
|
||||
}
|
||||
|
||||
/**
|
||||
* 手机号 + 验证码登录。
|
||||
*/
|
||||
export function loginByMobile(mobile, code) {
|
||||
return request.post('/auth/mobile-login', { mobile, code }, { needAuth: false })
|
||||
}
|
||||
|
||||
/**
|
||||
* 微信登录。
|
||||
*/
|
||||
export function loginByWechat(loginCode) {
|
||||
return request.post('/auth/wechat-login', { code: loginCode }, { needAuth: false })
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前用户信息。
|
||||
*/
|
||||
export function getUserProfile() {
|
||||
return request.get('/user/profile')
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
// 注意：不要开启 useBuiltIns:'usage'——会给 node_modules 里 Taro 自身代码注入 core-js 导入，
|
||||
// 形成 taro 入口 → @tarojs/shared → core-js → (document alias) → taro 入口 的循环求值，
|
||||
// 运行时崩溃 "Cannot read property 'F' of undefined"（微信环境 document getter 读到半初始化状态）
|
||||
['taro', { framework: 'react', ts: true }]
|
||||
]
|
||||
}
|
||||
|
|
@ -1,179 +0,0 @@
|
|||
<!-- 心率历史波形：canvas 自绘红心电风格面积图（复刻 web 端 TinyArea 视觉） -->
|
||||
<template>
|
||||
<view class="wave-box">
|
||||
<canvas
|
||||
:id="canvasId"
|
||||
class="wave-canvas"
|
||||
:canvas-id="canvasId"
|
||||
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
|
||||
/>
|
||||
<!-- ECG 风格虚线分割：上/中/下三部分 -->
|
||||
<view class="wave-divider wave-divider--top" />
|
||||
<view class="wave-divider wave-divider--bottom" />
|
||||
<view v-if="empty" class="wave-empty">
|
||||
<text>暂无数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 与 props.canvasHeight 保持一致；波形上下各留 8px 呼吸空间
|
||||
const V_PADDING = 8
|
||||
|
||||
export default {
|
||||
name: 'vital-wave',
|
||||
props: {
|
||||
// 数据点（升序 number 数组）
|
||||
points: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// canvas id，多实例场景需外部保证唯一
|
||||
canvasId: {
|
||||
type: String,
|
||||
default: 'vitalWave'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasWidth: 200, // 容器实际宽（px），mounted 后测量
|
||||
canvasHeight: 110
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
empty() {
|
||||
return !this.points || this.points.length < 2
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 数据变化重绘（详情页轮询刷新时触发）
|
||||
points() {
|
||||
this.draw()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.measure()
|
||||
},
|
||||
methods: {
|
||||
// 测量容器宽度：宽度自适应父级，高度固定 110px 与 web 端一致
|
||||
measure() {
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.in(this)
|
||||
.select('.wave-box')
|
||||
.boundingClientRect((rect) => {
|
||||
if (rect && rect.width > 0) {
|
||||
this.canvasWidth = Math.floor(rect.width)
|
||||
this.$nextTick(() => this.draw())
|
||||
}
|
||||
})
|
||||
.exec()
|
||||
},
|
||||
// 绘制平滑面积图（对齐 web 端 TinyArea：smooth 曲线 + 自适应 y 值域 + padding:0）
|
||||
draw() {
|
||||
if (this.empty) return
|
||||
const ctx = uni.createCanvasContext(this.canvasId, this)
|
||||
const w = this.canvasWidth
|
||||
const h = this.canvasHeight
|
||||
const pts = this.points
|
||||
const min = Math.min(...pts)
|
||||
const max = Math.max(...pts)
|
||||
// 值域映射到画布；无波动时居中画直线
|
||||
const span = max - min || 1
|
||||
|
||||
const xAt = (i) => (pts.length <= 1 ? 0 : (i / (pts.length - 1)) * w)
|
||||
const yAt = (v) => {
|
||||
const t = (v - min) / span
|
||||
return h - V_PADDING - t * (h - V_PADDING * 2)
|
||||
}
|
||||
|
||||
// smooth: true —— Catmull-Rom 样条插值（G2 smooth 的实现方式），
|
||||
// 每个点作为控制点求相邻点间的三次贝塞尔，曲线过每个数据点
|
||||
const pathTo = (closeBottom) => {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(xAt(0), yAt(pts[0]))
|
||||
if (pts.length === 2) {
|
||||
ctx.lineTo(xAt(1), yAt(pts[1]))
|
||||
}
|
||||
for (let i = 0; i < pts.length - 1; i++) {
|
||||
const x0 = xAt(Math.max(0, i - 1))
|
||||
const y0 = yAt(pts[Math.max(0, i - 1)])
|
||||
const x1 = xAt(i)
|
||||
const y1 = yAt(pts[i])
|
||||
const x2 = xAt(i + 1)
|
||||
const y2 = yAt(pts[i + 1])
|
||||
const x3 = xAt(Math.min(pts.length - 1, i + 2))
|
||||
const y3 = yAt(pts[Math.min(pts.length - 1, i + 2)])
|
||||
// Catmull-Rom → 贝塞尔控制点
|
||||
const c1x = x1 + (x2 - x0) / 6
|
||||
const c1y = y1 + (y2 - y0) / 6
|
||||
const c2x = x2 - (x3 - x1) / 6
|
||||
const c2y = y2 - (y3 - y1) / 6
|
||||
ctx.bezierCurveTo(c1x, c1y, c2x, c2y, x2, y2)
|
||||
}
|
||||
if (closeBottom) {
|
||||
ctx.lineTo(w, h)
|
||||
ctx.lineTo(0, h)
|
||||
ctx.closePath()
|
||||
}
|
||||
}
|
||||
|
||||
// 面积：曲线 + 封底，渐变填充（对齐 l(270) 0:#f5222d 1:transparent）
|
||||
pathTo(true)
|
||||
const grad = ctx.createLinearGradient(0, 0, 0, h)
|
||||
grad.addColorStop(0, 'rgba(245, 34, 45, 0.25)')
|
||||
grad.addColorStop(1, 'rgba(245, 34, 45, 0)')
|
||||
ctx.setFillStyle && ctx.setFillStyle(grad)
|
||||
ctx.fill()
|
||||
|
||||
// 描边线：2px
|
||||
pathTo(false)
|
||||
ctx.setStrokeStyle && ctx.setStrokeStyle('#f5222d')
|
||||
ctx.setLineWidth && ctx.setLineWidth(2)
|
||||
ctx.stroke()
|
||||
|
||||
ctx.draw()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wave-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
}
|
||||
|
||||
.wave-canvas {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wave-divider {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: 1px dashed rgba(245, 34, 45, 0.25);
|
||||
|
||||
&--top {
|
||||
top: 33.3%;
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
top: 66.6%;
|
||||
}
|
||||
}
|
||||
|
||||
.wave-empty {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
color: #b5b9c0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1 @@
|
|||
export default {}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import { defineConfig } from '@tarojs/cli'
|
||||
import path from 'node:path'
|
||||
import dev from './dev'
|
||||
import prod from './prod'
|
||||
|
||||
export default defineConfig(async (merge) => {
|
||||
const baseConfig = {
|
||||
projectName: 'sec-warehouse',
|
||||
date: '2026-9-8',
|
||||
designWidth: 750,
|
||||
deviceRatio: { 640: 2, 750: 1, 828: 1.5, 375: 2, 414: 1.7 },
|
||||
sourceRoot: 'src',
|
||||
outputRoot: 'dist',
|
||||
plugins: ['@tarojs/plugin-framework-react'],
|
||||
framework: 'react',
|
||||
compiler: 'webpack5',
|
||||
cache: { enable: false },
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, '..', 'src')
|
||||
},
|
||||
sass: { resource: ['src/styles/variables.scss'] },
|
||||
// Taro 会用白名单挑字段传给小程序编译器（Config.getConfigWithNamed），
|
||||
// postcss 必须放在 mini 分端配置下才生效；默认 cssModules.enable=false 会让
|
||||
// *.module.scss 默认导入为 undefined，页面渲染 styles.page 抛错白屏
|
||||
mini: {
|
||||
postcss: {
|
||||
cssModules: {
|
||||
enable: true,
|
||||
config: {
|
||||
namingPattern: 'module',
|
||||
generateScopedName: '[name]__[local]___[hash:base64:5]'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// merge 由 defineConfig 回调注入，无需额外引入 webpack-merge
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
return merge({}, baseConfig, dev)
|
||||
}
|
||||
return merge({}, baseConfig, prod)
|
||||
})
|
||||
|
|
@ -0,0 +1 @@
|
|||
export default {}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
/**
|
||||
* 本地存储 key。
|
||||
*/
|
||||
export const AUTH_STORAGE_KEYS = Object.freeze({
|
||||
TOKEN: 'smarthome_token',
|
||||
USER: 'smarthome_user'
|
||||
})
|
||||
|
||||
/**
|
||||
* 登录开关：当前为 false，便于功能联调。
|
||||
* 恢复鉴权时改为 true 即可。
|
||||
*/
|
||||
export const AUTH_ENABLED = false
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/**
|
||||
* 接口请求默认配置。
|
||||
*/
|
||||
export const SUCCESS_CODE = 0
|
||||
export const DEFAULT_TIMEOUT = 15000
|
||||
export const DEFAULT_BASE_URL = 'https://api.example.com'
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
# 统一 BLE 连接与控制流程（ED713 / ED719）
|
||||
|
||||
## 平台注入层（2026-09 迁移新增）
|
||||
|
||||
BLE 运行时调用统一收敛：`createBleCore({ platform })` 接受平台对象（默认 Taro，见 `src/ble/adapter/index.ts`），单元测试可注入 mock；`createBluetoothDiscovery`（`src/ble/discovery.js`）原样保留全部能力（扫描过滤/去重/重启/Android 定位权限/连接/鉴权/WiFi/雷达），仅 3 处 uni.* 换为 Taro.*。React 页面通过 `useBle()`（`src/ble/hooks/useBle.ts`）消费——工厂回调转 state，方法原样透出。
|
||||
|
||||
## 1. 标准连接流程图（文字版）
|
||||
1. 初始化阶段
|
||||
- `openBluetoothAdapter`
|
||||
|
|
@ -31,7 +35,7 @@
|
|||
|
||||
## 2. 目录结构
|
||||
```text
|
||||
utils/ble/
|
||||
src/ble/
|
||||
core/
|
||||
bleCore.js # 蓝牙核心能力（连接/发现/读写/订阅/重连）
|
||||
controller.js # 标准流程编排（scan->connect->discover->auth）
|
||||
|
|
@ -84,7 +88,7 @@ utils/ble/
|
|||
import {
|
||||
createUnifiedBleController,
|
||||
DEVICE_PROFILE
|
||||
} from '@/utils/ble'
|
||||
} from '@/ble'
|
||||
|
||||
const bleController = createUnifiedBleController({
|
||||
profileId: DEVICE_PROFILE.UNKNOWN,
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
/**
|
||||
* 创建一个简单倒计时控制器，适配 Vue2 Options API。
|
||||
* @param {object} options
|
||||
* @param {number} options.duration 倒计时总秒数
|
||||
* @param {(value:number)=>void} options.onChange 每次变化回调
|
||||
*/
|
||||
export function createCountdown(options = {}) {
|
||||
const {
|
||||
duration = 60,
|
||||
onChange = () => {}
|
||||
} = options
|
||||
|
||||
let timer = null
|
||||
let current = 0
|
||||
|
||||
function emit() {
|
||||
onChange(current)
|
||||
}
|
||||
|
||||
function clear() {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
timer = null
|
||||
}
|
||||
}
|
||||
|
||||
function start() {
|
||||
clear()
|
||||
current = duration
|
||||
emit()
|
||||
|
||||
timer = setInterval(() => {
|
||||
current -= 1
|
||||
if (current <= 0) {
|
||||
current = 0
|
||||
emit()
|
||||
clear()
|
||||
return
|
||||
}
|
||||
|
||||
emit()
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
return {
|
||||
start,
|
||||
clear
|
||||
}
|
||||
}
|
||||
20
index.html
20
index.html
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
32
main.js
32
main.js
|
|
@ -1,32 +0,0 @@
|
|||
import App from './App'
|
||||
import { setupAuthInterceptors } from './utils/auth'
|
||||
|
||||
// 应用启动时注册统一路由鉴权拦截器（内部有幂等保护）。
|
||||
setupAuthInterceptors()
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
import uviewPlus from 'uview-plus'
|
||||
|
||||
/**
|
||||
* uni-app Vue3 入口。
|
||||
*/
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
app.use(uviewPlus)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
{
|
||||
"name" : "SEC_Warehouse",
|
||||
"appid" : "",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wx7f272a672efe6c04",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true,
|
||||
"libVersion" : "latest"
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "3"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
45
package.json
45
package.json
|
|
@ -1,6 +1,49 @@
|
|||
{
|
||||
"name": "sec-warehouse",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"description": "智慧养老小程序（Taro + React）",
|
||||
"scripts": {
|
||||
"dev:weapp": "taro build --type weapp --watch",
|
||||
"build:weapp": "taro build --type weapp",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest",
|
||||
"lint": "eslint --ext .ts,.tsx src/",
|
||||
"format": "prettier --write \"src/**/*.{ts,tsx,scss}\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^2.2.0",
|
||||
"@tarojs/components": "^4.0.0",
|
||||
"@tarojs/helper": "^4.0.0",
|
||||
"@tarojs/plugin-framework-react": "^4.0.0",
|
||||
"@tarojs/plugin-platform-weapp": "^4.0.0",
|
||||
"@tarojs/react": "^4.0.0",
|
||||
"@tarojs/runtime": "^4.0.0",
|
||||
"@tarojs/shared": "^4.0.0",
|
||||
"@tarojs/taro": "^4.0.0",
|
||||
"react": "^18.3.0",
|
||||
"react-dom": "^18.3.0",
|
||||
"react-redux": "^9.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.24.0",
|
||||
"@babel/preset-react": "^7.29.7",
|
||||
"@tarojs/cli": "^4.0.0",
|
||||
"@tarojs/webpack5-runner": "^4.0.0",
|
||||
"@types/react": "^18.3.0",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@types/web": "^0.0.100",
|
||||
"@typescript-eslint/eslint-plugin": "^7.0.0",
|
||||
"@typescript-eslint/parser": "^7.0.0",
|
||||
"babel-preset-taro": "^4.0.0",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react": "^7.34.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"prettier": "^3.2.0",
|
||||
"sass": "^1.99.0",
|
||||
"uview-plus": "^3.7.36"
|
||||
"typescript": "^5.4.0",
|
||||
"vite": "^4.5.0",
|
||||
"vitest": "^1.6.0",
|
||||
"webpack": "^5.91.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
92
pages.json
92
pages.json
|
|
@ -1,92 +0,0 @@
|
|||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/login/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/event/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/device/add",
|
||||
"style": {
|
||||
"navigationBarTitleText": "添加设备"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/device/config",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/device/detail",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/scene/select",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "智慧养老",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F1F1F4"
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#666666",
|
||||
"selectedColor": "#2CCB98",
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"borderStyle": "black",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "首页",
|
||||
"iconPath": "static/tabbar/home.png",
|
||||
"selectedIconPath": "static/tabbar/home-active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/event/index",
|
||||
"text": "事件",
|
||||
"iconPath": "static/tabbar/event.png",
|
||||
"selectedIconPath": "static/tabbar/event-active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/mine/index",
|
||||
"text": "我的",
|
||||
"iconPath": "static/tabbar/mine.png",
|
||||
"selectedIconPath": "static/tabbar/mine-active.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
"uniIdRouter": {},
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue",
|
||||
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!-- 设备添加页：用于承接后续蓝牙搜索/连接配网流程 -->
|
||||
<template>
|
||||
<view class="page page-base">
|
||||
<view class="card card-base">
|
||||
<text class="title">添加设备（静态）</text>
|
||||
<text class="desc">这里用于后续接入设备连接流程，例如蓝牙/Wi-Fi 配网。</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 当前仅提供页面壳，实际流程由蓝牙控制模块接入。
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import '@/styles/common.css';
|
||||
|
||||
.page {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #666666;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.8;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,941 +0,0 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<view class="top-nav top-nav-base">
|
||||
<text class="back" @click="goBack">‹</text>
|
||||
<text class="title">设备配置</text>
|
||||
</view>
|
||||
|
||||
<view class="search-wrap">
|
||||
<view class="search-btn" :class="{ 'is-searching': isSearching }" @click="toggleSearch">
|
||||
<text>{{ searchBtnText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tip-row">
|
||||
*手机需开启蓝牙功能，Android手机还需开启定位功能
|
||||
</view>
|
||||
|
||||
<view class="list-header">
|
||||
<text class="list-title">搜索到的设备列表</text>
|
||||
</view>
|
||||
|
||||
<view class="list-body">
|
||||
<view v-if="!deviceList.length" class="empty-row">暂无搜索结果</view>
|
||||
<view v-for="device in deviceList" :key="device.deviceId" class="device-card">
|
||||
<view class="device-icon"></view>
|
||||
<view class="device-main">
|
||||
<view class="device-name-row">
|
||||
<text class="device-name">{{ device.showName }}</text>
|
||||
<text v-if="device.hasTargetService" class="device-tag">00F4</text>
|
||||
<text v-else-if="device.matchedByName || device.matchedByPayload" class="device-tag name-tag">名称匹配
|
||||
</text>
|
||||
</view>
|
||||
<text class="device-id">{{ device.deviceId }}</text>
|
||||
<view class="device-actions">
|
||||
<view
|
||||
v-for="action in getDeviceActions(device)"
|
||||
:key="action.key"
|
||||
class="action-btn"
|
||||
:class="{ disabled: isActionBusy(action, device) }"
|
||||
@click.stop="invokeAction(action, device)"
|
||||
>
|
||||
{{ getActionLabel(action, device) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="wifiPanelVisible" class="wifi-mask" @click="closeWifiPanel">
|
||||
<view class="wifi-dialog" @click.stop>
|
||||
<view class="wifi-dialog-header">
|
||||
<text class="wifi-dialog-title">设备网络设置</text>
|
||||
<text class="wifi-dialog-close" @click="closeWifiPanel">×</text>
|
||||
</view>
|
||||
|
||||
<view class="wifi-device-row">
|
||||
<text class="wifi-device-label">设备</text>
|
||||
<text class="wifi-device-value">{{ selectedDeviceName }}</text>
|
||||
</view>
|
||||
|
||||
<view class="wifi-row wifi-row-ssid">
|
||||
<text class="wifi-label">
|
||||
<text class="wifi-required">*</text>
|
||||
WiFi名称
|
||||
</text>
|
||||
<input
|
||||
v-model.trim="wifiForm.ssid"
|
||||
class="wifi-input wifi-input-ssid"
|
||||
placeholder="请输入 WiFi 名称"
|
||||
:maxlength="32"
|
||||
confirm-type="done"
|
||||
/>
|
||||
<view class="wifi-current-btn" :class="{ disabled: fetchingCurrentWifi }" @click.stop="fetchCurrentWifiSsid">
|
||||
{{ fetchingCurrentWifi ? '获取中...' : '一键获取当前连接WiFi' }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="wifi-row">
|
||||
<text class="wifi-label">
|
||||
<text class="wifi-required">*</text>
|
||||
WiFi密码
|
||||
</text>
|
||||
<input
|
||||
v-model.trim="wifiForm.password"
|
||||
class="wifi-input"
|
||||
placeholder="请输入密码"
|
||||
password
|
||||
:maxlength="63"
|
||||
confirm-type="done"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="wifi-import-row" @click="importLastWifiConfig">
|
||||
一键导入上次 WiFi 配置
|
||||
</view>
|
||||
|
||||
<view v-if="wifiErrorTip" class="wifi-error-tip">
|
||||
{{ wifiErrorTip }}
|
||||
</view>
|
||||
|
||||
<view class="wifi-submit-btn" :class="{ disabled: wifiSending }" @click="confirmWifiSettings">
|
||||
{{ wifiSending ? '发送中...' : '发送' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createBluetoothDiscovery } from '@/hooks/useBluetoothDiscovery'
|
||||
import { navigateBack } from '@/utils/navigation'
|
||||
import { showToast } from '@/utils/toast'
|
||||
|
||||
const WIFI_HISTORY_STORAGE_KEY = 'SMARTHOME_LAST_WIFI_CONFIG'
|
||||
|
||||
const WIFI_STATE_MESSAGES = Object.freeze({
|
||||
1: 'WiFi 参数校验失败，请检查名称与密码',
|
||||
2: '设备连接该 WiFi 失败，请确认密码是否正确',
|
||||
3: 'WiFi 配置成功',
|
||||
4: '设备正在连接 WiFi，请稍候'
|
||||
})
|
||||
|
||||
// 设备型号 → 启用的按钮 key 列表。
|
||||
// 后续如需让其他型号裁剪按钮，只需新增映射条目。
|
||||
const DEVICE_ACTION_KEYS = Object.freeze({
|
||||
EP832: ['WIFI'],
|
||||
DEFAULT: ['WIFI', 'PARAMS', 'SERVER']
|
||||
})
|
||||
|
||||
// 按钮注册表：label / 忙态文案 / 点击方法名 / 忙态判定方法名。
|
||||
// 仅声明 key 即可被引用，未配置的方法名渲染为不可点击的占位项。
|
||||
const ACTION_REGISTRY = Object.freeze({
|
||||
WIFI: {
|
||||
label: '网络配置',
|
||||
busyLabel: '连接中',
|
||||
handler: 'openWifiPanel',
|
||||
isBusy: 'isDevicePreparing'
|
||||
},
|
||||
PARAMS: {
|
||||
label: '参数配置'
|
||||
},
|
||||
SERVER: {
|
||||
label: '服务器配置'
|
||||
}
|
||||
})
|
||||
|
||||
function getErrorMessage(error) {
|
||||
if (!error) {
|
||||
return '操作失败，请重试'
|
||||
}
|
||||
|
||||
if (typeof error === 'string') {
|
||||
return error
|
||||
}
|
||||
|
||||
return error.message || error.errMsg || '操作失败，请重试'
|
||||
}
|
||||
|
||||
function promisifyUniApi(apiName, params = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (typeof uni[apiName] !== 'function') {
|
||||
reject(new Error(`当前环境不支持 ${apiName}`))
|
||||
return
|
||||
}
|
||||
|
||||
uni[apiName]({
|
||||
...params,
|
||||
success: (res) => resolve(res),
|
||||
fail: (err) => reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isSearching: false,
|
||||
deviceList: [],
|
||||
deviceMap: {},
|
||||
discoveryController: null,
|
||||
|
||||
// WiFi 弹层状态。
|
||||
wifiPanelVisible: false,
|
||||
wifiPreparing: false,
|
||||
activePreparingDeviceId: '',
|
||||
wifiSending: false,
|
||||
fetchingCurrentWifi: false,
|
||||
wifiPrepared: false,
|
||||
wifiErrorTip: '',
|
||||
devicePreparingMap: {},
|
||||
selectedWifiDevice: null,
|
||||
wifiForm: {
|
||||
ssid: '',
|
||||
password: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
searchBtnText() {
|
||||
return this.isSearching ? '搜索中' : '搜索'
|
||||
},
|
||||
|
||||
selectedDeviceName() {
|
||||
if (!this.selectedWifiDevice) {
|
||||
return '未选择设备'
|
||||
}
|
||||
|
||||
return this.selectedWifiDevice.showName || this.selectedWifiDevice.deviceId || '未命名设备'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
/**
|
||||
* 蓝牙搜索控制器：统一处理设备发现、连接、鉴权、WiFi 发送等流程。
|
||||
*/
|
||||
this.discoveryController = createBluetoothDiscovery({
|
||||
onSearchingChange: (value) => {
|
||||
this.isSearching = value
|
||||
},
|
||||
onDeviceMapChange: (value) => {
|
||||
this.deviceMap = value
|
||||
},
|
||||
onDeviceListChange: (value) => {
|
||||
this.deviceList = value
|
||||
}
|
||||
})
|
||||
},
|
||||
onHide() {
|
||||
this.cleanupDiscovery()
|
||||
},
|
||||
onUnload() {
|
||||
this.cleanupDiscovery()
|
||||
},
|
||||
methods: {
|
||||
async safeDisconnect() {
|
||||
if (!this.discoveryController) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await this.discoveryController.disconnectDevice()
|
||||
} catch (error) {
|
||||
}
|
||||
},
|
||||
|
||||
cleanupWifiPanelState() {
|
||||
this.wifiPanelVisible = false
|
||||
this.wifiPrepared = false
|
||||
this.wifiPreparing = false
|
||||
this.activePreparingDeviceId = ''
|
||||
this.fetchingCurrentWifi = false
|
||||
this.wifiErrorTip = ''
|
||||
this.selectedWifiDevice = null
|
||||
this.resetWifiForm()
|
||||
},
|
||||
|
||||
resetWifiForm() {
|
||||
// 只清空当前弹层临时输入，不影响本地历史缓存。
|
||||
this.wifiForm.ssid = ''
|
||||
this.wifiForm.password = ''
|
||||
},
|
||||
|
||||
setDevicePreparing(deviceId, preparing) {
|
||||
const safeDeviceId = String(deviceId || '').trim()
|
||||
if (!safeDeviceId) {
|
||||
return
|
||||
}
|
||||
|
||||
this.devicePreparingMap = {
|
||||
...this.devicePreparingMap,
|
||||
[safeDeviceId]: Boolean(preparing)
|
||||
}
|
||||
},
|
||||
|
||||
isDevicePreparing(deviceId) {
|
||||
const safeDeviceId = String(deviceId || '').trim()
|
||||
if (!safeDeviceId) {
|
||||
return false
|
||||
}
|
||||
|
||||
return Boolean(this.devicePreparingMap[safeDeviceId])
|
||||
},
|
||||
|
||||
isEp832(device) {
|
||||
const name = String(device?.showName || device?.name || device?.localName || '').toUpperCase()
|
||||
return name.includes('EP832')
|
||||
},
|
||||
|
||||
/**
|
||||
* 根据设备型号返回该设备可见的操作按钮列表。
|
||||
* 列表中的 action 对象包含 key、label、handler、isBusy 等元数据，
|
||||
* 模板里直接 v-for 渲染。
|
||||
*/
|
||||
getDeviceActions(device) {
|
||||
const identifier = this.isEp832(device) ? 'EP832' : 'DEFAULT'
|
||||
const keys = DEVICE_ACTION_KEYS[identifier] || DEVICE_ACTION_KEYS.DEFAULT
|
||||
return keys.map(key => ({ key, ...ACTION_REGISTRY[key] }))
|
||||
},
|
||||
|
||||
isActionBusy(action, device) {
|
||||
if (!action.isBusy) {
|
||||
return false
|
||||
}
|
||||
const checker = this[action.isBusy]
|
||||
return typeof checker === 'function' ? Boolean(checker.call(this, device.deviceId)) : false
|
||||
},
|
||||
|
||||
getActionLabel(action, device) {
|
||||
if (this.isActionBusy(action, device) && action.busyLabel) {
|
||||
return action.busyLabel
|
||||
}
|
||||
return action.label
|
||||
},
|
||||
|
||||
invokeAction(action, device) {
|
||||
if (!action.handler) {
|
||||
return
|
||||
}
|
||||
const handler = this[action.handler]
|
||||
if (typeof handler === 'function') {
|
||||
handler.call(this, device.deviceId)
|
||||
}
|
||||
},
|
||||
|
||||
getDeviceById(deviceId) {
|
||||
const safeDeviceId = String(deviceId || '').trim()
|
||||
if (!safeDeviceId) {
|
||||
return null
|
||||
}
|
||||
|
||||
const mapDevice = this.deviceMap[safeDeviceId]
|
||||
if (mapDevice) {
|
||||
return mapDevice
|
||||
}
|
||||
|
||||
return this.deviceList.find((item) => item.deviceId === safeDeviceId) || null
|
||||
},
|
||||
|
||||
cleanupDiscovery() {
|
||||
if (!this.discoveryController) {
|
||||
return
|
||||
}
|
||||
|
||||
this.devicePreparingMap = {}
|
||||
this.cleanupWifiPanelState()
|
||||
this.discoveryController.cleanupDiscovery()
|
||||
},
|
||||
|
||||
goBack() {
|
||||
this.cleanupDiscovery()
|
||||
navigateBack(1)
|
||||
},
|
||||
|
||||
async toggleSearch() {
|
||||
if (!this.discoveryController) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.isSearching) {
|
||||
await this.discoveryController.stopSearch(false)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await this.discoveryController.startSearch()
|
||||
} catch (error) {
|
||||
}
|
||||
},
|
||||
|
||||
async openWifiPanel(deviceId) {
|
||||
if (this.wifiPreparing || this.wifiSending) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.discoveryController) {
|
||||
return
|
||||
}
|
||||
|
||||
const targetDeviceId = String(deviceId || '').trim()
|
||||
if (!targetDeviceId) {
|
||||
showToast('未选择可配置设备')
|
||||
return
|
||||
}
|
||||
|
||||
if (this.activePreparingDeviceId && this.activePreparingDeviceId !== targetDeviceId) {
|
||||
showToast('正在为其他设备准备，请稍候')
|
||||
return
|
||||
}
|
||||
|
||||
const targetDevice = this.getDeviceById(targetDeviceId)
|
||||
if (!targetDevice) {
|
||||
showToast('设备已失效，请重新搜索')
|
||||
return
|
||||
}
|
||||
|
||||
this.wifiPreparing = true
|
||||
this.activePreparingDeviceId = targetDeviceId
|
||||
this.wifiPrepared = false
|
||||
this.selectedWifiDevice = targetDevice
|
||||
this.setDevicePreparing(targetDeviceId, true)
|
||||
|
||||
uni.showLoading({
|
||||
title: '连接设备中',
|
||||
mask: true
|
||||
})
|
||||
|
||||
let prepError = null
|
||||
try {
|
||||
// 厂家确认流程：连接 → 发现服务特征 → 订阅 F301，无需鉴权/读MSG。
|
||||
await this.discoveryController.prepareWifiConfig(targetDeviceId)
|
||||
|
||||
this.wifiPrepared = true
|
||||
this.wifiPanelVisible = true
|
||||
// 确保 Vue 完成 DOM 更新后再调原生 toast，避免原生层覆盖 Vue 弹层
|
||||
await this.$nextTick()
|
||||
} catch (error) {
|
||||
prepError = error
|
||||
await this.safeDisconnect()
|
||||
} finally {
|
||||
this.setDevicePreparing(targetDeviceId, false)
|
||||
this.activePreparingDeviceId = ''
|
||||
this.wifiPreparing = false
|
||||
// showLoading 与 showToast 共用同一遮罩层，必须先 hideLoading 再弹提示，
|
||||
// 否则 hideLoading 会把 catch 里的 toast 一起清掉（表现为弹窗瞬间消失）。
|
||||
uni.hideLoading()
|
||||
}
|
||||
|
||||
if (prepError) {
|
||||
// 连接/订阅失败用模态弹窗，需用户主动确认，确保错误诊断信息可见可读
|
||||
uni.showModal({
|
||||
title: '设备连接失败',
|
||||
content: getErrorMessage(prepError),
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
})
|
||||
} else if (this.wifiPanelVisible) {
|
||||
showToast('设备已连接，请填写WiFi信息')
|
||||
}
|
||||
},
|
||||
|
||||
async closeWifiPanel(force = false) {
|
||||
if (!force && (this.wifiSending || this.wifiPreparing)) {
|
||||
return
|
||||
}
|
||||
|
||||
this.cleanupWifiPanelState()
|
||||
await this.safeDisconnect()
|
||||
},
|
||||
|
||||
async fetchCurrentWifiSsid() {
|
||||
if (this.fetchingCurrentWifi) {
|
||||
return
|
||||
}
|
||||
|
||||
this.fetchingCurrentWifi = true
|
||||
|
||||
try {
|
||||
// 启动 WiFi 模块（部分端调用 getConnectedWifi 前必须先 startWifi）。
|
||||
if (typeof uni.startWifi === 'function') {
|
||||
try {
|
||||
await promisifyUniApi('startWifi')
|
||||
} catch (error) {
|
||||
// 已启动等非致命错误忽略，继续尝试读取当前连接。
|
||||
}
|
||||
}
|
||||
|
||||
const result = await promisifyUniApi('getConnectedWifi')
|
||||
const ssid = String(result?.wifi?.SSID || result?.wifi?.ssid || result?.SSID || '').trim()
|
||||
|
||||
if (!ssid || ssid.toLowerCase().includes('unknown')) {
|
||||
throw new Error('未获取到当前连接 WiFi 名称')
|
||||
}
|
||||
|
||||
this.wifiForm.ssid = ssid
|
||||
showToast('已填入当前连接WiFi')
|
||||
} catch (error) {
|
||||
showToast(getErrorMessage(error))
|
||||
} finally {
|
||||
this.fetchingCurrentWifi = false
|
||||
}
|
||||
},
|
||||
|
||||
importLastWifiConfig() {
|
||||
try {
|
||||
const cached = uni.getStorageSync(WIFI_HISTORY_STORAGE_KEY)
|
||||
|
||||
if (!cached || typeof cached !== 'object') {
|
||||
showToast('暂无上次 WiFi 配置')
|
||||
return
|
||||
}
|
||||
|
||||
const ssid = String(cached.ssid || '').trim()
|
||||
const password = String(cached.password || '').trim()
|
||||
|
||||
if (!ssid || !password) {
|
||||
showToast('暂无可用的历史 WiFi 配置')
|
||||
return
|
||||
}
|
||||
|
||||
this.wifiForm.ssid = ssid
|
||||
this.wifiForm.password = password
|
||||
showToast('已导入上次 WiFi 配置')
|
||||
} catch (error) {
|
||||
showToast('读取历史 WiFi 配置失败')
|
||||
}
|
||||
},
|
||||
|
||||
cacheWifiConfig(ssid, password) {
|
||||
try {
|
||||
uni.setStorageSync(WIFI_HISTORY_STORAGE_KEY, {
|
||||
ssid,
|
||||
password,
|
||||
updatedAt: Date.now()
|
||||
})
|
||||
} catch (error) {
|
||||
}
|
||||
},
|
||||
|
||||
getWifiStateMessage(stateCode) {
|
||||
return WIFI_STATE_MESSAGES[stateCode] || `WiFi 状态码异常: ${stateCode}`
|
||||
},
|
||||
|
||||
async confirmWifiSettings() {
|
||||
if (this.wifiSending) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.wifiPrepared) {
|
||||
showToast('设备未连接，请重新配置')
|
||||
return
|
||||
}
|
||||
|
||||
const ssid = String(this.wifiForm.ssid || '').trim()
|
||||
const password = String(this.wifiForm.password || '').trim()
|
||||
|
||||
if (!ssid) {
|
||||
showToast('请输入 WiFi 名称')
|
||||
return
|
||||
}
|
||||
|
||||
if (!password) {
|
||||
showToast('请输入 WiFi 密码')
|
||||
return
|
||||
}
|
||||
|
||||
this.wifiSending = true
|
||||
this.wifiErrorTip = ''
|
||||
|
||||
let needAutoClose = false
|
||||
let needCacheWifi = false
|
||||
let tipMessage = ''
|
||||
|
||||
try {
|
||||
/**
|
||||
* 发送后必须等待设备通过 UUID_STATE 返回最终结果（1/2/3）
|
||||
* 才进行提示并自动关闭弹层。
|
||||
*/
|
||||
const wifiResult = await this.discoveryController.configureWifi(ssid, password, {
|
||||
timeout: 60000
|
||||
})
|
||||
|
||||
const stateMessage = this.getWifiStateMessage(wifiResult.stateCode)
|
||||
tipMessage = stateMessage
|
||||
needAutoClose = true
|
||||
needCacheWifi = Boolean(wifiResult.success)
|
||||
} catch (error) {
|
||||
// 超时/异常场景：错误信息持久展示在弹层内，避免瞬态 toast 被覆盖看不清
|
||||
tipMessage = getErrorMessage(error)
|
||||
this.wifiErrorTip = tipMessage
|
||||
} finally {
|
||||
this.wifiSending = false
|
||||
|
||||
if (tipMessage) {
|
||||
showToast(tipMessage)
|
||||
}
|
||||
|
||||
if (needCacheWifi) {
|
||||
this.cacheWifiConfig(ssid, password)
|
||||
}
|
||||
|
||||
if (needAutoClose) {
|
||||
await this.closeWifiPanel(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import '@/styles/common.css';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #e9eaed;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
border-bottom: 1rpx solid #ececec;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: absolute;
|
||||
left: 24rpx;
|
||||
top: 30rpx;
|
||||
font-size: 64rpx;
|
||||
color: #111111;
|
||||
width: 64rpx;
|
||||
line-height: 64rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 50rpx;
|
||||
font-weight: 700;
|
||||
color: #2a2d33;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
height: 500rpx;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
border-radius: 130rpx;
|
||||
background: #43c996;
|
||||
color: #ffffff;
|
||||
font-size: 56rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.search-btn:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.search-btn.is-searching {
|
||||
animation: searchPulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes searchPulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 0 rgba(67, 201, 150, 0.42);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 0 0 30rpx rgba(67, 201, 150, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 0 rgba(67, 201, 150, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.tip-row {
|
||||
min-height: 78rpx;
|
||||
padding: 12rpx 16rpx;
|
||||
background: #efeff1;
|
||||
color: #ff0000;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
height: 116rpx;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 38rpx;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 52rpx;
|
||||
color: #101217;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.list-body {
|
||||
min-height: calc(100vh - 814rpx);
|
||||
background: #e9eaed;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.empty-row {
|
||||
padding: 36rpx;
|
||||
text-align: center;
|
||||
color: #8c9097;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.device-card {
|
||||
background: #ffffff;
|
||||
margin-top: 12rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.device-icon {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
border-radius: 46rpx;
|
||||
border: 2rpx solid #d8d8d8;
|
||||
box-shadow: inset 0 0 0 10rpx #f1f1f1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.device-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.device-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 38rpx;
|
||||
color: #30343a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.device-tag {
|
||||
font-size: 22rpx;
|
||||
color: #17b474;
|
||||
border: 1rpx solid #17b474;
|
||||
border-radius: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
}
|
||||
|
||||
.name-tag {
|
||||
color: #2f7de1;
|
||||
border-color: #2f7de1;
|
||||
}
|
||||
|
||||
.device-id {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 30rpx;
|
||||
color: #8a8f98;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.device-actions {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 8rpx 16rpx;
|
||||
border: 2rpx solid #42c995;
|
||||
color: #22b47a;
|
||||
font-size: 30rpx;
|
||||
border-radius: 6rpx;
|
||||
background: #f8fffc;
|
||||
}
|
||||
|
||||
.action-btn.disabled {
|
||||
border-color: #9fdcc3;
|
||||
color: #7db89e;
|
||||
background: #f5faf7;
|
||||
}
|
||||
|
||||
.wifi-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.48);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.wifi-dialog {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 28rpx 28rpx 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wifi-dialog-header {
|
||||
height: 108rpx;
|
||||
border-bottom: 1rpx solid #efefef;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wifi-dialog-title {
|
||||
font-size: 42rpx;
|
||||
color: #2d2f33;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wifi-dialog-close {
|
||||
position: absolute;
|
||||
right: 26rpx;
|
||||
top: 18rpx;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
text-align: center;
|
||||
line-height: 72rpx;
|
||||
font-size: 56rpx;
|
||||
color: #b8bcc3;
|
||||
}
|
||||
|
||||
.wifi-device-row {
|
||||
min-height: 74rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
padding: 0 30rpx;
|
||||
border-bottom: 1rpx solid #f4f4f4;
|
||||
}
|
||||
|
||||
.wifi-device-label {
|
||||
font-size: 28rpx;
|
||||
color: #8a8f98;
|
||||
}
|
||||
|
||||
.wifi-device-value {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 27rpx;
|
||||
color: #4a4f56;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.wifi-row {
|
||||
min-height: 102rpx;
|
||||
border-bottom: 1rpx solid #f2f2f2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.wifi-row-ssid {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wifi-label {
|
||||
width: 170rpx;
|
||||
font-size: 34rpx;
|
||||
color: #363b45;
|
||||
}
|
||||
|
||||
.wifi-required {
|
||||
color: #ff4f4f;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.wifi-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
.wifi-input-ssid {
|
||||
max-width: 260rpx;
|
||||
}
|
||||
|
||||
.wifi-current-btn {
|
||||
flex-shrink: 0;
|
||||
min-width: 190rpx;
|
||||
height: 62rpx;
|
||||
line-height: 62rpx;
|
||||
border: 1rpx solid #74dcb2;
|
||||
border-radius: 8rpx;
|
||||
color: #24b478;
|
||||
background: #effcf5;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
padding: 0 12rpx;
|
||||
}
|
||||
|
||||
.wifi-current-btn.disabled {
|
||||
border-color: #b8d8ca;
|
||||
color: #9bbbae;
|
||||
background: #f3f6f4;
|
||||
}
|
||||
|
||||
.wifi-import-row {
|
||||
min-height: 100rpx;
|
||||
border-bottom: 1rpx solid #f2f2f2;
|
||||
font-size: 34rpx;
|
||||
color: #3bc58d;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wifi-error-tip {
|
||||
min-height: 80rpx;
|
||||
padding: 16rpx 30rpx;
|
||||
font-size: 26rpx;
|
||||
color: #d33b1d;
|
||||
background: #fff3f1;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.wifi-submit-btn {
|
||||
height: 100rpx;
|
||||
background: #11c462;
|
||||
color: #ffffff;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wifi-submit-btn.disabled {
|
||||
background: #8edcae;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,343 +0,0 @@
|
|||
<!-- ED713 设备详情页：体征仪表盘（参考 web 端 VitalSignsDashboard 布局） -->
|
||||
<template>
|
||||
<view class="page page-base">
|
||||
<up-navbar :title="deviceName" :fixed="false" :safe-area-inset-top="true" :border="false" auto-back />
|
||||
|
||||
<view v-if="loading" class="state-wrap">
|
||||
<up-loading-icon mode="circle" size="48" text="加载中..." />
|
||||
</view>
|
||||
|
||||
<view v-else-if="loadError" class="state-wrap">
|
||||
<up-empty mode="wifi" text="加载失败，请检查网络" />
|
||||
<up-button type="success" shape="circle" text="重试" class="retry-btn" @click="loadVitals" />
|
||||
</view>
|
||||
|
||||
<template v-else>
|
||||
<!-- 心率区：左侧大数字 + 右侧波形 -->
|
||||
<view class="heart-card">
|
||||
<view class="heart-left">
|
||||
<text class="heart-icon">❤</text>
|
||||
<text class="heart-value">{{ valueOf(vitals.heartRate) }}</text>
|
||||
<text class="heart-unit">BPM</text>
|
||||
<view class="heart-badge" :class="online ? 'heart-badge--on' : 'heart-badge--off'">
|
||||
<view class="badge-dot" :class="online ? 'badge-dot--on' : 'badge-dot--off'" />
|
||||
<text>{{ online ? '正常' : '离线' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="heart-right">
|
||||
<view class="heart-right-title">
|
||||
<text class="heart-health-label">心率健康</text>
|
||||
</view>
|
||||
<vital-wave :points="wavePoints" canvas-id="heartWave" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 六个指标 2 列网格 -->
|
||||
<view class="metric-grid">
|
||||
<view v-for="m in metrics" :key="m.label" class="metric-card">
|
||||
<text class="metric-label">{{ m.label }}</text>
|
||||
<view class="metric-value-row">
|
||||
<text class="metric-value" :style="{ color: m.color }">{{ m.value }}</text>
|
||||
<text v-if="m.unit" class="metric-unit">{{ m.unit }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 设备信息 -->
|
||||
<view class="info-card">
|
||||
<view class="info-row">
|
||||
<text class="info-label">设备型号</text>
|
||||
<text class="info-value">{{ deviceModel || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">设备 ID</text>
|
||||
<text class="info-value">{{ deviceId || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vitalWave from '@/components/vital-wave.vue'
|
||||
import { getHeartRateHistory, getVitalSigns } from '@/api/device'
|
||||
|
||||
// 枚举值中文映射，与 web 端 i18n (zh-CN) 一致
|
||||
const MOVE_STATE_MAP = { 0: '无人', 1: '轻微活动', 2: '频繁活动', 3: '静卧' }
|
||||
const BODY_STATUS_MAP = { 0: '无人', 1: '运动', 2: '呼吸', 3: '进入呼吸' }
|
||||
const ONBED_STATUS_MAP = { 0: '不在床', 1: '在床' }
|
||||
|
||||
// 指标卡配色与 web 端 MetricCard color 一致
|
||||
const METRIC_COLORS = {
|
||||
breath: '#1677ff',
|
||||
motion: '#fa8c16',
|
||||
moveState: '#52c41a',
|
||||
bedState: '#f5222d',
|
||||
bodyState: '#1677ff',
|
||||
bodyPosition: '#52c41a'
|
||||
}
|
||||
|
||||
// 与 web 端 SWR refreshInterval 一致的轮询间隔
|
||||
const REFRESH_INTERVAL = 3000
|
||||
|
||||
export default {
|
||||
components: { vitalWave },
|
||||
data() {
|
||||
return {
|
||||
deviceId: '',
|
||||
deviceName: '设备详情',
|
||||
deviceModel: '',
|
||||
online: false,
|
||||
loading: true,
|
||||
loadError: false,
|
||||
vitals: {},
|
||||
wavePoints: [],
|
||||
pollTimer: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 六个指标卡数据（2 列网格顺序：呼吸率/体动/运动状态/在床状态/人体状态/人体位置）
|
||||
metrics() {
|
||||
const v = this.vitals
|
||||
return [
|
||||
{ label: '呼吸率', value: this.valueOf(v.respiratoryRate), unit: '/min', color: METRIC_COLORS.breath },
|
||||
{ label: '体动', value: this.valueOf(v.bodyMovement), unit: '', color: METRIC_COLORS.motion },
|
||||
{ label: '运动状态', value: MOVE_STATE_MAP[v.moveState] ?? this.valueOf(v.moveState), unit: '', color: METRIC_COLORS.moveState },
|
||||
{ label: '在床状态', value: ONBED_STATUS_MAP[v.onbedStatus] ?? this.valueOf(v.onbedStatus), unit: '', color: METRIC_COLORS.bedState },
|
||||
{ label: '人体状态', value: BODY_STATUS_MAP[v.bodyStatus] ?? this.valueOf(v.bodyStatus), unit: '', color: METRIC_COLORS.bodyState },
|
||||
{ label: '人体位置', value: this.valueOf(v.bodyPosition), unit: '分米', color: METRIC_COLORS.bodyPosition }
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.deviceId = options.id || ''
|
||||
if (options.name) this.deviceName = decodeURIComponent(options.name)
|
||||
this.deviceModel = options.model || ''
|
||||
this.online = options.online === '1'
|
||||
this.loadVitals()
|
||||
},
|
||||
onShow() {
|
||||
this.startPolling()
|
||||
},
|
||||
onHide() {
|
||||
this.stopPolling()
|
||||
},
|
||||
onUnload() {
|
||||
this.stopPolling()
|
||||
},
|
||||
methods: {
|
||||
// 拉取实时体征与心率历史；首拉失败切错误态供重试，轮询失败静默（避免 toast 每 3 秒弹一次）。
|
||||
async loadVitals() {
|
||||
this.loading = true
|
||||
this.loadError = false
|
||||
try {
|
||||
await this.fetchVitals()
|
||||
} catch (error) {
|
||||
this.loadError = true
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
// 仅拉数据并落 state；wavePoints 引用变化触发波形组件重绘。
|
||||
async fetchVitals() {
|
||||
const [vitals, history] = await Promise.all([
|
||||
getVitalSigns(this.deviceId),
|
||||
getHeartRateHistory(this.deviceId)
|
||||
])
|
||||
this.vitals = vitals || {}
|
||||
this.wavePoints = Array.isArray(history) ? history : []
|
||||
},
|
||||
// 轮询：每 3 秒静默刷新体征与波形（页面隐藏/卸载时停止）。
|
||||
startPolling() {
|
||||
this.stopPolling()
|
||||
this.pollTimer = setInterval(() => {
|
||||
this.fetchVitals().catch(() => {})
|
||||
}, REFRESH_INTERVAL)
|
||||
},
|
||||
stopPolling() {
|
||||
if (this.pollTimer) {
|
||||
clearInterval(this.pollTimer)
|
||||
this.pollTimer = null
|
||||
}
|
||||
},
|
||||
// 空值统一显示 '-'
|
||||
valueOf(v) {
|
||||
return v === undefined || v === null || v === '' ? '-' : v
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/common.css';
|
||||
|
||||
.state-wrap {
|
||||
margin-top: 120rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
margin-top: 40rpx;
|
||||
width: 240rpx;
|
||||
}
|
||||
|
||||
/* 心率区 */
|
||||
.heart-card {
|
||||
margin: 24rpx;
|
||||
padding: 32rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.heart-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
|
||||
.heart-icon {
|
||||
font-size: 72rpx;
|
||||
color: #f5222d;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.heart-value {
|
||||
margin-top: 16rpx;
|
||||
font-size: 96rpx;
|
||||
font-weight: 700;
|
||||
color: #2a2d33;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.heart-unit {
|
||||
margin-top: 8rpx;
|
||||
font-size: 30rpx;
|
||||
color: #9ea1a6;
|
||||
}
|
||||
|
||||
.heart-badge {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
&--on {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&--off {
|
||||
background: #f5f5f5;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
|
||||
&--on {
|
||||
background: #52c41a;
|
||||
}
|
||||
|
||||
&--off {
|
||||
background: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.heart-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.heart-right-title {
|
||||
margin-bottom: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.heart-health-label {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #2a2d33;
|
||||
}
|
||||
|
||||
/* 六指标 2 列网格 */
|
||||
.metric-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
width: 48.5%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 24rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 26rpx;
|
||||
color: #9ea1a6;
|
||||
}
|
||||
|
||||
.metric-value-row {
|
||||
margin-top: 12rpx;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.metric-unit {
|
||||
margin-left: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #b5b9c0;
|
||||
}
|
||||
|
||||
/* 设备信息 */
|
||||
.info-card {
|
||||
margin: 4rpx 24rpx 24rpx;
|
||||
padding: 8rpx 32rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
min-height: 104rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
+ .info-row {
|
||||
border-top: 1rpx solid #f0f1f3;
|
||||
}
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #9ea1a6;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #2a2d33;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,797 +0,0 @@
|
|||
<!-- 事件页：使用 uview-plus 筛选与空状态组件 -->
|
||||
<template>
|
||||
<view class="page page-base">
|
||||
<up-navbar title="事件" :fixed="false" :safe-area-inset-top="true" :border="false" left-icon="" />
|
||||
|
||||
<view class="filters">
|
||||
<view class="filter-cell" @click="openDrawer('scene')">
|
||||
<view class="filter-trigger" :class="{ 'filter-trigger--active': filters.sceneId !== 0 }">
|
||||
<text class="filter-text">{{ sceneLabel }}</text>
|
||||
<up-icon name="arrow-down" size="13" :color="filters.sceneId !== 0 ? '#12a37a' : '#909399'" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-cell" @click="openDrawer('status')">
|
||||
<view class="filter-trigger" :class="{ 'filter-trigger--active': filters.status !== 0 }">
|
||||
<text class="filter-text">{{ statusLabel }}</text>
|
||||
<up-icon name="arrow-down" size="13" :color="filters.status !== 0 ? '#12a37a' : '#909399'" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-cell" @click="openDrawer('time')">
|
||||
<view class="filter-trigger" :class="{ 'filter-trigger--active': !!filters.startDate }">
|
||||
<text class="filter-text">{{ filters.timeText || '时间' }}</text>
|
||||
<up-icon name="arrow-down" size="13" :color="filters.startDate ? '#12a37a' : '#909399'" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据层：筛选栏以下区域；三个下拉抽屉都锚定在这层顶部（筛选栏下缘）展开 -->
|
||||
<view class="content-area">
|
||||
<view class="content-body">
|
||||
<view class="empty-area">
|
||||
<up-empty mode="message" text="暂无事件数据" />
|
||||
</view>
|
||||
<view class="empty-hint">
|
||||
<text>调整筛选条件后的事件列表将在此展示</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 遮罩：盖住筛选栏以下全部内容 -->
|
||||
<view v-if="drawer" class="content-mask" @click="closeDrawer" @touchmove.stop.prevent="noop" />
|
||||
|
||||
<!-- 场所抽屉：从筛选栏下缘展开 -->
|
||||
<view v-if="drawer === 'scene'" class="drop-panel drop-panel--options">
|
||||
<view class="option-drawer-header">
|
||||
<text class="option-drawer-title">选择场所</text>
|
||||
<view class="option-drawer-close" @click="closeDrawer">
|
||||
<up-icon name="close" size="20" color="#909399" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="option-drawer-list">
|
||||
<view
|
||||
v-for="opt in sceneOptions"
|
||||
:key="opt.id"
|
||||
class="option-drawer-item"
|
||||
:class="{ 'option-drawer-item--active': filters.sceneId === opt.id }"
|
||||
@click="selectScene(opt.id)"
|
||||
>
|
||||
<text class="option-drawer-item__text">{{ opt.name }}</text>
|
||||
<up-icon v-if="filters.sceneId === opt.id" name="checkmark" size="16" color="#2CCB98" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态抽屉：从筛选栏下缘展开 -->
|
||||
<view v-if="drawer === 'status'" class="drop-panel drop-panel--options">
|
||||
<view class="option-drawer-header">
|
||||
<text class="option-drawer-title">选择状态</text>
|
||||
<view class="option-drawer-close" @click="closeDrawer">
|
||||
<up-icon name="close" size="20" color="#909399" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="option-drawer-list">
|
||||
<view
|
||||
v-for="opt in statusOptions"
|
||||
:key="opt.id"
|
||||
class="option-drawer-item"
|
||||
:class="{ 'option-drawer-item--active': filters.status === opt.id }"
|
||||
@click="selectStatus(opt.id)"
|
||||
>
|
||||
<text class="option-drawer-item__text">{{ opt.name }}</text>
|
||||
<up-icon v-if="filters.status === opt.id" name="checkmark" size="16" color="#2CCB98" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 时间抽屉：从筛选栏下缘展开（滚动式日历：懒渲染，窗口外月份占位） -->
|
||||
<view v-if="drawer === 'time'" class="drop-panel drop-panel--calendar">
|
||||
<view class="time-drawer-header">
|
||||
<text class="time-drawer-title">选择时间范围</text>
|
||||
<view class="time-drawer-close" @click="closeDrawer">
|
||||
<up-icon name="close" size="20" color="#909399" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 快捷范围：点选直接填满起止 -->
|
||||
<view class="quick-row">
|
||||
<view
|
||||
v-for="q in quickRanges"
|
||||
:key="q.label"
|
||||
class="quick-chip"
|
||||
:class="{ 'quick-chip--active': activeQuick === q.label }"
|
||||
@click="applyQuick(q)"
|
||||
>
|
||||
<text>{{ q.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 星期行：钉在滚动区上方 -->
|
||||
<view class="cal-weekdays">
|
||||
<text v-for="w in weekdayLabels" :key="w" class="cal-weekday">{{ w }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 滚动日历：scroll-view 纵向滚月，懒渲染（窗口外月份只渲染占位高度） -->
|
||||
<view class="cal-scroll-wrap">
|
||||
<scroll-view
|
||||
class="cal-scroll"
|
||||
scroll-y
|
||||
:scroll-into-view="calAnchorId"
|
||||
scroll-anchoring
|
||||
@scroll="onCalScroll"
|
||||
>
|
||||
<view
|
||||
v-for="m in renderedMonths"
|
||||
:key="m.key"
|
||||
:id="m.key"
|
||||
class="cal-month"
|
||||
:style="m.placeholder ? { height: m.height + 'rpx' } : {}"
|
||||
>
|
||||
<template v-if="!m.placeholder">
|
||||
<view class="cal-month-title">
|
||||
<text>{{ m.title }}</text>
|
||||
</view>
|
||||
<view class="cal-grid">
|
||||
<view
|
||||
v-for="(cell, i) in m.cells"
|
||||
:key="i"
|
||||
class="cal-cell"
|
||||
:class="cell.cls"
|
||||
@click="pickDate(cell)"
|
||||
>
|
||||
<view v-if="cell.day" class="cal-day" :class="cell.dayCls">
|
||||
<text class="cal-day-num">{{ cell.day }}</text>
|
||||
<text v-if="cell.tag" class="cal-day-tag">{{ cell.tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="time-drawer-footer">
|
||||
<up-button
|
||||
shape="circle"
|
||||
:text="rangeReady ? '确定' : '请选择起止日期'"
|
||||
color="#2CCB98"
|
||||
:disabled="!rangeReady"
|
||||
@click="onConfirmClick"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { getSceneList } from '@/api/scene'
|
||||
|
||||
// 日历可回溯的年数（仅约束可翻到的最早月份，不影响性能）
|
||||
const CALENDAR_YEARS_BACK = 10
|
||||
const WEEKDAY_LABELS = ['一', '二', '三', '四', '五', '六', '日']
|
||||
|
||||
const pad2 = (n) => String(n).padStart(2, '0')
|
||||
// Date -> 'YYYY-MM-DD'（本地时区）
|
||||
const fmtDate = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`
|
||||
// 'YYYY-MM-DD' -> 当日零点 Date
|
||||
const parseDate = (s) => {
|
||||
const [y, m, d] = s.split('-').map(Number)
|
||||
return new Date(y, m - 1, d)
|
||||
}
|
||||
// 生成快捷范围选项：近 N 天（含今天）
|
||||
const quickRange = (days) => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - (days - 1))
|
||||
return { label: `近${days}天`, start: fmtDate(start), end: fmtDate(end) }
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
drawer: '', // '' | 'scene' | 'status' | 'time'
|
||||
windowWidth: 375, // 窗口宽（px），onLoad 时取系统信息，用于 px→rpx 换算
|
||||
calScroll: 0, // 当前滚动位置（rpx 近似，用于懒渲染窗口判定）
|
||||
calAnchorId: '', // scroll-into-view 定位的月份锚点
|
||||
pendingStart: '', // 临时起点
|
||||
pendingEnd: '', // 临时终点
|
||||
activeQuick: '',
|
||||
weekdayLabels: WEEKDAY_LABELS,
|
||||
quickRanges: [quickRange(7), quickRange(30), quickRange(90)],
|
||||
filters: {
|
||||
sceneId: 0, // 0 表示全部
|
||||
status: 0,
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
timeText: ''
|
||||
},
|
||||
sceneOptions: [{ id: 0, name: '全部' }],
|
||||
statusOptions: [
|
||||
{ id: 0, name: '全部' },
|
||||
{ id: 1, name: '未处理' },
|
||||
{ id: 2, name: '已处理' },
|
||||
{ id: 3, name: '已忽略' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sceneLabel() {
|
||||
const hit = this.sceneOptions.find((o) => o.id === this.filters.sceneId)
|
||||
return hit ? hit.name : '全部场所'
|
||||
},
|
||||
statusLabel() {
|
||||
const hit = this.statusOptions.find((o) => o.id === this.filters.status)
|
||||
return hit ? hit.name : '全部状态'
|
||||
},
|
||||
// 可选范围边界
|
||||
minLimit() {
|
||||
const d = new Date()
|
||||
d.setFullYear(d.getFullYear() - CALENDAR_YEARS_BACK)
|
||||
d.setDate(1)
|
||||
return fmtDate(d)
|
||||
},
|
||||
maxLimit() {
|
||||
return fmtDate(new Date())
|
||||
},
|
||||
// 全部月份元数据：从最早月到当月，含每月份的估算高度（用于占位与滚动定位）
|
||||
monthMetas() {
|
||||
const metas = []
|
||||
const start = parseDate(this.minLimit)
|
||||
const now = new Date()
|
||||
const endY = now.getFullYear()
|
||||
const endM = now.getMonth()
|
||||
let y = start.getFullYear()
|
||||
let m = start.getMonth()
|
||||
let top = 0
|
||||
while (y < endY || (y === endY && m <= endM)) {
|
||||
const weeks = this.monthWeeks(y, m)
|
||||
// 标题行 + 周数×行高（格子 aspect 决定行高≈格子宽×1.15，按 750rpx/7 估算）
|
||||
const height = 96 + weeks * Math.round((750 / 7) * 1.15) + 16
|
||||
metas.push({
|
||||
key: `m-${y}-${m}`,
|
||||
year: y,
|
||||
month: m,
|
||||
title: `${y}年${pad2(m + 1)}月`,
|
||||
top,
|
||||
height
|
||||
})
|
||||
top += height
|
||||
if (m === 11) {
|
||||
y += 1
|
||||
m = 0
|
||||
} else {
|
||||
m += 1
|
||||
}
|
||||
}
|
||||
return metas
|
||||
},
|
||||
// 懒渲染：只渲染滚动窗口（±4 个月）内的月份，窗口外用等高占位
|
||||
renderedMonths() {
|
||||
// 滚动位置近似映射到月份索引：找 top 包含 calScroll 的月份
|
||||
const viewRpx = 1400 // 滚动窗口可视高度近似（rpx）
|
||||
const buffer = 3000 // 窗口前后缓冲（rpx）
|
||||
const lo = this.calScroll - buffer
|
||||
const hi = this.calScroll + viewRpx + buffer
|
||||
return this.monthMetas.map((meta) => {
|
||||
const inWindow = meta.top + meta.height > lo && meta.top < hi
|
||||
if (!inWindow) {
|
||||
return { ...meta, placeholder: true, cells: [] }
|
||||
}
|
||||
return {
|
||||
...meta,
|
||||
placeholder: false,
|
||||
cells: this.buildMonthCells(meta.year, meta.month)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 起止都已选定
|
||||
rangeReady() {
|
||||
return !!this.pendingStart && !!this.pendingEnd
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// px→rpx 换算基准
|
||||
const info = uni.getWindowInfo ? uni.getWindowInfo() : uni.getSystemInfoSync()
|
||||
this.windowWidth = info.windowWidth || 375
|
||||
this.loadScenes()
|
||||
},
|
||||
methods: {
|
||||
// 单格数据：区间内/端点/禁用态一次性算好，模板零逻辑
|
||||
buildCell(dateStr, day) {
|
||||
const disabled = dateStr < this.minLimit || dateStr > this.maxLimit
|
||||
let dayCls = ''
|
||||
let tag = ''
|
||||
if (!disabled) {
|
||||
if (this.pendingStart && dateStr === this.pendingStart) {
|
||||
dayCls = 'cal-day--start'
|
||||
tag = this.pendingStart === this.pendingEnd ? '起/止' : '开始'
|
||||
} else if (this.pendingEnd && dateStr === this.pendingEnd) {
|
||||
dayCls = 'cal-day--end'
|
||||
tag = '结束'
|
||||
} else if (
|
||||
this.pendingStart &&
|
||||
this.pendingEnd &&
|
||||
dateStr > this.pendingStart &&
|
||||
dateStr < this.pendingEnd
|
||||
) {
|
||||
dayCls = 'cal-day--in'
|
||||
}
|
||||
}
|
||||
return { day, date: dateStr, disabled, cls: { 'cal-cell--disabled': disabled }, dayCls, tag }
|
||||
},
|
||||
// 某年某月的格子（含前置空格）
|
||||
buildMonthCells(y, m) {
|
||||
const firstDay = new Date(y, m, 1)
|
||||
const lead = (firstDay.getDay() + 6) % 7
|
||||
const daysInMonth = new Date(y, m + 1, 0).getDate()
|
||||
const cells = []
|
||||
for (let i = 0; i < lead; i++) cells.push({ day: 0 })
|
||||
for (let d = 1; d <= daysInMonth; d++) {
|
||||
cells.push(this.buildCell(`${y}-${pad2(m + 1)}-${pad2(d)}`, d))
|
||||
}
|
||||
return cells
|
||||
},
|
||||
// 某月占满的周数（1 个前置空格也占一行）
|
||||
monthWeeks(y, m) {
|
||||
const firstDay = new Date(y, m, 1)
|
||||
const lead = (firstDay.getDay() + 6) % 7
|
||||
const daysInMonth = new Date(y, m + 1, 0).getDate()
|
||||
return Math.ceil((lead + daysInMonth) / 7)
|
||||
},
|
||||
// 动态加载场所列表：复用场景接口，后端 /scene/list 就绪后自动走真实请求。
|
||||
// 失败时保留"全部"选项不阻塞筛选（toast 由请求封装统一弹出）。
|
||||
async loadScenes() {
|
||||
try {
|
||||
const data = await getSceneList()
|
||||
const list = Array.isArray(data) ? data : []
|
||||
this.sceneOptions = [{ id: 0, name: '全部' }, ...list]
|
||||
} catch (error) {
|
||||
this.sceneOptions = [{ id: 0, name: '全部' }]
|
||||
}
|
||||
},
|
||||
noop() {},
|
||||
openDrawer(name) {
|
||||
if (name === 'time') {
|
||||
// 回显已提交的起止；无提交时默认定位当月
|
||||
this.pendingStart = this.filters.startDate
|
||||
this.pendingEnd = this.filters.endDate
|
||||
this.activeQuick = ''
|
||||
const focus = this.filters.startDate || fmtDate(new Date())
|
||||
const d = parseDate(focus)
|
||||
const meta = this.monthMetas.find(
|
||||
(mm) => mm.year === d.getFullYear() && mm.month === d.getMonth()
|
||||
)
|
||||
this.calScroll = meta ? meta.top : 0
|
||||
// scroll-into-view 需要值变化才生效：先清空再在下个循环赋值
|
||||
this.calAnchorId = ''
|
||||
this.$nextTick(() => {
|
||||
this.calAnchorId = meta ? meta.key : ''
|
||||
})
|
||||
}
|
||||
this.drawer = name
|
||||
},
|
||||
closeDrawer() {
|
||||
this.drawer = ''
|
||||
},
|
||||
// 场所/状态抽屉点选：写入筛选值并收起抽屉。
|
||||
selectScene(id) {
|
||||
this.filters.sceneId = id
|
||||
this.closeDrawer()
|
||||
this.handle()
|
||||
},
|
||||
selectStatus(id) {
|
||||
this.filters.status = id
|
||||
this.closeDrawer()
|
||||
this.handle()
|
||||
},
|
||||
// 下拉选项变化：触发筛选回调，便于后续接事件列表接口。
|
||||
handle() {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('[event filters]', { ...this.filters })
|
||||
},
|
||||
// 滚动：把 px 滚动值换算回 rpx（750 / 窗口宽），驱动懒渲染窗口移动
|
||||
onCalScroll(e) {
|
||||
const px = e.detail.scrollTop || 0
|
||||
const rpx = px * (750 / this.windowWidth)
|
||||
// 跨过一定占位高度差再更新，减少 computed 重算频率
|
||||
if (Math.abs(rpx - this.calScroll) > 200) {
|
||||
this.calScroll = rpx
|
||||
}
|
||||
},
|
||||
// 点击日期：第一击定起点，第二击定终点（早于起点则重定起点），选满后再点重选
|
||||
pickDate(cell) {
|
||||
if (!cell.day || cell.disabled) return
|
||||
const date = cell.date
|
||||
if (!this.pendingStart || (this.pendingStart && this.pendingEnd)) {
|
||||
this.pendingStart = date
|
||||
this.pendingEnd = ''
|
||||
this.activeQuick = ''
|
||||
} else if (date < this.pendingStart) {
|
||||
this.pendingStart = date
|
||||
this.activeQuick = ''
|
||||
} else {
|
||||
this.pendingEnd = date
|
||||
this.activeQuick = ''
|
||||
}
|
||||
},
|
||||
// 快捷范围：直接填满起止并定位到起点月
|
||||
applyQuick(q) {
|
||||
this.pendingStart = q.start
|
||||
this.pendingEnd = q.end
|
||||
this.activeQuick = q.label
|
||||
const d = parseDate(q.start)
|
||||
const meta = this.monthMetas.find(
|
||||
(mm) => mm.year === d.getFullYear() && mm.month === d.getMonth()
|
||||
)
|
||||
this.calAnchorId = ''
|
||||
this.$nextTick(() => {
|
||||
this.calAnchorId = meta ? meta.key : ''
|
||||
})
|
||||
},
|
||||
// 确定按钮：提交临时起止并写入筛选值
|
||||
onConfirmClick() {
|
||||
if (!this.rangeReady) {
|
||||
return
|
||||
}
|
||||
this.filters.startDate = this.pendingStart
|
||||
this.filters.endDate = this.pendingEnd
|
||||
this.filters.timeText = `${this.pendingStart} 至 ${this.pendingEnd}`
|
||||
this.closeDrawer()
|
||||
this.handle()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/common.css';
|
||||
|
||||
/* 页面容器：纵向 flex，让数据层撑满筛选栏以下的全部剩余视口 */
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.filters {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
min-height: 96rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
background: #ffffff;
|
||||
border-top: 1rpx solid #ededed;
|
||||
}
|
||||
|
||||
.filter-cell {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
+ .filter-cell {
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-trigger {
|
||||
height: 100%;
|
||||
min-height: 64rpx;
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #f5f6f8;
|
||||
border: 1rpx solid transparent;
|
||||
border-radius: 12rpx;
|
||||
color: #606266;
|
||||
font-size: 26rpx;
|
||||
transition: background-color 0.2s, border-color 0.2s;
|
||||
|
||||
&--active {
|
||||
background: #e9fff3;
|
||||
border-color: #2ccb98;
|
||||
color: #12a37a;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.empty-area {
|
||||
min-height: 720rpx;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 120rpx;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
margin-top: -40rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #b5b9c0;
|
||||
}
|
||||
|
||||
/* 数据层：撑满筛选栏以下全部视口，是三个下拉抽屉的定位锚点 */
|
||||
.content-area {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 遮罩：盖住筛选栏以下内容，点击关闭 */
|
||||
.content-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* 下拉面板：从数据层顶部（筛选栏下缘）展开 */
|
||||
.drop-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.08);
|
||||
z-index: 11;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom-left-radius: 24rpx;
|
||||
border-bottom-right-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 场所/状态选项面板：内容自适应高度 */
|
||||
.drop-panel--options {
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
/* 时间面板：日历占剩余空间，但不超过数据层高度（时间抽屉时遮罩仍完整盖住剩余空间） */
|
||||
.drop-panel--calendar {
|
||||
height: 66vh;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.option-drawer-header {
|
||||
padding: 28rpx 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1rpx solid #f0f1f3;
|
||||
}
|
||||
|
||||
.option-drawer-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #2a2d33;
|
||||
}
|
||||
|
||||
.option-drawer-close {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.option-drawer-list {
|
||||
padding: 12rpx 24rpx 24rpx;
|
||||
}
|
||||
|
||||
.option-drawer-item {
|
||||
min-height: 96rpx;
|
||||
padding: 0 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 14rpx;
|
||||
|
||||
&:active {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: #e9fff3;
|
||||
}
|
||||
}
|
||||
|
||||
.option-drawer-item__text {
|
||||
font-size: 30rpx;
|
||||
color: #2a2d33;
|
||||
}
|
||||
|
||||
.option-drawer-item--active .option-drawer-item__text {
|
||||
color: #2CCB98;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 时间面板头/底部（面板已锚定在筛选栏下方，不再 fixed） */
|
||||
.time-drawer-header {
|
||||
padding: 20rpx 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1rpx solid #f0f1f3;
|
||||
}
|
||||
|
||||
.time-drawer-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #2a2d33;
|
||||
}
|
||||
|
||||
.time-drawer-close {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 快捷范围行 */
|
||||
.quick-row {
|
||||
display: flex;
|
||||
padding: 20rpx 24rpx 4rpx;
|
||||
}
|
||||
|
||||
.quick-chip {
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f6f8;
|
||||
border: 1rpx solid transparent;
|
||||
border-radius: 999rpx;
|
||||
font-size: 24rpx;
|
||||
color: #606266;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: #e9fff3;
|
||||
border-color: #2ccb98;
|
||||
color: #12a37a;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
/* 星期行：钉在滚动区上方 */
|
||||
.cal-weekdays {
|
||||
display: flex;
|
||||
padding: 0 16rpx;
|
||||
border-bottom: 1rpx solid #f0f1f3;
|
||||
}
|
||||
|
||||
.cal-weekday {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
/* 滚动日历容器：占满抽屉剩余空间 */
|
||||
.cal-scroll-wrap {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.cal-scroll {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 月份块 */
|
||||
.cal-month {
|
||||
padding: 8rpx 16rpx 0;
|
||||
}
|
||||
|
||||
.cal-month-title {
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #2a2d33;
|
||||
}
|
||||
|
||||
/* 日期网格：固定 42 格（前置空格 + 当月天），节点数恒定 */
|
||||
.cal-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cal-cell {
|
||||
width: calc(100% / 7);
|
||||
box-sizing: border-box;
|
||||
padding: 4rpx;
|
||||
aspect-ratio: 1 / 1.15;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.cal-day {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12rpx;
|
||||
|
||||
&:active {
|
||||
background: #f2f3f5;
|
||||
}
|
||||
|
||||
&--start,
|
||||
&--end {
|
||||
background: #2ccb98;
|
||||
}
|
||||
|
||||
&--start.cal-day--end {
|
||||
background: #2ccb98;
|
||||
}
|
||||
|
||||
&--in {
|
||||
background: #e9fff3;
|
||||
border-radius: 0;
|
||||
|
||||
&:active {
|
||||
background: #ddf6ec;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cal-day-num {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #2a2d33;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.cal-day--start .cal-day-num,
|
||||
.cal-day--end .cal-day-num {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cal-day--in .cal-day-num {
|
||||
color: #12a37a;
|
||||
}
|
||||
|
||||
/* 开始/结束小字标注 */
|
||||
.cal-day-tag {
|
||||
font-size: 18rpx;
|
||||
line-height: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* 起止回显：只占内容高度，不与日历滚动区平分空间 */
|
||||
.range-preview {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #6b6f76;
|
||||
min-height: 56rpx;
|
||||
}
|
||||
|
||||
.time-drawer-footer {
|
||||
flex-shrink: 0;
|
||||
padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
|
||||
border-top: 1rpx solid #f0f1f3;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,320 +0,0 @@
|
|||
<!-- 首页：切换为 uview-plus 组件化结构，保留原有设备添加与配置入口 -->
|
||||
<template>
|
||||
<view class="page page-base">
|
||||
<up-navbar title="智慧养老" :fixed="false" :safe-area-inset-top="true" :border="false" left-icon="" />
|
||||
|
||||
<view class="banner">
|
||||
<view class="banner-left">
|
||||
<text class="banner-title">智慧养老云助手</text>
|
||||
<text class="banner-sub">一键开启智慧好生活</text>
|
||||
</view>
|
||||
<view class="banner-illus">
|
||||
<up-icon name="home" color="#ffffff" size="52" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<up-notice-bar
|
||||
mode="link"
|
||||
:text="noticeText"
|
||||
color="#2f5a3a"
|
||||
bg-color="#e9fff3"
|
||||
@click="goConfig"
|
||||
/>
|
||||
|
||||
<view class="site-row" @click="goSceneSelect">
|
||||
<view class="site-left">
|
||||
<up-icon name="list" size="18" color="#26c996" />
|
||||
<text class="site-text">{{ sceneName || '请选择场所' }}</text>
|
||||
</view>
|
||||
<up-icon name="arrow-right" size="14" color="#26c996" />
|
||||
</view>
|
||||
|
||||
<!-- 设备列表：loading / 错误 / 空态 / 双列卡片网格 -->
|
||||
<view v-if="loading" class="state-wrap">
|
||||
<up-loading-icon mode="circle" size="48" text="加载中..." />
|
||||
</view>
|
||||
|
||||
<view v-else-if="loadError" class="state-wrap">
|
||||
<up-empty mode="wifi" text="加载失败，请检查网络" />
|
||||
<up-button type="success" shape="circle" text="重试" class="retry-btn" @click="loadDevices" />
|
||||
</view>
|
||||
|
||||
<view v-else-if="deviceList.length === 0" class="state-wrap">
|
||||
<up-empty mode="list" text="暂无设备" />
|
||||
<up-button type="success" shape="circle" text="添加设备" class="retry-btn" @click="goAdd" />
|
||||
</view>
|
||||
|
||||
<view v-else class="device-grid">
|
||||
<view
|
||||
v-for="device in deviceList"
|
||||
:key="device.id"
|
||||
class="device-card"
|
||||
@click="goDetail(device)"
|
||||
>
|
||||
<view class="device-icon" :class="{ 'device-icon--offline': !device.online }">
|
||||
<up-icon :name="iconOf(device)" :color="device.online ? '#ffffff' : '#b5b9c0'" size="30" />
|
||||
</view>
|
||||
<text class="device-name">{{ device.name }}</text>
|
||||
<view class="device-status">
|
||||
<view class="status-dot" :class="device.online ? 'status-dot--on' : 'status-dot--off'" />
|
||||
<text class="status-text" :class="{ 'status-text--off': !device.online }">
|
||||
{{ device.online ? '在线' : '离线' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fab-wrap" @click="goAdd">
|
||||
<up-icon name="plus" color="#ffffff" size="28" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDeviceList } from '@/api/device'
|
||||
import { ROUTES } from '@/constants/routes'
|
||||
import { navigateTo } from '@/utils/navigation'
|
||||
import { getCurrentScene } from '@/store/scene'
|
||||
|
||||
// 设备型号 -> 图标映射，未命中走兜底图标。
|
||||
const DEVICE_ICON_MAP = {
|
||||
ED713: 'home',
|
||||
ED719: 'bell'
|
||||
}
|
||||
const FALLBACK_ICON = 'setting'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
noticeText: '点击选择场所后可进入设备配置流程',
|
||||
sceneName: '',
|
||||
loading: true,
|
||||
loadError: false,
|
||||
deviceList: []
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.refreshScene()
|
||||
this.loadDevices()
|
||||
},
|
||||
methods: {
|
||||
// 从全局场景状态刷新回显文案。
|
||||
refreshScene() {
|
||||
const scene = getCurrentScene()
|
||||
this.sceneName = scene ? scene.name : ''
|
||||
},
|
||||
// 拉取当前场所的设备列表；在线状态需新鲜，每次 onShow 重拉。
|
||||
async loadDevices() {
|
||||
this.loading = true
|
||||
this.loadError = false
|
||||
try {
|
||||
const scene = getCurrentScene()
|
||||
const data = await getDeviceList(scene ? scene.id : null)
|
||||
this.deviceList = Array.isArray(data) ? data : []
|
||||
} catch (error) {
|
||||
this.loadError = true
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
// 设备型号对应图标。
|
||||
iconOf(device) {
|
||||
return DEVICE_ICON_MAP[device.model] || FALLBACK_ICON
|
||||
},
|
||||
// 进入场景选择页。
|
||||
goSceneSelect() {
|
||||
navigateTo(ROUTES.SCENE_SELECT)
|
||||
},
|
||||
// 进入设备添加页（后续会承接蓝牙配网流程入口）。
|
||||
goAdd() {
|
||||
navigateTo(ROUTES.DEVICE_ADD)
|
||||
},
|
||||
// 进入设备配置页。
|
||||
goConfig() {
|
||||
navigateTo(ROUTES.DEVICE_CONFIG)
|
||||
},
|
||||
// 进入设备详情页：携带基础信息，后续接详情接口后改为仅传 id。
|
||||
goDetail(device) {
|
||||
const name = encodeURIComponent(device.name || '')
|
||||
navigateTo(`${ROUTES.DEVICE_DETAIL}?id=${device.id}&name=${name}&model=${device.model || ''}&online=${device.online ? 1 : 0}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/common.css';
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin: 0;
|
||||
min-height: 360rpx;
|
||||
background: linear-gradient(135deg, #1fca97 0%, #2dbf9c 100%);
|
||||
padding: 48rpx 44rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.banner-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 52rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.banner-sub {
|
||||
font-size: 34rpx;
|
||||
color: #e9fff8;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.banner-illus {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.site-row {
|
||||
height: 108rpx;
|
||||
padding: 0 32rpx;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.site-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.site-text {
|
||||
margin-left: 14rpx;
|
||||
font-size: 34rpx;
|
||||
color: #222;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 列表三态容器 */
|
||||
.state-wrap {
|
||||
margin-top: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
margin-top: 40rpx;
|
||||
width: 240rpx;
|
||||
}
|
||||
|
||||
/* 设备双列网格 */
|
||||
.device-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 24rpx 0;
|
||||
}
|
||||
|
||||
.device-card {
|
||||
width: 48.5%;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 36rpx 20rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&:active {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
}
|
||||
|
||||
.device-icon {
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #1fca97 0%, #2dbf9c 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&--offline {
|
||||
background: #eef0f4;
|
||||
}
|
||||
}
|
||||
|
||||
.device-name {
|
||||
max-width: 100%;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #2a2d33;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
margin-top: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
|
||||
&--on {
|
||||
background: #2ccb98;
|
||||
}
|
||||
|
||||
&--off {
|
||||
background: #c0c4cc;
|
||||
}
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 24rpx;
|
||||
color: #12a37a;
|
||||
|
||||
&--off {
|
||||
color: #9ea1a6;
|
||||
}
|
||||
}
|
||||
|
||||
.fab-wrap {
|
||||
position: fixed;
|
||||
right: 40rpx;
|
||||
bottom: 60rpx;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #1fca97 0%, #2dbf9c 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(31, 202, 151, 0.4);
|
||||
/* 点击态缩放反馈 */
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,326 +0,0 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<view class="hero">
|
||||
<text class="title">欢迎使用智慧养老</text>
|
||||
<text class="sub">登录后可管理设备与查看事件</text>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<up-form :model="form" label-position="top" :border-bottom="false">
|
||||
<up-form-item label="手机号" :required="true">
|
||||
<view class="mobile-wrap">
|
||||
<text class="prefix">+86</text>
|
||||
<up-input
|
||||
v-model="form.mobile"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
clearable
|
||||
placeholder="请输入手机号"
|
||||
border="none"
|
||||
:custom-style="inputInnerStyle"
|
||||
/>
|
||||
</view>
|
||||
</up-form-item>
|
||||
|
||||
<up-form-item label="验证码" :required="true">
|
||||
<view class="code-wrap">
|
||||
<up-input
|
||||
v-model="form.code"
|
||||
type="number"
|
||||
maxlength="6"
|
||||
clearable
|
||||
placeholder="请输入验证码"
|
||||
border="none"
|
||||
:custom-style="inputInnerStyle"
|
||||
/>
|
||||
<up-button
|
||||
class="code-btn"
|
||||
size="mini"
|
||||
type="primary"
|
||||
:plain="countdown > 0"
|
||||
:disabled="countdown > 0"
|
||||
:text="codeBtnText"
|
||||
@click="sendCode"
|
||||
/>
|
||||
</view>
|
||||
</up-form-item>
|
||||
</up-form>
|
||||
|
||||
<up-button class="login-btn" type="success" shape="circle" text="手机号验证码登录" @click="loginByMobileSubmit" />
|
||||
|
||||
<view class="split">
|
||||
<view class="line"></view>
|
||||
<text class="split-text">或</text>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
|
||||
<up-button class="wx-btn" type="success" shape="circle" text="微信一键登录" @click="loginByWechatSubmit" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { loginByMobile, loginByWechat, sendSmsCode } from '@/api/user'
|
||||
import { createCountdown } from '@/hooks/useCountdown'
|
||||
import { goAfterLogin, isLoggedIn, setAuth } from '@/utils/auth'
|
||||
import { showToast } from '@/utils/toast'
|
||||
import { isValidMobile, isValidSmsCode } from '@/utils/validators'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
mobile: '',
|
||||
code: ''
|
||||
},
|
||||
countdown: 0,
|
||||
redirect: '',
|
||||
countdownController: null,
|
||||
inputInnerStyle: {
|
||||
padding: '0'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
codeBtnText() {
|
||||
return this.countdown > 0 ? `${this.countdown}s后重试` : '获取验证码'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.countdownController = createCountdown({
|
||||
duration: 60,
|
||||
onChange: (value) => {
|
||||
this.countdown = value
|
||||
}
|
||||
})
|
||||
},
|
||||
onLoad(query) {
|
||||
this.redirect = query.redirect || ''
|
||||
|
||||
if (isLoggedIn()) {
|
||||
goAfterLogin(this.redirect)
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
this.clearCountdown()
|
||||
},
|
||||
methods: {
|
||||
clearCountdown() {
|
||||
if (!this.countdownController) {
|
||||
return
|
||||
}
|
||||
|
||||
this.countdownController.clear()
|
||||
},
|
||||
|
||||
validateMobileOrToast() {
|
||||
if (isValidMobile(this.form.mobile)) {
|
||||
return true
|
||||
}
|
||||
|
||||
showToast('请输入正确手机号')
|
||||
return false
|
||||
},
|
||||
|
||||
finishLogin(payload = {}) {
|
||||
const token = payload.token || `mock-token-${Date.now()}`
|
||||
const user = payload.user || {
|
||||
name: '微信用户',
|
||||
mobile: '',
|
||||
loginType: 'wechat'
|
||||
}
|
||||
|
||||
setAuth({ token, user })
|
||||
goAfterLogin(this.redirect)
|
||||
},
|
||||
|
||||
async sendCode() {
|
||||
if (!this.validateMobileOrToast()) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await sendSmsCode(this.form.mobile)
|
||||
} catch (error) {
|
||||
return
|
||||
}
|
||||
|
||||
showToast('验证码已发送')
|
||||
this.countdownController.start()
|
||||
},
|
||||
|
||||
async loginByMobileSubmit() {
|
||||
if (!this.validateMobileOrToast()) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!isValidSmsCode(this.form.code)) {
|
||||
showToast('请输入6位验证码')
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '登录中'
|
||||
})
|
||||
|
||||
try {
|
||||
const data = await loginByMobile(this.form.mobile, this.form.code)
|
||||
this.finishLogin({
|
||||
token: data?.token,
|
||||
user: data?.user || {
|
||||
name: `用户${this.form.mobile.slice(-4)}`,
|
||||
mobile: this.form.mobile,
|
||||
loginType: 'mobile'
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
|
||||
async loginByWechatSubmit() {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.showLoading({
|
||||
title: '微信登录中'
|
||||
})
|
||||
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (res) => {
|
||||
try {
|
||||
const data = await loginByWechat(res.code || '')
|
||||
this.finishLogin({
|
||||
token: data?.token,
|
||||
user: data?.user || {
|
||||
name: '微信用户',
|
||||
mobile: '',
|
||||
loginType: 'wechat'
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading()
|
||||
showToast('微信登录失败，请重试')
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.showLoading({
|
||||
title: '微信登录中'
|
||||
})
|
||||
|
||||
try {
|
||||
const data = await loginByWechat('')
|
||||
this.finishLogin({
|
||||
token: data?.token,
|
||||
user: data?.user || {
|
||||
name: '微信用户',
|
||||
mobile: '',
|
||||
loginType: 'wechat'
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #ecf9f5 0%, #f5f6f8 48%, #f1f1f4 100%);
|
||||
padding: 80rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hero {
|
||||
margin: 30rpx 8rpx 46rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 54rpx;
|
||||
color: #18242f;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sub {
|
||||
display: block;
|
||||
margin-top: 16rpx;
|
||||
font-size: 30rpx;
|
||||
color: #6f7782;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 16rpx 40rpx rgba(10, 63, 48, 0.08);
|
||||
}
|
||||
|
||||
.mobile-wrap,
|
||||
.code-wrap {
|
||||
min-height: 98rpx;
|
||||
border: 1rpx solid #e8eaef;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mobile-wrap {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.code-wrap {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.prefix {
|
||||
width: 86rpx;
|
||||
color: #1f2b37;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.wx-btn {
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.split {
|
||||
margin: 34rpx 0 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.line {
|
||||
flex: 1;
|
||||
height: 1rpx;
|
||||
background: #eceef1;
|
||||
}
|
||||
|
||||
.split-text {
|
||||
padding: 0 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #9aa2ad;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
<!-- 我的页：引入 uview-plus 组件重构个人中心菜单 -->
|
||||
<template>
|
||||
<view class="page page-base">
|
||||
<up-navbar title="我的" :fixed="false" :safe-area-inset-top="true" :border="false" left-icon="" />
|
||||
|
||||
<view class="user-card" @click="goLogin">
|
||||
<up-avatar size="58" text="U" bg-color="#35c48f" />
|
||||
<view class="user-main">
|
||||
<text class="user-name">{{ userName }}</text>
|
||||
<text class="user-tip">{{ loginTip }}</text>
|
||||
</view>
|
||||
<up-icon name="arrow-right" size="14" color="#b5b9c0" />
|
||||
</view>
|
||||
|
||||
<up-cell-group :border="false" custom-style="margin: 24rpx; border-radius: 24rpx; overflow: hidden; background: #ffffff;">
|
||||
<up-cell title="设备配置" is-link @click="goConfig" />
|
||||
<up-cell title="场所管理" is-link />
|
||||
<up-cell title="手机号" :value="phoneText" is-link />
|
||||
<up-cell title="当前版本" value="2.8.44" />
|
||||
<up-cell title="退出登录" @click="logout" />
|
||||
</up-cell-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ROUTES } from '@/constants/routes'
|
||||
import { clearAuth, getUser, isLoggedIn, LOGIN_PAGE, redirectToLogin } from '@/utils/auth'
|
||||
import { navigateTo } from '@/utils/navigation'
|
||||
import { showToast } from '@/utils/toast'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userName() {
|
||||
return this.userInfo?.name || '微信用户'
|
||||
},
|
||||
phoneText() {
|
||||
return this.userInfo?.mobile || '未绑定'
|
||||
},
|
||||
// 根据登录类型展示不同文案。
|
||||
loginTip() {
|
||||
return this.userInfo?.loginType === 'mobile' ? '手机号验证码登录' : '微信登录'
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 每次回到页面时刷新一次本地缓存用户信息。
|
||||
this.userInfo = getUser()
|
||||
},
|
||||
methods: {
|
||||
goConfig() {
|
||||
navigateTo(ROUTES.DEVICE_CONFIG)
|
||||
},
|
||||
// 已登录时不再重复跳转登录页。
|
||||
goLogin() {
|
||||
if (isLoggedIn()) {
|
||||
return
|
||||
}
|
||||
|
||||
navigateTo(LOGIN_PAGE)
|
||||
},
|
||||
// 退出时清理本地登录态并回到首页。
|
||||
logout() {
|
||||
clearAuth()
|
||||
showToast('已退出登录')
|
||||
redirectToLogin(ROUTES.HOME)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/common.css';
|
||||
|
||||
.page {
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
margin: 24rpx;
|
||||
min-height: 180rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 28rpx;
|
||||
}
|
||||
|
||||
.user-main {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
display: block;
|
||||
font-size: 42rpx;
|
||||
color: #2a2d33;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.user-tip {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
color: #9ea1a6;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
<!-- 场景选择页：加载场景列表，点选后保存并返回首页 -->
|
||||
<template>
|
||||
<view class="page page-base">
|
||||
<up-navbar title="选择场所" :fixed="false" :safe-area-inset-top="true" :border="false" auto-back />
|
||||
|
||||
<view v-if="loading" class="state-wrap">
|
||||
<up-loading-icon mode="circle" size="48" text="加载中..." />
|
||||
</view>
|
||||
|
||||
<view v-else-if="loadError" class="state-wrap">
|
||||
<up-empty mode="wifi" text="加载失败，请检查网络" />
|
||||
<up-button type="success" shape="circle" text="重试" class="retry-btn" @click="loadScenes" />
|
||||
</view>
|
||||
|
||||
<view v-else-if="sceneList.length === 0" class="state-wrap">
|
||||
<up-empty mode="list" text="暂无场景" />
|
||||
</view>
|
||||
|
||||
<view v-else class="scene-list">
|
||||
<view
|
||||
v-for="scene in sceneList"
|
||||
:key="scene.id"
|
||||
class="scene-item"
|
||||
:class="{ 'scene-item--active': scene.id === currentSceneId }"
|
||||
@click="selectScene(scene)"
|
||||
>
|
||||
<text class="scene-name">{{ scene.name }}</text>
|
||||
<up-icon
|
||||
:name="scene.id === currentSceneId ? 'checkmark' : 'arrow-right'"
|
||||
:size="scene.id === currentSceneId ? '16' : '14'"
|
||||
:color="scene.id === currentSceneId ? '#26c996' : '#c0c4cc'"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSceneList } from '@/api/scene'
|
||||
import { getCurrentScene, setCurrentScene } from '@/store/scene'
|
||||
import { navigateBack } from '@/utils/navigation'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
loadError: false,
|
||||
sceneList: [],
|
||||
currentSceneId: getCurrentScene()?.id ?? null
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadScenes()
|
||||
},
|
||||
methods: {
|
||||
// 拉取场景列表；失败时切换错误态供重试，toast 由请求封装统一弹出。
|
||||
async loadScenes() {
|
||||
this.loading = true
|
||||
this.loadError = false
|
||||
try {
|
||||
const data = await getSceneList()
|
||||
this.sceneList = Array.isArray(data) ? data : []
|
||||
} catch (error) {
|
||||
this.loadError = true
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
// 选中场景：保存后返回，首页 onShow 回显。
|
||||
selectScene(scene) {
|
||||
setCurrentScene(scene)
|
||||
navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/common.css';
|
||||
|
||||
.state-wrap {
|
||||
margin-top: 120rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
margin-top: 40rpx;
|
||||
width: 240rpx;
|
||||
}
|
||||
|
||||
.scene-list {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.scene-item {
|
||||
height: 104rpx;
|
||||
padding: 0 32rpx;
|
||||
margin-bottom: 2rpx;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.scene-item--active {
|
||||
background: #e9fff3;
|
||||
}
|
||||
|
||||
.scene-name {
|
||||
font-size: 32rpx;
|
||||
color: #222;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.scene-item--active .scene-name {
|
||||
color: #26c996;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"setting": {
|
||||
"es6": true,
|
||||
"postcss": true,
|
||||
"minified": true,
|
||||
"uglifyFileName": false,
|
||||
"enhance": true,
|
||||
"packNpmRelationList": [],
|
||||
"babelSetting": {
|
||||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
},
|
||||
"useCompilerPlugins": false,
|
||||
"minifyWXML": true
|
||||
},
|
||||
"compileType": "miniprogram",
|
||||
"simulatorPluginLibVersion": {},
|
||||
"packOptions": {
|
||||
"ignore": [],
|
||||
"include": []
|
||||
},
|
||||
"appid": "wxe9773bb6f025ab00",
|
||||
"editorSetting": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"libVersion": "3.17.2",
|
||||
"projectname": "SEC_Warehouse",
|
||||
"setting": {
|
||||
"urlCheck": true,
|
||||
"coverView": true,
|
||||
"lazyloadPlaceholderEnable": false,
|
||||
"skylineRenderEnable": false,
|
||||
"preloadBackgroundData": false,
|
||||
"autoAudits": false,
|
||||
"showShadowRootInWxmlPanel": true,
|
||||
"compileHotReLoad": true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { request } from '@/http'
|
||||
|
||||
const USE_MOCK = true
|
||||
|
||||
export interface LoginParams {
|
||||
username: string
|
||||
password: string
|
||||
}
|
||||
|
||||
export interface LoginResult {
|
||||
token: string
|
||||
userId: string
|
||||
}
|
||||
|
||||
export function login(params: LoginParams): Promise<LoginResult> {
|
||||
if (USE_MOCK) {
|
||||
return Promise.resolve({
|
||||
token: 'mock-token-' + Date.now(),
|
||||
userId: 'u-001'
|
||||
})
|
||||
}
|
||||
return request.post<LoginResult>('/auth/login', params as unknown as Record<string, unknown>)
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import { request } from '@/http'
|
||||
import type { Device } from '@/store/deviceSlice'
|
||||
|
||||
const USE_MOCK = true
|
||||
|
||||
const MOCK_DEVICES: Device[] = [
|
||||
{ id: 1, name: '客厅体征监测仪', model: 'ED713', online: true },
|
||||
{ id: 2, name: '卧室体征监测仪', model: 'ED713', online: false },
|
||||
{ id: 3, name: '书房跌倒检测雷达', model: 'ED719', online: true },
|
||||
{ id: 4, name: '走廊跌倒检测雷达', model: 'ED719', online: false }
|
||||
]
|
||||
|
||||
export function getDeviceList(sceneId: number | null): Promise<Device[]> {
|
||||
if (USE_MOCK) {
|
||||
return new Promise((resolve) => setTimeout(() => resolve(MOCK_DEVICES), 500))
|
||||
}
|
||||
return request.get<Device[]>('/device/list', { sceneId })
|
||||
}
|
||||
|
||||
// getVitalSigns / getHeartRateHistory 在 P3 Task 3.2 加入本文件
|
||||
|
||||
const MOCK_VITALS = {
|
||||
heartRate: 72,
|
||||
respiratoryRate: 16,
|
||||
bodyMovement: 3,
|
||||
moveState: 3,
|
||||
onbedStatus: 1,
|
||||
bodyStatus: 2,
|
||||
bodyPosition: 8
|
||||
}
|
||||
|
||||
const heartState: { series: number[]; value: number } = { series: [], value: 72 }
|
||||
|
||||
function driftHeartRate(): number {
|
||||
heartState.value += Math.round((Math.random() - 0.5) * 4)
|
||||
heartState.value = Math.min(90, Math.max(60, heartState.value))
|
||||
return heartState.value
|
||||
}
|
||||
|
||||
for (let i = 0; i < 50; i++) heartState.series.push(driftHeartRate())
|
||||
|
||||
function pushHeartReadings() {
|
||||
const n = 2 + Math.round(Math.random())
|
||||
for (let i = 0; i < n; i++) heartState.series.push(driftHeartRate())
|
||||
if (heartState.series.length > 50) heartState.series = heartState.series.slice(-50)
|
||||
}
|
||||
|
||||
export interface VitalSigns {
|
||||
heartRate: number
|
||||
respiratoryRate: number
|
||||
bodyMovement: number
|
||||
moveState: number
|
||||
onbedStatus: number
|
||||
bodyStatus: number
|
||||
bodyPosition: number
|
||||
deviceId: string
|
||||
}
|
||||
|
||||
export function getVitalSigns(deviceId: string): Promise<VitalSigns> {
|
||||
if (USE_MOCK) {
|
||||
const heartRate = driftHeartRate()
|
||||
return new Promise((resolve) =>
|
||||
setTimeout(() => resolve({ ...MOCK_VITALS, heartRate, deviceId }), 300)
|
||||
)
|
||||
}
|
||||
return request.get<VitalSigns>('/device/vitals', { deviceId })
|
||||
}
|
||||
|
||||
export function getHeartRateHistory(deviceId: string): Promise<number[]> {
|
||||
if (USE_MOCK) {
|
||||
pushHeartReadings()
|
||||
return new Promise((resolve) => setTimeout(() => resolve([...heartState.series]), 300))
|
||||
}
|
||||
return request.get<number[]>('/device/heart-history', { deviceId })
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { request } from '@/http'
|
||||
|
||||
const USE_MOCK = true
|
||||
|
||||
export interface EventItem {
|
||||
id: number
|
||||
sceneName: string
|
||||
deviceName: string
|
||||
status: number
|
||||
time: string
|
||||
}
|
||||
|
||||
export interface EventQuery {
|
||||
sceneId: number
|
||||
status: number
|
||||
startDate: string
|
||||
endDate: string
|
||||
}
|
||||
|
||||
// 事件列表接口未定：mock 返回空数组，页面保持空态
|
||||
export function getEventList(_query: EventQuery): Promise<EventItem[]> {
|
||||
if (USE_MOCK) {
|
||||
return Promise.resolve([])
|
||||
}
|
||||
return request.get<EventItem[]>('/event/list', { ..._query })
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { request } from '@/http'
|
||||
import type { Scene } from '@/store/sceneSlice'
|
||||
|
||||
const USE_MOCK = true
|
||||
|
||||
const MOCK_SCENES: Scene[] = [
|
||||
{ id: 1, name: '客厅' },
|
||||
{ id: 2, name: '卧室' },
|
||||
{ id: 3, name: '书房' },
|
||||
{ id: 4, name: '走廊' }
|
||||
]
|
||||
|
||||
export function getSceneList(): Promise<Scene[]> {
|
||||
if (USE_MOCK) {
|
||||
return new Promise((resolve) => setTimeout(() => resolve(MOCK_SCENES), 300))
|
||||
}
|
||||
return request.get<Scene[]>('/scene/list')
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { request } from '@/http'
|
||||
|
||||
const USE_MOCK = true
|
||||
|
||||
export interface UserInfo {
|
||||
id: string
|
||||
name: string
|
||||
avatar: string
|
||||
}
|
||||
|
||||
export function getUserInfo(): Promise<UserInfo> {
|
||||
if (USE_MOCK) {
|
||||
return Promise.resolve({
|
||||
id: 'u-001',
|
||||
name: '张大爷',
|
||||
avatar: ''
|
||||
})
|
||||
}
|
||||
return request.get<UserInfo>('/user/info')
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
export default {
|
||||
// P5 收尾：全部 8 个页面齐备
|
||||
pages: [
|
||||
'pages/index/index',
|
||||
'pages/login/index',
|
||||
'pages/mine/index',
|
||||
'pages/scene/select',
|
||||
'pages/device/detail',
|
||||
'pages/device/add',
|
||||
'pages/device/config',
|
||||
'pages/event/index'
|
||||
],
|
||||
window: {
|
||||
navigationStyle: 'custom', // 与现状 pages.json 一致：所有页自绘 Navbar，避免原生导航栏与自研 Navbar 双栏
|
||||
navigationBarTextStyle: 'black',
|
||||
navigationBarTitleText: '智慧养老',
|
||||
navigationBarBackgroundColor: '#F8F8F8',
|
||||
backgroundColor: '#F1F1F4'
|
||||
},
|
||||
tabBar: {
|
||||
color: '#666666',
|
||||
selectedColor: '#2CCB98',
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderStyle: 'black',
|
||||
list: [
|
||||
{
|
||||
pagePath: 'pages/index/index',
|
||||
text: '首页',
|
||||
iconPath: 'assets/tabbar/home.png',
|
||||
selectedIconPath: 'assets/tabbar/home-active.png'
|
||||
},
|
||||
{
|
||||
pagePath: 'pages/event/index',
|
||||
text: '事件',
|
||||
iconPath: 'assets/tabbar/event.png',
|
||||
selectedIconPath: 'assets/tabbar/event-active.png'
|
||||
},
|
||||
{
|
||||
pagePath: 'pages/mine/index',
|
||||
text: '我的',
|
||||
iconPath: 'assets/tabbar/mine.png',
|
||||
selectedIconPath: 'assets/tabbar/mine-active.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { PropsWithChildren } from 'react'
|
||||
import { Provider } from 'react-redux'
|
||||
import { store } from './store'
|
||||
|
||||
import './styles/reset.scss'
|
||||
|
||||
function App({ children }: PropsWithChildren) {
|
||||
return <Provider store={store}>{children}</Provider>
|
||||
}
|
||||
|
||||
export default App
|
||||
|
Before Width: | Height: | Size: 361 B After Width: | Height: | Size: 361 B |
|
Before Width: | Height: | Size: 351 B After Width: | Height: | Size: 351 B |
|
Before Width: | Height: | Size: 559 B After Width: | Height: | Size: 559 B |
|
Before Width: | Height: | Size: 590 B After Width: | Height: | Size: 590 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,8 @@
|
|||
import Taro from '@tarojs/taro'
|
||||
|
||||
/**
|
||||
* 平台注入层：bleCore 的 promisifyApi 通过该对象调用异步 API。
|
||||
* Taro.* 与 uni.* 蓝牙 API 同名同参（openBluetoothAdapter、createBLEConnection 等），
|
||||
* 单元测试时可注入 mock 对象替换。
|
||||
*/
|
||||
export const taroPlatform: Record<string, unknown> = Taro as unknown as Record<string, unknown>
|
||||
|
|
@ -5,11 +5,13 @@ import { uint8ArrayToArrayBuffer, toUint8Array } from '../utils/bytes';
|
|||
import { toFullUuid, uuidEquals, uuidInList } from '../utils/uuid';
|
||||
import { runWithRetry } from './retry';
|
||||
import { getBleProfile, DEVICE_PROFILE } from '../protocols/profiles';
|
||||
import { taroPlatform } from '../adapter';
|
||||
|
||||
// 把 uni 的 success/fail 回调风格统一成 Promise，便于串联 async 流程。
|
||||
function promisifyUniApi(apiName, params = {}) {
|
||||
// 把平台（Taro/uni）的 success/fail 回调风格统一成 Promise，便于串联 async 流程。
|
||||
// 平台对象通过 createBleCore(options) 可注入，默认 Taro；单测可传 mock。
|
||||
function promisifyApi(platform, apiName, params = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni[apiName]({
|
||||
platform[apiName]({
|
||||
...params,
|
||||
success: (res) => resolve(res),
|
||||
fail: (err) => reject(err),
|
||||
|
|
@ -23,6 +25,7 @@ function promisifyUniApi(apiName, params = {}) {
|
|||
*/
|
||||
export function createBleCore(options = {}) {
|
||||
const {
|
||||
platform = taroPlatform,
|
||||
reconnect = {
|
||||
enabled: true,
|
||||
retries: 2,
|
||||
|
|
@ -92,7 +95,7 @@ export function createBleCore(options = {}) {
|
|||
/** 打开蓝牙适配器，成功后标记可用并进入 ADAPTER_OPENED 阶段。 */
|
||||
async function openAdapter() {
|
||||
try {
|
||||
await promisifyUniApi('openBluetoothAdapter');
|
||||
await promisifyApi(platform, 'openBluetoothAdapter');
|
||||
patchState({ available: true });
|
||||
setStage(BLE_STAGE.ADAPTER_OPENED);
|
||||
return true;
|
||||
|
|
@ -104,7 +107,7 @@ export function createBleCore(options = {}) {
|
|||
/** 关闭蓝牙适配器并重置全部运行时状态。 */
|
||||
async function closeAdapter() {
|
||||
try {
|
||||
await promisifyUniApi('closeBluetoothAdapter');
|
||||
await promisifyApi(platform, 'closeBluetoothAdapter');
|
||||
} catch (error) {
|
||||
logger.warn('[BLE] close adapter failed', error);
|
||||
}
|
||||
|
|
@ -129,7 +132,7 @@ export function createBleCore(options = {}) {
|
|||
/** 读取当前适配器状态（可用/搜索中），同步到内部状态。 */
|
||||
async function getAdapterState() {
|
||||
try {
|
||||
const result = await promisifyUniApi('getBluetoothAdapterState');
|
||||
const result = await promisifyApi(platform, 'getBluetoothAdapterState');
|
||||
patchState({
|
||||
available: Boolean(result.available),
|
||||
discovering: Boolean(result.discovering),
|
||||
|
|
@ -158,7 +161,7 @@ export function createBleCore(options = {}) {
|
|||
}
|
||||
};
|
||||
|
||||
uni.onBluetoothAdapterStateChange(adapterStateHandler);
|
||||
platform.onBluetoothAdapterStateChange(adapterStateHandler);
|
||||
}
|
||||
|
||||
/** 移除适配器状态变更监听。 */
|
||||
|
|
@ -167,8 +170,8 @@ export function createBleCore(options = {}) {
|
|||
return;
|
||||
}
|
||||
|
||||
if (uni.offBluetoothAdapterStateChange) {
|
||||
uni.offBluetoothAdapterStateChange(adapterStateHandler);
|
||||
if (platform.offBluetoothAdapterStateChange) {
|
||||
platform.offBluetoothAdapterStateChange(adapterStateHandler);
|
||||
}
|
||||
|
||||
adapterStateHandler = null;
|
||||
|
|
@ -204,7 +207,7 @@ export function createBleCore(options = {}) {
|
|||
options.powerLevel = powerLevel;
|
||||
}
|
||||
|
||||
await promisifyUniApi('startBluetoothDevicesDiscovery', options);
|
||||
await promisifyApi(platform, 'startBluetoothDevicesDiscovery', options);
|
||||
patchState({ discovering: true, deviceMap: {} });
|
||||
setStage(BLE_STAGE.DISCOVERING);
|
||||
return true;
|
||||
|
|
@ -216,7 +219,7 @@ export function createBleCore(options = {}) {
|
|||
/** 停止设备扫描。 */
|
||||
async function stopDiscovery() {
|
||||
try {
|
||||
await promisifyUniApi('stopBluetoothDevicesDiscovery');
|
||||
await promisifyApi(platform, 'stopBluetoothDevicesDiscovery');
|
||||
} catch (error) {
|
||||
logger.warn('[BLE] stop discovery failed', error);
|
||||
}
|
||||
|
|
@ -256,7 +259,7 @@ export function createBleCore(options = {}) {
|
|||
eventBus.emit('device:found', Object.values(nextMap));
|
||||
};
|
||||
|
||||
uni.onBluetoothDeviceFound(deviceFoundHandler);
|
||||
platform.onBluetoothDeviceFound(deviceFoundHandler);
|
||||
}
|
||||
|
||||
/** 移除设备发现监听。 */
|
||||
|
|
@ -265,8 +268,8 @@ export function createBleCore(options = {}) {
|
|||
return;
|
||||
}
|
||||
|
||||
if (uni.offBluetoothDeviceFound) {
|
||||
uni.offBluetoothDeviceFound(deviceFoundHandler);
|
||||
if (platform.offBluetoothDeviceFound) {
|
||||
platform.offBluetoothDeviceFound(deviceFoundHandler);
|
||||
}
|
||||
|
||||
deviceFoundHandler = null;
|
||||
|
|
@ -288,7 +291,7 @@ export function createBleCore(options = {}) {
|
|||
|
||||
const runConnect = async () => {
|
||||
setStage(BLE_STAGE.CONNECTING);
|
||||
await promisifyUniApi('createBLEConnection', { deviceId, timeout });
|
||||
await promisifyApi(platform, 'createBLEConnection', { deviceId, timeout });
|
||||
patchState({ connected: true, deviceId });
|
||||
setStage(BLE_STAGE.CONNECTED);
|
||||
return true;
|
||||
|
|
@ -319,7 +322,7 @@ export function createBleCore(options = {}) {
|
|||
}
|
||||
|
||||
try {
|
||||
await promisifyUniApi('closeBLEConnection', { deviceId });
|
||||
await promisifyApi(platform, 'closeBLEConnection', { deviceId });
|
||||
} catch (error) {
|
||||
logger.warn('[BLE] close connection failed', error);
|
||||
}
|
||||
|
|
@ -352,7 +355,7 @@ export function createBleCore(options = {}) {
|
|||
}
|
||||
};
|
||||
|
||||
uni.onBLEConnectionStateChange(connectionStateHandler);
|
||||
platform.onBLEConnectionStateChange(connectionStateHandler);
|
||||
}
|
||||
|
||||
/** 移除连接状态变更监听。 */
|
||||
|
|
@ -361,8 +364,8 @@ export function createBleCore(options = {}) {
|
|||
return;
|
||||
}
|
||||
|
||||
if (uni.offBLEConnectionStateChange) {
|
||||
uni.offBLEConnectionStateChange(connectionStateHandler);
|
||||
if (platform.offBLEConnectionStateChange) {
|
||||
platform.offBLEConnectionStateChange(connectionStateHandler);
|
||||
}
|
||||
|
||||
connectionStateHandler = null;
|
||||
|
|
@ -391,7 +394,7 @@ export function createBleCore(options = {}) {
|
|||
}
|
||||
|
||||
try {
|
||||
const result = await promisifyUniApi('getBLEDeviceServices', {
|
||||
const result = await promisifyApi(platform, 'getBLEDeviceServices', {
|
||||
deviceId,
|
||||
});
|
||||
const services = result.services || [];
|
||||
|
|
@ -434,7 +437,7 @@ export function createBleCore(options = {}) {
|
|||
}
|
||||
|
||||
try {
|
||||
const result = await promisifyUniApi('getBLEDeviceCharacteristics', {
|
||||
const result = await promisifyApi(platform, 'getBLEDeviceCharacteristics', {
|
||||
deviceId,
|
||||
serviceId,
|
||||
});
|
||||
|
|
@ -478,7 +481,7 @@ export function createBleCore(options = {}) {
|
|||
}
|
||||
|
||||
try {
|
||||
await promisifyUniApi('readBLECharacteristicValue', {
|
||||
await promisifyApi(platform, 'readBLECharacteristicValue', {
|
||||
deviceId,
|
||||
serviceId,
|
||||
characteristicId,
|
||||
|
|
@ -531,7 +534,7 @@ export function createBleCore(options = {}) {
|
|||
if (writeType) {
|
||||
params.writeType = writeType;
|
||||
}
|
||||
await promisifyUniApi('writeBLECharacteristicValue', params);
|
||||
await promisifyApi(platform, 'writeBLECharacteristicValue', params);
|
||||
return true;
|
||||
} catch (error) {
|
||||
throw emitError(error);
|
||||
|
|
@ -552,7 +555,7 @@ export function createBleCore(options = {}) {
|
|||
}
|
||||
|
||||
try {
|
||||
await promisifyUniApi('notifyBLECharacteristicValueChange', {
|
||||
await promisifyApi(platform, 'notifyBLECharacteristicValueChange', {
|
||||
deviceId,
|
||||
serviceId,
|
||||
characteristicId,
|
||||
|
|
@ -586,7 +589,7 @@ export function createBleCore(options = {}) {
|
|||
});
|
||||
};
|
||||
|
||||
uni.onBLECharacteristicValueChange(characteristicValueHandler);
|
||||
platform.onBLECharacteristicValueChange(characteristicValueHandler);
|
||||
}
|
||||
|
||||
/** 移除特征值变更监听。 */
|
||||
|
|
@ -595,8 +598,8 @@ export function createBleCore(options = {}) {
|
|||
return;
|
||||
}
|
||||
|
||||
if (uni.offBLECharacteristicValueChange) {
|
||||
uni.offBLECharacteristicValueChange(characteristicValueHandler);
|
||||
if (platform.offBLECharacteristicValueChange) {
|
||||
platform.offBLECharacteristicValueChange(characteristicValueHandler);
|
||||
}
|
||||
|
||||
characteristicValueHandler = null;
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
// discovery.js（原 hooks/useBluetoothDiscovery.js）为保留的纯 JS 资产，
|
||||
// 不做类型化；此处只声明 useBle 需要的最小工厂签名。
|
||||
export interface DiscoveryOptions {
|
||||
onSearchingChange?: (searching: boolean) => void
|
||||
onConnectedChange?: (connected: boolean) => void
|
||||
onDeviceListChange?: (deviceList: Array<{ deviceId: string; name?: string; RSSI?: number }>) => void
|
||||
onProfileChange?: (profileId: string) => void
|
||||
onStageChange?: (stage: string) => void
|
||||
onDeviceInfoChange?: (deviceInfo: Record<string, unknown>) => void
|
||||
onAuthChange?: (authResult: unknown) => void
|
||||
onError?: (error: unknown) => void
|
||||
onRadarData?: (data: unknown) => void
|
||||
}
|
||||
|
||||
export interface DiscoveryInstance {
|
||||
startSearch: () => Promise<void>
|
||||
stopSearch: () => Promise<void>
|
||||
connectDevice: (deviceId: string) => Promise<void>
|
||||
prepareWifiConfig: (deviceId: string, options?: Record<string, unknown>) => Promise<void>
|
||||
disconnectDevice: () => Promise<void>
|
||||
configureWifi: (ssid: string, password: string, options?: Record<string, unknown>) => Promise<void>
|
||||
startRadar: () => Promise<void>
|
||||
stopRadar: () => Promise<void>
|
||||
cleanupDiscovery: () => void
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
export declare function createBluetoothDiscovery(options?: DiscoveryOptions): DiscoveryInstance
|
||||
|
|
@ -7,8 +7,9 @@ import {
|
|||
TARGET_SERVICE_UUID_COMPAT_FULL,
|
||||
TARGET_SHORT_UUID_CANDIDATES
|
||||
} from '@/constants/bluetooth'
|
||||
import {DEVICE_PROFILE, createUnifiedBleController, shortUuid, uuidInList} from '@/utils/ble'
|
||||
import {DEVICE_PROFILE, createUnifiedBleController, shortUuid, uuidInList} from '@/ble'
|
||||
import {showToast} from '@/utils/toast'
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
const FILTER_SCAN_TIMEOUT_MS = 4000
|
||||
const RESTART_SCAN_DELAY_MS = 120
|
||||
|
|
@ -294,7 +295,7 @@ export function createBluetoothDiscovery(options = {}) {
|
|||
let systemInfo = {}
|
||||
|
||||
try {
|
||||
systemInfo = uni.getSystemInfoSync() || {}
|
||||
systemInfo = Taro.getSystemInfoSync() || {}
|
||||
} catch (error) {
|
||||
return true
|
||||
}
|
||||
|
|
@ -306,7 +307,7 @@ export function createBluetoothDiscovery(options = {}) {
|
|||
|
||||
try {
|
||||
const settings = await new Promise((resolve, reject) => {
|
||||
uni.getSetting({
|
||||
Taro.getSetting({
|
||||
success: resolve,
|
||||
fail: reject
|
||||
})
|
||||
|
|
@ -318,7 +319,7 @@ export function createBluetoothDiscovery(options = {}) {
|
|||
}
|
||||
|
||||
await new Promise((resolve, reject) => {
|
||||
uni.authorize({
|
||||
Taro.authorize({
|
||||
scope: 'scope.userLocation',
|
||||
success: resolve,
|
||||
fail: reject
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import { useEffect, useRef, useState } from 'react'
|
||||
import { createBluetoothDiscovery } from '../discovery'
|
||||
|
||||
// 工厂回调 → React state 的映射产物
|
||||
export interface BleUiState {
|
||||
searching: boolean
|
||||
connected: boolean
|
||||
deviceList: Array<{ deviceId: string; name?: string; RSSI?: number }>
|
||||
profileId: string
|
||||
stage: string
|
||||
deviceInfo: Record<string, unknown> | null
|
||||
authResult: unknown
|
||||
}
|
||||
|
||||
export function useBle() {
|
||||
const [state, setState] = useState<BleUiState>({
|
||||
searching: false,
|
||||
connected: false,
|
||||
deviceList: [],
|
||||
profileId: 'UNKNOWN',
|
||||
stage: 'IDLE',
|
||||
deviceInfo: null,
|
||||
authResult: null
|
||||
})
|
||||
|
||||
// discovery 实例在整个组件生命周期内只创建一次；
|
||||
// 回调里读最新 state 用 setState 函数式更新，不闭包旧值
|
||||
const discoveryRef = useRef<ReturnType<typeof createBluetoothDiscovery> | null>(null)
|
||||
if (discoveryRef.current === null) {
|
||||
discoveryRef.current = createBluetoothDiscovery({
|
||||
onSearchingChange: (searching) => setState((s) => ({ ...s, searching })),
|
||||
onConnectedChange: (connected) => setState((s) => ({ ...s, connected })),
|
||||
onDeviceListChange: (deviceList) => setState((s) => ({ ...s, deviceList })),
|
||||
onProfileChange: (profileId) => setState((s) => ({ ...s, profileId })),
|
||||
onStageChange: (stage) => setState((s) => ({ ...s, stage })),
|
||||
onDeviceInfoChange: (deviceInfo) => setState((s) => ({ ...s, deviceInfo })),
|
||||
onAuthChange: (authResult) => setState((s) => ({ ...s, authResult }))
|
||||
// onError / onRadarData / onProtocolState / onProtocolMsg 按页面需要接入
|
||||
})
|
||||
}
|
||||
|
||||
// 卸载时统一清理（停扫描、断连接、解绑事件）
|
||||
useEffect(() => {
|
||||
const discovery = discoveryRef.current
|
||||
return () => {
|
||||
discovery?.cleanupDiscovery()
|
||||
discoveryRef.current = null
|
||||
}
|
||||
}, [])
|
||||
|
||||
const discovery = discoveryRef.current!
|
||||
|
||||
return { state, discovery }
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 80px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 28px;
|
||||
color: #9ea1a6;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { View, Text } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface Props {
|
||||
text: string
|
||||
mode?: 'list' | 'wifi' | 'error' | 'message'
|
||||
}
|
||||
|
||||
export function Empty({ text, mode = 'list' }: Props) {
|
||||
const icon = mode === 'wifi' ? '📡' : mode === 'error' ? '⚠️' : mode === 'message' ? '🔔' : '📋'
|
||||
return (
|
||||
<View className={styles.empty}>
|
||||
<Text className={styles.icon}>{icon}</Text>
|
||||
<Text className={styles.text}>{text}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
border: 4px solid #eef0f4;
|
||||
border-top-color: #2ccb98;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 20px;
|
||||
font-size: 28px;
|
||||
color: #9ea1a6;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { View, Text } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface Props {
|
||||
text?: string
|
||||
size?: number
|
||||
}
|
||||
|
||||
export function Loading({ text = '加载中...', size = 48 }: Props) {
|
||||
return (
|
||||
<View className={styles.loading}>
|
||||
<View
|
||||
className={styles.spinner}
|
||||
style={{ width: `${size}px`, height: `${size}px` }}
|
||||
/>
|
||||
{text && <Text className={styles.text}>{text}</Text>}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 88px;
|
||||
padding: 0 32px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
.backIcon {
|
||||
font-size: 48px;
|
||||
color: #2a2d33;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #2a2d33;
|
||||
margin-right: 44px; // 平衡 back 按钮宽度
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import { View, Text } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { useMemo } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
fixed?: boolean
|
||||
autoBack?: boolean // 默认 true（修复 uni-app up-navbar 坑）
|
||||
border?: boolean // 默认 false
|
||||
safeAreaTop?: boolean // 默认 true
|
||||
onBack?: () => void
|
||||
}
|
||||
|
||||
export function Navbar({
|
||||
title,
|
||||
fixed = false,
|
||||
autoBack = true,
|
||||
border = false,
|
||||
safeAreaTop = true,
|
||||
onBack
|
||||
}: Props) {
|
||||
// getSystemInfoSync 已废弃，改用 getWindowInfo
|
||||
const statusBarHeight = useMemo(() => Taro.getWindowInfo().statusBarHeight ?? 20, [])
|
||||
|
||||
const handleBack = () => {
|
||||
if (onBack) onBack()
|
||||
else Taro.navigateBack()
|
||||
}
|
||||
|
||||
return (
|
||||
<View
|
||||
className={styles.navbar}
|
||||
style={{
|
||||
paddingTop: safeAreaTop ? `${statusBarHeight}px` : 0,
|
||||
position: fixed ? 'fixed' : 'relative',
|
||||
borderBottom: border ? '1px solid #f0f1f3' : 'none'
|
||||
}}
|
||||
>
|
||||
{autoBack && (
|
||||
<View className={styles.back} onClick={handleBack}>
|
||||
<Text className={styles.backIcon}>‹</Text>
|
||||
</View>
|
||||
)}
|
||||
<Text className={styles.title}>{title}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
.mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: fixed;
|
||||
background: #ffffff;
|
||||
z-index: 101;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.pos-top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-bottom-left-radius: 24px;
|
||||
border-bottom-right-radius: 24px;
|
||||
}
|
||||
|
||||
.pos-center {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 24px;
|
||||
min-width: 80vw;
|
||||
}
|
||||
|
||||
.pos-bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top-left-radius: 24px;
|
||||
border-top-right-radius: 24px;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40px;
|
||||
color: #9ea1a6;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import { View, Text } from '@tarojs/components'
|
||||
import type { ReactNode } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface Props {
|
||||
visible: boolean
|
||||
position?: 'top' | 'center' | 'bottom'
|
||||
onClose: () => void
|
||||
children?: ReactNode
|
||||
maxHeight?: string // e.g. '60vh'
|
||||
}
|
||||
|
||||
export function Popup({
|
||||
visible,
|
||||
position = 'bottom',
|
||||
onClose,
|
||||
children,
|
||||
maxHeight = '60vh'
|
||||
}: Props) {
|
||||
if (!visible) return null
|
||||
|
||||
const positionClass = styles[`pos-${position}`]
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.mask} onClick={onClose} />
|
||||
<View
|
||||
className={`${styles.panel} ${positionClass}`}
|
||||
style={{ maxHeight }}
|
||||
>
|
||||
{children}
|
||||
<View className={styles.close} onClick={onClose}>
|
||||
<Text>×</Text>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
.tabs {
|
||||
display: flex;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #f0f1f3;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
padding: 28px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 30px;
|
||||
color: #9ea1a6;
|
||||
}
|
||||
|
||||
.active .label {
|
||||
color: #2a2d33;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.active .label::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 56px;
|
||||
height: 4px;
|
||||
background: #2ccb98;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { View, Text } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export interface TabItem {
|
||||
key: string
|
||||
label: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
items: TabItem[]
|
||||
activeKey: string
|
||||
onChange: (key: string) => void
|
||||
}
|
||||
|
||||
export function Tabs({ items, activeKey, onChange }: Props) {
|
||||
return (
|
||||
<View className={styles.tabs}>
|
||||
{items.map((item) => (
|
||||
<View
|
||||
key={item.key}
|
||||
className={`${styles.tab} ${item.key === activeKey ? styles.active : ''}`}
|
||||
onClick={() => onChange(item.key)}
|
||||
>
|
||||
<Text className={styles.label}>{item.label}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { Canvas, View, Text } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
const V_PADDING = 8
|
||||
const HEIGHT = 110
|
||||
|
||||
interface Props {
|
||||
points: number[]
|
||||
canvasId?: string
|
||||
}
|
||||
|
||||
export function VitalWave({ points, canvasId = 'vitalWave' }: Props) {
|
||||
const [width, setWidth] = useState(200)
|
||||
|
||||
const empty = !points || points.length < 2
|
||||
|
||||
// 测量容器宽度
|
||||
useEffect(() => {
|
||||
const query = Taro.createSelectorQuery()
|
||||
query.select(`#${canvasId}-wrap`).boundingClientRect((rect: any) => {
|
||||
if (rect && rect.width > 0) {
|
||||
setWidth(Math.floor(rect.width))
|
||||
}
|
||||
}).exec()
|
||||
}, [canvasId])
|
||||
|
||||
// 数据变化重绘
|
||||
useEffect(() => {
|
||||
if (empty || width <= 0) return
|
||||
drawWave(canvasId, width, HEIGHT, points)
|
||||
}, [points, width, empty, canvasId])
|
||||
|
||||
return (
|
||||
<View id={`${canvasId}-wrap`} style={{ position: 'relative', width: '100%', height: `${HEIGHT * 2}rpx` }}>
|
||||
<Canvas
|
||||
canvasId={canvasId}
|
||||
style={{ width: `${width}px`, height: `${HEIGHT}px` }}
|
||||
/>
|
||||
{!empty && (
|
||||
<>
|
||||
<View style={{
|
||||
position: 'absolute', top: '33.3%', left: 0, right: 0,
|
||||
borderTop: '1px dashed rgba(245, 34, 45, 0.25)'
|
||||
}} />
|
||||
<View style={{
|
||||
position: 'absolute', top: '66.6%', left: 0, right: 0,
|
||||
borderTop: '1px dashed rgba(245, 34, 45, 0.25)'
|
||||
}} />
|
||||
</>
|
||||
)}
|
||||
{empty && (
|
||||
<View style={{
|
||||
position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center'
|
||||
}}>
|
||||
<Text style={{ fontSize: '24rpx', color: '#b5b9c0' }}>暂无数据</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function drawWave(canvasId: string, w: number, h: number, pts: number[]) {
|
||||
const ctx = Taro.createCanvasContext(canvasId)
|
||||
const min = Math.min(...pts)
|
||||
const max = Math.max(...pts)
|
||||
const span = max - min || 1
|
||||
const xAt = (i: number) => (pts.length <= 1 ? 0 : (i / (pts.length - 1)) * w)
|
||||
const yAt = (v: number) => h - V_PADDING - ((v - min) / span) * (h - V_PADDING * 2)
|
||||
|
||||
const pathTo = (closeBottom: boolean) => {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(xAt(0), yAt(pts[0]))
|
||||
for (let i = 0; i < pts.length - 1; i++) {
|
||||
const x0 = xAt(Math.max(0, i - 1))
|
||||
const y0 = yAt(pts[Math.max(0, i - 1)])
|
||||
const x1 = xAt(i)
|
||||
const y1 = yAt(pts[i])
|
||||
const x2 = xAt(i + 1)
|
||||
const y2 = yAt(pts[i + 1])
|
||||
const x3 = xAt(Math.min(pts.length - 1, i + 2))
|
||||
const y3 = yAt(pts[Math.min(pts.length - 1, i + 2)])
|
||||
const c1x = x1 + (x2 - x0) / 6
|
||||
const c1y = y1 + (y2 - y0) / 6
|
||||
const c2x = x2 - (x3 - x1) / 6
|
||||
const c2y = y2 - (y3 - y1) / 6
|
||||
ctx.bezierCurveTo(c1x, c1y, c2x, c2y, x2, y2)
|
||||
}
|
||||
if (closeBottom) {
|
||||
ctx.lineTo(w, h)
|
||||
ctx.lineTo(0, h)
|
||||
ctx.closePath()
|
||||
}
|
||||
}
|
||||
|
||||
pathTo(true)
|
||||
const grad = ctx.createLinearGradient(0, 0, 0, h)
|
||||
grad.addColorStop(0, 'rgba(245, 34, 45, 0.25)')
|
||||
grad.addColorStop(1, 'rgba(245, 34, 45, 0)')
|
||||
ctx.setFillStyle(grad)
|
||||
ctx.fill()
|
||||
|
||||
pathTo(false)
|
||||
ctx.setStrokeStyle('#f5222d')
|
||||
ctx.setLineWidth(2)
|
||||
ctx.stroke()
|
||||
|
||||
ctx.draw()
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
// 设备型号
|
||||
export const DEVICE_MODEL = {
|
||||
ED713: 'ED713',
|
||||
ED719: 'ED719'
|
||||
} as const
|
||||
|
||||
export type DeviceModel = (typeof DEVICE_MODEL)[keyof typeof DEVICE_MODEL]
|
||||
|
||||
// 设备型号 → 图标映射
|
||||
export const DEVICE_ICON_MAP: Record<DeviceModel, string> = {
|
||||
ED713: 'home',
|
||||
ED719: 'bell'
|
||||
}
|
||||
|
||||
// 体征枚举映射（与 web 端 zh-CN 一致）
|
||||
export const MOVE_STATE_MAP: Record<number, string> = {
|
||||
0: '无人',
|
||||
1: '轻微活动',
|
||||
2: '频繁活动',
|
||||
3: '静卧'
|
||||
}
|
||||
|
||||
export const BODY_STATUS_MAP: Record<number, string> = {
|
||||
0: '无人',
|
||||
1: '运动',
|
||||
2: '呼吸',
|
||||
3: '进入呼吸'
|
||||
}
|
||||
|
||||
export const ONBED_STATUS_MAP: Record<number, string> = {
|
||||
0: '不在床',
|
||||
1: '在床'
|
||||
}
|
||||
|
|
@ -1,6 +1,3 @@
|
|||
/**
|
||||
* 统一维护页面路由，避免页面内散落硬编码字符串。
|
||||
*/
|
||||
export const ROUTES = Object.freeze({
|
||||
LOGIN: '/pages/login/index',
|
||||
HOME: '/pages/index/index',
|
||||
|
|
@ -11,8 +8,3 @@ export const ROUTES = Object.freeze({
|
|||
DEVICE_DETAIL: '/pages/device/detail',
|
||||
SCENE_SELECT: '/pages/scene/select'
|
||||
})
|
||||
|
||||
/**
|
||||
* TabBar 页面集合，供登录跳转与路由守卫判断使用。
|
||||
*/
|
||||
export const TAB_ROUTES = Object.freeze([ROUTES.HOME, ROUTES.EVENT, ROUTES.MINE])
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { Component, ErrorInfo, ReactNode } from 'react'
|
||||
import { View } from '@tarojs/components'
|
||||
|
||||
interface Props { children: ReactNode; fallback?: ReactNode }
|
||||
interface State { hasError: boolean }
|
||||
|
||||
export class ErrorBoundary extends Component<Props, State> {
|
||||
state: State = { hasError: false }
|
||||
|
||||
static getDerivedStateFromError(): State {
|
||||
return { hasError: true }
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, info: ErrorInfo) {
|
||||
console.error('[ErrorBoundary]', error, info)
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return this.props.fallback ?? <View>页面出错了</View>
|
||||
}
|
||||
return this.props.children
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import Taro from '@tarojs/taro'
|
||||
|
||||
export function useToast() {
|
||||
return {
|
||||
show: (title: string, icon: 'success' | 'error' | 'loading' | 'none' = 'none') =>
|
||||
Taro.showToast({ title, icon, duration: 2000 }),
|
||||
success: (title: string) => Taro.showToast({ title, icon: 'success', duration: 2000 }),
|
||||
error: (title: string) => Taro.showToast({ title, icon: 'error', duration: 2000 })
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import Taro from '@tarojs/taro'
|
||||
import { store } from '@/store'
|
||||
import { ApiError, BusinessError } from './errors'
|
||||
|
||||
const BASE_URL = '' // 后端就绪后填入
|
||||
|
||||
export interface RequestConfig {
|
||||
method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
|
||||
headers?: Record<string, string>
|
||||
timeout?: number
|
||||
needAuth?: boolean // 默认 true；登录接口自身传 false
|
||||
}
|
||||
|
||||
export interface ApiEnvelope<T> {
|
||||
code: number
|
||||
data: T
|
||||
message?: string
|
||||
}
|
||||
|
||||
export async function request<T>(
|
||||
url: string,
|
||||
params?: Record<string, unknown>,
|
||||
config: RequestConfig = {}
|
||||
): Promise<T> {
|
||||
const method = config.method ?? 'GET'
|
||||
const timeout = config.timeout ?? 10000
|
||||
|
||||
// token 注入（spec §3B）：从 authSlice 读取
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
...config.headers
|
||||
}
|
||||
if (config.needAuth !== false) {
|
||||
const token = store.getState().auth.token
|
||||
if (token) headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
|
||||
let res: Taro.request.SuccessCallbackResult<ApiEnvelope<T>>
|
||||
try {
|
||||
res = await Taro.request({
|
||||
url: BASE_URL + url,
|
||||
method,
|
||||
// Taro.request 的 GET 参数同样走 data，运行时自动序列化为 query string
|
||||
data: params,
|
||||
dataType: 'json',
|
||||
timeout,
|
||||
header: headers
|
||||
})
|
||||
} catch (e) {
|
||||
throw new ApiError(e instanceof Error ? e.message : '网络异常')
|
||||
}
|
||||
|
||||
if (res.statusCode !== 200) {
|
||||
throw new ApiError(`HTTP ${res.statusCode}`, res.statusCode)
|
||||
}
|
||||
|
||||
const body = res.data as ApiEnvelope<T>
|
||||
if (body.code !== 0) {
|
||||
throw new BusinessError(body.message ?? '业务错误', body.code)
|
||||
}
|
||||
return body.data
|
||||
}
|
||||
|
||||
request.get = <T>(url: string, params?: Record<string, unknown>, config?: RequestConfig) =>
|
||||
request<T>(url, params, { ...config, method: 'GET' })
|
||||
|
||||
request.post = <T>(url: string, params?: Record<string, unknown>, config?: RequestConfig) =>
|
||||
request<T>(url, params, { ...config, method: 'POST' })
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
// 网络/HTTP 错误
|
||||
export class ApiError extends Error {
|
||||
constructor(message: string, public readonly statusCode?: number) {
|
||||
super(message)
|
||||
this.name = 'ApiError'
|
||||
}
|
||||
}
|
||||
|
||||
// 业务错误（code !== 0）
|
||||
export class BusinessError extends Error {
|
||||
constructor(message: string, public readonly code: number) {
|
||||
super(message)
|
||||
this.name = 'BusinessError'
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { request } from './client'
|
||||
export { ApiError, BusinessError } from './errors'
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
.page { min-height: 100vh; background: #f1f1f4; }
|
||||
|
||||
.body { padding: 32px; }
|
||||
|
||||
.tip {
|
||||
font-size: 28px;
|
||||
color: #9ea1a6;
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scanBtn {
|
||||
height: 96px;
|
||||
background: linear-gradient(135deg, #1fca97 0%, #2dbf9c 100%);
|
||||
border-radius: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.scanBtnText {
|
||||
color: #ffffff;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty { padding: 80px 0; }
|
||||
|
||||
.list { display: flex; flex-direction: column; }
|
||||
|
||||
.item {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 30px;
|
||||
color: #2a2d33;
|
||||
font-weight: 600;
|
||||
max-width: 70%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rssi {
|
||||
font-size: 24px;
|
||||
color: #9ea1a6;
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
import { useState } from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import { Loading } from '@/components/loading'
|
||||
import { useBle } from '@/ble/hooks/useBle'
|
||||
import { useToast } from '@/hooks/useToast'
|
||||
import { navigateTo } from '@/utils/navigation'
|
||||
import { ROUTES } from '@/constants/routes'
|
||||
import styles from './add.module.scss'
|
||||
|
||||
export default function DeviceAdd() {
|
||||
const toast = useToast()
|
||||
const { state, discovery } = useBle()
|
||||
const [connectingId, setConnectingId] = useState('')
|
||||
|
||||
const startScan = async () => {
|
||||
try {
|
||||
// startSearch 内部自动完成：Android 定位权限检查 + 适配器初始化 +
|
||||
// 服务 UUID 过滤扫描（00F4/F400/FFF4）+ 30s 自动停止
|
||||
await discovery.startSearch()
|
||||
} catch {
|
||||
toast.error('蓝牙搜索启动失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 选中设备 → 连接（prepareWifiConfig：连接 → 发现服务特征 → 订阅 F301，厂家确认无需鉴权）
|
||||
const handleSelect = async (deviceId: string) => {
|
||||
setConnectingId(deviceId)
|
||||
try {
|
||||
await discovery.prepareWifiConfig(deviceId)
|
||||
navigateTo(ROUTES.DEVICE_CONFIG)
|
||||
} catch {
|
||||
toast.error('连接失败，请重试')
|
||||
} finally {
|
||||
setConnectingId('')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.page}>
|
||||
<Navbar title="添加设备" />
|
||||
<View className={styles.body}>
|
||||
<Text className={styles.tip}>请确保设备处于配网模式，靠近手机</Text>
|
||||
|
||||
{!state.searching ? (
|
||||
<View className={styles.scanBtn} onClick={startScan}>
|
||||
<Text className={styles.scanBtnText}>开始扫描</Text>
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
<View className={styles.scanBtn} onClick={() => discovery.stopSearch()}>
|
||||
<Text className={styles.scanBtnText}>停止扫描</Text>
|
||||
</View>
|
||||
{state.deviceList.length === 0 ? (
|
||||
<View className={styles.empty}><Loading text="搜索中..." /></View>
|
||||
) : (
|
||||
<View className={styles.list}>
|
||||
{state.deviceList.map((d) => (
|
||||
<View
|
||||
key={d.deviceId}
|
||||
className={styles.item}
|
||||
onClick={() => handleSelect(d.deviceId)}
|
||||
>
|
||||
<Text className={styles.name}>{d.name || d.deviceId}</Text>
|
||||
<Text className={styles.rssi}>
|
||||
{connectingId === d.deviceId ? '连接中...' : `RSSI ${d.RSSI ?? '-'}`}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
.page { min-height: 100vh; background: #f1f1f4; }
|
||||
|
||||
.body { padding: 32px; }
|
||||
|
||||
.label {
|
||||
font-size: 28px;
|
||||
color: #2a2d33;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 96px;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 0 32px;
|
||||
font-size: 30px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 24px;
|
||||
color: #9ea1a6;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: 48px;
|
||||
height: 96px;
|
||||
background: linear-gradient(135deg, #1fca97 0%, #2dbf9c 100%);
|
||||
border-radius: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.submitDisabled { opacity: 0.5; }
|
||||
|
||||
.submitText {
|
||||
color: #ffffff;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import { useState } from 'react'
|
||||
import { View, Text, Input } from '@tarojs/components'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import { useToast } from '@/hooks/useToast'
|
||||
import { useBle } from '@/ble/hooks/useBle'
|
||||
import { navigateBack } from '@/utils/navigation'
|
||||
import styles from './config.module.scss'
|
||||
|
||||
export default function DeviceConfig() {
|
||||
const toast = useToast()
|
||||
const { state, discovery } = useBle()
|
||||
const [ssid, setSsid] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!state.connected) {
|
||||
toast.error('设备未连接，请返回上一步重新连接')
|
||||
return
|
||||
}
|
||||
if (!ssid || !password) {
|
||||
toast.error('请填写 WiFi 信息')
|
||||
return
|
||||
}
|
||||
setSubmitting(true)
|
||||
try {
|
||||
// 内部走 A7 分包写入 UUID_WIFI 特征；profile.wifi 校验 SSID/密码长度与非法字符
|
||||
await discovery.configureWifi(ssid, password)
|
||||
toast.success('配网指令已发送')
|
||||
navigateBack()
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : '配置失败'
|
||||
toast.error(msg)
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.page}>
|
||||
<Navbar title="设备配置" />
|
||||
<View className={styles.body}>
|
||||
<Text className={styles.label}>WiFi 名称</Text>
|
||||
<Input
|
||||
className={styles.input}
|
||||
placeholder="请输入 WiFi 名称"
|
||||
value={ssid}
|
||||
onInput={(e) => setSsid(e.detail.value)}
|
||||
/>
|
||||
<Text className={styles.label}>WiFi 密码</Text>
|
||||
<Input
|
||||
className={styles.input}
|
||||
placeholder="请输入 WiFi 密码（8-63 位）"
|
||||
password
|
||||
value={password}
|
||||
onInput={(e) => setPassword(e.detail.value)}
|
||||
/>
|
||||
<Text className={styles.hint}>
|
||||
当前连接：{state.connected ? '已连接' : '未连接'}
|
||||
{state.deviceInfo && state.profileId !== 'UNKNOWN' ? `（${state.profileId}）` : ''}
|
||||
</Text>
|
||||
<View
|
||||
className={`${styles.submit} ${submitting ? styles.submitDisabled : ''}`}
|
||||
onClick={submitting ? undefined : handleSubmit}
|
||||
>
|
||||
<Text className={styles.submitText}>
|
||||
{submitting ? '配置中...' : '开始配网'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
.stateWrap {
|
||||
margin-top: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.retryBtn {
|
||||
margin-top: 40px;
|
||||
width: 240px;
|
||||
height: 80px;
|
||||
background: #2ccb98;
|
||||
border-radius: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.heartCard {
|
||||
margin: 24px;
|
||||
padding: 32px;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.heartLeft {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.heartIcon { font-size: 72px; color: #f5222d; line-height: 1; }
|
||||
|
||||
.heartValue {
|
||||
margin-top: 16px;
|
||||
font-size: 96px;
|
||||
font-weight: 700;
|
||||
color: #2a2d33;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.heartUnit { margin-top: 8px; font-size: 30px; color: #9ea1a6; }
|
||||
|
||||
.badge {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 24px;
|
||||
border-radius: 999px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.badgeOn { background: #f6ffed; color: #52c41a; }
|
||||
.badgeOff { background: #f5f5f5; color: #999999; }
|
||||
|
||||
.badgeDot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.badgeDotOn { background: #52c41a; }
|
||||
.badgeDotOff { background: #999999; }
|
||||
|
||||
.heartRight { flex: 1; min-width: 0; margin-left: 32px; }
|
||||
|
||||
.heartHealthLabel {
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
color: #2a2d33;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.metricGrid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.metricCard {
|
||||
width: 48.5%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20px;
|
||||
padding: 24px;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.metricLabel { font-size: 26px; color: #9ea1a6; }
|
||||
|
||||
.metricRow {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.metricValue { font-size: 44px; font-weight: 700; }
|
||||
|
||||
.metricUnit {
|
||||
margin-left: 8px;
|
||||
font-size: 24px;
|
||||
color: #b5b9c0;
|
||||
}
|
||||
|
||||
.infoCard {
|
||||
margin: 4px 24px 24px;
|
||||
padding: 8px 32px;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.infoRow {
|
||||
min-height: 104px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f0f1f3;
|
||||
}
|
||||
|
||||
.infoRow:last-child { border-bottom: none; }
|
||||
|
||||
.infoLabel { font-size: 28px; color: #9ea1a6; }
|
||||
.infoValue { font-size: 28px; color: #2a2d33; }
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
import { useState, useEffect, useRef, useMemo } from 'react'
|
||||
import Taro, { useRouter, useDidShow, useDidHide } from '@tarojs/taro'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import { Loading } from '@/components/loading'
|
||||
import { Empty } from '@/components/empty'
|
||||
import { VitalWave } from '@/components/vital-wave'
|
||||
import { getVitalSigns, getHeartRateHistory, type VitalSigns } from '@/api/device'
|
||||
import { MOVE_STATE_MAP, BODY_STATUS_MAP, ONBED_STATUS_MAP, type DeviceModel } from '@/constants/enums'
|
||||
import styles from './detail.module.scss'
|
||||
|
||||
const REFRESH_INTERVAL = 3000
|
||||
|
||||
const METRIC_COLORS = {
|
||||
breath: '#1677ff',
|
||||
motion: '#fa8c16',
|
||||
moveState: '#52c41a',
|
||||
bedState: '#f5222d',
|
||||
bodyState: '#1677ff',
|
||||
bodyPosition: '#52c41a'
|
||||
}
|
||||
|
||||
export default function Detail() {
|
||||
const router = useRouter()
|
||||
const params = router.params as { id?: string; name?: string; model?: DeviceModel; online?: string }
|
||||
|
||||
const deviceId = params.id ?? ''
|
||||
const deviceName = params.name ? decodeURIComponent(params.name) : '设备详情'
|
||||
const deviceModel = params.model ?? ''
|
||||
const online = params.online === '1'
|
||||
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [loadError, setLoadError] = useState(false)
|
||||
const [vitals, setVitals] = useState<VitalSigns>({} as VitalSigns)
|
||||
const [wavePoints, setWavePoints] = useState<number[]>([])
|
||||
|
||||
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
||||
|
||||
const valueOf = (v: unknown): string | number =>
|
||||
v === undefined || v === null || v === '' ? '-' : (v as string | number)
|
||||
|
||||
const metrics = useMemo(() => {
|
||||
const v = vitals as unknown as Record<string, unknown>
|
||||
return [
|
||||
{ label: '呼吸率', value: valueOf(v.respiratoryRate), unit: '/min', color: METRIC_COLORS.breath },
|
||||
{ label: '体动', value: valueOf(v.bodyMovement), unit: '', color: METRIC_COLORS.motion },
|
||||
{ label: '运动状态', value: MOVE_STATE_MAP[v.moveState as number] ?? valueOf(v.moveState), unit: '', color: METRIC_COLORS.moveState },
|
||||
{ label: '在床状态', value: ONBED_STATUS_MAP[v.onbedStatus as number] ?? valueOf(v.onbedStatus), unit: '', color: METRIC_COLORS.bedState },
|
||||
{ label: '人体状态', value: BODY_STATUS_MAP[v.bodyStatus as number] ?? valueOf(v.bodyStatus), unit: '', color: METRIC_COLORS.bodyState },
|
||||
{ label: '人体位置', value: valueOf(v.bodyPosition), unit: '分米', color: METRIC_COLORS.bodyPosition }
|
||||
]
|
||||
}, [vitals])
|
||||
|
||||
const fetchVitals = async () => {
|
||||
const [v, history] = await Promise.all([
|
||||
getVitalSigns(deviceId),
|
||||
getHeartRateHistory(deviceId)
|
||||
])
|
||||
setVitals(v)
|
||||
setWavePoints(Array.isArray(history) ? history : [])
|
||||
}
|
||||
|
||||
const loadVitals = async () => {
|
||||
setLoading(true)
|
||||
setLoadError(false)
|
||||
try {
|
||||
await fetchVitals()
|
||||
} catch {
|
||||
setLoadError(true)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 轮询生命周期与 uni-app 版对齐（I1 修复）：
|
||||
// 首次挂载拉数据；useDidShow 启动轮询 / useDidHide 停止轮询——
|
||||
// 页面被压栈后台（navigateTo 其它页）时轮询不空跑，回到前台恢复
|
||||
useEffect(() => {
|
||||
loadVitals()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [deviceId])
|
||||
|
||||
useDidShow(() => {
|
||||
if (timerRef.current) clearInterval(timerRef.current)
|
||||
timerRef.current = setInterval(() => {
|
||||
fetchVitals().catch(() => {})
|
||||
}, REFRESH_INTERVAL)
|
||||
})
|
||||
|
||||
useDidHide(() => {
|
||||
if (timerRef.current) {
|
||||
clearInterval(timerRef.current)
|
||||
timerRef.current = null
|
||||
}
|
||||
})
|
||||
|
||||
// 组件卸载兜底清理
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (timerRef.current) clearInterval(timerRef.current)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View className={styles.page}>
|
||||
<Navbar title={deviceName} />
|
||||
|
||||
{loading ? (
|
||||
<View className={styles.stateWrap}><Loading /></View>
|
||||
) : loadError ? (
|
||||
<View className={styles.stateWrap}>
|
||||
<Empty text="加载失败，请检查网络" mode="wifi" />
|
||||
<View className={styles.retryBtn} onClick={loadVitals}><Text>重试</Text></View>
|
||||
</View>
|
||||
) : (
|
||||
<>
|
||||
<View className={styles.heartCard}>
|
||||
<View className={styles.heartLeft}>
|
||||
<Text className={styles.heartIcon}>❤</Text>
|
||||
<Text className={styles.heartValue}>{valueOf(vitals.heartRate)}</Text>
|
||||
<Text className={styles.heartUnit}>BPM</Text>
|
||||
<View className={`${styles.badge} ${online ? styles.badgeOn : styles.badgeOff}`}>
|
||||
<View className={`${styles.badgeDot} ${online ? styles.badgeDotOn : styles.badgeDotOff}`} />
|
||||
<Text>{online ? '正常' : '离线'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.heartRight}>
|
||||
<Text className={styles.heartHealthLabel}>心率健康</Text>
|
||||
<VitalWave points={wavePoints} canvasId="heartWave" />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className={styles.metricGrid}>
|
||||
{metrics.map((m) => (
|
||||
<View key={m.label} className={styles.metricCard}>
|
||||
<Text className={styles.metricLabel}>{m.label}</Text>
|
||||
<View className={styles.metricRow}>
|
||||
<Text className={styles.metricValue} style={{ color: m.color }}>{m.value}</Text>
|
||||
{!!m.unit && <Text className={styles.metricUnit}>{m.unit}</Text>}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View className={styles.infoCard}>
|
||||
<View className={styles.infoRow}>
|
||||
<Text className={styles.infoLabel}>设备型号</Text>
|
||||
<Text className={styles.infoValue}>{deviceModel || '-'}</Text>
|
||||
</View>
|
||||
<View className={styles.infoRow}>
|
||||
<Text className={styles.infoLabel}>设备 ID</Text>
|
||||
<Text className={styles.infoValue}>{deviceId || '-'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
.drop-panel-calendar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 66vh;
|
||||
max-height: 100%;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
|
||||
z-index: 11;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom-left-radius: 24px;
|
||||
border-bottom-right-radius: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f0f1f3;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
color: #2a2d33;
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 40px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.quick-row {
|
||||
display: flex;
|
||||
padding: 20px 24px 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.quick-chip {
|
||||
flex: 1;
|
||||
margin-right: 16px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f6f8;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 999px;
|
||||
font-size: 24px;
|
||||
color: #606266;
|
||||
|
||||
&:last-child { margin-right: 0; }
|
||||
}
|
||||
|
||||
.quick-chip-active {
|
||||
background: #e9fff3;
|
||||
border-color: #2ccb98;
|
||||
color: #12a37a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.weekdays {
|
||||
display: flex;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #f0f1f3;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.weekday {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #909399;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.scroll-wrap {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.scroll { height: 100%; }
|
||||
|
||||
.month { padding: 8px 16px 0; }
|
||||
|
||||
.month-title {
|
||||
height: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #2a2d33;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cell {
|
||||
width: calc(100% / 7);
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
aspect-ratio: 1 / 1.15;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cell-disabled { opacity: 0.3; }
|
||||
|
||||
.day {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.day-start,
|
||||
.day-end { background: #2ccb98; }
|
||||
|
||||
.day-start .day-num,
|
||||
.day-end .day-num {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.day-in {
|
||||
background: #e9fff3;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.day-in .day-num { color: #12a37a; }
|
||||
|
||||
.day-num {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #2a2d33;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.day-tag {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #f0f1f3;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
height: 80px;
|
||||
background: #2ccb98;
|
||||
border-radius: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.confirm-disabled { opacity: 0.5; }
|
||||
|
||||
.confirm-text {
|
||||
color: #ffffff;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
import { useState, useMemo, useEffect, useRef, useCallback } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import styles from './calendar-drawer.module.scss'
|
||||
|
||||
// 日历可回溯年数（约束最早月份，不影响性能）
|
||||
const CALENDAR_YEARS_BACK = 10
|
||||
const WEEKDAY_LABELS = ['一', '二', '三', '四', '五', '六', '日']
|
||||
// 懒渲染窗口参数（rpx）：可视高度近似 + 前后缓冲
|
||||
const VIEW_RPX = 1400
|
||||
const BUFFER_RPX = 3000
|
||||
|
||||
const pad2 = (n: number) => String(n).padStart(2, '0')
|
||||
const fmtDate = (d: Date) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`
|
||||
const parseDate = (s: string) => {
|
||||
const [y, m, d] = s.split('-').map(Number)
|
||||
return new Date(y, m - 1, d)
|
||||
}
|
||||
const quickRange = (days: number) => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - (days - 1))
|
||||
return { label: `近${days}天`, start: fmtDate(start), end: fmtDate(end) }
|
||||
}
|
||||
|
||||
interface MonthMeta {
|
||||
key: string
|
||||
year: number
|
||||
month: number
|
||||
title: string
|
||||
top: number
|
||||
height: number
|
||||
}
|
||||
|
||||
interface Cell {
|
||||
day: number
|
||||
date?: string
|
||||
disabled?: boolean
|
||||
dayCls?: string
|
||||
tag?: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
initialStart: string
|
||||
initialEnd: string
|
||||
onClose: () => void
|
||||
onConfirm: (start: string, end: string) => void
|
||||
}
|
||||
|
||||
function monthWeeks(y: number, m: number) {
|
||||
const firstDay = new Date(y, m, 1)
|
||||
const lead = (firstDay.getDay() + 6) % 7
|
||||
const daysInMonth = new Date(y, m + 1, 0).getDate()
|
||||
return Math.ceil((lead + daysInMonth) / 7)
|
||||
}
|
||||
|
||||
export function CalendarDrawer({ initialStart, initialEnd, onClose, onConfirm }: Props) {
|
||||
const [windowWidth, setWindowWidth] = useState(375)
|
||||
const [calScroll, setCalScroll] = useState(0)
|
||||
const [calAnchorId, setCalAnchorId] = useState('')
|
||||
const [pendingStart, setPendingStart] = useState(initialStart)
|
||||
const [pendingEnd, setPendingEnd] = useState(initialEnd)
|
||||
const [activeQuick, setActiveQuick] = useState('')
|
||||
const anchorTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
const quickRanges = useMemo(() => [quickRange(7), quickRange(30), quickRange(90)], [])
|
||||
|
||||
const minLimit = useMemo(() => {
|
||||
const d = new Date()
|
||||
d.setFullYear(d.getFullYear() - CALENDAR_YEARS_BACK)
|
||||
d.setDate(1)
|
||||
return fmtDate(d)
|
||||
}, [])
|
||||
const maxLimit = useMemo(() => fmtDate(new Date()), [])
|
||||
|
||||
// 全部月份元数据：每月份含估算高度（标题行 + 周数×行高）
|
||||
const monthMetas = useMemo<MonthMeta[]>(() => {
|
||||
const metas: MonthMeta[] = []
|
||||
const start = parseDate(minLimit)
|
||||
const now = new Date()
|
||||
let y = start.getFullYear()
|
||||
let m = start.getMonth()
|
||||
let top = 0
|
||||
while (y < now.getFullYear() || (y === now.getFullYear() && m <= now.getMonth())) {
|
||||
const weeks = monthWeeks(y, m)
|
||||
const height = 96 + weeks * Math.round((750 / 7) * 1.15) + 16
|
||||
metas.push({ key: `m-${y}-${m}`, year: y, month: m, title: `${y}年${pad2(m + 1)}月`, top, height })
|
||||
top += height
|
||||
if (m === 11) { y += 1; m = 0 } else { m += 1 }
|
||||
}
|
||||
return metas
|
||||
}, [minLimit])
|
||||
|
||||
// px→rpx 换算基准 + 打开时定位
|
||||
useEffect(() => {
|
||||
setWindowWidth(Taro.getWindowInfo().windowWidth || 375)
|
||||
const focus = initialStart || fmtDate(new Date())
|
||||
const d = parseDate(focus)
|
||||
const meta = monthMetas.find((mm) => mm.year === d.getFullYear() && mm.month === d.getMonth())
|
||||
setCalAnchorId('')
|
||||
// scroll-into-view 需要值变化才生效：先清空再在下个循环赋值
|
||||
const timer = setTimeout(() => setCalAnchorId(meta ? meta.key : ''), 0)
|
||||
return () => clearTimeout(timer)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
// 单格数据：区间内/端点/禁用态一次算好
|
||||
const buildCell = useCallback((dateStr: string, day: number): Cell => {
|
||||
const disabled = dateStr < minLimit || dateStr > maxLimit
|
||||
let dayCls = ''
|
||||
let tag = ''
|
||||
if (!disabled) {
|
||||
if (pendingStart && dateStr === pendingStart) {
|
||||
dayCls = 'start'
|
||||
tag = pendingStart === pendingEnd ? '起/止' : '开始'
|
||||
} else if (pendingEnd && dateStr === pendingEnd) {
|
||||
dayCls = 'end'
|
||||
tag = '结束'
|
||||
} else if (pendingStart && pendingEnd && dateStr > pendingStart && dateStr < pendingEnd) {
|
||||
dayCls = 'in'
|
||||
}
|
||||
}
|
||||
return { day, date: dateStr, disabled, dayCls, tag }
|
||||
}, [minLimit, maxLimit, pendingStart, pendingEnd])
|
||||
|
||||
const buildMonthCells = useCallback((y: number, m: number): Cell[] => {
|
||||
const firstDay = new Date(y, m, 1)
|
||||
const lead = (firstDay.getDay() + 6) % 7
|
||||
const daysInMonth = new Date(y, m + 1, 0).getDate()
|
||||
const cells: Cell[] = []
|
||||
for (let i = 0; i < lead; i++) cells.push({ day: 0 })
|
||||
for (let d = 1; d <= daysInMonth; d++) {
|
||||
cells.push(buildCell(`${y}-${pad2(m + 1)}-${pad2(d)}`, d))
|
||||
}
|
||||
return cells
|
||||
}, [buildCell])
|
||||
|
||||
// 懒渲染：仅渲染滚动窗口（±BUFFER_RPX）内月份，窗口外等高占位
|
||||
const renderedMonths = useMemo(() => {
|
||||
const lo = calScroll - BUFFER_RPX
|
||||
const hi = calScroll + VIEW_RPX + BUFFER_RPX
|
||||
return monthMetas.map((meta) => {
|
||||
const inWindow = meta.top + meta.height > lo && meta.top < hi
|
||||
if (!inWindow) return { ...meta, placeholder: true as const, cells: [] as Cell[] }
|
||||
return { ...meta, placeholder: false as const, cells: buildMonthCells(meta.year, meta.month) }
|
||||
})
|
||||
}, [monthMetas, calScroll, buildMonthCells])
|
||||
|
||||
// 滚动：px → rpx（750/窗口宽），跨过 200rpx 再更新，减少重算
|
||||
const onCalScroll = (e: { detail: { scrollTop: number } }) => {
|
||||
const px = e.detail.scrollTop || 0
|
||||
const rpx = px * (750 / windowWidth)
|
||||
setCalScroll((prev) => (Math.abs(rpx - prev) > 200 ? rpx : prev))
|
||||
}
|
||||
|
||||
// CSS Modules 动态 key 映射对象（避免索引签名问题）
|
||||
const dayClsMap: Record<string, string> = {
|
||||
start: styles.dayStart,
|
||||
end: styles.dayEnd,
|
||||
in: styles.dayIn
|
||||
}
|
||||
|
||||
// 第一击定起点，第二击定终点（早于起点则重定起点），选满再点重选
|
||||
const pickDate = (cell: Cell) => {
|
||||
if (!cell.day || cell.disabled || !cell.date) return
|
||||
const date = cell.date
|
||||
setActiveQuick('')
|
||||
if (!pendingStart || (pendingStart && pendingEnd)) {
|
||||
setPendingStart(date)
|
||||
setPendingEnd('')
|
||||
} else if (date < pendingStart) {
|
||||
setPendingStart(date)
|
||||
} else {
|
||||
setPendingEnd(date)
|
||||
}
|
||||
}
|
||||
|
||||
// 快捷范围：填满起止并定位起点月
|
||||
const applyQuick = (q: { label: string; start: string; end: string }) => {
|
||||
setPendingStart(q.start)
|
||||
setPendingEnd(q.end)
|
||||
setActiveQuick(q.label)
|
||||
const d = parseDate(q.start)
|
||||
const meta = monthMetas.find((mm) => mm.year === d.getFullYear() && mm.month === d.getMonth())
|
||||
setCalAnchorId('')
|
||||
if (anchorTimer.current) clearTimeout(anchorTimer.current)
|
||||
anchorTimer.current = setTimeout(() => setCalAnchorId(meta ? meta.key : ''), 0)
|
||||
}
|
||||
|
||||
useEffect(() => () => {
|
||||
if (anchorTimer.current) clearTimeout(anchorTimer.current)
|
||||
}, [])
|
||||
|
||||
const rangeReady = !!pendingStart && !!pendingEnd
|
||||
|
||||
return (
|
||||
<View className={styles.dropPanelCalendar}>
|
||||
<View className={styles.header}>
|
||||
<Text className={styles.title}>选择时间范围</Text>
|
||||
<View className={styles.close} onClick={onClose}>
|
||||
<Text className={styles.closeIcon}>×</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className={styles.quickRow}>
|
||||
{quickRanges.map((q) => (
|
||||
<View
|
||||
key={q.label}
|
||||
className={`${styles.quickChip} ${activeQuick === q.label ? styles.quickChipActive : ''}`}
|
||||
onClick={() => applyQuick(q)}
|
||||
>
|
||||
<Text>{q.label}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View className={styles.weekdays}>
|
||||
{WEEKDAY_LABELS.map((w) => (
|
||||
<Text key={w} className={styles.weekday}>{w}</Text>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View className={styles.scrollWrap}>
|
||||
<ScrollView
|
||||
className={styles.scroll}
|
||||
scrollY
|
||||
scrollIntoView={calAnchorId}
|
||||
scrollAnchoring
|
||||
onScroll={onCalScroll}
|
||||
>
|
||||
{renderedMonths.map((m) => (
|
||||
<View
|
||||
key={m.key}
|
||||
id={m.key}
|
||||
className={styles.month}
|
||||
style={m.placeholder ? { height: `${m.height}rpx` } : undefined}
|
||||
>
|
||||
{!m.placeholder && (
|
||||
<>
|
||||
<View className={styles.monthTitle}>
|
||||
<Text>{m.title}</Text>
|
||||
</View>
|
||||
<View className={styles.grid}>
|
||||
{m.cells.map((cell, i) => (
|
||||
<View
|
||||
key={i}
|
||||
className={`${styles.cell} ${cell.disabled ? styles.cellDisabled : ''}`}
|
||||
onClick={() => pickDate(cell)}
|
||||
>
|
||||
{!!cell.day && (
|
||||
<View className={`${styles.day} ${cell.dayCls ? dayClsMap[cell.dayCls] : ''}`}>
|
||||
<Text className={styles.dayNum}>{cell.day}</Text>
|
||||
{!!cell.tag && <Text className={styles.dayTag}>{cell.tag}</Text>}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
<View className={styles.footer}>
|
||||
<View
|
||||
className={`${styles.confirmBtn} ${!rangeReady ? styles.confirmDisabled : ''}`}
|
||||
onClick={() => rangeReady && onConfirm(pendingStart, pendingEnd)}
|
||||
>
|
||||
<Text className={styles.confirmText}>{rangeReady ? '确定' : '请选择起止日期'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
/* 页面容器：纵向 flex，让数据层撑满筛选栏以下全部剩余视口 */
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.filters {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
min-height: 96px;
|
||||
padding: 16px 24px;
|
||||
background: #ffffff;
|
||||
border-top: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.filter-cell {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
& + & { margin-left: 18px; }
|
||||
}
|
||||
|
||||
.filter-trigger {
|
||||
height: 100%;
|
||||
min-height: 64px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #f5f6f8;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 12px;
|
||||
color: #606266;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.filter-trigger-active {
|
||||
background: #e9fff3;
|
||||
border-color: #2ccb98;
|
||||
color: #12a37a;
|
||||
}
|
||||
|
||||
.filter-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-arrow {
|
||||
font-size: 20px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.empty-area {
|
||||
min-height: 720px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 120px;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
margin-top: -40px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: #b5b9c0;
|
||||
}
|
||||
|
||||
/* 数据层：三抽屉的定位锚点 */
|
||||
.content-area {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.content-mask {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.drop-panel-options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
|
||||
z-index: 11;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom-left-radius: 24px;
|
||||
border-bottom-right-radius: 24px;
|
||||
overflow: hidden;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
padding: 28px 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f0f1f3;
|
||||
}
|
||||
|
||||
.drawer-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #2a2d33;
|
||||
}
|
||||
|
||||
.drawer-close {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 40px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.drawer-list {
|
||||
padding: 12px 24px 24px;
|
||||
}
|
||||
|
||||
.drawer-item {
|
||||
min-height: 96px;
|
||||
padding: 0 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 14px;
|
||||
|
||||
&:active { background: #f7f8fa; }
|
||||
}
|
||||
|
||||
.drawer-item-active { background: #e9fff3; }
|
||||
|
||||
.drawer-item-text {
|
||||
font-size: 30px;
|
||||
color: #2a2d33;
|
||||
}
|
||||
|
||||
.drawer-item-active .drawer-item-text {
|
||||
color: #2ccb98;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
font-size: 32px;
|
||||
color: #2ccb98;
|
||||
}
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
import { useState, useCallback, useEffect } from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import { Empty } from '@/components/empty'
|
||||
import { getSceneList } from '@/api/scene'
|
||||
import { getEventList, type EventItem } from '@/api/event'
|
||||
import { CalendarDrawer } from './calendar-drawer'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface FilterOption {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
|
||||
export default function Event() {
|
||||
// '' | 'scene' | 'status' | 'time'
|
||||
const [drawer, setDrawer] = useState<'' | 'scene' | 'status' | 'time'>('')
|
||||
// 事件列表：后端接口定型前 mock 返回空数组 → 空态
|
||||
const [eventList, setEventList] = useState<EventItem[]>([])
|
||||
const [filters, setFilters] = useState({
|
||||
sceneId: 0, // 0 表示全部
|
||||
status: 0,
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
timeText: ''
|
||||
})
|
||||
const [sceneOptions, setSceneOptions] = useState<FilterOption[]>([{ id: 0, name: '全部' }])
|
||||
const statusOptions: FilterOption[] = [
|
||||
{ id: 0, name: '全部' },
|
||||
{ id: 1, name: '未处理' },
|
||||
{ id: 2, name: '已处理' },
|
||||
{ id: 3, name: '已忽略' }
|
||||
]
|
||||
|
||||
// 场所列表：复用场景接口；失败时保留"全部"不阻塞筛选
|
||||
useEffect(() => {
|
||||
getSceneList()
|
||||
.then((data) => {
|
||||
setSceneOptions([{ id: 0, name: '全部' }, ...(data ?? [])])
|
||||
})
|
||||
.catch(() => setSceneOptions([{ id: 0, name: '全部' }]))
|
||||
}, [])
|
||||
|
||||
const closeDrawer = useCallback(() => setDrawer(''), [])
|
||||
|
||||
const sceneLabel = sceneOptions.find((o) => o.id === filters.sceneId)?.name ?? '全部场所'
|
||||
const statusLabel = statusOptions.find((o) => o.id === filters.status)?.name ?? '全部状态'
|
||||
|
||||
// 筛选变化：拉取事件列表（当前 mock 空，保持空态展示）
|
||||
const handleFilter = useCallback(async (next: typeof filters) => {
|
||||
try {
|
||||
const list = await getEventList({
|
||||
sceneId: next.sceneId,
|
||||
status: next.status,
|
||||
startDate: next.startDate,
|
||||
endDate: next.endDate
|
||||
})
|
||||
setEventList(list)
|
||||
} catch {
|
||||
// 失败保持现有列表，toast 由请求封装统一处理
|
||||
}
|
||||
}, [])
|
||||
|
||||
const selectScene = (id: number) => {
|
||||
const next = { ...filters, sceneId: id }
|
||||
setFilters(next)
|
||||
closeDrawer()
|
||||
handleFilter(next)
|
||||
}
|
||||
|
||||
const selectStatus = (id: number) => {
|
||||
const next = { ...filters, status: id }
|
||||
setFilters(next)
|
||||
closeDrawer()
|
||||
handleFilter(next)
|
||||
}
|
||||
|
||||
const onTimeConfirm = (start: string, end: string) => {
|
||||
const next = { ...filters, startDate: start, endDate: end, timeText: `${start} 至 ${end}` }
|
||||
setFilters(next)
|
||||
closeDrawer()
|
||||
handleFilter(next)
|
||||
}
|
||||
|
||||
const renderOptionDrawer = (kind: 'scene' | 'status') => {
|
||||
const opts = kind === 'scene' ? sceneOptions : statusOptions
|
||||
const currentId = kind === 'scene' ? filters.sceneId : filters.status
|
||||
const title = kind === 'scene' ? '选择场所' : '选择状态'
|
||||
const onSelect = kind === 'scene' ? selectScene : selectStatus
|
||||
return (
|
||||
<View className={styles.dropPanelOptions}>
|
||||
<View className={styles.drawerHeader}>
|
||||
<Text className={styles.drawerTitle}>{title}</Text>
|
||||
<View className={styles.drawerClose} onClick={closeDrawer}>
|
||||
<Text className={styles.closeIcon}>×</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.drawerList}>
|
||||
{opts.map((opt) => (
|
||||
<View
|
||||
key={opt.id}
|
||||
className={`${styles.drawerItem} ${currentId === opt.id ? styles.drawerItemActive : ''}`}
|
||||
onClick={() => onSelect(opt.id)}
|
||||
>
|
||||
<Text className={styles.drawerItemText}>{opt.name}</Text>
|
||||
{currentId === opt.id && <Text className={styles.checkIcon}>✓</Text>}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.page}>
|
||||
<Navbar title="事件" autoBack={false} />
|
||||
|
||||
{/* 筛选栏：三格等分 */}
|
||||
<View className={styles.filters}>
|
||||
<View className={styles.filterCell} onClick={() => setDrawer(drawer === 'scene' ? '' : 'scene')}>
|
||||
<View className={`${styles.filterTrigger} ${filters.sceneId !== 0 ? styles.filterTriggerActive : ''}`}>
|
||||
<Text className={styles.filterText}>{sceneLabel}</Text>
|
||||
<Text className={styles.filterArrow}>▾</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.filterCell} onClick={() => setDrawer(drawer === 'status' ? '' : 'status')}>
|
||||
<View className={`${styles.filterTrigger} ${filters.status !== 0 ? styles.filterTriggerActive : ''}`}>
|
||||
<Text className={styles.filterText}>{statusLabel}</Text>
|
||||
<Text className={styles.filterArrow}>▾</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.filterCell} onClick={() => setDrawer(drawer === 'time' ? '' : 'time')}>
|
||||
<View className={`${styles.filterTrigger} ${filters.startDate ? styles.filterTriggerActive : ''}`}>
|
||||
<Text className={styles.filterText}>{filters.timeText || '时间'}</Text>
|
||||
<Text className={styles.filterArrow}>▾</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 数据层：抽屉锚点（筛选栏下缘展开，遮罩盖住本层全部） */}
|
||||
<View className={styles.contentArea}>
|
||||
<View className={styles.contentBody}>
|
||||
{eventList.length === 0 ? (
|
||||
<>
|
||||
<View className={styles.emptyArea}>
|
||||
<Empty text="暂无事件数据" mode="message" />
|
||||
</View>
|
||||
<View className={styles.emptyHint}>
|
||||
<Text>调整筛选条件后的事件列表将在此展示</Text>
|
||||
</View>
|
||||
</>
|
||||
) : (
|
||||
<View className={styles.eventList}>
|
||||
{/* 事件卡片列表：布局等后端接口定型后补（Task 5.1.c 说明） */}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{drawer !== '' && <View className={styles.contentMask} onClick={closeDrawer} catchMove />}
|
||||
|
||||
{drawer === 'scene' && renderOptionDrawer('scene')}
|
||||
{drawer === 'status' && renderOptionDrawer('status')}
|
||||
{drawer === 'time' && (
|
||||
<CalendarDrawer
|
||||
initialStart={filters.startDate}
|
||||
initialEnd={filters.endDate}
|
||||
onClose={closeDrawer}
|
||||
onConfirm={onTimeConfirm}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
.page { position: relative; }
|
||||
|
||||
.banner {
|
||||
min-height: 180px;
|
||||
background: linear-gradient(135deg, #1fca97 0%, #2dbf9c 100%);
|
||||
padding: 48px 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bannerLeft { display: flex; flex-direction: column; }
|
||||
|
||||
.bannerTitle {
|
||||
font-size: 52px;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.bannerSub {
|
||||
font-size: 34px;
|
||||
color: #e9fff8;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.siteRow {
|
||||
height: 108px;
|
||||
padding: 0 32px;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.siteText {
|
||||
font-size: 34px;
|
||||
color: #222;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.siteArrow {
|
||||
font-size: 36px;
|
||||
color: #26c996;
|
||||
}
|
||||
|
||||
.stateWrap {
|
||||
margin-top: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.retryBtn {
|
||||
margin-top: 40px;
|
||||
width: 240px;
|
||||
height: 80px;
|
||||
background: #2ccb98;
|
||||
border-radius: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 48.5%;
|
||||
margin-bottom: 24px;
|
||||
padding: 36px 20px 28px;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #1fca97 0%, #2dbf9c 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.iconOffline { background: #eef0f4; }
|
||||
|
||||
.iconText {
|
||||
font-size: 36px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.iconOffline .iconText { color: #b5b9c0; }
|
||||
|
||||
.name {
|
||||
max-width: 100%;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #2a2d33;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.statusRow {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dotOn { background: #2ccb98; }
|
||||
.dotOff { background: #c0c4cc; }
|
||||
|
||||
.statusText { font-size: 24px; color: #12a37a; }
|
||||
.statusTextOff { color: #9ea1a6; }
|
||||
|
||||
.fab {
|
||||
position: fixed;
|
||||
right: 40px;
|
||||
bottom: 60px;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #1fca97 0%, #2dbf9c 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8px 24px rgba(31, 202, 151, 0.4);
|
||||
}
|
||||
|
||||
.fabIcon { font-size: 48px; color: #ffffff; font-weight: 300; }
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue