safecheck-client 3.0.33-gongyi → 3.0.34-2

package/src/filiale/weinan/pc/checkScreen.vue

@@ -0,0 +1,1094 @@
+<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;display: flex;flex-wrap: wrap">
+            <h3 class="panel-title" style="width: 50%">图层设置</h3>
+            <h3 class="panel-title" style="width: 50%;text-align: end" ><button @click="safeRefresh" style="border: 0px">刷新</button></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>
+            </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; display: flex; gap: 20px">
+            <h3 style="cursor: pointer" class="panel-title" :class="{inactive: sel != 0}" @click="sel = 0">今日隐患</h3>
+            <h3 style="cursor: pointer" class="panel-title" :class="{inactive: sel != 1}" @click="sel = 1">安&nbsp;&nbsp;检&nbsp;&nbsp;员</h3>
+          </div>
+          <div v-show="sel == 0" 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 :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 v-show="sel == 1" class="panel-body" style="overflow: scroll">
+            <ul class="safe_ul_sty">
+              <li @click="setCheckerPos(row)" v-for="row in allpersonnelsum" track-by="$index"
+                  class="safe_li_sty safe_list_li" style="border: 1px #4d4d4d solid;border-radius: 2px">
+                <div style="width: 100%;" class="flex-row">
+                  <p class="safe_p" style="cursor: pointer" :title="row.name">{{ row.name }}</p>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <modal :show.sync="showModal" v-ref:infomodal :backdrop="false">
+    <div slot="modal-header" class="modal-header">
+      <h4 class="modal-title">
+        {{ showname }}
+      </h4>
+    </div>
+    <div slot="modal-body" class="modal-body">
+      <div class="row" style="display: flex; align-items: center; margin-bottom: 20px">
+        <div class="col-sm-5" style="display: flex; align-items: center">
+          <label class="font_normal_body">班组</label>
+          <v-select
+            class="select select_list"
+            :value.sync="departmentName"
+            v-model="departmentName"
+            :options="departments"
+            placeholder='请选择'
+            :search="false"
+            close-on-select
+            value-single
+          ></v-select>
+        </div>
+        <div class="col-sm-5" style="display: flex; align-items: center">
+          <label class="font_normal_body">安检员</label>
+          <v-select
+            class="select select_list"
+            :value.sync="checkerName"
+            v-model="checkerName"
+            :options="persons"
+            placeholder='请选择'
+            :search="true"
+            close-on-select
+            value-single
+          ></v-select>
+        </div>
+        <div class="col-sm-2">
+          <button class="button_search" @click="checkerSearch">查询</button>
+        </div>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>姓名</th>
+            <th>当前位置</th>
+            <th>当前电量</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="rowd in showdataSearch">
+            <td>{{ rowd.name }}</td>
+            <td>{{ rowd.checkAddress }}</td>
+            <td>{{ rowd.f_battery_level }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div slot="modal-footer" class="modal-footer">
+      <div class="safe_ul_sty" style="float: left">
+        <p class="safe_li_sty">
+          在线人数：{{ onLineNumber }} &nbsp;&nbsp;
+          离线人数：{{ noOnLineNumber }}
+        </p>
+      </div>
+      <button type="button" class="btn btn-primary btn-photo" @click="showModalclose">取消</button>
+    </div>
+  </modal>
+  <work-busy :is-busy="loading"></work-busy>
+</template>
+<script>
+import Vue from 'vue'
+import * as Util from '../../../components/Util'
+import {HttpResetClass, trans} from 'vue-client'
+import {isEmpty} from '../../../components/Util'
+
+export default {
+  title: '安检实时监控中心',
+  data () {
+    return {
+      loading:false,
+      sel: 0,
+      onLineNumber:0,
+      noOnLineNumber:0,
+      showModal: false,
+      showdata: [],
+      showname: '',
+      showdataSearch: [],
+      AllPersonnel: [],
+      map: null,
+      allpersonnelsum: [],//在线人数
+      allpersonnelsumdata: [],//总数
+      allpersonnellixian: [],//离线
+      infoWindow: null,
+      satellite: null,
+      roadNet: null,
+      checkerMulchs: null,//安检员点位
+      level1Mulchs: null,//一级隐患点位
+      level2Mulchs: null,//二级隐患点位
+      level3Mulchs: null,//三级隐患点位
+      problemsMulchs: null,//普通问题点位
+      checkers: [],
+      datachecker: [],
+      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: '/images/anjianyuan.png', //人员图标URL
+          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+          size: new AMap.Size(26, 28)  //图标大小
+        },
+        {
+          url: '/images/level1.png', //一级隐患图标URL
+          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+          size: new AMap.Size(26, 28)  //图标大小
+        },
+        {
+          url: '/images/level2.png', //二级隐患图标URL
+          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+          size: new AMap.Size(26, 28)  //图标大小
+        },
+        {
+          url: '/images/level3.png', //三级隐患图标URL
+          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+          size: new AMap.Size(26, 28)  //图标大小
+        },
+        {
+          url: '/images/ordinary.png', //普通问题图标URL
+          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+          size: new AMap.Size(26, 28)  //图标大小
+        }
+      ],
+      departments: [
+        {label: '全部', value: ''},
+        {label: '客服部维修班', value: '客服部维修班'}, {label: '燃气具安装班', value: '燃气具安装班'},
+        {label: '居民安检班', value: '居民安检班'}, {label: '非居民安检班', value: '非居民安检班'}
+      ],
+      persons: [],
+      checkerOptions: [],
+      departmentName: '',
+      checkerName: ''
+    }
+  },
+  ready () {
+   // this.querySserSatus()
+   this.initMap()
+    this.getNewData().then(()=>{
+      this.assemblyData()
+      window.safe_closeInfoWindow = this.closeInfoWindow
+      let sx = this.$appdata.getSingleValue("地图刷新")
+      if (isEmpty(sx)){
+        sx = 120000
+      }
+      this.intervalNum = window.setInterval(this.safeRefresh, sx)
+    })
+
+  },
+  methods: {
+    checkerSearch(){
+      this.showdataSearch = this.showdata.filter((item) => {
+        if (((!this.departmentName || item.f_department_name == this.departmentName) && (!this.checkerName || item.name.includes(this.checkerName)))){
+          return true
+        }
+        return false
+      })
+      this.onLineNumber = 0
+      this.noOnLineNumber = 0
+      this.showdataSearch.map(item=>{
+        if (item.isOnline){
+          this.onLineNumber ++
+        }else {
+          this.noOnLineNumber ++
+        }
+      })
+    },
+    showModalclose () {
+      this.showModal = false
+      this.showdata = []
+      this.showdataSearch = []
+      this.showname = ''
+      this.departmentName = ''
+      this.checkerName = ''
+    },
+    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
+
+    },
+    toggleTab (current) {
+      this.currentTab = current
+      this.currentClass = current
+    },
+    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])
+    },
+    setCheckerPos (row) { //维修员信息
+      this.map.setZoomAndCenter(15, [row.f_longitude, row.f_latitude])
+      let defectContent = this.getCheckerContent(row)
+      this.infoWindow.setContent(defectContent)
+      this.infoWindow.open(this.map, [row.f_longitude, row.f_latitude])
+    },
+    // 查询人员
+    async querySserSatus () {
+      //tag)
+      let http1 = new HttpResetClass()
+      let resp = await http1.load('POST', `/rs/sql/tel_singleTable_OrderBy`, {
+        data: {
+          items: 'name lable,id userid,\'在线\' states',
+          tablename: 't_user',
+          condition: `rolestr like '%安检员%'`,
+          orderitem: 'id'
+        }
+      }, {resolveMsg: null, rejectMsg: null})
+      //tag)
+      console.log('resp=', resp)
+      console.log('resp=', JSON.stringify(resp))
+      this.AllPersonnel = resp.data
+      console.log('this.AllPersonnel', JSON.stringify(this.AllPersonnel))
+    },
+
+    //获取定位人员类表
+    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', `/rs/safePsoition/getPosition`, {}, {
+        resolveMsg: null,
+        rejectMsg: null
+      })
+      const today = Util.toStandardDateString()
+      let arr2 = await new HttpResetClass().load('POST', `/rs/sql/singleTable`, {
+        data: {
+          tablename: 't_work_record',
+          condition: `f_onsite_time >= '${today} 00:00:00' and f_onsite_time <= '${today} 23:59:59'`,
+        }}, {
+        resolveMsg: null,
+        rejectMsg: null
+      })
+
+      const checkerOptions = [{label: '全部', value: ''}]
+      if (res.data){
+        for (const item of res.data) {
+          checkerOptions.push({
+            label: item.name,
+            value: item.name
+          })
+        }
+      }
+      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 = JSON.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].userid == 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', `rs/sql/defectDetails`, {data: {condition: ` f_filialeid in ('${this.$login.f.orgid}') and tdil.f_create_time>'${Util.toStartDateYearString()} 00:00:00' and tdi.F_LONGITUDE is not null`}},
+        {resolveMsg: null, rejectMsg: null})
+      //tag)
+      if (arr.data) {
+        this.todayDefectList = []
+        arr.data.forEach((defect) => {
+          //拿出今天的隐患放到今日隐患列表中
+          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 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 ? 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 ? row.checkAddress : '未获取到实时位置'}</li>
+                    <li style="margin: 3px 0;">状态更新时间: ${row.uploadTime}</li>
+                    <!--<li style="margin: 3px 0;">客户地址: 河南省周口市工农南路xx酒店302</li>-->
+                </ul>
+              </div>
+            </div>`
+    },
+    assemblyData () {
+      let that = this
+      this.checkerInit()
+      /*this.checkers=[
+          {f_longitude:114.718285,f_latitude:33.610584},
+          {f_longitude:114.713736,f_latitude:33.642387}
+        ]*/
+      /*this.level1=[
+          {f_longitude:114.68736,f_latitude:33.655248},
+          {f_longitude:114.716736,f_latitude:33.627523}
+        ]*/
+      /*this.level2=[
+          {f_longitude:114.676833,f_latitude:33.609726},
+          {f_longitude:114.684013,f_latitude:33.642387}
+        ]
+      this.level3=[
+          {f_longitude:114.71502,f_latitude:33.648675},
+          {f_longitude:114.725002,f_latitude:33.637242}
+        ]
+      this.problems=[
+          {f_longitude:114.696969,f_latitude:33.635241},
+          {f_longitude:114.68836,f_latitude:33.655248}
+        ]*/
+      /*let a1=[]
+      for(let i=0;i<this.checkers.length;i++){
+        a1.push({
+          lnglat: [this.checkers[i].f_longitude,this.checkers[i].f_latitude], //点标记位置
+          name: '安检员',
+          id:i,
+          rowstr:this.checkers[i]
+        })
+      }
+      // 将数组设置到 massMarks 图层
+      this.checkerMulchs.setData(a1);
+      // 将 massMarks 添加到地图实例
+      this.checkerMulchs.setMap(this.map);*/
+      let a2 = []
+      for (let i = 0; i < this.level1.length; i++) {
+        a2.push({
+          lnglat: [this.level1[i].f_longitude, this.level1[i].f_latitude], //点标记位置
+          name: '一级隐患',
+          id: i,
+          rowstr: this.level1[i]
+        })
+      }
+      // 将数组设置到 massMarks 图层
+      this.level1Mulchs.setData(a2)
+      // 将 massMarks 添加到地图实例
+      this.level1Mulchs.setMap(this.map)
+
+      let a3 = []
+      for (let i = 0; i < this.level2.length; i++) {
+        a3.push({
+          lnglat: [this.level2[i].f_longitude, this.level2[i].f_latitude], //点标记位置
+          name: '二级隐患',
+          id: i,
+          rowstr: this.level2[i]
+        })
+      }
+      // 将数组设置到 massMarks 图层
+      this.level2Mulchs.setData(a3)
+      // 将 massMarks 添加到地图实例
+      this.level2Mulchs.setMap(this.map)
+
+      let a4 = []
+      for (let i = 0; i < this.level3.length; i++) {
+        a4.push({
+          lnglat: [this.level3[i].f_longitude, this.level3[i].f_latitude], //点标记位置
+          name: '三级隐患',
+          id: i,
+          rowstr: this.level3[i]
+        })
+      }
+      // 将数组设置到 massMarks 图层
+      this.level3Mulchs.setData(a4)
+      // 将 massMarks 添加到地图实例
+      this.level3Mulchs.setMap(this.map)
+
+      let a5 = []
+      for (let i = 0; i < this.problems.length; i++) {
+        a5.push({
+          lnglat: [this.problems[i].f_longitude, this.problems[i].f_latitude], //点标记位置
+          name: '普通问题',
+          id: i,
+          rowstr: this.problems[i]
+        })
+      }
+      // 将数组设置到 massMarks 图层
+      this.problemsMulchs.setData(a5)
+      // 将 massMarks 添加到地图实例
+      this.problemsMulchs.setMap(this.map)
+      //组装安检员点位集合
+    },
+    //处理图层和覆盖物的显示隐藏
+    enableChange (vname, val) {
+      //tag
+      //tag
+      switch (vname) {
+        case 'satelliteEnable':
+          if (val) {
+            this.map.add(this.satellite)
+          } else {
+            this.map.remove(this.satellite)
+          }
+          break
+        case 'roadNetEnable':
+          if (val) {
+            this.map.add(this.roadNet)
+          } else {
+            this.map.remove(this.roadNet)
+          }
+          break
+        case 'checker':
+          if (val) {
+            this.chekckOps.show()
+          } else {
+            this.chekckOps.hide()
+          }
+          break
+        case 'level1':
+          if (val) {
+            this.level1Mulchs.show()
+          } else {
+            this.level1Mulchs.hide()
+          }
+          break
+        case 'level2':
+          if (val) {
+            this.level2Mulchs.show()
+          } else {
+            this.level2Mulchs.hide()
+          }
+          break
+        case 'level3':
+          if (val) {
+            this.level3Mulchs.show()
+          } else {
+            this.level3Mulchs.hide()
+          }
+          break
+        case 'problems':
+          if (val) {
+            this.problemsMulchs.show()
+          } else {
+            this.problemsMulchs.hide()
+          }
+          break
+        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]
+      })
+      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 that = this
+      this.chekckOps.clearOverlays()
+      for (let j = 0; j < this.allpersonnelsum.length; j++) {
+          let marker = new AMap.Marker({
+            //map: that.map,
+            offset: new AMap.Pixel(-18, -10),
+            position: [this.allpersonnelsum[j].f_longitude, this.allpersonnelsum[j].f_latitude],
+            icon: new AMap.Icon({
+              image: '/images/anjianyuan.png', //人员图标URL
+              imageOffset: new AMap.Pixel(0, 0),  // 图标偏移位置
+              imageSize: new AMap.Size(36, 36)  //图标大小
+            }),
+            label: {
+              //offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量
+              content: `<div class='info' style='background-color: rgb(0,185,255);color: #ffffff;padding: 5px;border-radius: 4px'>${this.allpersonnelsum[j].name}</div>`, //设置文本标注内容
+              direction: 'bottom', //设置文本标注方位
+              offset: new AMap.Pixel(0, -4)
+            },
+            extData: this.allpersonnelsum[j]
+          })
+          this.chekckOps.addOverlay(marker)
+
+      }
+      this.chekckOps.setMap(this.map)
+      this.chekckOps.on('click', function (e) {
+        let pe = e.target.getExtData()
+        let checkAddress = '未获取到实时位置'
+        that.geocoder.getAddress([pe.f_longitude, pe.f_latitude], function (status, result) {
+          if (status === 'complete' && result.regeocode) {
+            checkAddress = result.regeocode.formattedAddress
+          }/*else{
+              log.error('根据经纬度查询地址失败')
+            }*/
+          pe.checkAddress = checkAddress
+          let defectContent = that.getCheckerContent(pe)
+          that.infoWindow.setContent(defectContent)
+          that.infoWindow.open(that.map, [pe.f_longitude, pe.f_latitude])
+        })
+      })
+      /*AMap.event.addListener(this.ops, 'click', function (e) {
+            //tag)
+            //that.infoWindow.open(that.map, marker.getPosition());
+          })*/
+    },
+    //获取当前时间的前两个小时
+    getNowFormatDate (house = 0) {
+      //tag
+      let date = new Date()
+      let seperator1 = '-'
+      let seperator2 = ':'
+      if (house != 0) {
+        date.setHours(date.getHours() - house)
+      }
+      let month = date.getMonth() + 1
+      let strDate = date.getDate()
+      let hour = date.getHours()
+      let min = date.getMinutes()
+      let second = date.getSeconds()
+      if (month >= 1 && month <= 9) {
+        month = '0' + month
+      }
+      if (strDate >= 0 && strDate <= 9) {
+        strDate = '0' + strDate
+      }
+      if (hour >= 0 && hour <= 9) {
+        hour = '0' + hour
+      }
+      if (min >= 0 && min <= 9) {
+        min = '0' + min
+      }
+      if (second >= 0 && second <= 9) {
+        second = '0' + second
+      }
+      let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+        + ' ' + hour + seperator2 + min
+        + seperator2 + second
+      return currentdate
+    },
+    toStandardTimeString () {
+      let dt = new Date()
+      let month = dt.getMonth() + 1
+      let date = dt.getDate()
+      let hour = dt.getHours()
+      let min = dt.getMinutes()
+      let sec = dt.getSeconds()
+      return dt.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date)
+        + ' ' + (hour < 10 ? '0' + hour : hour)
+    },
+    async safeRefresh () {
+      //tag
+      //获取所有安检员的点位集合-----测试数据
+      /*this.checkers=[]
+      this.checkers.push({f_longitude:114.7318,f_latitude:33.567126,name:"hwq1",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
+      this.checkers.push({f_longitude:114.726801,f_latitude:33.566912,name:"hwq2",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
+      this.checkers.push({f_longitude:114.723346,f_latitude:33.568932,name:"hwq3",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
+      this.checkers.push({f_longitude:114.711741,f_latitude:33.585519,name:"hwq4",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
+      this.checkers.push({f_longitude:114.756716,f_latitude:33.594528,name:"hwq5",f_provider:"lbs",f_battery_level:38,f_bearing:"210.0",uploadTime:"2021-11-17 17:28:35",f_signal_strength:4,userid:"141701",f_speed:"0.0",f_internal_quote:8535,f_altitude:"9.72", f_traffic:345865})
+      this.defectList.rows=[]
+      this.defectList.rows.push({"f_longitude":114.661358,"f_latitude":33.596897,"f_checker_name":"hwq2","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
+      this.defectList.rows.push({"f_longitude":114.659985,"f_latitude":33.62892,"f_checker_name":"hwq3","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
+      this.defectList.rows.push({"f_longitude":114.634579,"f_latitude":33.616627,"f_checker_name":"hwq4","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
+      this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
+      this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
+      this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
+      this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
+      this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
+      this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})
+      this.defectList.rows.push({"f_longitude":114.690197,"f_latitude":33.604332,"f_checker_name":"hwq5","f_address":"人民路东段百昌家园路西北1栋西单元4层西户","f_item_value":"是","f_item_name":"过墙、暗封等隐蔽部位锈蚀","f_upload_date":"2021-11-16 20:07:24","f_defect_level":"一级隐患","f_is_repaired":null})*/
+      await this.getNewData()
+      this.assemblyData()
+    }
+  },
+  computed: {},
+  destroyed () {
+    window.clearInterval(this.intervalNum)
+  },
+  watch: {
+    departmentName(){
+      console.log("fdsf--------")
+      this.checkerName = ''
+      if (this.departmentName){
+        const persons = [{label: '全部', value: ''}]
+        for (const item of this.showdata) {
+          if (item.f_department_name == this.departmentName){
+            persons.push({label: item.name, value: item.name})
+          }
+        }
+        this.persons = persons
+      }else {
+        const persons = [{label: '全部', value: ''}]
+        for (const item of this.showdata) {
+          persons.push({label: item.name, value: item.name})
+        }
+        this.persons = persons
+      }
+    }
+  }
+}
+
+</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;
+}
+
+.panel-heading {
+  .inactive {
+    color: gray;
+  }
+}
+
+table{
+  width: 100%;
+  border-collapse: collapse;
+}
+
+table caption{
+  font-size: 2em;
+  font-weight: bold;
+  margin: 1em 0;
+}
+
+th,td{
+  border: 1px solid #999;
+  text-align: center;
+  padding: 20px 0;
+}
+
+table thead tr{
+  background-color: #6aa6e2;
+  color: #fff;
+}
+
+table tbody tr:nth-child(odd){
+  background-color: #eee;
+}
+
+table tbody tr:hover{
+  background-color: #ccc;
+}
+
+table tfoot tr td{
+  text-align: right;
+  padding-right: 20px;
+}
+
+</style>
+