uni-zhihuikuangshan/pages/production/personnel_orientation/personnel_orientation.vue

<template>
	<view>
		<!-- 搜索井下人员 -->
		<p-personnel-orientation-navbar :mine="mine"></p-personnel-orientation-navbar>

		<view class="content"> 
			
			<!-- 当前井下人员 -->
			<p-personnel-orientation-section-1 :mine="mine">
				<!-- 圆环图 -->
				<canvas style="width: 720upx; height:500upx;" canvas-id="canvasRing" id="canvasRing" @touchstart="touchRing"></canvas>

			</p-personnel-orientation-section-1>
			
			<p-personnel-orientation-section-3>
				<!-- 职能科室 -->
				<view class="section_title">职能科室</view>
				<canvas style="width: 720upx; height:800upx;" canvas-id="canvasRing2" id="canvasRing2" @touchstart="touchRing2"></canvas>
				<!-- 基层区队 -->
				<view class="section_title">基层区队</view>
				<canvas style="width: 720upx; height:800upx;" canvas-id="canvasRing3" id="canvasRing3" @touchstart="touchRing3"></canvas>
			</p-personnel-orientation-section-3>
			<!-- 各科室下井人数 -->
			<p-personnel-orientation-section-4 @changeDepart="changeDepart">
				<canvas style="width: 700upx; height:2500upx;" canvas-id="canvasColumn" id="canvasColumn" class="charts-rotate" @touchstart="touchColumn"></canvas>
			</p-personnel-orientation-section-4>
		</view>
	</view>
</template>


