修改样式

src/utils/worker.js

@@ -29,7 +29,8 @@ const initWasm = (url) => {
       for (let i = 0; i < 2; i++) {
         drawPlc('AO', i, Math.floor(_GetTrustAO(i) / 100))
       }
-      drawPlc('time', 0, _GetTimeStamp())
+      // drawPlc('time', 0, _GetTimeStamp())
+      postMessage({ type: 'setTime', val: _GetTimeStamp() })
       await yieldCPU() // 让出cpu，保证有间隔进入消息接收回调
     }
   }
@@ -44,9 +45,9 @@ const canvasMsg = {
 }
 
 let distance = 48 // 每个模块间隔
-let textDis = 60
+let textDis = 72
 let r = 18
-let l_r_dis = 25
+let l_r_dis = 36
 const drawPlc = async (key, index, val, type) => {
   if (!ctx) return
   ctx.font = `${16 * ratioPixel}px 黑体`
@@ -54,6 +55,7 @@ const drawPlc = async (key, index, val, type) => {
   ctx.globalAlpha = 1
   if (type === 'init') {
     ctx.beginPath()
+    ctx.strokeStyle = '#'
     const modBetweenDis = (distance - 2 * r) / 2
     const safeDis = 10
     ctx.rect(
@@ -428,8 +430,8 @@ onmessage = (e) => {
     }
   }
   if (type === 'set') {
-    console.log(+i, +val);
-    
+    console.log(+i, +val)
+
     _SetTrustAI(+i, +val * 100)
     drawPlc('AI', +i, +val)
   }
@@ -465,14 +467,14 @@ onmessage = (e) => {
       }
     }
     // 判断是否点击时间
-    if (
-      x * ratio >= canvasMsg.width / 2 - 80 * ratio &&
-      x * ratio <= canvasMsg.width / 2 + 80 * ratio &&
-      y * ratio >= 20 * ratioPixel + l_r_dis &&
-      y * ratio <= 40 * ratio + l_r_dis
-    ) {
-      postMessage({ type: 'time' })
-      return
-    }
+    // if (
+    //   x * ratio >= canvasMsg.width / 2 - 80 * ratio &&
+    //   x * ratio <= canvasMsg.width / 2 + 80 * ratio &&
+    //   y * ratio >= 20 * ratioPixel + l_r_dis &&
+    //   y * ratio <= 40 * ratio + l_r_dis
+    // ) {
+    //   postMessage({ type: 'time' })
+    //   return
+    // }
   }
 }

src/views/runtime.vue

@@ -2,9 +2,10 @@
   <div class="runtime-container">
     <div class="header">
       <div class="go-back" @click="router.push(`/project-info/${crtProject!.id}`)">
-        <van-button size="small"><van-icon name="arrow-left" />返回</van-button>
+        <van-icon name="arrow-left" />{{ crtProject?.name }}
       </div>
-      <div class="title">{{ crtProject?.name }}</div>
+
+      <div class="time" @click="updateTime">PLC系统时间：{{ crtPlcTime }}</div>
     </div>
     <div class="canvas-main" ref="canvasMainRef">
       <canvas ref="canvasRef" @click="handleCanvasClick"></canvas>
@@ -38,6 +39,7 @@
 import type { ProjectType } from '@/types/global'
 import { useGlobalStore } from '@/stores/global'
 import { storeToRefs } from 'pinia'
+import { formatDateTime } from '@/utils/tools'
 
 const { projectList } = storeToRefs(useGlobalStore())
 
@@ -62,14 +64,19 @@ const ratio = window.devicePixelRatio
 const runtimeWorker = new Worker(new URL('@/utils/worker.js', import.meta.url))
 
 const popupType = ref('')
+const crtPlcTime = ref()
 runtimeWorker.onmessage = (e) => {
-  console.log(e.data)
-  const { type, i } = e.data
+  const { type, i, val } = e.data
+  if (type === 'setTime') {
+    crtPlcTime.value = formatDateTime(val * 1000)
+    return
+  }
   if (type === 'AI') {
     port.value = `AI${i}`
-  } else {
-    port.value = `设备时间与系统时间差值`
-  }
+  } 
+  // else {
+  //   port.value = `设备时间与系统时间差值`
+  // }
   popupType.value = type
   showPopup.value = true
 }
@@ -89,6 +96,12 @@ const handleCancel = () => {
   newVal.value = 0
 }
 
+const updateTime = () => {
+  popupType.value = 'time'
+  port.value = `设备时间与系统时间差值`
+  showPopup.value = true
+}
+
 let timer: any
 
 const handleCanvasClick = (e: MouseEvent) => {
@@ -136,26 +149,26 @@ onBeforeUnmount(() => {
   padding: 16px 0;
   /* height: 100%; */
   /* overflow: hidden; */
-  background: #fff;
+  /* background: #fff; */
 }
 .header {
   padding: 0 16px 16px;
   display: flex;
   gap: 8px;
   align-items: center;
+  justify-content: space-between;
 }
-.header .title {
-  flex: 1;
-  padding: 8px 16px;
-  background: #dfebf9;
-  border-radius: 4px;
-  line-height: 1.5;
-  border: 1px solid #ccc;
+.header .go-back {
+  max-width: 40%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .canvas-main {
-  margin: 0 16px;
+  margin: 0 8px;
   height: calc(100% - 80px);
-  border: 1px solid #666;
+  /* border: 1px solid #666; */
+  background: #fff;
   /* overflow: hidden; */
 }
 .van-button-group {