stmms-web/src/components/mark/Mark.vue

<template>
  <div class="my-container">
    <mark-header></mark-header>
    <mark-body></mark-body>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, toRefs } from "vue";
import {
  clearMarkTask,
  getGroup,
  getSetting,
  getStatus,
  getTask,
} from "@/api/markPage";
import { store } from "./store";
import MarkHeader from "./MarkHeader.vue";
import MarkBody from "./MarkBody.vue";
import { useTimers } from "@/setups/useTimers";

export default defineComponent({
  name: "Mark",
  components: {
    MarkHeader,
    MarkBody,
  },
  setup: () => {
    const { addInterval } = useTimers();

    async function updateMarkTask() {
      const settingRes = await clearMarkTask();
    }

    async function updateSetting() {
      const settingRes = await getSetting();
      store.setting = settingRes.data;
    }
    async function updateStatus() {
      const res = await getStatus();
      store.status = res.data;
    }
    async function updateGroups() {
      const res = await getGroup();
      store.groups = res.data;
    }
    async function updateTask() {
      const res = await getTask();
      if (res.data.libraryId) {
        store.tasks.push(res.data);
        store.currentTask = store.tasks[0];
      }
    }

    // 5秒更新一次tasks
    addInterval(() => {
      // console.log("get task", store.tasks);
      if (store.tasks.length < 3) {
        updateTask();
      }
    }, 5 * 1000);

    onMounted(async () => {
      await updateMarkTask();
      updateSetting();
      updateStatus();
      updateGroups();
      updateTask();
    });
    return { store };
  },
});
</script>

<style scoped>
.my-container {
  width: 100%;
}
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>