rt-sim-training-client/src/views/planMonitor/newEditTool/menus/modifyingTask.vue

<template>
  <el-dialog
    v-dialogDrag
    class="planEdit__tool add-task"
    :title="title"
    :visible.sync="dialogShow"
    width="1000px"
    :before-close="doClose"
    :z-index="2000"
    top="50px"
    :modal="false"
    :close-on-click-modal="false"
  >
    <el-row>
      <el-col :span="4">
        <el-row>
          <el-col :span="9" class="lineHeight">
            <span>{{ $t('planMonitor.modifying.tripNumber') }}</span>
          </el-col>
          <el-col :span="15">
            <el-select v-model="tripNumber" size="mini" style="display: inline-black" disabled :placeholder="$t('planMonitor.modifying.pleaseSelect')">
              <el-option
                v-for="item in tripNumberList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="2">
        <el-row>
          <el-col :offset="8" class="lineHeight">
            <el-checkbox v-model="editModel.trainManual">{{ $t('planMonitor.modifying.manual') }}</el-checkbox>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row>
          <el-col :span="11" :offset="1" class="lineHeight">
            <span>{{ $t('planMonitor.modifying.defaultStopTime') }}</span>
          </el-col>
          <el-col :span="12">
            <el-input-number v-model="defaultStopTime" placeholder="请输入时间" size="mini" :controls="false" :min="0" />
            <!-- <el-select
              v-model="editModel.defaultStopTime"
              style="display: inline-black"
              size="mini"
              :placeholder="$t('planMonitor.modifying.pleaseSelect')"
            >
              <el-option
                v-for="item in defaultStopTimeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="5">
        <el-row>
          <el-col :span="9" :offset="2" class="lineHeight">
            <span>{{ $t('planMonitor.modifying.serviceNumber') }}</span>
          </el-col>
          <el-col :span="13">
            <el-input v-model="serviceNumber" size="mini" disabled />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="7" class="lineHeight">
        <el-row>
          <el-col :span="22" :offset="2">
            <el-row>
              <el-col :span="6">
                <el-checkbox v-model="editModel.clearGuest">{{ $t('planMonitor.modifying.clearGuest') }}</el-checkbox>
              </el-col>
              <el-col :span="8">
                <el-checkbox v-model="editModel.continuationPlan">{{ $t('planMonitor.modifying.continuationPlan') }}</el-checkbox>
              </el-col>
              <el-col :span="6">
                <el-checkbox v-model="editModel.firstTrain">{{ $t('planMonitor.modifying.firstTrain') }}</el-checkbox>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <el-row>
          <el-col :span="9" class="lineHeight">
            <span>{{ $t('planMonitor.modifying.serialNumber') }}</span>
          </el-col>
          <el-col :span="15">
            <el-select v-model="editModel.serialNumber" size="mini" style="display: inline-black" :placeholder="$t('planMonitor.modifying.pleaseSelect')">
              <el-option
                v-for="item in serialNumberList"
                :key="item.value"
                :label="item.label"
                :value="editModel.value"
              />
            </el-select>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="2">
        <el-row>
          <el-col :offset="8" class="lineHeight">
            <el-checkbox v-model="editModel.serialManual" size="mini">{{ $t('planMonitor.modifying.manual') }}</el-checkbox>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" class="lineHeight">
        <el-row>
          <el-col :span="11" :offset="1">
            <span>{{ $t('planMonitor.modifying.defaultRunLevel') }}</span>
          </el-col>
          <el-col :span="12">
            <el-select
              v-model="editModel.defaultSpeedLevel"
              style="display: inline-black"
              size="mini"
              :placeholder="$t('planMonitor.modifying.pleaseSelect')"
            >
              <el-option
                v-for="item in defaultSpeedLevelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="5" class="lineHeight">
        <el-row>
          <el-col :span="9" :offset="2">
            <span>{{ $t('planMonitor.modifying.startTime') }}：</span>
          </el-col>
          <el-col :span="13">
            <el-time-picker
              v-model="editModel.startTime"
              :placeholder="$t('planMonitor.modifying.selectTime')"
              value-format="HH:mm:ss"
              size="mini"
              :clearable="false"
            />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="7" class="lineHeight">
        <el-row>
          <el-col :span="22" :offset="2">
            <el-row>
              <el-col :span="6">
                <el-checkbox v-model="editModel.inStock">{{ $t('planMonitor.modifying.inStock') }}</el-checkbox>
              </el-col>
              <el-col :span="8">
                <el-checkbox v-model="editModel.outStock">{{ $t('planMonitor.modifying.outStock') }}</el-checkbox>
              </el-col>
              <el-col :span="6">
                <el-checkbox v-model="editModel.lastTrain">{{ $t('planMonitor.modifying.lastTrain') }}</el-checkbox>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 5px;">
      {{ $t('planMonitor.modifying.route') }}
    </el-row>
    <el-row>
      <el-table :data="routingList" border :height="140">
        <el-table-column prop="startStationCode" :label="$t('planMonitor.modifying.startingStation')">
          <template slot-scope="scope">
            {{ formatName(scope.row.startStationCode) }}
          </template>
        </el-table-column>
        <el-table-column prop="startSectionCode" :label="$t('planMonitor.modifying.startSection')" />
        <el-table-column prop="endStationCode" :label="$t('planMonitor.modifying.endStationTitle')">
          <template slot-scope="scope">
            {{ formatName(scope.row.endStationCode) }}
          </template>
        </el-table-column>
        <el-table-column prop="endSectionCode" :label="$t('planMonitor.modifying.endSection')" />
        <el-table-column prop="remarks" :label="$t('planMonitor.modifying.description')" :width="315" />
        <!-- <el-table-column :width="40" /> -->
      </el-table>
    </el-row>
    <el-row style=" margin-bottom: 5px;margin-top: 10px;">
      {{ '经停转换轨 / 站台轨：' }}
    </el-row>
    <el-row>
      <el-table :data="editModel.arriveConfigList" border :height="230">
        <el-table-column prop="stationCode" :label="this.$t('planMonitor.station')">
          <template slot-scope="scope">
            {{ formatName(scope.row.stationCode) }}
          </template>
        </el-table-column>
        <el-table-column prop="sectionCode" :label="this.$t('planMonitor.section')">
          <template slot-scope="scope">
            {{ formatName(scope.row.sectionCode) }}
          </template>
        </el-table-column>
        <el-table-column prop="arriveTime" :label="this.$t('planMonitor.arriveTime')" />
        <!-- prop="stopTime"  -->
        <el-table-column :label="this.$t('planMonitor.stopTime')">
          <template slot-scope="scope">
            <el-input v-model="scope.row.stopTime" placeholder="请输入时间" size="mini" @input="changeStopTime(scope.$index, scope.row.stopTime)" />
          </template>
        </el-table-column>
        <el-table-column prop="departureTime" :label="this.$t('planMonitor.departureTime')" />
        <el-table-column :label="this.$t('planMonitor.runLevel')">
          <template slot-scope="scope">
            {{ scope.row.speedLevel }}
            <el-input v-model="scope.row.speedLevelTime" placeholder="请输入运行等级" size="mini" @input="changeSpeedLevelTime(scope.$index, scope.row.speedLevelTime)" />
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-col :offset="16">
        <el-checkbox v-model="editModel.default">{{ $t('planMonitor.modifying.showDefaultTime') }}</el-checkbox>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="doClose">{{ $t('global.cancel') }}</el-button>
      <el-button type="primary" size="medium" @click="handleCommit">{{ $t('global.confirm') }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getRoutingBySDTNumber, updatePlanTrip, getMapStationRun } from '@/api/runplan';
