zhuoxin-user-uniapp/pages/index/index.vue

<template>
	<view class="content">
		<!-- <fxyk-navbar :isSearch="false" :isNeedReturn="false" title="首页"/> -->
		<view class="u-padding-left-60 u-margin-bottom-30">
			<text class="d-block main-title">业扩项目包工程管理</text>
			<text class="d-block main-english">Project management of business expansion project package</text>
		</view>
		<u-line color="white" border-style="dashed"/>
		<view class="d-flex u-margin-top-30 position-relative" style="height: 380rpx">
			<canvas style="margin-top:20rpx" class="z-1" canvas-id="canvasPie" id="canvasPie"></canvas>
			<canvas style="margin-left:-150rpx;margin-top:40rpx" canvas-id="canvasColumn" id="canvasColumn"></canvas>
			<view class="position-absolute status_style">
				<fxyk-status title="已完成" bgColor="#4CB1FF"/>
				<fxyk-status title="进行中" bgColor="#E7AE5E"/>
				<fxyk-status title="已终止" bgColor="#FF0014"/>
			</view>
		</view>
		<u-line color="white" border-style="dashed"/>
		<fxyk-search backgroundColor="#40349C" borderColor="#fff" placeholderColor="#fff" height="80" :paddingY="40" :paddingX="40" searchIconColor="#fff" disabled/>
		<view class="d-flex a-center u-margin-bottom-25  tab">
			<fxyk-tabControl v-for="(item,index) in tabData" :key="index" class="tab-item" :class="{'tabItemNative': tabIndex === index}" :tabData='item' :itemIndex="tabIndex" @click.native="jump_path(index)"></fxyk-tabControl>
		</view>
		<template v-if="projectData.length">
			<view v-for="(item,index) in projectData" :key="index">
				<fxyk-projectCard bgColor="#544AA6" :projectData="item" @click.native="jump_content(index)"></fxyk-projectCard>
			</view>
		</template>
	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaColumn=null;
	var canvaPie=null;
	export default {
		data() {
			return {
				background: {
					backgroundColor: "#40349C",
				},
				tabData: [
					{'num': 40, 'status': 1},
					{'num': 24, 'status': 2},
					{'num': 10, 'status': 3},
					{'num': 6, 'status': 4}
				],
				tabIndex: 0,
				projectData: [
					{'status': 2,'name':'辽宁中润农业发展有限公司','number':'121514551Fs15','content':'描述'},
					{'status': 1,'name':'辽宁中润农业发展有限公司','number':'121514551Fs15','content':'描述'},
					{'status': 3,'name':'辽宁中润农业发展有限公司','number':'121514551Fs15','content':'描述'},
					{'status': 3,'name':'辽宁中润农业发展有限公司','number':'121514551Fs15','content':'描述'},
					{'status': 3,'name':'辽宁中润农业发展有限公司','number':'121514551Fs15','content':'描述'},
					{'status': 3,'name':'辽宁中润农业发展有限公司','number':'121514551Fs15','content':'描述'},
					{'status': 3,'name':'辽宁中润农业发展有限公司','number':'121514551Fs15','content':'描述'},
					{'status': 3,'name':'辽宁中润农业发展有限公司','number':'121514551Fs15','content':'描述'},
					{'status': 3,'name':'辽宁中润农业发展有限公司','number':'121514551Fs15','content':'描述'}
				],
				pixelRatio:1,
				serverData:'',
				chartData: {
				  "categories": ["2012", "2013", "2014"],
				  "series": [{
					"textColor":"#fff",
					"data": [{"value": 24,"color": '#4CB1FF'}, {"value": 10,"color": '#E7AE5E'},{"value": 6,"color": '#FF0014'}]
				  }]
				},
				Pie: { series: [{
					"data": 24,
					"textColor": '#fff',
					"textSize": 8
				  }, {
					"data": 6,
					"textColor": '#fff',
					"textSize": 8
				  }, {
					"data": 10,
					"textColor": '#fff',
					"textSize": 8
				  }]
				}
			}
		},
		onLoad() {
			_self = this;
			// 饼状图 柱状图 宽高设置
			this.cWidthPie=uni.upx2px(380)
			this.cHeightPie=uni.upx2px(360)
			this.cWidthColumn=uni.upx2px(420)
			this.cHeightColumn=uni.upx2px(360)
			// 显示饼状图
			this.showPie()
			// 显示柱状图
			this.showColumn()
		},
		computed: {
			tabStyle() {
				 return function(index){
					 if (this.tabIndex === index) {
					 	return {'background-color': '#4CB1FF'}
					}
				}
			}
		},
		methods: {
			jump_path(index) {
				this.tabIndex = index
				if (index === 1) {
					this.projectData =  [
					{'status': 1,'name':'辽宁中润农业发展有限公司','number':'121514551Fs15','content':'描述'},
				]} else {
					this.projectData =  [
					{'status': 2,'name':'辽宁中润农业发展有限公司','number':'121514551Fs15','content':'描述'},
					{'status': 1,'name':'辽宁中润农业发展有限公司','number':'121514551Fs15','content':'描述'},
					{'status': 3,'name':'辽宁中润农业发展有限公司','number':'121514551Fs15','content':'描述'},
					{'status': 3,'name':'辽宁中润农业发展有限公司','number':'121514551Fs15','content':'描述'},
				]}
			},
			jump_content(index) {
				uni.navigateTo({
					url: `/pages/index/projectInfo?status=${index+1}`
				})
			},
			showColumn(){
				canvaColumn=new uCharts({
					$this:_self,
					canvasId: 'canvasColumn',
					type: 'column',
					legend:{ show:false },
					fontSize: 8,
					background: '#FFFFFF',
					pixelRatio: 1.5,
					categories: this.chartData.categories,
					series: this.chartData.series,
					xAxis: {
						disableGrid: true,
						disabled: true,
					},
					yAxis: {
						disableGrid: true,
						data: [{
							// 控制Y轴数据点颜色
							fontColor: '#40349C'
						}]
					},
					dataLabel: true,
					width: _self.cWidthColumn*_self.pixelRatio,
					height: _self.cHeightColumn*_self.pixelRatio,
					extra: {
						column: {
							type:'group',
							width: 30
						}
					  }
				});
				
			},
			showPie() {
				canvaPie=new uCharts({
					$this:_self,
					canvasId: "canvasPie",
					colors: ['#4CB1FF','#FF0014','#E7AE5E'],
					type: 'pie',
					fontSize: 11,
					background: '#40349C',
					legend:{ show:false },
					pixelRatio: 0.5,
					series: this.Pie.series,
					width: _self.cWidthPie*_self.pixelRatio,
					height: _self.cHeightPie*_self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						pie: {
							offsetAngle: 55,
						    lableWidth: 0,
							border: true,
							borderWidth: 5,
							borderColor: '#40349C'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: $yk-main-bg-color;
	}
	.content {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: $yk-main-bg-color;
	}
	.main-title {
		height: 56rpx;
		font-size: 42rpx;
		font-family: Segoe UI;
		font-weight: 400;
		line-height: 56rpx;
		color: $yk-yellow-color;
		font-size: 40rpx;
		letter-spacing: 1rpx;
	}
	.main-english {
		height: 29rpx;
		font-size: 21rpx;
		font-family: Segoe UI;
		font-weight: 400;
		line-height: 29rpx;
		color: #FFFFFF;
		opacity: 0.8;
	}
	.tabItemNative {
		background-color: $yk-blue-color!important;
	}
	.tab {
		height: 120rpx;
		.tab-item {
			width: 169rpx;
			height: 105rpx;
			text-align: center;
			margin: 10.5rpx;
			border-radius: 17rpx;
			background-color: $yk-main-text-color;
			box-shadow: 0rpx 6rpx 13rpx rgba(0, 0, 0, 0.16);
		}
	}
	.status_style {
		right:40rpx;
	}
</style>