Skip to content

W
web-project
Commit 346ea3ea authored by 朱超's avatar 朱超
Browse files
Options

热量分析报表

parent 48093847
Hide whitespace changes
Inline Side-by-side
Showing with 389 additions and 150 deletions
src/views/Report/HeatAnalysisPage.vue
View file @ 346ea3ea
<template>
<el-card class="card-contianer">
<div class="div-header">
<el-form-item label="换热机组：">
<el-cascader collapse-tags clearable :show-all-levels="false"
placeholder="请选择" style="min-width: 210px;" />
</el-form-item>
<el-form-item label="开始时间：">
<el-config-provider :locale="zhCn">
<el-date-picker type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择开始时间" style="min-width: 180px;" /> <!-- 日期时间格式 2024-01-01 00:00:00-->
</el-config-provider>
</el-form-item>
<el-form-item label="结束时间：">
<el-config-provider :locale="zhCn">
<el-date-picker type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择结束时间" style="min-width: 180px;" />
</el-config-provider>
</el-form-item>
<el-form-item label="时间间隔">
<el-select placeholder="近24小时" style="min-width: 105px" clearable>
<el-option label="近24小时" :value=0 />
<el-option label="度日单耗" :value=1 />
<el-option label="周单耗" :value=2 />
<el-option label="月单耗" :value=3 />
<el-option label="总量" :value=4 />
</el-select>
</el-form-item>
<el-form-item label="能耗类型">
<el-select placeholder="耗热" style="min-width: 105px" clearable>
<el-option label="耗热" :value=0 />
<el-option label="耗电" :value=1 />
<el-option label="耗水" :value=2 />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" style="min-width: 70px;">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" style="min-width: 70px;">导出表格</el-button>
</el-form-item>
</div>
</el-card>
<el-card style="width: 1700px; height: 100%;">
<div id="h-chart" style="height: 800px; background: white; flex: 1;padding-top:15px;"></div>
</el-card>
<div class="contentBlock">
<div class="contentBlockInn">
<el-card class="card-contianer">
<table cellpadding="0" cellspacing="0">
<tr>
<th width="25%"><span>2024-07-05 17:13:28 起始时间</span></th>
<th width="25%">
记录时间&nbsp;&nbsp;<el-config-provider :locale="zhCn">
<el-date-picker
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择开始时间"
style="width: 180px"
v-model="enertyInfo.startTime"
/>
</el-config-provider>
</th>
<th width="25%"></th>
<th>
<el-button
type="primary"
style="min-width: 70px"
@click="sendClick"
>历史查询</el-button
>
</th>
</tr>
</table>
<table
cellpadding="0"
cellspacing="1"
style="margin-top: 10px; background-color: #ebeef5"
>
<tr>
<th rowspan="8">00:00-24:00<br />数据分析</th>
<th>白天</th>
<th>01:00</th>
<th>02:00</th>
<th>03:00</th>
<th>04:00</th>
<th>05:00</th>
<th>06:00</th>
<th>07:00</th>
<th>08:00</th>
<th>09:00</th>
<th>10:00</th>
<th>11:00</th>
<th>12:00</th>
<th rowspan="8">
<table
cellpadding="1"
cellspacing="1"
style="background-color: #ebeef5"
>
<tr>
<th>预测室外平均温度(℃)</th>
<td>-1.10</td>
</tr>
<tr>
<th>天津气象局反馈温度(℃)</th>
<td>-1.10</td>
</tr>
<tr>
<th>综合气象温度(℃)</th>
<td>-1.10</td>
</tr>
</table>
</th>
</tr>
<tr>
<td>室外预测值(℃)</td>
<td>01:00</td>
<td>02:00</td>
<td>03:00</td>
<td>04:00</td>
<td>05:00</td>
<td>06:00</td>
<td>07:00</td>
<td>08:00</td>
<td>09:00</td>
<td>10:00</td>
<td>11:00</td>
<td>12:00</td>
</tr>
<tr>
<td>天津气象局反馈温度(℃)</td>
<td>01:00</td>
<td>02:00</td>
<td>03:00</td>
<td>04:00</td>
<td>05:00</td>
<td>06:00</td>
<td>07:00</td>
<td>08:00</td>
<td>09:00</td>
<td>10:00</td>
<td>11:00</td>
<td>12:00</td>
</tr>
<tr>
<td>综合气象温度(℃)</td>
<td>01:00</td>
<td>02:00</td>
<td>03:00</td>
<td>04:00</td>
<td>05:00</td>
<td>06:00</td>
<td>07:00</td>
<td>08:00</td>
<td>09:00</td>
<td>10:00</td>
<td>11:00</td>
<td>12:00</td>
</tr>
<tr>
<th>夜间</th>
<th>13:00</th>
<th>14:00</th>
<th>15:00</th>
<th>16:00</th>
<th>17:00</th>
<th>18:00</th>
<th>19:00</th>
<th>20:00</th>
<th>21:00</th>
<th>22:00</th>
<th>23:00</th>
<th>24:00</th>
</tr>
<tr>
<td>室外预测值(℃)</td>
<td>01:00</td>
<td>02:00</td>
<td>03:00</td>
<td>04:00</td>
<td>05:00</td>
<td>06:00</td>
<td>07:00</td>
<td>08:00</td>
<td>09:00</td>
<td>10:00</td>
<td>11:00</td>
<td>12:00</td>
</tr>
<tr>
<td>天津气象局反馈温度(℃)</td>
<td>01:00</td>
<td>02:00</td>
<td>03:00</td>
<td>04:00</td>
<td>05:00</td>
<td>06:00</td>
<td>07:00</td>
<td>08:00</td>
<td>09:00</td>
<td>10:00</td>
<td>11:00</td>
<td>12:00</td>
</tr>
<tr>
<td>综合气象温度(℃)</td>
<td>01:00</td>
<td>02:00</td>
<td>03:00</td>
<td>04:00</td>
<td>05:00</td>
<td>06:00</td>
<td>07:00</td>
<td>08:00</td>
<td>09:00</td>
<td>10:00</td>
<td>11:00</td>
<td>12:00</td>
</tr>
</table>
<table
cellpadding="0"
cellspacing="1"
style="margin-top: 10px; background-color: #ebeef5"
>
<tr>
<th>地点</th>
<th colspan="2">小计(万吉焦)</th>
<th colspan="2">00:00-04:00</th>
<th colspan="2">04:00-08:00</th>
<th colspan="2">08:00-12:00</th>
<th colspan="2">12:00-16:00</th>
<th colspan="2">16:00-20:00</th>
<th colspan="2">20:00-24:00</th>
</tr>
<tr>
<th>小王庄</th>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
</tr>
<tr>
<th>港东</th>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
</tr>
<tr>
<th>行政</th>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
</tr>
<tr>
<th>福苑</th>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
</tr>
<tr>
<th>重阳里</th>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
</tr>
<tr>
<th>港益(无重阳里)</th>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
</tr>
<tr>
<th>港益(含重阳里)</th>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
<td>0.1131</td>
</tr>
</table>
</el-card>
</div>
</div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, onUnmounted } from 'vue';
var $chart;
var chartData = {
title: {
text: '换热站热耗（GJ）',
x: '10px',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: '0px',
// itemGap设置主副标题纵向间隔，单位px，默认为10，
itemGap: 20,
backgroundColor: '#EEE',
// 主标题文本样式设置
textStyle: {
fontSize: 16,
fontWeight:'500',
color: '#000000'
},
},
legend: {
data: ['福合园', '福锦园', '福满园'],
x: 'right',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: 'top',
textStyle: {
color: '#666' // 图例文字颜色
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
show: false
},
data: ['2024-01-01 01', '2024-01-01 02', '2024-01-01 03', '2024-01-01 04', '2024-01-01 05', '2024-01-01 06', '2024-01-01 07','2024-01-01 08', '2024-01-01 09', '2024-01-01 10', '2024-01-01 11', '2024-01-01 12']
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
},
series: [{
name:'福合园',
data: [820, 932, 901, 934, 1290, 1330, 1320,780,880,560,120,450],
type: 'line',
smooth:true,
symbol:'none'
},
{
name:'福锦园',
data: [720,732, 901, 974, 1290, 1330, 1320,990,1300,1100,880,650],
type: 'line',
smooth:true,
symbol:'none'
},
{
name:'福满园',
data: [920,732, 951, 974, 1090, 930, 1120,1400,1200,1100,1300,890],
type: 'line',
smooth:true,
symbol:'none'
},
],
color:['#0379FF', '#FEA501', '#13E1E1']
}
import { ref, reactive, onMounted, onUnmounted } from "vue";
import http from "../../api/http";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { ElMessage } from "element-plus";
const enertyInfo = reactive({
endTime: null,
});
function timeFun() {
var date = new Date();
var year = date.getFullYear();
var dateArr = [
date.getMonth() + 1,
date.getDate(),
date.getHours(),
date.getMinutes(),
date.getSeconds(),
];
var endTimeHour = parseInt(dateArr[2] - 1);
if (endTimeHour < 10) {
endTimeHour = "0" + endTimeHour;
}
if (dateArr[0] < 10) {
dateArr[0] = "0" + dateArr[0];
}
if (dateArr[3] < 10) {
dateArr[3] = "0" + dateArr[3];
}
if (dateArr[4] < 10) {
dateArr[4] = "0" + dateArr[4];
}
let endTimes =
year +
"-" +
dateArr[0] +
"-" +
dateArr[1] +
" " +
endTimeHour +
":" +
dateArr[3] +
":" +
dateArr[4];
enertyInfo.endTime = endTimes;
}
onMounted(() => {
$chart = echarts.init(document.getElementById('h-chart'));
$chart.setOption(chartData);
timeFun();
});
onUnmounted(() => {
if ($chart) {
$chart.dispose();
}
if ($chart) {
$chart.dispose();
}
});
</script>
<style lang="less" scoped>
.card-contianer {
width: auto;
height: 70px;
.div-header {
width: 100%;
display: flex;
margin: 20px;
}
.contentBlock {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffffff;
}
.el-form-item {
margin-top: -20px;
margin-right: 30px;
table {
width: 100%;
}
table,
tr,
th,
td {
font-size: 14px;
margin: 0;
padding: 0;
}
.el-tag--mini {
height: 21px !important
table {
width: 100%;
}
.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner{
height: 33px; //这里高度根据需求自己设定
table th {
background-color: #f5f7fa;
text-align: center;
padding: 5px 10px;
}
.el-cascader__tags {
display: inline-flex;
margin-right: 10px;
flex-wrap: nowrap;
table td {
text-align: center;
background-color: #ffffff;
padding: 5px 10px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment