From c029f936cc1ac4d677e6d8455104fcfa8ad8e120 Mon Sep 17 00:00:00 2001 From: hzz Date: Mon, 8 Jul 2024 16:23:32 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E7=BC=9D=E7=BA=AB=E8=AE=BE=E5=A4=87?= =?UTF-8?q?=E7=9C=8B=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/RingChart.vue | 20 ++++--- src/views/MicrofactoryDevOnline/index.vue | 53 ++++++++++++------- src/views/Recorder/index.vue | 38 ++++++++++--- 3 files changed, 76 insertions(+), 35 deletions(-) diff --git a/src/views/MicrofactoryDevOnline/components/RingChart.vue b/src/views/MicrofactoryDevOnline/components/RingChart.vue index 059a69d..eb2d3bd 100644 --- a/src/views/MicrofactoryDevOnline/components/RingChart.vue +++ b/src/views/MicrofactoryDevOnline/components/RingChart.vue @@ -10,7 +10,7 @@
运行时长 - {{ timestampToTime(160000) }} + {{ timestampToTime(prop.data.todayRunTime) }}
{{ prop.data.name }} @@ -51,6 +51,10 @@ let statusClass = computed(() => { return prop.data.status == '在线' ? 'online' : 'outline' }) +let borderBoxColor = computed(() => { + return prop.data.status == '在线' ? ['#FF8C00', '#FF8C00'] : ['#999999', '#999999'] +}) + onMounted(() => { @@ -77,9 +81,9 @@ onMounted(() => { width: 80px; height: 30px; line-height: 30px; - top: 8px; + top: 20px; left: 12px; - font-size: 16px; + font-size: 20px; } .right-top { @@ -96,12 +100,12 @@ onMounted(() => { .right-top .num { color: #1E90FF; - font-size: 18px; + font-size: 20px; } .right-top .name { color: #fff; - font-size: 12px; + font-size: 14px; } .bottom { @@ -110,7 +114,7 @@ onMounted(() => { color: #fff; font-weight: bold; position: absolute; - bottom: 8px; + bottom: 20px; left: 0; text-align: center; overflow: hidden; @@ -120,10 +124,10 @@ onMounted(() => { align-items: center; } .bottom text { - font-size: 18px; + font-size: 20px; } .bottom small { - font-size: 14px; + font-size: 16px; } .chart { diff --git a/src/views/MicrofactoryDevOnline/index.vue b/src/views/MicrofactoryDevOnline/index.vue index 71950b5..25a7c81 100644 --- a/src/views/MicrofactoryDevOnline/index.vue +++ b/src/views/MicrofactoryDevOnline/index.vue @@ -21,6 +21,7 @@ import header2 from "@/components/headerBox/header2.vue"; import RingChart from "./components/RingChart.vue"; import { ref,onMounted,onUnmounted } from 'vue' import {getSewingBoard} from '@/http/device' +import { connectWebsocket, closeWebsocket } from "@/utils/websocket"; import { useI18n } from 'vue-i18n' let { t } = useI18n(); @@ -37,44 +38,58 @@ let titleTip = [ ]; let timer = null; let arr = ref([]); - +let arr_num = ref([]); function reqSewingBoard() { getSewingBoard().then((res:any) => { if (res.code == 200) { + let nums = [] arr.value = res.data.map(item=>{ + nums.push(item.num) return { - id: '', + id: item.id, + num: item.num, status: item.status == 'true'? '在线':'离线', name: item.name, label: item.label, - count: item.pins, - series: item.series + count: item.in4TodayCount, + todayRunTime: item.todayRunTime, + todayWorkTime: item.todayWorkTime, } }); + arr_num.value = nums; } }) } -// for (let index = 0; index < 21; index++) { -// let random = +(Math.random() * 24).toFixed(1); -// arr.push({ -// id: '', -// status: '在线', -// name: '五线包缝机', -// label: 'RP2011158', -// count: 0, -// series: [ -// { value: random, name: '工作时间' }, -// { value: (24-random).toFixed(1), name: '空闲时间' } -// ] -// }) -// } +function getWebsocket(val) { + try { + let data = JSON.parse(val); + + // + if (data.type == "mDeviceStatus"&&arr_num.value.includes(data.msg.num)) { + let msg = arr.value.find(item=>item.num == data.msg.num) + msg.status = data.msg.status === 0? '离线':'在线' + + + } + + } catch (err) { + console.log(err, "报错了大哥", console.log(val) + ); + + } +} +function errWebsocket(val) { + + console.log(val); +} onMounted(()=>{ reqSewingBoard() timer = setInterval(() => { reqSewingBoard() }, 60000); + connectWebsocket(null, null, getWebsocket, errWebsocket); }) onUnmounted(()=>{ clearInterval(timer); @@ -100,7 +115,7 @@ onUnmounted(()=>{ } .ringchart { - width: 260px; + width: 280px; height: 300px; } diff --git a/src/views/Recorder/index.vue b/src/views/Recorder/index.vue index 16632a8..7e2c9eb 100644 --- a/src/views/Recorder/index.vue +++ b/src/views/Recorder/index.vue @@ -39,19 +39,25 @@
-
+
- + -
+ + + + +
@@ -105,6 +111,19 @@ let pdfOptions = reactive({ //显示的配置信息 }, }) +let isMobile = ref(false) +//判断当前环境是PC端还是移动端 +function heckMobile() { + isMobile.value = typeof window.orientation !== "undefined" || // 判断是否存在window.orientation属性，此属性在移动设备上一般存在 + navigator.userAgent.indexOf('IEMobile') !== -1 || // 判断是否为Windows Phone + navigator.userAgent.indexOf('iPhone') !== -1 || // 判断是否为iPhone + navigator.userAgent.indexOf('Android') !== -1 && navigator.userAgent.indexOf('Mobile') !== -1 || // 判断是否为Android手机 + navigator.userAgent.indexOf('BlackBerry') !== -1 || // 判断是否为BlackBerry + navigator.userAgent.indexOf('Opera Mini') !== -1 // 判断是否为Opera Mini浏览器 + console.log(isMobile.value,navigator.userAgent); + +} + //打开录音，申请录音权限 function recOpen() { //创建录音对象 @@ -260,6 +279,7 @@ function getData() { } onMounted(() => { + heckMobile() getData() // recOpen() //document.getElementById('app').style.background = '#fff' @@ -367,11 +387,13 @@ onUnmounted(() => { justify-content: space-around; align-items: center; } + .item-btn .wave-start { - .wave { - animation: audio-wave 2s ease-in-out infinite; - } + .wave { + animation: audio-wave 2s ease-in-out infinite; } +} + .item-btn .audio { display: flex; justify-content: space-between; @@ -379,7 +401,7 @@ onUnmounted(() => { gap: 18px; width: 80px; height: 40px; - + .wave { height: 40px; display: block; @@ -387,7 +409,7 @@ onUnmounted(() => { height: 6px; border-radius: 8px; background: orange; - + &:nth-child(1) { animation-delay: 0.1s; }