rt-sim-training-client/src/views/newMap/displayNew/demon/scheduling.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">
        <el-card class="scheduling_header">
          <el-form>
            <el-row>
              <el-col :span="6">
                <el-form-item :label="$t('display.schedule.scheduleSelect')">
                  <el-date-picker
                    v-model="formModel.planDate"
                    clearable
                    size="small"
                    type="date"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                    @change="handleQuery"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('display.schedule.runDiagramName')">
                  <!--<el-select v-model="formModel.runPlanName" size="small" style="display: inline-block">-->
                  <!--<el-option-->
                  <!--v-for="item in runPlanList"-->
                  <!--:key="item.value"-->
                  <!--:label="item.label"-->
                  <!--:value="item.value"-->
                  <!--/>-->
                  <!--</el-select>-->
                  <el-input v-model="formModel.runPlanName" size="small" style="width:140px;" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="text-align: right">
                  <el-button-group>
                    <el-button size="small" type="primary" @click="handleSave">{{ $t('display.schedule.save') }}</el-button>
                  </el-button-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <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 { querySechedulingNew, generateSchedulingNew, saveSchedulingNew, generateSchedulingAgain } from '@/api/scheduling';
import { hexColor } from '@/utils/runPlan';
import EditTable from '@/views/components/editTable/index';

// 排班计划弹窗列表
export default {
    name: 'Scheduling',
    components: {
        EditTable
    },
    props: {
        group: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            show: false,
            loading: false,
            runPlanList: [],
            groupNumberList: [],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 24 * 3600 * 1000;
                }
            },
            formModel: {
                id: '',
                mode: '',
                planDate: '',
                runPlanName: ''
            },
            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: true,
                        editing: true
                    },
                    {
                        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 this.$t('display.schedule.schedulePlan');
        }
    },
    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.formModel.day = '';
            this.show = true;
        },
        doClose() {
            this.show = false;
        },
        handleQuery(day) {
            if (day) {
                this.loading = true;
                querySechedulingNew(this.group, {day}).then(resp => {
                    if (!resp.data) {
                        this.$confirm(this.$t('display.schedule.noSchedulePlan'), this.$t('global.tips'), {
                            confirmButtonText: this.$t('global.confirm'),
                            cancelButtonText: this.$t('global.cancel'),
                            type: 'warning'
                        }).then(() => {
                            this.handleGenerate(day);
                        }).catch(() => {
                            this.clearData();
                            this.loading = false;
                        });
                    } else {
                        this.tableData = this.initTableData(resp.data.planList || []);
                        this.formModel.id = resp.data.id;
                        this.formModel.planDate = resp.data.planDate;
                        this.formModel.runPlanName = resp.data.runPlanName;
                        this.$message.success(`${this.$t('display.schedule.loadData')} ${day} ${this.$t('display.schedule.schedulePlanSuccess')}`);
                        this.loading = false;
                    }
                }).catch(error => {
                    this.clearData();
                    if (error.code == 30002) {
                        this.handleReGenerate(day);
                    } else {
                        this.$messageBox(`${error.message}`);
                        this.loading = false;
                    }
                });
            }
        },
        handleGenerate(day) {
            generateSchedulingNew(this.group, {day}).then(resp => {
                this.loading = false;
                this.tableData = this.initTableData(resp.data.planList || []);
                this.formModel.id = resp.data.id;
                // this.formModel.planDate = resp.data.planDate;
                this.formModel.runPlanName = resp.data.runPlanName;
                this.$message.success(this.$t('display.schedule.createSchedulePlanSuccess'));
            }).catch(error => {
                this.loading = false;
                this.clearData();
                this.$messageBox(`${error.message}`);
            });
        },
        handleReGenerate(day) {
            generateSchedulingAgain(this.group).then(resp => {
                this.loading = false;
                this.tableData = this.initTableData(resp.data.planList || []);
                this.formModel.id = resp.data.id;
                this.formModel.planDate = resp.data.planDate;
                this.formModel.runPlanName = resp.data.runPlanName;
                this.$message.success(this.$t('display.schedule.regenerateSchedulePlanSuccess'));
            }).catch(error => {
                this.loading = false;
                this.clearData();
                this.$messageBox(`${error.message}`);
            });
        },
        handleSave() {
            if (this.formModel.planDate) {
                saveSchedulingNew(this.group, this.tableData).then(resp => {
                    if (resp.data && !resp.data.pass) {
                        this.setConflictList(resp.data.conflictList);
                        this.$message.warning(this.$t('display.schedule.checkFailed'));
                    } else {
                        this.setConflictList([]);
                        this.$message.success(this.$t('display.schedule.saveSchedulePlanSuccess'));
                    }
                }).catch(() => {
                    this.$messageBox(this.$t('display.schedule.saveSchedulePlanFail'));
                });
            } else {
                this.$messageBox(this.$t('display.schedule.selectSchedulePlan'));
            }

        },
        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;
        },
        clearData() {
            this.formModel.planDate = '';
            this.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>