screenFront/src/views/MicroExhibition/index.vue

<!--
 * @Author: hzz hzz
 * @Date: 2023-12-05 13:30:45
 * @LastEditors: hzz hzz
 * @LastEditTime: 2023-12-05 16:54:15
 * @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="'裁剪设备'"></BoardVue>
                </div>
                <div class="lbottom">
                    <BoardVue :title="'缝前设备'"></BoardVue> 
                </div>
            </div>
            <div class="right">
                <div class="rtop">
                    <div class="rtleft">
                        <div class="rtltop"></div>
                        <div class="rtlbottom"></div>
                    </div>
                    <div class="rtright">
                        <BoardVue :title="'缝中设备'"></BoardVue>
                    </div>
                </div>
                <div class="rbottom">
                    右下
                </div>
            </div>
        </div>
        
    </div>
</template>

<script setup lang='ts'>
import Header from './component/Header.vue'
import BoardVue from './component/Border.vue'

import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } 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 timer = null
let dev_caijian_title = ['设备名称', '编号','状态', '稼动率', '工作时长']







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(() => {
    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;
}

.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;
    background: #bfe;
}

.rtleft {
    width: 777px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.rtltop {
    width: 100%;
    height: 120px;
    background: #bff;
}
.rtlbottom {
    width: 100%;
    height: 580px;
    background: #bf1;
}

.rtright {
    width: 540px;
    height: 100%;
}







</style>