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

<template>
	<view class="content">
		<view v-if="pieDataAll.length>0">
		<view class="title_name">{{dealDateTime[0]}}年{{dealDateTime[1]}}月{{dealDateTime[2]}}日黔通智联ETC事业部全国发行日报表</view>
		<view class="table_wrap" >
			<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"/>
			</view>
		</view>
		<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">
	    	   <qiun-data-charts 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">
				<qiun-data-charts 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">
			   <qiun-data-charts type="column" :opts="optsCol" :chartData="chartData" :ontouch="true"/>
			</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 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'
     export default {
	  data() {
		return {
			dateTime: Date.now(),  //日期
			noDealDateTime:'', //没有处理过的时间，传给后端
			dealDateTime:[],  //处理过后的时间，前端展示
			dataAll:'',  //总的数据
			//标题名称
			titleArr:{'dayCardCount':'当日开户数','monthCardCount':'当月开户数','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,
		},
	  onLoad() {
		this.noDealDateTime=nowDate(new Date());
		// this.noDealDateTime='2023-04-17';
		this.dealDateTime=nowDate(new Date()).split('-');
		this.reqPie();  //饼状图数据请求
	  },
	  methods: {
		  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);
					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){
			// 记账卡合计
			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);
			}
		},
		dealLineData(data){
			// 全部
			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){
			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();  //饼状图数据请求
		},
	}
};
</script>

<style scoped>
	.content{
		background-color: white;
		overflow: hidden;
	}
	.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;
	}
	.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>