Skip to content

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

调整

parent 149d81ce
Hide whitespace changes
Inline Side-by-side
Showing with 90 additions and 124 deletions
src/pages/analysis/energy/page.vue
View file @ 48f505bd
......@@ -26,10 +26,9 @@
</div>
<div slot="content" style="height: calc(100% - 70px)">
<div>
<!-- <enTabs :tabList="energyTabList"></enTabs> -->
<el-tabs class="en-tabs" v-model="activetap">
<el-form :inline="true" size="mini" style='padding-top:15px;'>
<el-form-item label="时间范围：">
<el-form :inline="true" size="mini" style="padding-top: 15px">
<!-- <el-form-item label="时间范围：">
<el-date-picker
v-model="startTime"
align="right"
......@@ -51,7 +50,19 @@
<el-button type="primary" size="mini" icon="el-icon-search"
>查询</el-button
>
> -->
<el-form-item label="时间范围：">
<el-button
size="mini"
type="primary"
@click="handleDate(index)"
v-for="(item, index) in typeList"
:key="index"
:class="[index == currentActive ? 'isActive' : '']"
>
{{ item.name }}
</el-button>
</el-form-item>
</el-form>
<el-tab-pane
......@@ -63,7 +74,9 @@
</el-tabs>
</div>
<div style="height: calc(100% - 70px)">
<energyChart></energyChart>
<!-- <chart yAxisName='单位：kwh'></chart> -->
<chart id="111" :data="data" title="能耗数据" color="#21ACFC" yAxisName='单位：kwh'></chart>
</div>
</div>
</cardList>
......@@ -73,14 +86,14 @@
<script>
import cardList from '../../components/cardList'
import enTabs from '../../components/enTabs'
// import enTable from '../../eq/hall/components/enTable'
import energyChart from '../../components/energyTotalCharts'
import chart from '@/pages/components/chart.vue'
export default {
name: 'energypage',
components: {
cardList,
enTabs,
energyChart
chart
},
data() {
return {
......@@ -88,27 +101,20 @@ export default {
endTime: '',
activeIndex: 1,
activetap: '01',
dateList: [
// {
// value: "01",
// label: "时段",
// },
{
value: '02',
label: '今日'
},
{
value: '03',
label: '本周'
},
{
value: '04',
label: '本月'
},
{
value: '05',
label: '全年'
}
typeList: [
{ name: '当日' },
{ name: '本周' },
{ name: '当月' },
{ name: '今年' }
],
currentActive: '0',
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]
],
energyTabList: [
{
......@@ -149,6 +155,10 @@ export default {
methods: {
activehandle(item, index) {
this.activeIndex = index
},
// 当日 ，本周
handleDate(i) {
this.currentActive = i
},
toPowerPage() {
this.$router.push({
......@@ -162,17 +172,10 @@ export default {
<style lang="scss">
.energy-page {
height: 100%;
.date-text {
padding-right: 20px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #1d1d1d;
cursor: pointer;
}
.active-hight-linght {
color: #21acfc;
}
}
// 选中
.isActive {
background: #4cb527 !important;
border: transparent 1px solid;
}
</style>
src/pages/analysis/indoor/index.vue
View file @ 48f505bd
<template lang="pug">
card-warp(title="室内气象分析", height="45px", showBackground)
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') 下载
......@@ -24,91 +11,60 @@ card-warp(title="室内气象分析", height="45px", showBackground)
el-tab-pane(label="办公区域", name="2")
el-form(:inline="true", size="mini")
el-form-item(label="时间范围：")
el-date-picker(
el-button(
size="mini",
v-model="startTime",
align="right",
type="date",
placeholder="选择日期",
:picker-options="pickerOptions"
)
span(style="padding: 0 10px") 至
el-date-picker(
size="mini",
v-model="endTime",
align="right",
type="date",
placeholder="选择日期",
:picker-options="pickerOptions"
)
el-form-item(label="")
el-button(size="mini", type="primary") 查询
type="primary",
@click="handleDate(index)",
v-for="(item, index) in typeList",
:key="index",
:class="[index == currentActive ? 'isActive' : '']"
) {{ item.name }}
.echartsWarp(width="100%", flex)
div
chart
div
chart2
div
chart3
div
chart4
div(v-for='item in chartList' :key='item.id')
chart(:id="item.id", :data="data", :title="item.title", :color="item.color")
</template>
<script>
import chart from './chart'
import chart2 from './chart2'
import chart3 from './chart3'
import chart4 from './chart4'
import chart from '@/pages/components/chart.vue'
export default {
components: {
chart,
chart2,
chart3,
chart4
chart
},
data() {
return {
activeName: '1',
startTime: '',
endTime: '',
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])
}
}
]
}
typeList: [
{ name: '当日' },
{ name: '本周' },
{ name: '当月' },
{ name: '今年' }
],
currentActive: '0',
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]
],
chartList: [
{ id: '11', title: '温度', color: '#21ACFC' },
{ id: '22', title: '湿度', color: '#36CBCB' },
{ id: '55', title: 'CO2', color: '#4ECB74' },
{ id: '77', title: '故障报警', color: '#975FE4' }
]
}
},
methods: {
tabClick(tab, event) {
console.log(tab, event)
},
getDataList() {}
getDataList() {},
// 当日 ，本周
handleDate(i) {
this.currentActive = i
}
}
}
</script>
......@@ -168,4 +124,9 @@ export default {
}
}
}
// 选中
.isActive {
background: #4cb527 !important;
border: transparent 1px solid;
}
</style>
src/pages/components/chart.vue
View file @ 48f505bd
......@@ -5,7 +5,7 @@ div(:id="id", :style="{ width: '100%', height: '90%' }")
<script>
export default {
props: ['id', 'data', 'title', 'color'],
props: ['id', 'data', 'title', 'color', 'yAxisName'],
watch: {
data() {
this.initChart()
......@@ -41,7 +41,9 @@ export default {
],
yAxis: [
{
type: 'value'
type: 'value',
name: this.yAxisName
}
],
series: [
......
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