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