index.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624
  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: 'mainAsset' },
  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: 'mainAsset' },
  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: 'mainAsset' },
  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: 'mainAsset' },
  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: 'mainAsset' },
  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: 'mainAsset' },
  126. { text: '重要维修及重要维保', dataType: 'wxwb' },
  127. ],
  128. 1007: [
  129. // 燃气
  130. { text: '燃气系统原理示意图', dataType: 'img', typecode: '2025', count: '无' },
  131. { text: '楼层分布', dataType: 'floor' },
  132. { text: '主要设备清单', dataType: 'mainAsset' },
  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. { text: '主要设备清单', dataType: 'mainAsset' },
  145. { text: '重要维修及重要维保', dataType: 'wxwb' },
  146. ],
  147. },
  148. listKey: `list_${new Date().getTime()}`,
  149. cardList: [],
  150. showRight: false, //是否显示右侧内容
  151. showImgPreview: false, //是否展示图片预览
  152. imgList: [], //图片数组
  153. imgKey: `img${new Date().getTime()}`,
  154. fbtArr: [], //分布图使用的楼层数据
  155. }
  156. },
  157. watch: {
  158. // 前五个系统更改,查询机房平面布置图数量
  159. smsxt: {
  160. handler(newV, oldV) {
  161. let smsxtArr = ['1001', '1002', '1003', '1004', '1005']
  162. if (smsxtArr.includes(newV)) {
  163. // 查询机房平面布置图数量
  164. this.getRoomCount()
  165. }
  166. // 暖通,消防,查询 分水器支路分布图,消防泵房引出管路分布图 对应的楼层图例数据
  167. if (['1002', '1003'].includes(newV)) {
  168. let dict = {
  169. 1002: 'FZQZL',
  170. 1003: 'XFBFYCFL',
  171. }
  172. this.getTuliData({ smsxt: newV, system_code: dict[newV] })
  173. }
  174. },
  175. immediate: true,
  176. },
  177. },
  178. async created() {
  179. // let initSys = {
  180. // text: '供电',
  181. // categoryId: 'GDXT',
  182. // smsxt: '1001',
  183. // }
  184. this.systemText = '供电系统'
  185. this.currentSmsxt = '1001'
  186. this.SETCATEGORYID('GDXT')
  187. this.SETSMSXT('1001')
  188. this.showRight = false
  189. // 查询图片数量,设备卡片
  190. await Promise.all([this.getPicCount(), this.getCard()])
  191. this.showRight = true
  192. // this.changeSystem(initSys)
  193. },
  194. beforeMount() {},
  195. mounted() {},
  196. methods: {
  197. ...mapMutations(['SETCATEGORYID', 'SETSMSXT']),
  198. /**
  199. * 左侧菜单切换事件
  200. * @param { String } text 系统名称
  201. * @param { String } category 系统拼音简称 NTXT ...
  202. * @param { String } currentSmsxt 系统id? 1001 - 1008
  203. */
  204. async changeSystem({ text, categoryId, smsxt }) {
  205. this.showRight = false
  206. this.currentSmsxt = smsxt
  207. this.systemText = text + '系统'
  208. console.log(this.systemText)
  209. /**
  210. * 查询图片数量,设备卡片
  211. */
  212. await Promise.all([this.getPicCount(), this.getCard()])
  213. this.showRight = true
  214. },
  215. /**
  216. * 查询图片数量
  217. */
  218. async getPicCount() {
  219. let getParams = {
  220. plazaId: this.plazaId,
  221. system: this.currentSmsxt,
  222. }
  223. let res
  224. Toast.loading({
  225. message: '加载中...',
  226. forbidClick: true,
  227. })
  228. try {
  229. res = await querySystemCount({ getParams })
  230. } catch (error) {}
  231. if (!res?.data) {
  232. return false
  233. }
  234. let data = res.data
  235. let currentSys = this.listData[this.currentSmsxt]
  236. // console.log(this.listData, currentSys)
  237. currentSys.map((item) => {
  238. if (item.dataType === 'img') {
  239. let detail = data.filter((v) => v.typecode == item.typecode)[0]
  240. // console.log(detail)
  241. item.count = detail?.cnt ? detail?.cnt + '张' : '无' // + '张' || '无'
  242. }
  243. })
  244. // console.log(this.currentSmsxt)
  245. // 土建装饰单独处理 将东西南北合并到一起
  246. if (this.currentSmsxt === '1008') {
  247. // console.log(data)
  248. let count = data.reduce((prev, current) => {
  249. return prev + current.cnt
  250. }, 0)
  251. // console.log(count)
  252. currentSys.map((item) => {
  253. if (item.dataType === 'img') {
  254. item.count = count ? count + '张' : '无' // + '张' || '无'
  255. }
  256. })
  257. }
  258. // console.log(currentSys)
  259. this.listKey = `list_${new Date().getTime()}`
  260. this.$set(this.listData, this.currentSmsxt, currentSys)
  261. Toast.clear()
  262. // console.log(this.listData)
  263. },
  264. /**
  265. * 查询机房平面布置图数量
  266. */
  267. async getRoomCount() {
  268. let getParams = {
  269. plazaId: this.plazaId,
  270. systemCode: this.smsxt,
  271. }
  272. // 查询机房平面布置图数量
  273. let res = await queryRoomCount({ getParams })
  274. // 取出listData中对应的系统数据
  275. let data = this.listData[this.smsxt]
  276. data.map((item, index, arr) => {
  277. if (item.dataType === 'room') {
  278. item.count = res?.count ? res?.count + '张' : '无'
  279. }
  280. })
  281. this.listKey = `list_${new Date().getTime()}`
  282. },
  283. /**
  284. * 分水器支路分布图,消防泵房引出管路分布图 对应的楼层图例数据
  285. */
  286. async getTuliData({ smsxt, system_code }) {
  287. let params = {
  288. BuildingID: '1',
  289. CategoryID: system_code,
  290. ProjectID: this.plazaId,
  291. Floors: this.floorsArr.map((item) => {
  292. return {
  293. FloorId: item.gname,
  294. FloorName: item.code,
  295. }
  296. }),
  297. }
  298. console.log(params)
  299. let res = await appGraphElementQuery(params)
  300. console.log(res)
  301. if (!res?.Data) {
  302. return false
  303. }
  304. let Data = res.Data || []
  305. // 过滤有Statistics的条数
  306. Data = Data.filter((v) => v.Statistics?.length)
  307. let fbtArr = []
  308. Data.map((item) => {
  309. fbtArr.push({
  310. code: item.FloorName,
  311. gname: item.FloorId,
  312. })
  313. })
  314. this.fbtArr = fbtArr
  315. let count = Data.length ? Data.length + '张' : '无'
  316. let systemData = this.listData[smsxt]
  317. console.log(systemData)
  318. systemData.map((item, index, arr) => {
  319. if (item.dataType === 'fbt') {
  320. arr[index].count = count
  321. }
  322. })
  323. this.$set(this.listData, smsxt, systemData)
  324. this.listKey = `list_${new Date().getTime()}`
  325. // .then(res => {
  326. // this.floorData = res.Data.map(floor => {
  327. // floor.Open = false;
  328. // return floor;
  329. // });
  330. // })
  331. },
  332. /**
  333. * 查询设备卡片
  334. */
  335. async getCard() {
  336. this.cardList = []
  337. let getParams = {
  338. plazaId: this.plazaId,
  339. smsxt: this.smsxt,
  340. }
  341. let res
  342. try {
  343. res = await querySystemCard({ getParams })
  344. } catch (error) {}
  345. // console.log('设备卡片')
  346. // console.log(res.data)
  347. if (!res && !res?.data?.length) {
  348. return false
  349. }
  350. let data = res.data
  351. // 取出assetTypeList
  352. let cardList = data[0]?.assetTypeList || []
  353. // console.log(cardList)
  354. cardList.map((item) => {
  355. item.total = item.asset_num // card 第二行台数
  356. item.name = item.category_name //card 第一行名称
  357. // 设备卡片单位处理
  358. if (item.name === '屋面logo') {
  359. item.unit = '个'
  360. } else if (item.name === '玻璃护栏') {
  361. item.unit = '段'
  362. } else {
  363. item.unit = '台'
  364. }
  365. /**
  366. * type 1: 正常运维 2:重要维保 3:重要维修
  367. */
  368. // 默认正常
  369. item.type = 1
  370. item.number = 0
  371. if (item.is_exception || item.is_exception_num) {
  372. // 有异常
  373. item.type = 3
  374. item.number = item.is_exception_num
  375. } else if (item.is_detecting || item.is_detecting_num) {
  376. // 检测中
  377. item.type = 2
  378. item.number = item.is_detecting_num
  379. }
  380. })
  381. this.cardList = cardList
  382. console.log('=============')
  383. console.log(this.cardList)
  384. console.log('=============')
  385. },
  386. handleClick(item) {
  387. switch (item.dataType) {
  388. // 原理图
  389. case 'img':
  390. this.handleImg(item)
  391. break
  392. // 机房平面布置图
  393. case 'room':
  394. this.handleRoom(item)
  395. break
  396. // 主要设备清单
  397. case 'mainAsset':
  398. this.handleMainAsset(item)
  399. break
  400. // 维修维保
  401. case 'wxwb':
  402. this.handleWxwb(item)
  403. break
  404. // 楼层分布
  405. case 'floor':
  406. this.handleFloor(item)
  407. break
  408. case 'fbt':
  409. this.handleFbt(item)
  410. break
  411. // 电井间商铺控制范围
  412. case 'electricWell':
  413. this.hanldeElectricWell(item)
  414. break
  415. // 配电室低压柜及出线明细
  416. case 'dyg':
  417. this.hanldeDyg(item)
  418. break
  419. default:
  420. break
  421. }
  422. },
  423. /**
  424. * 显示原理图预览
  425. */
  426. handleImg(item) {
  427. if (item.count === '无') {
  428. return false
  429. }
  430. this.showImage(item)
  431. },
  432. /**
  433. * 显示原理图
  434. */
  435. async showImage(item) {
  436. console.log('显示原理图')
  437. console.log(item)
  438. this.imgList = []
  439. this.imgKey = 'img_' + new Date().getTime()
  440. if (Array.isArray(item.typecode)) {
  441. return this.getTuJianImage(item)
  442. }
  443. let getParams = {
  444. plazaId: this.plazaId,
  445. module: this.module,
  446. neTypename: '位置布置图',
  447. typecode: item.typecode,
  448. system: this.smsxt,
  449. }
  450. let res = await querySystemImage({ getParams })
  451. // console.log(res)
  452. if (!res && !res?.data) {
  453. return false
  454. }
  455. let data = res.data
  456. let imgList = []
  457. data.map((item) => {
  458. imgList.push(item.url)
  459. })
  460. this.imgList = imgList
  461. imgList.length && (this.showImgPreview = true)
  462. },
  463. /**
  464. * 土建立面图(typecode为数组,查询多种图)
  465. */
  466. async getTuJianImage(item) {
  467. let data = {
  468. plazaId: this.plazaId,
  469. module: this.module,
  470. neTypename: '位置布置图',
  471. system: this.smsxt,
  472. },
  473. postParams = {
  474. typecode: item.typecode,
  475. }
  476. let res = await querySystemTuJianImage({ data, postParams })
  477. // console.log(res)
  478. if (!res && !res?.data) {
  479. return false
  480. }
  481. let resData = res.data
  482. let imgList = []
  483. resData?.data.map((item) => {
  484. imgList.push(item.url)
  485. })
  486. this.imgList = imgList
  487. imgList.length && (this.showImgPreview = true)
  488. },
  489. /**
  490. * 跳转 机房平面布置图
  491. */
  492. handleRoom(item) {
  493. if (!item.count || item.count === '无') {
  494. return false
  495. }
  496. this.$router.push({ name: 'EngineRoomPicture', params: {} })
  497. },
  498. handleMainAsset() {
  499. this.$router.push({ name: 'MainAsset' })
  500. },
  501. handleWxwb() {
  502. this.$router.push({ name: 'RepairMaintenance' })
  503. },
  504. /**
  505. * 配电室低压柜及出线明细
  506. */
  507. hanldeDyg() {
  508. this.$router.push({ name: 'LowVoltageCabinet', params: {} })
  509. },
  510. /**
  511. * 跳转 楼层分布
  512. */
  513. handleFloor(item) {
  514. let title = this.systemText + ' - 楼层分布'
  515. this.$router.push({ name: 'SystemFloor', query: { title } })
  516. },
  517. /**
  518. * 分水器支路分布图
  519. */
  520. handleFbt(item) {
  521. console.log(item)
  522. let currentSystem = this.listData[this.smsxt]
  523. let fbt = currentSystem.filter((v) => v.dataType === 'fbt')[0]
  524. if (!fbt || fbt.count === '无') {
  525. return false
  526. }
  527. const { categoryId, text } = item
  528. this.SETCATEGORYID(categoryId)
  529. let query = { title: text }
  530. // mockData
  531. // this.fbtArr = [
  532. // {
  533. // code: 'RF',
  534. // gname: 'g80',
  535. // },
  536. // ]
  537. if (this.fbtArr.length) {
  538. query.fbtArr = JSON.stringify(this.fbtArr)
  539. query.fbt = true
  540. }
  541. this.$router.push({ name: 'SystemFloor', query })
  542. },
  543. /**
  544. * 跳转 电井间控制商铺范围
  545. */
  546. hanldeElectricWell(item) {
  547. this.$router.push({ name: 'ElectricWell', params: {} })
  548. },
  549. /**
  550. * 点击卡片,跳转设备列表页面
  551. */
  552. goToEquipment(data) {
  553. console.log(data)
  554. let { name, category_code } = data
  555. this.$router.push({ name: 'EquipmentList', query: { title: name, category_code } })
  556. },
  557. /**
  558. * 点击更多设备卡片,跳转设备列表页面
  559. */
  560. goToMoreEquipment() {
  561. this.$router.push({ name: 'MoreEquipmentList', params: {} })
  562. },
  563. },
  564. }
  565. </script>
  566. <style lang='less' scoped>
  567. .equipment-facilities {
  568. width: 100%;
  569. height: calc(100% - 100px);
  570. padding: 0;
  571. display: flex;
  572. .left {
  573. width: 80px;
  574. height: 100%;
  575. }
  576. .right {
  577. flex: 1;
  578. height: 100%;
  579. padding: 16px 16px 16px 12px;
  580. overflow: auto;
  581. .top {
  582. width: 100%;
  583. /deep/ .van-cell {
  584. font-size: 14px;
  585. font-weight: 400;
  586. color: #333333;
  587. background: #f8f9fa;
  588. border-radius: 4px;
  589. margin-bottom: 4px;
  590. .van-cell__value {
  591. width: 40px;
  592. max-width: 50px;
  593. flex: none;
  594. }
  595. }
  596. }
  597. .divider {
  598. border-bottom: 1px solid #e6e6e6;
  599. margin: 20px 0;
  600. }
  601. .card-container {
  602. width: 100%;
  603. display: flex;
  604. flex-wrap: wrap;
  605. flex-flow: wrap;
  606. .card {
  607. flex: 1;
  608. width: 50%;
  609. margin: 2% 0;
  610. min-width: 50%; // 加入这两个后每个item的宽度就生效了
  611. max-width: 50%; // 加入这两个后每个item的宽度就生效了
  612. height: 110px;
  613. }
  614. }
  615. }
  616. }
  617. </style>