update

src/assets/less/index.less

@@ -1,154 +1,154 @@
 @import "./amap-item";
 
 .type-time {
-    padding-right: 4%;
+  padding-right: 4%;
-    padding-top: 3%;
+  padding-top: 3%;
-    font-size: 16px;
+  font-size: 16px;
-    display: flex;
+  display: flex;
-    justify-content: right;
+  justify-content: right;
 
-    span {
+  span {
-        padding: 0 2%;
+    padding: 0 2%;
-        cursor: pointer;
+    cursor: pointer;
+  }
+
+  .select {
+    color: #45a2ff;
+    position: relative;
+
+    &:after {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 72%;
+      left: 6px;
+      bottom: -12px;
+      height: 6px;
+      background: url('../images/light.png') no-repeat;
+      background-size: 100% 100%;
     }
+  }
 
-    .select {
+  .unSelect {
-        color: #45a2ff;
+    color: #a3a4a4;
-        position: relative;
+  }
-
-        &:after {
-            content: '';
-            position: absolute;
-            display: block;
-            width: 72%;
-            left: 6px;
-            bottom: -12px;
-            height: 6px;
-            background: url('../images/light.png') no-repeat;
-            background-size: 100% 100%;
-        }
-    }
-
-    .unSelect {
-        color: #a3a4a4;
-    }
 }
 
 *::-webkit-scrollbar {
-    width: 12px;
+  width: 12px;
-    height: 12px;
+  height: 12px;
 }
 
 *::-webkit-scrollbar-button {
-    width: 0;
+  width: 0;
-    height: 0;
+  height: 0;
-    display: none;
+  display: none;
 }
 
 *::-webkit-scrollbar-corner {
-    background-color: transparent;
+  background-color: transparent;
 }
 
 *::-webkit-scrollbar-thumb {
-    border: 4px solid rgba(0, 0, 0, 0);
+  border: 4px solid rgba(0, 0, 0, 0);
-    height: 6px;
+  height: 6px;
-    border-radius: 25px;
+  border-radius: 25px;
-    background-clip: padding-box;
+  background-clip: padding-box;
-    background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 .nowrap {
-    overflow: hidden;
+  overflow: hidden;
-    text-overflow: ellipsis;
+  text-overflow: ellipsis;
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
 .ant-modal-mask {
-    background-color: rgba(0, 0, 0, 0.65) !important;
+  background-color: rgba(0, 0, 0, 0.65) !important;
 }
 
 // 下拉框样式-start
 .ant-select-dropdown {
-    background-color: #00152b !important;
+  background-color: #00152b !important;
-    border-right: 1px solid #1b7ef2;
+  border-right: 1px solid #1b7ef2;
-    border-left: 1px solid #1b7ef2;
+  border-left: 1px solid #1b7ef2;
-    border-bottom: 1px solid #1b7ef2;
+  border-bottom: 1px solid #1b7ef2;
 }
 
 .ant-select-item {
-    color: #1b7ef2 !important;
+  color: #1b7ef2 !important;
 }
 
 //框背景色
 .ant-select:not(.ant-select-customize-input) .ant-select-selector {
-    color: #1b7ef2 !important;
+  color: #1b7ef2 !important;
-    background-color: transparent !important;
+  background-color: transparent !important;
-    border: 1px solid #1b7ef2 !important;
+  border: 1px solid #1b7ef2 !important;
 }
 
 .ant-select-item-option-selected {
-    color: #ffffff !important;
+  color: #ffffff !important;
 }
 
 // 选中字体颜色
 .ant-select-selection-item {
-    //color: #1b7ef2 !important;
+  //color: #1b7ef2 !important;
-    color: #fff;
+  color: #fff;
 }
 
 .ant-select-item-option-active {
-    background-color: transparent !important;
+  background-color: transparent !important;
 }
 
 .ant-select-item-option-active:hover {
-    background-color: #002e64 !important;
+  background-color: #002e64 !important;
 }
 
 // 箭头颜色
 .ant-select-arrow {
-    color: #1b7ef2 !important;
+  color: #1b7ef2 !important;
 }
 
 .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
-    background-color: #002e64 !important;
+  background-color: #002e64 !important;
 }
 
 // 下拉框样式-end
 
 // 级联选择器样式-start
 .ant-cascader-menu-item {
-    color: #1b7ef2 !important;
+  color: #1b7ef2 !important;
 }
 
 .ant-cascader-menu-item:hover {
-    background-color: #002e64 !important;
+  background-color: #002e64 !important;
 }
 
 .ant-cascader-menu-item-active {
-    color: #fff !important;
+  color: #fff !important;
-    background-color: #002e64 !important;
+  background-color: #002e64 !important;
 }
 
 .ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon, .ant-cascader-menu-item-loading-icon {
-    color: #1b7ef2 !important;
+  color: #1b7ef2 !important;
 }
 
 // 级联选择器样式-end
 .ant-empty-description {
-    color: #fff;
+  color: #fff;
 }
 
-//表格
+//空表格hover白色
 .ant-table-tbody > tr.ant-table-placeholder:hover > td {
-    background: transparent;
+  background: transparent !important;
 }
 
 //直升机
 .helicopter {
-    width: 60px;
+  width: 60px;
-    height: 37px;
+  height: 37px;
-    background: url("../img/helicopter.png") no-repeat;
+  background: url("../img/helicopter.png") no-repeat;
-    background-size: 100% 100%;
+  background-size: 100% 100%;
-    margin-bottom: 4px;
+  margin-bottom: 4px;
 }
 

src/assets/ts/antd.ts

@@ -13,6 +13,7 @@ import {
     Cascader,
     Spin,
     ConfigProvider,
+    Tabs,
 } from 'ant-design-vue';
 import dataV from '@iamzzg/data-view/dist/vue3/datav.map.vue.esm';
 
@@ -30,5 +31,6 @@ export default function registerGlobComp(app: App) {
         .use(Select)
         .use(Cascader)
         .use(Spin)
+        .use(Tabs)
         .use(ConfigProvider);
 }

src/components/secondaryScreen/screen-right/threeR.vue

@@ -10,8 +10,8 @@
                 :columns="monitorColumns"
                 :dataSource="dataSource"
                 :pagination="pagination"
-                :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
+                :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default no-white' : 'table-striped no-white')"
-                class="ant-table-striped"
+                class="ant-table-striped three-table"
             >
                 <template #address="{ text, record }">
                     <div class="police-times" @click="handlePoliceDetail(record)">
@@ -139,12 +139,25 @@
             padding: 6px 4px;
         }
 
+        :deep(.ant-table-tbody > tr.ant-table-placeholder:hover > td) {
+            background-color: transparent !important;
+        }
+
         :deep(.ant-table-row:hover) {
             background-color: transparent;
             color: #ffffff;
         }
     }
 
