Skip to content

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

热量分析报表

parent 48093847
Show whitespace changes
Inline Side-by-side
Showing with 389 additions and 150 deletions
src/views/Report/HeatAnalysisPage.vue
View file @ 346ea3ea
<template> <template>
<div class="contentBlock">
<div class="contentBlockInn">
<el-card class="card-contianer"> <el-card class="card-contianer">
<div class="div-header"> <table cellpadding="0" cellspacing="0">
<el-form-item label="换热机组："> <tr>
<el-cascader collapse-tags clearable :show-all-levels="false" <th width="25%"><span>2024-07-05 17:13:28 起始时间</span></th>
placeholder="请选择" style="min-width: 210px;" /> <th width="25%">
</el-form-item> 记录时间&nbsp;&nbsp;<el-config-provider :locale="zhCn">
<el-form-item label="开始时间："> <el-date-picker
<el-config-provider :locale="zhCn"> type="datetime"
<el-date-picker type="datetime" value-format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择开始时间" style="min-width: 180px;" /> <!-- 日期时间格式 2024-01-01 00:00:00--> placeholder="选择开始时间"
style="width: 180px"
v-model="enertyInfo.startTime"
/>
</el-config-provider> </el-config-provider>
</el-form-item> </th>
<el-form-item label="结束时间："> <th width="25%"></th>
<el-config-provider :locale="zhCn"> <th>
<el-date-picker type="datetime" value-format="YYYY-MM-DD HH:mm:ss" <el-button
placeholder="选择结束时间" style="min-width: 180px;" /> type="primary"
</el-config-provider> style="min-width: 70px"
</el-form-item> @click="sendClick"
<el-form-item label="时间间隔"> >历史查询</el-button
<el-select placeholder="近24小时" style="min-width: 105px" clearable> >
<el-option label="近24小时" :value=0 /> </th>
<el-option label="度日单耗" :value=1 /> </tr>
<el-option label="周单耗" :value=2 /> </table>
<el-option label="月单耗" :value=3 /> <table
<el-option label="总量" :value=4 /> cellpadding="0"
</el-select> cellspacing="1"
</el-form-item> style="margin-top: 10px; background-color: #ebeef5"
<el-form-item label="能耗类型"> >
<el-select placeholder="耗热" style="min-width: 105px" clearable> <tr>
<el-option label="耗热" :value=0 /> <th rowspan="8">00:00-24:00<br />数据分析</th>
<el-option label="耗电" :value=1 /> <th>白天</th>
<el-option label="耗水" :value=2 /> <th>01:00</th>
</el-select> <th>02:00</th>
</el-form-item> <th>03:00</th>
<el-form-item> <th>04:00</th>
<el-button type="primary" style="min-width: 70px;">查询</el-button> <th>05:00</th>
</el-form-item> <th>06:00</th>
<el-form-item> <th>07:00</th>
<el-button type="primary" style="min-width: 70px;">导出表格</el-button> <th>08:00</th>
</el-form-item> <th>09:00</th>
</div> <th>10:00</th>
</el-card> <th>11:00</th>
<el-card style="width: 1700px; height: 100%;"> <th>12:00</th>
<div id="h-chart" style="height: 800px; background: white; flex: 1;padding-top:15px;"></div> <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> </el-card>
</div>
</div>
</template> </template>
<script setup> <script setup>
import * as echarts from 'echarts'; import { ref, reactive, onMounted, onUnmounted } from "vue";
import { ref, onMounted, onUnmounted } from 'vue'; import http from "../../api/http";
var $chart; import zhCn from "element-plus/dist/locale/zh-cn.mjs";
var chartData = { import { ElMessage } from "element-plus";
title: { const enertyInfo = reactive({
text: '换热站热耗（GJ）', endTime: null,
x: '10px', });
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） function timeFun() {
y: '0px', var date = new Date();
// itemGap设置主副标题纵向间隔，单位px，默认为10， var year = date.getFullYear();
itemGap: 20, var dateArr = [
backgroundColor: '#EEE', date.getMonth() + 1,
// 主标题文本样式设置 date.getDate(),
textStyle: { date.getHours(),
fontSize: 16, date.getMinutes(),
fontWeight:'500', date.getSeconds(),
color: '#000000' ];
},
}, var endTimeHour = parseInt(dateArr[2] - 1);
legend: { if (endTimeHour < 10) {
data: ['福合园', '福锦园', '福满园'], endTimeHour = "0" + endTimeHour;
x: 'right', }
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） if (dateArr[0] < 10) {
y: 'top', dateArr[0] = "0" + dateArr[0];
textStyle: { }
color: '#666' // 图例文字颜色 if (dateArr[3] < 10) {
}, dateArr[3] = "0" + dateArr[3];
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
} }
if (dateArr[4] < 10) {
dateArr[4] = "0" + dateArr[4];
} }
}, let endTimes =
xAxis: { year +
type: 'category', "-" +
boundaryGap: false, dateArr[0] +
axisLine: { "-" +
show: false dateArr[1] +
}, " " +
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'] endTimeHour +
}, ":" +
yAxis: { dateArr[3] +
type: 'value', ":" +
axisLine: { dateArr[4];
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']
enertyInfo.endTime = endTimes;
} }
onMounted(() => { onMounted(() => {
$chart = echarts.init(document.getElementById('h-chart')); timeFun();
$chart.setOption(chartData);
}); });
onUnmounted(() => { onUnmounted(() => {
if ($chart) { if ($chart) {
$chart.dispose(); $chart.dispose();
} }
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.contentBlock {
.card-contianer { position: absolute;
width: auto; top: 0;
height: 70px; left: 0;
right: 0;
.div-header { bottom: 0;
background-color: #ffffff;
}
table {
width: 100%; width: 100%;
display: flex;
margin: 20px;
}
} }
table,
.el-form-item { tr,
margin-top: -20px; th,
margin-right: 30px; td {
font-size: 14px;
margin: 0;
padding: 0;
} }
.el-tag--mini { table {
height: 21px !important width: 100%;
} }
.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner{ table th {
height: 33px; //这里高度根据需求自己设定 background-color: #f5f7fa;
text-align: center;
padding: 5px 10px;
} }
.el-cascader__tags { table td {
display: inline-flex; text-align: center;
margin-right: 10px; background-color: #ffffff;
flex-wrap: nowrap; padding: 5px 10px;
} }
</style> </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