<template>
|
<div class="fullscreen-bgp">
|
<div style="width: 20%;margin-top: 10px; position: absolute;">
|
<el-button class="title_linespan" type="text" @click="goToindex">官网</el-button>
|
<el-button class="title_linespan" type="text" @click="goToDistance">计算距离</el-button>
|
<el-button class="title_linespan" type="text" @click="goToDegree">度分转换</el-button>
|
<el-button class="title_linespan" type="text" @click="goToCoordinate">坐标计算</el-button>
|
<el-button class="title_linespan" style="color: #f5f7fa; text-decoration: underline;" type="text"
|
@click="goToplane">坐标转换</el-button>
|
</div>
|
|
<div class="plane">
|
<!-- <el-form :inline="true" :label-position="labelPosition" label-width="80px" :model="formLabelAlign"> -->
|
|
<div style="display: flex; ">
|
<div style="width:15.9%;height: 60px;border-right: 1px solid black">
|
<h2 style="color: #f5f7fa;margin-left: 5px;width: 50px;">名称</h2>
|
</div>
|
<div style="width:42%;height: 60px;border-right: 1px solid black">
|
<h3 style="color: #f5f7fa;font-size: 18px;">激光点云</h3>
|
</div>
|
<div style="width:41.9%;height: 60px;">
|
<h3 style="color: #f5f7fa;font-size: 18px;">CAD地图</h3>
|
</div>
|
</div>
|
<div style="display: flex;border-top: 1px solid black">
|
<div
|
style="width:16%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<h3 style="margin-left: 5px;width: 70px;">坐标</h3>
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<h3>X</h3>
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<h3>Y</h3>
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<h3>Z</h3>
|
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<h3>X</h3>
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<h3>Y</h3>
|
</div>
|
<div style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);">
|
<h3>Z</h3>
|
</div>
|
|
</div>
|
<div style="display: flex; border-top: 1px solid black">
|
<div
|
style="width:16%;height: 40px;background-color:rgba(231, 233, 243, 100);border-right: 1px solid black">
|
<h3 style="margin-left: 5px;width: 70px;">已知A点</h3>
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="three.threeAX"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入激光点云A点X坐标"></el-input>
|
</div>
|
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="three.threeAY"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入激光点云A点Y坐标"></el-input>
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="three.threeAZ"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入激光点云A点Z坐标"></el-input>
|
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="plane.planeAX"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入CAD地图A点X坐标"></el-input>
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="plane.planeAY"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入CAD地图A点Y坐标"></el-input>
|
</div>
|
<div style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);">
|
<el-input class="class1" style=" border: none;" v-model="plane.planeAZ"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入CAD地图A点Z坐标"></el-input>
|
</div>
|
</div>
|
<div style="display: flex; border-top: 1px solid black">
|
<div
|
style="width:16%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<h3 style="margin-left: 5px;width: 70px;">已知B点</h3>
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="three.threeBX"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入激光点云B点X坐标"></el-input>
|
</div>
|
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="three.threeBY"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入激光点云B点Y坐标"></el-input>
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="three.threeBZ"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入激光点云B点Z坐标"></el-input>
|
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="plane.planeBX"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入CAD地图B点X坐标"></el-input>
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="plane.planeBY"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入CAD地图B点Y坐标"></el-input>
|
</div>
|
<div style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);">
|
<el-input class="class1" style=" border: none;" v-model="plane.planeBZ"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入CAD地图B点Z坐标"></el-input>
|
</div>
|
</div>
|
<div style="display: flex; border-top: 1px solid black; border-bottom: 1px solid black">
|
<div
|
style="width:16%;height: 40px;background-color:rgba(231, 233, 243, 100);border-right: 1px solid black">
|
<h3 style="margin-left: 5px;width: 70px;">已知C点</h3>
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="three.threeCX"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入激光点云C点X坐标"></el-input>
|
</div>
|
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="three.threeCY"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入激光点云C点Y坐标"></el-input>
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="three.threeCZ"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入激光点云C点Z坐标"></el-input>
|
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="plane.planeCX"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入CAD地图C点X坐标"></el-input>
|
</div>
|
<div
|
style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);border-right: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="plane.planeCY"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入CAD地图C点Y坐标"></el-input>
|
</div>
|
<div style="width:14%;height: 40px;background-color:rgba(205, 211, 232, 100);">
|
<el-input class="class1" style=" border: none;" v-model="plane.planeCZ"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入CAD地图C点Z坐标"></el-input>
|
</div>
|
</div>
|
|
<!-- <el-table :data="tableData" stripe="true" style="width: 100%">
|
<el-table-column prop="name" label="名称" :cell-style="{ 'color': 'red' }"style="background-color:rgba(67, 113, 1194, 100)">
|
<el-table-column prop="name" label="坐标">
|
|
</el-table-column>
|
</el-table-column>
|
<el-table-column prop="todayBuy" label="激光点云">
|
<el-table-column prop="monthBuy" label="X">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.date" ></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="monthBuy" label="Y">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.date" ></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="monthBuy" label="Z">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.date" ></el-input>
|
</template>
|
</el-table-column>
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.date" ></el-input>
|
</template>
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.date" ></el-input>
|
</template>
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.date" ></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="monthBuy" label="CAD地图">
|
<el-table-column prop="monthBuy" label="X">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.date" ></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="monthBuy" label="Y">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.date" ></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="monthBuy" label="Z">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.date" ></el-input>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
|
</el-table> -->
|
|
|
<div style="display: flex; margin-top: 20px;">
|
<div style="width:16%;height: 40px;">
|
<h3 style="color: #f5f7fa;font-size: 16px;margin-left: 5px;width: 70px;">待计算</h3>
|
</div>
|
<div style="width:14%;height: 40px;border: 1px solid black;">
|
<!-- <template slot-scope="scope"> -->
|
<el-input class="class1" style=" border: none;" v-model="three.threeDX"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入待计算X坐标"></el-input>
|
<!-- </template> -->
|
|
</div>
|
<div
|
style="width:14%;height: 40px;border-right: 1px solid black;border-top: 1px solid black;border-bottom: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="three.threeDY"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入待计算Y坐标"></el-input>
|
</div>
|
<div
|
style="width:14%;height: 40px;border-right: 1px solid black;border-top: 1px solid black;border-bottom: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="three.threeDZ"
|
oninput="value=value.replace(/[^\d.-]/g,'')" placeholder="输入待计算Z坐标"></el-input>
|
</div>
|
<div
|
style="width:14%;height: 40px;border-right: 1px solid black;border-top: 1px solid black;border-bottom: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="plane.planeDX"
|
oninput="value=value.replace(/[^\d.-]/g,'')" readonly></el-input>
|
</div>
|
<div
|
style="width:14%;height: 40px;border-right: 1px solid black;border-top: 1px solid black;border-bottom: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="plane.planeDY"
|
oninput="value=value.replace(/[^\d.-]/g,'')" readonly></el-input>
|
</div>
|
<div
|
style="width:14%;height: 40px;border-right: 1px solid black;border-top: 1px solid black;border-bottom: 1px solid black">
|
<el-input class="class1" style=" border: none;" v-model="plane.planeDZ"
|
oninput="value=value.replace(/[^\d.-]/g,'')" readonly></el-input>
|
</div>
|
</div>
|
|
<el-button @click="onDfSubmit" type="success" style="margin-top: 5px;">计算坐标</el-button>
|
|
<el-button @click="onClear" type="success" style="margin-left: 180px; margin-top: 50px;">清空数据</el-button>
|
|
|
</div>
|
<div style="text-align: center;color: #f5f7fa;position: absolute;font-size: 12px;bottom:30px;left: 0;right: 0;">
|
<a target="_blank" id="icp">北京华星北斗智控技术有限公司版权所有京ICP备15062414号-11</a>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
//测试数据
|
// String posPlane = "158,596,0;671,596,0;158,1430,0";
|
// String posPointCloud = "3.851,8.806,-0.207;7.68,5.362,-0.197;-1.71,2.54,-0.21";
|
// String posPointCloudCheck = "-1.161,3.115,2.424";
|
// 成功获取到后端数据 161.5472106600515;1352.1185150148528;263.3654095401726;
|
import axios from 'axios';
|
//const dfurl = 'http://39.106.210.13:8848/hxzkuwb/ddmm2d';
|
const plane = 'http://39.106.210.13:8087/toplane';
|
// const plane = 'http://localhost:8888/hxzkuwb/toplane';
|
// const dfurl = 'http://127.0.0.1:8848/hxzkuwb/ddmm2d';
|
// const duurl = 'http://127.0.0.1:8848/hxzkuwb/dd2ddmm';
|
// const dfurl = 'http://localhost:8848/Hxzkrd/compute/ddmm2d';
|
// const plane = 'http://localhost:8888/Hxzkrd/toplane';
|
export default {
|
|
data() {
|
return {
|
three: {
|
threeA: '',
|
threeB: '',
|
threeC: '',
|
threeAX: '',
|
threeAY: '',
|
threeAZ: '',
|
threeBX: '',
|
threeBY: '',
|
threeBZ: '',
|
threeCX: '',
|
threeCY: '',
|
threeCZ: '',
|
threeDX: '',
|
threeDY: '',
|
threeDZ: '',
|
},
|
plane: {
|
planeA: '',
|
planeB: '',
|
planeC: '',
|
planeAX: '',
|
planeAY: '',
|
planeAZ: '',
|
planeBX: '',
|
planeBY: '',
|
planeBZ: '',
|
planeCX: '',
|
planeCY: '',
|
planeCZ: '',
|
planeDX: '',
|
planeDY: '',
|
planeDZ: '',
|
},
|
|
};
|
},
|
methods: {
|
goToDistance() {
|
|
this.$router.push('/distance'); // 根据自定义的路由设置跳转到指定页面
|
// this.$router.go(0);
|
},
|
goToindex() {
|
const url = 'http://huaxingzhikong.com/';
|
window.open(url, '_blank');
|
// window.location.href = "http://huaxingzhikong.com/";
|
// this.$router.push('/'); // 根据自定义的路由设置跳转到指定页面
|
},
|
goToDegree() {
|
// this.$router.go(0);
|
this.$router.push('/degree'); // 根据自定义的路由设置跳转到指定页面
|
},
|
goToCoordinate() {
|
this.$router.push('/coordinate'); // 根据自定义的路由设置跳转到指定页面
|
},
|
goToplane() {
|
this.$router.go(0);// 根据自定义的路由设置跳转到指定页面
|
},
|
onDfSubmit() {
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入激光点云A点X坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入激光点云A点Y坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入激光点云A点Z坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入激光点云B点X坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入激光点云B点Y坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入激光点云B点Z坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入激光点云C点X坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入激光点云C点Y坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入激光点云C点Z坐标');
|
// }
|
// CAD地图
|
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入CAD地图A点X坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入CAD地图A点Y坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入CAD地图A点Z坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入CAD地图B点X坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入CAD地图B点Y坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入CAD地图B点Z坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入CAD地图C点X坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入CAD地图C点Y坐标');
|
// }
|
// if ( !this.three.threeA) {
|
// this.$message.error('请输入CAD地图C点Z坐标');
|
// }
|
|
console.log(this.three.threeAX);
|
this.three.threeA = this.three.threeAX + "," + this.three.threeAY + "," + this.three.threeAZ
|
this.three.threeB = this.three.threeBX + "," + this.three.threeBY + "," + this.three.threeBZ
|
this.three.threeC = this.three.threeCX + "," + this.three.threeCY + "," + this.three.threeCZ
|
const posPointCloud = this.three.threeA + ";" + this.three.threeB + ";" + this.three.threeC
|
|
console.log(this.plane.planeAX);
|
this.plane.planeA = this.plane.planeAX + "," + this.plane.planeAY + "," + this.plane.planeAZ
|
this.plane.planeB = this.plane.planeBX + "," + this.plane.planeBY + "," + this.plane.planeBZ
|
this.plane.planeC = this.plane.planeCX + "," + this.plane.planeCY + "," + this.plane.planeCZ
|
const posPlane = this.plane.planeA + ";" + this.plane.planeB + ";" + this.plane.planeC
|
|
const posPointCloudCheck = this.three.threeDX + "," + this.three.threeDY + "," + this.three.threeDZ
|
|
console.log(posPlane);
|
console.log(posPointCloud);
|
console.log(posPointCloudCheck);
|
const params = { posPlane: posPlane, posPointCloud: posPointCloud, posPointCloudCheck: posPointCloudCheck };
|
axios.get(plane, { params })
|
.then((response) => {
|
console.log('成功获取到后端数据', response.data);
|
// 处理返回的数据
|
// console.log(res);
|
if (response.data == "选点有问题,请重新选点") {
|
this.$message.error('选点有问题,请重新选点');
|
} else {
|
// this.plane.planeDX = response.data.split(";")[0]
|
// this.plane.planeDY = response.data.split(";")[1]
|
// this.plane.planeDZ = response.data.split(";")[2]
|
|
this.plane.planeDX = parseFloat(response.data.split(";")[0]).toFixed(2)
|
this.plane.planeDY = parseFloat(response.data.split(";")[1]).toFixed(2)
|
this.plane.planeDZ = parseFloat(response.data.split(";")[2]).toFixed(2)
|
}
|
|
})
|
.catch((error) => {
|
this.$message.error('坐标数据不能为空');
|
console.error('获取后端数据失败', error);
|
// 错误处理
|
});
|
},
|
|
onClear() {
|
this.three.threeA = ''
|
this.three.threeAX = ''
|
this.three.threeAY = ''
|
this.three.threeAZ = ''
|
this.three.threeB = ''
|
this.three.threeBX = ''
|
this.three.threeBY = ''
|
this.three.threeBZ = ''
|
this.three.threeC = ''
|
this.three.threeCX = ''
|
this.three.threeCY = ''
|
this.three.threeCZ = ''
|
this.three.threeDX = ''
|
this.three.threeDY = ''
|
this.three.threeDZ = ''
|
this.plane.planeA = ''
|
this.plane.planeAX = ''
|
this.plane.planeAY = ''
|
this.plane.planeAZ = ''
|
this.plane.planeB = ''
|
this.plane.planeBX = ''
|
this.plane.planeBY = ''
|
this.plane.planeBZ = ''
|
this.plane.planeC = ''
|
this.plane.planeCX = ''
|
this.plane.planeCY = ''
|
this.plane.planeCZ = ''
|
this.plane.planeDX = ''
|
this.plane.planeDY = ''
|
this.plane.planeDZ = ''
|
}
|
}
|
}
|
</script>
|
<style>
|
/* 鼠标未悬浮时效果设置 */
|
.title_linespan {
|
margin-left: 10px;
|
color: #007cf0
|
}
|
|
/* 鼠标悬浮后的设置 */
|
.title_linespan:hover {
|
color: #ffffff;
|
text-decoration: underline;
|
}
|
|
.fullscreen-bgp {
|
position: fixed;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
background-color: #0f0f0f;
|
/* 浅灰色背景 */
|
z-index: -1;
|
/* 确保背景在其他内容之下 */
|
}
|
|
.plane {
|
/* border-radius: 10px; */
|
background-color: #0783e991;
|
text-align: center;
|
width: 1300px;
|
height: 430px;
|
margin: auto;
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
}
|
|
/* .el-textarea{
|
height:880px;
|
:deep(.el-textarea__inner){
|
height: 880px;
|
}
|
}
|
:deep(.el-input__wrapper) {
|
font-size: 14px;
|
/* width: 100%; */
|
/* height:320px;
|
} */
|
.el-input__inner {
|
border-radius: 0px;
|
/* font-size: 11px; */
|
}
|
|
.class1 .el-input__inner {
|
border-radius: 0px;
|
/* background-color: rgba(231, 233, 243, 100) !important;
|
height: 40px; */
|
}
|
|
.class2 .el-input__inner {
|
border-radius: 0px;
|
/* background-color: rgba(205, 211, 232, 100) !important;
|
height: 40px; */
|
}
|
|
.class3 .el-input__inner {
|
/* background-color: rgba(67, 113, 1194, 100) !important; */
|
border-radius: 0px;
|
/* height: 40px; */
|
}
|
</style>
|
