Merge branch 'master' of http://192.168.1.43:3000/v3/v3-lab-xcx

api/request/config.js

@@ -1,6 +1,6 @@
 const config = {
 	// base_url: 'http://192.168.1.43/api', //43服务器
-	base_url: 'http://192.168.1.8/api',//1.8服务器
+	//base_url: 'http://192.168.1.8/api',//1.8服务器
 	// base_url: 'http://192.168.1.9:8080',//柴
 	// base_url: 'http://192.168.1.24:8080',//林总
 	// base_url: 'http://192.168.1.7:8080',//刘波
@@ -11,9 +11,9 @@ const config = {
 	// base_url: 'http://192.168.1.29:8080',//何成
 	// base_url: 'https://demo.zjznai.com/xzgd/',
 	// base_url: 'https://lab.zjznai.com/labNhSystem/',//43服务器高升测试
-	 // base_url: 'https://lab.zjznai.com/labTest/',//1.8外网
+	  base_url: 'https://lab.zjznai.com/labTest/',//1.8外网
 	// base_url: 'https://lab.zjznai.com/labAppTest/',//43服务器线上
-	// base_url: 'https://lab.zjznai.com/appTest/',//88服务器线上
+	 //base_url: 'https://lab.zjznai.com/appTest/',//88服务器线上
 	// base_url: 'https://lab.zjznai.com/labSystem/', //矿大地址
 	// base_url: 'https://lab.zjznai.com/jdlabSystem/', //交大地址
 	// base_url: 'https://lab.zjznai.com/jndxlabSystem/', //暨大地址

pages/views/dataBoard/cagePosition.vue

@@ -0,0 +1,384 @@
+<!-- 数据看板-笼位预约 -->
+<template>
+	<view class="cagePosition">
+		<view class="chart">
+			<view class="chart-t">
+				<viwe class="chart-t-l">
+					<text>笼位总数：</text>
+					<text>333</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">
+				<qiun-data-charts type="ring" :opts="opts" :echartsH5="true" :chartData="chartData" />
+			</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>
+		<view class="chart-tow">
+			<view class="chart-tow-b">
+				<qiun-data-charts type="radar" :opts="optsTow" :echartsH5="true" :chartData="chartDataTow" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		config
+	} from '@/api/request/config.js'
+	import {
+
+	} from '@/pages_basics/api/index.js'
+	export default {
+		name: "cagePosition",
+		components: {
+
+		},
+		data() {
+			return {
+				opts: {
+					rotate: false,
+					rotateLock: false,
+					color: ["#10C139", "#FF8400", "#0183FA", "#EE6666", "#73C0DE", "#3CA272", ],
+					padding: [5, 5, 5, 5],
+					dataLabel: true,
+					enableScroll: false,
+					legend: {
+						show: true,
+						position: "right",
+					},
+					title: {
+						name: "",
+					},
+					subtitle: {
+						name: "",
+					},
+					extra: {
+						ring: {
+							ringWidth: 10,
+							centerColor: '#3E414F',
+							activeOpacity: 0.5,
+							activeRadius: 20,
+							offsetAngle: 0,
+							labelWidth: 15,
+							border: true,
+							borderWidth: 3,
+							borderColor: "#3E414F"
+						}
+					}
+				},
+				chartData: {},
+				optsTow: {
+					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+						"#ea7ccc"
+					],
+					padding: [5, 5, 5, 5],
+					dataLabel: false,
+					enableScroll: false,
+					legend: {
+						show: false,
+						position: "right",
+						lineHeight: 25
+					},
+					extra: {
+						radar: {
+							gridType: "radar",
+							gridColor: "#CCCCCC",
+							gridCount: 3,
+							opacity: 0.2,
+							max: 200,
+							labelShow: true,
+							border: true
+						}
+					}
+				},
+				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() {
+
+		},
+		beforeMount() {
+
+		},
+		mounted() {
+			this.getServerData()
+			this.getServerDataTow()
+		},
+		methods: {
+			getServerData() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+					let res = {
+						series: [{
+							data: [{
+								"name": "一班",
+								"value": 50,
+								"labelShow": false
+							}, {
+								"name": "二班",
+								"value": 30,
+								"labelShow": false
+							}, {
+								"name": "三班",
+								"value": 20,
+								"labelShow": false
+							}, ]
+						}]
+					};
+					this.chartData = JSON.parse(JSON.stringify(res));
+				}, 500);
+			},
+			getServerDataTow() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+					let res = {
+						categories: ["维度1", "维度2", "维度3", "维度4", "维度5"],
+						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);
+			},
+			chartTabClick(index) {
+				this.chartTabIndex = index;
+			},
+			chartTabClickTow(index) {
+				this.chartTabIndexTow = index;
+			},
+		},
+	}
+</script>
+
+<style lang="stylus" scoped>
+	.cagePosition {
+		height: 100%;
+		width: 100%;
+		background: #363744;
+		padding: 20rpx 0rpx 0;
+		box-sizing: border-box;
+
+
+		.chart {
+			width: 690rpx;
+			height: 380rpx;
+			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 {
+				width: 690rpx;
+				height: 300rpx;
+			}
+		}
+
+
+		.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>

pages/views/dataBoard/daYiReservation.vue

@@ -0,0 +1,699 @@
+<!-- 数据看板-大仪预约 -->
+<template>
+	<view class="daYiReservation">
+		<view class="chart">
+			<view class="chart-t">
+				<viwe class="chart-t-l">
+					<text>设备总数：</text>
+					<text>333</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">
+				<qiun-data-charts type="ring" :opts="opts" :echartsH5="true" :chartData="chartData" />
+			</view>
+		</view>
+		<view class="statistics">
+			<view class="statistics-b">
+				<view class="statistics-b-li">
+					<view class="statistics-b-li-t">
+						<text class="color-A">9999</text>
+						<text class="color-A">小时</text>
+					</view>
+					<view class="statistics-b-li-b">使用机时</view>
+				</view>
+				<view class="line"></view>
+				<view class="statistics-b-li">
+					<view class="statistics-b-li-t">
+						<text class="color-B">¥</text>
+						<text class="color-B">56460.63</text>
+					</view>
+					<view class="statistics-b-li-b">预约费用</view>
+				</view>
+				<view class="line"></view>
+				<view class="statistics-b-li">
+					<view class="statistics-b-li-t">
+						<text class="color-C">333</text>
+						<text class="color-C">个</text>
+					</view>
+					<view class="statistics-b-li-b">预约费用</view>
+				</view>
+			</view>
+		</view>
+		<view class="small-title">
+			<view class="small-title-l">预约使用排行TOP10</view>
+			<viwe class="chart-tab-tow">
+				<view class="chart-tab-li" :class="chartTabIndexTow==index?'tab-A':'tab-B'"
+					v-for="(item,index) in chartTabListTow" :key="index" @click="chartTabClickTow(index)">{{item}}
+				</view>
+			</viwe>
+		</view>
+		<!--  -->
+		<view class="table">
+			<view class="table-border">
+				<view class="table-th">
+					<view class="table-th-li">
+						<view>排行</view>
+						<view>设备名称</view>
+						<view>使用机时</view>
+						<view>预约费用</view>
+						<view>测试样品</view>
+					</view>
+				</view>
+				<view class="table-tb">
+					<view class="table-tb-li" v-for="(item,index) in dataList" :key="index">
+						<view>{{index}}</view>
+						<view>{{item.data2}}</view>
+						<view>{{item.data2}}</view>
+						<view>{{item.data2}}</view>
+						<view>{{item.data2}}</view>
+					</view>
+				</view>
+			</view>
+
+		</view>
+		<!--  -->
+		<view class="small-title">
+			<view class="small-title-l">一年内空闲率排行TOP10</view>
+		</view>
+		<view class="table-tow">
+			<view class="table-border">
+				<view class="table-th">
+					<view class="table-th-li">
+						<view>排行</view>
+						<view>设备名称</view>
+						<view>预约时长</view>
+						<view>空闲率</view>
+					</view>
+				</view>
+				<view class="table-tb">
+					<view class="table-tb-li" v-for="(item,index) in dataList" :key="index">
+						<view>{{index}}</view>
+						<view>{{item.data2}}</view>
+						<view>{{item.data2}}</view>
+						<view>{{item.data2}}</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>
+		<view class="chart-tow">
+			<view class="chart-tow-b">
+				<qiun-data-charts type="radar" :opts="optsTow" :echartsH5="true" :chartData="chartDataTow" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		config
+	} from '@/api/request/config.js'
+	import {
+
+	} from '@/pages_basics/api/index.js'
+	export default {
+		name: "daYiReservation",
+		components: {
+
+		},
+		data() {
+			return {
+				opts: {
+					rotate: false,
+					rotateLock: false,
+					color: ["#10C139", "#FF8400", "#0183FA", "#EE6666", "#73C0DE", "#3CA272", ],
+					padding: [5, 5, 5, 5],
+					dataLabel: true,
+					enableScroll: false,
+					legend: {
+						show: true,
+						position: "right",
+					},
+					title: {
+						name: "",
+					},
+					subtitle: {
+						name: "",
+					},
+					extra: {
+						ring: {
+							ringWidth: 10,
+							centerColor: '#3E414F',
+							activeOpacity: 0.5,
+							activeRadius: 20,
+							offsetAngle: 0,
+							labelWidth: 15,
+							border: true,
+							borderWidth: 3,
+							borderColor: "#3E414F"
+						}
+					}
+				},
+				chartData: {},
+				optsTow: {
+					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+						"#ea7ccc"
+					],
+					padding: [5, 5, 5, 5],
+					dataLabel: false,
+					enableScroll: false,
+					legend: {
+						show: false,
+						position: "right",
+						lineHeight: 25
+					},
+					extra: {
+						radar: {
+							gridType: "radar",
+							gridColor: "#CCCCCC",
+							gridCount: 3,
+							opacity: 0.2,
+							max: 200,
+							labelShow: true,
+							border: true
+						}
+					}
+				},
+				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() {
+
+		},
+		beforeMount() {
+
+		},
+		mounted() {
+			this.getServerData()
+			this.getServerDataTow()
+		},
+		methods: {
+			getServerData() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+					let res = {
+						series: [{
+							data: [{
+								"name": "一班",
+								"value": 50,
+								"labelShow": false
+							}, {
+								"name": "二班",
+								"value": 30,
+								"labelShow": false
+							}, {
+								"name": "三班",
+								"value": 20,
+								"labelShow": false
+							}, ]
+						}]
+					};
+					this.chartData = JSON.parse(JSON.stringify(res));
+				}, 500);
+			},
+			getServerDataTow() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+					let res = {
+						categories: ["维度1", "维度2", "维度3", "维度4", "维度5"],
+						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);
+			},
+			chartTabClick(index) {
+				this.chartTabIndex = index;
+			},
+			chartTabClickTow(index) {
+				this.chartTabIndexTow = index;
+			},
+		},
+	}
+</script>
+
+<style lang="stylus" scoped>
+	.daYiReservation {
+		height: 100%;
+		width: 100%;
+		background: #363744;
+		padding: 20rpx 0rpx 0;
+		box-sizing: border-box;
+
+
+		.chart {
+			width: 690rpx;
+			height: 380rpx;
+			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 {
+				width: 690rpx;
+				height: 300rpx;
+			}
+		}
+
+		.statistics {
+			width: 750rpx;
+			height: 120rpx;
+			background: #3E414F;
+			margin-top: 20rpx;
+
+			.statistics-b {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.statistics-b-li {
+					flex: 1;
+					text-align: center;
+
+					.statistics-b-li-t {
+						margin-top: 10rpx;
+
+						>text {
+							font-weight: 400;
+							font-size: 36rpx;
+							line-height: 50rpx;
+						}
+
+						>text:nth-of-type(1) {
+							font-size: 36rpx;
+						}
+
+						>text:nth-of-type(2) {
+							font-size: 24rpx;
+						}
+
+					}
+
+					.statistics-b-li-b {
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #FFFFFF;
+						line-height: 34rpx;
+						margin-top: 9rpx;
+					}
+				}
+
+				.line {
+					width: 2rpx;
+					height: 30rpx;
+					background: #D8D8D8;
+				}
+			}
+
+			.color-A {
+				color: #0183FA;
+			}
+
+			.color-B {
+				color: #05FFE6;
+			}
+
+			.color-C {
+				color: #FFAA00;
+			}
+		}
+
+		.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;
+				}
+
+			}
+		}
+
+		.table {
+			width: 720rpx;
+			margin-top: 20rpx;
+			margin-left: 30rpx;
+
+			.table-border {
+				overflow: auto;
+
+				.table-th {
+					width: 860rpx;
+					height: 80rpx;
+					background: rgba(162, 162, 162, 0.2);
+					border-radius: 20rpx 20rpx 0rpx 0rpx;
+					padding: 0 30rpx;
+					box-sizing: border-box;
+
+					.table-th-li {
+						height: 80rpx;
+						display: flex;
+						justify-content: flex-start;
+
+						>view {
+							font-weight: 400;
+							font-size: 30rpx;
+							color: #FFFFFF;
+							line-height: 80rpx;
+							text-align: center;
+							margin-right: 38rpx;
+							width: 120rpx;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+
+						>view:nth-of-type(1) {
+							width: 80rpx;
+						}
+
+						>view:nth-of-type(2) {
+							width: 168rpx;
+						}
+					}
+				}
+
+				.table-tb {
+					width: 860rpx;
+					border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
+					background: #3E414F;
+					padding: 0 30rpx;
+					box-sizing: border-box;
+
+					.table-tb-li {
+						height: 80rpx;
+						border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
+						display: flex;
+						justify-content: flex-start;
+
+						>view {
+							font-weight: 400;
+							font-size: 28rpx;
+							color: #FFFFFF;
+							line-height: 80rpx;
+							text-align: center;
+							margin-right: 38rpx;
+							width: 120rpx;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+
+						}
+
+						>view:nth-of-type(1) {
+							width: 80rpx;
+						}
+
+						>view:nth-of-type(2) {
+							width: 168rpx;
+						}
+
+					}
+				}
+
+			}
+		}
+
+		.table-tow {
+			width: 690rpx;
+			margin-top: 20rpx;
+			margin-left: 30rpx;
+
+			.table-border {
+				overflow: auto;
+
+				.table-th {
+					width: 690rpx;
+					height: 80rpx;
+					background: rgba(162, 162, 162, 0.2);
+					border-radius: 20rpx 20rpx 0rpx 0rpx;
+					padding: 0 30rpx;
+					box-sizing: border-box;
+
+					.table-th-li {
+						height: 80rpx;
+						display: flex;
+						justify-content: flex-start;
+
+						>view {
+							font-weight: 400;
+							font-size: 30rpx;
+							color: #FFFFFF;
+							line-height: 80rpx;
+							text-align: center;
+							margin-right: 38rpx;
+							width: 120rpx;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+
+						>view:nth-of-type(1) {
+							width: 80rpx;
+						}
+
+						>view:nth-of-type(2) {
+							width: 168rpx;
+						}
+					}
+				}
+
+				.table-tb {
+					width: 690rpx;
+					border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
+					background: #3E414F;
+					padding: 0 30rpx;
+					box-sizing: border-box;
+
+					.table-tb-li {
+						height: 80rpx;
+						border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
+						display: flex;
+						justify-content: flex-start;
+
+						>view {
+							font-weight: 400;
+							font-size: 28rpx;
+							color: #FFFFFF;
+							line-height: 80rpx;
+							text-align: center;
+							margin-right: 38rpx;
+							width: 120rpx;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+
+						}
+
+						>view:nth-of-type(1) {
+							width: 80rpx;
+						}
+
+						>view:nth-of-type(2) {
+							width: 168rpx;
+						}
+
+					}
+				}
+
+			}
+		}
+
+		.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>

pages/views/dataBoard/dataBoard.vue

@@ -5,7 +5,7 @@
 		<view class="header">
 			<img class="header-bg" src="@/pages/images/dataBoard/dataBoard-icon1.png">
 			<view class="header-t">
-				<img class="header-t-l" src="@/pages/images/icon_aqbj.png">
+				<img class="header-t-l" :src="rectangleLogo">
 				<view class="header-t-r">管理面板</view>
 			</view>
 			<view class="header-b">
@@ -45,8 +45,11 @@
 		<security-hidden v-if="pageType==4"></security-hidden>
 		<warning-dispose v-if="pageType==5"></warning-dispose>
 		<equipment-control v-if="pageType==6"></equipment-control>
+		<da-yi-reservation v-if="pageType==7"></da-yi-reservation>
+		<cage-position v-if="pageType==8"></cage-position>
+		<resource-reservation v-if="pageType==9"></resource-reservation>
 	</view>
-	
+
 </template>
 
 
@@ -60,6 +63,9 @@
 	import {securityHidden} from '@/pages/views/dataBoard/securityHidden.vue'
 	import {warningDispose} from '@/pages/views/dataBoard/warningDispose.vue'
 	import {equipmentControl} from '@/pages/views/dataBoard/equipmentControl.vue'
+	import {daYiReservation} from '@/pages/views/dataBoard/daYiReservation.vue'
+	import {cagePosition} from '@/pages/views/dataBoard/cagePosition.vue'
+	import {resourceReservation} from '@/pages/views/dataBoard/resourceReservation.vue'
 	import {
 		config
 	} from '@/api/request/config.js'
@@ -76,10 +82,14 @@
 			securityHidden,
 			warningDispose,
 			equipmentControl,
+			daYiReservation,
+			cagePosition,
+			resourceReservation,
 		},
 		data() {
 			return {
-				pageType:6,
+				rectangleLogo: uni.getStorageSync('rectangleLogo'),
+				pageType:1,
 				navHeight: uni.getStorageSync('navHeight'),
 				title: '实验室安全智能监测与控制系统',
 				baseUrl: config.base_url,
@@ -117,6 +127,7 @@
 			//顶部tab点击
 			tabClickTow(item, index) {
 				this.curTabTow = index;
+				this.pageType=index+1
 			},
 
 			async getList() {
@@ -278,7 +289,7 @@
 				text-align center;
 				padding-top: 18rpx;
 				box-sizing: border-box;
-		
+
 				.tabTitle_tow_text {
 					display: inline-block;
 					font-size: 32rpx;
@@ -287,12 +298,12 @@
 					color: #FFFFFF;
 					line-height: 46rpx;
 					position: relative;
-		
+
 					&.on {
 						color: #0183FA;
 					}
 				}
-		
+
 				.tabTitle_tow_across {
 					width: 50rpx;
 					height: 4rpx;
@@ -301,12 +312,12 @@
 					margin-left: 33%;
 					margin-top: 16rpx;
 					display none;
-		
+
 					&.on {
 						display block;
 					}
 				}
-		
+
 			}
 		}
 	}

pages/views/dataBoard/equipmentControl.vue

@@ -25,7 +25,7 @@
 		</view>
 		<view class="chart">
 			<view class="chart-b">
-
+				<qiun-data-charts type="bar" :opts="opts" :echartsH5="true" :chartData="chartData" />
 			</view>
 		</view>
 		<view class="small-title">
@@ -34,7 +34,7 @@
 		</view>
 		<view class="chart-tow">
 			<view class="chart-tow-b">
-		
+				<qiun-data-charts type="funnel" :opts="optsTow" :echartsH5="true" :chartData="chartDataTow" />
 			</view>
 		</view>
 		<view class="small-title">
@@ -46,7 +46,7 @@
 		</view>
 		<view class="chart-three">
 			<view class="chart-three-b">
-		
+				<qiun-data-charts type="pie" :opts="optsThree" :echartsH5="true" :chartData="chartDataThree" />
 			</view>
 		</view>
 		<view class="chart-title">
@@ -77,6 +77,75 @@
 		},
 		data() {
 			return {
+				opts: {
+					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+						"#ea7ccc"
+					],
+					padding: [15, 30, 0, 5],
+					enableScroll: false,
+					legend: {
+						show: false,
+					},
+					xAxis: {
+						disabled: true,
+						disableGrid: true,
+						axisLine: false,
+					},
+					yAxis: {
+						disabled: false,
+						disableGrid: true,
+						data: [],
+					},
+					extra: {
+						bar: {
+							type: "group",
+							width: 20,
+							meterBorde: 1,
+							meterFillColor: "#FFFFFF",
+							activeBgColor: "#000000",
+							activeBgOpacity: 0.08,
+							linearType: "custom",
+							barBorderCircle: true,
+							seriesGap: 2,
+							categoryGap: 2
+						}
+					}
+				},
+				chartData: {},
+				optsTow: {
+					color: ["#0183FA", "#38F0F0", "#2CCA73", "#FC6E21", "#FF4646", ],
+					legend: {
+						show: false,
+					},
+					padding: [15, 15, 10, 15],
+					enableScroll: false,
+					extra: {
+						funnel: {
+							type: 'triangle',
+							border: false,
+							labelAlign: "right",
+						}
+					}
+				},
+				chartDataTow: {},
+				optsThree: {
+					color: ["#10C139", "#FF8400", "#00FFE6", "#0183FA", "#73C0DE", "#3CA272",],
+					legend: {
+						show: false,
+					},
+					padding: [5, 5, 5, 5],
+					enableScroll: false,
+					extra: {
+						pie: {
+							offsetAngle: 0,
+							labelWidth: 15,
+							border: true,
+							borderWidth: 3,
+							borderColor: "#3E414F",
+						}
+					}
+				},
+				chartDataThree: {},
 				// 查询参数
 				queryParams: {
 					page: 1,
@@ -85,28 +154,26 @@
 				dataList: [{
 						data1: '13.4加热及制冷装置管理',
 						data2: '40%',
-						child:[
-							{
-								name:'13.4.1 冰箱、烘箱、马弗炉等周围堆放杂物',
+						child: [{
+								name: '13.4.1 冰箱、烘箱、马弗炉等周围堆放杂物',
 							},
 							{
-								name:'13.4.3 烘箱叠放',
+								name: '13.4.3 烘箱叠放',
 							},
 						]
 					},
 					{
-							data1: '13.4加热及制冷装置管理',
-							data2: '40%',
-							child:[
-								{
-									name:'13.4.1 冰箱、烘箱、马弗炉等周围堆放杂物',
-								},
-								{
-									name:'13.4.3 烘箱叠放',
-								},
-							]
-						},
-					
+						data1: '13.4加热及制冷装置管理',
+						data2: '40%',
+						child: [{
+								name: '13.4.1 冰箱、烘箱、马弗炉等周围堆放杂物',
+							},
+							{
+								name: '13.4.3 烘箱叠放',
+							},
+						]
+					},
+
 				],
 				total: 0,
 			}
@@ -117,17 +184,90 @@
 		beforeMount() {
 
 		},
-		mounted() {},
+		mounted() {
+			this.getServerData();
+			this.getServerDataTow();
+			this.getServerDataThree();
+		},
 		methods: {
+			getServerData() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+					let res = {
+						categories: ["化学与药学院", "化学与药学院", "化学与药学院", "化学与药学院", "化学与药学院"],
+						series: [{
+							name: "目标值",
+							textColor: '#fff',
+							data: [35, 36, 31, 33, 13]
+						}, ]
+					};
+					this.chartData = JSON.parse(JSON.stringify(res));
+				}, 500);
+			},
+			getServerDataTow() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+					let res = {
+						series: [{
+							data: [{
+								"name": "一班",
+								"value": 50
+							}, {
+								"name": "二班",
+								"value": 40,
+							}, {
+								"name": "三班",
+								"value": 30,
+							}, {
+								"name": "四班",
+								"value": 20,
+							}, {
+								"name": "五班",
+								"value": 10,
+							}]
+						}]
+					};
+					this.chartDataTow = JSON.parse(JSON.stringify(res));
+				}, 500);
+			},
+			getServerDataThree() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+					let res = {
+						series: [{
+							data: [{
+								"name": "一班",
+								"value": 50
+							}, {
+								"name": "二班",
+								"value": 30
+							}, {
+								"name": "三班",
+								"value": 20
+							}, {
+								"name": "四班",
+								"value": 18
+							}, {
+								"name": "五班",
+								"value": 8
+							}]
+						}]
+					};
+					this.chartDataThree = JSON.parse(JSON.stringify(res));
+				}, 500);
+			},
 			dateClick(index) {
 				this.dateIndex = index;
 			},
