zhywpt-sp/subpackage/service/statistics/index.vue

<template>
	<view class="content">
		<view class="title_name">{{dealDateTime[0]}}年{{dealDateTime[1]}}月{{dealDateTime[2]}}日黔通智联ETC事业部全国发行日报表
		</view>
		<view class="change_type">
			<view class='time'>
				<uni-datetime-picker v-if="!isAli" type="date" :clear-icon="false" v-model="dateTime" @change="change"
					@show="showTan" @close="closeTan" />
				<view v-if="isAli" class="info_plate">
					<text>日期</text>
					<u-input v-model="dateTime" @click="aliDate" class="input" disabled placeholder="请选择日期" />
				</view>
			</view>
		</view>
		<view class="table_wrap" v-if="dataAll">
			<t-table>
				<t-tr font-size="12">
					<t-td>车型</t-td>
					<t-td>记账副卡当日开卡数</t-td>
					<t-td>记账卡累计发卡数</t-td>
				</t-tr>
				<t-tr v-if="dataAll.vehicleData" v-for="(item,index) in dataAll.vehicleData.vehicleDataDetails"
					:key="index" fontSize="12">
					<t-td>{{ item.vehicleType }}</t-td>
					<t-td>{{ item.dayCardCount }}</t-td>
					<t-td>{{ item.cardCount }}</t-td>
				</t-tr>
				<t-tr font-size="12">
					<t-td>合计</t-td>
					<t-td>{{ dataAll.vehicleData? dataAll.vehicleData.vehicleDataCount.dayCardCount:null }}</t-td>
					<t-td>{{ dataAll.vehicleData? dataAll.vehicleData.vehicleDataCount.cardCount:null }}</t-td>
				</t-tr>
			</t-table>
		</view>
		<!-- 改变卡类型和饼状图 -->
		<view class="change_type">
			<uni-data-select v-if="!isAli" v-model="selectTypeValue" :localdata="typeRange" @change="changeType"
				:clear="false" @close="showTan"></uni-data-select>
		</view>
		<view class="change_type">
			<view class="choice_item1" v-if="isShow===0">
				<uni-data-select v-if="!isAli" v-model="selectPieValue" :localdata="pieRange" @change="changePie"
					:clear="false" @close="showTan">
				</uni-data-select>
			</view>
			<view v-else-if="isShow===1">
				<zxzUniDataSelect v-model="value1" filterable multiple dataKey="label" dataValue="value"
					:localdata="data" @change="changeLine" @close="showTan" />
			</view>
			<view class="title_pie" v-else>
				<zxzUniDataSelect v-model="value2" filterable multiple dataKey="label" dataValue="value"
					:localdata="colRange" @change="changeCol" @close="showTan" />

			</view>
		</view>

		<view v-if="pieData !={} || chartData !={} || lineData !={} ">
			<view v-if="isShow===0 ">
				<view class="charts-box" v-if="hideCanvas">
					<qiun type="pie" :opts="opts" :chartData="pieData" />
				</view>
			</view>
			<view v-else-if="isShow === 1">
				<view class="charts-box" v-if="hideCanvas">
					<qiun type="line" :opts="optsLine" :chartData="lineData" :ontouch="true" />
				</view>
			</view>
			<view v-else>
				<view class="charts-box" v-if="hideCanvas">
					<qiun type="column" :opts="optsCol" :chartData="chartData" :ontouch="true" />
				</view>
			</view>
		</view>

		<!-- <u-select v-model="selectTypeName" :list="typeRange" @confirm="selectConfirm"></u-select> -->
	</view>
</template>

