<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>
    <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>
              <!--<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>
          </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">
            <div class="safe_ul_sty">
              <p class="safe_li_sty">总数：
                <button @click.stop="allmodal([...this.allpersonnelsum,...this.allpersonnellixian],'总数')" class="btn btn-link">
                  {{ allpersonnelsumdata.length ? allpersonnelsumdata.length : 0 }}
                </button>
              </p>
              <p class="safe_li_sty">在线人数：
                <button @click.stop="allmodal(allpersonnelsum,'在线人数')" class="btn btn-link">
                  {{ allpersonnelsum.length ? allpersonnelsum.length : 0 }}
                </button>
              </p>
              <p class="safe_li_sty">离线人数：
                <button @click.stop="allmodal(allpersonnellixian,'离线人数')" class="btn btn-link">
                  {{ allpersonnellixian.length ? allpersonnellixian.length : 0 }}
                </button>
              </p>
            </div>

          </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>
  <!--  <work-busy :is-busy="loading"></work-busy>-->
</template>

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

export default {
  title: '安检实时监控中心',
  data() {
    return {
      loading: false,
      map:null,
      infoWindow:null,
      satellite:null,
      roadNet:null,
      allpersonnelsum: [],//在线人数
      allpersonnelsumdata: [],//总数
      allpersonnellixian: [],//离线
      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
      },
      imgSrc:'',
      geocoder:null,//逆地理编码
      mulchs:{//覆盖物控制显示
        checker:true,
        level1:true,
        level2:true,
        level3:true,
        problems:true
      },
      styleObject :[
        {
          url: '/static/images/person.png',
          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
          size: new AMap.Size(26, 28)  //图标大小
        },
        {
          url: '/static/images/level1.png',
          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
          size: new AMap.Size(26, 28)  //图标大小
        },
        {
          url: '/static/images/level2.png',
          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
          size: new AMap.Size(26, 28)  //图标大小
        },
        {
          url: '/static/images/level3.png',
          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
          size: new AMap.Size(26, 28)  //图标大小
        },
        {
          url: '/static/images/ordinary.png',
          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
          size: new AMap.Size(26, 28)  //图标大小
        }
      ]
    }
  },
  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: {
    allmodal (row, type) {
      if (row.length === 0) {
        return this.$showAlert('暂无数据！！！', 'warning', 2000)
      }
      const persons = [{label: '全部', value: ''}]
      for (const item of row) {
        persons.push({label: item.name, value: item.name})
      }
      this.persons = persons
      this.showname = type
      this.showdata = row
      this.showdataSearch = row
      this.showModal = true
      this.onLineNumber = this.allpersonnelsum.length
      this.noOnLineNumber = this.allpersonnellixian.length

    },
    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 () {
      this.loading = true
      this.allpersonnellixian = []
      let res = await new HttpResetClass().load('POST', '/rs/search', {
        // source: 'this.getParentByType($department$).getAllChildrens().where(row.getAttributes().get($rolestr$).indexOf($需要定位人员$) != -1))',
        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', `/api/af-safecheck/safePosition/getPosition`, {}, {
        resolveMsg: null,
        rejectMsg: null
      })
      debugger
      // let arr2 = await new HttpResetClass().load('POST', `api/af-safecheck/sql/safe_singleTable_OrderBy`, {
      //   data: {
      //     items:'*',
      //     tablename: 't_work_record',
      //     condition: `f_onsite_time >= '${today} 00:00:00' and f_onsite_time <= '${today} 23:59:59'`,
      //     orderitem: 'id'
      //   }}, {
      //   resolveMsg: null,
      //   rejectMsg: null
      // })
      // arr1.data =  JSON.parse(arr1.data.replaceAll(/([{,]\s*)([0-9]+)(\s*=\s*{)/g, '$1"$2"$3').replaceAll('=',':'))
      const checkerOptions = [{label: '全部', value: ''}]
      if(res.data){
        res.data.forEach((checker)=>{
          for(let check in arr1.data){
            let checkerpos = JSON.parse(arr1.data[check])
            if(checker.id==check){
              checkerpos.userid=checker.userid
              checkerpos.f_user_telephone=checker.f_user_telephone
              checkerpos.rolestr=checker.rolestr
              this.checkers.push(checkerpos)
            }
          }
        })
      }
      this.checkerOptions = checkerOptions
      // if (res.data && arr2.data){
      //   for (const item of res.data) {
      //     for (const record  of arr2.data) {
      //       if (item.id == record.f_user_id){
      //         item.f_onsite_time = record.f_onsite_time
      //         item.f_offsite_time = record.f_offsite_time
      //         break
      //       }
      //     }
      //   }
      // }
      this.allpersonnelsumdata = res.data

      this.datachecker = []
      this.allpersonnelsum = []
      var newdate = Util.toStandardTimeString()
      for (let id in arr1.data) {
        const datachecke = {}
        datachecke.id = id
        const parse = arr1.data[id]
        let lxhm = this.$appdata.getSingleValue("离线毫秒数")
        if (isEmpty(lxhm)){
          lxhm = 300000
        }
        if ((new Date(newdate) - new Date(parse.uploadTime)  < lxhm)) {
          datachecke.name = parse.name
          datachecke.f_latitude = parse.f_latitude
          datachecke.f_longitude = parse.f_longitude
          datachecke.f_provider = parse.f_provider
          datachecke.f_battery_level = parse.f_battery_level
          datachecke.f_bearing = parse.f_bearing
          datachecke.uploadTime = parse.uploadTime
          datachecke.f_signal_strength = parse.f_signal_strength
          datachecke.userid = parse.userid
          datachecke.f_speed = parse.f_speed
          datachecke.isOnline = true
          datachecke.f_internal_quote = parse.f_internal_quote
          datachecke.f_altitude = parse.f_altitude
          datachecke.f_traffic = parse.f_traffic
          datachecke.checkAddress = parse.f_longitude != 0? parse.address : '未获取到实时位置'
          // for (const record  of arr2.data) {
          //   if (datachecke.userid == record.f_user_id){
          //     datachecke.f_onsite_time = record.f_onsite_time
          //     datachecke.f_offsite_time = record.f_offsite_time
          //     break
          //   }
          // }
          for (const item of this.allpersonnelsumdata) {
            if (datachecke.userid == item.id){
              datachecke.f_department_name = item.f_department_name
              break
            }
          }
          this.allpersonnelsum.push(datachecke)
        }
      }
      // 将数组设置到 massMarks 图层
      //this.checkerMulchs.setData(a1)
      // 将 massMarks 添加到地图实例
      this.checkerMulchs.setMap(this.map)
      if (res.data) {
        res.data.forEach((checker) => {
          var lixian = true
          for (var i =0;i < this.allpersonnelsum.length;i++) {
            if (this.allpersonnelsum[i].id == checker.id) {
              this.allpersonnelsum[i].f_user_telephone = checker.f_user_telephone
              //在线
              lixian = false
              break
            }
          }
          if (lixian) {
            checker.isOnline=false
            this.allpersonnellixian.push(checker)
          }
        })
      }
      let td = Util.toStandardDateString()
      //获取今天上传的所有隐患
      let arr = await new HttpResetClass().load('POST', `api/af-safecheck/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) => {
          //拿出今天的隐患放到今日隐患列表中
          if (defect.f_upload_date.indexOf(td) != -1) {
            this.todayDefectList.push(defect)
          }
          //取出一二三级隐患
          console.log('二级隐患', defect.f_defect_level == '二级隐患')
          if (defect.f_defect_level == '一级隐患' && defect.f_longitude  && defect.f_latitude) {
            this.level1.push(defect)
          } else if (defect.f_defect_level == '二级隐患' && defect.f_longitude  && defect.f_latitude) {
            this.level2.push(defect)
          } else if (defect.f_defect_level == '三级隐患' && defect.f_longitude  && defect.f_latitude) {
            this.level3.push(defect)
          } else if(defect.f_longitude  && defect.f_latitude){
            this.problems.push(defect)
          }
        })
      }
      this.loading = false
      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 class="panel panel-default" style="background-color: azure;border-radius: 5px;margin-left: 8px;height: 180px;margin-top: 0px;">
              <div class="panel-body">
                <ul style="list-style-type: none;font-size: 15px;">
                    <li style="margin: 3px 0;">员工姓名: ${row.name}</li>
                    <li style="margin: 3px 0;">剩余电量: ${row.f_battery_level} %</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>
                </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 o=0;o<this.level2.length;o++){
        if (this.level2[o].f_longitude && this.level2[o].f_latitude){
          a3.push({
            lnglat: [this.level2[o].f_longitude,this.level2[o].f_latitude], //点标记位置
            name: '二级隐患',
            id:o,
            rowstr:this.level2[o]
          })
        }
      }
      // 将数组设置到 massMarks 图层
      this.level2Mulchs.setData(a3);
      // 将 massMarks 添加到地图实例
      this.level2Mulchs.setMap(this.map);

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


      let a5=[]
      for(let l=0;l<this.problems.length;l++){
        if (this.problems[l].f_longitude&&this.problems[l].f_latitude){
          a5.push({
            lnglat: [this.problems[l].f_longitude, this.problems[l].f_latitude], //点标记位置
            name: '普通问题',
            id:l,
            rowstr:this.problems[l]
          })
        }
      }
      // 将数组设置到 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;
        default:
      }
    },
    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();
          //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]
      })
      this.checkerMulchs.on('click', function (e) {
        //tag)
        let checkAddress = '未获取到实时位置'
        console.log('e.data.lnglat=', e.data.lnglat)
        console.log('地图222')
        that.geocoder.getAddress(e.data.lnglat, function (status, result) {
          //
          if (status === 'complete' && result.regeocode) {
            checkAddress = result.regeocode.formattedAddress
          } else {
            e.data.rowstr.checkAddress = checkAddress
          }
          e.data.rowstr.checkAddress = checkAddress
          console.log('e.data.rowstr=', e.data.rowstr)
          let defectContent = that.getCheckerContent(e.data.rowstr)
          that.infoWindow.setContent(defectContent)
          that.infoWindow.open(that.map, e.data.lnglat)
        })
      })
      //安检员点位
      /*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++){
        const lng = Number(this.checkers[j].f_longitude)
        const lat = Number(this.checkers[j].f_latitude)
        if(lng && lat){
          let marker=new AMap.Marker({
            offset:new AMap.Pixel(-18, -10),
            position: [lng,lat],
            icon:new AMap.Icon({
              image: '/static/images/person.png',
              imageOffset: new AMap.Pixel(0, 0),
              imageSize: new AMap.Size(36, 36)
            }),
            label:{
              content: `<div class='info' style='background-color: rgb(0,185,255);color: #ffffff;height: 30px;line-height: 30px;padding: 0 6px;border-radius: 3px;display: inline-block;'>${this.checkers[j].name}</div>`,
              direction: 'bottom',
              offset:new AMap.Pixel(0, -6)
            },
            extData:this.checkers[j]
          })
          this.chekckOps.addOverlay(marker)
        }

      }
      this.chekckOps.setMap(this.map)
      const ovs = this.chekckOps.getOverlays()
      if (ovs && ovs.length) {
        this.map.setFitView(ovs)
      }
      this.chekckOps.on('click',function (e) {
        let pe=e.target.getExtData()
        let checkAddress=pe.address || '未获取到实时位置'
        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:{

  },
  watch:{
    checkers:{
      handler(){
        this.checkerInit()
      },
      deep:true
    }
  },
  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>
<style>
.amap-marker-label{
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.amap-info-content {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.amap-info-sharp {
  display: none !important;
}
</style>
