ibms/src/views/ready/buildfloor/drawGraphy/drawFloor.vue

<template>
  <div id="drawFloor">
    <canvas :id="'canvas'+indexs" :width="cadWidth" :height="cadHeight"></canvas>
  </div>
</template>

<script>
import {
  SGraphyView,
  SGraphyScene,
  SGraphyClockItem
} from "@sybotan-web/graphy/lib";
import axios from "axios";
import { SPoint } from "@sybotan-web/base/lib";
import { SPen, SPainter, SColor } from "@sybotan-web/draw";
import { mainScene, SGraphyRectItem } from "@/assets/graphy/index.js";
import eventBus from "./bus.js";
export default {
  props: {
    cadWidth: {
      type: String | Number,
      default: "100%",
      required: false
    },
    cadHeight: {
      type: String | Number,
      default: "100%",
      required: false
    },
    dataKey: {
      type: String,
      default: "",
      required: true
    },
    point: {
      type: Array,
      default: [0, 0],
      required: false
    },
    pointWidth: {
      type: Number,
      default: 2000,
      required: false
    },
    initColor: {
      type: Array,
      default: function() {
        return [
          "#F9C3C3",
          "#FFD1BF",
          "#FFF3BF",
          "#D8F7C6",
          "#C6F2F6",
          "#DCE3C0",
          "#FAE6C9",
          "#E3D7F7",
          "#C4CBF8",
          "#DEC3F6"
        ];
      },
      required: false
    },
    findGraphyItemId: {
      //高亮的id
      type: String,
      default: "",
      required: false
    },
    highlightColor: {
      //高亮的color
      type: String,
      default: "#1abc9c",
      required: false
    },
    isScale: {
      //是否放大缩小
      type: Boolean,
      default: false,
      required: false
    },
    indexs: {
      //是否放大缩小
      type: Number | String,
      default: "",
      required: false
    }
  },
  data() {
    return {
      drawMainScene: null,
      view: null
    };
  },
  mounted() {
    this.initGraphy();
    let that = this;
    eventBus.$on("suitableRatios", function() {
      that.view.fitSceneToView();
    });
     eventBus.$on("changeRatios", function(val) {
       that.changeRatios(val)
    });
  },
  methods: {
    clickItem(item) {
      this.$emit("clickGraphyItem", item);
    },
    // 单个个体绘制颜色
    drawItemColor(item, color) {
      item.fillColor = new SColor(color); //需要缓存的边框
      item.cacheFillColor = new SColor(color); //需要
    },
    // 绘制所有的item
    drawAllItemColor() {
      this.drawMainScene.root.children.forEach((item, index) => {
        let color = this.initColor[index % 10];
        this.drawItemColor(item, color);
      });
    },
    initGraphy() {
      if (!this.dataKey) {
        return;
      }
      this.drawMainScene = null;
      this.view = null;
      // 初始化view类
      this.view = new SGraphyView("canvas" + this.indexs);
      this.drawMainScene = new mainScene(null);
      this.drawMainScene
        .urlGetData(
          "/image-service/common/file_get/Fl4201050001c72ff970d2ba11e8a57543fa3e79672520181120041440bim.jsonz?systemId=revit" ///////////测试路径
          // this.dataKey       //开发url
        )
        .then(() => {
          //  将场景赋给view对图进行绘制
          this.view.scene = this.drawMainScene;
          // 自动缩放比例
          this.view.fitSceneToView();
          // 绘制地图颜色
          this.drawAllItemColor();
          // this.drawMainScene.click(this, this.clickItem);
          this.drawMainScene.mouseMove(this, this.leftClickMove);
        });
      if (this.isScale) {
        this.cancelScale(this.view);
      }
    },
    // 单个item 高亮
    heightLightitem(item, highlightColor) {
      this.drawItemColor(item, highlightColor);
    },
    // 取消放大缩小
    cancelScale(view) {
      view.wheelZoom = 1;
    },
    // 左键长按控制canvas的坐标
    leftClickMove(a, b) {
      //  console.log('move',a,b)
    },
    changeRatios(val){
      console.log('val',val)
    }
  },
  watch: {
    dataKey(str) {
      if (str) {
        this.initGraphy();
      }
    },
    findGraphyItemId(str) {
      if (str) {
        this.heightLightitem();
      }
    }
  }
};
</script>
<style scoped lang="less">
#drawFloor {
  width: 100%;
  position: relative;
  height: auto;
  canvas {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>