web/src/views/dashboard-screen/screen/sjdr/index.vue

<template>
  <div class="common-wrap">

    <el-card class="content-z">
      <a-tabs v-model="activeKey" class="sjdr">
        <a-tab-pane
          v-for="item in tabs"
          :key="item.name"
          :tab="item.title"
        >
          <component
            :is="item.name"
            v-if="activeKey === item.name"
          />
        </a-tab-pane>
      </a-tabs>
    </el-card>
  </div>

</template>
<script>

import Ycxx from './ycxn/index.vue'
import Syjhdxqk from './syjhdxqk/index.vue'
import Tab3 from './tab3.vue'
import Dlyd from './dlydts/index.vue'
import Tab6 from './tab6.vue'
import QbDl from './qb-dl/index.vue'

export default {
  name: 'ScreenSjdr',
  components: {
    Ycxx,
    Tab3,
    Syjhdxqk,
    Dlyd,
    Tab6,
    QbDl
  },
  data() {
    return {
      activeKey: 'Ycxx',
      tabs: [{
        title: '异常信息',
        name: 'Ycxx'
      },

      {
        title: '变配电所检修兑现情况',
        name: 'Tab3'
      },
      {
        title: '实验计划兑现情况',
        name: 'Syjhdxqk'
      },
      {
        title: '电力远动调试',
        name: 'Dlyd'
      },
      {
        title: '牵变、电力设备巡检兑现（本月）',
        name: 'QbDl'
      }

      ]
    }
  },
  computed: {},
  methods: {}
}
</script>
<style scoped lang="scss">
.el-card {
  margin: 0 0 !important;
}

::v-deep {
  .el-card {
    margin: 0 0 !important;
    padding: 0 12px;
    border: none !important;
  }

  .el-card__body {
    padding: 0 0 !important;
  }

  .right-upload-btn {
    position: absolute;
    right: 10px;
    z-index: 10;
    top: 0;
  }
}

</style>