Merge branch 'ZHNY_DCF' into ZHNY_LHR

src/components/jt-echarts/jt-echarts.vue

@@ -0,0 +1,111 @@
+<template>
+	<div ref="echarts" style="width: 100%;height: 100%;"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+	props: {
+		isAxisChart: {
+			type: Boolean,
+			default: true,
+		},
+		chartData: {
+			type: Object,
+			default:{}
+		},
+	},
+	data() {
+		return {
+			axisOption: {
+				legend: {
+					// 图例文字颜色
+					textStyle: {
+						color: "#333",
+					},
+				},
+				grid: {
+					left: "20%",
+				},
+				// 提示框
+				tooltip: {
+					trigger: "axis",
+				},
+				xAxis: {
+					type: "category", // 类目轴
+					data: [],
+					axisLine: {
+						lineStyle: {
+							color: "#17b3a3",
+						},
+					},
+					axisLabel: {
+						interval: 0,
+						color: "#333",
+					},
+				},
+				yAxis: [
+					{
+						type: "value",
+						axisLine: {
+							lineStyle: {
+								color: "#17b3a3",
+							},
+						},
+					},
+				],
+				color: ["#2ec7c9", "#b6a2de"],
+				series: [],
+			},
+			normalOption: {
+				tooltip: {
+					trigger: "item",
+				},
+				color: ["#0f78f4", "#dd536b", "#9462e5", "#a6a6a6", "#e1bb22", "#39c362", "#3ed1cf"],
+				series: [],
+			},
+			echart: "",
+		};
+	},
+	methods: {
+		initChart() {
+			this.initChartData();
+			if (this.echart) {
+				this.echart.setOption(this.options);
+			} else {
+				this.echart = echarts.init(this.$refs.echarts);
+				this.echart.setOption(this.options);
+			}
+		},
+		initChartData() {
+			if (this.isAxisChart) {
+				this.axisOption = this.chartData
+				// this.axisOption.series = this.chartData
+			} else {
+				this.normalOption.series = this.chartData
+			}
+		},
+	},
+	watch: {
+		chartData: {
+			handler: function () {
+				this.initChart();
+			},
+			deep: true,
+		},
+	},
+	computed: {
+		options() {
+			return this.isAxisChart ? this.axisOption : this.normalOption;
+		},
+	},
+	mounted() {
+		console.log(444777)
+		console.log('55556',this.chartData)
+	}
+};
+</script>
+
+<style scoped>
+	
+</style>

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

@@ -145,7 +145,7 @@
 		position: absolute;
 		left: 10rem;
 		top: 105rem;
-		margin-top: 15rem;
+		margin-top: 5rem;
 		// height: 490rem;
 
 		height: calc((100% - 145rem) / 3);
@@ -212,11 +212,27 @@
 
 		//滚动条一直显示
 		.middle {
-			height: calc(100% - 50rem);
+			height: calc(100% - 35rem);
 			width: 100%;
-			overflow-y: auto;
-			padding: 15rem 0 0 0;
+			overflow-y: scroll;
+			padding: 0 0 0 0;
 		}
