<template>
|
<div>
|
<div class="kb_dashboard">
|
<div class="kb_header ">
|
<div class="flex_c_c">
|
大岛车间综合看板
|
</div>
|
<div class="kb_headTime">
|
<span>{{ headTime |dataFormat }}</span>
|
</div>
|
</div>
|
|
<div class="kb_content">
|
<div class="kb_left">
|
<div class="kb_left_top kb_pd10">
|
<div v-for="item in leftTopData" :key="item.id">
|
<div class="kb_block ">
|
<div>{{ item.name }}</div>
|
<div style="margin-top: 10px">{{ item.value }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="kb_left_bottom kb_pd10">
|
2
|
</div>
|
</div>
|
<div class="kb_right kb_pd10">
|
3
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import './kbCommon.css'
|
|
export default {
|
name: 'Index2',
|
data() {
|
return {
|
headTime: new Date(),
|
leftTopData: [
|
{ id: 1, name: '锂电产线', value: 1000, children: [] },
|
{ id: 2, name: '包装产线', value: 1200, children: [] },
|
{ id: 3, name: '包装产线', value: 1300, children: [] }
|
]//
|
}
|
},
|
created() {
|
},
|
mounted() {
|
// setInterval(this.getNowTime, 500)
|
this.handleData()
|
},
|
methods: {
|
// 处理数据
|
handleData() {
|
|
},
|
// 获取当前时间
|
getNowTime() {
|
const dt = new Date()
|
|
const y = dt.getFullYear()
|
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
|
const d = (dt.getDate() + '').padStart(2, '0')
|
|
const hh = (dt.getHours() + '').padStart(2, '0')
|
const mm = (dt.getMinutes() + '').padStart(2, '0')
|
const ss = (dt.getSeconds() + '').padStart(2, '0')
|
|
this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss}`
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
|
.kb_content {
|
display: flex;
|
position: relative;
|
height: 990px;
|
width: 100%;
|
background-color: #99a9bf;
|
|
.kb_left {
|
width: 1340px;
|
height: 100%;
|
|
.kb_left_top {
|
height: 495px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
|
.kb_block{
|
width: 150px;
|
height: 150px;
|
color: #fff;
|
letter-spacing:5px;
|
background-color: #42b983;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
}
|
}
|
|
.kb_left_bottom {
|
height: 495px;
|
background-color: #20a0ff;
|
}
|
}
|
|
.kb_right {
|
width: 580px;
|
height: 100%;
|
background-color: #42b983;
|
}
|
}
|
|
</style>
|
