heayng

pages/api/index.js

@@ -180,6 +180,23 @@ export const reportAppStatisticsCountStatistics = (data) => {
 		data: data,
 	})
 };
+//实验室使用、空闲、异常数量
+export const reportAppStatisticsLabStateStatistics = (data) => {
+	return apiResquest({
+    url: '/report/app/statistics/labStateStatistics',
+		method: 'GET',
+		data: data,
+	})
+};
+//实验室-图表
+export const reportAppStatisticsLabNumberPeople = (data) => {
+	return apiResquest({
+    url: '/report/app/statistics/labNumberPeople',
+		method: 'GET',
+		data: data,
+	})
+};
+
 //学院人员设备列表
 export const reportAppStatisticsPersonDeviceSafety = (data) => {
 	return apiResquest({

pages/views/dataBoard/labPage.vue

@@ -2,35 +2,35 @@
 <template>
 	<view class="labPage">
 		<view class="chart">
-			<view class="chart-t">
+			<!-- <view class="chart-t">
 				<view class="chart-t-li" @click="dateClick(index)" :class="dateIndex==index?'color-A':'color-B'"
 					v-for="(item,index) in dateList">
 					<view class="chart-t-li-t">{{item.num}}</view>
 					<view class="chart-t-li-b">{{item.letterNUm}}</view>
 				</view>
-			</view>
+			</view> -->
 			<view class="chart-b">
-				<qiun-data-charts type="line" :opts="opts" :echartsH5="true" :chartData="chartData" />
+				<qiun-data-charts type="line" :opts="opts" :echartsH5="true" :chartData="chartData" :ontouch="true" />
 			</view>
 		</view>
 		<view class="statistics">
 			<view class="statistics-t">
 				<view class="statistics-t-l">实验室总数：</view>
-				<view class="statistics-t-r">324 间</view>
+				<view class="statistics-t-r">{{labTotal}} 间</view>
 			</view>
 			<view class="statistics-b">
 				<view class="statistics-b-li">
-					<view class="statistics-b-li-t color-A">175 间</view>
+					<view class="statistics-b-li-t color-A">{{useTotal}} 间</view>
 					<view class="statistics-b-li-b">使用</view>
 				</view>
 				<view class="line"></view>
 				<view class="statistics-b-li">
-					<view class="statistics-b-li-t color-B">130 间</view>
+					<view class="statistics-b-li-t color-B">{{availableTotal}} 间</view>
 					<view class="statistics-b-li-b">空闲</view>
 				</view>
 				<view class="line"></view>
 				<view class="statistics-b-li">
-					<view class="statistics-b-li-t color-C">19 间</view>
+					<view class="statistics-b-li-t color-C">{{exceptionalTotal}} 间</view>
 					<view class="statistics-b-li-b">异常</view>
 				</view>
 			</view>
@@ -50,7 +50,9 @@
 		config
 	} from '@/api/request/config.js'
 	import {
-		reportAppStatisticsPersonDeviceSafety
+		reportAppStatisticsLabStateStatistics,
+		reportAppStatisticsLabNumberPeople,
+		reportAppStatisticsPersonDeviceSafety,
 	} from '@/pages/api/index.js'
 	export default {
 		name: "labPage",
@@ -99,9 +101,7 @@
 				opts: {
 					color: ["#0183FA", "#16BF32", "#FF8C00", "#FF0000", ],
 					padding: [0, 0, 0, 0],
-					enableScroll: false,
-					dataLabel: false,
-					dataPointShape: false,
+					enableScroll: true,
 					legend: {
 						show: true,
 						fontColor: '#fff',
@@ -116,6 +116,8 @@
 					},
 					xAxis: {
 						disableGrid: true,
+						scrollShow: true,
+						itemCount: 4,
 						fontColor: '#fff',
 					},
 					yAxis: {
@@ -160,6 +162,10 @@
 				],
 				dataList: [],
 				total: 0,
+				labTotal: 0,
+				useTotal: 0,
+				availableTotal: 0,
+				exceptionalTotal: 0,
 			}
 		},
 		created() {
@@ -170,7 +176,8 @@
 
 		},
 		mounted() {
-			this.getServerData();
+			this.reportAppStatisticsLabNumberPeople();
+			this.reportAppStatisticsLabStateStatistics();
 			this.getList();
 		},
 		methods: {
@@ -178,34 +185,67 @@
 			dateClick(index) {
 				//this.dateIndex = index;
 			},
-			getServerData() {
-				//模拟从服务器获取数据时的延时
-				setTimeout(() => {
-					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+			//实验室使用、空闲、异常数量
+			async reportAppStatisticsLabNumberPeople() {
+				let self = this;
+				const {
+					data
+				} = await reportAppStatisticsLabNumberPeople();
+				if (data.code == 200) {
+					let date = [];
+					let list = []; //实验人数
+					let list2 = []; //值日人数
+					let list3 = []; //检查次数
+					let list4 = []; //超期设备数
+					date = data.data.dateList
+					data.data.experimentList.forEach(function(item) {
+						list.push(item.num)
+					})
+					data.data.dutyList.forEach(function(item) {
+						list2.push(item.num)
+					})
+					data.data.checkList.forEach(function(item) {
+						list3.push(item.num)
+					})
+					data.data.deviceList.forEach(function(item) {
+						list4.push(item.num)
+					})
 					let res = {
-						categories: ["0:00", "6:00", "12:00", "18:00", "24:00"],
+						categories: date,
 						series: [{
 								name: "实验人数",
-								data: [35, 8, 25, 37, 4, 20]
+								data: list
 							},
 							{
 								name: "值日人数",
-								data: [70, 40, 65, 100, 44, 68]
+								data: list2
 							},
 							{
 								name: "检查次数",
-								data: [100, 80, 95, 150, 112, 132]
+								data: list3
 							},
 							{
 								name: "超期设备数",
-								data: [30, 10, 25, 10, 82, 122]
+								data: list4
 							}
 						]
 					};
 					this.chartData = JSON.parse(JSON.stringify(res));
-				}, 500);
+				}
+			},
+			//实验室使用、空闲、异常数量
+			async reportAppStatisticsLabStateStatistics() {
+				let self = this;
+				const {
+					data
+				} = await reportAppStatisticsLabStateStatistics();
+				if (data.code == 200) {
+					this.$set(this, 'labTotal', data.data.labTotal)
+					this.$set(this, 'useTotal', data.data.useTotal)
+					this.$set(this, 'availableTotal', data.data.availableTotal)
+					this.$set(this, 'exceptionalTotal', data.data.exceptionalTotal)
+				}
 			},
-
 			async getList() {
 				let self = this;
 				const {