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

<template>
	<view class="content">
		<view>
			<!-- <view v-if="pieDataAll.length>0"> -->
			<view class="title_name">{{dealDateTime[0]}}年{{dealDateTime[1]}}月{{dealDateTime[2]}}日黔通智联ETC事业部全国发行日报表
			</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-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.vehicleDataCount.dayCardCount }}</t-td>
						<t-td>{{ dataAll.vehicleData.vehicleDataCount.cardCount }}</t-td>
					</t-tr>
				</t-table>
			</view>
			<!-- 改变类型和时间 -->
			<view class="change_type">
				<uni-data-select v-model="selectTypeValue" :localdata="typeRange" @change="changeType"
					:clear="false"></uni-data-select>
				<view class='time'>
					<uni-datetime-picker type="date" :clear-icon="false" v-model="dateTime" @change="change"
						@show="showTan" @close="closeTan" />
				</view>
			</view>
			<view v-if="pieData !={} || chartData !={} || lineData !={} ">
				<view v-if=" isShow===0 ">
					<view class=" title title_pie">
						<view class="choice_item1"><uni-data-select v-model="selectPieValue" :localdata="pieRange"
								@change="changePie" :clear="false"></uni-data-select></view>
					</view>
					<view class="charts-box" v-if="hideCanvas">
						<qiun type="pie" :opts="opts" :chartData="pieData" />
					</view>
				</view>
				<view v-else-if="isShow === 1">
					<view class="title title_pie">
						<view class="choice_item1"><uni-data-select v-model="selectLineValue" :localdata="lineRange"
								@change="changeLine" :clear="false"></uni-data-select></view>
					</view>
					<view class="charts-box" v-if="hideCanvas">
						<qiun type="line" :opts="optsLine" :chartData="lineData" :ontouch="true" />
					</view>
				</view>
				<view v-else>
					<view class="title title_pie">
						<view class="choice_item"><uni-data-select v-model="selectColValue" :localdata="colRange"
								@change="changeCol" :clear="false"></uni-data-select></view>
					</view>
					<view class="charts-box" v-if="hideCanvas">
						<qiun type="column" :opts="optsCol" :chartData="chartData" :ontouch="true" />
					</view>
				</view>
			</view>

		</view>
		<!-- <view v-else>暂无数据统计信息</view> -->
	</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 "@/subpackage/service/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
	import qiun from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
	export default {
		data() {
			return {
				hideCanvas: false,
				canvasShow: false,
				dateTime: Date.now(), //日期
				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: 0,
				pieRange: [],
				pieDataAll: [],
				selectLineValue: 0,
				lineRange: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "记账卡"
					},
					{
						value: 2,
						text: "储值卡"
					},
				],
				lineDataAll: [],
				selectColValue: 0,
				colRange: [],
				colData: {
					xData: ["当日开户数", "当月开户数", "当年累积开户数", "总计开户数", "当日注销", "当年注销数", "总计注销数"],
					yData: {}
				},
				selectTypeValue: 0,
				typeRange: [{
						value: 0,
						text: "饼状图"
					},
					{
						value: 1,
						text: "折线图"
					},
					{
						value: 2,
						text: "柱状图"
					},
				],
			};
		},
		components: {
			tTable,
			tTh,
			tTr,
			tTd,
			qiun
		},
		onLoad() {
			this.noDealDateTime = nowDate(new Date());
			// this.noDealDateTime='2023-04-17';
			this.dealDateTime = nowDate(new Date()).split('-');
			this.reqPie(); //饼状图数据请求
			window.addEventListener('setItem', () => {
				console.log("此处发生变化")
			})

		},
		methods: {
			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));
				}, 500);
			},
			getColumnData(xData, yData) {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						categories: xData,
						series: [yData]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getLineData(data) {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: data.xData,
						series: data.yData
					};
					this.lineData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			selectitem(index, item) {
				if (index >= 0) {
					this.tval = item.value;
				} else {
					this.tval = ""
				}
			},
			//饼状图改变
			changePie(e) {
				this.getPieData(this.pieDataAll[e]);
			},
			// 折线图改变类型
			changeLine(e) {
				this.getLineData(this.lineDataAll[e]);
			},
			// 柱状图改变
			changeCol(e) {
				this.getColumnData(this.colData.xData, this.colData.yData[e]);
			},
			// 改变类型
			changeType(e) {
				this.isShow = e;
			},
			reqPie() {

				tools.showLoadingAlert("加载中");
				let options = {
					type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
					data: {
						accountDate: this.noDealDateTime, //统计日期
						agencyId: '', //渠道编号
						cardType: '', //卡类型 1-记账卡，0-储值卡
						vehicleType: '', //车辆类型 0-客车，1-货车，2-专项作业车
					}, //请求参数
					method: "POST", //提交方式(默认POST)
					showLoading: true, //是否显示加载中(默认显示)
				};
				// 调用方式
				request(IFCODE.dataStatistics, options)
					.then((res) => {
						tools.hideLoadingAlert();
						this.dataAll = stringToJson(res.bizContent);
						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]); //柱状图
						}
					})
			},

			dealPieData(data) {
				// 记账卡合计
				this.pieRange = []; //清空一遍数据
				this.pieDataAll = []; //清空一遍数据
				var pieDataItem = []
				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);
				}
				// ETC卡合计
				var pieDataItem2 = []
				if (data.cardData.cardDataCount) {
					var list = {
						value: 2,
						text: "ETC卡合计"
					};
					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);
				}
				console.log("this.pieDataAll", this.pieDataAll)
			},
			dealLineData(data) {
				this.lineDataAll = [];
				// 全部
				var lineItem = {
					xData: ["当日开户数", "当月开户数", "当年累积开户数", "总计开户数", "当日注销", "当年注销数", "总计注销数"],
					yData: []
				}
				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.name = allData[i].agencyName
						obj.data = [];
						for (var n in this.titleArr) {
							obj.data.push(allData[i][n])
						}
						lineItem.yData.push(obj)
					}
				}
				this.lineDataAll.push(lineItem)
				// 记账卡
				var lineItem1 = {
					xData: ["当日开户数", "当月开户数", "当年累积开户数", "总计开户数", "当日注销", "当年注销数", "总计注销数"],
					yData: []
				}
				for (var i = 0; i < data.cardData.accountCardData.accountCardDataDetail.length; i++) {
					if (data.cardData.accountCardData.accountCardDataDetail[i].agencyName) {
						var obj = {};
						obj.name = data.cardData.accountCardData.accountCardDataDetail[i].agencyName
						obj.data = [];
						for (var n in this.titleArr) {
							obj.data.push(data.cardData.accountCardData.accountCardDataDetail[i][n])
						}
						lineItem1.yData.push(obj)
					}
				}
				this.lineDataAll.push(lineItem1)
				var lineItem2 = {
					xData: ["当日开户数", "当月开户数", "当年累积开户数", "总计开户数", "当日注销", "当年注销数", "总计注销数"],
					yData: []
				}
				for (var i = 0; i < data.cardData.valueCardData.valueCardDataDetail.length; i++) {
					if (data.cardData.valueCardData.valueCardDataDetail[i].agencyName) {
						var obj = {};
						obj.name = data.cardData.valueCardData.valueCardDataDetail[i].agencyName
						obj.data = [];
						for (var n in this.titleArr) {
							obj.data.push(data.cardData.valueCardData.valueCardDataDetail[i][n])
						}
						lineItem2.yData.push(obj)
					}
				}
				this.lineDataAll.push(lineItem2)
			},
			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.text = 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.canvasShow = getItem("show")
			},
		}
	};
</script>

<style scoped>
	::v-deep .uni-date-x {
		background-color: #EEF7F7 !important;
	}

	.content {
		background-color: #EEF7F7;
		overflow: hidden;
		min-height: 100vh;
	}

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

	.title {
		border-left: 10rpx solid rgb(24, 144, 255);
		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;
	}

	.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;
		justify-content: space-between;
		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 {
		width: 50%;
	}

	.choice_item1 {
		width: 35%;
	}

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