基础柱状图

src/views/Map3d/components/waterChart.vue

@@ -0,0 +1,75 @@
+<template>
+	<div class="echart" id="mychart" :style="myChartStyle"></div>
+</template>
+
+<script>
+	import * as echarts from "echarts";
+
+	export default {
+		data() {
+			return {
+				xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
+				yData: [23, 24, 18, 25, 27, 28, 25], //人数数据
+				taskDate: [10, 11, 9, 17, 14, 13, 14],
+				myChartStyle: {
+					float: "left",
+					width: "100%",
+					height: "279rem"
+				} //图表样式
+			};
+		},
+		mounted() {
+			this.initEcharts();
+		},
+		methods: {
+			initEcharts() {
+				// 多列柱状图
+				const mulColumnZZTData = {
+					xAxis: {
+						data: this.xData,
+					},
+					// 图例
+					legend: {
+						data: ["人数", "任务数"],
+						top: "5%",
+						textStyle: {
+							color: '#ffffff' //字体颜色
+						},
+
+					},
+					yAxis: {},
+					series: [{
+							type: "bar", //形状为柱状图
+							data: this.yData,
+							name: "人数", // legend属性
+							label: {
+								// 柱状图上方文本标签，默认展示数值信息
+								show: false,
+								position: "top"
+							}
+						},
+						{
+							type: "bar", //形状为柱状图
+							data: this.taskDate,
+							name: "任务数", // legend属性
+							label: {
+								// 柱状图上方文本标签，默认展示数值信息
+								show: false,
+								position: "top"
+							}
+						}
+					]
+				};
+				const myChart = echarts.init(document.getElementById("mychart"));
+				myChart.setOption(mulColumnZZTData);
+				//随着屏幕大小调节图表
+				window.addEventListener("resize", () => {
+					myChart.resize();
+				});
+			}
+		}
+	};
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/Map3d/components/ysltj.vue

@@ -3,6 +3,7 @@
 		inject
 	} from "vue";
 	import html2canvas from 'html2canvas';
+	import waterChart from "./waterChart.vue"
 	import {
 		blobToBase64,
 		base64ToBlob
@@ -14,18 +15,9 @@
 <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>
+			<waterChart></waterChart>
 		</div>
 	</div>
 </template>
@@ -37,266 +29,55 @@
 			return {
 				// viewersName: '', //视角标签名称
 				// ImgurlList: [], //截图地址列表
+				cdata: {
+				        xData: [],
+				        yData: [],
+				      },
+
 			}
 		},
 		methods: {
-			//获取输入框值
+			 setData() {
+			      this.cdata.xData = [
+			        "工作票",
+			        "操作票",
+			        "抢修",
+			        "用电调查",
+			        "设备巡视",
+			        "现场勘查",
+			        "到岗到位",
+			      ];
+			 
+			      this.cdata.yData = [300, 450, 770, 203, 255, 188, 156];
+			    },
+			  },
+	
 			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)
-			})
+			this.setData();
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
 	.mainview {
+		top:10rem;
 		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;
+	.middleviewer {
+		
+		width: 300rem;
+		height: 100%;
+		margin-left: 40rem;
 	}
 
 	::-webkit-scrollbar {
 		width: 0rem;
+		height: 0rem;
 	}
 </style>