数据库
1. CREATE DATABASE /*!32312 IF NOT EXISTS*/`检测小车` /*!40100 DEFAULT CHARACTER SET utf8 */; 2. 3. USE `检测小车`; 4. 5. /*Table structure for table `t_plane` */ 6. 7. DROP TABLE IF EXISTS `t_plane`; 8. 9. CREATE TABLE `t_plane` ( 10. `id` int(10) NOT NULL AUTO_INCREMENT, 11. `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '数据插入时间', 12. `x` float DEFAULT NULL, 13. `y` float DEFAULT NULL, 14. PRIMARY KEY (`id`) 15. ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8; 16. 17. /*Data for the table `t_plane` */ 18. 19. insert into `t_plane`(`id`,`create_time`,`x`,`y`) values (1,'2022-08-26 10:48:31',1,1),(2,'2022-08-27 10:48:34',2,2),(3,'2022-08-28 15:21:45',3,3),(4,'2022-08-28 17:38:24',4,4),(5,'2022-08-28 17:40:22',4,3),(6,'2022-08-28 17:41:10',4,4),(7,'2022-08-28 17:42:26',6,6),(8,'2022-08-28 17:51:06',2,2);
后端
目前后端只实现了一个接口，可以获取数据库的全部表单。
当前端发送请求时，会计算数据库最新插入的数据的插入时间和当前时间的差，如果这个差值大于一定值，就说明这条信息已经超时，不需要在前端提示，则返回的数据中一个变量设置为false,否则，设置为true。
核心逻辑
1. @CrossOrigin 2. @RestController 3. @RequestMapping("/plane") 4. public class planeController { 5. @Autowired 6. private planeService Service1; 7. 8. @GetMapping 9. public R1 getAll() throws ParseException { 10. int count = Service1.count(); 11. System.out.println("总行数 "+count); 12. 13. plane users=Service1.selectById(count); 14. System.out.println("最后插入的数据 "+users); 15. 16. TimeZone time = TimeZone.getTimeZone("Etc/GMT-8"); //转换为中国时区 17. TimeZone.setDefault(time); 18. 19. SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); 20. Date date=new Date(); 21. String currentDate=sdf.format(date); 22. String createDate=sdf.format(users.getCreateTime()); 23. 24. //将string格式转化为date 25. Date date1 = sdf.parse(currentDate); 26. Date date2 = sdf.parse(createDate); 27. 28. 29. //得到计算出时间差 30. long diff = 3600000*8+date1.getTime() - date2.getTime(); 31. long diffSeconds = diff / 1000 ; 32. 33. 34. List<plane> planes=Service1.getAll(); 35. Collections.reverse(planes); 36. if(diffSeconds>20) { 37. return new R1(false, planes); 38. } 39. 40. return new R1(true, planes); 41. } 42. 43. }
地址：无人机监控后端: 无人机监控后端，使用了springboot,mysql
前端
前端目前只实现了简单的表单渲染功能，核心代码
1. <template> 2. <div> 3. <!-- 卡片视图区域 --> 4. <el-card> 5. <!-- 用户列表区 --> 6. <el-table :data="message" border stripe> 7. <el-table-column type="index" label="id"></el-table-column> 8. <el-table-column label="纬度" prop="x"></el-table-column> 9. <el-table-column label="经度" prop="y"></el-table-column> 10. <el-table-column label="时间" prop="createTime"></el-table-column> 11. 12. </el-table> 13. </el-card> 14. 15. </div> 16. </template> 17. 18. <script> 19. export default { 20. data() { 21. return { 22. queryInfo: { 23. data: '', 24. flag: false 25. }, 26. message:[], 27. timer:null 28. } 29. }, 30. created() { 31. this.getUserList() 32. }, 33. methods:{ 34. async getUserList() { 35. const { data:res } = await this.$http.get('plane',{params: this.queryInfo,jsonp: 'handleCallback'}) 36. console.log(res) 37. this.message = res.data 38. } 39. }, 40. mounted() { 41. // 每隔5分钟定时刷新 42. this.timer = setInterval(() => { 43. this.getUserList(); 44. }, 3000) 45. }, 46. beforeDestroy() { 47. clearInterval(this.timer); 48. }, 49. 50. } 51. </script> 52. 53. <style lang="less" scoped> 54. </style>
