数据报表添加

menu1.0
fanluyan 1 month ago
parent b033caa832
commit 1bbfb99084

@ -1052,7 +1052,7 @@ export function deletePresetApi(data) {
});
}
//统计报表查询
//统计报表查询--废弃
export function getStatisticalReport(data) {
return request({
url: "/xymanager/getPhotoStat",
@ -1060,3 +1060,11 @@ export function getStatisticalReport(data) {
data,
});
}
//新统计报表查询
export function getReportApi(data) {
return request({
url: "/xymanager/terminal/getScheduleStat",
method: "post",
data,
});
}

@ -0,0 +1,656 @@
<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="活动" class="activitybox"
v-if="roleName === 'superadmin' || roleName === 'Matthew'">
<el-select @keyup.enter.native="onSubmit()" v-model="formdata.activityId" filterable
@change="changeActive">
<el-option v-for="item in activityOptions" :key="item.id" :label="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> -->
<span>{{ scope.row.scheduleList.length }}</span>
<!-- <el-tooltip placement="top">
<div slot="content">{{scope.row.hours.length}}</div>
<span>{{ scope.row.hours.length * 2 }}</span>
</el-tooltip> -->
</template>
</el-table-column>
<el-table-column prop='total' label="拍照总数" width="100px"
align="center"></el-table-column>
<el-table-column prop='presets' label="多出数量" width="100px" align="center">
<!-- <template #default="{ row }">
<el-tooltip placement="top" popper-class="eltooltip">
<div slot="content">{{ handlePresetsMany(row).txt }}</div>
<span>{{ handlePresetsMany(row).number }}</span>
</el-tooltip>
</template> -->
<template slot-scope="scope">
<span>{{scope.row.timeList.length}}</span>
</template>
</el-table-column>
<!-- <el-table-column prop='' label='缺少数量' width="100px" :formatter="countLackPicture"
align="center"></el-table-column> -->
<el-table-column prop='wrongCount' label='异常数量' width="100px" align="center"></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,
getScheduleOne,
getScheduleList,
} from "@/utils/api/index";
import {
getActivityApi,
} from "@/utils/api/reportApi";
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 }], //
activityOptions: [{ id: -1, name: "全部" }], //
formdata: {
dyid: -1,
lineid: -1,
towerid: -1,
channelid: -1,
termid: -1,
search: "",
activityId: -1
},
tdTermid: "",
page: 1, //
pageSize: 20, //
total: 0, //
loading: false,
signtype: 0, //0
scheduleRule: {}, //
};
},
created() {
var that = this;
this.roleName = localStorage.getItem("userName");
document.onkeydown = function (e) {
var key = window.event.keyCode;
if (key === 13) {
that.onSubmit(); //
}
};
},
mounted() {
this.getactiveList();
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.formdata.activityId = this.$route.query.activityId;
this.$set(this.formdata, "starttime", Number(this.$route.query.date));
this.getPicData();
}
},
methods: {
//
assumeTakePic(row){
console.log(row);
return "123";
},
//
handlePresetsMany(row) {
let result = { txt: "", number: 0 };
// if (row.wrongCount == 0) {
// return result;
// } else {
// row.hours.forEach(data => {
// if (data.base < data.timeList.length) {
// let hour = parseInt(data.hour.substring(11, 13));
// result.txt += hour + "" + data.wrongDetail + " , ";
// result.number += data.timeList.length - data.base;
// }
// });
// }
if (result.txt == "") {
result.txt = "无";
}
return result;
},
//
handlePresetsFew(row, column, cellValue) {
let txt = "";
row.scheduleList.forEach(data => {
if ( data.timeList.length == 0 ) {
let hour = data.hour;
if ( hour < 10 ) {
hour = "0" + hour;
}
let minute = data.minute;
if ( data.minute < 10 ){
minute = "0" + minute;
}
txt += hour + ":" + minute + ",";
}
});
if ("" == txt) {
return "无";
} else {
return txt;
}
},
//
countLackPicture(row, column, cellValue) {
let number = 0;
// if (row.wrongCount == 0) {
// return number;
// } else {
// row.hours.forEach(data => {
// if (data.base > data.timeList.length) {
// number += data.base - data.timeList.length;
// }
// });
// }
return number;
},
//
statuteHandle(protocol, val) {
},
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) => { });
},
//
getactiveList() {
getActivityApi().then((res) => {
// this.activityOptions = this.activityOptions.concat(res.data.list);
let activeArr = res.data.map((item) => ({
id: item.id,
name: item.title,
}));
this.activityOptions = this.activityOptions.concat(activeArr);
this.formdata.activityId = this.activityOptions[0].id;
// this.formdata.activityId =
// JSON.parse(localStorage.getItem("activeId")) !== null
// ? JSON.parse(localStorage.getItem("activeId"))
// : this.activityOptions[0].id;
}).catch((err) => { });
},
changeActive(val) {
this.formdata.activityId = val;
},
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);
// this.$set(this.formdata, "activityId", 10149);
// getScheduleList().then((res) => {
// res.data.forEach(obj => {
// this.scheduleRule['key' + obj.termId + obj.channelId] = obj;
// });
// // console.log(this.scheduleRule);
// }).catch((err) => { });
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;
});
// console.log(dataList);
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;
}
}
}
}
.eltooltip {
max-width: 50%;
}
</style>

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save