Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
卡
卡车调度系统
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
caicaicai
卡车调度系统
Commits
76946ce8
Commit
76946ce8
authored
Mar 24, 2022
by
caicaicai
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
修改
parent
bd2d82b1
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
760 additions
and
76 deletions
+760
-76
jingshikaobei1.png
src/assets/images/cutGraph/jingshikaobei1.png
+0
-0
common.js
src/assets/js/common.js
+9
-1
index.vue
src/views/MLargeScreen/components/carManagement/index.vue
+560
-7
index.vue
src/views/MLargeScreen/components/dataScreening/index.vue
+191
-68
No files found.
src/assets/images/cutGraph/
警示提示
.png
→
src/assets/images/cutGraph/
jingshikaobei1
.png
View file @
76946ce8
File moved
src/assets/js/common.js
View file @
76946ce8
...
...
@@ -1724,7 +1724,15 @@ var HttpReq = function(){
//大屏——数据总览——获取天气
getWeatherInforQuery
:
function
(
param
){
return
request
({
url
:
'
http://wthrcdn.etouch.cn/weather_mini?city=济南
'
,
url
:
'
/api/Weather
'
,
method
:
'
get
'
,
params
:
param
,
})
},
//大屏——数据总览——车辆工时
carWorkInforQuery
:
function
(
param
){
return
request
({
url
:
'
/api/Gongshi
'
,
method
:
'
get
'
,
params
:
param
,
})
...
...
src/views/MLargeScreen/components/carManagement/index.vue
View file @
76946ce8
<
template
>
<div
class=
"carManView"
>
车辆管理
<div
class=
"carManScrView"
v-if=
"whetherShow"
>
<div
class=
"carManScrView_leftView"
>
<!-- 车辆运行状况 -->
<div>
<div
class=
"carManScrView_leftView_title"
>
车辆运行状况
</div>
<div
class=
"carManScrView_leftView_content"
style=
"position: relative;"
>
<div
id=
"carWorkingStateEcharts"
></div>
</div>
</div>
<!-- 卡车排行榜-->
<div>
<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>
<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 == 'yunzai' ? '' : 'selectFieldStyle' "
@
click=
"truckChangeField('yunzai')"
>
运载量
</div>
<div
:class=
"truckRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' "
@
click=
"truckChangeField('jiedan')"
>
接单数
</div>
</div>
<div
class=
"carManScrView_leftView_content_views3"
>
<div
v-if=
"truckRankListData.selectFieldText == 'juli'"
>
<div
v-for=
"(item,index) in truckRankListData.listData"
:key=
"index"
>
<div
style=
"color:#1DF9FC;"
>
{{
index
+
1
}}
</div>
<div
style=
"color:#BCF0FE;"
>
{{
item
.
car
}}
</div>
<div
style=
"color:#1AC9FF;"
>
{{
item
.
juli
}}
KM
</div>
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
</div>
</div>
<div
v-if=
"truckRankListData.selectFieldText == 'time'"
>
<div
v-for=
"(item,index) in truckRankListData.listData"
:key=
"index"
>
<div
style=
"color:#1DF9FC;"
>
{{
index
+
1
}}
</div>
<div
style=
"color:#BCF0FE;"
>
{{
item
.
car
}}
</div>
<div
style=
"color:#1AC9FF;"
>
{{
item
.
time
}}
H
</div>
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
</div>
</div>
<div
v-if=
"truckRankListData.selectFieldText == 'yunzai'"
>
<div
v-for=
"(item,index) in truckRankListData.listData"
:key=
"index"
>
<div
style=
"color:#1DF9FC;"
>
{{
index
+
1
}}
</div>
<div
style=
"color:#BCF0FE;"
>
{{
item
.
car
}}
</div>
<div
style=
"color:#1AC9FF;"
>
{{
item
.
yunzai
}}
</div>
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
</div>
</div>
<div
v-if=
"truckRankListData.selectFieldText == 'jiedan'"
>
<div
v-for=
"(item,index) in truckRankListData.listData"
:key=
"index"
>
<div
style=
"color:#1DF9FC;"
>
{{
index
+
1
}}
</div>
<div
style=
"color:#BCF0FE;"
>
{{
item
.
car
}}
</div>
<div
style=
"color:#1AC9FF;"
>
{{
item
.
jiedan
}}
</div>
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 电铲排行榜-->
<div>
<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>
<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 == 'yunzai' ? '' : 'selectFieldStyle' "
@
click=
"forkLiftChangeField('yunzai')"
>
装车量
</div>
<div
:class=
"forkLiftRankListData.selectFieldText == 'jiedan' ? '' : 'selectFieldStyle' "
@
click=
"forkLiftChangeField('jiedan')"
>
装车数
</div>
</div>
<div
class=
"carManScrView_leftView_content_views3"
>
<div
v-if=
"forkLiftRankListData.selectFieldText == 'time'"
>
<div
v-for=
"(item,index) in forkLiftRankListData.listData"
:key=
"index"
>
<div
style=
"color:#1DF9FC;"
>
{{
index
+
1
}}
</div>
<div
style=
"color:#BCF0FE;"
>
{{
item
.
car
}}
</div>
<div
style=
"color:#1AC9FF;"
>
{{
item
.
time
}}
H
</div>
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
</div>
</div>
<div
v-if=
"forkLiftRankListData.selectFieldText == 'yunzai'"
>
<div
v-for=
"(item,index) in forkLiftRankListData.listData"
:key=
"index"
>
<div
style=
"color:#1DF9FC;"
>
{{
index
+
1
}}
</div>
<div
style=
"color:#BCF0FE;"
>
{{
item
.
car
}}
</div>
<div
style=
"color:#1AC9FF;"
>
{{
item
.
yunzai
}}
</div>
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
</div>
</div>
<div
v-if=
"forkLiftRankListData.selectFieldText == 'jiedan'"
>
<div
v-for=
"(item,index) in forkLiftRankListData.listData"
:key=
"index"
>
<div
style=
"color:#1DF9FC;"
>
{{
index
+
1
}}
</div>
<div
style=
"color:#BCF0FE;"
>
{{
item
.
car
}}
</div>
<div
style=
"color:#1AC9FF;"
>
{{
item
.
jiedan
}}
</div>
<div
style=
"color:#BCF0FE;"
>
{{
item
.
createTime
}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"carManScrView_rightView"
>
<!-- 卡车动态 -->
<div>
<div
class=
"carManScrView_rightView_title"
>
卡车动态
</div>
<div
class=
"carManScrView_rightView_content"
>
</div>
</div>
<!-- 电铲动态-->
<div>
<div
class=
"carManScrView_rightView_title"
>
电铲动态
</div>
<div
class=
"carManScrView_rightView_content"
>
</div>
</div>
<!-- 其他车动态 -->
<div>
<div
class=
"carManScrView_rightView_title"
>
其他车动态
</div>
<div
class=
"carManScrView_rightView_content"
>
</div>
</div>
</div>
</div>
</
template
>
<
script
>
import
{
Tools
,
HttpReq
,
Dates
}
from
'
@/assets/js/common.js
'
;
import
*
as
echarts
from
'
echarts
'
;
export
default
{
data
()
{
return
{
whetherShow
:
false
,
//时间
currentTime
:{
day
:
''
,
month
:
''
,
year
:
''
,
},
//车辆运行状况
carWorkingStateData
:{
online
:[],
offline
:[],
},
//卡车排行榜
truckRankListData
:{
carclass
:
'
卡车
'
,
selectTimeText
:
'
day
'
,
selectFieldText
:
'
juli
'
,
listData
:[],
selectTimeDate
:
''
,
},
//电铲排行榜
forkLiftRankListData
:{
carclass
:
'
电铲
'
,
selectTimeText
:
'
day
'
,
selectFieldText
:
'
time
'
,
listData
:[],
selectTimeDate
:
''
,
},
}
},
mounted
()
{
},
methods
:
{
loadData
(){
console
.
log
(
'
车辆管理
'
);
this
.
whetherShow
=
true
;
this
.
dayCurrentTimeFn
();
this
.
monthCurrentTimeFn
();
this
.
yearCurrentTimeFn
();
this
.
$nextTick
(()
=>
{
//获取车辆运行状况
HttpReq
.
truckDispatching
.
screenDriverInformationQuery
({
size
:
9999
}).
then
((
res
)
=>
{
let
kache1
=
[];
let
kachezaixian
=
[];
let
kachelixian
=
[];
let
dianchan1
=
[];
let
dianchanzaixian
=
[];
let
dianchanlixian
=
[];
let
qitache1
=
[];
let
qitachezaixian
=
[];
let
qitachelixian
=
[];
let
zaixianAllNum
=
[];
let
lixianAllNum
=
[];
if
(
res
.
code
==
200
){
res
.
data
.
content
.
forEach
((
item
)
=>
{
if
(
item
.
carclass
==
'
卡车
'
){
kache1
.
push
(
item
);
}
else
if
(
item
.
carclass
==
'
电铲
'
){
dianchan1
.
push
(
item
);
}
else
{
qitache1
.
push
(
item
);
}
})
kache1
.
forEach
((
item
)
=>
{
if
(
item
.
status
==
1
){
kachezaixian
.
push
(
item
);
}
else
{
kachelixian
.
push
(
item
);
}
})
dianchan1
.
forEach
((
item
)
=>
{
if
(
item
.
status
==
1
){
dianchanzaixian
.
push
(
item
);
}
else
{
dianchanlixian
.
push
(
item
);
}
})
qitache1
.
forEach
((
item
)
=>
{
if
(
item
.
status
==
1
){
qitachezaixian
.
push
(
item
);
}
else
{
qitachelixian
.
push
(
item
);
}
})
zaixianAllNum
.
push
(
kachezaixian
.
length
);
zaixianAllNum
.
push
(
dianchanzaixian
.
length
);
zaixianAllNum
.
push
(
qitachezaixian
.
length
);
lixianAllNum
.
push
(
kachelixian
.
length
);
lixianAllNum
.
push
(
dianchanlixian
.
length
);
lixianAllNum
.
push
(
qitachelixian
.
length
);
this
.
carWorkingStateData
.
online
=
zaixianAllNum
;
this
.
carWorkingStateData
.
offline
=
lixianAllNum
;
//绘制车辆运行状况图表
this
.
$nextTick
(()
=>
{
this
.
carWorkingStateEcharts
();
})
}
})
//获取卡车排行榜
this
.
truckRankListData
.
selectTimeDate
=
this
.
currentTime
.
day
;
let
truckQuery1
=
{};
truckQuery1
.
size
=
10
;
truckQuery1
.
sort
=
this
.
truckRankListData
.
selectFieldText
+
'
,desc
'
;
truckQuery1
.
carclass
=
this
.
truckRankListData
.
carclass
;
truckQuery1
.
createTime
=
this
.
truckRankListData
.
selectTimeDate
;
this
.
$nextTick
(()
=>
{
HttpReq
.
truckDispatching
.
screenDriverInformationQuery
(
truckQuery1
).
then
((
res
)
=>
{
if
(
res
.
code
==
200
){
this
.
truckRankListData
.
listData
=
res
.
data
.
content
;
}
})
})
//获取电铲排行榜
this
.
forkLiftRankListData
.
selectTimeDate
=
this
.
currentTime
.
day
;
let
forkLiftQuery1
=
{};
forkLiftQuery1
.
size
=
10
;
forkLiftQuery1
.
sort
=
this
.
forkLiftRankListData
.
selectFieldText
+
'
,desc
'
;
forkLiftQuery1
.
carclass
=
this
.
forkLiftRankListData
.
carclass
;
forkLiftQuery1
.
createTime
=
this
.
forkLiftRankListData
.
selectTimeDate
;
this
.
$nextTick
(()
=>
{
HttpReq
.
truckDispatching
.
screenDriverInformationQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
if
(
res
.
code
==
200
){
this
.
forkLiftRankListData
.
listData
=
res
.
data
.
content
;
}
})
})
//卡车动态
})
},
//车辆运行状况
carWorkingStateEcharts
(){
let
that
=
this
;
var
myChart
=
echarts
.
init
(
document
.
getElementById
(
'
carWorkingStateEcharts
'
));
var
option
=
{
tooltip
:
{
trigger
:
'
axis
'
,
axisPointer
:
{
type
:
'
shadow
'
}
},
legend
:
{
textStyle
:{
color
:
'
white
'
,
fontSize
:
16
,
}
},
grid
:
{
left
:
'
3%
'
,
right
:
'
4%
'
,
bottom
:
'
3%
'
,
containLabel
:
true
},
xAxis
:
{
type
:
'
category
'
,
data
:
[
'
卡车状态
'
,
'
电铲状态
'
,
'
其他车辆
'
],
axisLabel
:
{
show
:
true
,
textStyle
:
{
color
:
'
white
'
,
fontSize
:
16
,
}
},
axisLine
:
{
lineStyle
:
{
color
:
'
white
'
,
width
:
1
}
},
},
yAxis
:
{
type
:
'
value
'
,
axisLabel
:
{
show
:
true
,
textStyle
:
{
color
:
'
white
'
,
fontSize
:
16
,
}
},
axisLine
:
{
lineStyle
:
{
color
:
'
white
'
,
width
:
0
}
},
},
series
:
[
{
name
:
'
车辆离线
'
,
type
:
'
bar
'
,
data
:
that
.
carWorkingStateData
.
offline
,
barWidth
:
20
,
itemStyle
:
{
color
:
'
#14F3C5
'
},
},
{
name
:
'
车辆在线
'
,
type
:
'
bar
'
,
data
:
that
.
carWorkingStateData
.
online
,
barWidth
:
20
,
itemStyle
:
{
color
:
'
#2195FD
'
},
}
]
};
option
&&
myChart
.
setOption
(
option
);
},
//卡车切换时间
truckChangeTime
(
text
){
this
.
truckRankListData
.
selectTimeText
=
text
;
if
(
text
==
'
day
'
){
this
.
truckRankListData
.
selectTimeDate
=
this
.
currentTime
.
day
;
}
if
(
text
==
'
month
'
){
this
.
truckRankListData
.
selectTimeDate
=
this
.
currentTime
.
month
;
}
if
(
text
==
'
year
'
){
this
.
truckRankListData
.
selectTimeDate
=
this
.
currentTime
.
year
;
}
},
//卡车切换字段排序
truckChangeField
(
text
){
this
.
truckRankListData
.
selectFieldText
=
text
;
let
truckQuery1
=
{};
truckQuery1
.
size
=
10
;
truckQuery1
.
sort
=
this
.
truckRankListData
.
selectFieldText
+
'
,desc
'
;
truckQuery1
.
carclass
=
this
.
truckRankListData
.
carclass
;
truckQuery1
.
createTime
=
this
.
truckRankListData
.
selectTimeDate
;
this
.
$nextTick
(()
=>
{
HttpReq
.
truckDispatching
.
screenDriverInformationQuery
(
truckQuery1
).
then
((
res
)
=>
{
if
(
res
.
code
==
200
){
this
.
truckRankListData
.
listData
=
res
.
data
.
content
;
}
})
})
},
//电铲切换时间
forkLiftChangeTime
(
text
){
this
.
forkLiftRankListData
.
selectTimeText
=
text
;
if
(
text
==
'
day
'
){
this
.
forkLiftRankListData
.
selectTimeDate
=
this
.
currentTime
.
day
;
}
if
(
text
==
'
month
'
){
this
.
forkLiftRankListData
.
selectTimeDate
=
this
.
currentTime
.
month
;
}
if
(
text
==
'
year
'
){
this
.
forkLiftRankListData
.
selectTimeDate
=
this
.
currentTime
.
year
;
}
},
//电铲切换字段排序
forkLiftChangeField
(
text
){
this
.
forkLiftRankListData
.
selectFieldText
=
text
;
let
forkLiftQuery1
=
{};
forkLiftQuery1
.
size
=
10
;
forkLiftQuery1
.
sort
=
this
.
forkLiftRankListData
.
selectFieldText
+
'
,desc
'
;
forkLiftQuery1
.
carclass
=
this
.
forkLiftRankListData
.
carclass
;
forkLiftQuery1
.
createTime
=
this
.
forkLiftRankListData
.
selectTimeDate
;
this
.
$nextTick
(()
=>
{
HttpReq
.
truckDispatching
.
screenDriverInformationQuery
(
forkLiftQuery1
).
then
((
res
)
=>
{
if
(
res
.
code
==
200
){
this
.
forkLiftRankListData
.
listData
=
res
.
data
.
content
;
}
})
})
},
//获取当前时间
dayCurrentTimeFn
(){
var
date
=
new
Date
();
var
year
=
date
.
getFullYear
();
//年 ,从 Date 对象以四位数字返回年份
var
month
=
date
.
getMonth
()
+
1
;
//月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
var
day
=
date
.
getDate
();
//日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
//修改月份格式
if
(
month
>=
1
&&
month
<=
9
)
{
month
=
"
0
"
+
month
;
}
//修改日期格式
if
(
day
>=
0
&&
day
<=
9
)
{
day
=
"
0
"
+
day
;
}
let
currentFormatDate
=
year
+
"
-
"
+
month
+
"
-
"
+
day
;
this
.
currentTime
.
day
=
currentFormatDate
;
},
monthCurrentTimeFn
(){
var
date
=
new
Date
();
var
year
=
date
.
getFullYear
();
//年 ,从 Date 对象以四位数字返回年份
var
month
=
date
.
getMonth
()
+
1
;
//月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
//修改月份格式
if
(
month
>=
1
&&
month
<=
9
)
{
month
=
"
0
"
+
month
;
}
let
currentFormatDate
=
year
+
"
-
"
+
month
;
this
.
currentTime
.
month
=
currentFormatDate
;
},
yearCurrentTimeFn
(){
var
date
=
new
Date
();
var
year
=
date
.
getFullYear
();
//年 ,从 Date 对象以四位数字返回年份
let
currentFormatDate
=
year
;
this
.
currentTime
.
year
=
currentFormatDate
;
},
},
}
</
script
>
<
style
>
.carManView
{
<
style
scoped
>
.carMan
Scr
View
{
width
:
100%
;
height
:
100%
;
overflow
:
hidden
;
background-color
:
aliceblue
;
display
:
flex
;
justify-content
:
space-between
;
}
.carManScrView_leftView
{
height
:
100%
;
width
:
20%
;
}
.carManScrView_rightView
{
height
:
100%
;
width
:
20%
;
}
.carManScrView_leftView
>
div
{
width
:
100%
;
height
:
32vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/yuanjianjuxing1.png')
;
background-size
:
100%
100%
;
padding
:
5px
7px
;
box-sizing
:
border-box
;
overflow
:
hidden
;
}
.carManScrView_rightView
>
div
{
width
:
100%
;
height
:
32vh
;
background
:
no-repeat
center
center
url('~@/assets/images/cutGraph/yuanjianjuxing1.png')
;
background-size
:
100%
100%
;
padding
:
5px
7px
;
box-sizing
:
border-box
;
overflow
:
hidden
;
}
.carManScrView_leftView_title
,
.carManScrView_rightView_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
;
}
.carManScrView_leftView_content
,
.carManScrView_rightView_content
{
width
:
100%
;
height
:
27vh
;
}
.rolling
{
height
:
13.5vh
;
overflow-y
:
auto
;
scrollbar-width
:
none
;
}
.rolling
::-webkit-scrollbar
{
display
:
none
;
}
.truck_titleStyle
{
display
:
flex
;
justify-content
:
space-between
;
padding-right
:
4vw
;
}
.driverTitleDateStyle
{
display
:
flex
;
color
:
#06EFFE
;
font-size
:
16px
;
text-shadow
:
0px
0px
0px
;
height
:
3.5vh
;
align-items
:
center
;
}
.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
;
}
.driverTitleDateStyle_son2
{
height
:
2.5vh
;
line-height
:
2.5vh
;
margin-right
:
5px
;
padding
:
0px
5px
;
box-sizing
:
border-box
;
border-radius
:
5px
;
cursor
:
pointer
;
}
.carManScrView_leftView_content_views2
{
display
:
flex
;
justify-content
:
space-between
;
}
.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
;
}
.selectFieldStyle
{
opacity
:
0.7
;
}
.carManScrView_leftView_content_views3
{
width
:
100%
;
height
:
24vh
;
overflow-y
:
auto
;
scrollbar-width
:
none
;
}
.carManScrView_leftView_content_views3
::-webkit-scrollbar
{
display
:
none
;
}
.carManScrView_leftView_content_views3
>
div
>
div
{
font
:
18px
;
font-weight
:
600
;
display
:
flex
;
justify-content
:
space-evenly
;
}
.carManScrView_leftView_content_views3
>
div
>
div
>
div
{
margin-top
:
7px
;
}
#carWorkingStateEcharts
{
width
:
100%
;
height
:
28vh
;
}
</
style
>
\ No newline at end of file
src/views/MLargeScreen/components/dataScreening/index.vue
View file @
76946ce8
...
...
@@ -222,24 +222,23 @@
<div
class=
"dataScrView_rightView_title"
>
气象数据
</div>
<div
class=
"dataScrView_rightView_content"
>
<div
class=
"todayWeather1"
>
<div
style=
"font-size:40px;margin-right:30px;"
>
{{
weatherData
.
today
.
qiwen
}}
℃
</div>
<img
src=
"../../../../assets/images/cutGraph/sunny.png"
height=
"30
"
>
<div
style=
"font-size:18px;"
>
{{
weatherData
.
today
.
t
ianqiText
}}
/
{{
currentTime
.
day
}}
</div>
<div
style=
"font-size:40px;margin-right:30px;"
>
{{
(
parseInt
(
weatherData
.
today
.
high
.
slice
(
3
,
5
))
+
parseInt
(
weatherData
.
today
.
low
.
slice
(
3
,
5
)))
/
2
}}
℃
</div>
<img
:src=
" weatherData.today.type == '晴' ? weatherPic.sunnyPic : weatherData.today.type == '多云' ? weatherPic.cloudyPic : weatherPic.overcastPic "
height=
"25
"
>
<div
style=
"font-size:18px;"
>
{{
weatherData
.
today
.
t
ype
}}
/
{{
currentTime
.
day
}}
</div>
</div>
<div
class=
"todayWeather2"
>
<div
v-for=
"(item,index) in weatherData.futureDay"
:key=
"index"
>
<div
style=
"color:#D0DAFF;"
>
{{
item
.
riqi
}}
</div>
<!--
<img
:src=
" '../../../../assets/images/cutGraph/' + item.tianqi + '.png' "
height=
"30"
>
-->
<img
src=
"../../../../assets/images/cutGraph/sunny.png"
height=
"30"
>
<div
style=
"color:#D0DAFF;"
>
{{
item
.
qiwen
}}
℃
</div>
<div
v-for=
"(item,index) in weatherData.forecastData"
:key=
"index"
>
<div
style=
"color:#D0DAFF;font-size:13px;margin-bottom:5px;"
>
{{
item
.
date
}}
</div>
<img
:src=
"item.type == '晴' ? weatherPic.sunnyPic : item.type == '多云' ? weatherPic.cloudyPic : weatherPic.overcastPic "
height=
"25"
>
<div
style=
"color:#D0DAFF;font-size:15px;margin-top:5px;"
>
{{
(
item
.
low
.
slice
(
3
,
6
))
+
'
-
'
+
(
item
.
high
.
slice
(
3
,
6
))
}}
</div>
</div>
</div>
<div
class=
"todayWeather3"
>
<img
src=
"../../../../assets/images/cutGraph/fengli1.png"
height=
"45"
>
<div>
风力:
{{
weatherData
.
today
.
fengli
}}
级
</div>
<div>
风力:
{{
weatherData
.
today
.
fengli
.
slice
(
9
,
10
)
}}
级
</div>
<div>
<div>
温度:
{{
weatherData
.
today
.
qiwen
}}
℃
</div>
<div>
湿度:
{{
weatherData
.
today
.
shidu
}}
%
</div>
<div>
温度:
{{
(
parseInt
(
weatherData
.
today
.
high
.
slice
(
3
,
5
))
+
parseInt
(
weatherData
.
today
.
low
.
slice
(
3
,
5
)))
/
2
}}
℃
</div>
<div>
湿度:
{{
(
parseInt
(
weatherData
.
today
.
high
.
slice
(
3
,
5
))
+
parseInt
(
weatherData
.
today
.
low
.
slice
(
3
,
5
)))
/
2
}}
%
</div>
</div>
</div>
</div>
...
...
@@ -250,8 +249,8 @@
<div>
车辆工时
</div>
<div
class=
"driverTitleDateStyle"
>
<div
:class=
"carWorkTimeData.selectTimeText == 'day' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"carWorkTimeChangeTime('day')"
>
日
</div>
<div
:class=
"carWorkTimeData.selectTimeText == '
week' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"carWorkTimeChangeTime('week
')"
>
月
</div>
<div
:class=
"carWorkTimeData.selectTimeText == '
month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"carWorkTimeChangeTime('month
')"
>
年
</div>
<div
:class=
"carWorkTimeData.selectTimeText == '
month' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"carWorkTimeChangeTime('month
')"
>
月
</div>
<div
:class=
"carWorkTimeData.selectTimeText == '
year' ? 'driverTitleDateStyle_son1' : 'driverTitleDateStyle_son2' "
@
click=
"carWorkTimeChangeTime('year
')"
>
年
</div>
</div>
</div>
<div
class=
"dataScrView_rightView_content"
>
...
...
@@ -261,33 +260,65 @@
<img
src=
"../../../../assets/images/cutGraph/huoyunqiche1.png"
>
</div>
<div
class=
"carPicStyle2"
>
<div
style=
"margin-top:0.5vh;font-size:17px;"
>
{{
item
.
car
Nam
e
}}
</div>
<div
style=
"font-size:14px;margin-top:1.5vh;"
>
总工时:
<b>
{{
item
.
workTime
}}
</b>
H
</div>
<div
style=
"font-size:14px;margin-top:1vh;"
>
闲置率:
<b>
{{
item
.
unused
}}
</b>
%
</div>
<div
style=
"margin-top:0.5vh;font-size:17px;"
>
{{
item
.
car
typ
e
}}
</div>
<div
style=
"font-size:14px;margin-top:1.5vh;"
>
总工时:
<b>
{{
item
.
gongshi
}}
</b>
H
</div>
<div
style=
"font-size:14px;margin-top:1vh;"
>
闲置率:
<b>
{{
item
.
xianzhi
}}
</b>
%
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 矿石开采效率 -->
<!-- 矿石开采效率 -->
<div>
<div
class=
"dataScrView_rightView_title"
>
矿石开采效率
</div>
<div
class=
"dataScrView_rightView_content"
>
<div
class=
"dataScrView_rightView_content_view1"
>
<el-progress
type=
"circle"
:percentage=
"outputMineData.day.rate"
:stroke-width=
"7"
:width=
"80"
:height=
"80"
></el-progress>
<div
style=
"color:white;margin-left:15px;"
>
当前日产量:
<span
style=
"color:#02F7EF;"
>
{{
outputMineData
.
day
.
output
}}
吨
</span></div>
<div
class=
"dataScrView_rightView_content_view1_rate1"
>
<div
style=
"color:#06BEFA;"
>
比率
</div>
<div
style=
"color:white;"
>
28%
</div>
</div>
<el-progress
type=
"circle"
:percentage=
"outputMineData.day.rate"
:stroke-width=
"7"
:width=
"80"
:height=
"80"
:show-text=
'false'
></el-progress>
<div
style=
"color:white;"
>
<div>
日总开采量
</div>
<div
style=
"color:#A6F6F9;font-size:20px;"
><span
style=
"color:#06BEFA;"
>
1000
</span>
T
</div>
</div>
<div
style=
"color:white;"
>
<div>
日总里程
</div>
<div
style=
"color:#A6F6F9;font-size:20px;"
><span
style=
"color:#06BEFA;"
>
300
</span>
KM
</div>
</div>
</div>
<div
class=
"dataScrView_rightView_content_view1"
>
<div
style=
"color:white;margin-left:15px;"
>
当前月产量:
<span
style=
"color:#02F7EF;"
>
{{
outputMineData
.
month
.
output
}}
吨
</span></div>
<el-progress
type=
"circle"
:percentage=
"outputMineData.month.rate"
:stroke-width=
"7"
:width=
"80"
:height=
"80"
></el-progress>
<div
class=
"dataScrView_rightView_content_view1_rate2"
>
<div
style=
"color:#03FEFE;"
>
比率
</div>
<div
style=
"color:white;"
>
28%
</div>
</div>
<div
style=
"color:white;"
>
<div>
司机日总工作时长
</div>
<div
style=
"color:#A6F6F9;font-size:20px;"
><span
style=
"color:#03FEFE;"
>
1000
</span>
H
</div>
</div>
<div
style=
"color:white;"
>
<div>
日总开采量
</div>
<div
style=
"color:#A6F6F9;font-size:20px;"
><span
style=
"color:#03FEFE;"
>
300
</span>
T
</div>
</div>
<el-progress
type=
"circle"
:percentage=
"outputMineData.month.rate"
:stroke-width=
"7"
:width=
"80"
:height=
"80"
:show-text=
'false'
></el-progress>
</div>
</div>
</div>
<!-- 实时报警 -->
<div>
<div
class=
"dataScrView_rightView_title"
>
实时报警
</div>
<div
class=
"dataScrView_rightView_content"
>
<div
class=
"realAlarmStyle"
>
<div
v-for=
"(item,index) in realAlarmStyleData.listData"
:key=
"index"
>
<img
src=
"../../../../assets/images/cutGraph/jingshikaobei1.png"
>
<div
style=
"color:#A6F6F9;margin-left:10px;"
>
<div>
{{
item
.
alarmexplain
}}
</div>
<div>
{{
item
.
createTime
}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</
template
>
...
...
@@ -295,11 +326,20 @@
<
script
>
import
{
Tools
,
HttpReq
,
Dates
}
from
'
@/assets/js/common.js
'
;
import
*
as
echarts
from
'
echarts
'
;
import
sunnyPic
from
'
../../../../assets/images/cutGraph/sunny.png
'
import
cloudyPic
from
'
../../../../assets/images/cutGraph/cloudy.png
'
import
overcastPic
from
'
../../../../assets/images/cutGraph/overcast.png
'
export
default
{
data
()
{
return
{
whetherShow
:
false
,
//天气图片
weatherPic
:{
sunnyPic
:
sunnyPic
,
cloudyPic
:
cloudyPic
,
overcastPic
:
overcastPic
,
},
//时间
currentTime
:{
day
:
''
,
...
...
@@ -308,9 +348,9 @@ export default {
},
//产量数据以及中间图表数据
outputMineData
:{
day
:{
output
:
''
,
rate
:
''
,
dayPlan
:
''
,},
month
:{
output
:
''
,
rate
:
''
,
dayPlan
:
''
,},
year
:{
output
:
''
,
rate
:
''
,
dayPlan
:
''
,},
day
:{
output
:
''
,
rate
:
0
,
dayPlan
:
''
,},
month
:{
output
:
''
,
rate
:
0
,
dayPlan
:
''
,},
year
:{
output
:
''
,
rate
:
0
,
dayPlan
:
''
,},
},
//司机信息
driverData
:{
...
...
@@ -343,29 +383,53 @@ export default {
},
//天气数据
weatherData
:{
today
:{
qiwen
:
'
23
'
,
fengli
:
'
3
'
,
tianqi
:
'
sunny
'
,
tianqiText
:
'
晴
'
,
shidu
:
'
32
'
},
futureDay
:[
{
riqi
:
'
03.24
'
,
tianqi
:
'
overcast
'
,
qiwen
:
'
15
'
},
{
riqi
:
'
03.24
'
,
tianqi
:
'
cloudy
'
,
qiwen
:
'
15
'
},
{
riqi
:
'
03.24
'
,
tianqi
:
'
sunny
'
,
qiwen
:
'
15
'
},
{
riqi
:
'
03.24
'
,
tianqi
:
'
cloudy
'
,
qiwen
:
'
15
'
},
{
riqi
:
'
03.24
'
,
tianqi
:
'
overcast
'
,
qiwen
:
'
15
'
},
],
forecastData
:[],
today
:{
high
:
'
高温 20℃
'
,
low
:
'
高温 20℃
'
,
type
:
'
多云
'
,
fengli
:
'
<![CDATA[3级]]>
'
,
},
},
//车辆工时
carWorkTimeData
:{
selectTimeText
:
'
day
'
,
listData
:[
{
carName
:
'
卡车
'
,
workTime
:
166
,
unused
:
'
41
'
,},
{
carName
:
'
电铲
'
,
workTime
:
166
,
unused
:
'
41
'
,},
{
carName
:
'
其他车辆
'
,
workTime
:
166
,
unused
:
'
41
'
,},
],
listData
:[],
selectTimeDate
:
''
,
},
//矿石开采效率
exploitationEfficiencyData
:{
},
//实时报警
realAlarmStyleData
:{
listData
:[
{
content
:
'
运载区入口处有不明障碍物体在路口
'
,
time
:
'
2021-10-19 12:23
'
,
},
{
content
:
'
运载区入口处有不明障碍物体在路口
'
,
time
:
'
2021-10-19 12:23
'
,
},
{
content
:
'
运载区入口处有不明障碍物体在路口
'
,
time
:
'
2021-10-19 12:23
'
,
},
{
content
:
'
运载区入口处有不明障碍物体在路口
'
,
time
:
'
2021-10-19 12:23
'
,
},
{
content
:
'
运载区入口处有不明障碍物体在路口
'
,
time
:
'
2021-10-19 12:23
'
,
},
{
content
:
'
运载区入口处有不明障碍物体在路口
'
,
time
:
'
2021-10-19 12:23
'
,
},
],
}
}
},
mounted
()
{
},
...
...
@@ -493,12 +557,35 @@ export default {
//中间echarts图表
this
.
centerEcharts
();
//获取天气
// HttpReq.truckDispatching.getWeatherInforQuery().then((res) => {
// if(true){
// console.log(res);
// }
// })
HttpReq
.
truckDispatching
.
getWeatherInforQuery
({
cityName
:
'
济南
'
}).
then
((
res
)
=>
{
if
(
res
.
code
==
200
){
let
data1
=
JSON
.
parse
(
res
.
msg
).
data
.
forecast
;
this
.
weatherData
.
forecastData
=
data1
;
this
.
weatherData
.
today
=
data1
[
0
];
}
})
//车辆工时
HttpReq
.
truckDispatching
.
carWorkInforQuery
({
riqi
:
this
.
currentTime
.
day
}).
then
((
res
)
=>
{
if
(
res
.
code
==
200
){
if
(
res
.
data
.
totalElements
==
0
){
this
.
carWorkTimeData
.
listData
=
[
{
cartype
:
'
卡车
'
,
gongshi
:
0
,
xianzhi
:
0
},
{
cartype
:
'
电铲
'
,
gongshi
:
0
,
xianzhi
:
0
},
{
cartype
:
'
其他车辆
'
,
gongshi
:
0
,
xianzhi
:
0
},
];
}
else
{
this
.
carWorkTimeData
.
listData
=
res
.
data
.
content
;
}
}
})
//矿石开采效率
//实时报警
HttpReq
.
truckDispatching
.
callPoliceQuery
({
status
:
1
}).
then
((
res
)
=>
{
if
(
res
.
code
==
200
){
this
.
realAlarmStyleData
.
listData
=
res
.
data
.
content
;
}
})
})
},
...
...
@@ -508,6 +595,12 @@ export default {
if
(
text
==
'
day
'
){
this
.
truckRankListData
.
selectTimeDate
=
this
.
currentTime
.
day
;
}
if
(
text
==
'
month
'
){
this
.
truckRankListData
.
selectTimeDate
=
this
.
currentTime
.
month
;
}
if
(
text
==
'
year
'
){
this
.
truckRankListData
.
selectTimeDate
=
this
.
currentTime
.
year
;
}
},
//卡车切换字段排序
truckChangeField
(
text
){
...
...
@@ -531,6 +624,12 @@ export default {
if
(
text
==
'
day
'
){
this
.
forkLiftRankListData
.
selectTimeDate
=
this
.
currentTime
.
day
;
}
if
(
text
==
'
month
'
){
this
.
forkLiftRankListData
.
selectTimeDate
=
this
.
currentTime
.
month
;
}
if
(
text
==
'
year
'
){
this
.
forkLiftRankListData
.
selectTimeDate
=
this
.
currentTime
.
year
;
}
},
//电铲切换字段排序
forkLiftChangeField
(
text
){
...
...
@@ -635,24 +734,21 @@ export default {
if
(
text
==
'
year
'
){
this
.
carWorkTimeData
.
selectTimeDate
=
this
.
currentTime
.
year
;
}
HttpReq
.
truckDispatching
.
carWorkInforQuery
({
riqi
:
this
.
carWorkTimeData
.
selectTimeDate
}).
then
((
res
)
=>
{
if
(
res
.
code
==
200
){
if
(
res
.
data
.
totalElements
==
0
){
this
.
carWorkTimeData
.
listData
=
[
{
cartype
:
'
卡车
'
,
gongshi
:
0
,
xianzhi
:
0
},
{
cartype
:
'
电铲
'
,
gongshi
:
0
,
xianzhi
:
0
},
{
cartype
:
'
其他车辆
'
,
gongshi
:
0
,
xianzhi
:
0
},
];
}
else
{
this
.
carWorkTimeData
.
listData
=
res
.
data
.
content
;
}
}
})
},
//获取当前时间
dayCurrentTimeFn
(){
var
date
=
new
Date
();
...
...
@@ -691,7 +787,7 @@ export default {
}
</
script
>
<
style
>
<
style
scoped
>
.el-progress__text
{
color
:
white
;
font-weight
:
600
;
...
...
@@ -956,7 +1052,7 @@ dd>div{
box-sizing
:
border-box
;
}
.todayWeather2
{
margin-top
:
5
px
;
margin-top
:
10
px
;
width
:
100%
;
height
:
8vh
;
display
:
flex
;
...
...
@@ -1010,10 +1106,37 @@ dd>div{
overflow
:
hidden
;
}
.dataScrView_rightView_content_view1
{
margin-bottom
:
7px
;
position
:
relative
;
margin-top
:
1vh
;
display
:
flex
;
align-items
:
center
;
font-
size
:
20px
;
font-
weight
:
600
;
justify-content
:
space-evenly
;
}
.dataScrView_rightView_content_view1_rate1
{
position
:
absolute
;
left
:
3.1vw
;
top
:
2.4vh
;
}
.dataScrView_rightView_content_view1_rate2
{
position
:
absolute
;
right
:
2.3vw
;
top
:
2.4vh
;
}
.realAlarmStyle
{
width
:
100%
;
height
:
19vh
;
overflow-y
:
auto
;
scrollbar-width
:
none
;
}
.realAlarmStyle
::-webkit-scrollbar
{
display
:
none
;
}
.realAlarmStyle
>
div
{
width
:
100%
;
height
:
5vh
;
border-bottom
:
1px
solid
#03FEFE
;
display
:
flex
;
align-items
:
center
;
}
</
style
>
\ No newline at end of file
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