wezone
/
ring-control-ui
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat 新增用户设备和设备数据页面 

feat 改造原版的字典数据结构
This commit is contained in:
Eee 2024-05-28 20:29:42 +08:00
parent d5b2d1e3b4
commit 39818930d0
13 changed files with 474 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/business/deviceData/ring/index.ts Normal file
View File

@ -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
});
};

29
src/api/business/deviceData/ring/types.ts Normal file
View File

@ -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[];
}

17
src/api/business/userDevice/index.ts Normal file
View File

@ -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
});
};

61
src/api/business/userDevice/types.ts Normal file
View File

@ -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;
}

2
src/api/system/dict/data/types.ts
View File

@ -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;
}

1
src/components/DictTag/index.vue
View File

@ -25,6 +25,7 @@
: 'primary'
"
:class="item.elTagClass"
:effect="item.effect ? item.effect : 'light'"
>
{{ item.label + ' ' }}
</el-tag>

1
src/types/element.d.ts vendored
View File

@ -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;

1
src/types/global.d.ts vendored
View File

@ -63,6 +63,7 @@ declare global {
value: string;
elTagType?: ElTagType;
elTagClass?: string;
effect?: string;
}
declare interface BaseEntity {

2
src/utils/dict.ts
View File

@ -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]);
});

173
src/views/business/deviceData/ring/index.vue Normal file
View File

@ -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>

150
src/views/business/userDevice/index.vue Normal file
View File

@ -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>

30
src/views/system/dict/data.vue
View File

@ -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: ''
};

2
tsconfig.json
View File

@ -22,7 +22,7 @@
"compilerOptions": {
"types": ["element-plus/global"]
},
"types": ["vite/client"],
"types": ["vite/client", "element-plus/global"],
"skipLibCheck": true,
"removeComments": true,
// 允许默认导入