685 lines
21 KiB
Vue
685 lines
21 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="left">
|
||
<img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
|
||
<div class="slbjzl">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>熟料边界总览</p>
|
||
</div>
|
||
<div class="top">
|
||
<p>单位：tCO2</p>
|
||
<div class="data">
|
||
<span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
|
||
<span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
|
||
</div>
|
||
</div>
|
||
<div id="slbjzl">
|
||
<div class="first_one">
|
||
<div class="one">
|
||
<p>2641.76</p>
|
||
<p>熟料工段排放量</p>
|
||
</div>
|
||
<div class="two">
|
||
<p>0</p>
|
||
<p>化石燃料燃烧排放</p>
|
||
</div>
|
||
<div class="three">
|
||
<p>2641.76</p>
|
||
<p>消耗电力产生的排放</p>
|
||
</div>
|
||
<div class="four">
|
||
<p>257.1</p>
|
||
<p>过程排放核算</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tlt">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>碳流图</p>
|
||
</div>
|
||
<div id="tlt"></div>
|
||
</div>
|
||
<div class="tpfl">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>碳排放量</p>
|
||
</div>
|
||
<div id="tpfl">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="jnl">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p></p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="jnl">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sstpf">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>实时碳排放</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="sstpf">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sbyxqk">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>设备运行情况</p>
|
||
</div>
|
||
<div id="sbyxqk">
|
||
<div class="table">
|
||
<el-table :data="devices" style="width: 100%" :row-class-name="tableRowClassName">
|
||
<el-table-column prop="date1" label="设备名称" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date2" label="开关状态" align="center">
|
||
<template scope="scope">
|
||
<img src="../../assets/KDFH/tongguo.png" v-if="scope.row.date2 == true" />
|
||
<img src="../../assets/KDFH/jinggao.png" v-else />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="date3" label="实时负荷" align="center">
|
||
<template scope="scope">
|
||
<span class="count">{{ scope.row.date3 }}</span>
|
||
<span class="danwei">kW</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
res: "年",
|
||
tableData: [
|
||
{
|
||
date1: "水泥单位产品综合能耗",
|
||
date2: "80kgce/t",
|
||
date3: "84kgce/t",
|
||
date4: "5%",
|
||
},
|
||
{
|
||
date1: "水泥大内产品综合电耗",
|
||
date2: "40kWh/t",
|
||
date3: "53kWh/t",
|
||
date4: "32.5%",
|
||
},
|
||
{
|
||
date1: "熟料单位产品综合能耗",
|
||
date2: "100kgce/t",
|
||
date3: "114kgce/t",
|
||
date4: "14%",
|
||
},
|
||
{
|
||
date1: "熟料单位产品综合电耗",
|
||
date2: "48kWh/t",
|
||
date3: "55kWh/t",
|
||
date4: "14.58%",
|
||
},
|
||
{
|
||
date1: "熟料单位产品综合煤耗",
|
||
date2: "94kgce/",
|
||
date3: "108kgce/",
|
||
date4: "14.89%",
|
||
},
|
||
],
|
||
devices: [
|
||
{
|
||
date1: "回转窑",
|
||
date2: true,
|
||
date3: "102.00",
|
||
},
|
||
{
|
||
date1: "熟料收尘",
|
||
date2: true,
|
||
date3: "29.00",
|
||
},
|
||
{
|
||
date1: "篦冷机",
|
||
date2: true,
|
||
date3: "45.00",
|
||
},
|
||
{
|
||
date1: "生料收尘",
|
||
date2: false,
|
||
date3: "102.00",
|
||
},
|
||
{
|
||
date1: "回转窑",
|
||
date2: true,
|
||
date3: "29.00",
|
||
},
|
||
{
|
||
date1: "熟料收尘",
|
||
date2: false,
|
||
date3: "45.00",
|
||
}
|
||
],
|
||
option1: {
|
||
legend: {
|
||
data: [{ icon: "rect", name: "碳排放量" }],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "20px",
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: ["12:20", "13:20", "14:20", "15:20"],
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "单位:tCO2",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
min: 0,
|
||
max: 40,
|
||
interval: 10, // 指定刻度间隔
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
// 让图表占满容器
|
||
// top: "5%",
|
||
left: "8%",
|
||
right: "5%",
|
||
bottom: "8%",
|
||
},
|
||
series: [
|
||
{
|
||
type: "line",
|
||
name: "碳排放量",
|
||
data: [15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 29, 19, 20, 18, 20, 9],
|
||
// smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#21EF06",
|
||
lineStyle: {
|
||
width: 5, //折线宽度
|
||
color: "#21EF06", //折线颜色
|
||
},
|
||
areaStyle: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 1, color: "#0C3431" },
|
||
{ offset: 0.5, color: "#198522" },
|
||
{ offset: 0, color: "#18881C" },
|
||
]),
|
||
},
|
||
},
|
||
},
|
||
markPoint: {
|
||
data: [{ type: "max", name: "Max" }],
|
||
label: {
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 15,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
defineEcharts(dom, option) {
|
||
var chartDom = document.getElementById(dom);
|
||
var myChart = this.$echarts.init(chartDom);
|
||
myChart.setOption(option);
|
||
},
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if ((rowIndex + 1) % 2 === 0) {
|
||
return "success-row";
|
||
}
|
||
return "";
|
||
},
|
||
},
|
||
mounted() {
|
||
this.defineEcharts("sstpf", this.option1);
|
||
// this.defineEcharts("yysl", this.option2);
|
||
// this.defineEcharts("nysl", this.option3);
|
||
// this.defineEcharts("nhfx", this.option4);
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="less">
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
background-color: transparent;
|
||
display: flex;
|
||
padding-top: 400px;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
|
||
.left {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-left: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.title {
|
||
margin-top: 15px;
|
||
margin-left: 60px;
|
||
}
|
||
|
||
.slbjzl {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 30px;
|
||
|
||
p {
|
||
font-size: 24px;
|
||
color: #fff;
|
||
}
|
||
|
||
.data {
|
||
// position: absolute;
|
||
font-size: 20px;
|
||
font-family: "DOUYU";
|
||
color: #ffffff;
|
||
line-height: 18px;
|
||
display: flex;
|
||
// right: 0;
|
||
// top: 120px;
|
||
z-index: 1;
|
||
|
||
span {
|
||
width: 122px;
|
||
height: 38px;
|
||
margin: 10px;
|
||
display: block;
|
||
line-height: 38px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
background: linear-gradient(to right,
|
||
rgba(33, 76, 124, 0.3) 20%,
|
||
rgba(152, 207, 230, 0.3) 100%,
|
||
rgba(33, 76, 124, 0.3) 20%);
|
||
}
|
||
}
|
||
}
|
||
|
||
#slbjzl {
|
||
margin-top: 50px;
|
||
width: 1151px;
|
||
height: 511px;
|
||
background: #37433F;
|
||
opacity: 0.6;
|
||
padding-top: 27px;
|
||
box-sizing: border-box;
|
||
|
||
.first_one {
|
||
display: flex;
|
||
margin-top: 20px;
|
||
justify-content: space-around;
|
||
|
||
.one {
|
||
width: 190px;
|
||
height: 190px;
|
||
color: #3CFF1C;
|
||
text-align: center;
|
||
|
||
p:nth-child(1) {
|
||
margin-top: 60px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
p:nth-child(2) {
|
||
width: 100px;
|
||
margin-top: 10px;
|
||
font-size: 22px;
|
||
margin-left: 40px;
|
||
text-align: center;
|
||
}
|
||
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1185.png);
|
||
}
|
||
|
||
.two {
|
||
width: 190px;
|
||
height: 190px;
|
||
color: #4AB0DD;
|
||
text-align: center;
|
||
|
||
p:nth-child(1) {
|
||
margin-top: 60px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
p:nth-child(2) {
|
||
width: 100px;
|
||
margin-top: 10px;
|
||
font-size: 22px;
|
||
margin-left: 40px;
|
||
text-align: center;
|
||
}
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1186.png);
|
||
}
|
||
|
||
.three {
|
||
width: 190px;
|
||
height: 190px;
|
||
color: #3CFF1C;
|
||
text-align: center;
|
||
|
||
p:nth-child(1) {
|
||
margin-top: 60px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
p:nth-child(2) {
|
||
width: 120px;
|
||
font-size: 22px;
|
||
margin-left: 40px;
|
||
text-align: center;
|
||
}
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1185.png);
|
||
}
|
||
.four {
|
||
width: 190px;
|
||
height: 190px;
|
||
color: #39D7EE;
|
||
text-align: center;
|
||
|
||
p:nth-child(1) {
|
||
margin-top: 60px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
p:nth-child(2) {
|
||
width: 120px;
|
||
margin-left: 40px;
|
||
font-size: 22px;
|
||
text-align: center;
|
||
}
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1187.png);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tlt {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#tlt {
|
||
width: 1155px;
|
||
height: 500px;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
|
||
.tpfl {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#tpfl {
|
||
width: 1155px;
|
||
height: 500px;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-right: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.jnl {
|
||
position: relative;
|
||
margin-top: 130px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.chartBox {
|
||
margin-top: 50px;
|
||
|
||
#jnl {
|
||
width: 1156px;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
position: relative;
|
||
|
||
img {
|
||
width: 320px;
|
||
height: auto;
|
||
margin-left: 80px;
|
||
}
|
||
|
||
.zx {
|
||
font-size: 30px;
|
||
position: absolute;
|
||
top: 100px;
|
||
left: 700px;
|
||
}
|
||
|
||
.span_jnl {
|
||
position: absolute;
|
||
top: 150px;
|
||
left: 700px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.sstpf {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#sstpf {
|
||
width: 1155px;
|
||
height: 630px;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
|
||
.sbyxqk {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
// margin-bottom: 50px;
|
||
/deep/ .table {
|
||
margin-top: 50px;
|
||
|
||
.time {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.count {
|
||
color: #05F0FF;
|
||
font-size: 28px;
|
||
}
|
||
|
||
//表体颜色
|
||
.el-table tr {
|
||
background: #16253b;
|
||
color: #fff;
|
||
font-size: 30px;
|
||
height: 40px;
|
||
|
||
.cell {
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
|
||
// 去掉eltable的hover效果
|
||
.el-table tbody tr:hover>td {
|
||
background-color: #0b679e !important;
|
||
}
|
||
|
||
//修改表头颜色
|
||
.has-gutter {
|
||
background-color: #1969a8;
|
||
|
||
th {
|
||
background-color: #1969a8;
|
||
}
|
||
}
|
||
|
||
//奇偶行颜色
|
||
.el-table .success-row {
|
||
background: #184167;
|
||
}
|
||
|
||
//去掉边框白线
|
||
.el-table__row>td {
|
||
border: none;
|
||
}
|
||
|
||
.el-table::before {
|
||
height: 0px;
|
||
}
|
||
|
||
/* 移除表头的下边框 */
|
||
.el-table__header th {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#sbyxqk {
|
||
width: 1155px;
|
||
height: 400px;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|