heyang

pages/api/index.js

@@ -351,6 +351,14 @@ export const reportAppletReportApiCageRateList  = (data) => {
         data: data,
     })
 };
+//笼位预约-实验室A-B楼
+export const reportAppletReportApiCageRateCageRateList  = (data) => {
+    return apiResquest({
+        url: `/report/applet/reportApiCageRate/cageRateList`,
+        method: 'GET',
+        data: data,
+    })
+};
 //资源预约情况
 export const reportAppletReportApiResourceRateResourceList  = (data) => {
     return apiResquest({

pages/views/dataBoard/cagePosition.vue

@@ -3,21 +3,130 @@
 	<view class="cagePosition">
 		<view class="chart">
 			<view class="chart-t">
-				<viwe class="chart-t-l">
-					<text>笼位总数：</text>
-					<text>{{totalAppointNum}}</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>
+				<img src="@/pages/images/loudong@2x.png">
+				{{subName}}
 			</view>
 			<view class="chart-b">
-				<qiun-data-charts type="ring" :opts="opts" :echartsH5="true" :chartData="chartData" />
+				<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>60</text>
+						<text>60%</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>60</text>
+						<text>60%</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>60</text>
+						<text>60%</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>60</text>
+						<text>60%</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>60</text>
+						<text>60%</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>60</text>
+						<text>60%</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>60</text>
+						<text>60%</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>60</text>
+						<text>60%</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>60</text>
+						<text>60%</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>60</text>
+						<text>60%</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>60</text>
+						<text>60%</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>60</text>
+						<text>60%</text>
+					</view>
+				</view>
 			</view>
 		</view>
 		<view class="small-title">
-			<view class="small-title-l">安全隐患统计</view>
+			<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}}
@@ -26,7 +135,7 @@
 		</view>
 		<view class="chart-tow">
 			<view class="chart-tow-b">
-				<qiun-data-charts type="radar" :opts="optsTow" :echartsH5="true" :chartData="chartDataTow" />
+				<qiun-data-charts type="radar" :opts="optsTow" :echartsH5="true" :chartData="chartDataThree" />
 			</view>
 		</view>
 	</view>
@@ -37,8 +146,8 @@
 		config
 	} from '@/api/request/config.js'
 	import {
-	reportAppletReportApiCageRateList,
-	reportAppletReportBsEquipDangerList
+		reportAppletReportBsEquipDangerList,
+		reportAppletReportApiCageRateCageRateList
 	} from '@/pages/api/index.js'
 	export default {
 		name: "cagePosition",
@@ -48,39 +157,134 @@
 		data() {
 			return {
 				opts: {
-					rotate: false,
-					rotateLock: false,
-					color: ["#10C139", "#C42EFF", "#FF8400", "#19B6B6", "#0283FA", "#3CA272", ],
-					padding: [5, 5, 5, 5],
-					dataLabel: true,
-					enableScroll: false,
-					legend: {
-						show: true,
-						position: "right",
-						fontColor:'#fff',
+					title: {
+						name: "总数",
+						fontSize: 10,
+						color: "#0183FA"
+					},
+					subtitle: {
+						name: "",
+					},
+					extra: {
+						arcbar: {
+							width: 6,
+							backgroundColor: "#BEE0FF",
+							startAngle: 0,
+							endAngle: 1.5,
+							gap: 2,
+						}
+					}
+				},
+				opts2: {
+					title: {
+						name: "空闲",
+						fontSize: 10,
+						color: "#16BF32"
+					},
+					subtitle: {
+						name: "",
 					},
+					extra: {
+						arcbar: {
+							width: 6,
+							backgroundColor: "#B1FCBE",
+							startAngle: 0,
+							endAngle: 1.5,
+							gap: 2,
+						}
+					}
+				},
+				opts3: {
 					title: {
+						name: "预约",
+						fontSize: 10,
+						color: "#03D8D0"
+					},
+					subtitle: {
 						name: "",
 					},
+					extra: {
+						arcbar: {
+							width: 6,
+							backgroundColor: "#C0F5F3",
+							startAngle: 0,
+							endAngle: 1.5,
+							gap: 2,
+						}
+					}
+				},
+				opts4: {
+					title: {
+						name: "锁定",
+						fontSize: 10,
+						color: "#FF4800"
+					},
 					subtitle: {
 						name: "",
 					},
 					extra: {
-						ring: {
-							ringWidth: 10,
-							centerColor: '#3E414F',
-							activeOpacity: 0.5,
-							customRadius:46,
-							activeRadius: 20,
-							offsetAngle: 0,
-							labelWidth: 15,
-							border: true,
-							borderWidth: 3,
-							borderColor: "#3E414F"
+						arcbar: {
+							width: 6,
+							backgroundColor: "#FFC0A7",
+							startAngle: 0,
+							endAngle: 1.5,
+							gap: 2,
+						}
+					}
+				},
+				opts5: {
+					title: {
+						name: "消杀",
+						fontSize: 10,
+						color: "#FF5F5F"
+					},
+					subtitle: {
+						name: "",
+					},
+					extra: {
+						arcbar: {
+							width: 6,
+							backgroundColor: "#FF9898",
+							startAngle: 0,
+							endAngle: 1.5,
+							gap: 2,
+						}
+					}
+				},
+				opts6: {
+					title: {
+						name: "维修",
+						fontSize: 10,
+						color: "#FF8C00"
+					},
+					subtitle: {
+						name: "",
+					},
+					extra: {
+						arcbar: {
+							width: 6,
+							backgroundColor: "#FFDDB5",
+							startAngle: 0,
+							endAngle: 1.5,
+							gap: 2,
 						}
 					}
 				},
-				chartData: {},
+				chartData0: {},
+				chartData1: {},
+				chartData2: {},
+				chartData3: {},
+				chartData4: {},
+				chartData5: {},
+				subName:'',
+				chartDataTow0: {},
+				chartDataTow1: {},
+				chartDataTow2: {},
+				chartDataTow3: {},
+				chartDataTow4: {},
+				chartDataTow5: {},
+				subNameTow:'',
+				
 				optsTow: {
 					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
 						"#ea7ccc"
@@ -102,42 +306,20 @@
 							max: 200,
 							labelShow: true,
 							border: true,
-							labelColor:'#fff',
+							labelColor: '#fff',
 						}
 					}
 				},
-				chartDataTow: {},
+				chartDataThree: {},
 				chartTabList: ['日', '月', '年'],
 				chartTabIndex: 0,
 				chartTabListTow: ['按资费', '按机时', '按样品'],
 				chartTabIndexTow: 0,
-				// 查询参数
-				queryParams: {
-					page: 1,
-					pageSize: 10,
-				},
-				dataList: [{
-						data1: '学院学院简称',
-						data2: '666',
-					},
-					{
-						data1: '学院学院简称',
-						data2: '666',
-					},
-					{
-						data1: '学院学院简称',
-						data2: '666',
-					},
-					{
-						data1: '学院学院简称',
-						data2: '666',
-					},
-				],
-				total: 0,
+
 				chartTabListThree: ['年度', '季度', '月度'],
 				chartTabIndexThree: 0,
-				type:1,//1年2季度3月度
-				totalAppointNum:0,
+				type: 1, //1年2季度3月度
+				totalAppointNum: 0,
 			}
 		},
 		created() {
@@ -147,75 +329,107 @@
 
 		},
 		mounted() {
-			this.reportAppletReportApiCageRateList()
+			this.getServerData()
+			this.reportAppletReportApiCageRateCageRateList()
 			this.reportAppletReportBsEquipDangerList()
 		},
 		methods: {
-			//隐患统计
-			async reportAppletReportApiCageRateList() {
-				let self = this;
-				const {
-					data
-				} = await reportAppletReportApiCageRateList({
-					type: this.type
-				});
-				if (data.code == 200) {
-					let list = [];
-					this.totalAppointNum=data.data.totalAppointNum;
-					list.push({
-						"name": "维修",
-						"value": data.data.reportBsCageRateList[0].repairNum,
-						"labelShow": false
-					}, {
-						"name": "预约",
-						"value": data.data.reportBsCageRateList[0].appointNum,
-						"labelShow": false
-					}, {
-						"name": "空闲",
-						"value": data.data.reportBsCageRateList[0].freeNum,
-						"labelShow": false
-					}, {
-						"name": "消杀",
-						"value": data.data.reportBsCageRateList[0].killNum,
-						"labelShow": false
-					}, {
-						"name": "锁定",
-						"value": data.data.reportBsCageRateList[0].lockedNum,
-						"labelShow": false
-					})
+			getServerData() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
 					let res = {
 						series: [{
-							data: list
+							name: "总数",
+							color: "#0183FA",
+							data: 0.8
 						}]
 					};
 					this.chartData = JSON.parse(JSON.stringify(res));
+				}, 500);
+			},
+			//笼位A-B楼
+			async reportAppletReportApiCageRateCageRateList() {
+				let self = this;
+				const {
+					data
+				} = await reportAppletReportApiCageRateCageRateList();
+				if (data.code == 200) {
+					let nameList=['总数','空闲','预约','锁定','消杀','维修']
+					let colorList=['#0183FA','#16BF32','#03D8D0','#FF4800','#FF5F5F','#FF8C00']
+					let numList=[
+						data.data.reportBsCageRateList[0].appointNum,
+						data.data.reportBsCageRateList[0].freeNum,
+						data.data.reportBsCageRateList[0].appointRate,
+						data.data.reportBsCageRateList[0].lockedNum,
+						data.data.reportBsCageRateList[0].killNum,
+						data.data.reportBsCageRateList[0].repairNum,
+					]
+					this.subName=data.data.reportBsCageRateList[0].buildName;
+					
+					let numListTow=[
+						data.data.reportBsCageRateList[1].appointNum,
+						data.data.reportBsCageRateList[1].freeNum,
+						data.data.reportBsCageRateList[1].appointRate,
+						data.data.reportBsCageRateList[1].lockedNum,
+						data.data.reportBsCageRateList[1].killNum,
+						data.data.reportBsCageRateList[1].repairNum,
+					]
+					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});
+				} = await reportAppletReportBsEquipDangerList({
+					dangerType: '2',
+					statisticsType: this.statisticsType
+				});
 				if (data.code == 200) {
-					let list=[];
-					let list2=[];
-					data.data.subjectList.forEach(function(item,index){
-						if(index<5){
+					let list = [];
+					let list2 = [];
+					data.data.subjectList.forEach(function(item, index) {
+						if (index < 5) {
 							list.push(item.subjectName)
 							list2.push(item.dangerNum)
 						}
-						
+
 					})
-					
+
 					let res = {
 						categories: list,
 						series: [{
-								name: "",
-								data: list2
-							},
-						]
+							name: "",
+							data: list2
+						}, ]
 					};
-					this.chartDataTow = JSON.parse(JSON.stringify(res));
+					this.chartDataThree = JSON.parse(JSON.stringify(res));
 				}
 			},
 			chartTabClick(index) {
@@ -226,7 +440,7 @@
 			},
 			chartTabClickThree(index) {
 				this.chartTabIndexThree = index;
-				this.statisticsType = index+1;
+				this.statisticsType = index + 1;
 				this.reportAppletReportBsEquipDangerList();
 			},
 		},
