cloud-ui/src/views/business/faultLogs/index.vue

329 lines
12 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="车辆VIN" prop="carVin">
<el-input
v-model="queryParams.carVin"
placeholder="请输入车辆VIN"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="故障码" prop="faultCode">
<el-input
v-model="queryParams.faultCode"
placeholder="请输入故障码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="故障名称" prop="faultName">
<el-input
v-model="queryParams.faultName"
placeholder="请输入故障名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="开始报警时间" prop="startAlarmTime">
<el-date-picker clearable v-model="queryParams.startAlarmTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择开始报警时间"></el-date-picker>
</el-form-item>
<el-form-item label="结束报警时间" prop="endAlarmTime">
<el-date-picker clearable v-model="queryParams.endAlarmTime" type="datetime" placeholder="请选择结束报警时间"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="el-icon-plus"-->
<!-- size="mini"-->
<!-- @click="handleAdd"-->
<!-- v-hasPermi="['business:faultLogs:add']"-->
<!-- >新增</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="success"-->
<!-- plain-->
<!-- icon="el-icon-edit"-->
<!-- size="mini"-->
<!-- :disabled="single"-->
<!-- @click="handleUpdate"-->
<!-- v-hasPermi="['business:faultLogs:edit']"-->
<!-- >修改</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="danger"-->
<!-- plain-->
<!-- icon="el-icon-delete"-->
<!-- size="mini"-->
<!-- :disabled="multiple"-->
<!-- @click="handleDelete"-->
<!-- v-hasPermi="['business:faultLogs:remove']"-->
<!-- >删除</el-button>-->
<!-- </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="faultLogsList" >
<!-- <el-table-column type="selection" width="55" align="center" />@selection-change="handleSelectionChange"-->
<!-- <el-table-column label="故障码主键" align="center" prop="logId" />-->
<el-table-column label="车辆VIN" align="center" prop="carVin" />
<el-table-column label="故障码" align="center" prop="faultCode" />
<el-table-column label="故障名称" align="center" prop="faultName" />
<el-table-column label="是否产生报警" align="center" prop="alarmFlag" >
<template slot-scope="scope">
<dict-tag :options="dict.type.vehicle_alarm_status" :value="scope.row.alarmFlag"/>
</template>
</el-table-column>
<el-table-column label="开始报警时间" align="center" prop="startAlarmTime" width="180"/>
<el-table-column label="结束报警时间" align="center" prop="endAlarmTime" width="180"/>.
<el-table-column label="最近报警时间" align="center" prop="recentlyAlarmTime" width="180"/>
<el-table-column label="处理时间" align="center" prop="disposeTime" width="180"/>
<el-table-column label="处理人" align="center" prop="disposeBy" />
<el-table-column label="处理状态" align="center" prop="disposeStatus">
<template slot-scope="scope">
<dict-tag :options="dict.type.vehicle_dispose_status" :value="scope.row.disposeStatus"/>
</template>
</el-table-column>
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-edit"-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- v-hasPermi="['business:faultLogs:edit']"-->
<!-- >修改</el-button>-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-delete"-->
<!-- @click="handleDelete(scope.row)"-->
<!-- v-hasPermi="['business:faultLogs:remove']"-->
<!-- >删除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改故障记录 -->
<!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
<!-- <el-form ref="form" :model="form" :rules="rules" label-width="120px">-->
<!-- <el-form-item label="车辆VIN" prop="carVin">-->
<!-- <el-input v-model="form.carVin" placeholder="请输入车辆VIN"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="故障码" prop="faultCode">-->
<!-- <el-input v-model="form.faultCode" placeholder="请输入故障码"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="故障名称" prop="faultName">-->
<!-- <el-input v-model="form.faultName" placeholder="请输入故障名称"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="是否产生报警">-->
<!-- <el-radio-group v-model="form.alarmFlag">-->
<!-- <el-radio v-for="dict in dict.type.vehicle_alarm_status" :key="dict.value"-->
<!-- :label="dict.value">{{dict.label}}</el-radio></el-radio-group>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="开始报警时间">-->
<!-- <el-date-picker v-model="form.startAlarmTime" type="datetime" placeholder="请选择开始报警时间"></el-date-picker>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="备注">-->
<!-- <editor v-model="form.remark" :min-height="192"/>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!-- <el-button @click="cancel"> </el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
</div>
</template>
<script>
//这里可以导入其他文件比如组件工具js第三方插件jsjson文件图片文件等等,
//例如import { 组件名称 } from '组件路径',
import { listFaultLogs, addFaultLogs, getFaultLogs, editFaultLogs, delFaultLogs } from '@/api/business/faultLogs'
export default {
name: "FaultLogs",
dicts: ['vehicle_alarm_status','vehicle_dispose_status'],
data() {
//这里存放数据
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 故障记录表格数据
faultLogsList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
carVin: null,
faultCode: null,
faultName: '',
startAlarmTime: null,
endAlarmTime: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
// 列信息
columns:[
{ key: 0, label: `车辆VIN`, visible: true },
{ key: 1, label: `故障码`, visible: true },
{ key: 2, label: `故障名称`, visible: true },
{ key: 3, label: `是否产生报警`, visible: true },
{ key: 4, label: `开始报警时间`, visible: true },
{ key: 5, label: `结束报警时间`, visible: true },
{ key: 6, label: `最近报警时间`, visible: true },
{ key: 7, label: `处理时间`, visible: true },
{ key: 8, label: `处理人`, visible: true },
{ key: 9, label: `处理状态`, visible: true },
]
}
},
methods: {
// 查询故障记录列表
getList() {
this.loading = true
listFaultLogs(this.queryParams).then(res => {
this.faultLogsList = res.data.rows
this.total = res.data.total
this.loading = false
})
},
// 取消按钮
cancel(){
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
logId: null,
carVin: null,
faultCode: null,
faultName: null,
alarmFalg: null,
startAlarmTime: null,
endAlarmTime: null,
recentlyAlarmTime: null,
disposeTime: null,
disposeBy: null,
disposeStatus: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null
};
this.resetForm("form")
},
/** 搜索按钮操作*/
handleQuery(){
this.queryParams.pageNum = 1;
this.getList()
},
/**重置按钮操作*/
resetQuery(){
this.resetForm("queryForm")
this.handleQuery()
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// /**多选框选中数据*/
// handleSelectionChange(selection){
// this.ids = selection.map(item => item.logId)
// this.single = selection.length !== 1
// this.multiple = !selection.length
// },
// /**新增故障日志记录*/
// handleAdd(){
// this.reset()
// this.open = true;
// this.title = "添加故障日志"
// },
// /**修改按钮操作*/
// handleUpdate(row){
// this.reset()
// const logId = row.logId || this.ids
// getFaultLogs(logId).then(res => {
// this.form = res.data
// this.open = true
// this.title = "修改故障日志"
// })
// },
// /**提交按钮*/
// submitForm(){
// this.$refs["form"].validate(valid => {
// if (valid){
// if (null != this.form.logId){
// editFaultLogs(this.form).then(res => {
// this.$message.success('修改成功')
// this.open = false
// this.getList()
// })
// }else {
// addFaultLogs(this.form).then(res => {
// this.$message.success('新增成功')
// this.open = false
// this.getList()
// })
// }
// }
// })
// },
// /**删除按钮操作*/
// handleDelete(row){
// const logIds = row.logId || this.ids
// this.$modal.confirm('是否确认删除故障记录编号为"' + logIds + '"的数据项?').then(function (){
// return delFaultLogs(logIds)
// }).then(() => {
// this.getList()
// this.$message.success('删除成功')
// }).catch(() => {})
// }
},
//声明周期 - 创建完成可以访问当前this实例,
created() {
this.getList()
}
}
</script>
<style scoped>
</style>