320 lines
7.8 KiB
Vue
320 lines
7.8 KiB
Vue
<template>
|
|
<div class="mod-config">
|
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
|
<el-form-item>
|
|
<el-radio-group v-model="dataForm.type" @change="changeType">
|
|
<el-radio-button label="日" />
|
|
<el-radio-button label="周" />
|
|
<el-radio-button label="月" />
|
|
<el-radio-button label="年" />
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="选择时间">
|
|
<el-date-picker
|
|
v-model="dataForm.date"
|
|
:type="datePickerType[dataForm.type].type"
|
|
:format="datePickerType[dataForm.type].format"
|
|
:placeholder="'选择' + datePickerType[dataForm.type].placeholder"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button @click="getDataList()">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table
|
|
:data="dataList"
|
|
border
|
|
v-loading="dataListLoading"
|
|
style="width: 100%;">
|
|
<el-table-column
|
|
prop="time"
|
|
header-align="center"
|
|
align="center"
|
|
label="时间"
|
|
/>
|
|
<el-table-column
|
|
v-for="item in yaoluList"
|
|
:prop="item.id"
|
|
header-align="center"
|
|
align="center"
|
|
:label="item.name"
|
|
:key="item.id"
|
|
/>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// 窑炉列表
|
|
const yaoluList = [
|
|
{
|
|
id: '1',
|
|
name: '窑炉1',
|
|
data: [
|
|
{ time: '0:00', value: 24 },
|
|
{ time: '2:00', value: 43 },
|
|
{ time: '4:00', value: 33 },
|
|
{ time: '6:00', value: 25 },
|
|
{ time: '8:00', value: 44 },
|
|
{ time: '10:00', value: 46 },
|
|
{ time: '12:00', value: 16 },
|
|
{ time: '14:00', value: 47 },
|
|
{ time: '16:00', value: 86 },
|
|
{ time: '18:00', value: 22 },
|
|
{ time: '20:00', value: 25 },
|
|
{ time: '22:00', value: 27 }
|
|
]
|
|
},
|
|
{
|
|
id: '2',
|
|
name: '窑炉2',
|
|
data: [
|
|
{ time: '0:00', value: 24 },
|
|
{ time: '2:00', value: 43 },
|
|
{ time: '4:00', value: 33 },
|
|
{ time: '6:00', value: 25 },
|
|
{ time: '8:00', value: 44 },
|
|
{ time: '10:00', value: 46 },
|
|
{ time: '12:00', value: 16 },
|
|
{ time: '14:00', value: 47 },
|
|
{ time: '16:00', value: 86 },
|
|
{ time: '18:00', value: 22 },
|
|
{ time: '20:00', value: 25 },
|
|
{ time: '22:00', value: 27 }
|
|
]
|
|
},
|
|
{
|
|
id: '3',
|
|
name: '窑炉3',
|
|
data: [
|
|
{ time: '0:00', value: 24 },
|
|
{ time: '2:00', value: 43 },
|
|
{ time: '4:00', value: 33 },
|
|
{ time: '6:00', value: 25 },
|
|
{ time: '8:00', value: 44 },
|
|
{ time: '10:00', value: 46 },
|
|
{ time: '12:00', value: 16 },
|
|
{ time: '14:00', value: 47 },
|
|
{ time: '16:00', value: 86 },
|
|
{ time: '18:00', value: 22 },
|
|
{ time: '20:00', value: 25 },
|
|
{ time: '22:00', value: 27 }
|
|
]
|
|
},
|
|
{
|
|
id: '4',
|
|
name: '窑炉4',
|
|
data: [
|
|
{ time: '0:00', value: 24 },
|
|
{ time: '2:00', value: 43 },
|
|
{ time: '4:00', value: 33 },
|
|
{ time: '6:00', value: 25 },
|
|
{ time: '8:00', value: 44 },
|
|
{ time: '10:00', value: 46 },
|
|
{ time: '12:00', value: 16 },
|
|
{ time: '14:00', value: 47 },
|
|
{ time: '16:00', value: 86 },
|
|
{ time: '18:00', value: 22 },
|
|
{ time: '20:00', value: 25 },
|
|
{ time: '22:00', value: 27 }
|
|
]
|
|
},
|
|
{
|
|
id: '5',
|
|
name: '窑炉5',
|
|
data: [
|
|
{ time: '0:00', value: 24 },
|
|
{ time: '2:00', value: 43 },
|
|
{ time: '4:00', value: 33 },
|
|
{ time: '6:00', value: 25 },
|
|
{ time: '8:00', value: 44 },
|
|
{ time: '10:00', value: 46 },
|
|
{ time: '12:00', value: 16 },
|
|
{ time: '14:00', value: 47 },
|
|
{ time: '16:00', value: 86 },
|
|
{ time: '18:00', value: 22 },
|
|
{ time: '20:00', value: 25 },
|
|
{ time: '22:00', value: 27 }
|
|
]
|
|
},
|
|
{
|
|
id: '6',
|
|
name: '窑炉6',
|
|
data: [
|
|
{ time: '0:00', value: 24 },
|
|
{ time: '2:00', value: 43 },
|
|
{ time: '4:00', value: 33 },
|
|
{ time: '6:00', value: 25 },
|
|
{ time: '8:00', value: 44 },
|
|
{ time: '10:00', value: 46 },
|
|
{ time: '12:00', value: 16 },
|
|
{ time: '14:00', value: 47 },
|
|
{ time: '16:00', value: 86 },
|
|
{ time: '18:00', value: 22 },
|
|
{ time: '20:00', value: 25 },
|
|
{ time: '22:00', value: 27 }
|
|
]
|
|
},
|
|
{
|
|
id: '7',
|
|
name: '窑炉7',
|
|
data: [
|
|
{ time: '0:00', value: 24 },
|
|
{ time: '2:00', value: 43 },
|
|
{ time: '4:00', value: 33 },
|
|
{ time: '6:00', value: 25 },
|
|
{ time: '8:00', value: 44 },
|
|
{ time: '10:00', value: 46 },
|
|
{ time: '12:00', value: 16 },
|
|
{ time: '14:00', value: 47 },
|
|
{ time: '16:00', value: 86 },
|
|
{ time: '18:00', value: 22 },
|
|
{ time: '20:00', value: 25 },
|
|
{ time: '22:00', value: 27 }
|
|
]
|
|
},
|
|
{
|
|
id: '8',
|
|
name: '窑炉8',
|
|
data: [
|
|
{ time: '0:00', value: 24 },
|
|
{ time: '2:00', value: 43 },
|
|
{ time: '4:00', value: 33 },
|
|
{ time: '6:00', value: 25 },
|
|
{ time: '8:00', value: 44 },
|
|
{ time: '10:00', value: 46 },
|
|
{ time: '12:00', value: 16 },
|
|
{ time: '14:00', value: 47 },
|
|
{ time: '16:00', value: 86 },
|
|
{ time: '18:00', value: 22 },
|
|
{ time: '20:00', value: 25 },
|
|
{ time: '22:00', value: 27 }
|
|
]
|
|
},
|
|
{
|
|
id: '9',
|
|
name: '窑炉9',
|
|
data: [
|
|
{ time: '0:00', value: 24 },
|
|
{ time: '2:00', value: 43 },
|
|
{ time: '4:00', value: 33 },
|
|
{ time: '6:00', value: 25 },
|
|
{ time: '8:00', value: 44 },
|
|
{ time: '10:00', value: 46 },
|
|
{ time: '12:00', value: 16 },
|
|
{ time: '14:00', value: 47 },
|
|
{ time: '16:00', value: 86 },
|
|
{ time: '18:00', value: 22 },
|
|
{ time: '20:00', value: 25 },
|
|
{ time: '22:00', value: 27 }
|
|
]
|
|
},
|
|
{
|
|
id: '10',
|
|
name: '窑炉10',
|
|
data: [
|
|
{ time: '0:00', value: 24 },
|
|
{ time: '2:00', value: 43 },
|
|
{ time: '4:00', value: 33 },
|
|
{ time: '6:00', value: 25 },
|
|
{ time: '8:00', value: 44 },
|
|
{ time: '10:00', value: 46 },
|
|
{ time: '12:00', value: 16 },
|
|
{ time: '14:00', value: 47 },
|
|
{ time: '16:00', value: 86 },
|
|
{ time: '18:00', value: 22 },
|
|
{ time: '20:00', value: 25 },
|
|
{ time: '22:00', value: 27 }
|
|
]
|
|
},
|
|
{
|
|
id: '11',
|
|
name: '窑炉11',
|
|
data: [
|
|
{ time: '0:00', value: 24 },
|
|
{ time: '2:00', value: 43 },
|
|
{ time: '4:00', value: 33 },
|
|
{ time: '6:00', value: 25 },
|
|
{ time: '8:00', value: 44 },
|
|
{ time: '10:00', value: 46 },
|
|
{ time: '12:00', value: 16 },
|
|
{ time: '14:00', value: 47 },
|
|
{ time: '16:00', value: 86 },
|
|
{ time: '18:00', value: 22 },
|
|
{ time: '20:00', value: 25 },
|
|
{ time: '22:00', value: 27 }
|
|
]
|
|
}
|
|
]
|
|
|
|
// 日期类型
|
|
const datePickerType = {
|
|
'日': {
|
|
type: 'date',
|
|
format: '',
|
|
placeholder: '日期'
|
|
},
|
|
'周': {
|
|
type: 'week',
|
|
format: 'yyyy 第 WW 周',
|
|
placeholder: '周'
|
|
},
|
|
'月': {
|
|
type: 'month',
|
|
format: '',
|
|
placeholder: '月'
|
|
},
|
|
'年': {
|
|
type: 'year',
|
|
format: '',
|
|
placeholder: '年'
|
|
}
|
|
}
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
dataForm: {
|
|
type: '日',
|
|
date: ''
|
|
},
|
|
dataList: [],
|
|
pageIndex: 1,
|
|
pageSize: 10,
|
|
totalPage: 0,
|
|
dataListLoading: false,
|
|
orderDetailVisible: false,
|
|
yaoluList,
|
|
datePickerType
|
|
}
|
|
},
|
|
created () {
|
|
this.getDataList()
|
|
},
|
|
methods: {
|
|
// 获取数据列表
|
|
getDataList () {
|
|
this.dataList = []
|
|
this.dataListLoading = true
|
|
this.yaoluList.map((item, index) => {
|
|
if (index === 0) {
|
|
item.data.map(i => {
|
|
this.dataList.push({
|
|
time: i.time,
|
|
[item.id]: i.value
|
|
})
|
|
})
|
|
} else {
|
|
item.data.map((i, idx) => {
|
|
this.dataList[idx][item.id] = i.value
|
|
})
|
|
}
|
|
})
|
|
this.dataListLoading = false
|
|
},
|
|
// 切换查询类型
|
|
changeType (v) {}
|
|
}
|
|
}
|
|
</script>
|