From 5cf32ce40e46a7b0624981243ccabcc058700784 Mon Sep 17 00:00:00 2001
From: zk <k12019@aliyun.com>
Date: Mon, 22 Jan 2024 15:49:00 +0800
Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=E5=A4=A7=E5=B1=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/body-d-left/bodyLeftHooks.ts   | 40 ++++++++++---
 src/components/body-d-left/oneL.vue           | 38 ++++++++++---
 src/components/body-d-left/threeL.vue         | 41 +++++++++----
 src/components/body-d-left/twoL.vue           | 25 +++++---
 src/components/body-d-right/oneR.vue          | 34 ++++-------
 src/components/body-d-right/twoR.vue          | 19 +++++--
 src/components/chinaMap/chinaMap.vue          |  6 --
 src/components/item-d/pieCharts.ts            |  4 +-
 .../screen-left/screenLeft.vue                | 40 ++++++++-----
 .../secondaryScreen/screen-right/oneR.vue     | 57 ++++++++++++-------
 .../screen-right/screenRightHooks.ts          | 12 +++-
 .../secondaryScreen/screen-right/threeR.vue   | 30 +++++++---
 .../secondaryScreen/screen-right/twoR.vue     | 33 ++++++-----
 src/hooks/autoRefresh/caching.ts              | 39 +++++++++++++
 src/views/index.vue                           | 10 ++--
 src/views/indexSon.vue                        |  8 +--
 16 files changed, 298 insertions(+), 138 deletions(-)
 create mode 100644 src/hooks/autoRefresh/caching.ts

diff --git a/src/components/body-d-left/bodyLeftHooks.ts b/src/components/body-d-left/bodyLeftHooks.ts
index a419b44..b38b8d0 100644
--- a/src/components/body-d-left/bodyLeftHooks.ts
+++ b/src/components/body-d-left/bodyLeftHooks.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref, unref } from 'vue';
 import * as echarts from 'echarts';
 
 export function useStatistics() {
@@ -25,6 +25,10 @@ export function useStatistics() {
         },
     ]);
 
+    function getStatistics() {
+        return unref(statistics);
+    }
+
     function setStatistics(data = {}) {
         statistics.value.forEach((item) => {
             const { key } = item;
@@ -34,6 +38,7 @@ export function useStatistics() {
 
     return {
         statistics,
+        getStatistics,
         setStatistics,
     };
 }
@@ -84,47 +89,52 @@ export const hospitalList = [
     {
         name: '泾河医院',
         key: 'zhigong',
-        value: '',
+        value: 0,
     },
     {
         name: '兴隆医院',
         key: 'tangdu',
-        value: '',
+        value: 0,
     },
     {
         name: '宁夏宝石花医院',
         key: 'yangehu',
-        value: '',
+        value: 0,
     },
     {
         name: '延安市人民医院',
         key: 'yananshi',
-        value: '',
+        value: 0,
     },
     {
         name: '西京医院',
         key: 'xijing',
-        value: '',
+        value: 0,
     },
     {
         name: '庆阳医院',
         key: 'changan',
-        value: '',
+        value: 0,
     },
 ];
 
 export function useHospitalList() {
     const radarList = ref(hospitalList);
 
-    function setRadarList(res) {
+    function getRadarList() {
+        return unref(radarList);
+    }
+
+    function setRadarList(res = {}) {
         radarList.value.forEach((item) => {
             const { key } = item;
-            item.value = res[key];
+            item.value = res[key] || 0;
         });
     }
 
     return {
         radarList,
+        getRadarList,
         setRadarList,
     };
 }
@@ -333,4 +343,16 @@ export function barOption(xData, ydata) {
             },
         ],
     };
+}
+
+/**
+ * @desc 值是否不为零
+ * @param list 数组
+ * @param key 元素属性
+ */
+export function allValueEmpty(key: string, list: any[]) {
+    if (!Array.isArray(list)) {
+        return false
+    }
+    return list.every((item: any) => item?.[key] != 0)
 }
\ No newline at end of file
diff --git a/src/components/body-d-left/oneL.vue b/src/components/body-d-left/oneL.vue
index 966bf9b..66162e5 100644
--- a/src/components/body-d-left/oneL.vue
+++ b/src/components/body-d-left/oneL.vue
@@ -22,14 +22,21 @@
     </div>
 </template>
 <script setup lang="ts">
-    import { onMounted, ref } from 'vue';
+    import { onMounted, ref, watch } from 'vue';
     import PublicTitle from '../publicTitle.vue';
     import { list } from './left.api';
-    import { timeTab, useSpin, useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { allValueEmpty, timeTab, useSpin, useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
     import { useDetailStore } from '/@/store/modules/detailData.ts';
+    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
 
+    const { LEFT_KEY1 } = caching;
+    const props = defineProps({
+        refreshState: {
+            type: Boolean,
+        },
+    });
     const typeTime = ref(timeTab);
-    const { statistics, setStatistics } = useStatistics();
+    const { statistics, setStatistics, getStatistics } = useStatistics();
     const selectIndex = ref(0);
     const selectVal = ref('1');
     const { setSpin, spinning } = useSpin();
@@ -39,6 +46,7 @@
     });
 
     const useDetail = useDetailStore();
+    const { setSession, getSession } = useSession();
 
     async function getList() {
         setSpin(true);
@@ -48,12 +56,21 @@
             if (code != 200 || !Array.isArray(result)) {
                 return;
             }
-            setStatistics(result[0]);
-            let { alerdyreceive = '', totalacceptance = '' } = result[0];
+            setSession(LEFT_KEY1, JSON.stringify(result[0]));
+            setValue(result[0]);
+        } catch {
+            const result = JSON.parse(getSession(LEFT_KEY1));
+            setValue(result);
+            setSpin(false);
+        }
+    }
+
+    function setValue(result) {
+        let { alerdyreceive = '', totalacceptance = '' } = result;
+        setStatistics(result);
+        if (alerdyreceive || totalacceptance) {
             useDetail.setAlerdyreceive(alerdyreceive);
             useDetail.setTotalacceptance(totalacceptance);
-        } catch {
-            setSpin(!spinning.value);
         }
     }
 
