76 lines
2.7 KiB
Vue
76 lines
2.7 KiB
Vue
<template>
|
|
<div style="padding: 8px 20px 20px;">
|
|
<el-collapse v-model="activeShowList" @change="collapseChange">
|
|
<el-collapse-item v-for="(val,key, index) of secondChartList" :title="`【${val && val.title || ''}】`" :name="key || ''">
|
|
<div class="mt10 w100">
|
|
<div class="w100 plr-20" style="font-size: 14px">
|
|
<div v-for="(item,key,index) of val && val.formList || []" :key="`${key}-${index}`" class="w50 disInlineBlock p10">
|
|
<span class="w50 disInlineBlock" style="color: #C0C4CC;">{{item}}</span><span class="w50">{{val && val.formModel[key] || '-'}}</span>
|
|
</div>
|
|
</div>
|
|
<div v-for="item of val && val.echartList || []" :key="`div-${val && val.title || ''}-${item && item.title || ''}-${index}`" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
|
|
<EchartsLine class="w100 h100" :key="`chart-${val && val.title || ''}-${item && item.title || ''}-${index}`" :lineData="item && item.dataVal || {}" :dateDataTrans="item && item.dateDataTrans || {}" :dateShowType="item && item.dateShowType || 'datetimerange'" :title="item && item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData, item.fnEvent,val.title, key)"></EchartsLine>
|
|
</div>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import EchartsLine from "@/components/echartsList/line.vue";
|
|
export default {
|
|
name: 'SecondAutoFind',
|
|
components: {EchartsLine},
|
|
props: {
|
|
secondChartList: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
activeNames: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
},
|
|
watch: {
|
|
activeNames: {
|
|
handler(val) {
|
|
this.activeShowList = val;
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
activeShowList: []
|
|
}
|
|
},
|
|
created() {},
|
|
methods: {
|
|
collapseChange(val) {
|
|
this.activeShowList = this.activeNames;
|
|
this.$emit("collapseChangeData", val);
|
|
},
|
|
chartDataEvent(valData, funcName, tabName, key) {
|
|
this.$emit("chartFnEvent", valData, funcName, tabName, key);
|
|
// // 检查函数是否存在，避免报错
|
|
// if (typeof this[funcName] === 'function') {
|
|
// // 调用实际函数，并传递参数（如选中的值、当前项）
|
|
// // this[funcName]({startTime: valData[0], endTime: valData[1]});
|
|
// } else {
|
|
// console.warn(`函数 ${funcName} 未定义`);
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
::v-deep .el-collapse-item__header {
|
|
background-color: #d4e3fc!important;
|
|
/*color: #fff!important;*/
|
|
padding-left: 20px;
|
|
font-size: 1rem;
|
|
}
|
|
</style>
|