<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Vue测试</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div class="div1" ref="addAlert" :style="'left:' + x + 'px;top:' + y + 'px'"></div>
<button @click="send">发送ajax请求</button>
<div>
<button @click="update_coor('01')">增加实际X坐标</button>
<button @click="update_coor('02')">增加实际Y坐标</button>
<button @click="update_coor('03')">减少实际X坐标</button>
<button @click="update_coor('04')">减少实际Y坐标</button>
</div>
<div>
<button @click="update_webCoor('01')">增加webX坐标</button>
<button @click="update_webCoor('02')">增加webY坐标</button>
<button @click="update_webCoor('03')">减少webX坐标</button>
<button @click="update_webCoor('04')">减少webY坐标</button>
<button @click="save_web_coor">保存</button>
</div>
<div>
<input type="text" placeholder="等差值" v-model="dis_px">
<!-- <button @click="save_webxy('01')">webX坐标</button> -->
<button @click="save_webxy('02')">webY坐标</button>
</div>
</div>
<style type="text/css">
#app{
position: relative;
width:1366px;
height:768px;
border:solid 0.1px #f00;
}
.div1{
position: absolute;
height:20px;
width:20px;
background: #f00;
top: 100px;
left: 300px;
}
</style>
<script>
new Vue({
el:"#app",
data: {
timer: null,
x: 0,
y: 0,
point_code:'p000000',
agv_run_rate:1,//agv速度
dis_px:'15',
url:'http://192.168.81.122:8081/nlagv_inter'
//url:'http://192.168.81.211:8080/wms/quaryAgvState'
},
methods:{
refresh () {
this.timer = setInterval(() => {
//this.send()
}, 1000)
},
send:function () {
let that=this;
/*this.x += 20;
this.y += 20; */
var parames=new URLSearchParams();
parames.append('methodName','queryAllAgvInfo');
axios.post(this.url
,parames
).then(res=>{
console.log(res.data)
that.x = parseFloat(res.data.arr[0].x_coordinate);
that.point_code = parseFloat(res.data.arr[0].point_code);
that.y = parseFloat(res.data.arr[0].y_coordinate);
})
.catch(function (error) {
console.log(error);
});
},
update_coor:function(para1){
var param=new URLSearchParams();
param.append('methodName','updateCoor');
param.append('operType',para1);
param.append('agv_run_rate',this.agv_run_rate);
axios.post(this.url,param)
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
},
save_webxy:function(para1){
var param=new URLSearchParams();
param.append('methodName','updateWebXy');
param.append('dis_px',this.dis_px);
param.append('operType',para1);
axios.post(this.url,param)
.then(function (response) {
//console.log(response.data);
alert('操作成功!');
})
.catch(function (error) {
console.log(error);
});
},
update_webCoor:function(para1){
var param=new URLSearchParams();
param.append('methodName','updateWebCoor');
param.append('point_code',this.point_code);
param.append('operType',para1);
axios.post(this.url,param)
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
},
save_web_coor:function(){//保存web点位坐标
var param=new URLSearchParams();
param.append('methodName','saveWebCoor');
param.append('point_code',this.point_code);
param.append('web_x',this.x);
param.append('web_y',this.y);
axios.post(this.url,param)
.then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error);
});
}
},
mounted () {
this.refresh()
},
beforeDestroy () {
clearInterval(this.timer)
}
});
</script>
</body>
</html>
java servlet代码
package com.noblelift.imp.agv;
import java.io.IOException;
import java.lang.reflect.Method;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
public class AgvShowServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("doPost进来了");
service(req, resp);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("get进来了");
service(request, response);
}
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("service方法进来了");
// 设置字符集为utf-8
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
resp.setCharacterEncoding("UTF-8");
// 下面两行解决跨域问题
resp.setHeader("Access-Control-Allow-Origin", "*");
resp.setHeader("Cache-Control", "no-cache");
// 需要执行这个servlet的方法类型
String methodName = req.getParameter("methodName");
String result = "";
try {
Class<?> clz = Class.forName(AgvShowServiceImpl2.class.getName());
Object obj = clz.newInstance();
// 调用每个指令类的updateInstStatus()方法
Method m = obj.getClass().getDeclaredMethod(methodName, HttpServletRequest.class);
JSONArray arr = (JSONArray) m.invoke(obj, req);
result = feedBack(true, "操作成功", arr);
resp.getWriter().write(result);
return;
} catch (Exception e) {
e.printStackTrace();
if (e.getMessage() == null) {
e.printStackTrace();
}
result = e.getMessage();
if (result == null) {
result = e.toString();
}
result = feedBack(false, result, new JSONArray());
}
resp.setCharacterEncoding("UTF-8");
resp.getWriter().write(result);
return;
}
/**
*
* @discription 封装返回结果
* @author ldjun
* @created 2020年10月12日 下午1:40:46
* @param success
* true:成功，false:失败
* @param msg
* 结果描述
* @param array
* 返回的json数组集
* @return
*/
private String feedBack(Boolean success, String msg, JSONArray array) {
JSONObject Json = new JSONObject();
Json.put("success", success);
Json.put("message", msg);
Json.put("arr", array);
System.out.println("出去了：" + Json.toString());
return Json.toString();
}
}
