main
jn517618
2 years ago
parent
ed53283ba9
commit
25ebdefb48
8 changed files with 401 additions and 10 deletions
|
After Width: | Height: | Size: 468 B |
|
After Width: | Height: | Size: 72 KiB |
@ -0,0 +1,185 @@ |
||||
<template> |
||||
<div class="equipmentLoadmodal"> |
||||
<el-dialog title="收货地址" :visible.sync="visible" class="my-info-dialog" @close="onClose"> |
||||
<tit :title="'监测明细'" style="width: 78%"> |
||||
<div class="tit-r"> |
||||
<span style="color: #fff;">选择设备：</span> |
||||
<el-select size="mini" style="width: 1.2rem;margin-right: 0.26rem;" v-model="value" placeholder="请选择" |
||||
@change="changeMonth"> |
||||
<el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name"> |
||||
</el-option> |
||||
</el-select> |
||||
<img src="../../../../public/img/energySources/close.png" alt="" srcset="" style="width: 12px; height: 12px;" |
||||
@click="onClose"> |
||||
</div> |
||||
</tit> |
||||
<div class="emodal"> |
||||
<el-table :data="tableData" style="width: 100%; margin-top: 0.14rem;" height="90%" :stripe="true" :size="mini" |
||||
:row-class-name="tableRowClassName"> |
||||
<el-table-column prop="name" label="设备名称" show-overflow-tooltip> |
||||
</el-table-column> |
||||
<el-table-column prop="address" label="用电量"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ scope.row.loadRate }}%</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="sendTime" label="负载最长时段" show-overflow-tooltip> |
||||
</el-table-column> |
||||
</el-table> |
||||
<el-pagination background layout="prev, pager, next" small :total="tableData.length" style="text-align: right;"> |
||||
</el-pagination> |
||||
</div> |
||||
|
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import tit from "./tit.vue"; |
||||
import { mapGetters } from "vuex"; |
||||
import { getInstrumentActLoad, getInstrumentRumDetail } from "@/api/energySources/energySources" |
||||
export default { |
||||
data() { |
||||
return { |
||||
tableData: [], |
||||
options: [], |
||||
value: '' |
||||
}; |
||||
}, |
||||
components: { |
||||
tit |
||||
}, |
||||
props: { |
||||
visible: { |
||||
type: Boolean, |
||||
default: false |
||||
} |
||||
}, |
||||
computed: { |
||||
...mapGetters(["userInfo", "permission"]), |
||||
}, |
||||
created() { |
||||
this.getTableData() |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getTableData() { |
||||
getInstrumentActLoad({ manufacturerBrand: this.userInfo.dept_name }).then(res => { |
||||
this.options = res.data.data |
||||
}) |
||||
}, |
||||
getData() { |
||||
getInstrumentRunDetail({ manufacturerBrand: this.userInfo.dept_name, today: this.$moment().format('yyyy-MM-DD'), name: this.value }).then(res => { |
||||
this.tableData = res.data.data |
||||
}) |
||||
}, |
||||
onClose(){ |
||||
this.$emit('onvisible', false) |
||||
}, |
||||
tableRowClassName({ row, rowIndex }) { |
||||
if (rowIndex % 2 === 0) { |
||||
if (row.loadRate > 0) { |
||||
return 'trEven colorFB5E2D'; |
||||
} else { |
||||
return 'trEven'; |
||||
} |
||||
|
||||
} else { |
||||
if (row.loadRate > 0) { |
||||
return 'trOdd colorFB5E2D'; |
||||
} else { |
||||
return 'trOdd'; |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
}; |
||||
</script> |
||||
<style> |
||||
.my-info-dialog .el-dialog { |
||||
background: transparent !important; |
||||
box-shadow: 0 !important; |
||||
border: 0 !important; |
||||
} |
||||
|
||||
.my-info-dialog .el-dialog__header { |
||||
display: none !important; |
||||
} |
||||
|
||||
.my-info-dialog .el-dialog__body { |
||||
padding: 0 !important; |
||||
} |
||||
</style> |
||||
|
||||
<style lang="scss" scoped> |
||||
.equipmentLoadmodal /deep/ .el-table, |
||||
.equipmentLoadmodal /deep/ .el-table__expanded-cell { |
||||
background-color: transparent; |
||||
border: 0 !important; |
||||
} |
||||
|
||||
.equipmentLoadmodal /deep/ .el-table th, |
||||
.equipmentLoadmodal /deep/ .el-table tr, |
||||
.equipmentLoadmodal /deep/ .el-table td { |
||||
background-color: transparent !important; |
||||
border: 0 !important; |
||||
} |
||||
|
||||
.equipmentLoadmodal /deep/ .el-table td span { |
||||
font-size: 0.14rem !important; |
||||
} |
||||
|
||||
.equipmentLoadmodal /deep/ .el-table::before { |
||||
height: 0 !important; |
||||
} |
||||
|
||||
.equipmentLoadmodal /deep/ .trOdd td { |
||||
color: #fff; |
||||
} |
||||
|
||||
.equipmentLoadmodal /deep/ .trEven td { |
||||
color: #fff; |
||||
background: rgba($color: #0de5ff, $alpha: 0.1) !important; |
||||
} |
||||
|
||||
.equipmentLoadmodal /deep/.colorFB5E2D td { |
||||
color: #FB5E2D !important; |
||||
} |
||||
|
||||
|
||||
.equipmentLoadmodal /deep/ .el-input__inner { |
||||
background: transparent !important; |
||||
color: #fff !important; |
||||
border-radius: 0; |
||||
border-color: rgba($color: #fff, $alpha: 0.2) !important; |
||||
height: 0.24rem !important; |
||||
} |
||||
|
||||
.equipmentLoadmodal /deep/ .el-input__icon { |
||||
line-height: 0.24rem !important; |
||||
} |
||||
|
||||
.emodal { |
||||
|
||||
width: 8.38rem; |
||||
height: 6.14rem; |
||||
|
||||
background: url("../../../../public/img/energySources/modals.png"); |
||||
|
||||
box-sizing: border-box; |
||||
background-size: 100% 100%; |
||||
margin-right: 0.22rem; |
||||
padding: 0.54rem 0.22rem 0 0.22rem; |
||||
position: relative; |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
.tit-r { |
||||
font-size: 0.14rem; |
||||
|
||||
color: rgba($color: #fff, $alpha: 0.4); |
||||
margin-top: 0.04rem; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,185 @@ |
||||
<template> |
||||
<div class="equipmentLoadmodal"> |
||||
<el-dialog title="收货地址" :visible.sync="visible" class="my-info-dialog" @close="onClose"> |
||||
<tit :title="'监测明细'" style="width: 78%"> |
||||
<div class="tit-r"> |
||||
<span style="color: #fff;">选择设备：</span> |
||||
<el-select size="mini" style="width: 1.2rem;margin-right: 0.26rem;" v-model="value" placeholder="请选择" |
||||
@change="changeMonth"> |
||||
<el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name"> |
||||
</el-option> |
||||
</el-select> |
||||
<img src="../../../../public/img/energySources/close.png" alt="" srcset="" style="width: 12px; height: 12px;" |
||||
@click="onClose"> |
||||
</div> |
||||
</tit> |
||||
<div class="emodal"> |
||||
<el-table :data="tableData" style="width: 100%; margin-top: 0.14rem;" height="90%" :stripe="true" :size="mini" |
||||
:row-class-name="tableRowClassName"> |
||||
<el-table-column prop="name" label="设备名称" show-overflow-tooltip> |
||||
</el-table-column> |
||||
<el-table-column prop="address" label="负载率"> |
||||
<template slot-scope="scope"> |
||||
<span>{{ scope.row.loadRate }}%</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="sendTime" label="负载最长时段" show-overflow-tooltip> |
||||
</el-table-column> |
||||
</el-table> |
||||
<el-pagination background layout="prev, pager, next" small :total="tableData.length" style="text-align: right;"> |
||||
</el-pagination> |
||||
</div> |
||||
|
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import tit from "./tit.vue"; |
||||
import { mapGetters } from "vuex"; |
||||
import { getInstrumentActLoad, getInstrumentRumDetail } from "@/api/energySources/energySources" |
||||
export default { |
||||
data() { |
||||
return { |
||||
tableData: [], |
||||
options: [], |
||||
value: '' |
||||
}; |
||||
}, |
||||
components: { |
||||
tit |
||||
}, |
||||
props: { |
||||
visible: { |
||||
type: Boolean, |
||||
default: false |
||||
} |
||||
}, |
||||
computed: { |
||||
...mapGetters(["userInfo", "permission"]), |
||||
}, |
||||
created() { |
||||
this.getTableData() |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getTableData() { |
||||
getInstrumentActLoad({ manufacturerBrand: this.userInfo.dept_name }).then(res => { |
||||
this.options = res.data.data |
||||
}) |
||||
}, |
||||
getData() { |
||||
getInstrumentRunDetail({ manufacturerBrand: this.userInfo.dept_name, today: this.$moment().format('yyyy-MM-DD'), name: this.value }).then(res => { |
||||
this.tableData = res.data.data |
||||
}) |
||||
}, |
||||
onClose(){ |
||||
this.$emit('onvisible', false) |
||||
}, |
||||
tableRowClassName({ row, rowIndex }) { |
||||
if (rowIndex % 2 === 0) { |
||||
if (row.loadRate > 0) { |
||||
return 'trEven colorFB5E2D'; |
||||
} else { |
||||
return 'trEven'; |
||||
} |
||||
|
||||
} else { |
||||
if (row.loadRate > 0) { |
||||
return 'trOdd colorFB5E2D'; |
||||
} else { |
||||
return 'trOdd'; |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
}; |
||||
</script> |
||||
<style> |
||||
.my-info-dialog .el-dialog { |
||||
background: transparent !important; |
||||
box-shadow: 0 !important; |
||||
border: 0 !important; |
||||
} |
||||
|
||||
.my-info-dialog .el-dialog__header { |
||||
display: none !important; |
||||
} |
||||
|
||||
.my-info-dialog .el-dialog__body { |
||||
padding: 0 !important; |
||||
} |
||||
</style> |
||||
|
||||
<style lang="scss" scoped> |
||||
.equipmentLoadmodal /deep/ .el-table, |
||||
.equipmentLoadmodal /deep/ .el-table__expanded-cell { |
||||
background-color: transparent; |
||||
border: 0 !important; |
||||
} |
||||
|
||||
.equipmentLoadmodal /deep/ .el-table th, |
||||
.equipmentLoadmodal /deep/ .el-table tr, |
||||
.equipmentLoadmodal /deep/ .el-table td { |
||||
background-color: transparent !important; |
||||
border: 0 !important; |
||||
} |
||||
|
||||
.equipmentLoadmodal /deep/ .el-table td span { |
||||
font-size: 0.14rem !important; |
||||
} |
||||
|
||||
.equipmentLoadmodal /deep/ .el-table::before { |
||||
height: 0 !important; |
||||
} |
||||
|
||||
.equipmentLoadmodal /deep/ .trOdd td { |
||||
color: #fff; |
||||
} |
||||
|
||||
.equipmentLoadmodal /deep/ .trEven td { |
||||
color: #fff; |
||||
background: rgba($color: #0de5ff, $alpha: 0.1) !important; |
||||
} |
||||
|
||||
.equipmentLoadmodal /deep/.colorFB5E2D td { |
||||
color: #FB5E2D !important; |
||||
} |
||||
|
||||
|
||||
.equipmentLoadmodal /deep/ .el-input__inner { |
||||
background: transparent !important; |
||||
color: #fff !important; |
||||
border-radius: 0; |
||||
border-color: rgba($color: #fff, $alpha: 0.2) !important; |
||||
height: 0.24rem !important; |
||||
} |
||||
|
||||
.equipmentLoadmodal /deep/ .el-input__icon { |
||||
line-height: 0.24rem !important; |
||||
} |
||||
|
||||
.emodal { |
||||
|
||||
width: 8.38rem; |
||||
height: 6.14rem; |
||||
|
||||
background: url("../../../../public/img/energySources/modals.png"); |
||||
|
||||
box-sizing: border-box; |
||||
background-size: 100% 100%; |
||||
margin-right: 0.22rem; |
||||
padding: 0.54rem 0.22rem 0 0.22rem; |
||||
position: relative; |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
.tit-r { |
||||
font-size: 0.14rem; |
||||
|
||||
color: rgba($color: #fff, $alpha: 0.4); |
||||
margin-top: 0.04rem; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue