修改数据与页面逻辑

tanghaolin

9 天以前 04a2d3e3c701a03981c4b66162ff9515f9d7dd12

 src/views/EecLabel.vue

@@ -1,302 +1,581 @@
<template>
    <div class="flag-search-div">
        <div class="top">
            <span>能效标识查询</span>
        </div>
        <div class="flag-search-content">
            <el-card class="w100 h100" shadow="never">
                <el-form size="medium" style="height: 56px; flex-shrink: 0;" :model="state.m_formData" ref="ruleFormRef"
                    inline="true" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="产品型号" prop="ProductModel">
                        <el-input class="w-180-px" v-model="state.m_formData.ProductModel"></el-input>
                    </el-form-item>
                    <el-form-item label="产品类型" prop="ProductType">
                        <el-input class="w-180-px" v-model="state.m_formData.ProductType"
                            placeholder="请输入产品类型"></el-input>
                    </el-form-item>
                    <el-form-item label="备案号" prop="RecordNumber">
                        <el-input class="w-180-px" v-model="state.m_formData.RecordNumber"
                            placeholder="请输入备案号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="info" @click="onSubmit">重置</el-button>
                    </el-form-item>
                </el-form>
                <div class="w100" style="flex: 1; display: flex; height: calc(100% - 56px); flex-direction: column;">
                    <el-table class="w100" :data="state.m_tableData" style="width: 100%" border
                        header-cell-class-name="table-header-cell-style">
                        <el-table-column prop="ProductType" label="产品类型" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="ProductModel" label="产品型号" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="RecordNumber" label="备案号" align="center">
                        </el-table-column>
                        <el-table-column prop="EecGrade" label="能效等级" align="center">
                        </el-table-column>
                        <el-table-column prop="RecordType" label="备案类型" align="center">
                        </el-table-column>
                        <el-table-column prop="NoticeDate" label="公告时间" align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="80px">
                            <template #default="scope">
                                <span class="table-detail-span">详细</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="w100" style="display: flex; justify-content: flex-end; height: 40px; flex-shrink: 0;">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="state.m_paginationConfig.currentPage" :page-sizes="[10, 20, 30, 40]"
                            :page-size="state.m_paginationConfig.pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="state.m_tableData.length" />
                    </div>
                </div>
            </el-card>
        </div>
        <el-dialog v-model="dialogVisible" title="Tips" width="500">
            <el-form size="medium" :model="state.m_detailDialogInfo">
                <el-form-item label="备案号" prop="RecordNumber">
                    <el-input class="w-180-px" v-model="state.m_formData.RecordNumber" placeholder="请输入备案号"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
   <div class="flag-search-div">
      <div class="top">
         <span>能效标识查询</span>
      </div>
      <div class="flag-search-content">
         <el-card class="w100 h100" shadow="never">
            <el-form
               style="height: 56px; flex-shrink: 0; display: flex"
               :model="state.m_formData"
               ref="ruleFormRef"
               :inline="true"
               label-width="80px"
               class="demo-ruleForm"
            >
               <el-form-item label="产品类型" prop="ProductType">
                  <el-select
                     class="w-180-px"
                     v-model="state.m_formData.ProductType"
                     placeholder="请选择产品类型"
                     @change="changeProductType"
                  >
                     <el-option v-for="item in state.type" :key="item.tag" :value="item.tag" :label="item.name"></el-option>
                  </el-select>
               </el-form-item>
               <el-form-item label="产品型号" prop="ProductModel">
                  <el-input class="w-180-px" v-model="state.m_formData.ProductModel" placeholder="请输入产品型号"></el-input>
               </el-form-item>

               <el-form-item label="备案号" prop="RecordNumber">
                  <el-input class="w-180-px" v-model="state.m_formData.RecordNumber" placeholder="请输入备案号"></el-input>
               </el-form-item>
               <el-form-item>
                  <el-button type="primary" @click="initData">查询</el-button>
               </el-form-item>
               <el-form-item>
                  <el-button type="info" @click="resertForm">重置</el-button>
               </el-form-item>
            </el-form>
            <div
               class="w100"
               style="flex: 1; display: flex; height: calc(100% - 56px); flex-direction: column"
               v-loading="state.m_PageLoading"
            >
               <el-table
                  class="w100"
                  :data="state.m_dispTableData"
                  style="width: 100%"
                  border
                  :height="910"
                  header-cell-class-name="table-header-cell-style"
               >
                  <el-table-column prop="TableIndex" label="序号" align="center" width="60"> </el-table-column>
                  <el-table-column prop="ModelType" label="产品类型" align="center" show-overflow-tooltip> </el-table-column>
                  <el-table-column prop="Model" label="产品型号" align="center"  show-overflow-tooltip> </el-table-column>
                  <el-table-column prop="RecordNumber" label="备案号" align="center"  show-overflow-tooltip> </el-table-column>
                  <el-table-column prop="EnergyEfficiencyClass" label="能效等级" align="center" width="80"> </el-table-column>
                  <el-table-column prop="RecordTime" label="备案时间" align="center" width="100"> </el-table-column>
                  <el-table-column prop="CompanyName" label="厂商" align="center" show-overflow-tooltip> </el-table-column>
                  <el-table-column label="操作" align="center" width="120px">
                     <template #default="scope">
                        <span class="table-detail-span" @click="clickDetail(scope.row)" style="margin-right: 10px">
                           <svg
                              t="1739499317499"
                              class="detail-icon"
                              viewBox="0 0 1024 1024"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              p-id="27830"
                              width="128"
                              height="128"
                           >
                              <path
                                 d="M96.6656 1013.76a88.064 88.064 0 0 1-88.064-88.064V607.1296a38.4 38.4 0 0 1 47.7184-37.2736L502.6816 744.448a40.96 40.96 0 0 0 18.6368 0L967.68 569.856a38.2976 38.2976 0 0 1 46.08 27.8528 36.5568 36.5568 0 0 1 1.2288 9.4208v320.512A86.1184 86.1184 0 0 1 929.28 1013.76z"
                                 fill="#C2E3FF"
                                 opacity=".64"
                                 p-id="27831"
                              ></path>
                              <path
                                 d="M815.104 14.2336H197.632A88.3712 88.3712 0 0 0 109.3632 102.4v347.3408a72.9088 72.9088 0 0 0 46.6944 68.096L480.1536 643.072a73.728 73.728 0 0 0 52.5312 0l324.096-125.2352a72.9088 72.9088 0 0 0 46.6944-68.096V102.4a88.3712 88.3712 0 0 0-88.3712-88.1664z m-469.4016 387.072a24.3712 24.3712 0 0 1-24.3712 24.3712h-38.8096a25.088 25.088 0 0 1-25.088-25.088v-38.7072A24.4736 24.4736 0 0 1 281.9072 337.92h39.424a24.4736 24.4736 0 0 1 24.3712 24.4736z m0-175.104a24.4736 24.4736 0 0 1-24.3712 24.4736h-39.424a24.4736 24.4736 0 0 1-24.4736-24.4736v-39.424a24.4736 24.4736 0 0 1 24.4736-24.3712h39.424a24.4736 24.4736 0 0 1 24.3712 24.3712z m421.4784 175.104a24.2688 24.2688 0 0 1-24.3712 24.3712H434.8928a20.48 20.48 0 0 1-20.48-20.48v-43.3152A24.4736 24.4736 0 0 1 438.6816 337.92h304.128a24.3712 24.3712 0 0 1 24.3712 24.4736z m0-175.104a24.3712 24.3712 0 0 1-24.3712 24.4736h-304.128a24.4736 24.4736 0 0 1-24.3712-24.4736v-39.424a24.4736 24.4736 0 0 1 24.3712-24.3712h304.128a24.3712 24.3712 0 0 1 24.3712 24.3712z"
                                 fill="#43ADFF"
                                 p-id="27832"
                              ></path>
                           </svg>
                           详细</span
                        >
                     </template>
                  </el-table-column>
               </el-table>
               <div class="w100" style="display: flex; justify-content: flex-end; height: 40px; flex-shrink: 0">
                  <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :background="true"
                     :current-page="state.m_paginationConfig.currentPage"
                     :page-sizes="[10, 20, 30, 40]"
                     :page-size="state.m_paginationConfig.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="state.filterProductData.length"
                  />
               </div>
            </div>
         </el-card>
      </div>
      <el-dialog v-model="dialogVisible" title="详细" width="500" align-center>
         <div v-loading="dialogLoading">
            <!-- 泵产品显示 -->
            <el-form v-if="isPumpProduct" :model="state.m_detailDialogInfo" label-width="120px" size="small">
               <el-form-item label="产品类型" prop="ModelType">
                  <span>{{ state.m_detailDialogInfo.ModelType }}</span>
               </el-form-item>
               <el-form-item label="产品型号" prop="Model">
                  <span>{{ state.m_detailDialogInfo.Model }}</span>
               </el-form-item>
               <el-form-item label="生产厂商" prop="CompanyName">
                  <span>{{ state.m_detailDialogInfo.CompanyName }}</span>
               </el-form-item>
               <el-form-item label="能效等级" prop="EnergyEfficiencyClass">
                  <span>{{ state.m_detailDialogInfo.EnergyEfficiencyClass }}</span>
               </el-form-item>
               <el-form-item label="备案号" prop="RecordNumber">
                  <span class="detail-text">{{ state.m_detailDialogInfo.CompanyName }}</span>
               </el-form-item>
               <el-form-item label="备案时间" prop="RecordTime">
                  <span>{{ state.m_detailDialogInfo.RecordTime }}</span>
               </el-form-item>
               <el-form-item label="依据国家标准" prop="RecordNumber">
                  <span></span>
               </el-form-item>
            </el-form>
            <!-- 其他产品显示 -->
            <el-form v-if="!isPumpProduct" :model="state.m_OtherDetailInfo" label-width="120px" size="small">
               <el-form-item label="产品类型" prop="ModelType">
                  <span>{{ state.m_OtherDetailInfo.ModelType }}</span>
               </el-form-item>
               <el-form-item label="产品型号" prop="Model">
                  <span>{{ state.m_OtherDetailInfo.Model }}</span>
               </el-form-item>
               <el-form-item label="生产厂商" prop="CompanyName">
                  <span>{{ state.m_OtherDetailInfo.CompanyName }}</span>
               </el-form-item>
               <el-form-item label="能效等级" prop="EnergyEfficiencyClass">
                  <span>{{ state.m_OtherDetailInfo.EnergyEfficiencyClass }}</span>
               </el-form-item>
               <el-form-item label="备案号" prop="RecordNumber">
                  <span class="detail-text">{{ state.m_OtherDetailInfo.RecordNumber }}</span>
               </el-form-item>
               <el-form-item label="公告时间" prop="AnnouncementTime">
                  <span>{{ state.m_OtherDetailInfo.AnnouncementTime }}</span>
               </el-form-item>
               <el-form-item label="依据国家标准" prop="Standard">
                  <span>{{ state.m_OtherDetailInfo.Standard }}</span>
               </el-form-item>
               <el-form-item label="备案信息" prop="RecordNumber">
                  <div style="padding-left: 30px; background-color: rgb(243 250 255)">
                     <el-form label-width="200px">
                        <el-form-item v-for="(item, index) in state.m_OtherDetailInfo.List" :key="index" :label="item.name" prop="Standard">
                           <span>{{ item.value }}</span>
                        </el-form-item>
                     </el-form>
                  </div>
               </el-form-item>
            </el-form>
         </div>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
            </div>
         </template>
      </el-dialog>

      <el-dialog v-model="dialogVisibleCertifcate" title="" :show-close="false" align-center fullscreen>
         <div class="h-full flex justify-center">
            <div style="position: relative">
               <img :src="state.m_detailDialogInfo.CertificatePath" />
               <span @click="dialogVisibleCertifcate = false" class="close-icon-style"> × </span>
            </div>
         </div>
         <template #footer>
            <div class="dialog-footer">
               <!-- <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button> -->
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup name="">
<script setup lang="ts" name="EecLabel">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElTable, ElTableColumn, ElPagination, ElForm, ElFormItem, ElDialog } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
const route = useRoute();
const router = useRouter();
const dialogVisible = ref(false);
const dialogVisibleCertifcate = ref(false);
const isPumpProduct = ref(true);
const dialogLoading = ref(false);
let state = reactive({
    m_formData: {
        ProductModel: '',
        ProductType: '',
        RecordNumber: ''
    },
    m_tableData: [],
    m_dispTableData: [],
   m_formData: {
      ProductModel: '',
      ProductType: 2,
      RecordNumber: '',
   },
   allEecProduct: [],
   filterProductData: [],
   m_dispTableData: [],

    m_paginationConfig: {
        currentPage: 1,
        pageSize: 10,
    },
    m_detailDialogInfo: {
        id: 633881725577,
        ProductType: "电力变压器 2024版",
        ProductModel: "SFP22-1170000/500-NX1",
        registrationNumber: "20250212-CEL0202024-485225",
        EecGrade: "1",
        NoticeDate: "2025-02-12",
        registrationType: "0",
        ProductTypeCode: "80"
    }
})
   m_paginationConfig: {
      currentPage: 1,
      pageSize: 20,
   },
   m_detailDialogInfo: {
      PhysicalPicturePath: '',
      CertificatePath: '',
      ModelType: '',
      Model: '',
      CompanyName: '',
      EnergyEfficiencyClass: '',
      RecordTime: '',
      RecordNumber: '',
   },
   m_OtherDetailInfo: {
      ModelType: '',
      Model: '',
      CompanyName: '',
      RecordNumber: '',
      EnergyEfficiencyClass: '',
      AnnouncementTime: '',
      Standard: '',
      List: '',
      RecordTime: '',
   },
   typeSelect: 2,
   // 分类选项
   type: [
      { name: '泵', tag: 1 },
      { name: '容积式空压机', tag: 2 },
      { name: '通风机', tag: 3 },
      { name: '冷水机组', tag: 4 },
      { name: '电机', tag: 7 },
   ],
   m_PageLoading: false,
});

