ZhiYeJianKang_QiYe_APP/pages/management/management.vue

<template>
	<view class="app">
		
		<view class="charts-box">
			<view class="progress">
				完成情况
			</view>
			<!-- <view class="charts-box" v-if="timeordershow"> -->
			<qiun-data-charts   type="arcbar"
				:opts="opts" :chartData="chartData" v-show="!!opts.title.name"/>
		</view>
		<!-- 	<view class="charts-box" v-else>
		</view> -->
		<view class="zhiyelist">
			<view class="child" @tap=harm() style="
				border: 5rpx solid #CED4E9;" :style="{background:backgroundColor}">
				<span>
					<image src="/static/fengxian.png" alt="">
				</span>
				职业病危害风险分级
			</view>
			<view class="child" style="
				border: 5rpx solid #DDCBC4;" @tap=examination() :style="{background:backgroundColorzc}">
				<span>
					<image src="/static/pinggu .png" alt="">
				</span>
				职业卫生管理状况自查
			</view>
			<view class="child" style="
				border: 5rpx solid #D6E0CF;" @tap=perfect() :style="{background:backgroundColorws}">
				<span>
					<image src="/static/info.png" alt="">
				</span>
				企业信息完善

			</view>
			<view class="child" style="
				border: 5rpx solid #BEAEC4;" @tap=risk() :style="{background:backgroundColorbg}">
				<span>
					<image src="/static/zonghe.png" alt="">
				</span>
				综合风险评估报告
			</view>
		</view>
	</view>
</template>

<script>
	import {
		fenleiSpeed
	} from '@/api/management/management.js'
	// import uCharts from '../../uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	export default {
		data() {
			return {
				backgroundColor: '',
				backgroundColorzc: '',
				backgroundColorws: '',
				backgroundColorbg: '',
				// timeordershow: false,
				valuelist1: [],
				page: 1,
				limit: 10,
				// memu:[],
				id: '',
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "",
						fontSize: 25,
						color: "#2fc25b"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#666666"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 12,
							backgroundColor: "#B2E6FA",
							startAngle: 0.75,
							endAngle: 0.25,
							gap: 2,
							linearType: "custom"
						}
					},

				}
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getServerData();
			console.log('refresh1111');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			// this.getServerData();
		},
		onReady() {},
		created() {

		},
		mounted() {

			// this.getServerData();

		},
		onShow() {
			this.$nextTick(() => {
				this.getServerData();
			})
		},
		methods: {

			chartError(e) {
			},
			// 完成情况
			getServerData() {
				// uni.showLoading({
				// 	title: '加载中，请勿离开此页面',
				// });
				// this.opts.title.name = ""
				fenleiSpeed().then(res => {
					if (res.memu.length > 0) {
						res.memu.forEach((item) => {
							// console.log('22', item)
							if (item == '职业病危害暴露风险评估') {
								this.backgroundColor = '#D0D3E6'
							} else if (item == '职业卫生管理状况自查') {
								this.backgroundColorzc = '#EEA5A2'
							} else if (item == '企业信息完善') {
								this.backgroundColorws = '#D5DBD1'
							} else if (item == '综合风险评估报告') {
								this.backgroundColorbg = '#C6BACA'

							}
						});
					}else{
						this.backgroundColor = '#fff'
						this.backgroundColorzc = '#fff'
						this.backgroundColorws = '#fff'
						this.backgroundColorbg = '#fff'


					}
					// this.timeordershow = true
					// this.opts.title.name = ""
					this.valuelist1 = (parseFloat(res.percentage) / 100).toFixed(2)
					//模拟从服务器获取数据时的延时
					setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res1 = {
						series: [{
							name: "",
							color: "#2fc25b",
							data: this.valuelist1
						}]
					};
					this.opts.title.name = Math.round(res.percentage) + '%'
					this.chartData = JSON.parse(JSON.stringify(res1));

					// uni.hideLoading();
					}, 2000);
				})
			},
			// 职业病危害暴露风险评估
			harm() {
				uni.navigateTo({
					url: '/pages/Occupationalhazards/Occupationalhazards'
				});
			},
			// 职业卫生管理状况自查
			examination() {
				uni.navigateTo({
					url: '/pages/Health/Health'
				});
			},
			// 企业信息完善
			perfect() {
				uni.navigateTo({
					url: '/pages/perfect/perfect'
				})
			},
			// 综合风险评估报告
			risk() {
				uni.navigateTo({
					url: '/pages/risk/risk'
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	#qwe{
		height: 100px;
		width: 300px;
	}
	.app {
		color: #C3C1C1;
		font-weight: 400;
		height: 100vh;

		.charts-box {
			position: relative;
			width: 95%;
			height: 130px;
			background-color: #fff;
			// left: 18%;
			// margin-left: 12%;
			// margin-top: 40rpx;
			    margin: 20px auto;
				padding-left:50px;

		}

		.finish {
			width: 90%;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 40rpx;
			// margin-top: 5rpx;
			// text-align: center;
			margin: 0 auto;
			// border: 1rpx solid #000;
			color: #000;

		}

		.progress {
			position: absolute;
			font-size: 38rpx;
			color: #000000;
			font-weight: 700;
			top: 50%;
			padding-right: 20rpx;
			transform: translateY(-50%);
			// top: 11%;
			// left: 20%;

		}

		.zhiyelist {
			// position: absolute;
			// top: 20%;
			width: 85%;
			height: 50%;
			margin: 0 auto;

			// background-color: red;
			// display: flex;
			justify-content: space-around;
			color: #000;
			margin-top: 60rpx;

			.child {
				margin-top: 30rpx;
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;

				// text-align: center;
				font-size: 30rpx;

			}
		}

		.zhiyelist1 {
			color: #000;
			position: absolute;
			top: 45%;
			width: 100%;
			height: 250rpx;
			// background-color: red;
			display: flex;
			justify-content: space-around;

			.child {
				width: 350rpx;
				height: 200rpx;
				line-height: 200rpx;
				text-align: center;
				border: 1rpx solid #000;
			}
		}

		span {
			display: inline;
			margin-left: 7%;
			// background-color: red;


		}

		image {
			width: 40rpx;
			height: 40rpx;
			vertical-align: middle;
			margin-right: 30rpx;

		}
	}
</style>