screenFront/src/views/Temp/Large_Format/component/toptip.vue

<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Temp\Large_Format\component\toptip.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 11:51:32
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="tipbox" :style="{ width: itemSize.width, height: itemSize.height }">
    <p class="toptip-p">
      <span>{{t('messages.expectDeliveryDate')}}:</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: itemSize.imgwidth, height: '60%' }" :src="data.src ? imgurlAddXhr(data.src) : ''"
      fit="contain">
      <template #error>
        <div class="image-slot">
          <el-icon><icon-picture /></el-icon>
        </div>
      </template>
    </el-image>
    <!-- <img :style="{width:itemSize.imgwidth,height:itemSize.imgheight}" src="../../../../assets/img/download.jpg" alt=""> -->
    <!-- <ul class="uldianji">
      <li>
        <i
          :class="
            data.zhu == 't'
              ? 'iconfont green icon-dianji'
              : 'iconfont fff icon-dianji'
          "
        ></i>
        <p>主轴电机</p>
      </li>
      <li>
        <i
          :class="
            data.x == 't'
              ? 'iconfont green icon-weibiaoti-'
              : 'iconfont fff icon-weibiaoti-'
          "
        ></i>
        <p>x轴电机</p>
      </li>
      <li>
        <i
          :class="
            data.y == 't'
              ? 'iconfont green icon-weibiaoti-'
              : 'iconfont fff icon-weibiaoti-'
          "
        ></i>
        <p>y轴电机</p>
      </li>
    </ul> -->
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, onUnmounted, reactive, ref } from "vue";
import { Picture as IconPicture } from "@element-plus/icons-vue";
import border1 from "@/components/borderBox/border1.vue";
import { clacendTime } from "@/utils/time"
import { imgurlAddXhr } from "@/utils/devSever"
import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useInPlantProductsStore();
let data = reactive({
  date: "",
  src: "",
  realityTime: "",
  status: "",
  countdown: "",
});
let dateColor = ref();
let time = null
const itemSize = reactive({
  height: "0px",
  width: "0px",
  imgwidth: "0px",
  imgheight: "0px",
});
onMounted(() => {
  // setData()
});

function setchartWH(width: any, height: any) {
  itemSize.height = height - 50 + "px";
  itemSize.width = width - 50 + "px";
  itemSize.imgwidth = width - 120 + "px";
  itemSize.imgheight = height - 280 + "px";
  // refborder1.value.resetWH()
}

const setData = (value: any) => {
  data.date = value.prtDeliveryDate || value.deliveryDate;
  data.src = value.src;
  // data.zhu = value.active;
  data.realityTime = value.realityTime;
  data.status = value.status;
  
  if (value.status == '安装中' || value.status == '调试中' || value.status == '已超时') {
    if (value.status == '调试中' || value.status == '安装中') {
      dateColor.value = 3
    }
    calctime(data.date)
  }
  if (value.status == '已完成') {
    dateColor.value = 2
    data.countdown = value.status
  }
  if (value.status == '已交付') {
    dateColor.value = 2
    if (data.realityTime) {
      data.countdown =  data.realityTime
    }

  }
}
const calctime = (value: any) => {
  if (value.status == '调试中') {
    dateColor.value = 3
  }
  if (!value) {
    data.date = '暂无'
    data.countdown = data.status
    return
  }
  let temp = value
  temp = temp.replace('年', '/')
  temp = temp.replace('月', '/')
  temp = temp.replace('日', '')
  temp = temp.replace(/-/g, '/')
  let endtime = new Date(temp).getTime()
  if (endtime - new Date().getTime() < 0) {
    dateColor.value = 1
  } else {
    if (endtime - new Date().getTime() >= 3 * 24 * 60 * 60 * 1000) {
      dateColor.value = 2
    } else {
      dateColor.value = 3
    }
  }

  // data.countdown = store.DeviceInfo.status
  time = setInterval(function () {
    if (data.status == '安装中' || value.status == '调试中') {
      data.countdown = "距交付剩余：" + clacendTime(endtime, new Date().getTime())
    } else {
      data.countdown = '距交付剩余：'+clacendTime(endtime, new Date().getTime())
    }
    
    // if(dateColor==1){
    //   data.countdown=store.DeviceInfo.status+":已超时"+clacendTime(Math.abs(endtime),new Date().getTime())    
    // }else{
    //   data.countdown=store.DeviceInfo.status+":"+clacendTime(Math.abs(endtime),new Date().getTime())    
    // }

  }, 1000)




  // console.log(newDate);
  // endtime.getTime()


}
onUnmounted(() => {
  if (time) {
    clearInterval(time)
  }

})
defineExpose({
  setchartWH,
  setData,
});
</script>

<style scoped>
@import "@/assets/css/iconfont.css";

.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.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>