bonus
/
hb_zhgd_screen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

数据分析-

This commit is contained in:
lSun 2025-10-16 16:26:48 +08:00
parent 50e34f8205
commit 59da35f420
9 changed files with 675 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/dataAnalysisOctober/electricityStatistics.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
img/dataAnalysisOctober/electricityTrend.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
img/dataAnalysisOctober/energyConsumption.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

BIN
img/dataAnalysisOctober/waterStatistics.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
img/dataAnalysisOctober/waterTrend.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

504
js/pages/dataAnalysisOctober/energySavingAnalysis.js Normal file
View File

@ -0,0 +1,504 @@
let table, layer, form;
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
const bidCode = parent.$('#bidPro').val();
layui.use(["layer", "table", "form"], function () {
layer = layui.layer;
table = layui.table;
form = layui.form;
getElectricityStatistics();
getWaterStatistics()
getWaterTrend();
getElectricityTrend();
});
function getElectricityStatistics() {
initElectricityStatisticsChart()
}
function getWaterStatistics() {
initWaterStatisticsChart()
}
function initElectricityStatisticsChart() {
const electricityStatistics = echarts.init(document.getElementById("electricityStatistics"));
const option = {
tooltip: {
trigger: "item",
formatter: "{b}: {c}kWh ({d}%)",
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "#08DCE0",
borderWidth: 1,
textStyle: {
color: "#fff",
},
},
legend: {
orient: "vertical",
right: "20%",
top: "25%",
itemGap: 30,
itemWidth: 20,
itemHeight: 8,
textStyle: {
color: "#fff",
fontSize: 14,
rich: {
name: {
width: 30,
color: "#fff",
},
value: {
width: 60,
align: "right",
color: "#79FFFF",
fontSize: 16,
fontWeight: "bold",
},
},
},
formatter: (name) => {
const data = option.series[0].data
const item = data.find((d) => d.name === name)
const percent = item ? item.value : 0
return `{name|${name}} {value|${percent}%}`
},
},
series: [
{
name: "用电统计",
type: "pie",
radius: [0, '60%'],
center: ["30%", "55%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 5,
borderColor: "rgba(0, 0, 0, 0.3)",
borderWidth: 2,
shadowBlur: 10,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
itemStyle: {
shadowBlur: 20,
shadowOffsetX: 0,
shadowColor: "rgba(8, 220, 224, 0.8)",
},
},
labelLine: {
show: false,
},
data: [
{
value: 60,
name: "A区",
itemStyle: {
color: '#75F7EC',
},
},
{
value: 60,
name: "B区",
itemStyle: {
color: '#75F791',
},
},
{
value: 26,
name: "C区",
itemStyle: {
color: '#00C3F2',
},
},
{
value: 14,
name: "D区",
itemStyle: {
color: '#EB846A',
},
},
],
},
],
}
electricityStatistics.setOption(option)
}
function initWaterStatisticsChart() {
const waterStatistics = echarts.init(document.getElementById("waterStatistics"));
const option = {
tooltip: {
trigger: "item",
formatter: "{b}: {c}kWh ({d}%)",
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "#08DCE0",
borderWidth: 1,
textStyle: {
color: "#fff",
},
},
legend: {
orient: "vertical",
right: "20%",
top: "25%",
itemGap: 30,
itemWidth: 20,
itemHeight: 8,
textStyle: {
color: "#fff",
fontSize: 14,
rich: {
name: {
width: 30,
color: "#fff",
},
value: {
width: 60,
align: "right",
color: "#79FFFF",
fontSize: 16,
fontWeight: "bold",
},
},
},
formatter: (name) => {
const data = option.series[0].data
const item = data.find((d) => d.name === name)
const percent = item ? item.value : 0
return `{name|${name}} {value|${percent}%}`
},
},
series: [
{
name: "用电统计",
type: "pie",
radius: [0, '60%'],
center: ["30%", "55%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 5,
borderColor: "rgba(0, 0, 0, 0.3)",
borderWidth: 2,
shadowBlur: 10,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
itemStyle: {
shadowBlur: 20,
shadowOffsetX: 0,
shadowColor: "rgba(8, 220, 224, 0.8)",
},
},
labelLine: {
show: false,
},
data: [
{
value: 60,
name: "A区",
itemStyle: {
color: '#75F7EC',
},
},
{
value: 60,
name: "B区",
itemStyle: {
color: '#75F791',
},
},
{
value: 26,
name: "C区",
itemStyle: {
color: '#00C3F2',
},
},
{
value: 14,
name: "D区",
itemStyle: {
color: '#EB846A',
},
},
],
},
],
}
waterStatistics.setOption(option)
}
function getWaterTrend() {
const dates = [
"xxxx-xx-01",
"xxxx-xx-02",
"xxxx-xx-03",
"xxxx-xx-04",
"xxxx-xx-05",
"xxxx-xx-06",
"xxxx-xx-07",
"xxxx-xx-08",
]
const waterData = [4.2, 3.3, 3.1, 2.8, 3.0, 3.2, 3.3, 2.1]
initWaterTrend(dates, waterData);
}
function initWaterTrend(dates, waterData) {
const waterTrend = echarts.init(document.getElementById("waterTrend"));
const option = {
grid: {
left: "5%",
right: "8%",
top: "25%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "category",
data: dates,
boundaryGap: false,
axisLine: {
lineStyle: {
color: "rgba(8, 220, 224, 0.3)",
},
},
axisLabel: {
color: "rgba(255, 255, 255, 0.6)",
fontSize: 11,
rotate: 0,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
yAxis: {
type: "value",
min: 0,
max: 5,
interval: 1,
axisLine: {
show: false,
},
axisLabel: {
color: "rgba(255, 255, 255, 0.6)",
fontSize: 12,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "rgba(8, 220, 224, 0.15)",
type: "dashed",
},
},
},
series: [
{
name: "用水量",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 6,
data: waterData,
lineStyle: {
color: "#08DCE0",
width: 2,
},
itemStyle: {
color: "#08DCE0",
borderColor: "#08DCE0",
borderWidth: 2,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(8, 220, 224, 0.3)",
},
{
offset: 1,
color: "rgba(8, 220, 224, 0.05)",
},
]),
},
emphasis: {
itemStyle: {
color: "#08DCE0",
borderColor: "#fff",
borderWidth: 2,
shadowBlur: 10,
shadowColor: "rgba(8, 220, 224, 0.8)",
},
},
},
],
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0, 20, 40, 0.9)",
borderColor: "#08DCE0",
borderWidth: 1,
textStyle: {
color: "#fff",
},
axisPointer: {
type: "line",
lineStyle: {
color: "rgba(8, 220, 224, 0.5)",
type: "dashed",
},
},
},
}
waterTrend.setOption(option)
}
function getElectricityTrend() {
const dates = [
"xxxx-xx-01",
"xxxx-xx-02",
"xxxx-xx-03",
"xxxx-xx-04",
"xxxx-xx-05",
"xxxx-xx-06",
"xxxx-xx-07",
"xxxx-xx-08",
]
const electricityData = [4.2, 3.3, 3.1, 2.8, 3.0, 3.2, 3.3, 2.1]
initElectricityTrend(dates, electricityData);
}
function initElectricityTrend(dates, electricityData) {
const waterTrend = echarts.init(document.getElementById("electricityTrend"));
const option = {
grid: {
left: "5%",
right: "8%",
top: "25%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "category",
data: dates,
boundaryGap: false,
axisLine: {
lineStyle: {
color: "rgba(8, 220, 224, 0.3)",
},
},
axisLabel: {
color: "rgba(255, 255, 255, 0.6)",
fontSize: 11,
rotate: 0,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
yAxis: {
type: "value",
min: 0,
max: 5,
interval: 1,
axisLine: {
show: false,
},
axisLabel: {
color: "rgba(255, 255, 255, 0.6)",
fontSize: 12,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "rgba(8, 220, 224, 0.15)",
type: "dashed",
},
},
},
series: [
{
name: "用水量",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 6,
data: electricityData,
lineStyle: {
color: "#08DCE0",
width: 2,
},
itemStyle: {
color: "#08DCE0",
borderColor: "#08DCE0",
borderWidth: 2,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(8, 220, 224, 0.3)",
},
{
offset: 1,
color: "rgba(8, 220, 224, 0.05)",
},
]),
},
emphasis: {
itemStyle: {
color: "#08DCE0",
borderColor: "#fff",
borderWidth: 2,
shadowBlur: 10,
shadowColor: "rgba(8, 220, 224, 0.8)",
},
},
},
],
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0, 20, 40, 0.9)",
borderColor: "#08DCE0",
borderWidth: 1,
textStyle: {
color: "#fff",
},
axisPointer: {
type: "line",
lineStyle: {
color: "rgba(8, 220, 224, 0.5)",
type: "dashed",
},
},
},
}
waterTrend.setOption(option)
}

