|
|
@@ -1,59 +1,61 @@
|
|
|
<template>
|
|
|
- <div class="demand-analysis" :loading="loading">
|
|
|
- <div class="table-page-search-wrapper search-compoments">
|
|
|
- <a-form layout="inline" @keyup.enter.native="searchQuery">
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :xl="6" :lg="7" :md="8" :sm="24">
|
|
|
- <a-form-item label="设备名称">
|
|
|
- <j-search-select-tag v-model="queryParam.equipmentid" placeholder="请选择设备" dict="tpm_equipment,equipmentname,id" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :xl="6" :lg="7" :md="8" :sm="24">
|
|
|
- <a-form-item label="能源参数">
|
|
|
- <!-- <a-select
|
|
|
- v-model="queryParam.energyitemid"
|
|
|
- placeholder="请选择能源参数"
|
|
|
- :options="options">
|
|
|
- </a-select> -->
|
|
|
- <a-select v-model="queryParam.queryparamtype" placeholder="请选择能源参数">
|
|
|
- <a-select-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item"
|
|
|
- :value="item"
|
|
|
- >{{item}}</a-select-option>
|
|
|
- </a-select>
|
|
|
- <!-- <j-search-select-tag v-model="queryParam.equipmentid" placeholder="请选择能源参数" dict="tpm_equipment,equipmentname,id" /> -->
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :xl="6" :lg="11" :md="12" :sm="24">
|
|
|
- <a-form-item label="时间">
|
|
|
- <a-range-picker date-format="YYYY-MM-DD" v-model="queryParam.date" @change="onChangeDate" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :xl="6" :lg="7" :md="8" :sm="24">
|
|
|
- <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
|
|
- <a-button type="primary" @click="getList" icon="search">查询</a-button>
|
|
|
- <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
|
|
- </span>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form>
|
|
|
+ <a-spin :spinning="loading">
|
|
|
+ <div class="demand-analysis" :loading="loading">
|
|
|
+ <div class="table-page-search-wrapper search-compoments">
|
|
|
+ <a-form layout="inline" @keyup.enter.native="searchQuery">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :xl="6" :lg="7" :md="8" :sm="24">
|
|
|
+ <a-form-item label="设备名称">
|
|
|
+ <j-search-select-tag v-model="queryParam.equipmentid" placeholder="请选择设备" dict="tpm_equipment,equipmentname,id" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xl="6" :lg="7" :md="8" :sm="24">
|
|
|
+ <a-form-item label="能源参数">
|
|
|
+ <a-select v-model="queryParam.queryparamtype" placeholder="请选择能源参数">
|
|
|
+ <a-select-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item"
|
|
|
+ :value="item"
|
|
|
+ >{{item}}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <!-- <j-search-select-tag v-model="queryParam.equipmentid" placeholder="请选择能源参数" dict="tpm_equipment,equipmentname,id" /> -->
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xl="6" :lg="11" :md="12" :sm="24">
|
|
|
+ <a-form-item label="时间">
|
|
|
+ <a-range-picker
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="yyyy-MM-DD"
|
|
|
+ v-model="queryParam.date"
|
|
|
+ :disabled-date="setDisabledDate"
|
|
|
+ @openChange="openChange"
|
|
|
+ @calendarChange="onCalendarChange"
|
|
|
+ />
|
|
|
+ <!-- date-format="YYYY-MM-DD" -->
|
|
|
+ <!-- @change="onChangeDate" -->
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xl="6" :lg="7" :md="8" :sm="24">
|
|
|
+ <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
|
|
+ <a-button type="primary" @click="getMoniparamData" icon="search">查询</a-button>
|
|
|
+ <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
|
|
+ </span>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ <div class="item-echarts" ref="echarts" :style="{ height: echartsHeight + 'px' }"></div>
|
|
|
</div>
|
|
|
- <!-- <commonSearch ref="commonSearch" type="daterange" @search="handleSearch"></commonSearch> -->
|
|
|
- <div class="item-echarts" ref="echarts" :style="{ height: echartsHeight + 'px' }"></div>
|
|
|
- </div>
|
|
|
+ </a-spin>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import moment from 'moment';
|
|
|
import * as echarts from 'echarts'
|
|
|
-import commonSearch from '../components/commonSearch.vue'
|
|
|
import { httpAction, getAction } from '@/api/manage'
|
|
|
import { emsdata } from '../emsdata'
|
|
|
export default {
|
|
|
name: 'moniparamData',
|
|
|
- components: {
|
|
|
- commonSearch,
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
description: '参数历史查询',
|
|
|
@@ -62,71 +64,120 @@ export default {
|
|
|
echartsHeight: window.innerHeight - 84 - 60 - 30,
|
|
|
myChart: null,
|
|
|
url: {
|
|
|
- list: '/ems/statistics/demandanalysis',
|
|
|
nycsList: '/dataVoltage/dataVoltage/xialaList',
|
|
|
- list2: '/dataVoltage/dataVoltage/dataList',
|
|
|
+ list: '/dataVoltage/dataVoltage/dataList',
|
|
|
},
|
|
|
moniparamData: {},
|
|
|
- options: []
|
|
|
+ options: [],
|
|
|
+ disabledCurrent: null, // 用来判断日期不超过2天的第一个数
|
|
|
+ echartsColor: ['#91CC75', '#EE6666', '#FAAD14', '#5470C6'],
|
|
|
+ seriesData: [],
|
|
|
+ xAxisData: [],
|
|
|
+ legendData: [],
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.getNycsList()
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.$nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- // this.getList()
|
|
|
- this.getTest()
|
|
|
- }, 1000)
|
|
|
- // this.getDemandanalysis()
|
|
|
- })
|
|
|
+ this.getNycsList()
|
|
|
+ this.getNowDate()
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.getMoniparamData()
|
|
|
+ // })
|
|
|
},
|
|
|
methods: {
|
|
|
- // 后端好了需要删掉
|
|
|
- getTest() {
|
|
|
- this.moniparamData = emsdata.moniparamData
|
|
|
- console.log(7788,this.moniparamData)
|
|
|
- this.initEcharts()
|
|
|
- },
|
|
|
- // 时间处理
|
|
|
- onChangeDate(date, dateString){
|
|
|
- console.log(date, dateString);
|
|
|
- this.queryParam.logtimebegin= dateString[0]
|
|
|
- this.queryParam.logtimeend= dateString[1]
|
|
|
- },
|
|
|
// 获取能源参数下拉列表
|
|
|
getNycsList(){
|
|
|
getAction(this.url.nycsList, null).then((res) => {
|
|
|
- // this.options = res.map((item,index )=> {
|
|
|
- // return {
|
|
|
- // key: item,
|
|
|
- // value: item,
|
|
|
- // lable: item
|
|
|
- // }
|
|
|
- // })
|
|
|
this.options = res
|
|
|
+ this.queryParam.queryparamtype = this.options[0]
|
|
|
+ }).finally(()=>{
|
|
|
+ this.getMoniparamData()
|
|
|
})
|
|
|
},
|
|
|
- getList() {
|
|
|
- getAction(this.url.list2, this.queryParam).then((res) => {
|
|
|
- console.log(9999,res)
|
|
|
- })
|
|
|
+ // 时间处理
|
|
|
+ // onChangeDate(date, dateString){
|
|
|
+ // console.log(date, dateString);
|
|
|
+ // this.queryParam.logtimebegin= dateString[0]
|
|
|
+ // this.queryParam.logtimeend= dateString[1]
|
|
|
+ // },
|
|
|
+ /**
|
|
|
+ * 获取手动选择的时间段起始值
|
|
|
+ */
|
|
|
+ onCalendarChange (dates) {
|
|
|
+ // 获取手动选择的时间段起始值
|
|
|
+ this.disabledCurrent = dates[0]
|
|
|
+ this.queryParam.logtimebegin= dates[0]
|
|
|
+ this.queryParam.logtimeend= dates[1]
|
|
|
+ this.queryParam.date = dates
|
|
|
+ // 手动更新视图
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ // 动态渲染禁用日期
|
|
|
+ setDisabledDate(current) {
|
|
|
+ // 限制为前后一天 || // 今天以后的不可选
|
|
|
+ if (!this.disabledCurrent) return (current && current > moment().endOf('day'))
|
|
|
+ return (current && current < moment(this.disabledCurrent).subtract(1, "days") || current > moment(this.disabledCurrent).add(1, "days")) || (current && current > moment().endOf('day'))
|
|
|
+ },
|
|
|
+ // 关闭日期选择器后清空判断值
|
|
|
+ openChange(status){
|
|
|
+ if (!status) this.disabledCurrent = null
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查询当天日期
|
|
|
+ */
|
|
|
+ getNowDate() {
|
|
|
+ const nowTime = new Date()
|
|
|
+ const year = nowTime.getFullYear()
|
|
|
+ let month = nowTime.getMonth() + 1
|
|
|
+ let day = nowTime.getDate()
|
|
|
+ month = month < 10 ? '0' + month : month
|
|
|
+ day = day < 10 ? '0' + day : day
|
|
|
+ // const NOW_MONTHS_AGO = `${year}-${month}`
|
|
|
+ this.queryParam.date = [`${year}-${month}-${day}`, `${year}-${month}-${day}`]
|
|
|
+ this.queryParam.logtimebegin = `${year}-${month}-${day}`
|
|
|
+ this.queryParam.logtimeend = `${year}-${month}-${day}`
|
|
|
},
|
|
|
searchReset(){
|
|
|
-
|
|
|
+ this.queryParam = {}
|
|
|
+ this.getMoniparamData()
|
|
|
},
|
|
|
- async getDemandanalysis() {
|
|
|
+ getMoniparamData() {
|
|
|
this.loading = true
|
|
|
- var data = this.$refs.commonSearch.queryParams
|
|
|
- getAction(this.url.list, data).then((response) => {
|
|
|
- console.log(response)
|
|
|
- this.monthsplit = response.data.monthsplit
|
|
|
- this.mubiao = response.data.mubiao
|
|
|
- this.shiji = response.data.shiji
|
|
|
+ getAction(this.url.list, this.queryParam).then((response) => {
|
|
|
+ if(response.success){
|
|
|
+ var data = response.result
|
|
|
+ this.seriesData = data.filter(res=> res.name !== 'logtime').map((item, index)=> {
|
|
|
+ var itemData = {
|
|
|
+ name: item.name,
|
|
|
+ type: 'line',
|
|
|
+ symbol: 'none',
|
|
|
+ sampling: 'lttb',
|
|
|
+ itemStyle: {
|
|
|
+ color: this.echartsColor[index],
|
|
|
+ },
|
|
|
+ markPoint: {
|
|
|
+ data: [
|
|
|
+ { type: 'max', name: 'Max' },
|
|
|
+ { type: 'min', name: 'Min' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: item.data,
|
|
|
+ }
|
|
|
+ return itemData
|
|
|
+ })
|
|
|
+ console.log(this.seriesData)
|
|
|
+ this.xAxisData = data.find(res=> res.name === 'logtime').data
|
|
|
+ console.log(this.xAxisData)
|
|
|
+ this.legendData = data.map(res=> res.name).filter(res=> res !== 'logtime')
|
|
|
+ console.log(this.legendData)
|
|
|
+ }else{
|
|
|
+ this.$message.warning(response.message);
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.initEcharts()
|
|
|
this.loading = false
|
|
|
})
|
|
|
- this.initEcharts()
|
|
|
},
|
|
|
initEcharts() {
|
|
|
var _this = this
|
|
|
@@ -145,12 +196,12 @@ export default {
|
|
|
text: '参数历史数据',
|
|
|
},
|
|
|
legend: {
|
|
|
- data: ['Pa', 'Pb', 'Pc', 'P'],
|
|
|
+ data: _this.legendData,
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
- data: _this.moniparamData.times,
|
|
|
+ data: _this.xAxisData,
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
@@ -176,72 +227,7 @@ export default {
|
|
|
right: "7%",
|
|
|
},
|
|
|
],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'Pa',
|
|
|
- type: 'line',
|
|
|
- symbol: 'none',
|
|
|
- sampling: 'lttb',
|
|
|
- itemStyle: {
|
|
|
- color: '#91CC75',
|
|
|
- },
|
|
|
- markPoint: {
|
|
|
- data: [
|
|
|
- { type: 'max', name: 'Max' },
|
|
|
- { type: 'min', name: 'Min' },
|
|
|
- ],
|
|
|
- },
|
|
|
- data: _this.moniparamData.result.Pa,
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Pb',
|
|
|
- type: 'line',
|
|
|
- symbol: 'none',
|
|
|
- sampling: 'lttb',
|
|
|
- itemStyle: {
|
|
|
- color: '#EE6666',
|
|
|
- },
|
|
|
- markPoint: {
|
|
|
- data: [
|
|
|
- { type: 'max', name: 'Max' },
|
|
|
- { type: 'min', name: 'Min' },
|
|
|
- ],
|
|
|
- },
|
|
|
- data: _this.moniparamData.result.Pb,
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Pc',
|
|
|
- type: 'line',
|
|
|
- symbol: 'none',
|
|
|
- sampling: 'lttb',
|
|
|
- itemStyle: {
|
|
|
- color: '#FAAD14',
|
|
|
- },
|
|
|
- markPoint: {
|
|
|
- data: [
|
|
|
- { type: 'max', name: 'Max' },
|
|
|
- { type: 'min', name: 'Min' },
|
|
|
- ],
|
|
|
- },
|
|
|
- data: _this.moniparamData.result.Pc,
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'P',
|
|
|
- type: 'line',
|
|
|
- symbol: 'none',
|
|
|
- sampling: 'lttb',
|
|
|
- itemStyle: {
|
|
|
- color: '#5470C6',
|
|
|
- },
|
|
|
- markPoint: {
|
|
|
- data: [
|
|
|
- { type: 'max', name: 'Max' },
|
|
|
- { type: 'min', name: 'Min' },
|
|
|
- ],
|
|
|
- },
|
|
|
- data: _this.moniparamData.result.P,
|
|
|
- },
|
|
|
- ],
|
|
|
+ series: _this.seriesData,
|
|
|
}
|
|
|
|
|
|
option && _this.myChart.setOption(option)
|
|
|
@@ -250,11 +236,6 @@ export default {
|
|
|
_this.myChart.resize()
|
|
|
})
|
|
|
},
|
|
|
- /** 搜索按钮操作 */
|
|
|
- handleSearch(param) {
|
|
|
- this.getTest()
|
|
|
- // this.getDemandanalysis()
|
|
|
- },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
yuhan