添加变速曲线图标

tanghaolin

2025-02-20 038ff2930c53d1d48e5fa1038875f43fe5dfe64d

 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,88 @@
                  :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" width="120" show-overflow-tooltip> </el-table-column>
                  <el-table-column prop="RecordNumber" label="备案号" align="center" width="140" 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
                        >
                        <span class="table-detail-span" @click="clickDetailCertifcate(scope.row)"
                           ><svg
                              t="1739500034021"
                              class="detail-icon"
                              viewBox="0 0 1024 1024"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              p-id="34306"
                              width="128"
                              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"
                              ></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"
                              ></path>
                           </svg>
                           证书</span
                        >
                     </template>
                  </el-table-column>
               </el-table>
@@ -77,8 +147,13 @@
            </div>
         </el-card>
      </div>
      <el-dialog v-model="dialogVisible" title="详细" width="500">
         <el-form :model="state.m_detailDialogInfo" label-width="120px">
      <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>
@@ -107,6 +182,20 @@
            </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>

@@ -115,10 +204,10 @@
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);
let state = reactive({
   m_formData: {
      ProductModel: '',
@@ -131,9 +220,11 @@

   m_paginationConfig: {
      currentPage: 1,
      pageSize: 10,
      pageSize: 20,
   },
   m_detailDialogInfo: {
      PhysicalPicturePath: '',
      CertificatePath: '',
      ModelType: '',
      Model: '',
      CompanyName: '',
@@ -177,6 +268,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 +295,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);
@@ -227,7 +332,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;
@@ -236,8 +341,18 @@
   initData();
};
const clickDetail = (row: any) => {
   dialogVisible.value = true;
   state.m_detailDialogInfo = row;
   // 找到当前点击的产品
   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 resertForm = () => {
   state.m_formData.ProductModel = '';
@@ -301,17 +416,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%;
}