Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Z
zc-qiyewx-app
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
杨勇飞
zc-qiyewx-app
Commits
b6d9ce25
You need to sign in or sign up before continuing.
Commit
b6d9ce25
authored
Feb 26, 2025
by
刘杰
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
企业微信前端
parent
240d8e4b
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
2044 additions
and
16 deletions
+2044
-16
bossCard.vue
components/bossCard/bossCard.vue
+38
-11
bossCard2.vue
components/bossCard2/bossCard2.vue
+1685
-0
orderEventList.vue
components/orderEventList/orderEventList.vue
+310
-0
orderQueryContent.vue
components/orderQueryContent/orderQueryContent.vue
+2
-2
index.vue
pages/abnormal/list/index.vue
+8
-2
index.vue
pages/index/index.vue
+1
-1
No files found.
components/bossCard/bossCard.vue
View file @
b6d9ce25
...
@@ -258,8 +258,7 @@
...
@@ -258,8 +258,7 @@
<!-- 项目运营表格 -->
<!-- 项目运营表格 -->
<view
class=
"table-container"
>
<view
class=
"table-container"
>
<text
class=
"table-title"
>
模拟老板运营情况
</text>
<text
class=
"table-title"
>
模拟老板运营情况
</text>
<scroll-view
scroll-x
class=
"table-scroll"
>
<scroll-view
scroll-x
@
scroll=
"scroll"
:show-scrollbar=
"true"
scroll-left=
"20"
class=
"table-scroll"
>
<!--
<view
class=
"table-scroll"
>
-->
<uni-table
:data=
"currentData.tableData"
border
:loading=
"loading"
emptyText=
"暂无数据"
>
<uni-table
:data=
"currentData.tableData"
border
:loading=
"loading"
emptyText=
"暂无数据"
>
<uni-tr>
<uni-tr>
<uni-th
align=
"center"
width=
"70"
>
模拟老板
</uni-th>
<uni-th
align=
"center"
width=
"70"
>
模拟老板
</uni-th>
...
@@ -284,10 +283,19 @@
...
@@ -284,10 +283,19 @@
<uni-td>
{{
item
.
manpower
}}
</uni-td>
<uni-td>
{{
item
.
manpower
}}
</uni-td>
</uni-tr>
</uni-tr>
</uni-table>
</uni-table>
<!--
</view>
-->
</scroll-view>
</scroll-view>
</view>
</view>
</scroll-view>
</scroll-view>
<u-popup
:show=
"showOrderEvent"
mode=
"bottom"
>
<scroll-view
scroll-y=
"true"
class=
"scroll-Y"
>
<orderEventList
ref=
"orderEventList"
:isEdit=
"showOrderEvent"
@
close=
"orderEventClose"
></orderEventList>
<!--
<orderInsertContent
ref=
"orderInsertContent"
:isEdit=
"showEdit"
@
close=
"orderEditClose"
>
</orderInsertContent>
-->
</scroll-view>
</u-popup>
</view>
</view>
</
template
>
</
template
>
...
@@ -323,6 +331,7 @@
...
@@ -323,6 +331,7 @@
sortType
:
'receivable'
,
sortType
:
'receivable'
,
projectSortType
:
'receivable'
,
projectSortType
:
'receivable'
,
timeData
:
{},
timeData
:
{},
showOrderEvent
:
false
}
}
},
},
computed
:
{
computed
:
{
...
@@ -379,6 +388,9 @@
...
@@ -379,6 +388,9 @@
})
})
},
},
methods
:
{
methods
:
{
orderEventClose
()
{
this
.
showOrderEvent
=
false
},
async
initData
()
{
async
initData
()
{
this
.
staffCode
=
uni
.
getStorageSync
(
`staffCode`
);
this
.
staffCode
=
uni
.
getStorageSync
(
`staffCode`
);
this
.
staffKind
=
uni
.
getStorageSync
(
'uc_staff_kind'
);
this
.
staffKind
=
uni
.
getStorageSync
(
'uc_staff_kind'
);
...
@@ -862,6 +874,7 @@
...
@@ -862,6 +874,7 @@
uni
.
navigateTo
({
uni
.
navigateTo
({
url
:
'/pages/abnormal/list/index'
url
:
'/pages/abnormal/list/index'
});
});
// this.showOrderEvent = true
},
},
navigateToDailyReport
()
{
navigateToDailyReport
()
{
console
.
log
(
'点击了日报跳转按钮'
);
console
.
log
(
'点击了日报跳转按钮'
);
...
@@ -903,6 +916,12 @@
...
@@ -903,6 +916,12 @@
.scroll-list
{
.scroll-list
{
height
:
calc
(
100vh
-
60px
);
height
:
calc
(
100vh
-
60px
);
touch-action
:
pan-x
;
/* 允许横向滚动 */
overflow-x
:
auto
;
/* 允许横向滚动 */
-webkit-overflow-scrolling
:
touch
;
/* 启用 iOS 的平滑滚动 */
}
}
.report-container
{
.report-container
{
...
@@ -1522,7 +1541,7 @@
...
@@ -1522,7 +1541,7 @@
-webkit-overflow-scrolling
:
touch
;
-webkit-overflow-scrolling
:
touch
;
touch-action
:
pan-y
;
touch-action
:
pan-y
;
&
:
:-
webkit-scrollbar
{
&
:
:-
webkit-scrollbar
{
height
:
6px
;
height
:
6px
;
background
:
#f5f5f5
;
background
:
#f5f5f5
;
...
@@ -1543,10 +1562,10 @@
...
@@ -1543,10 +1562,10 @@
}
}
.table-container
{
.table-container
{
display
:
block
;
width
:
100%
;
white-space
:
nowrap
;
background-color
:
#fff
;
background-color
:
#fff
;
border-radius
:
8px
;
border-radius
:
8px
;
overflow-x
:
hidden
;
margin-bottom
:
10px
;
margin-bottom
:
10px
;
...
@@ -1559,14 +1578,22 @@
...
@@ -1559,14 +1578,22 @@
}
}
.table-scroll
{
.table-scroll
{
scroll-margin-left
:
0
;
width
:
95%
;
margin-bottom
:
10px
;
margin-bottom
:
10px
;
display
:
block
;
width
:
100%
;
height
:
180px
;
overflow-x
:
auto
;
overflow-x
:
auto
;
overflow-y
:
auto
;
/* 允许横向滚动 */
-webkit-overflow-scrolling
:
touch
;
-webkit-overflow-scrolling
:
touch
;
/* 启用 iOS 的平滑滚动 */
touch-action
:
pan-x
;
/* 允许横向滚动 */
border
:
1px
solid
#e8e8e8
;
/* 可选:为滚动条添加边框 */
max-width
:
100%
;
/* 确保容器宽度适应 */
order-radius
:
3px
;
white-space
:
nowrap
;
/
deep
/
.uni-table
{
/
deep
/
.uni-table
{
min-width
:
100%
;
min-width
:
100%
;
width
:
max-content
;
width
:
max-content
;
...
...
components/bossCard2/bossCard2.vue
0 → 100644
View file @
b6d9ce25
<
template
>
<view
class=
"report-container"
>
<!-- 顶部统计概览 -->
<!--
<view
class=
"top-stats"
>
<view
class=
"stat-item"
>
<text
class=
"label"
>
占位区域
</text>
<text
class=
"value"
>
1280
</text>
</view>
<view
class=
"stat-item"
>
<text
class=
"label"
>
占位区域
</text>
<text
class=
"value"
>
3562
</text>
</view>
<view
class=
"stat-item"
>
<text
class=
"label"
>
占位区域
</text>
<text
class=
"value"
>
85.6%
</text>
</view>
<view
class=
"stat-item"
>
<text
class=
"label"
>
占位区域
</text>
<text
class=
"value"
>
¥896.5w
</text>
</view>
</view>
-->
<!-- 顶部时间导航 -->
<view
class=
"time-nav"
>
<view
class=
"nav-item"
:class=
"
{active: activeTime === 'month'}" @click="switchTime('month')">本月
</view>
<view
class=
"nav-item"
:class=
"
{active: activeTime === 'week'}" @click="switchTime('week')">本周
</view>
<view
class=
"nav-item"
:class=
"
{active: activeTime === 'yesterday'}" @click="switchTime('yesterday')">昨日
</view>
<view
class=
"nav-item"
:class=
"
{active: activeTime === 'today'}" @click="switchTime('today')">今日
</view>
</view>
<!-- 项目概览卡片 -->
<view
class=
"project-card"
>
<view
class=
"overview-content"
>
<!-- 左侧环状进度 -->
<view
class=
"progress-circle"
@
click=
"navigateToDailyReport"
>
<view
class=
"circle-wrapper"
:style=
"
{
background: `conic-gradient(#52C41A 0% ${currentData.overview.submitRate}%, rgba(245,245,245,0.3) ${currentData.overview.submitRate}% 100%)`
}">
<view
class=
"circle-text"
>
<!--
<text
class=
"percentage"
>
{{
currentData
.
overview
.
submitRate
}}
%
</text>
-->
<view
class=
"submit-info"
>
<view
class=
"count-row"
>
<text
class=
"submitted"
>
{{
currentData
.
overview
.
submitCount
}}
</text>
<text
class=
"should-submitted"
>
/
{{
currentData
.
overview
.
totalCount
}}
</text>
</view>
<text
class=
"label"
>
日报提交
</text>
</view>
</view>
</view>
</view>
<!-- 右侧数据统计 -->
<view
class=
"statistics"
>
<view
class=
"stat-row"
>
<view
class=
"stat-item"
>
<view
class=
"stat-block light-green"
>
<text
class=
"number"
>
{{
currentData
.
overview
.
stats
.
projectCount
}}
</text>
<text
class=
"rate"
>
项目
</text>
</view>
</view>
<view
class=
"stat-item"
>
<view
class=
"stat-block light-orange"
>
<text
class=
"number"
>
{{
currentData
.
overview
.
stats
.
orderCount
}}
</text>
<text
class=
"rate"
>
单量
</text>
</view>
</view>
</view>
<view
class=
"stat-row"
>
<view
class=
"stat-item"
>
<view
class=
"stat-block green"
>
<text
class=
"number"
>
{{
currentData
.
overview
.
stats
.
volumeCount
}}
</text>
<text
class=
"rate"
>
方量m³
</text>
</view>
</view>
<view
class=
"stat-item"
>
<view
class=
"stat-block orange"
>
<text
class=
"number"
>
{{
currentData
.
overview
.
stats
.
weightCount
}}
</text>
<text
class=
"rate"
>
重量T
</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 应收应付信息 -->
<view
class=
"finance-info"
>
<!-- 应收模块 -->
<view
class=
"finance-block"
>
<view
class=
"finance-item receivable"
>
<!-- 左侧图标 -->
<view
class=
"left-section"
>
<view
class=
"icon"
>
¥
</view>
</view>
<!-- 右侧内容 -->
<view
class=
"right-section"
>
<view
class=
"main-info"
>
<view
class=
"amount-section"
>
<text
class=
"amount"
>
{{
currentData
.
finance
.
receivable
.
total
}}
</text>
<text
class=
"label"
>
应收
</text>
</view>
<view
class=
"extra-info"
>
<view
class=
"info-row"
>
<text
class=
"label"
>
预计毛利
</text>
<text
class=
"value"
>
{{
currentData
.
finance
.
receivable
.
profit
}}
</text>
</view>
<view
class=
"info-row"
>
<text
class=
"label"
>
毛利率
</text>
<text
class=
"value"
>
{{
currentData
.
finance
.
receivable
.
profitRate
}}
%
</text>
</view>
</view>
</view>
<view
class=
"progress-bar"
>
<view
class=
"progress-bar"
style=
"position: relative; height: 4px;width: 100%; background: #52C41A; border-radius: 2px; overflow: hidden;"
>
<view
class=
"progress"
:style=
"
{
backgroundColor: '#FF4D4F',
opacity:0.9,
width: 100-currentData.finance.receivable.profitRate + '%',
position: 'absolute',
height: '100%',
left: 0,
top: '1px'
}">
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 应付模块 -->
<view
class=
"finance-block"
>
<view
class=
"finance-item payable"
>
<!-- 左侧图标 -->
<view
class=
"left-section"
>
<view
class=
"icon"
>
¥
</view>
</view>
<!-- 右侧内容 -->
<view
class=
"right-section"
>
<view
class=
"main-info"
>
<view
class=
"amount-section"
>
<text
class=
"amount"
>
{{
currentData
.
finance
.
payable
.
total
}}
</text>
<text
class=
"label"
>
应付
</text>
</view>
<view
class=
"extra-info"
>
<view
class=
"info-row"
>
<text
class=
"label"
>
现结
</text>
<text
class=
"value cash"
>
{{
currentData
.
finance
.
payable
.
cash
}}
</text>
</view>
<view
class=
"info-row"
>
<text
class=
"label"
>
月结
</text>
<text
class=
"value monthly"
>
{{
currentData
.
finance
.
payable
.
monthly
}}
</text>
</view>
</view>
</view>
<view
class=
"progress-bar"
style=
"position: relative; height: 4px; background: #f0f0f0; border-radius: 2px; overflow: hidden;"
>
<view
class=
"progress cash"
:style=
"
{
backgroundColor: '#FFA940',
width: cashRatio,
position: 'absolute',
height: '100%',
left: 0,
top: 0
}">
</view>
<view
class=
"progress monthly"
:style=
"
{
backgroundColor: '#13C2C2',
position: 'absolute',
height: '100%',
left: cashRatio,
width: monthlyRatio,
top: 0
}">
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 模拟老板对比图表区域 -->
<view
class=
"chart-container"
>
<view
class=
"chart-header"
>
<text
class=
"chart-title"
>
模拟老板对比
</text>
<view
class=
"sort-buttons"
>
<text
class=
"sort-btn"
:class=
"
{active: sortType === 'receivable'}" @click="sortChart('receivable','myLeaderChart')">
<text
class=
"sort-icon"
></text>
应收
</text>
<text
class=
"sort-btn"
:class=
"
{active: sortType === 'payable'}" @click="sortChart('payable','myLeaderChart')">
<text
class=
"sort-icon"
></text>
应付
</text>
<text
class=
"sort-btn"
:class=
"
{active: sortType === 'profitRate'}" @click="sortChart('profitRate','myLeaderChart')">
<text
class=
"sort-icon"
></text>
利润
</text>
</view>
</view>
<scroll-view
class=
"chart-scroll"
scroll-x
>
<view
class=
"chart-wrapper"
id=
"myLeaderChart"
></view>
</scroll-view>
</view>
<!-- 项目对比图表区域 -->
<!-- todo: 当前排序和模拟老板干涉 -->
<view
class=
"chart-container"
>
<view
class=
"chart-header"
>
<text
class=
"chart-title"
>
项目对比(前10)
</text>
<view
class=
"sort-buttons"
>
<text
class=
"sort-btn"
:class=
"
{active: sortType === 'receivable'}" @click="sortChart('receivable','myProjectChart')">
<text
class=
"sort-icon"
></text>
应收
</text>
<text
class=
"sort-btn"
:class=
"
{active: sortType === 'payable'}" @click="sortChart('payable','myProjectChart')">
<text
class=
"sort-icon"
></text>
应付
</text>
<text
class=
"sort-btn"
:class=
"
{active: sortType === 'profitRate'}" @click="sortChart('profitRate','myProjectChart')">
<text
class=
"sort-icon"
></text>
利润
</text>
</view>
</view>
<scroll-view
class=
"chart-scroll"
scroll-x
>
<view
class=
"chart-wrapper"
id=
"myProjectChart"
></view>
</scroll-view>
</view>
<!-- 项目运营表格 -->
<view
class=
"table-container"
>
<text
class=
"table-title"
>
模拟老板运营情况
</text>
<view
class=
"table-scroll"
>
<uni-table
:data=
"currentData.tableData"
border
stripe
:loading=
"loading"
emptyText=
"暂无数据"
>
<uni-tr>
<uni-th
align=
"center"
width=
"60"
>
模拟老板
</uni-th>
<uni-th
align=
"center"
width=
"50"
>
应收(万)
</uni-th>
<uni-th
align=
"center"
width=
"50"
>
应付(万)
</uni-th>
<uni-th
align=
"center"
width=
"50"
>
应付现结(万)
</uni-th>
<uni-th
align=
"center"
width=
"50"
>
毛利率(%)
</uni-th>
<uni-th
align=
"center"
width=
"50"
>
单量
</uni-th>
<uni-th
align=
"center"
width=
"50"
>
方(m³)
</uni-th>
<uni-th
align=
"center"
width=
"50"
>
吨(T)
</uni-th>
<uni-th
align=
"center"
width=
"50"
>
人力
</uni-th>
</uni-tr>
<uni-tr
v-for=
"(item, index) in currentData.tableData"
:key=
"index"
>
<uni-td>
{{
item
.
boss
}}
</uni-td>
<uni-td>
{{
item
.
receivable
}}
</uni-td>
<uni-td>
{{
item
.
payable
}}
</uni-td>
<uni-td>
{{
item
.
cashPayable
}}
</uni-td>
<uni-td>
{{
item
.
profitRate
}}
%
</uni-td>
<uni-td>
{{
item
.
orderCount
}}
</uni-td>
<uni-td>
{{
item
.
volume
}}
</uni-td>
<uni-td>
{{
item
.
weight
}}
</uni-td>
<uni-td>
{{
item
.
manpower
}}
</uni-td>
</uni-tr>
</uni-table>
</view>
</view>
</view>
</
template
>
<
script
>
import
*
as
echarts
from
'echarts'
import
{
uniIcons
}
from
'@dcloudio/uni-ui'
export
default
{
components
:
{
uniIcons
},
data
()
{
return
{
loading
:
true
,
activeTime
:
'today'
,
myLeaderChart
:
null
,
myProjectChart
:
null
,
sortType
:
'receivable'
,
// 所有时间维度的数据集合
timeData
:
{
month
:
{
overview
:
{
submitRate
:
35.68
,
submitCount
:
156
,
totalCount
:
200
,
stats
:
{
projectCount
:
256
,
orderCount
:
328
,
volumeCount
:
45
,
weightCount
:
89
}
},
finance
:
{
receivable
:
{
total
:
892650
,
profit
:
678900
,
profitRate
:
92.35
},
payable
:
{
total
:
8920
,
cash
:
3580
,
monthly
:
5340
}
},
leaderChartData
:
{
bossNames
:
[
'老板A'
,
'老板B'
,
'老板C'
,
'老板D'
,
'老板E'
,
'老板F'
],
receivable
:
[
320
,
450
,
380
,
420
,
390
,
410
],
payable
:
[
220
,
350
,
280
,
320
,
290
,
310
],
profitRate
:
[
45.5
,
38.2
,
42.8
,
35.6
,
48.9
,
40.2
]
},
projectChartData
:
{
projectNames
:
[
'项目A'
,
'项目B'
,
'项目C'
,
'项目D'
,
'项目E'
,
'项目F'
],
receivable
:
[
320
,
450
,
380
,
420
,
390
,
410
],
payable
:
[
220
,
350
,
280
,
320
,
290
,
310
],
profitRate
:
[
45.5
,
38.2
,
42.8
,
35.6
,
48.9
,
40.2
]
},
tableData
:
[
{
boss
:
'老板A'
,
receivable
:
156800
,
payable
:
128900
,
cashPayable
:
38670
,
profitRate
:
17.8
,
orderCount
:
156
,
volume
:
890
,
weight
:
1250
,
manpower
:
25
},
{
boss
:
'老板B'
,
receivable
:
198500
,
payable
:
158400
,
cashPayable
:
47520
,
profitRate
:
20.2
,
orderCount
:
189
,
volume
:
1020
,
weight
:
1580
,
manpower
:
32
},
{
boss
:
'老板C'
,
receivable
:
145600
,
payable
:
116480
,
cashPayable
:
34944
,
profitRate
:
20.0
,
orderCount
:
142
,
volume
:
760
,
weight
:
980
,
manpower
:
18
},
{
boss
:
'老板D'
,
receivable
:
178900
,
payable
:
143120
,
cashPayable
:
42936
,
profitRate
:
20.0
,
orderCount
:
168
,
volume
:
920
,
weight
:
1350
,
manpower
:
28
},
{
boss
:
'老板E'
,
receivable
:
134500
,
payable
:
107600
,
cashPayable
:
32280
,
profitRate
:
20.0
,
orderCount
:
128
,
volume
:
680
,
weight
:
850
,
manpower
:
15
}
]
},
week
:
{
overview
:
{
submitRate
:
28.45
,
submitCount
:
95
,
totalCount
:
200
,
stats
:
{
projectCount
:
168
,
orderCount
:
235
,
volumeCount
:
28
,
weightCount
:
65
}
},
finance
:
{
receivable
:
{
total
:
568950
,
profit
:
458900
,
profitRate
:
88.69
},
payable
:
{
total
:
5860
,
cash
:
2680
,
monthly
:
3180
}
},
leaderChartData
:
{
bossNames
:
[
'老板A'
,
'老板B'
,
'老板C'
,
'老板D'
,
'老板E'
,
'老板F'
],
receivable
:
[
220
,
350
,
280
,
320
,
290
,
310
],
payable
:
[
120
,
250
,
180
,
220
,
190
,
210
],
profitRate
:
[
42.5
,
35.2
,
39.8
,
32.6
,
45.9
,
37.2
]
},
projectChartData
:
{
projectNames
:
[
'项目A'
,
'项目B'
,
'项目C'
,
'项目D'
,
'项目E'
,
'项目F'
],
receivable
:
[
320
,
450
,
380
,
420
,
390
,
410
],
payable
:
[
220
,
350
,
280
,
320
,
290
,
310
],
profitRate
:
[
45.5
,
38.2
,
42.8
,
35.6
,
48.9
,
40.2
]
},
tableData
:
[
{
boss
:
'老板A'
,
receivable
:
1534.5
,
payable
:
1286.3
,
cashPayable
:
3867
,
profitRate
:
17.8
,
orderCount
:
156
,
volume
:
890
,
weight
:
1250
,
manpower
:
25
},
{
boss
:
'老板B'
,
receivable
:
1286.3
,
payable
:
1025.3
,
cashPayable
:
2680
,
profitRate
:
20.2
,
orderCount
:
189
,
volume
:
1020
,
weight
:
1580
,
manpower
:
32
},
{
boss
:
'老板C'
,
receivable
:
956.8
,
payable
:
765.8
,
cashPayable
:
2405
,
profitRate
:
20.0
,
orderCount
:
142
,
volume
:
760
,
weight
:
980
,
manpower
:
18
},
{
boss
:
'老板D'
,
receivable
:
843.2
,
payable
:
674.2
,
cashPayable
:
2405
,
profitRate
:
20.0
,
orderCount
:
168
,
volume
:
920
,
weight
:
1350
,
manpower
:
28
},
{
boss
:
'老板E'
,
receivable
:
732.1
,
payable
:
585.1
,
cashPayable
:
1302.76
,
profitRate
:
20.0
,
orderCount
:
128
,
volume
:
680
,
weight
:
850
,
manpower
:
15
}
]
},
yesterday
:
{
overview
:
{
submitRate
:
25.35
,
submitCount
:
85
,
totalCount
:
200
,
stats
:
{
projectCount
:
138
,
orderCount
:
186
,
volumeCount
:
22
,
weightCount
:
58
}
},
finance
:
{
receivable
:
{
total
:
498950
,
profit
:
398580
,
profitRate
:
85.69
},
payable
:
{
total
:
4810
,
cash
:
2405
,
monthly
:
2405
}
},
leaderChartData
:
{
bossNames
:
[
'老板A'
,
'老板B'
,
'老板C'
,
'老板D'
,
'老板E'
,
'老板F'
],
receivable
:
[
180
,
290
,
220
,
260
,
230
,
250
],
payable
:
[
80
,
190
,
120
,
160
,
130
,
150
],
profitRate
:
[
40.5
,
33.2
,
37.8
,
30.6
,
43.9
,
35.2
]
},
projectChartData
:
{
projectNames
:
[
'项目A'
,
'项目B'
,
'项目C'
,
'项目D'
,
'项目E'
,
'项目F'
],
receivable
:
[
320
,
450
,
380
,
420
,
390
,
410
],
payable
:
[
220
,
350
,
280
,
320
,
290
,
310
],
profitRate
:
[
45.5
,
38.2
,
42.8
,
35.6
,
48.9
,
40.2
]
},
tableData
:
[
{
boss
:
'老板A'
,
receivable
:
934.5
,
payable
:
886.3
,
cashPayable
:
2405
,
profitRate
:
85.69
,
orderCount
:
186
,
volume
:
22
,
weight
:
58
,
manpower
:
15
},
{
boss
:
'老板B'
,
receivable
:
886.3
,
payable
:
796.3
,
cashPayable
:
2405
,
profitRate
:
85.69
,
orderCount
:
189
,
volume
:
22
,
weight
:
58
,
manpower
:
18
},
{
boss
:
'老板C'
,
receivable
:
756.8
,
payable
:
666.8
,
cashPayable
:
2405
,
profitRate
:
85.69
,
orderCount
:
142
,
volume
:
22
,
weight
:
58
,
manpower
:
18
},
{
boss
:
'老板D'
,
receivable
:
643.2
,
payable
:
553.2
,
cashPayable
:
2405
,
profitRate
:
85.69
,
orderCount
:
168
,
volume
:
22
,
weight
:
58
,
manpower
:
28
},
{
boss
:
'老板E'
,
receivable
:
532.1
,
payable
:
442.1
,
cashPayable
:
1302.76
,
profitRate
:
85.69
,
orderCount
:
128
,
volume
:
22
,
weight
:
58
,
manpower
:
15
}
]
},
today
:
{
overview
:
{
submitRate
:
22.35
,
submitCount
:
80
,
totalCount
:
200
,
stats
:
{
projectCount
:
128
,
orderCount
:
156
,
volumeCount
:
19
,
weightCount
:
55
}
},
finance
:
{
receivable
:
{
total
:
488950
,
profit
:
58674
,
profitRate
:
12.2
},
payable
:
{
total
:
430276
,
cash
:
130276
,
monthly
:
300000
}
},
leaderChartData
:
{
bossNames
:
[
'老板A'
,
'老板B'
,
'老板C'
,
'老板D'
,
'老板E'
,
'老板F'
],
receivable
:
[
150
,
260
,
190
,
230
,
200
,
220
,
180
,
240
,
210
,
170
],
payable
:
[
250
,
160
,
90
,
310
,
100
,
120
,
80
,
140
,
110
,
70
],
profitRate
:
[
38.5
,
31.2
,
35.8
,
28.6
,
41.9
,
33.2
,
36.5
,
29.8
,
34.5
,
32.1
]
},
projectChartData
:
{
projectNames
:
[
'项目A'
,
'项目B'
,
'项目C'
,
'项目D'
,
'项目E'
,
'项目F'
],
receivable
:
[
320
,
450
,
380
,
420
,
390
,
410
],
payable
:
[
220
,
150
,
280
,
320
,
290
,
310
],
profitRate
:
[
45.5
,
38.2
,
42.8
,
35.6
,
48.9
,
40.2
]
},
tableData
:
[
{
boss
:
'老板A'
,
receivable
:
834.5
,
payable
:
786.3
,
cashPayable
:
130276
,
profitRate
:
12.2
,
orderCount
:
156
,
volume
:
19
,
weight
:
55
,
manpower
:
15
},
{
boss
:
'老板B'
,
receivable
:
786.3
,
payable
:
738.3
,
cashPayable
:
130276
,
profitRate
:
12.2
,
orderCount
:
189
,
volume
:
19
,
weight
:
55
,
manpower
:
18
},
{
boss
:
'老板C'
,
receivable
:
656.8
,
payable
:
608.8
,
cashPayable
:
130276
,
profitRate
:
12.2
,
orderCount
:
142
,
volume
:
19
,
weight
:
55
,
manpower
:
18
},
{
boss
:
'老板D'
,
receivable
:
543.2
,
payable
:
495.2
,
cashPayable
:
130276
,
profitRate
:
12.2
,
orderCount
:
168
,
volume
:
19
,
weight
:
55
,
manpower
:
28
},
{
boss
:
'老板E'
,
receivable
:
432.1
,
payable
:
384.1
,
cashPayable
:
130276
,
profitRate
:
12.2
,
orderCount
:
128
,
volume
:
19
,
weight
:
55
,
manpower
:
15
}
]
}
}
}
},
computed
:
{
// 当前选中时间的数据
currentData
()
{
//todo 调用后端接口,直接返回对应时间区间的数据
return
this
.
timeData
[
this
.
activeTime
]
},
// 应付现结比例
cashRatio
()
{
const
{
cash
,
total
}
=
this
.
currentData
.
finance
.
payable
return
(
cash
/
total
*
100
).
toFixed
(
2
)
+
'%'
},
// 应付月结比例
monthlyRatio
()
{
const
{
monthly
,
total
}
=
this
.
currentData
.
finance
.
payable
return
(
monthly
/
total
*
100
).
toFixed
(
2
)
+
'%'
}
},
mounted
()
{
this
.
initLeaderChart
()
this
.
initProjectChart
()
// 在 Vue 的下一个 DOM 更新循环中执行
this
.
$nextTick
(()
=>
{
// 检查当前数据的表格数据是否存在且长度大于 0
if
(
this
.
currentData
.
tableData
&&
this
.
currentData
.
tableData
.
length
>
0
)
{
// 如果表格数据存在,设置 loading 状态为 false,表示数据已加载完成
this
.
loading
=
false
}
// 对领导图表进行排序,按应收数据排序
this
.
sortChart
(
'receivable'
,
'myLeaderChart'
)
// 对项目图表进行排序,按应收数据排序
this
.
sortChart
(
'receivable'
,
'myProjectChart'
)
// 监听窗口的 resize 事件,调用 onResize 方法以适应图表大小
window
.
addEventListener
(
'resize'
,
this
.
onResize
)
})
},
methods
:
{
initLeaderChart
()
{
// 获取数据点数量
const
dataCount
=
this
.
currentData
.
leaderChartData
.
receivable
.
length
;
// 计算所需的最小宽度(假设每个数据点需要100px)
const
minWidth
=
Math
.
max
(
dataCount
*
60
,
500
);
// 设置容器宽度
const
wrapper
=
document
.
getElementById
(
'myLeaderChart'
);
if
(
wrapper
)
{
wrapper
.
style
.
width
=
`
${
minWidth
}
px`
;
wrapper
.
style
.
padding
=
'0 0 5px 0'
;
}
this
.
myLeaderChart
=
echarts
.
init
(
document
.
getElementById
(
'myLeaderChart'
))
const
option
=
{
tooltip
:
{
trigger
:
'item'
,
axisPointer
:
{
type
:
'shadow'
},
formatter
:
function
(
params
)
{
return
params
.
map
(
item
=>
{
if
(
item
.
seriesName
===
'利润率'
)
{
return
`
${
item
.
seriesName
}
:
${
item
.
value
}
%`
}
return
`
${
item
.
seriesName
}
:
${
item
.
value
}
万元`
}).
join
(
'<br/>'
)
}
},
legend
:
{
data
:
[
'应收'
,
'应付'
,
'利润率'
],
bottom
:
0
,
// itemGap: 20
},
grid
:
{
left
:
'3%'
,
right
:
'4%'
,
top
:
'5%'
,
bottom
:
'12%'
,
width
:
'auto'
,
containLabel
:
true
},
xAxis
:
{
type
:
'category'
,
axisLine
:
{
show
:
true
,
lineStyle
:
{
color
:
'#E8E8E8'
}
},
axisLabel
:
{
interval
:
0
,
color
:
'#666'
,
fontSize
:
12
}
},
yAxis
:
[
{
type
:
'value'
,
name
:
'金额(万元)'
,
position
:
'left'
,
axisLine
:
{
show
:
true
},
splitLine
:
{
show
:
false
},
nameTextStyle
:
{
color
:
'#666'
},
axisLabel
:
{
color
:
'#666'
}
},
{
type
:
'value'
,
name
:
'利润率(%)'
,
position
:
'right'
,
min
:
0
,
max
:
100
,
axisLine
:
{
show
:
true
},
splitLine
:
{
show
:
false
},
nameTextStyle
:
{
color
:
'#666'
},
axisLabel
:
{
color
:
'#666'
}
}
],
series
:
[
{
name
:
'应收'
,
type
:
'bar'
,
barGap
:
'0%'
,
barWidth
:
'35%'
,
itemStyle
:
{
color
:
'#52C41A'
,
borderRadius
:
[
4
,
4
,
0
,
0
]
}
},
{
name
:
'应付'
,
type
:
'bar'
,
barWidth
:
'35%'
,
itemStyle
:
{
color
:
'#FF4D4F'
,
borderRadius
:
[
4
,
4
,
0
,
0
]
}
},
{
name
:
'利润率'
,
type
:
'line'
,
yAxisIndex
:
1
,
symbol
:
'circle'
,
symbolSize
:
6
,
itemStyle
:
{
color
:
'#1890FF'
},
lineStyle
:
{
width
:
2
}
}
]
}
this
.
myLeaderChart
.
setOption
(
option
)
},
initProjectChart
()
{
// 获取数据点数量
const
dataCount
=
this
.
currentData
.
projectChartData
.
receivable
.
length
;
// 计算所需的最小宽度(假设每个数据点需要100px)
const
minWidth
=
Math
.
max
(
dataCount
*
60
,
500
);
// 设置容器宽度
const
wrapper
=
document
.
getElementById
(
'myProjectChart'
);
if
(
wrapper
)
{
wrapper
.
style
.
width
=
`
${
minWidth
}
px`
;
wrapper
.
style
.
padding
=
'0 0 5px 0'
;
}
this
.
myProjectChart
=
echarts
.
init
(
document
.
getElementById
(
'myProjectChart'
))
const
option
=
{
tooltip
:
{
trigger
:
'item'
,
axisPointer
:
{
type
:
'shadow'
},
formatter
:
function
(
params
)
{
return
params
.
map
(
item
=>
{
if
(
item
.
seriesName
===
'利润率'
)
{
return
`
${
item
.
seriesName
}
:
${
item
.
value
}
%`
}
return
`
${
item
.
seriesName
}
:
${
item
.
value
}
万元`
}).
join
(
'<br/>'
)
}
},
legend
:
{
data
:
[
'应收'
,
'应付'
,
'利润率'
],
bottom
:
0
,
// itemGap: 20
},
grid
:
{
left
:
'3%'
,
right
:
'4%'
,
top
:
'5%'
,
bottom
:
'12%'
,
width
:
'auto'
,
containLabel
:
true
},
xAxis
:
{
type
:
'category'
,
axisLine
:
{
show
:
true
,
lineStyle
:
{
color
:
'#E8E8E8'
}
},
axisLabel
:
{
interval
:
0
,
color
:
'#666'
,
fontSize
:
12
}
},
yAxis
:
[
{
type
:
'value'
,
name
:
'金额(万元)'
,
position
:
'left'
,
axisLine
:
{
show
:
true
},
splitLine
:
{
show
:
false
},
nameTextStyle
:
{
color
:
'#666'
},
axisLabel
:
{
color
:
'#666'
}
},
{
type
:
'value'
,
name
:
'利润率(%)'
,
position
:
'right'
,
min
:
0
,
max
:
100
,
axisLine
:
{
show
:
true
},
splitLine
:
{
show
:
false
},
nameTextStyle
:
{
color
:
'#666'
},
axisLabel
:
{
color
:
'#666'
}
}
],
series
:
[
{
name
:
'应收'
,
type
:
'bar'
,
barGap
:
'0%'
,
barWidth
:
'35%'
,
itemStyle
:
{
color
:
'#52C41A'
,
borderRadius
:
[
4
,
4
,
0
,
0
]
}
},
{
name
:
'应付'
,
type
:
'bar'
,
barWidth
:
'35%'
,
itemStyle
:
{
color
:
'#FF4D4F'
,
borderRadius
:
[
4
,
4
,
0
,
0
]
}
},
{
name
:
'利润率'
,
type
:
'line'
,
yAxisIndex
:
1
,
symbol
:
'circle'
,
symbolSize
:
6
,
itemStyle
:
{
color
:
'#1890FF'
},
lineStyle
:
{
width
:
2
}
}
]
}
this
.
myProjectChart
.
setOption
(
option
)
},
switchTime
(
time
)
{
this
.
activeTime
=
time
// 更新图表数据
this
.
updateChartSeries
()
},
onResize
()
{
if
(
this
.
myLeaderChart
)
{
this
.
myLeaderChart
.
resize
()
}
if
(
this
.
myProjectChart
){
this
.
myProjectChart
.
resize
()
}
},
sortChart
(
type
,
chart
)
{
this
.
sortType
=
type
let
data
=
null
let
xAxisNames
=
null
if
(
chart
===
'myLeaderChart'
){
data
=
this
.
currentData
.
leaderChartData
xAxisNames
=
this
.
currentData
.
leaderChartData
.
bossNames
}
else
if
(
chart
===
'myProjectChart'
){
data
=
this
.
currentData
.
projectChartData
xAxisNames
=
this
.
currentData
.
projectChartData
.
projectNames
}
// 创建排序用的数组
const
sortArray
=
xAxisNames
.
map
((
name
,
index
)
=>
({
name
,
receivable
:
data
.
receivable
[
index
],
payable
:
data
.
payable
[
index
],
profitRate
:
data
.
profitRate
[
index
]
}))
// 排序
sortArray
.
sort
((
a
,
b
)
=>
{
// 降序排列
return
b
[
type
]
-
a
[
type
]
})
// 更新图表
if
(
chart
===
'myLeaderChart'
){
this
.
myLeaderChart
.
setOption
({
xAxis
:
{
data
:
sortArray
.
map
(
item
=>
item
.
name
)
},
series
:
[{
name
:
'应收'
,
data
:
sortArray
.
map
(
item
=>
item
.
receivable
)
},
{
name
:
'应付'
,
data
:
sortArray
.
map
(
item
=>
item
.
payable
)
},
{
name
:
'利润率'
,
data
:
sortArray
.
map
(
item
=>
item
.
profitRate
)
}]
})
}
else
if
(
chart
===
'myProjectChart'
){
this
.
myProjectChart
.
setOption
({
xAxis
:
{
data
:
sortArray
.
map
(
item
=>
item
.
name
)
},
series
:
[{
name
:
'应收'
,
data
:
sortArray
.
map
(
item
=>
item
.
receivable
)
},
{
name
:
'应付'
,
data
:
sortArray
.
map
(
item
=>
item
.
payable
)
},
{
name
:
'利润率'
,
data
:
sortArray
.
map
(
item
=>
item
.
profitRate
)
}]
})
}
},
updateChartSeries
()
{
this
.
myLeaderChart
.
setOption
({
series
:
[
{
data
:
this
.
currentData
.
leaderChartData
.
receivable
},
{
data
:
this
.
currentData
.
leaderChartData
.
payable
},
{
data
:
this
.
currentData
.
leaderChartData
.
profitRate
}
]
})
this
.
myProjectChart
.
setOption
({
series
:
[
{
data
:
this
.
currentData
.
projectChartData
.
receivable
},
{
data
:
this
.
currentData
.
projectChartData
.
payable
},
{
data
:
this
.
currentData
.
projectChartData
.
profitRate
}
]
})
},
navigateToDailyReport
()
{
// 使用uni-app的导航方法跳转到日报查看页面
uni
.
navigateTo
({
url
:
'/pages/dailyReport/index'
});
}
},
beforeDestroy
()
{
if
(
this
.
myLeaderChart
)
{
this
.
myLeaderChart
.
dispose
()
}
window
.
removeEventListener
(
'resize'
,
this
.
onResize
)
}
}
</
script
>
<
style
lang=
"scss"
>
// 可以定义全局变量
$primary-color
:
#52C41A
;
$danger-color
:
#FF4D4F
;
$warning-color
:
#FFA940
;
$info-color
:
#13C2C2
;
$text-primary
:
#333
;
$text-secondary
:
#666
;
$secondary-color
:
#1890FF
;
$circle-size
:
120px
;
// 在样式文件顶部添加重置样式
page
{
width
:
100%
;
height
:
100%
;
background-color
:
#F5F7FA
;
}
uni-page-body
{
width
:
100%
;
height
:
100%
;
}
.report-container
{
width
:
100%
;
box-sizing
:
border-box
;
background-color
:
#F5F7FA
;
min-height
:
100vh
;
>
view
{
width
:
100%
;
max-width
:
1200px
;
margin
:
0
auto
;
background-color
:
transparent
;
}
.top-stats
{
display
:
flex
;
justify-content
:
space-between
;
// padding: 12px 15px;
background
:
linear-gradient
(
135deg
,
#f6f8fc
0%
,
#ffffff
100%
);
margin-bottom
:
15px
;
box-shadow
:
0
1px
4px
rgba
(
0
,
0
,
0
,
0
.05
);
.stat-item
{
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
.label
{
font-size
:
12px
;
color
:
#666
;
margin-bottom
:
4px
;
}
.value
{
font-size
:
16px
;
font-weight
:
500
;
color
:
#333
;
}
}
}
.time-nav
{
display
:
flex
;
background-color
:
#fff
;
border-radius
:
8px
;
margin-bottom
:
15px
;
box-shadow
:
0
2px
12px
rgba
(
0
,
0
,
0
,
0
.04
);
.nav-item
{
flex
:
1
;
text-align
:
center
;
padding
:
6px
0
;
font-size
:
14px
;
color
:
$text-secondary
;
position
:
relative
;
transition
:
all
0
.3s
ease
;
&
.active
{
color
:
#1890FF
;
font-weight
:
bold
;
&
:
:
after
{
content
:
''
;
position
:
absolute
;
left
:
50%
;
bottom
:
-2px
;
transform
:
translateX
(
-50%
);
width
:
12px
;
height
:
2px
;
background-color
:
#1890FF
;
border-radius
:
1px
;
}
}
&
:not
(
:last-child
)
{
border-right
:
1px
solid
#f0f0f0
;
}
}
}
.project-card
{
display
:
flex
;
background-color
:
#fff
!
important
;
width
:
100%
;
box-sizing
:
border-box
;
padding
:
15px
15px
0px
15px
;
border-radius
:
8px
;
margin-bottom
:
15px
;
box-shadow
:
0
2px
12px
rgba
(
0
,
0
,
0
,
0
.08
);
.overview-content
{
display
:
flex
;
width
:
100%
;
align-items
:
center
;
padding
:
0
;
.progress-circle
{
width
:
120px
;
height
:
120px
;
position
:
relative
;
margin-right
:
20px
;
.circle-wrapper
{
width
:
100%
;
height
:
100%
;
border-radius
:
50%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
&
:
:
after
{
content
:
''
;
position
:
absolute
;
top
:
12px
;
left
:
12px
;
right
:
12px
;
bottom
:
12px
;
background
:
#fff
;
border-radius
:
50%
;
transition
:
all
0
.3s
ease
;
}
}
.circle-text
{
position
:
relative
;
z-index
:
1
;
text-align
:
center
;
// .percentage {
// display: block;
// font-size: 24px;
// font-weight: bold;
// color: #52C41A;
// margin-bottom: 4px;
// }
.submit-info
{
.label
{
display
:
block
;
font-size
:
14px
;
color
:
#333
;
font-weight
:
500
;
margin-bottom
:
4px
;
}
.count-row
{
display
:
flex
;
flex-direction
:
row
;
gap
:
2px
;
font-size
:
12px
;
justify-self
:
center
;
.submitted
{
display
:
block
;
font-size
:
20px
;
font-weight
:
bold
;
color
:
#52C41A
;
margin-bottom
:
4px
;
}
.should-submitted
{
font-size
:
18px
;
color
:
#333232
;
}
}
}
}
}
.statistics
{
flex
:
1
;
.stat-row
{
display
:
flex
;
gap
:
12px
;
margin-bottom
:
15px
;
.stat-item
{
flex
:
1
;
.stat-block
{
background-color
:
#f6ffed
;
border-radius
:
4px
;
padding
:
8px
12px
;
display
:
block
;
text-align
:
center
;
&
.light-green
{
background-color
:
rgba
(
82
,
196
,
26
,
0
.1
);
}
&
.light-orange
{
background-color
:
rgba
(
255
,
169
,
64
,
0
.1
);
}
&
.green
{
background-color
:
rgba
(
0
,
200
,
180
,
0
.1
);
}
&
.orange
{
background-color
:
rgba
(
255
,
148
,
64
,
0
.1
);
}
}
.number
{
display
:
block
;
font-size
:
20px
;
font-weight
:
bold
;
color
:
#333
;
margin-bottom
:
4px
;
}
.rate
{
display
:
block
;
font-size
:
14px
;
color
:
#999
;
}
}
}
}
}
}
.finance-info
{
display
:
flex
;
flex-direction
:
column
;
gap
:
15px
;
margin-bottom
:
15px
;
.finance-block
{
width
:
100%
;
}
.finance-item
{
background-color
:
#fff
;
padding
:
15px
;
border-radius
:
8px
;
display
:
flex
;
align-items
:
flex-start
;
.left-section
{
width
:
60px
;
margin-right
:
20px
;
height
:
100%
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
padding
:
10px
0
;
.icon
{
width
:
60px
;
height
:
60px
;
border-radius
:
12px
;
font-size
:
28px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
color
:
#fff
;
}
}
.right-section
{
flex
:
1
;
.main-info
{
display
:
flex
;
justify-content
:
space-between
;
align-items
:
flex-start
;
margin-bottom
:
15px
;
.amount-section
{
display
:
flex
;
flex-direction
:
column
;
.amount
{
font-size
:
24px
;
font-weight
:
bold
;
margin-bottom
:
4px
;
line-height
:
1
.2
;
}
.label
{
font-size
:
14px
;
}
}
.extra-info
{
display
:
flex
;
flex-direction
:
column
;
text-align
:
right
;
.info-row
{
margin-bottom
:
4px
;
&
:last-child
{
margin-bottom
:
0
;
}
.label
{
font-size
:
13px
;
color
:
#666
;
margin-right
:
8px
;
}
.value
{
font-size
:
13px
;
}
}
}
}
.progress-bar
{
display
:
flex
;
position
:
relative
;
height
:
4px
;
background
:
#f0f0f0
;
border-radius
:
2px
;
overflow
:
hidden
;
.progress
{
position
:
absolute
;
top
:
0
;
bottom
:
0
;
height
:
100%
!
important
;
border-radius
:
2px
;
transition
:
width
0
.3s
ease
;
&
.cash
{
background-color
:
#FFA940
;
}
&
.monthly
{
background-color
:
#13C2C2
;
}
}
}
}
&
.receivable
{
.left-section
.icon
{
background-color
:
#52C41A
;
}
.right-section
{
.amount-section
{
.amount
,
.label
{
color
:
#52C41A
;
}
}
.extra-info
.info-row
.value
{
color
:
#52C41A
;
}
.progress-bar
.progress
{
background-color
:
#52C41A
;
}
}
}
&
.payable
{
.left-section
.icon
{
background-color
:
#FF4D4F
;
}
.right-section
{
.amount-section
{
.amount
,
.label
{
color
:
#FF4D4F
;
}
}
.extra-info
{
.info-row
{
.value
{
&
.cash
{
color
:
#FFA940
;
}
&
.monthly
{
color
:
#13C2C2
;
}
}
}
}
.progress-bar
{
position
:
relative
;
.progress
{
&
.cash
,
&
.monthly
{
position
:
absolute
;
height
:
100%
;
}
}
}
}
}
}
}
.chart-container
{
display
:
block
;
background-color
:
#fff
;
border-radius
:
8px
;
margin-bottom
:
15px
;
padding-bottom
:
15px
;
.chart-header
{
padding
:
15px
15px
0px
15px
;
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
margin-bottom
:
15px
;
.chart-title
{
font-size
:
16px
;
font-weight
:
bold
;
color
:
#333
;
}
.sort-buttons
{
display
:
flex
;
gap
:
1px
;
.sort-btn
{
font-size
:
12px
;
color
:
#666
;
padding
:
4px
10px
;
border-radius
:
12px
;
background
:
#F5F5F5
;
border
:
1px
solid
#E8E8E8
;
cursor
:
pointer
;
transition
:
all
0
.3s
ease
;
display
:
flex
;
align-items
:
center
;
margin-left
:
8px
;
.sort-icon
{
font-family
:
"custom-icon"
!
important
;
font-size
:
12px
;
font-style
:
normal
;
-webkit-font-smoothing
:
antialiased
;
}
&
:hover
{
color
:
#52C41A
;
border-color
:
#52C41A
;
background
:
#F6FFED
;
}
&
.active
{
color
:
#fff
;
background
:
#52C41A
;
border-color
:
#52C41A
;
box-shadow
:
0
2px
4px
rgba
(
82
,
196
,
26
,
0
.2
);
}
}
}
}
.chart-scroll
{
width
:
100%
;
overflow-x
:
auto
;
// -webkit-overflow-scrolling: touch;
// &::-webkit-scrollbar {
// height: 6px;
// background: #f5f5f5;
// }
// &::-webkit-scrollbar-thumb {
// background: rgba(0, 0, 0, 0.1);
// border-radius: 3px;
// }
.chart-wrapper
{
height
:
220px
;
width
:
100%
;
padding
:
0
0
5px
0
;
min-width
:
100%
;
}
}
}
.table-container
{
display
:
block
;
background-color
:
#fff
;
border-radius
:
8px
;
overflow-x
:
hidden
;
.table-title
{
display
:
block
;
font-size
:
16px
;
font-weight
:
bold
;
color
:
#333
;
padding
:
15px
15px
5px
15px
;
}
.table-scroll
{
display
:
block
;
width
:
100%
;
height
:
180px
;
overflow-x
:
auto
;
overflow-y
:
auto
;
-webkit-overflow-scrolling
:
touch
;
/
deep
/
.uni-table
{
min-width
:
100%
;
width
:
max-content
;
border
:
1px
solid
#e8e8e8
;
&
:
:
before
,
&::
after
{
display
:
none
!
important
;
}
.uni-table-tr
{
white-space
:
nowrap
;
.uni-table-th
{
padding
:
10px
8px
!
important
;
}
.uni-table-td
{
padding
:
6px
4px
!
important
;
}
.uni-table-th
,
.uni-table-td
{
text-align
:
center
!
important
;
font-size
:
14px
;
color
:
#666
;
border-bottom
:
1px
solid
#e8e8e8
;
border-right
:
1px
solid
#e8e8e8
;
min-width
:
60px
;
}
&
:first-child
{
border-top
:
1px
solid
#e8e8e8
;
background-color
:
#fafafa
;
.uni-table-th
{
border-top
:
none
;
}
}
.uni-table-th
:last-child
,
.uni-table-td
:last-child
{
border-right
:
none
;
}
&
:last-child
{
.uni-table-td
{
border-bottom
:
none
;
}
}
}
}
}
}
}
@font-face
{
font-family
:
"custom-icon"
;
src
:
url('/static/fonts/icomoon.ttf')
format
(
'truetype'
);
}
.
sort-icon
:
:
before
{
content
:
'\ea4d'
;
font-family
:
"custom-icon"
!
important
;
font-size
:
12px
;
font-style
:
normal
;
-webkit-font-smoothing
:
antialiased
;
}
// 添加基础修复
uni-table
{
width
:
100%
!
important
;
&
:
:
before
,
&::
after
{
display
:
none
!
important
;
// 去除默认线条
}
}
// 解决iOS滚动条问题
.chart-scroll
{
-webkit-overflow-scrolling
:
touch
;
}
.common-block
{
display
:
block
;
}
.flex-center
{
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
}
// 应用示例:
.progress-circle
.circle-wrapper
{
@extend
.flex-center
;
}
.payable
{
.progress-bar
{
.progress
{
height
:
100%
;
transition
:
all
0
.3s
ease
;
&
.cash
{
left
:
0
;
z-index
:
1
;
}
&
.monthly
{
z-index
:
2
;
opacity
:
0
.8
;
}
}
}
}
.table-container
{
.table-scroll
{
::v-deep
{
.uni-table-th
,
.uni-table-td
{
padding
:
12px
8px
!
important
;
text-align
:
center
!
important
;
font-size
:
14px
!
important
;
color
:
#666
!
important
;
}
}
}
}
</
style
>
components/orderEventList/orderEventList.vue
0 → 100644
View file @
b6d9ce25
<
template
>
<view
class=
"abnormal-report"
>
<!-- 状态统计卡片 -->
<view
class=
"report-stats"
>
<view
class=
"stat-item"
@
click=
"selectReport('new')"
>
<text
class=
"number"
style=
"color: #faad14;"
>
{{
searchDatas
.
new
}}
</text>
<text
class=
"label"
>
未审批
</text>
<text
class=
"number2"
style=
"color: #faad14;"
>
¥
{{
searchDatas
.
newAmount
}}
</text>
</view>
<view
class=
"stat-item"
@
click=
"selectReport('approving')"
>
<text
class=
"number"
style=
"color: #1890ff;"
>
{{
searchDatas
.
approving
}}
</text>
<text
class=
"label"
>
审批中
</text>
<text
class=
"number2"
style=
"color: #1890ff;"
>
¥
{{
searchDatas
.
approvingAmount
}}
</text>
</view>
<view
class=
"stat-item"
@
click=
"selectReport('approved')"
>
<text
class=
"number"
style=
"color:#52c41a;"
>
{{
searchDatas
.
approved
}}
</text>
<text
class=
"label"
>
审批完成
</text>
<text
class=
"number2"
style=
"color:#52c41a;"
>
¥
{{
searchDatas
.
approvedAmount
}}
</text>
</view>
<view
class=
"stat-item"
@
click=
"selectReport('total')"
>
<text
class=
"number"
style=
"color:#ff4d4f;"
>
{{
searchDatas
.
total
}}
</text>
<text
class=
"label"
>
总计
</text>
<text
class=
"number2"
style=
"color:#ff4d4f;"
>
¥
{{
searchDatas
.
totalAmount
}}
</text>
</view>
</view>
<!-- 异常订单列表 -->
<scroll-view
class=
"order-list"
scroll-y
>
<view
class=
"order-card"
v-for=
"(order, index) in orderList"
:key=
"index"
@
click=
"goToDetail(order.id)"
>
<view
class=
"card-header"
>
<view
class=
"left"
>
<text
class=
"order-id"
>
{{
order
.
orderEventNo
}}
</text>
<text
class=
"status"
:class=
"getStatusClass(order.approvalStatus)"
>
{{
order
.
approvalStatus
}}
</text>
</view>
<view
class=
"right"
>
<text
class=
"time"
>
{{
order
.
eventTime
}}
</text>
</view>
</view>
<view
class=
"card-content"
>
<view
class=
"info-row"
>
<text
class=
"label"
>
客户:
</text>
<text
class=
"value"
>
{{
order
.
customerName
}}
</text>
</view>
<view
class=
"info-row"
>
<text
class=
"label"
>
二级异常:
</text>
<text
class=
"value"
>
{{
order
.
childrenException
}}
</text>
</view>
<view
class=
"info-row"
>
<text
class=
"label"
>
涉及金额:
</text>
<text
class=
"value amount"
>
¥
{{
order
.
involvingAmount
}}
</text>
</view>
<view
class=
"info-row"
>
<text
class=
"label"
>
处理状态:
</text>
<text
class=
"value"
:class=
"getProcessClass(order.orderEventStatus)"
>
{{
order
.
orderEventStatus
}}
</text>
</view>
</view>
</view>
</scroll-view>
</view>
</
template
>
<
script
>
import
{
searchOrderEvent
}
from
'../../api/apiList'
export
default
{
data
()
{
return
{
staffCode
:
""
,
staffKind
:
""
,
activeStatus
:
"total"
,
searchDatas
:
{},
orderList
:
[]
}
},
mounted
()
{
this
.
initData
()
},
methods
:
{
selectReport
(
active
)
{
this
.
activeStatus
=
active
this
.
orderList
=
[]
this
.
initData
()
},
initData
()
{
this
.
staffCode
=
uni
.
getStorageSync
(
'staffCode'
);
this
.
staffKind
=
uni
.
getStorageSync
(
'uc_staff_kind'
);
if
(
!
this
.
staffCode
||
!
this
.
staffKind
)
{
uni
.
showToast
({
title
:
'获取用户信息失败'
,
icon
:
'none'
});
return
;
}
const
data
=
{
aux
:
{
staffCode
:
this
.
staffCode
,
staffKind
:
this
.
staffKind
,
activeStatus
:
this
.
activeStatus
}
}
searchOrderEvent
(
data
).
then
(
res
=>
{
const
data
=
res
.
data
.
data
;
this
.
searchDatas
=
data
;
this
.
orderList
=
data
.
orderList
})
},
getStatusClass
(
status
)
{
const
classMap
=
{
'未审批'
:
'status-pending'
,
'审批中'
:
'status-processing'
,
'审批完成'
:
'status-completed'
}
return
classMap
[
status
]
||
''
},
getProcessClass
(
status
)
{
const
classMap
=
{
'待处理'
:
'process-pending'
,
'处理中'
:
'process-ongoing'
,
'已处理'
:
'process-completed'
}
return
classMap
[
status
]
||
''
},
goToDetail
(
id
)
{
// 跳转到详情页面
uni
.
navigateTo
({
url
:
`/pages/abnormal/detail/index?id=
${
id
}
`
})
}
}
}
</
script
>
<
style
lang=
"scss"
>
.abnormal-report
{
padding
:
0
12px
;
background
:
#f5f7fa
;
// min-height: 100vh;
.report-stats
{
display
:
flex
;
justify-content
:
space-around
;
background
:
#fff
;
padding
:
20px
15px
;
border-radius
:
8px
;
margin-bottom
:
8px
;
box-shadow
:
0
2px
12px
rgba
(
0
,
0
,
0
,
0
.05
);
.stat-item
{
text-align
:
center
;
// padding: 15px 24px;
background
:
#f9f9f9
;
// border-radius: 6px;
width
:
25%
;
transition
:
background
0
.3s
,
transform
0
.3s
;
/* 添加过渡效果 */
&
:hover
{
background
:
#e6f7ff
;
/* 鼠标悬停时的背景色 */
transform
:
scale
(
1
.05
);
/* 鼠标悬停时的放大效果 */
}
.number
{
display
:
block
;
font-size
:
28px
;
font-weight
:
bold
;
color
:
#333
;
margin-bottom
:
8px
;
}
.number2
{
display
:
block
;
font-size
:
10px
;
// font-weight: bold;
color
:
#333
;
margin-bottom
:
8px
;
}
.label
{
font-size
:
14px
;
color
:
#999
;
}
}
}
.order-list
{
height
:
calc
(
100vh
-
120px
);
.order-card
{
background
:
#fff
;
border-radius
:
8px
;
padding
:
15px
;
margin-bottom
:
15px
;
box-shadow
:
0
2px
12px
rgba
(
0
,
0
,
0
,
0
.05
);
transition
:
all
0
.3s
ease
;
&
:hover
{
transform
:
translateY
(
-2px
);
box-shadow
:
0
4px
16px
rgba
(
0
,
0
,
0
,
0
.08
);
}
.card-header
{
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
margin-bottom
:
12px
;
.left
{
display
:
flex
;
align-items
:
center
;
gap
:
10px
;
.order-id
{
font-size
:
16px
;
font-weight
:
bold
;
color
:
#333
;
}
.status
{
padding
:
4px
12px
;
border-radius
:
10px
;
font-size
:
12px
;
&
.status-pending
{
background
:
rgba
(
250
,
173
,
20
,
0
.1
);
color
:
#faad14
;
border
:
1px
solid
rgba
(
250
,
173
,
20
,
0
.2
);
}
&
.status-processing
{
background
:
rgba
(
24
,
144
,
255
,
0
.1
);
color
:
#1890ff
;
border
:
1px
solid
rgba
(
24
,
144
,
255
,
0
.2
);
}
&
.status-completed
{
background
:
rgba
(
82
,
196
,
26
,
0
.1
);
color
:
#52c41a
;
border
:
1px
solid
rgba
(
82
,
196
,
26
,
0
.2
);
}
}
}
.time
{
font-size
:
14px
;
color
:
#999
;
float
:
right
;
}
}
.card-content
{
.info-row
{
display
:
flex
;
margin-bottom
:
8px
;
align-items
:
center
;
&
:last-child
{
margin-bottom
:
0
;
}
.label
{
width
:
80px
;
font-size
:
14px
;
color
:
#666
;
}
.value
{
flex
:
1
;
font-size
:
14px
;
color
:
#333
;
&
.amount
{
color
:
#ff4d4f
;
font-weight
:
500
;
}
&
.process-pending
{
color
:
#faad14
;
}
&
.process-ongoing
{
color
:
#1890ff
;
}
&
.process-completed
{
color
:
#52c41a
;
}
}
}
}
}
}
}
.right
{
float
:
right
;
}
</
style
>
\ No newline at end of file
components/orderQueryContent/orderQueryContent.vue
View file @
b6d9ce25
...
@@ -102,7 +102,7 @@ export default {
...
@@ -102,7 +102,7 @@ export default {
mounted
()
{
mounted
()
{
this
.
orderQuery
()
this
.
orderQuery
()
this
.
getOptionEnumInit
()
//
this.getOptionEnumInit()
},
},
methods
:
{
methods
:
{
...
@@ -189,7 +189,7 @@ export default {
...
@@ -189,7 +189,7 @@ export default {
OrderQuery
({
OrderQuery
({
"args"
:
{
"args"
:
{
pageNum
:
1
,
pageNum
:
1
,
pageSize
:
10
000
,
pageSize
:
10
,
restrictions
restrictions
}
}
}).
then
(
res
=>
{
}).
then
(
res
=>
{
...
...
pages/abnormal/list/index.vue
View file @
b6d9ce25
...
@@ -36,7 +36,9 @@
...
@@ -36,7 +36,9 @@
{{
order
.
approvalStatus
}}
{{
order
.
approvalStatus
}}
</text>
</text>
</view>
</view>
<view
class=
"right"
>
<text
class=
"time"
>
{{
order
.
eventTime
}}
</text>
<text
class=
"time"
>
{{
order
.
eventTime
}}
</text>
</view>
</view>
</view>
<view
class=
"card-content"
>
<view
class=
"card-content"
>
...
@@ -158,7 +160,7 @@
...
@@ -158,7 +160,7 @@
text-align
:
center
;
text-align
:
center
;
// padding: 15px 24px;
// padding: 15px 24px;
background
:
#f9f9f9
;
background
:
#f9f9f9
;
border-radius
:
6px
;
//
border-radius: 6px;
width
:
25%
;
width
:
25%
;
transition
:
background
0
.3s
,
transform
0
.3s
;
transition
:
background
0
.3s
,
transform
0
.3s
;
/* 添加过渡效果 */
/* 添加过渡效果 */
...
@@ -180,7 +182,7 @@
...
@@ -180,7 +182,7 @@
.number2
{
.number2
{
display
:
block
;
display
:
block
;
font-size
:
28
px
;
font-size
:
10
px
;
// font-weight: bold;
// font-weight: bold;
color
:
#333
;
color
:
#333
;
margin-bottom
:
8px
;
margin-bottom
:
8px
;
...
@@ -301,4 +303,8 @@
...
@@ -301,4 +303,8 @@
}
}
}
}
}
}
.right
{
float
:
right
;
}
</
style
>
</
style
>
\ No newline at end of file
pages/index/index.vue
View file @
b6d9ce25
...
@@ -72,7 +72,7 @@
...
@@ -72,7 +72,7 @@
updateTopUserList
()
{
updateTopUserList
()
{
if
(
this
.
uc_staff_kind
===
'boss'
)
{
if
(
this
.
uc_staff_kind
===
'boss'
)
{
this
.
topUserList
=
[{
this
.
topUserList
=
[
{
name
:
'老板看板'
,
name
:
'老板看板'
,
key
:
'bossCard'
,
key
:
'bossCard'
,
url
:
'/pages/index/index'
url
:
'/pages/index/index'
...
...
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