75 lines
1.9 KiB
Vue
75 lines
1.9 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" v-text="apName" />
|
|
<div v-if="stateOfTask.result === undefined">
|
|
<span class="block w-full" v-text="stateOfTask.state" />
|
|
<progress
|
|
class="block w-full"
|
|
:max="stateOfTask.total"
|
|
:value="stateOfTask.current"
|
|
></progress>
|
|
<span class="block w-full" v-text="stateOfTask.status" />
|
|
</div>
|
|
<div v-else class="w-full flex">
|
|
<span class="flex-1 mr-2"
|
|
>SwitchPortID {{ stateOfTask.result.switchportid }}</span
|
|
>
|
|
<span class="flex-1 mr-2"
|
|
>New SwitchPortID {{ stateOfTask.result.switchportid_new }}</span
|
|
>
|
|
<span class="flex-1 mr-2"
|
|
>UserPortID {{ stateOfTask.result.userportid }}</span
|
|
>
|
|
<span class="flex-1 mr-2"
|
|
>SwitchPortID {{ stateOfTask.result.userportid_new }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { reactive, toRefs, defineComponent } from "vue";
|
|
import { useIntervalFn } from "@vueuse/core";
|
|
import { getStateOfTask, StateOfTask } from "../api";
|
|
|
|
export default defineComponent({
|
|
name: "VTaskState",
|
|
props: {
|
|
taskID: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
apName: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props: { taskID: string; apName: string }) {
|
|
const { taskID, apName } = toRefs(props);
|
|
|
|
const stateOfTask = reactive<StateOfTask>({
|
|
state: "",
|
|
current: "",
|
|
total: 0,
|
|
status: "",
|
|
});
|
|
|
|
const { pause } = useIntervalFn(
|
|
async () => {
|
|
const s = await getStateOfTask(taskID.value);
|
|
Object.assign(stateOfTask, s);
|
|
if (s.result !== undefined) pause();
|
|
},
|
|
300,
|
|
true
|
|
);
|
|
|
|
return { stateOfTask, apName };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|