您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
1年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611
  1. <template>
  2. <view class="content">
  3. <view class="title_name">{{dealDateTime[0]}}年{{dealDateTime[1]}}月{{dealDateTime[2]}}日黔通智联ETC事业部全国发行日报表
  4. </view>
  5. <view class="change_type">
  6. <view class='time'>
  7. <uni-datetime-picker v-if="!isAli" type="date" :clear-icon="false" v-model="dateTime" @change="change"
  8. @show="showTan" @close="closeTan" />
  9. <view v-if="isAli" class="info_plate">
  10. <text>日期</text>
  11. <u-input v-model="dateTime" @click="aliDate" class="input" disabled placeholder="请选择日期" />
  12. </view>
  13. </view>
  14. </view>
  15. <view class="table_wrap" v-if="dataAll">
  16. <t-table>
  17. <t-tr font-size="12">
  18. <t-td>车型</t-td>
  19. <t-td>记账副卡当日开卡数</t-td>
  20. <t-td>记账卡累计发卡数</t-td>
  21. </t-tr>
  22. <t-tr v-if="dataAll.vehicleData" v-for="(item,index) in dataAll.vehicleData.vehicleDataDetails"
  23. :key="index" fontSize="12">
  24. <t-td>{{ item.vehicleType }}</t-td>
  25. <t-td>{{ item.dayCardCount }}</t-td>
  26. <t-td>{{ item.cardCount }}</t-td>
  27. </t-tr>
  28. <t-tr font-size="12">
  29. <t-td>合计</t-td>
  30. <t-td>{{ dataAll.vehicleData? dataAll.vehicleData.vehicleDataCount.dayCardCount:null }}</t-td>
  31. <t-td>{{ dataAll.vehicleData? dataAll.vehicleData.vehicleDataCount.cardCount:null }}</t-td>
  32. </t-tr>
  33. </t-table>
  34. </view>
  35. <!-- 改变卡类型和饼状图 -->
  36. <view class="change_type">
  37. <uni-data-select v-if="!isAli" v-model="selectTypeValue" :localdata="typeRange" @change="changeType"
  38. :clear="false" @close="showTan"></uni-data-select>
  39. </view>
  40. <view class="change_type">
  41. <view class="choice_item1" v-if="isShow===0">
  42. <uni-data-select v-if="!isAli" v-model="selectPieValue" :localdata="pieRange" @change="changePie"
  43. :clear="false" @close="showTan">
  44. </uni-data-select>
  45. </view>
  46. <view v-else-if="isShow===1">
  47. <zxzUniDataSelect v-model="value1" filterable multiple dataKey="label" dataValue="value"
  48. :localdata="data" @change="changeLine" @close="showTan" />
  49. </view>
  50. <view class="title_pie" v-else>
  51. <zxzUniDataSelect v-model="value2" filterable multiple dataKey="label" dataValue="value"
  52. :localdata="colRange" @change="changeCol" @close="showTan" />
  53. </view>
  54. </view>
  55. <view v-if="pieData !={} || chartData !={} || lineData !={} ">
  56. <view v-if="isShow===0 ">
  57. <view class="charts-box" v-if="hideCanvas">
  58. <qiun type="pie" :opts="opts" :chartData="pieData" />
  59. </view>
  60. </view>
  61. <view v-else-if="isShow === 1">
  62. <view class="charts-box" v-if="hideCanvas">
  63. <qiun type="line" :opts="optsLine" :chartData="lineData" :ontouch="true" />
  64. </view>
  65. </view>
  66. <view v-else>
  67. <view class="charts-box" v-if="hideCanvas">
  68. <qiun type="column" :opts="optsCol" :chartData="chartData" :ontouch="true" />
  69. </view>
  70. </view>
  71. </view>
  72. <!-- <u-select v-model="selectTypeName" :list="typeRange" @confirm="selectConfirm"></u-select> -->
  73. </view>
  74. </template>
  75. <script>
  76. import * as IFCODE from "@/utils/network/api.js";
  77. import {
  78. request
  79. } from "@/utils/network/request.js";
  80. const tools = require("../../../static/etcUtil/tools.js");
  81. import {
  82. stringToJson
  83. } from "@/utils/network/encryption";
  84. import {
  85. nowDate
  86. } from "@/utils/utils";
  87. import {
  88. getItem
  89. } from "@/utils/storage";
  90. // 表格
  91. import tTable from "@/components/t-table/t-table.vue"
  92. import tTh from '@/components/t-table/t-th.vue'
  93. import tTr from '@/components/t-table/t-tr.vue'
  94. import tTd from '@/components/t-table/t-td.vue'
  95. import qiun from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
  96. import zxzUniDataSelect from ".././components/zxz-uni-data-select/zxz-uni-data-select.vue";
  97. export default {
  98. data() {
  99. return {
  100. canvasId: "",
  101. value1: [0], //折线图
  102. data: [],
  103. value2: [0], //柱状图
  104. data2: [],
  105. isAli: false,
  106. hideCanvas: true,
  107. canvasShow: false,
  108. dateTime: "", //日期
  109. noDealDateTime: '', //没有处理过的时间,传给后端
  110. dealDateTime: [], //处理过后的时间,前端展示
  111. dataAll: '', //总的数据
  112. //标题名称
  113. titleArr: {
  114. 'dayCardCount': '当日开户数',
  115. 'monthCardCount': '当月开户数',
  116. "monthCancelCount": "当月注销",
  117. 'yearCardCount': '当年累积开户数',
  118. 'cardCount': '总计开户数',
  119. 'dayCancelCount': '当日注销',
  120. 'yearCancelCount': '当年注销数',
  121. 'cancelCount': '总计注销数'
  122. },
  123. isShow: 0,
  124. pieData: {},
  125. chartData: {},
  126. lineData: {},
  127. opts: {
  128. fontSize: 11,
  129. },
  130. optsLine: {
  131. fontSize: 11,
  132. enableScroll: true,
  133. xAxis: {
  134. disableGrid: true,
  135. scrollShow: true,
  136. itemCount: 3
  137. },
  138. extra: {
  139. line: {
  140. type: "straight",
  141. width: 2,
  142. activeType: "hollow"
  143. }
  144. }
  145. },
  146. optsCol: {
  147. fontSize: 11,
  148. enableScroll: true,
  149. xAxis: {
  150. disableGrid: true,
  151. scrollShow: true,
  152. itemCount: 3.5
  153. },
  154. yAxis: {
  155. data: [{
  156. min: 0
  157. }]
  158. },
  159. extra: {
  160. column: {
  161. type: "group",
  162. width: 25,
  163. }
  164. }
  165. },
  166. selectPieValue: 2, //默认是全部
  167. pieRange: [],
  168. pieDataAll: [],
  169. selectLineValue: 0,
  170. lineRange: [],
  171. lineDataAll: [],
  172. selectColValue: [0],
  173. colRange: [],
  174. colData: {
  175. xData: ["当日开户数", "当月开户数", "当年累积开户数", "总计开户数", "当日注销", "当年注销数", "总计注销数"],
  176. yData: {}
  177. },
  178. selectTypeValue: 0,
  179. typeRange: [{
  180. value: 0,
  181. text: "饼状图"
  182. },
  183. {
  184. value: 1,
  185. text: "折线图"
  186. },
  187. {
  188. value: 2,
  189. text: "柱状图"
  190. },
  191. ],
  192. cardRange: [{
  193. value: 0,
  194. text: "全部"
  195. },
  196. {
  197. value: 1,
  198. text: "记账卡"
  199. },
  200. {
  201. value: 2,
  202. text: "储值卡"
  203. },
  204. ]
  205. };
  206. },
  207. components: {
  208. tTable,
  209. tTh,
  210. tTr,
  211. tTd,
  212. qiun,
  213. zxzUniDataSelect
  214. },
  215. onLoad() {
  216. // #ifdef MP-ALIPAY
  217. this.isAli = true
  218. // #endif
  219. // #ifdef MP-WEIXIN
  220. this.isAli = false
  221. // #endif
  222. this.noDealDateTime = nowDate(new Date());
  223. this.dateTime = nowDate(new Date());
  224. this.dealDateTime = nowDate(new Date()).split('-');
  225. this.reqPie(); //饼状图数据请求
  226. },
  227. methods: {
  228. changeLine(e) {
  229. const choiceAllData = []
  230. for (var i = 0; i < e.length; i++) {
  231. choiceAllData.push(this.lineDataAll[e[i]['value']])
  232. }
  233. this.getLineData(choiceAllData);
  234. console.log('e:', e);
  235. },
  236. showTan() {
  237. console.log("隐藏")
  238. this.hideCanvas = false;
  239. },
  240. closeTan() {
  241. console.log("展示")
  242. this.hideCanvas = true;
  243. },
  244. getPieData(data) {
  245. //模拟从服务器获取数据时的延时
  246. setTimeout(() => {
  247. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  248. let res = {
  249. series: [{
  250. data: data
  251. }]
  252. };
  253. this.pieData = JSON.parse(JSON.stringify(res));
  254. this.closeTan()
  255. }, 500);
  256. },
  257. getColumnData(xData, yData) {
  258. //模拟从服务器获取数据时的延时
  259. setTimeout(() => {
  260. let res = {
  261. categories: xData,
  262. series: yData
  263. };
  264. this.chartData = JSON.parse(JSON.stringify(res));
  265. this.closeTan()
  266. }, 500);
  267. },
  268. getLineData(data) {
  269. console.log("data", data)
  270. if (data.length > 0) {
  271. //模拟从服务器获取数据时的延时
  272. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  273. let res = {
  274. 'categories': "",
  275. "series": []
  276. }
  277. res['categories'] = data[0]['xData']
  278. for (var i = 0; i < data.length; i++) {
  279. res['series'].push(data[i]['yData'][0])
  280. }
  281. setTimeout(() => {
  282. console.log("data", data, res)
  283. this.lineData = JSON.parse(JSON.stringify(res));
  284. this.closeTan()
  285. }, 500);
  286. } else {
  287. this.showTan()
  288. }
  289. },
  290. selectitem(index, item) {
  291. if (index >= 0) {
  292. this.tval = item.value;
  293. } else {
  294. this.tval = ""
  295. }
  296. },
  297. //饼状图改变
  298. changePie(e) {
  299. this.getPieData(this.pieDataAll[e]);
  300. },
  301. // 柱状图改变
  302. changeCol(e) {
  303. let allyData = []
  304. for (var i = 0; i < e.length; i++) {
  305. let index = e[i]['value']
  306. allyData.push(this.colData.yData[index])
  307. }
  308. this.getColumnData(this.colData.xData, allyData);
  309. },
  310. // 改变类型
  311. changeType(e) {
  312. this.isShow = e;
  313. this.closeTan()
  314. },
  315. // 改变卡类型
  316. changeCard(e) {
  317. console.log("e", e)
  318. },
  319. reqPie() {
  320. tools.showLoadingAlert("加载中");
  321. let options = {
  322. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  323. data: {
  324. accountDate: this.noDealDateTime, //统计日期
  325. agencyId: [], //渠道编号
  326. cardType: [], //卡类型 1-记账卡(包含预存卡),2-储值卡
  327. vehicleType: '', //车辆类型 1-客车,2-货车,2-专项作业车
  328. }, //请求参数
  329. method: "POST", //提交方式(默认POST)
  330. showLoading: true, //是否显示加载中(默认显示)
  331. };
  332. // 调用方式
  333. request(IFCODE.dataStatistics, options)
  334. .then((res) => {
  335. tools.hideLoadingAlert();
  336. this.dataAll = stringToJson(res.bizContent);
  337. try {
  338. if (this.dataAll.cardData) {
  339. console.log("this.dataAll", this.dataAll)
  340. this.dealPieData(stringToJson(res.bizContent)); //处理饼状图数据
  341. this.getPieData(this.pieDataAll[0]); //饼状图展示
  342. this.dealLineData(stringToJson(res.bizContent)); //处理折线图数据
  343. this.getLineData([this.lineDataAll[0]]); //折线图展示
  344. this.dealColData(stringToJson(res.bizContent)) //处理柱状图数据
  345. this.getColumnData(this.colData.xData, [this.colData.yData[0]]); //柱状图
  346. }
  347. } catch (error) {
  348. console.log(error.name + ":" + error.message)
  349. }
  350. })
  351. },
  352. dealPieData(data) {
  353. // 记账卡合计
  354. this.pieRange = []; //清空一遍数据
  355. this.pieDataAll = []; //清空一遍数据
  356. var pieDataItem = []
  357. // ETC卡合计
  358. var pieDataItem2 = []
  359. if (data.cardData.cardDataCount) {
  360. var list = {
  361. value: 2,
  362. text: "全部"
  363. };
  364. this.pieRange.push(list);
  365. for (var i in data.cardData.cardDataCount) {
  366. if (this.titleArr[i]) {
  367. var obj = {};
  368. obj.name = this.titleArr[i];
  369. obj.value = (data.cardData.cardDataCount)[i];
  370. }
  371. pieDataItem2.push(obj);
  372. }
  373. this.pieDataAll.push(pieDataItem2);
  374. }
  375. if (data.cardData.accountCardData.accountCardDataCount) {
  376. var list = {
  377. value: 0,
  378. text: "记账卡合计"
  379. };
  380. this.pieRange.push(list);
  381. for (var i in data.cardData.accountCardData.accountCardDataCount) {
  382. if (this.titleArr[i]) {
  383. var obj = {};
  384. obj.name = this.titleArr[i];
  385. obj.value = (data.cardData.accountCardData.accountCardDataCount)[i];
  386. }
  387. pieDataItem.push(obj);
  388. }
  389. this.pieDataAll.push(pieDataItem);
  390. }
  391. // 储值卡合计
  392. var pieDataItem1 = []
  393. if (data.cardData.valueCardData.valueCardDataCount) {
  394. var list = {
  395. value: 1,
  396. text: "储值卡合计"
  397. };
  398. this.pieRange.push(list);
  399. for (var i in data.cardData.valueCardData.valueCardDataCount) {
  400. if (this.titleArr[i]) {
  401. var obj = {};
  402. obj.name = this.titleArr[i];
  403. obj.value = (data.cardData.valueCardData.valueCardDataCount)[i];
  404. }
  405. pieDataItem1.push(obj);
  406. }
  407. this.pieDataAll.push(pieDataItem1);
  408. }
  409. console.log("this.pieDataAll", this.pieDataAll)
  410. },
  411. dealLineData(data) {
  412. this.lineDataAll = [];
  413. // 全部
  414. var allData = data.cardData.accountCardData.accountCardDataDetail.concat(data.cardData.valueCardData
  415. .valueCardDataDetail)
  416. console.log("allData", allData)
  417. for (var i = 0; i < allData.length; i++) {
  418. var lineItem = {
  419. xData: ["当日开户数", "当月开户数", "当年累积开户数", "总计开户数", "当日注销", "当年注销数", "总计注销数"],
  420. yData: []
  421. }
  422. if (allData[i].agencyName) {
  423. var obj = {};
  424. obj.name = allData[i].agencyName
  425. obj.data = [];
  426. for (var n in this.titleArr) {
  427. obj.data.push(allData[i][n])
  428. }
  429. lineItem.yData.push(obj)
  430. // 处理折线图选择
  431. var option = {}
  432. option.value = i
  433. option.text = allData[i].agencyName
  434. this.lineRange.push(option)
  435. var optionNew = {}
  436. optionNew.value = i
  437. optionNew.label = allData[i].agencyName
  438. this.data.push(optionNew)
  439. }
  440. this.lineDataAll.push(lineItem)
  441. }
  442. console.log("this.lineDataAll", this.lineRange, this.data)
  443. },
  444. dealColData(data) {
  445. this.colRange = [];
  446. var allData = data.cardData.accountCardData.accountCardDataDetail.concat(data.cardData.valueCardData
  447. .valueCardDataDetail)
  448. for (var i = 0; i < allData.length; i++) {
  449. if (allData[i].agencyName) {
  450. var obj = {};
  451. obj.value = i;
  452. obj.label = allData[i].agencyName;
  453. this.colRange.push(obj); //获得选择类表
  454. this.colData.yData[i] = {};
  455. this.colData.yData[i]['name'] = allData[i].agencyName;
  456. this.colData.yData[i]['data'] = [];
  457. for (var n in this.titleArr) {
  458. this.colData.yData[i]['data'].push(allData[i][n])
  459. }
  460. }
  461. }
  462. },
  463. // 日期事件
  464. change(e) {
  465. this.dealDateTime = e.split('-');
  466. this.dateTime = e;
  467. this.noDealDateTime = e;
  468. this.reqPie(); //饼状图数据请求
  469. // window.addEventListener("show", () => {
  470. // console.log('它发生变化了')
  471. // });
  472. // this.hideCanvas = false;
  473. // this.canvasShow = getItem("show")
  474. console.log("111111111111")
  475. },
  476. aliDate() {
  477. my.datePicker({
  478. success: (res) => {
  479. console.log("您选择的日期为:" + res.date)
  480. this.dateTime = res.date;
  481. console.log("您选择的日期为:" + this.dateTime)
  482. this.dealDateTime = res.date.split('-');
  483. console.log("您选择的日期为:" + this.dealDateTime)
  484. this.noDealDateTime = res.date;
  485. console.log("您选择的日期为:" + this.noDealDateTime)
  486. this.reqPie();
  487. },
  488. });
  489. }
  490. },
  491. };
  492. </script>
  493. <style scoped>
  494. .content {
  495. overflow: hidden;
  496. min-height: 100vh;
  497. }
  498. .charts-box {
  499. width: 100%;
  500. height: 300px;
  501. }
  502. .title {
  503. font-size: 32rpx;
  504. margin: 6px 10px;
  505. border-radius: 8rpx;
  506. }
  507. .table_wrap {
  508. font-size: 14rpx;
  509. margin: 40rpx auto;
  510. width: 700rpx;
  511. height: auto
  512. }
  513. t-tr t-td:nth-child(1) {
  514. width: 20% !important;
  515. }
  516. t-tr t-td:nth-child(2) {
  517. width: 43% !important;
  518. }
  519. t-tr t-td:nth-child(3) {
  520. width: 37% !important;
  521. }
  522. .uni-stat__select {
  523. width: 40% !important;
  524. }
  525. .info_plate {
  526. display: flex;
  527. flex-direction: row;
  528. width: 94%;
  529. height: 100rpx;
  530. margin: 0 auto;
  531. border-bottom: 2rpx solid #f2f2f2;
  532. }
  533. .title_pie {
  534. display: flex;
  535. justify-content: flex-end;
  536. align-items: center;
  537. }
  538. .uni-select {
  539. font-size: 13px !important;
  540. height: 30px !important;
  541. }
  542. .change_type {
  543. padding: 0 3%;
  544. display: flex;
  545. margin-bottom: 36rpx;
  546. margin-top: 16rpx;
  547. }
  548. .change_type>uni-data-select {
  549. width: 40%;
  550. }
  551. .time {
  552. width: 40%;
  553. }
  554. .title_name {
  555. width: 95%;
  556. font-weight: 600;
  557. text-align: center;
  558. margin: auto;
  559. }
  560. .choice_item {
  561. min-width: 50%;
  562. }
  563. .choice_item1 {
  564. min-width: 40%;
  565. }
  566. /deep/.uni-date__x-input,
  567. /deep/.uni-select {
  568. height: 32px;
  569. line-height: 32px !important;
  570. font-size: 13px !important;
  571. }
  572. .no {
  573. text-align: center;
  574. margin: 50rpx auto;
  575. }
  576. </style>