vue + element tab选项卡 实现。。。

< template >

< div style= "margin-top:10px;" >

< el-tabs type= "card" @tab-click=" handleClick" >

< el-tab-pane label= "基本信息" > el-tab-pane >

< el-tab-pane label= "水量查询" > el-tab-pane >

< el-tab-pane label= "异常记录" > el-tab-pane >

el-tabs >

< div v-if=" tabType == 0" >

< div class= "leftdatalis" >

< ul class= "detalis" >

< li >< span >水表序列号： span >< strong >{{ allDatas. uuid}} strong > li >

< li class= "threeName" >

< span >房源名称： span >< strong >{{ allDatas. homeName}} strong >

< span >楼层： span >< strong >{{ allDatas. floorName}} strong >

< span >房间号： span >< strong >{{ allDatas. roomName}} strong >

li >

< li >

< span >产品类型： span >

< strong v-if=" allDatas. meterType == 1" >光电直读湿式冷水表 strong >

< strong v-if=" allDatas. meterType == 2" >光电直读干式热水表 strong >

li >

< li >< span >绑定时间： span >< strong >{{ allDatas. createdAt}} strong > li >

< li >< span >更新时间： span >< strong >{{ allDatas. meterUpdatedAt}} strong > li >

< li >

< span >水表读数： span >

< strong class= "lastAmount" >{{ allDatas. lastAmount}} strong >

< el-button type= "primary" @click=" getWaterDetails( 0)" >刷新 el-button >

li >

< li >< span >当月累计水表量： span >< strong style= "color:red" >{{ allDatas. meterAmount}} strong > li >

< li >

< span >通讯状态： span >

< strong v-if=" allDatas. onoffStatus == 1" styFle= "color:green" >在线 strong >

< strong v-if=" allDatas. onoffStatus == 2" style= "color:gray" >离线 strong >

li >

< li >< span >绑定网关： span >< strong >{{ allDatas. gatewayUuid}} strong > li >

ul >

div >

div >

< div v-if=" tabType == 1" >

< div class= "block" >

< span class= "demonstration" >选择日期： span >

< el-date-picker

v-model=" value7"

type= "daterange"

align= "right"

unlink-panels

range-separator= "至"

start-placeholder= "开始日期"

end-placeholder= "结束日期"

:picker-options=" pickerOptions2" >

el-date-picker >

< el-button type= "primary" @click=' submit' >查询 el-button >

div >

< div class= "table" >

< el-button class= 'export' type= "primary" @click=" recordsClick" >导出到表格 el-button >

< el-table

:data=" ExportDatas"

border

style= "width: 100%; height:50%" >

< el-table-column

prop= "smartWatermeterId"

label= "水表序列号" >

el-table-column >

< el-table-column

prop= "createdAt"

label= "时间" >

el-table-column >

< el-table-column

prop= "deviceAmount"

label= "水表读数(吨)" >

el-table-column >

< el-table-column

prop= "dayAmount"

label= "增量读数(吨)" >

el-table-column >

el-table >

< el-pagination

@current-change=" handleCurrentChange"

:current-page=" page. pageNumber"

:page-size=" page. pageSize"

layout= "total, prev, pager, next, jumper"

:total=" page. total" >

el-pagination >

div >

div >

< div v-if=" tabType == 2" >

< el-table

:data=" exceptionDatas"

border

style= "width: 100%; height:50%" >

< el-table-column

prop= "apartmentName"

label= "时间" >

el-table-column >

< el-table-column

prop= "onoffStatus"

label= "通讯状态" >

< template scope= "scope" >

< span v-if=" scope. row. exceptionType== 7" style= "color:red;" >水表设备离线 span >

< span v-if=" scope. row. exceptionType== 8" style= "color:green;" >水表设备在线 span >

template >

el-table-column >

el-table >

< el-pagination

@current-change=" handleCurrentChange"

:current-page=" page. pageNumber"

:page-size=" page. pageSize"

layout= "total, prev, pager, next, jumper"

:total=" page. total" >

el-pagination >

div >

div >

template >

< script >

import { runEnv } from './../../config/environment' //url

