You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
xy-frontend/src/views/photographicDevice/components/workStatus.vue

326 lines
9.2 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<el-dialog
class="workStatusBox"
title="工作状态报"
:visible.sync="isShow"
:close-on-click-modal="false"
width="1360px"
>
<div class="zzinfo">
<span v-if="rowInfo.protocol == '65280'"> 国网I1 </span>
<span v-if="rowInfo.protocol == '65296'"> 陕西 </span>
<span v-if="rowInfo.protocol == '65281'"> 安徽 </span>
<span v-if="rowInfo.protocol == '65282'"> 江苏 </span>
<span v-if="rowInfo.protocol == '65283'"> 湖南 </span>
<span v-if="rowInfo.protocol == '65284'"> 浙江 </span>
<span v-if="rowInfo.protocol == '65285'"> 河南全景 </span>
<span v-if="rowInfo.protocol == '65286'"> 河南郑州 </span>
<span v-if="rowInfo.protocol == '65290'"> 河南统一视频v2020 </span>
<span v-if="rowInfo.protocol == '65298'"> 宁夏 </span>
<span v-if="rowInfo.protocol == '2'"> 南网 </span>
<span>{{rowInfo.protocol}}</span>
</div>
<el-form :inline="true" :model="formdata" class="demo-form-inline">
<el-form-item label="开始日期">
<el-date-picker
@change="changestartdate"
v-model="formdata.starttime"
type="datetime"
:picker-options="pickerOptions"
placeholder="开始日期"
value-format="timestamp"
>
</el-date-picker>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
@change="changeenddate"
v-model="formdata.endtime"
type="datetime"
:picker-options="pickerOptions"
placeholder="结束日期"
value-format="timestamp"
class="ml10"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button type="primary" @click="exportFault">导出</el-button>
</el-form-item>
</el-form>
<el-table
ref="multipleTable"
:data="listData"
stripe
tooltip-effect="dark"
style="width: 100%"
height="466px"
v-loading="loading"
>
<template slot="empty">
<el-empty :image-size="160" description="暂无数据"></el-empty>
</template>
<el-table-column min-width="45" label="序号">
<template slot-scope="scope">
<span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column
prop="cmdid"
label="装置编号"
min-width="160"
show-overflow-tooltip
></el-table-column>
<el-table-column prop="wsUpdateTimeStr" label="采集时间" min-width="140">
</el-table-column>
<el-table-column
prop="batteryVoltage"
label="电池电压(V)"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="opTemperature"
label="工作温度(℃)"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="batteryCapacity"
label="电池电量(%"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="floatingChargeStr"
label="浮充状态"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="totalWorkingTime"
label="工作总时间(小时)"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="workingTime"
label="连续工作时间(小时)"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="connectionStr"
label="网络连接状态"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="connectionStr"
label="GPRS信号强度"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="recvFlowStr"
label="当月发送流量(M)"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="sendFlowStr"
label="当月接收流量M"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="protocolVersion"
label="通信协议版本"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="protocolVersion"
label="GPRS信号强度"
show-overflow-tooltip
></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 slot="footer" class="dialog-footer">
<el-button @click="hide">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import {
getWorkingStatusHistoryApi,
getWorkingStatusHistoryExcel,
} from "@/utils/api/index";
export default {
data() {
return {
isShow: false,
formdata: {},
rowInfo: "",
listData: [],
loading: false,
page: 1, // 当前页数
pageSize: 10, // 每页数量
total: 0, //总条数
pickerOptions: {
disabledDate(date) {
return date.getTime() > Date.now(); // 禁用大于今天的日期
},
},
};
},
watch: {
endtime(newVal) {
if (newVal) {
const date = new Date(newVal);
date.setHours(23);
date.setMinutes(59);
date.setSeconds(59);
this.formdata.endtime = date;
}
},
},
created() {},
mounted() {},
methods: {
getTime() {
const thirtyDaysAgo = new Date();
thirtyDaysAgo.setHours(0); // 设置小时为23
thirtyDaysAgo.setMinutes(0); // 设置分钟为59
thirtyDaysAgo.setSeconds(0); // 设置秒数为59
console.log(
new Date(thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30))
);
const startTimeNew = new Date(
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate())
).getTime();
this.$set(this.formdata, "starttime", startTimeNew);
console.log("开始时间", this.formdata.starttime);
const currentDate = new Date(); // 获取当前时间
currentDate.setHours(23); // 设置小时为23
currentDate.setMinutes(59); // 设置分钟为59
currentDate.setSeconds(59); // 设置秒数为59
this.$set(this.formdata, "endtime", currentDate.getTime());
console.log("结束时间", this.formdata.endtime);
this.getfaultinfo();
},
changestartdate(val) {
console.log(val);
if (val == null) {
console.log(new Date());
const startDate = new Date();
startDate.setHours(0); // 设置小时为23
startDate.setMinutes(0); // 设置分钟为59
startDate.setSeconds(0); // 设置秒数为59
this.formdata.starttime = startDate;
console.log(this.formdata.starttime);
} else {
this.formdata.starttime = val;
}
},
//结束日期
changeenddate(val) {
if (val == null) {
console.log(new Date());
const endDate = new Date();
endDate.setHours(23); // 设置小时为23
endDate.setMinutes(59); // 设置分钟为59
endDate.setSeconds(59); // 设置秒数为59
this.formdata.endtime = endDate;
console.log(this.formdata.endtime);
} else {
this.formdata.endtime = val;
console.log(val);
}
},
//查询
onSubmit() {
if (this.formdata.starttime > this.formdata.endtime) {
return this.$message({
duration: 1500,
showClose: true,
message: "开始日期不能大于结束日期",
type: "warning",
});
}
this.getfaultinfo();
},
//导出
exportFault() {
window.location.href =
"/api/getWorkingStatusHistoryExcel?termid=" + this.rowInfo.id;
},
//获取数据
getfaultinfo() {
this.loading = true;
getWorkingStatusHistoryApi({
termid: this.rowInfo.id,
starttime: this.formdata.starttime,
endtime: this.formdata.endtime,
pageindex: this.page,
pagesize: this.pageSize,
}).then((res) => {
if (res.code == 200) {
this.listData = res.data.list;
this.total = res.data.total;
this.$nextTick(() => {
this.loading = false;
});
} else {
this.$nextTick(() => {
this.loading = false;
});
}
});
},
//点击分页
handleCurrentChange(val) {
this.page = val;
this.getfaultinfo();
},
//每页条数
handleSizeChange(val) {
this.pageSize = val;
this.getfaultinfo();
},
display(row) {
console.log(row);
this.rowInfo = row;
this.isShow = true;
this.getTime();
},
hide() {
this.isShow = false;
this.formdata = {};
},
},
};
</script>
<style lang="less">
.workStatusBox {
.zzinfo {
position: absolute;
top: 22px;
left: 126px;
}
.pageNation {
justify-content: flex-start;
margin-top: 16px;
.el-pagination {
padding: 0px;
.el-select .el-input {
margin-left: 0px;
}
}
}
}
</style>