设备列表-螺纹头

src/components/equipment-top.vue

@@ -0,0 +1,4 @@
+<template>
+  <van-image width="100%" height="15rem" fit="cover" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+</template>
+<script setup name="equipment-top"></script>

src/lang/cn.js

@@ -63,4 +63,21 @@ export const lang = {
 			and:"和"
 		},
 	},
+	threadHead: {
+		title: '螺纹头',
+		state: '设备状态',
+		stateName: '工作中',
+		mode: '工作模式',
+		modeName:'自动',
+		yieldData: '产量数据',
+		textOne: '变频器启动',
+		textTwo: '空气压缩总阀',
+		textThree: '分离盘',
+		aaa: '1#喷油阀',
+		bbb: '2#喷油阀',
+		ccc: '3#喷油阀',
+		ddd: '4#喷油阀',
+		eee:'2#工位振动盘',
+		fff:'3#工位振动盘',
+	}
 }

src/router/routerLXF.js

@@ -50,6 +50,11 @@ export function routesLXF() {
       name: "产品库添加",
       component: () => import("../views/product-material/product-library/add.vue"),
     },
+    {
+      path: "threadHead",
+      name: "螺纹头",
+      component: () => import("../views/equipment/threadHead.vue"),
+    },
   ];
   return routesLXF;
 }

src/views/equipment/threadHead.vue

@@ -0,0 +1,241 @@
+<template>
+  <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">
+        <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>
+        </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>
+        </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">
+        <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>
+            </div>
+            <div style="text-align: center">{{ $t("threadHead.textOne") }}</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>
+            </div>
+            <div style="text-align: center">{{ $t("threadHead.textTwo") }}</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>
+            </div>
+            <div style="text-align: center">{{ $t("threadHead.textThree") }}</div>
+          </div>
+        </van-col>
+      </van-row>
+    </div>
+    <div style="margin: 8px">
+      <van-row :gutter="8">
+        <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>
+        </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>
+        </van-col>
+      </van-row>
+    </div>
+    <div style="margin: 8px">
+      <van-row :gutter="8">
+        <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>
+        </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>
+        </van-col>
+      </van-row>
+    </div>
+    <div style="margin: 8px">
+      <van-row :gutter="8">
+        <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>
+        </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>
+        </van-col>
+      </van-row>
+    </div>
+  </div>
+</template>
+<script setup>
+import equipmentTop from "@/components/equipment-top.vue";
+import * as echarts from "echarts";
+import { ref, reactive, onMounted } from "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;
+}
+.submodule {
+  background-color: white;
+  padding: 8px;
+  border-radius: 6px;
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    .point {
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      border-radius: 50px;
+      right: 0px;
+      top: 0px;
+    }
+  }
+  .pointTwo {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50px;
+    right: 8px;
+    top: 8px;
+  }
+}
+.centerStyle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.centerStyleRight {
+  height: 48px;
+  line-height: 48px;
+}
+</style>