<template>
|
<div class="v-views-safety-lost-found-list">
|
<div class="content">
|
<div class="filter-section flex">
|
<!-- 查询条件 -->
|
<el-form
|
style="flex: 1"
|
:inline="true"
|
:model="filter"
|
ref="filterForm"
|
class="g-table-filter"
|
>
|
<el-form-item label="报告名称">
|
<el-input
|
style="width: 154px"
|
v-model="filter.lineName"
|
placeholder="请输入关键字并回车"
|
@keypress.enter.native="handleChange"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
|
<div class="action-bar">
|
<div class="action-item orange pointer" @click="dialogVisible = true">
|
生成报告
|
</div>
|
</div>
|
</div>
|
<div class="g-table">
|
<el-table
|
:data="dataList"
|
stripe
|
v-loading="loading"
|
height="calc(100vh - 400px)"
|
header-row-class-name="table-header"
|
highlight-current-row
|
@sort-change="handleChangeSort"
|
style="width: 100%"
|
>
|
<el-table-column
|
prop="lineName"
|
label="序号"
|
width="150"
|
type="index"
|
align="center"
|
>
|
|
</el-table-column>
|
<el-table-column
|
prop="lineName"
|
label="报告名称"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<div>{{scope.row.lineName}}运营评估报告</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="lineName"
|
label="评估周期"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<div>{{scope.row.start_date ? getTime(scope.row.start_date): ''}} {{scope.row.end_date ? `~${getTime(scope.row.end_date)}` : ''}}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="rcrdTime"
|
label="报告时间"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<div>{{getTime(scope.row.createDateTime, 'yyyy年MM月DD日 HH:mm:ss')}}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="lineName"
|
label="操作"
|
width="100"
|
align="center"
|
class="mr20"
|
>
|
<template slot-scope="scope">
|
<div class="mr20">
|
<div class="_table-btn" @click="handleDetail(scope.row)">查看报告</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="g-pagination">
|
<el-pagination
|
layout="total, prev, pager, next"
|
:current-page="filter.page"
|
:page-size="filter.limit"
|
:total="total"
|
background
|
prev-text="上一页"
|
next-text="下一页"
|
@current-change="handlePageChange"
|
></el-pagination>
|
</div>
|
</div>
|
<el-dialog title="" :visible.sync="dialogVisible" :show-close="false" width="558px">
|
<img src="../../assets/assess/icon_close.png" class="_close" @click="dialogVisible = false" />
|
<img src="../../assets/assess/bg_title.png" />
|
<div class="_title">运营评估报告</div>
|
|
<div class="g-from mt20 _form">
|
<el-form ref="form" :model="form" label-width="80px">
|
<el-form-item label="选择线路">
|
<el-select style="width: 214px" v-model="form.lineId" remote
|
reserve-keyword
|
:remote-method="lineLoad"
|
filterable placeholder="请选择"
|
>
|
<el-option v-for="(item, index) in lineList" :key="index" :label="item.lineName" :value="item.lineId"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="评估周期">
|
<el-date-picker
|
v-model="timeRange"
|
type="daterange"
|
placeholder="请选择"
|
style="width: 214px"
|
range-separator="~"
|
:clearable="false"
|
@change="handleTimeChange"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-form>
|
|
</div>
|
<div class="action-bar mb30">
|
<div class="action-item orange pointer" @click="handleCreate">
|
生成报告
|
</div>
|
</div>
|
</el-dialog>
|
|
|
</div>
|
</template>
|
<script>
|
import moment from "moment";
|
import { message } from 'ant-design-vue'
|
export default {
|
name: "shift",
|
data() {
|
return {
|
reRender: true,
|
loading: false,
|
dialogVisible: false,
|
timeRange: [moment().subtract(2, 'day'), moment()],
|
form: {
|
lineId: '',
|
startDate: moment().format("yyyy-MM-DD"),
|
endDate: moment().format("yyyy-MM-DD")
|
},
|
lineList: [],
|
filter: {
|
lineName: '',
|
page: 1,
|
limit: 20,
|
order: '',
|
orderField: ''
|
},
|
total: 0,
|
dataList: [],
|
}
|
},
|
created() {
|
if(this.reRender) {
|
this.loadData();
|
}
|
},
|
computed: {
|
},
|
activated() {
|
if(!this.reRender) {
|
this.loadData();
|
}
|
},
|
methods: {
|
handleTimeChange(e) {
|
if(e[0]) {
|
this.form.startDate = moment(e[0]).format("yyyy-MM-DD");
|
this.form.endDate = moment(e[1]).format("yyyy-MM-DD");
|
}
|
},
|
async handleCreate() {
|
let isCreate = await this.loadCreate();
|
if(!isCreate) {
|
this.dialogVisible = false;
|
this.$router.push({
|
path: '/assessReportCreate',
|
query: {
|
...this.form,
|
}
|
})
|
} else {
|
message.warning('获取数据为空, 请重新选择');
|
|
}
|
},
|
loadCreate() { // 验证是否可以生成
|
return this.$axios
|
.get(this.$Interface.assess.createReport, {
|
params: {
|
...this.form,
|
logo: 1
|
}
|
|
})
|
.then((res) => {
|
console.log(res, 'res');
|
|
return res.code;
|
}).catch(err => {
|
return err.data && err.data.code
|
})
|
|
},
|
lineLoad(query) {
|
this.$axios.get(this.$Interface.mapResource.getXianLuAllByName, {
|
params: {lineName: query},
|
}).then((res) => {
|
this.lineList = res.data;
|
});
|
|
},
|
handleDetail(row) {
|
this.$router.push(`/assessReportCreate?id=${row.reportId}`)
|
},
|
loadData() {
|
this.loading = true;
|
this.$axios
|
.get(this.$Interface.assess.getReportListByLineName, {
|
params: {
|
...this.filter,
|
},
|
})
|
.then((res) => {
|
this.dataList = res.data.records;
|
this.total = Number(res.data.total);
|
this.loading = false;
|
});
|
},
|
handlePageChange(page) {
|
this.filter.page = page;
|
this.loadData();
|
},
|
exportData() {
|
|
},
|
handleChange() {
|
this.filter.page = 1;
|
this.loadData();
|
},
|
handleChangeSort(e, v) {
|
let obj = {
|
'ascending': 'asc',
|
'descending': 'desc'
|
}
|
this.filter.order = e.order ? obj[e.order] : '';
|
this.filter.orderField = e.order ? (e.column && e.column.sortBy) : '';
|
this.loadData();
|
|
|
},
|
getTime(value, type) {
|
let format = type || 'yyyy年MM月DD日'
|
return moment(value).format(format)
|
},
|
handleClick(type, row) {
|
this.$router.push({
|
path: '/safetyDriveDetail',
|
query: {
|
type,
|
id: row.id
|
}
|
});
|
|
}
|
|
},
|
deactivated() {
|
this.reRender = false;
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.v-views-safety-lost-found-list {
|
padding: 40px 30px;
|
padding-bottom: 0;
|
.el-dialog {
|
position: relative;
|
background: #0D111A;
|
border: 1px solid #3B4757;
|
color: #fff;
|
._form {
|
margin-left: 120px;
|
}
|
._close {
|
position: absolute;
|
top: 15px;
|
right: 20px;
|
font-family: 'PingFangSC';
|
font-size: 16px
|
|
}
|
._title {
|
position: absolute;
|
left: 60px;
|
top: 24px;
|
|
}
|
.el-dialog__header {
|
padding: 0;
|
}
|
.el-dialog__body {
|
padding: 16px;
|
color: #fff;
|
}
|
.el-dialog__headerbtn {
|
width: 13px;
|
height: 13px;
|
|
}
|
}
|
.content {
|
margin-top: 16px;
|
.filter-section {
|
display: flex;
|
align-items: flex-start;
|
text-align: right;
|
}
|
}
|
.action-bar {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
font-size: 14px;
|
margin-left: 20px;
|
padding-top: 5px;
|
.action-item {
|
padding: 8px 30px;
|
border-left: 2px solid;
|
border-right: 2px solid;
|
opacity: 0.8;
|
}
|
.orange {
|
border-color: #1cd1d3;
|
background-color: rgba(28, 209, 211, 0.1);
|
}
|
.blue {
|
border-color:#3e89d3;
|
background-color: rgba(62, 137, 211, 0.1);
|
}
|
}
|
._content {
|
margin: 16px 72px 0;
|
}
|
._table-btn {
|
color: #48A4FF;
|
cursor: pointer;
|
}
|
}
|
|
|
</style>
|
