<template lang="pug">
el-dialog(:title="type==1?'历史数据':'统计图表'", :close-on-click-modal='false', :visible.sync='visible' width='80%' :append-to-body='true')
el-form(:model='dataForm', size='mini' :inline='true' :rules='dataRule' ,ref='dataForm', label-width='120px')
el-form-item(label='设备名称', prop='name')
el-input(v-model='dataForm.name', placeholder='设备名称' readOnly)
el-form-item(label='设备编号', prop='code')
el-input(v-model='dataForm.code', placeholder='设备编号' readOnly)
//- el-form-item(label='数据起止阶段', prop='time')
//- el-button(
//- size="mini",
//- type="primary",
//- @click="handleDate(item.id)",
//- v-for="(item, index) in typeList",
//- :key="index",
//- :class="[item.id == currentActive ? 'isActive' : '']"
//- ) {{ item.name }}
el-form-item( label="时间范围：")
el-date-picker(
v-model="startTime"
align="right"
type="date"
@change="startChangeHandle" :picker-options="startPickerOptions"
value-format="yyyy-MM-dd"
placeholder="选择日期")
span( style="padding: 0 10px") 至
el-date-picker(
v-model="endTime"
align="right"
type="date"
@change="endChangeHandle" :picker-options="endPickerOptions"
value-format="yyyy-MM-dd"
placeholder="选择日期")
el-button( type="primary" style='margin-left:10px;' size="mini" icon="el-icon-search" @click="getList()") 查询
span(v-if="type==1")
el-table( :data='dataList' size="mini" ,style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }")
el-table-column( :resizable="false" type='index', header-align='center', align='center', label='序号')
el-table-column( :resizable="false" prop='temperature', header-align='center', align='center', label='温度（℃）')
el-table-column( :resizable="false" prop='humidity', header-align='center', align='center', label='湿度（%RH）')
el-table-column( :resizable="false" prop='carbon_dioxide', header-align='center', align='center', label='CO2（PPM）')
//- el-table-column( :resizable="false" prop='name', header-align='center', align='center', label='设备状态')
el-table-column( :resizable="false" prop='create_time', header-align='center', align='center', label='采集时间')
tablePagination(:pageSize="pageSize" :totalSize="totalPage" @parentMethod='getDataList')
span(v-else)
.echartsWarp(width="100%", flex)
div(v-for='item in chartList' :key='item.id')
chart(:id="item.id", :data="item.data", :title="item.title", :color="item.color")
</template>
<script>
import tablePagination from '@/pages/components/tablePagination'
import chart from '@/pages/components/chart.vue'
import pie from './pie'
export default {
components: {
tablePagination,
chart,
pie
},
data() {
return {
startPickerOptions: {},
endPickerOptions: {},
startTime: '',
endTime: '',
typeList: [
{ name: '当日', id: 1 },
{ name: '本周', id: 2 },
{ name: '当月', id: 3 },
{ name: '今年', id: 4 }
],
currentActive: 1,
type: null,
pageSize: 10,
pageIndex: 1,
totalPage: 0,
visible: false,
dataForm: {},
dataList: [],
chartList: [
{ id: '11', title: '温度(℃)', color: '#21ACFC', data: [] },
{ id: '22', title: '湿度(%RH)', color: '#36CBCB', data: [] },
{ id: '33', title: 'CO2(PPM)', color: '#4ECB74', data: [] },
{ id: '44', title: '故障报警', color: '#975FE4', data: [] }
],
dataRule: {}
}
},
methods: {
init(data, type) {
this.startTime = ''
this.endTime = ''
this.dataForm = data
this.type = type
this.visible = true
this.currentActive = 1
if (this.type === 1) {
this.getDataList() //获取历史数据列表
} else if (this.type === 2) {
this.getDataListTb()
}
},
getList() {
if (this.type === 1) {
this.getDataList() //获取历史数据列表
} else if (this.type === 2) {
this.getDataListTb()
}
},
getDataList(page, size) {
this.$http({
url: this.$http.adornUrl(`/kanban/getListByTypeAndId`),
method: 'get',
params: this.$http.adornParams({
resourceId: this.dataForm.id,
resourceType: this.dataForm.type,
startTime: this.startTime,
endTime: this.endTime,
page: page || this.pageIndex,
rows: size || this.pageSize
})
}).then((data) => {
if (data && data.code === 0) {
console.log('室内气象站历史数据', data)
this.dataList = data.page.records
this.totalPage = data.page.total
} else {
this.dataList = []
this.totalPage = 0
}
})
},
getDataListTb() {
this.$http({
url: this.$http.adornUrl('/analysis/getSnqxzInfoTj'),
method: 'get',
params: this.$http.adornParams({
region: this.dataForm.region,
resourceId: this.dataForm.id,
startTime: this.startTime,
endTime: this.endTime
})
}).then((data) => {
if (data && data.code === 0) {
// console.log('数据', data)
this.chartList[0].data = data.temperatureList
this.chartList[1].data = data.humidityList
this.chartList[2].data = data.carbonDioxideList
this.chartList[3].data = data.carbonDioxideList
}
})
},
// 开始时间change事件
startChangeHandle(val) {
if (val) {
this.endPickerOptions = {
disabledDate(time) {
return time.getTime() <= new Date(val) - 8.64e7
}
}
} else {
this.endPickerOptions = {}
}
},
// 结束时间change事件
endChangeHandle(val) {
if (val) {
this.startPickerOptions = {
disabledDate(time) {
return new Date(val) <= time.getTime()
}
}
} else {
this.startPickerOptions = {}
}
},
// 当日 ，本周
handleDate(i) {
this.currentActive = i
if (this.type === 1) {
this.getDataList() //获取历史数据列表
} else if (this.type === 2) {
this.getDataListTb()
}
}
}
}
</script>
<style lang="scss" scoped>
.echartsWarp {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: calc(100vh - 530px);
// margin-bottom: 90px;
// border: 1px solid;
> div {
width: 48%;
height: calc(85% / 2);
padding: 10px 10px 0 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
.title {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 600;
color: #000000;
line-height: 40px;
&::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #0097ff;
margin: 0 10px;
}
}
}
}
</style>