Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
V
V3-TailingPond-xiadian
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kimber
V3-TailingPond-xiadian
Commits
4024190e
Commit
4024190e
authored
Jul 22, 2023
by
forevertyler
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
'chart
parent
b79531eb
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
210 additions
and
204 deletions
+210
-204
chartTemplates.js
src/assets/js/chartTemplates.js
+207
-200
httpApi.js
src/assets/js/httpApi.js
+3
-4
No files found.
src/assets/js/chartTemplates.js
View file @
4024190e
...
@@ -7,7 +7,7 @@ import Highcharts3D from 'highcharts/highcharts-3d.js';
...
@@ -7,7 +7,7 @@ import Highcharts3D from 'highcharts/highcharts-3d.js';
HTreemap
(
Highcharts
);
// treemap 类型
HTreemap
(
Highcharts
);
// treemap 类型
Highcharts3D
(
Highcharts
);
// 3D 类型
Highcharts3D
(
Highcharts
);
// 3D 类型
var
Highchart
=
function
()
{
var
Highchart
=
function
()
{
/**
/**
* 图表数据格式化
* 图表数据格式化
...
@@ -19,21 +19,21 @@ var Highchart = function(){
...
@@ -19,21 +19,21 @@ var Highchart = function(){
* @updatetime: 2021/12/25
* @updatetime: 2021/12/25
* @createtime: 2021/12/25
* @createtime: 2021/12/25
*/
*/
var
formatChartData
=
function
(
list
,
opts
)
{
var
formatChartData
=
function
(
list
,
opts
)
{
var
sdata
=
[],
sum
=
0
,
maxVal
=
0
,
mark
=
0
;
var
sdata
=
[],
sum
=
0
,
maxVal
=
0
,
mark
=
0
;
var
len
=
list
.
length
;
var
len
=
list
.
length
;
for
(
var
i
=
0
;
i
<
len
;
i
++
)
{
for
(
var
i
=
0
;
i
<
len
;
i
++
)
{
var
item
=
list
[
i
];
var
item
=
list
[
i
];
var
value
=
item
[
opts
.
value
]
*
1
;
var
value
=
item
[
opts
.
value
]
*
1
;
value
>
maxVal
&&
(
maxVal
=
value
,
mark
=
i
);
value
>
maxVal
&&
(
maxVal
=
value
,
mark
=
i
);
sdata
.
push
({
name
:
item
[
opts
.
name
],
y
:
value
,
'
color
'
:
item
.
color
||
void
0
});
sdata
.
push
({
name
:
item
[
opts
.
name
],
y
:
value
,
'
color
'
:
item
.
color
||
void
0
});
sum
+=
value
;
sum
+=
value
;
};
};
if
(
opts
.
standOut
)
{
if
(
opts
.
standOut
)
{
sdata
[
mark
].
sliced
=
true
;
sdata
[
mark
].
sliced
=
true
;
sdata
[
mark
].
selected
=
true
;
sdata
[
mark
].
selected
=
true
;
};
};
return
{
seriesData
:
sdata
,
sum
:
sum
};
return
{
seriesData
:
sdata
,
sum
:
sum
};
};
};
...
@@ -47,35 +47,35 @@ var Highchart = function(){
...
@@ -47,35 +47,35 @@ var Highchart = function(){
* @updatetime: 2022/12/28
* @updatetime: 2022/12/28
* @createtime: 2022/12/28
* @createtime: 2022/12/28
*/
*/
var
seriesDataFormat
=
function
(
data
,
opts
)
{
var
seriesDataFormat
=
function
(
data
,
opts
)
{
var
names
=
data
.
names
||
[],
list
=
data
.
list
||
data
.
lists
,
series
=
[],
categories
=
[],
var
names
=
data
.
names
||
[],
list
=
data
.
list
||
data
.
lists
,
series
=
[],
categories
=
[],
maxVal
=
0
;
maxVal
=
0
;
if
(
names
[
0
]
&&
list
)
{
if
(
names
[
0
]
&&
list
)
{
var
colors
=
[
'
#8085E9
'
,
'
#90ED7D
'
,
'
#F7A35C
'
,
'
#F15C80
'
,
'
#E4D354
'
,
'
#2B908F
'
,
'
#F45B5B
'
,
'
#91E8E1
'
,
'
#0769CB
'
,
'
#00ABBD
'
,
'
#ffd886
'
,
"
#9F2E61
"
,
"
#4D670C
"
];
var
colors
=
[
'
#8085E9
'
,
'
#90ED7D
'
,
'
#F7A35C
'
,
'
#F15C80
'
,
'
#E4D354
'
,
'
#2B908F
'
,
'
#F45B5B
'
,
'
#91E8E1
'
,
'
#0769CB
'
,
'
#00ABBD
'
,
'
#ffd886
'
,
"
#9F2E61
"
,
"
#4D670C
"
];
var
len
=
names
.
length
;
var
len
=
names
.
length
;
for
(
var
i
=
0
;
i
<
len
;
i
++
)
{
for
(
var
i
=
0
;
i
<
len
;
i
++
)
{
var
item
=
names
[
i
];
var
item
=
names
[
i
];
var
serie
=
{
name
:
item
.
name
,
data
:[],
key
:
item
.
key
,
type
:
data
.
chartType
,
color
:
colors
[
i
]
};
var
serie
=
{
name
:
item
.
name
,
data
:
[],
key
:
item
.
key
,
type
:
data
.
chartType
,
color
:
colors
[
i
]
};
opts
&&
serie
.
type
&&
(
serie
.
type
=
opts
.
type
);
opts
&&
serie
.
type
&&
(
serie
.
type
=
opts
.
type
);
series
.
push
(
serie
);
series
.
push
(
serie
);
};
};
for
(
var
item
of
list
)
{
for
(
var
item
of
list
)
{
var
values
=
item
.
values
;
var
values
=
item
.
values
;
//var datetime = item[opts.datekey || 'dateUnit'];
//var datetime = item[opts.datekey || 'dateUnit'];
//var time = datetime.indexOf(' ') > 0 ? datetime.split(' ')[1] : datetime;
//var time = datetime.indexOf(' ') > 0 ? datetime.split(' ')[1] : datetime;
var
timestamp
=
item
[
'
date
'
];
var
timestamp
=
item
[
'
date
'
];
//categories.push(timestamp);
//categories.push(timestamp);
for
(
var
serie
of
series
)
{
for
(
var
serie
of
series
)
{
var
value
=
values
[
serie
.
key
]
*
1
;
var
value
=
values
[
serie
.
key
]
*
1
;
Math
.
abs
(
value
)
>
maxVal
&&
(
maxVal
=
Math
.
abs
(
value
));
Math
.
abs
(
value
)
>
maxVal
&&
(
maxVal
=
Math
.
abs
(
value
));
serie
.
data
.
push
([
timestamp
,
value
]);
serie
.
data
.
push
([
timestamp
,
value
]);
};
};
};
};
};
};
return
{
series
:
series
,
categories
:
categories
,
maxVal
:
maxVal
}
return
{
series
:
series
,
categories
:
categories
,
maxVal
:
maxVal
}
};
};
...
@@ -90,15 +90,15 @@ var Highchart = function(){
...
@@ -90,15 +90,15 @@ var Highchart = function(){
* @updatetime: 2022/1/12
* @updatetime: 2022/1/12
* @createtime: 2022/1/12
* @createtime: 2022/1/12
*/
*/
var
reversExtends
=
function
(
inherit
,
give
,
fn
)
{
var
reversExtends
=
function
(
inherit
,
give
,
fn
)
{
return
(
function
run
(
main
,
assist
){
return
(
function
run
(
main
,
assist
)
{
var
keys
=
Object
.
keys
(
assist
),
i
=
0
;
var
keys
=
Object
.
keys
(
assist
),
i
=
0
;
return
(
function
loop
(){
return
(
function
loop
()
{
var
key
=
keys
[
i
];
i
++
;
var
key
=
keys
[
i
];
i
++
;
if
(
key
)
{
if
(
key
)
{
fn
&&
fn
(
key
,
main
,
assist
);
fn
&&
fn
(
key
,
main
,
assist
);
return
typeof
main
[
key
]
===
'
object
'
?
run
(
main
[
key
],
assist
[
key
])
:
(
main
[
key
]
=
assist
[
key
]),
loop
();
return
typeof
main
[
key
]
===
'
object
'
?
run
(
main
[
key
],
assist
[
key
])
:
(
main
[
key
]
=
assist
[
key
]),
loop
();
}
else
{
}
else
{
return
inherit
;
return
inherit
;
};
};
})();
})();
...
@@ -115,56 +115,57 @@ var Highchart = function(){
...
@@ -115,56 +115,57 @@ var Highchart = function(){
* @updatetime: 2022/4/18(周一)
* @updatetime: 2022/4/18(周一)
* @createtime: 2022/4/18(周一)
* @createtime: 2022/4/18(周一)
*/
*/
var
discernValidAlarmValue
=
function
(
alarms
,
list
,
series
,
direction
,
opts
)
{
var
discernValidAlarmValue
=
function
(
alarms
,
list
,
series
,
direction
,
opts
)
{
var
xLength
=
(
list
||
[]).
length
,
maxAlarm
=
0
,
opts
=
opts
||
{};
var
xLength
=
(
list
||
[]).
length
,
maxAlarm
=
0
,
opts
=
opts
||
{};
if
(
alarms
&&
xLength
)
{
if
(
alarms
&&
xLength
)
{
var
value
=
alarms
.
value
;
var
value
=
alarms
.
value
;
// discern
// discern
var
levelDist
=
[
var
levelDist
=
[
{
color
:
'
red
'
,
name
:
'
红色报警线
'
},
{
color
:
'
red
'
,
name
:
'
红色报警线
'
},
{
color
:
'
orange
'
,
name
:
'
橙色报警线
'
},
{
color
:
'
orange
'
,
name
:
'
橙色报警线
'
},
{
color
:
'
yellow
'
,
name
:
'
黄色报警线
'
},
{
color
:
'
yellow
'
,
name
:
'
黄色报警线
'
},
{
color
:
'
blue
'
,
name
:
'
蓝色报警线
'
}],
{
color
:
'
blue
'
,
name
:
'
蓝色报警线
'
}],
alarmLine
=
{},
setAlarmSerie
=
function
(
value
,
name
,
color
)
{
alarmLine
=
{},
setAlarmSerie
=
function
(
value
,
name
,
color
)
{
// 修改蓝色色值
// 修改蓝色色值
(
color
===
'
blue
'
)
&&
(
color
=
'
#3BAFFB
'
);
(
color
===
'
blue
'
)
&&
(
color
=
'
#3BAFFB
'
);
var
sx
=
list
[
0
].
date
,
ex
=
list
[
xLength
-
1
].
date
;
var
sx
=
list
[
0
].
date
,
ex
=
list
[
xLength
-
1
].
date
;
var
serie
=
{
name
:
name
,
type
:
'
spline
'
,
data
:[{
x
:
sx
,
y
:
value
},
{
x
:
ex
,
y
:
value
}],
var
serie
=
{
color
:
color
,
name
:
name
,
type
:
'
spline
'
,
data
:
[{
x
:
sx
,
y
:
value
},
{
x
:
ex
,
y
:
value
}],
enableMouseTracking
:
false
,
color
:
color
,
legend
:
false
,
enableMouseTracking
:
false
,
showInLegend
:
false
,
legend
:
false
,
dashStyle
:
'
ShortDot
'
,
showInLegend
:
false
,
lineWidth
:
opts
.
lineWidth
||
1
,
dashStyle
:
'
ShortDot
'
,
states
:{
lineWidth
:
opts
.
lineWidth
||
1
,
inactive
:{
states
:
{
opacity
:
opts
.
opacity
inactive
:
{
},
opacity
:
opts
.
opacity
},
},
dataLabels
:{
},
enabled
:
opts
.
valEnabled
||
false
,
// 数据值, 2022/11/11(周五) 因多条报警线暂时关闭
dataLabels
:
{
enabled
:
opts
.
valEnabled
||
false
,
// 数据值, 2022/11/11(周五) 因多条报警线暂时关闭
//backgroundColor:'red',
//backgroundColor:'red',
verticalAlign
:
'
middle
'
,
verticalAlign
:
'
middle
'
,
padding
:
0
,
padding
:
0
,
defer
:
false
,
defer
:
false
,
allowOverlap
:
true
,
allowOverlap
:
true
,
color
:
color
,
color
:
color
,
style
:{
style
:
{
fontSize
:
'
17
'
,
fontSize
:
'
17
'
,
textOutline
:
'
none
'
,
textOutline
:
'
none
'
,
},
},
},
},
tooltip
:{
tooltip
:
{
//footerFormat:'',
//footerFormat:'',
//pointFormat:'',
//pointFormat:'',
headerFormat
:
''
,
headerFormat
:
''
,
//nullFormat:'',
//nullFormat:'',
},
},
marker
:{
marker
:
{
enabled
:
false
enabled
:
false
},
},
zIndex
:
-
10
,
zIndex
:
-
10
,
};
};
series
.
push
(
serie
);
series
.
push
(
serie
);
};
};
...
@@ -182,52 +183,53 @@ var Highchart = function(){
...
@@ -182,52 +183,53 @@ var Highchart = function(){
}; */
}; */
// 多条报警线
// 多条报警线
for
(
var
item
of
levelDist
)
{
for
(
var
item
of
levelDist
)
{
item
.
value
=
value
[
item
.
color
];
item
.
value
=
value
[
item
.
color
];
alarmLine
[
item
.
color
]
=
item
;
alarmLine
[
item
.
color
]
=
item
;
};
};
// add
// add
for
(
var
key
in
alarmLine
)
{
for
(
var
key
in
alarmLine
)
{
var
line
=
alarmLine
[
key
];
var
line
=
alarmLine
[
key
];
line
.
value
>
maxAlarm
&&
(
maxAlarm
=
line
.
value
);
line
.
value
>
maxAlarm
&&
(
maxAlarm
=
line
.
value
);
setAlarmSerie
(
line
.
value
,
line
.
name
,
line
.
color
);
setAlarmSerie
(
line
.
value
,
line
.
name
,
line
.
color
);
direction
&&
setAlarmSerie
(
0
-
line
.
value
,
line
.
name
,
line
.
color
);
direction
&&
setAlarmSerie
(
0
-
line
.
value
,
line
.
name
,
line
.
color
);
};
};
};
};
return
{
series
,
maxAlarm
};
return
{
series
,
maxAlarm
};
};
};
var
addAlarmLine
=
function
(
alarms
,
list
,
series
,
direction
)
{
var
addAlarmLine
=
function
(
alarms
,
list
,
series
,
direction
)
{
var
xLength
=
(
list
||
[]).
length
;
var
xLength
=
(
list
||
[]).
length
;
if
(
alarms
&&
xLength
)
{
if
(
alarms
&&
xLength
)
{
var
value
=
alarms
.
value
;
var
value
=
alarms
.
value
;
// discern
// discern
var
levelDist
=
[
var
levelDist
=
[
{
color
:
'
red
'
,
name
:
'
红色报警线
'
},
{
color
:
'
red
'
,
name
:
'
红色报警线
'
},
{
color
:
'
orange
'
,
name
:
'
橙色报警线
'
},
{
color
:
'
orange
'
,
name
:
'
橙色报警线
'
},
{
color
:
'
yellow
'
,
name
:
'
黄色报警线
'
},
{
color
:
'
yellow
'
,
name
:
'
黄色报警线
'
},
{
color
:
'
blue
'
,
name
:
'
蓝色报警线
'
}],
{
color
:
'
blue
'
,
name
:
'
蓝色报警线
'
}],
alarmLine
=
{},
setAlarmSerie
=
function
(
value
,
name
,
color
){
alarmLine
=
{},
setAlarmSerie
=
function
(
value
,
name
,
color
)
{
var
serie
=
{
name
:
name
,
type
:
'
spline
'
,
data
:[{
x
:
0
,
y
:
value
},
{
x
:
xLength
,
y
:
value
}],
color
:
color
,
var
serie
=
{
name
:
name
,
type
:
'
spline
'
,
data
:
[{
x
:
0
,
y
:
value
},
{
x
:
xLength
,
y
:
value
}],
color
:
color
,
//enableMouseTracking:false,
//enableMouseTracking:false,
legend
:
false
,
legend
:
false
,
showInLegend
:
false
,
showInLegend
:
false
,
dashStyle
:
'
ShortDot
'
,
dashStyle
:
'
ShortDot
'
,
states
:{
states
:
{
inactive
:{
inactive
:
{
opacity
:
1
opacity
:
1
},
},
},
},
};
};
series
.
push
(
serie
);
series
.
push
(
serie
);
};
};
for
(
var
item
of
levelDist
)
{
for
(
var
item
of
levelDist
)
{
var
value
=
alarms
[
item
.
color
]
*
1
;
var
value
=
alarms
[
item
.
color
]
*
1
;
if
(
value
)
{
if
(
value
)
{
setAlarmSerie
(
value
,
item
.
name
,
item
.
color
);
setAlarmSerie
(
value
,
item
.
name
,
item
.
color
);
direction
&&
setAlarmSerie
(
0
-
value
,
item
.
name
,
item
.
color
);
direction
&&
setAlarmSerie
(
0
-
value
,
item
.
name
,
item
.
color
);
};
};
};
};
};
};
...
@@ -235,22 +237,22 @@ var Highchart = function(){
...
@@ -235,22 +237,22 @@ var Highchart = function(){
};
};
var
template
=
{
var
template
=
{
pie
:
function
(
el
,
data
,
opts
)
{
pie
:
function
(
el
,
data
,
opts
)
{
var
chartData
=
formatChartData
(
data
,
opts
);
var
chartData
=
formatChartData
(
data
,
opts
);
var
seriesData
=
chartData
.
seriesData
;
var
seriesData
=
chartData
.
seriesData
;
return
new
Highcharts
.
chart
(
el
,
{
return
new
Highcharts
.
chart
(
el
,
{
chart
:
{
chart
:
{
backgroundColor
:
'
transparent
'
,
backgroundColor
:
'
transparent
'
,
//spacing:[0, 0 , 0, 0]
//spacing:[0, 0 , 0, 0]
},
},
title
:
{
title
:
{
floating
:
true
,
floating
:
true
,
text
:
'
总数<br/>
'
+
chartData
.
sum
,
text
:
'
总数<br/>
'
+
chartData
.
sum
,
verticalAlign
:
'
middle
'
,
verticalAlign
:
'
middle
'
,
y
:
22
,
y
:
22
,
floating
:
true
,
floating
:
true
,
style
:{
style
:
{
color
:
'
#00f6ff
'
,
color
:
'
#00f6ff
'
,
}
}
},
},
tooltip
:
{
tooltip
:
{
...
@@ -260,12 +262,12 @@ var Highchart = function(){
...
@@ -260,12 +262,12 @@ var Highchart = function(){
pie
:
{
pie
:
{
allowPointSelect
:
true
,
allowPointSelect
:
true
,
borderWidth
:
0
,
borderWidth
:
0
,
minSize
:
130
,
minSize
:
130
,
//size:200,
//size:200,
cursor
:
'
pointer
'
,
cursor
:
'
pointer
'
,
dataLabels
:
{
dataLabels
:
{
enabled
:
true
,
enabled
:
true
,
distance
:
10
,
distance
:
10
,
format
:
'
<b>{point.name}</b>: {point.percentage:.1f} %
'
,
format
:
'
<b>{point.name}</b>: {point.percentage:.1f} %
'
,
style
:
{
style
:
{
color
:
(
Highcharts
.
theme
&&
Highcharts
.
theme
.
contrastTextColor
)
||
'
black
'
color
:
(
Highcharts
.
theme
&&
Highcharts
.
theme
.
contrastTextColor
)
||
'
black
'
...
@@ -282,7 +284,7 @@ var Highchart = function(){
...
@@ -282,7 +284,7 @@ var Highchart = function(){
name
:
'
设备数量
'
,
name
:
'
设备数量
'
,
data
:
seriesData
data
:
seriesData
}]
}]
},
function
(
c
)
{
// 图表初始化完毕后的会掉函数
},
function
(
c
)
{
// 图表初始化完毕后的会掉函数
/* // 环形图圆心
/* // 环形图圆心
var centerY = c.series[0].center[1],
var centerY = c.series[0].center[1],
titleHeight = parseInt(c.title.styles.fontSize);
titleHeight = parseInt(c.title.styles.fontSize);
...
@@ -305,15 +307,15 @@ var Highchart = function(){
...
@@ -305,15 +307,15 @@ var Highchart = function(){
* @updatetime: 2022/1/11
* @updatetime: 2022/1/11
* @createtime: 2022/1/11
* @createtime: 2022/1/11
*/
*/
high
:
function
(
el
,
data
,
opts
)
{
high
:
function
(
el
,
data
,
opts
)
{
var
list
=
data
.
list
;
var
list
=
data
.
list
;
data
.
chartType
=
data
.
range
===
'
month
'
?
'
line
'
:
'
column
'
;
data
.
chartType
=
data
.
range
===
'
month
'
?
'
line
'
:
'
column
'
;
var
chartConfig
=
opts
.
chartConfig
||
{};
var
chartConfig
=
opts
.
chartConfig
||
{};
var
chartData
,
categories
=
[],
series
=
[],
maxVal
=
null
;
var
chartData
,
categories
=
[],
series
=
[],
maxVal
=
null
;
if
(
opts
.
isSeriesData
)
{
if
(
opts
.
isSeriesData
)
{
}
else
{
}
else
{
chartData
=
seriesDataFormat
(
data
,
{});
chartData
=
seriesDataFormat
(
data
,
{});
categories
=
chartData
.
categories
;
categories
=
chartData
.
categories
;
series
=
chartData
.
series
;
series
=
chartData
.
series
;
...
@@ -328,10 +330,10 @@ var Highchart = function(){
...
@@ -328,10 +330,10 @@ var Highchart = function(){
var
option
=
{
var
option
=
{
chart
:
{
chart
:
{
type
:
data
.
chartType
,
type
:
data
.
chartType
,
backgroundColor
:
'
transparent
'
,
backgroundColor
:
'
transparent
'
,
//marginTop:30,
//marginTop:30,
marginBottom
:
22
,
marginBottom
:
22
,
marginLeft
:
30
,
marginLeft
:
30
,
},
},
title
:
{
title
:
{
text
:
''
text
:
''
...
@@ -342,17 +344,17 @@ var Highchart = function(){
...
@@ -342,17 +344,17 @@ var Highchart = function(){
xAxis
:
{
xAxis
:
{
type
:
'
datetime
'
||
'
category
'
,
type
:
'
datetime
'
||
'
category
'
,
labels
:
{
labels
:
{
rotation
:
0
,
// 设置轴标签旋转角度
rotation
:
0
,
// 设置轴标签旋转角度
style
:{
style
:
{
color
:
'
#fff
'
color
:
'
#fff
'
},
},
y
:
15
,
y
:
15
,
},
},
categories
:
categories
[
0
]
&&
categories
,
categories
:
categories
[
0
]
&&
categories
,
lineWidth
:
0
,
lineWidth
:
0
,
//lineColor:'#ff0000',
//lineColor:'#ff0000',
gridLineColor
:
'
#aaa
'
,
gridLineColor
:
'
#aaa
'
,
tickLength
:
0
,
// 刻度线
tickLength
:
0
,
// 刻度线
dateTimeLabelFormats
:
{
dateTimeLabelFormats
:
{
millisecond
:
'
%H:%M:%S.%L
'
,
millisecond
:
'
%H:%M:%S.%L
'
,
...
@@ -369,16 +371,16 @@ var Highchart = function(){
...
@@ -369,16 +371,16 @@ var Highchart = function(){
title
:
{
title
:
{
text
:
''
text
:
''
},
},
labels
:{
labels
:
{
style
:{
style
:
{
color
:
'
#fff
'
color
:
'
#fff
'
},
},
x
:
-
6
,
x
:
-
6
,
},
},
gridLineColor
:
'
#0F5680
'
,
gridLineColor
:
'
#0F5680
'
,
//minorGridLineWidth: 5,
//minorGridLineWidth: 5,
//gridLineWidth: 5,
//gridLineWidth: 5,
max
:
opts
.
maxValDev
?
maxVal
+
maxVal
*
opts
.
maxValDev
:
null
,
max
:
opts
.
maxValDev
?
maxVal
+
maxVal
*
opts
.
maxValDev
:
null
,
},
},
plotOptions
:
{
plotOptions
:
{
column
:
{
column
:
{
...
@@ -386,7 +388,7 @@ var Highchart = function(){
...
@@ -386,7 +388,7 @@ var Highchart = function(){
//y:50,
//y:50,
//itemMarginTop:50,
//itemMarginTop:50,
},
},
bar
:{
bar
:
{
borderWidth
:
0
,
borderWidth
:
0
,
},
},
},
},
...
@@ -399,19 +401,19 @@ var Highchart = function(){
...
@@ -399,19 +401,19 @@ var Highchart = function(){
// 图例容器
// 图例容器
//width:'100%', // number || String
//width:'100%', // number || String
padding
:
2
,
// 内边距
padding
:
2
,
// 内边距
margin
:
2
,
margin
:
2
,
borderRadius
:
5
,
borderRadius
:
5
,
//borderWidth:1,
//borderWidth:1,
verticalAlign
:
'
top
'
,
verticalAlign
:
'
top
'
,
// 图例项
// 图例项
//itemWidth:120, // 宽度
//itemWidth:120, // 宽度
itemDistance
:
10
,
// 间距 20
itemDistance
:
10
,
// 间距 20
y
:
-
10
,
y
:
-
10
,
itemMarginTop
:
2
,
itemMarginTop
:
2
,
itemStyle
:
{
color
:
'
#fff
'
,
},
itemStyle
:
{
color
:
'
#fff
'
,
},
itemHoverStyle
:
{
color
:
'
#fff
'
,
},
itemHoverStyle
:
{
color
:
'
#fff
'
,
},
},
},
credits
:
{
credits
:
{
enabled
:
false
enabled
:
false
...
@@ -442,28 +444,28 @@ var Highchart = function(){
...
@@ -442,28 +444,28 @@ var Highchart = function(){
});
});
var
options
;
var
options
;
if
(
opts
.
isSeriesData
)
{
if
(
opts
.
isSeriesData
)
{
options
=
reversExtends
(
option
,
chartConfig
,
opts
.
callback
);
options
=
reversExtends
(
option
,
chartConfig
,
opts
.
callback
);
if
(
opts
.
type
===
"
t_10
"
)
{
if
(
opts
.
type
===
"
t_10
"
)
{
delete
options
.
legend
;
delete
options
.
legend
;
delete
options
.
xAxis
;
delete
options
.
xAxis
;
delete
options
.
yAxis
;
delete
options
.
yAxis
;
};
};
}
else
{
}
else
{
options
=
reversExtends
(
option
,
chartConfig
,
opts
.
callback
);
options
=
reversExtends
(
option
,
chartConfig
,
opts
.
callback
);
};
};
return
new
Highcharts
.
chart
(
el
,
options
);
return
new
Highcharts
.
chart
(
el
,
options
);
},
},
rich
:
function
(
el
,
data
,
opts
)
{
rich
:
function
(
el
,
data
,
opts
)
{
var
list
=
data
.
list
;
var
list
=
data
.
list
;
var
chartConfig
=
opts
.
chartConfig
||
{};
var
chartConfig
=
opts
.
chartConfig
||
{};
var
chartData
,
categories
=
[],
series
=
[],
maxVal
=
null
,
unit
=
data
.
danwei
;
var
chartData
,
categories
=
[],
series
=
[],
maxVal
=
null
,
unit
=
data
.
danwei
;
if
(
opts
.
isSeriesData
)
{
if
(
opts
.
isSeriesData
)
{
}
else
{
}
else
{
chartData
=
seriesDataFormat
(
data
,
{
datekey
:
'
date
'
});
chartData
=
seriesDataFormat
(
data
,
{
datekey
:
'
date
'
});
categories
=
chartData
.
categories
;
categories
=
chartData
.
categories
;
series
=
chartData
.
series
;
series
=
chartData
.
series
;
};
};
...
@@ -473,16 +475,21 @@ var Highchart = function(){
...
@@ -473,16 +475,21 @@ var Highchart = function(){
// add alarm line
// add alarm line
var
option
=
{
var
option
=
{
valEnabled
:
true
,
valEnabled
:
true
,
opacity
:
1
,
opacity
:
1
,
lineWidth
:
3
,
lineWidth
:
3
,
};
};
data
.
alarm
.
value
.
red
=
parseFloat
(
data
.
alarm
.
value
.
red
);
data
.
alarm
.
value
.
orange
=
parseFloat
(
data
.
alarm
.
value
.
orange
);
data
.
alarm
.
value
.
blue
=
parseFloat
(
data
.
alarm
.
value
.
blue
);
data
.
alarm
.
value
.
yellow
=
parseFloat
(
data
.
alarm
.
value
.
yellow
);
var
alarmData
=
discernValidAlarmValue
(
data
.
alarm
,
data
.
lists
,
series
,
warningLine
,
option
);
var
alarmData
=
discernValidAlarmValue
(
data
.
alarm
,
data
.
lists
,
series
,
warningLine
,
option
);
console
.
log
(
alarmData
,
"
ala
"
)
console
.
log
(
alarmData
,
"
ala
"
)
var
option
=
{
var
option
=
{
chart
:
{
chart
:
{
//type: '',
//type: '',
backgroundColor
:
'
transparent
'
,
backgroundColor
:
'
transparent
'
,
//marginTop:30,
//marginTop:30,
//marginBottom:30,
//marginBottom:30,
//marginLeft:30,
//marginLeft:30,
...
@@ -494,16 +501,16 @@ var Highchart = function(){
...
@@ -494,16 +501,16 @@ var Highchart = function(){
subtitle
:
{
subtitle
:
{
text
:
''
text
:
''
},
},
tooltip
:{
tooltip
:
{
enabled
:
false
,
enabled
:
false
,
borderWidth
:
10
,
borderWidth
:
10
,
},
},
xAxis
:
{
xAxis
:
{
type
:
'
datetime
'
,
type
:
'
datetime
'
,
categories
:
categories
[
0
]
&&
categories
,
categories
:
categories
[
0
]
&&
categories
,
lineWidth
:
0
,
lineWidth
:
0
,
//lineColor:'#ff0000',
//lineColor:'#ff0000',
gridLineColor
:
'
#aaa
'
,
gridLineColor
:
'
#aaa
'
,
dateTimeLabelFormats
:
{
dateTimeLabelFormats
:
{
millisecond
:
'
%H:%M:%S.%L
'
,
millisecond
:
'
%H:%M:%S.%L
'
,
...
@@ -520,11 +527,11 @@ var Highchart = function(){
...
@@ -520,11 +527,11 @@ var Highchart = function(){
title
:
{
title
:
{
text
:
''
text
:
''
},
},
labels
:{
labels
:
{
x
:
-
6
,
x
:
-
6
,
},
},
gridLineColor
:
'
#aaa
'
,
gridLineColor
:
'
#aaa
'
,
max
:
null
,
max
:
null
,
},
},
plotOptions
:
{
plotOptions
:
{
column
:
{
column
:
{
...
@@ -532,7 +539,7 @@ var Highchart = function(){
...
@@ -532,7 +539,7 @@ var Highchart = function(){
//y:50,
//y:50,
//itemMarginTop:50,
//itemMarginTop:50,
},
},
bar
:{
bar
:
{
borderWidth
:
0
,
borderWidth
:
0
,
},
},
},
},
...
@@ -540,7 +547,7 @@ var Highchart = function(){
...
@@ -540,7 +547,7 @@ var Highchart = function(){
// {point.y:.4f} // 保留4位小数
// {point.y:.4f} // 保留4位小数
//headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
//headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat
:
'
<tr><td style="color:{series.color};padding:0">{series.name}:</td>
'
+
pointFormat
:
'
<tr><td style="color:{series.color};padding:0">{series.name}:</td>
'
+
'
<td style="padding:0"><b>{point.y}
'
+
unit
+
'
</b> </td></tr>
'
,
'
<td style="padding:0"><b>{point.y}
'
+
unit
+
'
</b> </td></tr>
'
,
footerFormat
:
'
</table>
'
,
footerFormat
:
'
</table>
'
,
shared
:
true
,
shared
:
true
,
useHTML
:
true
,
useHTML
:
true
,
...
@@ -564,19 +571,19 @@ var Highchart = function(){
...
@@ -564,19 +571,19 @@ var Highchart = function(){
// 图例容器
// 图例容器
//width:'100%', // number || String
//width:'100%', // number || String
padding
:
2
,
// 内边距
padding
:
2
,
// 内边距
margin
:
2
,
margin
:
2
,
borderRadius
:
5
,
borderRadius
:
5
,
//borderWidth:1,
//borderWidth:1,
verticalAlign
:
'
top
'
,
verticalAlign
:
'
top
'
,
// 图例项
// 图例项
//itemWidth:120, // 宽度
//itemWidth:120, // 宽度
itemDistance
:
10
,
// 间距 20
itemDistance
:
10
,
// 间距 20
y
:
-
10
,
y
:
-
10
,
itemMarginTop
:
2
,
itemMarginTop
:
2
,
itemStyle
:{},
itemStyle
:
{},
itemHoverStyle
:{},
itemHoverStyle
:
{},
},
},
credits
:
{
credits
:
{
enabled
:
false
enabled
:
false
...
@@ -588,41 +595,41 @@ var Highchart = function(){
...
@@ -588,41 +595,41 @@ var Highchart = function(){
global
:
{
global
:
{
useUTC
:
false
useUTC
:
false
},
},
lang
:{
lang
:
{
resetZoom
:
'
重置缩放比例
'
,
resetZoom
:
'
重置缩放比例
'
,
},
},
});
});
var
options
;
var
options
;
if
(
opts
.
isSeriesData
)
{
if
(
opts
.
isSeriesData
)
{
options
=
reversExtends
(
option
,
chartConfig
,
opts
.
callback
);
options
=
reversExtends
(
option
,
chartConfig
,
opts
.
callback
);
if
(
opts
.
type
===
"
t_10
"
)
{
if
(
opts
.
type
===
"
t_10
"
)
{
delete
options
.
legend
;
delete
options
.
legend
;
delete
options
.
xAxis
;
delete
options
.
xAxis
;
delete
options
.
yAxis
;
delete
options
.
yAxis
;
};
};
}
else
{
}
else
{
options
=
reversExtends
(
option
,
chartConfig
,
opts
.
callback
);
options
=
reversExtends
(
option
,
chartConfig
,
opts
.
callback
);
};
};
return
new
Highcharts
.
chart
(
el
,
options
);
return
new
Highcharts
.
chart
(
el
,
options
);
},
},
};
};
var
getRandomColor
=
function
(
random
)
{
var
getRandomColor
=
function
(
random
)
{
if
(
random
===
true
)
{
if
(
random
===
true
)
{
return
'
rgb(
'
+
[
Math
.
round
(
Math
.
random
()
*
160
),
Math
.
round
(
Math
.
random
()
*
160
),
Math
.
round
(
Math
.
random
()
*
160
)].
join
(
'
,
'
)
+
'
)
'
;
return
'
rgb(
'
+
[
Math
.
round
(
Math
.
random
()
*
160
),
Math
.
round
(
Math
.
random
()
*
160
),
Math
.
round
(
Math
.
random
()
*
160
)].
join
(
'
,
'
)
+
'
)
'
;
}
else
{
}
else
{
var
colors
=
[
'
#7CB5EC
'
,
'
#434348
'
,
'
#90ED7D
'
,
'
#F7A35C
'
,
'
#8085E9
'
,
'
#F15C80
'
,
'
#E4D354
'
,
'
#2B908F
'
,
'
#F45B5B
'
,
'
#91E8E1
'
,
'
#0769CB
'
,
'
#00ABBD
'
,
'
#ffd886
'
,
"
#9F2E61
"
,
"
#4D670C
"
];
var
colors
=
[
'
#7CB5EC
'
,
'
#434348
'
,
'
#90ED7D
'
,
'
#F7A35C
'
,
'
#8085E9
'
,
'
#F15C80
'
,
'
#E4D354
'
,
'
#2B908F
'
,
'
#F45B5B
'
,
'
#91E8E1
'
,
'
#0769CB
'
,
'
#00ABBD
'
,
'
#ffd886
'
,
"
#9F2E61
"
,
"
#4D670C
"
];
if
(
typeof
random
===
'
number
'
)
{
if
(
typeof
random
===
'
number
'
)
{
return
colors
[
~~
random
];
return
colors
[
~~
random
];
}
else
{
}
else
{
return
colors
[
~~
(
Math
.
random
()
*
colors
.
length
)];
return
colors
[
~~
(
Math
.
random
()
*
colors
.
length
)];
};
};
};
};
};
};
return
{
return
{
template
:
template
,
getRandomColor
:
getRandomColor
template
:
template
,
getRandomColor
:
getRandomColor
}
}
};
};
...
...
src/assets/js/httpApi.js
View file @
4024190e
...
@@ -1057,7 +1057,7 @@ var reqApis = function () {
...
@@ -1057,7 +1057,7 @@ var reqApis = function () {
var
that
=
this
;
var
that
=
this
;
qf
.
UI
.
popupLayer
({
qf
.
UI
.
popupLayer
({
//title:'<div>标题</div>',
//title:'<div>标题</div>',
html
:
'
<div style="width:13.
4
rem;"></div>
'
,
html
:
'
<div style="width:13.
5
rem;"></div>
'
,
onload
:
function
(
el
)
{
onload
:
function
(
el
)
{
var
box
=
el
.
firstElementChild
;
var
box
=
el
.
firstElementChild
;
var
btngroub
=
'
<div style="margin:0 2px 0 25px;color:#E6A23C;">当前:</div><div class="el-button-group"><button data-id="1" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">1小时</button><button data-id="3" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">3小时</button><button data-id="6" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">6小时</button><button data-id="12" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">12小时</button><button data-id="24" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">24小时</button></div>
'
;
var
btngroub
=
'
<div style="margin:0 2px 0 25px;color:#E6A23C;">当前:</div><div class="el-button-group"><button data-id="1" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">1小时</button><button data-id="3" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">3小时</button><button data-id="6" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">6小时</button><button data-id="12" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">12小时</button><button data-id="24" class="el-button el-button--primary el-button--small cu-btn cu-btn-null">24小时</button></div>
'
;
...
@@ -1120,7 +1120,6 @@ var reqApis = function () {
...
@@ -1120,7 +1120,6 @@ var reqApis = function () {
tag
.
classList
.
remove
(
'
cu-btn-null
'
);
tag
.
classList
.
remove
(
'
cu-btn-null
'
);
box
.
tagBtn
=
tag
;
box
.
tagBtn
=
tag
;
query
.
hours
=
~~
tag
.
dataset
.
id
;
query
.
hours
=
~~
tag
.
dataset
.
id
;
console
.
log
(
query
.
hours
,
'
hhhhh
'
)
that
.
pageApi
.
reqchart
(
query
).
then
((
res
)
=>
{
that
.
pageApi
.
reqchart
(
query
).
then
((
res
)
=>
{
var
body
=
res
.
body
||
[];
var
body
=
res
.
body
||
[];
if
(
query
.
hours
==
1
)
{
if
(
query
.
hours
==
1
)
{
...
@@ -1128,16 +1127,16 @@ var reqApis = function () {
...
@@ -1128,16 +1127,16 @@ var reqApis = function () {
let
valList
=
rainData
.
map
(
item
=>
{
let
valList
=
rainData
.
map
(
item
=>
{
return
Number
(
item
.
values
.
rainfall
)
return
Number
(
item
.
values
.
rainfall
)
})
})
console
.
log
(
valList
,
'
valList
'
)
let
num
=
valList
.
reduce
(
function
(
total
,
value
)
{
let
num
=
valList
.
reduce
(
function
(
total
,
value
)
{
return
total
+
value
;
return
total
+
value
;
},
0
);
},
0
);
num
=
num
.
toFixed
(
2
)
num
=
num
.
toFixed
(
2
)
console
.
log
(
num
)
divID
.
innerHTML
=
"
降雨总量:
"
+
num
+
body
.
danwei
divID
.
innerHTML
=
"
降雨总量:
"
+
num
+
body
.
danwei
}
else
{
}
else
{
divID
.
innerHTML
=
''
divID
.
innerHTML
=
''
}
}
chartOpts
.
cache
=
Highchart
.
template
.
rich
.
call
(
that
,
chartEl
,
body
,
chartOpts
);
})
})
}
else
if
(
tag
.
classList
.
contains
(
'
switch
'
))
{
}
else
if
(
tag
.
classList
.
contains
(
'
switch
'
))
{
chartOpts
.
cache
.
update
({
chart
:
{
type
:
tag
.
dataset
.
type
}
})
chartOpts
.
cache
.
update
({
chart
:
{
type
:
tag
.
dataset
.
type
}
})
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment