123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290 |
- <template>
- <div id="cenoteGraphy" style="height:100%;width:100%;" ref="graphy">
- <div v-show="!floorMap">
- <div class="center" style="height: 400px;padding-top:182px;box-sizing:border-box;">
- <i class="icon-wushuju iconfont"></i>
- 暂无数据
- </div>
- </div>
- <div class="canvas-box" v-show="floorMap" v-loading="canvasLoading">
- <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
- <el-row class="canvas-actions-box">
- <canvasFun @scale="scale" @groupSelect="groupSelect" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" :config="config"
- ref="canvasFun"></canvasFun>
- </el-row>
- </div>
- </div>
- </template>
- <script>
- import canvasFun from "@/components/business_space/newGraphy/canvasFun";
- import { SColor, SPoint } from "@saga-web/draw/lib";
- import { DivideFloorScene, SpaceItem, ZoneItem } from "@saga-web/cad-engine/lib";
- import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
- import { colorArr } from '@/utils/spaceColor';
- import { getFloorMsgByFloorID, shaftSpaceQuery, shaftZoneLinkReplace, zoneQuery } from '@/api/scan/request';
- import { resolve, reject } from 'q';
- export default {
- data() {
- return {
- canvasLoading: false,//加载canvas
- floorMap: '',//地图
- canvasWidth: 800,
- canvasHeight: 600,
- view: null,
- scene: null,
- buildingData: [],//建筑,楼层
- space: '',//当前空间类型
- businessSpaceList: [],//所有业务空间
- BSPRelaISPList: [],//已关联元空间的业务空间
- zoneList: [], // 业务空间-canvas图中
- selectAble: false,
- relatedSpaceIdList: [],//已关联的业务空间id
- config: {
- isEdit: false,
- groupSelect: true
- },
- }
- },
- mounted() {
- this.canvasWidth = this.$refs.graphy.offsetWidth;
- this.canvasHeight = this.$refs.graphy.offsetHeight;
- },
- components: {
- canvasFun
- },
- created() {
- },
- methods: {
- //获取楼层map
- getFloorMap(buildfloor, space) {
- if (buildfloor.length == 2 && space && buildfloor[1] && buildfloor[0]) {
- this.buildingData = buildfloor
- let pa = {
- Filters: `FloorID='${this.buildingData[1]}'`
- }
- getFloorMsgByFloorID(pa, res => {
- this.floorMap = res.Content[0].StructureInfo ? res.Content[0].StructureInfo.FloorMap : '';
- this.space = space;
- this.getGraphy();
- })
- }
- else {
- this.floorMap = '';
- }
- },
- //加载
- load() {
- if (this.scene) {
- this.scene.clearSpaceSelection();
- this.scene.clearZoneSelection();
- }
- //加载底板
- this.getGraphy()
- },
- //获取底图
- getGraphy() {
- let that = this;
- that.clearGraphy()
- that.scene = new DivideFloorScene();
- that.canvasLoading = true;
- that.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.floorMap}`).then(res => {
- that.canvasLoading = false;
- if (res == 'error') {
- this.floorMap = '';
- this.$message.warning('数据解析异常');
- return;
- }
- that.view.scene = that.scene;
- that.scene.isSpaceSelectable = false;
- // 绘制业务空间
- that.getBusinessSpace();
- that.view.fitSceneToView();
- that.view.minScale = that.view.scale;
- if (that.$refs.canvasFun) {
- that.$refs.canvasFun.everyScale = that.view.scale;
- }
- })
- },
- // 获取当前分区下的业务空间
- getBusinessSpace() {
- this.canvasLoading = true
- let promise1 = new Promise((resolve, reject) => {
- let params = {
- data: {
- Filters: `not RoomID isNull;ObjectType = '${this.space}';buildingId = '${this.buildingData[0]}';floorId = '${this.buildingData[1]}'`,
- Orders: "RoomLocalName desc"
- },
- ShaftId: this.$route.query.ShaftId
- };
- shaftSpaceQuery(params, res => {
- resolve(res)
- })
- });
- let promise2 = new Promise((resolve, reject) => {
- let pa = {
- Filters: `not RoomID isNull`,
- Orders: "createTime desc, RoomID asc",
- PageSize: 1000,
- ZoneType: this.space
- }
- if (this.buildingData.length && this.buildingData.length > 1) {
- pa.BuildingId = this.buildingData[0];
- pa.FloorId = this.buildingData[1];
- }
- zoneQuery(pa, res => {
- resolve(res);
- })
- })
- Promise.all([promise1, promise2]).then(values => {
- let relatedZone = values[0].Content;
- let zoneData = values[1].Content;
- this.relatedSpaceIdList = [];
- relatedZone.map(item => {
- this.relatedSpaceIdList.push(item.RoomID);
- })
- // 所有业务空间
- this.businessSpaceList = zoneData;
- // 已关联元空间的业务空间
- this.BSPRelaISPList = [];
- zoneData.map(t => {
- if (t.Outline && t.Outline.length) {
- this.BSPRelaISPList.push(t)
- }
- })
- // 绘制业务空间
- let tempArr = this.BSPRelaISPList.map((t, i) => {
- if (t.FloorId == this.buildingData[1] && t.ObjectType == this.space) {
- return {
- RoomLocalName: t.RoomLocalName,
- OutLine: t.Outline,
- RoomID: t.RoomID,
- Color: colorArr[i % colorArr.length],
- HighLightFlag: relatedZone.findIndex((item) => (item.RoomID == t.RoomID)) > -1,
- Transparency: relatedZone.findIndex((item) => (item.RoomID == t.RoomID)) > -1 ? 20 : 1
- }
- } else {
- return undefined
- }
- }).filter(item => item)
- this.scene.removeAllZone();
- this.scene.addZoneList(tempArr);
- this.scene.click(this, this.canvasClick);
- this.canvasLoading = false;
- })
- },
- // canvas点击事件
- canvasClick(item, event) {
- if (!this.config.isEdit) {
- item.selected = false;
- }
- },
- //取消编辑
- cancelEdit() {
- this.config.isEdit = false;
- this.scene.clearZoneSelection();
- this.getBusinessSpace();
- },
- //编辑
- edit() {
- this.config.isEdit = true;
- this.scene.zoneList.map(t => {
- t.selected = t.highLightFlag;
- t.transparency = 20;
- t.highLightFlag = false;
- })
- },
- //保存编辑
- saveEdit() {
- let arr = this.scene.getSelectedZone();
- let param = {
- BuildingId: this.buildingData[0],
- FloorId: this.buildingData[1],
- Type: this.space,
- data: {
- ShaftId: this.$route.query.ShaftId,
- SpaceIdList: []
- }
- }
- param.data.SpaceIdList = arr.map(t => {
- return t.data.RoomID;
- })
- shaftZoneLinkReplace(param, res => {
- this.config.isEdit = false;
- this.$message.success("保存成功");
- this.getBusinessSpace();
- })
- },
- // 清除canvas
- clearGraphy() {
- // debugger
- this.scene = null;
- if (this.view) {
- this.view.scene = null;
- return
- }
- this.view = new FloorView('floorCanvas')
- },
- // 适配底图到窗口
- fit() {
- this.view.fitSceneToView()
- },
- // 缩放
- scale(val) {
- if (!this.view) {
- return;
- }
- let scale = this.view.scale;
- this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2);
- },
- // 保存为png
- savePng() {
- this.view.saveImage(`${this.buildingData[1]}.png`, 'png');
- },
- // 保存为svg
- saveSvg() {
- this.view.saveSceneSvg(`${this.buildingData[1]}.svg`, 6400, 4800);
- },
- // 框选
- groupSelect() {
- this.scene.isRectSelection = 2;
- },
- // 保存json
- saveJson() {
- this.view.saveFloorJson(`${this.buildingData[1]}.json`)
- },
- },
- watch: {
- "view.scale": {
- handler(n) {
- if (this.$refs.canvasFun) {
- let s = n * 10 / this.view.minScale
- this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
- }
- }
- },
- "scene.isRectSelection": {
- handler(n) {
- if (!n) {
- this.$refs.canvasFun.active = '';
- }
- }
- },
- }
- }
- </script>
- <style lang="less" scoped>
- .canvas-actions-box {
- position: absolute;
- bottom: 20px;
- left: 50%;
- transform: translateX(-50%);
- z-index: 999;
- }
- .canvas-box {
- width: 100%;
- height: 100%;
- }
- </style>
|