index.vue 19 KB

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