优化图片在线数量
fanluyan
10 months ago
parent
5038971aec
commit
3d10a75ca0
@ -0,0 +1,296 @@
|
|||||||
|
<template>
|
||||||
|
<div class="statusDialog">
|
||||||
|
<el-dialog
|
||||||
|
title="多天数据报表"
|
||||||
|
:visible.sync="statusdialogVisible"
|
||||||
|
width="1220px"
|
||||||
|
>
|
||||||
|
<div class="lineTableBox" v-loading="picLoading">
|
||||||
|
<div class="lineLeft">
|
||||||
|
<div class="logTitle">
|
||||||
|
<!-- <h3>装置图片报表</h3> -->
|
||||||
|
|
||||||
|
<el-form :inline="true" :model="formdata" class="demo-form-inline">
|
||||||
|
<el-form-item label="开始日期" class="dateclass">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formdata.starttime"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="开始日期"
|
||||||
|
value-format="timestamp"
|
||||||
|
:picker-options="pickerOptions"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="结束日期" class="dateclass">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formdata.endtime"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="结束日期"
|
||||||
|
value-format="timestamp"
|
||||||
|
:picker-options="pickerOptions"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="boxLogTable">
|
||||||
|
<el-table :data="tableData" border stripe height="calc(100%)">
|
||||||
|
<el-table-column type="index" width="50" label="序号">
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="线路" show-overflow-tooltip>
|
||||||
|
{{ xlName }}
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="day" label="日期" show-overflow-tooltip>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="装置总数">
|
||||||
|
<template slot-scope="scope"> {{ termTotalNum }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="运维上线数量">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ scope.row.termList.length }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="运维上线率">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
((scope.row.termList.length / termTotalNum) * 100).toFixed(
|
||||||
|
2
|
||||||
|
) + "%"
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="上图设备数量">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.termList.filter(
|
||||||
|
(term) => parseInt(term.uploads, 10) > 0
|
||||||
|
).length
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="上图率">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
(
|
||||||
|
(scope.row.termList.filter(
|
||||||
|
(term) => parseInt(term.uploads, 10) > 0
|
||||||
|
).length /
|
||||||
|
termTotalNum) *
|
||||||
|
100
|
||||||
|
).toFixed(2) + "%"
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="正常上图设备数量">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.termList.filter(
|
||||||
|
(term) =>
|
||||||
|
parseInt(term.uploads, 10) >=
|
||||||
|
(parseInt(picNum, 10) *
|
||||||
|
parseInt(norGraphRate.replace("%", ""), 10)) /
|
||||||
|
100
|
||||||
|
).length
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="正常上图率">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
(
|
||||||
|
(scope.row.termList.filter(
|
||||||
|
(term) =>
|
||||||
|
parseInt(term.uploads, 10) >=
|
||||||
|
(parseInt(picNum, 10) *
|
||||||
|
parseInt(norGraphRate.replace("%", ""), 10)) /
|
||||||
|
100
|
||||||
|
).length /
|
||||||
|
termTotalNum) *
|
||||||
|
100
|
||||||
|
).toFixed(2) + "%"
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="echartsDiv" id="echartBox"></div>
|
||||||
|
</div>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="statusdialogVisible = false"
|
||||||
|
>确 定</el-button
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { picRportApi } from "@/utils/api/index";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusdialogVisible: false,
|
||||||
|
pickerOptions: {
|
||||||
|
disabledDate(date) {
|
||||||
|
return date.getTime() > Date.now(); // 禁用大于今天的日期
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
formdata: {
|
||||||
|
starttime:
|
||||||
|
new Date(new Date().setHours(0, 0, 0, 0)).getTime() -
|
||||||
|
30 * 24 * 60 * 60 * 1000, // 设置开始时间为当天凌晨00:00:00的时间戳, // 设置开始时间为当天凌晨00:00:00的时间戳,
|
||||||
|
endtime: new Date(new Date().setHours(23, 59, 59, 0)).getTime(), // 设置结束时间为当天夜晚23:59:59的时间戳
|
||||||
|
},
|
||||||
|
tableData: [],
|
||||||
|
picLoading: false,
|
||||||
|
lineId: "",
|
||||||
|
termTotalNum: 0,
|
||||||
|
dyName: "",
|
||||||
|
xlName: "",
|
||||||
|
picNum: 0,
|
||||||
|
norGraphRate: 0,
|
||||||
|
titleArr: ["运维上线数量", "上图设备数量", "正常上图设备数量"],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
display(row) {
|
||||||
|
this.statusdialogVisible = true;
|
||||||
|
this.lineId = row;
|
||||||
|
this.onSubmit();
|
||||||
|
},
|
||||||
|
onSubmit() {
|
||||||
|
if (this.formdata.starttime > this.formdata.endtime) {
|
||||||
|
return this.$message({
|
||||||
|
duration: 1500,
|
||||||
|
showClose: true,
|
||||||
|
message: "开始日期不能大于结束日期",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let params = {
|
||||||
|
start: this.formdata.starttime / 1000,
|
||||||
|
end: this.formdata.endtime / 1000,
|
||||||
|
lineIds: [this.lineId],
|
||||||
|
};
|
||||||
|
this.getpicList(params);
|
||||||
|
},
|
||||||
|
|
||||||
|
getpicList(params) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.picLoading = true;
|
||||||
|
picRportApi(params)
|
||||||
|
.then((res) => {
|
||||||
|
this.picLoading = false;
|
||||||
|
if (res.data.length !== 0) {
|
||||||
|
console.log(res.data);
|
||||||
|
//this.tableData = res.data;
|
||||||
|
this.tableData = res.data[0].dayList;
|
||||||
|
console.log(this.tableData);
|
||||||
|
this.termTotalNum = res.data[0].termList.length;
|
||||||
|
this.picNum = res.data[0].line.photoCount;
|
||||||
|
this.norGraphRate = res.data[0].line.photoRate;
|
||||||
|
this.xlName = res.data[0].line.name;
|
||||||
|
this.getEchart();
|
||||||
|
} else {
|
||||||
|
this.tableData = [];
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {});
|
||||||
|
}, 100);
|
||||||
|
},
|
||||||
|
//装置数量统计
|
||||||
|
getEchart() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
console.log(this.termDataNum);
|
||||||
|
let that = this;
|
||||||
|
that.$echarts.init(document.getElementById("echartBox")).dispose();
|
||||||
|
that.myChart = this.$echarts.init(document.getElementById("echartBox"));
|
||||||
|
let option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: this.titleArr,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "5%",
|
||||||
|
right: "5%",
|
||||||
|
bottom: "5%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
boundaryGap: false,
|
||||||
|
data: this.tableData.map((item) => item.day),
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "运维上线数量",
|
||||||
|
type: "line",
|
||||||
|
stack: "Total",
|
||||||
|
data: this.tableData.map((item) => item.termList.length),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "上图设备数量",
|
||||||
|
type: "line",
|
||||||
|
stack: "Total",
|
||||||
|
data: this.tableData.map(
|
||||||
|
(item) =>
|
||||||
|
item.termList.filter((term) => parseInt(term.uploads, 10) > 0)
|
||||||
|
.length
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "正常上图设备数量",
|
||||||
|
type: "line",
|
||||||
|
stack: "Total",
|
||||||
|
data: this.tableData.map(
|
||||||
|
(item) =>
|
||||||
|
item.termList.filter(
|
||||||
|
(term) =>
|
||||||
|
parseInt(term.uploads, 10) >=
|
||||||
|
(parseInt(this.picNum, 10) *
|
||||||
|
parseInt(this.norGraphRate.replace("%", ""), 10)) /
|
||||||
|
100
|
||||||
|
).length
|
||||||
|
),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
that.myChart.setOption(option);
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
that.myChart.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.statusDialog {
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.lineLeft {
|
||||||
|
width: 800px;
|
||||||
|
}
|
||||||
|
.echartsDiv {
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
margin-top: 35px;
|
||||||
|
}
|
||||||
|
.lineTableBox {
|
||||||
|
height: 420px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue