493 lines
13 KiB
Vue
493 lines
13 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="t('MicroExhibition.富怡服装微工厂物联管理平台')" :wh="{ width: '100%', height: '100px' }"></Header>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="left">
|
|
<div class="ltop">
|
|
<BoardVue :title="t('MicroExhibition.裁剪设备')" 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="t('MicroExhibition.缝前设备')">
|
|
<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="t('MicroExhibition.缝中设备')">
|
|
<ScrollBoard :data="fzdata" @zdclick="zdclick"></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 { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
|
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 { getStoredLanguage, saveStoredLanguage, languageHash } from "@/utils/languageStorage";
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { id } from 'element-plus/es/locale'
|
|
let { t } = useI18n();
|
|
let route = useRoute()
|
|
let router = useRouter()
|
|
const store = useMicroExhibitionStore()
|
|
let lang = route.query.lang as string
|
|
let videoUrl = ref('https://d.tufting222.cn/video/yzy/a.mp4')
|
|
const videoElement = ref(null)
|
|
let timer = null
|
|
let thisLang = getStoredLanguage();
|
|
let fqdata = ref({
|
|
list: [],
|
|
rowNum: 3,
|
|
})
|
|
let fzdata = ref({
|
|
list: [],
|
|
rowNum: 10,
|
|
})
|
|
let cjdata = ref({
|
|
list: [],
|
|
rowNum: 4,
|
|
})
|
|
|
|
let stepList = reactive([
|
|
{
|
|
name: t("MicroExhibition.裁剪设备"),
|
|
total: 0,
|
|
online: 0,
|
|
},
|
|
{
|
|
name: t("MicroExhibition.缝前设备"),
|
|
total: 0,
|
|
online: 0,
|
|
},
|
|
{
|
|
name: t("MicroExhibition.缝中设备"),
|
|
total: 0,
|
|
online: 0,
|
|
},
|
|
{
|
|
name: t("MicroExhibition.后整设备"),
|
|
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 == '计划完成' ? t('default.计划产量') : t('default.实际产量'),
|
|
type: 'bar',
|
|
data: item.data
|
|
}
|
|
})
|
|
let xDataArr = thisLang && thisLang != "简体中文" ? data.exData : data.xData
|
|
xData.value = xDataArr
|
|
}
|
|
})
|
|
}
|
|
|
|
//获取设备列表
|
|
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'
|
|
}
|
|
let devname = thisLang && thisLang != "简体中文" ? item.ename : item.name
|
|
return [i + 1, { devname, label: item.label, id: item.id }, 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'
|
|
}
|
|
let devname = thisLang && thisLang != "简体中文" ? item.ename : item.name
|
|
return {
|
|
name: { devname, label: item.label },
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
//缝纫设备点击事件
|
|
function zdclick(value) {
|
|
if (value.row) {
|
|
console.log(value, fzdata.value.list);
|
|
let row = value.row
|
|
let num = row[2]
|
|
let index = fzdata.value.list.findIndex((item, index) => {
|
|
return item[2] == num
|
|
})
|
|
|
|
if (index !== -1) {
|
|
ElMessageBox.confirm(
|
|
'是否进入缝纫机控制界面?',
|
|
'通知',
|
|
{
|
|
confirmButtonText: '确认',
|
|
cancelButtonText: '取消',
|
|
type: 'info',
|
|
}
|
|
)
|
|
.then(() => {
|
|
router.push({
|
|
path: '/ExhibitionStation_' + fzdata.value.list[index][1].id
|
|
})
|
|
})
|
|
.catch(() => {
|
|
// ElMessage({
|
|
// type: 'info',
|
|
// message: 'Delete canceled',
|
|
// })
|
|
})
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/*
|
|
改变设备状态
|
|
{
|
|
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 == 'mDeviceStatus') {
|
|
changestatus(data.msg)
|
|
}
|
|
// if (data.type == 'WorkingState') {
|
|
// store.changestatus(data.msg)
|
|
// }
|
|
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
|
|
}
|
|
function errWebsocket(val) {
|
|
// console.log(val);
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
if (thisLang && thisLang != "简体中文") {
|
|
videoUrl.value = "https://d.tufting222.cn/video/yzy/micor_edos_english.mp4"
|
|
}
|
|
|
|
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>
|