Skip to content

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

室内气象数据、分析

parent cba62dc3
Hide whitespace changes
Inline Side-by-side
Showing with 769 additions and 35 deletions
src/App.vue
View file @ f56953ce
......@@ -843,8 +843,8 @@ export default {
.el-table td,
.el-table th {
padding: 0 !important;
line-height: 49px;
height: 49px;
line-height: 40px;
height: 40px;
}
</style>
......
src/assets/style/public.scss
View file @ f56953ce
......@@ -103,6 +103,19 @@ $el-bg-color-3: #EBEEF5;
$el-bg-color-4: #F2F6FC;
.margin-lr-20{
.margin-lr-20 {
margin: 0 20px;
}
// color
.color-blue {
color: #21ACFC;
}
.color-cyan {
color: #36CBCB;
}
.color-green {
color: #4ECB74;
}
\ No newline at end of file
src/pages/analysis/fault/index.vue
View file @ f56953ce
<template lang='pug'>
card-warp(title="故障报警分析")
div(slot="right")
div
span 时间范围：
el-date-picker.margin-lr-20(
size='mini'
v-model="dateValue",
type="daterange",
align="right",
unlink-panels,
range-separator="至",
start-placeholder="开始日期",
end-placeholder="结束日期",
:picker-options="pickerOptions"
)
el-button(size='mini' type='primary') 查询
span 时间范围：
el-date-picker.margin-lr-20(
size='mini'
v-model="dateValue",
type="daterange",
align="right",
unlink-panels,
range-separator="至",
start-placeholder="开始日期",
end-placeholder="结束日期",
:picker-options="pickerOptions"
)
el-button(size='mini' type='primary') 查询
div(slot="content")
.echartsWarp(width="100%", flex)
div
.title 设备故障统计
pie
div
.title 设备报警统计
pie2
//- div
//- .title 设备故障统计
//- pie
//- div
//- .title 设备报警统计
//- pie2
div
.title 设备类型故障数量统计
pie3
......@@ -32,14 +31,14 @@ card-warp(title="故障报警分析")
</template>
<script>
import pie from './pie'
import pie2 from './pie2'
// import pie from './pie'
// import pie2 from './pie2'
import pie3 from './pie3'
import pie4 from './pie4'
export default {
components: {
pie,
pie2,
// pie,
// pie2,
pie3,
pie4
},
......@@ -101,8 +100,9 @@ export default {
flex-wrap: wrap;
height: calc(100vh - 260px);
> div {
width: 48%;
height: calc(90% / 2);
width: 47%;
// height: calc(90% / 2);
height: 95%;
margin: 3px;
padding: 13px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
......
src/pages/analysis/fault/pie4.vue
View file @ f56953ce
......@@ -34,7 +34,7 @@ export default {
}
},
created() {
this.list = this.genData(20)
this.list = this.genData(30)
},
mounted() {
this.ring()
......
src/pages/analysis/indoor/chart.vue 0 → 100644
View file @ f56953ce
<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: '#81befd' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: '#13B0FF'
},
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/analysis/indoor/chart2.vue 0 → 100644
View file @ f56953ce
<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: '#13B0FF'
},
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/analysis/indoor/chart3.vue 0 → 100644
View file @ f56953ce
<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: 'CO2（PPM）'
},
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: '#13B0FF'
},
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/analysis/indoor/index.vue 0 → 100644
View file @ f56953ce
<template lang="pug">
card-warp(title="室内气象分析")
div(slot="right")
span 时间范围：
el-date-picker.margin-lr-20(
size='mini'
v-model="dateValue",
type="daterange",
align="right",
unlink-panels,
range-separator="至",
start-placeholder="开始日期",
end-placeholder="结束日期",
:picker-options="pickerOptions"
)
el-button(size='mini' type='primary') 查询
router-link.margin-lr-20(:to="{name:'kb-indoor'}")
el-button(size='mini' type='primary') 图形 / 列表
el-button(size='mini' type='primary' icon='el-icon-download') 下载
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")
.echartsWarp(width="100%", flex)
div
chart
div
chart2
div
chart3
div
pie4
</template>
<script>
import chart from './chart'
import chart2 from './chart2'
import chart3 from './chart3'
import pie4 from './pie4'
export default {
components: {
chart,
chart2,
chart3,
pie4
},
data() {
return {
activeName: '1',
dateValue: '',
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])
}
}
]
}
}
},
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;
}
}
.echartsWarp {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: calc(100vh - 320px);
> div {
width: 48%;
height: calc(90% / 2);
margin: 3px;
padding: 13px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
.title {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 600;
color: #000000;
line-height: 40px;
&::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #0097ff;
margin: 0 10px;
}
}
}
}
</style>
src/pages/analysis/indoor/pie4.vue 0 → 100644
View file @ f56953ce
<template lang='pug'>
#pie4(:style="{ width: '100%', height: '90%' }")
</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 = {
title: {
text: '故障报警'
},
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
]
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/pages/components/cardWarp.vue
View file @ f56953ce
<template lang='pug'>
.card-warp
.card-header
.card-header(:style="{height,'line-height':height}" :class=" showBackground ? 'bg' : '' ")
span.card-title {{ title }}
slot(name="right")
.card-content
......@@ -14,6 +14,14 @@ export default {
title: {
type: String,
default: '数据统计'
},
height: {
type: String,
default: '74px'
},
showBackground: {
type: Boolean,
default: false
}
}
}
......@@ -25,8 +33,8 @@ export default {
.card-header {
display: flex;
justify-content: space-between;
height: 74px;
line-height: 74px;
// height: 74px;
// line-height: 74px;
padding: 0 20px;
border-bottom: 1px solid #ececec;
.card-title {
......@@ -48,6 +56,10 @@ export default {
}
.card-content {
margin: 20px;
height: calc(100% - 100px);
}
}
.bg{
background: #F2FAFF;
}
</style>
src/pages/components/tablePagination.vue 0 → 100644
View file @ f56953ce
<template>
<el-pagination
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="newtotalSize"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</template>
<script>
export default {
data() {
return {
newtotalSize: this.totalSize,
newpageSize: this.pageSize,
currentPage: 1 // 当前页
}
},
watch: {
totalSize(n, o) {
this.newtotalSize = n
}
},
props: {
// 每页展示多少条数据
pageSize: {
type: Number,
default: 10
},
// 数据总条数
totalSize: {
type: Number,
default: 0
}
},
methods: {
// pageSize 改变时会触发
handleSizeChange(val) {
this.newpageSize = val
this.$emit('parentMethod', this.currentPage, val)
},
// currentPage 改变时会触发
handleCurrentChange(val) {
this.currentPage = val
this.$emit('parentMethod', val, this.newpageSize)
}
}
}
</script>
<style>
</style>
src/pages/kb/indoor copy/index.vue 0 → 100644
View file @ f56953ce
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
src/pages/kb/indoor/index.vue 0 → 100644
View file @ f56953ce
<template lang="pug">
card-warp(title="室内气象数据" height='45px' showBackground )
div(slot='right')
router-link.margin-lr-20(:to="{name:'analysis-indoor'}")
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
p.type 温度
p.color-blue
span.num 37
span.unit ℃
div.data-item
p.type 湿度
p.color-cyan
span.num 25
span.unit %RH
div.data-item()
p.type CO2
p.color-green
span.num 17
span.unit PPM
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'
export default {
components: {
tablePagination
},
data() {
return {
activeName: '1',
dataList: [{ id: 1 }],
dataListLoading: false,
pageSize: 50,
totalPage: 0
}
},
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: 32%;
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/sys/role/role-add-or-update.vue
View file @ f56953ce
......@@ -3,7 +3,7 @@
div.title-bold(slot='title') {{!id ? '新增角色' : '编辑角色'}}
div()
el-form(:model='dataForm' :rules='dataRule', ref='dataForm', label-width='80px')
el-row(:sapn='24')
el-row()
el-col(:span='24' )
el-form-item(label='角色名称', prop='roleName')
el-input.mywidth(v-model='dataForm.roleName', placeholder='角色名称')
......
src/router/routes.js
View file @ f56953ce
......@@ -22,6 +22,16 @@ const frameIn = [
}
]
},
// 数据看板
{
path: '/kb',
name: 'kb',
meta,
component: layoutHeaderAside,
children: (pre => [
{ path: 'indoor', name: `${pre}indoor`, component: () => import('@/pages/kb/indoor'), meta: { ...meta, title: '室内气象数据' } }
])('kb-')
},
// 数据分析
{
path: '/analysis',
......@@ -29,7 +39,8 @@ const frameIn = [
meta,
component: layoutHeaderAside,
children: (pre => [
{ path: 'fault', name: `${pre}fault`, component: () => import('@/pages/analysis/fault'), meta: { ...meta, title: '设备故障报警' } }
{ path: 'fault', name: `${pre}fault`, component: () => import('@/pages/analysis/fault'), meta: { ...meta, title: '设备故障报警' } },
{ path: 'indoor', name: `${pre}indoor`, component: () => import('@/pages/analysis/indoor'), meta: { ...meta, title: '室内气象分析' } }
])('analysis-')
},
// 系统管理
......
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