派生自 wuyushui/SewerAndRainNetwork
src/components/panel/topicSearch/EnvRiskSearch.vue
@@ -1,9 +1,9 @@ <template> <div class="sewers-search" v-if="gdVisible"> <div class="search-title">{{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"> <!-- <el-form-item label="区域：" size="mini" class="search-panel-item"> <el-select style="width: 100%" v-model="form.areaVal" @change="areaType" :popper-class="'select-down'"> <el-option v-for="item in areaTypeOptions" @@ -12,8 +12,8 @@ :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="企业名称" size="mini"> </el-form-item>--> <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" @@ -23,8 +23,9 @@ </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-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" @@ -33,24 +34,32 @@ </el-option> </el-select> </el-form-item> <el-form-item label="风险级别" size="mini"></el-form-item> <el-form-item label="风险级别：" size="mini"></el-form-item> <el-radio-group v-model="form.type" class="levelOfRisk"> <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span></el-radio> <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"> <span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span> </el-radio> </el-radio-group> <div class="page_total"> <p>共计 <span>{{total}}</span> 条记录 </p> </div> <div class="rightButtonSearch"> <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"> </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> </div> <el-scrollbar style="height:264px"> <div class="environmental-risk-list" v-for="(item,index) in 5" :key="index" ><!-- v-for="(item,index) in list" :key="index" --> <i class="state"></i> <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" @click="handleLocation(item)"> <img :src='iconUrl[item.riskLevel]' alt="" class="state"/> <div> <h3>###炼化部</h3> <p>所属部门：<span>炼化部</span></p> <p>风险级别：<span>三级</span></p> <h3>{{ item.riskname }}</h3> <p>所属部门：<span>{{ item.unitname }}</span></p> </div> </div> </el-scrollbar> @@ -77,19 +86,19 @@ </template> <script> import { PipelineTypeOptions } from '@/conf/layers/LayerSewers' import WfsHelper from '@components/helpers/WfsHelper' import AjaxUtils from '@utils/AjaxUtils' import { pulseEffect, setPanTo } from '@utils/utils' import RiskSourceIndex from '@components/base-page/RiskSource/RiskSourceIndex' const mapApi = require('../../../api/mapApi').default export default { name: 'SewersSearch', name: 'EnvRiskSearch', data () { return { gdVisible: true, list: [], labelList: PipelineTypeOptions[0].labelList, total: 0, inareaTypeOptions: [], // inareaTypeOptions: [], enterpriseTypeOptions: [], enterpriseSubunitsTypeOptions: [], form: { @@ -98,8 +107,8 @@ enterpriseSubunitsVal: '', type: '' }, // pageSize: 10, // current: 1, pageSize: 10, current: 1, isWaybillHover: true, isRouteHover: false, levelOfRisk: [ @@ -107,19 +116,26 @@ { name: '一级风险', value: '2', color: 'sandybrown' }, { name: '二级风险', value: '3', color: 'yellow' }, { name: '三级风险', value: '4', color: 'green' } ], areaTypeOptions: [], iconUrl: ['', require('../../../../public/assets/images/map/environmentRisk/risk_red.png'), require('../../../../public/assets/images/map/environmentRisk/risk_sandybrown.png'), require('../../../../public/assets/images/map/environmentRisk/risk_yellow.png'), require('../../../../public/assets/images/map/environmentRisk/risk_green.png') ] } }, props: ['title'], methods: { // 区域筛选 areaType (val) { /* areaType (val) { this.pipelineTypeOptions.forEach((itm) => { if (val === itm.value) { } }) }, }, */ // 企业筛选 enterpriseType (val) { this.dataTypeOptions.forEach((itm) => { @@ -132,27 +148,29 @@ 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 } const res = await mapApi.getEnvironmentRiskPoint(param) this.list = res[0].concat(res[1], res[2], res[3]) // 临时数据 }, 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: RiskSourceIndex, // 组件 parent: this, // 父组件 data: { // 传递的参数 riskSourceId: val.no } }, title: '天津石化' + val.riskname }) pulseEffect([val.Latitude, val.Longitude]) setPanTo(pos, 250) } } }
