130 lines
3.2 KiB
Vue
130 lines
3.2 KiB
Vue
<template>
|
|
<div :class="$style['container']">
|
|
<div class="header">
|
|
<div class="title">
|
|
<header2 ref="headerref" :width="'100%'" :height="'120px'" :title="t('messages.微工厂缝纫设备看板')" :titleTip="titleTip"
|
|
:typeFun="['time']" :alarmType="[]">
|
|
</header2>
|
|
</div>
|
|
</div>
|
|
<div class="content" ref="Acontent">
|
|
<div v-for="item in arr" class="ringchart">
|
|
<RingChart :data="item"></RingChart>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
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'
|
|
import { getStoredLanguage, saveStoredLanguage } from "@/utils/languageStorage";
|
|
let { t } = useI18n();
|
|
const storedLocale = getStoredLanguage()
|
|
document.title = t('messages.微工厂缝纫设备看板');
|
|
let titleTip = [
|
|
// {
|
|
// color: "#95A2FF",
|
|
// name: t('messages.工作时间'),
|
|
// },
|
|
// {
|
|
// color: "#FA8080",
|
|
// name: t('messages.空闲时间'),
|
|
// },
|
|
];
|
|
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: item.id,
|
|
num: item.num,
|
|
status: item.status == 'true'? t('default.在线'):t('messages.offline'),
|
|
name: !storedLocale ||storedLocale == "简体中文"?item.name:item.ename,
|
|
label: item.label,
|
|
count: item.in4TodayCount,
|
|
todayRunTime: item.todayRunTime,
|
|
todayWorkTime: item.todayWorkTime,
|
|
}
|
|
});
|
|
arr_num.value = nums;
|
|
}
|
|
})
|
|
}
|
|
|
|
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? t('messages.offline'):t('default.在线')
|
|
|
|
}
|
|
if (data.type == "micSwingWorkingTime") {
|
|
console.log(arr.value,data.msg);
|
|
|
|
let msg = arr.value.find(item=>item.id == data.msg.deviceId)
|
|
msg.todayWorkTime = data.msg.todayWorkTime
|
|
msg.count = data.msg.in4TodayCount
|
|
}
|
|
|
|
} catch (err) {
|
|
console.log(err, "报错了大哥", console.log(val)
|
|
);
|
|
|
|
}
|
|
}
|
|
function errWebsocket(val) {
|
|
|
|
console.log(val);
|
|
}
|
|
|
|
onMounted(()=>{
|
|
reqSewingBoard()
|
|
timer = setInterval(() => {
|
|
reqSewingBoard()
|
|
}, 60000 * 60);
|
|
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
|
})
|
|
onUnmounted(()=>{
|
|
clearInterval(timer);
|
|
})
|
|
</script>
|
|
<style module>
|
|
.container {
|
|
height: 1080px;
|
|
width: 1920px;
|
|
color: #20aec5;
|
|
background-color: #100c2a;
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
.content {
|
|
width: 100%;
|
|
--header: 120px;
|
|
height: calc(1080px - var(--header));
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ringchart {
|
|
width: 250px;
|
|
height: 300px;
|
|
margin-left: 23px;
|
|
}
|
|
</style>
|