机械分厂大屏样式修改

src/views/PaintShopView/View1/top.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \screenFront\src\views\PaintShopView\View1\top.vue
+ * @FilePath: \gitscreenFront\src\views\PaintShopView\View1\top.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -266,7 +266,7 @@ function setcontentData(val) {
   });
   verticalNum3.value.setData(val.FIRE, 'icon-ranqi', 0, "")
   verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")
-  verticalNum5.value.setData(Smoke, 'icon-yanwubaojingqi', 100, "")
+  verticalNum5.value.setData(Smoke, 'icon-yanwubaojingqi', 100, "PPM")
   verticalNum6.value.setData(CH2O, 'icon-app_icons--', 0.08, "mg/m3")
   verticalNum7.value.setData(TVOC, 'icon-TVOC-Outlined', 0.5, "mg/m3")
   // console.log(pmref.value);

src/views/PaintShopView/components/verticalNum.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \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
@@ -117,23 +117,24 @@ defineExpose({
 <style scoped>
 @import "@/assets/css/iconfont.css";
 
+
 .box {
-  height: 50%;
+    height: 50%;
-  width: 100%;
+    width: 100%;
-  box-sizing: border-box;
+    box-sizing: border-box;
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  justify-content: space-evenly;
+    justify-content: space-evenly;
-  align-items: center;
+    align-items: center;
-}
+  }
-
+  
-.box>h5 {
+  .box>h5 {
-  font-size: 15px;
+    font-size: 15px;
-  /* margin-bottom: 20px; */
+    /* margin-bottom: 20px; */
-  margin-top: 20px;
+    margin-top: 20px;
-}
+  }
-
+  
-/* .contentbox{
+  /* .contentbox{
     height: 100%;
     width: 100%;
     display: flex;
@@ -141,77 +142,80 @@ defineExpose({
     justify-content: space-around;
     align-items: center;
   } */
-h2 {
+  h2 {
-  color: #fff;
+    color: #fff;
-}
+  }
-
+  
-p {
+  p {
-  color: #fff;
+    color: #fff;
-}
+  }
-
+  
-.icon-red {
+  .icon-red {
-  font-size: 100px;
+    font-size: 100px;
-  color: #E43961;
+    color: #E43961;
-  animation: redstart 2s infinite;
+    animation: redstart 2s infinite;
-  /* position: relative; */
+    /* position: relative; */
-  /* top: -15px; */
+    /* top: -15px; */
-}
+  }
-
+  
-.icon-blue {
+  .icon-blue {
-  font-size: 100px;
+    font-size: 100px;
-  color: #20AEC5;
+    color: #20AEC5;
-  /* position: relative; */
+    /* position: relative; */
-  /* top: -15px; */
+    /* top: -15px; */
-}
+  }
-
+  
-.iconsmall-size {
+  .iconsmall-size {
-  font-size: 20px;
+    font-size: 20px;
-}
+  }
-
+  
-.num {
+  .num {
-  font-size: 24px;
+    font-size: 16px;
-}
+  }
-
+  
-.unit {
+  .unit {
-  display: flex;
+    display: flex;
-  justify-content: center;
+    justify-content: center;
-  align-items: center;
+    align-items: center;
-  vertical-align: top;
+    vertical-align: top;
-  font-size: 20px;
+    font-size: 16px;
-  height: 5;
+    height: 5;
-  width: 100px;
+    width: 100px;
-}
+  }
-
+  
-.box>h2 {
+  .box>h2 {
-  font-size: 20px;
+    font-size: 20px;
-}
+    position: absolute;
-
+  top: 15px;
-
+  left:20px;
-.icontip {
+  }
-  display: flex;
+  
-  margin-top: -60px;
+  
-  width: 100px;
+  .icontip {
-  flex-wrap: wrap;
+    display: flex;
-  align-items: center;
+    margin-top: -60px;
-  justify-content: center;
+    width: 100px;
-  height: 60px;
+    flex-wrap: wrap;
-}
+    align-items: center;
-
+    justify-content: center;
-.icontipBox li {
+    height: 60px;
-  display: flex;
+  }
-  align-items: center;
+  
-  justify-content: flex-start;
+  .icontipBox li {
-  margin-bottom: 5px;
+    display: flex;
-}
+    align-items: center;
-
+    justify-content: flex-start;
-.icontipBox li p:nth-child(1) {
+    margin-bottom: 5px;
-  width: 40%;
+  }
-  text-align: left;
+  
-}
+  .icontipBox li p:nth-child(1) {
-
+    width: 40%;
-.icontipBox li p:nth-child(2) {
+    text-align: left;
-  flex: 1;
+  }
-}
+  
+  .icontipBox li p:nth-child(2) {
+    flex: 1;
+  }
 
 @keyframes redstart {
   0% {}

src/views/PaintShopView/finishView/top.vue

@@ -286,7 +286,7 @@ let temp_humi_index = 0
     verticalNum4.value.setData(noise,'icon-shengyin',120,"dB")
     // verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
     verticalNum6.value.setData(CH2O,'icon-app_icons--',0.08,"mg/m3")
-    verticalNum7.value.setData(TVOC,'icon-TVOC-Outlined',0.5,"PPM")
+    verticalNum7.value.setData(TVOC,'icon-TVOC-Outlined',0.5,"mg/m3")
     // console.log(pmref.value);
     humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
   if (val.temp_humi.length > 1) {

src/views/PaintShopView/machiningView/top.vue

@@ -284,7 +284,7 @@ let temp_humi_index = 0
     verticalNum4.value.setData(noise,'icon-shengyin',120,"dB")
     // verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
     verticalNum6.value.setData(CH2O,'icon-app_icons--',0.08,"mg/m3")
-    verticalNum7.value.setData(TVOC,'icon-TVOC-Outlined',0.5,"PPM")
+    verticalNum7.value.setData(TVOC,'icon-TVOC-Outlined',0.5,"mg/m3")
     // console.log(pmref.value);
     humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
   if (val.temp_humi.length > 1) {