import { formatTime, formatName } from '@/utils/runPlan';

export default {
    name: 'ModifyingTask',
    components: {
    },
    props: {
        loadRunPlanId: {
            type: String,
            default() {
                return '';
            }
        }
    },
    data() {
        return {
            dialogShow: false,
            loading: false,
            isPlan: false,
            PlanConvert: {},
            parkSectionCodeList:[],
            stopStationMap: {},
            defaultStopTime: 0,
            defaultSpeedLevel: 'l3',
            routingList: [],
            tripNumber: '',
            serviceNumber: '',
            planId: '',
            editModel: {
                routingCode: '',
                endStationCode: '',
                startStationCode: '',
                startTime: '00:00:00',
                endTime: '',
                arriveConfigList: []
                // serialNumber: '',
                // trainManual: false,
                // serialManual: false,
                // clearGuest: false,
                // continuationPlan: false,
                // firstTrain: false,
                // lastTrain: false,
                // inStock: false,
                // outStock: false
            },
            tripNumberList: [{ value: '', label: this.$t('planMonitor.modifying.automatic') }],
            // defaultStopTimeList: [{ value: '', label: this.$t('planMonitor.modifying.default') }],
            // defaultSpeedLevelList: [{ value: '', label: this.$t('planMonitor.modifying.default') }],
            serialNumberList: [],
            defaultSpeedLevelList: [
                { value: 'l1', label: '等级一' },
                { value: 'l2', label: '等级二' },
                { value: 'l3', label: '等级三'},
                { value: 'l4', label: '等级四' },
                { value: 'l5', label: '等级五' }
            ]
        };
    },
    computed: {
        title() {
            return this.$t('planMonitor.modifying.modifyTask');
        }
    },
    watch: {
        'editModel.startTime': function () {
            this.computedDetailList();
        },
        'defaultStopTime': function () {
            this.computedDetailList('defaultStopTime');
        },
        'defaultSpeedLevel': function () {
            this.computedDetailList('defaultSpeedLevel');
        }
    },
    methods: {
        formatTime(time) {
            return formatTime(time);
        },
        formatName(code) {
            return formatName(code);
        },
        computedTimeByString(timeStr) {
            const bTime = +new Date(`2019-01-01 00:00:00`);
            const eTime = +new Date(`2019-01-01 ${timeStr}`);
            return Number(eTime) - Number(bTime);
        },
        compuntedRunTime(list, index, runLevel) {
            let runTime = 0;
            if (index < list.length - 1) {
                const stopStationObj = this.stopStationMap[[list[index].sectionCode, list[index + 1].sectionCode].toString()];
                if (stopStationObj) {
                    if (stopStationObj.runPlanLevelVO) {
                        runTime = parseInt(stopStationObj.runPlanLevelVO[runLevel]);
                    } else if (stopStationObj['l3']) {
                        runTime = parseInt(stopStationObj['l3']);
                    }
                }
            }

            return runTime;
        },
        computedDetailList(type = null) {
            if (this.editModel.routingCode) {
                const list = Object.assign([], this.editModel.arriveConfigList);
                let tempTime = this.computedTimeByString(this.editModel.startTime) / 1000;
                const runLevel = this.defaultSpeedLevel || 'l3'; // 默认等级三
                list.forEach((elem, index) => {
                    if (type == 'defaultStopTime' || type == 'routingCode') {
                        elem.stopTime = parseInt(this.defaultStopTime);
                    }
                    elem.arriveTime = index ? formatTime(tempTime) : '';
                    if (index > 0) {
                        elem.departureTime = index == list.length - 1 ? '' : formatTime(tempTime + elem.stopTime);
                    } else {
                        elem.departureTime = formatTime(tempTime);
                    }
                    const runLevelObj = this.defaultSpeedLevelList.find(speedLevel=>{ return speedLevel.value == runLevel; });
                    if (!elem.speedLevelTime || type == 'defaultSpeedLevel') {
                        const realRunlevel = this.compuntedRunTime(list, index, runLevel);
                        elem.speedLevelTime = realRunlevel;
                    }
                    elem.speedLevel = this.defaultSpeedLevel == 'l3' ? `${this.$t('planMonitor.default')}(${runLevelObj.label})` : runLevelObj.label;
                    if (index > 0) {
                        tempTime = tempTime + elem.stopTime + elem.speedLevelTime;
                    } else {
                        tempTime = tempTime + elem.speedLevelTime;
                    }

                });
                this.editModel.endTime = formatTime(tempTime - list[list.length - 1].stopTime);
            }
        },
        loadInitData(params) {
            const lineCode = this.$route.query.lineCode;
            const mapId = this.$route.query.mapId;
            this.isPlan = params.isPlan;
            this.tripNumber = params.tripNumber;
            this.serviceNumber = params.serviceNumber;
            this.planId = this.loadRunPlanId;
            this.PlanConvert = this.$theme.loadPlanConvert(lineCode);
            if (mapId) {
                getMapStationRun(mapId).then(resp => {
                    const list = resp.data;
                    list.forEach(elem => {
                        this.stopStationMap[[elem.startSectionCode, elem.endSectionCode].toString()] = elem;
                    });
                });
            }
            // this.routingList
            if (params.rowData && params.rowData.arriveConfigList.length > 0) {
                this.editModel.arriveConfigList = params.rowData.arriveConfigList;
                this.editModel.routingCode = params.rowData.routingCode;
                this.editModel.startStationCode = params.rowData.startStationCode;
                this.editModel.endStationCode = params.rowData.endStationCode;
                this.editModel.startTime = params.rowData.startTime;
                this.editModel.endTime = params.rowData.endTime;
                this.editModel.endSectionCode = params.rowData.endSectionCode;
                this.editModel.startSectionCode = params.rowData.startSectionCode;
                this.routingList = [];
                this.routingList.push({
                    code:params.rowData.routingCode,
                    startStationCode:params.rowData.startStationCode,
                    endStationCode:params.rowData.endStationCode,
                    endSectionCode:params.rowData.endSectionCode,
                    startSectionCode:params.rowData.startSectionCode
                });
                this.computedDetailList();
                this.dialogShow = true;
            } else {
                const model = {
                    planId: this.loadRunPlanId,
                    SDTNumber: `${this.serviceNumber}${this.tripNumber}`
                };
                this.routingList = [];
                getRoutingBySDTNumber(model).then(resp => { // 根据车次号查询交路
                    // const routingObj = resp.data;
                    const editData = this.$store.state.runPlan.editData[this.serviceNumber];
                    if (editData) {
                        const trainInfo = editData.trainMap[this.tripNumber];
                        const lastIndex = trainInfo.stationTimeList.length - 1;
                        this.routingList.push({
                            code:resp.data.code,
                            startStationCode:resp.data.startStationCode,
                            endStationCode:resp.data.endStationCode,
                            endSectionCode:resp.data.endSectionCode,
                            startSectionCode:resp.data.startSectionCode
                        });
                        this.editModel = {
                            tripNumber: this.tripNumber,
                            startStationCode: resp.data.startStationCode,
                            startTime: formatTime(trainInfo.stationTimeList[1].secondTime + 7200),
                            endStationCode: resp.data.endStationCode,
                            endTime: formatTime(trainInfo.stationTimeList[lastIndex].secondTime + 7200),
                            routingCode : resp.data.code,
                            endSectionCode:resp.data.endSectionCode,
                            startSectionCode:resp.data.startSectionCode,
                            arriveConfigList: []
                            // parkSectionCodeList
                        };
                        const newstationTimeList = [];
                        let current = {};
                        trainInfo.stationTimeList.forEach((stationTime, index)=>{
                            if (index % 2 == 0) {
                                current = {};
                                current.stationCode = stationTime.stationCode;
                                current.arriveTime = stationTime.secondTime;
                            } else {
                                current.departureTime = stationTime.secondTime;
                                newstationTimeList.push(current);
                            }
                        });
                        newstationTimeList.forEach((newstationTime, index)=>{
                            const newModel = {
                                sectionCode:resp.data.parkSectionCodeList[index].sectionCode,
                                stationCode:newstationTime.stationCode,
                                speedLevel:'默认',
                                arriveTime: formatTime(newstationTime.arriveTime + 7200),
                                departureTime: formatTime(newstationTime.departureTime + 7200),
                                stopTime:newstationTime.departureTime - newstationTime.arriveTime
                            };
                            if (index < newstationTimeList.length - 1) {
                                newModel.speedLevelTime = newstationTimeList[index + 1].arriveTime - newstationTime.departureTime;
                            }
                            this.editModel.arriveConfigList.push(newModel);
                        });
                        this.dialogShow = true;
                        this.computedDetailList();
                    }
                });
            }
        },
        changeStopTime(indexs, time) {
            let tempTime = this.computedTimeByString(this.editModel.startTime) / 1000;
            // const runLevel = this.defaultSpeedLevel || 'l3'; // 默认等级三
            const arriveConfigList = Object.assign([], this.editModel.arriveConfigList);
            arriveConfigList.forEach((elem, index) => {
                if (index == indexs) { elem.stopTime = time ? Number(time) : 0; }
                elem.arriveTime = index ? formatTime(tempTime) : '';
                // const runLevelObj = this.defaultSpeedLevelList.find(speedLevel=>{ return speedLevel.value == runLevel; });
                // elem.speedLevel = this.defaultSpeedLevel == 'l3' ? `${this.$t('planMonitor.default')}(${runLevelObj.label})` : runLevelObj.label;
                if (index > 0) {
                    elem.departureTime = index == arriveConfigList.length - 1 ? '' : formatTime(tempTime + elem.stopTime);
                } else {
                    elem.departureTime = formatTime(tempTime);
                }
                const realRunlevel = elem.speedLevelTime;
                if (index > 0) {
                    tempTime = tempTime + elem.stopTime + realRunlevel;
                } else {
                    tempTime = tempTime + realRunlevel;
                }
            });
            this.editModel.arriveConfigList = arriveConfigList;
            this.editModel.endTime = formatTime(tempTime - this.editModel.arriveConfigList[this.editModel.arriveConfigList.length - 1].stopTime);
        },
        changeSpeedLevelTime(indexs, speedLevelTime) {
            const arriveConfigList = Object.assign([], this.editModel.arriveConfigList);
            let tempTime = this.computedTimeByString(this.editModel.startTime) / 1000;
            arriveConfigList.forEach((elem, index) => {
                elem.arriveTime = index ? formatTime(tempTime) : '';
                if (index == indexs) { elem.speedLevelTime = speedLevelTime ? Number(speedLevelTime) : 0; }
                elem.arriveTime = index ? formatTime(tempTime) : '';
                if (index > 0) {
                    elem.departureTime = index == arriveConfigList.length - 1 ? '' : formatTime(tempTime + elem.stopTime);
                } else {
                    elem.departureTime = formatTime(tempTime);
                }
                const realRunlevel = elem.speedLevelTime;
                if (index > 0) {
                    tempTime = tempTime + elem.stopTime + realRunlevel;
                } else {
                    tempTime = tempTime + realRunlevel;
                }
            });
            this.editModel.arriveConfigList = arriveConfigList;
            this.editModel.endTime = formatTime(tempTime - this.editModel.arriveConfigList[this.editModel.arriveConfigList.length - 1].stopTime);
        },
        doShow(params) {
            this.loadInitData(params);
        },
        doClose() {
            this.loading = false;
            this.dialogShow = false;
        },
        buildModel() {
            return {
                planId: this.loadRunPlanId,
                routingCode: this.editModel.routingCode,
                tripNumber: this.tripNumber,
                startTime: this.editModel.startTime,
                endTime: this.editModel.endTime,
                arriveConfigList: this.editModel.arriveConfigList,
                SDTNumber: `${this.serviceNumber}${this.tripNumber}`
            };
        },
        handleCommit() {
            if (this.isPlan) {
                // 计划修改任务
                this.$emit('dispatchOperate', { dialogName: 'editPlanningTrain', operate: 'handleConfirmUpdateTask', params: Object.assign({}, this.editModel) });
            } else {
                // 直接修改
                updatePlanTrip(this.buildModel()).then(resp => {
                    // this.$emit('dispatchOperate', {
                    //     dialogName: 'openRunPlan', operate: 'loadRunPlanData', params: Object.assign({refresh: true}, this.$route.query)
                    // });
                    this.$emit('refresh');
                    this.$message.success(this.$t('planMonitor.modifying.modifyTaskSuccess'));
                }).catch(() => {
                    this.$messageBox(this.$t('planMonitor.modifying.modifyTaskFailed'));
                });
            }
            this.doClose();
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .lineHeight{
        height: 28px;
        line-height: 28px;
    }
    /deep/ {
        .el-row {
            margin-bottom: 5px !important;
        }
        .el-button+.el-button{
            margin-left: 10px !important;
        }
    }
    .add-task{
      /deep/ {
        .el-dialog__body{
          padding: 0 20px;
        }
        .el-dialog .el-input {
            width: 120px !important;
        }
        .dialog-footer{
            display: flex;
            justify-content: center;
        }
      }
    }
</style>