修改商品价格预计潜水泵测试报告图片

tanghaolin

2025-02-21 d651cb1c7da78669a8f66939225a290cf8fde1c8

 src/views/ProductDetail.vue

@@ -4,7 +4,7 @@
      <div class="mb-6 text-gray-500">
         <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/certified-products' }">认证产品</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/certified-products' }">能效产品</el-breadcrumb-item>
            <el-breadcrumb-item>产品详情</el-breadcrumb-item>
         </el-breadcrumb>
      </div>
@@ -61,11 +61,11 @@
            <!-- 购买按钮 -->
            <div class="flex gap-4">
               <el-button type="primary" size="large" @click="handleBuyNow">立即购买</el-button>
               <el-button size="large" @click="handleAddToCart">加入购物车</el-button>
               <el-button type="info" plain size="large" class="flex items-center" @click="handleViewCurve">
               <!-- <el-button size="large" @click="handleAddToCart">加入购物车</el-button> -->
               <!-- <el-button type="info" plain size="large" class="flex items-center" @click="handleViewCurve">
                  <el-icon class="mr-1" style="font-size: 18px"><TrendCharts /></el-icon>
                  性能曲线
               </el-button>
               </el-button> -->
            </div>
         </div>
      </div>
@@ -94,20 +94,32 @@
               </div>
            </el-tab-pane>
            <el-tab-pane label="性能曲线" name="PerformanceCurve">
               <div style="width: 1200px; height: 750px">
               <div style="width: 1200px; height: 750px" v-show="isPumpDetail">
                  <LXBChart ref="lxbChartCtrl"></LXBChart>
               </div>
               <img width="1200" height="auto" :src="product.Chart" v-if="isFan" />
               <el-empty description="暂无性能曲线信息" v-show="!isPumpDetail && !isFan" />
            </el-tab-pane>
            <el-tab-pane label="变速曲线" name="params">
               <div style="width: 1200px; height: 750px"></div>
               <!-- <div style="width: 1200px; height: 750px"></div> -->
               <div style="width: 1200px; height: 750px" v-show="isPumpDetail">
                  <MultiSpeedChart ref="multiSpeedChartCtrl"></MultiSpeedChart>
               </div>
               <el-empty description="暂无变速曲线信息" v-show="!isPumpDetail" />
            </el-tab-pane>
            <el-tab-pane label="切割曲线" name="CutCurve"> </el-tab-pane>
            <el-tab-pane label="切割曲线" name="CutCurve">
               <el-empty description="暂无切割曲线信息" />
            </el-tab-pane>
            <el-tab-pane label="规格参数" name="SpecificParam">
               <div class="p-6">
                  <prop ref="propCtrl"></prop>
                  <prop ref="propCtrl" v-show="isPumpDetail"></prop>
               </div>
               <el-empty description="暂无变速曲线信息" v-show="!isPumpDetail" />
            </el-tab-pane>
            <el-tab-pane label="选型报告" name="SelectReport"> </el-tab-pane>
            <el-tab-pane label="选型报告" name="SelectReport">
               <img width="1200" height="auto" :src="product.SelectReport" v-if="isFan" />
               <el-empty description="暂无报告" v-show="!isPumpDetail && !isFan" />
            </el-tab-pane>
            <el-tab-pane label="测试报告" name="certificate">
               <div class="p-6 flex justify-center">
                  <img :src="product.certificatePath" alt="节能证书" class="max-w-full" />
@@ -173,20 +185,25 @@
import { SERVE_URL } from '@/constants';
import { Check, TrendCharts } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { onMounted, ref, watch, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import pumpDetailInfo from './mock/DetailsInfo';
import pumpDetailInfo_WQ from "./mock/DetailsInfo_WQ"
import LXBChart from '@/components/Chart/LXBChart.vue';
import MultiSpeedChart from '@/components/Chart/MultiSpeedChart.vue';
import prop from './components/prop.vue';
const route = useRoute();
const router = useRouter();

const lxbChartCtrl = ref();
const multiSpeedChartCtrl = ref();
const propCtrl = ref();
const activeTab = ref('intro');
const showBuyDialog = ref(false);

const isPumpDetail = ref(false);
const isFan = ref(false);
const orderForm = ref({
   name: '',
   phone: '',
@@ -222,7 +239,8 @@
});

const handleBuyNow = () => {
   showBuyDialog.value = true;
   // showBuyDialog.value = true;
   router.push('/order-info');
};

const handleAddToCart = () => {
@@ -265,6 +283,7 @@
   if (savedProduct) {
      const productData = JSON.parse(savedProduct);
      productDataRef.value = productData;

      // 合并默认值和保存的产品数据
      product.value = {
         ...product.value,
@@ -289,6 +308,12 @@
            能效等级: `${productData.EnergyEfficiencyClass}级`,
         },
      };
      isPumpDetail.value = productData.Id.includes('Pupm') ? true : false;
      isFan.value = productData.Id.includes('FJ') ? true : false;
      if (isFan.value) {
         product.value.Chart = 'static/EecProductData/image/3/fan_chart.png';
         product.value.SelectReport = 'static/EecProductData/image/3/SelectReport.png';
      }
   }
   initDetailData();
});
@@ -298,6 +323,9 @@
      isAdjustCoordUnitByUserSetting: false,
   };
   let pumpInfoData = pumpDetailInfo;
   if(product.value.model.includes('DSWQ')) {
      pumpInfoData = pumpDetailInfo_WQ;
   }
   let pumpBaseInfo = {
      CorpID: 69,
      SeriesID: 'C69S4',
@@ -328,8 +356,15 @@
         NPSHr: null,
      },
   };
   lxbChartCtrl.value.initPumpInfoData(0, pumpInfoData, () => {}, m_userUnitSetting);

   var cb_dict = {
      //设置曲线修改回调函数
      setChangeWrkCurveCb: (curve) => {
         multiSpeedChartCtrl.value.setWrkCurveInfo(curve);
      },
   };
   if (!isPumpDetail.value) return;
   lxbChartCtrl.value.initPumpInfoData(0, pumpInfoData, cb_dict, m_userUnitSetting);
   multiSpeedChartCtrl.value.initPumpInfoData(0, pumpInfoData, () => {}, m_userUnitSetting);
   //初始化属性控件
   propCtrl.value.initialData(0, pumpBaseInfo, pumpInfoData.PartFullInfo, pumpInfoData.SettingInfo);
};