index.vue 31 KB

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