screenFront/src/views/Exhibition/CHIC/index.vue

<template>
    <div class="container">
        <div class="header">
            <div class="title">
                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备工况物联系统'" :titleTip="[]"
                    :typeFun="['time']" :alarmType="[]"></header2>
            </div>
        </div>
        <div class="content">
            <div class="left">
                <NewBoder :title="'缝纫设备'">
                    <BoardBar :data="fengren.value" :xData="fengren.chart.xData" :seriesData="fengren.chart.series"
                        :rowNum="4"></BoardBar>
                </NewBoder>
            </div>
            <div class="center">
                <div class="ct">
                    <StepItem v-for="i in stepList" :data="i"></StepItem>
                </div>
                <div class="cc">
                    <NewBoder :title="'设备状态总览'">
                        <ringChart :data="ringData"></ringChart>
                    </NewBoder>
                </div>
                <div class="cb">
                    <NewBoder :title="'裁剪设备'">
                        <BoardBar :data="caijian.value" :xData="caijian.chart.xData" :seriesData="caijian.chart.series">
                        </BoardBar>
                    </NewBoder>
                </div>
            </div>
            <div class="right">
                <NewBoder :title="'板房设备'">
                    <BoardBar :data="banfang.value" :xData="banfang.chart.xData" :seriesData="banfang.chart.series"
                        :rowNum="4"></BoardBar>
                </NewBoder>
            </div>
        </div>
        <div class="left-tip-type">
            <div class="left-tip-type-item">
                <div class="yuan green"></div>
                <div class="left-tip-type-item-text">工作</div>
            </div>
            <div class="left-tip-type-item">
                <div class="yuan yello"></div>
                <div class="left-tip-type-item-text">待机</div>
            </div>
            <div class="left-tip-type-item">
                <div class="yuan red"></div>
                <div class="left-tip-type-item-text">停机</div>
            </div>
        </div>
        <div class="wrap"></div>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
import header2 from './components/header2.vue'
import NewBoder from './components/NewBoder.vue';
import BoardBar from "./components/BoardBar.vue";
import ringChart from "./components/ringChart.vue";
import StepItem from './components/StepItem.vue'

import { getTopDevice, getCismaList } from '@/http/cisma'
import {chicDeviceList} from '@/http/Exhibition/CHIC'

import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
let timer = null
let devnum = reactive({
    on: 0,
    off: 0,
    wait: 0
})
let stepList = reactive([
    {
        name: '缝纫设备',
        total: 0,
        online: 0,
    },
    {
        name: '裁剪设备',
        total: 0,
        online: 0,
    },
    {
        name: '版房设备',
        total: 0,
        online: 0,
    }
])
let fengren = ref({
    value: [],
    chart: {
        xData: [],
        series: []
    }
})
let caijian = ref({
    value: [],
    chart: {
        xData: [],
        series: []
    }
})
let banfang = ref({
    value: [],
    chart: {
        xData: [],
        series: []
    }
})

watch(() => fengren.value, (newVal, oldVal) => {
    stepList[0].total = newVal.value.length
    stepList[0].online = newVal.value.filter((item) => item[5] !== '0').length
}, { deep: true })

watch(() => caijian.value, (newVal, oldVal) => {
    stepList[1].total = newVal.value.length
    stepList[1].online = newVal.value.filter((item) => item[5] !== '0').length
}, { deep: true })

watch(() => banfang.value, (newVal, oldVal) => {
    stepList[2].total = newVal.value.length
    stepList[2].online = newVal.value.filter((item) => item[5] !== '0').length
}, { deep: true })

let ringData = computed(() => {
    return [
        { name: '工作', value: devnum.on },
        { name: '停机', value: devnum.off },
        { name: '待机', value: devnum.wait },
    ]
})

function setData(data:any) {
    data.value = data.value.map((item, index) => {
        item.unshift(index + 1)
        return item
    })
    data.chart.series = data.chart.series.map((item) => {
        item.type = 'bar'
        item.barMaxWidth = 30
        item.label = {
            show: true,
            position: 'top',
        }
        return item
    })
    return data
}


let labelList = ref()
async function getTopDeviceData() {
    let res = await chicDeviceList() as any
    if (res.code === 200) {
        // setfengren(res.data.缝纫设备)
        // setbanfang(res.data.版房设备)
        // setcaijian(res.data.裁剪设备)
        fengren.value = setData(res.data.缝纫设备)
        banfang.value = setData(res.data.版房设备)
        caijian.value = setData(res.data.裁剪设备)
        labelList.value = [];
        labelList.value.push(...fengren.value.value.map((item,i) => {
            return { label: item[2],index:i,name:'fengren'}
        }))
        labelList.value.push(...banfang.value.value.map((item,i) => {
            return { label: item[2],index:i,name:'banfang'}
        }))
        labelList.value.push(...caijian.value.value.map((item,i) => {
            return { label: item[2],index:i,name:'caijian'}
        }))
    }
}

async function getCismaListData() {
    let res = await getCismaList({s:'CHIC'}) as any
    if (res.code === 200) {
        devnum.on = res.data.devnum.on
        devnum.off = res.data.devnum.off
        devnum.wait = res.data.devnum.wait
    }
}



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


        if (data.type == 'WorkingState') {
            let { RackNumber, WorkingState } = data
            let index = labelList.value.findIndex((item, index) => {
                return item['label'] == RackNumber
            })
            if (index !== -1) {
                let name = labelList.value[index].name
                let i = labelList.value[index].index
                if (name == 'fengren') {
                    fengren.value.value[i][5] = WorkingState
                } else if (name == 'banfang') {
                    banfang.value.value[i][5] = WorkingState
                } else if (name == 'caijian') {
                    caijian.value.value[i][5] = WorkingState
                }
            }
        }

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

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

onMounted(() => {
    getTopDeviceData()
    getCismaListData()
    // timer = setInterval(()=>{
    //     getTopDeviceData()
    // },5000)
    connectWebsocket(null, null, getWebsocket, errWebsocket)
    document.getElementById('app').style.backgroundColor = '#0E0E0E'
})

onUnmounted(() => {
    clearInterval(timer)

    // closeWebsocket()
    document.getElementById('app').style.backgroundColor = '#100c2a'
})
</script>

<style scoped>
.container {
    height: 1080px;
    width: 1920px;
    color: #FFFFFF;
    background: url('./images/bg.jpg') no-repeat center center / 100% 100%;
    background-color: #0E0E0E;
    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 {
    height: 980px;
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.center {
    width: 670px;
    height: 980px;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.ct {
    width: 100%;
    height: 110px;
    margin: 10px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.cc {
    width: 100%;
    height: 330px;
}

.cb {
    width: 100%;
    height: 500px;
}


h2 {
    /* color: #fff; */
    font-size: 18px;
    line-height: 1.5rem;
    color: #02C1D7;
}

.on {
    color: #20AEC5;
    font-size: 3.5rem;
}

.off {
    color: #797979;
    font-size: 3.5rem;
}

.left-tip-type {
    position: absolute;
    top: 69px;
    left: 462px;
    width: 160px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
}

.left-tip-type-item {
    width: 33%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.yuan {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.green {
    background-color: #7CFFB2;
}

.yello {
    background-color: #FDDD60;
}

.red {
    background-color: #FF6E76;
}

.blue {
    color: #20AEC5;
}

.err {
    color: #FF6E76;
}
</style>