优化图片在线数量
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