<template>
|
<el-row class="wrap">
|
<Transition name="">
|
<el-col v-show="show" span="10">
|
<FactorCheckbox
|
v-model="selectFactorType"
|
:device-type="deviceType"
|
></FactorCheckbox>
|
<ProgressLineChart
|
:locate-index="locateIndex"
|
@chart-click="handleChartClick"
|
:factor-datas="factorDatas"
|
:select-factor-type="selectFactorType"
|
></ProgressLineChart>
|
</el-col>
|
</Transition>
|
<el-col span="2">
|
<CardButton
|
name="监测要素趋势分析"
|
@click="() => (show = !show)"
|
></CardButton>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script>
|
/**
|
* 监测要素趋势分析
|
*/
|
import { FactorDatas } from '@/model/FactorDatas';
|
|
export default {
|
props: {
|
deviceType: {
|
type: String
|
},
|
factorDatas: FactorDatas,
|
// 当前选中高亮的数据点索引
|
locateIndex: Number
|
},
|
data() {
|
return {
|
selectFactorType: ['1'],
|
show: true
|
};
|
},
|
emits: ['chartClick'],
|
methods: {
|
handleChartClick(index) {
|
this.$emit('chartClick', index);
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.wrap {
|
/* display: flex;
|
flex-direction: column; */
|
/* background-color: aliceblue; */
|
}
|
|
.slide-fade-enter-active {
|
transition: all 0.3s ease-out;
|
}
|
|
.slide-fade-leave-active {
|
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
|
}
|
|
.slide-fade-enter-from,
|
.slide-fade-leave-to {
|
transform: translateX(-100%);
|
opacity: 0;
|
}
|
</style>
|
