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
66e6bba4
Commit
66e6bba4
authored
Sep 25, 2023
by
张恒
Browse files
Options
Browse Files
Download
Plain Diff
Merge remote-tracking branch 'origin/ld_databoard_fix' into ld_databoard_fix
parents
853e24e4
e02e6d8f
Changes
10
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
592 additions
and
65 deletions
+592
-65
apiList.js
src/module/api/apiList.js
+17
-0
line-bar-chart.vue
src/module/databoard/components/chart/line-bar-chart.vue
+1
-1
lostAddCustomer.js
src/module/databoard/databoard/js/lostAddCustomer.js
+50
-0
lost-add-customer.vue
src/module/databoard/databoard/lost-add-customer.vue
+78
-0
lost_add_customer.json
...odule/databoard/databoard/mockData/lost_add_customer.json
+265
-0
order-proportion.vue
src/module/databoard/databoard/order-proportion.vue
+20
-16
turnover-detail.vue
src/module/databoard/databoard/turnover-detail.vue
+2
-2
index.vue
src/module/databoard/index.vue
+135
-38
index.vue
src/module/index/index.vue
+17
-8
index_router.js
src/module/index/router/index_router.js
+7
-0
No files found.
src/module/api/apiList.js
View file @
66e6bba4
...
...
@@ -110,3 +110,20 @@ export const getOrderLoseAddCustomer = (cur_day) => fetch('/api/query/*/action/g
cur_day
:
cur_day
}
},
'POST'
);
//流失客户 & 新增客户-明细
export
const
getOrderAddCustomerDetail
=
(
cur_day
,
type
)
=>
fetch
(
'/api/query/*/action/get_order_add_customer_detail'
,
{
aux
:
{
cur_day
:
cur_day
,
type
:
type
}
},
'POST'
);
//当日订单量,当时完成量 余量
export
const
getOrderBusinessConditionData
=
(
cur_day
,
type
)
=>
fetch
(
'/api/query/*/action/get_order_business_condition_data'
,
{
aux
:
{
cur_day
:
cur_day
}
},
'POST'
);
src/module/databoard/components/chart/line-bar-chart.vue
View file @
66e6bba4
...
...
@@ -112,7 +112,7 @@ export default {
},
grid
:{
left
:
"5%"
,
right
:
"
3
%"
,
right
:
"
1
%"
,
},
dataset
:
{
dimensions
:
[
'x'
,
'y'
],
...
...
src/module/databoard/databoard/js/lostAddCustomer.js
0 → 100644
View file @
66e6bba4
import
{
getOrderAddCustomerDetail
}
from
"./../../../api/apiList"
;
import
{
conver_amont
}
from
"./../../../utils/numUtil"
;
import
moment
from
'moment'
//天维度数据转换
export
const
getAllDatas
=
async
function
(
cur_day
,
type
)
{
let
res
=
await
getOrderAddCustomerDetail
(
cur_day
,
type
);
let
lostAdd
=
resultProcess
(
res
.
data
);
return
lostAdd
;
};
/**
* 后端接口数据处理
* @param detailList
* @returns {Promise<void>}
*/
export
const
resultProcess
=
function
(
detailList
)
{
let
lostAddDataList
=
new
Array
();
for
(
let
key
in
detailList
)
{
let
resData
=
detailList
[
key
];
let
lostAdd
=
adapterLostAdd
(
resData
)
lostAddDataList
.
push
(
lostAdd
)
}
return
lostAddDataList
}
/**
* 数据处理
* @param data
* @returns
*/
export
const
adapterLostAdd
=
function
(
data
)
{
let
lostAddData
=
{};
lostAddData
[
'title'
]
=
data
.
entrust_agency_name
;
let
lostAddDataCol
=
new
Array
();
lostAddDataCol
[
0
]
=
adapterLostAddCol
(
"订单量(万吨) "
,
conver_amont
(
data
.
unit_weight
),
"red"
)
lostAddDataCol
[
1
]
=
adapterLostAddCol
(
"订单件数"
,
data
.
qty
,
"#eaa749"
)
lostAddDataCol
[
2
]
=
adapterLostAddCol
(
"营销额(万元)"
,
conver_amont
(
data
.
sell_settle_amount
),
"#49eb29"
)
lostAddData
[
'column'
]
=
lostAddDataCol
;
return
lostAddData
;
}
export
const
adapterLostAddCol
=
function
(
key
,
val
,
styleColor
)
{
let
lostAddDataCol
=
new
Object
();
lostAddDataCol
.
key
=
key
;
lostAddDataCol
.
value
=
val
;
lostAddDataCol
.
valStyle
=
{
"color"
:
styleColor
}
return
lostAddDataCol
;
}
src/module/databoard/databoard/lost-add-customer.vue
0 → 100644
View file @
66e6bba4
<
template
>
<div
class=
"page"
>
<div
class=
"content"
>
<display-board
class=
"content_card"
:title=
"lostCustomerTitle"
title_size=
"large"
>
<winners-list
style=
"height: 100%;overflow: auto;"
id=
"ar_company_list"
:rows=
"lostCustomer"
/>
</display-board>
<display-board
class=
"content_card"
:title=
"addCustomerTitle"
title_size=
"large"
>
<winners-list
style=
"height: 100%;overflow: auto;"
id=
"ar_company_list"
:rows=
"addCustomer"
/>
</display-board>
</div>
</div>
</
template
>
<
script
>
import
data
from
"./mockData/lost_add_customer.json"
;
import
DisplayBoard
from
"../components/container/display-board.vue"
;
import
WinnersList
from
"../components/card/winners-list.vue"
;
import
{
getAllDatas
}
from
"./js/lostAddCustomer"
export
default
{
name
:
"LostAddCustomer"
,
components
:
{
WinnersList
,
DisplayBoard
},
data
()
{
return
{
today
:
moment
().
format
(
"yyyy-MM-DD"
),
lostCustomerTitle
:
"流失客户(较去年)"
,
lostCustomer
:
[],
addCustomerTitle
:
"新增客户(较去年)"
,
addCustomer
:
[],
currentData
:
{},
mockData
:
data
.
list
,
chart
:
null
,
currentCard
:
null
,
listTitle
:
"流失客户(较去年)"
,
currentBtn
:
{
date
:
"day"
,
subdivide
:
"domain"
,
},
}
},
methods
:
{
back
()
{
this
.
$router
.
push
({
path
:
'/'
});
},
},
async
mounted
()
{
this
.
lostCustomer
=
await
getAllDatas
(
this
.
today
,
1
)
console
.
log
(
this
.
lostCustomer
)
this
.
addCustomer
=
await
getAllDatas
(
this
.
today
,
2
)
console
.
log
(
this
.
addCustomer
)
},
}
</
script
>
<
style
scoped
>
.page
{
width
:
100%
;
height
:
100%
;
}
.content
{
width
:
100%
;
height
:
80%
;
display
:
flex
;
float
:
left
;
justify-content
:
space-evenly
;
padding
:
0
2rem
2rem
2rem
;
}
.content_card
{
width
:
30%
;
margin-top
:
5%
;
height
:
100%
;
}
</
style
>
src/module/databoard/databoard/mockData/lost_add_customer.json
0 → 100644
View file @
66e6bba4
{
"list"
:
[
{
"title"
:
"上海欧也股份有限公司"
,
"column"
:
[
{
"key"
:
"订单量(万吨)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"red"
}
},
{
"key"
:
"订单件数"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#eaa749"
}
},
{
"key"
:
"营销额(万元)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#49eb29"
}
}
]
},
{
"title"
:
"上海欧也股份有限公司"
,
"column"
:
[
{
"key"
:
"订单量(万吨)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"red"
}
},
{
"key"
:
"订单件数"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#eaa749"
}
},
{
"key"
:
"营销额(万元)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#49eb29"
}
}
]
},
{
"title"
:
"上海欧也股份有限公司"
,
"column"
:
[
{
"key"
:
"订单量(万吨)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"red"
}
},
{
"key"
:
"订单件数"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#eaa749"
}
},
{
"key"
:
"营销额(万元)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#49eb29"
}
}
]
},
{
"title"
:
"上海欧也股份有限公司"
,
"column"
:
[
{
"key"
:
"订单量(万吨)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"red"
}
},
{
"key"
:
"订单件数"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#eaa749"
}
},
{
"key"
:
"营销额(万元)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#49eb29"
}
}
]
},
{
"title"
:
"上海欧也股份有限公司"
,
"column"
:
[
{
"key"
:
"订单量(万吨)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"red"
}
},
{
"key"
:
"订单件数"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#eaa749"
}
},
{
"key"
:
"营销额(万元)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#49eb29"
}
}
]
},
{
"title"
:
"上海欧也股份有限公司"
,
"column"
:
[
{
"key"
:
"订单量(万吨)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"red"
}
},
{
"key"
:
"订单件数"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#eaa749"
}
},
{
"key"
:
"营销额(万元)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#49eb29"
}
}
]
},{
"title"
:
"上海欧也股份有限公司"
,
"column"
:
[
{
"key"
:
"订单量(万吨)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"red"
}
},
{
"key"
:
"订单件数"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#eaa749"
}
},
{
"key"
:
"营销额(万元)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#49eb29"
}
}
]
},{
"title"
:
"上海欧也股份有限公司"
,
"column"
:
[
{
"key"
:
"订单量(万吨)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"red"
}
},
{
"key"
:
"订单件数"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#eaa749"
}
},
{
"key"
:
"营销额(万元)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#49eb29"
}
}
]
},{
"title"
:
"上海欧也股份有限公司"
,
"column"
:
[
{
"key"
:
"订单量(万吨)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"red"
}
},
{
"key"
:
"订单件数"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#eaa749"
}
},
{
"key"
:
"营销额(万元)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#49eb29"
}
}
]
},{
"title"
:
"上海欧也股份有限公司"
,
"column"
:
[
{
"key"
:
"订单量(万吨)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"red"
}
},
{
"key"
:
"订单件数"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#eaa749"
}
},
{
"key"
:
"营销额(万元)"
,
"value"
:
"202,012"
,
"valStyle"
:
{
"color"
:
"#49eb29"
}
}
]
}
]
}
src/module/databoard/databoard/order-proportion.vue
View file @
66e6bba4
...
...
@@ -22,13 +22,6 @@
</contrast-card>
</div>
<div
class=
"card-board"
v-if=
"currentBtn.subdivide !== '01'"
>
<!--
<contrast-card
v-for=
"data in currentHeadData"
style=
"height: 100%;width: 18%;"
:class=
"
{'selectCard': currentCard === data.title}" @click.native="selectCard(data)" :style="listCardStyle">-->
<!--
<div
style=
"width: 100%; height: 100%; float:left; padding: 2%; line-height: 28px; display: flex; align-items: center; font-size: 14px;"
>
-->
<!--
<table-column
style=
"float: left;width: 20%;"
:data=
"data.data"
name=
"title"
:title=
"data.title"
:title-formatter=
"value=> value+'(万元)'"
show-head
:title-style=
"
{'font-size': '18px','padding-left':'7%','white-space': 'nowrap'}"/>-->
<!--
<table-column
style=
"float: left;width: 60%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data=
"data.data"
name=
"today"
:value-formatter=
"converAmont"
show-head
/>
-->
<!--
<table-column
style=
"float: left;width: 20%;"
:data=
"data.data"
name=
"yesterday"
:value-formatter=
"converAmont"
title=
"昨日"
show-head
/>
-->
<!--
</div>
-->
<!--
</contrast-card>
-->
<contrast-card
v-for=
"data in currentHeadData"
style=
"height: 100%;width: 18%;"
:class=
"
{'selectCard': currentCard === data.key}" @click.native="selectCard(data)" :style="listCardStyle">
<div
style=
"width: 100%; height: 20%; float:left; padding: 2%; line-height: 28px; display: flex; align-items: center; font-size: 14px;"
>
<table-column
style=
"float: left;width: 80%;"
:data=
"[]"
name=
"title"
:title=
"data.title"
:title-formatter=
"value=> value+'(万元)'"
show-head
:title-style=
"
{'font-size': '18px','padding-left':'3%','white-space': 'nowrap',}"/>
...
...
@@ -46,7 +39,7 @@
<display-board
class=
"trade_left"
title=
"订单量占比"
title_size=
"large"
>
<winners-list
style=
"height: 96%;overflow: auto;"
id=
"ar_company_list"
:rows=
"currentDetailData"
:show-icon=
"false"
:columns-style=
"
{'title':{'width':'50%'},'订单量(万吨)':{'width':'30%'}}" :col-formatter="{'1':(v)=>v+'%'}"/>
</display-board>
<line-bar-chart
style=
"width: 75%;height: 100%;"
:data=
"currentDetailData"
x=
"company"
y=
"value"
:title=
"chartTitle"
:formatter=
"formatter"
:line-formatter=
"lineFormatter"
bar-formatter=
"
{@value}万元"/>
<line-bar-chart
ref=
"chart"
style=
"width: 75%;height: 100%;"
:data=
"currentDetailData"
x=
"company"
y=
"value"
:title=
"chartTitle"
:formatter=
"formatter"
:line-formatter=
"lineFormatter"
bar-formatter=
"
{@value}万元"/>
</div>
</div>
</
template
>
...
...
@@ -62,13 +55,14 @@ import LineBarChart from "../components/chart/line-bar-chart.vue";
import
{
getHeadData
}
from
"./js/orderProportionHeadData"
;
import
{
conver_amont
}
from
"../../utils/numUtil"
;
import
{
getDetailData
}
from
"./js/orderProportionDetailData"
;
import
moment
from
"moment"
;
export
default
{
name
:
"OrderProportion"
,
components
:
{
LineBarChart
,
WinnersList
,
DisplayBoard
,
ContrastCard
,
TableColumn
,
TitleContentMark
},
data
()
{
return
{
today
:
"2022-06-26"
,
today
:
moment
().
format
(
"yyyy-MM-DD"
)
,
currentHeadData
:[],
currentDetailData
:[],
chart
:
null
,
...
...
@@ -102,7 +96,7 @@ export default {
getHeadData
({
cur_day
:
this
.
today
,
time_type
:
this
.
currentBtn
.
date
,
group_type
:
this
.
currentBtn
.
subdivide
},
(
res
)
=>
{
this
.
currentHeadData
=
res
;
if
(
type
!==
"date"
){
if
(
type
&&
type
!==
"date"
){
this
.
currentCard
=
res
[
0
]?
res
[
0
].
key
:
null
;
this
.
chartTitle
=
res
[
0
]?(
res
[
0
].
title
+
'委托单位占比'
):
null
;
}
...
...
@@ -135,16 +129,26 @@ export default {
},
calcCardWidth
(){
this
.
listCardStyle
.
width
=
"calc((100% - 4rem) / "
+
this
.
currentHeadData
.
length
+
")"
;
}
},
refreshData
(){
this
.
getHeadData
();
},
},
mounted
()
{
this
.
changeDimension
();
setTimeout
(()
=>
{
let
chartDom
=
this
.
$refs
.
chart
;
this
.
chart
=
echarts
.
init
(
chartDom
);
this
.
chart
.
setOption
(
this
.
chartOption
);
},
500
)
},
watch
:{
countDown
(
n
,
o
){
if
(
n
===
1
){
this
.
refreshData
();
}
},
},
props
:{
countDown
:{
type
:
Number
}
}
}
</
script
>
<
style
scoped
>
...
...
src/module/databoard/databoard/turnover-detail.vue
View file @
66e6bba4
...
...
@@ -36,13 +36,13 @@ import ContrastCard from "../components/card/contrast-card.vue";
import
*
as
echarts
from
"echarts"
;
import
{
getTrunOver
}
from
"./turnoverDetail"
import
{
conver_amont
}
from
"../../utils/numUtil"
;
import
moment
from
'moment'
export
default
{
name
:
"TurnoverDetail"
,
components
:
{
ContrastCard
,
TableColumn
,
TitleContentMark
},
data
()
{
return
{
today
:
'2022-06-26'
,
today
:
moment
().
format
(
"yyyy-MM-DD"
)
,
curPageCode
:
this
.
$route
.
query
.
code
?
this
.
$route
.
query
.
code
:
"yye"
,
currentData
:
{},
mockDataDay
:
{
...
...
src/module/databoard/index.vue
View file @
66e6bba4
This diff is collapsed.
Click to expand it.
src/module/index/index.vue
View file @
66e6bba4
...
...
@@ -3,15 +3,15 @@
<div
class=
"head"
@
click=
"goIndex"
>
<div
class=
"text_left"
>
<input
class=
"btn"
type=
"button"
value=
"返回上级"
v-if=
"$route.fullPath !== '/index'"
@
click=
"goIndex"
>
<span>
2023-08-01
</span>
<span>
17:18:29
</span>
<span>
星期三
</span>
<span>
{{
currentDate
}}
</span>
<span>
{{
currentTime
}}
</span>
<span>
{{
currentWeek
}}
</span>
</div>
<div
class=
"text_right"
>
<span>
刷新时间:
{{
countDown
}}
s
</span>
</div>
</div>
<router-view
style=
"height: 90%"
v-if=
"isRouterAlive"
></router-view>
<router-view
style=
"height: 90%"
v-if=
"isRouterAlive"
:countDown=
"countDown"
></router-view>
</div>
</
template
>
...
...
@@ -24,14 +24,17 @@ export default {
name
:
'app'
,
data
()
{
return
{
countDown
:
10000
,
countDown
:
10
,
currentDate
:
null
,
currentTime
:
null
,
currentWeek
:
null
,
isRouterAlive
:
true
,
countDownTimer
:
null
,
week
:
[
'星期天'
,
'星期一'
,
'星期二'
,
'星期三'
,
'星期四'
,
'星期五'
],
}
},
methods
:
{
goIndex
()
{
console
.
log
(
this
.
$router
)
this
.
$router
.
push
({
path
:
'/'
})
},
reload
()
{
...
...
@@ -40,15 +43,21 @@ export default {
this
.
isRouterAlive
=
true
})
},
setCurrentDateTime
(){
let
now
=
new
Date
();
this
.
currentDate
=
now
.
getFullYear
()
+
"-"
+
now
.
getMonth
()
+
"-"
+
now
.
getDate
();
this
.
currentTime
=
now
.
getHours
()
+
":"
+
now
.
getMinutes
()
+
":"
+
now
.
getSeconds
();
this
.
currentWeek
=
this
.
week
[
now
.
getDay
()];
},
},
mounted
()
{
// 倒计时器
this
.
countDownTimer
=
setInterval
(()
=>
{
this
.
countDown
--
if
(
this
.
countDown
<=
0
)
{
// this.reload()
this
.
countDown
=
10
this
.
countDown
=
10
;
}
this
.
setCurrentDateTime
();
},
1000
)
},
beforeDestroy
()
{
...
...
src/module/index/router/index_router.js
View file @
66e6bba4
...
...
@@ -8,6 +8,8 @@ import ArCompanyMonthlyBar from "../../databoard/components/chart/ar-company-mon
import
ArMonthlyCompanyBar
from
"../../databoard/components/chart/ar-monthly-company-bar.vue"
;
import
TurnoverDetail
from
"../../databoard/databoard/turnover-detail.vue"
;
import
OrderProportion
from
"../../databoard/databoard/order-proportion.vue"
;
import
LostAddCustomer
from
"../../databoard/databoard/lost-add-customer.vue"
;
Vue
.
use
(
Router
)
...
...
@@ -62,6 +64,11 @@ export default new Router({
path
:
'/order-proportion'
,
name
:
'OrderProportion'
,
component
:
OrderProportion
},
{
path
:
'/lost-add-customer'
,
name
:
'lostAddCustomer'
,
component
:
LostAddCustomer
}
]
})
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