App.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. <template>
  2. <div id='app'>
  3. <div :id='`fengMap${id}`' class='fengMap'></div>
  4. <router-view />
  5. </div>
  6. </template>
  7. <script>
  8. import { mapGetters, mapActions, mapMutations } from 'vuex'
  9. import { SFengParser } from '@saga-web/feng-map'
  10. window.fengmapData = null
  11. export default {
  12. data() {
  13. return {
  14. view: '',
  15. scene: '',
  16. id: '2',
  17. canvasID: '',
  18. key: '23f30a832a862c58637a4aadbf50a566',
  19. appName: '万达可视化系统',
  20. mapServerURL: `http://map.wanda.cn/editor`,
  21. mapthemeUrl: `http://map.wanda.cn/editor/webtheme`
  22. }
  23. },
  24. mounted() {
  25. // 监听页面刷新事件
  26. window.addEventListener('unload', this.unload)
  27. // 页面加载完成后,移除session里的存储的信息
  28. window.addEventListener('load', this.load)
  29. // 请求该项目下的楼层数据
  30. this.getFengMap()
  31. },
  32. computed: {
  33. ...mapGetters(['plazaId', 'fmapID', 'haveFengMap'])
  34. },
  35. methods: {
  36. ...mapActions(['getfmapID']),
  37. ...mapMutations(['SETHAVEFENGMAP']),
  38. unload() {
  39. // const { userInfo, projectId, menuStatus,manualAutoMode } = this.$store.state;
  40. const state = this.$store.state
  41. sessionStorage.setItem('state', JSON.stringify(state))
  42. },
  43. load() {
  44. sessionStorage.clear()
  45. },
  46. getFengMap() {
  47. if (!this.fmapID) {
  48. this.getfmapID().then(() => {
  49. this.getMap()
  50. })
  51. return
  52. }
  53. this.getMap()
  54. },
  55. getMap() {
  56. if (!window.fengmapData) {
  57. window.fengmapData = new SFengParser(
  58. `fengMap${this.id}`,
  59. `${this.mapServerURL}/fmap/${this.fmapID}`,
  60. this.key,
  61. this.appName,
  62. null,
  63. this.mapthemeUrl
  64. )
  65. window.fengmapData.loadMap(this.fmapID, () => {
  66. // 获取主题数据
  67. window.fengmapData.loadTheme(`${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`).then(res => {
  68. this.SETHAVEFENGMAP()
  69. })
  70. })
  71. }
  72. }
  73. }
  74. }
  75. </script>
  76. <style lang="less">
  77. body,
  78. h1,
  79. h2,
  80. h3,
  81. h4,
  82. h5,
  83. h6,
  84. hr,
  85. p,
  86. blockquote,
  87. dl,
  88. dt,
  89. dd,
  90. ul,
  91. ol,
  92. li,
  93. pre,
  94. form,
  95. fieldset,
  96. legend,
  97. button,
  98. input,
  99. textarea,
  100. th,
  101. td {
  102. margin: 0;
  103. padding: 0;
  104. }
  105. body,
  106. button,
  107. input,
  108. select,
  109. textarea {
  110. font: 12px/1.5 Arial, 'Microsoft YaHei', '\65b0\5b8b\4f53';
  111. }
  112. h1,
  113. h2,
  114. h3,
  115. h4,
  116. h5,
  117. h6 {
  118. font-size: 100%;
  119. }
  120. address,
  121. cite,
  122. dfn,
  123. var,
  124. em,
  125. i,
  126. u {
  127. font-style: normal;
  128. }
  129. ol,
  130. ul {
  131. list-style: none;
  132. }
  133. a {
  134. text-decoration: none;
  135. }
  136. a:hover {
  137. text-decoration: underline;
  138. }
  139. img {
  140. border: none;
  141. vertical-align: middle;
  142. }
  143. :focus {
  144. outline: 0;
  145. }
  146. button,
  147. input,
  148. select,
  149. textarea {
  150. font-size: 100%;
  151. }
  152. table {
  153. border-collapse: collapse;
  154. border-spacing: 0;
  155. }
  156. /* 滚动条样式 */
  157. body ::-webkit-scrollbar {
  158. width: 5px;
  159. height: 8px;
  160. }
  161. body ::-webkit-scrollbar-track {
  162. background-color: rgba(0, 0, 0, 0);
  163. border-radius: 3px;
  164. }
  165. body ::-webkit-scrollbar-thumb {
  166. border-radius: 3px;
  167. background: #e6e6e6;
  168. border: 1px solid #e6e6e6;
  169. }
  170. body ::-webkit-scrollbar-thumb:vertical:hover {
  171. background: #e6e6e6;
  172. border: 1px solid #e6e6e6;
  173. }
  174. #app {
  175. //meri-design组件select的字体颜色
  176. /deep/ .p-select-fakePlaceholder {
  177. span {
  178. span {
  179. color: #606266 !important;
  180. font-size: 13px;
  181. font-weight: normal;
  182. }
  183. }
  184. }
  185. //element 分页组件背景色
  186. /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  187. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  188. }
  189. //element button
  190. /deep/ .el-button--primary,
  191. .p-button-primary {
  192. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  193. }
  194. }
  195. .clearfix::after {
  196. content: '.';
  197. display: block;
  198. height: 0;
  199. clear: both;
  200. visibility: hidden;
  201. }
  202. .clearfix {
  203. zoom: 1;
  204. }
  205. .left {
  206. float: left;
  207. }
  208. .right {
  209. float: right;
  210. }
  211. html,
  212. body {
  213. width: 100%;
  214. height: 100%;
  215. // min-width: 1920px;
  216. // background: url('./assets/images/back.jpg') no-repeat;
  217. }
  218. #app {
  219. height: 100%;
  220. width: 100%;
  221. position: relative;
  222. .fengMap {
  223. position: fixed;
  224. width: 100px;
  225. height: 100px;
  226. z-index: -1;
  227. opacity: 0;
  228. }
  229. }
  230. // element表头背景颜色修改
  231. .core-device-report,
  232. .specification-update-record {
  233. .el-table thead th {
  234. background-color: #f8f9fa;
  235. }
  236. .el-pagination.is-background .el-pager li:not(.disabled).active {
  237. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  238. }
  239. }
  240. // 说明书更新记录 element 时间控件样式重写
  241. .specification-update-record,
  242. .core-device-report {
  243. .el-input__inner {
  244. height: 32px;
  245. line-height: 32px;
  246. }
  247. .el-date-editor .el-range__icon,
  248. .el-date-editor .el-range-separator {
  249. line-height: 26px;
  250. width: 8%;
  251. }
  252. }
  253. </style>