能源需求修改
This commit is contained in:
@@ -1,205 +1,227 @@
|
||||
<template>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<span class="blue-block"></span>
|
||||
<el-form-item label="对象选择" required>
|
||||
<el-cascader
|
||||
v-model="objArr"
|
||||
:options="objList"
|
||||
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
|
||||
popper-class="cascaderParent"
|
||||
size="small"
|
||||
clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间维度" required>
|
||||
<el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;" size="small">
|
||||
<el-option
|
||||
v-for="item in timeType"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
:clearable="false">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间" required>
|
||||
<div v-show="queryParams.type === 1 || queryParams.type === 2">
|
||||
<el-date-picker
|
||||
v-model="yearValue"
|
||||
type="year"
|
||||
:picker-options="pickerOptions"
|
||||
@change="selectTime"
|
||||
:clearable="false"
|
||||
size="small"
|
||||
placeholder="选择年">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.type === 3">
|
||||
<el-date-picker
|
||||
v-model="yearMonth"
|
||||
type="month"
|
||||
:picker-options="pickerOptions"
|
||||
@change="selectTime"
|
||||
:clearable="false"
|
||||
size="small"
|
||||
placeholder="选择月">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="search">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<span class="separateStyle"></span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="exportData" plain>导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form
|
||||
:inline="true"
|
||||
class="demo-form-inline">
|
||||
<span class="blue-block"></span>
|
||||
<el-form-item
|
||||
label="对象选择"
|
||||
required>
|
||||
<el-select
|
||||
v-model="queryParams.objId"
|
||||
placeholder="请选择"
|
||||
style="width: 250px"
|
||||
filterable
|
||||
size="small">
|
||||
<el-option
|
||||
v-for="item in objList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
:clearable="false"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="时间维度"
|
||||
required>
|
||||
<el-select
|
||||
v-model="queryParams.type"
|
||||
placeholder="请选择"
|
||||
style="width: 80px"
|
||||
size="small">
|
||||
<el-option
|
||||
v-for="item in timeType"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
:clearable="false"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="时间"
|
||||
required>
|
||||
<div v-show="queryParams.type === 1 || queryParams.type === 2">
|
||||
<el-date-picker
|
||||
v-model="yearValue"
|
||||
type="year"
|
||||
:picker-options="pickerOptions"
|
||||
@change="selectTime"
|
||||
:clearable="false"
|
||||
size="small"
|
||||
placeholder="选择年"></el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.type === 3">
|
||||
<el-date-picker
|
||||
v-model="yearMonth"
|
||||
type="month"
|
||||
:picker-options="pickerOptions"
|
||||
@change="selectTime"
|
||||
:clearable="false"
|
||||
size="small"
|
||||
placeholder="选择月"></el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="search">
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<span class="separateStyle"></span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="exportData"
|
||||
plain>
|
||||
导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
import { getTree } from '@/api/base/factory'
|
||||
import moment from 'moment'
|
||||
import { getTree } from '@/api/analysis/energyAnalysis';
|
||||
import moment from 'moment';
|
||||
export default {
|
||||
name: 'searchArea',
|
||||
data() {
|
||||
return {
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
type: 1, // 1季度2月3日
|
||||
searchTime: null,
|
||||
objId: null
|
||||
},
|
||||
timeType: [
|
||||
{id: 1, name: '季度'},
|
||||
{id: 2, name: '月'},
|
||||
{id: 3, name: '日'}
|
||||
],
|
||||
yearValue: '',
|
||||
yearMonth: '',
|
||||
objArr: [],
|
||||
objList: [],
|
||||
pickerOptions: {
|
||||
disabledDate(date) {
|
||||
return date.getTime() > Date.now()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getObjTree()
|
||||
},
|
||||
methods: {
|
||||
getObjTree() {
|
||||
getTree().then(res => {
|
||||
this.objList = res.data || []
|
||||
})
|
||||
},
|
||||
selectTime() {
|
||||
if (this.queryParams.type === 3) {
|
||||
this.queryParams.searchTime = this.yearMonth
|
||||
} else {
|
||||
this.queryParams.searchTime = this.yearValue
|
||||
}
|
||||
},
|
||||
// 查询
|
||||
search() {
|
||||
if (this.objArr.length === 0) {
|
||||
this.$modal.msgError('请选择对象')
|
||||
return false
|
||||
} else {
|
||||
this.queryParams.objId = this.objArr[this.objArr.length-1]
|
||||
}
|
||||
if (!this.queryParams.type) {
|
||||
this.$modal.msgError('请选择时间维度')
|
||||
return false
|
||||
}
|
||||
if (!this.queryParams.searchTime) {
|
||||
this.$modal.msgError('请选择时间')
|
||||
return false
|
||||
}
|
||||
if (this.queryParams.type === 3) {
|
||||
this.queryParams.searchTime = this.transformTime(this.yearMonth) + ''
|
||||
} else {
|
||||
this.queryParams.searchTime = this.transformYear(this.yearValue) + ''
|
||||
}
|
||||
this.$emit('submit', this.queryParams)
|
||||
},
|
||||
exportData() {
|
||||
let name
|
||||
if (this.queryParams.objId) {
|
||||
name = this.getObjName(this.objList, this.queryParams.objId)
|
||||
} else {
|
||||
this.$modal.msgWarning("对象不能为空")
|
||||
return false
|
||||
}
|
||||
this.$emit('exportD', {name: name})
|
||||
},
|
||||
// 递归取对象name
|
||||
getObjName(list, id) {
|
||||
let _this = this
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let a = list[i]
|
||||
if (a.id === id) {
|
||||
return a.name
|
||||
} else {
|
||||
if (a.children && a.children.length > 0) {
|
||||
let res = _this.getObjName(a.children, id)
|
||||
if (res) {
|
||||
return res
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
transformTime(timeStamp) {// 本月最后一天
|
||||
let year = moment(timeStamp).format('YYYY')
|
||||
let month = moment(timeStamp).format('MM')
|
||||
let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59'
|
||||
let value = new Date(newData).getTime()
|
||||
return value
|
||||
},
|
||||
transformYear(timeStamp) {// 本年最后一天
|
||||
let year = moment(timeStamp).format('YYYY')
|
||||
let newData = year+'-12-31 23:59:59'
|
||||
let value = new Date(newData).getTime()
|
||||
return value
|
||||
}
|
||||
}
|
||||
}
|
||||
name: 'searchArea',
|
||||
data() {
|
||||
return {
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
type: 1, // 1季度2月3日
|
||||
searchTime: null,
|
||||
objId: null,
|
||||
objType: 1,
|
||||
},
|
||||
timeType: [
|
||||
{ id: 1, name: '季度' },
|
||||
{ id: 2, name: '月' },
|
||||
{ id: 3, name: '日' },
|
||||
],
|
||||
yearValue: '',
|
||||
yearMonth: '',
|
||||
objList: [],
|
||||
pickerOptions: {
|
||||
disabledDate(date) {
|
||||
return date.getTime() > Date.now();
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getObjTree();
|
||||
},
|
||||
methods: {
|
||||
getObjTree() {
|
||||
getTree().then((res) => {
|
||||
this.objList = res.data || [];
|
||||
if (this.objList.length > 0) {
|
||||
this.queryParams.objId = this.objList[0].id;
|
||||
}
|
||||
});
|
||||
},
|
||||
selectTime() {
|
||||
if (this.queryParams.type === 3) {
|
||||
this.queryParams.searchTime = this.yearMonth;
|
||||
} else {
|
||||
this.queryParams.searchTime = this.yearValue;
|
||||
}
|
||||
},
|
||||
// 查询
|
||||
search() {
|
||||
if (!this.queryParams.objId) {
|
||||
this.$modal.msgError('请选择对象');
|
||||
return false;
|
||||
}
|
||||
if (!this.queryParams.type) {
|
||||
this.$modal.msgError('请选择时间维度');
|
||||
return false;
|
||||
}
|
||||
if (!this.queryParams.searchTime) {
|
||||
this.$modal.msgError('请选择时间');
|
||||
return false;
|
||||
}
|
||||
if (this.queryParams.type === 3) {
|
||||
this.queryParams.searchTime = this.transformTime(this.yearMonth) + '';
|
||||
} else {
|
||||
this.queryParams.searchTime = this.transformYear(this.yearValue) + '';
|
||||
}
|
||||
this.$emit('submit', this.queryParams);
|
||||
},
|
||||
exportData() {
|
||||
let name;
|
||||
if (this.queryParams.objId) {
|
||||
name = this.getObjName(this.objList, this.queryParams.objId);
|
||||
} else {
|
||||
this.$modal.msgWarning('对象不能为空');
|
||||
return false;
|
||||
}
|
||||
this.$emit('exportD', { name: name });
|
||||
},
|
||||
// 递归取对象name
|
||||
getObjName(list, id) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let a = list[i];
|
||||
if (a.id === id) {
|
||||
return a.name;
|
||||
}
|
||||
}
|
||||
},
|
||||
transformTime(timeStamp) {
|
||||
// 本月最后一天
|
||||
let year = moment(timeStamp).format('YYYY');
|
||||
let month = moment(timeStamp).format('MM');
|
||||
let newData =
|
||||
moment(new Date(year, month, 0)).format('YYYY-MM-DD') + ' 23:59:59';
|
||||
let value = new Date(newData).getTime();
|
||||
return value;
|
||||
},
|
||||
transformYear(timeStamp) {
|
||||
// 本年最后一天
|
||||
let year = moment(timeStamp).format('YYYY');
|
||||
let newData = year + '-12-31 23:59:59';
|
||||
let value = new Date(newData).getTime();
|
||||
return value;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
/* 级联选择器 */
|
||||
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
|
||||
display: none;
|
||||
}
|
||||
.demo-form-inline {
|
||||
.el-date-editor .el-range__icon {
|
||||
font-size: 16px;
|
||||
color: #0B58FF;
|
||||
}
|
||||
.el-input__prefix .el-icon-date {
|
||||
font-size: 16px;
|
||||
color: #0B58FF;
|
||||
}
|
||||
.el-date-editor .el-range__icon {
|
||||
font-size: 16px;
|
||||
color: #0b58ff;
|
||||
}
|
||||
.el-input__prefix .el-icon-date {
|
||||
font-size: 16px;
|
||||
color: #0b58ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.demo-form-inline {
|
||||
.blue-block {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.blue-block {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background-color: #0b58ff;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
.separateStyle {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: #E8E8E8;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: #e8e8e8;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user