445 lines
11 KiB
Vue
445 lines
11 KiB
Vue
<!--
|
|
* @Author: hzz hzz
|
|
* @Date: 2023-12-06 15:21:39
|
|
* @LastEditors: hzz hzz
|
|
* @LastEditTime: 2023-12-06 16:40:32
|
|
* @FilePath: \screenFront\src\views\MicroExhibition\index.vue
|
|
* @Description:
|
|
*
|
|
* Copyright (c) 2023 by ${hzz}, All Rights Reserved.
|
|
-->
|
|
<template>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="title">
|
|
<Header :title="'富怡服装微工厂物联管理平台'" :wh="{ width: '100%', height: '100px' }"></Header>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="left">
|
|
<div class="ltop">
|
|
<BoardVue :title="'裁剪设备'" class="ltborder">
|
|
|
|
<div class="lttop">
|
|
<ScrollBoard :data="cjdata"></ScrollBoard>
|
|
</div>
|
|
<div class="ltbottom">
|
|
<BarChart :xData="xData" style="width: 100%;height: 100%;" :seriesData="seriesData"></BarChart>
|
|
</div>
|
|
</BoardVue>
|
|
</div>
|
|
<div class="lbottom">
|
|
<BoardVue :title="'缝前设备'">
|
|
<ScrollBoard :data="fqdata"></ScrollBoard>
|
|
</BoardVue>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="rtop">
|
|
<div class="rtleft">
|
|
<div class="rtltop">
|
|
<StepItem v-for="i in stepList" :data="i"></StepItem>
|
|
</div>
|
|
<div class="rtlbottom">
|
|
<video controls loop autoplay="true" ref="videoElement" width="777">
|
|
<source :src="videoUrl" type="video/mp4" />
|
|
</video>
|
|
</div>
|
|
</div>
|
|
<div class="rtright">
|
|
<BoardVue :title="'缝中设备'">
|
|
<ScrollBoard :data="fzdata"></ScrollBoard>
|
|
</BoardVue>
|
|
</div>
|
|
</div>
|
|
<div class="rbottom">
|
|
<BottomBorder :data="hzdata"></BottomBorder>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
import Header from './component/Header.vue'
|
|
import BoardVue from './component/Border.vue'
|
|
import StepItem from './component/StepItem.vue'
|
|
import BottomBorder from './component/BottomBorder.vue'
|
|
import ScrollBoard from './component/ScrollBoard.vue'
|
|
import BarChart from './component/BarChart.vue'
|
|
|
|
import { getmDeviceList, getmDeviceProduction } from '@/http/MicroExhibition'
|
|
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed, reactive } from 'vue'
|
|
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
|
|
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
|
|
|
|
import { useI18n } from 'vue-i18n'
|
|
let { t } = useI18n();
|
|
const store = useMicroExhibitionStore()
|
|
|
|
let videoUrl = ref('https://d.tufting222.cn/video/yzy/a.mp4')
|
|
const videoElement = ref(null)
|
|
let timer = null
|
|
|
|
let fqdata = ref({
|
|
list: [],
|
|
rowNum: 3,
|
|
})
|
|
let fzdata = ref({
|
|
list: [],
|
|
rowNum: 10,
|
|
})
|
|
let cjdata = ref({
|
|
list: [],
|
|
rowNum: 4,
|
|
})
|
|
|
|
let stepList = reactive([
|
|
{
|
|
name: '裁剪',
|
|
total: 0,
|
|
online: 0,
|
|
},
|
|
{
|
|
name: '缝前',
|
|
total: 0,
|
|
online: 0,
|
|
},
|
|
{
|
|
name: '缝中',
|
|
total: 0,
|
|
online: 0,
|
|
},
|
|
{
|
|
name: '后整',
|
|
total: 0,
|
|
online: 0,
|
|
},
|
|
])
|
|
let hzdata = ref([])
|
|
let xData = ref([])
|
|
let seriesData = ref([
|
|
])
|
|
|
|
//获取echarts数据
|
|
function getDeviceProduction() {
|
|
getmDeviceProduction().then((res: any) => {
|
|
if (res.code == 200) {
|
|
let data = res.data
|
|
seriesData.value = data.series.map(item => {
|
|
return {
|
|
name: item.name == '计划完成' ? '计划产量' : '实际产量',
|
|
type: 'bar',
|
|
data: item.data
|
|
}
|
|
})
|
|
xData.value = data.xData
|
|
}
|
|
})
|
|
}
|
|
|
|
//获取设备列表
|
|
function getmDevList() {
|
|
getmDeviceList().then((res: any) => {
|
|
if (res.code == 200) {
|
|
let data = res.data
|
|
for (let key in data) {
|
|
const devObj = {
|
|
'裁剪设备': cjdata.value,
|
|
'缝前设备': fqdata.value,
|
|
'缝中设备': fzdata.value,
|
|
}
|
|
const statusObj = {
|
|
'裁剪设备': 0,
|
|
'缝前设备': 1,
|
|
'缝中设备': 2,
|
|
}
|
|
if (devObj.hasOwnProperty(key)) {
|
|
let online = 0;
|
|
devObj[key].list = data[key].map((item: any, i: number) => {
|
|
if (item.status != 'false' && item.status != '0') {
|
|
online++
|
|
}
|
|
let temp = item.status
|
|
if (item.status == "true") {
|
|
temp = '2'
|
|
} else if (item.status == "false") {
|
|
temp = '0'
|
|
}
|
|
return [i + 1, item.name, item.num, temp, item.ratio, item.workTime]
|
|
})
|
|
stepList[statusObj[key]].online = online;
|
|
stepList[statusObj[key]].total = devObj[key].list.length;
|
|
}
|
|
if (key == '后整设备') {
|
|
let online = 0;
|
|
hzdata.value = data[key].map((item: any, i: number) => {
|
|
if (item.status != 'false' && item.status != '0') {
|
|
online++
|
|
}
|
|
let temp = item.status
|
|
if (item.status == "true") {
|
|
temp = '2'
|
|
} else if (item.status == "false") {
|
|
temp = '0'
|
|
}
|
|
return {
|
|
name: item.name,
|
|
num: item.num,
|
|
status: temp,
|
|
ratio: item.ratio,
|
|
rationum: parseInt(item.ratio.split('%')[0]),
|
|
workTime: item.workTime,
|
|
}
|
|
})
|
|
stepList[3].online = online;
|
|
stepList[3].total = hzdata.value.length;
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
/*
|
|
改变设备状态
|
|
{
|
|
step:'裁剪设备',
|
|
num:1,
|
|
status:0
|
|
}
|
|
*/
|
|
function changestatus(val) {
|
|
const devObj = {
|
|
'裁剪设备': cjdata.value,
|
|
'缝前设备': fqdata.value,
|
|
'缝中设备': fzdata.value,
|
|
}
|
|
const statusObj = {
|
|
'裁剪设备': 0,
|
|
'缝前设备': 1,
|
|
'缝中设备': 2,
|
|
}
|
|
if (val.step == "后整设备") {
|
|
let hzdataIndex = hzdata.value.findIndex((item, index) => {
|
|
return item.num == val.num
|
|
})
|
|
|
|
if (hzdataIndex !== -1 && hzdata.value[hzdataIndex].status != val.status) {
|
|
if (hzdata.value[hzdataIndex].status != 0 && val.status == '0') {
|
|
stepList[3].online -= 1
|
|
} else if (hzdata.value[hzdataIndex].status == 0 && val.status != '0') {
|
|
stepList[3].online += 1
|
|
}
|
|
hzdata.value[hzdataIndex].status = val.status
|
|
|
|
}
|
|
} else {
|
|
let dataIndex = devObj[val.step].list.findIndex((item, index) => {
|
|
return item[2] == val.num
|
|
})
|
|
if (dataIndex !== -1 && devObj[val.step].list[dataIndex][3] != val.status) {
|
|
if (devObj[val.step].list[dataIndex][3] != 0 && val.status == '0') {
|
|
stepList[statusObj[val.step]].online -= 1
|
|
} else if (devObj[val.step].list[dataIndex][3] == 0 && val.status != '0') {
|
|
stepList[statusObj[val.step]].online += 1
|
|
}
|
|
devObj[val.step].list[dataIndex][3] = val.status
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function getWebsocket(val) {
|
|
try {
|
|
let data = JSON.parse(val)
|
|
|
|
|
|
// if (data.type == 'StateChart') {
|
|
// store.setDevnum(data.msg)
|
|
// }
|
|
// if (data.type == 'WorkingState') {
|
|
// store.changestatus(data.msg)
|
|
// }
|
|
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
|
|
}
|
|
function errWebsocket(val) {
|
|
// console.log(val);
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
getDeviceProduction()
|
|
getmDevList()
|
|
timer = setInterval(() => {
|
|
getDeviceProduction()
|
|
getmDevList()
|
|
}, 60 * 1000)
|
|
|
|
|
|
// setInterval(() => {
|
|
// let status = Math.round(Math.random() * 3)
|
|
// let val = {
|
|
// step: '后整设备',
|
|
// num: 24,
|
|
// status: status
|
|
// }
|
|
|
|
// changestatus(val)
|
|
// }, 5000)
|
|
connectWebsocket(null, null, getWebsocket, errWebsocket)
|
|
document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
closeWebsocket()
|
|
clearInterval(timer)
|
|
document.getElementById('app').style.backgroundColor = '#100c2a'
|
|
})
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.container {
|
|
height: 1080px;
|
|
width: 1920px;
|
|
color: #FFFFFF;
|
|
background-color: rgba(0, 11, 18, 1);
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.header {
|
|
height: 100px;
|
|
width: 1920px;
|
|
}
|
|
|
|
.content {
|
|
height: 980px;
|
|
width: 1920px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 0 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.left {
|
|
width: 540px;
|
|
height: 100%;
|
|
margin-left: 13px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.ltop {
|
|
width: 100%;
|
|
height: 630px;
|
|
}
|
|
|
|
.ltborder {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.lttop {
|
|
width: 100%;
|
|
height: 240px;
|
|
}
|
|
|
|
.ltbottom {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 270px;
|
|
}
|
|
|
|
|
|
|
|
.lbottom {
|
|
width: 100%;
|
|
height: 335px;
|
|
}
|
|
|
|
.right {
|
|
width: 1330px;
|
|
height: 100%;
|
|
margin-right: 13px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.rtop {
|
|
width: 100%;
|
|
height: 715px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.rbottom {
|
|
width: 100%;
|
|
height: 250px;
|
|
}
|
|
|
|
.rtleft {
|
|
width: 777px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.rtltop {
|
|
width: 100%;
|
|
height: 120px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.rtlbottom {
|
|
width: 100%;
|
|
height: 580px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* background-image: url('./images/border.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 10px; */
|
|
}
|
|
|
|
.rtlbottom .video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: fill;
|
|
}
|
|
|
|
.rtright {
|
|
width: 540px;
|
|
height: 100%;
|
|
}
|
|
</style>
|