【ids】OTA管理页面开发

已于 2022-12-15 18:09:07 修改
阅读量436 收藏 2
点赞数 1
分类专栏： ids项目 文章标签： javascript 前端 vue.js
于 2022-11-14 14:00:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/someday____/article/details/127784085
版权

Plan

  • 给ids项目新增”OTA异常上报事件“管理页面。

Do

思路：建前端页面->写后端逻辑->前后端交互。

  1. 建前端页面：添加权限管理->给角色添加权限->建vue
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  2. 写后端逻辑
    创建实体：OtaAbnormalMonitorEntity
@TableName("t_event_ota_abnormal_monitor")
@Setter
@Getter
public class OtaAbnormalMonitorEntity extends Model<OtaAbnormalMonitorEntity> {

    private static final long serialVersionUID = -9078427217800571038L;

    @TableId(type = IdType.ASSIGN_UUID)
    private String id;

    @ExcelProperty(columnName = "事件ID")
    private String eventId;

    private String uid;

    /**
     * Success / Fail
     */
    @ExcelProperty(columnName = "结果")
    private String result;

    private String updateMechanism;

    private String realmName;

    private String processName;

    private String processId;

    private String versionName;

    private String hash;

    private String signatureAlgorithm;

    private String failureCode;

    private long fileSize;

    @ExcelProperty(columnName = "vin")
    private String vin;

    @ExcelProperty(columnName = "创建时间")
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date createTime;

    @ExcelProperty(columnName = "创建人")
    private String createUser;

    @ExcelProperty(columnName = "异常发生时间")
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date time;
}

创建OtaAbnormalMonitorMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.dao.OtaAbnormalMonitorDao">

    <resultMap id="OtaAbnormalMonitorMap" type="com.desaysv.tsp.logic.entity.event.OtaAbnormalMonitorEntity">
        <id property="id" column="id"/>
        <result property="eventId" column="event_id"/>
        <result property="uid" column="uid"/>
        <result property="result" column="result"/>
        <result property="updateMechanism" column="update_mechanism"/>
        <result property="realmName" column="realm_name"/>
        <result property="processName" column="process_name"/>
        <result property="processId" column="process_id"/>
        <result property="versionName" column="version_name"/>
        <result property="hash" column="hash"/>
        <result property="signatureAlgorithm" column="signature_algorithm"/>
        <result property="failureCode" column="failure_code"/>
        <result property="fileSize" column="file_size"/>
        <result property="vin" column="vin"/>
        <result property="createUser" column="create_user"/>
        <result property="createTime" column="create_time"/>
        <result property="time" column="time"/>
    </resultMap>

    <sql id="OtaAbnormalMonitorSql">
        t_event_ota_abnormal_monitor.`id`,
        t_event_ota_abnormal_monitor.`uid`,
        t_event_ota_abnormal_monitor.`event_id`,
        t_event_ota_abnormal_monitor.`result`,
        t_event_ota_abnormal_monitor.`update_mechanism`,
        t_event_ota_abnormal_monitor.`realm_name`,
        t_event_ota_abnormal_monitor.`process_name`,
        t_event_ota_abnormal_monitor.`process_id`,
        t_event_ota_abnormal_monitor.`version_name`,
        t_event_ota_abnormal_monitor.`hash`,
        t_event_ota_abnormal_monitor.`signature_algorithm`,
        t_event_ota_abnormal_monitor.`failure_code`,
        t_event_ota_abnormal_monitor.`file_size`,
        t_event_ota_abnormal_monitor.`vin`,
        t_event_ota_abnormal_monitor.`create_user`,
        t_event_ota_abnormal_monitor.`create_time`,
        t_event_ota_abnormal_monitor.`time`
    </sql>

    <select id="selectPage1" resultMap="OtaAbnormalMonitorMap">
        SELECT
        <include refid="OtaAbnormalMonitorSql"/>
        FROM t_event_ota_abnormal_monitor
        <where>
            <if test="query.id != null and query.id != ''">
                AND id like concat('%', #{query.id}, '%')
            </if>
            <if test="query.vin != null and query.vin != ''">
                AND vin like concat('%', #{query.vin}, '%')
            </if>
            <if test="query.result != null and query.result != ''">
                AND result like concat('%', #{query.result}, '%')
            </if>
        </where>
        order by t_event_ota_abnormal_monitor.`create_time` desc
    </select>

创建dao

@Repository
public interface OtaAbnormalMonitorDao extends BaseMapper<OtaAbnormalMonitorEntity> {
    IPage<OtaAbnormalMonitorEntity> selectPage1(IPage<OtaAbnormalMonitorEntity> page, @Param("query") OtaAbnormalMonitorEntity otaAbnormalMonitorEntity);
}

创建service

public interface OtaAbnormalMonitorService extends IService<OtaAbnormalMonitorEntity>, Event {

    default IPage<OtaAbnormalMonitorEntity> page1(Page page, OtaAbnormalMonitorEntity otaAbnormalMonitorEntity) {
        return null;
    }

创建serviceImpl

@Service
public class OtaAbnormalMonitorServiceImpl extends ServiceImpl<OtaAbnormalMonitorDao, OtaAbnormalMonitorEntity> implements OtaAbnormalMonitorService {

    @Autowired
    private OtaAbnormalMonitorDao otaAbnormalMonitorDao;
    
    @Override
    public IPage<OtaAbnormalMonitorEntity> page1(Page page, OtaAbnormalMonitorEntity otaAbnormalMonitorEntity) {
        return this.baseMapper.selectPage1(page, otaAbnormalMonitorEntity);
    }

创建control

@Slf4j
@RestController
@AllArgsConstructor
@RequestMapping("/event/otaAbnormalReportEvent")
@Api(value = "otaAbnormalReportEvent", tags = "OTA异常上报事件")
public class OtaAbnormalMonitorController {

    private final OtaAbnormalMonitorService otaAbnormalMonitorService;

    @ApiOperation(value = "分页查询Page")
    @GetMapping("/page")
    public R getPage(Page page, OtaAbnormalMonitorEntity otaAbnormalMonitorEntity) {
        return R.ok(otaAbnormalMonitorService.page1(page, otaAbnormalMonitorEntity));
    }
}

3.前后端交互

  1. 去前端index.js 添加好对应路由：
                {
                    path: 'otaAbnormalReportEvent',
                    component: () => import('@/views/event/otaAbnormalReportEvent/index'),
                    meta: {
                        title: 'OTA异常上报事件',
                        icon: 'user'
                    }
                },
  1. 写index.vue
<template>
    <div class="execution">
      <avue-crud ref="crud"
                 :page.sync="page"
                 :data="tableData"
                 :table-loading="tableLoading"
                 :option="tableOption"
                 @on-load="getPage"
                 @refresh-change="refreshChange"
                 @row-update="handleUpdate"
                 @row-save="handleSave"
                 @row-del="handleDel"
                 @sort-change="sortChange"
                 @search-change="searchChange">
      </avue-crud>
    </div>
  </template>
  
  <script>
  import {addObj, delObj, getPage, putObj} from '@/api/event/otaAbnormalReportEvent'
  import {tableOption} from '@/constant/event/otaAbnormalReportEvent'
  
  export default {
    name: 'otaAbnormalReportEvent',
    data() {
      return {
        tableData: [],
        page: {
          total: 0, // 总页数
          pageNum: 1, // 当前页数
          pageSize: 10, // 每页显示多少条
          ascs: [],//升序字段
          descs: 'create_time'//降序字段
        },
        paramsSearch: {},
        tableLoading: false,
        tableOption: tableOption
      }
    },
    created() {
    },
    mounted: function () {
    },
    computed: {},
    methods: {
      searchChange(params, done) {
        params = this.filterForm(params)
        this.paramsSearch = params
        this.page.currentPage = 1
        this.getPage(this.page, params)
        done()
      },
      sortChange(val) {
        let prop = val.prop ? val.prop.replace(/([A-Z])/g, "_$1").toLowerCase() : '';
        if (val.order == 'ascending') {
          this.page.descs = []
          this.page.ascs = prop
        } else if (val.order == 'descending') {
          this.page.ascs = []
          this.page.descs = prop
        } else {
          this.page.ascs = []
          this.page.descs = []
        }
        this.getPage(this.page)
      },
      getPage(page, params) {
        this.tableLoading = true
        getPage(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          descs: this.page.descs,
          ascs: this.page.ascs,
        }, params, this.paramsSearch)).then(response => {
              this.tableData = response.data.records
              this.page.total = response.data.total
              this.page.currentPage = page.currentPage,
              this.page.pageSize = page.pageSize,
              this.tableLoading = false
            }
        ).catch(() => {
          this.tableLoading = false
        })
      },
      /**
       * @title 数据删除
       * @param row 为当前的数据
       * @param index 为当前删除数据的行数
       *
       **/
      handleDel: function (row, index) {
        var _this = this
        this.$confirm('是否确认删除此数据', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return delObj(row.id)
        }).then(data => {
              _this.$message({
                showClose: true,
                message: '删除成功',
                type: 'success'
              })
              this.getPage(this.page)
            }
        ).catch(function (err) {
        })
      },
      /**
       * @title 数据更新
       * @param row 为当前的数据
       * @param index 为当前更新数据的行数
       * @param done 为表单关闭函数
       *
       **/
      handleUpdate: function (row, index, done, loading) {
        putObj(row).then(data => {
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          })
          done()
          this.getPage(this.page)
        }).catch(() => {
          loading()
        })
      },
      /**
       * @title 数据添加
       * @param row 为当前的数据
       * @param done 为表单关闭函数
       *
       **/
      handleSave: function (row, done, loading) {
        addObj(row).then(data => {
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          })
          done()
          this.getPage(this.page)
        }).catch(() => {
          loading()
        })
      },
      /**
       * 刷新回调
       */
      refreshChange(page) {
        this.getPage(this.page)
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  @import "~@/styles/commonCss.scss";
  </style>

对应tableOption

export const tableOption = {
    dialogDrag: true,
    border: true,
    indexLabel: '序号',
    stripe: true,
    menuAlign: 'center',
    align: 'center',
    menuType: 'text',
    searchShow: false,
    excelBtn: false,
    printBtn: false,
    addBtn: false,
    editBtn: false,
    delBtn: false,
    viewBtn: true,
    menu: true,
    selection: true,
    searchMenuSpan: 6,
    column: [
        {
            label: 'ID',
            prop: 'id',
            search: true,
            slot: true,
            headerslot: true
        },
        {
            label: '事件ID',
            prop: 'eventId',
            search: false,
            slot: true,
            headerslot: true
        },
        {
            label: 'UID',
            prop: 'uid',
            search: false,
            slot: true,
            headerslot: true
        },
        {
            label: '结果',
            prop: 'result',
            search: true,
            slot: true,
            headerslot: true,
            type: 'select',
            dicData: [{
                label: '失败',
                value: '0'
            }, {
                label: '成功',
                value: '1'
            }]
        },
        {
            label: '更新方式',
            prop: 'updateMechanism',
            search: true,
            slot: true,
            headerslot: true,
        },
        {
            label: '领域名称',
            prop: 'realmName',
            search: true,
            slot: true,
            headerslot: true
        },
        {
            label: '进程名称',
            prop: 'processName',
            search: true,
            slot: true,
            headerslot: true
        },
        {
            label: '进程ID',
            prop: 'processId',
            search: true,
            slot: true,
            headerslot: true
        },
        {
            label: '版本号',
            prop: 'versionName',
            search: true,
            slot: true,
            headerslot: true
        },
        {
            label: 'HASH值',
            prop: 'hash',
            search: true,
            slot: true,
            headerslot: true
        },
        {
            label: '签名算法',
            prop: 'signatureAlgorithm',
            search: true,
            slot: true,
            headerslot: true
        },
        {
            label: '错误码',
            prop: 'failureCode',
            search: true,
            slot: true,
            headerslot: true
        },
        {
            label: '文件大小',
            prop: 'fileSize',
            search: true,
            slot: true,
            headerslot: true
        },
        {
            label: 'VIN码',
            prop: 'vin',
            search: true,
            slot: true,
            headerslot: true
        },

        {
            label: '创建者',
            prop: 'createUser',
            search: true,
            slot: true,
            headerslot: true,
        },
        {
            label: '创建时间',
            prop: 'createTime',
            display: false,
            rules: [
                {
                    required: true,
                    message: '请输入创建时间',
                    trigger: 'blur'
                },
            ],
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
        },
        {
            label: '异常时间',
            prop: 'time',
            display: false,
            rules: [
                {
                    required: true,
                    message: '请输入异常产生时间',
                    trigger: 'blur'
                },
            ],
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
        }
    ]
}

对应 js

import ajaxRequest from '../ajaxRequest'

export function getPage(query) {
    return ajaxRequest({
        url: '/event/otaAbnormalReportEvent/page',
        method: 'get',
        params: query
    })
}

export function addObj(obj) {
    return ajaxRequest({
        url: '/event/otaAbnormalReportEvent',
        method: 'post',
        data: obj
    })
}

export function getObj(id) {
    return ajaxRequest({
        url: '/event/otaAbnormalReportEvent/' + id,
        method: 'get'
    })
}

export function delObj(id) {
    return ajaxRequest({
        url: '/event/otaAbnormalReportEvent/' + id,
        method: 'delete'
    })
}

export function putObj(obj) {
    return ajaxRequest({
        url: '/event/otaAbnormalReportEvent',
        method: 'put',
        data: obj
    })
}

效果：
在这里插入图片描述
在这里插入图片描述

_Shanene
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
电子电气架构-详解OTA系统的开发
04-06
电子电气架构——详解OTA系统的开发
硬件协议开发篇------OTA协议
qq_69856800的博客
09-05 1171
随着物联网的快速发展，越来越多的设备需要进行固件更新和升级，以提供新功能、修复漏洞或改善性能。而传统的手动升级方式往往不仅耗时耗力，还存在一定的风险。为了解决这些问题，提供一种安全、高效、灵活的远程升级解决方案变得至关重要。至此，对于一名嵌入式工程师来说学习OTA技术是有必要的。ymodem协议是一个文件传输协议，由ChuckForsberg于上世纪90年代开发完成，通常用于资源受限的设备。xmodem、ymodem和zmodem协议是最常用的三种通信协议。
本地部署iOS应用OTA安装 Go + Goland详细实现步骤
wnnvv的专栏
05-08 853
用一台Mac Mini部署了Jenkins之后，打完包要下载到自己电脑用iTunes安装。 因此决定用Go在Mini 上也配置一个OTA在线安装环境 1. 下载安装Go https://golang.org/dl/ 默认安装路径在/usr/local/go，添加环境 vi ~/.bash_profile 添加内容 export PATH=$PATH:/usr/local/go...
Tina_Linux_OTA_开发指南
韦东山嵌入式专栏
02-24 1723
此文档主要介绍如何在OTA 时升级boot0/uboot。升级工具包含两个方面内容：OTA 命令升级boot0 和uboot。OTA 升级boot0 和uboot 的C/C++ APIs。SWUpdate 是一个开源的OTA 框架，提供了一种灵活可靠的方式来更新嵌入式系统上的软件。官方源码：官方文档：非官方翻译的中文文档：源码自带文档：解压tina/dl/swupdate-xxx.tar.xz ，解压后的doc 目录下即为此版本源码附带的文档。
IDS（入侵检测系统）简介
a1706620451的博客
09-13 9481
IDS
OTA 知识点整理从添加分区到界面设计
Venus 的博客
01-10 1906
OTA 知识点整理 这是建立在有完整的recovery 模式下面的添加。 1、OTA之分区添加 添加 misc 分区为例,把misc 换成 data system boot modem 等分区同样适用 1）先去配置添加分区的挂载 一般在： device/项目名/平台名/conf/fssrab.recovery.项目名 /dev/block/platform/****.dwm...
2021车用计算机网络OTA演示系统开发-25页.pdf
09-28
2021车用计算机网络OTA演示系统开发
基于8051产品开发的OTA范例程序
07-16
内容包含OTA源码、HEX转BIN工具、BIN加密工具、程序使用说明，注释清晰。
一款专为32位MCU开发的OTA组件
最新发布
04-06
开源工程是一款专为 32 位 MCU 开发的 OTA 组件，组件包含了 bootloader 、固件打包器 (Firmware_Packager) 、固件发送器 三部分，并提供了基于多款 MCU (STM32F1 / STM32F407 / STM32F411 / STM32L4) 和 YModem-1K ...
杰理AC69N系列OTA库的开发说明1
08-03
声明本项目所参考、使用技术必须全部来源于公知技术信息，或自主创新设计。本项目不得使用任何未经授权的第三方知识产权的技术信息。如个人使用未经授权的第三方知识产权的
OTA项目主要类结构
01-12
博文中的原稿资源, OTA 项目的主要类的结构图, 描述代码间的关联关系, 对于开发改造有个很好的了解
IDS相机二次开发（windows）
03-13
USB3.0相机IDS-UI-3060CP的二次开发，详细过程件博文 http://blog.csdn.net/liuuze5/article/details/50864715
汽车在线升级系统（OTA）开发浅析
SAUTOMOTIVE的博客
01-28 4248
本文由姜楠，姜姗姗，韩小鹏联合创作 摘要 介绍了汽车在线升级系统（OTA）的应用场景及功能，阐明了升级系统中车端及云端模块开发策略及架构；同时明确了与整车其他 ECU 的交互需求；最后介绍了在线升级系统测试相关内容。汽车在线升级逐步成为整车标准配置，本文通过这几部分的介绍，明确了在线升级系统开发框架，对后续产品开发具有指导意义。 1 引言 汽车联网能力日渐普及，以“互联网云服务”为中心的内容及服务系统逐步建立，为每位客户建立个人账户系统，提供语音交互，在线导航、新闻资讯、在线音乐电台等典
STM32项目中一种在线升级/应用升级OTA-IAP设计方案
热门推荐
健忘16的博客
08-21 1万+
STM32 OTA-IAP设计方案 OTA是Over-the-Air的简写，即空中下载技术，通过网络远程给用户进行系统更新和升级。IAP是In Application Programming的简写，IAP是用户自己的程序在运行过程中对User Flash的部分区域进行烧写，目的是为了在产品发布后可以方便地通过预留的通信口对产品中的固件程序进行更新升级。IAP主要包括BootLoader和应用程序两...
利用Python开发一个IDS系统
oiadkt的博客
03-07 617
Python开发一个IDS系统，实现检测主机是否遭受攻击
OTA简单介绍
02-20 9702
转载baidu文库  参考文档：IS_95B协议，683协议, 80-V0223-1_X3_ota     OTA是Over The Air的简称，也就是我们通常所说的空中接口。由发起方来分类，可以分成OTASP与OTAPA。其中：OTASP是Over the air service provisioning的简称，由用户端发起，通过拨打Activation code：*228,*228
如何构建一个入门级入侵检测系统
壁虎漫步的BLOG
07-11 1911
        通常来说，一个企业或机构准备进军此领域时，往往选择从基于网络的IDS入手，因为网上有很多这方面的开放源代码和资料，实现起来比较容易，并且，基于网络的IDS适应能力强。有了简单网络IDS的开发经验，再向基于主机的IDS、分布式IDS、智能IDS等方面迈进的难度就小了很多。在此，笔者将以基于网络的IDS为例，介绍典型的IDS开发思路。 　　根据CIDF规范，我们从功能上将入侵检测系
入侵检测系统IDS
小哥(xpc)
11-05 4337
入侵检测系统IDS 与入侵防御系统 IPS
android ab分区ota客户端开发
08-10
Android AB分区OTA客户端开发是指在Android设备上开发用于升级操作系统的OTA（Over-The-Air）客户端。AB分区是一种在Android设备上同时安装两个操作系统镜像的分区方案，它可以实现无缝升级，即在用户使用设备的同时进行系统更新。 开发这样的OTA客户端需要考虑以下几个方面： 1. 系统镜像管理：OTA客户端需要能够检测新的系统镜像并下载到设备上的某个位置进行存储。同时，它还需要能够管理设备上的AB分区，确保可用的分区被正确地用于系统更新。 2. 更新策略：OTA客户端应当有灵活的更新策略，例如支持用户选择在何时进行系统更新，或者在何种网络条件下进行更新。同时，OTA客户端还应当能够处理系统镜像下载过程中的中断或者错误，以确保软件升级的可靠性。 3. 升级过程控制：OTA客户端需要协调设备的重启和系统分区的切换，以完成系统更新。该过程需要在用户界面上提供相应的操作提示，并避免过程中的数据丢失或者其他不可预料的问题。 4. 用户界面设计：OTA客户端的用户界面应当友好易用，便于用户了解和控制系统升级的过程。界面应当提供升级进度显示、更新日志展示等功能，以让用户对系统更新的详细信息有一个了解。 总而言之，Android AB分区OTA客户端开发需要考虑到系统镜像管理、更新策略、升级过程控制和用户界面设计等方面，以确保系统更新的顺利进行，并提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值