451 lines
12 KiB
Vue
451 lines
12 KiB
Vue
<template>
|
|
<div class="box">
|
|
<div class="left">
|
|
<img src="../../assets/img/标题/智能运维-监控.png" class="title" />
|
|
<div class="dqsxtxx">
|
|
<div class="imgBox">
|
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
|
<p>当前摄像头信息</p>
|
|
</div>
|
|
<div id="dqsxtxx">
|
|
<div class="headers"></div>
|
|
<h2>摄像头信息</h2>
|
|
<div class="footers">
|
|
|
|
</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",
|
|
}
|
|
],
|
|
};
|
|
},
|
|
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;
|
|
|
|
.dqsxtxx {
|
|
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";
|
|
}
|
|
}
|
|
|
|
#dqsxtxx {
|
|
margin-top: 50px;
|
|
width: 1151px;
|
|
height: 611px;
|
|
|
|
.headers {
|
|
width: 1041px;
|
|
height: 586px;
|
|
opacity: 1;
|
|
}
|
|
.footers{
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.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>
|
|
|