Skip to content

W
web-project
Commit 9853fbaa authored by qjeslks's avatar qjeslks
Browse files
Options

Merge branch 'master' of https://gitee.com/tj-wang-yahui/AMS_HeatSys_Vue_V10

parents 85b3fe0f e05469f2
Hide whitespace changes
Inline Side-by-side
Showing with 245 additions and 84 deletions
src/views/HandlerPage/EnergyConsumptionPage.vue
View file @ 9853fbaa
<template>
<div class="contentBlock" id="contentBlock">
<div
class="contentBlock"
id="contentBlock"
v-loading.fullscreen.lock="fullscreenLoading"
element-loading-background="rgba(122, 122, 122, 0.6)"
>
<el-card class="card-contianer">
<el-form
:inline="true"
......@@ -16,7 +21,7 @@
inactive-text="实时排行"
style="
--el-switch-on-color: #13ce66;
--el-switch-off-color: #ff4949;
--el-switch-off-color: #6589ff;
min-width: 130px;
"
@change="changeFun"
......@@ -94,14 +99,12 @@
<el-checkbox name="type" label="民建">民建 </el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary" style="min-width: 70px" @click="sendClick"
>查询</el-button
<div style="position: absolute; top: 25px; right: 2%">
<el-button type="primary" @click="sendClick">查询</el-button
><el-button type="primary" @click="exportTableToExcel"
>导出表格</el-button
>
</el-form-item>
<el-form-item>
<el-button type="primary" style="min-width: 70px">导出表格</el-button>
</el-form-item>
</div>
</el-form>
<div class="titInfoBlock">
<table class="titBlock" style="width: 98%; margin: 0; padding: 0">
......@@ -123,15 +126,14 @@
<div class="tit">民建换热站</div>
<div class="left">
<div>
<span>{{ overviewList.civilCount }}</span
>座
<span>{{ overviewList.civilCount }}</span> 座
</div>
<div class="sub">机组数量</div>
</div>
<div class="right">
<div>
<span>{{ (overviewList.civilArea / 10000).toFixed(2) }}</span
>万平米
<span>{{ (overviewList.civilArea / 10000).toFixed(2) }}</span>
万平米
</div>
<div class="sub">供热面积</div>
</div>
......@@ -146,15 +148,14 @@
<div class="tit">公建换热站</div>
<div class="left">
<div>
<span>{{ overviewList.pbCount }}</span
>座
<span>{{ overviewList.pbCount }}</span> 座
</div>
<div class="sub">机组数量</div>
</div>
<div class="right">
<div>
<span>{{ (overviewList.pbArea / 10000).toFixed(2) }}</span
>万平米
<span>{{ (overviewList.pbArea / 10000).toFixed(2) }}</span>
万平米
</div>
<div class="sub">供热面积</div>
</div>
......@@ -169,15 +170,15 @@
<div class="tit">热量消耗</div>
<div class="left">
<div>
<span>{{ (overviewList.totalHeat / 10000).toFixed(2) }}</span
>GJ
<span>{{ (overviewList.totalHeat / 10000).toFixed(2) }}</span>
GJ
</div>
<div class="sub">热总耗</div>
</div>
<div class="right">
<div>
<span>{{ (overviewList.heatUc / 10000).toFixed(2) }}</span
>W/㎡
<span>{{ (overviewList.heatUc / 10000).toFixed(2) }}</span>
W/㎡
</div>
<div class="sub">热单耗</div>
</div>
......@@ -192,15 +193,15 @@
<div class="tit">电量消耗</div>
<div class="left">
<div>
<span>{{ (overviewList.totalElec / 10000).toFixed(2) }}</span
>A
<span>{{ (overviewList.totalElec / 10000).toFixed(2) }}</span>
A
</div>
<div class="sub">电总耗</div>
</div>
<div class="right">
<div>
<span>{{ (overviewList.elecUc / 10000).toFixed(2) }}</span
>Kwh/㎡
<span>{{ (overviewList.elecUc / 10000).toFixed(2) }}</span>
Kwh/㎡
</div>
<div class="sub">电单耗</div>
</div>
......@@ -215,15 +216,17 @@
<div class="tit">水量消耗</div>
<div class="left">
<div>
<span>{{ (overviewList.totalWater / 10000).toFixed(2) }}</span
>T
<span>{{
(overviewList.totalWater / 10000).toFixed(2)
}}</span>
T
</div>
<div class="sub">水总耗</div>
</div>
<div class="right">
<div>
<span>{{ (overviewList.waterUc / 10000).toFixed(2) }}</span
>kg/㎡
<span>{{ (overviewList.waterUc / 10000).toFixed(2) }}</span>
kg/㎡
</div>
<div class="sub">水单耗</div>
</div>
......@@ -245,7 +248,7 @@
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
<th>热单耗(W/㎡)</th>
</tr>
<tr v-for="item in topHeatUCList.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
......@@ -267,7 +270,7 @@
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
<th>热耗(W/(㎡×℃))</th>
</tr>
<tr v-for="item in topDayHeatUC.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
......@@ -289,7 +292,7 @@
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
<th>水单耗(Kg/㎡)</th>
</tr>
<tr v-for="item in topWaterUC.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
......@@ -311,7 +314,7 @@
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
<th>电单耗(Kwh/㎡)</th>
</tr>
<tr v-for="item in topElecUC.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
......@@ -333,7 +336,7 @@
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
<th>一网回温(℃)</th>
</tr>
<tr v-for="item in topElecUC.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
......@@ -355,7 +358,7 @@
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
<th>流量(t/h/万㎡)</th>
</tr>
<tr v-for="item in topFirsFlow.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
......@@ -377,7 +380,7 @@
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
<th>热效率</th>
</tr>
<tr v-for="item in topFirsFlow.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
......@@ -399,7 +402,7 @@
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
<th>板换效率(%)</th>
</tr>
<tr v-for="item in topBHXLXJ1.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
......@@ -421,7 +424,7 @@
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
<th>二网均温(℃)</th>
</tr>
<tr
v-for="item in topSecondTempAvg.value"
......@@ -446,7 +449,7 @@
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
<th>二网温差(℃)</th>
</tr>
<tr
v-for="item in topSecondTempAvg.value"
......@@ -471,7 +474,7 @@
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
<th>二网瞬时(t/h)</th>
</tr>
<tr
v-for="item in topSecondTempAvg.value"
......@@ -496,7 +499,7 @@
<th>排名</th>
<th>供热站名称</th>
<th>机组名称</th>
<th>数据</th>
<th>流量(t/h/万㎡)</th>
</tr>
<tr
v-for="item in topSecondTempAvg.value"
......@@ -604,6 +607,7 @@ const topFirsFlow = reactive({});
const topBHXL = reactive({});
const topBHXLXJ1 = reactive({});
const topSecondTempAvg = reactive({});
const fullscreenLoading = ref(false);
const rules = {
transferId: [{ required: true, message: "请选择换热机组", trigger: "blur" }],
startTime: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
......@@ -669,13 +673,14 @@ function timeFun() {
//换热站机组排名页概况
function postOverviewFun(enertySend) {
fullscreenLoading.value = true;
postOverview(enertySend).then((res) => {
if (res.success === true) {
overviewList.value = res.data[0];
console.log(overviewList);
} else {
ElMessage.error(res.message);
}
fullscreenLoading.value = false;
});
}
......
src/views/HandlerPage/TransferEnergyView.vue
View file @ 9853fbaa
<template>
<div class="contentBlock" id="contentBlock">
<div
class="contentBlock"
id="contentBlock"
v-loading.fullscreen.lock="fullscreenLoading"
element-loading-background="rgba(122, 122, 122, 0.6)"
>
<el-card class="card-contianer">
<el-form
:inline="true"
:model="enertyInfo"
class="demo-form-inline"
:rules="rules"
ref="formRef"
label-position="top"
>
<el-form-item>
<el-switch
v-model="switchV"
active-text="表格"
inactive-text="曲线图"
style="
--el-switch-on-color: #13ce66;
--el-switch-off-color: #6589ff;
min-width: 130px;
margin: 12% 0 0 0;
"
@change="changeFun"
/>
</el-form-item>
<el-form-item label="换热机组：" prop="transferId">
<el-cascader
:options="options"
......@@ -17,7 +36,6 @@
clearable
:show-all-levels="false"
placeholder="请选择"
style="width: 220px"
@change="transferIdChange"
/>
</el-form-item>
......@@ -27,7 +45,6 @@
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择开始时间"
style="width: 180px"
v-model="enertyInfo.startTime"
/>
</el-config-provider>
......@@ -38,7 +55,6 @@
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择结束时间"
style="width: 180px"
v-model="enertyInfo.endTime"
/>
</el-config-provider>
......@@ -47,7 +63,7 @@
<el-select
v-model="enertyInfo.interval"
placeholder="请选择"
style="min-width: 80px"
style="width: 80px"
>
<el-option label="小时" :value="0" />
<el-option label="日" :value="1" />
......@@ -59,8 +75,8 @@
<el-select
v-model="enertyInfo.type"
placeholder="请选择"
style="min-width: 150px"
@change="selTypeChange"
style="width: 130px"
>
<!-- <el-option label="用量环比" :value="0" /> -->
<el-option label="热单耗" :value="1" />
......@@ -75,39 +91,37 @@
<el-option label="二网均温" :value="10" /> -->
</el-select>
</el-form-item>
<el-form-item label="用量环比类型" v-show="energyTypeDis">
<!-- <el-form-item label="用量环比类型" v-show="energyTypeDis">
<el-select
v-model="enertyInfo.energyType"
placeholder="请选择"
style="min-width: 80px"
>
<el-option label="耗水" :value="2" />
<el-option label="耗热" :value="3" />
<el-option label="耗电" :value="4" />
</el-select>
</el-form-item>
<!-- 控制表格和图表的开关 -->
<el-form-item>
<el-switch
v-model="switchV"
active-text="表格"
inactive-text="曲线图"
style="
--el-switch-on-color: #13ce66;
--el-switch-off-color: #ff4949;
min-width: 130px;
"
@change="changeFun"
/>
</el-form-item> -->
<!-- <el-form-item>
<el-button type="primary" @click="sendClick" style="margin: 15px 0 0 0;">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" style="min-width: 70px" @click="sendClick"
<el-button type="primary" @click="exportTableToExcel" style="margin: 15px 0 0 0;"
>导出表格</el-button
>
</el-form-item> -->
<div style="position: absolute; right: 2%">
<el-button
type="primary"
@click="sendClick"
style="margin: 15px 0 0 0"
>查询</el-button
><el-button
type="primary"
@click="exportTableToExcel"
style="margin: 15px 0 0 10px"
>导出表格</el-button
>
</el-form-item>
<el-form-item>
<el-button type="primary" style="min-width: 70px">导出表格</el-button>
</el-form-item>
</div>
</el-form>
</el-card>
<div v-show="switchV">
......@@ -124,14 +138,12 @@
/>
<el-table-column prop="gatherTime" label="时间" />
<el-table-column prop="temperature" label="平均温度" />
<el-table-column prop="uc" :label="enertyTab" />
</el-table>
</div>
<div v-show="!switchV" id="echartsLayerBlock">
<div class="echartsLayer" id="echartsLayer"></div>
</div>
<!-- <div v-show="!nodata">
<el-empty :image-size="200" description="暂无数据" />
</div> -->
</div>
</template>
<script setup>
......@@ -141,6 +153,8 @@ import * as echarts from "echarts";
import http from "../../api/http";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { ElMessage } from "element-plus";
import { saveAs } from "file-saver";
import XLSX from "xlsx-js-style";
import {
postQOQlist,
postHeatUct,
......@@ -156,7 +170,7 @@ import {
const options = reactive([]);
const enterpriseId = ref();
const props = { multiple: true, emitPath: false };
const switchV = ref(false); //控制表格和图表的开关
const switchV = ref(false);
const echartF = ref(false);
const nodata = ref(false);
const tableData = reactive([]);
......@@ -170,13 +184,15 @@ const computedWidth = ref("1200px");
const computedHeight = ref("500px");
const formRef = ref(null);
const company = ref("W/㎡");
const enertyTab = ref("能耗值");
const fullscreenLoading = ref(false);
const enertyInfo = reactive({
supplyId: null,
transferId: [],
startTime: null,
endTime: null,
energyType: 3,
interval: 2,
interval: 0,
type: 1,
});
const enertyInfoStyle = reactive(0);
......@@ -202,6 +218,113 @@ function transferIdChange() {
}
}
function exportTableToExcel() {
const worksheet = XLSX.utils.json_to_sheet(tableData);
const workbook = XLSX.utils.book_new();
XLSX.utils.sheet_add_aoa(
worksheet,
[["换热站机组名称", "时间", "平均温度", enertyTab.value]],
{
origin: "A1",
}
);
worksheet["!cols"] = [{ wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }];
// worksheet["!rows"] = [{ hpx: 20 }];
worksheet["A1"].s = {
fill: {
fgColor: { rgb: "0097d5fd" },
},
};
worksheet["B1"].s = {
fill: {
fgColor: { rgb: "0097d5fd" },
},
};
worksheet["C1"].s = {
fill: {
fgColor: { rgb: "0097d5fd" },
},
};
worksheet["D1"].s = {
fill: {
fgColor: { rgb: "0097d5fd" },
},
};
XLSX.utils.book_append_sheet(workbook, worksheet, "换热站趋势");
const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
const dataBlob = new Blob([excelBuffer], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
});
const downloadUrl = URL.createObjectURL(dataBlob);
saveAs(dataBlob, "tableData.xlsx");
ElMessage.success("导出成功！请稍后。。。");
}
function timeFun() {
var date = new Date();
var year = date.getFullYear();
var dateArr = [
date.getMonth() + 1,
date.getDate(),
date.getHours(),
date.getMinutes(),
date.getSeconds(),
];
var startTimeDay = parseInt(dateArr[1] - 2);
var endTimeDay = parseInt(dateArr[1] - 1);
if (startTimeDay < 10) {
startTimeDay = "0" + startTimeDay;
}
if (endTimeDay < 10) {
endTimeDay = "0" + endTimeHour;
}
if (dateArr[0] < 10) {
dateArr[0] = "0" + dateArr[0];
}
if (dateArr[1] < 10) {
dateArr[1] = "0" + dateArr[0];
}
if (dateArr[2] < 10) {
dateArr[2] = "0" + dateArr[0];
}
if (dateArr[3] < 10) {
dateArr[3] = "0" + dateArr[3];
}
if (dateArr[4] < 10) {
dateArr[4] = "0" + dateArr[4];
}
let startTimes =
year +
"-" +
dateArr[0] +
"-" +
startTimeDay +
" " +
"00" +
":" +
"00" +
":" +
"00";
let endTimes =
year +
"-" +
dateArr[0] +
"-" +
dateArr[1] +
" " +
"00" +
":" +
"00" +
":" +
"00";
enertyInfo.startTime = startTimes;
enertyInfo.endTime = endTimes;
}
//获取换热机组列表
function getSupplys() {
var result = store.getters.getEnterprise();
......@@ -235,6 +358,7 @@ function getSupplys() {
}
});
}
enertyInfo.transferId.push(options[0].children[0].children[0].value);
}
function sendClick() {
......@@ -279,6 +403,7 @@ function sendClick() {
postSecAvgTUcFun(); //换热站二网均温
break;
}
enertyTab.value = "能耗值(" + company.value + ")";
} else {
console.log("验证失败");
return false;
......@@ -286,8 +411,6 @@ function sendClick() {
});
}
function delJson() {}
function selTypeChange() {
if (enertyInfo.type == 0) {
energyTypeDis.value = true;
......@@ -334,6 +457,7 @@ function postHeatUctFun() {
endTime: "2024-10-30 00:00:00",
interval: 2,
};
fullscreenLoading.value = true;
postHeatUct(enertyInfo).then((res) => {
echarts.dispose(document.getElementById("echartsLayer"));
// postHeatUct(params).then((res) => {
......@@ -343,12 +467,14 @@ function postHeatUctFun() {
tabloading.value = false;
ElMessage.error(res.message);
}
fullscreenLoading.value = false;
});
}
//换热站机组能耗数据接口（电单耗）
function postElecUcFun() {
tabloading.value = true;
fullscreenLoading.value = true;
postElecUc(enertyInfo).then((res) => {
echarts.dispose(document.getElementById("echartsLayer"));
if (res.success === true) {
......@@ -357,12 +483,14 @@ function postElecUcFun() {
tabloading.value = false;
ElMessage.error(res.message);
}
fullscreenLoading.value = false;
});
}
//换热站机组能耗数据接口（水单耗）
function postWaterUcFun() {
tabloading.value = true;
fullscreenLoading.value = true;
postWaterUc(enertyInfo).then((res) => {
echarts.dispose(document.getElementById("echartsLayer"));
if (res.success === true) {
......@@ -371,12 +499,14 @@ function postWaterUcFun() {
tabloading.value = false;
ElMessage.error(res.message);
}
fullscreenLoading.value = false;
});
}
//换热站机组能耗数据接口（度日数热耗）
function postDayHeatFun() {
tabloading.value = true;
fullscreenLoading.value = true;
postDayHeat(enertyInfo).then((res) => {
echarts.dispose(document.getElementById("echartsLayer"));
if (res.success === true) {
......@@ -385,12 +515,14 @@ function postDayHeatFun() {
tabloading.value = false;
ElMessage.error(res.message);
}
fullscreenLoading.value = false;
});
}
//换热站机组能耗数据接口（一网回温）
function postFirBackTFun() {
tabloading.value = true;
fullscreenLoading.value = true;
postFirBackT(enertyInfo).then((res) => {
echarts.dispose(document.getElementById("echartsLayer"));
if (res.success === true) {
......@@ -399,6 +531,7 @@ function postFirBackTFun() {
tabloading.value = false;
ElMessage.error(res.message);
}
fullscreenLoading.value = false;
});
}
......@@ -455,6 +588,7 @@ function pageInitFun(res) {
transferName: element.transferName,
gatherTime: element.gatherTime,
temperature: element.temperature,
uc: parseFloat(element.uc).toFixed(2),
};
tableData.push(tableArr);
});
......@@ -569,12 +703,26 @@ function dataDeal(data) {
function echartInit() {
var chartDom = document.getElementById("echartsLayer");
var myChart = echarts.init(chartDom);
var option;
myChart.resize({ width: computedWidth.value, height: computedHeight.value });
// var company = "T";
option = {
color: ["#91cc75", "#fac858", "#5470c6", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#ea7ccc", "#766451", "#cba1ff", "#470c66"],
color: [
"#91cc75",
"#fac858",
"#5470c6",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#ea7ccc",
"#766451",
"#cba1ff",
"#470c66",
],
title: {
text: "换热站趋势图",
top: 0,
......@@ -638,20 +786,23 @@ function changeFun() {
var divWidth = document.getElementById("contentBlock").offsetWidth;
var divHeight = document.getElementById("contentBlock").scrollHeight;
computedWidth.value = divWidth + "px";
computedHeight.value = divHeight * 0.6 + "px";
computedHeight.value = divHeight * 0.75 + "px";
echartInit();
}
onMounted(() => {
//postHeatUctFun();
timeFun();
getEnterprise();
getSupplys();
setContentHeight();
window.addEventListener("resize", setContentHeight);
switchV.value = true;
sendClick();
window.addEventListener("resize", function () {
location.reload();
});
});
onUnmounted(() => {
window.removeEventListener("resize", setContentHeight);
window.removeEventListener("resize");
});
</script>
<style lang="less" scoped>
......@@ -661,16 +812,20 @@ onUnmounted(() => {
left: 0;
right: 0;
bottom: 0;
background-color: #ffffff;
}
.el-form--inline .el-form-item {
margin-right: 10px;
}
.el-form-item {
margin: 5px 5px 10px !important;
margin: 5px !important;
}
.echartsLayer {
width: 100%;
margin: 2% auto 0;
}
.el-form-item__content {
align-items: right !important;
}
</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