const m_RequestDataObj = {
   1: { requestPath: 'static/EecProductData/PumpSearch.json' },
   2: { requestPath: 'static/EecProductData/AirCompressorSearch.json' },
   3: { requestPath: 'static/EecProductData/FanSearch.json' },
   4: { requestPath: 'static/EecProductData/WaterChillerSearch.json' },
   7: { requestPath: 'static/EecProductData/ElectricMachinerySearch.json' },
};

onMounted(() => {
    initData();
})
   initData();
});
const initData = () => {
    let tableData = [
        {
            "id": 633881725577,
            "ProductType": "电力变压器 2024版",
            "ProductModel": "SFP22-1170000/500-NX1",
            "registrationNumber": "20250212-CEL0202024-485225",
            "EecGrade": "1",
            "NoticeDate": "2025-02-12",
            "registrationType": "0",
            "ProductTypeCode": "80"
        },
        {
            "id": 633881725570,
            "ProductType": "家用电冰箱 2015版",
            "ProductModel": "BCD-539WSP9BH",
            "registrationNumber": "20250212-CEL0012016-691472",
            "EecGrade": "1",
            "NoticeDate": "2025-02-12",
            "registrationType": "0",
            "ProductTypeCode": "81"
        },
        {
            "id": 633881725575,
            "ProductType": "家用燃气灶具 2014版",
            "ProductModel": "JZY-TXD49-B",
            "registrationNumber": "20250212-CEL0302016-508659",
            "EecGrade": "2",
            "NoticeDate": "2025-02-12",
            "registrationType": "1",
            "ProductTypeCode": "25"
        },
        {
            "id": 633881725574,
            "ProductType": "交流电风扇 2021版",
            "ProductModel": "FB-45ZA1 55W 410mm 220V～ 50Hz",
            "registrationNumber": "20250212-CEL0172016-600455",
            "EecGrade": "3",
            "NoticeDate": "2025-02-12",
            "registrationType": "0",
            "ProductTypeCode": "28"
        },
        {
            "id": 633881725569,
            "ProductType": "家用燃气灶具 2014版",
            "ProductModel": "JZY-TXD49-XP",
            "registrationNumber": "20250212-CEL0302016-007799",
            "EecGrade": "2",
            "NoticeDate": "2025-02-12",
            "registrationType": "1",
            "ProductTypeCode": "25"
        },
        {
            "id": 633881725562,
            "ProductType": "冷水（热泵）机组 2024版",
            "ProductModel": "TCA201XHE",
            "registrationNumber": "20250212-CEL0082024-798829",
            "EecGrade": "1",
            "NoticeDate": "2025-02-12",
            "registrationType": "0",
            "ProductTypeCode": "72"
        },
        {
            "id": 633881725568,
            "ProductType": "电动洗衣机 2013版",
            "ProductModel": "RB30H-228RT",
            "registrationNumber": "20250212-CEL0032016-679576",
            "EecGrade": "3",
            "NoticeDate": "2025-02-12",
            "registrationType": "0",
            "ProductTypeCode": "19"
        },
        {
            "id": 633881725565,
            "ProductType": "电动洗衣机 2013版",
            "ProductModel": "RB30-228T",
            "registrationNumber": "20250212-CEL0032016-918442",
            "EecGrade": "3",
            "NoticeDate": "2025-02-12",
            "registrationType": "0",
            "ProductTypeCode": "19"
        },
        {
            "id": 633881725564,
            "ProductType": "家用燃气灶具 2014版",
            "ProductModel": "JZY-TXD49-X",
            "registrationNumber": "20250212-CEL0302016-884820",
            "EecGrade": "2",
            "NoticeDate": "2025-02-12",
            "registrationType": "1",
            "ProductTypeCode": "25"
        },
        {
            "id": 633881725351,
            "ProductType": "室内照明用LED产品-非定向自镇流LED灯",
            "ProductModel": "ZGL-HYT05-E27-40-01",
            "registrationNumber": "20250212-CEL0342020-503178",
            "EecGrade": "2",
            "NoticeDate": "2025-02-12",
            "registrationType": "0",
            "ProductTypeCode": "78"
        }
    ]
    state.m_tableData = tableData
}
const handleSizeChange = () => {
   state.m_PageLoading = true;
   axios({
      method: 'get',
      url: m_RequestDataObj[state.m_formData.ProductType].requestPath,
   })
      .then((res) => {
         state.m_PageLoading = false;
         let result = res.data;
         result.sort((a: any, b: any) => {
            const aPrefix = a.Model.slice(0, 3);
            const bPrefix = b.Model.slice(0, 3);
            const aContainsDP = aPrefix.includes('DP') || aPrefix.includes('DRL');
            const bContainsDP = bPrefix.includes('DP') || bPrefix.includes('DRL');

}
const handleCurrentChange = () => {
            if (aContainsDP && !bContainsDP) {
               return -1;
            } else if (!aContainsDP && bContainsDP) {
               return 1;
            } else {
               return 0;
            }
         });
         let arr = [];
         result.forEach((item: any, index: number) => {
            let node = {
               TableIndex: index + 1,
               Id: item.Id,
               Type: item.Type,
               ModelType: item.ModelType,
               Model: item.Model,
               CompanyName: item.CompanyName,
               RecordNumber: item.RecordNumber,
               EnergyEfficiencyClass: item.EnergyEfficiencyClass,
               RecordTime: item.RecordTime,
               Price: item.Price,
               PhysicalPicturePath: 'static/EecProductData/' + item.PhysicalPicturePath,
               CertificatePath: `static/EecProductData/${item.CertificatePath}`,
               Tip: `备案时间：${item.RecordTime} \n 备案号：${item.RecordNumber}`,
            };
            arr.push(node);
         });
         state.allEecProduct = arr;
         filterProduct();
      })
      .catch((err) => {
         state.m_PageLoading = false;
      });
};
// 筛选查询数据
const filterProduct = () => {
   state.filterProductData = state.allEecProduct.filter((item) => {
      return item.Type === state.m_formData.ProductType;
   });

}
   if (state.m_formData.RecordNumber !== '') {
      state.filterProductData = state.filterProductData.filter((item) => {
         return item.RecordNumber.indexOf(state.m_formData.RecordNumber) > -1;
      });
   }
   if (state.m_formData.ProductModel !== '') {
      state.filterProductData = state.filterProductData.filter((item) => {
         return item.Model.indexOf(state.m_formData.ProductModel) > -1;
      });
   }
   state.m_dispTableData = getSelectPageData(state.filterProductData);
};
const handleCurrentChange = (val: number) => {
   state.m_paginationConfig.currentPage = val;
   let allTableData = state.filterProductData;
   let pagingData = getSelectPageData(allTableData);
   state.m_dispTableData = pagingData;
};
const handleSizeChange = (val: number) => {
   state.m_paginationConfig.pageSize = val;
   let allTableData = state.filterProductData;
   let pagingData = getSelectPageData(allTableData);
   state.m_dispTableData = pagingData;
};
const changeProductType = () => {
   initData();
};
const clickDetail = async (row: any) => {
   if (row.Id.includes('Pupm')) {
      isPumpProduct.value = true;
   } else {
      isPumpProduct.value = false;
      getProductDetail(row.Model);
   }
   state.m_detailDialogInfo = row;
   dialogVisible.value = true;

   // 找到当前点击的产品
   // const currentProduct = state.m_dispTableData.find((item) => item.id === row.id);
   // if (currentProduct) {
   //    // 保存产品信息到localStorage
   //    localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
   // }
   // router.push(`/product/${currentProduct.Id}`);
};
const clickDetailCertifcate = (row: any) => {
   // state.m_detailDialogInfo = row;
   // dialogVisibleCertifcate.value = true;
      // 找到当前点击的产品
      const currentProduct = state.m_dispTableData.find((item) => item.id === row.id);
   if (currentProduct) {
      // 保存产品信息到localStorage
      localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
   }
   router.push(`/product/${currentProduct.Id}`);
};

