heyang

pages/views/dataBoard/cagePosition.vue

@@ -12,8 +12,8 @@
 						<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData0" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<text>{{dataList[0].appointNum}}</text>
+						<text>{{dataList[0].appointNum}}%</text>
 					</view>
 				</view>
 				<view class="chart-b-li">
@@ -21,8 +21,8 @@
 						<qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartData1" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<text>{{dataList[0].freeNum}}</text>
+						<text>{{dataList[0].freeRate}}%</text>
 					</view>
 				</view>
 				<view class="chart-b-li">
@@ -30,8 +30,8 @@
 						<qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartData2" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<text>{{dataList[0].appointNum}}</text>
+						<text>{{dataList[0].appointRate}}%</text>
 					</view>
 				</view>
 				<view class="chart-b-li">
@@ -39,8 +39,8 @@
 						<qiun-data-charts type="arcbar" :opts="opts4" :chartData="chartData3" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<text>{{dataList[0].lockedNum}}</text>
+						<text>{{dataList[0].lockedNum}}%</text>
 					</view>
 				</view>
 				<view class="chart-b-li">
@@ -48,8 +48,8 @@
 						<qiun-data-charts type="arcbar" :opts="opts5" :chartData="chartData4" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<text>{{dataList[0].killNum}}</text>
+						<text>{{dataList[0].killRate}}%</text>
 					</view>
 				</view>
 				<view class="chart-b-li">
@@ -57,8 +57,8 @@
 						<qiun-data-charts type="arcbar" :opts="opts6" :chartData="chartData5" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<text>{{dataList[0].repairNum}}</text>
+						<text>{{dataList[0].repairRate}}%</text>
 					</view>
 				</view>
 			</view>
@@ -74,8 +74,8 @@
 						<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartDataTow0" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<text>{{dataList[0].appointNum}}</text>
+						<text>{{dataList[0].appointNum}}%</text>
 					</view>
 				</view>
 				<view class="chart-b-li">
@@ -83,8 +83,8 @@
 						<qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartDataTow1" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<text>{{dataList[0].freeNum}}</text>
+						<text>{{dataList[0].freeRate}}%</text>
 					</view>
 				</view>
 				<view class="chart-b-li">
@@ -92,8 +92,8 @@
 						<qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartDataTow2" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<text>{{dataList[0].appointNum}}</text>
+						<text>{{dataList[0].appointRate}}%</text>
 					</view>
 				</view>
 				<view class="chart-b-li">
@@ -101,8 +101,8 @@
 						<qiun-data-charts type="arcbar" :opts="opts4" :chartData="chartDataTow3" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<text>{{dataList[0].lockedNum}}</text>
+						<text>{{dataList[0].lockedNum}}%</text>
 					</view>
 				</view>
 				<view class="chart-b-li">
@@ -110,8 +110,8 @@
 						<qiun-data-charts type="arcbar" :opts="opts5" :chartData="chartDataTow4" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<text>{{dataList[0].killNum}}</text>
+						<text>{{dataList[0].killRate}}%</text>
 					</view>
 				</view>
 				<view class="chart-b-li">
@@ -119,8 +119,8 @@
 						<qiun-data-charts type="arcbar" :opts="opts6" :chartData="chartDataTow5" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<text>{{dataList[0].repairNum}}</text>
+						<text>{{dataList[0].repairRate}}%</text>
 					</view>
 				</view>
 			</view>
@@ -320,6 +320,7 @@
 				chartTabIndexThree: 0,
 				type: 1, //1年2季度3月度
 				totalAppointNum: 0,
