<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2024-01-09 23:08:15
 * @LastEditors: JC9527
 * @LastEditTime: 2024-03-14 16:12:31
-->
<template>
  <div class="map-main">
    <!-- <div id="showMap" class="showMap"></div> -->
    <!-- <el-amap
      ref="map"
      :min-zoom="10"
      :max-zoom="22"
      :center="center"
      :zoom="zoom"
      @init="init"
      @click="click"
      class="bmap-demo"
      :events="selfMapEv"
    >
    </el-amap> -->
    <el-amap
      ref="map"
      map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518"
      :center="center"
      :zoom="zoom"
      :zooms="zooms"
      v-loading="mapLoading"
      element-loading-background="rgba(11, 34, 72, 0.8)"
      @init="init"
      :extra-options="{ vectorMapForeign: 'style_zh_cn' }"
      class="amap-demo"
    >
      <el-amap-layer-satellite :visible="visible"></el-amap-layer-satellite>

      <!-- 江宁GeoJson文件 -->
      <!-- <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="geojson" :polygon-options="polygonOptions" :visible="true" :draggable="draggable"></el-amap-geojson> -->
      
      <!-- marker标记点 -->
      <el-amap-marker v-for="(marker, index) in markers" :key="index + 'marker'" :visible="componentMarker.visible" :offset='markerOffset' :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)">
        <div class="markerStyles">
          <div v-if="marker.text" class="marker-Text">{{marker.text}}</div>
          <img :src="marker.imgSrc" alt="">
        </div>
      </el-amap-marker>

      <!-- 人员信息弹框 -->
      <el-amap-info-window
        v-if="personInfo.visible"
        anchor="bottom-center"
        :offset="[-10,-40]"
        :closeWhenClickMap="true"
        :position="personInfo.position"
        :visible.sync="personInfo.visible">
        <div class="person-popup">
          <div class="person-title">
            <div class="title">人员信息</div>
            <img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
          </div>
          <div class="person-main">
            <div class="person-info">
              <div class="info-left">
                <div class="dot"></div>
                <div class="name">姓名：</div>
              </div>
              <div class="position">{{ personInfo.info.userName || "-" }}</div>
            </div>
            <div class="person-info">
              <div class="info-left">
                <div class="dot"></div>
                <div class="name">联系方式：</div>
              </div>
              <div class="position">{{ personInfo.personinfo ? personInfo.personinfo.phonenumber : "-" }}</div>
            </div>
            <div class="person-info">
              <div class="info-left">
                <div class="dot"></div>
                <div class="name">所属部门：</div>
              </div>
              <div class="position">{{ personInfo.personinfo ? personInfo.personinfo.deptName : "-" }}</div>
            </div>
            <div class="person-info">
              <div class="info-left">
                <div class="dot"></div>
                <div class="name">设备类型：</div>
              </div>
              <div class="position">执法仪</div>
            </div>
            <div class="person-info">
              <div class="info-left">
                <div class="dot"></div>
                <div class="name">所属围栏：</div>
              </div>
              <div class="position">{{ personInfo.personinfo ? personInfo.personinfo.fenceName : '-' }}</div>
            </div>
            <div class="person-info">
              <div class="info-left">
                <div class="dot"></div>
                <div class="name">当前位置：</div>
              </div>
              <div class="position">{{ personInfo.info.address }}</div>
            </div>
            <div class="btns">
              <div @click="travelPath()">行程轨迹</div>
              <!-- <div>附近队员</div> -->
              <div @click="shareClick">位置分享</div>
              <div @click="watchClick">强制观摩</div>
              <div @click="taskClick">任务派发</div>
            </div>
          </div>
        </div>
      </el-amap-info-window>

      <!-- 事件弹框 -->
      <el-amap-info-window
        v-if="eventInfo.visible"
        :offset="[-10,-10]"
        :closeWhenClickMap="true"
        :position="eventInfo.position"
        :visible.sync="eventInfo.visible"
      >
        <div class="event-popup" :class="eventInfo.info.status == '待受理' ? '':'event-popupTwo'">
          <div class="event-title">
            <div class="title">事件信息</div>
            <!-- <div class="mask" @click="markersClosePopup"></div> -->
            <img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
          </div>
          <div class="event-main">
            <div class="event-info">
              <div class="dot"></div>
              <div class="name">事件名称：</div>
              <div class="position">{{ eventInfo.info.name }}</div>
            </div>
            <div class="event-info">
              <div class="dot"></div>
              <div class="name">事件类别：</div>
              <el-tooltip :content="eventInfo.info.type" placement="top">
                <div class="position">{{ eventInfo.info.type }}</div>
              </el-tooltip>
            </div>
            <div class="event-info">
              <div class="dot"></div>
              <div class="name">事件地址：</div>
              <el-tooltip :content="eventInfo.info.address" placement="top">
                <div class="position">{{ eventInfo.info.address }}</div>
              </el-tooltip>
            </div>
            <div class="event-info">
              <div class="dot"></div>
              <div class="name">描述：</div>
              <el-tooltip :content="eventInfo.info.content" placement="top">
                <div class="position">{{ eventInfo.info.content }}</div>
              </el-tooltip>
            </div>
            <div class="event-info">
              <div class="dot"></div>
              <div class="name">状态：</div>
              <div class="position">{{ eventInfo.info.status }}</div>
            </div>
            <div class="btn" v-show="eventInfo.info.status == '待受理'" @click="eventBtn">
              指派
            </div>
          </div>
        </div>
      </el-amap-info-window>

      <!-- 执法车辆弹框 -->
      <el-amap-info-window
        v-if="carInfo.visible"
        :offset="[-0,-10]"
        :closeWhenClickMap="true"
        :position="carInfo.position"
        :visible.sync="carInfo.visible"
      >
        <div class="car-popup">
          <div class="car-title">
            <div class="title">车辆信息</div>
            <!-- <div class="mask" @click="markersClosePopup"></div> -->
            <img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
          </div>
          <div class="car-main">
            <div class="car-info">
              <div class="dot"></div>
              <div class="name">{{carInfo.info.carName}}</div>
              <div class="position">{{carInfo.info.carCode}}</div>
            </div>
            <div class="btn" @click="travelPath()">行程轨迹</div>
          </div>
        </div>
      </el-amap-info-window>
      
      <!-- 监控视频弹框 -->
      <el-amap-info-window
        v-if="monitoringInfo.visible"
        :offset="[-10,-10]"
        :closeWhenClickMap="true"
        :position="monitoringInfo.position"
        :visible.sync="monitoringInfo.visible"
      >
        <div class="monitoring-popup">
          <div class="monitoring-title">
            <div class="title">{{ monitoringInfo.info.name }}</div>
            <!-- <div class="mask" @click="markersClosePopup"></div> -->
            <img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
          </div>
          <div class="monitoring">
            <div class="monitoring-list">
              <div class="person-info">
                <div class="info-left">
                  <div class="dot"></div>
                  <div class="name">点位名称：</div>
                </div>
                <div class="position">{{ monitoringInfo.info.name }}</div>
              </div>
              <div class="person-info">
                <div class="info-left">
                  <div class="dot"></div>
                  <div class="name">在线状态：</div>
                </div>
                <div class="position">{{ monitoringInfo.info.status == 1 ? "在线":"离线" }}</div>
              </div>
              <div class="person-info">
                <div class="info-left">
                  <div class="dot"></div>
                  <div class="name">安装位置：</div>
                </div>
                <div class="position">{{ monitoringInfo.info.installPlace }}</div>
              </div>
            </div>
            <div class="btns">
              <div class="btn" @click="monitorVideos(monitoringInfo.info.status)">上墙</div>
              <div class="btn" @click="copyUrl()">转发</div>
            </div>
          </div>
        </div>
      </el-amap-info-window>

      <!-- 沿街商铺分布 -->
      <el-amap-info-window
        v-if="shopInfo.visible"
        :offset="[-10,-10]"
        :closeWhenClickMap="true"
        :position="shopInfo.position"
        :visible.sync="shopInfo.visible"
      >
        <div class="event-popup">
          <div class="event-title">
            <div class="title">主体基本信息</div>
            <!-- <div class="mask" @click="markersClosePopup"></div> -->
            <img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
          </div>
          <div class="event-main">
          <div class="event-info">
              <div class="dot"></div>
              <div class="name">商铺名称：</div>
              <div class="position">{{ shopInfo.info.shopName }}</div>
            </div>
            <div class="event-info">
              <div class="dot"></div>
              <div class="name">商铺类型：</div>
              <div class="position">{{ shopInfo.info.operation }}</div>
            </div>
            <div class="event-info">
              <div class="dot"></div>
              <div class="name">所在地址：</div>
              <el-tooltip :content="shopInfo.info.bodyAddress" placement="top">
                <div class="position">{{ shopInfo.info.bodyAddress }}</div>
              </el-tooltip>
            </div>
            <div class="event-info">
              <div class="dot"></div>
              <div class="name">描述：</div>
              <el-tooltip :content="shopInfo.info.bodyName" placement="top">
                <div class="position">{{ shopInfo.info.bodyName }}</div>
              </el-tooltip>
            </div>
          
            <div class="btn" @click="getShopInfo">
              查看载体详情
            </div>
          </div>
        </div>
      </el-amap-info-window>
    </el-amap>

    <div class="left-bg">
      <div class="bgt"></div>
    </div>
    <transition name="left-animationMap">
      <div class="map-left" v-if="leftAnimationData">
        <!--  :personLine="personLine" -->
        <map-left :carLine="carLine" @realTimeLocationClick="realTimeLocationClick" @carTimeLocationClick="realTimeLocationClick"></map-left>
      </div>
    </transition>

    <img
      :src="
        leftAnimationData
          ? require('@/assets/images/action-left.png')
          : require('@/assets/images/action-right.png')
      "
      alt=""
      :class="!leftAnimationData ? 'left-image2' : 'left-image'"
      @click="leftAnimation()"
    />
    <div
      class="middle-top-left"
      :class="!leftAnimationData ? 'middle-top-left2' : 'middle-top-left'"
    >
      <div class="input-keyword" v-if="MyInput">
        <!-- <el-input placeholder="请输入关键字" v-model="input">
          <i slot="suffix" class="el-icon-search" @click="search"></i>
        </el-input> -->
        <el-autocomplete
          prefix-icon="el-icon-search"
          class="inline-input"
          v-model="input"
          :fetch-suggestions="querySearch"
          placeholder="请输入关键字进行搜索"
          :trigger-on-focus="false"
          @select="handleSelect"
        ></el-autocomplete>
      </div>
      <div class="laser-positioning" @click="positioning" v-if="zadian">
        <span>地图扎点</span>
        <img src="@/assets/images/positioning.png" alt="" />
      </div>
      <div class="creation-task" @click="createdTask" v-if="zadian">
        <span>新增事件</span>
        <img src="@/assets/images/createdTask.png" alt="" />
      </div>
    </div>
    <div
      class="middle-bottom-left"
      :class="!leftAnimationData ? 'middle-bottom-left2' : 'middle-bottom-left'"
    >
      <div class="list" @click="changeMap(1)">
        <div class="leftbg" :class="actionMap == 1 ? 'action-map' : ''">
          <img src="@/assets/images/icon1.png" alt="" />
        </div>
        <div class="rightbg" v-show="actionMap == 1">
          <span>执法人员</span>
        </div>
      </div>
      <div class="list" @click="changeMap(2)">
        <div class="leftbg" :class="actionMap == 2 ? 'action-map' : ''">
          <img src="@/assets/images/icon2.png" alt="" />
        </div>
        <div class="rightbg" v-show="actionMap == 2">
          <span>巡查事件</span>
        </div>
      </div>
      <!-- <div class="list" @click="changeMap(2)">
        <div class="leftbg" :class="actionMap == 2 ? 'action-map' : ''">
          <img src="@/assets/images/icon3.png" alt="" />
        </div>
        <div class="rightbg" v-show="actionMap == 2">
          <span>重点事件</span>
        </div>
      </div> -->
      <div class="list" @click="changeMap(3)">
        <div class="leftbg" :class="actionMap == 3 ? 'action-map' : ''">
          <img src="@/assets/images/icon4.png" alt="" />
        </div>
        <div class="rightbg" v-show="actionMap == 3">
          <span>执法车辆</span>
        </div>
      </div>
      <div class="list" @click="changeMap(4)">
        <div class="leftbg" :class="actionMap == 4 ? 'action-map' : ''">
          <img src="@/assets/images/icon5.png" alt="" />
        </div>
        <div class="rightbg" v-show="actionMap == 4">
          <span>监控视频</span>
        </div>
      </div>
      <div class="list" @click="changeMap(5)">
        <div class="leftbg" :class="actionMap == 5 ? 'action-map' : ''">
          <img src="@/assets/images/icon6.png" alt="" />
        </div>
        <div class="rightbg" v-show="actionMap == 5">
          <span>沿街商铺分布</span>
        </div>
      </div>
    </div>
    <transition name="right-animationMap">
      <div class="map-right" v-if="rightAnimationData">
        <map-right
          :quyuData="quyuData"
          :weilanData="weilanData"
          :luduanData="luduanData"
          :wanggeData="wanggeData"
          @divClick="divClick"
        ></map-right>
      </div>
    </transition>

    <img
      :src="
        rightAnimationData
          ? require('@/assets/images/action-right.png')
          : require('@/assets/images/action-left.png')
      "
      alt=""
      :class="!rightAnimationData ? 'right-image2' : 'right-image'"
      @click="rightAnimation()"
    />

    <div
      class="middle-bottom-right"
      :class="
        !rightAnimationData ? 'middle-bottom-right2' : 'middle-bottom-right'
      "
    >
      <div class="btn-action">
        <span :class="action == 1 ? 'action' : ''" @click="actionBtn(1)"
          >电子地图</span
        >
        <span :class="action == 2 ? 'action' : ''" @click="actionBtn(2)"
          >卫星地图</span
        >
      </div>
    </div>
    <div class="right-bg">
      <div class="bgt"></div>
    </div>
    <div class="bottom-bg">
      <div class="bgt"></div>
    </div>
    <personage-track ref="personageTrack"></personage-track>
    <!-- 事件指派人员 -->
    <crew-assign ref="crewAssign"></crew-assign>
    <!-- <video-wall ref="videoWall"></video-wall> -->
    <alone-video ref="aloneVideo"></alone-video>
    <!-- 商铺详情 -->
    <shop ref="shop" width="50%" title="商铺详情查看" />
    <!-- 新增事件 -->
    <new-event ref="newEvent" @cancel="cancel" @confirm="confirm"></new-event>
    <!-- 任务派发 -->
    <personage-task ref="personageTask"></personage-task>
    <!-- 强制观摩弹框 -->
    <el-dialog 
      :visible.sync="showVideo" 
      width="45%" 
      title="强制观摩" 
      :show-close="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="travel"
    >
    <template slot="title">
      <div class="closeClick">
        <div class="headline" text="title123kmalskdnj">
          <div class="headlinetitle" text="强制观摩">强制观摩</div>
        </div>
        <!-- <div class="close" @click="videoClose"></div> -->
        <img src="@/assets/images/dialogbg/close.png" class="closeimg" @click="videoClose" alt="" />
      </div>
    </template>
      <div class="watch-video-play">
        <video id='flvvideo' autoplay controls class="flv-js"></video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import point from "@/utils/mapJson/point.json";

import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json";
// 一级网格
import OneGJ02 from "@/utils/mapJson/1GJ02.json";
import TwoGJ02 from "@/utils/mapJson/2GJ02.json";
import ThreeGJ02 from "@/utils/mapJson/3GJ02.json";
import FourGJ02 from "@/utils/mapJson/4GJ02.json";
import kaifaqu from "@/utils/mapJson/开发区空港开发区GJ02.json";
import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.json";
// 二级网格
import gridding from "@/utils/mapJson/中队小网格.json"

// import zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json";
// import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json";

import mapLeft from "../components/mapLeftContent.vue";
import mapRight from "../components/mapRightContent.vue";
// import mapCentre from "../components/mapCentre.vue"
// 弹窗
import personageTrack from "../../components/personagetrack/index.vue";
import personageTask from "../../components/personageTask/index.vue";
import crewAssign from "../../components/crewAssign/index.vue";
import videoWall from "../../components/videoWall/index.vue";
import shop from "../../components/shop/index.vue";
import aloneVideo from "../../components/video/index.vue"
import newEvent from "../../components/newEvent/index.vue"
// import jiangningwangge from "@/utils/data/江宁开发区网格.json";

import weilan from "@/utils/data/围栏1.json";
import { getCenter } from "@/utils/amap"
import {
  regionalsettings,
  roadsetting,
  fence,
  bgridsetting,
  getDeviceList,
  levelQywg,
  videoSurveillance,
  getVideoPageEq,
  getPreviewURLs,
  getCarManageList,
  getStreetShopList,
  listZhzz,
  getUserByImei,
  dwgjList
} from "@/api/bigScreenApi";
import {
  robotLogin,
  ViewListPage
} from "@/api/bigScreenApi/robot.js"
import { setRobotToken } from '@/utils/auth'
import flvjs from "flv.js";
import axios from "axios";

export default {
  name: "myMap",
  components: {
    mapLeft,
    mapRight,
    personageTrack,
    crewAssign,
    videoWall,
    shop,
    aloneVideo,
    newEvent,
    personageTask
  },
  data() {
    return {
      zoom: 12,
      zooms:[10,18],
      center: [118.835418, 31.863971],  // 121.59996, 31.197646
      map: null,
      componentMarker: {
        visible: true,
      },
      // 所有点位信息
      markers:[],
      // 人员弹框信息
      personInfo: {
        position: [],
        info: {},
        personinfo:{},
        visible: false,
      },
      // 事件弹框
      eventInfo: {
        position: [],
        visible: false,
      },
      // 车辆弹框信息
      carInfo: {
        position: [],
        info:{},
        visible: false,
      },
      // 监控视频弹框信息
      monitoringInfo: {
        position: [],
        info:{},
        visible: false,
      },
      // 沿街商铺弹框信息
      shopInfo: {
        position: [],
        info:{},
        visible: false,
      },
      isClickLingtedPolygonId:false,
      lightedPolygon:null,
      lightedText:null,
      highlightedPolygonId:null,
      layers: {
        layer:null,
        text: null,
        layer2:null,
        layer3:null,
        layer4:null,
        text1:null,
        markers:null,
      },
      showVideo:false,
      videoCondition: {
        destID: '9999112301',
        msgType: 1,
      },
      player:null,
      timer:null,
      isPositioning:false,
      markerOffset: [-35,-123],
      mapLoading:false,
      count:0,
      cluster:null,
      personMarkers:[],
      MyInput:true,
      zadian:false,



      input: "", // 输入框的值
      actionMap: 1, // 默认选中执法人员地图
      action: 1, // 切换执法人员/车辆/事件分类/监控视频/沿街商铺分布 控制的值
      leftAnimationData: true,
      rightAnimationData: true,
      wanggeData: null, // 区域网格数据
      quyuData: null, // 重点区域数据
      weilanData: null, // 考勤围栏数据
      luduanData: null, // 重点路段
      personLine: [], // 在线人员情况
      carLine: [],    // 车辆情况
      visible: false,   // 卫星底图是否显示
      onIcon:null,
      offIcon:null,
    };
  },
  methods: {
    init(map) {
      this.map = map;
      // o.setMapStyle('amap://styles/darkblue')
      map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
      // console.log(o.getCenter())
      // console.log(this.map,'initMapinitMap');
      this.layers.layer = new AMap.OverlayGroup();            // 一级网格
      this.layers.layer2 = new AMap.OverlayGroup();           // 二级网格   ⌈ 暂废弃 ⌋
      this.layers.layer3 = new AMap.OverlayGroup();           // 围栏、路段、区域、及文本
      this.layers.layer4 = new AMap.OverlayGroup();           // 地图扎点
      this.layers.text = new AMap.OverlayGroup();             // 一级网格文本
      this.layers.text1 = new AMap.OverlayGroup();            // 二级网格文本
      this.layers.markers = new AMap.OverlayGroup();            // 监控视频markers
      // this.layers.layer2.setzIndex(10);
      // this.layers.layer3.setzIndex(9);
      this.$nextTick(() => {
        // var geojson1 = new AMap.Polygon({
        //   path:OneGJ02.features[0].geometry.coordinates[0][0],
        //   strokeColor: '#00C5EC', 
        //   fillColor: '#00AEFF',
        //   fillOpacity: 0.4,
        //   // fillOpacity: 0.3,
        //   editable:false,
        //   visible:true,
        // })
        // var text1 = new AMap.Text({
        //   // position: [element.properties.CENTERX,element.properties.CENTERY],
        //   position: getCenter(OneGJ02.features[0].geometry.coordinates[0][0]),
        //   anchor: 'bottom-center',
        //   text: OneGJ02.features[0].properties.NAME,
        //   style:{
        //     'font-size': '16px',
        //     'font-weight': 'bold',
        //     'text-align': 'center',
        //     'color': '#00AEFF',
        //     'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
        //     'white-space': 'nowrap',
        //   },
        // });
        // var geojson2 = new AMap.Polygon({
        //   path:TwoGJ02.features[0].geometry.coordinates[0][0],
        //   strokeColor: '#00C5EC', 
        //   fillColor: '#00AEFF',
        //   fillOpacity: 0.4,
        //   // fillOpacity: 0.3,
        //   editable:false,
        //   visible:true,
        // })
        // var text2 = new AMap.Text({
        //   // position: [element.properties.CENTERX,element.properties.CENTERY],
        //   position: getCenter(TwoGJ02.features[0].geometry.coordinates[0][0]),
        //   anchor: 'bottom-center',
        //   text: TwoGJ02.features[0].properties.NAME,
        //   style:{
        //     'font-size': '16px',
        //     'font-weight': 'bold',
        //     'text-align': 'center',
        //     'color': '#00AEFF',
        //     'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
        //     'white-space': 'nowrap',
        //   },
        // });
        // var geojson3 = new AMap.Polygon({
        //   path:ThreeGJ02.features[0].geometry.coordinates[0][0],
        //   strokeColor: '#00C5EC', 
        //   fillColor: '#00AEFF',
        //   fillOpacity: 0.4,
        //   // fillOpacity: 0.3,
        //   editable:false,
        //   visible:true,
        // })
        // var text3 = new AMap.Text({
        //   // position: [element.properties.CENTERX,element.properties.CENTERY],
        //   position: getCenter(ThreeGJ02.features[0].geometry.coordinates[0][0]),
        //   anchor: 'bottom-center',
        //   text: ThreeGJ02.features[0].properties.NAME,
        //   style:{
        //     'font-size': '16px',
        //     'font-weight': 'bold',
        //     'text-align': 'center',
        //     'color': '#00AEFF',
        //     'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
        //     'white-space': 'nowrap',
        //   },
        // });
        // var geojson4 = new AMap.Polygon({
        //   path:FourGJ02.features[0].geometry.coordinates[0][0],
        //   strokeColor: '#00C5EC', 
        //   fillColor: '#00AEFF',
        //   fillOpacity: 0.4,
        //   // fillOpacity: 0.3,
        //   editable:false,
        //   visible:true,
        // })

        // var text4 = new AMap.Text({
        //   // position: [element.properties.CENTERX,element.properties.CENTERY],
        //   position: getCenter(FourGJ02.features[0].geometry.coordinates[0][0]),
        //   anchor: 'bottom-center',
        //   text: FourGJ02.features[0].properties.NAME,
        //   style:{
        //     'font-size': '16px',
        //     'font-weight': 'bold',
        //     'text-align': 'center',
        //     'color': '#00AEFF',
        //     'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
        //     'white-space': 'nowrap',
        //   },
        // });
        // var geojson5 = new AMap.Polygon({
        //   path:kaifaqu.features[0].geometry.coordinates[0][0],
        //   strokeColor: '#00C5EC', 
        //   fillColor: '#00AEFF',
        //   fillOpacity: 0.4,
        //   // fillOpacity: 0.3,
        //   editable:false,
        //   visible:true,
        // })
        // var text5 = new AMap.Text({
        //   // position: [element.properties.CENTERX,element.properties.CENTERY],
        //   position: getCenter(kaifaqu.features[0].geometry.coordinates[0][0]),
        //   anchor: 'bottom-center',
        //   text: kaifaqu.features[0].properties.NAME,
        //   style:{
        //     'font-size': '16px',
        //     'font-weight': 'bold',
        //     'text-align': 'center',
        //     'color': '#00AEFF',
        //     'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
        //     'white-space': 'nowrap',
        //   },
        // });

        // var geojson6 = new AMap.Polygon({
        //   path:ruanjianyuan.features[0].geometry.coordinates[0][0],
        //   strokeColor: '#00C5EC', 
        //   fillColor: '#00AEFF',
        //   fillOpacity: 0.4,
        //   // fillOpacity: 0.3,
        //   editable:false,
        //   visible:true,
        // })
        // var text6 = new AMap.Text({
        //   // position: [element.properties.CENTERX,element.properties.CENTERY],
        //   position: getCenter(ruanjianyuan.features[0].geometry.coordinates[0][0]),
        //   anchor: 'bottom-center',
        //   text: ruanjianyuan.features[0].properties.NAME,
        //   style:{
        //     'font-size': '16px',
        //     'font-weight': 'bold',
        //     'text-align': 'center',
        //     'color': '#00AEFF',
        //     'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
        //     'white-space': 'nowrap',
        //   },
        // });

        levelQywg({level:1}).then(res=>{
          let W = [];
          res.data.forEach(element=>{
            let shapeStr = JSON.parse(element.shapeStr);
            // console.log(shapeStr,"shapeStr");
            W.push(shapeStr.features[0]);
            let geojson =  new AMap.Polygon({
              path:shapeStr.features[0].geometry.coordinates[0],
              strokeColor: '#00C5EC', 
              fillColor: '#00AEFF',
              fillOpacity: 0.4,
              // fillOpacity: 0.3,
              editable:false,
              visible:true,
              extData:{
                name: shapeStr.features[0].properties.NAME
              },
            })
            var text = new AMap.Text({
              // position: [element.properties.CENTERX,element.properties.CENTERY],
              position: getCenter(shapeStr.features[0].geometry.coordinates[0]),
              anchor: 'bottom-center',
              text: shapeStr.features[0].properties.NAME,
              style:{
                'font-size': '16px',
                'font-weight': 'bold',
                'text-align': 'center',
                'color': '#00AEFF',
                'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
                'white-space': 'nowrap',
              },
            });
            element.myPolygon = geojson;
            element.text = text;
            this.layers.layer.addOverlay(geojson);
            this.layers.text.addOverlay(text);
          })
          this.wanggeData = res.data;
        })



        
        // this.layers.layer.addOverlay(geojson1);
        // this.layers.text.addOverlay(text1);
        // this.layers.layer.addOverlay(geojson2);
        // this.layers.text.addOverlay(text2);
        // this.layers.layer.addOverlay(geojson3);
        // this.layers.text.addOverlay(text3);
        // this.layers.layer.addOverlay(geojson4);
        // this.layers.text.addOverlay(text4);
        // this.layers.layer.addOverlay(geojson5);
        // this.layers.text.addOverlay(text5);
        // this.layers.layer.addOverlay(geojson6);
        // this.layers.text.addOverlay(text6);
        this.map.add(this.layers.layer);
        this.map.add(this.layers.text);
        map.setFitView();
        // 获取二级网格数据
        // this.getWanggeGeoJson();
        // 获取围栏数据
        this.getWeilanGeoJson();
        // 获取重点区域数据
        this.getQuyuGeoJson();
        // 获取重点路段数据
        this.getLuduanGeoJson();

        // 修改图层组的层级在点击到围栏，区域，路段时监听网格时就能触发点击事件
        // this.layers.layer2.setOptions({ zIndex: 100 });
        // this.layers.layer3.setOptions({ zIndex: 99 });
        this.layers.layer.on('click', (e)=>{
          // console.log(e,'this.layers.layer2的点击事件');
          if(this.isPositioning) {
            // console.log(e,'eeeeeeee');
            const icon = new AMap.Icon({
              size: new AMap.Size(25, 34), //图标尺寸
              image: require('../../../assets/images/icon/icon2.png'), //Icon 的图像
              imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
              imageSize: new AMap.Size(135, 40), //根据所设置的大小拉伸或压缩图片
            });
            var marker = new AMap.Marker({
              position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
              anchor: 'bottom-center',
              icon: icon
            })
            this.layers.layer4.addOverlay(marker);
            map.add(this.layers.layer4)
            let addressName
            var lng = e.lnglat.lng + '';
            var lat = e.lnglat.lat + '';
            // let clickPoint = this.layers.layer2.getOverlays();
            // for (var i = 0; i < clickPoint.length; i++) {
            //   console.log(clickPoint[i],'点击的地址');
            // }
            axios.get('https://restapi.amap.com/v3/geocode/regeo',{
              params:{
                key: "5f4a2c045cffa20551a0300c31c1ee78",
                location: `${lng.substring(0,9)},${lat.substring(0,9)}`,
                extensions: 'all',
                // batch: true,
              }
            }).then(response=>{
              // console.log(response,'response');
              addressName = response.data.regeocode.aois[0]?.name || response.data.regeocode.pois[0]?.name;
              // console.log(addressName,'this.addressName');
              if(this.layers.layer4) {
                // e.target.getExtData().name;     e.target.getExtData()获取给图层设置的extData属性的name
                this.$refs.newEvent.open({lnglat:e.lnglat,address:addressName,meshOccurs:e.target.getExtData().name,marker:marker});
                this.isPositioning = false;
              }
            })
          }
        })

        if(this.layers.layer3) {
          this.layers.layer3.hide();
        }
        if(this.layers.text1){
          this.layers.text1.hide();
        }
        // 获取点位
        this.getMarkers(1);
        // if(this.layers.layer2) {
        //   this.layers.layer2.hide();
        // }
        // zoomchange ： 地图缩放级别更改后触发。  zoomstart ： 缩放开始时触发。  zoomend ： 缩放停止时触发。
        map.on("zoomend", (ev) => {
          let zoom = map.getZoom();
          console.log(zoom,'zoom层级');

          if(zoom < 11) {
            this.componentMarker.visible = false;
            this.personInfo.visible = false;
            this.eventInfo.visible = false;
            this.carInfo.visible = false;
            this.monitoringInfo.visible = false;
            this.shopInfo.visible = false;
          } else {
            this.componentMarker.visible = true;
            if(zoom < 13.2) {
              this.layers.layer.show();
              this.layers.text.show();
              if(zoom < 12) {
                this.unlightedPolygonId()
              }
              if(this.layers.layer3) {
                this.layers.layer3.hide();
                this.isPositioning = false;
              }
            } else if(zoom > 13.2){
              this.layers.layer.hide();
              this.layers.text.hide();
              this.layers.text1.show();
              this.layers.layer3.show();
              if(zoom > 14) {
                this.layers.text1.show();
                this.layers.layer3.show();
              } else {
                if(this.highlightedPolygonId !== 1) {
                  this.unlightedPolygonId()
                }
              }
            }
          }
        });
      });
    },

    // 人员非聚合自定义样式及点击事件
    _personRenderMarker(context){
      let imgSrc
      if(this.onIcon && this.offIcon){
        imgSrc = context.data[0].imgSrc == '1' ? this.onIcon : this.offIcon
      } else {
        imgSrc = context.data[0].imgSrc == '1' ? require("../../../assets/images/icon/icon1.png") : require("../../../assets/images/icon/offLine1.png")
      }
      var content = `<div class="markerStyles"><div class="marker-Text" style="width:${context.data[0].text.length * 15}px">${context.data[0].text}</div><img src="${imgSrc}" alt=""></div>`;
      var offset = new AMap.Pixel(-30.5, -48.5);
      context.marker.setContent(content);
      context.marker.setOffset(offset);
      context.marker.on('click',(ev)=>{
        // 根据imei获取人员信息
        getUserByImei({imei:context.data[0].info.imei}).then(res=>{
          if(res.code == 200) {
            this.personInfo.position = context.data[0].position;
            this.personInfo.info = context.data[0].info;
            this.personInfo.personinfo = res.data[0];
            this.personInfo.visible = true;
          }
        })
      })
    },
    // 事件的非聚合自定义样式及点击事件
    _eventMarker (context) {
      // console.log(context,"context");
      var content = `<div class="markerStyles"><img src="${context.data[0].info.status == '已处理' ? require("../../../assets/images/icon/offLine2.png") : require("../../../assets/images/icon/icon2.png")}" alt=""></div>`;
      var offset = new AMap.Pixel(-13, -16);
      context.marker.setContent(content)
      context.marker.setOffset(offset)
      context.marker.on('click',(ev)=>{
        this.eventInfo.position = context.data[0].position;
        this.eventInfo.info = context.data[0].info;
        this.eventInfo.visible = true;
      })
    },
    // 车辆非聚合自定义样式及点击事件
    _carMarker(context){
      var content = `<div class="markerStyles"><img src="${require("../../../assets/images/icon/icon4.png")}" alt=""></div>`;
      var offset = new AMap.Pixel(-13, -16);
      context.marker.setContent(content)
      context.marker.setOffset(offset)
      context.marker.on('click',(ev)=>{
        this.carInfo.position = context.data[0].position;
        this.carInfo.info = context.data[0].info;
        this.carInfo.visible = true;
      })
    },
    // 视频非聚合自定义样式及点击事件
    _renderMarker (context) {
      var content = `<div class="markerStyles"><img src="${context.data[0].info.status == 1 ? require("../../../assets/images/icon/icon5.png") : require("../../../assets/images/icon/offLine4.png")}" alt=""></div>`;
      var offset = new AMap.Pixel(-13.5, -15);
      context.marker.setContent(content)
      context.marker.setOffset(offset)
      context.marker.on('click',(ev)=>{
        this.monitoringInfo.position = context.data[0].position;
        this.monitoringInfo.info = context.data[0].info;
        this.monitoringInfo.visible = true;
      })
    },
    // 店铺非聚合自定义样式及点击事件
    _DrenderMarker(context) {
      // <div class="marker-Text" style="width:${context.data[0].info.shopName.length * 15}px">${context.data[0].info.shopName}</div>
      var content = `<div class="markerStyles"><img src="${require("../../../assets/images/icon/icon6.png")}" alt=""></div>`;
      var offset = new AMap.Pixel(-13.5, -15);
      context.marker.setContent(content)
      context.marker.setOffset(offset);
      context.marker.on('click',(ev)=>{
        this.shopInfo.position = context.data[0].position;
        this.shopInfo.info = context.data[0].info;
        this.shopInfo.visible = true;
      })
    },
    

    // 各个点位获取
    getMarkers(id,status){
      if (this.cluster) {
        this.cluster.setMap(null);
      }
      let ico1 = require("../../../assets/images/icon/icon1.png");
      let ico2 = require("../../../assets/images/icon/icon2.png");
      let ico3 = require("../../../assets/images/icon/icon3.png");
      let ico4 = require("../../../assets/images/icon/icon4.png");
      let ico5 = require("../../../assets/images/icon/icon5.png");
      let ico6 = require("../../../assets/images/icon/icon6.png");
      let offIcon1 = require("../../../assets/images/icon/offLine1.png");
      let offIcon2 = require("../../../assets/images/icon/offLine2.png");
      let offIcon3 = require("../../../assets/images/icon/offLine3.png");
      let offIcon4 = require("../../../assets/images/icon/offLine4.png");
      let imgUrl =  require("../../../assets/images/icon/green.png")
      var sts = [{
        url: imgUrl,
        size: new AMap.Size(32, 32),
        offset: new AMap.Pixel(-16, -16),
        textColor:"#FFFFFF",
        textSize:14
      }, {
        url: imgUrl,
        size: new AMap.Size(32, 32),
        offset: new AMap.Pixel(-16, -16),
        textColor:"#FFFFFF",
        textSize:14
      }, {
        url: imgUrl,
        size: new AMap.Size(32, 32),
        offset: new AMap.Pixel(-18, -18),
        textColor:"#FFFFFF",
        textSize:14
      }];
      this.markers = [];
      this.mapLoading = status ? false : true;
      if(id == 1) {
        this.personLine = [];
        let videoPoint = [];
        // 获取人员信息
        getDeviceList().then((res) => {
          this.mapLoading = false;
          // console.log(res,'点位信息');
          if (res.data.obj) {
            res.data.obj.forEach((element) => {
              if (element.status == "0" || element.status == "1") { 
                this.personLine.push(element);
                let obj = {position:[]};
                obj.position[0] = element.longitude;
                obj.position[1] = element.latitude;
                obj.text = element.userName;
                obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
                // obj.imgSrc = element.status == "0" ? offIcon1 : element.status == "1"? ico1 : ico1;
                obj.imgSrc = element.status;
                obj.userId = element.userId;
                obj.info = element;
                // this.markers.push(obj)
                videoPoint.push(obj)
              }
            })
            this.count = videoPoint.length;
            AMap.plugin(['AMap.MarkerCluster'],()=>{
              this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
                gridSize: 60, // 设置网格像素大小
                styles: sts,
                maxZoom: 15,
                // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
                renderMarker: this._personRenderMarker, // 自定义非聚合点样式
              })
            })
          } else {
            this.$modal.msgError("执法人员" + res.data.msg);
          }
        }).catch(err=>{
          this.mapLoading = false;
        })
      } else if(id == 2) {
        // point.features.forEach((element)=>{
        //   if (element.properties.name == "普通事件") {
        //     let obj = {position:[]};
        //     obj.position[0] = element.geometry.coordinates[0];
        //     obj.position[1] = element.geometry.coordinates[1];
        //     obj.imgSrc = element.properties.status == "0"? offIcon2 : ico2;
        //     this.markers.push(obj)
        //     this.mapLoading = false;
        //   }
        // })
        let data = {'queryValue' : [], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
        ViewListPage({viewCode:'event-all-list', pageNo: 1, pageSize:500}, data).then(res=>{
          this.mapLoading = false;
          if(res.code == 200) {
            let videoPoint = [];
            res.result.records.forEach((element)=>{
              let obj = {position:[]};
              let location = element.location?.split(',');
           
              // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
              if(location) {
                obj.position[0] = location[0];
                obj.position[1] = location[1];
                obj.lnglat = new AMap.LngLat(location.length > 0 ? location[0] : 0 ,location.length > 0 ? location[1] : 0)
              } else {
                obj.position[0] = 0;
                obj.position[1] = 0;
              }

              obj.imgSrc = ico2;
              obj.info = element
              // this.markers.push(obj)
              videoPoint.push(obj)
            })
            this.count = videoPoint.length;
            AMap.plugin(['AMap.MarkerCluster'],()=>{
              this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
                gridSize: 60, // 设置网格像素大小
                maxZoom: 17,
                styles: sts,
                // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
                renderMarker: this._eventMarker, // 自定义非聚合点样式
              })
            })
          }
        })
      } else if(id == 3){
        // point.features.forEach((element)=>{
        //   if (element.properties.name == "执法车辆") {
        //     let obj = {position:[]};
        //     obj.position[0] = element.geometry.coordinates[0];
        //     obj.position[1] = element.geometry.coordinates[1];
        //     obj.imgSrc = element.properties.status == "0"? offIcon3 : ico4;
        //     obj.text = element.properties.name;
        //     this.markers.push(obj)
        //     this.mapLoading = false;
        //   }
        // })
        getCarManageList({pageNum: 1,pageSize: 1000}).then(res=>{
          // console.log('车辆',res);
          this.carLine = res.rows
          let videoPoint = [];
          this.mapLoading = false;
          res.rows.forEach((element)=>{
          // console.log(element);
            let obj = {position:[]};
            obj.position[0] = element.longitude;
            obj.position[1] = element.latitude;
            // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
            obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
            obj.imgSrc = ico4;
            obj.info = element;
            // this.markers.push(obj)
            videoPoint.push(obj)
          })
          this.count = videoPoint.length;
          
          AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{
              
            this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
              gridSize: 60, // 设置网格像素大小
              styles: sts,
              maxZoom: 15,
              // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
              renderMarker: this._carMarker, // 自定义非聚合点样式
            })
          })
            // res.rows.forEach(element => {
            //   let obj = {position:[]};
            //   obj.position[0] = element.longitude;
            //   obj.position[1] = element.latitude;
            //   obj.imgSrc = ico6;
            //   obj.info = element;
            //   this.markers.push(obj)
            //   this.mapLoading = false;
            // })
          }).catch(err=>{
            this.mapLoading = false;
          })
      } else if(id == 4){
        getVideoPageEq({pageNo:1,pageSize:1000}).then(res=>{
          this.mapLoading = false;
          // console.log(res,"res");
          let videoPoint = [];
          res.data.forEach((element)=>{
            let obj = {position:[]};
            obj.position[0] = element.longitude;
            obj.position[1] = element.latitude;
            // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
            obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
            obj.imgSrc = ico5;
            obj.info = element
            // this.markers.push(obj)
            videoPoint.push(obj)
          })
          this.count = videoPoint.length;
          AMap.plugin(['AMap.MarkerCluster'],()=>{
            this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
              gridSize: 60, // 设置网格像素大小
              maxZoom: 15,
              styles: sts,
              // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
              renderMarker: this._renderMarker, // 自定义非聚合点样式
            })
          })
        }).catch(err=>{
          this.$modal.msgError(err);
          this.mapLoading = false;
        })
      } else if(id == 5){
        // point.features.forEach((element)=>{
        //   if (element.properties.name == "沿街商铺分布") {
        //     let obj = {position:[]};
        //     obj.position[0] = element.geometry.coordinates[0];
        //     obj.position[1] = element.geometry.coordinates[1];
        //     obj.imgSrc = ico6;
        //     this.markers.push(obj)
        //     this.mapLoading = false;
        //   }
        // })
        getStreetShopList({pageSize:500,pageNum:1}).then(res=>{
          let videoPoint = [];
          this.mapLoading = false;
          res.rows.forEach((element)=>{
            let obj = {position:[]};
            obj.position[0] = element.longitude;
            obj.position[1] = element.latitude;
            // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
            obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
            obj.imgSrc = ico6;
            obj.info = element;
            // this.markers.push(obj)
            videoPoint.push(obj)
          })
          this.count = videoPoint.length;
          
          AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{
              
            this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
              gridSize: 60, // 设置网格像素大小
              styles: sts,
              maxZoom: 15,
              // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
              renderMarker: this._DrenderMarker, // 自定义非聚合点样式
            })
          })
          // res.rows.forEach(element => {
          //   let obj = {position:[]};
          //   obj.position[0] = element.longitude;
          //   obj.position[1] = element.latitude;
          //   obj.imgSrc = ico6;
          //   obj.info = element;
          //   this.markers.push(obj)
          //   this.mapLoading = false;
          // })
        }).catch(err=>{
          this.mapLoading = false;
        })
      }
    },
    // 点位点击事件
    clickMarker(marker,e){
      console.log(marker);
      if (this.actionMap == 1) {
        this.personInfo.position = marker.position;
        this.personInfo.info = marker.info;
        this.personInfo.visible = true;
      } else if (this.actionMap == 2) {
        this.eventInfo.position = marker.position;
        this.eventInfo.visible = true;
      } else if (this.actionMap == 3) {
        this.carInfo.position = marker.position;
        this.carInfo.visible = true;
      } else if (this.actionMap == 4) {
        this.monitoringInfo.position = marker.position;
        this.monitoringInfo.info = marker.info;
        this.monitoringInfo.visible = true;
      } else if (this.actionMap == 5) {
        this.shopInfo.position = marker.position;
        this.shopInfo.info = marker.info;
        console.log(marker.info);
        this.shopInfo.visible = true;
      }
    },
    // 点位关闭事件
    markersClosePopup(){
      if (this.actionMap == 1) {
        this.personInfo.visible = false;
      } else if(this.actionMap == 2) {
        this.eventInfo.visible = false;
      } else if(this.actionMap == 3) {
        this.carInfo.visible = false;
      } else if(this.actionMap == 4) {
        this.monitoringInfo.visible = false;
      } else if(this,this.actionMap == 5) {
        this.shopInfo.visible = false;
      }
    },
    // 任务派发事件
    taskClick(){
      if(this.personInfo.info.status == "1") {
        this.$refs.personageTask.open(this.personInfo.info);
      } else {
        this.$modal.msgError("该设备已离线");
      }
    },
    // 播放监控视频
    initVideoPlayer(videoUrl){
      this.$nextTick(()=>{
        var videoDom = document.getElementById('flvvideo')

        var player = flvjs.createPlayer({
          type: 'flv', // 媒体类型，默认是 flv,
          isLive: true, // 是否是直播流
          hasAudio: true, // 是否有音频
          hanVideo: true, // 是否有视频
          url: videoUrl, // 流地址
        },{
          // 其他的配置项可以根据项目实际情况参考 api 去配置
          autoCleanupMinBackwardDuration: true, // 清除缓存 对 SourceBuffer 进行自动清理
        })
        player.attachMediaElement(videoDom)
        player.load()
        player.play()
        this.player = player;
        // 视频卡顿导致流断了，那就重连
        // this.player.on(flvjs.Events.ERROR,(errType, errDetail)=>{
        //   // console.log(errType,'errTypeerrTypeerrType');
        //   // console.log(errDetail,'errDetailerrDetailerrDetailerrDetail');
        //   if(this.player){
        //     this.destroyVideos()
        //     this.initVideoPlayer(videoUrl)
        //   }
        // })
        this.instantaneity(this.player,videoUrl)
      })
    },
    destroyVideos() {
      if (!this.player) return;
      this.player.pause();
      this.player.unload();
      this.player.detachMediaElement();
      this.player.destroy();
      this.player = null;
    },
    // 可能会有卡顿的情况 重新去拉流由于视频会延时 为保证实时性，我们可以跳帧
    instantaneity(player,videoUrl){
      this.timer = setInterval(() => {
        if (player && player.buffered && player.buffered.length) {
          let end = player.buffered.end(0);     // 获取当前buffered值
          let diff = end - player.currentTime;  // 获取buffered与currentTime的差值
          if (diff >= 3) {// 如果差值大于等于3s 手动跳帧 这里可根据自身需求来定
            //单个视频
            player.currentTime = end;//手动跳帧
            player.currentTime = player.buffered.end(0);//手动跳帧

            // 多个视频
            clearInterval(this.timer)
            // player.pause();
            // player.unload();
            // player.detachMediaElement();
            // player.destroy();
            // player= null;
            //重新加载当前停止的视频流，根据个人的方法来配置
            this.initVideoPlayer(videoUrl)
          }
        }
      }, 2000); //2000毫秒执行一次
    },
    // 执法人员强制观摩
    watchClick(){
      if(this.personInfo.info.status == "1") {
        this.showVideo = true;
        videoSurveillance({...this.videoCondition,destID:this.personInfo.info.userId,imei:this.personInfo.info.imei}).then(res=>{
          if(res.code == 200 && res.data.msg == '操作成功') {
          // http://121.229.2.163:9291/live/9999   http://120.27.25.166:9305/live/9999_
            setTimeout(()=>{
              this.initVideoPlayer(`https://t-jn-bjh-admin-server.jsszkd.com/jn/live/9999_${this.personInfo.info.userId}.flv`)
            },3000)
          }
        })
      } else {
        this.$modal.msgError("该人员已离线");
      }
    },
    // 强制观摩关闭事件
    videoClose(){
      this.showVideo = false;
      if(!this.player) return
      this.player.pause()
      this.player.unload()
      this.player.detachMediaElement()
      this.player.destroy()
      this.player = null
      if(this.timer) clearInterval(this.timer)
    },
    // 位置分享
    shareClick(){
      console.log(this.personInfo,"位置分享");
      if(this.personInfo.info.status == "1") {
        var aux = document.createElement("input"); 
        aux.setAttribute("value", this.personInfo.info.address); 
        document.body.appendChild(aux); 
        aux.select();
        document.execCommand("copy"); 
        document.body.removeChild(aux);
        this.$modal.msgSuccess("位置已复制");
      } else {
        this.$modal.msgError("该人员已离线");
      }
    },
    // 事件指派
    eventBtn(){
      this.$refs.crewAssign.open(this.eventInfo.info);
    },
    // 监控视频上墙
    monitorVideos(status){
      // this.$refs.videoWall.open();
      if(status == 1) {
        getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{
          if(res.code == 200) {
            // console.log(res,'视频地址获取');
            this.$refs.aloneVideo.open(res.msg);
          }
        })
      } else {
        this.$modal.msgError("该设备已离线");
      }
    },
    // 转发，复制视频地址
    copyUrl(){
      getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{
        if(res.code == 200) {
          // this.$refs.aloneVideo.open(res.msg);
          var aux = document.createElement("input"); 
          aux.setAttribute("value", res.msg); 
          document.body.appendChild(aux); 
          aux.select();
          document.execCommand("copy"); 
          document.body.removeChild(aux);
          this.$modal.msgSuccess("视频地址已复制");
        }
      }).catch(error=>{
        this.$modal.msgError(error);
      })
    },
    // 商铺详情查看
    getShopInfo(){
      this.$refs.shop.open(this.shopInfo.info);
    },


    // 二级网格获取
    getWanggeGeoJson(){
      
      bgridsetting({pageNum:1,pageSize:100,level:1}).then(res=>{
        let W = []
        res.rows.forEach((element)=>{
          let shapeStr = JSON.parse(element.shapeStr)
          W.push(shapeStr)
          var wangge = new AMap.Polygon({
            path:shapeStr.geometry.coordinates[0],
            strokeColor: '#FFBF7A',
            fillColor: '#DC8419',
            strokeOpacity: 1,
            fillOpacity: 0.3,
            editable:false,
            visible:true,
            extData:{
              name: shapeStr.properties.NAME
            },
          })
          var text = new AMap.Text({
            // position: [element.properties.CENTERX,element.properties.CENTERY],
            position: getCenter(shapeStr.geometry.coordinates[0][0]),
            anchor: 'bottom-center',
            text: shapeStr.properties.NAME,
            style:{
              'font-size': '16px',
              'font-weight': 'bold',
              'text-align': 'center',
              'color': '#FBFF00',
              'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
              'white-space': 'nowrap',
            },
          });
          shapeStr.myPolygon = wangge;
          shapeStr.text = text;
          this.layers.layer2.addOverlay(wangge);
          this.layers.text1.addOverlay(text);
          this.map.add(this.layers.layer2);
          this.map.add(this.layers.text1);
        })
        this.wanggeData = W;
      })
      // console.log(this.layers.layer,'this.layers.layer');
      // this.map.add(this.layers.layer);
    },
    // 围栏网格获取
    getWeilanGeoJson(){
      fence({ pageNum: 1, pageSize: 100 }).then((res) => {
        // console.log(res,"围栏数据");
        this.weilanData = res.rows;
        this.weilanData.forEach((element,index) => {
          let shapeStr = JSON.parse(element.shapeStr);
          // 圆形围栏
          if (shapeStr.features[0].geometry.type == "Point") {
            var circle = new AMap.Circle({
              center: shapeStr.features[0].geometry.coordinates,
              radius: shapeStr.features[0].properties.radius,
              bubble: true,
              extData:{
                id: '围栏polygon',
                name: shapeStr.features[0].properties.NAME
              },
              strokeOpacity: 0.9,
              strokeColor: "#62E1FA",
              fillColor: "#62E1FA",
              fillOpacity: 0.3,
              editable:false,
              visible:true,
            })
            var text = new AMap.Text({
              position: shapeStr.features[0].geometry.coordinates,
              anchor: 'bottom-center',
              offset: [0, 12],
              text: element.name,
              extData:{
                id: '围栏text',
              },
              style: {
                'font-size': '14px',
                'text-align': 'center',
                'color': '#62E1FA',
                'line-height': '24px',
                'letter-spacing': '2px',
                'white-space': 'nowrap',
              },
            });
            this.layers.layer3.addOverlay(circle)
            this.layers.layer3.addOverlay(text)
            this.layers.layer3.hide();
            this.map.add(this.layers.layer3);
            element.myPolygon = circle;
            element.text = text;
            this.openClick(circle)
            // this.map.add(text);
            // 多边形围栏
          } else if (shapeStr.features[0].geometry.type == "Polygon") {
            var weilan = new AMap.Polygon({
              path:shapeStr.features[0].geometry.coordinates,
              bubble: true,
              extData:{
                id: '围栏polygon',
                name: shapeStr.features[0].properties.NAME
              },
              strokeOpacity: 0.9,
              strokeColor: "#62E1FA",
              fillColor: "#62E1FA",
              fillOpacity: 0.3,
              editable:false,
              visible:true,
            })
            // 获取多边形的中心点
            var currentCenter = getCenter(shapeStr.features[0].geometry.coordinates[0]);
            var text = new AMap.Text({
              position: currentCenter,
              anchor: 'bottom-center',
              offset: [0, 12],
              text: element.name,
              extData:{
                id: '围栏text' ,
              },
              style: {
                'font-size': '14px',
                'text-align': 'center',
                'color': '#62E1FA',
                'line-height': '24px',
                'letter-spacing': '2px',
                'white-space': 'nowrap',
              },
            });
            this.layers.layer3.addOverlay(weilan)
            this.layers.layer3.addOverlay(text)
            this.layers.layer3.hide();
            this.map.add(this.layers.layer3);
            element.myPolygon = weilan;
            element.text = text;
            this.openClick(weilan)
            // this.map.add([wangge,text]);
            // this.map.add(text);
          }
        })
      })
    },
    // 重点区域获取
    getQuyuGeoJson(){
      regionalsettings({ pageNum: 1, pageSize: 100 }).then((res) => {
        this.quyuData = res.rows;
        this.quyuData.forEach((element,index) => {
          let shapeStr = JSON.parse(element.shapeStr);
          var quyu = new AMap.Polygon({
            path:shapeStr.features[0].geometry.coordinates,
            bubble: true,
            strokeOpacity: 0,
            strokeColor: '#FF0000',
            fillColor: '#FF0000',
            fillOpacity:0.38,
            editable:false,
            visible:true,
            extData:{
              id: '区域polygon',
              name: element.name
            },
          })
          var text = new AMap.Text({
            position: shapeStr.features[1].geometry.coordinates,
            anchor: 'bottom-center',
            text: element.name,
            extData:{
              id: '区域text'
            },
            style:{
              'font-size': '16px',
              'font-weight': 'bold',
              'text-align': 'center',
              'color': '#F44444',
              'white-space': 'nowrap',
            },
          });
          element.myPolygon = quyu;
          element.text = text;
          this.layers.layer3.addOverlay(quyu)
          this.layers.layer3.addOverlay(text)
          this.layers.layer3.hide();
          this.map.add(this.layers.layer3);
          this.openClick(quyu)
          // this.map.add([quyu,text]);
          // this.map.add(text);
        })
      })
    },
    // 重点路段获取
    getLuduanGeoJson(){
      roadsetting({ pageNum: 1, pageSize: 100 }).then((res) => {
        this.luduanData = res.rows;
        // console.log(res,'resresres');
        this.luduanData.forEach((element) => {
          let shapeStr = JSON.parse(element.shapeStr);
          // console.log(shapeStr,'shapeStrshapeStrshapeStr');
          var luduan = new AMap.Polyline({
            path:shapeStr.features[0].geometry.coordinates,
            bubble: true,
            strokeOpacity: 1,
            strokeColor: '#46FF77',
            editable:false,
            visible:true,
          })
          var text = new AMap.Text({
            position: shapeStr.features[1].geometry.coordinates,
            anchor: 'bottom-center',
            text: element.name,
            style:{
              'font-size': '16px',
              'font-weight': 'bold',
              'text-align': 'center',
              'color': '#46FF77',
              'white-space': 'nowrap',
            },
          });
          this.layers.layer3.addOverlay(luduan)
          this.layers.layer3.addOverlay(text)
          this.layers.layer3.hide();
          this.map.add(this.layers.layer3);
          element.myPolyline = luduan;
          element.text = text;
          this.openClick(luduan)
          // this.map.add([luduan,text]);
          // this.map.add(text);
        })
      })
    },
    // 今日明日获取
    getCurrentTime(id) {
      const currentDate = new Date();
      if(id){
        currentDate.setDate(currentDate.getDate() + 1);
      }
      const year = currentDate.getFullYear();
      const month = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
      const day = currentDate.getDate();

      return year + "-" +month + "-" + day;
    },
    // 开启围栏，路段，区域的点击事件
    openClick(layer){
      layer.on('click',(e)=>{
        // console.log(e,'区域的点击事件');
        // console.log(this.map.getAllOverlays('circle','polyline','polygon'),'this.layers.layer2');
        if(this.isPositioning) {
          let latlng = e.lnglat
          let name;
          this.layers.layer3.eachOverlay((item)=>{
            // console.log(item,'item');
            if(item.getBounds().contains(latlng)){
              name = item.getExtData().name
            }
          })
          // console.log(name,"点击的网格名称");
          // 拿到点击的网格⌈ 围栏 ⌋名称
          const icon = new AMap.Icon({
            size: new AMap.Size(26, 26), //图标尺寸
            image: require('../../../assets/images/icon/icon2.png'), //Icon 的图像
            imageOffset: new AMap.Pixel(0, 0), //图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new AMap.Size(26, 26) //根据所设置的大小拉伸或压缩图片
          });
          var marker = new AMap.Marker({
            position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
            anchor: 'bottom-center',
            icon: icon
          })
          this.layers.layer4.addOverlay(marker);
          this.map.add(this.layers.layer4)
          let addressName
          var lng = e.lnglat.lng + '';
          var lat = e.lnglat.lat + '';
          // let clickPoint = this.layers.layer2.getOverlays();
          // for (var i = 0; i < clickPoint.length; i++) {
          //   console.log(clickPoint[i],'点击的地址');
          // }
          axios.get('https://restapi.amap.com/v3/geocode/regeo',{
            params:{
              key: "5f4a2c045cffa20551a0300c31c1ee78",
              location: `${lng.substring(0,9)},${lat.substring(0,9)}`,
              extensions: 'all',
              // batch: true,
            }
          }).then(response=>{
            // console.log(response,'response');
            addressName = response.data.regeocode.aois[0]?.name || response.data.regeocode.pois[0]?.name;
            // console.log(addressName,'this.addressName');
            if(this.layers.layer4) {
              // e.target.getExtData().name;     e.target.getExtData()获取给图层设置的extData属性的name
              this.$refs.newEvent.open({lnglat:latlng,address:addressName,meshOccurs:name,marker:marker});
              this.isPositioning = false;
            }
          })
        }
      })
    },
    // 子组件的实时定位事件
    realTimeLocationClick(item,id){
      if(id == 1 && this.actionMap == 1) {
        this.personLine.forEach(per=>{
          if(item.imei == per.imei) {
            this.map.setZoomAndCenter(16,[per.longitude,per.latitude]);
          }
        })
      } else if(id == 3 && this.actionMap == 3){
        // console.log("进来了");
        // console.log(this.carInfo);
        this.carLine.forEach(car=>{
          if(item.id == car.id) {
            this.map.setZoomAndCenter(16,[car.longitude,car.latitude]);
          }
        })
      }
    },
    // 执法人员/执法车辆 行程轨迹
    travelPath(){
      if(this.actionMap == 1) {
        this.$refs.personageTrack.open("person", this.personInfo.info);
      } else if(this.actionMap == 3) {
        this.$refs.personageTrack.open("car", this.car.info);
      }
    },
    // 子组件的名称点击事件
    divClick(lightedPolygonId){
      if(this.action == 1) {
        // 取消重点区域高亮
        this.quyuData.forEach((element) => {
          element.myPolygon?.setOptions({
            strokeOpacity: 0,
            strokeColor: '#FF0000',
            fillColor: '#FF0000',
            fillOpacity:0.38,
            editable:false,
            visible:true,
          });
          element.text?.setStyle({
            'color': '#F44444',
          });
        })
        // 取消重点路段高亮
        this.luduanData.forEach((element) => {
          element.myPolyline?.setOptions({
            strokeOpacity: 1,
            strokeColor: '#46FF77',
            editable:false,
            visible:true,
          });
          element.text?.setStyle({
            'color': '#46FF77',
          });
        })
        // 取消考勤围栏高亮
        this.weilanData.forEach((element) => {
          element.myPolygon?.setOptions({
            strokeOpacity: 0.9,
            strokeColor: "#62E1FA",
            fillColor: "#62E1FA",
            fillOpacity: 0.3,
            editable:false,
            visible:true,
          });
          element.text?.setStyle({
            'color': '#62E1FA',
          });
        })
        // 取消区域网格高亮
        this.wanggeData.forEach((element)=>{
          element.myPolygon?.setOptions({
            strokeOpacity: 1,
            strokeColor: '#00C5EC', 
            fillColor: '#00AEFF',
            fillOpacity: 0.4,
            editable:false,
            visible:true,
          });
          
          element.text?.setStyle({
            'color': '#00AEFF',
            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
          });
        })
        this.isClickLingtedPolygonId = true;
        this.highlightedPolygonId = lightedPolygonId.id;
        if(lightedPolygonId.id == 1) {
          // 区域网格
          this.wanggeData.forEach((element)=>{
            // console.log(element,"element");
            // let shapeStr = JSON.parse(element.shapeStr);
            if(element.id === lightedPolygonId.item.id) {
              element.myPolygon.setOptions({
                strokeColor: '#46FF77',
                fillColor: '#46FF77',
                fillOpacity: 0.5,
                strokeOpacity: 0.8,
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#46FF77',
              });
              this.lightedPolygon = element.myPolygon;
              this.lightedText = element.text;
              this.map.setFitView(element.myPolygon);
            } else {
              element.myPolygon.setOptions({
                strokeColor: '#00C5EC', 
                fillColor: '#00AEFF',
                fillOpacity: 0.4,
                strokeOpacity: 1,
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#00AEFF',
                'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
              });
            }
          })
        } else if(lightedPolygonId.id == 2) {
          // 重点区域
          this.quyuData.forEach((element) => {
            if(element.id == lightedPolygonId.item.id) {
              element.myPolygon.setOptions({
                strokeColor: '#46FF77',
                fillColor: '#46FF77',
                fillOpacity: 0.5,
                strokeOpacity: 0.8,
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#FFDBB7',
              });
              this.lightedPolygon = element.myPolygon;
              this.lightedText = element.text;
              this.map.setFitView(element.myPolygon);
            } else {
              element.myPolygon.setOptions({
                strokeOpacity: 0,
                strokeColor: '#FF0000',
                fillColor: '#FF0000',
                fillOpacity:0.38,
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#F44444',
              });
            }
          })
        } else if(lightedPolygonId.id == 3) {
          // 重点路段
          this.luduanData.forEach((element) => {
            if(element.id == lightedPolygonId.item.id) {
              element.myPolyline.setOptions({
                strokeOpacity: 1,
                strokeColor: '#FF0000',
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#FF0000',
              });
              this.lightedPolygon = element.myPolyline;
              this.lightedText = element.text;
              this.map.setFitView(element.myPolyline);
            } else {
              element.myPolyline.setOptions({
                strokeOpacity: 1,
                strokeColor: '#46FF77',
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#46FF77',
              });
            }
          })
        } else if(lightedPolygonId.id == 4) {
          // 考勤围栏
          this.weilanData.forEach((element) => {
            if(element.id == lightedPolygonId.item) {
              element.myPolygon.setOptions({
                strokeColor: '#46FF77',
                fillColor: '#46FF77',
                fillOpacity: 0.5,
                strokeOpacity: 0.8,
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#46FF77',
              });
              this.lightedPolygon = element.myPolygon;
              this.lightedText = element.text;
              this.map.setFitView(element.myPolygon);
            } else {
              element.myPolygon.setOptions({
                strokeOpacity: 0.9,
                strokeColor: "#62E1FA",
                fillColor: "#62E1FA",
                fillOpacity: 0.3,
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#62E1FA',
              });
            }
  
          })
        }
      } else if(this.action == 2) {
        // console.log("取消高亮并且判断是卫星地图");
        // console.log(lightedPolygonId.item.id,"id");
        // 取消重点区域高亮
        this.quyuData.forEach((element) => {
          element.myPolygon?.setOptions({
            strokeOpacity: 0,
            strokeColor: '#FF0000',
            fillColor: '#FF0000',
            fillOpacity:0.6,
            editable:false,
            visible:true,
          });
          element.text?.setStyle({
            'color': '#E4ECFF',
          });
        })
        // 取消重点路段高亮
        this.luduanData.forEach((element) => {
          element.myPolyline?.setOptions({
            strokeOpacity: 1,
            strokeColor: '#46FF77',
            editable:false,
            visible:true,
          });
          element.text?.setStyle({
            'color': '#46FF77',
          });
        })
        // 取消考勤围栏高亮
        this.weilanData.forEach((element) => {
          element.myPolygon?.setOptions({
            strokeOpacity: 1,
            strokeColor: "#00B7FF",
            fillColor: "#001AFF",
            fillOpacity: 0.5,
            editable:false,
            visible:true,
          });
          element.text?.setStyle({
            'color': '#E4ECFF',
          });
        })
        // 取消区域网格高亮
        this.wanggeData.forEach((element)=>{
          element.myPolygon?.setOptions({
            strokeColor: '#0084FF', 
            fillColor: '#40AFFF',
            fillOpacity: 0.8,
            editable:false,
            visible:true,
          });
          element.text?.setStyle({
            'color': '#DFFAFF',
            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
          });
        })
        this.isClickLingtedPolygonId = true;
        this.highlightedPolygonId = lightedPolygonId.id;
        if(lightedPolygonId.id == 1) {
          // 区域网格
          this.wanggeData.forEach((element)=>{
            // console.log(element,"element");
            // let shapeStr = JSON.parse(element.shapeStr);
            if(element.id === lightedPolygonId.item.id) {
              element.myPolygon.setOptions({
                strokeColor: '#46FF77',
                fillColor: '#46FF77',
                fillOpacity: 0.5,
                strokeOpacity: 0.8,
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#46FF77',
              });
              this.lightedPolygon = element.myPolygon;
              this.lightedText = element.text;
              this.map.setFitView(element.myPolygon);
            } else {
              element.myPolygon.setOptions({
                strokeColor: '#0084FF', 
                fillColor: '#40AFFF',
                fillOpacity: 0.8,
                strokeOpacity: 1,
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#00AEFF',
                'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
              });
            }
          })
        } else if(lightedPolygonId.id == 2) {
          // 重点区域
          this.quyuData.forEach((element) => {
            if(element.id == lightedPolygonId.item.id) {
              element.myPolygon.setOptions({
                strokeColor: '#46FF77',
                fillColor: '#46FF77',
                fillOpacity: 0.5,
                strokeOpacity: 0.8,
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#FFDBB7',
              });
              this.lightedPolygon = element.myPolygon;
              this.lightedText = element.text;
              this.map.setFitView(element.myPolygon);
            } else {
              element.myPolygon.setOptions({
                strokeOpacity: 0,
                strokeColor: '#FF0000',
                fillColor: '#FF0000',
                fillOpacity:0.6,
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#E4ECFF',
              });
            }
          })
        } else if(lightedPolygonId.id == 3) {
          // 重点路段
          this.luduanData.forEach((element) => {
            if(element.id == lightedPolygonId.item.id) {
              element.myPolyline.setOptions({
                strokeOpacity: 1,
                strokeColor: '#FF0000',
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#FF0000',
              });
              this.lightedPolygon = element.myPolyline;
              this.lightedText = element.text;
              this.map.setFitView(element.myPolyline);
            } else {
              element.myPolyline.setOptions({
                strokeOpacity: 1,
                strokeColor: '#46FF77',
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#46FF77',
              });
            }
          })
        } else if(lightedPolygonId.id == 4) {
          // 考勤围栏
          this.weilanData.forEach((element) => {
            if(element.id == lightedPolygonId.item) {
              element.myPolygon.setOptions({
                strokeColor: '#46FF77',
                fillColor: '#46FF77',
                fillOpacity: 0.5,
                strokeOpacity: 0.8,
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#46FF77',
              });
              this.lightedPolygon = element.myPolygon;
              this.lightedText = element.text;
              this.map.setFitView(element.myPolygon);
            } else {
              element.myPolygon.setOptions({
                strokeOpacity: 1,
                strokeColor: "#00B7FF",
                fillColor: "#001AFF",
                fillOpacity: 0.5,
                editable:false,
                visible:true,
              });
              element.text.setStyle({
                'color': '#E4ECFF',
              });
            }
  
          })
        }
      }



    },
    // 地图等级变化时如果有高亮则取消高亮
    unlightedPolygonId(){
      // console.log(this.highlightedPolygonId,'this.highlightedPolygonId');
      if(this.isClickLingtedPolygonId) {
        this.isClickLingtedPolygonId = false;
        if(this.action == 1) {
          if(this.highlightedPolygonId == 1) {
            this.lightedPolygon.setOptions({
              strokeColor: '#00C5EC', 
              fillColor: '#00AEFF',
              fillOpacity: 0.4,
              strokeOpacity: 1,
              editable:false,
              visible:true,
            });
            this.lightedText.setStyle({
              'color': '#00AEFF',
              'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
            });
          } else if(this.highlightedPolygonId == 2) {
            // console.log("进入区域取消高亮");
            this.lightedPolygon.setOptions({
              strokeOpacity: 0,
              strokeColor: '#FF0000',
              fillColor: '#FF0000',
              fillOpacity:0.38,
              editable:false,
              visible:true,
            });
            this.lightedText.setStyle({
              'color': '#F44444',
            });
          } else if(this.highlightedPolygonId == 3) {
            this.lightedPolygon.setOptions({
              strokeOpacity: 1,
              strokeColor: '#46FF77',
              editable:false,
              visible:true,
            });
            this.lightedText.setStyle({
              'color': '#46FF77',
            });
          } else if(this.highlightedPolygonId == 4) {
            this.lightedPolygon.setOptions({
              strokeColor: '#62E1FA',
              fillColor: '#62E1FA',
              strokeOpacity: 0.9,
              fillOpacity: 0.3,
              editable:false,
              visible:true,
            });
            this.lightedText.setStyle({
              'color': '#62E1FA',
            });
          }
        } else if(this.action == 2) {
          if(this.highlightedPolygonId == 1) {
            this.lightedPolygon.setOptions({
              strokeColor: '#0084FF', 
              fillColor: '#40AFFF',
              fillOpacity: 0.8,
              editable:false,
              visible:true,
            });
            this.lightedText.setStyle({
              'color': '#DFFAFF',
              'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
            });
          } else if(this.highlightedPolygonId == 2) {
            // console.log("进入区域取消高亮");
            this.lightedPolygon.setOptions({
              strokeOpacity: 0,
              strokeColor: '#FF0000',
              fillColor: '#FF0000',
              fillOpacity:0.6,
              editable:false,
              visible:true,
            });
            this.lightedText.setStyle({
              'color': '#E4ECFF',
            });
          } else if(this.highlightedPolygonId == 3) {
            this.lightedPolygon.setOptions({
              strokeOpacity: 1,
              strokeColor: '#46FF77',
              editable:false,
              visible:true,
            });
            this.lightedText.setStyle({
              'color': '#46FF77',
            });
          } else if(this.highlightedPolygonId == 4) {
            this.lightedPolygon.setOptions({
              strokeOpacity: 1,
              strokeColor: "#00B7FF",
              fillColor: "#001AFF",
              fillOpacity: 0.5,
              editable:false,
              visible:true,
            });
            this.lightedText.setStyle({
              'color': '#E4ECFF',
            });
          }
        }
      }
    },

    // 电子底图/卫星底图切换事件
    actionBtn(id) {
      this.action = id;
      this.$emit("changeBackground",id)
      if(id == 1) {
        this.visible = false;
        // 修改一级网格背景
        this.layers.layer.setOptions ({
          strokeColor: '#00C5EC', 
          fillColor: '#00AEFF',
          fillOpacity: 0.4,
          editable:false,
          visible:true,
        })
        // 修改一级网格字体颜色
        let text = this.layers.text.getOverlays();
        for (let i = 0; i < text.length; i++) {
          text[i].setStyle({
            'font-size': '16px',
            'font-weight': 'bold',
            'text-align': 'center',
            'color': '#00AEFF',
            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
            'white-space': 'nowrap',
          })
        }
        // 修改二级网格背景
        // this.layers.layer2.setOptions ({
        //   strokeColor: '#FFBF7A',
        //   fillColor: '#DC8419',
        //   strokeOpacity: 1,
        //   fillOpacity: 0.3,
        // })
        // 修改围栏区域文本样式
        var overlays = this.layers.layer3.getOverlays();
        for (var i = 0; i < overlays.length; i++) {
          let id = overlays[i].getExtData().id;
          if(id == "围栏text" || id == "区域text") {
            overlays[i].setStyle({
              'font-size': '14px',
              'text-align': 'center',
              'color': '#62E1FA',
              'line-height': '24px',
              'letter-spacing': '2px',
              'white-space': 'nowrap',
            })
          } else if(id == "区域polygon") {
            overlays[i].setOptions({
              strokeOpacity: 0,
              strokeColor: '#FF0000',
              fillColor: '#FF0000',
              fillOpacity:0.38,
            })
          } else if(id == "围栏polygon") {
            overlays[i].setOptions({
              strokeOpacity: 0.9,
              strokeColor: "#62E1FA",
              fillColor: "#62E1FA",
              fillOpacity: 0.3,
            })
          }
        }
        this.map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518")
      } else {
        this.visible = true;
        // 修改一级网格背景
        this.layers.layer.setOptions ({
          strokeColor: '#0084FF', 
          fillColor: '#40AFFF',
          fillOpacity: 0.8,
          editable:false,
          visible:true,
        })
        // 修改一级网格字体颜色
        let text = this.layers.text.getOverlays();
        for (let i = 0; i < text.length; i++) {
          text[i].setStyle({
            'font-size': '16px',
            'font-weight': 'bold',
            'text-align': 'center',
            'color': '#DFFAFF',
            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
            'white-space': 'nowrap',
          })
        }
        // // 修改二级网格背景
        // this.layers.layer2.setOptions ({
        //   strokeColor: '#FF8400',
        //   fillColor: '#FF911A',
        //   strokeOpacity: 1,
        //   fillOpacity: 0.4,
        // })
        // 修改围栏区域文本样式
        var overlays = this.layers.layer3.getOverlays();
        for (var i = 0; i < overlays.length; i++) {
          let id = overlays[i].getExtData().id;
          // console.log(id,'id');
          if(id == "围栏text" || id == "区域text") {
            overlays[i].setStyle({
              'font-size': '14px',
              'text-align': 'center',
              'color': '#E4ECFF',
              'line-height': '24px',
              'letter-spacing': '2px',
              'white-space': 'nowrap',
            })
          } else if(id == "区域polygon") {
            overlays[i].setOptions({
              strokeOpacity: 0,
              strokeColor: '#FF0000',
              fillColor: '#FF0000',
              fillOpacity:0.6,
            })
          } else if(id == "围栏polygon") {
            overlays[i].setOptions({
              strokeOpacity: 1,
              strokeColor: "#00B7FF",
              fillColor: "#001AFF",
              fillOpacity: 0.5,
            })
          }
        }
        // this.layers.text.setOptions ({
        //   setStyle:{
        //     'font-size': '16px',
        //     'font-weight': 'bold',
        //     'text-align': 'center',
        //     'color': '#DFFAFF',
        //     'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
        //     'white-space': 'nowrap',
        //   }
        // })
        this.map.setMapStyle("amap://styles/whitesmoke")
        
      }
    },
    // 搜索数据
    querySearch(queryString, cb){
      this.input = queryString;
      // 执法人员搜索
      if(this.actionMap == 1) {
        dwgjList({name:queryString}).then(res=>{
          var restaurants = res.data;
          let a = [];
          restaurants.forEach((per=>{
            let item = { value: per.nickName, imei: per.imei };
            a.push(item);
          }))
          cb(a);
        })
      } else if (this.actionMap == 2) {
        // 事件的搜索
        let data = {'queryValue' : [{colCode:"name",queryValue:queryString}], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
        ViewListPage({viewCode:'event-all-list', pageNo: 1, pageSize:10}, data).then(res=>{
          // console.log(res,"事件信息");
          var restaurants = res.result.records;
          let a = [];
          restaurants.forEach((per=>{
            let item = { value: per.name, location: per.location ? per.location : "" };
            a.push(item);
          }))
          cb(a);
        })
      } else if (this.actionMap == 3) {
        // 车辆的搜索
      } else if(this.actionMap == 4) {
        // 监控视频搜索
      } else if(this.actionMap == 5) {
        // 店铺的搜索
        getStreetShopList({shopName:queryString,pageSize:20,pageNum:1}).then(res=>{
          var restaurants = res.rows;
          let a = [];
          restaurants.forEach((per=>{
            let item = { value: per.shopName, imei: per.id, longitude:per.longitude, latitude:per.latitude };
            a.push(item);
          }))
          cb(a);
        })
      }
    },
    // 点击事件
    handleSelect(item){
      // console.log(item,"item");
      if(this.actionMap == 1) {
        if(item.imei) {
          // 根据imei查询设备
          getDeviceList({imei:item.imei}).then(res=>{
            if(res.code == 200 && res.data.msg == "操作成功") {
              this.map.setZoomAndCenter(16,[res.data.obj[0].longitude,res.data.obj[0].latitude]);
            }
          })
        }
      } else if (this.actionMap == 2) {
        if(item.location) {
          let location = item.location?.split(',');
          this.map.setZoomAndCenter(16,[location[0],location[1]]);
        }
      } else if (this.actionMap == 3) {
        // 车辆的搜索
      } else if(this.actionMap == 4) {
        // 监控视频搜索
      } else if(this.actionMap == 5) {
        // 店铺的搜索
        if(item.longitude && item.latitude) {
          this.map.setZoomAndCenter(16,[item.longitude,item.latitude]);
        }
      }
    },
    // 新增事件的点击事件
    createdTask() {
      this.$refs.newEvent.open();
    },
    // 地图扎点的点击事件
    positioning() {
      this.isPositioning = true;
      // this.$refs.videoWall.open();
    },
    // 弹框点击取消事件
    cancel(marker){
      this.layers.layer4.removeOverlay(marker);
      
    },
    confirm() {
      // 事件新增完毕重新请求事件列表及经纬度
      this.getMarkers(2);
    },
    // 切换地图事件
    changeMap(id) {
      this.MyInput = true;
      this.zadian = false;
      this.actionMap = id;
      this.input = "";
      this.personInfo.visible = false;
      this.eventInfo.visible = false;
      this.carInfo.visible = false;
      this.monitoringInfo.visible = false;
      this.shopInfo.visible = false;
      if (id == 1) {
        this.markerOffset = new AMap.Pixel(-35, -123);
      } else if (id == 2) {
        this.zadian = true;
        this.markerOffset = new AMap.Pixel(-13.5, -15);
      } else if (id == 3) {
        this.markerOffset = new AMap.Pixel(-30.5, -48.5);
      } else if (id == 4) {
        this.MyInput = false;
        this.markerOffset = new AMap.Pixel(-27, -94);
      } else if (id == 5) {
        this.markerOffset = new AMap.Pixel(-27, -94);
      }
      this.getMarkers(id);
    },
    // 隐藏地图左侧
    leftAnimation() {
      setTimeout(() => {
        this.leftAnimationData = !this.leftAnimationData;
      }, 200);
      this.$emit("leftAnimationAction");
    },
    // 隐藏地图右侧
    rightAnimation() {
      setTimeout(() => {
        this.rightAnimationData = !this.rightAnimationData;
      }, 200);
      this.$emit("rightAnimationAction");
    },
    // 获取车辆信息
    getCarList(){
      getCarManageList({pageNum: 1,pageSize: 10}).then(res=>{
        // console.log('车辆',res);
        this.carLine = res.rows
      })
    },
    // 定时器
    markerInterval(){
    
      let timer
      if(this.actionMap == 1) {
        timer = setInterval(() => {
          for(let i = 0; i < this.personMarkers.length; i++) {
            for(let j = i+1; j < this.personMarkers.length; j++) {
              if(this.personMarkers[i].imei == this.personMarkers[j].imei) {
                this.personMarkers.splice(i,1);
              }
            }
          }
          console.log("this.personMarkers",this.personMarkers);
          getDeviceList().then(res=>{
            if(res.code == 200) {
              res.data.obj.forEach((item,index)=>{
                this.personMarkers.forEach((per)=>{
                  if(item.imei == per.imei) {
                    per.markers.setPosition(new AMap.LngLat(item.longitude,item.latitude))
                  }
                })
              })
            }
          })
        }, 10000);
      } else {
        clearInterval(timer)
      }
    },
    // 模拟登录获取token
    getrobotToken(){
      robotLogin({username:"superAdmin",password:"sa@123456"}).then(res=>{
        // console.log(res,"登录信息");
        if(res.code == 200) {
          // setRobotToken(res.result.token)
          localStorage.setItem('robotToken',res.result.token)
        }
      })
    },
    // 获取在线和离线人员的图标
    getPersonIcon(){
      listZhzz().then(res=>{
        if(res.code == 200) {
          this.onIcon = res.rows[0].onIcon ? process.env.VUE_APP_BASE_API + res.rows[0].onIcon : require("../../../assets/images/icon/icon1.png");
          this.offIcon = res.rows[0].offIcon ? process.env.VUE_APP_BASE_API + res.rows[0].offIcon : require("../../../assets/images/icon/offLine1.png");
          // console.log(this.onIcon,'this.onIcon');
          // console.log(this.offIcon,'this.offIcon');
          const faviconUrl = res.rows[0].platformLogoUrl ? process.env.VUE_APP_BASE_API + res.rows[0].platformLogoUrl : require("@/assets/images/login-logo.png");
          const faviconLink = document.querySelector('link[rel="icon"]');
          const newLink = document.createElement('link');
          newLink.setAttribute('rel', 'icon');
          newLink.setAttribute('type', 'image/x-icon');
          newLink.setAttribute('href', faviconUrl);

          // 将新的 link 元素替换掉原来的 link 元素
          faviconLink.parentNode.replaceChild(newLink, faviconLink);
        }
      })
    }
    
  },

  mounted() {
    this.getPersonIcon();
    this.getCarList();
    this.getrobotToken();
    
    // this.markerInterval();
  },
};
</script>
<style lang="scss" scoped>
.map-main {
  width: 100%;
  height: 100%;
  position: relative;
  .map-mengcheng {
    position: absolute;
    top: 0;

  }
  .left-animationMap-enter-active,
  .left-animationMap-leave-active {
    transition: all 1s;
  }
  .left-animationMap-enter,
  .left-animationMap-leave-to {
    /* 进入的初始状态和离开的最终状态 */
    opacity: 0;
    transform: translateX(-510px);
  }

  .right-animationMap-enter-active,
  .right-animationMap-leave-active {
    transition: all 1s;
  }
  .right-animationMap-enter,
  .right-animationMap-leave-to {
    /* 进入的初始状态和离开的最终状态 */
    opacity: 0;
    transform: translateX(510px);
  }

  .left-bg {
    position: absolute;
    left: 20px;
    top: 0;
    width: 11px;
    height: 95%;
    padding: 20px 0 0 0;
    z-index: 600;
    .bgt {
      width: 100%;
      height: 100%;
      background-image: url("../../../assets/images/broadside-bg.png");
      background-size: 100% 100%;
    }
  }
  .right-bg {
    position: absolute;
    top: 0;
    right: 20px;
    width: 11px;
    height: 95%;
    padding: 20px 0;
    z-index: 600;
    .bgt {
      width: 100%;
      height: 100%;
      background-image: url("../../../assets/images/broadside2-bg.png");
      background-size: 100% 100%;
    }
  }
  .bottom-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 20px;
    z-index: 600;
    .bgt {
      width: 100%;
      height: 100%;
      background-image: url("../../../assets/images/bottom-bg.png");
      background-size: 100% 100%;
    }
  }
  .map-left {
    position: absolute;
    left: 47px;
    top: 10px;
    width: 460px;
    height: 95%;
    z-index: 600;
    box-sizing: border-box;
    // background: rgba(216,216,216,0.05);
  }
  .left-image {
    z-index: 600;
    position: absolute;
    left: 527px;
    bottom: 50%;
    width: 40px;
    cursor: pointer;
  }
  .left-image2 {
    z-index: 600;
    position: absolute;
    left: 67px;
    bottom: 50%;
    width: 40px;
    cursor: pointer;
  }
  .right-image {
    z-index: 600;
    position: absolute;
    right: 527px;
    bottom: 50%;
    width: 40px;
    cursor: pointer;
  }
  .right-image2 {
    z-index: 600;
    position: absolute;
    right: 67px;
    bottom: 50%;
    width: 40px;
    cursor: pointer;
  }
  .map-right {
    position: absolute;
    right: 47px;
    top: 10px;
    width: 460px;
    height: 95%;
    z-index: 600;
    // margin: 10px 17px 0 10px;
    // padding: 20px 0;
    box-sizing: border-box;
  }
  .middle-top-left {
    z-index: 600;
    position: absolute;
    left: 537px;
    top: 10px;
    display: flex;
    .input-keyword {
      ::v-deep .el-input {
        background-image: url("../../../assets/images/bgtongyong.png");
        background-size: 100% 100%;
        .el-input__inner {
          background-color: transparent;
          width: 222px;
          height: 38px;
          color: #fff;
          border: none;
        }
        .el-input__inner::placeholder {
          /* 在这里添加你想要修改的 placeholder 样式 */
          font-size: 14px;
          font-family: "Source Han Sans CN-Regular";
          font-weight: 400;
          color: #d3eef2;
          line-height: 20px;
        }
      }
      ::v-deep .el-input__suffix {
        line-height: 44px;
        color: #d3eef2;
        right: 10px;
        cursor: pointer;
        .el-icon-search:before {
          font-size: 24px;
          color: #d3eef2;
        }
      }
    }
    .laser-positioning,
    .creation-task {
      // height: 38px;
      width: 130px;
      margin-left: 8px;
      background-image: url("../../../assets/images/bgtongyong.png");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 9px 13px;
      cursor: pointer;
      span {
        font-size: 14px;
        font-family: "Source Han Sans CN-Regular";
        font-weight: 400;
        color: #d3eef2;
        line-height: 20px;
        margin-right: 12px;
      }
      img {
        width: 20px;
      }
    }
  }
  .middle-top-left2 {
    left: 67px;
  }
  .middle-bottom-left {
    // 490
    position: absolute;
    left: 537px;
    bottom: 40px;
    // width: 200px;
    z-index: 600;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    .list {
      margin-top: 10px;
      display: flex;
      align-items: center;
      .leftbg {
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url("../../../assets/images/iconbg2.png");
        background-size: 100% 100%;
        width: 36px;
        height: 36px;
        cursor: pointer;
        img {
          width: 20px;
        }
      }
      .action-map {
        background-image: url("../../../assets/images/iconbg1.png");
      }
      .rightbg {
        padding-left: 6px;
        margin-left: 2px;
        background-image: url("../../../assets/images/right-icon.png");
        width: 115px;
        height: 36px;
        display: flex;
        align-items: center;
        span {
          font-size: 16px;
          font-family: "Source Han Sans CN-Bold";
          font-weight: 700;
          color: #ffffff;
          line-height: 26px;
          text-shadow: 0px 0px 5px #0077ff;
        }
      }
    }
  }
  .middle-bottom-left2 {
    left: 67px;
  }
  .middle-bottom-right {
    position: absolute;
    bottom: 40px;
    right: 537px;
    z-index: 600;
    .btn-action {
      display: flex;
      span {
        width: 142px;
        height: 40px;
        flex: 1;
        display: inline-block;
        text-align: center;
        background-image: url("../../../assets/images/changeBtn2.png");
        background-size: 100% 100%;
        padding: 10px 33px;
        font-size: 16px;
        font-family: "Source Han Sans CN-Regular";
        font-weight: 400;
        line-height: 20px;
        color: #d3eef2;
        cursor: pointer;
        // background: transparent;
        // box-shadow: inset 0px 0px 6px 0px #00C2FF;
        // border-radius: 2px 2px 2px 2px;
        // opacity: 1;
        // border: 1px solid rgba(181,207,255,0.5);
        &:nth-child(1) {
          margin-right: 10px;
        }
      }
      .action {
        color: #fff;
        background-image: url("../../../assets/images/changeBtn1.png.png");
        background-size: 100% 100%;
      }
    }
  }
  .middle-bottom-right2 {
    right: 67px;
  }

  .showMap {
    width: 100%;
    height: 100%;
    background-color: #00192e;
  }
}
</style>