@@ -244,81 +458,61 @@
 
 		.chart {
 			width: 690rpx;
-			height: 380rpx;
+			height: 360rpx;
 			background: #3E414F;
 			border-radius: 20rpx 20rpx 20rpx 20rpx;
 			overflow: hidden;
-			margin: 0 30rpx;
+			margin: 20rpx 30rpx 0;
+			padding: 38rpx 40rpx 0;
+			box-sizing: border-box;
 
 			.chart-t {
+				width: 100%;
 				display: flex;
-				justify-content: space-between;
+				justify-content: flex-start;
 				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;
-					}
+				font-size: 30rpx;
+				color: #FFFFFF;
+				line-height: 42rpx;
+				text-align: left;
 
-					>text:nth-of-type(2) {
-						color: #0183FA;
-					}
+				>img {
+					width: 40rpx;
+					height: 34rpx;
+					margin-right: 14rpx;
 				}
+			}
 
-				.chart-tab {
-					width: 120rpx;
-					height: 50rpx;
-					border-radius: 10rpx;
-					overflow: hidden;
-					border: 1rpx solid #52545F;
+			.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-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;
+					.chart-b-li-l {
+						width: 100rpx;
+						height: 100rpx;
+						margin-right: 17rpx;
 					}
 
-					.tab-A {
-						color: #FFFFFF;
-						background: #0183FA;
-					}
-
-					.tab-B {
-						color: #999999;
-						background: none;
+					.chart-b-li-r {
+						>text {
+							display: block;
+							font-size: 28rpx;
+							color: #FFFFFF;
+							line-height: 40rpx;
+							text-align: left;
+						}
 					}
-
 				}
 			}
