<template>
|
<div class="fullscreen-bg">
|
<div style="width: 20%;margin-top: 10px;">
|
<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" style="color: #f5f7fa; text-decoration: underline;" type="text" @click="goToCoordinate">坐标计算</el-button >
|
<el-button class="title_linespan" type="text" @click="goToplane">坐标转换</el-button >
|
</div>
|
|
<div class="bg-red">
|
<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
|
<el-form-item style="margin-top: 20px; margin-right: 20px; color: #f5f7fa;">
|
<span slot="label">
|
<span style="color: #f5f7fa">A点</span>
|
</span>
|
<el-input v-model="formLabelAlign.gnssa" placeholder="输入A点经度;纬度;x坐标;y坐标"></el-input>
|
</el-form-item>
|
<el-form-item style=" margin-right: 20px; color: #f5f7fa;">
|
<span slot="label">
|
<span style="color: #f5f7fa">B点</span>
|
</span>
|
<el-input v-model="formLabelAlign.gnssb" placeholder="输入B点经度;纬度;x坐标;y坐标"></el-input>
|
</el-form-item>
|
|
<el-form-item style=" margin-right: 20px; color: #f5f7fa;">
|
<span slot="label">
|
<span style="color: #f5f7fa">C点</span>
|
</span>
|
<el-input v-model="formLabelAlign.latlog" placeholder="输入C点经度;纬度"></el-input>
|
</el-form-item>
|
<el-form-item style="margin-top: 60px; margin-right: 20px; color: #f5f7fa;">
|
<span slot="label">
|
<span style="color: #f5f7fa">xy坐标</span>
|
</span>
|
<el-input v-model="formLabelAlign.disxy"></el-input>
|
</el-form-item>
|
<el-button @click="onSubmit" type="success"
|
style=" margin-right: 50px; margin-top: 180px;" class="fixed-button">计算坐标</el-button>
|
<el-button @click="onClear" type="success" style=" margin-left: 80px; margin-top:180px" class="fixed-buttonB">清空数据</el-button>
|
</el-form>
|
|
</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>
|
import axios from 'axios';
|
const url = 'http://39.106.210.13:8848/hxzkuwb/gnssToxy';
|
// const url = 'http://127.0.0.1:8848/hxzkuwb/gnssToxy';
|
// const url = 'http://localhost:8848/Hxzkrd/compute/gnssToxy';
|
export default {
|
|
data() {
|
return {
|
dialogVisible: false,
|
labelPosition: 'right',
|
formLabelAlign: {
|
gnssa: '',
|
gnssb: '',
|
latlog: '',
|
disxy: []
|
}
|
};
|
},
|
methods: {
|
goToDistance() {
|
this.$router.push('/distance'); // 根据自定义的路由设置跳转到指定页面
|
},
|
goToindex() {
|
const url = 'http://huaxingzhikong.com/';
|
window.open(url, '_blank');
|
// window.location.href = "http://huaxingzhikong.com/";
|
// this.$router.push('/'); // 根据自定义的路由设置跳转到指定页面
|
},
|
goToDegree() {
|
this.$router.push('/degree'); // 根据自定义的路由设置跳转到指定页面
|
},
|
goToCoordinate() {
|
this.$router.go(0);
|
// this.$router.push('/coordinate'); // 根据自定义的路由设置跳转到指定页面
|
},
|
goToplane() {
|
this.$router.push('/toplane'); // 根据自定义的路由设置跳转到指定页面
|
},
|
onSubmit() {
|
var axy = this.formLabelAlign.gnssa.replace(/\s*/g,"").split(";")
|
var bxy = this.formLabelAlign.gnssb.replace(/\s*/g,"").split(";")
|
var clatlog = this.formLabelAlign.latlog.split(";")
|
if (axy.length != 4) {
|
this.$message.error('A点经纬度xy坐标异常，无法计算！请检查长度');
|
} else if (bxy.length != 4) {
|
this.$message.error('B点经纬度xy坐标异常，无法计算！请检查长度');
|
} else if (clatlog.length != 2) {
|
this.$message.error('C点经纬度异常，无法计算！请检查长度');
|
} else {
|
const params = { gnssa: this.formLabelAlign.gnssa, gnssb: this.formLabelAlign.gnssb, gnsslat: clatlog[0], gnsslog: clatlog[1] };
|
axios.get(url, { params })
|
.then((response) => {
|
console.log('成功获取到后端数据', response.data);
|
// 处理返回的数据
|
this.formLabelAlign.disxy = response.data[0] + "," + response.data[1]
|
})
|
.catch((error) => {
|
console.error('获取后端数据失败', error);
|
// 错误处理
|
});
|
}
|
},
|
onClear() {
|
this.formLabelAlign.gnssa = ''
|
this.formLabelAlign.gnssb = ""
|
this.formLabelAlign.latlog = ''
|
this.formLabelAlign.disxy = ''
|
}
|
}
|
}
|
</script>
|
<style>
|
/* 鼠标未悬浮时效果设置 */
|
.title_linespan {
|
color: #007cf0
|
}
|
/* 鼠标悬浮后的设置 */
|
.title_linespan:hover {
|
color: #ffffff;
|
text-decoration: underline;
|
}
|
.fullscreen-bg {
|
position: fixed;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
background-color: #0f0f0f;
|
/* 浅灰色背景 */
|
z-index: -1;
|
/* 确保背景在其他内容之下 */
|
}
|
|
.bg-red {
|
/* border-radius:10px; */
|
background-color: #0783e991;
|
text-align: center;
|
width: 450px;
|
height: 630px;
|
margin: auto;
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
}
|
|
/* .el-textarea {
|
width: 90%;
|
} */
|
|
/* .el-textarea__inner {
|
margin-top: 20px;
|
line-height: 250%
|
} */
|
.fixed-button {
|
position: absolute;
|
left: 20px;
|
bottom: 20px;
|
width: 30%; /* 可以根据需要设置宽度 */
|
}
|
.fixed-buttonB {
|
position: absolute;
|
right: 20px;
|
bottom: 20px;
|
width: 30%; /* 可以根据需要设置宽度 */
|
}
|
</style>
|
