update 缝纫设备看板

src/views/MicrofactoryDevOnline/components/RingChart.vue

@@ -10,7 +10,7 @@
                 <!-- <div class="chart" ref="chart"></div> -->
                  <div class="online-time">
                     <span style="font-size:20px; color: #fff;">运行时长</span>
-                    <span>{{ timestampToTime(160000) }}</span>
+                    <span>{{ timestampToTime(prop.data.todayRunTime) }}</span>
                  </div>
                 <div class="bottom">
                     <text>{{ prop.data.name }}</text>
@@ -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 {

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,
+          count: item.in4TodayCount,
-          series: item.series
+          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;
 }
 </style>

src/views/Recorder/index.vue

@@ -39,19 +39,25 @@
         <div class="item-btn"> <!-- 按钮 -->
           <!-- <button @click="recOpen">打开录音,请求权限</button> -->
           <!-- | <el-button type="primary" size="large" @click="recPlay">本地试听</el-button> -->
-          <div class="audio" :class="{'wave-start':is_start}">
+          <div class="audio" :class="{ 'wave-start': is_start }">
             <div class="wave"></div>
             <div class="wave"></div>
             <div class="wave"></div>
             <div class="wave"></div>
             <div class="wave"></div>
           </div>
-          <el-button size="large" class="btn-class" @mousedown="recOpen" @mouseup="recStop">
+          <el-button size="large" class="btn-class" @touchstart="recOpen" @touchend="recStop" v-if="isMobile">
             <template #icon>
               <i class="iconfont icon-yuyin" style="font-size: 80px;"></i>
             </template>
           </el-button>
-          <div class="audio " :class="{'wave-start':!!rec}">
+          <el-button size="large" class="btn-class" @mousedown="recOpen" @mouseup="recStop" v-else>
+            <template #icon>
+              <i class="iconfont icon-yuyin" style="font-size: 80px;"></i>
+            </template>
+          </el-button>
+
+          <div class="audio " :class="{ 'wave-start': !!rec }">
             <div class="wave"></div>
             <div class="wave"></div>
             <div class="wave"></div>
@@ -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 {
+  .wave {
-      animation: audio-wave 2s ease-in-out infinite;
+    animation: audio-wave 2s ease-in-out infinite;
-    }
   }
+}
+
 .item-btn .audio {
   display: flex;
   justify-content: space-between;