100 lines
2.3 KiB
Vue
100 lines
2.3 KiB
Vue
|
<template>
|
|||
|
|
<div class="br-container">
|
|||
|
|
<div class="card" v-for="item in 2">
|
|||
|
|
<v-chart class="chart-class" :option="pie_option"></v-chart>
|
|||
|
|
<div class="box-list">
|
|||
|
|
<div class="box-item">{{ tLang('messages', '实际产量') }}：<div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="box-item">{{ tLang('messages', '计划产量') }}：<div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="box-item">{{ tLang('messages', '设备名称') }}：<div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang='ts'>
|
|||
|
|
import { ref, getCurrentInstance } from "vue"
|
|||
|
|
const { proxy } = getCurrentInstance()
|
|||
|
|
|
|||
|
|
let pie_option = ref({
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
top: '10%',
|
|||
|
|
left: 'center',
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#ffffff",
|
|||
|
|
fontSize: 14,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: 'Output',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['80%', '90%'],
|
|||
|
|
center: ['50%', '70%'],
|
|||
|
|
startAngle: 210,
|
|||
|
|
endAngle: 330,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'center',
|
|||
|
|
formatter: `{d}%`,
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{ value: 28, name: proxy.tLang('messages','未完成') },
|
|||
|
|
{ value: 100, name: proxy.tLang('messages','已完成') },
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
</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>
|