This commit is contained in:
gongjiale 2024-10-13 22:55:46 +08:00
commit f3c39d4a13
3 changed files with 88 additions and 28 deletions

View File

@ -102,7 +102,23 @@ export default {
return; return;
} }
const { data } = res; const { data } = res;
this.chartData.series.data = Object.keys(data).map((key) => { // month
function sortDataByMonth(data) {
//
for (const key in data) {
if (data.hasOwnProperty(key)) {
//
data[key].sort((a, b) => {
// month
return new Date(a.month) - new Date(b.month);
});
}
}
return data;
}
const sortedData = sortDataByMonth(data);
this.chartData.series.data = Object.keys(sortedData).map((key) => {
return { return {
name: this.deptList.find((item) => item.deptId === parseInt(key))?.deptName, name: this.deptList.find((item) => item.deptId === parseInt(key))?.deptName,
type: "line", type: "line",

View File

@ -14,24 +14,32 @@
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<div class="export_btn"> <div class="export_btn">
<el-button type="primary" icon="eel-icon-download" @click="handleExport">导出</el-button> <el-button
type="primary"
icon="eel-icon-download"
@click="handleExport"
>导出</el-button
>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="10"> <el-row :gutter="10">
<el-table <el-table
id="dailyTable" id="dailyTable"
:data="tableData" :data="tableData"
border border
style="width: 100%" style="width: 100%"
:span-method="objectSpanMethod" :span-method="objectSpanMethod"
:row-class-name="tableRowClassName"
> >
<el-table-column prop="ppp" label="港口"> <el-table-column prop="ppp" label="港口">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<div>{{ row.ppp }}</div> <div>{{ row.ppp }}</div>
<div style="display: flex; gap: 10px"> <div style="display: flex; gap: 10px">
<el-tag>港口数: {{ getChildCount(row, 'ppp', 'pp') }}</el-tag> <el-tag>港口数: {{ getChildCount(row, "ppp", "pp") }}</el-tag>
<el-tag type="warning">平均值: {{ calculateChildAvg(row, 'ppp') }}</el-tag> <el-tag type="warning"
>平均值: {{ calculateChildAvg(row, "ppp") }}</el-tag
>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -40,8 +48,10 @@
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<div>{{ row.pp }}</div> <div>{{ row.pp }}</div>
<div style="display: flex; gap: 10px"> <div style="display: flex; gap: 10px">
<el-tag>企业数: {{ getChildCount(row, 'pp', 'p') }}</el-tag> <el-tag>企业数: {{ getChildCount(row, "pp", "p") }}</el-tag>
<el-tag type="warning">平均值: {{ calculateChildAvg(row, 'pp') }}</el-tag> <el-tag type="warning"
>平均值: {{ calculateChildAvg(row, "pp") }}</el-tag
>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -50,8 +60,10 @@
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<div>{{ row.p }}</div> <div>{{ row.p }}</div>
<div style="display: flex; gap: 10px"> <div style="display: flex; gap: 10px">
<el-tag>设备数: {{ getChildCount(row, 'p', 'sn') }}</el-tag> <el-tag>设备数: {{ getChildCount(row, "p", "sn") }}</el-tag>
<el-tag type="warning">平均值: {{ calculateChildAvg(row, 'p') }}</el-tag> <el-tag type="warning"
>平均值: {{ calculateChildAvg(row, "p") }}</el-tag
>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -84,7 +96,18 @@ export default {
this.day = moment().format("YYYY-MM-DD"); this.day = moment().format("YYYY-MM-DD");
this.queryData(); this.queryData();
}, },
computed: {
pppList() {
return Array.from(new Set(this.tableData.map((item) => item.ppp)));
},
},
methods: { methods: {
tableRowClassName({ row, rowIndex }) {
const classNames = ["default-row", "success-row", "error-row", "warning-row", "info-row"];
const index = this.pppList.findIndex((item) => item === row.ppp);
if (index === -1) return "info-row";
return index > classNames.length - 1 ? classNames[index % classNames.length] : classNames[index];
},
changeDate() { changeDate() {
this.queryData(); this.queryData();
}, },
@ -94,7 +117,7 @@ export default {
this.tableData = res.data.map((item) => { this.tableData = res.data.map((item) => {
return { return {
...item, ...item,
avgDs: parseFloat(item.avgDs.toFixed(2)) avgDs: parseFloat(item.avgDs.toFixed(2)),
}; };
}); });
} }
@ -152,7 +175,9 @@ export default {
} }
} }
// , // ,
return (childList.reduce((a, b) => a + b, 0) / childList.length).toFixed(2); return (childList.reduce((a, b) => a + b, 0) / childList.length).toFixed(
2
);
}, },
handleExport() { handleExport() {
exportExcel("#dailyTable", `${this.day}-数据统计`); exportExcel("#dailyTable", `${this.day}-数据统计`);
@ -161,6 +186,27 @@ export default {
}; };
</script> </script>
<style>
.el-table .warning-row {
background: rgba(248,236,216,0.3);
}
.el-table .success-row {
background: rgba(225,243,216,0.3);
}
.el-table .error-row {
background: rgba(252,226,226,0.3);
}
.el-table .default-row {
background: rgba(201,226,255,0.3);
}
.el-table .info-row {
background: rgba(233,233,235,0.3);
}
</style>
<style scoped> <style scoped>
.daily-data { .daily-data {
padding: 10px 20px; padding: 10px 20px;

View File

@ -30,7 +30,17 @@
:border="true" :border="true"
:header-cell-style="headerStyle" :header-cell-style="headerStyle"
> >
<el-table-column prop="month" label="名称"> <!-- <el-table-column label="港区">
<template slot-scope="scope">
{{ deptName }}
</template>
</el-table-column>
<el-table-column label="月份">
<template slot-scope="scope">
<span>{{ dateValue.replace("-", "年") }}</span>
</template>
</el-table-column> -->
<el-table-column prop="month" label="名称" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
{{ getTableFirstColumnName(scope.row) }} {{ getTableFirstColumnName(scope.row) }}
</template> </template>
@ -41,18 +51,6 @@
align="center" align="center"
:formatter="dataFormatter" :formatter="dataFormatter"
></el-table-column> ></el-table-column>
<el-table-column
prop="avgDbz"
label="低报值"
align="center"
:formatter="dataFormatter"
></el-table-column>
<el-table-column
prop="avgGbz"
label="高报值"
align="center"
:formatter="dataFormatter"
></el-table-column>
</el-table> </el-table>
<el-table <el-table
:data="cmDeviceDs" :data="cmDeviceDs"
@ -120,10 +118,10 @@ export default {
this.queryData(); this.queryData();
}, },
getTableFirstColumnName(row) { getTableFirstColumnName(row) {
if (row.month && row.month === this.month) { if (row.month && row.month === this.dateValue) {
return "本月均值"; return "本月均值";
} }
if (row.month && row.month !== this.month) { if (row.month && row.month !== this.dateValue) {
return "上月均值"; return "上月均值";
} }
return "变化率"; return "变化率";
@ -172,8 +170,8 @@ export default {
const ws_name = "SheetJS"; const ws_name = "SheetJS";
const ws_data = [ const ws_data = [
[filename], [filename],
["名称", "读数", "低报值", "高报值"], ["名称", "读数",],
...this.overViewTableData.map(row => [this.getTableFirstColumnName(row), row.avgDs, row.avgDbz, row.avgGbz]), ...this.overViewTableData.map(row => [this.getTableFirstColumnName(row), row.avgDs,]),
["港区", "企业", "编号", "平均值"], ["港区", "企业", "编号", "平均值"],
...this.cmDeviceDs.map(row => [row.gangQu, row.deptName, row.sn, row.avgDs]), ...this.cmDeviceDs.map(row => [row.gangQu, row.deptName, row.sn, row.avgDs]),
]; ];