+		
+		.middle::-webkit-scrollbar {
+			width: 0px;
+			background-color: rgba(0,0,0,0);
+			// 滚动条整体样式
+			// 高宽分别对应横竖滚动条的尺寸
+		}
+		
+		.middle::-webkit-scrollbar-thumb {
+		    // 滚动条里面小方块
+		}
+		
+		.middle::-webkit-scrollbar-track {
+		   // 滚动条底层颜色
+		}
+
 
 		.footers {
 			position: absolute;

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

@@ -145,7 +145,7 @@
 		position: absolute;
 		right: 10rem;
 		top: 105rem;
-		margin-top: 15rem;
+		margin-top: 5rem;
 		// height: 490rem;
 
 		height: calc((100% - 145rem) / 3);
@@ -212,10 +212,17 @@
 
 		//滚动条一直显示
 		.middle {
-			height: calc(100% - 50rem);
+			height: calc(100% - 35rem);
 			width: 100%;
-			overflow-y: auto;
-			padding: 15rem 0 0 0;
+			overflow-y: scroll;
+			padding: 0 0 0 0;
+		}
+		
+		.middle::-webkit-scrollbar {
+			width: 0px;
+			background-color: rgba(0,0,0,0);
+			// 滚动条整体样式
+			// 高宽分别对应横竖滚动条的尺寸
 		}
 
 		.footers {

src/main.js

@@ -31,6 +31,7 @@ import jtpopup3 from './components/jt-popup/jt-popup3.vue'
 import jtpopupif from './components/jt-popup/jt-popup-if.vue'
 import jtdrawer from './components/jt-drawer/drawer.vue'
 import jtcharts from './components/jt-charts/charts.vue'
+import jtecharts from './components/jt-echarts/jt-echarts.vue'
 
 // 引入jt3dSDK
 import '/public/jt3dSDK/index.css';
@@ -66,6 +67,7 @@ app.component("jt-popup3",jtpopup3)
 app.component("jt-popup-if",jtpopupif)
 app.component("jt-drawer",jtdrawer)
 app.component("jt-charts",jtcharts)
+app.component("jt-echarts",jtecharts)
 
 // app.use(pinia) 在store使用
 app.use(router);

src/views/Map3d/Map3DMain.vue

@@ -48,7 +48,10 @@
 	import queryResult from "./components/queryResult.vue";
 	import ggsbtj from "./components/ggsbtj.vue";
 	import ysltj from "./components/ysltj.vue";
-	import sbyxjc from "./components/sbyxjc.vue"
+	import sbyxjc from "./components/sbyxjc.vue";
+	import qtnhzb from "./components/qtnhzb.vue";
+	import nhtbtj from "./components/nhtbtj.vue";
+	import znjk from "./components/znjk.vue";
 	import {
 		provide
 	} from "vue";
@@ -97,7 +100,7 @@
 				<sbyxjc ref="_sbyxjc"></sbyxjc>
 			</jt-popup2>
 			
-			<jt-popup2  title="区域能耗占比" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="qtnhzb">
+			<jt-popup2  title="灌溉水位监测" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="qtnhzb">
 				<qtnhzb ref="_qtnhzb"></qtnhzb>
 			</jt-popup2>
 			

src/views/Map3d/components/ggsbtj.vue

@@ -0,0 +1,86 @@
+<script setup>
+	
+</script>
+
+<template>
+	<div class="main">
+		<div class="shape">
+			<div class="number">320</div>
+			<div class="title">总设备数量</div>
+		</div>
+		<div class="shape">
+			<div class="number">320</div>
+			<div class="title">总设备数量</div>
+		</div>
+		<div class="shape">
+			<div class="number">320</div>
+			<div class="title">总设备数量</div>
+		</div>
+		<div class="shape">
+			<div class="number">320</div>
+			<div class="title">总设备数量</div>
+		</div>
+		<div class="shape">
+			<div class="number">320</div>
+			<div class="title">总设备数量</div>
+		</div>
+		<div class="shape">
+			<div class="number">320</div>
+			<div class="title">总设备数量</div>
+		</div>
+		<div class="shape">
+			<div class="number">320</div>
+			<div class="title">总设备数量</div>
+		</div>
+		<div class="shape">
+			<div class="number">320</div>
+			<div class="title">总设备数量</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	let jt3d = undefined;
+	export default {
+		data() {
+			return {
+				// viewersName: '', //视角标签名称
+				// ImgurlList: [], //截图地址列表
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.number{
+		color: rgba(29,191,205,1);
+		font-weight: 600;
+		margin-top: 10rem;
+	}
+	.title{
+		font-size: 13rem;
+		text-shadow: 0 0 2rem 2rem rgba(29,191,205,1);
+		margin-top: 3rem;
+		margin-left: 38rem;
+	}
+	
+	.main{
+		width:100%;
+		height:100%;
+		display:flex;
+		flex:2;
+		flex-wrap: wrap;
+		justify-content: space-around;
+		align-items: center;
+		.shape{
+			background:url('@/assets/images/fang.png') no-repeat;
+			background-size:100% 100%;
+			width: 120rem;
+			height: 56rem;
+			
+		}
+	}
+</style>

src/views/Map3d/components/nhtbtj.vue

@@ -1,302 +1,112 @@
-<script setup>
-	import {
-		inject
-	} from "vue";
-	import html2canvas from 'html2canvas';
-	import {
-		blobToBase64,
-		base64ToBlob
-	} from '@/assets/js/blobtobase64';
-	const getMapInstance = inject("getMapInstance");
-	jt3d = getMapInstance();
-</script>
-
 <template>
-	<div class="mainview">
-		<div class="header">
-			
-		</div>
-		<div class="middleviewer">
-			<div class="viewer" v-for="(res,index) in ImgurlList" :key="index">
-				<div class="viewertop">
-					<img :src="res.url" @click="flyto(res.info)">
-				</div>
-				<div class="viewerbottom">
-					{{res.name}}
-					<img src="@/assets/images/delete.png" class="deleteImg" @click="deleteviewer(res,index)" />
-				</div>
-			</div>
-		</div>
+	<div>
+		<div id="echarts"></div>
 	</div>
 </template>
 
 <script>
-	let jt3d = undefined;
+	import * as echarts from "echarts";
+
 	export default {
 		data() {
 			return {
-				// viewersName: '', //视角标签名称
-				// ImgurlList: [], //截图地址列表
+
 			}
 		},
+		created() {},
+		mounted() {
+			this.typeCharts0()
+		},
 		methods: {
-			//获取输入框值
-			getName() {
-				this.viewersName = document.getElementById("inputValue").value;
-			},
-
-			//跳转方法
-			flyto(options) {
-				jt3d.LocateUtil.flyToPoint(options)
-			},
 
-			//删除方法，传keyvalue以及需要修改属性
-			deleteviewer(item, index) {
-				//删除对应数组内的对象
-				this.ImgurlList.splice(index, 1)
-				if (item.id) {
-					this.$http.get('/delete', {
-						tableName: 'sys_map_angle',
-						keyValue: item.id,
-					}).then(res => {
-						console.log(res.data)
-					})
-				}
+			typeCharts0() {
+				let option = this.getOption();
+				var chartDom = document.getElementById('echarts');
+				var myChart = echarts.init(chartDom);
+				myChart.setOption(option, true);
 			},
-
-			//添加视角标签，当前页存数组，向数据库传入相机参数
-			addviewer() {
-				//获取当前界面截图方法
-				html2canvas(
-					this.$parent.$parent.$refs.refMap3d.$refs.cesiumContainer, {
-						// backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
-						useCORS: true, //支持图片跨域
-						scale: 1 / 8, //设置放大的倍数
-					}
-				).then(canvas => {
-					//截图用img元素承装，显示在页面的上
-					let url = canvas.toDataURL('image/png')
-					//经纬度、高度
-					// 获取 相机姿态信息
-					let heading = window["viewer"].scene.camera.heading
-					let pitch = window["viewer"].scene.camera.pitch
-					let roll = window["viewer"].scene.camera.roll
-					let position = window["viewer"].scene.camera.positionCartographic
-					let longitude = Cesium.Math.toDegrees(position.longitude) //y
-					let latitude = Cesium.Math.toDegrees(position.latitude) //x
-					let height = position.height
-					let info = {
-						latitude: latitude,
-						longitude: longitude,
-						height: height,
-						pitch: Cesium.Math.toDegrees(pitch),
-						roll: Cesium.Math.toDegrees(roll),
-						heading: Cesium.Math.toDegrees(heading)
-					}
-					//dom for循环渲染列表
-					this.ImgurlList.unshift({
-						url: url,
-						name: this.viewersName,
-						info: info
-					})
-
-					//base64转换为二进制文件
-					// let blob = base64ToBlob(url)
-					// //文件转为文件流
-					// let formData = new FormData();
-					// formData.append('file',blob)
-
-					let data = {
-						name: this.viewersName,
-						x: latitude,
-						y: longitude,
-						z: height,
-						pitch: Cesium.Math.toDegrees(pitch),
-						roll: Cesium.Math.toDegrees(roll),
-						heading: Cesium.Math.toDegrees(heading),
-						screenshot: url,
-						userId: this.id,
-						// id:0
-					}
-
-					//添加数据接口
-					this.$http.post('/postSubmit', {
-						tableName: 'sys_map_angle',
-						keyValue: '',
-						formData: data,
-					}).then(res => {
-						console.log(res)
-						if (res.success == true) {
-
-						}
-					})
-				}).catch(err => {
-					console.log(err)
-				})
-			},
-			searchviewer() {
-				this.info = JSON.parse(localStorage.getItem('person'))
-				this.id = this.info.id
-				//获取所有图片数据
-				this.$http.get('/getTableList', {
-					tableName: 'sys_map_angle', //
-					sqlWhere: "name like '%" + this.viewersName + "%'",
-					orderByField: ''
-				}).then(res => {
-					console.log('获取图片', res.data)
-					this.ImgurlList = [];
-					res.data.forEach(item => {
-						let info = {
-							latitude: item.x,
-							longitude: item.y,
-							height: item.z,
-							pitch: item.pitch,
-							roll: item.roll,
-							heading: item.heading
-						}
-						// let url = blobToBase64(item.screenshot)
-						//dom for循环渲染列表
-						this.ImgurlList.push({
-							url: item.screenshot,
-							name: item.name,
-							info: info,
-							id: item.id
-						})
-					})
-
-					// console.log('img列表',this.ImgurlList)
-				})
+			getOption(data) {
+				let option = {
+					color: ["#2B80FF", "#3DF3C4"],
+					title: {
+						text: ''
+					},
+					tooltip: {
+						trigger: 'axis'
+					},
+					legend: {
+						orient: 'horizontal',
+						x: 'center',
+						y: 'top',
+						textStyle: {
+							fontSize: 12,
+						},
+						data: [{
+								name: '上月(kw/h)',
+								textStyle: {
+									color: "#2B80FF "
+								}
+							},
+							{
+								name: '本月(kw/h)',
+								textStyle: {
+									color: "#3DF3C4"
+								}
+							}
+						],
+						backgroundColor: 'rgba(0,0,0,0)',
+						borderColor: '#ccc',
+						borderWidth: 0,
+						padding: 5,
+						itemGap: 10,
+						itemWidth: 20,
+						itemHeight: 14,
+					},
+					grid: {
+						left: '3%',
+						right: '4%',
+						bottom: '3%',
+						containLabel: true
+					},
+					// toolbox: {
+					// 	feature: {
+					// 		saveAsImage: {}
+					// 	}
+					// },
+					xAxis: {
+						type: 'category',
+						boundaryGap: false,
+						data: ['一月', '二月', '三月', '四月', '五月', '六月']
+					},
+					yAxis: {
+						type: 'value'
+					},
+					series: [{
+							name: '上月(kw/h)',
+							type: 'line',
+							stack: 'Total',
+							data: [1000, 1500, 1300, 1700, 1600, 1200]
+						},
+						{
+							name: '本月(kw/h)',
+							type: 'line',
+							stack: 'Total',
+							data: [1200, 1800, 1400, 1350, 1100, 1500]
+						},
+					]
+				};
+				return option;
 			}
-		},
 
-		mounted() {
-			this.info = JSON.parse(localStorage.getItem('person'))
-			this.id = this.info.id
-			//获取所有图片数据
-			this.$http.get('/getTableList', {
-				tableName: 'sys_map_angle', //
-				sqlWhere: '', //+ this.loginForm.id
-				orderByField: ''
-			}).then(res => {
-				console.log('获取图片', res.data)
-				res.data.forEach(item => {
-					let info = {
-						latitude: item.x,
-						longitude: item.y,
-						height: item.z,
-						pitch: item.pitch,
-						roll: item.roll,
-						heading: item.heading
-					}
-					// let url = blobToBase64(item.screenshot)
-					//dom for循环渲染列表
-					this.ImgurlList.push({
-						url: item.screenshot,
-						name: item.name,
-						info: info,
-						id: item.id
-					})
-				})
+		},
 
-				// console.log('img列表',this.ImgurlList)
-			})
-		}
 	}
 </script>
 
-<style lang="scss" scoped>
-	.mainview {
-		width: 100%;
-		height: 100%;
-
-		.header {
-			width: 100%;
-			display: flex;
-
-			input,
-			input:focus {
-				outline: none;
-				width: 185rem !important;
-				border: 1rem solid rgba(255, 255, 255, 0.8);
-				margin-right: 10rem;
-				height: 26rem !important;
-				color: rgba(255, 255, 255, 1);
-				background-color: rgba(255, 255, 255, 0) !important;
-				border-radius: 3rem;
-			}
-		}
-
-		.middleviewer {
-			width: 265rem;
-			height: 100%;
-			margin-left: 7rem;
-
-			.viewer {
-				width: 265rem !important;
-				height: 196rem !important;
-				margin-top: 15rem;
-				border: 1rem solid #ffffff !important;
-				border-radius: 1rem !important;
-
-				.viewertop {
-					width: 265rem !important;
-					height: 166rem !important;
-
-					img {
-						width: 100% !important;
-						height: 100% !important;
-					}
-				}
-
-				.viewerbottom {
-					line-height: 30rem !important;
-					text-align: center !important;
-					width: 265rem !important;
-					height: 30rem !important;
-					position: relative;
-					background-color: rgba(15, 145, 185, 0.7);
-
-					.deleteImg {
-						width: 24rem;
-						height: 24rem;
-						right: 5rem;
-						top: 3rem;
-						position: absolute;
-					}
-				}
-			}
-		}
-	}
-
-	::v-deep .el-input {
-		flex-grow: 0 !important;
-		width: 200rem !important;
-		// display: inline !important;
-		// margin-left: 5rem;
-		margin-right: 10rem;
-		height: 30rem !important;
-	}
-
-	//输入框文字颜色
-	::v-deep .el-input__inner {
-		color: rgba(255, 255, 255, 1)
-	}
-
-	//输入框背景色
-	::v-deep .el-input__wrapper {
-		background-color: rgba(255, 255, 255, 0) !important;
-	}
-
-	::v-deep .el-button {
-		border-radius: 3rem !important;
-
-	}
-
-	::v-deep .el-button--primary {
-		background-color: rgba(64, 158, 255, 0.6) !important;
-	}
-
-	::-webkit-scrollbar {
-		width: 0rem;
+<style scoped>
+	#echarts {
+		width: 320rem;
+		height: 200rem;
+		margin: 10rem;
 	}
 </style>

src/views/Map3d/components/qtnhzb.vue

@@ -0,0 +1,199 @@
+<template>
+	<jt-echarts style="width: 330rem;height: 270rem;margin:10rem 0 0 0;" :chartData="option"></jt-echarts>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				option: {},
+				app: {}
+			}
+		},
+		methods: {
+
+		},
+		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)",
+							},
+						},
+
+					},
+					{
+						type: 'category',
+						boundaryGap: true,
+						data: categories2,
+						axisLabel: {
+							//x轴文字的配置
+							show: true,
+							textStyle: {
+								color: "rgba(255,225,255,1)",
+							},
+						},
+					}
+				],
+				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]
+					},
+					{
+						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)",
+							},
+						},
+					}
+				],
+				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);
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/Map3d/components/sbyxjc.vue

