index.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. <!--
  2. * @Author: zhangyu
  3. * @Date: 2019-11-13 17:00:59
  4. * @Info: 系统集成成果辅助屏
  5. * @LastEditTime: 2019-11-18 18:50:07
  6. -->
  7. <template>
  8. <div>
  9. <div class='page-bar'>
  10. <el-breadcrumb separator='/'>
  11. <el-breadcrumb-item>系统集成</el-breadcrumb-item>
  12. <el-breadcrumb-item>系统集成成果管理</el-breadcrumb-item>
  13. </el-breadcrumb>
  14. </div>
  15. <div class="page-content">
  16. <div class="content-left">
  17. <div class="data-box">
  18. <realtime-data :queryParams="queryParams"></realtime-data>
  19. </div>
  20. <div class="example-box">
  21. <example-list :queryParams="queryParams" @changeExample="handleChangeExample"></example-list>
  22. </div>
  23. </div>
  24. <div class="content-right" id="cadBox" v-loading="loading">
  25. <canvas v-show="drawCanvas" :height="cadHeight" :width="cadWidth" id="exampleCanvas" :k="refreshCanvas"></canvas>
  26. <div v-show="drawCanvas" class="operate">
  27. <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @scale="scale" @saveJson="saveJson" :config="config" ref="canvasFun"></canvasFun>
  28. </div>
  29. <div class="no-data" v-show="!drawCanvas">
  30. <div class="position-icon">
  31. <i class="icon-wushuju iconfont"></i>
  32. 数据暂无
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. </template>
  39. <script>
  40. import { SGraphyView } from "@saga-web/graphy/lib";
  41. import { LocationPointScene, DivideFloorScene } from "@saga-web/cad-engine";
  42. import { SColor } from "@saga-web/draw/lib";
  43. import { queryEquip, floorQuery, queryZone } from '@/api/scan/request';
  44. //组件
  45. import realtimeData from '@/components/screen/integrateresults/realtimeData';
  46. import exampleList from '@/components/screen/integrateresults/exampleList';
  47. import canvasFun from "@/components/business_space/newGraphy/canvasFun";
  48. export default {
  49. components: {
  50. realtimeData,
  51. exampleList,
  52. canvasFun
  53. },
  54. mounted() {
  55. this.cadWidth = document.getElementById('cadBox').offsetWidth;
  56. this.cadHeight = document.getElementById('cadBox').offsetHeight;
  57. },
  58. data() {
  59. return {
  60. queryParams: this.$route.query,
  61. loading: false,
  62. cadWidth: 800,
  63. cadHeight: 600,
  64. views: null,//canvas view
  65. scenes: null,//canvas scene
  66. refreshCanvas: '',//重载canvas组件
  67. drawCanvas: false,//是否画canvas,
  68. ObjectLocalName: '',//对象名称
  69. config: {
  70. isEdit: false
  71. },
  72. }
  73. },
  74. methods:{
  75. handleChangeExample(example) {
  76. //存在实例ID
  77. if (example.ObjectID) {
  78. this.ObjectLocalName = example.ObjectLocalName;
  79. if (example.TypeCode == 'Eq' || example.TypeCode == 'Ec') {//设备或者组件
  80. let pa = {
  81. Filters: `EquipID='${example.TypeCode + localStorage.getItem('projectId').substring(2) + example.ObjectID}'`
  82. }
  83. //获取设备信息
  84. queryEquip(pa, equipMsg => {
  85. if (equipMsg.Content[0] && equipMsg.Content[0].LocationJson && equipMsg.Content[0].FloorId) {
  86. let canvasOption = {
  87. /** 标记的id */
  88. Id: equipMsg.Content[0].EquipID,
  89. /** 标记的名称 */
  90. Name: equipMsg.Content[0].EquipName,
  91. /** X坐标 */
  92. X: equipMsg.Content[0].LocationJson.X,
  93. /** Y坐标 */
  94. Y: -equipMsg.Content[0].LocationJson.Y
  95. }
  96. this.loadDataToInstanceByFloorID(equipMsg.Content[0].FloorId, example.TypeCode, canvasOption);
  97. }
  98. })
  99. } else if (example.TypeCode == 'Sp') {//空间
  100. let pa = {
  101. data: {
  102. Filters: `RoomID='${example.TypeCode + localStorage.getItem('projectId').substring(2) + example.ObjectID}'`
  103. },
  104. zone: example.SubTypeCode
  105. }
  106. //获取空间信息
  107. queryZone(pa, zoneMsg => {
  108. if (zoneMsg.Content[0] && zoneMsg.Content[0].Outline) {
  109. let canvasOption = {
  110. RoomLocalName: zoneMsg.Content[0].RoomLocalName,
  111. OutLine: zoneMsg.Content[0].Outline,
  112. RoomID: zoneMsg.Content[0].RoomID,
  113. Color: new SColor('#F9C3C3')
  114. }
  115. this.loadDataToInstanceByFloorID(zoneMsg.Content[0].FloorId, example.TypeCode, canvasOption);
  116. }
  117. });
  118. }
  119. }
  120. },
  121. //通过floorid获取信息,后通过floormap获取数据后绘制canvas
  122. loadDataToInstanceByFloorID(floorId, typecode, options) {
  123. let param = {
  124. Filters: `FloorId='${floorId}'`
  125. }
  126. //获取楼层信息
  127. floorQuery(param, floorMsg => {
  128. //刷新canvas
  129. this.refreshCanvas = new Date().getTime();
  130. if (!this.views) {
  131. this.views = new SGraphyView('exampleCanvas')
  132. }
  133. this.views.scene = null;
  134. this.scenes = null;
  135. //类型
  136. if (typecode == 'Eq' || typecode == 'Ec') {
  137. this.scenes = new LocationPointScene();
  138. }
  139. else if (typecode == 'Sp') {
  140. this.scenes = new DivideFloorScene();
  141. }
  142. if (floorMsg.Content[0] && floorMsg.Content[0].StructureInfo && floorMsg.Content[0].StructureInfo.FloorMap) {
  143. this.loading = true;
  144. //获取数据,并加载canvas
  145. this.scenes.loadUrl(`/image-service/common/file_get?systemId=revit&key=${floorMsg.Content[0].StructureInfo.FloorMap}`).then(() => {
  146. this.drawCanvas = true;
  147. this.loading = false;
  148. this.views.scene = this.scenes;
  149. this.scenes.isSpaceSelectable = false;
  150. if (typecode == 'Eq' || typecode == 'Ec') {
  151. this.scenes.addMarker(options);
  152. }
  153. else if (typecode == 'Sp') {
  154. this.scenes.addZone(options);
  155. }
  156. this.views.fitSceneToView();
  157. if (this.$refs.canvasFun) {
  158. this.views.maxScale = this.views.scale * 10;
  159. this.views.minScale = this.views.scale;
  160. this.$refs.canvasFun.everyScale = this.views.scale;
  161. }
  162. })
  163. }
  164. else{
  165. this.loading = false;
  166. this.drawCanvas = false;
  167. }
  168. });
  169. },
  170. // canvas 获取焦点
  171. focus() {
  172. document.getElementById('cadBox').focus()
  173. },
  174. // 工具栏操作
  175. // 适配底图到窗口
  176. fit() {
  177. this.views.fitSceneToView()
  178. },
  179. // 保存为png
  180. savePng() {
  181. this.views.saveImage(`${this.ObjectLocalName}.png`, 'png');
  182. },
  183. // 保存为svg
  184. saveSvg() {
  185. this.views.saveSceneSvg(`${this.ObjectLocalName}.svg`, 6400, 4800);
  186. },
  187. saveJson() {
  188. this.views.saveFloorJson(`${this.ObjectLocalName}.json`)
  189. },
  190. // 缩放
  191. scale(val) {
  192. if (!this.views) {
  193. return;
  194. }
  195. let scale = this.views.scale;
  196. this.views.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2);
  197. }
  198. },
  199. watch: {
  200. $route(to,from){
  201. this.queryParams = this.$route.query;
  202. this.ObjectLocalName = '';
  203. this.drawCanvas = false;
  204. },
  205. "views.scale": {
  206. handler(n) {
  207. if (this.$refs.canvasFun) {
  208. this.$refs.canvasFun.sliderVal = n * 10 / this.views.minScale;
  209. }
  210. }
  211. }
  212. },
  213. }
  214. </script>
  215. <style lang="scss" scoped>
  216. $borderColor: rgba(201, 201, 201, 1);
  217. .page-bar{
  218. flex-grow: 0;
  219. flex-shrink: 0;
  220. height: 24px;
  221. padding: 0 10px;
  222. margin-bottom: 10px;
  223. border-bottom: 1px solid $borderColor;
  224. /deep/ .el-breadcrumb {
  225. font-size: 14px;
  226. }
  227. }
  228. .page-content{
  229. display: flex;
  230. flex-grow: 1;
  231. flex-shrink: 1;
  232. flex-direction: row;
  233. justify-content: flex-start;
  234. overflow-y: auto;
  235. .content-left{
  236. display: flex;
  237. flex-direction: column;
  238. justify-content: flex-start;
  239. width: 260px;
  240. margin-right: 15px;
  241. .data-box{
  242. height: 140px;
  243. margin-bottom: 15px;
  244. }
  245. .example-box{
  246. flex-grow: 1;
  247. flex-shrink: 1;
  248. border: 1px solid $borderColor;
  249. }
  250. }
  251. .content-right{
  252. flex-grow: 1;
  253. flex-shrink: 1;
  254. border: 1px solid $borderColor;
  255. overflow: hidden;
  256. position: relative;
  257. .operate {
  258. position: absolute;
  259. left: 50%;
  260. bottom: 20px;
  261. transform: translateX(-50%);
  262. z-index: 99;
  263. }
  264. .no-data{
  265. height: 100%;
  266. text-align: center;
  267. box-sizing: border-box;
  268. position: relative;
  269. .position-icon{
  270. position: absolute;
  271. top: 50%;
  272. left: 50%;
  273. transform: translate(-50%,-50%);
  274. }
  275. }
  276. }
  277. }
  278. </style>