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) ...@@ -24,7 +24,7 @@ card-warp(title="室外气象分析", height="45px", showBackground)
</template> </template>
<script> <script>
import chart from './chart' import chart from '@/pages/components/chart.vue'
import pie from './pie' import pie from './pie'
export default { export default {
components: { 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 @@ ...@@ -6,16 +6,7 @@
el-form-item(label='设备编号', prop='name') el-form-item(label='设备编号', prop='name')
el-input(v-model='dataForm.name', placeholder='设备编号' ) el-input(v-model='dataForm.name', placeholder='设备编号' )
el-form-item(label='数据起止阶段', prop='name') 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') 查询 el-button(type='primary' size='mini') 查询
span(v-if="type==1") span(v-if="type==1")
el-table( :data='dataList' size="mini" ,style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }") el-table( :data='dataList' size="mini" ,style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }")
...@@ -28,14 +19,10 @@ ...@@ -28,14 +19,10 @@
tablePagination(:pageSize="pageSize" :totalSize="totalPage" @parentMethod='getDataList') tablePagination(:pageSize="pageSize" :totalSize="totalPage" @parentMethod='getDataList')
span(v-else) span(v-else)
.echartsWarp(width="100%", flex) .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 div
chart pie
div
chart2
div
chart3
div
chart4
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') 确定
...@@ -43,17 +30,15 @@ ...@@ -43,17 +30,15 @@
<script> <script>
import tablePagination from '@/pages/components/tablePagination' import tablePagination from '@/pages/components/tablePagination'
import chart from './chart' import chart from '@/pages/components/chart.vue'
import chart2 from './chart2' import pie from './pie'
import chart3 from './chart3'
import chart4 from './chart4'
export default { export default {
components: { components: {
tablePagination, tablePagination,
chart, chart,
chart2, pie
chart3,
chart4
}, },
data () { data () {
return { return {
...@@ -66,43 +51,23 @@ export default { ...@@ -66,43 +51,23 @@ export default {
dateValue: '' dateValue: ''
}, },
dataList: [], dataList: [],
pickerOptions: { chartList: [
shortcuts: [ { id: '11', title: '温度', color: '#21ACFC' },
{ { id: '22', title: '湿度', color: '#36CBCB' },
text: '最近一周', { id: '33', title: '风速', color: '#3AA0FF' },
onClick(picker) { { id: '44', title: '光照', color: '#FAD337' },
const end = new Date() { id: '55', title: 'CO2', color: '#4ECB74' },
const start = new Date() { id: '66', title: 'PM2.5', color: '#999999' },
start.setTime( { id: '77', title: '辐射', color: '#975FE4' }
start.getTime() - 3600 * 1000 * 24 * 7 ],
) data: [
picker.$emit('pick', [start, end]) ['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],
text: '最近一个月', ['2019-8-14 8:00:06', 10],
onClick(picker) { ['2019-8-14 8:00:20', 31]
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: { dataRule: {
name: [ { required: true, message: '不能为空', trigger: 'blur' }] 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"> <template lang="pug">
el-dialog(:title="type==1?'历史数据':'统计图表'", :close-on-click-modal='false', :visible.sync='visible' width='80%' :append-to-body='true') el-dialog(
el-form(:model='dataForm', size='mini' :inline='true' :rules='dataRule' ,ref='dataForm', @keyup.enter.native='dataFormSubmit()', label-width='120px') :title="type == 1 ? '历史数据' : '统计图表'",
el-form-item(label='设备名称', prop='name') :close-on-click-modal="false",
el-input(v-model='dataForm.name', placeholder='设备名称' ) :visible.sync="visible",
el-form-item(label='设备编号', prop='name') width="80%",
el-input(v-model='dataForm.name', placeholder='设备编号' ) :append-to-body="true"
el-form-item(label='数据起止阶段', prop='name') )
el-date-picker( el-form(
v-model="dataForm.dateValue", :model="dataForm",
type="daterange", size="mini",
align="right", :inline="true",
unlink-panels, :rules="dataRule",
range-separator="至", ref="dataForm",
start-placeholder="开始日期", @keyup.enter.native="dataFormSubmit()",
end-placeholder="结束日期", label-width="120px"
:picker-options="pickerOptions" )
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) span(v-else)
.echartsWarp(width="100%", flex) .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 div
chart pie
div span.dialog-footer(slot="footer")
chart2 el-button(@click="visible = false", size="mini") 取消
div el-button(type="primary", @click="dataFormSubmit", size="mini") 确定
chart3
div
chart4
span.dialog-footer(slot='footer')
el-button(@click='visible = false' size='mini') 取消
el-button(type='primary', @click='dataFormSubmit' size='mini') 确定
</template> </template>
<script> <script>
import tablePagination from '@/pages/components/tablePagination' import tablePagination from '@/pages/components/tablePagination'
import chart from './chart' import chart from '@/pages/components/chart.vue'
import chart2 from './chart2' import pie from './pie'
import chart3 from './chart3'
import chart4 from './chart4'
export default { export default {
components: { components: {
tablePagination, tablePagination,
chart, chart,
chart2, pie
chart3, },
chart4 data() {
},
data () {
return { return {
type: null, type: null,
...@@ -67,52 +115,31 @@ export default { ...@@ -67,52 +115,31 @@ export default {
dateValue: '' dateValue: ''
}, },
dataList: [], dataList: [],
pickerOptions: { chartList: [
shortcuts: [ { id: '11', title: '温度', color: '#21ACFC' },
{ { id: '22', title: '湿度', color: '#36CBCB' },
text: '最近一周', { id: '33', title: '风速', color: '#3AA0FF' },
onClick(picker) { { id: '44', title: '光照', color: '#FAD337' },
const end = new Date() { id: '55', title: 'CO2', color: '#4ECB74' },
const start = new Date() { id: '66', title: 'PM2.5', color: '#999999' },
start.setTime( { id: '77', title: '辐射', color: '#975FE4' }
start.getTime() - 3600 * 1000 * 24 * 7 ],
) data: [
picker.$emit('pick', [start, end]) ['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],
text: '最近一个月', ['2019-8-14 8:00:06', 10],
onClick(picker) { ['2019-8-14 8:00:20', 31]
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: { dataRule: {
name: [ { required: true, message: '不能为空', trigger: 'blur' }] name: [{ required: true, message: '不能为空', trigger: 'blur' }]
} }
} }
}, },
methods: { methods: {
init (id, type) { init(id, type) {
this.type = type this.type = type
this.dataForm.id = id this.dataForm.id = id
...@@ -133,9 +160,7 @@ export default { ...@@ -133,9 +160,7 @@ export default {
}) })
} }
}, },
getDataList() { getDataList() {},
},
showParams(data, type) { showParams(data, type) {
console.log(111) console.log(111)
this.historyVisible = true this.historyVisible = true
...@@ -144,7 +169,7 @@ export default { ...@@ -144,7 +169,7 @@ export default {
}) })
}, },
// 表单提交 // 表单提交
dataFormSubmit () { dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => { this.$refs['dataForm'].validate((valid) => {
if (valid) { if (valid) {
// this.$http({ // this.$http({
......
src/pages/kb/outdoor/index.vue
View file @ e812355c
<template lang="pug"> <template lang="pug">
card-warp(title="室外气象数据" height='45px' showBackground ) card-warp(title="室外气象数据", height="45px", showBackground)
div(slot="content", style="height: 90%") div(slot="content", style="height: 90%")
el-form(:inline='true' :model='formData') el-form(:inline="true", :model="formData")
el-form-item(label='设备编号:') el-form-item(label="设备编号:")
el-input(size='mini' v-model='formData.code' readOnly) el-input(size="mini", v-model="formData.code", readOnly)
el-form-item(label='设备名称:') el-form-item(label="设备名称:")
el-input(size='mini' v-model='formData.name' readOnly) el-input(size="mini", v-model="formData.name", readOnly)
.data-warp .data-warp
div.data-item(v-for='item in typeList') .data-item(v-for="item in typeList")
div.type {{item.type}} .type {{ item.type }}
div(:style="{'color':item.color}") div(:style="{ color: item.color }")
span.num {{item.num}} span.num {{ item.num }}
span.unit {{item.unit}} span.unit {{ item.unit }}
div.clearfix .clearfix
el-button(size='mini' type='primary' style='float:right;margin-bottom:10px;' @click='toggle') 图形 / 列表 el-button(
el-table( v-if='showList' size="mini" :data='dataList' stripe v-loading='dataListLoading' style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }") size="mini",
el-table-column(:resizable="false" type="index" header-align='center' align='center' width="50" label='序号') type="primary",
el-table-column(:resizable="false" prop='visitorId' header-align='center' align='center' width='240' label='设备编号') style="float: right; margin-bottom: 10px",
el-table-column(:resizable="false" prop='visitorId' header-align='center' align='center' width='240' label='设备名称') @click="toggle"
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(
el-table-column(:resizable="false" prop='visitorId' header-align='center' align='center' ) v-if="showList",
span(slot='header') 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 span CO
sub 2 sub 2
span ( PPM ) span ( PPM )
el-table-column(:resizable="false" prop='visitorId' header-align='center' align='center' label='设备状态') el-table-column(
el-table-column( :resizable="false" header-align='center' align='center' width='180' label='操作内容') :resizable="false",
template(slot-scope='scope') prop="visitorId",
el-button(type='text' size='small' @click='showParams(scope.row,1)') 历史数据 header-align="center",
el-button(type='text' size='small' @click='showParams(scope.row,2)') 统计图表 align="center",
tablePagination(:pageSize="pageSize" :totalSize="totalPage" @parentMethod='getDataList') label="设备状态"
.echartsWarp(v-else width="100%", flex) )
div el-table-column(
chart :resizable="false",
div header-align="center",
chart2 align="center",
div width="180",
chart3 label="操作内容"
div )
chart4 template(slot-scope="scope")
div el-button(
chart5 type="text",
div size="small",
chart6 @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 div
chart7 pie
div history(
pie8 v-if="historyVisible",
history(v-if='historyVisible', ref='history', @refreshdatalist='getDataList') ref="history",
@refreshdatalist="getDataList"
)
</template> </template>
<script> <script>
import tablePagination from '@/pages/components/tablePagination' import tablePagination from '@/pages/components/tablePagination'
import chart from './chart' import pie from './pie'
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 history from './history' import history from './history'
import chart from '@/pages/components/chart.vue'
export default { export default {
components: { components: {
tablePagination, tablePagination,
chart, chart,
chart2, pie,
chart3,
chart4,
chart5,
chart6,
chart7,
pie8,
history history
}, },
data() { data() {
...@@ -103,6 +157,23 @@ export default { ...@@ -103,6 +157,23 @@ export default {
{ type: 'PM2.5', num: '80', unit: 'ug/m', color: '#999999' }, { type: 'PM2.5', num: '80', unit: 'ug/m', color: '#999999' },
{ type: '辐射', num: '13', unit: 'w/m', color: '#975FE4' }, { type: '辐射', num: '13', unit: 'w/m', color: '#975FE4' },
{ type: '故障报警数', num: '3', unit: '', color: '#F2637B' } { 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 { ...@@ -111,9 +182,7 @@ export default {
this.showList = !this.showList this.showList = !this.showList
}, },
getDataList() { getDataList() {},
},
showParams(data, type) { showParams(data, type) {
console.log(111) console.log(111)
this.historyVisible = true this.historyVisible = true
...@@ -126,33 +195,32 @@ export default { ...@@ -126,33 +195,32 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.data-warp{ .data-warp {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
.data-item{ .data-item {
width: 110px; width: 110px;
height: 103px; height: 103px;
background: #FFFFFF; background: #ffffff;
border: 1px solid #ECECEC; border: 1px solid #ececec;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
.type{ .type {
font-size: 18px; font-size: 18px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
padding-top: 15px; padding-top: 15px;
} }
.num{ .num {
font-size: 32px; font-size: 32px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 600; font-weight: 600;
// color: #21ACFC; // color: #21ACFC;
// padding-top: 26px; // padding-top: 26px;
} }
.unit{ .unit {
font-size: 18px; font-size: 18px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
...@@ -189,8 +257,8 @@ export default { ...@@ -189,8 +257,8 @@ export default {
} }
} }
} }
.clearfix:after{ .clearfix:after {
content: ''; content: "";
display: block; display: block;
height: 0; height: 0;
clear: both; 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