能源分析
This commit is contained in:
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div
|
||||
id="analysischartBar"
|
||||
style="width: 100%"
|
||||
:style="{ height: chartHeight + 'px' }"
|
||||
></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from '@/utils/chartMixins/resize'
|
||||
export default {
|
||||
name: "BarChart",
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chartDom: '',
|
||||
chart: '',
|
||||
chartHeight: this.tableHeight(214) - 70
|
||||
}
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: function () {
|
||||
this.getChart()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartHeight = this.tableHeight(214) - 70
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getChart() {
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||||
}
|
||||
this.chartDom = document.getElementById('analysischartBar')
|
||||
this.chart = echarts.init(this.chartDom)
|
||||
let xData = []
|
||||
let yData = []
|
||||
for (let i = 0; i < this.chartData.length; i++) {
|
||||
xData.push(this.chartData[i].time)
|
||||
yData.push(this.chartData[i].useNum)
|
||||
}
|
||||
var option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div
|
||||
id="analysischartLine"
|
||||
style="width: 100%"
|
||||
:style="{ height: chartHeight + 'px' }"
|
||||
></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from '@/utils/chartMixins/resize'
|
||||
export default {
|
||||
name: "LineChart",
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chartDom: '',
|
||||
chart: '',
|
||||
chartHeight: this.tableHeight(214) - 70
|
||||
}
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: function () {
|
||||
this.getChart()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartHeight = this.tableHeight(214) - 70
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getChart() {
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||||
}
|
||||
this.chartDom = document.getElementById('analysischartLine')
|
||||
this.chart = echarts.init(this.chartDom)
|
||||
let xData = []
|
||||
let yData = []
|
||||
for (let i = 0; i < this.chartData.length; i++) {
|
||||
xData.push(this.chartData[i].time)
|
||||
yData.push(this.chartData[i].useNum)
|
||||
}
|
||||
|
||||
var option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: 'line'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item label="能源类型">
|
||||
<el-select v-model="queryParams.energyTypeId" placeholder="请选择" style="width: 100px;">
|
||||
<el-option
|
||||
v-for="item in energyTypeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间维度">
|
||||
<el-select v-model="queryParams.timeDim" placeholder="请选择" style="width: 80px;">
|
||||
<el-option
|
||||
v-for="item in getDictDatas(this.DICT_TYPE.TIME_DIM)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围">
|
||||
<div v-show="queryParams.timeDim === '1'">
|
||||
<el-date-picker
|
||||
v-model="timeValue"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="yyyy-MM-dd HH:mm"
|
||||
value-format="timestamp"
|
||||
:picker-options="pickerOptions"
|
||||
popper-class="noneMinute"
|
||||
@change="timeSelect"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '2'">
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="timestamp"
|
||||
:picker-options="pickerOptions"
|
||||
@change="timeSelect"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '3'">
|
||||
<el-date-picker
|
||||
v-model="weekValue1"
|
||||
type="week"
|
||||
format="yyyy 第 WW 周"
|
||||
style='width:150px;'
|
||||
:picker-options="pickerOptionsWeek"
|
||||
@change="startWeek"
|
||||
placeholder="选择周">
|
||||
</el-date-picker>-
|
||||
<el-date-picker
|
||||
v-model="weekValue2"
|
||||
type="week"
|
||||
format="yyyy 第 WW 周"
|
||||
:picker-options="pickerOptionsWeek"
|
||||
style='width:150px;'
|
||||
@change="endWeek"
|
||||
placeholder="选择周">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '4'">
|
||||
<el-date-picker
|
||||
v-model="monthValue"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="timestamp"
|
||||
:picker-options="pickerOptions"
|
||||
@change="timeSelect"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-show="queryParams.timeDim === '5'">
|
||||
<el-date-picker
|
||||
style='width:100px;'
|
||||
v-model="yearValue1"
|
||||
type="year"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="timestamp"
|
||||
placeholder="选择年"
|
||||
@change="startYear"
|
||||
>
|
||||
</el-date-picker>-
|
||||
<el-date-picker
|
||||
style='width:100px;'
|
||||
v-model="yearValue2"
|
||||
type="year"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="timestamp"
|
||||
placeholder="选择年"
|
||||
@change="endYear"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="对象维度">
|
||||
<el-select v-model="queryParams.objType" placeholder="请选择" style="width: 80px;" @change="selectObjs">
|
||||
<el-option
|
||||
v-for="item in getDictDatas(this.DICT_TYPE.OBJECT_TYPE)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="对象选择">
|
||||
<el-select v-model="queryParams.objIds" placeholder="请选择" multiple style="width: 80px;">
|
||||
<el-option
|
||||
v-for="item in objectList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="search">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
import { getEnergyTypeListAll } from "@/api/base/energyType"
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
name: 'searchArea',
|
||||
data() {
|
||||
return {
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
energyTypeId: null,
|
||||
objIds: [],
|
||||
objType: '',
|
||||
timeDim: null,
|
||||
startTime: null,
|
||||
endTime: null
|
||||
},
|
||||
timeValue: [],// 最大7天只能整点
|
||||
dateValue: [],// 最大30天
|
||||
weekValue1: null,//最多24周
|
||||
weekValue2: null,
|
||||
monthValue: [],//最多24月
|
||||
yearValue1: null,//最多10年
|
||||
yearValue2: null,
|
||||
energyTypeList: [],
|
||||
objectList: [],
|
||||
pickerOptions: {
|
||||
disabledDate(date) {
|
||||
return date.getTime() > Date.now()
|
||||
}
|
||||
},
|
||||
pickerOptionsWeek: {
|
||||
disabledDate(time) {
|
||||
let day = Date.now()
|
||||
let limitTime = moment(day).day(-1)
|
||||
return time.getTime() > new Date(limitTime).getTime()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTypeList()
|
||||
this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
|
||||
},
|
||||
methods: {
|
||||
getTypeList() {
|
||||
getEnergyTypeListAll().then((res) => {
|
||||
this.energyTypeList = res.data || []
|
||||
})
|
||||
},
|
||||
// 范围选择器
|
||||
timeSelect() {
|
||||
switch (this.queryParams.timeDim) {
|
||||
case '1':
|
||||
if (this.timeValue[1] - this.timeValue[0] > 7*24*3600000) {
|
||||
this.$modal.msgError('最大时间范围为7天，请重新选择')
|
||||
this.timeValue = []
|
||||
}
|
||||
break
|
||||
case '2':
|
||||
if (this.dateValue[1] - this.dateValue[0] > 29*24*3600000) {
|
||||
this.$modal.msgError('最大时间范围为30天，请重新选择') // 自动选择默认是0:00:00要求是23:59:59
|
||||
this.dateValue = []
|
||||
}
|
||||
break
|
||||
case '4':
|
||||
if (this.monthValue[1] - this.monthValue[0] > 729*24*3600000) {
|
||||
this.$modal.msgError('最大时间范围为24个月，请重新选择')// 同理上面
|
||||
this.monthValue = []
|
||||
}
|
||||
break
|
||||
default:
|
||||
}
|
||||
},
|
||||
// 年选择器
|
||||
startYear() {
|
||||
if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
|
||||
this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
|
||||
this.yearValue1 = null
|
||||
return false
|
||||
}
|
||||
if (this.yearValue1 && this.yearValue2) {
|
||||
if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
|
||||
this.$modal.msgError('最大时间范围为10年，请重新选择')
|
||||
this.yearValue1 = null
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
endYear() {
|
||||
if (this.yearValue2 && this.yearValue2 < this.yearValue1) {
|
||||
this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
|
||||
this.yearValue2 = null
|
||||
return false
|
||||
}
|
||||
if (this.yearValue1 && this.yearValue2) {
|
||||
if (this.yearValue2 - this.yearValue1 > 10*365*24*3600000) {
|
||||
this.$modal.msgError('最大时间范围为10年，请重新选择')
|
||||
this.yearValue2 = null
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
// 周选择器
|
||||
startWeek() {
|
||||
if (this.weekValue1 && this.weekValue2) {
|
||||
let a = new Date(this.weekValue1).getTime()
|
||||
let b = new Date(this.weekValue2).getTime()
|
||||
if (a > b) {
|
||||
this.$modal.msgError('开始时间不能晚于结束时间，请重新选择')
|
||||
this.weekValue1 = null
|
||||
return false
|
||||
}
|
||||
if (b - a > 167*24*3600000) {
|
||||
this.$modal.msgError('最大时间范围为24周，请重新选择')
|
||||
this.weekValue1 = null
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
endWeek() {
|
||||
if (this.weekValue1 && this.weekValue2) {
|
||||
let a = new Date(this.weekValue1).getTime()
|
||||
let b = new Date(this.weekValue2).getTime()
|
||||
if (a > b) {
|
||||
this.$modal.msgError('结束时间不能早于开始时间，请重新选择')
|
||||
this.weekValue2 = null
|
||||
return false
|
||||
}
|
||||
if (b - a > 167*24*3600000) {
|
||||
this.$modal.msgError('最大时间范围为24周，请重新选择')
|
||||
this.weekValue2 = null
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
// 对象维度
|
||||
selectObjs(val) {
|
||||
console.log(val)
|
||||
},
|
||||
// 查询
|
||||
search() {
|
||||
if (!this.queryParams.energyTypeId) {
|
||||
this.$modal.msgError('请选择能源类型')
|
||||
return false
|
||||
}
|
||||
if (!this.queryParams.timeDim) {
|
||||
this.$modal.msgError('请选择时间维度')
|
||||
return false
|
||||
}
|
||||
switch (this.queryParams.timeDim) {
|
||||
case '1':
|
||||
if (this.timeValue.length > 0) {
|
||||
this.queryParams.startTime = this.timeValue[0]
|
||||
this.queryParams.endTime = this.timeValue[1] // 不用转
|
||||
} else {
|
||||
this.$modal.msgError('时间范围不能为空')
|
||||
return false
|
||||
}
|
||||
break
|
||||
case '2':
|
||||
if (this.dateValue.length > 0) {
|
||||
this.queryParams.startTime = this.dateValue[0]
|
||||
this.queryParams.endTime = this.dateValue[1] + 86399000 // 转为23:59:59
|
||||
} else {
|
||||
this.$modal.msgError('日范围不能为空')
|
||||
return false
|
||||
}
|
||||
break
|
||||
case '3':
|
||||
if (this.weekValue1 && this.weekValue2) {
|
||||
let a = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 00:00:00'
|
||||
let b = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 23:59:59'
|
||||
this.queryParams.startTime = new Date(a).getTime()
|
||||
this.queryParams.endTime = new Date(b).getTime()
|
||||
} else {
|
||||
this.$modal.msgError('周范围不能为空')
|
||||
return false
|
||||
}
|
||||
break
|
||||
case '4':// 转为本月最后一天的最后一秒
|
||||
if (this.monthValue.length > 0) {
|
||||
this.queryParams.startTime = this.monthValue[0]
|
||||
this.queryParams.endTime = this.transformTime(this.monthValue[1])
|
||||
} else {
|
||||
this.$modal.msgError('月范围不能为空')
|
||||
return false
|
||||
}
|
||||
break
|
||||
default://本年最后一天
|
||||
if (this.yearValue1 && this.yearValue2) {
|
||||
if (this.yearValue2 < this.yearValue1) {
|
||||
this.$modal.msgError('结束时间不能早于开始时间')
|
||||
return false
|
||||
} else {
|
||||
this.queryParams.startTime = this.yearValue1
|
||||
this.queryParams.endTime = this.transformYear(this.yearValue2)
|
||||
}
|
||||
} else {
|
||||
this.$modal.msgError('年范围不能为空')
|
||||
return false
|
||||
}
|
||||
}
|
||||
this.queryParams.startTime = this.queryParams.startTime + ''
|
||||
this.queryParams.endTime = this.queryParams.endTime + ''
|
||||
this.$emit('submit', this.queryParams)
|
||||
},
|
||||
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>
|
||||
/* 时间整点 */
|
||||
.noneMinute .el-time-spinner__wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.noneMinute .el-scrollbar:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user