OtherMatters.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678
  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" :class="item.text === '自定义'?'self-btn':''" v-for="(item, index) in fillinList" :key="index">
  79. <van-button class="m-btn" :class="item.active" @click="changeFillinDate(item)">{{ item.text }}</van-button>
  80. </div>
  81. </div>
  82. </div>
  83. <div class="divider"></div>
  84. <!-- 记录日期 -->
  85. <div class="sbss">
  86. <h1 class="title">记录日期</h1>
  87. <div class="system-btn-container">
  88. <div class="system-btn" :class="item.text === '自定义'?'self-btn':''" v-for="(item, index) in acceptanceList" :key="index">
  89. <van-button class="m-btn" :class="item.active" @click="changeAcceptanceDate(item)">{{ item.text }}</van-button>
  90. </div>
  91. </div>
  92. </div>
  93. <!-- <div class="divider"></div> -->
  94. <div class="footer">
  95. <van-button size="large" color="#025BAA" plain type="info" @click="reset">重置</van-button>
  96. <van-button size="large" color="#025BAA" type="info" @click="confirm">确定</van-button>
  97. </div>
  98. </div>
  99. </van-popup>
  100. <van-calendar color="#025baa" v-model="showHandleDate" :min-date="minDate" type="range" @confirm="onConfirmHandleDate" />
  101. <van-calendar color="#025baa" v-model="showCreateDate" :min-date="minDate" type="range" @confirm="onConfirmCreateDate" />
  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, Calendar } 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).use(Calendar);
  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: "15天", value: 1, active: "" },
  140. { text: "30天", value: 2, active: "" },
  141. { text: "3个月", value: 3, active: "" },
  142. { text: "6个月", value: 4, active: "" },
  143. { text: "1年", value: 5, active: "" },
  144. { text: "自定义", value: 6, active: "" },
  145. ],
  146. acceptanceList: [
  147. { text: "全部", value: 0, active: "active" },
  148. { text: "15天", value: 1, active: "" },
  149. { text: "30天", value: 2, active: "" },
  150. { text: "3个月", value: 3, active: "" },
  151. { text: "6个月", value: 4, active: "" },
  152. { text: "1年", value: 5, active: "" },
  153. { text: "自定义", value: 6, active: "" },
  154. ],
  155. minDate: new Date(1988, 0, 1),
  156. fillinDate: 0,
  157. acceptanceDate: 0,
  158. showHandleDate: false,
  159. showCreateDate: false,
  160. handleDate: "",
  161. CreateDate: "",
  162. };
  163. },
  164. props: {},
  165. beforeMount() { },
  166. created() {},
  167. mounted() {
  168. this.getData();
  169. },
  170. methods: {
  171. backPage() {
  172. if (this.$route.query.first) {
  173. this.$router.push({ path: "/" });
  174. } else {
  175. this.$router.go(-1);
  176. }
  177. },
  178. /**
  179. * 点击右侧筛选
  180. */
  181. handleRightClick() {
  182. this.showPopup = true;
  183. },
  184. // 处理getParams参数
  185. handleGetParams() {
  186. let getParams = {
  187. plazaId: this.plazaId,
  188. smsxt: this.smsxt,
  189. page: this.page,
  190. size: this.size,
  191. }
  192. // 查询关键字(记录事项位置内容)
  193. if (this.keyword) {
  194. getParams.keyword = `${this.keyword}:jlsx,location,content`;
  195. }
  196. //处理日期
  197. switch (this.fillinDate) {
  198. // 15天
  199. case 1:
  200. getParams.handledateStartDate = moment() .subtract(15, "days").format("YYYYMMDD000000");
  201. getParams.handledateEndDate = moment().format("YYYYMMDD000000");
  202. break;
  203. // 30天
  204. case 2:
  205. getParams.handledateStartDate = moment() .subtract(30, "days").format("YYYYMMDD000000");
  206. getParams.handledateEndDate = moment().format("YYYYMMDD000000");
  207. break;
  208. // 3个月
  209. case 3:
  210. getParams.handledateStartDate = moment() .subtract(3, "months").format("YYYYMMDD000000");
  211. getParams.handledateEndDate = moment().format("YYYYMMDD000000");
  212. break;
  213. // 6个月
  214. case 4:
  215. getParams.handledateStartDate = moment() .subtract(3, "months").format("YYYYMMDD000000");
  216. getParams.handledateEndDate = moment().format("YYYYMMDD000000");
  217. break;
  218. // 一年
  219. case 5:
  220. getParams.handledateStartDate = moment() .subtract(1, "years").format("YYYYMMDD000000");
  221. getParams.handledateEndDate = moment().format("YYYYMMDD000000");
  222. break;
  223. // 自定义
  224. case 6:
  225. getParams.handledateStartDate = moment() .subtract(1, "years").format("YYYYMMDD000000");
  226. getParams.handledateEndDate = moment().format("YYYYMMDD000000");
  227. break;
  228. // 默认 全部
  229. default:
  230. break;
  231. }
  232. //记录日期
  233. switch (this.acceptanceDate) {
  234. // 15天
  235. case 1:
  236. getParams.createdateStartDate = moment().subtract(15, "days").format("YYYYMMDD000000");
  237. getParams.createdateEndDate = moment().format("YYYYMMDD000000");
  238. break;
  239. // 30天
  240. case 2:
  241. getParams.createdateStartDate = moment().subtract(30, "days").format("YYYYMMDD000000");
  242. getParams.createdateEndDate = moment().format("YYYYMMDD000000");
  243. break;
  244. // 3个月
  245. case 3:
  246. getParams.createdateStartDate = moment().subtract(3, "months").format("YYYYMMDD000000");
  247. getParams.createdateEndDate = moment().format("YYYYMMDD000000");
  248. break;
  249. // 6个月
  250. case 4:
  251. getParams.createdateStartDate = moment().subtract(6, "months").format("YYYYMMDD000000");
  252. getParams.createdateEndDate = moment().format("YYYYMMDD000000");
  253. break;
  254. // 一年
  255. case 5:
  256. getParams.createdateStartDate = moment().subtract(1, "years").format("YYYYMMDD000000");
  257. getParams.createdateEndDate = moment().format("YYYYMMDD000000");
  258. break;
  259. // 一年
  260. case 6:
  261. getParams.createdateStartDate = moment().subtract(1, "years").format("YYYYMMDD000000");
  262. getParams.createdateEndDate = moment().format("YYYYMMDD000000");
  263. break;
  264. // 默认 全部
  265. default:
  266. break;
  267. }
  268. return getParams
  269. },
  270. // 查询主要设备清单
  271. getData() {
  272. this.page = 1;
  273. this.dataList = [];
  274. this.finished = false;
  275. let getParams = this.handleGetParams();
  276. getUpdateDetail5({ getParams }).then((res) => {
  277. if (res.result == "success" && res.data) {
  278. this.dataList = res.data;
  279. }
  280. // 数据全部加载完成
  281. if (this.dataList.length >= res.count) {
  282. this.finished = true;
  283. }
  284. });
  285. },
  286. onLoad() {
  287. // 异步更新数据
  288. this.page++;
  289. let getParams = this.handleGetParams();
  290. getUpdateDetail5({ getParams }).then((res) => {
  291. if (res.result == "success" && res.data) {
  292. this.dataList = this.dataList.concat(res.data);
  293. }
  294. // 加载状态结束
  295. this.loading = false;
  296. // 数据全部加载完成
  297. if (this.dataList.length >= res.count) {
  298. this.finished = true;
  299. }
  300. });
  301. },
  302. // 修改填报日期
  303. changeFillinDate(data) {
  304. this.fillinDate = data.value;
  305. this.fillinList.map((item) => {
  306. item.active = "";
  307. if (item.value === data.value) {
  308. item.active = "active";
  309. }
  310. });
  311. if(data.text === '自定义') {
  312. this.showHandleDate = true;
  313. }
  314. },
  315. // 修改验收日期
  316. changeAcceptanceDate(data) {
  317. this.acceptanceDate = data.value;
  318. this.acceptanceList.map((item) => {
  319. item.active = "";
  320. if (item.value === data.value) {
  321. item.active = "active";
  322. }
  323. });
  324. if(data.text === '自定义') {
  325. this.showCreateDate = true;
  326. }
  327. },
  328. formatDate(date) {
  329. return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
  330. },
  331. // 自定义填报日期
  332. onConfirmHandleDate(date) {
  333. console.log(date)
  334. const [start, end] = date;
  335. this.showHandleDate = false;
  336. },
  337. // 自定义验收日期
  338. onConfirmCreateDate(date) {
  339. console.log(date)
  340. const [start, end] = date;
  341. console.log()
  342. this.showCreateDate = false;
  343. },
  344. /**
  345. * 重置
  346. */
  347. reset() {
  348. this.fillinList.map((item, index) => {
  349. item.active = "";
  350. if (index === 0) {
  351. item.active = "active";
  352. this.fillinDate = item.value;
  353. }
  354. });
  355. this.acceptanceList.map((item, index) => {
  356. item.active = "";
  357. if (index === 0) {
  358. item.active = "active";
  359. this.acceptanceDate = item.value;
  360. }
  361. });
  362. this.getData();
  363. this.showPopup = false;
  364. },
  365. /**
  366. * 弹窗确认
  367. */
  368. confirm() {
  369. this.getData();
  370. this.showPopup = false;
  371. },
  372. }
  373. };
  374. </script>
  375. <style lang='less' scoped>
  376. .asset-detail {
  377. width: 100%;
  378. height: 100%;
  379. .asset-information {
  380. height: calc(100% - 46px);
  381. background: #f5f6f7;
  382. overflow-y: auto;
  383. .equipment-page {
  384. width: 100%;
  385. height: 100%;
  386. background-color: #f5f6f7;
  387. // 搜索
  388. .equipment-search-container {
  389. width: 100%;
  390. height: 55px;
  391. // background-color: #fff;
  392. text-align: center;
  393. .equipment-search {
  394. width: 80%;
  395. margin: 0 auto;
  396. background: none;
  397. }
  398. .van-search__content {
  399. background: #fff;
  400. border-radius: 50px;
  401. }
  402. }
  403. // 主要维保
  404. .equipment-list {
  405. width: 100%;
  406. min-height: 1px;
  407. max-height: calc(100% - 55px);
  408. overflow: auto;
  409. font-size: 14px;
  410. font-weight: 400;
  411. color: #333333;
  412. background-color: #ffffff;
  413. .equipment {
  414. width: 100%;
  415. position: relative;
  416. padding: 16px 10px 0;
  417. .title {
  418. // height: 44px;
  419. font-size: 16px;
  420. font-weight: 500;
  421. color: #333333;
  422. line-height: 22px;
  423. margin-bottom: 12px;
  424. }
  425. .assetnum-attribution {
  426. margin-bottom: 8px;
  427. display: flex;
  428. width: 100%;
  429. height: 20px;
  430. line-height: 20px;
  431. justify-content: space-between;
  432. .assetnum,
  433. .attribution {
  434. display: flex;
  435. }
  436. }
  437. .equipment-item {
  438. display: flex;
  439. margin-bottom: 8px;
  440. width: 100%;
  441. line-height: 20px;
  442. }
  443. .floor-status {
  444. margin: 12px 0 16px;
  445. display: flex;
  446. justify-content: space-between;
  447. width: 100%;
  448. height: 20px;
  449. line-height: 20px;
  450. .floor {
  451. display: flex;
  452. height: 20px;
  453. line-height: 20px;
  454. .label {
  455. display: flex;
  456. align-items: center;
  457. span {
  458. display: inline-block;
  459. margin-left: 5px;
  460. }
  461. }
  462. }
  463. .status {
  464. background: #d9f5d6;
  465. width: 44px;
  466. height: 24px;
  467. line-height: 24px;
  468. text-align: center;
  469. font-size: 14px;
  470. font-weight: 400;
  471. }
  472. .run {
  473. background: #d9f5d6;
  474. color: #237b19;
  475. }
  476. // 维修
  477. .wx {
  478. background: #fbeceb;
  479. color: #d83931;
  480. }
  481. // 维保
  482. .wb {
  483. background: #e6f3fc;
  484. color: #0481e1;
  485. }
  486. }
  487. .label {
  488. color: #666;
  489. font-size: 14px;
  490. }
  491. .value {
  492. flex: 1;
  493. color: #333;
  494. font-size: 14px;
  495. }
  496. // 底部1px边框
  497. .divider {
  498. width: 100%;
  499. height: 1px;
  500. margin: 0 auto;
  501. background: #e6e6e6;
  502. }
  503. }
  504. }
  505. // 空状态
  506. .m-empty {
  507. // position: fixed;
  508. // top: 0;
  509. // left: 0;
  510. // width: 100%;
  511. // height: 100%;
  512. display: flex;
  513. align-items: center;
  514. /deep/ .van-empty__image {
  515. display: flex;
  516. justify-content: center;
  517. align-items: flex-end;
  518. img {
  519. width: auto;
  520. height: auto;
  521. }
  522. }
  523. }
  524. }
  525. }
  526. .other-tabs {
  527. /deep/ .van-tab__text {
  528. font-size: 16px;
  529. }
  530. /deep/ .van-tabs__wrap {
  531. height: 45px;
  532. border-bottom: 1px solid #eaeaea;
  533. .van-tabs__nav--line {
  534. box-sizing: content-box;
  535. height: 100%;
  536. width: 90%;
  537. margin: 0 auto;
  538. }
  539. }
  540. }
  541. // 筛选弹窗
  542. .m-popup-container {
  543. width: 80%;
  544. height: 100%;
  545. padding: 55px 20px 10px 20px;
  546. .m-popup {
  547. width: 100%;
  548. height: calc(100% - 81px);
  549. display: flex;
  550. flex-direction: column;
  551. .title {
  552. font-size: 16px;
  553. font-weight: 500;
  554. color: #333333;
  555. margin-bottom: 15px;
  556. }
  557. // 专业
  558. .system {
  559. width: 100%;
  560. height: auto;
  561. // 专业系统按钮
  562. .system-btn-container {
  563. display: flex;
  564. width: 100%;
  565. flex-wrap: wrap;
  566. flex-flow: wrap;
  567. .system-btn {
  568. width: 50% !important;
  569. min-width: 50% !important;
  570. max-width: 50% !important;
  571. height: 40px;
  572. box-sizing: border-box;
  573. padding: 10px 10px 10px 0;
  574. .m-btn {
  575. width: 100%;
  576. height: 32px !important;
  577. text-align: center;
  578. background: #eff0f1;
  579. border-radius: 2px;
  580. }
  581. }
  582. }
  583. .active {
  584. background-color: #025baa !important;
  585. color: #fff;
  586. }
  587. }
  588. // 电井类型
  589. .sbss {
  590. display: flex;
  591. flex-direction: column;
  592. overflow: auto;
  593. .title {
  594. width: 100%;
  595. height: 25px;
  596. }
  597. .system-btn-container {
  598. display: flex;
  599. width: 100%;
  600. flex-wrap: wrap;
  601. flex-flow: wrap;
  602. .system-btn {
  603. width: 33% !important;
  604. min-width: 33% !important;
  605. max-width: 33% !important;
  606. height: 50px;
  607. box-sizing: border-box;
  608. padding: 5px 10px 5px 0;
  609. .m-btn {
  610. width: 100%;
  611. height: 32px !important;
  612. text-align: center;
  613. background: #eff0f1;
  614. border-radius: 2px;
  615. padding: 0 !important;
  616. }
  617. }
  618. .self-btn {
  619. width: 100% !important;
  620. min-width: 100% !important;
  621. max-width: 100% !important;
  622. height: 50px;
  623. box-sizing: border-box;
  624. padding: 5px 10px 5px 0;
  625. }
  626. .m-btn {
  627. width: 100%;
  628. height: 32px !important;
  629. text-align: center;
  630. background: #eff0f1;
  631. border-radius: 2px;
  632. padding: 0 !important;
  633. }
  634. }
  635. .active {
  636. background-color: #025baa !important;
  637. color: #fff;
  638. }
  639. .load-more {
  640. width: 80px;
  641. height: 25px;
  642. line-height: 25px;
  643. text-align: center;
  644. margin: 0 auto;
  645. color: #025baa;
  646. background: #e5eef6;
  647. }
  648. }
  649. .divider {
  650. border-bottom: 1px solid #e6e6e6;
  651. margin: 20px 0;
  652. }
  653. .footer {
  654. position: absolute;
  655. bottom: 30px;
  656. right: 0;
  657. width: 100%;
  658. height: 35px;
  659. display: flex;
  660. justify-content: space-around;
  661. .van-button {
  662. width: 40%;
  663. height: 100%;
  664. max-width: 40%;
  665. min-width: 40%;
  666. }
  667. }
  668. }
  669. }
  670. }
  671. </style>