Skip to content

E
energyai_vue
Commit 8c5b3987 authored by xiexingan's avatar xiexingan
Browse files
Options

调整

parent 21c94cae
Hide whitespace changes
Inline Side-by-side
Showing with 244 additions and 38 deletions
src/pages/kb/outdoor/chart.vue
View file @ 8c5b3987
......@@ -22,7 +22,6 @@ export default {
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
......@@ -30,7 +29,7 @@ export default {
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
}
],
yAxis: [
......
src/pages/kb/outdoor/chart2.vue
View file @ 8c5b3987
......@@ -22,7 +22,6 @@ export default {
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
......@@ -30,7 +29,8 @@ export default {
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
}
],
yAxis: [
......
src/pages/kb/outdoor/chart3.vue
View file @ 8c5b3987
......@@ -22,7 +22,6 @@ export default {
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
......@@ -30,7 +29,7 @@ export default {
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
}
],
yAxis: [
......
src/pages/kb/outdoor/chart4.vue
View file @ 8c5b3987
......@@ -22,7 +22,6 @@ export default {
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
......@@ -30,7 +29,7 @@ export default {
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
}
],
yAxis: [
......
src/pages/kb/outdoor/chart5.vue
View file @ 8c5b3987
......@@ -22,7 +22,6 @@ export default {
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
......@@ -31,7 +30,7 @@ export default {
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
}
],
yAxis: [
......
src/pages/kb/outdoor/chart6.vue
View file @ 8c5b3987
......@@ -22,7 +22,6 @@ export default {
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
......@@ -31,7 +30,7 @@ export default {
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
}
],
yAxis: [
......
src/pages/kb/outdoor/chart7.vue
View file @ 8c5b3987
......@@ -22,7 +22,6 @@ export default {
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
......@@ -31,7 +30,7 @@ export default {
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
}
],
yAxis: [
......
src/pages/kb/outdoor/history.vue 0 → 100644
View file @ 8c5b3987
<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', @keyup.enter.native='dataFormSubmit()', label-width='120px')
el-form-item(label='设备名称', prop='name')
el-input(v-model='dataForm.name', placeholder='设备名称' )
el-form-item(label='设备编号', prop='name')
el-input(v-model='dataForm.name', placeholder='设备编号' )
el-form-item(label='数据起止阶段', prop='name')
el-date-picker(
v-model="dataForm.dateValue",
type="daterange",
align="right",
unlink-panels,
range-separator="至",
start-placeholder="开始日期",
end-placeholder="结束日期",
:picker-options="pickerOptions"
)
el-button(type='primary' size='mini') 查询
span(v-if="type==1")
el-table( :data='dataList' size="mini" ,style='width: 100%;')
el-table-column( :resizable="false" type='index', header-align='center', align='center', label='序号')
el-table-column( :resizable="false" prop='name', header-align='center', align='center', label='温度（℃）')
el-table-column( :resizable="false" prop='name', header-align='center', align='center', label='湿度（%RH）')
el-table-column( :resizable="false" prop='name', 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='name', header-align='center', align='center', label='采集时间')
tablePagination(:pageSize="pageSize" :totalSize="totalPage" @parentMethod='getDataList')
span(v-else)
.echartsWarp(width="100%", flex)
div
chart
div
chart2
div
chart3
div
chart4
span.dialog-footer(slot='footer')
el-button(@click='visible = false' size='mini') 取消
el-button(type='primary', @click='dataFormSubmit' size='mini') 确定
</template>
<script>
import tablePagination from '@/pages/components/tablePagination'
import chart from './chart'
import chart2 from './chart2'
import chart3 from './chart3'
import chart4 from './chart4'
export default {
components: {
tablePagination,
chart,
chart2,
chart3,
chart4
},
data () {
return {
pageSize: 10,
totalPage: 0,
visible: false,
dataForm: {
name: '',
dateValue: ''
},
dataList: [],
pickerOptions: {
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(
start.getTime() - 3600 * 1000 * 24 * 7
)
picker.$emit('pick', [start, end])
}
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(
start.getTime() - 3600 * 1000 * 24 * 30
)
picker.$emit('pick', [start, end])
}
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(
start.getTime() - 3600 * 1000 * 24 * 90
)
picker.$emit('pick', [start, end])
}
}
]
},
dataRule: {
name: [ { required: true, message: '不能为空', trigger: 'blur' }]
}
}
},
methods: {
init (id, type) {
this.type = type
this.dataForm.id = id
this.visible = true
if (id) {
// this.$http({
// url: this.$http.adornUrlProduct(`/brandMain/getId/${this.dataForm.id}`),
// method: 'get',
// params: this.$http.adornParams()
// }).then((data) => {
// if (data && data.code === 0) {
// this.dataForm = data.bean
// }
// })
} else {
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
})
}
},
getDataList() {
},
// 表单提交
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>
.echartsWarp {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: calc(100vh - 530px);
margin-bottom: 90px;
// border: 1px solid;
> div {
width: 22%;
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>
src/pages/kb/outdoor/index.vue
View file @ 8c5b3987
......@@ -13,9 +13,9 @@ card-warp(title="室外气象数据" height='45px' showBackground )
.data-warp
div.data-item(v-for='item in typeList')
div.type {{item.type}}
div.color-blue
span.num sss
span.unit 11
div(:style="{'color':item.color}")
span.num {{item.num}}
span.unit {{item.unit}}
div.clearfix
el-button(size='mini' type='primary' style='float:right;margin-bottom:10px;' @click='toggle') 图形 / 列表
el-table( v-if='showList' size="mini" :data='dataList' stripe v-loading='dataListLoading' style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }")
......@@ -32,8 +32,8 @@ card-warp(title="室外气象数据" height='45px' showBackground )
el-table-column(:resizable="false" prop='visitorId' header-align='center' align='center' label='设备状态')
el-table-column( :resizable="false" header-align='center' align='center' width='180' label='操作内容')
template(slot-scope='scope')
el-button(type='text' size='small' @click='showParams(scope.row)') 历史数据
el-button(type='text' size='small' @click='showParams(scope.row)') 统计图表
el-button(type='text' size='small' @click='showParams(scope.row,1)') 历史数据
el-button(type='text' size='small' @click='showParams(scope.row,2)') 统计图表
tablePagination(:pageSize="pageSize" :totalSize="totalPage" @parentMethod='getDataList')
.echartsWarp(v-else width="100%", flex)
div
......@@ -52,6 +52,9 @@ card-warp(title="室外气象数据" height='45px' showBackground )
chart7
div
pie8
history(v-if='historyVisible', ref='history', @refreshdatalist='getDataList')
chartList(v-if='chartListVisible', ref='history', @refreshdatalist='getDataList')
</template>
<script>
......@@ -64,6 +67,8 @@ import chart5 from './chart5'
import chart6 from './chart6'
import chart7 from './chart7'
import pie8 from './pie8'
import history from './history'
export default {
components: {
tablePagination,
......@@ -74,10 +79,13 @@ export default {
chart5,
chart6,
chart7,
pie8
pie8,
history
},
data() {
return {
historyVisible: false,
chartListVisible: false,
showList: false,
activeName: '1',
dataList: [{ id: 1 }],
......@@ -85,15 +93,15 @@ export default {
pageSize: 50,
totalPage: 0,
typeList: [
{ type: '温度' },
{ type: '湿度' },
{ type: '风速' },
{ type: '风向' },
{ type: '光照' },
{ type: 'CO2' },
{ type: 'PM2.5' },
{ type: '辐射' },
{ type: '故障报警次数' }
{ type: '温度', num: '37', unit: '℃', color: '#21ACFC' },
{ type: '湿度', num: '25', unit: '%', color: '#36CBCB' },
{ type: '风速', num: '3', unit: 'm/s', color: '#3AA0FF' },
{ type: '风向', num: '东南', unit: '', color: '#3AA0FF' },
{ type: '光照', num: '253', unit: 'Lux', color: '#FAD337' },
{ type: 'CO2', num: '17', unit: 'PPM', color: '#4ECB74' },
{ type: 'PM2.5', num: '80', unit: 'ug/m', color: '#999999' },
{ type: '辐射', num: '13', unit: 'w/m', color: '#975FE4' },
{ type: '故障报警数', num: '3', unit: '', color: '#F2637B' }
]
}
},
......@@ -106,6 +114,13 @@ export default {
},
getDataList() {
},
showParams(data, type) {
console.log(111)
this.historyVisible = true
this.$nextTick(() => {
this.$refs.history.init(data, type)
})
}
}
}
......@@ -143,8 +158,8 @@ export default {
text-align: center;
margin-bottom: 20px;
.data-item{
width: 10%;
height: 153px;
width: 110px;
height: 103px;
background: #FFFFFF;
border: 1px solid #ECECEC;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
......@@ -153,14 +168,14 @@ export default {
font-family: Microsoft YaHei;
font-weight: 400;
color: #333333;
padding-top: 38px;
padding-top: 15px;
}
.num{
font-size: 36px;
font-size: 32px;
font-family: PingFang SC;
font-weight: 600;
color: #21ACFC;
// color: #21ACFC;
// padding-top: 26px;
}
.unit{
......@@ -174,13 +189,13 @@ export default {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: calc(100vh - 380px);
height: calc(100vh - 530px);
margin-bottom: 90px;
// border: 1px solid;
> div {
width: 22%;
height: calc(90% / 2);
margin: 3px;
padding: 13px;
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;
......
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