rt-sim-training-client/src/views/newMap/newMapdraft/dataRelation/routeoperate/protectDetail.vue

<template>
  <el-dialog
    v-dialogDrag
    :title="mapInfo.name + ' / ' + '延续保护'"
    :visible.sync="show"
    width="60%"
    :before-close="doClose"
    center
    append-to-body
  >

    <el-table ref="protetTable" border :data="data" :span-method="objectSpanMethod">
      <el-table-column key="1" label="解锁区段" prop="unlockSectionCode" />
      <el-table-column key="2" label="解锁时间(s)" prop="unlockTime" />
      <el-table-column key="3" label="延时保护线路" prop="">
        <el-table-column key="4" label="进路延续保护区段" prop="routeOverlapSectionList">
          <template slot-scope="scope">
            <template v-for="tag in scope.row.routeOverlapSectionList">
              <el-tag
                :key="tag"
                type="primary"
                style="margin-right: 10px; margin-bottom: 5px;"
              >{{ tag }}
              </el-tag></template>
          </template>
        </el-table-column>
        <el-table-column key="5" label="延续保护道岔" prop="">
          <el-table-column key="6" label="道岔" prop="switchCode" />
          <el-table-column key="7" label="道岔类型" prop="switchType" />
        </el-table-column>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    name: 'ProtectDetail',
    props: {
        mapInfo: {
            type: Object,
            default() {
                return null;
            }
        }
    },
    data() {
        return {
            show: false,
            title: '',
            data: [],
            sectionListNumList: []
        };
    },
    computed: {
        ...mapGetters('map', [
            'switchList',
            'sectionList'
        ])
    },
    methods: {
        doShow(data) {
            this.data = [];
            this.sectionListNumList = [];
            data.relSectionSwitchList.forEach(item => {
                const unlockSectionName = this.handleRouteOverlapSectionList(item, data.unlockSectionCode);
                if (item.routeOverlapSwitchList.length) {
                    this.sectionListNumList.push(item.routeOverlapSwitchList.length);
                    item.routeOverlapSwitchList.forEach( ele => {
                        this.sectionListNumList.push(0);
                        const column = {
                            unlockSectionCode: unlockSectionName,
                            unlockTime: data.unlockTime,
                            routeOverlapSectionList: item.routeOverlapSectionList,
                            switchCode: ele.switchCode,
                            switchType: ele.normal ? '定位' : '反位'
                        };
                        this.$convertSpecifiedField(column, this.switchList, 'code', 'name', ['switchCode']);
                        this.data.push(column);
                    } );
                    this.sectionListNumList.pop();
                } else {
                    this.sectionListNumList.push(1);
                    const column = {
                        unlockSectionCode: unlockSectionName,
                        unlockTime: data.unlockTime,
                        routeOverlapSectionList: item.routeOverlapSectionList,
                        switchCode: '',
                        switchType: ''
                    };
                    this.data.push(column);
                }
            });
            this.show = true;
        },
        handleRouteOverlapSectionList(data, unlockSectionCode) {
            this.sectionList.forEach(item => {
                const index = data.routeOverlapSectionList.indexOf(item.code);
                if (index >= 0) {
                    data.routeOverlapSectionList[index] = item.name + '(' + item.code + ')';
                }
                if (item.code === unlockSectionCode) {
                    unlockSectionCode = item.name + '(' + item.code + ')';
                }
            });
            return unlockSectionCode;
        },
        doClose(done) {
            this.show = false;
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (column.property === 'unlockSectionCode' || column.property === 'unlockTime') {
                if (rowIndex === 0) {
                    return {
                        rowspan: this.data.length,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            } else if (column.property === 'routeOverlapSectionList') {
                return {
                    rowspan: this.sectionListNumList[rowIndex],
                    colspan: 1
                };
            }
        }
    }
};
</script>

<style scoped>

</style>