<template>
|
<div class="materialmanager">
|
<!-- <el-button size="mini" type="primary" style="margin:10px" @click="getMaterialCaseList">读取材质</el-button> -->
|
<!-- <el-switch style="margin:10px" v-model="showMaterialCaseList" active-color="#3384C6" inactive-color="#BEC2C6"
|
active-text="材质模式" inactive-text="普通模式" @change="startMaterialModel">
|
</el-switch> -->
|
<div v-if="showMaterialCaseList" class="material-card scrollbar" shadow="never">
|
<div>
|
<div class="btnMaterial" style="width cursor: pointer;" @click="createMaterialCase">
|
创建材质
|
</div>
|
</div>
|
<el-divider style="margin-left:-5px"></el-divider>
|
<div class="scrollbar tabletrtd">
|
<el-table :data="materialCaseDatas" style="width:100%" :show-header="false" size="mini" ref="caseTableRef"
|
height="230" v-loading="defaultLoaded" highlight-current-row @row-dblclick="handleCaseMaterialEdit"
|
class="scrollbar" @current-change="handleCaseChange"
|
:cell-style="{
|
'text-align': 'center',
|
'background': '#245e9e !important',
|
'color': '#ffffff',
|
'border': 'none !important',
|
'border-bottom': '1px solid #eee !important',}"
|
>
|
<el-table-column width="40"><template slot-scope="scope">
|
<el-radio :label="scope.row.id" v-model="currentCaseId"><span></span></el-radio>
|
</template>
|
</el-table-column>
|
<el-table-column width="138">
|
<template slot-scope="scope">
|
<div :style="{ color: (scope.row.selected ? 'green' : '') }">
|
<span v-if="!scope.row.showInput"> {{ scope.row.name }}</span>
|
<el-input size="mini" v-else v-model="scope.row.name" @focus="focus($event)"
|
:id="`input-case-name${scope.row.id}`" @blur="alters(scope.row)">
|
</el-input>
|
</div>
|
<div :style="{ color: (scope.row.selected ? 'green' : '') }">
|
{{ scope.row.createTime }}<span v-show="scope.row.selected" style="margin-left:10px"> <i
|
class="el-icon-magic-stick"></i> </span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column width="100" header-align="center" align="right" label="操作">
|
<template slot-scope="scope">
|
<el-button v-show="scope.row.id !== 0" @click.native.prevent="editCase(scope.row)" type="text" size="small">
|
<i class="el-icon-edit"></i>
|
</el-button>
|
<el-button @click.native.prevent="deleteCase(scope.row)" type="text" size="small"
|
v-show="scope.row.id !== 0">
|
<i class="el-icon-delete"></i>
|
</el-button>
|
<el-button @click.native.prevent="setDefaultCase(scope.row)" type="text" size="small">
|
使用
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div class="drag_blue scrollbar" v-draw v-if="showMaterialEditor">
|
<div class="scrollbar" style="overflow-y: auto; width: 99%;">
|
<div class="treeTitle">
|
<div class="zhTitle">材质编辑</div>
|
</div>
|
<div style="cursor: pointer;color:#fff;position:absolute;right:15px;top:10px" @click="hideMaterialEditor"><i class="el-icon-close"></i></div>
|
<!-- <div slot="header" style="font-size:16px;font-weight:800">
|
<i class="el-icon-share"></i>
|
<span>材质编辑</span>
|
<div style="cursor: pointer; float: right;color:#fff" @click="hideMaterialEditor">
|
<i class="el-icon-close"></i>
|
</div>
|
</div> -->
|
<div>
|
<div style=" display: flex; justify-content:center;">
|
<div class="mBtnSelect" :class="{ mBtnSelect_Checked: isstartPick === true }" style="text-align:center"
|
@click="startPickMaterial">
|
<img src="../../../assets/img/xiguan.png" style="height:26px" />
|
<div style="color:#fff">选择材质</div>
|
</div>
|
<el-input size="mini" style="width:140px;margin-left:12px" placeholder="材质名称" v-model="materialname" disabled>
|
</el-input>
|
|
<div style="text-align:center; margin-left:12px">
|
<div style="width:24px;height:24px; margin:0px auto;border:1px solid #E9E9E9" id="material_color_div"
|
v-bind:style="{ 'background-color': materialcolorsHexStr }">
|
</div>
|
<div style="margin-top:15px" class="btnBackDefault" @click="back2Default(1)"><span href="#"
|
style="margin-top:15px;color:#fff">颜色复位</span>
|
</div>
|
</div>
|
<div style="text-align:center; margin-left:12px">
|
<div style="width:24px;height:24px; margin:0px auto;">
|
<img v-if="currentTextureSrc !== ''" :src="currentTextureSrc" style="width:100%;height:100%" />
|
|
<img v-else src="../../../assets/img/产业.png" style="width:100%;height:100%" />
|
</div>
|
<div style="margin-top:15px" class="btnBackDefault" @click="back2Default(2)"><span href="#"
|
style="margin-top:17px;color:#fff">贴图复位</span></div>
|
</div>
|
</div>
|
<el-divider></el-divider>
|
<div style="width:100%; ">
|
<div style="color:#fff;margin-left:20px">颜色选择</div>
|
<sketch-picker :value="materialcolors" @input="updateColorValue"
|
style="margin:0px auto;width:320px; "></sketch-picker>
|
</div>
|
<el-divider></el-divider>
|
<div style="color:#fff">
|
<div style="margin-left:20px">贴图选择</div>
|
<div style="width:100%; display: flex;flex-flow:row wrap; justify-content:center;">
|
<div class="mBtn" @click="getMaterialPicture(1)" :class="{ mBtn_Checked: currentTextureType === 1 }">
|
<div><i class=" el-icon-film"></i></div>
|
<span>混凝土</span>
|
</div>
|
<div class="mBtn" @click="getMaterialPicture(2)" :class="{ mBtn_Checked: currentTextureType === 2 }">
|
<div><i class=" el-icon-film"></i></div>
|
<span>地面</span>
|
</div>
|
<div class="mBtn" @click="getMaterialPicture(3)" :class="{ mBtn_Checked: currentTextureType === 3 }">
|
<div><i class=" el-icon-film"></i></div>
|
<span>墙面</span>
|
</div>
|
<div class="mBtn" @click="getMaterialPicture(4)" :class="{ mBtn_Checked: currentTextureType === 4 }">
|
<div><i class=" el-icon-film"></i></div>
|
<span>砖石</span>
|
</div>
|
<div class="mBtn" @click="getMaterialPicture(5)" :class="{ mBtn_Checked: currentTextureType === 5 }">
|
<div><i class=" el-icon-film"></i></div>
|
<span>瓷砖</span>
|
</div>
|
<div class="mBtn" @click="getMaterialPicture(6)" :class="{ mBtn_Checked: currentTextureType === 6 }">
|
<div><i class=" el-icon-film"></i></div>
|
<span>金属</span>
|
</div>
|
<div class="mBtn" @click="getMaterialPicture(7)" :class="{ mBtn_Checked: currentTextureType === 7 }">
|
<div><i class=" el-icon-film"></i></div>
|
<span>木质</span>
|
</div>
|
<div class="mBtn" @click="getMaterialPicture(8)" :class="{ mBtn_Checked: currentTextureType === 8 }">
|
<div><i class=" el-icon-film"></i></div>
|
<span>屋面</span>
|
</div>
|
<div class="mBtn" @click="getMaterialPicture(9)" :class="{ mBtn_Checked: currentTextureType === 9 }">
|
<div><i class=" el-icon-film"></i></div>
|
<span>布料</span>
|
</div>
|
<div class="mBtn" @click="getMaterialPicture(10)" :class="{ mBtn_Checked: currentTextureType === 10 }">
|
<div><i class=" el-icon-film"></i></div>
|
<span>皮革</span>
|
</div>
|
</div>
|
<div
|
style="overflow-y: auto;width:100%;height:200px;background-color:#224560;display: flex;flex-flow:row wrap; justify-content: flex-start;"
|
class="scrollbar">
|
<div v-for="(item, index) in currentTextureData" :key="index">
|
<div class="mBtn2" @click="setMaterialPicture(item)"
|
:class="{ mBtn_Checked: currentTextureId === item.id }">
|
<div><img :src="'../../../../CimSDK/Assets/Textures/PBRRepo' + item.preview.substr(1)"
|
style="width:40px;height:40px" /></div>
|
<span style="font-size:10px">{{ item.rname ? item.rname : item.name }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
//import { fromStringWithSourceMap } from "source-list-map";
|
import { Sketch } from "vue-color";
|
import { getCaseList, saveCase, updateCase, deleteCase, getMaterialByCaseId, saveOrUpdateMaterial, setDefaultCase } from "@/api/materialApi.js"
|
export default {
|
components: { "sketch-picker": Sketch },
|
data() {
|
this.leftclickHandler = null;
|
return {
|
showMaterialCaseList: false,
|
materialcolorsHexStr: "#CCC",
|
materialname: "",
|
modelMaterialObjects: {},
|
modelMaterialDefaultObjects: {},
|
currentSelectedMaterialId: "",//当前Pick材质id
|
isstartPick: false,
|
currentTextureType: -1,
|
currentTextureData: [],
|
currentTextureId: "",//当前纹理贴图id
|
currentTextureSrc: "",
|
showMaterialEditor: false,
|
currentCaseId: 0,
|
materialcolors: {
|
color: "",
|
hex: "#194d33",
|
hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
|
hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
|
rgba: { r: 25, g: 77, b: 51, a: 1 },
|
a: 1,
|
},
|
defaultMaterialCaseDatas: [{ id: 0, name: "默认方案", createTime: "2022-02-01" }],
|
materialCaseDatas: [{ id: 0, name: "默认方案", createTime: "2022-02-01" }],
|
textureCfg: {
|
hnt: [],
|
dm: [],
|
qm: [],
|
zs: [],
|
cz: [],
|
js: [],
|
mz: [],
|
wm: [],
|
bl: [],
|
pg: [],
|
all: [],
|
},
|
defaultLoaded: false,
|
currentClickModelId: ''
|
}
|
},
|
methods: {
|
back2Normal() {
|
this.showMaterialCaseList = false;
|
},
|
startMaterialModel(val) {
|
if (val === true) {
|
this.getMaterialCaseList();
|
} else {
|
this.$nextTick(() => {
|
if (this.materialCaseDatas.length > 0)
|
this.$refs.caseTableRef.setCurrentRow(this.materialCaseDatas[0]);
|
this.showMaterialCaseList = false;
|
})
|
this.hideMaterialEditor()
|
this.initialMaterialEditor({ id: 0 })
|
}
|
},
|
getMaterialCaseList() {
|
let modelIds = this.$store.state.bimModelLoaded;
|
if (modelIds.length > 0) {
|
this.showMaterialCaseList = true;
|
let param = { modelId: modelIds.sort().join(',') }
|
getCaseList(param).then((res => {
|
console.log(res)
|
if (res.code === 200) {
|
res.data.forEach((d) => {
|
d.createTime = d.createTime?.substring(0, d.createTime.indexOf(" "))
|
})
|
this.materialCaseDatas = [...this.defaultMaterialCaseDatas, ...res.data];
|
this.materialCaseDatas.forEach((d) => {
|
if (d.selected === true) {
|
this.$refs.caseTableRef.setCurrentRow(d);
|
// this.handleCaseChange(d);
|
}
|
})
|
}
|
}));
|
} else {
|
this.$message.error("当前未加载CIM模型。")
|
}
|
},
|
|
reset() {
|
this.isstartPick = false;
|
this.currentTextureType = -1;
|
this.currentTextureData = [];
|
this.currentTextureId = "";
|
this.currentSelectedMaterialId = "";
|
if (window.changeCursor) {
|
window.changeCursor(false);
|
}
|
window.sgworld.coreMap.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
},
|
handleCaseChange(row) {
|
if (!row) {
|
return
|
}
|
this.currentCaseId = row.id;
|
//初始化加载材质方案编辑器
|
this.initialMaterialEditor(row)
|
},
|
|
initialMaterialEditor(row) {
|
//默认方案
|
//读取记录下的所有默认材质提交到模型
|
let modelIds = this.$store.state.bimModelLoaded;
|
this.modelMaterialDefaultObjects = {};
|
if (modelIds.length > 0) {
|
for (let i = 0; i < modelIds.length; i++) {
|
let modelId = modelIds[i];
|
window.BIM.CancelMaterialEdit(modelId);
|
}
|
if (row.id !== 0) {
|
//后台服务未写---待定
|
let param = { caseId: row.id }
|
this.defaultLoaded = true;
|
getMaterialByCaseId(param).then((res) => {
|
if (res.code === 200) {
|
for (let i = 0; i < modelIds.length; i++) {
|
let modelId = modelIds[i];
|
if (res.data) {
|
let mObjs2 = res.data;
|
for (let j = 0; j < mObjs2.length; j++) {
|
let mObj2 = mObjs2[j];
|
this.modelMaterialDefaultObjects[modelId + ":" + mObj2.materialId] = mObj2;
|
window.BIM.SetMaterialTexture(modelId, mObj2.materialId, mObj2.textureId);
|
if (mObj2.red && mObj2.green && mObj2.blue && mObj2.alpha)
|
window.BIM.SetMaterialColor(modelId, Number(mObj2.materialId), [Number(mObj2.red), Number(mObj2.green), Number(mObj2.blue), Number(mObj2.alpha)]);
|
|
}
|
}
|
}
|
}
|
this.defaultLoaded = false;
|
})
|
}
|
}
|
|
},
|
handleCaseMaterialEdit(row) {
|
if (row.id !== 0) {
|
if (this.textureCfg.hnt.length === 0) {
|
this.initTextureData();
|
}
|
this.showMaterialEditor = true;
|
|
this.reset();
|
}
|
},
|
createMaterialCase() {
|
let modelIds = this.$store.state.bimModelLoaded;
|
if (modelIds.length > 0) {
|
let param = { modelId: modelIds.sort().join(',') };
|
saveCase(param).then((res) => {
|
if (res.code === 200) {
|
getCaseList(param).then((res2 => {
|
if (res2.code === 200) {
|
res2.data.forEach((d) => {
|
d.createTime = d.createTime?.substring(0, d.createTime.indexOf(" "))
|
})
|
this.materialCaseDatas = [...this.defaultMaterialCaseDatas, ...res2.data];
|
}
|
}))
|
}
|
})
|
}
|
|
},
|
editCase(row) {
|
this.$set(row, 'showInput', true)
|
this.$nextTick(() => {
|
$("#input-case-name" + row.id).focus();
|
})
|
},
|
setDefaultCase(row) {
|
this.materialCaseDatas.forEach((item) => {
|
// if (row.id === item.id) {
|
// this.$set(item, 'selected', true);
|
// } else {
|
this.$set(item, 'selected', false);
|
// }
|
});
|
|
let modelIds = this.$store.state.bimModelLoaded;
|
if (modelIds.length > 0) {
|
let param = { modelId: modelIds.sort().join(',') };
|
param.caseId = row.id;
|
setDefaultCase(param).then(() => { })
|
}
|
|
},
|
focus(event) {
|
event.currentTarget.select()
|
},
|
//失去焦点后
|
alters(row) {
|
let that = this;
|
row.showInput = !row.showInput
|
//ajax 提交 row.caseName
|
if (!row.name || row.name.trim() === "") {
|
this.$message.error("材质方案名不能为空！")
|
return;
|
}
|
updateCase({ id: row.id, name: row.name });
|
},
|
deleteCase(row) {
|
this.$confirm("确认删除该材质方案么?", "删除", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
deleteCase({ id: row.id }).then((res) => {
|
if (res.code === 200) {
|
let modelIds = this.$store.state.bimModelLoaded;
|
if (modelIds.length > 0) {
|
let param = { modelId: modelIds.sort().join(',') };
|
getCaseList(param).then((res2 => {
|
if (res2.code === 200) {
|
res2.data.forEach((d) => {
|
d.createTime = d.createTime?.substring(0, d.createTime.indexOf(" "))
|
})
|
this.materialCaseDatas = [...this.defaultMaterialCaseDatas, ...res2.data];
|
this.$refs.caseTableRef.setCurrentRow(this.materialCaseDatas[0]);
|
this.initialMaterialEditor({ id: 0 })
|
this.hideMaterialEditor()
|
}
|
}))
|
}
|
}
|
});
|
}).catch(() => { });
|
|
},
|
hideMaterialEditor() {
|
this.showMaterialEditor = false;
|
this.reset();
|
// $("#sdkContainer").css("cursor", "");
|
},
|
|
//鼠标吸取材质事件
|
onLeftClick(movement) {
|
let bim = window.BIM;
|
let modelIdAndInstancesId = bim.PickIdSync(movement.position.x, movement.position.y);
|
let modelId = modelIdAndInstancesId[0];
|
let materialId = modelIdAndInstancesId[3];
|
console.log("modelId:" + modelId + "materialId:" + materialId);
|
|
let _this = this;
|
//modelId=0没有点到模型-------------
|
if (modelId !== 0) {
|
this.currentClickModelId = modelId
|
//根据模型id获取当前模型默认材质列表
|
window.BIM.GetMaterial(modelId, materialId).then((res) => {
|
_this.materialname = res.name;
|
//判断是否有材质，没有就新创建一个
|
if (materialId) {
|
_this.currentSelectedMaterialId = materialId;
|
let mObjs;
|
_this.currentTextureSrc = "";
|
if (this.currentCaseId !== 0 && this.modelMaterialDefaultObjects.hasOwnProperty(modelId + ":" + materialId)) {
|
mObjs = this.modelMaterialDefaultObjects[modelId + ":" + materialId];
|
_this.materialcolorsHexStr = this.colorRGB2Hex(mObjs.red * 255, mObjs.green * 255, mObjs.blue * 255, mObjs.alpha * 255);
|
for (let i = 0; i < _this.textureCfg.all.length; i++) {
|
if (_this.textureCfg.all[i].id === mObjs.textureId) {
|
_this.currentTextureSrc = '../../../../CimSDK/Assets/Textures/PBRRepo' + _this.textureCfg.all[i].preview.substr(1);
|
break;
|
}
|
}
|
|
} else {
|
mObjs = res;
|
_this.materialcolorsHexStr = this.colorRGB2Hex(mObjs.color[0] * 255, mObjs.color[0] * 255, mObjs.color[0] * 255, mObjs.color[3] * 255)
|
for (let i = 0; i < _this.textureCfg.all.length; i++) {
|
if (_this.textureCfg.all[i].id === mObjs.textureId) {
|
_this.currentTextureSrc = '../../../../CimSDK/Assets/Textures/PBRRepo' + _this.textureCfg.all[i].preview.substr(1);
|
break;
|
}
|
}
|
}
|
} else {
|
// //创建--待定,
|
// this.currentSelectedMaterialId = this.createNewMaterial(modelId)
|
}
|
|
});
|
} else {
|
this.$message.warning("请选择构件!")
|
}
|
},
|
|
startPickMaterial() {
|
this.isstartPick = !this.isstartPick;
|
let _this = this;
|
if (window.changeCursor) {
|
window.changeCursor(this.isstartPick);
|
}
|
//$("#sdkContainer").css("cursor", this.isstartPick ? `url(../../assets/img/xiguan.png), auto;` : "")
|
if (window.BIM && window.sgworld) {
|
let Viewer = window.sgworld.coreMap;
|
if (this.isstartPick) {
|
Viewer.screenSpaceEventHandler.setInputAction(function (movement) {
|
_this.onLeftClick(movement)
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
} else {
|
this.currentSelectedMaterialId = "";
|
Viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
}
|
}
|
},
|
async createNewMaterial(modelId) {
|
let newid = "";
|
await window.BIM.CreateMaterial(modelId, []).then((id) => {
|
newid = id;
|
})
|
return newid;
|
},
|
getMaterialPicture(type) {
|
this.currentTextureType = type;
|
switch (type) {
|
case 1:
|
this.currentTextureData = this.textureCfg.hnt;
|
break;
|
case 2:
|
this.currentTextureData = this.textureCfg.dm; break;
|
case 3:
|
this.currentTextureData = this.textureCfg.qm; break;
|
case 4:
|
this.currentTextureData = this.textureCfg.zs; break;
|
case 5:
|
this.currentTextureData = this.textureCfg.cz; break;
|
case 6:
|
this.currentTextureData = this.textureCfg.js; break;
|
case 7:
|
this.currentTextureData = this.textureCfg.mz; break;
|
case 8:
|
this.currentTextureData = this.textureCfg.wm; break;
|
case 9:
|
this.currentTextureData = this.textureCfg.bl; break;
|
case 10:
|
this.currentTextureData = this.textureCfg.pg; break;
|
default: break;
|
}
|
},
|
updateColorValue(val) {
|
if (this.toolTip()) {
|
return
|
}
|
//console.log(val);
|
this.materialcolorsHexStr = val.hex;
|
let fR = parseFloat(val.rgba.r / 255.0);
|
let fg = parseFloat(val.rgba.g / 255.0);
|
let fb = parseFloat(val.rgba.b / 255.0);
|
let fa = parseFloat(val.rgba.a);
|
let floatColor = [fR, fg, fb, fa];
|
if (window.BIM) {
|
if (this.currentSelectedMaterialId) {
|
let param = {
|
"alpha": fa,
|
"blue": fb,
|
"caseId": this.currentCaseId,
|
"green": fg,
|
"materialId": this.currentSelectedMaterialId,
|
"red": fR
|
};
|
let modelIds = this.$store.state.bimModelLoaded;
|
for (let i = 0; i < modelIds.length; i++) {
|
let modelId = modelIds[i];
|
window.BIM.SetMaterialColor(modelId, this.currentSelectedMaterialId, floatColor);
|
if (false === this.modelMaterialDefaultObjects.hasOwnProperty(modelId + ":" + this.currentSelectedMaterialId)) {
|
this.modelMaterialDefaultObjects[modelId + ":" + this.currentSelectedMaterialId] = {};
|
}
|
this.modelMaterialDefaultObjects[modelId + ":" + this.currentSelectedMaterialId]["red"] = fR;
|
this.modelMaterialDefaultObjects[modelId + ":" + this.currentSelectedMaterialId]["green"] = fg;
|
this.modelMaterialDefaultObjects[modelId + ":" + this.currentSelectedMaterialId]["blue"] = fb;
|
this.modelMaterialDefaultObjects[modelId + ":" + this.currentSelectedMaterialId]["alpha"] = fa;
|
}
|
saveOrUpdateMaterial(param).then((res) => { })
|
}
|
}
|
},
|
setMaterialPicture(item) {
|
if (this.toolTip()) {
|
return
|
}
|
this.currentTextureSrc = '../../../../CimSDK/Assets/Textures/PBRRepo' + item.preview.substr(1);
|
this.currentTextureId = item.id;
|
if (!this.currentClickModelId) {
|
return
|
}
|
if (window.BIM) {
|
if (this.currentSelectedMaterialId) {
|
let param = {
|
"caseId": this.currentCaseId,
|
"materialId": this.currentSelectedMaterialId,
|
"textureId": item.id
|
};
|
let modelId = this.currentClickModelId
|
console.log(">>>>>>>>>>SetMaterialTexture",modelId, this.currentSelectedMaterialId, item.id);
|
window.BIM.SetMaterialTexture(modelId, this.currentSelectedMaterialId, item.id);
|
if (false === this.modelMaterialDefaultObjects.hasOwnProperty(modelId + ":" + this.currentSelectedMaterialId)) {
|
this.modelMaterialDefaultObjects[modelId + ":" + this.currentSelectedMaterialId] = {};
|
}
|
this.modelMaterialDefaultObjects[modelId + ":" + this.currentSelectedMaterialId]["textureId"] = item.id;
|
|
saveOrUpdateMaterial(param).then((res) => { })
|
}
|
}
|
},
|
toolTip() {
|
let flag = false
|
if (!this.currentSelectedMaterialId) {
|
this.$message.warning("请先选择材质!")
|
flag = true
|
}
|
return flag
|
},
|
back2Default(tag) {
|
if (this.currentSelectedMaterialId) {
|
let modelIds = this.$store.state.bimModelLoaded;
|
for (let i = 0; i < modelIds.length; i++) {
|
let modelId = modelIds[i];
|
delete this.modelMaterialDefaultObjects[modelId + ":" + this.currentSelectedMaterialId];
|
if (tag === 1) {
|
window.BIM.SetMaterialColor(modelId, this.currentSelectedMaterialId, null);
|
window.BIM.GetMaterial(modelId, this.currentSelectedMaterialId).then((res) => {
|
let mObj = res;
|
if (mObj) {
|
this.materialcolorsHexStr = this.colorRGB2Hex(mObj.color[0] * 255, mObj.color[0] * 255, mObj.color[0] * 255, mObj.color[3] * 255)
|
let param = {
|
"alpha": mObj.color[3],
|
"blue": mObj.color[2],
|
"caseId": this.currentCaseId,
|
"green": mObj.color[1],
|
"materialId": this.currentSelectedMaterialId,
|
"red": mObj.color[0]
|
};
|
saveOrUpdateMaterial(param).then((res) => { })
|
}
|
});
|
} else if (tag === 2) {
|
window.BIM.GetMaterial(modelId, this.currentSelectedMaterialId).then((res) => {
|
window.BIM.SetMaterialTexture(modelId, this.currentSelectedMaterialId, null);
|
let mObj = res;
|
if (mObj) {
|
window.BIM.SetMaterialColor(modelId, this.currentSelectedMaterialId, mObj.color);
|
this.currentTextureSrc = "";
|
let param = {
|
"caseId": this.currentCaseId,
|
"materialId": this.currentSelectedMaterialId,
|
"textureId": mObj.textureId
|
};
|
saveOrUpdateMaterial(param).then((res) => { })
|
}
|
});
|
}
|
}
|
|
}
|
},
|
colorRGB2Hex(R, G, B, A) {
|
var r = R === null ? 1 : parseInt(R);
|
var g = G === null ? 1 : parseInt(G);
|
var b = B === null ? 1 : parseInt(B);
|
var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) + parseInt(A).toString(16);
|
return hex;
|
},
|
initTextureData() {
|
if (window.BIM) {
|
let getTextureInvert = window.setInterval(() => {
|
if (window.BIM_LOADED) {
|
window.BIM.GetTextureList().then((res) => {
|
console.log(res)
|
if (res.length > 0) {
|
for (let i = 0; i < res.length; i++) {
|
let texture = res[i];
|
if (texture.preview) {
|
texture.imgSrc = URL.createObjectURL(new Blob([texture.preview]))
|
}
|
let namearr = texture.name.split('-')
|
if (namearr.length > 1) {
|
texture.type = namearr[0];
|
texture.rname = namearr[1];
|
}
|
}
|
this.textureCfg.all = res;
|
this.textureCfg.hnt = res.filter((t) => t.name.indexOf("混凝土-") == 0).sort();
|
this.textureCfg.dm = res.filter((t) => t.name.indexOf("地面-") == 0).sort();
|
this.textureCfg.qm = res.filter((t) => t.name.indexOf("墙面-") == 0).sort();
|
this.textureCfg.zs = res.filter((t) => t.name.indexOf("砖-") == 0).sort();
|
this.textureCfg.cz = res.filter((t) => t.name.indexOf("瓷砖-") == 0).sort();
|
this.textureCfg.js = res.filter((t) => t.name.indexOf("金属-") == 0).sort();
|
this.textureCfg.mz = res.filter((t) => t.name.indexOf("木质-") == 0).sort();
|
this.textureCfg.wm = res.filter((t) => t.name.indexOf("屋面-") == 0).sort();
|
this.textureCfg.bl = res.filter((t) => t.name.indexOf("布料-") == 0).sort();
|
this.textureCfg.pg = res.filter((t) => t.name.indexOf("皮革-") == 0).sort();
|
}
|
});
|
window.clearInterval(getTextureInvert);
|
}
|
}, 1000)
|
}
|
},
|
},
|
mounted() {
|
this.initTextureData();
|
}
|
|
}
|
</script>
|
<style lang="less" scoped >
|
.material-card {
|
border: 0 !important;
|
overflow: auto;
|
border-radius: 0 !important;
|
width: 305px;
|
padding: 0px !important;
|
overflow-x: hidden;
|
|
/deep/ .el-card__header {
|
background: white !important;
|
font-size: 12px !important;
|
font-weight: 400;
|
padding: 5px;
|
}
|
|
|
/deep/ .el-card__body {
|
padding: 5px !important;
|
overflow-x: auto;
|
}
|
|
.btnMaterial {
|
background: transparent;
|
border: 1px solid #309cf5;
|
color: #2fb1ec;
|
border-radius: 0px;
|
padding: 2px 10px;
|
width: 54px;
|
margin-top:10px;
|
|
&:hover {
|
background-color: #ddddddb4;
|
}
|
|
}
|
}
|
|
/deep/.el-divider {
|
margin: 10px !important;
|
}
|
|
.materialmanager {
|
|
.el-switch__label {
|
color: #fff;
|
}
|
|
.el-switch__label.is-active {
|
color: #3384C6 !important;
|
}
|
|
.el-table .cell {
|
padding-right: 0px !important;
|
}
|
|
/depp/.el-table tr {
|
background-color:rgba(0, 0, 0, 0) !important;
|
}
|
|
/deep/ .el-card__body {
|
padding: 10px !important;
|
overflow-x: auto;
|
}
|
|
}
|
|
.mBtn2 {
|
text-align: center;
|
width: 50px;
|
margin: 10px;
|
border-radius: 5px;
|
// color: white;
|
padding: 5px;
|
cursor: pointer;
|
|
&:hover {
|
background-color: #3384C6;
|
box-shadow: 2px 2px 3px rgb(207, 207, 207);
|
}
|
}
|
|
.btnBackDefault {
|
|
// background: #3384C6;
|
border: 1px solid rgb(212, 212, 212);
|
border-radius: 5px;
|
padding: 2px 10px;
|
|
&:hover {
|
background-color: #3384C6;
|
color: #FFF;
|
cursor: pointer;
|
}
|
}
|
|
.mBtnSelect {
|
text-align: center;
|
width: 60px;
|
border-radius: 5px;
|
// color: white;
|
border: 1px solid rgb(212, 212, 212);
|
padding: 5px;
|
cursor: pointer;
|
|
&:hover {
|
background-color: #3384C6;
|
color: white;
|
border: 1px solid rgb(224, 224, 255);
|
box-shadow: 2px 2px 3px rgb(207, 207, 207);
|
}
|
}
|
|
.mBtnSelect_Checked {
|
background-color: #3384C6;
|
color: white;
|
border: 1px solid rgb(224, 224, 255);
|
box-shadow: 2px 2px 3px rgb(207, 207, 207);
|
}
|
|
.mBtn {
|
text-align: center;
|
width: 60px;
|
margin: 2px;
|
border-radius: 5px;
|
// color: white;
|
border: 1px solid rgb(212, 212, 212);
|
padding: 5px;
|
cursor: pointer;
|
|
&:hover {
|
background-color: #3384C6;
|
color: white;
|
border: 1px solid rgb(224, 224, 255);
|
box-shadow: 2px 2px 3px rgb(207, 207, 207);
|
}
|
}
|
|
.mBtn_Checked {
|
background-color: #3384C6;
|
color: white;
|
border: 1px solid rgb(224, 224, 255);
|
box-shadow: 2px 2px 3px rgb(207, 207, 207);
|
}
|
|
// /deep/.el-divider--horizontal {
|
// margin-bottom: 5px !important;
|
// }
|
/deep/.el-divider--horizontal {
|
margin: 10px 10px 10px 0px !important;
|
}
|
.tabletrtd{
|
/deep/ .el-table__body-wrapper {
|
background: #245e9e !important;
|
}
|
}
|
.drag_blue::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 4px;
|
}
|
.treeTitle{
|
width: 249px;
|
height: 29px;
|
margin-bottom:20px;
|
margin-top:10px;
|
margin-left:14px;
|
background-image: url("../../../assets/img/menuTitle.png");
|
background-size:249px 29px ;
|
// background: linear-gradient(90deg, #1971D1 0%, rgba(49,117,192,0) 100%);
|
.enTitle{
|
display:inline-block;
|
width: 100px;
|
height: 25px;
|
font-size: 10px;
|
font-weight: 400;
|
color: #FFFFFF;
|
line-height:25px;
|
margin-left:10px;
|
background: linear-gradient(to top, #3F85D8 0%, #98DEFF 40%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
.zhTitle{
|
display:inline-block;
|
width: 76px;
|
height: 26px;
|
font-size: 16px;
|
line-height: 30px;
|
font-family: PangMenZhengDao;
|
// font-weight: bold;
|
font-style: italic;
|
color: #FFFFFF;
|
// text-shadow: 0px 2px 0px rgba(0,9,10,0.46);
|
background: linear-gradient(to top, rgba(129,198,239,0.83) 0%, rgba(246,252,255,0.83) 62.3046875%, rgba(255,255,255,0.83) 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
margin-left: 25px;
|
}
|
}
|
|
.drag_blue {
|
width: 430px;
|
height: 780px;
|
background-color: rgb(56, 116, 180);
|
position: absolute;
|
top: 100px;
|
right: 500px;
|
border-radius: 5px;
|
overflow-y: auto;
|
border: 1px solid rgb(255, 255, 255);
|
color:"#fff";
|
.el-card {
|
// color: white;
|
background: transparent;
|
border: 0 !important;
|
color:"#fff";
|
}
|
|
/deep/.el-divider--horizontal {
|
margin: 10px 10px 10px 0px !important;
|
color:"#fff";
|
}
|
.vc-sketch {
|
background: rgba(36, 94, 158,0);
|
}
|
}
|
|
|
</style>
|