+				dataList:[],
 			}
 		},
 		created() {
@@ -329,25 +330,11 @@
 
 		},
 		mounted() {
-			this.getServerData()
 			this.reportAppletReportApiCageRateCageRateList()
 			this.reportAppletReportBsEquipDangerList()
 		},
 		methods: {
-			getServerData() {
-				//模拟从服务器获取数据时的延时
-				setTimeout(() => {
-					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
-					let res = {
-						series: [{
-							name: "总数",
-							color: "#0183FA",
-							data: 0.8
-						}]
-					};
-					this.chartData = JSON.parse(JSON.stringify(res));
-				}, 500);
-			},
+			
 			//笼位A-B楼
 			async reportAppletReportApiCageRateCageRateList() {
 				let self = this;
@@ -355,25 +342,26 @@
 					data
 				} = await reportAppletReportApiCageRateCageRateList();
 				if (data.code == 200) {
+					self.dataList=data.data.reportBsCageRateList;
 					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,
+						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,
-						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,
+						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++){

pages/views/dataBoard/resourceReservation.vue

@@ -5,12 +5,12 @@
 			<view class="chart-t">
 				<viwe class="chart-t-l">
 					<text>资源总数：</text>
-					<text>965</text>
+					<text>{{totalNum}}</text>
 				</viwe>
-				<viwe class="chart-tab">
+				<!-- <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>
+				</viwe> -->
 			</view>
 			<view class="chart-b">
 				<view class="chart-b-li">
@@ -18,8 +18,9 @@
 						<qiun-data-charts type="arcbar" :opts="opts0" :chartData="chartData0" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<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">
@@ -27,8 +28,9 @@
 						<qiun-data-charts type="arcbar" :opts="opts1" :chartData="chartData1" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<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">
@@ -36,8 +38,9 @@
 						<qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartData2" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<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">
@@ -45,22 +48,24 @@
 						<qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartData3" />
 					</view>
 					<view class="chart-b-li-r">
-						<text>60</text>
-						<text>60%</text>
+						<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>
-		</view>
-		<view class="small-title-tow">
-			<view class="small-title-tow-l">安全检查校级巡查计划标题标题标题标题标题</view>
-			<img class="small-title-tow-r" src="@/pages/images/dataBoard/icon_06.png">
+			<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 type="radar" :opts="optsTow" :echartsH5="true" :chartData="chartDataTow" />
+				<qiun-data-charts type="radar" :opts="optsTow" :echartsH5="true" :chartData="chartDataThree" />
 			</view>
 		</view>
 	</view>
@@ -83,95 +88,86 @@
 			return {
 				opts0: {
 					title: {
-						name: "温室",
-						fontSize: 15,
+						name: "",
+						fontSize: 12,
 						color: "#fff"
 					},
 					subtitle: {
-						name: "89%",
-						fontSize: 15,
+						name: "0%",
+						fontSize: 10,
 						color: "#FFCC00"
 					},
 					extra: {
 						arcbar: {
-							type: "default",
 							width: 6,
 							backgroundColor: "#FF5201",
 							startAngle: 0,
 							endAngle: 1.5,
 							gap: 2,
-							linearType: "custom"
 						}
 					}
 				},
-
 				opts1: {
 					title: {
-						name: "温室",
-						fontSize: 15,
+						name: "",
+						fontSize: 12,
 						color: "#fff"
 					},
 					subtitle: {
-						name: "89%",
-						fontSize: 15,
+						name: "0%",
+						fontSize: 10,
 						color: "#04A44C"
 					},
 					extra: {
 						arcbar: {
-							type: "default",
 							width: 6,
 							backgroundColor: "#04A44C",
 							startAngle: 0,
 							endAngle: 1.5,
 							gap: 2,
-							linearType: "custom"
 						}
 					}
 				},
 
 				opts2: {
 					title: {
-						name: "温室",
-						fontSize: 15,
+						name: "",
+						fontSize: 12,
 						color: "#fff"
 					},
 					subtitle: {
-						name: "89%",
-						fontSize: 15,
+						name: "0%",
+						fontSize: 10,
 						color: "#0283FA"
 					},
 					extra: {
 						arcbar: {
-							type: "default",
 							width: 6,
 							backgroundColor: "#0283FA",
 							startAngle: 0,
 							endAngle: 1.5,
 							gap: 2,
-							linearType: "custom"
 						}
 					}
 				},
 				opts3: {
 					title: {
-						name: "温室",
-						fontSize: 15,
+						name: "",
+						fontSize: 12,
 						color: "#fff"
 					},
 					subtitle: {
-						name: "89%",
-						fontSize: 15,
+						name: "0%",
+						fontSize: 10,
 						color: "#0283FA"
 					},
 					extra: {
 						arcbar: {
-							type: "default",
 							width: 6,
 							backgroundColor: "#0283FA",
 							startAngle: 0,
 							endAngle: 1.5,
 							gap: 2,
-							linearType: "custom"
 						}
 					}
 				},
@@ -210,6 +206,10 @@
 				chartTabIndex: 0,
 				chartTabListTow: ['按资费', '按机时', '按样品'],
 				chartTabIndexTow: 0,
+				dataList: [],
+				totalNum: 0,
+				chartTabListThree: ['年度', '季度', '月度'],
+				chartTabIndexThree: 0,
 			}
 		},
 		created() {
@@ -221,10 +221,7 @@
 		mounted() {
 
 			this.reportAppletReportApiResourceRateResourceList();
-			//this.getServerData();
-			//this.getServerData2();
-			//this.getServerData3();
-			this.getServerDataTow();
+			this.reportAppletReportBsEquipDangerList()
 		},
 		methods: {
 			async reportAppletReportApiResourceRateResourceList() {
@@ -235,91 +232,60 @@
 					type: this.type
 				});
 				if (data.code == 200) {
-					let nameList = []
+					this.dataList = data.data;
 					let colorList = ['#FFCC00', '#00FFDD', '#00FFEE', '#00FFEE']
-					let numList = []
+
 					data.data.forEach(function(item, index) {
-						console.log(index)
+						self.totalNum += item.equNumber;
 						const optsName = `opts${index}`;
-						self[optsName].title.name =  item.equType
-						
+						self[optsName].title.name = item.equType
+						self[optsName].subtitle.name = item.useRate + '%'
+
 						let res = {
 							series: [{
 								name: item.equType,
 								color: colorList[index],
-								data: item.equNumber,
+								data: item.useRate/100,
 							}]
 						};
 						const propertyName = `chartData${index}`;
 						self[propertyName] = JSON.parse(JSON.stringify(res));
-						
 					})
-					
-					
-					
-
 				}
 			},
-			getServerData() {
-				//模拟从服务器获取数据时的延时
-				setTimeout(() => {
-					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
-					let res = {
-						series: [{
-							name: "温室",
-							color: "#FF5201",
-							data: 0.8
-						}]
-					};
-					this.chartData = JSON.parse(JSON.stringify(res));
-				}, 500);
-			},
-			getServerData2() {
-				//模拟从服务器获取数据时的延时
-				setTimeout(() => {
-					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
-					let res = {
-						series: [{
-							name: "自然室",
-							color: "#04A44C",
-							data: 0.8
-						}]
-					};
-					this.chartData2 = JSON.parse(JSON.stringify(res));
-				}, 500);
-			},
-			getServerData3() {
-				//模拟从服务器获取数据时的延时
-				setTimeout(() => {
-					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+			async reportAppletReportBsEquipDangerList() {
+				let self = this;
+				const {
+					data
+				} = await reportAppletReportBsEquipDangerList({
+					dangerType: '4',
+					statisticsType: this.statisticsType
+				});
+				if (data.code == 200) {
+					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: "冷库",
-							color: "#0283FA",
-							data: 0.8
-						}]
+							name: "",
+							data: list2
+						}, ]
 					};
-					this.chartData3 = JSON.parse(JSON.stringify(res));
-				}, 500);
+					this.chartDataThree = JSON.parse(JSON.stringify(res));
+				}
 			},
