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
a5cfff36
Commit
a5cfff36
authored
Aug 01, 2023
by
Kimber
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
'update'
parent
77b91064
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
22 additions
and
3 deletions
+22
-3
httpApi.js
src/assets/js/httpApi.js
+21
-2
index.vue
src/views/Screen/index.vue
+1
-1
No files found.
src/assets/js/httpApi.js
View file @
a5cfff36
...
...
@@ -648,8 +648,16 @@ var reqApis = function () {
"
code
"
:
{
name
:
"
剖面编号
"
,
must
:
true
,
},
"
height
"
:
{
name
:
"
剖面高度(m)
"
,
must
:
true
,
default
:
100
},
"
width
"
:
{
name
:
"
剖面宽度(m)
"
,
must
:
true
,
default
:
100
},
"
sdeg
"
:
{
name
:
"
水区扇形起始角(默认为10)
"
,
must
:
true
,
default
:
10
},
"
diameter
"
:
{
name
:
"
绘制直径(默认为2)
"
,
must
:
true
,
default
:
2
},
"
type
"
:
{
name
:
"
图表类型
"
,
type
:
'
radio
'
,
must
:
true
,
default
:
'
arcdiagram
'
,
key
:
'
name
'
,
val
:
'
value
'
,
change
:
function
(
val
,
item
)
{
var
Dict
=
this
.
Dict
,
info
=
Dict
.
baseInfo
;
var
flag
=
~~
(
val
===
'
arcdiagram
'
);
info
.
sdeg
.
form
=
flag
;
info
.
diameter
.
form
=
flag
;
}
},
"
sdeg
"
:
{
name
:
"
水区扇形起始角(默认为10)
"
,
must
:
true
,
default
:
10
,
form
:
1
},
"
diameter
"
:
{
name
:
"
绘制直径(默认为2)
"
,
must
:
true
,
default
:
2
,
form
:
1
},
"
drys
"
:
{
name
:
"
关联设备
"
,
must
:
true
,
type
:
'
select
'
,
multiple
:
true
,
val
:
'
equipno
'
,
key
:
'
equipname
'
,
},
},
selectList
:
{
...
...
@@ -658,6 +666,10 @@ var reqApis = function () {
return
res
.
body
||
[]
});
},
type
:[
{
name
:
'
弧形图
'
,
value
:
'
arcdiagram
'
,},
{
name
:
'
折线图
'
,
value
:
'
polyxiadian
'
,},
],
},
},
config
:
{
...
...
@@ -668,6 +680,10 @@ var reqApis = function () {
buttons
:
[
{
'
type
'
:
'
primary
'
,
'
icon
'
:
'
el-icon-edit
'
,
'
callback
'
:
function
(
item
)
{
var
Dict
=
this
.
Dict
,
info
=
Dict
.
baseInfo
;
var
flag
=
~~
(
item
.
type
===
'
arcdiagram
'
);
info
.
sdeg
.
form
=
flag
;
info
.
diameter
.
form
=
flag
;
item
=
Object
.
assign
({},
item
);
reqApi
.
common
.
toEdit
.
call
(
this
.
$parent
,
item
);
}
...
...
@@ -681,6 +697,9 @@ var reqApis = function () {
otherBtn
:
[
{
type
:
'
primary
'
,
icon
:
'
el-icon-plus
'
,
name
:
'
添加剖面
'
,
'
callback
'
:
function
()
{
var
Dict
=
this
.
Dict
,
info
=
Dict
.
baseInfo
;
info
.
sdeg
.
form
=
1
;
info
.
diameter
.
form
=
1
;
reqApi
.
common
.
toAdd
.
call
(
this
);
}
},
...
...
src/views/Screen/index.vue
View file @
a5cfff36
...
...
@@ -616,7 +616,7 @@ export default {
},
cuCharts
(
ctn
,
data
,
opts
){
var
cuCharts
=
function
(
ctn
,
data
,
opts
){
var
ctn
=
this
.
ctn
=
typeof
element
===
"
string
"
?
document
.
getElementById
(
ctn
):
ctn
;
if
(
!
ctn
)
return
console
.
log
(
'
%c cuCharts Error Element is a invalid param!
'
,
'
color:red
'
);
var
self
=
this
,
setDpr
=
1
;
var
dpr
=
window
.
devicePixelRatio
||
qf
.
envir
.
dpr
;
self
.
dpr
=
dpr
*
setDpr
;
self
.
Cache
=
{};
!
ctn
.
style
.
position
&&
(
ctn
.
style
.
position
=
'
relative
'
);
var
canvas
=
this
.
canvas
=
document
.
createElement
(
"
canvas
"
);
canvas
.
style
.
cssText
=
'
position:absolute;height:100%;width:100%;
'
;
this
.
ctx
=
canvas
.
getContext
(
"
2d
"
);
ctn
.
appendChild
(
canvas
);
var
defaults
=
this
.
defaults
=
{
altitude
:
1000
,
damHeight
:
data
.
dissect
.
height
||
100
,
damWidth
:
data
.
dissect
.
width
||
100
,
axisLineWidth
:
6
,
axisColor
:
'
red
'
,
margin
:{
top
:
14
,
right
:
0
,
bottom
:
0
,
left
:
18
},};
var
left
=
defaults
.
margin
.
left
*
this
.
dpr
,
top
=
defaults
.
margin
.
top
*
this
.
dpr
,
right
=
defaults
.
margin
.
right
*
this
.
dpr
,
bottom
=
defaults
.
margin
.
bottom
*
this
.
dpr
;
this
.
ladders
=
data
.
steps
||
[];
this
.
devices
=
this
.
formatDeviceParam
(
data
.
devices
);
var
ladderInfo
=
this
.
discernDamHeight
(
this
.
ladders
);
this
.
options
=
{
damWidth
:
defaults
.
damWidth
,
damHeight
:
ladderInfo
.
damHeight
,
axisLineWidth
:
defaults
.
axisLineWidth
||
6
,
stepAverageHeight
:
ladderInfo
.
averageHeight
,
initX
:
defaults
.
margin
.
left
*
dpr
+
(
defaults
.
axisLineWidth
/
2
),
initY
:
defaults
.
margin
.
top
*
dpr
,
bottomDist
:
defaults
.
margin
.
bottom
*
dpr
,
rightDist
:
defaults
.
margin
.
right
*
dpr
,
waterArea
:{
startAngle
:
data
.
dissect
.
sdeg
,
radius
:
data
.
dissect
.
diameter
},
alarm
:
data
.
alarm
,
axisLineWidth
:
opts
.
axisLineWidth
||
defaults
.
axisLineWidth
,
axisColor
:
opts
.
axisColor
||
defaults
.
axisColor
,
};
this
.
init
()};
cuCharts
.
prototype
=
{
init
:
function
(){
this
.
setModule
();
this
.
onresize
()},
drawAxis
:
function
(
color
,
damHeight
){
var
lw
=
this
.
options
.
axisLineWidth
;
var
wHalf
=
lw
/
2
;
var
initX
=
this
.
options
.
initX
;
var
endX
=
this
.
options
.
endX
;
var
endY
=
this
.
options
.
endY
;
var
axisYSX
=
initX
-
wHalf
;
var
axisXEY
=
endY
+
lw
;
var
axisYEY
=
endY
+
wHalf
;
this
.
drawLiner
({
sx
:
axisYSX
,
sy
:
0
,
ex
:
axisYSX
,
ey
:
axisXEY
,
width
:
lw
,
color
:
color
});
var
fontY
=~~
(
this
.
options
.
damPxHeight
/
2
+
this
.
options
.
initY
);
var
fontSize
=
12
;
var
axisXText
=
'
剖面高度
'
+~~
damHeight
+
'
米
'
;
this
.
drawText
({
x
:
this
.
options
.
initY
/
2
+
2
,
y
:
fontY
,
size
:
fontSize
,
width
:
fontSize
*
this
.
dpr
,
text
:
axisXText
,
color
:
'
#fff
'
,
align
:
'
center
'
,
vertical
:
'
center
'
,});
this
.
drawLiner
({
sx
:
initX
,
sy
:
axisYEY
,
ex
:
endX
,
ey
:
axisYEY
,
width
:
lw
,
color
:
color
})},
drawSteps
:
function
(
ladders
){
ladders
=
ladders
||
[
0
];
var
initX
=
this
.
options
.
initX
,
initY
=
this
.
options
.
initY
;
var
cumulationX
=
initX
,
cumulationY
=
initY
;
var
damLength
=
this
.
options
.
endX
;
var
damDepth
=
this
.
options
.
endY
;
var
pxRetioY
=
this
.
options
.
pxRetioY
;
var
averageHeight
=
this
.
options
.
stepAverageHeight
*
pxRetioY
;
var
damPxWidth
=
this
.
options
.
damPxWidth
;
var
damPxHeight
=
this
.
options
.
damPxHeight
;
var
len
=
ladders
.
length
;
var
stepWidth
=
damPxWidth
/
(
len
+
0
);
var
stepHeight
=
damPxHeight
/
(
len
+
0
);
var
slopeRatio
=
damPxHeight
/
damPxWidth
;
var
maxStepDepth
=
{
ratio
:
slopeRatio
};
this
.
Cache
.
ladders
=
[];
for
(
var
i
=
0
;
i
<
len
;
i
++
){
var
item
=
ladders
[
i
];
var
setWidth
=
item
.
width
*
this
.
dpr
*
this
.
options
.
pxRetioX
;
var
setHeight
=
item
.
height
*
pxRetioY
||
averageHeight
;
var
slope
=
item
.
slope
||
0
;
var
aCoord
=
this
.
byAngleAndHeightToCoord
(
slope
,
setHeight
);
var
fEndX
,
fEndY
;
if
(
setWidth
){
fEndX
=
cumulationX
+
setWidth
;
stepWidth
=
(
damLength
-
(
cumulationX
+
setWidth
+
aCoord
.
x
*
this
.
dpr
))
/
(
len
-
(
i
+
1
))}
else
{
fEndX
=
cumulationX
+
(
stepWidth
-
aCoord
.
x
*
this
.
dpr
)};
if
(
setHeight
){
fEndY
=
cumulationY
+
setHeight
;
stepHeight
=
(
damDepth
-
(
cumulationY
+
setHeight
))
/
(
len
-
(
i
+
1
))}
else
{
fEndY
=
cumulationY
+
stepHeight
};
var
lEndX
=
fEndX
+
aCoord
.
x
*
this
.
dpr
,
lEndY
=
fEndY
+
aCoord
.
y
*
this
.
dpr
;
var
stepDepthRatio
=
(
damDepth
-~~
lEndY
)
/
(
damLength
-
lEndX
);
if
(
stepDepthRatio
&&
stepDepthRatio
<
maxStepDepth
.
ratio
&&
i
<
len
-
1
){
maxStepDepth
=
{
ratio
:
stepDepthRatio
,
x
:
lEndX
,
y
:
lEndY
,}};
this
.
drawLiner
({
sx
:
cumulationX
,
sy
:
cumulationY
,
ex
:
fEndX
,
ey
:
cumulationY
,
width
:
2
,
color
:
"
#8b8b8b
"
});
this
.
drawLiner
({
sx
:
fEndX
,
sy
:
cumulationY
,
ex
:
lEndX
,
ey
:
lEndY
,
width
:
2
,
color
:
"
#8b8b8b
"
});
this
.
Cache
.
ladders
[
i
]
=
{
sx
:
cumulationX
,
sy
:
cumulationY
,
ex
:
fEndX
,
ey
:
cumulationY
,
slope
:
slope
,
slopeX
:
lEndX
,
slopeY
:
lEndY
,
xy
:
aCoord
.
xy
};
cumulationX
=
lEndX
;
cumulationY
=
lEndY
};
this
.
drawLiner
({
sx
:
cumulationX
,
sy
:
cumulationY
,
ex
:
damLength
,
ey
:
damDepth
,
width
:
2
,
color
:
"
#8b8b8b
"
});
var
damHeight
=
(
cumulationY
-
this
.
options
.
initY
)
/
pxRetioY
;
return
maxStepDepth
.
damHeight
=
damHeight
,
maxStepDepth
},
drawDevice
:
function
(
list
){
var
lineW
=
4
*
this
.
dpr
,
deviceW
=
6
*
this
.
dpr
,
deviceH
=
3
*
this
.
dpr
;
var
initX
=
this
.
options
.
initX
;
var
endX
=
this
.
options
.
endX
;
var
endY
=
this
.
options
.
endY
;
var
ladders
=
this
.
Cache
.
ladders
||
[];
var
fontSize
=
11
;
var
fontTopDev
=
fontSize
*
this
.
dpr
+
3
;
this
.
options
.
deviceCoords
=
[];
for
(
var
device
of
list
){
var
holeX
=~~
(
endX
-
device
.
x
*
this
.
options
.
pxRetioX
);
var
depthText
=
'
埋深
'
+
device
.
depth
+
'
米
'
;
var
holeDistY
=
device
.
holeDepth
*
this
.
options
.
pxRetioY
;
var
deviceY
=
device
.
value
*
this
.
options
.
pxRetioY
;
var
ladderSY
=
this
.
xPixelToStepsYPixel
(
holeX
);
this
.
drawText
({
x
:
holeX
,
y
:
ladderSY
-
fontTopDev
,
size
:
fontSize
,
text
:
depthText
,
color
:
'
red
'
,
align
:
'
center
'
,});
var
holeEndY
=
ladderSY
+
holeDistY
;
holeEndY
=
holeEndY
>
endY
?
endY
:
holeEndY
;
this
.
drawLiner
({
sx
:
holeX
,
sy
:
ladderSY
,
ex
:
holeX
,
ey
:
holeEndY
,
width
:
lineW
,
color
:
"
grey
"
});
var
deviceLY
=
ladderSY
+
deviceY
;
var
deviceEY
=
deviceLY
+
(
deviceH
/
2
);
var
deviceSY
=
deviceEY
-
deviceH
;
this
.
drawLiner
({
sx
:
holeX
,
sy
:
deviceSY
,
ex
:
holeX
,
ey
:
deviceEY
,
width
:
deviceW
,
color
:
"
#3403CB
"
});
this
.
options
.
deviceCoords
.
push
({
x
:
holeX
,
y
:
deviceLY
,
stepY
:
ladderSY
});
var
valFont
=
11
;
var
valueSY
=~~
(
deviceSY
-
valFont
*
this
.
dpr
-
6
);
var
text
=
'
水位值
'
+
device
.
waterValue
+
'
米
'
;
this
.
drawText
({
x
:
holeX
,
y
:
valueSY
,
size
:
valFont
,
text
:
text
,
color
:
'
white
'
,
align
:
'
center
'
,})}},
drawAlarmLine
:
function
(
alarms
,
Steps
){
var
alarmValues
=
alarms
.
value
;
var
alarmLevel
=
alarms
.
alarmLevel
;
var
deviceCoords
=
this
.
options
.
deviceCoords
||
[];
var
deviceSX
=
deviceCoords
[
0
].
x
;
var
deviceSY
=
deviceCoords
[
0
].
y
;
var
initX
=
this
.
options
.
initX
;
var
initY
=
this
.
options
.
initY
;
var
endY
=
this
.
options
.
endY
;
var
endX
=
this
.
options
.
endX
;
var
alarmLevelNum
=
[
'
red
'
,
'
orange
'
,
'
yellow
'
,
'
blue
'
]
||
Object
.
keys
(
alarmValues
);
var
alarmLine
=
{};
var
level
=
(
~~
alarmLevel
||
alarmLevelNum
.
length
+
1
)
-
1
;
var
nearLevel
=
level
?
level
-
1
:
level
;
var
alarm
=
alarmLevelNum
[
level
];
var
nearAlarm
=
alarmLevelNum
[
nearLevel
];
alarmLine
[
nearAlarm
]
=
alarmValues
[
nearAlarm
];
if
(
alarm
){
alarmLine
[
alarm
]
=
alarmValues
[
alarm
]};
var
alarmRealParam
=
this
.
getAlarmRealParam
(
Object
.
values
(
alarmLine
))
||
Steps
.
ratio
;
var
deviceSlopeRatio
=
alarmRealParam
.
ratio
;
for
(
var
key
in
alarmLine
){
var
value
=
alarmValues
[
key
];
if
(
key
){
var
ladderSY
=
this
.
xPixelToStepsYPixel
(
deviceSX
)
-
initX
+
6
;
var
lineSY
=
(
value
*
this
.
options
.
pxRetioY
+
ladderSY
)
-
(
deviceSX
-
initX
)
*
deviceSlopeRatio
;
var
lineEX
=
(
endY
-
lineSY
)
/
deviceSlopeRatio
;
this
.
drawLiner
({
sx
:
initX
,
sy
:
lineSY
+
initY
,
ex
:
lineEX
,
ey
:
endY
,
width
:
2
,
color
:
key
})}}},
getCirHeightDev
:
function
(
r
,
x
){
return
r
-
Math
.
sqrt
(
Math
.
pow
(
r
,
2
)
-
Math
.
pow
(
x
,
2
))},
drawWaterArea
:
function
(
depth
){
depth
=
100
;
var
startAngle
=
this
.
options
.
waterArea
.
startAngle
;
var
radiusMultiple
=
this
.
options
.
waterArea
.
radius
;
var
angleRatio
=
90
/
0.5
;
var
initArc
=
startAngle
/
angleRatio
;
var
ctx
=
this
.
ctx
,
initX
=
this
.
options
.
initX
;
var
arcOrigin
=
1.50
,
arcStart
=
arcOrigin
+
initArc
;
var
sAngle
=
(
arcStart
-
arcOrigin
)
*
angleRatio
;
var
r1
=
this
.
options
[
'
damPxWidth
'
]
*
radiusMultiple
;
var
waterApexToAxisXDist
=
Math
.
sin
(
sAngle
*
0.017453293
)
*
r1
;
var
sAngleToTopSpotDist
=
(
r1
-
(
Math
.
cos
(
sAngle
*
0.017453293
)
*
r1
));
var
depth
=
(
depth
||
30
)
*
this
.
options
.
pxRetioY
+
sAngleToTopSpotDist
;
var
firstDeviceX
=
this
.
devices
[
0
].
x
*
this
.
options
.
pxRetioX
;
var
ladderSY
=
this
.
xPixelToStepsYPixel
(
firstDeviceX
+
initX
)
-
initX
+
6
;
var
deviceToAxisXDist
=
firstDeviceX
+
waterApexToAxisXDist
;
var
deviceToAxisYDist
=
Math
.
sqrt
(
r1
*
r1
-
deviceToAxisXDist
*
deviceToAxisXDist
);
var
deviceAreaToApexDev
=
r1
-
deviceToAxisYDist
-
sAngleToTopSpotDist
-
ladderSY
;
var
firstDeviceY
=
this
.
options
.
damPxHeight
-
this
.
devices
[
0
].
value
*
this
.
options
.
pxRetioY
;
firstDeviceY
+=
deviceAreaToApexDev
;
var
ry
=
r1
+
this
.
options
.
endY
-
sAngleToTopSpotDist
-
firstDeviceY
;
var
lineToY
=
r1
-
sAngleToTopSpotDist
-
firstDeviceY
;
var
eAngle
=
Math
.
acos
(
lineToY
/
r1
)
/
0.017453293
;
var
arcEnd
=
eAngle
/
angleRatio
+
arcOrigin
;
ctx
.
beginPath
();
ctx
.
arc
(
initX
-
waterApexToAxisXDist
,
ry
,
r1
,
arcStart
*
Math
.
PI
,
arcEnd
*
Math
.
PI
,
false
);
ctx
.
lineTo
(
initX
,
ry
-
lineToY
);
ctx
.
fillStyle
=
'
#00A2E8
'
;
ctx
.
fill
()},
byAngleAndHeightToCoord
:
function
(
angle
,
height
){
var
devX
=
Math
.
tan
(
angle
*
0.017453293
)
*
height
;
var
xy
=
height
/
Math
.
cos
(
angle
*
0.017453293
);
var
devY
=
height
-
devX
;
var
yRatio
=
height
/
devX
;
var
x
=
0
,
y
=
0
;
if
(
angle
>
50
){
x
=
height
,
y
=
devY
*
yRatio
}
else
{
x
=
devX
,
y
=
0
};
return
{
x
:
x
,
y
:
y
,
xy
:
xy
}},
discernDamHeight
(
list
){
var
not
=
0
,
set
=
0
,
sum
=
0
;
for
(
var
item
of
list
){
var
height
=
item
.
height
;
height
?(
set
++
,
sum
+=
height
):
not
++
};
var
damHeight
=
not
?
this
.
defaults
.
damHeight
:
sum
;
var
averageHeight
=
(
damHeight
-
sum
)
/
not
;
return
{
averageHeight
:
averageHeight
,
damHeight
:
damHeight
}},
setModule
:
function
(){
this
.
ctx
.
clearRect
(
0
,
0
,
this
.
SumWidth
,
this
.
SumHeight
);
var
canvas
=
this
.
canvas
;
var
SumWidth
=
this
.
SumWidth
=
(
this
.
ctn
.
clientWidth
*
this
.
dpr
)
-
this
.
ctn
.
clientLeft
-
0
;
var
SumHeight
=
this
.
SumHeight
=
this
.
ctn
.
clientHeight
*
this
.
dpr
-
this
.
ctn
.
clientTop
-
0
;
canvas
.
width
=
SumWidth
*
this
.
dpr
;
canvas
.
height
=
SumHeight
*
this
.
dpr
;
canvas
.
style
.
cssText
=
'
position:absolute;top:0;left:0;height:
'
+
(
SumHeight
)
+
'
px;width:
'
+
SumWidth
+
'
px;user-select: none;-webkit-tap-highlight-color:rgba(0,0,0,0);padding:0;margin:0;border-width:0;box-sizing: border-box;
'
;
var
top
=
this
.
options
.
initY
,
left
=
this
.
options
.
initX
,
bottom
=
this
.
options
.
bottomDist
,
right
=
this
.
options
.
rightDist
;
var
damPxWidth
=
SumWidth
-
(
right
+
left
),
damPxHeight
=
SumHeight
-
(
bottom
+
top
+
this
.
options
.
axisLineWidth
),
endX
=
SumWidth
-
right
,
endY
=
SumHeight
-
bottom
-
this
.
options
.
axisLineWidth
;
this
.
options
[
'
endX
'
]
=
endX
;
this
.
options
[
'
endY
'
]
=
endY
;
this
.
options
[
'
damPxWidth
'
]
=
damPxWidth
;
this
.
options
[
'
damPxHeight
'
]
=
damPxHeight
;
this
.
options
[
'
pxRetioX
'
]
=
damPxWidth
/
this
.
defaults
.
damWidth
;
this
.
options
[
'
pxRetioY
'
]
=
damPxHeight
/
this
.
options
.
damHeight
;
this
.
options
[
'
HWRation
'
]
=
(
endY
-
top
)
/
(
endX
-
left
);
this
.
drawChart
()},
formatDeviceParam
:
function
(
devices
){
var
devices
=
devices
||
[];
var
arr
=
[];
for
(
var
item
of
devices
){
arr
.
push
({
x
:
item
.
jrx_coord_x
,
holeDepth
:
item
.
jrx_trepanning
,
value
:
item
.
depth
,
depth
:
item
.
jrx_burial
,
waterValue
:
item
.
stage
})};
return
arr
},
getAlarmRealParam
:
function
(
aValues
){
var
aval
=
aValues
[
0
];
var
coords
=
this
.
options
.
deviceCoords
||
[];
var
valY
=
aval
*
this
.
options
.
pxRetioY
;
var
sy
=
valY
+
coords
[
0
].
stepY
,
sx
=
coords
[
0
].
x
,
ey
=
0
,
ex
=
0
;
var
len
=
coords
.
length
;
for
(
var
i
=
1
;
i
<
len
;
i
++
){
var
item
=
coords
[
i
];
ey
=
valY
+
item
.
stepY
,
ex
=
item
.
x
};
return
{
ratio
:(
ey
-
sy
)
/
(
ex
-
sx
),
sy
:
sy
,
ey
:
ey
}},
drawChart
:
function
(){
var
Steps
=
this
.
drawSteps
(
this
.
ladders
);
this
.
drawAxis
(
this
.
options
.
axisColor
,
Steps
.
damHeight
);
var
depth
=
55
;
this
.
drawWaterArea
(
depth
);
this
.
drawDevice
(
this
.
devices
);
this
.
drawAlarmLine
(
this
.
options
.
alarm
,
Steps
)},
onresize
:
function
(){
qf
.
resize
(()
=>
{
this
.
setModule
()})},
updateData
:
function
(
data
){
data
=
data
||
{};
this
.
stations
=
data
.
stations
||
this
.
stations
;
this
.
points
=
data
.
points
||
this
.
points
;
this
.
draw
(
this
.
cacheX
+
this
.
destX
,
true
)},
drawLiner
:
function
(
o
){
var
ctx
=
this
.
ctx
;
ctx
.
beginPath
();
ctx
.
moveTo
(
o
.
sx
,
o
.
sy
);
ctx
.
lineTo
(
o
.
ex
,
o
.
ey
);
ctx
.
lineWidth
=
o
.
width
;
ctx
.
strokeStyle
=
o
.
color
;
ctx
.
stroke
()},
drawText
:
function
(
o
){
var
ctx
=
this
.
ctx
;
var
fontSize
=
(
o
.
size
||
14
)
*
this
.
dpr
;
var
text
=
o
.
text
||
''
;
var
textWidth
=
this
.
getTextWidth
(
text
,
fontSize
);
var
width
=
o
.
width
||
textWidth
;
var
align
=
o
.
align
||
'
normal
'
;
ctx
.
font
=
'
normal
'
+
fontSize
+
"
px 'Open Sans', 'PingFang SC', Helvetica, Arial, sans-serif
"
;
var
rows
=
[];
if
(
width
&&~~
width
<
textWidth
){
var
str
=
''
,
texts
=
text
.
split
(
""
);
for
(
var
word
of
texts
){
var
testStr
=
str
+
word
;
var
testWidth
=
ctx
.
measureText
(
testStr
).
width
;
if
(
testWidth
>
width
){
rows
.
push
(
str
);
str
=
word
}
else
{
if
(
testWidth
===
width
){
rows
.
push
(
testStr
);
str
=
''
}
else
{
str
=
testStr
}}};
str
&&
rows
.
push
(
str
)}
else
{
rows
=
text
.
split
(
/
\r\n
|
\n
/g
)};
var
rlen
=
rows
.
length
,
sumHeight
=
(
rlen
+
1
)
*
fontSize
;
var
x
=
o
.
x
;
var
y
=
o
.
vertical
===
'
center
'
?
o
.
y
-
(
sumHeight
/
2
):
o
.
y
;
var
color
=
o
.
randomColor
?
this
.
getRandomColor
():
o
.
color
||
'
red
'
;
var
lsx
=
x
,
lsy
=
y
;
for
(
var
b
=
0
;
b
<
rlen
;
b
++
){
if
(
align
===
'
center
'
){
var
textW
=
this
.
getTextWidth
(
rows
[
b
],
fontSize
);
lsx
=
x
-
(
textW
/
2
)};
lsy
=
(
b
+
1
)
*
fontSize
;
ctx
.
lineHeight
=
1
;
ctx
.
fillStyle
=
color
;
ctx
.
fillText
(
rows
[
b
],
~~
lsx
+
0.5
,
y
+
(
~~
lsy
)
+
0.5
)}},
getTextWidth
:
function
(
text
,
fontSize
){
return
(
this
.
ctx
.
measureText
(
text
).
width
/
parseInt
(
this
.
ctx
.
font
))
*
fontSize
},
drawImg
:
function
(
img
,
x
,
y
,
w
,
h
){
x
=
x
-
w
/
2
;
y
=
y
-
h
;
ctx
.
drawImage
(
img
,
x
,
y
,
w
,
h
)},
getRandomColor
:
function
(){
return
"
#
"
+
Math
.
floor
(
Math
.
random
()
*
16777215
).
toString
(
16
)},
getEventTarget
:
function
(
x
,
y
){
if
(
y
>
bottomReferY
-
imgA
.
height
-
1
&&
y
<
bottomReferY
+
1
){
var
arr
=
this
.
points
;
var
i
=
arr
.
length
-
1
,
obj
,
halfW
=
imgA
.
width
/
2
-
1
;
while
(
obj
=
arr
[
i
]){
var
ix
=
this
.
getDrawDoord
(
obj
.
x
*
1
);
if
(
Math
.
abs
(
ix
-
x
)
<
halfW
){
return
obj
};
i
--
}};
if
(
y
>
bottomReferY
-
imgB
.
height
-
1
&&
y
<
bottomReferY
+
1
){
var
arr
=
this
.
stations
;
var
i
=
arr
.
length
-
1
,
obj
,
halfW
=
imgA
.
width
/
2
-
1
;
while
(
obj
=
arr
[
i
]){
var
ix
=
this
.
getDrawDoord
(
obj
.
x
*
1
);
if
(
Math
.
abs
(
ix
-
x
)
<
halfW
){
return
obj
};
i
--
}}},
xPixelToStepsYPixel
:
function
(
x
){
var
ladders
=
this
.
Cache
.
ladders
||
[],
ladderSY
=
0
;
for
(
var
ladder
of
ladders
){
if
(
x
>=
ladder
.
sx
&&
x
<
ladder
.
slopeX
){
if
(
x
<
ladder
.
ex
){
ladderSY
=
ladder
.
sy
}
else
{
var
slopeWidth
=
ladder
.
slopeX
-
ladder
.
ex
;
var
slopeHeight
=
ladder
.
slopeY
-
ladder
.
ey
;
ladderSY
=
(
x
-
ladder
.
ex
)
*
(
slopeHeight
/
slopeWidth
)
+
ladder
.
ey
}}};
return
ladderSY
},};
return
new
cuCharts
(
ctn
,
data
,
opts
);
var
cuCharts
=
function
(
ctn
,
data
,
opts
){
var
ctn
=
this
.
ctn
=
typeof
element
===
"
string
"
?
document
.
getElementById
(
ctn
):
ctn
;
if
(
!
ctn
)
return
console
.
log
(
'
%c cuCharts Error Element is a invalid param!
'
,
'
color:red
'
);
var
self
=
this
,
setDpr
=
1
;
var
dpr
=
window
.
devicePixelRatio
||
qf
.
envir
.
dpr
;
self
.
dpr
=
dpr
*
setDpr
;
self
.
Cache
=
{};
!
ctn
.
style
.
position
&&
(
ctn
.
style
.
position
=
'
relative
'
);
var
canvas
=
this
.
canvas
=
document
.
createElement
(
"
canvas
"
);
canvas
.
style
.
cssText
=
'
position:absolute;height:100%;width:100%;
'
;
this
.
ctx
=
canvas
.
getContext
(
"
2d
"
);
ctn
.
appendChild
(
canvas
);
var
defaults
=
this
.
defaults
=
{
altitude
:
1000
,
damHeight
:
data
.
dissect
.
height
||
100
,
damWidth
:
data
.
dissect
.
width
||
100
,
axisLineWidth
:
6
,
axisColor
:
'
red
'
,
margin
:{
top
:
14
,
right
:
0
,
bottom
:
0
,
left
:
18
},};
var
left
=
defaults
.
margin
.
left
*
this
.
dpr
,
top
=
defaults
.
margin
.
top
*
this
.
dpr
,
right
=
defaults
.
margin
.
right
*
this
.
dpr
,
bottom
=
defaults
.
margin
.
bottom
*
this
.
dpr
;
this
.
ladders
=
data
.
steps
||
[];
this
.
devices
=
this
.
formatDeviceParam
(
data
.
devices
);
var
ladderInfo
=
this
.
discernDamHeight
(
this
.
ladders
);
this
.
options
=
{
damWidth
:
defaults
.
damWidth
,
damHeight
:
ladderInfo
.
damHeight
,
axisLineWidth
:
defaults
.
axisLineWidth
||
6
,
stepAverageHeight
:
ladderInfo
.
averageHeight
,
initX
:
defaults
.
margin
.
left
*
dpr
+
(
defaults
.
axisLineWidth
/
2
),
initY
:
defaults
.
margin
.
top
*
dpr
,
bottomDist
:
defaults
.
margin
.
bottom
*
dpr
,
rightDist
:
defaults
.
margin
.
right
*
dpr
,
waterArea
:{
startAngle
:
data
.
dissect
.
sdeg
,
radius
:
data
.
dissect
.
diameter
},
alarm
:
data
.
alarm
,
axisLineWidth
:
opts
.
axisLineWidth
||
defaults
.
axisLineWidth
,
axisColor
:
opts
.
axisColor
||
defaults
.
axisColor
,
type
:
data
.
dissect
.
type
,
waterColor
:
'
#00A2E8
'
,};
this
.
init
()};
cuCharts
.
prototype
=
{
init
:
function
(){
this
.
setModule
();
this
.
onresize
()},
drawAxis
:
function
(
color
,
damHeight
){
var
lw
=
this
.
options
.
axisLineWidth
;
var
wHalf
=
lw
/
2
;
var
initX
=
this
.
options
.
initX
;
var
endX
=
this
.
options
.
endX
;
var
endY
=
this
.
options
.
endY
;
var
axisYSX
=
initX
-
wHalf
;
var
axisXEY
=
endY
+
lw
;
var
axisYEY
=
endY
+
wHalf
;
this
.
drawLiner
({
sx
:
axisYSX
,
sy
:
0
,
ex
:
axisYSX
,
ey
:
axisXEY
,
width
:
lw
,
color
:
color
});
var
fontY
=~~
(
this
.
options
.
damPxHeight
/
2
+
this
.
options
.
initY
);
var
fontSize
=
12
;
var
axisXText
=
'
剖面高度
'
+~~
damHeight
+
'
米
'
;
this
.
drawText
({
x
:
this
.
options
.
initY
/
2
+
2
,
y
:
fontY
,
size
:
fontSize
,
width
:
fontSize
*
this
.
dpr
,
text
:
axisXText
,
color
:
'
#fff
'
,
align
:
'
center
'
,
vertical
:
'
center
'
,});
this
.
drawLiner
({
sx
:
initX
,
sy
:
axisYEY
,
ex
:
endX
,
ey
:
axisYEY
,
width
:
lw
,
color
:
color
})},
drawSteps
:
function
(
ladders
){
ladders
=
ladders
||
[
0
];
var
initX
=
this
.
options
.
initX
,
initY
=
this
.
options
.
initY
;
var
cumulationX
=
initX
,
cumulationY
=
initY
;
var
damLength
=
this
.
options
.
endX
;
var
damDepth
=
this
.
options
.
endY
;
var
pxRetioY
=
this
.
options
.
pxRetioY
;
var
averageHeight
=
this
.
options
.
stepAverageHeight
*
pxRetioY
;
var
damPxWidth
=
this
.
options
.
damPxWidth
;
var
damPxHeight
=
this
.
options
.
damPxHeight
;
var
len
=
ladders
.
length
;
var
stepWidth
=
damPxWidth
/
(
len
+
0
);
var
stepHeight
=
damPxHeight
/
(
len
+
0
);
var
maxStepDepth
=
{
ratio
:
this
.
options
.
HWRation
};
this
.
Cache
.
ladders
=
[];
for
(
var
i
=
0
;
i
<
len
;
i
++
){
var
item
=
ladders
[
i
];
var
setWidth
=
item
.
width
*
this
.
dpr
*
this
.
options
.
pxRetioX
;
var
setHeight
=
item
.
height
*
pxRetioY
||
averageHeight
;
var
slope
=
item
.
slope
||
0
;
var
aCoord
=
this
.
byAngleAndHeightToCoord
(
slope
,
setHeight
);
var
fEndX
,
fEndY
;
if
(
setWidth
){
fEndX
=
cumulationX
+
setWidth
;
stepWidth
=
(
damLength
-
(
cumulationX
+
setWidth
+
aCoord
.
x
*
this
.
dpr
))
/
(
len
-
(
i
+
1
))}
else
{
fEndX
=
cumulationX
+
(
stepWidth
-
aCoord
.
x
*
this
.
dpr
)};
if
(
setHeight
){
fEndY
=
cumulationY
+
setHeight
;
stepHeight
=
(
damDepth
-
(
cumulationY
+
setHeight
))
/
(
len
-
(
i
+
1
))}
else
{
fEndY
=
cumulationY
+
stepHeight
};
var
lEndX
=
fEndX
+
aCoord
.
x
*
this
.
dpr
,
lEndY
=
fEndY
+
aCoord
.
y
*
this
.
dpr
;
var
stepDepthRatio
=
(
damDepth
-~~
lEndY
)
/
(
damLength
-
lEndX
);
if
(
stepDepthRatio
&&
stepDepthRatio
<
maxStepDepth
.
ratio
&&
i
<
len
-
1
){
maxStepDepth
=
{
ratio
:
stepDepthRatio
,
x
:
lEndX
,
y
:
lEndY
,}};
this
.
drawLiner
({
sx
:
cumulationX
,
sy
:
cumulationY
,
ex
:
fEndX
,
ey
:
cumulationY
,
width
:
2
,
color
:
"
#8b8b8b
"
});
this
.
drawLiner
({
sx
:
fEndX
,
sy
:
cumulationY
,
ex
:
lEndX
,
ey
:
lEndY
,
width
:
2
,
color
:
"
#8b8b8b
"
});
this
.
Cache
.
ladders
[
i
]
=
{
sx
:
cumulationX
,
sy
:
cumulationY
,
ex
:
fEndX
,
ey
:
cumulationY
,
slope
:
slope
,
slopeX
:
lEndX
,
slopeY
:
lEndY
,
xy
:
aCoord
.
xy
};
cumulationX
=
lEndX
;
cumulationY
=
lEndY
};
this
.
drawLiner
({
sx
:
cumulationX
,
sy
:
cumulationY
,
ex
:
damLength
,
ey
:
damDepth
,
width
:
2
,
color
:
"
#8b8b8b
"
});
var
damHeight
=
(
cumulationY
-
this
.
options
.
initY
)
/
pxRetioY
;
return
maxStepDepth
.
damHeight
=
damHeight
,
maxStepDepth
},
drawAlarmLine
:
function
(
alarms
,
Steps
){
var
alarmValues
=
alarms
.
value
;
var
alarmLevel
=
alarms
.
alarmLevel
;
var
coords
=
this
.
devices
||
[];
var
deviceSX
=
coords
[
0
].
x
;
var
deviceSY
=
coords
[
0
].
y
;
var
initX
=
this
.
options
.
initX
;
var
initY
=
this
.
options
.
initY
;
var
endY
=
this
.
options
.
endY
;
var
endX
=
this
.
options
.
endX
;
var
alarmLevelNum
=
[
'
red
'
,
'
orange
'
,
'
yellow
'
,
'
blue
'
]
||
Object
.
keys
(
alarmValues
);
var
alarmLine
=
{};
var
level
=
(
~~
alarmLevel
||
alarmLevelNum
.
length
+
1
)
-
1
;
var
nearLevel
=
level
?
level
-
1
:
level
;
var
alarm
=
alarmLevelNum
[
level
];
var
nearAlarm
=
alarmLevelNum
[
nearLevel
];
alarmLine
[
nearAlarm
]
=
alarmValues
[
nearAlarm
];
if
(
alarm
){
alarmLine
[
alarm
]
=
alarmValues
[
alarm
]};
var
alarmRealParam
=
this
.
getAlarmRealParam
(
Object
.
values
(
alarmLine
))
||
Steps
.
ratio
;
var
deviceSlopeRatio
=
alarmRealParam
.
ratio
;
for
(
var
key
in
alarmLine
){
var
value
=
alarmValues
[
key
];
if
(
key
){
var
ladderSY
=
this
.
xPixelToStepsYPixel
(
deviceSX
)
-
initX
+
6
;
var
lineSY
=
(
value
*
this
.
options
.
pxRetioY
+
ladderSY
)
-
(
deviceSX
-
initX
)
*
deviceSlopeRatio
;
var
lineEX
=
(
endY
-
lineSY
)
/
deviceSlopeRatio
;
this
.
drawLiner
({
sx
:
initX
,
sy
:
lineSY
+
initY
,
ex
:
lineEX
,
ey
:
endY
,
width
:
2
,
color
:
key
})}}},
getCirHeightDev
:
function
(
r
,
x
){
return
r
-
Math
.
sqrt
(
Math
.
pow
(
r
,
2
)
-
Math
.
pow
(
x
,
2
))},
drawWaterArea
:
function
(
depth
){
var
startAngle
=
this
.
options
.
waterArea
.
startAngle
;
var
radiusMultiple
=
this
.
options
.
waterArea
.
radius
;
var
angleRatio
=
90
/
0.5
;
var
initArc
=
startAngle
/
angleRatio
;
var
ctx
=
this
.
ctx
,
initX
=
this
.
options
.
initX
;
var
arcOrigin
=
1.50
,
arcStart
=
arcOrigin
+
initArc
;
var
sAngle
=
(
arcStart
-
arcOrigin
)
*
angleRatio
;
var
r1
=
this
.
options
[
'
damPxWidth
'
]
*
radiusMultiple
;
var
waterApexToAxisXDist
=
Math
.
sin
(
sAngle
*
0.017453293
)
*
r1
;
var
sAngleToTopSpotDist
=
(
r1
-
(
Math
.
cos
(
sAngle
*
0.017453293
)
*
r1
));
var
depth
=
(
depth
||
30
)
*
this
.
options
.
pxRetioY
+
sAngleToTopSpotDist
;
var
firstDeviceX
=
this
.
devices
[
0
].
dist
*
this
.
options
.
pxRetioX
;
var
ladderSY
=
this
.
xPixelToStepsYPixel
(
firstDeviceX
+
initX
)
-
initX
+
6
;
var
deviceToAxisXDist
=
firstDeviceX
+
waterApexToAxisXDist
;
var
deviceToAxisYDist
=
Math
.
sqrt
(
r1
*
r1
-
deviceToAxisXDist
*
deviceToAxisXDist
);
var
deviceAreaToApexDev
=
r1
-
deviceToAxisYDist
-
sAngleToTopSpotDist
-
ladderSY
;
var
firstDeviceY
=
this
.
options
.
damPxHeight
-
this
.
devices
[
0
].
value
*
this
.
options
.
pxRetioY
;
firstDeviceY
+=
deviceAreaToApexDev
;
var
ry
=
r1
+
this
.
options
.
endY
-
sAngleToTopSpotDist
-
firstDeviceY
;
var
lineToY
=
r1
-
sAngleToTopSpotDist
-
firstDeviceY
;
var
eAngle
=
Math
.
acos
(
lineToY
/
r1
)
/
0.017453293
;
var
arcEnd
=
eAngle
/
angleRatio
+
arcOrigin
;
ctx
.
beginPath
();
ctx
.
arc
(
initX
-
waterApexToAxisXDist
,
ry
,
r1
,
arcStart
*
Math
.
PI
,
arcEnd
*
Math
.
PI
,
false
);
ctx
.
lineTo
(
initX
,
ry
-
lineToY
);
ctx
.
fillStyle
=
this
.
options
.
waterColor
;
ctx
.
fill
()},
byAngleAndHeightToCoord
:
function
(
angle
,
height
){
var
devX
=
Math
.
tan
(
angle
*
0.017453293
)
*
height
;
var
xy
=
height
/
Math
.
cos
(
angle
*
0.017453293
);
var
devY
=
height
-
devX
;
var
yRatio
=
height
/
devX
;
var
x
=
0
,
y
=
0
;
if
(
angle
>
50
){
x
=
height
,
y
=
devY
*
yRatio
}
else
{
x
=
devX
,
y
=
0
};
return
{
x
:
x
,
y
:
y
,
xy
:
xy
}},
discernDamHeight
(
list
){
var
not
=
0
,
set
=
0
,
sum
=
0
;
for
(
var
item
of
list
){
var
height
=
item
.
height
;
height
?(
set
++
,
sum
+=
height
):
not
++
};
var
damHeight
=
not
?
this
.
defaults
.
damHeight
:
sum
;
var
averageHeight
=
(
damHeight
-
sum
)
/
not
;
return
{
averageHeight
:
averageHeight
,
damHeight
:
damHeight
}},
autoAdjustWaterValue
(
list
,
len
,
val
){
var
y
=
0
;
for
(
var
i
=
0
;
i
<
len
;
i
++
){
var
obj
=
list
[
i
];
if
(
val
){
if
(
obj
.
y
>
val
){
obj
.
y
=
val
}};
if
(
y
>
obj
.
y
){
this
.
autoAdjustWaterValue
(
list
,
i
,
obj
.
y
)};
y
=
obj
.
y
};
return
list
},
setDevicesPosition
(
list
){
list
.
sort
(
function
(
a
,
b
){
return
b
.
dist
-
a
.
dist
});
for
(
var
item
of
list
){
var
waterX
=~~
(
this
.
options
.
endX
-
item
.
dist
*
this
.
options
.
pxRetioX
);
var
ladderSY
=
this
.
xPixelToStepsYPixel
(
waterX
);
var
waterY
=
(
item
.
depth
-
item
.
waterValue
)
*
this
.
options
.
pxRetioY
+
ladderSY
;
item
.
x
=
waterX
,
item
.
y
=
waterY
,
item
.
stepY
=
ladderSY
}},
customizeDemo1
:
function
(){
var
ix
=
this
.
options
.
initX
;
var
ey
=
this
.
options
.
endY
;
var
devices
=
this
.
devices
;
if
(
this
.
options
.
type
===
'
polyxiadian
'
){
devices
=
this
.
autoAdjustWaterValue
(
devices
,
devices
.
length
)};
var
spx
=
devices
[
0
].
x
-
ix
;
var
spy
=
devices
[
0
].
y
;
var
epc
=
devices
[
devices
.
length
-
1
];
var
epy
=
ey
-
epc
.
y
;
var
sp
=
{
x
:
ix
,
y
:
spy
-
spx
*
this
.
options
.
HWRation
};
var
ep
=
{
x
:
epy
/
this
.
options
.
HWRation
+
epc
.
x
,
y
:
ey
};
var
poly
=
[].
concat
(
sp
,
devices
,
ep
,{
x
:
ix
,
y
:
ey
});
this
.
drawPolyArea
(
poly
)},
drawCustomizeDevice
:
function
(
list
){
var
lineW
=
4
*
this
.
dpr
,
deviceW
=
6
*
this
.
dpr
,
deviceH
=
3
*
this
.
dpr
,
waterFaceH
=
2
*
this
.
dpr
;
var
endX
=
this
.
options
.
endX
;
var
endY
=
this
.
options
.
endY
;
var
ladders
=
this
.
Cache
.
ladders
||
[];
var
fontSize
=
11
;
var
fontTopDev
=
fontSize
*
this
.
dpr
+
3
;
this
.
options
.
deviceCoords
=
[];
var
leftDist
=
this
.
options
.
initX
;
for
(
var
item
of
list
){
var
holeX
=
item
.
x
;
var
depthText
=
'
孔深
'
+
item
.
holeDepth
+
'
米
'
;
var
holeLength
=
item
.
holeDepth
*
this
.
options
.
pxRetioY
;
var
ladderSY
=
item
.
stepY
;
this
.
drawText
({
x
:
holeX
,
y
:
ladderSY
-
fontTopDev
,
size
:
fontSize
,
text
:
depthText
,
color
:
'
red
'
,
align
:
'
center
'
,});
var
holeEndY
=
ladderSY
+
holeLength
;
holeEndY
=
holeEndY
>
endY
?
endY
:
holeEndY
;
this
.
drawLiner
({
sx
:
holeX
,
sy
:
ladderSY
,
ex
:
holeX
,
ey
:
holeEndY
,
width
:
lineW
,
color
:
"
grey
"
});
var
deviceEY
=
item
.
y
+
(
waterFaceH
/
2
);
var
deviceSY
=
deviceEY
-
waterFaceH
;
this
.
drawLiner
({
sx
:
holeX
,
sy
:
deviceSY
,
ex
:
holeX
,
ey
:
deviceEY
,
width
:
deviceW
,
color
:
"
#004AFC
"
});
this
.
options
.
deviceCoords
.
push
({
x
:
holeX
,
y
:
item
.
y
,
stepY
:
ladderSY
});
var
valFont
=
11
;
var
valueSY
=~~
(
deviceSY
-
valFont
*
this
.
dpr
-
6
);
var
text
=
'
水位值
'
+
item
.
waterValue
+
'
米
'
;
this
.
drawText
({
x
:
holeX
,
y
:
valueSY
,
size
:
valFont
,
text
:
text
,
color
:
'
white
'
,
align
:
'
center
'
,})}},
setModule
:
function
(){
this
.
ctx
.
clearRect
(
0
,
0
,
this
.
SumWidth
,
this
.
SumHeight
);
var
canvas
=
this
.
canvas
;
var
SumWidth
=
this
.
SumWidth
=
(
this
.
ctn
.
clientWidth
*
this
.
dpr
)
-
this
.
ctn
.
clientLeft
-
0
;
var
SumHeight
=
this
.
SumHeight
=
this
.
ctn
.
clientHeight
*
this
.
dpr
-
this
.
ctn
.
clientTop
-
0
;
canvas
.
width
=
SumWidth
*
this
.
dpr
;
canvas
.
height
=
SumHeight
*
this
.
dpr
;
canvas
.
style
.
cssText
=
'
position:absolute;top:0;left:0;height:
'
+
(
SumHeight
)
+
'
px;width:
'
+
SumWidth
+
'
px;user-select: none;-webkit-tap-highlight-color:rgba(0,0,0,0);padding:0;margin:0;border-width:0;box-sizing: border-box;
'
;
var
top
=
this
.
options
.
initY
,
left
=
this
.
options
.
initX
,
bottom
=
this
.
options
.
bottomDist
,
right
=
this
.
options
.
rightDist
;
var
damPxWidth
=
SumWidth
-
(
right
+
left
),
damPxHeight
=
SumHeight
-
(
bottom
+
top
+
this
.
options
.
axisLineWidth
),
endX
=
SumWidth
-
right
,
endY
=
SumHeight
-
bottom
-
this
.
options
.
axisLineWidth
;
this
.
options
[
'
endX
'
]
=
endX
;
this
.
options
[
'
endY
'
]
=
endY
;
this
.
options
[
'
damPxWidth
'
]
=
damPxWidth
;
this
.
options
[
'
damPxHeight
'
]
=
damPxHeight
;
this
.
options
[
'
pxRetioX
'
]
=
damPxWidth
/
this
.
defaults
.
damWidth
;
this
.
options
[
'
pxRetioY
'
]
=
damPxHeight
/
this
.
options
.
damHeight
;
this
.
options
[
'
HWRation
'
]
=
(
endY
-
top
)
/
(
endX
-
left
);
this
.
drawChart
()},
formatDeviceParam
:
function
(
devices
){
var
devices
=
devices
||
[];
var
arr
=
[];
for
(
var
item
of
devices
){
arr
.
push
({
dist
:
item
.
jrx_coord_x
,
holeDepth
:
item
.
jrx_trepanning
,
value
:
item
.
depth
,
depth
:
item
.
jrx_burial
,
waterValue
:
item
.
stage
})};
return
arr
},
getAlarmRealParam
:
function
(
aValues
){
var
aval
=
aValues
[
0
];
var
coords
=
this
.
devices
||
[];
var
valY
=
aval
*
this
.
options
.
pxRetioY
;
var
sy
=
valY
+
coords
[
0
].
stepY
,
sx
=
coords
[
0
].
x
,
ey
=
0
,
ex
=
0
;
var
len
=
coords
.
length
;
for
(
var
i
=
1
;
i
<
len
;
i
++
){
var
item
=
coords
[
i
];
ey
=
valY
+
item
.
stepY
,
ex
=
item
.
x
};
return
{
ratio
:(
ey
-
sy
)
/
(
ex
-
sx
),
sy
:
sy
,
ey
:
ey
}},
drawChart
:
function
(){
var
Steps
=
this
.
drawSteps
(
this
.
ladders
);
this
.
drawAxis
(
this
.
options
.
axisColor
,
Steps
.
damHeight
);
this
.
setDevicesPosition
(
this
.
devices
);
if
(
this
.
options
.
type
===
'
arcdiagram
'
){
this
.
drawWaterArea
()}
else
{
this
.
customizeDemo1
()};
this
.
drawCustomizeDevice
(
this
.
devices
);
this
.
drawAlarmLine
(
this
.
options
.
alarm
,
Steps
)},
onresize
:
function
(){
qf
.
resize
(()
=>
{
this
.
setModule
()})},
updateData
:
function
(
data
){
data
=
data
||
{};
this
.
stations
=
data
.
stations
||
this
.
stations
;
this
.
points
=
data
.
points
||
this
.
points
;
this
.
draw
(
this
.
cacheX
+
this
.
destX
,
true
)},
drawLiner
:
function
(
o
){
var
ctx
=
this
.
ctx
;
ctx
.
beginPath
();
ctx
.
moveTo
(
o
.
sx
,
o
.
sy
);
ctx
.
lineTo
(
o
.
ex
,
o
.
ey
);
ctx
.
lineWidth
=
o
.
width
;
ctx
.
strokeStyle
=
o
.
color
;
ctx
.
stroke
()},
drawPolyArea
:
function
(
poly
){
var
ctx
=
this
.
ctx
;
ctx
.
beginPath
();
for
(
var
i
=
0
,
len
=
poly
.
length
;
i
<
len
;
i
++
){
var
item
=
poly
[
i
];
if
(
i
){
ctx
.
lineTo
(
item
.
x
,
item
.
y
)}
else
{
ctx
.
moveTo
(
item
.
x
,
item
.
y
)}};
ctx
.
fillStyle
=
this
.
options
.
waterColor
;
ctx
.
fill
()},
drawText
:
function
(
o
){
var
ctx
=
this
.
ctx
;
var
fontSize
=
(
o
.
size
||
14
)
*
this
.
dpr
;
var
text
=
o
.
text
||
''
;
var
textWidth
=
this
.
getTextWidth
(
text
,
fontSize
);
var
width
=
o
.
width
||
textWidth
;
var
align
=
o
.
align
||
'
normal
'
;
ctx
.
font
=
'
normal
'
+
fontSize
+
"
px 'Open Sans', 'PingFang SC', Helvetica, Arial, sans-serif
"
;
var
rows
=
[];
if
(
width
&&~~
width
<
textWidth
){
var
str
=
''
,
texts
=
text
.
split
(
""
);
for
(
var
word
of
texts
){
var
testStr
=
str
+
word
;
var
testWidth
=
ctx
.
measureText
(
testStr
).
width
;
if
(
testWidth
>
width
){
rows
.
push
(
str
);
str
=
word
}
else
{
if
(
testWidth
===
width
){
rows
.
push
(
testStr
);
str
=
''
}
else
{
str
=
testStr
}}};
str
&&
rows
.
push
(
str
)}
else
{
rows
=
text
.
split
(
/
\r\n
|
\n
/g
)};
var
rlen
=
rows
.
length
,
sumHeight
=
(
rlen
+
1
)
*
fontSize
;
var
x
=
o
.
x
;
var
y
=
o
.
vertical
===
'
center
'
?
o
.
y
-
(
sumHeight
/
2
):
o
.
y
;
var
color
=
o
.
randomColor
?
this
.
getRandomColor
():
o
.
color
||
'
red
'
;
var
lsx
=
x
,
lsy
=
y
;
for
(
var
b
=
0
;
b
<
rlen
;
b
++
){
if
(
align
===
'
center
'
){
var
textW
=
this
.
getTextWidth
(
rows
[
b
],
fontSize
);
lsx
=
x
-
(
textW
/
2
)};
lsy
=
(
b
+
1
)
*
fontSize
;
ctx
.
lineHeight
=
1
;
ctx
.
fillStyle
=
color
;
ctx
.
fillText
(
rows
[
b
],
~~
lsx
+
0.5
,
y
+
(
~~
lsy
)
+
0.5
)}},
getTextWidth
:
function
(
text
,
fontSize
){
return
(
this
.
ctx
.
measureText
(
text
).
width
/
parseInt
(
this
.
ctx
.
font
))
*
fontSize
},
drawImg
:
function
(
img
,
x
,
y
,
w
,
h
){
x
=
x
-
w
/
2
;
y
=
y
-
h
;
ctx
.
drawImage
(
img
,
x
,
y
,
w
,
h
)},
getRandomColor
:
function
(){
return
"
#
"
+
Math
.
floor
(
Math
.
random
()
*
16777215
).
toString
(
16
)},
getEventTarget
:
function
(
x
,
y
){
if
(
y
>
bottomReferY
-
imgA
.
height
-
1
&&
y
<
bottomReferY
+
1
){
var
arr
=
this
.
points
;
var
i
=
arr
.
length
-
1
,
obj
,
halfW
=
imgA
.
width
/
2
-
1
;
while
(
obj
=
arr
[
i
]){
var
ix
=
this
.
getDrawDoord
(
obj
.
x
*
1
);
if
(
Math
.
abs
(
ix
-
x
)
<
halfW
){
return
obj
};
i
--
}};
if
(
y
>
bottomReferY
-
imgB
.
height
-
1
&&
y
<
bottomReferY
+
1
){
var
arr
=
this
.
stations
;
var
i
=
arr
.
length
-
1
,
obj
,
halfW
=
imgA
.
width
/
2
-
1
;
while
(
obj
=
arr
[
i
]){
var
ix
=
this
.
getDrawDoord
(
obj
.
x
*
1
);
if
(
Math
.
abs
(
ix
-
x
)
<
halfW
){
return
obj
};
i
--
}}},
xPixelToStepsYPixel
:
function
(
x
){
var
ladders
=
this
.
Cache
.
ladders
||
[],
ladderSY
=
0
;
for
(
var
ladder
of
ladders
){
if
(
x
>=
ladder
.
sx
&&
x
<
ladder
.
slopeX
){
if
(
x
<
ladder
.
ex
){
ladderSY
=
ladder
.
sy
}
else
{
var
slopeWidth
=
ladder
.
slopeX
-
ladder
.
ex
;
var
slopeHeight
=
ladder
.
slopeY
-
ladder
.
ey
;
ladderSY
=
(
x
-
ladder
.
ex
)
*
(
slopeHeight
/
slopeWidth
)
+
ladder
.
ey
}}};
return
ladderSY
},};
return
new
cuCharts
(
ctn
,
data
,
opts
);
},
mapOnload
(){
...
...
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