|
@@ -2,18 +2,61 @@ |
|
@@ -2,18 +2,61 @@ |
2
|
-->
|
2
|
-->
|
3
|
<template>
|
3
|
<template>
|
4
|
<div :style="styleObj">
|
4
|
<div :style="styleObj">
|
|
|
5
|
+ <div style="padding: 6px;text-align: right;">
|
|
|
6
|
+ <el-date-picker
|
|
|
7
|
+ v-model="dataRange"
|
|
|
8
|
+ type="datetimerange"
|
|
|
9
|
+ format="yyyy-MM-dd HH:mm:ss"
|
|
|
10
|
+ :picker-options="pickerOptions"
|
|
|
11
|
+ range-separator="至"
|
|
|
12
|
+ start-placeholder="开始日期"
|
|
|
13
|
+ end-placeholder="结束日期"
|
|
|
14
|
+ align="right">
|
|
|
15
|
+ </el-date-picker>
|
|
|
16
|
+ <el-button icon="el-icon-search" size="medium" style="height: 38px; width: 55px;" @click="reloadChart"></el-button>
|
|
|
17
|
+ </div>
|
5
|
<div :id="id" style="width: 100%;height: 100%;padding: 10px"></div>
|
18
|
<div :id="id" style="width: 100%;height: 100%;padding: 10px"></div>
|
6
|
</div>
|
19
|
</div>
|
7
|
</template>
|
20
|
</template>
|
8
|
|
21
|
|
9
|
<script>
|
22
|
<script>
|
10
|
import commonWeight from '@/mixins/commonWeight'
|
23
|
import commonWeight from '@/mixins/commonWeight'
|
|
|
24
|
+import dayjs from 'dayjs'
|
|
|
25
|
+
|
11
|
|
26
|
|
12
|
export default {
|
27
|
export default {
|
13
|
name: "monitorCustomScatterWeight",
|
28
|
name: "monitorCustomScatterWeight",
|
14
|
mixins: [commonWeight],
|
29
|
mixins: [commonWeight],
|
15
|
data() {
|
30
|
data() {
|
16
|
return {
|
31
|
return {
|
|
|
32
|
+ dataRange: [],
|
|
|
33
|
+ pickerOptions: {
|
|
|
34
|
+ shortcuts: [{
|
|
|
35
|
+ text: '最近一周',
|
|
|
36
|
+ onClick(picker) {
|
|
|
37
|
+ const end = new Date();
|
|
|
38
|
+ const start = new Date();
|
|
|
39
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
40
|
+ picker.$emit('pick', [start, end]);
|
|
|
41
|
+ }
|
|
|
42
|
+ }, {
|
|
|
43
|
+ text: '最近一个月',
|
|
|
44
|
+ onClick(picker) {
|
|
|
45
|
+ const end = new Date();
|
|
|
46
|
+ const start = new Date();
|
|
|
47
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
48
|
+ picker.$emit('pick', [start, end]);
|
|
|
49
|
+ }
|
|
|
50
|
+ }, {
|
|
|
51
|
+ text: '最近三个月',
|
|
|
52
|
+ onClick(picker) {
|
|
|
53
|
+ const end = new Date();
|
|
|
54
|
+ const start = new Date();
|
|
|
55
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
56
|
+ picker.$emit('pick', [start, end]);
|
|
|
57
|
+ }
|
|
|
58
|
+ }]
|
|
|
59
|
+ },
|
17
|
chartInfo: null,
|
60
|
chartInfo: null,
|
18
|
scatterWeightOptions: {
|
61
|
scatterWeightOptions: {
|
19
|
title: {
|
62
|
title: {
|
|
@@ -34,7 +77,8 @@ export default { |
|
@@ -34,7 +77,8 @@ export default { |
34
|
'<br/>' + params.name + ' ' + params.value[2] + ' :<br/>' +
|
77
|
'<br/>' + params.name + ' ' + params.value[2] + ' :<br/>' +
|
35
|
// '最大' + params.value[2] + ': ' + params.value[3] + '% ' + '<br/>' +
|
78
|
// '最大' + params.value[2] + ': ' + params.value[3] + '% ' + '<br/>' +
|
36
|
// '最小' + params.value[2] + ': ' + params.value[4] + '% ' + '<br/>' +
|
79
|
// '最小' + params.value[2] + ': ' + params.value[4] + '% ' + '<br/>' +
|
37
|
- '平均' + params.value[2] + ': ' + params.value[5] + '% ' + '<br/>'
|
80
|
+ // '平均' + params.value[2] + ': ' + params.value[5] + '% ' + '<br/>'
|
|
|
81
|
+ '平均值:' + params.value[5] + '% ' + '<br/>'
|
38
|
);
|
82
|
);
|
39
|
},
|
83
|
},
|
40
|
axisPointer: {
|
84
|
axisPointer: {
|
|
@@ -150,6 +194,11 @@ export default { |
|
@@ -150,6 +194,11 @@ export default { |
150
|
},
|
194
|
},
|
151
|
mounted() {
|
195
|
mounted() {
|
152
|
this.initChart();
|
196
|
this.initChart();
|
|
|
197
|
+ const end = new Date();
|
|
|
198
|
+ const start = new Date();
|
|
|
199
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
200
|
+
|
|
|
201
|
+ this.dataRange = [start,end];
|
153
|
},
|
202
|
},
|
154
|
methods: {
|
203
|
methods: {
|
155
|
/**
|
204
|
/**
|
|
@@ -174,8 +223,8 @@ export default { |
|
@@ -174,8 +223,8 @@ export default { |
174
|
getChartData(callback) {
|
223
|
getChartData(callback) {
|
175
|
let that = this;
|
224
|
let that = this;
|
176
|
|
225
|
|
177
|
- var startTime = that.getOffsetDate(-30) + " 00:00:00";
|
|
|
178
|
- var endTime = that.getOffsetDate(0) + " 23:59:59";
|
226
|
+ var startTime = dayjs(that.dataRange[0]).format('YYYY-MM-DD HH:mm:ss');
|
|
|
227
|
+ var endTime = dayjs(that.dataRange[1]).format('YYYY-MM-DD HH:mm:ss');
|
179
|
|
228
|
|
180
|
// 默认条件
|
229
|
// 默认条件
|
181
|
let defaultParams = {
|
230
|
let defaultParams = {
|
|
@@ -185,8 +234,16 @@ export default { |
|
@@ -185,8 +234,16 @@ export default { |
185
|
pageSize: 1000
|
234
|
pageSize: 1000
|
186
|
}
|
235
|
}
|
187
|
|
236
|
|
|
|
237
|
+ if (that.chartInfo) {
|
|
|
238
|
+ that.chartInfo.showLoading({
|
|
|
239
|
+ text : '正在加载数据'
|
|
|
240
|
+ });
|
|
|
241
|
+ }
|
|
|
242
|
+
|
188
|
that.handlerData(defaultParams).then((res) => {
|
243
|
that.handlerData(defaultParams).then((res) => {
|
189
|
- debugger
|
244
|
+ if (that.chartInfo) {
|
|
|
245
|
+ that.chartInfo.hideLoading();
|
|
|
246
|
+ }
|
190
|
if(res && res.success){
|
247
|
if(res && res.success){
|
191
|
let list = res.data;
|
248
|
let list = res.data;
|
192
|
if (list) {
|
249
|
if (list) {
|