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" :currentid="'getTrainFixedPath'" @loadStationData="loadStationData" />
    </div>
    <div class="trainFixedPathR">
      <div class="trainFixedPathRMenu">
        <div class="trainFixedPathRMenuL">
          <el-button class="trainFixedPathButton" size="small" @click="addTrainFxPath">增加</el-button>
          <el-button class="trainFixedPathButton" size="small" @click="batchTrainFxPath">批量增加</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" @click="deleteTrainFxPath">删除</el-button>
          <el-button class="trainFixedPathButton" size="small" @click="clearTrainFxPath">全部清空</el-button>
          <el-button class="trainFixedPathButton" size="small" @click="modifyTrainFxPath">修改</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" @click="exportData">备份</el-button>
          <el-button class="trainFixedPathButton" size="small" @click="releaseTrainFixedPath">更新至生效区</el-button>
          <el-button class="trainFixedPathButton trainFixedPathUpload" size="small">
            导入
            <input ref="files" type="file" class="file_box" accept=".json, application/json" @change="importf">
          </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="(height-100)+'px'"
          highlight-current-row
          style="border:1px #ccc solid;"
          @row-click="selectedSection"
        >
          <!-- :height="(height-100)+'px'" -->
          <!-- @cell-click="selectedTripNumber" -->
          <!-- @current-change="handleCurrentChange" -->
          <el-table-column
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column
            prop="stationCode"
            label="车站"
            width="100"
          >
            <template slot-scope="scope">
              {{ stationMap[scope.row.stationCode].name }}
            </template>
          </el-table-column>
          <!-- arriveTripNumber -->
          <el-table-column
            prop="arriveTipNum"
            label="到达车次"
            width="80"
          />
          <el-table-column
            prop="arriveTime"
            label="到达时间"
            width="70"
          >
            <template slot-scope="scope">
              {{ scope.row.arriveTime }}
            </template>
          </el-table-column>
          <!-- departTripNumber -->
          <el-table-column
            prop="leaveTipNum"
            label="出发车次"
            width="80"
          />
          <!-- departTime  -->
          <el-table-column
            prop="leaveTime"
            label="出发时间"
            width="70"
          />
          <!-- trackSectionCode -->
          <el-table-column
            prop="masterCode"
            label="股道"
            width="75"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.masterCode">
                {{ filterSectionMap[scope.row.masterCode].name }}
              </div>
            </template>
          </el-table-column>
          <!-- departStationCode -->
          <el-table-column
            prop="backStationCode"
            label="后方车站"
            width="110"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.backStationCode">
                {{ stationMap[scope.row.backStationCode].name }}
              </div>
            </template>
          </el-table-column>
          <!-- arriveDirectionCode  -->
          <el-table-column
            prop="enterDirCode"
            label="入口"
            width="155"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.enterDirCode">
                {{ mapStationDirectionData[scope.row.enterDirCode].name }}
              </div>
            </template>
          </el-table-column>
          <!-- departDirectionCode -->
          <el-table-column
            prop="outDirCode"
            label="出口"
            width="155"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.outDirCode">
                {{ mapStationDirectionData[scope.row.outDirCode].name }}
              </div>
            </template>
          </el-table-column>
          <!-- arriveStationCode -->
          <el-table-column
            prop="fontStationCode"
            label="前方车站"
            width="110"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.fontStationCode">
                {{ stationMap[scope.row.fontStationCode].name }}
              </div>
            </template>
          </el-table-column>
          <!-- RVType -->
          <el-table-column
            prop="appendData.JISHU_STOP"
            label="技术停点"
            width="70"
          >
            <!-- <template slot-scope="scope">
              <el-checkbox v-model="scope.row.JISHU_STOP" />
            </template> -->
          </el-table-column>
          <!-- trainInspection -->
          <el-table-column
            prop="appendData.LIEJIAN"
            label="列检"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.LIEJIAN" />
            </template>
          </el-table-column>
          <!-- crossZero -->
          <el-table-column
            prop="appendData.JIAO_LING"
            label="交令"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.JIAO_LING" />
            </template>
          </el-table-column>
          <el-table-column
            prop="appendData.JIAOPIAO"
            label="交票"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.JIAOPIAO" />
            </template>
          </el-table-column>
          <!-- columnEnd -->
          <el-table-column
            prop="appendData.LIEWEI"
            label="列尾"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.LIEWEI" />
            </template>
          </el-table-column>
          <!-- locomotive -->
          <el-table-column
            prop="appendData.JICHE"
            label="机车"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.JICHE" />
            </template>
          </el-table-column>
          <!-- goodsInspection -->
          <el-table-column
            prop="appendData.appendData.HUOJIAN"
            label="货检"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.HUOJIAN" />
            </template>
          </el-table-column>
          <!-- multiplyDown -->
          <el-table-column
            prop="appendData.CHENGJIANG"
            label="乘降"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.CHENGJIANG" />
            </template>
          </el-table-column>
          <!-- sailUpstream -->
          <el-table-column
            prop="appendData.SHANGSHUI"
            label="上水"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.SHANGSHUI" />
            </template>
          </el-table-column>
          <!-- pickUp  -->
          <el-table-column
            prop="appendData.ZHAIGUA"
            label="摘挂"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.ZHAIGUA" />
            </template>
          </el-table-column>
          <!-- transfer -->
          <el-table-column
            prop="appendData.HUANCHENG"
            label="换乘"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.HUANCHENG" />
            </template>
          </el-table-column>
          <!-- handling  -->
          <el-table-column
            prop="appendData.ZHUANGXIE"
            label="装卸"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.ZHUANGXIE" />
            </template>
          </el-table-column>
          <!-- pollution -->
          <el-table-column
            prop="appendData.XIWU"
            label="吸污"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.XIWU" />
            </template>
          </el-table-column>
          <!-- crossing-->
          <el-table-column
            prop="appendData.DAOKOU"
            label="道口"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.DAOKOU" />
            </template>
          </el-table-column>
          <!-- trainNumber -->
          <el-table-column
            prop="appendData.CHEHAO"
            label="车号"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.CHEHAO" />
            </template>
          </el-table-column>
          <!-- affair  -->
          <el-table-column
            prop="appendData.ZHANWU"
            label="站务"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.ZHANWU" />
            </template>
          </el-table-column>
          <el-table-column
            prop="appendData.ZONGKONG"
            label="综控"
            width="40"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.appendData.ZONGKONG" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <add-runplan ref="trainFxPath" @noticeInfo="noticeInfo" @refresh="handleData" />
    <batchTrainFxPath ref="batchTrainFxPath" @noticeInfo="noticeInfo" @refresh="handleData" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { now} from '@/utils/date';
