|
@@ -1,30 +1,34 @@
|
|
|
|
|
|
<template>
|
|
|
<div>
|
|
|
- <a-card :bordered="false" style="padding: 0px 10px 0px 10px;">
|
|
|
- <div class="table-page-search-wrapper">
|
|
|
- <a-form layout="inline" :model="queryParams" ref="queryForm">
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :xl="6" :lg="7" :md="8" :sm="24">
|
|
|
- <a-form-item label="设备名称">
|
|
|
- <j-search-select-tag v-model="queryParams.equipmentid" dict="tpm_equipment,equipmentname,id" style="width: 100%"/>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :xl="4" :lg="7" :md="8" :sm="24">
|
|
|
+ <a-card :bordered="false" style="padding: 0px 10px 0px 10px">
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form layout="inline" :model="queryParams" ref="queryForm">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :xl="6" :lg="7" :md="8" :sm="24">
|
|
|
+ <a-form-item label="设备名称">
|
|
|
+ <j-search-select-tag
|
|
|
+ v-model="queryParams.equipmentid"
|
|
|
+ dict="tpm_equipment,equipmentname,id"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <!-- <a-col :xl="4" :lg="7" :md="8" :sm="24">
|
|
|
<a-form-item label="参数类型">
|
|
|
<j-dict-select-tag v-model="queryParams.tagtype" placeholder="请输入优先级" dictCode="tpm_tag_type"/>
|
|
|
</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="loadData" icon="search">查询</a-button>
|
|
|
- </span>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form>
|
|
|
- </div>
|
|
|
- <div class="trend-charts" ref="trendCharts" :style="{ height: echartsHeight + 'px', }"></div>
|
|
|
- </a-card>
|
|
|
+ </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="loadData" icon="search">查询</a-button>
|
|
|
+ </span>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ <div class="trend-charts" ref="trendCharts" :style="{ height: echartsHeight + 'px' }"></div>
|
|
|
+ </a-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -34,6 +38,8 @@ import * as echarts from 'echarts'
|
|
|
import { httpAction, getAction, postAction } from '@/api/manage'
|
|
|
import { emsdata } from '../../module_ems/energyAnalyse/emsdata'
|
|
|
import { pvdata } from '../../module_ems/photovoltaic/pvdata'
|
|
|
+import axios from 'axios'
|
|
|
+import signMd5Utils from '@/utils/encryption/signMd5Utils'
|
|
|
|
|
|
export default {
|
|
|
name: 'Index',
|
|
@@ -53,7 +59,7 @@ export default {
|
|
|
pageSize: 10,
|
|
|
equipmentid: '1780110297413861377',
|
|
|
day: null,
|
|
|
- tagtype: "5",
|
|
|
+ tagtype: '5',
|
|
|
},
|
|
|
url: {
|
|
|
list: '/homepate/statistics/firstload',
|
|
@@ -69,21 +75,36 @@ export default {
|
|
|
},
|
|
|
created() {},
|
|
|
mounted() {
|
|
|
- this.getTest();
|
|
|
+ this.getTest()
|
|
|
},
|
|
|
methods: {
|
|
|
/** 查询设备运行状态时间段列表 */
|
|
|
loadData(arg) {
|
|
|
- setTimeout(() => {
|
|
|
- this.getTest()
|
|
|
- }, 2000)
|
|
|
+ var starttime = '2024-04-23 07:32:00'
|
|
|
+ var endtime = '2024-04-23 12:32:00'
|
|
|
+ var equipmentcode = 'RS7611000000081'
|
|
|
+ let url = 'http://192.168.2.128:8000/phmpre/healthpre/'
|
|
|
+
|
|
|
+ var header = {headers: {"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"}, changeOrigin: true};
|
|
|
+ // axios.defaults.changeOrigin = true;
|
|
|
+ // axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
|
|
|
+ var parameter = {
|
|
|
+ starttime: starttime,
|
|
|
+ endtime: endtime,
|
|
|
+ equipmentcode: equipmentcode,
|
|
|
+ }
|
|
|
+ axios
|
|
|
+ .post(url, parameter, header)
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res.data)
|
|
|
+ })
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
// 后端好了需要删掉
|
|
|
getTest() {
|
|
|
var _this = this
|
|
|
- _this.gd02us = [];
|
|
|
- _this.times = [];
|
|
|
+ _this.gd02us = []
|
|
|
+ _this.times = []
|
|
|
pvdata.mdForecastdata.forEach((item) => {
|
|
|
item.data.forEach((i) => {
|
|
|
if (item.meterName === 'GD02R') {
|
|
@@ -100,14 +121,10 @@ export default {
|
|
|
var _this = this
|
|
|
var chartDom = this.$refs.trendCharts
|
|
|
_this.myChart = echarts.init(chartDom)
|
|
|
+ _this.echartsHeight = 4 * 300;
|
|
|
+ var leftValue = '5%';
|
|
|
|
|
|
var option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- // position: function (pt) {
|
|
|
- // return [pt[0], '5%']
|
|
|
- // },
|
|
|
- },
|
|
|
title: {
|
|
|
left: 'left',
|
|
|
text: '设备运行数据趋势预测',
|
|
@@ -115,76 +132,59 @@ export default {
|
|
|
legend: {
|
|
|
data: ['实际值', '预测值'],
|
|
|
},
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- data: _this.times,
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- boundaryGap: [0, '100%'],
|
|
|
- },
|
|
|
- // dataZoom: [
|
|
|
- // {
|
|
|
- // type: 'inside',
|
|
|
- // start: 0,
|
|
|
- // end: 100,
|
|
|
- // xAxisIndex: 0,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // start: 0,
|
|
|
- // end: 10,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // show: true,
|
|
|
- // yAxisIndex: 0,
|
|
|
- // filterMode: 'empty',
|
|
|
- // width: 30,
|
|
|
- // height: '80%',
|
|
|
- // right: '7%',
|
|
|
- // },
|
|
|
- // ],
|
|
|
+ grid: [
|
|
|
+ { left: leftValue, top: "5%", bottom: "78%" },
|
|
|
+ { left: leftValue, top: "26%", bottom: "54%" },
|
|
|
+ { left: leftValue, top: "54%", bottom: "26%" },
|
|
|
+ { left: leftValue, top: "78%", bottom: "5%" }
|
|
|
+ ],
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ gridIndex: 0,
|
|
|
+ boundaryGap: false,
|
|
|
+ name: '电流',
|
|
|
+ data: _this.times,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ gridIndex: 1,
|
|
|
+ boundaryGap: false,
|
|
|
+ name: '电压',
|
|
|
+ data: _this.times,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ gridIndex: 2,
|
|
|
+ boundaryGap: false,
|
|
|
+ name: '温度',
|
|
|
+ data: _this.times,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ gridIndex: 3,
|
|
|
+ boundaryGap: false,
|
|
|
+ name: '湿度',
|
|
|
+ data: _this.times,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ { type: 'value', gridIndex: 0 },
|
|
|
+ { type: 'value', gridIndex: 1 },
|
|
|
+ { type: 'value', gridIndex: 2 },
|
|
|
+ { type: 'value', gridIndex: 3 }
|
|
|
+ ],
|
|
|
series: [
|
|
|
{
|
|
|
name: '实际值',
|
|
|
type: 'line',
|
|
|
symbol: 'none',
|
|
|
sampling: 'lttb',
|
|
|
+ xAxisIndex: 0,
|
|
|
+ yAxisIndex: 0,
|
|
|
itemStyle: {
|
|
|
color: '#91CC75',
|
|
|
},
|
|
|
- // markArea: {
|
|
|
- // // 覆盖面积
|
|
|
- // itemStyle: {
|
|
|
- // color: 'rgba(255, 173, 177, 0.4)',
|
|
|
- // },
|
|
|
- // data: [
|
|
|
- // // [
|
|
|
- // // {
|
|
|
- // // // name: 'Morning Peak',
|
|
|
- // // xAxis: '07:02',
|
|
|
- // // },
|
|
|
- // // {
|
|
|
- // // xAxis: '07:15',
|
|
|
- // // },
|
|
|
- // // ],
|
|
|
- // [
|
|
|
- // {
|
|
|
- // // name: 'Evening Peak',
|
|
|
- // xAxis: '11:14',
|
|
|
- // },
|
|
|
- // {
|
|
|
- // xAxis: '11:28',
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // ],
|
|
|
- // },
|
|
|
- // markPoint: { // 记录最大值和最小值
|
|
|
- // data: [
|
|
|
- // { type: 'max', name: 'Max' },
|
|
|
- // { type: 'min', name: 'Min' },
|
|
|
- // ],
|
|
|
- // },
|
|
|
data: _this.gd02us,
|
|
|
},
|
|
|
{
|
|
@@ -192,53 +192,88 @@ export default {
|
|
|
type: 'line',
|
|
|
symbol: 'none',
|
|
|
sampling: 'lttb',
|
|
|
+ xAxisIndex: 0,
|
|
|
+ yAxisIndex: 0,
|
|
|
itemStyle: {
|
|
|
color: '#EE6666',
|
|
|
},
|
|
|
- // markPoint: {
|
|
|
- // data: [
|
|
|
- // { type: 'max', name: 'Max' },
|
|
|
- // { type: 'min', name: 'Min' },
|
|
|
- // ],
|
|
|
- // },
|
|
|
data: _this.gd03us,
|
|
|
},
|
|
|
- // {
|
|
|
- // name: 'GD05 U',
|
|
|
- // type: 'line',
|
|
|
- // symbol: 'none',
|
|
|
- // sampling: 'lttb',
|
|
|
- // itemStyle: {
|
|
|
- // color: '#FAAD14',
|
|
|
- // },
|
|
|
- // markPoint: {
|
|
|
- // data: [
|
|
|
- // { type: 'max', name: 'Max' },
|
|
|
- // { type: 'min', name: 'Min' },
|
|
|
- // ],
|
|
|
- // },
|
|
|
- // data: _this.gd05us,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: 'GD06 U',
|
|
|
- // type: 'line',
|
|
|
- // symbol: 'none',
|
|
|
- // sampling: 'lttb',
|
|
|
- // itemStyle: {
|
|
|
- // color: '#5470C6',
|
|
|
- // },
|
|
|
- // markPoint: {
|
|
|
- // data: [
|
|
|
- // { type: 'max', name: 'Max' },
|
|
|
- // { type: 'min', name: 'Min' },
|
|
|
- // ],
|
|
|
- // },
|
|
|
- // data: _this.gd06us,
|
|
|
- // },
|
|
|
- ],
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
+ {
|
|
|
+ name: '实际值',
|
|
|
+ type: 'line',
|
|
|
+ symbol: 'none',
|
|
|
+ sampling: 'lttb',
|
|
|
+ xAxisIndex: 1,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#91CC75',
|
|
|
+ },
|
|
|
+ data: _this.gd02us,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '预测值',
|
|
|
+ type: 'line',
|
|
|
+ symbol: 'none',
|
|
|
+ sampling: 'lttb',
|
|
|
+ xAxisIndex: 1,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#EE6666',
|
|
|
+ },
|
|
|
+ data: _this.gd03us,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '实际值',
|
|
|
+ type: 'line',
|
|
|
+ symbol: 'none',
|
|
|
+ sampling: 'lttb',
|
|
|
+ xAxisIndex: 2,
|
|
|
+ yAxisIndex: 2,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#91CC75',
|
|
|
+ },
|
|
|
+ data: _this.gd02us,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '预测值',
|
|
|
+ type: 'line',
|
|
|
+ symbol: 'none',
|
|
|
+ sampling: 'lttb',
|
|
|
+ xAxisIndex: 2,
|
|
|
+ yAxisIndex: 2,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#EE6666',
|
|
|
+ },
|
|
|
+ data: _this.gd03us,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '实际值',
|
|
|
+ type: 'line',
|
|
|
+ symbol: 'none',
|
|
|
+ sampling: 'lttb',
|
|
|
+ xAxisIndex: 3,
|
|
|
+ yAxisIndex: 3,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#91CC75',
|
|
|
+ },
|
|
|
+ data: _this.gd02us,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '预测值',
|
|
|
+ type: 'line',
|
|
|
+ symbol: 'none',
|
|
|
+ sampling: 'lttb',
|
|
|
+ xAxisIndex: 3,
|
|
|
+ yAxisIndex: 3,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#EE6666',
|
|
|
+ },
|
|
|
+ data: _this.gd03us,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
option && _this.myChart.setOption(option)
|
|
|
setTimeout(() => {
|
|
|
_this.myChart.resize()
|