luoshiwen
/
long_IslandOcean
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交_3_4

This commit is contained in:
lixiaobang 2024-03-04 10:45:21 +08:00
parent a0fed8af8a
commit 01afb60e93
5 changed files with 808 additions and 659 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/carbonEmission/index.vue
View File

@ -234,6 +234,10 @@ function getCarbonTrends() {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
// 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
} }
//碳排放强度 //碳排放强度
const getCarbonIntensity = () => { const getCarbonIntensity = () => {
@ -535,7 +539,11 @@ const getCarbonIntensity=()=> {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
//各系统碳排放量统计 //各系统碳排放量统计
const getCarbonEmissionStatistics = () => { const getCarbonEmissionStatistics = () => {
let myChart = echarts.init( let myChart = echarts.init(
@ -661,7 +669,11 @@ const getCarbonEmissionStatistics = ()=> {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
const optionData = ref([ const optionData = ref([
{ {
name: "CCER", name: "CCER",
@ -734,7 +746,7 @@ const setLabel = ()=> {
}, },
}; };
}); });
} };
//碳中和 //碳中和
const getCarbonNeutrality = () => { const getCarbonNeutrality = () => {
setLabel(); setLabel();
@ -762,8 +774,12 @@ const getCarbonNeutrality = () => {
}, },
}); });
myChart.setOption(option); myChart.setOption(option);
// 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
// bindListen(myChart); // bindListen(myChart);
} };
// 碳流图 // 碳流图
const drawEnergyFlow = () => { const drawEnergyFlow = () => {
let myChart = echarts.init(document.getElementById("energyFlow")); let myChart = echarts.init(document.getElementById("energyFlow"));
@ -826,7 +842,7 @@ const drawEnergyFlow = () => {
bottom: "4%", bottom: "4%",
left: "6%", left: "6%",
right: "5%", right: "5%",
nodeAlign:'right', nodeAlign: "right",
nodeWidth: "13", nodeWidth: "13",
// nodeAlign:'right', // nodeAlign:'right',
focusNodeAdjacency: "allEdges", focusNodeAdjacency: "allEdges",
@ -858,7 +874,6 @@ const drawEnergyFlow = () => {
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
formatter: function (params) { formatter: function (params) {
if (params.dataIndex === 0) { if (params.dataIndex === 0) {
return ( return (
"{a|" + "{a|" +
@ -917,6 +932,10 @@ const drawEnergyFlow = () => {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
// 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
}; };
//加载完dom执行 //加载完dom执行
onMounted(() => { onMounted(() => {
@ -929,7 +948,7 @@ onMounted(() => {
//碳中和 //碳中和
getCarbonNeutrality(); getCarbonNeutrality();
// 碳流图 // 碳流图
drawEnergyFlow() drawEnergyFlow();
}); });
</script> </script>

303
src/views/energyEfficiency/index.vue
View File

@ -23,73 +23,73 @@ const systemLeftList = ref([
const systemRightList = ref([ const systemRightList = ref([
[ [
{ {
name: '今日', name: "今日",
value: '3122', value: "3122",
unit: 'kWh' unit: "kWh",
}, },
{ {
name: '昨日', name: "昨日",
value: '9400', value: "9400",
unit: 'kWh' unit: "kWh",
}, },
{ {
name: '同比', name: "同比",
value: '-201', value: "-201",
unit: '%' unit: "%",
} },
], //日 ], //日
[ [
{ {
name: '本月', name: "本月",
value: '3122', value: "3122",
unit: 'kWh' unit: "kWh",
}, },
{ {
name: '上月', name: "上月",
value: '9400', value: "9400",
unit: 'kWh' unit: "kWh",
}, },
{ {
name: '同比', name: "同比",
value: '-201', value: "-201",
unit: '%' unit: "%",
} },
], //月 ], //月
[ [
{ {
name: '今年', name: "今年",
value: '3122', value: "3122",
unit: 'kWh' unit: "kWh",
}, },
{ {
name: '去年', name: "去年",
value: '9400', value: "9400",
unit: 'kWh' unit: "kWh",
}, },
{ {
name: '同比', name: "同比",
value: '-201', value: "-201",
unit: '%' unit: "%",
} },
]//年 ], //年
]) ]);
// 能耗总量时间点击事件 // 能耗总量时间点击事件
const totalEnergyDate = ref('month') const totalEnergyDate = ref("month");
const toggleTotalEnergy = (event) => { const toggleTotalEnergy = (event) => {
totalEnergyDate.value = event.srcElement.className totalEnergyDate.value = event.srcElement.className;
} };
// 能效对标时间点击时间 // 能效对标时间点击时间
const managementDate = ref('month') const managementDate = ref("month");
const toggleManagement = (event) => { const toggleManagement = (event) => {
managementDate.value = event.srcElement.className managementDate.value = event.srcElement.className;
} };
// 复费率的时间点击事件 // 复费率的时间点击事件
const exhibitionLoadDate = ref('month') const exhibitionLoadDate = ref("month");
const toggleExhibitionLoad = (event) => { const toggleExhibitionLoad = (event) => {
exhibitionLoadDate.value = event.srcElement.className exhibitionLoadDate.value = event.srcElement.className;
} };
const selectSystemTab = (index) => { const selectSystemTab = (index) => {
systemTabIndex.value = index; systemTabIndex.value = index;
}; };
@ -209,6 +209,10 @@ const drawTotalChart = () => {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
// 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
}; };
// 定额管理charts // 定额管理charts
const drawManagement = () => { const drawManagement = () => {
@ -344,6 +348,10 @@ const drawManagement = () => {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
// 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
}; };
// 能效流向 // 能效流向
const drawEnergyFlow = () => { const drawEnergyFlow = () => {
@ -401,7 +409,7 @@ const drawEnergyFlow = () => {
bottom: "4%", bottom: "4%",
left: "6%", left: "6%",
right: "5%", right: "5%",
nodeAlign:'right', nodeAlign: "right",
nodeWidth: "13", nodeWidth: "13",
// nodeAlign:'right', // nodeAlign:'right',
focusNodeAdjacency: "allEdges", focusNodeAdjacency: "allEdges",
@ -428,7 +436,6 @@ const drawEnergyFlow = () => {
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
formatter: function (params) { formatter: function (params) {
if (params.dataIndex === 0) { if (params.dataIndex === 0) {
return ( return (
"{a|" + "{a|" +
@ -487,6 +494,10 @@ const drawEnergyFlow = () => {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
// 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
}; };
//复费率 //复费率
function getExhibitionLoad() { function getExhibitionLoad() {
@ -513,13 +524,13 @@ function getExhibitionLoad() {
legend: { legend: {
icon: "rect", icon: "rect",
right: "4%", right: "4%",
top:'3%', top: "3%",
itemWidth: 20, // 标签宽度为20px itemWidth: 20, // 标签宽度为20px
itemHeight: 10, // 标签高度为10px itemHeight: 10, // 标签高度为10px
textStyle: { textStyle: {
color: "#ffffff", color: "#ffffff",
}, },
data: ["尖", "峰", "平", "谷",'深'], data: ["尖", "峰", "平", "谷", "深"],
}, },
calculable: true, calculable: true,
xAxis: [ xAxis: [
@ -559,12 +570,12 @@ function getExhibitionLoad() {
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
// align:"right", // align:"right",
padding:[0,0,0,0] padding: [0, 0, 0, 0],
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type:'dashed', type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(1, 39, 37, 0.30)",
}, },
}, },
@ -765,41 +776,46 @@ function getExhibitionLoad() {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
// 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
} }
// 电费电价 // 电费电价
const drawElectricityPrice = () => { const drawElectricityPrice = () => {
let myChart = echarts.init(document.getElementById('electricity-price')) let myChart = echarts.init(document.getElementById("electricity-price"));
let option = { let option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
backgroundColor: "rgba(1, 13, 19, 0.5)", backgroundColor: "rgba(1, 13, 19, 0.5)",
borderWidth: 0, borderWidth: 0,
axisPointer: { // 坐标轴指示器，坐标轴触发有效 axisPointer: {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' // 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
}, },
textStyle: { textStyle: {
color: "rgba(212, 232, 254, 1)", color: "rgba(212, 232, 254, 1)",
// fontSize: fontChart(0.24), // fontSize: fontChart(0.24),
}, },
confine: true confine: true,
}, },
legend: { legend: {
show: true, show: true,
data:['电费','销售电价'], data: ["电费", "销售电价"],
selected: { selected: {
'电费': true, 电费: true,
'销售电价': true, 销售电价: true,
}, },
icon: 'rect', icon: "rect",
itemGap: 14, itemGap: 14,
top: "8", top: "8",
layout: 'vertical', layout: "vertical",
itemHeight: '10', itemHeight: "10",
// itemWidth:'10', // itemWidth:'10',
textStyle: { textStyle: {
color: "rgba(221, 255, 253, 1)" color: "rgba(221, 255, 253, 1)",
} },
}, },
grid: { grid: {
top: "20%", top: "20%",
@ -810,13 +826,13 @@ const drawElectricityPrice = () => {
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#557775' color: "#557775",
} },
}, },
axisTick: { axisTick: {
show: false, show: false,
@ -827,51 +843,52 @@ const drawElectricityPrice = () => {
show: true, show: true,
textStyle: { textStyle: {
fontFamily: 'Microsoft YaHei', fontFamily: "Microsoft YaHei",
color: "#DDFFFD", color: "#DDFFFD",
} },
}, },
}, },
yAxis: [{ yAxis: [
name: '单位:kWh', {
name: "单位:kWh",
nameTextStyle: { nameTextStyle: {
color: "rgba(221, 255, 253, 1)", color: "rgba(221, 255, 253, 1)",
padding: [0, 0, 0, 10] padding: [0, 0, 0, 10],
}, },
// 表现为上下位置 // 表现为上下位置
type: 'value', type: "value",
max: '50', max: "50",
splitNumber: 5, splitNumber: 5,
axisLine: { axisLine: {
show: false, show: false,
lineStyle: { lineStyle: {
color: '#666666', color: "#666666",
} },
}, },
splitLine: { splitLine: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
fontFamily: 'Microsoft YaHei', fontFamily: "Microsoft YaHei",
color: "#DDFFFD", color: "#DDFFFD",
fontSize: 12 fontSize: 12,
} },
} },
}, },
{ {
// splitNumber: // splitNumber:
name: '单位:元/kWh', name: "单位:元/kWh",
position: 'right', // 放在右边 position: "right", // 放在右边
nameTextStyle: { nameTextStyle: {
padding: [0, 15, 0, 0], padding: [0, 15, 0, 0],
color: 'rgba(221, 255, 253, 1)' color: "rgba(221, 255, 253, 1)",
}, },
axisLabel: { axisLabel: {
show: true, show: true,
// fontSize: 18, // fontSize: 18,
color: 'rgba(221, 255, 253, 1)', color: "rgba(221, 255, 253, 1)",
formatter: function (value) { formatter: function (value) {
// 在标签后面添加百分号 // 在标签后面添加百分号
return value.toFixed(1); return value.toFixed(1);
@ -890,50 +907,57 @@ const drawElectricityPrice = () => {
color: "rgba(1, 39, 37, 0.30)", color: "rgba(1, 39, 37, 0.30)",
// color: '#eff6ff' // color: '#eff6ff'
} },
}, },
}, },
], ],
series: [{ series: [
name: '电费', {
type: 'bar', name: "电费",
barWidth: '15', type: "bar",
barWidth: "15",
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, offset: 0,
color: 'rgba(82, 217, 208, 1)' color: "rgba(82, 217, 208, 1)",
}, {
offset: 1,
color: 'rgba(82, 217, 208, 0)'
}]),
},
},
data: [40, 35, 15, 10, 19, 24, 14]
}, },
{ {
name: '销售电价', offset: 1,
type: 'line', color: "rgba(82, 217, 208, 0)",
},
]),
},
},
data: [40, 35, 15, 10, 19, 24, 14],
},
{
name: "销售电价",
type: "line",
yAxisIndex: 1, // 与第二个 y 轴关联 yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: { 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], // 折线图的数据 data: [0.1, 0.2, 0.6, 1, 0.4, 0.8, 0.9], // 折线图的数据
}, },
] ],
};
myChart.setOption(option);
// 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
}; };
myChart.setOption(option)
}
// 时间选择器参数 // 时间选择器参数
const dateValue = ref('') const dateValue = ref("");
// 默认时间 // 默认时间
const defaultTime = ref([ const defaultTime = ref([
new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59), new Date(2000, 2, 1, 23, 59, 59),
]) ]);
// dom加载 // dom加载
onMounted(() => { onMounted(() => {
// 能耗总量 // 能耗总量
@ -941,9 +965,9 @@ onMounted(() => {
// 定额管理 // 定额管理
drawManagement(); drawManagement();
// 能效流向 // 能效流向
drawEnergyFlow() drawEnergyFlow();
// 电费电价 // 电费电价
drawElectricityPrice() drawElectricityPrice();
// }) // })
// drawEnergyFlow(); // drawEnergyFlow();
//复费率 //复费率
@ -958,8 +982,18 @@ onMounted(() => {
<div class="title"> <div class="title">
<span>能耗总量</span> <span>能耗总量</span>
<p> <p>
<span class="month" :class="totalEnergyDate === 'month'?'selectMonth':''" @click="toggleTotalEnergy">月</span> <span
<span class="day" :class="totalEnergyDate === 'day'?'selectDay':''" @click="toggleTotalEnergy">日</span> class="month"
:class="totalEnergyDate === 'month' ? 'selectMonth' : ''"
@click="toggleTotalEnergy"
>月</span
>
<span
class="day"
:class="totalEnergyDate === 'day' ? 'selectDay' : ''"
@click="toggleTotalEnergy"
>日</span
>
</p> </p>
</div> </div>
<div id="totalEnergy" class="margin10 box-bg"></div> <div id="totalEnergy" class="margin10 box-bg"></div>
@ -967,8 +1001,18 @@ onMounted(() => {
<div class="title margin10"> <div class="title margin10">
<span>能效对标（定额管理）</span> <span>能效对标（定额管理）</span>
<p> <p>
<span class="year" :class="managementDate === 'year'?'selectYear':''" @click="toggleManagement">年</span> <span
<span class="month" :class="managementDate === 'month'?'selectMonth':''" @click="toggleManagement">月</span> class="year"
:class="managementDate === 'year' ? 'selectYear' : ''"
@click="toggleManagement"
>年</span
>
<span
class="month"
:class="managementDate === 'month' ? 'selectMonth' : ''"
@click="toggleManagement"
>月</span
>
</p> </p>
</div> </div>
<div id="management" class="margin10 box-bg"></div> <div id="management" class="margin10 box-bg"></div>
@ -1016,14 +1060,17 @@ onMounted(() => {
</div> </div>
</div> </div>
<div class="system-content-right"> <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"> <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> </ul>
<div class="system-content-right-item-box"> <div class="system-content-right-item-box">
<span v-for="v in item" :class="v.unit==='%'?'yoy':''">{{ v.value }} <span <span v-for="v in item" :class="v.unit === '%' ? 'yoy' : ''"
class="unit">{{ v.unit }}</span></span> >{{ v.value }} <span class="unit">{{ v.unit }}</span></span
>
</div> </div>
</div> </div>
</div> </div>
@ -1033,9 +1080,24 @@ onMounted(() => {
<div class="title margin10"> <div class="title margin10">
<span>复费率</span> <span>复费率</span>
<p> <p>
<span class="year" :class="exhibitionLoadDate === 'year'?'selectYear':''" @click="toggleExhibitionLoad">年</span> <span
<span class="month" :class="exhibitionLoadDate === 'month'?'selectMonth':''" @click="toggleExhibitionLoad">月</span> class="year"
<span class="day" :class="exhibitionLoadDate === 'day'?'selectDay':''" @click="toggleExhibitionLoad">日</span> :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> </p>
</div> </div>
<div id="exhibitionLoad" class="margin10 box-bg"></div> <div id="exhibitionLoad" class="margin10 box-bg"></div>
@ -1052,17 +1114,16 @@ onMounted(() => {
#energyFlow { #energyFlow {
width: 100%; width: 100%;
height: 82.4%; height: 82.4%;
} }
.flow { .flow {
padding-top: .5rem; padding-top: 0.5rem;
} }
.date-picker { .date-picker {
padding-left: 0.75rem; padding-left: 0.75rem;
display: flex; display: flex;
align-items: center; align-items: center;
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
background-image: url('@/assets/images/picker.png'); background-image: url("@/assets/images/picker.png");
background-size: 100% 100%; background-size: 100% 100%;
box-shadow: none !important; box-shadow: none !important;
width: 20rem !important; width: 20rem !important;

42
src/views/energyMonitoring/index.vue
View File

@ -45,7 +45,7 @@ const getImageUrl = (name) => {
}; };
//实时负荷 //实时负荷
const getRealTimeLoad = () => { const getRealTimeLoad = () => {
let myChart let myChart;
myChart = echarts.init(document.getElementById("realTimeLoad")); myChart = echarts.init(document.getElementById("realTimeLoad"));
const option = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
@ -124,7 +124,11 @@ const getRealTimeLoad = ()=> {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
//当日累计用电量 //当日累计用电量
const getDailyElectricityConsumption = () => { const getDailyElectricityConsumption = () => {
const offsetX = 10; //bar宽 const offsetX = 10; //bar宽
@ -273,7 +277,7 @@ const getDailyElectricityConsumption = () => {
name: "单位:kWh", name: "单位:kWh",
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
padding:[0,5,0,0] padding: [0, 5, 0, 0],
}, },
// minInterval: 1, // minInterval: 1,
// y轴（竖直线） // y轴（竖直线）
@ -406,7 +410,11 @@ const getDailyElectricityConsumption = () => {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
//空调负荷 //空调负荷
const drawAirConditioningLoad = () => { const drawAirConditioningLoad = () => {
@ -507,7 +515,11 @@ const drawAirConditioningLoad = ()=> {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
// 展陈负荷 // 展陈负荷
const drawExhibitionLoad = () => { const drawExhibitionLoad = () => {
let myChart = echarts.init(document.getElementById("exhibitionLoad")); let myChart = echarts.init(document.getElementById("exhibitionLoad"));
@ -607,7 +619,11 @@ const drawExhibitionLoad =()=> {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
// 配电回路排名 // 配电回路排名
const drawRanking = () => { const drawRanking = () => {
let myChart = echarts.init(document.getElementById("ranking")); let myChart = echarts.init(document.getElementById("ranking"));
@ -743,7 +759,11 @@ const drawRanking = ()=> {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
//负荷分类 //负荷分类
const getLoadClassification = () => { const getLoadClassification = () => {
var trafficWay = [ var trafficWay = [
@ -940,7 +960,11 @@ const getLoadClassification=()=> {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
//加载完dom执行 //加载完dom执行
onMounted(() => { onMounted(() => {
//实时负荷 //实时负荷
@ -955,7 +979,7 @@ onMounted(() => {
drawRanking(); drawRanking();
//负荷分类 //负荷分类
getLoadClassification(); getLoadClassification();
}) });
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

356
src/views/lighting/index.vue
View File

@ -1,8 +1,8 @@
<script setup> <script setup>
import {onMounted, ref} from "vue" import { onMounted, ref } from "vue";
import getPath from "@/utils/getPath.js"; import getPath from "@/utils/getPath.js";
import * as echarts from "echarts"; import * as echarts from "echarts";
import dialogBox from './components/dialog.vue' import dialogBox from "./components/dialog.vue";
// 照明监测 // 照明监测
const lightingNumList = ref([ const lightingNumList = ref([
{ {
@ -24,116 +24,112 @@ const lightingNumList = ref([
name: "离线数量", name: "离线数量",
num: 1130, num: 1130,
pic: getPath.offlineNum, pic: getPath.offlineNum,
} },
]) ]);
// 照明回路详情 // 照明回路详情
const lightDetail = ref([ const lightDetail = ref([
{ {
name: '照明1', name: "照明1",
address: "西大厅", address: "西大厅",
state: false state: false,
}, },
{ {
name: '照明2', name: "照明2",
address: "西大厅", address: "西大厅",
state: false state: false,
}, },
{ {
name: '照明3', name: "照明3",
address: "西大厅", address: "西大厅",
state: false state: false,
}, },
{ {
name: '照明4', name: "照明4",
address: "西大厅", address: "西大厅",
state: true state: true,
}, },
{ {
name: '照明5', name: "照明5",
address: "西大厅", address: "西大厅",
state: true state: true,
} },
]) ]);
// 照明控制 // 照明控制
const lightControl = ref([ 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( const floorList = ref([
[ { {
name:'一层' name: "一层",
}, },
{ {
name:'二层' name: "二层",
}, },
{ {
name:'三层' name: "三层",
}, },
{ {
name:'负一层' name: "负一层",
}] },
) ]);
const floorIndex = ref(-1) const floorIndex = ref(-1);
// 楼层选择方法 // 楼层选择方法
const toggleFloor = (item, index) => { const toggleFloor = (item, index) => {
if (item.name === "一层") { if (item.name === "一层") {
emit('sendVal',6) emit("sendVal", 6);
} else if (item.name === "二层") { } else if (item.name === "二层") {
emit('sendVal',7) emit("sendVal", 7);
} else if (item.name === "三层") { } else if (item.name === "三层") {
emit('sendVal',8) emit("sendVal", 8);
} else if (item.name === "负一层") { } else if (item.name === "负一层") {
emit('sendVal',5) emit("sendVal", 5);
}
floorIndex.value = index
} }
floorIndex.value = index;
};
const toggleLightLoad = (event) => { const toggleLightLoad = (event) => {
lightLoadDate.value = event.srcElement.className lightLoadDate.value = event.srcElement.className;
} };
// 照明控制 // 照明控制
const controlBtn = ref('') const controlBtn = ref("on");
const toggleControl = (event) => { const toggleControl = (event) => {
controlBtn.value = event.srcElement.className controlBtn.value = event.srcElement.className;
} };
// 弹窗 // 弹窗
const dialogShow = ref(false) const dialogShow = ref(false);
const box = ref("") const box = ref("");
const dialogTitle = ref("") const dialogTitle = ref("");
const openDialog = (name) => { const openDialog = (name) => {
// 关闭三维照明控制箱的方法 // 关闭三维照明控制箱的方法
emit("closeBox","") emit("closeBox", "");
dialogTitle.value = name dialogTitle.value = name;
dialogShow.value = true dialogShow.value = true;
};
}
const closeDialog = (val) => { const closeDialog = (val) => {
dialogShow.value = val dialogShow.value = val;
};
}
// 故障情况 // 故障情况
const drawFaultConditionsChart = () => { const drawFaultConditionsChart = () => {
let trafficWay = [ let trafficWay = [
@ -145,7 +141,6 @@ const drawFaultConditionsChart = () => {
name: "故障", name: "故障",
value: 80, value: 80,
}, },
]; ];
var total = 0; var total = 0;
for (var i = 0; i < trafficWay.length; i++) { for (var i = 0; i < trafficWay.length; i++) {
@ -153,10 +148,7 @@ const drawFaultConditionsChart = () => {
} }
var data = []; var data = [];
var color = [ var color = ["rgba(1, 246, 139, 1)", "rgba(255, 221, 0, 1)"];
'rgba(1, 246, 139, 1)',
'rgba(255, 221, 0, 1)'
];
for (var i = 0; i < trafficWay.length; i++) { for (var i = 0; i < trafficWay.length; i++) {
data.push( data.push(
{ {
@ -183,7 +175,7 @@ const drawFaultConditionsChart = () => {
color: "rgba(0, 0, 0, 0)", color: "rgba(0, 0, 0, 0)",
borderWidth: 0, borderWidth: 0,
}, },
}, }
); );
} }
var img = "/src/assets/images/energyMonitoring/loadClassification.png"; var img = "/src/assets/images/energyMonitoring/loadClassification.png";
@ -319,7 +311,11 @@ const drawFaultConditionsChart = () => {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
// 展馆照明 // 展馆照明
const drawHallLightingChart = () => { const drawHallLightingChart = () => {
const offsetX = 10; //bar宽 const offsetX = 10; //bar宽
@ -390,14 +386,12 @@ const drawHallLightingChart = () => {
echarts.graphic.registerShape("CubeLeft", CubeLeft); echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight); echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop); echarts.graphic.registerShape("CubeTop", CubeTop);
let intAxisData = ['室内', '户外']; let intAxisData = ["室内", "户外"];
let intSeriesData = [100, 200]; let intSeriesData = [100, 200];
// 绿色渐变 // 绿色渐变
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]] // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
let colorArr; let colorArr;
let myChart = echarts.init( let myChart = echarts.init(document.getElementById("hallLighting"));
document.getElementById("hallLighting")
);
const option = { const option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -452,7 +446,7 @@ const drawHallLightingChart = () => {
name: "单位:kW", name: "单位:kW",
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
padding: [0, 20, 0, 0] padding: [0, 20, 0, 0],
}, },
// minInterval: 1, // minInterval: 1,
// y轴（竖直线） // y轴（竖直线）
@ -482,15 +476,18 @@ const drawHallLightingChart = () => {
type: "custom", type: "custom",
renderItem: (params, api) => { renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]); const location = api.coord([api.value(0), api.value(1)]);
colorArr = params.dataIndex === 0 ? [ colorArr =
params.dataIndex === 0
? [
// 蓝色渐变 // 蓝色渐变
["rgba(0, 170, 193, 1)"], ["rgba(0, 170, 193, 1)"],
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"], ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
] : [ ]
: [
// 绿色渐变 // 绿色渐变
["rgba(0, 193, 113, 1)"], ["rgba(0, 193, 113, 1)"],
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"], ["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
] ];
return { return {
type: "group", type: "group",
children: [ children: [
@ -591,160 +588,176 @@ const drawHallLightingChart = () => {
tooltip: {}, tooltip: {},
data: intSeriesData, data: intSeriesData,
}, },
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
// 照明负荷 // 照明负荷
const drawLightLoadChart = () => { const drawLightLoadChart = () => {
let myChart = echarts.init(document.getElementById("lightLoad")); let myChart = echarts.init(document.getElementById("lightLoad"));
let option = { let option = {
grid: { grid: {
top: '18%', top: "18%",
left: '3%', left: "3%",
right: '5%', right: "5%",
bottom: '7%', bottom: "7%",
containLabel: true containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
borderWidth: 1, borderWidth: 1,
// axisPointer: { // axisPointer: {
// type: 'shadow' // type: 'shadow'
// }, // },
// extraCssText: 'z-index:2' // extraCssText: 'z-index:2'
}, },
legend: [{ legend: [
icon: 'rect', {
icon: "rect",
top: 5, top: 5,
left: 'right', left: "right",
orient: 'horizontal', orient: "horizontal",
// data: ['进水量', '出水量'], // data: ['进水量', '出水量'],
borderRadius: 20, borderRadius: 20,
itemHeight: 10, itemHeight: 10,
itemWidth: 15, itemWidth: 15,
textStyle: { textStyle: {
color: '#DDFFFD', color: "#DDFFFD",
fontSize: 12, fontSize: 12,
// fontWeight: 400 // fontWeight: 400
} },
}], },
],
xAxis: { xAxis: {
type: 'category', type: "category",
data: ['13:00', '14:00', '15:00', '16:00', '17:00'], data: ["13:00", "14:00", "15:00", "16:00", "17:00"],
axisLine: { axisLine: {
//坐标轴轴线相关设置。数学上的x轴 //坐标轴轴线相关设置。数学上的x轴
show: true, show: true,
lineStyle: { lineStyle: {
// type:'dashed', // type:'dashed',
color: "#557775" color: "#557775",
// color: "#233e64", // color: "#233e64",
}, },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#DDFFFD", //X轴文字颜色 color: "#DDFFFD", //X轴文字颜色
} },
} },
}, },
yAxis: [ yAxis: [
{ {
min: 0, min: 0,
max: 500, max: 500,
type: 'value', type: "value",
name: '单位/kW', name: "单位/kW",
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
fontSize: 12, fontSize: 12,
padding: [0, 10, 0, 0], // 四个数字分别为上右下左与原位置距离 padding: [0, 10, 0, 0], // 四个数字分别为上右下左与原位置距离
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
color: "#DDFFFD", color: "#DDFFFD",
fontSize: 12 fontSize: 12,
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed', type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(1, 39, 37, 0.30)",
}, },
} },
},
}
], ],
series: [ series: [
{ {
name: '昨日', name: "昨日",
type: 'line', type: "line",
//显示所有图形。 //显示所有图形。
//标记的图形为实心圆 //标记的图形为实心圆
symbol: "none", symbol: "none",
itemStyle: { itemStyle: {
//折线拐点标志的样式 //折线拐点标志的样式
color: 'white', color: "white",
borderWidth: '2', borderWidth: "2",
borderColor: 'rgba(91, 250, 241, 1)', borderColor: "rgba(91, 250, 241, 1)",
normal: { normal: {
color: 'rgba(91, 250, 241, 1)'//拐点颜色 color: "rgba(91, 250, 241, 1)", //拐点颜色
} },
}, },
lineStyle: { 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: '今日', name: "今日",
type: 'line', type: "line",
symbol: "none", symbol: "none",
itemStyle: { itemStyle: {
//折线拐点标志的样式 //折线拐点标志的样式
color: 'white', color: "white",
borderWidth: '2', borderWidth: "2",
borderColor: '#91cc75', borderColor: "#91cc75",
normal: { normal: {
color: '#91cc75'//拐点颜色 color: "#91cc75", //拐点颜色
} },
}, },
lineStyle: { lineStyle: {
color: '#91cc75' color: "#91cc75",
}, },
data: [100, 320, 400, 420, 500] data: [100, 320, 400, 420, 500],
} },
] ],
};
} myChart.setOption(option);
myChart.setOption(option) // 添加 resize 事件处理程序
} window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
onMounted(() => { onMounted(() => {
window.openBox = openDialog window.openBox = openDialog;
// 故障情况 // 故障情况
drawFaultConditionsChart() drawFaultConditionsChart();
// 展馆照明 // 展馆照明
drawHallLightingChart() drawHallLightingChart();
// 照明负荷 // 照明负荷
drawLightLoadChart() drawLightLoadChart();
}) });
</script> </script>
<template> <template>
<div class="page m100"> <div class="page m100">
<!-- 层级控制 --> <!-- 层级控制 -->
<div class="floor"> <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"/> </div>
<dialogBox
ref="box"
:name="dialogTitle"
:show="dialogShow"
@update="closeDialog"
/>
<div class="page-left-box"> <div class="page-left-box">
<!-- 照明监测--> <!-- 照明监测-->
<div class="title"> <div class="title">
@ -752,11 +765,10 @@ onMounted(() => {
</div> </div>
<div id="light" class="margin10 box-bg"> <div id="light" class="margin10 box-bg">
<div v-for="(item, index) in lightingNumList" class="light-item"> <div v-for="(item, index) in lightingNumList" class="light-item">
<img :src="item.pic" alt=""> <img :src="item.pic" alt="" />
<p> <p>
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
<span class="num">{{ item.num }}<span class="unit">个</span></span> <span class="num">{{ item.num }}<span class="unit">个</span></span>
</p> </p>
</div> </div>
</div> </div>
@ -772,7 +784,8 @@ onMounted(() => {
<span>状态</span> <span>状态</span>
</div> </div>
<div class="tableContent"> <div class="tableContent">
<div v-for="(item, index) in lightDetail" <div
v-for="(item, index) in lightDetail"
:key="index" :key="index"
class="tableBoby" class="tableBoby"
> >
@ -787,9 +800,24 @@ onMounted(() => {
<div class="title margin10"> <div class="title margin10">
<span>照明负荷</span> <span>照明负荷</span>
<p> <p>
<span :class="lightLoadDate === 'year'?'selectYear':''" class="year" @click="toggleLightLoad">年</span> <span
<span :class="lightLoadDate === 'month'?'selectMonth':''" class="month" @click="toggleLightLoad">月</span> :class="lightLoadDate === 'year' ? 'selectYear' : ''"
<span :class="lightLoadDate === 'day'?'selectDay':''" class="day" @click="toggleLightLoad">日</span> 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> </p>
</div> </div>
<div id="lightLoad" class="margin10 box-bg"></div> <div id="lightLoad" class="margin10 box-bg"></div>
@ -799,16 +827,24 @@ onMounted(() => {
<div class="title"> <div class="title">
<span>展馆照明</span> <span>展馆照明</span>
</div> </div>
<div id="hallLighting" class="margin10 box-bg"> <div id="hallLighting" class="margin10 box-bg"></div>
</div>
<!-- 照明控制--> <!-- 照明控制-->
<div class="title margin10"> <div class="title margin10">
<span>照明控制</span> <span>照明控制</span>
<p class="control-btn"> <p class="control-btn">
<span :class="controlBtn==='on'?'select':''" class="on" @click="toggleControl">全开</span> <span
<span :class="controlBtn==='off'?'select':''" class="off" style="margin-left: .7rem" :class="controlBtn === 'on' ? 'select' : ''"
@click="toggleControl">全关</span> class="on"
@click="toggleControl"
>全开</span
>
<span
:class="controlBtn === 'off' ? 'select' : ''"
class="off"
style="margin-left: 0.7rem"
@click="toggleControl"
>全关</span
>
</p> </p>
</div> </div>
<div class="margin10 box-bg"> <div class="margin10 box-bg">
@ -818,13 +854,16 @@ onMounted(() => {
<span>操作</span> <span>操作</span>
</div> </div>
<div class="tableContent"> <div class="tableContent">
<div v-for="(item, index) in lightControl" <div
v-for="(item, index) in lightControl"
:key="index" :key="index"
class="tableBoby" class="tableBoby"
> >
<span class="name">{{ item.name }}</span> <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> </div>
</div> </div>
@ -860,11 +899,11 @@ onMounted(() => {
box-sizing: border-box; box-sizing: border-box;
p { p {
margin-left: .5rem; margin-left: 0.5rem;
.name { .name {
margin-top: 1.3rem; margin-top: 1.3rem;
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
.num { .num {
@ -874,18 +913,20 @@ onMounted(() => {
} }
.unit { .unit {
margin-left: .2rem; margin-left: 0.2rem;
} }
.name, .num { .name,
.num {
display: block; display: block;
font-size: .75rem; font-size: 0.75rem;
} }
} }
} }
//照明回路详情 //照明回路详情
.state0, .state1 { .state0,
.state1 {
width: 1.1rem; width: 1.1rem;
height: 1.1rem; height: 1.1rem;
display: block; display: block;
@ -894,11 +935,11 @@ onMounted(() => {
} }
.state0 { .state0 {
background-image: url('@/assets/images/lighting/state0.png'); background-image: url("@/assets/images/lighting/state0.png");
} }
.state1 { .state1 {
background-image: url('@/assets/images/lighting/state1.png'); background-image: url("@/assets/images/lighting/state1.png");
} }
//照明控制 //照明控制
@ -927,6 +968,5 @@ onMounted(() => {
//弹窗 //弹窗
.dialog { .dialog {
} }
</style> </style>

191
src/views/overview/index.vue
View File

@ -1,48 +1,48 @@
<script setup> <script setup>
import calendar from '@/components/calendar/index.vue' import calendar from "@/components/calendar/index.vue";
import * as echarts from 'echarts' import * as echarts from "echarts";
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import getPath from "@/utils/getPath.js"; import getPath from "@/utils/getPath.js";
// 实时负荷 // 实时负荷
const realTimeLoad = ref([ const realTimeLoad = ref([
{pic:getPath.roomnum,name:'配电室数量',value:8,unit:'个'}, { pic: getPath.roomnum, name: "配电室数量", value: 8, unit: "个" },
{pic:getPath.WL,name:'实时负荷',value:1465.2,unit:'kW'}, //负荷 { pic: getPath.WL, name: "实时负荷", value: 1465.2, unit: "kW" }, //负荷
{pic:getPath.E,name:'今日电量',value:146,unit:'kWh'}, //电量 { pic: getPath.E, name: "今日电量", value: 146, unit: "kWh" }, //电量
]) ]);
// 气象站 // 气象站
const weatherStation = ref([ const weatherStation = ref([
{pic:getPath.rain,name:'雨量',value:100,unit:'mm'}, { pic: getPath.rain, name: "雨量", value: 100, unit: "mm" },
{pic:getPath.rainsnow,name:'雨雪',value:'实际取值',unit:''}, { pic: getPath.rainsnow, name: "雨雪", value: "实际取值", unit: "" },
{pic:getPath.wind,name:'风向',value:'东南风'}, { pic: getPath.wind, name: "风向", value: "东南风" },
{pic:getPath.illuminance,name:'光照度',value:101,unit:'lux'}, { pic: getPath.illuminance, name: "光照度", value: 101, unit: "lux" },
{pic:getPath.windspeed,name:'风速',value:'东南风3级'}, { pic: getPath.windspeed, name: "风速", value: "东南风3级" },
{pic:getPath.air,name:'今日电量',value:'优'}, { pic: getPath.air, name: "今日电量", value: "优" },
]) ]);
// const getImageUrl=(name)=>{ // const getImageUrl=(name)=>{
// return `url(${new URL(name, import.meta.url).href})` // 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) => { const togglePower = (event) => {
powerDate.value = event.srcElement.className powerDate.value = event.srcElement.className;
} };
// 碳排放时间切换 // 碳排放时间切换
const carbonEmissionDate = ref('month') const carbonEmissionDate = ref("month");
const toggleCarbonEmission = (event) => { const toggleCarbonEmission = (event) => {
carbonEmissionDate.value = event.srcElement.className carbonEmissionDate.value = event.srcElement.className;
} };
const drawPowerEcharts = () => { const drawPowerEcharts = () => {
let myChart = echarts.init(document.getElementById('power')) let myChart = echarts.init(document.getElementById("power"));
const option = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
tooltip: {}, tooltip: {},
@ -54,7 +54,6 @@ const drawPowerEcharts = () =>{
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
axisLine: { axisLine: {
@ -62,7 +61,7 @@ const drawPowerEcharts = () =>{
show: true, show: true,
lineStyle: { lineStyle: {
// type:'dashed', // type:'dashed',
color: "#557775" color: "#557775",
// color: "#233e64", // color: "#233e64",
}, },
}, },
@ -72,7 +71,6 @@ const drawPowerEcharts = () =>{
color: "#DDFFFD", color: "#DDFFFD",
margin: 40, margin: 40,
}, },
}, },
axisTick: { show: false }, axisTick: { show: false },
@ -93,7 +91,7 @@ const drawPowerEcharts = () =>{
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type:'dashed', type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(1, 39, 37, 0.30)",
}, },
}, },
@ -143,10 +141,14 @@ const drawPowerEcharts = () =>{
}, },
], ],
}; };
myChart.setOption(option) myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
const drawRankEcharts = () => { const drawRankEcharts = () => {
let myChart = echarts.init(document.getElementById('rank')) let myChart = echarts.init(document.getElementById("rank"));
let option = { let option = {
grid: { grid: {
left: "5%", left: "5%",
@ -189,7 +191,7 @@ const drawRankEcharts = () =>{
show: true, show: true,
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize:"14" fontSize: "14",
}, },
}, },
splitLine: { splitLine: {
@ -213,26 +215,21 @@ const drawRankEcharts = () =>{
padding: [0, 0, 10, -10], padding: [0, 0, 10, -10],
verticalAlign: "bottom", verticalAlign: "bottom",
inside: true, inside: true,
textStyle: { textStyle: {},
},
formatter: function (value) { formatter: function (value) {
return "{a|" + (value / 10000).toLocaleString() + return "{a|" + (value / 10000).toLocaleString() + "}" + "{b|kWh}";
"}" + "{b|kWh}";
}, },
rich: { rich: {
a: { a: {
fontSize: "16", fontSize: "16",
color: "rgba(0, 255, 240, 1)", color: "rgba(0, 255, 240, 1)",
padding:[0,6,0,0] padding: [0, 6, 0, 0],
}, },
b: { b: {
color: "#fff", color: "#fff",
fontSize: "12", fontSize: "12",
},
} },
}
}, },
data: [50000000, 22000000, 10000000, 5000000, 1], data: [50000000, 22000000, 10000000, 5000000, 1],
}, },
@ -264,13 +261,17 @@ const drawRankEcharts = () =>{
barGap: "-115%", barGap: "-115%",
data: [50000000, 50000000, 50000000, 50000000, 50000000], data: [50000000, 50000000, 50000000, 50000000, 50000000],
itemStyle: { 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() { function getCarbonEmission() {
const offsetX = 10; //bar宽 const offsetX = 10; //bar宽
@ -341,16 +342,8 @@ function getCarbonEmission() {
echarts.graphic.registerShape("CubeLeft", CubeLeft); echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight); echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop); echarts.graphic.registerShape("CubeTop", CubeTop);
let xAxisData = [ let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月"];
"1月", let seriesData = [100, 200, 300, 400, 200, 250];
"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)"]] // 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)"],
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"], ["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
]; ];
let myChart = echarts.init( let myChart = echarts.init(document.getElementById("carbonEmission"));
document.getElementById("carbonEmission")
);
const option = { const option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -416,7 +407,7 @@ function getCarbonEmission() {
name: "单位:kWh", name: "单位:kWh",
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
padding:[0,5,0,0] padding: [0, 5, 0, 0],
}, },
// minInterval: 1, // minInterval: 1,
// y轴（竖直线） // y轴（竖直线）
@ -549,25 +540,35 @@ function getCarbonEmission() {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
// 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
} }
</script> </script>
<template> <template>
<div class="page m100"> <div class="page m100">
<div class="page-left-box"> <div class="page-left-box">
<!-- 用电量--> <!-- 用电量-->
<div class="title"> <div class="title">
<span>用电量</span> <span>用电量</span>
<p> <p>
<span class="year" :class="powerDate === 'year'?'selectYear':''" @click="togglePower">年</span> <span
<span class="month" :class="powerDate === 'month'?'selectMonth':''" @click="togglePower">月</span> class="year"
:class="powerDate === 'year' ? 'selectYear' : ''"
@click="togglePower"
>年</span
>
<span
class="month"
:class="powerDate === 'month' ? 'selectMonth' : ''"
@click="togglePower"
>月</span
>
</p> </p>
</div> </div>
<div class="margin10 box-bg" id="power"> <div class="margin10 box-bg" id="power"></div>
</div>
<!-- 日历--> <!-- 日历-->
<div class="title margin10"> <div class="title margin10">
<span>能耗日历</span> <span>能耗日历</span>
@ -582,13 +583,21 @@ function getCarbonEmission() {
<div class="title margin10"> <div class="title margin10">
<span>碳排放</span> <span>碳排放</span>
<p> <p>
<span class="year" :class="carbonEmissionDate === 'year'?'selectYear':''" @click="toggleCarbonEmission">年</span> <span
<span class="month" :class="carbonEmissionDate === 'month'?'selectMonth':''" @click="toggleCarbonEmission">月</span> class="year"
:class="carbonEmissionDate === 'year' ? 'selectYear' : ''"
@click="toggleCarbonEmission"
>年</span
>
<span
class="month"
:class="carbonEmissionDate === 'month' ? 'selectMonth' : ''"
@click="toggleCarbonEmission"
>月</span
>
</p> </p>
</div> </div>
<div class="margin10 box-bg" id="carbonEmission"> <div class="margin10 box-bg" id="carbonEmission"></div>
</div>
</div> </div>
<div class="page-right-box"> <div class="page-right-box">
<!-- 实时负荷 --> <!-- 实时负荷 -->
@ -597,20 +606,21 @@ function getCarbonEmission() {
</div> </div>
<div class="margin10 box-bg"> <div class="margin10 box-bg">
<ul class="real-time-load"> <ul class="real-time-load">
<li v-for="(item,index) in realTimeLoad" :style="'background-image:url('+item.pic+')'"> <li
v-for="(item, index) in realTimeLoad"
:style="'background-image:url(' + item.pic + ')'"
>
<span class="unit">{{ item.name }}</span> <span class="unit">{{ item.name }}</span>
<p> <p>
<span class="value">{{ item.value }}</span> <span class="value">{{ item.value }}</span>
<span class="unit">{{ item.unit }}</span> <span class="unit">{{ item.unit }}</span>
</p> </p>
</li> </li>
</ul> </ul>
</div> </div>
<!-- 气象站--> <!-- 气象站-->
<div class="title margin10"> <div class="title margin10">
<span>气象站</span> <span>气象站</span>
</div> </div>
<div class="margin10 box-bg"> <div class="margin10 box-bg">
<ul class="weather-station"> <ul class="weather-station">
@ -618,25 +628,23 @@ function getCarbonEmission() {
<p class="img" :style="'background-image:url(' + item.pic + ')'"> <p class="img" :style="'background-image:url(' + item.pic + ')'">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</p> </p>
<p><span class="wea-value">{{item.value}}</span><span class="unit" v-if="item.unit">{{ item.unit }}</span></p> <p>
<span class="wea-value">{{ item.value }}</span
><span class="unit" v-if="item.unit">{{ item.unit }}</span>
</p>
</li> </li>
</ul> </ul>
</div> </div>
<!-- 系统用电排名--> <!-- 系统用电排名-->
<div class="title margin10"> <div class="title margin10">
<span>系统用电排名</span> <span>系统用电排名</span>
</div> </div>
<div class="margin10 box-bg" id="rank"> <div class="margin10 box-bg" id="rank"></div>
</div> </div>
</div> </div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.real-time-load { .real-time-load {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -654,22 +662,21 @@ function getCarbonEmission() {
padding-right: 1.3rem; padding-right: 1.3rem;
box-sizing: border-box; box-sizing: border-box;
.value { .value {
margin-right: .7rem; margin-right: 0.7rem;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
color: rgba(91, 250, 241, 1); color: rgba(91, 250, 241, 1);
} }
.unit { .unit {
font-size:.8rem; font-size: 0.8rem;
color:rgba(221, 255, 253, 1) color: rgba(221, 255, 253, 1);
} }
} }
} }
.weather-station { .weather-station {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding:.8rem; padding: 0.8rem;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -680,26 +687,24 @@ function getCarbonEmission() {
.wea-value { .wea-value {
font-weight: 600; font-weight: 600;
color: rgba(91, 250, 241, 1); color: rgba(91, 250, 241, 1);
margin: 0 .4rem 0 1rem; margin: 0 0.4rem 0 1rem;
} }
.unit { .unit {
font-size:.8rem; font-size: 0.8rem;
color:rgba(221, 255, 253, 1) color: rgba(221, 255, 253, 1);
} }
} }
.img { .img {
margin-bottom: .3rem; margin-bottom: 0.3rem;
width: 11.125rem; width: 11.125rem;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 2.6rem; padding-left: 2.6rem;
box-sizing: border-box; box-sizing: border-box;
font-size: .9rem; font-size: 0.9rem;
font-style: italic; font-style: italic;
height: 50%; height: 50%;
color: rgba(221, 255, 253, 1); color: rgba(221, 255, 253, 1);
} }
} }
</style> </style>