添加统计报表

menu1.0
郭承 2 months ago
parent 2ea14d17c7
commit ce73915e3f

@ -127,6 +127,10 @@ export default {
index: "/reportData", index: "/reportData",
title: "数据报表", title: "数据报表",
}, },
{
index: "/statisticalReport",
title: "统计报表",
}
], ],
}, },
{ {

@ -273,6 +273,18 @@ const routes = [
name: "icing", name: "icing",
meta: { title: "覆冰监测", keepAlive: true, requiresAuth: true }, meta: { title: "覆冰监测", keepAlive: true, requiresAuth: true },
}, },
//数据报表
{
path: "/statisticalReport",
component: () => import("../views/statisticalReport/index.vue"),
name: "statisticalReport",
meta: {
title: "统计报表",
icon: "",
keepAlive: true,
requiresAuth: true,
},
}
], ],
}, },
{ {

@ -1051,3 +1051,12 @@ export function deletePresetApi(data) {
}, },
}); });
} }
//统计报表查询
export function getStatisticalReport(data){
return request({
url: "/xymanager/getPhotoStat",
method: "post",
data
});
}

@ -0,0 +1,575 @@
<template>
<div class="statisticalReport">
<div class="searchMain">
<div class="searchBox" ref="searchref">
<el-form :inline="true" :model="formdata" class="demo-form-inline">
<el-form-item label="电压等级">
<el-select v-model="formdata.dyid" @change="getSearchxl">
<el-option v-for="item in dyOptions" :key="item.id" :label="item.name" :value="item.id">
{{ item.name }}
</el-option>
</el-select>
</el-form-item>
<el-form-item label="线路名称">
<el-select v-model="formdata.lineid" @change="getSearchgt" filterable>
<el-option v-for="item in xlOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="杆塔名称">
<el-select v-model="formdata.towerid" @change="getSearchzz" filterable>
<el-option v-for="item in gtOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="装置名称">
<el-select v-model="formdata.termid" @change="getSearchtd" filterable>
<el-option v-for="item in zzOptions" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="通道">
<el-select v-model="formdata.channelid">
<el-option v-for="item in tdOptions" :key="item.id" :label="item.alias !== null && item.alias !== ''
? item.alias
: item.name
" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="开始日期">
<el-date-picker v-model="formdata.starttime" type="datetime" placeholder="开始日期"
value-format="timestamp" :picker-options="pickerOptions" default-time="00:00:00">
</el-date-picker>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker v-model="formdata.endtime" type="datetime" default-time="23:59:59"
placeholder="结束日期" value-format="timestamp" :picker-options="pickerOptions" class="ml10">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-input v-model="formdata.search" placeholder="请输入线路/杆塔/设备名称" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit"></el-button>
</el-form-item>
</el-form>
</div>
<div class="pictureBox">
<div class="deviceTable">
<el-table ref="multipleTable" border :data="picList" tooltip-effect="dark" stripe
style="width: 100%" height="calc(120%)" v-loading="loading" highlight-current-row>
<template slot="empty">
<el-empty :image-size="160" description="暂无数据"></el-empty>
</template>
<el-table-column prop="cmdid" label="装置" show-overflow-tooltip
min-width="15%"></el-table-column>
<el-table-column label="通道信息" min-width="80%">
<!-- 分行显示 -->
<template slot-scope="scope">
<el-table :data='scope.row.presetList'>
<el-table-column prop='channelId' label="通道-预置位" width="100px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.channelId }}-{{ scope.row.presetId }}</span>
</template>
</el-table-column>
<el-table-column prop='hours' label="预计拍照" width="100px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.hours.length * 2 }}</span>
</template>
</el-table-column>
<el-table-column prop='total' label="拍照总数" width="100px"
align="center"></el-table-column>
<el-table-column prop='presets' label="多出图片" :formatter="handlePresetsMany"
min-width="35%"></el-table-column>
<el-table-column prop='presets' label="缺少图片" :formatter="handlePresetsFew"
min-width="65%"></el-table-column>
</el-table>
</template>
</el-table-column>
<!-- <el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click.native.stop="handleResive(scope.row)" type="text">修改</el-button>
<el-button type="text" class="deleteText"
@click.native.stop="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column> -->
</el-table>
<!-- <div class="pageNation">
<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
:current-page="page" :page-size="pageSize" layout="sizes, prev, pager, next, jumper,total"
:total="total" background>
</el-pagination>
</div> -->
</div>
</div>
</div>
</div>
</template>
<script>
import {
getSearchInfo,
getRealtimePhoto,
deletePicList,
getStatisticalReport,
} from "@/utils/api/index";
import defaultImage from "../../assets/img/nodatapic2.jpg";
export default {
name: "statisticalReport",
data() {
return {
pickerOptions: {
disabledDate(date) {
return date.getTime() > Date.now(); //
},
},
picList: [],
dyOptions: [{ id: -1, name: "全部" }], //
xlOptions: [{ id: -1, name: "全部" }], //线
gtOptions: [{ id: -1, name: "全部" }], //
zzOptions: [{ id: -1, name: "全部" }], //
tdOptions: [{ id: -1, name: "全部", alias: null }], //
formdata: {
dyid: -1,
lineid: -1,
towerid: -1,
channelid: -1,
termid: -1,
search: "",
},
tdTermid: "",
page: 1, //
pageSize: 20, //
total: 0, //
loading: false,
signtype: 0, //0
};
},
created() {
var that = this;
document.onkeydown = function (e) {
var key = window.event.keyCode;
if (key === 13) {
that.onSubmit(); //
}
};
},
mounted() {
this.$set(this.formdata, "endtime", new Date().getTime());
if (JSON.stringify(this.$route.query) === "{}") {
this.$set(
this.formdata,
"starttime",
new Date(new Date().toLocaleDateString()).getTime()
);
this.getSearchdy();
} else {
this.getSearchdy();
this.formdata.dyid = this.$route.query.dyId;
this.formdata.lineid = this.$route.query.lineId;
this.formdata.towerid = this.$route.query.towerId;
this.formdata.channelid = this.$route.query.channelId;
this.formdata.termid = this.$route.query.termId;
this.$set(this.formdata, "starttime", Number(this.$route.query.date));
this.getPicData();
}
},
methods: {
//
handlePresetsMany(row, column, cellValue) {
if (row.wrongCount == 0) {
return "无";
} else {
var txt = "";
row.hours.forEach(data => {
if (data.base < data.timeList.length) {
let hour = parseInt(data.hour.substring(11,13));
txt += hour + "点" + data.wrongDetail + "张 , ";
return;
}
});
if ("" == txt) {
return "无";
} else {
return txt;
}
}
},
//
handlePresetsFew(row, column, cellValue) {
if (row.wrongCount == 0) {
return "无";
} else {
var txt = "";
row.hours.forEach(data => {
if (data.base > data.timeList.length) {
let hour = data.hour.substring(11,13);
//30
let da = 0;
//30
let xi = 0;
data.timeList.forEach(timedata => {
let min = parseInt(timedata.substring(11,13));
if ( min > 30 ) {
da++;
} else if ( min < 30 ) {
xi++;
}
});
if ( da == 0 ) {
txt += hour + ":30点少1张 , ";
}
if ( xi == 0 ) {
txt += hour + ":00点少1张 , ";
}
return;
}
});
if ("" == txt) {
return "无";
} else {
return txt;
}
}
},
setDefaultImage(e) {
e.target.src = defaultImage;
},
//
getSearchdy() {
getSearchInfo({ type: 1 })
.then((res) => {
this.dyOptions = this.dyOptions.concat(res.data.list);
console.log(this.dyOptions);
if (JSON.stringify(this.$route.query) === "{}") {
this.formdata.dyid = this.dyOptions[0].id;
} else {
this.formdata.dyid = Number(this.$route.query.dyId);
}
this.getSearchxl();
})
.catch((err) => { });
},
//线
getSearchxl() {
getSearchInfo({ type: 2, id: this.formdata.dyid })
.then((res) => {
this.xlOptions = [{ id: -1, name: "全部" }];
this.xlOptions = this.xlOptions.concat(res.data.list);
if (JSON.stringify(this.$route.query) === "{}") {
this.formdata.lineid = this.xlOptions[0].id;
} else {
this.formdata.lineid = Number(this.$route.query.lineId);
}
this.getSearchgt();
})
.catch((err) => { });
},
//
getSearchgt() {
getSearchInfo({ type: 3, id: this.formdata.lineid })
.then((res) => {
this.gtOptions = [{ id: -1, name: "全部" }];
this.gtOptions = this.gtOptions.concat(res.data.list);
// this.formdata.towerid = this.gtOptions[0].id;
if (JSON.stringify(this.$route.query) === "{}") {
this.formdata.towerid = this.gtOptions[0].id;
} else {
this.formdata.towerid = Number(this.$route.query.towerId);
}
this.getSearchzz();
})
.catch((err) => { });
},
//
getSearchzz() {
getSearchInfo({ type: 4, id: this.formdata.towerid })
.then((res) => {
this.zzOptions = [{ id: -1, name: "全部" }];
this.zzOptions = this.zzOptions.concat(res.data.list);
// this.formdata.termid = this.zzOptions[0].id;
console.log("切换了杆塔");
// console.log(this.formdata.termid);
// console.log(this.zzOptions[0].id);
// this.formdata.termid = this.zzOptions[0].id;
// console.log(this.formdata.termid);
if (JSON.stringify(this.$route.query) === "{}") {
this.formdata.termid = this.zzOptions[0].id;
} else {
this.formdata.termid = Number(this.$route.query.termId);
}
this.getSearchtd();
})
.catch((err) => { });
},
//
getSearchtd() {
getSearchInfo({ type: 5, id: this.formdata.termid })
.then((res) => {
this.tdOptions = [{ id: -1, name: "全部", alias: null }];
this.tdOptions = this.tdOptions.concat(res.data.list);
if (JSON.stringify(this.$route.query) === "{}") {
this.formdata.channelid = this.tdOptions[0].id;
} else {
this.formdata.channelid = Number(this.$route.query.channelId);
}
//this.getPicData();
})
.catch((err) => { });
},
getSearchtdAlone() {
getSearchInfo({ type: 5, id: this.tdTermid })
.then((res) => {
this.tdOptions = [{ id: -1, name: "全部", alias: null }];
this.tdOptions = this.tdOptions.concat(res.data.list);
})
.catch((err) => { });
},
//
getPicData() {
this.loading = true;
this.$set(this.formdata, "pageindex", this.page);
this.$set(this.formdata, "pagesize", this.pageSize);
// console.log(this.formdata);
getStatisticalReport(this.formdata).then((res) => {
this.picList = [];
//presetList
let dataList = res.data;
dataList.forEach(a => {
var presetList = [];
a.channels.forEach(b => {
b.presets.forEach(c => {
c.channelId = b.channelId;
presetList.push(c);
});
});
a.presetList = presetList;
});
this.picList = dataList;
this.loading = false;
// console.log(res.data);
}).catch((err) => {
this.loading = false;
console.log(err);
});
},
//
onSubmit() {
if (this.formdata.starttime > this.formdata.endtime) {
return this.$message({
duration: 1500,
showClose: true,
message: "开始日期不能大于结束日期",
type: "warning",
});
}
this.page = 1;
this.getPicData();
},
//
handleCurrentChange(val) {
this.page = val;
//this.picList = [];
this.getPicData();
},
//
handleSizeChange(val) {
this.pageSize = val;
this.getPicData();
},
deletePic(val) {
console.log(val);
let deleteArr = [];
deleteArr.push(val.picid);
console.log(deleteArr);
deletePicList({ list: deleteArr })
.then((res) => {
console.log(res);
this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$message({
type: "success",
showClose: true,
message: "删除成功!",
});
this.getPicData();
})
.catch(() => {
this.$message({
type: "info",
showClose: true,
message: "已取消删除",
});
});
})
.catch((err) => { });
},
},
};
</script>
<style lang="less">
.statisticalReport {
width: calc(100% - 24px);
height: calc(100% - 24px);
padding: 12px 12px;
background: #fff;
.deviceTable {
height: calc(100% - 94px);
//background: #fcc;
}
.searchMain {
border: 1px solid #dddddd;
height: calc(100% - 22px);
padding: 12px;
border-radius: 4px;
.ml10 {
margin-left: 10px;
}
}
.pictureBox {
// display: flex;
// // justify-content: space-around;
// flex-wrap: wrap;
height: calc(100% - 135px);
// max-height: calc(100% - 135px);
border: 1px solid #eee;
.picShowBox {
height: 100%;
overflow: auto;
}
.imgList {
width: calc((100% - 104px) / 4);
position: relative;
display: inline-block;
margin: 8px;
position: relative;
padding: 4px;
border-radius: 3px;
background: #fff;
height: 200px;
.el-card__body {
padding: 0px;
height: 100%;
}
.bigpic {
width: 100%;
height: 100%;
//background-size: 100% 100%;
position: relative;
.el-image {
width: 100%;
height: 100%;
.el-image__placeholder {
background: url(../../assets/img/nopicbg.png) no-repeat center;
background-size: 20% 20%;
}
img {
cursor: pointer;
width: 100%;
height: 200px;
}
}
&:hover {
.deleteBox {
display: block;
}
}
}
.caption {
position: absolute;
bottom: 0px;
background: #169e8ca1;
width: calc(100% - 8px);
padding: 4px;
color: #333;
.infoTop {
font-size: 16px;
color: #fff;
font-weight: normal;
margin-top: 2px;
padding-left: 5px;
padding-right: 5px;
}
.infoBottom {
color: #fff;
font-size: 12px;
font-weight: normal;
margin-top: 6px;
padding-left: 5px;
padding-right: 5px;
}
}
.deleteBox {
position: absolute;
right: 4px;
top: 4px;
z-index: 2;
display: none;
.el-button {
width: auto;
background: rgba(0, 0, 0, 0.5);
border: 1px solid transparent;
color: #fff;
font-size: 16px;
padding: 3px;
}
&:hover {
.el-button {
background: #f56c6c;
//color: #f56c6c;
}
}
}
}
.el-loading-mask {
background-color: rgba(255, 255, 255, 0.4);
}
.noPicBox {
display: flex;
width: 100%;
height: calc(100% - 86px);
overflow: auto;
.el-empty {
margin: auto;
}
}
}
}
</style>
Loading…
Cancel
Save