<script>
	import * as IFCODE from "@/utils/network/api.js";
	import {
		request
	} from "@/utils/network/request.js";
	const tools = require("../../../static/etcUtil/tools.js");
	import {
		stringToJson
	} from "@/utils/network/encryption";
	import {
		nowDate
	} from "@/utils/utils";
	import {
		getItem
	} from "@/utils/storage";
	// 表格
	import tTable from "@/components/t-table/t-table.vue"
	import tTh from '@/components/t-table/t-th.vue'
	import tTr from '@/components/t-table/t-tr.vue'
	import tTd from '@/components/t-table/t-td.vue'
	import qiun from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
	import zxzUniDataSelect from ".././components/zxz-uni-data-select/zxz-uni-data-select.vue";
	export default {
		data() {
			return {
				canvasId: "",
				value1: [0], //折线图
				data: [],
				value2: [0], //柱状图
				data2: [],
				isAli: false,
				hideCanvas: true,
				canvasShow: false,
				dateTime: "", //日期
				noDealDateTime: '', //没有处理过的时间，传给后端
				dealDateTime: [], //处理过后的时间，前端展示
				dataAll: '', //总的数据
				//标题名称
				titleArr: {
					'dayCardCount': '当日开户数',
					'monthCardCount': '当月开户数',
					"monthCancelCount": "当月注销",
					'yearCardCount': '当年累积开户数',
					'cardCount': '总计开户数',
					'dayCancelCount': '当日注销',
					'yearCancelCount': '当年注销数',
					'cancelCount': '总计注销数'
				},
				isShow: 0,
				pieData: {},
				chartData: {},
				lineData: {},
				opts: {
					fontSize: 11,
				},
				optsLine: {
					fontSize: 11,
					enableScroll: true,
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 3
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				optsCol: {
					fontSize: 11,
					enableScroll: true,
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 3.5
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 25,
						}
					}
				},
				selectPieValue: 2, //默认是全部
				pieRange: [],
				pieDataAll: [],
				selectLineValue: 0,
				lineRange: [],
				lineDataAll: [],
				selectColValue: [0],
				colRange: [],
				colData: {
					xData: ["当日开户数", "当月开户数", "当年累积开户数", "总计开户数", "当日注销", "当年注销数", "总计注销数"],
					yData: {}
				},
				selectTypeValue: 0,
				typeRange: [{
						value: 0,
						text: "饼状图"
					},
					{
						value: 1,
						text: "折线图"
					},
					{
						value: 2,
						text: "柱状图"
					},
				],
				cardRange: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "记账卡"
					},
					{
						value: 2,
						text: "储值卡"
					},
				]
			};
		},
		components: {
			tTable,
			tTh,
			tTr,
			tTd,
			qiun,
			zxzUniDataSelect
		},
		onLoad() {
			// #ifdef MP-ALIPAY
			this.isAli = true
			// #endif
			// #ifdef MP-WEIXIN
			this.isAli = false
			// #endif
			this.noDealDateTime = nowDate(new Date());
			this.dateTime = nowDate(new Date());
			this.dealDateTime = nowDate(new Date()).split('-');
			this.reqPie(); //饼状图数据请求

		},
		methods: {
			changeLine(e) {
				const choiceAllData = []
				for (var i = 0; i < e.length; i++) {
					choiceAllData.push(this.lineDataAll[e[i]['value']])
				}
				this.getLineData(choiceAllData);
				console.log('e:', e);
			},
			showTan() {
				console.log("隐藏")
				this.hideCanvas = false;
			},
			closeTan() {
				console.log("展示")
				this.hideCanvas = true;
			},
			getPieData(data) {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: data
						}]
					};
					this.pieData = JSON.parse(JSON.stringify(res));
					this.closeTan()
				}, 500);
			},
			getColumnData(xData, yData) {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						categories: xData,
						series: yData
					};
					this.chartData = JSON.parse(JSON.stringify(res));
					this.closeTan()
				}, 500);
			},
			getLineData(data) {
				console.log("data", data)
				if (data.length > 0) {
					//模拟从服务器获取数据时的延时
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						'categories': "",
						"series": []
					}
					res['categories'] = data[0]['xData']
					for (var i = 0; i < data.length; i++) {
						res['series'].push(data[i]['yData'][0])
					}
					setTimeout(() => {
						console.log("data", data, res)
						this.lineData = JSON.parse(JSON.stringify(res));
						this.closeTan()
					}, 500);
				} else {
					this.showTan()
				}

			},
			selectitem(index, item) {
				if (index >= 0) {
					this.tval = item.value;
				} else {
					this.tval = ""
				}
			},
			//饼状图改变
			changePie(e) {
				this.getPieData(this.pieDataAll[e]);
			},
			// 柱状图改变
			changeCol(e) {
				let allyData = []
				for (var i = 0; i < e.length; i++) {
					let index = e[i]['value']
					allyData.push(this.colData.yData[index])
				}
				this.getColumnData(this.colData.xData, allyData);
			},
			// 改变类型
			changeType(e) {
				this.isShow = e;
				this.closeTan()
			},
			// 改变卡类型
			changeCard(e) {
				console.log("e", e)

			},
			reqPie() {

				tools.showLoadingAlert("加载中");
				let options = {
					type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
					data: {
						accountDate: this.noDealDateTime, //统计日期
						agencyId: [], //渠道编号
						cardType: [], //卡类型 1-记账卡(包含预存卡)，2-储值卡 
						vehicleType: '', //车辆类型 1-客车，2-货车，2-专项作业车
					}, //请求参数
					method: "POST", //提交方式(默认POST)
					showLoading: true, //是否显示加载中(默认显示)
				};
				// 调用方式
				request(IFCODE.dataStatistics, options)
					.then((res) => {
						tools.hideLoadingAlert();
						this.dataAll = stringToJson(res.bizContent);
						try {
							if (this.dataAll.cardData) {
								console.log("this.dataAll", this.dataAll)
								this.dealPieData(stringToJson(res.bizContent)); //处理饼状图数据
								this.getPieData(this.pieDataAll[0]); //饼状图展示
								this.dealLineData(stringToJson(res.bizContent)); //处理折线图数据
								this.getLineData([this.lineDataAll[0]]); //折线图展示
								this.dealColData(stringToJson(res.bizContent)) //处理柱状图数据
								this.getColumnData(this.colData.xData, [this.colData.yData[0]]); //柱状图
							}
						} catch (error) {
							console.log(error.name + "：" + error.message)
						}
					})
			},

			dealPieData(data) {
				// 记账卡合计
				this.pieRange = []; //清空一遍数据
				this.pieDataAll = []; //清空一遍数据
				var pieDataItem = []
				// ETC卡合计
				var pieDataItem2 = []
				if (data.cardData.cardDataCount) {
					var list = {
						value: 2,
						text: "全部"
					};
					this.pieRange.push(list);
					for (var i in data.cardData.cardDataCount) {
						if (this.titleArr[i]) {
							var obj = {};
							obj.name = this.titleArr[i];
							obj.value = (data.cardData.cardDataCount)[i];
						}
						pieDataItem2.push(obj);
					}
					this.pieDataAll.push(pieDataItem2);
				}
				if (data.cardData.accountCardData.accountCardDataCount) {
					var list = {
						value: 0,
						text: "记账卡合计"
					};
					this.pieRange.push(list);
					for (var i in data.cardData.accountCardData.accountCardDataCount) {
						if (this.titleArr[i]) {
							var obj = {};
							obj.name = this.titleArr[i];
							obj.value = (data.cardData.accountCardData.accountCardDataCount)[i];
						}
						pieDataItem.push(obj);
					}
					this.pieDataAll.push(pieDataItem);
				}
				// 储值卡合计
				var pieDataItem1 = []
				if (data.cardData.valueCardData.valueCardDataCount) {
					var list = {
						value: 1,
						text: "储值卡合计"
					};
					this.pieRange.push(list);
					for (var i in data.cardData.valueCardData.valueCardDataCount) {
						if (this.titleArr[i]) {
							var obj = {};
							obj.name = this.titleArr[i];
							obj.value = (data.cardData.valueCardData.valueCardDataCount)[i];
						}
						pieDataItem1.push(obj);
					}
					this.pieDataAll.push(pieDataItem1);
				}

				console.log("this.pieDataAll", this.pieDataAll)
			},
			dealLineData(data) {
				this.lineDataAll = [];
				// 全部
				var allData = data.cardData.accountCardData.accountCardDataDetail.concat(data.cardData.valueCardData
					.valueCardDataDetail)
				console.log("allData", allData)
				for (var i = 0; i < allData.length; i++) {
					var lineItem = {
						xData: ["当日开户数", "当月开户数", "当年累积开户数", "总计开户数", "当日注销", "当年注销数", "总计注销数"],
						yData: []
					}
					if (allData[i].agencyName) {
						var obj = {};
						obj.name = allData[i].agencyName
						obj.data = [];
						for (var n in this.titleArr) {
							obj.data.push(allData[i][n])
						}
						lineItem.yData.push(obj)
						// 处理折线图选择
						var option = {}
						option.value = i
						option.text = allData[i].agencyName
						this.lineRange.push(option)
						var optionNew = {}
						optionNew.value = i
						optionNew.label = allData[i].agencyName
						this.data.push(optionNew)
					}
					this.lineDataAll.push(lineItem)
				}
				console.log("this.lineDataAll", this.lineRange, this.data)

			},
			dealColData(data) {
				this.colRange = [];
				var allData = data.cardData.accountCardData.accountCardDataDetail.concat(data.cardData.valueCardData
					.valueCardDataDetail)
				for (var i = 0; i < allData.length; i++) {
					if (allData[i].agencyName) {
						var obj = {};
						obj.value = i;
						obj.label = allData[i].agencyName;
						this.colRange.push(obj); //获得选择类表
						this.colData.yData[i] = {};
						this.colData.yData[i]['name'] = allData[i].agencyName;
						this.colData.yData[i]['data'] = [];
						for (var n in this.titleArr) {
							this.colData.yData[i]['data'].push(allData[i][n])
						}
					}
				}
			},
			// 日期事件
			change(e) {
				this.dealDateTime = e.split('-');
				this.dateTime = e;
				this.noDealDateTime = e;
				this.reqPie(); //饼状图数据请求
				// window.addEventListener("show", () => {
				// 	console.log('它发生变化了')
				// });
				// this.hideCanvas = false;
				// this.canvasShow = getItem("show")

				console.log("111111111111")
			},
			aliDate() {
				my.datePicker({
					success: (res) => {
						console.log("您选择的日期为:" + res.date)
						this.dateTime = res.date;
						console.log("您选择的日期为:" + this.dateTime)
						this.dealDateTime = res.date.split('-');
						console.log("您选择的日期为:" + this.dealDateTime)
						this.noDealDateTime = res.date;
						console.log("您选择的日期为:" + this.noDealDateTime)
						this.reqPie();
					},
				});

			}
		},

	};
