rt-sim-training-client/src/views/bigTrainRunplanManage/stationDirection.vue

<template>
  <div class="stationDirection" :style="{ height: height+'px' }">
    <!-- {{ '车站股道' }} -->
    <div class="stationDirectionL">
      <terminal-station-list ref="terminalStationList" :currentid="'getStationDirection'" @loadStationData="loadStationData" />
    </div>
    <div class="stationDirectionR">
      <div class="stationDirectionRMenu">
        <div class="stationDirectionRMenuL">
          <!-- :id="domIdConfirm"  :loading="loading" @click="commit"-->
          <el-button class="stationDirectionButton" size="small" @click="modifyDirection">修改</el-button>
        </div>
        <div class="stationDirectionRMenuR">
          <span class="stationDirectionRVer">版本号</span>
          <el-button class="stationDirectionButton" size="small">备份</el-button>
          <el-button class="stationDirectionButton" size="small" @click="releaseStationDirection">更新至生效区</el-button>
          <el-button class="stationDirectionButton" size="small">导入</el-button>
          <el-button class="stationDirectionButton" size="small">比较</el-button>
        </div>
      </div>
      <div class="stationDirectionRTable" :style="{ height: (height-40)+'px' }">
        <el-table
          id="stationDirectionTableIn"
          ref="stationDirectionTableIn"
          :data="tableData"
          border
          height="600px"
          highlight-current-row
          style="border:1px #ccc solid;width:1103px"
          @row-click="selectedSection"
          @row-dblclick="rowDbClick"
        >
          <el-table-column
            prop="ioName"
            label="出入口名称"
            width="300"
          />
          <el-table-column
            prop="ioDirection"
            label="方向"
            width="200"
          >
            <template slot-scope="scope">
              {{ ioDirectionMap[scope.row.ioDirection] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="allowOverrun"
            label="允许超限列车"
            width="200"
          >
            <template slot-scope="scope">
              {{ allowOverrunMap[scope.row.allowOverrun] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="travelTrain"
            label="允许旅客列车"
            width="200"
          >
            <template slot-scope="scope">
              {{ travelTrainMap[scope.row.travelTrain] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsTrain"
            label="允许货车"
            width="200"
          >
            <template slot-scope="scope">
              {{ goodsTrainMap[scope.row.goodsTrain] }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import {menuOperate, commitOperate} from '@/jmapNew/theme/components/utils/menuOperate';
import TerminalStationList from './terminalStationList';
// directionInformation
export default {
    name:'StationDirection',
    components: {
        TerminalStationList
    },
    data() {
        return {
            height: this.$store.state.app.height - 61,
            currentStationCode:'',
            currentRow:null,
            tableData:[],
            ioDirectionMap:{
                'DOWN_IN_STATION':'下行进站',
                'UP_IN_STATION':'上行进站',
                'DOWN_OUT_STATION':'下行出站',
                'UP_OUT_STATION':'上行出站',
                'BOTH_WAY_STATION':'双向'
            },
            travelTrainMap:{
                true:'是',
                false:'否'
            },
            allowOverrunMap:{
                true:'是',
                false:'否'
            },
            goodsTrainMap:{
                true:'是',
                false:'否'
            }
        };
    },
    methods:{
        loadStation() {
            this.$refs.terminalStationList.loadStation();
        },
        loadStationData(stationCode) {
            this.currentStationCode = stationCode;
            this.handleData(stationCode);
        },
        handleData(stationCode) {
            commitOperate(menuOperate.CTC.getStationDirection, { stationCode: stationCode }, 3).then(({valid, response}) => {
                if (valid) {
                    this.tableData = response.data;
                }
            });
        },
        rowDbClick(row, column, event) {
            this.currentRow = row;
            this.modifyDirection();
        },
        selectedSection(row, column, event) {
            this.currentRow = row;
        },
        // 修改出入口
        modifyDirection() {
            if (this.currentRow) {
                // this.$refs.directionInformation.doShow({
                //     row:this.currentRow,
                //     stationCode:this.currentStationCode
                // });
            }
        },
        // 出入口发布生效区
        releaseStationDirection() {
            const that = this;
            commitOperate(menuOperate.CTC.releaseStationDirection, { stationCode:this.currentStationCode}, 3).then(({valid})=>{
                if (valid) {
                    that.$message.success('发布成功！');
                }
            }).catch(() => {
                that.$message.error('发布失败');
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.stationDirection{
  padding-left:200px;
}
.stationDirectionL{
    width: 200px;
    height: 100%;
    position: absolute;
    border-right: 1px #797979 solid;
    left: 0;
    top: 0;
}
.stationDirectionR{
  padding:0px 5px 0px 5px;
  height: 100%;
  background: #d8d8d8;
}

.stationDirectionRMenu{
  background:#eeeeee;
  display: inline-block;
  width:100%;
  padding:5px;
  border-left: 1px #707070 solid;
}
.stationDirectionRMenuL{display: inline-block;}
.stationDirectionRMenuR{float:right;display: inline-block;}
.stationDirectionRTable{background:#a9a9a9;border-left: 1px #707070 solid;}
.stationDirectionRVer{
    font-size: 14px;
    margin-right: 10px;
    color: #87a7c9;
}
.stationDirectionButton{
    background-image: linear-gradient(#ffffff,#d8d8d8);
    color: #000;
    padding: 5px 10px;
    border: 1px #737373 solid;
}
.stationDirectionButton:hover{
  background-image: linear-gradient(#efffff,#a8daf3);
}
</style>
<style lang="scss">
#stationDirectionTableIn.el-table td, #stationDirectionTableIn.el-table th{
    padding-top: 5px;
    padding-bottom: 5px;
    border-color: #a5a5a5;
}
// .el-table__body tr.current-row>td
// .el-table__body tr.current-row>td
// #runplanContentTable .el-table__body tr.current-row>td .el-input--mini .el-input__inner{
#stationDirectionTableIn .el-table__body tr.current-row>td{
  background-color: #6aa8ec;
  color: #fff;
}
</style>