index.vue 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765
  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'>
  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 cardList'
  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, queryMoreAsset } 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. cardList: [],
  181. moreCardList: [],
  182. showMoreCardList: false,
  183. showRight: false, //是否显示右侧内容
  184. showImgPreview: false, //是否展示图片预览
  185. imgList: [], //图片数组
  186. imgKey: `img${new Date().getTime()}`,
  187. fbtArr: [], //分布图使用的楼层数据
  188. }
  189. },
  190. watch: {
  191. // 前五个系统更改,查询机房平面布置图数量
  192. smsxt: {
  193. handler(newV, oldV) {
  194. let smsxtArr = ['1001', '1002', '1003', '1004', '1005']
  195. if (smsxtArr.includes(newV)) {
  196. // 查询机房平面布置图数量
  197. this.getRoomCount()
  198. }
  199. // 暖通,消防,查询 分水器支路分布图,消防泵房引出管路分布图 对应的楼层图例数据
  200. if (['1002', '1003'].includes(newV)) {
  201. let dict = {
  202. 1002: 'FZQZL',
  203. 1003: 'XFBFYCFL',
  204. }
  205. this.getTuliData({ smsxt: newV, system_code: dict[newV] })
  206. }
  207. },
  208. immediate: true,
  209. },
  210. },
  211. async created() {
  212. window.vm = this
  213. // let initSys = {
  214. // text: '供电',
  215. // categoryId: 'GDXT',
  216. // smsxt: '1001',
  217. // }
  218. this.systemText = '供电系统'
  219. this.currentSmsxt = '1001'
  220. this.SETCATEGORYID('GDXT')
  221. this.SETSMSXT('1001')
  222. this.showRight = false
  223. // 查询图片数量,设备卡片
  224. await Promise.all([this.getPicCount(), this.getCard()])
  225. this.showRight = true
  226. // this.changeSystem(initSys)
  227. },
  228. beforeMount() {},
  229. mounted() {},
  230. methods: {
  231. ...mapMutations(['SETCATEGORYID', 'SETSMSXT']),
  232. /**
  233. * 左侧菜单切换事件
  234. * @param { String } text 系统名称
  235. * @param { String } category 系统拼音简称 NTXT ...
  236. * @param { String } currentSmsxt 系统id? 1001 - 1008
  237. */
  238. async changeSystem({ text, categoryId, smsxt }) {
  239. this.showMoreCardList = false
  240. this.showRight = false
  241. this.currentSmsxt = smsxt
  242. this.systemText = text + '系统'
  243. // console.log(this.systemText)
  244. /**
  245. * 查询图片数量,设备卡片
  246. */
  247. await Promise.all([this.getPicCount(), this.getCard()])
  248. this.showRight = true
  249. },
  250. /**
  251. * 查询图片数量
  252. */
  253. async getPicCount() {
  254. let getParams = {
  255. plazaId: this.plazaId,
  256. system: this.currentSmsxt,
  257. }
  258. let res
  259. Toast.loading({
  260. message: '加载中...',
  261. forbidClick: true,
  262. })
  263. try {
  264. res = await querySystemCount({ getParams })
  265. } catch (error) {}
  266. if (!res?.data) {
  267. return false
  268. }
  269. let data = res.data
  270. let currentSys = this.listData[this.currentSmsxt]
  271. // console.log(this.listData, currentSys)
  272. currentSys.map((item) => {
  273. if (item.dataType === 'img') {
  274. let detail = data.filter((v) => v.typecode == item.typecode)[0]
  275. // console.log(detail)
  276. item.count = detail?.cnt ? detail?.cnt + '张' : '无' // + '张' || '无'
  277. }
  278. })
  279. // console.log(this.currentSmsxt)
  280. // 土建装饰单独处理 将东西南北合并到一起
  281. if (this.currentSmsxt === '1008') {
  282. // console.log(data)
  283. let count = data.reduce((prev, current) => {
  284. return prev + current.cnt
  285. }, 0)
  286. // console.log(count)
  287. currentSys.map((item) => {
  288. if (item.dataType === 'img') {
  289. item.count = count ? count + '张' : '无' // + '张' || '无'
  290. }
  291. })
  292. }
  293. // console.log(currentSys)
  294. this.listKey = `list_${new Date().getTime()}`
  295. this.$set(this.listData, this.currentSmsxt, currentSys)
  296. Toast.clear()
  297. // console.log(this.listData)
  298. },
  299. /**
  300. * 查询机房平面布置图数量
  301. */
  302. async getRoomCount() {
  303. let getParams = {
  304. plazaId: this.plazaId,
  305. systemCode: this.smsxt,
  306. }
  307. // 查询机房平面布置图数量
  308. let res = await queryRoomCount({ getParams })
  309. // 取出listData中对应的系统数据
  310. let data = this.listData[this.smsxt]
  311. data.map((item, index, arr) => {
  312. if (item.dataType === 'room') {
  313. item.count = res?.count ? res?.count + '张' : '无'
  314. }
  315. })
  316. this.listKey = `list_${new Date().getTime()}`
  317. },
  318. /**
  319. * 分水器支路分布图,消防泵房引出管路分布图 对应的楼层图例数据
  320. */
  321. async getTuliData({ smsxt, system_code }) {
  322. let params = {
  323. BuildingID: '1',
  324. CategoryID: system_code,
  325. ProjectID: this.plazaId,
  326. Floors: this.floorsArr.map((item) => {
  327. return {
  328. FloorId: item.gname,
  329. FloorName: item.code,
  330. }
  331. }),
  332. }
  333. // console.log(params)
  334. let res = await appGraphElementQuery(params)
  335. // console.log(res)
  336. if (!res?.Data) {
  337. return false
  338. }
  339. let Data = res.Data || []
  340. // 过滤有Statistics的条数
  341. Data = Data.filter((v) => v.Statistics?.length)
  342. let fbtArr = []
  343. Data.map((item) => {
  344. fbtArr.push({
  345. code: item.FloorName,
  346. gname: item.FloorId,
  347. })
  348. })
  349. this.fbtArr = fbtArr
  350. let count = Data.length ? Data.length + '张' : '无'
  351. let systemData = this.listData[smsxt]
  352. console.log(systemData)
  353. systemData.map((item, index, arr) => {
  354. if (item.dataType === 'fbt') {
  355. arr[index].count = count
  356. }
  357. })
  358. this.$set(this.listData, smsxt, systemData)
  359. this.listKey = `list_${new Date().getTime()}`
  360. // .then(res => {
  361. // this.floorData = res.Data.map(floor => {
  362. // floor.Open = false;
  363. // return floor;
  364. // });
  365. // })
  366. },
  367. /**
  368. * 查询设备卡片
  369. */
  370. async getCard() {
  371. this.cardList = []
  372. let getParams = {
  373. plazaId: this.plazaId,
  374. smsxt: this.smsxt,
  375. }
  376. let res
  377. try {
  378. res = await querySystemCard({ getParams })
  379. } catch (error) {}
  380. // console.log('设备卡片')
  381. // console.log(res.data)
  382. if (!res && !res?.data?.length) {
  383. return false
  384. }
  385. let data = res.data
  386. // 取出assetTypeList
  387. let cardList = data[0]?.assetTypeList || []
  388. // console.log(cardList)
  389. cardList.map((item) => {
  390. item.total = item.asset_num // card 第二行台数
  391. item.name = item.category_name //card 第一行名称
  392. // 设备卡片单位处理
  393. if (item.name === '屋面logo') {
  394. item.unit = '个'
  395. } else if (item.name === '玻璃护栏') {
  396. item.unit = '段'
  397. } else {
  398. item.unit = '台'
  399. }
  400. /**
  401. * type 1: 正常运维 2:重要维保 3:重要维修
  402. */
  403. // 默认正常
  404. item.type = 1
  405. item.number = 0
  406. if (item.is_exception || item.is_exception_num) {
  407. // 有异常
  408. item.type = 3
  409. item.number = item.is_exception_num
  410. } else if (item.is_detecting || item.is_detecting_num) {
  411. // 检测中
  412. item.type = 2
  413. item.number = item.is_detecting_num
  414. }
  415. })
  416. this.cardList = cardList
  417. // console.log('=============')
  418. // console.log(this.cardList)
  419. // console.log('=============')
  420. },
  421. handleClick(item) {
  422. switch (item.dataType) {
  423. // 点击系统原理图, 显示/隐藏 具体的原理图
  424. case 'moreImg':
  425. this.handleMoreImg(item)
  426. break
  427. // 原理图
  428. case 'img':
  429. this.handleImg(item)
  430. break
  431. // 机房平面布置图
  432. case 'room':
  433. this.handleRoom(item)
  434. break
  435. // 主要设备清单
  436. case 'mainEquipment':
  437. this.handleMainAsset(item)
  438. break
  439. // 维修维保
  440. case 'wxwb':
  441. this.handleWxwb(item)
  442. break
  443. // 楼层分布
  444. case 'floor':
  445. this.handleFloor(item)
  446. break
  447. case 'fbt':
  448. this.handleFbt(item)
  449. break
  450. // 电井间商铺控制范围
  451. case 'electricWell':
  452. this.hanldeElectricWell(item)
  453. break
  454. // 配电室低压柜及出线明细
  455. case 'dyg':
  456. this.hanldeDyg(item)
  457. break
  458. // 其他事项
  459. case 'otherMatter':
  460. this.handleOtherMatter(item)
  461. break
  462. default:
  463. break
  464. }
  465. },
  466. /**
  467. * 点击系统原理图
  468. * 显示隐藏详细的系统原理图
  469. */
  470. handleMoreImg(item) {
  471. console.log(item)
  472. const currentItem = this.listData[item.id]
  473. if (item.arrow === 'down') {
  474. currentItem.map((v) => {
  475. v.dataType === 'img' && (v.hide = false)
  476. })
  477. item.arrow = 'up'
  478. } else {
  479. currentItem.map((v) => {
  480. v.dataType === 'img' && (v.hide = true)
  481. })
  482. item.arrow = 'down'
  483. }
  484. },
  485. /**
  486. * 显示原理图预览
  487. */
  488. handleImg(item) {
  489. if (item.count === '无') {
  490. return false
  491. }
  492. this.showImage(item)
  493. },
  494. /**
  495. * 显示原理图
  496. */
  497. async showImage(item) {
  498. console.log('显示原理图')
  499. console.log(item)
  500. this.imgList = []
  501. this.imgKey = 'img_' + new Date().getTime()
  502. if (Array.isArray(item.typecode)) {
  503. return this.getTuJianImage(item)
  504. }
  505. let getParams = {
  506. plazaId: this.plazaId,
  507. module: this.module,
  508. neTypename: '位置布置图',
  509. typecode: item.typecode,
  510. system: this.smsxt,
  511. }
  512. let res = await querySystemImage({ getParams })
  513. // console.log(res)
  514. if (!res && !res?.data) {
  515. return false
  516. }
  517. let data = res.data
  518. let imgList = []
  519. data.map((item) => {
  520. imgList.push(item.url)
  521. })
  522. this.imgList = imgList
  523. imgList.length && (this.showImgPreview = true)
  524. },
  525. /**
  526. * 土建立面图(typecode为数组,查询多种图)
  527. */
  528. async getTuJianImage(item) {
  529. let data = {
  530. plazaId: this.plazaId,
  531. module: this.module,
  532. neTypename: '位置布置图',
  533. system: this.smsxt,
  534. },
  535. postParams = {
  536. typecode: item.typecode,
  537. }
  538. let res = await querySystemTuJianImage({ data, postParams })
  539. // console.log(res)
  540. if (!res && !res?.data) {
  541. return false
  542. }
  543. let resData = res.data
  544. let imgList = []
  545. resData?.data.map((item) => {
  546. imgList.push(item.url)
  547. })
  548. this.imgList = imgList
  549. imgList.length && (this.showImgPreview = true)
  550. },
  551. /**
  552. * 跳转 机房平面布置图
  553. */
  554. handleRoom(item) {
  555. if (!item.count || item.count === '无') {
  556. return false
  557. }
  558. this.$router.push({ name: 'EngineRoomPicture', params: {} })
  559. },
  560. handleMainAsset() {
  561. this.$router.push({ name: 'MainEquipment' })
  562. },
  563. handleWxwb() {
  564. this.$router.push({ name: 'MaintenanceRecordView', params: { isInit: true } })
  565. },
  566. /**
  567. * 配电室低压柜及出线明细
  568. */
  569. hanldeDyg() {
  570. this.$router.push({ name: 'LowVoltageCabinet', params: { initPage: true } })
  571. },
  572. /**
  573. * 其他事项
  574. */
  575. handleOtherMatter(item) {
  576. this.$router.push({ name: 'OtherMatters', params: {} })
  577. },
  578. /**
  579. * 跳转 楼层分布
  580. */
  581. handleFloor(item) {
  582. let title = this.systemText + ' - 楼层分布'
  583. this.$router.push({ name: 'SystemFloor', query: { title } })
  584. },
  585. /**
  586. * 分水器支路分布图
  587. */
  588. handleFbt(item) {
  589. console.log(item)
  590. let currentSystem = this.listData[this.smsxt]
  591. let fbt = currentSystem.filter((v) => v.dataType === 'fbt')[0]
  592. if (!fbt || fbt.count === '无') {
  593. return false
  594. }
  595. const { categoryId, text } = item
  596. this.SETCATEGORYID(categoryId)
  597. let query = { title: text }
  598. // mockData
  599. // this.fbtArr = [
  600. // {
  601. // code: 'RF',
  602. // gname: 'g80',
  603. // },
  604. // ]
  605. if (this.fbtArr.length) {
  606. query.fbtArr = JSON.stringify(this.fbtArr)
  607. query.fbt = true
  608. }
  609. this.$router.push({ name: 'SystemFloor', query })
  610. },
  611. /**
  612. * 跳转 电井间控制商铺范围
  613. */
  614. hanldeElectricWell(item) {
  615. this.$router.push({ name: 'ElectricWell', params: {} })
  616. },
  617. /**
  618. * 点击卡片,跳转设备列表页面
  619. */
  620. goToEquipment(data) {
  621. console.log(data)
  622. let { name, category_code } = data
  623. this.$router.push({ name: 'EquipmentList', query: { title: name, category_code }, params: { from: 'indexPage' } })
  624. },
  625. /**
  626. * 点击更多设备卡片,跳转设备列表页面
  627. */
  628. async goToMoreEquipment(e) {
  629. // this.$router.push({ name: 'MoreEquipmentList', params: {} })
  630. console.log(e.target)
  631. // TODO: 更多设备
  632. return false
  633. this.showMoreCardList = true
  634. this.moreCardList = cloneDeep(this.cardList)
  635. console.log()
  636. //
  637. // let data = {
  638. // // page: 1,
  639. // // size: 400,
  640. // // subPage: 1,
  641. // // subSize: 100,
  642. // plazaId: this.plazaId,
  643. // onlyMainAsset: true,
  644. // }
  645. // let postParams = {
  646. // system_code: this.smsxt,
  647. // }
  648. // let res = await queryMoreAsset({ data, postParams })
  649. // if (!res?.data?.data) {
  650. // return false
  651. // }
  652. // console.log(res.data.data)
  653. },
  654. },
  655. }
  656. </script>
  657. <style lang='less' scoped>
  658. .equipment-facilities {
  659. width: 100%;
  660. height: calc(100% - 100px);
  661. padding: 0;
  662. display: flex;
  663. .left {
  664. width: 80px;
  665. height: 100%;
  666. }
  667. .right {
  668. flex: 1;
  669. height: 100%;
  670. padding: 16px 16px 16px 12px;
  671. overflow: auto;
  672. .top {
  673. width: 100%;
  674. /deep/ .van-cell {
  675. font-size: 14px;
  676. font-weight: 400;
  677. color: #333333;
  678. background: #f8f9fa;
  679. border-radius: 4px;
  680. margin-bottom: 4px;
  681. .van-cell__value {
  682. width: 40px;
  683. max-width: 50px;
  684. flex: none;
  685. }
  686. }
  687. // 系统原理图
  688. .more-img-cell {
  689. margin-bottom: 0 !important;
  690. }
  691. .more-img-cell-border {
  692. height: 1px;
  693. overflow: hidden;
  694. width: calc(100% - 20px);
  695. background: #fff;
  696. border: none;
  697. border-radius: 0;
  698. border-bottom: 1px solid #e4e6e7;
  699. margin: 0;
  700. line-height: 0;
  701. font-size: 0;
  702. padding: 0;
  703. margin: 0 auto;
  704. }
  705. .img-cell {
  706. background: #eff0f1;
  707. border-radius: 0;
  708. }
  709. .img-cell:not(:last-child) {
  710. margin-bottom: 0 !important;
  711. }
  712. .dyg {
  713. /deep/ .van-cell__value {
  714. width: 0;
  715. }
  716. }
  717. }
  718. .divider {
  719. border-bottom: 1px solid #e6e6e6;
  720. margin: 20px 0 10px 0;
  721. }
  722. .card-container {
  723. width: 100%;
  724. display: flex;
  725. flex-wrap: wrap;
  726. flex-flow: wrap;
  727. // .card {
  728. // flex: 1;
  729. // width: calc(50% - 10px);
  730. // margin: 0 10px 10px 0;
  731. // min-width: calc(50% - 10px); // 加入这两个后每个item的宽度就生效了
  732. // max-width: calc(50% - 10px); // 加入这两个后每个item的宽度就生效了
  733. // height: 110px;
  734. // margin-right: auto;
  735. // }
  736. .card {
  737. width: calc(50% - 5px);
  738. margin-bottom: 9px;
  739. height: 90px;
  740. }
  741. .card:not(:nth-child(2n)) {
  742. margin-right: 9px;
  743. }
  744. }
  745. .close {
  746. position: fixed;
  747. background-color: #fff;
  748. width: 50px;
  749. height: 50px;
  750. line-height: 50px;
  751. border-radius: 50px;
  752. text-align: center;
  753. bottom: 80px;
  754. right: 30px;
  755. }
  756. }
  757. }
  758. </style>