滚印机页面整改

src/views/equipment/printingMachine.vue

@@ -2,198 +2,152 @@
   <div>
     <van-nav-bar :title="$t('printingMachine.title')" left-text="" left-arrow @click-left="onClickLeft"> </van-nav-bar>
     <equipmentTop></equipmentTop>
-    <div style="padding: 8px 8px 0 8px">
-      <van-row :gutter="8">
+    <div style="padding: 12px 12px 0 12px">
+      <van-row :gutter="12">
         <van-col span="8">
           <div class="modules">
-            <div>
-              <van-icon style="font-size: 18px; transform: translateY(2px)" name="setting-o" />
-              <span style="margin-left: 8px">{{ $t("printingMachine.state") }}</span>
-            </div>
-            <div style="text-align: center; height: 19px">
-              <span style="color: green">{{ $t("printingMachine.stateName") }}</span>
+            <div style="display: flex">
+              <img class="img" src="../../assets/images/icon_sbzt1.png" alt="" />
+              <div class="label">设备状态</div>
             </div>
+            <div class="value" style="color: #3fbf31">正常</div>
           </div>
         </van-col>
         <van-col span="8">
           <div class="modules">
-            <div>
-              <van-icon style="font-size: 18px; transform: translateY(2px)" name="setting-o" />
-              <span style="margin-left: 8px">{{ $t("printingMachine.mode") }}</span>
-            </div>
-            <div style="text-align: center; height: 19px">
-              <span style="color: green">{{ $t("printingMachine.modeName") }}</span>
+            <div style="display: flex">
+              <img class="img" src="../../assets/images/icon_gzms1.png" alt="" />
+              <div class="label">工作模式</div>
             </div>
+            <div class="value" style="color: #ff8800">自动</div>
           </div>
         </van-col>
         <van-col span="8">
           <div class="modules">
-            <div>
-              <van-icon style="font-size: 18px; transform: translateY(2px)" name="setting-o" />
-              <span style="margin-left: 8px">{{ $t("printingMachine.frequency") }}</span>
-            </div>
-            <div style="text-align: center; height: 19px">
-              <span style="color: black; font-weight: 700">{{ $t("printingMachine.frequencyText") }}</span>
+            <div style="display: flex">
+              <img class="img" src="../../assets/images/icon_zdjpl1.png" alt="" />
+              <div class="label">主电机频率</div>
             </div>
+            <div class="value" style="color: black; font-weight: 700">300HZ</div>
           </div>
         </van-col>
       </van-row>
     </div>
-    <div class="modules" style="margin: 8px">
-      <div style="display: flex">
-        <van-icon style="font-size: 14px; transform: translateY(3px)" name="vip-card-o" />
-        <span style="margin-left: 8px">{{ $t("printingMachine.yieldData") }}</span>
-      </div>
-      <div ref="main" style="height: 15rem"></div>
-    </div>
-    <div style="margin: 8px">
-      <van-row :gutter="8">
+    <commonCharts></commonCharts>
+    <div style="margin: 12px">
+      <van-row :gutter="12">
         <van-col span="8">
           <div class="submodule">
             <div class="top">
-              <van-icon style="font-size: 30px" name="newspaper-o" />
-              <div class="point" style="background-color: #12cc12"></div>
+              <img class="imgOne" src="../../assets/images/icon_pyf.png" alt="" />
+              <div class="point" style="background-color: #3fbf31"></div>
             </div>
-            <div style="text-align: center">{{ $t("printingMachine.textOne") }}</div>
+            <div style="text-align: center; margin-top: 10px; font-size: 14px">1#喷油阀</div>
           </div>
         </van-col>
         <van-col span="8">
           <div class="submodule">
             <div class="top">
-              <van-icon style="font-size: 30px" name="newspaper-o" />
-              <div class="point" style="background-color: #12cc12"></div>
+              <img class="imgOne" src="../../assets/images/icon_pyf.png" alt="" />
+              <div class="point" style="background-color: #3fbf31"></div>
             </div>
-            <div style="text-align: center">{{ $t("printingMachine.textTwo") }}</div>
+            <div style="text-align: center; margin-top: 10px; font-size: 14px">2#喷油阀</div>
           </div>
         </van-col>
         <van-col span="8">
           <div class="submodule">
             <div class="top">
-              <van-icon style="font-size: 30px" name="newspaper-o" />
-              <div class="point" style="background-color: #c8c9cc"></div>
+              <img class="imgOne" src="../../assets/images/icon_pyf.png" alt="" />
+              <div class="point" style="background-color: #bbbbbb"></div>
             </div>
-            <div style="text-align: center">{{ $t("printingMachine.textThree") }}</div>
+            <div style="text-align: center; margin-top: 10px; font-size: 14px">3#喷油阀</div>
           </div>
         </van-col>
       </van-row>
     </div>
-    <div style="margin: 8px">
-      <van-row :gutter="8">
+    <div style="margin: 12px">
+      <van-row :gutter="12">
         <van-col span="12">
