123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- <template>
- <div class="search-box">
- <van-search v-model="keyWord" show-action shape="round" placeholder="请输入搜索内容" @search="onSearch" @cancel="onCancel"
- @input="onInput" />
- <div class="quick-entry">
- <p class="title-style">快捷入口</p>
- <div class="quick-entry-list">
- <p @click="handleClickEngineRoomPicture" class="quick-entry-item">机房平面布置图</p>
- <p @click="handleClickLowVoltageCabinet" class="quick-entry-item">配电室低压出线柜及出线明细</p>
- <p @click="handleClickElectricWell" class="quick-entry-item">电井(间)控制商铺范围</p>
- <p class="quick-entry-item">更多设备</p>
- </div>
- </div>
- <div v-if="equipList.length" class="equip-box">
- <p class="equip-box-interval"></p>
- <p class="title-style equip-box-title">设备</p>
- <div class="equip-box-list">
- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
- <van-cell v-for="(item, index) in equipList" :key="index" @click="handleClickDetail(item)" :title="item.sbjc" />
- </van-list>
- </div>
- </div>
- <div v-else-if="!equipList.length && !flag" class="equip-null">
- <div class="equip-null-img">
- <img src="../assets/images/search_null.png" alt>
- </div>
- <p class="equip-null-text">搜索结果为空</p>
- </div>
- </div>
- </template>
- <script>
- import Vue from 'vue'
- import { mapGetters } from 'vuex'
- import { Search, List, Cell } from 'vant'
- import { queryEquipmentList } from '@/api/equipmentList.js'
- Vue.use(Search).use(List).use(Cell);
- export default {
- name: 'GlobalSearch',
- props: {},
- components: {},
- computed: {
- ...mapGetters(['plazaId']),
- },
- data() {
- return {
- keyWord: "", //搜索关键字
- flag: true, //是否触发搜索标记
- loading: false,
- finished: false,
- refreshing: false,
- equipList: [], //设备列表
- page: 1, //当前页码
- size: 10, //每页条数
- }
- },
- props: {},
- beforeMount() { },
- mounted() {
- },
- methods: {
- // 跳转机房平面布置图
- handleClickEngineRoomPicture() {
- this.$router.push({ name: 'EngineRoomPicture', params: {type: "all"} })
- },
- // 配电室低压出线柜及出线明细
- handleClickLowVoltageCabinet() {
- this.$router.push({ name: 'LowVoltageCabinet', params: {type: "all"} })
- },
- // 跳转电井间控制商铺范围
- handleClickElectricWell() {
- this.$router.push({ name: 'ElectricWell', params: { type: "all"} })
- },
- // 跳转设备详情
- handleClickDetail(item) {
- if (item.assetid) {
- this.$router.push({ path: '/assetDetail', query: { assetid: item.assetid} })
- } else {
- console.error("缺少assetid!")
- }
- },
- // 全局搜索事件
- onSearch() {
- this.page = 1;
- this.equipList = [];
- this.finished = false;
- let data = {
- plazaId: this.plazaId,
- page: this.page,
- size: this.size,
- },
- postParams = {}
- if (this.keyWord) {
- data.keyword = `${this.keyWord}:sbjc,assetnum;`;
- queryEquipmentList({ data, postParams }).then(res => {
- console.log(res)
- this.flag = false;
- if (res.data.result == "success" && res.data.data) {
- this.equipList = res.data.data;
- }
- // 数据全部加载完成
- if (this.equipList.length >= res.data.count) {
- this.finished = true;
- }
- })
- }
- },
- // 修改输入内容
- onInput() {
- this.equipList = [];
- this.flag = true;
- },
- // 取消搜索
- onCancel() {
- this.$router.go(-1)
- },
- onLoad() {
- // 异步更新数据
- this.page++;
- let data = {
- plazaId: this.plazaId,
- page: this.page,
- size: this.size,
- },
- postParams = {}
- if (this.keyWord) {
- data.keyword = `${this.keyWord}:sbjc,assetnum;`;
- queryEquipmentList({ data, postParams }).then(res => {
- if (res.data.result == "success" && res.data.data) {
- this.equipList = this.equipList.concat(res.data.data);
- }
- // 加载状态结束
- this.loading = false;
- // 数据全部加载完成
- if (this.equipList.length >= res.data.count) {
- this.finished = true;
- }
- })
- }
- },
- },
- watch: {
- },
- }
- </script>
- <style lang='less' scoped>
- .search-box {
- display: flex;
- height: 100%;
- flex-direction: column;
- overflow: hidden;
- .title-style {
- color: #979797;
- font-size: 12px;
- }
- .quick-entry {
- padding: 15px 16px;
- .quick-entry-list {
- display: flex;
- flex-wrap: wrap;
- .quick-entry-item {
- font-size: 14px;
- height: 24px;
- line-height: 24px;
- padding: 0 8px;
- margin-right: 12px;
- margin-top: 12px;
- color: #666666;
- background: #eff0f1;
- border-radius: 2px;
- }
- }
- }
- .equip-box {
- display: flex;
- flex-direction: column;
- flex: 1;
- height: calc(100% - 172px);
- .equip-box-interval {
- height: 10px;
- background: #f5f6f7;
- }
- .equip-box-title {
- margin: 15px 16px;
- }
- .equip-box-list {
- flex: 1;
- height: calc(100% - 56px);
- overflow-y: auto;
- }
- }
- .equip-null {
- flex: 1;
- padding: 20px 16px;
- .equip-null-img {
- width: 78px;
- margin: 63px auto 10px;
- }
- .equip-null-text {
- font-size: 14px;
- color: #262626;
- text-align: center;
- }
- }
- }
- /deep/ .van-search__action {
- color: #025baa;
- }
- </style>
|