index.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  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 v-if='floorData.length>0' :floorsArr='floorData' @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, queryTab } from '@/api/public.js'
  44. import floorList from '@/components/floorList.vue'
  45. import { matter } from '@/utils/plugins/components.js'
  46. import { mapGetters } from 'vuex'
  47. export default {
  48. data() {
  49. return {
  50. matter,
  51. everySystem: [],
  52. matterId: 1,
  53. systemName: '供电系统',
  54. floorInfo: {
  55. floorName: 'F1',
  56. floorId: 'f1'
  57. },
  58. picFloor: '',
  59. picFloorImg: [],
  60. dialogInfo: {},
  61. floorData: []
  62. }
  63. },
  64. components: { floorList, OtherDialog, ZhsxOther, GcfzDialog },
  65. methods: {
  66. tabSyatem(item) {
  67. this.matterId = item.id
  68. this.everySystem = item.children
  69. this.systemName = item.name
  70. },
  71. emitFloor(item) {
  72. console.log(item)
  73. this.queryPicter(item.gname)
  74. this.floorInfo = item
  75. this.picFloor = this.floorInfo.gname
  76. },
  77. dialogVisible(item) {
  78. this.$refs.gcfzDialog.showModal(item)
  79. },
  80. queryPicter(floor) {
  81. this.picFloor = this.$cookie.get('floorNow')
  82. let getParams = {
  83. module: '1004',
  84. floor: floor,
  85. plazaId: this.$store.state.plazaId
  86. }
  87. queryPic({ getParams }).then(res => {
  88. console.log('库房管理图', res)
  89. this.picFloorImg = res.data[0].url ? res.data[0].url : ''
  90. console.log('this.picFloorImg', this.picFloorImg)
  91. })
  92. },
  93. // 查询哪几个楼层有库房图
  94. tabSize() {
  95. let data = { plazaId: this.$store.state.plazaId }
  96. let postParams = [
  97. {
  98. tableName: 'glsms_proimgup',
  99. params: { module: '1004', floor: 'f1' }
  100. },
  101. {
  102. tableName: 'glsms_proimgup',
  103. params: { module: '1004', floor: 'f2' }
  104. },
  105. {
  106. tableName: 'glsms_proimgup',
  107. params: { module: '1004', floor: 'f3' }
  108. },
  109. {
  110. tableName: 'glsms_proimgup',
  111. params: { module: '1004', floor: 'f4' }
  112. },
  113. {
  114. tableName: 'glsms_proimgup',
  115. params: { module: '1004', floor: 'f5' }
  116. },
  117. {
  118. tableName: 'glsms_proimgup',
  119. params: { module: '1004', floor: 'f6' }
  120. },
  121. {
  122. tableName: 'glsms_proimgup',
  123. params: { module: '1004', floor: 'b1' }
  124. },
  125. {
  126. tableName: 'glsms_proimgup',
  127. params: { module: '1004', floor: 'b2' }
  128. }
  129. ]
  130. queryTab({ data, postParams }).then(res => {
  131. console.log('查询哪几层楼有图', res)
  132. this.floorData = []
  133. let data = res.data.data
  134. data.forEach(el => {
  135. console.log(el)
  136. // gcode: "4F"
  137. // name: "第4层"
  138. // seq: 400
  139. if (el.count > 0) {
  140. let obj = {
  141. gname: el.params.floor,
  142. code: el.params.floor.toUpperCase(),
  143. gcode: el.params.floor
  144. .toUpperCase()
  145. .split('')
  146. .reverse()
  147. .join(''),
  148. seq:
  149. el.params.floor.substring(1, 2) == 'b'
  150. ? el.params.floor.substring(1, 2) + '00'
  151. : -el.params.floor.substring(1, 2) + '00'
  152. }
  153. console.log(obj)
  154. this.floorData.push(obj)
  155. }
  156. })
  157. console.log('查询哪几层楼有图', this.floorData)
  158. })
  159. }
  160. },
  161. computed: {
  162. ...mapGetters(['floorsArr'])
  163. },
  164. mounted() {
  165. this.everySystem = this.matter[0].children
  166. // this.queryPicter()
  167. this.tabSize()
  168. }
  169. }
  170. </script>
  171. <style lang="less" scoped>
  172. .other {
  173. background: rgba(242, 245, 247, 1);
  174. height: 100%;
  175. overflow: hidden;
  176. .other-top {
  177. margin-top: 24px;
  178. position: fixed;
  179. text-align: center;
  180. width: 100%;
  181. z-index: 2;
  182. .other-system {
  183. padding: 12px 23px;
  184. color: #1f2429;
  185. background: #fff;
  186. font-size: 16px;
  187. cursor: pointer;
  188. vertical-align: bottom;
  189. img {
  190. width: 16px;
  191. height: 16px;
  192. margin-right: 4px;
  193. margin-bottom: 3px;
  194. }
  195. }
  196. .isActive {
  197. color: #025baa;
  198. }
  199. }
  200. .other-bottom {
  201. display: flex;
  202. .other-left {
  203. position: fixed;
  204. z-index: 2;
  205. padding-top: 100px;
  206. color: #646c73;
  207. font-size: 14px;
  208. }
  209. .li-style {
  210. padding: 0 0 8px 35px;
  211. cursor: pointer;
  212. display: flex;
  213. align-items: center;
  214. .circle {
  215. width: 6px;
  216. height: 6px;
  217. border-radius: 50%;
  218. display: inline-block;
  219. margin-right: 10px;
  220. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  221. }
  222. .hanzi {
  223. padding: 10px 2px;
  224. width: 200px;
  225. display: inline-block;
  226. &:hover {
  227. color: rgba(2, 91, 170, 1);
  228. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  229. }
  230. }
  231. }
  232. .other-right {
  233. margin-top: 24px;
  234. flex: 1;
  235. }
  236. .legend-boxs {
  237. position: fixed;
  238. right: 32px;
  239. top: 155px;
  240. }
  241. }
  242. .qtfugl {
  243. .fzyfImg {
  244. width: 1035px;
  245. height: 544px;
  246. margin: 0 auto;
  247. margin-top: 93px;
  248. img {
  249. width: 100%;
  250. height: 100%;
  251. }
  252. }
  253. }
  254. }
  255. </style>