zhgdyun/src/views/projectFront/unload/liveDataTable.vue
2022-06-08 14:51:11 +08:00

276 lines
9.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="content">
<div class="search-box">
<div class="search-item">
<!-- 设备名称 -->
<span>{{$t('message.unload.devName')}}</span>
<el-select style="margin-right: 20px" v-model="devSn" size="medium" :placeholder="$t('message.unload.placeholderText3')">
<el-option
:label="$t('message.unload.all')"
value="">
</el-option>
<el-option
v-for="item in devList"
:key="item.id"
:label="item.devName"
:value="item.devSn">
</el-option>
</el-select>
<el-date-picker
class="serarch_picker"
size="medium"
v-model="valueTime"
type="daterange"
range-separator="-"
:start-placeholder="$t('message.unload.startTime')"
:end-placeholder="$t('message.unload.endTime')">
</el-date-picker>
</div>
<!-- <div class="search-item">
<el-date-picker
size="medium"
v-model="timeList"
type="daterange"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div> -->
<!-- 查询 -->
<el-button size="medium" @click="quertData">{{$t('message.unload.search')}}</el-button>
<!-- 刷新 -->
<el-button size="medium" @click="refresh">{{$t('message.unload.refresh')}}</el-button>
<!-- <el-button size="medium" @click="exportExcel">导出</el-button> -->
</div>
<div class="table-box">
<el-table
:data="tableData"
class="tables"
height="700"
style="width: 100%">
<!-- 设备名称 -->
<el-table-column
:label="$t('message.unload.devName')"
prop="devName"
>
</el-table-column>
<!-- <el-table-column
label="设备编号"
prop="devSn"
>
</el-table-column> -->
<!-- 位移 -->
<el-table-column
:label="$t('message.unload.displacement')+'(m)'"
prop="displacement"
>
</el-table-column>
<!-- 载重 -->
<el-table-column
:label="$t('message.unload.load')+'(t)'"
prop="loading"
>
</el-table-column>
<!-- X倾角 -->
<el-table-column
:label="$t('message.unload.XDip')+'(°)'"
prop="xDipAngle"
>
</el-table-column>
<!-- "Y倾角 -->
<el-table-column
:label="$t('message.unload.YDip')+'(°)'"
prop="yDipAngle"
>
</el-table-column>
<!-- 上传时间 -->
<el-table-column
:label="$t('message.unload.upLoadTime')"
>
<template slot-scope="scope">
{{moment(scope.row.reciveTime).format('YYYY-MM-DD HH:mm:ss')}}
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagerBox"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNo"
:page-sizes="$store.state.PAGESIZRS"
:page-size="pageSize"
layout="total, sizes, prev, pager, next"
:total="total"
background
></el-pagination>
</div>
</div>
</template>
<script>
import moment from "moment";
import {
getUnloadListApi,
getUnloadCurrentListApi
} from "@/assets/js/api/unloadManage";
export default {
data(){
return{
devSn: "",
projectSn: "",
devList:[],
tableData:[],
pageNo: 1,
pageSize: 10,
total: 0,
timeList: "",
startTime: "",
endTime: "",
valueTime:'',
moment: ''
}
},
created(){
this.moment = moment
this.projectSn = this.$store.state.projectSn;
this.startTime = this.endTime = moment(new Date()).format('YYYY-MM-DD')
console.log(this.startTime, this.endTime)
this.getDevice()
this.selectNowDate()
this.getUnloadCurrentList()
},
methods:{
getDevice() {
getUnloadListApi({ projectSn: this.$store.state.projectSn }).then(
(result) => {
if (result.success) {
this.devList = result.result;
// if(this.devList.length>0){
// this.devSn = this.devList[0].ammeterNo
// }
console.log("get设备列表", this.devList);
}
}
);
},
// 获取当前时间 返回YYYY-MM-DD HH:mm:ss
selectNowDate(){
var date = new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
hours = date.getHours(), //获取当前小时数(0-23)
minutes = date.getMinutes(),//获取当前分钟数(0-59)
seconds = date.getSeconds()
month >= 1 && month <= 9 ? (month = "0" + month) : "";
day >= 0 && day <= 9 ? (day = "0" + day) : "";
hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
// var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
var timer = year + '-' + month + '-' + day
this.valueTime = [timer,timer]
console.log(timer)
// return timer;
},
getUnloadCurrentList(){
let data = {
devSn: this.devSn,
projectSn: this.$store.state.projectSn,
pageNo: this.pageNo,
pageSize: this.pageSize,
startTime: this.valueTime ? this.valueTime[0]:'',
endTime: this.valueTime ? this.valueTime[1]:''
}
getUnloadCurrentListApi(data).then(res=>{
console.log(res)
if(res.success){
this.tableData = res.result.records
this.total = res.result.total
}
})
},
//刷新
refresh(){
this.pageNo = 1
this.pageSize = 10
this.selectNowDate()
this.getUnloadCurrentList()
},
quertData(){
this.pageNo = 1
this.pageSize = 10
console.log(this.devSn)
this.getUnloadCurrentList()
},
handleSizeChange(value){
this.pageSize=value;
this.getUnloadCurrentList()
},
handleCurrentChange(value){
this.pageNo=value;
this.getUnloadCurrentList()
},
exportExcel(){
if(this.valueTime){
window.location.href =
this.$http.defaults.baseURL +
"xmgl/download/exporExcelTowerAlarm?projectSn=" + this.projectSn +
"&devSn=" + this.devSn + "&startTime=" + this.transformTimestamp2(this.valueTime[0]) + "&endTime=" + this.transformTimestamp2(this.valueTime[1]);
}else {
window.location.href =
this.$http.defaults.baseURL +
"xmgl/download/exporExcelTowerAlarm?projectSn=" + this.projectSn +
"&devSn=" + this.devSn;
}
}
}
}
</script>
<style lang="less" scoped>
.content{
display: flex;
flex-direction: column;
height: 100%;
.search-box{
background: #fff;
padding: 25px;
margin-bottom: 14px;
.search-item{
display: inline-block;
margin-right: 26px;
}
}
.table-box{
flex: 1;
background: #fff;
/deep/.el-table{
td{
vertical-align: top;
}
.cell{
padding-left: 30px;
}
}
.f-2{
display: flex;
flex-wrap: wrap;
.table-item{
width: 50%
}
}
}
}
</style>