MingGao_vue/minggao/src/page/homepage/facilitydistribute.vue

<!--  -->
<template>
  <div
    class="pestbox"
    v-loading="pestboxloading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <!-- <div
      :style="{ height: '100%', width: '100%' }"
      id="mychart"
      ref="mychart"
    ></div> -->
    <div class="amap-demo" id="mapContainer2"></div>
    <div class="searchbox">
      <el-select
        v-model="point_type"
        placeholder="请选择"
        size="mini"
        clearable
        @change="handlePointTypeChange"
      >
        <el-option
          v-for="item in pointTypeOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="typevalue"
        placeholder="请选择设备类型"
        size="mini"
        clearable
        @change="search"
      >
        <el-option
          v-for="item in typeoptions"
          :key="item.type_id"
          :label="item.type_name"
          :value="item.type_id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="versionsvalue2"
        placeholder="请选择隶属组织"
        size="mini"
        clearable
        filterable
        @change="search"
      >
        <el-option
          v-for="item in versionsoptions2"
          :key="item.org_id"
          :label="item.org_name"
          :value="item.org_id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="statevalue"
        placeholder="请选择设备状态"
        size="mini"
        clearable
        @change="search"
      >
        <el-option
          v-for="item in stateoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-select
        v-model="inoffvalue"
        placeholder="请选择所在监测点"
        size="mini"
        clearable
        filterable
        @change="search"
      >
        <el-option
          v-for="item in inoffoptions"
          :key="item.point_id"
          :label="item.point_name"
          :value="item.point_id"
        >
        </el-option>
      </el-select>

      <div class="inputbox">
        <el-input
          v-model="idinput"
          placeholder="请输入设备编号"
          size="mini"
        ></el-input>
      </div>
      <el-button type="info" @click="search" size="mini">搜索</el-button>
      <el-button @click="reset" size="mini">重置</el-button>
    </div>
    <div class="tallybox">
      <div
        class="tallybox_item"
        v-for="(item, key) in deviceTypeDataSource"
        :key="key"
      >
        <!-- <img src="../../../static/images/homepage/cbd.png" alt="" /> -->
        <!-- <d-icon type="location"></d-icon> -->
        <i
          class="minggao-iconfont minggao-icontuding"
          :style="{ color: item.colour }"
        ></i>
        <p>
          {{ item.type_name }}:<span
            :style="{ color: item.colour || '#27c2ff' }"
            >{{ item.num }}台</span
          >
        </p>
      </div>
      <!-- <div class="tallybox_item">
        <img src="../../../static/images/homepage/ybq.png" alt="" />
        <p>
          实蝇诱捕器:<span style="color: #ff00ff">{{ ybqnum }}台</span>
        </p>
      </div>
      <div class="tallybox_item" v-if="isShowMonitorInfo">
        <img src="../../../static/images/homepage/jk.png" alt="" />
        <p>
          监控设备:<span style="color: #e94c3e">{{ jknum }}台</span>
        </p>
      </div> -->
    </div>

    <div class="path-box">
      <div
        class="tracklistbox"
        :class="{ hide: !pathBoxVisible }"
        v-loading="trackloading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-date-picker
          v-model="tracktime"
          type="date"
          size="mini"
          placeholder="选择日期"
          @change="timechange"
        >
        </el-date-picker>
        <div class="tracklist">
          <div class="tracklist_tilte" v-if="tracklistdata.length == 0">
            暂无数据
          </div>
          <div
            class="tracklist_item"
            v-for="(item, index) in tracklistdata"
            :key="index"
          >
            <div class="tracklist_item_text">
              <p
                :style="{
                  'background-color':
                    tracklistdata_backups[trackpage] &&
                    tracklistdata_backups[trackpage][index] &&
                    tracklistdata_backups[trackpage][index].color
                }"
              >
                {{ item.user_name.slice(0, 1) }}
              </p>
              <p>{{ item.user_name }}</p>
            </div>
            <div
              :class="
                (tracklistdata_backups[trackpage] &&
                  tracklistdata_backups[trackpage][index] &&
                  tracklistdata_backups[trackpage][index].type &&
                  'tracklist_btn tracklist_btn_none') ||
                  'tracklist_btn'
              "
              @click="seeteack(item, index)"
            >
              {{
                (tracklistdata_backups[trackpage] &&
                  tracklistdata_backups[trackpage][index] &&
                  tracklistdata_backups[trackpage][index].type &&
                  '关闭') ||
                  '查看轨迹'
              }}
            </div>
          </div>
        </div>
        <el-pagination
          v-if="tracklistdata.length"
          background
          layout="prev, pager, next"
          :total="total"
          :key="pagekey"
          :page-size="5"
          :small="true"
          :pager-count="3"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      <img
        src="~@/assets/images/home/path.png"
        alt=""
        class="path-box__action"
        @click="pathBoxVisible = !pathBoxVisible"
      />
    </div>
    <div class="piebox">
      <p
        :class="
          pietf ? 'iconbox el-icon-arrow-right' : 'iconbox el-icon-arrow-left'
        "
        @click="pietf = !pietf"
        style="cursor: pointer"
      ></p>
      <div class="tishi" :style="{ width: width }" v-if="baseinfo.length == 0">
        <!-- <p>请点击设备标点，查看设备详情</p> -->
        <p>暂无数据</p>
      </div>
      <div
        v-else
        :style="{ width: width }"
        id="mychartpie"
        ref="mychartpie"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <div class="infobox">
          <h3>设备信息</h3>
          <p>
            <span>设备名称：</span
            ><span>{{
              baseinfo[0].device_name == '' ? '诱捕器' : baseinfo[0].device_name
            }}</span>
          </p>
          <p>
            <span>设备编号：</span><span>{{ baseinfo[0].device_id }}</span>
          </p>
          <p>
            <span>所属监测点：</span><span>{{ baseinfo[0].poin_name }}</span>
          </p>
          <p>
            <span>隶属组织：</span
            ><span
              v-for="item in baseinfo[0].temp_org_list"
              :key="item.org_id"
              style="margin-rignt: 10px"
              >{{ item.org_name }}</span
            >
          </p>
        </div>
        <div class="wornbox" v-if="device_type_id == 4">
          <h3>有害生物监测信息（统计）</h3>
          <div class="wornbox_item">
            <p v-for="(item, index) in baseinfo[0].pest_list" :key="index">
              <span>{{ item.pest_name }}</span
              ><span>{{ item.sum }}</span>
            </p>
            <p
              style="color: #ccc; width: 100%; text-align: center"
              v-if="baseinfo[0].pest_list.length == 0"
            >
              暂无数据
            </p>
          </div>
        </div>
        <div class="cbdinfobox" v-if="device_type_id == 3">
          <h3>设备状态</h3>
          <div class="cbdinfobox_item">
            <p>
              环境温度：<span>{{ baseinfo[0].device_data.at }} ℃</span>
            </p>
            <p>
              环境湿度：<span>{{ baseinfo[0].device_data.ah }} %RH</span>
            </p>
          </div>
          <div class="cbdinfobox_item">
            <p>
              设备开关：<span>{{
                baseinfo[0].device_data.ds == 0 ? '关机' : '开机'
              }}</span>
            </p>
            <p>
              工作状态：<span>{{
                baseinfo[0].device_data.ws == 0 ? '待机' : '工作'
              }}</span>
            </p>
          </div>
          <div class="cbdinfobox_item">
            <p>
              信号强度：<span>{{ baseinfo[0].device_data.csq }}</span>
            </p>
            <p>
              最新上报时间：<span>{{ baseinfo[0].uptime }}</span>
            </p>
          </div>
        </div>
        <div class="cbdimg" v-if="device_type_id == 3">
          <h3 class="title">最新虫情图片</h3>
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item
              v-for="(item, index) in baseinfo[0].photo_data"
              :key="index"
            >
              <img :src="item.addr" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="videoBonbox" v-if="device_type_id == 6">
          <h3 class="title">实时监控</h3>
          <div id="videoBon"></div>
        </div>
      </div>
    </div>
    <div class="measurebox">
      <div
        :class="
          measure_index == 1 ? 'measurebox_item selmea' : 'measurebox_item'
        "
        @click="measure_distance"
      >
        <i class="iconfont icon-ceju"></i>
        <p>测距</p>
      </div>
      <p class="measurebox_line"></p>
      <div
        :class="
          measure_index == 2 ? 'measurebox_item selmea' : 'measurebox_item'
        "
        @click="measure_area"
      >
        <i class="iconfont icon-mianji"></i>
        <p>测面</p>
      </div>
      <!-- <p @click="measure_close">关闭</p> -->
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import * as echarts from 'echarts';
import '../../../node_modules/echarts/map/js/china';
import DIcon from '@/components/Icon';
import { normalization } from '@/util/helpers';
import { map, assign, filter } from 'lodash-es';
import { pointTypeOptions } from '@/util/constants';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { DIcon },
  data() {
    //这里存放数据
    return {
      pietf: false,
      width: '0px',
      point_type: '', //监测点类型 1 表示 林木害虫监测点。2 表示 实蝇监测点
      pointTypeOptions: pointTypeOptions,
      inoffvalue: '', //监测点 选择
      inoffoptions: [], //监测点列表
      versionsvalue2: '', //隶属组织 选择
      versionsoptions2: [], //隶属组织列表
      statevalue: '', //设备状态
      stateoptions: [
        {
          value: '0',
          label: '停用(离线)'
        },
        {
          value: '1',
          label: '正常(在线)'
        }
      ], //设备状态列表
      typevalue: '', //设备类型
      typeoptions: [], //设备类型 列表
      idinput: '', //设备编号
      baseinfo: [
        {
          device_data: {
            at: '',
            ah: '',
            ds: '',
            ws: '',
            csq: ''
          },
          uptime: '',
          pest_list: []
        }
      ], //设备详情
      loading: false,
      device_type_id: 0,
      myVideo2: {},
      pestboxloading: false,
      center: [114.052758, 22.545817],
      cbdnum: 0,
      jknum: 0,
      ybqnum: 0,
      measure_index: 0,
      mouseTool: null,
      tracktime: '',
      tracklistdata: [],
      color: [
        'rgb(197, 92, 142)',
        'rgb(197, 32, 157)',
        'rgb(206, 12, 55)',
        'rgb(146, 78, 23)',
        'rgb(173, 64, 221)',
        'rgb(234, 169, 70)',
        'rgb(123, 133, 244)',
        'rgb(107, 27, 92)',
        'rgb(13, 165, 14)',
        'rgb(53, 52, 106)',
        'rgb(237, 169, 161)',
        'rgb(157, 84, 17)',
        'rgb(14, 187, 149)',
        'rgb(46, 11, 221)',
        'rgb(208, 202, 126)',
        'rgb(17, 118, 32)',
        'rgb(7, 31, 67)',
        'rgb(75, 40, 99)',
        'rgb(224, 98, 40)',
        'rgb(234, 3, 190)',
        'rgb(97, 76, 115)',
        'rgb(9, 117, 139)',
        'rgb(165, 7, 62)',
        'rgb(7, 107, 42)'
      ],
      trackpage: 1,
      pagekey: 1,
      total: 8,
      tracklistdata_backups: {},
      arealistmouse: {},
      trackloading: true,
      isShowMonitorInfo: false,
      // 新增字段
      deviceTypeDataSource: {},
      pathBoxVisible: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    pietf: function(val) {
      // console.log(this.width)
      if (val) {
        this.width = '500px';
      } else {
        this.width = '0';
        if (this.myVideo2[`myPlayer`]) {
          this.myVideo2[`myPlayer`].stop();
          setTimeout(() => {
            console.log('关闭关闭关闭');
            this.myVideo2[`myPlayer`].stop();
          }, 5000);
        } else {
          // setTimeout(() => {
          //   console.log('关闭关闭关闭');
          //   this.myVideo2[`myPlayer`].stop();
          // }, 5000);
        }
      }
      // console.log(this.width)
    },
    device_type_id: function(val) {
      // console.log(val);
      if (val != 6) {
        if (this.myVideo2[`myPlayer`]) {
          this.myVideo2[`myPlayer`].stop();
        }
      }
    }
  },
  //方法集合
  methods: {
    ToDigital(lnglat) {
      // console.log(lnglat);
      if (!isNaN(lnglat)) {
        return lnglat;
      }
      lnglat = lnglat.toString();
      var strDu, strFen, strMiao;
      var duindex = lnglat.indexOf('°'); //字符度的下标
      var fenindex = lnglat.indexOf('′'); //字符分的下标
      var miaoindex = lnglat.indexOf('″'); //字符秒的下标
      strDu = lnglat.slice(0, duindex);
      strFen = lnglat.slice(duindex + 1, fenindex);
      strMiao = lnglat.slice(fenindex + 1, miaoindex);
      // len = len > 6 || typeof len == "undefined" ? 6 : len; //精确到小数点后最多六位
      strDu =
        typeof strDu == 'undefined' || strDu == '' ? 0 : parseFloat(strDu);
      strFen =
        typeof strFen == 'undefined' || strFen == ''
          ? 0
          : parseFloat(strFen) / 60;
      strMiao =
        typeof strMiao == 'undefined' || strMiao == ''
          ? 0
          : parseFloat(strMiao) / 3600;
      var digital = strDu + strFen + strMiao;
      if (digital == 0) {
        return '';
      } else {
        return digital.toFixed(6);
      }
    },
    initmap() {
      console.log('----------- init map');
      var map = new AMap.Map(document.getElementById('mapContainer2'), {
        center: this.center,
        resizeEnable: true,
        zoom: 12.5,
        // lang: 'en',
        mapStyle: 'amap://styles/fresh',
        layers: []
      });

      console.log(map, 'init map -------------------- init sdsdsa');
      //new AMap.TileLayer.Satellite(),new AMap.TileLayer.RoadNet()
      AMap.plugin(['AMap.ToolBar', 'AMap.Geocoder'], () => {
        map.addControl(new AMap.ToolBar());
        this.geocoder = new AMap.Geocoder({
          city: '全国',
          radius: 1000
        });
      });
      AMap.plugin(['AMap.MouseTool'], () => {
        this.mouseTool = new AMap.MouseTool(map);
        this.mouseTool.on('draw', this.drawend());
      });
      // map.on("click", (e) => {
      //   console.log(e);
      // });
      this.map = map;
      this.getbaselist();
    },
    getbaselist() {
      this.pestboxloading = true;
      this.$axios({
        method: 'POST',
        url:
          '/api/api_gateway?method=monitor_manage.home_map.device_distribute_new',
        data: this.qs.stringify({
          trap_number: this.idinput, //              非必传(string)               设备编号 搜索项
          point_id: this.inoffvalue, //                  非必传(string)               设备所属监测点id 搜索项
          org_id: this.versionsvalue2, //                    非必传(string)               设备所属组织id   搜索项
          trap_status: this.statevalue, //               非必传(num)                  诱捕器状态  0停用 1正常 搜索项
          type_id: this.typevalue //                   非必传(num)                  3测报灯  4诱捕器  6监控 搜索项
        })
      }).then(res => {
        this.pestboxloading = false;
        // this.init(res.data.data);
        console.log(res.data.data);
        var resdata = res.data.data;
        // var data = [];
        this.cbdnum = 0;
        this.jknum = 0;
        this.ybqnum = 0;
        // this.map.clearMap();
        this.map && this.map.clearMap();
        this.mouseTool.close(true);

        //rest pestNum
        this.resetdeviceTypeNum();

        if (resdata.huizhou) {
          for (var i = 0; i < resdata.huizhou.length; i++) {
            this.setmak(resdata.huizhou[i]);
          }
        }
        if (resdata.shenzhen) {
          for (var i = 0; i < resdata.shenzhen.length; i++) {
            this.setmak(resdata.shenzhen[i]);
          }
        }
        if (resdata.shanwei) {
          for (var i = 0; i < resdata.shanwei.length; i++) {
            this.setmak(resdata.shanwei[i]);
          }
        }
        for (var key in this.tracklistdata_backups) {
          var list = this.tracklistdata_backups[key];
          for (var j = 0; j < list.length; j++) {
            list[j].type = false;
          }
        }
        // this.map.add(marker);
      });
    },
    resetdeviceTypeNum() {
      for (const key in this.deviceTypeDataSource) {
        this.deviceTypeDataSource[key].num = 0;
      }
    },
    setmak(data) {
      // console.log(
      //   data.device_type_id,
      //   'set mark',
      //   !this.deviceTypeDataSource[data.device_type_id],
      //   this.deviceTypeDataSource
      // );
      if (
        data.device_type_id === 6 ||
        !this.deviceTypeDataSource[data.device_type_id]
      ) {
        return;
      }

      var icon = '';
      if (
        data.device_type_id &&
        this.deviceTypeDataSource[data.device_type_id]
      ) {
        this.deviceTypeDataSource[data.device_type_id].num++;
      }

      if (data.device_type_id == 2) {
        // 风吸式太阳诱虫灯
        icon = require('../../assets/images/home/location-fengxi.png');
        // this.cbdnum++;
      } else if (data.device_type_id == 3) {
        //智能测报灯
        icon = require('../../assets/images/home/location-zhinengcebaodeng.png');
        // this.ybqnum++;
      } else if (data.device_type_id == 8) {
        //林木害虫诱捕器
        icon = require('../../assets/images/home/location-linmu.png');
        // this.ybqnum++;
      } else if (data.device_type_id == 9) {
        //实蝇诱捕器
        icon = require('../../assets/images/home/location-shiying.png');
        // this.ybqnum++;
      } else if (data.device_type_id == 10) {
        //实蝇监测智能诱捕器
        icon = require('../../assets/images/home/location-shiyingjiance.png');
        // this.ybqnum++;
      }
      // else if (data.device_type_id == 6) {
      //   //监控
      //   icon = '../../../static/images/homepage/jk.png';
      //   this.jknum++;

      //   if (!this.isShowMonitorInfo) {
      //     this.isShowMonitorInfo = true;
      //   }
      // }

      var iconInstance = new AMap.Icon({
        size: new AMap.Size(20, 20), // 图标尺寸
        imageSize: new AMap.Size(20, 20),
        image: icon // Icon的图像
      });

      var marker = new AMap.Marker({
        position: new AMap.LngLat(
          this.ToDigital(data.lng),
          this.ToDigital(data.lat)
        ),
        offset: new AMap.Pixel(-10, -10),
        icon: iconInstance, // 添加 Icon 图标 URL
        title: '设备标点',
        d_id: data.d_id,
        type_id: data.device_type_id
      });
      marker.on('click', e => {
        console.log(e.target._originOpts.title);
        this.device_type_id = e.target._originOpts.type_id;
        this.pietf = true;
        // if(this.device_type_id == 6){
        this.getbaseinfo(e.target._originOpts.d_id);
      });
      this.map.add(marker);
    },
    search() {
      this.getbaselist();
    },
    handlePointTypeChange() {
      this.typevalue = '';
      this.gettype().then(() => {
        this.search();
      });
    },
    reset() {
      this.inoffvalue = '';
      this.versionsvalue2 = '';
      this.statevalue = '';
      this.typevalue = '';
      this.idinput = '';
      this.point_type = '';
      this.getbaselist();
    },
    // getmon() {
    //   //获取监测点列表 组织列表
    //   this.$axios({
    //     method: "POST",
    //     url: "/api/api_gateway?method=sysmenage.usermanager.org_list",
    //   }).then((res) => {
    //     console.log(res.data.data);
    //     this.inoffoptions = res.data.data.point_data;
    //   });
    // },
    getmon2() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=monitor_manage.trap_manage.trap_org',
        data: this.qs.stringify({
          page_item: '1000000'
        })
      }).then(res => {
        // console.log(res.data.data);
        this.versionsoptions2 = res.data.data.org_data;
        this.inoffoptions = res.data.data.point_data;
      });
    },
    gettype() {
      return this.$axios({
        method: 'POST',
        url:
          '/api/api_gateway?method=monitor_manage.home_map.home_map_device_type',
        data: this.qs.stringify({
          point_type: this.point_type
        })
      }).then(res => {
        // console.log(res.data.data);
        this.typeoptions =
          filter(res.data.data, item => item.type_id !== 6) || [];

        const deviceData = map(
          filter(this.typeoptions, item => item.type_id !== 6),
          item => {
            return assign({}, item, { num: 0 });
          }
        );

        this.deviceTypeDataSource = normalization(deviceData, 'type_id');
      });
    },
    getbaseinfo(d_id) {
      this.loading = true;
      this.$axios({
        method: 'POST',
        url:
          '/api/api_gateway?method=monitor_manage.home_map.device_distribute_details',
        data: this.qs.stringify({
          d_id: d_id
        })
      }).then(res => {
        // console.log(res.data.data);
        this.loading = false;
        this.baseinfo = res.data.data;
        if (!this.baseinfo.length) {
          return;
        }

        if (this.baseinfo[0].device_info) {
          // console.log(this.baseinfo[0].device_info.hlsHd)
          let hlsHd = this.baseinfo[0].device_info.hlsHd;
          hlsHd = 'https' + hlsHd.toString().slice(4);
          console.log(hlsHd);
          let playHtml = `<video id="myPlayer"  muted autoplay  poster='' controls playsInline  webkit-playsinline src="${hlsHd}"  style="width:100%; height:100%;"></video>`;
          // console.log(hlsHd);
          this.$nextTick(() => {
            document.getElementById('videoBon').innerHTML = playHtml;
            this.myVideo2[`myPlayer`] = new EZUIKit.EZUIPlayer(`myPlayer`);
            setTimeout(() => {
              this.myVideo2[`myPlayer`].play();
            }, 150);
          });
        } else {
          var dom = document.getElementById('myPlayer');
          if (dom) {
            dom.style.display = 'none';
          }
        }
      });
    },
    //距离测量
    measure_distance() {
      this.mouseTool.close();
      this.measure_index = 1;
      this.draw('rule');
      window.addEventListener('dblclick', () => {
        this.measure_index = 0;
        this.mouseTool.close();
      });
      window.addEventListener('contextmenu', () => {
        this.measure_index = 0;
        this.mouseTool.close();
      });
    },
    //面积测量
    measure_area() {
      this.mouseTool.close();
      this.measure_index = 2;
      this.draw('measureArea');
      window.addEventListener('dblclick', () => {
        this.measure_index = 0;
        this.mouseTool.close();
      });
      window.addEventListener('contextmenu', () => {
        this.measure_index = 0;
        this.mouseTool.close();
      });
    },
    measure_close() {
      this.measure_index = 0;
      this.mouseTool.close(true);
    },
    draw(type) {
      var mouseTool = this.mouseTool;
      switch (type) {
        case 'rule': {
          mouseTool.rule({
            startMarkerOptions: {
              //可缺省
              icon: new AMap.Icon({
                size: new AMap.Size(19, 31), //图标大小
                imageSize: new AMap.Size(19, 31),
                image: '//webapi.amap.com/theme/v1.3/markers/b/start.png'
              }),
              offset: new AMap.Pixel(-9, -31)
            },
            endMarkerOptions: {
              //可缺省
              icon: new AMap.Icon({
                size: new AMap.Size(19, 31), //图标大小
                imageSize: new AMap.Size(19, 31),
                image: '//webapi.amap.com/theme/v1.3/markers/b/end.png'
              }),
              offset: new AMap.Pixel(-9, -31)
            },
            midMarkerOptions: {
              //可缺省
              icon: new AMap.Icon({
                size: new AMap.Size(19, 31), //图标大小
                imageSize: new AMap.Size(19, 31),
                image: '//webapi.amap.com/theme/v1.3/markers/b/mid.png'
              }),
              offset: new AMap.Pixel(-9, -31)
            },
            lineOptions: {
              //可缺省
              strokeStyle: 'solid',
              strokeColor: '#FF33FF',
              strokeOpacity: 1,
              strokeWeight: 2
            }
            //同 RangingTool 的 自定义 设置，缺省为默认样式
          });
          break;
        }
        case 'measureArea': {
          // mouseTool.measureArea({
          //   strokeColor: '#4f71ff',
          //   fillColor: '#1791fc',
          //   fillOpacity: 0.3,
          //   //同 Polygon 的 Option 设置
          // });
          mouseTool.polygon({
            strokeColor: '#4f71ff',
            strokeOpacity: 1,
            strokeWeight: 3,
            strokeOpacity: 0.5,
            fillColor: '#1791fc',
            fillOpacity: 0.4,
            strokeStyle: 'solid'
          });
          break;
        }
      }
    },
    drawend() {
      var mouseTool = this.mouseTool;
      mouseTool.on('draw', ev => {
        // 确定时测量面积鼠标工具
        if (ev.obj.CLASS_NAME === 'Overlay.Polygon') {
          const id = ev.obj._amap_id;
          // console.log(mouseTool);
          // 获取路径结束点坐标
          const position = ev.obj._opts.path[ev.obj._opts.path.length - 1];
          var marker = null;
          marker = new AMap.Marker({
            position: new AMap.LngLat(position[0], position[1]),
            icon: 'https://webapi.amap.com/images/destroy.png',
            offset: new AMap.Pixel(-7, 7),
            id: id
          });
          // 计算区域面积
          var area =
            Math.round(AMap.GeometryUtil.ringArea(ev.obj._opts.path)) / 1000000;
          area = area.toFixed(2);
          var center = this.getCenter(ev.obj._opts.path);
          var text = null;
          text = new AMap.Text({
            position: center,
            text: area + '平方公里',
            offset: new AMap.Pixel(-20, -20)
          });
          this.map.add(text);
          this.map.add(marker);
          marker.on('click', e => {
            var ids = e.target._originOpts.id;
            this.map.remove(this.arealistmouse[ids].text);
            this.map.remove(this.arealistmouse[ids].marker);
            this.map.remove(this.arealistmouse[ids].mouse);
          });
          var obj = {
            text: text,
            marker: marker,
            mouse: ev.obj
          };
          this.arealistmouse[id] = obj;
        }
      });
    },
    // 取面对象 中心点
    getCenter(PolygonArr) {
      let total = PolygonArr.length;
      let X = 0;
      let Y = 0;
      let Z = 0;
      PolygonArr.forEach(lnglat => {
        let lng = (lnglat[0] * Math.PI) / 180;
        let lat = (lnglat[1] * Math.PI) / 180;
        let x, y, z;
        x = Math.cos(lat) * Math.cos(lng);
        y = Math.cos(lat) * Math.sin(lng);
        z = Math.sin(lat);
        X += x;
        Y += y;
        Z += z;
      });
      X = X / total;
      Y = Y / total;
      Z = Z / total;

      let Lng = Math.atan2(Y, X);
      let Hyp = Math.sqrt(X * X + Y * Y);
      let Lat = Math.atan2(Z, Hyp);
      // console.log(Lng, Lat, Hyp);
      return [(Lng * 180) / Math.PI, (Lat * 180) / Math.PI];
    },
    //获取路径数据
    gettracklist_data() {
      this.trackloading = true;
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=monitor_manage.home_map.user_walk_list',
        data: this.qs.stringify({
          create_time: this.tracktime,
          page: this.trackpage,
          page_item: '5'
        })
      }).then(res => {
        console.log(res.data.data);
        var data = res.data.data.page_list;
        // if(data.length){
        //   return
        // }
        this.total = res.data.data.total_item;
        var arr = [];
        var index = this.trackpage;
        index = index % 3 == 0 ? 3 : index % 3;
        var colorlist = this.color.slice((index - 1) * 8, 8 * index);

        if (!this.tracklistdata_backups[this.trackpage]) {
          for (var i = 0; i < data.length; i++) {
            var obj = {
              type: false,
              color: colorlist[i],
              walk_list_arr: []
            };
            arr.push(obj);
          }
          this.$set(this.tracklistdata_backups, this.trackpage, arr);
          // this.tracklistdata_backups[this.trackpage] = arr;
        }
        this.tracklistdata = data;
        this.trackloading = false;
        console.log(this.tracklistdata_backups);
      });
    },
    //时间切换
    timechange(e) {
      console.log(e);
      console.log(this.tracklistdata_backups);
      for (var key in this.tracklistdata_backups) {
        var list = this.tracklistdata_backups[key];
        for (var j = 0; j < list.length; j++) {
          var walk_list_arr = list[j].walk_list_arr;
          for (var k = 0; k < walk_list_arr.length; k++) {
            this.map.remove(walk_list_arr[k]);
          }
        }
      }
      if (e) {
        this.tracktime = this.timetag(e);
        this.trackpage = 1;
        this.pagekey = Math.random() * 10 + 1;
        this.tracklistdata_backups = {};
        this.gettracklist_data();
      } else {
        var time = new Date();
        this.tracktime = this.timetag(time);
      }
    },
    //分页
    handleCurrentChange(e) {
      this.trackpage = e;
      this.gettracklist_data();
    },
    //绘制or关闭路径
    seeteack(data, index) {
      if (this.tracklistdata_backups[this.trackpage][index].type) {
        console.log(
          this.tracklistdata_backups[this.trackpage][index].walk_list_arr
        );
        var walk_list_arr = this.tracklistdata_backups[this.trackpage][index]
          .walk_list_arr;
        for (var i = 0; i < walk_list_arr.length; i++) {
          this.map.remove(walk_list_arr[i]);
        }
        this.tracklistdata_backups[this.trackpage][index].walk_list_arr = [];
      } else {
        console.log(this.tracklistdata_backups[this.trackpage][index].type);
        this.initteack_info(data.walk_list, index);
      }
      this.tracklistdata_backups[this.trackpage][index].type = !this
        .tracklistdata_backups[this.trackpage][index].type;
    },
    //绘制路径
    initteack_info(walk_list, index) {
      console.log(walk_list);
      for (var i = 0; i < walk_list.length; i++) {
        console.log(walk_list[i]);
        var arr = [];
        for (var j = 0; j < walk_list[i].length; j++) {
          var list = [walk_list[i][j].lng, walk_list[i][j].lat];
          arr.push(list);
        }
        var polyline2 = new AMap.Polyline({
          map: this.map,
          path: arr,
          showDir: true,
          strokeColor: this.tracklistdata_backups[this.trackpage][index].color, //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 6, //线宽
          zIndex: 51
        });
        this.tracklistdata_backups[this.trackpage][index].walk_list_arr.push(
          polyline2
        );
      }
    },
    timetag(time) {
      var years = time.getFullYear();
      var month = time.getMonth() + 1;
      var day = time.getDate();
      month = month < 10 ? '0' + month : month;
      day = day < 10 ? '0' + day : day;
      return years + '-' + month + '-' + day;
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.getmon();
    // this.init()
    var time = new Date();
    this.tracktime = this.timetag(time);
    this.gettype();
    this.getmon2();
    this.gettracklist_data();
    setTimeout(() => {
      this.initmap();
    }, 1000);
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    this.map && this.map.destroy();
    if (this.myVideo2[`myPlayer`]) {
      this.myVideo2[`myPlayer`].stop();
    }
  }, //生命周期 - 销毁之前
  destroyed() {
    if (this.myVideo2[`myPlayer`]) {
      this.myVideo2[`myPlayer`].stop();
    }
  }, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.pestbox {
  width: 100%;
  height: 97%;
  position: relative;
  overflow: hidden;
  background-color: #252b45;
  #mapContainer2 {
    width: 100%;
    height: 100%;
    /deep/.amap-logo {
      display: none !important;
    }
    /deep/.amap-copyright {
      display: none !important;
    }
  }
  .tishi {
    // width: 500px;
    height: 50px;
    color: #fff;
    line-height: 50px;
    background-color: #04243e;
    text-align: center;
    transition: width 1s ease;
    overflow: hidden;
  }
  .searchbox {
    position: absolute;
    top: 10px;
    left: 15px;
    display: flex;
    /deep/.el-select {
      margin-right: 10px;
    }
    /deep/.el-date-editor {
      margin-right: 10px;
    }
    /deep/.el-button--info {
      background-color: #409eff;
      border-color: #409eff;
    }
    .inputbox {
      margin-right: 10px;
      /deep/.el-input {
        width: 200px;
      }
    }
  }
  .tallybox {
    position: absolute;
    top: 50px;
    left: 15px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    max-height: 220px;
    overflow-y: auto;

    .tallybox_item {
      margin-bottom: 10px;
      display: flex;
      color: #333;
      align-items: center;

      img {
        margin-right: 10px;
      }
    }
  }
  .tracklistbox {
    position: absolute;
    top: 266px;
    left: 15px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    width: 200px;

    &.hide {
      width: 0;
      padding: 0;
    }
    // height: 500px;
    .el-date-editor {
      width: 200px;
    }
    .tracklist {
      width: 100%;
      height: 245px;
      margin-top: 15px;
      .tracklist_tilte {
        text-align: center;
        font-size: 14px;
      }
      .tracklist_item {
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        padding-bottom: 10px;
        border-bottom: 1px solid #409eff;
        margin-bottom: 10px;
        .tracklist_item_text {
          display: flex;
          line-height: 30px;
          p:first-child {
            width: 30px;
            height: 30px;
            background-color: chocolate;
            line-height: 30px;
            text-align: center;
            border-radius: 50%;
            color: #fff;
          }
          p:nth-child(2) {
            margin-left: 10px;
          }
        }
        .tracklist_btn {
          width: 50px;
          height: 18px;
          color: #409eff;
          padding: 5px;
          font-size: 12px;
          text-align: center;
          cursor: pointer;
          user-select: none;
        }
        .tracklist_btn_none {
          color: #ff4949;
        }
      }
      .tracklist_item:last-child {
        border-bottom: none;
      }
    }
  }

  .path-box {
    display: flex;
    position: absolute;
    transition: width 1s ease;
    left: 0;
    top: 280px;
    overflow: hidden;

    &__action {
      width: 20px;
      height: 20px;
      padding: 20px 10px;
      background-color: chocolate;
      color: #fff;
      line-height: 50px;
      text-align: center;
      font-size: 25px;
      background: chocolate;
      cursor: pointer;
    }

    .tracklistbox {
      position: static;
      top: 0px;
      left: 0px;
      transition: all 1s ease;
      background-color: rgba(255, 255, 255, 1);
      overflow: hidden;
    }
  }

  .piebox {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    // height: 100%;
    transition: width 1s ease;
    overflow: hidden;
    .iconbox {
      width: 30px;
      height: 50px;
      background-color: chocolate;
      color: #fff;
      line-height: 50px;
      text-align: center;
      font-size: 25px;
    }
    #mychartpie {
      transition: all 1s ease;
      background-color: rgba(255, 255, 255, 1);
      // padding: 20px;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 10px;
      .infobox {
        width: 450px;
        padding: 20px 20px 0 20px;
        h3 {
          margin-top: 0;
          color: #333;
        }
        p {
          margin-bottom: 15px;
          color: #333;
          font-size: 14px;
          span {
            color: #04d5e8;
          }
          span:first-child {
            display: inline-block;
            width: 85px;
            color: #333;
          }
        }
      }
      .wornbox {
        width: 450px;
        padding: 0 20px 20px;
        h3 {
          margin-top: 0;
          color: #333;
        }
        .wornbox_item {
          display: flex;
          flex-wrap: wrap;

          p {
            width: 40%;
            margin-bottom: 15px;
            color: #333;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            margin-right: 20px;
            span:nth-child(2) {
              color: #04d5e8;
            }
          }
        }
      }
      .cbdinfobox {
        width: 450px;
        padding: 0 20px 20px;
        h3 {
          margin-top: 0;
          color: #333;
        }
        .cbdinfobox_item {
          display: flex;
          width: 100%;
          margin: 0 15px 10px 0;
          p {
            color: #333;
            font-size: 14px;
            margin-right: 20px;
            span {
              color: #04d5e8;
            }
          }
          p:first-child {
            width: 150px;
          }
        }
      }
      .cbdimg {
        width: 450px;
        padding: 0px 20px 10px 20px;
        .title {
          margin-top: 0;
          color: #333;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .videoBonbox {
        width: 450px;
        padding: 0 20px 20px;
        h3 {
          margin-top: 0;
          color: #333;
        }
      }
    }
  }
  .measurebox {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 3px rgb(0 0 0 / 50%);
    padding: 10px 5px;
    .measurebox_item {
      text-align: center;
      font-size: 14px;
      cursor: pointer;
      user-select: none;
    }
    .measurebox_line {
      margin: 10px 0;
      border-bottom: 1px solid;
    }
    .selmea {
      color: #409eff;
    }
  }
}
/deep/.amap-controls {
  display: none !important;
}
</style>