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>
      <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')">
          <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')">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ formatName(scope.row.endSectionCode) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="directionCode" :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="65">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.distance/100 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="runPlanLevelVO" :label="$t('planMonitor.updateStation.level1')" width="70">
          <template slot-scope="scope">
            <span
              style="margin-left: 10px"
              :style="{color: scope.row.isEditStatus? 'red': 'black'}"
            >{{ scope.row.l1 || '' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="runPlanLevelVO" :label="$t('planMonitor.updateStation.level2')" width="70">
          <template slot-scope="scope">
            <span
              style="margin-left: 10px"
              :style="{color: scope.row.isEditStatus? 'red': 'black'}"
            >{{ scope.row.l2 || '' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="runPlanLevelVO" :label="$t('planMonitor.updateStation.level3')" width="70">
          <template slot-scope="scope">
            <span
              style="margin-left: 10px"
              :style="{color: scope.row.isEditStatus? 'red': 'black'}"
            >{{ scope.row.l3 || '' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="runPlanLevelVO" :label="$t('planMonitor.updateStation.level4')" width="70">
          <template slot-scope="scope">
            <span
              style="margin-left: 10px"
              :style="{color: scope.row.isEditStatus? 'red': 'black'}"
            >{{ scope.row.l4 || '' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="runPlanLevelVO" :label="$t('planMonitor.updateStation.level5')" width="70">
          <template slot-scope="scope">
            <span
              style="margin-left: 10px"
              :style="{color: scope.row.isEditStatus?'red': 'black'}"
            >{{ scope.row.l5 || '' }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <div class="button-group" style="text-align: center; margin-top: 10px;">
      <!--<el-button type="primary" @click="handleSave">{{ $t('planMonitor.modifying.save') }}</el-button>-->
      <el-button @click="doClose">{{ $t('planMonitor.modifying.cancelAndQuit') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { formatName } from '@/utils/runPlan';
import { setStationRunning, getMapStationRun } from '@/api/runplan';

export default {
    name: 'ModifyingStationIntervalTime',
    components: {
    },
    data() {
        return {
            dialogShow: false,
            loading: false,
            stationIntervalData: [],
            params: {}
        };
    },
    computed: {
        title() {
            return this.$t('planMonitor.modifying.modifyRunLevel');
        },
        isNewMap() {
            return this.$route.path.includes('displayNew');
        }
    },
    mounted() {
        this.loadInitData();
    },
    methods: {
        formatName(code) {
            return formatName(code);
        },
        loadInitData() {
            this.stationIntervalData = [];
            if (this.$route.query.lineCode) {
                getMapStationRun(this.$route.query.mapId).then(resp =>{
                    const list = resp.data;
                    list.forEach(elem => {
                        elem.isEditStatus = false;
                    });
                    this.stationIntervalData = list;
                });
            }
        },
        doShow(params) {
            this.params = params || {};
            this.loadInitData();
            this.dialogShow = true;
        },
        doClose() {
            this.loading = false;
            this.dialogShow = false;
        }
        // handleSave() {
        //     const data = [];
        //     this.stationIntervalData.forEach(elem => {
        //         data.push(elem.runPlanLevelVO);
        //     });
        //     setStationRunning(this.$route.query.mapId, data).then(resp => {
        //         this.stationIntervalData.forEach(elem => {
        //             elem.isEditStatus = false;
        //         });
        //         this.$message.success(this.$t('planMonitor.modifying.modifySuccess'));
        //     }).catch(() => {
        //         this.$messageBox(this.$t('planMonitor.modifying.modifyFailed'));
        //     });
        // }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
</style>