screenFront/src/views/MicroExhibition/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">
                <div class="lt">
                    <NewBoder :title="'裁剪设备'">
                        <DevCard :dev_title="dev_caijian_title" :dev_value="store.caijian.value">
                            <BarChart style="width: 100%;height: 100%;" :xData="store.caijian.chart.xData"
                                :seriesData="store.caijian.chart.series"></BarChart>
                        </DevCard>
                    </NewBoder>
                </div>
                <div class="lb">
                    <NewBoder :title="'缝中设备'">
                        <BoardBar :data="store.fengzhong.value" :xData="store.fengzhong.chart.xData"
                            :seriesData="store.fengzhong.chart.series"></BoardBar>
                    </NewBoder>
                </div>
            </div>
            <div class="center">
                <div class="ct">
                    <div class="top-item">
                        <h2>设备在线</h2>
                        <div class="div_p" style="color: #ff9e5b;font-size: 40px;">
                            <div class="dev-top" style="color: #7CFFB2;">{{ store.devnum.on + store.devnum.wait }}</div>
                            <div class="dev-center"></div>
                            <div class="dev-bottom">{{ store.devnum.all }}</div>
                        </div>
                    </div>
                    <div class="top-item">
                        <h2>网关状态</h2>
                        <div class="div_p" style="transform: translate(0px, 10px);">
                            <i :class="true
                                ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
                                : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
                                "></i>
                        </div>
                    </div>
                </div>
                <div class="cc">
                    <NewBoder :title="'设备状态总览'">
                        <ringChart :data="ringData"></ringChart>
                    </NewBoder>
                </div>
                <div class="cb">
                    <NewBoder :title="'版房设备'">
                        <BoardBar :data="store.banfang.value" :xData="store.banfang.chart.xData"
                            :seriesData="store.banfang.chart.series"></BoardBar>
                    </NewBoder>
                </div>
            </div>
            <div class="right">
                <div class="rt">
                    <NewBoder :title="'一次性拖鞋自动生产线'">
                        <DevCard :dev_title="dev_tuoxie_title" :dev_value="store.tuoxie.value">
                            <BarChart style="width: 100%;height: 100%;" :xData="store.tuoxie.chart.xData"
                                :seriesData="store.tuoxie.chart.series"></BarChart>
                        </DevCard>
                    </NewBoder>
                </div>
                <div class="rb">
                    <NewBoder :title="'座椅面套生产线'">
                        <BoardBar :data="store.zuoyi.value" :xData="store.zuoyi.chart.xData"
                            :seriesData="store.zuoyi.chart.series"></BoardBar>
                    </NewBoder>
                </div>
            </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="right-tip-type">
            <div class="right-tip-type-item blue">
                <div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
                <div class="left-tip-type-item-text">在 线</div>
            </div>
            <div class="right-tip-type-item err">
                <div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
                <div class="left-tip-type-item-text">离 线</div>
            </div>
        </div>
        <div class="wrap"></div>
    </div>
</template>

<script setup lang='ts'>
import header2 from './components/header2.vue'
import NewBoder from './components/NewBoder.vue';
import DevCard from "./components/DevCard.vue";
import BarChart from './components/BarChart.vue'
import ringChart from "./components/ringChart.vue";
import BoardBar from "./components/BoardBar.vue";

import { getTopDevice, getCismaList } from '@/http/cisma'
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } 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 ringData = computed(() => {
    return [
        { name: '工作', value: store.devnum.on },
        { name: '停机', value: store.devnum.off },
        { name: '待机', value: store.devnum.wait },
    ]
})
let timer = null
let dev_caijian_title = ['设备名称', '设备编码','完成率', '稼动率', '状态']
let dev_tuoxie_title = ['设备编码','完成率', '稼动率', '状态']
let dev_value = [
    ['全自动针梭两用铺布机', '待机', '40层', '1'],
    ['全自动9公分电脑裁床', '待机', '40层', '0'],
]


let throttle_timer = null
function throttle (fn, delay = 300) {
    if(throttle_timer == null){
        throttle_timer = setTimeout(() => {
            fn()
 
            clearTimeout(throttle_timer)
            throttle_timer = null
        }, delay);
    }
}

async function getTopDeviceData() {
    let res = await getTopDevice() as any
    if (res.code === 200) {
        store.setbanfang(res.data.版房设备)
        store.setcaijian(res.data.裁剪设备)
        store.setfengzhong(res.data.缝中设备)
        store.settuoxie(res.data.拖鞋自动生产线)
        store.setzuoyi(res.data.座椅面套生产线)

    }
}

async function getCismaListData() {
    let res = await getCismaList() as any
    if (res.code === 200) {
        store.setDevnum(res.data.devnum)
    }
}

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

.lt,
.rt {
    width: 100%;
    height: 450px;
}

.lb,
.rb {
    width: 100%;
    height: 530px;
}

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

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

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

.top-item {
    width: 30%;
    height: 100%;
    background-image: url(@/assets/img/u8.png);
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 5px;
}

.top-item .div_p {
    height: 60%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.div_p .div-p-tip {
    position: absolute;
    font-size: 1.5rem;
    top: 10%;
    left: 20%;
}

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

.right-tip-type {
    position: absolute;
    top: 15px;
    left: 1550px;
    width: 120px;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.gatway {
    font-size: 42px;
}


.wrap {
    position: absolute;
    top: 2px;
    left: 582px;
    width: 537px;
    border-bottom: 0px solid transparent;
    border-top: 92px solid #0E1D2F;
    border-left: 109px solid transparent;
    border-right: 110px solid transparent;
}

.dev-center {
    width: 3px;
    height: 60px;
    background-image: linear-gradient(to bottom, #2869E8, #00D0FF);
    background-color: #5067BC;
    transform: rotate(40deg) translate(7px, -6px);
}

.dev-top {
    transform: translate(-6px, -10px);
    font-size: 30px;
}

.dev-bottom {
    transform: translate(15px, 15px);
    font-size: 30px;
}
.left-tip-type-item-text {
    font-weight: 700;
    font-size: 14px;
}
</style>