2022-06-08 14:51:11 +08:00

158 lines
5.4 KiB
Vue

<template>
<div class="reportForm">
<div class="left">
<div class="menu-list">
<div v-for="(item,index) in resultList" class="menu-item" :class="{'active-menu': activeNav == index}" @click="checkNav(index,item.devSn)">
{{item.devName}}
</div>
</div>
</div>
<div class="right">
<div style="height: 100%" class="content whiteBlock">
<vue-scroll style="height: 100%">
<el-table
:data="tableData"
class="tables"
style="width: 100%"
height="100%"
>
<!-- 设备名称 -->
<el-table-column align="center" prop="devName" :label="$t('message.towerCrane.equipmentName')">
</el-table-column>
<!-- 顶升前高度(m) -->
<el-table-column align="center" prop="beforeHeght" :label="$t('message.towerCrane.heightBeforeJacking')">
</el-table-column>
<!-- 顶升后高度(m) -->
<el-table-column align="center" prop="height" :label="$t('message.towerCrane.heightAfterJacking')">
</el-table-column>
<!-- 顶升的塔吊标准节数量 -->
<el-table-column
prop="sectionCount"
:label="$t('message.towerCrane.jackingQuantity')"
align="center"
>
</el-table-column>
<!-- 顶升时间 -->
<el-table-column
prop="createTime"
:label="$t('message.towerCrane.jackingTime')"
align="center"
>
</el-table-column>
<!-- <el-table-column prop="date" :label="$t('message.lifter.reportTime')"> </el-table-column> -->
<!-- <el-table-column
prop="maintenanceRecord"
:label="$t('message.lifter.maintenanceRecord')"
>
</el-table-column> -->
</el-table>
</vue-scroll>
</div>
</div>
</div>
</template>
<script>
import {
getTowerListApi,
selectTowerJackingRecordListApi,
} from "@/assets/js/api/towerCrane";
export default {
name: "reportForm",
props:['sn'],
data(){
return {
activeNav: 0,
tableData:[],
projectSn:'',
resultList:''
}
},
created(){
this.projectSn = this.sn ? this.sn:this.$store.state.projectSn;
},
mounted(){
this.getTowerList()
},
methods:{
checkNav(val,devSn){
this.activeNav = val
this.selectTowerJackingRecordList(devSn)
},
selectTowerJackingRecordList(devSn){
let data = {
projectSn: this.projectSn,
devSn:devSn
};
selectTowerJackingRecordListApi(data).then(res => {
this.tableData = res.result
console.log(res);
})
},
getTowerList(){
let data = {
projectSn: this.projectSn,
};
getTowerListApi(data).then(res => {
this.resultList = res.result
this.selectTowerJackingRecordList(res.result[0].devSn)
console.log(res);
})
}
}
}
</script>
<style lang="less" scoped>
.reportForm{
width: 100%;
height: 100%;
.left{
float: left;
width: 188px;
margin-right: 0;
padding-top: 28px;
box-sizing: border-box;
height: 100%;background: #fff;
.menu-list{
.menu-item{
color: #7C829E;
padding-left: 28px;
width: 100%;
height: 30px;
box-sizing: border-box;
line-height: 30px;
margin-bottom: 10px;
cursor: pointer;
position: relative;
}
.menu-item:hover{
background: rgba(78, 124, 255, 0.1);
color: #4E7CFF;
}
.active-menu{
background: rgba(78, 124, 255, 0.25) !important;
color: #4E7CFF;
}
.active-menu::before{
content: "";
width: 3px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #4E7CFF;
}
}
}
.right{
float: right;
width: calc(100% - 208px);
height: 100%;
margin-left: 20px;
}
}
</style>