screenFront/src/views/MicroExhibition/index.vue

<template>
    <div class="container">
        <div class="header">
            <div class="title">
                <header2 ref="headerref" :width="'100%'" :height="'150px'" :title="t('messages.微工厂环境实时监测系统')"
                    :titleTip="titleTip" :typeFun="['time']" :alarmType="[]"></header2>
            </div>
        </div>
        <div class="content">
            <div class="left">
                <div class="lt">
                    <Border13>

                    </Border13>
                </div>
                <div class="lb">
                    <Border13>

                    </Border13>
                </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>{{ 14 }} {{ 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>
                <LineChart class="cc"></LineChart>
                <div class="cb"></div>
            </div>
            <div class="right"></div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import header2 from '@/components/headerBox/header2.vue'
import Border13 from '@/components/border/Border13.vue'
import LineChart from './components/LineChart.vue'
import {ref,getCurrentInstance} from 'vue'

import { useI18n } from 'vue-i18n'
let { t } = useI18n();
let titleTip = [
    {
        color: "#E43961",
        name: t('messages.abnormal'),
    },
    {
        color: "#20AEC5",
        name: t('messages.NoAbnormal'),
    },
    {
        color: "#A7A6BD",
        name: t('messages.disconnection'),
    },
];

</script>

<style scoped>
.container {
    height: 1080px;
    width: 1920px;
    color: #20aec5;
    background-color: #100c2a;
}

.header {
    height: 150px;
    width: 1920px;
    background-color: #100c2a;
}

.content {
    height: 930px;
    width: 1920px;
    background-color: #100c2a;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.left,
.right {
    height: 930px;
    width: 600px;
    background-color: #100c2a;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.center {
    flex: 1;
    height: 930px;
    background-color: #100c2a;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.lt {
    width: 100%;
    height: 370px;
}

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

.ct {
    width: 100%;
    height: 110px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.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;
}
.on {
  color: #20AEC5;
  font-size: 3.5rem;
}
.off {
  color: #797979;
  font-size: 3.5rem;
}
.cc,.cb {
    width: 100%;
    height: 400px;
    background-color: #100c2a;
}

</style>