dezhou-screen/src/components/boxes/XicaoTemp.vue
2023-07-12 15:09:37 +08:00

69 lines
1.3 KiB
Vue

<template>
<!-- 锡槽温度 -->
<Container usage="Charts">
<SubContainer title="锡槽温度" icon="xicao" padding="34px">
<div class="tables flex" style="height: 100%">
<LineChart
key="1"
id="line-chart-9"
class="flex-1"
unit="单位/℃"
:legend="Object.keys(xiCao1)"
:series="xiCao1"
/>
<div class="vertical-line"></div>
<LineChart
key="2"
id="line-chart-10"
class="flex-1"
unit="单位/℃"
:legend="Object.keys(xiCao2)"
:series="xiCao2"
/>
</div>
</SubContainer>
</Container>
</template>
<script>
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import { mapState } from "vuex";
export default {
name: "XicaoTemp",
props: {},
components: { Container, SubContainer, LineChart },
data() {
return {
chartConfig: {},
};
},
computed: {
...mapState(["xiCao1", "xiCao2"]),
},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
.flex-1 {
flex: 1;
// background: #eee;
}
.vertical-line {
margin: 0 6px;
width: 6px;
background: radial-gradient(
ellipse at center,
#3565ff,
#3565ff51,
transparent,
transparent
);
}
</style>