JG-CLIENT-TEMP/src/views/repair/operation/index.vue

<template>
  <div class="mainContentBox">
    <el-row :gutter="20">
      <el-col :span="4" class="boxStyle">
        <!-- 侧边栏盒子 -->
        <Jiluxiang />
      </el-col>
      <el-col :span="8">
        <div class="grid-content ep-bg-purple">
          <Info />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content ep-bg-purple">
          <Replacement />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Jiluxiang from "@/views/repair/operation/components/Jiluxiang.vue";
import Replacement from "@/views/repair/operation/components/replacement.vue";
import { useRepairStore } from "@/store";
import Info from "@/views/repair/components/info.vue";
import { getOpCompent } from "@/api/prosteps";

defineOptions({ name: "ProSteps" });
const store = useRepairStore();
const route = useRoute();
const router = useRouter();
const loading = ref(false);

//配置标签信息Data
const stepComponents = ref([]);
const defaultComponents = [
  {
    compentName: "物料采集",
    iconName: "wuliaocaiji",
    path: "wuliaocaiji",
    name: "Wuliaocaiji",
  },
  {
    compentName: "记录项",
    iconName: "jiluxiang",
    path: "jiluxiang",
    name: "Jiluxiang",
  },
  {
    compentName: "多媒体采集",
    iconName: "duomeiticaiji",
    path: "duomeiticaiji",
    name: "Duomeiticaiji",
  },
  {
    compentName: "ESOP",
    iconName: "ESOP",
    path: "esop",
    name: "Esop",
  },
  {
    compentName: "点检",
    iconName: "dianjian",
    path: "dianjian",
    name: "Dianjian",
  },
  {
    compentName: "设备记录",
    iconName: "shebeijilu",
    path: "shebeijilu",
    name: "Shebeijilu",
  },
  {
    compentName: "紧固",
    iconName: "jingu",
    path: "jingu",
    name: "Jingu",
  },
  {
    compentName: "调试配对",
    iconName: "tiaoshipipei",
    path: "tiaoshipipei",
    name: "Tiaoshipipei",
  },
  {
    compentName: "铭牌绑定",
    iconName: "mingpai",
    path: "mingpaibangding",
    name: "Mingpaibangding",
  },
];
//当前路由在setpComponents中的index
const selectIndex = ref(0);

//配置data固定路由参数等
const setStepComponents = (data) => {
  let resData = [];
  data.forEach((item) => {
    defaultComponents.forEach((obj) => {
      if (item.compentName === obj.compentName) {
        resData.push({ ...item, ...obj });
      }
    });
  });
  return resData;
};
const getNameClass = (index) => {
  return index === selectIndex.value ? "typeBoxSelected" : "typeBoxNormal";
};
//获取当前tags列表
const getOpCompentArray = async () => {
  const { data } = await getOpCompent("/129/12");
  stepComponents.value = setStepComponents(data);
  router.replace({ name: stepComponents.value[0].name });
};
//设置标签是否被选中
const setSelectIndex = (index) => {
  selectIndex.value = index;
};
const setSelectTag = () => {
  const nowRouteName = route.name;
  stepComponents.value.forEach((item, index) => {
    if (item.name == nowRouteName) {
      setSelectIndex(index);
    }
  });
};
onMounted(async () => {
  await getOpCompentArray();
  setSelectTag();
});
</script>

<style lang="scss" scoped>
.boxStyle {
  height: calc(100vh - 80px);
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 135px;
  border-radius: 16px;
  text-align: center;
}

.typeContainer {
  width: 100%;
  height: 80px;
  overflow-x: auto;

  .svgIcon {
    @include flex;
  }
}

.routerView {
  display: flex;
  flex: 1;
  overflow-y: auto;
  width: 100%;
  height: calc(100vh - 184px);
}

.typeBox {
  height: 80px;
  width: 135px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .name {
    height: 16px;
    font-weight: 500;
    font-size: $f20;
    line-height: 20px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-top: $p10;
  }
}

.typeBoxNormal {
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
}

.typeBoxSelected {
  background: $select-hover;
  color: white;
}
</style>