src/utils/worker.js

@@ -20,17 +20,27 @@ const yieldCPU = () => {
 const initWasm = (url) => {
   importScripts(url)
   Module.onRuntimeInitialized = async function () {
+    let last_timestamp = 0
     _Init()
     while (true) {
       _Loop()
+      let trustDO = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
       for (let i = 0; i < 10; i++) {
-        drawPlc('DO', i, _GetTrustDO(i))
+        trustDO[i] = _GetTrustDO(i)
+      }
+      doCom = trustDO[0] || trustDO[1] || trustDO[2] || trustDO[3] || trustDO[4] || trustDO[5] || trustDO[6] || trustDO[7] || trustDO[8] || trustDO[9]
+      for (let i = 0; i < 10; i++) {
+        drawPlc('DO', i, trustDO[i])
       }
       for (let i = 0; i < 2; i++) {
         drawPlc('AO', i, Math.floor(_GetTrustAO(i) / 100))
       }
       // drawPlc('time', 0, _GetTimeStamp())
-      postMessage({ type: 'setTime', val: _GetTimeStamp() })
+      let now_timestamp = _GetTimeStamp()
+      if (now_timestamp != last_timestamp) { // 防止反复高频调用postMessage，把主线程的性能也拉低了。
+        postMessage({ type: 'setTime', val: now_timestamp })
+        last_timestamp = now_timestamp
+      }
       await yieldCPU() // 让出cpu，保证有间隔进入消息接收回调
     }
   }
@@ -116,7 +126,7 @@ const drawPlc = async (key, index, val, type) => {
 
     // left com
     ctx.beginPath()
-    ctx.fillStyle = 'red'
+    ctx.fillStyle = (DIValMap[0] || DIValMap[1] || DIValMap[2] || DIValMap[3] || DIValMap[4] || DIValMap[5] || DIValMap[6] || DIValMap[7] || DIValMap[8] || DIValMap[9]) ? '#green' : 'red'
     ctx.arc(l_r_dis, l_r_dis, r, 0, 2 * Math.PI)
     ctx.fill()
     const textInfo = ctx.measureText('COM')
@@ -281,6 +291,18 @@ const drawPlc = async (key, index, val, type) => {
   switch (key) {
     case 'DI':
     case 'DO':
+      // left com
+      ctx.beginPath()
+      ctx.fillStyle = (DIValMap[0] || DIValMap[1] || DIValMap[2] || DIValMap[3] || DIValMap[4] || DIValMap[5] || DIValMap[6] || DIValMap[7] || DIValMap[8] || DIValMap[9]) ? 'green' : 'red'
+      ctx.arc(l_r_dis, l_r_dis, r, 0, 2 * Math.PI)
+      ctx.fill()
+
+      // right com
+      ctx.beginPath()
+      ctx.fillStyle = doCom ? 'green' : 'red'
+      ctx.arc(canvasMsg.width - l_r_dis, l_r_dis, r, 0, 2 * Math.PI)
+      ctx.fill()
+
       ctx.clearRect(key === 'DI' ? l_r_dis - r : canvasMsg.width - l_r_dis - r, y - r, r * 2, r * 2)
       ctx.beginPath()
       ctx.fillStyle = val !== 0 ? 'green' : 'red'
@@ -397,7 +419,8 @@ const drawPlc = async (key, index, val, type) => {
   }
 }
 
-const DIValMap = {}
+const DIValMap = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+let doCom = false
 
 onmessage = (e) => {
   const { type, url, ratio, canvas, position, val, i } = e.data

src/views/runtime.vue

@@ -32,6 +32,41 @@
         </div>
       </van-form>
     </van-popup>
+
+    <van-popup v-model:show="showDateTime" round :style="{ width: '80%' }" :close-on-click-overlay="false">
+      <van-form @submit="onSubmit" label-width="48">
+        <van-cell-group inset>
+          <van-field border v-model="port" label="端口" readonly name="port" />
+          <van-field
+            v-model="newVal"
+            label="值"
+            name="newVal"
+            type="text"
+            number="2.2"
+            placeholder="请输入数值"
+            :rules="[{ required: true, message: '请填写要设置的值' }]"
+            title="请选择日期时间"
+            is-link
+            readonly
+            border
+            @click="showPicker = true"
+          />
+        </van-cell-group>
+        <div class="van-button-group">
+          <van-button @click="handleCancel" size="small">取消</van-button>
+          <van-button type="primary" native-type="submit" size="small">确定</van-button>
+        </div>
+      </van-form>
+    </van-popup>
+
+    <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
+      <van-picker
+        :model-value="pickerValue"
+        :columns="columns"
+        @cancel="showPicker = false"
+        @confirm="PickerConfirm"
+      />
+    </van-popup>
   </div>
 </template>
 
@@ -82,24 +117,85 @@ runtimeWorker.onmessage = (e) => {
 }
 const port = ref('AI0')
 const showPopup = ref(false)
-const newVal = ref(0)
+const showPicker = ref(false)
+const showDateTime = ref(false)
+const newVal: any = ref(0)
+const columns = reactive([[{}], [{}], [{}], [{}], [{}], [{}]])
+const pickerValue = reactive([0, 0, 0, 0, 0, 0])
+
 const onSubmit = () => {
   runtimeWorker.postMessage({
     type: popupType.value === 'AI' ? 'set' : 'time',
-    val: newVal.value,
+    val: popupType.value === 'AI' ? newVal.value : (new Date(newVal.value).getTime() - new Date().getTime()) / 1000,
     i: port.value.slice(-1)
   })
   handleCancel()
 }
 const handleCancel = () => {
   showPopup.value = false
+  showDateTime.value = false
+  showPicker.value = false
   newVal.value = 0
 }
 
 const updateTime = () => {
+  let len = columns.length
+  columns.splice(0, len) //清空数组
+  let date = new Date(crtPlcTime.value)
+  let year = []
+  for (let i = 0 ; i < 100 ; i++)
+  {
+    let y = date.getFullYear() - 10 + i
+    year.push({'text': y + '', value: y})
+  }
+  columns[0] = year
+  let month = []
+  for (let i = 0 ; i < 12 ; i++)
+  {
+    let m = i + 1
+    month.push({'text': String(m).padStart(2, '0'), value: m})
+  }
+  columns[1] = month
+  let day = []
+  for (let i = 0 ; i < 31 ; i++)
+  {
+    let d = i + 1
+    day.push({'text': String(d).padStart(2, '0'), value: d})
+  }
+  columns[2] = day
+  let hour = []
+  for (let i = 0 ; i < 24 ; i++)
+  {
+    hour.push({'text': String(i).padStart(2, '0'), value: i})
+  }
+  columns[3] = hour
+  let min_sec = []
+  for (let i = 0 ; i < 60 ; i++)
+  {
+    min_sec.push({'text': String(i).padStart(2, '0'), value: i})
+  }
+  columns[4] = min_sec
+  columns[5] = min_sec
+  pickerValue[0] = date.getFullYear()
+  pickerValue[1] = date.getMonth() + 1
+  pickerValue[2] = date.getDate()
+  pickerValue[3] = date.getHours()
+  pickerValue[4] = date.getMinutes()
+  pickerValue[5] = date.getSeconds()
+  newVal.value = crtPlcTime.value
   popupType.value = 'time'
-  port.value = `设备时间与系统时间差值`
-  showPopup.value = true
+  port.value = `设备时间`
+  showDateTime.value = true
+}
+
+const PickerConfirm = (res: any) => {
+  newVal.value = String(res.selectedValues[0]) + '-' +
+    String(res.selectedValues[1]).padStart(2, '0') + '-' +
+    String(res.selectedValues[2]).padStart(2, '0') + ' ' +
+    String(res.selectedValues[3]).padStart(2, '0') + ':' +
+    String(res.selectedValues[4]).padStart(2, '0') + ':' +
+    String(res.selectedValues[5]).padStart(2, '0')
+  showPicker.value = false
 }
 
 let timer: any