FE-lab-xcx/pages/views/dataBoard/cagePosition.vue

<!-- 数据看板-笼位预约 -->
<template>
	<view class="cagePosition">
		<view class="chart">
			<view class="chart-t">
				<img src="@/pages/images/loudong@2x.png">
				{{subName}}
			</view>
			<view class="chart-b">
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData0" />
					</view>
					<view class="chart-b-li-r">
						<text>{{dataList[0].appointNum}}</text>
						<text>{{dataList[0].appointNum}}%</text>
					</view>
				</view>
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartData1" />
					</view>
					<view class="chart-b-li-r">
						<text>{{dataList[0].freeNum}}</text>
						<text>{{dataList[0].freeRate}}%</text>
					</view>
				</view>
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartData2" />
					</view>
					<view class="chart-b-li-r">
						<text>{{dataList[0].appointNum}}</text>
						<text>{{dataList[0].appointRate}}%</text>
					</view>
				</view>
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts type="arcbar" :opts="opts4" :chartData="chartData3" />
					</view>
					<view class="chart-b-li-r">
						<text>{{dataList[0].lockedNum}}</text>
						<text>{{dataList[0].lockedNum}}%</text>
					</view>
				</view>
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts type="arcbar" :opts="opts5" :chartData="chartData4" />
					</view>
					<view class="chart-b-li-r">
						<text>{{dataList[0].killNum}}</text>
						<text>{{dataList[0].killRate}}%</text>
					</view>
				</view>
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts type="arcbar" :opts="opts6" :chartData="chartData5" />
					</view>
					<view class="chart-b-li-r">
						<text>{{dataList[0].repairNum}}</text>
						<text>{{dataList[0].repairRate}}%</text>
					</view>
				</view>
			</view>
		</view>
		<view class="chart">
			<view class="chart-t">
				<img src="@/pages/images/loudong@2x.png">
				{{subNameTow}}
			</view>
			<view class="chart-b">
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartDataTow0" />
					</view>
					<view class="chart-b-li-r">
						<text>{{dataList[0].appointNum}}</text>
						<text>{{dataList[0].appointNum}}%</text>
					</view>
				</view>
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartDataTow1" />
					</view>
					<view class="chart-b-li-r">
						<text>{{dataList[0].freeNum}}</text>
						<text>{{dataList[0].freeRate}}%</text>
					</view>
				</view>
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartDataTow2" />
					</view>
					<view class="chart-b-li-r">
						<text>{{dataList[0].appointNum}}</text>
						<text>{{dataList[0].appointRate}}%</text>
					</view>
				</view>
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts type="arcbar" :opts="opts4" :chartData="chartDataTow3" />
					</view>
					<view class="chart-b-li-r">
						<text>{{dataList[0].lockedNum}}</text>
						<text>{{dataList[0].lockedNum}}%</text>
					</view>
				</view>
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts type="arcbar" :opts="opts5" :chartData="chartDataTow4" />
					</view>
					<view class="chart-b-li-r">
						<text>{{dataList[0].killNum}}</text>
						<text>{{dataList[0].killRate}}%</text>
					</view>
				</view>
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts type="arcbar" :opts="opts6" :chartData="chartDataTow5" />
					</view>
					<view class="chart-b-li-r">
						<text>{{dataList[0].repairNum}}</text>
						<text>{{dataList[0].repairRate}}%</text>
					</view>
				</view>
			</view>
		</view>
		<view class="small-title">
			<view class="small-title-l">隐患实验室统计</view>
			<viwe class="chart-tab-tow">
				<view class="chart-tab-li" :class="chartTabIndexThree==index?'tab-A':'tab-B'"
					v-for="(item,index) in chartTabListThree" :key="index" @click="chartTabClickThree(index)">{{item}}
				</view>
			</viwe>
		</view>
		<view class="chart-tow">
			<view class="chart-tow-b">
				<qiun-data-charts :tapLegend="false" :tooltipShow="false" 
				type="bar" :opts="optsTow" :echartsH5="true" :chartData="chartDataThree" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		reportAppletReportBsEquipDangerList,
		reportAppletReportApiCageRateCageRateList
	} from '@/pages/api/index.js'
	export default {
		name: "cagePosition",
		components: {

		},
		data() {
			return {
				opts: {
					title: {
						name: "总数",
						fontSize: 10,
						color: "#0183FA"
					},
					subtitle: {
						name: "",
					},
					extra: {
						arcbar: {
							width: 6,
							direction:"ccw",
							startAngle: 1.5,
							endAngle: 1.51,
							gap: 2,
							backgroundColor: "#373745",
							linearType:"custom",
							customColor:["#0183FA"],
						}
					}
				},
				opts2: {
					title: {
						name: "空闲",
						fontSize: 10,
						color: "#16BF32"
					},
					subtitle: {
						name: "",
					},
					extra: {
						arcbar: {
							width: 6,
							direction:"ccw",
							startAngle: 1.5,
							endAngle: 1.51,
							gap: 2,
							backgroundColor: "#373745",
							linearType:"custom",
							customColor:["#16BF32"],
						}
					}
				},
				opts3: {
					title: {
						name: "预约",
						fontSize: 10,
						color: "#03D8D0"
					},
					subtitle: {
						name: "",
					},
					extra: {
						arcbar: {
							width: 6,
							direction:"ccw",
							startAngle: 1.5,
							endAngle: 1.51,
							gap: 2,
							backgroundColor: "#373745",
							linearType:"custom",
							customColor:["#03D8D0"],
						}
					}
				},
				opts4: {
					title: {
						name: "锁定",
						fontSize: 10,
						color: "#FF4800"
					},
					subtitle: {
						name: "",
					},
					extra: {
						arcbar: {
							width: 6,
							direction:"ccw",
							startAngle: 1.5,
							endAngle: 1.51,
							gap: 2,
							backgroundColor: "#373745",
							linearType:"custom",
							customColor:["#FF4800"],
						}
					}
				},
				opts5: {
					title: {
						name: "消杀",
						fontSize: 10,
						color: "#FF5F5F"
					},
					subtitle: {
						name: "",
					},
					extra: {
						arcbar: {
							width: 6,
							direction:"ccw",
							startAngle: 1.5,
							endAngle: 1.51,
							gap: 2,
							backgroundColor: "#373745",
							linearType:"custom",
							customColor:["#FF5F5F"],
						}
					}
				},
				opts6: {
					title: {
						name: "维修",
						fontSize: 10,
						color: "#FF8C00"
					},
					subtitle: {
						name: "",
					},
					extra: {
						arcbar: {
							width: 6,
							direction:"ccw",
							startAngle: 1.5,
							endAngle: 1.51,
							gap: 2,
							backgroundColor: "#373745",
							linearType:"custom",
							customColor:["#FF8C00"],
						}
					}
				},
				chartData0: {},
				chartData1: {},
				chartData2: {},
				chartData3: {},
				chartData4: {},
				chartData5: {},
				subName:'',
				chartDataTow0: {},
				chartDataTow1: {},
				chartDataTow2: {},
				chartDataTow3: {},
				chartDataTow4: {},
				chartDataTow5: {},
				subNameTow:'',
				
				optsTow: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
					padding: [15, 20, 15, 15],
					dataLabel: true,
					enableScroll: false,
					fontColor:'#ffffff',
					legend: {
						show:false,
					},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						min: 0,
						axisLine: false,
						max: 40
					},
					yAxis: {},
					extra: {
						bar: {
							type: "group",
							width: 15,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							barBorderCircle: true,
							seriesGap: 2,
							categoryGap: 2
						}
					}
				},
				chartDataThree: {},
				chartTabList: ['日', '月', '年'],
				chartTabIndex: 0,
				chartTabListTow: ['按资费', '按机时', '按样品'],
				chartTabIndexTow: 0,

				chartTabListThree: ['年度', '季度', '月度'],
				chartTabIndexThree: 0,
				type: 1, //1年2季度3月度
				totalAppointNum: 0,
				dataList:[],
			}
		},
		created() {

		},
		beforeMount() {

		},
		mounted() {
			this.reportAppletReportApiCageRateCageRateList()
			this.reportAppletReportBsEquipDangerList()
		},
		methods: {
			
			//笼位A-B楼
			async reportAppletReportApiCageRateCageRateList() {
				let self = this;
				const {
					data
				} = await reportAppletReportApiCageRateCageRateList();
				if (data.code == 200) {
					self.dataList=data.data.reportBsCageRateList;
					let nameList=['总数','空闲','预约','锁定','消杀','维修']
					let colorList=['#B5DEFC','#9FF7B2','#B5F2F0','#FFBCA2','#FC9893','#FFDCB5']
					let numList=[
						data.data.reportBsCageRateList[0].appointNum/100,
						data.data.reportBsCageRateList[0].freeNum/100,
						data.data.reportBsCageRateList[0].appointNum/100,
						data.data.reportBsCageRateList[0].lockedNum/100,
						data.data.reportBsCageRateList[0].killNum/100,
						data.data.reportBsCageRateList[0].repairNum/100,
					]
					this.subName=data.data.reportBsCageRateList[0].buildName;
					
					let numListTow=[
						data.data.reportBsCageRateList[1].appointNum/100,
						data.data.reportBsCageRateList[1].freeNum/100,
						data.data.reportBsCageRateList[1].appointNum/100,
						data.data.reportBsCageRateList[1].lockedNum/100,
						data.data.reportBsCageRateList[1].killNum/100,
						data.data.reportBsCageRateList[1].repairNum/100,
					]
					this.subNameTow=data.data.reportBsCageRateList[1].buildName;
					for(let i=0;i<6;i++){
						let res = {
							series: [{
								name: nameList[i],
								color: colorList[i],
								data: numList[i],
							}]
						};
						const propertyName = `chartData${i}`;
						this[propertyName] = JSON.parse(JSON.stringify(res));
						
						let res2 = {
							series: [{
								name: nameList[i],
								color: colorList[i],
								data: numListTow[i],
							}]
						};
						const propertyNameTow = `chartDataTow${i}`;
						this[propertyNameTow] = JSON.parse(JSON.stringify(res2));
					}
					
					
				}
			},
			
			
			async reportAppletReportBsEquipDangerList() {
				let self = this;
				const {
					data
				} = await reportAppletReportBsEquipDangerList({
					dangerType: '2',
					statisticsType: this.statisticsType
				});
				if (data.code == 200) {
					let categories = [];
					let list = [];
					data.data.subjectList.forEach((item, index)=>{
						if (index < 5) {
							if (item.subjectName.length > 6) {
								item.subjectName = item.subjectName.slice(0, 6) + '...';
							}
							categories.push(item.subjectName)
							list.push(item.dangerNum)
						}
					})
					let res = {};
					if(categories[0]){
						res = {
							categories: categories,
							series: [{
								name: "",
								data: list
							}]
						};
					}else{
						res = {
							categories: ['无数据'],
							series: [{
								name: "",
								data: [0]
							}]
						};
					}
					self.$set(this,'chartDataThree',res);
				}
			},
			chartTabClick(index) {
				this.chartTabIndex = index;
			},
			chartTabClickTow(index) {
				this.chartTabIndexTow = index;
			},
			chartTabClickThree(index) {
				this.chartTabIndexThree = index;
				this.statisticsType = index + 1;
				this.reportAppletReportBsEquipDangerList();
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.cagePosition {
		height: 100%;
		width: 100%;
		background: #363744;
		padding: 20rpx 0rpx 0;
		box-sizing: border-box;


		.chart {
			width: 690rpx;
			height: 360rpx;
			background: #3E414F;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			overflow: hidden;
			margin: 20rpx 30rpx 0;
			padding: 38rpx 40rpx 0;
			box-sizing: border-box;

			.chart-t {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 42rpx;
				text-align: left;

				>img {
					width: 40rpx;
					height: 34rpx;
					margin-right: 14rpx;
				}
			}

			.chart-b {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				align-items: center;

				.chart-b-li {
					width: 180rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 34rpx;

					.chart-b-li-l {
						width: 100rpx;
						height: 100rpx;
						margin-right: 17rpx;
					}

					.chart-b-li-r {
						>text {
							display: block;
							font-size: 28rpx;
							color: #FFFFFF;
							line-height: 40rpx;
							text-align: left;
						}
					}
				}
			}
		}


		.small-title {
			width: 690rpx;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 24rpx 30rpx;

			.small-title-l {
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 45rpx;
			}

			.chart-tab-tow {
				width: 300rpx;
				height: 50rpx;
				border-radius: 25rpx;
				overflow: hidden;
				border: 1rpx solid #52545F;
				display: flex;
				justify-content: flex-start;

				.chart-tab-li {
					width: 100rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 50rpx;
					text-align: center;
				}

				.chart-tab-li:nth-of-type(1) {
					border-right: 1rpx solid #52545F;
				}

				.chart-tab-li:nth-of-type(2) {
					border-right: 1rpx solid #52545F;
				}

				.tab-A {
					color: #FFFFFF;
					background: #0183FA;
				}

				.tab-B {
					color: #999999;
					background: none;
				}

			}
		}


		.small-title-tow {
			width: 750rpx;
			height: 80rpx;
			background: #3E414F;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx 0 30rpx;
			box-sizing: border-box;
			margin-top: 2rpx;

			.small-title-tow-l {
				flex: 1;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 42rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.small-title-tow-r {
				width: 14rpx;
				height: 8rpx;
			}

		}

		.chart-tow {
			width: 690rpx;
			height: 480rpx;
			background: #3E414F;
			border-radius: 20rpx 20rpx 20rpx 30rpx;
			margin: 26rpx 30rpx 0;

			.chart-tow-b {
				width: 690rpx;
				height: 480rpx;
			}
		}
	}
</style>