Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
K
kd_control
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
zhanglw
kd_control
Commits
27e5ba9a
Commit
27e5ba9a
authored
May 09, 2023
by
zhanglw
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
铲车排行榜
parent
3aa6f4b2
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
722 additions
and
1085 deletions
+722
-1085
common.js
src/assets/js/common.js
+8
-3
DPcomputer11.vue
.../MLargeScreen/components/smallComponents/DPcomputer11.vue
+261
-411
DPcomputer12.vue
.../MLargeScreen/components/smallComponents/DPcomputer12.vue
+272
-329
DPcomputer5.vue
...s/MLargeScreen/components/smallComponents/DPcomputer5.vue
+175
-342
index.vue
src/views/personnelPositioning/beacon/index.vue
+6
-0
No files found.
src/assets/js/common.js
View file @
27e5ba9a
...
...
@@ -1992,7 +1992,8 @@ var HttpReq = function(){
//大屏——数据总览——采区产量统计——日产量
apiPlanDayQuery
:
function
(
param
){
return
request
({
url
:
'
/api/Plan/Day
'
,
// url: '/api/Plan/Day',
url
:
'
/api/carManager/clData
'
,
method
:
'
get
'
,
params
:
param
,
})
...
...
@@ -2087,7 +2088,8 @@ var HttpReq = function(){
//大屏——车辆管理——卡车铲车排行榜day
apiManmadesDay1Query
:
function
(
param
){
return
request
({
url
:
'
/api/Manmades/Day
'
,
// url: '/api/Manmades/Day',
url
:
'
/api/carManager/kcTop
'
,
method
:
'
get
'
,
params
:
param
,
})
...
...
@@ -2096,6 +2098,7 @@ var HttpReq = function(){
apiManmadesZhou1Query
:
function
(
param
){
return
request
({
url
:
'
/api/Manmades/Zhou
'
,
// url: '/api/carManager/kcTopDay',
method
:
'
get
'
,
params
:
param
,
})
...
...
@@ -2104,6 +2107,7 @@ var HttpReq = function(){
apiManmadesMou1Query
:
function
(
param
){
return
request
({
url
:
'
/api/Manmades/Mou
'
,
// url: '/api/carManager/kcTopDay',
method
:
'
get
'
,
params
:
param
,
})
...
...
@@ -2558,7 +2562,8 @@ var HttpReq = function(){
//大屏组件4铲车排行榜接口
apiManmadeschanjiedanDayQuery
:
function
(
param
){
return
request
({
url
:
'
/api/Manmades/chanjiedanDay
'
,
// url: '/api/Manmades/chanjiedanDay',
url
:
'
/api/carManager/ccTop
'
,
method
:
'
get
'
,
params
:
param
,
})
...
...
src/views/MLargeScreen/components/smallComponents/DPcomputer11.vue
View file @
27e5ba9a
<
template
>
<div
class=
"DPcomputer11Box"
>
<!-- 卡车排行榜-->
<div
class=
"carManScrView_leftView_title truck_titleStyle"
>
<div>
卡车排行榜
</div>
<div
class=
"driverTitleDateStyle"
>
<div
:class=
"truckRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"truckChangeTime('day')"
>
日
</div>
<div
:class=
"truckRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"truckChangeTime('week')"
>
周
</div>
<div
:class=
"truckRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"truckChangeTime('month')"
>
月
</div>
</div>
<div
class=
"DPcomputer11Box"
>
<!-- 卡车排行榜-->
<div
class=
"carManScrView_leftView_title truck_titleStyle"
>
<div>
卡车排行榜
</div>
<div
class=
"driverTitleDateStyle"
>
<div
:class=
"truckRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"truckChangeTime('day')"
>
日
</div>
<div
class=
"carManScrView_leftView_content"
>
<div
class=
"carManScrView_leftView_content_views2"
>
<div
:class=
"truckRankListData.selectFieldText == 'juli' ? '' : 'selectFieldStyle' "
@
click=
"truckChangeField('juli')"
>
运输距离
</div>
<div
:class=
"truckRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' "
@
click=
"truckChangeField('time')"
>
工作时长
</div>
<div
:class=
"truckRankListData.selectFieldText == 'zcar' ? '' : 'selectFieldStyle' "
@
click=
"truckChangeField('zcar')"
>
运载量
</div>
<div
:class=
"truckRankListData.selectFieldText == 'waiting' ? '' : 'selectFieldStyle' "
@
click=
"truckChangeField('waiting')"
>
接单数
</div>
</div>
<div
class=
"carManScrView_leftView_content_views3"
id=
"carManScrView_leftView_content_views3_1"
></div>
<div
:class=
"truckRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"truckChangeTime('week')"
>
周
</div>
<div
:class=
"truckRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"truckChangeTime('month')"
>
月
</div>
</div>
</div>
<div
class=
"carManScrView_leftView_content"
>
<div
class=
"carManScrView_leftView_content_views2"
>
<div
:class=
"truckRankListData.selectFieldText == 'juli' ? '' : 'selectFieldStyle' "
@
click=
"truckChangeField('juli')"
>
运输距离
</div>
<div
:class=
"truckRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' "
@
click=
"truckChangeField('time')"
>
工作时长
</div>
<div
:class=
"truckRankListData.selectFieldText == 'yunZaiNumber' ? '' : 'selectFieldStyle' "
@
click=
"truckChangeField('yunZaiNumber')"
>
运载量
</div>
<div
:class=
"truckRankListData.selectFieldText == 'jieDanNumber' ? '' : 'selectFieldStyle' "
@
click=
"truckChangeField('jieDanNumber')"
>
接单数
</div>
</div>
<div
class=
"carManScrView_leftView_content_views3"
id=
"carManScrView_leftView_content_views3_1"
></div>
</div>
</div>
</
template
>
<
script
>
import
{
Tools
,
HttpReq
,
CAMap
}
from
'
@/assets/js/common.js
'
;
import
{
Tools
,
HttpReq
,
CAMap
}
from
'
@/assets/js/common.js
'
;
import
*
as
echarts
from
'
echarts
'
;
export
default
{
data
(){
return
{
DPcomputer11BoxTimer
:
null
,
//卡车排行榜
truckRankListData
:{
echartsX
:
'
Km
'
,
carclass
:
'
卡车
'
,
selectTimeText
:
'
day
'
,
selectFieldText
:
'
juli
'
,
driverName
:[],
driverSeriesData
:[],
driverName1
:[
'
kfdfdf
'
,
'
dsdsd1
'
,
'
dsdsd55
'
],
driverSeriesData1
:[
20
,
50
,
10
],
},
}
data
()
{
return
{
DPcomputer11BoxTimer
:
null
,
//卡车排行榜
truckRankListData
:
{
echartsX
:
'
Km
'
,
carclass
:
'
卡车
'
,
selectTimeText
:
'
day
'
,
selectFieldText
:
'
juli
'
,
driverName
:
[],
driverSeriesData
:
[],
driverName1
:
[
'
kfdfdf
'
,
'
dsdsd1
'
,
'
dsdsd55
'
],
driverSeriesData1
:
[
20
,
50
,
10
],
},
}
},
mounted
()
{
this
.
DPcomputer11BoxTimer
=
setInterval
(()
=>
{
this
.
loadData
();
},
10000
)
this
.
loadData
();
},
methods
:
{
loadData
()
{
let
that
=
this
;
let
truckQuery1
=
{};
truckQuery1
.
size
=
7
;
truckQuery1
.
sort
=
this
.
truckRankListData
.
selectFieldText
;
truckQuery1
.
carclass
=
this
.
truckRankListData
.
carclass
;
truckQuery1
.
duration
=
this
.
truckRankListData
.
selectTimeText
;
this
.
$nextTick
(()
=>
{
HttpReq
.
truckDispatching
.
apiManmadesDay1Query
(
truckQuery1
).
then
((
res
)
=>
{
let
arr1
=
[];
let
arr2
=
[];
if
(
res
.
data
&&
res
.
data
.
length
){
res
.
data
.
reverse
().
forEach
((
item
,
index
)
=>
{
arr1
.
push
(
item
.
carNumber
);
arr2
.
push
(
item
.
data
);
})
}
else
{
arr1
.
push
(
'
暂无数据
'
);
arr2
.
push
(
0
);
}
this
.
truckRankListData
.
driverName
=
arr1
;
this
.
truckRankListData
.
driverSeriesData
=
arr2
;
this
.
truckChangeEcharts
();
})
})
},
mounted
(){
this
.
loadData
();
//卡车切换时间
truckChangeTime
(
text
)
{
this
.
truckRankListData
.
selectTimeText
=
text
;
this
.
loadData
();
},
methods
:{
loadData
(){
let
that
=
this
;
let
truckQuery1
=
{};
truckQuery1
.
size
=
7
;
truckQuery1
.
sort
=
this
.
truckRankListData
.
selectFieldText
;
truckQuery1
.
carclass
=
this
.
truckRankListData
.
carclass
;
this
.
$nextTick
(()
=>
{
if
(
this
.
truckRankListData
.
selectTimeText
==
'
day
'
){
HttpReq
.
truckDispatching
.
apiManmadesDay1Query
(
truckQuery1
).
then
((
res
)
=>
{
let
arr1
=
[];
let
arr2
=
[];
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
a
[
that
.
truckRankListData
.
selectFieldText
]
-
b
[
that
.
truckRankListData
.
selectFieldText
];
})
transitionRes
.
forEach
((
item
,
index
)
=>
{
arr1
.
push
(
item
.
number
);
arr2
.
push
(
item
[
this
.
truckRankListData
.
selectFieldText
]);
})
this
.
truckRankListData
.
driverName
=
arr1
;
this
.
truckRankListData
.
driverSeriesData
=
arr2
;
this
.
truckChangeEcharts
();
})
}
else
if
(
this
.
truckRankListData
.
selectTimeText
==
'
week
'
){
HttpReq
.
truckDispatching
.
apiManmadesZhou1Query
(
truckQuery1
).
then
((
res
)
=>
{
let
arr1
=
[];
let
arr2
=
[];
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
a
[
that
.
truckRankListData
.
selectFieldText
]
-
b
[
that
.
truckRankListData
.
selectFieldText
];
})
transitionRes
.
forEach
((
item
,
index
)
=>
{
arr1
.
push
(
item
.
number
);
arr2
.
push
(
item
[
this
.
truckRankListData
.
selectFieldText
]);
})
this
.
truckRankListData
.
driverName
=
arr1
;
this
.
truckRankListData
.
driverSeriesData
=
arr2
;
this
.
truckChangeEcharts
();
})
}
else
if
(
this
.
truckRankListData
.
selectTimeText
==
'
month
'
){
HttpReq
.
truckDispatching
.
apiManmadesMou1Query
(
truckQuery1
).
then
((
res
)
=>
{
let
arr1
=
[];
let
arr2
=
[];
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
a
[
that
.
truckRankListData
.
selectFieldText
]
-
b
[
that
.
truckRankListData
.
selectFieldText
];
})
transitionRes
.
forEach
((
item
,
index
)
=>
{
arr1
.
push
(
item
.
number
);
arr2
.
push
(
item
[
this
.
truckRankListData
.
selectFieldText
]);
})
this
.
truckRankListData
.
driverName
=
arr1
;
this
.
truckRankListData
.
driverSeriesData
=
arr2
;
this
.
truckChangeEcharts
();
})
}
})
this
.
DPcomputer11BoxTimer
=
setInterval
(()
=>
{
//获取卡车排行榜
let
truckQuery1
=
{};
truckQuery1
.
size
=
7
;
truckQuery1
.
sort
=
this
.
truckRankListData
.
selectFieldText
;
truckQuery1
.
carclass
=
this
.
truckRankListData
.
carclass
;
this
.
$nextTick
(()
=>
{
if
(
this
.
truckRankListData
.
selectTimeText
==
'
day
'
){
HttpReq
.
truckDispatching
.
apiManmadesDay1Query
(
truckQuery1
).
then
((
res
)
=>
{
let
arr1
=
[];
let
arr2
=
[];
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
a
[
that
.
truckRankListData
.
selectFieldText
]
-
b
[
that
.
truckRankListData
.
selectFieldText
];
})
transitionRes
.
forEach
((
item
,
index
)
=>
{
arr1
.
push
(
item
.
number
);
arr2
.
push
(
item
[
this
.
truckRankListData
.
selectFieldText
]);
})
this
.
truckRankListData
.
driverName
=
arr1
;
this
.
truckRankListData
.
driverSeriesData
=
arr2
;
this
.
truckChangeEcharts
();
})
}
else
if
(
this
.
truckRankListData
.
selectTimeText
==
'
week
'
){
HttpReq
.
truckDispatching
.
apiManmadesZhou1Query
(
truckQuery1
).
then
((
res
)
=>
{
let
arr1
=
[];
let
arr2
=
[];
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
a
[
that
.
truckRankListData
.
selectFieldText
]
-
b
[
that
.
truckRankListData
.
selectFieldText
];
})
transitionRes
.
forEach
((
item
,
index
)
=>
{
arr1
.
push
(
item
.
number
);
arr2
.
push
(
item
[
this
.
truckRankListData
.
selectFieldText
]);
})
this
.
truckRankListData
.
driverName
=
arr1
;
this
.
truckRankListData
.
driverSeriesData
=
arr2
;
this
.
truckChangeEcharts
();
})
}
else
if
(
this
.
truckRankListData
.
selectTimeText
==
'
month
'
){
HttpReq
.
truckDispatching
.
apiManmadesMou1Query
(
truckQuery1
).
then
((
res
)
=>
{
let
arr1
=
[];
let
arr2
=
[];
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
a
[
that
.
truckRankListData
.
selectFieldText
]
-
b
[
that
.
truckRankListData
.
selectFieldText
];
})
transitionRes
.
forEach
((
item
,
index
)
=>
{
arr1
.
push
(
item
.
number
);
arr2
.
push
(
item
[
this
.
truckRankListData
.
selectFieldText
]);
})
this
.
truckRankListData
.
driverName
=
arr1
;
this
.
truckRankListData
.
driverSeriesData
=
arr2
;
this
.
truckChangeEcharts
();
})
}
})
},
10000
)
//卡车切换字段排序
truckChangeField
(
text
)
{
let
that
=
this
;
this
.
truckRankListData
.
selectFieldText
=
text
;
let
truckQuery1
=
{};
truckQuery1
.
size
=
7
;
truckQuery1
.
sort
=
this
.
truckRankListData
.
selectFieldText
;
truckQuery1
.
carclass
=
this
.
truckRankListData
.
carclass
;
if
(
text
==
'
juli
'
)
{
this
.
truckRankListData
.
echartsX
=
'
km
'
;
}
else
if
(
text
==
'
time
'
)
{
this
.
truckRankListData
.
echartsX
=
'
min
'
;
}
else
if
(
text
==
'
yunZaiNumber
'
)
{
this
.
truckRankListData
.
echartsX
=
'
吨
'
;
}
else
if
(
text
==
'
jieDanNumber
'
)
{
this
.
truckRankListData
.
echartsX
=
'
次
'
;
}
this
.
loadData
();
},
//卡车排行榜Echarts
truckChangeEcharts
()
{
echarts
.
init
(
document
.
getElementById
(
'
carManScrView_leftView_content_views3_1
'
)).
dispose
();
var
myChart
=
echarts
.
init
(
document
.
getElementById
(
'
carManScrView_leftView_content_views3_1
'
));
var
option
=
{
tooltip
:
{
trigger
:
'
axis
'
,
axisPointer
:
{
type
:
'
shadow
'
}
},
grid
:
{
top
:
'
18%
'
,
left
:
'
1%
'
,
bottom
:
'
0%
'
,
containLabel
:
true
},
//卡车切换时间
truckChangeTime
(
text
){
let
that
=
this
;
this
.
truckRankListData
.
selectTimeText
=
text
;
let
truckQuery1
=
{};
truckQuery1
.
size
=
7
;
truckQuery1
.
sort
=
this
.
truckRankListData
.
selectFieldText
;
truckQuery1
.
carclass
=
this
.
truckRankListData
.
carclass
;
if
(
text
==
'
day
'
){
HttpReq
.
truckDispatching
.
apiManmadesDay1Query
(
truckQuery1
).
then
((
res
)
=>
{
let
arr1
=
[];
let
arr2
=
[];
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
a
[
that
.
truckRankListData
.
selectFieldText
]
-
b
[
that
.
truckRankListData
.
selectFieldText
];
})
transitionRes
.
forEach
((
item
,
index
)
=>
{
arr1
.
push
(
item
.
number
);
arr2
.
push
(
item
[
this
.
truckRankListData
.
selectFieldText
]);
})
this
.
truckRankListData
.
driverName
=
arr1
;
this
.
truckRankListData
.
driverSeriesData
=
arr2
;
this
.
truckChangeEcharts
();
})
}
else
if
(
text
==
'
week
'
){
HttpReq
.
truckDispatching
.
apiManmadesZhou1Query
(
truckQuery1
).
then
((
res
)
=>
{
let
arr1
=
[];
let
arr2
=
[];
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
a
[
that
.
truckRankListData
.
selectFieldText
]
-
b
[
that
.
truckRankListData
.
selectFieldText
];
})
transitionRes
.
forEach
((
item
,
index
)
=>
{
arr1
.
push
(
item
.
number
);
arr2
.
push
(
item
[
this
.
truckRankListData
.
selectFieldText
]);
})
this
.
truckRankListData
.
driverName
=
arr1
;
this
.
truckRankListData
.
driverSeriesData
=
arr2
;
this
.
truckChangeEcharts
();
})
}
else
if
(
text
==
'
month
'
){
HttpReq
.
truckDispatching
.
apiManmadesMou1Query
(
truckQuery1
).
then
((
res
)
=>
{
let
arr1
=
[];
let
arr2
=
[];
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
a
[
that
.
truckRankListData
.
selectFieldText
]
-
b
[
that
.
truckRankListData
.
selectFieldText
];
})
transitionRes
.
forEach
((
item
,
index
)
=>
{
arr1
.
push
(
item
.
number
);
arr2
.
push
(
item
[
this
.
truckRankListData
.
selectFieldText
]);
})
this
.
truckRankListData
.
driverName
=
arr1
;
this
.
truckRankListData
.
driverSeriesData
=
arr2
;
this
.
truckChangeEcharts
();
})
xAxis
:
{
name
:
this
.
truckRankListData
.
echartsX
,
type
:
'
value
'
,
boundaryGap
:
[
0
,
0.01
],
axisLabel
:
{
show
:
true
,
textStyle
:
{
color
:
'
#BFF7FF
'
}
},
axisLine
:
{
lineStyle
:
{
color
:
'
#BFF7FF
'
,
width
:
1
}
}
},
//卡车切换字段排序
truckChangeField
(
text
){
let
that
=
this
;
this
.
truckRankListData
.
selectFieldText
=
text
;
let
truckQuery1
=
{};
truckQuery1
.
size
=
7
;
truckQuery1
.
sort
=
this
.
truckRankListData
.
selectFieldText
;
truckQuery1
.
carclass
=
this
.
truckRankListData
.
carclass
;
if
(
text
==
'
juli
'
){
this
.
truckRankListData
.
echartsX
=
'
km
'
;
}
else
if
(
text
==
'
time
'
){
this
.
truckRankListData
.
echartsX
=
'
H
'
;
}
else
if
(
text
==
'
zcar
'
){
this
.
truckRankListData
.
echartsX
=
'
吨
'
;
}
else
if
(
text
==
'
waiting
'
){
this
.
truckRankListData
.
echartsX
=
'
次
'
;
yAxis
:
{
name
:
'
车牌号
'
,
type
:
'
category
'
,
data
:
this
.
truckRankListData
.
driverName
,
axisLabel
:
{
show
:
true
,
textStyle
:
{
color
:
'
#BFF7FF
'
}
this
.
$nextTick
(()
=>
{
if
(
this
.
truckRankListData
.
selectTimeText
==
'
day
'
){
HttpReq
.
truckDispatching
.
apiManmadesDay1Query
(
truckQuery1
).
then
((
res
)
=>
{
let
arr1
=
[];
let
arr2
=
[];
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
a
[
that
.
truckRankListData
.
selectFieldText
]
-
b
[
that
.
truckRankListData
.
selectFieldText
];
})
transitionRes
.
forEach
((
item
,
index
)
=>
{
arr1
.
push
(
item
.
number
);
arr2
.
push
(
item
[
this
.
truckRankListData
.
selectFieldText
]);
})
this
.
truckRankListData
.
driverName
=
arr1
;
this
.
truckRankListData
.
driverSeriesData
=
arr2
;
this
.
truckChangeEcharts
();
})
}
else
if
(
this
.
truckRankListData
.
selectTimeText
==
'
week
'
){
HttpReq
.
truckDispatching
.
apiManmadesZhou1Query
(
truckQuery1
).
then
((
res
)
=>
{
let
arr1
=
[];
let
arr2
=
[];
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
a
[
that
.
truckRankListData
.
selectFieldText
]
-
b
[
that
.
truckRankListData
.
selectFieldText
];
})
transitionRes
.
forEach
((
item
,
index
)
=>
{
arr1
.
push
(
item
.
number
);
arr2
.
push
(
item
[
this
.
truckRankListData
.
selectFieldText
]);
})
this
.
truckRankListData
.
driverName
=
arr1
;
this
.
truckRankListData
.
driverSeriesData
=
arr2
;
this
.
truckChangeEcharts
();
})
}
else
if
(
this
.
truckRankListData
.
selectTimeText
==
'
month
'
){
HttpReq
.
truckDispatching
.
apiManmadesMou1Query
(
truckQuery1
).
then
((
res
)
=>
{
let
arr1
=
[];
let
arr2
=
[];
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
a
[
that
.
truckRankListData
.
selectFieldText
]
-
b
[
that
.
truckRankListData
.
selectFieldText
];
})
transitionRes
.
forEach
((
item
,
index
)
=>
{
arr1
.
push
(
item
.
number
);
arr2
.
push
(
item
[
this
.
truckRankListData
.
selectFieldText
]);
})
this
.
truckRankListData
.
driverName
=
arr1
;
this
.
truckRankListData
.
driverSeriesData
=
arr2
;
this
.
truckChangeEcharts
();
})
}
})
},
axisLine
:
{
lineStyle
:
{
color
:
'
#BFF7FF
'
,
width
:
0
}
}
},
//卡车排行榜Echarts
truckChangeEcharts
(){
echarts
.
init
(
document
.
getElementById
(
'
carManScrView_leftView_content_views3_1
'
)).
dispose
();
var
myChart
=
echarts
.
init
(
document
.
getElementById
(
'
carManScrView_leftView_content_views3_1
'
));
var
option
=
{
tooltip
:
{
trigger
:
'
axis
'
,
axisPointer
:
{
type
:
'
shadow
'
}
},
grid
:
{
top
:
'
18%
'
,
left
:
'
1%
'
,
bottom
:
'
0%
'
,
containLabel
:
true
},
xAxis
:
{
name
:
this
.
truckRankListData
.
echartsX
,
type
:
'
value
'
,
boundaryGap
:
[
0
,
0.01
],
axisLabel
:
{
show
:
true
,
textStyle
:
{
color
:
'
#BFF7FF
'
}
},
axisLine
:
{
lineStyle
:
{
color
:
'
#BFF7FF
'
,
width
:
1
}
}
},
yAxis
:
{
name
:
'
车牌号
'
,
type
:
'
category
'
,
data
:
this
.
truckRankListData
.
driverName
,
axisLabel
:
{
show
:
true
,
textStyle
:
{
color
:
'
#BFF7FF
'
}
},
axisLine
:
{
lineStyle
:
{
color
:
'
#BFF7FF
'
,
width
:
0
}
}
},
series
:
[
{
type
:
'
bar
'
,
barWidth
:
12
,
itemStyle
:
{
color
:
new
echarts
.
graphic
.
LinearGradient
(
0
,
0
,
1
,
0
,
[
{
offset
:
0
,
color
:
'
#23FFE2
'
},
{
offset
:
1
,
color
:
'
#0F86EB
'
}
])
},
data
:
this
.
truckRankListData
.
driverSeriesData
,
}
]
};
series
:
[
{
type
:
'
bar
'
,
barWidth
:
12
,
itemStyle
:
{
color
:
new
echarts
.
graphic
.
LinearGradient
(
0
,
0
,
1
,
0
,
[
{
offset
:
0
,
color
:
'
#23FFE2
'
},
{
offset
:
1
,
color
:
'
#0F86EB
'
}
])
option
&&
myChart
.
setOption
(
option
);
},
},
data
:
this
.
truckRankListData
.
driverSeriesData
,
}
]
};
option
&&
myChart
.
setOption
(
option
);
},
beforeDestroy
(){
if
(
this
.
DPcomputer11BoxTimer
)
{
clearInterval
(
this
.
DPcomputer11BoxTimer
);
this
.
DPcomputer11BoxTimer
=
null
;
}
},
beforeDestroy
(
)
{
if
(
this
.
DPcomputer11BoxTimer
)
{
clearInterval
(
this
.
DPcomputer11BoxTimer
)
;
this
.
DPcomputer11BoxTimer
=
null
;
}
}
}
</
script
>
<
style
scoped
>
*
{
*
{
margin
:
0
;
padding
:
0
;
}
.DPcomputer11Box
{
width
:
20vw
;
height
:
32vh
;
background-color
:
rgba
(
32
,
42
,
67
,
0.95
);
padding
:
5px
7px
;
box-sizing
:
border-box
;
overflow
:
hidden
;
.DPcomputer11Box
{
width
:
20vw
;
height
:
32vh
;
background-color
:
rgba
(
32
,
42
,
67
,
0.95
);
padding
:
5px
7px
;
box-sizing
:
border-box
;
overflow
:
hidden
;
}
.DPcomputer11Box
.carManScrView_leftView_title
{
margin-bottom
:
5px
;
width
:
100%
;
height
:
3.5vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/biaoti1.png')
;
background-size
:
100%
100%
;
padding-left
:
10px
;
box-sizing
:
border-box
;
font-size
:
18px
;
line-height
:
3.5vh
;
color
:
#FAFAFB
;
letter-spacing
:
1px
;
text-shadow
:
1px
1px
1px
#92CBFF
;
.DPcomputer11Box
.carManScrView_leftView_title
{
margin-bottom
:
5px
;
width
:
100%
;
height
:
3.5vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/biaoti1.png')
;
background-size
:
100%
100%
;
padding-left
:
10px
;
box-sizing
:
border-box
;
font-size
:
18px
;
line-height
:
3.5vh
;
color
:
#FAFAFB
;
letter-spacing
:
1px
;
text-shadow
:
1px
1px
1px
#92CBFF
;
}
.DPcomputer11Box
.truck_titleStyle
{
display
:
flex
;
justify-content
:
space-between
;
padding-right
:
4vw
;
.DPcomputer11Box
.truck_titleStyle
{
display
:
flex
;
justify-content
:
space-between
;
padding-right
:
4vw
;
}
.DPcomputer11Box
.driverTitleDateStyle
{
display
:
flex
;
color
:
#06EFFE
;
font-size
:
16px
;
text-shadow
:
0px
0px
0px
;
height
:
3.5vh
;
align-items
:
center
;
.DPcomputer11Box
.driverTitleDateStyle
{
display
:
flex
;
color
:
#06EFFE
;
font-size
:
16px
;
text-shadow
:
0px
0px
0px
;
height
:
3.5vh
;
align-items
:
center
;
}
.DPcomputer11Box
.driverTitleDateStyle_son1
{
height
:
2.5vh
;
line-height
:
2.5vh
;
margin-right
:
5px
;
padding
:
0px
5px
;
background-color
:
#2DB3BB
;
box-sizing
:
border-box
;
border-radius
:
5px
;
cursor
:
pointer
;
.DPcomputer11Box
.driverTitleDateStyle_son1
{
height
:
2.5vh
;
line-height
:
2.5vh
;
margin-right
:
5px
;
padding
:
0px
5px
;
background-color
:
#2DB3BB
;
box-sizing
:
border-box
;
border-radius
:
5px
;
cursor
:
pointer
;
}
.DPcomputer11Box
.driverTitleDateStyle_son2
{
height
:
2.5vh
;
line-height
:
2.5vh
;
margin-right
:
5px
;
padding
:
0px
5px
;
box-sizing
:
border-box
;
border-radius
:
5px
;
cursor
:
pointer
;
.DPcomputer11Box
.driverTitleDateStyle_son2
{
height
:
2.5vh
;
line-height
:
2.5vh
;
margin-right
:
5px
;
padding
:
0px
5px
;
box-sizing
:
border-box
;
border-radius
:
5px
;
cursor
:
pointer
;
}
.DPcomputer11Box
.carManScrView_rightView_content
{
width
:
100%
;
height
:
27vh
;
.DPcomputer11Box
.carManScrView_rightView_content
{
width
:
100%
;
height
:
27vh
;
}
.DPcomputer11Box
.carManScrView_leftView_content_views2
{
display
:
flex
;
justify-content
:
space-between
;
.DPcomputer11Box
.carManScrView_leftView_content_views2
{
display
:
flex
;
justify-content
:
space-between
;
}
.DPcomputer11Box
.carManScrView_leftView_content_views2
>
div
{
height
:
2.5vh
;
width
:
24%
;
font-size
:
15px
;
border
:
2px
solid
#01A6FC
;
border-radius
:
5px
;
color
:
#06EFFE
;
line-height
:
2.2vh
;
text-align
:
center
;
cursor
:
pointer
;
font-weight
:
600
;
.DPcomputer11Box
.carManScrView_leftView_content_views2
>
div
{
height
:
2.5vh
;
width
:
24%
;
font-size
:
15px
;
border
:
2px
solid
#01A6FC
;
border-radius
:
5px
;
color
:
#06EFFE
;
line-height
:
2.2vh
;
text-align
:
center
;
cursor
:
pointer
;
font-weight
:
600
;
}
.DPcomputer11Box
.selectFieldStyle
{
opacity
:
0.7
;
.DPcomputer11Box
.selectFieldStyle
{
opacity
:
0.7
;
}
.DPcomputer11Box
.carManScrView_leftView_content_views3
{
width
:
100%
;
height
:
24vh
;
overflow-y
:
auto
;
scrollbar-width
:
none
;
.DPcomputer11Box
.carManScrView_leftView_content_views3
{
width
:
100%
;
height
:
24vh
;
overflow-y
:
auto
;
scrollbar-width
:
none
;
}
.DPcomputer11Box
.carManScrView_leftView_content_views3
::-webkit-scrollbar
{
display
:
none
;
}
</
style
>
\ No newline at end of file
</
style
>
src/views/MLargeScreen/components/smallComponents/DPcomputer12.vue
View file @
27e5ba9a
<
template
>
<div
class=
"DPcomputer12Box"
>
<!-- 铲车排行榜-->
<div
class=
"carManScrView_leftView_title truck_titleStyle"
>
<div>
铲车排行榜
</div>
<div
class=
"driverTitleDateStyle"
>
<div
:class=
"forkLiftRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"forkLiftChangeTime('day')"
>
日
</div>
<div
:class=
"forkLiftRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"forkLiftChangeTime('week')"
>
周
</div>
<div
:class=
"forkLiftRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"forkLiftChangeTime('month')"
>
月
</div>
</div>
<div
class=
"DPcomputer12Box"
>
<!-- 铲车排行榜-->
<div
class=
"carManScrView_leftView_title truck_titleStyle"
>
<div>
铲车排行榜
</div>
<div
class=
"driverTitleDateStyle"
>
<div
:class=
"forkLiftRankListData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"forkLiftChangeTime('day')"
>
日
</div>
<div
class=
"carManScrView_leftView_content"
>
<div
class=
"carManScrView_leftView_content_views2"
>
<div
:class=
"forkLiftRankListData.selectFieldText == 'time' ? '' : 'selectFieldStyle' "
@
click=
"forkLiftChangeField('time')"
>
工作时长
</div>
<div
:class=
"forkLiftRankListData.selectFieldText == 'average' ? '' : 'selectFieldStyle' "
@
click=
"forkLiftChangeField('average')"
>
平均时长
</div>
<div
:class=
"forkLiftRankListData.selectFieldText == 'yunzai' ? '' : 'selectFieldStyle' "
@
click=
"forkLiftChangeField('yunzai')"
>
装车量
</div>
<div
:class=
"forkLiftRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' "
@
click=
"forkLiftChangeField('jiedan')"
>
装车数
</div>
</div>
<div
class=
"carManScrView_leftView_content_views3"
v-if=
"forkLiftRankListData.selectFieldText == 'time'"
>
<div
v-for=
"(item,index) in forkLiftRankListData.listData"
:key=
"index"
:class=
"'forkliftRankTwo' + (index + 1)"
>
<div
style=
"color:#BCF0FE;width: 45%;"
>
{{
item
.
car
}}
</div>
<div
style=
"color:#1AC9FF;width: 39%;"
>
{{
item
.
time
}}
H
</div>
<!--
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
-->
</div>
</div>
<div
class=
"carManScrView_leftView_content_views3"
v-if=
"forkLiftRankListData.selectFieldText == 'average'"
>
<div
v-for=
"(item,index) in forkLiftRankListData.listData"
:key=
"index"
:class=
"'forkliftRankTwo' + (index + 1)"
>
<div
style=
"color:#BCF0FE;width: 45%;"
>
{{
item
.
car
}}
</div>
<div
style=
"color:#1AC9FF;width: 39%;"
>
{{
item
.
average
}}
H
</div>
<!--
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
-->
</div>
</div>
<div
class=
"carManScrView_leftView_content_views3"
v-if=
"forkLiftRankListData.selectFieldText == 'yunzai'"
>
<div
v-for=
"(item,index) in forkLiftRankListData.listData"
:key=
"index"
:class=
"'forkliftRankTwo' + (index + 1)"
>
<div
style=
"color:#BCF0FE;width: 45%;"
>
{{
item
.
car
}}
</div>
<div
style=
"color:#1AC9FF;width: 39%;"
>
{{
item
.
yunzai
}}
吨
</div>
<!--
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
-->
</div>
</div>
<div
class=
"carManScrView_leftView_content_views3"
v-if=
"forkLiftRankListData.selectFieldText == 'jiedan'"
>
<div
v-for=
"(item,index) in forkLiftRankListData.listData"
:key=
"index"
:class=
"'forkliftRankTwo' + (index + 1)"
>
<div
style=
"color:#BCF0FE;width: 45%;"
>
{{
item
.
car
}}
</div>
<div
style=
"color:#1AC9FF;width: 39%;"
>
{{
item
.
jiedan
}}
辆
</div>
<!--
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
-->
</div>
</div>
<div
:class=
"forkLiftRankListData.selectTimeText == 'week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"forkLiftChangeTime('week')"
>
周
</div>
<div
:class=
"forkLiftRankListData.selectTimeText == 'month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"forkLiftChangeTime('month')"
>
月
</div>
</div>
</div>
<div
class=
"carManScrView_leftView_content"
>
<div
class=
"carManScrView_leftView_content_views2"
>
<div
:class=
"forkLiftRankListData.selectFieldText == 'workTime' ? '' : 'selectFieldStyle' "
@
click=
"forkLiftChangeField('workTime')"
>
工作时长
</div>
<div
:class=
"forkLiftRankListData.selectFieldText == 'aveTime' ? '' : 'selectFieldStyle' "
@
click=
"forkLiftChangeField('aveTime')"
>
平均时长
</div>
<div
:class=
"forkLiftRankListData.selectFieldText == 'loadingCapacity' ? '' : 'selectFieldStyle' "
@
click=
"forkLiftChangeField('loadingCapacity')"
>
装车量
</div>
<div
:class=
"forkLiftRankListData.selectFieldText == 'loadingTimes' ? '' : 'selectFieldStyle' "
@
click=
"forkLiftChangeField('loadingTimes')"
>
装车数
</div>
</div>
<div
class=
"carManScrView_leftView_content_views3"
v-if=
"forkLiftRankListData.selectFieldText == 'workTime'"
>
<div
v-for=
"(item,index) in forkLiftRankListData.listData"
:key=
"index"
:class=
"'forkliftRankTwo' + (index + 1)"
>
<div
style=
"color:#BCF0FE;width: 45%;"
>
{{
item
.
carNumber
}}
</div>
<div
style=
"color:#1AC9FF;width: 39%;"
>
{{
item
.
data
}}
min
</div>
<!--
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
-->
</div>
</div>
<div
class=
"carManScrView_leftView_content_views3"
v-if=
"forkLiftRankListData.selectFieldText == 'aveTime'"
>
<div
v-for=
"(item,index) in forkLiftRankListData.listData"
:key=
"index"
:class=
"'forkliftRankTwo' + (index + 1)"
>
<div
style=
"color:#BCF0FE;width: 45%;"
>
{{
item
.
carNumber
}}
</div>
<div
style=
"color:#1AC9FF;width: 39%;"
>
{{
item
.
data
}}
min
</div>
<!--
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
-->
</div>
</div>
<div
class=
"carManScrView_leftView_content_views3"
v-if=
"forkLiftRankListData.selectFieldText == 'loadingCapacity'"
>
<div
v-for=
"(item,index) in forkLiftRankListData.listData"
:key=
"index"
:class=
"'forkliftRankTwo' + (index + 1)"
>
<div
style=
"color:#BCF0FE;width: 45%;"
>
{{
item
.
carNumber
}}
</div>
<div
style=
"color:#1AC9FF;width: 39%;"
>
{{
item
.
data
}}
吨
</div>
<!--
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
-->
</div>
</div>
<div
class=
"carManScrView_leftView_content_views3"
v-if=
"forkLiftRankListData.selectFieldText == 'loadingTimes'"
>
<div
v-for=
"(item,index) in forkLiftRankListData.listData"
:key=
"index"
:class=
"'forkliftRankTwo' + (index + 1)"
>
<div
style=
"color:#BCF0FE;width: 45%;"
>
{{
item
.
carNumber
}}
</div>
<div
style=
"color:#1AC9FF;width: 39%;"
>
{{
item
.
data
}}
辆
</div>
<!--
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
-->
</div>
</div>
</div>
</div>
</
template
>
<
script
>
import
{
Tools
,
HttpReq
,
CAMap
}
from
'
@/assets/js/common.js
'
;
import
{
Tools
,
HttpReq
,
CAMap
}
from
'
@/assets/js/common.js
'
;
export
default
{
data
(){
return
{
DPcomputer12BoxTimer
:
null
,
//铲车排行榜
forkLiftRankListData
:{
carclass
:
'
铲车
'
,
selectTimeText
:
'
day
'
,
selectFieldText
:
'
time
'
,
listData
:[],
},
}
data
()
{
return
{
DPcomputer12BoxTimer
:
null
,
//铲车排行榜
forkLiftRankListData
:
{
carclass
:
'
铲车
'
,
selectTimeText
:
'
day
'
,
selectFieldText
:
'
workTime
'
,
listData
:
[
{
carNumber
:
''
,
data
:
0
},
{
carNumber
:
''
,
data
:
0
},
{
carNumber
:
''
,
data
:
0
},
{
carNumber
:
''
,
data
:
0
},
{
carNumber
:
''
,
data
:
0
}
],
},
}
},
mounted
()
{
this
.
loadData
();
this
.
DPcomputer12BoxTimer
=
setInterval
(()
=>
{
this
.
loadData
();
},
20000
)
},
methods
:
{
loadData
()
{
//获取铲车排行榜
let
forkLiftQuery1
=
{};
forkLiftQuery1
.
size
=
5
;
forkLiftQuery1
.
sort
=
this
.
forkLiftRankListData
.
selectFieldText
;
forkLiftQuery1
.
carclass
=
this
.
forkLiftRankListData
.
carclass
;
forkLiftQuery1
.
duration
=
this
.
forkLiftRankListData
.
selectTimeText
;
this
.
$nextTick
(()
=>
{
HttpReq
.
truckDispatching
.
apiManmadeschanjiedanDayQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
if
(
res
.
data
&&
res
.
data
.
length
){
this
.
forkLiftRankListData
.
listData
=
res
.
data
;
}
else
{
this
.
forkLiftRankListData
.
listData
=
[{
carNumber
:
''
,
data
:
0
},{
carNumber
:
''
,
data
:
0
},{
carNumber
:
''
,
data
:
0
},{
carNumber
:
''
,
data
:
0
},{
carNumber
:
''
,
data
:
0
}];
}
})
})
},
mounted
(){
this
.
loadData
();
//铲车切换时间
forkLiftChangeTime
(
text
)
{
this
.
forkLiftRankListData
.
selectTimeText
=
text
;
this
.
loadData
();
},
methods
:{
loadData
(){
let
that
=
this
;
//获取铲车排行榜
let
forkLiftQuery1
=
{};
forkLiftQuery1
.
size
=
5
;
forkLiftQuery1
.
sort
=
this
.
forkLiftRankListData
.
selectFieldText
;
forkLiftQuery1
.
carclass
=
this
.
forkLiftRankListData
.
carclass
;
this
.
$nextTick
(()
=>
{
if
(
this
.
forkLiftRankListData
.
selectTimeText
==
'
day
'
){
HttpReq
.
truckDispatching
.
apiManmadeschanjiedanDayQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
b
[
that
.
forkLiftRankListData
.
selectFieldText
]
-
a
[
that
.
forkLiftRankListData
.
selectFieldText
];
})
this
.
forkLiftRankListData
.
listData
=
transitionRes
;
})
}
else
if
(
this
.
forkLiftRankListData
.
selectTimeText
==
'
week
'
){
HttpReq
.
truckDispatching
.
apiManmadesChanjiedanZhouQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
b
[
that
.
forkLiftRankListData
.
selectFieldText
]
-
a
[
that
.
forkLiftRankListData
.
selectFieldText
];
})
this
.
forkLiftRankListData
.
listData
=
transitionRes
;
})
}
else
if
(
this
.
forkLiftRankListData
.
selectTimeText
==
'
month
'
){
HttpReq
.
truckDispatching
.
apiManmadesChanjiedanMouQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
b
[
that
.
forkLiftRankListData
.
selectFieldText
]
-
a
[
that
.
forkLiftRankListData
.
selectFieldText
];
})
this
.
forkLiftRankListData
.
listData
=
transitionRes
;
})
}
})
this
.
DPcomputer12BoxTimer
=
setInterval
(()
=>
{
//获取铲车排行榜
let
forkLiftQuery1
=
{};
forkLiftQuery1
.
size
=
5
;
forkLiftQuery1
.
sort
=
this
.
forkLiftRankListData
.
selectFieldText
;
forkLiftQuery1
.
carclass
=
this
.
forkLiftRankListData
.
carclass
;
this
.
$nextTick
(()
=>
{
if
(
this
.
forkLiftRankListData
.
selectTimeText
==
'
day
'
){
HttpReq
.
truckDispatching
.
apiManmadeschanjiedanDayQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
b
[
that
.
forkLiftRankListData
.
selectFieldText
]
-
a
[
that
.
forkLiftRankListData
.
selectFieldText
];
})
this
.
forkLiftRankListData
.
listData
=
transitionRes
;
})
}
else
if
(
this
.
forkLiftRankListData
.
selectTimeText
==
'
week
'
){
HttpReq
.
truckDispatching
.
apiManmadesChanjiedanZhouQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
b
[
that
.
forkLiftRankListData
.
selectFieldText
]
-
a
[
that
.
forkLiftRankListData
.
selectFieldText
];
})
this
.
forkLiftRankListData
.
listData
=
transitionRes
;
})
}
else
if
(
this
.
forkLiftRankListData
.
selectTimeText
==
'
month
'
){
HttpReq
.
truckDispatching
.
apiManmadesChanjiedanMouQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
b
[
that
.
forkLiftRankListData
.
selectFieldText
]
-
a
[
that
.
forkLiftRankListData
.
selectFieldText
];
})
this
.
forkLiftRankListData
.
listData
=
transitionRes
;
})
}
})
},
20000
)
},
//铲车切换时间
forkLiftChangeTime
(
text
){
let
that
=
this
;
this
.
forkLiftRankListData
.
selectTimeText
=
text
;
let
forkLiftQuery1
=
{};
forkLiftQuery1
.
size
=
5
;
forkLiftQuery1
.
sort
=
this
.
forkLiftRankListData
.
selectFieldText
;
forkLiftQuery1
.
carclass
=
this
.
forkLiftRankListData
.
carclass
;
if
(
text
==
'
day
'
){
HttpReq
.
truckDispatching
.
apiManmadeschanjiedanDayQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
b
[
that
.
forkLiftRankListData
.
selectFieldText
]
-
a
[
that
.
forkLiftRankListData
.
selectFieldText
];
})
this
.
forkLiftRankListData
.
listData
=
transitionRes
;
})
}
if
(
text
==
'
week
'
){
HttpReq
.
truckDispatching
.
apiManmadesChanjiedanZhouQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
b
[
that
.
forkLiftRankListData
.
selectFieldText
]
-
a
[
that
.
forkLiftRankListData
.
selectFieldText
];
})
this
.
forkLiftRankListData
.
listData
=
transitionRes
;
})
}
if
(
text
==
'
month
'
){
HttpReq
.
truckDispatching
.
apiManmadesChanjiedanMouQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
b
[
that
.
forkLiftRankListData
.
selectFieldText
]
-
a
[
that
.
forkLiftRankListData
.
selectFieldText
];
})
this
.
forkLiftRankListData
.
listData
=
transitionRes
;
})
}
},
//铲车切换字段排序
forkLiftChangeField
(
text
){
let
that
=
this
;
this
.
forkLiftRankListData
.
selectFieldText
=
text
;
let
forkLiftQuery1
=
{};
forkLiftQuery1
.
size
=
5
;
forkLiftQuery1
.
sort
=
this
.
forkLiftRankListData
.
selectFieldText
;
forkLiftQuery1
.
carclass
=
this
.
forkLiftRankListData
.
carclass
;
this
.
$nextTick
(()
=>
{
if
(
this
.
forkLiftRankListData
.
selectTimeText
==
'
day
'
){
HttpReq
.
truckDispatching
.
apiManmadeschanjiedanDayQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
b
[
that
.
forkLiftRankListData
.
selectFieldText
]
-
a
[
that
.
forkLiftRankListData
.
selectFieldText
];
})
this
.
forkLiftRankListData
.
listData
=
transitionRes
;
})
}
else
if
(
this
.
forkLiftRankListData
.
selectTimeText
==
'
week
'
){
HttpReq
.
truckDispatching
.
apiManmadesChanjiedanZhouQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
b
[
that
.
forkLiftRankListData
.
selectFieldText
]
-
a
[
that
.
forkLiftRankListData
.
selectFieldText
];
})
this
.
forkLiftRankListData
.
listData
=
transitionRes
;
})
}
else
if
(
this
.
forkLiftRankListData
.
selectTimeText
==
'
month
'
){
HttpReq
.
truckDispatching
.
apiManmadesChanjiedanMouQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
let
transitionRes
=
res
.
sort
(
function
(
a
,
b
){
return
b
[
that
.
forkLiftRankListData
.
selectFieldText
]
-
a
[
that
.
forkLiftRankListData
.
selectFieldText
];
})
this
.
forkLiftRankListData
.
listData
=
transitionRes
;
})
}
})
},
//铲车切换字段排序
forkLiftChangeField
(
text
)
{
this
.
forkLiftRankListData
.
selectFieldText
=
text
;
this
.
loadData
();
},
beforeDestroy
(){
if
(
this
.
DPcomputer12BoxTimer
)
{
clearInterval
(
this
.
DPcomputer12BoxTimer
);
this
.
DPcomputer12BoxTimer
=
null
;
}
},
beforeDestroy
(
)
{
if
(
this
.
DPcomputer12BoxTimer
)
{
clearInterval
(
this
.
DPcomputer12BoxTimer
)
;
this
.
DPcomputer12BoxTimer
=
null
;
}
}
}
</
script
>
<
style
scoped
>
*
{
*
{
margin
:
0
;
padding
:
0
;
}
.DPcomputer12Box
{
width
:
20vw
;
height
:
32vh
;
background-color
:
rgba
(
32
,
42
,
67
,
0.95
);
padding
:
5px
7px
;
box-sizing
:
border-box
;
overflow
:
hidden
;
.DPcomputer12Box
{
width
:
20vw
;
height
:
32vh
;
background-color
:
rgba
(
32
,
42
,
67
,
0.95
);
padding
:
5px
7px
;
box-sizing
:
border-box
;
overflow
:
hidden
;
}
.DPcomputer12Box
.carManScrView_leftView_title
{
margin-bottom
:
5px
;
width
:
100%
;
height
:
3.5vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/biaoti1.png')
;
background-size
:
100%
100%
;
padding-left
:
10px
;
box-sizing
:
border-box
;
font-size
:
18px
;
line-height
:
3.5vh
;
color
:
#FAFAFB
;
letter-spacing
:
1px
;
text-shadow
:
1px
1px
1px
#92CBFF
;
.DPcomputer12Box
.carManScrView_leftView_title
{
margin-bottom
:
5px
;
width
:
100%
;
height
:
3.5vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/biaoti1.png')
;
background-size
:
100%
100%
;
padding-left
:
10px
;
box-sizing
:
border-box
;
font-size
:
18px
;
line-height
:
3.5vh
;
color
:
#FAFAFB
;
letter-spacing
:
1px
;
text-shadow
:
1px
1px
1px
#92CBFF
;
}
.DPcomputer12Box
.truck_titleStyle
{
display
:
flex
;
justify-content
:
space-between
;
padding-right
:
4vw
;
.DPcomputer12Box
.truck_titleStyle
{
display
:
flex
;
justify-content
:
space-between
;
padding-right
:
4vw
;
}
.DPcomputer12Box
.driverTitleDateStyle
{
display
:
flex
;
color
:
#06EFFE
;
font-size
:
16px
;
text-shadow
:
0px
0px
0px
;
height
:
3.5vh
;
align-items
:
center
;
.DPcomputer12Box
.driverTitleDateStyle
{
display
:
flex
;
color
:
#06EFFE
;
font-size
:
16px
;
text-shadow
:
0px
0px
0px
;
height
:
3.5vh
;
align-items
:
center
;
}
.DPcomputer12Box
.driverTitleDateStyle_son1
{
height
:
2.5vh
;
line-height
:
2.5vh
;
margin-right
:
5px
;
padding
:
0px
5px
;
background-color
:
#2DB3BB
;
box-sizing
:
border-box
;
border-radius
:
5px
;
cursor
:
pointer
;
.DPcomputer12Box
.driverTitleDateStyle_son1
{
height
:
2.5vh
;
line-height
:
2.5vh
;
margin-right
:
5px
;
padding
:
0px
5px
;
background-color
:
#2DB3BB
;
box-sizing
:
border-box
;
border-radius
:
5px
;
cursor
:
pointer
;
}
.DPcomputer12Box
.driverTitleDateStyle_son2
{
height
:
2.5vh
;
line-height
:
2.5vh
;
margin-right
:
5px
;
padding
:
0px
5px
;
box-sizing
:
border-box
;
border-radius
:
5px
;
cursor
:
pointer
;
.DPcomputer12Box
.driverTitleDateStyle_son2
{
height
:
2.5vh
;
line-height
:
2.5vh
;
margin-right
:
5px
;
padding
:
0px
5px
;
box-sizing
:
border-box
;
border-radius
:
5px
;
cursor
:
pointer
;
}
.DPcomputer12Box
.carManScrView_leftView_content
{
width
:
100%
;
height
:
27vh
;
.DPcomputer12Box
.carManScrView_leftView_content
{
width
:
100%
;
height
:
27vh
;
}
.DPcomputer12Box
.carManScrView_leftView_content_views2
{
display
:
flex
;
justify-content
:
space-between
;
.DPcomputer12Box
.carManScrView_leftView_content_views2
{
display
:
flex
;
justify-content
:
space-between
;
}
.DPcomputer12Box
.carManScrView_leftView_content_views2
>
div
{
height
:
2.5vh
;
width
:
24%
;
font-size
:
15px
;
border
:
2px
solid
#01A6FC
;
border-radius
:
5px
;
color
:
#06EFFE
;
line-height
:
2.2vh
;
text-align
:
center
;
cursor
:
pointer
;
font-weight
:
600
;
.DPcomputer12Box
.carManScrView_leftView_content_views2
>
div
{
height
:
2.5vh
;
width
:
24%
;
font-size
:
15px
;
border
:
2px
solid
#01A6FC
;
border-radius
:
5px
;
color
:
#06EFFE
;
line-height
:
2.2vh
;
text-align
:
center
;
cursor
:
pointer
;
font-weight
:
600
;
}
.DPcomputer12Box
.selectFieldStyle
{
opacity
:
0.7
;
.DPcomputer12Box
.selectFieldStyle
{
opacity
:
0.7
;
}
.DPcomputer12Box
.carManScrView_leftView_content_views3
{
width
:
100%
;
height
:
24vh
;
overflow-y
:
auto
;
scrollbar-width
:
none
;
.DPcomputer12Box
.carManScrView_leftView_content_views3
{
width
:
100%
;
height
:
24vh
;
overflow-y
:
auto
;
scrollbar-width
:
none
;
}
.DPcomputer12Box
.carManScrView_leftView_content_views3
::-webkit-scrollbar
{
display
:
none
;
}
.DPcomputer12Box
.forkliftRankTwo1
{
margin-top
:
1vh
;
margin-bottom
:
1.5vh
;
display
:
flex
;
justify-content
:
space-evenly
;
width
:
100%
;
height
:
3vh
;
line-height
:
3vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/list1.png')
;
background-size
:
100%
100%
;
padding-left
:
4vw
;
box-sizing
:
border-box
;
text-align
:
center
;
.DPcomputer12Box
.forkliftRankTwo1
{
margin-top
:
1vh
;
margin-bottom
:
1.5vh
;
display
:
flex
;
justify-content
:
space-evenly
;
width
:
100%
;
height
:
3vh
;
line-height
:
3vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/list1.png')
;
background-size
:
100%
100%
;
padding-left
:
4vw
;
box-sizing
:
border-box
;
text-align
:
center
;
}
.DPcomputer12Box
.forkliftRankTwo2
{
margin-bottom
:
1.5vh
;
display
:
flex
;
justify-content
:
space-evenly
;
width
:
100%
;
height
:
3vh
;
line-height
:
3vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/list2.png')
;
background-size
:
100%
100%
;
padding-left
:
4vw
;
box-sizing
:
border-box
;
text-align
:
center
;
.DPcomputer12Box
.forkliftRankTwo2
{
margin-bottom
:
1.5vh
;
display
:
flex
;
justify-content
:
space-evenly
;
width
:
100%
;
height
:
3vh
;
line-height
:
3vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/list2.png')
;
background-size
:
100%
100%
;
padding-left
:
4vw
;
box-sizing
:
border-box
;
text-align
:
center
;
}
.DPcomputer12Box
.forkliftRankTwo3
{
margin-bottom
:
1.5vh
;
display
:
flex
;
justify-content
:
space-evenly
;
width
:
100%
;
height
:
3vh
;
line-height
:
3vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/list3.png')
;
background-size
:
100%
100%
;
padding-left
:
4vw
;
box-sizing
:
border-box
;
text-align
:
center
;
.DPcomputer12Box
.forkliftRankTwo3
{
margin-bottom
:
1.5vh
;
display
:
flex
;
justify-content
:
space-evenly
;
width
:
100%
;
height
:
3vh
;
line-height
:
3vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/list3.png')
;
background-size
:
100%
100%
;
padding-left
:
4vw
;
box-sizing
:
border-box
;
text-align
:
center
;
}
.DPcomputer12Box
.forkliftRankTwo4
{
margin-bottom
:
1.5vh
;
display
:
flex
;
justify-content
:
space-evenly
;
width
:
100%
;
height
:
3vh
;
line-height
:
3vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/list4.png')
;
background-size
:
100%
100%
;
padding-left
:
4vw
;
box-sizing
:
border-box
;
text-align
:
center
;
.DPcomputer12Box
.forkliftRankTwo4
{
margin-bottom
:
1.5vh
;
display
:
flex
;
justify-content
:
space-evenly
;
width
:
100%
;
height
:
3vh
;
line-height
:
3vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/list4.png')
;
background-size
:
100%
100%
;
padding-left
:
4vw
;
box-sizing
:
border-box
;
text-align
:
center
;
}
.DPcomputer12Box
.forkliftRankTwo5
{
display
:
flex
;
justify-content
:
space-evenly
;
width
:
100%
;
height
:
3vh
;
line-height
:
3vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/list5.png')
;
background-size
:
100%
100%
;
padding-left
:
4vw
;
box-sizing
:
border-box
;
text-align
:
center
;
.DPcomputer12Box
.forkliftRankTwo5
{
display
:
flex
;
justify-content
:
space-evenly
;
width
:
100%
;
height
:
3vh
;
line-height
:
3vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/list5.png')
;
background-size
:
100%
100%
;
padding-left
:
4vw
;
box-sizing
:
border-box
;
text-align
:
center
;
}
</
style
>
\ No newline at end of file
</
style
>
src/views/MLargeScreen/components/smallComponents/DPcomputer5.vue
View file @
27e5ba9a
...
...
@@ -4,48 +4,47 @@
<div
class=
"dataScrView_centerView_title"
>
<div
:class=
"centerViewData.moduleText == 'centerModule1' ? 'centerModuleSelectStyle' : ''"
@
click=
"centerSelectFn('centerModule1')"
>
产量数据
</div>
<div
:class=
"centerViewData.moduleText == 'centerModule2' ? 'centerModuleSelectStyle' : ''"
@
click=
"centerSelectFn('centerModule2')"
>
运载数据
</div>
<!--
<div
:class=
"centerViewData.moduleText == 'centerModule3' ? 'centerModuleSelectStyle' : ''"
@
click=
"centerSelectFn('centerModule3')"
>
装载数据
</div>
-->
</div>
<div
class=
"dataScrView_centerView_planNum"
v-if=
"centerViewData.moduleText == 'centerModule1'"
>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
今日计划量
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
outputMineData
.
day
.
plan
}}
吨
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
clData
.
todayPlan
}}
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/renwujihua1.png"
>
</div>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
今日完成量
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
outputMineData
.
day
.
finish
}}
吨
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
clData
.
todayComplete
}}
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/mubiaoguanli1.png"
>
</div>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
今日完成率
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
parseInt
(
outputMineData
.
day
.
eff
)
}}
%
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
clData
.
todayCompleteRate
}}
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/wancheng1.png"
>
</div>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
当月计划量
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
outputMineData
.
month
.
plan
}}
吨
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
clData
.
toMonthPlan
}}
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/jihuarenwu2.png"
>
</div>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
当月累计完成量
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
outputMineData
.
month
.
finish
}}
吨
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
clData
.
toMonthComplete
}}
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/zichantongji1.png"
>
</div>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
当月完成率
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
parseInt
(
outputMineData
.
month
.
eff
)
}}
%
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
clData
.
toMonthCompleteRate
}}
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/wanchenglv1.png"
>
</div>
...
...
@@ -54,76 +53,46 @@
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
今日总运载量
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
c
arryCenterData
.
dayAllCarry1
}}
吨
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
c
lData
.
yunZaiTotal
}}
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/renwujihua1.png"
>
</div>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
今日平均运载量
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
c
arryCenterData
.
dayAverageCarry1
}}
吨/小时
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
c
lData
.
yunZaiAveHour
}}
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/mubiaoguanli1.png"
>
</div>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
今日总里程数
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
c
arryCenterData
.
dayAllMil1
}}
KM
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
c
lData
.
milTotal
}}
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/wancheng1.png"
>
</div>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
今日总车数
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
c
arryCenterData
.
dayAllCarNum
?
carryCenterData
.
dayAllCarNum
:
0
}}
辆
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
c
lData
.
trainsTotal
}}
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/jihuarenwu2.png"
>
</div>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
单次运载平均时长
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
c
arryCenterData
.
singleAverageTime
}}
H
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
c
lData
.
aveSingleTransportTime
}}
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/zichantongji1.png"
>
</div>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
单次运载平均里程
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
c
arryCenterData
.
singleAverageMil
}}
KM
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
c
lData
.
aveSingleTransportMil
}}
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/wanchenglv1.png"
>
</div>
</div>
<div
class=
"dataScrView_centerView_planNum3"
v-if=
"centerViewData.moduleText == 'centerModule3'"
>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
今日装载量
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
loadCenterData
.
dayAllLoad1
}}
吨
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/renwujihua1.png"
>
</div>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
今日平均装载量
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
loadCenterData
.
dayAverageLoad1
}}
吨/小时
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/mubiaoguanli1.png"
>
</div>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
今日总工时
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
loadCenterData
.
dayAllTime
}}
H
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/wancheng1.png"
>
</div>
<div>
<div>
<div
style=
"color:#FFFFFF;font-size:14px;"
>
今日装载车数
</div>
<div
style=
"color:#00E9FD;font-size:16px;font-weight:600;"
>
{{
loadCenterData
.
dayLoadCarNum
?
loadCenterData
.
dayLoadCarNum
:
0
}}
辆
</div>
</div>
<img
src=
"../../../../assets/images/cutGraph/jihuarenwu2.png"
>
</div>
</div>
<div
id=
"centerEchartsView"
></div>
</div>
</
template
>
...
...
@@ -134,318 +103,182 @@ import * as echarts from 'echarts';
export
default
{
data
(){
return
{
DPcomputer5BoxTimer
:
null
,
//产量数据以及中间图表数据
outputMineData
:{
day
:{
finish
:
'
0
'
,
eff
:
0
,
plan
:
'
0
'
,},
month
:{
finish
:
'
0
'
,
eff
:
0
,
plan
:
'
0
'
,},
year
:{
finish
:
'
0
'
,
eff
:
0
,
plan
:
'
0
'
,},
},
//运载数据以及中间图表数据
carryCenterData
:{
dayAllCarry1
:
0
,
dayAverageCarry1
:
0
,
dayAllMil1
:
0
,
dayAllCarNum
:
0
,
singleAverageTime
:
0
,
singleAverageMil
:
0
,
},
//装载数据据以及中间图表数据
loadCenterData
:{
dayAllLoad1
:
0
,
dayAverageLoad1
:
0
,
dayAllTime
:
0
,
dayLoadCarNum
:
0
,
},
//中间模块选择
centerViewData
:{
moduleText
:
'
centerModule1
'
,
xAxisData
:[
'
00:00
'
,
'
01:00
'
,
'
02:00
'
,
'
03:00
'
,
'
04:00
'
,
'
05:00
'
,
'
06:00
'
,
'
07:00
'
,
'
08:00
'
,
'
09:00
'
,
'
10:00
'
,
'
11:00
'
,
'
12:00
'
,
'
13:00
'
,
'
14:00
'
,
'
15:00
'
,
'
16:00
'
,
'
17:00
'
,
'
18:00
'
,
'
19:00
'
,
'
20:00
'
,
'
21:00
'
,
'
22:00
'
,
'
23:00
'
],
seriesData
:[
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
],
},
data
()
{
return
{
DPcomputer5BoxTimer
:
null
,
//产量数据以及中间图表数据
outputMineData
:
{
day
:
{
finish
:
'
0
'
,
eff
:
0
,
plan
:
'
0
'
,},
month
:
{
finish
:
'
0
'
,
eff
:
0
,
plan
:
'
0
'
,},
year
:
{
finish
:
'
0
'
,
eff
:
0
,
plan
:
'
0
'
,},
},
//运载数据以及中间图表数据
carryCenterData
:
{
dayAllCarry1
:
0
,
dayAverageCarry1
:
0
,
dayAllMil1
:
0
,
dayAllCarNum
:
0
,
singleAverageTime
:
0
,
singleAverageMil
:
0
,
},
//装载数据据以及中间图表数据
loadCenterData
:
{
dayAllLoad1
:
0
,
dayAverageLoad1
:
0
,
dayAllTime
:
0
,
dayLoadCarNum
:
0
,
},
//中间模块选择
centerViewData
:
{
moduleText
:
'
centerModule1
'
,
xAxisData
:
[
'
00:00
'
,
'
01:00
'
,
'
02:00
'
,
'
03:00
'
,
'
04:00
'
,
'
05:00
'
,
'
06:00
'
,
'
07:00
'
,
'
08:00
'
,
'
09:00
'
,
'
10:00
'
,
'
11:00
'
,
'
12:00
'
,
'
13:00
'
,
'
14:00
'
,
'
15:00
'
,
'
16:00
'
,
'
17:00
'
,
'
18:00
'
,
'
19:00
'
,
'
20:00
'
,
'
21:00
'
,
'
22:00
'
,
'
23:00
'
],
seriesData
:
[
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
],
},
clData
:{
toMonthComplete
:
"
暂无数据
"
,
toMonthCompleteRate
:
"
暂无数据
"
,
toMonthPlan
:
"
暂无数据
"
,
todayComplete
:
"
暂无数据
"
,
todayCompleteRate
:
"
暂无数据
"
,
todayPlan
:
"
暂无数据
"
,
yunZaiTotal
:
"
暂无数据
"
,
yunZaiAveHour
:
"
暂无数据
"
,
milTotal
:
"
暂无数据
"
,
trainsTotal
:
"
暂无数据
"
,
aveSingleTransportTime
:
"
暂无数据
"
,
aveSingleTransportMil
:
"
暂无数据
"
,
},
}
},
mounted
()
{
this
.
loadData
();
this
.
DPcomputer5BoxTimer
=
setInterval
(()
=>
{
this
.
loadData
();
},
10000
)
},
methods
:
{
loadData
()
{
//获取采区当前日产量
HttpReq
.
truckDispatching
.
apiPlanDayQuery
().
then
((
res
)
=>
{
this
.
clData
=
res
.
data
;
})
//中间echarts图表
HttpReq
.
truckDispatching
.
apiPlanTime1Query
().
then
((
res
)
=>
{
this
.
centerViewData
.
seriesData
=
res
.
data
||
[];
this
.
centerEcharts
();
})
//中间echarts运载数据
HttpReq
.
truckDispatching
.
apiPlanZDay1Query
().
then
((
res
)
=>
{
if
(
res
.
length
!=
0
)
{
this
.
carryCenterData
.
dayAllCarry1
=
res
[
0
].
finish
;
this
.
carryCenterData
.
dayAverageCarry1
=
parseFloat
(
res
[
0
].
pfin
).
toFixed
(
2
);
this
.
carryCenterData
.
dayAllMil1
=
res
[
0
].
allmil
?
parseFloat
(
res
[
0
].
allmil
).
toFixed
(
3
)
:
0
;
this
.
carryCenterData
.
dayAllCarNum
=
res
[
0
].
num
;
this
.
carryCenterData
.
singleAverageTime
=
parseFloat
(
res
[
0
].
time
).
toFixed
(
2
);
this
.
carryCenterData
.
singleAverageMil
=
res
[
0
].
averagemil
?
parseFloat
(
res
[
0
].
averagemil
).
toFixed
(
3
)
:
0
;
}
})
//中间echarts装载数据
HttpReq
.
truckDispatching
.
apiPlanZMonth1Query
().
then
((
res
)
=>
{
if
(
res
.
length
!=
0
)
{
this
.
loadCenterData
.
dayAllLoad1
=
res
[
0
].
finish
;
this
.
loadCenterData
.
dayAverageLoad1
=
parseFloat
(
res
[
0
].
pfin
).
toFixed
(
2
);
this
.
loadCenterData
.
dayAllTime
=
res
[
0
].
time
;
this
.
loadCenterData
.
dayLoadCarNum
=
res
[
0
].
num
;
}
})
},
mounted
(){
this
.
loadData
();
//中间模块选择
centerSelectFn
(
text
)
{
this
.
centerViewData
.
moduleText
=
text
;
this
.
loadData
();
},
methods
:{
loadData
()
{
//获取采区当前日产量
HttpReq
.
truckDispatching
.
apiPlanDayQuery
().
then
((
res
)
=>
{
let
undueArray
=
{};
if
(
res
.
length
==
0
||
JSON
.
stringify
(
res
[
0
])
==
'
{}
'
)
{
undueArray
.
eff
=
0
;
undueArray
.
finish
=
0
;
undueArray
.
plan
=
0
;
}
else
{
if
(
res
[
0
].
eff
==
''
)
{
undueArray
.
eff
=
0
;
undueArray
.
finish
=
res
[
0
].
finish
;
undueArray
.
plan
=
res
[
0
].
plan
;
}
else
{
undueArray
.
eff
=
parseFloat
(
res
[
0
].
eff
)
*
100
;
undueArray
.
finish
=
res
[
0
].
finish
;
undueArray
.
plan
=
res
[
0
].
plan
;
}
}
this
.
outputMineData
.
day
=
undueArray
;
})
//获取采区当前月产量
HttpReq
.
truckDispatching
.
apiPlanMonthQuery
().
then
((
res
)
=>
{
let
undueArray
=
{};
if
(
res
.
length
==
0
||
JSON
.
stringify
(
res
[
0
])
==
'
{}
'
)
{
undueArray
.
eff
=
0
;
undueArray
.
finish
=
0
;
undueArray
.
plan
=
0
;
}
else
{
if
(
res
[
0
].
eff
==
''
)
{
undueArray
.
eff
=
0
;
undueArray
.
finish
=
res
[
0
].
finish
;
undueArray
.
plan
=
res
[
0
].
plan
;
}
else
{
undueArray
.
eff
=
parseFloat
(
res
[
0
].
eff
)
*
100
;
undueArray
.
finish
=
res
[
0
].
finish
;
undueArray
.
plan
=
res
[
0
].
plan
;
}
}
this
.
outputMineData
.
month
=
undueArray
;
})
//获取采区当前年产量
HttpReq
.
truckDispatching
.
apiPlanYearQuery
().
then
((
res
)
=>
{
let
undueArray
=
{};
if
(
res
.
length
==
0
||
JSON
.
stringify
(
res
[
0
])
==
'
{}
'
)
{
undueArray
.
eff
=
0
;
undueArray
.
finish
=
0
;
undueArray
.
plan
=
0
;
}
else
{
if
(
res
[
0
].
eff
==
''
)
{
undueArray
.
eff
=
0
;
undueArray
.
finish
=
res
[
0
].
finish
;
undueArray
.
plan
=
res
[
0
].
plan
;
}
else
{
undueArray
.
eff
=
parseFloat
(
res
[
0
].
eff
)
*
100
;
undueArray
.
finish
=
res
[
0
].
finish
;
undueArray
.
plan
=
res
[
0
].
plan
;
}
}
this
.
outputMineData
.
year
=
undueArray
;
})
//中间echarts图表
HttpReq
.
truckDispatching
.
apiPlanTime1Query
().
then
((
res
)
=>
{
// let arr3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
// res.forEach((item, index) => {
// arr3.splice(parseInt(item.hour) - 7, 1, parseFloat(item.finish));
// })
this
.
centerViewData
.
seriesData
=
res
.
data
||
[];
this
.
centerEcharts
();
})
//中间echarts运载数据
HttpReq
.
truckDispatching
.
apiPlanZDay1Query
().
then
((
res
)
=>
{
if
(
res
.
length
!=
0
)
{
this
.
carryCenterData
.
dayAllCarry1
=
res
[
0
].
finish
;
this
.
carryCenterData
.
dayAverageCarry1
=
parseFloat
(
res
[
0
].
pfin
).
toFixed
(
2
);
this
.
carryCenterData
.
dayAllMil1
=
res
[
0
].
allmil
?
parseFloat
(
res
[
0
].
allmil
).
toFixed
(
3
)
:
0
;
this
.
carryCenterData
.
dayAllCarNum
=
res
[
0
].
num
;
this
.
carryCenterData
.
singleAverageTime
=
parseFloat
(
res
[
0
].
time
).
toFixed
(
2
);
this
.
carryCenterData
.
singleAverageMil
=
res
[
0
].
averagemil
?
parseFloat
(
res
[
0
].
averagemil
).
toFixed
(
3
)
:
0
;
//中间模块Echarts
centerEcharts
()
{
echarts
.
init
(
document
.
getElementById
(
'
centerEchartsView
'
)).
dispose
();
var
myChart
=
echarts
.
init
(
document
.
getElementById
(
'
centerEchartsView
'
));
var
option
=
{
tooltip
:
{
trigger
:
'
axis
'
,
axisPointer
:
{
type
:
'
shadow
'
}
})
//中间echarts装载数据
HttpReq
.
truckDispatching
.
apiPlanZMonth1Query
().
then
((
res
)
=>
{
if
(
res
.
length
!=
0
)
{
this
.
loadCenterData
.
dayAllLoad1
=
res
[
0
].
finish
;
this
.
loadCenterData
.
dayAverageLoad1
=
parseFloat
(
res
[
0
].
pfin
).
toFixed
(
2
);
this
.
loadCenterData
.
dayAllTime
=
res
[
0
].
time
;
this
.
loadCenterData
.
dayLoadCarNum
=
res
[
0
].
num
;
}
})
this
.
DPcomputer5BoxTimer
=
setInterval
(()
=>
{
//获取采区当前日产量
HttpReq
.
truckDispatching
.
apiPlanDayQuery
().
then
((
res
)
=>
{
let
undueArray
=
{};
if
(
res
.
length
==
0
||
JSON
.
stringify
(
res
[
0
])
==
'
{}
'
)
{
undueArray
.
eff
=
0
;
undueArray
.
finish
=
0
;
undueArray
.
plan
=
0
;
}
else
{
if
(
res
[
0
].
eff
==
''
)
{
undueArray
.
eff
=
0
;
undueArray
.
finish
=
res
[
0
].
finish
;
undueArray
.
plan
=
res
[
0
].
plan
;
}
else
{
undueArray
.
eff
=
parseFloat
(
res
[
0
].
eff
)
*
100
;
undueArray
.
finish
=
res
[
0
].
finish
;
undueArray
.
plan
=
res
[
0
].
plan
;
},
grid
:
{
top
:
'
35%
'
,
left
:
'
1%
'
,
right
:
'
1%
'
,
bottom
:
'
2%
'
,
containLabel
:
true
},
xAxis
:
[
{
type
:
'
category
'
,
data
:
this
.
centerViewData
.
xAxisData
,
// axisTick: {
// alignWithLabel: true
// },
// axisPointer: {
// type: 'shadow'
// },
axisLabel
:
{
show
:
true
,
textStyle
:
{
color
:
'
white
'
}
}
this
.
outputMineData
.
day
=
undueArray
;
})
//获取采区当前月产量
HttpReq
.
truckDispatching
.
apiPlanMonthQuery
().
then
((
res
)
=>
{
let
undueArray
=
{};
if
(
res
.
length
==
0
||
JSON
.
stringify
(
res
[
0
])
==
'
{}
'
)
{
undueArray
.
eff
=
0
;
undueArray
.
finish
=
0
;
undueArray
.
plan
=
0
;
}
else
{
if
(
res
[
0
].
eff
==
''
)
{
undueArray
.
eff
=
0
;
undueArray
.
finish
=
res
[
0
].
finish
;
undueArray
.
plan
=
res
[
0
].
plan
;
}
else
{
undueArray
.
eff
=
parseFloat
(
res
[
0
].
eff
)
*
100
;
undueArray
.
finish
=
res
[
0
].
finish
;
undueArray
.
plan
=
res
[
0
].
plan
;
},
axisLine
:
{
lineStyle
:
{
color
:
'
white
'
,
width
:
1
}
}
this
.
outputMineData
.
month
=
undueArray
;
})
//获取采区当前年产量
HttpReq
.
truckDispatching
.
apiPlanYearQuery
().
then
((
res
)
=>
{
let
undueArray
=
{};
if
(
res
.
length
==
0
||
JSON
.
stringify
(
res
[
0
])
==
'
{}
'
)
{
undueArray
.
eff
=
0
;
undueArray
.
finish
=
0
;
undueArray
.
plan
=
0
;
}
else
{
if
(
res
[
0
].
eff
==
''
)
{
undueArray
.
eff
=
0
;
undueArray
.
finish
=
res
[
0
].
finish
;
undueArray
.
plan
=
res
[
0
].
plan
;
}
else
{
undueArray
.
eff
=
parseFloat
(
res
[
0
].
eff
)
*
100
;
undueArray
.
finish
=
res
[
0
].
finish
;
undueArray
.
plan
=
res
[
0
].
plan
;
}
],
yAxis
:
[
{
type
:
'
value
'
,
axisLabel
:
{
show
:
true
,
textStyle
:
{
color
:
'
white
'
}
}
this
.
outputMineData
.
year
=
undueArray
;
})
//中间echarts图表
HttpReq
.
truckDispatching
.
apiPlanTime1Query
().
then
((
res
)
=>
{
// let arr3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
// res.forEach((item,index)=>{
// arr3.splice(parseInt(item.hour) - 7,1, parseFloat(item.finish));
// })
this
.
centerViewData
.
seriesData
=
res
.
data
||
[];
this
.
centerEcharts
();
})
//中间echarts运载数据
HttpReq
.
truckDispatching
.
apiPlanZDay1Query
().
then
((
res
)
=>
{
if
(
res
.
length
!=
0
)
{
this
.
carryCenterData
.
dayAllCarry1
=
res
[
0
].
finish
;
this
.
carryCenterData
.
dayAverageCarry1
=
parseFloat
(
res
[
0
].
pfin
).
toFixed
(
2
);
this
.
carryCenterData
.
dayAllMil1
=
res
[
0
].
allmil
?
parseFloat
(
res
[
0
].
allmil
).
toFixed
(
3
)
:
0
;
this
.
carryCenterData
.
dayAllCarNum
=
res
[
0
].
num
;
this
.
carryCenterData
.
singleAverageTime
=
parseFloat
(
res
[
0
].
time
).
toFixed
(
2
);
this
.
carryCenterData
.
singleAverageMil
=
res
[
0
].
averagemil
?
parseFloat
(
res
[
0
].
averagemil
).
toFixed
(
3
)
:
0
;
}
})
//中间echarts装载数据
HttpReq
.
truckDispatching
.
apiPlanZMonth1Query
().
then
((
res
)
=>
{
if
(
res
.
length
!=
0
)
{
this
.
loadCenterData
.
dayAllLoad1
=
res
[
0
].
finish
;
this
.
loadCenterData
.
dayAverageLoad1
=
parseFloat
(
res
[
0
].
pfin
).
toFixed
(
2
);
this
.
loadCenterData
.
dayAllTime
=
res
[
0
].
time
;
this
.
loadCenterData
.
dayLoadCarNum
=
res
[
0
].
num
;
}
})
},
10000
)
},
//中间模块选择
centerSelectFn
(
text
)
{
this
.
centerViewData
.
moduleText
=
text
;
},
//中间模块Echarts
centerEcharts
()
{
echarts
.
init
(
document
.
getElementById
(
'
centerEchartsView
'
)).
dispose
();
var
myChart
=
echarts
.
init
(
document
.
getElementById
(
'
centerEchartsView
'
));
var
option
=
{
tooltip
:
{
trigger
:
'
axis
'
,
axisPointer
:
{
type
:
'
shadow
'
}
},
grid
:
{
top
:
'
35%
'
,
left
:
'
1%
'
,
right
:
'
1%
'
,
bottom
:
'
2%
'
,
containLabel
:
true
},
xAxis
:
[
{
type
:
'
category
'
,
data
:
this
.
centerViewData
.
xAxisData
,
// axisTick: {
// alignWithLabel: true
// },
// axisPointer: {
// type: 'shadow'
// },
axisLabel
:
{
show
:
true
,
textStyle
:
{
color
:
'
white
'
}
},
axisLine
:
{
lineStyle
:
{
color
:
'
white
'
,
width
:
1
}
},
splitLine
:
{
lineStyle
:
{
// 使用深浅的间隔色
color
:
[
'
rgba(255,255,255,0.3)
'
]
}
}
],
yAxis
:
[
{
type
:
'
value
'
,
axisLabel
:
{
show
:
true
,
textStyle
:
{
color
:
'
white
'
}
},
splitLine
:
{
lineStyle
:
{
// 使用深浅的间隔色
color
:
[
'
rgba(255,255,255,0.3)
'
]
}
},
axisLine
:
{
lineStyle
:
{
color
:
'
white
'
,
width
:
0
}
},
axisLine
:
{
lineStyle
:
{
color
:
'
white
'
,
width
:
0
}
}
],
series
:
[
{
name
:
'
重量(吨)
'
,
type
:
'
bar
'
,
barWidth
:
20
,
data
:
this
.
centerViewData
.
seriesData
,
itemStyle
:
{
color
:
'
#01CBF6
'
},
}
]
};
option
&&
myChart
.
setOption
(
option
)
;
},
}
],
series
:
[
{
name
:
'
重量(吨)
'
,
type
:
'
bar
'
,
barWidth
:
20
,
data
:
this
.
centerViewData
.
seriesData
,
itemStyle
:
{
color
:
'
#01CBF6
'
}
,
}
]
}
;
option
&&
myChart
.
setOption
(
option
);
},
beforeDestroy
(){
if
(
this
.
DPcomputer5BoxTimer
)
{
clearInterval
(
this
.
DPcomputer5BoxTimer
);
this
.
DPcomputer5BoxTimer
=
null
;
}
},
beforeDestroy
(
)
{
if
(
this
.
DPcomputer5BoxTimer
)
{
clearInterval
(
this
.
DPcomputer5BoxTimer
)
;
this
.
DPcomputer5BoxTimer
=
null
;
}
}
}
</
script
>
...
...
src/views/personnelPositioning/beacon/index.vue
View file @
27e5ba9a
...
...
@@ -196,6 +196,12 @@ export default {
cancelForm
()
{
this
.
visible
=
false
;
this
.
$refs
.
formViewRef
.
resetFields
();
this
.
formData
=
{
beaconame
:
''
,
beaconumber
:
''
,
xcoordinate
:
''
,
ycoordinate
:
''
,
}
},
tableRowClassName
({
row
,
rowIndex
})
{
},
...
...
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