index.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. <template>
  2. <view class="content flex flex_column">
  3. <div class="p-header" @click="openShlef">
  4. <text>{{curShelfName||'全部客户'}}</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. 60
  17. </div>
  18. <div class="data-label">销售产品数量(个)</div>
  19. </div>
  20. <div>
  21. <div class="data-amount">
  22. <u-count-to :end-val="1235.65" 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">
  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. 60
  42. </div>
  43. <div class="data-label">取货产品数量(个)</div>
  44. </div>
  45. <div>
  46. <div class="data-amount">
  47. <u-count-to :end-val="1235.65" 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="chartData"
  55. />
  56. </div>
  57. </div>
  58. <div class="card-box">
  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. 60
  67. </div>
  68. <div class="data-label">急送产品数量(个)</div>
  69. </div>
  70. <div>
  71. <div class="data-amount">
  72. <u-count-to :end-val="1235.65" 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="chartData"
  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. export default {
  109. components: { chooseShelf },
  110. data() {
  111. return {
  112. shelfSn: '',
  113. curShelfName: '',
  114. chartData: {},
  115. showSearch: false,
  116. showDate: false,
  117. dateArray: '',
  118. customBtnStyle: { // 自定义按钮样式
  119. borderColor: this.$config('primaryColor'),
  120. backgroundColor: this.$config('primaryColor'),
  121. color: '#fff'
  122. },
  123. queryPramas:{
  124. beginDate: '',
  125. endDate: ''
  126. },
  127. placeTab: [
  128. {
  129. name:'今日',
  130. val: '0'
  131. },
  132. {
  133. name:'昨日',
  134. val: '1'
  135. },
  136. {
  137. name:'本周',
  138. val: '2'
  139. },
  140. {
  141. name:'上周',
  142. val: '3'
  143. },
  144. {
  145. name:'本月',
  146. val: '4'
  147. },
  148. {
  149. name:'上月',
  150. val: '5'
  151. },
  152. {
  153. name:'自定义',
  154. val: '6'
  155. }
  156. ],
  157. curTab: '',
  158. webView: null
  159. }
  160. },
  161. onLoad() {
  162. uni.$on('chooseShelfOk',(data)=>{
  163. this.shelfSn = data.shelfSn
  164. this.curShelfName = data.shelfName
  165. })
  166. this.getServerData()
  167. this.webView = this.$mp.page.$getAppWebview();
  168. // 默认数据
  169. this.tabChange(this.placeTab[2])
  170. },
  171. onUnload() {
  172. uni.$off("chooseShelfOk")
  173. },
  174. onNavigationBarButtonTap() {
  175. this.showSearch = true
  176. },
  177. onBackPress() {
  178. if(this.showSearch){
  179. this.showSearch = false
  180. return true
  181. }
  182. },
  183. methods: {
  184. // 时间 change
  185. dateChange(date){
  186. this.dateArray = date.startDate + ' ~ ' + date.endDate
  187. this.queryPramas.beginDate = date.startDate
  188. this.queryPramas.endDate = date.endDate
  189. this.webView.setTitleNViewButtonStyle(0, {
  190. "text":"\ue626 "+date.startDate+"~"+date.endDate,
  191. "color": "#00aaff",
  192. "width": "180px"
  193. });
  194. },
  195. tabChange(data){
  196. this.curTab = data.val
  197. if(data.val != 6){
  198. this.webView.setTitleNViewButtonStyle(0, {
  199. "text":"\ue626 "+data.name,
  200. "color": "#00aaff",
  201. "width": "80px"
  202. });
  203. }else{
  204. this.dateArray = ''
  205. this.queryPramas.beginDate = ''
  206. this.queryPramas.endDate = ''
  207. }
  208. },
  209. handleClean(){
  210. this.tabChange(this.placeTab[2])
  211. this.showSearch = false
  212. },
  213. handleSearch(){
  214. if(this.curTab == 6){
  215. if(this.queryPramas.beginDate&&this.queryPramas.endDate){
  216. this.getServerData()
  217. this.showSearch = false
  218. }else{
  219. uni.showToast({
  220. icon:'none',
  221. title: "请选择时间段"
  222. })
  223. }
  224. }else{
  225. this.getServerData()
  226. this.showSearch = false
  227. }
  228. },
  229. getServerData() {
  230. //模拟从服务器获取数据时的延时
  231. setTimeout(() => {
  232. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  233. let res = {
  234. categories: ["8-7","8-6","8-9","8-10","8-11","8-12"],
  235. series: [
  236. {
  237. name: "销售金额",
  238. data: [35,8,25,37,4,20],
  239. label:{
  240. position: 'top'
  241. }
  242. },
  243. ]
  244. };
  245. this.chartData = JSON.parse(JSON.stringify(res));
  246. }, 500);
  247. },
  248. openShlef(){
  249. uni.navigateTo({
  250. url: "/pages/statistics/chooseShelf?shelfSn="+this.shelfSn
  251. })
  252. }
  253. }
  254. }
  255. </script>
  256. <style lang="less">
  257. .content{
  258. height: 100vh;
  259. width: 100%;
  260. .p-header{
  261. background-color: #fff;
  262. text-align: center;
  263. padding-bottom: 20rpx;
  264. }
  265. .e-chart{
  266. flex-grow: 1;
  267. padding: 20rpx;
  268. font-size: 28rpx;
  269. overflow: auto;
  270. .card-box{
  271. background-color: #fff;
  272. margin-bottom: 20rpx;
  273. border-radius: 16rpx;
  274. overflow: hidden;
  275. > div{
  276. padding: 20rpx;
  277. &:first-child{
  278. padding-bottom: 0;
  279. }
  280. }
  281. .card-tits{
  282. font-weight: bold;
  283. }
  284. .data-box{
  285. padding-bottom: 20rpx;
  286. > div{
  287. width: 50%;
  288. text-align: center;
  289. border-right: 1rpx solid #eee;
  290. &:last-child{
  291. border:0;
  292. }
  293. .data-amount{
  294. font-size: 50rpx;
  295. }
  296. .data-label{
  297. color: #999;
  298. font-size: 24rpx;
  299. }
  300. }
  301. }
  302. }
  303. }
  304. // 筛选
  305. .tabBox{
  306. height: 100vh;
  307. .tabs{
  308. flex-grow: 1;
  309. overflow: auto;
  310. padding: 20rpx;
  311. > view{
  312. flex-wrap: wrap;
  313. justify-content: space-between;
  314. > view{
  315. width: 45%;
  316. border: 1rpx solid #eee;
  317. padding: 15rpx;
  318. border-radius: 50rpx;
  319. text-align: center;
  320. margin-bottom: 15rpx;
  321. }
  322. .active{
  323. border:0;
  324. background-color: #0485F6;
  325. color: #fff;
  326. }
  327. }
  328. }
  329. .form-item-inp{
  330. border-bottom: 1rpx solid #eee;
  331. }
  332. .form-footer-btn{
  333. margin: 30upx;
  334. display: flex;
  335. justify-content: space-between;
  336. }
  337. .form-footer-btn {
  338. display: flex;
  339. .handle-btn {
  340. font-size: 28upx;
  341. margin: 0 10upx;
  342. flex: 1;
  343. }
  344. }
  345. }
  346. }
  347. </style>