|
|
@@ -1,33 +1,12 @@
|
|
|
<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>
|
|
|
+ <!-- <waterChart></waterChart> -->
|
|
|
+ <jt-charts :option="mulColumnZZTData" ></jt-charts>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -37,266 +16,125 @@
|
|
|
return {
|
|
|
// viewersName: '', //视角标签名称
|
|
|
// ImgurlList: [], //截图地址列表
|
|
|
+ xData: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //横坐标
|
|
|
+ yData: [23, 24, 18, 25, 27, 28, 25, 26, 25, 18, 19, 23], //人数数据
|
|
|
+ taskDate: [16, 18, 19, 17, 18, 20, 19, 15, 16, 18, 17, 16],
|
|
|
+ mulColumnZZTData:{}
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
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
|
|
|
+ initEcharts() {
|
|
|
+ // 多列柱状图
|
|
|
+ this.mulColumnZZTData = {
|
|
|
+ xAxis: {
|
|
|
+ data: this.xData,
|
|
|
+ },
|
|
|
+
|
|
|
+ tooltip: { //提示框组件
|
|
|
+ trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
|
|
|
+ axisPointer: {
|
|
|
+ // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ },
|
|
|
+ backgroundColor: "rgba(255,255,255,0.2)",
|
|
|
+ borderColor: "rgba(255,255,255,0.2)",
|
|
|
+ textStyle: { // 提示框浮层的文本样式。
|
|
|
+ color: 'rgba(255,255,255,0.8)',
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 图例
|
|
|
+ legend: {
|
|
|
+ data: ["去年灌溉", "今年灌溉"],
|
|
|
+ top: "0%",
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff' //字体颜色
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
+ color: "#e2e9ff",
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255,255,255,0.12)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: "bar", //形状为柱状图
|
|
|
+ data: this.yData,
|
|
|
+ itemStyle: {
|
|
|
+ // 修改柱子圆角
|
|
|
+ barBorderRadius: [30, 30, 30, 30],
|
|
|
+ shadowColor: "rgba(84,112,198,1)",
|
|
|
+ shadowBlur: 4,
|
|
|
+ },
|
|
|
+ name: "今年灌溉", // legend属性
|
|
|
+ label: {
|
|
|
+ // 柱状图上方文本标签，默认展示数值信息
|
|
|
+ show: false,
|
|
|
+ position: "top"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar", //形状为柱状图
|
|
|
+ data: this.taskDate,
|
|
|
+ itemStyle: {
|
|
|
+ // 修改柱子圆角
|
|
|
+ barBorderRadius: [30, 30, 30, 30],
|
|
|
+ shadowColor: "rgba(145,204,117,1)",
|
|
|
+ shadowBlur: 4,
|
|
|
+ },
|
|
|
+ name: "去年灌溉", // legend属性
|
|
|
+ label: {
|
|
|
+ // 柱状图上方文本标签，默认展示数值信息
|
|
|
+ show: false,
|
|
|
+ position: "top"
|
|
|
+ }
|
|
|
}
|
|
|
- // 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
|
|
|
- })
|
|
|
- })
|
|
|
+ /* getName() {
|
|
|
+ this.viewersName = document.getElementById("inputValue").value;
|
|
|
+ }, */
|
|
|
|
|
|
- // console.log('img列表',this.ImgurlList)
|
|
|
- })
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.initEcharts()
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .mainview {
|
|
|
+/* .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;
|
|
|
+ .middleviewer {
|
|
|
+ width: 300rem;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 40rem;
|
|
|
}
|
|
|
|
|
|
- ::-webkit-scrollbar {
|
|
|
+/* ::-webkit-scrollbar {
|
|
|
width: 0rem;
|
|
|
- }
|
|
|
+ height: 0rem;
|
|
|
+ } */
|
|
|
</style>
|
DESKTOP-GBVU60Q\dell