修改能效标识查询页面

tanghaolin

2025-02-13 a009c0021cd72a2c7379b7b04eacd694e0cb98f2

 src/views/IndustrialSoftware.vue

@@ -3,11 +3,11 @@
      style="margin-top: 20px;padding-top:15px ;">
      <div class=" w-100 h-100" style="background-color: #fff;">
         <!-- 顶部分类菜单 -->
         <div class=" rounded-lg shadow " style="background-color: #f6f7f9;margin-bottom: 10px;">
         <div class="rounded-lg shadow" style="background-color: #f6f7f9; margin-bottom: 10px">
            <!-- 类型 -->
            <div class="border-b p-4  border-bottom-dashed-1 box-border" style="padding: 10px;">
            <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px">
               <div class="flex items-center">
                  <span class="text-gray-500 ">类型：</span>
                  <span class="text-gray-500">类型：</span>
                  <div class="flex flex-1">
                     <span v-for="item in type" class="ant-tag !px-4"
                        :class="typeSelect === item.tag ? 'ant-tag-checked' : ''" :key="item.tag"
@@ -20,22 +20,21 @@
            </div>

            <!-- 厂商 -->
            <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px;">
               <div class="flex items-center ">
            <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px">
               <div class="flex items-center">
                  <span class="text-gray-500">厂商：</span>
                  <div class="flex flex-1">
                     <span v-for="item in factory" :key="item.tag" class="ant-tag !px-4"
                        :class="factorySelect === item.tag ? 'ant-tag-checked' : ''"
                        :type="factorySelect === item.tag ? 'primary' : 'default'"
                        @click="factorySelect = item.tag" size="small">
                        {{ item.name }}
                     <span v-for="item in factory" :key="item.CompanyId" class="ant-tag !px-4"
                        :class="factorySelect === item.CompanyId ? 'ant-tag-checked' : ''"
                        @click="factorySelect = item.CompanyId" size="small">
                        {{ item.CompanyAbbName }}
                     </span>
                  </div>
               </div>
            </div>

            <!-- 能效等级 -->
            <div class="flex eec-filter-sortbar" style="background-color: #ecedee;">
            <div class="flex eec-filter-sortbar" style="background-color: #ecedee">
               <ul>
                  <li v-for="sort in EecClass" :key="sort.tag" size="small" @click="handleEecLevel(sort.tag)"
                     :type="EecSelect === sort.tag ? 'primary' : 'default'"
@@ -58,8 +57,9 @@
                     <div class="goods-name" :title="app.Model">{{ app.ModelType }}</div>
                     <div class="metertitle mb-2"><span>型号：{{ app.Model }}</span></div>
                     <!-- <p class="text-gray-500 text-sm mb-4 flex-1">{{ app.description }}</p> -->
                     <div class="flex flex-wrap gap-2" style="">
                     <div class="flex gap-2" style="justify-content: space-between;align-items: center;">
                        <!-- <el-tag size="small" type="success">{{ app.CompanyName }}</el-tag> -->
                        <div class="goods-price"><span class="goods-price-selling"> ¥{{ app.Price }}</span> </div>
                        <div class="flex items-center eec-level-div">
                           <img :src="EecLevelEnum[app.EnergyEfficiencyClass].icon">
                           <span class="eec-numb">{{ app.EnergyEfficiencyClass }}</span>
@@ -67,13 +67,13 @@
                              }}</span>
                        </div>
                     </div>
                     <div class="goods-price"><span class="goods-price-selling">{{ app.price }}</span> </div>

                     <!-- <div class="flex justify-between items-center">
                     <el-rate v-model="app.rating" disabled />
                     <span class="text-gray-400 text-sm">{{ app.date }}</span>
                  </div> -->

                     <div class="link-btn">立即购入</div>
                     <div class="link-btn" @click="handleBuyClick(app.id)">立即购入</div>
                  </div>
                  <template #content>
                     <div class="goods-tip-content" style="white-space: pre-wrap;">{{ app.Tip }}</div>
@@ -94,24 +94,24 @@
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import EecLevel1 from '@/assets/icons/energy_level_1.svg';
import EecLevel2 from '@/assets/icons/energy_level_2.svg';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import EecLevel1 from '@/assets/icons/energy_level_1.svg'
import EecLevel2 from '@/assets/icons/energy_level_2.svg'
const router = useRouter();

// 分类选项
const type = [
   { name: "电机", tag: 1 },
   { name: "泵", tag: 2 },
   { name: '容积式空压机', tag: 3 },
   { name: "通风机", tag: 4 },
   { name: "冷水机组", tag: 5 },
   { name: "电力变压器", tag: 6 },
   { name: "工业锅炉", tag: 7 },
   { name: "泵", tag: 1 },
   { name: '容积式空压机', tag: 2 },
   { name: "通风机", tag: 3 },
   { name: "冷水机组", tag: 4 },
   { name: "电力变压器", tag: 5 },
   { name: "工业锅炉", tag: 6 },
   { name: "电机", tag: 7 },
];
const factory = [
   { name: "全部", tag: "全部" },
   { name: '凯泉', tag: '凯泉' },
];
const factory = ref([]);
const EecClass = [
   { name: "全部", tag: 0 },
   { name: "一级能效", tag: 1 },
@@ -121,24 +121,23 @@
const m_PageLoading = ref(false)

// 选中状态
const typeSelect = ref(0);
const factorySelect = ref('全部');
const typeSelect = ref(1);
const factorySelect = ref('-99');
const EecSelect = ref(0);


const EecLevelEnum = {
   1: { name: '一级能效', icon: EecLevel1 },
   2: { name: '二级能效', icon: EecLevel2 },
}
};

const m_RequestDataObj = {
   1: { requestPath: "static/EecProductData/ElectricMachinery.json" },
   2: { requestPath: "static/EecProductData/Pump.json" },
   3: { requestPath: "static/EecProductData/AirCompressor.json" },
   4: { requestPath: "static/EecProductData/Fan.json" },
   5: { requestPath: "static/EecProductData/WaterChiller.json" },
   6: { requestPath: "static/EecProductData/PowerTransformer.json" },
   7: { requestPath: "static/EecProductData/IndustrialBoiler.json" },
   1: { requestPath: "static/EecProductData/Pump.json" },
   2: { requestPath: "static/EecProductData/AirCompressor.json" },
   3: { requestPath: "static/EecProductData/Fan.json" },
   4: { requestPath: "static/EecProductData/WaterChiller.json" },
   5: { requestPath: "static/EecProductData/PowerTransformer.json" },
   6: { requestPath: "static/EecProductData/IndustrialBoiler.json" },
   7: { requestPath: "static/EecProductData/ElectricMachinery.json" },
}


@@ -151,14 +150,31 @@

const m_paginationConfig = ref({
   currentPage: 1,
   pageSize: 10,
   pageSize: 12,
})

onMounted(() => {
   initComanyData();
   initData();
   // filterProduct();
})

