机械分厂车间环境页面显示

src/views/PaintShopView/components/verticalNum.vue

@@ -13,8 +13,8 @@
       <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-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'
@@ -24,68 +24,72 @@
             <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>
+</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";
+<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<{
+import { useI18n } from 'vue-i18n'
+let { t } = useI18n();
+let props = defineProps<{
   title: string;
-  }>();
-  let i = ref(0)
-  let item = computed(() => {
+}>();
+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>({
+});
+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(() => {
+let refborder3 = ref();
+let numBox1 = ref();
+const classBox1 = ref()
+let timer: any = null;
+onMounted(() => {
 
-  });
-  onUnmounted(() => {
+});
+onUnmounted(() => {
   clearInterval(timer);
-  })
+})
 
-  const boxSize = reactive({
+const boxSize = reactive({
   height: '',
   width: ''
-  })
+})
 
-  function setchartWH(width: any, height: any) {
+function setchartWH(width: any, height: any) {
   boxSize.height = height + 'px'
   boxSize.width = width + 'px'
   refborder3.value.resetWH();
-  }
+}
 
-  const setData = (
+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,
+      name: item.name.split("车间")[1] || item.name,
       val: item.val,
     };
   });
@@ -102,18 +106,18 @@
       i.value = 0;
     }
   }, 5000);
-  };
+};
 
-  defineExpose({
+defineExpose({
   setchartWH,
   setData,
-  });
-  </script>
+});
+</script>
   
-  <style scoped>
-  @import "@/assets/css/iconfont.css";
+<style scoped>
+@import "@/assets/css/iconfont.css";
 
-  .box {
+.box {
   height: 50%;
   width: 100%;
   box-sizing: border-box;
@@ -121,15 +125,15 @@
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
-  }
+}
 
-  .box>h5 {
+.box>h5 {
   font-size: 15px;
   /* margin-bottom: 20px; */
   margin-top: 20px;
-  }
+}
 
-  /* .contentbox{
+/* .contentbox{
     height: 100%;
     width: 100%;
     display: flex;
@@ -137,38 +141,38 @@
     justify-content: space-around;
     align-items: center;
   } */
-  h2 {
+h2 {
   color: #fff;
-  }
+}
 
-  p {
+p {
   color: #fff;
-  }
+}
 
-  .icon-red {
+.icon-red {
   font-size: 100px;
   color: #E43961;
   animation: redstart 2s infinite;
   /* position: relative; */
   /* top: -15px; */
-  }
+}
 
-  .icon-blue {
+.icon-blue {
   font-size: 100px;
   color: #20AEC5;
   /* position: relative; */
   /* top: -15px; */
-  }
+}
 
-  .iconsmall-size {
+.iconsmall-size {
   font-size: 20px;
-  }
+}
 
-  .num {
+.num {
   font-size: 24px;
-  }
+}
 
-  .unit {
+.unit {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -176,14 +180,14 @@
   font-size: 20px;
   height: 5;
   width: 100px;
-  }
+}
 
-  .box>h2 {
+.box>h2 {
   font-size: 20px;
-  }
+}
 
 
-  .icontip {
+.icontip {
   display: flex;
   margin-top: -60px;
   width: 100px;
@@ -191,25 +195,25 @@
   align-items: center;
   justify-content: center;
   height: 60px;
-  }
+}
 
-  .icontipBox li {
+.icontipBox li {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin-bottom: 5px;
-  }
+}
 
-  .icontipBox li p:nth-child(1) {
+.icontipBox li p:nth-child(1) {
   width: 40%;
   text-align: left;
-  }
+}
 
-  .icontipBox li p:nth-child(2) {
+.icontipBox li p:nth-child(2) {
   flex: 1;
-  }
+}
 
-  @keyframes redstart {
+@keyframes redstart {
   0% {}
 
   50% {
@@ -217,5 +221,6 @@
   }
 
   100% {}
-  }</style>
+}
+</style>