99 lines
2.4 KiB
Vue
99 lines
2.4 KiB
Vue
<template>
|
|
<Card title="倒计时">
|
|
<div class="schedule-plan">
|
|
<div class="countdown-top">项目整体倒计时:</div>
|
|
<div class="countdown-num" v-if="projectTimeInfo.totalProjectDay">
|
|
<div class="number-bg">
|
|
<div class="number">{{ countdown[0] || 0 }}</div>
|
|
</div>
|
|
<div class="number-bg">
|
|
<div class="number">{{ countdown[1] || 0 }}</div>
|
|
</div>
|
|
<div class="number-bg">
|
|
<div class="number">{{ countdown[2] || 0 }}</div>
|
|
</div>
|
|
<div class="number-bg">
|
|
<div class="number">{{ countdown[3] || 0 }}</div>
|
|
</div>
|
|
<div class="number-bg">
|
|
<div class="number">{{ countdown[4] || 0 }}</div>
|
|
</div>
|
|
<div class="number-bg">
|
|
<div class="number">{{ countdown[5] || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="complete-time">竣工时间: {{ projectTimeInfo.contractPeriodEndTime }}</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref, onMounted } from "vue";
|
|
import Card from "@/components/card.vue";
|
|
import { getTaskTimeDetail } from "@/api/modules/schedulePlan";
|
|
import { GlobalStore } from "@/stores";
|
|
const store = GlobalStore();
|
|
|
|
//获取项目信息
|
|
const projectTimeInfo = ref({} as any);
|
|
let countdown = ref(0 as any);
|
|
|
|
const getProjectInfo = async () => {
|
|
const res: any = await getTaskTimeDetail({ projectSn: store.sn });
|
|
console.log("获取项目信息", res);
|
|
projectTimeInfo.value = res.result;
|
|
countdown.value = projectTimeInfo.value.surplusDay.toString().padStart(6, "0");
|
|
};
|
|
|
|
onMounted(async () => {
|
|
await getProjectInfo();
|
|
// console.log("Mount_type", dialogIndex.value);
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.schedule-plan {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
.countdown-top {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
padding-top: 4%;
|
|
margin-left: 3%;
|
|
}
|
|
.countdown-num {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: auto;
|
|
margin-top: 3%;
|
|
max-width: 96%;
|
|
height: 55%;
|
|
background: url("@/assets/images/schedulePlan/countdownBg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.number-bg {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 90%;
|
|
padding: 0 2%;
|
|
margin-left: 3%;
|
|
background: url("@/assets/images/schedulePlan/textBg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.number {
|
|
font-size: 64px;
|
|
color: #fff;
|
|
font-family: D-DIN-Regular, D-DIN;
|
|
letter-spacing: 6px;
|
|
}
|
|
}
|
|
}
|
|
.complete-time {
|
|
position: absolute;
|
|
right: 4%;
|
|
bottom: 8%;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|