新增页面
This commit is contained in:
274
src/views/energy/temperature-acquisition.vue
Normal file
274
src/views/energy/temperature-acquisition.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-12-17 15:25:52
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<div class="kiln-electric-treebox">
|
||||
<el-tree
|
||||
:data="yaoluList"
|
||||
@node-click="handleNode"
|
||||
:highlight-current="true"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="22">
|
||||
<el-card class="base-container" style="min-height: 540px">
|
||||
<el-row style="z-index: 10;">
|
||||
<el-radio-group
|
||||
style="margin: 0 20px; position:relative; bottom: 2px"
|
||||
size="small"
|
||||
v-model="eleType"
|
||||
@change="changeEleType"
|
||||
>
|
||||
<el-radio-button label="日"></el-radio-button>
|
||||
<el-radio-button label="周"></el-radio-button>
|
||||
<el-radio-button label="月"></el-radio-button>
|
||||
<el-radio-button label="年"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-date-picker
|
||||
size="small"
|
||||
v-model="date"
|
||||
:type="datePickerType[eleType].type"
|
||||
:format="datePickerType[eleType].format"
|
||||
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||
/>
|
||||
<el-button size="small" @click="getDataList()">
|
||||
<icon-svg class="iconClass" name="sousuo"></icon-svg>
|
||||
查询
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-col style="height: 600px">
|
||||
<el-table
|
||||
:data="dataList"
|
||||
:stripe="true"
|
||||
:header-cell-style="{
|
||||
background: '#eef1f6',
|
||||
color: '#606266',
|
||||
height: '56px'
|
||||
}"
|
||||
v-loading="dataListLoading"
|
||||
style="width: 100%;padding:20px"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="序号"
|
||||
width="50"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="采集时间"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="vehicleName" label="实际温度">
|
||||
</el-table-column>
|
||||
<el-table-column prop="code" label="设定温度"> </el-table-column>
|
||||
<el-table-column prop="vehicleAlias" label="实际碳势">
|
||||
</el-table-column>
|
||||
<el-table-column prop="anqi" label="设定碳势"> </el-table-column>
|
||||
<el-table-column prop="anqi" label="油槽实际温度"> </el-table-column>
|
||||
<el-table-column prop="anqi" label="油槽设定温度"> </el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
:current-page="pageIndex"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 日期类型
|
||||
const datePickerType = {
|
||||
日: {
|
||||
type: 'date',
|
||||
format: '',
|
||||
placeholder: '日期'
|
||||
},
|
||||
周: {
|
||||
type: 'week',
|
||||
format: 'yyyy 第 WW 周',
|
||||
placeholder: '周'
|
||||
},
|
||||
月: {
|
||||
type: 'month',
|
||||
format: '',
|
||||
placeholder: '月'
|
||||
},
|
||||
年: {
|
||||
type: 'year',
|
||||
format: '',
|
||||
placeholder: '年'
|
||||
}
|
||||
}
|
||||
|
||||
// 窑炉列表
|
||||
const yaoluList = [
|
||||
{
|
||||
id: 1,
|
||||
label: '窑炉1'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '窑炉2'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: '窑炉3'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: '窑炉4'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: '窑炉5'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: '窑炉6'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
label: '窑炉7'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
label: '窑炉8'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
label: '窑炉9'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
label: '窑炉10'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
label: '窑炉11'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'gas-acquisition',
|
||||
data () {
|
||||
return {
|
||||
datePickerType,
|
||||
yaoluList,
|
||||
date: new Date(),
|
||||
eleType: '年',
|
||||
showId: 0,
|
||||
yaoluIndex: 0,
|
||||
yaoluName: '',
|
||||
dataList: [],
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 0,
|
||||
dataListLoading: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.showId = this.yaoluList[0].id
|
||||
this.yaoluName = this.yaoluList[0].label
|
||||
},
|
||||
activated () {
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
// 获取数据列表
|
||||
getDataList () {
|
||||
this.dataListLoading = true
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('/vehicle/page'),
|
||||
method: 'post',
|
||||
data: this.$http.adornData({
|
||||
'current': this.pageIndex,
|
||||
'size': this.pageSize
|
||||
})
|
||||
}).then(({data}) => {
|
||||
if (data && data.code === 0) {
|
||||
this.dataList = data.data.records
|
||||
this.totalPage = data.data.total
|
||||
} else {
|
||||
this.dataList = []
|
||||
this.totalPage = 0
|
||||
}
|
||||
this.dataListLoading = false
|
||||
})
|
||||
},
|
||||
changeEleType (v) {
|
||||
switch (v) {
|
||||
case '日':
|
||||
this.date = new Date()
|
||||
break
|
||||
case '周':
|
||||
this.date = new Date()
|
||||
break
|
||||
case '月':
|
||||
this.date = new Date()
|
||||
break
|
||||
case '年':
|
||||
this.date = new Date()
|
||||
break
|
||||
}
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle (val) {
|
||||
this.pageSize = val
|
||||
this.pageIndex = 1
|
||||
this.getDataList()
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle (val) {
|
||||
this.pageIndex = val
|
||||
this.getDataList()
|
||||
},
|
||||
handleNode (obj, node, e) {
|
||||
if (!obj.children) {
|
||||
this.showId = obj.id
|
||||
this.yaoluName = obj.label
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 138px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.chart-container {
|
||||
.el-tabs__item {
|
||||
height: 120px;
|
||||
}
|
||||
.el-tabs__nav-next,
|
||||
.el-tabs__nav-prev {
|
||||
line-height: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user