123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- <template>
- <div id="baseEditer" ref="graphy">
- <div id="fengMap"></div>
- <div class="canvas-container">
- <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 { FloorView } from "./../lib/FloorView";
- import { EditScence } from "./mapClass/EditScence";
- import bus from "@/bus";
- export default {
- props: {
- cmd: {
- type: Number,
- default: 0,
- required: false
- },
- changeTextMsg: {
- type: String,
- default: "",
- required: false
- }
- },
- data() {
- return {
- appName: "万达可视化系统",
- key: "23f30a832a862c58637a4aadbf50a566",
- mapServerURL: "/wanda",
- fmapID: "1001724_29",
- fmap: null,
- canvasWidth: 700,
- canvasHeight: 800,
- fParser: null,
- scene: null,
- view: null
- };
- },
- mounted() {
- this.canvasWidth = this.$refs.graphy.offsetWidth;
- this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
- this.init();
- // 挂在bus
- this.getBus();
- },
- methods: {
- init() {
- // const loadings = this.$loading({type: 'global'});
- document.getElementById(`canvas`).focus();
- this.clearGraphy();
- this.scene = new EditScence();
- this.fmap = new SFengParser(
- "fengMap",
- this.mapServerURL,
- this.key,
- this.appName,
- null
- );
- this.fmap.parseData("1001724_29", 6, res => {
- this.fParser = new SFloorParser(null);
- this.fParser.parseData(res);
- 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.fParser.spaceList.forEach(t => {
- t.selectable = true;
- // t.connect("click", this, this.spaceClick);
- this.scene.addItem(t);
- });
- this.view.scene = this.scene;
- this.view.fitSceneToView();
- // this.$loading.close(loadings)
- });
- this.scene.emitChange = this.emitChange;
- },
- // 监听变化
- emitChange(itemMsg) {
- this.$emit("changeFocusItem", itemMsg);
- bus.$emit("FocusItemChanged", itemMsg);
- },
- clearGraphy() {
- if (this.view) {
- this.view.scene = null;
- return;
- }
- this.view = new FloorView("canvas");
- document.getElementById("canvas").focus();
- },
- getBus() {
- bus.$on("changeText", val => {
- this.scene.updatedText(val);
- });
- bus.$on("changeFont", val => {
- this.scene.updatedFontSize(val);
- });
- bus.$on("changeLineWidth", val => {
- this.scene.updatedLineWidth(val);
- });
- bus.$on("changeBorderColor", val => {
- this.scene.updatedBorderColor(val);
- });
- bus.$on("changeFontColor", val => {
- this.scene.updatedFontColor(val);
- });
- bus.$on("changeFontColor", val => {
- this.scene.updatedFontColor(val);
- });
- bus.$on("itemWidth", val => {
- this.scene.updatedWidth(Number(val));
- });
- bus.$on("itemHeight", val => {
- this.scene.updatedHeight(Number(val));
- });
- bus.$on("itemPositon", (x, y) => {
- this.scene.updatedPosition(Number(x, y));
- });
- bus.$on("changebackColor", val => {
- this.scene.updatedbackColor(val);
- });
- <<<<<<< HEAD
- bus.$on("deleiteItem", () => {
- this.scene.deleiteItem();
- });
- =======
- bus.$on("extractItem", () => {
- const map = {}
- this.fParser.spaceList.forEach(t => {
- if (map[t.data.Type]) {
- map[t.data.Type]++
- } else {
- map[t.data.Type] = 1;
- }
- })
- const data = [];
- for (const key in map) {
- data.push({
- key: key,
- name: key,
- age: '',
- number: map[key],
- address: "提取"
- })
- }
- bus.$emit('exportItem',data)
- })
- >>>>>>> 21575eaae2b540d7cb1e3e4401e1dbc90a7d279a
- }
- },
- watch: {
- cmd: {
- handler(cmd) {
- if (cmd == null) {
- cmd = 0;
- }
- this.scene.setCmd = cmd;
- },
- deep: true
- },
- "scene.cmd": {
- handler(cmd) {
- this.$emit("setCmd", cmd);
- },
- deep: true
- }
- }
- };
- </script>
- <style lang="less" scoped>
- #baseEditer {
- background: #f7f9fa;
- width: 100%;
- height: 100%;
- // overflow: hidden;
- // position: relative;
- #fengMap {
- position: absolute;
- width: 100px;
- height: 100px;
- z-index: -1;
- }
- .canvas-container {
- width: 100%;
- height: 100%;
- }
- }
- </style>
|