123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- <template>
- <div class="body">
- <div class="steps" v-for="(item, index) in opsArray" :key="index" @click="boxClick(item, index)">
- <div :class="selectStepIndex == index ? 'stepBox stepBoxHover' : 'stepBox'">
- <div style="display: flex; align-items: center">
- <div :class="selectStepIndex == index
- ? 'stepIndex stepIndexHover'
- : 'stepIndex'
- ">
- <span :class="selectStepIndex == index
- ? 'indexText hoverTextColor'
- : 'indexText'
- ">{{ index + 1 }}</span>
- </div>
- <div class="midTextBox">
- <div :class="selectStepIndex == index ? 'stepName stepNameHover' : 'stepName'
- ">
- {{ item.operationName }}
- </div>
- <div :class="selectStepIndex == index
- ? 'stepStation stepStationHover'
- : 'stepStation'
- ">
- {{ item.operationCode }}
- </div>
- </div>
- </div>
- <div :class="selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'">
- {{ item.completeNum }}
- </div>
- </div>
- <div class="line" v-if="index != opsArray.length - 1"></div>
- </div>
- </div>
- </template>
- <script lang="ts" setup>
- import router from "@/router";
- import { useProcessStore } from "@/store";
- const store = useProcessStore();
- defineProps<{
- opsArray?: object;
- selectStepIndex: number;
- }>();
- const emit = defineEmits(["setstepindex"]);
- const boxClick = (item, index) => {
- const data1 = JSON.parse(JSON.stringify(store.odersData));
- const data2 = JSON.parse(JSON.stringify(store.processInfo));
- data1.operationId = item.operationId;
- //配置状态机参数
- store.setOdersData({ ...data1 });
- data2.operationCode = item.operationCode;
- data2.operationName = item.operationName;
- store.setProcessInfo({ ...data2 });
- router.push({ path: "/pro-steps" });
- emit("setstepindex", index);
- };
- </script>
- <style lang="scss" scoped>
- .body {
- width: 100%;
- }
- .stepBox {
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 88px;
- border-radius: 44px;
- background-color: white;
- box-shadow: 0px 1px 1px 1px #00000025;
- }
- .stepBoxHover {
- box-shadow: 0px 0px 0px 0px;
- background-color: $select-hover;
- }
- .stepIndexHover {
- border-color: white !important;
- span {
- color: white;
- }
- }
- .stepNameHover {
- color: white !important;
- }
- .stepStationHover {
- color: white !important;
- }
- .timeBoxHover {
- color: white !important;
- }
- .hoverTextColor {
- color: white !important;
- }
- .stepIndex {
- width: 88px;
- height: 88px;
- border: 2px solid #303030;
- border-radius: 44px;
- @include flex;
- .indexText {
- font-size: $f24;
- color: #303030;
- }
- }
- .midTextBox {
- margin-left: 10px;
- .stepName {
- font-size: $f24;
- color: $font-default-black;
- }
- .stepStation {
- font-size: $f20;
- color: $font-default-60;
- line-height: 20px;
- }
- }
- .timeBox {
- margin-right: 20px;
- @include flex;
- font-size: $f24;
- }
- .line {
- border-right: 1px solid #303030;
- height: 15px;
- width: 1px;
- margin-left: 44px;
- }
- </style>
|