objectInstance.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <template>
  2. <!-- 对象实例 -->
  3. <div id="objectInstance" v-loading="loading">
  4. <div ref="test1"></div>
  5. <div class="obj-item" v-for="form in forms" :key="form.id">
  6. <el-form :model="form" label-width="150px">
  7. <el-form-item label="对象类型:">
  8. {{form.TypeName || '--'}}
  9. </el-form-item>
  10. <el-form-item label="对象实例本地名称:">
  11. {{form.ObjectLocalName || '--'}}
  12. </el-form-item>
  13. <el-form-item label="对象实例本地编码:">
  14. {{form.ObjectLocalCode || '--'}}
  15. </el-form-item>
  16. <el-form-item label="对象实例ID:">
  17. {{form.ObjectID || '--'}}
  18. </el-form-item>
  19. <el-form-item label="信息点名称:">
  20. {{form.InfomationPointName || '--'}}
  21. </el-form-item>
  22. <el-form-item label="对应值:">
  23. {{ reValue || '--'}}
  24. </el-form-item>
  25. <el-form-item label="对象实例位置图:">
  26. <span v-show="!drawCanvas">--</span>
  27. <canvas v-show="drawCanvas" height="300px" width="600" class="instanceMap" :id="form.instanceId" :k="refreshCanvas"></canvas>
  28. </el-form-item>
  29. </el-form>
  30. </div>
  31. </div>
  32. </template>
  33. <script>
  34. import { mapGetters } from 'vuex'
  35. import { SGraphyView } from "@saga-web/graphy/lib";
  36. import { LocationPointScene, DivideFloorScene } from "@saga-web/cad-engine"
  37. import { SColor } from "@saga-web/draw/lib";
  38. import {
  39. getTabFunNumObjInstance, getEquipByEqID, getFloorMsgByFloorID, queryZone
  40. } from '@/api/scan/request'
  41. export default {
  42. data() {
  43. return {
  44. forms: [],//实例数据
  45. views: [],//canvas view
  46. scenes: [],//canvas scene
  47. loading: true,
  48. refreshCanvas: '',//重载canvas组件
  49. drawCanvas: false//是否画canvas
  50. }
  51. },
  52. methods: {
  53. //加载对象实例
  54. loadObjectInstance() {
  55. this.loading = true;
  56. let pa = {
  57. Filters: `MeterFuncid='${this.tabFunNum}';Related='true'`//
  58. };
  59. let that = this;
  60. //获取所有实例信息
  61. getTabFunNumObjInstance(pa, res => {
  62. that.loading = false;
  63. that.forms = res.Content;
  64. res.Content.map((item, key) => {
  65. //存在实例ID
  66. if (item.ObjectID) {
  67. that.forms[key].instanceId = item.ObjectID;
  68. //设备或者组件
  69. if (item.TypeCode == 'Eq' || item.TypeCode == 'Ec') {
  70. let pa = {
  71. Filters: `EquipID='${item.TypeCode + this.projectId.substring(2) + item.ObjectID}'`
  72. }
  73. //获取设备信息
  74. getEquipByEqID(pa, equipMsg => {
  75. if (equipMsg.Content[0] && equipMsg.Content[0].LocationJson && equipMsg.Content[0].FloorId) {
  76. let canvasOption = {
  77. /** 标记的id */
  78. Id: equipMsg.Content[0].EquipID,
  79. /** 标记的名称 */
  80. Name: equipMsg.Content[0].EquipName,
  81. /** X坐标 */
  82. X: equipMsg.Content[0].LocationJson.X,
  83. /** Y坐标 */
  84. Y: -equipMsg.Content[0].LocationJson.Y
  85. }
  86. this.loadDataToInstanceByFloorID(equipMsg.Content[0].FloorId, key, item.TypeCode, canvasOption);
  87. }
  88. })
  89. }
  90. //空间
  91. else if (item.TypeCode == 'Sp') {
  92. let pa = {
  93. data: {
  94. Filters: `RoomID='${item.TypeCode + this.projectId.substring(2) + item.ObjectID}'`
  95. },
  96. zone: item.SubTypeCode
  97. }
  98. //获取空间信息
  99. queryZone(pa, zoneMsg => {
  100. if (zoneMsg.Content[0] && zoneMsg.Content[0].Outline) {
  101. let canvasOption = {
  102. RoomLocalName: zoneMsg.Content[0].RoomLocalName,
  103. OutLine: zoneMsg.Content[0].Outline,
  104. RoomID: zoneMsg.Content[0].RoomID,
  105. Color: new SColor('#F9C3C3')
  106. }
  107. this.loadDataToInstanceByFloorID(zoneMsg.Content[0].FloorId, key, item.TypeCode, canvasOption);
  108. }
  109. });
  110. }
  111. }
  112. });
  113. })
  114. },
  115. //通过floorid获取信息,后通过floormap获取数据后绘制canvas
  116. loadDataToInstanceByFloorID(floorId, key, typecode, options) {
  117. let param = {
  118. Filters: `FloorId='${floorId}'`
  119. }
  120. let that = this;
  121. //获取楼层信息
  122. getFloorMsgByFloorID(param, floorMsg => {
  123. //刷新canvas
  124. that.refreshCanvas = new Date().getTime();
  125. if (!that.views[key]) {
  126. that.views[key] = new SGraphyView(`${that.forms[key].instanceId}`)
  127. }
  128. that.views[key].scene = null;
  129. that.scenes[key] = null;
  130. //类型
  131. if (typecode == 'Eq' || typecode == 'Ec') {
  132. that.scenes[key] = new LocationPointScene();
  133. }
  134. else if (typecode == 'Sp') {
  135. that.scenes[key] = new DivideFloorScene();
  136. }
  137. if (floorMsg.Content[0].StructureInfo && floorMsg.Content[0].StructureInfo.FloorMap) {
  138. //获取数据,并加载canvas
  139. that.scenes[key].loadUrl(`/image-service/common/file_get?systemId=revit&key=${floorMsg.Content[0].StructureInfo.FloorMap}`).then(() => {
  140. that.drawCanvas = true;
  141. that.views[key].scene = that.scenes[key];
  142. that.scenes[key].isSpaceSelectable = false;
  143. if (typecode == 'Eq' || typecode == 'Ec') {
  144. that.scenes[key].addMarker(options);
  145. }
  146. else if (typecode == 'Sp') {
  147. that.scenes[key].addZone(options);
  148. }
  149. that.views[key].fitSceneToView();
  150. })
  151. }
  152. });
  153. }
  154. },
  155. mounted() {
  156. this.loadObjectInstance();
  157. },
  158. props: {
  159. tabFunNum: String,//表号功能号,
  160. reValue: String//对应值
  161. },
  162. computed: {
  163. ...mapGetters('layout', ['projectId'])
  164. },
  165. watch: {
  166. //切换时更新数据
  167. tabFunNum() {
  168. this.loadObjectInstance();
  169. }
  170. }
  171. }
  172. </script>
  173. <style lang="less" scoped>
  174. #objectInstance {
  175. height: 100%;
  176. overflow: auto;
  177. }
  178. .instanceMap {
  179. min-height: 100px;
  180. }
  181. .obj-item {
  182. margin: 15px 10px;
  183. box-shadow: 2px 2px 2px 2px #aaa;
  184. background-color: white;
  185. padding: 10px 10px;
  186. height: 600px;
  187. }
  188. </style>