Skip to content

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

室内外气象改造

parent a2b72499
Expand all Hide 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
This diff is collapsed.
src/pages/kb/outdoor/index.vue
View file @ e812355c
This diff is collapsed.
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