|
|
@@ -0,0 +1,908 @@
|
|
|
+<template>
|
|
|
+ <div id="distribution" class="distribution-index">
|
|
|
+ <div class="left-button" v-if="!isWalk">
|
|
|
+ <div :class="'menu-item pangmenzhengdao' + (node.id == pathNode.id ? ' active' :'')"
|
|
|
+ v-for="(node,index) in titleList" :key="node.id" @click="selectItem(node)">
|
|
|
+ {{node.name}}
|
|
|
+ </div>
|
|
|
+ <div class="menu-item pangmenzhengdao" @click="getWalk">记录</div>
|
|
|
+ <div class="menu-item pangmenzhengdao" @click="getCamera">视角</div>
|
|
|
+ </div>
|
|
|
+ <div class="walk-box" v-else>
|
|
|
+ <div class="walk-box-item">
|
|
|
+ <i :class="'iconfont '+ (stop ? 'huifont-bofang':'huifont-bofangzanting')" @click="startWalk"></i>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" size="medium" @click="stopWalkFunc">退出</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div :id="'previewBim'+_uid" class="previewBim"></div>
|
|
|
+ <div id="distribution-drap" class="distribution-drap" v-show="drapShow" @mousedown="dragStart"
|
|
|
+ @touchstart="dragStart">
|
|
|
+ <div class="distribution-drap-title">
|
|
|
+ <div id="title" class="distribution-drap-title-content">{{detail.title}}</div>
|
|
|
+ <i id="close" class="el-icon-circle-close" @click="drapShow = false"></i>
|
|
|
+ </div>
|
|
|
+ <div class="distribution-drap-content">
|
|
|
+ <div class="user-list">
|
|
|
+ <div class="user-item" v-for="(item,index) in detail.list">
|
|
|
+ <div class="user-key">{{item.name}}</div>
|
|
|
+ <div class="user-value" v-if="item.value === 'operation'">
|
|
|
+ <el-switch v-model="value" active-color="#13ce66">
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
+ <div class="user-value" :title="item.value" v-else>
|
|
|
+ <span v-if="item.value === '元重构人工智能科技(上海)有限公司'" class="color-blue"
|
|
|
+ @click="open('1')">{{item.value}}</span>
|
|
|
+ <span v-else-if="item.name === '设备名称'" class="color-blue"
|
|
|
+ @click="open('2')">{{item.value}}</span>
|
|
|
+ <span v-else>{{item.value}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="image-box" v-if="detail.imageUrl">
|
|
|
+ <img :src="detail.imageUrl" alt="aa.png" />
|
|
|
+ <div class="video-mask" v-if="detail.title === '监控信息'" @click="isVideo = true">
|
|
|
+ <i class="iconfont huifont-shuzhuangcaidanxiala"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="padding: 5px;" v-else></div>
|
|
|
+ </div>
|
|
|
+ <el-dialog :close-on-click-modal="false" :title="type === '1' ? '企业看板':'设备看板'" :visible.sync="modelVisible"
|
|
|
+ width="1100px" :append-to-body="true">
|
|
|
+ <notice-board v-if="modelVisible" :type="type"></notice-board>
|
|
|
+ </el-dialog>
|
|
|
+ <div class="video-toggle" v-if="isVideo">
|
|
|
+ <div class="chart-title">
|
|
|
+ <div>监控</div>
|
|
|
+ <i class="el-icon-close" @click="isVideo = false"></i>
|
|
|
+ </div>
|
|
|
+ <div class="video-toggle-box">
|
|
|
+ <img style="width: 100%;height: 100%;"
|
|
|
+ src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/d8f0a8b4bd2043dfb8058d92763e57b0"
|
|
|
+ alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getBimViewToken,
|
|
|
+ } from '@/httpApi/bim'
|
|
|
+ import bimView from '@/uitls/controls'
|
|
|
+ // import bimData from '@/config/demo'//新华医院
|
|
|
+ // import bimData from '@/config/demo2'
|
|
|
+ // import bimData from '@/config/demo1'
|
|
|
+ import bimData from '@/config/mazu'
|
|
|
+ import noticeBoard from '@/components/work/common/noticeBoard'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ roomId: 100,
|
|
|
+ bimViewer: null,
|
|
|
+ positionData: [],
|
|
|
+ titleList: [{
|
|
|
+ id: 1,
|
|
|
+ name: '企业'
|
|
|
+ }, {
|
|
|
+ id: 2,
|
|
|
+ name: '监控'
|
|
|
+ }, {
|
|
|
+ id: 3,
|
|
|
+ name: '空调'
|
|
|
+ }, {
|
|
|
+ id: 4,
|
|
|
+ name: '灯光'
|
|
|
+ }, {
|
|
|
+ id: 5,
|
|
|
+ name: '漫游'
|
|
|
+ }],
|
|
|
+ pathNode: {
|
|
|
+ id: 1,
|
|
|
+ name: '企业'
|
|
|
+ },
|
|
|
+ renderSuccess: false,
|
|
|
+ isWalk: false,
|
|
|
+ walk: [{
|
|
|
+ "id": "65d75749-e822-4906-80bd-2bfdab2918c7",
|
|
|
+ "position": {
|
|
|
+ "x": 31275.9240350702,
|
|
|
+ "y": 81825.40309217027,
|
|
|
+ "z": 2487.042450388499
|
|
|
+ },
|
|
|
+ "target": {
|
|
|
+ "x": 31103.43463679697,
|
|
|
+ "y": 76858.87835140714,
|
|
|
+ "z": 1941.9255167360118
|
|
|
+ },
|
|
|
+ "coordinateSystem": "world",
|
|
|
+ "stayTime": 0,
|
|
|
+ "timeBetweenFrames": 6
|
|
|
+ }, {
|
|
|
+ "id": "e9d68380-669d-4977-865f-29b7e5c7cbff",
|
|
|
+ "position": {
|
|
|
+ "x": 31066.037323180284,
|
|
|
+ "y": 64760.65864084868,
|
|
|
+ "z": 5320.407629407267
|
|
|
+ },
|
|
|
+ "target": {
|
|
|
+ "x": 30992.8486023219,
|
|
|
+ "y": 59765.18672363274,
|
|
|
+ "z": 5318.794832592223
|
|
|
+ },
|
|
|
+ "coordinateSystem": "world",
|
|
|
+ "stayTime": 1,
|
|
|
+ "timeBetweenFrames": 3
|
|
|
+ }, {
|
|
|
+ "id": "3dea4ee4-e127-478c-8225-842160b34bfa",
|
|
|
+ "position": {
|
|
|
+ "x": 31003.26003754002,
|
|
|
+ "y": 61029.99041014921,
|
|
|
+ "z": 5485.144519856414
|
|
|
+ },
|
|
|
+ "target": {
|
|
|
+ "x": 30951.279877709927,
|
|
|
+ "y": 56037.02328394182,
|
|
|
+ "z": 5318.794832592223
|
|
|
+ },
|
|
|
+ "coordinateSystem": "world",
|
|
|
+ "stayTime": 0,
|
|
|
+ "timeBetweenFrames": 1
|
|
|
+ }, {
|
|
|
+ "id": "f8bdaf96-e12c-4c81-a597-47a7988be738",
|
|
|
+ "position": {
|
|
|
+ "x": 34438.36022533061,
|
|
|
+ "y": 56334.07750661067,
|
|
|
+ "z": 5580.1036873364596
|
|
|
+ },
|
|
|
+ "target": {
|
|
|
+ "x": 30951.279877709927,
|
|
|
+ "y": 56037.02328394182,
|
|
|
+ "z": 5318.794832592223
|
|
|
+ },
|
|
|
+ "coordinateSystem": "world",
|
|
|
+ "stayTime": 1,
|
|
|
+ "timeBetweenFrames": 4
|
|
|
+ }, {
|
|
|
+ "id": "1274eeb1-3a34-471a-8f75-6a6104021179",
|
|
|
+ "position": {
|
|
|
+ "x": 22776.992577643836,
|
|
|
+ "y": 55388.42831094333,
|
|
|
+ "z": 5538.953134482602
|
|
|
+ },
|
|
|
+ "target": {
|
|
|
+ "x": 17800.471026131087,
|
|
|
+ "y": 55006.96650831537,
|
|
|
+ "z": 5318.7948325922225
|
|
|
+ },
|
|
|
+ "coordinateSystem": "world",
|
|
|
+ "stayTime": 0,
|
|
|
+ "timeBetweenFrames": 1
|
|
|
+ }, {
|
|
|
+ "id": "5b1c2085-222c-485e-82f0-19ad9c90257b",
|
|
|
+ "position": {
|
|
|
+ "x": 17895.295800305994,
|
|
|
+ "y": 57651.00037578667,
|
|
|
+ "z": 5655.3879621350034
|
|
|
+ },
|
|
|
+ "target": {
|
|
|
+ "x": 17800.471026131087,
|
|
|
+ "y": 55006.96650831537,
|
|
|
+ "z": 5318.7948325922225
|
|
|
+ },
|
|
|
+ "coordinateSystem": "world",
|
|
|
+ "stayTime": 1,
|
|
|
+ "timeBetweenFrames": 4
|
|
|
+ }, {
|
|
|
+ "id": "31b3a96c-6c32-4c45-8cea-28cbab623454",
|
|
|
+ "position": {
|
|
|
+ "x": 17652.045955303536,
|
|
|
+ "y": 47105.492406772886,
|
|
|
+ "z": 5531.778870514287
|
|
|
+ },
|
|
|
+ "target": {
|
|
|
+ "x": 17705.91403872816,
|
|
|
+ "y": 42112.36852129977,
|
|
|
+ "z": 5318.7948325922234
|
|
|
+ },
|
|
|
+ "coordinateSystem": "world",
|
|
|
+ "stayTime": 0,
|
|
|
+ "timeBetweenFrames": 1
|
|
|
+ }, {
|
|
|
+ "id": "8ea20021-f8f6-4fa8-8ec0-fd73fb0d5ceb",
|
|
|
+ "position": {
|
|
|
+ "x": 15849.236287402164,
|
|
|
+ "y": 42214.4522097924,
|
|
|
+ "z": 5413.46710639681
|
|
|
+ },
|
|
|
+ "target": {
|
|
|
+ "x": 17705.91403872816,
|
|
|
+ "y": 42112.36852129977,
|
|
|
+ "z": 5318.7948325922234
|
|
|
+ },
|
|
|
+ "coordinateSystem": "world",
|
|
|
+ "stayTime": 0,
|
|
|
+ "timeBetweenFrames": 4
|
|
|
+ }],
|
|
|
+ wt: null,
|
|
|
+ stop: true,
|
|
|
+ drapShow: false,
|
|
|
+ detail: {
|
|
|
+ title: '',
|
|
|
+ list: [],
|
|
|
+ imageUrl: ''
|
|
|
+ },
|
|
|
+ value: true,
|
|
|
+ type: '1',
|
|
|
+ modelVisible: false,
|
|
|
+ isVideo: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let width = document.getElementById('distribution').clientWidth;
|
|
|
+ document.getElementById('distribution-drap').style.left = (width - 330) + 'px';
|
|
|
+ document.getElementById('distribution-drap').style.top = '30px';
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.bimViewer) this.bimViewer.destroy();
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ noticeBoard
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ dragStart(evt) {
|
|
|
+ let oEvent = evt || event; //获取事件对象，这个是兼容写法
|
|
|
+ if (oEvent.target.id !== 'title') return;
|
|
|
+ let div = document.getElementById('distribution-drap');
|
|
|
+ let disX = oEvent.clientX - parseInt(div.style.left || 0);
|
|
|
+ let disY = oEvent.clientY - parseInt(div.style.top || 0);
|
|
|
+ div.style.left = oEvent.clientX - disX + 'px';
|
|
|
+ div.style.top = oEvent.clientY - disY + 'px';
|
|
|
+ document.onmousemove = function(evt) { //实时改变目标元素obox的位置
|
|
|
+ let oEvent = evt || event;
|
|
|
+ div.style.left = oEvent.clientX - disX + 'px';
|
|
|
+ div.style.top = oEvent.clientY - disY + 'px';
|
|
|
+ }
|
|
|
+ //停止拖动
|
|
|
+ document.onmouseup = function() {
|
|
|
+ document.onmousemove = null;
|
|
|
+ document.onmouseup = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showDrap(type) {
|
|
|
+ this.detail = bimData[type];
|
|
|
+ this.drapShow = true;
|
|
|
+ },
|
|
|
+ getWalk() {
|
|
|
+ let walk = this.bimViewer.getWalkthroughData();
|
|
|
+ this.walk.push(walk);
|
|
|
+ },
|
|
|
+ startWalk() {
|
|
|
+ if (!this.bimViewer) return;
|
|
|
+ if (!this.stop) return this.pauseWalk();
|
|
|
+ if (this.wt) {
|
|
|
+ this.stop = false;
|
|
|
+ this.wt.play();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.wt = this.bimViewer.walkthrough();
|
|
|
+ this.wt.setKeyFrames(this.walk);
|
|
|
+ this.wt.setKeyFrameCallback(this.keyFrameCallback);
|
|
|
+ this.wt.stopCallback(() => {
|
|
|
+ this.wt = null;
|
|
|
+ this.stop = true;
|
|
|
+ this.bimViewer.clearDrawable();
|
|
|
+ });
|
|
|
+ this.wt.play();
|
|
|
+ this.stop = false;
|
|
|
+ },
|
|
|
+ pauseWalk() { //暂停漫游
|
|
|
+ if (!this.wt) return;
|
|
|
+ this.wt.pause();
|
|
|
+ this.stop = true;
|
|
|
+ },
|
|
|
+ stopWalk() {
|
|
|
+ if (!this.wt) return;
|
|
|
+ this.wt.stop();
|
|
|
+ },
|
|
|
+ keyFrameCallback(idx) {
|
|
|
+ this.bimViewer.clearDrawable();
|
|
|
+ switch (idx) {
|
|
|
+ case 1:
|
|
|
+ this.setWalkTip([{
|
|
|
+ "x": 28541.119932730617,
|
|
|
+ "y": 58417.36071856575,
|
|
|
+ "z": 6427.360849221129
|
|
|
+ }],
|
|
|
+ `<div class="tips-11" style="transform: scale(0.8);">
|
|
|
+ <div class="title">
|
|
|
+ <img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/34e112ef844245d79d500d120d256fbf" alt="">
|
|
|
+ <div class="name">门禁</div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label" style="width:70px">门禁状态:</div>
|
|
|
+ <div class="value">开门</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label" style="width:70px">设备状态:</div>
|
|
|
+ <div class="value">在线</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>`,
|
|
|
+ 0, -40, 3
|
|
|
+ );
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ this.setWalkTip([{
|
|
|
+ "x": 24463.909729764284,
|
|
|
+ "y": 57651.00037578667,
|
|
|
+ "z": 5322.813791510498
|
|
|
+ }],
|
|
|
+ `<div class="tips-5" style="width:180px;transform: scale(0.8);">
|
|
|
+ <div class="title"><i class="iconfont huifont-shuzhuangcaidanxiala"></i>照明设备</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="tips-6">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">灯光名称</div>
|
|
|
+ <div class="value">1号照明设备</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">灯光位置</div>
|
|
|
+ <div class="value">室内</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">灯光操作</div>
|
|
|
+ <div class="value">
|
|
|
+ <label class="hui-switch">
|
|
|
+ <input type="checkbox" id="myCheckbox">
|
|
|
+ <span class="slider round"></span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `,
|
|
|
+ -100, -40, 1
|
|
|
+ );
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ this.setWalkTip([{
|
|
|
+ "x": 15849.236287402164,
|
|
|
+ "y": 50180.68576608929,
|
|
|
+ "z": 5484.147938887848
|
|
|
+ }],
|
|
|
+ `<div class="tips-9">
|
|
|
+ <div class="line" style="width:48px;"><img src="https://static.bimface.com/attach/24ce9654e88a4218908f46279e5c4b04_line.png" height="35" width="49"/></div>
|
|
|
+ <div class="article">
|
|
|
+ <div class="title">
|
|
|
+ <i class="iconfont huifont-shuzhuangcaidanxiala"></i>
|
|
|
+ 温度传感器
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">温度</div>
|
|
|
+ <div class="value">16°C</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">湿度</div>
|
|
|
+ <div class="value">30%</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">CO2</div>
|
|
|
+ <div class="value">15ppm</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">Tvoc</div>
|
|
|
+ <div class="value">1.5ppm</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">PM2.5</div>
|
|
|
+ <div class="value">2.3ug/m3</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>`,
|
|
|
+ 0, -40, 2
|
|
|
+ );
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ getBimViewToken(bimData.fileId).then(this.successFunc);
|
|
|
+ },
|
|
|
+ selectItem(item) {
|
|
|
+ this.drapShow = false;
|
|
|
+ this.clearAll();
|
|
|
+ if (item.id === 5) return this.setWalk();
|
|
|
+ this.bimViewer.setStatus(bimData.cameraState);
|
|
|
+ if (this.pathNode.id == item.id) return this.pathNode = {};
|
|
|
+ this.pathNode = item;
|
|
|
+ if (item.id === 1) this.setFloor();
|
|
|
+ if (item.id === 2) this.setMonitor();
|
|
|
+ if (item.id === 3) this.setDevice();
|
|
|
+ if (item.id === 4) this.setLight();
|
|
|
+ },
|
|
|
+ clearAll() {
|
|
|
+ if (!this.bimViewer) return;
|
|
|
+ this.clearFloor();
|
|
|
+ this.bimViewer.clear3DMaker();
|
|
|
+ },
|
|
|
+ setFloor() { //设置房间
|
|
|
+ for (var i = 0; i < bimData.roomList.length; i++) {
|
|
|
+ let boundary = bimData.roomList[i].boundary;
|
|
|
+ let arrX = boundary.map(node => node.x);
|
|
|
+ let arrY = boundary.map(node => node.y);
|
|
|
+ let maxX = Math.max(...arrX);
|
|
|
+ let minX = Math.min(...arrX);
|
|
|
+ let maxY = Math.max(...arrY);
|
|
|
+ let minY = Math.min(...arrY);
|
|
|
+ let x = (maxX - minX) / 2 + minX;
|
|
|
+ let y = (maxY - minY) / 2 + minY;
|
|
|
+ if (bimData.roomList[i].name) {
|
|
|
+ this.bimViewer.addDrawable({
|
|
|
+ position: {
|
|
|
+ x: x,
|
|
|
+ y: y,
|
|
|
+ z: boundary[0].z + bimData.roomList[i].height
|
|
|
+ },
|
|
|
+ offsetX: -75,
|
|
|
+ offsetY: -40,
|
|
|
+ html: ` <div class="tips-4">${bimData.roomList[i].name}<i class="iconfont huifont-sanjiaojiantou-xia"></i></div>`,
|
|
|
+ id: 'room' + bimData.roomList[i].roomId
|
|
|
+ }, data => {
|
|
|
+ this.showDrap('organizationDetail');
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (bimData.roomList[i].floorName) {
|
|
|
+ this.bimViewer.addDrawable({
|
|
|
+ position: {
|
|
|
+ x: x,
|
|
|
+ y: y,
|
|
|
+ z: boundary[0].z + bimData.roomList[i].height
|
|
|
+ },
|
|
|
+ offsetX: -30,
|
|
|
+ offsetY: 5,
|
|
|
+ html: ` <div class="floor-name">${bimData.roomList[i].floorName}</div>`,
|
|
|
+ id: 'floor' + bimData.roomList[i].roomId
|
|
|
+ }, data => {
|
|
|
+ let floor = data.id.split('floor');
|
|
|
+ let item = bimData.roomList.find(node => node.roomId == floor[floor.length - 1]);
|
|
|
+ if (item.floorName === '卫生间' || item.floorName === '公共区域' || item.floorName ===
|
|
|
+ '楼梯间' || item.floorName === '电梯间' || item.floorName === '设备间') return;
|
|
|
+ this.showDrap('roomDetail');
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearFloor() { //清除房间
|
|
|
+ let ids = bimData.roomList.filter(node => node.name).map(node => node.roomId);
|
|
|
+ let arr = ids.map(id => 'room' + id);
|
|
|
+ this.bimViewer.clearDrawable(arr);
|
|
|
+ },
|
|
|
+ setMonitor() { //设置摄像头
|
|
|
+ for (var i = 0; i < bimData.monitorList.length; i++) {
|
|
|
+ this.bimViewer.add3DMaker('image', bimData.monitorList[i],
|
|
|
+ './assets/shexiangtou.png', (data) => {
|
|
|
+ this.showDrap('monitorDetail');
|
|
|
+ }, 'monitor' + i);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setDevice() {
|
|
|
+ for (var i = 0; i < bimData.deviceList.length; i++) {
|
|
|
+ this.bimViewer.add3DMaker('image', bimData.deviceList[i],
|
|
|
+ './assets/kongtiao.png', (data) => {
|
|
|
+ this.showDrap('deviceDetail');
|
|
|
+ }, 'device' + i);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setLight() {
|
|
|
+ for (var i = 0; i < bimData.deviceList.length; i++) {
|
|
|
+ this.bimViewer.add3DMaker('image', bimData.deviceList[i],
|
|
|
+ './assets/zhaoming.png', (data) => {
|
|
|
+ this.showDrap('lightDetail');
|
|
|
+ }, 'light' + i);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ open(type) {
|
|
|
+ this.type = type;
|
|
|
+ this.modelVisible = true;
|
|
|
+ },
|
|
|
+ setWalk() {
|
|
|
+ this.isWalk = true;
|
|
|
+ if (!this.bimViewer) return;
|
|
|
+ this.bimViewer.setCamera({
|
|
|
+ isPan: false,
|
|
|
+ isRotate: false,
|
|
|
+ isZoom: false
|
|
|
+ })
|
|
|
+ this.bimViewer.clearAllRooms();
|
|
|
+ this.bimViewer.clearDrawable();
|
|
|
+ this.bimViewer.setStatus({
|
|
|
+ "name": "persp",
|
|
|
+ "position": {
|
|
|
+ "x": 31275.924035070195,
|
|
|
+ "y": 81825.40309217027,
|
|
|
+ "z": 2487.042450388499
|
|
|
+ },
|
|
|
+ "target": {
|
|
|
+ "x": 31103.434636796967,
|
|
|
+ "y": 76858.87835140715,
|
|
|
+ "z": 1941.925516736012
|
|
|
+ },
|
|
|
+ "up": {
|
|
|
+ "x": -0.0037845383536143865,
|
|
|
+ "y": -0.10897273074603832,
|
|
|
+ "z": 0.9940375351178653
|
|
|
+ },
|
|
|
+ "near": 9.820226443000132,
|
|
|
+ "far": 84695.13034337708,
|
|
|
+ "zoom": 1.63942317784,
|
|
|
+ "version": 1,
|
|
|
+ "fov": 45,
|
|
|
+ "aspect": 1.9448818897637796,
|
|
|
+ "coordinateSystem": "world"
|
|
|
+ });
|
|
|
+ },
|
|
|
+ stopWalkFunc() {
|
|
|
+ this.bimViewer.setCamera({
|
|
|
+ isPan: true,
|
|
|
+ isRotate: true,
|
|
|
+ isZoom: true
|
|
|
+ })
|
|
|
+ this.bimViewer.clearDrawable();
|
|
|
+ this.isWalk = false;
|
|
|
+ this.stopWalk();
|
|
|
+ this.bimViewer.setStatus(bimData.cameraState);
|
|
|
+ this.initFloor();
|
|
|
+ if (this.pathNode.id === 1) this.setFloor();
|
|
|
+ if (this.pathNode.id === 2) this.setMonitor();
|
|
|
+ if (this.pathNode.id === 3) this.setDevice();
|
|
|
+ if (this.pathNode.id === 4) this.setLight();
|
|
|
+ },
|
|
|
+ setWalkTip(data, html, x, y, type) {
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ this.bimViewer.addDrawable({
|
|
|
+ position: data[i],
|
|
|
+ offsetX: x,
|
|
|
+ offsetY: y,
|
|
|
+ html: html,
|
|
|
+ id: 'walktip' + type + i
|
|
|
+ }, data => {
|
|
|
+ if (type === 1) {
|
|
|
+ this.showDrap('lightDetail');
|
|
|
+ } else if (type === 2) {
|
|
|
+ this.showDrap('roomDetail');
|
|
|
+ } else if (type === 3) {
|
|
|
+ this.showDrap('deviceDetail');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ returnRGBA(color) {
|
|
|
+ let [r, g, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
|
|
|
+ return {
|
|
|
+ r,
|
|
|
+ g,
|
|
|
+ b,
|
|
|
+ a
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCamera() {
|
|
|
+ if (!this.bimViewer) return;
|
|
|
+ console.log(this.bimViewer.getCameraState());
|
|
|
+ },
|
|
|
+ setRoom(data) {
|
|
|
+ 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.bimViewer.insertRooms({
|
|
|
+ id: this.roomId,
|
|
|
+ boundary: {
|
|
|
+ "outer": this.positionData
|
|
|
+ },
|
|
|
+ height: 500,
|
|
|
+ roomColor: this.returnRGBA('rgba(19, 206, 102, 0.6)')
|
|
|
+ })
|
|
|
+ this.bimViewer.clear3DMaker();
|
|
|
+ this.positionData = [];
|
|
|
+ this.bimViewer.editRoom({
|
|
|
+ roomId: this.roomId
|
|
|
+ })
|
|
|
+ this.roomId++;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ successFunc(res) {
|
|
|
+ if (res.state) {
|
|
|
+ this.bimViewer = new bimView({
|
|
|
+ dom: document.getElementById('previewBim' + this._uid),
|
|
|
+ viewToken: res.data,
|
|
|
+ roamAngle: bimData.roamAngle,
|
|
|
+ initHomeViewer: bimData.cameraState,
|
|
|
+ renderSuccess: () => {
|
|
|
+ this.renderSuccess = true;
|
|
|
+ this.bimViewer.setStatus(bimData.cameraState);
|
|
|
+ // this.bimViewer.setToolbars(true);
|
|
|
+ this.bimViewer.hideComponentsById(['1769', '1765'])
|
|
|
+ },
|
|
|
+ roomSaved: data => {
|
|
|
+ console.log(data);
|
|
|
+ },
|
|
|
+ click: data => {
|
|
|
+ console.log(data);
|
|
|
+ // this.setRoom(data);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initFloor() {
|
|
|
+ for (var i = 0; i < bimData.roomList.length; i++) {
|
|
|
+ this.bimViewer.insertRooms({
|
|
|
+ id: bimData.roomList[i].roomId,
|
|
|
+ boundary: {
|
|
|
+ "outer": bimData.roomList[i].boundary
|
|
|
+ },
|
|
|
+ height: bimData.roomList[i].height,
|
|
|
+ roomColor: this.returnRGBA(bimData.roomList[i].color)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .distribution-index {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ background: $--box-background;
|
|
|
+
|
|
|
+ .video-toggle {
|
|
|
+ position: fixed;
|
|
|
+ width: 700px;
|
|
|
+ height: 500px;
|
|
|
+ background: #000;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ .chart-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ background-size: contain;
|
|
|
+ position: relative;
|
|
|
+ background-color: $--background;
|
|
|
+ padding-left: 15px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .el-icon-close {
|
|
|
+ padding: 8px;
|
|
|
+ font-size: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chart-title:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ height: 2px;
|
|
|
+ left: 0px;
|
|
|
+ right: 0;
|
|
|
+ border-bottom: 2px solid;
|
|
|
+ -o-border-image: linear-gradient(315deg, rgba(167, 208, 255, 0), rgba(110, 163, 255, .3)) 2 2;
|
|
|
+ border-image: linear-gradient(315deg, rgba(167, 208, 255, 0), rgba(110, 163, 255, .3)) 2 2;
|
|
|
+ bottom: .5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-toggle-box {
|
|
|
+ flex: 1;
|
|
|
+ height: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ video {
|
|
|
+ max-height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips-4 {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .floor-name {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 60px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-button {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 998;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ left: 0;
|
|
|
+ bottom: 30px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item {
|
|
|
+ width: 100px;
|
|
|
+ height: 32px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #AAB5C7;
|
|
|
+ line-height: 30px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ text-align: center;
|
|
|
+ background-image: url(../../../assets/image/common/tab.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 0 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item.active,
|
|
|
+ .menu-item:hover {
|
|
|
+ color: #fff;
|
|
|
+ background-image: url(../../../assets/image/common/tab_active.png);
|
|
|
+ }
|
|
|
+
|
|
|
+ .previewBim {
|
|
|
+ flex: 1;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .distribution-drap {
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ right: 30px;
|
|
|
+ background: $--color-background;
|
|
|
+ width: 300px;
|
|
|
+ border-radius: 8px;
|
|
|
+ z-index: 998;
|
|
|
+ right: 30px;
|
|
|
+ top: 30px;
|
|
|
+
|
|
|
+ .distribution-drap-title {
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .distribution-drap-title-content {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: move;
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-circle-close {
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-list {
|
|
|
+ padding: 0 10px 0px 10px;
|
|
|
+ font-size: 13px;
|
|
|
+
|
|
|
+ .user-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 2px;
|
|
|
+
|
|
|
+ .user-value {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ margin-left: 2px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-item>div {
|
|
|
+ background: #232A37;
|
|
|
+ line-height: 34px;
|
|
|
+ padding: 0 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-mask {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ opacity: 0;
|
|
|
+ transition: 300ms;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-box:hover {
|
|
|
+ .video-mask {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .walk-box {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -80px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 998;
|
|
|
+
|
|
|
+ .walk-box-item {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 80px;
|
|
|
+ background: #232A37;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 20px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 36px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // .bf-house,
|
|
|
+ // .bf-tree-toolbar {
|
|
|
+ // display: none;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+</style>
|
