|
@@ -1,16 +1,14 @@
|
|
<template>
|
|
<template>
|
|
<div class="hui-flex hui-content conservation-item">
|
|
<div class="hui-flex hui-content conservation-item">
|
|
<div class="hui-content-title">
|
|
<div class="hui-content-title">
|
|
- <div class="hui-title-item active">输配侧</div>
|
|
|
|
- <div class="hui-title-item">换热侧</div>
|
|
|
|
- <div class="hui-title-item">室外侧</div>
|
|
|
|
- <div class="hui-title-item">设备侧</div>
|
|
|
|
|
|
+ <div :class="'hui-title-item ' + (item.id === nowTitle.id ? 'active' : '')"
|
|
|
|
+ v-for="(item,index) in titleList" @click="changeTitle(item)">
|
|
|
|
+ {{item.name}}
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div class="hui-flex-box">
|
|
<div class="hui-flex-box">
|
|
- <div class="conservation-item">
|
|
|
|
- <div class="hui-chart-title">
|
|
|
|
- 输配侧
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="conservation-item" id="view1">
|
|
|
|
+ <div class="hui-chart-title">输配侧</div>
|
|
<div class="conservation-chart">
|
|
<div class="conservation-chart">
|
|
<div class="chart-item">
|
|
<div class="chart-item">
|
|
<div class="chart-title">
|
|
<div class="chart-title">
|
|
@@ -46,7 +44,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="conservation-item">
|
|
|
|
|
|
+ <div class="conservation-item" id="view2">
|
|
<div class="hui-chart-title">
|
|
<div class="hui-chart-title">
|
|
冷却塔换热侧
|
|
冷却塔换热侧
|
|
</div>
|
|
</div>
|
|
@@ -71,7 +69,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="conservation-item">
|
|
|
|
|
|
+ <div class="conservation-item" id="view3">
|
|
<div class="hui-chart-title">
|
|
<div class="hui-chart-title">
|
|
室外侧
|
|
室外侧
|
|
</div>
|
|
</div>
|
|
@@ -110,7 +108,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="conservation-item">
|
|
|
|
|
|
+ <div class="conservation-item" id="view4">
|
|
<div class="hui-chart-title">
|
|
<div class="hui-chart-title">
|
|
设备侧
|
|
设备侧
|
|
</div>
|
|
</div>
|
|
@@ -285,7 +283,24 @@
|
|
tableData1: [],
|
|
tableData1: [],
|
|
tableData2: [],
|
|
tableData2: [],
|
|
chartData: [],
|
|
chartData: [],
|
|
- list: []
|
|
|
|
|
|
+ list: [],
|
|
|
|
+ titleList: [{
|
|
|
|
+ id: 1,
|
|
|
|
+ name: '输配侧'
|
|
|
|
+ }, {
|
|
|
|
+ id: 2,
|
|
|
|
+ name: '换热侧'
|
|
|
|
+ }, {
|
|
|
|
+ id: 3,
|
|
|
|
+ name: '室外侧'
|
|
|
|
+ }, {
|
|
|
|
+ id: 4,
|
|
|
|
+ name: '设备侧'
|
|
|
|
+ }],
|
|
|
|
+ nowTitle: {
|
|
|
|
+ id: 1,
|
|
|
|
+ name: '输配侧'
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
@@ -369,6 +384,15 @@
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
+ changeTitle(title) {
|
|
|
|
+ this.nowTitle = title;
|
|
|
|
+ // 获取DOM元素
|
|
|
|
+ const element = document.getElementById('view' + title.id);
|
|
|
|
+ // 滚动到该元素
|
|
|
|
+ element.scrollIntoView({
|
|
|
|
+ behavior: 'smooth'
|
|
|
|
+ });
|
|
|
|
+ },
|
|
returnData(name, type) {
|
|
returnData(name, type) {
|
|
if (!type) return this.chartData.filter(node => node.data === name);
|
|
if (!type) return this.chartData.filter(node => node.data === name);
|
|
return this.chartData.filter(node => node.name === name && node.data === type);
|
|
return this.chartData.filter(node => node.name === name && node.data === type);
|