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
Hide 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
...
...
@@ -4,7 +4,8 @@
<display-board
class=
"trade_left"
title=
"营业情况"
>
<div
style=
"height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;"
>
<contrast-card
v-for=
"data in yyqk"
style=
"height: 28%;"
@
click
.
native=
"routerTo('/turnover-detail',paths[data.title])"
>
<contrast-card
v-for=
"data in yyqk"
style=
"height: 28%;"
@
click
.
native=
"routerTo('/turnover-detail',paths[data.title])"
>
<title-content-mark
style=
"width: 40%;color: #369afa;float: left;"
:title=
"data.title"
:content=
"data.amount"
:mark=
"data.unit"
/>
<div
...
...
@@ -21,7 +22,8 @@
<display-board
class=
"trade_middle"
corner_size=
"large"
>
<div
style=
"height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem"
>
<simple-card
v-for=
"data in arSummary"
style=
"width: 30%;height: 100%"
>
<title-content-mark
style=
"color: #5eeef4;"
:title=
"data.title"
:content=
"data.value"
:mark=
"'万元'"
isCenter
isBold
/>
<title-content-mark
style=
"color: #5eeef4;"
:title=
"data.title"
:content=
"data.value"
:mark=
"'万元'"
isCenter
isBold
/>
</simple-card>
</div>
<ar-summary-bar
ref=
"arSummaryBar"
style=
"width: 100%; height: 64%;"
></ar-summary-bar>
...
...
@@ -45,7 +47,7 @@
</div>
<div
class=
"middle"
>
<display-board
class=
"trade_left"
title=
"已开票未收款"
>
<winners-list
style=
"height: 96%"
@
click
.
native=
"goArBar"
id=
"ar_company_list"
:rows=
"arCompanyList"
/>
<winners-list
style=
"height: 96%
;overflow: auto;
"
@
click
.
native=
"goArBar"
id=
"ar_company_list"
:rows=
"arCompanyList"
/>
</display-board>
<div
class=
"trade_middle"
style=
"border: none;box-shadow: none;"
>
<div
style=
"display: flex; justify-content: space-between; height: 50%;"
>
...
...
@@ -87,30 +89,30 @@
<showcase
style=
"width: 18%;"
title=
"当日订单量"
>
<title-content-mark
style=
"float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style=
"font-size: 16px;"
mark-style=
"font-size: 10px;"
:content=
"
mockData.
drddl.weight"
content-style=
"font-size: 16px;"
mark-style=
"font-size: 10px;"
:content=
"drddl.weight"
mark=
"万吨"
/>
<title-content-mark
style=
"float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style=
"font-size: 16px;"
mark-style=
"font-size: 10px;"
:content=
"
mockData.
drddl.amount"
mark=
"万元"
/>
:content=
"drddl.amount"
mark=
"万元"
/>
</showcase>
<showcase
style=
"width: 18%;"
title=
"当日完成量"
>
<title-content-mark
style=
"float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style=
"font-size: 16px;"
mark-style=
"font-size: 10px;"
:content=
"
mockData.
drwcl.weight"
content-style=
"font-size: 16px;"
mark-style=
"font-size: 10px;"
:content=
"drwcl.weight"
mark=
"万吨"
/>
<title-content-mark
style=
"float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style=
"font-size: 16px;"
mark-style=
"font-size: 10px;"
:content=
"
mockData.
drwcl.amount"
mark=
"万元"
/>
:content=
"drwcl.amount"
mark=
"万元"
/>
</showcase>
<showcase
style=
"width: 18%;"
title=
"余量"
>
<title-content-mark
style=
"float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style=
"font-size: 16px;"
mark-style=
"font-size: 10px;"
:content=
"
mockData.
yl.weight"
mark=
"万吨"
/>
content-style=
"font-size: 16px;"
mark-style=
"font-size: 10px;"
:content=
"yl.weight"
mark=
"万吨"
/>
<title-content-mark
style=
"float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style=
"font-size: 16px;"
mark-style=
"font-size: 10px;"
:content=
"
mockData.
yl.amount"
mark=
"万元"
/>
:content=
"yl.amount"
mark=
"万元"
/>
</showcase>
<showcase
style=
"width: 18%;"
title=
"流失客户"
>
<showcase
style=
"width: 18%;"
title=
"流失客户"
@
click
.
native=
"routerTo('/lost-add-customer')"
>
<title-content-mark
style=
"float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style=
"font-size: 16px;"
mark-style=
"font-size: 10px;"
:content=
"lskh.weight"
...
...
@@ -119,7 +121,7 @@
content-style=
"font-size: 16px;"
mark-style=
"font-size: 10px;"
:content=
"lskh.amount"
mark=
"万元"
/>
</showcase>
<showcase
style=
"width: 18%;"
title=
"新增客户"
>
<showcase
style=
"width: 18%;"
title=
"新增客户"
@
click
.
native=
"routerTo('/lost-add-customer')"
>
<title-content-mark
style=
"float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style=
"font-size: 16px;"
mark-style=
"font-size: 10px;"
:content=
"xzkh.weight"
...
...
@@ -131,9 +133,14 @@
</div>
</div>
<display-board
class=
"trade_right"
title=
"当日订单量占比"
>
<div
style=
"height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;"
>
<ring-pie-chart
ref=
"transportTypeChart"
style=
"width: 100%;height: 50%;z-index: 999"
name=
"运输类型占比"
:data=
"transportTypeOrderFinishPie"
@
click
.
native=
"routerTo('/order-proportion')"
:value-formatter=
"pieDataValueFormatter"
:formatter=
"pieDataFormatter"
/>
<ring-pie-chart
ref=
"customerChart"
style=
"width: 100%;height: 50%;"
name=
"公司占比"
:data=
"customerOrderFinishPie"
@
click
.
native=
"routerTo('/order-proportion')"
:value-formatter=
"pieDataValueFormatter"
:formatter=
"pieDataFormatter"
/>
<div
style=
"height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;"
>
<ring-pie-chart
ref=
"transportTypeChart"
style=
"width: 100%;height: 50%;z-index: 999"
name=
"运输类型占比"
:data=
"transportTypeOrderFinishPie"
@
click
.
native=
"routerTo('/order-proportion')"
:value-formatter=
"pieDataValueFormatter"
:formatter=
"pieDataFormatter"
/>
<ring-pie-chart
ref=
"customerChart"
style=
"width: 100%;height: 50%;"
name=
"公司占比"
:data=
"customerOrderFinishPie"
@
click
.
native=
"routerTo('/order-proportion')"
:value-formatter=
"pieDataValueFormatter"
:formatter=
"pieDataFormatter"
/>
</div>
</display-board>
</div>
...
...
@@ -149,10 +156,16 @@ import WinnersList from "./components/card/winners-list.vue";
import
TitleContentMark
from
"./components/layout/title-content-mark.vue"
;
import
TableColumn
from
"./components/table/table-column.vue"
;
import
RingPieChart
from
"./components/chart/ring-pie-chart.vue"
;
import
{
arSummaryBar
,
arCompanyList
,
getBusinessConditionDatas
,
customerOrderFinishPie
,
getOrderLoseAddCustomer
}
from
"../api/apiList"
import
{
arSummaryBar
,
arCompanyList
,
getBusinessConditionDatas
,
getOrderLoseAddCustomer
,
getOrderBusinessConditionData
}
from
"../api/apiList"
import
{
calc_hb_str
,
calc_tb_str
,
conver_amont
,
conver_num_retain
}
from
"../utils/numUtil"
;
import
{
getTransportTypeOrderFinishPie
,
getCustomerOrderFinishPie
}
from
"./databoard/js/indexPieData"
;
import
{
getTransportTypeOrderFinishPie
,
getCustomerOrderFinishPie
}
from
"./databoard/js/indexPieData"
;
import
moment
from
'moment'
export
default
{
components
:
{
RingPieChart
,
...
...
@@ -167,8 +180,7 @@ export default {
},
data
()
{
return
{
today
:
'2022-06-26'
,
// today: moment().format("yyyy-MM-DD"),
today
:
moment
().
format
(
"yyyy-MM-DD"
),
yyqk
:
{
yye
:
{
title
:
"营业额"
,
...
...
@@ -235,6 +247,18 @@ export default {
weight
:
"2,000"
,
amount
:
"20,000"
,
},
drddl
:
{
weight
:
"2,000"
,
amount
:
"20,000"
,
},
drwcl
:
{
weight
:
"2,000"
,
amount
:
"20,000"
,
},
yl
:
{
weight
:
"2,000"
,
amount
:
"20,000"
,
},
mockData
:
{
zqk
:
{
yszk
:
{
...
...
@@ -374,6 +398,59 @@ export default {
currentValue
:
"21,000"
,
},
],
zkqk
:
{
yszk
:
{
title
:
"应收账款"
,
amount
:
"20,303"
,
unit
:
"万元"
,
hb
:
[
{
title
:
"昨天"
,
amount
:
"21,000"
,
rate
:
"-3.32%"
,
},
{
title
:
"上月"
,
amount
:
"20,000"
,
rate
:
"+4.92%"
,
},
],
},
yfzk
:
{
title
:
"应付账款"
,
amount
:
"10,303"
,
unit
:
"万元"
,
hb
:
[
{
title
:
"昨日"
,
amount
:
"11,000"
,
rate
:
"-2.68%"
,
},
{
title
:
"上月"
,
amount
:
"10,000"
,
rate
:
"+5.71%"
,
},
],
},
zsye
:
{
title
:
"账上余额"
,
amount
:
"10,000"
,
unit
:
"万元"
,
hb
:
[
{
title
:
"昨日"
,
amount
:
"10,000"
,
rate
:
"0.00%"
,
},
{
title
:
"上月"
,
amount
:
"10,000"
,
rate
:
"0.00%"
,
},
],
},
},
barChart
:
{
textStyle
:
{
color
:
"#fff"
},
tooltip
:
{},
...
...
@@ -414,16 +491,14 @@ export default {
"成本"
:
"cb"
,
"毛利"
:
"ml"
,
},
dataset
:{},
transportTypeOrderFinishPie
:[],
customerOrderFinishPie
:[],
arCompanyList
:[],
dataset
:
{},
transportTypeOrderFinishPie
:
[],
customerOrderFinishPie
:
[],
arCompanyList
:
[],
charts
:
{}
}
},
methods
:
{
log
(){
},
cellStyleFunction
(
data
)
{
let
res
=
{
color
:
'#33ff66'
};
if
(
data
.
indexOf
(
'-'
)
!==
-
1
)
{
...
...
@@ -436,7 +511,7 @@ export default {
this
.
charts
[
chartsKey
].
resize
();
}
},
routerTo
(
path
,
code
)
{
routerTo
(
path
,
code
)
{
this
.
$router
.
push
({
path
:
path
,
query
:
{
code
:
code
}});
},
//营业情况
...
...
@@ -496,14 +571,19 @@ export default {
console
.
log
(
err
);
});
},
refreshData
(){
getTransportTypeOrderFinishPie
(
res
=>
this
.
transportTypeOrderFinishPie
=
res
,
this
.
today
);
getCustomerOrderFinishPie
(
res
=>
this
.
customerOrderFinishPie
=
res
,
this
.
today
);
refreshData
()
{
getTransportTypeOrderFinishPie
(
res
=>
this
.
transportTypeOrderFinishPie
=
res
,
this
.
today
);
getCustomerOrderFinishPie
(
res
=>
this
.
customerOrderFinishPie
=
res
,
this
.
today
);
this
.
showBusinessConditionDatas
();
this
.
getArSummaryBar
();
this
.
getArCompanyList
();
this
.
getLoseAndAdd
();
this
.
getOrderBusinessCondition
();
},
pieDataValueFormatter
(
param
){
pieDataValueFormatter
(
param
)
{
return
conver_amont
(
param
)
+
"万元"
;
},
pieDataFormatter
(
param
)
{
pieDataFormatter
(
param
)
{
return
param
.
name
+
'
\
r
\
n'
+
this
.
pieDataValueFormatter
(
param
.
value
)
+
"万元"
;
},
getLoseAndAdd
()
{
...
...
@@ -514,20 +594,37 @@ export default {
this
.
xzkh
.
amount
=
conver_amont
(
data
.
add_sell_settle_amount_sum
);
this
.
xzkh
.
weight
=
conver_amont
(
data
.
add_weight_sum
);
})
},
getOrderBusinessCondition
()
{
getOrderBusinessConditionData
(
this
.
today
).
then
(
res
=>
{
let
data
=
res
.
data
this
.
drddl
.
amount
=
conver_amont
(
data
.
cur_sell_settle_amount
);
this
.
drddl
.
weight
=
conver_amont
(
data
.
cur_unit_weight
);
this
.
drwcl
.
amount
=
conver_amont
(
data
.
cur_finish_sell_settle_amount
);
this
.
drwcl
.
weight
=
conver_amont
(
data
.
cur_finish_unit_weight
);
this
.
yl
.
amount
=
conver_amont
(
data
.
cur_unfinish_sell_settle_amount
);
this
.
yl
.
weight
=
conver_amont
(
data
.
cur_unfinish_unit_weight
);
})
}
},
mounted
()
{
this
.
showBusinessConditionDatas
();
setTimeout
(()
=>
{
window
.
addEventListener
(
'resize'
,
this
.
resizeChart
);
},
500
)
this
.
getArSummaryBar
();
this
.
getArCompanyList
();
this
.
getLoseAndAdd
();
this
.
refreshData
();
},
beforeDestroy
()
{
window
.
removeEventListener
(
"resize"
,
this
.
resizeChart
);
},
watch
:{
countDown
(
n
,
o
){
console
.
log
(
n
)
if
(
n
===
1
){
this
.
refreshData
();
}
},
},
props
:{
countDown
:{
type
:
Number
}
}
};
</
script
>
...
...
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