Plan
- 给ids项目新增”OTA异常上报事件“管理页面。
Do
思路:建前端页面->写后端逻辑->前后端交互。
- 建前端页面:添加权限管理->给角色添加权限->建vue
- 写后端逻辑
创建实体: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.前后端交互
- 去前端index.js 添加好对应路由:
{
path: 'otaAbnormalReportEvent',
component: () => import('@/views/event/otaAbnormalReportEvent/index'),
meta: {
title: 'OTA异常上报事件',
icon: 'user'
}
},
- 写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
})
}
效果: