From 2a4b83c058b9f669e33e96168d7ad25016dafadd Mon Sep 17 00:00:00 2001
From: gerson <1405270578@qq.com>
Date: 星期四, 13 二月 2025 23:00:15 +0800
Subject: [PATCH] iie 部署
---
src/views/EecLabel.vue | 553 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 301 insertions(+), 252 deletions(-)
diff --git a/src/views/EecLabel.vue b/src/views/EecLabel.vue
index 11bd958..0d5d37b 100644
--- a/src/views/EecLabel.vue
+++ b/src/views/EecLabel.vue
@@ -1,302 +1,351 @@
<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"
+ :model="state.m_formData"
+ ref="ruleFormRef"
+ :inline="true"
+ label-width="100px"
+ 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
+ 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"> </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">
+ <template #default="scope">
+ <span class="table-detail-span" @click="clickDetail(scope.row)">璇︾粏</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">
+ <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>
+ <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';
+import { el } from 'element-plus/es/locale';
const route = useRoute();
const router = useRouter();
const dialogVisible = ref(false);
let state = reactive({
- m_formData: {
- ProductModel: '',
- ProductType: '',
- RecordNumber: ''
- },
- m_tableData: [],
- m_dispTableData: [],
+ m_formData: {
+ ProductModel: '',
+ ProductType: 1,
+ 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: 10,
+ },
+ m_detailDialogInfo: {
+ ModelType: '',
+ Model: '',
+ CompanyName: '',
+ EnergyEfficiencyClass: '',
+ RecordTime: '',
+ RecordNumber: '',
+ },
+ typeSelect: 1,
+ // 鍒嗙被閫夐」
+ 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' },
+};
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;
+ 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;
+ });
-}
-const handleCurrentChange = () => {
-
-}
+ 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.currentPage = val;
+ let allTableData = state.filterProductData;
+ let pagingData = getSelectPageData(allTableData);
+ state.m_dispTableData = pagingData;
+};
+const changeProductType = () => {
+ initData();
+};
+const clickDetail = (row: any) => {
+ dialogVisible.value = true;
+ state.m_detailDialogInfo = row;
+};
+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: 180px;
}
.table-detail-span {
- color: #1592fc;
- cursor: pointer;
+ color: #1592fc;
+ cursor: pointer;
}
-.huoquliebiao {}
+.huoquliebiao {
+}
: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