OtherMatters.vue 15 KB

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