<template>
|
<div class="pumpCategory_Box">
|
<!-- 头部导航栏 -->
|
<van-nav-bar style="position: sticky; top: 0;">
|
<template #left>
|
<div @click="pageBack" style="display: flex; align-items: center">
|
<van-icon name="arrow-left" size="18" />
|
<span>{{$t("selectPage.previous.TR")}}</span>
|
</div>
|
</template>
|
<template #title>
|
<label>泵型选择</label>
|
</template>
|
<template #right>
|
<div @click="toSelSeries" style="display: flex; align-items: center">
|
<span>{{$t("selectPage.nextStep.TR")}}</span>
|
<van-icon name="arrow" size="18" />
|
</div>
|
</template>
|
</van-nav-bar>
|
<div class="selectSeriews_main">
|
<van-row class="select_title_style" type="flex" v-if="false">
|
<van-col
|
v-if="m_setSeriesMethod.byCatalog.isVisible"
|
class="select_btn"
|
:class="m_selectIndex == 1 ? 'select_active' : ''"
|
span="6"
|
@click="selectMetchod(1)"
|
>
|
<span>{{$t("selectPage.byType.TR")}}</span>
|
</van-col>
|
<van-col
|
v-if="m_setSeriesMethod.byHY.isVisible"
|
@click="selectMetchod(2)"
|
span="6"
|
class="select_reveser_btn"
|
:class="m_selectIndex == 2 ? 'select_active' : ''"
|
>
|
<span>{{$t("selectPage.byIndustry.TR")}}</span>
|
</van-col>
|
<van-col
|
v-if="m_setSeriesMethod.byMedia.isVisible"
|
@click="selectMetchod(3)"
|
span="6"
|
class="select_again_btn"
|
:class="m_selectIndex == 3 ? 'select_active' : ''"
|
>
|
<span>{{$t("selectPage.byMedia.TR")}}</span>
|
</van-col>
|
</van-row>
|
<!-- 按类型分类列表 -->
|
<div style="height: 100%;" ref="pumpCategory_Box" v-show="m_selectIndex == 1">
|
<van-radio-group v-model="currentCheckedCategory">
|
<!-- <van-cell-group
|
:title="group_item.label"
|
v-for="group_item in m_VisiblepumpCateGoryOption"
|
:key="group_item.label"
|
>
|
<van-cell
|
v-for="(item, index) in group_item.child"
|
clickable
|
title-style="color:#808080"
|
:key="item.value"
|
@click="toggle(item, index)"
|
>
|
<template #title>
|
<span style="font-size: 14px;font-weight: 700;">{{item.label}}</span>
|
<span v-if="currentCheckedCategory == item.value">({{item.seriesNumber}})</span>
|
</template>
|
<template #right-icon>
|
<van-radio :disabled="item.seriesNumber == 0?true:false" :name="item.value" />
|
</template>
|
</van-cell>
|
</van-cell-group> -->
|
<van-collapse v-model="currentExplanCategory">
|
<van-collapse-item
|
v-for="(group_item,group_index) in m_VisiblepumpCateGoryOption"
|
:key="group_index"
|
:name="group_item.label"
|
>
|
<template #title>
|
<van-badge v-if="group_item.isHaveSelect" dot color="#528abe">
|
<div style="color:#578ebe">{{group_item.label}}</div>
|
</van-badge>
|
<div v-else>{{group_item.label}}</div>
|
</template>
|
<van-cell
|
v-for="item in group_item.child"
|
clickable
|
title-style="color:#808080"
|
:key="item.value"
|
@click="toggle(item, group_index)"
|
>
|
<template #title>
|
<span style="font-size: 14px;font-weight: 700;">{{item.label}}</span>
|
<span v-if="currentCheckedCategory == item.value">({{item.seriesNumber}})</span>
|
</template>
|
<template #right-icon>
|
<van-radio :disabled="item.seriesNumber == 0?true:false" :name="item.value" />
|
</template>
|
</van-cell>
|
</van-collapse-item>
|
</van-collapse>
|
</van-radio-group>
|
</div>
|
<!-- 按行业分类列表 -->
|
<div style="height: calc(100% - 42px); overflow: auto" v-if="m_selectIndex == 2">
|
<van-radio-group v-model="m_currentSelectHY">
|
<van-cell-group>
|
<van-cell
|
v-for="hy_item in m_allHYList"
|
:key="hy_item.ID"
|
clickable
|
@click="clickHYItem(hy_item)"
|
>
|
<template #title>
|
<span style="color:#808080;margin-left:10px;">{{hy_item.NameCN}}</span>
|
</template>
|
<template #icon>
|
<van-image :src="hy_item.ThumbnailImage" width="50" height="50" />
|
</template>
|
<template #right-icon>
|
<van-radio :name="hy_item.ID" />
|
</template>
|
</van-cell>
|
</van-cell-group>
|
</van-radio-group>
|
</div>
|
<!-- 按介质分类列表 -->
|
<div style="height: calc(100% - 42px); overflow: auto" v-if="m_selectIndex == 3">
|
<van-radio-group v-model="m_currentSelectJZ">
|
<van-cell-group>
|
<van-cell
|
v-for="(jz_item,jz_index) in m_allJZList"
|
:key="jz_item.ID"
|
clickable
|
@click="clickJZItem(jz_item,jz_index)"
|
>
|
<template #title>
|
<span style="color:#3d3d3d;margin-left:10px;font-size: 20px;">{{jz_item.NameCN}}</span>
|
</template>
|
<!-- <template #icon>
|
<van-image :src="jz_item.ThumbnailImage" width="50" height="50" />
|
</template>-->
|
<template #right-icon>
|
<van-radio :name="jz_item.ID" />
|
</template>
|
</van-cell>
|
</van-cell-group>
|
</van-radio-group>
|
</div>
|
</div>
|
<transition name="van-slide-left">
|
<div class="poptips" v-show="showPopover">{{$t('selectPage.seriesRangTips.TR')}}</div>
|
</transition>
|
<div class="backTop" v-show="backtopshow" @click="backTop">
|
<div class="iconfont iconfanhuidingbu3"></div>
|
<div>{{$t('indexPage.top.TR')}}</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Utils from "../../utils/utils";
|
import axiosHelper from "@/utils/axiosHelper.js";
|
import languageMixin from "@/mixin/language.js";
|
|
export default {
|
mixins: [languageMixin],
|
data() {
|
return {
|
m_userType: 0,
|
m_userID: 0,
|
m_pageTitle: "",
|
|
m_pumpCateGoryOption: [], //原始泵型数据
|
|
m_currentSelectHY: "", //当前选中的行业
|
m_allHYList: [], //所有行业列表
|
|
m_currentSelectJZ: "",
|
m_allJZList: [], //所有介质列表
|
|
m_VisiblepumpCateGoryOption: [], //用于页面展示的类型列表
|
|
m_prevPageData: {}, //上个页面传入的数据
|
m_selectIndex: 1, //列表的选择状态 1表示按类型 2表示按行业 3表示按介质
|
currentCheckedCategory: "", //当前选择的类型
|
currentCheckedLabel:"",
|
currentExplanCategory:[],//当前展开的菜单
|
m_SelectAllList: false,
|
|
m_setSeriesMethod: {
|
byCatalog: {
|
isDisable: true,
|
isVisible: false
|
},
|
byHY: {
|
isDisable: true,
|
isVisible: false
|
},
|
byMedia: {
|
isDisable: true,
|
isVisible: false
|
}
|
},
|
showPopover: false,
|
backtopshow: false //回到顶部图标显隐状态
|
};
|
},
|
mounted() {
|
let _this = this;
|
|
let userType = this.$store.state.instante.account.UserType;
|
let userID = this.$store.state.instante.account.UserID;
|
this.m_userType = userType;
|
this.m_userID = userID;
|
this.m_pageTitle = this.getSoftName();
|
document.title = this.m_pageTitle;
|
|
this.$nextTick(function() {
|
//移除滚动事件
|
document.removeEventListener("scroll", this.setBackShow, true);
|
//添加滚动事件
|
document.addEventListener("scroll", this.setBackShow, true);
|
});
|
//console.log(this.m_SelectSeriesID, 34);
|
this.getParaPageInfo();
|
|
/** 暂时不显示按行业和介质分类 */
|
// this.buildHYList();
|
// this.buildJZList();
|
|
setTimeout(function() {
|
//判断如果行业和介质都不显示 就隐藏整个分类选择
|
if (
|
_this.m_setSeriesMethod.byHY.isVisible == false &&
|
_this.m_setSeriesMethod.byMedia.isVisible == false
|
) {
|
_this.m_setSeriesMethod.byCatalog.isVisible = false;
|
}
|
}, 500);
|
},
|
methods: {
|
getParaPageInfo() {
|
let _this = this;
|
let myToast = _this.$toast;
|
myToast.loading({
|
duration: 0, //为0时 不关闭toast框
|
message: "Loading...",
|
forbidClick: true
|
});
|
_this
|
.$axios({
|
url:
|
_this.$globalConfig.WebApiUrl.MainUrl +
|
"/v1/Mobile/PumpCategory/Get4BengXing",
|
params: {
|
Lang: _this.getCurrentLanguageType()
|
}
|
})
|
.then(res => {
|
// console.log(res, 259);
|
myToast.clear();
|
let result = res.data;
|
if (result.Code != 0) {
|
myToast.fail({
|
duration: 1000, //为0时 不关闭toast框
|
message: "未找到相关类型...",
|
forbidClick: true
|
});
|
return;
|
}
|
if (result.Data) {
|
myToast.clear();
|
_this.m_setSeriesMethod.byCatalog.isVisible = true;
|
let catalogGroups = [];
|
let catalogChilds = [];
|
|
result.Data.forEach(item => {
|
if (item.ParentID == 0) {
|
let cataGup = {
|
value: item.ID,
|
label: item.Name,
|
parentID: item.ParentID
|
};
|
catalogGroups.push(cataGup);
|
} else {
|
let cataChild = {
|
value: item.ID,
|
label: item.Name,
|
parentID: item.ParentID,
|
seriesNumber: item.SeriesNumber
|
};
|
catalogChilds.push(cataChild);
|
}
|
});
|
// console.log(catalogGroups, catalogChilds);
|
|
let currentCatalogOptions = [];
|
|
catalogGroups.forEach(group => {
|
let catalogOption = {
|
value: group.value,
|
label: group.label,
|
parentID: group.parentID,
|
isExpland: false,
|
isHaveSelect:false,
|
child: []
|
};
|
catalogChilds.forEach(child => {
|
if (child.parentID == group.value) {
|
let node = {
|
value: child.value,
|
label: child.label,
|
parentID: child.parentID,
|
seriesNumber: child.seriesNumber
|
};
|
catalogOption.child.push(node);
|
}
|
});
|
currentCatalogOptions.push(catalogOption);
|
});
|
// console.log(currentCatalogOptions, 362);
|
_this.m_pumpCateGoryOption = currentCatalogOptions;
|
_this.m_VisiblepumpCateGoryOption = currentCatalogOptions;
|
|
_this.getPrivePageData()
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
},
|
//获取上一页的历史数据
|
getPrivePageData(){
|
let prvePathDataObj = this.$store.state.instante.select.ByParas.filterData;
|
if (prvePathDataObj) {
|
this.m_prevPageData = prvePathDataObj;
|
if (prvePathDataObj.FilterInfo.CatalogID) {
|
//console.log(prvePathDataObj.FilterInfo.SeriesID,104)
|
this.currentCheckedCategory = prvePathDataObj.FilterInfo.CatalogID;
|
}
|
}
|
if (this.currentCheckedCategory == "") {
|
this.showPopover = true;
|
setTimeout(function() {
|
_this.showPopover = false;
|
}, 3000);
|
} else {
|
this.showPopover = false;
|
}
|
for(let i=0,length= this.m_pumpCateGoryOption.length;i<length;i++){
|
let groupItem = this.m_pumpCateGoryOption[i]
|
for(let j=0,childlength= groupItem.child.length;j<childlength;j++){
|
let childItem = groupItem.child[j]
|
if(childItem.value == this.currentCheckedCategory){
|
groupItem.isHaveSelect = true
|
this.currentCheckedLabel = childItem.label
|
break;
|
}
|
}
|
}
|
},
|
//构建行业列表
|
// buildHYList() {
|
// if (
|
// window.seriesApplication.HangYe == "undefind" ||
|
// window.seriesApplication.HangYe == null
|
// ) {
|
// window.seriesApplication.HangYe = {};
|
// }
|
// let HYData = window.seriesApplication.HangYe.List;
|
// if (HYData == null || HYData.length == 0) {
|
// this.m_allHYList = [];
|
// } else {
|
// this.m_setSeriesMethod.byHY.isVisible = true;
|
// HYData.forEach(item => {
|
// item.ThumbnailImage = require("../../assets/img/HangYe/" +
|
// item.ImageName +
|
// "/ffffffx128.png");
|
// });
|
// this.m_allHYList = HYData;
|
// }
|
// },
|
//构建介质列表
|
buildJZList() {
|
if (
|
window.seriesApplication.JieZhiParas == "undefind" ||
|
window.seriesApplication.JieZhiParas == null
|
) {
|
window.seriesApplication.JieZhiParas = {};
|
}
|
let JZData = window.seriesApplication.JieZhiParas.List;
|
if (JZData == null || JZData.length == 0) {
|
this.m_allJZList = [];
|
} else {
|
this.m_setSeriesMethod.byMedia.isVisible = true;
|
// JZData.forEach(item => {
|
// item.ThumbnailImage = require("../../assets/img/HangYe/" +
|
// item.ImageName +
|
// "/ffffffx128.png");
|
// });
|
this.m_allJZList = JZData;
|
}
|
// console.log(this.m_setSeriesMethod.byMedia.isVisible);
|
},
|
//系列列表筛选方法
|
filterSeriesList(catalogList, seriesList, MotorFrequece) {
|
let motorFrequece = MotorFrequece;
|
let showSeriesList = [];
|
let showCatalogList = [];
|
|
seriesList.forEach(node => {
|
if (node.MotorFrequece == motorFrequece) {
|
showSeriesList.push(node);
|
}
|
});
|
// console.log(showSeriesList, 365);
|
showSeriesList.forEach(seriesNode => {
|
catalogList.forEach(catalogNode => {
|
if (seriesNode.ID == catalogNode.ID) {
|
// console.log(seriesNode.ID,catalogNode.ID,367)
|
showCatalogList.push(catalogNode);
|
}
|
});
|
});
|
// console.log(showCatalogList, 377);
|
this.m_VisibleCatalogList = Utils.uniqueInArrayObject(showCatalogList);
|
this.m_VisibleSeriesList = showSeriesList;
|
// console.log(this.m_VisibleCatalogList, this.m_VisibleSeriesList, 186);
|
},
|
//按类型多选 checkbox 选择状态切换
|
toggle(item, index) {
|
console.log(item.label)
|
if(item.seriesNumber == 0){
|
return
|
}
|
this.m_VisiblepumpCateGoryOption.forEach(item=>{
|
item.isHaveSelect = false
|
})
|
this.m_VisiblepumpCateGoryOption[index].isHaveSelect = true
|
this.currentCheckedCategory = item.value;
|
this.currentCheckedLabel = item.label
|
},
|
//按行业选择
|
clickHYItem(item) {
|
this.m_currentSelectHY = item.ID;
|
let ser_id = [];
|
if (item.PumpSeriesID.length == 0) {
|
return;
|
}
|
ser_id.push(...item.PumpSeriesID);
|
if (ser_id.length > 0) this.m_SelectSeriesID = ser_id;
|
},
|
//按介质选择
|
clickJZItem(item, index) {
|
this.m_currentSelectJZ = item.ID;
|
let ser_id = [];
|
let all_id = [];
|
let jzData = this.m_allJZList;
|
if (item.PumpSeriesID.length == 0) {
|
return;
|
}
|
if (item.PumpSeriesID.length == 1 && item.PumpSeriesID[0] == -1) {
|
jzData.forEach(jz_item => {
|
all_id.push(...jz_item.PumpSeriesID);
|
});
|
ser_id = all_id.splice(0, all_id.length - 1);
|
if (ser_id.length > 0) this.m_SelectSeriesID = ser_id;
|
return;
|
}
|
ser_id.push(...item.PumpSeriesID);
|
if (ser_id.length > 0) this.m_SelectSeriesID = ser_id;
|
},
|
//全选
|
selectMetchod(index) {
|
this.m_selectIndex = index;
|
this.m_SelectSeriesID = [];
|
},
|
//反选
|
selectReveres(index) {
|
this.m_selectIndex = index;
|
let SeriesID = [];
|
if (this.m_SelectSeriesID.length == 0) {
|
this.m_SeriesList.forEach(node => {
|
node.isCheck = !node.isCheck;
|
SeriesID.push(node.ID);
|
});
|
this.m_SelectSeriesID = SeriesID;
|
} else {
|
this.m_SeriesList.forEach(node => {
|
node.isCheck = !node.isCheck;
|
});
|
this.m_SelectSeriesID = [];
|
}
|
},
|
//监听全选和取消全选
|
changeSelectAllList(val) {
|
let SeriesID = [];
|
if (val) {
|
this.m_SeriesList.forEach(node => {
|
node.isCheck = true;
|
SeriesID.push(node.ID);
|
});
|
this.m_SelectSeriesID = SeriesID;
|
} else {
|
this.m_SeriesList.forEach(node => {
|
node.isCheck = false;
|
});
|
this.m_SelectSeriesID = [];
|
}
|
},
|
//返回上一页
|
pageBack() {
|
this.$router.go(-1);
|
},
|
//跳转到泵详情界面
|
toSelSeries() {
|
if (this.currentCheckedCategory == "") {
|
let Toast = this.$toast;
|
if (this.m_selectIndex == 1) {
|
Toast.fail({
|
duration: 1000, //为0时 不关闭toast框
|
message: `您未选择泵类型`,
|
forbidClick: true
|
});
|
return;
|
}
|
if (this.m_selectIndex == 2) {
|
Toast.fail({
|
duration: 1000, //为0时 不关闭toast框
|
message: `${this.$t("selectPage.hangyeRule.TR")}`,
|
forbidClick: true
|
});
|
return;
|
}
|
if (this.m_selectIndex == 3) {
|
Toast.fail({
|
duration: 1000, //为0时 不关闭toast框
|
message: `${this.$t("selectPage.jiezhiRule.TR")}`,
|
forbidClick: true
|
});
|
return;
|
}
|
}
|
let groupPageData = {
|
//页面其他展示数据
|
//介质
|
JieZhi: {
|
ID: this.m_prevPageData.JieZhi.ID, //介质id
|
Name: this.m_prevPageData.JieZhi.ID, //介质名称
|
CalcDensity: this.m_prevPageData.JieZhi.CalcDensity, //密度
|
CalcViscosity: this.m_prevPageData.JieZhi.CalcViscosity //粘度
|
},
|
//筛选信息
|
FilterInfo: {
|
DriveType: this.m_prevPageData.FilterInfo.DriveType, //设备类型 0电机 3柴油机
|
KeyWord: this.m_prevPageData.FilterInfo.KeyWord, //关键字 暂时默认空
|
FirePumpType: this.m_prevPageData.FilterInfo.FirePumpType, //消防泵类型
|
MotorPoleNum: this.m_prevPageData.FilterInfo.MotorPoleNum, //电机效率等级 暂时为空
|
DieselSpeed: this.m_prevPageData.FilterInfo.DieselSpeed, //柴油机转速 暂时默认
|
MotorFrequence: this.m_prevPageData.FilterInfo.MotorFrequence, //电机赫兹
|
Temperature: this.m_prevPageData.FilterInfo.Temperature, //温度
|
MotorStandard: this.m_prevPageData.FilterInfo.MotorStandard, //电机功率标准
|
SeriesSelectMethod: 0, //0 用的是 CatalogID 1 用的是SeriesID 2 行业
|
SeriesID: "", //泵系列ID 暂时默认为空
|
CatalogID: this.currentCheckedCategory //泵类型id
|
},
|
//设计点参数
|
DesignInfo: {
|
UnitQ: this.m_prevPageData.DesignInfo.UnitQ, //流量单位
|
UnitH: this.m_prevPageData.DesignInfo.UnitH, //扬程单位
|
DpQ: this.m_prevPageData.DesignInfo.DpQ, //输入的流量的值
|
DpH: this.m_prevPageData.DesignInfo.DpH, //输入的扬程的值
|
ToleranceStandard: this.m_prevPageData.DesignInfo.ToleranceStandard, //容差标准的值
|
PointTolerance: this.m_prevPageData.DesignInfo.PointTolerance, // 点容差范围 默认空
|
IsVisCorrect: this.m_prevPageData.DesignInfo.IsVisCorrect //是否修正粘度 默认false
|
}
|
};
|
|
//将筛选数据存储到vuex中
|
this.$store.commit("instante/select/ByParas", {
|
//select 表示vuex的文件名
|
filterData: groupPageData
|
});
|
let query = {
|
catalogName:this.currentCheckedLabel
|
}
|
this.gotoPage("/Select/SelSeries", query, null);
|
//console.log(groupPageData);
|
//console.log(this.m_SelectSeriesID);
|
},
|
setBackShow() {
|
if (this.$refs.pumpCategory_Box) {
|
let top = this.$refs.pumpCategory_Box.getBoundingClientRect().top;
|
// console.log(top,545)
|
if (top < -500) {
|
this.backtopshow = true;
|
} else {
|
this.backtopshow = false;
|
}
|
}
|
},
|
backTop() {
|
let timer = setInterval(function() {
|
//获取滚动条的滚动高度
|
var osTop =
|
document.documentElement.scrollTop || document.body.scrollTop;
|
//用于设置速度差，产生缓动的效果
|
var speed = Math.floor(-osTop / 6);
|
document.documentElement.scrollTop = document.body.scrollTop =
|
osTop + speed;
|
// let isTop = true; //用于阻止滚动事件清除定时器
|
// console.log(osTop,566)
|
if (osTop == 0) {
|
clearInterval(timer);
|
}
|
}, 30);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.pumpCategory_Box {
|
width: 100%;
|
height: 100vh;
|
.select_title_style {
|
height: 42px;
|
align-items: center;
|
background: #ffffff;
|
padding: 0 10px;
|
justify-content: start;
|
position: relative;
|
}
|
.selectSeriews_main {
|
width: 100%;
|
height: calc(100% - 46px);
|
background-color: #fafafa;
|
.van-button--primary {
|
color: #000;
|
background-color: unset;
|
border: unset;
|
}
|
.van-cell-group__title {
|
padding: 5px 16px 5px;
|
text-align: left;
|
background: #528abe;
|
font-weight: 600;
|
color: #ffffff;
|
}
|
.van-cell__title,
|
.van-cell__value {
|
text-align: left;
|
font-size: 13px;
|
}
|
.van-collapse-item__content {
|
padding: 0px 16px;
|
}
|
.van-field__label {
|
width: 7em;
|
}
|
.select_btn {
|
border: 1px solid #eeeeee;
|
font-size: 14px;
|
padding: 3px 0px;
|
}
|
.select_again_btn {
|
border-bottom: 1px solid #eeeeee;
|
border-top: 1px solid #eeeeee;
|
border-right: 1px solid #eeeeee;
|
font-size: 14px;
|
padding: 3px 0px;
|
span {
|
color: #000000;
|
}
|
}
|
.select_reveser_btn {
|
border-bottom: 1px solid #eeeeee;
|
border-top: 1px solid #eeeeee;
|
border-right: 1px solid #eeeeee;
|
|
font-size: 14px;
|
padding: 3px 0px;
|
span {
|
color: #000000;
|
}
|
}
|
.select_active {
|
background: #528abe;
|
span {
|
color: #fff;
|
}
|
}
|
}
|
.poptips {
|
// width: 135px;
|
height: 18px;
|
position: fixed;
|
top: 32px;
|
left: 10px;
|
background-color: #000;
|
color: #ffffff;
|
z-index: 1;
|
font-size: 12px;
|
text-align: center;
|
border-radius: 3px;
|
}
|
.backTop {
|
position: fixed;
|
width: 50px;
|
height: 50px;
|
right: 10px;
|
bottom: 30px;
|
border-radius: 100%;
|
text-align: center;
|
background-color: #528abe;
|
color: #fff;
|
}
|
|
.backTop > div:first-of-type {
|
height: 25px;
|
font-size: 28px;
|
text-align: center;
|
}
|
|
.backTop > div:last-of-type {
|
height: 20px;
|
line-height: 18px;
|
font-size: 10px;
|
text-align: center;
|
}
|
}
|
</style>
|
