screenFront/src/views/PaintShopView/View1/chart/verticalNum.vue

<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\View1\chart\verticalNum.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-13 08:22:35
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width}">
    <border3 ref="refborder3">
      <template v-slot>
        <div class="box" ref="classBox1">
          <!-- <div class="contentbox"> -->
            <h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
            <h2>{{ title }}</h2>
          <i
            :class="
              value.data > value.quota
                ? 'iconfont ' + value.iconname + ' icon-red'
                : 'iconfont ' + value.iconname + ' icon-blue'
            "
          ></i>
          
          <p  class="unit"><p v-show="value.data&&value.unit"  :class="'num'">{{value.data}}</p><span>{{value.unit}}</span></p>
          <!-- </div> -->

        </div>
      </template>
    </border3>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } 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 keynum = ref(0);
const value = reactive<verticalNumPerson>({
  data: null,
  unit: "",
  quota: null,
  iconname: "",
});

let refborder3 = ref();
let numBox1 = ref();
const classBox1=ref()
onMounted(() => {});

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?: number | null,
  iconname?: string,
  quota?: number | null,
  unit?: string
) => {
  value.data = data;
  value.iconname = iconname;
  value.quota = quota;
  value.unit = unit;

  // if (data > quota) {
  //   //使用定时器解决通知重叠问题
  //   let navdebug = setTimeout(() => {
  //     warningNot(props.title, "出现异常，异常值为："+value.data+"，请排查！");
  //     clearTimeout(navdebug);
  //   }, 0);
  // }
  keynum.value++;
};

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

<style scoped>
@import "@/assets/css/iconfont.css";
.box {
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
/* .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: 70px;
  color: #E43961;
  animation: redstart 2s infinite;
  /* position: relative; */
  /* top: -15px; */
}.box>h2{
  font-size: 20px;
}
.box>h5{
  font-size: 15px;
  margin-bottom: 20px;
  margin-top: -50px;
}
.box>h5{
  font-size: 15px;
  margin-bottom: 20px;
  margin-top: -50px;
}
.icon-blue {
  font-size: 100px;
  color: #20AEC5;
  /* position: relative; */
  /* top: -15px; */
}
.icon-red,
.icon-blue {
  /* margin-bottom: 20%; */
}
.num{
  font-size: 16px;
}
.unit{
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: top;
  font-size: 16px;
  height: 0;
  width: 100px;
}

@keyframes redstart {
    0% {
        
      }
      50% {
        text-shadow: #fff 1px 0 10px;
    }
      100% {
       
      }
}
</style>