index.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  1. `
  2. <template>
  3. <div>
  4. <div class="headerInfo">
  5. <div
  6. class="titleText"
  7. style="
  8. width: 300px;
  9. white-space: nowrap;
  10. overflow: hidden;
  11. text-overflow: ellipsis;
  12. "
  13. >
  14. {{ store.processInfo.materialName }} -
  15. {{ store.processInfo.materialModel }}
  16. </div>
  17. <div class="info">
  18. <div class="item">
  19. 当前工序:
  20. {{
  21. store.scanInfo.operationName ? store.scanInfo.operationName : "-"
  22. }}
  23. </div>
  24. <div class="item">
  25. 下一工位:{{
  26. store.scanInfo.nextStation ? store.scanInfo.nextStation : "-"
  27. }}
  28. </div>
  29. <div class="item">
  30. 卡号:{{ store.scanInfo.seqNo ? store.scanInfo.seqNo : "-" }}
  31. </div>
  32. <div class="item">
  33. 编码:{{
  34. store.scanInfo.materialCode ? store.scanInfo.materialCode : "-"
  35. }}
  36. </div>
  37. </div>
  38. </div>
  39. <div class="mainContentBox">
  40. <el-row :gutter="20">
  41. <el-col :span="4" class="boxStyle">
  42. <!-- 侧边栏盒子 -->
  43. <OperationBar />
  44. </el-col>
  45. <el-col :span="20">
  46. <div class="typeContainer">
  47. <el-scrollbar>
  48. <div style="display: flex">
  49. <div
  50. v-for="(item, index) in stepComponents"
  51. :key="index"
  52. class="scrollbar-demo-item"
  53. >
  54. <router-link :to="{ name: item.name }" replace>
  55. <div
  56. :class="getNameClass(index)"
  57. class="typeBox"
  58. @click="setSelectIndex(index)"
  59. >
  60. <div class="svgIcon">
  61. <svg-icon :icon-class="item.iconName" size="30" />
  62. </div>
  63. <div class="name">{{ item.compentName }}</div>
  64. </div>
  65. </router-link>
  66. </div>
  67. </div>
  68. </el-scrollbar>
  69. </div>
  70. <Empty v-if="stepComponents.length == 0" />
  71. <div :key="key" class="routerView">
  72. <el-scrollbar style="width: 100%">
  73. <router-view v-slot="{ Component, route }">
  74. <keep-alive
  75. include="Dianjian,Jiluxiang,Duomeiticaiji,Esop,Jingu,Mingpaibangding,Shebeijilu,Tiaoshipipei,Wuliaocaiji"
  76. >
  77. <component :is="Component" :key="route.fullPath" />
  78. </keep-alive>
  79. </router-view>
  80. </el-scrollbar>
  81. </div>
  82. </el-col>
  83. </el-row>
  84. </div>
  85. </div>
  86. </template>
  87. <script setup>
  88. import OperationBar from "@/views/pro-steps/operationBar.vue";
  89. import { useProcessStore } from "@/store";
  90. import { getOpCompent } from "@/api/prosteps";
  91. const store = useProcessStore();
  92. const key = ref(false);
  93. defineOptions({ name: "ProSteps" });
  94. const route = useRoute();
  95. const router = useRouter();
  96. const loading = ref(false);
  97. const recondOPId = ref(null);
  98. const qrCode = ref(null);
  99. //配置标签信息Data
  100. const stepComponents = ref([]);
  101. const defaultComponents = [
  102. {
  103. compentName: "物料采集",
  104. iconName: "wuliaocaiji",
  105. path: "wuliaocaiji",
  106. name: "Wuliaocaiji",
  107. },
  108. {
  109. compentName: "记录项",
  110. iconName: "jiluxiang",
  111. path: "jiluxiang",
  112. name: "Jiluxiang",
  113. },
  114. {
  115. compentName: "多媒体采集",
  116. iconName: "duomeiticaiji",
  117. path: "duomeiticaiji",
  118. name: "Duomeiticaiji",
  119. },
  120. {
  121. compentName: "ESOP",
  122. iconName: "ESOP",
  123. path: "esop",
  124. name: "Esop",
  125. },
  126. {
  127. compentName: "点检",
  128. iconName: "dianjian",
  129. path: "dianjian",
  130. name: "Dianjian",
  131. },
  132. {
  133. compentName: "设备记录",
  134. iconName: "shebeijilu",
  135. path: "shebeijilu",
  136. name: "Shebeijilu",
  137. },
  138. {
  139. compentName: "紧固",
  140. iconName: "jingu",
  141. path: "jingu",
  142. name: "Jingu",
  143. },
  144. {
  145. compentName: "调试配对",
  146. iconName: "tiaoshipipei",
  147. path: "tiaoshipipei",
  148. name: "Tiaoshipipei",
  149. },
  150. {
  151. compentName: "铭牌绑定",
  152. iconName: "mingpai",
  153. path: "mingpaibangding",
  154. name: "Mingpaibangding",
  155. },
  156. {
  157. compentName: "测试记录",
  158. iconName: "mingpai",
  159. path: "ceshijilu",
  160. name: "Ceshijilu",
  161. },
  162. {
  163. compentName: "工序表单",
  164. iconName: "mingpai",
  165. path: "execl",
  166. name: "Excel",
  167. },
  168. {
  169. compentName: "数据采集",
  170. iconName: "mingpai",
  171. path: "screwdriver",
  172. name: "Screwdriver",
  173. },
  174. {
  175. compentName: "钎焊指引",
  176. iconName: "jingu",
  177. path: "zhiyin",
  178. name: "Zhiyin",
  179. },
  180. ];
  181. //当前路由在setpComponents中的index
  182. const selectIndex = ref(0);
  183. //配置data固定路由参数等
  184. const setStepComponents = (data) => {
  185. data.push({
  186. compentName: "钎焊指引",
  187. });
  188. let resData = [];
  189. data.forEach((item) => {
  190. defaultComponents.forEach((obj) => {
  191. if (item.compentName === obj.compentName) {
  192. resData.push({ ...item, ...obj });
  193. }
  194. });
  195. });
  196. return resData;
  197. };
  198. const getNameClass = (index) => {
  199. return index === selectIndex.value ? "typeBoxSelected" : "typeBoxNormal";
  200. };
  201. //获取当前tags列表
  202. const getOpCompentArray = async () => {
  203. const { data } = await getOpCompent(
  204. "/" + `${store.odersData.operationId}` + "/" + `${store.scanInfo.id}`
  205. );
  206. recondOPId.value = store.odersData.operationId;
  207. qrCode.value = store.scanInfo.seqNo;
  208. stepComponents.value = setStepComponents(data);
  209. router.replace({ name: stepComponents.value[selectIndex.value].name });
  210. };
  211. //设置标签是否被选中
  212. const setSelectIndex = (index) => {
  213. selectIndex.value = index;
  214. };
  215. // const setSelectTag = () => {
  216. // const nowRouteName = route.name;
  217. // stepComponents.value.forEach((item, index) => {
  218. // if (item.name == nowRouteName) {
  219. // setSelectIndex(index);
  220. // }
  221. // });
  222. // };
  223. onActivated(async () => {
  224. //缓存组件数据逻辑
  225. if (recondOPId.value == null || qrCode.value == null) {
  226. //相当于首次进入该路由
  227. await getOpCompentArray();
  228. } else {
  229. if (
  230. recondOPId.value != store.odersData.operationId ||
  231. qrCode.value != store.scanInfo.seqNo
  232. ) {
  233. //当发生改变时
  234. setSelectIndex(0);
  235. await getOpCompentArray();
  236. key.value = !key.value;
  237. } else {
  238. await getOpCompentArray();
  239. }
  240. }
  241. });
  242. </script>
  243. <style lang="scss" scoped>
  244. .boxStyle {
  245. height: calc(100vh - 80px);
  246. }
  247. .headerInfo {
  248. height: 40px;
  249. width: calc(100vw - 40px);
  250. padding: 10px;
  251. margin: 0 20px;
  252. display: flex;
  253. justify-content: space-between;
  254. align-items: center;
  255. border-radius: 16px;
  256. border-right: 0px;
  257. border-left: 0px;
  258. box-sizing: border-box;
  259. margin-bottom: 10px;
  260. background-color: white;
  261. .info {
  262. display: flex;
  263. flex-shrink: 0;
  264. .item {
  265. margin: 0 5px;
  266. font-size: 14px;
  267. font-weight: 300;
  268. }
  269. }
  270. }
  271. .scrollbar-demo-item {
  272. flex-shrink: 0;
  273. display: flex;
  274. align-items: center;
  275. justify-content: center;
  276. height: 80px;
  277. width: 135px;
  278. border-radius: 16px;
  279. text-align: center;
  280. }
  281. .typeContainer {
  282. width: 100%;
  283. height: 80px;
  284. overflow-x: auto;
  285. .svgIcon {
  286. @include flex;
  287. }
  288. }
  289. .mainContentBox {
  290. height: calc(100vh - 130px);
  291. }
  292. .routerView {
  293. display: flex;
  294. flex: 1;
  295. overflow-y: auto;
  296. width: 100%;
  297. height: calc(100vh - 234px);
  298. padding-top: $p20;
  299. }
  300. .typeBox {
  301. height: 80px;
  302. width: 135px;
  303. border-radius: 16px;
  304. display: flex;
  305. flex-direction: column;
  306. justify-content: center;
  307. align-items: center;
  308. .name {
  309. height: 16px;
  310. font-weight: 500;
  311. font-size: $f20;
  312. line-height: 20px;
  313. text-align: center;
  314. font-style: normal;
  315. text-transform: none;
  316. margin-top: $p10;
  317. }
  318. }
  319. .typeBoxNormal {
  320. background: transparent;
  321. color: rgba(0, 0, 0, 0.9);
  322. }
  323. .typeBoxSelected {
  324. background: $select-hover;
  325. color: white;
  326. }
  327. </style>