Skip to content

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

提交

parent f73abedb
Show whitespace changes
Inline Side-by-side
Showing with 845 additions and 16 deletions
src/pages/kb/indoor copy/index.vue deleted 100644 → 0
View file @ f73abedb
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
src/pages/kb/outdoor/chart.vue 0 → 100644
View file @ 9ac9e8b6
<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%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
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 0 → 100644
View file @ 9ac9e8b6
<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%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
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 0 → 100644
View file @ 9ac9e8b6
<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%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
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 0 → 100644
View file @ 9ac9e8b6
<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%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
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 0 → 100644
View file @ 9ac9e8b6
<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%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
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 0 → 100644
View file @ 9ac9e8b6
<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%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
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 0 → 100644
View file @ 9ac9e8b6
<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%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
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/index.vue 0 → 100644
View file @ 9ac9e8b6
<template lang="pug">
card-warp(title="室外气象数据" height='45px' showBackground )
div(slot='right')
el-button(size='mini' type='primary') 综合图形
div(slot="content", style="height: 90%")
el-tabs.myTabs(v-model="activeName", @tab-click="tabClick")
el-tab-pane(label="候车室区域", name="1")
el-tab-pane(label="办公区域", name="2")
el-form(:inline='true')
el-form-item(label='设备编号:')
el-input(size='mini')
el-form-item(label='')
el-button(type='primary' size='mini') 查询
.data-warp
div.data-item(v-for='item in typeList')
p.type {{item.type}}
p.color-blue
span.num mock
span.unit 11
el-table(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)') 历史数据
el-button(type='text' size='small' @click='showParams(scope.row)') 统计图表
tablePagination(:pageSize="pageSize" :totalSize="totalPage" @parentMethod='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'
export default {
components: {
tablePagination,
chart,
chart2,
chart3,
chart4,
chart5,
chart6,
chart7,
pie8
},
data() {
return {
activeName: '1',
dataList: [{ id: 1 }],
dataListLoading: false,
pageSize: 50,
totalPage: 0,
typeList: [
{ type: '温度' },
{ type: '湿度' },
{ type: '风速' },
{ type: '风向' },
{ type: '光照' },
{ type: 'CO2' },
{ type: 'PM2.5' },
{ type: '辐射' },
{ type: '故障报警次数' }
]
}
},
methods: {
tabClick(tab, event) {
console.log(tab, event)
},
getDataList() {
}
}
}
</script>
<style lang="scss" scoped>
.myTabs {
/deep/ .el-tabs__nav-wrap::after {
height: 0;
}
/deep/.el-tabs__nav-wrap {
background: #f2f4f5;
.el-tabs__nav {
// background: #E5E9EC;
border-bottom: 1px solid #e5e9ec;
}
}
/deep/ .el-tabs__header {
border: 1px solid #e5e9ec;
}
/deep/ .el-tabs__item:nth-child(2) {
padding: 0 20px;
}
/deep/ .el-tabs__item:last-child {
padding: 0 20px;
}
/deep/ .el-tabs__item.is-active {
background: #fff;
}
}
.data-warp{
display: flex;
justify-content: space-between;
text-align: center;
margin-bottom: 20px;
.data-item{
width: 10%;
height: 153px;
background: #FFFFFF;
border: 1px solid #ECECEC;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
.type{
height: 19px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333333;
line-height: 60px;
}
.num{
height: 28px;
font-size: 36px;
font-family: PingFang SC;
font-weight: 600;
color: #21ACFC;
line-height: 60px;
}
.unit{
height: 15px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
}
}
}
</style>
src/pages/kb/outdoor/pie8.vue 0 → 100644
View file @ 9ac9e8b6
<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>
src/router/routes.js
View file @ 9ac9e8b6
...@@ -29,7 +29,8 @@ const frameIn = [ ...@@ -29,7 +29,8 @@ const frameIn = [
meta, meta,
component: layoutHeaderAside, component: layoutHeaderAside,
children: (pre => [ children: (pre => [
{ path: 'indoor', name: `${pre}indoor`, component: () => import('@/pages/kb/indoor'), meta: { ...meta, title: '室内气象数据' } } { path: 'indoor', name: `${pre}indoor`, component: () => import('@/pages/kb/indoor'), meta: { ...meta, title: '室内气象数据' } },
{ path: 'outdoor', name: `${pre}outdoor`, component: () => import('@/pages/kb/outdoor'), meta: { ...meta, title: '室外气象数据' } }
])('kb-') ])('kb-')
}, },
// 数据分析 // 数据分析
......
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