performance-test/src/views/overview/index.vue

<template>
  <div class="global-variable" v-loading="loading">
    <div class="left">
      <el-input
        class="filterInput"
        placeholder="输入关键字进行过滤"
        v-model="filterText"
      >
      </el-input>
      <el-tree
        class="filter-tree"
        :data="data"
        highlight-current
        :props="defaultProps"
        default-expand-all
        :current-node-key="initBatchCode"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
        :node-key="'codeNumber'"
        ref="tree"
      />
    </div>
    <div class="right">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <template v-for="menuItem in assetssTypeData">
          <el-submenu
            :index="menuItem.typeCode + menuItem.typeName"
            v-if="menuItem.children && menuItem.children.length"
          >
            <template slot="title">{{ menuItem.typeName }}</template>

            <el-menu-item
              v-for="submenuItem in menuItem.children"
              :index="
                submenuItem.typeName === '机组指标'
                  ? 'production_indicator_unit'
                  : submenuItem.typeName === '全场指标'
                  ? 'production_indicator_all'
                  : submenuItem.typeName === '机组故障统计'
                  ? 'fault_unit'
                  : submenuItem.typeName === '全场故障统计'
                  ? 'fault_all'
                  : submenuItem.typeName === '齿轮箱-高速轴温度分析'
                  ? 'temperature_large_components_hig'
                  : submenuItem.typeName === '齿轮箱-中速轴温度分析'
                  ? 'temperature_large_components_mid'
                  : submenuItem.typeName === '齿轮箱-低速轴温度分析'
                  ? 'temperature_large_components_low'
                  : submenuItem.typeName === '主轴承温度分析'
                  ? 'temperature_large_components_min'
                  : submenuItem.typeName === '发电机-驱动端轴承温度分析'
                  ? 'temperature_large_components_adriven'
                  : submenuItem.typeName === '发电机-非驱动端轴承温度分析'
                  ? 'temperature_large_components_undriven'
                  : submenuItem.typeName === '发电机-轴承温度偏差分析'
                  ? 'temperature_large_components_tem_deviation'
                  : submenuItem.typeName === '发电机-绕组温度分析'
                  ? 'temperature_large_components_Winding_tem'
                  : submenuItem.typeCode
              "
              >{{ submenuItem.typeName }}</el-menu-item
            >
          </el-submenu>
          <el-menu-item :index="menuItem.typeCode" v-else>{{
            menuItem.typeName
          }}</el-menu-item>
        </template>
      </el-menu>
      <!-- 动态渲染组件 -->
      <component
        :is="currentComponent"
        :initBatchCode="initBatchCode"
        :analysisTypeCode="analysisTypeCode"
        :batchCodeList="batchCodeList"
        @setInitBathCode="setInitBathCode"
      ></component>
    </div>

    <!-- <el-empty description="暂无数据"></el-empty> -->
  </div>
</template>

