2025.9.18 数据产品（待完成）

riku

2025-09-18 c1d2051abc8ca88cd07f0d7c56c0dbf8165d5c33

 src/views/fysp/data-product/base-data-product/components/BaseProdProcess.vue

@@ -22,7 +22,7 @@
        <div
          v-show="showStep1Thumbnail"
          class="prod-thumbnail-wrapper"
          :style="{ height: viewHeight }"
          :style="{ height: viewHeight + 'px' }"
          @click="changeActive(1)"
        >
          <div class="prod-thumbnail">①修改选项</div>
@@ -38,6 +38,9 @@
        <div v-show="showStep2Content">
          <div ref="titleRef" class="prod-title">
            <el-text tag="b" size="large">数据产品预览</el-text>
            <el-button type="primary" @click="$emit('onStep2')">
              下载数据产品
            </el-button>
          </div>
          <slot name="step2" :contentHeight="contentHeight"></slot>
        </div>
@@ -49,7 +52,7 @@
        <div
          v-show="showStep2Thumbnail"
          class="prod-thumbnail-wrapper"
          :style="{ height: viewHeight }"
          :style="{ height: viewHeight + 'px' }"
          @click="changeActive(2)"
        >
          <div
@@ -74,7 +77,11 @@
            <slot name="step3"></slot>
          </template>
          <template v-else>
            <ProdDownload></ProdDownload>
            <ProdDownload
              :loading="loading"
              :queryOpt="queryOpt"
              @submit="onDownload"
            ></ProdDownload>
          </template>
        </div>
      </transition>
@@ -85,7 +92,7 @@
        <div
          v-show="showStep3Thumbnail"
          class="prod-thumbnail-wrapper"
          :style="{ height: viewHeight }"
          :style="{ height: viewHeight + 'px' }"
          @click="changeActive(3)"
        >
          <div
@@ -102,7 +109,7 @@
  </el-row>
</template>
<script setup>
import { computed, inject, ref, watch, onMounted } from 'vue';
import { computed, inject, ref, watch, onMounted, onUnmounted } 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';
@@ -118,9 +125,10 @@
  }
});

const emit = defineEmits(['update:active', 'onStep1']);
const emit = defineEmits(['update:active', 'onStep1', 'onStep2', 'onStep3']);

const viewHeight = inject('viewHeight');
const contentMaxHeight = inject('contentMaxHeight');
const viewHeight = inject('viewHeight', contentMaxHeight.value);

const btnDisabled = ref(false);

@@ -128,13 +136,13 @@
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);
  
  // console.log(titleRef.value.offsetHeight);
  contentHeight.value = viewHeight.value - (titleRef.value?.offsetHeight || 0);
  // console.log(contentHeight.value);
}

// 数据产品生成选项
const queryOpt = ref({});

// 步骤引用
const step1Ref = ref(null);
@@ -217,7 +225,11 @@
}

function onSearch(opt) {
  queryOpt.value = opt;
  emit('onStep1', opt);
}
function onDownload(val) {
  emit('onStep3', val);
}
function changeActive(index) {
  let isAnimate = false;
@@ -234,8 +246,21 @@
  // emit('update:active', index);
}

let resizeObserver = null;

onMounted(() => {
  if (titleRef.value) {
    resizeObserver = new ResizeObserver(() => {
  calContentHeight();
    });
    resizeObserver.observe(titleRef.value);
  }
});
// 在组件卸载时清理
onUnmounted(() => {
  if (resizeObserver && titleRef.value) {
    resizeObserver.unobserve(titleRef);
  }
});
</script>
<style scoped>
@@ -263,7 +288,10 @@
}

.prod-title {
  padding: 10px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prod-thumbnail-wrapper {
@@ -285,7 +313,7 @@
  text-orientation: upright;
  letter-spacing: 8px;
  font-size: 18px;
  font-weight: 500;
  font-weight: 600;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  cursor: pointer;