GlobalSearch.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <template>
  2. <div class="search-box">
  3. <van-search v-model="keyWord" show-action shape="round" placeholder="请输入搜索内容" @search="onSearch" @cancel="onCancel"
  4. @input="onInput" />
  5. <div class="quick-entry">
  6. <p class="title-style">快捷入口</p>
  7. <div class="quick-entry-list">
  8. <p @click="handleClickEngineRoomPicture" class="quick-entry-item">机房平面布置图</p>
  9. <p @click="handleClickLowVoltageCabinet" class="quick-entry-item">配电室低压出线柜及出线明细</p>
  10. <p @click="handleClickElectricWell" class="quick-entry-item">电井(间)控制商铺范围</p>
  11. <p class="quick-entry-item">更多设备</p>
  12. </div>
  13. </div>
  14. <div v-if="equipList.length" class="equip-box">
  15. <p class="equip-box-interval"></p>
  16. <p class="title-style equip-box-title">设备</p>
  17. <div class="equip-box-list">
  18. <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
  19. <van-cell v-for="(item, index) in equipList" :key="index" @click="handleClickDetail(item)" :title="item.sbjc" />
  20. </van-list>
  21. </div>
  22. </div>
  23. <div v-else-if="!equipList.length && !flag" class="equip-null">
  24. <div class="equip-null-img">
  25. <img src="../assets/images/search_null.png" alt>
  26. </div>
  27. <p class="equip-null-text">搜索结果为空</p>
  28. </div>
  29. </div>
  30. </template>
  31. <script>
  32. import Vue from 'vue'
  33. import { mapGetters } from 'vuex'
  34. import { Search, List, Cell } from 'vant'
  35. import { queryEquipmentList } from '@/api/equipmentList.js'
  36. Vue.use(Search).use(List).use(Cell);
  37. export default {
  38. name: 'GlobalSearch',
  39. props: {},
  40. components: {},
  41. computed: {
  42. ...mapGetters(['plazaId']),
  43. },
  44. data() {
  45. return {
  46. keyWord: "", //搜索关键字
  47. flag: true, //是否触发搜索标记
  48. loading: false,
  49. finished: false,
  50. refreshing: false,
  51. equipList: [], //设备列表
  52. page: 1, //当前页码
  53. size: 10, //每页条数
  54. }
  55. },
  56. props: {},
  57. beforeMount() { },
  58. mounted() {
  59. },
  60. methods: {
  61. // 跳转机房平面布置图
  62. handleClickEngineRoomPicture() {
  63. this.$router.push({ name: 'EngineRoomPicture', params: {type: "all"} })
  64. },
  65. // 配电室低压出线柜及出线明细
  66. handleClickLowVoltageCabinet() {
  67. this.$router.push({ name: 'LowVoltageCabinet', params: {type: "all"} })
  68. },
  69. // 跳转电井间控制商铺范围
  70. handleClickElectricWell() {
  71. this.$router.push({ name: 'ElectricWell', params: { type: "all"} })
  72. },
  73. // 跳转设备详情
  74. handleClickDetail(item) {
  75. if (item.assetid) {
  76. this.$router.push({ path: '/assetDetail', query: { assetid: item.assetid} })
  77. } else {
  78. console.error("缺少assetid!")
  79. }
  80. },
  81. // 全局搜索事件
  82. onSearch() {
  83. this.page = 1;
  84. this.equipList = [];
  85. this.finished = false;
  86. let data = {
  87. plazaId: this.plazaId,
  88. page: this.page,
  89. size: this.size,
  90. },
  91. postParams = {}
  92. if (this.keyWord) {
  93. data.keyword = `${this.keyWord}:sbjc,assetnum;`;
  94. queryEquipmentList({ data, postParams }).then(res => {
  95. console.log(res)
  96. this.flag = false;
  97. if (res.data.result == "success" && res.data.data) {
  98. this.equipList = res.data.data;
  99. }
  100. // 数据全部加载完成
  101. if (this.equipList.length >= res.data.count) {
  102. this.finished = true;
  103. }
  104. })
  105. }
  106. },
  107. // 修改输入内容
  108. onInput() {
  109. this.equipList = [];
  110. this.flag = true;
  111. },
  112. // 取消搜索
  113. onCancel() {
  114. this.$router.go(-1)
  115. },
  116. onLoad() {
  117. // 异步更新数据
  118. this.page++;
  119. let data = {
  120. plazaId: this.plazaId,
  121. page: this.page,
  122. size: this.size,
  123. },
  124. postParams = {}
  125. if (this.keyWord) {
  126. data.keyword = `${this.keyWord}:sbjc,assetnum;`;
  127. queryEquipmentList({ data, postParams }).then(res => {
  128. if (res.data.result == "success" && res.data.data) {
  129. this.equipList = this.equipList.concat(res.data.data);
  130. }
  131. // 加载状态结束
  132. this.loading = false;
  133. // 数据全部加载完成
  134. if (this.equipList.length >= res.data.count) {
  135. this.finished = true;
  136. }
  137. })
  138. }
  139. },
  140. },
  141. watch: {
  142. },
  143. }
  144. </script>
  145. <style lang='less' scoped>
  146. .search-box {
  147. display: flex;
  148. height: 100%;
  149. flex-direction: column;
  150. overflow: hidden;
  151. .title-style {
  152. color: #979797;
  153. font-size: 12px;
  154. }
  155. .quick-entry {
  156. padding: 15px 16px;
  157. .quick-entry-list {
  158. display: flex;
  159. flex-wrap: wrap;
  160. .quick-entry-item {
  161. font-size: 14px;
  162. height: 24px;
  163. line-height: 24px;
  164. padding: 0 8px;
  165. margin-right: 12px;
  166. margin-top: 12px;
  167. color: #666666;
  168. background: #eff0f1;
  169. border-radius: 2px;
  170. }
  171. }
  172. }
  173. .equip-box {
  174. display: flex;
  175. flex-direction: column;
  176. flex: 1;
  177. height: calc(100% - 172px);
  178. .equip-box-interval {
  179. height: 10px;
  180. background: #f5f6f7;
  181. }
  182. .equip-box-title {
  183. margin: 15px 16px;
  184. }
  185. .equip-box-list {
  186. flex: 1;
  187. height: calc(100% - 56px);
  188. overflow-y: auto;
  189. }
  190. }
  191. .equip-null {
  192. flex: 1;
  193. padding: 20px 16px;
  194. .equip-null-img {
  195. width: 78px;
  196. margin: 63px auto 10px;
  197. }
  198. .equip-null-text {
  199. font-size: 14px;
  200. color: #262626;
  201. text-align: center;
  202. }
  203. }
  204. }
  205. /deep/ .van-search__action {
  206. color: #025baa;
  207. }
  208. </style>