ly.fan
/
xy-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化报表

Browse Source
jc
fanluyan 1 year ago
parent 85423ae3ad
commit 8d8fd19e5d
6 changed files with 171 additions and 37 deletions
Show Stats Download Patch File Download Diff File

20
src/views/realTimeMonitor/components/carouselChart.vue
Unescape Escape View File

@ -96,8 +96,8 @@
> >
<!-- <el-image v-lazy="item.path + '!260x160'"></el-image> --> <!-- <el-image v-lazy="item.path + '!260x160'"></el-image> -->
<img v-lazy="item.path + '!260x160'" /> <img v-lazy="item.path + '!260x160'" />
<!-- :class="{ alarmSpan: item.isAlarm === 1 }" -->
<p class="timeInfo" :class="{ alarmSpan: item.isAlarm === 1 }"> <p class="timeInfo">
<el-tooltip <el-tooltip
class="item" class="item"
effect="dark" effect="dark"
@ -124,7 +124,7 @@
: item.channelName : item.channelName
}}</span }}</span
> >
<span class="alarmSpan" v-if="item.isAlarm == 1">(已告警)</span> <!-- <span class="alarmSpan" v-if="item.isAlarm == 1">(已告警)</span> -->
</p> </p>
</div> </div>
<div class="picBox" v-else-if="item.mediaType == 1"> <div class="picBox" v-else-if="item.mediaType == 1">
@ -465,7 +465,7 @@ export default {
//设置线条颜色，必须放在绘制之前 //设置线条颜色，必须放在绘制之前
this.ctx.strokeStyle = "#ff0000"; this.ctx.strokeStyle = "#ff0000";
// 线宽设置，必须放在绘制之前 // 线宽设置，必须放在绘制之前
this.ctx.lineWidth = 1; this.ctx.lineWidth = 2;
this.labelMarkArrs = data.alarmlist; this.labelMarkArrs = data.alarmlist;
this.recArrs = []; this.recArrs = [];
for (var i = 0; i < this.labelMarkArrs.length; i++) { for (var i = 0; i < this.labelMarkArrs.length; i++) {
@ -545,7 +545,7 @@ export default {
//设置线条颜色，必须放在绘制之前 //设置线条颜色，必须放在绘制之前
this.ctx.strokeStyle = "#ff0000"; this.ctx.strokeStyle = "#ff0000";
// 线宽设置，必须放在绘制之前 // 线宽设置，必须放在绘制之前
this.ctx.lineWidth = 1; this.ctx.lineWidth = 2;
this.labelMarkArrs = data.alarmlist; this.labelMarkArrs = data.alarmlist;
this.recArrs = []; this.recArrs = [];
for (var i = 0; i < this.labelMarkArrs.length; i++) { for (var i = 0; i < this.labelMarkArrs.length; i++) {
@ -560,11 +560,7 @@ export default {
(this.labelMarkArrs[i].height * this.canvas.height) / 2, (this.labelMarkArrs[i].height * this.canvas.height) / 2,
w: this.labelMarkArrs[i].width * this.canvas.width, w: this.labelMarkArrs[i].width * this.canvas.width,
h: this.labelMarkArrs[i].height * this.canvas.height, h: this.labelMarkArrs[i].height * this.canvas.height,
text: text: this.labelMarkArrs[i].enname + this.labelMarkArrs[i].prob + "%",
this.labelMarkArrs[i].enname +
"&amp;nbsp;&amp;nbsp;" +
this.labelMarkArrs[i].prob +
"%",
type: this.labelMarkArrs[i].label, type: this.labelMarkArrs[i].label,
}); });
} }
@ -574,7 +570,7 @@ export default {
// >2的判断是为了防止误触画出来的数据 // >2的判断是为了防止误触画出来的数据
if (this.recArrs[i].w > 2 && this.recArrs[i].h > 2) { if (this.recArrs[i].w > 2 && this.recArrs[i].h > 2) {
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.lineWidth = 1; // 矩形框的线条宽度 this.ctx.lineWidth = 2; // 矩形框的线条宽度
this.ctx.strokeStyle = "rgb(255, 255, 0)"; // 矩形框的线条颜色 this.ctx.strokeStyle = "rgb(255, 255, 0)"; // 矩形框的线条颜色
// 设置填充样式 // 设置填充样式
// this.ctx.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明 // this.ctx.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明
@ -593,7 +589,7 @@ export default {
// 如果有文本信息，填充文本信息 // 如果有文本信息，填充文本信息
if (this.recArrs[i].text) { if (this.recArrs[i].text) {
this.ctx.font = "100 16px 微软雅黑"; this.ctx.font = "100 16px 微软雅黑";
this.ctx.lineWidth = 1; this.ctx.lineWidth = 2;
this.ctx.strokeStyle = "rgb(255,255,0)"; this.ctx.strokeStyle = "rgb(255,255,0)";
this.ctx.strokeText( this.ctx.strokeText(
this.recArrs[i].text, this.recArrs[i].text,

51
src/views/reportData/index.vue
Unescape Escape View File

@ -3,10 +3,27 @@
<!-- <div class="reoprtContain"></div> --> <!-- <div class="reoprtContain"></div> -->
<el-tabs type="border-card" @tab-click="handleTabClick"> <el-tabs type="border-card" @tab-click="handleTabClick">
<el-tab-pane label="照片统计"> <el-tab-pane label="照片统计">
<span slot="label">
照片统计
<el-button
@click.stop="handlePicSearch"
v-if="picSearchFlag"
type="primary"
icon="el-icon-search"
></el-button>
</span>
<photostatis ref="photoStatisRef"></photostatis> <photostatis ref="photoStatisRef"></photostatis>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="设备状态列表" <el-tab-pane label="设备状态列表">
><equipmentStatus ref="equipmentStatusRef"></equipmentStatus <span slot="label">
设备状态列表
<el-button
v-if="statusFlag"
type="primary"
icon="el-icon-search"
></el-button>
</span>
<equipmentStatus ref="equipmentStatusRef"></equipmentStatus
></el-tab-pane> ></el-tab-pane>
<!-- <el-tab-pane label="角色管理">角色管理</el-tab-pane> <!-- <el-tab-pane label="角色管理">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> --> <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> -->
@ -25,7 +42,10 @@ export default {
equipmentStatus, equipmentStatus,
}, },
data() { data() {
return {}; return {
picSearchFlag: true,
statusFlag: false,
};
}, },
created() {}, created() {},
mounted() {}, mounted() {},
@ -34,12 +54,17 @@ export default {
handleTabClick(tab, event) { handleTabClick(tab, event) {
// 当标签页被点击时触发 // 当标签页被点击时触发
const tabName = tab.label; const tabName = tab.label;
console.log(tab);
if (tabName === "照片统计") { if (tabName === "照片统计") {
this.picSearchFlag = true;
this.statusFlag = false;
// 调用照片统计组件的方法 // 调用照片统计组件的方法
if (this.$refs.photoStatisRef) { if (this.$refs.photoStatisRef) {
this.$refs.photoStatisRef.onSubmit(); // 假设someMethod是你要调用的方法 this.$refs.photoStatisRef.onSubmit(); // 假设someMethod是你要调用的方法
} }
} else if (tabName === "设备状态列表") { } else if (tabName === "设备状态列表") {
this.picSearchFlag = false;
this.statusFlag = true;
// 调用设备状态列表组件的方法 // 调用设备状态列表组件的方法
if (this.$refs.equipmentStatusRef) { if (this.$refs.equipmentStatusRef) {
this.$refs.equipmentStatusRef.onSubmit(); // 假设someOtherMethod是你要调用的方法 this.$refs.equipmentStatusRef.onSubmit(); // 假设someOtherMethod是你要调用的方法
@ -47,6 +72,10 @@ export default {
} }
// 可以继续添加其他标签页的逻辑 // 可以继续添加其他标签页的逻辑
}, },
handlePicSearch() {
console.log("aaaaaaaaaaaa");
this.$refs.photoStatisRef.showSearch();
},
}, },
}; };
</script> </script>
@ -55,12 +84,22 @@ export default {
width: calc(100% - 24px); width: calc(100% - 24px);
height: calc(100% - 24px); height: calc(100% - 24px);
padding: 12px 12px; padding: 12px 12px;
.el-tabs--border-card > .el-tabs__content {
padding: 8px;
}
.el-tabs { .el-tabs {
height: 100%; height: 100%;
.el-tabs__header {
.el-button--default,
.el-button--primary {
width: auto;
margin-left: 12px;
}
}
.el-tabs__content { .el-tabs__content {
height: calc(100% - 69px); height: calc(100% - 65px);
overflow: auto; //overflow: auto;
.el-tab-pane { .el-tab-pane {
height: 100%; height: 100%;
} }

18
src/views/reportData/photostatis/components/ipDialog.vue
Unescape Escape View File

@ -19,6 +19,7 @@
style="width: 100%" style="width: 100%"
height="calc(100% - 0px)" height="calc(100% - 0px)"
fit fit
border
> >
<template slot="empty"> <template slot="empty">
<el-empty :image-size="160" description="暂无数据"></el-empty> <el-empty :image-size="160" description="暂无数据"></el-empty>
@ -111,6 +112,23 @@ export default {
} }
.ipContain { .ipContain {
height: 100%; height: 100%;
.el-table {
color: #000;
thead {
color: #000;
font-weight: bold;
}
th.el-table__cell {
background: #dcdcdc !important;
}
td.el-table__cell,
th.el-table__cell.is-leaf {
border-bottom: 1px solid #dcdcdc;
}
.el-table__cell {
border-right: 1px solid #dcdcdc;
}
}
} }
.headInfo { .headInfo {
position: absolute; position: absolute;

24
src/views/reportData/photostatis/components/photoList.vue
Unescape Escape View File

@ -20,11 +20,11 @@
v-loading="picloading" v-loading="picloading"
ref="multipleTable" ref="multipleTable"
:data="picListData" :data="picListData"
tooltip-effect="dark"
stripe stripe
tooltip-effect="dark"
style="width: 100%" style="width: 100%"
height="calc(100% - 0px)" height="calc(100% - 0px)"
fit border
> >
<template slot="empty"> <template slot="empty">
<el-empty :image-size="160" description="暂无数据"></el-empty> <el-empty :image-size="160" description="暂无数据"></el-empty>
@ -35,7 +35,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="照片Id" prop="picid"> </el-table-column> <!-- <el-table-column label="照片Id" prop="picid"> </el-table-column> -->
<el-table-column label="通道号" prop="channnelname"> </el-table-column> <el-table-column label="通道号" prop="channnelname"> </el-table-column>
<el-table-column label="预置位" prop="presetId"> </el-table-column> <el-table-column label="预置位" prop="presetId"> </el-table-column>
<el-table-column label="收到时间" prop="recvTime"> </el-table-column> <el-table-column label="收到时间" prop="recvTime"> </el-table-column>
@ -53,6 +53,7 @@
:src="scope.row.path" :src="scope.row.path"
> >
</el-image> </el-image>
{{ scope.row.picid }}
</a> </a>
</template> </template>
</el-table-column> </el-table-column>
@ -191,6 +192,23 @@ export default {
} }
.ipContain { .ipContain {
height: calc(100% - 40px); height: calc(100% - 40px);
.el-table {
color: #000;
thead {
color: #000;
font-weight: bold;
}
th.el-table__cell {
background: #dcdcdc !important;
}
td.el-table__cell,
th.el-table__cell.is-leaf {
border-bottom: 1px solid #dcdcdc;
}
.el-table__cell {
border-right: 1px solid #dcdcdc;
}
}
} }
} }
.el-dialog__headerbtn { .el-dialog__headerbtn {

93
src/views/reportData/photostatis/index.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<template> <template>
<div class="photoStatisBox"> <div class="photoStatisBox" :height="statisHeight" ref="statisRef">
<div class="searchBox" ref="searchref"> <div class="searchBox" ref="searchref" v-if="drawerSearch">
<el-form :inline="true" :model="formdata" class="demo-form-inline"> <el-form :inline="true" :model="formdata" class="demo-form-inline">
<el-form-item label="电压等级" class="dyclass"> <el-form-item label="电压等级" class="dyclass">
<el-select v-model="formdata.dyid" @change="getSearchxl"> <el-select v-model="formdata.dyid" @change="getSearchxl">
@ -64,14 +64,14 @@
> >
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item label="模糊查询" class="schclass">
<el-input <el-input
v-model="formdata.search" v-model="formdata.search"
placeholder="请输入线路/杆塔/设备名称" placeholder="请输入线路/杆塔/设备名称"
clearable clearable
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item class="onsubBtn">
<el-button type="primary" @click="onSubmit">查询</el-button> <el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -84,7 +84,7 @@
tooltip-effect="dark" tooltip-effect="dark"
stripe stripe
style="width: 100%" style="width: 100%"
height="calc(100% - 0px)" :height="tableheight"
fit fit
> >
<template slot="empty"> <template slot="empty">
@ -95,17 +95,18 @@
{{ (page - 1) * pageSize + scope.$index + 1 }} {{ (page - 1) * pageSize + scope.$index + 1 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="id" label="ID" width="80px"> </el-table-column> <!-- <el-table-column prop="id" label="ID" width="80px"> </el-table-column> -->
<el-table-column prop="dyName" label="电压等级"> </el-table-column> <el-table-column prop="dyName" label="电压等级"> </el-table-column>
<el-table-column prop="lineName" label="线路名称"> </el-table-column> <el-table-column prop="lineName" label="线路名称" show-overflow-tooltip>
</el-table-column>
<el-table-column <el-table-column
prop="towerName" prop="towerName"
label="杆塔名称" label="杆塔名称"
width="180" min-width="180"
show-overflow-tooltip show-overflow-tooltip
> >
</el-table-column> </el-table-column>
<el-table-column prop="cmdid" label="装置id"> <el-table-column prop="cmdid" label="装置id" min-width="140">
<template slot-scope="scope"> <template slot-scope="scope">
<el-link <el-link
type="primary" type="primary"
@ -115,8 +116,13 @@
></template ></template
> >
</el-table-column> </el-table-column>
<el-table-column prop="protocolName" label="规约"> </el-table-column> <el-table-column prop="protocolName" label="规约" show-overflow-tooltip>
<el-table-column prop="lastHeartbeat" label="最后心跳时间"> </el-table-column>
<el-table-column
prop="lastHeartbeat"
label="最后心跳时间"
min-width="130"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-link <el-link
type="primary" type="primary"
@ -132,18 +138,30 @@
></template ></template
> >
</el-table-column> </el-table-column>
<el-table-column prop="firstPhotoTime" label="当天第一张照片时间"> <el-table-column
prop="firstPhotoTime"
label="当天第一张照片时间"
min-width="130"
>
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.photoInfo.firstPhotoTime }} {{ scope.row.photoInfo.firstPhotoTime }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="lastRecvTime" label="照片最后接收时间"> <el-table-column
prop="lastRecvTime"
label="照片最后接收时间"
min-width="130"
>
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.photoInfo.lastRecvTime }} {{ scope.row.photoInfo.lastRecvTime }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="rebootCount" label="重启次数"> </el-table-column> <el-table-column prop="rebootCount" label="重启次数"> </el-table-column>
<el-table-column prop="workingStatus.bootTime" label="最后重启时间"> <el-table-column
prop="workingStatus.bootTime"
label="最后重启时间"
min-width="130"
>
<template slot-scope="scope"> <template slot-scope="scope">
{{ {{
scope.row.workingStatus.bootTime == null || scope.row.workingStatus.bootTime == null ||
@ -174,6 +192,7 @@
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
<ipDialog ref="ipDialogref"></ipDialog> <ipDialog ref="ipDialogref"></ipDialog>
<photoDialog ref="photoDialogref"></photoDialog> <photoDialog ref="photoDialogref"></photoDialog>
</div> </div>
@ -219,6 +238,8 @@ export default {
pageSize: 20, // 每页数量 pageSize: 20, // 每页数量
total: 0, //总条数 total: 0, //总条数
photoLoading: false, photoLoading: false,
drawerSearch: false,
tableheight: "100%",
}; };
}, },
created() {}, created() {},
@ -328,13 +349,38 @@ export default {
handleShowIp(row) { handleShowIp(row) {
this.$refs.ipDialogref.display(row); this.$refs.ipDialogref.display(row);
}, },
showSearch() {
this.drawerSearch = !this.drawerSearch;
console.log(this.drawerSearch);
this.$nextTick(() => {
if (this.drawerSearch) {
// 如果抽屉现在是可见的，获取其高度
console.log(this.$refs.statisRef.offsetHeight);
const searchBoxHeight = this.$refs.searchref.offsetHeight;
console.log("搜索框的高度:", searchBoxHeight);
this.tableheight =
this.$refs.statisRef.offsetHeight - searchBoxHeight - 36;
console.log(this.tableheight);
} else {
this.tableheight = "100%";
}
});
},
}, },
}; };
</script> </script>
<style lang="less"> <style lang="less">
.photoStatisBox { .photoStatisBox {
height: 100%; height: 100%;
//background-color: #fcc;
.searchBox { .searchBox {
.el-form {
.el-form-item--small.el-form-item {
margin-bottom: 8px;
}
}
.dyclass { .dyclass {
.el-select { .el-select {
width: 120px; width: 120px;
@ -363,7 +409,7 @@ export default {
} }
} }
.deviceTable { .deviceTable {
height: calc(100% - 94px); height: calc(100% - 32px);
//background: #fcc; //background: #fcc;
.el-table { .el-table {
.cell { .cell {
@ -371,6 +417,23 @@ export default {
vertical-align: middle; /* 如果需要垂直居中 */ vertical-align: middle; /* 如果需要垂直居中 */
} }
} }
.el-table {
color: #000;
thead {
color: #000;
font-weight: bold;
}
th.el-table__cell {
background: #dcdcdc !important;
}
td.el-table__cell,
th.el-table__cell.is-leaf {
border-bottom: 1px solid #dcdcdc;
}
.el-table__cell {
border-right: 1px solid #dcdcdc;
}
}
} }
} }
</style> </style>

2
src/views/system/drawPic.vue
Unescape Escape View File

@ -98,7 +98,7 @@ export default {
6: "山火", 6: "山火",
7: "烟雾", 7: "烟雾",
8: "导线异物体", 8: "导线异物体",
9: "导线义务防尘网", 9: "导线异物防尘网",
}, },
// 保存矩形数据 // 保存矩形数据

Write Preview
Loading…
Cancel
Save