steps.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <template>
  2. <div class="body">
  3. <div
  4. :class="item.isOp == true ? 'steps stepsDisabled' : 'steps'"
  5. v-for="(item, index) in showOpsArray"
  6. :key="index"
  7. @click="boxClick(item, index)"
  8. >
  9. <div
  10. :class="selectStepIndex == index ? 'stepBox stepBoxHover' : 'stepBox'"
  11. >
  12. <div style="display: flex; align-items: center">
  13. <div
  14. :class="
  15. selectStepIndex == index
  16. ? 'stepIndex stepIndexHover'
  17. : 'stepIndex'
  18. "
  19. >
  20. <span
  21. :class="
  22. selectStepIndex == index
  23. ? 'indexText hoverTextColor'
  24. : 'indexText'
  25. "
  26. >{{ index + 1 }}</span
  27. >
  28. </div>
  29. <div class="midTextBox">
  30. <div
  31. :class="
  32. selectStepIndex == index ? 'stepName stepNameHover' : 'stepName'
  33. "
  34. >
  35. {{ item.operationName }}
  36. </div>
  37. </div>
  38. </div>
  39. <div
  40. :class="selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'"
  41. >
  42. {{ item.completeNum }}
  43. </div>
  44. <!-- <div style="padding-right: 20px">
  45. <svg-icon
  46. icon-class="dangqian"
  47. size="20"
  48. v-if="index == selectStepIndex"
  49. />
  50. </div> -->
  51. </div>
  52. <div class="line" v-if="index != showOpsArray.length - 1"></div>
  53. </div>
  54. <el-empty v-if="!opsArray" description="暂无数据" />
  55. <!-- 弹窗 -->
  56. </div>
  57. </template>
  58. <script setup>
  59. import { useProcessStore } from "@/store";
  60. import { getScan } from "@/api/process";
  61. const store = useProcessStore();
  62. const props = defineProps({
  63. opsArray: Object,
  64. opShowAllStatus: Boolean,
  65. });
  66. const showOpsArray = computed(() => {
  67. return props.opShowAllStatus ? props.opsArray : props.opsArray.slice(0, 3);
  68. });
  69. const emit = defineEmits(["init"]);
  70. //步骤显示index
  71. const router = useRouter();
  72. const selectStepIndex = inject("selectStepIndex");
  73. const boxClick = (item, index) => {
  74. if (item.isOp == true) {
  75. return;
  76. }
  77. store.odersData.operationId = item.operationId;
  78. store.processInfo.operationCode = item.operationCode;
  79. store.processInfo.operationName = item.operationName;
  80. selectStepIndex.value = index;
  81. };
  82. const getScanData = async () => {
  83. try {
  84. const { code, data, msg } = await getScan({
  85. operationId: Number(store.odersData.operationId),
  86. qrCode: store.odersData.qrCode,
  87. workOrderCode: store.odersData.workOrderCode,
  88. //stationId暂时随便传一个
  89. stationId: 1,
  90. });
  91. if (code == "200") {
  92. store.scanInfo = data;
  93. router.push({ path: "/pro-steps" });
  94. }
  95. } catch {}
  96. };
  97. </script>
  98. <style lang="scss" scoped>
  99. .body {
  100. width: 100%;
  101. }
  102. .existsText {
  103. margin-left: 40px;
  104. font-size: $f16;
  105. font-weight: 500;
  106. color: #303030;
  107. }
  108. .stepBox {
  109. display: flex;
  110. justify-content: space-between;
  111. align-items: center;
  112. height: 40px;
  113. border-radius: 20px;
  114. background-color: rgb(64, 64, 64);
  115. box-shadow: 0px 1px 1px 1px #00000025;
  116. }
  117. .stepsDisabled {
  118. opacity: 0.5;
  119. }
  120. .stepsDisabled:hover {
  121. cursor: not-allowed; /* 禁止状态 */
  122. }
  123. .stepBoxHover {
  124. box-shadow: 0px 0px 0px 0px;
  125. background-color: var(--ohos-area-active-bg);
  126. }
  127. .stepExistsHover {
  128. cursor: not-allowed;
  129. }
  130. .stepBoxDisabled {
  131. background-color: green;
  132. cursor: not-allowed;
  133. }
  134. .stepIndexHover {
  135. border-color: white !important;
  136. background-color: var(--ohos-area-active-bg) !important;
  137. span {
  138. color: white !important;
  139. }
  140. }
  141. .stepNameHover {
  142. color: white !important;
  143. }
  144. .stepStationHover {
  145. color: white !important;
  146. }
  147. .timeBoxHover {
  148. color: white !important;
  149. }
  150. .hoverTextColor {
  151. color: white !important;
  152. }
  153. .stepIndex {
  154. width: 40px;
  155. height: 40px;
  156. border: 2px solid #303030;
  157. border-radius: 44px;
  158. color: var(--ohos-text);
  159. background-color: rgb(108, 108, 108);
  160. @include flex;
  161. .indexText {
  162. font-size: $f16;
  163. color: var(--ohos-text);
  164. }
  165. }
  166. .midTextBox {
  167. margin-left: 10px;
  168. .stepName {
  169. font-size: $f16;
  170. color: var(--ohos-text);
  171. }
  172. .stepStation {
  173. font-size: $f20;
  174. color: $font-default-60;
  175. line-height: 20px;
  176. }
  177. }
  178. .timeBox {
  179. margin-right: 20px;
  180. @include flex;
  181. font-size: $f24;
  182. }
  183. .line {
  184. border-right: 1px solid black;
  185. height: 15px;
  186. width: 1px;
  187. margin-left: 20px;
  188. }
  189. </style>