screenFront/src/views/Exhibition/Colombia/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">
                <BorderVue :title="'服装模板机'">
                    <div class="box">
                        <img src="./images/fzmbj.png" class="fzmbj-img" alt="">
                        <div class="devcard-container">
                            <DevCard :dev_title="dev_title" :dev_value="dev_value">
                                <BarChart style="width: 100%;height: 100%;" :xData="data.xData" :seriesData="data.series">
                                </BarChart>
                            </DevCard>
                        </div>

                    </div>

                </BorderVue>
            </div>
            <div class="center">
                <div class="ctop">
                    <video controls loop autoplay="true" ref="videoElement" width="780">
                        <source :src="videoUrl" type="video/mp4" />
                    </video>
                </div>
                <div class="cbottom">
                    <BorderVue :title="'单头混合毛巾绣花机'">
                        <div class="box">
                            <div class="box-top">
                                <div class="top-item" v-for="(item, index) in mjxhj_data">
                                    <span class="key-text">{{ item.key }}:</span>
                                    <span class="value-text">{{ item.value }}</span>
                                </div>
                            </div>

                        </div>
                    </BorderVue>
                </div>
            </div>
            <div class="right">
                <BorderVue :title="'绘图仪（一代）'">
                    <div class="box">
                        <img src="./images/hty.png" class="fzmbj-img" alt="">
                        <div class="devcard-container">
                            <DevCard :dev_title="dev_title" :dev_value="dev_value">
                                <BarChart style="width: 100%;height: 100%;" :xData="data.xData" :seriesData="data.series">
                                </BarChart>
                            </DevCard>
                        </div>

                    </div>
                </BorderVue>
            </div>
        </div>

    </div>
</template>

<script setup lang='ts'>
import Header from './component/Header.vue'
import BorderVue from './component/Border.vue'
import DevCard from './component/DevCard.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 dev_title = ref(['机架号', '设备状态', '稼 动 率', '工作时长'])
let dev_value = ref([
    [102014422, '0', '40层', '0min']
])
let mjxhj_data = ref([
    { key: '机 架 号', value: '102014422' },
    { key: '设备状态', value: 2 },
    { key: '稼 动 率', value: '40层' },
    { key: '工作时长', value: '0min' },
])
let data = reactive({ series: [], xData: [] })
setTimeout(() => {
    data.series = [
        {
            "type": "bar",
            "data": [
                100,
            ],
            "name": "计划完成"
        },
        {
            "type": "bar",
            "data": [
                0,
            ],
            "name": "实际完成"
        }
    ]
    data.xData = [
        "振镜激光裁床",
    ]
})




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





    // 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,
.right {
    width: 540px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

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

.ctop {
    width: 100%;
    height: 490px;
    /* background: url(./images/border.png) no-repeat;
    background-size: 100% 100%; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.cbottom {
    width: 100%;
    height: 480px;
}


.box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.fzmbj-img {
    height: 345px;
}

.devcard-container {
    width: 100%;
    height: calc(100% - 335px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 15px;
    box-sizing: border-box;
}

.box-top {
    width: 100%;
    height: 30%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.box-bottom {
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top-item {
    width: 33%;
    height: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20px;
}
.key-text {
    width: 60%;
    font-size: 28px;
    color: #00FFFFFE;
    font-family: '华文新魏', sans-serif;
}

.value-text {
    width: 40%;
    font-size: 24px;
    color: #AEEEFAFE;
    font-family: '华文新魏', sans-serif;
    text-align: left;
    box-sizing: border-box;
    padding-left: 10px;
}
</style>