<template>
|
<div class="fullscreen-bg">
|
<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" style="color: #f5f7fa; text-decoration: underline;" type="text" @click="goToDegree">度分转换</el-button >
|
<el-button class="title_linespan" type="text" @click="goToCoordinate">坐标计算</el-button >
|
<el-button class="title_linespan" type="text" @click="goToplane">坐标转换</el-button >
|
</div>
|
|
<div class="bg-red">
|
<el-form :inline="true" :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
|
<h3 style="margin-left: -330px; color: #f5f7fa;">度分转度</h3>
|
|
<el-input type="textarea" :rows="3" v-model="formLabelAlign.df" placeholder="输入度分格式数据" style="width: 90%; margin-top: 5px;"></el-input>
|
<el-form-item style="margin-top: 20px; margin-right: 20px; color: #f5f7fa;">
|
<el-input v-model="formLabelAlign.resdu" style="margin-left: 10px; width: 325px;"></el-input>
|
</el-form-item>
|
<el-form-item style="margin-top: 20px; margin-left: -15px; color: #f5f7fa;">
|
<el-button @click="onDfSubmit" type="success">计算</el-button>
|
</el-form-item>
|
<!--------------------------------------------------------------->
|
<h3 style="margin-left: -330px; color: #f5f7fa;">度转度分</h3>
|
|
<el-input type="textarea" :rows=3 v-model="formLabelAlign.du" placeholder="输入度格式数据数据" style="width: 90%; margin-top: 5px;"></el-input>
|
<el-form-item style="margin-top: 20px; margin-right: 20px; color: #f5f7fa;">
|
<el-input v-model="formLabelAlign.resdf" style="margin-left: 10px; width: 325px;"></el-input>
|
</el-form-item>
|
<el-form-item style="margin-top: 20px; margin-left: -15px; color: #f5f7fa;">
|
<el-button @click="onDuSubmit" type="success">计算</el-button>
|
</el-form-item>
|
</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 dfurl = 'http://39.106.210.13:8848/hxzkuwb/ddmm2d';
|
const duurl = 'http://39.106.210.13:8848/hxzkuwb/dd2ddmm';
|
// 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 duurl = 'http://localhost:8848/Hxzkrd/compute/dd2ddmm';
|
export default {
|
|
data() {
|
return {
|
labelPosition: 'right',
|
formLabelAlign: {
|
df: '',
|
du: '',
|
resdu: '',
|
resdf: ''
|
}
|
};
|
},
|
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.push('/toplane'); // 根据自定义的路由设置跳转到指定页面
|
},
|
onDfSubmit() {
|
console.log(this.formLabelAlign.df.split("."));
|
if (!this.formLabelAlign.df) {
|
this.$message.error('请输入度分格式数据');
|
}else if (this.formLabelAlign.df.split(".").length!=2) {
|
this.$message.error('输入有误，无法计算！请检查数据');
|
} else {
|
const changeOrigin = true;
|
const params = { df: this.formLabelAlign.df };
|
axios.get(dfurl, { params })
|
.then((response) => {
|
console.log('成功获取到后端数据', response.data);
|
// 处理返回的数据
|
// console.log(res);
|
this.formLabelAlign.resdu = response.data
|
})
|
.catch((error) => {
|
console.error('获取后端数据失败', error);
|
// 错误处理
|
});
|
}
|
|
|
|
|
},
|
onDuSubmit() {
|
if (!this.formLabelAlign.du) {
|
this.$message.error('请输入度格式数据');
|
}else if (this.formLabelAlign.du.split(".").length!=2) {
|
this.$message.error('输入有误，无法计算！请检查数据');
|
} else {
|
const params = { du: this.formLabelAlign.du };
|
axios.get(duurl, { params })
|
.then((response) => {
|
console.log('成功获取到后端数据', response.data);
|
// 处理返回的数据
|
// console.log(res);
|
this.formLabelAlign.resdf = response.data
|
})
|
.catch((error) => {
|
console.error('获取后端数据失败', error);
|
// 错误处理
|
});
|
}
|
},
|
}
|
}
|
</script>
|
<style>
|
/* 鼠标未悬浮时效果设置 */
|
.title_linespan {
|
margin-left: 10px;
|
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{
|
height:880px;
|
:deep(.el-textarea__inner){
|
height: 880px;
|
}
|
}
|
:deep(.el-input__wrapper) {
|
font-size: 14px;
|
/* width: 100%; */
|
/* height:320px;
|
} */
|
|
</style>
|
