<template>
  <div class="innerHtml">
    <div class="search-box">
      <div class="filter-box">
        <el-input
          size="small"
          @change="idChange()"
          clearable
          placeholder="请输入设备IMEI"
          v-model="f_id"
        >
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-input
          size="small"
          @change="addrChange()"
          clearable
          placeholder="请输入地区检索"
          v-model="addr"
        >
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="selectType" style="cursor: default">
        <span @click="getEquipList('')">
          <img style="cursor: pointer" src="@/assets/images/home/mapView/all.png" />全部
        </span>
        <span @click="getEquipList(item.id)" v-for="item in equipType" :key="item.id">
          <img style="cursor: pointer" :src="item.icon" />
          {{ item.type_name }}
        </span>
      </div>
    </div>
    <div class="mapCover">
      <el-amap
        class="bm-view"
        vid="amapDemo"
        :center="center"
        :amap-manager="amapManager"
        :zoom="zoom"
        :plugin="plugin"
        :events="mapEvents"
      >
        <el-amap-marker vid="component-marker" v-if="componentMarker.position.length" :position="componentMarker.position"  ></el-amap-marker>
      </el-amap>
    </div>
    <!-- 组件关键代码 -->
    <infoWindowComponent ref="infoWindowComponent"></infoWindowComponent>
    <div class="equipBox" v-show="equipsVisible">
      <!-- 杀虫灯详情 -->
      <el-card class="box-card detial" v-if="detailsShow == 2">
        <div class="caption">杀虫灯</div>
        <div>
          <div class="chart">
            <highcharts :options="scdoptions" style="height: 280px"></highcharts>
          </div>
        </div>
        <div class="detialCaption">
          <i class="iconfont icon-zhuti_tiaosepan_o"></i>
          <span>设备状态</span>
        </div>
        <table class="state">
          <tr>
            <td>
              <div class="statusVal">{{ scd_state.ws }}</div>
              <div class="status">工作状态</div>
            </td>
            <td>
              <div class="statusVal">{{ scd_state.tbs }}</div>
              <div class="status">灯管状态</div>
            </td>
            <td>
              <div class="statusVal">{{ scd_state.rps }}</div>
              <div class="status">雨控状态</div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="statusVal">{{ scd_state.tps }}</div>
              <div class="status">温控状态</div>
            </td>
            <td>
              <div class="statusVal">{{ scd_state.dps }}</div>
              <div class="status">倾倒状态</div>
            </td>
            <td>
              <div class="statusVal">{{ scd_state.tt == 0 ? '常亮' : scd_state.tt }}</div>
              <div class="status">定时(h)</div>
            </td>
          </tr>
        </table>
        <div class="bottomBox">
          <el-button type="success" @click="goEquipDetail('scdDetail')" size="mini">查看详情</el-button>
        </div>
      </el-card>
      <!-- 测报灯详情 -->
      <el-card class="box-card detial cbd" v-if="detailsShow == 3">
        <div class="caption">虫情测报</div>
        <div class="detialCaption">
          <i class="iconfont icon-diannao1"></i>
          <span>设备状态</span>
        </div>
        <table class="state">
          <tr>
            <td>
              <div class="statusVal">{{ cbdState.device_status == '0' ? '离线' : '在线' }}</div>
              <div class="status">在线状态</div>
            </td>
            <td>
              <div class="statusVal">{{ cbdState.ts == '0' ? '光控' : '时控' }}</div>
              <div class="status">定时模式</div>
            </td>
            <td>
              <div class="statusVal">{{ cbdState.rps == '0' ? '正常' : '雨控' }}</div>
              <div class="status">雨控状态</div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="statusVal">{{ cbdState.lps == '0' ? '正常' : '光控' }}</div>
              <div class="status">光控状态</div>
            </td>
            <td>
              <div class="statusVal">{{ cbdState.tps == '0' ? '正常' : '温控' }}</div>
              <div class="status">温控状态</div>
            </td>
            <td>
              <div class="statusVal">{{ cbdState.hs == '0' ? '正常' : '加热' }}</div>
              <div class="status">加热状态</div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="statusVal">{{ cbdState.tph }}</div>
              <div class="status">高温限制</div>
            </td>
            <td>
              <div class="statusVal">{{ cbdState.tpl }}</div>
              <div class="status">低温限制</div>
            </td>
            <td>
              <div class="statusVal">{{ cbdState.csq }}</div>
              <div class="status">信号强度</div>
            </td>
          </tr>
        </table>
        <div class="detialCaption">
          <i class="iconfont icon-tupian-xianxing"></i>
          <span>害虫图片</span>
        </div>
        <table class="img" v-if="equipImgs.length > 0">
          <tr>
            <td>
              <div>
                <img :src="equipImgs[0] && equipImgs[0].addr" width="130px" alt />
              </div>
            </td>
            <td>
              <div>
                <img :src="equipImgs[1] && equipImgs[1].addr" width="130px" alt />
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <img :src="equipImgs[2] && equipImgs[2].addr" width="130px" alt />
              </div>
            </td>
            <td>
              <div>
                <img :src="equipImgs[3] && equipImgs[3].addr" width="130px" alt />
              </div>
            </td>
          </tr>
        </table>
        <p v-else>暂无图片</p>
        <div class="bottomBox">
          <el-button type="success" @click="goEquipDetail('cbdDataDetails')" size="mini">查看详情</el-button>
        </div>
      </el-card>
      <!-- 性诱测报详情 -->
      <el-card class="box-card detial" v-if="detailsShow == 4">
        <div class="caption">性诱测报</div>
        <div>
          <div class="chart">
            <highcharts :options="znxyoptions" style="height: 230px"></highcharts>
          </div>
        </div>
        <div class="detialCaption">
          <i class="iconfont icon-diannao1"></i>
          <span>设备状态</span>
        </div>
        <table class="state">
          <tr>
            <td>
              <div class="statusVal">{{ znxyState.proj }}</div>
              <div class="status">设备型号</div>
            </td>
            <td>
              <div class="statusVal">{{ znxyState.ds == 1 ? '开启' : '关闭' }}</div>
              <div class="status">设备开关</div>
            </td>
            <td>
              <div class="statusVal">{{ znxyState.ws == 1 ? '在线' : '离线' }}</div>
              <div class="status">工作状态</div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="statusVal">{{ znxyState.bv }}</div>
              <div class="status">电池电压</div>
            </td>
            <td>
              <div class="statusVal">{{ znxyState.csq }}</div>
              <div class="status">信号强度</div>
            </td>
            <td>
              <div class="statusVal">{{ znxyState.dver }}</div>
              <div class="status">设备版本</div>
            </td>
          </tr>
        </table>
        <div class="bottomBox">
          <el-button type="success" @click="goEquipDetail('xycbDataDetail')" size="mini">查看详情</el-button>
        </div>
      </el-card>
      <!-- 环境监测详情 -->
      <el-card class="box-card detial" v-if="detailsShow == 5">
        <div class="caption">环境监测</div>
        <div class="chart">
          <highcharts :options="qxzoptions" style="height: 400px"></highcharts>
        </div>
        <div class="bottomBox">
          <el-button type="success" @click="goEquipDetail('historyData')" size="mini">查看详情</el-button>
        </div>
      </el-card>
      <!-- 孢子仪详情 -->
      <el-card class="box-card detial" v-if="detailsShow == 7">
        <div class="caption">孢子仪</div>
        <div>
          <div class="chart">
            <highcharts :options="bzyoptions" style="height: 230px"></highcharts>
          </div>
        </div>
        <div class="detialCaption">
          <i class="iconfont icon-diannao1"></i>
          <span>设备状态</span>
        </div>
        <table class="state">
          <tr>
            <td>
              <div class="statusVal">{{ bzyState.batStatus == 1 ? '电量过低' : '正常' }}</div>
              <div class="status">电池状态</div>
            </td>
            <td>
              <div class="statusVal">{{ bzyState.usb_sta == 1 ? '异常' : '正常' }}</div>
              <div class="status">摄像头状态</div>
            </td>
            <td>
              <div class="statusVal">{{ bzyState.on_off == 1 ? '开启' : '关闭' }}</div>
              <div class="status">设备开关</div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="statusVal">{{ bzyState.isOnline == 1 ? '在线' : '离线' }}</div>
              <div class="status">在线状态</div>
            </td>
            <td>
              <div class="statusVal">{{ bzyState.rps == 1 ? '雨控' : '正常' }}</div>
              <div class="status">雨控状态</div>
            </td>
            <td>
              <div class="statusVal">{{ bzyState.dver }}</div>
              <div class="status">设备版本</div>
            </td>
          </tr>
        </table>
        <div class="detialCaption">
          <i class="iconfont icon-tupian-xianxing"></i>
          <span>孢子图片</span>
        </div>
        <table class="img" v-if="equipImgs.length > 0">
          <tr>
            <td>
              <div>
                <img :src="equipImgs[0] && equipImgs[0].addr" width="130px" alt />
              </div>
            </td>
            <td>
              <div>
                <img :src="equipImgs[1] && equipImgs[1].addr" width="130px" alt />
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>
                <img :src="equipImgs[2] && equipImgs[2].addr" width="130px" alt />
              </div>
            </td>
            <td>
              <div>
                <img :src="equipImgs[3] && equipImgs[3].addr" width="130px" alt />
              </div>
            </td>
          </tr>
        </table>
        <p v-else>暂无图片</p>
        <div class="bottomBox">
          <el-button type="success" @click="goEquipDetail('dataDetail')" size="mini">查看详情</el-button>
        </div>
      </el-card>
      <!-- 糖醋测报详情 -->
      <el-card class="box-card detial" v-if="detailsShow == 9">
        <div class="caption">糖醋测报</div>
        <div>
          <div class="chart">
            <highcharts :options="tccboptions" style="height: 230px"></highcharts>
          </div>
        </div>
        <div class="detialCaption">
          <i class="iconfont icon-diannao1"></i>
          <span>设备状态</span>
        </div>
        <table class="state">
          <tr>
            <td>
              <div class="statusVal">{{ tccbState.device_status == 1 ? '在线' : '离线' }}</div>
              <div class="status">在线状态</div>
            </td>
            <td>
              <div class="statusVal">{{ tccbState.device_name }}</div>
              <div class="status">设备名称</div>
            </td>
            <td>
              <div class="statusVal">{{ tccbState.batstatus == 0 ? '正常' : '电量过低' }}</div>
              <div class="status">电池状态</div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="statusVal">{{ tccbState.vbat }}</div>
              <div class="status">电压(V)</div>
            </td>
            <td>
              <div class="statusVal">{{ tccbState.csq }}</div>
              <div class="status">信号强度</div>
            </td>
            <td>
              <div class="statusVal">{{ tccbState.dver }}</div>
              <div class="status">设备版本</div>
            </td>
          </tr>
        </table>
        <div class="bottomBox">
          <el-button type="success" @click="goEquipDetail('tcDataDetail')" size="mini">查看详情</el-button>
        </div>
      </el-card>
    </div>
    <!-- 监控 -->
    <el-dialog title="监控" :visible.sync="jkdetailsShow" :close-on-click-modal="false" width="700px">
      <div>
        <div id="videoCon"></div>
        <!-- <video
					id="myPlayer"
					class="video-js vjs-default-skin"
					controls
					style="width: 100%; height: 300px"
				>
					<source :src="jkSrc" />
        </video>-->
        <div style="text-align: center; margin: 10px">
          <el-button type="primary" @click="goEquipDetail('monitor')" size="small">进入监控详情</el-button>
        </div>
      </div>
    </el-dialog>
    <div class="mapTypebox">
      <el-radio-group v-model="mapType" @change="changeMapType">
        <el-radio :label="0">标准图</el-radio>
        <el-radio :label="1">卫星图</el-radio>
      </el-radio-group>
    </div>
   
  </div>
