908 lines
23 KiB
Vue
908 lines
23 KiB
Vue
<template>
|
||
<div class="box">
|
||
<img src="../../assets/nyjc/电1.png" alt="" id="img" />
|
||
<div class="left">
|
||
<img src="../../assets/img/标题/智能运维.png" class="title" />
|
||
<div class="hbsj">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>环保数据</p>
|
||
</div>
|
||
<div class="btns">
|
||
<div>一号窑系统</div>
|
||
<div>二号窑系统</div>
|
||
<div>三号窑系统</div>
|
||
</div>
|
||
<div class="date">
|
||
<div class="one">
|
||
<div>
|
||
<span>SO2折算值：</span>
|
||
<span>0.47</span>
|
||
</div>
|
||
<div>
|
||
<span>颗粒折算值：</span>
|
||
<span>0.20</span>
|
||
</div>
|
||
<div>
|
||
<span>NOX折算值：</span>
|
||
<span>41.42</span>
|
||
</div>
|
||
<div>
|
||
<span>CO折算值：</span>
|
||
<span>219.70</span>
|
||
</div>
|
||
</div>
|
||
<div class="one">
|
||
<div>
|
||
<span>实际值：</span>
|
||
<span>0.60</span>
|
||
</div>
|
||
<div>
|
||
<span>实际值：</span>
|
||
<span>0.26</span>
|
||
</div>
|
||
<div>
|
||
<span>实际值：</span>
|
||
<span>52.78</span>
|
||
</div>
|
||
<div>
|
||
<span>实际值：</span>
|
||
<span>280.00</span>
|
||
</div>
|
||
</div>
|
||
<div class="one">
|
||
<div>
|
||
<span>O2:：</span>
|
||
<span>6.98</span>
|
||
</div>
|
||
<div>
|
||
<span>流量：</span>
|
||
<span style="color: red">615218.94</span>
|
||
</div>
|
||
<div>
|
||
<span>流速：</span>
|
||
<span>18.74</span>
|
||
</div>
|
||
<div>
|
||
<span>压力：</span>
|
||
<span>-0.07</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hbgzjc">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>环境感知监测</p>
|
||
</div>
|
||
<div class="date">
|
||
<div>
|
||
<p>
|
||
<span>烟尘实测值：0.23</span>
|
||
<span>流量：0.23</span>
|
||
<span>温度：0.23</span>
|
||
<span>湿度：0.23</span>
|
||
</p>
|
||
<p>
|
||
<span>烟尘折算值：0.23</span>
|
||
<span>流速：0.23</span>
|
||
<span>压力：0.23</span>
|
||
<span>氧气：0.23</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span>烟尘实测值：0.23</span>
|
||
<span>流量：0.23</span>
|
||
<span>温度：0.23</span>
|
||
<span>湿度：0.23</span>
|
||
</p>
|
||
<p>
|
||
<span>烟尘折算值：0.23</span>
|
||
<span>流速：0.23</span>
|
||
<span>压力：0.23</span>
|
||
<span>氧气：0.23</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span>烟尘实测值：0.23</span>
|
||
<span>流量：0.23</span>
|
||
<span>温度：0.23</span>
|
||
<span>湿度：0.23</span>
|
||
</p>
|
||
<p>
|
||
<span>烟尘折算值：0.23</span>
|
||
<span>流速：0.23</span>
|
||
<span>压力：0.23</span>
|
||
<span>氧气：0.23</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span>烟尘实测值：0.23</span>
|
||
<span>流量：0.23</span>
|
||
<span>温度：0.23</span>
|
||
<span>湿度：0.23</span>
|
||
</p>
|
||
<p>
|
||
<span>烟尘折算值：0.23</span>
|
||
<span>流速：0.23</span>
|
||
<span>压力：0.23</span>
|
||
<span>氧气：0.23</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>
|
||
<span>烟尘实测值：0.23</span>
|
||
<span>流量：0.23</span>
|
||
<span>温度：0.23</span>
|
||
<span>湿度：0.23</span>
|
||
</p>
|
||
<p>
|
||
<span>烟尘折算值：0.23</span>
|
||
<span>流速：0.23</span>
|
||
<span>压力：0.23</span>
|
||
<span>氧气：0.23</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="kqwrpf">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>空气污染排放</p>
|
||
</div>
|
||
<div class="btns">
|
||
<div>甲烷</div>
|
||
<div>硫化氢</div>
|
||
<div>一氧化碳</div>
|
||
<div>氧气</div>
|
||
</div>
|
||
<div class="date">
|
||
<div>垃圾处理站排放物监测</div>
|
||
<div>一层</div>
|
||
<div>
|
||
<el-table
|
||
:data="tableData"
|
||
style="width: 100%"
|
||
header-cell-style="background-color: #1969A8; color: white"
|
||
>
|
||
<el-table-column prop="date1" label="监测点1" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date2" label="监测点2" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date3" label="监测点3" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date4" label="监测点4" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date5" label="监测点5" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date6" label="监测点6" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date7" label="监测点7" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date8" label="监测点8" align="center">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="yxzt">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>运行状态</p>
|
||
</div>
|
||
<div class="date">
|
||
<div>
|
||
<img src="../../assets/znyw/安全.png" />
|
||
<p style="color: #6aca32">安全</p>
|
||
</div>
|
||
<div>
|
||
<img src="../../assets/znyw/警戒.png" />
|
||
<p style="color: #fbae28">警戒</p>
|
||
</div>
|
||
<div>
|
||
<img src="../../assets/znyw/紧急.png" />
|
||
<p style="color: #f12f08">紧急</p>
|
||
</div>
|
||
<div>
|
||
<img src="../../assets/znyw/恢复.png" />
|
||
<p style="color: #00ebf2">恢复</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="xjjh">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>巡检计划</p>
|
||
</div>
|
||
<div class="table">
|
||
<el-table
|
||
:data="plan"
|
||
style="width: 100%"
|
||
:row-class-name="tableRowClassName"
|
||
header-cell-style="background-color: #1969A8; color: white"
|
||
>
|
||
<el-table-column prop="date1" label="计划名称" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date2" label="计划内容" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date3" label="巡检区域" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date4" label="巡检周期" align="center">
|
||
<template scope="scope">
|
||
<span style="color: #58ff70">{{ scope.row.date4 }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="date5" label="巡检日期" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date6" label="巡检人" align="center">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div class="sbyctj">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>设备异常统计</p>
|
||
</div>
|
||
<div id="charts"></div>
|
||
</div>
|
||
<div class="gjlb">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>告警列表</p>
|
||
</div>
|
||
<div class="table">
|
||
<el-table
|
||
:data="list"
|
||
style="width: 100%"
|
||
:row-class-name="tableRowClassName"
|
||
header-cell-style="background-color: #1969A8; color: white"
|
||
>
|
||
<el-table-column prop="date1" label="发生时间" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date2" label="告警等级" align="center">
|
||
<template scope="scope">
|
||
<span v-if="scope.row.date2 == '重大'" style="color: red">{{
|
||
scope.row.date2
|
||
}}</span>
|
||
<span v-else style="color: yellow">{{ scope.row.date2 }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="date3" label="告警内容" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date4" label="处理人" align="center">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
tableData: [
|
||
{
|
||
date1: "12",
|
||
date2: "10",
|
||
date3: "15",
|
||
date4: "18",
|
||
date5: "12",
|
||
date6: "15",
|
||
date7: "18",
|
||
date8: "12",
|
||
},
|
||
],
|
||
plan: [
|
||
{
|
||
date1: "巡检计划1",
|
||
date2: "1号生产线",
|
||
date3: "回转窑",
|
||
date4: "5",
|
||
date5: "2023-10-21",
|
||
date6: "张三",
|
||
},
|
||
{
|
||
date1: "巡检计划2",
|
||
date2: "2号生产线",
|
||
date3: "回转窑",
|
||
date4: "6",
|
||
date5: "2023-10-22",
|
||
date6: "李四",
|
||
},
|
||
{
|
||
date1: "巡检计划3",
|
||
date2: "3#线空压站",
|
||
date3: "一号空压机",
|
||
date4: "4",
|
||
date5: "2023-10-26",
|
||
date6: "王五",
|
||
},
|
||
{
|
||
date1: "巡检计划4",
|
||
date2: "水泥制备",
|
||
date3: "水泥磨",
|
||
date4: "5",
|
||
date5: "2023-10-23",
|
||
date6: "王五",
|
||
},
|
||
{
|
||
date1: "巡检计划5",
|
||
date2: "矿山开发",
|
||
date3: "一号破碎机",
|
||
date4: "3",
|
||
date5: "2023-10-28",
|
||
date6: "李四",
|
||
},
|
||
{
|
||
date1: "巡检计划6",
|
||
date2: "余热发电站",
|
||
date3: "蒸汽轮机",
|
||
date4: "6",
|
||
date5: "2023-10-29",
|
||
date6: "张三",
|
||
},
|
||
{
|
||
date1: "巡检计划7",
|
||
date2: "垃圾处理",
|
||
date3: "垃圾破碎机",
|
||
date4: "5",
|
||
date5: "2023-10-30",
|
||
date6: "赵六",
|
||
},
|
||
],
|
||
selectedRow: null, // 用于存储选中的行数据
|
||
list: [
|
||
{
|
||
date1: "2023-10-21 20:30",
|
||
date2: "紧急",
|
||
date3: "配电房温度过高",
|
||
date4: "张三",
|
||
},
|
||
{
|
||
date1: "2023-10-22 20:30",
|
||
date2: "重大",
|
||
date3: "变压器设备发生故障",
|
||
date4: "李四",
|
||
},
|
||
{
|
||
date1: "2023-10-26 20:30",
|
||
date2: "紧急",
|
||
date3: "配电房温度过高",
|
||
date4: "王五",
|
||
},
|
||
],
|
||
option: {
|
||
legend: {
|
||
data: ["正常", "预警", "故障"],
|
||
x: "center",
|
||
y: "top",
|
||
itemGap: 100,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "16px",
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: [
|
||
"2023-02-12",
|
||
"2023-03-12",
|
||
"2023-04-12",
|
||
"2023-05-12",
|
||
"2023-06-12",
|
||
],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
min: 0,
|
||
max: 0.3,
|
||
interval: 0.05, // 指定刻度间隔
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
// 让图表占满容器
|
||
top: "5%",
|
||
left: "8%",
|
||
right: "5%",
|
||
bottom: "8%",
|
||
},
|
||
series: [
|
||
{
|
||
name: "故障",
|
||
type: "bar",
|
||
stack: "total",
|
||
data: [0.08, 0.08, 0.06, 0.12, 0.09],
|
||
},
|
||
{
|
||
name: "预警",
|
||
stack: "total",
|
||
type: "bar",
|
||
data: [0.06, 0.07, 0.03, 0.06, 0.04],
|
||
},
|
||
{
|
||
name: "正常",
|
||
type: "bar",
|
||
stack: "total",
|
||
data: [0.13, 0.12, 0.08, 0.14, 0.12],
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if ((rowIndex + 1) % 2 === 0) {
|
||
return "success-row";
|
||
}
|
||
return "";
|
||
},
|
||
defineEcharts() {
|
||
// 获取容器实例;
|
||
var chartDom = document.getElementById("charts");
|
||
// 赋值并初始化ecahrts;
|
||
var myChart = this.$echarts.init(chartDom);
|
||
myChart.setOption(this.option);
|
||
},
|
||
},
|
||
mounted() {
|
||
this.defineEcharts();
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 400px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background-color: transparent;
|
||
}
|
||
#img {
|
||
position: absolute;
|
||
right: 0px;
|
||
}
|
||
.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;
|
||
}
|
||
.hbsj {
|
||
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";
|
||
}
|
||
}
|
||
.btns {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 50px;
|
||
margin-bottom: 50px;
|
||
padding-left: 149px;
|
||
padding-right: 124px;
|
||
box-sizing: border-box;
|
||
div {
|
||
width: 211px;
|
||
height: 55px;
|
||
background: #3ce9c2;
|
||
border-radius: 12px 12px 12px 12px;
|
||
border: 1px solid #36ffd3;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
color: #ffffff;
|
||
line-height: 55px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.date {
|
||
width: 1132px;
|
||
height: 400px;
|
||
background: linear-gradient(NaNdeg, #1e5181 0%);
|
||
border: 1px solid #135064;
|
||
border-image: radial-gradient(circle, rgba(30, 81, 129, 1)) 1 1;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
color: #fff;
|
||
.one {
|
||
height: 100%;
|
||
div {
|
||
height: 68px;
|
||
width: 313px;
|
||
line-height: 68px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
display: flex;
|
||
margin: 20px;
|
||
justify-content: space-between;
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(56, 183, 161, 0.3) 30%,
|
||
rgba(79, 180, 163, 0.3) 30%,
|
||
rgba(81, 147, 136, 0.3) 40%
|
||
);
|
||
border-left: 5px solid #28a896;
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
span:nth-of-type(2) {
|
||
color: #28ff50;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.hbgzjc {
|
||
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";
|
||
}
|
||
}
|
||
.date {
|
||
margin-top: 50px;
|
||
div {
|
||
width: 1128px;
|
||
height: 124px;
|
||
margin-top: 30px;
|
||
font-size: 30px;
|
||
color: #ffffff;
|
||
line-height: 60px;
|
||
position: relative;
|
||
p {
|
||
position: absolute;
|
||
right: 10px;
|
||
span {
|
||
margin: 0 34px;
|
||
}
|
||
}
|
||
p:nth-of-type(1) {
|
||
top: 10px;
|
||
}
|
||
p:nth-of-type(2) {
|
||
top: 60px;
|
||
}
|
||
}
|
||
div:nth-of-type(1) {
|
||
background: url("../../assets/znyw/1.png");
|
||
}
|
||
div:nth-of-type(2) {
|
||
background: url("../../assets/znyw/2.png");
|
||
}
|
||
div:nth-of-type(3) {
|
||
background: url("../../assets/znyw/3.png");
|
||
}
|
||
div:nth-of-type(4) {
|
||
background: url("../../assets/znyw/4.png");
|
||
}
|
||
div:nth-of-type(5) {
|
||
background: url("../../assets/znyw/5.png");
|
||
}
|
||
}
|
||
}
|
||
.kqwrpf {
|
||
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";
|
||
}
|
||
}
|
||
.btns {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 50px;
|
||
margin-bottom: 50px;
|
||
padding-left: 64px;
|
||
padding-right: 51px;
|
||
box-sizing: border-box;
|
||
div {
|
||
width: 211px;
|
||
height: 55px;
|
||
background: #24ccd4;
|
||
border-radius: 12px 12px 12px 12px;
|
||
border: 1px solid #36ffd3;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
color: #ffffff;
|
||
line-height: 55px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.date {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 1156px;
|
||
div {
|
||
width: 100%;
|
||
font-size: 30px;
|
||
font-family: "SourceHanSansCN";
|
||
font-weight: bold;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
}
|
||
div:nth-of-type(1) {
|
||
background-color: #1969a8;
|
||
height: 103px;
|
||
line-height: 103px;
|
||
}
|
||
div:nth-of-type(2) {
|
||
background-color: #15456e;
|
||
height: 103px;
|
||
line-height: 103px;
|
||
}
|
||
div:nth-of-type(3) {
|
||
/deep/ .el-table {
|
||
background-color: transparent;
|
||
height: 300px;
|
||
}
|
||
.el-table::before {
|
||
background-color: transparent;
|
||
}
|
||
/deep/.el-table__body {
|
||
height: 100px;
|
||
}
|
||
|
||
/* 设置表头文字颜色为白色，如果需要 */
|
||
/deep/.table__header thead colgroup {
|
||
color: #fff;
|
||
background-color: transparent !important;
|
||
}
|
||
/deep/.el-table__row {
|
||
background-color: #102b44 !important;
|
||
color: #fff;
|
||
}
|
||
/deep/ .el-table__row--current,
|
||
.el-table__row--selected {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
// 去掉eltable的hover效果
|
||
::v-deep .el-table tbody tr:hover > td {
|
||
background-color: #102b49 !important;
|
||
}
|
||
|
||
//去掉边框白线
|
||
::v-deep .el-table__row > td {
|
||
border: none;
|
||
}
|
||
|
||
::v-deep .el-table::before {
|
||
height: 0px;
|
||
}
|
||
/* 移除表头的下边框 */
|
||
::v-deep .el-table__header th {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-right: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
.yxzt {
|
||
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";
|
||
}
|
||
}
|
||
.date {
|
||
display: flex;
|
||
margin-top: 50px;
|
||
justify-content: space-around;
|
||
div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
p {
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.xjjh {
|
||
position: relative;
|
||
margin-top: 50px;
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
.table {
|
||
margin-top: 50px;
|
||
//表体颜色
|
||
/deep/.el-table tr {
|
||
background: #16253b;
|
||
color: #fff;
|
||
font-size: 30px;
|
||
height: 50px;
|
||
.cell {
|
||
line-height: 50px;
|
||
}
|
||
}
|
||
// 去掉eltable的hover效果
|
||
::v-deep .el-table tbody tr:hover > td {
|
||
background-color: #0b679e !important;
|
||
}
|
||
//修改表头颜色
|
||
::v-deep .has-gutter {
|
||
background-color: #1969a8;
|
||
th {
|
||
background-color: #1969a8;
|
||
}
|
||
}
|
||
//奇偶行颜色
|
||
::v-deep .el-table .success-row {
|
||
background: #184167;
|
||
}
|
||
//去掉边框白线
|
||
::v-deep .el-table__row > td {
|
||
border: none;
|
||
}
|
||
|
||
::v-deep .el-table::before {
|
||
height: 0px;
|
||
}
|
||
/* 移除表头的下边框 */
|
||
::v-deep .el-table__header th {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
}
|
||
.sbyctj {
|
||
position: relative;
|
||
margin-top: 50px;
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
#charts {
|
||
margin-top: 50px;
|
||
width: 1155px;
|
||
height: 400px;
|
||
}
|
||
}
|
||
.gjlb {
|
||
position: relative;
|
||
margin-top: 50px;
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
.table {
|
||
margin-top: 50px;
|
||
//表体颜色
|
||
/deep/.el-table tr {
|
||
background: #16253b;
|
||
color: #fff;
|
||
font-size: 30px;
|
||
height: 50px;
|
||
.cell {
|
||
line-height: 50px;
|
||
}
|
||
}
|
||
// 去掉eltable的hover效果
|
||
::v-deep .el-table tbody tr:hover > td {
|
||
background-color: #0b679e !important;
|
||
}
|
||
//修改表头颜色s
|
||
::v-deep .has-gutter {
|
||
background-color: #1969a8;
|
||
th {
|
||
background-color: #1969a8;
|
||
}
|
||
}
|
||
//奇偶行颜色
|
||
::v-deep .el-table .success-row {
|
||
background: #184167;
|
||
}
|
||
//去掉边框白线
|
||
::v-deep .el-table__row > td {
|
||
border: none;
|
||
}
|
||
|
||
::v-deep .el-table::before {
|
||
height: 0px;
|
||
}
|
||
/* 移除表头的下边框 */
|
||
::v-deep .el-table__header th {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|