74 lines
1.1 KiB
Vue
74 lines
1.1 KiB
Vue
<template>
|
|
<div
|
|
class="history-temp flex flex-col"
|
|
style="height: 100%; position: relative"
|
|
>
|
|
<h3>{{ title }}</h3>
|
|
<BarChart class="flex-1" :series="series" />
|
|
<div
|
|
v-if="series && series.length === 0"
|
|
style="
|
|
position: absolute;
|
|
top: 8px;
|
|
left: -20px;
|
|
width: 110%;
|
|
height: 105%;
|
|
background: #eee1;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 32px;
|
|
letter-spacing: 6px;
|
|
color: #777;
|
|
"
|
|
>
|
|
无数据
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import BarChart from "../charts/BarChart.vue";
|
|
|
|
export default {
|
|
name: "HistoryTemp",
|
|
components: { BarChart },
|
|
props: {
|
|
series: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "窑炉历史温度趋势",
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../assets/styles/functions";
|
|
|
|
.flex-1 {
|
|
flex: 1;
|
|
// background: #eee;
|
|
}
|
|
|
|
.history-temp {
|
|
// background: #f003;
|
|
}
|
|
|
|
h3 {
|
|
margin: 0;
|
|
font-family: sans-serif;
|
|
font-weight: 400;
|
|
font-size: 30px;
|
|
line-height: 34px;
|
|
letter-spacing: 2px;
|
|
color: #0c71ff;
|
|
margin: 0;
|
|
}
|
|
</style>
|