123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263 |
- <template>
- <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>
- <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>
- <div title="下载svg">
- <el-button size="mini" @click="saveSvg" icon="el-icon-printer">下载svg</el-button>
- </div>
- </el-aside>
- <el-main>
- <div ref="graphy" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
- element-loading-background="rgba(0, 0, 0, 0.8)" style="height: 100%">
- <canvas id="bg" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
- </div>
- </el-main>
- </el-container>
- </template>
- <script>
- import { SGraphScene } from "@saga-web/graph/lib/";
- import { DivideFloorScene, LocationPointScene } from "@saga-web/cad-engine/lib";
- import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
- export default {
- data() {
- return {
- view: null,
- scene: null,
- flag: undefined,
- show: true,
- loading: false,
- canvasWidth: 800,
- canvasHeight: 800,
- ModelID: "4cea832a217c11ea962ac576d98e7540"
- }
- },
- mounted() {
- this.canvasWidth = this.$refs.graphy.offsetWidth;
- this.canvasHeight = this.$refs.graphy.offsetHeight;
- this.createGraphy();
- document.onkeydown = E => {
- console.log(E)
- }
- window.onresize = () => {
- this.canvasWidth = this.$refs.graphy.offsetWidth;
- this.canvasHeight = this.$refs.graphy.offsetHeight;
- }
- },
- beforeCreate() {
- // 读取文件
- FileReader.prototype.reading = function ({ encode } = pms) {
- let bytes = new Uint8Array(this.result); //无符号整型数组
- let text = new TextDecoder(encode || 'UTF-8').decode(bytes);
- return text;
- };
- /* 重写readAsBinaryString函数 */
- FileReader.prototype.readAsBinaryString = function (f) {
- if (!this.onload) //如果this未重写onload函数,则创建一个公共处理方式
- this.onload = e => { //在this.onload函数中,完成公共处理
- let rs = this.reading();
- console.log(rs);
- };
- this.readAsArrayBuffer(f); //内部会回调this.onload方法
- };
- },
- 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)
- })
- },
- // 清除canvas
- clearGraphy() {
- if (this.view) {
- this.view.scene = null;
- return
- }
- this.view = new FloorView('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('格式不正确')
- }
- },
- 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()
- },
- saveSvg(){
- if(this.view){
- this.view.saveSceneSvg(`1.svg`, 6400, 4800);
- }
- }
- },
- }
- </script>
- <style lang="less" scoped>
- .el-container {
- background: #fff;
- /deep/ textarea.el-textarea__inner {
- width: 100%;
- height: 100% !important;
- }
- .el-aside {
- padding: 10px;
- border: 1px solid #e4e4e4;
- }
- .el-aside > div {
- margin: 10px auto;
- text-align: right;
- }
- .el-main {
- padding: 10px !important;
- border: 1px solid #e4e4e4;
- border-left: none;
- }
- input[type="file"] {
- display: none;
- }
- }
- </style>
|