| | |
| | | <template> |
| | | <div class="container mx-auto px-4 py-8 bg-grey"> |
| | | <div class="industrial-soft-style w-100 h-100" style="background-color: #fff;"> |
| | | <div class="container mx-auto px-4 py-8 bg-white industrial-soft-style" style="margin-top: 20px;padding-top:15px ;"> |
| | | <div class=" w-100 h-100" style="background-color: #fff;"> |
| | | <!-- 顶部分类菜单 --> |
| | | <div class=" rounded-lg shadow " style="background-color: #f6f7f9;margin-bottom: 10px;"> |
| | | <!-- 行业通用 --> |
| | | <div class="border-b p-4 border-bottom-dashed-1 box-border"> |
| | | <!-- 类型 --> |
| | | <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px;"> |
| | | <div class="flex items-center"> |
| | | <span class="text-gray-500 ">行业通用:</span> |
| | | <div class="flex flex-1 gap-4"> |
| | | <el-button v-for="item in industryTypes" :key="item" |
| | | :type="selectedIndustry === item ? 'primary' : 'default'" class="!px-4" |
| | | @click="selectedIndustry = item"> |
| | | {{ item }} |
| | | </el-button> |
| | | <span class="text-gray-500 ">类型:</span> |
| | | <div class="flex flex-1"> |
| | | <span v-for="item in type" class="ant-tag !px-4" |
| | | :class="EecSelect === item.tag ? 'ant-tag-checked' : ''" :key="item.tag" |
| | | @click="changeSelectType(item.tag)" |
| | | :type="EecSelect === item.tag ? 'primary' : 'default'" size="small"> |
| | | {{ item.name }} |
| | | </span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 工业软件|工业APP产品分类 --> |
| | | <div class="border-b p-4 border-bottom-dashed-1 box-border"> |
| | | <!-- 厂商 --> |
| | | <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px;"> |
| | | <div class="flex items-center "> |
| | | <span class="text-gray-500">工业软件|工业APP产品分类:</span> |
| | | <div class="flex flex-1 gap-4"> |
| | | <el-button v-for="item in productTypes" :key="item" |
| | | :type="selectedProduct === item ? 'primary' : 'default'" class="!px-4" |
| | | @click="selectedProduct = item"> |
| | | {{ item }} |
| | | </el-button> |
| | | <span class="text-gray-500">厂商:</span> |
| | | <div class="flex flex-1"> |
| | | <span v-for="item in factory" :key="item.tag" class="ant-tag !px-4" |
| | | :class="factorySelect === item.tag ? 'ant-tag-checked' : ''" |
| | | :type="factorySelect === item.tag ? 'primary' : 'default'" |
| | | @click="factorySelect = item.tag" size="small"> |
| | | {{ item.name }} |
| | | </span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 筛选条件 --> |
| | | <div class="p-4"> |
| | | <div class="flex gap-2"> |
| | | <div class="flex items-center"> |
| | | <label>区域:</label> |
| | | <el-select v-model="region" placeholder="区域" class="w-full" style="width: 220px;"> |
| | | <el-option label="全部" value="全部" /> |
| | | <el-option label="北京" value="北京" /> |
| | | <el-option label="上海" value="上海" /> |
| | | <el-option label="广州" value="广州" /> |
| | | </el-select> |
| | | </div> |
| | | <div class="flex items-center"> |
| | | <label>制造业集群:</label> |
| | | <el-select v-model="industry" placeholder="制造业细分" class="w-full" style="width: 220px;"> |
| | | <el-option label="全部" value="全部" /> |
| | | <el-option label="装备制造" value="装备制造" /> |
| | | <el-option label="汽车制造" value="汽车制造" /> |
| | | <el-option label="电子制造" value="电子制造" /> |
| | | </el-select> |
| | | </div> |
| | | <div class="flex items-center"> |
| | | <label>业务环节:</label> |
| | | <el-select v-model="business" placeholder="业务环节" class="w-full" style="width: 220px;"> |
| | | <el-option label="全部" value="全部" /> |
| | | <el-option label="研发设计" value="研发设计" /> |
| | | <el-option label="生产制造" value="生产制造" /> |
| | | <el-option label="运营管理" value="运营管理" /> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 排序选项 --> |
| | | <div class="flex gap-4 p-4" style="background-color: #ecedee;"> |
| | | <el-button v-for="sort in sortOptions" :key="sort.tag" |
| | | :type="selectedSort === sort.tag ? 'primary' : 'default'" class="!px-6" |
| | | @click="changeSelectType(sort.tag)"> |
| | | <!-- 能效等级 --> |
| | | <div class="flex gap-4 p-4" style="background-color: #ecedee;padding: 10px;"> |
| | | <el-button v-for="sort in EecClass" :key="sort.tag" size="small" |
| | | :type="EecSelect === sort.tag ? 'primary' : 'default'" class="!px-6"> |
| | | {{ sort.name }} |
| | | </el-button> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { id } from 'element-plus/es/locale'; |
| | | import { ref, onMounted } from 'vue'; |
| | | |
| | | // 分类选项 |
| | | const industryTypes = ['全部', '基础共性类', '行业通用类', '企业专用类', '其他类']; |
| | | const productTypes = ['全部', '研发设计类', '生产制造类', '运维服务类', '经营管理类', '支撑保障类']; |
| | | const sortOptions = [ |
| | | { name: "电机", tag: "motorPower" }, |
| | | { name: "泵", tag: 'pump' }, |
| | | { name: '容积式空压机', tag: 'volumetricPressureMachine' }, |
| | | { name: "通风机", tag: 'exhaustMachine' }, |
| | | { name: "冷水机组", tag: 'coldPowerGenerationUnit' }, |
| | | { name: "电力变压器", tag: 'electricTransformer' }, |
| | | { name: "工业锅炉", tag: 'industrialBoiler' }, |
| | | const type = [ |
| | | { name: "全部", tag: -1 }, |
| | | { name: "电机", tag: 0 }, |
| | | { name: "泵", tag: 1 }, |
| | | { name: '容积式空压机', tag: 2 }, |
| | | { name: "通风机", tag: 3 }, |
| | | { name: "冷水机组", tag: 4 }, |
| | | { name: "电力变压器", tag: 5 }, |
| | | { name: "工业锅炉", tag: 6 }, |
| | | ]; |
| | | const factory = [ |
| | | { name: "全部", tag: "全部" }, |
| | | { name: '凯泉', tag: '凯泉' }, |
| | | ]; |
| | | const EecClass = [ |
| | | { name: "全部", tag: 0 }, |
| | | { name: "一级能效", tag: 1 }, |
| | | { name: "一级能效", tag: 2 }, |
| | | { name: '一级能效', tag: 3 }, |
| | | ]; |
| | | |
| | | // 选中状态 |
| | | const selectedIndustry = ref('全部'); |
| | | const selectedProduct = ref('全部'); |
| | | const selectedSort = ref('motorPower'); |
| | | const region = ref('全部'); |
| | | const industry = ref('全部'); |
| | | const business = ref('全部'); |
| | | const currentPage = ref(1); |
| | | const factorySelect = ref('全部'); |
| | | const EecSelect = ref(0); |
| | | |
| | | |
| | | // 示例数据 |
| | | const softwareList = ref([ |
| | | { |
| | | id:1, |
| | | id: 1, |
| | | Id: 1, |
| | | Type: 0, |
| | | ModelType: "", |
| | | Model: "", |
| | | CompanyName: "", |
| | | RecordNumber: "", |
| | | EnergyEfficiencyClass: "", |
| | | RecordTime: "", |
| | | PhysicalPicturePath: "", |
| | | CertificatePath: "", |
| | | name: 'CNE/南阳防爆 三相异步电动机 YE5-80M1-2 0.75KW B5 380V 一级能效 1台', |
| | | description: '微信小程序客户端自主开发的下单系统,用户仅需通过微信内的报废车预约下单,用户可通过微信内的报废车预约下单。', |
| | | logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735778771000', |
| | |
| | | price: '¥1770.65', |
| | | rating: 5, |
| | | date: '2024-01-06', |
| | | tag: 'motorPower' |
| | | tag: 0 |
| | | }, |
| | | { |
| | | id:2, |
| | | id: 2, |
| | | name: 'CNE/南阳防爆 三相异步电动机 YE5-80M1-2 0.75KW B5 380V 一级能效 1台', |
| | | description: '权客专利年费管理软件是由运营权客信息科技有限公司自主开发的一款专利年费管理软件。', |
| | | logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735778771000', |
| | |
| | | price: '¥1770.65', |
| | | rating: 4.5, |
| | | date: '2024-12-25', |
| | | tag: 'motorPower' |
| | | tag: 0 |
| | | }, |
| | | { |
| | | id:3, |
| | | id: 3, |
| | | name: 'CNE/南阳防爆 三相异步电动机 YE5-80M1-2 0.75KW B5 380V 一级能效 1台', |
| | | description: '通信信号处理与分析系统软件是一套用于对通信信号进行分析和处理的系统。', |
| | | logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735778771000', |
| | |
| | | price: '¥1770.65', |
| | | rating: 4.8, |
| | | date: '2024-12-20', |
| | | tag: 'motorPower' |
| | | tag: 0 |
| | | }, |
| | | { |
| | | id:4, |
| | | id: 4, |
| | | name: 'HUALI/山东华力电机 电机 YE5-132S-4-5.5KW 卧式 一级能效 1台', |
| | | description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。', |
| | | logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AC0394822_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735295148000', |
| | |
| | | price: '¥1770.65', |
| | | rating: 4.2, |
| | | date: '2024-12-20', |
| | | tag: 'motorPower' |
| | | tag: 0 |
| | | }, |
| | | { |
| | | id:5, |
| | | id: 5, |
| | | name: 'HUALI/山东华力电机 电机 YE5-132S-4-5.5KW 卧式 一级能效 1台', |
| | | description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。', |
| | | logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AC0394822_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735295148000', |
| | |
| | | price: '¥1770.65', |
| | | rating: 4.2, |
| | | date: '2024-12-20', |
| | | tag: 'motorPower' |
| | | tag: 0 |
| | | }, |
| | | |
| | | { |
| | | id:6, |
| | | id: 6, |
| | | name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL70-20-5.5/2 进出口DN100 额定流量70m³/h 额定扬程20m 5.5kW HT200叶轮 1台', |
| | | description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。', |
| | | logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000', |
| | |
| | | price: '¥7399.00', |
| | | rating: 4.2, |
| | | date: '2024-12-20', |
| | | tag: 'pump' |
| | | tag: 1 |
| | | }, |
| | | { |
| | | id:7, |
| | | id: 7, |
| | | name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL100-32-15/2 进出口DN100 额定流量100m³/h 额定扬程32m 15kW HT200叶轮 1台', |
| | | description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。', |
| | | logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000', |
| | |
| | | price: '¥10390.00', |
| | | rating: 4.2, |
| | | date: '2024-12-20', |
| | | tag: 'pump' |
| | | tag: 1 |
| | | }, |
| | | { |
| | | id:8, |
| | | id: 8, |
| | | name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL100-50-22/2 进出口DN100 额定流量100m³/h 额定扬程50m 22kW HT200叶轮 1台', |
| | | description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。', |
| | | logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000', |
| | |
| | | price: '¥13490.00', |
| | | rating: 4.2, |
| | | date: '2024-12-20', |
| | | tag: 'pump' |
| | | tag: 1 |
| | | }, |
| | | { |
| | | id:9, |
| | | id: 9, |
| | | name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL115-34-15/2 进出口DN100 额定流量115m³/h 额定扬程34m 15kW HT200叶轮 1台', |
| | | description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。', |
| | | logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000', |
| | |
| | | price: '¥10390.00', |
| | | rating: 4.2, |
| | | date: '2024-12-20', |
| | | tag: 'pump' |
| | | tag: 1 |
| | | }, |
| | | { |
| | | id:10, |
| | | id: 10, |
| | | name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL50-12.5-3/4 进出口DN100 额定流量50m³/h 额定扬程12.5m 3kW HT200叶轮 1台', |
| | | description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。', |
| | | logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000', |
| | |
| | | price: '¥5319.0', |
| | | rating: 4.2, |
| | | date: '2024-12-20', |
| | | tag: 'pump' |
| | | tag: 1 |
| | | }, |
| | | ]); |
| | | const dispProductType = ref([]) |
| | |
| | | }) |
| | | const filterProduct = () => { |
| | | dispProductType.value = softwareList.value.filter((item) => { |
| | | return item.tag===selectedSort.value |
| | | return item.tag === EecSelect.value |
| | | }) |
| | | } |
| | | //监听类型选择筛选 |
| | | const changeSelectType = (tag: string) => { |
| | | selectedSort.value = tag; |
| | | const changeSelectType = (tag: number) => { |
| | | EecSelect.value = tag; |
| | | filterProduct() |
| | | }; |
| | | </script> |
| | |
| | | |
| | | .goods-warp-item:hover { |
| | | border-color: rgba(0, 0, 0, .09); |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, .09) |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, .09) |
| | | } |
| | | |
| | | .bg-grey { |
| | |
| | | color: #f74747; |
| | | } |
| | | |
| | | .ant-tag { |
| | | box-sizing: border-box; |
| | | color: rgba(0, 0, 0, .65); |
| | | font-size: 14px; |
| | | font-variant: tabular-nums; |
| | | line-height: 1.5; |
| | | list-style: none; |
| | | font-feature-settings: "tnum"; |
| | | display: inline-block; |
| | | height: auto; |
| | | margin: 0 8px 0 0; |
| | | padding: 2px 7px; |
| | | font-size: 12px; |
| | | line-height: 20px; |
| | | white-space: nowrap; |
| | | cursor: default; |
| | | opacity: 1; |
| | | transition: all .3s cubic-bezier(.78, .14, .15, .86); |
| | | margin-right: 24px; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .ant-tag:hover { |
| | | color: #1c97b7; |
| | | } |
| | | |
| | | .ant-tag-checked { |
| | | background-color: #1c97b7; |
| | | color: #fff; |
| | | } |
| | | |
| | | .ant-tag-checked:hover { |
| | | color: #fff; |
| | | } |
| | | |
| | | :deep(.el-button--default) { |
| | | --el-button-bg-color: transparent; |
| | | --el-button-border-color: transparent; |