123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167 |
- <template>
- <div id="baseEditer">
- <div id="fengMap"></div>
- <div class="canvas-container" ref="graphy">
- <a-button type="primary" @click="undo">取消</a-button>
- <a-button type="primary" @click="redo">回复</a-button>
- <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
- </div>
- </div>
- </template>
- <script>
- import { SFengParser } from "@saga-web/feng-map";
- import { SFloorParser } from "@saga-web/big";
- import { SPoint } from "@saga-web/draw";
- import { SGraphyView, SGraphyScene } from "@saga-web/graphy/lib";
- import { SPolygonItem } from "./mapClass/SPolygonItem";
- import { FloorView } from "./../lib/FloorView";
- export default {
- data() {
- return {
- appName: "万达可视化系统",
- key: "23f30a832a862c58637a4aadbf50a566",
- mapServerURL: "/wanda",
- fmapID: "1001724_29",
- fmap: null,
- canvasWidth: 700,
- canvasHeight: 800,
- fParser: null,
- item: null
- };
- },
- mounted() {
- this.canvasWidth = this.$refs.graphy.offsetWidth;
- this.canvasHeight = this.$refs.graphy.offsetHeight;
- this.init();
- },
- methods: {
- init() {
- // document.getElementById(`canvas`).focus()
- this.clearGraphy();
- this.scene = new SGraphyScene();
- // this.fmap = new SFengParser(
- // "fengMap",
- // this.mapServerURL,
- // this.key,
- // this.appName,
- // null
- // );
- // console.log(this.fmap);
- // this.fmap.parseData("1001724_29", 1, res => {
- // console.log(res);
- // this.fParser = new SFloorParser(null);
- // console.log(this.fParser);
- // this.fParser.parseData(res);
- // this.fParser.spaceList.forEach(t => this.scene.addItem(t));
- // this.fParser.wallList.forEach(t => this.scene.addItem(t));
- // this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
- // this.fParser.doorList.forEach(t => this.scene.addItem(t));
- // this.fParser.columnList.forEach(t => this.scene.addItem(t));
- // this.fParser.casementList.forEach(t => this.scene.addItem(t));
- this.addPolyLine();
- // this.DirectRelationItem();
- this.view.scene = this.scene;
- this.view.fitSceneToView();
- // });
- },
- // 引入构建多边形类
- addPolyLine() {
- const PointList = [
- new SPoint(0, 0),
- new SPoint(50, 0),
- new SPoint(50, 50),
- new SPoint(0, 50)
- ];
- const Polylines = new SPolygonItem(null);
- Polylines.setStatus = 3;
- // Polylines.setPointList = PointList
- this.scene.addItem(Polylines);
- this.scene.grabItem = Polylines;
- this.item = Polylines;
- },
- undo() {
- this.item.undo();
- },
- redo() {
- this.item.redo();
- },
- // 引入折线
- DirectRelationItem() {
- const data = {
- PointList: [
- { X: -138.71000000089407, Y: -17.5 },
- { X: -130.31000000052154, Y: -17.5 }
- ]
- };
- const directRelationItem = new DirectRelationItem(null, data);
- this.scene.addItem(directRelationItem);
- },
- clearGraphy() {
- if (this.view) {
- this.view.scene = null;
- return;
- }
- this.view = new FloorView("canvas");
- document.getElementById("canvas").focus();
- },
- spaceClick(space, event) {
- const item = new SImageItem(null, {
- Width: 32,
- Height: 32,
- Url:
- "https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1569891320,3644984535&fm=85&app=52&f=JPEG?w=121&h=75&s=891B0FD8964406EF8091EA200300E056"
- });
- item.moveTo(event[0].x, event[0].y);
- item.zOrder = 999;
- item.connect("mousedown", this, this.iconClick);
- this.scene.addItem(item);
- setInterval(() => {
- item.text += "魔";
- }, 1000);
- },
- iconClick(item, event) {
- console.log(2222222222222);
- },
- changeFloor() {},
- changeStatus(name) {
- switch (name) {
- case "选择":
- // test init
- this.init();
- break;
- case "画线":
- this.scene.isLining = true;
- console.log("lining");
- break;
- case "画文字":
- this.scene.isTexting = true;
- break;
- case "画图片":
- this.scene.isImging = true;
- break;
- default:
- console.log(name);
- break;
- }
- }
- }
- };
- </script>
- <style lang="less" scoped>
- #baseEditer {
- background: #ccc;
- width: 100%;
- height: 100%;
- // position: relative;
- #fengMap {
- position: absolute;
- width: 100px;
- height: 100px;
- z-index: -1;
- }
- .canvas-container {
- width: 100%;
- height: 100%;
- }
- }
- </style>
|