|
|
|
@@ -0,0 +1,275 @@ |
|
|
|
<template> |
|
|
|
<div class="water-data"> |
|
|
|
<el-form :inline="true" :model="searchParam" class="demo-form-inline"> |
|
|
|
<el-form-item label="预警编号"> |
|
|
|
<el-input |
|
|
|
clearable |
|
|
|
v-model="searchParam.alarmSn" |
|
|
|
size="small" |
|
|
|
placeholder="请输入任务单号" |
|
|
|
style="width: 150px" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="区划"> |
|
|
|
<driverAreaSelect v-model="searchParam.driverArea"></driverAreaSelect> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="河道名称"> |
|
|
|
<el-input |
|
|
|
clearable |
|
|
|
v-model="searchParam.driverName" |
|
|
|
size="small" |
|
|
|
placeholder="请输入河道名称" |
|
|
|
style="width: 150px" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="日期"> |
|
|
|
<el-date-picker |
|
|
|
style="width: 220px" |
|
|
|
placeholder="日期" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
v-model="searchParam.time" |
|
|
|
type="daterange" |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期" |
|
|
|
></el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="状态"> |
|
|
|
<el-select |
|
|
|
clearable |
|
|
|
v-model="searchParam.status" |
|
|
|
size="small" |
|
|
|
placeholder="-请选择-" |
|
|
|
> |
|
|
|
<el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.id"/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button |
|
|
|
:loading="tableLoading" |
|
|
|
icon="el-icon-search" |
|
|
|
@click="search" |
|
|
|
size="small" |
|
|
|
type="primary" |
|
|
|
>搜索 |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
icon="el-icon-refresh-right" |
|
|
|
@click="initSearchParam();search()" |
|
|
|
type="primary" |
|
|
|
size="small" |
|
|
|
style="background-color: #fff; border: 1px solid #ccc ; color: #666" |
|
|
|
>清空 |
|
|
|
</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-table |
|
|
|
stripe |
|
|
|
ref="table" |
|
|
|
:height="tableHeight" |
|
|
|
v-loading="tableLoading" |
|
|
|
:data="dataList" |
|
|
|
border |
|
|
|
size="medium" |
|
|
|
row-key="id" |
|
|
|
> |
|
|
|
<el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center"/> |
|
|
|
<el-table-column |
|
|
|
min-width="100" |
|
|
|
show-overflow-tooltip |
|
|
|
prop="alarmSn" |
|
|
|
label="报警编号" |
|
|
|
align="center" |
|
|
|
></el-table-column> |
|
|
|
<el-table-column min-width="100" show-overflow-tooltip prop="areaName" label="区划" align="center"/> |
|
|
|
<el-table-column min-width="100" show-overflow-tooltip prop="driverName" label="河湖名称" align="center"/> |
|
|
|
<el-table-column |
|
|
|
min-width="120" |
|
|
|
show-overflow-tooltip |
|
|
|
prop="inspectTime" |
|
|
|
label="巡检日期" |
|
|
|
align="center" |
|
|
|
/> |
|
|
|
<el-table-column show-overflow-tooltip prop="alarmStandard" label="水质标准" align="center" min-width="100"/> |
|
|
|
<el-table-column show-overflow-tooltip prop="alarmInfo" label="报警信息" align="center" min-width="100"> |
|
|
|
<template slot-scope="{row}"> |
|
|
|
<span style="color: red">{{row.alarmInfo}}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column show-overflow-tooltip prop="statusText" label="状态" align="center" min-width="90"/> |
|
|
|
<el-table-column show-overflow-tooltip prop="alarmTime" label="报警时间" align="center" min-width="160"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="操作" align="left" width="160"> |
|
|
|
<template slot-scope="{row}"> |
|
|
|
<el-button |
|
|
|
v-if="(isAdmin||btnRule.some(btn=>btn=='edit'))&&(row.status==1||row.status==3)" |
|
|
|
@click="edit(row)" |
|
|
|
type="primary" |
|
|
|
size="mini" |
|
|
|
icon="el-icon-s-check" |
|
|
|
>报警 |
|
|
|
</el-button> |
|
|
|
<el-button |
|
|
|
v-if="(isAdmin||btnRule.some(btn=>btn=='detail'))" |
|
|
|
@click="detail(row)" |
|
|
|
type="primary" |
|
|
|
size="mini" |
|
|
|
icon="el-icon-document" |
|
|
|
>详情 |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<div class="page-current"> |
|
|
|
<el-pagination |
|
|
|
:current-page="currentPage" |
|
|
|
:page-size="pageSize" |
|
|
|
prev-text="上一页" |
|
|
|
next-text="下一页" |
|
|
|
background |
|
|
|
layout="total, prev, pager, next, jumper" |
|
|
|
style="display: inline-block;" |
|
|
|
:total="count" |
|
|
|
@current-change="handleCurrentChange" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<infoForm |
|
|
|
:data="dataChild" |
|
|
|
@handleClose="visible=false" |
|
|
|
v-if="visible" |
|
|
|
:visible="visible" |
|
|
|
> |
|
|
|
</infoForm> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import api from "@/api/water/waterAlarm"; |
|
|
|
import driverAreaSelect from "@/components/driverAreaSelect"; |
|
|
|
import infoForm from './infoForm' |
|
|
|
import {mapGetters} from "vuex"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "water-data", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
statusList: [ |
|
|
|
{id: 1, name: '未报警'}, |
|
|
|
{id: 2, name: '已报警'}, |
|
|
|
{id: 3, name: '已取消'}, |
|
|
|
{id: 4, name: '处理中'}, |
|
|
|
{id: 5, name: '处理完成'}, |
|
|
|
], |
|
|
|
dataChild: {}, |
|
|
|
visible: false, |
|
|
|
dataList: [], |
|
|
|
currentPage: 1, |
|
|
|
count: 0, |
|
|
|
pageSize: parseInt((document.body.clientHeight - 300 - 43) / 47), |
|
|
|
tableHeight: document.body.clientHeight - 300, |
|
|
|
tableLoading: false, |
|
|
|
searchParam: { |
|
|
|
alarmSn: "", |
|
|
|
driverName: "", |
|
|
|
driverArea: "", |
|
|
|
time: "", |
|
|
|
status: '' |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters(["btnRule", "isAdmin"]) |
|
|
|
}, |
|
|
|
components: {driverAreaSelect, infoForm}, |
|
|
|
created() { |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.tableLoading = true; |
|
|
|
this.getAllList(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
detail(row){ |
|
|
|
this.tableLoading = true; |
|
|
|
api.getDetail(row.id).then(res => { |
|
|
|
this.dataChild=res.data |
|
|
|
this.visible=true |
|
|
|
this.tableLoading = false; |
|
|
|
}).catch(e => { |
|
|
|
this.tableLoading = false; |
|
|
|
}); |
|
|
|
}, |
|
|
|
edit(row) { |
|
|
|
this.$confirm("确定要信息报警吗", "提示", { |
|
|
|
confirmButtonText: "确定", |
|
|
|
cancelButtonText: "取消", |
|
|
|
type: "warning" |
|
|
|
}).then(() => { |
|
|
|
this.tableLoading = true; |
|
|
|
api.edit({id: row.id, status: 2}).then(res => { |
|
|
|
this.$message({ |
|
|
|
type: "success", |
|
|
|
message: "操作成功" |
|
|
|
}); |
|
|
|
this.getAllList(); |
|
|
|
}).catch(e => { |
|
|
|
this.tableLoading = false; |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
indexMethod(index) { |
|
|
|
return index + 1 + (this.currentPage - 1) * this.pageSize; |
|
|
|
}, |
|
|
|
initSearchParam() { |
|
|
|
this.searchParam = { |
|
|
|
alarmSn: "", |
|
|
|
driverName: "", |
|
|
|
driverArea: "", |
|
|
|
time: "", |
|
|
|
status: '' |
|
|
|
}; |
|
|
|
}, |
|
|
|
search() { |
|
|
|
this.currentPage = 1; |
|
|
|
this.tableLoading = true; |
|
|
|
this.$refs.table.bodyWrapper.scrollTop = 0; |
|
|
|
this.getAllList(); |
|
|
|
}, |
|
|
|
handleCurrentChange(val) { |
|
|
|
this.tableLoading = true; |
|
|
|
this.currentPage = val; |
|
|
|
this.$refs.table.bodyWrapper.scrollTop = 0; |
|
|
|
this.getAllList(); |
|
|
|
}, |
|
|
|
getAllList() { |
|
|
|
let searchParam = JSON.parse(JSON.stringify(this.searchParam)); |
|
|
|
if (searchParam.time && searchParam.time.length > 0) { |
|
|
|
searchParam.startTime = searchParam.time[0]; |
|
|
|
searchParam.endTime = searchParam.time[1]; |
|
|
|
delete searchParam.time; |
|
|
|
} |
|
|
|
searchParam.page = this.currentPage; |
|
|
|
searchParam.pageSize = this.pageSize; |
|
|
|
api.getAllList(searchParam).then(res => { |
|
|
|
this.dataList = res.data.records ? res.data.records : []; |
|
|
|
this.count = res.data.total; |
|
|
|
this.tableLoading = false; |
|
|
|
}).catch(e => { |
|
|
|
this.dataList = []; |
|
|
|
this.tableLoading = false; |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less"> |
|
|
|
.water-data { |
|
|
|
height: fit-content; |
|
|
|
background-color: #fff; |
|
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); |
|
|
|
padding: 15px; |
|
|
|
} |
|
|
|
</style> |
huxinglu
před 4 roky