screenFront/src/views/MicroExhibition/index.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 == 'mDeviceStatus') {
            changestatus(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>