<template>
|
<div class="sewers-search" v-if="judgeVisible">
|
<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-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType"
|
:popper-class="'select-down'">
|
<el-option
|
v-for="item in items"
|
:key="item.code"
|
:label="item.name"
|
:value="item.name">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item :label="form.pipelineType+'：'" size="mini">
|
<el-select style="width: 100%" v-model="form.dataType" value-key="code"
|
:popper-class="'select-down'" @change="handleDataType">
|
<el-option
|
v-for="item in subItems"
|
:key="item.code"
|
:label="item.name"
|
:value="item">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-radio-group v-model="form.transferData" 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-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-button class="el-icon-search" @click="handleSearch"></el-button>
|
</div>
|
</el-form>
|
</div>
|
<el-scrollbar style="height:286.22px">
|
<div class="environmental-risk-list" v-for="(item,index) in list" :key="index"
|
@click="setBounced(item, index)">
|
<img src="../../../../public/assets/images/map/solidwaste/gf_green2.png" alt="" class="state">
|
<div>
|
<h3>###炼化部</h3>
|
<p>所属部门：<span>{{ item.Name }}</span></p>
|
<p>风险级别：<span>三级</span></p>
|
</div>
|
</div>
|
</el-scrollbar>
|
<el-card class="footer-page" v-if="total > 10">
|
<el-pagination
|
small
|
@current-change="handlePage"
|
:page-size=pageSize
|
layout="prev, pager, next"
|
:total=total
|
class="warnPagination"
|
>
|
</el-pagination>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
|
import mapApi from '@/api/mapApi'
|
import WasteSolidIndex from '@/components/base-page/WasteSolid/WasteSolidIndex'
|
import { pulseEffect, setPanTo } from '../../../utils/utils'
|
import { LayerWasteSolid } from '../../../conf/layers/LayerWasteSolid'
|
|
export default {
|
name: 'SolidWasteSearch',
|
props: ['title'],
|
data () {
|
return {
|
judgeVisible: true,
|
form: {
|
pipelineType: '固废',
|
dataType: '',
|
keyword: '',
|
// 数据的传递
|
transferData: 1
|
},
|
levelOfRisk: [
|
{
|
name: '全部',
|
value: 1
|
},
|
{
|
name: '正常',
|
value: 2
|
},
|
{
|
name: '预警',
|
value: 3
|
}
|
],
|
// 数据搜索之后，存储数据的
|
items: [LayerWasteSolid],
|
subItems: LayerWasteSolid.layers,
|
list: [],
|
total: 0,
|
// 分页
|
pageSize: 10
|
}
|
},
|
methods: {
|
// 页面切换 分页功能
|
handlePage (page) {
|
// this.wfsHelper.setPage(page)
|
this.handleSearch()
|
},
|
// select的option的数据选择
|
handlePipelineType (val) {
|
this.list = []
|
for (let i = 0; i < this.items.length; i++) {
|
const item = this.items[i]
|
if (val === item.name) {
|
this.subItems = item.layers
|
return
|
}
|
}
|
},
|
handleDataType () {
|
this.list = []
|
},
|
// 点击搜索实现数据的搜索展示
|
async handleSearch (data) {
|
// console.log(this.form.keyword)
|
const result = await mapApi.getSolidWaste(data)
|
this.list = result.Result.DataInfo
|
},
|
// 数据展示,点击进行弹框及点的展示
|
setBounced (val, index) {
|
const pos = [val.Latitude, val.Longitude]
|
window.map.setView(pos, 15)
|
this.activeNum = index
|
pulseEffect([val.Latitude, val.Longitude])
|
setPanTo(pos, 200)
|
window.$layer.open({
|
content: {
|
comp: WasteSolidIndex, // 组件
|
parent: this, // 父组件
|
data: { // 传递的参数
|
storagePlaceId: val.StoragePlaceId
|
}
|
},
|
title: val.Name
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
|
</style>
|
