MainEquipment.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547
  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. },
  181. mounted() {
  182. this.getData();
  183. },
  184. methods: {
  185. backPage() {
  186. if (this.$route.query.first) {
  187. this.$router.push({ path: "/" });
  188. } else {
  189. this.$router.go(-1);
  190. }
  191. },
  192. // 切换tab
  193. changeTab(active) {
  194. this.tab_code = active;
  195. this.getData();
  196. },
  197. /**
  198. * 点击右侧筛选
  199. */
  200. handleRightClick() {
  201. this.showPopup = true;
  202. },
  203. // 查询主要设备清单
  204. getData() {
  205. this.page = 1;
  206. this.dataList = [];
  207. this.finished = false;
  208. let data = {
  209. plazaId: this.plazaId,
  210. onlyMainAsset: true,
  211. page: this.page,
  212. size: this.size,
  213. },
  214. postParams = {};
  215. // tab_code
  216. if (this.tab_code) {
  217. postParams.tab_code = this.tab_code
  218. }
  219. // 查询关键字(设备名称)
  220. if (this.keyword) {
  221. data.keyword = `${this.keyword}:type_name`;
  222. }
  223. // 选择楼层
  224. if (this.floorId) {
  225. postParams.gname = this.floorId;
  226. }
  227. queryStatistics({ data, postParams }).then((res) => {
  228. if (res.data.result == "success" && res.data.data) {
  229. this.dataList = res.data.data;
  230. }
  231. // 数据全部加载完成
  232. if (this.dataList.length >= res.data.count) {
  233. this.finished = true;
  234. }
  235. });
  236. },
  237. onLoad() {
  238. // 异步更新数据
  239. this.page++;
  240. let data = {
  241. plazaId: this.plazaId,
  242. onlyMainAsset: true,
  243. page: this.page,
  244. size: this.size,
  245. },
  246. postParams = {};
  247. // tab_code
  248. if (this.tab_code) {
  249. postParams.tab_code = this.tab_code
  250. }
  251. //查询关键字(设备名称)
  252. if (this.keyword) {
  253. data.keyword = `${this.keyword}:type_name`;
  254. }
  255. // 选择楼层
  256. if (this.floorId) {
  257. postParams.gname = this.floorId;
  258. }
  259. queryStatistics({ data, postParams }).then((res) => {
  260. if (res.data.result == "success" && res.data.data) {
  261. this.dataList = this.dataList.concat(res.data.data);
  262. }
  263. // 加载状态结束
  264. this.loading = false;
  265. // 数据全部加载完成
  266. if (this.dataList.length >= res.data.count) {
  267. this.finished = true;
  268. }
  269. });
  270. },
  271. // 点击卡片跳转
  272. handleClickToDetail(data) {
  273. this.$router.push({ name: "MainEquipmentDetail", params: data});
  274. },
  275. // 修改楼层
  276. changeFloor(data) {
  277. this.floorId = data.gname;
  278. this.floorList.map((item) => {
  279. item.active = ''
  280. if (item.gname === data.gname) {
  281. item.active = 'active'
  282. }
  283. })
  284. },
  285. /**
  286. * 重置
  287. */
  288. reset() {
  289. this.floorList.map((item, index) => {
  290. item.active = ''
  291. if (index === 0) {
  292. item.active = 'active';
  293. this.floorId = "";
  294. }
  295. })
  296. this.getData();
  297. this.showPopup = false;
  298. },
  299. /**
  300. * 弹窗确认
  301. */
  302. confirm() {
  303. this.getData();
  304. this.showPopup = false;
  305. },
  306. }
  307. };
  308. </script>
  309. <style lang='less' scoped>
  310. .asset-detail {
  311. width: 100%;
  312. height: 100%;
  313. .asset-information {
  314. height: calc(100% - 90px);
  315. background: #f5f6f7;
  316. overflow-y: auto;
  317. .equipment-page {
  318. width: 100%;
  319. height: 100%;
  320. background-color: #f5f6f7;
  321. // 搜索
  322. .equipment-search-container {
  323. width: 100%;
  324. height: 55px;
  325. // background-color: #fff;
  326. text-align: center;
  327. .equipment-search {
  328. width: 100%;
  329. padding-left: 15px;
  330. padding-right: 15px;
  331. margin: 0 auto;
  332. background: none;
  333. }
  334. .van-search__content {
  335. background: #fff;
  336. border-radius: 50px;
  337. }
  338. }
  339. // 主要维保
  340. .equipment-list {
  341. width: 100%;
  342. min-height: 1px;
  343. max-height: calc(100% - 55px);
  344. overflow: auto;
  345. font-size: 14px;
  346. font-weight: 400;
  347. color: #333333;
  348. .info-title {
  349. font-size: 16px;
  350. margin-top: 2px;
  351. color: #333333;
  352. .info-card {
  353. float: right;
  354. padding: 0 8px;
  355. font-size: 14px;
  356. font-weight: normal;
  357. }
  358. .wx {
  359. color: rgba(216, 57, 49, 1);
  360. background-color: rgba(216, 57, 49, 0.09);
  361. }
  362. .wb {
  363. color: rgba(4, 129, 225, 1);
  364. background-color: rgba(4, 129, 225, 0.09);
  365. }
  366. }
  367. .cell {
  368. width: 100%;
  369. min-height: 20px;
  370. margin-top: 4px;
  371. display: flex;
  372. .left {
  373. width: 75px;
  374. color: #666;
  375. font-size: 14px;
  376. }
  377. .right {
  378. flex: 1;
  379. color: #333;
  380. font-size: 14px;
  381. }
  382. }
  383. }
  384. // 空状态
  385. .m-empty {
  386. // position: fixed;
  387. // top: 0;
  388. // left: 0;
  389. // width: 100%;
  390. // height: 100%;
  391. display: flex;
  392. align-items: center;
  393. /deep/ .van-empty__image {
  394. display: flex;
  395. justify-content: center;
  396. align-items: flex-end;
  397. img {
  398. width: auto;
  399. height: auto;
  400. }
  401. }
  402. }
  403. }
  404. }
  405. .asset-tab {
  406. height: calc(100% - 90px);
  407. }
  408. .asset-no-tab {
  409. height: calc(100% - 46px);
  410. }
  411. .other-tabs {
  412. /deep/ .van-tab__text {
  413. font-size: 16px;
  414. }
  415. /deep/ .van-tabs__wrap {
  416. height: 45px;
  417. border-bottom: 1px solid #eaeaea;
  418. .van-tabs__nav--line {
  419. box-sizing: content-box;
  420. height: 100%;
  421. width: 90%;
  422. margin: 0 auto;
  423. }
  424. }
  425. }
  426. // 筛选弹窗
  427. .m-popup-container {
  428. width: 80%;
  429. height: 100%;
  430. padding: 55px 20px 10px 20px;
  431. .m-popup {
  432. width: 100%;
  433. height: calc(100% - 81px);
  434. display: flex;
  435. flex-direction: column;
  436. .title {
  437. font-size: 16px;
  438. font-weight: 500;
  439. color: #333333;
  440. margin-bottom: 15px;
  441. }
  442. // 专业
  443. .system {
  444. width: 100%;
  445. height: auto;
  446. // 专业系统按钮
  447. .system-btn-container {
  448. display: flex;
  449. width: 100%;
  450. flex-wrap: wrap;
  451. flex-flow: wrap;
  452. .system-btn {
  453. width: 50% !important;
  454. min-width: 50% !important;
  455. max-width: 50% !important;
  456. height: 40px;
  457. box-sizing: border-box;
  458. padding: 10px 10px 10px 0;
  459. .m-btn {
  460. width: 100%;
  461. height: 32px !important;
  462. text-align: center;
  463. background: #eff0f1;
  464. border-radius: 2px;
  465. }
  466. }
  467. }
  468. .active {
  469. background-color: #025baa !important;
  470. color: #fff;
  471. }
  472. }
  473. // 电井类型
  474. .sbss {
  475. display: flex;
  476. flex-direction: column;
  477. overflow: auto;
  478. .title {
  479. width: 100%;
  480. height: 25px;
  481. }
  482. .system-btn-container {
  483. display: flex;
  484. width: 100%;
  485. flex-wrap: wrap;
  486. flex-flow: wrap;
  487. .system-btn {
  488. width: 33% !important;
  489. min-width: 33% !important;
  490. max-width: 33% !important;
  491. height: 50px;
  492. box-sizing: border-box;
  493. padding: 5px 10px 5px 0;
  494. .m-btn {
  495. width: 100%;
  496. height: 32px !important;
  497. text-align: center;
  498. background: #eff0f1;
  499. border-radius: 2px;
  500. padding: 0 !important;
  501. }
  502. }
  503. }
  504. .active {
  505. background-color: #025baa !important;
  506. color: #fff;
  507. }
  508. .load-more {
  509. width: 80px;
  510. height: 25px;
  511. line-height: 25px;
  512. text-align: center;
  513. margin: 0 auto;
  514. color: #025baa;
  515. background: #e5eef6;
  516. }
  517. }
  518. .divider {
  519. border-bottom: 1px solid #e6e6e6;
  520. margin: 20px 0;
  521. }
  522. .footer {
  523. position: absolute;
  524. bottom: 30px;
  525. right: 0;
  526. width: 100%;
  527. height: 35px;
  528. display: flex;
  529. justify-content: space-around;
  530. .van-button {
  531. width: 40%;
  532. height: 100%;
  533. max-width: 40%;
  534. min-width: 40%;
  535. }
  536. }
  537. }
  538. }
  539. }
  540. </style>