TxProject/src/views/InteractiveDiagnosis/components/FaultHelp.vue

<template>
  <div>
    <el-tabs>
      <el-tab-pane label="常见问题">
        <div class="aip-cap">
          KG01-1000B激光捷联惯组【152Gcp】产品供电电流异常
        </div>
        <div class="aip-cap">主被动雷达导引头方位向测角异常质量问题</div>
        <div class="aip-cap">主被动雷达导引头被动分系统测试异常</div>
        <div class="aip-cap">主被动雷达导引头自检结果异常</div>
      </el-tab-pane>
      <el-tab-pane label="故障单机">
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-tab-pane>
      <el-tab-pane label="角色管理">
        <el-empty description="暂无数据"></el-empty>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: "faultHelp",
  data() {
    return {
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
};
</script>
<style scoped lang="scss">
.aip-cap {
  margin-top: 20px;
  padding: 10px;
  background: #f6f9ff;
  font-weight: bold;
  border: 1px solid transparent;
  cursor: pointer;
  &:hover {
    border: 1px solid rgb(88, 122, 207);
  }
}
</style>