| | |
| | | <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> |
| | | <!-- <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> |
| | |
| | | |
| | | 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', |
| | |
| | | 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: '区域', |
| | |
| | | label: '长度(m)', |
| | | key: 'length' |
| | | }] |
| | | }], |
| | | 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'] |
| | | }] |
| | | } |
| | | }, |
| | | methods: { |
| | |
| | | // 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 |