screenFront/src/views/PaintShopView/components/verticalNum.vue

<!--
 * @FilePath: \gitscreenFront\src\views\PaintShopView\components\verticalNum.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-13 08:22:35
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div ref="numBox1" :style="{ height: boxSize.height, width: boxSize.width }">
    <border3 ref="refborder3">
      <template v-slot>
        <div class="box" ref="classBox1">
          <h2>{{ item.name }}</h2>
          <h5 v-if="value.unit">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
          <h5 v-else>&nbsp; </h5>
          <!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
          <i :class="+item.val > +value.quota
            ? 'iconfont ' + value.iconname + ' icon-red iconbig-size'
            : 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
            "></i>
          <p class="unit" v-if="value.unit">
            <p class="num">{{ item.val }}&nbsp;</p>
            <span>{{ value.unit }}</span>
          </p>
          <p class="unit" v-else>
            <p class="num">&nbsp;</p>
            <span>&nbsp;</span>
          </p>

        </div>
      </template>
    </border3>
  </div>
</template>
  
<script setup lang="ts">
import { onMounted, reactive, ref, watch, computed, onUnmounted } from "vue";
import border3 from "@/components/borderBox/border3.vue";
import { verticalNumPerson } from "@/type/realtimeSecurity";
import { warningNot } from "@/utils/notification";

import { useI18n } from 'vue-i18n'
let { t } = useI18n();
let props = defineProps<{
  title: string;
}>();
let i = ref(0)
let item = computed(() => {

  return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0 };
});
let keynum = ref(0);
const value = reactive<any>({
  data: [],
  unit: "",
  quota: null,
  iconname: "",
});

let refborder3 = ref();
let numBox1 = ref();
const classBox1 = ref()
let timer: any = null;
onMounted(() => {

});
onUnmounted(() => {
  clearInterval(timer);
})

const boxSize = reactive({
  height: '',
  width: ''
})

function setchartWH(width: any, height: any) {
  boxSize.height = height + 'px'
  boxSize.width = width + 'px'
  refborder3.value.resetWH();
}

const setData = (
  data?: object[] | null,
  iconname?: string,
  quota?: number | null,
  unit?: string
) => {
  let temp_data = data.map((item: any) => {
    return {
      name: item.name.split("车间")[1] || item.name,
      val: item.val,
    };
  });
  value.data = temp_data;
  value.iconname = iconname;
  value.quota = quota;
  value.unit = unit;
  keynum.value++;

  clearInterval(timer);
  timer = setInterval(() => {
    i.value++;
    if (i.value >= value.data.length) {
      i.value = 0;
    }
  }, 5000);
};

defineExpose({
  setchartWH,
  setData,
});
</script>
  
<style scoped>
@import "@/assets/css/iconfont.css";


.box {
    height: 50%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
  
  .box>h5 {
    font-size: 15px;
    /* margin-bottom: 20px; */
    margin-top: 20px;
  }
  
  /* .contentbox{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  } */
  h2 {
    color: #fff;
  }
  
  p {
    color: #fff;
  }
  
  .icon-red {
    font-size: 100px;
    color: #E43961;
    animation: redstart 2s infinite;
    /* position: relative; */
    /* top: -15px; */
  }
  
  .icon-blue {
    font-size: 100px;
    color: #20AEC5;
    /* position: relative; */
    /* top: -15px; */
  }
  
  .iconsmall-size {
    font-size: 20px;
  }
  
  .num {
    font-size: 16px;
  }
  
  .unit {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    font-size: 16px;
    height: 5;
    width: 100px;
  }
  
  .box>h2 {
    font-size: 20px;
    position: absolute;
  top: 15px;
  left:20px;
  }
  
  
  .icontip {
    display: flex;
    margin-top: -60px;
    width: 100px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: 60px;
  }
  
  .icontipBox li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 5px;
  }
  
  .icontipBox li p:nth-child(1) {
    width: 40%;
    text-align: left;
  }
  
  .icontipBox li p:nth-child(2) {
    flex: 1;
  }

@keyframes redstart {
  0% {}

  50% {
    text-shadow: #fff 1px 0 10px;
  }

  100% {}
}
</style>