const initComanyData = () => {
   axios({
      method: 'get',
      url: 'static/EecProductData/CompanyData.json',
   }).then((res) => {
      let result = res.data;
      factory.value = result.map((item: any) => {
         return {
            CompanyId: item.CompanyId,
            CompanyAllName: item.CompanyAllName,
            CompanyAbbName: item.CompanyAbbName,
            Type: item.Type,
         }
      })
      factory.value.unshift({ CompanyId: "-99", CompanyAllName: '全部', CompanyAbbName: '全部', Type: null })
   }).catch((err) => { })
}
const initData = () => {
   m_PageLoading.value = true;
   axios({
@@ -170,7 +186,7 @@
      let arr = [];
      result.forEach((item: any) => {
         let node = {
            Id: item.ID,
            Id: item.Id,
            Type: item.Type,
            ModelType: item.ModelType,
            Model: item.Model,
@@ -178,8 +194,8 @@
            RecordNumber: item.RecordNumber,
            EnergyEfficiencyClass: item.EnergyEfficiencyClass,
            RecordTime: item.RecordTime,
            // PhysicalPicturePath: "/static/EecProductData/" + item.PhysicalPicturePath,
            PhysicalPicturePath: `https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1735778771000`,
            Price: item.Price,
            PhysicalPicturePath: "/static/EecProductData/" + item.PhysicalPicturePath,
            CertificatePath: `/static/EecProductData/${item.CertificatePath}`,
            Tip: `备案时间：${item.RecordTime} \n 备案号：${item.RecordNumber}`,
         }
@@ -195,12 +211,13 @@
   filterProductData.value = allEecProduct.value.filter((item) => {
      return item.Type === typeSelect.value
   })

   if (EecSelect.value !== 0) {
      filterProductData.value = filterProductData.value.filter((item) => {
         return item.EnergyEfficiencyClass === EecSelect.value
      })
   }
   if (factorySelect.value !== '全部') {
   if (factorySelect.value !== '-99') {
      filterProductData.value = filterProductData.value.filter((item) => {
         return item.CompanyName === factorySelect.value
      })
@@ -210,13 +227,13 @@
}
const handleCurrentChange = (val: number) => {
   m_paginationConfig.value.currentPage = val;
   let allTableData = allEecProduct.value;
   let allTableData = filterProductData.value;
   let pagingData = getSelectPageData(allTableData);
   dispEecProduct.value = pagingData;
}
const handleSizeChange = (val: number) => {
   m_paginationConfig.value.currentPage = val;
   let allTableData = allEecProduct.value;
   let allTableData = filterProductData.value;
   let pagingData = getSelectPageData(allTableData);
   dispEecProduct.value = pagingData;
}
@@ -234,6 +251,17 @@
const changeSelectType = (tag: number) => {
   typeSelect.value = tag;
   initData();
};

const handleBuyClick = (productId: string) => {
   // 找到当前点击的产品
   const currentProduct = dispEecProduct.value.find((item) => item.id === productId);
   if (currentProduct) {
      console.log("🚀 ~ currentProduct:", currentProduct)
      // 保存产品信息到localStorage
      localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
   }
   router.push(`/product/${productId}`);
};
const handleEecLevel = (tag: number) => {
   EecSelect.value = tag;
@@ -263,13 +291,13 @@
   box-sizing: border-box;
   /* transition: border-color .1s ease; */
   border-radius: 5px;
   transition: all .3s;
   transition: all 0.3s;
   margin-top: 10px;
}

.goods-warp-item:hover {
   border-color: rgba(0, 0, 0, .09);
   box-shadow: 0 2px 8px rgba(0, 0, 0, .2)
   border-color: rgba(0, 0, 0, 0.09);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.bg-grey {
@@ -293,7 +321,7 @@
}

.industrial-soft-style::after {
   content: "";
   content: '';
   position: absolute;
   top: 0;
   left: 0;
@@ -334,7 +362,7 @@
   color: #999;
   line-height: 16px;
   overflow: hidden;
   text-align: left
   text-align: left;
}

.link-btn {
@@ -359,7 +387,7 @@
}

.goods-price {
   width: 100%;
   /* width: 100%; */
   padding: 0 3px;
   text-align: left;
   box-sizing: border-box;
@@ -376,19 +404,19 @@
}

.goods-price .goods-price-selling {
   font-size: 14px;
   font-size: 16px;
   font-weight: 700;
   color: #f74747;
}

.ant-tag {
   box-sizing: border-box;
   color: rgba(0, 0, 0, .65);
   color: rgba(0, 0, 0, 0.65);
   font-size: 14px;
   font-variant: tabular-nums;
   line-height: 1.5;
   list-style: none;
   font-feature-settings: "tnum";
   font-feature-settings: 'tnum';
   display: inline-block;
   height: auto;
   margin: 0 8px 0 0;
@@ -398,7 +426,7 @@
   white-space: nowrap;
   cursor: default;
   opacity: 1;
   transition: all .3s cubic-bezier(.78, .14, .15, .86);
   transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
   margin-right: 24px;
   font-size: 14px;
}
@@ -445,10 +473,8 @@
}

.eec-filter-currentOrder {

   border-bottom: 4px solid #1c97b7;
   color: #1c97b7;

}

.eec-filter-currentOrder:hover {
@@ -480,8 +506,6 @@
   color: #fff;
   font-size: 12px;
}



:deep(.el-button--default) {
   --el-button-bg-color: transparent;