steps.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <div class="body">
  3. <div class="steps" v-for="(item, index) in opsArray" :key="index" @click="boxClick(item, index)">
  4. <div :class="selectStepIndex == index ? 'stepBox stepBoxHover' : 'stepBox'">
  5. <div style="display: flex; align-items: center">
  6. <div :class="selectStepIndex == index
  7. ? 'stepIndex stepIndexHover'
  8. : 'stepIndex'
  9. ">
  10. <span :class="selectStepIndex == index
  11. ? 'indexText hoverTextColor'
  12. : 'indexText'
  13. ">{{ index + 1 }}</span>
  14. </div>
  15. <div class="midTextBox">
  16. <div :class="selectStepIndex == index ? 'stepName stepNameHover' : 'stepName'
  17. ">
  18. {{ item.operationName }}
  19. </div>
  20. <div :class="selectStepIndex == index
  21. ? 'stepStation stepStationHover'
  22. : 'stepStation'
  23. ">
  24. {{ item.operationCode }}
  25. </div>
  26. </div>
  27. </div>
  28. <div :class="selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'">
  29. {{ item.completeNum }}
  30. </div>
  31. </div>
  32. <div class="line" v-if="index != opsArray.length - 1"></div>
  33. </div>
  34. </div>
  35. </template>
  36. <script lang="ts" setup>
  37. import router from "@/router";
  38. import { useProcessStore } from "@/store";
  39. const store = useProcessStore();
  40. defineProps<{
  41. opsArray?: object;
  42. selectStepIndex: number;
  43. }>();
  44. const emit = defineEmits(["setstepindex"]);
  45. const boxClick = (item, index) => {
  46. const data1 = JSON.parse(JSON.stringify(store.odersData));
  47. const data2 = JSON.parse(JSON.stringify(store.processInfo));
  48. data1.operationId = item.operationId;
  49. //配置状态机参数
  50. store.setOdersData({ ...data1 });
  51. data2.operationCode = item.operationCode;
  52. data2.operationName = item.operationName;
  53. store.setProcessInfo({ ...data2 });
  54. router.push({ path: "/pro-steps" });
  55. emit("setstepindex", index);
  56. };
  57. </script>
  58. <style lang="scss" scoped>
  59. .body {
  60. width: 100%;
  61. }
  62. .stepBox {
  63. display: flex;
  64. justify-content: space-between;
  65. align-items: center;
  66. height: 88px;
  67. border-radius: 44px;
  68. background-color: white;
  69. box-shadow: 0px 1px 1px 1px #00000025;
  70. }
  71. .stepBoxHover {
  72. box-shadow: 0px 0px 0px 0px;
  73. background-color: $select-hover;
  74. }
  75. .stepIndexHover {
  76. border-color: white !important;
  77. span {
  78. color: white;
  79. }
  80. }
  81. .stepNameHover {
  82. color: white !important;
  83. }
  84. .stepStationHover {
  85. color: white !important;
  86. }
  87. .timeBoxHover {
  88. color: white !important;
  89. }
  90. .hoverTextColor {
  91. color: white !important;
  92. }
  93. .stepIndex {
  94. width: 88px;
  95. height: 88px;
  96. border: 2px solid #303030;
  97. border-radius: 44px;
  98. @include flex;
  99. .indexText {
  100. font-size: $f24;
  101. color: #303030;
  102. }
  103. }
  104. .midTextBox {
  105. margin-left: 10px;
  106. .stepName {
  107. font-size: $f24;
  108. color: $font-default-black;
  109. }
  110. .stepStation {
  111. font-size: $f20;
  112. color: $font-default-60;
  113. line-height: 20px;
  114. }
  115. }
  116. .timeBox {
  117. margin-right: 20px;
  118. @include flex;
  119. font-size: $f24;
  120. }
  121. .line {
  122. border-right: 1px solid #303030;
  123. height: 15px;
  124. width: 1px;
  125. margin-left: 44px;
  126. }
  127. </style>