-			getServerDataTow() {
-				//模拟从服务器获取数据时的延时
-				setTimeout(() => {
-					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
-					let res = {
-						categories: ["测定仪", "色谱仪", "分析仪", "光度计", "离子色谱仪"],
-						series: [{
-								name: "成交量1",
-								data: [90, 110, 165, 195, 187]
-							},
-							{
-								name: "成交量2",
-								data: [190, 210, 105, 35, 27]
-							}
-						]
-					};
-					this.chartDataTow = JSON.parse(JSON.stringify(res));
-				}, 500);
+			chartTabClickThree(index) {
+				this.chartTabIndexThree = index;
+				this.statisticsType = index + 1;
+				this.reportAppletReportBsEquipDangerList();
 			},
 			chartTabClick(index) {
 				this.chartTabIndex = index;
@@ -418,9 +384,10 @@
 				justify-content: space-between;
 				flex-wrap: wrap;
 				align-items: center;
-				padding: 0 74rpx 0;
+				padding: 34rpx 74rpx 0;
 				box-sizing: border-box;
 
+
 				.chart-b-li {
 					width: 270rpx;
 					display: flex;
@@ -436,13 +403,51 @@
 					}
 
 					.chart-b-li-r {
-						>text {
-							display: block;
+						>view:nth-of-type(1) {
 							font-size: 28rpx;
 							color: #FFFFFF;
-							line-height: 40rpx;
+							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;
+						}
+
 					}
 				}
 			}