safecheck-client 3.0.27-gongyi → 3.0.30-gongyi

package/src/components/map/checkScreen.vue

@@ -1,727 +1,727 @@
-<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>
-            <!--<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
-        },
-        imgSrc:'',
-        geocoder:null,//逆地理编码
-        mulchs:{//覆盖物控制显示
-          checker:true,
-          level1:true,
-          level2:true,
-          level3:true,
-          problems:true
-        },
-        styleObject :[
-          {
-            url: 'http://192.168.20.28:8400/image/anjianyuan.png', //人员图标URL
-            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
-            size: new AMap.Size(26, 28)  //图标大小
-          },
-          {
-            url: 'http://192.168.20.28:8400/image/level1.png', //一级隐患图标URL
-            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
-            size: new AMap.Size(26, 28)  //图标大小
-          },
-          {
-            url: 'http://192.168.20.28:8400/image/level2.png', //二级隐患图标URL
-            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
-            size: new AMap.Size(26, 28)  //图标大小
-          },
-          {
-            url: 'http://192.168.20.28:8400/image/level3.png', //三级隐患图标URL
-            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
-            size: new AMap.Size(26, 28)  //图标大小
-          },
-          {
-            url: 'http://192.168.20.28:8400/image/ordinary.png', //普通问题图标URL
-            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
-            size: new AMap.Size(26, 28)  //图标大小
-          }
-        ]
-      }
-    },
-    async ready(){
-      this.initMap()
-      console.log("当前时间---"+Util.toStandardTimeString())
-      await this.getNewData()
-      console.log("-----------------0")
-      this.assemblyData()
-      console.log("-----------------2")
-      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: 'this.getParentByType($department$).getAllChildrens().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})
-        console.log(JSON.stringify(arr1)+'---------'+typeof arr1)
-        //let d=this.toStandardTimeString()
-        this.checkers=[]
-        if(res.data){
-          res.data.forEach((checker)=>{
-            //console.log("-------checker:"+JSON.stringify(checker))
-            for(let check in arr1.data){
-              let checkerpos=JSON.parse(arr1.data[check])
-              //console.log("checkerpos--"+JSON.stringify(checkerpos)+check)
-              if(checker.id==check){
-                console.log("找到了这个人------"+checker.name+"---"+checkerpos.name)
-                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 to_date(tdil.f_create_time,'yyyy-mm-dd hh24:mi:ss')>'${Util.toStartDateYearString()} 00:00:00' and tdi.F_LONGITUDE is not null`}},
-          {resolveMsg: null, rejectMsg: null})
-        console.log("arr-----"+JSON.stringify(arr))
-        if(arr.data){
-          this.todayDefectList=[]
-          arr.data.forEach((defect)=>{
-            //拿出今天的隐患放到今日隐患列表中
-            if(defect.f_upload_date.indexOf(td)!=-1){
-              this.todayDefectList.push(defect)
-            }
-            //取出一二三级隐患
-            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){
-        console.log("vname"+vname)
-        console.log("val"+val)
-        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();
-            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]
-        });
-        console.log("????????????????????????????")
-        this.checkerMulchs.on('click',function (e) {
-          console.log('-------------------'+JSON.stringify(e.data))
-          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) {
-          console.log('-------------------'+JSON.stringify(e.data))
-          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) {
-          console.log('-------------------'+JSON.stringify(e.data))
-          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) {
-          console.log('-------------------'+JSON.stringify(e.data))
-          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) {
-          console.log('-------------------'+JSON.stringify(e.data))
-          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'
-              });
-              console.log("-----------------3")
-              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++){
-          console.log("this.checkers[j]-----------"+JSON.stringify(this.checkers[j])+"---"+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: 'http://192.168.20.28:8400/image/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){
-            console.log(obj+'----------'+pe[obj])
-          }
-          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) {
-              console.log("e:---marker"+JSON.stringify(e))
-              //that.infoWindow.open(that.map, marker.getPosition());
-            })*/
-      },
-      //获取当前时间的前两个小时
-      getNowFormatDate(house=0) {
-        console.log("house----"+house)
-        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(){
-        console.log("获取数据？????????")
-        //获取所有安检员的点位集合-----测试数据
-        /*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>
-
+<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>
+            <!--<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
+        },
+        imgSrc:'',
+        geocoder:null,//逆地理编码
+        mulchs:{//覆盖物控制显示
+          checker:true,
+          level1:true,
+          level2:true,
+          level3:true,
+          problems:true
+        },
+        styleObject :[
+          {
+            url: 'http://192.168.20.28:8400/image/anjianyuan.png', //人员图标URL
+            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+            size: new AMap.Size(26, 28)  //图标大小
+          },
+          {
+            url: 'http://192.168.20.28:8400/image/level1.png', //一级隐患图标URL
+            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+            size: new AMap.Size(26, 28)  //图标大小
+          },
+          {
+            url: 'http://192.168.20.28:8400/image/level2.png', //二级隐患图标URL
+            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+            size: new AMap.Size(26, 28)  //图标大小
+          },
+          {
+            url: 'http://192.168.20.28:8400/image/level3.png', //三级隐患图标URL
+            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+            size: new AMap.Size(26, 28)  //图标大小
+          },
+          {
+            url: 'http://192.168.20.28:8400/image/ordinary.png', //普通问题图标URL
+            anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+            size: new AMap.Size(26, 28)  //图标大小
+          }
+        ]
+      }
+    },
+    async ready(){
+      this.initMap()
+      console.log("当前时间---"+Util.toStandardTimeString())
+      await this.getNewData()
+      console.log("-----------------0")
+      this.assemblyData()
+      console.log("-----------------2")
+      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: 'this.getParentByType($department$).getAllChildrens().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})
+        console.log(JSON.stringify(arr1)+'---------'+typeof arr1)
+        //let d=this.toStandardTimeString()
+        this.checkers=[]
+        if(res.data){
+          res.data.forEach((checker)=>{
+            //console.log("-------checker:"+JSON.stringify(checker))
+            for(let check in arr1.data){
+              let checkerpos=JSON.parse(arr1.data[check])
+              //console.log("checkerpos--"+JSON.stringify(checkerpos)+check)
+              if(checker.id==check){
+                console.log("找到了这个人------"+checker.name+"---"+checkerpos.name)
+                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 to_date(tdil.f_create_time,'yyyy-mm-dd hh24:mi:ss')>'${Util.toStartDateYearString()} 00:00:00' and tdi.F_LONGITUDE is not null`}},
+          {resolveMsg: null, rejectMsg: null})
+        console.log("arr-----"+JSON.stringify(arr))
+        if(arr.data){
+          this.todayDefectList=[]
+          arr.data.forEach((defect)=>{
+            //拿出今天的隐患放到今日隐患列表中
+            if(defect.f_upload_date.indexOf(td)!=-1){
+              this.todayDefectList.push(defect)
+            }
+            //取出一二三级隐患
+            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){
+        console.log("vname"+vname)
+        console.log("val"+val)
+        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();
+            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]
+        });
+        console.log("????????????????????????????")
+        this.checkerMulchs.on('click',function (e) {
+          console.log('-------------------'+JSON.stringify(e.data))
+          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) {
+          console.log('-------------------'+JSON.stringify(e.data))
+          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) {
+          console.log('-------------------'+JSON.stringify(e.data))
+          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) {
+          console.log('-------------------'+JSON.stringify(e.data))
+          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) {
+          console.log('-------------------'+JSON.stringify(e.data))
+          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'
+              });
+              console.log("-----------------3")
+              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++){
+          console.log("this.checkers[j]-----------"+JSON.stringify(this.checkers[j])+"---"+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: 'http://192.168.20.28:8400/image/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){
+            console.log(obj+'----------'+pe[obj])
+          }
+          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) {
+              console.log("e:---marker"+JSON.stringify(e))
+              //that.infoWindow.open(that.map, marker.getPosition());
+            })*/
+      },
+      //获取当前时间的前两个小时
+      getNowFormatDate(house=0) {
+        console.log("house----"+house)
+        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(){
+        console.log("获取数据？????????")
+        //获取所有安检员的点位集合-----测试数据
+        /*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>
+