| | |
| | | <template> |
| | | <div class="sewers-search" v-if="judgeVisible"> |
| | | <div class="search-title">{{title}}</div> |
| | | <div class="sewers-search" v-if="gdVisible"> |
| | | <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 v-for="(item,index) in solidWasteTypeOptions" :key="index" :label="item.label+':'" size="mini" |
| | | class="search-panel-item"> |
| | | <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType" |
| | | <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 solidWasteTypeOptions" |
| | | v-for="item in inareaTypeOptions" |
| | | :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.enterpriseVal" @change="enterpriseType" |
| | | :popper-class="'select-down'"> |
| | | <el-option |
| | | v-for="item in enterpriseTypeOptions" |
| | | :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" |
| | | :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" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </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}}</span></el-radio> |
| | | <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 >--> |
| | | <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-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="查询">--> |
| | | <!-- <input type="button" class="btn-reset" @click="handleSearch" value="重置">--> |
| | | <!-- </el-form-item>--> |
| | | </el-form> |
| | | <div> |
| | | <el-card class="box-card" v-for="(item,index) in searchDataDisplay" :key="index"> |
| | | <div v-if="total > 3"> |
| | | {{ item.CompanyName }} |
| | | </div> |
| | | </el-card> |
| | | <!-- <el-pagination--> |
| | | <!-- small--> |
| | | <!-- layout="prev, pager, next"--> |
| | | <!-- :total=total--> |
| | | <!-- :current-page=1--> |
| | | <!-- class="warnPagination"--> |
| | | <!-- >--> |
| | | <!-- </el-pagination>--> |
| | | </div> |
| | | <!-- <el-scrollbar style="height:100%">--> |
| | | <!-- <el-card class="footer-page">--> |
| | | <!-- <ul>--> |
| | | <!-- {{ searchDataDisplay }}--> |
| | | <!-- <li v-for="(item,index) in searchDataDisplay" :key="index">--> |
| | | <!-- {{ item.CompanyName }}--> |
| | | <!-- </li>--> |
| | | <!-- </ul>--> |
| | | <!-- </el-card>--> |
| | | <!-- <el-pagination--> |
| | | <!-- small--> |
| | | <!-- @current-change="handlePage"--> |
| | | <!-- :page-size=pageSize--> |
| | | <!-- layout="prev, pager, next"--> |
| | | <!-- :total=total--> |
| | | <!-- :current-page=current--> |
| | | <!-- class="warnPagination"--> |
| | | <!-- >--> |
| | | <!-- </el-pagination>--> |
| | | <!-- </el-card>--> |
| | | <!-- </el-scrollbar>--> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <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>{{ item.Name }}</h3> |
| | | <p>所属部门:<span>{{ item.porltName }}</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"> |
| | | <el-pagination |
| | | small |
| | | @current-change="handlePage" |
| | | :page-size=pageSize |
| | | layout="prev, pager, next" |
| | | :total=total |
| | | :current-page=current |
| | | class="warnPagination" |
| | | > |
| | | </el-pagination> |
| | | </el-card> |
| | | </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>--> |
| | | </template> |
| | | <script> |
| | | |
| | | import mapApi from '@/api/mapApi' |
| | | import WasteWaterIndex from '../../BaseNav/WasteWater/WasteWaterIndex' |
| | | import { pulseEffect, setPanTo } from '../../../utils/utils' |
| | | |
| | | export default { |
| | | name: 'SolidWasteSearch', |
| | | name: 'WaterWasteSearch', |
| | | props: ['title'], |
| | | data () { |
| | | return { |
| | | levelOfRisk: [ |
| | | { name: '全部', value: '1' }, |
| | | { name: '正常', value: '2' }, |
| | | { name: '超标', value: '3' }, |
| | | { name: '异常', value: '4' }, |
| | | { name: '停产', value: '5' } |
| | | ], |
| | | judgeVisible: true, |
| | | solidWasteTypeOptions: [{ |
| | | value: '1', |
| | | label: '区域', |
| | | options: [{ |
| | | value: '1', |
| | | layerName: '固废', |
| | | key: 'pipename', |
| | | label: '全部固废' |
| | | }], |
| | | labelList: [{ |
| | | label: '输送介质', |
| | | key: 'mediumtype' |
| | | }, { |
| | | label: '长度(m)', |
| | | key: 'length' |
| | | }] |
| | | }, { |
| | | value: '2', |
| | | label: '企业名称', |
| | | options: [{ |
| | | value: '1', |
| | | layerName: '固废', |
| | | key: 'pipename', |
| | | label: '全部固废' |
| | | }], |
| | | labelList: [{ |
| | | label: '输送介质', |
| | | key: 'mediumtype' |
| | | }, { |
| | | label: '长度(m)', |
| | | key: 'length' |
| | | }] |
| | | }, { |
| | | value: '3', |
| | | label: '二级单位', |
| | | options: [{ |
| | | value: '1', |
| | | layerName: '固废', |
| | | key: 'pipename', |
| | | label: '全部固废' |
| | | }], |
| | | labelList: [{ |
| | | label: '输送介质', |
| | | key: 'mediumtype' |
| | | }, { |
| | | label: '长度(m)', |
| | | key: 'length' |
| | | }] |
| | | }, { |
| | | value: '4', |
| | | label: '企业名称', |
| | | options: [{ |
| | | value: '1', |
| | | layerName: '固废', |
| | | key: 'pipename', |
| | | label: '全部固废' |
| | | }], |
| | | labelList: [{ |
| | | label: '输送介质', |
| | | key: 'mediumtype' |
| | | }, { |
| | | label: '长度(m)', |
| | | key: 'length' |
| | | }] |
| | | }], |
| | | radio: '1', |
| | | gdVisible: true, |
| | | list: [], |
| | | total: 0, |
| | | inareaTypeOptions: [], |
| | | enterpriseTypeOptions: [], |
| | | enterpriseSubunitsTypeOptions: [], |
| | | form: { |
| | | keyword: '输入关键字' |
| | | areaVal: '', |
| | | enterpriseVal: '', |
| | | enterpriseSubunitsVal: '', |
| | | type: '1' |
| | | }, |
| | | searchDataDisplay: [], |
| | | total: 0 |
| | | // pageSize: 10, |
| | | // current: 1, |
| | | isWaybillHover: true, |
| | | isRouteHover: false, |
| | | levelOfRisk: [ |
| | | { |
| | | name: '全部', |
| | | value: '1' |
| | | }, |
| | | { |
| | | name: '正常', |
| | | value: '2' |
| | | }, |
| | | { |
| | | name: '超标', |
| | | value: '3' |
| | | }, |
| | | { |
| | | name: '异常', |
| | | value: '4' |
| | | }, |
| | | { |
| | | name: '停产', |
| | | value: '5' |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | methods: { |
| | | handlePipelineType (val) { |
| | | this.solidWasteTypeOptions.forEach((itm) => { |
| | | // 区域筛选 |
| | | areaType (val) { |
| | | this.pipelineTypeOptions.forEach((itm) => { |
| | | if (val === itm.value) { |
| | | this.dataTypeOptions = itm.options |
| | | this.form.pipelineType = itm.label |
| | | this.form.labelList = itm.labelList |
| | | |
| | | } |
| | | }) |
| | | this.form.dataType = this.dataTypeOptions[0].label |
| | | this.form.key = this.dataTypeOptions[0].key |
| | | }, |
| | | // 点击搜索实现数据的搜索展示 |
| | | // 企业筛选 |
| | | enterpriseType (val) { |
| | | this.dataTypeOptions.forEach((itm) => { |
| | | if (val === itm.value) { |
| | | |
| | | } |
| | | }) |
| | | }, |
| | | // 二级单位筛选 |
| | | enterpriseSubunitsType (val) { |
| | | |
| | | }, |
| | | // 三级单位筛选 |
| | | async handleSearch () { |
| | | // console.log(this.form.keyword) |
| | | const result = await mapApi.getWasteWater() |
| | | console.log(result) |
| | | this.searchDataDisplay = result.Result.DataInfo |
| | | this.total = result.Result.DataInfo.length |
| | | const param = { |
| | | pipelineType: this.form.pipelineType, |
| | | dataType: this.form.dataType |
| | | } |
| | | // console.log(param) |
| | | const res = await mapApi.getWasteWater(param) |
| | | // console.log(res) |
| | | this.list = res.Result.DataInfo |
| | | console.log(this.list) |
| | | }, |
| | | // 弹窗展示 |
| | | 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) |
| | | console.log(val) |
| | | 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) |
| | | } |
| | | } |
| | | } |