组件模块禁止溢出滑动

src/components/jt-popup/jt-popup2.vue

@@ -213,7 +213,7 @@
 		.middle {
 			height: calc(100% - 25rem);
 			width: 100%;
-			overflow-y: scroll;
+			overflow-y: hidden;
 			padding: 0 0 0 0;
 		}
 		

src/components/jt-popup/jt-popup3.vue

@@ -213,7 +213,7 @@
 		.middle {
 			height: calc(100% - 30rem);
 			width: 100%;
-			overflow-y: scroll;
+			overflow-y: hidden;
 			padding: 0 0 0 0;
 		}
 		

src/views/Map3d/components/ggsbtj.vue

@@ -70,12 +70,21 @@
 		margin-left: 38rem;
 	}
 	
+	.main::-webkit-scrollbar {
+		width: 0px;
+		background-color: rgba(0,0,0,0);
+		// 滚动条整体样式
+		// 高宽分别对应横竖滚动条的尺寸
+	}
+	
 	.main{
 		width:100%;
 		height:100%;
 		display:flex;
 		margin-top: 10rem;
+		padding-bottom: 5rem;
 		flex:2;
+		overflow: scroll;
 		flex-wrap: wrap;
 		justify-content: space-around;
 		align-items: center;

src/views/Map3d/components/qtnhzb.vue

@@ -14,203 +14,7 @@
 
 		},
 		mounted() {
-			// const categories = (function() {
-			// 	let now = new Date();
-			// 	let res = [];
-			// 	let len = 10;
-			// 	while (len--) {
-			// 		res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
-			// 		now = new Date(+now - 2000);
-			// 	}
-			// 	return res;
-			// })();
-			// const categories2 = (function() {
-			// 	let res = [];
-			// 	let len = 10;
-			// 	while (len--) {
-			// 		res.push(10 - len - 1);
-			// 	}
-			// 	return res;
-			// })();
-			// const data = (function() {
-			// 	let res = [];
-			// 	let len = 10;
-			// 	while (len--) {
-			// 		res.push(Math.round(Math.random() * 1000));
-			// 	}
-			// 	return res;
-			// })();
-			// const data2 = (function() {
-			// 	let res = [];
-			// 	let len = 0;
-			// 	while (len < 10) {
-			// 		res.push(+(Math.random() * 10 + 5).toFixed(1));
-			// 		len++;
-			// 	}
-			// 	return res;
-			// })();
-			// this.option = {
-			// 	title: {
-			// 		// text: '水位监测信息'
-			// 	},
-			// 	tooltip: {
-			// 		trigger: 'axis',
-			// 		axisPointer: {
-			// 			type: 'cross',
-			// 			label: {
-			// 				backgroundColor: '#283b56'
-			// 			}
-			// 		}
-			// 	},
-			// 	legend: {
-			// 		// 图例文字颜色
-			// 		textStyle: {
-			// 			color: "#fff",
-			// 		},
-			// 	},
-			// 	toolbox: {
-			// 		show: true,
-			// 		feature: {
-			// 			// dataView: {
-			// 			// 	readOnly: false
-			// 			// },
-			// 			// restore: {},
-			// 			// saveAsImage: {}
-			// 		}
-			// 	},
-			// 	dataZoom: {
-			// 		show: false,
-			// 		start: 0,
-			// 		end: 100
-			// 	},
-			// 	xAxis: [{
-			// 			type: 'category',
-			// 			boundaryGap: true,
-			// 			data: categories,
-			// 			axisLabel: {
-			// 				//x轴文字的配置
-			// 				show: true,
-			// 				textStyle: {
-			// 					color: "rgba(255,225,255,1)",
-			// 				},
-			// 			},
-			// 			splitLine: {
-			// 				show: false,
-			// 				lineStyle: {
-			// 					type: 'dashed',
-			// 					color: '#113d5e'
-			// 				}
-			// 			},
-
-			// 		},
-			// 		{
-			// 			type: 'category',
-			// 			boundaryGap: true,
-			// 			data: categories2,
-			// 			axisLabel: {
-			// 				//x轴文字的配置
-			// 				show: true,
-			// 				textStyle: {
-			// 					color: "rgba(255,225,255,1)",
-			// 				},
-			// 			},
-			// 			splitLine: {
-			// 				show: true,
-			// 				lineStyle: {
-			// 					type: 'dashed',
-			// 					color: '#113d5e'
-			// 				}
-			// 			},
-			// 		}
-			// 	],
-			// 	yAxis: [{
-			// 			type: 'value',
-			// 			scale: true,
-			// 			name: '水位/m',
-			// 			axisLabel: {
-			// 				//x轴文字的配置
-			// 				show: true,
-			// 				textStyle: {
-			// 					color: "rgba(255,225,255,1)",
-			// 				},
-			// 			},
-			// 			nameTextStyle: {
-			// 				//y轴上方单位的颜色
-			// 				color: "#fff",
-			// 			},
-			// 			nameGap: 25,
-			// 			max: 30,
-			// 			min: 0,
-			// 			boundaryGap: [0.2, 0.2],
-			// 			splitLine: {
-			// 				show: false,
-			// 			},
-			// 		},
-			// 		{
-			// 			type: 'value',
-			// 			scale: true,
-			// 			name: '预警/m',
-			// 			max: 1200,
-			// 			nameGap: 25,
-			// 			min: 0,
-			// 			boundaryGap: [0.2, 0.2],
-			// 			nameTextStyle: {
-			// 				//y轴上方单位的颜色
-			// 				color: "#fff",
-			// 			},
-			// 			axisLabel: {
-			// 				//x轴文字的配置
-			// 				show: true,
-			// 				textStyle: {
-			// 					color: "rgba(255,225,255,1)",
-			// 				},
-			// 			},
-			// 			splitLine: {
-			// 				show: false,
-			// 			},
-			// 		}
-			// 	],
-			// 	series: [{
-			// 			name: '水位高度',
-			// 			type: 'bar',
-			// 			xAxisIndex: 1,
-			// 			yAxisIndex: 1,
-			// 			data: data
-			// 		},
-			// 		{
-			// 			name: '水位预警',
-			// 			type: 'line',
-			// 			data: data2
-			// 		}
-			// 	]
-			// };
-			// this.app.count = 11;
-			// let _this = this
-			// setInterval(function() {
-			// 	let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
-			// 	data.shift();
-			// 	data.push(Math.round(Math.random() * 1000));
-			// 	data2.shift();
-			// 	data2.push(+(Math.random() * 10 + 5).toFixed(1));
-			// 	categories.shift();
-			// 	categories.push(axisData);
-			// 	categories2.shift();
-			// 	categories2.push(_this.app.count++);
-			// 	_this.option.xAxis = [{
-			// 			data: categories
-			// 		},
-			// 		{
-			// 			data: categories2
-			// 		}
-			// 	]
-			// 	_this.option.series = [{
-			// 			data: data
-			// 		},
-			// 		{
-			// 			data: data2
-			// 		}
-			// 	]
-			// }, 2100);
+			
 			this.option = {
 				legend: {
 					/*这里是四个指标，（去年同期和本月是柱状，增减百分比是折线，平衡点是在柱状上的横线）*/

src/views/Map3d/components/sbyxjc.vue

@@ -235,8 +235,16 @@
 		font-weight: 500;
 		margin-top: -4rem
 	}
+	
+	#main5::-webkit-scrollbar {
+		width: 0px;
+		background-color: rgba(0,0,0,0);
+		// 滚动条整体样式
+		// 高宽分别对应横竖滚动条的尺寸
+	}
 
 	#main5 {
+		overflow: scroll;
 		width: calc(100% - 20rem);
 		height: calc(100% - 20rem);
 		margin: 10rem;

src/views/qixiang/components/qixiangxx.vue

@@ -0,0 +1,223 @@
+<template>
+	<jt-echarts :chartData="option" style="width: 330rem;height:275rem;margin:10rem 0 0 0;"></jt-echarts>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				option:{},
+				app:{}
+			}
+		},
+		mounted() {
+			const categories = (function() {
+				let now = new Date();
+				let res = [];
+				let len = 10;
+				while (len--) {
+					res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
+					now = new Date(+now - 2000);
+				}
+				return res;
+			})();
+			const categories2 = (function() {
+				let res = [];
+				let len = 10;
+				while (len--) {
+					res.push(10 - len - 1);
+				}
+				return res;
+			})();
+			const data = (function() {
+				let res = [];
+				let len = 10;
+				while (len--) {
+					res.push(Math.round(Math.random() * 1000));
+				}
+				return res;
+			})();
+			const data2 = (function() {
+				let res = [];
+				let len = 0;
+				while (len < 10) {
+					res.push(+(Math.random() * 10 + 5).toFixed(1));
+					len++;
+				}
+				return res;
+			})();
+			this.option = {
+				title: {
+					// text: '水位监测信息'
+				},
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'cross',
+						label: {
+							backgroundColor: '#283b56'
+						}
+					}
+				},
+				legend: {
+					// 图例文字颜色
+					textStyle: {
+						color: "#fff",
+					},
+				},
+				toolbox: {
+					show: true,
+					feature: {
+						// dataView: {
+						// 	readOnly: false
+						// },
+						// restore: {},
+						// saveAsImage: {}
+					}
+				},
+				dataZoom: {
+					show: false,
+					start: 0,
+					end: 100
+				},
+				xAxis: [{
+						type: 'category',
+						boundaryGap: true,
+						data: categories,
+						axisLabel: {
+							//x轴文字的配置
+							show: true,
+							textStyle: {
+								color: "rgba(255,225,255,1)",
+							},
+						},
+						splitLine: {
+							show: false,
+							lineStyle: {
+								type: 'dashed',
+								color: '#113d5e'
+							}
+						},
+			
+					},
+					{
+						type: 'category',
+						boundaryGap: true,
+						data: categories2,
+						axisLabel: {
+							//x轴文字的配置
+							show: true,
+							textStyle: {
+								color: "rgba(255,225,255,1)",
+							},
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								type: 'dashed',
+								color: '#113d5e'
+							}
+						},
+					}
+				],
+				yAxis: [{
+						type: 'value',
+						scale: true,
+						name: '水位/m',
+						axisLabel: {
+							//x轴文字的配置
+							show: true,
+							textStyle: {
+								color: "rgba(255,225,255,1)",
+							},
+						},
+						nameTextStyle: {
+							//y轴上方单位的颜色
+							color: "#fff",
+						},
+						nameGap: 25,
+						max: 30,
+						min: 0,
+						boundaryGap: [0.2, 0.2],
+						splitLine: {
+							show: false,
+						},
+					},
+					{
+						type: 'value',
+						scale: true,
+						name: '预警/m',
+						max: 1200,
+						nameGap: 25,
+						min: 0,
+						boundaryGap: [0.2, 0.2],
+						nameTextStyle: {
+							//y轴上方单位的颜色
+							color: "#fff",
+						},
+						axisLabel: {
+							//x轴文字的配置
+							show: true,
+							textStyle: {
+								color: "rgba(255,225,255,1)",
+							},
+						},
+						splitLine: {
+							show: false,
+						},
+					}
+				],
+				series: [{
+						name: '水位高度',
+						type: 'bar',
+						xAxisIndex: 1,
+						yAxisIndex: 1,
+						data: data
+					},
+					{
+						name: '水位预警',
+						type: 'line',
+						data: data2
+					}
+				]
+			};
+
+			this.app.count = 11;
+			let _this = this
+			setInterval(function() {
+				let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
+				data.shift();
+				data.push(Math.round(Math.random() * 1000));
+				data2.shift();
+				data2.push(+(Math.random() * 10 + 5).toFixed(1));
+				categories.shift();
+				categories.push(axisData);
+				categories2.shift();
+				categories2.push(_this.app.count++);
+				_this.option.xAxis = [{
+						data: categories
+					},
+					{
+						data: categories2
+					}
+				]
+				_this.option.series = [{
+						data: data
+					},
+					{
+						data: data2
+					}
+				]
+			}, 6100);
+		}
+	}
+</script>
+
+<style scoped>
+	#main {
+		margin-left: 15rem;
+		width: calc(100% - 15rem);
+		height: 220rem;
+		margin-top: 15rem;
+	}
+</style>

src/views/qixiang/qixiang.vue

@@ -1,8 +1,41 @@
+<script setup>
+	import qixiangxx from './components/qixiangxx.vue';
+</script>
 <template>
+	<jt-popup2 title="实时气象数据">
+		<qixiangxx></qixiangxx>
+	</jt-popup2>
+
+	<jt-popup2 title="" top="calc(calc(100% - 115rem) / 3 + 90rem)">
+
+	</jt-popup2>
+
+	<jt-popup2 title="" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)">
+
+	</jt-popup2>
+
+	<jt-popup3 title="">
+
+	</jt-popup3>
+
+	<jt-popup3 title="" top="calc(calc(100% - 115rem) / 3 + 90rem)">
+
+	</jt-popup3>
+
+	<jt-popup3 title="" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)">
+
+	</jt-popup3>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {
+
+			}
+		}
+	}
 </script>
 
 <style>
-</style>
+</style>