-          <div class="submodule" style="position: relative">
-            <van-row>
-              <van-col :span="10" class="centerStyle">
-                <van-icon style="font-size: 48px" name="vip-card-o" />
-              </van-col>
-              <van-col :span="14" class="centerStyleRight">
-                <span>{{ $t("printingMachine.textFour") }}</span>
-              </van-col>
-            </van-row>
-            <div class="pointTwo" style="background-color: #12cc12"></div>
+          <div class="submodule" style="position: relative; display: flex">
+            <img class="imgTwo" src="../../assets/images/icon_bpdj.png" alt="" />
+            <div style="height: 50px; line-height: 50px; padding-left: 12px">变频电机</div>
+            <div class="pointTwo" style="background-color: #3fbf31"></div>
           </div>
         </van-col>
         <van-col span="12">
-          <div class="submodule">
-            <van-row>
-              <van-col :span="10" class="centerStyle">
-                <van-icon style="font-size: 48px" name="vip-card-o" />
-              </van-col>
-              <van-col :span="14">
-                <div style="height: 24px; line-height: 24px; color: black; font-weight: 700">{{ $t("printingMachine.textFive") }}</div>
-                <div style="height: 24px; line-height: 24px">{{ $t("printingMachine.textSix") }}</div>
-              </van-col>
-            </van-row>
+          <div class="submodule" style="display: flex">
+            <img class="imgTwo" src="../../assets/images/icon_pl.png" alt="" />
+            <div>
+              <div style="height: 25px; line-height: 25px; padding-left: 12px; color: black; font-weight: 700">300HZ</div>
+              <div style="height: 25px; line-height: 25px; padding-left: 12px">频率</div>
+            </div>
           </div>
         </van-col>
       </van-row>
     </div>
-    <div style="margin: 8px">
-      <van-row :gutter="8">
+    <div style="margin: 12px">
+      <van-row :gutter="12">
         <van-col span="8">
           <div class="submodule">
             <div class="top">
-              <van-icon style="font-size: 30px" name="newspaper-o" />
-              <div class="point" style="background-color: #12cc12"></div>
+              <img class="imgOne" src="../../assets/images/icon_jrdj.png" alt="" />
+              <div class="point" style="background-color: #3fbf31"></div>
             </div>
-            <div style="text-align: center">{{ $t("printingMachine.textOne") }}</div>
+            <div style="text-align: center; margin-top: 10px; font-size: 14px">加热电机</div>
           </div>
         </van-col>
         <van-col span="8">
           <div class="submodule">
             <div class="top">
-              <van-icon style="font-size: 30px" name="newspaper-o" />
-              <div class="point" style="background-color: #12cc12"></div>
+              <div style="font-size: 26px; height: 41px">80℃</div>
+              <img style="position: absolute; width: 16px; height: 16px; right: 0px; top: 0px" src="../../assets/images/icon_wdj.png" alt="" />
             </div>
-            <div style="text-align: center">{{ $t("printingMachine.textTwo") }}</div>
+            <div style="text-align: center; margin-top: 10px; font-size: 14px">第一当前温度</div>
           </div>
         </van-col>
         <van-col span="8">
           <div class="submodule">
             <div class="top">
-              <van-icon style="font-size: 30px" name="newspaper-o" />
-              <div class="point" style="background-color: #c8c9cc"></div>
+              <div style="font-size: 26px; height: 41px">80℃</div>
+              <img style="position: absolute; width: 16px; height: 16px; right: 0px; top: 0px" src="../../assets/images/icon_wdj.png" alt="" />
             </div>
-            <div style="text-align: center">{{ $t("printingMachine.textThree") }}</div>
+            <div style="text-align: center; margin-top: 10px; font-size: 14px">第二当前温度</div>
           </div>
         </van-col>
       </van-row>
     </div>
-    <div style="margin: 8px">
-      <van-row :gutter="8">
+    <div style="margin: 12px">
+      <van-row :gutter="12">
         <van-col span="12">
-          <div class="submodule" style="position: relative">
-            <van-row>
-              <van-col :span="10" class="centerStyle">
-                <van-icon style="font-size: 48px" name="vip-card-o" />
-              </van-col>
-              <van-col :span="14" class="centerStyleRight">
-                <span>{{ $t("printingMachine.aaa") }}</span>
-              </van-col>
-            </van-row>
-            <div class="pointTwo" style="background-color: #12cc12"></div>
+          <div class="submodule" style="position: relative; display: flex">
+            <img class="imgTwo" src="../../assets/images/icon_pydj.png" alt="" />
+            <div style="height: 50px; line-height: 50px; padding-left: 12px">喷油电机</div>
+            <div class="pointTwo" style="background-color: #3fbf31"></div>
           </div>
         </van-col>
         <van-col span="12">
