From 4aa86b1ec441c4e358e1cc488d8f021fb80f1355 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 17 九月 2025 17:34:35 +0800
Subject: [PATCH] 2025.9.17 数据产品（待完成）
---
src/views/fysp/data-product/base-data-product/components/BaseProdProcess.vue | 310 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 310 insertions(+), 0 deletions(-)
diff --git a/src/views/fysp/data-product/base-data-product/components/BaseProdProcess.vue b/src/views/fysp/data-product/base-data-product/components/BaseProdProcess.vue
new file mode 100644
index 0000000..356a41d
--- /dev/null
+++ b/src/views/fysp/data-product/base-data-product/components/BaseProdProcess.vue
@@ -0,0 +1,310 @@
+<template>
+ <el-row>
+ <!-- 姝ラ1 鏁版嵁浜у搧鐢熸垚閫夐」 -->
+ <div :class="active == 1 ? 'prod-active' : 'prod-inactive'" ref="step1Ref">
+ <transition
+ name="el-fade-in"
+ @after-leave="handleTransitionContentEnd(1)"
+ >
+ <div v-show="showStep1Content">
+ <template v-if="$slots.step1">
+ <slot name="step1"></slot>
+ </template>
+ <template v-else>
+ <ProdQueryOpt :loading="loading" @submit="onSearch"> </ProdQueryOpt>
+ </template>
+ </div>
+ </transition>
+ <transition
+ name="el-fade-in"
+ @after-leave="handleTransitionThumbnailEnd(1)"
+ >
+ <div
+ v-show="showStep1Thumbnail"
+ class="prod-thumbnail-wrapper"
+ :style="{ height: viewHeight }"
+ @click="changeActive(1)"
+ >
+ <div class="prod-thumbnail">鈶犱慨鏀归�夐」</div>
+ </div>
+ </transition>
+ </div>
+ <!-- 姝ラ2 鏁版嵁浜у搧缁撴灉棰勮 -->
+ <div :class="active == 2 ? 'prod-active' : 'prod-inactive'" ref="step2Ref">
+ <transition
+ name="el-fade-in"
+ @after-leave="handleTransitionContentEnd(2)"
+ >
+ <div v-show="showStep2Content">
+ <div ref="titleRef" class="prod-title">
+ <el-text tag="b" size="large">鏁版嵁浜у搧棰勮</el-text>
+ </div>
+ <slot name="step2" :contentHeight="contentHeight"></slot>
+ </div>
+ </transition>
+ <transition
+ name="el-fade-in"
+ @after-leave="handleTransitionThumbnailEnd(2)"
+ >
+ <div
+ v-show="showStep2Thumbnail"
+ class="prod-thumbnail-wrapper"
+ :style="{ height: viewHeight }"
+ @click="changeActive(2)"
+ >
+ <div
+ :class="
+ 'prod-thumbnail prod-thumbnail_middle ' +
+ (active < 2 ? 'prod-thumbnail-disabled' : '')
+ "
+ >
+ 鈶℃暟鎹骇鍝侀瑙�
+ </div>
+ </div>
+ </transition>
+ </div>
+ <!-- 姝ラ3 鏁版嵁浜у搧琛ㄥ崟涓嬭浇 -->
+ <div :class="active == 3 ? 'prod-active' : 'prod-inactive'" ref="step3Ref">
+ <transition
+ name="el-fade-in"
+ @after-leave="handleTransitionContentEnd(3)"
+ >
+ <div v-show="showStep3Content">
+ <template v-if="$slots.step3">
+ <slot name="step3"></slot>
+ </template>
+ <template v-else>
+ <ProdDownload></ProdDownload>
+ </template>
+ </div>
+ </transition>
+ <transition
+ name="el-fade-in"
+ @after-leave="handleTransitionThumbnailEnd(3)"
+ >
+ <div
+ v-show="showStep3Thumbnail"
+ class="prod-thumbnail-wrapper"
+ :style="{ height: viewHeight }"
+ @click="changeActive(3)"
+ >
+ <div
+ :class="
+ 'prod-thumbnail prod-thumbnail_end ' +
+ (active < 3 ? 'prod-thumbnail-disabled' : '')
+ "
+ >
+ 鈶㈡暟鎹骇鍝佷笅杞�
+ </div>
+ </div>
+ </transition>
+ </div>
+ </el-row>
+</template>
+<script setup>
+import { computed, inject, ref, watch, onMounted } from 'vue';
+import { unCalc } from '@/utils/css-util';
+import ProdQueryOpt from '@/views/fysp/data-product/base-data-product/components/ProdQueryOpt.vue';
+import ProdDownload from '@/views/fysp/data-product/base-data-product/components/ProdDownload.vue';
+
+const props = defineProps({
+ active: {
+ type: Number,
+ default: 1
+ },
+ loading: {
+ type: Boolean,
+ default: false
+ }
+});
+
+const emit = defineEmits(['update:active', 'onStep1']);
+
+const viewHeight = inject('viewHeight');
+
+const btnDisabled = ref(false);
+
+const titleRef = ref(null);
+const contentHeight = ref('50vh');
+
+function calContentHeight() {
+ console.log(titleRef.value.offsetHeight);
+ contentHeight.value = `calc(${unCalc(viewHeight.value)} - ${
+ titleRef.value?.offsetHeight || 0
+ }px)`;
+ console.log(contentHeight.value);
+
+}
+
+// 姝ラ寮曠敤
+const step1Ref = ref(null);
+const step2Ref = ref(null);
+const step3Ref = ref(null);
+
+// 鎺у埗鏄剧ず/闅愯棌鐨勭姸鎬�
+const showStep1Content = ref(props.active === 1);
+const showStep1Thumbnail = ref(props.active != 1);
+const showStep2Content = ref(props.active === 2);
+const showStep2Thumbnail = ref(props.active != 2);
+const showStep3Content = ref(props.active === 3);
+const showStep3Thumbnail = ref(props.active != 3);
+
+// 璁板綍鍔ㄧ敾鏄惁姝ｅ湪杩涜涓�
+const isAnimating = ref({});
+
+// 鐩戝惉active鍙樺寲
+watch(
+ () => props.active,
+ (newActive, oldActive) => {
+ // 鏍囪鍔ㄧ敾寮�濮�
+ isAnimating.value[oldActive] = true;
+ isAnimating.value[newActive] = true;
+
+ // 鍏堥殣钘忔墍鏈夊唴瀹癸紝绛夊緟鍔ㄧ敾缁撴潫鍚庡啀鏄剧ず姝ｇ‘鐨勫唴瀹�
+ if (oldActive === 1) {
+ showStep1Content.value = false;
+ } else if (oldActive === 2) {
+ showStep2Content.value = false;
+ } else if (oldActive === 3) {
+ showStep3Content.value = false;
+ }
+
+ if (newActive === 1) {
+ showStep1Thumbnail.value = false;
+ } else if (newActive === 2) {
+ showStep2Thumbnail.value = false;
+ } else if (newActive === 3) {
+ showStep3Thumbnail.value = false;
+ }
+ }
+);
+
+// 澶勭悊鍔ㄧ敾缁撴潫浜嬩欢
+function handleTransitionThumbnailEnd(stepIndex) {
+ // 妫�鏌ュ姩鐢绘槸鍚︾‘瀹炵粨鏉燂紙閬垮厤閲嶅瑙﹀彂锛�
+ if (isAnimating.value[stepIndex]) {
+ isAnimating.value[stepIndex] = false;
+
+ // setTimeout(() => {
+ // 鍔ㄧ敾缁撴潫鍚庯紝鏇存柊鏄剧ず鐘舵��
+ if (stepIndex === 1) {
+ showStep1Content.value = props.active === 1;
+ } else if (stepIndex === 2) {
+ showStep2Content.value = props.active === 2;
+ } else if (stepIndex === 3) {
+ showStep3Content.value = props.active === 3;
+ }
+ // }, 50);
+ }
+}
+
+function handleTransitionContentEnd(stepIndex) {
+ // 妫�鏌ュ姩鐢绘槸鍚︾‘瀹炵粨鏉燂紙閬垮厤閲嶅瑙﹀彂锛�
+ if (isAnimating.value[stepIndex]) {
+ isAnimating.value[stepIndex] = false;
+
+ // setTimeout(() => {
+ // 鍔ㄧ敾缁撴潫鍚庯紝鏇存柊鏄剧ず鐘舵��
+ if (stepIndex === 1) {
+ showStep1Thumbnail.value = props.active != 1;
+ } else if (stepIndex === 2) {
+ showStep2Thumbnail.value = props.active != 2;
+ } else if (stepIndex === 3) {
+ showStep3Thumbnail.value = props.active != 3;
+ }
+ // }, 50);
+ }
+}
+
+function onSearch(opt) {
+ emit('onStep1', opt);
+}
+function changeActive(index) {
+ let isAnimate = false;
+ Object.values(isAnimating.value).forEach((item) => {
+ isAnimate = isAnimate || item;
+ });
+ if (!isAnimate && !btnDisabled.value && props.active >= index) {
+ emit('update:active', index);
+ btnDisabled.value = true;
+ setTimeout(() => {
+ btnDisabled.value = false;
+ }, 500);
+ }
+ // emit('update:active', index);
+}
+
+onMounted(() => {
+ calContentHeight();
+});
+</script>
+<style scoped>
+.prod-active {
+ /* width: 66.667%; */
+ width: 90%;
+ transition:
+ width 0.5s ease,
+ box-shadow 0.3s ease;
+ /* background-color: #409eff; */
+ margin: 5px 0;
+ border-radius: 4px;
+ box-shadow:
+ -3px 0 6px rgba(0, 0, 0, 0.1),
+ 3px 0 6px rgba(0, 0, 0, 0.1);
+}
+
+.prod-inactive {
+ /* width: 16.667%; */
+ width: 5%;
+ transition: width 0.5s ease;
+ /* background-color: #e4e7ed; */
+ margin: 5px 0;
+ border-radius: 4px;
+}
+
+.prod-title {
+ padding: 10px;
+}
+
+.prod-thumbnail-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0 2px;
+}
+
+.prod-thumbnail {
+ height: 90%;
+ width: 100%;
+ background-color: #409eff;
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ writing-mode: vertical-rl;
+ text-orientation: upright;
+ letter-spacing: 8px;
+ font-size: 18px;
+ font-weight: 500;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ cursor: pointer;
+}
+
+.prod-thumbnail_middle {
+ border-radius: 0px;
+}
+
+.prod-thumbnail_end {
+ border-top-left-radius: 0px;
+ border-bottom-left-radius: 0px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+
+.prod-thumbnail-disabled {
+ background-color: #e4e7ed;
+ color: #c0c4cc;
+ cursor: not-allowed;
+}
+</style>
--
Gitblit v1.9.3