Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
S
shld-databoard-ui
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
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
潘自豪 Rambo Pan
shld-databoard-ui
Commits
5457301c
Commit
5457301c
authored
Aug 09, 2024
by
Inner peace
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
车船情况
parent
ad07b1d4
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
759 additions
and
105 deletions
+759
-105
package-lock.json
package-lock.json
+7
-16
apiList.js
src/module/api/apiList.js
+59
-58
geo_data.js
src/module/databoard/components/map/geo_data.js
+172
-0
map-point-mark.vue
src/module/databoard/components/map/map-point-mark.vue
+234
-0
map-transport-line.vue
src/module/databoard/components/map/map-transport-line.vue
+179
-0
safe-quality.vue
src/module/databoard/databoard/safe-quality.vue
+108
-31
No files found.
package-lock.json
View file @
5457301c
...
...
@@ -2486,12 +2486,11 @@
}
},
"echarts"
:
{
"version"
:
"
5.5.1
"
,
"resolved"
:
"https://registry.npmmirror.com/echarts/-/echarts-
5.5.1
.tgz"
,
"integrity"
:
"sha512-
Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1ic
A=="
,
"version"
:
"
4.9.0
"
,
"resolved"
:
"https://registry.npmmirror.com/echarts/-/echarts-
4.9.0
.tgz"
,
"integrity"
:
"sha512-
+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEI
A=="
,
"requires"
:
{
"tslib"
:
"2.3.0"
,
"zrender"
:
"5.6.0"
"zrender"
:
"4.3.2"
}
},
"editorconfig"
:
{
...
...
@@ -7084,11 +7083,6 @@
"integrity"
:
"sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
,
"dev"
:
true
},
"tslib"
:
{
"version"
:
"2.3.0"
,
"resolved"
:
"https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz"
,
"integrity"
:
"sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"tty-browserify"
:
{
"version"
:
"0.0.0"
,
"resolved"
:
"https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"
,
...
...
@@ -8337,12 +8331,9 @@
}
},
"zrender"
:
{
"version"
:
"5.6.0"
,
"resolved"
:
"https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz"
,
"integrity"
:
"sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg=="
,
"requires"
:
{
"tslib"
:
"2.3.0"
}
"version"
:
"4.3.2"
,
"resolved"
:
"https://registry.npmmirror.com/zrender/-/zrender-4.3.2.tgz"
,
"integrity"
:
"sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
}
}
}
src/module/api/apiList.js
View file @
5457301c
...
...
@@ -11,35 +11,35 @@ export const captcha = () => fetch('/auth/get-captcha', {}, 'POST');
//登录
export
const
userLogin
=
(
username
,
pass
,
captchaSign
,
verificationcode
,
captchaTimestamp
)
=>
fetch
(
'/api/auth/login'
,
{
username
:
username
,
password
:
pass
,
captcha
:
{
sign
:
captchaSign
,
captcha
:
verificationcode
,
timestamp
:
captchaTimestamp
}
username
:
username
,
password
:
pass
,
captcha
:
{
sign
:
captchaSign
,
captcha
:
verificationcode
,
timestamp
:
captchaTimestamp
}
},
'POST'
);
//首页营业额率值 -汇总
export
const
getBusinessConditionDatas
=
(
cur_day
)
=>
fetch
(
'/api/query/*/action/get_business_condition_datas'
,
{
aux
:
{
cur_day
:
cur_day
}
aux
:
{
cur_day
:
cur_day
}
},
'POST'
);
//明细页营业额汇月 -汇总
export
const
getBusinessConditionDataByMonth
=
(
cur_day
)
=>
fetch
(
'/api/query/*/action/get_business_condition_datas_by_month'
,
{
aux
:
{
cur_day
:
cur_day
}
aux
:
{
cur_day
:
cur_day
}
},
'POST'
);
//明细页营业额汇年 -汇总
export
const
getBusinessConditionDatasByYear
=
(
cur_day
)
=>
fetch
(
'/api/query/*/action/get_business_condition_datas_by_year'
,
{
aux
:
{
cur_day
:
cur_day
}
aux
:
{
cur_day
:
cur_day
}
},
'POST'
);
//明细页营业额汇年 -同期对比
...
...
@@ -57,9 +57,9 @@ export const arSummaryBar = () => fetch("/api/query/dash_board/action/get_ar_sum
* 获取账款情况
*/
export
const
getAccountSituation
=
(
cur_day
)
=>
fetch
(
"/api/query/dash_board/action/get_account_situation"
,
{
aux
:
{
cur_day
:
cur_day
}
aux
:
{
cur_day
:
cur_day
}
},
"POST"
)
// 应收账款列表
export
const
arCompanyList
=
()
=>
fetch
(
"/api/query/dash_board/action/get_ar_company_list"
,
{},
"POST"
)
...
...
@@ -73,45 +73,45 @@ export const arCompanyMonthlyBar = (company) => fetch("/api/query/dash_board/act
export
const
arMonthlyCompanyBar
=
(
month
)
=>
fetch
(
"/api/query/dash_board/action/get_ar_monthly_company_bar"
,
{
aux
:
{
month
:
month
}},
"POST"
)
//明细页营业额汇月 -汇总
export
const
getAllTypeBusinessConditionDatas
=
(
cur_day
)
=>
fetch
(
'/api/query/*/action/get_all_type_business_condition_datas'
,
{
aux
:
{
cur_day
:
cur_day
}
aux
:
{
cur_day
:
cur_day
}
},
'POST'
);
//明细页各种运输类型营业额明细
export
const
getAllTypeBusinessConditionDetailByDay
=
(
cur_day
)
=>
fetch
(
'/api/query/*/action/get_all_type_business_condition_detail_by_day'
,
{
aux
:
{
cur_day
:
cur_day
}
aux
:
{
cur_day
:
cur_day
}
},
'POST'
);
//明细页各种运输类型营业额汇总-月维度
export
const
getAllTypeBusinessConditionDatasByMonth
=
(
cur_day
)
=>
fetch
(
'/api/query/*/action/get_all_type_business_condition_datas_by_month'
,
{
aux
:
{
cur_day
:
cur_day
}
aux
:
{
cur_day
:
cur_day
}
},
'POST'
);
//明细页各种运输类型营业额汇总-年维度
export
const
getAllTypeBusinessConditionDatasByYear
=
(
cur_day
)
=>
fetch
(
'/api/query/*/action/get_all_type_business_condition_datas_by_year'
,
{
aux
:
{
cur_day
:
cur_day
}
aux
:
{
cur_day
:
cur_day
}
},
'POST'
);
//明细页各种运输类型营业额明细-月维度
export
const
getAllTypeBusinessConditionDetailByMonth
=
(
cur_day
)
=>
fetch
(
'/api/query/*/action/get_all_type_business_condition_detail_by_month'
,
{
aux
:
{
cur_day
:
cur_day
}
aux
:
{
cur_day
:
cur_day
}
},
'POST'
);
//明细页各种运输类型营业额明细-年维度
export
const
getAllTypeBusinessConditionDetailByYear
=
(
cur_day
)
=>
fetch
(
'/api/query/*/action/get_all_type_business_condition_detail_by_year'
,
{
aux
:
{
cur_day
:
cur_day
}
aux
:
{
cur_day
:
cur_day
}
},
'POST'
);
...
...
@@ -123,40 +123,41 @@ export const getTargetOrderDataByCondition = (aux) => fetch("/api/query/*/action
//流失客户 & 新增客户
export
const
getOrderLoseAddCustomer
=
(
cur_day
)
=>
fetch
(
'/api/query/*/action/get_order_loss_add_customer'
,
{
aux
:
{
cur_day
:
cur_day
}
aux
:
{
cur_day
:
cur_day
}
},
'POST'
);
//流失客户 & 新增客户-明细
export
const
getOrderAddCustomerDetail
=
(
cur_day
,
type
,
cur_page
)
=>
fetch
(
'/api/query/*/action/get_order_add_customer_detail'
,
{
aux
:
{
cur_day
:
cur_day
,
type
:
type
,
cur_page
:
cur_page
}
export
const
getOrderAddCustomerDetail
=
(
cur_day
,
type
,
cur_page
)
=>
fetch
(
'/api/query/*/action/get_order_add_customer_detail'
,
{
aux
:
{
cur_day
:
cur_day
,
type
:
type
,
cur_page
:
cur_page
}
},
'POST'
);
//当日订单量,当时完成量 余量
export
const
getOrderBusinessConditionData
=
(
cur_day
,
type
)
=>
fetch
(
'/api/query/*/action/get_order_business_condition_data'
,
{
aux
:
{
cur_day
:
cur_day
}
aux
:
{
cur_day
:
cur_day
}
},
'POST'
);
//30天内事务部运单完成量
export
const
getDepartmentShipmentWeight
=
(
department_code
,
cur_day
)
=>
fetch
(
'/api/query/*/action/get_shipment_data_by_department'
,
{
aux
:
{
cur_day
:
cur_day
,
department_code
:
department_code
}
aux
:
{
cur_day
:
cur_day
,
department_code
:
department_code
}
},
'POST'
);
//折线图目标量
export
const
getDepartmentTargetWeight
=
(
department_code
,
year
)
=>
fetch
(
'/api/query/*/action/get_department_target_weight'
,
{
aux
:
{
year
:
year
,
department_code
:
department_code
}
aux
:
{
year
:
year
,
department_code
:
department_code
}
},
'POST'
);
//车船情况
export
const
getTruckShipConditionData
=
(
department
)
=>
fetch
(
'/api/query/*/action/get_truck_ship_condition_data'
,
{},
'POST'
);
src/module/databoard/components/map/geo_data.js
0 → 100644
View file @
5457301c
export
const
geoCoordMap
=
{
"新疆维吾尔自治区"
:
[
86.9023
,
41.148
]
,
"西藏自治区"
:
[
87.8695
,
31.6846
]
,
"内蒙古自治区"
:
[
110.5977
,
41.3408
]
,
"青海省"
:
[
95.2402
,
35.4199
]
,
"四川省"
:
[
102.9199
,
30.1904
]
,
"黑龙江省"
:
[
128.1445
,
46.7156
]
,
"甘肃省"
:
[
102.7129
,
38.166
]
,
"云南省"
:
[
101.0652
,
24.6807
]
,
"广西壮族自治区"
:
[
108.7813
,
23.6426
]
,
"湖南省"
:
[
111.5332
,
27.3779
]
,
"陕西省"
:
[
108.5996
,
33.7396
]
,
"广东省"
:
[
113.8668
,
22.8076
]
,
"吉林省"
:
[
126.1746
,
43.5938
]
,
"河北省"
:
[
115.4004
,
38.1688
]
,
"湖北省"
:
[
112.2363
,
30.8572
]
,
"贵州省"
:
[
106.6113
,
26.6385
]
,
"山东省"
:
[
118.2402
,
36.2307
]
,
"江西省"
:
[
115.7156
,
27.99
]
,
"河南省"
:
[
113.0668
,
33.8818
]
,
"辽宁省"
:
[
123.0438
,
41.0889
]
,
"山西省"
:
[
112.4121
,
36.6611
]
,
"安徽省"
:
[
117.2461
,
31.0361
]
,
"福建省"
:
[
118.3008
,
25.9277
]
,
"浙江省"
:
[
120.498
,
29.0918
]
,
"江苏省"
:
[
119.8586
,
32.915
]
,
"重庆省"
:
[
107.7539
,
29.8904
]
,
"宁夏回族自治区"
:
[
105.9961
,
37.1096
]
,
"海南省"
:
[
109.9512
,
19.2041
]
,
"台湾省"
:
[
120.8254
,
23.5986
]
,
"北京省"
:
[
116.4551
,
40.2539
]
,
"天津省"
:
[
117.4219
,
39.4189
]
,
"上海省"
:
[
121.4648
,
31.2891
]
,
"香港特别行政区"
:
[
114.6178
,
22.3242
]
,
"澳门特别行政区"
:
[
113.5547
,
21.6484
]
}
;
src/module/databoard/components/map/map-point-mark.vue
0 → 100644
View file @
5457301c
<
template
>
<div
ref=
"charts"
class=
"echarts"
>
</div>
</
template
>
<
script
>
import
*
as
echarts
from
"echarts"
;
import
*
as
geo
from
"./geo_data"
;
import
china
from
"./geojson.json"
;
import
TitleContentMark
from
"../layout/title-content-mark.vue"
;
import
SimpleCard
from
"../card/simple-card.vue"
;
export
default
{
name
:
"mapPointMark"
,
components
:
{
geo
,
TitleContentMark
,
SimpleCard
},
data
()
{
return
{
outdata
:
[],
max
:
8000
,
min
:
10
,
maxSize4Pin
:
150
,
minSize4Pin
:
20
,
option
:
{}
};
},
props
:
{
derviceDis
:
[]
},
methods
:
{
convertData
(
outdata
)
{
var
res
=
[];
for
(
var
i
=
0
;
i
<
this
.
outdata
.
length
;
i
++
)
{
var
geoCoord
=
geo
.
geoCoordMap
[
this
.
outdata
[
i
].
name
];
if
(
geoCoord
)
{
res
.
push
({
name
:
this
.
outdata
[
i
].
name
,
value
:
geoCoord
.
concat
(
this
.
outdata
[
i
].
value
),
});
}
}
return
res
;
},
initData
()
{
this
.
outdata
=
[];
for
(
let
i
=
0
;
i
<
this
.
derviceDis
.
length
;
i
++
)
{
let
province
=
this
.
derviceDis
[
i
][
'province'
]
let
count
=
this
.
derviceDis
[
i
][
'count'
]
this
.
outdata
.
push
({
name
:
province
,
value
:
count
})
}
const
vm
=
this
;
this
.
option
=
{
backgroundColor
:
'#020046'
,
tooltip
:
{
show
:
true
,
formatter
:
function
(
params
)
{
if
(
params
.
value
.
length
>
1
)
{
return
' '
+
params
.
name
+
' '
+
params
.
value
[
2
]
+
' '
;
}
else
{
return
' '
+
params
.
name
+
' '
+
params
.
value
+
' '
;
}
},
},
title
:
{
top
:
20
,
text
:
''
,
subtext
:
''
,
x
:
'center'
,
textStyle
:
{
color
:
'#ccc'
}
},
visualMap
:
{
min
:
0
,
max
:
2000
,
left
:
26
,
bottom
:
90
,
showLabel
:
!
0
,
text
:
[
"高"
,
"低"
],
textStyle
:
{
color
:
"#ffffff"
,
fontSize
:
16
},
pieces
:
[{
gte
:
100
,
label
:
">100"
,
color
:
'#e81c00'
},
{
gte
:
11
,
lt
:
100
,
label
:
"11 - 100"
,
color
:
'#fdc002'
},
{
gte
:
1
,
lt
:
10
,
label
:
"1 - 10"
,
color
:
'#00cbfe'
}],
show
:
!
0
},
geo
:
{
map
:
'china'
,
layoutCenter
:
[
'50%'
,
'50%'
],
// 如果宽高比大于 1 则宽度为 100,如果小于 1 则高度为 100,保证了不超过 100x100 的区域
layoutSize
:
100
,
zoom
:
6.5
,
label
:
{
normal
:
{
show
:
true
,
//是否显示标签
textStyle
:
{
color
:
'#fff'
,
},
},
emphasis
:
{
textStyle
:
{
color
:
'#fff'
,
},
},
},
roam
:
true
,
itemStyle
:
{
normal
:
{
areaColor
:
{
x
:
0
,
y
:
0
,
x2
:
0
,
y2
:
1
,
colorStops
:
[{
offset
:
0
,
color
:
'#082b7f'
// 0% 处的颜色
},
{
offset
:
1
,
color
:
'#082b7f'
// 100% 处的颜色
}],
},
borderColor
:
'#68c7e7'
,
borderWidth
:
1
,
},
}
},
series
:
[
{
type
:
'effectScatter'
,
coordinateSystem
:
'geo'
,
rippleEffect
:
{
brushType
:
'stroke'
},
showEffectOn
:
'render'
,
itemStyle
:
{
normal
:
{
color
:
{
type
:
'radial'
,
x
:
0.5
,
y
:
0.5
,
r
:
0.5
,
colorStops
:
[{
offset
:
0
,
color
:
'rgba(5,80,151,0.2)'
},
{
offset
:
0.8
,
color
:
'rgba(5,80,151,0.8)'
},
{
offset
:
1
,
color
:
'rgba(0,108,255,0.7)'
}],
global
:
false
// 缺省为 false
},
}
},
label
:
{
normal
:
{
show
:
true
,
color
:
'#fff'
,
fontWeight
:
'bold'
,
position
:
'inside'
,
formatter
:
function
(
para
)
{
return
'{cnNum|'
+
para
.
data
.
value
[
2
]
+
'}'
},
rich
:
{
cnNum
:
{
fontSize
:
13
,
color
:
'#D4EEFF'
,
}
}
},
},
symbol
:
'circle'
,
symbolSize
:
function
(
val
)
{
if
(
val
[
2
]
===
0
)
{
return
0
;
}
var
a
=
(
vm
.
maxSize4Pin
-
vm
.
minSize4Pin
)
/
(
vm
.
max
-
vm
.
min
);
var
b
=
vm
.
maxSize4Pin
-
a
*
vm
.
max
;
return
a
*
val
[
2
]
+
b
*
1.2
;
},
data
:
this
.
convertData
(
this
.
outdata
),
zlevel
:
1
,
},
]
}
},
refreshChart
()
{
if
(
this
.
chart
)
{
this
.
chart
.
setOption
(
this
.
option
);
}
else
{
let
chartDom
=
this
.
$refs
.
charts
;
this
.
chart
=
echarts
.
init
(
chartDom
);
echarts
.
registerMap
(
'china'
,
china
);
this
.
chart
.
setOption
(
this
.
option
);
}
this
.
chart
.
resize
;
},
},
watch
:
{
derviceDis
(
n
,
o
)
{
console
.
log
(
JSON
.
stringify
(
this
.
derviceDis
))
this
.
initData
()
this
.
refreshChart
();
},
},
computed
:
{},
mounted
()
{
this
.
initData
()
this
.
refreshChart
()
//注意,第一个参数的名字必须和option.geo.map一致
window
.
addEventListener
(
'resize'
,
this
.
chart
.
resize
);
}
};
</
script
>
<
style
scoped
>
</
style
>
src/module/databoard/components/map/map-transport-line.vue
0 → 100644
View file @
5457301c
<
template
>
<div
ref=
"charts"
class=
"echarts"
></div>
</
template
>
<
script
>
import
*
as
echarts
from
"echarts"
;
import
*
as
geo
from
"./geo_data"
import
china
from
"./geojson.json"
export
default
{
name
:
"mapTransportLine"
,
components
:
{
geo
},
data
()
{
return
{
BJData
:
[[{
name
:
'成都'
},
{
name
:
'潍坊'
,
value
:
5
}],
[{
name
:
'潍坊'
},
{
name
:
'西宁'
,
value
:
5
}]],
series
:
[],
chart
:
null
,
option
:
{
backgroundColor
:
'#404a59'
,
tooltip
:
{
trigger
:
'item'
},
legend
:
{},
geo
:
{
map
:
'china'
,
layoutCenter
:
[
'50%'
,
'70%'
],
// 如果宽高比大于 1 则宽度为 100,如果小于 1 则高度为 100,保证了不超过 100x100 的区域
layoutSize
:
100
,
zoom
:
7
,
label
:
{
emphasis
:
{
show
:
false
}
},
roam
:
true
,
itemStyle
:
{
normal
:
{
areaColor
:
'#323c48'
,
borderColor
:
'#404a59'
},
emphasis
:
{
areaColor
:
'#2a333d'
}
}
},
series
:
[{
"type"
:
"lines"
,
"zlevel"
:
1
,
"effect"
:
{
"show"
:
true
,
"period"
:
6
,
"trailLength"
:
0.7
,
"color"
:
"#fff"
,
"symbolSize"
:
3
},
"lineStyle"
:
{
"normal"
:
{
"color"
:
"#a6c84c"
,
"width"
:
0
,
"curveness"
:
0.2
}},
"data"
:
[{
"fromName"
:
"成都"
,
"toName"
:
"潍坊"
,
"coords"
:
[[
103.9526
,
30.7617
],
[
119.0918
,
36.524
]]}]
},
{
"type"
:
"lines"
,
"zlevel"
:
2
,
"effect"
:
{
"show"
:
true
,
"period"
:
6
,
"trailLength"
:
0
,
"symbolSize"
:
5
},
"lineStyle"
:
{
"normal"
:
{
"color"
:
"#a6c84c"
,
"width"
:
1
,
"opacity"
:
0.4
,
"curveness"
:
0.2
}},
"data"
:
[{
"fromName"
:
"成都"
,
"toName"
:
"潍坊"
,
"coords"
:
[[
103.9526
,
30.7617
],
[
119.0918
,
36.524
]]}]
},
{
"type"
:
"effectScatter"
,
"coordinateSystem"
:
"geo"
,
"zlevel"
:
2
,
"rippleEffect"
:
{
"brushType"
:
"stroke"
},
"label"
:
{
"normal"
:
{
"show"
:
true
,
"position"
:
"right"
,
"formatter"
:
"{b}"
}},
"itemStyle"
:
{
"normal"
:
{
"color"
:
"#a6c84c"
}},
"data"
:
[{
"name"
:
"潍坊"
,
"value"
:
[
119.0918
,
36.524
,
5
]}]
}]
}
};
},
props
:
{},
methods
:
{
convertData
(
data
)
{
var
res
=
[];
for
(
var
i
=
0
;
i
<
data
.
length
;
i
++
)
{
var
dataItem
=
data
[
i
];
var
fromCoord
=
geo
.
geoCoordMap
[
dataItem
[
0
].
name
];
var
toCoord
=
geo
.
geoCoordMap
[
dataItem
[
1
].
name
];
if
(
fromCoord
&&
toCoord
)
{
res
.
push
({
fromName
:
dataItem
[
0
].
name
,
toName
:
dataItem
[
1
].
name
,
coords
:
[
fromCoord
,
toCoord
]
});
}
}
return
res
;
},
initData
()
{
const
vm
=
this
;
// 捕获Vue实例
const
color
=
[
'#a6c84c'
,
'#ffa022'
,
'#46bee9'
];
[[
'北京'
,
this
.
BJData
]].
forEach
(
function
(
item
,
i
)
{
vm
.
series
.
push
({
name
:
item
[
0
]
+
' Top10'
,
type
:
'lines'
,
zlevel
:
1
,
effect
:
{
show
:
true
,
period
:
6
,
trailLength
:
0.7
,
color
:
'#fff'
,
symbolSize
:
3
},
lineStyle
:
{
normal
:
{
color
:
color
[
i
],
width
:
0
,
curveness
:
0.2
}
},
data
:
vm
.
convertData
(
item
[
1
])
},
{
name
:
item
[
0
]
+
' Top10'
,
type
:
'lines'
,
zlevel
:
2
,
effect
:
{
show
:
true
,
period
:
6
,
trailLength
:
0
,
//symbol: planePath,
symbolSize
:
5
},
lineStyle
:
{
normal
:
{
color
:
color
[
i
],
width
:
1
,
opacity
:
0.4
,
curveness
:
0.2
}
},
data
:
vm
.
convertData
(
item
[
1
])
},
{
name
:
item
[
0
]
+
' Top10'
,
type
:
'effectScatter'
,
coordinateSystem
:
'geo'
,
zlevel
:
2
,
rippleEffect
:
{
brushType
:
'stroke'
},
label
:
{
normal
:
{
show
:
true
,
position
:
'right'
,
formatter
:
'{b}'
}
},
symbolSize
:
function
(
val
)
{
return
val
[
2
]
/
8
;
},
itemStyle
:
{
normal
:
{
color
:
color
[
i
]
}
},
data
:
item
[
1
].
map
(
function
(
dataItem
)
{
return
{
name
:
dataItem
[
1
].
name
,
value
:
geo
.
geoCoordMap
[
dataItem
[
1
].
name
].
concat
([
dataItem
[
1
].
value
])
};
})
});
});
}
},
computed
:
{},
mounted
()
{
this
.
initData
()
//注意,第一个参数的名字必须和option.geo.map一致
let
chartDom
=
this
.
$refs
.
charts
;
this
.
chart
=
echarts
.
init
(
chartDom
);
echarts
.
registerMap
(
'china'
,
china
);
this
.
chart
.
setOption
(
this
.
option
);
window
.
addEventListener
(
'resize'
,
this
.
chart
.
resize
);
}
};
</
script
>
<
style
scoped
>
</
style
>
src/module/databoard/databoard/safe-quality.vue
View file @
5457301c
...
...
@@ -3,18 +3,20 @@
<div
class=
"full_page"
>
<!-- 左-->
<div
class=
"trade_left"
>
<div
style=
"height: 37%;"
>
<display-board
style=
"display: flex; justify-content: space-between; height: 98%;"
title=
"安全"
>
<winners-list
style=
"height: 96%;overflow: auto;"
:mouseHand=
"true"
@
click
.
native=
"goArBar"
id=
"safe_list"
:rows=
"arSafeList"
/>
</display-board>
</div>
<div
style=
"height: 37%;"
>
<display-board
style=
"display: flex; justify-content: space-between; height: 98%;"
title=
"质量"
>
<winners-list
style=
"height: 96%;overflow: auto;"
:mouseHand=
"true"
@
click
.
native=
"goArBar"
id=
"quality_list"
:rows=
"arQualityList"
/>
</display-board>
</div>
<div
style=
"height: 26%;"
>
<display-board
style=
"display: flex; justify-content: space-between; height: 98%;"
title=
"人员情况表"
>
<div
style=
"height: 37%;"
>
<display-board
style=
"display: flex; justify-content: space-between; height: 98%;"
title=
"安全"
>
<winners-list
style=
"height: 96%;overflow: auto;"
:mouseHand=
"true"
@
click
.
native=
"goArBar"
id=
"safe_list"
:rows=
"arSafeList"
/>
</display-board>
</div>
<div
style=
"height: 37%;"
>
<display-board
style=
"display: flex; justify-content: space-between; height: 98%;"
title=
"质量"
>
<winners-list
style=
"height: 96%;overflow: auto;"
:mouseHand=
"true"
@
click
.
native=
"goArBar"
id=
"quality_list"
:rows=
"arQualityList"
/>
</display-board>
</div>
<div
style=
"height: 26%;"
>
<display-board
style=
"display: flex; justify-content: space-between; height: 98%;"
title=
"人员情况表"
>
<div
class=
"bar"
>
<div
ref=
"bar"
></div>
</div>
...
...
@@ -22,10 +24,20 @@
</div>
</div>
<!--中-->
<display-board
class=
"trade_middle"
>
<display-board
class=
"trade_middle"
>
<div
class=
"trade_middle"
style=
"border: none;box-shadow: none;"
>
<div
style=
"display: flex; justify-content: space-between; height: 80%;"
>
<div
style=
"justify-content: space-between; height: 80%;display: inline-block;"
>
<div
style=
"height: 100%;display: flex;justify-content: space-evenly;"
>
<simple-card
@
click
.
native=
"changeDevireMap('truckDis')"
:class=
"
{'selectedBtn': crurrDevireMapTyep === 'truckDis'}" style="width: 20%;height: 100%">
<title-content-mark
style=
"color: #5eeef4;"
title=
"车辆"
:content=
"truckCount"
mark=
"辆"
isCenter
isBold
/>
</simple-card>
<simple-card
@
click
.
native=
"changeDevireMap('shipDis')"
:class=
"
{'selectedBtn': crurrDevireMapTyep === 'shipDis'}" style="width: 20%;height: 100%">
<title-content-mark
style=
"color: #5eeef4;"
title=
"船舶"
:content=
"shipCount"
mark=
"艘"
isCenter
isBold
/>
</simple-card>
</div>
<map-point-mark
style=
"width: calc(43vw); height: calc(50vh);"
:derviceDis=
"derviceDis"
></map-point-mark>
</div>
<div
style=
"display: flex; justify-content: space-between; height: 20%;"
>
</div>
...
...
@@ -33,18 +45,18 @@
</display-board>
<!-- 右-->
<div
class=
"trade_right"
>
<div
style=
"height: 33%;"
>
<display-board
style=
"display: flex; justify-content: space-between; height: 98%;"
title=
"汽运"
>
<div
style=
"height: 33%;"
>
<display-board
style=
"display: flex; justify-content: space-between; height: 98%;"
title=
"汽运"
>
</display-board>
</div>
<div
style=
"height: 33%;"
>
<display-board
style=
"display: flex; justify-content: space-between; height: 98%;"
title=
"水运"
>
<div
style=
"height: 33%;"
>
<display-board
style=
"display: flex; justify-content: space-between; height: 98%;"
title=
"水运"
>
</display-board>
</div>
<div
style=
"height: 34%;"
>
<display-board
style=
"display: flex; justify-content: space-between; height: 98%;"
title=
"铁运"
>
<div
style=
"height: 34%;"
>
<display-board
style=
"display: flex; justify-content: space-between; height: 98%;"
title=
"铁运"
>
</display-board>
</div>
...
...
@@ -56,22 +68,41 @@
import
DisplayBoard
from
"../components/container/display-board.vue"
;
import
WinnersList
from
"../components/card/winners-list.vue"
;
import
TitleContentMark
from
"../components/layout/title-content-mark.vue"
;
import
SimpleCard
from
"../components/card/simple-card.vue"
;
import
mapPointMark
from
"../components/map/map-point-mark.vue"
import
{
getTruckShipConditionData
}
from
"../../api/apiList"
export
default
{
name
:
"SafeQuality"
,
components
:
{
TitleContentMark
,
DisplayBoard
,
WinnersList
WinnersList
,
mapPointMark
,
SimpleCard
},
data
()
{
return
{}
return
{
arSafeList
:
[],
arQualityList
:
[],
truckCount
:
"0"
,
shipCount
:
"0"
,
truckDis
:
[],
shipDis
:
[],
derviceDis
:
[],
crurrDevireMapTyep
:
""
}
},
methods
:
{
refreshData
()
{
this
.
getPeopleInfos
();
this
.
getPeopleInfos
();
this
.
getTruckShipCondition
();
},
getPeopleInfos
(){
getPeopleInfos
()
{
// var seriesBar = [];
// seriesBar.push(adapterSeriesDataBar(null, "在编", [10,20]));
...
...
@@ -83,7 +114,42 @@ export default {
// let chart=echarts.init(barDom);
// chart.setOption(this.peopleInfoOption);
}
},
getTruckShipCondition
()
{
getTruckShipConditionData
().
then
(
res
=>
{
let
data
=
res
.
data
let
truckCount
=
0
;
let
shipCount
=
0
;
for
(
let
device
of
data
.
device_type_sum
)
{
if
(
device
.
device_type
==
'3'
||
device
.
device_type
==
'1'
)
{
truckCount
=
truckCount
+
parseInt
(
device
.
count
)
}
if
(
device
.
device_type
==
'4'
)
{
shipCount
=
shipCount
+
parseInt
(
device
.
count
)
}
}
this
.
truckCount
=
truckCount
+
""
;
this
.
shipCount
=
shipCount
+
""
;
this
.
shipDis
=
data
.
ship_by_province_sum
;
this
.
truckDis
=
data
.
truck_by_province_sum
;
if
(
this
.
crurrDevireMapTyep
==
""
)
{
this
.
changeDevireMap
(
'truckDis'
);
}
})
},
changeDevireMap
(
dimension
)
{
this
.
crurrDevireMapTyep
=
dimension
;
switch
(
dimension
)
{
case
'truckDis'
:
this
.
derviceDis
=
this
.
truckDis
;
break
;
case
'shipDis'
:
this
.
derviceDis
=
this
.
shipDis
;
break
;
default
:
return
;
}
},
},
mounted
()
{
this
.
refreshData
();
...
...
@@ -91,15 +157,15 @@ export default {
beforeDestroy
()
{
},
watch
:{
countDown
(
n
,
o
)
{
if
(
n
===
1
){
watch
:
{
countDown
(
n
,
o
)
{
if
(
n
===
1
)
{
this
.
refreshData
();
}
},
},
props
:{
countDown
:{
props
:
{
countDown
:
{
type
:
Number
}
}
...
...
@@ -111,4 +177,15 @@ export default {
background-color
:
#19EBFF10
;
transform
:
scale
(
101%
);
}
.selectedBtn
{
color
:
#1234a1
!important
;
background-color
:
#005dd6
!important
;
}
.unSelectedBtn
{
color
:
#00c8d6
;
background-color
:
#1234a1
;
}
</
style
>
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