</template>

<script>
import { qxz } from "static/js/qxz.js";
import { bd09togcj02,gcj02tobd09,wgs84togcj02,gcj02towgs84 } from "./coordtransform_utils.js";  //纠偏方法
// import videojs from 'video.js'
// import 'videojs-contrib-hls'
// import 'video.js/dist/video-js.css'
// videojs.options.flash.swf = '/js/video-js.swf'
//引入组件页面
import infoWindowComponent from '@/components/home/MapInfoWindow.vue'

import VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();
export default {
  components:{
    infoWindowComponent
  },
  data() {
    return {
      amapManager,
      amap: null,
      f_id: "",
      addr: "",
      equips: [],
      equipType: [],
      equipsVisible: false,
      center: [120.298433, 31.680335],
      zoom: 6,
      mapType:1,
      satellite: null,
      roadNet: null,
      plugin: [
        {
          pName: "ToolBar",
          events: {
            init(instance) {
              console.log(instance);
            }
          }
        },
        {
          pName: "Scale",
          events: {
            init(instance) {
              console.log(instance);
            }
          }
        },
        // {
        //     pName: 'MapType',
        //     defaultType: 0,
        //     events: {
        //       init(instance) {
        //         console.log(instance);
        //       }
        //     }
        //   }
      ],
      componentMarker:{
        position:[]
      },
      infoWindow:null,
      xyzTileLayer:null,
      xyzTileLayer2:null,
      mapEvents: {
        init: o => {
          this.xyzTileLayer = new AMap.TileLayer({
            // 图块取图地址
            getTileUrl:
              "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=img_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
            zIndex: 100
          });
          this.xyzTileLayer2 = new AMap.TileLayer({
            // 图块取图地址
            getTileUrl:
              "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cta_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
            zIndex: 101
          });
          o.add(this.xyzTileLayer);
          o.add(this.xyzTileLayer2);
        }
      },
      massMarks:null,
      geocoder:null,
      // 海量点样式表
      equipStyleObject:[
        {
          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型0
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型1
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型2
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/cbd.png"), // 设别类型3
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/xyq.png"), // 设别类型4
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/qxz.png"), // 设别类型5
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/jk.png"), // 设别类型6
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/bzy.png"), // 设别类型7
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/bzy.png"), // 设别类型8
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
        {
          url: require("@/assets/images/home/mapView/tccb.png"), // 设别类型9
          size: new AMap.Size(25, 15), // 图标大小
          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
        },
      ],
      equipImgs: [],
      currEquip: {},
      options: [
        {
          value: "1",
          label: "一号基地"
        },
        {
          value: "2",
          label: "基地二"
        }
      ],
      equipShow: false,
      detailsShow: null,
      jkdetailsShow: false,
      jkSrc: "",
      scd_state: {},
      bzyState: {},
      znxyState: {},
      cbdState: {},
      tccbState: {},
      scdoptions: {},
      bzyoptions: {},
      qxzoptions: {},
      znxyoptions: {},
      tccboptions: {}
    };
  },
  created() {
    this.getEquipType();
  },
  mounted() {
  },
  methods: {
    changeMapType(val){
      let o = amapManager.getMap();
      if(val==0){
        this.xyzTileLayer.hide()
        this.xyzTileLayer2.hide()
      }else{
        this.xyzTileLayer.show()
        this.xyzTileLayer2.show()
      }
    },
    idChange() {
      this.getEquipList("");
    },
    addrChange() {
      this.geocoder = new AMap.Geocoder({
          city: "全国", //城市设为北京，默认：“全国”
      });
      var _this = this;
      if(!this.addr){
        this.componentMarker.position = []
        return false;
      }
      this.geocoder.getLocation(this.addr, function(status, result) {
          if (status === 'complete'&&result.geocodes.length) {
              var lnglat = result.geocodes[0].location
              console.log([lnglat.lng,lnglat.lat])
              _this.componentMarker.position = [lnglat.lng,lnglat.lat];
          }else{
              log.error('根据地址查询位置失败');
          }
      });
      // local.search(this.addr);
    },
    getEquipType() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=home.homes.user_device_type"
      }).then(res => {
        if (res.data.message == "") {
          let data = res.data.data;
          this.equipType = data.map(item => {
            this.iconFormat(item.id, item);
            return item;
          });
        }
      });
    },
    lnglatFormat(item){
      var arr = [];
      arr.push(item.lng||0)
      arr.push(item.lat||0)
      item.lnglat = arr
    },
    iconFormat(equip_ip, item) {
      switch (equip_ip + "") {
        case "2":
          item.icon = require("@/assets/images/home/mapView/scd.png");
          break;
        case "3":
          item.icon = require("@/assets/images/home/mapView/cbd.png");
          break;
        case "4":
          item.icon = require("@/assets/images/home/mapView/xyq.png");
          break;
        case "5":
          item.icon = require("@/assets/images/home/mapView/qxz.png");
          break;
        case "6":
          item.icon = require("@/assets/images/home/mapView/jk.png");
          break;
        case "7":
          item.icon = require("@/assets/images/home/mapView/bzy.png");
          break;
        case "9":
          item.icon = require("@/assets/images/home/mapView/tccb.png");
          break;
      }
    },
    getEquipList(type) {
      this.componentMarker.position = []
      if(this.infoWindow){
        this.infoWindow.close()
      }
      let o = amapManager.getMap();
      o.setZoom(4);
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=home.homes.equip_map_location",
        data: this.qs.stringify({
          equip_type: type,
          device_id: this.f_id
        })
      }).then(res => {
        if (res.data.message == "") {
          let data = res.data.data;
          this.equipShow = false;
          this.equips = data.map(item => {
            this.iconFormat(item.device_type_id, item);
            item.style = item.device_type_id
            if(item.gps_type == 1){ //GPS
              console.log(wgs84togcj02)
              item.lnglat = wgs84togcj02(item.lng,item.lat)
            }else{
              // this.lnglatFormat(item);
            }
            return item;
          });
          if(this.massMarks){
            this.massMarks.clear()
          }
          console.log(this.equips)
          this.massMarks = new AMap.MassMarks(this.equips, {
            zIndex: 199, // 海量点图层叠加的顺序
            zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
            style: this.equipStyleObject // 设置样式对象
          });
          this.massMarks.setMap(o)
          var _this = this
          this.massMarks.on('click',e =>{
            this.equipMarkerClick(e.data)
            this.openInfo(e.data)
            console.log(e.data)
          })
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    // handler({ BMap, map }) {
    //   this.BMap = BMap;
    //   this.map = map;
    //   this.getEquipList("");
    // },
    //请求设备图片
    getPhoto(device_id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.forecast_system.equip_photo",
        data: this.qs.stringify({
          device_id,
          ret: "screen",
          page_number: 4
        })
      }).then(res => {
        if (res.data.message == "") {
          this.equipImgs = res.data.data.data;
        }
      });
    },
    goEquipDetail(url) {
      if (url == "monitor") {
        this.$router.push({
          path: `/index/${url}/`,
          query: {
            id: this.currEquip.device_id,
            jktype: this.currEquip.jktype
          }
        });
      } else if (url == "historyData") {
        this.$router.push(`/index/${url}/${this.currEquip.device_id}`);
      } else {
        this.$router.push(
          `/index/${url}/${this.currEquip.device_id}/${this.currEquip.d_id}`
        );
      }
    },
    scdOption(data) {
      this.scdoptions = {
        chart: {
          type: "line"
        },
        title: {
          text: "击虫次数"
        },
        subtitle: {
          text: ""
        },
        xAxis: {
          categories: data.time
        },
        yAxis: {
          title: {
            text: ""
          }
        },
        plotOptions: {
          line: {
            dataLabels: {
              // 开启数据标签
              enabled: true
            },
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            enableMouseTracking: true
          }
        },
        series: [
          {
            name: "击虫次数",
            data: data.ct
          }
        ]
      };
    },
    bzyOption(data) {
      this.bzyoptions = {
        chart: {
          type: "line"
        },
        title: {
          text: ""
        },
        subtitle: {
          text: ""
        },
        xAxis: {
          categories: data.time
        },
        yAxis: {
          title: {
            text: ""
          }
        },
        plotOptions: {
          line: {
            dataLabels: {
              // 开启数据标签
              enabled: true
            },
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            enableMouseTracking: true
          }
        },
        series: [
          {
            name: "环境温度",
            data: data.temperature
          },
          {
            name: "环境湿度",
            data: data.humidity
          }
        ]
      };
    },
    qxzOption(data) {
      this.qxzoptions = {
        chart: {
          type: "line"
        },
        title: {
          text: ""
        },
        subtitle: {
          text: ""
        },
        xAxis: {
          categories: data[0].time
        },
        yAxis: {
          title: {
            text: ""
          }
        },
        plotOptions: {
          line: {
            dataLabels: {
              // 开启数据标签
              enabled: true
            },
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            enableMouseTracking: true
          }
        },
        series: [
          {
            name: data[0].tex,
            data: data[0].val
          },
          {
            name: data[1].tex,
            data: data[1].val
          },
          {
            name: data[3].tex,
            data: data[3].val
          },
          {
            name: data[4].tex,
            data: data[4].val
          },
          {
            name: data[5].tex,
            data: data[5].val
          },
          {
            name: data[6].tex,
            data: data[6].val
          }
        ]
      };
    },
    znxyOption(data) {
      this.znxyoptions = {
        chart: {
          type: "line"
        },
        title: {
          text: ""
        },
        subtitle: {
          text: ""
        },
        xAxis: {
          categories: data.time
        },
        yAxis: {
          title: {
            text: ""
          }
        },
        plotOptions: {
          line: {
            dataLabels: {
              // 开启数据标签
              enabled: true
            },
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            enableMouseTracking: true
          }
        },
        series: [
          {
            name: "环境温度",
            data: data.temperature
          },
          {
            name: "环境湿度",
            data: data.humidity
          }
        ]
      };
    },
    tccbOption(ChartData) {
      this.tccboptions = {
        chart: {
          zoomType: "x"
        },
        xAxis: {
          crosshair: true, //十字基准线
          type: "datetime",
          dateTimeLabelFormats: {
            //根据时间间距X轴自动显示哪种格式
            millisecond: "%H:%M:%S.%L",
            second: "%H:%M:%S",
            minute: "%H:%M",
            hour: "%H:%M",
            day: "%m-%d",
            week: "%m-%d",
            month: "%Y-%m",
            year: "%Y"
          }
        },
        yAxis: {
          title: {
            text: ""
          }
        },
        legend: {
          // layout: 'vertical',
          align: "right",
          verticalAlign: "top"
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false
            },
            pointStart: 2010 //该参数定义了数据点的起点
          }
        },
        series: [
          {
            name: ChartData[0].name,
            data: ChartData[0].dat
          },
          {
            name: ChartData[1].name,
            data: ChartData[1].dat
          },
          {
            name: ChartData[2].name,
            data: ChartData[2].dat
          }
        ],
        colors: ["#00e29d", "#6cbbff", "#ff3f3f"],
        credits: {
          //去掉默认的highcharts.com
          enabled: false
        },
        tooltip: {
          // crosshairs: true,
          shared: true, //折线共享
          headerFormat: "<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>"
        },
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500
              },
              chartOptions: {
                legend: {
                  layout: "horizontal",
                  align: "center",
                  verticalAlign: "bottom"
                }
              }
            }
          ]
        }
      };
    },
    /**
    打开消息窗体
    我这边实现的是点击marker事件后，弹出消息框
    注：positionResult 为marker点击事件的 event
    */
    openInfo(positionResult){
        let o = amapManager.getMap();
        var that = this
        let infoWindow = new AMap.InfoWindow({
            isCustom:true,
            content: that.$refs.infoWindowComponent.$el, 
            offset: new AMap.Pixel(5, -11)
        });
        infoWindow.open(o, positionResult.lnglat);
        this.infoWindow = infoWindow;
        // 调用组件方法，初始化组件页面的infoWindow等数据
        that.$refs.infoWindowComponent.initialize({
          currEquip: positionResult,
          visible: true,
          infoWindow: infoWindow
        });
    },
    equipMarkerClick(item) {
      this.equipShow = true; //图标上设备信息框
      this.equipsVisible = true; //右侧设备弹框
      this.detailsShow = item.device_type_id; //右侧弹框根据不同设备类型,显示设备信息
      this.currEquip = item;
      //设备信息折线图
      if (item.device_type_id == 2) {
        //杀虫灯
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=base.bases.base_map_equip",
          data: this.qs.stringify({
            equip_id: item.device_id,
            equip_type: 2
          })
        }).then(res => {
          if (res.data.message == "") {
            let ct_data = res.data.data.ct_data;
            let status = res.data.data.data[0];
            this.scd_state = status;
            let ct_option = {
              time: [],
              ct: []
            };
            for (let item of ct_data) {
              ct_option.time.push(
                this.formatTime(item.addtime * 1000, "MM-dd")
              );
              ct_option.ct.push(item.ct);
            }
            this.scdOption(ct_option);
          } else {
            this.$message.error(res.data.message);
          }
        });
      } else if (item.device_type_id == 3) {
        //测报灯
        this.getPhoto(item.device_id);
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=forecast.worm_lamp.device_status_data",
          data: this.qs.stringify({
            device_id: item.device_id
          })
        })
          .then(res => {
            var data = res.data.data;
            this.cbdState = data;
          })
          .catch(err => {
            console.log(err);
          });
      } else if (item.device_type_id == 4) {
        //性诱测报
        this.$axios({
          method: "POST",
          url:
            "/api/api_gateway?method=forecast.worm_lamp.device_polyline_data",
          data: this.qs.stringify({
            device_type_id: 4,
            d_id: item.d_id
          })
        }).then(res => {
          if (res.data.message == "") {
            let data = res.data.data;
            let obj = {
              time: [],
              temperature: [],
              humidity: []
            };
            data.forEach(item => {
              obj.time.push(this.formatTime(item.addtime * 1000, "MM-dd"));
              obj.temperature.push(item.temperature);
              obj.humidity.push(item.humidity);
            });
            this.znxyOption(obj);
          }
        });
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=forecast.worm_lamp.device_history_data",
          data: this.qs.stringify({
            device_type_id: 4,
            device_id: "86626204545021997",
            page_size: 1
          })
        }).then(res => {
          let dht = res.data.data.data[0].d_h_t;
          this.znxyState = dht;
        });
      } else if (item.device_type_id == 5) {
        //环境监测
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=weather.weather.qxz_display",
          data: this.qs.stringify({
            device_id: 16066009
          })
        }).then(res => {
          let arr = new Array();
          let conf = res.data.data.conf;
          let dat = res.data.data.dat;
          let e_info = res.data.data.sta;
          let hisData = res.data.data.data2;
          this.on_num = res.data.data.on;
          this.off_num = res.data.data.off;
          this.all_num = res.data.data.all;
          //历史数据
          let charArr = [];
          let category = [];
          for (let item of hisData) {
            for (let item2 in item.dat) {
              if (item.dat[item2]) {
                let arr = item.dat[item2].split("#");
                if (category.indexOf(item2) == -1) {
                  category.push(item2);
                  let obj = {
                    tex: qxz[arr[1]][1],
                    unit: qxz[arr[1]][2],
                    val: [Number(arr[0])],
                    time: [this.formatTime(item.time * 1000, "MM-dd")]
                  };
                  charArr.push(obj);
                } else {
                  charArr[category.indexOf(item2)].val.push(Number(arr[0]));
                  charArr[category.indexOf(item2)].time.push(
                    this.formatTime(item.time * 1000, "MM-dd")
                  );
                }
              }
            }
          }
          this.qxzOption(charArr);
        });
      } else if (item.device_type_id == 7) {
        //孢子仪
        this.getPhoto(item.device_id);
        //折线图
        this.$axios({
          method: "POST",
          url:
            "/api/api_gateway?method=forecast.worm_lamp.device_polyline_data",
          data: this.qs.stringify({
            device_type_id: 7,
            d_id: item.d_id
          })
        }).then(res => {
          let data = res.data.data;
          let obj = {
            time: [],
            temperature: [],
            humidity: []
          };
          data.forEach(item => {
            obj.time.push(this.formatTime(item.addtime * 1000, "MM-dd"));
            obj.temperature.push(item.temperature);
            obj.humidity.push(item.humidity);
          });
          this.bzyOption(obj);
        });
        //状态
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=forecast.worm_lamp.device_history_data",
          data: this.qs.stringify({
            device_type_id: 7,
            device_id: item.device_id,
            page_size: 1
          })
        }).then(res => {
          if (res.data.message == "") {
            let data = res.data.data.data[0].d_h_t;
            this.bzyState = data;
          }
        });
      } else if (item.device_type_id == 9) {
        //糖醋测报
        //设备状态
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=forecast.worm_lamp.tccb_device",
          data: this.qs.stringify({
            device_id: item.device_id
          })
        }).then(res => {
          if (res.data.message == "") {
            var data = res.data.data[0];
            this.tccbState = data;
          }
        });
        //折线图，历史数据
        this.$axios({
          method: "POST",
          url:
            "/api/api_gateway?method=forecast.worm_lamp.device_polyline_data",
          data: this.qs.stringify({
            device_type_id: 9,
            d_id: item.d_id
          })
        }).then(res => {
          if (res.data.message == "") {
            var ChartData = [
              {
                name: "温度（°C）",
                dat: []
              },
              {
                name: "湿度（RH）",
                dat: []
              },
              {
                name: "信号强度",
                dat: []
              }
            ];
            var data = res.data.data;
            for (let item of data) {
              ChartData[0].dat.unshift([
                item.addtime * 1000 + 8 * 3600000,
                item.temperature
              ]);
              ChartData[1].dat.unshift([
                item.addtime * 1000 + 8 * 3600000,
                item.humidity
              ]);
              ChartData[2].dat.unshift([
                item.addtime * 1000 + 8 * 3600000,
                item.others
              ]);
            }
            this.tccbOption(ChartData);
          }
        });
      }

      if (item.device_type_id == 6) {
        //监控
        this.$axios({
          url: "/api/api_gateway?method=camera.camera_manage.addr_camera",
          method: "POST",
          data: this.qs.stringify({ device_id: this.currEquip.device_id })
        }).then(res => {
          if (res.data.message == "") {
            let data = eval("(" + res.data.data + ")");
            let hlsHd = data.hlsHd;
            // this.jkSrc = hlsHd
            // console.log(this.jkSrc)
            let playHtml = `<video id="myPlayer"  muted autoplay  poster='' controls playsInline  webkit-playsinline src="${hlsHd}"  style="width:100%; height:100%;"></video>`;
            console.log(hlsHd);
            document.getElementById("videoCon").innerHTML = playHtml;
            setTimeout(() => {
              console.log(document.getElementById("myPlayer"));
              let player = new EZUIPlayer("myPlayer");
              console.log(player);
              player.play();
              // let player = videojs('myPlayer')
              // player.src({ src: hlsHd, type: 'application/x-mpegURL' })
              // player.play()
            }, 1000);
          }
        });
        this.jkdetailsShow = true;
      } else {
        this.jkdetailsShow = false;
      }
    }
  }
};
</script>

<style lang='less' scoped>
.mapTypebox{
  position: absolute;
  right: 20px;
  top:70px;
  background: #fff;
  padding: 5px;
  border-radius: 5px;
}
.innerHtml {
  width: 100%;
  height: 100%;
  position: relative;
  .mapCover {
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 20px;
    .bm-view {
      width: 100%;
      height: 100%;
      min-height: 600px;
    }
  }
  .equipBox {
    position: absolute;
    right: 53px;
    top: 12%;
    width: 300px;
    .baseSearch {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 10px;
      > i {
        width: 30px;
        text-align: center;
        font-size: 20px;
        color: #35a478;
      }
      /deep/.el-select {
        width: 230px;
        .el-input__inner {
          border: none;
          padding-left: 4px;
        }
      }
      .searchBaseBtn {
        padding: 0 20px;
        background: #35a478;
        line-height: 36px;
        color: #fff;
        cursor: pointer;
      }
    }
    .caption {
      text-align: center;
      margin-bottom: 15px;
    }
    .bottomBox {
      text-align: center;
      button {
        background-color: #35a478;
        border-color: #35a478;
      }
    }
    // 基地信息
    .BaseInfoMsgItem {
      display: flex;
      width: 290px;
      margin-bottom: 3px;
      > i {
        font-size: 20px;
        color: #35a478;
      }
      > div {
        flex: 1;
        .BaseInfoMsgItemRight {
          display: flex;
          font-size: 14px;
          line-height: 24px;
          > span {
            width: 76px;
            text-align: right;
            color: #000;
          }
          > div {
            flex: 1;
          }
        }
      }
    }
  }
}
.search-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  .filter-box {
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }
  .selectType {
    span {
      img {
        width: 26px;
        margin-right: 2px;
      }
      margin-left: 20px;
    }
  }
}

// 测报灯信息弹窗
.detial {
  table {
    width: 100%;
    text-align: center;
  }
  .detialCaption {
    font-weight: 600;
    margin-bottom: 5px;
    i {
      color: #35a478;
    }
  }
  .state {
    td {
      padding: 10px 0;
      font-size: 14px;
      line-height: 22px;
      .statusVal {
        color: #35a478;
        font-size: 16px;
      }
    }
  }
  .img {
    td {
      padding: 10px 0;
    }
  }
}

</style>