<template>
    <div id="centerDiv" class="mapcontainer">
        <!-- 头部 -->
        <div class="el-header">
          <div class="newworkstate">
            网络状态：<span
              :style="{
                color: newworkstate == '网络正常' ? '#67C23A' : '#E6A23C',
              }"
              >{{ newworkstate }}</span
            >
          </div>
          <div class="app-name">{{appName}}</div>
          
          <div class="header-info" style="z-index:9999999999999999;">
            <!-- 天气中心 -->
            <div class="weather-info">
              <div class="weater">{{weater}}</div>
              <div class="temperature">{{temperature}}</div>
            </div>
            <!-- 时间中心 -->
            <div class="time-info">
              <div class="time-time-info">{{time}}</div>
              <div class="time-date-info">{{date}}</div>
            </div>
            <!-- 退出按钮 -->
            <div class="logout-button" style="position:relative;z-index:999999999999999999999999999999999999999999;" @click="logout()"></div>
          </div>
        </div>

        <!-- 快捷按钮 -->
        <div class="shortcut-button">

          <!-- <div class="quick-button" v-if="appTools['toolsbox']" @click="toolsShow = !toolsShow">常用工具</div> -->

          <!-- <div class="quick-button" v-if="appTools['uavbox']" @click="uavShow = !uavShow">视频巡航</div> -->

          <div class="quick-button" v-if="appTools['routebox']" @click="routeShow = !routeShow">路线规划</div>

          <div class="quick-button" v-if="appTools['monitorbox']" @click="monitorShow = !monitorShow">视频监控</div>

          <div class="quick-button" v-if="appTools['griderbox']" @click="griderShow = !griderShow">网格管理</div>

          <div class="quick-button" v-if="appTools['reportbox']" @click=" reportlistShow = !reportlistShow">线索上报</div>

          <div class="quick-button" @click="updatePersonalData">现场人员</div>

          <div class="quick-button" @click="showHistoryLabel">历史标注</div>
          
        </div>

        <!-- 搜索框 -->
        <div class="search-container">
          <search :globalmap="globalmap"></search>
        </div>
        
        <!-- 地图 -->
        <Map style="width:100%;height:100vh;" :url="configUrl" :widgetUrl="widgetUrl"  @onload="onMapload" />

        <!-- 工具箱 -->
        <div class="tools" >

          <div class="tools-box" v-show="toolsShow && appTools['toolsbox']">
            <toolbox :globalmap="globalmap"></toolbox>
          </div>

          <div class="left-container-box" v-show="socketBoxVisible">
            <div class="monitor" >
              <userpoint :globalmap="globalmap"></userpoint>
            </div>
          </div>

          <div class="left-container-box">
             <!-- 监控列表 -->
            <div class="monitor"  v-if="monitorShow && appTools['monitorbox']">
              <monitorbox @showLCmonitorbox="showLCmonitorbox"></monitorbox>
            </div>
            <!-- 乐橙监控 -->
            <div class="monitor" v-if="LCmonitorboxShow">
              <div class="close-button" @click="LCmonitorboxShow = false">
                <i class='el-icon el-icon-close'></i>
              </div>
              <LCmonitorbox v-if="LCmonitorboxShow" :deviceId="deviceId" :channelId="channelId"></LCmonitorbox>
            </div>
          </div>

          <div class="left-container-box">
             <!-- 上报线索 -->
            <div class="huoqing-box" v-show="reportlistShow">
              <reportlist @close="reportlistShow=false" :mergeSuccessRandom="mergeSuccessRandom"  @wuzi="wuzi" @shuiyuan="shuiyuan" @getTaskListSocket="getTaskList" @getlistSocket="reportlistShow = true" @jiankong="jiankong" @renyuan="renyuan" @merge="mergeboxShow=true;" @changeCurrentInfo="changeCurrentInfo" :globalmap="globalmap" :checkList="checkList" :checkNumber="checkNumber"></reportlist>
            </div>

            <!-- 线索合并 -->
            <div class="merage-box" v-if="mergeboxShow">
              <mergebox @wuzi="wuzi"  @changeCurrentInfo="changeCurrentInfo" @clsoe="mergeboxShow = false;" @success="mergeSuccess" :globalmap="globalmap" :checkList="checkList" :checkNumber="checkNumber"></mergebox>
            </div>

             <div class="bottom-tools-container">

          <!-- 无人机 -->
          <div class="uav" v-if="uavShow && appTools['uavbox']">
            <uavbox></uavbox>
          </div>

          <!-- 最优路线规划 -->
          <div class="route" v-show="routeShow && appTools['routebox']">
            <routebox :globalmap="globalmap"></routebox>
          </div>

          <div class="monitor" v-if="videoCallShow">
            <!-- <div class="close-button" @click="videoCallShow = false">
              <i class='el-icon el-icon-close'></i>
            </div> -->
          <videocall @endVideoCall="endVideoCall"></videocall>
          </div>

          <div class="monitor" style="width:100vw;height:100vh;position:fixed;top:0px;left:0px;z-index:999999;" v-if="HKmonitorboxShow">
            <div class="close-button" style="position:absolute;top: calc( 50% - 170px);left: calc( 50% + 200px);transform:translate(-50%,-50%);" @click="HKmonitorboxShow = false">
              <i class='el-icon el-icon-close'></i>
            </div>
            <HKmonitorbox v-if="HKmonitorboxShow" :deviceId="deviceId" :channelId="channelId"></HKmonitorbox>
          </div>
        </div>
          </div>
          <!-- 火情调度 -->
          <div class="situation" v-if="reportSituationShow">
            <div class="situation-info">
              <p>
                <span>火情描述：{{currentInfo.describe}}</span>
              </p>
              <p>
                <span>上报人员：{{currentInfo.reportPerson}}</span>
                <span style="float:right;">上报时间：{{currentInfo.reportTime}}</span>
              </p>
              <p>
                <span>预估火点：{{currentInfo.address}} </span>
                <span>
                  <el-button type="primary" size="mini" icon="el-icon-location-information"></el-button>
                </span>
              </p>
            </div>
            <div class="situation-tab-container">
              <div class="situation-tab" :style="{'border-bottom':active == 1 ? '3px solid #01D6D5': '0px'}" @click="active = 1">火情动态</div>
              <div class="situation-tab" :style="{'border-bottom':active == 2 ? '3px solid #01D6D5': '0px'}" @click="active = 2">任务下发</div>
              <div class="situation-tab" :style="{'border-bottom':active == 3 ? '3px solid #01D6D5': '0px'}" @click="active = 3">附近水源</div>
              <div class="situation-tab" :style="{'border-bottom':active == 4 ? '3px solid #01D6D5': '0px'}" @click="active = 4">物资调度</div>
            </div>
            <!-- 火情动态 -->
            <trendsbox v-show="active == 1"></trendsbox>

            <!-- 任务下发 -->
            <taskbox v-show="active == 2" ></taskbox>

            <!--  -->


          </div>
        </div>

        <!-- 人员 -->
        <div class="personnel-container" v-if="personVisible" v-drag>
          <personnel :fireData="currentInfo" :globalmap="globalmap" @close="personVisible = false"  @videoCall="videoCall"></personnel>
        </div>

        <!-- 物资 -->
        <div class="goods-container" v-if="goodsVisible" v-drag>
          <goodsbox :endLngLat="endLngLat" :globalmap="globalmap" @close="goodsVisible = false"></goodsbox>
        </div>

        <!-- 图层信息编辑 -->
        <div class="editor-box" v-drag v-if="editorVisible">
          <editorbox :editData="editData" :tableName="tableName" :showFields="showFields" @close="editorVisible = false;"></editorbox>
        </div>

        <!--  -->

        <!-- 水源 -->
        <div class="goods-container" v-if="waterVisible" v-drag>
          <waterbox :waterCenter="waterCenter" :globalmap="globalmap" @close="closeWaterlayer()"></waterbox>
        </div>
        
        <!-- 网格化管理 -->
        <div class="grid-container" v-show="appTools['griderbox'] && griderShow">
          <gridbox ></gridbox>
        </div>

        <!-- 右键点击设置 -->
        <div v-if="setVisibleShow">
          <rightclicksetting  :globalmap="globalmap" :type="rightType" :clickdata="setDatas" @close="rightType=0"></rightclicksetting>
        </div>
        <!-- socket -->
        <!-- <div class="socket-container"> -->
        <div class="">
          <socketDiaBox :globalmap="globalmap" :showOnlineUser="socketBoxVisible"    @videoCall="videoCall"></socketDiaBox>
        </div>

        <!-- 火情上报 -->
        <!-- <div class="report" v-if="appTools['reportbox']">
          <reportbox @getAllReportList="getAllReportList"></reportbox>
        </div> -->
        <!-- 任务下发 -->
        <div class="task" v-if="taskDeliveryShow">
            <taskDelivery @closeTask="closeTask" :globalmap="globalmap" :lng="tasklng" :lat="tasklat"></taskDelivery>
        </div>
        <!-- 脚部 -->
        <div class="footer">
          <div class="base-layer-change-button" @click="addTileLayer('vec_d')">电子地图</div>
           <div class="base-layer-change-button" :style="{'margin-right':'40px'}" @click="addTileLayer('img_d')">卫星地图</div>
        </div>

        <!--  -->
    </div>
