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="t('messages.富怡物联管理平台')" :wh="{ width: '100%', height: '100px' }"></Header>
            </div>
        </div>
        <div class="content">
            <div class="left">
                <BorderVue :title="t('messages.服装模板机')">
                    <div class="box">
                        <img src="./images/fzmbj.png" class="fzmbj-img" alt="">
                        <div class="devcard-container">
                            <DevCard :dev_title="dev_title" :dev_value="mubanji_value">
                                <BarChart style="width: 100%;height: 100%;" :xData="data_chart.xData" :seriesData="data_chart.mubanji_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="t('messages.单头混合毛巾绣花机')">
                        <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"  :class="{ status: index == 1 }"
                            :style="{ background: index == 1 ? status_color[item.value] : '' }">{{ index ==
                                1 ? '' : item.value }}</span>
                                </div>
                            </div>
                            <div class="box-bottom">
                                <div class="box-bottom-left">
                                    <BarChart style="width: 100%;height: 100%;" :xData="data_chart.xData" :seriesData="data_chart.xiuhuaji_series">
                                </BarChart>
                                </div>
                                <div class="box-bottom-right">
                                    <img src="./images/mjxhj.png" alt="">
                                </div>
                            </div>
                        </div>
                    </BorderVue>
                </div>
            </div>
            <div class="right">
                <BorderVue :title="t('messages.绘图仪')">
                    <div class="box">
                        <img src="./images/hty.png" class="fzmbj-img" alt="">
                        <div class="devcard-container">
                            <DevCard :dev_title="dev_title" :dev_value="huituyi_value">
                                <BarChart style="width: 100%;height: 100%;" :xData="data_chart.xData" :seriesData="data_chart.huituyi_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 {columbiaDeviceList,columbiaDeviceProduction} from '@/http/Exhibition/Colombia'
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
import { getStoredLanguage, saveStoredLanguage,languageHash } from "@/utils/languageStorage";
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
let route = useRoute()
let { t } = useI18n();
let lang = route.query.lang as string

if (lang &&languageHash(lang)&&languageHash(lang) != getStoredLanguage()) {
    saveStoredLanguage(languageHash(lang))
    window.location.reload()
}

let videoUrl = ref('https://d.tufting222.cn/video/yzy/Spanish.mp4')
const videoElement = ref(null)
let timer = null
let timers = null
let dev_title = ref([t('messages.RackNum'), t('messages.DevStatus'), t('messages.UtilizationRate'), t('messages.RunTime')])
let mubanji_value = ref([
    [102014422, '0', '40层', '0min']
])
let huituyi_value = ref([
    [102014422, '0', '40层', '0min']
])
let mjxhj_data = reactive([
    { key: t('messages.RackNum'), value: '102014422' },
    { key: t('messages.DevStatus'), value: 2 },
    { key: t('messages.UtilizationRate'), value: '40层' },
    { key: t('messages.RunTime'), value: '0min' },
])
const status_color = {
    '0': '#FF6E76',
    '1': '#FDDD60',
    '2': '#7CFFB2',
    '3': '#FDDD60',
}
async function getcolumbiaDeviceList() {
    const result:any = await columbiaDeviceList();
    if (result.code == 200) {
        let {data} = result;
        let mubanji = data['服装模板机']
        let huituyi = data['绘图仪(一代)']
        let xiuhuaji = data['单头混合毛巾绣花机']
        mubanji_value.value = [
            [mubanji.label,mubanji.status,mubanji.ratio,mubanji.workTime]
        ]
        huituyi_value.value = [
            [huituyi.label,huituyi.status,huituyi.ratio,huituyi.workTime]
        ]

        mjxhj_data[0].value = xiuhuaji.label
        mjxhj_data[1].value = xiuhuaji.status
        mjxhj_data[2].value = xiuhuaji.ratio
        mjxhj_data[3].value = xiuhuaji.workTime

    }
}


let data_chart = reactive({ mubanji_series: [1,2], xiuhuaji_series: [3,4], huituyi_series: [5,6], xData: [t('messages.计划产量'),t('messages.实际产量')] })

function getcolumbiaDeviceProduction() {
    columbiaDeviceProduction().then((result:any) => {
        
        if (result.code == 200) {
            let {data} = result;
            
            data_chart.mubanji_series = data.mubanji
            data_chart.xiuhuaji_series = data.xiuhuaji
            data_chart.huituyi_series = data.huituyi
        }
    })
}





function getWebsocket(val) {
    try {
        let data = JSON.parse(val)


        if (data.type == 'WorkingState') {
            let msg = data.msg
            //绘图仪
            if (msg.RackNumber == '104019066') {
                huituyi_value.value[0][1] = msg.WorkingState
            }
            //模板机
            if (msg.RackNumber == '10102118') {
                mubanji_value.value[0][1] = msg.WorkingState                
            }
            //绣花机
            if (msg.RackNumber == '1021875') {
                mjxhj_data[1].value = msg.WorkingState
            }


        }

    } catch (err) {
        console.log(err);
    }

}
function errWebsocket(val) {
    // console.log(val);
}




onMounted(() => {
    getcolumbiaDeviceList()
    getcolumbiaDeviceProduction()
    timers = setInterval(() => {
        getcolumbiaDeviceList()
        getcolumbiaDeviceProduction()
    }, 1000 * 60)
    connectWebsocket(null, null, getWebsocket, errWebsocket)
    document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
})

onUnmounted(() => {
    closeWebsocket()
    clearInterval(timer)
    clearInterval(timers)
    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: space-between;
    align-items: center;
}
.box-bottom-left {
    width: 250px;
    height: 100%;
}
.box-bottom-right {
    flex: 1;
    height: 100%;
}

.box-bottom-right img {
    max-width: 100%;
}


.top-item {
    width: 33%;
    height: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20px;
}
.key-text {
    width: 60%;
    font-size: 18px;
    color: #02c1d7;
    font-weight: 700;
    /* font-family: '华文新魏', sans-serif; */
}

.value-text {
    width: 40%;
    font-size: 16px;
    font-weight: bold;
    color: #AEEEFAFE;
    font-family: '华文新魏', sans-serif;
    box-sizing: border-box;
    padding-left: 10px;
}

.status {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
</style>