<template>
|
<div class="seriesDetail-box">
|
<!-- 头部导航栏 -->
|
<van-nav-bar>
|
<template #left>
|
<van-icon @click="pageBack" name="arrow-left" size="18" />
|
</template>
|
<template #title>
|
<label>{{ m_PageTitle }}</label>
|
</template>
|
<template #right>
|
<!-- <van-icon name="search" size="18" /> -->
|
</template>
|
</van-nav-bar>
|
<div class="seriesDetailMain" >
|
<!-- 系列列表 -->
|
<div
|
ref="seriesCtr"
|
@scroll="divScroll"
|
class="xinhao_box"
|
v-show="m_tabberActive == 'seriesList'"
|
>
|
<van-search
|
v-model="m_keyWords"
|
@update:model-value="inputKeyWords"
|
:placeholder="$t('ebookPage.keyWordRule.TR')"
|
clearable
|
@clear="clearKeyWords"
|
input-align="center"
|
/>
|
<van-collapse v-model="m_activeNames" :border="true" v-if="m_IsVisibleGroup">
|
<van-collapse-item
|
:title="series_item.Name"
|
:name="series_item.ID"
|
v-for="(series_item, index) in m_ShowGroupList"
|
:key="'catalog' + index"
|
:class="index % 2 ==0?'bg-gray':'bg-white'"
|
>
|
<div v-for="node in m_ShowPumpList" :key="node.PumpID" style>
|
<van-cell
|
style="padding:10px 16px;"
|
is-link
|
size="large"
|
@click="toDetail(node.PumpID)"
|
v-if="series_item.ID == node.GroupID"
|
>
|
<template #title>
|
<span style="color: #000000">{{ node.PumpName }}</span>
|
</template>
|
<template #label>
|
<div>
|
<span class="item_font">{{$t('selectPage.flow.TR')}}:{{ node.RatedQ }}{{ m_DpQu }}</span>
|
<span class="item_font">{{$t('selectPage.head.TR')}}:{{ node.RatedH }}{{ m_DpHu }}</span>
|
<span class="item_font">{{node.MotorPower}}</span>
|
<span class="item_font">{{$t('selectPage.speed.TR')}}:{{ node.Ratedn }}</span>
|
</div>
|
</template>
|
<template #right-icon>
|
<van-icon
|
style="position: absolute; right: 15px; top: 20px"
|
name="arrow"
|
size="18"
|
/>
|
</template>
|
</van-cell>
|
<div style="width:100%;height:0px;background:#eee"></div>
|
</div>
|
</van-collapse-item>
|
</van-collapse>
|
<div v-if="m_IsVisibleList" class="pump_list_box">
|
<van-cell
|
is-link
|
size="large"
|
v-for="node in m_ShowPumpList"
|
:key="node.PumpID"
|
@click="toDetail(node.PumpID)"
|
>
|
<template #title>
|
<span style="color: #000000">{{ node.PumpName }}</span>
|
</template>
|
<template #label>
|
<div>
|
<span class="item_font">{{$t('selectPage.flow.TR')}}:{{ node.RatedQ }}{{ m_DpQu }}</span>
|
<span class="item_font">{{$t('selectPage.head.TR')}}:{{ node.RatedH }}{{ m_DpHu }}</span>
|
<span class="item_font">{{node.MotorPower}}</span>
|
<span class="item_font">{{$t('selectPage.speed.TR')}}:{{ node.Ratedn }}</span>
|
</div>
|
</template>
|
<template #right-icon>
|
<van-icon style="position: absolute; right: 15px; top: 20px" name="arrow" size="18" />
|
</template>
|
</van-cell>
|
</div>
|
<!-- 回到顶部 -->
|
<transition name="van-fade">
|
<div class="backTop" v-show="backtopshow" @click="backTop">
|
<div class="iconfont iconfanhuidingbu3"></div>
|
<div>{{$t('indexPage.top.TR')}}</div>
|
</div>
|
</transition>
|
</div>
|
<!-- 实物图 -->
|
<div class="pictrue_box" v-show="m_tabberActive == 'pictrue'">
|
<div style="width:100%;height:50%;position:relative;" v-show="m_Show3DSrc != ''">
|
<iframe style="width:100%;height:100%;" frameborder="0" scrolling="no" :src="m_Show3DSrc"></iframe>
|
<div
|
style="position: absolute;
|
top: 0px;
|
left: 0px;
|
width: 165px;
|
height: 50px;"
|
>
|
<img src="/static/img/LogoMask.png" style="width: 100%;height:100%;" />
|
</div>
|
</div>
|
<div style="width:100%;height:50%;" v-show="m_ShowImageUrl.length>0">
|
<img :src="m_ShowImageUrl[0]" @click="m_ShowPictrue = true" />
|
<van-image-preview
|
v-model:show="m_ShowPictrue"
|
:closeable="true"
|
:images="m_ShowImageUrl"
|
@change="onChangeImgSelect"
|
>
|
<template v-slot:index>{{ m_ShowImageUrl.length }}/{{ m_currentImgIndex }}</template>
|
</van-image-preview>
|
</div>
|
</div>
|
<!-- 说明 -->
|
<div
|
v-if="m_tabberActive == 'explain'"
|
style="width: 100%; height: 100%; background-color: #fff;overflow: auto;"
|
>
|
<videoPage :videosrc="m_VideoSrc" v-if="isShowVideoDetail"></videoPage>
|
<pdfPage :ishavetop="isShowVideoDetail" :pdf-src="m_PdfSrc" v-show="isShowPdfDetail"></pdfPage>
|
|
</div>
|
</div>
|
<!-- 底部tabber -->
|
<van-tabbar v-model="m_tabberActive" @change="onChangeTabberSelect">
|
<van-tabbar-item name="seriesList" icon="home-o">
|
<span>{{$t('ebookPage.list.TR')}}</span>
|
<template #icon>
|
<van-icon class="iconfont" class-prefix="iconplus-listview"></van-icon>
|
</template>
|
</van-tabbar-item>
|
<van-tabbar-item name="pictrue" icon="search">
|
<span>{{$t('ebookPage.modelDrawing.TR')}}</span>
|
<template #icon>
|
<van-icon class="iconfont" class-prefix="iconshiwutupian"></van-icon>
|
</template>
|
</van-tabbar-item>
|
<van-tabbar-item name="explain" icon="friends-o">
|
<span>{{$t('ebookPage.seriesDescription.TR')}}</span>
|
<template #icon>
|
<van-icon class="iconfont" class-prefix="iconxiangqing"></van-icon>
|
</template>
|
</van-tabbar-item>
|
</van-tabbar>
|
</div>
|
</template>
|
|
<script>
|
import UnitHelper from "@/utils/unit";
|
import waterMarkHelper from "@/utils/waterMarkHelper";
|
import ConstParas from "@/utils/constParas";
|
import pdfPage from "@/components/pdfPage.vue";
|
import videoPage from "@/components/videoPage.vue";
|
import languageMixin from "@/mixin/language";
|
export default {
|
mixins: [languageMixin],
|
data() {
|
return {
|
m_tabberActive: "seriesList", //tabber默认选中的项
|
m_ShowPictrue: false, //预览图片的状态
|
backtopshow: false, //返回顶部按钮是否显示
|
m_currentImgIndex: 1, //当前查看的图片的索引
|
|
m_ImageUrl: [], //存放图片路径的数组
|
m_ShowImageUrl: [], //用于展示的图片路径
|
|
m_activeNames: [], //默认展开的项 默认不展开
|
m_PumpSeriesID: "", //当前的泵系列id
|
m_PageTitle: "", //当前页面的名称
|
m_DetailFullList: [], //当前系列的详情列表
|
m_PumpList: [], //泵列表
|
m_ShowPumpList: [], //用于展示的泵列表
|
m_GroupList: [], //泵组名
|
m_ShowGroupList: [], //用于展示的泵组名
|
m_DpQuValue: "", //流量单位值
|
m_DpHuValue: "", //扬程单位值
|
m_DpQu: "", //流量单位
|
m_DpHu: "", //扬程单位
|
m_IsVisibleGroup: false, //是否显示分组的列表
|
m_IsVisibleList: false, //是否显示没有分组的列表
|
|
m_keyWords: "", //搜索关键字
|
|
m_PdfSrc: "", //pdf文件路径
|
m_ShowPdfSrc: "", //用于展示的pdf文件路径
|
|
m_VideoSrc: "", //视频路径
|
m_ShowVideoSrc: "", //用于展示的视频路径
|
|
m_3DSrc: "", //3d路径
|
m_Show3DSrc: "", //用于展示的3d路径
|
|
m_scrollTop: 0, // scroll高度
|
isShowPdfDetail: false, //是否显示pdf说明
|
isShowVideoDetail: false, //是否显示视频说明
|
|
isLoadingPicture: false, //判断是否加载了实物图
|
isLoadingDesc: false //判断是否加载了说明
|
};
|
},
|
components: {
|
pdfPage,
|
videoPage
|
},
|
mounted() {
|
//判断是否登录
|
var userID = this.$store.state.instante.account.UserID;
|
//console.log(this.$route.fullPath,372)
|
if (window.pageConfig.SeriesDetailPage.IsMustLogin) {
|
if (userID == null || userID == 0) {
|
this.m_isShowLoadingFrm = false;
|
this.$store.commit(
|
"instante/account/preLoginPageRoute",
|
this.$route.fullPath
|
);
|
this.$store.dispatch("instante/account/logout");
|
return;
|
}
|
}
|
|
this.m_PumpSeriesID = this.$route.query.ID;
|
|
this.initDetailFullInfo();
|
},
|
methods: {
|
//初始化详情信息
|
initDetailFullInfo(){
|
// console.log(JSON.parse(localStorage.getItem(this.$route.query.ID)),234)
|
let lacalData = JSON.parse(localStorage.getItem(this.m_PumpSeriesID))
|
// console.log(lacalData,244)
|
if(lacalData == null){
|
this.getDetailFullInfo();
|
return;
|
}
|
|
let currentDate = new Date().getTime()
|
if(currentDate > lacalData.ExpriesDate){
|
localStorage.removeItem(this.m_PumpSeriesID)
|
this.getDetailFullInfo();
|
return
|
}
|
let result = lacalData.resultData
|
// console.log(result,256)
|
this.m_PageTitle =result.SeriesInfo.Name;
|
document.title = this.m_PageTitle
|
|
if (result.SeriesInfo) {
|
this.m_DpQuValue = result.SeriesInfo.UnitQ;
|
this.m_DpHuValue = result.SeriesInfo.UnitH;
|
this.m_DpHu = UnitHelper.GetUnitNameH(
|
result.SeriesInfo.UnitH
|
);
|
this.m_DpQu = UnitHelper.GetUnitNameQ(
|
result.SeriesInfo.UnitQ
|
);
|
let imgUrl = result.SeriesInfo.RealPictFileName;
|
// console.log(imgUrl,271)
|
//添加图片水印
|
waterMarkHelper.addImage(imgUrl, null, base64Url => {
|
this.m_ImageUrl.push(base64Url);
|
});
|
|
let modelID = "";
|
if (result.SeriesInfo.Product3d) {
|
if (
|
result.SeriesInfo.Product3d.DispCtrl ==
|
ConstParas.Disp3dMethod.CAD_3DShowShow
|
) {
|
modelID = result.SeriesInfo.Product3d.Info;
|
this.m_3DSrc =
|
"http://www.3dxiuxiu.cn/web/view_admin.html?modelId=" +
|
modelID;
|
}
|
}
|
|
if (result.SeriesInfo.DescriptFileName) {
|
// _this.isShowPdfDetail = true;
|
this.m_PdfSrc = result.SeriesInfo.DescriptFileName;
|
}
|
if (result.SeriesInfo.VideoAddressContent) {
|
//console.log(result.Data.SeriesInfo.VideoAddressContent, 226);
|
this.isShowVideoDetail = true;
|
this.m_VideoSrc = result.SeriesInfo.VideoAddressContent;
|
}
|
}
|
|
if (result.GroupList && result.PumpList) {
|
this.m_GroupList = result.GroupList;
|
this.m_PumpList = this.calcValue(result.PumpList);
|
|
this.m_ShowGroupList = JSON.parse(
|
JSON.stringify(this.m_GroupList)
|
);
|
this.m_ShowPumpList = JSON.parse(
|
JSON.stringify(this.m_PumpList)
|
);
|
|
// console.log(_this.m_PumpList,325)
|
this.m_IsVisibleGroup = true;
|
this.m_IsVisibleList = false;
|
}
|
//判断如果没有组则不加载组
|
if (result.PumpList && result.GroupList == null) {
|
this.m_PumpList = this.calcValue(result.PumpList);
|
this.m_ShowPumpList = JSON.parse(
|
JSON.stringify(this.m_PumpList)
|
);
|
// console.log(_this.m_PumpList,334)
|
|
this.m_IsVisibleList = true;
|
this.m_IsVisibleGroup = false;
|
}
|
},
|
|
//获取详情信息
|
getDetailFullInfo() {
|
let _this = this;
|
_this.$toast.loading({
|
duration: 0, //为0时 不关闭toast框
|
message: "Loading...",
|
forbidClick: true
|
});
|
this.$axios({
|
methods: "get",
|
url:
|
this.$globalConfig.WebApiUrl.MainUrl +
|
"v1/Mobile/PumpSeries/GetDetailFullInfo",
|
params: {
|
ID: _this.m_PumpSeriesID,
|
Lang: "0"
|
}
|
})
|
.then(function(res) {
|
let result = res.data;
|
// console.log(result,349)
|
if (result.Code != 0) {
|
_this.$toast.clear();
|
return;
|
}
|
_this.$toast.clear(); //关闭toast
|
if (result.Data) {
|
// console.log(result.Data, 43);
|
//将数据存入缓存
|
let ExpriesDate = window.pageConfig.LocalStorageConfig.seriesDetail.ExpiresTime //失效时间设置为20分钟
|
// console.log(ExpriesDate,362)
|
let seriesDetailPumpData = {
|
resultData: result.Data || {},
|
ExpriesDate:ExpriesDate
|
}
|
localStorage.setItem(_this.m_PumpSeriesID,JSON.stringify(seriesDetailPumpData))
|
|
|
_this.m_PageTitle = result.Data.SeriesInfo.Name;
|
|
if (result.Data.SeriesInfo) {
|
_this.m_DpQuValue = result.Data.SeriesInfo.UnitQ;
|
_this.m_DpHuValue = result.Data.SeriesInfo.UnitH;
|
_this.m_DpHu = UnitHelper.GetUnitNameH(
|
result.Data.SeriesInfo.UnitH
|
);
|
_this.m_DpQu = UnitHelper.GetUnitNameQ(
|
result.Data.SeriesInfo.UnitQ
|
);
|
let imgUrl = result.Data.SeriesInfo.RealPictFileName;
|
// console.log(imgUrl,378)
|
//添加图片水印
|
waterMarkHelper.addImage(imgUrl, null, base64Url => {
|
_this.m_ImageUrl.push(base64Url);
|
});
|
|
// _this.m_ImageUrl.push(imgUrl);
|
|
let modelID = "";
|
if (result.Data.SeriesInfo.Product3d) {
|
if (
|
result.Data.SeriesInfo.Product3d.DispCtrl ==
|
ConstParas.Disp3dMethod.CAD_3DShowShow
|
) {
|
modelID = result.Data.SeriesInfo.Product3d.Info;
|
_this.m_3DSrc =
|
"http://www.3dxiuxiu.cn/web/view_admin.html?modelId=" +
|
modelID;
|
}
|
}
|
|
if (result.Data.SeriesInfo.DescriptFileName) {
|
// _this.isShowPdfDetail = true;
|
_this.m_PdfSrc = result.Data.SeriesInfo.DescriptFileName;
|
}
|
if (result.Data.SeriesInfo.VideoAddressContent) {
|
//console.log(result.Data.SeriesInfo.VideoAddressContent, 226);
|
_this.isShowVideoDetail = true;
|
_this.m_VideoSrc = result.Data.SeriesInfo.VideoAddressContent;
|
}
|
}
|
|
if (result.Data.GroupList && result.Data.PumpList) {
|
_this.m_GroupList = result.Data.GroupList;
|
_this.m_PumpList = _this.calcValue(result.Data.PumpList);
|
|
_this.m_ShowGroupList = JSON.parse(
|
JSON.stringify(_this.m_GroupList)
|
);
|
_this.m_ShowPumpList = JSON.parse(
|
JSON.stringify(_this.m_PumpList)
|
);
|
|
|
// console.log(_this.m_PumpList,325)
|
_this.m_IsVisibleGroup = true;
|
_this.m_IsVisibleList = false;
|
}
|
//判断如果没有组则不加载组
|
if (result.Data.PumpList && result.Data.GroupList == null) {
|
_this.m_PumpList = _this.calcValue(result.Data.PumpList);
|
_this.m_ShowPumpList = JSON.parse(
|
JSON.stringify(_this.m_PumpList)
|
);
|
// console.log(_this.m_PumpList,334)
|
|
_this.m_IsVisibleList = true;
|
_this.m_IsVisibleGroup = false;
|
}
|
|
}
|
// console.log(res, 43);
|
})
|
.catch(function(err) {
|
_this.$toast.clear();
|
console.log(err);
|
});
|
},
|
//监听tabber的选择
|
onChangeTabberSelect(index) {
|
if (index == "pictrue" && !this.isLoadingPicture) {
|
this.m_ShowImageUrl = this.m_ImageUrl;
|
this.m_Show3DSrc = this.m_3DSrc;
|
this.isLoadingPicture = true;
|
}
|
if (index == "explain" && !this.isLoadingDesc) {
|
this.m_ShowPdfSrc = this.m_PdfSrc;
|
this.m_ShowVideoSrc = this.m_VideoSrc;
|
this.$nextTick(function(){
|
this.isShowPdfDetail = true;
|
})
|
this.isLoadingDesc = true;
|
|
}
|
//console.log(index);
|
},
|
//
|
onChangeImgSelect(index) {
|
//console.log(index, 186);
|
this.m_currentImgIndex = index + 1;
|
},
|
//监听搜索框关键字的内容
|
inputKeyWords(val) {
|
this.filterSearchWords(val);
|
},
|
//清除搜索关键字
|
clearKeyWords() {
|
this.filterSearchWords(this.m_keyWords);
|
},
|
//根据搜索的关键此筛选
|
filterSearchWords(keyWords) {
|
let _this = this;
|
|
let groupList = _this.m_GroupList;
|
let pumpList = _this.m_PumpList;
|
if (_this.m_IsVisibleGroup && _this.m_IsVisibleList == false) {
|
if (keyWords && keyWords.length > 0) {
|
//模糊查询
|
let reg = new RegExp(keyWords, "i");
|
let group = [];
|
let pump = [];
|
groupList.forEach(item => {
|
if (reg.test(item.Name)) {
|
group.push(item);
|
pumpList.forEach(pumpItem => {
|
if (item.ID == pumpItem.GroupID) {
|
pump.push(pumpItem);
|
}
|
});
|
}
|
});
|
_this.m_ShowGroupList = group;
|
_this.m_ShowPumpList = pump;
|
|
//console.log(group,pump,371)
|
} else {
|
_this.m_ShowGroupList = _this.m_GroupList;
|
_this.m_ShowPumpList = _this.m_PumpList;
|
}
|
}
|
|
if (_this.m_IsVisibleGroup == false && _this.m_IsVisibleList) {
|
if (keyWords && keyWords.length > 0) {
|
//模糊查询
|
let reg = new RegExp(keyWords, "i");
|
let pump = [];
|
// console.log(pumpList,516)
|
pumpList.forEach(pumpItem => {
|
if (reg.test(pumpItem.PumpName)) {
|
pump.push(pumpItem);
|
}
|
});
|
_this.m_ShowPumpList = pump;
|
// console.log( _this.m_ShowPumpList,524)
|
} else {
|
_this.m_ShowPumpList = _this.m_PumpList;
|
}
|
}
|
},
|
//流量 、扬程值 转换
|
calcValue(List) {
|
List.forEach(element => {
|
//判断电机功率是否为空
|
if(element.MotorPower != null && element.MotorPower != ""){
|
if(element.MotorPower.indexOf("kW") != -1){
|
element.MotorPower = "电机功率:" + element.MotorPower
|
}else {
|
element.MotorPower = "电机功率:" + element.MotorPower + "kW"
|
}
|
}
|
element.RatedQ = UnitHelper.valueFormat(
|
UnitHelper.getDispValueQ(
|
UnitHelper.ConvertQ_fromM3H(
|
this.m_DpQuValue,
|
parseFloat(element.RatedQ)
|
)
|
)
|
);
|
element.RatedH = UnitHelper.valueFormat(
|
UnitHelper.getDispValueH(
|
UnitHelper.ConvertH_fromM(
|
this.m_DpHuValue,
|
parseFloat(element.RatedH)
|
)
|
)
|
);
|
});
|
return List;
|
},
|
//监听列表的scroll 距离顶部的高度
|
divScroll(div) {
|
//console.log(div.target.scrollTop, 335);
|
let top = div.target.scrollTop;
|
this.m_scrollTop = top;
|
//console.log(top, 336);
|
if (top > 450) {
|
this.backtopshow = true;
|
} else {
|
this.backtopshow = false;
|
}
|
},
|
//跳转到详情界面
|
toDetail(ID) {
|
// console.log(ID)
|
let query = {
|
SID: this.m_PumpSeriesID,
|
PID: ID,
|
from: ConstParas.DetailPageFrom.EBook,
|
pur: ConstParas.DetailPagePurpose.EBook //EBook = 0
|
};
|
this.gotoPage("/byParas/Index",query,null)
|
},
|
//回到顶部点击事件
|
backTop() {
|
let _this = this;
|
let timer = setInterval(function() {
|
//用于设置速度差，产生缓动的效果
|
if (_this.$refs.seriesCtr.scrollTop > 0) {
|
var speed = 100;
|
_this.$refs.seriesCtr.scrollTop = _this.m_scrollTop - speed;
|
} else {
|
clearInterval(timer);
|
}
|
}, 30);
|
},
|
//返回上一页
|
pageBack() {
|
this.$router.go(-1);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.seriesDetail-box {
|
background: #fafafa;
|
width: 100%;
|
height: 100vh;
|
.seriesDetailMain {
|
width: 100%;
|
height: calc(100% - 97px);
|
.van-cell {
|
font-size: 16px;
|
position: relative;
|
}
|
.van-cell__title {
|
color: #528abe;
|
text-align: start;
|
}
|
.van-cell__right-icon {
|
color: #528abe;
|
}
|
.van-collapse-item__content {
|
padding: unset;
|
}
|
.van-cell--large .van-cell__title {
|
font-size: 14px;
|
}
|
.item_font {
|
font-size: 12px;
|
margin-right: 10px;
|
}
|
.xinhao_box {
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
background-color: #ffffff;
|
}
|
.pictrue_box {
|
width: 100%;
|
height: 100%;
|
background-color: #ffffff;
|
img {
|
max-width: 100%;
|
max-height: 100%;
|
width: auto;
|
height: auto;
|
}
|
}
|
.backTop {
|
position: fixed;
|
width: 50px;
|
height: 50px;
|
right: 10px;
|
bottom: 100px;
|
border-radius: 100%;
|
text-align: center;
|
background-color: #528abe;
|
color: #fff;
|
opacity: 0.8;
|
}
|
|
.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;
|
}
|
.van-cell--clickable {
|
cursor: pointer;
|
padding: 15px 16px;
|
}
|
}
|
.bg-gray{
|
background-color: #f1f2f3;
|
}
|
.bg-white{
|
background-color: #ffffff;
|
}
|
.van-collapse-item__title{
|
background-color: transparent;
|
}
|
}
|
</style>
|