import TerminalStationList from './terminalStationList';
import AddRunplan from './addRunplan';
import BatchTrainFxPath from './batchTrainFxPath';
import { copyAssign } from '@/utils/index';
import {menuOperate, commitOperate} from '@/jmapNew/theme/components/utils/menuOperate';
export default {
    name:'TrainFixedPath',
    components: {
        TerminalStationList,
        BatchTrainFxPath,
        AddRunplan
    },
    data() {
        return {
            height: this.$store.state.app.height - 61,
            currentStationCode:'',
            currentRow:null,
            tableData:[],
            filterSectionMap:{}
        };
    },
    computed:{
        ...mapGetters('map', [
            'sectionList',
            'stationList'
        ]),
        mapStationDirectionData() {
            return this.$store.state.map.mapStationDirectionData;
        },
        stationMap() {
            const stationMap = {};
            this.stationList.forEach(station=>{
                stationMap[station.code] = {code:station.code, name:station.name};
            });
            return stationMap;
        }
    },
    // watch:{
    //     '$store.state.socket.railCtcStationManageRpChange': function (val) {
    //         this.handleData();
    //     }
    // },
    methods:{
        selectedSection(row, column, event) {
            this.currentRow = row;
        },
        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();
        },
        addTrainFxPath() {
            this.$refs.trainFxPath.doShow({
                stationCode:this.currentStationCode,
                filterSectionMap:this.filterSectionMap,
                mapStationDirectionMap:this.mapStationDirectionData
            });
        },
        batchTrainFxPath() {
            this.$refs.batchTrainFxPath.doShow({
                stationCode:this.currentStationCode,
                filterSectionMap:this.filterSectionMap,
                mapStationDirectionMap:this.mapStationDirectionData
            });
        },
        modifyTrainFxPath() {
            if (this.currentRow) {
                this.$refs.trainFxPath.doShow({
                    stationCode:this.currentStationCode,
                    filterSectionMap:this.filterSectionMap,
                    mapStationDirectionMap:this.mapStationDirectionData,
                    row:JSON.parse(JSON.stringify(this.currentRow))
                });
            }
        },
        deleteTrainFxPath() {
            if (this.currentRow) {
                const that = this;
                this.$confirm('确定删除该条列车路径数据?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // stationCode 车站编码
                    // runPlanCode:this.currentRow.runPlanCode
                    const param = {stationCode:this.currentRow.stationCode, code:this.currentRow.code };
                    commitOperate(menuOperate.CTC.deleteTrainFixedPath, param, 3).then(({valid})=>{
                        if (valid) {
                            that.$message.success('删除成功！');
                        }
                    }).catch(() => {
                        that.$message.error('删除失败');
                    });
                }).catch(e => {});
            }
        },
        clearTrainFxPath() {
            const that = this;
            this.$confirm('确定清空该站的所有列车路径数据?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // stationCode 车站编码
                const param = {stationCode:this.currentStationCode};
                commitOperate(menuOperate.CTC.clearTrainFixedPath, param, 3).then(({valid})=>{
                    if (valid) {
                        that.$message.success('清空成功！');
                    }
                }).catch(() => {
                    that.$message.error('清空失败');
                });
            }).catch(e => {});
        },
        noticeInfo() {
            this.$emit('noticeInfo');
        },
        exportData() {
            const currentDay = now().replace(/(-|:)|\s/g, '');
            const content = new Blob(
                [JSON.stringify({stationCode:this.currentStationCode, runPlanParamList:this.tableData})]
            );
            const urlObject = window.URL || window.webkitURL || window;
            const url = urlObject.createObjectURL(content);
            const el = document.createElement('a');
            el.href = url;
            el.download = `TRAIN_WAY_LIST-${currentDay}.json`;
            el.click();
            urlObject.revokeObjectURL(url);
        },
        importf() {
            const that = this;
            setTimeout(() => {
                const obj = this.$refs.files;
                if (!obj.files) return;
                const f = obj.files[0];
                if (f.type != 'application/json') {
                    this.$message.error('请上传json格式的文件');
                    return;
                }
                const loading = this.$loading({
                    lock: true,
                    text: '正在导入中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                const reader = new FileReader();
                reader.readAsText(f, 'utf-8');
                reader.onload = function(e) {
                    const data = e.target.result;
                    that.formDisplay = true;
                    const json = JSON.parse(data);
                    if (json && json.runPlanParamList && json.stationCode) {
                        if (json.runPlanParamList.length > 0) {
                            const param = {stationCode:json.stationCode, runPlanParamList:json.runPlanParamList};
                            commitOperate(menuOperate.CTC.importTrainFixedPath, param, 3).then(({valid})=>{
                                if (valid) {
                                    loading.close();
                                    that.$message.success('导入成功！');
                                }
                            }).catch(() => {
                                loading.close();
                                that.$message.error('导入失败');
                            });

                        } else {
                            that.$message.error('该文件数据为空');
                            loading.close();
                        }
                    } else {
                        that.$message.error('该文件数据结构不正确');
                        loading.close();
                    }
                };
            });
        },
        releaseTrainFixedPath() {
            const that = this;
            commitOperate(menuOperate.CTC.releaseTrainFixedPath, { stationCode:this.currentStationCode}, 3).then(({valid})=>{
                if (valid) {
                    that.$message.success('发布成功！');
                }
            }).catch(() => {
                that.$message.error('发布失败');
            });
        },
        coverTime(time) {
            return time ? time.split(':').splice(0, 2).join(':') : '';
        },
        handleData() {
            commitOperate(menuOperate.CTC.getTrainFixedPath, { stationCode: this.currentStationCode }, 3).then(({valid, response}) => {
                if (valid) {
                    this.tableData = response.data;
                }
            });
            this.currentRow = null;
            // const railCtcStationManageRpMsg = copyAssign({}, this.$store.state.socket.railCtcStationManageRpMsg);
            // this.tableData = Object.values(railCtcStationManageRpMsg).filter(data=>{
            //     data.arriveTime = this.coverTime(data.arriveTime);
            //     data.departTime = this.coverTime(data.departTime);
            //     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;overflow: hidden;}
.trainFixedPathUpload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    input {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
        font-size: 0;
    }
}
</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;font-size: 13px;}
#trainFixedPathTableIn .el-table__body tr.current-row>td{
  background-color: #6aa8ec;
  color: #fff;
}
</style>