dayReport.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697
  1. <template>
  2. <el-scrollbar style="height:100%">
  3. <div>
  4. <div>
  5. <el-form
  6. :model="queryParams"
  7. style="margin-left: 20px;"
  8. ref="queryForm"
  9. :inline="true"
  10. v-show="showSearch"
  11. label-width="68px"
  12. >
  13. <el-form-item>
  14. <el-button size="mini" @click="dayDataSource">今天</el-button>
  15. <el-button size="mini" @click="yesDataSource">昨天</el-button>
  16. <el-button size="mini" @click="workDataSource">本周</el-button>
  17. <el-button size="mini" @click="monthDataSource">本月</el-button>
  18. <el-date-picker
  19. style="margin: 0px 10px;"
  20. size="mini"
  21. v-model="dateRangeCreatedDate"
  22. type="daterange"
  23. range-separator="至"
  24. start-placeholder="开始日期"
  25. end-placeholder="结束日期"
  26. ></el-date-picker>
  27. <el-button size="mini" @click="queryDataSource">查询</el-button>
  28. </el-form-item>
  29. </el-form>
  30. <span style="color:#ff9955;font-size:25px;">|</span>
  31. <span style="font-size:20px;">数据概览</span>
  32. <el-row :gutter="10" class="panel-group">
  33. <el-col :xs="12" :sm="12" :lg="6">
  34. <div class="flex xiaoliang">
  35. <div style="line-height: 62px;font-size: 44px;">{{ form.zongliters }}L</div>
  36. <div style="font-size: 28px;">总销量</div>
  37. </div>
  38. </el-col>
  39. <el-col :xs="12" :sm="12" :lg="6">
  40. <div class="flex xiaoe">
  41. <div style="line-height: 62px;font-size: 44px;">{{ form.zongAmt }}元</div>
  42. <div style="font-size: 28px;">总金额</div>
  43. </div>
  44. </el-col>
  45. <el-col :xs="12" :sm="12" :lg="6">
  46. <div class="flex xiaoliang">
  47. <div style="line-height: 62px;font-size: 44px;">{{ form.cyamt}}元</div>
  48. <div style="font-size: 28px;">柴油</div>
  49. </div>
  50. </el-col>
  51. <el-col :xs="12" :sm="12" :lg="6">
  52. <div class="flex xiaoliang">
  53. <div style="line-height: 62px;font-size: 44px;">{{ form.qyamt }}元</div>
  54. <div style="font-size: 28px;">汽油</div>
  55. </div>
  56. </el-col>
  57. </el-row>
  58. </div>
  59. <div style="width:100%; height: 360px;background: #FFFFFF;">
  60. <span style="color:#ff9955;font-size:25px;">|</span>
  61. <span style="font-size:20px;">销售情况</span>
  62. <div ref="myChart" style="width:100%; height: 350px;margin: 0px 25px;"></div>
  63. </div>
  64. <div style="width:100%; height: 181px;">
  65. <span style="color:#ff9955;font-size:25px;">|</span>
  66. <span style="font-size:20px;">详情:</span>
  67. <el-table v-loading="loading" :data="dayReportList">
  68. <el-table-column label="日期" align="center" prop="payDate">
  69. <template slot-scope="scope">
  70. <span>{{ parseTime(scope.row.createdDate, '{y}-{m}-{d}') }}</span>
  71. </template>
  72. </el-table-column>
  73. <el-table-column label="销额" align="center" prop="amt" />
  74. <el-table-column label="销量(L)" align="center" prop="orderLiters" v-if="false" />
  75. <el-table-column label="汽油" align="center" prop="qyAmt" />
  76. <el-table-column label="柴油" align="center" prop="cyAmt" />
  77. <el-table-column label="订单数" align="center" prop="orderNo" />
  78. <el-table-column label="应收" align="center" prop="receivableAmt" />
  79. <el-table-column label="到账" align="center" prop ="receivedAmt"/>
  80. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  81. <template slot-scope="scope">
  82. <el-button
  83. size="mini"
  84. type="text"
  85. icon="el-icon-edit"
  86. @click="handleLook(scope.row)"
  87. >详情</el-button>
  88. </template>
  89. </el-table-column>
  90. </el-table>
  91. <pagination
  92. v-show="total>0"
  93. :total="total"
  94. :page.sync="queryParams.pageNum"
  95. :limit.sync="queryParams.pageSize"
  96. @pagination="dayReportDetail"
  97. />
  98. </div>
  99. <el-dialog :title="title" width="800px" :visible.sync="open" append-to-body>
  100. <el-table v-loading="loading" :data="dayReportDetailsList">
  101. <el-table-column label="油品" align="center" prop="oilName" />
  102. <el-table-column label="油枪号" align="center" prop="oilGun" />
  103. <el-table-column label="销量(L)" align="center" prop="orderLiters" />
  104. <el-table-column label="销额(元)" align="center" prop="receivableAmt" />
  105. <el-table-column label="优惠" align="center" prop="discountAmt" v-if="false" />
  106. <el-table-column label="优惠卷" align="center" prop="discountCouponAmt" />
  107. <el-table-column label="实收" align="center" prop="amt" />
  108. <el-table-column label="会员支付" align="center" prop="menberAmt" v-if="false" />
  109. <el-table-column label="微信支付" align="center" prop="wxAmt" />
  110. <el-table-column label="支付宝支付" align="center" prop="zfbAmt" />
  111. <el-table-column label="会员充值" align="center" prop v-if="false" />
  112. <el-table-column label="积分消费" align="center" prop v-if="false" />
  113. </el-table>
  114. <pagination
  115. v-show="total1>0"
  116. :total="total1"
  117. :page.sync="queryInfo.pageNum"
  118. :limit.sync="queryInfo.pageSize"
  119. @pagination="getLookOrder"
  120. />
  121. </el-dialog>
  122. </div>
  123. </el-scrollbar>
  124. </template>
  125. <script>
  126. import echarts from "echarts";
  127. require("echarts/theme/macarons"); // echarts theme
  128. import {
  129. listSum,
  130. listOilType,
  131. listDayReport,
  132. selectDayReportDetail,
  133. getDetails,
  134. listXdata,
  135. listQydata92,
  136. listQydata95,
  137. listQydata97,
  138. listQydata0,
  139. listQydata10,
  140. listQydata20
  141. } from "@/api/dataSource/saleReport";
  142. export default {
  143. name: "source",
  144. data() {
  145. return {
  146. charts: null,
  147. // 遮罩层
  148. loading: true,
  149. // 选中数组
  150. ids: [],
  151. // 非单个禁用
  152. single: true,
  153. // 非多个禁用
  154. multiple: true,
  155. // 显示搜索条件
  156. showSearch: true,
  157. // 总条数
  158. total: 0,
  159. total1: 0,
  160. // 优惠劵管理表格数据
  161. couponList: [],
  162. dayReportDetailsList: [],
  163. dateRangeCreatedDate: [],
  164. //x轴数据
  165. xdata: [],
  166. //92#汽油数据
  167. qydata92: [],
  168. //95#汽油数据
  169. qydata95: [],
  170. //97#汽油数据
  171. qydata97: [],
  172. //0#柴油数据
  173. cydata0: [],
  174. //-10#柴油数据
  175. cydata10: [],
  176. //-20#柴油数据
  177. cydata20: [],
  178. // 弹出层标题
  179. title: "",
  180. // 是否显示弹出层
  181. open: false,
  182. // 查询参数
  183. queryParams: {
  184. createdDate: null,
  185. stationNo: null,
  186. stationName: null,
  187. beginTime: null,
  188. endTime: null,
  189. payDate: null
  190. },
  191. // 查询参数
  192. queryInfo: {
  193. pageNum: 1,
  194. pageSize: 10,
  195. payDate: null,
  196. status: null,
  197. createdDate: null,
  198. beginTime: null,
  199. endTime: null
  200. },
  201. //日报数据
  202. dayReportList: [],
  203. // 表单参数
  204. form: {
  205. zongAmt: 0,
  206. zongliters: 0,
  207. qyamt: 0,
  208. cyamt: 0
  209. },
  210. // 表单校验
  211. rules: {}
  212. };
  213. },
  214. mounted() {
  215. this.$nextTick(() => {
  216. this.queryParams.beginTime = this.getMonthDate();
  217. this.queryParams.endTime = this.getEndFormatDate(new Date());
  218. setTimeout(() => {
  219. this.initChart();
  220. }, 1000);
  221. });
  222. },
  223. created() {
  224. //获取折线图的数据
  225. this.reset();
  226. this.queryParams.beginTime = this.getMonthDate();
  227. this.queryParams.endTime = this.getEndFormatDate(new Date());
  228. this.getDatas();
  229. this.dayDataSource();
  230. },
  231. methods: {
  232. initChart() {
  233. // 初始化echarts
  234. this.charts = echarts.init(this.$refs.myChart, "macarons");
  235. this.charts.setOption(
  236. {
  237. xAxis: {
  238. data: this.xdata,
  239. boundaryGap: false,
  240. axisTick: {
  241. show: false
  242. }
  243. },
  244. tooltip: {
  245. trigger: "axis",
  246. axisPointer: {
  247. type: "cross"
  248. },
  249. padding: [5, 10]
  250. },
  251. yAxis: {
  252. axisTick: {
  253. show: false
  254. }
  255. },
  256. legend: {
  257. data: ["92#", "95#", "97#", "0#", "-10#", "-20#"]
  258. },
  259. animation: false,
  260. series: [
  261. {
  262. name: "92#",
  263. itemStyle: {
  264. normal: {
  265. color: "#FF005A",
  266. lineStyle: {
  267. color: "#FF005A",
  268. width: 2
  269. }
  270. }
  271. },
  272. smooth: true,
  273. type: "line",
  274. data: this.qydata92
  275. },
  276. {
  277. name: "95#",
  278. smooth: true,
  279. type: "line",
  280. itemStyle: {
  281. normal: {
  282. color: "#3888fa",
  283. lineStyle: {
  284. color: "#3888fa",
  285. width: 2
  286. }
  287. }
  288. },
  289. data: this.qydata95
  290. },
  291. {
  292. name: "97#",
  293. smooth: true,
  294. type: "line",
  295. itemStyle: {
  296. normal: {
  297. color: "#ffff00",
  298. lineStyle: {
  299. color: "#ffff00",
  300. width: 2
  301. }
  302. }
  303. },
  304. data: this.qydata97
  305. },
  306. {
  307. name: "0#",
  308. smooth: true,
  309. type: "line",
  310. itemStyle: {
  311. normal: {
  312. color: "#00ff00",
  313. lineStyle: {
  314. color: "#00ff00",
  315. width: 2
  316. }
  317. }
  318. },
  319. data: this.cydata0
  320. },
  321. {
  322. name: "-10#",
  323. smooth: true,
  324. type: "line",
  325. itemStyle: {
  326. normal: {
  327. color: "#00bfff",
  328. lineStyle: {
  329. color: "#00bfff",
  330. width: 2
  331. }
  332. }
  333. },
  334. data: this.cydata10
  335. },
  336. {
  337. name: "-20#",
  338. smooth: true,
  339. type: "line",
  340. itemStyle: {
  341. normal: {
  342. color: "#ffb6c1",
  343. lineStyle: {
  344. color: "#ffb6c1",
  345. width: 2
  346. }
  347. }
  348. },
  349. data: this.cydata20
  350. /* animationDuration: 2800,
  351. animationEasing: 'quadraticOut'*/
  352. }
  353. ]
  354. },
  355. true
  356. );
  357. },
  358. getXData() {
  359. return listXdata(this.queryParams).then(response => {
  360. this.xdata = [];
  361. if(response.hasOwnProperty('rows')){
  362. for (let i in response.rows) {
  363. this.xdata.push(response.rows[i].createdDate);
  364. }
  365. }
  366. });
  367. },
  368. getQyData92() {
  369. return listQydata92(this.queryParams).then(response => {
  370. this.qydata92 = [];
  371. if(response.hasOwnProperty('rows')){
  372. for (let i in response.rows) {
  373. let data = [];
  374. data.push(response.rows[i].createdDate);
  375. data.push(response.rows[i].amt);
  376. this.qydata92.push(data);
  377. }
  378. }
  379. });
  380. },
  381. getQydata95() {
  382. return listQydata95(this.queryParams).then(response => {
  383. this.qydata95 = [];
  384. if(response.hasOwnProperty('rows')){
  385. for (let i in response.rows) {
  386. let data = [];
  387. data.push(response.rows[i].createdDate);
  388. data.push(response.rows[i].amt);
  389. this.qydata95.push(data);
  390. }
  391. }
  392. });
  393. },
  394. getQydata97() {
  395. return listQydata97(this.queryParams).then(response => {
  396. this.qydata97 = [];
  397. if(response.hasOwnProperty('rows')){
  398. for (let i in response.rows) {
  399. let data = [];
  400. data.push(response.rows[i].createdDate);
  401. data.push(response.rows[i].amt);
  402. this.qydata97.push(data);
  403. }
  404. }
  405. });
  406. },
  407. getQydata0() {
  408. return listQydata0(this.queryParams).then(response => {
  409. this.cydata0 = [];
  410. if(response.hasOwnProperty('rows')){
  411. for (let i in response.rows) {
  412. let data = [];
  413. data.push(response.rows[i].createdDate);
  414. data.push(response.rows[i].amt);
  415. this.cydata0.push(data);
  416. }
  417. }
  418. });
  419. },
  420. getQydata10() {
  421. return listQydata10(this.queryParams).then(response => {
  422. this.cydata10 = [];
  423. if(response.hasOwnProperty('rows')){
  424. for (let i in response.rows) {
  425. let data = [];
  426. data.push(response.rows[i].createdDate);
  427. data.push(response.rows[i].amt);
  428. this.cydata10.push(data);
  429. }
  430. }
  431. });
  432. },
  433. getQydata20() {
  434. return listQydata20(this.queryParams).then(response => {
  435. this.cydata20 = [];
  436. if(response.hasOwnProperty('rows')){
  437. for (let i in response.rows) {
  438. let data = [];
  439. data.push(response.rows[i].createdDate);
  440. data.push(response.rows[i].amt);
  441. this.cydata20.push(data);
  442. }
  443. }
  444. });
  445. },
  446. //获取折线图用到的数据
  447. getDatas() {
  448. Promise.all([
  449. this.getXData(),
  450. this.getQyData92(),
  451. this.getQydata95(),
  452. this.getQydata97(),
  453. this.getQydata0(),
  454. this.getQydata10(),
  455. this.getQydata20()
  456. ]).then(res => {
  457. this.initChart();
  458. });
  459. },
  460. /** 查询优惠劵管理列表 */
  461. getList() {
  462. listSum(this.queryParams).then(response => {
  463. if (response.hasOwnProperty('data')) {
  464. this.form.zongAmt = response.data.amt;
  465. this.form.zongliters = response.data.orderLiters;
  466. }
  467. });
  468. listOilType(this.queryParams).then(response => {
  469. if(response.hasOwnProperty('rows')){
  470. for (let i in response.rows) {
  471. if (response.rows[i].oilType === "1") {
  472. this.form.qyamt = response.rows[i].amt;
  473. } else if (response.rows[i].oilType === "2") {
  474. this.form.cyamt = response.rows[i].amt;
  475. }
  476. }
  477. }
  478. });
  479. this.dayReportDetail();
  480. },
  481. dayReportDetail(){
  482. selectDayReportDetail(this.queryParams).then(response => {
  483. this.dayReportList = response.rows;
  484. console.log("response",response);
  485. this.total = response.total;
  486. this.loading = false;
  487. });
  488. },
  489. //本日的数据
  490. dayDataSource() {
  491. this.reset();
  492. this.queryParams.beginTime = this.getNowFormatDate(new Date());
  493. this.queryParams.endTime = this.getEndFormatDate(new Date());
  494. this.getList();
  495. },
  496. //昨天的数据
  497. yesDataSource() {
  498. this.reset();
  499. this.queryParams.beginTime = this.getFormatDate(new Date());
  500. this.queryParams.endTime = this.getNowFormatDate(new Date());
  501. this.getList();
  502. },
  503. //本周的数据
  504. workDataSource() {
  505. this.reset();
  506. this.queryParams.beginTime = this.getDates();
  507. this.queryParams.endTime = this.getEndFormatDate(new Date());
  508. //this.initChart();
  509. this.getDatas();
  510. this.getList();
  511. },
  512. //本月数据
  513. monthDataSource() {
  514. this.reset();
  515. this.queryParams.beginTime = this.getMonthDate();
  516. this.queryParams.endTime = this.getEndFormatDate(new Date());
  517. this.getDatas();
  518. this.getList();
  519. },
  520. //按照指定日期
  521. queryDataSource() {
  522. this.reset();
  523. this.queryParams.beginTime = this.dateRangeCreatedDate[0];
  524. this.queryParams.endTime = this.dateRangeCreatedDate[1];
  525. this.getDatas();
  526. this.getList();
  527. },
  528. //今天
  529. getNowFormatDate(date) {
  530. let seperator1 = "-";
  531. let month = date.getMonth() + 1;
  532. let strDate = date.getDate();
  533. if (month >= 1 && month <= 9) {
  534. month = "0" + month;
  535. }
  536. if (strDate >= 0 && strDate <= 9) {
  537. strDate = "0" + strDate;
  538. }
  539. let currentdate1 =
  540. date.getFullYear() + seperator1 + month + seperator1 + strDate;
  541. return currentdate1;
  542. },
  543. //明天
  544. getEndFormatDate(myDate) {
  545. let date = myDate.getDate();
  546. date = date + 1;
  547. myDate.setDate(date);
  548. let seperator2 = "-";
  549. let month = myDate.getMonth() + 1;
  550. let strDate = myDate.getDate();
  551. if (month >= 1 && month <= 9) {
  552. month = "0" + month;
  553. }
  554. if (strDate >= 0 && strDate <= 9) {
  555. strDate = "0" + strDate;
  556. }
  557. let currentdate2 =
  558. myDate.getFullYear() + seperator2 + month + seperator2 + strDate;
  559. return currentdate2;
  560. },
  561. //昨天
  562. getFormatDate(myDate) {
  563. let date = myDate.getDate();
  564. date = date - 1;
  565. myDate.setDate(date);
  566. let seperator3 = "-";
  567. let month = myDate.getMonth() + 1;
  568. let strDate = myDate.getDate();
  569. if (month >= 1 && month <= 9) {
  570. month = "0" + month;
  571. }
  572. if (strDate >= 0 && strDate <= 9) {
  573. strDate = "0" + strDate;
  574. }
  575. let currentdate3 =
  576. myDate.getFullYear() + seperator3 + month + seperator3 + strDate;
  577. return currentdate3;
  578. },
  579. getDates() {
  580. var new_Date = new Date();
  581. var timesStamp = new_Date.getTime();
  582. var currenDay = new_Date.getDay();
  583. var dates = new Date(
  584. timesStamp + 24 * 60 * 60 * 1000 * (0 - ((currenDay + 6) % 7))
  585. )
  586. .toLocaleDateString()
  587. .replace(/[年月]/g, "-")
  588. .replace(/[日上下午]/g, "");
  589. let s = dates.replace(/-/g, "/");
  590. var dt = new Date(s);
  591. var m = dt.getMonth() + 1;
  592. var d = dt.getDate();
  593. m = m < 10 ? "0" + m : m;
  594. d = d < 10 ? "0" + d : d;
  595. dates = dt.getFullYear() + "-" + m + "-" + d;
  596. return dates;
  597. },
  598. //本月第一天
  599. getMonthDate() {
  600. let date = new Date();
  601. let seperator1 = "-";
  602. let month = date.getMonth() + 1;
  603. if (month >= 1 && month <= 9) {
  604. month = "0" + month;
  605. }
  606. let currentdate =
  607. date.getFullYear() + seperator1 + month + seperator1 + "01";
  608. return currentdate;
  609. },
  610. // 表单重置
  611. reset() {
  612. this.queryParams = {
  613. createdDate: null,
  614. stationNo: null,
  615. stationName: null
  616. };
  617. this.form = {
  618. zongAmt: 0,
  619. zongliters: 0,
  620. qyamt: 0,
  621. cyamt: 0
  622. };
  623. },
  624. /** 查看详情按钮操作 */
  625. handleLook(row) {
  626. this.row =row;
  627. row.page= this.queryInfo.pageNum;
  628. row.limit= this.queryInfo.pageSize;
  629. this.getLookOrder(row);
  630. },
  631. getLookOrder(row) {
  632. const createdDate = this.row.createdDate;
  633. this.queryInfo.beginTime =createdDate.substring(0,10) +" 00:00:00";
  634. this.queryInfo.endTime =createdDate.substring(0,10) +" 23:59:59";
  635. this.queryInfo.status = "1";
  636. this.queryInfo.pageNum=row.page;
  637. this.queryInfo.pageSize =row.limit;
  638. getDetails(this.queryInfo).then(response => {
  639. this.dayReportDetailsList = response.rows;
  640. this.total1 = response.total;
  641. this.open = true;
  642. this.title = "日报详细信息";
  643. });
  644. }
  645. }
  646. };
  647. </script>
  648. <style lang="scss" scoped>
  649. .flex {
  650. display: flex;
  651. align-items: center;
  652. justify-content: center;
  653. width: 100%;
  654. height: 270px;
  655. flex-direction: column;
  656. }
  657. .flex-qy {
  658. display: flex;
  659. align-items: center;
  660. justify-content: center;
  661. }
  662. .flex-qy-sx {
  663. display: flex;
  664. align-items: center;
  665. justify-content: center;
  666. flex-direction: column;
  667. }
  668. .panel-group {
  669. padding-left: 10px;
  670. }
  671. .flex-sr {
  672. display: flex;
  673. align-items: center;
  674. justify-content: center;
  675. width: 100%;
  676. flex-direction: column;
  677. }
  678. .sr-font {
  679. font-size: 20px;
  680. color: #f4a645;
  681. }
  682. </style>