螺纹头页面整改

src/views/equipment/threadHead.vue

@@ -2,160 +2,114 @@
   <div>
     <van-nav-bar :title="$t('threadHead.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="12">
-          <div class="modules">
-            <van-row>
-              <van-col span="10" class="centerStyle">
-                <van-icon style="font-size: 36px" name="setting-o" />
-              </van-col>
-              <van-col span="14">
-                <div>{{ $t("threadHead.state") }}</div>
-                <div style="color: green">{{ $t("threadHead.stateName") }}</div>
-              </van-col>
-            </van-row>
+          <div class="modules" style="display: flex">
+            <div class="img">
+              <img src="../../assets/images/icon_sbzt@2x.png" alt="" />
+            </div>
+            <div>
+              <div class="label">设备状态</div>
+              <div class="value" style="color: #3fbf31">正常</div>
+            </div>
           </div>
         </van-col>
         <van-col span="12">
-          <div class="modules">
-            <van-row>
-              <van-col span="10" class="centerStyle">
-                <van-icon style="font-size: 36px" name="cart-circle-o" />
-              </van-col>
-              <van-col span="14">
-                <div>{{ $t("threadHead.mode") }}</div>
-                <div style="color: orange">{{ $t("threadHead.modeName") }}</div>
-              </van-col>
-            </van-row>
+          <div class="modules" style="display: flex">
+            <div class="img">
+              <img src="../../assets/images/icon_gzms@2x.png" alt="" />
+            </div>
+            <div>
+              <div class="label">工作模式</div>
+              <div class="value" style="color: #ff8800">自动</div>
+            </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("threadHead.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="vip-card-o" />
-              <div class="point" style="background-color: #12cc12"></div>
+              <img class="imgOne" src="../../assets/images/icon_bpq.png" alt="" />
+              <div class="point" style="background-color: #3fbf31"></div>
             </div>
-            <div style="text-align: center">{{ $t("threadHead.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="vip-card-o" />
-              <div class="point" style="background-color: #12cc12"></div>
+              <img class="imgOne" src="../../assets/images/icon_yskqzf.png" alt="" />
+              <div class="point" style="background-color: #3fbf31"></div>
             </div>
-            <div style="text-align: center">{{ $t("threadHead.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="vip-card-o" />
-              <div class="point" style="background-color: #c8c9cc"></div>
+              <img class="imgOne" src="../../assets/images/icon_flp.png" alt="" />
+              <div class="point" style="background-color: #bbbbbb"></div>
             </div>
-            <div style="text-align: center">{{ $t("threadHead.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("threadHead.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_pyf2.png" alt="" />
+            <div style="height: 50px; line-height: 50px; padding-left: 12px">1#喷油阀</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("threadHead.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_pyf2.png" alt="" />
+            <div style="height: 50px; line-height: 50px; padding-left: 12px">2#喷油阀</div>
+            <div class="pointTwo" style="background-color: #bbbbbb"></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("threadHead.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_pyf2.png" alt="" />
+            <div style="height: 50px; line-height: 50px; padding-left: 12px">3#喷油阀</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("threadHead.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_pyf2.png" alt="" />
+            <div style="height: 50px; line-height: 50px; padding-left: 12px">4#喷油阀</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("threadHead.eee") }}</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@2x.png" alt="" />
+            <div style="height: 50px; line-height: 50px; padding-left: 12px">2#工位振动盘</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("threadHead.fff") }}</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@2x.png" alt="" />
+            <div style="height: 50px; line-height: 50px; padding-left: 12px">3#工位振动盘</div>
+            <div class="pointTwo" style="background-color: #3fbf31"></div>
           </div>
         </van-col>
       </van-row>
@@ -164,53 +118,49 @@
 </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: 50px;
+    height: 50px;
+    margin-right: 12px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .label {
+    font-size: 14px;
+    color: #666;
+  }
+  .value {
+    font-weight: bold;
+    font-size: 16px;
+    color: #ff8800;
+    margin-top: 6px;
+  }
 }
 .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;
@@ -220,6 +170,10 @@ onMounted(() => {
       top: 0px;
     }
   }
+  .imgTwo {
+    width: 50px;
+    height: 50px;
+  }
   .pointTwo {
     position: absolute;
     width: 12px;
@@ -229,13 +183,13 @@ onMounted(() => {
     top: 8px;
   }
 }
-.centerStyle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.centerStyleRight {
-  height: 48px;
-  line-height: 48px;
-}
+// .centerStyle {
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+// }
+// .centerStyleRight {
+//   height: 48px;
+//   line-height: 48px;
+// }
 </style>