添加微工厂缝纫设备看板页面 未接接口

src/locales/lang/en.ts

@@ -306,5 +306,8 @@ export default {
         '效益&效率':'Benefit&Efficiency',
         '效益':'Benefit',
         '效率':'Efficiency',        
+        '微工厂缝纫设备看板':'微工厂缝纫设备看板',
+        '工作时间':'工作时间',
+        '空闲时间':'空闲时间',
       }
   }

src/locales/lang/zh.ts

@@ -168,10 +168,10 @@ export default {
         'GatewayON':'网关在线',
         'DevOffNum':'设备离线数量',
         'SewingTime':'缝纫时间',
-        'realityPresserFootLiftNum':'今日抬压脚次数',
+        'realityPresserFootLiftNum':'实际抬压脚次数',
         'AvgPresserFootLiftNum':'平均抬压脚次数',
         'ratio':'比率',
-        'realityTrimNum':'今日剪线次数',
+        'realityTrimNum':'实际剪线次数',
         'AvgTrimNum':'平均剪线次数',
         'runTime':'运行时间',
         'datacom':'数据通信',
@@ -306,5 +306,8 @@ export default {
         '效益&效率':'效益&效率',
         '效益':'效益',
         '效率':'效率',
+        '微工厂缝纫设备看板':'微工厂缝纫设备看板',
+        '工作时间':'工作时间',
+        '空闲时间':'空闲时间',
       }
   }

src/router/index.ts

@@ -98,6 +98,11 @@ const routes: Array<RouteRecordRaw> = [
         name: "MicrofactoryDev",
         component: () => import("../views/MicrofactoryDev/index.vue"),
       },
+      {
+        path: "/MicrofactoryDevOnline",
+        name: "MicrofactoryDevOnline",
+        component: () => import("../views/MicrofactoryDevOnline/index.vue"),
+      },
 
       {
         path: "/PaintShopView",

src/views/MicrofactoryDevOnline/components/RingChart.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="container">
+        <dv-border-box-6 :color="['#20aec5', '#20aec5']">
+            <div class="content">
+                <div class="status online">在线</div>
+                <div class="right-top">
+                    <div class="num">0</div>
+                    <div class="name">当日总针数</div>
+                </div>
+                <div class="chart" ref="chart"></div>
+                <div class="bottom">五线包缝机(RP2011158)</div>
+            </div>
+        </dv-border-box-6>
+
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { getCurrentInstance, ref, onMounted } from 'vue';
+const { proxy } = getCurrentInstance()! as any;
+const chart = ref(null);
+let myChart: any = null;
+const init = () => {
+    myChart = proxy.$echarts.init(chart.value);
+    let option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        color:['#95A2FF','#FA8080'],
+        series: [
+            {
+                type: 'pie',
+                radius: ['35%', '80%'],
+                avoidLabelOverlap: false,
+                label: {
+                    formatter: '{c}小时',
+                    position: 'inside',
+                    color: '#fff',
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    { value: 21, name: '工作时间' },
+                    { value: 3, name: '空闲时间' },
+                ]
+            }
+        ]
+    };
+    myChart.setOption(option);
+}
+
+onMounted(() => {
+    init();
+})
+</script>
+
+<style scoped>
+.container {
+    width: 100%;
+    height: 100%;
+}
+
+.content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.status {
+    position: absolute;
+    width: 80px;
+    height: 30px;
+    line-height: 30px;
+    top: 8px;
+    left: 12px;
+    font-size: 16px;
+}
+
+.right-top {
+    position: absolute;
+    width: 100px;
+    height: 50px;
+    top: 8px;
+    right: 12px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.right-top .num {
+    color: #1E90FF;
+    font-size: 18px;
+}
+
+.right-top .name {
+    color: #fff;
+    font-size: 12px;
+}
+
+.bottom {
+    width: 100%;
+    height: 24px;
+    color: #fff;
+    line-height: 24px;
+    font-size: 20px;
+    font-weight: bold;
+    position: absolute;
+    bottom: 8px;
+    left: 0;
+    text-align: center;
+    overflow: hidden;
+}
+
+.chart {
+    position: absolute;
+    width: 100%;
+    height: 70%;
+    left: 0;
+    bottom: 32px;
+}
+
+.online {
+    color: rgb(255, 140, 0);
+}
+
+.outline {
+    color: rgb(153, 153, 153);
+}
+</style>

src/views/MicrofactoryDevOnline/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div :class="$style['container']">
+    <div class="header">
+      <div class="title">
+        <header2
+          ref="headerref"
+          :width="'100%'"
+          :height="'120px'"
+          :title="t('messages.微工厂缝纫设备看板')"
+          :titleTip="titleTip"
+          :typeFun="['time']"
+          :alarmType="[]"
+        >
+        </header2>
+      </div>
+    </div>
+    <div class="content" ref="Acontent">
+      <div  v-for="inem in 21" class="ringchart">
+        <RingChart></RingChart>
+      </div>
+      
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import header2 from "@/components/headerBox/header2.vue";
+import RingChart from "./components/RingChart.vue";
+import {ref} from 'vue'
+import { useI18n } from 'vue-i18n'
+let {t} = useI18n();
+
+document.title = t('messages.微工厂缝纫设备看板');
+let titleTip = [
+  {
+    color: "#95A2FF",
+    name: t('messages.工作时间'),
+  },
+  {
+    color: "#FA8080",
+    name: t('messages.空闲时间'),
+  },
+];
+</script>
+<style module>
+.container {
+  height: 1080px;
+  width: 1920px;
+  color: #20aec5;
+  background-color: #100c2a;
+}
+</style>
+<style scoped>
+.content {
+  width: 100%;
+  --header: 120px;
+  height: calc(1080px - var(--header));
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.ringchart {
+  width: 260px;
+  height: 300px;
+}
+
+</style>