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('http://tjgoa.oss-cn-beijing.aliyuncs.com/202309141%E5%BE%AE%E5%B7%A5%E5%8E%82%E5%AE%A3%E4%BC%A0%E8%A7%86%E9%A2%91%E4%BA%8E%E6%89%BF%E5%BF%97.mp4')
const videoElement = ref(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([
])
let list = [
    [1, '自动缝纫机', 29, 1, '95%', '12min'],
    [1, '自动缝纫机', 29, 1, '95%', '12min'],
    [1, '自动缝纫机', 29, 1, '95%', '12min'],
    [1, '自动缝纫机', 29, 1, '95%', '12min'],
    [1, '自动缝纫机', 29, 1, '95%', '12min'],]

    //获取echarts数据
function getDeviceProduction() {
    getmDeviceProduction().then((res: any) => {
        if (res.code == 200) {
            let data = res.data
            console.log(data.series, 'data.series');
            
            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
            console.log(data, '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 == 'true' || item.status == '2') {
                            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;
                //     cjdata.value.list = data[key].map((item: any, i: number) => {
                //         if (item.status == 'true' || item.status == '2') {
                //             online++
                //         }
                //         return [i + 1, item.name, item.num, item.status, item.ratio, item.workTime]
                //     })
                //     stepList[0].online = online;
                //     stepList[0].total = cjdata.value.list.length;
                // }
                // if (key == '缝前设备') {
                //     let online = 0;
                //     fqdata.value.list = data[key].map((item: any, i: number) => {
                //         if (item.status == 'true' || item.status == '2') {
                //             online++
                //         }
                //         return [i + 1, item.name, item.num, item.status, item.ratio, item.workTime]
                //     })
                //     stepList[1].online = online;
                //     stepList[1].total = fqdata.value.list.length;

                // }
                // if (key == '缝中设备') {
                //     let online = 0;
                //     fzdata.value.list = data[key].map((item: any, i: number) => {
                //         if (item.status == 'true' || item.status == '2') {
                //             online++
                //         }
                //         return [i + 1, item.name, item.num, item.status, item.ratio, item.workTime]
                //     })
                //     stepList[2].online = online;
                //     stepList[2].total = fzdata.value.list.length;
                // }
                if (key == '后整设备') {
                    let online = 0;
                    hzdata.value = data[key].map((item: any, i: number) => {
                        if (item.status == 'true' || item.status == '2') {
                            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,
                        }
                    })
                    console.log(hzdata.value, 'hzdata.value');
                    
                    stepList[3].online = online;
                    stepList[3].total = hzdata.value.length;
                }
            }
        }
    })
}



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);
}


// function videoToBase64(file) {
//     return new Promise((resolve, reject) => {
//         let reader:any = new FileReader();
//         reader.readAsDataURL(file);
//         reader.onload = () => {
//             let base64 = reader.result.split(',')[1];
//             resolve(base64);
//         };
//         reader.onerror = error => reject(error);
//     });
// }

// async function loadeddataFun() {  
//     if (localStorage.getItem('videoUrl')) {
//         return
//     }

//     const response:any = await fetch(videoWebUrl);
//     const blob = await response.blob();
//     const fileReader:any = new FileReader();
//     console.log(response,'21313');

//     fileReader.readAsDataURL(response);
//     fileReader.onloadend = function () {
//         const file = new File([fileReader.result], 'video.mp4', { type: 'video/mp4' });
//         videoUrl.value = URL.createObjectURL(file);
//         let base64 = fileReader.result.split(',')[1];

//         localStorage.setItem('videoUrl', base64 )
//     };
//     fileReader.readAsArrayBuffer(blob);


// }


onMounted(() => {
    getDeviceProduction()
    getmDevList()
    connectWebsocket(null, null, getWebsocket, errWebsocket)
    document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
})

onUnmounted(() => {
    closeWebsocket()
    document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
})
</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>