派生自 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" @@ -46,7 +54,7 @@ <!-- <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-buttom class="el-icon-search" @click="handleSearch"></el-buttom> <el-button class="el-icon-search" @click="handleSearch"></el-button> </div> <!-- </el-form-item>--> <!-- <el-form-item>--> @@ -55,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"> @@ -128,17 +97,18 @@ </template> <script> import { PipelineTypeOptions } from '@/conf/layers/LayerSewers' import WfsHelper from '@components/helpers/WfsHelper' import AjaxUtils from '@utils/AjaxUtils' import mapApi from '@/api/mapApi' import publicBounced from '@/components/BaseNav/PublicBounced/PublicBounced'// import WfsHelper from '@components/helpers/WfsHelper' import ImagGreen from '../../../../public/assets/images/map/exhaust/fq_green2.png' export default { name: 'SewersSearch', name: 'GasWasteSearch', data () { return { layer: window.map, L: window.L, gdVisible: true, instance: null, list: [], labelList: PipelineTypeOptions[0].labelList, total: 0, inareaTypeOptions: [], enterpriseTypeOptions: [], @@ -158,7 +128,7 @@ { name: '正常', value: '2' }, { name: '超标', value: '3' }, { name: '异常', value: '4' }, { name: '停产', value: '4' } { name: '停产', value: '5' } ] } }, @@ -184,27 +154,90 @@ 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.flyTo(pos, 15) const positionX = val.Latitude const positionY = val.Longitude // 定义类型 用来区分数据的不同 1.接口接口数据来进行数据的判断 2.根据数据类型的不同，进行不同类型的图片显示 const ContrLevel = val.ContrLevel var iconUrl = this.differentTypes(ContrLevel) const marker = this.L.marker([positionX, positionY], { icon: this.L.icon({ iconUrl: iconUrl, iconSize: [30, 30], iconAnchor: [15, 15] }) }) this.layer.addLayer(marker) const t1 = setTimeout(async () => { const dataValue = { StoragePlaceId: val.StoragePlaceId } // 弹框标题 const title = val console.log(title) // 基本信息 tabs const result = await mapApi.getWasteGas(dataValue) const GasOnlinedata = { onLineMonEmissPointId: '23', monItemId: '28,31', beginTime: '2020-04-06 15:13:20', endTime: '2020-04-07 15:13:20', dataType: '1' } const GasManualData = { companyId: '3900100145', labMonPointId: '219', beginTime: '2020-04-06 15:13:20', endTime: ' 2020-04-07 15:13:20' } const ManualData = await mapApi.getWasteGasManualData(GasManualData) const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata) // 绑定弹框实例 this.instance && this.instance.closePopup() const PublicBounced = window.Vue.extend(publicBounced) this.instance = new PublicBounced().$mount() document.body.appendChild(this.instance.$el) // document.body.removeChild(instance.$el) // 通过方法 向绑定弹框传递数据 this.instance.setGasData(title, result.Result.DataInfo, Mondata.Result.DataInfo, ManualData.Result.DataInfo, 'feiqi') // console.log(title, result.Result.DataInfo, Mondata.Result.DataInfo, ManualData.Result.DataInfo) // this.setPanTo(pos, 250) }, 100) console.log(t1) }, // 不同类型图片加载 differentTypes (ContrLevel) { // effectOfChange /* if (ContrLevel === 1) { effectOfChange = ImgBlue } else if (ContrLevel === 2) { */ const effectOfChange = ImagGreen // } else if (ContrLevel === 3) { // effectOfChange = ImagBright // } else { // effectOfChange = ImgGray // } return effectOfChange } } }
