<template>
<div>
    <span>监测点:</span>
    <el-input v-model="input" placeholder="请输入内容" style="width:12%"></el-input>
    <span>指标类型:</span>
                         <el-select v-model="zhibiao"  style="width:15%"
                        placeholder="请选择指标类型" >
                           <el-option
                            v-for="item in zhibiaooption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            >
                        </el-option>
                        </el-select>
    <span>预警等级:</span>
     <el-select v-model="yjdj"  style="width:8%"
                          multiple
                          collapse-tags
                        placeholder="请选择预警等级" >
                           <el-option
                            v-for="item in yjdjoption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            >
                        </el-option>
                        </el-select>
    <el-button type="primary" @click="queryinput">查询</el-button>
    <span>污染预警:</span>
    <el-tooltip class="item" effect="dark" content="重度污染" placement="top">
    <el-button style="background:#FF3300;color:#fff" circle>1级</el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="中度污染" placement="top">
     <el-button style="background:#FF9900;color:#fff" circle>2级</el-button>
     </el-tooltip>
     <el-tooltip class="item" effect="dark" content="轻度污染" placement="top">
     <el-button style="background:#FFCC00;color:#fff" circle>3级</el-button>
     </el-tooltip>
     <el-tooltip class="item" effect="dark" content="轻微污染" placement="top">
     <el-button style="background:#3399FF;color:#fff" circle>4级</el-button>
     </el-tooltip>
     <el-tooltip class="item" effect="dark" content="无污染" placement="top">
     <el-button style="background:#339933;color:#fff" circle>5级</el-button>
     </el-tooltip>
    <baidu-map :center="center" :zoom="zoom" @ready="handler" class="electr-typey119" @click="getClickInfo" :scroll-wheel-zoom='true'>   
    </baidu-map>
</div>
</template>
<script>
import {
    noContaminated,
    qwContaminated,
    qdContaminated,
    centerContaminated,
    zdContaminated,
} from '../../../assets/commjs/color'
export default {
  name: 'TestBaiDu',
  props: {
    item:{
         type:Object,
          default: null
    }
    },
  data () {
    return {
      center: {lng:118.8921,  lat:31.32751},
      zoom: 6,
      input:'',
      zhibiao:3,
      yjdj:[0],
      yjdjoption:[
       {value: 0,label: '1级'},
       {value: 1,label: '2级'},
       {value: 2,label: '3级'},
       {value: 3,label: '4级'},
       {value: 4,label: '5级'},   
      ],
      zhibiaooption:[
       {value: 0,label: '频率偏差'},
       {value: 1,label: '电压偏差'},
       {value: 2,label: '三相电压不平衡度'},
       {value: 3,label: '谐波电压'},
       {value: 4,label: '长时闪变'},
       {value: 5,label: '谐波电流'}, 
       {value: 6,label: '负序电流'},
       {value: 7,label: '间谐波电压'} 
      ]
    }
  },
  methods: {
    handler ({BMap, map}) {
      var point = new BMap.Point(118.8921, 31.32751)
      var point1 = new BMap.Point(116.384434,39.896117)
      var point2 = new BMap.Point(113.62484,34.87892)
      var point3 = new BMap.Point(119.144029,26.363701)
      var point4 = new BMap.Point(114.213553,30.716145)
      var point5 = new BMap.Point(101.99926175379778, 25.40449676862417)
      var point6 = new BMap.Point(102.39926175379778, 25.50449676862417)
      var point7 = new BMap.Point(102.29926175379778, 25.60449676862417)
      map.centerAndZoom(point, 6)
      var marker = new BMap.Marker(point) // 创建标注
      var marker1 = new BMap.Marker(point1) // 创建标注
      var marker2 = new BMap.Marker(point2) // 创建标注
      var marker3 = new BMap.Marker(point3) // 创建标注
      var marker4 = new BMap.Marker(point4) // 创建标注
      var marker5 = new BMap.Marker(point5) // 创建标注
      var marker6 = new BMap.Marker(point6) // 创建标注
      var marker7 = new BMap.Marker(point7) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
      map.addOverlay(marker1) // 将标注添加到地图中
      map.addOverlay(marker2)
      map.addOverlay(marker3)
      map.addOverlay(marker4)
      map.addOverlay(marker5)
      map.addOverlay(marker6)
      map.addOverlay(marker7)
     // var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'green', fillColor: 'green' })
      var circle1 = new BMap.Circle(point,100000,{fillColor:noContaminated, strokeWeight: 1 ,fillOpacity: 0.7, strokeOpacity: 0.1});
      var circle2 = new BMap.Circle(point1,100000,{fillColor:qwContaminated, strokeWeight: 1 ,fillOpacity: 0.7, strokeOpacity: 0.1});
      var circle3 = new BMap.Circle(point2,100000,{fillColor:qdContaminated, strokeWeight: 1 ,fillOpacity: 0.7, strokeOpacity: 0.1});
      var circle4 = new BMap.Circle(point3,100000,{fillColor:centerContaminated, strokeWeight: 1 ,fillOpacity: 0.7, strokeOpacity: 0.1});
      var circle5 = new BMap.Circle(point4,100000,{fillColor:zdContaminated, strokeWeight: 1 ,fillOpacity: 0.8, strokeOpacity: 0.1});
      map.addOverlay(circle1)
      map.addOverlay(circle2) 
      map.addOverlay(circle3)
      map.addOverlay(circle4)
      map.addOverlay(circle5)

        map.centerAndZoom(new BMap.Point(118.8921, 31.32751), 6);
        // 创建城市选择控件
        var cityControl = new BMap.CityListControl({
            // 控件的停靠位置（可选，默认左上角）
            anchor: BMAP_ANCHOR_TOP_LEFT,
            // 控件基于停靠位置的偏移量（可选）
            offset: new BMap.Size(10, 5)
        });
        // 将控件添加到地图上
        map.addControl(cityControl);
 
        //  map.setMapType(BMAP_EARTH_MAP);   
        //  map.setTilt(73);
         window.local = new BMap.LocalSearch(map, {
		   renderOptions:{map: map}
	     });
	     
    },
    queryinput(){
         window.local.search(this.input);
    },
    getClickInfo (e) {
     
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    }
}}
</script>
<style  scoped>


.electr-typey119 {
   font-size: 30px;
   width: 100%;
   height:90vh;
 
}
.anchorBL{
  display:none;
} 
</style> >
