派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/pipeline/AffiliatedFacilities.vue
@@ -7,26 +7,29 @@ :visible.sync="dialogVisible" :append-to-body="true" :modal="false" v-dialogDragBottom > v-dialogDragBottom > <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"> <div class="el-select el-select--mini">8888</div> </el-form-item> --> <el-form-item label="设施类型：" size="mini" class="search-panel-item"> <el-select style="width: 100%" v-model="dataType" @change="handleDataType" :popper-class="'select-down'"> <el-option v-for="(item,index) in classification" :key="index" :label="item.name" :value="item.name"></el-option> <el-select style="width: 100%" v-model="dataType" value-key="code" @change="handleDataType" :popper-class="'select-down'"> <el-option v-for="(item,index) in classification" :key="index" :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-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:300px;"> <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" :class="activeNum==index?'hover':''"> <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 }}</h3> @@ -51,8 +54,9 @@ import WfsHelper from '@components/helpers/WfsHelper' import AjaxUtils from '@utils/AjaxUtils' import { LayerFsss } from '@src/conf/layers/LayerFsss' import { locate } from '../../helpers/LocateHelper' console.log(LayerFsss, 8888888888) // console.log(LayerFsss, 8888888888) export default { name: 'AffiliatedFacilities', data () { @@ -63,7 +67,6 @@ keyword: '' }, dataType: '', classification: LayerFsss.layers, list: [], activeNum: -1 } @@ -78,11 +81,23 @@ deep: true } }, computed: { classification () { const layers = LayerFsss.layers console.log(layers) const filtered = layers.filter(function (value, index, array) { console.log(value) return value.name !== '流向' }) return filtered } }, methods: { getImgSrc () { const icon = this.form.dataType.icon const icon = this.dataType.icon return icon ? 'assets/images/map/' + icon : '' }, handleClose (done) { // this.$confirm('确认关闭？').then(_ => { done() }).catch(_ => {}) }, @@ -95,122 +110,129 @@ window.layerFactory.flyByFeature(val1, val.code) }, handleDataType () { console.log(this.dataType) this.list = [] }, async handleSearch () { var wfsHelper = new WfsHelper() // todo 现在管网还没区分开类型，后面改 wfsHelper.addTypeName(this.dataType) wfsHelper.addLike('name', this.form.keyword) wfsHelper.addTypeName(this.dataType.typeName) if (this.form.keyword) { 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')) { const datas = res.features const arrs = [] for (let i = 0; i < 7; i++) { arrs.push(datas[i]) } this.list = arrs this.list = res.features // this.$forceUpdate() } }, handleLocation (val, index) { this.activeNum = index window.layerFactory.flyByFeature(val, this.form.dataType.code) locate(val, this.dataType) } } } </script> <style lang="less"> .affiliatedFacilities-dialog{ width: calc(20% - 60px) !important; // calc(30% - 15px); left: 60%; .el-dialog__body{ padding: 0.04rem; .search-panel { background-color: transparent; padding: 10px; border-bottom: 1px solid @background-color-split; // .el-input{width:calc(100% - 40px);position: relative} /deep/ input { border-radius: 0; background-color: @background-color-split; border: solid 1px @color; color: @color-gray; font-size: 0.01rem; padding: 0 15px; <style lang="less"> .affiliatedFacilities-dialog { width: calc(20% - 60px) !important; // calc(30% - 15px); left: 60%; .el-select .el-input.is-focus .el-input__inner { .el-dialog__body { padding: 0.04rem; .search-panel { background-color: transparent; padding: 10px; border-bottom: 1px solid @background-color-split; // .el-input{width:calc(100% - 40px);position: relative} /deep/ input { border-radius: 0; background-color: @background-color-split; border: solid 1px @color; color: @color-gray; font-size: 0.01rem; padding: 0 15px; .el-select .el-input.is-focus .el-input__inner { border-color: @color; } } .el-form-item__label { color: #00fff6 } .el-input__inner { background: none; color: #fff; font-size: 14px; border-radius: 0; border-color: @color; background: rgba(0, 16, 30, .5); } } .el-form-item__label{ color:#00fff6 } .el-input__inner { background: none; color: #fff; font-size: 14px; border-radius: 0; border-color: @color; background: rgba(0, 16, 30, .5); } } /*input 点击搜索样式*/ .rightButtonSearch { display: flex; justify-content: space-between; align-items: center; /*input 点击搜索样式*/ .el-input { margin-right: 10px .rightButtonSearch { display: flex; justify-content: space-between; align-items: center; .el-input { margin-right: 10px } .el-icon-search { width: 40px; border: 1px solid @color; height: 28px; line-height: 28px; text-align: center; color: #fff; border-radius: 2px; cursor: pointer; background: rgba(0, 16, 30, .5); padding: 0; } } .el-icon-search { width: 40px; border: 1px solid @color; height: 28px; line-height: 28px; text-align: center; color: #fff; border-radius: 2px; cursor: pointer; background: rgba(0, 16, 30, .5); padding: 0; } } .environmental-risk-list { position: relative; padding-left: 50px; padding-top: 5px; padding-bottom: 5px; color: @color-shadow; border-bottom: 1px solid @background-color-split; h3{ cursor: pointer;} .state { width: 30px; height: 30px; position: absolute; top: 50%; left: 10px; margin-top: -15px; border-radius: 50%; box-shadow: 0 0 3px #000; background: #0B3B6D; } } .environmental-risk-list { position: relative; padding-left: 50px; padding-top: 5px; padding-bottom: 5px; color: @color-shadow; border-bottom: 1px solid @background-color-split; .environmental-risk-list.hover, .environmental-risk-list:hover { color: @color-highlight; background: @background-color; h3 { cursor: pointer; } .state { width: 30px; height: 30px; position: absolute; top: 50%; left: 10px; margin-top: -15px; border-radius: 50%; box-shadow: 0 0 3px #000; background: #0B3B6D; } } .environmental-risk-list.hover, .environmental-risk-list:hover { color: @color-highlight; background: @background-color; } } } } </style > </style>
