index.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <template>
  2. <div class='other'>
  3. <div class='other-top'>
  4. <span class='other-system' v-for='(item,index) in matter' :class='item.id==matterId?"isActive":""' :key='index' @click='tabSyatem(item)'>
  5. <img :src='item.id==matterId?item.icon1:item.icon' alt />
  6. {{item.name}}
  7. </span>
  8. </div>
  9. <div class='other-bottom' v-if='matterId!=1'>
  10. <div class='other-left'>
  11. <ul>
  12. <li class='li-style' v-for='(item,index) in everySystem' :key='"o"+index' @click='dialogVisible(item)'>
  13. <span class='circle'></span>
  14. <span class='hanzi'>{{item.label}}</span>
  15. </li>
  16. </ul>
  17. </div>
  18. <!-- 楼层 -->
  19. <div class='other-right' v-if='matterId!=1'>
  20. <floor-list @emitFloor='emitFloor'></floor-list>
  21. </div>
  22. <!-- 图例 -->
  23. <!-- <div class='legend-boxs' v-if='matterId!=1'>
  24. <Legend></Legend>
  25. </div>-->
  26. </div>
  27. <other-dialog ref='dialog' :systemName='systemName'></other-dialog>
  28. <!-- 综合事项管理 -->
  29. <zhsx-other v-if='matterId==1&&everySystem.length>0' :everySystem='everySystem'></zhsx-other>
  30. <!-- 辅助用房管理 -->
  31. <div class='qtfugl' v-if='matterId==2'>
  32. <div class='fzyfImg'>
  33. <img :src='picFloorImg' alt />
  34. </div>
  35. </div>
  36. <gcfz-dialog ref='gcfzDialog' :systemName='systemName'></gcfz-dialog>
  37. </div>
  38. </template>
  39. <script>
  40. import ZhsxOther from './zhsxOther'
  41. import GcfzDialog from './gcfzDialog'
  42. import OtherDialog from './otherDialog'
  43. import { queryPic } from '@/api/public.js'
  44. import floorList from '@/components/floorList.vue'
  45. import { matter, floors } from '@/utils/plugins/components.js'
  46. export default {
  47. data() {
  48. return {
  49. matter,
  50. floors,
  51. everySystem: [],
  52. matterId: 1,
  53. systemName: '供电系统',
  54. floorInfo: {
  55. floorName: 'F1',
  56. floorId: 'f1'
  57. },
  58. picFloor: '',
  59. picFloorImg: '',
  60. dialogInfo: {}
  61. }
  62. },
  63. components: { floorList, OtherDialog, ZhsxOther, GcfzDialog },
  64. methods: {
  65. tabSyatem(item) {
  66. this.matterId = item.id
  67. this.everySystem = item.children
  68. this.systemName = item.name
  69. },
  70. emitFloor(item) {
  71. console.log(item)
  72. this.queryPicter()
  73. this.floorInfo = item
  74. this.picFloor = this.floorInfo.gname
  75. },
  76. dialogVisible(item) {
  77. this.$refs.gcfzDialog.showModal(item)
  78. },
  79. queryPicter() {
  80. this.picFloor = this.$cookie.get('floorNow')
  81. let getParams = {
  82. module: '1002',
  83. floor: this.picFloor,
  84. plazaId: this.$store.state.plazaId
  85. }
  86. queryPic({ getParams }).then(res => {
  87. console.log('库房管理图', res)
  88. this.picFloorImg = res.data
  89. })
  90. }
  91. },
  92. mounted() {
  93. this.everySystem = this.matter[0].children
  94. this.queryPicter()
  95. }
  96. }
  97. </script>
  98. <style lang="less" scoped>
  99. .other {
  100. background: rgba(242, 245, 247, 1);
  101. height: 100%;
  102. overflow: hidden;
  103. .other-top {
  104. margin-top: 24px;
  105. position: fixed;
  106. text-align: center;
  107. width: 100%;
  108. z-index: 2;
  109. .other-system {
  110. padding: 12px 23px;
  111. color: #1f2429;
  112. background: #fff;
  113. font-size: 16px;
  114. cursor: pointer;
  115. vertical-align: bottom;
  116. img {
  117. width: 16px;
  118. height: 16px;
  119. margin-right: 4px;
  120. margin-bottom: 3px;
  121. }
  122. }
  123. .isActive {
  124. color: #025baa;
  125. }
  126. }
  127. .other-bottom {
  128. display: flex;
  129. .other-left {
  130. position: fixed;
  131. z-index: 2;
  132. padding-top: 100px;
  133. color: #646c73;
  134. font-size: 14px;
  135. }
  136. .li-style {
  137. padding: 0 0 8px 35px;
  138. cursor: pointer;
  139. display: flex;
  140. align-items: center;
  141. .circle {
  142. width: 6px;
  143. height: 6px;
  144. border-radius: 50%;
  145. display: inline-block;
  146. margin-right: 10px;
  147. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  148. }
  149. .hanzi {
  150. padding: 10px 2px;
  151. width: 200px;
  152. display: inline-block;
  153. &:hover {
  154. color: rgba(2, 91, 170, 1);
  155. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  156. }
  157. }
  158. }
  159. .other-right {
  160. margin-top: 24px;
  161. flex: 1;
  162. }
  163. .legend-boxs {
  164. position: fixed;
  165. right: 32px;
  166. top: 155px;
  167. }
  168. }
  169. .qtfugl {
  170. .fzyfImg {
  171. width: 1035px;
  172. height: 544px;
  173. margin: 0 auto;
  174. margin-top: 93px;
  175. img {
  176. width: 100%;
  177. height: 100%;
  178. }
  179. }
  180. }
  181. }
  182. </style>