index.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523
  1. <template>
  2. <!-- 设备设施 -->
  3. <div id='equipment'>
  4. <!-- 顶部八个子系统导航 -->
  5. <div class='eq-top'>
  6. <span class='eq-system' v-for='(item,index) in system' :class='item.id==systemId?"isActive":""' :key='index' @click='tabSyatem(item)'>
  7. <img :src='item.id==systemId?item.icon1:item.icon' />
  8. {{item.name}}
  9. </span>
  10. </div>
  11. <div class='eq-bottom'>
  12. <!-- 左侧选择,系统原理图等,点击进入弹窗 -->
  13. <div class='eq-left'>
  14. <ul v-for='(eve,index) in everySystem' :key='"o"+index'>
  15. <li class='li-style' :class='{"is-active": eve.id}' @click='dialogVisible(eve)'>
  16. <span class='circle'></span>
  17. <el-button type='text' disabled class='hanzi2' v-if='eve.label=="查看图纸"' style='text-align:left'>{{eve.label}}</el-button>
  18. <span class='hanzi' v-else>{{eve.label}}</span>
  19. </li>
  20. </ul>
  21. </div>
  22. <!-- 右侧楼层图主体 -->
  23. <div class='eq-right'>
  24. <div class='eq-right-bottom'>
  25. <div class='title-box'>
  26. <div class='eq-title'>
  27. <span class='span1'>{{floorInfo.code}}</span>
  28. </div>
  29. </div>
  30. <div class='eq-content'>
  31. <floorMap ref='floorMap' :id='"equip"' :loadName='loadName' :type='"system"'></floorMap>
  32. <div class='legend-boxs'>
  33. <Legend
  34. :key='keyLd'
  35. :systemName='systemName'
  36. :floors='floorsArr'
  37. type='1'
  38. :editTips='`编辑${floorInfo.code}层${systemName}平面图`'
  39. ></Legend>
  40. <!-- 楼层切换组件 -->
  41. <floor-list :key='keyFL' v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor' id='system'></floor-list>
  42. <div class='additional-box' ref='additionalBox' v-if='fqPic.length>0'>
  43. <div class='additional2' @click='additionalColl' v-if='showView===3'>
  44. <img src='../../assets/imgs/bg2.png' alt />
  45. </div>
  46. <div class='additional' @click='additionalColl' v-else>
  47. <img src='../../assets/imgs/bg.png' alt />
  48. </div>
  49. <el-collapse-transition>
  50. <div v-show='showView===3' class='add-img-container' ref='addImgContainer' :style='`bottom: ${bottomOffset}px;`'>
  51. <div class='add-img' ref='addImg'>
  52. <img :src='fqPic[0].url' alt />
  53. </div>
  54. </div>
  55. </el-collapse-transition>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. <!-- 使用 v-if解决弹窗未展示时,会调用接口的问题 -->
  63. <eq-dialog v-if='ShowDialog' ref='dialog' :systemName='systemName' :smsxt='smsxt' @emitCount='emitCount' @closeModal='closeModal'></eq-dialog>
  64. </div>
  65. </template>
  66. <script>
  67. import floorList from '@/components/floorList.vue'
  68. import floorMap from '@/components/floorMap/index.vue'
  69. import eqDialog from './eqDialog'
  70. import editList from '@/components/edit.vue'
  71. import { system } from '@/utils/plugins/components.js'
  72. import { queryPic, getPvUv } from '@/api/public.js'
  73. import { mapGetters } from 'vuex'
  74. import store from '../../store'
  75. export default {
  76. data() {
  77. return {
  78. system,
  79. everySystem: [],
  80. systemId: 1,
  81. categoryId: 'GDXT',
  82. systemName: '供电系统',
  83. floorInfo: {
  84. code: 'F1',
  85. gcode: '1F',
  86. gname: 'f1',
  87. seq: 100
  88. },
  89. smsxt: '1001',
  90. dialogInfo: {},
  91. brand: [], //品牌
  92. manufacturer: [],
  93. fqPic: [],
  94. loadName: '',
  95. type: '',
  96. objCount: [],
  97. bottomOffset: 0,
  98. keyFL: 'keyFL' + new Date().getTime(),
  99. keyLd: 'keyLd_' + new Date().getTime(),
  100. ShowDialog: false //是否显示弹窗
  101. }
  102. },
  103. components: { floorList, eqDialog, floorMap, editList },
  104. watch: {
  105. // 监听currentFloor变化,重新渲染楼层组件,解决 数据与视图不照应的问题
  106. /* '$store.state.currentFloor': {
  107. handler(newV, oldV) {
  108. if (newV.seq !== oldV.seq) {
  109. // TODO: keyFL更新
  110. this.keyFL = 'keyFL' + new Date().getTime()
  111. }
  112. }
  113. } */
  114. },
  115. methods: {
  116. // 查询tab页
  117. tabSyatem(item) {
  118. this.systemId = item.id
  119. this.everySystem = item.children
  120. this.systemName = item.name
  121. this.smsxt = item.smsxt
  122. this.$cookie.set('categoryId', item.categoryId, 3)
  123. store.commit('SETCATEGORYID', item.categoryId)
  124. this.$refs.floorMap.init(this.floorInfo.gname)
  125. this.querySmsxt()
  126. this.viewLengend()
  127. // 发送pvUv
  128. const data = {
  129. plazaId: this.plazaId
  130. }
  131. let postParams = {
  132. type: 'equipmentRouter',
  133. target: item.name,
  134. parameter: item.categoryId
  135. }
  136. getPvUv(data, postParams )
  137. .then(res => {
  138. console.log('pvuv', res)
  139. })
  140. .catch(res => {
  141. console.log('error', res)
  142. })
  143. },
  144. querySmsxt() {
  145. // 目前消防和弱电下面有特殊的数据表格
  146. if (this.smsxt == '1003' || this.smsxt == '1004') {
  147. this.queryTable(this.smsxt)
  148. }
  149. },
  150. //判断有没有原理图,如果没有则不出现系统原理图列表li
  151. emitCount(objCount) {
  152. this.objCount = objCount
  153. },
  154. emitFloor(item) {
  155. this.floorInfo = item
  156. console.log(item)
  157. this.$refs.floorMap.init(this.floorInfo.gname)
  158. this.init()
  159. this.querySmsxt()
  160. },
  161. dialogVisible(eve) {
  162. // console.log('dialogVisible')
  163. console.log(eve)
  164. // 点击后显示弹窗组件
  165. if (eve.label != '查看图纸') {
  166. this.ShowDialog = true
  167. this.$nextTick(() => {
  168. this.$refs.dialog.showModal(eve)
  169. })
  170. // pvuv接口记录
  171. // 发送pvUv
  172. const data = {
  173. plazaId: this.plazaId
  174. }
  175. let postParams = {
  176. type: 'modal',
  177. target: eve.id,
  178. parameter: eve.label
  179. }
  180. getPvUv( data, postParams )
  181. .then(res => {
  182. console.log('pvuv', res)
  183. })
  184. .catch(res => {
  185. console.log('error', res)
  186. })
  187. }
  188. },
  189. /**
  190. * 关闭弹窗后,重新渲染 楼层组件
  191. * 在父组件(本组件)内将 ShowDialog 置为false
  192. * @param {Boolean} flag 弹窗组件传回的标志: 一直传回 true
  193. */
  194. closeModal(flag) {
  195. this.ShowDialog = false
  196. // this.keyFL = 'keyFL' + new Date().getTime()
  197. this.keyLd = 'keyLd' + new Date().getTime()
  198. },
  199. //附加数据图片查看 showView为3展示状态
  200. additionalColl() {
  201. if (this.showView != 3) {
  202. this.$store.commit('SETSHOWVIEW', 3)
  203. this.$nextTick(() => {
  204. let p = this.$refs.additionalBox.offsetTop
  205. let d = this.$refs.addImgContainer.offsetHeight
  206. let bottomOffset = p + 44 - d
  207. if (bottomOffset >= 0) {
  208. this.bottomOffset = 0
  209. } else {
  210. this.bottomOffset = bottomOffset
  211. }
  212. })
  213. } else {
  214. this.$store.commit('SETSHOWVIEW', 0)
  215. }
  216. },
  217. // 查询附加数据图片
  218. queryTable(system) {
  219. this.fqPic = []
  220. let picFloor = this.$cookie.get('floorMapId')
  221. let getParams = {
  222. module: '1003',
  223. floor: picFloor,
  224. system: system,
  225. plazaId: this.plazaId
  226. }
  227. queryPic({ getParams }).then(res => {
  228. // console.log('附加数据', res)
  229. this.fqPic = res.data
  230. })
  231. },
  232. init() {
  233. this.loadName = `设备设施-${this.systemName}-${this.floorInfo.code}`
  234. },
  235. // 从设备设施进入的机房
  236. queryType(val) {
  237. this.type = val
  238. },
  239. viewLengend() {
  240. if (this.legendTable.length > 0) {
  241. this.$store.commit('SETSHOWVIEW', 1)
  242. } else {
  243. this.$store.commit('SETSHOWVIEW', 0)
  244. }
  245. },
  246. smsxtQuery() {
  247. if (this.smsxt == '1001') {
  248. this.$cookie.set('categoryId', 'GDXT')
  249. } else if (this.smsxt == '1002') {
  250. this.$cookie.set('categoryId', 'NTXT')
  251. } else if (this.smsxt == '1003') {
  252. this.$cookie.set('categoryId', 'XFXT')
  253. } else if (this.smsxt == '1004') {
  254. this.$cookie.set('categoryId', 'RDXT')
  255. } else if (this.smsxt == '1005') {
  256. this.$cookie.set('categoryId', 'JPSXT')
  257. } else if (this.smsxt == '1006') {
  258. this.$cookie.set('categoryId', 'DTXT')
  259. } else if (this.smsxt == '1007') {
  260. this.$cookie.set('categoryId', 'RQYL')
  261. } else {
  262. this.$cookie.set('categoryId', 'SCPZ')
  263. }
  264. }
  265. },
  266. /* mounted() {
  267. if (this.$route.query.smsxt) {
  268. this.smsxt = this.$route.query.smsxt
  269. this.system.forEach(el => {
  270. if (el.smsxt == this.smsxt) {
  271. this.everySystem = el.children
  272. this.systemName = el.name
  273. this.systemId = el.id
  274. }
  275. })``
  276. }
  277. this.everySystem = this.system[0].children
  278. this.init()
  279. this.$refs.floorMap.init(this.floorInfo.gname)
  280. }, */
  281. mounted() {
  282. window._vm = this
  283. if (this.$route.query.smsxt) {
  284. console.log(this.$route.query.smsxt)
  285. this.smsxt = this.$route.query.smsxt
  286. this.smsxtQuery()
  287. this.system.forEach(el => {
  288. if (el.smsxt == this.smsxt) {
  289. this.everySystem = el.children
  290. this.systemName = el.name
  291. this.systemId = el.id
  292. }
  293. })
  294. }
  295. this.everySystem = this.system[0].children
  296. // 刷新时,store中有categoryId时,选中子系统状态
  297. if (this.$store.state.categoryId) {
  298. let item = this.system.filter(item => item.categoryId === this.$store.state.categoryId)[0]
  299. this.systemId = item.id
  300. this.everySystem = item.children
  301. this.systemName = item.name
  302. this.smsxt = item.smsxt
  303. // this.$refs.floorMap.init(this.floorInfo.gname)
  304. this.querySmsxt()
  305. this.viewLengend()
  306. }
  307. this.init()
  308. console.log(this.floorInfo.gname)
  309. this.$refs.floorMap.init(this.floorInfo.gname)
  310. },
  311. computed: {
  312. ...mapGetters(['floorsArr', 'plazaId', 'showView', 'legendTable'])
  313. }
  314. }
  315. </script>
  316. <style lang="less" scoped>
  317. #equipment {
  318. background: rgba(242, 245, 247, 1);
  319. display: flex;
  320. flex: 1;
  321. overflow: hidden;
  322. color: #1f2429;
  323. .eq-top {
  324. // margin-left: 260px;
  325. width: 100%;
  326. padding-top: 24px;
  327. position: fixed;
  328. z-index: 3;
  329. display: flex;
  330. justify-content: center;
  331. .eq-system {
  332. padding: 12px 20px;
  333. background: #fff;
  334. font-size: 16px;
  335. cursor: pointer;
  336. img {
  337. width: 16px;
  338. height: 16px;
  339. margin-right: 4px;
  340. margin-bottom: 3px;
  341. }
  342. }
  343. .isActive {
  344. color: #025baa;
  345. font-weight: bolder;
  346. background: linear-gradient(360deg, rgba(2, 91, 170, 0.1) 0%, rgba(2, 91, 170, 0) 100%);
  347. }
  348. }
  349. .eq-bottom {
  350. display: flex;
  351. flex: 1;
  352. .eq-left {
  353. position: fixed;
  354. z-index: 2;
  355. width: 260px;
  356. padding-top: 100px;
  357. color: #646c73;
  358. font-size: 14px;
  359. height: 100%;
  360. background: rgba(242, 245, 247, 1);
  361. }
  362. .li-style {
  363. margin-left: 28px;
  364. cursor: pointer;
  365. .circle {
  366. width: 6px;
  367. height: 6px;
  368. background: linear-gradient(180deg, rgba(54, 156, 247, 0.6) 0%, rgba(2, 91, 170, 0.6) 100%);
  369. border-radius: 50%;
  370. display: inline-block;
  371. margin-right: 10px;
  372. }
  373. .hanzi {
  374. padding: 10px 0 10px 6px;
  375. width: 200px;
  376. display: inline-block;
  377. &:hover {
  378. color: rgba(2, 91, 170, 1);
  379. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  380. }
  381. }
  382. .hanzi2 {
  383. padding: 10px 0 10px 6px;
  384. width: 200px;
  385. display: inline-block;
  386. }
  387. }
  388. .eq-right {
  389. flex: 1;
  390. .eq-right-bottom {
  391. display: flex;
  392. flex: 1;
  393. height: 100%;
  394. .title-box {
  395. position: fixed;
  396. z-index: 2;
  397. top: 146px;
  398. left: 260px;
  399. display: flex;
  400. img {
  401. margin-top: -5px;
  402. }
  403. .eq-title {
  404. width: 140px;
  405. height: 32px;
  406. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  407. box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
  408. color: #025baa;
  409. font-size: 16px;
  410. &::before {
  411. width: 2px;
  412. height: 16px;
  413. background: rgba(2, 91, 170, 1);
  414. display: inline-block;
  415. content: '';
  416. margin-right: 10px;
  417. margin-top: 8px;
  418. }
  419. .span1 {
  420. position: absolute;
  421. top: 3px;
  422. }
  423. }
  424. }
  425. .eq-content {
  426. flex: 1;
  427. .legend-boxs {
  428. position: fixed;
  429. z-index: 9;
  430. right: 32px;
  431. top: 142px;
  432. }
  433. .additional-box {
  434. position: relative;
  435. margin-top: 8px;
  436. .additional,
  437. .additional2 {
  438. width: 44px;
  439. height: 44px;
  440. border-radius: 2px;
  441. display: flex;
  442. justify-content: center;
  443. align-items: center;
  444. cursor: pointer;
  445. img {
  446. width: 20px;
  447. height: 20px;
  448. }
  449. }
  450. .additional {
  451. background: rgba(255, 255, 255, 1);
  452. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  453. }
  454. .additional2 {
  455. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  456. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  457. }
  458. .add-img-container {
  459. width: 898px;
  460. max-height: 674px;
  461. overflow-y: auto;
  462. background: #ffffff;
  463. -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  464. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  465. border-radius: 2px;
  466. border: 1px solid #e4e5e7;
  467. position: absolute;
  468. right: 48px;
  469. bottom: 0;
  470. padding: 24px 20px;
  471. &::-webkit-scrollbar {
  472. display: none;
  473. }
  474. .add-img {
  475. width: 100%;
  476. height: 100%;
  477. overflow: hidden;
  478. img {
  479. width: 100%;
  480. display: block;
  481. margin: 0 auto;
  482. }
  483. }
  484. }
  485. }
  486. }
  487. }
  488. }
  489. }
  490. }
  491. @media screen and (max-width: 1600px) {
  492. /*当屏幕尺寸小于1366px时,应用下面的CSS样式*/
  493. .eq-top {
  494. margin-left: 0 !important;
  495. }
  496. #equipment .eq-bottom .eq-right .eq-right-bottom .eq-content .additional-box .add-img-container {
  497. width: 640px;
  498. max-height: 480px;
  499. }
  500. }
  501. </style>
  502. <style lang="less">
  503. .el-table {
  504. th {
  505. background: rgba(248, 249, 250, 1);
  506. font-size: 12px;
  507. padding: 8px 0;
  508. color: #646a73;
  509. }
  510. td {
  511. font-size: 14px;
  512. color: #1f2429;
  513. padding: 8px 0;
  514. overflow: hidden;
  515. text-overflow: ellipsis;
  516. white-space: nowrap;
  517. }
  518. }
  519. </style>