Skip to content

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

换热站趋势图

parent 80ed63e3
Hide whitespace changes
Inline Side-by-side
Showing with 198 additions and 42 deletions
package.json
View file @ 37eeaaab
...@@ -27,7 +27,8 @@ ...@@ -27,7 +27,8 @@
"vue-router": "^4.3.0", "vue-router": "^4.3.0",
"vue3-smooth-scroll": "^0.8.1", "vue3-smooth-scroll": "^0.8.1",
"vue3-virtual-scroll-list": "^0.2.1", "vue3-virtual-scroll-list": "^0.2.1",
"xlsx": "^0.18.5" "xlsx": "^0.18.5",
"xlsx-js-style": "^1.2.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20.12.7", "@types/node": "^20.12.7",
......
src/views/HandlerPage/TransferEnergyView.vue
View file @ 37eeaaab
<template> <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-card class="card-contianer">
<el-form <el-form
:inline="true" :inline="true"
:model="enertyInfo" :model="enertyInfo"
class="demo-form-inline"
:rules="rules" :rules="rules"
ref="formRef" 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-form-item label="换热机组：" prop="transferId">
<el-cascader <el-cascader
:options="options" :options="options"
...@@ -17,7 +36,6 @@ ...@@ -17,7 +36,6 @@
clearable clearable
:show-all-levels="false" :show-all-levels="false"
placeholder="请选择" placeholder="请选择"
style="width: 220px"
@change="transferIdChange" @change="transferIdChange"
/> />
</el-form-item> </el-form-item>
...@@ -27,7 +45,6 @@ ...@@ -27,7 +45,6 @@
type="datetime" type="datetime"
value-format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择开始时间" placeholder="选择开始时间"
style="width: 180px"
v-model="enertyInfo.startTime" v-model="enertyInfo.startTime"
/> />
</el-config-provider> </el-config-provider>
...@@ -38,7 +55,6 @@ ...@@ -38,7 +55,6 @@
type="datetime" type="datetime"
value-format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择结束时间" placeholder="选择结束时间"
style="width: 180px"
v-model="enertyInfo.endTime" v-model="enertyInfo.endTime"
/> />
</el-config-provider> </el-config-provider>
...@@ -47,7 +63,7 @@ ...@@ -47,7 +63,7 @@
<el-select <el-select
v-model="enertyInfo.interval" v-model="enertyInfo.interval"
placeholder="请选择" placeholder="请选择"
style="min-width: 80px" style="width: 80px"
> >
<el-option label="小时" :value="0" /> <el-option label="小时" :value="0" />
<el-option label="日" :value="1" /> <el-option label="日" :value="1" />
...@@ -59,8 +75,8 @@ ...@@ -59,8 +75,8 @@
<el-select <el-select
v-model="enertyInfo.type" v-model="enertyInfo.type"
placeholder="请选择" placeholder="请选择"
style="min-width: 150px"
@change="selTypeChange" @change="selTypeChange"
style="width: 130px"
> >
<!-- <el-option label="用量环比" :value="0" /> --> <!-- <el-option label="用量环比" :value="0" /> -->
<el-option label="热单耗" :value="1" /> <el-option label="热单耗" :value="1" />
...@@ -75,39 +91,37 @@ ...@@ -75,39 +91,37 @@
<el-option label="二网均温" :value="10" /> --> <el-option label="二网均温" :value="10" /> -->
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="用量环比类型" v-show="energyTypeDis"> <!-- <el-form-item label="用量环比类型" v-show="energyTypeDis">
<el-select <el-select
v-model="enertyInfo.energyType" v-model="enertyInfo.energyType"
placeholder="请选择" placeholder="请选择"
style="min-width: 80px"
> >
<el-option label="耗水" :value="2" /> <el-option label="耗水" :value="2" />
<el-option label="耗热" :value="3" /> <el-option label="耗热" :value="3" />
<el-option label="耗电" :value="4" /> <el-option label="耗电" :value="4" />
</el-select> </el-select>
</el-form-item> </el-form-item> -->
<!-- 控制表格和图表的开关 --> <!-- <el-form-item>
<el-form-item> <el-button type="primary" @click="sendClick" style="margin: 15px 0 0 0;">查询</el-button>
<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-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
><el-button
type="primary"
@click="exportTableToExcel"
style="margin: 15px 0 0 10px"
>导出表格</el-button
> >
</el-form-item> </div>
<el-form-item>
<el-button type="primary" style="min-width: 70px">导出表格</el-button>
</el-form-item>
</el-form> </el-form>
</el-card> </el-card>
<div v-show="switchV"> <div v-show="switchV">
...@@ -124,14 +138,12 @@ ...@@ -124,14 +138,12 @@
/> />
<el-table-column prop="gatherTime" label="时间" /> <el-table-column prop="gatherTime" label="时间" />
<el-table-column prop="temperature" label="平均温度" /> <el-table-column prop="temperature" label="平均温度" />
<el-table-column prop="uc" :label="enertyTab" />
</el-table> </el-table>
</div> </div>
<div v-show="!switchV" id="echartsLayerBlock"> <div v-show="!switchV" id="echartsLayerBlock">
<div class="echartsLayer" id="echartsLayer"></div> <div class="echartsLayer" id="echartsLayer"></div>
</div> </div>
<!-- <div v-show="!nodata">
<el-empty :image-size="200" description="暂无数据" />
</div> -->
</div> </div>
</template> </template>
<script setup> <script setup>
...@@ -141,6 +153,8 @@ import * as echarts from "echarts"; ...@@ -141,6 +153,8 @@ import * as echarts from "echarts";
import http from "../../api/http"; import http from "../../api/http";
import zhCn from "element-plus/dist/locale/zh-cn.mjs"; import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { saveAs } from "file-saver";
import XLSX from "xlsx-js-style";
import { import {
postQOQlist, postQOQlist,
postHeatUct, postHeatUct,
...@@ -156,7 +170,7 @@ import { ...@@ -156,7 +170,7 @@ import {
const options = reactive([]); const options = reactive([]);
const enterpriseId = ref(); const enterpriseId = ref();
const props = { multiple: true, emitPath: false }; const props = { multiple: true, emitPath: false };
const switchV = ref(false); //控制表格和图表的开关 const switchV = ref(false);
const echartF = ref(false); const echartF = ref(false);
const nodata = ref(false); const nodata = ref(false);
const tableData = reactive([]); const tableData = reactive([]);
...@@ -170,13 +184,15 @@ const computedWidth = ref("1200px"); ...@@ -170,13 +184,15 @@ const computedWidth = ref("1200px");
const computedHeight = ref("500px"); const computedHeight = ref("500px");
const formRef = ref(null); const formRef = ref(null);
const company = ref("W/㎡"); const company = ref("W/㎡");
const enertyTab = ref("能耗值");
const fullscreenLoading = ref(false);
const enertyInfo = reactive({ const enertyInfo = reactive({
supplyId: null, supplyId: null,
transferId: [], transferId: [],
startTime: null, startTime: null,
endTime: null, endTime: null,
energyType: 3, energyType: 3,
interval: 2, interval: 0,
type: 1, type: 1,
}); });
const enertyInfoStyle = reactive(0); const enertyInfoStyle = reactive(0);
...@@ -202,6 +218,113 @@ function transferIdChange() { ...@@ -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() { function getSupplys() {
var result = store.getters.getEnterprise(); var result = store.getters.getEnterprise();
...@@ -235,6 +358,7 @@ function getSupplys() { ...@@ -235,6 +358,7 @@ function getSupplys() {
} }
}); });
} }
enertyInfo.transferId.push(options[0].children[0].children[0].value);
} }
function sendClick() { function sendClick() {
...@@ -279,6 +403,7 @@ function sendClick() { ...@@ -279,6 +403,7 @@ function sendClick() {
postSecAvgTUcFun(); //换热站二网均温 postSecAvgTUcFun(); //换热站二网均温
break; break;
} }
enertyTab.value = "能耗值(" + company.value + ")";
} else { } else {
console.log("验证失败"); console.log("验证失败");
return false; return false;
...@@ -286,8 +411,6 @@ function sendClick() { ...@@ -286,8 +411,6 @@ function sendClick() {
}); });
} }
function delJson() {}
function selTypeChange() { function selTypeChange() {
if (enertyInfo.type == 0) { if (enertyInfo.type == 0) {
energyTypeDis.value = true; energyTypeDis.value = true;
...@@ -334,6 +457,7 @@ function postHeatUctFun() { ...@@ -334,6 +457,7 @@ function postHeatUctFun() {
endTime: "2024-10-30 00:00:00", endTime: "2024-10-30 00:00:00",
interval: 2, interval: 2,
}; };
fullscreenLoading.value = true;
postHeatUct(enertyInfo).then((res) => { postHeatUct(enertyInfo).then((res) => {
echarts.dispose(document.getElementById("echartsLayer")); echarts.dispose(document.getElementById("echartsLayer"));
// postHeatUct(params).then((res) => { // postHeatUct(params).then((res) => {
...@@ -343,12 +467,14 @@ function postHeatUctFun() { ...@@ -343,12 +467,14 @@ function postHeatUctFun() {
tabloading.value = false; tabloading.value = false;
ElMessage.error(res.message); ElMessage.error(res.message);
} }
fullscreenLoading.value = false;
}); });
} }
//换热站机组能耗数据接口（电单耗） //换热站机组能耗数据接口（电单耗）
function postElecUcFun() { function postElecUcFun() {
tabloading.value = true; tabloading.value = true;
fullscreenLoading.value = true;
postElecUc(enertyInfo).then((res) => { postElecUc(enertyInfo).then((res) => {
echarts.dispose(document.getElementById("echartsLayer")); echarts.dispose(document.getElementById("echartsLayer"));
if (res.success === true) { if (res.success === true) {
...@@ -357,12 +483,14 @@ function postElecUcFun() { ...@@ -357,12 +483,14 @@ function postElecUcFun() {
tabloading.value = false; tabloading.value = false;
ElMessage.error(res.message); ElMessage.error(res.message);
} }
fullscreenLoading.value = false;
}); });
} }
//换热站机组能耗数据接口（水单耗） //换热站机组能耗数据接口（水单耗）
function postWaterUcFun() { function postWaterUcFun() {
tabloading.value = true; tabloading.value = true;
fullscreenLoading.value = true;
postWaterUc(enertyInfo).then((res) => { postWaterUc(enertyInfo).then((res) => {
echarts.dispose(document.getElementById("echartsLayer")); echarts.dispose(document.getElementById("echartsLayer"));
if (res.success === true) { if (res.success === true) {
...@@ -371,12 +499,14 @@ function postWaterUcFun() { ...@@ -371,12 +499,14 @@ function postWaterUcFun() {
tabloading.value = false; tabloading.value = false;
ElMessage.error(res.message); ElMessage.error(res.message);
} }
fullscreenLoading.value = false;
}); });
} }
//换热站机组能耗数据接口（度日数热耗） //换热站机组能耗数据接口（度日数热耗）
function postDayHeatFun() { function postDayHeatFun() {
tabloading.value = true; tabloading.value = true;
fullscreenLoading.value = true;
postDayHeat(enertyInfo).then((res) => { postDayHeat(enertyInfo).then((res) => {
echarts.dispose(document.getElementById("echartsLayer")); echarts.dispose(document.getElementById("echartsLayer"));
if (res.success === true) { if (res.success === true) {
...@@ -385,12 +515,14 @@ function postDayHeatFun() { ...@@ -385,12 +515,14 @@ function postDayHeatFun() {
tabloading.value = false; tabloading.value = false;
ElMessage.error(res.message); ElMessage.error(res.message);
} }
fullscreenLoading.value = false;
}); });
} }
//换热站机组能耗数据接口（一网回温） //换热站机组能耗数据接口（一网回温）
function postFirBackTFun() { function postFirBackTFun() {
tabloading.value = true; tabloading.value = true;
fullscreenLoading.value = true;
postFirBackT(enertyInfo).then((res) => { postFirBackT(enertyInfo).then((res) => {
echarts.dispose(document.getElementById("echartsLayer")); echarts.dispose(document.getElementById("echartsLayer"));
if (res.success === true) { if (res.success === true) {
...@@ -399,6 +531,7 @@ function postFirBackTFun() { ...@@ -399,6 +531,7 @@ function postFirBackTFun() {
tabloading.value = false; tabloading.value = false;
ElMessage.error(res.message); ElMessage.error(res.message);
} }
fullscreenLoading.value = false;
}); });
} }
...@@ -455,6 +588,7 @@ function pageInitFun(res) { ...@@ -455,6 +588,7 @@ function pageInitFun(res) {
transferName: element.transferName, transferName: element.transferName,
gatherTime: element.gatherTime, gatherTime: element.gatherTime,
temperature: element.temperature, temperature: element.temperature,
uc: parseFloat(element.uc).toFixed(2),
}; };
tableData.push(tableArr); tableData.push(tableArr);
}); });
...@@ -569,12 +703,26 @@ function dataDeal(data) { ...@@ -569,12 +703,26 @@ function dataDeal(data) {
function echartInit() { function echartInit() {
var chartDom = document.getElementById("echartsLayer"); var chartDom = document.getElementById("echartsLayer");
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
myChart.resize({ width: computedWidth.value, height: computedHeight.value }); myChart.resize({ width: computedWidth.value, height: computedHeight.value });
// var company = "T"; // var company = "T";
option = { 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: { title: {
text: "换热站趋势图", text: "换热站趋势图",
top: 0, top: 0,
...@@ -638,20 +786,23 @@ function changeFun() { ...@@ -638,20 +786,23 @@ function changeFun() {
var divWidth = document.getElementById("contentBlock").offsetWidth; var divWidth = document.getElementById("contentBlock").offsetWidth;
var divHeight = document.getElementById("contentBlock").scrollHeight; var divHeight = document.getElementById("contentBlock").scrollHeight;
computedWidth.value = divWidth + "px"; computedWidth.value = divWidth + "px";
computedHeight.value = divHeight * 0.6 + "px"; computedHeight.value = divHeight * 0.75 + "px";
echartInit(); echartInit();
} }
onMounted(() => { onMounted(() => {
//postHeatUctFun(); timeFun();
getEnterprise(); getEnterprise();
getSupplys(); getSupplys();
setContentHeight(); setContentHeight();
window.addEventListener("resize", setContentHeight);
switchV.value = true; switchV.value = true;
sendClick();
window.addEventListener("resize", function () {
location.reload();
});
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener("resize", setContentHeight); window.removeEventListener("resize");
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -661,16 +812,20 @@ onUnmounted(() => { ...@@ -661,16 +812,20 @@ onUnmounted(() => {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #ffffff; background-color: #ffffff;
} }
.el-form--inline .el-form-item { .el-form--inline .el-form-item {
margin-right: 10px; margin-right: 10px;
} }
.el-form-item { .el-form-item {
margin: 5px 5px 10px !important; margin: 5px !important;
} }
.echartsLayer { .echartsLayer {
width: 100%; width: 100%;
margin: 2% auto 0; margin: 2% auto 0;
} }
.el-form-item__content {
align-items: right !important;
}
</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