index.vue 11 KB

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