screenFront/src/views/MicroExhibition/index.vue

<!--
 * @Author: hzz hzz
 * @Date: 2023-12-05 13:30:45
 * @LastEditors: hzz hzz
 * @LastEditTime: 2023-12-06 15:17:05
 * @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="'缝前设备'">
                        <ScrollBoard :data="fqdata"></ScrollBoard>
                    </BoardVue>
                </div>
            </div>
            <div class="right">
                <div class="rtop">
                    <div class="rtleft">
                        <div class="rtltop">
                            <StepItem v-for="i in 4"></StepItem>
                        </div>
                        <div class="rtlbottom">
                            <video controls loop autoplay="true" width="777">
                                <source src="https://tjgoa.oss-cn-beijing.aliyuncs.com/20230914%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"
                                    type="video/mp4" />
                            </video>
                            <!-- <video class="video"
                                src="https://tjgoa.oss-cn-beijing.aliyuncs.com/20230914%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"
                                autoplay></video> -->
                        </div>
                    </div>
                    <div class="rtright">
                        <BoardVue :title="'缝中设备'">
                            <ScrollBoard :data="fzdata"></ScrollBoard>
                        </BoardVue>
                    </div>
                </div>
                <div class="rbottom">
                    <BottomBorder></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 { 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 fqdata = ref({
    list: [],
    rowNum: 3,
})
let fzdata = ref({
    list: [],
    rowNum: 10,
})
let listdata = reactive([])
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'],]
setTimeout(() => {
    fqdata.value.list.push(...list)
    fzdata.value.list.push(...[...list, ...list, ...list])
}, 1000);




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

.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>