70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div :class="$style['container']">
|
||
|
|
<div class="header">
|
||
|
|
<div class="title">
|
||
|
|
<header2
|
||
|
|
ref="headerref"
|
||
|
|
:width="'100%'"
|
||
|
|
:height="'120px'"
|
||
|
|
:title="t('messages.微工厂缝纫设备看板')"
|
||
|
|
:titleTip="titleTip"
|
||
|
|
:typeFun="['time']"
|
||
|
|
:alarmType="[]"
|
||
|
|
>
|
||
|
|
</header2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content" ref="Acontent">
|
||
|
|
<div v-for="inem in 21" class="ringchart">
|
||
|
|
<RingChart></RingChart>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang='ts'>
|
||
|
|
import header2 from "@/components/headerBox/header2.vue";
|
||
|
|
import RingChart from "./components/RingChart.vue";
|
||
|
|
import {ref} from 'vue'
|
||
|
|
import { useI18n } from 'vue-i18n'
|
||
|
|
let {t} = useI18n();
|
||
|
|
|
||
|
|
document.title = t('messages.微工厂缝纫设备看板');
|
||
|
|
let titleTip = [
|
||
|
|
{
|
||
|
|
color: "#95A2FF",
|
||
|
|
name: t('messages.工作时间'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
color: "#FA8080",
|
||
|
|
name: t('messages.空闲时间'),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
</script>
|
||
|
|
<style module>
|
||
|
|
.container {
|
||
|
|
height: 1080px;
|
||
|
|
width: 1920px;
|
||
|
|
color: #20aec5;
|
||
|
|
background-color: #100c2a;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style scoped>
|
||
|
|
.content {
|
||
|
|
width: 100%;
|
||
|
|
--header: 120px;
|
||
|
|
height: calc(1080px - var(--header));
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ringchart {
|
||
|
|
width: 260px;
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|