This commit is contained in:
shijing 2024-12-12 15:47:14 +08:00
commit 24252a4995
3 changed files with 157 additions and 69 deletions

View File

@ -81,7 +81,7 @@
<div class="flexItem">
<div class="itemTitle">
<div class="itemTitleIcon"></div>
<div>台时产量</div>
<div>本月台时产量</div>
</div>
<div class="itemBody itemBodyCircle">
<div
@ -93,15 +93,15 @@
class="elProgress"
type="circle"
:stroke-width="15"
:percentage="item.value"
:percentage="item.rate"
:color="colors"
>
<template #default="{ percentage }">
<!-- <template > -->
<span class="percentage-value"
>{{ percentage }}t/h</span
>{{ item.value }}t/h</span
>
<p class="percentage-label">{{ item.name }}</p>
</template>
<!-- </template> -->
</el-progress>
</div>
</div>
@ -159,7 +159,7 @@
<div class="flexItem">
<div class="itemTitle">
<div class="itemTitleIcon"></div>
<div>主机设备电耗</div>
<div>本月主机设备电耗</div>
</div>
<div class="itemBody itemBodyFlex">
<div id="radar" style="height: 100%"></div>
@ -168,7 +168,7 @@
<tbody>
<tr class="bodyListItem tableHeader">
<th class="bodyListItem_name">工序</th>
<th>
<th class="bodyListItem_name">
电耗<span
style="
color: #fff;
@ -206,7 +206,7 @@
<div class="flexItem">
<div class="itemTitle">
<div class="itemTitleIcon"></div>
<div>能源数据</div>
<div>本日能源数据</div>
</div>
<div class="itemBody" style="padding: 5%">
<div class="elecItem">
@ -385,7 +385,6 @@ export default {
color: "rgb(255, 255, 0)",
},
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
@ -426,6 +425,26 @@ export default {
color: "rgb(224, 62, 76)",
},
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(60, 238, 16)",
},
{
offset: 1,
color: "rgb(89, 206, 59)",
},
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(208, 32, 67)",
},
{
offset: 1,
color: "rgb(199, 74, 99)",
},
]),
],
sectionNames: {
电石渣堆棚: "电石渣",
@ -441,10 +460,10 @@ export default {
out_cement: 0,
},
rateData: [
{ name: "原料磨", value: 0 },
{ name: "煤磨", value: 0 },
{ name: "回转窑", value: 0 },
{ name: "水泥磨", value: 0 },
{ name: "原料磨", value: 0, rate:0 },
{ name: "煤磨", value: 0, rate:0 },
{ name: "回转窑", value: 0, rate:0 },
{ name: "水泥磨", value: 0 , rate:0 },
],
elecData: [
{ name: "电石渣", value: 0 },
@ -701,7 +720,6 @@ export default {
methods: {
productNum() {
let that = this;
// option1
let option1 = that.deepCopy(that.option);
let chartDom = document.getElementById("line1");
@ -946,11 +964,8 @@ export default {
let myChart = echarts.init(chartDom);
// series
// let seriesData = new Array(31).fill(0); //
let seriesData1 = new Array(31).fill(0); //
// let seriesData2 = new Array(31).fill(0); //
let seriesData3 = new Array(31).fill(0); //
// let seriesData4 = new Array(31).fill(0); //
let seriesData5 = new Array(31).fill(0); //
//
@ -980,20 +995,21 @@ export default {
}).then((response) => {
response.reverse();
response.forEach((item) => {
let ind = item.day - 1;
let ind = item.day - 1;
seriesData3[ind] = item.val || 0;
});
// API
let query3 = generateQuery("3631858982832218112");
response.reverse();
return this.$API.enm.mpointstat.list.req(query3);
}).then((response) => {
response.reverse();
let maxId;
response.forEach((item) => {
let ind = item.day - 1;
maxId = ind;
seriesData5[ind] = item.val || 0;
});
//
@ -1057,6 +1073,29 @@ export default {
},
]
myChart.setOption(option3); //
let index3 = 0;
intervalId = setInterval(function () {
if (index3 <= maxId) {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: index3,
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index3,
});
index3++;
} else {
index3 = 0;
clearInterval(intervalId);
}
}, 1000);
});
},
//
@ -1085,15 +1124,19 @@ export default {
data.forEach((item) => {
if (item.mgroup_name == "原料磨") {
that.rateData[0].value = item.production_hour
that.rateData[0].rate = item.run_rate
;
} else if (item.mgroup_name == "煤磨") {
that.rateData[1].value = item.production_hour
that.rateData[1].rate = item.run_rate
;
} else if (item.mgroup_name == "回转窑") {
that.rateData[2].value = item.production_hour
that.rateData[2].rate = item.run_rate
;
} else if (item.mgroup_name == "水泥磨") {
that.rateData[3].value = item.production_hour
that.rateData[3].rate = item.run_rate
};
});
});
@ -1236,12 +1279,14 @@ export default {
return this.$API.enm.mpointstat.list.req(query2);
}).then((response) => {
console.log(response,'query2');
let maxId;
response.forEach((item) => {
let ind = item.month - 1;
let ind = item.month - 1;
maxId = 12;
seriesData1[ind] = item.val || 0;
});
//
option5.color = ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
option5.color = ["#cd1e4b", "#3cee10", "#37A2FF", "#FF0087", "#FFBF00"],
option5.legend.data = [
{
name: "原煤消耗(t)",
@ -1250,7 +1295,7 @@ export default {
},
borderRadius: 2,
itemStyle: {
color: "#80FFA5",
color: "#cd1e4b",
},
},
{
@ -1260,7 +1305,7 @@ export default {
},
borderRadius: 2,
itemStyle: {
color: "#00DDFF",
color: "#3cee10",
},
},
];
@ -1269,13 +1314,32 @@ export default {
name: '原煤消耗(t)',
type: 'line',
yAxisIndex: 0,
data: seriesData
data: seriesData,
smooth: true,
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: that.linearGradientColors[6],
},
emphasis: {
focus: "series",
},
},
{
name: '全厂电量(kwh)',
type: 'line',
yAxisIndex: 1,
data: seriesData1
data: seriesData1,
smooth: true,
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: that.linearGradientColors[5],
},
emphasis: {
focus: "series",
},
},
];
option5.xAxis.data = [
@ -1293,6 +1357,29 @@ export default {
"12月",
];
myChart.setOption(option5); //
let index3 = 0;
intervalId = setInterval(function () {
if (index3 <= maxId) {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: index3,
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index3,
});
index3++;
} else {
index3 = 0;
clearInterval(intervalId);
}
}, 1000);
});
},
//
@ -1355,8 +1442,6 @@ export default {
var model = document.getElementsByClassName("model")[0];
var left_block = document.getElementsByClassName("left_block")[0];
var right_block = document.getElementsByClassName("right_block")[0];
// var pieChart = document.getElementById("pieChart");
// var elTable = document.getElementById("elTable");
var radarChart = document.getElementById("radar");
if (windowWidth > 960) {
container.style.overflow = "hidden";
@ -1837,6 +1922,7 @@ export default {
// 3DGUI
createDetailPanel(info, mesh) {
let that = this;
//
const data_view = new BABYLON_GUI.StackPanel(
info.name + "_data_detail"
);
@ -1847,8 +1933,8 @@ export default {
data_view.shadowBlur = 20; //
data_view.shadowOffsetX = 0; //
data_view.shadowOffsetY = 5; // v
data_view.background = "rgba(0, 34, 51, 0.6)"; //
data_view.background = "rgba(0, 34, 51, 0.1)"; //
// 线
const mgroup_line = new BABYLON_GUI.Rectangle(info.name + "_line");
mgroup_line.height = "3px";
mgroup_line.width = "240px";
@ -1856,12 +1942,12 @@ export default {
mgroup_line.shadowBlur = 15; //
mgroup_line.shadowOffsetX = 0; //
mgroup_line.shadowOffsetY = 0; // v
mgroup_line.shadowColor = "rgba(44, 237, 255, 0.8)";
mgroup_line.background = "rgba(44, 237, 255, 0.8)";
mgroup_line.shadowColor = "rgba(44, 237, 255, 0.2)";
mgroup_line.background = "rgba(44, 237, 255, 0.2)";
data_view.addControl(mgroup_line);
const titleImg = new BABYLON_GUI.Image();
//
const header = new BABYLON_GUI.StackPanel(info.name + "_header");
header.width = "200px";
header.height = "60px";
@ -1871,7 +1957,7 @@ export default {
const mgroupName = new BABYLON_GUI.TextBlock(info.name + "_label");
mgroupName.height = "30px";
mgroupName.width = "175px";
mgroupName.color = "white";
mgroupName.color = "yellow"; //
mgroupName.text = info.name;
mgroupName.textHorizontalAlignment = 0;
mgroupName.paddingLeft = "8px";
@ -1907,7 +1993,7 @@ export default {
);
field.width = "120px";
field.height = "30px";
field.color = "rgba(255,255,255, 0.7)";
field.color = "rgba(243,226,13,1)"; //
field.fontSize = 14;
field.text = item.label;
field.textHorizontalAlignment = 0;
@ -1919,7 +2005,7 @@ export default {
);
valx.width = "80px";
valx.height = "30px";
valx.color = "white";
valx.color = "yellow"; //
valx.fontSize = 14;
valx.text = item.value;
valx.textHorizontalAlignment =
@ -2138,9 +2224,11 @@ export default {
.bodyListItem_name {
width: 60px;
padding: 0.5vh 0;
font-size: 14px;
}
.bodyListItem_num {
width: 65px;
font-size: 14px;
}
.itemBodyFlex {
display: flex;
@ -2373,15 +2461,15 @@ export default {
font-weight: 500;
}
.elecItem span {
font-size: 14px; /* 修改文字大小 */
font-size: 17px; /* 修改文字大小 */
}
.elec_number {
font-size: 14px;
font-size: 17px;
}
.elec_unit {
font-size: 14px; /* 修改单位的文字大小 */
font-size: 17px; /* 修改单位的文字大小 */
}
.successState {

View File

@ -5,74 +5,74 @@
<img src="/media/elec_flow.png" class="flowImg" >
<!-- <img src="/img/energy.png" class="flowImg" /> -->
<div class="energyNumber energyNumberLeft" style="top: 187px;">
<img v-if="dataObj.全厂电量_电" class="iconImg" src="img/elec.png">{{ dataObj.全厂电量_电 }}
<img v-if="dataObj.全厂电量_电" class="iconImg" src="img/elec.png">{{ dataObj.全厂电量_电 }} kWh
</div>
<div class="energyNumber energyNumberLeft2" style="top: 91px;">
<img v-if="dataObj.电石渣配电室用电_电" class="iconImg" src="img/elec.png">{{ dataObj.电石渣配电室用电_电 }}
<img v-if="dataObj.电石渣配电室用电_电" class="iconImg" src="img/elec.png">{{ dataObj.电石渣配电室用电_电 }} kWh
</div>
<!-- 窑头配电室用电_电 -->
<div class="energyNumber energyNumberLeft2" style="top: 188px;">
<img v-if="dataObj.回转窑_电" class="iconImg" src="img/elec.png">{{ dataObj.回转窑_电 }}
<img v-if="dataObj.回转窑_电" class="iconImg" src="img/elec.png">{{ dataObj.回转窑_电 }} kWh
</div>
<div class="energyNumber energyNumberLeft2" style="top: 335px;">
<img v-if="dataObj.水泥配电室用电_电" class="iconImg" src="img/elec.png">{{ dataObj.水泥配电室用电_电 }}
<img v-if="dataObj.水泥配电室用电_电" class="iconImg" src="img/elec.png">{{ dataObj.水泥配电室用电_电 }} kWh
</div>
<div class="energyNumber" style="top: 84px;">
<img v-if="dataObj.烘干破碎机_电" class="iconImg" src="img/elec.png"> {{ dataObj.烘干破碎机_电 }}
<img v-if="dataObj.烘干破碎机_电" class="iconImg" src="img/elec.png"> {{ dataObj.烘干破碎机_电 }} kWh
</div>
<div class="energyNumber" style="top: 138px;">
<img v-if="dataObj.辅材立磨_电" class="iconImg" src="img/elec.png">{{ dataObj.辅材立磨_电 }}
<img v-if="dataObj.辅材立磨_电" class="iconImg" src="img/elec.png">{{ dataObj.辅材立磨_电 }} kWh
</div>
<div class="energyNumber" style="top: 181px;">
<img v-if="dataObj.生粉制备_循环风机_电" class="iconImg" src="img/elec.png">{{ dataObj.生粉制备_循环风机_电 }}
<img v-if="dataObj.生粉制备_循环风机_电" class="iconImg" src="img/elec.png">{{ dataObj.生粉制备_循环风机_电 }} kWh
</div>
<div class="energyNumber" style="top: 225px;">
<img v-if="dataObj.生粉制备_选粉机_电" class="iconImg" src="img/elec.png">{{ dataObj.生粉制备_选粉机_电 }}
<img v-if="dataObj.生粉制备_选粉机_电" class="iconImg" src="img/elec.png">{{ dataObj.生粉制备_选粉机_电 }} kWh
</div>
<div class="energyNumber" style="top: 275px;">
<img v-if="dataObj.高温风机_电" class="iconImg" src="img/elec.png">{{ dataObj.高温风机_电 }}
<img v-if="dataObj.高温风机_电" class="iconImg" src="img/elec.png">{{ dataObj.高温风机_电 }} kWh
</div>
<div class="energyNumber" style="top: 330px;">
<img v-if="dataObj.尾排风机_电" class="iconImg" src="img/elec.png">{{ dataObj.尾排风机_电 }}
<img v-if="dataObj.尾排风机_电" class="iconImg" src="img/elec.png">{{ dataObj.尾排风机_电 }} kWh
</div>
<div class="energyNumber" style="top: 383px;">
<img v-if="dataObj.回转窑_电" class="iconImg" src="img/elec.png">{{ dataObj.回转窑_电 }}
<img v-if="dataObj.回转窑_电" class="iconImg" src="img/elec.png">{{ dataObj.回转窑_电 }} kWh
</div>
<div class="energyNumber" style="top: 433px;">
<img v-if="dataObj.煤立磨_电" class="iconImg" src="img/elec.png">{{ dataObj.煤立磨_电 }}
<img v-if="dataObj.煤立磨_电" class="iconImg" src="img/elec.png">{{ dataObj.煤立磨_电 }} kWh
</div>
<div class="energyNumber" style="top: 490px;">
<img v-if="dataObj.煤磨排风机_电" class="iconImg" src="img/elec.png">{{ dataObj.煤磨排风机_电 }}
<img v-if="dataObj.煤磨排风机_电" class="iconImg" src="img/elec.png">{{ dataObj.煤磨排风机_电 }} kWh
</div>
<div class="energyNumber" style="top: 539px;">
<img v-if="dataObj.窑头排风机_电" class="iconImg" src="img/elec.png">{{ dataObj.窑头排风机_电 }}
<img v-if="dataObj.窑头排风机_电" class="iconImg" src="img/elec.png">{{ dataObj.窑头排风机_电 }} kWh
</div>
<div class="energyNumber" style="top: 609px;">
<img v-if="dataObj.水泥磨_电" class="iconImg" src="img/elec.png">{{ dataObj.水泥磨_电 }}
<img v-if="dataObj.水泥磨_电" class="iconImg" src="img/elec.png">{{ dataObj.水泥磨_电 }} kWh
</div>
<div class="energyNumber" style="top: 665px;">
<img v-if="dataObj.辊压机动_电||dataObj.辊压机定_电" class="iconImg" src="img/elec.png">{{ (Number(dataObj.辊压机动_电) + Number(dataObj.辊压机定_电)).toFixed(2) }}
<img v-if="dataObj.辊压机动_电||dataObj.辊压机定_电" class="iconImg" src="img/elec.png">{{ (Number(dataObj.辊压机动_电) + Number(dataObj.辊压机定_电)).toFixed(2) }} kWh
</div>
<div class="energyNumber" style="top: 720px;">
<img v-if="dataObj.系统风机_电" class="iconImg" src="img/elec.png">{{ dataObj.系统风机_电 }}
<img v-if="dataObj.系统风机_电" class="iconImg" src="img/elec.png">{{ dataObj.系统风机_电 }} kWh
</div>
<div class="energyNumber" style="top: 775px;">
<img v-if="dataObj.水泥磨_选粉机_电" class="iconImg" src="img/elec.png">{{ dataObj.水泥磨_选粉机_电 }}
<img v-if="dataObj.水泥磨_选粉机_电" class="iconImg" src="img/elec.png">{{ dataObj.水泥磨_选粉机_电 }} kWh
</div>
<div class="energyNumber" style="top: 831px;">
<img v-if="dataObj.水泥磨_循环风机_电" class="iconImg" src="img/elec.png">{{ dataObj.水泥磨_循环风机_电 }}
<img v-if="dataObj.水泥磨_循环风机_电" class="iconImg" src="img/elec.png">{{ dataObj.水泥磨_循环风机_电 }} kWh
</div>
<!-- -->
<div class="energyNumberLeft coalNumber" style="top: 460px;">
<img v-if="dataObj.原煤累计量" class="iconImg" src="img/coal.png">{{ dataObj.原煤累计量 }}
<img v-if="dataObj.原煤累计量" class="iconImg" src="img/coal.png">{{ dataObj.原煤累计量 }} t
</div>
<!-- 头煤 -->
<div class="energyNumberRight coalNumber" style="top: 463px;">
<img v-if="dataObj.头煤_煤" class="iconImg" src="img/coal.png">{{ dataObj.头煤_煤 }}
<img v-if="dataObj.头煤_煤" class="iconImg" src="img/coal.png">{{ dataObj.头煤_煤 }} t
</div>
<!-- 尾煤 -->
<div class="energyNumberRight coalNumber" style="top: 552px;">
<img v-if="dataObj.尾煤_煤" class="iconImg" src="img/coal.png">{{ dataObj.尾煤_煤 }}
<img v-if="dataObj.尾煤_煤" class="iconImg" src="img/coal.png">{{ dataObj.尾煤_煤 }} t
</div>
</div>
</el-main>

View File

@ -335,9 +335,9 @@ export default {
["出厂水泥", "P.O42.5R 袋装t", 0, 0, 0, "/", "/", "/","/"],
["出厂水泥", "P.O42.5 袋装t", 0, 0, 0, "/", "/", "/","/"],
["出厂水泥", "P.O42.5 散装t", 0, 0, 0, "/", "/", "/","/"],
["出厂水泥", "P.C42.5 袋装t", 0, 0, 0, "/", "/", "/","/"],
["出厂水泥", "P.C42.5 散装t", 0, 0, 0, "/", "/", "/","/"],
["出厂水泥", "P.O52.5 散装t", 0, 0, 0, "/", "/", "/","/"],
["出厂水泥", "复合硅酸盐水泥;42.5R;袋装水泥(t)", 0, 0, 0, "/", "/", "/","/"],
["出厂水泥", "复合硅酸盐水泥;42.5R;散装水泥(t)", 0, 0, 0, "/", "/", "/","/"],
["出厂水泥", "普通硅酸盐水泥;52.5;散装水泥(t)", 0, 0, 0, "/", "/", "/","/"],
["出厂水泥", "出厂水泥合计t", 0, 0, 0, 0, 0, 0, 0],
["出厂熟料", "熟料t", 0, 0, 0, "/", "/", "/","/"],
["能耗", "单位产品分布电耗KW·h/t", 0, 0, 0, 0, 0, 0, 0],
@ -561,7 +561,7 @@ export default {
that.tableDatas[2][4] = item.val;
}else if (item.mpoint_name == "水泥+P.O42.5 散装") {
that.tableDatas[3][4] = item.val;
}else if (item.mpoint_name == "水泥+P.C42.5 袋装") {
}else if (item.mpoint_name == "复合硅酸盐水泥;42.5R;袋装水泥") {
that.tableDatas[4][4] = item.val;
}else if (item.mpoint_name == "水泥+P.C42.5 散装") {
that.tableDatas[5][4] = item.val;
@ -596,7 +596,7 @@ export default {
that.tableDatas[2][3] = item.val;
}else if (item.mpoint_name == "水泥+P.O42.5 散装") {
that.tableDatas[3][3] = item.val;
}else if (item.mpoint_name == "水泥+P.C42.5 袋装") {
}else if (item.mpoint_name == "复合硅酸盐水泥;42.5R;袋装水泥") {
that.tableDatas[4][3] = item.val;
}else if (item.mpoint_name == "水泥+P.C42.5 散装") {
that.tableDatas[5][3] = item.val;
@ -678,7 +678,7 @@ export default {
that.tableDatas[2][2] = item.val;
}else if (item.mpoint_name == "水泥+P.O42.5 散装") {
that.tableDatas[3][2] = item.val;
}else if (item.mpoint_name == "水泥+P.C42.5 袋装") {
}else if (item.mpoint_name == "复合硅酸盐水泥;42.5R;袋装水泥") {
that.tableDatas[4][2] = item.val;
}else if (item.mpoint_name == "水泥+P.C42.5 散装") {
that.tableDatas[5][2] = item.val;
@ -799,7 +799,7 @@ export default {
seriesData3[ind] = item.val;
}else if (item.mpoint_name == "水泥+P.O42.5 散装") {
seriesData4[ind] = item.val;
}else if (item.mpoint_name == "水泥+P.C42.5 袋装") {
}else if (item.mpoint_name == "复合硅酸盐水泥;42.5R;袋装水泥") {
seriesData5[ind] = item.val;
}else if (item.mpoint_name == "水泥+P.C42.5 散装") {
seriesData6[ind] = item.val;
@ -863,7 +863,7 @@ export default {
seriesData3[ind] = item.val;
}else if (item.mpoint_name == "水泥+P.O42.5 散装") {
seriesData4[ind] = item.val;
}else if (item.mpoint_name == "水泥+P.C42.5 袋装") {
}else if (item.mpoint_name == "复合硅酸盐水泥;42.5R;袋装水泥") {
seriesData5[ind] = item.val;
}else if (item.mpoint_name == "水泥+P.C42.5 散装") {
seriesData6[ind] = item.val;