</template>

<script>

// 请求接口获取全部路由和工具箱信息
import { getModules } from '@/api/modules.js';

import AppConfigInfo from '../../../public/config/app.json'
import $ from 'jquery'
import Map from '@/components/mars3d/Map.vue'
import widgetdiv from '@/components/Widget/index.vue'
import Uavbox from './widget/uavbox.vue'
import toolbox from './widget/toolbox.vue'
import monitorbox from './widget/monitorbox.vue'
import routebox from './widget/routebox.vue'
import waterbox from './widget/waterbox.vue';
import reportlist from './widget/reportlist.vue';
import goodsbox from './widget/goodsbox.vue';
import trendsbox from './widget/trendsbox.vue';
import taskbox from './widget/taskbox.vue';
import gridbox from './widget/gridbox.vue';
import LCmonitorbox from './widget/LCmonitorbox.vue'
import HKmonitorbox from './widget/HKmonitorbox.vue'
import videocall from './widget/videocallbox.vue';
import personnel from './widget/personnel.vue';
import taskDelivery from './widget/taskDelivery.vue';
import axios from 'axios';
import jQuery from 'jquery';
import { mask } from '@turf/turf';
import mergebox from './widget/mergebox.vue';
import rightclicksetting from './widget/rightclick.vue';
import socketDiaBox from './widget/socketdiabox.vue';
import userpoint from './widget/userpoint.vue'
import drag from '../../utils/draged';
import editorbox from './widget/editorbox';
import search from './widget/search'

