Skip to content

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

调整

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