|
@@ -0,0 +1,419 @@
|
|
|
+<template>
|
|
|
+ <div class="distribution-index">
|
|
|
+ <div class="">
|
|
|
+ <el-button @click="getCamera">视角</el-button>
|
|
|
+ </div>
|
|
|
+ <div :id="'previewBim'+_uid" class="previewBim"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getBimViewToken,
|
|
|
+ } from '@/httpApi/bim'
|
|
|
+ import bimView from '@/uitls/controls'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ room: {
|
|
|
+ id: 3
|
|
|
+ },
|
|
|
+ form: {
|
|
|
+ color: 'rgba(19, 206, 102, 0.8)'
|
|
|
+ },
|
|
|
+ bimViewer: {},
|
|
|
+ positionData: [],
|
|
|
+ roomList: [{
|
|
|
+ "roomId": 1,
|
|
|
+ "boundary": [{
|
|
|
+ "x": 65301.002908259376,
|
|
|
+ "y": 29393.802197628767,
|
|
|
+ "z": 51727.57574782008
|
|
|
+ }, {
|
|
|
+ "x": 58499.63949329394,
|
|
|
+ "y": 29375.37031837835,
|
|
|
+ "z": 51727.57574782008
|
|
|
+ }, {
|
|
|
+ "x": 58518.07137246728,
|
|
|
+ "y": 22868.91696958714,
|
|
|
+ "z": 51727.57574782008
|
|
|
+ }, {
|
|
|
+ "x": 65282.57102908603,
|
|
|
+ "y": 22904.222759627923,
|
|
|
+ "z": 51727.57574782008
|
|
|
+ }],
|
|
|
+ "height": 3772.4428519722933,
|
|
|
+ "color": 'rgba(19, 206, 102, 0.8)',
|
|
|
+ "name": "温州有极数据科技有限公司",
|
|
|
+ "position": {
|
|
|
+ "x": 61909.92364837881,
|
|
|
+ "y": 26027.70155633194,
|
|
|
+ "z": 55500.018565508086
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ "roomId": 2,
|
|
|
+ "boundary": [{
|
|
|
+ "x": 65300.015756627545,
|
|
|
+ "y": 7708.564249362347,
|
|
|
+ "z": 51727.66702773713
|
|
|
+ }, {
|
|
|
+ "x": 58533.82463781443,
|
|
|
+ "y": 7701.890357865949,
|
|
|
+ "z": 51727.66702773713
|
|
|
+ }, {
|
|
|
+ "x": 58524.11585056524,
|
|
|
+ "y": 22694.934346040158,
|
|
|
+ "z": 51727.66702773713
|
|
|
+ }, {
|
|
|
+ "x": 65282.79725091247,
|
|
|
+ "y": 22660.681684285173,
|
|
|
+ "z": 51727.66702773713
|
|
|
+ }],
|
|
|
+ "height": 3761.004364804612,
|
|
|
+ "color": 'rgba(212, 99, 50, 0.8)',
|
|
|
+ "name": "常州红信数据科技有限公司",
|
|
|
+ "position": {
|
|
|
+ "x": 61909.52849793746,
|
|
|
+ "y": 15341.182488294236,
|
|
|
+ "z": 55488.671475674135
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ "roomId": 3,
|
|
|
+ "boundary": [{
|
|
|
+ "x": 65298.97739890984,
|
|
|
+ "y": 7486.95513177144,
|
|
|
+ "z": 51739.37694575865
|
|
|
+ }, {
|
|
|
+ "x": 58541.39862729889,
|
|
|
+ "y": 7465.771499255684,
|
|
|
+ "z": 51739.37694575865
|
|
|
+ }, {
|
|
|
+ "x": 58520.214994786,
|
|
|
+ "y": 136.2346489944593,
|
|
|
+ "z": 51739.37694575865
|
|
|
+ }, {
|
|
|
+ "x": 65235.42650137118,
|
|
|
+ "y": 134.55507182463234,
|
|
|
+ "z": 51739.37694575865
|
|
|
+ }],
|
|
|
+ "height": 3760.6065785629253,
|
|
|
+ "color": 'rgba(217, 28, 13, 0.8)',
|
|
|
+ "name": "温州有极数据科技有限公司",
|
|
|
+ "position": {
|
|
|
+ "x": 61644.49580146522,
|
|
|
+ "y": 4188.358264994062,
|
|
|
+ "z": 55499.983473087144
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ "roomId": 4,
|
|
|
+ "boundary": [{
|
|
|
+ "x": 64282.100800101376,
|
|
|
+ "y": -4581.677828517527,
|
|
|
+ "z": 51726.91655361816
|
|
|
+ }, {
|
|
|
+ "x": 61778.98823700754,
|
|
|
+ "y": -3715.9362500489406,
|
|
|
+ "z": 51726.91655361816
|
|
|
+ }, {
|
|
|
+ "x": 40540.38319271916,
|
|
|
+ "y": -10655.39203978944,
|
|
|
+ "z": 51726.91655361816
|
|
|
+ }, {
|
|
|
+ "x": 41534.90684203548,
|
|
|
+ "y": -13507.205685249892,
|
|
|
+ "z": 51726.91655361816
|
|
|
+ }, {
|
|
|
+ "x": 42883.03889999759,
|
|
|
+ "y": -15562.554560489742,
|
|
|
+ "z": 51726.91655361816
|
|
|
+ }, {
|
|
|
+ "x": 45048.890402953126,
|
|
|
+ "y": -16844.385041822123,
|
|
|
+ "z": 51726.91655361816
|
|
|
+ }, {
|
|
|
+ "x": 47833.5566210388,
|
|
|
+ "y": -16976.9881950634,
|
|
|
+ "z": 51726.91655361816
|
|
|
+ }, {
|
|
|
+ "x": 55347.73530476206,
|
|
|
+ "y": -14435.427757938858,
|
|
|
+ "z": 51726.91655361816
|
|
|
+ }, {
|
|
|
+ "x": 58596.512559195355,
|
|
|
+ "y": -12424.279933779433,
|
|
|
+ "z": 51726.91655361816
|
|
|
+ }, {
|
|
|
+ "x": 61425.37982836176,
|
|
|
+ "y": -9661.714241252754,
|
|
|
+ "z": 51726.91655361816
|
|
|
+ }, {
|
|
|
+ "x": 63215.52239713112,
|
|
|
+ "y": -7031.73130682522,
|
|
|
+ "z": 51726.91655361816
|
|
|
+ }],
|
|
|
+ "height": 3769.654197662574,
|
|
|
+ "color": 'rgba(146, 129, 203, 0.8)',
|
|
|
+ "name": "温州有极数据科技有限公司",
|
|
|
+ "position": {
|
|
|
+ "x": 52719.8253610701,
|
|
|
+ "y": -10529.198177480825,
|
|
|
+ "z": 55496.57082760499
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ "roomId": 5,
|
|
|
+ "boundary": [{
|
|
|
+ "x": 52836.60279716242,
|
|
|
+ "y": 42880.53144980387,
|
|
|
+ "z": 54450.43279453355
|
|
|
+ }, {
|
|
|
+ "x": 53413.889616341905,
|
|
|
+ "y": 42303.24463059887,
|
|
|
+ "z": 54450.43279453355
|
|
|
+ }, {
|
|
|
+ "x": 53389.80565615653,
|
|
|
+ "y": 39554.316924804836,
|
|
|
+ "z": 54450.43279453355
|
|
|
+ }, {
|
|
|
+ "x": 42688.440360875604,
|
|
|
+ "y": 28895.307372536055,
|
|
|
+ "z": 54450.43279453355
|
|
|
+ }, {
|
|
|
+ "x": 40730.09129915936,
|
|
|
+ "y": 30741.750773570348,
|
|
|
+ "z": 54450.43279453355
|
|
|
+ }],
|
|
|
+ "height": 3769.4747474747346,
|
|
|
+ "color": 'rgba(43, 98, 206, 0.8)',
|
|
|
+ "name": "温州有极数据科技有限公司",
|
|
|
+ "position": {
|
|
|
+ "x": 48190.05608818472,
|
|
|
+ "y": 35246.636819550826,
|
|
|
+ "z": 58219.907539330314
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ "roomId": 6,
|
|
|
+ "boundary": [{
|
|
|
+ "x": 53252.583244723704,
|
|
|
+ "y": 11770.939687664955,
|
|
|
+ "z": 51755.810563242536
|
|
|
+ }, {
|
|
|
+ "x": 45051.42118506986,
|
|
|
+ "y": 11770.939687686008,
|
|
|
+ "z": 51755.810563242536
|
|
|
+ }, {
|
|
|
+ "x": 44737.847341612505,
|
|
|
+ "y": 11286.64027836041,
|
|
|
+ "z": 51755.810563242536
|
|
|
+ }, {
|
|
|
+ "x": 47391.16447855934,
|
|
|
+ "y": 3183.8405888967004,
|
|
|
+ "z": 51755.810563242536
|
|
|
+ }, {
|
|
|
+ "x": 53542.03602329972,
|
|
|
+ "y": 3230.2046080489345,
|
|
|
+ "z": 51755.810563242536
|
|
|
+ }, {
|
|
|
+ "x": 53566.15708818105,
|
|
|
+ "y": 11407.24560276627,
|
|
|
+ "z": 51755.810563242536
|
|
|
+ }],
|
|
|
+ "height": 3779.0131870802215,
|
|
|
+ "color": 'rgba(23, 205, 166, 0.8)',
|
|
|
+ "name": "温州有极数据科技有限公司",
|
|
|
+ "position": {
|
|
|
+ "x": 48936.719108250945,
|
|
|
+ "y": 7910.906933673414,
|
|
|
+ "z": 55534.82372013342
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ "roomId": 7,
|
|
|
+ "boundary": [{
|
|
|
+ "x": 46929.27703547801,
|
|
|
+ "y": -5197.181378704704,
|
|
|
+ "z": 51718.82444935819
|
|
|
+ }, {
|
|
|
+ "x": 39559.57408641113,
|
|
|
+ "y": -7591.770766418368,
|
|
|
+ "z": 51718.82444935819
|
|
|
+ }, {
|
|
|
+ "x": 36038.85159802831,
|
|
|
+ "y": 3128.930619364195,
|
|
|
+ "z": 51718.82444935819
|
|
|
+ }, {
|
|
|
+ "x": 43439.65694851592,
|
|
|
+ "y": 5528.7603970144,
|
|
|
+ "z": 51718.82444935819
|
|
|
+ }],
|
|
|
+ "height": 3748.4203000716443,
|
|
|
+ "color": 'rgba(161, 204, 56, 0.8)',
|
|
|
+ "name": "温州有极数据科技有限公司",
|
|
|
+ "position": {
|
|
|
+ "x": 41907.34820094069,
|
|
|
+ "y": -1162.0082262849783,
|
|
|
+ "z": 55467.24468785306
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ "roomId": 8,
|
|
|
+ "boundary": [{
|
|
|
+ "x": 53587.99519867442,
|
|
|
+ "y": 29787.65483279155,
|
|
|
+ "z": 51739.68176673229
|
|
|
+ }, {
|
|
|
+ "x": 50703.62809283503,
|
|
|
+ "y": 29801.793887229833,
|
|
|
+ "z": 51739.68176673229
|
|
|
+ }, {
|
|
|
+ "x": 50704.434134481475,
|
|
|
+ "y": 27299.654701546286,
|
|
|
+ "z": 51739.68176673229
|
|
|
+ }, {
|
|
|
+ "x": 49500.00250434939,
|
|
|
+ "y": 27290.0162374829,
|
|
|
+ "z": 51739.68176673229
|
|
|
+ }, {
|
|
|
+ "x": 49475.55523423974,
|
|
|
+ "y": 14430.994824389465,
|
|
|
+ "z": 51739.68176673229
|
|
|
+ }, {
|
|
|
+ "x": 53220.52418704308,
|
|
|
+ "y": 14416.588883508253,
|
|
|
+ "z": 51739.68176673229
|
|
|
+ }, {
|
|
|
+ "x": 53615.229282335,
|
|
|
+ "y": 14743.899036166835,
|
|
|
+ "z": 51739.68176673229
|
|
|
+ }],
|
|
|
+ "height": 3746.4709275529385,
|
|
|
+ "color": 'rgba(109, 25, 207, 0.8)',
|
|
|
+ "name": "温州有极数据科技有限公司",
|
|
|
+ "position": {
|
|
|
+ "x": 51714.23479087421,
|
|
|
+ "y": 22762.2494335807,
|
|
|
+ "z": 55999.983473087166
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ cameraState: {
|
|
|
+ "name": "persp",
|
|
|
+ "position": {
|
|
|
+ "x": 50517.95896971393,
|
|
|
+ "y": 18087.393345876066,
|
|
|
+ "z": 103831.28504386776
|
|
|
+ },
|
|
|
+ "target": {
|
|
|
+ "x": 50179.33289519571,
|
|
|
+ "y": 18085.315836337795,
|
|
|
+ "z": 48242.8852979743
|
|
|
+ },
|
|
|
+ "up": {
|
|
|
+ "x": 0.9999587456475146,
|
|
|
+ "y": 0.006737846700867504,
|
|
|
+ "z": -0.006091668481171846
|
|
|
+ },
|
|
|
+ "near": 47374.75658240926,
|
|
|
+ "far": 52908.82272199217,
|
|
|
+ "zoom": 0.8936346625264161,
|
|
|
+ "version": 1,
|
|
|
+ "fov": 45,
|
|
|
+ "aspect": 2.0664819944598336,
|
|
|
+ "coordinateSystem": "world"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.bimViewer) this.bimViewer.destroy();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ getBimViewToken(10000890570651).then(this.successFunc);
|
|
|
+ },
|
|
|
+ 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());
|
|
|
+ },
|
|
|
+ successFunc(res) {
|
|
|
+ if (res.state) {
|
|
|
+ this.bimViewer = new bimView({
|
|
|
+ dom: document.getElementById('previewBim' + this._uid),
|
|
|
+ viewToken: res.data,
|
|
|
+ renderSuccess: () => {
|
|
|
+ this.bimViewer.setStatus(this.cameraState);
|
|
|
+ for (var i = 0; i < this.roomList.length; i++) {
|
|
|
+ this.bimViewer.insertRooms({
|
|
|
+ id: this.roomList[i].id,
|
|
|
+ boundary: {
|
|
|
+ "outer": this.roomList[i].boundary
|
|
|
+ },
|
|
|
+ height: this.roomList[i].height,
|
|
|
+ roomColor: this.returnRGBA(this.roomList[i].color)
|
|
|
+ })
|
|
|
+ console.log(this.roomList[i].position);
|
|
|
+ this.bimViewer.addDrawable({
|
|
|
+ position: this.roomList[i].position,
|
|
|
+ offsetX: -75,
|
|
|
+ offsetY: -40,
|
|
|
+ html: ` <div class="tips-4">
|
|
|
+ ${this.roomList[i].name}
|
|
|
+ <i class="iconfont huifont-sanjiaojiantou-xia"></i>
|
|
|
+ </div>`,
|
|
|
+ }, data => {})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ roomSaved: data => {
|
|
|
+ console.log(data);
|
|
|
+ },
|
|
|
+ click: data => {
|
|
|
+ let point = data.worldPosition;
|
|
|
+ console.log(point);
|
|
|
+ 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.positionData = [];
|
|
|
+ this.bimViewer.editRoom({
|
|
|
+ roomId: this.room.id
|
|
|
+ })
|
|
|
+ this.room.id++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .distribution-index {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .previewBim {
|
|
|
+ flex: 1;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|