123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292 |
- <template>
- <el-dialog
- title='修改BIM模型中的坐标'
- v-if='dialog.bimcode'
- custom-class='custom-dialog'
- :visible.sync='dialog.bimcode'
- width='900px'
- @close='handleClose'
- >
- <div id='bim-code' v-if='Object.keys(bimcodeobj).length>0'>
- <div class='eq'>
- <span class='eq-name'>设备名称 </span>
- {{ bimcodeobj.EquipLocalName || bimcodeobj.EquipName || '--' }}
- </div>
- <div>
- <noAllDataFloor @change='changeFloor' ref='floors' @getFloorMap='getFloorMap'></noAllDataFloor>
- <span v-if='isShow' class='errMsg'>请选择设备所属建筑楼层</span>
- </div>
- <div class='canvas-box' v-loading='canvasLoading'>
- <canvas v-show='isdata' :id='`floorCanvas${id}`' :width='cadWidth' :height='cadHeight' ref='canvas'
- tabindex='0'></canvas>
- <p v-show='!isdata'>当前楼层暂无平面图,请前往“建筑楼层管理”中给楼层添加平面图</p>
- </div>
- </div>
- <div slot='footer' class='footer'>
- <el-button @click='handleClose'>取 消</el-button>
- <el-button type='primary' @click='save'>确 定</el-button>
- </div>
- </el-dialog>
- </template>
- <script>
- import noAllDataFloor from './noAllDataFloor'
- import { FloorView, LocationPointScene } from '@saga-web/cad-engine/lib'
- import { SPoint } from '@saga-web/draw/lib'
- import { updateEquip } from '@/api/scan/request'
- import { SGraphItem } from '@saga-web/graph/lib'
- export default {
- components: {
- noAllDataFloor,
- },
- props: {
- dialog: {
- type: Object,
- default: function () {
- return {
- bimcode: false,
- }
- },
- },
- bimcodeobj: {
- default: {},
- },
- },
- data() {
- return {
- cadWidth: 800,
- cadHeight: 400,
- Buildfloor: '',
- value: [],
- isdata: true,
- floorData: {},
- canvasLoading: false,
- isShow: false,
- id: 'ty',
- view: '',
- drawMainScene: '',
- floorToMap: {},
- }
- },
- created() {
- },
- mounted() {
- console.log(this.bimcodeobj)
- this.init()
- },
- methods: {
- init() {
- this.isShow = true
- this.$nextTick(function () {
- if (this.bimcodeobj.FloorId) {
- this.isShow = false
- }
- if (this.$refs.floors) {
- this.$refs.floors.setValue([this.bimcodeobj.BuildingId, this.bimcodeobj.FloorId])
- }
- })
- },
- //切换楼层
- changeFloor(value) {
- this.Buildfloor = value
- this.isShow = true
- if (value.length > 1) {
- this.isShow = false
- this.floorData = this.floorToMap[value[1]]
- } else {
- this.isShow = false
- this.floorData = {}
- }
- this.getFloorData()
- },
- // 初始化canvas
- initGraphy(Id, type) {
- // type=1 => id:模型id 这里不需要
- // type=2 => id:floormap jsonz格式
- // type = 3 => id:floormap png或者jpg格式
- let that = this
- that.clearGraphy()
- that.drawMainScene = new LocationPointScene()
- that.canvasLoading = true
- if (type == 2) {
- that.drawMainScene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${Id}`).then((res) => {
- that.getGraphtSuc(res)
- })
- } else if (type == 3) {
- that.drawMainScene.loadImg(`/image-service/common/image_get?systemId=dataPlatform&key=${Id}`, (res) => {
- that.getGraphtSuc(res)
- })
- }
- },
- // 获取底图成功
- getGraphtSuc(res) {
- this.canvasLoading = false
- if (res == 'error') {
- this.FloorMap = ''
- this.$message.warning('数据解析异常')
- return
- }
- if (res.Result == 'failure') {
- this.showTools = false
- this.$message.warning(res.Message)
- return
- }
- this.view.scene = this.drawMainScene
- if (this.bimcodeobj.LocationJson) {
- let obj = {
- X: this.bimcodeobj.LocationJson.X,
- Y: -this.bimcodeobj.LocationJson.Y,
- }
- //回写编辑
- this.drawMainScene.addMarker(obj)
- }
- this.view.fitSceneToView()
- this.drawMainScene.isSpaceSelectable = false
- this.drawMainScene.spaceClick(this, this.canvasClick) //锚点触发
- if (this.floorData.Outline && this.floorData.Outline.length) {
- let newArr = this.floorData.Outline.map((t) => {
- return new SPoint(t.X, t.Y)
- })
- this.drawMainScene.addSceneMark(newArr)
- }
- },
- //获取楼层数据
- getFloorData() {
- console.log(this.floorData)
- if (this.floorData && this.floorData.StructureInfo && this.floorData.StructureInfo.FloorMap) {
- this.isdata = true
- let floorMap = this.floorData.StructureInfo.FloorMap
- if (floorMap.split('.')[1].toString() == 'png' || floorMap.split('.')[1].toString() == 'jpg') {
- this.initGraphy(floorMap, 3)
- } else {
- this.initGraphy(floorMap, 2)
- }
- } else {
- //暂无数据
- this.isdata = false
- this.clearGraphy()
- }
- },
- //关闭弹窗
- handleClose(val) {
- this.view = ''
- this.drawMainScene = ''
- this.$emit('closeBIM', val)
- },
- //保存事件
- save() {
- if (this.drawMainScene) {
- if (this.drawMainScene.markerList.length) {
- let obj = this.drawMainScene.markerList[0], BIMLocation;
- if (this.bimcodeobj.BIMLocation && this.bimcodeobj.BIMLocation.split(',')[2]) {
- BIMLocation = `${obj.x.toFixed(2)},${(obj.y * -1).toFixed(2)},${this.bimcodeobj.BIMLocation.split(',')[2]}`
- } else {
- BIMLocation = `${obj.x.toFixed(2)},${(obj.y * -1).toFixed(2)},0`
- }
- let param = {
- content: [
- {
- equipId: this.bimcodeobj.EquipID,
- buildingId: this.Buildfloor[0],
- floorId: this.Buildfloor[1],
- bimLocation: BIMLocation
- },
- ],
- projection: ['bimLocation', 'buildingId', 'floorId'],
- }
- updateEquip(param, (res) => {
- if (res.result == 'success') {
- this.$message.success('保存成功')
- this.handleClose('update')
- }
- })
- }
- }
- },
- // 清空平面图
- clearGraphy() {
- if (this.view) {
- this.view.scene = null
- return
- }
- let id = `floorCanvas${this.id}`
- this.view = new FloorView(id)
- },
- //得到floormap
- getFloorMap(val) {
- this.floorToMap = val
- this.floorData = this.floorToMap[this.bimcodeobj.FloorId]
- this.getFloorData()
- },
- // canvas点击事件
- canvasClick(item, event) {
- if (item instanceof SGraphyItem) {
- this.clearMark()
- let obj = {
- X: event[0].x,
- Y: event[0].y,
- }
- this.drawMainScene.addMarker(obj)
- this.view.fitSceneToView()
- }
- },
- //清空标记
- clearMark() {
- if (this.drawMainScene) {
- this.drawMainScene.markerList.forEach((t) => {
- this.drawMainScene.removeItem(t)
- })
- this.drawMainScene.markerList = []
- }
- },
- },
- watch: {
- bimcodeobj: {
- immediate: true,
- handler(val) {
- this.init()
- },
- },
- },
- }
- </script>
- <style lang="less" scoped>
- #bim-code {
- height: 500px;
- .eq {
- padding-bottom: 10px;
- .eq-name {
- color: #999999;
- padding-left: 10px;
- }
- }
- .errMsg {
- color: red;
- padding-left: 10px;
- }
- #buildFloor {
- clear: both;
- margin-bottom: 10px;
- }
- .canvas-box {
- border: 1px solid #ccc;
- clear: both;
- width: 800px;
- height: 400px;
- margin-left: 10px;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- }
- </style>
- <style lang="less">
- #bim-code {
- }
- </style>
|