<template>
|
<el-row class="wrap">
|
<Transition name="">
|
<el-col v-show="show" span="10" class="wrap-left">
|
<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';
|
import { defaultFactorTypes } from '@/constant/checkbox-options';
|
import { TYPE0 } from '@/constant/device-type';
|
|
export default {
|
props: {
|
deviceType: {
|
type: String,
|
default: TYPE0
|
},
|
factorDatas: FactorDatas,
|
// 当前选中高亮的数据点索引
|
locateIndex: Number
|
},
|
data() {
|
return {
|
selectFactorType: defaultFactorTypes(this.deviceType, 1),
|
show: true
|
};
|
},
|
emits: ['chartClick'],
|
watch: {
|
deviceType(nV, oV) {
|
if (nV != oV) {
|
this.selectFactorType = defaultFactorTypes(nV, 1);
|
}
|
}
|
},
|
methods: {
|
handleChartClick(index) {
|
this.$emit('chartClick', index);
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.wrap {
|
/* display: flex;
|
flex-direction: column; */
|
/* background-color: aliceblue; */
|
}
|
|
.wrap-left {
|
/* background-color: aliceblue; */
|
min-width: 600px;
|
}
|
|
.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>
|