-
-			.chart-b {
-				width: 690rpx;
-				height: 300rpx;
-			}
 		}
 
 

pages/views/dataBoard/resourceReservation.vue

@@ -13,36 +13,40 @@
 				</viwe>
 			</view>
 			<view class="chart-b">
-				<view class="chart-b-t">
-					<view class="chart-b-t-li">
-						<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
+				<view class="chart-b-li">
+					<view class="chart-b-li-l">
+						<qiun-data-charts type="arcbar" :opts="opts0" :chartData="chartData0" />
 					</view>
-					<view class="chart-b-t-li">
-						<qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartData2" />
+					<view class="chart-b-li-r">
+						<text>60</text>
+						<text>60%</text>
 					</view>
-					<view class="chart-b-t-li">
-						<qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartData3" />
+				</view>
+				<view class="chart-b-li">
+					<view class="chart-b-li-l">
+						<qiun-data-charts type="arcbar" :opts="opts1" :chartData="chartData1" />
 					</view>
-					<view class="chart-b-t-li">
-						<qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartData3" />
+					<view class="chart-b-li-r">
+						<text>60</text>
+						<text>60%</text>
 					</view>
 				</view>
-				<view class="chart-b-b">
-					<view class="chart-b-li">
-						<view>总数：200 </view>
-						<view>预约数：50</view>
+				<view class="chart-b-li">
+					<view class="chart-b-li-l">
+						<qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartData2" />
 					</view>
