<script setup name="temp">
|
import { ref, reactive, computed, watch, nextTick, onMounted } from "vue";
|
import info from '@/components/info.vue';
|
import bar from '@/components/echarts/bar5.vue';
|
|
const props = defineProps({
|
data: {
|
type: Object,
|
default: {},
|
},
|
});
|
|
const chart0 = ref(null);
|
|
watch(
|
() => props.data,
|
() => {
|
nextTick(() => {
|
updateRt();
|
});
|
},
|
{ immediate: true, deep: true }
|
);
|
|
const list = computed(() => {
|
let res = [];
|
let rt = props.data.rtdataList;
|
if (rt && rt.length) {
|
res = rt.map((v) => `${v.monNum}#`);
|
}
|
return res;
|
});
|
|
const chartData = computed(() => {
|
let res = [];
|
let rt = props.data.rtdataList;
|
if (rt && rt.length) {
|
res = rt.map((v) => v.monTmp);
|
}
|
return res;
|
});
|
|
function updateRt() {
|
|
if(chart0.value) {
|
chart0.value.updateChart(list.value, chartData.value);
|
}
|
}
|
|
|
onMounted(() => {
|
|
});
|
</script>
|
|
<template>
|
<div class="tab-content">
|
<div class="p-left">
|
<card title="单体温度">
|
<div class="wrap">
|
<div class="row">
|
<div class="item">
|
<info label="最大值" :value="data.maxData"></info>
|
</div>
|
<div class="item">
|
<info label="最小值" :value="data.minData"></info>
|
</div>
|
<div class="item">
|
<info label="平均值" :value="data.avgData"></info>
|
</div>
|
</div>
|
<div class="main">
|
<bar ref="chart0"></bar>
|
</div>
|
</div>
|
</card>
|
</div>
|
<div class="p-right">
|
<div class="btn">季度曲线记录</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.tab-content {
|
display: flex;
|
flex-direction: row;
|
height: 100%;
|
padding: 10px;
|
|
.p-left {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
margin-right: 10px;
|
|
.wrap {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
.row {
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
.item {
|
min-width: 170px;
|
&~.item {
|
margin-left: 20px;
|
}
|
}
|
}
|
.main {
|
flex: 1;
|
}
|
}
|
}
|
.p-right {
|
.btn {
|
font-size: 14px;
|
margin: 2px 4px;
|
cursor: pointer;
|
border: 1px solid #3D9CC9;
|
box-shadow: inset 0 0 10px 4px #3D9CC9;
|
padding: 6px 12px;
|
text-align: center;
|
border-radius: 4px;
|
|
&:hover {
|
color: #FDFE01;
|
border: 1px solid #DF7B26;
|
box-shadow: inset 0 0 10px 4px #DF7B26;
|
}
|
}
|
}
|
|
}
|
</style>
|
