js-wlg-app/src/App.vue

<template>
  <el-config-provider :locale="zhCn">
    <router-view
      v-slot="{ Component }"
      @click="clearTimer"
      @touch="clearTimer"
      @touchmove="clearTimer"
      @mousemove="clearTimer"
    >
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>

    <ScreenSavers
      v-if="showScreenSavers && screenList.length > 0 && store.getters.isOnline"
      :autoPlay="autoPlay"
      :list="screenList"
      @onClick="closeScreen"
    />
  </el-config-provider>
</template>

<script lang="ts" setup>
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { onMounted, ref } from "vue";
import { ScreenSavers } from "@/components";
import { getScreenConfigApi } from "./api";
import { GetScreenConfigApiResponse } from "./api/types";
import { useStore } from "vuex";
import { isOnlineFn } from "./utils";

const store = useStore();
const showScreenSavers = ref(false);
const showScreenTime = ref(60 * 10);
const autoPlay = ref(false);
const screenList = ref<GetScreenConfigApiResponse["img"]>([]);

onMounted(() => {
  getOnline().then((state) => {
    state && getScreenConfig();
  });

  setInterval(() => {
    getOnline().then((state) => {
      state && getScreenConfig();
    });
  }, 5000);

  setInterval(() => {
    store.commit("setTime", store.state.time + 1);
    if (store.state.time >= showScreenTime.value && !showScreenSavers.value) {
      showScreenSavers.value = true;
    }
  }, 1000);
});

const getOnline = async () => {
  const state = await isOnlineFn();
  console.log("当前接口状态：", state);
  store.commit("setIsOnline", state);
  return state;
};

const clearTimer = () => {
  store.dispatch("clearTime");
};
const closeScreen = () => {
  clearTimer();
  showScreenSavers.value = false;
};

const getScreenConfig = async () => {
  const { data } = await getScreenConfigApi();
  const c = JSON.parse(data.config.content);
  autoPlay.value = c.autoPlay === "true";
  showScreenTime.value = Number(c.time);
  screenList.value = data.img
    .filter((i) => i.display === 1)
    .map((i) => ({
      ...i,
      thumb: window.VUE_APP_BACKEND_URL + i.thumb,
    }));
};
</script>

<style lang="scss">
@import url("./App.scss");
</style>