-					<view class="chart-b-li">
-						<view>总数：100 </view>
-						<view>预约数：60</view>
+					<view class="chart-b-li-r">
+						<text>60</text>
+						<text>60%</text>
 					</view>
-					<view class="chart-b-li">
-						<view>总数：230 </view>
-						<view>预约数：60</view>
+				</view>
+				<view class="chart-b-li">
+					<view class="chart-b-li-l">
+						<qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartData3" />
 					</view>
-					<view class="chart-b-li">
-						<view>总数：230 </view>
-						<view>预约数：60</view>
+					<view class="chart-b-li-r">
+						<text>60</text>
+						<text>60%</text>
 					</view>
 				</view>
 			</view>
@@ -77,9 +81,7 @@
 		},
 		data() {
 			return {
-				opts: {
-					color: ["#fff", ],
-					padding: undefined,
+				opts0: {
 					title: {
 						name: "温室",
 						fontSize: 15,
@@ -88,23 +90,22 @@
 					subtitle: {
 						name: "89%",
 						fontSize: 15,
-						color: "#FF5201"
+						color: "#FFCC00"
 					},
 					extra: {
 						arcbar: {
 							type: "default",
 							width: 6,
-							backgroundColor: "#E9E9E9",
+							backgroundColor: "#FF5201",
 							startAngle: 0,
 							endAngle: 1.5,
 							gap: 2,
+							linearType: "custom"
 						}
 					}
 				},
-				chartData: {},
-				opts2: {
-					color: ["#fff", ],
-					padding: undefined,
+
+				opts1: {
 					title: {
 						name: "温室",
 						fontSize: 15,
@@ -119,17 +120,39 @@
 						arcbar: {
 							type: "default",
 							width: 6,
-							backgroundColor: "#E9E9E9",
+							backgroundColor: "#04A44C",
 							startAngle: 0,
 							endAngle: 1.5,
 							gap: 2,
+							linearType: "custom"
+						}
+					}
+				},
+
+				opts2: {
+					title: {
+						name: "温室",
+						fontSize: 15,
+						color: "#fff"
+					},
+					subtitle: {
+						name: "89%",
+						fontSize: 15,
+						color: "#0283FA"
+					},
+					extra: {
+						arcbar: {
+							type: "default",
+							width: 6,
+							backgroundColor: "#0283FA",
+							startAngle: 0,
+							endAngle: 1.5,
+							gap: 2,
+							linearType: "custom"
 						}
 					}
 				},
-				chartData2: {},
 				opts3: {
-					color: ["#fff", ],
-					padding: undefined,
 					title: {
 						name: "温室",
 						fontSize: 15,
@@ -144,13 +167,17 @@
 						arcbar: {
 							type: "default",
 							width: 6,
-							backgroundColor: "#E9E9E9",
+							backgroundColor: "#0283FA",
 							startAngle: 0,
 							endAngle: 1.5,
 							gap: 2,
+							linearType: "custom"
 						}
 					}
 				},
+				chartData0: {},
+				chartData1: {},
+				chartData2: {},
 				chartData3: {},
 				optsTow: {
 					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
@@ -177,34 +204,12 @@
 						}
 					}
 				},
+
 				chartDataTow: {},
 				chartTabList: ['日', '月', '年'],
 				chartTabIndex: 0,
 				chartTabListTow: ['按资费', '按机时', '按样品'],
 				chartTabIndexTow: 0,
-				// 查询参数
-				queryParams: {
-					page: 1,
-					pageSize: 10,
-				},
-				dataList: [{
-						data1: '学院学院简称',
-						data2: '666',
-					},
-					{
-						data1: '学院学院简称',
-						data2: '666',
-					},
-					{
-						data1: '学院学院简称',
-						data2: '666',
-					},
-					{
-						data1: '学院学院简称',
-						data2: '666',
-					},
-				],
-				total: 0,
 			}
 		},
 		created() {
@@ -214,11 +219,11 @@
 
 		},
 		mounted() {
-			
+
 			this.reportAppletReportApiResourceRateResourceList();
-			this.getServerData();
-			this.getServerData2();
-			this.getServerData3();
+			//this.getServerData();
+			//this.getServerData2();
+			//this.getServerData3();
 			this.getServerDataTow();
 		},
 		methods: {
@@ -230,7 +235,29 @@
 					type: this.type
 				});
 				if (data.code == 200) {
+					let nameList = []
+					let colorList = ['#FFCC00', '#00FFDD', '#00FFEE', '#00FFEE']
+					let numList = []
+					data.data.forEach(function(item, index) {
+						console.log(index)
+						const optsName = `opts${index}`;
+						self[optsName].title.name =  item.equType
+						
+						let res = {
+							series: [{
+								name: item.equType,
+								color: colorList[index],
+								data: item.equNumber,
+							}]
+						};
+						const propertyName = `chartData${index}`;
+						self[propertyName] = JSON.parse(JSON.stringify(res));
+						
+					})
+					
 					
+					
+
 				}
 			},
 			getServerData() {
@@ -315,7 +342,7 @@
 
 		.chart {
 			width: 690rpx;
-			height: 380rpx;
+			height: 890rpx;
 			background: #3E414F;
 			border-radius: 20rpx 20rpx 20rpx 20rpx;
 			overflow: hidden;
@@ -387,39 +414,37 @@
 			}
 
 			.chart-b {
-				width: 690rpx;
-				height: 600rpx;
-				padding: 0 30rpx;
+				display: flex;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				align-items: center;
+				padding: 0 74rpx 0;
 				box-sizing: border-box;
 
-				.chart-b-t {
+				.chart-b-li {
+					width: 270rpx;
 					display: flex;
-					justify-content: flex-start;
-					flex-wrap: wrap;
-					width: 690rpx;
-					.chart-b-t-li {
-						width: 310rpx;
-						height: 310rpx;
-					}
-				}
+					flex-direction: column;
+					align-items: center;
+					margin-bottom: 34rpx;
 
-				.chart-b-b {
-					display: flex;
-					justify-content: flex-start;
 
-					.chart-b-li {
-						flex: 1;
+					.chart-b-li-l {
+						width: 180rpx;
+						height: 180rpx;
+						margin-right: 17rpx;
+					}
 
-						>view {
-							font-weight: 400;
+					.chart-b-li-r {
+						>text {
+							display: block;
 							font-size: 28rpx;
 							color: #FFFFFF;
-							line-height: 39rpx;
-							text-align: center;
+							line-height: 40rpx;
+							text-align: left;
 						}
 					}
 				}
-
 			}
 		}