From b8b5fda251204264fc44f0c22db7dac741a4da22 Mon Sep 17 00:00:00 2001 From: YANGDL <114714267@qq.com> Date: 星期一, 15 三月 2021 20:14:18 +0800 Subject: [PATCH] 修改地图样式 --- src/components/panel/topicSearch/SewersSearch.vue | 141 ++++++++++++++++++++++++++-------------------- 1 files changed, 80 insertions(+), 61 deletions(-) diff --git a/src/components/panel/topicSearch/SewersSearch.vue b/src/components/panel/topicSearch/SewersSearch.vue index a3987bf..f6ff0f2 100644 --- a/src/components/panel/topicSearch/SewersSearch.vue +++ b/src/components/panel/topicSearch/SewersSearch.vue @@ -1,16 +1,9 @@ <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> - <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"> + <div class="sewers-search" v-if="gdVisible"> + <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 v-model="form.pipelineType" @change="handlePipelineType" popper-class="select-down"> + <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" @@ -20,7 +13,7 @@ </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-select style="width: 100%" v-model="form.dataType" @change="handleDataType" :popper-class="'select-down'"> <el-option v-for="item in dataTypeOptions" :key="item.value" @@ -29,46 +22,46 @@ </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-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> + <el-scrollbar style="height:100%"> <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>杩愬崟鍙凤細</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 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 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"> @@ -76,17 +69,16 @@ <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><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 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-scrollbar> <el-card class="footer-page" v-if="total > 10"> <el-pagination small @@ -100,16 +92,12 @@ </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> @@ -162,7 +150,7 @@ } }) }, - handleSearch () { + async handleSearch () { const param = { pipelineType: this.form.pipelineType, dataType: this.form.dataType @@ -172,17 +160,15 @@ wfsHelper.addTypeName(this.form.query.layerName) wfsHelper.addLike(this.form.query.key, this.form.keyword) // const _this = this - AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => { - console.log(res) - this.list = res.features - }) + const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}) + if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) { + this.list = res.data.features + } }, handleLocation (val) { console.log(val) const bound = this.L.geoJSON([val], {}).getBounds() - console.log(bound) var layer = window.serviceLayerHelper.getByLayerId(val.id) - console.log(layer) layer && layer.openPopup() this.$store.state.map.map.flyToBounds(bound) } @@ -190,6 +176,39 @@ } </script> -<style lang="less"> -@import '@assets/css/map/map-elem-ui'; +<style lang="less" scoped> + +.sewers-search{ + position: relative; + overflow: hidden; + .search-panel{ + background-color: transparent; + border: 1px solid @background-color-split; + padding: 10px; + + /deep/ input { + border-radius: 0; + background-color: @background-color-split ; + border: solid 1px @color ; + color: @color-gray; + font-size: 0.01rem; + .el-select .el-input.is-focus .el-input__inner{ + border-color: @color; + } + } + /deep/ input:focus{ + border-color: @color; + } + } + .search-btn{ + + } + //location-btn{ + // + //} + .location-btn:hover,.el-input__icon:hover{ + color: @color; + cursor: pointer; + } +} </style> -- Gitblit v1.8.0