update 缝纫设备看板
This commit is contained in:
hzz
parent
156631f864
commit
c029f936cc
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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 {
|
||||
animation: audio-wave 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-btn .audio {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user