<template>
  <div class="Vbox">
    <div class="head">
      <!-- <div class="VisTitle"></div> -->
    </div>
    <div class="container">
      <div class="center">
        <div ref="mapContainer" class="allmap"></div>
      </div>
      <div class="left">
        <div class="rightParkBox">
          <div class="rightParkTtile">
            <div>设备状态</div>
            <div @click="dialogTableVisible = true">设备列表></div>
          </div>
          <div class="rightParkContent">
            <div class="SBZT_right">
              <div class="SBZT_onLine">
                <img src="../../../../assets/visualizationimg/onLine.png" alt="" />
                <div style="color: #44eefb; font-size: 20px; font-weight: bold">
                  在线:351
                </div>
              </div>
              <div class="SBZT_onLine">
                <img src="../../../../assets/visualizationimg/offline.png" alt="" />
                <div style="color: #ccc; font-size: 20px; font-weight: bold">离线:20</div>
              </div>
            </div>
            <div class="SBZT_center">
              <PieEcharts :message="PieChartData"></PieEcharts>
            </div>
            <div class="SBZT_left">
              <div class="SBZT_onLine">
                <img src="../../../../assets/visualizationimg/warn.png" alt="" />
                <div style="color: #5470c6; font-size: 20px; font-weight: bold">
                  告警:50
                </div>
              </div>
              <div class="SBZT_onLine">
                <img src="../../../../assets/visualizationimg/fault.png" alt="" />
                <div style="color: #5470c6; font-size: 20px; font-weight: bold">
                  故障:30
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="leftTwoBox">
          <div class="leftGDPTitle">井盖监控</div>
          <div class="leftGDPContent">
            <div class="jgjk_box">
              <div class="Jklb_table">
                <div
                  class="JKlb_name"
                  v-for="(item, index) in JgjkData"
                  :key="index"
                  :class="{ JGJKActive: jgjkactiveTab === index }"
                  @click="JgjksetActiveTab(index, item)"
                >
                  {{ item.name }}
                </div>
              </div>
              <div class="JKLB_Video">
                <video class="Video_url" controls :src="videoSource"></video>
              </div>
            </div>
          </div>
        </div>
        <div class="leftThreeBox">
          <div class="leftTaxationTitle">告警信息</div>
          <el-scrollbar height="calc(100% - 40px)">
            <div class="leftTaxationContent">
              <div class="GJXX_table">
                <div
                  class="GJXX_name"
                  v-for="(item, index) in GJXXData"
                  :style="{ backgroundImage: 'url(' + item.img + ')' }"
                >
                  <div class="">
                    {{ item.id }}
                  </div>
                  <div class="">
                    {{ item.text }}
                  </div>
                  <div class="" style="cursor: pointer">
                    {{ item.stateData }}
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>

      <div class="boxBottom">
        <div class="Vgradation">
          <div
            class="tab"
            v-for="(item, index) in gradationMun"
            :key="index"
            :class="{ active: activeTab === index }"
            @click="setActiveTab(index, item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>

      <div class="right">
        <div class="leftOneBox">
          <div class="leftOBTitle">运行状态</div>
          <div class="leftOBContent">
            <div class="SBZT_right">
              <div class="SBZT_onLine">
                <img src="../../../../assets/visualizationimg/kq.png" alt="" />
                <div style="color: #44eefb; font-size: 20px; font-weight: bold">
                  开启:351
                </div>
              </div>
              <div class="SBZT_onLine">
                <img src="../../../../assets/visualizationimg/hd.png" alt="" />
                <div style="color: #ccc; font-size: 20px; font-weight: bold">晃动:20</div>
              </div>
            </div>
            <div class="SBZT_center">
              <PieEcharts :message="PieChartDataTwo"></PieEcharts>
            </div>
            <div class="SBZT_left">
              <div class="SBZT_onLine">
                <img src="../../../../assets/visualizationimg/qs.png" alt="" />
                <div style="color: #5470c6; font-size: 20px; font-weight: bold">
                  潜水:50
                </div>
              </div>
              <div class="SBZT_onLine">
                <img src="../../../../assets/visualizationimg/fg.png" alt="" />
                <div style="color: #5470c6; font-size: 20px; font-weight: bold">
                  翻盖:30
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="leftTwo_GDCL">
          <div class="leftOBTitle">工单处理</div>
          <el-scrollbar height="calc(100% - 90px)">
            <div class="GJXX_table">
              <div
                class="GJXX_name"
                v-for="(item, index) in GDCLData"
                :key="index"
                :class="{ active: item.stateNumber === 0 }"
                :style="{ backgroundImage: 'url(' + item.img + ')' }"
              >
                <div class="">
                  {{ item.id }}
                </div>
                <div class="">
                  {{ item.text }}
                </div>
                <div class="">
                  {{ item.stateData }}
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogTableVisible" title="设备列表">
    <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="序号" width="80" />
      <el-table-column prop="SBBH" label="设备编号" />
      <el-table-column prop="address" label="地址" width="300" />
      <el-table-column
        prop="tag"
        label="状态"
        :filters="[
          { text: '在线', value: 'onLine' },
          { text: '离线', value: 'offLine' },
          { text: '故障', value: 'fault' },
          { text: '告警', value: 'alarm' },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.tag === 'onLine'" type="success" disable-transitions>{{
            scope.row.tagtext
          }}</el-tag>
          <el-tag v-if="scope.row.tag === 'offLine'" type="info" disable-transitions>{{
            scope.row.tagtext
          }}</el-tag>
          <el-tag v-if="scope.row.tag === 'fault'" type="error" disable-transitions>{{
            scope.row.tagtext
          }}</el-tag>
          <el-tag v-if="scope.row.tag === 'alarm'" type="warning" disable-transitions>{{
            scope.row.tagtext
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="时间"
        sortable
        column-key="date"
        :filters="[
          { text: '2016-05-01', value: '2016-05-01' },
          { text: '2016-05-02', value: '2016-05-02' },
          { text: '2016-05-03', value: '2016-05-03' },
          { text: '2016-05-04', value: '2016-05-04' },
        ]"
        :filter-method="filterHandler"
      />
      <!-- <el-table-column prop="address" label="操作" /> -->
    </el-table>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from "vue";
import PieEcharts from "@/components/baseEcharts/pieChart.vue";

import GJXXYCL from "@/assets/visualizationimg/GJXXYCL.png";
import GJXXDCL from "@/assets/visualizationimg/GJXXDCL.png";
import ALL from "@/assets/visualizationimg/all.png";
import FZ from "@/assets/visualizationimg/FZ.png";
import HDT from "@/assets/visualizationimg/HDT.png";
import YS from "@/assets/visualizationimg/YS.png";
import JW from "@/assets/visualizationimg/JW.png";
const mapContainer = ref(null);
const dialogTableVisible = ref(false);

const filterTag = (value, row) => {
  return row.tag === value;
};
const filterHandler = (value, row, column) => {
  const property = column["property"];
  return row[property] === value;
};

const tableData = [
  {
    id: 1,
    SBBH: "ZTD95588",
    address: "东方大道与三号路交叉处",
    state: "0",
    date: "2016-05-03",
    CLState: "",
    tagtext: "在线",
    tag: "onLine",
  },
  {
    id: 1,
    SBBH: "ZTD95588",
    address: "东方大道与三号路交叉处",
    state: "0",
    date: "2016-05-03",
    CLState: "",
    tagtext: "离线",
    tag: "offLine",
  },
  {
    id: 1,
    SBBH: "ZTD95588",
    address: "东方大道与三号路交叉处",
    state: "0",
    date: "2016-05-03",
    CLState: "",
    tagtext: "故障",
    tag: "fault",
  },
  {
    id: 1,
    SBBH: "ZTD95588",
    address: "东方大道与三号路交叉处",
    state: "0",
    date: "2016-05-03",
    CLState: "",
    tagtext: "告警",
    tag: "alarm",
  },
];
const gradationMun = [
  {
    name: "全部",
    state: 3,
    type: "A",
  },
  {
    name: "翻转",
    state: 2,
    type: "B",
  },
  {
    name: "晃动",
    state: 1,
    type: "C",
  },
  {
    name: "溢水",
    state: 4,
    type: "D",
  },
  {
    name: "甲烷",
    state: 5,
    type: "E",
  },
];

const PieChartData = [
  {
    value: 351,
    name: "在线",
  },
  {
    value: 20,
    name: "离线",
  },
  {
    value: 50,
    name: "故障",
  },
  {
    value: 30,
    name: "报警",
  },
];

const PieChartDataTwo = [
  {
    value: 50,
    name: "潜水",
  },
  {
    value: 20,
    name: "晃动",
  },
  {
    value: 351,
    name: "开启",
  },
  {
    value: 30,
    name: "翻盖",
  },
];

const JgjkData = [
  {
    value: 351,
    name: "一号监控",
  },
  {
    value: 20,
    name: "二号监控",
  },
  {
    value: 50,
    name: "三号监控",
  },
  {
    value: 30,
    name: "四号监控",
  },
  {
    value: 30,
    name: "五号监控",
  },
];
const GJXXData = [
  {
    id: 1,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXDCL,
  },
  {
    id: 2,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXDCL,
  },
  {
    id: 3,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXDCL,
  },
  {
    id: 4,
    stateData: "查看详情",
    stateNumber: 0,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXYCL,
  },
  {
    id: 5,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXDCL,
  },
  {
    id: 6,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXDCL,
  },
  {
    id: 7,
    stateData: "查看详情",
    stateNumber: 0,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXYCL,
  },
  {
    id: 8,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXDCL,
  },
  {
    id: 9,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXDCL,
  },
];

const GDCLData = [
  {
    id: 1,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXYCL,
  },
  {
    id: 2,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: "",
  },
  {
    id: 3,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXYCL,
  },
  {
    id: 4,
    stateData: "已处理",
    stateNumber: 0,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: "",
  },
  {
    id: 5,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXYCL,
  },
  {
    id: 6,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: "",
  },
  {
    id: 7,
    stateData: "已处理",
    stateNumber: 0,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXYCL,
  },
  {
    id: 8,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: "",
  },
  {
    id: 9,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXYCL,
  },
  {
    id: 10,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: "",
  },
  {
    id: 11,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXYCL,
  },
  {
    id: 12,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: "",
  },
  {
    id: 13,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXYCL,
  },
  {
    id: 14,
    stateData: "已处理",
    stateNumber: 0,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: "",
  },
  {
    id: 15,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXYCL,
  },
  {
    id: 16,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: "",
  },
  {
    id: 17,
    stateData: "已处理",
    stateNumber: 0,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXYCL,
  },
  {
    id: 18,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: "",
  },
  {
    id: 19,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: GJXXYCL,
  },
  {
    id: 20,
    stateData: "待处理",
    stateNumber: 1,
    text: "江景路223号Z23232井盖发生人为挪动进行检修",
    img: "",
  },
];
const activeTab = ref(0); // 默认激活第一个tab
const jgjkactiveTab = ref(0); // 默认激活第一个tab
let IMGICon = null;
const setActiveTab = (index, value) => {
  var allOverlay = map.getOverlays();
  for (var i = 0; i < allOverlay.length; i++) {
    if (allOverlay[i].toString() == "Marker") {
      map.removeOverlay(allOverlay[i]);
    }
  }
  console.log(value.type);
  switch (value.type) {
    case "A":
      IMGICon = ALL;
      console.log(value);
      getImgType(0, 17);
      break;
    case "B":
      IMGICon = FZ;
      getImgType(4, 8);
      break;
    case "C":
      IMGICon = HDT;
      getImgType(8, 12);
      break;
    case "D":
      IMGICon = YS;
      getImgType(12, 15);
      break;
    case "E":
      IMGICon = JW;
      getImgType(15, 17);
      break;
  }

  activeTab.value = index;
};

const getImgType = (start, end) => {
  fetch("../jwdata.json")
    .then((response) => response.json())
    .then((data) => {
      var points = data.list;
      // for (var j = 0; j < points.length; j++) {
      for (var j = start; j < end; j++) {
        var lng = points[j].lng;
        var lat = points[j].lat;
        const markers = new BMapGL.Point(lng, lat);
        let dayOfWeek = new Date().getDay();
        switch (points[j].state) {
          case "A":
            IMGICon = ALL;
            break;
          case "B":
            IMGICon = FZ;
            break;
          case "C":
            IMGICon = HDT;
            break;
          case "D":
            IMGICon = YS;
            break;
          case "E":
            IMGICon = JW;
            break;
        }
        var icon = new BMapGL.Icon(IMGICon, new BMapGL.Size(23, 25), {
          anchor: new BMapGL.Size(10, 25),
        });
        marker = new BMapGL.Marker(markers, {
          icon: icon,
        });
        // 创建信息窗口
        var opts = {
          width: 300,
          // height: 100,
          title: "TOI-23472[0123456789]",
        };
        var infoWindow = new BMapGL.InfoWindow(
          "倾斜角度：" +
            "188deg" +
            "<br/>" +
            "电池电压：" +
            "3.6V" +
            "<br/>" +
            "信噪比：" +
            "16db" +
            "<br/>" +
            "负责人：" +
            "张三" +
            "<br/>" +
            "联系方式：" +
            "121234564",
          opts
        );
        // 点标记添加点击事件
        marker.addEventListener("click", function () {
          map.openInfoWindow(infoWindow, markers); // 开启信息窗口
        });
        map.addOverlay(marker);
      }
    });
};

const JgjksetActiveTab = (index, value) => {
  jgjkactiveTab.value = index;
};
let map = null;
let marker = null;
onMounted(async () => {
  // 初始化地图
  map = new BMapGL.Map(mapContainer.value);
  var point = new BMapGL.Point(112.957987, 28.172891);
  map.centerAndZoom(point, 19); // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true);
  map.setMinZoom(15);
  map.setMaxZoom(22);
  map.setMapStyleV2({
    styleId: "62ce43ad2a1362c23e612b783d7406e7",
  });
  map.setTilt(50);
  map.disableInertialDragging();

  // // 定义允许的拖拽范围
  // const allowedBounds = new BMapGL.Bounds(
  // 	new BMapGL.Point(109.90207672119142, 27.365250190931242), // 西南角
  // 	new BMapGL.Point(109.97014045715333, 27.422461872492594) // 东北角
  // );

  // // 监听拖拽结束事件
  // map.addEventListener('dragend', function() {
  // 	// 获取当前地图的中心点
  // 	const center = map.getCenter();
  // 	// 检查中心点是否在允许的范围内
  // 	if (!allowedBounds.containsPoint(center)) {
  // 		// 如果不在范围内，将地图中心调整回允许范围的中心点
  // 		const adjustCenter = allowedBounds.getCenter();
  // 		map.panTo(adjustCenter);
  // 	}
  // });
  // 导入JSON文件
  try {
    getImgType(0, 17);
  } catch (error) {
    // console.error('Error loading JSON data:', error);
  }
});
</script>

<style lang="scss">
.BMap_bubble_pop {
  border: 0px !important;
  border-radius: 0 !important;
  background-image: url("../../../../assets/visualizationimg/eject.png");
  background-size: 100% 100%;
  background-color: rgba(0, 0, 0, 0) !important;
  padding: 0 20px !important;
  width: auto !important;
  .BMap_bubble_top {
    margin-top: 10px !important;
    .BMap_bubble_title {
      color: white !important;
      font-size: 20px;
    }
  }

  .BMap_bubble_center {
    margin-bottom: 10px !important;
    .BMap_bubble_content {
      color: white !important;
    }
  }
  img {
    display: none !important;
  }
}
</style>

<style lang="scss">
.Vbox {
  height: 100vh;
  overflow: hidden;

  .head {
    height: 120px;
    top: 0;
    width: 100%;
    position: absolute;
    z-index: 999;
    // background-color: rgba($color: #0e2a41, $alpha: .5);

    .VisTitle {
      height: 60px;
      background-image: url("../../../../assets/visualizationimg/title.png");
    }
  }

  .container {
    height: 100%;
    position: relative;

    .left {
      display: none;
      left: 20px;
      float: left;
      position: relative;
      margin-left: -100%;
      width: 26vw;
      height: 100%;
      top: 20px;
      z-index: 999;

      .rightParkBox {
        height: 30%;
        background-color: rgba($color: #000000, $alpha: 0.3);
        margin-bottom: 14px;

        .rightParkTtile {
          height: 40px;
          color: white;
          line-height: 40px;
          padding-left: 40px;
          font-weight: bold;
          background-image: url("../../../../assets/visualizationimg/boxTitle.png");
          background-size: 100% 100%;
          display: flex;
          justify-content: space-between;

          div:nth-child(2) {
            margin-right: 20px;
            font-size: 14px;
            cursor: pointer;
          }
        }

        .leftOBTitle,
        .RICBTitle {
          height: 40px;
          color: white;
          line-height: 40px;
          padding-left: 40px;
          font-weight: bold;
          background-image: url("../../../../assets/visualizationimg/boxTitle.png");
          background-size: 100% 100%;
        }

        .leftOBContent {
          height: calc(100% - 40px);

          .HTB_CB_List {
            width: 100%;
          }
        }

        .rightParkContent {
          height: calc(100% - 40px);
          display: flex;

          .SBZT_right,
          .SBZT_left {
            flex: 1;
            display: flex;
            justify-content: space-around;
            flex-direction: column;

            .SBZT_onLine {
              text-align: center;

              img {
                width: 30px;
                height: 30px;
              }
            }
          }

          .SBZT_center {
            flex: 2;
          }

          .SBZT_left {
            flex: 1;
          }
        }

        .RICBTContent {
          height: calc(100% - 40px);
          display: grid;
          grid-template-columns: repeat(1, 100%);
          grid-template-rows: repeat(2, 50%);
          align-items: center;
          justify-content: center;
        }
      }

      .leftTwoBox {
        height: 30%;
        background-color: rgba($color: #000000, $alpha: 0.3);
        margin-bottom: 14px;

        .leftOBTitle,
        .leftGDPTitle,
        .leftTaxationTitle {
          height: 40px;
          color: white;
          line-height: 40px;
          padding-left: 40px;
          font-weight: bold;
          background-image: url("../../../../assets/visualizationimg/boxTitle.png");
          background-size: 100% 100%;
        }

        .leftOBContent {
          height: calc(100% - 40px);
        }

        .leftGDPContent {
          height: calc(100% - 40px);

          .jgjk_box {
            padding: 10px;
            display: flex;
            height: 100%;

            .Jklb_table {
              width: 30%;
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              .JKlb_name {
                text-align: center;
                color: white;
                padding: 7px 10px;
                background-image: url("../../../../assets/visualizationimg/jklb.png");
                background-size: 100% 100%;
              }

              .JGJKActive {
                background-color: #efb336;
                color: #000000;
              }
            }

            .JKLB_Video {
              width: 70%;
              padding: 7px;

              .Video_url {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }

      .leftOneBox,
      .leftThreeBox {
        height: 30%;
        background-color: rgba($color: #000000, $alpha: 0.3);
        margin-bottom: 14px;

        .leftOBTitle,
        .leftGDPTitle,
        .leftTaxationTitle {
          height: 40px;
          color: white;
          line-height: 40px;
          padding-left: 40px;
          font-weight: bold;
          background-image: url("../../../../assets/visualizationimg/boxTitle.png");
          background-size: 100% 100%;
        }

        .leftOBContent,
        .leftGDPContent {
          height: calc(100% - 40px);
        }

        .leftTaxationContent {
          height: calc(100% - 40px);

          .GJXX_table {
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .GJXX_name {
              text-align: center;
              font-size: 14px;
              color: white;
              padding: 5px 5px;
              background-image: url("../../../../assets/visualizationimg/jklb.png");
              background-size: 100% 100%;
              display: flex;
              flex-direction: row;
              justify-content: space-between;

              div:nth-child(1) {
                margin-left: 10px;
              }

              div:nth-child(3) {
                margin-right: 10px;
              }
            }
          }
        }
      }
    }

    .boxBottom {
      position: absolute;
      z-index: 999;
      // bottom: 0;
      width: 45vw;
      left: 20vw;
      display: flex;
      align-items: center;
      justify-content: center;

      .Vgradation {
        display: flex;

        .tab {
          width: 150px;
          height: 60px;
          margin: 0 10px;
          text-align: center;
          line-height: 60px;
          color: white;
          font-weight: 500;
          font-size: 0.9vw;
          background-image: url("../../../../assets/visualizationimg/headg.png");
          background-size: 100% 100%;
        }

        .active {
          background-image: url("../../../../assets/visualizationimg/headgactive.png");
          background-size: 100% 100%;
        }
      }
    }

    .center {
      float: left;
      height: 100%;
      width: 100%;
      background-color: green;

      .allmap {
        /* // 注意给dom宽高，不然地图不出来 */
        width: 100vw;
        height: 100%;
        margin: auto;
        padding: 0;
      }
    }

    .right {
      display: none;
      //right: 20px;
      left: 73vw;
      float: left;
      position: absolute;
      //margin-left: -500px;
      width: 26.5vw;
      // background-color: rgba($color: #000000, $alpha: 0.2);
      height: 100%;
      top: 10px;
      z-index: 999;
      // display: flex;
      flex-direction: column;
      justify-content: space-between;

      .leftOneBox {
        height: 30%;
        background-color: rgba($color: #000000, $alpha: 0.3);
        margin-bottom: 14px;

        .leftOBTitle,
        .RICBTitle {
          height: 40px;
          color: white;
          line-height: 40px;
          padding-left: 40px;
          font-weight: bold;
          background-image: url("../../../../assets/visualizationimg/boxTitle.png");
          background-size: 100% 100%;
        }

        .leftOBContent {
          height: calc(100% - 40px);

          display: flex;

          .SBZT_right,
          .SBZT_left {
            flex: 1;
            display: flex;
            justify-content: space-around;
            flex-direction: column;

            .SBZT_onLine {
              text-align: center;

              img {
                width: 30px;
                height: 30px;
              }
            }
          }

          .SBZT_center {
            flex: 2;
          }

          .SBZT_left {
            flex: 1;
          }

          .HTB_CB_List {
            width: 100%;
          }
        }

        .rightParkContent {
          height: calc(100% - 40px);
          display: grid;
          grid-template-columns: repeat(3, 33.33%);
          grid-template-rows: repeat(2, 50%);
          align-items: center;
        }

        .RICBTContent {
          height: calc(100% - 40px);
          display: grid;
          grid-template-columns: repeat(1, 100%);
          grid-template-rows: repeat(2, 50%);
          align-items: center;
          justify-content: center;
        }
      }

      .leftTwo_GDCL {
        height: calc(70% - 20px);
        background-color: rgba($color: #000000, $alpha: 0.3);
        margin-bottom: 14px;

        .leftOBTitle {
          height: 40px;
          color: white;
          line-height: 40px;
          padding-left: 40px;
          font-weight: bold;
          background-image: url("../../../../assets/visualizationimg/boxTitle.png");
          background-size: 100% 100%;
        }

        .GJXX_table {
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .GJXX_name {
            text-align: center;
            font-size: 14px;
            color: #efb336;
            padding: 14px 5px;
            background-image: url("../../../../assets/visualizationimg/jklb.png");
            background-size: 100% 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            div:nth-child(1) {
              margin-left: 10px;
            }

            div:nth-child(3) {
              margin-right: 10px;
            }
          }

          .active {
            color: aqua;
          }
        }
      }
    }
  }
}
</style>
