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_title" :dev_value="dev_value">
                            <BarChart style="width: 100%;height: 100%;"></BarChart>
                        </DevCard>
                    </NewBoder>
                </div>
                <div class="lb">
                    <NewBoder :title="'缝中设备'"></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="'板房设备'">
                    </NewBoder>
                </div>
            </div>
            <div class="right">
                <div class="rt">
                    <NewBoder :title="'一次性拖鞋自动生产线'">
                        <DevCard :dev_title="dev_title" :dev_value="dev_value">
                            <BarChart style="width: 100%;height: 100%;"></BarChart>
                        </DevCard>
                    </NewBoder>
                </div>
                <div class="rb">
                    <NewBoder :title="'座椅面套生产线'"></NewBoder>
                </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 { 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_title = ['设备名称', '设备编码', '稼动率', '状态']
let dev_value = [
    ['全自动针梭两用铺布机', '待机', '40层', '1000片'],
    ['全自动9公分电脑裁床', '待机', '40层', '1000片'],
]
</script>

<style>
#app {
    background-color: #0E0E0E;
}
</style>
<style scoped>
.container {
    height: 1080px;
    width: 1920px;
    color: #FFFFFF;
    background-color: #0E0E0E;

}

.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 {
    flex: 1;
    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;
}
</style>