+    :deep(.ant-table-tbody > .no-white > td) {
+        background-color: blue;
+    }
+
+    .no-white,
+    .no-white:hover > td {
+        background-color: blue;
+    }
+
     //奇行
     .ant-table-striped :deep(.table-striped) td {
         background-color: #0a0a0c;

src/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue

@@ -0,0 +1,173 @@
+<template>
+    <a-table
+        class="ant-table-striped"
+        :dataSource="dataSource"
+        :columns="columns"
+        :scroll="{ y: '56vh' }"
+        :pagination="paginationProp"
+        :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
+    >
+        <template #bodyCell="{ column, record, index, text }">
+            <template v-if="column.customRender && isFunction(column.customRender)">
+                {{ column.customRender({ column, record, index, text }) }}
+            </template>
+            <template v-else>
+                {{ text }}
+            </template>
+        </template>
+    </a-table>
+</template>
+<script setup lang="ts">
+    import { onMounted, ref, watch } from 'vue';
+    import { isFunction } from '/@/utils/is.ts';
+
+    const props = defineProps({
+        columns: {
+            default: () => [],
+        },
+        api: {
+            default: () => () => {},
+        },
+        apiParams: {
+            default: () => {},
+        },
+    });
+    //分页相关
+    const current = ref(1);
+    const pageSize = ref(10);
+    const total = ref(0);
+    const deptId = ref();
+    const paginationProp = ref({
+        showSizeChanger: true,
+        pageSizeOptions: ['10', '30', '50'],
+        pageSize,
+        current,
+        total,
+        showTotal: (total) => `总 ${total} 条`,
+        onChange: pageChange,
+    });
+
+    function pageChange(page, pageS) {
+        current.value = page;
+        pageSize.value = pageS;
+        getRecords();
+    }
+
+    const dataSource = ref([]);
+
+    async function getRecords() {
+        const { code, result } = await props.api({ pageSize: pageSize.value, pageNo: current.value, ...props.apiParams });
+        if (code == 200) {
+            console.log('list', result?.records);
+            dataSource.value = result?.records;
+        }
+    }
+
+    watch(
+        props,
+        () => {
+            console.log('change');
+            getRecords();
+        },
+        {
+            immediate: true,
+        }
+    );
+    onMounted(() => {
+        console.log('props', props.columns);
+        getRecords();
+    });
+</script>
+<style scoped lang="less">
+    :deep(.ant-table-thead > tr > th) {
+        color: #fff !important;
+        background: rgba(35, 132, 221, 0.5) !important;
+        border-top: 1px solid #1d4e7c !important;
+        border-bottom: none;
+        padding: 9px 9px;
+    }
+
+    :deep(.ant-table-cell-scrollbar) {
+        box-shadow: none !important;
+    }
+
+    :deep(.ant-table) {
+        color: #fff;
+        background-color: transparent;
+        //pointer-events: none;
+    }
+
+    :deep(.ant-table-tbody > tr > td) {
+        border-bottom: none;
+        padding: 0 4px;
+    }
+
+    :deep(.ant-table-row:hover) {
+        background-color: transparent;
+        color: #ffffff;
+    }
+
+    .ant-table-striped :deep(.table-default) td,
+    .ant-table-striped :deep(.table-striped) td {
+        background-color: #00152b;
+        border-bottom: 1px solid #2384dd;
+    }
+
+    :deep(.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover) {
+        background: transparent;
+    }
+
+    //#00152b
+    // 分页
+    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
+        background-color: #1f2935;
+        color: #8291a9;
+        border: none;
+    }
+
+    :deep(.ant-pagination-item) {
+        background-color: #1f2935;
+        color: #ffffff;
+        border: none;
+    }
+
+    // 当前页选中的样式
+    :deep(.ant-pagination-item-active) {
+        background-color: #0081ff;
+    }
+
+    :deep(.ant-pagination-item-active a) {
+        color: #ffffff;
+    }
+
+    :deep(.ant-pagination-item a),
+    :deep(.ant-pagination-total-text) {
+        color: #ffffff;
+    }
+
+    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
+        color: #ffffff;
+        background-color: #1f2935;
+    }
+
+    // 省略样式
+    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
+        color: #ffffff;
+    }
+
+    // 省略鼠标移入样式
+    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
+        color: rgba(255, 255, 255, 0.4);
+    }
+
+    // 下一页
+    :deep(.ant-pagination-next .ant-pagination-item-link) {
+        background-color: #1f2935;
+        color: #8291a9;
+        border: none;
+    }
+
+    :deep(.ant-table-pagination-right) {
+        margin-right: 10px !important;
+    }
+</style>

src/components/secondaryScreen/secondMap/components/userInfoModal/allLookItem.vue

@@ -1,6 +1,6 @@
 <template>
-    <div style="display: flex; margin-top: 20px">
+    <div style="display: flex; margin-top: 20px" class="look-item">
-        <div style="width: calc(70% - 20px); border: 1px solid #ededed; padding: 20px">
+        <div class="box-con">
             <div style="display: flex; align-items: center; padding: 10px 0; justify-content: flex-start">
                 <img :src="heart_rate" alt="" />
                 心率
@@ -32,7 +32,7 @@
                 </div>
             </div>
         </div>
-        <div style="width: 30%; margin-left: 20px; border: 1px solid #ededed; padding: 20px">
+        <div class="box-con-small">
             <div style="display: flex; align-items: center; padding: 10px 0; justify-content: flex-start">
                 <img :src="blood" alt="" />
                 血氧
@@ -53,8 +53,8 @@
             </div>
         </div>
     </div>
-    <div style="display: flex; margin-top: 20px">
+    <div style="display: flex; margin-top: 20px" class="look-item">
-        <div style="width: calc(70% - 20px); border: 1px solid #ededed; padding: 20px">
+        <div class="box-con">
             <div style="display: flex; align-items: center; padding: 10px 0; justify-content: flex-start">
                 <img :src="sleep" alt="" />
                 睡眠
@@ -90,7 +90,7 @@
                 </div>
             </div>
         </div>
-        <div style="width: 30%; margin-left: 20px; border: 1px solid #ededed; padding: 20px">
+        <div class="box-con-small">
             <div style="display: flex; align-items: center; padding: 10px 0; justify-content: flex-start">
                 <img :src="pressure" alt="" />
                 压力
@@ -114,8 +114,8 @@
             </div>
         </div>
     </div>
-    <div style="display: flex; margin-top: 20px">
+    <div style="display: flex; margin-top: 20px" class="look-item">
-        <div style="width: 100%; border: 1px solid #ededed">
+        <div class="box-con-long">
             <div style="display: flex; align-items: center; padding: 30px 20px 10px; justify-content: flex-start">
                 <img :src="temperature" alt="" />
                 运动
@@ -174,8 +174,8 @@
             </div>
         </div>
     </div>
