68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<template>
|
||
<div class="br-container">
|
||
<div class="card" v-for="item in props.data">
|
||
<v-chart class="chart-class" :option="item.option"></v-chart>
|
||
<div class="box-list">
|
||
<div class="box-item">{{ tLang('messages', '实际产量') }}：<div>{{ item.production }}</div>
|
||
</div>
|
||
<div class="box-item">{{ tLang('messages', '计划产量') }}：<div>{{ item.planProduction }}</div>
|
||
</div>
|
||
<div class="box-item">{{ tLang('messages', '设备名称') }}：<div>{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang='ts'>
|
||
import { ref, getCurrentInstance } from "vue"
|
||
const { proxy } = getCurrentInstance()
|
||
const props = defineProps<{
|
||
data: any
|
||
}>()
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.br-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.card {
|
||
width: 50%;
|
||
height: 100%;
|
||
.chart-class {
|
||
width: 100%;
|
||
height: 50%;
|
||
}
|
||
|
||
.box-list {
|
||
width: 100%;
|
||
height: 50%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
.box-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding-left: 10px;
|
||
box-sizing: border-box;
|
||
|
||
div {
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|