statisticalReport.vue 18 KB

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