-    <div style="display: flex; margin-top: 20px">
+    <div style="display: flex; margin-top: 20px" class="look-item">
-        <div style="width: calc(70% - 20px); border: 1px solid #ededed; padding: 20px">
+        <div class="box-con">
             <div style="display: flex; align-items: center; padding: 10px 0; justify-content: flex-start">
                 <img :src="temperature" alt="" />
                 体温
@@ -244,6 +244,28 @@
     }
 </script>
 <style scoped lang="less">
+    .look-item {
+        color: #fff;
+    }
+
+    .box-con {
+        width: calc(70% - 20px);
+        border: 1px solid #129bff;
+        padding: 20px;
+    }
+
+    .box-con-small {
+        width: 30%;
+        margin-left: 20px;
+        border: 1px solid #129bff;
+        padding: 20px;
+    }
+
+    .box-con-long {
+        width: 100%;
+        border: 1px solid #129bff;
+    }
+
     img {
         width: 30px;
         height: 30px;
@@ -252,6 +274,7 @@
 
     .label-d {
         width: 50%;
+        color: #fff;
     }
 
     .value-d {
@@ -269,7 +292,7 @@
             position: absolute;
             right: 0;
             top: 5%;
-            background-color: #d3d3d3;
+            background-color: #129bff;
         }
     }
 
@@ -283,7 +306,7 @@
             position: absolute;
             right: -20px;
             top: 5%;
-            background-color: #d3d3d3;
+            background-color: #129bff;
         }
     }
 

src/components/secondaryScreen/secondMap/components/userInfoModal/bloodOxygen.vue

@@ -26,22 +26,19 @@
 
     <div v-if="status" ref="chartRef" style="min-height: 300px; width: 100%"></div>
 
-    <BasicTable v-else @register="registerTable" />
+    <BasicTable v-else :key="refresh" :columns="bloodOxygenColumns" :api="queryBloodOxygenStatisticsPageApi" />
 </template>
 <script setup lang="ts">
-    import PublicTitle from '/@/components/secondaryScreen/secondMap/components/userInfoModal/publicTitle.vue';
     import { nextTick, onMounted, ref } from 'vue';
     import * as echarts from 'echarts';
-    import BasicTable from '/@/components/Table/src/BasicTable.vue';
+    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
-    import { useListPage } from '/@/hooks/system/useListPage';
+    import { queryBloodOxygenStatisticsApi, queryBloodOxygenStatisticsPageApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
-    import {
-        queryBloodOxygenStatisticsApi,
-        queryBloodOxygenStatisticsPageApi,
-    } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.api';
     import { propTypes } from '/@/utils/propTypes';
     import dayjs from 'dayjs';
+    import PublicTitle from '/@/components/secondaryScreen/secondMap/components/userInfoModal/publicTitle.vue';
     import { message } from 'ant-design-vue';
-    import { bloodOxygenColumns } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.data';
+    import { bloodOxygenColumns } from '/@/components/secondaryScreen/secondMap/components/userInfoModal/tableColumns.ts';
+    import { useChangeTable } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
 
     const type = ref(1);
     const status = ref<boolean>(true);
@@ -54,30 +51,20 @@
         userId: propTypes.string.def(''),
         keyType: propTypes.string.def('2'),
     });
+    const { refresh, setRefresh } = useChangeTable();
+    const apiParams = ref(getParams());
+
+    function tableReload() {
+        apiParams.value = {
+            ...getParams(),
+            pageSize: 10,
+            pageNo: 1,
+        };
+        setRefresh();
+    }
 
     let echart = null;
 
-    const { tableContext } = useListPage({
-        tableProps: {
-            api: queryBloodOxygenStatisticsPageApi,
-            columns: bloodOxygenColumns,
-            beforeFetch: (params) => {
-                let p = getParams();
-                for (const pKey in p) {
-                    params[pKey] = p[pKey];
-                }
-                return params;
-            },
-            canResize: false,
-            showTableSetting: false,
-            rowSelection: false,
-            useSearchForm: false,
-            showActionColumn: false,
-        },
-    });
-
-    const [registerTable, { reload }, {}] = tableContext;
-
     function changeV(j: any) {
         type.value = j.type;
         value.value = j.value;
@@ -89,7 +76,7 @@
             echart && echart.clear();
             initEchart('0');
         } else {
-            reload();
+            tableReload();
         }
     }
 
@@ -100,7 +87,7 @@
                 initEchart('0');
             });
         } else {
-            reload();
+            tableReload();
         }
     }
 

src/components/secondaryScreen/secondMap/components/userInfoModal/heartRate.vue

@@ -27,22 +27,20 @@
 
     <div v-if="status" ref="chartRef" style="min-height: 300px; width: 100%"></div>
 
-    <BasicTable v-else @register="registerTable" />
+    <BasicTable v-else :key="refresh" :columns="heartRateColumns" :api="queryHeartRateStatisticsPageApi" :apiParams="apiParams" />
 </template>
 <script setup lang="ts">
     import PublicTitle from '/@/components/secondaryScreen/secondMap/components/userInfoModal/publicTitle.vue';
     import { nextTick, onMounted, ref } from 'vue';
     import * as echarts from 'echarts';
-    import BasicTable from '/@/components/Table/src/BasicTable.vue';
+    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
-    import { useListPage } from '/@/hooks/system/useListPage';
+    import { queryHeartRateStatisticsApi, queryHeartRateStatisticsPageApi } from '/@/components/secondaryScreen/secondMap/secondMapApi';
-    import {
-        queryHeartRateStatisticsApi,
-        queryHeartRateStatisticsPageApi,
-    } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.api';
     import { propTypes } from '/@/utils/propTypes';
     import dayjs from 'dayjs';
     import { message } from 'ant-design-vue';
-    import { heartRateColumns } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.data';
+    import { heartRateColumns } from '/@/components/secondaryScreen/secondMap/components/userInfoModal/tableColumns.ts';
+    import { useChangeTable } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
+
     const type = ref(1);
     const status = ref<boolean>(true);
     const value = ref(dayjs(new Date()).format('YYYY-MM-DD'));
@@ -54,30 +52,20 @@
         userId: propTypes.string.def(''),
         keyType: propTypes.string.def('1'),
     });
+    const { refresh, setRefresh } = useChangeTable();
+    const apiParams = ref(getParams());
+
+    function tableReload() {
+        apiParams.value = {
+            ...getParams(),
+            pageSize: 10,
+            pageNo: 1,
+        };
+        setRefresh();
+    }
 
     let echart = null;
 
-    const { tableContext } = useListPage({
-        tableProps: {
-            api: queryHeartRateStatisticsPageApi,
-            columns: heartRateColumns,
-            beforeFetch: (params) => {
-                let p = getParams();
-                for (const pKey in p) {
-                    params[pKey] = p[pKey];
-                }
-                return params;
-            },
-            canResize: false,
-            showTableSetting: false,
-            rowSelection: false,
-            useSearchForm: false,
-            showActionColumn: false,
-        },
-    });
-
-    const [registerTable, { reload }, {}] = tableContext;
-
     function changeV(j: any) {
         type.value = j.type;
         value.value = j.value;
@@ -89,7 +77,7 @@
             echart && echart.clear();
             initEchart('0');
         } else {
-            reload();
+            tableReload();
         }
     }
 