@@ -1,29 +1,89 @@
 <script setup>
-	import {
-		inject
-	} from "vue";
-	import html2canvas from 'html2canvas';
-	import {
-		blobToBase64,
-		base64ToBlob
-	} from '@/assets/js/blobtobase64';
-	const getMapInstance = inject("getMapInstance");
-	jt3d = getMapInstance();
+	
 </script>
 
 <template>
-	<div class="mainview">
-		<div class="header">
-			
-		</div>
-		<div class="middleviewer">
-			<div class="viewer" v-for="(res,index) in ImgurlList" :key="index">
-				<div class="viewertop">
-					<img :src="res.url" @click="flyto(res.info)">
+	<div id="main5">
+		<div class="chushuikou">
+			<div class="chushuikou1">
+				<div class="chushuikou1-1">
+					<label>区域</label>
+					<label>水泵电流</label>
+					<label>出入口经</label>
+					<label>实时流量</label>
+					<label>运行状态</label>
+				</div>
+			</div>
+			<div class="chushuikou2">
+				<div class="chushuikou2-1">
+					<label >1号机井</label>
+					<label style="color:'#ecec66';">200A</label>
+					<label >100/150</label>
+					<label >80m³/h</label>
+					<button style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">正常</button>
+				</div>
+			</div>
+			<div class="chushuikou3">
+				<div class="chushuikou2-1">
+					<label>2号机井</label>
+					<label style="color:'#ecec66';">200A</label>
+					<label >100/150</label>
+					<label >80m³/h</label>
+					<button style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">正常</button>
 				</div>
