设置永久缓存

chenyc

2025-01-15 fb3166a52e54543530bf9b9be21306a83df3c8d3

设置永久缓存

 src/utils/storage.ts

New file
@@ -0,0 +1,33 @@
/**
 * window.localStorage 浏览器永久缓存
 * @method set 设置永久缓存
 * @method get 获取永久缓存
 * @method remove 移除永久缓存
 * @method clear 移除全部永久缓存
 */
const __NEXT_NAME__='deviceView'
export const Local = {
    // 查看 v2.4.3版本更新日志
    setKey(key: string) {
        // @ts-ignore
        return `${__NEXT_NAME__}:${key}`;
    },
    // 设置永久缓存
    set<T>(key: string, val: T) {
        window.localStorage.setItem(Local.setKey(key), JSON.stringify(val));
    },
    // 获取永久缓存
    get(key: string) {
        let json = <string>window.localStorage.getItem(Local.setKey(key));
        return JSON.parse(json);
    },
    // 移除永久缓存
    remove(key: string) {
        window.localStorage.removeItem(Local.setKey(key));
    },
    // 移除全部永久缓存
    clear() {
        window.localStorage.clear();
    },
 };
 

 src/views/Home.vue

@@ -10,7 +10,6 @@
    >
      <el-row
        v-if="deviceData.患者姓名 !== ''"
        @click="showgaojing"
        :style="{ backgroundColor: background }"
        :class="{ blink2: isbaioji }"
        style="
@@ -456,6 +455,37 @@
        </el-col>
      </el-row>
    </div>
    <!-- 设置按钮 -->
    <button id="settingsButton" class="fixed-bottom-right" @click="centerDialogVisible=true">⚙️</button>
    <el-dialog
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      title="提示"
      v-model="centerDialogVisible"
      width="500px"
      center>
      <span>
        <el-form label-position="left" label-width="auto" style="max-width: 600px">
          <el-space fill>
            <el-alert type="warning" show-icon :closable="false">
              <p>"请输入设备编号后才能使用不然无法定位到数据来源:</p>
            </el-alert>
            <el-form-item label="设备编号">
              <el-input v-model="deviceCode" />
            </el-form-item>
          </el-space>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveSet">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  <script lang="ts" setup>
@@ -463,11 +493,14 @@
import maibo from '../img/maibo.png'
import xueya from '../img/xueya.png'
import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
import { Local } from '../utils/storage';
import * as echarts from "echarts";
import { jgTime4 } from "../utils/formatTime";
const { proxy } = getCurrentInstance() as any;
// 在需要使用的组件中引入
import { ChatDotSquare } from '@element-plus/icons-vue';
import { ElMessage } from "element-plus";
const deviceCode=ref('')
const deviceData = ref({
  iot_传输时间: "2025-01-10 19:15:24",
  iot_当前脱水量: 2.04,
@@ -789,7 +822,21 @@
    deep: true,
  }
);
onMounted(() => {});
onMounted(() => {
  let devcieCode=Local.get('devcieCode')
  if(devcieCode){
    deviceCode.value=devcieCode
  }else{
    centerDialogVisible.value=true
  }
});
const saveSet=()=>{
  if(deviceCode.value){
    Local.set('devcieCode',deviceCode.value)
  }else{
    ElMessage.warning('请先输入设备编号')
  }
}
watch(
  () => deviceData.value.设备变化,
  () => {
@@ -802,18 +849,18 @@
  }
);

const showgaojing = () => {
  if (deviceData.value.监测血压是否低于百分之30) {
    centerDialogVisible.value = true;
    iscomfig.value = true;
    textbaojing.value = `${deviceData.value.设备名称}床，${deviceData.value.患者姓名} 监测血压下降至上机血压30%了，请及时处理`;
  }
  if (deviceData.value.跨膜压是否大于200) {
    centerDialogVisible.value = true;
    iscomfig.value = true;
    textbaojing.value = `${deviceData.value.设备名称}床，${deviceData.value.患者姓名} 跨膜压过高请及时处理`;
  }
};
// const showgaojing = () => {
//   if (deviceData.value.监测血压是否低于百分之30) {
//     centerDialogVisible.value = true;
//     iscomfig.value = true;
//     textbaojing.value = `${deviceData.value.设备名称}床，${deviceData.value.患者姓名} 监测血压下降至上机血压30%了，请及时处理`;
//   }
//   if (deviceData.value.跨膜压是否大于200) {
//     centerDialogVisible.value = true;
//     iscomfig.value = true;
//     textbaojing.value = `${deviceData.value.设备名称}床，${deviceData.value.患者姓名} 跨膜压过高请及时处理`;
//   }
// };
const initTupiao = () => {
  if (deviceData.value.患者姓名 !== "") {
    const seriesData = [
@@ -1290,4 +1337,23 @@
  font-weight: 600;
  /* 其他样式 */
}
/* 固定定位设置按钮 */
.fixed-bottom-right {
  position: fixed;
  bottom: 20px; /* 距离底部的距离 */
  right: 20px;  /* 距离右侧的距离 */
  z-index: 1000; /* 确保按钮位于页面内容之上 */
  padding: 5px 10px;
  background-color: #fbfdff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

/* 鼠标悬停时改变颜色 */
.fixed-bottom-right:hover {
  background-color: #0056b3;
}
</style>