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(
)
el-table-column(
:resizable="false",
prop="name",
prop="temperature",
header-align="center",
align="center",
label="温度（℃）"
label="温度(℃)"
)
el-table-column(
:resizable="false",
prop="name",
prop="humidity",
header-align="center",
align="center",
label="湿度（%RH）"
label="湿度(%RH)"
)
el-table-column(
:resizable="false",
prop="name",
prop="wind_speed",
header-align="center",
align="center",
label="CO2（PPM）"
label="风速(m/s)"
)
el-table-column(
:resizable="false",
prop="name",
prop="Illuminance",
header-align="center",
align="center",
label="设备状态"
label="光照(Lux)"
)
el-table-column(
: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",
align="center",
label="采集时间"
......@@ -87,15 +118,15 @@ el-dialog(
div(v-for="item in chartList", :key="item.id")
chart(
:id="item.id",
:data="data",
:data="item.data",
:title="item.title",
:color="item.color"
)
div
pie
span.dialog-footer(slot="footer")
el-button(@click="visible = false", size="mini") 取消
el-button(type="primary", @click="dataFormSubmit", size="mini") 确定
//- span.dialog-footer(slot="footer")
//- el-button(@click="visible = false", size="mini") 取消
//- el-button(type="primary", @click="dataFormSubmit", size="mini") 确定
</template>
<script>
......@@ -112,7 +143,6 @@ export default {
data() {
return {
type: null,
pageIndex: 1,
pageSize: 10,
totalPage: 0,
......@@ -130,25 +160,15 @@ export default {
currentActive: 1,
dataList: [],
chartList: [
{ id: '11', title: '温度', color: '#21ACFC' },
{ id: '22', title: '湿度', color: '#36CBCB' },
{ id: '33', title: '风速', color: '#3AA0FF' },
{ id: '44', title: '光照', color: '#FAD337' },
{ id: '55', title: 'CO2', color: '#4ECB74' },
{ id: '66', title: 'PM2.5', color: '#999999' },
{ id: '77', title: '辐射', color: '#975FE4' }
{ id: '11', title: '温度', color: '#21ACFC', data: [] },
{ id: '22', title: '湿度', color: '#36CBCB', data: [] },
{ id: '33', title: '风速', color: '#3AA0FF', data: [] },
{ id: '44', title: '光照', color: '#FAD337', data: [] },
{ id: '55', title: 'CO2', color: '#4ECB74', data: [] },
{ id: '66', title: 'PM2.5', color: '#999999', data: [] },
{ id: '77', title: '辐射', color: '#975FE4', data: [] }
],
data: [
['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' }]
}
dataRule: {}
}
},
......@@ -157,26 +177,61 @@ export default {
console.log(11111)
this.type = type // 1=>>> 历史数据 / 2=>>> 统计图表
this.visible = true
// this.getDataList() //获取历史数据列表
this.currentActive = 1
if (this.type === 1) {
this.getDataList() //获取历史数据列表
} else if (this.type === 2) {
this.getDataListTb()
}
},
// 当日 ，本周
handleDate(i) {
this.currentActive = i
if (this.type === 1) {
this.getDataList() //获取历史数据列表
} else if (this.type === 2) {
this.getDataListTb()
}
},
getDataList(page, rows) {
getDataList() {
this.$http({
url: this.$http.adornUrl(`/kanban/getListByTypeAndId `),
url: this.$http.adornUrl(`/kanban/getListByTypeAndId`),
method: 'get',
params: {
params: this.$http.adornParams({
resourceId: '',
resourceType: '9a570e608d0840499551eca89d76449d', //室外气象站
type: this.currentActive,
page: page || this.pageSize,
rows: rows || this.pageSize
}
page: this.pageIndex,
rows: 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('/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 {
this.$nextTick(() => {
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>
<style lang='scss' scoped>
<style lang="scss" scoped>
.echartsWarp {
display: flex;
justify-content: space-between;
......@@ -236,7 +265,7 @@ export default {
color: #000000;
line-height: 40px;
&::before {
content: "";
content: '';
display: inline-block;
width: 10px;
height: 10px;
......
src/pages/kb/outdoor/index.vue
View file @ c4e5efad
......@@ -34,7 +34,6 @@ card-warp(title="室外气象数据", height="45px", showBackground)
type="index",
header-align="center",
align="center",
width="50",
label="序号"
)
el-table-column(
......@@ -42,7 +41,6 @@ card-warp(title="室外气象数据", height="45px", showBackground)
prop="visitorId",
header-align="center",
align="center",
width="240",
label="设备编号"
)
el-table-column(
......@@ -50,27 +48,39 @@ card-warp(title="室外气象数据", height="45px", showBackground)
prop="visitorId",
header-align="center",
align="center",
width="240",
label="设备名称"
)
el-table-column(
:resizable="false",
prop="visitorId",
prop="temperature",
header-align="center",
align="center",
width="240",
label="温度(℃)"
)
el-table-column(
:resizable="false",
prop="visitorId",
prop="humidity",
header-align="center",
align="center",
label="混度(%RH)"
label="湿度(%RH)"
)
el-table-column(
: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",
align="center"
)
......@@ -78,6 +88,20 @@ card-warp(title="室外气象数据", height="45px", showBackground)
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="visitorId",
......@@ -90,7 +114,7 @@ card-warp(title="室外气象数据", height="45px", showBackground)
header-align="center",
align="center",
width="180",
label="操作内容"
label="操作"
)
template(slot-scope="scope")
el-button(
......@@ -112,7 +136,7 @@ card-warp(title="室外气象数据", height="45px", showBackground)
div(v-for="item in chartList", :key="item.id")
chart(
:id="item.id",
:data="data",
:data="item.data",
:title="item.title",
:color="item.color"
)
......@@ -164,25 +188,26 @@ export default {
{ type: '故障报警数', num: '3', unit: '', color: '#F2637B' }
],
chartList: [
{ id: '11', title: '温度', color: '#21ACFC' },
{ id: '22', title: '湿度', color: '#36CBCB' },
{ id: '33', title: '风速', color: '#3AA0FF' },
{ id: '44', title: '光照', color: '#FAD337' },
{ id: '55', title: 'CO2', color: '#4ECB74' },
{ id: '66', title: 'PM2.5', color: '#999999' },
{ id: '77', title: '辐射', color: '#975FE4' }
{ id: '11', title: '温度', color: '#21ACFC', data: [] },
{ id: '22', title: '湿度', color: '#36CBCB', data: [] },
{ id: '33', title: '风速', color: '#3AA0FF', data: [] },
{ id: '44', title: '光照', color: '#FAD337', data: [] },
{ id: '55', title: 'CO2', color: '#4ECB74', data: [] },
{ id: '66', title: 'PM2.5', color: '#999999', data: [] },
{ id: '77', title: '辐射', color: '#975FE4', data: [] }
],
type: 1,
data: [
['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]
// ['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]
]
}
},
mounted () {
mounted() {
this.getDataList()
},
methods: {
......@@ -191,12 +216,19 @@ export default {
this.$http({
url: this.$http.adornUrl('/kanban/getSwqxzInfoTj'),
method: 'get',
params: {
type: '9a570e608d0840499551eca89d76449d' //室外气象站
}
params: this.$http.adornParams({
type: this.type
})
}).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
}
})
},
......@@ -266,7 +298,7 @@ export default {
color: #000000;
line-height: 40px;
&::before {
content: "";
content: '';
display: inline-block;
width: 10px;
height: 10px;
......@@ -278,7 +310,7 @@ export default {
}
}
.clearfix:after {
content: "";
content: '';
display: block;
height: 0;
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