MainEquipment.vue 14 KB

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