@@ -62,6 +79,13 @@
         selectVal.value = value;
         getList();
     }
+
+    watch(
+        () => props.refreshState,
+        () => {
+            getList();
+        }
+    );
 </script>
 <style scoped lang="less">
     .inner {
diff --git a/src/components/body-d-left/threeL.vue b/src/components/body-d-left/threeL.vue
index 34d3beb..a7bdc1d 100644
--- a/src/components/body-d-left/threeL.vue
+++ b/src/components/body-d-left/threeL.vue
@@ -14,23 +14,25 @@
             <div class="physical-container">
                 <a-spin :spinning="spinning" class="spin"></a-spin>
                 <div class="RadarCharts"></div>
-                <!--                <div class="physical-item" v-for="(item, i) in hospitalList" :key="i" :class="[i < 3 ? 'b1' : 'b2']">-->
-                <!--                    <div class="ct">-->
-                <!--                        <div class="value">{{ countData[item.key] || '/' }}</div>-->
-                <!--                        <div class="label">{{ item.title }}</div>-->
-                <!--                    </div>-->
-                <!--                </div>-->
             </div>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
-    import { onMounted, ref } from 'vue';
+    import { onMounted, ref, watch } from 'vue';
     import PublicTitle from '../publicTitle.vue';
     import { getDetail } from '/@/components/body-d-left/left.api';
-    import { hospitalList, useSpin, timeTab, useHospitalList, radarCharts } from '/@/components/body-d-left/bodyLeftHooks';
+    import { useSpin, timeTab, useHospitalList, radarCharts, allValueEmpty } from '/@/components/body-d-left/bodyLeftHooks';
+    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
     import * as echarts from 'echarts';
 
+    const props = defineProps({
+        refreshState: {
+            type: Boolean,
+        },
+    });
+    const { setSession, getSession } = useSession();
+    const { LEFT_KEY3 } = caching;
     const { setSpin, spinning } = useSpin();
     const selectIndex = ref(0);
 
@@ -46,23 +48,31 @@
         getList();
     });
 
