heang

pages/views/dataBoard/dataBoard.vue

@@ -88,8 +88,8 @@
 		},
 		data() {
 			return {
+				pageType:4,
 				rectangleLogo: uni.getStorageSync('rectangleLogo'),
-				pageType:1,
 				navHeight: uni.getStorageSync('navHeight'),
 				title: '实验室安全智能监测与控制系统',
 				baseUrl: config.base_url,

pages/views/dataBoard/hazardSources.vue

@@ -4,21 +4,21 @@
 		<view class="statistics">
 			<view class="statistics-t">
 				<view class="statistics-t-l">危险源总数：</view>
-				<view class="statistics-t-r">9999 </view>
+				<view class="statistics-t-r">739 </view>
 			</view>
 			<view class="statistics-b">
 				<view class="statistics-b-li">
-					<view class="statistics-b-li-t color-A">6885 间</view>
+					<view class="statistics-b-li-t color-A">2</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">3100 间</view>
+					<view class="statistics-b-li-t color-B">30</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">14 间</view>
+					<view class="statistics-b-li-t color-C">200</view>
 					<view class="statistics-b-li-b">冷热设备数</view>
 				</view>
 			</view>
@@ -42,11 +42,13 @@
 					<view>冷热设备数</view>
 				</view>
 				<view class="table-tb" v-for="(item,index) in dataList" :key="index">
-					<view>{{item.data2}}</view>
+					<view>
+						<text :class="index==0?'sortOne':(index==1?'sortTow':(index==2?'sortThree':'sortFive'))">{{index+1}}</text>
+					</view>
 					<view>{{item.data1}}</view>
 					<view>{{item.data2}}</view>
-					<view>{{item.data2}}</view>
-					<view>{{item.data2}}</view>
+					<view>{{item.data3}}</view>
+					<view>{{item.data4}}</view>
 				</view>
 			</view>
 
@@ -74,7 +76,7 @@
 					enableScroll: false,
 					legend: {
 						position: 'top',
-						legendShape:'square',
+						legendShape: 'square',
 					},
 					xAxis: {
 						disabled: true,
@@ -101,20 +103,39 @@
 					pageSize: 10,
 				},
 				dataList: [{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '植物保护',
+						data2: '499',
+						data3: '47',
+						data4: '220',
+						data5: '137',
 					},
 					{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '资源环境',
+						data2: '199',
+						data3: '7',
+						data4: '120',
+						data5: '37',
 					},
 					{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '生命科学',
+						data2: '299',
+						data3: '71',
+						data4: '10',
+						data5: '37',
 					},
 					{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '资源环境',
+						data2: '199',
+						data3: '7',
+						data4: '120',
+						data5: '37',
+					},
+					{
+						data1: '生命科学',
+						data2: '299',
+						data3: '71',
+						data4: '10',
+						data5: '37',
 					},
 				],
 				total: 0,
@@ -138,7 +159,7 @@
 				setTimeout(() => {
 					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
 					let res = {
-						categories: ["学院学院简称", "学院学院简称", "学院学院简称", "学院学院简称", "学院学院简称"],
+						categories: ["化学与药物", "植物保护", "资源环境", "理学院", "园林艺术"],
 						series: [{
 								name: "危险品",
 								textColor: "#FFFFFF",
@@ -329,6 +350,7 @@
 				border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
 				display: flex;
 				justify-content: flex-start;
+				align-items: center;
 				background: #3E414F;
 				padding: 0 30rpx;
 				box-sizing: border-box;
@@ -349,6 +371,7 @@
 
 				>view:nth-of-type(1) {
 					width: 64rpx;
+
 				}
 
 				>view:nth-of-type(2) {
@@ -360,6 +383,66 @@
 					width: 168rpx;
 				}
 			}
+
+			.sortOne {
+				display: inline-block;
+				width: 40rpx;
+				height: 40rpx;
+				padding: 4rpx;
+				box-sizing: border-box;
+				background: rgba(255, 0, 0, 0.2);
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #FF0000;
+				line-height: 40rpx;
+				text-align: center;
+				border-radius: 20rpx;
+			}
+
+			.sortTow {
+				display: inline-block;
+				width: 40rpx;
+				height: 40rpx;
+				padding: 4rpx;
+				box-sizing: border-box;
+				background: rgba(255, 153, 0, 0.2);
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #FF9900;
+				line-height: 40rpx;
+				text-align: center;
+				border-radius: 20rpx;
+			}
+
+			.sortThree {
+				display: inline-block;
+				width: 40rpx;
+				height: 40rpx;
+				padding: 4rpx;
+				box-sizing: border-box;
+				background: rgba(255, 242, 0, 0.2);
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #FFF200;
+				line-height: 40rpx;
+				text-align: center;
+				border-radius: 20rpx;
+			}
+
+			.sortFive {
+				display: inline-block;
+				width: 40rpx;
+				height: 40rpx;
+				padding: 4rpx;
+				box-sizing: border-box;
+				background: rgba(1, 131, 250, 0.2);
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #0183FA;
+				line-height: 40rpx;
+				text-align: center;
+				border-radius: 20rpx;
+			}
 		}
 	}
 </style>

pages/views/dataBoard/hazardousChemicals.vue

@@ -4,16 +4,16 @@
 		<view class="statistics">
 			<view class="statistics-t">
 				<view class="statistics-t-l">危化品总数：</view>
-				<view class="statistics-t-r">9999 </view>
+				<view class="statistics-t-r">1455 </view>
 			</view>
 			<view class="statistics-b">
 				<view class="statistics-b-li">
-					<view class="statistics-b-li-t color-A">688.5 kg</view>
+					<view class="statistics-b-li-t color-A">1769 kg</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">3100 </view>
+					<view class="statistics-b-li-t color-B">14 </view>
 					<view class="statistics-b-li-b">今日新增数</view>
 				</view>
 				<view class="line"></view>
@@ -31,12 +31,14 @@
 			<view class="chart-t">
 				<qiun-data-charts type="funnel" :opts="opts" :echartsH5="true" :chartData="chartData" />
 			</view>
-			<view class="chart-b">
-				<view>1</view>
-				<view>化学与药学院</view>
-				<view>总数999</view>
+			<view class="chart-b" v-for="(item,index) in dataList" :key="index">
+				<view :class="index==0?'chartOne':(index==1?'chartTow':(index==2?'chartThree':'chartFive'))">
+					{{index+1}}
+				</view>
+				<view>{{item.data1}}</view>
+				<view>总数{{item.data2}}</view>
 				<view>|</view>
-				<view>今日新增19</view>
+				<view>今日新增{{item.data3}}</view>
 				<img src="@/pages/images/dataBoard/dataBoard-icon2.png">
 			</view>
 		</view>
@@ -53,11 +55,13 @@
 				</view>
 				<view class="table-tb">
 					<view class="table-tb-li" v-for="(item,index) in dataList" :key="index">
-						<view>{{item.data2}}</view>
+						<view>
+							<text :class="index==0?'sortOne':(index==1?'sortTow':(index==2?'sortThree':'sortFive'))">{{index+1}}</text>
+						</view>
 						<view>{{item.data1}}</view>
 						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
+						<view>{{item.data3}}</view>
+						<view>{{item.data4}}</view>
 					</view>
 				</view>
 			</view>
@@ -107,20 +111,39 @@
 					pageSize: 10,
 				},
 				dataList: [{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '植物保护',
+						data2: '499',
+						data3: '47',
+						data4: '220',
+						data5: '137',
 					},
 					{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '资源环境',
+						data2: '199',
+						data3: '7',
+						data4: '120',
+						data5: '37',
 					},
 					{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '生命科学',
+						data2: '299',
+						data3: '71',
+						data4: '10',
+						data5: '37',
 					},
 					{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '资源环境',
+						data2: '199',
+						data3: '7',
+						data4: '120',
+						data5: '37',
+					},
+					{
+						data1: '生命科学',
+						data2: '299',
+						data3: '71',
+						data4: '10',
+						data5: '37',
 					},
 				],
 				total: 0,
@@ -146,25 +169,30 @@
 					let res = {
 						series: [{
 							data: [{
-								"name": "一班",
+								"name": "植物保护",
 								"centerText": "50",
-								"value": 50
+								"value": 50,
+								"labelText":"总量88.88kg",
 							}, {
-								"name": "二班",
+								"name": "园林艺术",
 								"centerText": "30",
-								"value": 30
+								"value": 30,
+								"labelText":"总量88.88kg"
 							}, {
-								"name": "三班",
+								"name": "生命科学",
 								"centerText": "20",
-								"value": 20
+								"value": 20,
+								"labelText":"总量88.88kg"
 							}, {
-								"name": "四班",
+								"name": "理学院",
 								"centerText": "18",
-								"value": 18
+								"value": 18,
+								"labelText":"总量88.88kg"
 							}, {
-								"name": "五班",
+								"name": "农学院",
 								"centerText": "8",
-								"value": 8
+								"value": 8,
+								"labelText":"总量88.88kg"
 							}]
 						}]
 					};
@@ -214,7 +242,7 @@
 
 			.chart-t {
 				width: 650rpx;
-				height: 380rpx;
+				height: 452rpx;
 			}
 
 			.chart-b {
@@ -235,10 +263,8 @@
 				>view:nth-of-type(1) {
 					width: 32rpx;
 					height: 32rpx;
-					background: rgba(255, 0, 0, 0.2);
 					font-weight: 400;
 					font-size: 28rpx;
-					color: #FF0000;
 					line-height: 32rpx;
 					text-align: center;
 					margin-right: 18rpx;
@@ -280,6 +306,22 @@
 					height: 28rpx;
 				}
 			}
+			.chartOne{
+				background: rgba(255, 0, 0, 0.2);
+				color: #FF0000;
+			}
+			.chartTow{
+				background: #FFE3CC;
+				color: #FF9900;
+			}
+			.chartThree{
+				background: #FFEECC;
+				color: #FFAA00;
+			}
+			.chartFive{
+				background: #CCE6FE;
+				color: #0183FA;
+			}
 		}
 
 		.statistics {
@@ -449,6 +491,65 @@
 						width: 168rpx;
 					}
 				}
+				.sortOne {
+					display: inline-block;
+					width: 40rpx;
+					height: 40rpx;
+					padding: 4rpx;
+					box-sizing: border-box;
+					background: rgba(255, 0, 0, 0.2);
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #FF0000;
+					line-height: 40rpx;
+					text-align: center;
+					border-radius: 20rpx;
+				}
+				
+				.sortTow {
+					display: inline-block;
+					width: 40rpx;
+					height: 40rpx;
+					padding: 4rpx;
+					box-sizing: border-box;
+					background: rgba(255, 153, 0, 0.2);
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #FF9900;
+					line-height: 40rpx;
+					text-align: center;
+					border-radius: 20rpx;
+				}
+				
+				.sortThree {
+					display: inline-block;
+					width: 40rpx;
+					height: 40rpx;
+					padding: 4rpx;
+					box-sizing: border-box;
+					background: rgba(255, 242, 0, 0.2);
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #FFF200;
+					line-height: 40rpx;
+					text-align: center;
+					border-radius: 20rpx;
+				}
+				
+				.sortFive {
+					display: inline-block;
+					width: 40rpx;
+					height: 40rpx;
+					padding: 4rpx;
+					box-sizing: border-box;
+					background: rgba(1, 131, 250, 0.2);
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #0183FA;
+					line-height: 40rpx;
+					text-align: center;
+					border-radius: 20rpx;
+				}
 
 
 			}

