Commit be42c2ea authored by co_dengxiongwen's avatar co_dengxiongwen

页面调整

parent 0a2f5062
...@@ -2,24 +2,6 @@ ...@@ -2,24 +2,6 @@
<div class="energy-page"> <div class="energy-page">
<cardList cardListTitle="能耗数据分析"> <cardList cardListTitle="能耗数据分析">
<div slot="right"> <div slot="right">
<!-- <span
:class="activeIndex === index ? 'active-hight-linght' : ''"
class="date-text"
@click="activehandle(item, index)"
v-for="(item, index) in dateList"
:key="item.value"
>{{ item.label }}</span
> -->
<!-- <el-date-picker
size="mini"
type="daterange"
range-separator="~"
start-placeholder="开始日期"
end-placeholder="结束日期"
> -->
<!-- </el-date-picker> -->
<!-- <i style=" padding-left:20px;padding-right: 20px;color:#21acfc" class="el-icon-s-unfold"></i> -->
<!-- <i class="el-icon-printer" style="color:#21acfc"></i> -->
<el-button size="mini" type="primary" @click="toPowerPage" <el-button size="mini" type="primary" @click="toPowerPage"
>图形/列表</el-button >图形/列表</el-button
> >
...@@ -27,8 +9,17 @@ ...@@ -27,8 +9,17 @@
<div slot="content" style="height: calc(100% - 70px)"> <div slot="content" style="height: calc(100% - 70px)">
<div> <div>
<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-tab-pane
<!-- <el-form-item label="时间范围:"> :label="item.label"
:name="item.value"
v-for="(item, index) in energyTabList"
:key="index"
></el-tab-pane>
</el-tabs>
</div>
<div>
<el-form :inline="true" size="mini" style="padding-top: 15px">
<!-- <el-form-item label="时间范围:">
<el-date-picker <el-date-picker
v-model="startTime" v-model="startTime"
align="right" align="right"
...@@ -51,32 +42,29 @@ ...@@ -51,32 +42,29 @@
<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-form-item label="时间范围:">
<el-button <el-button
size="mini" size="mini"
type="primary" type="primary"
@click="handleDate(index)" @click="handleDate(item.id)"
v-for="(item, index) in typeList" v-for="(item, index) in typeList"
:key="index" :key="index"
:class="[index == currentActive ? 'isActive' : '']" :class="[item.id == currentActive ? 'isActive' : '']"
> >
{{ item.name }} {{ item.name }}
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-tab-pane
:label="item.label"
:name="item.value"
v-for="(item, index) in energyTabList"
:key="index"
></el-tab-pane>
</el-tabs>
</div> </div>
<div style="height: calc(100% - 70px)"> <div style="height: calc(100% - 70px)">
<!-- <chart yAxisName='单位:kwh'></chart> --> <!-- <chart yAxisName='单位:kwh'></chart> -->
<chart id="111" :data="data" title="能耗数据" color="#21ACFC" yAxisName='单位:kwh'></chart> <chart
id="111"
:data="data"
title="能耗数据"
color="#21ACFC"
yAxisName="单位:kwh"
></chart>
</div> </div>
</div> </div>
</cardList> </cardList>
...@@ -97,68 +85,79 @@ export default { ...@@ -97,68 +85,79 @@ export default {
}, },
data() { data() {
return { return {
startTime: '', activetap: '1',
endTime: '',
activeIndex: 1,
activetap: '01',
typeList: [ typeList: [
{ name: '当日' }, { name: '当日', id: 1 },
{ name: '本周' }, { name: '本周', id: 2 },
{ name: '当月' }, { name: '当月', id: 3 },
{ name: '今年' } { name: '今年', id: 4 }
],
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]
], ],
currentActive: 1,
data: [],
energyTabList: [ energyTabList: [
{ {
value: '01', value: '1',
label: '全部' label: '全部'
}, },
{ {
value: '02', value: 'b6af764f2a6e454490a6b1b3c9057e57',
label: '排风机' label: '排风机'
}, },
{ {
value: '03', value: 'ece0b8b2db27411886254e81134988a3',
label: '机房空调(220V)' label: '机房空调(220V)'
}, },
{ {
value: '04', value: 'b47661ca1d454f9792ba5369f3cb2bc5',
label: '机房空调(380V)' label: '机房空调(380V)'
}, },
{ {
value: '05', value: 'c788ce98c1f248f590434394da485ce4',
label: '防火卷帘门' label: '防火卷帘门'
}, },
{ {
value: '06', value: 'b45827c068254695864ee3c1d42573cb',
label: '风冷热泵机组' label: '风冷热泵机组'
}, },
{ {
value: '07', value: '303310efddb34a2e9bf269bdff8a7dc5',
label: '室内机风柜' label: '室内机风柜'
}, },
{ {
value: '08', value: '173466a2cf9a42a6a17b2bdfbeae36d5',
label: '多联室外机' label: '多联室外机'
} }
] ]
} }
}, },
watch: {
activetap() {
this.getDataList()
}
},
mounted() {
this.getDataList()
},
methods: { methods: {
activehandle(item, index) { getDataList() {
this.activeIndex = index this.$http({
url: this.$http.adornUrl('/analysis/getEnergyFx'),
method: 'get',
params: this.$http.adornParams({
resourceType: this.activetap, //资源点类型
type: this.currentActive
})
}).then((data) => {
if (data && data.code === 0) {
// console.log('数据', data)
this.data = data.list
}
})
}, },
// 当日 ,本周 // 当日 ,本周
handleDate(i) { handleDate(i) {
this.currentActive = i this.currentActive = i
this.getDataList()
}, },
toPowerPage() { toPowerPage() {
this.$router.push({ this.$router.push({
......
...@@ -48,15 +48,20 @@ export default { ...@@ -48,15 +48,20 @@ export default {
] ]
} }
}, },
mounted() {
this.getDataList()
},
methods: { methods: {
tabClick(tab, event) { tabClick(tab, event) {
console.log(tab, event) // console.log(tab, event)
this.getDataList()
}, },
getDataList() { getDataList() {
this.$http({ this.$http({
url: this.$http.adornUrl('/analysis/getSnqxzInfoTj'), url: this.$http.adornUrl('/analysis/getSnqxzInfoTj'),
method: 'get', method: 'get',
params: this.$http.adornParams({ params: this.$http.adornParams({
resourceId: '',
region: Number(this.activeName), //区域类型 region: Number(this.activeName), //区域类型
type: this.currentActive type: this.currentActive
}) })
...@@ -73,6 +78,7 @@ export default { ...@@ -73,6 +78,7 @@ export default {
// 当日 ,本周 // 当日 ,本周
handleDate(i) { handleDate(i) {
this.currentActive = i this.currentActive = i
this.getDataList()
} }
} }
} }
......
export const tableColumsOne = [ export const tableColumsOne = [
{ {
align: 'center', align: 'center',
prop: 'A', prop: 'name',
label: '设备名称', label: '设备名称',
width: 132 width: 132
}, },
{ {
align: 'center', align: 'center',
prop: 'B', prop: 'deployLocation',
label: '设备位置' label: '设备位置'
// width: 112, // width: 112,
}, },
{ {
align: 'center', align: 'center',
prop: 'C', prop: 'status',
label: '设备状态', label: '设备状态',
width: 182 width: 182
}, },
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
}, },
{ {
align: 'center', align: 'center',
prop: 'F', prop: 'code',
label: '设备编号', label: '设备编号',
width: 132 width: 132
} }
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
}, },
{ {
align: 'center', align: 'center',
prop: 'stationName', prop: 'deployLocation',
label: '设备位置' label: '设备位置'
// width: 112, // width: 112,
}, },
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
}, },
{ {
align: 'center', align: 'center',
prop: 'D', prop: 'status',
label: '设备状态', label: '设备状态',
width: 182 width: 182
}, },
...@@ -76,166 +76,8 @@ ...@@ -76,166 +76,8 @@
}, },
{ {
align: 'center', align: 'center',
prop: 'G', prop: 'code',
label: '设备编号', label: '设备编号',
width: 132 width: 132
} }
] ]
export const tableDataOne = [
{
A: '风冷热泵机组',
B: '左侧办公房屋',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '风冷热泵机组',
B: '左侧办公房屋',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '风冷热泵机组',
B: '左侧办公房屋',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '风冷热泵机组',
B: '左侧办公房屋',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '风冷热泵机组',
B: '左侧办公房屋',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
}
]
export const tableDataTwo = [
{
A: '室内机风柜',
B: '屋面',
C: '110',
D: '开启',
E: '10',
F: '100',
G: 'JK-1'
},
{
A: '室内机风柜',
B: '屋面',
C: '110',
D: '开启',
E: '10',
F: '100',
G: 'JK-1'
},
{
A: '室内机风柜',
B: '屋面',
C: '110',
D: '开启',
E: '10',
F: '100',
G: 'JK-1'
},
{
A: '室内机风柜',
B: '屋面',
C: '110',
D: '开启',
E: '10',
F: '100',
G: 'JK-1'
},
{
A: '室内机风柜',
B: '屋面',
C: '110',
D: '开启',
E: '10',
F: '100',
G: 'JK-1'
},
{
A: '室内机风柜',
B: '屋面',
C: '110',
D: '开启',
E: '10',
F: '100',
G: 'JK-1'
}
]
export const tableDataThree = [
{
A: '水泵',
B: '通信机械室',
C: '110',
D: '开启',
E: '10',
F: '100',
G: 'JK-1'
},
{
A: '水泵',
B: '通信机械室',
C: '110',
D: '开启',
E: '10',
F: '100',
G: 'JK-1'
},
{
A: '水泵',
B: '通信机械室',
C: '110',
D: '开启',
E: '10',
F: '100',
G: 'JK-1'
},
{
A: '水泵',
B: '通信机械室',
C: '110',
D: '开启',
E: '10',
F: '100',
G: 'JK-1'
},
{
A: '水泵',
B: '通信机械室',
C: '110',
D: '开启',
E: '10',
F: '100',
G: 'JK-1'
},
{
A: ' 水泵',
B: '通信机械室',
C: '110',
D: '开启',
E: '10',
F: '100',
G: 'JK-1'
}
]
...@@ -259,7 +259,6 @@ export default { ...@@ -259,7 +259,6 @@ export default {
if (data && data.code === 0) { if (data && data.code === 0) {
console.log('数据', data) console.log('数据', data)
this.tableData = data.page.rows this.tableData = data.page.rows
// this.tableColums = crecords // this.tableColums = crecords
this.totalSize = data.page.total this.totalSize = data.page.total
} else { } else {
......
export const tableColumsOne = [ export const tableColumsOne = [
{ {
align: 'center', align: 'center',
prop: 'A', prop: 'name',
label: '设备名称', label: '设备名称',
width: 132 width: 132
}, },
{ {
align: 'center', align: 'center',
prop: 'B', prop: 'deployLocation',
label: '设备位置' label: '设备位置'
// width: 150 // width: 150
}, },
{ {
align: 'center', align: 'center',
prop: 'C', prop: 'status',
label: '设备状态', label: '设备状态',
width: 182 width: 182
}, },
...@@ -31,246 +31,8 @@ ...@@ -31,246 +31,8 @@
}, },
{ {
align: 'center', align: 'center',
prop: 'F', prop: 'code',
label: '设备编号', label: '设备编号',
width: 132 width: 132
} }
] ]
export const tableDataOne = [
{
A: '排风机',
B: '左侧办公房屋',
C: '开启',
D: '10',
E: '100',
F: 'DLW-A1'
},
{
A: '排风机',
B: '左侧办公房屋',
C: '开启',
D: '10',
E: '100',
F: 'DLW-A1'
},
{
A: '排风机',
B: '左侧办公房屋',
C: '开启',
D: '10',
E: '100',
F: 'DLW-A1'
},
{
A: '排风机',
B: '左侧办公房屋',
C: '开启',
D: '10',
E: '100',
F: 'DLW-A1'
}
]
export const tableDataTwo = [
{
A: '机房空调(220V)',
B: '左侧旅客服务房屋',
C: '开启',
D: '10',
E: '100',
F: 'DLW-A1'
},
{
A: '机房空调(220V)',
B: '左侧旅客服务房屋',
C: '开启',
D: '10',
E: '100',
F: 'DLW-A1'
},
{
A: '机房空调(220V)',
B: '左侧旅客服务房屋',
C: '开启',
D: '10',
E: '100',
F: 'DLW-A1'
},
{
A: '机房空调(220V)',
B: '左侧旅客服务房屋',
C: '开启',
D: '10',
E: '100',
F: 'DLW-A1'
}
]
export const tableDataThree = [
{
A: '机房空调(380V)',
B: '通信机械室',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '机房空调(380V)',
B: '通信机械室',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '机房空调(380V)',
B: '通信机械室',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '机房空调(380V)',
B: '通信机械室',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '机房空调(380V)',
B: '通信机械室',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
}
]
export const tableDataFour = [
{
A: '防火卷帘门',
B: '售票厅',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '防火卷帘门',
B: '售票厅',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
}
]
export const tableDataFive = [
{
A: '多联室内机',
B: '左侧办公房屋',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '多联室内机',
B: '左侧办公房屋',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '多联室内机',
B: '左侧办公房屋',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '多联室内机',
B: '左侧办公房屋',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
}
]
export const tableDataSix = [
{
A: '多联室外机',
B: '屋面',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '多联室外机',
B: '屋面',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '多联室外机',
B: '屋面',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '多联室外机',
B: '屋面',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
}
]
export const tableDataSeven = [
{
A: '换气扇',
B: 'VIP候车室',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '换气扇',
B: 'VIP候车室',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '换气扇',
B: 'VIP候车室',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
},
{
A: '换气扇',
B: 'VIP候车室',
C: '开启',
D: '10',
E: '100',
F: 'JK-1'
}
]
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