kd-aiot-frontend-eam/src/views/maintenance/delivery/index.vue

<template>
  <div class="equipment">
    <div class="ele-body">
      <el-card shadow="never">
        <div class="switch">
          <div class="switch_left">
            <ul>
              <li
                v-for="item in tabOptions"
                :key="item.key"
                :class="{ active: activeComp == item.key }"
                @click="activeComp = item.key"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
        </div>
        <div class="main">
          <div v-if="activeComp == 'plan'">
            <plan />
          </div>
          <div v-else>
            <workOrder />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
  import plan from './plan';
  import workOrder from './workOrder';
  export default {
    components: { plan, workOrder },
    data() {
      return {
        activeComp: 'plan',
        tabOptions: [
          { key: 'plan', name: '计划' },
          { key: 'workOrder', name: '工单' }
        ]
      };
    },
    mounted() {
      switch (this.$route.query.title) {
        case '计划':
          this.activeComp = 'plan';
          break;
        case '工单':
          this.activeComp = 'workOrder';
          break;
        default:
          break;
      }
    }
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-card__body {
    padding-top: 0;
    padding-left: 0;
  }
  .main {
    padding-left: 17px;
    .plan {
      padding-top: 15px;
    }
  }
</style>