@@ -100,7 +88,7 @@
                 initEchart('0');
             });
         } else {
-            reload();
+            tableReload();
         }
     }
 
@@ -187,6 +175,7 @@
                 params['dateYear'] = value.value;
                 break;
         }
+        // TODO 待修改
         return params;
     }
 
@@ -194,4 +183,4 @@
         initEchart('0');
     });
 </script>
-<style scoped lang="less"></style>
+<style scoped lang="less"></style>

src/components/secondaryScreen/secondMap/components/userInfoModal/motion.vue

@@ -7,34 +7,34 @@
         :keyType="keyType"
         :user-id="userId"
     />
-    <!--    <div style="display: flex; justify-content: center">-->
+    <div style="display: flex; justify-content: center">
-    <!--        <div style="width: 15%; text-align: center">-->
+        <div style="width: 15%; text-align: center">
-    <!--            <div>-->
+            <div>
-    <!--                <span style="font-size: 25px"> {{ maxInfo > 1000 ? (maxInfo / 1000).toFixed(2) : maxInfo }}</span>-->
+                <span style="font-size: 25px"> {{ maxInfo > 1000 ? (maxInfo / 1000).toFixed(2) : maxInfo }}</span>
-    <!--                <span style="color: #aa9db6">{{ maxInfo > 1000 ? 'km' : 'm' }}</span>-->
+                <span style="color: #aa9db6">{{ maxInfo > 1000 ? 'km' : 'm' }}</span>
-    <!--            </div>-->
+            </div>
-    <!--            <div style="color: #aa9db6">总运动距离</div>-->
+            <div style="color: #aa9db6">总运动距离</div>
-    <!--        </div>-->
+        </div>
-    <!--        <div style="width: 15%; text-align: center">-->
+        <div style="width: 15%; text-align: center">
-    <!--            <div>-->
+            <div>
-    <!--                <span style="font-size: 25px"> {{ minInfo > 1000 ? (minInfo / 1000).toFixed(2) : minInfo }}</span>-->
+                <span style="font-size: 25px"> {{ minInfo > 1000 ? (minInfo / 1000).toFixed(2) : minInfo }}</span>
-    <!--                <span style="color: #aa9db6">{{ minInfo > 1000 ? '千卡' : '卡' }}</span>-->
+                <span style="color: #aa9db6">{{ minInfo > 1000 ? '千卡' : '卡' }}</span>
-    <!--            </div>-->
+            </div>
-    <!--            <div style="color: #aa9db6">总卡路里</div>-->
+            <div style="color: #aa9db6">总卡路里</div>
-    <!--        </div>-->
+        </div>
-    <!--    </div>-->
+    </div>
 
-    <BasicTable @register="registerTable" />
+    <BasicTable :key="refresh" :columns="motionColumns" :api="queryExercisePageApi" />
 </template>
 <script setup lang="ts">
     import PublicTitle from '/@/components/secondaryScreen/secondMap/components/userInfoModal/publicTitle.vue';
     import { ref } from 'vue';
-    import BasicTable from '/@/components/Table/src/BasicTable.vue';
+    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
-    import { useListPage } from '/@/hooks/system/useListPage';
+    import { queryExercisePageApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
-    import { queryExercisePageApi } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.api';
     import { propTypes } from '/@/utils/propTypes';
     import dayjs from 'dayjs';
-    import { motionColumns } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.data';
+    import { motionColumns } from '/@/components/secondaryScreen/secondMap/components/userInfoModal/tableColumns.ts';
+    import { useChangeTable } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
 
     const type = ref(1);
     const status = ref<boolean>(true);
@@ -47,53 +47,64 @@
         userId: propTypes.string.def(''),
         keyType: propTypes.string.def('6'),
     });
+    const { refresh, setRefresh } = useChangeTable();
+    const apiParams = ref(getParams());
 
-    const { tableContext } = useListPage({
+    function tableReload() {
-        tableProps: {
+        apiParams.value = {
-            api: queryExercisePageApi,
+            ...getParams(),
-            columns: motionColumns,
+            pageSize: 10,
-            beforeFetch: (params) => {
+            pageNo: 1,
-                let p = getParams();
+        };
-                for (const pKey in p) {
+        setRefresh();
-                    params[pKey] = p[pKey];
+    }
-                }
-                return params;
-            },
-            canResize: false,
-            afterFetch: async () => {
-                let res = getRawDataSource();
-                maxInfo.value = res.totalDistance;
-                minInfo.value = res.totalKcal;
-                setPagination({
-                    total: res.page.total,
-                    current: res.page.current,
-                    pageSize: res.page.size,
-                });
-                return res.page.records;
-            },
-            showTableSetting: false,
-            rowSelection: false,
-            useSearchForm: false,
-            showActionColumn: false,
-        },
-    });
 
-    const [registerTable, { reload, getDataSource, getRawDataSource, setPagination, getPaginationRef }, {}] = tableContext;
+    // const { tableContext } = useListPage({
+    //     tableProps: {
+    //         api: queryExercisePageApi,
+    //         columns: motionColumns,
+    //         beforeFetch: (params) => {
+    //             let p = getParams();
+    //             for (const pKey in p) {
+    //                 params[pKey] = p[pKey];
+    //             }
+    //             return params;
+    //         },
+    //         canResize: false,
+    //         afterFetch: async () => {
+    //             let res = getRawDataSource();
+    //             maxInfo.value = res.totalDistance;
+    //             minInfo.value = res.totalKcal;
+    //             setPagination({
+    //                 total: res.page.total,
+    //                 current: res.page.current,
+    //                 pageSize: res.page.size,
+    //             });
+    //             return res.page.records;
+    //         },
+    //         showTableSetting: false,
+    //         rowSelection: false,
+    //         useSearchForm: false,
+    //         showActionColumn: false,
+    //     },
+    // });
+    //
+    // const [registerTable, { reload, getDataSource, getRawDataSource, setPagination, getPaginationRef }, {}] = tableContext;
 
     function changeV(j: any) {
         type.value = j.type;
         value.value = j.value;
-        reload();
+        tableReload();
     }
 
     function changeShowStatus(s: boolean) {
         status.value = s;
-        reload();
+        tableReload();
     }
 
     function changeMotion(s: string) {
         motionType.value = s;
-        reload();
+        tableReload();
     }
 
     function getParams() {

src/components/secondaryScreen/secondMap/components/userInfoModal/pressure.vue

@@ -23,22 +23,19 @@
 
     <div v-if="status" ref="chartRef" style="min-height: 300px; width: 100%"></div>
 
-    <BasicTable v-else @register="registerTable" />
+    <BasicTable v-else :key="refresh" :columns="pressureColumns" :api="queryStressStatisticsPageApi" :api-params="apiParams" />
 </template>
 <script setup lang="ts">
     import PublicTitle from '/@/components/secondaryScreen/secondMap/components/userInfoModal/publicTitle.vue';
     import { nextTick, onMounted, ref } from 'vue';
     import * as echarts from 'echarts';
-    import BasicTable from '/@/components/Table/src/BasicTable.vue';
+    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
-    import { useListPage } from '/@/hooks/system/useListPage';
+    import { queryStressStatisticsApi, queryStressStatisticsPageApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
-    import {
-        queryStressStatisticsApi,
-        queryStressStatisticsPageApi,
-    } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.api';
     import { propTypes } from '/@/utils/propTypes';
     import dayjs from 'dayjs';
     import { message } from 'ant-design-vue';
-    import { pressureColumns } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.data';
+    import { pressureColumns } from '/@/components/secondaryScreen/secondMap/components/userInfoModal/tableColumns.ts';
+    import { useChangeTable } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
 
     const type = ref(1);
     const status = ref<boolean>(true);
@@ -53,27 +50,17 @@
     });
 
     let echart = null;