-    const { radarList, setRadarList } = useHospitalList();
+    const { radarList, setRadarList, getRadarList } = useHospitalList();
 
     async function getList() {
         setSpin(true);
         try {
             const { code, result } = (await getDetail({})) || {};
             setSpin(!spinning.value);
-            if (code != 200) {
+            if (code != 200 || !Array.isArray(result)) {
                 return;
             }
-            setRadarList(result[0]);
-            initChart();
+            setSession(LEFT_KEY3, JSON.stringify(result[0]));
+            setValue(result[0]);
         } catch {
+            const result = JSON.parse(getSession(LEFT_KEY3));
+            setValue(result);
             setSpin(!spinning.value);
         }
     }
 
+    function setValue(result) {
+        setRadarList(result);
+        const everyEmpty = allValueEmpty('value', getRadarList());
+        everyEmpty && initChart();
+    }
+
     function initChart() {
         const myChart = echarts.init(document.querySelector('.RadarCharts'));
         let countList = radarList.value.map((item) => item.value);
@@ -74,6 +84,13 @@
             myChart.resize();
         });
     }
+
+    watch(
+        () => props.refreshState,
+        () => {
+            getList();
+        }
+    );
 </script>
 <style lang="less" scoped>
     .inner {
diff --git a/src/components/body-d-left/twoL.vue b/src/components/body-d-left/twoL.vue
index 0869932..cc5a7fd 100644
--- a/src/components/body-d-left/twoL.vue
+++ b/src/components/body-d-left/twoL.vue
@@ -29,7 +29,15 @@
     import * as echarts from 'echarts';
     import { complaint, getDepart } from '/@/components/body-d-left/left.api.ts';
     import { useSpin, barOption, sexType } from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
 
+    const props = defineProps({
+        refreshState: {
+            type: Boolean,
+        },
+    });
+    const { setSession, getSession } = useSession();
+    const { LEFT_KEY2 } = caching;
     const { setSpin, spinning } = useSpin();
 
     const sexIndex = ref(0);
@@ -71,19 +79,22 @@
             if (code != 200) {
                 return;
             }
-            if (Array.isArray(result) && result.length == 0) {
-                return EmptyChart();
+            if (Array.isArray(result) && result.length > 0) {
+                const xData = result.map((item) => item.name);
+                const yData = result.map((item) => item.count);
+                setSession(LEFT_KEY2, JSON.stringify({ xData, yData }));
+                initChart(xData, yData);
+            } else {
+                EmptyChart();
             }
-            const xData = result.map((item) => item.name);
-            const yData = result.map((item) => item.count);
-            initChart(xData, yData);
         } catch {
             setSpin(false);
-            EmptyChart();
+            const { xData, yData } = JSON.parse(getSession(LEFT_KEY2));
+            initChart(xData, yData);
         }
     }
 
-    watch([selectValue, sexIndex], () => {
+    watch([selectValue, sexIndex, () => props.refreshState], () => {
         getList();
     });
 
diff --git a/src/components/body-d-right/oneR.vue b/src/components/body-d-right/oneR.vue
index 10239dd..b3e8299 100644
--- a/src/components/body-d-right/oneR.vue
+++ b/src/components/body-d-right/oneR.vue
@@ -18,13 +18,6 @@
                 </div>
             </vue3-seamless-scroll>
         </div>
-        <!--        <Dialog :openVis="open" width="65%" title="健康终端报警列表" @close="handleClose">-->
-        <!--            <template #container>-->
-        <!--                <div class="dialog-con">-->
-        <!--                    <a-table :dataSource="dataSource" :columns="columns" :scroll="{ y: '56vh' }" :pagination="false" />-->
-        <!--                </div>-->
-        <!--            </template>-->
-        <!--        </Dialog>-->
         <Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
             <template #container>
                 <div class="police-con">
@@ -60,19 +53,20 @@
 <script setup lang="ts">
     import { onMounted, ref } from 'vue';
     import { useRouter } from 'vue-router';
-    import $bus from '/@/utils/bus.ts';
-    import { columns } from '/@/components/body-d-right/bodyRightHooks.ts';
     import PublicTitle from '/@/components/publicTitle.vue';
     import Dialog from '/@/components/dialog/Dialog.vue';
     import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
     import { getMonitorList } from '/@/components/body-d-right/right.api.ts';
     import { Map } from '/@/assets/mapUtils/map.ts';
+    import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
 
     const router = useRouter();
+    const { setSession, getSession } = useSession();
+    const { RIGHT_KEY1 } = caching;
+
     const classOption = ref({
         step: 0.3, // 速度
     });
-    const open = ref<boolean>(false);
     const openInfor = ref<boolean>(false);
     const userInfo = ref({
         realName: '',
@@ -83,15 +77,6 @@
         address: '',
     });
 
-    const dataSource = ref([
-        {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-        },
-    ]);
-
     /**
      * @desc open员工信息
      */
@@ -119,9 +104,14 @@
     const scrollList = ref([]);
 
     async function getScrollList() {
-        const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1 });
-        if (code == 200) {
-            scrollList.value = result.records;
+        try {
+            const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1 });
+            if (code == 200) {
+                setSession(RIGHT_KEY1, JSON.stringify(result.records));
+                scrollList.value = result.records;
+            }
+        } catch {
+            scrollList.value = JSON.parse(getSession(RIGHT_KEY1));
         }
     }
 