171
pages/dataAnalysisOctober/energySavingAnalysis.html Normal file
View File

@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../css/font.css">
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
<link rel="stylesheet" href="../../css/dataAnalysis/dataAnalysis.css">
<link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
<link rel="stylesheet" href="../../css/coreTable.css"/>
<link rel="stylesheet" href="../../css/accessMge/accessMge.css">
<script src="../../js/publics/sm4.js" type="text/javascript"></script>
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="../../js/publics/public.js"></script>
<script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
<script src="../../js/publics/4.3.0/echarts.min.js"></script>
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
<script src="../../js/publics/aescbc.js"></script>
<script src="../../js/publics/sm3.js"></script>
<script src="../../api/commonRequest.js"></script>
<style>
#proQuality {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.left-box {
width: 49.5%;
hegiht: 100%;
display: flex;
flex-direction: column;
}
.right-box {
margin-left: 1%;
width: 49.5%;
hegiht: 100%;
display: flex;
flex-direction: column;
}
.electricityStatistics {
background: url("../../img/dataAnalysisOctober/electricityStatistics.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
width: 100%;
height: 33%;
}
.electricityTrend{
background: url("../../img/dataAnalysisOctober/electricityTrend.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
width: 100%;
height: 33%;
margin-top: 2%;
}
.waterTrend{
background: url("../../img/dataAnalysisOctober/waterTrend.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
width: 100%;
height: 32%;
margin-top: 2%;
}
.waterStatistics{
background: url("../../img/dataAnalysisOctober/waterStatistics.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
width: 100%;
height: 33%;
}
.energyConsumption{
background: url("../../img/dataAnalysisOctober/energyConsumption.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
width: 100%;
height: 66%;
margin-top: 2%;
}
.optimization-card {
padding: 15px 20px;
margin-top: 2%;
box-shadow: 0px 0px 4px 0px rgba(8,220,224,0.8);
border-radius: 2px 2px 2px 2px;
}
.optimization-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.optimization-card-title {
font-size: 15px;
color: #ffffff;
font-weight: 500;
}
.optimization-card-time {
font-size: 12px;
color: #FFFFFF;
}
.optimization-card-description {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}
</style>
</head>
<body >
<div id="proQuality">
<div class="left-box">
<div class="electricityStatistics">
<div style="height: 100%;width: 100%;" id="electricityStatistics"></div>
</div>
<div class="waterTrend">
<div style="height: 100%;width: 100%;" id="waterTrend"></div>
</div>
<div class="electricityTrend">
<div style="height: 100%;width: 100%;" id="electricityTrend"></div>
</div>
</div>
<div class="right-box">
<div class="waterStatistics">
<div style="height: 100%;width: 100%;" id="waterStatistics"></div>
</div>
<div class="energyConsumption">
<div style="width: 96%;height: 89%;margin-top: 6%;margin-left: 2%;">
<div class="optimization-card">
<div class="optimization-card-header">
<div class="optimization-card-title">用电量飙升提醒</div>
<div class="optimization-card-time">2025-08-18 10:32:17</div>
</div>
<div class="optimization-card-description">
办公区用电同比昨日增加30%，建议关闭无人房间的空调，节约用电。
</div>
</div>
<div class="optimization-card">
<div class="optimization-card-header">
<div class="optimization-card-title">用水量飙升提醒</div>
<div class="optimization-card-time">2025-08-18 10:32:17</div>
</div>
<div class="optimization-card-description">
办公区用水同比昨日增加30%，建议检查是否有阀门忘记关闭，节约用水。
</div>
</div>
<div class="optimization-card">
<div class="optimization-card-header">
<div class="optimization-card-title">用水量飙升提醒</div>
<div class="optimization-card-time">2025-08-18 10:32:17</div>
</div>
<div class="optimization-card-description">
办公区用水同比昨日增加30%，建议检查是否有阀门忘记关闭，节约用水。
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../js/pages/dataAnalysisOctober/energySavingAnalysis.js" type="text/javascript"></script>
</html>

3
pages/dataAnalysisOctober/proQualityAnalysis.html
View File

@ -21,9 +21,6 @@
<script src="../../api/commonRequest.js"></script>
<title>工程质量分析</title>
</head>
<script type="text/javascript">
let text = nickName + "\r\n" + roleName + "\r\n" + '建设部';
</script>
<body>
<div id="proQuality">

3
pages/dataAnalysisOctober/resourceRateAnalysis.html
View File

@ -20,9 +20,6 @@
<script src="../../api/commonRequest.js"></script>
<title>资源利用率分析</title>
</head>
<script type="text/javascript">
let text = nickName + "\r\n" + roleName + "\r\n" + '建设部';
</script>
<style>
#proQuality {