rt-sim-training-client/src/views/iscs/iscsSystem/config/bas/controlBAS.vue

<template>
  <div class="control-bas-box">
    <div class="title-name">会展中心站大系统模式表</div>
    <div class="control-bas">
      <el-table :data="tableData" :header-row-style="tableTitleStyle" :cell-style="rowStyle" :span-method="objectSpanMethod" style="float: left;">
        <el-table-column label="日期" width="300">
          <template slot="header">
            <div class="title-0">全年运行工况</div>
            <div class="title-0">运行模式号</div>
            <div class="title-0">模式状态</div>
            <div class="title-0">火灾指示灯:</div>
          </template>
          <template slot-scope="scope">
            <div v-if="scope.$index == 0" class="table-0-top">
              <div class="left">
                <div>正常</div>
                <div>运行</div>
              </div>
              <div class="right">
                <div class="button-box">小新风空调</div>
                <div class="button-box">全新风空调</div>
                <div class="button-box">非空调季节</div>
                <div class="button-box">冬季模式</div>
              </div>
            </div>
            <div v-if="scope.$index == 4" class="table-4-top">
              <div class="left">
                <div>火灾</div>
                <div>模式</div>
              </div>
              <div class="right">
                <div class="button-box">站厅公共区火灾</div>
                <div class="button-box">站台公共区火灾</div>
              </div>
              <div class="button-box">非火灾工况突发事件</div>
              <div class="button-box">全修模式</div>
            </div>
            <div v-if="scope.$index == 8" class="table-8-top">设备实际运行状态</div>
            <div v-if="scope.$index == 9" class="table-9-top">状态比较</div>
          </template>
        </el-table-column>
        <el-table-column prop="province" width="120">
          <template slot="header">
            <div style="width: 100%">模式</div>
            <div style="width: 100%">编号</div>
          </template>
        </el-table-column>
        <el-table-column label="大系统模式表">
          <el-table-column label="新风机">
            <el-table-column prop="province" label="FAF-1" width="120" />
            <el-table-column prop="city" label="FAF-2" width="120" />
          </el-table-column>
          <el-table-column label="组合式空调器">
            <el-table-column prop="province" label="AHU-1" width="120" />
            <el-table-column prop="city" label="AHU-2" width="120" />
          </el-table-column>
          <el-table-column label="回排风机">
            <el-table-column prop="province" label="RAF/SEF-1" width="120" />
            <el-table-column prop="city" label="RAF/SEF-2" width="120" />
          </el-table-column>
          <el-table-column label="风机1">
            <el-table-column prop="province" label="MD-1" width="120" />
            <el-table-column prop="province" label="MD-2" width="120" />
            <el-table-column prop="province" label="MD-3" width="120" />
            <el-table-column prop="province" label="MD-4" width="120" />
            <el-table-column prop="province" label="MD-5" width="120" />
            <el-table-column prop="province" label="MD-6" width="120" />
            <el-table-column prop="province" label="MD-7" width="120" />
            <el-table-column prop="province" label="MD-8" width="120" />
            <el-table-column prop="province" label="MD-9" width="120" />
            <el-table-column prop="province" label="MD-10" width="120" />
            <el-table-column prop="province" label="MD-11" width="120" />
            <el-table-column prop="province" label="MD-12" width="120" />
            <el-table-column prop="province" label="MD-13" width="120" />
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            tableTitleStyle: 'text-align: center; height: 28px; padding: 0;background: #45607B;',
            rowStyle: 'text-align: center;height: 28px; padding: 0; background: #45607B;',
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                zip: 200333
            }, {
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                zip: 200333
            }, {
                date: '2016-05-08',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                zip: 200333
            }, {
                date: '2016-05-06',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                zip: 200333
            }, {
                date: '2016-05-07',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                zip: 200333
            }, {
                date: '2016-05-07',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                zip: 200333
            }, {
                date: '2016-05-07',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                zip: 200333
            }, {
                date: '2016-05-07',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                zip: 200333
            }]
        };
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) { // 只有第一行合并
                if (rowIndex == 0 || rowIndex == 4) {
                    return {
                        rowspan: 4,
                        colspan: 1
                    };
                } else if (rowIndex >= 8) {
                    return {
                        rowspan: 1,
                        colspan: 2
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
            if (columnIndex == 1) {
                if (rowIndex >= 8) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },
        detail(item) {
            console.log(item);
        }
    }
};
</script>
<style lang="scss" scoped>
.control-bas-box{
    width: 100%;
    .title-0{
        width: 100%;
        line-height: 20px;
        text-align: left;
        padding-left: 14px;
    }
    .table-0-top{
        overflow: hidden;
        .left{
            float: left;
            width: 40%;
            display: flex;
            flex-direction: column;
            height: 110px;
            justify-content: center;
        }
        .right{
            float: right;
            width: 60%;
        }
    }
    .table-4-top{
        overflow: hidden;
        .left{
            float: left;
            height: 56px;
            width: 40%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .right{
            float: right;
            width: 60%;
        }
    }
    .button-box{
        width: 100%;
        height: 28px;
        text-align: center;
        line-height: 28px;
        background-color: #A7A7A7;
        float: left;
        font-size: 12px;
        color: #333;
        font-weight: bold;
        box-sizing: border-box;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
        border-right: 2px solid #565656;
        border-bottom: 2px solid #565656;
        cursor: pointer;
        &.active,
        &:hover{
            background: #EBB570;
            border-top: 2px solid #795B31;
            border-left: 2px solid #795B31;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
        }
    }
}
.control-bas{
    margin: 30px;
    padding: 0;
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid #fff;
}
.table-title-box{
    text-align: center;
}
.title-name{
    width: 100%;
    text-align: center;
    font-size: 26px;
    margin-top: 30px;
    color: #56E5DE;
}
/deep/{
    .el-table--border{
        background: #45607B;
        width: 100%;
        border: none;
    }
    .el-table th, .el-table tr{
        background: #45607B;
        color: #fff;
    }
    .el-table::before{
        background: #45607B;
    }
    .el-table--border::after, .el-table--group::after{
        background: #45607B;
    }
    .el-table thead.is-group th{
        background: #45607B;
        text-align: center;
    }
    .el-table--scrollable-x .el-table__body-wrapper{
        height: 400px;
    }
    .el-table .cell,
    .el-table th div,
    .el-table--border td:first-child .cell,
    .el-table--border th:first-child .cell{
        padding: 0;
    }
}
</style>