pages/views/dataBoard/labPage.vue

@@ -16,21 +16,21 @@
 		<view class="statistics">
 			<view class="statistics-t">
 				<view class="statistics-t-l">实验室总数：</view>
-				<view class="statistics-t-r">9999 间</view>
+				<view class="statistics-t-r">364 间</view>
 			</view>
 			<view class="statistics-b">
 				<view class="statistics-b-li">
-					<view class="statistics-b-li-t color-A">6885 间</view>
+					<view class="statistics-b-li-t color-A">175 间</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">3100 间</view>
+					<view class="statistics-b-li-t color-B">130 间</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">14 间</view>
+					<view class="statistics-b-li-t color-C">19 间</view>
 					<view class="statistics-b-li-b">异常</view>
 				</view>
 			</view>
@@ -50,9 +50,9 @@
 					<view class="table-tb-li" v-for="(item,index) in dataList" :key="index">
 						<view>{{item.data1}}</view>
 						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
-						<view>{{item.data2}}</view>
+						<view>{{item.data3}}</view>
+						<view>{{item.data4}}</view>
+						<view>{{item.data5}}</view>
 					</view>
 				</view>
 			</view>
@@ -119,9 +119,9 @@
 					legend: {
 						show: false,
 					},
-					extra:{
-						tooltip:{
-							legendShape:'circle',
+					extra: {
+						tooltip: {
+							legendShape: 'circle',
 						},
 					},
 					xAxis: {
@@ -139,20 +139,39 @@
 				},
 				chartData: {},
 				dataList: [{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '植物保护',
+						data2: '499',
+						data3: '47',
+						data4: '220',
+						data5: '137',
+					},
+					{
+						data1: '资源环境',
+						data2: '199',
+						data3: '7',
+						data4: '120',
+						data5: '37',
 					},
 					{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '生命科学',
+						data2: '299',
+						data3: '71',
+						data4: '10',
+						data5: '37',
 					},
 					{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '资源环境',
+						data2: '199',
+						data3: '7',
+						data4: '120',
+						data5: '37',
 					},
 					{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '生命科学',
+						data2: '299',
+						data3: '71',
+						data4: '10',
+						data5: '37',
 					},
 				],
 				total: 0,

pages/views/dataBoard/securityHidden.vue

@@ -17,21 +17,21 @@
 				<view class="chart-b2-li">
 					<view class="chart-b2-li-t">
 						<text>1</text>
-						<text>化学与药品学院</text>
+						<text>农学院</text>
 					</view>
 					<view class="chart-b2-li-b">132</view>
 				</view>
 				<view class="chart-b2-li">
 					<view class="chart-b2-li-t">
 						<text>1</text>
-						<text>化学与药品学院</text>
+						<text>理学院</text>
 					</view>
 					<view class="chart-b2-li-b">132</view>
 				</view>
 				<view class="chart-b2-li">
 					<view class="chart-b2-li-t">
 						<text>1</text>
-						<text>化学与药品学院</text>
+						<text>生命科学</text>
 					</view>
 					<view class="chart-b2-li-b">132</view>
 				</view>
@@ -114,7 +114,10 @@
 				</view>
 				<view class="table-tb">
 					<view class="table-tb-li" v-for="(item,index) in dataList" :key="index">
-						<view>{{index}}</view>
+						<view>
+							<text
+								:class="index==0?'sortOne':(index==1?'sortTow':(index==2?'sortThree':'sortFive'))">{{index+1}}</text>
+						</view>
 						<view>{{item.data1}}</view>
 						<view>{{item.data2}}</view>
 						<view>{{item.data2}}</view>
@@ -206,20 +209,39 @@
 					pageSize: 10,
 				},
 				dataList: [{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '植物保护',
+						data2: '499',
+						data3: '47',
+						data4: '220',
+						data5: '137',
+					},
+					{
+						data1: '资源环境',
+						data2: '199',
+						data3: '7',
+						data4: '120',
+						data5: '37',
 					},
 					{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '生命科学',
+						data2: '299',
+						data3: '71',
+						data4: '10',
+						data5: '37',
 					},
 					{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '资源环境',
+						data2: '199',
+						data3: '7',
+						data4: '120',
+						data5: '37',
 					},
 					{
-						data1: '学院学院简称',
-						data2: '666',
+						data1: '生命科学',
+						data2: '299',
+						data3: '71',
+						data4: '10',
+						data5: '37',
 					},
 				],
 				total: 0,
@@ -248,6 +270,7 @@
 			//顶部tab点击
 			tabClickTow(item, index) {
 				this.curTabTow = index;
+				
 			},
 			getServerData() {
 				//模拟从服务器获取数据时的延时
@@ -289,7 +312,7 @@
 								name: "成交量2",
 								data: [190, 210, 105, 35, 27]
 							}
-			 		]
+						]
 					};
 					this.chartDataTow = JSON.parse(JSON.stringify(res));
 				}, 500);
