<template>
|
<div class="pumpSeries-box" v-myTitle="{ title: m_Title }">
|
<!-- 头部导航栏 -->
|
<van-nav-bar style="background-color: #528abe">
|
<template #left>
|
<van-icon @click="pageBack" name="arrow-left" size="18" />
|
</template>
|
<template #title>
|
<label>{{ hyName }}</label>
|
</template>
|
<template #right>
|
<!-- <van-icon name="search" size="18" /> -->
|
</template>
|
</van-nav-bar>
|
<!-- 下拉过滤菜单 -->
|
<van-dropdown-menu active-color="#528abe">
|
<van-dropdown-item ref="CatalogType" :title="m_selectCatalogName">
|
<van-cell
|
center
|
v-for="item in m_catalogSelectOption"
|
@click="getCatalogSelectValue(item)"
|
:key="item.value"
|
:title="item.text"
|
>
|
<template #title>
|
<span class="custom-title">{{item.text}}</span>
|
<van-tag style="margin-left:5px" color="#528abe" round type="primary">{{item.nodeNum}}</van-tag>
|
</template>
|
<template #right-icon>
|
<van-icon
|
name="success"
|
:color="item.value == m_catalogSelectValue?'#528abe':''"
|
v-show="item.value == m_catalogSelectValue"
|
/>
|
</template>
|
</van-cell>
|
</van-dropdown-item>
|
<van-dropdown-item :title="$t('ebookPage.screen.TR')" ref="item">
|
<van-cell left :title="$t('ebookPage.motorFrequency.TR')">
|
<template #right-icon>
|
<span style="margin-right: 10px">{{ m_MotorFrequece ? "60" : "50" }}Hz</span>
|
<van-switch v-model="m_MotorFrequece" size="24" active-color="#528abe" />
|
</template>
|
</van-cell>
|
<div style="padding: 5px 16px">
|
<van-button color="#528abe" block round @click="getFilterValue">{{$t('header.define.TR')}}</van-button>
|
</div>
|
</van-dropdown-item>
|
</van-dropdown-menu>
|
|
<!-- <div style="height:50px;width:100%;background-color:#f1f2f3;display:flex;align-items: center;justify-content: flex-end;">
|
<van-row
|
type="flex"
|
justify="center"
|
style="
|
width:150px;
|
height: 42px;
|
align-items: center;
|
padding: 0 10px;
|
"
|
>
|
<van-col
|
span="8"
|
>
|
<span>频率</span>
|
</van-col>
|
<van-col
|
class="select_btn_50"
|
:class="m_MotorFrequece == 50 ? 'select_active' : ''"
|
span="8"
|
@click="selectMotorFrequece(50)"
|
>
|
<span>50Hz</span>
|
</van-col>
|
<van-col
|
span="8"
|
@click="selectMotorFrequece(60)"
|
class="select_btn_60"
|
:class="m_MotorFrequece == 60 ? 'select_active' : ''">
|
<span>60Hz</span>
|
</van-col>
|
</van-row>
|
</div>-->
|
<!-- 显示内容 -->
|
<div class="pumpSeries-main">
|
<div style="height: calc(100% - 0px); overflow: auto">
|
<van-cell-group
|
:title="group_item.groupName"
|
v-for="group_item in m_showPumpList"
|
:key="group_item.groupName"
|
>
|
<van-cell
|
v-for="item in group_item.nodeList"
|
clickable
|
is-link
|
title-style="color:#000000 !important"
|
:key="item.ID"
|
:title="item.Name"
|
@click="getCurrentClickCell(item.ID)"
|
>
|
<template #icon>
|
<van-image :src="item.ThumbnailImage" width="80" height="45" />
|
</template>
|
</van-cell>
|
</van-cell-group>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Utils from "@/utils/utils.js";
|
import languageMixin from "@/mixin/language";
|
export default {
|
mixins: [languageMixin],
|
data() {
|
return {
|
m_Title: "",
|
hyName: "消防", //
|
m_CatalogList: [], //类型列表
|
m_selectCatalogName: "全部",
|
m_catalogSelectValue: 0, //类型默认选择全部
|
m_catalogSelectOption: [
|
//类型选择列表
|
{ text: "全部", value: 0 }
|
],
|
m_pumpSeriesList: [], //泵列表
|
m_showPumpList: [], //用于展示的泵列表
|
m_MotorFrequece: false, //默认展示50Hz
|
m_prevPagePumpSeriesID: [] //上个页面传入的seriesId
|
};
|
},
|
mounted() {
|
this.m_selectCatalogName = `${this.$t('ebookPage.all.TR')}`,
|
this.m_catalogSelectOption[0].text = `${this.$t('ebookPage.all.TR')}`
|
this.m_Title = this.getSoftName();
|
// console.log(this.$route.query.HID,136)
|
this.m_prevPagePumpSeriesID = this.getPumpSeriesID(this.$route.query.HID);
|
// console.log(this.m_prevPagePumpSeriesID,138)
|
this.getPumpSeriesList();
|
},
|
methods: {
|
//获取产品列表
|
getPumpSeriesList() {
|
let _this = this;
|
_this
|
.$axios({
|
methods: "get",
|
url:
|
_this.$globalConfig.WebApiUrl.MainUrl +
|
"v1/Mobile/PumpSeries/GetBySeriesIDs",
|
params: {
|
SeriesID: _this.m_prevPagePumpSeriesID.join(","),
|
Lang: _this.getCurrentLanguageType()
|
}
|
})
|
.then(function(res) {
|
// console.log(res);
|
let result = res.data;
|
if (result.Code != 0) {
|
return;
|
}
|
if (result.Data) {
|
let catalogList = []; //类型名称
|
let pumpSeriesList = []; //泵系列名称
|
result.Data.forEach(item => {
|
catalogList.push({ ID: item.CatalogID, Name: item.CatalogName });
|
let productItem = {
|
CatalogID: item.CatalogID,
|
ID: item.ID,
|
CatalogName: item.CatalogName,
|
Name: item.Name,
|
ChartType: item.ChartType,
|
ThumbnailImage:
|
_this.$globalConfig.WebApiUrl.FileUrl + item.ThumbnailImage,
|
RealFileName: item.RealFileName,
|
WordDescription:
|
item.WordDescription == ""
|
? `${_this.$t('ebookPage.noProfile.TR')}`
|
: item.WordDescription.replace(/<br\/>/g, "\n"),
|
ShortDescription:
|
item.ShortDescription == ""
|
? `${_this.$t('ebookPage.noProfile.TR')}`
|
: item.ShortDescription.replace(/<br\/>/g, "\n"),
|
MotorFrequece: item.MotorFrequece,
|
DriveType: item.DriveType,
|
FirePumpType: item.FirePumpType
|
};
|
pumpSeriesList.push(productItem);
|
});
|
_this.m_CatalogList = Utils.uniqueInArrayObject(catalogList);
|
|
_this.m_CatalogList.forEach(item => {
|
let catalogOption = {
|
text: item.Name,
|
value: item.ID
|
};
|
_this.m_catalogSelectOption.push(catalogOption);
|
});
|
_this.m_pumpSeriesList = pumpSeriesList;
|
|
let motorFrequece = _this.m_MotorFrequece ? "60" : "50";
|
_this.m_showPumpList = _this.filterSeriseList(
|
motorFrequece,
|
_this.m_catalogSelectValue
|
);
|
|
_this.getCatalogNodeNum();
|
//console.log(_this.m_showPumpList, 133);
|
}
|
})
|
.catch(function(err) {
|
console.log(err);
|
});
|
},
|
|
//跳转到详情
|
goPumpDetail(ID) {
|
//console.log(ID,204)
|
// this.$router.push({
|
// path: `/${this.$getCurrentLanguageUrl()}/EBook/SeriesDetailPump`,
|
// query: { ID: ID }
|
// });
|
this.$router.push({
|
path: this.buildCurrentLanguageUrl(`/Series/Index/` + ID),
|
});
|
},
|
//筛选系列列表
|
filterSeriseList(MotorFrequece, CatalogID) {
|
let showSeriesArr = [];
|
let showCatalogArr = [];
|
if (CatalogID == 0) {
|
this.m_CatalogList.forEach(item => {
|
let groupItem = {};
|
groupItem.groupName = "";
|
groupItem.nodeList = [];
|
this.m_pumpSeriesList.forEach(seriesItem => {
|
//判断类型是否是全部
|
if (
|
item.Name == seriesItem.CatalogName &&
|
seriesItem.MotorFrequece == MotorFrequece
|
) {
|
groupItem.groupName = item.Name;
|
groupItem.nodeList.push(seriesItem);
|
}
|
});
|
showSeriesArr.push(groupItem);
|
});
|
} else {
|
this.m_CatalogList.forEach(item => {
|
if (item.ID == CatalogID) {
|
showCatalogArr.push(item);
|
}
|
});
|
showCatalogArr.forEach(item => {
|
let groupItem = {};
|
groupItem.groupName = "";
|
groupItem.nodeList = [];
|
this.m_pumpSeriesList.forEach(seriesItem => {
|
//判断类型是否是全部
|
if (
|
CatalogID == seriesItem.CatalogID &&
|
seriesItem.MotorFrequece == MotorFrequece
|
) {
|
groupItem.groupName = item.Name;
|
groupItem.nodeList.push(seriesItem);
|
}
|
});
|
showSeriesArr.push(groupItem);
|
});
|
}
|
return showSeriesArr;
|
},
|
getPumpSeriesID(prevID){
|
let lang = this.$i18n.locale
|
if(prevID == "" || prevID == undefined){
|
return
|
}
|
let hyList = window.seriesApplication.HangYe.List;
|
let pumpSeriesID = ""
|
hyList.forEach(item=>{
|
if(parseInt(item.ID) == parseInt(prevID)){
|
// console.log(item.ID,prevID,278)
|
pumpSeriesID = item.PumpSeriesID
|
if(lang == 'cn'){
|
this.hyName = item.NameCN
|
}else if(lang == 'en'){
|
this.hyName = item.NameEN
|
}
|
}
|
})
|
// console.log(pumpSeriesID,282)
|
return pumpSeriesID
|
},
|
|
//获取当前点击的单元格的数据
|
getCurrentClickCell(ID) {
|
this.$router.push({
|
path: `/${this.$getCurrentLanguageUrl()}/EBook/SeriesDetailPump`,
|
query: { ID: ID }
|
});
|
},
|
//选择电机频率
|
selectMotorFrequece(Hz) {
|
this.m_MotorFrequece = Hz;
|
this.m_showPumpList = this.filterSeriseList();
|
},
|
//获取电机功率的值
|
getFilterValue() {
|
this.$refs.item.toggle();
|
//console.log(val,777)
|
let motorFrequece = this.m_MotorFrequece ? "60" : "50";
|
this.m_showPumpList = this.filterSeriseList(
|
motorFrequece,
|
this.m_catalogSelectValue
|
);
|
this.getCatalogNodeNum();
|
},
|
//获取类型下拉菜单选择的值
|
getCatalogSelectValue(item) {
|
this.m_catalogSelectValue = item.value;
|
this.m_selectCatalogName = item.text;
|
let motorFrequece = this.m_MotorFrequece ? "60" : "50";
|
this.m_showPumpList = this.filterSeriseList(motorFrequece, item.value);
|
this.$refs.CatalogType.toggle();
|
},
|
//计算出类型下系列的个数
|
getCatalogNodeNum() {
|
this.m_catalogSelectOption.forEach(catalog => {
|
let growNum = 0;
|
if (catalog.value != 0) {
|
catalog.nodeNum = 0;
|
}
|
this.m_showPumpList.forEach(series => {
|
series.nodeList.forEach(node => {
|
if (catalog.value == node.CatalogID && catalog.value != 0) {
|
growNum++;
|
catalog.nodeNum = growNum;
|
}
|
});
|
});
|
});
|
},
|
//返回上一页
|
pageBack() {
|
this.$router.go(-1);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
@import url("../../assets/css/page.css");
|
.pumpSeries-box {
|
background: #fafafa;
|
width: 100%;
|
height: 100vh;
|
|
.van-dropdown-item__content {
|
max-height: 34%;
|
}
|
.van-cell__title {
|
text-align: start;
|
}
|
|
.pumpSeries-main {
|
width: 100%;
|
height: calc(100% - 96px);
|
overflow: auto;
|
.van-cell {
|
color: #528abe;
|
}
|
.van-cell__right-icon {
|
color: #006782;
|
}
|
.van-cell {
|
padding: 10px 16px !important;
|
align-items: center;
|
}
|
.van-cell-group__title {
|
padding: 7px 16px 7px !important;
|
text-align: left;
|
background: #aaaaaa;
|
font-weight: 600;
|
color: #000000;
|
}
|
.van-cell__title,
|
.van-cell__value {
|
text-align: left;
|
font-size: 13px;
|
color: #36489e;
|
font-weight: 600;
|
}
|
}
|
.select_btn_50 {
|
border: 1px solid rgb(82, 138, 190);
|
border-radius: 4px 0px 0px 4px;
|
font-size: 14px;
|
padding: 3px 0px;
|
}
|
|
.select_btn_60 {
|
border-bottom: 1px solid #eeeeee;
|
border-top: 1px solid #eeeeee;
|
border-right: 1px solid #eeeeee;
|
font-size: 14px;
|
padding: 3px 0px;
|
border-radius: 0px 4px 4px 0px;
|
}
|
.select_active {
|
background: #528abe;
|
color: #fff;
|
}
|
}
|
</style>
|
