From 71f75cd55d11dda80118c0c3e278a8c531d98dc5 Mon Sep 17 00:00:00 2001 From: chenyabin <Chenab123!> Date: 星期一, 19 四月 2021 14:05:24 +0800 Subject: [PATCH] 添加 附属设施弹框。 --- src/components/panel/topicSearch/SewersSearch.vue | 109 ++++++++++++++++++++++++++---------------------------- 1 files changed, 52 insertions(+), 57 deletions(-) diff --git a/src/components/panel/topicSearch/SewersSearch.vue b/src/components/panel/topicSearch/SewersSearch.vue index b659cfa..006b073 100644 --- a/src/components/panel/topicSearch/SewersSearch.vue +++ b/src/components/panel/topicSearch/SewersSearch.vue @@ -9,21 +9,21 @@ <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"> + 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" @change="handleDataType" - :popper-class="'select-down'"> + <el-select style="width: 100%" v-model="form.dataType" value-key="code" :popper-class="'select-down'"> + <!-- @change="handleDataType"--> <el-option - v-for="item in dataTypeOptions" - :key="item.value" - :label="item.label" - :value="item.value"> + v-for="item in subItems" + :key="item.code" + :label="item.name" + :value="item"> </el-option> </el-select> </el-form-item> @@ -36,14 +36,11 @@ </div> <el-scrollbar style="height:380.44px;"> <div class="environmental-risk-list" v-for="(item,index) in list" :key="index"> - <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> + <img class="state" :src="getImgSrc()" style="background: none"/> + <div> + <h3 @click="handleLocation(item)">{{ item.properties.pipename }}</h3> + <p>鎵�灞炰紒涓氾細<span>{{ item.properties.orgcode }}</span> + <p>璁炬柦绫诲瀷锛�<span>{{ item.properties.teetype }}</span> <el-button class="rt" size="mini" style="margin-right: 0.04rem" @click="btnAffiliatedFacilities(item)" >闄勫睘璁炬柦</el-button></p> </div> </div> </el-scrollbar> @@ -67,16 +64,24 @@ <SewersHistory></SewersHistory> </el-tab-pane> </el-tabs> + <!-- 闄勫睘璁炬柦闈㈡澘 --> + <affiliated-facilities></affiliated-facilities> </div> </template> <script> -import { PipelineTypeOptions } from '@/conf/layers/LayerSewers' +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 AffiliatedFacilities from '@components/BaseNav/pipeline/AffiliatedFacilities' + +// 寮曞叆缁勪欢鍐呭 import SewersAnalysis from '@components/panel/topicSearch/SewersSelect/SewersAnalysis' import SewersHistory from '@components/panel/topicSearch/SewersSelect/SewersHistory' @@ -84,25 +89,21 @@ name: 'SewersSearch', components: { SewersAnalysis, - SewersHistory + SewersHistory, + AffiliatedFacilities }, data () { return { activeName: 'first', gdVisible: true, list: [], - labelList: PipelineTypeOptions[0].labelList, + items: [LayerPipeLines, LayerFsss, LayerHbss, LayerPk, LayerArea], + subItems: LayerPipeLines.layers, total: 0, - pipelineTypeOptions: PipelineTypeOptions, - dataTypeOptions: PipelineTypeOptions[0].options, form: { - pipelineType: PipelineTypeOptions[0].label, - dataType: PipelineTypeOptions[0].options[0].label, - query: PipelineTypeOptions[0].options[0], - keyword: '鐮旂┒闄�01璺痀S000001' - // , - // size: 10, - // current: 1 + pipelineType: '绠$綉', + dataType: '', + keyword: '' }, // pageSize: 10, // current: 1, @@ -112,48 +113,42 @@ }, props: ['title'], methods: { + getImgSrc () { + const icon = this.form.dataType.icon + return icon ? 'assets/images/map/' + icon : '' + }, handleClick (tab, event) { console.log(tab, event) }, handlePipelineType (val) { - this.pipelineTypeOptions.forEach((itm) => { - if (val === itm.value) { - this.dataTypeOptions = itm.options - this.form.pipelineType = itm.label - this.form.labelList = itm.labelList + for (var i = 0; i < this.items.length; i++) { + const item = this.items[i] + if (val === item.name) { + this.subItems = item.layers + return } - }) - this.form.dataType = this.dataTypeOptions[0].label - this.form.key = this.dataTypeOptions[0].key - }, - handleDataType (val) { - this.dataTypeOptions.forEach((itm) => { - if (val === itm.value) { - this.form.query = itm - } - }) + } }, async handleSearch () { - const param = { - pipelineType: this.form.pipelineType, - dataType: this.form.dataType - } - console.log(param) var wfsHelper = new WfsHelper() - wfsHelper.addTypeName(this.form.query.layerName) - wfsHelper.addLike(this.form.query.key, this.form.keyword) + // todo 鐜板湪绠$綉杩樻病鍖哄垎寮�绫诲瀷锛屽悗闈㈡敼 + wfsHelper.addTypeName(this.form.dataType.sname) + wfsHelper.addLike('name', this.form.keyword) // const _this = this const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}) + console.log(res) 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() - var layer = window.serviceLayerHelper.getByLayerId(val.id) - layer && layer.openPopup() - this.$store.state.map.map.flyToBounds(bound) + window.map.flyToBounds(bound) + window.layerFactory.flyByLayerId(this.form.dataType.code, val.id) + // layer && layer.openPopup() + }, + btnAffiliatedFacilities (item) { + console.log(item) } } } -- Gitblit v1.8.0