diff --git a/src/components/body-d-right/twoR.vue b/src/components/body-d-right/twoR.vue
index fa557ff..241686a 100644
--- a/src/components/body-d-right/twoR.vue
+++ b/src/components/body-d-right/twoR.vue
@@ -11,7 +11,10 @@
     import { getHealthDataList } from '/@/components/body-d-right/right.api';
     import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
     import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
+    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
 
+    const { setSession, getSession } = useSession();
+    const { RIGHT_KEY2 } = caching;
     const { setSpin, spinning } = useSpin();
     const healthChart = ref<HTMLElement>();
     onMounted(() => {
@@ -26,15 +29,21 @@
             if (code != 200) {
                 return;
             }
-            setHealth(result);
-            const yData = unref(getValue);
-            let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
-            initChart(unref(healthData), total);
+            setSession(RIGHT_KEY2, JSON.stringify(result));
+            setValue(result);
         } catch {
-            initChart(unref(healthData), 0);
+            const result = JSON.parse(getSession(RIGHT_KEY2));
+            setValue(result);
         }
     }
 
+    function setValue(result) {
+        setHealth(result);
+        const yData = unref(getValue);
+        let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
+        initChart(unref(healthData), total);
+    }
+
     function initChart(chartData, total) {
         let myChart = echarts.init(healthChart.value);
         let options = ringOption(chartData, total);
diff --git a/src/components/chinaMap/chinaMap.vue b/src/components/chinaMap/chinaMap.vue
index 13ebf6a..55c9390 100644
--- a/src/components/chinaMap/chinaMap.vue
+++ b/src/components/chinaMap/chinaMap.vue
@@ -68,12 +68,6 @@
     import { useDetailStore } from '/@/store/modules/detailData.ts';
 
     const useDetail = useDetailStore();
-
-    function test() {
-        Map.clearActiveHospital();
-        console.log('清空了');
-    }
-
     const formState = ref({
         start: '',
         end: '',
diff --git a/src/components/item-d/pieCharts.ts b/src/components/item-d/pieCharts.ts
index 9c3c1d1..f1ff8c2 100644
--- a/src/components/item-d/pieCharts.ts
+++ b/src/components/item-d/pieCharts.ts
@@ -1,10 +1,10 @@
 // 步数
 import {visibleChartLabel} from "/@/utils/utils.ts";
 
-export function screenPie(chartData, total, color) {
+export function screenPie(chartData) {
     const data = visibleChartLabel(chartData)
     return {
-        color: color,
+        color: ['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C'],
         tooltip: {
             trigger: 'item',
             show: true,
diff --git a/src/components/secondaryScreen/screen-left/screenLeft.vue b/src/components/secondaryScreen/screen-left/screenLeft.vue
index e9b33a1..b4a1fb4 100644
--- a/src/components/secondaryScreen/screen-left/screenLeft.vue
+++ b/src/components/secondaryScreen/screen-left/screenLeft.vue
@@ -10,7 +10,10 @@
     import ItemD from '/@/components/item-d/item-d.vue';
     import { getWatchDataByOrgCode } from '/@/components/secondaryScreen/commonApi.ts';
     import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
 
+    const { setSession, getSession } = useSession();
+    const { PAGE2_LEFT } = caching;
     const { spinning, setSpin } = useSpin();
     const dataList = ref([
         {
@@ -74,23 +77,32 @@
     });
 
     async function init() {
-        const { code, result } = await getWatchDataByOrgCode(props);
-        // debugger;
-        if (code == 200) {
-            let data = cloneDeep(dataList.value);
-            data.forEach((item) => {
-                let resData = result.find((v) => v.type == item.type);
-                item.userCount = resData.userCount;
-                item.data.forEach((val) => {
-                    val.value = resData[val.key];
-                });
-            });
-
-            dataList.value = data;
-            setSpin(!spinning.value);
+        setSpin(true);
+        try {
+            const { code, result } = await getWatchDataByOrgCode(props);
+            if (code == 200) {
+                setValue(result);
+                setSession(PAGE2_LEFT, JSON.stringify(result));
+            }
+        } catch {
+            const result = JSON.parse(getSession(PAGE2_LEFT));
+            setValue(result);
         }
     }
 
+    function setValue(result) {
+        setSpin(false);
+        let data = cloneDeep(dataList.value);
+        data.forEach((item) => {
+            let resData = result.find((v) => v.type == item.type);
+            item.userCount = resData.userCount;
+            item.data.forEach((val) => {
+                val.value = resData[val.key];
+            });
+        });
+        dataList.value = data;
+    }
+
     defineExpose({
         init,
     });
diff --git a/src/components/secondaryScreen/screen-right/oneR.vue b/src/components/secondaryScreen/screen-right/oneR.vue
index d67afd2..ceb60f2 100644
--- a/src/components/secondaryScreen/screen-right/oneR.vue
+++ b/src/components/secondaryScreen/screen-right/oneR.vue
@@ -12,10 +12,13 @@
 <script setup lang="ts">
     import PublicTitle from '/@/components/publicTitle.vue';
     import * as echarts from 'echarts';
-    import { ref, onMounted, watch } from 'vue';
+    import { ref, watch } from 'vue';
     import { formatStr, sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
     import { getSleep } from '/@/components/secondaryScreen/commonApi.ts';
+    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
 
+    const { setSession, getSession } = useSession();
+    const { PAGE2_RIGHT1 } = caching;
     const props = defineProps({
         orgCode: String,
         type: String,
@@ -26,7 +29,7 @@
         () => {
             init();
         },
-        { immediate: true }
+        { immediate: true, deep: true }
     );
     const nums = ref({
         avgShort: '',
@@ -35,30 +38,40 @@
     });
 
     async function init() {
-        const params = {
-            orgCode: props.orgCode,
-            type: props.type,
-        };
-        const { code, result } = await getSleep(params);
-        if (code == 200 && result.length > 0) {
-            let time = result?.map((item) => item.dataDate);
-            let short = result?.map((item) => item.avgShortDuration);
-            let long = result?.map((item) => item.avgLongDuration);
-            let awake = result?.map((item) => item.awakeDuration);
-            let avg = result?.map((item) => item.averageDuration);
-            initChart({ time, short, long, awake, type: props.type });
-            const len = time.length;
-            if (!len > 0) {
-                return;
-            }
-            nums.value = {
-                avgShort: formatStr({ list: short, len }),
-                avgLong: formatStr({ list: long, len }),
-                avg: formatStr({ list: avg, len }), //平均
+        try {
+            const params = {
+                orgCode: props.orgCode,
+                type: props.type,
             };
+            const { code, result } = await getSleep(params);
+            if (code == 200 && result.length > 0) {
+                setSession(PAGE2_RIGHT1, JSON.stringify(result));
+                setValue(result);
+            }
+        } catch {
+            const result = JSON.parse(getSession(PAGE2_RIGHT1));
+            setValue(result);
         }
     }
 
+    function setValue(result) {
+        let time = result?.map((item) => item.dataDate);
+        let short = result?.map((item) => item.avgShortDuration);
+        let long = result?.map((item) => item.avgLongDuration);
+        let awake = result?.map((item) => item.awakeDuration);
+        let avg = result?.map((item) => item.averageDuration);
+        initChart({ time, short, long, awake, type: props.type });
+        const len = time.length;
+        if (!len > 0) {
+            return;
+        }
+        nums.value = {
+            avgShort: formatStr({ list: short, len }),
+            avgLong: formatStr({ list: long, len }),
+            avg: formatStr({ list: avg, len }), //平均
+        };
+    }
+
     function initChart({ time, short, long, awake, type }) {
         let myChart = echarts.init(sleepChart.value);
         let options = sleepCharts({ time, short, long, awake, type });
diff --git a/src/components/secondaryScreen/screen-right/screenRightHooks.ts b/src/components/secondaryScreen/screen-right/screenRightHooks.ts
index 36db22b..529436f 100644
--- a/src/components/secondaryScreen/screen-right/screenRightHooks.ts
+++ b/src/components/secondaryScreen/screen-right/screenRightHooks.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref, unref } from 'vue';
 import dayjs from 'dayjs';
 import { minuteToStr } from '/@/utils/utils.ts';
 
@@ -170,10 +170,20 @@ export function useStep() {
         total.value = data?.userCount;
     }
 
+    function getStepData() {
+        return unref(stepData);
+    }
+
+    function getTotal() {
+        return unref(total);
+    }
+
     return {
         total,
         stepData,
         setStep,
+        getStepData,
+        getTotal,
     };
 }
 
diff --git a/src/components/secondaryScreen/screen-right/threeR.vue b/src/components/secondaryScreen/screen-right/threeR.vue
index 9f005dd..2e8d504 100644
--- a/src/components/secondaryScreen/screen-right/threeR.vue
+++ b/src/components/secondaryScreen/screen-right/threeR.vue
@@ -31,11 +31,15 @@
     import { earlyWarning } from '/@/utils/busConstant.ts';
     import { useRefresh } from '/@/hooks/autoRefresh';
     import { PAGE_SWITCH } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
+    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
 
     const props = defineProps({
         orgCode: String,
         type: String,
     });
+    const { setSession, getSession } = useSession();
+    const { PAGE2_RIGHT3 } = caching;
+
     const tableHeight = ref(0);
     const dataSource = ref([]);
     const pagination = ref({
@@ -60,7 +64,7 @@
             window.addEventListener('resize', setHeight);
             timer.value && clearInterval(timer.value);
         },
-        { immediate: true }
+        { immediate: true, deep: true }
     );
 
     onUnmounted(() => {
@@ -74,16 +78,26 @@
     }
 
     async function init(page) {
-        const { pageSize } = pagination.value;
-        const { code, result } = await getMonitorList({ pageSize, pageNo: page, orgCode: props.orgCode });
-        if (code == 200) {
-            dataSource.value = result.records;
-            pagination.value.total = result.total;
-            pages.value = result.pages;
-            pagination.value.current = page;
+        try {
+            const { pageSize } = pagination.value;
+            const { code, result } = await getMonitorList({ pageSize, pageNo: page, orgCode: props.orgCode });
+            if (code == 200) {
+                setSession(PAGE2_RIGHT3, JSON.stringify({ page, result }));
+                setValue(result, page);
+            }
+        } catch {
+            const { result, page } = JSON.parse(getSession(PAGE2_RIGHT3));
+            setValue(result, page);
         }
     }
 
+    function setValue(result, page) {
+        dataSource.value = result.records;
+        pagination.value.total = result.total;
+        pages.value = result.pages;
+        pagination.value.current = page;
+    }
+
     function pageChange(page, pageS) {
         pagination.value.current = page;
         pagination.value.pageSize = pageS;
diff --git a/src/components/secondaryScreen/screen-right/twoR.vue b/src/components/secondaryScreen/screen-right/twoR.vue
index 93984a3..edccf16 100644
--- a/src/components/secondaryScreen/screen-right/twoR.vue
+++ b/src/components/secondaryScreen/screen-right/twoR.vue
@@ -9,29 +9,30 @@
     </div>
 </template>
 <script setup lang="ts">
-    import { ref, unref, onMounted, watch } from 'vue';
+    import { ref, watch } from 'vue';
     import * as echarts from 'echarts';
     import PublicTitle from '/@/components/publicTitle.vue';
     import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
     import { useStep } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
     import { screenPie } from '/@/components/item-d/pieCharts.ts';
     import { getStep } from '/@/components/secondaryScreen/commonApi.ts';
+    import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
 
     const props = defineProps({
         orgCode: String,
         type: String,
     });
+    const { setSession, getSession } = useSession();
+    const { PAGE2_RIGHT2 } = caching;
     watch(
         props,
         () => {
             init();
         },
-        { immediate: true }
+        { immediate: true, deep: true }
     );
-    const { setSpin, spinning } = useSpin();
     const healthChart = ref<HTMLElement>();
-    const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
-    const { stepData, total, setStep } = useStep();
+    const { total, setStep, getStepData } = useStep();
 
     async function init() {
         try {
@@ -40,21 +41,25 @@
                 type: props.type,
             };
             const { code, result } = await getStep(params);
-            setSpin(true);
-            if (code != 200) {
-                return initChart(unref(stepData), 0);
+            if (code == 200) {
+                setValue(result);
+                setSession(PAGE2_RIGHT2, JSON.stringify(result));
             }
-            setStep(result);
-
-            initChart(unref(stepData), '15000');
         } catch {
-            initChart(unref(stepData), 0);
+            const result = JSON.parse(getSession(PAGE2_RIGHT2));
+            setValue(result);
         }
     }
 
-    function initChart(chartData, total) {
+    function setValue(result) {
+        setStep(result);
+        initChart(getStepData());
+    }
+
+    function initChart(chartData) {
+        // debugger;
         let myChart = echarts.init(healthChart.value);
-        let options = screenPie(chartData, total, color.value, '{c}');
+        let options = screenPie(chartData);
         myChart.setOption(options);
         window.addEventListener('resize', () => {
             myChart.resize();
diff --git a/src/hooks/autoRefresh/caching.ts b/src/hooks/autoRefresh/caching.ts
new file mode 100644
index 0000000..464667d
--- /dev/null
+++ b/src/hooks/autoRefresh/caching.ts
@@ -0,0 +1,39 @@
+// 缓存key
+export const caching = {
+    MOUNTED_COUNT: 'MOUNTED_COUNT',
+    //服务详情数据
+    LEFT_KEY1: 'LEFT_KEY1',
+    //主诉分类
+    LEFT_KEY2: 'LEFT_KEY2',
+    //体检数据
+    LEFT_KEY3: 'LEFT_KEY3',
+    //健康终端报警
+    RIGHT_KEY1: 'RIGHT_KEY1',
+    //长庆油田大病人数
+    RIGHT_KEY2: 'RIGHT_KEY2',
+    //心血管监测-心率-压力-血氧-体温
+    PAGE2_LEFT: 'PAGE2_LEFT',
+    //心血管监测-睡眠
+    PAGE2_RIGHT1: 'PAGE2_RIGHT1',
+    //心血管监测-步数
+    PAGE2_RIGHT2: 'PAGE2_RIGHT2',
+    //心血管监测-预警
+    PAGE2_RIGHT3: 'PAGE2_RIGHT3',
+
+};
+
+export function useSession() {
+    function getSession(key: string) {
+        return localStorage.getItem(key)
+    }
+
+    function setSession(key: string, value: any) {
+        localStorage.setItem(key, value)
+    }
+
+
+    return {
+        getSession,
+        setSession
+    }
+}
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index 55b8d79..0242a65 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -9,16 +9,16 @@
         </div>
         <div class="body-d">
             <div class="body-d-left">
-                <one-l :key="refreshState" />
-                <two-l :key="refreshState" />
-                <three-l :key="refreshState" />
+                <one-l :refreshState="refreshState" />
+                <two-l :refreshState="refreshState" />
+                <three-l :refreshState="refreshState" />
             </div>
             <div class="body-d-middle">
                 <china-map />
             </div>
             <div class="body-d-right">
-                <one-r :key="refreshState" />
-                <two-r :key="refreshState" />
+                <one-r :refreshState="refreshState" />
+                <two-r :refreshState="refreshState" />
                 <three-r :key="refreshState" />
             </div>
         </div>
diff --git a/src/views/indexSon.vue b/src/views/indexSon.vue
index 133c34a..5cad413 100644
--- a/src/views/indexSon.vue
+++ b/src/views/indexSon.vue
@@ -14,7 +14,7 @@
         </div>
         <div class="body-d">
             <div class="body-d-left">
-                <screen-left :orgCode="orgCode" :type="type" />
+                <screen-left :orgCode="orgCode" :type="type" :refreshState="refreshState" />
             </div>
             <div class="body-d-middle">
                 <SecondMap :orgCode="orgCode" :type="type">
@@ -31,9 +31,9 @@
                 </SecondMap>
             </div>
             <div class="body-d-right">
-                <one-r :orgCode="orgCode" :type="type" :key="refreshState" />
-                <two-r :orgCode="orgCode" :type="type" :key="refreshState" />
-                <three-r :orgCode="orgCode" :type="type" />
+                <one-r :orgCode="orgCode" :type="type" :refreshState="refreshState" />
+                <two-r :orgCode="orgCode" :type="type" :refreshState="refreshState" />
+                <three-r :orgCode="orgCode" :type="type" :refreshState="refreshState" />
             </div>
         </div>
         <div class="bottom-d"></div>