71 lines
1.7 KiB
Vue
71 lines
1.7 KiB
Vue
<template>
|
|
<div
|
|
class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg text-left"
|
|
>
|
|
<span class="block w-full">{{ apName }}</span>
|
|
<div v-if="state.result === undefined">
|
|
<span class="block w-full">{{ state.state }}</span>
|
|
<progress
|
|
class="block w-full"
|
|
:max="state.total"
|
|
:value="state.current"
|
|
></progress>
|
|
<span class="block w-full">{{ state.status }}</span>
|
|
</div>
|
|
<div v-else class="w-full flex">
|
|
<span class="flex-1 mr-2"
|
|
>SwitchPortID {{ state.result.switchportid }}</span
|
|
>
|
|
<span class="flex-1 mr-2"
|
|
>New SwitchPortID {{ state.result.switchportid_new }}</span
|
|
>
|
|
<span class="flex-1 mr-2">UserPortID {{ state.result.userportid }}</span>
|
|
<span class="flex-1 mr-2"
|
|
>SwitchPortID {{ state.result.userportid_new }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { reactive, toRefs } from "vue";
|
|
import { useIntervalFn } from "@vueuse/core";
|
|
import { getStateOfTask, StateOfTask } from "../api";
|
|
|
|
export default {
|
|
name: "VTaskState",
|
|
emits: ["finished"],
|
|
props: {
|
|
taskID: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
apName: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props: { taskID: string }) {
|
|
const { taskID } = toRefs(props);
|
|
|
|
const state = reactive<StateOfTask>({
|
|
state: "",
|
|
current: "",
|
|
total: undefined,
|
|
result: undefined,
|
|
status: null,
|
|
});
|
|
|
|
const { pause, resume } = useIntervalFn(async () => {
|
|
const s = await getStateOfTask(taskID.value);
|
|
Object.assign(state, s);
|
|
if (s.result !== undefined) pause();
|
|
}, 300);
|
|
|
|
return { state };
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|