派生自 wuyushui/SewerAndRainNetwork
src/components/panel/topicSearch/SewersSearch.vue
@@ -1,88 +1,93 @@ <template> <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.pipename }} {{item.properties.companyname }}</h3> <p>所属企业：<span>{{ item.properties.orgname }}</span> <p>设施类型：<span>{{form.pipelineType}}</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="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" :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="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-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> </template> <script> // 引入组件内容 =》 附属设施 import AffiliatedFacilities from '@components/BaseNav/pipeline/AffiliatedFacilities' import AffiliatedFacilities from '@components/base-page/pipeline/AffiliatedFacilities' // 管线分析功能 import SewersAnalysis from '@components/panel/topicSearch/SewersSelect/SewersAnalysis' import SewersAnalysis from '@components/panel/topicSearch/sewers-select/SewersAnalysis' // 管线查询历史功能 import SewersHistory from '@components/panel/topicSearch/SewersSelect/SewersHistory' import SewersHistory from '@components/panel/topicSearch/sewers-select/SewersHistory' // form类型可选择数据 图层控制 import { LayerPipeLines } from '@src/conf/layers/LayerPipeLines' import { LayerFsss } from '@src/conf/layers/LayerFsss' @@ -112,7 +117,6 @@ list: [], // 图层控制 items: [LayerPipeLines, LayerFsss, LayerHbss, LayerPk, LayerArea], subItems: LayerPipeLines.layers, // 分页 pageSize: 10, total: 0, @@ -126,6 +130,20 @@ fuShuSheShiShow: true, activeNum: -1, wfsHelper: null } }, computed: { subItems () { const val = this.form.pipelineType for (let i = 0; i < this.items.length; i++) { const item = this.items[i] if (val === item.name) { return item.layers.filter(function (value, index, array) { return value.name !== '流向' }) } } return [] } }, mounted () { @@ -153,17 +171,6 @@ 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 = [] @@ -174,21 +181,23 @@ this.list = [] this.wfsHelper.clearFilter() // todo 现在管网还没区分开类型，后面改 this.wfsHelper.setTypeName([this.form.dataType.typeName]) this.wfsHelper.setTypeName(['sewer:view_pipeline']) if (this.form.keyword) { this.wfsHelper.addLike('name', this.form.keyword) this.wfsHelper.setFilter(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(), {}) console.log(res) 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) {
