设备列表-滚印机

src/lang/cn.js

@@ -79,5 +79,25 @@ export const lang = {
 		ddd: '4#喷油阀',
 		eee:'2#工位振动盘',
 		fff:'3#工位振动盘',
+	},
+	printingMachine: {
+		title: '滚印机',
+		state: '设备状态',
+		stateName: '工作中',
+		mode: '工作模式',
+		modeName:'自动',
+		frequency: '主电机频率',
+		frequencyText:'300HZ',
+		yieldData: '产量数据',
+		textOne: '1#喷油阀',
+		textTwo: '2#喷油阀',
+		textThree: '3#喷油阀',
+		textFour: '变频电机',
+		textFive: '300HZ',
+		textSix: '频率',
+		aaa:'喷油电机',
+		bbb:'油泵电机',
+		ccc:'蓄料电机',
+		ddd:'离心电机',
 	}
 }

src/router/routerLXF.js

@@ -55,6 +55,11 @@ export function routesLXF() {
       name: "螺纹头",
       component: () => import("../views/equipment/threadHead.vue"),
     },
+    {
+      path: "printingMachine",
+      name: "滚印机",
+      component: () => import("../views/equipment/printingMachine.vue"),
+    },
   ];
   return routesLXF;
 }

src/views/equipment/printingMachine.vue

@@ -0,0 +1,279 @@
+<template>
+  <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">
+        <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>
+          </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>
+          </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>
+          </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">
+        <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>
+            <div style="text-align: center">{{ $t("printingMachine.textOne") }}</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>
+            <div style="text-align: center">{{ $t("printingMachine.textTwo") }}</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>
+            <div style="text-align: center">{{ $t("printingMachine.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("printingMachine.textFour") }}</span>
+              </van-col>
+            </van-row>
+            <div class="pointTwo" style="background-color: #12cc12"></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>
+        </van-col>
+      </van-row>
+    </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="newspaper-o" />
+              <div class="point" style="background-color: #12cc12"></div>
+            </div>
+            <div style="text-align: center">{{ $t("printingMachine.textOne") }}</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>
+            <div style="text-align: center">{{ $t("printingMachine.textTwo") }}</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>
+            <div style="text-align: center">{{ $t("printingMachine.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("printingMachine.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("printingMachine.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("printingMachine.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("printingMachine.ddd") }}</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>