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

<template>
	<view class="content">
		<view v-if="1">
		<view class="title_name">2023年04月12日黔通智联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 in tableList" :key="item.id" fontSize="12">
					<t-td >{{ item.cars }}</t-td>
					<t-td>{{ item.carToday }}</t-td>
					<t-td>{{ item.carAll }}</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>
		<view v-if="isShow === 0">
	    	<view class="title title_pie">&nbsp;&nbsp;饼状图<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">&nbsp;&nbsp;折线图</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">&nbsp;&nbsp;柱状图<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 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 {
			isShow:0,
			pieData:{},
			chartData: {},
			lineData:{},
			tableList: [{
						  cars: '客车',
						  carToday: '121314',
						  carAll: '19',
					  },
					  {
						  cars: '货车',
						  carToday: '121314',
						  carAll: '19',
					  },
					  {
						 cars: '合计',
						 carToday: '121314',
						 carAll: '19',
					  }],
			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: [
				{ value: 0, text: "记账卡合计" },
				{ value: 1, text: "储值卡合计" },
				{ value: 2, text: "ETC卡合计" },
			  ],
		    pieDataAll:[[{"name":"当日开户数","value":50},{"name":"当月开户数","value":30},{"name":"当年累积开户数","value":20},{"name":"总计开户数","value":18},{"name":"当日注销","value":8},{"name":"当年注销数","value":18},{"name":"总计注销数","value":8}],
			[{"name":"当日开户数","value":500},{"name":"当月开户数","value":30},{"name":"当年累积开户数","value":20},{"name":"总计开户数","value":18},{"name":"当日注销","value":8},{"name":"当年注销数","value":18},{"name":"总计注销数","value":8}],
			[{"name":"当日开户数","value":1000},{"name":"当月开户数","value":30},{"name":"当年累积开户数","value":20},{"name":"总计开户数","value":18},{"name":"当日注销","value":8},{"name":"当年注销数","value":18},{"name":"总计注销数","value":8}]],
		   lineData:{
		      xData:["当日开户数","当月开户数","当年累积开户数","总计开户数","当日注销","当年注销数","总计注销数"],
			  yData:[
				  {
					name: "贵阳银行",
					data: [35,8,25,37,4,20,12]
				  },
				  {
					name: "工商银行",
					data: [70,40,65,100,44,68,90]
				  },
				  {
					name: "农信社",
					data: [100,80,95,150,112,132,78]
				  }
				]
		   },
		   selectColValue:0,
		   colRange:[
				{ value: 0, text: "贵阳银行" },
				{ value: 1, text: "工商银行" },
				{ value: 2, text: "农信社" },
				{ value: 3, text: "建设银行" },
				{ value: 4, text: "农业银行" },
				{ value: 5, text: "世纪恒通" },
				{ value: 6, text: "金润" },
				{ value: 7, text: "黔通智联" },
				{ value: 8, text: "诺德" },
				{ value: 9, text: "易路通达" },
				{ value: 10, text: "无线感测" },
				{ value: 11, text: "路路帮" },
				{ value: 12, text: "自营网点" },
				{ value: 13, text: "其他渠道" },
			  ],
			colData:{
			    xData:["当日开户数","当月开户数","当年累积开户数","总计开户数","当日注销","当年注销数","总计注销数"],
				yData:{
					0:{
					name: "贵阳银行",
					data: [35,36,31,33,13,34,9]
				  },
				  1:{
					name: "工商银行",
					data: [55,36,31,33,13,34,9]
				  },
				  2:{
					name: "农信社",
					data: [55,36,31,33,13,34,9]
				  },
				}
			},
			selectTypeValue:0,
			typeRange: [
				{ value: 0, text: "饼状图" },
				{ value: 1, text: "折线图" },
				{ value: 2, text: "柱状图" },
			  ],
		};
	  },
	  components: {
			tTable,
			tTh,
			tTr,
			tTd,
		},
	  onShow() {
		this.reqPie();  //饼状图数据请求
		this.getLineData(this.lineData);   //折线图
		this.getColumnData(this.colData.xData,this.colData.yData[0]);  //柱状图
	  },
	  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) {
			console.log(item)
			if (index >= 0) {
				this.tval = item.value;
			} else {
				this.tval = ""
			}
		},
		//饼状图改变
		changePie(e) {
			  this.getPieData(this.pieDataAll[e]);
			  console.log("e:",e, this.pieDataAll);
		},
		// 柱状图改变
		changeCol(e){
			this.getColumnData(this.colData.xData,this.colData.yData[e]);
		},
		// 改变类型
		changeType(e){
			console.log("changeType", e);
			this.isShow=e;
		},
		reqPie(){
			tools.showLoadingAlert("加载中");
			// let options = {
			// 	type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			// 	data: {
			// 		Status: "0",
			// 		random: cmdRandNum, //5202192509222239
			// 		obuSerailNo: obu.obuId, //5202192509551922
			// 		fileData: getFileData(),
			// 		orderId: fileDataStrings.orderId,
			// 	}, //请求参数
			// 	method: "POST", //提交方式(默认POST)
			// 	showLoading: true, //是否显示加载中(默认显示)
			// };
			//调用方式
			// request(IFCODE.modifyObuVehicleInfo, options)
			// 	.then((res) => {
					tools.hideLoadingAlert();
					// const datas = stringToJson(res.bizContent);
					this.getPieData(this.pieDataAll[0]); //饼状图
				// })
		},
	  }
};
</script>


<style scoped>
	.content{
		/* background-color: #EEF7F7; */
		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: space-between;
		align-items: center;
	}
	.uni-select{
		font-size: 13px !important;
		height: 30px !important;
	}
	.change_type{
		width: 30% !important;
		margin-left: 40rpx;
		margin-bottom: 40rpx;
	}
	.title_name{
		width: 95%;
		font-weight: 600;
		text-align: center;
		margin: auto;
	}
	.choice_item{
		width: 30%;
	}
	.choice_item1{
		width: 35%;
	}
</style>