<template>
|
<div
|
style="width: 100%; height: 100%; background: #f8f8f8; position: absolute"
|
>
|
<van-form style="padding: 1em">
|
<van-cell-group inset style="padding: 0.8em 0">
|
<!-- 连接面形式 -->
|
<van-field
|
v-if="false"
|
v-model="m_ConnectingSurface"
|
is-link
|
readonly
|
name="picker"
|
label="连接面形式"
|
placeholder="点击选择连接面形式"
|
@click="showConnectingSurfacePicker = true"
|
/>
|
<van-popup v-model:show="showConnectingSurfacePicker" position="bottom">
|
<van-picker
|
:columns="m_ConnectingSurfaceColumns"
|
@confirm="onConnectFaceConfirm"
|
@cancel="showConnectingSurfacePicker = false"
|
/>
|
</van-popup>
|
<!-- 公称压力PN -->
|
<van-field
|
v-model="m_currentPressGrade"
|
is-link
|
readonly
|
name="picker"
|
label="公称压力PN"
|
placeholder="点击选择公称压力PN"
|
@click="showStandardPressGradePicker = true"
|
/>
|
<van-popup
|
v-model:show="showStandardPressGradePicker"
|
position="bottom"
|
>
|
<van-picker
|
:columns="m_allPressGradeList"
|
@confirm="onPressGradeConfirm"
|
@cancel="showStandardPressGradePicker = false"
|
/>
|
</van-popup>
|
<!-- 公称直径DN -->
|
<van-field
|
v-model="m_currentSizeCode"
|
:is-link="m_currentPressGrade.length > 0"
|
:disabled="!m_currentPressGrade.length > 0"
|
readonly
|
name="picker"
|
label="公称直径DN"
|
placeholder="点击选择公称直径DN"
|
@click="clickShowSizeCode"
|
/>
|
<van-popup v-model:show="showSizeCodeListPicker" position="bottom">
|
<van-picker
|
:columns="m_allSizeCodeListList"
|
@confirm="onSizeCodeConfirm"
|
@cancel="showSizeCodeListPicker = false"
|
/>
|
</van-popup>
|
</van-cell-group>
|
<!-- <div style="margin: 16px">
|
<van-button
|
round
|
block
|
type="primary"
|
color="#16b5cb"
|
@click="getSizeDetailData"
|
>查询</van-button
|
>
|
</div> -->
|
</van-form>
|
<van-notice-bar
|
left-icon="volume-o"
|
color="#ffffff"
|
background="#39b5de90"
|
text="单指按住屏幕可移动模型视角,双指按住屏幕可拖动模型位置,双指按住屏幕可放大模型"
|
/>
|
<van-tabs v-model:active="activeIndexTab">
|
<van-tab title="三维模型">
|
<div style="border: 1px solid #ccc; border-radius: 10px; margin: 5px">
|
<model3D
|
:isMobile="true"
|
style="width: 100%; height: 560px"
|
ref="model3dCtrl"
|
></model3D>
|
</div>
|
</van-tab>
|
<van-tab title="信息详细">
|
<van-cell-group inset style="margin-top: 16px">
|
<!-- m_modelSizeDetail -->
|
<van-cell title="名义口径" :value="m_modelSizeDetail.DiaCode" />
|
<van-cell title="内径" :value="m_modelSizeDetail.DiaInner" />
|
<van-cell title="外部直径" :value="m_modelSizeDetail.DiaOuter" />
|
<van-cell title="厚度" :value="m_modelSizeDetail.Thickness4Disp" />
|
<van-cell title="孔数" :value="m_modelSizeDetail.ThreadHoleNumber" />
|
<van-cell
|
title="孔定位直径"
|
:value="m_modelSizeDetail.ThreadHolePosiDia"
|
/>
|
<van-cell title="孔径" :value="m_modelSizeDetail.ThreadHoleSizeDia" />
|
</van-cell-group>
|
</van-tab>
|
<van-tab title="工程图">
|
<van-image src="default" style="min-height: 200px" fit="scale-down">
|
<template v-slot:error>数据整理中</template>
|
</van-image>
|
</van-tab>
|
</van-tabs>
|
</div>
|
</template>
|
|
<script>
|
import model3D from "@/components/model3DContainer.vue";
|
export default {
|
data() {
|
return {
|
m_ConnectingSurface: "",
|
m_ConnectingSurfaceColumns: [
|
"平面",
|
"突面",
|
"凹凸面",
|
"榫槽面",
|
"环连接面",
|
],
|
showConnectingSurfacePicker: false,
|
showStandardPressGradePicker: false,
|
showSizeCodeListPicker: false,
|
|
m_currentStandard: 1, //路由中获取的standardID
|
m_currentPressGrade: "",
|
m_currentSizeCode: "",
|
m_currentModelName: "",
|
m_allPressGradeList: [],
|
|
m_allSizeCodeListList: [],
|
|
m_modelSizeDetail: {},
|
|
activeIndexTab: 0,
|
};
|
},
|
components: {
|
model3D,
|
},
|
mounted() {
|
let standard = this.$route.query.Standard;
|
let flangeName= this.$route.query.FlangeName
|
if (standard == undefined || standard == null) {
|
standard = 1;
|
}
|
this.m_currentStandard = standard;
|
|
if(flangeName == "" || flangeName == undefined){
|
flangeName = "法兰计算"
|
}
|
document.title = flangeName
|
//.log("currentStandard", standard);
|
this.$nextTick(function () {
|
this.initailPressGrade();
|
});
|
},
|
methods: {
|
//初始化压力等级
|
initailPressGrade() {
|
let _this = this;
|
let Toast = _this.$toast
|
Toast.loading({
|
duration: 0, //为0时 不关闭toast框
|
message: "Loading...",
|
forbidClick: true
|
});
|
_this
|
.$axios({
|
method: "get",
|
url: "https://apiv3.xpump.net/" + "v1/Flange/GetStandardPressGrade",
|
params: {
|
Lang: 0,
|
Standard: _this.m_currentStandard,
|
},
|
})
|
.then((res) => {
|
Toast.clear();
|
// console.log(res,91)
|
if (res.data.Code != 0) {
|
Toast.fail('获取压力等级失败');
|
return;
|
}
|
|
_this.m_allPressGradeList = res.data.Data;
|
_this.m_currentPressGrade = res.data.Data[0];
|
|
_this.initialSizeCodeList();
|
})
|
.catch((err) => {
|
Toast.clear();
|
Toast.fail('请求数据失败');
|
console.log(err);
|
});
|
},
|
//初始化尺寸列表
|
initialSizeCodeList() {
|
let _this = this;
|
_this
|
.$axios({
|
method: "get",
|
url: "https://apiv3.xpump.net/" + "v1/Flange/GetSizeCodeList",
|
params: {
|
Lang: 0,
|
Standard: _this.m_currentStandard,
|
PressGrade: _this.m_currentPressGrade,
|
},
|
})
|
.then((res) => {
|
if (res.data.Code != 0) {
|
return;
|
}
|
_this.m_allSizeCodeListList = res.data.Data;
|
_this.m_currentSizeCode = res.data.Data[0];
|
_this.getSizeDetailData();
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
|
clickShowSizeCode() {
|
if (this.m_currentPressGrade.length > 0) {
|
this.showSizeCodeListPicker = true;
|
}
|
return;
|
},
|
onConnectFaceConfirm(e) {
|
this.m_ConnectingSurface = e;
|
this.showConnectingSurfacePicker = false;
|
},
|
onPressGradeConfirm(e) {
|
this.m_currentPressGrade = e;
|
this.showStandardPressGradePicker = false;
|
|
this.initialSizeCodeList();
|
},
|
onSizeCodeConfirm(e) {
|
this.m_currentSizeCode = e;
|
this.showSizeCodeListPicker = false;
|
this.getSizeDetailData();
|
},
|
//获取模型size数据
|
getSizeDetailData() {
|
let _this = this;
|
let Toast = this.$toast;
|
Toast.loading({
|
duration: 0, //为0时 不关闭toast框
|
message: "Loading...",
|
forbidClick: true,
|
});
|
|
_this
|
.$axios({
|
method: "get",
|
url: "https://apiv3.xpump.net/" + "v1/Flange/GetSizeDetail",
|
params: {
|
Lang: 0,
|
Standard: _this.m_currentStandard,
|
PressGrade: _this.m_currentPressGrade,
|
SizeCode: _this.m_currentSizeCode,
|
},
|
})
|
.then((res) => {
|
Toast.clear();
|
|
if (res.data.Code != 0) {
|
Toast.fail("查询失败");
|
return;
|
}
|
if (res.data.Data == null) {
|
Toast.fail("未查询到数据");
|
return;
|
}
|
|
_this.m_modelSizeDetail = res.data.Data;
|
if (
|
_this.m_modelSizeDetail.Thickness &&
|
_this.m_modelSizeDetail.Thickness > 0.1
|
) {
|
_this.m_modelSizeDetail.Thickness4Disp =
|
" " + _this.m_modelSizeDetail.Thickness;
|
} else {
|
_this.m_modelSizeDetail.Thickness4Disp = " ";
|
}
|
_this.buildModel();
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
buildModel() {
|
var _this = this;
|
var size_detail = this.m_modelSizeDetail;
|
let ThreadHoleNumber = size_detail.ThreadHoleNumber;
|
var module_name = "demo" + ThreadHoleNumber + ".fbx";
|
if (this.m_currentModelName != module_name) {
|
//默认样式
|
var model_style = {};
|
model_style.background = {};
|
model_style.background.color = "white";
|
this.$refs.model3dCtrl.setStyleSetting(model_style);
|
model_style.graphic = {};
|
model_style.graphic.color = "#457096";
|
this.$refs.model3dCtrl.setStyleSetting(model_style);
|
model_style.dimention = {};
|
model_style.dimention.color = "#191970";
|
this.$refs.model3dCtrl.setStyleSetting(model_style);
|
|
this.$refs.model3dCtrl.loadModel(
|
"https://apiv3.xpump.net/Data/Flange/" + module_name,
|
true,
|
function () {
|
//console.log(size_detail);
|
_this.buildModelDimList();
|
}
|
);
|
} else {
|
_this.buildModelDimList();
|
}
|
},
|
buildModelDimList() {
|
var size_detail = this.m_modelSizeDetail;
|
|
var dim_list = [];
|
dim_list.push({ ID: "D", Value: "Φ" + size_detail.DiaOuter });
|
dim_list.push({
|
ID: "K",
|
Value: "Φ" + size_detail.ThreadHolePosiDia,
|
});
|
|
dim_list.push({
|
ID: "C",
|
Value: size_detail.Thickness4Disp,
|
});
|
|
dim_list.push({
|
ID: "n×L",
|
Value:
|
size_detail.ThreadHoleNumber + "x" + size_detail.ThreadHoleSizeDia,
|
});
|
dim_list.push({
|
ID: "DN",
|
Value: size_detail.DiaCode,
|
});
|
//.log(dim_list)
|
this.$refs.model3dCtrl.updateSizeValue(dim_list);
|
this.$refs.model3dCtrl.setDimDisplay(true);
|
},
|
},
|
};
|
</script>
|
|
<style>
|
</style>
|
