123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210 |
- <template>
- <div class="body">
- <div
- :class="item.isOp == true ? 'steps stepsDisabled' : 'steps'"
- v-for="(item, index) in showOpsArray"
- :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>
- </div>
- <div
- :class="selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'"
- >
- {{ item.completeNum }}
- </div>
- <!-- <div style="padding-right: 20px">
- <svg-icon
- icon-class="dangqian"
- size="20"
- v-if="index == selectStepIndex"
- />
- </div> -->
- </div>
- <div class="line" v-if="index != showOpsArray.length - 1"></div>
- </div>
- <el-empty v-if="!opsArray" description="暂无数据" />
- <!-- 弹窗 -->
- </div>
- </template>
- <script setup>
- import { useProcessStore } from "@/store";
- import { getScan } from "@/api/process";
- const store = useProcessStore();
- const props = defineProps({
- opsArray: Object,
- opShowAllStatus: Boolean,
- });
- const showOpsArray = computed(() => {
- return props.opShowAllStatus ? props.opsArray : props.opsArray.slice(0, 3);
- });
- const emit = defineEmits(["init"]);
- //步骤显示index
- const router = useRouter();
- const selectStepIndex = inject("selectStepIndex");
- const boxClick = (item, index) => {
- if (item.isOp == true) {
- return;
- }
- store.odersData.operationId = item.operationId;
- store.processInfo.operationCode = item.operationCode;
- store.processInfo.operationName = item.operationName;
- selectStepIndex.value = index;
- };
- const getScanData = async () => {
- try {
- const { code, data, msg } = await getScan({
- operationId: Number(store.odersData.operationId),
- qrCode: store.odersData.qrCode,
- workOrderCode: store.odersData.workOrderCode,
- //stationId暂时随便传一个
- stationId: 1,
- });
- if (code == "200") {
- store.scanInfo = data;
- router.push({ path: "/pro-steps" });
- }
- } catch {}
- };
- </script>
- <style lang="scss" scoped>
- .body {
- width: 100%;
- }
- .existsText {
- margin-left: 40px;
- font-size: $f16;
- font-weight: 500;
- color: #303030;
- }
- .stepBox {
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 40px;
- border-radius: 20px;
- background-color: rgb(64, 64, 64);
- box-shadow: 0px 1px 1px 1px #00000025;
- }
- .stepsDisabled {
- opacity: 0.5;
- }
- .stepsDisabled:hover {
- cursor: not-allowed; /* 禁止状态 */
- }
- .stepBoxHover {
- box-shadow: 0px 0px 0px 0px;
- background-color: var(--ohos-area-active-bg);
- }
- .stepExistsHover {
- cursor: not-allowed;
- }
- .stepBoxDisabled {
- background-color: green;
- cursor: not-allowed;
- }
- .stepIndexHover {
- border-color: white !important;
- background-color: var(--ohos-area-active-bg) !important;
- span {
- color: white !important;
- }
- }
- .stepNameHover {
- color: white !important;
- }
- .stepStationHover {
- color: white !important;
- }
- .timeBoxHover {
- color: white !important;
- }
- .hoverTextColor {
- color: white !important;
- }
- .stepIndex {
- width: 40px;
- height: 40px;
- border: 2px solid #303030;
- border-radius: 44px;
- color: var(--ohos-text);
- background-color: rgb(108, 108, 108);
- @include flex;
- .indexText {
- font-size: $f16;
- color: var(--ohos-text);
- }
- }
- .midTextBox {
- margin-left: 10px;
- .stepName {
- font-size: $f16;
- color: var(--ohos-text);
- }
- .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 black;
- height: 15px;
- width: 1px;
- margin-left: 20px;
- }
- </style>
|