派生自 wuyushui/SewerAndRainNetwork
src/components/panel/topicSearch/GasWasteSearch.vue
@@ -1,8 +1,6 @@ <template> <div class="sewers-search" v-if="gdVisible"> <div class="search-title"> 废气 </div> <div class="panel-title">{{title}}</div> <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"> @@ -15,7 +13,7 @@ </el-option> </el-select> </el-form-item> <el-form-item label="企业名称" size="mini"> <el-form-item label="企业名称：" size="mini"> <el-select style="width: 100%" v-model="form.enterpriseVal" @change="enterpriseType" :popper-class="'select-down'"> <el-option v-for="item in enterpriseTypeOptions" @@ -25,7 +23,17 @@ </el-option> </el-select> </el-form-item> <el-form-item label="二级单位" size="mini"> <el-form-item label="二级单位：" size="mini"> <el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType" :popper-class="'select-down'"> <el-option v-for="item in enterpriseSubunitsTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="三级单位：" size="mini"> <el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType" :popper-class="'select-down'"> <el-option v-for="item in enterpriseSubunitsTypeOptions" @@ -40,12 +48,14 @@ <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}</span></el-radio> </el-radio-group> <!-- <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> <div class="rightButtonSearch"> <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-button class="el-icon-search" @click="handleSearch"></el-button> </div> <!-- </el-form-item>--> <!-- <el-form-item>--> <!-- <input type="button" class="btn-ok" @click="handleSearch" value="查询">--> @@ -53,55 +63,16 @@ <!-- </el-form-item>--> </el-form> </div> <el-scrollbar style="height:300px"> <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" --> <i class="state"></i> <el-scrollbar style="height:264px"> <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" @click="handleLocation(item)"><!-- --> <img src="../../../../public/assets/images/map/exhaust/fq_green2.png" alt="" class="state"/> <div> <h3>###炼化部</h3> <p>所属部门：<span>炼化部</span></p> <h3>{{ item.Name }}</h3> <p>所属部门：<span>{{ item.porltName }}</span></p> <p>风险级别：<span>三级</span></p> </div> </div> <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" --> <i class="state"></i> <div> <h3>###炼化部</h3> <p>所属部门：<span>炼化部</span></p> <p>风险级别：<span>三级</span></p> </div> </div> <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" --> <i class="state"></i> <div> <h3>###炼化部</h3> <p>所属部门：<span>炼化部</span></p> <p>风险级别：<span>三级</span></p> </div> </div> <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" --> <i class="state"></i> <div> <h3>###炼化部</h3> <p>所属部门：<span>炼化部</span></p> <p>风险级别：<span>三级</span></p> </div> </div> <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" --> <i class="state"></i> <div> <h3>###炼化部</h3> <p>所属部门：<span>炼化部</span></p> <p>风险级别：<span>三级</span></p> </div> </div> <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" --> <i class="state"></i> <div> <h3>###炼化部</h3> <p>所属部门：<span>炼化部</span></p> <p>风险级别：<span>三级</span></p> </div> </div> </el-scrollbar> <!-- <span class="location-btn" @click="handleLocation(item)">588</span> --> <el-card class="footer-page" v-if="total > 10"> @@ -126,17 +97,17 @@ </template> <script> import { PipelineTypeOptions } from '@/conf/layers/LayerSewers' import mapApi from '@/api/mapApi' import WasteWaterIndex from '../../BaseNav/WasteWater/WasteWaterIndex' import { pulseEffect, setPanTo } from '../../../utils/utils' import WfsHelper from '@components/helpers/WfsHelper' import AjaxUtils from '@utils/AjaxUtils' export default { name: 'SewersSearch', name: 'GasWasteSearch', props: ['title'], data () { return { gdVisible: true, list: [], labelList: PipelineTypeOptions[0].labelList, total: 0, inareaTypeOptions: [], enterpriseTypeOptions: [], @@ -149,18 +120,15 @@ }, // pageSize: 10, // current: 1, isWaybillHover: true, isRouteHover: false, levelOfRisk: [ { name: '全部', value: '1' }, { name: '正常', value: '2' }, { name: '超标', value: '3' }, { name: '异常', value: '4' }, { name: '停产', value: '4' } { name: '停产', value: '5' } ] } }, props: ['title'], methods: { // 区域筛选 areaType (val) { @@ -182,107 +150,40 @@ enterpriseSubunitsType (val) { }, // 三级单位筛选 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) // const _this = this const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}) if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) { this.list = res.data.features } // console.log(param) const res = await mapApi.getWasteGas(param) // console.log(res) this.list = res.Result.DataInfo console.log(this.list) }, handleLocation (val) { // 弹窗展示 async 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) const pos = [val.Latitude, val.Longitude] window.map.setView(pos, 15) window.$layer.open({ content: { comp: WasteWaterIndex, // 组件 parent: this, // 父组件 data: { // 传递的参数 storagePlaceId: val } }, title: '天津石化 ' + val.Name }) pulseEffect([val.Latitude, val.Longitude]) setPanTo(pos, 250) } } } </script> <style lang="less" scoped> .levelOfRisk-type{ display: inline-block; position: relative; padding-right: 5px; color:#f5f5f5; i{ display: block; width: 15px; height: 10px; position: absolute; top:50%; right: -15px; margin-top: -5px; } } .el-radio.is-checked .levelOfRisk-type{color:#409EFF} .levelOfRisk{padding-left:20px} .levelOfRisk .el-radio{padding-bottom:6px} .environmental-risk-list{ border:1px solid @color; margin-right: 10px; margin-bottom: 15px; position: relative; padding-left:50px; padding-top:3px; padding-bottom:3px; color: #f5f5f5; .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; } } /******************以下公共部分**********/ .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; } .el-radio { margin-right: 8px!important; } } </style>
