diff --git a/src/api/business/deviceData/ring/index.ts b/src/api/business/deviceData/ring/index.ts
new file mode 100644
index 0000000..39087ee
--- /dev/null
+++ b/src/api/business/deviceData/ring/index.ts
@@ -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
+  });
+};
diff --git a/src/api/business/deviceData/ring/types.ts b/src/api/business/deviceData/ring/types.ts
new file mode 100644
index 0000000..ea31858
--- /dev/null
+++ b/src/api/business/deviceData/ring/types.ts
@@ -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[];
+}
diff --git a/src/api/business/userDevice/index.ts b/src/api/business/userDevice/index.ts
new file mode 100644
index 0000000..fd92ce9
--- /dev/null
+++ b/src/api/business/userDevice/index.ts
@@ -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
+  });
+};
diff --git a/src/api/business/userDevice/types.ts b/src/api/business/userDevice/types.ts
new file mode 100644
index 0000000..a1bfe46
--- /dev/null
+++ b/src/api/business/userDevice/types.ts
@@ -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;
+}
+
+
+
diff --git a/src/api/system/dict/data/types.ts b/src/api/system/dict/data/types.ts
index e4abb9b..8706508 100644
--- a/src/api/system/dict/data/types.ts
+++ b/src/api/system/dict/data/types.ts
@@ -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;
 }
diff --git a/src/components/DictTag/index.vue b/src/components/DictTag/index.vue
index ad326c2..ade2026 100644
--- a/src/components/DictTag/index.vue
+++ b/src/components/DictTag/index.vue
@@ -25,6 +25,7 @@
               : 'primary'
           "
           :class="item.elTagClass"
+          :effect="item.effect ? item.effect : 'light'"
         >
           {{ item.label + ' ' }}
         </el-tag>
diff --git a/src/types/element.d.ts b/src/types/element.d.ts
index ae6ecfc..084a123 100644
--- a/src/types/element.d.ts
+++ b/src/types/element.d.ts
@@ -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;
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 17476a3..e6f90c4 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -63,6 +63,7 @@ declare global {
     value: string;
     elTagType?: ElTagType;
     elTagClass?: string;
+    effect?: string;
   }
 
   declare interface BaseEntity {
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 0575072..48a1c8c 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -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]);
         });
diff --git a/src/views/business/deviceData/ring/index.vue b/src/views/business/deviceData/ring/index.vue
new file mode 100644
index 0000000..f037862
--- /dev/null
+++ b/src/views/business/deviceData/ring/index.vue
@@ -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>
diff --git a/src/views/business/userDevice/index.vue b/src/views/business/userDevice/index.vue
new file mode 100644
index 0000000..c49661a
--- /dev/null
+++ b/src/views/business/userDevice/index.vue
@@ -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>
diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
index 33c7fc8..bdee6eb 100644
--- a/src/views/system/dict/data.vue
+++ b/src/views/system/dict/data.vue
@@ -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: ''
 };
diff --git a/tsconfig.json b/tsconfig.json
index e4bf3ac..c89f569 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,7 +22,7 @@
     "compilerOptions": {
       "types": ["element-plus/global"]
     },
-    "types": ["vite/client"],
+    "types": ["vite/client", "element-plus/global"],
     "skipLibCheck": true,
     "removeComments": true,
     // 允许默认导入