123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- <template>
- <div id="drawFloor">
- <canvas id="canvas" :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";
- export default {
- props: {
- cadWidth: {
- type: Number,
- default: 1000,
- required: false
- },
- cadHeight: {
- type: Number,
- default: 800,
- 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
- }
- },
- data() {
- return {
- drawMainScene: null
- };
- },
- mounted() {
- this.initGraphy();
- },
- methods: {
- // // 请求获取地图的压缩包
- // getMapBlob() {
- // return new Promise((resolve, reject) => {
- // this.$http
- // .fetchImageFile({
- // key: this.dataKey
- // })
- // .then(res => {
- // resolve(res);
- // })
- // .catch(err => {
- // console.log(err);
- // });
- // });
- // },
- //clickItem
- 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;
- // 初始化view类
- let view = new SGraphyView("canvas");
- this.drawMainScene = new mainScene(null);
- this.drawMainScene
- .urlGetData(
- "/image-service/common/file_get/Fl4201050001c72ff970d2ba11e8a57543fa3e79672520181120041440bim.jsonz?systemId=revit"
- )
- .then(() => {
- // 将场景赋给view对图进行绘制
- view.scene = this.drawMainScene;
- // 自动缩放比例
- view.fitSceneToView();
- // 绘制地图颜色
- this.drawAllItemColor();
- // this.drawMainScene.click(this, this.clickItem);
- });
- },
- // 单个item 高亮
- heightLightitem(item, highlightColor) {
- this.drawItemColor(item, highlightColor);
- }
- },
- watch: {
- dataKey(str) {
- if (str) {
- this.initGraphy();
- }
- },
- findGraphyItemId(str) {
- if (str) {
- this.heightLightitem();
- }
- }
- }
- };
- </script>
- <style scoped>
- /* #drawFloor {
- } */
- </style>
|