Skip to content

E
energyai_vue
Commit bbe27f3b authored by co_dengxiongwen's avatar co_dengxiongwen
Browse files
Options

页面调整

parent d8bea079
Show whitespace changes
Inline Side-by-side
Showing with 180 additions and 159 deletions
src/pages/kb/indoor/history.vue
View file @ bbe27f3b
......@@ -2,10 +2,10 @@
el-dialog(:title="type==1?'历史数据':'统计图表'", :close-on-click-modal='false', :visible.sync='visible' width='80%' :append-to-body='true')
el-form(:model='dataForm', size='mini' :inline='true' :rules='dataRule' ,ref='dataForm', @keyup.enter.native='dataFormSubmit()', label-width='120px')
el-form-item(label='设备名称', prop='name')
el-input(v-model='dataForm.name', placeholder='设备名称' )
el-form-item(label='设备编号', prop='name')
el-input(v-model='dataForm.name', placeholder='设备编号' )
el-form-item(label='数据起止阶段', prop='name')
el-input(v-model='dataForm.name', placeholder='设备名称' readOnly)
el-form-item(label='设备编号', prop='code')
el-input(v-model='dataForm.code', placeholder='设备编号' readOnly)
el-form-item(label='数据起止阶段', prop='time')
el-button(
size="mini",
type="primary",
......@@ -54,10 +54,7 @@ export default {
pageIndex: 1,
totalPage: 0,
visible: false,
dataForm: {
name: '',
dateValue: ''
},
dataForm: {},
dataList: [],
chartList: [
{ id: '11', title: '温度', color: '#21ACFC', data: [] },
......@@ -71,6 +68,7 @@ export default {
methods: {
init(data, type) {
this.dataForm = data
this.type = type
this.visible = true
this.currentActive = 1
......@@ -85,8 +83,8 @@ export default {
url: this.$http.adornUrl(`/kanban/getListByTypeAndId`),
method: 'get',
params: this.$http.adornParams({
resourceId: '',
resourceType: '507ba9ae22174e4dbbf32dbf34dd7139', //室内气象站
resourceId: this.dataForm.id,
resourceType: this.dataForm.type,
type: this.currentActive,
page: page || this.pageIndex,
rows: size || this.pageSize
......@@ -107,7 +105,8 @@ export default {
url: this.$http.adornUrl('/analysis/getSnqxzInfoTj'),
method: 'get',
params: this.$http.adornParams({
resourceId: '',
region: this.dataForm.region,
resourceId: this.dataForm.id,
type: this.currentActive
})
}).then((data) => {
......@@ -128,13 +127,6 @@ export default {
} else if (this.type === 2) {
this.getDataListTb()
}
},
showParams(data, type) {
console.log(111)
this.historyVisible = true
this.$nextTick(() => {
this.$refs.history.init(data, type)
})
}
}
}
......
src/pages/kb/indoor/index.vue
View file @ bbe27f3b
......@@ -46,7 +46,7 @@ card-warp(title="室内气象数据", height="45px", showBackground)
)
el-table-column(
:resizable="false",
prop="visitorId",
prop="code",
header-align="center",
align="center",
width="240",
......@@ -54,7 +54,7 @@ card-warp(title="室内气象数据", height="45px", showBackground)
)
el-table-column(
:resizable="false",
prop="visitorId",
prop="name",
header-align="center",
align="center",
width="240",
......@@ -135,7 +135,7 @@ export default {
return {
historyVisible: false,
activeName: '1',
dataList: [{ id: 1 }],
dataList: [],
dataListLoading: false,
pageSize: 10,
pageIndex: 1,
......@@ -164,9 +164,7 @@ export default {
}).then((data) => {
if (data && data.code === 0) {
console.log('数据', data)
// this.dataList = data.page.rows
// this.tableColums = crecords
this.dataList = data.page.rows
this.totalSize = data.page.total
} else {
this.dataList = []
......
src/pages/kb/outdoor/history.vue
View file @ bbe27f3b
......@@ -16,10 +16,10 @@ el-dialog(
label-width="120px"
)
el-form-item(label="设备名称", prop="name")
el-input(v-model="dataForm.name", placeholder="设备名称")
el-form-item(label="设备编号", prop="name")
el-input(v-model="dataForm.name", placeholder="设备编号")
el-form-item(label="数据起止阶段", prop="name")
el-input(v-model="dataForm.name", placeholder="设备名称" readOnly)
el-form-item(label="设备编号", prop="code")
el-input(v-model="dataForm.code", placeholder="设备编号" readOnly)
el-form-item(label="数据起止阶段", prop="time")
el-button(
size="mini",
type="primary",
......@@ -147,10 +147,7 @@ export default {
pageSize: 10,
totalPage: 0,
visible: false,
dataForm: {
name: '',
dateValue: ''
},
dataForm: {},
typeList: [
{ name: '当日', id: 1 },
{ name: '本周', id: 2 },
......@@ -175,7 +172,7 @@ export default {
methods: {
init(data, type) {
console.log(11111)
this.dataForm = data
this.type = type // 1=>>> 历史数据 / 2=>>> 统计图表
this.visible = true
this.currentActive = 1
......@@ -199,8 +196,8 @@ export default {
url: this.$http.adornUrl(`/kanban/getListByTypeAndId`),
method: 'get',
params: this.$http.adornParams({
resourceId: '',
resourceType: '9a570e608d0840499551eca89d76449d', //室外气象站
resourceId: this.dataForm.id,
resourceType: this.dataForm.type, //室外气象站
type: this.currentActive,
page: page || this.pageIndex,
rows: size || this.pageSize
......@@ -236,13 +233,6 @@ export default {
this.chartList[7].data = data.radiationList
}
})
},
showParams(data, type) {
console.log(111)
this.historyVisible = true
this.$nextTick(() => {
this.$refs.history.init(data, type)
})
}
}
}
......
src/pages/kb/outdoor/index.vue
View file @ bbe27f3b
......@@ -38,14 +38,14 @@ card-warp(title="室外气象数据", height="45px", showBackground)
)
el-table-column(
:resizable="false",
prop="visitorId",
prop="code",
header-align="center",
align="center",
label="设备编号"
)
el-table-column(
:resizable="false",
prop="visitorId",
prop="name",
header-align="center",
align="center",
label="设备名称"
......@@ -164,15 +164,12 @@ export default {
},
data() {
return {
formData: {
code: 'SWQX-001',
name: '室外气象站'
},
formData: {},
historyVisible: false,
chartListVisible: false,
showList: false,
activeName: '1',
dataList: [{ id: 1 }],
dataList: [],
dataListLoading: false,
pageSize: 50,
totalPage: 0,
......@@ -202,6 +199,7 @@ export default {
},
mounted() {
this.getDataListTb()
this.getDataList()
},
methods: {
// 获取数据列表
......@@ -217,9 +215,9 @@ export default {
}).then((data) => {
if (data && data.code === 0) {
console.log('数据', data)
// this.dataList = data.page.rows
// this.tableColums = crecords
this.dataList = data.page.rows
this.formData.name = this.dataList[0].name
this.formData.code = this.dataList[0].code
this.totalSize = data.page.total
} else {
this.dataList = []
......@@ -249,7 +247,6 @@ export default {
})
},
showParams(data, type) {
console.log(111)
this.historyVisible = true
this.$nextTick(() => {
this.$refs.history.init(data, type)
......
src/pages/kb/power/components/historyDataModal.vue
View file @ bbe27f3b
......@@ -7,13 +7,23 @@
width="1200px"
>
<el-form :inline="true">
<el-form-item label="设备名称：" style="margin-bottom:0">
<el-input size="mini" autocomplete="off"></el-input>
<el-form-item label="设备名称：" prop="name" style="margin-bottom: 0">
<el-input
v-model="dataForm.name"
size="mini"
autocomplete="off"
readOnly
></el-input>
</el-form-item>
<el-form-item label="设备编号：" style="margin-bottom:0">
<el-input size="mini" autocomplete="off"></el-input>
<el-form-item label="设备编号：" prop="code" style="margin-bottom: 0">
<el-input
v-model="dataForm.code"
size="mini"
autocomplete="off"
readOnly
></el-input>
</el-form-item>
<el-form-item label="数据起止阶段：" >
<el-form-item label="数据起止阶段：">
<!-- <el-date-picker style="width:172px" size="mini" type="date" placeholder="">
</el-date-picker>
<span style="padding:0 10px">至</span>
......@@ -22,30 +32,25 @@
<el-button
size="mini"
type="primary"
@click="handleDate(index)"
@click="handleDate(item.id)"
v-for="(item, index) in typeList"
:key="index"
:class="[index == currentActive ? 'isActive' : '']"
:class="[item.id == currentActive ? 'isActive' : '']"
>{{ item.name }}
</el-button>
</el-form-item>
<el-form-item >
<el-button size='mini' type="primary" icon="el-icon-download">导出</el-button>
</el-form-item>
</el-form>
<enTable :tableData="historyData" :tableColums="tableColums"></enTable>
<div slot="footer">
<el-button @click="cancelhandle">取 消</el-button>
<el-button type="primary" @click="cancelhandle">确 定</el-button>
</div>
<tablePagination
:pageSize="pageSize"
:totalSize="totalPage"
@parentMethod="getDataList"
></tablePagination>
</el-dialog>
</template>
<script >
<script>
import enTable from '../../../components/enTable'
const historyData = [
]
import tablePagination from '@/pages/components/tablePagination'
const tableColums = [
{
label: '功率',
......@@ -70,29 +75,61 @@ export default {
name: 'historyDataModal',
props: ['historyDataModalVisible'],
components: {
tablePagination,
enTable
},
data() {
return {
formLabelWidth: '0px',
historyData,
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataForm: {},
historyData: [],
tableColums,
typeList: [
{ name: '当日' },
{ name: '本周' },
{ name: '当月' },
{ name: '今年' }
{ name: '当日', id: 1 },
{ name: '本周', id: 2 },
{ name: '当月', id: 3 },
{ name: '今年', id: 4 }
],
currentActive: '0'
currentActive: 1
}
},
methods: {
init(data) {
this.dataForm = data
this.currentActive = 1
this.getDataList() //获取历史数据列表
},
getDataList(page, size) {
this.$http({
url: this.$http.adornUrl(`/kanban/getListByTypeAndId`),
method: 'get',
params: this.$http.adornParams({
resourceId: this.dataForm.id, //资源点id
resourceType: this.dataForm.type, //资源点类型
type: this.currentActive,
page: page || this.pageIndex,
rows: size || this.pageSize
})
}).then((data) => {
if (data && data.code === 0) {
this.historyData = data.page.records
this.totalPage = data.page.total
} else {
this.historyData = []
this.totalPage = 0
}
})
},
cancelhandle() {
this.$emit('cancelhandle')
},
// 当日 ，本周
handleDate(i) {
this.currentActive = i
this.getDataList()
}
}
}
......
src/pages/kb/power/components/statisticPicTableModal.vue
View file @ bbe27f3b
......@@ -31,29 +31,20 @@
<el-button
size="mini"
type="primary"
@click="handleDate(index)"
@click="handleDate(item.id)"
v-for="(item, index) in typeList"
:key="index"
:class="[index == currentActive ? 'isActive' : '']"
:class="[item.id == currentActive ? 'isActive' : '']"
>{{ item.name }}
</el-button>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" icon="el-icon-search"
>查询</el-button
>
</el-form-item>
</el-form>
<div v-if="statisticModalVisible" id="categoryId" style="height: 400px">
<chart id="111" :data="data" title="能耗数据" color="#21ACFC"></chart>
</div>
<div slot="footer">
<el-button @click="cancelhandlePic">取 消</el-button>
<el-button type="primary" @click.stop="cancelhandlePic">确 定</el-button>
</div>
</el-dialog>
</template>
<script >
<script>
import chart from '@/pages/components/chart.vue'
export default {
name: 'statisticPicTableModal',
......@@ -64,59 +55,47 @@ export default {
data() {
return {
formLabelWidth: '120px',
dataForm: {},
category: null,
typeList: [
{ name: '当日' },
{ name: '本周' },
{ name: '当月' },
{ name: '今年' }
{ name: '当日', id: 1 },
{ name: '本周', id: 2 },
{ name: '当月', id: 3 },
{ 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: []
}
},
mounted() {
// setTimeout(() => {
// this.initCategory();
// }, 3000);
},
methods: {
init(data) {
this.dataForm = data
this.currentActive = 1
this.getDataListTb()
},
getDataListTb() {
this.$http({
url: this.$http.adornUrl('/analysis/getEnergyTb'),
method: 'get',
params: this.$http.adornParams({
resourceId: this.dataForm.id,
type: this.currentActive
})
}).then((data) => {
if (data && data.code === 0) {
// console.log('数据', data)
this.data = data.list
}
})
},
cancelhandlePic() {
this.$emit('cancelhandlePic')
},
// 当日 ，本周
handleDate(i) {
this.currentActive = i
this.getDataListTb()
}
// initCategory() {
// let gId = document.getElementById('categoryId')
// this.category = this.$echarts.init(gId)
// const option = {
// xAxis: {
// type: 'category',
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// },
// yAxis: {
// type: 'value'
// },
// series: [
// {
// data: [150, 230, 224, 218, 135, 147, 260],
// type: 'line'
// }
// ]
// }
// this.category.setOption(option)
// }
}
}
</script>
src/pages/kb/power/config.js
View file @ bbe27f3b
export const tableColums = [
{
align: 'center',
prop: 'A',
prop: 'name',
label: '设备名称',
width: 162
},
......
src/pages/kb/power/page.vue
View file @ bbe27f3b
......@@ -50,10 +50,12 @@
:isShowOp="true"
>
<template #operation="data">
<el-button type="text" @click="openHistoryHandle(data)"
<el-button type="text" @click="openHistoryHandle(data.scope.row)"
>历史数据</el-button
>
<el-button type="text" @click="openPicTHandle">统计图表</el-button>
<el-button type="text" @click="openPicTHandle(data.scope.row)"
>统计图表</el-button
>
</template>
</enTable>
<tablePagination
......@@ -65,10 +67,12 @@
</cardList>
<history-data-modal
:historyDataModalVisible="historyDataModalVisible"
ref="historyDataModal"
v-on:cancelhandle="cancelhandle"
></history-data-modal>
<statistic-pic-table-modal
:statisticModalVisible="statisticModalVisible"
ref="statisticPicTableModal"
v-on:cancelhandlePic="cancelhandlePic"
></statistic-pic-table-modal>
</div>
......@@ -97,14 +101,14 @@ export default {
pageSize: 10,
totalSize: 0,
formData: {},
activeTab: '01',
activeTab: '1',
historyDataModalVisible: false,
statisticModalVisible: false,
tableColums,
tableData: [],
electroTabList: [
{
value: '01',
value: '1',
label: '全部'
},
{
......@@ -150,6 +154,25 @@ export default {
// 获取数据
getDataList(page, size) {
console.log('类型id', this.activeTab)
this.$http({
url: this.$http.adornUrl('/liResource/list'),
method: 'post',
data: {
type: this.activeTab, //资源点类型
page: page || this.pageIndex,
size: size || this.pageSize
}
}).then((data) => {
if (data && data.code === 0) {
console.log('数据', data)
this.tableData = data.page.rows
this.tableColums = tableColums
this.totalSize = data.page.total
} else {
this.tableData = []
this.totalSize = 0
}
})
},
cancelhandle() {
this.$nextTick(() => {
......@@ -162,12 +185,17 @@ export default {
})
},
openHistoryHandle() {
openHistoryHandle(data) {
console.log('用电：', data)
this.historyDataModalVisible = true
},
openPicTHandle() {
this.$nextTick(() => {
this.$refs.historyDataModal.init(data)
})
},
openPicTHandle(data) {
this.statisticModalVisible = true
this.$nextTick(() => {
this.$refs.statisticPicTableModal.init(data)
})
},
toEnergyPage() {
......
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