androidCnToWechatGrt/pagesStorage/home.vue

<template>
	<div class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='仓储管理' :showback='false' bgColor='transparent'></cus-header>
		<image class="topbg" :src="imgBase+'storage/home_bg.png'" mode="widthFix"></image>
		<div class="inout" :style="{'backgroundImage':'url('+imgBase+'/storage/home_bgimg1.png)'}">
			<div class="pre">
				<text>入库总量</text>
				<p>{{priceFormat(inNum,0)}}</p>
			</div>
			<div class="line"></div>
			<div class="pre">
				<text>出库总量</text>
				<p>{{outNum}}</p>
			</div>
		</div>
		<div class="menus">
			<div class="item" v-for="(item,index) in menuList" :key="index">
				<image :src="item.icon" :class="index<4?'img1':'img2'"></image>
				<p :class="index<4?'p1':'p2'">{{item.title}}</p>
			</div>
		</div>
		<div class="chartBox">
			<p class="title">库存数量占比</p>
			<div class="chart">
				<l-echart ref="kcslzbChartRef" @finished="initKcslzb"></l-echart>
			</div>
		</div>
		<div class="chartBox">
			<p class="title">入库统计</p>
			<div class="chart">
				<div class="btns">
					<div class="pre" :class="{'active':rkIdx===0}" @tap="changeRkCahrtData(0)">按月</div>
					<div class="pre" :class="{'active':rkIdx===1}" @tap="changeRkCahrtData(1)">按年</div>
				</div>
				<l-echart ref="rktjChartRef" @finished="initRktj"></l-echart>
			</div>
		</div>
		<div class="chartBox">
			<p class="title">出库统计</p>
			<div class="chart">
				<div class="btns">
					<div class="pre" :class="{'active':ckIdx===0}" @tap="changeCkCahrtData(0)">按月</div>
					<div class="pre" :class="{'active':ckIdx===1}" @tap="changeCkCahrtData(1)">按年</div>
				</div>
				<l-echart ref="cktjChartRef" @finished="initCktj"></l-echart>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from '@/pagesStorage/components/lime-echart/static/echarts.min.js'
	import lEchart from '@/pagesStorage/components/lime-echart/components/l-echart/l-echart.vue'
	export default {
		components:{lEchart},
		data(){
			return {
				inNum:'9879',
				outNum:'880',
				menuList:[
					{
						icon:this.$imgBase+'storage/home_icon_rk.png',
						title:'入库',
						path:''
					},
					{
						icon:this.$imgBase+'storage/home_icon_ck.png',
						title:'出库',
						path:''
					},
					{
						icon:this.$imgBase+'storage/home_icon_pk.png',
						title:'盘库',
						path:''
					},
					{
						icon:this.$imgBase+'storage/home_icon_yk.png',
						title:'移库',
						path:''
					},
					{
						icon:this.$imgBase+'storage/home_icon_kcjl.png',
						title:'库存记录',
						path:''
					},
					{
						icon:this.$imgBase+'storage/home_icon_kctj.png',
						title:'库存统计',
						path:''
					},
					{
						icon:this.$imgBase+'storage/home_icon_wldw.png',
						title:'往来单位',
						path:''
					},
					{
						icon:this.$imgBase+'storage/home_icon_ckgl.png',
						title:'仓库管理',
						path:''
					}
				],
				rkIdx:0,
				ckIdx:0,
			}
		},
		methods:{
			// 库存数量占比
			async initKcslzb() {
				const chart = await this.$refs.kcslzbChartRef.init(echarts);
				let option = {
				  legend: {
					top: 'bottom'
				  },
				  tooltip: {
					trigger: 'item'
				  },
				  series: [
					{
					  name: '库存数量占比',
					  type: 'pie',
					  radius: [20, 100],
					  center: ['50%', '42%'],
					  roseType: 'area',
					  itemStyle: {
						borderRadius: 5
					  },
					  data: [
						{ value: 40, name: '分类1' },
						{ value: 38, name: '分类2' },
						{ value: 32, name: '分类3' },
						{ value: 30, name: '分类4' },
						{ value: 28, name: '分类5' },
						{ value: 26, name: '分类6' },
						{ value: 22, name: '分类7' }
					  ]
					}
				  ]
				};
				chart.setOption(option)
			},
			//入库统计
			async initRktj(){
				const chart = await this.$refs.rktjChartRef.init(echarts);
				let option = {
				  title: {
					text: '数量',
					textStyle:{
						fontSize:16,
						color:'#86909C'
					}
				  },
				  xAxis: {
					type: 'category',
					data: ['12-20', '12-21', '12-22', '12-23', '12-24', '12-25', '12-26']
				  },
				  yAxis: {
					type: 'value'
				  },
				  tooltip: {
					trigger: 'axis',
					axisPointer: {
					  type: 'cross',
					  label: {
						backgroundColor: '#6a7985'
					  }
					}
				  },
				  grid: {
					left: '1%',
					right: '1%',
					bottom: '10%',
					top: '18%',
					containLabel: true
				  },
				  series: [
					{
					  name:'入库数量',
					  data: [0, 479, 389, 726, 111, 1000, 0],
					  type: 'line',
					  lineStyle:{
					   color:'#198CFF',
					   width: 3
					  },
					  symbol:'none',
					  areaStyle: {
						color:'rgba(25,140,255,.4)'
					  },
					  smooth: true
					}
				  ]
				};
				chart.setOption(option);
			},
			changeRkCahrtData(type){
				this.rkIdx = type;
			},
			//出库统计
			async initCktj(){
				const chart = await this.$refs.cktjChartRef.init(echarts);
				let option = {
				  title: {
					text: '数量',
					textStyle:{
						fontSize:16,
						color:'#86909C'
					}
				  },
				  xAxis: {
					type: 'category',
					data: ['12-20', '12-21', '12-22', '12-23', '12-24', '12-25', '12-26']
				  },
				  yAxis: {
					type: 'value'
				  },
				  tooltip: {
					trigger: 'axis',
					axisPointer: {
					  type: 'cross',
					  label: {
						backgroundColor: '#6a7985'
					  }
					}
				  },
				  grid: {
					left: '1%',
					right: '1%',
					bottom: '10%',
					top: '18%',
					containLabel: true
				  },
				  series: [
					{
					  name:'出库数量',
					  data: [0, 479, 389, 726, 111, 1000, 0],
					  type: 'line',
					  lineStyle:{
					   color:'#198CFF',
					   width: 3
					  },
					  symbol:'none',
					  areaStyle: {
						color:'rgba(25,140,255,.4)'
					  },
					  smooth: true
					}
				  ]
				};
				chart.setOption(option);
			},
			changeCkCahrtData(type){
				this.ckIdx = type;
			},
			// 金额格式化
			priceFormat(number, decimals = 0, decimalPoint = '.', thousandsSeparator = ',') {
				number = (`${number}`).replace(/[^0-9+-Ee.]/g, '')
				const n = !isFinite(+number) ? 0 : +number
				const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
				const sep = (typeof thousandsSeparator === 'undefined') ? ',' : thousandsSeparator
				const dec = (typeof decimalPoint === 'undefined') ? '.' : decimalPoint
				let s = ''
			
				s = (prec ? round(n, prec) + '' : `${Math.round(n)}`).split('.')
				const re = /(-?\d+)(\d{3})/
				while (re.test(s[0])) {
					s[0] = s[0].replace(re, `$1${sep}$2`)
				}
				
				if ((s[1] || '').length < prec) {
					s[1] = s[1] || ''
					s[1] += new Array(prec - s[1].length + 1).join('0')
				}
				return s.join(dec)
			},
		}
	}
