948 lines
23 KiB
Vue
948 lines
23 KiB
Vue
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
import * as echarts from "echarts";
|
||
// 各系统能耗概况
|
||
const systemTab = [
|
||
{ name: "空调" },
|
||
{ name: "照明" },
|
||
{ name: "展陈" },
|
||
{ name: "消防" },
|
||
{ name: "电梯" },
|
||
];
|
||
const systemTabIndex = ref(0);
|
||
const systemLeftList = ref([
|
||
{
|
||
name: "今日用能峰值",
|
||
value: "322",
|
||
},
|
||
{
|
||
name: "本月用能峰值",
|
||
value: "35422",
|
||
},
|
||
]);
|
||
const systemRightList = ref([
|
||
[
|
||
{
|
||
name: "今日",
|
||
value: "3122",
|
||
unit: "kWh",
|
||
},
|
||
{
|
||
name: "昨日",
|
||
value: "9400",
|
||
unit: "kWh",
|
||
},
|
||
{
|
||
name: "同比",
|
||
value: "-201",
|
||
unit: "%",
|
||
},
|
||
], //日
|
||
[
|
||
{
|
||
name: "本月",
|
||
value: "3122",
|
||
unit: "kWh",
|
||
},
|
||
{
|
||
name: "上月",
|
||
value: "9400",
|
||
unit: "kWh",
|
||
},
|
||
{
|
||
name: "同比",
|
||
value: "-201",
|
||
unit: "%",
|
||
},
|
||
], //月
|
||
[
|
||
{
|
||
name: "今年",
|
||
value: "3122",
|
||
unit: "kWh",
|
||
},
|
||
{
|
||
name: "去年",
|
||
value: "9400",
|
||
unit: "kWh",
|
||
},
|
||
{
|
||
name: "同比",
|
||
value: "-201",
|
||
unit: "%",
|
||
},
|
||
], //年
|
||
]);
|
||
const selectSystemTab = (index) => {
|
||
systemTabIndex.value = index;
|
||
};
|
||
|
||
// 能耗总量echarts
|
||
const drawTotalChart = () => {
|
||
let myChart = echarts.init(document.getElementById("totalEnergy"));
|
||
const option = {
|
||
// backgroundColor: "#05224d",
|
||
tooltip: {},
|
||
grid: {
|
||
top: "18%",
|
||
left: "4%",
|
||
right: "4%",
|
||
bottom: "4%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。数学上的x轴
|
||
show: true,
|
||
lineStyle: {
|
||
// type:'dashed',
|
||
color: "#557775",
|
||
// color: "#233e64",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
//坐标轴刻度标签的相关设置
|
||
textStyle: {
|
||
color: "#DDFFFD",
|
||
// margin: 40,
|
||
},
|
||
},
|
||
|
||
axisTick: { show: false },
|
||
boundaryGap: true,
|
||
data: [
|
||
"11-01",
|
||
"11-02",
|
||
"11-03",
|
||
"11-04",
|
||
"11-05",
|
||
"11-07",
|
||
"11-08",
|
||
"11-09",
|
||
"11-10",
|
||
"11-11",
|
||
"11-12",
|
||
"11-13",
|
||
"11-14",
|
||
],
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位:kW",
|
||
// padding:[0,10,0,0],
|
||
nameTextStyle: {
|
||
color: "#DDFFFD",
|
||
align: "center",
|
||
padding: [0, 15, 0, 0],
|
||
},
|
||
min: 0,
|
||
max: 500,
|
||
splitNumber: 5,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(1, 39, 37, 0.30)",
|
||
},
|
||
},
|
||
axisLine: { show: false },
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#DDFFFD",
|
||
},
|
||
},
|
||
axisTick: { show: false },
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "异常流量",
|
||
type: "line",
|
||
smooth: true, //是否平滑曲线显示
|
||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||
symbolSize: 0,
|
||
|
||
lineStyle: {
|
||
color: "rgba(1, 246, 139, 1)", // 线条颜色
|
||
},
|
||
areaStyle: {
|
||
//区域填充样式
|
||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{ offset: 0, color: "rgba(1, 246, 139, 0.7)" },
|
||
{ offset: 1, color: "rgba(1, 246, 139, 0)" },
|
||
],
|
||
false
|
||
),
|
||
|
||
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||
},
|
||
data: [100, 200, 300, 282, 283, 166, 100, 200, 300, 282, 283, 166, 283],
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
};
|
||
// 定额管理charts
|
||
const drawManagement = () => {
|
||
let myChart = echarts.init(document.getElementById("management"));
|
||
const option = {
|
||
// backgroundColor: "#05224d",
|
||
tooltip: {},
|
||
legend: {
|
||
show: true,
|
||
icon: "rect",
|
||
right: "10",
|
||
top: "5",
|
||
layout: "vertical",
|
||
itemHeight: "10",
|
||
// itemWidth:'10',
|
||
textStyle: {
|
||
color: "rgba(221, 255, 253, 1)",
|
||
},
|
||
},
|
||
grid: {
|
||
top: "18%",
|
||
left: "4%",
|
||
right: "4%",
|
||
bottom: "4%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。数学上的x轴
|
||
show: true,
|
||
lineStyle: {
|
||
// type:'dashed',
|
||
color: "#557775",
|
||
// color: "#233e64",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
//坐标轴刻度标签的相关设置
|
||
textStyle: {
|
||
color: "#DDFFFD",
|
||
margin: 40,
|
||
},
|
||
},
|
||
|
||
axisTick: { show: false },
|
||
boundaryGap: true,
|
||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位:kgce/m²",
|
||
// padding:[0,10,0,0],
|
||
nameTextStyle: {
|
||
color: "#DDFFFD",
|
||
align: "middle",
|
||
padding: [0, -30, 0, 0],
|
||
},
|
||
min: 0,
|
||
max: 18,
|
||
splitNumber: 6,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(1, 39, 37, 0.30)",
|
||
},
|
||
},
|
||
axisLine: { show: false },
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#DDFFFD",
|
||
},
|
||
},
|
||
axisTick: { show: false },
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "单位建筑面积综合能耗",
|
||
markLine: {
|
||
//阈值
|
||
//最大值和最小值
|
||
data: [
|
||
{
|
||
yAxis: 9,
|
||
label: {
|
||
show: false,
|
||
},
|
||
lineStyle: {
|
||
width: 1,
|
||
color: "rgba(255, 221, 0, 1)",
|
||
// symbol:"none",
|
||
},
|
||
},
|
||
],
|
||
symbol: ["none", "none"],
|
||
},
|
||
type: "line",
|
||
smooth: true, //是否平滑曲线显示
|
||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||
symbolSize: 0,
|
||
itemStyle: {
|
||
color: "rgba(221, 255, 253, 1)",
|
||
},
|
||
|
||
lineStyle: {
|
||
color: "rgba(221, 255, 253, 1)", // 线条颜色
|
||
},
|
||
areaStyle: {
|
||
//区域填充样式
|
||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{ offset: 0, color: "rgba(221, 255, 253, .7)" },
|
||
{ offset: 1, color: "rgba(221, 255, 253, 0)" },
|
||
],
|
||
false
|
||
),
|
||
|
||
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||
},
|
||
data: [5, 7, 9, 6, 2, 5, 4],
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
};
|
||
// 能效流向
|
||
const drawEnergyFlow = () => {
|
||
let myChart = echarts.init(document.getElementById("energyFlow"));
|
||
let sourceData = [
|
||
{
|
||
name: "电",
|
||
nameValue: 1562,
|
||
valueUnit: "KWh",
|
||
},
|
||
{
|
||
name: "空调",
|
||
nameValue: 562,
|
||
valueUnit: "kWh",
|
||
},
|
||
{
|
||
name: "照明",
|
||
nameValue: 490,
|
||
valueUnit: "kWh",
|
||
},
|
||
{
|
||
name: "电梯",
|
||
nameValue: 510,
|
||
valueUnit: "kWh",
|
||
},
|
||
];
|
||
let sangjiColor = [
|
||
"rgba(91, 250, 241, 1)",
|
||
"rgba(91, 250, 241, 1)",
|
||
"rgba(91, 250, 241, 1)",
|
||
"rgba(91, 250, 241, 1)",
|
||
];
|
||
let itemStyleSource = [];
|
||
for (let d = 0; d < sourceData.length; d++) {
|
||
if (sourceData[d].name == "电") {
|
||
sourceData[d].label = {
|
||
position: "right",
|
||
};
|
||
}
|
||
sourceData[d].itemStyle = {
|
||
color: sangjiColor[d],
|
||
};
|
||
itemStyleSource.push(sourceData[d]);
|
||
}
|
||
|
||
let option = {
|
||
series: [
|
||
{
|
||
type: "sankey",
|
||
layout: "none",
|
||
top: "5%",
|
||
bottom: "4%",
|
||
left: "6%",
|
||
right: "5%",
|
||
nodeWidth: "13",
|
||
// nodeAlign:'right',
|
||
focusNodeAdjacency: "allEdges",
|
||
data: itemStyleSource,
|
||
links: [
|
||
{
|
||
source: "电",
|
||
target: "空调",
|
||
value: 8,
|
||
},
|
||
{
|
||
source: "电",
|
||
target: "照明",
|
||
value: 8,
|
||
},
|
||
{
|
||
source: "电",
|
||
target: "电梯",
|
||
value: 8,
|
||
},
|
||
],
|
||
label: {
|
||
position: "left",
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
formatter: function (params) {
|
||
if (params.dataIndex == 0) {
|
||
return (
|
||
"{a|" +
|
||
params.data.name +
|
||
"}\n" +
|
||
"{b|" +
|
||
params.data.nameValue +
|
||
"}" +
|
||
" " +
|
||
params.data.valueUnit
|
||
);
|
||
} else {
|
||
return (
|
||
"{name|" +
|
||
params.data.name +
|
||
"}" +
|
||
"{value|" +
|
||
params.data.nameValue +
|
||
"}" +
|
||
// " " +
|
||
params.data.valueUnit
|
||
);
|
||
}
|
||
},
|
||
rich: {
|
||
a: {
|
||
padding: [0, 15, 10, 0],
|
||
fontSize: "14",
|
||
},
|
||
b: {
|
||
color: "rgba(91, 250, 241, 1)",
|
||
fontWeight: "600",
|
||
fontSize: "16",
|
||
},
|
||
name: {
|
||
fontSize: 14,
|
||
// padding: [10, 0, 0, 0],
|
||
},
|
||
value: {
|
||
color: "rgba(91, 250, 241, 1)",
|
||
fontWeight: "600",
|
||
fontSize: "16",
|
||
padding: [0, 10, 0, 10],
|
||
},
|
||
},
|
||
},
|
||
lineStyle: {
|
||
color: "source",
|
||
// curveness: 0.5,
|
||
},
|
||
itemStyle: {
|
||
borderWidth: 1,
|
||
borderColor: "transparent",
|
||
},
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
};
|
||
//复费率
|
||
function getExhibitionLoad() {
|
||
let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
||
var option = {
|
||
tooltip: {
|
||
axisPointer: {
|
||
type: "shadow",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
borderWidth: 0,
|
||
top: 40,
|
||
bottom: 40,
|
||
left: 40,
|
||
right:20,
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
legend: {
|
||
icon: "rect",
|
||
right: "4%",
|
||
top:'3%',
|
||
itemWidth: 20, // 标签宽度为20px
|
||
itemHeight: 10, // 标签高度为10px
|
||
textStyle: {
|
||
color: "#ffffff",
|
||
},
|
||
data: ["尖", "峰", "平", "谷",'深'],
|
||
},
|
||
calculable: true,
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
trigger: "axis",
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
// type:'dashed',
|
||
color: "#557775",
|
||
// color: "#233e64",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitArea: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#DDFFFD",
|
||
margin: 40,
|
||
},
|
||
},
|
||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name:"单位:kWh",
|
||
nameTextStyle:{
|
||
color: "#DDFFFD",
|
||
// align:"right",
|
||
padding:[0,0,0,0]
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type:'dashed',
|
||
color: "rgba(1, 39, 37, 0.30)",
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#DDFFFD",
|
||
},
|
||
},
|
||
splitArea: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "尖",
|
||
type: "bar",
|
||
stack: "Total1",
|
||
barMaxWidth: 15,
|
||
barGap: "10%",
|
||
label: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(255, 165, 29, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(255, 165, 29, 0)",
|
||
},
|
||
]),
|
||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(255, 165, 29, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(255, 165, 29, 0)",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
data: [1, 2, 3, 4, 5, 6, 7],
|
||
},
|
||
{
|
||
name: "峰",
|
||
type: "bar",
|
||
barMaxWidth: 15,
|
||
stack: "Total1",
|
||
label: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(80, 194, 255, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(80, 194, 255, 0)",
|
||
},
|
||
]),
|
||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(80, 194, 255, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(80, 194, 255, 0)",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
data: [1, 2, 3, 4, 5, 6, 7],
|
||
},
|
||
{
|
||
name: "平",
|
||
type: "bar",
|
||
barMaxWidth: 15,
|
||
stack: "Total1",
|
||
label: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(255, 221, 0, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(255, 221, 0, 0)",
|
||
},
|
||
]),
|
||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(255, 221, 0, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(255, 221, 0, 0)",
|
||
},
|
||
]),
|
||
barBorderRadius: 0,
|
||
},
|
||
},
|
||
data: [1, 2, 3, 4, 5, 6, 7],
|
||
},
|
||
{
|
||
name: "谷",
|
||
type: "bar",
|
||
barMaxWidth: 15,
|
||
stack: "Total1",
|
||
label: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(1, 246, 139, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(1, 246, 139, 0)",
|
||
},
|
||
]),
|
||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(1, 246, 139, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(1, 246, 139, 0)",
|
||
},
|
||
]),
|
||
barBorderRadius: 0,
|
||
},
|
||
},
|
||
data: [1, 2, 3, 4, 5, 6, 7],
|
||
},
|
||
{
|
||
name: "深",
|
||
type: "bar",
|
||
barMaxWidth: 15,
|
||
stack: "Total1",
|
||
label: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(91, 250, 241, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(91, 250, 241, 0)",
|
||
},
|
||
]),
|
||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(91, 250, 241, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(91, 250, 241, 0)",
|
||
},
|
||
]),
|
||
barBorderRadius: 0,
|
||
},
|
||
},
|
||
data: [1, 2, 3, 4, 5, 6, 7],
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
}
|
||
// dom加载
|
||
onMounted(() => {
|
||
// 能耗总量
|
||
drawTotalChart();
|
||
// 定额管理
|
||
drawManagement();
|
||
// 能效流向
|
||
drawEnergyFlow();
|
||
//复费率
|
||
getExhibitionLoad();
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page m100">
|
||
<div class="page-left-box">
|
||
<!-- 能耗总量-->
|
||
<div class="title">
|
||
<span>能耗总量</span>
|
||
<p>
|
||
<span class="month">月</span>
|
||
<span class="day">日</span>
|
||
</p>
|
||
</div>
|
||
<div id="totalEnergy" class="margin10 box-bg"></div>
|
||
<!-- 能效对标（定额管理）-->
|
||
<div class="title margin10">
|
||
<span>能效对标（定额管理）</span>
|
||
<p>
|
||
<span class="year">年</span>
|
||
<span class="month">月</span>
|
||
</p>
|
||
</div>
|
||
<div id="management" class="margin10 box-bg"></div>
|
||
<!-- 能效流向 -->
|
||
<div class="title margin10">
|
||
<span>能效流向</span>
|
||
</div>
|
||
<div id="energyFlow" class="margin10 box-bg"></div>
|
||
</div>
|
||
<div class="page-right-box">
|
||
<!-- 各系统能耗概况 -->
|
||
<div class="title">
|
||
<span>各系统能耗概况</span>
|
||
</div>
|
||
<div id="airConditioningLoad" class="margin10 box-bg">
|
||
<ul class="system-tab">
|
||
<li
|
||
v-for="(item, index) in systemTab"
|
||
:class="index == systemTabIndex ? 'tab-select' : ''"
|
||
@click="selectSystemTab(index)"
|
||
>
|
||
<span>{{ item.name }}</span>
|
||
</li>
|
||
</ul>
|
||
<div class="system-content">
|
||
<div class="system-content-left">
|
||
<div
|
||
v-for="(item, index) in systemLeftList"
|
||
class="system-content-left-item"
|
||
>
|
||
<p class="system-content-left-item-p1">{{ item.name }}</p>
|
||
<p class="system-content-left-item-p2">{{ item.value }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="system-content-right">
|
||
<div
|
||
class="system-content-right-item"
|
||
v-for="(item, index) in systemRightList"
|
||
>
|
||
<ul class="system-content-right-item-title">
|
||
<li v-for="(s, i) in item">{{ s.name }}</li>
|
||
</ul>
|
||
<div class="system-content-right-item-box">
|
||
<span v-for="v in item" :class="v.unit === '%' ? 'yoy' : ''"
|
||
>{{ v.value }} <span class="unit">{{ v.unit }}</span></span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 复费率-->
|
||
<div class="title margin10">
|
||
<span>复费率</span>
|
||
<p>
|
||
<span class="year">年</span>
|
||
<span class="month">月</span>
|
||
<span class="day">日</span>
|
||
</p>
|
||
</div>
|
||
<div id="exhibitionLoad" class="margin10 box-bg"></div>
|
||
<!-- 电费电价-->
|
||
<div class="title margin10">
|
||
<span>电费电价</span>
|
||
</div>
|
||
<div id="ranking" class="margin10 box-bg"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.system-tab {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
padding-top: 0.7rem;
|
||
box-sizing: border-box;
|
||
|
||
.tab-select {
|
||
background-image: url("@/assets/images/air-tab-select.png");
|
||
}
|
||
|
||
li {
|
||
background-image: url("@/assets/images/air-tab.png");
|
||
cursor: pointer;
|
||
color: rgba(221, 255, 253, 1);
|
||
background-size: 100% 100%;
|
||
font-size: 0.8rem;
|
||
padding: 0.2rem 1.1rem;
|
||
}
|
||
}
|
||
|
||
.system-content {
|
||
height: 83%;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
|
||
&-left {
|
||
width: 6.875rem;
|
||
height: 100%;
|
||
display: flex;
|
||
align-content: space-evenly;
|
||
flex-wrap: wrap;
|
||
|
||
&-item {
|
||
height: 40%;
|
||
width: 100%;
|
||
background-image: url("@/assets/images/system-value-bg.png");
|
||
background-size: 100% 100%;
|
||
|
||
&-p1 {
|
||
height: 29%;
|
||
text-align: center;
|
||
font-size: 0.875rem;
|
||
color: rgba(221, 255, 253, 1);
|
||
}
|
||
|
||
&-p2 {
|
||
height: 70%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 600;
|
||
font-size: 20px;
|
||
color: rgba(91, 250, 241, 1);
|
||
}
|
||
}
|
||
}
|
||
|
||
&-right {
|
||
width: 15.7rem;
|
||
height: 100%;
|
||
//background-color: #fff;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: space-evenly;
|
||
&-item {
|
||
height: 30%;
|
||
//background-color: #000;
|
||
width: 100%;
|
||
|
||
&-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 0.8rem;
|
||
padding: 0 0.5rem;
|
||
box-sizing: border-box;
|
||
}
|
||
&-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 0.5rem;
|
||
box-sizing: border-box;
|
||
font-weight: bold;
|
||
background-image: url("@/assets/images/system-box.png");
|
||
background-size: 100% 100%;
|
||
height: 65%;
|
||
width: 100%;
|
||
color: rgba(255, 255, 255, 1);
|
||
.yoy {
|
||
color: rgba(1, 246, 139, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//background-color: #fff;
|
||
}
|
||
</style>
|