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 | 330 ++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 280 insertions(+), 50 deletions(-)
diff --git a/src/views/EecLabel.vue b/src/views/EecLabel.vue
index 0d5d37b..704912c 100644
--- a/src/views/EecLabel.vue
+++ b/src/views/EecLabel.vue
@@ -6,11 +6,11 @@
<div class="flag-search-content">
<el-card class="w100 h100" shadow="never">
<el-form
- style="height: 56px; flex-shrink: 0"
+ style="height: 56px; flex-shrink: 0; display: flex"
:model="state.m_formData"
ref="ruleFormRef"
:inline="true"
- label-width="100px"
+ label-width="80px"
class="demo-ruleForm"
>
<el-form-item label="浜у搧绫诲瀷" prop="ProductType">
@@ -47,18 +47,43 @@
: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="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"> </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="80px">
+ <el-table-column label="鎿嶄綔" align="center" width="120px">
<template #default="scope">
- <span class="table-detail-span" @click="clickDetail(scope.row)">璇︾粏</span>
+ <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>
@@ -77,33 +102,83 @@
</div>
</el-card>
</div>
- <el-dialog v-model="dialogVisible" title="璇︾粏" width="500">
- <el-form :model="state.m_detailDialogInfo" label-width="120px">
- <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-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>
@@ -115,14 +190,16 @@
import { ElMessage, ElTable, ElTableColumn, ElPagination, ElForm, ElFormItem, ElDialog } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
-import { el } from 'element-plus/es/locale';
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: 1,
+ ProductType: 2,
RecordNumber: '',
},
allEecProduct: [],
@@ -131,9 +208,11 @@
m_paginationConfig: {
currentPage: 1,
- pageSize: 10,
+ pageSize: 20,
},
m_detailDialogInfo: {
+ PhysicalPicturePath: '',
+ CertificatePath: '',
ModelType: '',
Model: '',
CompanyName: '',
@@ -141,28 +220,35 @@
RecordTime: '',
RecordNumber: '',
},
- typeSelect: 1,
+ 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: 5 },
- { name: '宸ヤ笟閿呯倝', tag: 6 },
{ name: '鐢垫満', tag: 7 },
],
m_PageLoading: false,
});
const m_RequestDataObj = {
- 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' },
+ 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(() => {
@@ -177,6 +263,20 @@
.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');
+
+ if (aContainsDP && !bContainsDP) {
+ return -1;
+ } else if (!aContainsDP && bContainsDP) {
+ return 1;
+ } else {
+ return 0;
+ }
+ });
let arr = [];
result.forEach((item: any, index: number) => {
let node = {
@@ -190,8 +290,8 @@
EnergyEfficiencyClass: item.EnergyEfficiencyClass,
RecordTime: item.RecordTime,
Price: item.Price,
- PhysicalPicturePath: '/static/EecProductData/' + item.PhysicalPicturePath,
- CertificatePath: `/static/EecProductData/${item.CertificatePath}`,
+ PhysicalPicturePath: 'static/EecProductData/' + item.PhysicalPicturePath,
+ CertificatePath: `static/EecProductData/${item.CertificatePath}`,
Tip: `澶囨鏃堕棿锛�${item.RecordTime} \n 澶囨鍙凤細${item.RecordNumber}`,
};
arr.push(node);
@@ -203,6 +303,7 @@
state.m_PageLoading = false;
});
};
+// 绛涢�夋煡璇㈡暟鎹�
const filterProduct = () => {
state.filterProductData = state.allEecProduct.filter((item) => {
return item.Type === state.m_formData.ProductType;
@@ -227,7 +328,7 @@
state.m_dispTableData = pagingData;
};
const handleSizeChange = (val: number) => {
- state.m_paginationConfig.currentPage = val;
+ state.m_paginationConfig.pageSize = val;
let allTableData = state.filterProductData;
let pagingData = getSelectPageData(allTableData);
state.m_dispTableData = pagingData;
@@ -235,10 +336,107 @@
const changeProductType = () => {
initData();
};
-const clickDetail = (row: any) => {
- dialogVisible.value = true;
+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;
@@ -301,17 +499,49 @@
}
.w-180-px {
- width: 180px;
+ width: 10rem;
}
.table-detail-span {
color: #1592fc;
cursor: pointer;
+ font-size: 12px;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ gap: 3px;
}
.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%;
}
--
Gitblit v1.9.3