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

<template>
  <div class="trainFixedPath" :style="{ height: height+'px' }">
    <!-- {{ '列车固定径路' }} -->
    <div class="trainFixedPathL">
      <terminal-station-list ref="terminalStationList" @loadStationData="loadStationData" />
    </div>
    <div class="trainFixedPathR">
      <div class="trainFixedPathRMenu">
        <div class="trainFixedPathRMenuL">
          <el-button class="trainFixedPathButton" size="small" @click="addRunplan">增加</el-button>
          <el-button class="trainFixedPathButton" size="small">批量增加</el-button>
          <el-button class="trainFixedPathButton" size="small">基本图导入</el-button>
          <el-button class="trainFixedPathButton" size="small">基本图申请</el-button>
          <el-button class="trainFixedPathButton" size="small">其他站导入</el-button>
          <el-button class="trainFixedPathButton" size="small">删除</el-button>
          <el-button class="trainFixedPathButton" size="small">全部清空</el-button>
          <el-button class="trainFixedPathButton" size="small">修改</el-button>
          <el-button class="trainFixedPathButton" size="small">查找</el-button>
          <el-button class="trainFixedPathButton" size="small">导出excel</el-button>
          <el-button class="trainFixedPathButton" size="small">流程批量设置</el-button>
        </div>
        <div class="trainFixedPathRMenuR">
          <span class="trainFixedPathRVer">版本号</span>
          <el-button class="trainFixedPathButton" size="small">备份</el-button>
          <el-button class="trainFixedPathButton" size="small">更新至生效区</el-button>
          <el-button class="trainFixedPathButton" size="small">导入</el-button>
          <el-button class="trainFixedPathButton" size="small">比较</el-button>
        </div>
      </div>
      <div class="trainFixedPathRTable" :style="{ height: (height-40)+'px' }">
        <el-table
          id="trainFixedPathTableIn"
          ref="trainFixedPathTableIn"
          :data="tableData"
          border
          height="600px"
          highlight-current-row
          style="border:1px #ccc solid;"
        >
          <!-- @cell-click="selectedTripNumber" -->
          <!-- @current-change="handleCurrentChange" -->
          <el-table-column
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column
            prop="stationCode"
            label="车站"
            width="100"
          />
          <el-table-column
            prop="arriveTripNumber"
            label="到达车次"
            width="90"
          />
          <el-table-column
            prop="arriveTime"
            label="到达时间"
            width="80"
          />
          <el-table-column
            prop="departTripNumber"
            label="出发车次"
            width="90"
          />
          <el-table-column
            prop="departTime"
            label="出发时间"
            width="80"
          />
          <el-table-column
            prop="trackSectionCode"
            label="股道"
            width="85"
          />
          <el-table-column
            prop="departStationCode"
            label="后方车站"
            width="110"
          />
          <el-table-column
            prop="arriveDirectionCode"
            label="入口"
            width="130"
          />
          <el-table-column
            prop="departDirectionCode"
            label="出口"
            width="130"
          />
          <el-table-column
            prop="arriveStationCode"
            label="前方车站"
            width="110"
          />
          <el-table-column
            prop="RVType"
            label="技术停点"
            width="70"
          />
          <el-table-column
            prop="trainInspection"
            label="列检"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.trainInspection" />
            </template>
          </el-table-column>
          <el-table-column
            prop="crossZero"
            label="交零"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.crossZero" />
            </template>
          </el-table-column>
          <el-table-column
            prop="columnEnd"
            label="列尾"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.columnEnd" />
            </template>
          </el-table-column>
          <el-table-column
            prop="locomotive"
            label="机车"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.locomotive" />
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsInspection"
            label="货检"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.goodsInspection" />
            </template>
          </el-table-column>
          <el-table-column
            prop="multiplyDown"
            label="乘降"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.multiplyDown" />
            </template>
          </el-table-column>
          <el-table-column
            prop="sailUpstream"
            label="上水"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.sailUpstream" />
            </template>
          </el-table-column>
          <el-table-column
            prop="pickUp"
            label="摘挂"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.pickUp" />
            </template>
          </el-table-column>
          <el-table-column
            prop="transfer"
            label="换乘"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.transfer" />
            </template>
          </el-table-column>
          <el-table-column
            prop="handling"
            label="装卸"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.handling" />
            </template>
          </el-table-column>
          <el-table-column
            prop="pollution"
            label="吸污"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.pollution" />
            </template>
          </el-table-column>
          <el-table-column
            prop="crossing"
            label="道口"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.crossing" />
            </template>
          </el-table-column>
          <el-table-column
            prop="trainNumber"
            label="车号"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.trainNumber" />
            </template>
          </el-table-column>
          <el-table-column
            prop="affair"
            label="站务"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.affair" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <add-runplan ref="addRunplan" @noticeInfo="noticeInfo" />
  </div>
