rt-sim-training-client/src/views/newMap/displayBaSiDi/tmt.vue

<template>
  <el-dialog
    v-dialogDrag
    class="route-setting"
    :title="title"
    :visible.sync="show"
    width="900px"
    label-position="top"
    :before-close="doClose"
    :z-index="2009"
    :modal="false"
    :close-on-click-modal="false"
  >
    <div style="padding: 5px;">
      <el-row>
        <el-col :span="12"><span>所选位置：</span></el-col>
        <el-col :span="12"><span>列车号：</span></el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-col :span="12">
          <el-input v-model="sectionName" size="mini" style="width: 400px;" :disabled="true" />
        </el-col>
        <el-col :span="12">
          <el-input v-model="trainCode" :max-length="7" size="mini" style="width: 310px;" />
          <el-button size="mini" icon="el-icon-search" @click="trainFind" />
          <el-button size="mini" icon="el-icon-refresh-left" @click="resetTrainCode" />
        </el-col>
      </el-row>
      <div style="display: flex;justify-content: space-around;margin-top: 20px;">
        <el-button size="mini" style="width: 280px;" :disabled="operationType === 'show'" @click="changeOperationType('show')">显示列车信息</el-button>
        <el-button size="mini" style="width: 280px;" :disabled="operationType === 'update'" @click="changeOperationType('update')">修改列车资料</el-button>
        <el-button size="mini" style="width: 280px;" :disabled="operationType === 'create'" @click="changeOperationType('create')">创建列车号</el-button>
      </div>
      <div style="display: flex;justify-content: space-around;margin-top: 10px;">
        <el-button size="mini" style="width: 280px;" :disabled="operationType === 'delete'" @click="changeOperationType('delete')">删除列车号</el-button>
        <el-button size="mini" style="width: 280px;" :disabled="operationType === 'move'" @click="changeOperationType('move')">步进列车号</el-button>
        <el-button size="mini" style="width: 280px;" :disabled="operationType === 'resort'" @click="changeOperationType('resort')">重排列车号</el-button>
      </div>
      <div v-if="operationType === 'show'">
        <el-table :data="tableData" border style="width: 100%;margin-top: 20px;" height="200">
          <el-table-column prop="date" label="方向" />
          <el-table-column prop="name" label="列车号" />
          <el-table-column prop="address" label="位置" />
          <el-table-column prop="address" label="ARS" />
          <el-table-column prop="address" label="晚点" />
        </el-table>
      </div>
      <div v-else-if="operationType === 'create'" style="display: flex;justify-content: space-between;">
        <div>
          <el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200">
            <el-table-column prop="date" label="方向" width="60" />
            <el-table-column prop="name" label="列车号" width="157" />
            <el-table-column prop="address" label="位置" width="60" />
          </el-table>
        </div>
        <div>
          <div style="margin-top: 20px;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
            <span>位置：</span>
            <el-select v-model="nowSectionCode" :disabled="true" size="mini" style="width: 150px">
              <el-option
                v-for="item in sectionList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </div>
          <div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
            <span>新列车号：</span>
            <el-input v-model="newTrainCode" size="mini" style="width: 150px;" />
          </div>
          <div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
            <span>方向：</span>
            <el-select v-model="direction" :disabled="true" size="mini" style="width: 80px" placeholder="请选择">
              <el-option
                v-for="item in directionList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
            <span>设置该列车为自动排列：</span>
            <el-radio v-model="autoArrange" :disabled="true" label="true">开启</el-radio>
            <el-radio v-model="autoArrange" :disabled="true" label="false">关闭</el-radio>
          </div>
          <div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
            <span>车组号：</span>
            <el-input v-model="groupNumber1" size="mini" style="width: 60px;" />
            <div style="border: 1px solid #DCDFE6;padding: 4px 5px;border-radius: 3px;">&lt;&gt;</div>
            <el-input v-model="groupNumber2" :disabled="true" size="mini" style="width: 60px;" />
          </div>
        </div>
        <div>
          <div style="margin-top: 20px;height: 20px;">插入位置（之前）：</div>
          <el-table :data="tableData" border style="width: 280px;" height="180">
            <el-table-column prop="date" label="方向" width="60" />
            <el-table-column prop="name" label="列车号" width="157" />
            <el-table-column prop="address" label="位置" width="60" />
          </el-table>
        </div>
      </div>
      <div v-else-if="operationType === 'update'" style="display: flex;justify-content: flex-start;">
        <div>
          <el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200">
            <el-table-column prop="date" label="方向" width="60" />
            <el-table-column prop="name" label="列车号" width="157" />
            <el-table-column prop="address" label="位置" width="60" />
          </el-table>
        </div>
        <div>
          <div style="margin-top: 20px;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
            <span>位置：</span>
            <el-select v-model="nowSectionCode" size="mini" style="width: 150px">
              <el-option
                v-for="item in sectionList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </div>
          <div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
            <span>新列车号：</span>
            <el-input v-model="newTrainCode" size="mini" :max-length="8" style="width: 150px;" />
          </div>
          <div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
            <span>方向：</span>
            <el-select v-model="direction" size="mini" style="width: 80px">
              <el-option
                v-for="item in directionList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
            <span>设置该列车为自动排列：</span>
            <el-radio v-model="autoArrange" label="true">开启</el-radio>
            <el-radio v-model="autoArrange" label="false">关闭</el-radio>
          </div>
          <div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
            <span>车组号：</span>
            <el-input v-model="groupNumber1" size="mini" style="width: 60px;" />
            <div style="border: 1px solid #DCDFE6;padding: 4px 5px;border-radius: 3px;">&lt;&gt;</div>
            <el-input v-model="groupNumber2" size="mini" style="width: 60px;" />
          </div>
        </div>
      </div>
      <div v-else-if="operationType === 'delete'" style="display: flex;">
        <div>
          <el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200">
            <el-table-column prop="date" label="方向" width="60" />
            <el-table-column prop="name" label="列车号" width="157" />
            <el-table-column prop="address" label="位置" width="60" />
          </el-table>
        </div>
        <div style="width: 250px;display: flex;justify-content: space-between;margin-top: 20px;margin-left: 10px;align-items: center;height: 25px;">
          <div>所选列车号：</div>
          <el-input v-model="nowTrainCode" style="width: 150px;" size="mini" />
        </div>
      </div>
      <div v-else-if="operationType === 'move'" style="display: flex;justify-content: flex-start;">
        <div>
          <el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200">
            <el-table-column prop="date" label="方向" width="60" />
            <el-table-column prop="name" label="列车号" width="157" />
            <el-table-column prop="address" label="位置" width="60" />
          </el-table>
        </div>
        <div>
          <div style="margin-top: 20px;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
            <span>所选列车号：</span>
            <el-input size="mini" style="width: 150px;" />
          </div>
          <div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;">
            <span>当前位置：</span>
            <el-select v-model="nowSectionCode" size="mini" style="width: 150px">
              <el-option
                v-for="item in sectionList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </div>
          <div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;">
            <span>新位置：</span>
            <el-select v-model="newSectionCode" size="mini" style="width: 150px">
              <el-option
                v-for="item in sectionList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </div>
        </div>
      </div>
      <div style="display: flex;justify-content: flex-end;margin-top: 10px;border-top: 1px solid #c0c0c0;padding-top: 10px;">
        <el-button v-if="operationType === 'update'" size="mini" @click="trainCommit">修改</el-button>
        <el-button v-if="operationType === 'create'" size="mini" @click="trainCommit">创建</el-button>
        <el-button v-if="operationType === 'delete'" size="mini" @click="trainCommit">删除</el-button>
        <el-button size="mini" @click="doClose">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
