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" :last_index="3">
                            <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></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;">
                            <!-- <i class="iconfont icon-zhengque1 div-p-tip"></i> -->
                            <h5>{{ store.devnum.all }} {{ t('messages.units') }}</h5>
                        </div>
                    </div>
                    <div class="top-item">
                        <h2>网关状态</h2>
                        <div class="div_p">
                            <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></BoardBar>
                    </NewBoder>
                </div>
            </div>
            <div class="right">
                <div class="rt">
                    <NewBoder :title="'一次性拖鞋自动生产线'">
                        <DevCard :dev_title="dev_tuoxie_title" :dev_value="store.tuoxie.value" :last_index="2">
                            <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></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>
</template>

<script setup lang='ts'>
import header2 from '@/components/headerBox/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 { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue'
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'

import { useI18n } from 'vue-i18n'
let { t } = useI18n();
const store = useMicroExhibitionStore()
let ringData = ref([]);
ringData.value = [
    { name: '工作', value: 7 },
    { name: '停机', value: 7 },
    { name: '待机', value: 3 },
]

let dev_caijian_title = ['设备名称', '设备编码', '稼动率', '状态']
let dev_tuoxie_title = ['设备编码', '稼动率', '状态']
let dev_value = [
    ['全自动针梭两用铺布机', '待机', '40层', '1'],
    ['全自动9公分电脑裁床', '待机', '40层', '0'],
]

onMounted(() => {
    document.getElementById('app').style.backgroundColor = '#0E0E0E'
})

onUnmounted(() => {
    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;
}
.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: 36px;
}
</style>