+    const apiParams = ref(getParams());
+    const { refresh, setRefresh } = useChangeTable();
 
-    const { tableContext } = useListPage({
+    function tableReload() {
-        tableProps: {
+        apiParams.value = {
-            api: queryStressStatisticsPageApi,
+            ...getParams(),
-            columns: pressureColumns,
+            pageSize: 10,
-            beforeFetch: (params) => {
+            pageNo: 1,
-                let p = getParams();
+        };
-                for (const pKey in p) {
+        setRefresh();
-                    params[pKey] = p[pKey];
+    }
-                }
-                return params;
-            },
-            canResize: false,
-            showTableSetting: false,
-            rowSelection: false,
-            useSearchForm: false,
-            showActionColumn: false,
-        },
-    });
-
-    const [registerTable, { reload, getPaginationRef }, {}] = tableContext;
 
     function changeV(j: any) {
         type.value = j.type;
@@ -86,7 +73,7 @@
             echart && echart.clear();
             initEchart('0');
         } else {
-            reload();
+            tableReload();
         }
     }
 
@@ -97,7 +84,7 @@
                 initEchart('0');
             });
         } else {
-            reload();
+            tableReload();
         }
     }
 

src/components/secondaryScreen/secondMap/components/userInfoModal/publicTitle.vue

@@ -17,13 +17,13 @@
     >
         <div style="position: absolute; left: 10px; display: flex; align-items: center" v-if="!props.showList">
             锻炼类型：
-            <JDictSelectTag
+            <!--            <JDictSelectTag-->
-                v-model:value="motionType"
+            <!--                v-model:value="motionType"-->
-                style="min-width: 140px"
+            <!--                style="min-width: 140px"-->
-                placeholder="请选择锻炼类型"
+            <!--                placeholder="请选择锻炼类型"-->
-                dictCode="watch_exercise_type"
+            <!--                dictCode="watch_exercise_type"-->
-                @change="changeSelect"
+            <!--                @change="changeSelect"-->
-            />
+            <!--            />-->
         </div>
         <div style="display: flex; font-size: 20px" v-if="showStatus && props.showList">
             <span style="margin: 0 0 0 5px; cursor: pointer" @click="changeDate('0')">&lt;</span>
@@ -55,7 +55,7 @@
     import listImg from '/@/assets/images/list.png';
     import dayjs from 'dayjs';
     import { propTypes } from '/@/utils/propTypes';
-    import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+    // import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
     import { userDataDayByYearApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
 
     const props = defineProps({

src/components/secondaryScreen/secondMap/components/userInfoModal/sleep.vue

@@ -28,19 +28,20 @@
         </div>
     </template>
 
-    <BasicTable v-if="!status" @register="registerTable" />
+    <BasicTable v-if="!status" :key="refresh" :columns="sleepColumns" :api="querySleepStatisticsPageApi" :api-params="apiParams" />
 </template>
 <script setup lang="ts">
     import PublicTitle from '/@/components/secondaryScreen/secondMap/components/userInfoModal/publicTitle.vue';
     import { nextTick, onMounted, ref } from 'vue';
     import * as echarts from 'echarts';
-    import BasicTable from '/@/components/Table/src/BasicTable.vue';
+    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
-    import { useListPage } from '/@/hooks/system/useListPage';
+    import { querySleepStatisticsApi, querySleepStatisticsPageApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
-    import { querySleepStatisticsApi, querySleepStatisticsPageApi } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.api';
     import { propTypes } from '/@/utils/propTypes';
     import dayjs from 'dayjs';
     import { message } from 'ant-design-vue';
-    import { sleepColumns } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.data';
+    import { sleepColumns } from '/@/components/secondaryScreen/secondMap/components/userInfoModal/tableColumns.ts';
+    import { useChangeTable } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
+
     const type = ref(1);
     const status = ref<boolean>(true);
     const value = ref(dayjs(new Date()).format('YYYY-MM-DD'));
@@ -53,30 +54,23 @@
         userId: propTypes.string.def(''),
         keyType: propTypes.string.def('4'),
     });
+    const { refresh, setRefresh } = useChangeTable();
+    const apiParams = ref(getParams());
+
+    function tableReload() {
+        nextTick(() => {
+            apiParams.value = {
+                ...getParams(),
+                pageSize: 10,
+                pageNo: 1,
+            };
+            console.log('apiParams.value', apiParams.value);
+            setRefresh();
+        });
+    }
 
     let echart = null;
 
-    const { tableContext } = useListPage({
-        tableProps: {
-            api: querySleepStatisticsPageApi,
-            columns: sleepColumns,
-            beforeFetch: (params) => {
-                let p = getParams();
-                for (const pKey in p) {
-                    params[pKey] = p[pKey];
-                }
-                return params;
-            },
-            canResize: false,
-            showTableSetting: false,
-            rowSelection: false,
-            useSearchForm: false,
-            showActionColumn: false,
-        },
-    });
-
-    const [registerTable, { reload }, {}] = tableContext;
-
     function changeV(j: any) {
         type.value = j.type;
         value.value = j.value;
@@ -89,7 +83,7 @@
             echart && echart.clear();
             initEchart('0');
         } else {
-            reload();
+            tableReload();
         }
     }
 
@@ -100,7 +94,7 @@
                 initEchart('0');
             });
         } else {
-            reload();
+            tableReload();
         }
     }
 
@@ -212,6 +206,7 @@
             }
         } catch {}
     }
+
     function getParams() {
         let params = {
             flag: type.value,
@@ -239,4 +234,4 @@
         initEchart('0');
     });
 </script>
