tanghaolin
2025-02-19 ae33d67ec2a4edc3ccfbb61631c475cfb74bc206
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>
@@ -62,6 +62,10 @@
            <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-icon class="mr-1" style="font-size: 18px"><TrendCharts /></el-icon>
                  性能曲线
               </el-button>
            </div>
         </div>
      </div>
@@ -89,18 +93,30 @@
                  </div>
               </div>
            </el-tab-pane>
            <el-tab-pane label="规格参数" name="params">
            <el-tab-pane label="性能曲线" name="PerformanceCurve">
               <div style="width: 1200px; height: 750px" v-show="false">
                  <LXBChart ref="lxbChartCtrl"></LXBChart>
               </div>
               <el-empty description="暂无性能曲线信息" />
            </el-tab-pane>
            <el-tab-pane label="变速曲线" name="params">
               <!-- <div style="width: 1200px; height: 750px"></div> -->
               <el-empty description="暂无变速曲线信息" />
            </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">
                  <el-descriptions :column="1" border>
                     <el-descriptions-item v-for="(value, key) in product.specifications" :key="key" :label="key">
                        {{ value }}
                     </el-descriptions-item>
                  </el-descriptions>
                  <prop ref="propCtrl"></prop>
               </div>
            </el-tab-pane>
            <el-tab-pane label="证书" name="certificate">
            <el-tab-pane label="选型报告" name="SelectReport">
               <el-empty description="暂无报告" />
            </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" />
                  <img :src="product.certificatePath" alt="节能证书" class="max-w-full" />
               </div>
            </el-tab-pane>
            <el-tab-pane label="包装售后" name="service">
@@ -161,13 +177,19 @@
import EecLevel1 from '@/assets/icons/energy1.png';
import EecLevel2 from '@/assets/icons/energy2.png';
import { SERVE_URL } from '@/constants';
import { Check } from '@element-plus/icons-vue';
import { Check, TrendCharts } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import pumpDetailInfo from './mock/DetailsInfo';
import LXBChart from '@/components/Chart/LXBChart.vue';
import prop from './components/prop.vue';
const route = useRoute();
const router = useRouter();
const lxbChartCtrl = ref();
const propCtrl = ref();
const activeTab = ref('intro');
const showBuyDialog = ref(false);
@@ -211,6 +233,10 @@
const handleAddToCart = () => {
   ElMessage.success('已添加到购物车');
};
const handleViewCurve = () => {
   window.open('http://www.xpump.net/V4/#/CN/Target/DOOCH/Pump/Index/C69S4/8978', '_blank');
};
const confirmOrder = () => {
@@ -270,7 +296,49 @@
         },
      };
   }
   initDetailData();
});
const initDetailData = () => {
   let m_userUnitSetting = {
      NPSH: 0,
      isAdjustCoordUnitByUserSetting: false,
   };
   let pumpInfoData = pumpDetailInfo;
   let pumpBaseInfo = {
      CorpID: 69,
      SeriesID: 'C69S4',
      PumpID: 8978,
      SubID: 0,
      ChartType: 3,
      PumpStyle: 0,
      PumpName4File: 'DRL1-18S',
      CorpName: '中韩杜科',
      PumpName: 'DRL1-18S',
      SeriesName: 'DRL',
      CatalogName: '立式多级泵',
      EecStauts: 0,
      EecGrade: 0,
      DefaultMotorPower: 0,
      MaxD2: 75,
      WrkD2: 75,
      MinD2: 75,
      Ratedn: 2900,
      WrkSpeed: 2900,
      FirePumpType: 0,
      DriveType: 0,
      RatedParas: {
         H: '100.5',
         Q: '1',
         E: '41',
         P: '0.67',
         NPSHr: null,
      },
   };
   lxbChartCtrl.value.initPumpInfoData(0, pumpInfoData, () => {}, m_userUnitSetting);
   //初始化属性控件
   propCtrl.value.initialData(0, pumpBaseInfo, pumpInfoData.PartFullInfo, pumpInfoData.SettingInfo);
};
</script>
<style scoped>