</template>
<script>
import TerminalStationList from './terminalStationList';
import AddRunplan from './addRunplan';
import { copyAssign } from '@/utils/index';
export default {
    name:'TrainFixedPath',
    components: {
        TerminalStationList,
        AddRunplan
    },
    data() {
        return {
            height: this.$store.state.app.height - 61,
            currentStationCode:'',
            tableData:[]
        };
    },
    watch:{
        '$store.state.socket.railCtcStationManageRpChange': function (val) {
            this.handleData();
        }
    },
    methods:{
        loadStation() {
            this.$refs.terminalStationList.loadStation();
        },
        loadStationData(stationCode) {
            this.currentStationCode = stationCode;
            this.handleData();
        },
        addRunplan() {
            this.$refs.addRunplan.doShow({stationCode:this.currentStationCode});
        },
        noticeInfo() {
            this.$emit('noticeInfo');
        },
        handleData() {
            this.tableData = [];
            const railCtcStationManageRpMsg = copyAssign({}, this.$store.state.socket.railCtcStationManageRpMsg);
            this.tableData = Object.values(railCtcStationManageRpMsg).filter(data=>{
                return data.stationCode == this.currentStationCode;
            });
            //  stationCode                        车站编码
            //         trackSectionCode        运行计划的默认股道
            //         arriveTripNumber        到达车次
            //         departTripNumber    出发车次
            //         arriveTime                        到达时间
            //         departTime                        出发时间
            //         arriveDirectionCode 入口
            //         departDirectionCode 出口
            //         arriveStationCode        到达车站
            //         departStationCode        出发车站
            //
        }
    }
};
</script>
<style lang="scss" scoped>
.trainFixedPath{
  padding-left:200px;
}
.trainFixedPathL{
    width: 200px;
    height: 100%;
    position: absolute;
    border-right: 1px #797979 solid;
    left: 0;
    top: 0;
}
.trainFixedPathR{
  padding:0px 5px 0px 5px;
  height: 100%;
  background: #d8d8d8;
}
.trainFixedPathRMenu{
  background:#eeeeee;
  display: inline-block;
  width:100%;
  padding:5px;
  border-left: 1px #707070 solid;
}
.trainFixedPathRMenuL{display: inline-block;}
.trainFixedPathRMenuR{float:right;display: inline-block;}
.trainFixedPathRVer{
    font-size: 14px;
    margin-right: 10px;
    color: #87a7c9;
}
.trainFixedPathButton{
    background-image: linear-gradient(#ffffff,#d8d8d8);
    color: #000;
    padding: 5px 10px;
    border: 1px #737373 solid;
}
.trainFixedPathButton:hover{
  background-image: linear-gradient(#efffff,#a8daf3);
}
.trainFixedPathRTable{background:#a9a9a9;border-left: 1px #707070 solid;}
</style>
<style lang="scss">
#trainFixedPathTableIn.el-table td, #trainFixedPathTableIn.el-table th{
    padding-top: 5px;
    padding-bottom: 5px;
    border-color: #a5a5a5;
}
#trainFixedPathTableIn.el-table .cell{ padding-left: 5px;padding-right: 5px; text-align: center;}

</style>