export default {

data() {

return {

pickerOptions2: {

shortcuts: [{

text: '最近一周',

onClick( picker) {

const end = new Date();

const start = new Date();

start. setTime( start. getTime() - 3600 * 1000 * 24 * 7);

picker. $emit( 'pick', [ start, end]);

}

}, {

text: '最近一个月',

onClick( picker) {

const end = new Date();

const start = new Date();

start. setTime( start. getTime() - 3600 * 1000 * 24 * 30);

picker. $emit( 'pick', [ start, end]);

}

}, {

text: '最近三个月',

onClick( picker) {

const end = new Date();

const start = new Date();

start. setTime( start. getTime() - 3600 * 1000 * 24 * 90);

picker. $emit( 'pick', [ start, end]);

}

}]

},

value7: '',

formVal:{},

tabType: 0,

ExportDatas:[], //tab1数据

allDatas:[], //tab0数据

exceptionDatas:[], //tab2

datas: { //to

headerRequestDataVO: {

cid: "",

bid: "",

ver: "",

enc: "",

crt: "",

rnd: "",

pid: "",

pvr: "",

utk: "",

tkn: ""

},

dataRequestBodyVO: {

dt:{}

}

},

//to 导出的表格

// recordsDatas:{

// smartWatermeterId:this.$route.query.id,

// startTime:this.formVal.startTime,

// endTime:this.formVal.endTime,

// },

page: {

pageNumber: 1,

total: 0,

pageSize: 10

},

};

},

methods: {

handleClick( tab, e) { //点击选项卡

this. tabType = tab. index;

var _val = tab. index; //

this. getWaterDetails( _val);

},

getWaterDetails( val){ //tab0

if( val == 0){

var _url = 'dizhi 1';

this. datas. dataRequestBodyVO. dt = {

type: this. $route. query. type,

uuid: this. $route. query. id,

}

}

if( val== 1){ //tab1

var _url = 'dizhi2/filter';

this. datas. dataRequestBodyVO. dt = {

watermeterRecordManagerVO:{

smartWatermeterId: this. $route. query. watermeterId,

startTime: this. formVal. startTime,

endTime: this. formVal. endTime,

page: this. page. pageNumber,

rows: this. page. pageSize

}

}

}

if( val == 2){

var _url = 'dizhi3watermeter';

this. datas. dataRequestBodyVO. dt = {

exceptionVO:{

daviceId: this. $route. query. watermeterId, //传参id

page: this. page. pageNumber,

rows: this. page. pageSize

}

}

};

// console.log(_url)

$. ajax({

headers: {

"Content-Type" : "application/json"

},

method: "post",

url: runEnv. api_url+ _url,

dataType: "json",

data: JSON. stringify( this. datas) //参数数据从Gatewaytable中取的

}). then( res => {

console. log( res);

if( val== 0){

this. allDatas = res. dataResponseBodyVO. dt. watermeterManagerDetailVO;

}

if( val== 1){

this. ExportDatas = res. dataResponseBodyVO. dt. watermeterRecordManagerVOList. list;

this. page. total = res. dataResponseBodyVO. dt. watermeterRecordManagerVOList. total;

}

if( val== 2){ //异常记录

this. exceptionDatas = res. dataResponseBodyVO. dt. exceptionVOS. list;

this. page. total = res. dataResponseBodyVO. dt. exceptionVOS. total;

}

});

},

recordsClick(){ //导出表格

var params = {

smartWatermeterId: this. $route. query. watermeterId,

startTime: this. formVal. startTime,

endTime: this. formVal. endTime,

};

var form = document. createElement( 'form');

form. id = 'form'

form. name = 'form'

document. body. appendChild( form);

for( var obj in params) {

if( params. hasOwnProperty( obj)) {

var input = document. createElement( 'input');

input. tpye= 'hidden';

input. name = obj;

input. value = params[ obj];

form. appendChild( input)

}

}

form. method = "GET";

form. action = runEnv. api_url+ '/wdizhi4/export';

form. submit();

document. body. removeChild( form);

},

submit(){ //时间计算

if( this. value7. length> 0 && this. value7[ 0]!== null){

this. formVal. startTime = this. formatDate( this. value7[ 0]);

this. formVal. endTime = this. formatDate( this. value7[ 1]);

}

console. log( this. formVal);

this. getWaterDetails( 1)

},

formatDate( time){

var tmpDate = new Date( time);

return tmpDate. getFullYear() + "-" + String( tmpDate. getMonth() + 1) + "-" + String( tmpDate. getDate());

},

//点击页数

handleCurrentChange( val){

this. page. pageNumber = val;

this. submit();

},

},

created(){

this. getWaterDetails( 0);

}

};

script >