-<style scoped lang="less"></style>
+<style scoped lang="less"></style>

src/components/secondaryScreen/secondMap/components/userInfoModal/stepNumber.vue

@@ -25,19 +25,19 @@
 
     <div v-if="status" ref="chartRef" style="min-height: 300px; width: 100%"></div>
 
-    <BasicTable v-else @register="registerTable" />
+    <BasicTable v-else :key="refresh" :columns="stepNumberColumns" :api="queryStepStatisticsPageApi" :api-params="apiParams" />
 </template>
 <script setup lang="ts">
     import PublicTitle from '/@/components/secondaryScreen/secondMap/components/userInfoModal/publicTitle.vue';
     import { nextTick, onMounted, ref } from 'vue';
     import * as echarts from 'echarts';
-    import BasicTable from '/@/components/Table/src/BasicTable.vue';
+    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
-    import { useListPage } from '/@/hooks/system/useListPage';
+    import { queryStepStatisticsApi, queryStepStatisticsPageApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
-    import { queryStepStatisticsApi, queryStepStatisticsPageApi } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.api';
     import { propTypes } from '/@/utils/propTypes';
     import dayjs from 'dayjs';
     import { message } from 'ant-design-vue';
-    import { stepNumberColumns } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.data';
+    import { stepNumberColumns } from '/@/components/secondaryScreen/secondMap/components/userInfoModal/tableColumns.ts';
+    import { useChangeTable } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
 
     const type = ref(2);
     const status = ref<boolean>(true);
@@ -54,30 +54,20 @@
         userId: propTypes.string.def(''),
         keyType: propTypes.string.def('7'),
     });
+    const { refresh, setRefresh } = useChangeTable();
+    const apiParams = ref(getParams());
+
+    function tableReload() {
+        apiParams.value = {
+            ...getParams(),
+            pageSize: 10,
+            pageNo: 1,
+        };
+        setRefresh();
+    }
 
     let echart = null;
 
-    const { tableContext } = useListPage({
-        tableProps: {
-            api: queryStepStatisticsPageApi,
-            columns: stepNumberColumns,
-            beforeFetch: (params) => {
-                let p = getParams();
-                for (const pKey in p) {
-                    params[pKey] = p[pKey];
-                }
-                return params;
-            },
-            canResize: false,
-            showTableSetting: false,
-            rowSelection: false,
-            useSearchForm: false,
-            showActionColumn: false,
-        },
-    });
-
-    const [registerTable, { reload }, {}] = tableContext;
-
     function changeV(j: any) {
         type.value = j.type;
         value.value = j.value;
@@ -89,7 +79,7 @@
             echart && echart.clear();
             initEchart('0');
         } else {
-            reload();
+            tableReload();
         }
     }
 
@@ -100,7 +90,7 @@
                 initEchart('0');
             });
         } else {
-            reload();
+            tableReload();
         }
     }
 

src/components/secondaryScreen/secondMap/components/userInfoModal/tableColumns.ts

@@ -0,0 +1,218 @@
+export const bloodOxygenColumns = [
+    {
+        title: '序号',
+        align: 'center',
+        width: 80,
+        customRender: ({ index }) => {
+            return index + 1;
+        },
+    },
+    {
+        title: '血氧值（%）',
+        dataIndex: 'dataValue',
+        key: 'dataValue',
+        align: 'center',
+    },
+    {
+        title: '测量时间',
+        dataIndex: 'timeStamp',
+        key: 'timeStamp',
+        align: 'center',
+    },
+];
+export const heartRateColumns = [
+    {
+        title: '序号',
+        align: 'center',
+        width: 80,
+        customRender: ({ index }) => {
+            return index + 1;
+        },
+    },
+    {
+        title: '心率（次/分钟）',
+        dataIndex: 'dataValue',
+        key: 'dataValue',
+        align: 'center',
+    },
+    {
+        title: '静息心率（次/分钟）',
+        dataIndex: 'silenceValue',
+        key: 'silenceValue',
+        align: 'center',
+    },
+    {
+        title: '测量时间',
+        dataIndex: 'timeStamp',
+        key: 'timeStamp',
+        align: 'center',
+    },
+];
+export const pressureColumns = [
+    {
+        title: '序号',
+        align: 'center',
+        width: 80,
+        customRender: ({ index }) => {
+            return index + 1;
+        },
+    },
+    {
+        title: '压力值',
+        dataIndex: 'dataValue',
+        key: 'dataValue',
+        align: 'center',
+    },
+    {
+        title: '测量开始时间',
+        dataIndex: 'startTimeStamp',
+        key: 'startTimeStamp',
+        align: 'center',
+    },
+    {
+        title: '测量结束时间',
+        dataIndex: 'endTimeStamp',
+        key: 'endTimeStamp',
+        align: 'center',
+    },
+];
+export const temperatureColumns = [
+    {
+        title: '序号',
+        align: 'center',
+        width: 80,
+        customRender: ({ index }) => {
+            return index + 1;
+        },
+    },
+    {
+        title: '体温（℃）',
+        dataIndex: 'dataValue',
+        key: 'dataValue',
+        align: 'center',
+    },
+    {
+        title: '体表温度（℃）',
+        dataIndex: 'skinTempera',
+        key: 'skinTempera',
+        align: 'center',
+    },
+    {
+        title: '测量时间',
+        dataIndex: 'timeStamp',
+        key: 'timeStamp',
+        align: 'center',
+    },
+];
+export const motionColumns = [
+    {
+        title: '序号',
+        align: 'center',
+        width: 80,
+        customRender: ({ index }) => {
+            return index + 1;
+        },
+    },
+    {
+        title: '锻炼类型',
+        dataIndex: 'workoutType_dictText',
+        key: 'workoutType_dictText',
+        align: 'center',
+    },
+    {
+        title: '距离（米）',
+        dataIndex: 'distance',
+        key: 'distance',
+        align: 'center',
+    },
+    {
+        title: '卡路里（千卡）',
+        dataIndex: 'calorie',
+        key: 'calorie',
+        align: 'center',
+    },
+    {
+        title: '锻炼开始时间',
+        dataIndex: 'startTimeStamp',
+        key: 'startTimeStamp',
+        align: 'center',
+    },
+    {
+        title: '锻炼结束时间',
+        dataIndex: 'endTimeStamp',
+        key: 'endTimeStamp',
+        align: 'center',
+    },
+];
+export const stepNumberColumns = [
+    {
+        title: '序号',
+        align: 'center',
+        width: 80,
+        customRender: ({ index }) => {
+            return index + 1;
+        },
+    },
+    {
+        title: '步数',
+        dataIndex: 'stepValue',
+        key: 'stepValue',
+        align: 'center',
+    },
+    {
+        title: '距离（米）',
+        dataIndex: 'distanceValue',
+        key: 'distanceValue',
+        align: 'center',
+    },
+    {
+        title: '卡路里（千卡）',
+        dataIndex: 'calorieValue',
+        key: 'calorieValue',
+        align: 'center',
+    },
+    {
+        title: '数据日期',
+        dataIndex: 'dataDate',
+        key: 'dataDate',
+        align: 'center',
+    },
+];
+export const sleepColumns = [
+    {
+        title: '序号',
+        align: 'center',
+        width: 80,
+        customRender: ({ index }) => {
+            return index + 1;
+        },
+    },
+    {
+        title: '睡眠类型',
+        dataIndex: 'sleepType_dictText',
+        key: 'sleepType_dictText',
+        align: 'center',
+    },
+    {
+        title: '睡眠时长（分钟）',
+        dataIndex: 'silenceValue',
+        key: 'silenceValue',
+        align: 'center',
+        customRender: ({ record }) => {
+            // @ts-ignore
+            return (new Date(record?.endTime).getTime() - new Date(record?.startTime).getTime()) / (60 * 1000);
+        },
+    },
+    {
+        title: '睡眠开始时间',
+        dataIndex: 'startTime',
+        key: 'startTime',
+        align: 'center',
+    },
+    {
+        title: '睡眠结束时间',
+        dataIndex: 'endTime',
+        key: 'endTime',
+        align: 'center',
+    },
+];