let BASE_URL = process.env.VUE_APP_BASE_API
export default {
  name: 'business',
  components: {
    Map,
    // widgetdiv,
    Uavbox,
    toolbox,
    monitorbox,
    routebox,
    waterbox,
    // reportbox,
    goodsbox,
    reportlist,
    trendsbox,
    taskbox,
    gridbox,
    LCmonitorbox,
    HKmonitorbox,
    mergebox,
    personnel,
    videocall,
    rightclicksetting,
    socketDiaBox,
    taskDelivery,
    userpoint,
    editorbox,
    search
  },

  data() { 
    return {
      endLngLat:null,
      appName:null,
      appTools:null,
      toolsShow:false,
      routeShow:false,
      uavShow:false,
      monitorShow:true,
      griderShow:false,
      reportSituationShow:false,
      reportlistShow:true,
      waterCenter:null,
      date:null,
      time:null,
      weater:null,
      temperature:null,
      globalmap:null,
      // configUrl: "config/config.json",
      configUrl: "config/"+localStorage.getItem("areaName")+"Config.json",
      widgetUrl: "config/widget.json",
      tileLayer:null,
      active:1,
      personVisible: false,
      goodsVisible: false,
      waterVisible: false,
      currentInfo:{},
      LCmonitorboxShow:false,
      HKmonitorboxShow:false,
      deviceId:null,
      channelId:null,
      checkList:[],
      checkNumber:[],
      mergeboxShow:false,
      mergeSuccessRandom:1,
      rightType: 5,
      setDatas:{},
      setVisibleShow: false,
      videoCallShow:false,
      socketBoxVisible: true,
      taskDeliveryShow:false,
      tasklng: '',
      tasklat: '',
      friePointLayer:null,
      taskList:[],
      taskGraphicLayer:null,
      newworkstate:null,
      editorVisible:false,
      tableName:null,
      editData:null,
      showFields:null,
    }
  },


  mounted(){
    let 
    
    _this = this;

    // setTimeout(function(){
    //   localStorage.setItem("userName","123456");
    //   localStorage.setItem("callerName","456789");
    //   _this.videoCallShow = true;
    //   alert(111);
    // },5000)
    this.getNetWorkState();
  },
  created(){
    window.AppConfig = AppConfigInfo[localStorage.getItem("areaName")];
    this.appName = AppConfig.appname;
    this.appTools = AppConfig.tools;
    let _this = this;
    // 每秒更新日期时间
    setInterval(function(){
      _this.handlerTime();
    },1000)

    // 获取天气
    this.getWeater();

    //脱敏
    window.hiddenReadData= function(e){
      e.innerHTML = e.getAttribute('data-phone').replace(/(\d{3})\d*(\d{4})/, '$1****$2');
    }
    window.showReadData = function(e){
      e.innerHTML = e.getAttribute('data-phone')
    }

    window.lookMonitorByMonitorLayer = this.lookMonitorByMonitorLayer

    // 视频通话
    window.videoCall = this.videoCall;

    window.shuiyuan = this.shuiyuan;

    window.delFirePoint = this.delFirePoint

    window.delTaskPoint = this.delTaskPoint;

    window.editlayerinfo = this.editlayerinfo;
  },
  methods: {
    updatePersonalData(){
      this.socketBoxVisible = !this.socketBoxVisible;
    },
    // 查看历史标注
    showHistoryLabel(){
      this.rightType = 4;
      this.setVisibleShow = true;
    },
    // 获取网络状态
    getNetWorkState() {
      if (window.navigator.onLine) {
        this.newworkstate = "网络正常";
      } else {
        this.newworkstate = "网络断开";
      }

      let _this = this;

      window.addEventListener("online", function (e) {
        _this.newworkstate = "网络正常";
      });

      window.addEventListener("offline", function (e) {
        _this.newworkstate = "网络断开";
        _this.$message({
          type: "error",
          message: "网络已断开！",
        });
      });

    },
    closeWaterlayer(){
      this.waterVisible = false
    },
    // 获取下发任务列表
    getTaskList(){
        axios({
          method:"get",
          url:BASE_URL+"/FireManagement/LoadAllTask",
          params:{
            pageIndex:1,
            pageSize:999,
          },
          headers:{
            "X-Token":localStorage.getItem("X-Token")
          }
        }).then(res=>{
          if(res.data.code == 200){
            this.taskList = res.data.data;
            this.drawTaskPoint();
          }
        })
    },
    // 绘制任务点图标
    drawTaskPoint(){
      if(this.taskGraphicLayer){
        this.taskGraphicLayer.clear();
      }else{
        this.taskGraphicLayer = new this.mars3d.layer.GraphicLayer();
        this.globalmap.addLayer(this.taskGraphicLayer);
      }
      this.taskList.forEach((item,index)=>{
        let delTask = localStorage.getItem("unitName") != 'null' ? '' : `<span id="lablCSFM2" onclick="delTaskPoint(${item.id})"  class="label-tag data-value-status-3" title="删除任务点">删除任务点</span>`
        let graphic = new mars3d.graphic.BillboardEntity({
          position: [parseFloat(item.lng),parseFloat(item.lat)],
          style: {
            image: "/img/marktask.png",
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround:true,
            scale:0.4,
            label: {
              text: "任务点",
              font_size: 14,
              color: "#ffffff",
              pixelOffsetY: 10,
              distanceDisplayCondition: true,
              distanceDisplayCondition_far: 500000,
              distanceDisplayCondition_near: 0
            }
          },
          "popup": `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
              <div class="marsTiltPanel-wrap">
                  <div class="area">
                      <div class="arrow-lt"></div>
                      <div class="b-t"></div>
                      <div class="b-r"></div>
                      <div class="b-b"></div>
                      <div class="b-l"></div>
                      <div class="arrow-rb"></div>
                      <div class="label-wrap">
                          <div class="title">任务信息</div>
                          <div class="label-content">
                              <div class="data-li">
                                  <div class="data-label">任务内容：${item.content? item.content:'暂无任务内容'}</div>
                              </div>
                               <div class="data-li">
                                  <div class="data-label">任务位置：</div>
                                  <div class="data-value"><span id="lablYeWei"  class="label-num">${item.lng},${item.lat}</span><span class="label-unit"></span>
                                  </div>
                              </div>
                              <div class="data-li">
                                  <div class="data-label">任务创建时间：</div>
                                  <div class="data-value"><span id="lablYeWei"  class="label-num">${item.taskTime}</span><span class="label-unit"></span>
                                  </div>
                              </div>
                              <div class="data-li">
                                    <div class="data-value">
                                        ${delTask}
                                    </div>
                                </div>
                          </div>
                      </div>
                  </div>
                  <div class="b-t-l"></div>
                  <div class="b-b-r"></div>
              </div>
              <div class="arrow" ></div>
          </div>`,
          "popupOptions":{
            "offsetY":-30,
            "template":"{content}",
            "horizontalOrigin":"Cesium.HorizontalOrigin.LEFT",
            "verticalOrigin":"Cesium.VerticalOrigin.CENTER"
          },
          attr: { remark: "火点"}
        })  
        this.taskGraphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
      })
    },


    //  <div class="data-li">
    //                               <div class="data-label"></div>
    //                               <div class="data-value">
    //                                   <span class="label-tag data-value-status-2" title="删除任务" onclick="delTask('${item.id}')">删除任务</span></div>
    //                           </div>
    // delTask(id){
    //   axios({
    //     type:"post",
    //     url:BASE_URL+"/FireManagement/DeleteFireTask",

    //     headers:{
    //       "X-Token":localStorage.getItem("X-Token")
    //     }
    //   })
    // },
    // 视频通话
    videoCall(phone){
      localStorage.setItem("callerName",phone);
      this.videoCallShow = true;
    },
    endVideoCall(){
      localStorage.setItem("callerName","");
      this.videoCallShow = false;
    },
    closeTask(){
      this.taskDeliveryShow=false
    },
    // 线索合并成功后执行
    mergeSuccess(){
      this.mergeboxShow = false;

      this.$message({
        type:"success",
        message:"合并成功！"
      })
      this.checkList = [];
      this.checkNumber = [];
      this.mergeSuccessRandom = Math.random();
      this.getFirePointList();
    },
    // 获取火点列表 地图展示
    getFirePointList(){
      axios({
        method:"get",
        url:BASE_URL+"/FireManagement/GetFireInfo",
        params:{
          "id":0,
        },
        headers:{
          'X-Token':localStorage.getItem("X-Token")
        }
      }).then(res=>{
        if(res.data.code == 200){
          this.drawFirePoint(res.data.data);
        }
      })
    },
    // 绘制火点
    drawFirePoint(data){
      if(this.friePointLayer == null){
        this.friePointLayer = new this.mars3d.layer.GraphicLayer({id:999});
        this.globalmap.addLayer(this.friePointLayer)
      }else{
        this.friePointLayer.clear();
      }
      data.forEach((item,index)=>{
        let graphic = new mars3d.graphic.BillboardEntity({
          position: [parseFloat(item.lng),parseFloat(item.lat)],
          style: {
            image: "/img/markfire.png",
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround:true,
            scale:0.5,
            label: {
              text: "火点",
              font_size: 14,
              color: "#ffffff",
              pixelOffsetY: 10,
              distanceDisplayCondition: true,
              distanceDisplayCondition_far: 500000,
              distanceDisplayCondition_near: 0
            }
          },
          "popup": `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
              <div class="marsTiltPanel-wrap">
                  <div class="area">
                      <div class="arrow-lt"></div>
                      <div class="b-t"></div>
                      <div class="b-r"></div>
                      <div class="b-b"></div>
                      <div class="b-l"></div>
                      <div class="arrow-rb"></div>
                      <div class="label-wrap">
                          <div class="title">火点信息</div>
                          <div class="label-content">
                              <div class="data-li">
                                  <div class="data-label">火点地址：${item.address}</div>
                              </div>
                              <div class="data-li">
                                  <div class="data-label">上报时间：</div>
                                  <div class="data-value"><span id="lablYeWei"  class="label-num">${item.createTime}</span><span class="label-unit"></span>
                                  </div>
                              </div>
                              <div class="data-li">
                                  <div class="data-value">
                                      <span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">附近人员</span>
                                      <span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])"  class="label-tag data-value-status-2" title="附近水源">附近水源</span>
                                      <span id="lablCSFM2" onclick="delFirePoint(${item.id})"  class="label-tag data-value-status-3" title="删除火点">删除火点</span>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="b-t-l"></div>
                  <div class="b-b-r"></div>
              </div>
              <div class="arrow" ></div>
          </div>`,
          "popupOptions":{
            "offsetY":-30,
            "template":"{content}",
            "horizontalOrigin":"Cesium.HorizontalOrigin.LEFT",
            "verticalOrigin":"Cesium.VerticalOrigin.CENTER"
          },
          attr: { remark: "火点"}
        })  
        this.friePointLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
      })
    },

    // 乐橙监控 
    showLCmonitorbox(e){
      this.channelId = e.channelId;
      this.deviceId = e.deviceId;
      this.LCmonitorboxShow = true;
    },
    changeCurrentInfo(item){
      this.currentInfo = item;
      // this.reportSituationShow = true;
    },
    getAllReportList(){
      this.reportlistShow = !this.reportlistShow;
    },
    // 退出登录
    logout(){
      localStorage.setItem("X-Token","");
      window.location.reload();
    },
    // 物资
    wuzi(item){
      this.endLngLat = item
      if(this.goodsVisible){
        this.goodsVisible = false
      }else{
        this.goodsVisible = true;
      }
    },
    // 监控
    jiankong(e){
      // this.deviceId = "8L0995DPAG5DF32";
      this.deviceId = e;
      this.channelId = "0";
      this.HKmonitorboxShow = true;

    },
    // 人员
    renyuan(item){
      this.currentInfo.lng = item[0];
     this.currentInfo.lat = item[1];
      if(this.personVisible){
        this.personVisible = false
      }else{
        this.personVisible = true;
      }
    },
    // 水源
    shuiyuan(item){
      this.waterCenter = item;
      this.waterVisible = true;
    },
    // 删除火点
    delFirePoint(id){
      axios({
        method:"post",
        url:BASE_URL+"/FireManagement/DeleteFireInfo?id="+id,
        headers:{
          'X-Token':localStorage.getItem("X-Token")
        }
      }).then(res=>{
        if(res.data.code==200){
          this.$message({
            type:"success",
            message:"删除成功"
          })
          this.getFirePointList();
          this.waterVisible = false;
        }
      })
    },
    // 删除任务点
    delTaskPoint(id){
      axios({
        method:"post",
        url:BASE_URL+"/FireManagement/DeleteFireTask",
        data:[id],
        headers:{
          'X-Token':localStorage.getItem("X-Token")
        }
      }).then(res=>{
        if(res.data.code==200){
          this.$message({
            type:"success",
            message:"删除成功"
          })
          this.getTaskList();
        }
      })
    },
    // 地图构造完成回调
    onMapload(map) {
        let _self = this;
        window.globalmap = map;
        this.globalmap = map;

        map.on(this.mars3d.EventType.click,this.onMapClick)
        map.on(this.mars3d.EventType.clickTileGraphic,this.onMapClick)
        // 创建entity图层
        _self.graphicLayer = new this.mars3d.layer.GraphicLayer({
            pid:88,
        })

        map.addLayer(_self.graphicLayer)
          // 灭火专班
        let graphic = new mars3d.graphic.BillboardEntity({
          position: localStorage.getItem("areaName") == 'feixian' ? [118.031537, 35.43147, 246] : [117.838645,35.503401,248.7],
          style: {
            image: "/img/miehuozhuanban-"+localStorage.getItem("areaName")+".png",
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround:true,
            scale:0.7,
            label: {
              text: "森林防灭火指挥中心",
              font_size: 14,
              color: "#ffffff",
              pixelOffsetY: 10,
              distanceDisplayCondition: true,
              distanceDisplayCondition_far: 500000,
              distanceDisplayCondition_near: 0
            }
          },
          attr: { remark: "森林防灭火指挥中心" }
        })  

        _self.graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)

        _self.bindShowTilesParts();
        let mapContextmenuItems = [];
        if(localStorage.getItem("unitName")=="null"){
           mapContextmenuItems = [
          {
            text: "设为火点",
            show: function (e) {
              return Cesium.defined(e.cartesian)
            },
            callback: (e) => {
              const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
              let url = "https://restapi.amap.com/v3/geocode/regeo?key="+AppConfigInfo.gaodeApi+"&location=" + mpt._lng + "," + mpt._lat + "&extensions=base"
              axios({
                  method: 'get',
                  url: url,
              }).then(res => {
                let name = res.data.regeocode.formatted_address
                this.setDatas = {
                  address: name,
                  lng: mpt._lng,
                  lat: mpt._lat,
                  describe:'',
                  areaname: localStorage.getItem("areaName"),
                  sourceType: 5
                }
                this.rightType = 1
                
              }).catch(err =>{
                console.log('ee',err)
              })

              this.setVisibleShow = true
              
            }
          },
          {
            text: "设为任务点",
            show: function (e) {
              return Cesium.defined(e.cartesian)
            },
            callback: (e) => {
              const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
              // let url = "https://restapi.amap.com/v3/geocode/regeo?key="+AppConfigInfo.gaodeApi+"&location=" + mpt._lng + "," + mpt._lat + "&extensions=base"
              // axios({
              //     method: 'get',
              //     url: url,
              // }).then(res => {
              //   let name = res.data.regeocode.formatted_address
              //   this.setDatas = {
              //     address: name,
              //     lng: mpt._lng,
              //     lat: mpt._lat,
              //     content:''
              //   }
              //   this.rightType = 2
                
              // }).catch(err =>{
              //   console.log('ee',err)
              // })

              this.tasklng = mpt._lng
              this.tasklat = mpt._lat
              this.taskDeliveryShow = true
            }
          },
          {
            text: "查找周边",
            show: function (e) {
              return Cesium.defined(e.cartesian)
            },
            children: [
              {
                text: "人员",
                callback: (e) => {
                  const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
                  console.log('aaa',mpt)
                  this.currentInfo = {
                    lng: mpt._lng,
                    lat: mpt._lat
                  }
                  this.personVisible = true
                  this.goodsVisible = false

                }
              },
              // {
              //   text: "物资",
              //   callback: (e) => {
              //     const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
              //     this.endLngLat = [ mpt._lng , mpt._lat ]
              //     this.goodsVisible = true
              //     this.waterVisible = false
              //     this.personVisible = false
              //   }
              // },
              {
                text: "水源",
                callback: (e) => {
                  const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
                  this.waterCenter = [ mpt._lng , mpt._lat ]
                  this.waterVisible = true
                  this.goodsVisible = false
                  this.personVisible = false
                }
              }
            ]
            
          },
          {
            text: "添加标注",
            // show: function (e) {
            //   return Cesium.defined(e.cartesian)
            // },
            children: [
              {
                text: "火点",
                callback: (e) => {
                  const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
                  this.setDatas = {
                    title: '',
                    lng: mpt._lng,
                    lat: mpt._lat,
                    iconUrl:'火点',
                    remark: ''
                  }
                  this.rightType = 3
                  this.setVisibleShow = true
                }
              },
              {
                text: "集合点",
                callback: (e) => {
                  const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
                  this.setDatas = {
                    title: '',
                    lng: mpt._lng,
                    lat: mpt._lat,
                    iconUrl:'集合点',
                    remark: ''
                  }
                  this.rightType = 3
                  this.setVisibleShow = true
                }
              },
              {
                text: "消防车",
                callback: (e) => {
                  const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
                  this.setDatas = {
                    title: '',
                    lng: mpt._lng,
                    lat: mpt._lat,
                    iconUrl:'消防车',
                    remark: ''
                  }
                  this.rightType = 3
                  this.setVisibleShow = true
                }
              },
              // {
              //   text: "箭头",
              //   callback: (e) => {
              //     const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
              //     this.setDatas = {
              //       title: '',
              //       lng: mpt._lng,
              //       lat: mpt._lat,
              //       iconUrl:'箭头',
              //       remark: ''
              //     }
              //     this.rightType = 3
              //     this.setVisibleShow = true
              //   }
              // }
            ]
            
          }
        ]
        }else{
          mapContextmenuItems = [
          {
            text: "查找周边",
            show: function (e) {
              return Cesium.defined(e.cartesian)
            },
            children: [
              {
                text: "人员",
                callback: (e) => {
                  const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
                  console.log('aaa',mpt)
                  this.currentInfo = {
                    lng: mpt._lng,
                    lat: mpt._lat
                  }
                  this.personVisible = true
                  this.goodsVisible = false

                }
              },
              {
                text: "水源",
                callback: (e) => {
                  const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
                  this.waterCenter = [ mpt._lng , mpt._lat ]
                  this.waterVisible = true
                  this.goodsVisible = false
                  this.personVisible = false
                }
              }
            ]
            
          },
         
        ]
        }
        


        map.bindContextMenu(mapContextmenuItems)
        // 查询火点
        _self.getFirePointList();


        // 定时查询任务点
        setInterval(function(){
          _self.getTaskList();
        },5000)
    },

    onMapClick(e){

    },
    // 当前日期时间
    handlerTime(){
      let date = new Date();
      this.time = (date.getHours()<10 ? '0'+ date.getHours() : date.getHours())+":"+ (date.getMinutes()<10 ? '0'+date.getMinutes():date.getMinutes())+":"+(date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds());
      this.date = date.getFullYear()+'-'+((date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1))+'-'+((date.getDate())<10 ? '0'+(date.getDate()):(date.getDate()));
    },
    // 当前天气
    getWeater(){
      let _this = this;
      jQuery.ajax({
        url: "https://api.asilu.com/weather/",
        type: 'GET',
        dataType: 'jsonp',
        data: {
          "city": AppConfig.area,
          "key": "adfdb863ddb1101bb6b40c0700d6203b",
        },
        success: function (res) {
          _this.weater = res.weather[0].weather
          _this.temperature = res.weather[0].temp
        }
      });
    },
    // 添加天地图
    addTileLayer(layer) {
      this.removeTileLayer()
      this.tileLayer = new mars3d.layer.TdtLayer({
        name: "天地图影像注记",
        layer: layer,
        key: ['b6585bc41ee16251dbe6b1af64f375d9'],
        zIndex:1,
      })
      this.globalmap.addLayer(this.tileLayer)
    },
    // 移除底图
    removeTileLayer() {
      if (this.tileLayer) {
        this.tileLayer.remove(true);
        this.globalmap.removeLayer(this.tileLayer, true)
        this.tileLayer = null
      }
    },
    // 邦定地图点击事件
    bindShowTilesParts(){
      let _this =  this;
      this.globalmap.on(mars3d.EventType.clickGraphic, function (event) {
        _this.loadUserList(event);
      })
    },
    // 点击事件获取人员
    loadUserList(event){
      let url = event.layer.options.url;
      this.editData = event.graphic.options.attr;
      this.tableName = url.match(/shp_[0-9]+/)[0];
      this.showFields = JSON.parse(event.layer.options.showFiled)
       $(".mars3d-popup-content-wrapper").append(`<el-button type='primary' size='mini' onclick='editlayerinfo()' style='background:#108eff;padding:4px 6px;color:#fff;border-radius:4px;margin-left:12px;'>编辑</el-button>`);
        let layerName = event.layer.options.name;
        // 如果是监控图层
        if(layerName == '视频监控(86处)' || layerName == '林区监控' || layerName == '语音卡口'){
          console.log("event:::",event)    
          // this.getMonitorList(event.graphic.options.position[0],event.graphic.options.position[1]);
          this.getMonitorList(event.graphic.options.attr.lng,event.graphic.options.attr.lat);
          return;
        }
        // 其他图层
        if (event.graphic && event.graphic.options){
          let queryName = event.graphic.options.attr['name2'];
        let url = null;
        switch(layerName){
          case "检查点": url = "/FirePrevention/LoadjianchadianUser";
            break;
          case "检查站(87处)": url = "/FirePrevention/LoadpyjianchadianUser";
            break;
          case "瞭望台": url = "/FirePrevention/Loadliaowangtaiuser";
            break;
          case "护林点": url = "/FirePrevention/LoadhulindianUser";
            break;
          case "防火驿站": url = "/FirePrevention/Loadfanghuoyizhanuser";
            break;
          case "向导": url ="/FirePrevention/Loadxiangdaouser";
            break;
        }
          if(url){ 
            // 查询人员列表
            this.loadUserListApi(url,queryName);
          }
        }
    },
    // 编辑图斑属性信息
    editlayerinfo(){
      this.editorVisible = true;
    },
    // 获取监控
    getMonitorList(lng,lat){
      axios({
        method:"get",
        params:{
          lng:lng,
          lat:lat
        },
        url:BASE_URL+"/Camera/GetCameraInfoByPoint"
      }).then(res=>{
        if(res.data.code == 200){
            res.data.data.forEach((item,index)=>{
             
              $(".popup-container").append("<div onclick='lookMonitorByMonitorLayer("+item.type+",\""+item.num+"\","+item.road+");' class='monitor-btn' data-channelId='"+item.type+"' data-deviceId="+item.id+" style='padding:4px 8px;text-align:center;font-size:14px;border-radius:2px;background:#108eff;color:#fff;margin:6px 0px;cursor:pointer;'><img src='/img/monitor-video.png' width='24px' style='position:relative;top:-2px;left:-4px;'/>"+item.name+"</div>");
            })
          }
      }) 
    },
    // 获取人员
    loadUserListApi(url,queryName){
      axios({
        method:"get",
        params:{
          area:queryName
        },
        url:BASE_URL+url,
      }).then(data=>{
          if(data.data.code == 200){
            data.data.data.forEach((item,index)=>{
              $(".popup-container").append("<div class='popup-item'>"+item.username+"&nbsp;&nbsp; <span data-phone='"+item.phone+"' onmouseenter='showReadData(this);' onmouseleave='hiddenReadData(this);'>"+item.phone.replace(/(\d{3})\d*(\d{4})/, '$1****$2')+"</span>&nbsp;&nbsp;"+item.area+"&nbsp;&nbsp;"+item.usertype+"</div>");
            })
          }
      })
    },
    // 监控信息
    lookMonitorByMonitorLayer(type,id,road){
        if(type == 1){  //乐橙
          this.channelId = road;
          this.deviceId = id;
          this.LCmonitorboxShow = true;
        }else if(type == 2){  //海康
          this.channelId = road;
          this.deviceId = id;
          this.HKmonitorboxShow = true;
        }
    }
  }
}
</script>

<style scoped>
.el-header{
    width:100%;
    height:112px;
    position:absolute;
    top:0px;
    left:0px;
    z-index:999;
    background-image:url("/img/header-pingyixian.png");
    background-size:100% 112px;
}
.newworkstate{
  float:left;
  line-height:80px;
  color:#fff;
}
.app-name{
  min-width:200px;
  height:80px;
  color:#fff;
  line-height:100px;
  margin:0px auto;
  font-size: 36px;
  font-weight: 600;
  background-image: linear-gradient(180deg, #B8FFFF, #DDFFFF);
  -webkit-background-clip: text;
  text-align: center;
  letter-spacing: 10px;
  color: transparent;
}


.header-info{
  min-width:300px;
  height:40px;
  position:absolute;
  top:10px;
  right:60px;
}

.weather-info{
  min-width:90px;
  height:25px;
  line-height:24px;
  color:#fff;
  float:left;
  text-align: center;
  padding:0px 10px;
}
.weather-info .weater{
  font-size:18px;
}

.time-info{
  width:120px;
  height:25px;
  line-height: 24px;
  color:#fff;
  text-align:center;
  float:left;
  margin:0px 10px;
  margin-right:20px;
  position: relative;
}
.time-info::after{
  content:"";
  width:2px;
  height:25px;
  position:absolute;
  right:0px;
  top:10px;
  background:#B8FFFF;
}
.time-info::before{
  content:"";
  width:2px;
  height:25px;
  position:absolute;
  left:0px;
  top:10px;
  background:#B8FFFF;
}
.time-info .time-time-info{
  font-size:19px;
}

.logout-button{
  width:88px;
  height:25px;
  background-image:url(/img/logout-bg-pingyixian.png);
  background-size:88px 25px;
  float:right;
  cursor:pointer;
  float:left;
  position: relative;
  top:10px;
  cursor:pointer;
  z-index:999999999999999999999999999;
}

/* 快捷按钮 */
.shortcut-button{
  width:140px;
  min-height:140px;
  position:absolute;
  top:230px;
  right:10px;
  z-index:50;

}
.shortcut-button .quick-button{
  width:140px;
  height:40px;
  line-height:40px;
  text-align: center;
  color:#fff;
  background-image:url(/img/tool-button-bg-pingyixian.png);
  background-size:140px 40px;
  margin-bottom:20px;
  cursor:pointer;
}


.tools{
  min-width:250px;
  height: calc( 100vh - 440px);
  position: absolute;
  top:130px;
  left:25px;
}
.task{
    width: 540px;
    height: calc( 100vh - 600px);
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
.tools-box{
  width:250px;
  height:100%;
  float:left;
  margin-right:15px;
}
.huoqing-box{
  width:400px;
  height:240px;
  float:left;
  margin-right:12px;
  position:relative;
}
.merage-box{
  width: 400px;
  min-height: 220px;
  float:left;
  margin-right:12px;
}
.grid-container{
  width:1200px;
  padding-top:100px;
  height:560px;
  position:absolute;
  top:50%;
  left:50%;
  background-image: url(/img/wg-bg.png);
  background-size:100% 100%;
  transform: translate(-50%,-50%);
  z-index:2000;
}
.personnel-container{
  width:525px;
  height:735px;
  position:absolute;
  top: 495px;
  left: 434px;
  background-image: url(/img/goods-pingyixian.png);
  background-size:100% 100%;
  transform: translate(0,-50%);
  z-index:2000;
}
.goods-container{
  width:603px;
  height:457px;
  position:absolute;
  top: 356px;
  left: 434px;
  background-image: url(/img/goods-pingyixian.png);
  background-size:100% 100%;
  transform: translate(0,-50%);
  z-index:2000;
}
.socket-container{
  width: 360px;
  height:200px;
  position:absolute;
  bottom:00px;
  right:60px;
  background-image: url(/img/goods-pingyixian.png);
  background-size:100% 100%;
  transform: translate(0,-50%);
  z-index:2000;
}
.bottom-tools-container{
  /* min-width:200px; */
  height:300px;
  float:left;
  z-index:1999;
}
.uav{
  position: fixed;
  right:60px;
  bottom:100px;
  width:350px;
  height:300px;
  float:left;
  margin-right:15px;
}
/*  */
.left-container-box{
  min-width:400px;
  height:240px;
  margin-bottom:15px;
}
/* 监控 */
.monitor{
  width: 400px;
  height: 240px; 
  margin-right:15px;
  position:relative;
  float:left;
}

/* 编辑弹窗 */
.editor-box{
  width: 400px;
  height: 320px; 
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);

}

.close-button{
  position:absolute;
  right:20px;
  top:14px;
  cursor:pointer;
  color:#fff;
  font-weight: bold;
  width:20px;
  height:20px;
  background:#0a43bfcc;
  line-height:20px;
  text-align:center;
}

/* 火情调度 */
.situation{
  width:480px;
  height:100%;
  float:left;
  margin-right:15px;
  background-image: url(/img/tool-bg.png);
  background-size: 100% 100%;
  padding:15px 15px 0px 15px;
}
.situation-info{
  color:#eee;
  line-height:18px;
  padding:10px 10px 0px 10px;
}
.situation-tab-container{
  width:100%;
  height:50px;
  border-bottom:1px solid #2F5D55;
  margin:0px auto;     
}


.situation-tab{
  width:70px;
  font-size:12px;
  height:50px;
  line-height:50px;
  color:#0ABFB5;
  float:left;
  cursor:pointer;
  text-align:center;
}
/* 最有路线 */
.route{
  width:400px;
  height:240px;
  float:left;
  margin-right:15px;
}
/* 附近水源地 */
.water{
  width:325px;
  height:455px;
  position:absolute;
  left:400px;
  top:200px;
}
/* 火情上报 */
.report{
  position:absolute;
  width:340px;
  height:140px;
  bottom:100px;
  right:70px;
}
.footer{
  width:100%;
  height:50px;
  position:absolute;
  bottom:0px;
  left:0px;
  background-image: url(/img/footer-bg-pingyixian.png);
  background-size:1920px 50px;
  background-position: 1920px 0px;
  z-index:99999;
}

.footer .base-layer-change-button{
  float:right;
  width:150px;
  height:40px;
  background-image:url(/img/tool-button-bg-pingyixian.png);
  background-size:150px 40px;
  text-align:center;
  line-height:40px;
  position:relative;
  top:-30px;
  right:70px;
  font-size:16px;
  cursor:pointer;
  color:#ffffff;
}
</style>