-				<div class="viewerbottom">
-					{{res.name}}
-					<img src="@/assets/images/delete.png" class="deleteImg" @click="deleteviewer(res,index)" />
+			</div>
+			<div class="chushuikou4">
+				<div class="chushuikou2-1">
+					<label>3号机井</label>
+					<label style="color:'#ecec66';">200A</label>
+					<label >100/150</label>
+					<label >80m³/h</label>
+					<button style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">正常</button>
+				</div>
+			</div>
+			<div class="chushuikou5">
+				<div class="chushuikou2-1">
+					<label>4号机井</label>
+					<label style="color:'#ecec66';">200A</label>
+					<label >100/150</label>
+					<label >80m³/h</label>
+					<button style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">正常</button>
+				</div>
+			</div>
+			<div class="chushuikou4">
+				<div class="chushuikou2-1">
+					<label>5号机井</label>
+					<label style="color:'#ecec66';">200A</label>
+					<label >100/150</label>
+					<label >80m³/h</label>
+					<button style="background-color: rgb(40,170,230);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500; margin-top:-4rem">正常</button>
+				</div>
+			</div>
+			<div class="chushuikou5">
+				<div class="chushuikou2-1">
+					<label>6号机井</label>
+					<label style="color:'#ecec66';">200A</label>
+					<label >100/150</label>
+					<label >80m³/h</label>
+					<button style="background-color: rgb(238,80,80);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">异常</button>
+				</div>
+			</div>
+			<div class="chushuikou4">
+				<div class="chushuikou2-1">
+					<label>7号机井</label>
+					<label style="color:'#ecec66';">200A</label>
+					<label >100/150</label>
+					<label >80m³/h</label>
+					<button style="background-color: rgb(238,80,80);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">异常</button>
+				</div>
+			</div>
+			<div class="chushuikou5">
+				<div class="chushuikou2-1">
+					<label>8号机井</label>
+					<label style="color:'#ecec66';">200A</label>
+					<label >100/150</label>
+					<label >80m³/h</label>
+					<button style="background-color: rgb(238,80,80);width: 50rem;height: 20rem;color: #fff;font-size: 14rem;border: 0;font-weight:500;margin-top:-4rem ">异常</button>
 				</div>
 			</div>
 		</div>
