MainEquipment.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576
  1. <template>
  2. <div class="asset-detail">
  3. <van-nav-bar
  4. title="主要设备清单"
  5. @click-left="backPage"
  6. @click-right="handleRightClick"
  7. >
  8. <template #left>
  9. <van-icon name="arrow-left" size="18" color="#333333" />
  10. </template>
  11. <template #right>
  12. <i class="iconfont wanda-scan"></i>
  13. </template>
  14. </van-nav-bar>
  15. <van-tabs
  16. v-if="tabData && tabData.length > 1"
  17. v-model="active"
  18. class="other-tabs"
  19. color="#025BAA"
  20. @change="changeTab"
  21. title-active-color="#025BAA"
  22. :line-width="60"
  23. >
  24. <van-tab v-for="item in tabData" :title="item.label" :name="item.param.tab_code" :key="item.param.tab_code"> </van-tab>
  25. </van-tabs>
  26. <div class="asset-information" :class="tabData && tabData.length > 1?'asset-tab':'asset-no-tab'">
  27. <div class="equipment-page">
  28. <!-- 搜索框 -->
  29. <div class="equipment-search-container">
  30. <van-search
  31. class="equipment-search"
  32. v-model="keyword"
  33. placeholder="请输入设备名称"
  34. @search="getData"
  35. />
  36. </div>
  37. <div class="equipment-list" v-if="dataList.length">
  38. <van-list
  39. v-model="loading"
  40. :finished="finished"
  41. finished-text="没有更多了"
  42. @load="onLoad"
  43. >
  44. <van-cell v-for="(data, index) in dataList" :key="index" @click="handleClickToDetail(data)">
  45. <template>
  46. <h2 class="info-title">
  47. {{ `${data.type_name} (${data.sl})` }}
  48. <span v-if="data.is_exception" class="info-card wx">维修</span>
  49. <span v-else-if="data.is_detecting" class="info-card wb">维保</span>
  50. </h2>
  51. <div class="cell">
  52. <span class="left">{{ "型\u3000\u3000号:" }}</span>
  53. <span class="right">{{ data.sbxh || "--" }}</span>
  54. </div>
  55. <div class="cell">
  56. <span class="left">{{ "品\u3000\u3000牌:" }}</span>
  57. <span class="right">{{ data.brand || "--" }}</span>
  58. </div>
  59. <div class="cell">
  60. <span class="left">{{ "生产厂商:" }}</span>
  61. <span class="right">{{ data.manufacturer || "--" }}</span>
  62. </div>
  63. <div class="cell">
  64. <span class="left"><i class="iconfont wanda-dingwei" style="font-size: 14px;color: #C3C7CB;"></i> {{ "楼 层:" }}</span>
  65. <span class="right">{{ data.floorcode || "--" }}</span>
  66. </div>
  67. <div style="padding-bottom:4px;"></div>
  68. </template>
  69. </van-cell>
  70. </van-list>
  71. </div>
  72. <!-- 无数据 -->
  73. <van-empty
  74. class="m-empty"
  75. v-if="!dataList.length"
  76. description="暂无数据"
  77. >
  78. <template #image>
  79. <img
  80. class="no-data"
  81. src="../../assets/images/search_null.png"
  82. alt
  83. />
  84. </template>
  85. </van-empty>
  86. </div>
  87. </div>
  88. <!-- 点击头部筛选,出现的右侧弹窗 -->
  89. <van-popup class="m-popup-container" v-model="showPopup" position="right">
  90. <div class="m-popup">
  91. <!-- 楼层 -->
  92. <div class="sbss">
  93. <h1 class="title">楼层</h1>
  94. <div class="system-btn-container">
  95. <div class="system-btn" v-for="(item, index) in floorList" :key="index">
  96. <van-button class="m-btn" :class="item.active" @click="changeFloor(item)">{{ item.code }}</van-button>
  97. </div>
  98. </div>
  99. </div>
  100. <!-- <div class="divider"></div> -->
  101. <div class="footer">
  102. <van-button
  103. size="large"
  104. color="#025BAA"
  105. plain
  106. type="info"
  107. @click="reset"
  108. >重置</van-button
  109. >
  110. <van-button size="large" color="#025BAA" type="info" @click="confirm"
  111. >确定</van-button
  112. >
  113. </div>
  114. </div>
  115. </van-popup>
  116. </div>
  117. </template>
  118. <script>
  119. /**
  120. * 主要设备清单
  121. */
  122. import Vue from "vue";
  123. import { mapGetters } from "vuex";
  124. import { NavBar, Tab, Tabs, Popup, Button, Toast, List, Cell } from "vant";
  125. import RepairMaintenance from "@/components/equipmentFacilities/RepairMaintenance.vue";
  126. import { queryStatistics } from "@/api/equipmentList.js";
  127. import { tabCodeArr } from "@/utils/components.js"
  128. import moment from "moment";
  129. Vue.use(NavBar)
  130. .use(Tab)
  131. .use(Tabs)
  132. .use(Popup)
  133. .use(Button)
  134. .use(Toast)
  135. .use(List)
  136. .use(Cell);
  137. export default {
  138. name: "MainEquipment",
  139. props: {},
  140. components: { RepairMaintenance },
  141. computed: {
  142. ...mapGetters(["plazaId", "smsxt", "floorsArr"]),
  143. tabData() {
  144. let arr = tabCodeArr[this.smsxt]
  145. if (arr && arr.length === 1) {
  146. this.tab_code = arr[0].tab_code;
  147. } else if (arr && arr.length > 1) {
  148. this.tab_code = arr[0].param.tab_code;
  149. } else {
  150. this.tab_code = "";
  151. }
  152. return arr
  153. }
  154. },
  155. data() {
  156. return {
  157. active: 0,
  158. tab_code: "",
  159. showPopup: false,
  160. dataList: [],
  161. keyword: "",
  162. floorId: "",
  163. floorList: [],
  164. loading: false,
  165. finished: false,
  166. fillinDate: 0,
  167. page: 1, //当前页码
  168. size: 10, //每页条数
  169. };
  170. },
  171. props: {},
  172. beforeMount() {},
  173. created() {
  174. // 设置 筛选抽屉中的 楼层
  175. let floorList = [{ code: '全部', gcname: '全部', gcode: '全部', gname: '', seq: null, active: 'active' }]
  176. this.floorsArr.map(({ code, gcname, gcode, gname, seq }) => {
  177. floorList.push({ code, gcname, gcode, gname, seq, active: '' })
  178. })
  179. this.floorList = floorList;
  180. this.getData();
  181. },
  182. activated() {
  183. if (this.$route.params.isInit) {
  184. this.initData();
  185. }
  186. },
  187. methods: {
  188. backPage() {
  189. if (this.$route.query.first) {
  190. this.$router.push({ path: "/" });
  191. } else {
  192. this.$router.go(-1);
  193. }
  194. },
  195. // 初始化
  196. initData() {
  197. this.active = 0;
  198. this.keyword = "";
  199. this.floorList.map((item, index) => {
  200. item.active = ''
  201. if (index === 0) {
  202. item.active = 'active';
  203. this.floorId = "";
  204. }
  205. })
  206. this.getData();
  207. },
  208. // 切换tab
  209. changeTab(active) {
  210. this.tab_code = active;
  211. this.getData();
  212. },
  213. /**
  214. * 点击右侧筛选
  215. */
  216. handleRightClick() {
  217. this.showPopup = true;
  218. },
  219. // 查询主要设备清单
  220. getData() {
  221. this.page = 1;
  222. this.dataList = [];
  223. this.finished = false;
  224. let data = {
  225. plazaId: this.plazaId,
  226. onlyMainAsset: true,
  227. page: this.page,
  228. size: this.size,
  229. orderBy: 'is_exception,0;is_detecting,0;',
  230. },
  231. postParams = {};
  232. // tab_code
  233. if (this.tab_code) {
  234. postParams.tab_code = this.tab_code
  235. }
  236. // 查询关键字(设备名称)
  237. if (this.keyword) {
  238. data.keyword = `${this.keyword}:type_name`;
  239. }
  240. // 选择楼层
  241. if (this.floorId) {
  242. postParams.gname = this.floorId;
  243. }
  244. queryStatistics({ data, postParams }).then((res) => {
  245. if (res.data.result == "success" && res.data.data) {
  246. this.dataList = res.data.data;
  247. }
  248. // 数据全部加载完成
  249. if (this.dataList.length >= res.data.count) {
  250. this.finished = true;
  251. }
  252. });
  253. },
  254. onLoad() {
  255. // 异步更新数据
  256. this.page++;
  257. let data = {
  258. plazaId: this.plazaId,
  259. onlyMainAsset: true,
  260. page: this.page,
  261. size: this.size,
  262. orderBy: 'is_exception,0;is_detecting,0;',
  263. },
  264. postParams = {};
  265. // tab_code
  266. if (this.tab_code) {
  267. postParams.tab_code = this.tab_code
  268. }
  269. //查询关键字(设备名称)
  270. if (this.keyword) {
  271. data.keyword = `${this.keyword}:type_name`;
  272. }
  273. // 选择楼层
  274. if (this.floorId) {
  275. postParams.gname = this.floorId;
  276. }
  277. queryStatistics({ data, postParams }).then((res) => {
  278. if (res.data.result == "success" && res.data.data) {
  279. this.dataList = this.dataList.concat(res.data.data);
  280. }
  281. // 加载状态结束
  282. this.loading = false;
  283. // 数据全部加载完成
  284. if (this.dataList.length >= res.data.count) {
  285. this.finished = true;
  286. }
  287. });
  288. },
  289. // 点击卡片跳转
  290. handleClickToDetail(data) {
  291. this.$router.push({ name: "MainEquipmentDetail", params: { ...data, initPage: true }});
  292. },
  293. // 修改楼层
  294. changeFloor(data) {
  295. this.floorId = data.gname;
  296. this.floorList.map((item) => {
  297. item.active = ''
  298. if (item.gname === data.gname) {
  299. item.active = 'active'
  300. }
  301. })
  302. },
  303. /**
  304. * 重置
  305. */
  306. reset() {
  307. this.floorList.map((item, index) => {
  308. item.active = ''
  309. if (index === 0) {
  310. item.active = 'active';
  311. this.floorId = "";
  312. }
  313. })
  314. this.getData();
  315. this.showPopup = false;
  316. },
  317. /**
  318. * 弹窗确认
  319. */
  320. confirm() {
  321. this.getData();
  322. this.showPopup = false;
  323. },
  324. }
  325. };
  326. </script>
  327. <style lang='less' scoped>
  328. .asset-detail {
  329. width: 100%;
  330. height: 100%;
  331. .asset-information {
  332. height: calc(100% - 90px);
  333. background: #f5f6f7;
  334. overflow-y: auto;
  335. .equipment-page {
  336. width: 100%;
  337. height: 100%;
  338. background-color: #f5f6f7;
  339. // 搜索
  340. .equipment-search-container {
  341. width: 100%;
  342. height: 55px;
  343. // background-color: #fff;
  344. text-align: center;
  345. .equipment-search {
  346. width: 100%;
  347. padding-left: 15px;
  348. padding-right: 15px;
  349. margin: 0 auto;
  350. background: none;
  351. }
  352. .van-search__content {
  353. background: #fff;
  354. border-radius: 50px;
  355. }
  356. }
  357. // 主要维保
  358. .equipment-list {
  359. width: 100%;
  360. min-height: 1px;
  361. max-height: calc(100% - 55px);
  362. overflow: auto;
  363. font-size: 14px;
  364. font-weight: 400;
  365. color: #333333;
  366. .info-title {
  367. font-size: 16px;
  368. margin-top: 2px;
  369. color: #333333;
  370. .info-card {
  371. float: right;
  372. padding: 0 8px;
  373. font-size: 14px;
  374. font-weight: normal;
  375. }
  376. .wx {
  377. color: rgba(216, 57, 49, 1);
  378. background-color: rgba(216, 57, 49, 0.09);
  379. }
  380. .wb {
  381. color: rgba(4, 129, 225, 1);
  382. background-color: rgba(4, 129, 225, 0.09);
  383. }
  384. }
  385. .cell {
  386. width: 100%;
  387. min-height: 20px;
  388. margin-top: 4px;
  389. display: flex;
  390. .left {
  391. width: 75px;
  392. color: #666;
  393. font-size: 14px;
  394. }
  395. .right {
  396. flex: 1;
  397. color: #333;
  398. font-size: 14px;
  399. }
  400. }
  401. }
  402. // 空状态
  403. .m-empty {
  404. // position: fixed;
  405. // top: 0;
  406. // left: 0;
  407. // width: 100%;
  408. // height: 100%;
  409. display: flex;
  410. align-items: center;
  411. /deep/ .van-empty__image {
  412. display: flex;
  413. justify-content: center;
  414. align-items: flex-end;
  415. img {
  416. width: auto;
  417. height: auto;
  418. }
  419. }
  420. }
  421. }
  422. }
  423. .asset-tab {
  424. height: calc(100% - 90px);
  425. }
  426. .asset-no-tab {
  427. height: calc(100% - 46px);
  428. }
  429. .other-tabs {
  430. /deep/ .van-tab__text {
  431. font-size: 16px;
  432. }
  433. /deep/ .van-tabs__wrap {
  434. height: 45px;
  435. border-bottom: 1px solid #eaeaea;
  436. .van-tabs__nav--line {
  437. box-sizing: content-box;
  438. height: 100%;
  439. width: 90%;
  440. margin: 0 auto;
  441. }
  442. }
  443. }
  444. // 筛选弹窗
  445. .m-popup-container {
  446. width: 80%;
  447. height: 100%;
  448. padding: 10px 15px;
  449. .m-popup {
  450. width: 100%;
  451. height: calc(100% - 81px);
  452. display: flex;
  453. flex-direction: column;
  454. .title {
  455. font-size: 16px;
  456. font-weight: 500;
  457. color: #333333;
  458. margin-bottom: 15px;
  459. }
  460. // 专业
  461. .system {
  462. width: 100%;
  463. height: auto;
  464. // 专业系统按钮
  465. .system-btn-container {
  466. display: flex;
  467. width: 100%;
  468. flex-wrap: wrap;
  469. flex-flow: wrap;
  470. .system-btn {
  471. width: calc(33.333% - 5.34px) !important;
  472. min-width: calc(33.333% - 5.34px) !important;
  473. max-width: calc(33.333% - 5.34px) !important;
  474. height: 32px;
  475. margin-bottom: 8px;
  476. box-sizing: border-box;
  477. .m-btn {
  478. width: 100%;
  479. height: 32px !important;
  480. text-align: center;
  481. background: #eff0f1;
  482. border-radius: 2px;
  483. padding: 0 !important;
  484. }
  485. }
  486. .system-btn:not(:nth-child(3n)) {
  487. margin-right: 8px;
  488. }
  489. }
  490. .active {
  491. background-color: #025baa !important;
  492. color: #fff;
  493. }
  494. }
  495. // 电井类型
  496. .sbss {
  497. display: flex;
  498. flex-direction: column;
  499. overflow: auto;
  500. .title {
  501. width: 100%;
  502. height: 25px;
  503. }
  504. .system-btn-container {
  505. display: flex;
  506. width: 100%;
  507. flex-wrap: wrap;
  508. flex-flow: wrap;
  509. .system-btn {
  510. width: calc(33.333% - 5.34px) !important;
  511. min-width: calc(33.333% - 5.34px) !important;
  512. max-width: calc(33.333% - 5.34px) !important;
  513. height: 32px;
  514. margin-bottom: 8px;
  515. box-sizing: border-box;
  516. .m-btn {
  517. width: 100%;
  518. height: 32px !important;
  519. text-align: center;
  520. background: #eff0f1;
  521. border-radius: 2px;
  522. padding: 0 !important;
  523. }
  524. }
  525. .system-btn:not(:nth-child(3n)) {
  526. margin-right: 8px;
  527. }
  528. }
  529. .active {
  530. background-color: #025baa !important;
  531. color: #fff;
  532. }
  533. .load-more {
  534. width: 80px;
  535. height: 25px;
  536. line-height: 25px;
  537. text-align: center;
  538. margin: 0 auto;
  539. color: #025baa;
  540. background: #e5eef6;
  541. }
  542. }
  543. .divider {
  544. border-bottom: 1px solid #e6e6e6;
  545. margin: 20px 0;
  546. }
  547. .footer {
  548. position: absolute;
  549. bottom: 30px;
  550. right: 0;
  551. width: 100%;
  552. height: 35px;
  553. display: flex;
  554. justify-content: space-between;
  555. padding: 0 15px;
  556. .van-button {
  557. width: calc(50% - 7px) !important;
  558. min-width: calc(50% - 7px) !important;
  559. max-width: calc(50% - 7px) !important;
  560. height: 100%;
  561. }
  562. .van-button:first-child {
  563. margin-right: 14px;
  564. }
  565. }
  566. }
  567. }
  568. }
  569. </style>