提交新的前台代码
This commit is contained in:
parent
08d70afa99
commit
44ab2dc9fd
|
|
@ -0,0 +1,9 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function getDeviceAvgByMonth(params) {
|
||||
return request({
|
||||
url: '/statistics/getDeviceAvgByMonth',
|
||||
params: params,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function reportCenterApi(params) {
|
||||
console.log(params);
|
||||
return request({
|
||||
url: '/statistics/reportCenter',
|
||||
params: params,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<div class="avg-table">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6">
|
||||
<dept-tree @deptChange="handleDeptChange" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
format="yyyy-MM"
|
||||
value-format="yyyy-MM"
|
||||
@change="handleDateChange"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
<el-table :data="tableData" border style="width: 100%" v-loading="loading">
|
||||
<el-table-column
|
||||
v-for="column in tableColumn"
|
||||
:key="column.prop"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
:formatter="column.formatter"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pager">
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="pager.total"
|
||||
:page-size="pager.pageSize"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeptTree from "@/components/DeptTree/index.vue";
|
||||
import { getDeviceAvgByMonth } from "@/api/statistics/avgTable.js";
|
||||
import to from "@/utils/await-to.js";
|
||||
export default {
|
||||
name: "AvgTable",
|
||||
components: {
|
||||
DeptTree,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dateRange: [],
|
||||
dept: {},
|
||||
tableData: [],
|
||||
pager: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
},
|
||||
tableColumn: [
|
||||
{
|
||||
prop: "dept_name",
|
||||
label: "部门",
|
||||
},
|
||||
{
|
||||
prop: "name",
|
||||
label: "设备名称",
|
||||
},
|
||||
{
|
||||
prop: "sn",
|
||||
label: "设备编号",
|
||||
},
|
||||
{
|
||||
prop: "avg_ds",
|
||||
label: "平均读数",
|
||||
formatter: this.dataFormatter,
|
||||
},
|
||||
{
|
||||
prop: "avg_dbz",
|
||||
label: "平均低报值",
|
||||
formatter: this.dataFormatter,
|
||||
},
|
||||
{
|
||||
prop: "avg_gbz",
|
||||
label: "平均高报值",
|
||||
formatter: this.dataFormatter,
|
||||
},
|
||||
],
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initDateRange();
|
||||
},
|
||||
methods: {
|
||||
dataFormatter (row, column, cellValue, index) {
|
||||
return cellValue.toFixed(2);
|
||||
},
|
||||
initDateRange() {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
this.dateRange = [`${year}-01`, `${year}-${month}`];
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.pager.pageNum = val;
|
||||
this.fetchData();
|
||||
},
|
||||
async fetchData() {
|
||||
this.loading = true;
|
||||
const [startMonth, endMonth] = this.dateRange;
|
||||
const [err, res] = await to(
|
||||
getDeviceAvgByMonth({
|
||||
deptId: this.dept.deptId,
|
||||
startMonth,
|
||||
endMonth,
|
||||
...this.pager,
|
||||
})
|
||||
);
|
||||
|
||||
if (err) {
|
||||
this.$message.error("获取数据失败");
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
this.tableData = res.rows;
|
||||
this.pager.total = res.total;
|
||||
this.loading = false;
|
||||
|
||||
},
|
||||
handleDeptChange(dept) {
|
||||
this.dept = dept;
|
||||
this.pager.pageNum = 1;
|
||||
this.fetchData();
|
||||
},
|
||||
handleDateChange() {
|
||||
this.pager.pageNum = 1;
|
||||
this.fetchData();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avg-table {
|
||||
padding: 20px;
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.pager {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
<template>
|
||||
<div class="report-center">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6" style="margin-bottom: 10px;">
|
||||
<dept-tree @deptChange="handleDeptChange" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-date-picker
|
||||
v-model="month"
|
||||
type="month"
|
||||
value-format="yyyy-MM"
|
||||
format="yyyy-MM"
|
||||
placeholder="选择月"
|
||||
@change="getReportCenterData"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div class="report-center__header ">
|
||||
<span>{{ this.month.replace("-", "年") + "月" }}</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData1"
|
||||
style="width: 100%"
|
||||
:border="true"
|
||||
:header-cell-style="headerStyle"
|
||||
|
||||
>
|
||||
<el-table-column prop="month" label="名称">
|
||||
<template slot-scope="scope">
|
||||
{{ getTableFirstColumnName(scope.row) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_ds"
|
||||
label="读数"
|
||||
align="center"
|
||||
:formatter="dataFormatter"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_dbz"
|
||||
label="低报值"
|
||||
align="center"
|
||||
:formatter="dataFormatter"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_gbz"
|
||||
label="高报值"
|
||||
align="center"
|
||||
:formatter="dataFormatter"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<el-table
|
||||
:data="tableData2"
|
||||
style="width: 100%"
|
||||
:border="true"
|
||||
:header-cell-style="headerStyle"
|
||||
>
|
||||
<el-table-column prop="dept_name" label="部门名"></el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_ds"
|
||||
label="读数"
|
||||
align="center"
|
||||
:formatter="dataFormatter"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_dbz"
|
||||
label="低报值"
|
||||
align="center"
|
||||
:formatter="dataFormatter"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_gbz"
|
||||
label="高报值"
|
||||
align="center"
|
||||
:formatter="dataFormatter"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeptTree from "@/components/DeptTree/index.vue";
|
||||
import { reportCenterApi } from "@/api/statistics/reportCenter.js";
|
||||
import to from "@/utils/await-to.js";
|
||||
export default {
|
||||
name: "ReportCenter",
|
||||
components: {
|
||||
DeptTree,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
month: "",
|
||||
deptId: "",
|
||||
tableData1: [],
|
||||
tableData2: [],
|
||||
tableColumn2: [],
|
||||
headerStyle: {
|
||||
fontSize: '14px',
|
||||
backgroundColor: '#f8f8f8',
|
||||
color: '#333',
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDate();
|
||||
},
|
||||
methods: {
|
||||
initDate() {
|
||||
const date = new Date();
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth() + 1;
|
||||
this.month = `${year}-${month < 10 ? "0" + month : month}`;
|
||||
},
|
||||
handleDeptChange(dept) {
|
||||
this.deptId = dept.deptId;
|
||||
this.getReportCenterData();
|
||||
},
|
||||
getTableFirstColumnName(row) {
|
||||
if (row.month && row.month === this.month) {
|
||||
return "本月均值";
|
||||
}
|
||||
if (row.month && row.month !== this.month) {
|
||||
return "上月均值";
|
||||
}
|
||||
return "变化率";
|
||||
},
|
||||
dataFormatter(row, column, cellValue, index) {
|
||||
if (row.month === "") {
|
||||
return cellValue;
|
||||
}
|
||||
return cellValue.toFixed(2);
|
||||
},
|
||||
async getReportCenterData() {
|
||||
if (!this.deptId) return;
|
||||
const [err, res] = await to(
|
||||
reportCenterApi({
|
||||
month: this.month,
|
||||
deptId: this.deptId,
|
||||
})
|
||||
);
|
||||
if (err) {
|
||||
this.$message.error(err);
|
||||
return;
|
||||
}
|
||||
console.log(res);
|
||||
const { currMonth: cm, lastMonth: lm, deptAvg } = res.data;
|
||||
const currMonth = Object.assign({}, cm[0]);
|
||||
const lastMonth = Object.assign({}, lm[0]);
|
||||
const changeRate = {
|
||||
month: "",
|
||||
avg_ds:
|
||||
(
|
||||
((currMonth.avg_ds - lastMonth.avg_ds) / lastMonth.avg_ds) *
|
||||
100
|
||||
).toFixed(2) + "%",
|
||||
avg_dbz:
|
||||
(
|
||||
((currMonth.avg_dbz - lastMonth.avg_dbz) / lastMonth.avg_dbz) *
|
||||
100
|
||||
).toFixed(2) + "%",
|
||||
avg_gbz:
|
||||
(
|
||||
((currMonth.avg_gbz - lastMonth.avg_gbz) / lastMonth.avg_gbz) *
|
||||
100
|
||||
).toFixed(2) + "%",
|
||||
};
|
||||
|
||||
this.tableData1 = [currMonth, lastMonth, changeRate];
|
||||
this.tableData2 = deptAvg;
|
||||
console.log(this.tableData1);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.report-center {
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
.report-center__header {
|
||||
border: 1px solid #EBEEF5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
span {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue