index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. <template>
  2. <!-- 设备设施 -->
  3. <div id='equipment'>
  4. <div class='eq-top'>
  5. <span class='eq-system' v-for='(item,index) in system' :class='item.id==systemId?"isActive":""' :key='index' @click='tabSyatem(item)'>
  6. <img :src='item.id==systemId?item.icon1:item.icon' />
  7. {{item.name}}
  8. </span>
  9. </div>
  10. <div class='eq-bottom'>
  11. <div class='eq-left'>
  12. <ul v-for='(eve,index) in everySystem' :key='"o"+index'>
  13. <li class='li-style' :class='{"is-active": eve.id}' @click='dialogVisible(eve)'>
  14. <span class='circle'></span>
  15. <span class='hanzi'>{{eve.label}}</span>
  16. </li>
  17. </ul>
  18. </div>
  19. <div class='eq-right'>
  20. <div class='eq-right-bottom'>
  21. <div class='title-box'>
  22. <div class='eq-title'>
  23. <span class='span1'>{{floorInfo.code}}</span>
  24. </div>
  25. </div>
  26. <div class='eq-content'>
  27. <div class='legend-boxs'>
  28. <Legend :systemName='systemName' :floors='floorsArr' type='1' :editTips='`编辑${floorInfo.code}层${systemName}平面图`'></Legend>
  29. </div>
  30. <floorMap ref='floorMap' :id='"equip"' :loadName='loadName' :type='"system"'></floorMap>
  31. <div class='additional-box' v-if='fqPic.length>0'>
  32. <div class='additional2' @click='additionalColl' v-if='showView===3'>
  33. <img src='../../assets/imgs/bg2.png' alt />
  34. </div>
  35. <div class='additional' @click='additionalColl' v-else>
  36. <img src='../../assets/imgs/bg.png' alt />
  37. </div>
  38. <el-collapse-transition>
  39. <div v-if='showView===3' class='add-img-container'>
  40. <div class='add-img'>
  41. <img :src='fqPic[0].url' alt />
  42. </div>
  43. </div>
  44. </el-collapse-transition>
  45. </div>
  46. </div>
  47. <floor-list :key='keyFL' v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor' id='system'></floor-list>
  48. </div>
  49. </div>
  50. </div>
  51. <eq-dialog ref='dialog' :systemName='systemName' :smsxt='smsxt' @emitCount='emitCount'></eq-dialog>
  52. </div>
  53. </template>
  54. <script>
  55. import floorList from '@/components/floorList.vue'
  56. import floorMap from '@/components/floorMap/index.vue'
  57. import eqDialog from './eqDialog'
  58. import editList from '@/components/edit.vue'
  59. import { system } from '@/utils/plugins/components.js'
  60. import { queryPic } from '@/api/public.js'
  61. import { mapGetters } from 'vuex'
  62. import store from '../../store'
  63. export default {
  64. data() {
  65. return {
  66. system,
  67. everySystem: [],
  68. systemId: 1,
  69. categoryId: 'GDXT',
  70. systemName: '供电系统',
  71. floorInfo: {
  72. gname: 'f1',
  73. code: 'F1'
  74. },
  75. smsxt: '1001',
  76. dialogInfo: {},
  77. brand: [], //品牌
  78. manufacturer: [],
  79. fqPic: [],
  80. loadName: '',
  81. type: '',
  82. objCount: [],
  83. keyFL: 'keyFL' + new Date().getTime()
  84. }
  85. },
  86. components: { floorList, eqDialog, floorMap, editList },
  87. watch: {
  88. // 监听currentFloor变化,重新渲染楼层组件,解决 数据与视图不照应的问题
  89. '$store.state.currentFloor': {
  90. handler(newV, oldV) {
  91. if (newV.seq !== oldV.seq) {
  92. this.keyFL = 'keyFL' + new Date().getTime()
  93. }
  94. }
  95. }
  96. },
  97. methods: {
  98. // 查询tab页
  99. tabSyatem(item) {
  100. this.systemId = item.id
  101. this.everySystem = item.children
  102. this.systemName = item.name
  103. this.smsxt = item.smsxt
  104. this.$cookie.set('categoryId', item.categoryId, 3)
  105. store.commit('SETCATEGORYID', item.categoryId)
  106. this.$refs.floorMap.init(this.floorInfo.gname)
  107. this.querySmsxt()
  108. this.viewLengend()
  109. },
  110. querySmsxt() {
  111. // 目前消防和弱电下面有特殊的数据表格
  112. if (this.smsxt == '1003' || this.smsxt == '1004') {
  113. this.queryTable(this.smsxt)
  114. }
  115. },
  116. //判断有没有原理图,如果没有则不出现系统原理图列表li
  117. emitCount(objCount) {
  118. this.objCount = objCount
  119. },
  120. emitFloor(item) {
  121. this.floorInfo = item
  122. this.$refs.floorMap.init(this.floorInfo.gname)
  123. this.init()
  124. this.querySmsxt()
  125. },
  126. dialogVisible(eve) {
  127. this.$refs.dialog.showModal(eve)
  128. },
  129. //附加数据图片查看 showView为3展示状态
  130. additionalColl() {
  131. if (this.showView != 3) {
  132. this.$store.commit('SETSHOWVIEW', 3)
  133. } else {
  134. this.$store.commit('SETSHOWVIEW', 0)
  135. }
  136. },
  137. // 查询附加数据图片
  138. queryTable(system) {
  139. this.fqPic = []
  140. let picFloor = this.$cookie.get('floorNow')
  141. let getParams = {
  142. module: '1003',
  143. floor: picFloor,
  144. system: system,
  145. plazaId: this.plazaId
  146. }
  147. queryPic({ getParams }).then(res => {
  148. // console.log('附加数据', res)
  149. this.fqPic = res.data
  150. })
  151. },
  152. init() {
  153. this.loadName = `设备设施-${this.systemName}-${this.floorInfo.code}`
  154. },
  155. // 从设备设施进入的机房
  156. queryType(val) {
  157. this.type = val
  158. },
  159. viewLengend() {
  160. if (this.legendTable.length > 0) {
  161. this.$store.commit('SETSHOWVIEW', 1)
  162. } else {
  163. this.$store.commit('SETSHOWVIEW', 0)
  164. }
  165. }
  166. },
  167. mounted() {
  168. if (this.$route.query.smsxt) {
  169. this.smsxt = this.$route.query.smsxt
  170. this.system.forEach(el => {
  171. if (el.smsxt == this.smsxt) {
  172. this.everySystem = el.children
  173. this.systemName = el.name
  174. this.systemId = el.id
  175. }
  176. })
  177. }
  178. this.everySystem = this.system[0].children
  179. this.init()
  180. this.$refs.floorMap.init(this.floorInfo.gname)
  181. },
  182. computed: {
  183. ...mapGetters(['floorsArr', 'plazaId', 'showView', 'legendTable'])
  184. }
  185. }
  186. </script>
  187. <style lang="less" scoped>
  188. #equipment {
  189. background: rgba(242, 245, 247, 1);
  190. display: flex;
  191. flex: 1;
  192. overflow: hidden;
  193. color: #1f2429;
  194. .eq-top {
  195. // margin-left: 260px;
  196. width: 100%;
  197. padding-top: 24px;
  198. position: fixed;
  199. z-index: 3;
  200. display: flex;
  201. justify-content: center;
  202. .eq-system {
  203. padding: 12px 20px;
  204. background: #fff;
  205. font-size: 16px;
  206. cursor: pointer;
  207. img {
  208. width: 16px;
  209. height: 16px;
  210. margin-right: 4px;
  211. margin-bottom: 3px;
  212. }
  213. }
  214. .isActive {
  215. color: #025baa;
  216. font-weight: bolder;
  217. background: linear-gradient(360deg, rgba(2, 91, 170, 0.1) 0%, rgba(2, 91, 170, 0) 100%);
  218. }
  219. }
  220. .eq-bottom {
  221. display: flex;
  222. flex: 1;
  223. .eq-left {
  224. position: fixed;
  225. z-index: 2;
  226. width: 260px;
  227. padding-top: 100px;
  228. color: #646c73;
  229. font-size: 14px;
  230. height: 100%;
  231. background: rgba(242, 245, 247, 1);
  232. }
  233. .li-style {
  234. margin-left: 28px;
  235. // padding: 9px 6px;
  236. cursor: pointer;
  237. .circle {
  238. width: 6px;
  239. height: 6px;
  240. background: linear-gradient(180deg, rgba(54, 156, 247, 0.6) 0%, rgba(2, 91, 170, 0.6) 100%);
  241. border-radius: 50%;
  242. display: inline-block;
  243. margin-right: 10px;
  244. }
  245. .hanzi {
  246. padding: 10px 0 10px 6px;
  247. width: 200px;
  248. display: inline-block;
  249. &:hover {
  250. color: rgba(2, 91, 170, 1);
  251. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  252. }
  253. }
  254. }
  255. .eq-right {
  256. flex: 1;
  257. .eq-right-bottom {
  258. display: flex;
  259. flex: 1;
  260. height: 100%;
  261. .title-box {
  262. position: fixed;
  263. z-index: 2;
  264. top: 146px;
  265. left: 260px;
  266. display: flex;
  267. img {
  268. margin-top: -5px;
  269. }
  270. .eq-title {
  271. width: 140px;
  272. height: 32px;
  273. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  274. box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
  275. color: #025baa;
  276. font-size: 16px;
  277. &::before {
  278. width: 2px;
  279. height: 16px;
  280. background: rgba(2, 91, 170, 1);
  281. display: inline-block;
  282. content: '';
  283. margin-right: 10px;
  284. margin-top: 8px;
  285. }
  286. .span1 {
  287. position: absolute;
  288. top: 3px;
  289. }
  290. }
  291. }
  292. .eq-content {
  293. flex: 1;
  294. .legend-boxs {
  295. position: fixed;
  296. z-index: 9;
  297. right: 32px;
  298. top: 160px;
  299. }
  300. .additional-box {
  301. position: relative;
  302. .additional,
  303. .additional2 {
  304. width: 44px;
  305. height: 44px;
  306. border-radius: 2px;
  307. position: fixed;
  308. right: 32px;
  309. top: 510px;
  310. z-index: 2;
  311. display: flex;
  312. justify-content: center;
  313. align-items: center;
  314. cursor: pointer;
  315. img {
  316. width: 20px;
  317. height: 20px;
  318. }
  319. }
  320. .additional {
  321. background: rgba(255, 255, 255, 1);
  322. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  323. }
  324. .additional2 {
  325. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  326. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  327. }
  328. .add-img-container {
  329. width: 560px;
  330. height: 360px;
  331. overflow: hidden;
  332. background: #ffffff;
  333. -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  334. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  335. border-radius: 2px;
  336. border: 1px solid #e4e5e7;
  337. position: absolute;
  338. right: 77px;
  339. bottom: 381px;
  340. z-index: 2;
  341. padding: 20px;
  342. .add-img {
  343. // padding: 0;
  344. width: 100%;
  345. height: 100%;
  346. overflow: scroll;
  347. img {
  348. width: 100%;
  349. // max-height: 100%;
  350. display: block;
  351. margin: 0 auto;
  352. }
  353. }
  354. }
  355. }
  356. }
  357. }
  358. }
  359. }
  360. }
  361. @media screen and (max-width: 1366px) {
  362. /*当屏幕尺寸小于1366px时,应用下面的CSS样式*/
  363. .eq-top {
  364. margin-left: 0 !important;
  365. }
  366. }
  367. </style>
  368. <style lang="less">
  369. .el-table {
  370. th {
  371. background: rgba(248, 249, 250, 1);
  372. font-size: 12px;
  373. padding: 8px 0;
  374. color: #646a73;
  375. }
  376. td {
  377. font-size: 14px;
  378. color: #1f2429;
  379. padding: 8px 0;
  380. overflow: hidden;
  381. text-overflow: ellipsis;
  382. white-space: nowrap;
  383. }
  384. }
  385. </style>