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

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

@ -234,9 +234,13 @@ function getCarbonTrends() {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
// 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
} }
//碳排放强度 //碳排放强度
const getCarbonIntensity=()=> { const getCarbonIntensity = () => {
const offsetX = 10; //bar宽 const offsetX = 10; //bar宽
const offsetY = 5; //倾斜角度 const offsetY = 5; //倾斜角度
// 绘制左侧面 // 绘制左侧面
@ -384,8 +388,8 @@ const getCarbonIntensity=()=> {
color: "#DDFFFD", color: "#DDFFFD",
padding: [0, 0, 0, 35], padding: [0, 0, 0, 35],
}, },
max:500, max: 500,
min:0, min: 0,
// minInterval: 1, // minInterval: 1,
// y轴（竖直线） // y轴（竖直线）
axisLine: { axisLine: {
@ -535,9 +539,13 @@ 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(
document.getElementById("carbonEmissionStatistics") document.getElementById("carbonEmissionStatistics")
); );
@ -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",
@ -681,7 +693,7 @@ const color = [
"rgba(1, 225, 242, 1)", "rgba(1, 225, 242, 1)",
"rgba(27, 255, 118, 1)", "rgba(27, 255, 118, 1)",
]; ];
const setLabel = ()=> { const setLabel = () => {
optionData.value.forEach((item, index) => { optionData.value.forEach((item, index) => {
item.itemStyle = { item.itemStyle = {
color: color[index], color: color[index],
@ -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"));
@ -790,7 +806,7 @@ const drawEnergyFlow = () => {
}, },
{ {
name: "其他", name: "其他",
nameValue:320, nameValue: 320,
valueUnit: "万tCO₂", valueUnit: "万tCO₂",
}, },
]; ];
@ -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,28 +874,27 @@ 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|" +
params.data.name + params.data.name +
"}\n" + "}\n" +
"{b|" + "{b|" +
params.data.nameValue + params.data.nameValue +
"}" + "}" +
" " + " " +
params.data.valueUnit params.data.valueUnit
); );
} else { } else {
return ( return (
"{name|" + "{name|" +
params.data.name + params.data.name +
"}" + "}" +
"{value|" + "{value|" +
params.data.nameValue + params.data.nameValue +
"}" + "}" +
// " " + // " " +
params.data.valueUnit params.data.valueUnit
); );
} }
}, },
@ -917,6 +932,10 @@ const drawEnergyFlow = () => {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
// 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
}; };
//加载完dom执行 //加载完dom执行
onMounted(() => { onMounted(() => {
@ -928,8 +947,8 @@ onMounted(() => {
getCarbonEmissionStatistics(); getCarbonEmissionStatistics();
//碳中和 //碳中和
getCarbonNeutrality(); getCarbonNeutrality();
// 碳流图 // 碳流图
drawEnergyFlow() drawEnergyFlow();
}); });
</script> </script>

401
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() {
@ -505,7 +516,7 @@ function getExhibitionLoad() {
top: 40, top: 40,
bottom: 40, bottom: 40,
left: 40, left: 40,
right:20, right: 20,
textStyle: { textStyle: {
color: "#fff", color: "#fff",
}, },
@ -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: [
@ -555,16 +566,16 @@ function getExhibitionLoad() {
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
name:"单位:kWh", name: "单位:kWh",
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', {
nameTextStyle: { name: "单位:kWh",
color: "rgba(221, 255, 253, 1)", nameTextStyle: {
padding: [0, 0, 0, 10] 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: // 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',
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: '销售电价', name: "电费",
type: 'line', 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 轴关联 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) myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
// 时间选择器参数 // 时间选择器参数
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,11 +965,11 @@ onMounted(() => {
// 定额管理 // 定额管理
drawManagement(); drawManagement();
// 能效流向 // 能效流向
drawEnergyFlow() drawEnergyFlow();
// 电费电价 // 电费电价
drawElectricityPrice() drawElectricityPrice();
// }) // })
// drawEnergyFlow(); // drawEnergyFlow();
//复费率 //复费率
getExhibitionLoad(); getExhibitionLoad();
}); });
@ -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>
@ -976,15 +1020,15 @@ onMounted(() => {
<div class="title margin10"> <div class="title margin10">
<span>能效流向</span> <span>能效流向</span>
</div> </div>
<div class="margin10 box-bg flow"> <div class="margin10 box-bg flow">
<div class="date-picker"> <div class="date-picker">
<span style="font-size: 0.875rem">选择日期：</span> <span style="font-size: 0.875rem">选择日期：</span>
<el-date-picker <el-date-picker
v-model="dateValue" v-model="dateValue"
type="daterange" type="daterange"
start-placeholder="开始时间" start-placeholder="开始时间"
end-placeholder="结束时间" end-placeholder="结束时间"
:default-time="defaultTime" :default-time="defaultTime"
/> />
</div> </div>
<div id="energyFlow"></div> <div id="energyFlow"></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>
@ -1049,20 +1111,19 @@ onMounted(() => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
#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;
@ -1072,11 +1133,11 @@ onMounted(() => {
border: none !important; border: none !important;
background-color: transparent !important; background-color: transparent !important;
} }
:deep(.el-icon){ :deep(.el-icon) {
display: none; display: none;
} }
:deep(.el-range-input){ :deep(.el-range-input) {
color:rgba(221, 255, 253, 1) !important; color: rgba(221, 255, 253, 1) !important;
} }
} }
.system-tab { .system-tab {

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

@ -44,9 +44,9 @@ const getImageUrl = (name) => {
return new URL(name, import.meta.url).href; return new URL(name, import.meta.url).href;
}; };
//实时负荷 //实时负荷
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",
tooltip: {}, tooltip: {},
@ -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,10 +410,14 @@ const getDailyElectricityConsumption = () => {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
//空调负荷 //空调负荷
const drawAirConditioningLoad = ()=> { const drawAirConditioningLoad = () => {
let myChart = echarts.init(document.getElementById("airConditioningLoad")); let myChart = echarts.init(document.getElementById("airConditioningLoad"));
const option = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
@ -507,9 +515,13 @@ 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"));
const option = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
@ -607,9 +619,13 @@ 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"));
let option = { let option = {
grid: { grid: {
@ -743,9 +759,13 @@ const drawRanking = ()=> {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
//负荷分类 //负荷分类
const getLoadClassification=()=> { const getLoadClassification = () => {
var trafficWay = [ var trafficWay = [
{ {
name: "一级", name: "一级",
@ -940,22 +960,26 @@ const getLoadClassification=()=> {
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
} // 添加 resize 事件处理程序
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
//加载完dom执行 //加载完dom执行
onMounted(() => { onMounted(() => {
//实时负荷 //实时负荷
getRealTimeLoad(); getRealTimeLoad();
//当日累计用电量 //当日累计用电量
getDailyElectricityConsumption(); getDailyElectricityConsumption();
// 空调负荷 // 空调负荷
drawAirConditioningLoad(); drawAirConditioningLoad();
// 展陈负荷 // 展陈负荷
drawExhibitionLoad(); drawExhibitionLoad();
// 配电回路排名 // 配电回路排名
drawRanking(); drawRanking();
//负荷分类 //负荷分类
getLoadClassification(); getLoadClassification();
}) });
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

514
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,37 +148,34 @@ 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(
{ {
value: trafficWay[i].value, value: trafficWay[i].value,
name: trafficWay[i].name, name: trafficWay[i].name,
itemStyle: { itemStyle: {
borderWidth: 5, borderWidth: 5,
// shadowBlur: 20, // shadowBlur: 20,
borderRadius: 10, borderRadius: 10,
borderColor: color[i], borderColor: color[i],
shadowColor: color[i], shadowColor: color[i],
},
}, },
{ },
value: total * 0.04, {
name: "", value: total * 0.04,
itemStyle: { name: "",
label: { itemStyle: {
show: false, label: {
}, show: false,
labelLine: {
show: false,
},
color: "rgba(0, 0, 0, 0)",
borderWidth: 0,
}, },
labelLine: {
show: false,
},
color: "rgba(0, 0, 0, 0)",
borderWidth: 0,
}, },
}
); );
} }
var img = "/src/assets/images/energyMonitoring/loadClassification.png"; var img = "/src/assets/images/energyMonitoring/loadClassification.png";
@ -271,14 +263,14 @@ const drawFaultConditionsChart = () => {
// percent = ((params.value / total) * 100).toFixed(0) // percent = ((params.value / total) * 100).toFixed(0)
if (params.name !== "") { if (params.name !== "") {
return ( return (
`{a${params.dataIndex / 2}|` + `{a${params.dataIndex / 2}|` +
params.value + params.value +
"}" + "}" +
`{s0|` + `{s0|` +
unit + unit +
"}" + "}" +
"\n" + "\n" +
params.name params.name
); );
} else { } else {
return ""; return "";
@ -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宽
@ -337,11 +333,11 @@ const drawHallLightingChart = () => {
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]]; const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]]; const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
ctx ctx
.moveTo(c0[0], c0[1]) .moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1]) .lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1]) .lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1]) .lineTo(c3[0], c3[1])
.closePath(); .closePath();
ctx.stroke(); ctx.stroke();
}, },
}); });
@ -358,11 +354,11 @@ const drawHallLightingChart = () => {
const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10]; const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
const c4 = [shape.x + 7 + 7, shape.y - 5]; const c4 = [shape.x + 7 + 7, shape.y - 5];
ctx ctx
.moveTo(c1[0], c1[1]) .moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1]) .lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1]) .lineTo(c3[0], c3[1])
.lineTo(c4[0], c4[1]) .lineTo(c4[0], c4[1])
.closePath(); .closePath();
ctx.stroke(); ctx.stroke();
}, },
}); });
@ -378,11 +374,11 @@ const drawHallLightingChart = () => {
const c3 = [shape.x + 15, shape.y - 5]; const c3 = [shape.x + 15, shape.y - 5];
const c4 = [shape.x - 2, shape.y - 5]; const c4 = [shape.x - 2, shape.y - 5];
ctx ctx
.moveTo(c1[0], c1[1]) .moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1]) .lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1]) .lineTo(c3[0], c3[1])
.lineTo(c4[0], c4[1]) .lineTo(c4[0], c4[1])
.closePath(); .closePath();
ctx.stroke(); ctx.stroke();
}, },
}); });
@ -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, 224, 255, 1)", "rgba(0, 224, 255,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)"], : [
] // 绿色渐变
["rgba(0, 193, 113, 1)"],
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
];
return { return {
type: "group", type: "group",
children: [ children: [
@ -591,172 +588,187 @@ 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', {
top: 5, icon: "rect",
left: 'right', top: 5,
orient: 'horizontal', left: "right",
// data: ['进水量', '出水量'], orient: "horizontal",
borderRadius: 20, // data: ['进水量', '出水量'],
itemHeight: 10, borderRadius: 20,
itemWidth: 15, itemHeight: 10,
textStyle: { itemWidth: 15,
color: '#DDFFFD', textStyle: {
fontSize: 12, color: "#DDFFFD",
// fontWeight: 400 fontSize: 12,
} // 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> </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="page-left-box">
<!-- 照明监测--> <!-- 照明监测-->
<div class="title"> <div class="title">
<span>照明监测</span> <span>照明监测</span>
</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,13 +784,14 @@ onMounted(() => {
<span>状态</span> <span>状态</span>
</div> </div>
<div class="tableContent"> <div class="tableContent">
<div v-for="(item, index) in lightDetail" <div
:key="index" v-for="(item, index) in lightDetail"
class="tableBoby" :key="index"
class="tableBoby"
> >
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
<span>{{ item.address }}</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> </div>
</div> </div>
@ -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
:key="index" v-for="(item, index) in lightControl"
class="tableBoby" :key="index"
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>

395
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 },
@ -83,8 +81,8 @@ const drawPowerEcharts = () =>{
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
name:"单位:kWh", name: "单位:kWh",
nameTextStyle:{ nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
}, },
min: 0, min: 0,
@ -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)",
}, },
}, },
@ -124,29 +122,33 @@ const drawPowerEcharts = () =>{
normal: { normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(
0, 0,
0, 0,
0, 0,
1, 1,
[ [
{ offset: 0, color: "rgba(91, 250, 241, 0.40)" }, { offset: 0, color: "rgba(91, 250, 241, 0.40)" },
{ offset: 1, color: "rgba(91, 250, 241, 0)" }, { offset: 1, color: "rgba(91, 250, 241, 0)" },
], ],
false false
), ),
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 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) myChart.setOption(option);
} // 添加 resize 事件处理程序
const drawRankEcharts = () =>{ window.addEventListener("resize", function () {
let myChart = echarts.init(document.getElementById('rank')) myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
const drawRankEcharts = () => {
let myChart = echarts.init(document.getElementById("rank"));
let option = { let option = {
grid: { grid: {
left: "5%", left: "5%",
@ -162,15 +164,15 @@ const drawRankEcharts = () =>{
}, },
formatter: function (params) { formatter: function (params) {
return ( return (
params[0].name + params[0].name +
"<br/>" + "<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>" + "<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 + params[0].seriesName +
" : " + " : " +
Number( Number(
(params[0].value.toFixed(4) / 10000).toFixed(2) (params[0].value.toFixed(4) / 10000).toFixed(2)
).toLocaleString() + ).toLocaleString() +
" 万元<br/>" " 万元<br/>"
); );
}, },
}, },
@ -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],
}, },
@ -243,16 +240,16 @@ const drawRankEcharts = () =>{
type: "bar", type: "bar",
zlevel: 1, zlevel: 1,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ {
offset: 0, offset: 0,
color: "rgba(29, 169, 153, 1)", color: "rgba(29, 169, 153, 1)",
}, },
{ {
offset: 1, offset: 1,
color: "rgba(223, 243, 240, 1)", color: "rgba(223, 243, 240, 1)",
}, },
]), ]),
}, },
barWidth: 8, barWidth: 8,
data: [50000000, 22000000, 10000000, 5000000, 200], data: [50000000, 22000000, 10000000, 5000000, 200],
@ -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">
<!-- 实时负荷 --> <!-- 实时负荷 -->
@ -596,110 +605,106 @@ function getCarbonEmission() {
<span>实时负荷</span> <span>实时负荷</span>
</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
<span class="unit">{{item.name}}</span> v-for="(item, index) in realTimeLoad"
<p> :style="'background-image:url(' + item.pic + ')'"
<span class="value">{{item.value}}</span> >
<span class="unit">{{item.unit}}</span> <span class="unit">{{ item.name }}</span>
</p> <p>
<span class="value">{{ item.value }}</span>
</li> <span class="unit">{{ item.unit }}</span>
</ul> </p>
</li>
</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">
<li v-for="(item,index) in weatherStation" > <li v-for="(item, index) in weatherStation">
<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 class="margin10 box-bg" id="rank">
</div> </div>
<div class="margin10 box-bg" id="rank"></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%; display: flex;
display:flex; justify-content: center;
justify-content: center; flex-wrap: wrap;
flex-wrap: wrap;
align-content: space-evenly; align-content: space-evenly;
li{ li {
width:24.125rem; width: 24.125rem;
height:28%; 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;
display: flex; display: flex;
flex-wrap: wrap; align-items: center;
align-content: space-evenly;
justify-content: space-between; justify-content: space-between;
li{ padding-left: 4.75rem;
height:30%; padding-right: 1.3rem;
.wea-value{ box-sizing: border-box;
font-weight: 600; .value {
color: rgba(91, 250, 241, 1); margin-right: 0.7rem;
margin: 0 .4rem 0 1rem; font-size: 1.5rem;
font-weight: 700;
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);
}
}
.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);
} }
} }
}
</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>