2023-07-04 21:16:23 +08:00

453 lines
18 KiB
Vue

<template>
<div class="fullHeight">
<div class="left fullHeight whiteBlock">
<div class="title">
<!-- 模型 -->
<span>{{$t('message.BIMmanage.model')}}</span>
<!-- <p @click="configDialog=true" style="position:absolute;right:10px;top:15px">配置服务器</p> -->
<el-button type="default" size="mini" @click="configDialog=true" style="position:absolute;right:10px;top:15px">{{$t('message.BIMmanage.confingServer')}}</el-button>
</div>
<div class="list_content">
<vue-scroll v-if="buildList.length>0">
<div
class="flex content_data"
v-for="(item,index) in buildList"
:key="index"
:class="{'active':activeBuildIndex==index }"
@click="changeBuildFn(item,index)"
>
<div>{{item.bimName}}</div>
<div class="flex2">
<!-- <img
@click.stop="editBuildFn(item)"
src="@/assets/images/icon-edit.png"
style="margin-right:16px"
class="icon"
/> -->
<el-tooltip class="item" effect="dark" :content="$t('message.BIMmanage.setMainModel')" placement="top" v-if="item.mainModel==0">
<i class="el-icon-s-home icon" style="margin-right:16px" @click.stop="setToMain(item)"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="$t('message.BIMmanage.mainModel')" placement="top" v-else>
<i class="el-icon-s-home primaryText icon" style="margin-right:16px"></i>
</el-tooltip>
<img
@click.stop="deleteFn(item)"
src="@/assets/images/icon-delete.png"
class="icon"
/>
</div>
</div>
</vue-scroll>
<div class="placeholderBox" v-else>{{$t('message.personnelPosition.mapManage.no_data')}}</div>
</div>
<div class="addFirm" @click="addFn">
<!-- {{$t('message.personnelPosition.mapManage.new_build')}} -->
<!-- 上传新模型 -->
{{$t('message.BIMmanage.updateNewModel')}}
<!-- <el-upload
class="uploadBtn"
ref="upload"
name="file"
:action="'http://10.0.1.43:6023/xmgl/projectBim/saveBim'"
:on-success="uploadMapSuccess"
:show-file-list="false"
:data="uploadParams"
:before-upload="beforeUpload"
>
<span slot="trigger">上传新模型</span>
</el-upload> -->
</div>
</div>
<div class="right fullHeight">
<div class="mapContainer whiteBlock">
<!-- <el-upload
class="uploadBtn"
ref="upload"
name="files"
:action="$store.state.UPLOADURL"
:on-success="uploadMapSuccess"
accept=".png, .jpg, .jpeg"
:show-file-list="false"
>
<el-button slot="trigger" type="primary" size="medium">
{{$t('message.personnelPosition.mapManage.re_upload')}}
</el-button>
</el-upload> -->
<!-- v-if="buildList.length>0" -->
<overview :urn="buildList.length>0?buildList[activeBuildIndex].bimUrn:''" :bimid="buildList.length>0?parseInt(buildList[activeBuildIndex].id):''" :opendrawlabel="true"></overview>
</div>
</div>
<!-- 上传新模型 -->
<el-dialog :modal-append-to-body="false" :title="$t('message.BIMmanage.updateNewModel')" :visible.sync="addBuildDialog" width="667px">
<div class="dialog_content">
<el-form
size="medium"
:model="addBuildForm"
ref="addBuildForm"
:rules="beaconFormRules"
label-width="120px"
class="dialogFormBox"
>
<el-form-item :label="$t('message.BIMmanage.modelName')"
prop="bimName">
<el-input v-model="addBuildForm.bimName"
:placeholder="$t('message.personnelPosition.please_enter')"></el-input>
</el-form-item>
<el-form-item :label="$t('message.BIMmanage.modelFile')"
prop="file">
<el-upload
class="uploadBtn"
ref="upload"
name="file"
v-model="addBuildForm.file"
:action="$http.defaults.baseURL+'xmgl/projectBim/saveBim'"
:on-success="uploadMapSuccess"
:show-file-list="false"
:data="uploadParams"
:on-change="beforeUpload" :auto-upload="false" :limit="1"
:on-exceed="exceedFn"
>
<!-- <span slot="trigger">选择文件</span> -->
<el-button slot="trigger" type="primary" size="medium">
{{$t('message.BIMmanage.chooseFile')}}
</el-button>
<el-button type="danger" size="medium" @click="$refs.upload.clearFiles();addBuildForm.file=null" style="margin-left:20px">
{{$t('message.BIMmanage.cleanFile')}}
</el-button>
<div slot="tip" class="el-upload__tip">{{addBuildForm.file.name}}</div>
</el-upload>
</el-form-item>
<div class="dialog-footer">
<el-button
class="cancleBtn"
@click="addBuildDialog = false"
icon="el-icon-circle-close"
size="medium"
>{{$t('message.personnelPosition.cancel')}}
</el-button>
<el-button
type="primary"
icon="el-icon-circle-check"
@click="submitData"
size="medium"
>{{$t('message.personnelPosition.determine')}}
</el-button>
</div>
</el-form>
</div>
</el-dialog>
<!-- 配置服务器参数 -->
<el-dialog :modal-append-to-body="false" :title="$t('message.BIMmanage.confingServerData')" :visible.sync="configDialog" width="667px" :close-on-click-modal="configForm.id?true:false" :show-close="configForm.id?true:false">
<div class="dialog_content">
<p class="redText" v-show="configForm.id" style="margin-bottom:20px;text-align:center">{{$t('message.BIMmanage.warnText')}}</p>
<el-form
size="medium"
:model="configForm"
ref="configForm"
:rules="configFormRules"
label-width="140px"
class="dialogFormBox"
>
<el-form-item :label="'CLIENT_ID'"
prop="clientId">
<el-input v-model="configForm.clientId"
:placeholder="$t('message.personnelPosition.please_enter')"></el-input>
</el-form-item>
<el-form-item :label="'CLIENT_SECRET'"
prop="clientSecret">
<el-input v-model="configForm.clientSecret"
:placeholder="$t('message.personnelPosition.please_enter')"></el-input>
</el-form-item>
<div class="dialog-footer">
<el-button
type="primary"
icon="el-icon-circle-check"
@click="submitConfigData"
size="medium"
>{{$t('message.personnelPosition.determine')}}
</el-button>
</div>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
import {projectBimAddApi,projectBimDeleteApi,projectBimEditApi,projectBimListApi,projectBimUploadApi,
addOrEditProjectBimConfigApi,getProjectBimConfigInfoApi,updateMainModelApi} from "@/assets/js/api/project"
import overview from './overview'
export default {
components:{overview},
data(){
return{
buildList:[],
addBuildDialog:false,
isAdd:true,
addBuildForm:{
bimName:'',
file:'',
projectSn:'',
file: null,
},
uploadParams:{
bimName:'',
projectSn:''
},
fullscreenLoading: false,
beaconFormRules: {
bimName: [{
required: true,
message: this.$t('message.personnelPosition.required'),
trigger: "blur"
}],
},
configFormRules: {
clientId: [{
required: true,
message: this.$t('message.personnelPosition.required'),
trigger: "blur"
}],clientSecret: [{
required: true,
message: this.$t('message.personnelPosition.required'),
trigger: "blur"
}],
},
activeBuildIndex:0,
configDialog:false,
configForm: {
clientId:'',
clientSecret:'',
type: 1
}
}
},
mounted(){
this.getConfigFn()
},
methods:{
setToMain(item){
updateMainModelApi({projectSn:this.$store.state.projectSn,bimId:item.id}).then(res=>{
this.loadData()
})
},
getConfigFn(){
getProjectBimConfigInfoApi({projectSn:this.$store.state.projectSn,type: 1}).then(res=>{
if(res.result){
this.configForm=res.result
this.loadData()
}else{
this.configDialog=true
}
})
},
addFn(){
this.addBuildDialog=true;
this.isAdd=true;
this.addBuildForm.bimName='';
this.addBuildForm.file=null
this.$refs.upload.clearFiles();
},
exceedFn(files, fileList){
this.$message.warning( this.$t('message.BIMmanage.tipText') +files.length+this.$t('message.BIMmanage.tipText2')+(files.length + fileList.length)+this.$t('message.BIMmanage.tipText3'));
},
beforeUpload(file){
console.log('file',file)
this.addBuildForm.file=file;
},
uploadMapSuccess(res) {
// this.cropperOption.img = this.$store.state.FILEURL + res.data[0].imageUrl;
// this.cropperDialog = true;
console.log("uploadMapSuccess",res);
this.fullscreenLoading.close()
this.addBuildDialog=false
this.loadData()
},
editBuildFn(item){
this.isAdd=false
this.addBuildForm=JSON.parse(JSON.stringify(item))
this.addBuildDialog=true
},
changeBuildFn(item,index){
// this.addBuildForm=JSON.parse(JSON.stringify(item))
this.activeBuildIndex=index
},
//获取模型列表
loadData(){
projectBimListApi({projectSn:this.$store.state.projectSn}).then(res=>{
this.buildList=res.result
})
},
submitData(){
this.$refs["addBuildForm"].validate((valid) => {
if (valid) {
if (this.isAdd) {
if(this.addBuildForm.file==null){
this.$message.error(this.$t('message.BIMmanage.pleaseChooseFile'))
}else{
this.uploadParams.bimName=this.addBuildForm.bimName;
this.uploadParams.projectSn=this.$store.state.projectSn
this.fullscreenLoading = this.$loading({
lock: true,
text: this.$t('message.BIMmanage.loading'),
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.$refs.upload.submit();
}
// this.addBuildForm.projectSn = this.$store.state.projectSn
// projectBimUploadApi(this.addBuildForm).then((res) => {
// this.addBuildDialog = false;
// this.loadData();
// this.$message.success(
// this.$t("message.personnelPosition.add_success")
// ); //添加成功!
// });
} else {
projectBimEditApi(this.addBuildForm).then((res) => {
this.addBuildDialog = false;
this.loadData();
this.$message.success(
this.$t("message.personnelPosition.edit_success")
); //编辑成功!
});
}
} else {
console.log("error submit!!");
return false;
}
});
},
deleteFn(item){
this.$confirm(this.$t('message.BIMmanage.tipText4')+'【'+item.bimName+'】,'+this.$t('message.BIMmanage.tipText5')+'?', this.$t('message.BIMmanage.tip'), {
confirmButtonText:this.$t('message.BIMmanage.confirm'),
cancelButtonText: this.$t('message.BIMmanage.cancel'),
type: 'warning'
}).then(() => {
projectBimDeleteApi({id:item.id}).then(res=>{
this.$message({
type: 'success',
message: this.$t('message.BIMmanage.deleteSuccess')+'!'
});
this.loadData()
})
}).catch(() => {
this.$message({
type: 'info',
message: this.$t('message.BIMmanage.cancelDelete')+'!'
});
});
},
submitConfigData(){
this.$refs["configForm"].validate((valid) => {
if (valid) {
this.configForm.projectSn=this.$store.state.projectSn
addOrEditProjectBimConfigApi(this.configForm).then((res) => {
this.configDialog = false;
this.loadData();
this.$message.success(this.$t('message.BIMmanage.configSuccess')+'!'); //添加成功!
});
} else {
console.log("error submit!!");
return false;
}
});
}
}
}
</script>
<style lang="less" scoped>
.title {
border-bottom: 1px solid rgba(220, 230, 253, 1);
color: @--color-primary;
padding-left: 24px;
font-size: 14px;
position: relative;
span {
position: relative;
padding: 16px 0 5px;
display: inline-block;
&::before {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background-color: @--color-primary;
z-index: 2;
}
}
}
.left {
width: 212px;
float: left;
}
.list_content {
padding: 10px 0;
height: calc(100% - 87px - 20px);
position: relative;
}
.content_data {
padding: 0 20px;
box-sizing: border-box;
height: 43px;
line-height: 43px;
cursor: pointer;
position: relative;
&.active {
background-color: rgba(81, 129, 246, 0.1);
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: @--color-primary;
border-radius: 2px;
}
}
}
.mapContainer{
height: calc(100% - 40px);
padding: 20px;
position: relative;
}
.right {
float: left;
width: calc(100% - 222px);
margin-left: 10px;
}
.flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex2 {
display: flex;
align-items: center;
}
.addFirm {
height: 45px;
line-height: 45px;
color: @--color-primary;
font-size: 15px;
text-align: center;
background: #fff;
border-top: 1px solid #dce6fd;
font-family: PingFangSC-Regular;
cursor: pointer;
}
.el-icon-s-home{
font-size: 20px;
opacity: 0.6;
}
</style>