From 04a2d3e3c701a03981c4b66162ff9515f9d7dd12 Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期一, 21 四月 2025 22:32:21 +0800
Subject: [PATCH] 修改数据与页面逻辑
---
src/views/EecLabel.vue | 781 +++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 530 insertions(+), 251 deletions(-)
diff --git a/src/views/EecLabel.vue b/src/views/EecLabel.vue
index 11bd958..704912c 100644
--- a/src/views/EecLabel.vue
+++ b/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": "瀹ゅ唴鐓ф槑鐢↙ED浜у搧-闈炲畾鍚戣嚜闀囨祦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) {
+ // // 淇濆瓨浜у搧淇℃伅鍒發ocalStorage
+ // 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) {
+ // 淇濆瓨浜у搧淇℃伅鍒發ocalStorage
+ 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>
\ No newline at end of file
+
+:deep(.el-form-item__label) {
+ font-family: Microsoft YaHei;
+ font-size: 14px;
+ font-weight: 700;
+ color: #474747;
+}
+</style>
--
Gitblit v1.9.3