const getProductDetail = async (productModel) => {
   dialogLoading.value = true;
   const productRegistrationList = () => {
      return new Promise((reslvoe, reject) => {
         axios({
            url: 'https://www.energylabel.com.cn/admin-api/gateway/productRegistration/productRegistrationList',
            method: 'post',
            data: {
               mark: 854,
               productType: '',
               productModel: productModel,
               registrationNumber: '',
               producerName: '',
               current: 1,
               pageSize: 10,
               isOld: 0,
            },
         })
            .then((res) => {
               let result = res.data.data;
               if (!result.list.length) {
                  reslvoe([]);
               }
               reslvoe(result.list);
            })
            .catch((err) => {});
      });
   };

   const listData = await productRegistrationList();
   const firstProduct = listData[0];

   const detailResponse = () => {
      return new Promise((reslvoe, reject) => {
         axios({
            url: 'https://www.energylabel.com.cn/admin-api/gateway/productRegistration/productDetailById',
            method: 'post',
            data: {
               productId: firstProduct.id,
               productTypeCode: firstProduct.productTypeCode,
               mark: 854,
               isSign: 'true',
               isOld: 0,
            },
         })
            .then((res) => {
               let result = res.data.data;
               if (!result.list.length) {
                  reslvoe([]);
               }
               reslvoe(result);
            })
            .catch((err) => {});
      });
   };

   const detailData = await detailResponse();
   dialogLoading.value = false;
   state.m_OtherDetailInfo = {
      ModelType: detailData.productType,
      Model: detailData.productModel,
      CompanyName: detailData.producerName,
      RecordNumber: detailData.registrationNumber,
      EnergyEfficiencyClass: detailData.nxLever,
      AnnouncementTime: detailData.announcementTime,
      Standard: detailData.standard,
      List: detailData.list,
      RecordTime: '',
   };
};

