Skip to content

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

环比更新

parent a1c1918b
Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 110 deletions
src/views/HandlerPage/QOQ.vue
View file @ e8f6a530
......@@ -2,6 +2,7 @@
<div
class="contentBlock"
id="contentBlock"
v-loading="loading"
element-loading-background="rgba(122, 122, 122, 0.6)"
>
<el-card class="card-contianer">
......@@ -128,7 +129,6 @@
<div v-show="!switchV">
<el-table
:data="tableData"
v-loading="tabloading"
:height="tableHeight"
style="width: 100%"
empty-text="暂无数据"
......@@ -139,7 +139,7 @@
<el-table-column prop="temperature" label="温度（℃）" />
<el-table-column
prop="record"
label="耗气量"
label="耗气量（Nm³）"
v-if="enertyInfo.energyType == '1'"
/>
<el-table-column
......@@ -160,7 +160,10 @@
</el-table>
</div>
<div v-show="switchV" id="echartsLayerBlock">
<div class="echartsLayer" id="echartsLayer"></div>
<div v-show="nodata">
<div class="echartsLayer" id="echartsLayer"></div>
</div>
<div v-show="!nodata"><el-empty description="暂无数据" /></div>
</div>
</div>
</template>
......@@ -174,7 +177,7 @@ import { ElMessage } from "element-plus";
import { saveAs } from "file-saver";
import XLSX from "xlsx-js-style";
import { postExternalQOQ, postWithinQOQ } from "../../api/analysis";
const loading = ref(false);
const tdType = ref(1);
const networkType = ref(2);
const enertyInfo = reactive({
......@@ -192,7 +195,7 @@ const enterpriseId = ref();
const props = { multiple: true, emitPath: false };
const switchV = ref(true);
const echartF = ref(false);
const nodata = ref(false);
const nodata = ref(true);
let tableData = reactive([]);
const echartTitle = reactive(["耗水量趋势图"]);
const echartData = reactive([]);
......@@ -226,52 +229,114 @@ function getEnterprise() {
}
function transferIdChange() {
// if (enertyInfo.transferId.length > 10) {
// ElMessage.error("换热机组最多只能选择10个");
// }
if (enertyInfo.transferId.length > 10) {
ElMessage.error("换热机组最多只能选择10个");
}
}
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 }];
let exlData = [];
let title = [];
tableData.forEach((element) => {
let tableArr = {
rowId: element.rowId,
transferName: element.transferName,
gatherTime: element.gatherTime.replace("T", " "),
temperature: element.temperature,
record: element.record,
};
exlData.push(tableArr);
});
switch (enertyInfo.energyType) {
case 1:
title = ["序号", "换热站机组名称", "时间", "温度（℃）", "耗气量（Nm³）"];
break;
case 2:
title = ["序号", "换热站机组名称", "时间", "温度（℃）", "耗水量（T）"];
break;
case 3:
title = ["序号", "换热站机组名称", "时间", "温度（℃）", "耗热量（GJ"];
break;
case 4:
title = ["序号", "换热站机组名称", "时间", "温度（℃）", "耗电量（A）"];
break;
}
worksheet["A1"].s = {
fill: {
fgColor: { rgb: "0097d5fd" },
const ws = XLSX.utils.json_to_sheet(exlData);
const workbook = XLSX.utils.book_new();
const border = {
top: {
style: "thin",
},
};
worksheet["B1"].s = {
fill: {
fgColor: { rgb: "0097d5fd" },
bottom: {
style: "thin",
},
};
worksheet["C1"].s = {
fill: {
fgColor: { rgb: "0097d5fd" },
left: {
style: "thin",
},
};
worksheet["D1"].s = {
fill: {
fgColor: { rgb: "0097d5fd" },
right: {
style: "thin",
},
};
const range = XLSX.utils.decode_range(ws["!ref"]);
const cellList = Object.keys(ws).filter((item) => item.indexOf("!") < 0);
XLSX.utils.book_append_sheet(workbook, worksheet, "换热站趋势");
for (let row = range.s.r; row <= range.e.r; row++) {
for (let col = range.s.c; col <= range.e.c; col++) {
const cell = XLSX.utils.encode_cell({ r: row, c: col });
if (cellList.indexOf(cell) < 0) {
ws[cell] = { t: "", v: "", s: { border } };
} else {
ws[cell].s = { border };
}
}
}
XLSX.utils.sheet_add_aoa(ws, [title], {
origin: "A1",
});
ws["!cols"] = [
{ wch: 5 },
{ wch: 20 },
{ wch: 20 },
{ wch: 20 },
{ wch: 20 },
];
// ws["!rows"] = [{ hpx: 20 }];
const tagList = ["A1", "B1", "C1", "D1", "E1"];
tagList.forEach((key, index) => {
ws[key].s = {
fill: {
fgColor: { rgb: "0097d5fd" },
},
border: {
bottom: {
color: "#000000",
style: "thin",
},
left: {
color: "#000000",
style: "thin",
},
right: {
color: "#000000",
style: "thin",
},
top: {
color: "#000000",
style: "thin",
},
},
};
});
XLSX.utils.book_append_sheet(workbook, ws, "用量环比");
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");
saveAs(dataBlob, "用量环比.xlsx");
ElMessage.success("导出成功！请稍后。。。");
}
......@@ -350,7 +415,9 @@ function selTypeChange() {
//换热站机组能耗数据接口（用量环比）
function postExternalQOQFun() {
tabloading.value = true;
loading.value = true;
echarts.dispose(document.getElementById("echartsLayer"));
tableData.length = 0;
switch (enertyInfo.energyType) {
case 1:
company.value = "Nm³";
......@@ -382,25 +449,29 @@ function postExternalQOQFun() {
postExternalQOQ(params).then((res) => {
echarts.dispose(document.getElementById("echartsLayer"));
if (res.success === true) {
if (res.data.hourWater.length >0) {
if (res.data.hourWater.length > 0) {
pageInitFun(res);
tableData = res.data.hourWater;
} else {
nodata.value = false;
}
} else {
ElMessage.error(res.message);
}
loading.value = false;
});
} else {
postWithinQOQ(params).then((res) => {
echarts.dispose(document.getElementById("echartsLayer"));
if (res.success === true) {
if (res.data.data.length >0) {
if (res.data.data.length > 0) {
pageInitFun(res);
tableData = res.data.hourWater;
} else {
nodata.value = false;
}
} else {
ElMessage.error(res.message);
}
loading.value = false;
});
}
}
......@@ -411,83 +482,86 @@ function clearData() {
echartDataLegend.length = 0;
echartDataTime.length = 0;
tableData.length = 0;
tabloading.value = false;
}
function pageInitFun(res) {
tableData.length = 0;
res.data.hourWater.forEach((element) => {
let tableArr = {
transferName: element.transferName,
gatherTime: element.gatherTime,
temperature: element.temperature,
uc: parseFloat(element.uc).toFixed(2),
};
tableData.push(tableArr);
});
nodata.value = true;
// res.data.hourWater.forEach((element) => {
// let tableArr = {
// transferName: element.transferName,
// gatherTime: element.gatherTime.replace("T"," "),
// temperature: element.temperature,
// uc: parseFloat(element.uc).toFixed(2),
// };
// tableData.push(tableArr);
// });
nodata.value = false;
tabloading.value = false;
echartData.length = 0;
echartSeries.length = 0;
echartDataLegend.length = 0;
echartDataTime.length = 0;
echartData.value = dataDeal(res.data.hourWater);
echartData.value[0].listInfo.forEach((element) => {
if (element.gatherTime) {
echartDataTime.push(element.gatherTime);
}
});
echartData.value.forEach((element) => {
let data1 = [];
let data2 = [];
element.listInfo.forEach((item) => {
data1.push(item.temperature);
data2.push(parseFloat(item.record).toFixed(2));
if (res.data.hourWater.length > 0) {
tableData = res.data.hourWater;
nodata.value = true;
echartData.value = dataDeal(res.data.hourWater);
echartData.value[0].listInfo.forEach((element) => {
if (element.gatherTime) {
echartDataTime.push(element.gatherTime);
}
});
echartData.value.forEach((element) => {
let data1 = [];
let data2 = [];
element.listInfo.forEach((item) => {
data1.push(item.temperature);
data2.push(parseFloat(item.record).toFixed(2));
});
echartSeries.push(
// {
// name: element.transferName + "温度",
// type: "line",
// tooltip: {
// valueFormatter: function (value) {
// return value + " ℃";
// },
// },
// data: data1,
// },
{
name: element.transferName + "能耗",
type: "bar",
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
echartSeries.push(
// {
// name: element.transferName + "温度",
// type: "line",
// tooltip: {
// valueFormatter: function (value) {
// return value + " ℃";
// },
// },
// data: data1,
// },
{
name: element.transferName + "能耗",
type: "bar",
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
},
},
data: data2,
}
);
});
let temperatureListArr = [];
res.data.temperatureList.forEach((element) => {
temperatureListArr.push(element);
});
echartSeries.push({
name: "平均温度",
type: "line",
tooltip: {
valueFormatter: function (value) {
return value + " ℃";
},
data: data2,
}
);
});
let temperatureListArr = [];
res.data.temperatureList.forEach((element) => {
temperatureListArr.push(element);
});
echartSeries.push({
name: "平均温度",
type: "line",
tooltip: {
valueFormatter: function (value) {
return value + " ℃";
},
},
data: temperatureListArr,
});
data: temperatureListArr,
});
echartSeries.forEach((element, index) => {
echartDataLegend.push(element.name);
});
echartInit();
echartSeries.forEach((element, index) => {
echartDataLegend.push(element.name);
});
echartInit();
}
}
function setContentHeight() {
......@@ -615,13 +689,13 @@ function echartInit() {
}
function changeFun() {
tabloading.value = false;
nodata.value = true;
var divWidth = document.getElementById("contentBlock").offsetWidth;
var divHeight = document.getElementById("contentBlock").scrollHeight;
computedWidth.value = divWidth + "px";
computedHeight.value = divHeight * 0.75 + "px";
echartInit();
if (nodata.value) {
var divWidth = document.getElementById("contentBlock").offsetWidth;
var divHeight = document.getElementById("contentBlock").scrollHeight;
computedWidth.value = divWidth + "px";
computedHeight.value = divHeight * 0.75 + "px";
echartInit();
}
}
onMounted(() => {
......@@ -630,6 +704,7 @@ onMounted(() => {
getSupplys();
postExternalQOQFun();
changeFun();
switchV.value = true;
window.addEventListener("resize", function () {
location.reload();
});
......
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