Skip to content

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

室内外气象改造

parent a2b72499
Show whitespace changes
Inline Side-by-side
Showing with 524 additions and 1435 deletions
src/pages/analysis/outdoor/chart.vue deleted 100644 → 0
View file @ a2b72499
//
<template lang='pug'>
div(:id="id", :style="{ width: '100%', height: '90%' }")
</template>
<script>
export default {
props: ['id', 'data', 'title', 'color'],
watch: {
data() {
this.initChart()
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
let dom = document.getElementById(this.id)
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: this.title
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
// type: 'category',
type: 'time',
boundaryGap: false
}
],
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: this.color // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: this.color
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: this.data
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/pages/analysis/outdoor/index.vue
View file @ e812355c
......@@ -24,7 +24,7 @@ card-warp(title="室外气象分析", height="45px", showBackground)
</template>
<script>
import chart from './chart'
import chart from '@/pages/components/chart.vue'
import pie from './pie'
export default {
components: {
......
src/pages/kb/indoor/chart.vue deleted 100644 → 0
View file @ a2b72499
<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 deleted 100644 → 0
View file @ a2b72499
<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 deleted 100644 → 0
View file @ a2b72499
<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 deleted 100644 → 0
View file @ a2b72499
<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
View file @ e812355c
......@@ -6,16 +6,7 @@
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%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }")
......@@ -28,14 +19,10 @@
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="data", :title="item.title", :color="item.color")
div
chart
div
chart2
div
chart3
div
chart4
pie
span.dialog-footer(slot='footer')
el-button(@click='visible = false' size='mini') 取消
el-button(type='primary', @click='dataFormSubmit' size='mini') 确定
......@@ -43,17 +30,15 @@
<script>
import tablePagination from '@/pages/components/tablePagination'
import chart from './chart'
import chart2 from './chart2'
import chart3 from './chart3'
import chart4 from './chart4'
import chart from '@/pages/components/chart.vue'
import pie from './pie'
export default {
components: {
tablePagination,
chart,
chart2,
chart3,
chart4
pie
},
data () {
return {
......@@ -66,43 +51,23 @@ export default {
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])
}
}
]
},
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' }
],
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' }]
......
src/pages/kb/outdoor/chart.vue deleted 100644 → 0
View file @ a2b72499
<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/outdoor/chart2.vue deleted 100644 → 0
View file @ a2b72499
<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/outdoor/chart3.vue deleted 100644 → 0
View file @ a2b72499
<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/outdoor/chart4.vue deleted 100644 → 0
View file @ a2b72499
<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/outdoor/chart5.vue deleted 100644 → 0
View file @ a2b72499
<template lang='pug'>
#chart5(:style="{ width: '100%', height: '90%' }")
</template>
<script>
export default {
mounted() {
this.chart5()
},
methods: {
chart5() {
let dom = document.getElementById('chart5')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: 'CO2'
},
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: '#4ECB74' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: '#4ECB74'
},
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/outdoor/chart6.vue deleted 100644 → 0
View file @ a2b72499
<template lang='pug'>
#chart6(:style="{ width: '100%', height: '90%' }")
</template>
<script>
export default {
mounted() {
this.chart6()
},
methods: {
chart6() {
let dom = document.getElementById('chart6')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: 'PM2.5'
},
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: '#999999' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: '#999999'
},
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/outdoor/chart7.vue deleted 100644 → 0
View file @ a2b72499
<template lang='pug'>
#chart7(:style="{ width: '100%', height: '90%' }")
</template>
<script>
export default {
mounted() {
this.chart7()
},
methods: {
chart7() {
let dom = document.getElementById('chart7')
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: '#975FE4' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: '#975FE4'
},
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/outdoor/history.vue
View file @ e812355c
<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-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-button(type="primary", size="mini") 查询
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="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"
)
el-button(type='primary' size='mini') 查询
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='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(v-for="item in chartList", :key="item.id")
chart(
:id="item.id",
:data="data",
:title="item.title",
:color="item.color"
)
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') 确定
pie
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'
import chart from '@/pages/components/chart.vue'
import pie from './pie'
export default {
components: {
tablePagination,
chart,
chart2,
chart3,
chart4
},
data () {
pie
},
data() {
return {
type: null,
......@@ -67,52 +115,31 @@ export default {
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])
}
}
]
},
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' }
],
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' }]
name: [{ required: true, message: '不能为空', trigger: 'blur' }]
}
}
},
methods: {
init (id, type) {
init(id, type) {
this.type = type
this.dataForm.id = id
......@@ -133,9 +160,7 @@ export default {
})
}
},
getDataList() {
},
getDataList() {},
showParams(data, type) {
console.log(111)
this.historyVisible = true
......@@ -144,7 +169,7 @@ export default {
})
},
// 表单提交
dataFormSubmit () {
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// this.$http({
......
src/pages/kb/outdoor/index.vue
View file @ e812355c
<template lang="pug">
card-warp(title="室外气象数据" height='45px' showBackground )
card-warp(title="室外气象数据", height="45px", showBackground)
div(slot="content", style="height: 90%")
el-form(:inline='true' :model='formData')
el-form-item(label='设备编号:')
el-input(size='mini' v-model='formData.code' readOnly)
el-form-item(label='设备名称:')
el-input(size='mini' v-model='formData.name' readOnly)
el-form(:inline="true", :model="formData")
el-form-item(label="设备编号:")
el-input(size="mini", v-model="formData.code", readOnly)
el-form-item(label="设备名称:")
el-input(size="mini", v-model="formData.name", readOnly)
.data-warp
div.data-item(v-for='item in typeList')
div.type {{item.type}}
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' }")
el-table-column(:resizable="false" type="index" header-align='center' align='center' width="50" label='序号')
el-table-column(:resizable="false" prop='visitorId' header-align='center' align='center' width='240' label='设备编号')
el-table-column(:resizable="false" prop='visitorId' header-align='center' align='center' width='240' label='设备名称')
el-table-column(:resizable="false" prop='visitorId' header-align='center' align='center' width='240' label='温度(℃)')
el-table-column(:resizable="false" prop='visitorId' header-align='center' align='center' label='混度(%RH)')
el-table-column(:resizable="false" prop='visitorId' header-align='center' align='center' )
span(slot='header')
.data-item(v-for="item in typeList")
.type {{ item.type }}
div(:style="{ color: item.color }")
span.num {{ item.num }}
span.unit {{ item.unit }}
.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' }"
)
el-table-column(
:resizable="false",
type="index",
header-align="center",
align="center",
width="50",
label="序号"
)
el-table-column(
:resizable="false",
prop="visitorId",
header-align="center",
align="center",
width="240",
label="设备编号"
)
el-table-column(
:resizable="false",
prop="visitorId",
header-align="center",
align="center",
width="240",
label="设备名称"
)
el-table-column(
:resizable="false",
prop="visitorId",
header-align="center",
align="center",
width="240",
label="温度(℃)"
)
el-table-column(
:resizable="false",
prop="visitorId",
header-align="center",
align="center",
label="混度(%RH)"
)
el-table-column(
:resizable="false",
prop="visitorId",
header-align="center",
align="center"
)
span(slot="header")
span CO
sub 2
span ( PPM )
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,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
chart
div
chart2
div
chart3
div
chart4
div
chart5
div
chart6
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, 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(v-for='item in chartList' :key='item.id')
chart(:id="item.id", :data="data", :title="item.title", :color="item.color")
div
chart7
div
pie8
history(v-if='historyVisible', ref='history', @refreshdatalist='getDataList')
pie
history(
v-if="historyVisible",
ref="history",
@refreshdatalist="getDataList"
)
</template>
<script>
import tablePagination from '@/pages/components/tablePagination'
import chart from './chart'
import chart2 from './chart2'
import chart3 from './chart3'
import chart4 from './chart4'
import chart5 from './chart5'
import chart6 from './chart6'
import chart7 from './chart7'
import pie8 from './pie8'
import pie from './pie'
import history from './history'
import chart from '@/pages/components/chart.vue'
export default {
components: {
tablePagination,
chart,
chart2,
chart3,
chart4,
chart5,
chart6,
chart7,
pie8,
pie,
history
},
data() {
......@@ -103,6 +157,23 @@ export default {
{ type: 'PM2.5', num: '80', unit: 'ug/m', color: '#999999' },
{ type: '辐射', num: '13', unit: 'w/m', color: '#975FE4' },
{ 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' }
],
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]
]
}
},
......@@ -111,9 +182,7 @@ export default {
this.showList = !this.showList
},
getDataList() {
},
getDataList() {},
showParams(data, type) {
console.log(111)
this.historyVisible = true
......@@ -126,33 +195,32 @@ export default {
</script>
<style lang="scss" scoped>
.data-warp{
.data-warp {
display: flex;
justify-content: space-between;
text-align: center;
margin-bottom: 20px;
.data-item{
.data-item {
width: 110px;
height: 103px;
background: #FFFFFF;
border: 1px solid #ECECEC;
background: #ffffff;
border: 1px solid #ececec;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
.type{
.type {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333333;
padding-top: 15px;
}
.num{
.num {
font-size: 32px;
font-family: PingFang SC;
font-weight: 600;
// color: #21ACFC;
// padding-top: 26px;
}
.unit{
.unit {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
......@@ -189,8 +257,8 @@ export default {
}
}
}
.clearfix:after{
content: '';
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
......
src/pages/kb/outdoor/pie.vue 0 → 100644
View file @ e812355c
<template lang='pug'>
#pie4(:style="{ width: '100%', height: '95%' }")
</template>
<script>
export default {
mounted() {
this.pie()
},
methods: {
pie() {
let dom = document.getElementById('pie4')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
color: ['#F2637B', '#eeeeee'],
title: {
text: '故障报警'
},
series: [
{
name: '',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
hoverAnimation: false, //关闭放大动画
selectedOffset: 0, //选中块的偏移量
label: {
show: false,
position: 'center',
formatter: '{d}%'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{
value: 60,
name: '直接访问',
selected: true, //默认选中第一块
label: {
show: true, //默认显示第一块
fontSize: '20',
fontWeight: 'bold'
}
},
{
value: 100,
name: '总故障',
label: {
show: false, //默认显示第一块
fontSize: '20',
fontWeight: 'bold'
}
}
]
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
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