<script>
import { assetssType } from "./js/assetssType";
import { queryAllAnalysisType } from "@/api/performance";
import { getAnalysisCodeInfo } from "@/api/overview";
export default {
  data() {
    return {
      loading: false,
      filterText: "",
      data: [],
      batchCodeList: [], //批次数组用于切换上一条、下一条
      initBatchCode: "", // 初始化分析编号
      analysisTypeCode: "", // 当前选中的分析类型
      windEngineGroupList: "", //风机编码
      defaultProps: {
        children: "children",
        label: "fieldOrCompanyName",
      },
      currentComponent: () =>
        import("./components/analysis_information/index.vue"), // 默认加载AnalysisInformation组件
      assetssTypeData: [
        {
          id: "1",
          label: "分析信息",
          typeCode: "analysis_information",
        },
      ],
      activeIndex: "analysis_information", // 默认选中的菜单项
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    // 监听 initBatchCode 的变化，确保树节点正确选中
    initBatchCode(newVal) {
      this.$nextTick(() => {
        const tree = this.$refs.tree;
        if (tree) {
          tree.setCurrentKey(newVal); // 设置当前选中的节点
        }
      });
    },
    analysisTypeCode(newVal) {
      console.log(newVal, "分析类型 ");
    },
  },
  created() {
    this.getTreeData();

    if (this.$route.query.batchCode) {
      this.initBatchCode = this.$route.query.batchCode;
    }
  },
  methods: {
    // 获取树形结构数据
    getTreeData() {
      this.loading = true;
      getAnalysisCodeInfo()
        .then((res) => {
          if (res.code === 200) {
            this.loading = false;
            this.batchCodeList = [];
            const formattedData = this.formatData(res.data);
            this.data = formattedData;

            // 确保数据加载完成后才查询其他分析类型
            this.queryAllAnalysisType();
          }
        })
        .catch((err) => {});
    },
    //数据格式化树形结构
    formatData(data) {
      return (
        data &&
        data.map((item) => {
          item.levelstate = "1";
          if (item.children && item.children.length > 0) {
            item.children = item.children.map((child) => ({
              //二级
              fieldOrCompanyName: child.fieldOrCompanyName,
              codeNumber: child.codeNumber,
              levelstate: "2",
              children: child.batchCodes
                ? child.batchCodes.map((bc) => {
                    if (this.initBatchCode === "") {
                      this.initBatchCode = bc.batchCode; // 初始化选中的节点
                    }
                    this.batchCodeList.push(bc.batchCode);
                    return {
                      //三级
                      fieldOrCompanyName: bc.analysisName,
                      codeNumber: bc.batchCode,
                      levelstate: "3",
                    };
                  })
                : [],
            }));
          }
          return item;
        })
      );
    },
    // 点击树形节点时
    handleNodeClick(data) {
      console.log(data, "data");
      if (data.levelstate === "1" || data.levelstate === "2") {
        this.$message.warning("当前选中风场未进行任何分析，请重新选择");
      } else {
        this.initBatchCode = data.codeNumber; // 更新选中的节点
      }
    },
    //获取
    queryAllAnalysisType() {
      queryAllAnalysisType().then((res) => {
        if (res.code === 200) {
          this.assetssTypeData = [
            {
              id: "1",
              typeName: "分析信息",
              typeCode: "analysis_information",
            },
            ...res.data,
          ];
        }
      });
    },
    // 过滤树形节点的方法
    filterNode(value, data) {
      if (!value) return true;
      return data.fieldOrCompanyName.indexOf(value) !== -1;
    },
    setInitBathCode(val) {
      this.initBatchCode = val;
    },
    // 菜单选中项的事件
    handleSelect(key, keyPath) {
      console.log(key, keyPath, "切换");
      this.analysisTypeCode = key;
      this.currentComponent = () => import(`./components/${key}/index.vue`);
    },
  },
};
</script>

<style scoped lang="scss">
.global-variable {
  display: flex;
  height: 90vh;
  overflow: hidden;
  .left {
    width: 200px;
    border-right: 1px solid #ebeef5;
    padding-right: 20px;
    margin-bottom: 20px;
    overflow-y: scroll;
    /* 滚动条整体样式 */
    &::-webkit-scrollbar {
      width: 0px; /* 滚动条宽度 */
    }

    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
      background: #f5f7fa;
      border-radius: 3px;
    }

    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      background: #c0c4cc;
      border-radius: 3px;
    }

    /* 滚动条滑块悬停时 */
    &::-webkit-scrollbar-thumb:hover {
      background: #909399;
    }
    .filterInput {
      margin: 20px 0;
    }
  }
  .right {
    flex: 1;
    padding-left: 20px;
    overflow: hidden;

    /* 横向滚动设置 */
    .el-menu-demo {
      max-width: 100%; /* 容器宽度为100% */
      white-space: nowrap; /* 阻止换行 */
      overflow-x: auto; /* 允许横向滚动 */
      display: flex; /* 让子菜单元素保持在同一行 */

      /* 滚动条整体样式 */
      &::-webkit-scrollbar {
        height: 6px; /* 滚动条宽度 */
      }

      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: #f5f7fa;
        border-radius: 3px;
      }

      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: #c0c4cc;
        border-radius: 3px;
      }

      /* 滚动条滑块悬停时 */
      &::-webkit-scrollbar-thumb:hover {
        background: #909399;
      }
    }
  }
  .el-menu-demo {
    border-bottom: 1px solid #ebeef5;
  }
  ::v-deep .el-submenu__title {
    padding: 0 10px !important;
  }
}
</style>