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

<template>
  <div class="stationTrack" :style="{ height: height+'px' }">
    <!-- {{ '车站股道' }} -->
    <div class="stationTrackL">
      <terminal-station-list ref="terminalStationList" :currentid="'getStationTrack'" @loadStationData="loadStationData" />
    </div>
    <div class="stationTrackR">
      <div class="stationTrackRMenu">
        <div class="stationTrackRMenuL">
          <!-- :id="domIdConfirm"  :loading="loading" @click="commit"-->
          <el-button class="stationTrackButton" size="small" @click="modifySection">修改</el-button>
        </div>
        <div class="stationTrackRMenuR">
          <span class="stationTrackRVer">版本号</span>
          <el-button class="stationTrackButton" size="small">备份</el-button>
          <el-button class="stationTrackButton" size="small">更新至生效区</el-button>
          <el-button class="stationTrackButton" size="small">导入</el-button>
          <el-button class="stationTrackButton" size="small">比较</el-button>
        </div>
      </div>
      <div class="stationTrackRTable" :style="{ height: (height-40)+'px' }">
        <el-table
          id="stationTrackTableIn"
          ref="stationTrackTableIn"
          :data="tableData"
          border
          height="600px"
          highlight-current-row
          style="border:1px #ccc solid;width:1103px"
          @row-click="selectedSection"
          @row-dblclick="rowDbClick"
        >
          <!-- @cell-click="selectedTripNumber" -->
          <!-- @current-change="handleCurrentChange" -->
          <el-table-column
            type="index"
            label="序号"
            width="100"
          />
          <!-- trackSectionCode -->
          <el-table-column
            prop="code"
            label="股道名称"
            width="100"
          >
            <template slot-scope="scope">
              {{ filterSectionMap[scope.row.code]?filterSectionMap[scope.row.code].name:'' }}
            </template>
          </el-table-column>
          <!-- lineType -->
          <el-table-column
            prop="trackNature"
            label="线路性质"
            width="100"
          >
            <template slot-scope="scope">
              {{ lineTypeMap[scope.row.trackNature] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="direction"
            label="接发车方向"
            width="100"
          >
            <template slot-scope="scope">
              {{ directionMap[scope.row.direction] }}
            </template>
          </el-table-column>
          <!-- type -->
          <el-table-column
            prop="trainType"
            label="接发车类型"
            width="100"
          >
            <template slot-scope="scope">
              {{ typeMap[scope.row.trainType] }}
            </template>
          </el-table-column>
          <!-- transfiniteType -->
          <el-table-column
            prop="transfinite"
            label="超限类型"
            width="100"
          >
            <template slot-scope="scope">
              {{ transfiniteTypeMap[scope.row.transfinite] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="standType"
            label="站台"
            width="100"
          >
            <template slot-scope="scope">
              {{ standTypeMap[scope.row.standType] }}
            </template>
          </el-table-column>
          <!-- allowEmu -->
          <el-table-column
            prop="motorCar"
            label="允许动车组"
            width="100"
          >
            <template slot-scope="scope">
              {{ allowEmuMap[scope.row.motorCar] }}
            </template>
          </el-table-column>
          <!-- addWaterEqu -->
          <el-table-column
            prop="waterSupply"
            label="上水设备"
            width="100"
          >
            <template slot-scope="scope">
              {{ addWaterEquMap[scope.row.waterSupply] }}
            </template>
          </el-table-column>
          <!-- sewageEqu -->
          <el-table-column
            prop="sewageAbsorption"
            label="排污设备"
            width="100"
          >
            <template slot-scope="scope">
              {{ sewageEquMap[scope.row.sewageAbsorption] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="military"
            label="军用"
            width="100"
          >
            <template slot-scope="scope">
              {{ militaryMap[scope.row.military] }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--  -->
    <track-information ref="trackInformation" @noticeInfo="noticeInfo" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import TerminalStationList from './terminalStationList';
import TrackInformation from './trackInformation';
import {menuOperate, commitOperate} from '@/jmapNew/theme/components/utils/menuOperate';
export default {
    name:'StationTrack',
    components: {
        TerminalStationList,
        TrackInformation
    },
    data() {
        return {
            height: this.$store.state.app.height - 61,
            currentStationCode:'',
            filterSectionMap:{},
            currentRow:null,
            lineTypeMap:{
                1:'正线',
                2:'到发线'
            },
            directionMap:{
                1:'上行',
                2:'下行',
                3:'上下行'
            },
            typeMap:{
                1:'客车',
                2:'货车',
                3:'客货车'
            },
            transfiniteTypeMap:{
                1:'不能接发超限列车',
                2:'一级超限',
                3:'二级超限',
                4:'超级超限'
            },
            standTypeMap:{
                1:'无',
                2:'高站台',
                3:'低站台'
            },
            allowEmuMap:{
                1:'是',
                2:'否'
            },
            addWaterEquMap:{
                1:'有',
                2:'无'
            },
            sewageEquMap:{
                1:'有',
                2:'无'
            },
            militaryMap:{
                1:'是',
                2:'否'
            },
            tableData:[
            ]
        };
    },
    computed:{
        ...mapGetters('map', [
            'sectionList'
        ])
    },
    methods:{
        loadStation() {
            this.$refs.terminalStationList.loadStation();
        },
        loadStationData(stationCode) {
            this.currentStationCode = stationCode;
            this.filterSectionMap = {};
            this.sectionList.forEach(section=>{
                if (section.standTrack && section.belongStation == this.currentStationCode) {
                    this.filterSectionMap[section.code] = {code:section.code, name:section.name};
                }
            });
            this.handleData(stationCode);
        },
        handleData(stationCode) {
            commitOperate(menuOperate.CTC.getStationTrack, { stationCode: stationCode }, 3).then(({valid, response}) => {
                if (valid) {
                    this.tableData = response.data;
                }
            });
            // getStationTrackTerminalStationTree
            // this.tableData = [
            //     {trackSectionCode:'T97', lineType:'1', direction:'1', type:'2', transfiniteType:'2', standType:'1', allowEmu:'2', addWaterEqu:'1',
            //         sewageEqu:'1', military:'1'},
            //     {trackSectionCode:'T105', lineType:'2', direction:'1', type:'2', transfiniteType:'2', standType:'1', allowEmu:'2', addWaterEqu:'1',
            //         sewageEqu:'1', military:'1' }
            // ];
        },
        rowDbClick(row, column, event) {
            this.currentRow = row;
            this.modifySection();
        },
        selectedSection(row, column, event) {
            this.currentRow = row;
        },
        modifySection() {
            if (this.currentRow) {
                this.$refs.trackInformation.doShow({
                    row:this.currentRow,
                    filterSectionMap:this.filterSectionMap
                });
            }
        },
        noticeInfo() {
            this.$emit('noticeInfo');
        }
    }
};
</script>
<style lang="scss" scoped>
.stationTrack{
  padding-left:200px;
}
.stationTrackL{
    width: 200px;
    height: 100%;
    position: absolute;
    border-right: 1px #797979 solid;
    left: 0;
    top: 0;
}
.stationTrackR{
  padding:0px 5px 0px 5px;
  height: 100%;
  background: #d8d8d8;
}
.stationTrackRMenu{
  background:#eeeeee;
  display: inline-block;
  width:100%;
  padding:5px;
  border-left: 1px #707070 solid;
}
.stationTrackRMenuL{display: inline-block;}
.stationTrackRMenuR{float:right;display: inline-block;}
.stationTrackRTable{background:#a9a9a9;border-left: 1px #707070 solid;}
.stationTrackRVer{
    font-size: 14px;
    margin-right: 10px;
    color: #87a7c9;
}
.stationTrackButton{
    background-image: linear-gradient(#ffffff,#d8d8d8);
    color: #000;
    padding: 5px 10px;
    border: 1px #737373 solid;
}
.stationTrackButton:hover{
  background-image: linear-gradient(#efffff,#a8daf3);
}
</style>
<style lang="scss">
#stationTrackTableIn.el-table td, #stationTrackTableIn.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{
#stationTrackTableIn .el-table__body tr.current-row>td{
  background-color: #6aa8ec;
  color: #fff;
}
</style>