safecheck-client 4.0.1-4 → 4.0.1-40

package/src/components/map/SecurityCheckCoordinates.vue

@@ -0,0 +1,348 @@
+<template>
+  <div class="flex-row">
+    <div class="basic-main" style="flex:7">
+      <div id="check_map" style="height:100%">
+      </div>
+    </div>
+    <div id="zzz" class="basic-main" style="flex:1;margin-left: 0px;overflow: hidden">
+      <div class="panel panel-info" style="margin-top:0px; height: 100%; display: flex; flex-direction: column;">
+        <div class="panel-heading" style="height: 50px">
+          <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.level1" @change="enableChange('level1',mulchs.level1)" type="checkbox"/><img class="safe_deimg" src="../../assets/警告 (3).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/警告 (4).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/警告 (5).png"/>正常</li>
+          </ul>
+        </div>
+        <div class="panel-heading" style="height: 50px">
+          <h3 class="panel-title">时间选择</h3>
+        </div>
+        <div class="panel-body">
+          <div class="row" style="height: 50px">
+            <datepicker
+              :value.sync="f_check_start"
+              placeholder='开始时间'
+              :disabled-days-of-week="[]"
+              @change="safeRefresh"
+              :format="'yyyy-MM-dd'"
+              :show-rest-button="reset"
+              v-model="f_check_start">
+            </datepicker>
+          </div>
+
+          <div class="row" style="height: 50px">
+            <datepicker
+              :value.sync="f_check_end"
+              placeholder='结束时间'
+              :disabled-days-of-week="[]"
+              @change="safeRefresh"
+              :format="'yyyy-MM-dd'"
+              :show-rest-button="reset"
+              v-model="f_check_end">
+            </datepicker>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as Util from '../Util'
+import {HttpResetClass} from 'vue-client'
+
+export default {
+  title: '用户安检定位信息',
+  data() {
+    return {
+      loading: false,
+      f_check_start:'',
+      f_check_end:'',
+      map:null,
+      infoWindow:null,
+      level1Mulchs:null,//拒检点位
+      level3Mulchs:null,//到访不遇点位
+      problemsMulchs:null,//正常点位
+      level1:[],
+      level3:[],
+      problems:[],
+      defectList:{rows:[]},
+      intervalNum:'',
+      mulchs:{//覆盖物控制显示
+        level1:true,
+        level3:true,
+        problems:true
+      },
+      styleObject :[
+        {
+          url: require('../../assets/警告 (3).png'), //拒检图标URL
+          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+          size: new AMap.Size(26, 28)  //图标大小
+        },
+        {
+          url: require('../../assets/警告 (4).png'), //到访不遇图标URL
+          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+          size: new AMap.Size(26, 28)  //图标大小
+        },
+        {
+          url: require('../../assets/警告 (5).png'), //正常图标URL
+          anchor: new AMap.Pixel(14, 8),  // 图标偏移位置
+          size: new AMap.Size(26, 28)  //图标大小
+        }
+      ]
+    }
+  },
+  async ready(){
+    this.initMap()
+    await this.getNewData(`f_longitude is not null and f_latitude is not null`)
+    this.assemblyData()
+    this.intervalNum=window.setInterval(this.safeRefresh, 240000)
+  },
+  methods: {
+    async getNewData (condition) {
+      this.loading = true
+      let arr = await new HttpResetClass().load('POST', `api/af-safecheck/sql/safe_singleTable_OrderBy`,
+        {
+          data: {
+            items:'*',
+            tablename: 't_check_paper',
+            condition: condition,
+            orderitem: 'f_entry_status'
+          }}, {resolveMsg: null, rejectMsg: null})
+      if (arr.data) {
+        this.level1 = []
+        this.level3 = []
+        this.problems = []
+        arr.data.forEach((defect) => {
+          if (defect.f_entry_status == '拒检' ) {
+            this.level1.push(defect)
+          } else if (defect.f_entry_status == '到访不遇' ) {
+            this.level3.push(defect)
+          } else {
+            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_user_name}</li>
+                      <li style="margin: 3px 0;">用户地址: ${row.f_address}</li>
+                      <li style="margin: 3px 0;">安检状态: ${row.f_entry_status}</li>
+                      <li style="margin: 3px 0;">安检时间: ${row.f_offsite_time}</li>
+                      <li style="margin: 3px 0;">安检人员: ${row.f_checker_name}</li>
+                  </ul>
+                </div>
+              </div>`
+    },
+    assemblyData(){
+      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]
+        })
+      }
+      this.level1Mulchs.setData(a2);
+      this.level1Mulchs.setMap(this.map);
+
+      let a4=[]
+      for(let p=0;p<this.level3.length;p++){
+        if (this.level3[p].f_longitude&&this.level3[p].f_latitude){
+          a4.push({
+            lnglat: [this.level3[p].f_longitude, this.level3[p].f_latitude], //点标记位置
+            name: '到访不遇',
+            id:p,
+            rowstr:this.level3[p]
+          })
+        }
+      }
+      this.level3Mulchs.setData(a4);
+      this.level3Mulchs.setMap(this.map);
+
+      let a5=[]
+      for(let l=0;l<this.problems.length;l++){
+        if (this.problems[l].f_longitude&&this.problems[l].f_latitude){
+          a5.push({
+            lnglat: [this.problems[l].f_longitude, this.problems[l].f_latitude], //点标记位置
+            name: '正常',
+            id:l,
+            rowstr:this.problems[l]
+          })
+        }
+      }
+      this.problemsMulchs.setData(a5);
+      this.problemsMulchs.setMap(this.map);
+    },
+    enableChange(vname,val){
+      switch(vname){
+        case 'level1':
+          if(val){
+            this.level1Mulchs.show()
+          }else{
+            this.level1Mulchs.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'], () => {
+          var geolocation = new AMap.Geolocation({
+            enableHighAccuracy: true,
+            showbutton: true,
+            timeout: 10000,
+            buttonOffset: new AMap.Pixel(10, 20),
+            buttonPosition: 'LB'
+          })
+          that.map.addControl(geolocation)
+          geolocation.getCurrentPosition();
+          that.map.addControl(new AMap.ToolBar())
+        });
+      this.map.setDefaultCursor('move');
+      this.infoWindow = new AMap.InfoWindow({
+        anchor: 'bottom-center',
+        autoMove:true,
+        content: '',
+        offset: new AMap.Pixel(0, -25)
+      })
+
+      this.level1Mulchs=new AMap.MassMarks([], {
+        opacity: 0.8,
+        zIndex: 111,
+        cursor: 'pointer',
+        style: this.styleObject[0]
+      });
+      this.level1Mulchs.on('click',function (e) {
+        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,
+        zIndex: 111,
+        cursor: 'pointer',
+        style: this.styleObject[1]
+      });
+      this.level3Mulchs.on('click',function (e) {
+        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,
+        zIndex: 111,
+        cursor: 'pointer',
+        style: this.styleObject[2]
+      });
+      this.problemsMulchs.on('click',function (e) {
+        let defectContent=that.getDefectContent(e.data.rowstr)
+        that.infoWindow.setContent(defectContent)
+        that.infoWindow.open(that.map, e.data.lnglat);
+      })
+    },
+    async safeRefresh(){
+      let condition =`f_longitude is not null and f_latitude is not null`
+      if (this.f_check_start){
+        condition += ` and f_offsite_time >=  '${this.f_check_start} 00:00:00'`
+      }
+      if (this.f_check_end){
+        condition += ` and f_offsite_time <=  '${this.f_check_end} 23:59:59'`
+      }
+      await this.getNewData(condition)
+      this.assemblyData()
+    }
+  },
+  destroyed() {
+    window.clearInterval(this.intervalNum)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.time-picker-container {
+  display: flex;
+  align-items: center;
+}
+
+.time-picker-container /deep/ .v-datepicker {
+  width: 100% !important;
+}
+
+.date-separator {
+  padding: 0 5px;
+}
+
+.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>