934 lines
31 KiB
Vue
934 lines
31 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="left">
|
||
<img src="../../assets/img/标题/碳资产管理.png" class="title" />
|
||
<div class="qybjzl">
|
||
<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="qybjzl">
|
||
<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>257.1</p>
|
||
<p>熟料</p>
|
||
</div>
|
||
</div>
|
||
<div class="second_one">
|
||
<div class="one">
|
||
<p>2641.76</p>
|
||
<p>粉磨</p>
|
||
</div>
|
||
<div class="two">
|
||
<p>0</p>
|
||
<p>辅助生产系统</p>
|
||
</div>
|
||
<div class="three">
|
||
<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="pfzb">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>各类排放占比</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="pfzb">
|
||
</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,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
option2: {
|
||
tooltip: {
|
||
trigger: "item",
|
||
triggerOn: "mousemove",
|
||
},
|
||
grid: {
|
||
top: "25px",
|
||
left: "10px",
|
||
right: "10px",
|
||
bottom: "6%",
|
||
containLabel: true,
|
||
},
|
||
series: {
|
||
type: "sankey",
|
||
layout: "none",
|
||
top: "2%",
|
||
bottom: "5%",
|
||
left: "5%",
|
||
right: "13%",
|
||
lineStyle: {
|
||
opacity: 0.3,
|
||
color: "gradient",
|
||
curveness: 0.7,
|
||
},
|
||
label: {
|
||
color: "#fff",
|
||
fontSize: 16,
|
||
formatter: function (params) {
|
||
return params.name + params.value
|
||
},
|
||
rich: {
|
||
white: {
|
||
fontSize: 20,
|
||
padding: [10, 0, 0, 0],
|
||
},
|
||
},
|
||
},
|
||
nodeGap: 20,
|
||
layoutIterations: 1,
|
||
emphasis: {
|
||
// focus: "adjacency",
|
||
},
|
||
data: [
|
||
{ name: "总量", value:"2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
|
||
{ name: "原材料", value:"461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
|
||
{ name: "电", value:"871", itemStyle: { color: "#55A9CE" }, depth: 1 },
|
||
{ name: "柴油", value:"290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
|
||
{ name: "煤", value:"28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
|
||
{ name: "1号生产线", value:"28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
{ name: "2号生产线", value:"28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
{ name: "3号生产线", value:"28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
{ name: "1号生产线", value:"28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
{ name: "2号生产线", value:"28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
{ name: "3号生产线", value:"28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
{ name: "1号生产线", value:"28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
{ name: "2号生产线", value:"28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
{ name: "3号生产线", value:"28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
{ name: "1号生产线", value:"28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
{ name: "2号生产线", value:"28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
{ name: "3号生产线", value:"28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
|
||
],
|
||
links: [
|
||
// L1→L3 4509
|
||
{ source: "总量", target: "柴油", value: 1200 },
|
||
{ source: "总量", target: "电", value: 1200 },
|
||
{ source: "总量", target: "原材料", value: 1200 },
|
||
{ source: "总量", target: "煤", value: 1200 },
|
||
// L1→L2→L3 2404
|
||
{ source: "电", target: "1", value: 300 },
|
||
{ source: "电", target: "2", value: 300 },
|
||
{ source: "电", target: "3", value: 300 },
|
||
{ source: "煤", target: "11", value: 300 },
|
||
{ source: "煤", target: "22", value: 300 },
|
||
{ source: "煤", target: "33", value: 300 },
|
||
{ source: "柴油", target: "111", value: 300 },
|
||
{ source: "柴油", target: "222", value: 300 },
|
||
{ source: "柴油", target: "333", value: 300 },
|
||
{ source: "原材料", target: "1111", value: 300 },
|
||
{ source: "原材料", target: "2222", value: 300 },
|
||
{ source: "原材料", target: "3333", value: 300 },
|
||
],
|
||
},
|
||
},
|
||
};
|
||
},
|
||
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 "";
|
||
},
|
||
getbing() {
|
||
var trafficWay = [{
|
||
name: '原煤',
|
||
value: 73.02
|
||
}, {
|
||
name: '原材料',
|
||
value: 12.6
|
||
}, {
|
||
name: '电',
|
||
value: 171.49
|
||
}];
|
||
var data = [];
|
||
var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
|
||
for (var i = 0; i < trafficWay.length; i++) {
|
||
data.push({
|
||
value: trafficWay[i].value,
|
||
name: trafficWay[i].name,
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 5,
|
||
shadowBlur: 20,
|
||
borderColor: color[i],
|
||
shadowColor: color[i]
|
||
}
|
||
}
|
||
}, {
|
||
value: 2,
|
||
name: '',
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
color: 'rgba(0, 0, 0, 0)',
|
||
borderColor: 'rgba(0, 0, 0, 0)',
|
||
borderWidth: 0
|
||
}
|
||
}
|
||
});
|
||
}
|
||
var seriesOption = [{
|
||
name: '',
|
||
type: 'pie',
|
||
clockWise: false,
|
||
radius: [105, 109],
|
||
hoverAnimation: false,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'outside',
|
||
color: '#ddd',
|
||
formatter: function (params) {
|
||
var percent = 0;
|
||
var total = 0;
|
||
for (var i = 0; i < trafficWay.length; i++) {
|
||
total += trafficWay[i].value;
|
||
}
|
||
percent = ((params.value / total) * 100).toFixed(0);
|
||
if (params.name !== '') {
|
||
return params.name + '\n' + '\n' + percent + '%';
|
||
} else {
|
||
return '';
|
||
}
|
||
},
|
||
},
|
||
labelLine: {
|
||
length: 40,
|
||
length2: 120,
|
||
show: true,
|
||
color: '#00ffff'
|
||
}
|
||
}
|
||
},
|
||
data: data
|
||
}];
|
||
let option = {
|
||
backgroundColor: '#0A2E5D',
|
||
color: color,
|
||
title: {
|
||
text: '257.1t',
|
||
top: '48%',
|
||
textAlign: "center",
|
||
left: "49%",
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 32,
|
||
fontWeight: '400'
|
||
}
|
||
},
|
||
graphic: {
|
||
elements: [{
|
||
type: "image",
|
||
z: 3,
|
||
style: {
|
||
// image: "transparent",
|
||
width: 178,
|
||
height: 178
|
||
},
|
||
left: 'center',
|
||
top: 'center',
|
||
position: [100, 100]
|
||
}]
|
||
},
|
||
tooltip: {
|
||
show: false
|
||
},
|
||
legend: {
|
||
icon: "rect",
|
||
orient: '',
|
||
x: 'right',
|
||
data: [
|
||
{
|
||
name: '原煤',
|
||
value: "13.68"
|
||
},
|
||
{
|
||
name: '原材料',
|
||
value: "13.68"
|
||
},
|
||
{
|
||
name: '电',
|
||
value: "13.68"
|
||
}],
|
||
left: 900,
|
||
bottom: 240,
|
||
align: 'left',
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
itemGap: 20
|
||
},
|
||
toolbox: {
|
||
show: false
|
||
},
|
||
series: seriesOption
|
||
}
|
||
let chartDom = document.getElementById("pfzb");
|
||
let myChart = this.$echarts.init(chartDom);
|
||
myChart.setOption(option);
|
||
}
|
||
},
|
||
mounted() {
|
||
this.defineEcharts("sstpf", this.option1);
|
||
this.defineEcharts("tlt", this.option2);
|
||
this.$nextTick(() => {
|
||
this.getbing();
|
||
})
|
||
},
|
||
};
|
||
</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;
|
||
}
|
||
|
||
.qybjzl {
|
||
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%);
|
||
}
|
||
}
|
||
}
|
||
|
||
#qybjzl {
|
||
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;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1186.png);
|
||
}
|
||
|
||
.three {
|
||
width: 190px;
|
||
height: 190px;
|
||
color: #39D7EE;
|
||
text-align: center;
|
||
|
||
p:nth-child(1) {
|
||
margin-top: 60px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1187.png);
|
||
}
|
||
}
|
||
|
||
.second_one {
|
||
display: flex;
|
||
margin-top: 27px;
|
||
justify-content: space-around;
|
||
|
||
// align-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;
|
||
}
|
||
|
||
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: 120px;
|
||
margin-left: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
font-size: 28px;
|
||
background: url(../../assets/TZCGL/组\ 1186.png);
|
||
}
|
||
|
||
.three {
|
||
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: 80px;
|
||
margin-left: 50px;
|
||
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;
|
||
|
||
.pfzb {
|
||
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;
|
||
|
||
#pfzb {
|
||
width: 1156px;
|
||
height: 600px;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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>
|
||
|