Skip to content

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

提交

parent 8c5b3987
Hide whitespace changes
Inline Side-by-side
Showing with 566 additions and 4 deletions
src/pages/kb/indoor/chart.vue 0 → 100644
View file @ e88e95ea
<template lang='pug'>
#chart(:style="{ width: '100%', height: '90%'}")
</template>
<script>
export default {
mounted() {
this.chart()
},
methods: {
chart() {
let dom = document.getElementById('chart')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: '温度'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '订单数量',
type: 'line',
stack: '总量',
smooth: true,
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#21ACFC' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: '#21ACFC'
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/pages/kb/indoor/chart2.vue 0 → 100644
View file @ e88e95ea
<template lang='pug'>
#chart2(:style="{ width: '100%', height: '90%'}")
</template>
<script>
export default {
mounted() {
this.chart2()
},
methods: {
chart2() {
let dom = document.getElementById('chart2')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: '湿度'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '订单数量',
type: 'line',
stack: '总量',
smooth: true,
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#36CBCB' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: '#36CBCB'
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/pages/kb/indoor/chart3.vue 0 → 100644
View file @ e88e95ea
<template lang='pug'>
#chart3(:style="{ width: '100%', height: '90%'}")
</template>
<script>
export default {
mounted() {
this.chart3()
},
methods: {
chart3() {
let dom = document.getElementById('chart3')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: '风速'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '订单数量',
type: 'line',
stack: '总量',
smooth: true,
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#3AA0FF' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: '#3AA0FF'
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/pages/kb/indoor/chart4.vue 0 → 100644
View file @ e88e95ea
<template lang='pug'>
#chart4(:style="{ width: '100%', height: '90%'}")
</template>
<script>
export default {
mounted() {
this.chart4()
},
methods: {
chart4() {
let dom = document.getElementById('chart4')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: '光照'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '订单数量',
type: 'line',
stack: '总量',
smooth: true,
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#FAD337' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: '#FAD337'
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/pages/kb/indoor/history.vue 0 → 100644
View file @ e88e95ea
<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 {
type: null,
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/indoor/index.vue
View file @ e88e95ea
...@@ -42,21 +42,25 @@ card-warp(title="室内气象数据" height='45px' showBackground ) ...@@ -42,21 +42,25 @@ card-warp(title="室内气象数据" height='45px' showBackground )
el-table-column(:resizable="false" prop='visitorId' header-align='center' align='center' label='设备状态') 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='操作内容') el-table-column( :resizable="false" header-align='center' align='center' width='180' label='操作内容')
template(slot-scope='scope') template(slot-scope='scope')
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)') 统计图表 el-button(type='text' size='small' @click='showParams(scope.row,2)') 统计图表
tablePagination(:pageSize="pageSize" :totalSize="totalPage" @parentMethod='getDataList') tablePagination(:pageSize="pageSize" :totalSize="totalPage" @parentMethod='getDataList')
history(v-if='historyVisible', ref='history', @refreshdatalist='getDataList')
</template> </template>
<script> <script>
import tablePagination from '@/pages/components/tablePagination' import tablePagination from '@/pages/components/tablePagination'
import history from './history'
export default { export default {
components: { components: {
tablePagination tablePagination,
history
}, },
data() { data() {
return { return {
historyVisible: false,
activeName: '1', activeName: '1',
dataList: [{ id: 1 }], dataList: [{ id: 1 }],
dataListLoading: false, dataListLoading: false,
...@@ -70,6 +74,13 @@ components: { ...@@ -70,6 +74,13 @@ components: {
}, },
getDataList() { getDataList() {
},
showParams(data, type) {
console.log(111)
this.historyVisible = true
this.$nextTick(() => {
this.$refs.history.init(data, type)
})
} }
} }
} }
......
src/pages/kb/outdoor/history.vue
View file @ e88e95ea
...@@ -57,6 +57,8 @@ export default { ...@@ -57,6 +57,8 @@ export default {
}, },
data () { data () {
return { return {
type: null,
pageSize: 10, pageSize: 10,
totalPage: 0, totalPage: 0,
visible: false, visible: false,
...@@ -134,6 +136,13 @@ export default { ...@@ -134,6 +136,13 @@ export default {
getDataList() { getDataList() {
}, },
showParams(data, type) {
console.log(111)
this.historyVisible = true
this.$nextTick(() => {
this.$refs.history.init(data, type)
})
},
// 表单提交 // 表单提交
dataFormSubmit () { dataFormSubmit () {
this.$refs['dataForm'].validate((valid) => { this.$refs['dataForm'].validate((valid) => {
......
src/pages/kb/outdoor/index.vue
View file @ e88e95ea
...@@ -53,7 +53,6 @@ card-warp(title="室外气象数据" height='45px' showBackground ) ...@@ -53,7 +53,6 @@ card-warp(title="室外气象数据" height='45px' showBackground )
div div
pie8 pie8
history(v-if='historyVisible', ref='history', @refreshdatalist='getDataList') history(v-if='historyVisible', ref='history', @refreshdatalist='getDataList')
chartList(v-if='chartListVisible', ref='history', @refreshdatalist='getDataList')
</template> </template>
......
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