98 lines
2.1 KiB
Vue
98 lines
2.1 KiB
Vue
<template>
|
|
<div class="energy-profile">
|
|
<peak-secondary-title :title="title"/>
|
|
<div class="_tab">
|
|
<div class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''"
|
|
@click="tabChange(item.value)">{{ item.label }}
|
|
</div>
|
|
</div>
|
|
<div class="energy-content">
|
|
<div class="peak-energy-use" v-if="activeTab === 1">
|
|
<peak-energy-use/>
|
|
</div>
|
|
<div class="peak-enterprise-operations">
|
|
<peak-enterprise-operations v-if="activeTab === 2"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
|
import PeakEnergyUse from "@/components/peak-coal-monitoring/PeakEnergyUse";
|
|
import PeakEnterpriseOperations from "@/components/peak-coal-monitoring/PeakEnterpriseOperations";
|
|
|
|
export default {
|
|
name: "EnergyProfile",
|
|
components: {PeakEnterpriseOperations, PeakEnergyUse, PeakSecondaryTitle},
|
|
data() {
|
|
return {
|
|
title: '能源概况',
|
|
tabList: [
|
|
{
|
|
label: '能源使用情况',
|
|
value: 1
|
|
},
|
|
{
|
|
label: '企业运营情况',
|
|
value: 2
|
|
}
|
|
],
|
|
activeTab: 1
|
|
}
|
|
},
|
|
methods: {
|
|
tabChange(val) {
|
|
this.activeTab = val
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import "assets/styles/mixin";
|
|
|
|
.energy-profile {
|
|
height: 100%;
|
|
width: 100%;
|
|
.flex-column;
|
|
|
|
._tab {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
height: 30px;
|
|
.flex-row;
|
|
|
|
.tab-item {
|
|
width: 50%;
|
|
height: 100%;
|
|
font-family: MicrosoftYaHei-Bold;
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.50);
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.active-tab {
|
|
background: url("~/assets/peakCoalMonitoring/common/tab-active-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.energy-content {
|
|
flex: 1;
|
|
height: 0;
|
|
.peak-energy-use{
|
|
height: 100%;
|
|
}
|
|
|
|
.peak-enterprise-operations{
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|