From 7a793f9f86f32284bc62df7510458d417f360778 Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Tue, 16 May 2023 14:46:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=BA=E6=A2=B0=E5=88=86=E5=8E=82=E8=BD=A6?=
 =?UTF-8?q?=E9=97=B4=E7=8E=AF=E5=A2=83=E9=A1=B5=E9=9D=A2=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PaintShopView/components/verticalNum.vue  | 399 +++++++++---------
 1 file changed, 202 insertions(+), 197 deletions(-)

diff --git a/src/views/PaintShopView/components/verticalNum.vue b/src/views/PaintShopView/components/verticalNum.vue
index 7f98493..a726480 100644
--- a/src/views/PaintShopView/components/verticalNum.vue
+++ b/src/views/PaintShopView/components/verticalNum.vue
@@ -8,128 +8,132 @@
  * 版权信息         : 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>
-            <!-- <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">
+  <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>
+          <p class="unit" v-else>
+            <p class="num">&nbsp;</p>
+            <span>&nbsp;</span>
+          </p>
+
+        </div>
+      </template>
+    </border3>
+  </div>
+</template>
   
-          </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: "",
+<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>
   
-  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{
+<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;
@@ -137,85 +141,86 @@
     justify-content: space-around;
     align-items: center;
   } */
-  h2 {
-    color: #fff;
+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: 24px;
+}
+
+.unit {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: top;
+  font-size: 20px;
+  height: 5;
+  width: 100px;
+}
+
+.box>h2 {
+  font-size: 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;
   }
-  
-  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: 24px;
-  }
-  
-  .unit {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    vertical-align: top;
-    font-size: 20px;
-    height: 5;
-    width: 100px;
-  }
-  
-  .box>h2 {
-    font-size: 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>
+
+  100% {}
+}
+</style>
   
\ No newline at end of file