screenFront/src/views/Temp/Tufting/component/center.vue

<template>
  <div class="container">
    <p class="toptip-p">
      <span>预计工厂交货日期:</span><span>{{ data.date }}</span>
    </p>
    <div
      :class="dateColor == '1' ? 'toptip-h2 colorRed' : dateColor == '2' ? 'toptip-h2 colorgreen' : dateColor == '3' ? 'toptip-h2 coloryellow' : 'toptip-h2'">
      <div style="margin-bottom: 20px;">{{ data.status }}</div>
      <div>{{ data.countdown }}</div>

    </div>
    <!-- <img :style="{width:itemSize.imgwidth}" :src="data.src" alt=""> -->
    <el-image :style="{ width: '100%', height: '60%' }" :src="data.src" fit="contain">
      <template #error>
        <div class="image-slot">
          <el-icon><icon-picture /></el-icon>
        </div>
      </template>
    </el-image>

  </div>
</template>

<script setup lang='ts'>
import { reactive, ref, onUnmounted,onMounted } from 'vue';
import { imgurlAddXhr } from "@/utils/devSever"
import { clacendTime } from "@/utils/time"


let data = reactive({
  date: "2023年11月15日",
  src: require("/src/assets/img/tufting.png"),
  realityTime: "",
  status: "物联调试中",
  countdown: "",
});
let dateColor = ref('2');
let time = null
const itemSize = reactive({
  height: "0px",
  width: "0px",
  imgwidth: "0px",
  imgheight: "0px",
});

function getNextMonth(date) {
  let arr = date.split('-');
  let year = arr[0]; //获取当前日期的年份  
  let month = arr[1]; //获取当前日期的月份  
  let day = arr[2]; //获取当前日期的日  
  let days: any = new Date(year, month, 0);
  days = days.getDate(); //获取当前日期中的月的天数  
  let year2 = year;
  let month2: any = parseInt(month) + 1;
  if (month2 == 13) {
    year2 = parseInt(year2) + 1;
    month2 = 1;
  }
  let day2 = day;
  let days2: any = new Date(year2, month2, 0);
  days2 = days2.getDate();
  if (day2 > days2) {
    day2 = days2;
  }
  if (month2 < 10) {
    month2 = '0' + month2;
  }

  let t2 = year2 + '-' + month2 + '-' + day2;
  let t2_str = year2 + '年' + month2 + '月' + day2 + '日';
  return {t2,t2_str};
}
let NextMonth = ref() as any;
function init() {
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = 17;

  let datetime = year + '-' + month + '-' + day
  NextMonth.value = getNextMonth(datetime);
  data.date = NextMonth.value.t2_str;
}



onMounted(()=>{
  init();
  time = setInterval(function () {
  data.countdown = '距交付剩余：' + clacendTime(Date.parse(NextMonth.value.t2), new Date().getTime())
}, 1000)
})
onUnmounted(() => {
  clearInterval(time)
})
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}


.green {
  color: green;
  font-size: 2rem;
}

.red {
  color: red;
  font-size: 2rem;
}

.fff {
  color: #aaa;
  font-size: 2rem;
}

.toptip-h2 {
  color: red;
  font-size: 2rem;
}

.toptip-p {
  font-size: 2rem;
  color: #fff;
}

p {
  font-size: 1.2rem
}

.uldianji {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

img {
  padding: 1rem 0 1rem 0;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.image-slot .el-icon {
  font-size: 30px;
}

.tipbox {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin: 0 30px 0 30px;
}

.colorRed {
  color: #FF6E76;
  animation: redstarton 3s infinite;
}

.colorgreen {
  color: #7CFFB2;
}

.coloryellow {
  color: #FDDD60;
}

@keyframes redstarton {
  0% {
    color: rgba(255, 110, 118, 0.2);
    transform: scale(1);
    /* font-size: 30px; */
  }

  50% {
    color: rgba(255, 110, 118, 1);
    transform: scale(1.1);
    /* font-size: 35px; */
  }

  100% {
    color: rgba(255, 110, 118, 0.2);
    transform: scale(1);
    /* font-size: 30px; */
  }
}
</style>