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="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="'单头混合毛巾绣花机'">
                        <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="'绘图仪（一代）'">
                    <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 { useI18n } from 'vue-i18n'
let { t } = useI18n();

let videoUrl = ref('https://d.tufting222.cn/video/yzy/a.mp4')
const videoElement = ref(null)
let timer = null

let dev_title = ref(['机架号', '设备状态', '稼 动 率', '工作时长'])
let mubanji_value = ref([
    [102014422, '0', '40层', '0min']
])
let huituyi_value = ref([
    [102014422, '0', '40层', '0min']
])
let mjxhj_data = reactive([
    { key: '机 架 号', value: '102014422' },
    { key: '设备状态', value: 2 },
    { key: '稼 动 率', value: '40层' },
    { key: '工作时长', 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: [], xiuhuaji_series: [], huituyi_series: [], xData: ["计划产量","实际产量"] })

function getcolumbiaDeviceProduction() {
    columbiaDeviceProduction().then((result:any) => {
        
        if (result.code == 200) {
            let {data} = result;
            console.log(data,'-----');
            
            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 == 'mDeviceStatus') {
            // changestatus(data.msg)
        }
        // if (data.type == 'WorkingState') {
        //     store.changestatus(data.msg)
        // }

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

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




onMounted(() => {
    getcolumbiaDeviceList()
    getcolumbiaDeviceProduction()
    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: 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: 28px;
    color: #00FFFFFE;
    font-family: '华文新魏', sans-serif;
}

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

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