RepairMaintenance.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  1. <template>
  2. <div class='equipment-page'>
  3. <!-- 搜索框 -->
  4. <div class='equipment-search-container'>
  5. <van-search class='equipment-search' v-model='keyword' placeholder='请输入重要事项记录' @search='onSearch' />
  6. <!-- TODO: 空状态 自定义图标 -->
  7. <!-- <template #action>
  8. <div class='search' @click='onSearch'>搜索</div>
  9. </template>-->
  10. <!-- </van-search> -->
  11. </div>
  12. <!-- 维保列表 -->
  13. <div class='equipment-list' v-if='list.length'>
  14. <!-- 维保 -->
  15. <div class='container-1' v-for="(data, index) in list" :key="data.wb_gzglid + index">
  16. <div class='date'>
  17. <div class='report-date'>
  18. <span>填报日期:</span>
  19. <span>{{data.reportdate | formatDate}}</span>
  20. </div>
  21. <div class='acceptance-date'>
  22. <span>验收日期:</span>
  23. <span>{{data.sjjssj | formatDate}}</span>
  24. </div>
  25. </div>
  26. <div class='detail'>{{data.matters || '--'}}</div>
  27. <ul class='card'>
  28. <!-- <li class='title'>更换配件</li> -->
  29. <li class='title'>{{data.description || '--'}}</li>
  30. <li class='name-model'>配件名称型号:{{data.model||'--'}}</li>
  31. <!-- <li class='cost'>费用出处:重点设备维修保养资金</li> -->
  32. <li class='cost'>费用出处:{{data.source ||'--'}}</li>
  33. <li class='num-amount'>
  34. <span>数量: {{data.sl || '--'}}个</span>
  35. <span>金额: {{data.cost ||'--'}}万元</span>
  36. </li>
  37. </ul>
  38. <div class='bottom'>
  39. <div class='photo' @click='showPhoto(data)'>现场照片: {{data.glsmsImage?data.glsmsImage.length:'--'}}张</div>
  40. <div class='task-No' @click='showTaskInfo(data)'>任务编号: {{data.wb_gzglid || '--'}}</div>
  41. </div>
  42. </div>
  43. </div>
  44. <!-- 无数据 -->
  45. <van-empty class='m-empty' v-if='!list.length' description='暂无数据'>
  46. <template #image>
  47. <img class='no-data' src='../../assets/images/search_null.png' alt />
  48. </template>
  49. </van-empty>
  50. <!-- 现场照片预览 -->
  51. <ImagePreview class='update-img-preview' :key='imgKey' :visible.sync='showImgPreview' :imgList='imgList' />
  52. <!-- 任务信息 -->
  53. <div class='task-info-container' v-show='showTask'>
  54. <van-nav-bar :title='taskText+"信息"' left-arrow @click-left='showTask = false' />
  55. <ul class='task-info'>
  56. <li>
  57. <span class='name'>{{taskText}}编号:</span>
  58. <span class='data'>{{taskData.No}}</span>
  59. </li>
  60. <li>
  61. <span class='name'>{{taskText}}状态:</span>
  62. <span class='data'>{{taskData.status}}</span>
  63. </li>
  64. <li>
  65. <span class='name'>{{taskText}}描述:</span>
  66. <span class='data'>{{taskData.description}}</span>
  67. </li>
  68. <li>
  69. <span class='name'>填报人:</span>
  70. <span class='data'>{{taskData.reporter}}</span>
  71. </li>
  72. <li>
  73. <span class='name'>联系电话:</span>
  74. <span class='data'>{{taskData.phone}}</span>
  75. </li>
  76. <li>
  77. <span class='name'>填报时间:</span>
  78. <span class='data'>{{taskData.reportDate | formatDate}}</span>
  79. </li>
  80. <li>
  81. <span class='name'>验收时间:</span>
  82. <span class='data'>{{taskData.acceptanceDate | formatDate}}</span>
  83. </li>
  84. </ul>
  85. </div>
  86. </div>
  87. </template>
  88. <script>
  89. /**
  90. * 设备页面(正常/或者维修或维保)
  91. * 点击设备卡片,跳转到改页面
  92. *
  93. */
  94. import Vue from 'vue'
  95. import { Search, Popup, Button, Empty } from 'vant'
  96. Vue.use(Search).use(Popup).use(Button).use(Empty)
  97. import { mapGetters } from 'vuex'
  98. import ImagePreview from '@/components/ImagePreview'
  99. import moment from 'moment'
  100. export default {
  101. name: 'RepairMaintenance',
  102. props: {
  103. type: {
  104. type: String,
  105. default: 'maintenance', //默认维保
  106. },
  107. list: {
  108. type: Array,
  109. default: () => {
  110. return []
  111. },
  112. },
  113. },
  114. data() {
  115. return {
  116. keyword: '',
  117. showTask: false, //是否展示工单/任务信息 页面
  118. showImgPreview: false, //是否展示图片预览
  119. imgList: [], //图片数组
  120. imgKey: `img${new Date().getTime()}`,
  121. taskText: '', //工单,任务信息 页面title
  122. taskData: {
  123. No: '--',
  124. status: '--',
  125. description: '--',
  126. reporter: '--',
  127. phone: '--',
  128. reportDate: '--',
  129. acceptanceDate: '--',
  130. },
  131. }
  132. },
  133. computed: {
  134. ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
  135. },
  136. components: { ImagePreview },
  137. created() {
  138. },
  139. beforeMount() { },
  140. mounted() { },
  141. filters: {
  142. formatDate(value) {
  143. if (!value) return '--'
  144. return moment(value).format('YYYY-MM-DD')
  145. }
  146. },
  147. methods: {
  148. /**
  149. * 搜索
  150. */
  151. onSearch() {
  152. this.$emit("onSearch", this.keyword)
  153. },
  154. // 点击任务编号,显示任务信息
  155. showTaskInfo(data) {
  156. if (this.type === "maintenance") {
  157. this.taskText = '任务'
  158. } else {
  159. this.taskText = '工单'
  160. }
  161. // 维保
  162. this.taskData = {
  163. No: data.wb_gzglid || '--', //任务编号
  164. status: data.status || '--', //状态
  165. description: data.description || '--', //描述
  166. reporter: data.reportedby || '--', //填报人
  167. phone: data.phone || '--', //联系电话 // TODO: 联系电话
  168. reportDate: data.reportdate, //填报时间
  169. acceptanceDate: data.sjjssj, //验收时间
  170. }
  171. if (data.wb_gzglid || data.wonum) {
  172. this.showTask = true
  173. }
  174. },
  175. // 显示图片预览弹窗
  176. showPhoto(data) {
  177. // 图片处理
  178. this.imgList = []
  179. if (data?.glsmsImage?.length) {
  180. data.glsmsImage.map((item) => {
  181. this.imgList.push(item.url)
  182. })
  183. }
  184. this.imgKey = `img${new Date().getTime()}`
  185. this.$nextTick(() => {
  186. if (this.imgList?.length) {
  187. this.showImgPreview = true
  188. }
  189. })
  190. },
  191. },
  192. }
  193. </script>
  194. <style lang='less' scoped>
  195. .equipment-page {
  196. width: 100%;
  197. height: 100%;
  198. background-color: #f5f6f7;
  199. // 搜索
  200. .equipment-search-container {
  201. width: 100%;
  202. height: 55px;
  203. // background-color: #fff;
  204. text-align: center;
  205. .equipment-search {
  206. width: 80%;
  207. margin: 0 auto;
  208. background: none;
  209. }
  210. .van-search__content {
  211. background: #fff;
  212. border-radius: 50px;
  213. }
  214. }
  215. // 主要维保
  216. .equipment-list {
  217. width: 100%;
  218. min-height: 1px;
  219. max-height: calc(100% - 55px);
  220. overflow: auto;
  221. font-size: 14px;
  222. font-weight: 400;
  223. color: #333333;
  224. .container-1 {
  225. padding: 15px;
  226. margin-bottom: 10px;
  227. background-color: #fff;
  228. }
  229. // 维修/维保
  230. .container-1 {
  231. .date {
  232. width: 100%;
  233. height: 17px;
  234. display: flex;
  235. justify-content: space-between;
  236. margin: 5px 0 10px 0;
  237. font-size: 12px;
  238. font-weight: 400;
  239. color: #666666;
  240. line-height: 17px;
  241. }
  242. .detail {
  243. width: 100%;
  244. height: auto;
  245. margin: 10px 0;
  246. font-size: 16px;
  247. font-weight: 600;
  248. color: #333333;
  249. line-height: 20px;
  250. }
  251. .card {
  252. width: 100%;
  253. height: auto;
  254. padding: 8px 16px;
  255. background: #eff0f1;
  256. border-radius: 4px;
  257. color: #666666;
  258. font-size: 14px;
  259. .title {
  260. height: 20px;
  261. font-size: 14px;
  262. font-weight: 500;
  263. color: #333333;
  264. line-height: 20px;
  265. margin-bottom: 8px;
  266. }
  267. .name-model,
  268. .cost,
  269. .num-amount {
  270. margin-top: 4px;
  271. }
  272. .num-amount {
  273. display: flex;
  274. justify-content: space-between;
  275. }
  276. }
  277. .bottom {
  278. width: 100%;
  279. height: 17px;
  280. display: flex;
  281. justify-content: space-between;
  282. margin: 5px 0 10px 0;
  283. color: #025baa;
  284. line-height: 17px;
  285. font-size: 14px;
  286. font-weight: 400;
  287. color: #025baa;
  288. margin-top: 20px;
  289. }
  290. }
  291. }
  292. // 空状态
  293. .m-empty {
  294. position: fixed;
  295. top: 0;
  296. left: 0;
  297. width: 100%;
  298. height: 100%;
  299. display: flex;
  300. align-items: center;
  301. /deep/ .van-empty__image {
  302. display: flex;
  303. justify-content: center;
  304. align-items: flex-end;
  305. img {
  306. width: auto;
  307. height: auto;
  308. }
  309. }
  310. }
  311. // 全屏的任务信息
  312. .task-info-container {
  313. width: 100%;
  314. height: 100%;
  315. position: fixed;
  316. top: 0;
  317. left: 0;
  318. z-index: 1000;
  319. background-color: #fff;
  320. .task-info {
  321. width: 100%;
  322. padding: 15px;
  323. li {
  324. display: flex;
  325. justify-content: flex-start;
  326. line-height: 20px;
  327. font-size: 14px;
  328. margin-bottom: 12px;
  329. .name {
  330. color: #666666;
  331. width: 70px;
  332. height: auto;
  333. }
  334. .data {
  335. flex: 1;
  336. height: auto;
  337. color: #333333;
  338. }
  339. }
  340. }
  341. }
  342. }
  343. </style>