| | |
| | | <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"> |
| | |
| | | </svg> |
| | | 详细</span |
| | | > |
| | | <span class="table-detail-span" @click="clickDetailCertifcate(scope.row)" |
| | | <span class="table-detail-span" @click="clickDetailCertifcate(scope.row)" v-if="true" |
| | | ><svg |
| | | t="1739500034021" |
| | | class="detail-icon" |
| | |
| | | height="128" |
| | | > |
| | | <path |
| | | d="M0 115.2m76.8 0l870.4 0q76.8 0 76.8 76.8l0 640q0 76.8-76.8 76.8l-870.4 0q-76.8 0-76.8-76.8l0-640q0-76.8 76.8-76.8Z" |
| | | fill="#1989FA" |
| | | opacity=".3" |
| | | p-id="34307" |
| | | d="M18.731707 12.487805m499.512195 0l0 0q499.512195 0 499.512196 499.512195l0 0q0 499.512195-499.512196 499.512195l0 0q-499.512195 0-499.512195-499.512195l0 0q0-499.512195 499.512195-499.512195Z" |
| | | fill="#478BFF" |
| | | fill-opacity=".1" |
| | | p-id="11765" |
| | | ></path> |
| | | <path |
| | | d="M563.2 396.8m25.6 0l281.6 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-281.6 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z" |
| | | fill="#1989FA" |
| | | p-id="34308" |
| | | ></path> |
| | | <path |
| | | d="M563.2 512m25.6 0l281.6 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-281.6 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z" |
| | | fill="#1989FA" |
| | | p-id="34309" |
| | | ></path> |
| | | <path |
| | | d="M563.2 640m25.6 0l140.8 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-140.8 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z" |
| | | fill="#1989FA" |
| | | p-id="34310" |
| | | ></path> |
| | | <path |
| | | d="M294.4 422.4m-140.8 0a140.8 140.8 0 1 0 281.6 0 140.8 140.8 0 1 0-281.6 0Z" |
| | | fill="#1989FA" |
| | | p-id="34311" |
| | | ></path> |
| | | <path |
| | | d="M261.1584 611.5328l-73.0624 126.5536-88.6912-51.2 69.0432-119.5776a191.3088 191.3088 0 0 0 92.7104 44.224z m162.816-47.4496l66.9696 116.0064-88.6784 51.2-69.6832-120.6912a191.4496 191.4496 0 0 0 91.392-46.5152z" |
| | | fill="#1989FA" |
| | | p-id="34312" |
| | | d="M718.04878 761.756098h-349.658536a74.926829 74.926829 0 0 1-74.926829-74.92683v-399.609756a24.97561 24.97561 0 0 1 24.975609-24.97561h349.658537a24.97561 24.97561 0 0 1 24.97561 24.97561v299.707317h99.902439v99.902439a74.926829 74.926829 0 0 1-74.92683 74.92683z m-24.975609-124.878049v49.951219a24.97561 24.97561 0 1 0 49.951219 0v-49.951219h-49.951219z m-299.707317-249.756098v49.95122h199.804878v-49.95122h-199.804878z m0 99.902439v49.95122h199.804878v-49.95122h-199.804878z m0 99.902439v49.95122h124.878048v-49.95122h-124.878048z" |
| | | fill="#478BFF" |
| | | p-id="11766" |
| | | ></path> |
| | | </svg> |
| | | 证书</span |
| | | 下单</span |
| | | > |
| | | </template> |
| | | </el-table-column> |
| | |
| | | </el-card> |
| | | </div> |
| | | <el-dialog v-model="dialogVisible" title="详细" width="500" align-center> |
| | | <el-form :model="state.m_detailDialogInfo" label-width="120px" size="small"> |
| | | <el-form-item label="" label-width="0px"> |
| | | <div class="w-full flex justify-center"> |
| | | <img :src="state.m_detailDialogInfo.PhysicalPicturePath" style="height: 200px" /> |
| | | </div> |
| | | </el-form-item> |
| | | <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> |
| | | <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> |
| | |
| | | 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: [], |
| | |
| | | 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, |
| | |
| | | .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 = { |
| | |
| | | state.m_PageLoading = false; |
| | | }); |
| | | }; |
| | | // 筛选查询数据 |
| | | const filterProduct = () => { |
| | | state.filterProductData = state.allEecProduct.filter((item) => { |
| | | return item.Type === state.m_formData.ProductType; |
| | |
| | | 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) { |
| | | // // 保存产品信息到localStorage |
| | | // localStorage.setItem('currentProduct', JSON.stringify(currentProduct)); |
| | | // } |
| | | // router.push(`/product/${currentProduct.Id}`); |
| | | }; |
| | | const clickDetailCertifcate = (row: any) => { |
| | | state.m_detailDialogInfo = row; |
| | | dialogVisibleCertifcate.value = true; |
| | | // 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; |
| | |
| | | } |
| | | |
| | | .w-180-px { |
| | | width: 180px; |
| | | width: 10rem; |
| | | } |
| | | |
| | | .table-detail-span { |
| | |
| | | background-color: #196dd9; |
| | | } |
| | | } |
| | | :deep(.el-form--inline .el-form-item) { |
| | | margin-right: 0.75rem; |
| | | } |
| | | :deep(.el-card) { |
| | | width: 100%; |
| | | } |