|
@@ -2,39 +2,14 @@
|
|
|
<!-- 拓扑图demo -->
|
|
|
<el-container>
|
|
|
<el-aside width="200px" class="el-scrollbar">
|
|
|
- <div style="height: 300px;">
|
|
|
- <el-input type="textarea" v-model="ModelID" placeholder='输入业务空间轮廓线,三维数组,X,Y,Z均为大写;或者模型ID' style="height: 100%;"></el-input>
|
|
|
- </div>
|
|
|
- <div title="上传json文件">
|
|
|
- <el-button size="mini" @click="clickInputFile" icon="el-icon-upload"></el-button>
|
|
|
- <input type="file" @change="filechange" ref="file">
|
|
|
+ <div title="划线">
|
|
|
+ <el-button size="mini" @click="drawline" icon="el-icon-crop"></el-button>
|
|
|
</div>
|
|
|
<div title="适配底图">
|
|
|
<el-button size="mini" @click="fitClick" icon="el-icon-crop"></el-button>
|
|
|
</div>
|
|
|
- <div title="切割">
|
|
|
- <el-button size="mini" @click="cut" icon="el-icon-edit"></el-button>
|
|
|
- </div>
|
|
|
- <div title="清除">
|
|
|
- <el-button size="mini" @click="clear" icon="el-icon-refresh-left"></el-button>
|
|
|
- </div>
|
|
|
- <div title="定位">
|
|
|
- <el-button size="mini" @click="location" icon="el-icon-position"></el-button>
|
|
|
- </div>
|
|
|
- <div title="开启/关闭吸附">
|
|
|
- <el-button size="mini" @click="absorb" icon="el-icon-price-tag"></el-button>
|
|
|
- </div>
|
|
|
- <div title="矩形选择">
|
|
|
- <el-button size="mini" @click="rectSelection" icon="el-icon-mouse"></el-button>
|
|
|
- </div>
|
|
|
- <div title="通过模型ID生成平面图">
|
|
|
- <el-button size="mini" icon="el-icon-s-promotion" @click="modelChange"></el-button>
|
|
|
- </div>
|
|
|
- <div title="通过轮廓线生成业务空间">
|
|
|
- <el-button size="mini" @click="showOutline" icon="el-icon-magic-stick"></el-button>
|
|
|
- </div>
|
|
|
- <div title="打印">
|
|
|
- <el-button size="mini" @click="console" icon="el-icon-printer"></el-button>
|
|
|
+ <div title="添加item">
|
|
|
+ <el-button size="mini" @click="additem" icon="el-icon-crop"></el-button>
|
|
|
</div>
|
|
|
</el-aside>
|
|
|
<el-main>
|
|
@@ -47,20 +22,15 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
|
|
|
-import { SGraphyScene } from "@saga-web/graphy/lib/";
|
|
|
-import { DivideFloorScene, LocationPointScene } from "@saga-web/cad-engine/lib";
|
|
|
-import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
|
|
|
+import { TopoScene, TopoView } from "@saga-web/topology/lib";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
view: null,
|
|
|
scene: null,
|
|
|
- flag: undefined,
|
|
|
- show: true,
|
|
|
loading: false,
|
|
|
canvasWidth: 800,
|
|
|
canvasHeight: 800,
|
|
|
- ModelID: "4cea832a217c11ea962ac576d98e7540"
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -94,22 +64,9 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
createGraphy() {
|
|
|
- let that = this;
|
|
|
- // this.disableRightButton()
|
|
|
- this.clearGraphy()
|
|
|
- that.scene = new DivideFloorScene();
|
|
|
- this.loading = true;
|
|
|
- that.scene.getFloorData('/modelapi/base-graph/query', { ModelId: this.ModelID }).then(res => {
|
|
|
- if (res.Result == 'failure') {
|
|
|
- this.$message.warning(res.Message)
|
|
|
- }
|
|
|
- console.log(res)
|
|
|
- that.view.scene = that.scene;
|
|
|
- that.view.fitSceneToView();
|
|
|
- this.loading = false;
|
|
|
- }).catch(err => {
|
|
|
- console.log(err)
|
|
|
- })
|
|
|
+ this.clearGraphy();
|
|
|
+ this.scene = new TopoScene()
|
|
|
+ this.view.scene = this.scene;
|
|
|
},
|
|
|
// 清除canvas
|
|
|
clearGraphy() {
|
|
@@ -117,109 +74,27 @@ export default {
|
|
|
this.view.scene = null;
|
|
|
return
|
|
|
}
|
|
|
- this.view = new FloorView('bg')
|
|
|
+ this.view = new TopoView('bg')
|
|
|
},
|
|
|
fitClick() {
|
|
|
this.view.fitSceneToView();
|
|
|
},
|
|
|
- showSpace() {
|
|
|
- this.show = !this.show
|
|
|
- // this.scene.isShowDoor = this.show
|
|
|
- // this.scene.isShowSpace = this.show
|
|
|
- this.scene.spaceList.map(t => {
|
|
|
- if (!t.selected) {
|
|
|
- t.visible = false;
|
|
|
- }
|
|
|
- })
|
|
|
- this.scene.isShowColumn = this.show
|
|
|
- // Opt.spaceColor = new SColor(100,100,100,100);
|
|
|
- },
|
|
|
- disableRightButton() {
|
|
|
- this.$refs.canvas.addEventListener('contextmenu', (e) => {
|
|
|
- console.log(e)
|
|
|
- e.preventDefault();
|
|
|
- })
|
|
|
- this.scene.isShowSpace = false
|
|
|
- },
|
|
|
- cut() {
|
|
|
- this.scene.isMarking = true;
|
|
|
- console.log(this.scene)
|
|
|
- },
|
|
|
- console() {
|
|
|
- console.log(this.scene.getSelectedSpaces())
|
|
|
- this.scene.isShowColumn = false
|
|
|
- this.scene.isShowWall = false
|
|
|
- },
|
|
|
- clear() {
|
|
|
- this.scene.clearSceneMark()
|
|
|
- },
|
|
|
- location() {
|
|
|
- // console.log(this)
|
|
|
- this.view.fitSelectedToView()
|
|
|
- },
|
|
|
- move() {
|
|
|
- this.view.isMoving = !this.view.isMoving;
|
|
|
- },
|
|
|
- absorb() {
|
|
|
- this.scene.isAbsorbing = !this.scene.isAbsorbing;
|
|
|
- },
|
|
|
- rectSelection() {
|
|
|
- this.scene.isRectSelection = 1;
|
|
|
- console.log(this.scene)
|
|
|
- },
|
|
|
- showOutline() {
|
|
|
- try {
|
|
|
- let outline = JSON.parse(this.ModelID)
|
|
|
- console.log(outline)
|
|
|
- let obj = {
|
|
|
- RoomLocalName: '哈哈哈哈',
|
|
|
- OutLine: outline,
|
|
|
- RoomID: 12312,
|
|
|
- Color: "#006bd6",
|
|
|
- Height: 5000,
|
|
|
- HeightLightFlag: true
|
|
|
- }
|
|
|
- this.scene.removeAllZone()
|
|
|
- this.scene.addZone(obj);
|
|
|
- this.scene.zoneList[0].selected = true;
|
|
|
- this.view.fitSelectedToView();
|
|
|
- } catch (err) {
|
|
|
- alert('格式不正确')
|
|
|
+ additem() {
|
|
|
+ let equipdata = {
|
|
|
+ ID: this.uuid(),
|
|
|
+ Size: {
|
|
|
+ Width: 200,
|
|
|
+ Height: 100
|
|
|
+ },
|
|
|
+ AnchorList: [{ Pos: { X: 0, Y: 0 }, FaceType: 0 }]
|
|
|
}
|
|
|
+ this.scene.createItem(equipdata)
|
|
|
+ this.scene.grabItem.moveable = true
|
|
|
+ console.log(this.scene)
|
|
|
+ console.log(this.view)
|
|
|
},
|
|
|
- filechange(e) {
|
|
|
- let file = e.target.files[0]
|
|
|
- this.read(file)
|
|
|
- },
|
|
|
- read(f) {
|
|
|
- let rd = new FileReader();
|
|
|
- this.loading = true;
|
|
|
- rd.onload = e => {
|
|
|
- //this.readAsArrayBuffer函数内,会回调this.onload函数。在这里处理结果
|
|
|
- let cont = rd.reading({ encode: 'UTF-8' });
|
|
|
- let res = JSON.parse(cont);
|
|
|
- this.JSON = res;
|
|
|
- this.loadRes()
|
|
|
- };
|
|
|
- rd.readAsBinaryString(f);
|
|
|
- },
|
|
|
- loadRes() {
|
|
|
- if (this.JSON) {
|
|
|
- this.view.scene = null;
|
|
|
- this.scene = new DivideFloorScene();
|
|
|
- this.scene.addBaseMapItem(this.JSON.EntityList[0].Elements)
|
|
|
- this.view.scene = this.scene;
|
|
|
- console.log(this.scene)
|
|
|
- this.view.fitSceneToView();
|
|
|
- }
|
|
|
- this.loading = false;
|
|
|
- },
|
|
|
- modelChange() {
|
|
|
- console.log(this.ModelID)
|
|
|
- this.createGraphy();
|
|
|
- },
|
|
|
- clickInputFile() {
|
|
|
- this.$refs.file.click()
|
|
|
+ drawline(){
|
|
|
+ this.scene.isLining = true;
|
|
|
},
|
|
|
uuid(len, radix) {
|
|
|
var chars = '0123456789abcdef'.split('');
|