1172 lines
30 KiB
Vue
1172 lines
30 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="left">
|
||
<img src="../../assets/img/标题/能源监测-水.png" class="title" />
|
||
<div class="top">
|
||
<div>
|
||
<img src="../../assets/nyjc/组 963.png" alt="" />
|
||
<p>平阴水泥厂</p>
|
||
</div>
|
||
<div class="two">
|
||
<div class="txt">
|
||
<span style="color: #95fffe">1218</span><span>t</span>
|
||
</div>
|
||
<img src="../../assets/nyjc/煤 拷贝.png" alt="" />
|
||
<p>今日用水量</p>
|
||
</div>
|
||
</div>
|
||
<div class="rysl">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>日用水量</p>
|
||
</div>
|
||
<div class="tip">
|
||
<span>今日用水量</span><span>870</span><span>t</span><span>↑</span>
|
||
</div>
|
||
<div id="rysl"></div>
|
||
</div>
|
||
<div class="yysl">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>月用水量</p>
|
||
</div>
|
||
<div class="tip">
|
||
<span>本月用水量</span><span>870</span><span>t</span><span>↑</span>
|
||
</div>
|
||
<div id="yysl"></div>
|
||
</div>
|
||
<div class="nysl">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>年用水量</p>
|
||
</div>
|
||
<div class="tip">
|
||
<span>本年用水量</span><span>870</span><span>t</span><span>↑</span>
|
||
</div>
|
||
<div id="nysl"></div>
|
||
</div>
|
||
</div>
|
||
<tpt ref="tpt" :url="url"></tpt>
|
||
<div class="right">
|
||
<div class="ystj">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>用水统计</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="ystj">
|
||
<img src="../../assets/nyjc/组 964.png" alt="" />
|
||
<div class="zs">
|
||
<span>总数：</span
|
||
><span style="color: #58caff; font-size: 30px">5</span>
|
||
</div>
|
||
<div class="zx">
|
||
<span>在线：</span
|
||
><span style="color: #56f671; font-size: 30px">118</span>
|
||
</div>
|
||
<div class="zxl">
|
||
<span>在线率：</span
|
||
><span style="color: #56f671; font-size: 30px">72%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sbjc">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>水表监测</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="sbjc">
|
||
<div class="title">
|
||
<p>水表监测：</p>
|
||
<span>5</span>
|
||
<p>个</p>
|
||
</div>
|
||
<el-table
|
||
:data="tableData"
|
||
:row-class-name="tableRowClassName"
|
||
style="width: 100%"
|
||
header-cell-style="background-color: #1969A8; color: white"
|
||
>
|
||
<el-table-column label="序号" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.$index + 1 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="date1" label="名称" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date2" label="出水压力" align="center"
|
||
><template slot-scope="scope">
|
||
<span style="color: #58ff70"> {{ scope.row.date2 }}</span
|
||
><span>Mpa</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="date3" label="瞬间流量" align="center"
|
||
><template slot-scope="scope">
|
||
<span style="color: #58caff">{{ scope.row.date3 }}</span>
|
||
<span>m3/h</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="date4" label="喷水电耗" align="center"
|
||
><template slot-scope="scope">
|
||
<span style="color: #abb9fe"> {{ scope.row.date4 }}</span>
|
||
<span>kWh</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tpt">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>拓扑图</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="tpt">
|
||
<img :src="url" alt="" @click="$refs.tpt.open()" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="nhfx">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>能耗分析</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="nhfx"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import tpt from "../../components/tpt.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
option1: {
|
||
legend: {
|
||
data: [{ icon: "rect", name: "日用水量" }],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "20px",
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: ["1月", "2月", "3月", "4月", "5月"],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "单位:t",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
min: 0,
|
||
max: 500,
|
||
interval: 100, // 指定刻度间隔
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
// 让图表占满容器
|
||
// top: "5%",
|
||
left: "8%",
|
||
right: "5%",
|
||
bottom: "8%",
|
||
},
|
||
series: [
|
||
{
|
||
type: "line",
|
||
name: "日用水量",
|
||
data: [280, 350, 120, 270, 290],
|
||
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,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
option3: {
|
||
legend: {
|
||
data: [
|
||
{ icon: "rect", name: "去年用水量" },
|
||
{ icon: "rect", name: "今年用水量" },
|
||
],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "20px",
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: ["2019", "2020", "2021", "2022", "2023"],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "单位:t",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
min: 0,
|
||
max: 500,
|
||
interval: 100, // 指定刻度间隔
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
// 让图表占满容器
|
||
// top: "5%",
|
||
left: "8%",
|
||
right: "5%",
|
||
bottom: "8%",
|
||
},
|
||
series: [
|
||
{
|
||
type: "line",
|
||
name: "去年用水量",
|
||
data: [240, 334, 123, 270, 296],
|
||
symbolSize: 15,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#56F671",
|
||
lineStyle: {
|
||
width: 5, //折线宽度
|
||
color: "#56F671", //折线颜色
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "line",
|
||
name: "今年用水量",
|
||
symbolSize: 15,
|
||
data: [223, 434, 423, 254, 216],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#43FFF4",
|
||
lineStyle: {
|
||
width: 5, //折线宽度
|
||
color: "#43FFF4", //折线颜色
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
option4: {
|
||
legend: {
|
||
data: [{ icon: "rect", name: "吨水电耗" }],
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "20px",
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: ["01-25", "01-26", "01-27", "01-28", "01-29", "01-30"],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "单位:kWh/t",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
min: 0,
|
||
max: 1,
|
||
interval: 1, // 指定刻度间隔
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
// 让图表占满容器
|
||
// top: "5%",
|
||
left: "8%",
|
||
right: "5%",
|
||
bottom: "8%",
|
||
},
|
||
series: [
|
||
{
|
||
type: "line",
|
||
name: "吨水电耗",
|
||
data: [0.8, 0.6, 0.7, 0.5, 0.6, 0.3],
|
||
smooth: true,
|
||
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#43FFF4",
|
||
lineStyle: {
|
||
width: 5, //折线宽度
|
||
color: "#43FFF4", //折线颜色
|
||
},
|
||
areaStyle: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "#2A9095" },
|
||
{ offset: 0.5, color: "#27888F" },
|
||
{ offset: 1, color: "#1A3F51" },
|
||
]),
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
tableData: [
|
||
{
|
||
date1: "回转窑",
|
||
date2: "20.34",
|
||
date3: "20.34",
|
||
date4: "20.34",
|
||
},
|
||
{
|
||
date1: "熟料收尘",
|
||
date2: "17.42",
|
||
date3: "17.42",
|
||
date4: "17.42",
|
||
},
|
||
{
|
||
date1: "篦冷机",
|
||
date2: "12.22",
|
||
date3: "12.22",
|
||
date4: "12.22",
|
||
},
|
||
{
|
||
date1: "生料收尘",
|
||
date2: "19.19",
|
||
date3: "19.19",
|
||
date4: "19.19",
|
||
},
|
||
{
|
||
date1: "生料收尘",
|
||
date2: "19.19",
|
||
date3: "19.19",
|
||
date4: "19.19",
|
||
},
|
||
{
|
||
date1: "生料收尘",
|
||
date2: "19.19",
|
||
date3: "19.19",
|
||
date4: "19.19",
|
||
},
|
||
{
|
||
date1: "生料收尘",
|
||
date2: "19.19",
|
||
date3: "19.19",
|
||
date4: "19.19",
|
||
},
|
||
],
|
||
url: require("../../assets/img/大的拓扑图.png"),
|
||
};
|
||
},
|
||
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 "";
|
||
},
|
||
//月用水量
|
||
yysl() {
|
||
let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
|
||
let yaxisData = [90, 80, 100, 70, 65];
|
||
|
||
const offsetX = 20;
|
||
const offsetY = 10;
|
||
// 绘制左侧面
|
||
const CubeLeft = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
// console.log(shape);
|
||
const c0 = [shape.x, shape.y];
|
||
const c1 = [shape.x - offsetX, shape.y - offsetY];
|
||
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
|
||
const c3 = [xAxisPoint[0], xAxisPoint[1]];
|
||
ctx
|
||
.moveTo(c0[0], c0[1])
|
||
.lineTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
// 绘制右侧面
|
||
const CubeRight = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
const c1 = [shape.x, shape.y];
|
||
const c2 = [xAxisPoint[0], xAxisPoint[1]];
|
||
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
|
||
const c4 = [shape.x + offsetX, shape.y - offsetY];
|
||
ctx
|
||
.moveTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.lineTo(c4[0], c4[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
// 绘制顶面
|
||
const CubeTop = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const c1 = [shape.x, shape.y];
|
||
const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
|
||
const c3 = [shape.x, shape.y - offsetX];
|
||
const c4 = [shape.x - offsetX, shape.y - offsetY];
|
||
ctx
|
||
.moveTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.lineTo(c4[0], c4[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
// 注册三个面图形
|
||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||
|
||
const option = {
|
||
legend: {
|
||
data: [
|
||
{
|
||
name: "月用水量",
|
||
textStyle: {
|
||
color: "white",
|
||
fontSize: 20,
|
||
},
|
||
itemStyle: {
|
||
color: "#0E62D5", // 图例图标的颜色
|
||
},
|
||
},
|
||
],
|
||
},
|
||
// tooltip: {
|
||
// trigger: "axis",
|
||
// axisPointer: {
|
||
// type: "shadow",
|
||
// },
|
||
// // formatter: function (params) {
|
||
// // const item = params[1]
|
||
// // return item.name + ' : ' + item.value
|
||
// // }
|
||
// },
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: xaxisData,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
splitArea: false,
|
||
name: "单位:kWh",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: "#CEDDF2",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#2A353F",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "月用水量",
|
||
type: "custom",
|
||
markPoint: {
|
||
data: [
|
||
{
|
||
type: "max",
|
||
name: "Max",
|
||
symbolOffset: [0, 0],
|
||
itemStyle: {
|
||
color: "transparent", // 标注点颜色
|
||
},
|
||
// label 用于设置标注点上的文本标签样式
|
||
label: {
|
||
color: "#3F71FE", // 文本颜色
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
],
|
||
},
|
||
renderItem: (params, api) => {
|
||
const location = api.coord([api.value(0), api.value(1)]);
|
||
return {
|
||
type: "group",
|
||
children: [
|
||
{
|
||
type: "CubeLeft",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#4567FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#0CC7FA",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
type: "CubeRight",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#115DD5",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#0574D0",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
type: "CubeTop",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#0D7FFB",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#0440EB",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
};
|
||
},
|
||
data: yaxisData,
|
||
},
|
||
],
|
||
};
|
||
this.defineEcharts("yysl", option);
|
||
},
|
||
},
|
||
mounted() {
|
||
this.defineEcharts("rysl", this.option1);
|
||
// this.defineEcharts("yysl", this.option2);
|
||
this.yysl();
|
||
this.defineEcharts("nysl", this.option3);
|
||
this.defineEcharts("nhfx", this.option4);
|
||
},
|
||
components: {
|
||
tpt,
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="less">
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
background-color: transparent;
|
||
background-image: url(../../assets/img/左遮罩.png),
|
||
url(../../assets/img/右遮罩.png);
|
||
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;
|
||
}
|
||
.top {
|
||
position: relative;
|
||
margin-top: 100px;
|
||
color: #fff;
|
||
font-size: 22px;
|
||
display: flex;
|
||
div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 1155px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
img {
|
||
height: 130px;
|
||
width: 200px;
|
||
}
|
||
p {
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
.two {
|
||
.txt {
|
||
position: absolute;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
span:nth-of-type(1) {
|
||
font-size: 30px;
|
||
}
|
||
span:nth-of-type(2) {
|
||
font-size: 20px;
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 530px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.rysl {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
.tip {
|
||
margin-left: 20px;
|
||
font-size: 20px;
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 110px;
|
||
span:nth-of-type(1) {
|
||
margin-right: 30px;
|
||
}
|
||
span:nth-of-type(2) {
|
||
color: #09e83e;
|
||
font-weight: 600;
|
||
}
|
||
span:nth-of-type(4) {
|
||
color: #09e83e;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
#rysl {
|
||
width: 1155px;
|
||
height: 500px;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
.yysl {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
.tip {
|
||
margin-left: 20px;
|
||
font-size: 20px;
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 110px;
|
||
span:nth-of-type(1) {
|
||
margin-right: 30px;
|
||
}
|
||
span:nth-of-type(2) {
|
||
color: #11c3ff;
|
||
font-weight: 600;
|
||
}
|
||
span:nth-of-type(4) {
|
||
color: #11c3ff;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
#yysl {
|
||
width: 1155px;
|
||
height: 500px;
|
||
margin-top: 50px;
|
||
}
|
||
}
|
||
.nysl {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
.tip {
|
||
margin-left: 20px;
|
||
font-size: 20px;
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 110px;
|
||
span:nth-of-type(1) {
|
||
margin-right: 30px;
|
||
}
|
||
span:nth-of-type(2) {
|
||
color: #43fff4;
|
||
font-weight: 600;
|
||
}
|
||
span:nth-of-type(4) {
|
||
color: #43fff4;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
#nysl {
|
||
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;
|
||
.ystj {
|
||
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;
|
||
#ystj {
|
||
width: 1156px;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
position: relative;
|
||
img {
|
||
height: 180px;
|
||
width: 200px;
|
||
margin-left: 60px;
|
||
}
|
||
|
||
.zs {
|
||
position: absolute;
|
||
top: 80px;
|
||
left: 400px;
|
||
}
|
||
.zx {
|
||
position: absolute;
|
||
top: 30px;
|
||
left: 700px;
|
||
}
|
||
.zxl {
|
||
position: absolute;
|
||
top: 100px;
|
||
left: 700px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.sbjc {
|
||
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";
|
||
}
|
||
}
|
||
#sbjc {
|
||
width: 1155px;
|
||
height: 430px;
|
||
margin-top: 50px;
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
margin-left: 50px;
|
||
margin-bottom: 20px;
|
||
span {
|
||
margin: 0 20px;
|
||
font-size: 30px;
|
||
color: #56f671;
|
||
}
|
||
}
|
||
//table组件纵向滚动
|
||
/deep/ .el-table__body-wrapper {
|
||
overflow-y: auto;
|
||
height: 300px;
|
||
}
|
||
//隐藏滚动条
|
||
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/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;
|
||
}
|
||
|
||
/deep/ .el-table {
|
||
tr th,
|
||
tr td {
|
||
border-right: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tpt {
|
||
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";
|
||
}
|
||
}
|
||
#tpt {
|
||
width: 1155px;
|
||
height: 400px;
|
||
margin-top: 50px;
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
margin-left: 50px;
|
||
margin-bottom: 20px;
|
||
span {
|
||
margin: 0 20px;
|
||
font-size: 30px;
|
||
color: #56f671;
|
||
}
|
||
}
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.nhfx {
|
||
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";
|
||
}
|
||
}
|
||
#nhfx {
|
||
width: 1155px;
|
||
height: 500px;
|
||
margin-top: 50px;
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
margin-left: 50px;
|
||
margin-bottom: 20px;
|
||
span {
|
||
margin: 0 20px;
|
||
font-size: 30px;
|
||
color: #56f671;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|