-          <div class="submodule" style="position: relative">
-            <van-row>
-              <van-col :span="10" class="centerStyle">
-                <van-icon style="font-size: 48px" name="vip-card-o" />
-              </van-col>
-              <van-col :span="14" class="centerStyleRight">
-                <span>{{ $t("printingMachine.bbb") }}</span>
-              </van-col>
-            </van-row>
-            <div class="pointTwo" style="background-color: #c8c9cc"></div>
+          <div class="submodule" style="position: relative; display: flex">
+            <img class="imgTwo" src="../../assets/images/icon_ybdj.png" alt="" />
+            <div style="height: 50px; line-height: 50px; padding-left: 12px">油泵电机</div>
+            <div class="pointTwo" style="background-color: #3fbf31"></div>
           </div>
         </van-col>
       </van-row>
     </div>
-    <div style="margin: 8px">
-      <van-row :gutter="8">
+    <div style="margin: 12px">
+      <van-row :gutter="12">
         <van-col span="12">
-          <div class="submodule" style="position: relative">
-            <van-row>
-              <van-col :span="10" class="centerStyle">
-                <van-icon style="font-size: 48px" name="vip-card-o" />
-              </van-col>
-              <van-col :span="14" class="centerStyleRight">
-                <span>{{ $t("printingMachine.ccc") }}</span>
-              </van-col>
-            </van-row>
-            <div class="pointTwo" style="background-color: #12cc12"></div>
+          <div class="submodule" style="position: relative; display: flex">
+            <img class="imgTwo" src="../../assets/images/icon_xldj.png" alt="" />
+            <div style="height: 50px; line-height: 50px; padding-left: 12px">蓄料电机</div>
+            <div class="pointTwo" style="background-color: #3fbf31"></div>
           </div>
         </van-col>
         <van-col span="12">
-          <div class="submodule" style="position: relative">
-            <van-row>
-              <van-col :span="10" class="centerStyle">
-                <van-icon style="font-size: 48px" name="vip-card-o" />
-              </van-col>
-              <van-col :span="14" class="centerStyleRight">
-                <span>{{ $t("printingMachine.ddd") }}</span>
-              </van-col>
-            </van-row>
-            <div class="pointTwo" style="background-color: #12cc12"></div>
+          <div class="submodule" style="position: relative; display: flex">
+            <img class="imgTwo" src="../../assets/images/icon_lxdj.png" alt="" />
+            <div style="height: 50px; line-height: 50px; padding-left: 12px">离心电机</div>
+            <div class="pointTwo" style="background-color: #3fbf31"></div>
           </div>
         </van-col>
       </van-row>
@@ -202,53 +156,48 @@
 </template>
 <script setup>
 import equipmentTop from "@/components/equipment-top.vue";
-import * as echarts from "echarts";
-import { ref, reactive, onMounted } from "vue";
+import commonCharts from "./components/commonCharts.vue";
 
 const onClickLeft = () => proxy.$router.push("/main/working");
-const main = ref(null);
-let myChart = null;
-const option = reactive({
-  data: {
-    xAxis: {
-      type: "category",
-      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-    },
-    yAxis: {
-      type: "value",
-    },
-    series: [
-      {
-        data: [150, 230, 224, 218, 135, 147, 260],
-        type: "line",
-      },
-    ],
-  },
-});
-onMounted(() => {
-  myChart = echarts.init(main.value);
-  window.addEventListener("resize", () => {
-    myChart.resize();
-  });
-  myChart.setOption(option.data);
-});
 </script>
 
 <style lang="scss" scoped>
 .modules {
   background-color: white;
-  padding: 8px;
-  border-radius: 6px;
+  padding: 12px;
+  border-radius: 5px;
+  .img {
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
+  }
+  .label {
+    font-size: 12px;
+    color: #666;
+  }
+  .value {
+    font-weight: bold;
+    font-size: 16px;
+    color: #ff8800;
+    margin-top: 6px;
+    text-align: center;
+    height: 21px;
+    line-height: 21px;
+  }
 }
 .submodule {
   background-color: white;
-  padding: 8px;
-  border-radius: 6px;
+  padding: 12px;
+  border-radius: 5px;
   .top {
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
+    .imgOne {
+      width: 41px;
+      height: 41px;
+    }
     .point {
       position: absolute;
       width: 12px;
@@ -258,6 +207,10 @@ onMounted(() => {
       top: 0px;
     }
   }
+  .imgTwo {
+    width: 50px;
+    height: 50px;
+  }
   .pointTwo {
     position: absolute;
     width: 12px;
@@ -267,13 +220,4 @@ onMounted(() => {
     top: 8px;
   }
 }
-.centerStyle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.centerStyleRight {
-  height: 48px;
-  line-height: 48px;
-}
 </style>

src/views/equipment/threadHead.vue

@@ -183,13 +183,4 @@ const onClickLeft = () => proxy.$router.push("/main/working");
     top: 8px;
   }
 }
-// .centerStyle {
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-// }
-// .centerStyleRight {
-//   height: 48px;
-//   line-height: 48px;
-// }
 </style>