|
|
@@ -1,7 +1,113 @@
|
|
|
<template>
|
|
|
- <div class="mainContentBox">工步</div>
|
|
|
+ <div class="mainContentBox">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="4" class="elColClasss"> 对对对</el-col>
|
|
|
+ <el-col :span="20" class="elColClasss">
|
|
|
+ <div class="typeContainer">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in stepComponents"
|
|
|
+ :key="index"
|
|
|
+ :class="getNameClass(index)"
|
|
|
+ class="typeBox"
|
|
|
+ @click="clickToolCom(item, index)"
|
|
|
+ >
|
|
|
+ <svg-icon :icon-class="item.compentType" size="30" />
|
|
|
+ <div class="name">{{ item.compentName }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts" setup></script>
|
|
|
+<script setup>
|
|
|
+const stepComponents = ref([
|
|
|
+ {
|
|
|
+ compentName: "记录项",
|
|
|
+ compentType: "jiluxiang",
|
|
|
+ route: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ compentName: "物料采集",
|
|
|
+ compentType: "wuliaocaiji",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ compentName: "ESOP",
|
|
|
+ compentType: "ESOP",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ compentName: "点检",
|
|
|
+ compentType: "dianjian",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ compentName: "设备记录",
|
|
|
+ compentType: "shebeijilu",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ compentName: "紧固",
|
|
|
+ compentType: "jingu",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ compentName: "调试配对",
|
|
|
+ compentType: "tiaoshipipei",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ compentName: "铭牌绑定",
|
|
|
+ compentType: "mingpai",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ compentName: "多媒体采集",
|
|
|
+ compentType: "duomeiticaiji",
|
|
|
+ },
|
|
|
+]);
|
|
|
+const selectIndex = ref(-1);
|
|
|
+const currentCom = ref({});
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+const clickToolCom = (com, index) => {
|
|
|
+ selectIndex.value = index;
|
|
|
+ currentCom.value = com;
|
|
|
+};
|
|
|
+const getNameClass = (index) => {
|
|
|
+ return index === selectIndex.value ? "typeBoxSelected" : "typeBoxNormal";
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.typeContainer {
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.typeBox {
|
|
|
+ height: 80px;
|
|
|
+ width: 150px;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 70px;
|
|
|
+ height: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 16px;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.typeBoxNormal {
|
|
|
+ background: transparent;
|
|
|
+ color: rgba(0, 0, 0, 0.9);
|
|
|
+}
|
|
|
+
|
|
|
+.typeBoxSelected {
|
|
|
+ background: $select-hover;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+</style>
|
jiaxiaoqiang