<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	
	var _self;
	var canvaRing = null;
	var canvaRing2 = null;
	var canvaRing3 = null;

	// 柱状图
	var canvaColumn = null;

	export default {
		data() {
			return {
				// 矿编码
				mine:"",
				
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',

				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				
				
				// 今日部门人数统计
				departType:"now",
				
				
				lastTapTimeoutFunc:null,
				lastTapDiffTime:0
				
				
			}
		},
		onLoad(option) {
			// 矿编码
			this.mine = option.mine
			
			_self = this;
			this.cWidth = uni.upx2px(720);
			this.cHeight = uni.upx2px(500);
			this.cHeight3 = uni.upx2px(750);
			this.getServerData();
			this.getServerData2();
			this.getServerData3();

			// 柱状图
			this.cWidth2 = uni.upx2px(700);
			this.cHeight2 = uni.upx2px(2400);
			this.getServerData4();
			
			
		},
		methods: {
			// 改变今日部门人数统计的参数
			changeDepart(type){
				// console.log(type)
				if(type == 1){
					this.departType = "today"
				}else{
					this.departType = "now"
				}
				console.log(this.departType)
				this.getServerData4();
			},
			
			// 当前人员统计
			getServerData(){
				this.$p_api.personnel_people_now({
					mine:this.mine
				}).then((res)=>{
					// console.log(res)
					
					let Ring = {series:[{name:'',data:0}],people_total:0}
					
					// res.data.data.people_distribute 图例
					Ring.people_total = res.data.data.people_total
					
					
					const series = res.data.data.people_distribute
					series.map(function(item,index){
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm['name'] = item.depart_name;
						sevm['data'] = item.pepole_num;
						//将项放进新的数组
						Ring.series[index] = sevm
					})
					
					// console.log(Ring)
					_self.showRing("canvasRing", Ring);
				})
				
			
			},
			
			// 职能科室人数统计
			getServerData2(){
				this.$p_api.personnel_office_total({
					mine:this.mine
				}).then((res)=>{
					// console.log(res)
					
					let Ring2 = {series:[{name:'',data:0}],people_total:0}
					
					
					Ring2.people_total = res.data.people_total
					
					
					const series = res.data.data
					series.map(function(item,index){
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm['id'] = item.depart_id;
						sevm['name'] = item.depart_name;
						sevm['data'] = item.pepole_num;
						//将项放进新的数组
						Ring2.series[index] = sevm
					})
					
					// console.log(Ring2)
					_self.showRing2("canvasRing2", Ring2);
				})
				
			},
			
			// 基层区队人数统计
			getServerData3(){
				this.$p_api.personnel_basic_total({
					mine:this.mine
				}).then((res)=>{
					// console.log(res.data.data)
					
					let Ring3 = {series:[{name:'',data:0}],people_total:0}
								
					Ring3.people_total = res.data.people_total
							
					const series = res.data.data
					series.map(function(item,index){
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm['name'] = item.depart_name;
						sevm['data'] = item.pepole_num;
						//将项放进新的数组
						Ring3.series[index] = sevm
					})
					
					// console.log(Ring3)
					_self.showRing3("canvasRing3", Ring3);
				})
			},
			
			
			showRing(canvasId, chartData) {
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 12,
					// 图例配置
					// legend: true,
					legend: {
						position: "right",
						lineHeight: 30,
					},
					title: {
						name: '总人数',
						color: '#666666',
						fontSize: 15 * _self.pixelRatio,
						offsetY: 0 * _self.pixelRatio,
					},
					subtitle: {
						name: chartData.people_total + '人',
						color: '#666666',
						fontSize: 15 * _self.pixelRatio,
						offsetY: 0 * _self.pixelRatio,
					},
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 30 * _self.pixelRatio,
							labelWidth: 20
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					// 百分比指示 关
					dataLabel: false,
				});
			},
			touchRing(e) {
				canvaRing.showToolTip(e, {
					format: function(item) {
						
						return item.name + ':' + item.data + '人'
					}
				});
			},


			showRing2(canvasId, chartData) {
				canvaRing2 = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 12,
					// 图例配置
					legend: true,
					legend: {
						position: "bottom",
						lineHeight: 30,
					},
					title: {
						name: '总人数',
						color: '#666666',
						fontSize: 15 * _self.pixelRatio,
						offsetY: 0 * _self.pixelRatio,
					},
					subtitle: {
						name: chartData.people_total + '人',
						color: '#666666',
						fontSize: 15 * _self.pixelRatio,
						offsetY: 0 * _self.pixelRatio,
					},
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 30 * _self.pixelRatio,
							labelWidth: 5
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight3 * _self.pixelRatio,
					disablePieStroke: true,
					// 百分比指示 关
					dataLabel: true,
				});
			},
			touchRing2(e) {
				canvaRing2.showToolTip(e, {
					
					format: (item) => {
						
						this.go_depart_people(item)
						
						return item.name + ':' + item.data + '人'
					}
				});
				
				console.log(e)
				
			},
			
			go_depart_people(item){
				setTimeout(()=>{
					uni.navigateTo({
						url:"./depart-people/depart-people?title="+item.name+"&id="+item.id+"&mine="+this.mine
					})
				},1000)
			},


			showRing3(canvasId, chartData) {
				canvaRing3 = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 12,
					// 图例配置
					legend: true,
					legend: {
						position: "bottom",
						lineHeight: 30,
					},
					title: {
						name: '总人数',
						color: '#666666',
						fontSize: 15 * _self.pixelRatio,
						offsetY: 0 * _self.pixelRatio,
					},
					subtitle: {
						name:  chartData.people_total + '人',
						color: '#666666',
						fontSize: 15 * _self.pixelRatio,
						offsetY: 0 * _self.pixelRatio,
					},
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 30 * _self.pixelRatio,
							labelWidth: 15
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight3 * _self.pixelRatio,
					disablePieStroke: true,
					// 百分比指示 关
					dataLabel: true,
				});
			},
			touchRing3(e) {
				canvaRing3.showToolTip(e, {
					format: (item) => {
						// console.log(item)
						
						this.go_depart_people_2(item)
						
						return item.name + ':' + item.data + '人'
					}
				});
			},
			
			go_depart_people_2(item){
				setTimeout(()=>{
					uni.navigateTo({
						url:"./depart-people-2/depart-people-2?title="+item.name+"&mine="+this.mine
					})
				},1000)
			},


			// 今日各部门人数统计
			getServerData4(){
				// console.log(this.departType)
				this.$p_api.personnel_depart_today({
					type:this.departType,
					mine:this.mine
				}).then((res)=>{
					// console.log(res.data.data)
								
					let ColumnColumn = {
						"categories": [],
						"seriesData": []
					}
					
					const categories = res.data.data
					categories.map(function(item,index){
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.depart_name;
						//将项放进新的数组
						ColumnColumn.categories[index] = sevm
					})
					
					const seriesData = res.data.data
					seriesData.map(function(item,index){
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.pepole_num;
						//将项放进新的数组
						ColumnColumn.seriesData[index] = sevm
					})
					
					// console.log(ColumnColumn)
					
					_self.showColumnColumn("canvasColumn",ColumnColumn);
				})
				
			},
			
			showColumnColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: false,
					},
					fontSize: 9,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					rotate: true,
					padding:[20,15,4,15],
					// #ifdef MP-ALIPAY || MP-BAIDU
					rotateLock: true, //百度及支付宝需要锁定旋转
					// #endif
					categories: chartData.categories,
					series:[{
						"name":'',
						"data": chartData.seriesData
					}],
					xAxis: {
						disableGrid: true,
						rotateLabel:true,
						
					},
					yAxis: {
						// disabled:true
					},
					dataLabel: true,
					width: _self.cWidth2 * _self.pixelRatio,
					height: _self.cHeight2 * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							// width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length,
							width: _self.cWidth * _self.pixelRatio * 2 / chartData.categories.length,
							// seriesGap:12,
							meter: {
								//这个是外层边框的宽度
								border: 4,
								//这个是内部填充颜色
								fillColor: '#E5FDC3'
							}
						}
					}
					
				});

			},
			touchColumn(e) {
				canvaColumn.showToolTip(e, {
					format: (item, category) => {
					
						
						let _this = this;
						let curTime = new Date().getTime();
						let lastTime = _this.lastTapDiffTime;
						_this.lastTapDiffTime = curTime;
						//两次点击间隔小于300ms, 认为是双击
						let diff = curTime - lastTime;
						if (diff < 300) {
							console.log("双击")
						
							uni.navigateTo({
								url: "./depart-people-2/depart-people-2?title=" + category + "&departType=" + this.departType+"&mine="+this.mine
							})
						
							//_this.handleVideo('screen',index)自定义事件
							clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
						} else {
							// 单击事件延时300毫秒执行
							_this.lastTapTimeoutFunc = setTimeout(function() {
								console.log("单击")
								//_this.handleVideo('playOrStop',index)自定义事件
							}, 300);
						}
						
						
						return category + '：' + item.data +  item.name
					}
				});
			},
		
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.content {
		box-sizing: border-box;
		padding: 0 15rpx;
		background-color: #f3f3f3;

		.section_title {
			text-align: center;
			line-height: 96rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #232627;
		}
	}
</style>