167 lines
3.5 KiB
Vue
167 lines
3.5 KiB
Vue
<template>
|
|
<div class="energy-profile">
|
|
<peak-secondary-title :title="title"></peak-secondary-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-warning-type-chart :data-source="warningTypeDataSource"/>
|
|
</div>
|
|
<div class="peak-enterprise-operations" v-if="activeTab === 2">
|
|
<peak-warning-type-chart :data-source="warningTypeDataSource"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
|
import PeakWarningTypeChart from "@/components/charts/PeakWarningTypeChart";
|
|
|
|
export default {
|
|
name: "EnergyProfile",
|
|
components: {PeakSecondaryTitle, PeakWarningTypeChart},
|
|
data() {
|
|
return {
|
|
title: '清洁运输情况',
|
|
tabList: [
|
|
{
|
|
label: '昨日清洁运输比例',
|
|
value: 1
|
|
},
|
|
{
|
|
label: '上周清洁运输比例',
|
|
value: 2
|
|
}
|
|
],
|
|
activeDateTab: '0',
|
|
activeTab: 1,
|
|
warningTypeDataSource: [
|
|
{
|
|
name: '水运',
|
|
value: 214,
|
|
rate: '38%'
|
|
},
|
|
{
|
|
name: '铁路',
|
|
value: 342,
|
|
rate: '32%'
|
|
},
|
|
{
|
|
name: '管道',
|
|
value: 12,
|
|
rate: '30%'
|
|
},
|
|
{
|
|
name: '国六',
|
|
value: 12,
|
|
rate: '30%'
|
|
},
|
|
{
|
|
name: '新能源',
|
|
value: 12,
|
|
rate: '30%'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
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%;
|
|
}
|
|
|
|
|
|
._bg {
|
|
position: absolute;
|
|
left: 26px;
|
|
top: 24px;
|
|
width: 120px;
|
|
height: 120px;
|
|
background: url("~/assets/peakCoalImages/right/warning-type-pie-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.right-tab {
|
|
height: 100%;
|
|
.flex-row;
|
|
justify-content: space-between;
|
|
width: 220px;
|
|
|
|
.tab-type {
|
|
margin-bottom: 15px;
|
|
width: 67px;
|
|
height: 30px;
|
|
.bg("~/assets/peakCoalImages/left/pollutant-type-default-bg.png");
|
|
font-family: MicrosoftYaHei;
|
|
font-size: 14px;
|
|
color: rgba(216, 240, 255, 0.50);
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
text-shadow: 0 0 11px #0091FF;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.active-tab {
|
|
.bg("~/assets/peakCoalImages/left/pollutant-type-active-bg.png");
|
|
color: #D8F0FF;
|
|
text-shadow: 0 0 33px #0091FF;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
</style>
|