gwlz/jp-mobile/pages/fileTransmit/statistics.vue

<template>
	<view class="statics_main">
		<view class="card_banner">
			<u-tabs class="tab_title" lineColor="#36a7f3" :inactiveStyle="{color:'#fff'}"
				:activeStyle="{color:'#e6d623'}" :itemStyle="{width:'30%',height:'40px'}" :current="current" scrollable
				:list="list" @click="selectTab"></u-tabs>
		</view>
		<view class="card_one">
			<view class="card_title">
				文件传阅卡统计分析
			</view>
			<view class="charts-box">
				<qiun-data-charts type="column" :opts="opts"
					:chartData="current==0?chartData:current==1?chartData1:chartData2" />
			</view>
			<view class="grid">
				<view class="grid_item">
					<view class="text_font_size">496</view>
					<text style="color: #b8b8b8;font-size: 14px;">本年度新增</text>
				</view>
				<view class="grid_item item_mouth">
					<view class="text_font_size">496</view>
					<text style="color: #b8b8b8;font-size: 14px;">本月新增</text>

					<!-- <view class="charts-box_1">
						<qiun-data-charts type="arcbar" :chartData="chartDataOne" />
					</view> -->
				</view>
			</view>
		</view>
		<u-row>
			<u-col span="6" class="card_two">
				<view class="">
					本年度传阅卡来文部门top5
				</view>
				<view class="card_list">
						<u-row class="cell_item" justify="space-between" gutter="10" v-for="(item,index) in dataList">
							<u-col span="2">
								<view class="text-grey text-center">
									{{index+1}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="text-center text-bold text-black ellipsis-description">
									{{item.name}}
								</view>
							</u-col>
							<u-col span="6">
								<view class="text-center text-grey text-sm ">
									{{item.num}}
								</view>
							</u-col>
						</u-row>
				</view>
			</u-col>
			<u-col span="6" class="card_two">
				<view class="">
					本月新增文件传阅卡分析
				</view>
				<view class="card_chart">
					<view class="charts-box_1">
						<qiun-data-charts type="ring" :opts="opts1" :chartData="chartDataOne" />
					</view>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				chartData: {},
				chartData1: {},
				chartData2: {},
				chartDataOne: {},
				list: [{
					name: '年度'
				}, {
					name: '月份'
				}, {
					name: '来文部门'
				}],
				dataList: [{
					name: '政府办',
					num: 156
				}, {
					name: "法规办",
					num: 85
				}, {
					name: "工业强市办",
					num: 79
				}, {
					name: "环保办",
					num: 71
				}, {
					name: "教育办",
					num: 68
				}],
				opts: {
					height: '240px',
					color: ["#0ec89a"],
					enableScroll: false,
					legend: {
						show: false
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				opts1: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "收益率",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "70%",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
			};
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			selectTab(item) {
				this.current = item.index
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
						legend: {
							show: false
						},
						series: [{
							data: [35, 36, 31, 33, 13, 34]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
				setTimeout(() => {
					let res1 = {
						categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
						legend: {
							show: false
						},
						series: [{
							data: [35, 40, 2, 0, 36, 31, 10, 33, 20, 13, 50, 34]
						}]
					}
					this.chartData1 = JSON.parse(JSON.stringify(res1));
				}, 500);
				setTimeout(() => {
					let res2 = {
						categories: ["政府办", "去去去", "11111"],
						legend: {
							show: false
						},
						series: [{
							data: [35, 40, 2]
						}]
					}
					this.chartData2 = JSON.parse(JSON.stringify(res2));
				}, 500);
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"value": 50,
								"labelShow": false
							}, {
								"value": 30,
								"labelShow": false
							}]
						}]
					};
					this.chartDataOne = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	};
</script>

<style>
	.card_banner {
		width: 100%;
		height: 100px;
		background-color: #36a7f3;
		padding: 10px 20px 0;
	}

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

	.charts-box_1 {
		width: 100%;
		height: 80px;
	}

	.card_one {
		width: 96%;
		margin: 0 2%;
		position: relative;
		border-radius: 20px;
		background-color: #f5f5f5;
		box-shadow: 0 0 0 1px #ccc;
		top: -40px;
		z-index: 4;
	}

	.card_title {
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		font-weight: 700;
		text-align: center;
		border-bottom: 1px solid #ccc;
		background-color: eee;
		margin-bottom: 20px;
	}

	.grid_item {
		width: 50%;
		/* height: 20vh; */
		border-top: 1px solid #ccc;
		margin-top: 20px;
		text-align: center;
		padding: 10px 0;
	}

	.grid_item .text_font_size {
		font-size: 26px !important;
		margin-bottom: 10px;
		font-weight: 700;
	}

	.item_mouth {
		border-left: 1px solid #ccc;
	}

	.card_two {
		width: 100%;
		margin: 10px;
		position: relative;
		border-radius: 20px;
		background-color: #f5f5f5;
		box-shadow: 0 0 0 1px #ccc;
	}

	.cell_item {
		height: 30px;
		line-height: 30px;
		text-align: center;

	}
</style>