<template>
  <div class="flex-row">
    <div class="basic-main" style="flex:7">
      <div id="check_map" style="height:100%">
        <img-self-safe :src="imgSrc"  width="45" style="z-index: 0"
                       height="50" class="img-rounded" v-ref:defectimg></img-self-safe>
      </div>
    </div>
    <modal :styles="'width:1230px'" width="1230px" :show.sync="showModal" v-ref:modal backdrop="false">
      <header slot="modal-header" class="modal-header" v-show="false"></header>
      <article slot="modal-body" class="modal-body" style="width: 1200px;">
        <div class="auto">
          <img style="height:800px;width: 1200px;" src="../../../assets/city_proper.png"
               v-show="city_properEnable" alt="图片加载失败"/>
          <img style="height:800px;width: 1200px;" src="../../../assets/township.png"
               v-show="townshipEnable" alt="图片加载失败"/>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-success" @click='closeModal()'>关闭</button>
      </footer>
    </modal>

    <div id="zzz" class="basic-main" style="flex:1;margin-left: 0px;overflow: hidden">
      <div class="flex">
        <div class="panel panel-info" style="flex: 1;margin-top:0px">
          <div class="panel-heading" style="height: auto">
            <h3 class="panel-title">图层设置</h3>
          </div>
          <div class="panel-body">
            <ul class="safe_ul_sty">
              <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="layers.satelliteEnable" @change="enableChange('satelliteEnable',layers.satelliteEnable)" type="checkbox"/>卫星图层</li>
              <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="layers.roadNetEnable" @change="enableChange('roadNetEnable',layers.roadNetEnable)" type="checkbox"/>网路图层</li>
              <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="layers.townshipEnable" @click="enableChange('townshipEnable')" type="checkbox"/>乡镇管网图层</li>
              <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="layers.city_properEnable" @click="enableChange('city_properEnable')" type="checkbox"/>城区管网图层</li>
              <!--<button @click="safeRefresh">刷新111</button>-->
            </ul>
          </div>
        </div>
        <div class="panel panel-info"  style="flex: 2;margin-top:0px;">
          <div class="panel-heading" style="height: auto">
            <h3 class="panel-title">覆盖物设置</h3>
          </div>
          <div class="panel-body">
            <ul class="safe_ul_sty">
              <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.checker" @change="enableChange('checker',mulchs.checker)" type="checkbox"/><img class="safe_deimg" src="../../../assets/anjianyuan.png"/>工作人员</li>
              <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.level1" @change="enableChange('level1',mulchs.level1)" type="checkbox"/><img class="safe_deimg" src="../../../assets/level1.png"/>一级隐患</li>
              <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.level2" @change="enableChange('level2',mulchs.level2)" type="checkbox"/><img class="safe_deimg" src="../../../assets/level2.png"/>二级隐患</li>
              <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.level3" @change="enableChange('level3',mulchs.level3)" type="checkbox"/><img class="safe_deimg" src="../../../assets/level3.png"/>三级隐患</li>
              <li class="safe_li_sty"><input class="safe_checkbox_sty" v-model="mulchs.problems" @change="enableChange('problems',mulchs.problems)" type="checkbox"/><img class="safe_deimg" src="../../../assets/ordinary.png"/>普通问题</li>
            </ul>
            <!--<data-grid :model="defectList" partial='list' class="table_sy" >
              <template partial='body' style="height:100%">
                <td @click="$parent.$parent.setDefectPos(row)">
                  <div style="width: 100%;"class="flex-row">
                    <img src="../../../assets/星球背景.jpg" style="width:45px;height: 50px" class="img-rounded">
                    <div >
                      <p class="safe_p" :title="row.f_item_name"><nobr>{{row.f_item_name}}</nobr></p>
                      <p class="safe_p" :title="row.f_checker_name"><nobr>{{row.f_checker_name}}</nobr></p>
                      <p class="safe_p" :title="row.f_upload_date"><nobr>{{row.f_upload_date.substring(11)}}</nobr></p>
                    </div>
                  </div>
                </td>
              </template>
            </data-grid>-->
          </div>
        </div>
        <div class="panel panel-info" style="flex: 4;margin-top:0px;height: 50%">
          <div class="panel-heading" style="height: auto">
            <h3 class="panel-title">今日隐患</h3>
          </div>
          <div class="panel-body" style="overflow: scroll">
            <ul class="safe_ul_sty">
              <li v-for="row in todayDefectList" track-by="$index" class="safe_li_sty safe_list_li" @click="setDefectPos(row)" style="border: 1px #4d4d4d solid;border-radius: 2px" >
                <div style="width: 100%;" class="flex-row">
                  <div style="width:35%">
                    <!--<img-self-safe :src="'/rs/image/file/'+row.f_path" style="float: left" width="45"
                                   height="50" class="img-rounded"></img-self-safe>-->
                    <img :src="'/rs/image/file/'+row.f_path" style="width:45px;height: 50px" @click.stop="seePhotos(row.f_path)" class="img-rounded">
                  </div>
                  <div style="width:65%">
                    <p class="safe_p" :title="row.f_item_name">{{row.f_item_name}}</p>
                    <p class="safe_p" :title="row.f_checker_name">{{row.f_checker_name}}</p>
                    <p class="safe_p" :title="row.f_upload_date">{{row.f_upload_date.substring(11)}}</p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import Vue from 'vue'
  import * as Util from '../../Util'
  import {HttpResetClass,trans} from 'vue-client'

  export default {
    title: '安检实时监控中心',
    data() {
      return {
        map:null,
        infoWindow:null,
        satellite:null,
        roadNet:null,
        checkerMulchs:null,//安检员点位
        level1Mulchs:null,//一级隐患点位
        level2Mulchs:null,//二级隐患点位
        level3Mulchs:null,//三级隐患点位
        problemsMulchs:null,//普通问题点位
        checkers:[],
        employeeList:[],
        level1:[],
        level2:[],
        level3:[],
        problems:[],
        chekckOps:null,
        defectList:{rows:[]},
        todayDefectList:[],
        intervalNum:'',
        layers:{//图层控制显示
          satelliteEnable:false,
          roadNetEnable:false,
          townshipEnable:false,
          city_properEnable:false
        },
        imgSrc:'',
        geocoder:null,//逆地理编码
        mulchs:{//覆盖物控制显示
          checker:true,
          level1:true,
          level2:true,
          level3:true,
          problems:true
        },
        styleObject :[
          {
            url: '/images/anjianyuan.png', //人员图标URL
            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
            size: new AMap.Size(26, 28)  //图标大小
          },
          {
            url: '/images/level1.png', //一级隐患图标URL
            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
            size: new AMap.Size(26, 28)  //图标大小
          },
          {
            url: '/images/level2.png', //二级隐患图标URL
            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
            size: new AMap.Size(26, 28)  //图标大小
          },
          {
            url: '/images/level3.png', //三级隐患图标URL
            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
            size: new AMap.Size(26, 28)  //图标大小
          },
          {
            url: '/images/ordinary.png', //普通问题图标URL
            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
            size: new AMap.Size(26, 28)  //图标大小
          }
        ],
        showModal:false,
        city_properEnable:false,
        townshipEnable:false
      }
    },
    async ready(){
      this.initMap()
      //tag)
      await this.getNewData()
      //tag
      this.assemblyData()
      //tag
      window.safe_closeInfoWindow=this.closeInfoWindow
      this.intervalNum=window.setInterval(this.safeRefresh, 240000)
    },
    methods: {
      seePhotos(path){
        if(path){
          this.imgSrc='/rs/image/file/'+path
          this.infoWindow.close()
          this.$refs.defectimg.open()
        }
      },
      setDefectPos(row){
        this.map.setZoomAndCenter(15,[row.f_longitude,row.f_latitude])
        let defectContent=this.getDefectContent(row)
        this.infoWindow.setContent(defectContent)
        this.infoWindow.open(this.map, [row.f_longitude,row.f_latitude]);
      },
      //获取定位人员类表
      async getNewData(){
        let res=await new HttpResetClass().load('POST', '/rs/search', {
          source: `root.getResourceById($${this.$login.f.orgid}$,$organization$).getSpecialResByType($user$).where(row.getAttributes().get($rolestr$).indexOf($需要定位人员$) != -1)`,
          userid: this.$login.f.id
        }, {resolveMsg: null, rejectMsg: null})
        let arr1=await new HttpResetClass().load("GET", `/rs/safePsoition/getPosition`, {},{resolveMsg: null, rejectMsg: null})
        //tag+'---------'+typeof arr1)
        //let d=this.toStandardTimeString()
        this.checkers=[]
        console.log("res.data",res.data)
        console.log("arr1",arr1)
        if(res.data){
          res.data.forEach((checker)=>{
            ////tag)

            for(let check in arr1.data){
              let checkerpos=JSON.parse(arr1.data[check])
              ////tag+check)
              if(this.$login.f.rolestr.includes('定位管理员')==true){
                checkerpos.userid=checker.userid
                checkerpos.f_user_telephone=checker.f_user_telephone
                checkerpos.rolestr=checker.rolestr
                this.checkers.push(checkerpos)
              }else{
                if(checker.id==check){
                  //tag
                  console.log("zhaodao;e",checkerpos)
                  checkerpos.userid=checker.userid
                  checkerpos.f_user_telephone=checker.f_user_telephone
                  checkerpos.rolestr=checker.rolestr
                  this.checkers.push(checkerpos)
                }
              }
            }
          })
        }
        let td=Util.toStandardDateString()
        //获取今天上传的所有隐患
        let arr=await new HttpResetClass().load("POST", `rs/sql/defectDetails`, {data:{condition:` f_filialeid in ('${this.$login.f.orgid}') and tdil.f_create_time>'${Util.toStartDateYearString()} 00:00:00' and tdi.F_LONGITUDE is not null`}},
          {resolveMsg: null, rejectMsg: null})
        //tag)
        if(arr.data){
          this.todayDefectList=[]
          arr.data.forEach((defect)=>{
            //拿出今天的隐患放到今日隐患列表中
            console.log("td",td)
            console.log("defect",defect)
            console.log("defect",defect)
            if(defect.f_upload_date.indexOf(td)!=-1){
              this.todayDefectList.push(defect)
            }
            //取出一二三级隐患
            console.log("二级隐患",defect.f_defect_level=='二级隐患')
            if(defect.f_defect_level=='一级隐患'){
              this.level1.push(defect)
            }else if(defect.f_defect_level=='二级隐患'){
              this.level2.push(defect)
            }else if(defect.f_defect_level=='三级隐患'){
              this.level3.push(defect)
            }else{
              this.problems.push(defect)
            }
          })
        }
        this.defectList.rows=arr.data
      },
      getDefectContent(row){
        return `
             <div style="padding:0px;margin-left: 8px;"><b>隐患详情</b></div>
              <div class="panel panel-default" style="background-color: azure;border-radius: 5px;margin-left: 8px;">
                <div class="panel-body">
                  <ul style="list-style-type: none;font-size: 15px;">
                      <li style="margin: 3px 0;">隐患内容: ${row.f_item_name}-${row.f_item_value}</li>
                      <li style="margin: 3px 0;">隐患级别: ${row.f_defect_level}</li>
                      <li style="margin: 3px 0;">发现人员: ${row.f_checker_name}</li>
                      <li style="margin: 3px 0;">上报时间: ${row.f_upload_date}</li>
                      <li style="margin: 3px 0;">是否处理: ${row.F_IS_REPAIRED?row.F_IS_REPAIRED:'未处理'}</li>
                      <li style="margin: 3px 0;">隐患位置: ${row.f_address}</li>
                  </ul>
                </div>
              </div>`
      },
      getCheckerContent(row){
        return `
            <div style="padding:0px;margin-left: 8px;"><b>员工信息</b></div>
            <div class="panel panel-default" style="background-color: azure;border-radius: 5px;margin-left: 8px;">
              <div class="panel-body">
                <ul style="list-style-type: none;font-size: 15px;">
                    <li style="margin: 3px 0;">员工工号: ${row.userid}</li>
                    <li style="margin: 3px 0;">员工姓名: ${row.name}</li>
                    <li style="margin: 3px 0;">员工电话: ${row.f_user_telephone?row.f_user_telephone:'未查到电话'}</li>
                    <li style="margin: 3px 0;">角色列表: ${row.rolestr}</li>
                    <li style="margin: 3px 0;">剩余电量: ${row.f_battery_level} %</li>
                    <li style="margin: 3px 0;">剩余内存: ${row.f_internal_quote}  MB</li>
                    <li style="margin: 3px 0;">信号强度: ${row.f_signal_strength}</li>
                    <li style="margin: 3px 0;">实时位置: ${row.checkAddress}</li>
                    <li style="margin: 3px 0;">状态更新时间: ${row.uploadTime}</li>
                    <!--<li style="margin: 3px 0;">客户地址: 河南省周口市工农南路xx酒店302</li>-->
                </ul>
              </div>
            </div>`
      },
      assemblyData(){
        let that=this
        this.checkerInit()
        /*this.checkers=[
            {f_longitude:114.718285,f_latitude:33.610584},
            {f_longitude:114.713736,f_latitude:33.642387}
          ]*/
        /*this.level1=[
            {f_longitude:114.68736,f_latitude:33.655248},
            {f_longitude:114.716736,f_latitude:33.627523}
          ]*/
        /*this.level2=[
            {f_longitude:114.676833,f_latitude:33.609726},
            {f_longitude:114.684013,f_latitude:33.642387}
          ]
        this.level3=[
            {f_longitude:114.71502,f_latitude:33.648675},
            {f_longitude:114.725002,f_latitude:33.637242}
          ]
        this.problems=[
            {f_longitude:114.696969,f_latitude:33.635241},
            {f_longitude:114.68836,f_latitude:33.655248}
          ]*/
        /*let a1=[]
        for(let i=0;i<this.checkers.length;i++){
          a1.push({
            lnglat: [this.checkers[i].f_longitude,this.checkers[i].f_latitude], //点标记位置
            name: '安检员',
            id:i,
            rowstr:this.checkers[i]
          })
        }
        // 将数组设置到 massMarks 图层
        this.checkerMulchs.setData(a1);
        // 将 massMarks 添加到地图实例
        this.checkerMulchs.setMap(this.map);*/
        let a2=[]
        for(let i=0;i<this.level1.length;i++){
          a2.push({
            lnglat: [this.level1[i].f_longitude, this.level1[i].f_latitude], //点标记位置
            name: '一级隐患',
            id:i,
            rowstr:this.level1[i]
          })
        }
        // 将数组设置到 massMarks 图层
        this.level1Mulchs.setData(a2);
        // 将 massMarks 添加到地图实例
        this.level1Mulchs.setMap(this.map);


        let a3=[]
        for(let i=0;i<this.level2.length;i++){
          a3.push({
            lnglat: [this.level2[i].f_longitude,this.level2[i].f_latitude], //点标记位置
            name: '二级隐患',
            id:i,
            rowstr:this.level2[i]
          })
        }
        // 将数组设置到 massMarks 图层
        this.level2Mulchs.setData(a3);
        // 将 massMarks 添加到地图实例
        this.level2Mulchs.setMap(this.map);

        let a4=[]
        for(let i=0;i<this.level3.length;i++){
          a4.push({
            lnglat: [this.level3[i].f_longitude, this.level3[i].f_latitude], //点标记位置
            name: '三级隐患',
            id:i,
            rowstr:this.level3[i]
          })
        }
        // 将数组设置到 massMarks 图层
        this.level3Mulchs.setData(a4);
        // 将 massMarks 添加到地图实例
        this.level3Mulchs.setMap(this.map);


        let a5=[]
        for(let i=0;i<this.problems.length;i++){
          a5.push({
            lnglat: [this.problems[i].f_longitude, this.problems[i].f_latitude], //点标记位置
            name: '普通问题',
            id:i,
            rowstr:this.problems[i]
          })
        }
        // 将数组设置到 massMarks 图层
        this.problemsMulchs.setData(a5);
        // 将 massMarks 添加到地图实例
        this.problemsMulchs.setMap(this.map);
        //组装安检员点位集合
      },
      //处理图层和覆盖物的显示隐藏
      enableChange(vname,val){
        //tag
        //tag
        switch(vname){
          case 'satelliteEnable':
            if(val){
              this.map.add(this.satellite)
            }else{
              this.map.remove(this.satellite)
            }
            break;
          case 'roadNetEnable':
            if(val){
              this.map.add(this.roadNet)
            }else{
              this.map.remove(this.roadNet)
            }
            break;
          case 'checker':
            if(val){
              this.chekckOps.show()
            }else{
              this.chekckOps.hide()
            }
            break;
          case 'level1':
            if(val){
              this.level1Mulchs.show()
            }else{
              this.level1Mulchs.hide()
            }
            break;
          case 'level2':
            if(val){
              this.level2Mulchs.show()
            }else{
              this.level2Mulchs.hide()
            }
            break;
          case 'level3':
            if(val){
              this.level3Mulchs.show()
            }else{
              this.level3Mulchs.hide()
            }
            break;
          case 'problems':
            if(val){
              this.problemsMulchs.show()
            }else{
              this.problemsMulchs.hide()
            }
            break;
          case 'townshipEnable':
            this.showModal=true
            this.townshipEnable=true
            this.city_properEnable=false
            break;
          case 'city_properEnable':
            this.showModal=true
            this.city_properEnable=true
            this.townshipEnable=false
            break;
          default:
        }
      },
      closeModal(){
        this.showModal=false
        this.city_properEnable=false
        this.townshipEnable=false
        this.layers.townshipEnable=false
        this.layers.city_properEnable=false
      },
      initMap(){
        let that=this
        this.map = new AMap.Map('check_map', {
          zoom: 12,
          viewMode: '2D',  //设置地图模式
          lang: 'zh_cn',  //设置地图语言类型
          zindex: 99
        });
        // 异步加载地图插件
        AMap.plugin(
          ['AMap.ToolBar','AMap.Geolocation','AMap.Geocoder'], () => {//异步加载插件
            // 自动定位插件
            var geolocation = new AMap.Geolocation({
              // 是否使用高精度定位，默认：true
              enableHighAccuracy: true,
              // 设置定位超时时间，默认：无穷大
              showbutton: true,
              //控制按钮的显示
              timeout: 10000,
              // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
              buttonOffset: new AMap.Pixel(10, 20),
              //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
              //zoomToAccuracy: true,
              //  定位按钮的排放位置,  RB表示右下
              buttonPosition: 'LB'
            })
            that.geocoder = new AMap.Geocoder({
              radius: 500 //范围，默认：500
            });
            that.map.addControl(geolocation)
            geolocation.getCurrentPosition();
            that.map.addControl(new AMap.ToolBar()) //初始化工具插件
          });
        this.map.setDefaultCursor('move');
        //this.map.setMapStyle('amap://styles/whitesmoke');
        this.satellite=new AMap.TileLayer.Satellite()//卫星图层
        this.roadNet=new AMap.TileLayer.RoadNet({opacity:0.8})//网路图层
        //安检员位置集合
        this.chekckOps=new AMap.OverlayGroup()
        //初始化窗体
        this.infoWindow = new AMap.InfoWindow({
          anchor: 'bottom-center',
          //isCustom: true,  //使用自定义窗体
          autoMove:true,
          content: '',
          offset: new AMap.Pixel(0, -25)
        });
        //安检员点位
        /*this.checkerMulchs = new AMap.MassMarks([], {
          opacity: 0.8, // 图层的透明度，取值范围[0,1]，1代表完全不透明，0代表完全透明
          zIndex: 111, //图层叠加的顺序值，0表示最底层。默认zIndex：5
          cursor: 'pointer', //指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor
          //alwaysRender:false,
          style: this.styleObject[0]
        });
        //tag
        this.checkerMulchs.on('click',function (e) {
          //tag)
          let checkAddress='未获取到实时位置'
          that.geocoder.getAddress(e.data.lnglat, function(status, result) {
            if (status === 'complete'&& result.regeocode) {
              checkAddress = result.regeocode.formattedAddress;
            }else{
              log.error('根据经纬度查询地址失败')
            }
            e.data.rowstr.checkAddress=checkAddress
            let defectContent=that.getCheckerContent(e.data.rowstr)
            that.infoWindow.setContent(defectContent)
            that.infoWindow.open(that.map, e.data.lnglat);
          });
        })*/
        //一级隐患点位
        this.level1Mulchs=new AMap.MassMarks([], {
          opacity: 0.8, // 图层的透明度，取值范围[0,1]，1代表完全不透明，0代表完全透明
          zIndex: 111, //图层叠加的顺序值，0表示最底层。默认zIndex：5
          cursor: 'pointer', //指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor
          //alwaysRender:false,
          style: this.styleObject[1]
        });
        this.level1Mulchs.on('click',function (e) {
          //tag)
          let defectContent=that.getDefectContent(e.data.rowstr)
          that.infoWindow.setContent(defectContent)
          that.infoWindow.open(that.map, e.data.lnglat);
        })
        //二级隐患点位
        this.level2Mulchs=new AMap.MassMarks([], {
          opacity: 0.8, // 图层的透明度，取值范围[0,1]，1代表完全不透明，0代表完全透明
          zIndex: 111, //图层叠加的顺序值，0表示最底层。默认zIndex：5
          cursor: 'pointer', //指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor
          //alwaysRender:false,
          style: this.styleObject[2]
        });
        this.level2Mulchs.on('click',function (e) {
          //tag)
          let defectContent=that.getDefectContent(e.data.rowstr)
          that.infoWindow.setContent(defectContent)
          that.infoWindow.open(that.map, e.data.lnglat);
        })
        //三级隐患点位
        this.level3Mulchs=new AMap.MassMarks([], {
          opacity: 0.8, // 图层的透明度，取值范围[0,1]，1代表完全不透明，0代表完全透明
          zIndex: 111, //图层叠加的顺序值，0表示最底层。默认zIndex：5
          cursor: 'pointer', //指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor
          //alwaysRender:false,
          style: this.styleObject[3]
        });
        this.level3Mulchs.on('click',function (e) {
          //tag)
          let defectContent=that.getDefectContent(e.data.rowstr)
          that.infoWindow.setContent(defectContent)
          that.infoWindow.open(that.map, e.data.lnglat);
        })
        //普通问题点位
        this.problemsMulchs=new AMap.MassMarks([], {
          opacity: 0.8, // 图层的透明度，取值范围[0,1]，1代表完全不透明，0代表完全透明
          zIndex: 111, //图层叠加的顺序值，0表示最底层。默认zIndex：5
          cursor: 'pointer', //指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor
          //alwaysRender:false,
          style: this.styleObject[4]
        });
        this.problemsMulchs.on('click',function (e) {
          //tag)
          let defectContent=that.getDefectContent(e.data.rowstr)
          that.infoWindow.setContent(defectContent)
          that.infoWindow.open(that.map, e.data.lnglat);
        })


      },
      closeInfoWindow(){
        this.infoWindow.close()
      },
      checkerInit(){
        /*let marker1 = new AMap.Marker({
                position: [114.574809,33.621501],
                icon:'http://192.168.20.28:8400/image/anjianyuan.png'
              });
              //tag
              marker1.setLabel({
                //offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量
                content: "<div class='info' style='background-color: #0b87e2'>何文强</div>", //设置文本标注内容
                direction: 'bottom' //设置文本标注方位
              })*/
        let that = this
        this.chekckOps.clearOverlays()
        for(let j=0;j<this.checkers.length;j++){
          //tag+"---"+this.checkers[j].f_longitude+"---"+this.checkers[j].f_latitude)
          //let o={f_longitude:"114.72"+(Math.floor(Math.random()*(9999-1000))+1000),f_latitude:"33.56"+(Math.floor(Math.random()*(9999-1000))+1000),name:"hwq3",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865}
          let marker=new AMap.Marker({
            //map: that.map,
            offset:new AMap.Pixel(-18, -10),
            position: [this.checkers[j].f_longitude,this.checkers[j].f_latitude],
            icon:new AMap.Icon({
              image: '/images/anjianyuan.png', //人员图标URL
              imageOffset: new AMap.Pixel(0, 0),  // 图标偏移位置
              imageSize: new AMap.Size(36, 36)  //图标大小
            }),
            label:{
              //offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量
              content: `<div class='info' style='background-color: rgb(0,185,255);color: #ffffff;padding: 5px;border-radius: 4px'>${this.checkers[j].name}</div>`, //设置文本标注内容
              direction: 'bottom', //设置文本标注方位
              offset:new AMap.Pixel(0, -4)
            },
            extData:this.checkers[j]
          })
          this.chekckOps.addOverlay(marker)

        }
        this.chekckOps.setMap(this.map)
        this.chekckOps.on('click',function (e) {
          let pe=e.target.getExtData()
          for(let obj in pe){
            //tag
          }
          let checkAddress='未获取到实时位置'
          that.geocoder.getAddress([pe.f_longitude,pe.f_latitude], function(status, result) {
            if (status === 'complete'&& result.regeocode) {
              checkAddress = result.regeocode.formattedAddress;
            }/*else{
              log.error('根据经纬度查询地址失败')
            }*/
            pe.checkAddress=checkAddress
            let defectContent=that.getCheckerContent(pe)
            that.infoWindow.setContent(defectContent)
            that.infoWindow.open(that.map, [pe.f_longitude,pe.f_latitude])
          })
        })
        /*AMap.event.addListener(this.ops, 'click', function (e) {
              //tag)
              //that.infoWindow.open(that.map, marker.getPosition());
            })*/
      },
      //获取当前时间的前两个小时
      getNowFormatDate(house=0) {
        //tag
        let date = new Date();
        let seperator1 = "-";
        let seperator2 = ":";
        if(house != 0){
          date.setHours(date.getHours()-house)
        }
        let month = date.getMonth() + 1;
        let strDate = date.getDate();
        let hour = date.getHours();
        let min = date.getMinutes();
        let second = date.getSeconds();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if (hour >= 0 && hour <= 9) {
          hour = "0" + hour;
        }
        if (min >= 0 && min <= 9) {
          min = "0" + min;
        }
        if (second >= 0 && second <= 9) {
          second = "0" + second;
        }
        let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
          + " " + hour + seperator2 + min
          + seperator2 + second;
        return currentdate;
      },
      toStandardTimeString() {
        let dt = new Date()
        let month = dt.getMonth()+1
        let date = dt.getDate()
        let hour = dt.getHours()
        let min = dt.getMinutes()
        let sec = dt.getSeconds()
        return dt.getFullYear() + '-' + (month<10? '0'+ month : month) + '-' + (date<10? '0'+ date : date)
          + ' ' + (hour<10? '0'+ hour : hour)
      },
      async safeRefresh(){
        //tag
        //获取所有安检员的点位集合-----测试数据
        /*this.checkers=[]
        this.checkers.push({f_longitude:114.7318,f_latitude:33.567126,name:"hwq1",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
        this.checkers.push({f_longitude:114.726801,f_latitude:33.566912,name:"hwq2",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
        this.checkers.push({f_longitude:114.723346,f_latitude:33.568932,name:"hwq3",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
        this.checkers.push({f_longitude:114.711741,f_latitude:33.585519,name:"hwq4",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
        this.checkers.push({f_longitude:114.756716,f_latitude:33.594528,name:"hwq5",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
        this.defectList.rows=[]
        this.defectList.rows.push({"f_longitude":114.661358,"f_latitude":33.596897,"f_checker_name":"hwq2","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
        this.defectList.rows.push({"f_longitude":114.659985,"f_latitude":33.62892,"f_checker_name":"hwq3","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
        this.defectList.rows.push({"f_longitude":114.634579,"f_latitude":33.616627,"f_checker_name":"hwq4","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
        this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
        this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
        this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
        this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
        this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
        this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
        this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})*/
        await this.getNewData()
        this.assemblyData()
      }
    },
    computed:{

    },
    destroyed(){
      window.clearInterval(this.intervalNum)
    }
  }

</script>

<style lang="less" scoped>

  .safe_checkbox_sty{
    vertical-align:text-bottom;
    margin-right: 3px;

  }
  .safe_ul_sty{
    list-style-type: none;
    font-size: 13px;
    padding-left: 5px;
  }
  .safe_li_sty{
    font-size: 13px;
    margin-top: 5px;
  }
  .safe_p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 0 10px;

    font-size: 12px;
  }
  .safe_list_li{
    margin-top: 5px;
    background-color: #ffffff;
    border: solid 1px #f0f4fa !important;
    color: #666666 !important;
    font-size: 1.3rem !important;
    font-family: PINGFANG-MEDIUM !important;
    padding: 8px;
  }
  .safe_list_li:hover{
    background-color: rgb(203,234,241);
  }
  .safe_deimg{
    vertical-align: text-bottom;
    width: 15px;
    margin-right: 3px;
  }
</style>

