v3-lab-xcx/pages/views/dataBoard/resourceReservation.vue

<!-- 数据看板-资源预约 -->
<template>
	<view class="resourceReservation">
		<view class="chart">
			<view class="chart-t">
				<viwe class="chart-t-l">
					<text>资源总数：</text>
					<text>{{totalNum}}</text>
				</viwe>
				<!-- <viwe class="chart-tab">
					<view class="chart-tab-li" :class="chartTabIndex==index?'tab-A':'tab-B'"
						v-for="(item,index) in chartTabList" :key="index" @click="chartTabClick(index)">{{item}}</view>
				</viwe> -->
			</view>
			<view class="chart-b">
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts0" :chartData="chartData0" />
					</view>
					<view class="chart-b-li-r">
						<view>总数: {{dataList[0].equNumber}}</view>
						<view><text></text>已使用 {{dataList[0].usedNumber}}</view>
						<view><text></text>未使用 {{dataList[0].noUseNumber}}</view>
					</view>
				</view>
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts1" :chartData="chartData1" />
					</view>
					<view class="chart-b-li-r">
						<view>总数: {{dataList[1].equNumber}}</view>
						<view><text></text>已使用 {{dataList[1].usedNumber}}</view>
						<view><text></text>未使用 {{dataList[1].noUseNumber}}</view>
					</view>
				</view>
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts2" :chartData="chartData2" />
					</view>
					<view class="chart-b-li-r">
						<view>总数: {{dataList[2].equNumber}}</view>
						<view><text></text>已使用 {{dataList[2].usedNumber}}</view>
						<view><text></text>未使用 {{dataList[2].noUseNumber}}</view>
					</view>
				</view>
				<view class="chart-b-li">
					<view class="chart-b-li-l">
						<qiun-data-charts :canvas2d="true" type="arcbar" :opts="opts3" :chartData="chartData3" />
					</view>
					<view class="chart-b-li-r">
						<view>总数: {{dataList[3].equNumber}}</view>
						<view><text></text>已使用 {{dataList[3].usedNumber}}</view>
						<view><text></text>未使用 {{dataList[3].noUseNumber}}</view>
					</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 :canvas2d="true" :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 {
		reportAppletReportApiResourceRateResourceList,
		reportAppletReportApiResourceRateAnalysisList
	} from '@/pages/api/index.js'
	export default {
		name: "resourceReservation",
		components: {

		},
		data() {
			return {
				opts0: {
					title: {
						name: "",
						fontSize: 12,
						color: "#fff"
					},
					subtitle: {
						name: "0%",
						fontSize: 10,
						color: "#FFCC00"
					},
					extra: {
						arcbar: {
							width: 6,
							direction:"ccw",
							startAngle: 1.5,
							endAngle: 1.51,
							gap: 2,
							backgroundColor: "#373745",
							// linearType:"custom",
							// customColor:["#FFCB00"],
						}
					}
				},
				opts1: {
					title: {
						name: "",
						fontSize: 12,
						color: "#fff"
					},
					subtitle: {
						name: "0%",
						fontSize: 10,
						color: "#04A44C"
					},
					extra: {
						arcbar: {
							width: 6,
							direction:"ccw",
							startAngle: 1.5,
							endAngle: 1.51,
							gap: 2,
							backgroundColor: "#373745",
							// linearType:"custom",
							// customColor:["#03F1CA"],
						}
					}
				},

				opts2: {
					title: {
						name: "",
						fontSize: 12,
						color: "#fff"
					},
					subtitle: {
						name: "0%",
						fontSize: 10,
						color: "#0283FA"
					},
					extra: {
						arcbar: {
							width: 6,
							direction:"ccw",
							startAngle: 1.5,
							endAngle: 1.51,
							gap: 2,
							backgroundColor: "#373745",
							// linearType:"custom",
							// customColor:["#01EBEE"],
						}
					}
				},
				opts3: {
					title: {
						name: "",
						fontSize: 12,
						color: "#fff"
					},
					subtitle: {
						name: "0%",
						fontSize: 10,
						color: "#0283FA"
					},
					extra: {
						arcbar: {
							width: 6,
							direction:"ccw",
							startAngle: 1.5,
							endAngle: 1.51,
							gap: 2,
							backgroundColor: "#373745",
							// linearType:"custom",
							// customColor:["#01EBEE"],
						}
					}
				},
				chartData0: {},
				chartData1: {},
				chartData2: {},
				chartData3: {},
				optsTow: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
					padding: [15, 40, 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
						}
					}
				},

				chartDataTow: {},
				chartTabList: ['日', '月', '年'],
				chartTabIndex: 0,
				chartTabListTow: ['按资费', '按机时', '按样品'],
				chartTabIndexTow: 0,
				dataList: [],
				totalNum: 0,
				chartTabListThree: ['年度', '季度', '月度'],
				chartTabIndexThree: 0,
				chartDataThree:{},
				statisticsType:"1",
			}
		},
		created() {

		},
		beforeMount() {

		},
		mounted() {

			this.reportAppletReportApiResourceRateResourceList();
			this.reportAppletReportApiResourceRateAnalysisList()
		},
		methods: {
			async reportAppletReportApiResourceRateResourceList() {
				let self = this;
				const {
					data
				} = await reportAppletReportApiResourceRateResourceList({
					type: this.type
				});
				if (data.code == 200) {
					this.dataList = data.data;
					// let colorList = ['#FF5301', '#03A951', '#018EFA', '#018EFA']
					let colorList = ['#FF5301', '#03A951', '#018EFA', '#018EFA']
					data.data.forEach(function(item, index) {
						self.totalNum += item.equNumber;
						const optsName = `opts${index}`;
						self[optsName].title.name = item.equType
						self[optsName].subtitle.name = item.useRate + '%'
						let res = {
							series: [{
								name: item.equType,
								color: colorList[index],
								data: item.useRate/100,
							}]
						};
						const propertyName = `chartData${index}`;
						self[propertyName] = JSON.parse(JSON.stringify(res));
					})
				}
			},
			async reportAppletReportApiResourceRateAnalysisList() {
				let self = this;
				const {
					data
				} = await reportAppletReportApiResourceRateAnalysisList({});
				if (data.code == 200) {
					let categories = [];
					let list = [];
					data.data.forEach((item, index)=>{
						if (index < 5) {
							if (item.equType.length > 6) {
								item.equType = item.equType.slice(0, 6) + '...';
							}
							categories.push(item.equType)
							list.push(item.equNumber)
						}
					})
					let res = {};
					if(categories[0]){
						res = {
							categories: categories,
							series: [{
								name: "",
								data: list
							}]
						};
					}else{
						res = {
							categories: ['无数据'],
							series: [{
								name: "",
								data: [0]
							}]
						};
					}
					console.log('res',res)
					self.$set(this,'chartDataThree',res);
				}
			},
			chartTabClickThree(index) {
				this.chartTabIndexThree = index;
				this.statisticsType = index + 1;
				this.reportAppletReportApiResourceRateAnalysisList();
			},
			chartTabClick(index) {
				this.chartTabIndex = index;
			},
			chartTabClickTow(index) {
				this.chartTabIndexTow = index;
			},
		},
	}
