搜索分页及返回数功能添加

陈泽平

2021-05-26 33f8b1658371b0bfab97f7834286d326b2e4fadc

搜索分页及返回数功能添加

 src/assets/css/map/map-panel-style.less

@@ -828,3 +828,10 @@
  padding: 5px;
  color: #f2f2f2;
}

/************搜索数据分页功能总数量样式添加************/
.page_total {
  text-align: right;
  margin: 5px 0;
  color: @color;
}

 src/components/panel/topicSearch/DischargeSearch.vue

@@ -39,6 +39,12 @@
                  <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span></el-radio>
                </el-radio-group> -->
                <!--              <el-form-item >-->
                <div class="page_total">
                    <p>共计
                        <span>{{total}}</span>
                        条记录
                    </p>
                </div>
                <div class="rightButtonSearch">
                    <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input>
                    <el-button class="el-icon-search" @click="handleSearch"></el-button>
@@ -128,6 +134,7 @@
      gdVisible: true,
      list: [],
      total: 0,
      pageSize: 10,
      inareaTypeOptions: [],
      enterpriseTypeOptions: [],
      enterpriseSubunitsTypeOptions: [],
@@ -168,6 +175,9 @@
  },
  props: ['title'],
  methods: {
    handlePage () {

    },
    flyto () {
      const pos = [39.90751504898071, 116.38927817344666]
      window.map.setView(pos, 15)

 src/components/panel/topicSearch/EnvRiskSearch.vue

@@ -37,6 +37,12 @@
        <el-radio-group v-model="form.type" class="levelOfRisk">
          <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span></el-radio>
        </el-radio-group>
        <div class="page_total">
          <p>共计
            <span>{{total}}</span>
            条记录
          </p>
        </div>
        <div class="rightButtonSearch">
          <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索">
          </el-input>

 src/components/panel/topicSearch/GasWasteSearch.vue

@@ -48,6 +48,12 @@
          <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}</span></el-radio>
        </el-radio-group>
        <!--              <el-form-item >-->
        <div class="page_total">
          <p>共计
            <span>{{total}}</span>
            条记录
          </p>
        </div>
        <div class="rightButtonSearch">
          <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索">
            <!-- <el-button slot="append" icon="el-icon-search" size="mini"></el-button>-->
@@ -109,6 +115,8 @@
      gdVisible: true,
      list: [],
      total: 0,
      // 分页
      pageSize: 10,
      inareaTypeOptions: [],
      enterpriseTypeOptions: [],
      enterpriseSubunitsTypeOptions: [],
@@ -130,6 +138,11 @@
    }
  },
  methods: {
    // 页面切换 分页功能
    handlePage (page) {
      // this.wfsHelper.setPage(page)
      this.handleSearch()
    },
    // 区域筛选
    areaType (val) {
      this.pipelineTypeOptions.forEach((itm) => {

 src/components/panel/topicSearch/SewersSearch.vue

@@ -27,6 +27,12 @@
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <div class="page_total">
                            <p>共计
                                <span>{{total}}</span>
                                条记录
                            </p>
                        </div>
                        <div class="rightButtonSearch">
                            <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input>
                            <el-button class="el-icon-search" @click="handleSearch"></el-button>

 src/components/panel/topicSearch/SoilGroundWaterSearch.vue

@@ -38,6 +38,12 @@
                  <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span></el-radio>
                </el-radio-group> -->
                <!--              <el-form-item >-->
                <div class="page_total">
                    <p>共计
                        <span>{{total}}</span>
                        条记录
                    </p>
                </div>
                <div class="rightButtonSearch">
                    <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索">
                        <!-- <el-button slot="append" icon="el-icon-search" size="mini"></el-button>-->

 src/components/panel/topicSearch/SolidWasteSearch.vue

@@ -30,6 +30,12 @@
                        <span class="levelOfRisk-type">{{ item.name }}</span>
                    </el-radio>
                </el-radio-group>
                <div class="page_total">
                    <p>共计
                        <span>{{total}}</span>
                        条记录
                    </p>
                </div>
                <div class="rightButtonSearch">
                    <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input>
                    <el-button class="el-icon-search" @click="handleSearch"></el-button>
@@ -47,6 +53,17 @@
                </div>
            </div>
        </el-scrollbar>
        <el-card class="footer-page" v-if="total > 10">
            <el-pagination
                    small
                    @current-change="handlePage"
                    :page-size=pageSize
                    layout="prev, pager, next"
                    :total=total
                    class="warnPagination"
            >
            </el-pagination>
        </el-card>
    </div>
</template>

@@ -87,10 +104,18 @@
      // 数据搜索之后，存储数据的
      items: [LayerWasteSolid],
      subItems: LayerWasteSolid.layers,
      list: []
      list: [],
      total: 0,
      // 分页
      pageSize: 10
    }
  },
  methods: {
    // 页面切换 分页功能
    handlePage (page) {
      // this.wfsHelper.setPage(page)
      this.handleSearch()
    },
    // select的option的数据选择
    handlePipelineType (val) {
      this.list = []

 src/components/panel/topicSearch/WaterWasteSearch.vue

@@ -53,6 +53,12 @@
                            class="levelOfRisk-type">{{item.name}}</span></el-radio>
                </el-radio-group>
                <!--              <el-form-item >-->
                <div class="page_total">
                    <p>共计
                        <span>{{total}}</span>
                        条记录
                    </p>
                </div>
                <div class="rightButtonSearch">
                    <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索">
                        <!-- <el-button slot="append" icon="el-icon-search" size="mini"></el-button>-->
@@ -114,7 +120,10 @@
    return {
      gdVisible: true,
      list: [],
      // 搜索到的数据数量
      total: 0,
      // 分页
      pageSize: 10,
      inareaTypeOptions: [],
      enterpriseTypeOptions: [],
      enterpriseSubunitsTypeOptions: [],
@@ -153,6 +162,11 @@
    }
  },
  methods: {
    // 页面切换 分页功能
    handlePage (page) {
      // this.wfsHelper.setPage(page)
      this.handleSearch()
    },
    // 区域筛选
    areaType (val) {
      this.pipelineTypeOptions.forEach((itm) => {

 src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue

@@ -32,6 +32,12 @@
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <div class="page_total">
                    <p>共计
                        <span>{{total}}</span>
                        条记录
                    </p>
                </div>
                <div class="rightButtonSearch">
                    <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input>
                    <el-button class="el-icon-search" @click="handleSearch"></el-button>
@@ -102,6 +108,7 @@
    return {
      reportIncident: false,
      list: [],
      total: 0,
      activeNum: -1,
      LayerEvent: {},
      LayerResources: {},
@@ -189,5 +196,4 @@
</script>

<style lang="less" scoped>

</style>

 src/components/panel/topicSearch/enterprise-emergency/ResourcesQuery.vue

@@ -34,6 +34,12 @@
                    </el-option>
                </el-select>
            </el-form-item>
            <div class="page_total">
                <p>共计
                    <span>{{total}}</span>
                    条记录
                </p>
            </div>
            <div class="rightButtonSearch">
                <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input>
                <el-button class="el-icon-search" @click="handleSearch"></el-button>
@@ -51,6 +57,17 @@
                <p v-else>地址:<span>{{item.properties.adminzonename}}</span></p>
            </div>
        </el-scrollbar>
        <el-card class="footer-page" v-if="total > 10">
            <el-pagination
                    small
                    @current-change="handlePage"
                    :page-size=pageSize
                    layout="prev, pager, next"
                    :total=total
                    class="warnPagination"
            >
            </el-pagination>
        </el-card>
    </div>
</template>

@@ -84,6 +101,10 @@
      activeNum: -1,
      // 搜索到的数据进行存储的list
      list: [],
      // 搜索到的数据数量
      total: 0,
      // 分页
      pageSize: 10,
      // form表单绑定的图层数据
      items: [LayerEmergencySource, LayerSurroundings],
      subItems: LayerEmergencySource.layers || LayerSurroundings.layers,
@@ -97,6 +118,11 @@
    this.wfsHelper = new WfsHelper()
  },
  methods: {
    // 页面切换 分页功能
    handlePage (page) {
      // this.wfsHelper.setPage(page)
      this.handleSearch()
    },
    // 搜索展示图片根据返回值展示
    getImgSrc (type) {
      // console.log(type)
@@ -107,6 +133,7 @@
    handlePipelineType (val) {
      // console.log(val)
      this.list = []
      this.total = 0
      for (let i = 0; i < this.items.length; i++) {
        const item = this.items[i].name
        if (val === item.name) {
@@ -126,10 +153,12 @@
    handleDataType (val) {
      // console.log(val)
      this.list = []
      this.total = 0
    },
    // 点击搜索事件
    async handleSearch () {
      this.list = []
      this.total = 0
      this.wfsHelper.clearFilter()
      this.wfsHelper.setTypeName(['sewer:view_emergency'])
      this.wfsHelper.setMaxFeatures(100)
@@ -143,9 +172,10 @@
        this.wfsHelper.addLike('name', this.form.keyword)
      }
      const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
      // console.log(res)
      console.log(res)
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
        this.list = res.features
        this.total = res.numberReturned
      }
    },
    // 查询定位功能

 src/components/panel/topicSearch/pipeChangesSearch.vue

@@ -21,6 +21,12 @@
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="page_total">
                    <p>共计
                        <span>{{total}}</span>
                        条记录
                    </p>
                </div>
                <div class="rightButtonSearch">
                    <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索"></el-input>
                    <el-button class="el-icon-search" @click="handleSearch"></el-button>

 src/components/panel/topicSearch/pipeInformationSearch.vue

@@ -15,6 +15,12 @@
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="page_total">
                    <p>共计
                        <span>{{total}}</span>
                        条记录
                    </p>
                </div>
                <div class="rightButtonSearch">
                    <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索"></el-input>
                    <el-button class="el-icon-search" @click="handleSearch"></el-button>

 src/components/panel/topicSearch/sewers-select/SewersHistory.vue

@@ -1,52 +1,69 @@
<template>
  <div class="sewers-search" v-if="judgeVisible">
    <div class="search-panel ">
      <el-form ref="form" :model="form" label-width="90px" class="search-form">
        <el-form-item v-for="(item,index) in Options" :key="index" :label="item.label+'：'" size="mini"
                      class="search-panel-item">
          <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType"
                     :popper-class="'select-down'">
            <el-option
                v-for="(ite,index) in item.options"
                :key="index"
                :label="ite.label"
                :value="ite.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="rightButtonSearch">
          <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input>
          <el-button class="el-icon-search" @click="handleSearch"></el-button>
    <div class="sewers-search" v-if="judgeVisible">
        <div class="search-panel ">
            <el-form ref="form" :model="form" label-width="90px" class="search-form">
                <el-form-item v-for="(item,index) in Options" :key="index" :label="item.label+'：'" size="mini"
                              class="search-panel-item">
                    <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType"
                               :popper-class="'select-down'">
                        <el-option
                                v-for="(ite,index) in item.options"
                                :key="index"
                                :label="ite.label"
                                :value="ite.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="page_total">
                    <p>共计
                        <span>{{total}}</span>
                        条记录
                    </p>
                </div>
                <div class="rightButtonSearch">
                    <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input>
                    <el-button class="el-icon-search" @click="handleSearch"></el-button>
                </div>
            </el-form>
        </div>
      </el-form>
        <el-scrollbar style="height:377px">
            <div class="environmental-risk-list hover"><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>###炼化部</h3>
                    <p>所属部门：<span>炼化部</span></p>
                    <p>风险级别：<span>三级</span></p>
                </div>
            </div>
            <div class="environmental-risk-list hover"><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>###炼化部</h3>
                    <p>所属部门：<span>炼化部</span></p>
                    <p>风险级别：<span>三级</span></p>
                </div>
            </div>
            <div class="environmental-risk-list hover"><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>###炼化部</h3>
                    <p>所属部门：<span>炼化部</span></p>
                    <p>风险级别：<span>三级</span></p>
                </div>
            </div>
        </el-scrollbar>
        <el-card class="footer-page" v-if="total > 10">
            <el-pagination
                    small
                    @current-change="handlePage"
                    :page-size=pageSize
                    layout="prev, pager, next"
                    :total=total
                    class="warnPagination"
            >
            </el-pagination>
        </el-card>
    </div>
    <el-scrollbar style="height:377px">
      <div class="environmental-risk-list hover"><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list hover"><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list hover"><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
@@ -123,10 +140,17 @@
            key: 'length'
          }]
        }
      ]
      ],
      list: [],
      total: 0,
      // 分页
      pageSize: 10
    }
  },
  methods: {
    handlePage () {

    },
    handlePipelineType (val) {
      console.log(val)
    },