<!--  -->
<template>
  <div
    class="bcbd_box"
    :style="{ backgroundImage: 'url(' + $imghost + bgdImg + ')' }"
  >
    <!-- head -->
    <div
      class="bcbdBox_header"
      :style="{ backgroundImage: 'url(' + $imghost + hedImg + ')' }"
    ></div>

    <!-- main -->
    <div class="bcbdBox_main" style="cursor: default">
      <!-- left -->
      <div class="bcbdBox_left">
        <!-- 基地信息 -->
        <div class="bcbdBoxLeft_base">
          <!-- 头 -->
          <div class="header">
            <div class="headerBox">
              <img
                src="../../../assets/images/bigdata/bcbd/3.png"
                alt
                class="headerBox_img"
              />
              <div class="headerBox_title">基地信息</div>
            </div>
            <img
              src="../../../assets/images/bigdata/bcbd/2.png"
              alt
              class="headerBox_imgA"
            />
          </div>

          <!-- 内容 -->
          <ul class="main">
            <!-- 设备ID -->
            <li class="main_li">
              <img
                src="../../../assets/images/bigdata/bcbd/4.png"
                alt
                class="mainLi_img"
              />
              <div class="mainLi_name">设备ID:</div>
              <el-col :span="12">
                <el-dropdown trigger="click" @command="handleCommand">
                  <span class="el-dropdown-link mainLi_value">
                    <!-- {{
                      this.basemessage.valNum == ""
                        ? this.basemessage.redata.device_id
                        : this.basemessage.valNum
                    }} -->
                    {{
                      this.basemessage.valNum == ""
                        ? this.basemessage.redata.imei
                        : this.basemessage.valNum
                    }}
                    <!-- {{this.basemessage.valNum}} -->
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      :command="item.imei"
                      v-for="(item, index) in this.basemessage.reDataList"
                      :key="index"
                      >{{ item.imei }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </li>

            <!-- 设备定位 -->
            <li class="main_li">
              <img
                src="../../../assets/images/bigdata/bcbd/5.png"
                alt
                class="mainLi_img"
              />
              <div class="mainLi_name">设备定位:</div>
              <div class="mainLi_value">
                {{ this.basemessage.redata.address }}
              </div>
            </li>

            <!-- 最新上报时间 -->
            <li class="main_li">
              <img
                src="../../../assets/images/bigdata/bcbd/6.png"
                alt
                class="mainLi_img"
              />
              <div class="mainLi_name">最新上报时间:</div>
              <div class="mainLi_value">
                {{ this.basemessage.redata.status_time }}
                <!-- {{ this.basemessage.redata.addtime }} -->
              </div>
            </li>
          </ul>
        </div>

        <!-- 设备概况 -->
        <div class="bcbdBoxLeft_general">
          <!-- 头 -->
          <div class="header">
            <div class="headerBox">
              <img
                src="../../../assets/images/bigdata/bcbd/3.png"
                alt
                class="headerBox_img"
              />
              <div class="headerBox_title">设备概况</div>
            </div>
            <img
              src="../../../assets/images/bigdata/bcbd/2.png"
              alt
              class="headerBox_imgA"
            />
          </div>

          <!-- 内容 -->
          <ul class="main">
            <!-- 全部设备 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_num">{{ this.facilitySurvey.allData }}</div>
                <span class="mainLi_unit">台</span>
              </div>
              <div class="mainLi_title">全部设备</div>
            </li>

            <!-- 在线设备 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_numA">{{ this.facilitySurvey.onLine }}</div>
                <span class="mainLi_unitA">台</span>
              </div>
              <div class="mainLi_title">在线设备</div>
            </li>

            <!--  离线设备 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_numB">{{ this.facilitySurvey.offLine }}</div>
                <span class="mainLi_unitB">台</span>
              </div>
              <div class="mainLi_title">离线设备</div>
            </li>
          </ul>
        </div>

        <!-- 环境温湿度 -->
        <div class="bcbdBoxLeft_atAh">
          <!-- 头 -->
          <div class="header">
            <div class="headerBox">
              <img
                src="../../../assets/images/bigdata/bcbd/3.png"
                alt
                class="headerBox_img"
              />
              <div class="headerBox_title">环境温湿度</div>
            </div>
            <img
              src="../../../assets/images/bigdata/bcbd/2.png"
              alt
              class="headerBox_imgA"
            />
          </div>

          <!-- 内容 -->
          <div class="main">
            <div class="chart1" ref="chart1"></div>
          </div>
        </div>

        <!-- 加热仓温度 -->
        <div class="bcbdBoxLeft_thermal">
          <!-- 头 -->
          <div class="header">
            <div class="headerBox">
              <img
                src="../../../assets/images/bigdata/bcbd/3.png"
                alt
                class="headerBox_img"
              />
              <div class="headerBox_title">加热仓温度</div>
            </div>
            <img
              src="../../../assets/images/bigdata/bcbd/2.png"
              alt
              class="headerBox_imgA"
            />
          </div>

          <!-- 内容 -->
          <div class="main">
            <div class="chart2" ref="chart2"></div>
          </div>
        </div>
      </div>

      <!-- centre -->
      <div class="bcbdBox_centre">
        <!-- 设备定位 -->
        <div class="mapCon">
          <!-- 头 -->
          <div class="header">
            <div class="headerBox">
              <img
                src="../../../assets/images/bigdata/bcbd/3.png"
                alt
                class="headerBox_img"
              />
              <div class="headerBox_title">设备定位</div>
            </div>
            <img
              src="../../../assets/images/bigdata/bcbd/14.png"
              alt
              class="headerBox_imgA"
            />
          </div>
          <el-card class="box-card card01">
            <baidu-map
              class="bm-view"
              :center="center"
              @ready="handler"
              :scroll-wheel-zoom="true"
              :zoom="zoom"
            >
              <bm-navigation anchor="BMAP_AN  CHOR_TOP_LEFT"></bm-navigation>
              <div v-for="(equipItem, index) in equips" :key="index">
                <bm-marker
                  :position="{ lng: equipItem.lng, lat: equipItem.lat }"
                  :icon="{
                    url: icons[equipItem.type],
                    size: { width: 33, height: 40 },
                  }"
                  @click="equipMarkerClick(equipItem)"
                ></bm-marker>
              </div>
              <!-- 设备窗体信息 -->
              <!-- <bm-info-window :position="currEquip.position" autoPan :show="equipShow"> -->
              <bm-info-window
                :position="currEquip.position"
                autoPan
                :show="equipShow"
              >
                <div class="equipInfoWindowTitle">{{ currEquip.name }}</div>
                <div class="equipInfoWindow">
                  <span>设备ID：</span>{{ currEquip.id }}
                </div>
                <div class="equipInfoWindow">
                  <span>设备名称：</span>{{ currEquip.name }}
                </div>
                <div class="equipInfoWindow">
                  <span>设备位置：</span>{{ currEquip.addr }}
                </div>
                <div class="equipInfoWindow">
                  <span>上报时间：</span>{{ currEquip.time }}
                </div>
              </bm-info-window>
            </baidu-map>
          </el-card>
          <div class="legend">
            <el-card class="box-card card02">
              <ul>
                <li v-for="(item, key) in icons" :key="key">
                  <span>
                    <img :src="item" />
                  </span>
                  <span>{{ key | equipType }}</span>
                </li>
              </ul>
            </el-card>
          </div>
        </div>

        <!-- 设备图片 -->
        <div class="bcbdBoxCentre_picture">
          <!-- 头 -->
          <div class="header">
            <div class="headerBox">
              <img
                src="../../../assets/images/bigdata/bcbd/3.png"
                alt
                class="headerBox_img"
              />
              <div class="headerBox_title">设备图片</div>
            </div>
            <img
              src="../../../assets/images/bigdata/bcbd/14.png"
              alt
              class="headerBox_imgA"
            />
          </div>

          <!-- 内容 -->
          <div class="main">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  id="viewerDom"
                  v-viewer
                  v-for="item in this.swiperImg"
                  :key="item.addr"
                >
                  <img :src="item.addr" alt class="swiper-slide-img" />
                </div>
              </div>
              <div class="swiper-pagination"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- right -->
      <div class="bcbdBox_right">
        <!-- 害虫比例 -->
        <div class="bcbdBoxRight_insect">
          <!-- 头 -->
          <div class="header">
            <div class="headerBox">
              <img
                src="../../../assets/images/bigdata/bcbd/3.png"
                alt
                class="headerBox_img"
              />
              <div class="headerBox_title">害虫比例</div>
            </div>
            <img
              src="../../../assets/images/bigdata/bcbd/2.png"
              alt
              class="headerBox_imgA"
            />
          </div>

          <!-- 内容 -->
          <div class="main">
            <div class="chart3" ref="chart3"></div>
          </div>
        </div>

        <!-- 设备状态 -->
        <div class="bcbdBoxRight_status">
          <!-- 头 -->
          <div class="header">
            <div class="headerBox">
              <img
                src="../../../assets/images/bigdata/bcbd/3.png"
                alt
                class="headerBox_img"
              />
              <div class="headerBox_title">设备状态</div>
            </div>
            <img
              src="../../../assets/images/bigdata/bcbd/2.png"
              alt
              class="headerBox_imgA"
            />
          </div>

          <!-- 内容 -->
          <ul class="main">
            <!-- 在线状态 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_val">
                  <!-- {{
                    this.facilitystate.redata.device_status == "0"
                      ? "离线"
                      : "在线"
                  }} -->
                   {{
                    this.facilitystate.redata.is_online == "0"
                      ? "离线"
                      : "在线"
                  }}
                </div>
              </div>
              <div class="mainLi_title">在线状态</div>
            </li>

            <!-- 定时模式 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_val">
                  {{ this.facilitystate.redata.ts == "0" ? "光控" : "时控" }}
                </div>
              </div>
              <div class="mainLi_title">定时模式</div>
            </li>

            <!--  雨控状态 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_val">
                  {{ this.facilitystate.redata.rps == "0" ? "正常" : "雨控" }}
                </div>
              </div>
              <div class="mainLi_title">雨控状态</div>
            </li>

            <!-- 低温限制 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_val" style="margin: 0 0 0 0.1rem">
                  {{ this.facilitystate.redata.tpl }}
                </div>
              </div>
              <div class="mainLi_title">低温限制</div>
            </li>

            <!-- 温控状态 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_val">
                  {{ this.facilitystate.redata.tps == 1 ? "温控" : "正常" }}
                </div>
              </div>
              <div class="mainLi_title">温控状态</div>
            </li>

            <!--  加热状态 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_val">
                  {{ this.facilitystate.redata.hs == "0" ? "正常" : "加热" }}
                </div>
              </div>
              <div class="mainLi_title">加热状态</div>
            </li>

            <!-- 光照状态 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_val">
                  {{ this.facilitystate.redata.lps == 0 ? "正常" : "光控状态" }}
                </div>
              </div>
              <div class="mainLi_title">光照状态</div>
            </li>

            <!-- 高温限制 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_val" style="margin: 0 0 0 0.1rem">
                  {{ this.facilitystate.redata.tph }}
                </div>
              </div>
              <div class="mainLi_title">高温限制</div>
            </li>

            <!--  信号强度 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_val" style="margin: 0 0 0 0.1rem">
                  {{ this.facilitystate.redata.csq }}
                </div>
              </div>
              <div class="mainLi_title">信号强度</div>
            </li>

            <!-- 上仓门 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_val">
                  {{ this.facilitystate.redata.upds == "0" ? "关闭" : "打开" }}
                </div>
              </div>
              <div class="mainLi_title">上仓门</div>
            </li>

            <!-- 下仓门 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_val">
                  {{ this.facilitystate.redata.dnds == "0" ? "关闭" : "打开" }}
                </div>
              </div>
              <div class="mainLi_title">下仓门</div>
            </li>

            <!--  加热仓温度 -->
            <li class="main_li">
              <div class="mainLi_circle">
                <div class="mainLi_val" style="margin: 0 0 0 0.1rem">
                  {{ this.facilitystate.redata.hrt }}
                </div>
              </div>
              <div class="mainLi_title">加热仓温度</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

