CABaggageData2.0/src/views/statisticsCharts/components/statisticsTabs.vue

<template>
  <div class="statistics-tabs">
    <el-row :gutter="16" type="flex">
      <el-col v-for="(tab, index) in tabList" :key="index" :span="4">
        <el-dropdown
          v-if="tab.children && tab.children.length"
          placement="bottom"
          @command="commandHandler"
        >
          <div :class="['tab-bar', { 'tab-active': activeIndex === index }]">
            <img
              class="tab-icon"
              :src="activeIndex === index ? activeIcon : defaultIcon"
              :alt="tab.title"
            />
            <el-tooltip :content="tab.title" placement="top">
              <span class="tab-title">{{ tab.title }}</span>
            </el-tooltip>
            <i class="icon-arrow el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(childTab, childIndex) in tab.children"
              :key="childIndex"
              :command="[tab.path, childTab.path]"
              >{{ childTab.title }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <div
          v-else
          :class="[
            'tab-bar tab-bar-single',
            { 'tab-active': activeIndex === index },
          ]"
          @click="clickHandler(tab.path)"
        >
          <img
            class="tab-icon"
            :src="activeIndex === index ? activeIcon : defaultIcon"
            :alt="tab.title"
          />
          <el-tooltip :content="tab.title" placement="top">
            <span class="tab-title">{{ tab.title }}</span>
          </el-tooltip>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "StatisticsTabs",
  data() {
    return {
      defaultIcon: require("@/assets/nav/ic_statistical_top_default.png"),
      activeIcon: require("@/assets/nav/ic_statistical_top_check.png"),
      tabList: [
        {
          title: "航司行李相关统计",
          path: "/statisticsCharts/airlineCompany",
          children: [
            {
              path: "flight",
              title: "航班量统计",
            },
            {
              path: "baggage",
              title: "行李量统计",
            },
            {
              path: "baggagePassenger",
              title: "行李旅客量统计",
            },
            {
              path: "specialBaggage",
              title: "特殊行李量统计",
            },
            {
              path: "baggageAverage",
              title: "平均行李量统计",
            },
            {
              path: "abnormalBaggage",
              title: "异常行李量统计",
            },
            {
              path: "complaintBaggage",
              title: "投诉行李量统计",
            },
            {
              path: "compensationBaggage",
              title: "赔偿行李量统计",
            },
            {
              path: "compensation",
              title: "赔偿金额统计",
            },
          ],
        },
        {
          path: "/statisticsCharts/passengerClassification",
          title: "旅客分类统计",
          children: [
            {
              path: "baggage",
              title: "行李量统计",
            },
            {
              path: "baggagePassenger",
              title: "行李旅客量统计",
            },
            {
              path: "specialBaggage",
              title: "特殊行李量统计",
            },
            {
              path: "abnormalBaggage",
              title: "异常行李量统计",
            },
            {
              path: "complaintBaggage",
              title: "投诉行李量统计",
            },
            {
              path: "compensationBaggage",
              title: "赔偿行李量统计",
            },
            {
              path: "compensation",
              title: "赔偿金额统计",
            },
          ],
        },
        {
          path: "/statisticsCharts/flightClassification",
          title: "航班分类相关统计",
          children: [
            {
              path: "flight",
              title: "航班量统计",
            },
            {
              path: "baggage",
              title: "行李量统计",
            },
            {
              path: "passenger",
              title: "行李旅客量统计",
            },
          ],
        },
        {
          path: "/statisticsCharts/node",
          title: "扫描节点与位置分析",
        },
        {
          title: "报表统计",
          path: "/statisticsCharts/report",
          children: [
            {
              path: "reportStatistics",
              title: "运送效率报表统计",
            },
            {
              path: "transitTable",
              title: "中转专项报表统计",
            },
            {
              path: "ScanningStatistics",
              title: "航站BRS扫描统计",
            },
          ],
        },
        {
          title: "特殊赔偿异常分类统计",
          path: "/statisticsCharts/specialClassification",
          children: [
            {
              path: "special",
              title: "特殊行李分类统计",
            },
            {
              path: "abnormal",
              title: "异常行李分类统计",
            },
            {
              path: "compensationBaggage",
              title: "赔偿行李分类统计",
            },
            {
              path: "compensation",
              title: "赔偿金额分类统计",
            },
          ],
        },
        {
          path: "/statisticsCharts/statisticalAnalysis",
          title: "统计分析",
        },
      ],
      activeIndex: null,
    };
  },
  watch: {
    "$route.path": {
      handler(path) {
        let activeIndex = null;
        this.tabList.some((tab, index) => {
          if (path.includes(tab.path)) {
            activeIndex = index;
            return true;
          }
        });
        this.activeIndex = activeIndex;
      },
      immediate: true,
    },
  },
  methods: {
    commandHandler(pathArray) {
      if (pathArray.some((path) => !path)) {
        this.$message.info("开发中");
        return;
      }
      this.$router.push({
        path: pathArray.join("/"),
      });
    },
    clickHandler(path) {
      if (!path) {
        this.$message.info("开发中");
        return;
      }
      this.$router.push({
        path,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.statistics-tabs {
  > .el-row > .el-col {
    max-width: 232px;
    min-width: 175px;
    .el-dropdown {
      width: 100%;
    }
    .tab-bar {
      width: 100%;
      height: 56px;
      background-color: #ffffff;
      padding-left: 16px;
      padding-right: 16px;
      display: flex;
      align-items: center;
      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
      border-radius: 4px;
      &-single {
        cursor: pointer;
      }
      &:not(:last-child) {
        margin-right: 16px;
      }
      .tab-icon {
        width: 14px;
        height: 14px;
      }
      .tab-title {
        padding-left: 12px;
        padding-right: 8px;
        font-size: 14px;
        font-family: Helvetica, "Microsoft YaHei";
        font-weight: bold;
        color: #101116;
        letter-spacing: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &.tab-active {
        background-color: #2d67e3;
        .tab-title {
          color: #ffffff;
        }
      }
      .icon-arrow {
        position: absolute;
        right: 16px;
        color: #101116;
        font-size: 14px;
        transition: transform 0.3s;
      }
      &.tab-active .icon-arrow {
        color: #ffffff;
      }
      &:hover .icon-arrow {
        transform: rotate(180deg);
      }
    }
  }
}
</style>