-			goPage(type){
-				if(type=='overdue'){
+			goPage(type) {
+				if (type == 'overdue') {
 					uni.navigateTo({
 						url: '/pages/views/dataBoard/equipmentControlOverdue?pageType=1'
 					});
-				}else if(type=='life'){
+				} else if (type == 'life') {
 					uni.navigateTo({
 						url: '/pages/views/dataBoard/equipmentControlOverdue?pageType=2'
 					});
@@ -138,7 +278,6 @@
 </script>
 
 <style lang="stylus" scoped>
-	
 	.equipmentControl {
 		height: 100%;
 		width: 100%;
@@ -231,17 +370,20 @@
 				height: 476rpx;
 			}
 		}
-		.chart-tow{
+
+		.chart-tow {
 			width: 690rpx;
 			height: 436rpx;
 			background: #3E414F;
 			border-radius: 20rpx 20rpx 20rpx 20rpx;
 			margin: 0 30rpx;
-			.chart-tow-b{
+
+			.chart-tow-b {
 				width: 690rpx;
 				height: 436rpx;
 			}
 		}
+
 		.small-title-tow {
 			width: 750rpx;
 			height: 80rpx;
@@ -252,7 +394,7 @@
 			padding: 0 20rpx 0 30rpx;
 			box-sizing: border-box;
 			margin-top: 2rpx;
-		
+
 			.small-title-tow-l {
 				flex: 1;
 				font-weight: 400;
@@ -263,72 +405,82 @@
 				text-overflow: ellipsis;
 				white-space: nowrap;
 			}
-		
+
 			.small-title-tow-r {
 				width: 14rpx;
 				height: 8rpx;
 			}
-		
+
 		}
-		.chart-three{
+
+		.chart-three {
 			width: 690rpx;
 			height: 394rpx;
 			background: #3E414F;
 			border-radius: 20rpx 20rpx 0rpx 0rpx;
 			margin: 34rpx 30rpx 0;
-			.chart-three-b{
+
+			.chart-three-b {
 				width: 690rpx;
 				height: 394rpx;
 			}
 		}
-		.chart-title{
+
+		.chart-title {
 			width: 689rpx;
 			height: 80rpx;
-			background: rgba(162,162,162,0.2);
-			border-radius: 0rpx 0rpx 0rpx 0rpx;	
+			background: rgba(162, 162, 162, 0.2);
+			border-radius: 0rpx 0rpx 0rpx 0rpx;
 			padding: 0 70rpx 0 38rpx;
 			box-sizing: border-box;
 			margin: 0 30rpx;
 			display: flex;
 			justify-content: space-between;
-			.chart-title-l{
+
+			.chart-title-l {
 				font-weight: 400;
 				font-size: 30rpx;
 				color: #FFFFFF;
 				line-height: 80rpx;
 			}
-			.chart-title-r{
+
+			.chart-title-r {
 				font-weight: 400;
 				font-size: 30rpx;
 				color: #FFFFFF;
 				line-height: 80rpx;
 			}
 		}
-		.list{
+
+		.list {
 			margin: 0 30rpx;
-			padding:0 30rpx;
+			padding: 0 30rpx;
 			box-sizing: border-box;
-			.list-title{
+
+			.list-title {
 				height: 80rpx;
 				display: flex;
 				justify-content: space-between;
-				border-bottom: 1rpx dashed rgba(216,216,216,0.2);
+				border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
 				padding: 0 38rpx 0 10rpx;
 				box-sizing: border-box;
-				.list-title-l{
+
+				.list-title-l {
 					font-weight: 400;
 					font-size: 28rpx;
 					color: #FFFFFF;
 					line-height: 80rpx;
 				}
-				.list-title-r{
+
+				.list-title-r {
 					font-weight: 400;
 					font-size: 28rpx;
 					color: #0183FA;
 					line-height: 80rpx;
 				}
 			}
-			.list-li{
+
+			.list-li {
 				height: 80rpx;
 				display: flex;
 				justify-content: space-between;
@@ -344,7 +496,7 @@
 	}
 </style>
 <style>
-	page{
+	page {
 		background-color: #363744 !important;
 	}
 </style>

pages/views/dataBoard/equipmentControlOverdue.vue

@@ -2,7 +2,7 @@
 <template>
 	<view class="equipmentControl">
 		<!-- 超期服役排行 -->
-		<view class="table">
+		<view class="table" v-if="pageType==1">
 			<view class="table-border">
 				<view class="table-th">
 					<view class="table-th-li">
@@ -23,7 +23,7 @@
 			</view>
 		</view>
 		<!-- 设备使用寿命 -->
-		<view class="table-tow">
+		<view class="table-tow" v-if="pageType==2">
 			<view class="table-border">
 				<view class="table-th">
 					<view class="table-th-li">
@@ -36,7 +36,7 @@
 				</view>
 				<view class="table-tb">
 					<view class="table-tb-li" v-for="(item,index) in dataList" :key="index">
-						<view>{{index}}</view>
+						<view>{{item.data1}}</view>
 						<view>{{item.data2}}</view>
 						<view>{{item.data2}}</view>
 						<view>{{item.data2}}</view>
@@ -62,6 +62,7 @@
 		},
 		data() {
 			return {
+				pageType: 1,
 				// 查询参数
 				queryParams: {
 					page: 1,
@@ -88,10 +89,19 @@
 			}
 		},
 		onLoad(option) {
-			 if(option.pageType){
-			 		
-			 }
-		  },
+			if (option.pageType) {
+				this.pageType = option.pageType;
+				if (this.pageType == 1) {
+					uni.setNavigationBarTitle({
+						title: '超期服役排行'
+					})
+				}else if(this.pageType == 2){
+					uni.setNavigationBarTitle({
+						title:'设备使用寿命统计'
+					})
+				}
+			}
+		},
 		created() {
 
 		},
@@ -117,6 +127,7 @@
 		.table {
 			width: 750rpx;
 			margin-top: 20rpx;
+
 			.table-border {
 				overflow: auto;
 
@@ -149,12 +160,15 @@
 							width: 90rpx;
 							text-align: left;
 						}
+
 						>view:nth-of-type(2) {
 							width: 168rpx;
 						}
+
 						>view:nth-of-type(3) {
 							width: 190rpx;
 						}
+
 						>view:nth-of-type(4) {
 							width: 300rpx;
 						}
@@ -192,12 +206,15 @@
 							width: 90rpx;
 							text-align: left;
 						}
+
 						>view:nth-of-type(2) {
 							width: 168rpx;
 						}
+
 						>view:nth-of-type(3) {
 							width: 190rpx;
 						}
+
 						>view:nth-of-type(4) {
 							width: 300rpx;
 						}
@@ -207,24 +224,26 @@
 			}
 
 		}
+
 		.table-tow {
 			width: 750rpx;
 			margin-top: 20rpx;
+
 			.table-border {
 				overflow: auto;
-		
+
 				.table-th {
 					width: 860rpx;
 					height: 80rpx;
 					background: rgba(162, 162, 162, 0.2);
 					padding: 0 30rpx;
 					box-sizing: border-box;
-		
+
 					.table-th-li {
 						height: 80rpx;
 						display: flex;
 						justify-content: flex-start;
-		
+
 						>view {
 							font-weight: 400;
 							font-size: 30rpx;
@@ -237,28 +256,28 @@
 							text-overflow: ellipsis;
 							white-space: nowrap;
 						}
-		
+
 						>view:nth-of-type(1) {
 							width: 168rpx;
 							text-align: left;
 						}
-						
+
 					}
 				}
-		
+
 				.table-tb {
-					width: 750rpx;
+					width: 860rpx;
 					border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
 					background: #3E414F;
 					padding: 0 30rpx;
 					box-sizing: border-box;
-		
+
 					.table-tb-li {
 						height: 80rpx;
 						border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
 						display: flex;
 						justify-content: flex-start;
-		
+
 						>view {
 							font-weight: 400;
 							font-size: 28rpx;
@@ -270,18 +289,18 @@
 							overflow: hidden;
 							text-overflow: ellipsis;
 							white-space: nowrap;
-		
+
 						}
-		
+
 						>view:nth-of-type(1) {
 							width: 168rpx;
 							text-align: left;
 						}
-		
+
 					}
 				}
 			}
-		
+
 		}
 	}
 </style>

pages/views/dataBoard/hazardSources.vue

@@ -28,7 +28,9 @@
 			<img class="small-title-r" src="@/pages/images/icon_wdwg_gd.png">
 		</view>
 		<view class="chart">
-			<view class="chart-b"></view>
+			<view class="chart-b">
+				<qiun-data-charts type="bar" :opts="opts" :echartsH5="true" :chartData="chartData" />
+			</view>
 		</view>
 		<view class="table">
 			<view class="table-border">
@@ -66,36 +68,33 @@
 		},
 		data() {
 			return {
-				dateList: [{
-						num: '1',
-						letterNUm: 'Mon',
-					},
-					{
-						num: '2',
-						letterNUm: 'Tue',
-					},
-					{
-						num: '3',
-						letterNUm: 'Wed',
-					},
-					{
-						num: '4',
-						letterNUm: 'Thur',
+				opts: {
+					color: ["#FF8C00", "#0183FA", ],
+					padding: [2, 20, 0, 0],
+					enableScroll: false,
+					legend: {
+						position: 'top',
+						legendShape:'square',
 					},
-					{
-						num: '5',
-						letterNUm: 'Fri',
-					},
-					{
-						num: '6',
-						letterNUm: 'Sat',
+					xAxis: {
+						disabled: true,
+						axisLine: false,
+						disableGrid: true,
 					},
-					{
-						num: '7',
-						letterNUm: 'Sun',
-					},
-				],
-				dateIndex: 0,
+					yAxis: {},
+					extra: {
+						bar: {
+							type: "stack",
+							width: 30,
+							meterBorde: 1,
+							meterFillColor: "#FFFFFF",
+							activeBgColor: "#000000",
+							activeBgOpacity: 0.08,
+							categoryGap: 2
+						}
+					}
+				},
+				chartData: {},
 				// 查询参数
 				queryParams: {
 					page: 1,
@@ -127,11 +126,34 @@
 		beforeMount() {
 
 		},
-		mounted() {},
+		mounted() {
+			this.getServerData();
+		},
 		methods: {
 			dateClick(index) {
 				this.dateIndex = index;
 			},
+			getServerData() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+					let res = {
+						categories: ["学院学院简称", "学院学院简称", "学院学院简称", "学院学院简称", "学院学院简称"],
+						series: [{
+								name: "危险品",
+								textColor: "#FFFFFF",
+								data: [35, 36, 31, 33, 13]
+							},
+							{
+								name: "冷热设备与特种设备",
+								textColor: "#FFFFFF",
+								data: [18, 27, 21, 24, 6]
+							}
+						]
+					};
+					this.chartData = JSON.parse(JSON.stringify(res));
+				}, 500);
+			},
 		},
 	}
 </script>
@@ -143,10 +165,12 @@
 		background: #363744;
 		padding: 20rpx 30rpx 0;
 		box-sizing: border-box;
+
 		.small-title {
 			display: flex;
 			justify-content: space-between;
-			.small-title-l{
+
+			.small-title-l {
 				font-weight: 400;
 				font-size: 32rpx;
 				color: #FFFFFF;
@@ -154,11 +178,12 @@
 				text-align: left;
 				margin: 28rpx 0;
 			}
-			.small-title-r{
+
+			.small-title-r {
 				width: 15rpx;
 				height: 18rpx;
 			}
-			
+
 		}
 
 		.chart {
@@ -168,7 +193,8 @@
 			border-radius: 20rpx 20rpx 20rpx 20rpx;
 			padding: 34rpx 30rpx 26rpx;
 			box-sizing: border-box;
-			.chart-b{
+
+			.chart-b {
 				width: 630rpx;
 				height: 344rpx;
 			}
@@ -285,15 +311,17 @@
 				>view:nth-of-type(1) {
 					width: 64rpx;
 				}
+
 				>view:nth-of-type(2) {
 					width: 168rpx;
 				}
-				>view:last-child{
+
+				>view:last-child {
 					margin-right: 0;
 					width: 168rpx;
 				}
 			}
-			
+
 
 			.table-tb {
 				width: 860rpx;
@@ -322,10 +350,12 @@
 				>view:nth-of-type(1) {
 					width: 64rpx;
 				}
+
 				>view:nth-of-type(2) {
 					width: 168rpx;
 				}
-				>view:last-child{
+
+				>view:last-child {
 					margin-right: 0;
 					width: 168rpx;
 				}

pages/views/dataBoard/hazardousChemicals.vue

@@ -29,7 +29,7 @@
 		</view>
 		<view class="chart">
 			<view class="chart-t">
-
+				<qiun-data-charts type="funnel" :opts="opts" :echartsH5="true" :chartData="chartData" />
 			</view>
 			<view class="chart-b">
 				<view>1</view>
@@ -80,36 +80,27 @@
 		},
 		data() {
 			return {
-				dateList: [{
-						num: '1',
-						letterNUm: 'Mon',
-					},
-					{
-						num: '2',
-						letterNUm: 'Tue',
-					},
-					{
-						num: '3',
-						letterNUm: 'Wed',
-					},
-					{
-						num: '4',
-						letterNUm: 'Thur',
-					},
-					{
-						num: '5',
-						letterNUm: 'Fri',
-					},
-					{
-						num: '6',
-						letterNUm: 'Sat',
-					},
-					{
-						num: '7',
-						letterNUm: 'Sun',
+				opts: {
+					color: ['#FF0000','#D40000','#FF5900','#FF9900','#FF9900'],
+					legend:{
+						show:false,
 					},
-				],
-				dateIndex: 0,
+					padding: [15, 15, 6, 15],
+					enableScroll: false,
+					extra: {
+						funnel: {
+							activeOpacity: 0.3,
+							activeWidth: 10,
+							border: false,
+							borderWidth: 2,
+							borderColor: "#FFFFFF",
+							fillOpacity: 1,
+							labelAlign: "right",
+							type: "pyramid",
+						}
+					}
+				},
+				chartData: {},
 				// 查询参数
 				queryParams: {
 					page: 1,
@@ -141,11 +132,45 @@
 		beforeMount() {
 
 		},
-		mounted() {},
+		mounted() {
+			this.getServerData();
+		},
 		methods: {
 			dateClick(index) {
 				this.dateIndex = index;
 			},
+			getServerData() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+					let res = {
+						series: [{
+							data: [{
+								"name": "一班",
+								"centerText": "50",
+								"value": 50
+							}, {
+								"name": "二班",
+								"centerText": "30",
+								"value": 30
+							}, {
+								"name": "三班",
+								"centerText": "20",
+								"value": 20
+							}, {
+								"name": "四班",
+								"centerText": "18",
+								"value": 18
+							}, {
+								"name": "五班",
+								"centerText": "8",
+								"value": 8
+							}]
+						}]
+					};
+					this.chartData = JSON.parse(JSON.stringify(res));
+				}, 500);
+			},
 		},
 	}
 </script>
@@ -162,6 +187,7 @@
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
+
 			.small-title-l {
 				font-weight: 400;
 				font-size: 32rpx;
@@ -395,6 +421,7 @@
 					border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
 					display: flex;
 					justify-content: flex-start;
+
 					>view {
 						font-weight: 400;
 						font-size: 28rpx;
@@ -406,24 +433,24 @@
 						overflow: hidden;
 						text-overflow: ellipsis;
 						white-space: nowrap;
-					
+
 					}
-					
+
 					>view:nth-of-type(1) {
 						width: 64rpx;
 					}
-					
+
 					>view:nth-of-type(2) {
 						width: 168rpx;
 					}
-					
+
 					>view:last-child {
 						margin-right: 0;
 						width: 168rpx;
 					}
 				}
 
-				
+
 			}
 		}
 	}

pages/views/dataBoard/labPage.vue

@@ -10,7 +10,7 @@
 				</view>
 			</view>
 			<view class="chart-b">
-				<!-- <qiun-data-charts type="tarea" :chartData="chartData" background="none" /> -->
+				<qiun-data-charts type="line" :opts="opts" :echartsH5="true" :chartData="chartData" />
 			</view>
 		</view>
 		<view class="statistics">
@@ -110,6 +110,34 @@
 					page: 1,
 					pageSize: 10,
 				},
+				opts: {
+					color: ["#0183FA", "#16BF32", "#FF8C00", "#FF0000", ],
+					padding: [15, 0, 0, 0],
+					enableScroll: false,
+					dataLabel: false,
+					dataPointShape: false,
+					legend: {
+						show: false,
+					},
+					extra:{
+						tooltip:{
+							legendShape:'circle',
+						},
+					},
+					xAxis: {
+						disableGrid: true,
+						fontColor: '#999999',
+					},
+					yAxis: {
+						gridType: "dash",
+						dashLength: 2,
+						data: [{
+							axisLine: false,
+							fontColor: '#999999',
+						}]
+					},
+				},
+				chartData: {},
 				dataList: [{
 						data1: '学院学院简称',
 						data2: '666',
@@ -136,11 +164,40 @@
 		beforeMount() {
 
 		},
-		mounted() {},
+		mounted() {
+			this.getServerData();
+		},
 		methods: {
 			dateClick(index) {
 				this.dateIndex = index;
 			},
+			getServerData() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+					let res = {
+						categories: ["0:00", "6:00", "12:00", "18:00", "24:00"],
+						series: [{
+								name: "实验人数",
+								data: [35, 8, 25, 37, 4, 20]
+							},
+							{
+								name: "值日人数",
+								data: [70, 40, 65, 100, 44, 68]
+							},
+							{
+								name: "检查次数",
+								data: [100, 80, 95, 150, 112, 132]
+							},
+							{
+								name: "超期设备数",
+								data: [30, 10, 25, 10, 82, 122]
+							}
+						]
+					};
+					this.chartData = JSON.parse(JSON.stringify(res));
+				}, 500);
+			},
 		},
 	}
 </script>
@@ -189,16 +246,21 @@
 				}
 
 				.color-A {
+					background: #0183FA;
+					border-radius: 10rpx 10rpx 10rpx 10rpx;
+
 					.chart-t-li-t {
-						color: #0183FA;
+						color: #FFFFFF;
 					}
 
 					.chart-t-li-b {
-						color: #0183FA;
+						color: #FFFFFF;
 					}
 				}
 
 				.color-B {
+					background: none;
+
 					.chart-t-li-t {
 						color: #FFFFFF;
 					}

pages/views/dataBoard/resourceReservation.vue

@@ -0,0 +1,502 @@
+<!-- 数据看板-资源预约 -->
+<template>
+	<view class="resourceReservation">
+		<view class="chart">
+			<view class="chart-t">
+				<viwe class="chart-t-l">
+					<text>资源总数：</text>
+					<text>333</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-t">
+					<view class="chart-b-t-li">
+						<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
+					</view>
+					<view class="chart-b-t-li">
+						<qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartData2" />
+					</view>
+					<view class="chart-b-t-li">
+						<qiun-data-charts type="arcbar" :opts="opts3" :chartData="chartData3" />
+					</view>
+				</view>
+				<view class="chart-b-b">
+					<view class="chart-b-li">
+						<view>总数：333 </view>
+						<view>预约数：60</view>
+					</view>
+					<view class="chart-b-li">
+						<view>总数：333 </view>
+						<view>预约数：60</view>
+					</view>
+					<view class="chart-b-li">
+						<view>总数：333 </view>
+						<view>预约数：60</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>
+		<view class="chart-tow">
+			<view class="chart-tow-b">
+				<qiun-data-charts type="radar" :opts="optsTow" :echartsH5="true" :chartData="chartDataTow" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		config
+	} from '@/api/request/config.js'
+	import {
+
+	} from '@/pages_basics/api/index.js'
+	export default {
+		name: "resourceReservation",
+		components: {
+
+		},
+		data() {
+			return {
+				opts: {
+					color: ["#fff",],
+					padding: undefined,
+					title: {
+						name: "温室",
+						fontSize: 15,
+						color: "#fff"
+					},
+					subtitle: {
+						name: "89%",
+						fontSize: 15,
+						color: "#FF5201"
+					},
+					extra: {
+						arcbar: {
+							type: "default",
+							width: 6,
+							backgroundColor: "#E9E9E9",
+							startAngle: 0,
+							endAngle: 1.5,
+							gap: 2,
+						}
+					}
+				},
+				chartData: {},
+				opts2: {
+					color: ["#fff",],
+					padding: undefined,
+					title: {
+						name: "温室",
+						fontSize: 15,
+						color: "#fff"
+					},
+					subtitle: {
+						name: "89%",
+						fontSize: 15,
+						color: "#04A44C"
+					},
+					extra: {
+						arcbar: {
+							type: "default",
+							width: 6,
+							backgroundColor: "#E9E9E9",
+							startAngle: 0,
+							endAngle: 1.5,
+							gap: 2,
+						}
+					}
+				},
+				chartData2: {},
+				opts3: {
+					color: ["#fff",],
+					padding: undefined,
+					title: {
+						name: "温室",
+						fontSize: 15,
+						color: "#fff"
+					},
+					subtitle: {
+						name: "89%",
+						fontSize: 15,
+						color: "#0283FA"
+					},
+					extra: {
+						arcbar: {
+							type: "default",
+							width: 6,
+							backgroundColor: "#E9E9E9",
+							startAngle: 0,
+							endAngle: 1.5,
+							gap: 2,
+						}
+					}
+				},
+				chartData3: {},
+				optsTow: {
+					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+						"#ea7ccc"
+					],
+					padding: [5, 5, 5, 5],
+					dataLabel: false,
+					enableScroll: false,
+					legend: {
+						show: false,
+						position: "right",
+						lineHeight: 25
+					},
+					extra: {
+						radar: {
+							gridType: "radar",
+							gridColor: "#CCCCCC",
+							gridCount: 3,
+							opacity: 0.2,
+							max: 200,
+							labelShow: true,
+							border: true
+						}
+					}
+				},
+				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() {
+
+		},
+		beforeMount() {
+
+		},
+		mounted() {
+			this.getServerData();
+			this.getServerData2();
+			this.getServerData3();
+			this.getServerDataTow();
+		},
+		methods: {
+			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(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+					let res = {
+						series: [{
+							name: "冷库",
+							color: "#0283FA",
+							data: 0.8
+						}]
+					};
+					this.chartData3 = JSON.parse(JSON.stringify(res));
+				}, 500);
+			},
+			getServerDataTow() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+					let res = {
+						categories: ["维度1", "维度2", "维度3", "维度4", "维度5"],
+						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);
+			},
+			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: 380rpx;
+			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 {
+				width: 690rpx;
+				height: 300rpx;
+				padding: 0 30rpx;
+				box-sizing: border-box;
+
+				.chart-b-t {
+					display: flex;
+					justify-content: flex-start;
+					width: 690rpx;
+
+					.chart-b-t-li {
+						width: 210rpx;
+						height: 210rpx;
+					}
+				}
+
+				.chart-b-b {
+					display: flex;
+					justify-content: flex-start;
+
+					.chart-b-li {
+						flex: 1;
+
+						>view {
+							font-weight: 400;
+							font-size: 28rpx;
+							color: #FFFFFF;
+							line-height: 39rpx;
+							text-align: center;
+						}
+					}
+				}
+
+			}
+		}
+
+
+		.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>

pages/views/dataBoard/securityHidden.vue

@@ -10,7 +10,35 @@
 				<view class="chart-t-li" :class="chartIndex==index?'color-A':'color-B'" @click="chartClick(index)"
 					v-for="(item,index) in chartTitle">{{item}}</view>
 			</view>
-			<view class="chart-b"></view>
+			<view class="chart-b" v-if="chartIndex==0">
+				<qiun-data-charts type="column" :opts="opts" :echartsH5="true" :chartData="chartData" />
+			</view>
+			<view class="chart-b2" v-if="chartIndex==0">
+				<view class="chart-b2-li">
+					<view class="chart-b2-li-t">
+						<text>1</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>
+					</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>
+					</view>
+					<view class="chart-b2-li-b">132</view>
+				</view>
+			</view>
+			<view class="chart-b-tow" v-if="chartIndex==1 || chartIndex==2">
+				<qiun-data-charts type="radar" :opts="optsTow" :echartsH5="true" :chartData="chartDataTow" />
+			</view>
 		</view>
 		<scroll-view scroll-x @scrolltolower="scrollGet">
 			<view class="tabTitle_tow">
@@ -96,7 +124,7 @@
 						<view>{{item.data2}}</view>
 						<view>{{item.data2}}</view>
 					</view>
-		
+
 				</view>
 			</view>
 		</view>
@@ -117,9 +145,61 @@
 		},
 		data() {
 			return {
-				chartType:3,
+				chartType: 3,
 				chartTitle: ['安全隐患排行', '一级指标排行', '暂无法整改'],
 				chartIndex: 0,
+				opts: {
+					color: ["#149F12", "#FF0000", "#FF9D25", ],
+					padding: [15, 15, 4, 5],
+					enableScroll: false,
+					legend: {
+						position: 'top',
+						fontColor: '#fff',
+					},
+					xAxis: {
+						disableGrid: true,
+						disabled: true,
+						axisLine: false,
+					},
+					yAxis: {
+						disableGrid: true,
+						data: [{
+							disabled: true,
+						}]
+					},
+					extra: {
+						column: {
+							type: "group",
+							width: 14,
+							linearType: "opacity",
+							linearOpacity: 0.6,
+						}
+					}
+				},
+				optsTow: {
+					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+						"#ea7ccc"
+					],
+					padding: [5, 5, 5, 5],
+					dataLabel: false,
+					enableScroll: false,
+					legend: {
+						show: false,
+					},
+					extra: {
+						radar: {
+							gridType: "radar",
+							gridColor: "#CCCCCC",
+							gridCount: 3,
+							opacity: 0.2,
+							max: 200,
+							labelShow: true,
+							border: true
+						}
+					}
+				},
+				chartData: {},
+				chartDataTow: {},
 				// 查询参数
 				queryParams: {
 					page: 1,
@@ -153,18 +233,67 @@
 		beforeMount() {
 
 		},
-		mounted() {},
+		mounted() {
+			this.getServerData();
+
+		},
 		methods: {
-			scrollGet(){
-				
+			scrollGet() {
+
 			},
 			chartClick(index) {
 				this.chartIndex = index;
+				this.getServerDataTow();
 			},
 			//顶部tab点击
 			tabClickTow(item, index) {
 				this.curTabTow = index;
 			},
+			getServerData() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+					let res = {
+						categories: ["化学与药品学院", "化学与药品学院", "化学与药品学院"],
+						series: [{
+								name: "已整改",
+								textColor: '#fff',
+								data: [35, 36, 31, ]
+							},
+							{
+								name: "未整改",
+								textColor: '#fff',
+								data: [18, 27, 21, ]
+							},
+							{
+								name: "暂无法整改",
+								textColor: '#fff',
+								data: [8, 7, 2, ]
+							}
+						]
+					};
+					this.chartData = JSON.parse(JSON.stringify(res));
+				}, 500);
+			},
+			getServerDataTow() {
+				//模拟从服务器获取数据时的延时
+				setTimeout(() => {
+					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+					let res = {
+						categories: ["维度1", "维度2", "维度3", "维度4", "维度5"],
+						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);
+			},
 		},
 	}
 </script>
@@ -252,6 +381,59 @@
 			}
 
 			.chart-b {
+				width: 630rpx;
+				height: 334rpx;
+				margin-left: 30rpx;
+			}
+
+			.chart-b2 {
+				width: 630rpx;
+				margin: 0 30rpx;
+				height: 106rx;
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+
+				.chart-b2-li {
+					flex: 1;
+
+					.chart-b2-li-t {
+						margin-top: 10rpx;
+
+						>text:nth-of-type(1) {
+							display: inline-block;
+							width: 24rpx;
+							height: 24rpx;
+							background: #FF0000;
+							border-radius: 6rpx 6rpx 6rpx 6rpx;
+							margin-right: 10rpx;
+							font-weight: 400;
+							font-size: 22rpx;
+							color: #FFFFFF;
+							line-height: 24rpx;
+							text-align: center;
+						}
+
+						>text:nth-of-type(2) {
+							font-weight: 400;
+							font-size: 24rpx;
+							color: #FFFFFF;
+							line-height: 34rpx;
+						}
+					}
+
+					.chart-b2-li-b {
+						margin-top: 10rpx;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #FFFFFF;
+						line-height: 34rpx;
+						text-align: center;
+					}
+				}
+			}
+
+			.chart-b-tow {
 				width: 630rpx;
 				height: 440rpx;
 				margin-left: 30rpx;
@@ -410,6 +592,7 @@
 		.table-tow {
 			width: 690rpx;
 			margin: 20rpx 0 0 30rpx;
+
 			.table-border {
 				width: auto;
 				overflow: auto;
@@ -451,7 +634,7 @@
 
 						>view:last-child {
 							margin-right: 0;
-							
+
 						}
 					}
 
@@ -489,13 +672,14 @@
 							text-align: left;
 							margin-right: 0;
 						}
-						
+
 						>view:nth-of-type(2) {
 							width: 270rpx;
 						}
+
 						>view:last-child {
 							margin-right: 0;
-							
+
 						}
 					}
 
@@ -505,25 +689,27 @@
 
 
 		}
+
 		.table-three {
 			width: 720rpx;
 			margin: 20rpx 0 0 30rpx;
-		
+
 			.table-border {
 				width: auto;
 				overflow: auto;
-		
+
 				.table-th {
 					width: 1510rpx;
 					padding: 0 30rpx;
 					box-sizing: border-box;
 					background: rgba(162, 162, 162, 0.2);
 					border-radius: 20rpx 20rpx 0rpx 0rpx;
+
 					.table-th-li {
 						height: 80rpx;
 						display: flex;
 						justify-content: flex-start;
-		
+
 						>view {
 							font-weight: 400;
 							font-size: 30rpx;
@@ -536,38 +722,38 @@
 							text-overflow: ellipsis;
 							white-space: nowrap;
 						}
-		
+
 						>view:nth-of-type(1) {
 							width: 116rpx;
 							text-align: left;
 							margin-right: 0;
 						}
-		
+
 						>view:nth-of-type(2) {
 							width: 168rpx;
 						}
-		
+
 						>view:last-child {
 							margin-right: 0;
 							width: 228rpx;
 						}
 					}
-		
+
 				}
-		
-		
+
+
 				.table-tb {
 					width: 1510rpx;
 					background: #3E414F;
 					padding: 0 30rpx;
 					box-sizing: border-box;
-		
+
 					.table-tb-li {
 						height: 80rpx;
 						border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
 						display: flex;
 						justify-content: flex-start;
-		
+
 						>view {
 							font-weight: 400;
 							font-size: 28rpx;
@@ -579,30 +765,30 @@
 							overflow: hidden;
 							text-overflow: ellipsis;
 							white-space: nowrap;
-		
+
 						}
-		
+
 						>view:nth-of-type(1) {
 							width: 116rpx;
 							text-align: left;
 							margin-right: 0;
 						}
-		
+
 						>view:nth-of-type(2) {
 							width: 168rpx;
 						}
-		
+
 						>view:last-child {
 							margin-right: 0;
 							width: 228rpx;
 						}
 					}
-		
-		
+
+
 				}
 			}
-		
-		
+
+
 		}
 
 	}

pages/views/dataBoard/warningDispose.vue

@@ -2,15 +2,18 @@
 <template>
 	<view class="warningDispose">
 		<view class="chart">
-			<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>
+			<img class="chart-bg" src="@/pages/images/dataBoard/dataBoard-icon4.png">
+			<view class="chart-n">
+				<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 class="chart-b">
+					<!-- <qiun-data-charts type="tarea" :chartData="chartData" background="none" /> -->
 				</view>
-			</view>
-			<view class="chart-b">
-				<!-- <qiun-data-charts type="tarea" :chartData="chartData" background="none" /> -->
 			</view>
 		</view>
 		<view class="statistics">
@@ -28,7 +31,7 @@
 				<view class="statistics-b-li">
 					<view class="statistics-b-li-t-tow">
 						<text class="color-B">-0.9%</text>
-						<img  src="@/pages/images/dataBoard/dataBoard-icon3.png">
+						<img src="@/pages/images/dataBoard/dataBoard-icon3.png">
 					</view>
 					<view class="statistics-b-li-b">环比增长</view>
 				</view>
@@ -157,68 +160,85 @@
 		.chart {
 			width: 750rpx;
 			height: 500rpx;
-			background: #3E414F;
-			padding: 34rpx 30rpx 26rpx;
-			box-sizing: border-box;
 
-			.chart-t {
-				display: flex;
-				justify-content: space-between;
+			position: relative;
 
-				.chart-t-li {
-					width: 76rpx;
-					height: 100rpx;
+			.chart-bg {
+				width: 750rpx;
+				height: 500rpx;
+				position: absolute;
+				z-index: 100;
+			}
+			.chart-n{
+				padding: 34rpx 30rpx 26rpx;
+				box-sizing: border-box;
+				position: absolute;
+				z-index: 200;
+				.chart-t {
+					display: flex;
+					justify-content: space-between;
+
+					.chart-t-li {
+						width: 76rpx;
+						height: 100rpx;
+
+						.chart-t-li-t {
+							font-weight: 400;
+							font-size: 30rpx;
 
-					.chart-t-li-t {
-						font-weight: 400;
-						font-size: 30rpx;
+							line-height: 42rpx;
+							text-align: center;
+							margin-top: 8rpx;
+						}
 
-						line-height: 42rpx;
-						text-align: center;
-						margin-top: 8rpx;
+						.chart-t-li-b {
+							font-weight: 400;
+							font-size: 28rpx;
+
+							line-height: 39rpx;
+							text-align: center;
+							margin-top: 4rpx;
+						}
 					}
 
-					.chart-t-li-b {
-						font-weight: 400;
-						font-size: 28rpx;
+					.color-A {
+						background: #0183FA;
+						border-radius: 10rpx 10rpx 10rpx 10rpx;
+						.chart-t-li-t {
+							color: #FFFFFF;
+						}
 
-						line-height: 39rpx;
-						text-align: center;
-						margin-top: 4rpx;
+						.chart-t-li-b {
+							color: #FFFFFF;
+						}
 					}
-				}
 
-				.color-A {
-					.chart-t-li-t {
-						color: #0183FA;
-					}
+					.color-B {
+						background: none;
+						.chart-t-li-t {
+							color: #FFFFFF;
+						}
 
-					.chart-t-li-b {
-						color: #0183FA;
+						.chart-t-li-b {
+							color: #FFFFFF;
+						}
 					}
 				}
 
-				.color-B {
-					.chart-t-li-t {
-						color: #FFFFFF;
-					}
-
-					.chart-t-li-b {
-						color: #FFFFFF;
-					}
+				.chart-b {
+					width: 690rpx;
+					height: 350rpx;
 				}
 			}
 
-			.chart-b {
-				width: 690rpx;
-				height: 350rpx;
-			}
+
 		}
 
 		.statistics {
 			width: 750rpx;
 			height: 120rpx;
 			background: #3E414F;
+
 			.statistics-b {
 				display: flex;
 				justify-content: space-between;
@@ -227,38 +247,43 @@
 				.statistics-b-li {
 					flex: 1;
 					text-align: center;
-					.statistics-b-li-t{
+
+					.statistics-b-li-t {
 						font-weight: 400;
 						font-size: 36rpx;
 						color: #FFFFFF;
 						line-height: 50rpx;
 						margin-top: 10rpx;
-						
+
 					}
-					
+
 					.statistics-b-li-t-tow {
 						margin-top: 10rpx;
 						display: flex;
 						justify-content: center;
 						align-items: center;
-						>text{
+
+						>text {
 							font-weight: 400;
 							font-size: 28rpx;
 							line-height: 50rpx;
 						}
-						>img{
+
+						>img {
 							width: 22rpx;
 							height: 28rpx;
 						}
 					}
-					.color-A{
+
+					.color-A {
 						color: #FF0000;
 					}
-					.color-B{
+
+					.color-B {
 						color: #2EA805;
 					}
-					
-					
+
+
 					.statistics-b-li-b {
 						font-weight: 400;
 						font-size: 24rpx;
@@ -313,6 +338,7 @@
 						>view:nth-of-type(1) {
 							width: 80rpx;
 						}
+
 						>view:nth-of-type(2) {
 							width: 168rpx;
 						}
@@ -349,6 +375,7 @@
 						>view:nth-of-type(1) {
 							width: 80rpx;
 						}
+
 						>view:nth-of-type(2) {
 							width: 168rpx;
 						}