uni-zhks-app/pages/p-i-orientation/p-i-orientation.vue

<template>
	<view>
		<!-- 搜索井下人员 -->
		<p-i-o-navbar></p-i-o-navbar>

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

			</p-i-o-section-1>
			<!-- 井下人员（区域分布） -->
			<p-i-o-section-2 :regionList="regionList" @getMineList="getMineList" :mineList="mineList"></p-i-o-section-2>
			<!-- 井下人员（部门分布） -->
			<p-i-o-section-3>
				<!-- 职能科室 -->
				<view class="section_title">职能科室</view>
				<canvas style="width: 720upx; height:500upx;" canvas-id="canvasRing2" id="canvasRing2" @touchstart="touchRing2"></canvas>
				<!-- 基层区队 -->
				<view class="section_title">基层区队</view>
				<canvas style="width: 720upx; height:500upx;" canvas-id="canvasRing3" id="canvasRing3" @touchstart="touchRing3"></canvas>
			</p-i-o-section-3>
			<!-- 各科室下井人数 -->
			<p-i-o-section-4 @changeDepart="changeDepart">
				<canvas style="width: 700upx; height:1600upx;" canvas-id="canvasColumn" id="canvasColumn" class="charts-rotate" @touchstart="touchColumn"></canvas>
			</p-i-o-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 {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				// serverData: '',

				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				
				
				// section-2-区域分布：
				// 矿区人数统计
				regionList:[],
				// 矿井人数统计
				mineList:[],
				
				// 今日部门人数统计
				departType:"now",
				
				
			}
		},
		onLoad() {
			
			// section-2-区域分布：矿区人数统计
			this.getRegionList()
			
			_self = this;
			this.cWidth = uni.upx2px(720);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
			this.getServerData2();
			this.getServerData3();

			// 柱状图
			this.cWidth2 = uni.upx2px(700);
			this.cHeight2 = uni.upx2px(1600);
			this.getServerData4();
			
			
		},
		methods: {
			// 改变今日部门人数统计的参数
			changeDepart(type){
				// console.log(type)
				if(type == 1){
					this.departType = "today"
				}else{
					this.departType = "now"
				}
				console.log(this.departType)
				this.getServerData4();
			},
			
			
			async getServerData(){
				const res = await this.$myRequest({
					method:"POST",
				    url: '/personnel/people/now',
					header: {
						'Content-Type': 'application/json', 
					},
				})
				
				console.log(res.data.data)
				
				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);
			},
			
			async getServerData2(){
				const res = await this.$myRequest({
					method:"POST",
				    url: '/personnel/office/total',
					header: {
						'Content-Type': 'application/json', 
					},
				})
				
				console.log(res.data)
				
				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);
			},
			
			
			async getServerData3(){
				const res = await this.$myRequest({
					method:"POST",
				    url: '/personnel/basic/total',
					header: {
						'Content-Type': 'application/json', 
					},
				})
				
				console.log(res.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: 11,
					// 图裂配置
					// 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: 8,
					// 图例配置
					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: 10 * _self.pixelRatio,
							labelWidth: 5
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					// 百分比指示 关
					dataLabel: true,
				});
			},
			touchRing2(e) {
				canvaRing2.showToolTip(e, {
					
					format: function(item) {
						
						uni.navigateTo({
							url:"./p-i-o-s3-number/p-i-o-s3-number?title="+item.name+"&id="+item.id
						})
						
						return item.name + ':' + item.data + '人'
					}
				});
				
				console.log(e)
				
			},


			showRing3(canvasId, chartData) {
				canvaRing3 = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 8,
					// 图例配置
					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: 10 * _self.pixelRatio,
							labelWidth: 5
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					// 百分比指示 关
					dataLabel: true,
				});
			},
			touchRing3(e) {
				canvaRing3.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data + '人'
					}
				});
			},


			// 柱状图

			// getServerData4() {

			// 	let ColumnColumn = {
			// 		"categories": ["储运一队", "安装公司安装三队", "生产技术部", "地质测量科", "2徐州江北建设工程公司", "调离人员"],
			// 		"series": [{
			// 			"name":'',
			// 			"data": [15, 20, 45, 37, 43, 34]
			// 		}]
			// 	}
			// 	_self.showColumnColumn("canvasColumn",ColumnColumn);

			// },
			
			
			async getServerData4(){
				// console.log(this.departType)
				const res = await this.$myRequest({
					method:"POST",
				    url: '/personnel/depart/today',
					header: {
						'Content-Type': 'application/json', 
					},
					data:{
						type:this.departType
					}
				})
				
				console.log(res.data.data)
			
				let ColumnColumn = {
					"categories": ["储运一队", "安装公司安装三队", "生产技术部", "地质测量科", "2徐州江北建设工程公司", "调离人员"],
					"seriesData": [15, 20, 45, 37, 43, 34]
				}
				
				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,
					// #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,
							meter: {
								//这个是外层边框的宽度
								border: 4,
								//这个是内部填充颜色
								fillColor: '#E5FDC3'
							}
						}
					}
				});

			},
			touchColumn(e) {
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						return category + '：' + item.data +  item.name
					}
				});
			},


			// section-2-区域分布：矿区人数统计
			// 请求区域列表
			async getRegionList(){
				const res = await this.$myRequest({
					method:"POST",
				    url: '/personnel/region/total',
					header: {
						'Content-Type': 'application/json', 
					},
				})
				console.log(res.data.data)
				const data = res.data.data
				this.regionList = data
				console.log(this.regionList)
			},
			
			
			// 请求矿井列表
			async getMineList(area_id){
				console.log(area_id)
				const res = await this.$myRequest({
					method:"POST",
				    url: '/personnel/mine/total',
					header: {
						'Content-Type': 'application/json', 
					},
					data:{
						area_id:area_id,
						
					}
				})
				console.log(res)
				const data = res.data.data
				this.mineList = data
				console.log(this.mineList)
			},
			
					
		
		}
	}
</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>