代码提交_3_4
This commit is contained in:
parent
a0fed8af8a
commit
01afb60e93
|
|
@ -234,9 +234,13 @@ function getCarbonTrends() {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
}
|
||||
//碳排放强度
|
||||
const getCarbonIntensity=()=> {
|
||||
const getCarbonIntensity = () => {
|
||||
const offsetX = 10; //bar宽
|
||||
const offsetY = 5; //倾斜角度
|
||||
// 绘制左侧面
|
||||
|
|
@ -384,8 +388,8 @@ const getCarbonIntensity=()=> {
|
|||
color: "#DDFFFD",
|
||||
padding: [0, 0, 0, 35],
|
||||
},
|
||||
max:500,
|
||||
min:0,
|
||||
max: 500,
|
||||
min: 0,
|
||||
// minInterval: 1,
|
||||
// y轴（竖直线）
|
||||
axisLine: {
|
||||
|
|
@ -535,9 +539,13 @@ const getCarbonIntensity=()=> {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
//各系统碳排放量统计
|
||||
const getCarbonEmissionStatistics = ()=> {
|
||||
const getCarbonEmissionStatistics = () => {
|
||||
let myChart = echarts.init(
|
||||
document.getElementById("carbonEmissionStatistics")
|
||||
);
|
||||
|
|
@ -661,7 +669,11 @@ const getCarbonEmissionStatistics = ()=> {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
const optionData = ref([
|
||||
{
|
||||
name: "CCER",
|
||||
|
|
@ -681,7 +693,7 @@ const color = [
|
|||
"rgba(1, 225, 242, 1)",
|
||||
"rgba(27, 255, 118, 1)",
|
||||
];
|
||||
const setLabel = ()=> {
|
||||
const setLabel = () => {
|
||||
optionData.value.forEach((item, index) => {
|
||||
item.itemStyle = {
|
||||
color: color[index],
|
||||
|
|
@ -734,7 +746,7 @@ const setLabel = ()=> {
|
|||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
};
|
||||
//碳中和
|
||||
const getCarbonNeutrality = () => {
|
||||
setLabel();
|
||||
|
|
@ -762,8 +774,12 @@ const getCarbonNeutrality = () => {
|
|||
},
|
||||
});
|
||||
myChart.setOption(option);
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
// bindListen(myChart);
|
||||
}
|
||||
};
|
||||
// 碳流图
|
||||
const drawEnergyFlow = () => {
|
||||
let myChart = echarts.init(document.getElementById("energyFlow"));
|
||||
|
|
@ -790,7 +806,7 @@ const drawEnergyFlow = () => {
|
|||
},
|
||||
{
|
||||
name: "其他",
|
||||
nameValue:320,
|
||||
nameValue: 320,
|
||||
valueUnit: "万tCO₂",
|
||||
},
|
||||
];
|
||||
|
|
@ -826,7 +842,7 @@ const drawEnergyFlow = () => {
|
|||
bottom: "4%",
|
||||
left: "6%",
|
||||
right: "5%",
|
||||
nodeAlign:'right',
|
||||
nodeAlign: "right",
|
||||
nodeWidth: "13",
|
||||
// nodeAlign:'right',
|
||||
focusNodeAdjacency: "allEdges",
|
||||
|
|
@ -858,28 +874,27 @@ const drawEnergyFlow = () => {
|
|||
color: "#fff",
|
||||
fontSize: 14,
|
||||
formatter: function (params) {
|
||||
|
||||
if (params.dataIndex === 0) {
|
||||
return (
|
||||
"{a|" +
|
||||
params.data.name +
|
||||
"}\n" +
|
||||
"{b|" +
|
||||
params.data.nameValue +
|
||||
"}" +
|
||||
" " +
|
||||
params.data.valueUnit
|
||||
"{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
|
||||
"{name|" +
|
||||
params.data.name +
|
||||
"}" +
|
||||
"{value|" +
|
||||
params.data.nameValue +
|
||||
"}" +
|
||||
// " " +
|
||||
params.data.valueUnit
|
||||
);
|
||||
}
|
||||
},
|
||||
|
|
@ -917,6 +932,10 @@ const drawEnergyFlow = () => {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
//加载完dom执行
|
||||
onMounted(() => {
|
||||
|
|
@ -928,8 +947,8 @@ onMounted(() => {
|
|||
getCarbonEmissionStatistics();
|
||||
//碳中和
|
||||
getCarbonNeutrality();
|
||||
// 碳流图
|
||||
drawEnergyFlow()
|
||||
// 碳流图
|
||||
drawEnergyFlow();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -23,73 +23,73 @@ const systemLeftList = ref([
|
|||
const systemRightList = ref([
|
||||
[
|
||||
{
|
||||
name: '今日',
|
||||
value: '3122',
|
||||
unit: 'kWh'
|
||||
name: "今日",
|
||||
value: "3122",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: '昨日',
|
||||
value: '9400',
|
||||
unit: 'kWh'
|
||||
name: "昨日",
|
||||
value: "9400",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: '同比',
|
||||
value: '-201',
|
||||
unit: '%'
|
||||
}
|
||||
],//日
|
||||
name: "同比",
|
||||
value: "-201",
|
||||
unit: "%",
|
||||
},
|
||||
], //日
|
||||
[
|
||||
{
|
||||
name: '本月',
|
||||
value: '3122',
|
||||
unit: 'kWh'
|
||||
name: "本月",
|
||||
value: "3122",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: '上月',
|
||||
value: '9400',
|
||||
unit: 'kWh'
|
||||
name: "上月",
|
||||
value: "9400",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: '同比',
|
||||
value: '-201',
|
||||
unit: '%'
|
||||
}
|
||||
],//月
|
||||
name: "同比",
|
||||
value: "-201",
|
||||
unit: "%",
|
||||
},
|
||||
], //月
|
||||
[
|
||||
{
|
||||
name: '今年',
|
||||
value: '3122',
|
||||
unit: 'kWh'
|
||||
name: "今年",
|
||||
value: "3122",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: '去年',
|
||||
value: '9400',
|
||||
unit: 'kWh'
|
||||
name: "去年",
|
||||
value: "9400",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: '同比',
|
||||
value: '-201',
|
||||
unit: '%'
|
||||
}
|
||||
]//年
|
||||
])
|
||||
name: "同比",
|
||||
value: "-201",
|
||||
unit: "%",
|
||||
},
|
||||
], //年
|
||||
]);
|
||||
|
||||
// 能耗总量时间点击事件
|
||||
const totalEnergyDate = ref('month')
|
||||
const toggleTotalEnergy = (event) =>{
|
||||
totalEnergyDate.value = event.srcElement.className
|
||||
}
|
||||
const totalEnergyDate = ref("month");
|
||||
const toggleTotalEnergy = (event) => {
|
||||
totalEnergyDate.value = event.srcElement.className;
|
||||
};
|
||||
// 能效对标时间点击时间
|
||||
const managementDate = ref('month')
|
||||
const managementDate = ref("month");
|
||||
|
||||
const toggleManagement = (event) => {
|
||||
managementDate.value = event.srcElement.className
|
||||
}
|
||||
managementDate.value = event.srcElement.className;
|
||||
};
|
||||
// 复费率的时间点击事件
|
||||
const exhibitionLoadDate = ref('month')
|
||||
const toggleExhibitionLoad = (event) =>{
|
||||
exhibitionLoadDate.value = event.srcElement.className
|
||||
}
|
||||
const exhibitionLoadDate = ref("month");
|
||||
const toggleExhibitionLoad = (event) => {
|
||||
exhibitionLoadDate.value = event.srcElement.className;
|
||||
};
|
||||
const selectSystemTab = (index) => {
|
||||
systemTabIndex.value = index;
|
||||
};
|
||||
|
|
@ -209,6 +209,10 @@ const drawTotalChart = () => {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
// 定额管理charts
|
||||
const drawManagement = () => {
|
||||
|
|
@ -344,6 +348,10 @@ const drawManagement = () => {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
// 能效流向
|
||||
const drawEnergyFlow = () => {
|
||||
|
|
@ -401,7 +409,7 @@ const drawEnergyFlow = () => {
|
|||
bottom: "4%",
|
||||
left: "6%",
|
||||
right: "5%",
|
||||
nodeAlign:'right',
|
||||
nodeAlign: "right",
|
||||
nodeWidth: "13",
|
||||
// nodeAlign:'right',
|
||||
focusNodeAdjacency: "allEdges",
|
||||
|
|
@ -428,7 +436,6 @@ const drawEnergyFlow = () => {
|
|||
color: "#fff",
|
||||
fontSize: 14,
|
||||
formatter: function (params) {
|
||||
|
||||
if (params.dataIndex === 0) {
|
||||
return (
|
||||
"{a|" +
|
||||
|
|
@ -487,6 +494,10 @@ const drawEnergyFlow = () => {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
//复费率
|
||||
function getExhibitionLoad() {
|
||||
|
|
@ -505,7 +516,7 @@ function getExhibitionLoad() {
|
|||
top: 40,
|
||||
bottom: 40,
|
||||
left: 40,
|
||||
right:20,
|
||||
right: 20,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
|
|
@ -513,13 +524,13 @@ function getExhibitionLoad() {
|
|||
legend: {
|
||||
icon: "rect",
|
||||
right: "4%",
|
||||
top:'3%',
|
||||
top: "3%",
|
||||
itemWidth: 20, // 标签宽度为20px
|
||||
itemHeight: 10, // 标签高度为10px
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
data: ["尖", "峰", "平", "谷",'深'],
|
||||
data: ["尖", "峰", "平", "谷", "深"],
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
|
|
@ -555,16 +566,16 @@ function getExhibitionLoad() {
|
|||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name:"单位:kWh",
|
||||
nameTextStyle:{
|
||||
name: "单位:kWh",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
// align:"right",
|
||||
padding:[0,0,0,0]
|
||||
padding: [0, 0, 0, 0],
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type:'dashed',
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
},
|
||||
},
|
||||
|
|
@ -765,41 +776,46 @@ function getExhibitionLoad() {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
}
|
||||
|
||||
// 电费电价
|
||||
const drawElectricityPrice = () => {
|
||||
let myChart = echarts.init(document.getElementById('electricity-price'))
|
||||
let myChart = echarts.init(document.getElementById("electricity-price"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(1, 13, 19, 0.5)",
|
||||
borderWidth: 0,
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
textStyle: {
|
||||
color: "rgba(212, 232, 254, 1)",
|
||||
// fontSize: fontChart(0.24),
|
||||
},
|
||||
confine: true
|
||||
confine: true,
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
data:['电费','销售电价'],
|
||||
selected:{
|
||||
'电费': true,
|
||||
'销售电价': true,
|
||||
data: ["电费", "销售电价"],
|
||||
selected: {
|
||||
电费: true,
|
||||
销售电价: true,
|
||||
},
|
||||
icon: 'rect',
|
||||
itemGap:14,
|
||||
top:"8",
|
||||
layout: 'vertical',
|
||||
itemHeight: '10',
|
||||
icon: "rect",
|
||||
itemGap: 14,
|
||||
top: "8",
|
||||
layout: "vertical",
|
||||
itemHeight: "10",
|
||||
// itemWidth:'10',
|
||||
textStyle: {
|
||||
color: "rgba(221, 255, 253, 1)"
|
||||
}
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
|
|
@ -810,13 +826,13 @@ const drawElectricityPrice = () => {
|
|||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
|
||||
type: "category",
|
||||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#557775'
|
||||
}
|
||||
color: "#557775",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
|
|
@ -827,51 +843,52 @@ const drawElectricityPrice = () => {
|
|||
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
fontFamily: "Microsoft YaHei",
|
||||
color: "#DDFFFD",
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
yAxis: [{
|
||||
name: '单位:kWh',
|
||||
nameTextStyle: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
padding: [0, 0, 0, 10]
|
||||
yAxis: [
|
||||
{
|
||||
name: "单位:kWh",
|
||||
nameTextStyle: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
padding: [0, 0, 0, 10],
|
||||
},
|
||||
// 表现为上下位置
|
||||
type: "value",
|
||||
max: "50",
|
||||
splitNumber: 5,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#666666",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: "Microsoft YaHei",
|
||||
color: "#DDFFFD",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
// 表现为上下位置
|
||||
type: 'value',
|
||||
max: '50',
|
||||
splitNumber: 5,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#666666',
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
color: "#DDFFFD",
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// splitNumber:
|
||||
name: '单位:元/kWh',
|
||||
position: 'right', // 放在右边
|
||||
name: "单位:元/kWh",
|
||||
position: "right", // 放在右边
|
||||
nameTextStyle: {
|
||||
padding: [0, 15, 0, 0],
|
||||
color: 'rgba(221, 255, 253, 1)'
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// fontSize: 18,
|
||||
color: 'rgba(221, 255, 253, 1)',
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
formatter: function (value) {
|
||||
// 在标签后面添加百分号
|
||||
return value.toFixed(1);
|
||||
|
|
@ -890,50 +907,57 @@ const drawElectricityPrice = () => {
|
|||
color: "rgba(1, 39, 37, 0.30)",
|
||||
|
||||
// color: '#eff6ff'
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [{
|
||||
name: '电费',
|
||||
type: 'bar',
|
||||
barWidth: '15',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(82, 217, 208, 1)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(82, 217, 208, 0)'
|
||||
}]),
|
||||
|
||||
},
|
||||
},
|
||||
data: [40, 35, 15, 10, 19, 24, 14]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销售电价',
|
||||
type: 'line',
|
||||
name: "电费",
|
||||
type: "bar",
|
||||
barWidth: "15",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(82, 217, 208, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(82, 217, 208, 0)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: [40, 35, 15, 10, 19, 24, 14],
|
||||
},
|
||||
{
|
||||
name: "销售电价",
|
||||
type: "line",
|
||||
yAxisIndex: 1, // 与第二个 y 轴关联
|
||||
itemStyle: {
|
||||
color: 'rgba(1, 246, 139, 1)', // 设置折线颜色为黄色
|
||||
color: "rgba(1, 246, 139, 1)", // 设置折线颜色为黄色
|
||||
},
|
||||
symbol:"none",
|
||||
symbol: "none",
|
||||
data: [0.1, 0.2, 0.6, 1, 0.4, 0.8, 0.9], // 折线图的数据
|
||||
},
|
||||
]
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
}
|
||||
myChart.setOption(option);
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
|
||||
// 时间选择器参数
|
||||
const dateValue = ref('')
|
||||
const dateValue = ref("");
|
||||
// 默认时间
|
||||
const defaultTime = ref([
|
||||
new Date(2000,1,1,0,0,0),
|
||||
new Date(2000,2,1,23,59,59),
|
||||
])
|
||||
new Date(2000, 1, 1, 0, 0, 0),
|
||||
new Date(2000, 2, 1, 23, 59, 59),
|
||||
]);
|
||||
// dom加载
|
||||
onMounted(() => {
|
||||
// 能耗总量
|
||||
|
|
@ -941,11 +965,11 @@ onMounted(() => {
|
|||
// 定额管理
|
||||
drawManagement();
|
||||
// 能效流向
|
||||
drawEnergyFlow()
|
||||
// 电费电价
|
||||
drawElectricityPrice()
|
||||
// })
|
||||
// drawEnergyFlow();
|
||||
drawEnergyFlow();
|
||||
// 电费电价
|
||||
drawElectricityPrice();
|
||||
// })
|
||||
// drawEnergyFlow();
|
||||
//复费率
|
||||
getExhibitionLoad();
|
||||
});
|
||||
|
|
@ -958,8 +982,18 @@ onMounted(() => {
|
|||
<div class="title">
|
||||
<span>能耗总量</span>
|
||||
<p>
|
||||
<span class="month" :class="totalEnergyDate === 'month'?'selectMonth':''" @click="toggleTotalEnergy">月</span>
|
||||
<span class="day" :class="totalEnergyDate === 'day'?'selectDay':''" @click="toggleTotalEnergy">日</span>
|
||||
<span
|
||||
class="month"
|
||||
:class="totalEnergyDate === 'month' ? 'selectMonth' : ''"
|
||||
@click="toggleTotalEnergy"
|
||||
>月</span
|
||||
>
|
||||
<span
|
||||
class="day"
|
||||
:class="totalEnergyDate === 'day' ? 'selectDay' : ''"
|
||||
@click="toggleTotalEnergy"
|
||||
>日</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div id="totalEnergy" class="margin10 box-bg"></div>
|
||||
|
|
@ -967,8 +1001,18 @@ onMounted(() => {
|
|||
<div class="title margin10">
|
||||
<span>能效对标（定额管理）</span>
|
||||
<p>
|
||||
<span class="year" :class="managementDate === 'year'?'selectYear':''" @click="toggleManagement">年</span>
|
||||
<span class="month" :class="managementDate === 'month'?'selectMonth':''" @click="toggleManagement">月</span>
|
||||
<span
|
||||
class="year"
|
||||
:class="managementDate === 'year' ? 'selectYear' : ''"
|
||||
@click="toggleManagement"
|
||||
>年</span
|
||||
>
|
||||
<span
|
||||
class="month"
|
||||
:class="managementDate === 'month' ? 'selectMonth' : ''"
|
||||
@click="toggleManagement"
|
||||
>月</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div id="management" class="margin10 box-bg"></div>
|
||||
|
|
@ -976,15 +1020,15 @@ onMounted(() => {
|
|||
<div class="title margin10">
|
||||
<span>能效流向</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg flow">
|
||||
<div class="margin10 box-bg flow">
|
||||
<div class="date-picker">
|
||||
<span style="font-size: 0.875rem">选择日期：</span>
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="daterange"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
:default-time="defaultTime"
|
||||
v-model="dateValue"
|
||||
type="daterange"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
:default-time="defaultTime"
|
||||
/>
|
||||
</div>
|
||||
<div id="energyFlow"></div>
|
||||
|
|
@ -1016,14 +1060,17 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
<div class="system-content-right">
|
||||
<div v-for="(item,index) in systemRightList" class="system-content-right-item">
|
||||
<div
|
||||
v-for="(item, index) in systemRightList"
|
||||
class="system-content-right-item"
|
||||
>
|
||||
<ul class="system-content-right-item-title">
|
||||
<li v-for="(s,i) in item">{{ s.name }}</li>
|
||||
<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>
|
||||
|
||||
<span v-for="v in item" :class="v.unit === '%' ? 'yoy' : ''"
|
||||
>{{ v.value }} <span class="unit">{{ v.unit }}</span></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1033,9 +1080,24 @@ onMounted(() => {
|
|||
<div class="title margin10">
|
||||
<span>复费率</span>
|
||||
<p>
|
||||
<span class="year" :class="exhibitionLoadDate === 'year'?'selectYear':''" @click="toggleExhibitionLoad">年</span>
|
||||
<span class="month" :class="exhibitionLoadDate === 'month'?'selectMonth':''" @click="toggleExhibitionLoad">月</span>
|
||||
<span class="day" :class="exhibitionLoadDate === 'day'?'selectDay':''" @click="toggleExhibitionLoad">日</span>
|
||||
<span
|
||||
class="year"
|
||||
:class="exhibitionLoadDate === 'year' ? 'selectYear' : ''"
|
||||
@click="toggleExhibitionLoad"
|
||||
>年</span
|
||||
>
|
||||
<span
|
||||
class="month"
|
||||
:class="exhibitionLoadDate === 'month' ? 'selectMonth' : ''"
|
||||
@click="toggleExhibitionLoad"
|
||||
>月</span
|
||||
>
|
||||
<span
|
||||
class="day"
|
||||
:class="exhibitionLoadDate === 'day' ? 'selectDay' : ''"
|
||||
@click="toggleExhibitionLoad"
|
||||
>日</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div id="exhibitionLoad" class="margin10 box-bg"></div>
|
||||
|
|
@ -1049,20 +1111,19 @@ onMounted(() => {
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#energyFlow{
|
||||
#energyFlow {
|
||||
width: 100%;
|
||||
height: 82.4%;
|
||||
|
||||
}
|
||||
.flow{
|
||||
padding-top: .5rem;
|
||||
.flow {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
.date-picker{
|
||||
.date-picker {
|
||||
padding-left: 0.75rem;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
:deep(.el-input__wrapper){
|
||||
background-image: url('@/assets/images/picker.png');
|
||||
align-items: center;
|
||||
:deep(.el-input__wrapper) {
|
||||
background-image: url("@/assets/images/picker.png");
|
||||
background-size: 100% 100%;
|
||||
box-shadow: none !important;
|
||||
width: 20rem !important;
|
||||
|
|
@ -1072,11 +1133,11 @@ onMounted(() => {
|
|||
border: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
:deep(.el-icon){
|
||||
:deep(.el-icon) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.el-range-input){
|
||||
color:rgba(221, 255, 253, 1) !important;
|
||||
:deep(.el-range-input) {
|
||||
color: rgba(221, 255, 253, 1) !important;
|
||||
}
|
||||
}
|
||||
.system-tab {
|
||||
|
|
|
|||
|
|
@ -44,9 +44,9 @@ const getImageUrl = (name) => {
|
|||
return new URL(name, import.meta.url).href;
|
||||
};
|
||||
//实时负荷
|
||||
const getRealTimeLoad = ()=> {
|
||||
let myChart
|
||||
myChart = echarts.init(document.getElementById("realTimeLoad"));
|
||||
const getRealTimeLoad = () => {
|
||||
let myChart;
|
||||
myChart = echarts.init(document.getElementById("realTimeLoad"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {},
|
||||
|
|
@ -124,7 +124,11 @@ const getRealTimeLoad = ()=> {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
//当日累计用电量
|
||||
const getDailyElectricityConsumption = () => {
|
||||
const offsetX = 10; //bar宽
|
||||
|
|
@ -273,7 +277,7 @@ const getDailyElectricityConsumption = () => {
|
|||
name: "单位:kWh",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
padding:[0,5,0,0]
|
||||
padding: [0, 5, 0, 0],
|
||||
},
|
||||
// minInterval: 1,
|
||||
// y轴（竖直线）
|
||||
|
|
@ -406,10 +410,14 @@ const getDailyElectricityConsumption = () => {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
|
||||
//空调负荷
|
||||
const drawAirConditioningLoad = ()=> {
|
||||
const drawAirConditioningLoad = () => {
|
||||
let myChart = echarts.init(document.getElementById("airConditioningLoad"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
|
|
@ -507,9 +515,13 @@ const drawAirConditioningLoad = ()=> {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
// 展陈负荷
|
||||
const drawExhibitionLoad =()=> {
|
||||
const drawExhibitionLoad = () => {
|
||||
let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
|
|
@ -607,9 +619,13 @@ const drawExhibitionLoad =()=> {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
// 配电回路排名
|
||||
const drawRanking = ()=> {
|
||||
const drawRanking = () => {
|
||||
let myChart = echarts.init(document.getElementById("ranking"));
|
||||
let option = {
|
||||
grid: {
|
||||
|
|
@ -743,9 +759,13 @@ const drawRanking = ()=> {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
//负荷分类
|
||||
const getLoadClassification=()=> {
|
||||
const getLoadClassification = () => {
|
||||
var trafficWay = [
|
||||
{
|
||||
name: "一级",
|
||||
|
|
@ -940,22 +960,26 @@ const getLoadClassification=()=> {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
//加载完dom执行
|
||||
onMounted(() => {
|
||||
//实时负荷
|
||||
getRealTimeLoad();
|
||||
//当日累计用电量
|
||||
getDailyElectricityConsumption();
|
||||
// 空调负荷
|
||||
drawAirConditioningLoad();
|
||||
// 展陈负荷
|
||||
drawExhibitionLoad();
|
||||
// 配电回路排名
|
||||
drawRanking();
|
||||
//负荷分类
|
||||
getLoadClassification();
|
||||
})
|
||||
//实时负荷
|
||||
getRealTimeLoad();
|
||||
//当日累计用电量
|
||||
getDailyElectricityConsumption();
|
||||
// 空调负荷
|
||||
drawAirConditioningLoad();
|
||||
// 展陈负荷
|
||||
drawExhibitionLoad();
|
||||
// 配电回路排名
|
||||
drawRanking();
|
||||
//负荷分类
|
||||
getLoadClassification();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script setup>
|
||||
import {onMounted, ref} from "vue"
|
||||
import { onMounted, ref } from "vue";
|
||||
import getPath from "@/utils/getPath.js";
|
||||
import * as echarts from "echarts";
|
||||
import dialogBox from './components/dialog.vue'
|
||||
import dialogBox from "./components/dialog.vue";
|
||||
// 照明监测
|
||||
const lightingNumList = ref([
|
||||
{
|
||||
|
|
@ -24,116 +24,112 @@ const lightingNumList = ref([
|
|||
name: "离线数量",
|
||||
num: 1130,
|
||||
pic: getPath.offlineNum,
|
||||
}
|
||||
])
|
||||
},
|
||||
]);
|
||||
// 照明回路详情
|
||||
const lightDetail = ref([
|
||||
{
|
||||
name: '照明1',
|
||||
name: "照明1",
|
||||
address: "西大厅",
|
||||
state: false
|
||||
state: false,
|
||||
},
|
||||
{
|
||||
name: '照明2',
|
||||
name: "照明2",
|
||||
address: "西大厅",
|
||||
state: false
|
||||
state: false,
|
||||
},
|
||||
{
|
||||
name: '照明3',
|
||||
name: "照明3",
|
||||
address: "西大厅",
|
||||
state: false
|
||||
state: false,
|
||||
},
|
||||
{
|
||||
name: '照明4',
|
||||
name: "照明4",
|
||||
address: "西大厅",
|
||||
state: true
|
||||
state: true,
|
||||
},
|
||||
{
|
||||
name: '照明5',
|
||||
name: "照明5",
|
||||
address: "西大厅",
|
||||
state: true
|
||||
}
|
||||
])
|
||||
state: true,
|
||||
},
|
||||
]);
|
||||
|
||||
// 照明控制
|
||||
const lightControl = ref([
|
||||
{
|
||||
name: '控制箱名称1'
|
||||
name: "控制箱名称1",
|
||||
},
|
||||
{
|
||||
name: '控制箱名称2'
|
||||
name: "控制箱名称2",
|
||||
},
|
||||
{
|
||||
name: '控制箱名称3'
|
||||
name: "控制箱名称3",
|
||||
},
|
||||
{
|
||||
name: '控制箱名称4'
|
||||
name: "控制箱名称4",
|
||||
},
|
||||
{
|
||||
name: '控制箱名称5'
|
||||
}
|
||||
|
||||
])
|
||||
name: "控制箱名称5",
|
||||
},
|
||||
]);
|
||||
// 照明负荷的时间切换
|
||||
const lightLoadDate = ref('day')
|
||||
const lightLoadDate = ref("day");
|
||||
|
||||
const emit = defineEmits(["sendVal","closeBox"])
|
||||
const emit = defineEmits(["sendVal", "closeBox"]);
|
||||
// 楼层控制
|
||||
|
||||
const floorList = ref(
|
||||
[ {
|
||||
name:'一层'
|
||||
},
|
||||
{
|
||||
name:'二层'
|
||||
},
|
||||
{
|
||||
name:'三层'
|
||||
},
|
||||
{
|
||||
name:'负一层'
|
||||
}]
|
||||
)
|
||||
const floorIndex = ref(-1)
|
||||
const floorList = ref([
|
||||
{
|
||||
name: "一层",
|
||||
},
|
||||
{
|
||||
name: "二层",
|
||||
},
|
||||
{
|
||||
name: "三层",
|
||||
},
|
||||
{
|
||||
name: "负一层",
|
||||
},
|
||||
]);
|
||||
const floorIndex = ref(-1);
|
||||
// 楼层选择方法
|
||||
const toggleFloor = (item,index) =>{
|
||||
|
||||
if(item.name==="一层"){
|
||||
emit('sendVal',6)
|
||||
}else if(item.name === "二层"){
|
||||
emit('sendVal',7)
|
||||
}else if(item.name === "三层"){
|
||||
emit('sendVal',8)
|
||||
}else if(item.name==="负一层"){
|
||||
emit('sendVal',5)
|
||||
const toggleFloor = (item, index) => {
|
||||
if (item.name === "一层") {
|
||||
emit("sendVal", 6);
|
||||
} else if (item.name === "二层") {
|
||||
emit("sendVal", 7);
|
||||
} else if (item.name === "三层") {
|
||||
emit("sendVal", 8);
|
||||
} else if (item.name === "负一层") {
|
||||
emit("sendVal", 5);
|
||||
}
|
||||
floorIndex.value = index
|
||||
}
|
||||
floorIndex.value = index;
|
||||
};
|
||||
|
||||
const toggleLightLoad = (event) => {
|
||||
lightLoadDate.value = event.srcElement.className
|
||||
}
|
||||
lightLoadDate.value = event.srcElement.className;
|
||||
};
|
||||
// 照明控制
|
||||
const controlBtn = ref('')
|
||||
const controlBtn = ref("on");
|
||||
const toggleControl = (event) => {
|
||||
controlBtn.value = event.srcElement.className
|
||||
}
|
||||
controlBtn.value = event.srcElement.className;
|
||||
};
|
||||
// 弹窗
|
||||
const dialogShow = ref(false)
|
||||
const box = ref("")
|
||||
const dialogTitle = ref("")
|
||||
const dialogShow = ref(false);
|
||||
const box = ref("");
|
||||
const dialogTitle = ref("");
|
||||
const openDialog = (name) => {
|
||||
// 关闭三维照明控制箱的方法
|
||||
emit("closeBox","")
|
||||
emit("closeBox", "");
|
||||
|
||||
dialogTitle.value = name
|
||||
dialogShow.value = true
|
||||
|
||||
}
|
||||
dialogTitle.value = name;
|
||||
dialogShow.value = true;
|
||||
};
|
||||
const closeDialog = (val) => {
|
||||
dialogShow.value = val
|
||||
|
||||
}
|
||||
dialogShow.value = val;
|
||||
};
|
||||
// 故障情况
|
||||
const drawFaultConditionsChart = () => {
|
||||
let trafficWay = [
|
||||
|
|
@ -145,7 +141,6 @@ const drawFaultConditionsChart = () => {
|
|||
name: "故障",
|
||||
value: 80,
|
||||
},
|
||||
|
||||
];
|
||||
var total = 0;
|
||||
for (var i = 0; i < trafficWay.length; i++) {
|
||||
|
|
@ -153,37 +148,34 @@ const drawFaultConditionsChart = () => {
|
|||
}
|
||||
|
||||
var data = [];
|
||||
var color = [
|
||||
'rgba(1, 246, 139, 1)',
|
||||
'rgba(255, 221, 0, 1)'
|
||||
];
|
||||
var color = ["rgba(1, 246, 139, 1)", "rgba(255, 221, 0, 1)"];
|
||||
for (var i = 0; i < trafficWay.length; i++) {
|
||||
data.push(
|
||||
{
|
||||
value: trafficWay[i].value,
|
||||
name: trafficWay[i].name,
|
||||
itemStyle: {
|
||||
borderWidth: 5,
|
||||
// shadowBlur: 20,
|
||||
borderRadius: 10,
|
||||
borderColor: color[i],
|
||||
shadowColor: color[i],
|
||||
},
|
||||
{
|
||||
value: trafficWay[i].value,
|
||||
name: trafficWay[i].name,
|
||||
itemStyle: {
|
||||
borderWidth: 5,
|
||||
// shadowBlur: 20,
|
||||
borderRadius: 10,
|
||||
borderColor: color[i],
|
||||
shadowColor: color[i],
|
||||
},
|
||||
{
|
||||
value: total * 0.04,
|
||||
name: "",
|
||||
itemStyle: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
borderWidth: 0,
|
||||
},
|
||||
{
|
||||
value: total * 0.04,
|
||||
name: "",
|
||||
itemStyle: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
borderWidth: 0,
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
var img = "/src/assets/images/energyMonitoring/loadClassification.png";
|
||||
|
|
@ -271,14 +263,14 @@ const drawFaultConditionsChart = () => {
|
|||
// percent = ((params.value / total) * 100).toFixed(0)
|
||||
if (params.name !== "") {
|
||||
return (
|
||||
`{a${params.dataIndex / 2}|` +
|
||||
params.value +
|
||||
"}" +
|
||||
`{s0|` +
|
||||
unit +
|
||||
"}" +
|
||||
"\n" +
|
||||
params.name
|
||||
`{a${params.dataIndex / 2}|` +
|
||||
params.value +
|
||||
"}" +
|
||||
`{s0|` +
|
||||
unit +
|
||||
"}" +
|
||||
"\n" +
|
||||
params.name
|
||||
);
|
||||
} else {
|
||||
return "";
|
||||
|
|
@ -319,7 +311,11 @@ const drawFaultConditionsChart = () => {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
// 展馆照明
|
||||
const drawHallLightingChart = () => {
|
||||
const offsetX = 10; //bar宽
|
||||
|
|
@ -337,11 +333,11 @@ const drawHallLightingChart = () => {
|
|||
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
|
||||
const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
ctx.stroke();
|
||||
},
|
||||
});
|
||||
|
|
@ -358,11 +354,11 @@ const drawHallLightingChart = () => {
|
|||
const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
|
||||
const c4 = [shape.x + 7 + 7, shape.y - 5];
|
||||
ctx
|
||||
.moveTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.lineTo(c4[0], c4[1])
|
||||
.closePath();
|
||||
.moveTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.lineTo(c4[0], c4[1])
|
||||
.closePath();
|
||||
ctx.stroke();
|
||||
},
|
||||
});
|
||||
|
|
@ -378,11 +374,11 @@ const drawHallLightingChart = () => {
|
|||
const c3 = [shape.x + 15, shape.y - 5];
|
||||
const c4 = [shape.x - 2, shape.y - 5];
|
||||
ctx
|
||||
.moveTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.lineTo(c4[0], c4[1])
|
||||
.closePath();
|
||||
.moveTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.lineTo(c4[0], c4[1])
|
||||
.closePath();
|
||||
ctx.stroke();
|
||||
},
|
||||
});
|
||||
|
|
@ -390,14 +386,12 @@ const drawHallLightingChart = () => {
|
|||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||
let intAxisData = ['室内', '户外'];
|
||||
let intAxisData = ["室内", "户外"];
|
||||
let intSeriesData = [100, 200];
|
||||
// 绿色渐变
|
||||
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
|
||||
let colorArr;
|
||||
let myChart = echarts.init(
|
||||
document.getElementById("hallLighting")
|
||||
);
|
||||
let myChart = echarts.init(document.getElementById("hallLighting"));
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
|
@ -452,7 +446,7 @@ const drawHallLightingChart = () => {
|
|||
name: "单位:kW",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
padding: [0, 20, 0, 0]
|
||||
padding: [0, 20, 0, 0],
|
||||
},
|
||||
// minInterval: 1,
|
||||
// y轴（竖直线）
|
||||
|
|
@ -482,15 +476,18 @@ const drawHallLightingChart = () => {
|
|||
type: "custom",
|
||||
renderItem: (params, api) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
colorArr = params.dataIndex === 0 ? [
|
||||
// 蓝色渐变
|
||||
["rgba(0, 170, 193, 1)"],
|
||||
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
||||
] : [
|
||||
// 绿色渐变
|
||||
["rgba(0, 193, 113, 1)"],
|
||||
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
|
||||
]
|
||||
colorArr =
|
||||
params.dataIndex === 0
|
||||
? [
|
||||
// 蓝色渐变
|
||||
["rgba(0, 170, 193, 1)"],
|
||||
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
||||
]
|
||||
: [
|
||||
// 绿色渐变
|
||||
["rgba(0, 193, 113, 1)"],
|
||||
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
|
||||
];
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
|
|
@ -591,172 +588,187 @@ const drawHallLightingChart = () => {
|
|||
tooltip: {},
|
||||
data: intSeriesData,
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
// 照明负荷
|
||||
const drawLightLoadChart = () => {
|
||||
let myChart = echarts.init(document.getElementById("lightLoad"));
|
||||
|
||||
let option = {
|
||||
grid: {
|
||||
top: '18%',
|
||||
left: '3%',
|
||||
right: '5%',
|
||||
bottom: '7%',
|
||||
containLabel: true
|
||||
top: "18%",
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
bottom: "7%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
borderWidth: 1,
|
||||
// axisPointer: {
|
||||
// type: 'shadow'
|
||||
// },
|
||||
// extraCssText: 'z-index:2'
|
||||
|
||||
},
|
||||
legend: [{
|
||||
icon: 'rect',
|
||||
top: 5,
|
||||
left: 'right',
|
||||
orient: 'horizontal',
|
||||
// data: ['进水量', '出水量'],
|
||||
borderRadius: 20,
|
||||
itemHeight: 10,
|
||||
itemWidth: 15,
|
||||
textStyle: {
|
||||
color: '#DDFFFD',
|
||||
fontSize: 12,
|
||||
// fontWeight: 400
|
||||
}
|
||||
}],
|
||||
legend: [
|
||||
{
|
||||
icon: "rect",
|
||||
top: 5,
|
||||
left: "right",
|
||||
orient: "horizontal",
|
||||
// data: ['进水量', '出水量'],
|
||||
borderRadius: 20,
|
||||
itemHeight: 10,
|
||||
itemWidth: 15,
|
||||
textStyle: {
|
||||
color: "#DDFFFD",
|
||||
fontSize: 12,
|
||||
// fontWeight: 400
|
||||
},
|
||||
},
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['13:00', '14:00', '15:00', '16:00', '17:00'],
|
||||
type: "category",
|
||||
data: ["13:00", "14:00", "15:00", "16:00", "17:00"],
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// type:'dashed',
|
||||
color: "#557775"
|
||||
color: "#557775",
|
||||
// color: "#233e64",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#DDFFFD",//X轴文字颜色
|
||||
}
|
||||
}
|
||||
color: "#DDFFFD", //X轴文字颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
min: 0,
|
||||
max: 500,
|
||||
type: 'value',
|
||||
name: '单位/kW',
|
||||
type: "value",
|
||||
name: "单位/kW",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
fontSize: 12,
|
||||
padding: [0, 10, 0, 0], // 四个数字分别为上右下左与原位置距离
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#DDFFFD",
|
||||
fontSize: 12
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '昨日',
|
||||
type: 'line',
|
||||
name: "昨日",
|
||||
type: "line",
|
||||
//显示所有图形。
|
||||
//标记的图形为实心圆
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
//折线拐点标志的样式
|
||||
color: 'white',
|
||||
borderWidth: '2',
|
||||
borderColor: 'rgba(91, 250, 241, 1)',
|
||||
color: "white",
|
||||
borderWidth: "2",
|
||||
borderColor: "rgba(91, 250, 241, 1)",
|
||||
normal: {
|
||||
color: 'rgba(91, 250, 241, 1)'//拐点颜色
|
||||
}
|
||||
color: "rgba(91, 250, 241, 1)", //拐点颜色
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'rgba(91, 250, 241, 1)'
|
||||
color: "rgba(91, 250, 241, 1)",
|
||||
},
|
||||
data: [400, 320, 100, 320, 100]
|
||||
data: [400, 320, 100, 320, 100],
|
||||
},
|
||||
{
|
||||
name: '今日',
|
||||
type: 'line',
|
||||
name: "今日",
|
||||
type: "line",
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
//折线拐点标志的样式
|
||||
color: 'white',
|
||||
borderWidth: '2',
|
||||
borderColor: '#91cc75',
|
||||
color: "white",
|
||||
borderWidth: "2",
|
||||
borderColor: "#91cc75",
|
||||
normal: {
|
||||
color: '#91cc75'//拐点颜色
|
||||
}
|
||||
color: "#91cc75", //拐点颜色
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#91cc75'
|
||||
color: "#91cc75",
|
||||
},
|
||||
data: [100, 320, 400, 420, 500]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
myChart.setOption(option)
|
||||
}
|
||||
data: [100, 320, 400, 420, 500],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
window.openBox = openDialog
|
||||
window.openBox = openDialog;
|
||||
// 故障情况
|
||||
drawFaultConditionsChart()
|
||||
// 展馆照明
|
||||
drawHallLightingChart()
|
||||
// 照明负荷
|
||||
drawLightLoadChart()
|
||||
})
|
||||
drawFaultConditionsChart();
|
||||
// 展馆照明
|
||||
drawHallLightingChart();
|
||||
// 照明负荷
|
||||
drawLightLoadChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page m100">
|
||||
<!-- 层级控制 -->
|
||||
<div class="floor">
|
||||
<div v-for="(item,index) in floorList" @click="toggleFloor(item,index)" :class="index===floorIndex?'floor-select':'floor-default'">{{item.name}}</div>
|
||||
<div
|
||||
v-for="(item, index) in floorList"
|
||||
@click="toggleFloor(item, index)"
|
||||
:class="index === floorIndex ? 'floor-select' : 'floor-default'"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<dialogBox ref="box" :name="dialogTitle" :show="dialogShow" @update="closeDialog"/>
|
||||
<dialogBox
|
||||
ref="box"
|
||||
:name="dialogTitle"
|
||||
:show="dialogShow"
|
||||
@update="closeDialog"
|
||||
/>
|
||||
<div class="page-left-box">
|
||||
<!-- 照明监测-->
|
||||
<div class="title">
|
||||
<span>照明监测</span>
|
||||
</div>
|
||||
<div id="light" class="margin10 box-bg">
|
||||
<div v-for="(item,index) in lightingNumList" class="light-item">
|
||||
<img :src="item.pic" alt="">
|
||||
<div v-for="(item, index) in lightingNumList" class="light-item">
|
||||
<img :src="item.pic" alt="" />
|
||||
<p>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="num">{{ item.num }}<span class="unit">个</span></span>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -772,13 +784,14 @@ onMounted(() => {
|
|||
<span>状态</span>
|
||||
</div>
|
||||
<div class="tableContent">
|
||||
<div v-for="(item, index) in lightDetail"
|
||||
:key="index"
|
||||
class="tableBoby"
|
||||
<div
|
||||
v-for="(item, index) in lightDetail"
|
||||
:key="index"
|
||||
class="tableBoby"
|
||||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span>{{ item.address }}</span>
|
||||
<span><i :class="item.state?'state1':'state0'"></i></span>
|
||||
<span><i :class="item.state ? 'state1' : 'state0'"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -787,9 +800,24 @@ onMounted(() => {
|
|||
<div class="title margin10">
|
||||
<span>照明负荷</span>
|
||||
<p>
|
||||
<span :class="lightLoadDate === 'year'?'selectYear':''" class="year" @click="toggleLightLoad">年</span>
|
||||
<span :class="lightLoadDate === 'month'?'selectMonth':''" class="month" @click="toggleLightLoad">月</span>
|
||||
<span :class="lightLoadDate === 'day'?'selectDay':''" class="day" @click="toggleLightLoad">日</span>
|
||||
<span
|
||||
:class="lightLoadDate === 'year' ? 'selectYear' : ''"
|
||||
class="year"
|
||||
@click="toggleLightLoad"
|
||||
>年</span
|
||||
>
|
||||
<span
|
||||
:class="lightLoadDate === 'month' ? 'selectMonth' : ''"
|
||||
class="month"
|
||||
@click="toggleLightLoad"
|
||||
>月</span
|
||||
>
|
||||
<span
|
||||
:class="lightLoadDate === 'day' ? 'selectDay' : ''"
|
||||
class="day"
|
||||
@click="toggleLightLoad"
|
||||
>日</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div id="lightLoad" class="margin10 box-bg"></div>
|
||||
|
|
@ -799,16 +827,24 @@ onMounted(() => {
|
|||
<div class="title">
|
||||
<span>展馆照明</span>
|
||||
</div>
|
||||
<div id="hallLighting" class="margin10 box-bg">
|
||||
|
||||
</div>
|
||||
<div id="hallLighting" class="margin10 box-bg"></div>
|
||||
<!-- 照明控制-->
|
||||
<div class="title margin10">
|
||||
<span>照明控制</span>
|
||||
<p class="control-btn">
|
||||
<span :class="controlBtn==='on'?'select':''" class="on" @click="toggleControl">全开</span>
|
||||
<span :class="controlBtn==='off'?'select':''" class="off" style="margin-left: .7rem"
|
||||
@click="toggleControl">全关</span>
|
||||
<span
|
||||
:class="controlBtn === 'on' ? 'select' : ''"
|
||||
class="on"
|
||||
@click="toggleControl"
|
||||
>全开</span
|
||||
>
|
||||
<span
|
||||
:class="controlBtn === 'off' ? 'select' : ''"
|
||||
class="off"
|
||||
style="margin-left: 0.7rem"
|
||||
@click="toggleControl"
|
||||
>全关</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="margin10 box-bg">
|
||||
|
|
@ -818,13 +854,16 @@ onMounted(() => {
|
|||
<span>操作</span>
|
||||
</div>
|
||||
<div class="tableContent">
|
||||
<div v-for="(item, index) in lightControl"
|
||||
:key="index"
|
||||
class="tableBoby"
|
||||
<div
|
||||
v-for="(item, index) in lightControl"
|
||||
:key="index"
|
||||
class="tableBoby"
|
||||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
|
||||
<span class="control" @click="openDialog(item.name)">照明控制</span>
|
||||
<span class="control" @click="openDialog(item.name)"
|
||||
>照明控制</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -860,11 +899,11 @@ onMounted(() => {
|
|||
box-sizing: border-box;
|
||||
|
||||
p {
|
||||
margin-left: .5rem;
|
||||
margin-left: 0.5rem;
|
||||
|
||||
.name {
|
||||
margin-top: 1.3rem;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.num {
|
||||
|
|
@ -874,18 +913,20 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.unit {
|
||||
margin-left: .2rem;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
|
||||
.name, .num {
|
||||
.name,
|
||||
.num {
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//照明回路详情
|
||||
.state0, .state1 {
|
||||
.state0,
|
||||
.state1 {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
display: block;
|
||||
|
|
@ -894,11 +935,11 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.state0 {
|
||||
background-image: url('@/assets/images/lighting/state0.png');
|
||||
background-image: url("@/assets/images/lighting/state0.png");
|
||||
}
|
||||
|
||||
.state1 {
|
||||
background-image: url('@/assets/images/lighting/state1.png');
|
||||
background-image: url("@/assets/images/lighting/state1.png");
|
||||
}
|
||||
|
||||
//照明控制
|
||||
|
|
@ -927,6 +968,5 @@ onMounted(() => {
|
|||
|
||||
//弹窗
|
||||
.dialog {
|
||||
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,48 +1,48 @@
|
|||
<script setup>
|
||||
import calendar from '@/components/calendar/index.vue'
|
||||
import * as echarts from 'echarts'
|
||||
import {onMounted,ref} from "vue";
|
||||
import calendar from "@/components/calendar/index.vue";
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, ref } from "vue";
|
||||
|
||||
import getPath from "@/utils/getPath.js";
|
||||
// 实时负荷
|
||||
const realTimeLoad = ref([
|
||||
{pic:getPath.roomnum,name:'配电室数量',value:8,unit:'个'},
|
||||
{pic:getPath.WL,name:'实时负荷',value:1465.2,unit:'kW'}, //负荷
|
||||
{pic:getPath.E,name:'今日电量',value:146,unit:'kWh'}, //电量
|
||||
])
|
||||
{ pic: getPath.roomnum, name: "配电室数量", value: 8, unit: "个" },
|
||||
{ pic: getPath.WL, name: "实时负荷", value: 1465.2, unit: "kW" }, //负荷
|
||||
{ pic: getPath.E, name: "今日电量", value: 146, unit: "kWh" }, //电量
|
||||
]);
|
||||
// 气象站
|
||||
const weatherStation = ref([
|
||||
{pic:getPath.rain,name:'雨量',value:100,unit:'mm'},
|
||||
{pic:getPath.rainsnow,name:'雨雪',value:'实际取值',unit:''},
|
||||
{pic:getPath.wind,name:'风向',value:'东南风'},
|
||||
{pic:getPath.illuminance,name:'光照度',value:101,unit:'lux'},
|
||||
{pic:getPath.windspeed,name:'风速',value:'东南风3级'},
|
||||
{pic:getPath.air,name:'今日电量',value:'优'},
|
||||
])
|
||||
{ pic: getPath.rain, name: "雨量", value: 100, unit: "mm" },
|
||||
{ pic: getPath.rainsnow, name: "雨雪", value: "实际取值", unit: "" },
|
||||
{ pic: getPath.wind, name: "风向", value: "东南风" },
|
||||
{ pic: getPath.illuminance, name: "光照度", value: 101, unit: "lux" },
|
||||
{ pic: getPath.windspeed, name: "风速", value: "东南风3级" },
|
||||
{ pic: getPath.air, name: "今日电量", value: "优" },
|
||||
]);
|
||||
// const getImageUrl=(name)=>{
|
||||
// return `url(${new URL(name, import.meta.url).href})`
|
||||
// }
|
||||
onMounted(()=>{
|
||||
onMounted(() => {
|
||||
// 用电量
|
||||
drawPowerEcharts()
|
||||
drawPowerEcharts();
|
||||
// 系统用电排名
|
||||
drawRankEcharts()
|
||||
drawRankEcharts();
|
||||
//碳排放
|
||||
getCarbonEmission()
|
||||
})
|
||||
getCarbonEmission();
|
||||
});
|
||||
// 用电量时间切换
|
||||
const powerDate = ref('year')
|
||||
const powerDate = ref("year");
|
||||
|
||||
const togglePower = (event) =>{
|
||||
powerDate.value = event.srcElement.className
|
||||
}
|
||||
const togglePower = (event) => {
|
||||
powerDate.value = event.srcElement.className;
|
||||
};
|
||||
// 碳排放时间切换
|
||||
const carbonEmissionDate = ref('month')
|
||||
const toggleCarbonEmission = (event) =>{
|
||||
carbonEmissionDate.value = event.srcElement.className
|
||||
}
|
||||
const drawPowerEcharts = () =>{
|
||||
let myChart = echarts.init(document.getElementById('power'))
|
||||
const carbonEmissionDate = ref("month");
|
||||
const toggleCarbonEmission = (event) => {
|
||||
carbonEmissionDate.value = event.srcElement.className;
|
||||
};
|
||||
const drawPowerEcharts = () => {
|
||||
let myChart = echarts.init(document.getElementById("power"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {},
|
||||
|
|
@ -54,7 +54,6 @@ const drawPowerEcharts = () =>{
|
|||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
|
|
@ -62,7 +61,7 @@ const drawPowerEcharts = () =>{
|
|||
show: true,
|
||||
lineStyle: {
|
||||
// type:'dashed',
|
||||
color: "#557775"
|
||||
color: "#557775",
|
||||
// color: "#233e64",
|
||||
},
|
||||
},
|
||||
|
|
@ -72,7 +71,6 @@ const drawPowerEcharts = () =>{
|
|||
color: "#DDFFFD",
|
||||
margin: 40,
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
axisTick: { show: false },
|
||||
|
|
@ -83,8 +81,8 @@ const drawPowerEcharts = () =>{
|
|||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name:"单位:kWh",
|
||||
nameTextStyle:{
|
||||
name: "单位:kWh",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
min: 0,
|
||||
|
|
@ -93,7 +91,7 @@ const drawPowerEcharts = () =>{
|
|||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type:'dashed',
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
},
|
||||
},
|
||||
|
|
@ -124,29 +122,33 @@ const drawPowerEcharts = () =>{
|
|||
normal: {
|
||||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "rgba(91, 250, 241, 0.40)" },
|
||||
{ offset: 1, color: "rgba(91, 250, 241, 0)" },
|
||||
],
|
||||
false
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "rgba(91, 250, 241, 0.40)" },
|
||||
{ offset: 1, color: "rgba(91, 250, 241, 0)" },
|
||||
],
|
||||
false
|
||||
),
|
||||
|
||||
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
||||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
},
|
||||
},
|
||||
data: [110, 200, 300,325, 400, 322, 250],
|
||||
data: [110, 200, 300, 325, 400, 322, 250],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
}
|
||||
const drawRankEcharts = () =>{
|
||||
let myChart = echarts.init(document.getElementById('rank'))
|
||||
myChart.setOption(option);
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
const drawRankEcharts = () => {
|
||||
let myChart = echarts.init(document.getElementById("rank"));
|
||||
let option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
|
|
@ -162,15 +164,15 @@ const drawRankEcharts = () =>{
|
|||
},
|
||||
formatter: function (params) {
|
||||
return (
|
||||
params[0].name +
|
||||
"<br/>" +
|
||||
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
|
||||
params[0].seriesName +
|
||||
" : " +
|
||||
Number(
|
||||
(params[0].value.toFixed(4) / 10000).toFixed(2)
|
||||
).toLocaleString() +
|
||||
" 万元<br/>"
|
||||
params[0].name +
|
||||
"<br/>" +
|
||||
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
|
||||
params[0].seriesName +
|
||||
" : " +
|
||||
Number(
|
||||
(params[0].value.toFixed(4) / 10000).toFixed(2)
|
||||
).toLocaleString() +
|
||||
" 万元<br/>"
|
||||
);
|
||||
},
|
||||
},
|
||||
|
|
@ -189,7 +191,7 @@ const drawRankEcharts = () =>{
|
|||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:"14"
|
||||
fontSize: "14",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
|
|
@ -213,26 +215,21 @@ const drawRankEcharts = () =>{
|
|||
padding: [0, 0, 10, -10],
|
||||
verticalAlign: "bottom",
|
||||
inside: true,
|
||||
textStyle: {
|
||||
|
||||
},
|
||||
textStyle: {},
|
||||
formatter: function (value) {
|
||||
return "{a|" + (value / 10000).toLocaleString() +
|
||||
"}" + "{b|kWh}";
|
||||
return "{a|" + (value / 10000).toLocaleString() + "}" + "{b|kWh}";
|
||||
},
|
||||
rich:{
|
||||
a:{
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: "16",
|
||||
color:"rgba(0, 255, 240, 1)",
|
||||
padding:[0,6,0,0]
|
||||
color: "rgba(0, 255, 240, 1)",
|
||||
padding: [0, 6, 0, 0],
|
||||
},
|
||||
b:{
|
||||
b: {
|
||||
color: "#fff",
|
||||
fontSize: "12",
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [50000000, 22000000, 10000000, 5000000, 1],
|
||||
},
|
||||
|
|
@ -243,16 +240,16 @@ const drawRankEcharts = () =>{
|
|||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(29, 169, 153, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(223, 243, 240, 1)",
|
||||
},
|
||||
]),
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(29, 169, 153, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(223, 243, 240, 1)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
barWidth: 8,
|
||||
data: [50000000, 22000000, 10000000, 5000000, 200],
|
||||
|
|
@ -264,13 +261,17 @@ const drawRankEcharts = () =>{
|
|||
barGap: "-115%",
|
||||
data: [50000000, 50000000, 50000000, 50000000, 50000000],
|
||||
itemStyle: {
|
||||
color: 'rgba(5, 33, 31, 0.32)',
|
||||
},
|
||||
color: "rgba(5, 33, 31, 0.32)",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
}
|
||||
myChart.setOption(option);
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
//碳排放
|
||||
function getCarbonEmission() {
|
||||
const offsetX = 10; //bar宽
|
||||
|
|
@ -341,16 +342,8 @@ function getCarbonEmission() {
|
|||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||
let xAxisData = [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
];
|
||||
let seriesData = [100, 200, 300, 400, 200, 250,];
|
||||
let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月"];
|
||||
let seriesData = [100, 200, 300, 400, 200, 250];
|
||||
// 绿色渐变
|
||||
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
|
||||
// 蓝色渐变
|
||||
|
|
@ -359,9 +352,7 @@ function getCarbonEmission() {
|
|||
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
|
||||
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
|
||||
];
|
||||
let myChart = echarts.init(
|
||||
document.getElementById("carbonEmission")
|
||||
);
|
||||
let myChart = echarts.init(document.getElementById("carbonEmission"));
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
|
@ -416,7 +407,7 @@ function getCarbonEmission() {
|
|||
name: "单位:kWh",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
padding:[0,5,0,0]
|
||||
padding: [0, 5, 0, 0],
|
||||
},
|
||||
// minInterval: 1,
|
||||
// y轴（竖直线）
|
||||
|
|
@ -549,25 +540,35 @@ function getCarbonEmission() {
|
|||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="page m100">
|
||||
|
||||
<div class="page-left-box">
|
||||
<!-- 用电量-->
|
||||
<div class="title">
|
||||
<span>用电量</span>
|
||||
<p>
|
||||
<span class="year" :class="powerDate === 'year'?'selectYear':''" @click="togglePower">年</span>
|
||||
<span class="month" :class="powerDate === 'month'?'selectMonth':''" @click="togglePower">月</span>
|
||||
<span
|
||||
class="year"
|
||||
:class="powerDate === 'year' ? 'selectYear' : ''"
|
||||
@click="togglePower"
|
||||
>年</span
|
||||
>
|
||||
<span
|
||||
class="month"
|
||||
:class="powerDate === 'month' ? 'selectMonth' : ''"
|
||||
@click="togglePower"
|
||||
>月</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="power">
|
||||
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="power"></div>
|
||||
<!-- 日历-->
|
||||
<div class="title margin10">
|
||||
<span>能耗日历</span>
|
||||
|
|
@ -582,13 +583,21 @@ function getCarbonEmission() {
|
|||
<div class="title margin10">
|
||||
<span>碳排放</span>
|
||||
<p>
|
||||
<span class="year" :class="carbonEmissionDate === 'year'?'selectYear':''" @click="toggleCarbonEmission">年</span>
|
||||
<span class="month" :class="carbonEmissionDate === 'month'?'selectMonth':''" @click="toggleCarbonEmission">月</span>
|
||||
<span
|
||||
class="year"
|
||||
:class="carbonEmissionDate === 'year' ? 'selectYear' : ''"
|
||||
@click="toggleCarbonEmission"
|
||||
>年</span
|
||||
>
|
||||
<span
|
||||
class="month"
|
||||
:class="carbonEmissionDate === 'month' ? 'selectMonth' : ''"
|
||||
@click="toggleCarbonEmission"
|
||||
>月</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="carbonEmission">
|
||||
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="carbonEmission"></div>
|
||||
</div>
|
||||
<div class="page-right-box">
|
||||
<!-- 实时负荷 -->
|
||||
|
|
@ -596,110 +605,106 @@ function getCarbonEmission() {
|
|||
<span>实时负荷</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg">
|
||||
<ul class="real-time-load">
|
||||
<li v-for="(item,index) in realTimeLoad" :style="'background-image:url('+item.pic+')'">
|
||||
<span class="unit">{{item.name}}</span>
|
||||
<p>
|
||||
<span class="value">{{item.value}}</span>
|
||||
<span class="unit">{{item.unit}}</span>
|
||||
</p>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="real-time-load">
|
||||
<li
|
||||
v-for="(item, index) in realTimeLoad"
|
||||
:style="'background-image:url(' + item.pic + ')'"
|
||||
>
|
||||
<span class="unit">{{ item.name }}</span>
|
||||
<p>
|
||||
<span class="value">{{ item.value }}</span>
|
||||
<span class="unit">{{ item.unit }}</span>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 气象站-->
|
||||
<div class="title margin10">
|
||||
<span>气象站</span>
|
||||
|
||||
</div>
|
||||
<div class="margin10 box-bg">
|
||||
<ul class="weather-station">
|
||||
<li v-for="(item,index) in weatherStation" >
|
||||
<p class="img" :style="'background-image:url('+item.pic+')'">
|
||||
<span>{{item.name}}</span>
|
||||
</p>
|
||||
<p><span class="wea-value">{{item.value}}</span><span class="unit" v-if="item.unit">{{ item.unit }}</span></p>
|
||||
<li v-for="(item, index) in weatherStation">
|
||||
<p class="img" :style="'background-image:url(' + item.pic + ')'">
|
||||
<span>{{ item.name }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="wea-value">{{ item.value }}</span
|
||||
><span class="unit" v-if="item.unit">{{ item.unit }}</span>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 系统用电排名-->
|
||||
<div class="title margin10">
|
||||
<span>系统用电排名</span>
|
||||
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="rank">
|
||||
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="rank"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.real-time-load{
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
.real-time-load {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-evenly;
|
||||
li{
|
||||
width:24.125rem;
|
||||
height:28%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 4.75rem;
|
||||
padding-right: 1.3rem;
|
||||
box-sizing: border-box;
|
||||
.value{
|
||||
margin-right: .7rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color:rgba(91, 250, 241, 1);
|
||||
}
|
||||
.unit{
|
||||
font-size:.8rem;
|
||||
color:rgba(221, 255, 253, 1)
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.weather-station{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding:.8rem;
|
||||
box-sizing: border-box;
|
||||
li {
|
||||
width: 24.125rem;
|
||||
height: 28%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-evenly;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
li{
|
||||
height:30%;
|
||||
.wea-value{
|
||||
font-weight: 600;
|
||||
color: rgba(91, 250, 241, 1);
|
||||
margin: 0 .4rem 0 1rem;
|
||||
padding-left: 4.75rem;
|
||||
padding-right: 1.3rem;
|
||||
box-sizing: border-box;
|
||||
.value {
|
||||
margin-right: 0.7rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: rgba(91, 250, 241, 1);
|
||||
}
|
||||
.unit{
|
||||
font-size:.8rem;
|
||||
color:rgba(221, 255, 253, 1)
|
||||
|
||||
}
|
||||
}
|
||||
.img{
|
||||
margin-bottom: .3rem;
|
||||
width: 11.125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 2.6rem;
|
||||
box-sizing: border-box;
|
||||
font-size: .9rem;
|
||||
font-style:italic;
|
||||
height:50%;
|
||||
color:rgba(221, 255, 253, 1);
|
||||
.unit {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(221, 255, 253, 1);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
}
|
||||
.weather-station {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.8rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-evenly;
|
||||
justify-content: space-between;
|
||||
li {
|
||||
height: 30%;
|
||||
.wea-value {
|
||||
font-weight: 600;
|
||||
color: rgba(91, 250, 241, 1);
|
||||
margin: 0 0.4rem 0 1rem;
|
||||
}
|
||||
.unit {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(221, 255, 253, 1);
|
||||
}
|
||||
}
|
||||
.img {
|
||||
margin-bottom: 0.3rem;
|
||||
width: 11.125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 2.6rem;
|
||||
box-sizing: border-box;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
height: 50%;
|
||||
color: rgba(221, 255, 253, 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue