123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345 |
- `
- <template>
- <div>
- <div class="headerInfo">
- <div
- class="titleText"
- style="
- width: 300px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- "
- >
- {{ store.processInfo.materialName }} -
- {{ store.processInfo.materialModel }}
- </div>
- <div class="info">
- <div class="item">
- 当前工序:
- {{
- store.scanInfo.operationName ? store.scanInfo.operationName : "-"
- }}
- </div>
- <div class="item">
- 下一工位:{{
- store.scanInfo.nextStation ? store.scanInfo.nextStation : "-"
- }}
- </div>
- <div class="item">
- 卡号:{{ store.scanInfo.seqNo ? store.scanInfo.seqNo : "-" }}
- </div>
- <div class="item">
- 编码:{{
- store.scanInfo.materialCode ? store.scanInfo.materialCode : "-"
- }}
- </div>
- </div>
- </div>
- <div class="mainContentBox">
- <el-row :gutter="20">
- <el-col :span="4" class="boxStyle">
- <!-- 侧边栏盒子 -->
- <OperationBar />
- </el-col>
- <el-col :span="20">
- <div class="typeContainer">
- <el-scrollbar>
- <div style="display: flex">
- <div
- v-for="(item, index) in stepComponents"
- :key="index"
- class="scrollbar-demo-item"
- >
- <router-link :to="{ name: item.name }" replace>
- <div
- :class="getNameClass(index)"
- class="typeBox"
- @click="setSelectIndex(index)"
- >
- <div class="svgIcon">
- <svg-icon :icon-class="item.iconName" size="30" />
- </div>
- <div class="name">{{ item.compentName }}</div>
- </div>
- </router-link>
- </div>
- </div>
- </el-scrollbar>
- </div>
- <Empty v-if="stepComponents.length == 0" />
- <div :key="key" class="routerView">
- <el-scrollbar style="width: 100%">
- <router-view v-slot="{ Component, route }">
- <keep-alive
- include="Dianjian,Jiluxiang,Duomeiticaiji,Esop,Jingu,Mingpaibangding,Shebeijilu,Tiaoshipipei,Wuliaocaiji"
- >
- <component :is="Component" :key="route.fullPath" />
- </keep-alive>
- </router-view>
- </el-scrollbar>
- </div>
- </el-col>
- </el-row>
- </div>
- </div>
- </template>
- <script setup>
- import OperationBar from "@/views/pro-steps/operationBar.vue";
- import { useProcessStore } from "@/store";
- import { getOpCompent } from "@/api/prosteps";
- const store = useProcessStore();
- const key = ref(false);
- defineOptions({ name: "ProSteps" });
- const route = useRoute();
- const router = useRouter();
- const loading = ref(false);
- const recondOPId = ref(null);
- const qrCode = ref(null);
- //配置标签信息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",
- },
- {
- compentName: "测试记录",
- iconName: "mingpai",
- path: "ceshijilu",
- name: "Ceshijilu",
- },
- {
- compentName: "工序表单",
- iconName: "mingpai",
- path: "execl",
- name: "Excel",
- },
- {
- compentName: "数据采集",
- iconName: "mingpai",
- path: "screwdriver",
- name: "Screwdriver",
- },
- {
- compentName: "钎焊指引",
- iconName: "jingu",
- path: "zhiyin",
- name: "Zhiyin",
- },
- ];
- //当前路由在setpComponents中的index
- const selectIndex = ref(0);
- //配置data固定路由参数等
- const setStepComponents = (data) => {
- data.push({
- compentName: "钎焊指引",
- });
- 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(
- "/" + `${store.odersData.operationId}` + "/" + `${store.scanInfo.id}`
- );
- recondOPId.value = store.odersData.operationId;
- qrCode.value = store.scanInfo.seqNo;
- stepComponents.value = setStepComponents(data);
- router.replace({ name: stepComponents.value[selectIndex.value].name });
- };
- //设置标签是否被选中
- const setSelectIndex = (index) => {
- selectIndex.value = index;
- };
- // const setSelectTag = () => {
- // const nowRouteName = route.name;
- // stepComponents.value.forEach((item, index) => {
- // if (item.name == nowRouteName) {
- // setSelectIndex(index);
- // }
- // });
- // };
- onActivated(async () => {
- //缓存组件数据逻辑
- if (recondOPId.value == null || qrCode.value == null) {
- //相当于首次进入该路由
- await getOpCompentArray();
- } else {
- if (
- recondOPId.value != store.odersData.operationId ||
- qrCode.value != store.scanInfo.seqNo
- ) {
- //当发生改变时
- setSelectIndex(0);
- await getOpCompentArray();
- key.value = !key.value;
- } else {
- await getOpCompentArray();
- }
- }
- });
- </script>
- <style lang="scss" scoped>
- .boxStyle {
- height: calc(100vh - 80px);
- }
- .headerInfo {
- height: 40px;
- width: calc(100vw - 40px);
- padding: 10px;
- margin: 0 20px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-radius: 16px;
- border-right: 0px;
- border-left: 0px;
- box-sizing: border-box;
- margin-bottom: 10px;
- background-color: white;
- .info {
- display: flex;
- flex-shrink: 0;
- .item {
- margin: 0 5px;
- font-size: 14px;
- font-weight: 300;
- }
- }
- }
- .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;
- }
- }
- .mainContentBox {
- height: calc(100vh - 130px);
- }
- .routerView {
- display: flex;
- flex: 1;
- overflow-y: auto;
- width: 100%;
- height: calc(100vh - 234px);
- padding-top: $p20;
- }
- .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>
|