OtherMatters.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680
  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: 100%;
  395. padding-left: 15px;
  396. padding-right: 15px;
  397. margin: 0 auto;
  398. background: none;
  399. }
  400. .van-search__content {
  401. background: #fff;
  402. border-radius: 50px;
  403. }
  404. }
  405. // 主要维保
  406. .equipment-list {
  407. width: 100%;
  408. min-height: 1px;
  409. max-height: calc(100% - 55px);
  410. overflow: auto;
  411. font-size: 14px;
  412. font-weight: 400;
  413. color: #333333;
  414. background-color: #ffffff;
  415. .equipment {
  416. width: 100%;
  417. position: relative;
  418. padding: 16px 10px 0;
  419. .title {
  420. // height: 44px;
  421. font-size: 16px;
  422. font-weight: 500;
  423. color: #333333;
  424. line-height: 22px;
  425. margin-bottom: 12px;
  426. }
  427. .assetnum-attribution {
  428. margin-bottom: 8px;
  429. display: flex;
  430. width: 100%;
  431. height: 20px;
  432. line-height: 20px;
  433. justify-content: space-between;
  434. .assetnum,
  435. .attribution {
  436. display: flex;
  437. }
  438. }
  439. .equipment-item {
  440. display: flex;
  441. margin-bottom: 8px;
  442. width: 100%;
  443. line-height: 20px;
  444. }
  445. .floor-status {
  446. margin: 12px 0 16px;
  447. display: flex;
  448. justify-content: space-between;
  449. width: 100%;
  450. height: 20px;
  451. line-height: 20px;
  452. .floor {
  453. display: flex;
  454. height: 20px;
  455. line-height: 20px;
  456. .label {
  457. display: flex;
  458. align-items: center;
  459. span {
  460. display: inline-block;
  461. margin-left: 5px;
  462. }
  463. }
  464. }
  465. .status {
  466. background: #d9f5d6;
  467. width: 44px;
  468. height: 24px;
  469. line-height: 24px;
  470. text-align: center;
  471. font-size: 14px;
  472. font-weight: 400;
  473. }
  474. .run {
  475. background: #d9f5d6;
  476. color: #237b19;
  477. }
  478. // 维修
  479. .wx {
  480. background: #fbeceb;
  481. color: #d83931;
  482. }
  483. // 维保
  484. .wb {
  485. background: #e6f3fc;
  486. color: #0481e1;
  487. }
  488. }
  489. .label {
  490. color: #666;
  491. font-size: 14px;
  492. }
  493. .value {
  494. flex: 1;
  495. color: #333;
  496. font-size: 14px;
  497. }
  498. // 底部1px边框
  499. .divider {
  500. width: 100%;
  501. height: 1px;
  502. margin: 0 auto;
  503. background: #e6e6e6;
  504. }
  505. }
  506. }
  507. // 空状态
  508. .m-empty {
  509. // position: fixed;
  510. // top: 0;
  511. // left: 0;
  512. // width: 100%;
  513. // height: 100%;
  514. display: flex;
  515. align-items: center;
  516. /deep/ .van-empty__image {
  517. display: flex;
  518. justify-content: center;
  519. align-items: flex-end;
  520. img {
  521. width: auto;
  522. height: auto;
  523. }
  524. }
  525. }
  526. }
  527. }
  528. .other-tabs {
  529. /deep/ .van-tab__text {
  530. font-size: 16px;
  531. }
  532. /deep/ .van-tabs__wrap {
  533. height: 45px;
  534. border-bottom: 1px solid #eaeaea;
  535. .van-tabs__nav--line {
  536. box-sizing: content-box;
  537. height: 100%;
  538. width: 90%;
  539. margin: 0 auto;
  540. }
  541. }
  542. }
  543. // 筛选弹窗
  544. .m-popup-container {
  545. width: 80%;
  546. height: 100%;
  547. padding: 55px 20px 10px 20px;
  548. .m-popup {
  549. width: 100%;
  550. height: calc(100% - 81px);
  551. display: flex;
  552. flex-direction: column;
  553. .title {
  554. font-size: 16px;
  555. font-weight: 500;
  556. color: #333333;
  557. margin-bottom: 15px;
  558. }
  559. // 专业
  560. .system {
  561. width: 100%;
  562. height: auto;
  563. // 专业系统按钮
  564. .system-btn-container {
  565. display: flex;
  566. width: 100%;
  567. flex-wrap: wrap;
  568. flex-flow: wrap;
  569. .system-btn {
  570. width: 50% !important;
  571. min-width: 50% !important;
  572. max-width: 50% !important;
  573. height: 40px;
  574. box-sizing: border-box;
  575. padding: 10px 10px 10px 0;
  576. .m-btn {
  577. width: 100%;
  578. height: 32px !important;
  579. text-align: center;
  580. background: #eff0f1;
  581. border-radius: 2px;
  582. }
  583. }
  584. }
  585. .active {
  586. background-color: #025baa !important;
  587. color: #fff;
  588. }
  589. }
  590. // 电井类型
  591. .sbss {
  592. display: flex;
  593. flex-direction: column;
  594. overflow: auto;
  595. .title {
  596. width: 100%;
  597. height: 25px;
  598. }
  599. .system-btn-container {
  600. display: flex;
  601. width: 100%;
  602. flex-wrap: wrap;
  603. flex-flow: wrap;
  604. .system-btn {
  605. width: 33% !important;
  606. min-width: 33% !important;
  607. max-width: 33% !important;
  608. height: 50px;
  609. box-sizing: border-box;
  610. padding: 5px 10px 5px 0;
  611. .m-btn {
  612. width: 100%;
  613. height: 32px !important;
  614. text-align: center;
  615. background: #eff0f1;
  616. border-radius: 2px;
  617. padding: 0 !important;
  618. }
  619. }
  620. .self-btn {
  621. width: 100% !important;
  622. min-width: 100% !important;
  623. max-width: 100% !important;
  624. height: 50px;
  625. box-sizing: border-box;
  626. padding: 5px 10px 5px 0;
  627. }
  628. .m-btn {
  629. width: 100%;
  630. height: 32px !important;
  631. text-align: center;
  632. background: #eff0f1;
  633. border-radius: 2px;
  634. padding: 0 !important;
  635. }
  636. }
  637. .active {
  638. background-color: #025baa !important;
  639. color: #fff;
  640. }
  641. .load-more {
  642. width: 80px;
  643. height: 25px;
  644. line-height: 25px;
  645. text-align: center;
  646. margin: 0 auto;
  647. color: #025baa;
  648. background: #e5eef6;
  649. }
  650. }
  651. .divider {
  652. border-bottom: 1px solid #e6e6e6;
  653. margin: 20px 0;
  654. }
  655. .footer {
  656. position: absolute;
  657. bottom: 30px;
  658. right: 0;
  659. width: 100%;
  660. height: 35px;
  661. display: flex;
  662. justify-content: space-around;
  663. .van-button {
  664. width: 40%;
  665. height: 100%;
  666. max-width: 40%;
  667. min-width: 40%;
  668. }
  669. }
  670. }
  671. }
  672. }
  673. </style>