const resertForm = () => {
   state.m_formData.ProductModel = '';
   state.m_formData.ProductType = 1;
   state.m_formData.RecordNumber = '';
   filterProduct();
};
//获取分页数据
const getSelectPageData = (list: any) => {
   let filterList = list.slice(
      (state.m_paginationConfig.currentPage - 1) * state.m_paginationConfig.pageSize,
      state.m_paginationConfig.currentPage * state.m_paginationConfig.pageSize
   );
   //当前页
   return filterList;
};
</script>

<style lang="scss" scoped>
.flag-search-div {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   box-sizing: border-box;
   padding: 10px;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

    .flag-search-content {
        width: 100%;
        // height: calc(100% - 86px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
   .flag-search-content {
      width: 100%;
      // height: calc(100% - 86px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }
}

.detail-text {
   font-family: Microsoft YaHei;
   font-size: 14px;
   font-weight: 400;
   color: #4a4a4a;
}
.top {
    width: 100%;
    height: 150px;
    background: url(https://www.energylabel.com.cn/static/img/topbackgroundpicture.5b933b83.jpg) no-repeat;
    background-size: 100% 150px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
   width: 100%;
   height: 150px;
   background: url(https://www.energylabel.com.cn/static/img/topbackgroundpicture.5b933b83.jpg) no-repeat;
   background-size: 100% 150px;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;

    span {
        color: #fff;
        font-size: 36px;
    }
   span {
      color: #fff;
      font-size: 36px;
   }
}

.w-180-px {
    width: 180px;
   width: 10rem;
}

.table-detail-span {
    color: #1592fc;
    cursor: pointer;
   color: #1592fc;
   cursor: pointer;
   font-size: 12px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 3px;
}

.huoquliebiao {}
.huoquliebiao {
}

.detail-icon {
   width: 14px;
   height: 14px;
}

.close-icon-style {
   position: absolute;
   right: -15px;
   top: -15px;
   font-size: 30px;
   background-color: #196dd938;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   color: #196dd9;
   &:hover {
      color: #fff;
      background-color: #196dd9;
   }
}
:deep(.el-form--inline .el-form-item) {
   margin-right: 0.75rem;
}
:deep(.el-card) {
    width: 100%;
   width: 100%;
}

:deep(.el-card__body) {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
   height: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
}

:deep(.el-table) {
    font-size: 12px;
   font-size: 12px;
}

:deep(.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell) {
    border-bottom: 1px solid #dfe6ec;
   border-bottom: 1px solid #dfe6ec;
}

:deep(.el-table--border .el-table__cell) {
    border-right: 1px solid #dfe6ec;
   border-right: 1px solid #dfe6ec;
}

:deep(.table-header-cell-style) {
    color: #000;
    font-weight: bold;
    font-size: 13px;
    background-color: #f3f1f1 !important;
   color: #000;
   font-weight: bold;
   font-size: 13px;
   background-color: #f3f1f1 !important;
}
</style>

:deep(.el-form-item__label) {
   font-family: Microsoft YaHei;
   font-size: 14px;
   font-weight: 700;
   color: #474747;
}
</style>