</script>

<style scoped lang="less">
	.tabPage{
		padding: 0 24rpx 194rpx;
		background: #F4F8FB;
		
		.topbg{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 0;
		}
		
		.inout{
			width: 100%;
			height: 180rpx;
			margin-top: 20rpx;
			border-radius: 16rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			.line{
				width: 1rpx;
				height: 98rpx;
				background: rgba(255,255,255,.35);
				position: absolute;
				left: 50%;
				margin-left: -0.5rpx;
				top: 50%;
				margin-top: -49rpx;
			}
			.pre{
				width: 50%;
				padding-left: 30rpx;
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 28rpx;
				}
				p{
					font-family: D-DIN, D-DIN;
					font-weight: bold;
					font-size: 48rpx;
					color: #FFFFFF;
					line-height: 48rpx;
					margin-top: 20rpx;
				}
			}
		}
	
		.menus{
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 3rpx 0 33rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			position: relative;
			margin-top: 20rpx;
			.item{
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 37rpx;
				.img1{
					width: 80rpx;
					height: 80rpx;
				}
				.img2{
					width: 55rpx;
					height: 55rpx;
				}
				p{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #4E5969;
					line-height: 33rpx;
					text-align: center;
				}
				.p1{
					margin-top: 20rpx;
				}
				.p2{
					margin-top: 14rpx;
				}
			}
		}
	
		.chartBox{
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 40rpx 24rpx;
			box-sizing: border-box;
			position: relative;
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #1D2129;
				line-height: 36rpx;
				letter-spacing: 2rpx;
			}
			.chart{
				width: 100%;
				position: relative;
				
				.btns{
					border: 1rpx solid #ECECEC;
					border-radius: 6rpx;
					display: flex;
					position: absolute;
					right: 12rpx;
					top: 32rpx;
					z-index: 999;
					.pre{
						padding: 12rpx 16rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #86909C;
						line-height: 24rpx;
						position: relative;
						&.active{
							color: #198CFF;
						}
						&:last-child{
							border-left: 1rpx solid #ECECEC;
						}
					}
				}
			}
		}
	}
</style>