Skip to content

W
web-project
Commit 37eeaaab authored by 朱超's avatar 朱超
Browse files
Options

换热站趋势图

parent 80ed63e3
Show whitespace changes
Inline Side-by-side
Showing with 198 additions and 42 deletions
src/views/HandlerPage/TransferEnergyView.vue
View file @ 37eeaaab
<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-button type="primary" @click="sendClick" style="margin: 15px 0 0 0;">查询</el-button>
</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" 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