| | |
| | | <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' |
| | |
| | | list: [], |
| | | // 图层控制 |
| | | items: [LayerPipeLines, LayerFsss, LayerHbss, LayerPk, LayerArea], |
| | | subItems: LayerPipeLines.layers, |
| | | // 分页 |
| | | pageSize: 10, |
| | | total: 0, |
| | |
| | | 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 () { |
| | | this.wfsHelper = new WfsHelper() |
| | | }, |
| | |
| | | // tab切换 |
| | | handleClick (tab, event) { |
| | | console.log(tab, event) |
| | | if (tab.label === '分析') { |
| | | // 关闭弹窗 |
| | | window.mapManager.clickDialogSwitch = false |
| | | } else { |
| | | // 打开弹窗 |
| | | window.mapManager.clickDialogSwitch = true |
| | | } |
| | | }, |
| | | // 根据返回数据 确认展示图片 |
| | | getImgSrc () { |
| | |
| | | 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 = [] |
| | |
| | | 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) |
| | | } |
| | | const filter = this.form.dataType.filter |
| | | if (filter) { |
| | | this.wfsHelper.setFilter(filter) |
| | | } |
| | | 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) { |