import CMD from '@/scripts/cmdPlugin/CommandEnum';

export default {
    name: 'RouteCreate',
    data() {
        return {
            dialogShow: false,
            loading: false,
            selected: null,
            tableData: [],
            sectionName: '',
            trainCode: '',
            operationType: 'create',
            autoArrange: false,
            nowSectionCode: '',
            direction: '',
            newTrainCode: '',
            groupNumber1: '',
            groupNumber2: '',
            nowTrainCode: '',
            newSectionCode: '',
            directionList: [{ label: '>', value: 'right' }, { label: '<', value: 'left' }],
            trainModel: ''
        };
    },
    computed: {
        ...mapGetters('map', [
            'stationList',
            'sectionList'
        ]),
        show() {
            return this.dialogShow && !this.$store.state.menuOperation.break;
        },
        title() {
            return '列监';
        }
    },
    watch: {
        '$store.state.menuOperation.selectedCount':function(em) {
            const device = this.$store.state.menuOperation.selected;
            if (device && device.code && device._type === 'Section') {
                // this.deviceSelect(device);
            } else if (device && device.code && device._type === 'Train') {
                this.doShow(device);
            }
        }
    },
    methods: {
        doShow(selected) {
            this.dialogShow = true;
            if (selected) {
                this.selected = selected;
            }

            this.$nextTick(function () {
                this.$store.dispatch('training/emitTipFresh');
            });
        },
        doClose() {
            this.loading = false;
            this.dialogShow = false;
            this.$store.dispatch('training/emitTipFresh');
        },
        handleSelect(tab) {
            this.activeIndex = tab;
        },
        trainFind() {
            const train = this.$store.getters['map/getDeviceByCode'](this.trainCode);
            this.tableData = [train];
        },
        resetTrainCode() {
            this.trainCode = '';
        },
        changeOperationType(type) {
            this.operationType = type;
        },
        trainCommit() {
            const params = {};
            const step = {
                over: true
            };
            if (this.trainOperateType === 'update') {
                params.groupNumber = this.trainModel.groupNumber;
                params.serviceNumber = '0' + this.newTrainCode.slice(3, 5);
                params.tripNumber = '0' + this.newTrainCode.slice(5, 7);
                step.cmdType = CMD.TrainWindow.CMD_TRAIN_SET_PLAN;
                step.operation = OperationEvent.Train.setPlanTrainId.menu.operation;
                step.param = params;
            } else if (this.trainOperateType === 'create') {
                params.sectionCode = this.newSectionCode;
                params.groupNumber = this.formModelNewGroup;
                params.dn = this.formModelNewTrip.slice(0, 3);
                params.sn = '0' + this.formModelNewTrip.slice(3, 5);
                params.tn = '0' + this.formModelNewTrip.slice(5, 7);
                step.cmdType = CMD.TrainWindow.CMD_TRAIN_ADD_TRAIN_TRACE;
                step.operation = OperationEvent.Train.addTrainId.menu.operation;
                step.param = params;
            } else if (this.trainOperateType === 'delete') {
                params.groupNumber = this.trainModel.groupNumber;
                step.cmdType = CMD.TrainWindow.CMD_TRAIN_REMOVE_TRAIN_TRACE;
                step.operation = OperationEvent.Train.delTrainId.menu.operation;
                step.param = params;
            } else if (this.trainOperateType === 'move') {
                params.groupNumber = this.trainModel.groupNumber;
                params.sectionCode = this.formModelNewSection;
                step.cmdType = CMD.TrainWindow.CMD_TRAIN_MOVE_TRAIN_TRACE;
                step.operation = OperationEvent.Train.moveTrainId.menu.operation;
                step.param = params;
            }
            this.$store.dispatch('training/nextNew', step).then(({ valid }) => {
                if (valid) {
                    this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                    this.changeShowMode('train');
                }
            }).catch((error) => {
                if (error && error.code == '10017') {
                    // EventBus.$emit('sendMsg', {message: error.message});
                } else {
                    // EventBus.$emit('sendMsg', {message: '命令执行失败！'});
                }
            });
        },
        cancel() {
            const operate = {
                operation: OperationEvent.Command.cancel.menu.operation
            };
            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                if (valid) {
                    this.doClose();
                }
            }).catch(() => {
                this.doClose();
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.route-setting {
	.content_box {
		margin-bottom: 10px;
		.el-button{
			&.active{
				background: #969696;
			}
		}
	}
	.table_content_box{
		margin-bottom: 20px;
	}
	/deep/ {
		.table{
			.table_header_box{
				.cell{
					text-align: center;
					word-break: break-word;
				}
			}
		}
	}
}
</style>