zhgdyun/src/views/projectFront/unload/liveDataTable.vue

276 lines
9.5 KiB
Vue
Raw Normal View History

2022-06-08 14:51:11 +08:00
<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>