提交新的前台代码
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