|
@@ -12,7 +12,7 @@
|
|
|
<router-link :to="{ name: item.name }">
|
|
|
<div :class="getNameClass(index)" class="typeBox" @click="setSelectIndex(index)">
|
|
|
<div class="svgIcon">
|
|
|
- <svg-icon :icon-class="item.compentType" size="30" />
|
|
|
+ <svg-icon :icon-class="item.iconName" size="30" />
|
|
|
</div>
|
|
|
<div class="name">{{ item.compentName }}</div>
|
|
|
</div>
|
|
@@ -39,79 +39,110 @@
|
|
|
import { onMounted } from "vue";
|
|
|
import Jiluxiang from "@/views/pro-steps/Jiluxiang.vue";
|
|
|
import { useProcessStore } from "@/store";
|
|
|
-
|
|
|
+import { getOpCompent } from "@/api/prosteps";
|
|
|
const store = useProcessStore();
|
|
|
defineOptions({ name: "ProSteps" });
|
|
|
const route = useRoute();
|
|
|
+const loading = ref(false);
|
|
|
//配置标签信息Data
|
|
|
-const stepComponents = ref([
|
|
|
+const stepComponents = ref([]);
|
|
|
+const defaultComponents = [
|
|
|
{
|
|
|
compentName: "物料采集",
|
|
|
- compentType: "wuliaocaiji",
|
|
|
+ iconName: "wuliaocaiji",
|
|
|
path: "wuliaocaiji",
|
|
|
name: "Wuliaocaiji",
|
|
|
},
|
|
|
{
|
|
|
compentName: "记录项",
|
|
|
- compentType: "jiluxiang",
|
|
|
+ iconName: "jiluxiang",
|
|
|
path: "jiluxiang",
|
|
|
name: "Jiluxiang",
|
|
|
},
|
|
|
{
|
|
|
compentName: "多媒体采集",
|
|
|
- compentType: "duomeiticaiji",
|
|
|
+ iconName: "duomeiticaiji",
|
|
|
path: "duomeiticaiji",
|
|
|
name: "Duomeiticaiji",
|
|
|
},
|
|
|
{
|
|
|
compentName: "ESOP",
|
|
|
- compentType: "ESOP",
|
|
|
+ iconName: "ESOP",
|
|
|
path: "esop",
|
|
|
name: "Esop",
|
|
|
},
|
|
|
{
|
|
|
compentName: "点检",
|
|
|
- compentType: "dianjian",
|
|
|
+ iconName: "dianjian",
|
|
|
path: "dianjian",
|
|
|
name: "Dianjian",
|
|
|
},
|
|
|
{
|
|
|
compentName: "设备记录",
|
|
|
- compentType: "shebeijilu",
|
|
|
+ iconName: "shebeijilu",
|
|
|
path: "shebeijilu",
|
|
|
name: "Shebeijilu",
|
|
|
},
|
|
|
{
|
|
|
compentName: "紧固",
|
|
|
- compentType: "jingu",
|
|
|
+ iconName: "jingu",
|
|
|
path: "jingu",
|
|
|
name: "Jingu",
|
|
|
},
|
|
|
{
|
|
|
compentName: "调试配对",
|
|
|
- compentType: "tiaoshipipei",
|
|
|
+ iconName: "tiaoshipipei",
|
|
|
path: "tiaoshipipei",
|
|
|
name: "Tiaoshipipei",
|
|
|
},
|
|
|
{
|
|
|
compentName: "铭牌绑定",
|
|
|
- compentType: "mingpai",
|
|
|
+ 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);
|
|
|
+};
|
|
|
//设置标签是否被选中
|
|
|
const setSelectIndex = (index) => {
|
|
|
selectIndex.value = index;
|
|
|
};
|
|
|
+const setSelectTag = () => {
|
|
|
+ const nowRouteName = route.name;
|
|
|
+ stepComponents.value.forEach((item, index) => {
|
|
|
+ if (item.name == nowRouteName) {
|
|
|
+ setSelectIndex(index);
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
onMounted(() => {
|
|
|
- setSelectIndex();
|
|
|
+ getOpCompentArray();
|
|
|
+ setSelectTag();
|
|
|
+});
|
|
|
+onActivated(() => {
|
|
|
+ setSelectTag();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
@@ -157,14 +188,14 @@ onMounted(() => {
|
|
|
align-items: center;
|
|
|
|
|
|
.name {
|
|
|
- width: 70px;
|
|
|
height: 16px;
|
|
|
font-weight: 500;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 16px;
|
|
|
+ font-size: $f20;
|
|
|
+ line-height: 20px;
|
|
|
text-align: center;
|
|
|
font-style: normal;
|
|
|
text-transform: none;
|
|
|
+ margin-top: $p10;
|
|
|
}
|
|
|
}
|
|
|
|