You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
161 lines
3.4 KiB
161 lines
3.4 KiB
<script lang="ts" setup>
|
|
import { defineOptions, onMounted, ref, onBeforeUnmount } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
|
|
defineOptions({ name: "ShortcutModal" });
|
|
|
|
const emit = defineEmits<{
|
|
(e: "refresh", value: any);
|
|
(e: "cancel", value: any);
|
|
}>();
|
|
|
|
const show = ref(false);
|
|
const isFold = ref(false);
|
|
const router = useRouter();
|
|
|
|
const cardStyle = {
|
|
width: "29vw",
|
|
"--n-padding-bottom": "10px",
|
|
"--n-padding-left": "10px",
|
|
};
|
|
function toggle() {
|
|
isFold.value = !isFold.value;
|
|
}
|
|
function showModal() {
|
|
show.value = true;
|
|
}
|
|
function closeModal() {
|
|
show.value = false;
|
|
}
|
|
function refresh() {
|
|
emit("refresh", true);
|
|
}
|
|
function cancel() {
|
|
closeModal();
|
|
emit("cancel", true);
|
|
}
|
|
const time = ref();
|
|
onMounted(() => {
|
|
time.value = setInterval(() => {
|
|
// console.log("00000000-----------");
|
|
show.value && refresh();
|
|
}, 5000);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
clearInterval(time.value);
|
|
time.value = null;
|
|
});
|
|
defineExpose({
|
|
showModal,
|
|
closeModal,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="removeMask">
|
|
<!-- <n-modal v-model:show="show" :show-mask="false" :mask-closable="false" transform-origin="center" style="position: fixed;right: 0;bottom: 0;"> -->
|
|
<div
|
|
v-if="show"
|
|
style="
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
float: left;
|
|
z-index: 999;
|
|
width: 360px;
|
|
height: 157px;
|
|
"
|
|
>
|
|
<n-card
|
|
:style="cardStyle"
|
|
:bordered="false"
|
|
size="huge"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
style="padding: 8px 8px 0 8px"
|
|
>
|
|
<div class="wrapper">
|
|
<div class="title">查重进度</div>
|
|
<div class="icon-list">
|
|
<svg-icon
|
|
size="16"
|
|
name="refresh"
|
|
@click="refresh"
|
|
style="margin-right: 16px; cursor: pointer"
|
|
/>
|
|
<svg-icon
|
|
v-show="!isFold"
|
|
size="16"
|
|
name="down-line"
|
|
style="margin-right: 16px; cursor: pointer"
|
|
@click="toggle"
|
|
/>
|
|
<svg-icon
|
|
v-show="isFold"
|
|
size="16"
|
|
name="top-line"
|
|
style="margin-right: 16px; cursor: pointer"
|
|
@click="toggle"
|
|
/>
|
|
<svg-icon
|
|
size="16"
|
|
name="close-none-border"
|
|
@click="cancel"
|
|
style="margin-right: 25.7px; cursor: pointer"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-show="!isFold"
|
|
style="
|
|
display: flex;
|
|
background-color: #f9f9f9;
|
|
height: 54px;
|
|
margin-top: 24px;
|
|
margin-bottom: 6px;
|
|
"
|
|
>
|
|
<div><svg-icon size="40" name="robot2" /></div>
|
|
<div class="msg">
|
|
<div>正在查重中</div>
|
|
</div>
|
|
</div>
|
|
</n-card>
|
|
</div>
|
|
<!-- </n-modal> -->
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 357px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
|
|
margin: 0 -18px;
|
|
}
|
|
.icon-list {
|
|
}
|
|
.title {
|
|
padding-left: 24px;
|
|
padding-top: 6px;
|
|
padding-bottom: 10px;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.msg {
|
|
text-align: center;
|
|
margin-left: 20px;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
line-height: 54px;
|
|
}
|
|
.removeMask {
|
|
::v-deep(.n-modal-mask) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
</style>
|