<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 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"
|
:popper-class="'select-down'">
|
<el-option
|
v-for="item in solidWasteTypeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</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="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 searchDataDisplay" :key="index"
|
@click="setBounced(item)">
|
<!-- <i class="state"></i>-->
|
<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>
|
</div>
|
</template>
|
|
<script>
|
|
import mapApi from '@/api/mapApi'
|
import publicBounced from '@/components/BaseNav/PublicBounced/PublicBounced'
|
import defaultImg from '../../../../public/assets/images/map/solidwaste/gf_green2.png'
|
|
export default {
|
name: 'SolidWasteSearch',
|
props: ['title'],
|
data () {
|
return {
|
judgeVisible: true,
|
form: {
|
keyword: '固废面板数据查询',
|
// 数据的传递
|
transferData: 1
|
},
|
levelOfRisk: [
|
{
|
name: '全部',
|
value: 1
|
},
|
{
|
name: '正常',
|
value: 2
|
},
|
{
|
name: '预警',
|
value: 3
|
}
|
],
|
// 数据搜索之后，存储数据的
|
searchDataDisplay: [],
|
instance: null,
|
intervals: [],
|
layer: window.map,
|
L: window.L,
|
times: 5,
|
colors: ['#98FB98', '#ff0000'],
|
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'
|
}]
|
}]
|
}
|
},
|
methods: {
|
// 点击搜索实现数据的搜索展示
|
async handleSearch (data) {
|
// console.log(this.form.keyword)
|
const result = await mapApi.getSolidWaste(data)
|
this.searchDataDisplay = result.Result.DataInfo
|
console.log(this.searchDataDisplay)
|
},
|
// 不同类型图片封装
|
differentTypes (judgeValue) {
|
var effectOfChange
|
if (judgeValue === 1) {
|
effectOfChange = defaultImg
|
} else {
|
effectOfChange = defaultImg
|
}
|
return effectOfChange
|
},
|
// 数据展示,点击进行弹框及点的展示
|
async setBounced (val) {
|
const pos = [val.Latitude, val.Longitude]
|
window.map.flyTo(pos, 11)
|
// 循环遍历数据 根据进行marker 的创建
|
// for (let i = 0; i < this.searchDataDisplay.length; i++) {
|
// 经纬度 位置
|
const positionX = val.Latitude
|
const positionY = val.Longitude
|
|
// 定义类型 用来区分数据的不同 1.接口接口数据来进行数据的判断 2.根据数据类型的不同，进行不同类型的图片显示
|
const judgeValue = val.StorageQty
|
var iconUrl = this.differentTypes(judgeValue)
|
|
const marker = this.L.marker([positionX, positionY], {
|
// totransferData: this.searchDataDisplay[i],
|
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.Name
|
// 基本信息 tabs
|
const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue)
|
// 详细信息展示 table
|
const resultDetailed = await mapApi.getSolidWasteDetail(dataValue)
|
|
// 绑定弹框实例
|
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.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei')
|
this.setPanTo(pos, 250)
|
}, 1000)
|
console.log(t1)
|
// clearTimeout(t1)
|
this.pulseEffect(pos)
|
},
|
|
// flayTo() 弹框的可滑动事件
|
setPanTo (pos, value) {
|
var position = pos
|
position = window.map.latLngToLayerPoint(position)
|
position.y += value
|
position = window.map.layerPointToLatLng(position)
|
window.map.flyTo(position)
|
},
|
pulseEffect (xy) {
|
// 插件 效果实现
|
var pulsingIcon = this.L.icon.pulse({
|
iconSize: [20, 20],
|
color: this.colors[0],
|
fillColor: ''
|
})
|
var picGroupMarker = this.L.marker(xy, { icon: pulsingIcon }).addTo(this.layer)
|
var times = this.times
|
// 定时
|
var timeInterval = setInterval(() => {
|
if (times > 0) {
|
times--
|
} else {
|
clearInterval(timeInterval)
|
picGroupMarker.remove()
|
}
|
}, 1000)
|
},
|
// select的option的数据选择
|
handlePipelineType (val) {
|
this.solidWasteTypeOptions.forEach(item => {
|
if (val === item.value) {
|
this.handleSearch(item.value)
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
|
</style>
|
