index.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. <template>
  2. <view class="content flex flex_column">
  3. <div class="p-header" @click="openShlef">
  4. <text>{{curCustomerName||'全部客户'}}</text>
  5. <u-icon name="arrow-right"></u-icon>
  6. </div>
  7. <div class="e-chart">
  8. <div class="card-box">
  9. <div class="card-tits">
  10. 销售单
  11. </div>
  12. <div class="card-body">
  13. <div class="data-box flex">
  14. <div>
  15. <div class="data-amount">
  16. {{allData&&allData.salesTotalQty||0}}
  17. </div>
  18. <div class="data-label">销售产品数量(个)</div>
  19. </div>
  20. <div>
  21. <div class="data-amount">
  22. <u-count-to :end-val="allData&&allData.salesTotalAmount||0" separator="," :decimals="2"></u-count-to>
  23. </div>
  24. <div class="data-label">销售金额(元)</div>
  25. </div>
  26. </div>
  27. <qiun-data-charts
  28. type="line"
  29. :chartData="chartData"
  30. />
  31. </div>
  32. </div>
  33. <div class="card-box" v-if="allData&&allData.xprhFlag">
  34. <div class="card-tits">
  35. 货架订单
  36. </div>
  37. <div class="card-body">
  38. <div class="data-box flex">
  39. <div>
  40. <div class="data-amount">
  41. {{allData&&allData.orderTotalQty||0}}
  42. </div>
  43. <div class="data-label">取货产品数量(个)</div>
  44. </div>
  45. <div>
  46. <div class="data-amount">
  47. <u-count-to :end-val="allData&&allData.orderTotalAmount||0" separator="," :decimals="2"></u-count-to>
  48. </div>
  49. <div class="data-label">取货产品金额(元)</div>
  50. </div>
  51. </div>
  52. <qiun-data-charts
  53. type="line"
  54. :chartData="chartData1"
  55. />
  56. </div>
  57. </div>
  58. <div class="card-box" v-if="allData&&allData.xprhFlag">
  59. <div class="card-tits">
  60. 急送订单
  61. </div>
  62. <div class="card-body">
  63. <div class="data-box flex">
  64. <div>
  65. <div class="data-amount">
  66. {{allData&&allData.tempTotalQty||0}}
  67. </div>
  68. <div class="data-label">急送产品数量(个)</div>
  69. </div>
  70. <div>
  71. <div class="data-amount">
  72. <u-count-to :end-val="allData&&allData.tempTotalAmount||0" separator="," :decimals="2"></u-count-to>
  73. </div>
  74. <div class="data-label">急送产品金额(元)</div>
  75. </div>
  76. </div>
  77. <qiun-data-charts
  78. type="line"
  79. :chartData="chartData2"
  80. />
  81. </div>
  82. </div>
  83. </div>
  84. <!-- 筛选项 -->
  85. <u-popup v-model="showSearch" mode="right" width="70%">
  86. <view class="tabBox">
  87. <view class="tabs">
  88. <view class="flex">
  89. <view :class="item.val==curTab?'active':'all'" v-for="item in placeTab" :key="item.val" @click="tabChange(item)">{{item.name}}</view>
  90. </view>
  91. </view>
  92. <view class="flex align_center form-item-inp" style="padding: 0 30rpx;" v-if="curTab == 6">
  93. <u-input clearable v-model="dateArray" disabled placeholder="请选择时间段" @click="showDate=true" />
  94. <u-icon name="arrow-down" color="#999"></u-icon>
  95. </view>
  96. <view class="form-footer-btn">
  97. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClean">重置</u-button>
  98. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
  99. </view>
  100. </view>
  101. </u-popup>
  102. <!-- 选择日期范围 -->
  103. <u-calendar v-model="showDate" @change="dateChange" mode="range"></u-calendar>
  104. </view>
  105. </template>
  106. <script>
  107. import chooseShelf from './chooseShelf.vue'
  108. import { salesStatistics } from '@/api/sales.js'
  109. import getDate from '@/libs/getDate.js'
  110. export default {
  111. components: { chooseShelf },
  112. data() {
  113. return {
  114. customerSn: '',
  115. curCustomerName: '',
  116. chartData: {},
  117. chartData1: {},
  118. chartData2: {},
  119. allData: null,
  120. showSearch: false,
  121. showDate: false,
  122. dateArray: '',
  123. customBtnStyle: { // 自定义按钮样式
  124. borderColor: this.$config('primaryColor'),
  125. backgroundColor: this.$config('primaryColor'),
  126. color: '#fff'
  127. },
  128. queryPramas:{
  129. beginDate: '',
  130. endDate: '',
  131. buyerSn: ''
  132. },
  133. placeTab: [
  134. {
  135. name:'今日',
  136. val: '0'
  137. },
  138. {
  139. name:'昨日',
  140. val: '1'
  141. },
  142. {
  143. name:'本周',
  144. val: '2'
  145. },
  146. {
  147. name:'上周',
  148. val: '3'
  149. },
  150. {
  151. name:'本月',
  152. val: '4'
  153. },
  154. {
  155. name:'上月',
  156. val: '5'
  157. },
  158. {
  159. name:'自定义',
  160. val: '6'
  161. }
  162. ],
  163. curTab: '4',
  164. webView: null
  165. }
  166. },
  167. onLoad() {
  168. uni.$on('chooseShelfOk',(data)=>{
  169. this.customerSn = data.customerSn
  170. this.curCustomerName = data.customerName
  171. this.queryPramas.buyerSn = data.customerSn
  172. })
  173. this.webView = this.$mp.page.$getAppWebview();
  174. // 默认数据
  175. this.tabChange(this.placeTab[2])
  176. },
  177. onShow() {
  178. this.getServerData()
  179. },
  180. onUnload() {
  181. uni.$off("chooseShelfOk")
  182. },
  183. onNavigationBarButtonTap() {
  184. this.showSearch = true
  185. },
  186. onBackPress() {
  187. if(this.showSearch){
  188. this.showSearch = false
  189. return true
  190. }
  191. },
  192. methods: {
  193. // 时间 change
  194. dateChange(date){
  195. this.dateArray = date.startDate + ' ~ ' + date.endDate
  196. this.queryPramas.beginDate = date.startDate + ' 00:00:00'
  197. this.queryPramas.endDate = date.endDate + ' 23:59:59'
  198. this.webView.setTitleNViewButtonStyle(0, {
  199. "text":"\ue626 "+date.startDate+"~"+date.endDate,
  200. "color": "#00aaff",
  201. "width": "180px"
  202. });
  203. },
  204. tabChange(data){
  205. this.curTab = data.val
  206. if(data.val != 6){
  207. this.webView.setTitleNViewButtonStyle(0, {
  208. "text":"\ue626 "+data.name,
  209. "color": "#00aaff",
  210. "width": "80px"
  211. });
  212. }else{
  213. this.dateArray = ''
  214. this.queryPramas.beginDate = ''
  215. this.queryPramas.endDate = ''
  216. }
  217. },
  218. handleClean(){
  219. this.tabChange(this.placeTab[2])
  220. this.showSearch = false
  221. },
  222. // 查询
  223. handleSearch(){
  224. if(this.curTab == 6){
  225. if(this.queryPramas.beginDate&&this.queryPramas.endDate){
  226. this.getServerData()
  227. this.showSearch = false
  228. }else{
  229. uni.showToast({
  230. icon:'none',
  231. title: "请选择时间段"
  232. })
  233. }
  234. }else{
  235. this.getServerData()
  236. this.showSearch = false
  237. }
  238. },
  239. // 格式化折线图数据
  240. getFormatData(categories,data,name){
  241. if(data){
  242. data.map(item => Number(item))
  243. }
  244. return {
  245. categories: categories,
  246. series: [
  247. {
  248. name: name,
  249. data: data||[],
  250. label:{
  251. position: 'top'
  252. }
  253. },
  254. ]
  255. }
  256. },
  257. getQueryDate(){
  258. const fun = [
  259. getDate.getToday,
  260. getDate.getYesterday,
  261. getDate.getCurrWeekDays,
  262. getDate.getLastWeekDays,
  263. getDate.getCurrLastMonthDays,
  264. getDate.getCurrMonthDays
  265. ];
  266. return {
  267. beginDate: fun[this.curTab]().starttime,
  268. endDate: fun[this.curTab]().endtime
  269. }
  270. },
  271. getServerData() {
  272. let params = {}
  273. // 不是自定义时间段
  274. if(this.curTab != 6){
  275. params = this.getQueryDate()
  276. }
  277. salesStatistics(Object.assign(this.queryPramas,params)).then(res => {
  278. if(res.status == 200){
  279. this.allData = res.data
  280. this.chartData = this.getFormatData(res.data.salesDateList,res.data.salesAmountList,"销售金额")
  281. this.chartData1 = this.getFormatData(res.data.orderDateList,res.data.orderAmountList,"取货产品金额")
  282. this.chartData2 = this.getFormatData(res.data.tempDateList,res.data.tempAmountList,"急送产品金额")
  283. }
  284. })
  285. },
  286. openShlef(){
  287. uni.navigateTo({
  288. url: "/pages/statistics/chooseShelf?customerSn="+this.customerSn
  289. })
  290. }
  291. }
  292. }
  293. </script>
  294. <style lang="less">
  295. .content{
  296. height: 100vh;
  297. width: 100%;
  298. .p-header{
  299. background-color: #fff;
  300. text-align: center;
  301. padding-bottom: 20rpx;
  302. }
  303. .e-chart{
  304. flex-grow: 1;
  305. padding: 20rpx;
  306. font-size: 28rpx;
  307. overflow: auto;
  308. .card-box{
  309. background-color: #fff;
  310. margin-bottom: 20rpx;
  311. border-radius: 16rpx;
  312. overflow: hidden;
  313. > div{
  314. padding: 20rpx;
  315. &:first-child{
  316. padding-bottom: 0;
  317. }
  318. }
  319. .card-tits{
  320. font-weight: bold;
  321. }
  322. .data-box{
  323. padding-bottom: 20rpx;
  324. > div{
  325. width: 50%;
  326. text-align: center;
  327. border-right: 1rpx solid #eee;
  328. &:last-child{
  329. border:0;
  330. }
  331. .data-amount{
  332. font-size: 50rpx;
  333. }
  334. .data-label{
  335. color: #999;
  336. font-size: 24rpx;
  337. }
  338. }
  339. }
  340. }
  341. }
  342. // 筛选
  343. .tabBox{
  344. height: 100vh;
  345. .tabs{
  346. flex-grow: 1;
  347. overflow: auto;
  348. padding: 20rpx;
  349. > view{
  350. flex-wrap: wrap;
  351. justify-content: space-between;
  352. > view{
  353. width: 45%;
  354. border: 1rpx solid #eee;
  355. padding: 15rpx;
  356. border-radius: 50rpx;
  357. text-align: center;
  358. margin-bottom: 15rpx;
  359. }
  360. .active{
  361. border:0;
  362. background-color: #0485F6;
  363. color: #fff;
  364. }
  365. }
  366. }
  367. .form-item-inp{
  368. border-bottom: 1rpx solid #eee;
  369. }
  370. .form-footer-btn{
  371. margin: 30upx;
  372. display: flex;
  373. justify-content: space-between;
  374. }
  375. .form-footer-btn {
  376. display: flex;
  377. .handle-btn {
  378. font-size: 28upx;
  379. margin: 0 10upx;
  380. flex: 1;
  381. }
  382. }
  383. }
  384. }
  385. </style>