123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342 |
- <template>
- <div id="spaceRelation">
- <el-row>
- <el-col :span="0.5">
- <el-button size="small" type="default" icon="el-icon-back" @click="goback"></el-button>
- </el-col>
- <el-col :span="0.5">
- <span style="margin:0 10px;">建筑楼层</span>
- <el-cascader placeholder="请选择建筑楼层" :options="options" v-model="buildFloor" filterable size="small" @change="changeCascader" :props="props">
- </el-cascader>
- </el-col>
- <el-col :span="0.5">
- <span style="margin:0 10px;">业务空间类型</span>
- <el-select placeholder="请选择" v-model="zoneType">
- <el-option v-for="item in tabsList" :key="item.Code" :label="item.Name" :value="item.Code">
- </el-option>
- </el-select>
- </el-col>
- <el-col :span="0.5" style="float:right;" v-show='0'>
- <el-button @click="clearRelation">清除</el-button>
- <el-button type="primary" @click="saveRelation">保存</el-button>
- </el-col>
- </el-row>
- <div class="canvas-container" v-loading="canvasLoading" ref="graphy">
- <div v-show="!FloorMap" style="display:flex;align-items:center;justify-content:center;height:100%;">
- <div class="center" style="flex:1">
- <i class="icon-wushuju iconfont"></i>
- 暂无数据
- </div>
- </div>
- <div v-show="FloorMap" class="canvas-box">
- <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
- <!-- 底部操作按钮 -->
- <el-row class="canvas-actions-box">
- <canvasFun @fit="fit" @scale="scale" :config="config" ref="canvasFun"></canvasFun>
- </el-row>
- </div>
- </div>
- </div>
- </template>
- <script>
- import {
- buildingQuery, //数据中心-建筑查询
- queryZone, // 业务空间查询
- queryDictionaryHead, //空间类型查询
- createSpaceNeighborhood, //创建邻接关系
- querySpaceNeighborhood, // 查询邻接关系
- } from "@/api/scan/request";
- import { SColor, SPoint } from "@saga-web/draw/lib";
- import { RelationScene, FloorView } from "@saga-web/cad-engine/lib";
- import canvasFun from "@/components/business_space/newGraphy/canvasFun"
- import floorCascader from "@/components/ledger/lib/floorCascader";
- import { colorArr } from "@/utils/spaceColor"
- export default {
- components: {
- floorCascader,
- canvasFun
- },
- data() {
- return {
- view: '',
- scene: '',
- canvasWidth: 800,
- canvasHeight: 600,
- canvasLoading: false,
- FloorMap: '',
- options: [],
- buildFloor: [],
- tabsList: [],
- zoneType: 'GeneralZone',
- props: {
- value: 'BuildID',
- label: 'BuildLocalName',
- children: 'Floor'
- },
- idToFloor: {},
- config: {
- isEdit: false,
- divide: false,
- groupSelect: false
- },
- }
- },
- created() {
- //图类型编码
- this.type = this.$route.query.type;
- this.init();
- },
- mounted() {
- this.canvasWidth = this.$refs.graphy.offsetWidth - 20;
- this.canvasHeight = this.$refs.graphy.offsetHeight - 20;
- },
- methods: {
- //初始化
- init() {
- this.getBuilding();
- this.getTypes();
- },
- changeCascader(val) {
- if (val.length > 1) {
- let floor = this.idToFloor[val[1]];
- if (floor.StructureInfo && floor.StructureInfo.FloorMap) {
- this.FloorMap = floor.StructureInfo.FloorMap;
- this.initGraphy();
- } else {
- this.FloorMap = '';
- }
- } else {
- this.FloorMap = '';
- }
- },
- // 保存邻接关系
- saveRelation() {
- let relationList = this.scene.relationList;
- let pa = {
- Content: []
- }
- if (relationList.length) {
- pa.Content = relationList.map(t => {
- return {
- FloorId: this.buildFloor[1],
- GraphType: this.type,
- LocationOne: `${t.startPoint.x},${-t.startPoint.y}`,
- LocationTwo: `${t.lastPoint.x},${-t.lastPoint.y}`,
- SpaceIdOne: t.startZone,
- SpaceIdTwo: t.endZone,
- ZoneType: this.zoneType
- }
- })
- }
- this.createRela(pa)
- },
- clearRelation() {
- console.log(355555555555)
- if (this.scene) {
- this.scene.removeAllRelation()
- }
- },
- canvasClick(item, event) {
- item.selected = false;
- },
- initGraphy() {
- this.clearGraphy()
- this.scene = new RelationScene();
- this.canvasLoading = true;
- this.scene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${this.FloorMap}`).then(res => {
- this.canvasLoading = false;
- if (res == 'error') {
- this.FloorMap = '';
- this.$message.warning('数据解析异常');
- return;
- }
- this.view.scene = this.scene;
- this.view.fitSceneToView();
- this.scene.isSpaceSelectable = false;
- this.scene.createRelateFlag = true;
- this.getBusinessSpace();
- // 绘制关系
- this.getRelations();
- this.view.minScale = this.view.scale;
- if (this.$refs.canvasFun) {
- this.$refs.canvasFun.everyScale = this.view.scale;
- }
- })
- },
- // 清空场景并初始化视图
- clearGraphy() {
- if (this.view) {
- this.view.scene = null;
- return
- }
- this.view = new FloorView('floorCanvas')
- },
- // canvas 获取焦点
- focus() {
- document.getElementById(`floorCanvas`).focus()
- },
- // 适配底图到窗口
- 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);
- },
- goback() { },
- // 获取项目下建筑
- getBuilding() {
- let pa = {
- Cascade: [{ name: 'floor', Orders: 'SequenceId desc' }],
- Orders: "BuildLocalName asc",
- }
- buildingQuery(pa, res => {
- this.options = res.Content.map(t => {
- if (t.Floor) {
- t.Floor = t.Floor.map(item => {
- item.BuildID = item.FloorID;
- item.BuildLocalName = item.FloorLocalName;
- this.idToFloor[item.FloorID] = item;
- return item;
- })
- } else {
- t.Floor = []
- }
- return t;
- })
- })
- },
- // 业务空间分区类型
- getTypes() {
- let pa = {
- Filters: `parentId='Space'`
- }
- queryDictionaryHead(pa, res => {
- this.tabsList = res.Content.map(t => {
- if (t.Name == "元空间") {
- return undefined;
- }
- return t;
- }).filter(item => item);
- })
- },
- getRelations() {
- let pa = {
- Filters: `FloorId='${this.buildFloor[1]}';GraphType='${this.type}';ZoneType='${this.zoneType}'`
- }
- querySpaceNeighborhood(pa, res => {
- let tempArr = res.Content.map(t => {
- let p1 = t.LocationOne.split(',');
- let p2 = t.LocationTwo.split(',');
- return {
- LocationOne: new SPoint(p1[0], -p1[1]),
- LocationTwo: new SPoint(p2[0], -p2[1]),
- SpaceIdOne: t.SpaceIdOne,
- SpaceIdTwo: t.SpaceIdTwo,
- }
- })
- this.clearRelation();
- this.scene.addAllRelaPoint(tempArr);
- })
- },
- // 获取当前分区下的业务空间
- getBusinessSpace() {
- this.canvasLoading = true
- let pa = {
- zone: this.zoneType,
- data: {
- Filters: ``,
- Orders: "createTime desc, RoomID asc",
- PageSize: 1000
- }
- }
- if (this.buildFloor.length && this.buildFloor.length > 1) {
- pa.data.Filters = `BuildingId='${this.buildFloor[0]}';FloorId='${this.buildFloor[1]}'`
- } else {
- this.$message.warning("请选择建筑楼层");
- }
- queryZone(pa, res => {
- // 所有业务空间
- this.businessSpaceList = res.Content;
- // 已关联元空间的业务空间
- this.BSPRelaISPList = [];
- res.Content.map(t => {
- if (t.Outline && t.Outline.length) {
- this.BSPRelaISPList.push(t)
- }
- })
- // 绘制业务空间
- let tempArr = this.BSPRelaISPList.map((t, i) => {
- if (t.FloorId == this.buildFloor[1] && t.ObjectType == this.zoneType) {
- return {
- RoomLocalName: t.RoomLocalName,
- OutLine: t.Outline,
- RoomID: t.RoomID,
- Color: colorArr[i % colorArr.length],
- }
- } else {
- console.log('internet slow')
- return undefined;
- }
- }).filter(item => item)
- this.scene.removeAllZone();
- this.scene.addZoneList(tempArr);
- // this.scene.click(this, this.canvasClick)
- this.canvasLoading = false;
- })
- },
- // 创建邻接关系
- createRela(param) {
- console.log(param)
- createSpaceNeighborhood(param, res => {
- this.$message.success('创建成功')
- })
- }
- },
- watch: {
- projectId() {
- this.FloorMap = '';
- this.init();
- },
- "view.scale": {
- handler(n) {
- if (this.$refs.canvasFun) {
- let s = n * 10 / this.view.minScale
- this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
- }
- }
- }
- }
- }
- </script>
- <style lang="less" scoped>
- #spaceRelation {
- /deep/ .el-input__inner {
- vertical-align: baseline;
- }
- .canvas-container {
- position: relative;
- width: calc(100% - 22px;);
- height: calc(100% - 64px);
- margin-top: 10px;
- padding: 10px;
- background-color: #fff;
- border: 1px solid #e4e4e4;
- .canvas-box {
- width: 100%;
- height: 100%;
- }
- .canvas-actions-box {
- position: absolute;
- bottom: 20px;
- left: 50%;
- transform: translateX(-50%);
- z-index: 999;
- }
- }
- }
- </style>
|