派生自 wuyushui/SewerAndRainNetwork
src/components/panel/topicSearch/SewersSearch.vue
@@ -1,190 +1,229 @@ <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> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="查询" name="first"> <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 items" :key="item.code" :label="item.name" :value="item.name"> </el-option> </el-select> </el-form-item> <el-form-item :label="form.pipelineType+'：'" size="mini"> <el-select style="width: 100%" v-model="form.dataType" value-key="code" :popper-class="'select-down'" @change="handleDataType"> <el-option v-for="item in subItems" :key="item.code" :label="item.name" :value="item"> </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> </el-form> </div> <el-scrollbar style="height:413px;"> <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" :class="activeNum===index?'hover':''"> <img class="state" :src="getImgSrc()" style="background: none"/> <div> <h3 @click="handleLocation(item,index)">{{ item.properties.name || item.properties.code }}</h3> <p>所属企业：<span>{{ item.properties.orgname }}</span> <p>设施类型：<span>{{ item.properties.type }}</span> <el-button v-if="fuShuSheShiShow" class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;" @click="btnAffiliatedFacilities(item,index)"> 附属设施 </el-button> </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> </el-tab-pane> <el-tab-pane label="分析" name="second"> <SewersAnalysis></SewersAnalysis> </el-tab-pane> <el-tab-pane label="历史" name="third"> <SewersHistory></SewersHistory> </el-tab-pane> </el-tabs> <!-- 附属设施面板 --> <affiliated-facilities :facilitiesParameter="facilitiesParameter" v-if="fuShuSheShiShow"></affiliated-facilities> </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.key" 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" style="height:271px;"> <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="B-TMD-table-list-title-y-num" :title="item.transNo"> <span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span> </span> </div> <div class="B-TMD-table-list-title-c"> 载具号： <span id="plateNumber_p"> <span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</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> <span>发货企业：</span> <span id="b_twe_consignment" :title="item.outWarehouseName">{{ item.outWarehouseName == null ? "暂无" : item.outWarehouseName }}</span> </div> <div> <span>承 运 商：</span> <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</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> </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> </div> </template> <script> import { PipelineTypeOptions, OutletOptions, AttachOptions, PipelineOptions, EnvironmentOptions, SurroundingsOptions } from '@/conf/LayerSewers' // 引入组件内容 =》 附属设施 import AffiliatedFacilities from '@components/BaseNav/pipeline/AffiliatedFacilities' // 管线分析功能 import SewersAnalysis from '@components/panel/topicSearch/SewersSelect/SewersAnalysis' // 管线查询历史功能 import SewersHistory from '@components/panel/topicSearch/SewersSelect/SewersHistory' // form类型可选择数据 图层控制 import { LayerPipeLines } from '@src/conf/layers/LayerPipeLines' import { LayerFsss } from '@src/conf/layers/LayerFsss' import { LayerHbss } from '@src/conf/layers/LayerHbss' import { LayerPk } from '@src/conf/layers/LayerPk' import { LayerArea } from '@src/conf/layers/LayerArea' // 方法 import WfsHelper from '@components/helpers/WfsHelper' import AjaxUtils from '@utils/AjaxUtils' import { fitBounds, highlight, locate } from '../../helpers/LocateHelper' export default { name: 'SewersSearch', props: ['title'], components: { SewersAnalysis, SewersHistory, AffiliatedFacilities }, data () { return { // 判断显示/隐藏 gdVisible: true, // tab切换 绑定当前值 activeName: 'first', // 搜索数据 用于展示数据存储 list: [], total: 0, pipelineTypeOptions: PipelineTypeOptions, outletOptions: OutletOptions, dataTypeOptions: PipelineTypeOptions, attachOptions: AttachOptions, pipelineOptions: PipelineOptions, environmentOptions: EnvironmentOptions, surroundingsOptions: SurroundingsOptions, form: { pipelineType: PipelineTypeOptions[0].label, dataType: PipelineOptions[0].label, // transNo: null, // carrierName: null, // transMode: null, // vehicleNo: null, // orderState: null, size: 10, current: 1 }, // 图层控制 items: [LayerPipeLines, LayerFsss, LayerHbss, LayerPk, LayerArea], // 分页 pageSize: 10, current: 1, isWaybillHover: true, isRouteHover: false total: 0, // form表单绑定数据 form: { pipelineType: '管线', dataType: '', keyword: '' }, facilitiesParameter: null, fuShuSheShiShow: true, activeNum: -1, wfsHelper: null } }, props: ['title'], mounted () { this.wfsHelper = new WfsHelper() }, methods: { handlePipelineType (item) { console.log(item) if (item === '2') { this.dataTypeOptions = this.outletOptions } else if (item === '1') { this.dataTypeOptions = this.pipelineOptions } else if (item === '3') { this.dataTypeOptions = this.attachOptions } else if (item === '4') { this.dataTypeOptions = this.environmentOptions } else if (item === '5') { this.dataTypeOptions = this.surroundingsOptions } this.form.pipelineType = this.pipelineTypeOptions[item - 1].label this.form.dataType = this.dataTypeOptions[0].label subItems () { const layers = LayerPipeLines.layers console.log(layers) const filtered = layers.filter(function (value, index, array) { console.log(value) return value.name !== '流向' }) return filtered }, handleDataType (item) { }, handleSearch () { const param = { pipelineType: this.form.pipelineType, dataType: this.form.dataType // tab切换 handleClick (tab, event) { console.log(tab, event) if (tab.label === '分析') { // 关闭弹窗 window.mapManager.clickDialogSwitch = false } else { // 打开弹窗 window.mapManager.clickDialogSwitch = true } console.log(param) }, // 根据返回数据 确认展示图片 getImgSrc () { const icon = this.form.dataType.icon return icon ? 'assets/images/map/' + icon : '' }, // 页面切换 分页功能 handlePage (page) { this.wfsHelper.setPage(page) this.handleSearch() }, // 设施类型筛选 handlePipelineType (val) { this.list = [] for (let i = 0; i < this.items.length; i++) { const item = this.items[i] if (val === item.name) { this.subItems = item.layers return } } }, // 二级form表单切换选择清空已选择数据 handleDataType () { this.list = [] }, // 搜索功能 async handleSearch () { // console.log(this.form.dataType.sname, this.form.keyword) this.list = [] this.wfsHelper.clearFilter() // todo 现在管网还没区分开类型，后面改 this.wfsHelper.setTypeName(['sewer:view_pipeline']) if (this.form.keyword) { this.wfsHelper.addLike('name', this.form.keyword) } this.wfsHelper.addEquals('type', '\'' + this.form.dataType.sname + '\'') // const filter = this.form.dataType.filter // if (filter) { // this.wfsHelper.setFilter(filter) // } // const _this = this const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) { this.total = res.totalFeatures this.list = res.features } this.wfsHelper = new WfsHelper() }, // 点击搜索到的数据 实现功能 = 定位 高亮 弹框 handleLocation (val, index) { // console.log(val) this.activeNum = index // layer && layer.openPopup() const config = this.form.dataType locate(val, config) }, // 附属设施功能组件 btnAffiliatedFacilities (val, index) { this.activeNum = index this.facilitiesParameter = val // 判断选择是否是管线，如果是则显示《附属设施》弹框 if (this.form.pipelineType === '管线') { this.fuShuSheShiShow = true } else { this.fuShuSheShiShow = false } fitBounds(val, this.form.dataType.code) highlight(val) } } } </script> <style lang="less"> @import '@assets/css/map/map-elem-ui'; <style lang="less" scoped> </style>