</script>

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


		.chart {
			width: 690rpx;
			height: 890rpx;
			background: #3E414F;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			overflow: hidden;
			margin: 0 30rpx;

			.chart-t {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50rpx;
				margin-top: 30rpx;
				padding: 0 24rpx 0 42rpx;
				box-sizing: border-box;

				.chart-t-l {
					>text {
						font-weight: 400;
						font-size: 30rpx;
						color: #FFFFFF;
						line-height: 42rpx;
					}

					>text:nth-of-type(1) {
						color: #FFFFFF;
					}

					>text:nth-of-type(2) {
						color: #0183FA;
					}
				}

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

					.chart-tab-li {
						width: 60rpx;
						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;
					}

				}
			}

			.chart-b {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				align-items: center;
				padding: 34rpx 74rpx 0;
				box-sizing: border-box;


				.chart-b-li {
					width: 270rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 34rpx;


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

					.chart-b-li-r {
						>view:nth-of-type(1) {
							font-size: 28rpx;
							color: #FFFFFF;
							line-height: 50rpx;
							text-align: left;
						}

						>view:nth-of-type(2) {
							display: flex;
							justify-content: flex-start;
							align-items: center;

							>text:nth-of-type(1) {
								width: 20rpx;
								height: 20rpx;
								background: #FF8C00;
								border-radius: 10rpx;
								margin-right: 12rpx;
							}

							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 50rpx;
							text-align: left;
						}

						>view:nth-of-type(3) {
							display: flex;
							justify-content: flex-start;
							align-items: center;

							>text:nth-of-type(1) {
								width: 20rpx;
								height: 20rpx;
								background: #0183FA;
								border-radius: 10rpx;
								margin-right: 12rpx;
							}

							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 50rpx;
							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>