Skip to content

E
energyai_vue
Commit c4e5efad authored by co_dengxiongwen's avatar co_dengxiongwen
Browse files
Options

室外气象数据页面

parent 26edaee6
Hide whitespace changes
Inline Side-by-side
Showing with 157 additions and 96 deletions
src/pages/kb/outdoor/history.vue
View file @ c4e5efad
...@@ -44,35 +44,66 @@ el-dialog( ...@@ -44,35 +44,66 @@ el-dialog(
) )
el-table-column( el-table-column(
:resizable="false", :resizable="false",
prop="name", prop="temperature",
header-align="center", header-align="center",
align="center", align="center",
label="温度（℃）" label="温度(℃)"
) )
el-table-column( el-table-column(
:resizable="false", :resizable="false",
prop="name", prop="humidity",
header-align="center", header-align="center",
align="center", align="center",
label="湿度（%RH）" label="湿度(%RH)"
) )
el-table-column( el-table-column(
:resizable="false", :resizable="false",
prop="name", prop="wind_speed",
header-align="center", header-align="center",
align="center", align="center",
label="CO2（PPM）" label="风速(m/s)"
) )
el-table-column( el-table-column(
:resizable="false", :resizable="false",
prop="name", prop="Illuminance",
header-align="center", header-align="center",
align="center", align="center",
label="设备状态" label="光照(Lux)"
) )
el-table-column( el-table-column(
:resizable="false", :resizable="false",
prop="name", prop="carbon_dioxide",
header-align="center",
align="center",
)
span(slot="header")
span CO
sub 2
span (PPM)
el-table-column(
:resizable="false",
prop="fine_particles",
header-align="center",
align="center",
label="PM2.5(ug/m)"
)
el-table-column(
:resizable="false",
prop="radiation",
header-align="center",
align="center",
label="辐射(w/m)"
)
//- el-table-column(
//- :resizable="false",
//- prop="name",
//- header-align="center",
//- align="center",
//- label="设备状态"
//- )
el-table-column(
:resizable="false",
prop="create_time",
header-align="center", header-align="center",
align="center", align="center",
label="采集时间" label="采集时间"
...@@ -87,15 +118,15 @@ el-dialog( ...@@ -87,15 +118,15 @@ el-dialog(
div(v-for="item in chartList", :key="item.id") div(v-for="item in chartList", :key="item.id")
chart( chart(
:id="item.id", :id="item.id",
:data="data", :data="item.data",
:title="item.title", :title="item.title",
:color="item.color" :color="item.color"
) )
div div
pie pie
span.dialog-footer(slot="footer") //- span.dialog-footer(slot="footer")
el-button(@click="visible = false", size="mini") 取消 //- el-button(@click="visible = false", size="mini") 取消
el-button(type="primary", @click="dataFormSubmit", size="mini") 确定 //- el-button(type="primary", @click="dataFormSubmit", size="mini") 确定
</template> </template>
<script> <script>
...@@ -112,7 +143,6 @@ export default { ...@@ -112,7 +143,6 @@ export default {
data() { data() {
return { return {
type: null, type: null,
pageIndex: 1, pageIndex: 1,
pageSize: 10, pageSize: 10,
totalPage: 0, totalPage: 0,
...@@ -130,25 +160,15 @@ export default { ...@@ -130,25 +160,15 @@ export default {
currentActive: 1, currentActive: 1,
dataList: [], dataList: [],
chartList: [ chartList: [
{ id: '11', title: '温度', color: '#21ACFC' }, { id: '11', title: '温度', color: '#21ACFC', data: [] },
{ id: '22', title: '湿度', color: '#36CBCB' }, { id: '22', title: '湿度', color: '#36CBCB', data: [] },
{ id: '33', title: '风速', color: '#3AA0FF' }, { id: '33', title: '风速', color: '#3AA0FF', data: [] },
{ id: '44', title: '光照', color: '#FAD337' }, { id: '44', title: '光照', color: '#FAD337', data: [] },
{ id: '55', title: 'CO2', color: '#4ECB74' }, { id: '55', title: 'CO2', color: '#4ECB74', data: [] },
{ id: '66', title: 'PM2.5', color: '#999999' }, { id: '66', title: 'PM2.5', color: '#999999', data: [] },
{ id: '77', title: '辐射', color: '#975FE4' } { id: '77', title: '辐射', color: '#975FE4', data: [] }
], ],
data: [ dataRule: {}
['2019-8-14 8:00:00', 70],
['2019-8-14 8:00:01', 60],
['2019-8-14 8:00:02', 30],
['2019-8-14 8:00:03', 79],
['2019-8-14 8:00:06', 10],
['2019-8-14 8:00:20', 31]
],
dataRule: {
name: [{ required: true, message: '不能为空', trigger: 'blur' }]
}
} }
}, },
...@@ -157,26 +177,61 @@ export default { ...@@ -157,26 +177,61 @@ export default {
console.log(11111) console.log(11111)
this.type = type // 1=>>> 历史数据 / 2=>>> 统计图表 this.type = type // 1=>>> 历史数据 / 2=>>> 统计图表
this.visible = true this.visible = true
// this.getDataList() //获取历史数据列表 this.currentActive = 1
if (this.type === 1) {
this.getDataList() //获取历史数据列表
} else if (this.type === 2) {
this.getDataListTb()
}
}, },
// 当日 ，本周 // 当日 ，本周
handleDate(i) { handleDate(i) {
this.currentActive = i this.currentActive = i
if (this.type === 1) {
this.getDataList() //获取历史数据列表
} else if (this.type === 2) {
this.getDataListTb()
}
}, },
getDataList(page, rows) { getDataList() {
this.$http({ this.$http({
url: this.$http.adornUrl(`/kanban/getListByTypeAndId `), url: this.$http.adornUrl(`/kanban/getListByTypeAndId`),
method: 'get', method: 'get',
params: { params: this.$http.adornParams({
resourceId: '', resourceId: '',
resourceType: '9a570e608d0840499551eca89d76449d', //室外气象站 resourceType: '9a570e608d0840499551eca89d76449d', //室外气象站
type: this.currentActive, type: this.currentActive,
page: page || this.pageSize, page: this.pageIndex,
rows: rows || this.pageSize rows: this.pageSize
} })
}).then((data) => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
console.log('室外气象站历史数据', data) 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('/kanban/getSwqxzInfoTj'),
method: 'get',
params: this.$http.adornParams({
type: this.currentActive
})
}).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.windSpeedList
this.chartList[3].data = data.illuminanceList
this.chartList[4].data = data.carbonDioxideList
this.chartList[5].data = data.fineParticlesList
this.chartList[6].data = data.radiationList
} }
}) })
}, },
...@@ -186,37 +241,11 @@ export default { ...@@ -186,37 +241,11 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.history.init(data, type) this.$refs.history.init(data, type)
}) })
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// this.$http({
// url: this.$http.adornUrlProduct(`/brandMain/${!this.dataForm.id ? 'save' : 'update'}`),
// method: 'post',
// data: this.dataForm
// }).then((data) => {
// if (data && data.code === 0) {
// this.$message({
// message: '操作成功',
// type: 'success',
// duration: 1500,
// onClose: () => {
// this.visible = false
// this.$emit('refreshdatalist')
// }
// })
// } else {
// this.$message.error(data.msg)
// }
// })
}
})
} }
} }
} }
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.echartsWarp { .echartsWarp {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -236,7 +265,7 @@ export default { ...@@ -236,7 +265,7 @@ export default {
color: #000000; color: #000000;
line-height: 40px; line-height: 40px;
&::before { &::before {
content: ""; content: '';
display: inline-block; display: inline-block;
width: 10px; width: 10px;
height: 10px; height: 10px;
......
src/pages/kb/outdoor/index.vue
View file @ c4e5efad
...@@ -34,7 +34,6 @@ card-warp(title="室外气象数据", height="45px", showBackground) ...@@ -34,7 +34,6 @@ card-warp(title="室外气象数据", height="45px", showBackground)
type="index", type="index",
header-align="center", header-align="center",
align="center", align="center",
width="50",
label="序号" label="序号"
) )
el-table-column( el-table-column(
...@@ -42,7 +41,6 @@ card-warp(title="室外气象数据", height="45px", showBackground) ...@@ -42,7 +41,6 @@ card-warp(title="室外气象数据", height="45px", showBackground)
prop="visitorId", prop="visitorId",
header-align="center", header-align="center",
align="center", align="center",
width="240",
label="设备编号" label="设备编号"
) )
el-table-column( el-table-column(
...@@ -50,27 +48,39 @@ card-warp(title="室外气象数据", height="45px", showBackground) ...@@ -50,27 +48,39 @@ card-warp(title="室外气象数据", height="45px", showBackground)
prop="visitorId", prop="visitorId",
header-align="center", header-align="center",
align="center", align="center",
width="240",
label="设备名称" label="设备名称"
) )
el-table-column( el-table-column(
:resizable="false", :resizable="false",
prop="visitorId", prop="temperature",
header-align="center", header-align="center",
align="center", align="center",
width="240",
label="温度(℃)" label="温度(℃)"
) )
el-table-column( el-table-column(
:resizable="false", :resizable="false",
prop="visitorId", prop="humidity",
header-align="center", header-align="center",
align="center", align="center",
label="混度(%RH)" label="湿度(%RH)"
) )
el-table-column( el-table-column(
:resizable="false", :resizable="false",
prop="visitorId", prop="wind_speed",
header-align="center",
align="center",
label="风速(m/s)"
)
el-table-column(
:resizable="false",
prop="Illuminance",
header-align="center",
align="center",
label="光照(Lux)"
)
el-table-column(
:resizable="false",
prop="carbon_dioxide",
header-align="center", header-align="center",
align="center" align="center"
) )
...@@ -78,6 +88,20 @@ card-warp(title="室外气象数据", height="45px", showBackground) ...@@ -78,6 +88,20 @@ card-warp(title="室外气象数据", height="45px", showBackground)
span CO span CO
sub 2 sub 2
span ( PPM ) span ( PPM )
el-table-column(
:resizable="false",
prop="fine_particles",
header-align="center",
align="center",
label="PM2.5(ug/m)"
)
el-table-column(
:resizable="false",
prop="radiation",
header-align="center",
align="center",
label="辐射(w/m)"
)
el-table-column( el-table-column(
:resizable="false", :resizable="false",
prop="visitorId", prop="visitorId",
...@@ -90,7 +114,7 @@ card-warp(title="室外气象数据", height="45px", showBackground) ...@@ -90,7 +114,7 @@ card-warp(title="室外气象数据", height="45px", showBackground)
header-align="center", header-align="center",
align="center", align="center",
width="180", width="180",
label="操作内容" label="操作"
) )
template(slot-scope="scope") template(slot-scope="scope")
el-button( el-button(
...@@ -112,7 +136,7 @@ card-warp(title="室外气象数据", height="45px", showBackground) ...@@ -112,7 +136,7 @@ card-warp(title="室外气象数据", height="45px", showBackground)
div(v-for="item in chartList", :key="item.id") div(v-for="item in chartList", :key="item.id")
chart( chart(
:id="item.id", :id="item.id",
:data="data", :data="item.data",
:title="item.title", :title="item.title",
:color="item.color" :color="item.color"
) )
...@@ -164,25 +188,26 @@ export default { ...@@ -164,25 +188,26 @@ export default {
{ type: '故障报警数', num: '3', unit: '', color: '#F2637B' } { type: '故障报警数', num: '3', unit: '', color: '#F2637B' }
], ],
chartList: [ chartList: [
{ id: '11', title: '温度', color: '#21ACFC' }, { id: '11', title: '温度', color: '#21ACFC', data: [] },
{ id: '22', title: '湿度', color: '#36CBCB' }, { id: '22', title: '湿度', color: '#36CBCB', data: [] },
{ id: '33', title: '风速', color: '#3AA0FF' }, { id: '33', title: '风速', color: '#3AA0FF', data: [] },
{ id: '44', title: '光照', color: '#FAD337' }, { id: '44', title: '光照', color: '#FAD337', data: [] },
{ id: '55', title: 'CO2', color: '#4ECB74' }, { id: '55', title: 'CO2', color: '#4ECB74', data: [] },
{ id: '66', title: 'PM2.5', color: '#999999' }, { id: '66', title: 'PM2.5', color: '#999999', data: [] },
{ id: '77', title: '辐射', color: '#975FE4' } { id: '77', title: '辐射', color: '#975FE4', data: [] }
], ],
type: 1,
data: [ data: [
['2019-8-14 8:00:00', 70], // ['2019-8-14 8:00:00', 70],
['2019-8-14 8:00:01', 60], // ['2019-8-14 8:00:01', 60],
['2019-8-14 8:00:02', 30], // ['2019-8-14 8:00:02', 30],
['2019-8-14 8:00:03', 79], // ['2019-8-14 8:00:03', 79],
['2019-8-14 8:00:06', 10], // ['2019-8-14 8:00:06', 10],
['2019-8-14 8:00:20', 31] // ['2019-8-14 8:00:20', 31]
] ]
} }
}, },
mounted () { mounted() {
this.getDataList() this.getDataList()
}, },
methods: { methods: {
...@@ -191,12 +216,19 @@ export default { ...@@ -191,12 +216,19 @@ export default {
this.$http({ this.$http({
url: this.$http.adornUrl('/kanban/getSwqxzInfoTj'), url: this.$http.adornUrl('/kanban/getSwqxzInfoTj'),
method: 'get', method: 'get',
params: { params: this.$http.adornParams({
type: '9a570e608d0840499551eca89d76449d' //室外气象站 type: this.type
} })
}).then((data) => { }).then((data) => {
if (data && data.code === 0) { if (data && data.code === 0) {
console.log('数据', data) console.log('数据', data)
this.chartList[0].data = data.temperatureList
this.chartList[1].data = data.humidityList
this.chartList[2].data = data.windSpeedList
this.chartList[3].data = data.illuminanceList
this.chartList[4].data = data.carbonDioxideList
this.chartList[5].data = data.fineParticlesList
this.chartList[6].data = data.radiationList
} }
}) })
}, },
...@@ -266,7 +298,7 @@ export default { ...@@ -266,7 +298,7 @@ export default {
color: #000000; color: #000000;
line-height: 40px; line-height: 40px;
&::before { &::before {
content: ""; content: '';
display: inline-block; display: inline-block;
width: 10px; width: 10px;
height: 10px; height: 10px;
...@@ -278,7 +310,7 @@ export default { ...@@ -278,7 +310,7 @@ export default {
} }
} }
.clearfix:after { .clearfix:after {
content: ""; content: '';
display: block; display: block;
height: 0; height: 0;
clear: both; clear: both;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment