<template>
  <div style="position: relative;width: 100%; height: 100%;">
    <div
      style="position: absolute; left: -20px; top: 0; width: 300px; color: #fff; line-height: 40px; text-align: center; height: 40px; background:#0a8cff; z-index: 50;border-bottom: 1px solid #2f9dff"
    >
      <!--     <input type="button" value="1" @click="playGj"/> 	-->
      {{ $t("salesModule.SalesGuiji") }}
      <span
        @click="toggleDiv"
        style="float: right; width: 40px; height: 40px; text-align: center; color: #fff; cursor: pointer;"
      >
        <i v-show="isToggle == 1" class="el-icon-caret-top"></i>
        <i v-show="isToggle == 2" class="el-icon-caret-bottom"></i>
      </span>
    </div>
    <div class="yingyanMeta" id="yingyanMeta">
      <div class="title">
        <div @click="getType(1)">
          <i class="iconfont icon-shipinjiankong"></i
          >{{ $t("fnc.dqzhuangtai") }}
          <div v-show="mapType == 1" class="titleSjx"></div>
        </div>
        <div @click="getType(2)">
          <i class="iconfont icon-guijitu"></i>
          {{ $t("salesModule.GuijiSearch") }}
          <div v-show="mapType == 2" class="titleSjx"></div>
        </div>
      </div>
      <div>
        <div v-show="mapType == 1">
          <div class="isOnlineType">
            <li @click="online = 1">
              {{ $t("advmanager.v_all") }}（{{ personData.length }}）
              <div class="cked" v-show="online == 1"></div>
            </li>
            <li @click="(online = 2), (filterText1 = '')">
              {{ $t("salesModule.OnLine") }}（{{ onlinePerson }}）
              <div class="cked" v-show="online == 2"></div>
            </li>
            <li @click="(online = 3), (filterText1 = '')">
              {{ $t("salesModule.OutLine") }}（{{
                personData.length - onlinePerson
              }}）
              <div class="cked" v-show="online == 3"></div>
            </li>
          </div>
          <p v-show="online == 1" style="margin:14px 0; padding: 0 14px; ">
            <el-input
              class="w272"
              :placeholder="$t('salesModule.EmployeeSearch')"
              v-model="filterText1"
              ><i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </p>
          <div class="yingyanMetacont">
            <div style="margin-bottom:70px;" v-if="online == 1">
              <el-tree
                :data="treeData"
                ref="tree1"
                :filter-node-method="filterNode1"
                v-show="online == 1"
                :props="defaultProps1"
              >
                <span
                  class="custom-tree-node"
                  style="width: 100%;"
                  slot-scope="{ node, data }"
                >
                  <span class="fz14" v-if="data.Type == 0">{{
                    node.label
                  }}</span>
                  <span
                    class="fz14"
                    v-if="data.Type == 2"
                    style="width: 100%; display: inline-block;"
                    @click="getOneMarker(data)"
                  >
                    <img
                      v-if="!data.EmPhoto"
                      :title="
                        info(data.Phone, data.Type) != '离线'
                          ? info(data.Phone, data.Type) != '未开通定位'
                            ? '在线'
                            : '未开通定位'
                          : '离线'
                      "
                      src="../../assets/img/litheader.png"
                      class="yingyanIcon"
                    />
                    <img
                      v-if="data.EmPhoto"
                      :title="
                        info(data.Phone, data.Type) != '离线'
                          ? info(data.Phone, data.Type) != '未开通定位'
                            ? '在线'
                            : '未开通定位'
                          : '离线'
                      "
                      :onerror="defaultImg"
                      :src="data.EmPhoto"
                      class="yingyanIcon"
                      :class="{
                        notOnlineStyle:
                          info(data.Phone, data.Type) == '未开通定位' ||
                          info(data.Phone, data.Type) == '离线'
                      }"
                    />
                    {{ node.label }}
                  </span>
                </span>
              </el-tree>
            </div>
            <div class="yingyanMsgList" v-show="online == 2">
              <ul>
                <li
                  v-for="item in onlineTypeList"
                  @click="getOnlineMarker(item)"
                >
                  <img
                    v-if="!item.EmPhoto"
                    src="../../assets/img/litheader.png"
                    class="yingyanIcon"
                  />
                  <img
                    v-if="item.EmPhoto"
                    :onerror="defaultImg"
                    :src="item.EmPhoto"
                    class="yingyanIcon"
                  />
                  {{ item.EmName }}
                  <span>{{ info(item.entity_name, 2) }}</span>
                </li>
              </ul>
            </div>

            <div class="yingyanMsgList" v-show="online == 3">
              <ul>
                <li
                  v-for="item in leaveLineTypeList"
                  @click="getOnlineMarker(item)"
                >
                  <img
                    v-if="!item.EmPhoto"
                    src="../../assets/img/litheader.png"
                    class="yingyanIcon"
                  />
                  <img
                    v-if="item.EmPhoto"
                    :onerror="defaultImg"
                    :src="item.EmPhoto"
                    class="yingyanIcon notOnlineStyle"
                  />
                  {{ item.EmName }}
                  <span style="font-size: 12px;">{{
                    item.DepartmentName
                  }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div v-show="mapType == 2">
          <p style="margin:14px 0; padding: 0 14px;">
            <el-date-picker
              class="w272"
              value-format="yyyy-MM-dd"
              v-model="dateTime"
              type="date"
              @change="getPersonListByTime"
            ></el-date-picker>
          </p>
          <p style="margin:14px 0; padding: 0 14px; ">
            <el-input
              class="w272"
              :placeholder="$t('salesModule.EmployeeSearch')"
              v-model="filterText"
              ><i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </p>
          <!--  -->
          <div v-if="FinalYingYan" class="yingyanMetacont">
            <div style="margin-bottom:70px;">
              <el-tree
                :data="trackTreeData"
                ref="tree"
                :filter-node-method="filterNode"
                :props="defaultProps"
              >
                <span
                  class="custom-tree-node"
                  style="width: 100%;"
                  slot-scope="{ node, data }"
                >
                  <span class="fz14" v-if="data.Type == 0">{{
                    node.label
                  }}</span>
                  <span
                    class="fz14"
                    v-if="data.Type == 2"
                    style="width: 100%;  display: inline-block;"
                    @click="getPersonList(data)"
                  >
                    <img
                      v-if="!data.EmPhoto"
                      :title="
                        info(data.Phone, data.Type) != '离线'
                          ? info(data.Phone, data.Type) != '未开通定位'
                            ? '在线'
                            : '未开通定位'
                          : '离线'
                      "
                      src="../../assets/img/litheader.png"
                      class="yingyanIcon"
                    />
                    <img
                      v-if="data.EmPhoto"
                      :title="
                        info(data.Phone, data.Type) != '离线'
                          ? info(data.Phone, data.Type) != '未开通定位'
                            ? '在线'
                            : '未开通定位'
                          : '离线'
                      "
                      :onerror="defaultImg"
                      :src="data.EmPhoto"
                      class="yingyanIcon"
                      :class="{
                        notOnlineStyle:
                          info(data.Phone, data.Type) == '未开通定位' ||
                          info(data.Phone, data.Type) == '离线'
                      }"
                    />
                    {{ node.label }}
                    <em
                      style="float: right; font-size:12px; font-style: normal; margin-right: 10px;"
                      >{{ getDistance(data)
                      }}{{ data.distance | FileSizeFormat(data.distance) }}</em
                    >
                  </span>
                </span>
              </el-tree>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="yingyanRightMeta" v-show="mapType == 1">
      <p>
        {{ $t("salesModule.ShowAll") }}：
        <el-switch
          v-model="isShowAll"
          active-value="1"
          inactive-value="0"
          @change="isShowAllMarkers"
        ></el-switch>
      </p>
      <p>{{ $t("salesModule.EquipNum") }}:{{ totalNum }}</p>
    </div>
    <div class="yingyanRightMeta" v-show="mapType == 2">
      <p>
        {{ $t("salesModule.GuijiJP") }}
        <el-switch
          v-model="isjiuzheng"
          active-value="1"
          inactive-value="0"
          @change="isJZ"
        ></el-switch>
      </p>
      <p v-show="isjiuzheng == 1">
        <label
          ><input
            value="need_denoise"
            v-model="isCkedAll"
            type="checkbox"
            @change="isJZ"
          />{{ $t("salesModule.QZ") }}</label
        >
        <label
          ><input
            value="need_vacuate"
            v-model="isCkedAll"
            type="checkbox"
            @change="isJZ"
          />{{ $t("salesModule.CX") }}</label
        >
        <label
          ><input
            value="need_mapmatch"
            v-model="isCkedAll"
            type="checkbox"
            @change="isJZ"
          />{{ $t("salesModule.BL") }}</label
        >
      </p>
      <p v-show="isjiuzheng == 1">
        {{ $t("salesModule.MoveStyle") }}：
        <label
          ><input
            type="radio"
            v-model="transportMode"
            value="auto"
            @change="isJZ"
          />{{ $t("salesModule.Auto") }}</label
        >
        <label
          ><input
            type="radio"
            v-model="transportMode"
            value="driving"
            @change="isJZ"
          />{{ $t("salesModule.Drive") }}</label
        >
        <label
          ><input
            type="radio"
            v-model="transportMode"
            value="riding"
            @change="isJZ"
          />{{ $t("salesModule.Cycling") }}</label
        >
        <label
          ><input
            type="radio"
            v-model="transportMode"
            value="walking"
            @change="isJZ"
          />{{ $t("salesModule.Walk") }}</label
        >
      </p>
    </div>
    <div
      style="width:100%;height:100%; border：1px solid #eee"
      id="container"
    ></div>
  </div>
</template>

<script>
import BMap from "BMap";
export default {
  data() {
    return {
      mapX: "104.073652",
      mapY: "30.664369",
      playPoints: [],
      MapObj: {},
      playIndex: 0,
      isToggle: 1,
      filterText: "",
      filterText1: "",
      online: 1,
      isCkedAll: [],
      transportMode: "auto",
      isShowAll: "1",
      isjiuzheng: "0",
      defaultProps: {
        children: "ChildList",
        label: "DepartmentName",
        disabled: "Disabled"
      },
      defaultProps1: {
        children: "ChildList",
        label: "DepartmentName",
        disabled: "Disabled"
      },
      defaultImg:
        'this.src="' + require("../../assets/img/litheader.png") + '"',
      mapType: "1",
      keys: "?ak=L5Qw0GlbbCIMwgR4Uug3ogM40Imkd3CV&service_id=203768",
      dateTime: "",
      entity_name: "",
      msg: {
        Status: "0"
      },
      onlineType: 4,
      onlineTypeList: [],
      leaveLineTypeList: [],
      totalNum: 0,
      lastLocation: {},
      locationStatus: "",
      locationPhoto: "",
      locationLastTime: "",
      locationName: "",
      loctionArr: {},
      markersList: [],
      list: [],
      Point: [],
      PositionList: [],
      treeData: [],
      trackTreeData: [],
      personData: [],
      onlinePerson: 0,
      gettrackPageIndex: 0,
      getlistIndex: 0,
      FinalYingYan: true,
      datainfo: {},
      page_size100: 100,
      page_size: 1000,
      page_size2: 5000
    };
  },
  beforeDestroy() {
    if (this.intervalid) {
      //如果定时器还在运行 或者直接关闭，不用判断
      clearInterval(this.intervalid); //关闭
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    filterText1(val) {
      this.$refs.tree1.filter(val);
    }
  },
  filters: {
    FileSizeFormat(value) {
      return (value / 1000).toFixed(2) + "Km";
    }
  },
  created() {},
  methods: {
    getPerson(id) {
      this.apipost(
        "admin_get_EmployeeGet",
        {
          Id: id
        },
        res => {
          if (res.data.resultCode == 1) {
            this.datainfo = res.data.data;
            this.filterText = this.datainfo.EmName;
            let obj = {};
            obj.Phone = this.datainfo.EmLoginMobile;
            this.getPersonList(obj);
          }
        },
        err => {}
      );
    },
    toggleDiv() {
      if (this.isToggle == 1) {
        this.isToggle = 2;
        document.getElementById("yingyanMeta").style.height = "0";
      } else {
        this.isToggle = 1;
        document.getElementById("yingyanMeta").style.height = "500px";
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.DepartmentName.indexOf(value) !== -1;
    },
    filterNode1(value, data) {
      if (!value) return true;
      return data.DepartmentName.indexOf(value) !== -1;
    },
    getType(val) {
      this.mapType = val;
      this.filterText1 = "";
      if (val == 1) {
        this.Point = [];
      }
      this.creatMap();
    },
    isJZ() {
      let timestamp = new Date(this.dateTime);
      let start_time = timestamp.getTime() / 1000;
      let end_time = start_time + 86400;
      let canshu = "need_denoise=0,need_vacuate=0,need_mapmatch=0";
      this.isCkedAll.forEach(item => {
        if (this.isCkedAll.findIndex(item => item == "need_denoise") != -1) {
          canshu = canshu.replace("need_denoise=0", "need_denoise=1");
        }
        if (this.isCkedAll.findIndex(item => item == "need_vacuate") != -1) {
          canshu = canshu.replace("need_vacuate=0", "need_vacuate=1");
        }
        if (this.isCkedAll.findIndex(item => item == "need_mapmatch") != -1) {
          canshu = canshu.replace("need_mapmatch=0", "need_mapmatch=1");
        }
      });
      this.gettrackPageIndex = 1;
      let url =
        this.keys +
        "&entity_name=" +
        this.entity_name +
        "&start_time=" +
        start_time +
        "&end_time=" +
        end_time +
        "&page_size=5000&is_processed=" +
        this.isjiuzheng +
        "&process_option=" +
        canshu +
        ",transport_mode=" +
        this.transportMode;
      this.gettrackPage(url);
      this.Point = [];
    },
    isShowAllMarkers() {
      if (this.isShowAll == 0) {
        this.totalNum = 0;
        this.lastLocation = {};
        this.creatMap();
      } else {
        this.creatMap();
      }
    },
    getOnlineMarker(treeObj) {
      let obj = this.markersList.find(
        item => item.entity_name == treeObj.entity_name
      );
      if (obj) {
        this.loctionArr = obj.latest_location;
        if (obj.latest_location) {
          this.lastLocation.log = obj.latest_location.longitude;
          this.lastLocation.lat = obj.latest_location.latitude;
          this.locationLastTime = obj.latest_location.loc_time;
          this.locationPhoto = treeObj.EmPhoto;
          this.locationName = treeObj.EmName;
          if (this.getOnlineStatus(obj.latest_location.loc_time) === 0) {
            obj.latest_location.speed = obj.latest_location.speed || 0;
            this.locationStatus = this.getSpeed(obj.latest_location.speed);
          } else {
            this.locationStatus = "离线";
          }
          this.creatMap();
        }
      } else {
        this.Error("暂无定位数据");
      }
    },

    getDistance(data) {
      if (data.Phone) {
        let timestamp = new Date(this.dateTime);
        let start_time = timestamp.getTime() / 1000;
        let end_time = start_time + 86400;
        let canshu = "need_denoise=0,need_vacuate=0,need_mapmatch=0";
        this.isCkedAll.forEach(item => {
          if (this.isCkedAll.findIndex(item => item == "need_denoise") != -1) {
            canshu = canshu.replace("need_denoise=0", "need_denoise=1");
          }
          if (this.isCkedAll.findIndex(item => item == "need_vacuate") != -1) {
            canshu = canshu.replace("need_vacuate=0", "need_vacuate=1");
          }
          if (this.isCkedAll.findIndex(item => item == "need_mapmatch") != -1) {
            canshu = canshu.replace("need_mapmatch=0", "need_mapmatch=1");
          }
        });
        let url =
          this.keys +
          "&entity_name=" +
          data.Phone +
          "&start_time=" +
          start_time +
          "&end_time=" +
          end_time +
          "&page_index=1&page_size=1&is_processed=" +
          this.isjiuzheng +
          "&process_option=" +
          canshu +
          ",transport_mode=" +
          this.transportMode;
        this.$http
          .get(
            "https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/track/gettrack" +
              url
          )
          .then(res => {
            if (res.data.distance == undefined) {
              data.distance = "0";
            } else {
              data.distance = res.data.distance;
            }
          });
      }
    },

    getOneMarker(treeObj) {
      let obj = this.markersList.find(
        item => item.entity_name == treeObj.Phone
      );
      if (obj) {
        this.loctionArr = obj.latest_location;
        if (obj.latest_location) {
          this.lastLocation.log = obj.latest_location.longitude;
          this.lastLocation.lat = obj.latest_location.latitude;
          this.locationLastTime = obj.latest_location.loc_time;
          this.locationPhoto = treeObj.EmPhoto;
          this.locationName = treeObj.DepartmentName;
          if (this.getOnlineStatus(obj.latest_location.loc_time) === 0) {
            obj.latest_location.speed = obj.latest_location.speed || 0;
            this.locationStatus = this.getSpeed(obj.latest_location.speed);
          } else {
            this.locationStatus = "离线";
          }
          this.creatMap();
        }
      } else {
        this.Error("暂无定位数据");
      }
    },
    /**
     * 判断当前设备是否在线，规则是最后上传的轨迹点
     * 时间在当前系统时间十分钟内判断为在线，否则为离线
     *
     * @param {number} time UNIX时间戳
     * @return {number} 在线状态 0在线 1离线
     */
    getOnlineStatus(time) {
      var status = 0;
      var timestamp = new Date().getTime() / 1000;
      var timeDiff = (timestamp - time) / 60;
      status = timeDiff >= 10 ? 1 : 0;
      return status;
    },
    /**
     * 判断当前设备是否为静止，规则是速度小于1km/h返回静止，
     * 否则返回速度
     *
     * @param {number} speed 速度 单位为 km/h
     * @return {string} 速度
     */
    getSpeed(speed) {
      var speedDesc;
      if (speed >= 150) {
        speedDesc = " - - ";
      } else if (speed >= 1 && speed < 150) {
        speedDesc = speed.toFixed(1) + "km/h";
      } else {
        speedDesc = "静止";
      }
      return speedDesc;
    },
    info(phone, Type) {
      if (Type == 2) {
        if (phone != undefined && phone.length > 0) {
          var eitem = this.markersList.find(item => item.entity_name == phone);
          if (eitem) {
            if (this.getOnlineStatus(eitem.latest_location.loc_time) === 0) {
              eitem.latest_location.speed = eitem.latest_location.speed || 0;
              return this.getSpeed(eitem.latest_location.speed);
            } else {
              return "离线";
            }
          } else {
            return "未开通定位";
          }
        } else {
          return "未开通定位";
        }
      }
    },
    getTrackTreeData() {
      this.apipost(
        "TaskManagemnet_get_GetEmpForNowDepartmentForPath",
        {
          StartTime: this.dateTime
        },
        res => {
          if (res.data.resultCode == 1) {
            this.trackTreeData = res.data.data;
          }
        },
        err => {}
      );
    },

    getData() {
      this.apipost(
        "TaskManagemnet_get_GetEmpForNowDepartment",
        this.msg,
        res => {
          if (res.data.resultCode == 1) {
            this.treeData = res.data.data.List;
            this.personData = res.data.data.entitiesR;
            this.creatMap();
          } else {
          }
        },
        err => {}
      );
    },
    getlist() {
      this.onlineTypeList = [];
      this.leaveLineTypeList = [];
      this.markersList = [];
      let timestamp = new Date();
      let start_time = timestamp.getTime() / 1000;
      let url = this.keys + "&timeStamp=" + start_time;
      this.getlistIndex = 1;
      this.getlistPage(url);
    },
    getlistPage(url) {
      let that = this;
      this.$http
        .get(
          "https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/entity/search" +
            url +
            "&page_index=" +
            this.getlistIndex +
            "&page_size" +
            this.page_size100
        )
        .then(res => {
          this.markersList = this.markersList.concat(res.data.entities);
          if (that.getlistIndex * this.page_size100 < res.data.total) {
            that.getlistIndex += 1;
            that.getlistPage(url);
          } else {
            that.onlinePerson = 0;
            that.personData.forEach(person => {
              let item = that.markersList.find(
                markers => markers.entity_name == person.entity_name
              );
              if (item) {
                if (that.getOnlineStatus(item.latest_location.loc_time) === 0) {
                  that.onlineTypeList.push(person);
                  that.onlinePerson += 1;
                } else {
                  that.leaveLineTypeList.push(person);
                }
              } else {
                that.leaveLineTypeList.push(person);
              }
            });
          }
        });
    },
    // 轨迹请求
    getPersonList(obj) {
      this.entity_name = obj.Phone;
      let timestamp = new Date(this.dateTime);
      let start_time = timestamp.getTime() / 1000;
      let end_time = start_time + 86400;
      let canshu = "need_denoise=0,need_vacuate=0,need_mapmatch=0";
      this.isCkedAll.forEach(item => {
        if (this.isCkedAll.findIndex(item => item == "need_denoise") != -1) {
          canshu = canshu.replace("need_denoise=0", "need_denoise=1");
        }
        if (this.isCkedAll.findIndex(item => item == "need_vacuate") != -1) {
          canshu = canshu.replace("need_vacuate=0", "need_vacuate=1");
        }
        if (this.isCkedAll.findIndex(item => item == "need_mapmatch") != -1) {
          canshu = canshu.replace("need_mapmatch=0", "need_mapmatch=1");
        }
      });
      this.gettrackPageIndex = 1;
      let url =
        this.keys +
        "&entity_name=" +
        obj.Phone +
        "&start_time=" +
        start_time +
        "&end_time=" +
        end_time +
        "&page_size=" +
        this.page_size2 +
        "&is_processed=" +
        this.isjiuzheng +
        "&process_option=" +
        canshu +
        ",transport_mode=" +
        this.transportMode;
      this.gettrackPage(url);
      this.Point = [];
    },
    gettrackPage(url) {
      this.$http
        .get(
          "https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/track/gettrack" +
            url +
            "&page_index=" +
            this.gettrackPageIndex
        )
        .then(res => {
          let xy = res.data.points;
          if (xy != undefined) {
            xy.forEach(x => {
              this.Point.push({
                xy: [x.latitude, x.longitude],
                time: x.loc_time
              });
            });
          }

          if (this.gettrackPageIndex * this.page_size2 < res.data.total) {
            this.gettrackPageIndex += 1;
            this.gettrackPage(url);
          } else {
            this.creatMap();
          }
        });
    },

    getPersonListByTime() {
      if (this.$route.query.EmployeeId) {
        let obj = {};
        obj.Phone = this.datainfo.EmLoginMobile;
        this.getPersonList(obj);
      } else {
        this.filterText = "";
        this.getTrackTreeData();
      }
    },
    formatDate(now) {
      let dateTime = new Date(now * 1000);
      var year = dateTime.getFullYear(),
        month =
          dateTime.getMonth() + 1 >= 10
            ? dateTime.getMonth() + 1
            : "0" + (dateTime.getMonth() + 1),
        date =
          dateTime.getDate() >= 10
            ? dateTime.getDate()
            : "0" + dateTime.getDate(),
        hour =
          dateTime.getHours() >= 10
            ? dateTime.getHours()
            : "0" + dateTime.getHours(),
        minute =
          dateTime.getMinutes() >= 10
            ? dateTime.getMinutes()
            : "0" + dateTime.getMinutes(),
        second =
          dateTime.getSeconds() >= 10
            ? dateTime.getSeconds()
            : "0" + dateTime.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
    playGj() {
      let point = this.playPoints[this.playIndex];
      if (this.playIndex > 0) {
        this.MapObj.addOverlay(
          new BMap.Polyline(
            [this.playPoints[this.playIndex - 1], this.playIndex],
            { strokeColor: "#ffffff", strokeWeight: 1, strokeOpacity: 1 }
          )
        );
      }
      this.playIndex++;
      if (this.playIndex < this.playPoints.length) {
        this.playGj(this.playIndex);
      } else {
      }
    },
    creatMap() {
      let map;
      map = new BMap.Map("container"); // 创建Map实例
      this.MapObj = map;
      map.setCurrentCity("成都"); // 设置地图默认显示城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      map.centerAndZoom(new BMap.Point(this.mapX, this.mapY), 18); // 初始化地图,设置中心点坐标和地图级别
      let PositionList = [];
      this.Point.forEach((x, index) => {
        //添加轨迹点
        PositionList.push(new BMap.Point(x.xy[1], x.xy[0]));
      });
      this.playPoints = PositionList;

      if (this.Point.length > 0) {
        let centerIndex = parseInt(this.Point.length / 2);
        map.centerAndZoom(
          new BMap.Point(
            this.Point[centerIndex].xy[1],
            this.Point[centerIndex].xy[0]
          ),
          18
        );
        let curve = new BMap.Polyline(PositionList, {
          strokeColor: "#E95252",
          strokeWeight: "8", //折线的宽度，以像素为单位
          strokeOpacity: 1 //折线的透明度，取值范围0 - 1
        });
        //画轨迹图
        map.addOverlay(curve);
      }
      let that = this;
      if (this.markersList.length > 0 && this.mapType == 1) {
        this.personData.forEach(person => {
          let item = this.markersList.find(
            markers => markers.entity_name == person.entity_name
          );
          if (item) {
            let myIcon = new BMap.Icon(
              this.domainManager().ViittoFileUrl +
                "/Upload/Icon/Common/positioning.png",
              new BMap.Size(32, 40)
            );
            let point = new BMap.Point(
              item.latest_location.longitude,
              item.latest_location.latitude
            );
            let marker;
            if (this.getOnlineStatus(item.latest_location.loc_time) === 0) {
              marker = new BMap.Marker(point);
            } else {
              marker = new BMap.Marker(point, { icon: myIcon });
            }
            map.addOverlay(marker);

            if (this.isShowAll == 0) {
              marker.hide();
            }

            marker.addEventListener("click", function(e) {
              let status;
              if (that.getOnlineStatus(item.latest_location.loc_time) === 0) {
                item.latest_location.speed = item.latest_location.speed || 0;
                status = that.getSpeed(item.latest_location.speed);
              } else {
                status = "离线";
              }
              let myGeo = new BMap.Geocoder();
              myGeo.getLocation(point, function(res) {
                let address;
                if (res) {
                  address = res.address;
                } else {
                  address = "无法定位";
                }
                let content =
                  "<div class='mapLayer'>" +
                  "<p><img onerror='" +
                  that.defaultImg +
                  "'  style='width:24px;height:24px;border-radius:12px;vertical-align: middle;' src='" +
                  person.EmPhoto +
                  "'>&nbsp;&nbsp;&nbsp;" +
                  person.EmName +
                  "</p>" +
                  "<p>状态：" +
                  status +
                  "</p>" +
                  "<p>地址：" +
                  address +
                  "</p>" +
                  "<p>定位：" +
                  item.latest_location.longitude +
                  "," +
                  item.latest_location.latitude +
                  "</p>" +
                  "<p>时间：" +
                  that.formatDate(item.latest_location.loc_time) +
                  "</p>";
                ("</div>");
                let infoWindow = new BMap.InfoWindow(content);
                map.openInfoWindow(infoWindow, point); //开启信息窗口
              });
            });
          }
        });
      }

      if (this.mapType == 2) {
        this.lastLocation = {};
      }

      if (this.lastLocation.log && this.lastLocation.lat) {
        //单机打开弹窗
        this.mapX = this.lastLocation.log;
        this.mapY = this.lastLocation.lat;
        let a = this.lastLocation.log;
        let b = this.lastLocation.lat;
        let point = new BMap.Point(
          this.lastLocation.log,
          this.lastLocation.lat
        );
        if (this.isShowAll == 0) {
          let myIcon = new BMap.Icon(
            this.domainManager().ViittoFileUrl +
              "/Upload/Icon/Common/positioning.png",
            new BMap.Size(32, 40)
          );
          let marker = new BMap.Marker(point);
          if (this.getOnlineStatus(this.locationLastTime) === 0) {
            marker = new BMap.Marker(point);
          } else {
            marker = new BMap.Marker(point, { icon: myIcon });
          }
          map.addOverlay(marker);
        }
        map.centerAndZoom(point, 18);
        let myGeo = new BMap.Geocoder();
        let that = this;
        myGeo.getLocation(point, function(res) {
          let address;
          if (res) {
            address = res.address;
          } else {
            address = "无法定位";
          }
          let content =
            "<div class='mapLayer'>" +
            "<p><img onerror='" +
            that.defaultImg +
            "'  style='width:24px;height:24px;border-radius:12px;vertical-align: middle;' src='" +
            that.locationPhoto +
            "'>&nbsp;&nbsp;&nbsp;" +
            that.locationName +
            "</p>" +
            "<p>状态：" +
            that.locationStatus +
            "</p>" +
            "<p>地址：" +
            address +
            "</p>" +
            "<p>定位：" +
            a +
            "," +
            b +
            "</p>" +
            "<p>时间：" +
            that.formatDate(that.locationLastTime) +
            "</p>";
          ("</div>");
          let infoWindow = new BMap.InfoWindow(content);
          map.openInfoWindow(infoWindow, point); //开启信息窗口
        });
      }
      map.closeInfoWindow();
      let start_time;
      if (this.isShowAll == 1) {
        // 获取经纬度范围参数
        var bs = map.getBounds(); //获取可视区域
        var bssw = bs.getSouthWest(); //可视区域左下角
        var bsne = bs.getNorthEast(); //可视区域右上角
        var topLat = bsne.lat;
        var bottomLat = bssw.lat;
        var leftLng = bssw.lng;
        var rightLng = bsne.lng;
        let timestamp = new Date();
        start_time = timestamp.getTime() / 1000;
        that.getboundsearch(bottomLat, leftLng, topLat, rightLng, start_time);

        map.addEventListener("zoomend", function(evt) {
          //缩放地图
          bs = map.getBounds(); //获取可视区域
          bssw = bs.getSouthWest(); //可视区域左下角
          bsne = bs.getNorthEast(); //可视区域右上角
          topLat = bsne.lat;
          bottomLat = bssw.lat;
          leftLng = bssw.lng;
          rightLng = bsne.lng;
          that.getboundsearch(bottomLat, leftLng, topLat, rightLng, start_time);
        });

        map.addEventListener("moveend", function(evt) {
          //拖拽地图
          bs = map.getBounds(); //获取可视区域
          bssw = bs.getSouthWest(); //可视区域左下角
          bsne = bs.getNorthEast(); //可视区域右上角
          topLat = bsne.lat;
          bottomLat = bssw.lat;
          leftLng = bssw.lng;
          rightLng = bsne.lng;
          that.getboundsearch(bottomLat, leftLng, topLat, rightLng, start_time);
        });
      }
    },
    getboundsearch(bottomLat, leftLng, topLat, rightLng, start_time) {
      var that = this;
      let url =
        that.keys +
        "&bounds=" +
        bottomLat +
        "," +
        leftLng +
        ";" +
        topLat +
        "," +
        rightLng +
        "&filter=&page_index=1&page_size=" +
        this.page_size +
        "&timeStamp=" +
        start_time;
      that.$http
        .get(
          "https://bird.ioliu.cn/v1?url=http://yingyan.baidu.com/api/v3/entity/boundsearch" +
            url
        )
        .then(res => {
          var tempArray = res.data.entities;
          that.totalNum = 0;
          if (tempArray && tempArray != null && tempArray.length > 0) {
            that.personData.forEach(person => {
              let item = res.data.entities.find(
                markers => markers.entity_name == person.entity_name
              );
              if (item && that.isShowAll == 1) {
                that.totalNum += 1;
              }
            });
          }
        });
    }
  },
  mounted() {
    let date = new Date();
    let _y = date.getFullYear();
    let _m =
      date.getMonth() + 1 >= 10
        ? date.getMonth() + 1
        : "0" + (date.getMonth() + 1);
    let _d = date.getDate();
    this.dateTime = _y + "-" + _m + "-" + _d;
    this.getlist();
    this.getTrackTreeData();
    this.getData();
    this.intervalid = setInterval(() => {
      this.getlist();
    }, 60000);
    if (this.$route.query.EmployeeId) {
      let id = this.$route.query.EmployeeId;
      this.FinalYingYan = false;
      this.getPerson(id);
      this.mapType = 2;
    }
  }
};
</script>

<style>
.notOnlineStyle {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.yingyanIcon {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  display: inline-block;
  vertical-align: middle;
}
.yingyanMeta .el-tree-node__content {
  height: 32px !important;
  line-height: 32px !important;
}
.yingyanMeta {
  color: #333;
  position: absolute;
  left: -20px;
  top: 40px;
  background: rgba(255, 255, 255, 1);
  width: 300px;
  height: 500px;
  overflow: hidden;
  z-index: 500;
  transition: height 0.3s;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.09);
}
.yingyanMeta .el-tree {
  color: #333 !important;
}
.yingyanMeta .title {
  background: #2398ff;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: #fff;
}

.yingyanMeta .title > div {
  float: left;
  width: 150px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.yingyanMeta .el-tree-node__content > .el-tree-node__expand-icon {
  padding: 0 !important;
  margin: 3px 3px 0 3px !important;
  color: #666;
}
.yingyanMeta .el-tree-node__content > .el-tree-node__expand-icon.is-leaf {
  color: transparent;
}
.yingyanMeta .title .titleSjx {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  position: absolute;
  left: 65px;
  bottom: 0;
  border-color: transparent transparent #f5f5f5 transparent;
}
.yingyanMeta .yingyanMetacont {
  overflow-y: auto;
  max-height: 430px;
  padding-bottom: 20px;
  margin-top: 1px;
}

.yingyanMeta .isOnlineType {
  width: 300px;
  height: 40px;
  line-height: 40px;
  background: #f5f5f5;
}

.yingyanMeta .isOnlineType li {
  float: left;
  font-size: 14px;
  color: #666;
  height: 40px;
  width: 100px;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.yingyanMeta .isOnlineType .cked {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 2px;
  background: #2aaff3;
}

.yingyanMeta .yingyanMsgList {
  height: 410px;
  /* overflow-y: auto; */
  font-size: 14px;
  color: #666;
}

.yingyanMeta .yingyanMsgList li {
  height: 40px;
  line-height: 40px;
  text-indent: 10px;
  cursor: pointer;
}
.yingyanMeta .yingyanMsgList li > img {
  margin-right: 4px;
}

.yingyanMeta .yingyanMsgList li > span {
  float: right;
  margin-right: 10px;
}

.yingyanMeta .yingyanMsgList li:hover {
  background: #f1f1f1;
}

.yingyanRightMeta {
  position: absolute;
  right: 10px;
  top: 10px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  line-height: 24px;
  border-radius: 4px;
  padding: 10px 20px;
  overflow: hidden;
  z-index: 500;
  font-size: 14px;
  color: #333;
}

.yingyanRightMeta input {
  vertical-align: sub;
  margin-top: -2px;
}

.yingyanRightMeta > p {
  margin-bottom: 5px;
}

.ul-container {
  padding: 0 20px 0 10px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.ul-container ul li {
  line-height: 28px;
}

.ul-container ul li ul {
  margin-left: 20px;
}

.yingyanMsgList::-webkit-scrollbar,
.yingyanMetacont::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}

.yingyanMsgList::-webkit-scrollbar-thumb,
.yingyanMetacont::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}

.mapLayer {
  font-size: 12px;
  width: 300px;
}

.mapLayer > p {
  line-height: 20px;
}
</style>