派生自 wuyushui/SewerAndRainNetwork
src/components/panel/topicSearch/SewersSearch.vue
@@ -1,122 +1,86 @@ <template> <div class="sewers-search"> <div class="el-message-box__header panel_header"> <div class="el-message-box__title panel_title"><!----><span>{{ title }}</span> </div> <div class="sewers-search" v-if="gdVisible"> <div class="panel-title">{{ title }}</div> <div class="search-panel "> <el-form ref="form" :model="form" label-width="90px" class="search-form"> <el-form-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="item in pipelineTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item :label="form.pipelineType+'：'" size="mini"> <el-select style="width: 100%" v-model="form.dataType" @change="handleDataType" :popper-class="'select-down'"> <el-option v-for="item in dataTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <!-- <el-form-item >--> <div class="rightButtonSearch"> <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"> <!-- <el-button slot="append" icon="el-icon-search" size="mini"></el-button>--> <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>--> <!-- <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i> --> </el-input> <el-button class="el-icon-search" @click="handleSearch"></el-button> </div> <!-- </el-form-item>--> <!-- <el-form-item>--> <!-- <input type="button" class="btn-ok" @click="handleSearch" value="查询">--> <!-- <input type="button" class="btn-reset" @click="handleSearch" value="重置">--> <!-- </el-form-item>--> </el-form> </div> <div class="el-message-box__content" style="padding:6px;font-size: 13px;"> <div class="box__content" v-if="gdVisible"> <div> <el-card class="search-panel"> <el-form ref="form" :model="form" label-width="90px" class="search-form"> <el-form-item label="设施类型：" size="mini" class="search-panel-item"> <el-select v-model="form.pipelineType" @change="handlePipelineType" popper-class="select-down"> <el-option v-for="item in pipelineTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item :label="form.pipelineType+'：'" size="mini"> <el-select v-model="form.dataType" @change="handleDataType" popper-class="select-down"> <el-option v-for="item in dataTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <!-- <el-form-item >--> <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"> <!-- <el-button slot="append" icon="el-icon-search" size="mini"></el-button>--> <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>--> <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i> </el-input> <!-- </el-form-item>--> <!-- <el-form-item>--> <!-- <input type="button" class="btn-ok" @click="handleSearch" value="查询">--> <!-- <input type="button" class="btn-reset" @click="handleSearch" value="重置">--> <!-- </el-form-item>--> </el-form> </el-card> <el-card class="search-result" > <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index"> <div class="B-TMD-table-list-title"> <div class="B-TMD-table-list-head"> <div class="B-TMD-table-list-title-y" :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]"> <!-- <span>运单号：</span>--> <span id="waybillNumber" class="" :title="item.properties.pipename"> <span class="location-btn" @click="handleLocation(item)">{{ item.properties.pipename }}</span> </span> </div> <!-- <div class="B-TMD-table-list-title-c">--> <!-- {{ labelList[0] }}：--> <!-- <span id="plateNumber_p">--> <!-- <span id="plateNumber_n"><a href="#">{{ item.properties.item.p1 }}</a></span>--> <!-- </span>--> <!-- </div>--> </div> <!-- <div class="B-TMD-table-icons" style="float:right">--> <!-- <ul>--> <!-- <li class="B-TMD-table-list-title-y-adress"--> <!-- @click="handleLocation(item)"></li>--> <!-- <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>--> <!-- </ul>--> <!-- </div>--> </div> <div class="B-TMD-table-list-content"> <div v-for="itm in labelList" :key="itm.label"> <span>{{ itm.label }}：</span> <span id="b_twe_loan" :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span> </div> <!-- <div><span>收货企业：</span> <span--> <!-- id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span>--> <!-- </div>--> </div> <!-- <div class="B-TMD-table-list-bottom">--> <!-- <div class="B-TMD-table-list-bottom-name">--> <!-- 货物名称：<span :title="item.materialName">{{ item.materialName }}</span></div>--> <!-- </div>--> </div> </el-card> <el-card class="footer-page" v-if="total > 10"> <el-pagination small @current-change="handlePage" :page-size=pageSize layout="prev, pager, next" :total=total :current-page=current class="warnPagination" > </el-pagination> </el-card> <el-scrollbar style="height:380.44px;"> <div class="environmental-risk-list" v-for="(item,index) in list" :key="index"> <!-- <i class="state"></i> --> <div @click="handleLocation(item)"> <h3 class="B-TMD-table-list-title-y" :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]"> {{ item.properties.pipename }}</h3> <p v-for="itm in labelList" :key="itm.label"> <span>{{ itm.label }}：</span> <span :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span> </p> </div> </div> <!-- <div class="monitor2" v-if="hbVisible">--> <!-- <env-protect-search></env-protect-search>--> <!-- </div>--> <!-- <div class="monitor2" v-if="pkVisible">--> <!-- <discharge-search></discharge-search>--> <!-- </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 :current-page=current class="warnPagination" > </el-pagination> </el-card> </div> <!-- <div class="monitor2" v-if="hbVisible">--> <!-- <env-protect-search></env-protect-search>--> <!-- </div>--> <!-- <div class="monitor2" v-if="pkVisible">--> <!-- <discharge-search></discharge-search>--> <!-- </div>--> </template> <script> import { PipelineTypeOptions } from '@/conf/LayerSewers' import { PipelineTypeOptions } from '@/conf/layers/LayerSewers' import WfsHelper from '@components/helpers/WfsHelper' import AjaxUtils from '@utils/AjaxUtils' export default { name: 'SewersSearch', data () { @@ -162,7 +126,7 @@ } }) }, handleSearch () { async handleSearch () { const param = { pipelineType: this.form.pipelineType, dataType: this.form.dataType @@ -172,20 +136,22 @@ wfsHelper.addTypeName(this.form.query.layerName) wfsHelper.addLike(this.form.query.key, this.form.keyword) // const _this = this AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => { const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}) if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) { this.list = res.features }) } }, handleLocation (val) { console.log(val) const bound = this.L.geoJSON([val], {}).getBounds() console.log(bound) var layer = window.serviceLayerHelper.getByLayerId(val.id) layer && layer.openPopup() this.$store.state.map.map.flyToBounds(bound) } } } </script> <style lang="less"> @import '@assets/css/map/map-elem-ui'; <style lang="less" scoped> </style>