@@ -399,6 +422,7 @@
 
 					.chart-b2-li-t {
 						margin-top: 10rpx;
+						text-align: center;
 
 						>text:nth-of-type(1) {
 							display: inline-block;
@@ -582,12 +606,72 @@
 						}
 					}
 
+					
 
 				}
 			}
 
 
 		}
+		.sortOne {
+			display: inline-block;
+			width: 40rpx;
+			height: 40rpx;
+			padding: 4rpx;
+			box-sizing: border-box;
+			background: rgba(255, 0, 0, 0.2);
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #FF0000;
+			line-height: 40rpx;
+			text-align: center;
+			border-radius: 20rpx;
+		}
+		
+		.sortTow {
+			display: inline-block;
+			width: 40rpx;
+			height: 40rpx;
+			padding: 4rpx;
+			box-sizing: border-box;
+			background: rgba(255, 153, 0, 0.2);
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #FF9900;
+			line-height: 40rpx;
+			text-align: center;
+			border-radius: 20rpx;
+		}
+		
+		.sortThree {
+			display: inline-block;
+			width: 40rpx;
+			height: 40rpx;
+			padding: 4rpx;
+			box-sizing: border-box;
+			background: rgba(255, 242, 0, 0.2);
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #FFF200;
+			line-height: 40rpx;
+			text-align: center;
+			border-radius: 20rpx;
+		}
+		
+		.sortFive {
+			display: inline-block;
+			width: 40rpx;
+			height: 40rpx;
+			padding: 4rpx;
+			box-sizing: border-box;
+			background: rgba(1, 131, 250, 0.2);
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #0183FA;
+			line-height: 40rpx;
+			text-align: center;
+			border-radius: 20rpx;
+		}
 
 		.table-tow {
 			width: 690rpx;