index.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622
  1. <template>
  2. <div class='equipment-facilities'>
  3. <!-- 左侧菜单 -->
  4. <SystemMenu class='left' @chooseSystem='changeSystem' />
  5. <div class='right' v-show='showRight'>
  6. <div class='top' :key='listKey'>
  7. <!-- <van-cell :title='`消防电系统原理示意图`' :border='false' is-link :value='`19条`' @click='handleClick' />
  8. <van-cell :title='`消防喷淋系统示意图`' :border='false' is-link value='无' @click='handleClick' />
  9. <van-cell :title='`消防窗喷系统示意图`' :border='false' is-link value='无' @click='handleClick' />
  10. <van-cell :title='`配电室低压柜及出线明细`' :border='false' is-link value='无' @click='handleClick' />
  11. <van-cell :title='`消防泵房引出管路分布图`' :border='false' is-link value='无' @click='handleClick' />
  12. <van-cell :title='`楼层分布+其他数据`' :border='false' is-link value='无' @click='handleClick' />-->
  13. <van-cell
  14. v-for='(item,index ) in listData[currentSmsxt]'
  15. :key='index'
  16. :title='item.text'
  17. :border='false'
  18. is-link
  19. :value='`${item.count||""}`'
  20. @click='handleClick(item)'
  21. />
  22. </div>
  23. <!-- 分割线 -->
  24. <div class='divider'></div>
  25. <!-- 设备卡片 -->
  26. <div class='card-container'>
  27. <m-card
  28. class='card'
  29. :type='item.type'
  30. :name='item.name'
  31. :unit='item.unit'
  32. :total='item.total'
  33. :number='item.number'
  34. v-for='item in cardList'
  35. :key='item.category_name'
  36. @click.native='goToEquipment(item)'
  37. />
  38. <!-- 更多主要设备 -->
  39. <m-card class='card' :type='4' name unit :total='0' @click.native='goToMoreEquipment' />
  40. </div>
  41. </div>
  42. <!-- 原理图 -->
  43. <ImagePreview :key='imgKey' class='update-img-preview' :visible.sync='showImgPreview' :imgList='imgList' />
  44. </div>
  45. </template>
  46. <script>
  47. import Vue from 'vue'
  48. import { Cell, Toast } from 'vant'
  49. Vue.use(Cell).use(Toast)
  50. import { mapGetters, mapMutations } from 'vuex'
  51. import { querySystemCount, querySystemCard, querySystemImage, querySystemTuJianImage, queryRoomCount } from '@/api/equipmentList'
  52. import { appGraphElementQuery } from '@/api/public'
  53. import MCard from '@/components/equipmentFacilities/Card'
  54. import SystemMenu from '@/components/systemMenu'
  55. import ImagePreview from '@/components/ImagePreview'
  56. export default {
  57. name: 'EquipmentFacilities',
  58. props: {},
  59. components: { SystemMenu, MCard, ImagePreview },
  60. computed: {
  61. ...mapGetters(['plazaId', 'smsxt', 'categoryId', 'floorsArr']),
  62. },
  63. data() {
  64. return {
  65. currentSmsxt: '1001', //系统值,默认供电系统
  66. systemText: '供电系统',
  67. module: '1002', // 广场管理说明书图片上传视图查询条件 1001 项目概况 1004其他事项 1003楼层分布 1002 设备设施
  68. neTypename: '位置布置图',
  69. listData: {
  70. //上部列表数据
  71. 1001: [
  72. //供电
  73. { text: '供电系统原理图', dataType: 'img', typecode: '2010', count: '无' },
  74. { text: '机房平面布置图', dataType: 'room' },
  75. { text: '配电室低压柜及出线明细', dataType: 'dyg' },
  76. { text: '楼层分布', dataType: 'floor', value: ' ' },
  77. { text: '电井控制商铺范围', dataType: 'electricWell' },
  78. { text: '主要设备清单', dataType: 'mainEquipment' },
  79. { text: '重要维修及重要维保', dataType: 'wxwb' },
  80. ],
  81. 1002: [
  82. //暖通
  83. { text: '空调系统原理图', dataType: 'img', typecode: '2011', count: '无' },
  84. { text: '分水器支路分布图', dataType: 'fbt', categoryId: 'FZQZL' },
  85. { text: '机房平面布置图', dataType: 'room' },
  86. { text: '楼层分布', dataType: 'floor' },
  87. { text: '主要设备清单', dataType: 'mainEquipment' },
  88. { text: '重要维修及重要维保', dataType: 'wxwb' },
  89. ],
  90. 1003: [
  91. //消防
  92. { text: '消防电系统原理示意图', dataType: 'img', typecode: '2014', count: '无' },
  93. { text: '消防喷淋系统示意图', dataType: 'img', typecode: '2015', count: '无' },
  94. { text: '消防窗喷系统示意图', dataType: 'img', typecode: '2016', count: '无' },
  95. { text: '消火栓系统示意图', dataType: 'img', typecode: '2017', count: '无' },
  96. { text: '消防泵房引出管路分布图', dataType: 'fbt', categoryId: 'XFBFYCFL' },
  97. { text: '机房平面布置图', dataType: 'room' },
  98. { text: '楼层分布+附加数据', dataType: 'floor' },
  99. { text: '主要设备清单', dataType: 'mainEquipment' },
  100. { text: '重要维修及重要维保', dataType: 'wxwb' },
  101. ],
  102. 1004: [
  103. //弱电
  104. { text: '门禁管理系统原理图', dataType: 'img', typecode: '2019', count: '无' },
  105. { text: 'BA楼宇智能化系统原理图', dataType: 'img', typecode: '2020', count: '无' },
  106. { text: '机房平面布置图', dataType: 'room' },
  107. { text: '楼层分布+附加数据', dataType: 'floor' },
  108. { text: '主要设备清单', dataType: 'mainEquipment' },
  109. { text: '重要维修及重要维保', dataType: 'wxwb' },
  110. ],
  111. 1005: [
  112. //给排水
  113. { text: '给水系统原理示意图', dataType: 'img', typecode: '2021', count: '无' },
  114. { text: '排水系统原理示意图', dataType: 'img', typecode: '2022', count: '无' },
  115. { text: '机房平面布置图', dataType: 'room' },
  116. { text: '楼层分布', dataType: 'floor' },
  117. { text: '主要设备清单', dataType: 'mainEquipment' },
  118. { text: '重要维修及重要维保', dataType: 'wxwb' },
  119. ],
  120. 1006: [
  121. //电梯
  122. { text: '扶梯原理图', dataType: 'img', typecode: '2023', count: '无' },
  123. { text: '直梯原理图', dataType: 'img', typecode: '2024', count: '无' },
  124. { text: '楼层分布', dataType: 'floor' },
  125. { text: '主要设备清单', dataType: 'mainEquipment' },
  126. { text: '重要维修及重要维保', dataType: 'wxwb' },
  127. ],
  128. 1007: [
  129. // 燃气
  130. { text: '燃气系统原理示意图', dataType: 'img', typecode: '2025', count: '无' },
  131. { text: '楼层分布', dataType: 'floor' },
  132. { text: '主要设备清单', dataType: 'mainEquipment' },
  133. { text: '重要维修及重要维保', dataType: 'wxwb' },
  134. ],
  135. 1008: [
  136. // 土建
  137. // 2026 东外立面
  138. // 2029 北外立面
  139. // 2028 南外立面
  140. // 2027 西外立面
  141. // { text: '建筑立面图', dataType: 'img', typecode: '2026', count: '无' },
  142. { text: '建筑立面图', dataType: 'img', typecode: ['2026', '2027', '2028', '2029'], count: '无' },
  143. { text: '楼层分布', dataType: 'floor' },
  144. ],
  145. },
  146. listKey: `list_${new Date().getTime()}`,
  147. cardList: [],
  148. showRight: false, //是否显示右侧内容
  149. showImgPreview: false, //是否展示图片预览
  150. imgList: [], //图片数组
  151. imgKey: `img${new Date().getTime()}`,
  152. fbtArr: [], //分布图使用的楼层数据
  153. }
  154. },
  155. watch: {
  156. // 前五个系统更改,查询机房平面布置图数量
  157. smsxt: {
  158. handler(newV, oldV) {
  159. let smsxtArr = ['1001', '1002', '1003', '1004', '1005']
  160. if (smsxtArr.includes(newV)) {
  161. // 查询机房平面布置图数量
  162. this.getRoomCount()
  163. }
  164. // 暖通,消防,查询 分水器支路分布图,消防泵房引出管路分布图 对应的楼层图例数据
  165. if (['1002', '1003'].includes(newV)) {
  166. let dict = {
  167. 1002: 'FZQZL',
  168. 1003: 'XFBFYCFL',
  169. }
  170. this.getTuliData({ smsxt: newV, system_code: dict[newV] })
  171. }
  172. },
  173. immediate: true,
  174. },
  175. },
  176. async created() {
  177. // let initSys = {
  178. // text: '供电',
  179. // categoryId: 'GDXT',
  180. // smsxt: '1001',
  181. // }
  182. this.systemText = '供电系统'
  183. this.currentSmsxt = '1001'
  184. this.SETCATEGORYID('GDXT')
  185. this.SETSMSXT('1001')
  186. this.showRight = false
  187. // 查询图片数量,设备卡片
  188. await Promise.all([this.getPicCount(), this.getCard()])
  189. this.showRight = true
  190. // this.changeSystem(initSys)
  191. },
  192. beforeMount() {},
  193. mounted() {},
  194. methods: {
  195. ...mapMutations(['SETCATEGORYID', 'SETSMSXT']),
  196. /**
  197. * 左侧菜单切换事件
  198. * @param { String } text 系统名称
  199. * @param { String } category 系统拼音简称 NTXT ...
  200. * @param { String } currentSmsxt 系统id? 1001 - 1008
  201. */
  202. async changeSystem({ text, categoryId, smsxt }) {
  203. this.showRight = false
  204. this.currentSmsxt = smsxt
  205. this.systemText = text + '系统'
  206. console.log(this.systemText)
  207. /**
  208. * 查询图片数量,设备卡片
  209. */
  210. await Promise.all([this.getPicCount(), this.getCard()])
  211. this.showRight = true
  212. },
  213. /**
  214. * 查询图片数量
  215. */
  216. async getPicCount() {
  217. let getParams = {
  218. plazaId: this.plazaId,
  219. system: this.currentSmsxt,
  220. }
  221. let res
  222. Toast.loading({
  223. message: '加载中...',
  224. forbidClick: true,
  225. })
  226. try {
  227. res = await querySystemCount({ getParams })
  228. } catch (error) {}
  229. if (!res?.data) {
  230. return false
  231. }
  232. let data = res.data
  233. let currentSys = this.listData[this.currentSmsxt]
  234. // console.log(this.listData, currentSys)
  235. currentSys.map((item) => {
  236. if (item.dataType === 'img') {
  237. let detail = data.filter((v) => v.typecode == item.typecode)[0]
  238. // console.log(detail)
  239. item.count = detail?.cnt ? detail?.cnt + '张' : '无' // + '张' || '无'
  240. }
  241. })
  242. // console.log(this.currentSmsxt)
  243. // 土建装饰单独处理 将东西南北合并到一起
  244. if (this.currentSmsxt === '1008') {
  245. // console.log(data)
  246. let count = data.reduce((prev, current) => {
  247. return prev + current.cnt
  248. }, 0)
  249. // console.log(count)
  250. currentSys.map((item) => {
  251. if (item.dataType === 'img') {
  252. item.count = count ? count + '张' : '无' // + '张' || '无'
  253. }
  254. })
  255. }
  256. // console.log(currentSys)
  257. this.listKey = `list_${new Date().getTime()}`
  258. this.$set(this.listData, this.currentSmsxt, currentSys)
  259. Toast.clear()
  260. // console.log(this.listData)
  261. },
  262. /**
  263. * 查询机房平面布置图数量
  264. */
  265. async getRoomCount() {
  266. let getParams = {
  267. plazaId: this.plazaId,
  268. systemCode: this.smsxt,
  269. }
  270. // 查询机房平面布置图数量
  271. let res = await queryRoomCount({ getParams })
  272. // 取出listData中对应的系统数据
  273. let data = this.listData[this.smsxt]
  274. data.map((item, index, arr) => {
  275. if (item.dataType === 'room') {
  276. item.count = res?.count ? res?.count + '张' : '无'
  277. }
  278. })
  279. this.listKey = `list_${new Date().getTime()}`
  280. },
  281. /**
  282. * 分水器支路分布图,消防泵房引出管路分布图 对应的楼层图例数据
  283. */
  284. async getTuliData({ smsxt, system_code }) {
  285. let params = {
  286. BuildingID: '1',
  287. CategoryID: system_code,
  288. ProjectID: this.plazaId,
  289. Floors: this.floorsArr.map((item) => {
  290. return {
  291. FloorId: item.gname,
  292. FloorName: item.code,
  293. }
  294. }),
  295. }
  296. console.log(params)
  297. let res = await appGraphElementQuery(params)
  298. console.log(res)
  299. if (!res?.Data) {
  300. return false
  301. }
  302. let Data = res.Data || []
  303. // 过滤有Statistics的条数
  304. Data = Data.filter((v) => v.Statistics?.length)
  305. let fbtArr = []
  306. Data.map((item) => {
  307. fbtArr.push({
  308. code: item.FloorName,
  309. gname: item.FloorId,
  310. })
  311. })
  312. this.fbtArr = fbtArr
  313. let count = Data.length ? Data.length + '张' : '无'
  314. let systemData = this.listData[smsxt]
  315. console.log(systemData)
  316. systemData.map((item, index, arr) => {
  317. if (item.dataType === 'fbt') {
  318. arr[index].count = count
  319. }
  320. })
  321. this.$set(this.listData, smsxt, systemData)
  322. this.listKey = `list_${new Date().getTime()}`
  323. // .then(res => {
  324. // this.floorData = res.Data.map(floor => {
  325. // floor.Open = false;
  326. // return floor;
  327. // });
  328. // })
  329. },
  330. /**
  331. * 查询设备卡片
  332. */
  333. async getCard() {
  334. this.cardList = []
  335. let getParams = {
  336. plazaId: this.plazaId,
  337. smsxt: this.smsxt,
  338. }
  339. let res
  340. try {
  341. res = await querySystemCard({ getParams })
  342. } catch (error) {}
  343. // console.log('设备卡片')
  344. // console.log(res.data)
  345. if (!res && !res?.data?.length) {
  346. return false
  347. }
  348. let data = res.data
  349. // 取出assetTypeList
  350. let cardList = data[0]?.assetTypeList || []
  351. // console.log(cardList)
  352. cardList.map((item) => {
  353. item.total = item.asset_num // card 第二行台数
  354. item.name = item.category_name //card 第一行名称
  355. // 设备卡片单位处理
  356. if (item.name === '屋面logo') {
  357. item.unit = '个'
  358. } else if (item.name === '玻璃护栏') {
  359. item.unit = '段'
  360. } else {
  361. item.unit = '台'
  362. }
  363. /**
  364. * type 1: 正常运维 2:重要维保 3:重要维修
  365. */
  366. // 默认正常
  367. item.type = 1
  368. item.number = 0
  369. if (item.is_exception || item.is_exception_num) {
  370. // 有异常
  371. item.type = 3
  372. item.number = item.is_exception_num
  373. } else if (item.is_detecting || item.is_detecting_num) {
  374. // 检测中
  375. item.type = 2
  376. item.number = item.is_detecting_num
  377. }
  378. })
  379. this.cardList = cardList
  380. console.log('=============')
  381. console.log(this.cardList)
  382. console.log('=============')
  383. },
  384. handleClick(item) {
  385. switch (item.dataType) {
  386. // 原理图
  387. case 'img':
  388. this.handleImg(item)
  389. break
  390. // 机房平面布置图
  391. case 'room':
  392. this.handleRoom(item)
  393. break
  394. // 主要设备清单
  395. case 'mainEquipment':
  396. this.handleMainAsset(item)
  397. break
  398. // 维修维保
  399. case 'wxwb':
  400. this.handleWxwb(item)
  401. break
  402. // 楼层分布
  403. case 'floor':
  404. this.handleFloor(item)
  405. break
  406. case 'fbt':
  407. this.handleFbt(item)
  408. break
  409. // 电井间商铺控制范围
  410. case 'electricWell':
  411. this.hanldeElectricWell(item)
  412. break
  413. // 配电室低压柜及出线明细
  414. case 'dyg':
  415. this.hanldeDyg(item)
  416. break
  417. default:
  418. break
  419. }
  420. },
  421. /**
  422. * 显示原理图预览
  423. */
  424. handleImg(item) {
  425. if (item.count === '无') {
  426. return false
  427. }
  428. this.showImage(item)
  429. },
  430. /**
  431. * 显示原理图
  432. */
  433. async showImage(item) {
  434. console.log('显示原理图')
  435. console.log(item)
  436. this.imgList = []
  437. this.imgKey = 'img_' + new Date().getTime()
  438. if (Array.isArray(item.typecode)) {
  439. return this.getTuJianImage(item)
  440. }
  441. let getParams = {
  442. plazaId: this.plazaId,
  443. module: this.module,
  444. neTypename: '位置布置图',
  445. typecode: item.typecode,
  446. system: this.smsxt,
  447. }
  448. let res = await querySystemImage({ getParams })
  449. // console.log(res)
  450. if (!res && !res?.data) {
  451. return false
  452. }
  453. let data = res.data
  454. let imgList = []
  455. data.map((item) => {
  456. imgList.push(item.url)
  457. })
  458. this.imgList = imgList
  459. imgList.length && (this.showImgPreview = true)
  460. },
  461. /**
  462. * 土建立面图(typecode为数组,查询多种图)
  463. */
  464. async getTuJianImage(item) {
  465. let data = {
  466. plazaId: this.plazaId,
  467. module: this.module,
  468. neTypename: '位置布置图',
  469. system: this.smsxt,
  470. },
  471. postParams = {
  472. typecode: item.typecode,
  473. }
  474. let res = await querySystemTuJianImage({ data, postParams })
  475. // console.log(res)
  476. if (!res && !res?.data) {
  477. return false
  478. }
  479. let resData = res.data
  480. let imgList = []
  481. resData?.data.map((item) => {
  482. imgList.push(item.url)
  483. })
  484. this.imgList = imgList
  485. imgList.length && (this.showImgPreview = true)
  486. },
  487. /**
  488. * 跳转 机房平面布置图
  489. */
  490. handleRoom(item) {
  491. if (!item.count || item.count === '无') {
  492. return false
  493. }
  494. this.$router.push({ name: 'EngineRoomPicture', params: {} })
  495. },
  496. handleMainAsset() {
  497. this.$router.push({ name: 'MainEquipment' })
  498. },
  499. handleWxwb() {
  500. this.$router.push({ name: 'MaintenanceRecordView' })
  501. },
  502. /**
  503. * 配电室低压柜及出线明细
  504. */
  505. hanldeDyg() {
  506. this.$router.push({ name: 'LowVoltageCabinet', params: {} })
  507. },
  508. /**
  509. * 跳转 楼层分布
  510. */
  511. handleFloor(item) {
  512. let title = this.systemText + ' - 楼层分布'
  513. this.$router.push({ name: 'SystemFloor', query: { title } })
  514. },
  515. /**
  516. * 分水器支路分布图
  517. */
  518. handleFbt(item) {
  519. console.log(item)
  520. let currentSystem = this.listData[this.smsxt]
  521. let fbt = currentSystem.filter((v) => v.dataType === 'fbt')[0]
  522. if (!fbt || fbt.count === '无') {
  523. return false
  524. }
  525. const { categoryId, text } = item
  526. this.SETCATEGORYID(categoryId)
  527. let query = { title: text }
  528. // mockData
  529. // this.fbtArr = [
  530. // {
  531. // code: 'RF',
  532. // gname: 'g80',
  533. // },
  534. // ]
  535. if (this.fbtArr.length) {
  536. query.fbtArr = JSON.stringify(this.fbtArr)
  537. query.fbt = true
  538. }
  539. this.$router.push({ name: 'SystemFloor', query })
  540. },
  541. /**
  542. * 跳转 电井间控制商铺范围
  543. */
  544. hanldeElectricWell(item) {
  545. this.$router.push({ name: 'ElectricWell', params: {} })
  546. },
  547. /**
  548. * 点击卡片,跳转设备列表页面
  549. */
  550. goToEquipment(data) {
  551. console.log(data)
  552. let { name, category_code } = data
  553. this.$router.push({ name: 'EquipmentList', query: { title: name, category_code } })
  554. },
  555. /**
  556. * 点击更多设备卡片,跳转设备列表页面
  557. */
  558. goToMoreEquipment() {
  559. this.$router.push({ name: 'MoreEquipmentList', params: {} })
  560. },
  561. },
  562. }
  563. </script>
  564. <style lang='less' scoped>
  565. .equipment-facilities {
  566. width: 100%;
  567. height: calc(100% - 100px);
  568. padding: 0;
  569. display: flex;
  570. .left {
  571. width: 80px;
  572. height: 100%;
  573. }
  574. .right {
  575. flex: 1;
  576. height: 100%;
  577. padding: 16px 16px 16px 12px;
  578. overflow: auto;
  579. .top {
  580. width: 100%;
  581. /deep/ .van-cell {
  582. font-size: 14px;
  583. font-weight: 400;
  584. color: #333333;
  585. background: #f8f9fa;
  586. border-radius: 4px;
  587. margin-bottom: 4px;
  588. .van-cell__value {
  589. width: 40px;
  590. max-width: 50px;
  591. flex: none;
  592. }
  593. }
  594. }
  595. .divider {
  596. border-bottom: 1px solid #e6e6e6;
  597. margin: 20px 0;
  598. }
  599. .card-container {
  600. width: 100%;
  601. display: flex;
  602. flex-wrap: wrap;
  603. flex-flow: wrap;
  604. .card {
  605. flex: 1;
  606. width: 50%;
  607. margin: 2% 0;
  608. min-width: 50%; // 加入这两个后每个item的宽度就生效了
  609. max-width: 50%; // 加入这两个后每个item的宽度就生效了
  610. height: 110px;
  611. }
  612. }
  613. }
  614. }
  615. </style>