@@ -40,263 +100,96 @@
 			}
 		},
 		methods: {
-			//获取输入框值
-			getName() {
-				this.viewersName = document.getElementById("inputValue").value;
-			},
-
-			//跳转方法
-			flyto(options) {
-				jt3d.LocateUtil.flyToPoint(options)
-			},
-
-			//删除方法，传keyvalue以及需要修改属性
-			deleteviewer(item, index) {
-				//删除对应数组内的对象
-				this.ImgurlList.splice(index, 1)
-				if (item.id) {
-					this.$http.get('/delete', {
-						tableName: 'sys_map_angle',
-						keyValue: item.id,
-					}).then(res => {
-						console.log(res.data)
-					})
-				}
-			},
-
-			//添加视角标签，当前页存数组，向数据库传入相机参数
-			addviewer() {
-				//获取当前界面截图方法
-				html2canvas(
-					this.$parent.$parent.$refs.refMap3d.$refs.cesiumContainer, {
-						// backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
-						useCORS: true, //支持图片跨域
-						scale: 1 / 8, //设置放大的倍数
-					}
-				).then(canvas => {
-					//截图用img元素承装，显示在页面的上
-					let url = canvas.toDataURL('image/png')
-					//经纬度、高度
-					// 获取 相机姿态信息
-					let heading = window["viewer"].scene.camera.heading
-					let pitch = window["viewer"].scene.camera.pitch
-					let roll = window["viewer"].scene.camera.roll
-					let position = window["viewer"].scene.camera.positionCartographic
-					let longitude = Cesium.Math.toDegrees(position.longitude) //y
-					let latitude = Cesium.Math.toDegrees(position.latitude) //x
-					let height = position.height
-					let info = {
-						latitude: latitude,
-						longitude: longitude,
-						height: height,
-						pitch: Cesium.Math.toDegrees(pitch),
-						roll: Cesium.Math.toDegrees(roll),
-						heading: Cesium.Math.toDegrees(heading)
-					}
-					//dom for循环渲染列表
-					this.ImgurlList.unshift({
-						url: url,
-						name: this.viewersName,
-						info: info
-					})
-
-					//base64转换为二进制文件
-					// let blob = base64ToBlob(url)
-					// //文件转为文件流
-					// let formData = new FormData();
-					// formData.append('file',blob)
-
-					let data = {
-						name: this.viewersName,
-						x: latitude,
-						y: longitude,
-						z: height,
-						pitch: Cesium.Math.toDegrees(pitch),
-						roll: Cesium.Math.toDegrees(roll),
-						heading: Cesium.Math.toDegrees(heading),
-						screenshot: url,
-						userId: this.id,
-						// id:0
-					}
-
-					//添加数据接口
-					this.$http.post('/postSubmit', {
-						tableName: 'sys_map_angle',
-						keyValue: '',
-						formData: data,
-					}).then(res => {
-						console.log(res)
-						if (res.success == true) {
-
-						}
-					})
-				}).catch(err => {
-					console.log(err)
-				})
-			},
-			searchviewer() {
-				this.info = JSON.parse(localStorage.getItem('person'))
-				this.id = this.info.id
-				//获取所有图片数据
-				this.$http.get('/getTableList', {
-					tableName: 'sys_map_angle', //
-					sqlWhere: "name like '%" + this.viewersName + "%'",
-					orderByField: ''
-				}).then(res => {
-					console.log('获取图片', res.data)
-					this.ImgurlList = [];
-					res.data.forEach(item => {
-						let info = {
-							latitude: item.x,
-							longitude: item.y,
-							height: item.z,
-							pitch: item.pitch,
-							roll: item.roll,
-							heading: item.heading
-						}
-						// let url = blobToBase64(item.screenshot)
-						//dom for循环渲染列表
-						this.ImgurlList.push({
-							url: item.screenshot,
-							name: item.name,
-							info: info,
-							id: item.id
-						})
-					})
-
-					// console.log('img列表',this.ImgurlList)
-				})
-			}
-		},
-
-		mounted() {
-			this.info = JSON.parse(localStorage.getItem('person'))
-			this.id = this.info.id
-			//获取所有图片数据
-			this.$http.get('/getTableList', {
-				tableName: 'sys_map_angle', //
-				sqlWhere: '', //+ this.loginForm.id
-				orderByField: ''
-			}).then(res => {
-				console.log('获取图片', res.data)
-				res.data.forEach(item => {
-					let info = {
-						latitude: item.x,
-						longitude: item.y,
-						height: item.z,
-						pitch: item.pitch,
-						roll: item.roll,
-						heading: item.heading
-					}
-					// let url = blobToBase64(item.screenshot)
-					//dom for循环渲染列表
-					this.ImgurlList.push({
-						url: item.screenshot,
-						name: item.name,
-						info: info,
-						id: item.id
-					})
-				})
-
-				// console.log('img列表',this.ImgurlList)
-			})
+			
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.mainview {
+	
+	#main5{
 		width: 100%;
 		height: 100%;
-
-		.header {
+		
+		.chushuikou {
 			width: 100%;
+			height: 175rem;
+			margin-top: 10rem;
+			// margin-left: 5rem;
+		}
+		
+		.chushuikou1 {
+			width: 100%;
+			height: 35rem;
+			background-color: rgba(61, 198, 255, 0.4);
 			display: flex;
-
-			input,
-			input:focus {
-				outline: none;
-				width: 185rem !important;
-				border: 1rem solid rgba(255, 255, 255, 0.8);
-				margin-right: 10rem;
-				height: 26rem !important;
-				color: rgba(255, 255, 255, 1);
-				background-color: rgba(255, 255, 255, 0) !important;
-				border-radius: 3rem;
-			}
+			align-items: center;
 		}
-
-		.middleviewer {
-			width: 265rem;
-			height: 100%;
-			margin-left: 7rem;
-
-			.viewer {
-				width: 265rem !important;
-				height: 196rem !important;
-				margin-top: 15rem;
-				border: 1rem solid #ffffff !important;
-				border-radius: 1rem !important;
-
-				.viewertop {
-					width: 265rem !important;
-					height: 166rem !important;
-
-					img {
-						width: 100% !important;
-						height: 100% !important;
-					}
-				}
-
-				.viewerbottom {
-					line-height: 30rem !important;
-					text-align: center !important;
-					width: 265rem !important;
-					height: 30rem !important;
-					position: relative;
-					background-color: rgba(15, 145, 185, 0.7);
-
-					.deleteImg {
-						width: 24rem;
-						height: 24rem;
-						right: 5rem;
-						top: 3rem;
-						position: absolute;
-					}
-				}
-			}
+		
+		.chushuikou1-1 {
+			font-family: SimHei;
+			font-size: 14rem;
+			color: #C8daf5;
+			width: 100%;
+			height: 13rem;
+			display: flex;
+			justify-content: space-around;
+			margin: auto;
 		}
-	}
-
-	::v-deep .el-input {
-		flex-grow: 0 !important;
-		width: 200rem !important;
-		// display: inline !important;
-		// margin-left: 5rem;
-		margin-right: 10rem;
-		height: 30rem !important;
-	}
-
-	//输入框文字颜色
-	::v-deep .el-input__inner {
-		color: rgba(255, 255, 255, 1)
-	}
-
-	//输入框背景色
-	::v-deep .el-input__wrapper {
-		background-color: rgba(255, 255, 255, 0) !important;
-	}
-
-	::v-deep .el-button {
-		border-radius: 3rem !important;
-
-	}
-
-	::v-deep .el-button--primary {
-		background-color: rgba(64, 158, 255, 0.6) !important;
-	}
-
-	::-webkit-scrollbar {
-		width: 0rem;
+		
+		.chushuikou2-1 {
+			font-family: SimHei;
+			font-size: 13rem;
+			color: #C8daf5;
+			width: 100%;
+			height: 13rem;
+			display: flex;
+			justify-content: space-around;
+			margin: auto;
+			// margin-left: 30rem;
+		}
+		
+		.chushuikou2-2 {
+			font-family: SimHei;
+			font-size: 13rem;
+			color: #C8daf5;
+			width: 100%;
+			height: 13rem;
+			display: flex;
+			justify-content: space-between;
+			margin: auto;
+			// margin-left: 30rem;
+		}
+		
+		.chushuikou2 {
+			width: 100%;
+			height: 35rem;
+			display: flex;
+			align-items: center;
+		}
+		
+		.chushuikou3 {
+			width: 100%;
+			height: 35rem;
+			background-color: rgba(0, 37, 98, 0.4);
+			display: flex;
+			align-items: center;
+		}
+		
+		.chushuikou4 {
+			width: 100%;
+			height: 35rem;
+			display: flex;
+			align-items: center;
+		}
+		
+		.chushuikou5 {
+			width: 100%;
+			height: 35rem;
+			background-color: rgba(0, 37, 98, 0.4);
+			display: flex;
+			align-items: center;
+		}
+		
 	}
 </style>