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

<template>
  <el-dialog
    v-dialogDrag
    class="planEdit__tool add-planning-train"
    :title="title"
    :visible.sync="dialogShow"
    width="1020px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
  >
    <el-row :gutter="15">
      <el-form ref="form" :model="form" label-width="60px" size="mini">
        <el-col :span="4">
          <el-form-item label="等级一:">
            <el-input v-model="form.level1" @blur="handleBlur(form.level1, '1')" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="等级二:">
            <el-input v-model="form.level2" @blur="handleBlur(form.level2, '2')" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="等级三:">
            <el-input v-model="form.level3" @blur="handleBlur(form.level3, '3')" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="等级四:">
            <el-input v-model="form.level4" @blur="handleBlur(form.level4, '4')" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="等级五:">
            <el-input v-model="form.level5" @blur="handleBlur(form.level5, '5')" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <div style="line-height: 29px; font-size: 15px;">速度单位: (Km/h)</div>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-table :data="stationIntervalData" border style="width: 100%" height="320">
        <el-table-column prop="startStationCode" :label="$t('planMonitor.modifying.startingStation')" width="120">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ formatName(scope.row.startStationCode) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startSectionCode" :label="$t('planMonitor.modifying.startSection')" width="120">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ formatName(scope.row.startSectionCode) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endStationCode" :label="$t('planMonitor.modifying.endStation')" width="120">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ formatName(scope.row.endStationCode) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endSectionCode" :label="$t('planMonitor.modifying.endSection')" width="120">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ formatName(scope.row.endSectionCode) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="right" :label="$t('planMonitor.modifying.direction')" width="60">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.right?'上行':'下行' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="distance" :label="$t('planMonitor.modifying.distance')" width="85">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.distance }}</span>
            <!-- <el-input v-model="scope.row.distance" class="input_text_box" /> -->
          </template>
        </el-table-column>
        <div>
          <el-table-column prop="l1" :label="$t('planMonitor.updateStation.level1')" width="70">
            <template slot-scope="scope">
              <el-input v-model="scope.row.l1" class="input_text_box" />
            </template>
          </el-table-column>
          <el-table-column prop="l2" :label="$t('planMonitor.updateStation.level2')" width="70">
            <template slot-scope="scope">
              <el-input v-model="scope.row.l2" class="input_text_box" />
            </template>
          </el-table-column>
          <el-table-column prop="l3" :label="$t('planMonitor.updateStation.level3')" width="70">
            <template slot-scope="scope">
              <el-input v-model="scope.row.l3" class="input_text_box" />
            </template>
          </el-table-column>
          <el-table-column prop="l2" :label="$t('planMonitor.updateStation.level4')" width="70">
            <template slot-scope="scope">
              <el-input v-model="scope.row.l4" class="input_text_box" />
            </template>
          </el-table-column>
          <el-table-column prop="l2" :label="$t('planMonitor.updateStation.level5')" width="70">
            <template slot-scope="scope">
              <el-input v-model="scope.row.l5" class="input_text_box" />
            </template>
          </el-table-column>
        </div>
      </el-table>
    </el-row>
    <div class="button-group" style="text-align: center; margin-top: 10px;">
      <el-button @click="handleStationDistance">更新距离</el-button>
      <el-button @click="doClose">关闭</el-button>
      <el-button @click="handleStationTime">更新</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { formatName } from '@/utils/runPlan';
import { setStationRunning, getMapStationRunUser, updateRunlevelDistance } from '@/api/runplan';

export default {
    name: 'ModifyingStationIntervalTime',
    components: {
    },
    data() {
        return {
            dialogShow: false,
            loading: false,
            DirectionCodeMap: {},
            stationIntervalData: [],
            params: {},
            form: {
                level1: '',
                level2: '',
                level3: '',
                level4: '',
                level5: ''
            }
        };
    },
    computed: {
        title() {
            return this.$t('planMonitor.modifying.modifyRunLevel') + ' (单位：秒)';
        }
    },
    mounted() {
        // this.loadInitData();
    },
    methods: {
        formatName(code) {
            return formatName(code);
        },
        loadInitData() {
            this.DirectionCodeMap = {};
            this.$ConstSelect.DirectionCodeList.forEach(elem => {
                this.DirectionCodeMap[elem.value] = elem.label;
            });
            if (this.$route.query.lineCode) {
                getMapStationRunUser(this.$route.query.mapId).then(resp =>{
                    const list = resp.data.list;
                    this.stationIntervalData = [];
                    this.stationIntervalData = list;
                    this.form.level1 = '';
                    this.form.level2 = '';
                    this.form.level3 = '';
                    this.form.level4 = '';
                    this.form.level5 = '';

                });
            }
        },
        handleBlur(limit, level) {
            if (limit) {
                this.stationIntervalData.forEach(item => {
                    if (level == '1') {
                        item.l1 = Math.round(item.distance / (this.form.level1 / 3.6));
                    } else if (level == '2') {
                        item.l2 = Math.round(item.distance / (this.form.level2 / 3.6));
                    } else if (level == '3') {
                        item.l3 = Math.round(item.distance / (this.form.level3 / 3.6));
                    } else if (level == '4') {
                        item.l4 = Math.round(item.distance / (this.form.level4 / 3.6));
                    } else if (level == '5') {
                        item.l5 = Math.round(item.distance / (this.form.level5 / 3.6));
                    }
                });
            }
        },
        handleStationTime() {
            setStationRunning(this.$route.query.mapId, this.stationIntervalData).then(resp => {
                this.$message.success(this.$t('planMonitor.modifying.modifySuccess'));
            }).catch((error) => {
                this.$messageBox(this.$t('planMonitor.modifying.modifyFailed') + ': ' + error.message);
            });
        },
        handleStationDistance() {
            updateRunlevelDistance(this.$route.query.mapId).then(resp => {
                if (resp.data) {
                    this.$message.success('更新成功');
                    const list = resp.data;
                    const stationIntervalData = [];
                    this.stationIntervalData.forEach(station=>{
                        if (list[station.id]) {
                            const tempStation = Object.assign({}, station);
                            tempStation.distance = list[station.id];
                            stationIntervalData.push(tempStation);
                        }
                    });
                    this.stationIntervalData = stationIntervalData;
                } else {
                    this.$messageBox('更新失败:数据为空');
                }
            }).catch((error) => {
                this.$messageBox('更新失败: ' + error.message);
            });
        },
        doShow(params) {
            this.params = params || {};
            this.loadInitData();
            this.dialogShow = true;
        },
        doClose() {
            this.loading = false;
            this.dialogShow = false;
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "src/styles/mixin.scss";
	.planEdit__tool {
		/deep/{
			.el-dialog__body{
				padding-top: 0;
			}
			.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
				margin-bottom: 8px;
			}
		}
	}
	.input_text_box{
		/deep/{
			.el-input__inner{
				padding: 0;
				text-align: center;
			}
		}
	}
</style>