|
|
<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="电压等级" class="dyClass">
|
|
|
<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" 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="活动"
|
|
|
class="activitybox"
|
|
|
v-if="
|
|
|
roleName === 'superadmin' ||
|
|
|
roleName === 'Matthew' ||
|
|
|
roleName === 'SCB'
|
|
|
"
|
|
|
>
|
|
|
<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 label="采样周期" class="intervalClass">
|
|
|
<el-input
|
|
|
v-model="formdata.interval"
|
|
|
placeholder="请输入采样周期"
|
|
|
clearable
|
|
|
></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="onSubmit" :disabled="searchFlag"
|
|
|
>查询</el-button
|
|
|
>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
|
|
|
<div class="pictureBox">
|
|
|
<div class="deviceTable">
|
|
|
<el-table
|
|
|
ref="multipleTable"
|
|
|
border
|
|
|
:data="lastDataArray"
|
|
|
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="装置"></el-table-column>
|
|
|
|
|
|
<el-table-column label="图片数据" prop="photoTimePoint">
|
|
|
<template slot-scope="scope">
|
|
|
<span class="pre-format">{{ scope.row.photoTimePoint }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="覆冰数据" prop="pullPoint">
|
|
|
<template slot-scope="scope">
|
|
|
<span class="pre-format">{{ scope.row.pullPoint }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="天气数据" prop="weatherPoint">
|
|
|
<template slot-scope="scope">
|
|
|
<span class="pre-format">{{ scope.row.weatherPoint }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getSearchInfo, getReportApi } from "@/utils/api/index";
|
|
|
import { getActivityApi } from "@/utils/api/reportApi";
|
|
|
export default {
|
|
|
name: "statisticalReport",
|
|
|
data() {
|
|
|
return {
|
|
|
searchFlag: true,
|
|
|
pickerOptions: {
|
|
|
disabledDate(date) {
|
|
|
return date.getTime() > Date.now(); // 禁用大于今天的日期
|
|
|
},
|
|
|
},
|
|
|
dyOptions: [{ id: -1, name: "全部" }], //电压数据
|
|
|
xlOptions: [{ id: -1, name: "全部" }], //线路数据
|
|
|
activityOptions: [{ id: -1, name: "全部" }], //活动
|
|
|
formdata: {
|
|
|
dyid: -1,
|
|
|
lineid: -1,
|
|
|
towerid: -1,
|
|
|
channelid: -1,
|
|
|
interval: 10,
|
|
|
search: "",
|
|
|
activityId: -1,
|
|
|
},
|
|
|
dataArray: [],
|
|
|
lastDataArray: [],
|
|
|
page: 1, // 当前页数
|
|
|
pageSize: 20, // 每页数量
|
|
|
tdTermid: "",
|
|
|
loading: false,
|
|
|
};
|
|
|
},
|
|
|
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());
|
|
|
this.$set(
|
|
|
this.formdata,
|
|
|
"starttime",
|
|
|
new Date(new Date().toLocaleDateString()).getTime()
|
|
|
);
|
|
|
},
|
|
|
methods: {
|
|
|
//获取电压信息
|
|
|
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);
|
|
|
}
|
|
|
})
|
|
|
.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);
|
|
|
console.log(this.activityOptions);
|
|
|
this.formdata.activityId = this.activityOptions[1].id;
|
|
|
this.searchFlag = false;
|
|
|
})
|
|
|
.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;
|
|
|
console.log(this.formdata);
|
|
|
this.$set(this.formdata, "pageindex", this.page);
|
|
|
this.$set(this.formdata, "pagesize", this.pageSize);
|
|
|
getReportApi(this.formdata)
|
|
|
.then((res) => {
|
|
|
console.log(res.data);
|
|
|
this.dataArray = res.data;
|
|
|
this.loading = false;
|
|
|
this.lastDataArray = this.processSnapshotData(this.dataArray);
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.loading = false;
|
|
|
console.log(err);
|
|
|
});
|
|
|
},
|
|
|
processSnapshotData(data) {
|
|
|
return data.map((item) => {
|
|
|
const channelStatus = [];
|
|
|
console.log(item);
|
|
|
//图片数据
|
|
|
item.channels.forEach((channel) => {
|
|
|
const channelStatusParts = []; // 通道级别的状态片段
|
|
|
channel.presets.forEach((preset) => {
|
|
|
const missingTimes = [];
|
|
|
const moreTimes = [];
|
|
|
preset.scheduleList.forEach((schedule) => {
|
|
|
if (schedule.wrong && schedule.timeList.length === 0) {
|
|
|
const time = `${schedule.hour
|
|
|
.toString()
|
|
|
.padStart(2, "0")}:${schedule.minute
|
|
|
.toString()
|
|
|
.padStart(2, "0")}`;
|
|
|
missingTimes.push(time);
|
|
|
}
|
|
|
if (schedule.wrong && schedule.timeList.length > 1) {
|
|
|
const time = `${schedule.hour
|
|
|
.toString()
|
|
|
.padStart(2, "0")}:${schedule.minute
|
|
|
.toString()
|
|
|
.padStart(2, "0")}`;
|
|
|
moreTimes.push(time);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 生成当前预置位的状态片段
|
|
|
const presetStatusParts = [];
|
|
|
if (missingTimes.length > 0) {
|
|
|
presetStatusParts.push(
|
|
|
`少图（${[...new Set(missingTimes)].join("、")}）`
|
|
|
);
|
|
|
}
|
|
|
if (moreTimes.length > 0) {
|
|
|
presetStatusParts.push(
|
|
|
`多图（${[...new Set(moreTimes)].join("、")}）`
|
|
|
);
|
|
|
}
|
|
|
|
|
|
// 若当前预置位有问题，则添加到通道状态
|
|
|
if (presetStatusParts.length > 0) {
|
|
|
channelStatusParts.push(
|
|
|
`预置位${preset.presetId}：${presetStatusParts.join("，")}`
|
|
|
);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 构建通道的最终状态描述
|
|
|
const status =
|
|
|
channelStatusParts.length > 0
|
|
|
? `通道${channel.channelId}：${channelStatusParts.join("；")}`
|
|
|
: `通道${channel.channelId}图片正常`;
|
|
|
channelStatus.push(status);
|
|
|
});
|
|
|
//覆冰数据
|
|
|
const pullStatusParts = [];
|
|
|
const pullmissingTimes = [];
|
|
|
const pullmoreTimes = [];
|
|
|
item.pullScheduleList.forEach((pull) => {
|
|
|
if (pull.wrong && pull.timeList.length === 0) {
|
|
|
const time = `${pull.hour.toString().padStart(2, "0")}:${pull.minute
|
|
|
.toString()
|
|
|
.padStart(2, "0")}`;
|
|
|
pullmissingTimes.push(time);
|
|
|
}
|
|
|
if (pull.wrong && pull.timeList.length > 1) {
|
|
|
const time = `${pull.hour.toString().padStart(2, "0")}:${pull.minute
|
|
|
.toString()
|
|
|
.padStart(2, "0")}`;
|
|
|
pullmoreTimes.push(time);
|
|
|
}
|
|
|
});
|
|
|
console.log(pullmissingTimes);
|
|
|
console.log(pullmoreTimes);
|
|
|
// 生成当前预置位的状态片段
|
|
|
const pullParts = [];
|
|
|
if (pullmissingTimes.length > 0) {
|
|
|
pullParts.push(
|
|
|
`少${pullmissingTimes.length}条数据（${[
|
|
|
...new Set(pullmissingTimes),
|
|
|
].join("、")}）`
|
|
|
);
|
|
|
}
|
|
|
if (pullmoreTimes.length > 0) {
|
|
|
pullParts.push(
|
|
|
`多${pullmoreTimes.length}条数据（${[
|
|
|
...new Set(pullmoreTimes),
|
|
|
].join("、")}）`
|
|
|
);
|
|
|
}
|
|
|
// 构建通道的最终状态描述
|
|
|
const pullstatus =
|
|
|
pullParts.length > 0 ? `${pullParts.join("；")}` : `数据正常`;
|
|
|
pullStatusParts.push(pullstatus);
|
|
|
|
|
|
//覆冰拉力结束
|
|
|
|
|
|
//天气数据遍历开始
|
|
|
//覆冰数据
|
|
|
const weatherStatusParts = [];
|
|
|
const weathermissingTimes = [];
|
|
|
const weathermoreTimes = [];
|
|
|
item.weatherScheduleList.forEach((weather) => {
|
|
|
if (weather.wrong && weather.timeList.length === 0) {
|
|
|
const time = `${weather.hour
|
|
|
.toString()
|
|
|
.padStart(2, "0")}:${weather.minute.toString().padStart(2, "0")}`;
|
|
|
weathermissingTimes.push(time);
|
|
|
}
|
|
|
if (weather.wrong && weather.timeList.length > 1) {
|
|
|
const time = `${weather.hour
|
|
|
.toString()
|
|
|
.padStart(2, "0")}:${weather.minute.toString().padStart(2, "0")}`;
|
|
|
weathermoreTimes.push(time);
|
|
|
}
|
|
|
});
|
|
|
console.log(weathermissingTimes);
|
|
|
console.log(weathermoreTimes);
|
|
|
// 生成当前预置位的状态片段
|
|
|
const weatherParts = [];
|
|
|
if (weathermissingTimes.length > 0) {
|
|
|
weatherParts.push(
|
|
|
`少${weathermissingTimes.length}条数据（${[
|
|
|
...new Set(weathermissingTimes),
|
|
|
].join("、")}）`
|
|
|
);
|
|
|
}
|
|
|
if (weathermoreTimes.length > 0) {
|
|
|
weatherParts.push(
|
|
|
`多${weathermoreTimes.length}条数据（${[
|
|
|
...new Set(weathermoreTimes),
|
|
|
].join("、")}）`
|
|
|
);
|
|
|
}
|
|
|
// 构建通道的最终状态描述
|
|
|
const weatherstatus =
|
|
|
weatherParts.length > 0 ? `${weatherParts.join("；")}` : `数据正常`;
|
|
|
weatherStatusParts.push(weatherstatus);
|
|
|
//天气数据遍历结束
|
|
|
|
|
|
//最终返回数据
|
|
|
return {
|
|
|
cmdid: item.cmdid,
|
|
|
photoTimePoint: channelStatus.join("\n"),
|
|
|
pullPoint: pullStatusParts.join("\n"),
|
|
|
weatherPoint: weatherStatusParts.join("\n"),
|
|
|
};
|
|
|
});
|
|
|
},
|
|
|
|
|
|
//查询
|
|
|
onSubmit() {
|
|
|
if (this.formdata.starttime > this.formdata.endtime) {
|
|
|
return this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "开始日期不能大于结束日期",
|
|
|
type: "warning",
|
|
|
});
|
|
|
}
|
|
|
|
|
|
this.getPicData();
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</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;
|
|
|
}
|
|
|
.dyClass {
|
|
|
.el-select {
|
|
|
width: 150px;
|
|
|
}
|
|
|
}
|
|
|
.intervalClass {
|
|
|
.el-input {
|
|
|
width: 80px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.pictureBox {
|
|
|
height: calc(100% - 135px);
|
|
|
border: 1px solid #eee;
|
|
|
.pre-format {
|
|
|
white-space: pre-line; /* 保留换行符 */
|
|
|
line-height: 1.8; /* 增加行间距 */
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|