【ids】OTA管理页面开发

Bertha 。 2023-10-03 21:24 64阅读 0赞

### Plan ###

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

### Do ###

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

1.  建前端页面：添加权限管理->给角色添加权限->建vue  
    ![在这里插入图片描述][31351987eee1464197b1809410e860e0.png]  
    ![在这里插入图片描述][f0ebe751a62e4ca585cef80a4c7441b9.png]  
    ![在这里插入图片描述][7242570136984e24a31b4e7ebbc2a6cc.png]  
    ![在这里插入图片描述][ad82d1d91e924cf0b374490ce0bc49da.png]  
    ![在这里插入图片描述][bc32d3bbe5754d7d94eba14ca9be02ab.png]
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
        })
    }

效果：  
![在这里插入图片描述][196e77157d4f4b5f93722c551d1c3ee9.png]  
![在这里插入图片描述][2be42509f7af429eaa0616c00a7403a9.png]

[31351987eee1464197b1809410e860e0.png]: https://img-blog.csdnimg.cn/31351987eee1464197b1809410e860e0.png
[f0ebe751a62e4ca585cef80a4c7441b9.png]: https://img-blog.csdnimg.cn/f0ebe751a62e4ca585cef80a4c7441b9.png
[7242570136984e24a31b4e7ebbc2a6cc.png]: https://img-blog.csdnimg.cn/7242570136984e24a31b4e7ebbc2a6cc.png
[ad82d1d91e924cf0b374490ce0bc49da.png]: https://img-blog.csdnimg.cn/ad82d1d91e924cf0b374490ce0bc49da.png
[bc32d3bbe5754d7d94eba14ca9be02ab.png]: https://img-blog.csdnimg.cn/bc32d3bbe5754d7d94eba14ca9be02ab.png
[196e77157d4f4b5f93722c551d1c3ee9.png]: https://img-blog.csdnimg.cn/196e77157d4f4b5f93722c551d1c3ee9.png
[2be42509f7af429eaa0616c00a7403a9.png]: https://img-blog.csdnimg.cn/2be42509f7af429eaa0616c00a7403a9.png