ly.fan
/
ops-fronted-java
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加运维在线统计

Browse Source
jcbranch
fanluyan 10 months ago
parent 3d10a75ca0
commit bcf1e21260
4 changed files with 336 additions and 24 deletions
Show Stats Download Patch File Download Diff File

10
src/utils/api/index.js
Unescape Escape View File

@ -257,3 +257,13 @@ export function getLineListJoggle(data) {
data,
});
}
//查询权限数结构
export function getPermissionTree(data) {
return request({
url: "/xymanager/user/getFullTree",
method: "get",
params: data,
});
}

62
src/views/picReport/components/lineStatusDialog.vue
Unescape Escape View File

@ -34,10 +34,19 @@
</el-form>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button class="exportBtn" type="primary" @click="deviceExport"
>导出列表</el-button
>
</div>
<div class="boxLogTable">
<el-table :data="tableData" border stripe height="calc(100%)">
<el-table
:data="tableData"
border
stripe
height="calc(100%)"
id="moreTable"
>
<el-table-column type="index" width="50" label="序号">
</el-table-column>
@ -45,16 +54,19 @@
{{ xlName }}
</el-table-column>
<el-table-column prop="day" label="日期" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.day.split(" ")[0] }}</template
>
</el-table-column>
<el-table-column label="装置总数">
<template slot-scope="scope"> {{ termTotalNum }}</template>
</el-table-column>
<el-table-column label="运维上线数量">
<el-table-column label="运维上线数量" width="70px">
<template slot-scope="scope">
{{ scope.row.termList.length }}
</template>
</el-table-column>
<el-table-column label="运维上线率">
<el-table-column label="运维上线率" width="70px">
<template slot-scope="scope">
{{
((scope.row.termList.length / termTotalNum) * 100).toFixed(
@ -63,7 +75,7 @@
}}
</template>
</el-table-column>
<el-table-column label="上图设备数量">
<el-table-column label="上图设备数量" width="70px">
<template slot-scope="scope">
{{
scope.row.termList.filter(
@ -130,6 +142,7 @@
</template>
<script>
import { picRportApi } from "@/utils/api/index";
import htmlToExcel from "@/utils/htmlToExcel";
export default {
data() {
return {
@ -155,10 +168,15 @@ export default {
picNum: 0,
norGraphRate: 0,
titleArr: ["运维上线数量", "上图设备数量", "正常上图设备数量"],
reverseData: [], //倒叙排列
};
},
mounted() {},
methods: {
//导出活动列表表格
deviceExport() {
htmlToExcel.getExcel("#moreTable", "运维多天在线率列表");
},
display(row) {
this.statusdialogVisible = true;
this.lineId = row;
@ -191,8 +209,10 @@ export default {
console.log(res.data);
//this.tableData = res.data;
this.tableData = res.data[0].dayList;
this.reverseData = this.tableData.slice().reverse();
console.log(this.tableData);
this.termTotalNum = res.data[0].termList.length;
console.log(this.termTotalNum);
this.picNum = res.data[0].line.photoCount;
this.norGraphRate = res.data[0].line.photoRate;
this.xlName = res.data[0].line.name;
@ -207,13 +227,26 @@ export default {
//装置数量统计
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 termDataNum = this.termTotalNum;
var seriesColors = ["#5470c6", "#91cc75", "#fac858"]; // 红色、绿色、蓝色
let option = {
tooltip: {
trigger: "axis",
formatter: function (params) {
let res = params[0].name + "<br/>"; // 假设 params[0].name 是类别名
params.forEach((item, index) => {
// 生成小圆点的 HTML，使用对应的颜色
let dotHtml = `<span style="display: inline-block; width: 8px; height: 8px; background-color: ${seriesColors[index]}; border-radius: 50%; margin-right: 8px;"></span>`;
// 拼接系列名、值和百分比
let percentage =
((item.value / termDataNum) * 100).toFixed(2) + "%"; // 计算百分比
res += `${dotHtml}${item.seriesName}: ${item.value} (${percentage})<br/>`;
});
return res;
},
},
legend: {
data: this.titleArr,
@ -227,7 +260,12 @@ export default {
xAxis: {
type: "category",
boundaryGap: false,
data: this.tableData.map((item) => item.day),
axisLabel: {
showMaxLabel: true, // 显示最后一个标签
},
data: this.reverseData.map((item) =>
item.day.replace(/^\d{4}-/, "")
),
},
yAxis: {
type: "value",
@ -236,14 +274,14 @@ export default {
{
name: "运维上线数量",
type: "line",
stack: "Total",
data: this.tableData.map((item) => item.termList.length),
data: this.reverseData.map((item) => item.termList.length),
},
{
name: "上图设备数量",
type: "line",
stack: "Total",
data: this.tableData.map(
data: this.reverseData.map(
(item) =>
item.termList.filter((term) => parseInt(term.uploads, 10) > 0)
.length
@ -252,8 +290,8 @@ export default {
{
name: "正常上图设备数量",
type: "line",
stack: "Total",
data: this.tableData.map(
data: this.reverseData.map(
(item) =>
item.termList.filter(
(term) =>

78
src/views/picReport/components/selectLine copy.vue
Unescape Escape View File

@ -0,0 +1,78 @@
<template>
<div class="lineBtn">
<el-button type="primary" @click="dialogVisible = true">选择线路</el-button>
<el-dialog title="提示" :visible.sync="dialogVisible" width="1050px">
<div class="lineList">
<el-checkbox-group v-model="checkList">
<el-checkbox
v-for="item in lineListData"
:label="item.id"
:key="item.id"
>{{ item.name }}</el-checkbox
>
</el-checkbox-group>
<!-- {{ lineListData }} -->
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveCheck">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getLineListJoggle } from "@/utils/api/index";
export default {
data() {
return {
dialogVisible: false,
checkList: [],
lineListData: [],
total: 0,
};
},
mounted() {
this.lineList();
const storedArray = localStorage.getItem("checkListLocal");
if (storedArray) {
// 将JSON字符串转换回数组
this.checkList = JSON.parse(storedArray);
}
},
methods: {
lineList() {
getLineListJoggle({
pageindex: 1,
pagesize: 100,
})
.then((res) => {
this.lineListData = res.data.list;
this.total = res.data.total;
})
.catch((err) => {});
},
saveCheck() {
console.log(this.checkList);
localStorage.setItem("checkListLocal", JSON.stringify(this.checkList));
this.dialogVisible = false;
this.$parent.getTablefun();
},
},
};
</script>
<style lang="less">
.lineBtn {
.el-dialog__body {
padding: 10px;
}
.lineList {
.el-checkbox-group {
.el-checkbox {
width: 220px;
height: 32px;
line-height: 32px;
}
}
}
}
</style>

210
src/views/picReport/index.vue
Unescape Escape View File

@ -27,10 +27,14 @@
</el-form>
<selectLine></selectLine>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button class="exportBtn" type="primary" @click="deviceExport"
>导出列表</el-button
>
</div>
<div class="boxLogTable">
<el-table
id="deciceTable"
v-loading="picLoading"
:data="tableData"
border
@ -38,10 +42,10 @@
style="width: 100%"
height="100%"
>
<el-table-column type="index" width="50" label="序号">
<el-table-column type="index" width="50" label="序号" fixed="left">
</el-table-column>
<el-table-column label="线路" show-overflow-tooltip>
<el-table-column label="线路" fixed="left">
<template slot-scope="scope">
<el-link
type="primary"
@ -51,22 +55,22 @@
>
</template>
</el-table-column>
<el-table-column prop="day" label="日期">
<el-table-column label="日期" fixed="left">
<template slot-scope="scope">
{{ scope.row.dayList[0].day }}
{{ scope.row.dayList[0].day.split(" ")[0] }}
</template>
</el-table-column>
<el-table-column label="装置总数">
<el-table-column label="装置总数" fixed="left">
<template slot-scope="scope">
{{ scope.row.termList.length }}</template
>
</el-table-column>
<el-table-column label="运维上线数量">
<el-table-column label="运维上线数量" width="70px">
<template slot-scope="scope">
{{ scope.row.dayList[0].termList.length }}</template
>
</el-table-column>
<el-table-column label="运维上线率">
<el-table-column label="运维上线率" width="70px">
<template slot-scope="scope">
{{
(
@ -77,7 +81,7 @@
}}</template
>
</el-table-column>
<el-table-column label="上图设备数量">
<el-table-column label="上图设备数量" width="70px">
<template slot-scope="scope">
{{
scope.row.dayList[0].termList.filter(
@ -86,7 +90,7 @@
}}
</template>
</el-table-column>
<el-table-column prop="cmdid" label="上图率">
<el-table-column label="上图率">
<template slot-scope="scope">
{{
(
@ -129,6 +133,171 @@
}}
</template>
</el-table-column>
<el-table-column
label="运维上线数量（昨天）"
width="70px"
class-name="yestoday"
>
<template slot-scope="scope">
{{ scope.row.dayList[1].termList.length }}</template
>
</el-table-column>
<el-table-column
label="运维上线率（昨天）"
width="70px"
class-name="yestoday"
>
<template slot-scope="scope">
{{
(
(scope.row.dayList[1].termList.length /
scope.row.termList.length) *
100
).toFixed(2) + "%"
}}</template
>
</el-table-column>
<el-table-column
label="上图设备数量（昨天）"
width="70px"
class-name="yestoday"
>
<template slot-scope="scope">
{{
scope.row.dayList[1].termList.filter(
(term) => parseInt(term.uploads, 10) > 0
).length
}}
</template>
</el-table-column>
<el-table-column label="上图率（昨天）" class-name="yestoday">
<template slot-scope="scope">
{{
(
(scope.row.dayList[1].termList.filter(
(term) => parseInt(term.uploads, 10) > 0
).length /
scope.row.termList.length) *
100
).toFixed(2) + "%"
}}</template
>
</el-table-column>
<el-table-column label="正常上图设备数量（昨天）" class-name="yestoday">
<template slot-scope="scope">
{{
scope.row.dayList[1].termList.filter(
(term) =>
parseInt(term.uploads, 10) >=
(parseInt(scope.row.line.photoCount, 10) *
parseInt(scope.row.line.photoRate.replace("%", ""), 10)) /
100
).length
}}
</template>
</el-table-column>
<el-table-column label="正常上图率（昨天）" class-name="yestoday">
<template slot-scope="scope">
{{
(
(scope.row.dayList[1].termList.filter(
(term) =>
parseInt(term.uploads, 10) >=
(parseInt(scope.row.line.photoCount, 10) *
parseInt(scope.row.line.photoRate.replace("%", ""), 10)) /
100
).length /
scope.row.termList.length) *
100
).toFixed(2) + "%"
}}
</template>
</el-table-column>
<el-table-column
label="运维上线数量（前天）"
width="70px"
class-name="beforeday"
>
<template slot-scope="scope">
{{ scope.row.dayList[2].termList.length }}</template
>
</el-table-column>
<el-table-column
label="运维上线率（前天）"
width="70px"
class-name="beforeday"
>
<template slot-scope="scope">
{{
(
(scope.row.dayList[2].termList.length /
scope.row.termList.length) *
100
).toFixed(2) + "%"
}}</template
>
</el-table-column>
<el-table-column
label="上图设备数量（前天）"
width="70px"
class-name="beforeday"
>
<template slot-scope="scope">
{{
scope.row.dayList[2].termList.filter(
(term) => parseInt(term.uploads, 10) > 0
).length
}}
</template>
</el-table-column>
<el-table-column label="上图率（前天）" class-name="beforeday">
<template slot-scope="scope">
{{
(
(scope.row.dayList[2].termList.filter(
(term) => parseInt(term.uploads, 10) > 0
).length /
scope.row.termList.length) *
100
).toFixed(2) + "%"
}}</template
>
</el-table-column>
<el-table-column
label="正常上图设备数量（前天）"
class-name="beforeday"
>
<template slot-scope="scope">
{{
scope.row.dayList[2].termList.filter(
(term) =>
parseInt(term.uploads, 10) >=
(parseInt(scope.row.line.photoCount, 10) *
parseInt(scope.row.line.photoRate.replace("%", ""), 10)) /
100
).length
}}
</template>
</el-table-column>
<el-table-column label="正常上图率（前天）" class-name="beforeday">
<template slot-scope="scope">
{{
(
(scope.row.dayList[2].termList.filter(
(term) =>
parseInt(term.uploads, 10) >=
(parseInt(scope.row.line.photoCount, 10) *
parseInt(scope.row.line.photoRate.replace("%", ""), 10)) /
100
).length /
scope.row.termList.length) *
100
).toFixed(2) + "%"
}}
</template>
</el-table-column>
</el-table>
</div>
@ -139,6 +308,8 @@
import { picRportApi } from "@/utils/api/index";
import selectLine from "./components/selectLine";
import lineStatusDialog from "./components/lineStatusDialog";
import htmlToExcel from "@/utils/htmlToExcel";
export default {
name: "picReport",
components: { selectLine, lineStatusDialog },
@ -151,7 +322,9 @@ export default {
},
formdata: {
starttime: new Date(new Date().setHours(0, 0, 0, 0)).getTime(), // 设置开始时间为当天凌晨00:00:00的时间戳,
starttime:
new Date(new Date().setHours(0, 0, 0, 0)).getTime() -
3 * 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: [],
@ -172,6 +345,10 @@ export default {
console.log(this.localSelectLine);
},
methods: {
//导出活动列表表格
deviceExport() {
htmlToExcel.getExcel("#deciceTable", "运维在线率列表");
},
onSubmit() {
if (this.formdata.starttime > this.formdata.endtime) {
return this.$message({
@ -230,7 +407,9 @@ export default {
align-items: center;
height: 32px;
margin-bottom: 12px;
.exportBtn {
margin-left: auto;
}
h3 {
margin-right: 24px;
}
@ -250,7 +429,14 @@ export default {
}
.boxLogTable {
height: calc(100% - 44px);
.yestoday {
background: #b1f5e8 !important;
color: #000;
}
.beforeday {
background: #dfe745 !important;
color: #000;
}
.el-table__cell {
text-align: center;
}

Write Preview
Loading…
Cancel
Save