//自适应
import "@/plugin/flexible.js";

//echart
import echarts from "echarts";

//百度地图

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      bgdImg: "/images/bigdata/bcbd/13.jpg",
      hedImg: "/images/bigdata/bcbd/1.png",
      //地图
      center: { lng: 0, lat: 0 },
      icons: {
        2: require("@/assets/images/home/home02/scd.png"),
        3: require("@/assets/images/home/home02/cbd.png"),
      },
      zoom: 3,
      currEquip: {
        name: "",
        time: "",
        addr: "",
        id: "",
        position: {},
      },
      equipShow: false,
      equips: [],
      swiperImg: [],
      //基地信息
      basemessage: {
        DataId: [], //基地信息设备ID数据
        redata: {}, //默认第一条数据显示
        reDataList: [], //全部测报灯设备数据
        valNum: "", //是否点击了下拉菜单
      },

      //设备状态
      facilitystate: {
        redata: [], //数据
      },

      // 环境温湿度、加热仓温度数据渲染
      rendergraph: {
        timeData: [], //时间
        temperature: [], //环境温度
        humidity: [], //环境湿度
        others: [], //加热仓温度
        // device_id: '' //id
      },

      // 害虫比例
      insectRatio: {
        redata: [], //全部害虫比例数据-全部数据
        namedata: [], //害虫名称数据
        namedataA: [], //害虫名称数据-全部数据
        insect: [], //害虫和名称和值数
        sum: 0, //害虫总和
        selected: {},
      },

      // 设备概况
      facilitySurvey: {
        allData: "", //全部设备
        onLine: "", //在线设备
        offLine: "", //离线设备
        onOffLine: [], //全部离线在线设备
      },
    };
  },
  filters: {
    equipType(i) {
      switch (i) {
        case "2":
          return "在线";
          break;
        case "3":
          return "离线";
          break;
      }
    },
  },
  //监听属性 类似于data概念
  computed: {
    // 环境温湿度
    option01() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#dddc6b",
            },
          },
        },
        legend: {
          top: "0%",
          textStyle: {
            color: "#fff",
            fontSize: "12",
          },
        },
        grid: {
          left: "2",
          top: "30",
          right: "20",
          bottom: "10",
          containLabel: true,
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 12,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            data: this.rendergraph.timeData,
          },
          {
            axisPointer: { show: false },
            axisLine: { show: false },
            position: "bottom",
            offset: 0,
          },
        ],

        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 12,
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "环境湿度",
            type: "line",
            smooth: true,
            symbol: "circle", //标记的 图形
            symbolSize: 5,
            showSymbol: true,
            lineStyle: {
              normal: {
                color: "#39b6e6",
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(61, 196, 241, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 0.8,
                      color: "rgba(61, 196, 241, 0.2)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                shadowColor: "rgba(0, 0, 0, 0.1)",
              },
            },
            itemStyle: {
              normal: {
                color: "#39b6e6",
                borderColor: "#39b6e6",
                borderWidth: 2,
              },
            },
            data: this.rendergraph.humidity,
          },
          {
            name: "环境温度",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: true,
            lineStyle: {
              normal: {
                color: "#c71881",
                width: 2,
              },
            },
            itemStyle: {
              normal: {
                color: "#c71881",
                borderColor: "#c71881",
                borderWidth: 2,
              },
            },
            data: this.rendergraph.temperature,
          },
        ],
      };
    },

    // 加热仓温度
    option02() {
      return {
        color: ["#2f89cf"],
        //   color: ["#fd2f56"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "10",
          top: "10",
          right: "10",
          bottom: "5",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.rendergraph.timeData,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                // width: 1,
                // type: "solid"
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "加热仓温度",
            type: "bar",
            barWidth: "12",
            data: this.rendergraph.others,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      //   offset: 0, color: '#3fedcc' // 0% 处的颜色
                      offset: 0,
                      color: "#ff2a56", // 0% 处的颜色
                    },
                    {
                      //   offset: 1, color: '#086ce6' // 100% 处的颜色
                      offset: 1,
                      color: "#f77a42", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          },
        ],
      };
    },

    // 害虫比例
    option03() {
      return {
        animation: true,
        title: {
          text: this.insectRatio.sum + "只",
          x: "center",
          y: "center",
          textStyle: {
            color: "#1e74fd",
            // "fontSize": 20,
            fontSize: 12,
            fontWeight: "lighter",
            width: "100px",
          },
        },
        legend: {
          width: "90%",
          type: "scroll", // 数据过多时，分页显示
          orient: "vertical",
          //   right: 10,
          //   top: 20,
          //   bottom: 20,
          textStyle: {
            // color: "#666",
            color: "#FFF",
            // "fontSize": 12
            fontSize: 10,
          },
          icon: "circle",
          right: "0",
          bottom: "0",
          padding: [5, 10],
          itemGap: 10,
          data: this.insectRatio.namedata,
          // selected: this.insectRatio.selected, //这里默认显示数组中前六个，如果不设置，则所有的数据都会显示在图表上
        },
        series: [
          {
            name: "害虫",
            minAngle: 5, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
            avoidLabelOverlap: true, //是否启用防止标签重叠策略
            type: "pie",
            silent: true, //图形是否不响应和触发鼠标事件
            radius: ["30%", "60%"],
            center: ["50%", "50%"],
            color: ["#00d0ae", "#d70252", "#ffa300", "#1e75ff"],
            startAngle: 135,
            labelLine: {
              normal: {
                length: 25,
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              normal: {
                formatter: "{c}只",
                backgroundColor: "rgba(255, 147, 38, 0)",
                borderColor: "transparent",
                borderRadius: 4,
                rich: {
                  a: {
                    color: "#999",
                    lineHeight: 22,
                    align: "center",
                  },
                  hr: {
                    borderColor: "#aaa",
                    width: "100%",
                    borderWidth: 1,
                    height: 0,
                  },
                  b: {
                    color: "#b3e5ff",
                    // fontSize: 16,
                    fontSize: 12,
                    lineHeight: 33,
                  },
                  c: {
                    fontSize: 90,
                    color: "red",
                  },
                  per: {
                    color: "#FDF44E",
                    fontSize: 14,
                    padding: [5, 8],
                    borderRadius: 2,
                  },
                },
                textStyle: {
                  // "fontSize": 20
                  fontSize: 12,
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                formatter: "{b|{b}:}  {per|{d}%}  ",
                backgroundColor: "rgba(255, 147, 38, 0)",
                borderColor: "transparent",
                borderRadius: 4,
                rich: {
                  a: {
                    color: "#999",
                    lineHeight: 22,
                    align: "center",
                  },
                  hr: {
                    borderColor: "#aaa",
                    width: "100%",
                    borderWidth: 1,
                    height: 0,
                  },
                  b: {
                    color: "#fff",
                    fontSize: 12,
                    lineHeight: 33,
                  },
                  c: {
                    fontSize: 13,
                    color: "#eee",
                  },
                  per: {
                    color: "#FDF44E",
                    fontSize: 12,
                    padding: [5, 6],
                    borderRadius: 2,
                  },
                },
              },
            },
            data: this.insectRatio.insect,
          },
        ],
      };
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //图表渲染
    chartsInit(option01, option02, option03) {
      let myChart1 = echarts.init(this.$refs.chart1);
      myChart1.setOption(option01);
      let myChart2 = echarts.init(this.$refs.chart2);
      myChart2.setOption(option02);
      let myChart3 = echarts.init(this.$refs.chart3);
      myChart3.setOption(option03);

      window.addEventListener("resize", function () {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
      });
    },

    //地图
    handler({ BMap, map }) {
      let mapStyle = { style: "midnight" };
      map.setMapStyle(mapStyle);
      this.BMap = BMap;
      this.map = map;
      // var view = map.getViewport(eval(this.equips))
      // this.zoom = view.zoom
      // this.center = view.center
      this.zoom = 2;
      this.center = {
        lng: 120.211486,
        lat: 30.256576,
      };
      // console.log(this.equips)
    },
    equipMarkerClick(item) {
      console.log(item)
      this.equipShow = true;
      this.currEquip.name = item.name;
      this.currEquip.time = item.time;
      this.currEquip.addr = item.addr;
      this.currEquip.id = item.id;
      this.currEquip.position = { lng: item.lng, lat: item.lat };
    },

    switchChu() {
      var swiper = new Swiper(".swiper-container", {
        slidesPerView: 3,
        spaceBetween: 30,
        observer: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    },

    // 基地信息
    baseMessage() {
      let that = this;
      let postData = that.qs.stringify({
        device_type_id: "3", //设备类型
        device_id: "", //设备ID
        device_name: "", //设备名称
        page: 1, //页码
        device_status: "", //设备状态
        device_num: "", //设备版本
        device_model: "", //性诱设备型号
      });
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.worm_lamp.lamp_list",
          data: postData,
        })
        .then((res) => {
          var data = res.data.data.data;
          // console.log(data)
          var DataId = []; //设备ID
          var reDataList = []; //测报灯全部设备数据
          that.facilitySurvey.allData = res.data.data.counts; //全部设备
          var onLine = []; //在线
          var offLine = []; //离线
          var onOffLine = []; //全部
          var equips = that.equips; //地图数据
          for (let i = 0; i < data.length; i++) {
            // DataId.push(data[i].device_id);
            DataId.push(data[i].imei);
            // var time = data[i].status_time;
            var time = data[i].addtime;
            var date = new Date(parseInt(time) * 1000)
              .toLocaleString()
              .replace(/:\d{1,2}$/, " ");
            var dataA = data[i];
            dataA["status_time"] = date;
            reDataList.push(dataA);
            // onOffLine.push(data[i].device_status); //在线离线设备
            onOffLine.push(data[i].is_online); //在线离线设备
            var mapObj = {};
            // if (data[i].device_status == 0) {
            if (data[i].is_online == 0) {
              //离线
              // offLine.push(data[i].device_status);
              offLine.push(data[i].is_online);
              mapObj["equipName"] = "离线";
              mapObj["type"] = 3;
              mapObj["lat"] = data[i].lat;
              mapObj["lng"] = data[i].lng;
              mapObj["addr"] = data[i].address;
              mapObj["name"] = data[i].device_name;
              // mapObj["time"] = reDataList[i].status_time;
              mapObj["time"] = this.formatTime(reDataList[i].addtime * 1000);
              // mapObj["id"] = reDataList[i].device_id;
              mapObj["id"] = reDataList[i].imei;
            // } else if (data[i].device_status == 1) {
            } else if (data[i].is_online == 1) {
              //在线
              // onLine.push(data[i].device_status);
              onLine.push(data[i].is_online);
              mapObj["equipName"] = "在线";
              mapObj["type"] = 2;
              mapObj["lat"] = data[i].lat;
              mapObj["lng"] = data[i].lng;
              mapObj["addr"] = data[i].address;
              mapObj["name"] = data[i].device_name;
              // mapObj["time"] = reDataList[i].status_time;
              mapObj["time"] = this.formatTime(reDataList[i].addtime * 1000);
              // mapObj["id"] = reDataList[i].device_id;
              mapObj["id"] = reDataList[i].imei;
            }
            equips.push(mapObj);
            console.log(mapObj)
          }
          that.facilitySurvey.onLine = onLine.length; //在线
          that.facilitySurvey.offLine = offLine.length; //离线
          that.facilitySurvey.onOffLine = onOffLine; //在线离线全部设备
          // console.log(that.facilitySurvey.onLine)
          // console.log(that.facilitySurvey.offLine)
          // console.log(that.facilitySurvey.onOffLine)
          that.basemessage.redata = reDataList[0]; //第一条数据为默认数据
          that.basemessage.reDataList = reDataList; //全部测报灯设备数据
          that.facilityState(
            // reDataList[0].device_id,
            reDataList[0].imei,
            // reDataList[0].device_status
            reDataList[0].is_online
          );
          // that.renderGraph(reDataList[0].device_id) //环境温湿度、加热仓温度渲染
          // that.renderGraph(reDataList[0].d_id, reDataList[0].device_id); //环境温湿度、加热仓温度渲染
          that.renderGraph(reDataList[0].d_id, reDataList[0].imei); //环境温湿度、加热仓温度渲染

          // that.imgListData(reDataList[0].device_id); //设备图片接口
          that.imgListData(reDataList[0].imei); //设备图片接口
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 点击下拉菜单触发事件
    handleCommand(command) {
      let that = this;
      that.basemessage.valNum = command;
      that.handleCommandBase(command);
    },
    //点击下拉菜单触发设备基地数据
    handleCommandBase(id) {
      let that = this;
      let postData = that.qs.stringify({
        device_type_id: "3", //设备类型
        device_id: id, //设备ID
        device_name: "", //设备名称
        page: 1, //页码
        device_status: "", //设备状态
        device_num: "", //设备版本
        device_model: "", //性诱设备型号
      });
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.worm_lamp.lamp_list",
          data: postData,
        })
        .then((res) => {
          var data = res.data.data.data;
          console.log(data);
          var DataId = []; //设备ID
          var reDataList = []; //测报灯全部设备数据
          for (let i = 0; i < data.length; i++) {
            // DataId.push(data[i].device_id);
            DataId.push(data[i].imei);
            // var time = data[i].status_time;
            var time = data[i].addtime;
            var date = new Date(parseInt(time) * 1000)
              .toLocaleString()
              .replace(/:\d{1,2}$/, " ");
            var dataA = data[i];
            dataA["status_time"] = date;
            reDataList.push(dataA);
          }
          that.basemessage.redata = reDataList[0]; //第一条数据为默认数据
          that.facilityState(
            // reDataList[0].device_id,
            reDataList[0].imie,
            // reDataList[0].device_status
            reDataList[0].is_online
          );
          // that.rendergraph.device_id = reDataList[0].device_id //传递给data
          // that.renderGraph(reDataList[0].device_id) //环境温湿度、加热仓温度渲染
          // that.renderGraph(reDataList[0].d_id, reDataList[0].device_id); //环境温湿度、加热仓温度渲染
          that.renderGraph(reDataList[0].d_id, reDataList[0].imei); //环境温湿度、加热仓温度渲染
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //设备状态
    facilityState(id, status) {
      let that = this;
      let postData = that.qs.stringify({
        device_id: id,
        // d_id: id
      });
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.worm_lamp.device_status_data",
          data: postData,
        })
        .then((res) => {
          var data = res.data.data;
          that.facilitystate.redata = data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 设备定位
    facilitySurveyA() {
      let that = this;
      let postData = that.qs.stringify({
        device_type_id: "3", //设备类型
        page: "", //页码
        page_size: "", //每页数量，默认10
        device_id: "", //设备id
        start_time: "", //开始时间
        end_time: "", //结束时间
      });
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.worm_lamp.device_history_data",
          data: postData,
        })
        .then((res) => {
          console.log(res.data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 环境温湿度、加热仓温度渲染
    renderGraph(id, facilityID) {
      let that = this;
      let postData = that.qs.stringify({
        device_type_id: "3", //设备类型
        d_id: id, //设备id
        start_time: "", //开始时间
        end_time: "", //结束时间
      });
      that
        .$axios({
          method: "post",
          url:
            "/api/api_gateway?method=forecast.worm_lamp.device_polyline_data",
          data: postData,
        })
        .then((res) => {
          var data = res.data.data;
          var timeData = []; //时间
          var temperature = []; //环境温度
          var humidity = []; //环境湿度
          var others = []; //加热仓温度
          for (let i = 0; i < data.length; i++) {
            temperature.push(data[i].temperature); //环境温度
            humidity.push(data[i].humidity); //环境湿度
            others.push(data[i].others); //加热仓温度
            var time = data[i].addtime;
            //时间戳转换为正常时间
            let date = new Date(time * 1000);
            let Y = date.getFullYear() + "-";
            let M =
              (date.getMonth() + 1 < 2
                ? "0" + (date.getMonth() + 1)
                : date.getMonth() + 1) + "-";
            let D = date.getDate() + " ";
            let h = date.getHours() + ":";
            let m = date.getMinutes() + ":";
            let s = date.getSeconds();
            timeData.push(M + D);
          }
          // console.log(timeData)
          // console.log(temperature)
          // console.log(humidity)
          that.rendergraph.timeData = timeData;
          that.rendergraph.temperature = temperature;
          that.rendergraph.humidity = humidity;
          that.rendergraph.others = others;
          // that.insectData(id) //害虫比例数据请求
          that.insectData(id); //害虫比例数据请求
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 害虫比例数据请求
    // insectData(id) {
    //   let that = this;
    //   let postData = that.qs.stringify({
    //     d_id: id, //设备id
    //     pest_name: "", //害虫名称
    //     start_time: "", //开始时间
    //     end_time: "", //结束时间
    //   });
    //   that
    //     .$axios({
    //       method: "post",
    //       url: "/api/api_gateway?method=forecast.worm_lamp.pest_statistics",
    //       data: postData,
    //     })
    //     .then((res) => {
    //       var percentage = res.data.data.percentage;
    //       if (percentage.length > 0) {
    //         var arr = [];
    //         var arrA = [];
    //         var sum = 0; //害虫数量总和

    //         this.insectRatio.selected = {}; //测试决定图表中显示的个数

    //         for (let i in percentage) {
    //           arr.push(percentage[i].name_num);
    //           var objArr = {};
    //           objArr["name"] = percentage[i].name_num;
    //           objArr["value"] = percentage[i].sum;
    //           arrA.push(objArr);
    //           sum = sum + percentage[i].sum;
    //           this.insectRatio.selected[percentage[i].name_num] = i < 6; //这里是关键：限制图表中起始显示6个，这里必须保证name不能为空
    //         }
    //         that.insectRatio.namedata = arr;
    //         that.insectRatio.insect = arrA;
    //         that.insectRatio.sum = sum;
    //         console.log(that.insectRatio)
    //       } else {
    //         that.insectRatio.namedata = [];
    //         that.insectRatio.insect = [];
    //         that.insectRatio.sum = 0;
    //       }
    //       that.chartsInit(that.option01, that.option02, that.option03); //图表渲染
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },

    //测试定时更新饼状图数据
    insectData(id) {
      let that = this;
      let postData = that.qs.stringify({
        d_id: id, //设备id
        pest_name: "", //害虫名称
        start_time: "", //开始时间
        end_time: "", //结束时间
      });
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.worm_lamp.pest_statistics",
          data: postData,
        })
        .then((res) => {
          var percentage = res.data.data.percentage;
          if (percentage.length > 0) {
            var arr = [];
            var arrA = [];
            var sum = 0; //害虫数量总和

            this.insectRatio.selected = {}; //测试决定图表中显示的个数

            for (let i in percentage) {
              arr.push(percentage[i].name_num);
              var objArr = {};
              objArr["name"] = percentage[i].name_num;
              objArr["value"] = percentage[i].sum;
              arrA.push(objArr);
              sum = sum + percentage[i].sum;
              this.insectRatio.selected[percentage[i].name_num] = i < 6; //这里是关键：限制图表中起始显示6个，这里必须保证name不能为空
            }
            that.insectRatio.namedataA = arr;
            that.insectRatio.redata = arrA;
            that.insectRatio.sum = sum;

            that.insectData.insect = [];
            that.insectData.namedata = [];
            var numAA = 0;
            var numBB = 6;

            const timeA = setInterval(() => {
              this.insectRatio.insect = this.insectRatio.redata.slice(
                numAA,
                numBB
              );
              this.insectRatio.namedata = this.insectRatio.namedataA.slice(
                numAA,
                numBB
              );
              numAA = numAA + 6;
              numBB = numBB + 6;
              if (this.insectRatio.namedata.length < 6) {
                numAA = 0;
                numBB = 6;
                console.log("重启");
              } else {
                console.log("不重启");
              }
              that.chartsInit(that.option01, that.option02, that.option03); //图表渲染
            }, 3500);
          } else {
            that.insectRatio.namedata = [];
            that.insectRatio.insect = [];
            that.insectRatio.redata = [];
            that.insectRatio.namedataA = [];
            that.insectRatio.sum = 0;
            that.chartsInit(that.option01, that.option02, that.option03); //图表渲染
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 图片放大
    magnifyPhoto() {
      //具体需要哪些配置可参照下表
      const ViewerDom = document.querySelector("#viewerDom");
      this.viewer = new Viewer(ViewerDom, {
        initialViewIndex: 0,
        button: true, //右上角关闭按钮
        navbar: 2,
        title: 0,
        toolbar: 0,
        keyboard: false,
        ready: function (e) {
          console.log(e.type);
        },
        show: function (e) {
          console.log(e.type);
        },
        shown: function (e) {
          console.log(e.type);
        },
        hide: function (e) {
          console.log(e.type);
        },
        hidden: function (e) {
          console.log(e.type);
        },
        view: function (e) {
          console.log(e.type);
        },
        viewed: function (e) {
          console.log(e.type);
        },
        zoom: function (e) {
          console.log(e.type);
        },
        zoomed: function (e) {
          console.log(e.type);
        },
      });
    },

    //设备图片接口
    imgListData(id) {
      let that = this;
      let postData = that.qs.stringify({
        device_id: id,
        page: 1,
        ret: "screen",
      });
      that
        .$axios({
          method: "post",
          url: "/api/api_gateway?method=forecast.forecast_system.equip_photo",
          data: postData,
        })
        .then((res) => {
          that.swiperImg = res.data.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.baseMessage(); //基地信息
    this.switchChu(); //switch轮播
    // this.facilitySurveyA() //设备定位
  },
};
</script>
<style lang="less" scoped>
.bcbd_box {
  width: 100%;
  height: 100%;

  //头部
  .bcbdBox_header {
    // width: 100vw;
    width: 100%;
    // height: 25vh;
    height: 10vh;
    background-position: 45% 0 !important;
  }

  .headerBox_imgA {
    width: 100%;
  }

  //主内容
  .bcbdBox_main {
    // border: 1px solid #fff;
    margin: 0 auto;
    width: 97%;
    display: flex;
    justify-content: space-between;

    //左模块
    .bcbdBox_left {
      width: 25%;
      // border: 1px solid #fff;

      //基地信息等
      .bcbdBoxLeft_base,
      .bcbdBoxLeft_general,
      .bcbdBoxLeft_atAh,
      .bcbdBoxLeft_thermal {
        margin: 0 0 0.25rem 0;
        .header {
          .headerBox {
            display: flex;
            .headerBox_title {
              color: #fff;
              font-size: 16px;
              font-weight: 550;
              margin-left: 0.15rem;
            }
            .headerBox_img {
              height: 13px;
              margin: 0.05rem 0 0 0;
            }
            .headerBox_imgA {
              width: 100%;
            }
          }
        }

        //内容
        .main {
          background-color: rgba(4, 72, 138, 0.4);
          padding: 10px;
          .main_li {
            // width: 80%;
            width: 95%;
            margin: 0.25rem 0 0.25rem 0.05rem;
            display: flex;
            justify-content: start;

            .mainLi_img {
              width: 21px;
              height: 21px;
            }

            .mainLi_name,
            .mainLi_value {
              color: #fff;
              font-size: 15px;
              text-align: left;
              margin-left: 0.1rem;
              background-image: -webkit-linear-gradient(
                bottom,
                rgb(92, 149, 223),
                rgb(232, 231, 238)
              );
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            .mainLi_name {
              // width: 30%;
              // width: 47%;
              text-align: left;
            }
          }
        }
      }

      //设备概况
      .bcbdBoxLeft_general {
        .main {
          display: flex;
          height: 1.5rem;
          .main_li {
            display: block;
            margin: 0 0 0 0.25rem;
            .mainLi_circle {
              background-image: url(../../../assets/images/bigdata/bcbd/7.png);
              position: relative;
              background-repeat: no-repeat;
              background-size: 80% 66%;
              background-position: center top;
              height: 16vh;
              .mainLi_num {
                color: #f8c81c;
                font-size: 30px;
                position: absolute;
                // top: 0.25rem;
                // left: 0.25rem;
                top: 18%;
                left: 28%;
                font-weight: 550;
              }
              .mainLi_unit {
                color: #f8c81c;
                position: absolute;
                // top: 0.55rem;
                // left: 0.7rem;
                top: 36%;
                left: 57%;
                font-size: 15px;
              }
              .mainLi_numA {
                color: #21ef5e;
                font-size: 30px;
                position: absolute;
                // top: 0.25rem;
                // left: 0.25rem;
                top: 18%;
                left: 35%;
                font-weight: 550;
              }
              .mainLi_unitA {
                color: #21ef5e;
                position: absolute;
                // top: 0.55rem;
                // left: 0.7rem;
                top: 36%;
                left: 57%;
                font-size: 15px;
              }
              .mainLi_numB {
                color: #d6368e;
                font-size: 30px;
                position: absolute;
                // top: 0.25rem;
                // left: 0.25rem;
                top: 18%;
                left: 35%;
                font-weight: 550;
              }
              .mainLi_unitB {
                color: #d6368e;
                position: absolute;
                // top: 0.55rem;
                // left: 0.7rem;
                top: 36%;
                left: 57%;
                font-size: 15px;
              }
            }
            .mainLi_title {
              color: #fff;
              font-weight: 550;
              margin: -0.78rem 0 0 0.5rem;
              background-image: -webkit-linear-gradient(
                bottom,
                rgb(92, 149, 223),
                rgb(232, 231, 238)
              );
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }
      }

      //环境温湿度
      .bcbdBoxLeft_atAh {
        .main {
          .chart1 {
            height: 15vh;
          }
        }
      }

      //加热仓温度
      .bcbdBoxLeft_thermal {
        .main {
          .chart2 {
            height: 12vh;
          }
        }
      }
    }

    //中
    .bcbdBox_centre {
      width: 45%;
      // margin: 0 0 0 0.35rem;
      // border: 1px solid #fff;
      .mapCon,
      .bcbdBoxCentre_picture {
        .header {
          .headerBox {
            display: flex;
            .headerBox_title {
              color: #fff;
              font-size: 16px;
              font-weight: 550;
              margin-left: 0.15rem;
            }
            .headerBox_img {
              height: 13px;
              margin: 0.05rem 0 0 0;
            }
            .headerBox_imgA {
              width: 100%;
            }
          }
        }
        /deep/.BMap_cpyCtrl {
          display: none;
        }
        position: relative;
        height: calc(100% - 287px);
        .card01 {
          height: 100%;
        }
        .card01 /deep/.el-card__body {
          padding: 0;
          height: 100%;
        }
        .bm-view {
          height: 100%;
          width: 100%;
          // 设备窗体标题
          .equipInfoWindowTitle {
            border-bottom: 2px solid #35a478;
            line-height: 33px;
            margin-bottom: 5px;
          }
          .equipInfoWindow {
            color: #585858;
            font-size: 14px;
            line-height: 22px;
            span {
              color: #333;
            }
          }
        }
        .legend {
          /deep/.el-card__body {
            padding: 5px 10px;
          }
          position: absolute;
          right: 10px;
          top: 40px;
          font-size: 14px;
          li {
            padding: 5px 0;
            display: flex;
            align-items: center;
          }
          img {
            width: 20px;
            height: auto;
            margin-right: 5px;
          }
        }
      }

      //设备定位
      .mapCon {
        height: 7.24rem;
      }

      //设备图片
      .bcbdBoxCentre_picture {
        margin: 0.65rem 0 0 0;
        height: 2rem;
        .main {
          background-color: rgba(4, 72, 138, 0.4);
          padding: 10px;
          .swiper-container {
            width: 100%;
            height: 1.8rem;
          }
          .swiper-slide {
            width: 25%;
            // margin: 0 10px;
            .swiper-slide-img {
              width: 100%;
            }
          }
        }
      }
    }

    //右
    .bcbdBox_right {
      width: 25%;
      // border: 1px solid #fff;
      .bcbdBoxRight_insect,
      .bcbdBoxRight_status {
        .header {
          .headerBox {
            display: flex;
            .headerBox_title {
              color: #fff;
              font-size: 16px;
              font-weight: 550;
              margin-left: 0.15rem;
            }
            .headerBox_img {
              height: 13px;
              margin: 0.05rem 0 0 0;
            }
            .headerBox_imgA {
              width: 100%;
            }
          }
        }
      }

      //害虫统计
      .bcbdBoxRight_insect {
        .main {
          background-color: rgba(4, 72, 138, 0.4);
          padding: 10px;
          .chart3 {
            height: 20vh;
          }
        }
      }

      //设备状态
      .bcbdBoxRight_status {
        .main {
          background-color: rgba(4, 72, 138, 0.4);
          padding: 10px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          text-decoration: none;
          height: 1.5rem;
          width: 5.8rem;
          height: 100%;
          .main_li {
            display: block;
            width: 1.8rem;
            .mainLi_circle {
              background-image: url(../../../assets/images/bigdata/bcbd/8.png);
              position: relative;
              background-repeat: no-repeat;
              // background-size: 70% 70%;
              background-position: center top;
              height: 16vh;
              .mainLi_val {
                color: #fff;
                font-size: 16px;
                position: absolute;
                // top: 0.5rem;
                // left: 0.45rem;
                top: 25%;
                left: 37%;
                font-weight: 550;
                background-image: -webkit-linear-gradient(
                  bottom,
                  rgb(92, 149, 223),
                  rgb(232, 231, 238)
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                text-align: center;
                // width: 0.4rem;
              }
            }
            .mainLi_title {
              font-size: 17px;
              color: #fff;
              font-weight: 550;
              // margin: -0.5rem 0 0 0.5rem;
              margin: -0.5rem 0 0 0;
              text-align: center;
              background-image: -webkit-linear-gradient(
                bottom,
                rgb(92, 149, 223),
                rgb(232, 231, 238)
              );
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }
      }
    }
  }
}
</style>