update

src/utils/time.ts

@@ -55,3 +55,17 @@ export function clacendTime(endtime, nowtime) {
         var s = Math.floor(newDate / 1000 % 60)
         return day + '天' + h + '时' + m + '分' + s + '秒'
 }
+
+//时间戳转换
+export function timestampToTime(timestamp) {
+        const startDate = new Date(0); // 0 就是 1970年1月1日
+        const targetDate = new Date(timestamp);
+        const diff = targetDate.getTime() - startDate.getTime(); // 计算时间差（毫秒）
+        // let day = Math.floor(diff / (1000 * 60 * 60 * 24)); // 转换为天数
+        let hour = (Math.floor(diff / (1000 * 60 * 60) % 24)) < 10 ? '0'+(Math.floor(diff / (1000 * 60 * 60) % 24)) :(Math.floor(diff / (1000 * 60 * 60) % 24)); // 转换为小时
+        let minute = Math.floor(diff / (1000 * 60) % 60) < 10 ? '0'+Math.floor(diff / (1000 * 60) % 60) :Math.floor(diff / (1000 * 60) % 60); // 转换为分钟
+        let second = Math.floor(diff / 1000 % 60) < 10 ? '0'+Math.floor(diff / 1000 % 60):Math.floor(diff / 1000 % 60); // 转换为秒
+
+        return `${hour}:${minute}:${second}`;
+}
+

src/views/MicrofactoryDevOnline/components/RingChart.vue

@@ -7,7 +7,11 @@
                     <div class="num">{{ prop.data.count }}</div>
                     <div class="name">当日总针数</div>
                 </div>
-                <div class="chart" ref="chart"></div>
+                <!-- <div class="chart" ref="chart"></div> -->
+                 <div class="online-time">
+                    <span style="font-size:20px; color: #fff;">运行时长</span>
+                    <span>{{ timestampToTime(160000) }}</span>
+                 </div>
                 <div class="bottom">
                     <text>{{ prop.data.name }}</text>
                     <small>{{ prop.data.label }}</small>
@@ -20,6 +24,7 @@
 
 <script setup lang='ts'>
 import { getCurrentInstance, ref, onMounted,watch, computed } from 'vue';
+import {timestampToTime} from '@/utils/time'
 const { proxy } = getCurrentInstance()! as any;
 const chart = ref(null);
 let myChart: any = null;
@@ -46,42 +51,10 @@ let statusClass = computed(() => {
     return prop.data.status == '在线' ? 'online' : 'outline'
 })
 
-const init = () => {
-    if (!myChart) {
-        myChart = proxy.$echarts.init(chart.value);
-    }
 
-    let option = {
-        tooltip: {
-            trigger: 'item'
-        },
-        color: ['#95A2FF', '#FA8080'],
-        series: [
-            {
-                name: '',
-                type: 'pie',
-                radius: ['35%', '80%'],
-                avoidLabelOverlap: false,
-                label: {
-                    formatter: '{c}小时',
-                    position: 'inside',
-                    color: '#fff',
-                },
-                labelLine: {
-                    show: false
-                },
-                data: prop.data.series
-            }
-        ]
-    };
-    myChart.setOption(option);
-}
-watch(() => prop.data, (newVal, oldVal) => {
-    init();
-})
 
 onMounted(() => {
-    init();
+    //init();
 })
 </script>
 
@@ -160,6 +133,15 @@ onMounted(() => {
     left: 0;
     bottom: 50px;
 }
+.online-time {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 44px;
+}
 
 .online {
     color: rgb(255, 140, 0);

src/views/MicrofactoryDevOnline/index.vue

@@ -26,14 +26,14 @@ let { t } = useI18n();
 
 document.title = t('messages.微工厂缝纫设备看板');
 let titleTip = [
-  {
-    color: "#95A2FF",
-    name: t('messages.工作时间'),
-  },
-  {
-    color: "#FA8080",
-    name: t('messages.空闲时间'),
-  },
+  // {
+  //   color: "#95A2FF",
+  //   name: t('messages.工作时间'),
+  // },
+  // {
+  //   color: "#FA8080",
+  //   name: t('messages.空闲时间'),
+  // },
 ];
 let timer = null;
 let arr = ref([]);

src/views/Recorder/index.vue

@@ -199,10 +199,10 @@ function recPlay() {
 
 onMounted(() => {
   // recOpen()
-  document.getElementById('app').style.background = '#fff'
+  //document.getElementById('app').style.background = '#fff'
 })
 onUnmounted(() => {
-  document.getElementById('app').style.background = 'block'
+  //document.getElementById('app').style.background = 'block'
 })
 </script>
 <style scoped>