<!--  -->
<template>
  <div class="gisbox">
    <div id="mapbox"></div>
    <div class="baseslistbox" v-loading="listloading">
      <div class="listbox_base">
        <p class="sel">
          <el-select
            v-model="baselistitem_id"
            @change="selbasechange"
            placeholder="请选择"
          >
            <el-option
              v-for="item in baselist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </p>
        <p>
          <span>{{ alreadyhave.area_addr[0] }}</span>
          <span>{{ alreadyhave.area_addr[1] }}</span>
          <span>{{ alreadyhave.area_addr[2] }}</span>
        </p>
        <p>
          <i
            class="iconfont icon-zongmianji"
            style="color: #999; font-size: 14px"
          ></i>
          基地面积：{{ alreadyhave.base_area }}
          亩
        </p>
        <p>
          <i
            class="iconfont icon-dikuaishuliang"
            style="color: #999; font-size: 14px"
          ></i>
          地块数量：{{ faclist.length }}
          块
        </p>
      </div>
      <div class="listbox_fac">
        <div class="listbox_facbox">
          <div class="tishi" v-if="faclist.length == 0">暂无地块</div>
          <div
            :class="
              selfacindex == index
                ? 'listbox_facbox_item listbox_facbox_item2'
                : 'listbox_facbox_item'
            "
            
            v-for="(item, index) in faclist"
            :key="index"
            @click="selfac(index)"
            :style="{backgroundColor:item.crop_colors+'50',border:selfacindex == index?'2px solid '+item.crop_colors:'2px solid '+item.crop_colors+'20'}"
          >
            <p class="title">{{ item.massif_name }}</p>
            <p>{{ item.crop_name }}</p>
            <div class="caozuo">
              <div>地块面积：{{ item.massif_area }} 亩</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="equibox">
      <div class="equi_classify">
        <div
          :class="
            basetype == 0
              ? 'equi_classify_item equi_classify_item_avt'
              : 'equi_classify_item'
          "
          @click="
            basetype = 0;
            basetype2 = 0;
          "
        >
          <img src="../../../static/images/gisshow/all.png" alt="" />
          <p>全部设备&nbsp;&nbsp;({{ equipmentlistnum }})</p>
        </div>
        <div
          v-for="(item, index) in equipmentlist"
          :class="
            basetype == item.type_id
              ? 'equi_classify_item equi_classify_item_avt'
              : 'equi_classify_item'
          "
          :key="index"
          @click="basetype = item.type_id"
        >
          <img
            :src="'../../../static/images/map/' + item.type_id + '.png'"
            alt=""
          />
          <p>{{ item.type_name }}&nbsp;&nbsp;({{ item.type_count }})</p>
        </div>
      </div>
      <div class="onlinebox">
        <div
          :class="
            basetype2 == 1
              ? 'onlinebox_item onlinebox_item_act'
              : 'onlinebox_item'
          "
          @click="basetype2 = 1"
        >
          <img src="../../../static/images/gisshow/yujing.gif" alt="" />
          <p>报警设备&nbsp;&nbsp;({{ waringlist.count }})</p>
        </div>
        <div
          :class="
            basetype2 == 2
              ? 'onlinebox_item onlinebox_item_act'
              : 'onlinebox_item'
          "
          @click="basetype2 = 2"
        >
          <img src="../../../static/images/gisshow/yujing.png" alt="" />
          <p>离线设备&nbsp;&nbsp;({{ offlinelist.count }})</p>
        </div>
      </div>
      <div class="showname">
        <p>设备名称：</p>
        <el-switch
          style="display: block"
          v-model="devicenameoff"
          active-color="#4f71ff"
          inactive-color="#ff4949"
          active-text="显示"
          inactive-text="隐藏"
        >
        </el-switch>
      </div>
    </div>
    <el-dialog
      :title="factypalist[factypa]"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
    >
      <div class="jinkong" v-if="factypa == 6" v-loading="infoloading">
        <div class="videobox" v-html="html"></div>
      </div>
      <div class="particulars" v-else v-loading="infoloading">
        <div class="particulars_top">
          <div>
            <p>设备ID：{{ detailsdata.device_id }}</p>
            <p>设备名称：{{ detailsdata.device_name }}</p>
            <p>上报时间：{{ detailsdata.uptime }}</p>
          </div>
          <div>
            <p>设备位置：{{ detailsdata.address }}</p>
          </div>
        </div>
        <div class="particulars_data">
          <p class="particulars_data_title">设备数据</p>
          <!-- <p v-show="detailsdata.conf">暂无数据</p> -->
          <div
            class="particulars_data_item"
            v-show="factypa == 5 || factypa == 8"
          >
            <div
              v-for="(item, key) in detailsdata.conf"
              :key="key"
              class="item_infobox"
            >
              <div v-if="item != ''" class="item_info">
                <div
                  class="imgbox"
                  :style="
                    ' background:' +
                    'url(../../../../static/images/gisshow/' +
                    ((Number(key.slice(1)) % 5) + 2) +
                    'a.png)no-repeat; background-size: 100% 100%;'
                  "
                >
                  <img
                    :src="
                      '../../../../static/images/weather/icon_' +
                      detailsdata.dat[key].split('#')[1] +
                      '.png'
                    "
                    alt=""
                  />
                  <p class="text">{{ detailsdata.dat[key].split("#")[0] }}</p>
                  <p class="text2">{{ detailsdata.conf[key].split("#")[1] }}</p>
                </div>
                <p class="item_info_text">{{ item.split("#")[0] }}</p>
              </div>
            </div>
          </div>
          <div class="particulars_data_item2" v-show="factypa == 3">
            <div
              class="itembox"
              style="
                background: url(../../../../static/images/gisshow/3a.png)
                  no-repeat;
                background-size: 100% 100%;
              "
            >
              <p>{{ detailsdata.ds ? "开机" : "关机" }}</p>
              <p>在线状态</p>
            </div>
            <div
              class="itembox"
              style="
                background: url(../../../../static/images/gisshow/4a.png)
                  no-repeat;
                background-size: 100% 100%;
              "
            >
              <p>{{ detailsdata.ts == "1" ? "时控" : "光控" }}</p>
              <p>定时模式</p>
            </div>
            <div
              class="itembox"
              style="
                background: url(../../../../static/images/gisshow/5a.png)
                  no-repeat;
                background-size: 100% 100%;
              "
            >
              <p>{{ detailsdata.rps == "1" ? "雨控" : "正常" }}</p>
              <p>雨控模式</p>
            </div>
            <div
              class="itembox"
              style="
                background: url(../../../../static/images/gisshow/6a.png)
                  no-repeat;
                background-size: 100% 100%;
              "
            >
              <p>{{ detailsdata.tph }}℃</p>
              <p>高温限值</p>
            </div>
            <div
              class="itembox"
              style="
                background: url(../../../../static/images/gisshow/7a.png)
                  no-repeat;
                background-size: 100% 100%;
              "
            >
              <p>{{ detailsdata.tpl }}℃</p>
              <p>低温限值</p>
            </div>
            <div
              class="itembox"
              style="
                background: url(../../../../static/images/gisshow/3a.png)
                  no-repeat;
                background-size: 100% 100%;
              "
            >
              <p>{{ detailsdata.csq }}</p>
              <p>信号强度</p>
            </div>
            <div
              class="itembox"
              style="
                background: url(../../../../static/images/gisshow/4a.png)
                  no-repeat;
                background-size: 100% 100%;
              "
            >
              <p>{{ detailsdata.hs == "1" ? "加热" : "正常" }}</p>
              <p>加热状态</p>
            </div>
          </div>
          <div class="particulars_data_item3" v-show="factypa == 7">
            <div
              class="itembox"
              style="
                background: url(../../../../static/images/gisshow/3a.png)
                  no-repeat;
                background-size: 100% 100%;
              "
            >
              <p>{{ detailsdata.ws ? "开机" : "关机" }}</p>
              <p>设备开关</p>
            </div>
            <div
              class="itembox"
              style="
                background: url(../../../../static/images/gisshow/4a.png)
                  no-repeat;
                background-size: 100% 100%;
              "
            >
              <p>{{ detailsdata.at }}℃</p>
              <p>环境温度</p>
            </div>
            <div
              class="itembox"
              style="
                background: url(../../../../static/images/gisshow/5a.png)
                  no-repeat;
                background-size: 100% 100%;
              "
            >
              <p>{{ detailsdata.ah }}%RH</p>
              <p>环境湿度</p>
            </div>
            <div
              class="itembox"
              style="
                background: url(../../../../static/images/gisshow/6a.png)
                  no-repeat;
                background-size: 100% 100%;
              "
            >
              <p>{{ detailsdata.set_temp }}℃</p>
              <p>保温仓设定温度</p>
            </div>
            <div
              class="itembox"
              style="
                background: url(../../../../static/images/gisshow/7a.png)
                  no-repeat;
                background-size: 100% 100%;
              "
            >
              <p>{{ detailsdata.pre_temp }}℃</p>
              <p>保温仓设定湿度</p>
            </div>
            <div
              class="itembox"
              style="
                background: url(../../../../static/images/gisshow/3a.png)
                  no-repeat;
                background-size: 100% 100%;
              "
            >
              <p>
                {{
                  detailsdata.work_sta == 0
                    ? "待机"
                    : detailsdata.work_sta == 1
                    ? "收集"
                    : detailsdata.work_sta == 0
                    ? "培养"
                    : "拍照"
                }}
              </p>
              <p>工作状态</p>
            </div>
          </div>
        </div>
        <div class="particulars_wra" v-show="factypa == 3 || factypa == 7">
          <p class="particulars_wra_title">设备图片</p>
          <div class="imgbox">
            <img
              v-for="(item, index) in detailsdata.img_list"
              :src="item"
              :key="index"
              alt=""
              v-viewer
            />
          </div>
        </div>
        <div class="particulars_wra">
          <div style="display: flex" v-if="factypa == 3">
            <p>预警信息：</p>
            <p v-if="detailsdata.warning_info.warning_content">
              <span
                v-for="(items, key) in detailsdata.warning_info.warning_content"
                :key="key"
              >
                {{ key }}：{{ items }}
                <span>、</span>
              </span>
            </p>
            <p v-else>无</p>
          </div>
          <div style="display: flex" v-if="factypa == 5 || factypa == 8">
            <p>预警信息：</p>
            <p v-if="detailsdata.warning_info.ekey">
              当前{{ detailsdata.warning_info.ekey.split("#")[0]
              }}{{ detailsdata.warning_info.current_value
              }}{{ detailsdata.warning_info.ekey.split("#")[1]
              }}{{
                detailsdata.warning_info.warning_content.slice(0, 2)
              }}用户设置预警值{{ detailsdata.warning_info.set_value
              }}{{ detailsdata.warning_info.ekey.split("#")[1] }}
            </p>
            <p v-else>无</p>
          </div>
          <div style="display: flex" v-if="factypa == 7">
            <p>预警信息：</p>
            <p v-if="detailsdata.warning_info.title">
              {{ detailsdata.warning_info.title }}
              {{ detailsdata.warning_info.describe }}
            </p>
            <p v-else>无</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      map: null,
      center: [116.412427, 39.303573],
      baselistitem_id: "",
      baselist: [], //基地列表
      alreadyhave: {
        area_addr: [],
      }, //基地信息
      faclist: [], //地块列表
      facpolylist: [], //地块图层列表
      equipmentlistnum: "", //设备数量
      equipmentlist: [], //设备列表
      equipmentpolylist: [], //设备图层列表
      offlinelist: {
        count: 0,
      },
      waringlist: {
        count: 0,
      },
      basetype: 0, //0所有 3测报 5环境 6监控 7病害 8墒情
      basetype2: 0, //0所有 1报警 2离线
      dialogVisible: false,
      detailsdata: {
        warning_info: {},
      }, //设备数据
      factypa: "", //所选设备类型
      html: "",
      factypalist: {
        3: "虫情监测",
        5: "气象监测",
        6: "监控设备",
        7: "病害监测",
        8: "墒情监测",
      },
      listloading: false,
      infoloading: false,
      player: null,
      devicenameoff: false,
      devilist: [],
      selfacindex: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    basetype(val) {
      this.getdevlist();
    },
    basetype2(val) {
      this.getdevlist();
    },
    dialogVisible(val) {
      if (!val && this.player) {
        this.player.stop();
      }
    },
    devicenameoff(val) {
      if (val) {
        console.log(this.equipmentpolylist);
        for (var i = 0; i < this.equipmentpolylist.length; i++) {
          for (var j = 0; j < this.devilist.length; j++) {
            if (
              this.equipmentpolylist[i]._opts.data == this.devilist[j].device_id
            ) {
              // console.log(this.devilist[j].device_name);
              this.equipmentpolylist[i].setLabel({
                direction: "top",
                offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
                content:
                  `<div class='basecontent'>` +
                  this.devilist[j].device_name +
                  `</div>`, //设置文本标注内容
              });
            }
          }
        }
      } else {
        for (var i = 0; i < this.equipmentpolylist.length; i++) {
          this.equipmentpolylist[i].setLabel({
            direction: "top",
            offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
            content: "", //设置文本标注内容
          });
        }
      }
    },
  },
  //方法集合
  methods: {
    getcenter() {
      this.$axios({
        method: "post",
        url: "api/api_gateway?method=basemanager.baseinfo.list_land_base",
        data: this.qs.stringify({
          page: 1,
          page: 999999,
        }),
      }).then((res) => {
        if (res.data.data) {
          console.log(res);
          var data = res.data.data.data;
          this.center = JSON.parse(data[0].coordinates)[0];
          this.init();
        }
      });
    },
    init() {
      var map = new AMap.Map("mapbox", {
        center: this.center,
        resizeEnable: true,
        zoom: 15,
        lang: "en",
        layers: [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,
        });
      });
      this.map = map;
      this.getbaselist();
    },
    getbaselist() {
      this.listloading = true;
      this.$axios({
        method: "post",
        url: "api/api_gateway?method=basemanager.baseinfo.list_land_base",
        data: this.qs.stringify({
          page: 1,
          page_size: 999999,
        }),
      }).then((res) => {
        if (res.data.data) {
          console.log(res);
          var data = res.data.data.data;
          for (var i = 0; i < data.length; i++) {
            var obj = {
              value: data[i].base_id,
              label: data[i].base_name,
            };
            this.baselist.push(obj);
            var polygonArr = JSON.parse(data[i].coordinates);
            var baseplay = new AMap.Polygon({
              map: this.map,
              path: polygonArr, //设置多边形边界路径
              strokeColor: "#4f71ff", //线颜色
              strokeOpacity: 0.5, //线透明度
              strokeWeight: 3, //线宽
              fillColor: "#1791fc", //填充色
              fillOpacity: 0.35, //填充透明度
              data: data[i].base_id,
            });
            baseplay.on("click", (e) => {
              // console.log(e.target._opts.data)
              this.baselistitem_id = e.target._opts.data;
              this.selbasechange();
            });
            // this.map.setFitView();
          }
          this.baselistitem_id = data[0].base_id;
          this.alreadyhave = data[0];
          this.getbasepoltlist();
          this.getpoltlist();
        }
      });
    },
    selbasechange() {
      this.selfacindex = 0
      this.devicenameoff = false
      this.getbaselistinfo();
      this.getbasepoltlist();
      this.getpoltlist();
    },
    getbaselistinfo() {
      this.$axios({
        method: "post",
        url: "api/api_gateway?method=basemanager.baseinfo.list_land_base",
        data: this.qs.stringify({
          base_id: this.baselistitem_id,
        }),
      }).then((res) => {
        if (res.data.data) {
          console.log(res);
          var data = res.data.data.data;
          this.alreadyhave = data[0];
          this.map.setZoomAndCenter(15, [
            JSON.parse(data[0].coordinates)[0][0],
            JSON.parse(data[0].coordinates)[0][1],
          ]);
        }
      });
    },
    getbasepoltlist() {
      this.$axios({
        method: "post",
        url: "api/api_gateway?method=basemanager.baseinfo.get_massif_list",
        data: this.qs.stringify({
          base_id: this.baselistitem_id,
        }),
      }).then((res) => {
        // this.loading = false;
        this.listloading = false;
        if (res.data.data) {
          var data = res.data.data.data;
          this.faclist = data;
        }
      });
    },
    getpoltlist() {
      for (var i = 0; i < this.facpolylist.length; i++) {
        this.map.remove(this.facpolylist[i]);
      }
      this.$axios({
        method: "post",
        url: "api/api_gateway?method=basemanager.baseinfo.get_massif_list",
        data: this.qs.stringify({
          base_id: this.baselistitem_id,
          page: 1,
          page_size: 9999999,
        }),
      }).then((res) => {
        // this.loading = false;
        if (res.data.data) {
          var data = res.data.data.data;
          //   this.faclist = data;
          console.log(data);
          this.polygons = [];
          var ploritem = "";
          for (var i = 0; i < data.length; i++) {
            var polygonArr = JSON.parse(data[i].coordinates);
            if (i == 0) {
              ploritem = new AMap.Polygon({
                map: this.map,
                path: polygonArr, //设置多边形边界路径
                strokeColor: data[i].crop_colors, //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 3, //线宽
                fillColor: data[i].crop_colors, //填充色
                fillOpacity: 0.7, //填充透明度
                data: data[i].base_id,
              });
            } else {
              ploritem = new AMap.Polygon({
                map: this.map,
                path: polygonArr, //设置多边形边界路径
                strokeColor: data[i].crop_colors, //线颜色
                strokeOpacity: 0.5, //线透明度
                strokeWeight: 3, //线宽
                fillColor: data[i].crop_colors, //填充色
                fillOpacity: 0.35, //填充透明度
                data: data[i].base_id,
              });
            }
            this.facpolylist.push(ploritem);
            ploritem.on("click", (e) => {
              // console.log(e.target._opts.data)
              this.baselistitem_id = e.target._opts.data;
              this.selbasechange();
            });
          }
          //   this.map.remove(ploritem)
          this.getdevlist();
        }
      });
    },
    getdevlist() {
      for (var i = 0; i < this.equipmentpolylist.length; i++) {
        this.map.remove(this.equipmentpolylist[i]);
      }
      this.$axios({
        method: "post",
        url: "api/api_gateway?method=basemanager.device.list_land_device",
        data: this.qs.stringify({
          base_id: this.baselistitem_id,
          page: 1,
          page_size: 99999999,
        }),
      }).then((res) => {
        // this.baseloading = false;
        if (res.data.data) {
          var data = res.data.data.data;
          //   this.faclist = data;
          this.devilist = data;
          this.equipmentlist = res.data.data.statistic;
          this.equipmentlistnum = res.data.data.total_num;
          this.waringlist = res.data.data.waring;
          this.offlinelist = res.data.data.offline;
          var warn_and_off = res.data.data.warn_and_off.result;
          console.log(data);
          for (var i = 0; i < data.length; i++) {
            // console.log(data[i].offline)
            if (this.basetype != 0) {
              if (data[i].device_type_id != this.basetype) {
                console.log(data[i].device_type_id, this.basetype);
                data.splice(i, 1);
                i--;
              }
            }
          }
          for (var i = 0; i < data.length; i++) {
            // console.log(data[i].offline)
            if (this.basetype2 == 1) {
              if (!data[i].is_warning) {
                data.splice(i, 1);
                i--;
              }
              // i--
            } else if (this.basetype2 == 2) {
              if (!data[i].offline) {
                data.splice(i, 1);
                i--;
              }
            }
          }
          console.log(data);
          for (var i = 0; i < data.length; i++) {
            var url =
              "../../../static/images/gisshow/" +
              data[i].device_type_id +
              ".png";
            for (var j = 0; j < this.waringlist.result.length; j++) {
              if (data[i].device_id == this.waringlist.result[j]) {
                url =
                  "../../../static/images/gisshow/" +
                  data[i].device_type_id +
                  ".gif";
              }
            }
            for (var j = 0; j < this.offlinelist.result.length; j++) {
              if (data[i].device_id == this.offlinelist.result[j]) {
                url =
                  "../../../static/images/gisshow/" +
                  data[i].device_type_id +
                  "off.png";
                for (let k = 0; k < warn_and_off.length; k++) {
                  console.log(data[i].device_id, warn_and_off[k]);
                  if (data[i].device_id == warn_and_off[k]) {
                    url =
                      "../../../static/images/gisshow/" +
                      data[i].device_type_id +
                      "off.gif";
                  }
                }
              }
            }
            var icon = new AMap.Icon({
              size: new AMap.Size(30, 30),
              image: url,
              imageSize: new AMap.Size(30, 30),
            });
            //创建marker
            console.log(JSON.parse(data[i].coordinates));
            var qrum = new AMap.Marker({
              position: new AMap.LngLat(
                JSON.parse(data[i].coordinates)[0],
                JSON.parse(data[i].coordinates)[1]
              ),
              icon: icon,
              map: this.map,
              offset: new AMap.Pixel(-15, -30),
              data: data[i].device_id,
              qrtype: data[i].device_type_id,
            });
            this.equipmentpolylist.push(qrum);
            qrum.on("click", (e) => {
              console.log(e.target._opts.qrtype);
              var typeid = e.target._opts.qrtype;
              this.dialogVisible = true;
              this.factypa = e.target._opts.qrtype;
              this.infoloading = true;
              if (typeid == 5 || typeid == 8) {
                this.getqxzinfo(e.target._opts.data);
              } else if (typeid == 3) {
                this.getcbdinfo(e.target._opts.data);
              } else if (typeid == 7) {
                this.getbzyinfo(e.target._opts.data);
              } else if (typeid == 6) {
                this.getjklist(e.target._opts.data);
              }
              //   this.baselistitem_id = e.target._opts.data;
              //   this.selbasechange();
            });
          }
        }
      });
    },
    getqxzinfo(id) {
      this.$axios({
        method: "post",
        url: "api/api_gateway?method=basemanager.device.get_qxz_or_sq_info",
        data: this.qs.stringify({
          device_id: id,
        }),
      }).then((res) => {
        this.infoloading = false;
        if (res.data.data) {
          console.log(res.data.data);
          this.detailsdata = res.data.data;
        }
      });
    },
    getcbdinfo(id) {
      this.$axios({
        method: "post",
        url: "api/api_gateway?method=basemanager.device.get_cbd_info",
        data: this.qs.stringify({
          device_id: id,
        }),
      }).then((res) => {
        this.infoloading = false;
        if (res.data.data) {
          console.log(res.data.data);
          this.detailsdata = res.data.data;
        }
      });
    },
    getbzyinfo(id) {
      this.$axios({
        method: "post",
        url: "api/api_gateway?method=basemanager.device.get_bzy_info",
        data: this.qs.stringify({
          device_id: id,
        }),
      }).then((res) => {
        this.infoloading = false;
        if (res.data.data) {
          console.log(res.data.data);
          this.detailsdata = res.data.data;
        }
      });
    },
    getjklist(id) {
      this.$axios({
        url: "/api/api_gateway?method=camera.camera_manage.addr_camera_list",
        method: "POST",
        data: this.qs.stringify({ device_id: id }),
      }).then((res) => {
        this.infoloading = false;
        if (res.data.data) {
          console.log(res.data.data);
          let data = eval("(" + res.data.data + ")");
          let rtmpHdSrc = data.rtmp;
          let hlsHdSrc = data.hlsHd;
          // console.log(rtmpHdSrc);
          //插件
          this.html =
            '<video id="myPlayer" autoplay  controls playsInline webkit-playsinline [autoplay] style="width:100%; height:100%;"><source src="' +
            hlsHdSrc +
            '" type="application/x-mpegURL"></video>';
          setTimeout(() => {
            let player = new EZUIKit.EZUIPlayer(myPlayer);
            player.play();
            this.player = player;
          }, 1000);
        }
      });
    },
    selfac(index) {
      this.selfacindex = index
      for (var i = 0; i < this.facpolylist.length; i++) {
        console.log(this.facpolylist[i])
        if (i == index) {
          this.facpolylist[i].setOptions({
            strokeColor: this.facpolylist[i]._opts.strokeColor, //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 3, //线宽
            fillColor: this.facpolylist[i]._opts.fillColor, //填充色
            fillOpacity: 0.7, //填充透明度
          });
        } else {
          this.facpolylist[i].setOptions({
            strokeColor: this.facpolylist[i]._opts.strokeColor, //线颜色
            strokeOpacity: 0.5, //线透明度
            strokeWeight: 3, //线宽
            fillColor: this.facpolylist[i]._opts.fillColor, //填充色
            fillOpacity: 0.35, //填充透明度
          });
        }
      }
    },
    // basemanager.device.list_land_device
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getcenter();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.gisbox {
  width: 100%;
  height: 100%;
  position: relative;
  #mapbox {
    width: 100%;
    height: 100%;
    /deep/.amap-logo {
      display: none !important;
    }
    /deep/.amap-copyright {
      display: none !important;
    }
  }
  .baseslistbox {
    position: absolute;
    width: 350px;
    height: 95%;
    top: 2.5%;
    right: 15px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    .listbox_base {
      width: 100%;
      border-bottom: 1px solid #f2f2f2;
      .sel {
        width: 100%;
        /deep/.el-select {
          width: 100%;
          .el-input__inner {
            border: 0;
            font-size: 28px;
            padding: 0;
          }
          .el-select__caret {
            color: #000;
          }
        }
      }
      p {
        font-size: 14px;
        margin-bottom: 12px;
        overflow: hidden; //溢出隐藏
        white-space: nowrap; //禁止换行
        text-overflow: ellipsis; //...
        color: #262626;
      }
      //   p:first-child {
      //     font-size: 30px;
      //     margin-bottom: 10px;
      //     color: #262626;
      //   }
    }
    .listbox_fac {
      width: 100%;
      height: calc(100% - 133px);
      .listbox_facbox {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        .tishi {
          width: 100%;
          padding: 20px 0;
          box-sizing: border-box;
          text-align: center;
        }
        .listbox_facbox_item {
          width: 100%;
          // background-color: #ecf5ff;
          padding: 10px;
          box-sizing: border-box;
          margin-top: 14px;
          border-radius: 4px;
          p {
            font-size: 14px;
            color: #262626;
          }
          .title {
            font-size: 16px;
            margin-bottom: 10px;
            // font-weight: 700;
            overflow: hidden; //溢出隐藏
            white-space: nowrap; //禁止换行
            text-overflow: ellipsis; //...
            color: #262626;
          }
          .caozuo {
            display: flex;
            font-size: 14px;
            margin-top: 5px;
            div:first-child {
              width: 70%;
              overflow: hidden; //溢出隐藏
              white-space: nowrap; //禁止换行
              text-overflow: ellipsis; //...
            }
            div:nth-child(2) {
              display: flex;
              P {
                margin-left: 10px;
                cursor: pointer;
              }
              p:first-child {
                color: #4f71ff;
              }
              P:last-child {
                color: red;
              }
            }
          }
        }
        // .listbox_facbox_item2 {
          // border: 1px solid rgba(79, 113, 255, 1);
          // background-color: rgb(212, 233, 250);
        // }
      }
    }
  }
  .equibox {
    position: absolute;
    top: 2.5%;
    left: 15px;
    .equi_classify {
      display: flex;
      background-color: #fff;
      padding: 10px 10px;
      border-radius: 5px;
      .equi_classify_item {
        font-size: 14px;
        border-right: 1px solid rgba(216, 216, 216, 1);
        padding: 0px 20px;
        display: flex;
        color: #262626;
        cursor: pointer;
        img {
          width: 20px;
          width: 20px;
          margin-right: 7px;
        }
      }
      .equi_classify_item:first-child {
        img {
          width: 15px;
          width: 15px;
          margin-top: 2px;
          margin-right: 7px;
        }
      }
      .equi_classify_item:last-child {
        border-right: 0px;
      }
      .equi_classify_item_avt {
        color: #4f71ff;
      }
    }
    .onlinebox {
      margin-top: 15px;
      background-color: #fff;
      padding: 8px 10px;
      border-radius: 5px;
      width: 120px;
      font-size: 14px;
      .onlinebox_item {
        height: 30px;
        line-height: 30px;
        display: flex;
        color: #262626;
        cursor: pointer;
        img {
          width: 20px;
          height: 20px;
          vertical-align: middle;
          display: inline-block;
          margin-top: 4px;
          margin-right: 7px;
        }
      }
      .onlinebox_item_act {
        color: #4f71ff;
      }
    }
    .showname {
      margin-top: 15px;
      background-color: #fff;
      padding: 8px 10px;
      border-radius: 5px;
      width: 190px;
      font-size: 14px;
      display: flex;
    }
  }
}
.jinkong {
  width: 100%;
}
.particulars {
  width: 100%;
  .particulars_top {
    width: 100%;
    margin-bottom: 16px;
    div {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
  }
  .particulars_data {
    width: 100%;
    .particulars_data_title {
      font-size: 18px;
      margin-bottom: 10px;
    }
    .particulars_data_item {
      display: flex;
      flex-wrap: wrap;
      .item_infobox {
        .item_info {
          margin-bottom: 15px;
          margin-right: 25px;
          width: 70px;
          .imgbox {
            width: 80px;
            height: 80px;
            position: relative;
            // margin: 0 auto;
            img {
              width: 30px;
              height: 30px;
              // margin-left: 25%;
              position: absolute;
              top: 50%;
              left: 50%;
              margin-top: -15px;
              margin-left: -15px;
            }
            .text {
              width: 100%;
              position: absolute;
              bottom: 5px;
              left: 0;
              color: #fff;
              text-align: center;
            }
            .text2 {
              position: absolute;
              top: 5px;
              right: 5px;
              color: #fff;
            }
          }
          .item_info_text {
            width: 80px;
            text-align: center;
            margin-top: 5px;
          }
        }
      }
    }
    .particulars_data_item2 {
      display: flex;
      .itembox {
        width: 100%/8;
        height: 100px;
        margin-right: 15px;
        padding-top: 25px;
        box-sizing: border-box;
        text-align: center;
        color: #fff;
        p {
          margin-bottom: 10px;
        }
      }
    }
    .particulars_data_item3 {
      display: flex;
      .itembox {
        width: 100%/8;
        height: 100px;
        margin-right: 15px;
        padding-top: 25px;
        box-sizing: border-box;
        text-align: center;
        color: #fff;
        p {
          margin-bottom: 10px;
        }
      }
    }
  }
  .particulars_wra {
    width: 100%;
    margin-top: 16px;
    .particulars_wra_title {
      font-size: 18px;
      margin-bottom: 10px;
    }
    .imgbox {
      width: 33%;
      display: flex;
      justify-content: space-between;
      img {
        width: 100%;
      }
    }
  }
}
/deep/.amap-marker-label {
  border: 0;
  padding: 5px 16px;
  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.8);
  color: #252525;
}
</style>