src/components/secondaryScreen/secondMap/components/userInfoModal/temperature.vue

@@ -26,22 +26,19 @@
 
     <div v-if="status" ref="chartRef" style="min-height: 300px; width: 100%"></div>
 
-    <BasicTable v-else @register="registerTable" />
+    <BasicTable v-else :key="refresh" :columns="temperatureColumns" :api="queryBodyTemperatureStatPageApi" :api-params="apiParams" />
 </template>
 <script setup lang="ts">
     import PublicTitle from '/@/components/secondaryScreen/secondMap/components/userInfoModal/publicTitle.vue';
     import { nextTick, onMounted, ref } from 'vue';
     import * as echarts from 'echarts';
-    import BasicTable from '/@/components/Table/src/BasicTable.vue';
+    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
-    import { useListPage } from '/@/hooks/system/useListPage';
+    import { queryBodyTemperatureStatApi, queryBodyTemperatureStatPageApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
-    import {
-        queryBodyTemperatureStatApi,
-        queryBodyTemperatureStatPageApi,
-    } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.api';
     import { propTypes } from '/@/utils/propTypes';
     import dayjs from 'dayjs';
     import { message } from 'ant-design-vue';
-    import { temperatureColumns } from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/userInfo.data';
+    import { temperatureColumns } from '/@/components/secondaryScreen/secondMap/components/userInfoModal/tableColumns.ts';
+    import { useChangeTable } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
 
     const type = ref(1);
     const status = ref<boolean>(true);
@@ -54,30 +51,20 @@
         userId: propTypes.string.def(''),
         keyType: propTypes.string.def('5'),
     });
+    const { refresh, setRefresh } = useChangeTable();
+    const apiParams = ref(getParams());
+
+    function tableReload() {
+        apiParams.value = {
+            ...getParams(),
+            pageSize: 10,
+            pageNo: 1,
+        };
+        setRefresh();
+    }
 
     let echart = null;
 
-    const { tableContext } = useListPage({
-        tableProps: {
-            api: queryBodyTemperatureStatPageApi,
-            columns: temperatureColumns,
-            beforeFetch: (params) => {
-                let p = getParams();
-                for (const pKey in p) {
-                    params[pKey] = p[pKey];
-                }
-                return params;
-            },
-            canResize: false,
-            showTableSetting: false,
-            rowSelection: false,
-            useSearchForm: false,
-            showActionColumn: false,
-        },
-    });
-
-    const [registerTable, { reload }, {}] = tableContext;
-
     function changeV(j: any) {
         type.value = j.type;
         value.value = j.value;
@@ -89,7 +76,7 @@
             echart && echart.clear();
             initEchart('0');
         } else {
-            reload();
+            tableReload();
         }
     }
 
@@ -100,7 +87,7 @@
                 initEchart('0');
             });
         } else {
-            reload();
+            tableReload();
         }
     }
 

src/components/secondaryScreen/secondMap/components/userInfoModal/userInfoModal.less

@@ -0,0 +1,22 @@
+.user-info-modal {
+  background-color: #00152b;
+  border: 1px solid #129bff;
+  padding: 14px;
+
+  .line {
+    position: absolute;
+    top: 7%;
+    bottom: 5%;
+    left: 20%;
+    border-right: 1px solid #129bff;
+  }
+
+  .fff {
+    color: #fff;
+  }
+
+  .ant-tabs {
+    color: #fff;
+  }
+}
+

src/components/secondaryScreen/secondMap/components/userInfoModal/userInfoModal.vue

@@ -1,43 +1,47 @@
 <template>
