index.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  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-other v-if='floorData.length>0' :floorsArr='floorData' @emitFloor='emitFloor' :type='2'></floor-list-other>
  21. </div>
  22. </div>
  23. <other-dialog ref='dialog' :systemName='systemName'></other-dialog>
  24. <!-- 综合事项管理 -->
  25. <zhsx-other v-if='matterId==1&&everySystem.length>0' :everySystem='everySystem'></zhsx-other>
  26. <!-- 辅助用房管理 -->
  27. <div class='qtfugl' v-if='matterId==2'>
  28. <div v-if='floorData.length==0' class='fzyfwtp'>
  29. <img src='@/assets/imgs/wtp.png' alt />
  30. <p class='fjt'>暂无附加数据图片</p>
  31. </div>
  32. <div class='fzyfImg' v-else-if='picFloorImg.length==1'>
  33. <img :src='picFloorImg[0].url' alt />
  34. </div>
  35. <rotation v-else :key='2' type='2' :rotationImg='picFloorImg'></rotation>
  36. </div>
  37. <gcfz-dialog ref='gcfzDialog' :systemName='systemName'></gcfz-dialog>
  38. </div>
  39. </template>
  40. <script>
  41. import ZhsxOther from './zhsxOther'
  42. import GcfzDialog from './gcfzDialog'
  43. import OtherDialog from './otherDialog'
  44. import { queryPic, queryTab } from '@/api/public.js'
  45. import floorListOther from '@/components/floorListOther.vue'
  46. import { matter } from '@/utils/plugins/components.js'
  47. import { mapGetters } from 'vuex'
  48. export default {
  49. data() {
  50. return {
  51. matter,
  52. everySystem: [],
  53. matterId: 1,
  54. systemName: '供电系统',
  55. floorInfo: {
  56. floorName: 'F1',
  57. floorId: 'f1',
  58. },
  59. picFloor: '',
  60. picFloorImg: [],
  61. picFloorArr: [],
  62. dialogInfo: {},
  63. floorData: [],
  64. module: '',
  65. }
  66. },
  67. components: { floorListOther, OtherDialog, ZhsxOther, GcfzDialog },
  68. methods: {
  69. tabSyatem(item) {
  70. this.matterId = item.id
  71. this.everySystem = item.children
  72. this.systemName = item.name
  73. },
  74. emitFloor(item) {
  75. this.queryPicter(item.gname)
  76. this.floorInfo = item
  77. this.picFloor = this.floorInfo.gname
  78. },
  79. dialogVisible(item) {
  80. this.$refs.gcfzDialog.showModal(item)
  81. },
  82. queryPicter(floor) {
  83. this.picFloor = this.$cookie.get('floorNow')
  84. let getParams = {
  85. module: '1004',
  86. floor: floor,
  87. plazaId: this.plazaId,
  88. }
  89. queryPic({ getParams }).then((res) => {
  90. // console.log('库房管理图', res)
  91. this.picFloorImg = res.data || []
  92. })
  93. },
  94. // 查询哪几个楼层有库房图
  95. tabSize() {
  96. let data = { plazaId: this.plazaId }
  97. let postParams = []
  98. if (this.floorsArr.length > 0) {
  99. this.floorsArr.forEach((e) => {
  100. let obj = {
  101. tableName: 'glsms_proimgup',
  102. params: {
  103. module: '1004',
  104. floor: e.gname,
  105. },
  106. }
  107. postParams.push(obj)
  108. })
  109. }
  110. queryTab({ data, postParams }).then((res) => {
  111. //console.log('查询哪几层楼有图', res)
  112. this.floorData = []
  113. let data = res.data.data || []
  114. data.forEach((el) => {
  115. if (el.count > 0) {
  116. this.floorsArr.forEach((item) => {
  117. if (item.gname == el.params.floor) {
  118. this.floorData.push(item)
  119. }
  120. })
  121. }
  122. })
  123. })
  124. },
  125. },
  126. computed: {
  127. ...mapGetters(['floorsArr', 'plazaId', 'floorObj']),
  128. },
  129. mounted() {
  130. let module = window.location.href.split('=')[1]
  131. if (module == 'comprehensive ') {
  132. this.matterId = 1
  133. }
  134. this.everySystem = this.matter[0].children
  135. this.tabSize()
  136. },
  137. }
  138. </script>
  139. <style lang="less" scoped>
  140. .other {
  141. background: rgba(242, 245, 247, 1);
  142. height: 100%;
  143. overflow: auto;
  144. .other-top {
  145. margin-top: 24px;
  146. position: fixed;
  147. text-align: center;
  148. width: 100%;
  149. z-index: 2;
  150. .other-system {
  151. padding: 12px 23px;
  152. color: #1f2429;
  153. background: #fff;
  154. font-size: 16px;
  155. cursor: pointer;
  156. vertical-align: bottom;
  157. img {
  158. width: 16px;
  159. height: 16px;
  160. margin-right: 4px;
  161. margin-bottom: 3px;
  162. }
  163. }
  164. .isActive {
  165. color: #025baa;
  166. font-weight: bolder;
  167. background: linear-gradient(360deg, rgba(2, 91, 170, 0.1) 0%, rgba(2, 91, 170, 0) 100%);
  168. }
  169. }
  170. .other-bottom {
  171. display: flex;
  172. .other-left {
  173. position: fixed;
  174. z-index: 2;
  175. padding-top: 100px;
  176. color: #646c73;
  177. font-size: 14px;
  178. }
  179. .li-style {
  180. padding: 0 0 8px 35px;
  181. cursor: pointer;
  182. display: flex;
  183. align-items: center;
  184. .circle {
  185. width: 6px;
  186. height: 6px;
  187. border-radius: 50%;
  188. display: inline-block;
  189. margin-right: 10px;
  190. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  191. }
  192. .hanzi {
  193. padding: 10px 2px;
  194. width: 200px;
  195. display: inline-block;
  196. &:hover {
  197. color: rgba(2, 91, 170, 1);
  198. background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
  199. }
  200. }
  201. }
  202. .other-right {
  203. margin-top: 24px;
  204. flex: 1;
  205. }
  206. .legend-boxs {
  207. position: fixed;
  208. right: 32px;
  209. top: 142px;
  210. }
  211. }
  212. .qtfugl {
  213. // border: 1px solid blue;
  214. // height: 95%;
  215. background: #ffffff;
  216. margin: 80px 80px 10px 230px;
  217. overflow: auto;
  218. height: calc(100% - 140px);
  219. .fzyfImg {
  220. // width: 100%;
  221. // height: 100%;
  222. // width: 1035px;
  223. // height: 544px;
  224. // margin: 0 auto;
  225. // margin-top: 200px;
  226. img {
  227. width: 100%;
  228. // height: 100%;
  229. object-fit: cover;
  230. // max-width: 100%;
  231. // max-height: 100%;
  232. // display: block;
  233. // margin: 0 auto;
  234. }
  235. }
  236. .fzyfwtp {
  237. width: 1035px;
  238. height: 544px;
  239. margin: 0 auto;
  240. margin-top: 93px;
  241. position: relative;
  242. img {
  243. width: 126px;
  244. height: 121px;
  245. position: absolute;
  246. top: 50%;
  247. left: 50%;
  248. margin-top: -60px;
  249. margin-left: -63px;
  250. }
  251. .fjt {
  252. margin-top: 7px;
  253. font-size: 16px;
  254. font-family: MicrosoftYaHei;
  255. color: rgba(100, 108, 115, 1);
  256. line-height: 21px;
  257. position: absolute;
  258. top: 50%;
  259. left: 50%;
  260. margin-top: 65px;
  261. margin-left: -60px;
  262. }
  263. }
  264. }
  265. }
  266. // @media screen and (max-width: 1600px) {
  267. // /*当屏幕尺寸小于1366px时,应用下面的CSS样式*/
  268. // .fzyfImg {
  269. // margin-top: 120px !important;
  270. // height: 500px !important;
  271. // }
  272. // }
  273. // @media screen and (max-width: 1366px) {
  274. // /*当屏幕尺寸小于1366px时,应用下面的CSS样式*/
  275. // .fzyfImg {
  276. // margin-top: 90px !important;
  277. // height: 400px !important;
  278. // }
  279. // }
  280. </style>