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

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

		<view class="content">
			<view class="tip_box">
				<view class="left">
					<view class="icon">
						<image v-if="status == 1" src="./icon/01.png" mode=""></image>
						<image v-if="status == 0" src="./icon/00.png" mode=""></image>
					</view>
					<view v-if="status == 1" class="text">数据正常</view>
					<view v-if="status == 0" class="text">数据异常</view>
				</view>
				<view class="right">
					<view class="text">数据更新时间</view>
					<view class="time">{{updated_at}}</view>
				</view>
			</view>

			<!-- 当前井下人员 -->
			<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,

				// 数据正常状态与更新时间
				status: 1,
				updated_at: ""

			}
		},
		onLoad(option) {
			console.log(option.mine)
			// 矿编码
			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();


			// 获取数据正常状态
			this.$p_api.messageUpdateStatus({
				mine: this.mine
			}).then((res) => {
				// console.log(res.data.data)

				this.status = res.data.data.status
				this.updated_at = res.data.data.updated_at
			})
		},
		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;
		}
	}

	.tip_box {
		margin-top: 16rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 29rpx 0rpx rgba(59, 74, 116, 0.14);
		border-radius: 20rpx;

		box-sizing: border-box;
		padding: 0 50rpx;

		height: 132rpx;

		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;

			.icon {
				margin-right: 20rpx;

				image {
					width: 52rpx;
					height: 47rpx;
				}
			}

			.text {
				font-size: 32rpx;
				font-weight: 700;
			}
		}

		.right {
			.text {
				font-size: 26rpx;
				color: #999;
				margin-bottom: 20rpx;
			}

			.time {
				font-size: 30rpx;
			}
		}

	}
</style>