</script>

<style scoped>
	.content {
		overflow: hidden;
		min-height: 100vh;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	.title {
		font-size: 32rpx;
		margin: 6px 10px;
		border-radius: 8rpx;
	}

	.table_wrap {
		font-size: 14rpx;
		margin: 40rpx auto;
		width: 700rpx;
		height: auto
	}

	t-tr t-td:nth-child(1) {
		width: 20% !important;
	}

	t-tr t-td:nth-child(2) {
		width: 43% !important;
	}

	t-tr t-td:nth-child(3) {
		width: 37% !important;
	}

	.uni-stat__select {
		width: 40% !important;
	}

	.info_plate {
		display: flex;
		flex-direction: row;
		width: 94%;
		height: 100rpx;
		margin: 0 auto;

		border-bottom: 2rpx solid #f2f2f2;
	}

	.title_pie {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.uni-select {
		font-size: 13px !important;
		height: 30px !important;
	}

	.change_type {
		padding: 0 3%;
		display: flex;
		margin-bottom: 36rpx;
		margin-top: 16rpx;
	}

	.change_type>uni-data-select {
		width: 40%;
	}

	.time {
		width: 40%;
	}


	.title_name {
		width: 95%;
		font-weight: 600;
		text-align: center;
		margin: auto;
	}

	.choice_item {
		min-width: 50%;
	}

	.choice_item1 {
		min-width: 40%;
	}

	/deep/.uni-date__x-input,
	/deep/.uni-select {
		height: 32px;
		line-height: 32px !important;
		font-size: 13px !important;
	}

	.no {
		text-align: center;
		margin: 50rpx auto;
	}
</style>