-    <Dialog :openVis="visible" width="70%" title="健康终端报警列表" @close="closeModal">
+    <Dialog :openVis="visible" width="80%" title="健康终端报警列表" @close="closeModal">
-        <div style="display: flex">
+        <template #container>
-            <div style="width: 23%; padding: 0 20px 20px">
+            <div class="user-info-modal" style="display: flex">
-                <div style="margin-bottom: 10px; font-weight: bold"> 用户名称：{{ infoData.username }}</div>
+                <div style="width: 23%; padding: 0 20px 20px" class="fff">
-                <div style="margin-bottom: 10px; font-weight: bold"> 工具编码：{{ infoData.watchNo }}</div>
+                    <div style="margin-bottom: 10px; font-weight: bold"> 用户名称：{{ infoData?.username }}</div>
-                <div style="margin-bottom: 10px; font-weight: bold"> 单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：{{ infoData.unit }} </div>
+                    <div style="margin-bottom: 10px; font-weight: bold"> 工具编码：{{ infoData?.watchNo }}</div>
-                <div style="margin-bottom: 10px; font-weight: bold"> 部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门：{{ infoData.department }} </div>
+                    <div style="margin-bottom: 10px; font-weight: bold"> 单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：{{ infoData?.unit }} </div>
-                <div style="margin-bottom: 10px; font-weight: bold"> 绑定日期：{{ infoData.bindDate }}</div>
+                    <div style="margin-bottom: 10px; font-weight: bold">
-            </div>
+                        部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门：{{ infoData?.department }}
-            <div style="position: absolute; top: 5%; left: 20%; height: 90%; border-right: 1px solid #e6e6e6"></div>
+                    </div>
-            <div style="width: 77%">
+                    <div style="margin-bottom: 10px; font-weight: bold"> 绑定日期：{{ infoData?.bindDate }}</div>
-                <a-tabs v-model:activeKey="activeKey">
+                </div>
-                    <a-tab-pane key="0" tab="总览" />
+                <div class="line"></div>
-                    <a-tab-pane key="1" tab="心率" />
+                <div style="width: 77%">
-                    <a-tab-pane key="2" tab="血氧" />
+                    <a-tabs v-model:activeKey="activeKey">
-                    <a-tab-pane key="4" tab="睡眠" />
+                        <a-tab-pane key="0" tab="总览" />
-                    <a-tab-pane key="3" tab="压力" />
+                        <a-tab-pane key="1" tab="心率" />
-                    <a-tab-pane key="6" tab="锻炼" />
+                        <a-tab-pane key="2" tab="血氧" />
-                    <a-tab-pane key="7" tab="步数" />
+                        <a-tab-pane key="4" tab="睡眠" />
-                    <a-tab-pane key="5" tab="体温" />
+                        <a-tab-pane key="3" tab="压力" />
-                </a-tabs>
+                        <a-tab-pane key="6" tab="锻炼" />
-                <div style="height: 60vh; overflow: auto">
+                        <a-tab-pane key="7" tab="步数" />
-                    <all-look
+                        <a-tab-pane key="5" tab="体温" />
-                        @change-params-date="changeParamsDate"
+                    </a-tabs>
-                        v-if="activeKey === '0'"
+                    <div style="height: 60vh; overflow: auto">
-                        :info-data="info"
+                        <all-look
-                        :userId="infoData.userid"
+                            @change-params-date="changeParamsDate"
-                        class="tabs-d"
+                            v-if="activeKey === '0'"
-                    />
+                            :info-data="info"
-                    <heart-rate v-if="activeKey === '1'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
+                            :userId="infoData?.userid"
-                    <blood-oxygen v-if="activeKey === '2'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
+                            class="tabs-d"
-                    <pressure v-if="activeKey === '3'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
+                        />
-                    <sleep v-if="activeKey === '4'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
+                        <heart-rate v-if="activeKey === '1'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
-                    <temperature v-if="activeKey === '5'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
+                        <blood-oxygen v-if="activeKey === '2'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
-                    <motion v-if="activeKey === '6'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
+                        <pressure v-if="activeKey === '3'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
-                    <step-number v-if="activeKey === '7'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
+                        <sleep v-if="activeKey === '4'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
+                        <temperature v-if="activeKey === '5'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
+                        <motion v-if="activeKey === '6'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
+                        <step-number v-if="activeKey === '7'" :userId="infoData.userid" class="tabs-d" :keyType="activeKey" />
+                    </div>
                 </div>
             </div>
-        </div>
+        </template>
     </Dialog>
 </template>
 <script setup lang="ts">
@@ -55,12 +59,12 @@
 
     const visible = ref(false);
 
-    async function openModal(data) {
+    async function openModal(data = {}) {
         visible.value = true;
         activeKey.value = '0';
         paramsDate.value = '0';
         info.value = {};
-        infoData.value = data.record;
+        infoData.value = data;
         await getInfo();
     }
 
@@ -79,12 +83,19 @@
     }
 
     async function getInfo() {
-        await queryAllStatisticsApi({ type: paramsDate.value, userId: infoData.value.userid }).then((res) => {
+        await queryAllStatisticsApi({ type: paramsDate.value, userId: infoData.value?.userid || '1692086437685014530' }).then((res) => {
             info.value = res;
         });
     }
+
+    defineExpose({
+        openModal,
+        closeModal,
+    });
 </script>
 <style scoped lang="less">
+    @import './userInfoModal';
+
     :deep(.ant-tabs-nav-wrap) {
         justify-content: center;
     }

src/components/secondaryScreen/secondMap/components/watchListDialog.vue

@@ -11,22 +11,22 @@
                         :pagination="paginationProp"
                         :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
                     >
-                        <!--                        <template #bodyCell="{ column, record }">-->
+                        <template #bodyCell="{ column, record }">
-                        <!--                            <template v-if="column.key === 'operation'">-->
+                            <template v-if="column.key === 'operation'">
-                        <!--                                <span class="detail-data" @click="openUserInfoModal(record)">详细数据</span>-->
+                                <span class="detail-data" @click="openUserInfoModal(record)">详细数据</span>
-                        <!--                            </template>-->
+                            </template>
-                        <!--                        </template>-->
+                        </template>
                     </a-table>
                 </div>
             </template>
         </Dialog>
-        <!--        <UserInfoModal ref="userInfoModal"></UserInfoModal>-->
+        <UserInfoModal ref="userInfoModal"></UserInfoModal>
     </div>
 </template>
 <script setup lang="ts">
     import Dialog from '/@/components/dialog/Dialog.vue';
     import { ref } from 'vue';
-    // import UserInfoModal from '/@/components/secondaryScreen/secondMap/components/userInfoModal/userInfoModal.vue';
+    import UserInfoModal from '/@/components/secondaryScreen/secondMap/components/userInfoModal/userInfoModal.vue';
     import { columns } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
     import { getUserListByDeptId } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
     //分页相关
@@ -50,8 +50,8 @@
         getRecords(deptId.value);
     }
 
-    const dataSource = ref([]);
+    const dataSource = ref([[{ realName: 'nb' }]]);
-    const visible = ref(false);
+    const visible = ref(true);
 
     function openModal(id: string) {
         visible.value = true;
@@ -77,7 +77,7 @@
 
     function openUserInfoModal(item) {
         console.log(item);
-        // UserInfoModal.value.openModal(item.extData?.deptId);
+        userInfoModal.value.openModal(item);
     }
 
     defineExpose({

src/components/secondaryScreen/secondMap/secondMapApi.ts

@@ -38,6 +38,9 @@ export const mapListApi = (params) => get(Api.mapListApi, params);
 export const getUserListByDeptId = (params) => get(Api.getUserListByDeptId, params);
 export const queryAllStatisticsApi = (params) => get(Api.queryAllStatistics, params);
 export const userDataDayByYearApi = (params) => get(Api.userDataDayByYear, params);
+// 心率
+export const queryHeartRateStatisticsApi = (params: any) => post(Api.queryHeartRateStatistics, params);
+export const queryHeartRateStatisticsPageApi = (params: any) => post(Api.queryHeartRateStatisticsPage, params);
 // 血氧
 export const queryBloodOxygenStatisticsApi = (params: any) => post(Api.queryBloodOxygenStatistics, params);
 export const queryBloodOxygenStatisticsPageApi = (params: any) => post(Api.queryBloodOxygenStatisticsPage, params);

src/components/secondaryScreen/secondMap/secondMapHooks.ts

@@ -311,4 +311,17 @@ export const columns = [
     //     fixed: 'right',
     //     width: 80,
     // },
-];
+];
+
+export function useChangeTable() {
+    const refresh = ref(true)
+
+    function setRefresh() {
+        refresh.value = !refresh.value
+    }
+
+    return {
+        refresh,
+        setRefresh
+    }
+}