255 lines
9.2 KiB
Vue
255 lines
9.2 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog
|
|
v-dialogDrag
|
|
:title="title"
|
|
:visible.sync="show"
|
|
top="50px"
|
|
width="95%"
|
|
:before-do-close="doClose"
|
|
:close-on-click-modal="false"
|
|
:z-index="2000"
|
|
>
|
|
<div class="scheduling">
|
|
<div class="scheduling_body">
|
|
<div class="scheduling_body-table">
|
|
<edit-table ref="table" v-loading="loading" border stripe :table-data="tableData" :table-form="tableForm" :row-style="handleRowStyle" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { queryCurrentSecheduling } from '@/api/scheduling';
|
|
import { hexColor } from '@/utils/runPlan';
|
|
import EditTable from '@/views/components/editTable/index';
|
|
|
|
// 排班计划弹窗列表
|
|
export default {
|
|
name: 'AddQuest',
|
|
components: {
|
|
EditTable
|
|
},
|
|
props: {
|
|
group: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
loading: false,
|
|
runPlanList: [],
|
|
groupNumberList: [],
|
|
tableForm: {
|
|
index: true,
|
|
columns: [
|
|
// {
|
|
// title: this.$t('display.schedule.driverNumber'),
|
|
// prop: 'driverCode',
|
|
// type: 'text'
|
|
// },
|
|
{
|
|
title: this.$t('display.schedule.trainNumber'),
|
|
prop: 'groupNumber',
|
|
type: 'select',
|
|
width: '150',
|
|
options: () => { return this.groupNumberList; },
|
|
editable: false,
|
|
editing: false
|
|
},
|
|
{
|
|
title: this.$t('display.schedule.onlineSection'),
|
|
prop: 'outDepotTrip.outDepotSectionCode',
|
|
type: 'text',
|
|
format: (row) => { return this.handleDeviceName(row.outDepotTrip.outDepotSectionCode); }
|
|
},
|
|
{
|
|
title: this.$t('display.schedule.onlineServerNumber'),
|
|
prop: 'outDepotTrip.serviceNumber',
|
|
type: 'text',
|
|
format: (row) => { return row.outDepotTrip.serviceNumber; }
|
|
},
|
|
{
|
|
title: this.$t('display.schedule.onlineTargetNumber'),
|
|
prop: 'outDepotTrip.destinationCode',
|
|
type: 'text',
|
|
format: (row) => { return row.outDepotTrip.destinationCode; }
|
|
},
|
|
{
|
|
title: this.$t('display.schedule.onlineTime'),
|
|
prop: 'outDepotTrip.outDepotTime',
|
|
type: 'text',
|
|
format: (row) => { return row.outDepotTrip.outDepotTime; }
|
|
},
|
|
{
|
|
title: this.$t('display.schedule.onlineTripNumber'),
|
|
prop: 'outDepotTrip.tripNumber',
|
|
type: 'text',
|
|
format: (row) => { return row.outDepotTrip.tripNumber; }
|
|
},
|
|
{
|
|
title: this.$t('display.schedule.outDepot'),
|
|
prop: 'outDepotTrip.outDepotCode',
|
|
type: 'text',
|
|
format: (row) => { return this.handleDeviceName(row.outDepotTrip.outDepotCode); }
|
|
},
|
|
{
|
|
title: this.$t('display.schedule.outDepotStatus'),
|
|
prop: 'outDepotTrip.status',
|
|
type: 'tag',
|
|
columnValue: (row) => { return this.$ConstSelect.translate(row.outDepotTrip.status, 'Whether'); },
|
|
tagType: (row) => {
|
|
switch (row.outDepotTrip.status) {
|
|
case true: return 'success';
|
|
case false: return 'danger';
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: this.$t('display.schedule.offlineSection'),
|
|
prop: 'offlineSection',
|
|
type: 'text',
|
|
format: (row) => { return this.handleDeviceName(row.inDepotTrip.inDepotSectionCode); }
|
|
},
|
|
{
|
|
title: this.$t('display.schedule.offlineServerNumber'),
|
|
prop: 'offlineServerNumber',
|
|
type: 'text',
|
|
format: (row) => { return row.inDepotTrip.serviceNumber; }
|
|
},
|
|
{
|
|
title: this.$t('display.schedule.offlineTargetNumber'),
|
|
prop: 'offlineTargetNumber',
|
|
type: 'text',
|
|
format: (row) => { return row.inDepotTrip.destinationCode; }
|
|
},
|
|
{
|
|
title: this.$t('display.schedule.offlineTime'),
|
|
prop: 'offlineTime',
|
|
type: 'text',
|
|
format: (row) => { return row.inDepotTrip.inDepotTime; }
|
|
},
|
|
{
|
|
title: this.$t('display.schedule.offlineTripNumber'),
|
|
prop: 'offlineTripNumber',
|
|
type: 'text',
|
|
format: (row) => { return row.inDepotTrip.tripNumber; }
|
|
},
|
|
{
|
|
title: this.$t('display.schedule.inDepot'),
|
|
prop: 'inDepot',
|
|
type: 'text',
|
|
format: (row) => { return this.handleDeviceName(row.inDepotTrip.inDepotCode); }
|
|
},
|
|
{
|
|
title: this.$t('display.schedule.inDepotStatus'),
|
|
prop: 'inStatus',
|
|
type: 'tag',
|
|
columnValue: (row) => { return this.$ConstSelect.translate(row.inDepotTrip.status, 'Whether'); },
|
|
tagType: (row) => {
|
|
switch (row.inDepotTrip.status) {
|
|
case true: return 'success';
|
|
case false: return 'danger';
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
tableData: []
|
|
};
|
|
},
|
|
computed: {
|
|
title() {
|
|
return '派班计划预览';
|
|
}
|
|
},
|
|
watch: {
|
|
'$store.state.map.mapDataLoadedCount': function () {
|
|
const trainList = this.$store.state.map.map.trainList || [];
|
|
this.groupNumberList = [];
|
|
trainList.forEach(item => {
|
|
this.groupNumberList.push({value: item.code, label: item.groupNumber});
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
doShow() {
|
|
this.initData();
|
|
this.show = true;
|
|
},
|
|
doClose() {
|
|
this.show = false;
|
|
},
|
|
initData() {
|
|
this.loading = true;
|
|
queryCurrentSecheduling(this.group).then(resp => {
|
|
this.tableData = [];
|
|
if (resp.data) {
|
|
this.tableData = this.initTableData(resp.data.planList || []);
|
|
// this.$message.success(`${this.$t('display.schedule.loadData')}${this.$t('display.schedule.schedulePlanSuccess')}`);
|
|
}
|
|
this.loading = false;
|
|
}).catch(error => {
|
|
this.$messageBox(`${error.message}`);
|
|
this.loading = false;
|
|
});
|
|
},
|
|
handleRowStyle({row, rowIndex}) {
|
|
return row['$conflict'] ? {background: row.$conflict} : {background: '#FFF'};
|
|
},
|
|
setConflictList(list) {
|
|
this.tableData.forEach(elem => { elem['$conflict'] = null; });
|
|
if (list && list.length) {
|
|
list.forEach(idList => {
|
|
const color = hexColor.colorRandom();
|
|
this.tableData.forEach(elem => {
|
|
if (idList.includes(parseInt(elem.id))) {
|
|
elem['$conflict'] = color;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
this.tableData = [...this.tableData];
|
|
},
|
|
initTableData(tableData) {
|
|
tableData.forEach(elem => {
|
|
this.$set(elem, '$conflict', null);
|
|
});
|
|
|
|
return tableData;
|
|
},
|
|
handleDeviceName(code) {
|
|
const device = this.$store.getters['map/getDeviceByCode'](code) || {};
|
|
return device.name;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped rel="stylesheet/scss" lang="scss">
|
|
.scheduling {
|
|
&_header {
|
|
background: #fff;
|
|
padding: 30px 30px 0;
|
|
}
|
|
&_body {
|
|
margin-top: 30px;
|
|
background: #ffff;
|
|
border: 1px solid #F1F1F1;
|
|
width: 100%;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
/deep/ .el-dialog__body {
|
|
background: #fafafa;
|
|
}
|
|
|
|
/deep/ label {
|
|
font-weight: 0;
|
|
}
|
|
</style>
|