parent
d5b2d1e3b4
commit
39818930d0
|
@ -0,0 +1,17 @@
|
|||
import request from '@/utils/request';
|
||||
import { AxiosPromise } from 'axios';
|
||||
import { RingVO, RingQuery } from '@/api/business/deviceData/ring/types';
|
||||
|
||||
/**
|
||||
* 查询设备数据采集(指环)列表
|
||||
* @param query
|
||||
* @returns {*}
|
||||
*/
|
||||
|
||||
export const listRing = (query?: RingQuery): AxiosPromise<RingVO[]> => {
|
||||
return request({
|
||||
url: '/business/deviceData/page',
|
||||
method: 'post',
|
||||
data: query
|
||||
});
|
||||
};
|
|
@ -0,0 +1,29 @@
|
|||
export interface RingVO {
|
||||
email: string;
|
||||
deviceId: string;
|
||||
deviceMode: string;
|
||||
activationTime: string;
|
||||
heartRate: number;
|
||||
bodyTemp: number;
|
||||
bloodOxygen: number;
|
||||
collectTime: string;
|
||||
}
|
||||
|
||||
export interface RingForm extends BaseEntity {}
|
||||
|
||||
export interface RingQuery extends PageQuery {
|
||||
/**
|
||||
* 设备类型
|
||||
*/
|
||||
deviceType: string;
|
||||
|
||||
/**
|
||||
* 用户邮箱
|
||||
*/
|
||||
email?: string;
|
||||
|
||||
/**
|
||||
* 激活时间
|
||||
*/
|
||||
collectTimeRange?: string[];
|
||||
}
|
|
@ -0,0 +1,17 @@
|
|||
import request from '@/utils/request';
|
||||
import { AxiosPromise } from 'axios';
|
||||
import { UserDeviceVO, UserDeviceQuery } from '@/api/business/userDevice/types';
|
||||
|
||||
/**
|
||||
* 查询用户设备列表
|
||||
* @param query
|
||||
* @returns {*}
|
||||
*/
|
||||
|
||||
export const listUserDevice = (query?: UserDeviceQuery): AxiosPromise<UserDeviceVO[]> => {
|
||||
return request({
|
||||
url: '/business/userDevice/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
|
@ -0,0 +1,61 @@
|
|||
export interface UserDeviceVO {
|
||||
/**
|
||||
* 用户邮箱
|
||||
*/
|
||||
email: string;
|
||||
|
||||
/**
|
||||
* 用户设备id
|
||||
*/
|
||||
deviceId: string;
|
||||
|
||||
/**
|
||||
* 设备类型
|
||||
*/
|
||||
deviceType: string;
|
||||
|
||||
/**
|
||||
* 设备名称
|
||||
*/
|
||||
deviceName: string;
|
||||
|
||||
/**
|
||||
* 设备当前模式
|
||||
*/
|
||||
deviceMode: string;
|
||||
|
||||
/**
|
||||
* 设备状态
|
||||
*/
|
||||
deviceStatus: string;
|
||||
|
||||
/**
|
||||
* 激活时间
|
||||
*/
|
||||
activationTime: string;
|
||||
|
||||
}
|
||||
|
||||
export interface UserDeviceForm extends BaseEntity {
|
||||
}
|
||||
|
||||
export interface UserDeviceQuery extends PageQuery {
|
||||
|
||||
/**
|
||||
* 用户邮箱
|
||||
*/
|
||||
email?: string;
|
||||
|
||||
/**
|
||||
* 设备状态
|
||||
*/
|
||||
deviceStatus?: string;
|
||||
|
||||
/**
|
||||
* 激活时间
|
||||
*/
|
||||
activationTime?: string;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -10,6 +10,7 @@ export interface DictDataVO extends BaseEntity {
|
|||
dictValue: string;
|
||||
cssClass: string;
|
||||
listClass: ElTagType;
|
||||
effect: ElTagEffect;
|
||||
dictSort: number;
|
||||
remark: string;
|
||||
}
|
||||
|
@ -21,6 +22,7 @@ export interface DictDataForm {
|
|||
dictValue: string;
|
||||
cssClass: string;
|
||||
listClass: ElTagType;
|
||||
effect: ElTagEffect;
|
||||
dictSort: number;
|
||||
remark: string;
|
||||
}
|
||||
|
|
|
@ -25,6 +25,7 @@
|
|||
: 'primary'
|
||||
"
|
||||
:class="item.elTagClass"
|
||||
:effect="item.effect ? item.effect : 'light'"
|
||||
>
|
||||
{{ item.label + ' ' }}
|
||||
</el-tag>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import type * as ep from 'element-plus';
|
||||
declare global {
|
||||
declare type ElTagType = 'primary' | 'success' | 'info' | 'warning' | 'danger';
|
||||
declare type ElTagEffect = 'light' | 'dark' | 'plain';
|
||||
declare type ElFormInstance = ep.FormInstance;
|
||||
declare type ElTableInstance = ep.TableInstance;
|
||||
declare type ElUploadInstance = ep.UploadInstance;
|
||||
|
|
|
@ -63,6 +63,7 @@ declare global {
|
|||
value: string;
|
||||
elTagType?: ElTagType;
|
||||
elTagClass?: string;
|
||||
effect?: string;
|
||||
}
|
||||
|
||||
declare interface BaseEntity {
|
||||
|
|
|
@ -16,7 +16,7 @@ export const useDict = (...args: string[]): { [key: string]: DictDataOption[] }
|
|||
} else {
|
||||
await getDicts(dictType).then((resp) => {
|
||||
res.value[dictType] = resp.data.map(
|
||||
(p): DictDataOption => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass })
|
||||
(p): DictDataOption => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass, effect: p.effect})
|
||||
);
|
||||
useDictStore().setDict(dictType, res.value[dictType]);
|
||||
});
|
||||
|
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div v-show="showSearch" class="search">
|
||||
<el-form ref="queryFormRef" :model="deviceId" :inline="true" label-width="100px">
|
||||
<el-form-item label="设备ID" prop="deviceId">
|
||||
<el-input v-model="queryParams.deviceId" placeholder="请输入设备ID" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户邮箱" prop="email">
|
||||
<el-input v-model="queryParams.email" placeholder="请输入用户邮箱" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="采集时间范围" prop="collectTimeRange">
|
||||
<el-date-picker
|
||||
v-model="queryParams.collectTimeRange"
|
||||
type="datetimerange"
|
||||
start-placeholder="起始时间"
|
||||
end-placeholder="截止时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-table v-loading="loading" :data="ringList">
|
||||
<el-table-column v-if="false" label="主键" align="center" prop="id" />
|
||||
<el-table-column label="用户邮箱" align="center" prop="email" />
|
||||
<el-table-column label="用户设备id" align="center" prop="deviceId" />
|
||||
<el-table-column label="设备当前模式" align="center" prop="deviceMode" >
|
||||
<template #default="scope">
|
||||
<dict-tag :options="biz_device_mode" :value="scope.row.deviceMode" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="心率" align="center" prop="heartRate">
|
||||
<template #default="scope">
|
||||
<p class="ring-data-block bc-heartRate" v-text="`${scope.row.heartRate} BPM`"></p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="体温" align="center" prop="bodyTemp" >
|
||||
<template #default="scope">
|
||||
<p class="ring-data-block bc-bodyTemp" v-text="`${scope.row.bodyTemp} °C`"></p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="血氧" align="center" prop="bloodOxygen">
|
||||
<template #default="scope">
|
||||
<p class="ring-data-block bc-bloodOxygen" v-text="`${scope.row.bloodOxygen * 100} %`"></p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="电池电量" align="center" prop="batteryLevel">
|
||||
<template #default="scope">
|
||||
<p class="ring-data-block bc-batteryLevel" v-text="`${scope.row.batteryLevel} %`"></p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="采集时间" align="center" prop="collectTime" />
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Ring" lang="ts">
|
||||
import { listRing } from '@/api/business/deviceData/ring';
|
||||
import { RingVO, RingQuery, RingForm } from '@/api/business/deviceData/ring/types';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { biz_device_mode } = toRefs<any>(proxy?.useDict('biz_device_mode'));
|
||||
|
||||
const ringList = ref<RingVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const ringFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: RingForm = {};
|
||||
const data = reactive<PageData<RingForm, RingQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
deviceId: undefined,
|
||||
deviceType: 'Ring',
|
||||
email: undefined,
|
||||
collectTimeRange: []
|
||||
},
|
||||
rules: {}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询设备数据采集(指环)列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listRing(queryParams.value);
|
||||
ringList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
ringFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
const route = useRoute();
|
||||
onMounted(() => {
|
||||
const deviceId = route.query.deviceId;
|
||||
if (deviceId) {
|
||||
queryParams.value.deviceId = deviceId;
|
||||
}
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ring-data-block {
|
||||
text-align: center;
|
||||
margin: 0px auto;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
padding: 6px;
|
||||
border-radius: 20px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.bc-heartRate {
|
||||
background-color: rgba(255, 60, 60, 0.8);
|
||||
}
|
||||
.bc-bodyTemp {
|
||||
background-color: rgba(251, 160, 0, 0.8);
|
||||
}
|
||||
.bc-bloodOxygen {
|
||||
background-color: rgba(45, 180, 255, 0.8);
|
||||
}
|
||||
.bc-batteryLevel {
|
||||
background-color: rgb(85, 206, 41);
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,150 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div class="search" v-show="showSearch">
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
||||
<el-form-item label="激活时间" prop="activationTime">
|
||||
<el-date-picker clearable
|
||||
v-model="queryParams.activationTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择激活时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-table v-loading="loading" :data="userDeviceList">
|
||||
<el-table-column label="用户邮箱" align="center" prop="email" />
|
||||
<el-table-column label="设备ID" align="center" prop="deviceId" />
|
||||
<el-table-column label="设备名称" align="center" prop="deviceName" />
|
||||
<el-table-column label="设备类型" align="center" prop="deviceType" >
|
||||
<template #default="scope">
|
||||
<dict-tag :options="biz_device_type" :value="scope.row.deviceType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备当前模式" align="center" prop="deviceMode" >
|
||||
<template #default="scope">
|
||||
<dict-tag :options="biz_device_mode" :value="scope.row.deviceMode" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备状态" align="center" prop="deviceStatus" >
|
||||
<template #default="scope">
|
||||
<dict-tag :options="biz_device_status" :value="scope.row.deviceStatus" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="激活时间" align="center" prop="activationTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.activationTime, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button v-if="scope.row.deviceId" link type="primary" @click="jumpToDeviceData(scope.row.deviceId)">
|
||||
<span v-text="'查看数据'"></span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="UserDevice" lang="ts">
|
||||
import { listUserDevice, getUserDevice, delUserDevice, addUserDevice, updateUserDevice } from '@/api/business/userDevice';
|
||||
import { UserDeviceVO, UserDeviceQuery, UserDeviceForm } from '@/api/business/userDevice/types';
|
||||
import router from "@/router";
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { biz_device_type, biz_device_status, biz_device_mode } = toRefs<any>(proxy?.useDict('biz_device_type', 'biz_device_status', 'biz_device_mode'));
|
||||
|
||||
const userDeviceList = ref<UserDeviceVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const userDeviceFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: UserDeviceForm = {
|
||||
}
|
||||
const data = reactive<PageData<UserDeviceForm, UserDeviceQuery>>({
|
||||
form: {...initFormData},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
email: undefined,
|
||||
deviceStatus: undefined,
|
||||
activationTime: undefined
|
||||
},
|
||||
rules: {
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询用户设备列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listUserDevice(queryParams.value);
|
||||
userDeviceList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
}
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = {...initFormData};
|
||||
userDeviceFormRef.value?.resetFields();
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
/** 跳转至设备数据 */
|
||||
const jumpToDeviceData = (deviceId: any) => {
|
||||
router.push({ path: '/deviceData/ring', query: { deviceId } });
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
|
@ -49,16 +49,8 @@
|
|||
<el-table-column v-if="false" label="字典编码" align="center" prop="dictCode" />
|
||||
<el-table-column label="字典标签" align="center" prop="dictLabel">
|
||||
<template #default="scope">
|
||||
<span
|
||||
v-if="(scope.row.listClass === '' || scope.row.listClass === 'default') && (scope.row.cssClass === '' || scope.row.cssClass == null)"
|
||||
>{{ scope.row.dictLabel }}</span
|
||||
>
|
||||
<el-tag
|
||||
v-else
|
||||
:type="scope.row.listClass === 'primary' || scope.row.listClass === 'default' ? 'primary' : scope.row.listClass"
|
||||
:class="scope.row.cssClass"
|
||||
>{{ scope.row.dictLabel }}</el-tag
|
||||
>
|
||||
<span v-if="scope.row.listClass === '' || scope.row.listClass === 'default'">{{ scope.row.dictLabel }}</span>
|
||||
<el-tag v-else :type="scope.row.listClass === 'primary' ? '' : scope.row.listClass" :effect="scope.row.effect">{{ scope.row.dictLabel }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字典键值" align="center" prop="dictValue" />
|
||||
|
@ -111,6 +103,16 @@
|
|||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="主题" prop="effect">
|
||||
<el-select v-model="form.effect">
|
||||
<el-option
|
||||
v-for="item in effectOptions"
|
||||
:key="item.value"
|
||||
:label="item.label + '(' + item.value + ')'"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
|
@ -164,12 +166,20 @@ const listClassOptions = ref<Array<{ value: string; label: string }>>([
|
|||
{ value: 'danger', label: '危险' }
|
||||
]);
|
||||
|
||||
// 数据标签主题
|
||||
const effectOptions = ref<Array<{ value: string, label: string }>>([
|
||||
{ value: "light", label: "亮色" },
|
||||
{ value: "dark", label: "暗色" },
|
||||
{ value: "plain", label: "扁平" },
|
||||
]);
|
||||
|
||||
const initFormData: DictDataForm = {
|
||||
dictCode: undefined,
|
||||
dictLabel: '',
|
||||
dictValue: '',
|
||||
cssClass: '',
|
||||
listClass: 'primary',
|
||||
effect: 'light',
|
||||
dictSort: 0,
|
||||
remark: ''
|
||||
};
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
"compilerOptions": {
|
||||
"types": ["element-plus/global"]
|
||||
},
|
||||
"types": ["vite/client"],
|
||||
"types": ["vite/client", "element-plus/global"],
|
||||
"skipLibCheck": true,
|
||||
"removeComments": true,
|
||||
// 允许默认导入
|
||||
|
|
Loading…
Reference in New Issue