statisticalReport.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638
  1. <template>
  2. <div class="home">
  3. <div class="report-page">
  4. <!-- 查询条件 -->
  5. <a-row>
  6. <a-card class="search-panel">
  7. <div class="toolsBar">
  8. <a-form ref="searchForm" :model="searchForm" layout="inline">
  9. <a-form-item props="queryWord" label="统计区间">
  10. <a-range-picker
  11. style="width: 220px;"
  12. @change="dateChange"
  13. v-model.trim="searchForm.queryWord"
  14. :disabledDate="disabledDate"
  15. />
  16. </a-form-item>
  17. <a-form-item props="storeIds" label="清运网点">
  18. <a-select
  19. allowClear
  20. mode="multiple"
  21. placeholder="选择网点"
  22. v-model="searchForm.storeIdList"
  23. style="width: 200px"
  24. option-filter-prop="children"
  25. :filter-option="filterOption">
  26. <a-select-option :disabled="!isStationAll&&searchForm.storeIdList.length>0" value="all" key="all">全部</a-select-option>
  27. <a-select-option :disabled="isStationAll" v-for="item in stationList" :value="item.stationNo" :key="item.id">
  28. {{ item.name }}
  29. </a-select-option>
  30. </a-select>
  31. </a-form-item>
  32. <a-form-item>
  33. <a-button type="primary" class="search-btn" @click="handleSearch()">查询</a-button>
  34. <a-button type="" style="margin-left: 10px;" @click="handleReset()">重置</a-button>
  35. </a-form-item>
  36. <a-form-item>
  37. 快捷筛选:
  38. <span
  39. :class="['searchItem',curentType==item.type?'active':'']"
  40. v-for="(item,index) in tabList"
  41. :key="index"
  42. @click="getCurentSearchTime(item)">{{ item.name }}</span>
  43. </a-form-item>
  44. </a-form>
  45. </div>
  46. </a-card>
  47. </a-row>
  48. <!-- 清运量数据 -->
  49. <a-card class="panel" title="清运量趋势">
  50. <!-- 清运量趋势图表展示 -->
  51. <chart-line
  52. style="height: 300px;"
  53. color="#6C6FBE"
  54. ref="chartLine"
  55. :yMax="5000"
  56. yUnit="kg"
  57. :xAxisRotate="resize"
  58. :xAxisData="XdaysData"
  59. :seriesData="clearnChartData"
  60. text="" />
  61. <span v-if="isNoData" class="noData">暂无数据</span>
  62. </a-card>
  63. <!-- 各回收物类型数据 -->
  64. <a-card class="panel " title="各回收物类型清运数据">
  65. <a-row :gutter="24">
  66. <a-col :md="4" :lg="4">
  67. <a-card class="border-radius background-skyblue">
  68. <div class="module-list ">
  69. <p>废旧金属</p>
  70. <span>{{ chartData.KX }}kg</span>
  71. </div>
  72. </a-card>
  73. </a-col>
  74. <a-col :md="4" :lg="4">
  75. <a-card class="border-radius background-greenBlue">
  76. <div class="module-list ">
  77. <p>废旧塑料</p>
  78. <span>{{ chartData.JX }}kg</span>
  79. </div>
  80. </a-card>
  81. </a-col>
  82. <a-col :md="4" :lg="4">
  83. <a-card class="border-radius background-blackGreen">
  84. <div class="module-list ">
  85. <p>废旧纸张</p>
  86. <span>{{ chartData.DLX }}kg</span>
  87. </div>
  88. </a-card>
  89. </a-col>
  90. </a-row>
  91. <!-- 各回收物类型数据图表展示 -->
  92. <a-row :gutter="24">
  93. <a-col class="tab-card">
  94. <span :class="['tab-card-item',currentTabChart=='tab1'?'checked-item':'']" @click="currentTabChart='tab1'">详情数据</span>
  95. <span :class="['tab-card-item',currentTabChart=='tab2'?'checked-item':'']" @click="currentTabChart='tab2'">变化趋势</span>
  96. </a-col>
  97. <!-- 详情数据 -->
  98. <a-col span="24" v-if="currentTabChart=='tab1'">
  99. <chart-bar
  100. ref="ChartBar"
  101. style="height: 300px;"
  102. color="#6C6FBE"
  103. :xAxisRotate="resize"
  104. :yMax="1000"
  105. yUnit="kg"
  106. :xAxisData="XdaysData"
  107. :seriesData="washTypeBarData"
  108. text="" />
  109. <span v-if="isNoData" class="noData">暂无数据</span>
  110. </a-col>
  111. <!-- 变化趋势 -->
  112. <a-col span="24" v-if="currentTabChart=='tab2'">
  113. <chart-line
  114. ref="ChartLine"
  115. style="height: 300px;"
  116. color="#6C6FBE"
  117. yUnit="kg"
  118. :yMax="1000"
  119. :xAxisRotate="resize"
  120. :xAxisData="XdaysData"
  121. :seriesData="washTypeLineData"
  122. text="" />
  123. <span v-if="isNoData" class="noData">暂无数据</span>
  124. </a-col>
  125. </a-row>
  126. </a-card>
  127. <a-card class="panel chart-pie" title="各回收物类型占比">
  128. <a-row :gutter="24">
  129. <a-col span="12">
  130. <chart-pie
  131. ref="chartPie"
  132. class="chartPie-box"
  133. :searchData="XdaysData"
  134. :value="washTypePieData"
  135. title="清运总量(kg)"
  136. :total="chartData.allOrderNum"
  137. :color="washTypePieColor"
  138. :xAxisRotate="resize"
  139. text="" />
  140. </a-col>
  141. <a-col span="12">
  142. <!-- 各清运司机占比 百分比展示 -->
  143. <chart-pie
  144. ref="serverChartPie"
  145. class="chartPie-box"
  146. :searchData="XdaysData"
  147. :value="couponChartData"
  148. title="清运总量(台)"
  149. :total="chartData.allOrderNum"
  150. :color="couponColor"
  151. :xAxisRotate="resize"
  152. text="" />
  153. </a-col>
  154. </a-row>
  155. </a-card>
  156. </div>
  157. </div>
  158. </template>
  159. <script>
  160. import { ChartPie, ChartBar, ChartLine } from '@/components/Echarts'
  161. import _ from 'lodash'
  162. import getDate from '@/libs/getDate'
  163. import moment from 'moment'
  164. import { getCleanReport } from '@/api/cleanManage.js'
  165. import { stationList } from '@/api/releaseRecord.js'
  166. export default {
  167. name: 'Home',
  168. components: {
  169. ChartPie,
  170. ChartBar,
  171. ChartLine
  172. },
  173. watch: {
  174. screenWidth (val) {
  175. // 为了避免频繁触发resize函数,使用定时器
  176. if (!this.timer) {
  177. this.screenWidth = val
  178. this.timer = true
  179. const that = this
  180. setTimeout(function () {
  181. // that.screenWidth = that.$store.state.canvasWidth
  182. console.log(that.screenWidth)
  183. that.timer = false
  184. }, 400)
  185. }
  186. }
  187. },
  188. computed: {
  189. isStationAll () { // 是否选择全部网点
  190. let boolean
  191. if (this.searchForm.storeIdList.length > 0) {
  192. if (this.searchForm.storeIdList.indexOf('all') >= 0) {
  193. boolean = true
  194. } else {
  195. boolean = false
  196. }
  197. } else {
  198. boolean = false
  199. }
  200. return boolean
  201. },
  202. resize () {
  203. console.log(this.screenWidth, 'this.screenWidth')
  204. if (this.screenWidth < 1640) {
  205. return 40
  206. } else {
  207. return 0
  208. }
  209. },
  210. // 各类型占比总计数据
  211. washTypePieData () {
  212. const data = [{
  213. 'name': '快速洗车',
  214. 'value': this.chartData.KX
  215. }, {
  216. 'name': '精致洗车',
  217. 'value': this.chartData.JX
  218. }, {
  219. 'name': '打蜡精洗',
  220. 'value': this.chartData.DLX
  221. }]
  222. return data
  223. },
  224. // 洗车用券量占比数据
  225. couponChartData () {
  226. const data = [
  227. {
  228. 'name': '未用券洗车量',
  229. 'value': this.chartData.notUseCouponOrderNum
  230. },
  231. {
  232. 'name': '用券洗车量',
  233. 'value': this.chartData.useCouponOrderNum
  234. },
  235. {
  236. 'name': '用券洗车量11',
  237. 'value': this.chartData.useCouponOrderNum
  238. }
  239. ]
  240. return data
  241. }
  242. },
  243. data () {
  244. return {
  245. screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
  246. timer: false,
  247. form: this.$form.createForm(this, { name: 'searchForm' }),
  248. isNoData: false, // 是否有每天营业额及进店量数据
  249. stationList: [], // 洗车网点列表
  250. searchForm: {
  251. queryWord: null, // 时间查询条件,默认本周
  252. storeIdList: [] // 已选洗车网点
  253. },
  254. chartData: {
  255. KX: 0, // 快洗
  256. JX: 0, // 精洗
  257. DLX: 0, // 打蜡洗
  258. allOrderNum: 0, // 洗车总量
  259. useCouponOrderNum: 0, // 用券洗车量
  260. notUseCouponOrderNum: 0 // 未用券洗车量
  261. },
  262. // 快速删选tab
  263. tabList: [{
  264. name: '今天',
  265. type: 'today'
  266. },
  267. {
  268. name: '本周',
  269. type: 'thisWeek'
  270. },
  271. {
  272. name: '上周',
  273. type: 'lastWeek'
  274. },
  275. {
  276. name: '本月',
  277. type: 'thisMonth'
  278. }
  279. ],
  280. curentType: 'thisWeek', // 当前所选时间查询类型
  281. beginDate: null, // 开始时间
  282. endDate: null, // 结束时间
  283. // 洗车量图表数据
  284. clearnChartData: [{
  285. name: '投递量',
  286. type: 'line',
  287. data: []
  288. },
  289. {
  290. name: '清运量',
  291. type: 'line',
  292. data: []
  293. }
  294. ],
  295. couponColor: ['#d48265', '#ff55ff'],
  296. // 洗车类型数据
  297. currentTabChart: 'tab1', // 洗车类型详情数据与变化趋势的tab 默认展示详情数据
  298. XdaysData: [], // 图表X轴时间集合
  299. // 洗车类型柱状图表数据
  300. washTypeBarData: [{
  301. name: '快速洗车',
  302. type: 'bar',
  303. data: []
  304. },
  305. {
  306. name: '精致洗车',
  307. type: 'bar',
  308. data: []
  309. },
  310. {
  311. name: '打蜡精洗',
  312. type: 'bar',
  313. data: []
  314. }
  315. ],
  316. // 洗车类型折线图表数据
  317. washTypeLineData: [{
  318. name: '快速洗车',
  319. type: 'line',
  320. data: []
  321. },
  322. {
  323. name: '精致洗车',
  324. type: 'line',
  325. data: []
  326. },
  327. {
  328. name: '打蜡精洗',
  329. type: 'line',
  330. data: []
  331. }
  332. ],
  333. // 各类型占比
  334. washTypePieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
  335. databack: {
  336. couponChartData: [],
  337. washTypePieData: [],
  338. chartData: {}
  339. }
  340. }
  341. },
  342. methods: {
  343. moment,
  344. // 时间改变
  345. dateChange (dates) {
  346. console.log(dates, this.searchForm.queryWord, 'dddddd')
  347. this.curentType = ''
  348. },
  349. // 不可选日期
  350. disabledDate (date) {
  351. return (date && date.valueOf() > Date.now()) || (date.valueOf() < Date.now() - (90 * 24 * 60 * 60 * 1000))
  352. },
  353. filterOption (input, option) {
  354. return (
  355. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  356. )
  357. },
  358. // 查询网点列表
  359. getListStation () {
  360. stationList().then(res => {
  361. if (res.status == 200) {
  362. this.stationList = res.data || []
  363. } else {
  364. this.stationList = []
  365. }
  366. })
  367. },
  368. // 页面初始化
  369. pageInit () {
  370. this.form.resetFields()
  371. this.databack = {
  372. couponChartData: _.cloneDeep(this.couponChartData),
  373. washTypePieData: _.cloneDeep(this.washTypePieData),
  374. chartData: _.cloneDeep(this.chartData)
  375. }
  376. },
  377. // 查询
  378. handleSearch () {
  379. this.showChart = false
  380. if (this.searchForm.queryWord != ',' && this.searchForm.queryWord.length) {
  381. const searchTime = this.searchForm.queryWord.toString().split(',')
  382. this.beginDate = this.exitTime(searchTime[0])
  383. this.endDate = this.exitTime(searchTime[1])
  384. this.getPageData()
  385. } else {
  386. this.$message.error('请选择统计区间')
  387. }
  388. },
  389. // 重置
  390. handleReset () {
  391. this.searchForm.storeIdList = []
  392. this.curentType = 'thisWeek'
  393. this.getCurentSearchTime()
  394. },
  395. // 格式化时间
  396. exitTime (time) {
  397. const D = new Date(time)
  398. const RES_DATE = D.getFullYear() + '-' + this.p((D.getMonth() + 1)) + '-' + this.p(D.getDate())
  399. return RES_DATE
  400. },
  401. // p为不够10添加0的函数
  402. p (s) {
  403. return s < 10 ? '0' + s : s
  404. },
  405. // 获取快速查询时间 并 赋值到时间选择框中
  406. getCurentSearchTime (item) {
  407. this.curentType = item ? item.type : this.curentType
  408. const quickType = {
  409. lastMonth: [moment(getDate.getLastMonthDays().starttime), moment(getDate.getLastMonthDays().endtime)],
  410. thisMonth: [moment(getDate.getCurrMonthDays().starttime), moment(getDate.getCurrMonthDays().endtime)],
  411. lastWeek: [moment(getDate.getLastWeekDays().starttime), moment(getDate.getLastWeekDays().endtime)],
  412. thisWeek: [moment(getDate.getCurrWeekDays().starttime), moment(getDate.getCurrWeekDays().endtime)],
  413. yesterday: [moment(getDate.getYesterday().starttime), moment(getDate.getYesterday().endtime)],
  414. today: [moment(getDate.getToday().starttime), moment(getDate.getToday().endtime)]
  415. }
  416. console.log(quickType[this.curentType])
  417. this.searchForm.queryWord = quickType[this.curentType]
  418. this.beginDate = quickType[this.curentType][0].format('YYYY-MM-DD')
  419. this.endDate = quickType[this.curentType][1].format('YYYY-MM-DD')
  420. console.log(this.searchForm.queryWord, '1111111')
  421. this.getPageData()
  422. },
  423. // 根据查询条件获取所有数据
  424. getPageData () {
  425. this.XdaysData = [] // x轴置空
  426. const _date = {
  427. beginDate: this.beginDate,
  428. endDate: this.endDate,
  429. storeIdList: this.searchForm.storeIdList
  430. }
  431. console.log(_date, '_date')
  432. getCleanReport(_date).then(res => {
  433. console.log(res, 'rrrrrrr')
  434. if (res.status == 200) {
  435. this.chartData = res.data
  436. if (res.data.dateList && res.data.dateList.length) {
  437. this.isNoData = false
  438. this.filterData(res.data.dateList)
  439. } else {
  440. this.isNoData = true
  441. }
  442. } else {
  443. this.isNoData = true
  444. }
  445. })
  446. },
  447. // 整合图表每天数据
  448. filterData (data) {
  449. const days = [] // 日期合集
  450. const kxData = [] // 快速洗车数据
  451. const jxData = [] // 精致洗车数据
  452. const dlxData = [] // 打蜡洗车数据
  453. const totalData = [] // 投递量数据
  454. const useCouponData = [] // 清运量数据
  455. data.map(item => {
  456. const itemDay = item.date.split('-')
  457. const month = Number(itemDay[1])
  458. const day = Number(itemDay[2])
  459. const time = month + '月' + day + '日'
  460. days.push(time)
  461. // console.log(days, 'ddddd')
  462. kxData.push(item.KX)
  463. jxData.push(item.JX)
  464. dlxData.push(item.DLX)
  465. totalData.push(item.allOrderNum)
  466. useCouponData.push(item.useCouponOrderNum)
  467. })
  468. this.XdaysData = days
  469. const washTypeData = [kxData, jxData, dlxData]
  470. // 各回收物类型柱状图表数据
  471. this.washTypeBarData.map((item, index) => {
  472. item.data = washTypeData[index]
  473. })
  474. // 各回收物类型折线图表数据
  475. this.washTypeLineData.map((item, index) => {
  476. item.data = washTypeData[index]
  477. })
  478. // 洗车量图表数据赋值
  479. this.clearnChartData[0].data = totalData
  480. this.clearnChartData[1].data = useCouponData
  481. }
  482. },
  483. beforeRouteEnter (to, from, next) {
  484. next(vm => {
  485. vm.pageInit()
  486. vm.getListStation() // 获取网点列表
  487. vm.curentType = 'thisWeek'
  488. vm.getCurentSearchTime()
  489. })
  490. },
  491. // 将 reisze 事件在 vue mounted 的时候 去挂载一下它的方法
  492. mounted () {
  493. const that = this
  494. window.onresize = () => {
  495. return (() => {
  496. window.screenWidth = document.body.clientWidth
  497. that.screenWidth = window.screenWidth
  498. })()
  499. }
  500. }
  501. }
  502. </script>
  503. <style lang="less" scoped>
  504. .home{
  505. width: 100%;
  506. }
  507. .report-page {
  508. margin-top: 10px;
  509. overflow-y: scroll;
  510. overflow-x: hidden;
  511. .search-panel {
  512. .ivu-card-body>div {
  513. display: inline-block;
  514. margin-right: 20px;
  515. }
  516. .desc {
  517. color: #999;
  518. }
  519. .searchItem {
  520. padding: 8px 20px;
  521. border: 1px dashed #EEEEEE;
  522. margin: 0 5px;
  523. border-radius: 5px;
  524. }
  525. .active {
  526. background-color: #ff9900;
  527. color: #fff;
  528. border: none;
  529. }
  530. }
  531. .panel {
  532. margin-top: 10px;
  533. background-color: #FFFFFF;
  534. .noData {
  535. background-color: rgba(50, 50, 50, 0.7);
  536. color: #fff;
  537. padding: 15px 30px;
  538. position: absolute;
  539. top: 40%;
  540. left: 40%;
  541. }
  542. .chartPie-box{
  543. height: 300px;
  544. width: 100%;
  545. }
  546. .panel-title {
  547. font-size: 18px;
  548. color: #333;
  549. padding-bottom: 5px;
  550. }
  551. .tab-card {
  552. float: right;
  553. .tab-card-item {
  554. padding: 5px 10px;
  555. border: 1px solid #eee;
  556. cursor: pointer;
  557. }
  558. .checked-item {
  559. border-color: #2d8cf0;
  560. color: #2d8cf0;
  561. }
  562. }
  563. .border-radius {
  564. border-radius: 15px;
  565. }
  566. .background-blue {
  567. background-color: #157edf;
  568. }
  569. .background-green {
  570. background-color: #29aa4f;
  571. }
  572. .background-yellow {
  573. background-color: #dbb211;
  574. }
  575. .background-pop {
  576. background-color: #8544e0;
  577. }
  578. .background-black {
  579. background-color: #1f2c65;
  580. }
  581. .background-pink {
  582. background-color: #d23e57;
  583. }
  584. .background-skyblue {
  585. background-color: #00aaff;
  586. }
  587. .background-greenBlue {
  588. background-color: #1b9eaa;
  589. }
  590. .background-blackGreen {
  591. background-color: #357c09;
  592. }
  593. .background-orange {
  594. background-color: #d2701b;
  595. }
  596. }
  597. .module-list {
  598. display: flex;
  599. justify-content: center;
  600. align-items: center;
  601. flex-direction: column;
  602. color: #FFFFFF;
  603. span {
  604. font-weight: 600;
  605. font-size: 20px;
  606. }
  607. }
  608. .module-icon {
  609. width: 52px;
  610. height: 54px;
  611. }
  612. }
  613. </style>