|
@@ -0,0 +1,359 @@
|
|
|
+<template>
|
|
|
+ <div class="hui-flex space-function">
|
|
|
+ <div class="hui-flex-box yui-tree-box">
|
|
|
+ <div class="hui-left-tree">
|
|
|
+ <div class="hui-left-tree-title">
|
|
|
+ <svg-icon name="zhuangshi" width="16" height="20"></svg-icon>
|
|
|
+ <span class="hui-left-tree-sub">高级设置</span>
|
|
|
+ </div>
|
|
|
+ <div class="hui-left-tree-content">
|
|
|
+ <el-collapse v-model="activeNames">
|
|
|
+ <el-collapse-item v-for="item in treeData" :key="item.id" :name="item.id">
|
|
|
+ <template slot="title">
|
|
|
+ <i class="iconfont huifont-moxingguanli"></i>
|
|
|
+ <span class="el-collapse-name">{{item.name}}</span>
|
|
|
+ </template>
|
|
|
+ <div>
|
|
|
+ <el-tree v-if="item.id === -1" :data="item.children" :props="defaultProps"
|
|
|
+ @node-click="selectTree">
|
|
|
+ </el-tree>
|
|
|
+ <div class="space-function-form" v-else>
|
|
|
+ <div class="space-function-item">
|
|
|
+ <div class="space-function-label">空间名称</div>
|
|
|
+ <div class="space-function-value">
|
|
|
+ <el-input v-model="room.name" disabled></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="space-function-item">
|
|
|
+ <div class="space-function-label">空间名称</div>
|
|
|
+ <div class="space-function-value">
|
|
|
+ <el-button size="small" type="primary" @click="setSpace">设置空间</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="space-function-item">
|
|
|
+ <div class="space-function-label">空间颜色</div>
|
|
|
+ <div class="space-function-value">
|
|
|
+ <el-color-picker show-alpha v-model="form.color" size="mini"
|
|
|
+ @change="changeColor">
|
|
|
+ </el-color-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="space-function-button">
|
|
|
+ <el-button size="medium" type="primary" @click="submit">保 存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-tree-content">
|
|
|
+ <div class="hui-flex hui-content box-background">
|
|
|
+ <div class="hui-content-title">
|
|
|
+ <div class="hui-title-item active">功能分区</div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-flex-box hui-flex">
|
|
|
+ <div class="space-null" v-if="nullType === 1">
|
|
|
+ <img :src="nullImage" alt="" />
|
|
|
+ <div class="space-null-text">您还未进行空间设置,请先设置空间!</div>
|
|
|
+ <div class="flow-button">
|
|
|
+ <el-button size="medium" type="primary">前去设置</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="space-null" v-if="nullType === 2">
|
|
|
+ <img :src="nullImage" alt="" />
|
|
|
+ <div class="space-null-text">该单位工程暂未集成模型</div>
|
|
|
+ </div>
|
|
|
+ <div class="space-null" v-if="nullType === 3">
|
|
|
+ <img :src="nullImage" alt="" />
|
|
|
+ <div class="space-null-text">模型集成中,请稍后再试</div>
|
|
|
+ </div>
|
|
|
+ <div :id="'previewBim'+_uid" class="previewBim" v-show="nullType === 4"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getProjectTreeList,
|
|
|
+ getHouseDetailById,
|
|
|
+ updateHouse
|
|
|
+ } from '@/httpApi/space'
|
|
|
+ import {
|
|
|
+ getIntegrateViewToken
|
|
|
+ } from '@/httpApi/bim'
|
|
|
+ import {
|
|
|
+ roomList
|
|
|
+ } from '@/uitls';
|
|
|
+ import bimView from '@/uitls/controls'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ nullImage: require('../../../assets/img/work/common/dataNull.png'),
|
|
|
+ undefinedImage: require('../../../assets/img/work/common/dataUndefined.png'),
|
|
|
+ activeNames: [-1, -2],
|
|
|
+ treeData: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'name'
|
|
|
+ },
|
|
|
+ projectItem: {},
|
|
|
+ nullType: '',
|
|
|
+ room: {},
|
|
|
+ form: {
|
|
|
+ color: 'rgba(19, 206, 102, 0.8)'
|
|
|
+ },
|
|
|
+ bimViewer: {},
|
|
|
+ positionData: [],
|
|
|
+ isSet: false,
|
|
|
+ roomData: {},
|
|
|
+ renderSuccess: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.bimViewer && this.renderSuccess) this.bimViewer.destroy();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ getProjectTreeList(this.$store.getters.project.id).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ let list = roomList(res.data.projectItemList, 'room');
|
|
|
+ console.log(list);
|
|
|
+ return;
|
|
|
+ let item = list.filter(item => {
|
|
|
+ if (!item.projectItemTargetList) return false;
|
|
|
+ if (item.projectItemTargetList.length === 0) return false;
|
|
|
+ let target = item.projectItemTargetList.filter(target => {
|
|
|
+ if (!target.projectItemTargetRoomList) return false;
|
|
|
+ if (target.projectItemTargetRoomList.length === 0) return false;
|
|
|
+ return true;
|
|
|
+ })
|
|
|
+ return target.length > 0
|
|
|
+ })
|
|
|
+ this.treeData = [{
|
|
|
+ id: -1,
|
|
|
+ name: '空间结构',
|
|
|
+ children: list
|
|
|
+ }, {
|
|
|
+ id: -2,
|
|
|
+ name: '模型绑定'
|
|
|
+ }];
|
|
|
+ if (item.length === 0) this.nullType = 1;
|
|
|
+ this.selectRoom(item[0].projectItemTargetList[0].projectItemTargetRoomList[0]);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectTree(item) {
|
|
|
+ if (!item.roomId) return;
|
|
|
+ this.selectRoom(item);
|
|
|
+ },
|
|
|
+ selectRoom(item) {
|
|
|
+ if (this.projectItem.id != item.projectItem.id) {
|
|
|
+ this.projectItem = item.projectItem;
|
|
|
+ if (!this.projectItem.bimIntegrateId) {
|
|
|
+ this.nullType = 2;
|
|
|
+ } else {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ getIntegrateViewToken(this.projectItem.bimIntegrateId).then(this.successFunc);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ getHouseDetailById(item.roomId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.room = res.data;
|
|
|
+ if (res.data.value) {
|
|
|
+ this.roomData = JSON.parse(res.data.value);
|
|
|
+ this.form.color = this.roomData.roomColor;
|
|
|
+ } else {
|
|
|
+ this.roomData = {};
|
|
|
+ this.form.color = 'rgba(19, 206, 102, 0.8)';
|
|
|
+ }
|
|
|
+ this.initRoomBIM();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setSpace() {
|
|
|
+ if (this.roomData.roomId) {
|
|
|
+ this.bimViewer.editRoom({
|
|
|
+ roomId: this.roomData.roomId
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.positionData.length >= 3) return this.bimViewer.editRoom({
|
|
|
+ roomId: this.room.id
|
|
|
+ })
|
|
|
+ this.$confirm('请在模型上选择空间的3个点', () => {
|
|
|
+ this.isSet = true
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initRoomBIM() {
|
|
|
+ if (!this.renderSuccess) return;
|
|
|
+ this.bimViewer.clearAllRooms();
|
|
|
+ this.bimViewer.exitRoom();
|
|
|
+ if (!this.roomData.boundary) return;
|
|
|
+ this.bimViewer.insertRooms({
|
|
|
+ id: this.roomData.roomId,
|
|
|
+ boundary: {
|
|
|
+ "outer": this.roomData.boundary
|
|
|
+ },
|
|
|
+ height: this.roomData.height,
|
|
|
+ roomColor: this.returnRGBA(this.roomData.roomColor)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ changeColor(color) {
|
|
|
+ if (!this.renderSuccess) return;
|
|
|
+ if (!this.roomData.boundary) return;
|
|
|
+ this.bimViewer.colorRoomById({
|
|
|
+ id: this.roomData.roomId,
|
|
|
+ roomColor: this.returnRGBA(this.form.color)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ returnRGBA(color) {
|
|
|
+ let [r, g, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
|
|
|
+ return {
|
|
|
+ r,
|
|
|
+ g,
|
|
|
+ b,
|
|
|
+ a
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (!this.roomData.roomId) return this.$message.warning('请设置空间位置');
|
|
|
+ this.roomData['roomColor'] = this.form.color;
|
|
|
+ updateHouse({
|
|
|
+ id: this.room.id,
|
|
|
+ value: JSON.stringify(this.roomData)
|
|
|
+ }).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.$message.success('保存成功');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ successFunc(res) {
|
|
|
+ if (res.state) {
|
|
|
+ if (!res.data) return this.nullType = 3;
|
|
|
+ this.nullType = 4;
|
|
|
+ this.bimViewer = new bimView({
|
|
|
+ dom: document.getElementById('previewBim' + this._uid),
|
|
|
+ viewToken: res.data,
|
|
|
+ bimIntegrateId: this.projectItem.bimIntegrateId,
|
|
|
+ renderSuccess: () => {
|
|
|
+ this.renderSuccess = true;
|
|
|
+ this.initRoomBIM();
|
|
|
+ },
|
|
|
+ roomSaved: data => {
|
|
|
+ this.roomData = data;
|
|
|
+ },
|
|
|
+ click: data => {
|
|
|
+ if (!this.isSet) return;
|
|
|
+ let point = data.worldPosition;
|
|
|
+ if (!point) return this.$message.warning('请点击模型范围内的点');
|
|
|
+ this.positionData.push(point);
|
|
|
+ this.bimViewer.add3DMaker('image', point);
|
|
|
+ if (this.positionData.length == 3) {
|
|
|
+ this.isSet = false;
|
|
|
+ this.bimViewer.insertRooms({
|
|
|
+ id: this.room.id,
|
|
|
+ boundary: {
|
|
|
+ "outer": this.positionData
|
|
|
+ },
|
|
|
+ height: 500,
|
|
|
+ roomColor: this.returnRGBA(this.form.color)
|
|
|
+ })
|
|
|
+ this.bimViewer.clear3DMaker();
|
|
|
+ this.bimViewer.editRoom({
|
|
|
+ roomId: this.room.id
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.nullType === 3
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .space-function {
|
|
|
+ .space-null {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 420px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .space-null-text {
|
|
|
+ padding: 30px 0 20px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .previewBim {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .bf-house {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .space-function-form {
|
|
|
+ padding: 20px;
|
|
|
+
|
|
|
+ .space-function-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 48px;
|
|
|
+
|
|
|
+ .space-function-label {
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .space-function-value {
|
|
|
+ width: 0;
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ .el-input.is-disabled .el-input__inner {
|
|
|
+ background: #475062;
|
|
|
+ border: none;
|
|
|
+ color: $--color-common;
|
|
|
+ opacity: 1;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-color-picker__trigger {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ padding: 2px;
|
|
|
+ border-color: $--input-border
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-color-picker {
|
|
|
+ height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .space-function-button {
|
|
|
+ padding-top: 10px;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|