<template>
  <div class="Screen cm-layout">
    <div class="a_0">
      <div id="container"></div>
      <div class="a0_">
        <header id="header">
          <div class="b1_bg">
            <h2>山西华远陆港平台</h2>
           
          </div>
        </header>

        <div class="content">
          <div class="map">
            <i class="el-icon-user home" @click="gohome"></i>
            <div class="sys-tit">
              <span @click="toOtherSys(1)">边坡监测</span>
              <span @click="toOtherSys(2)">桥梁监测</span>
              <span @click="toOtherSys(3)">隧道监测</span>
              <span @click="toOtherSys(4)">AI分析</span>
            </div>
            <div id="A_Map" class="amap"></div>
            <div class="bg"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="b_0" v-show="showSreen">
      <section class="b0_" id="b0_">
        <div class="b0_a" :class="{ active: navActive === 0 }">
          <div class="side b0_left">
            <!-- 应急预案 开始 -->
            <div class="a-md31" id="amd31">
              <BianpoMonitor/>
            </div>
            <!-- 应急预案结束 -->
            <!-- 应急演练 开始 -->
            <div class="a-md31" id="amd31">
              <SuidaoMonitor/>
            </div>
            <!-- 应急演练结束 -->
          </div>
          <div class="side b0_right">
            <div class="a-md34" id="amd34" style="height: 4.3rem;">
              <QiaoliangMonitor/>
            </div>
            <div class="a-md34" id="amd34">
              <AiAnalysis />
            </div>
          </div>
        </div>
      </section>
    </div>
    <section class="statistic_wrapper">
      <p v-for="item in equipList" :key="item.name">
        <span>{{item.name}}</span><span>{{item.count}}个</span>
      </p>
    </section>

    <footer></footer>
  </div>
</template>
  
  <script>
qf.openCalcLayout({ dpr: 1 });
import { getToken } from "@/utils/auth";

import { listDrills } from "@/api/avoidanceSys/emergencyPlans";
import { getEquipmentNum } from "@/api/avoidanceSys/home";


/**模板 */
import AiAnalysis from "@/components/BigScreen/AiAnalysis";
import QiaoliangMonitor from "@/components/BigScreen/QiaoliangMonitor";
import BianpoMonitor from "@/components/BigScreen/BianpoMonitor";
import SuidaoMonitor from "@/components/BigScreen/SuidaoMonitor";

export default {
  name: "screen",
  /**模板 */
  components: {
    BianpoMonitor,
    SuidaoMonitor,
    QiaoliangMonitor,
    AiAnalysis,
  },
  data() {
    return {
      previewUrl: process.env.VUE_APP_BASE_API,
      aMap: null,
      headers: { Authorization: "Bearer " + getToken() },

      // 自动滚动
      // 应急演练
      interval4yanlian: null,
      scrollPosition4yanlian: 0,
      direction4yanlian: 1, // 1 for down, -1 for up
      step4yanlian: 1, // 每次滚动的像素
      intervalTime4yanlian: 50, // 每次滚动的时间间隔（ms）

      drillsList: [],
      isTechUser: false,
      // 图表数据为空情况
      emptyFlag4byqyjnzsrphb: false,
      emptyFlag4srph: false,
      emptyFlag4zfqyndsjsfbhqs: false,
      emptyFlag4byqyndsjsfbhqs: false,
      // isTechUser: localStorage.getItem('groupIdByloginType')*1===2,
      showSreen: true,
      map: null,
      infoWindow: null,
      navActive: null,
      sjzlList: [],
      srphList: [],
      view0: {
        md1: [], // 数据总览
        md3: [], // 产品
      },
      incubatorId: "",
      equipList: [ ],
    };
  },
  // comgetListponents: { cuAmap },
  computed: {
    //   isTechUser() {
    // 	return localStorage.getItem("groupIdByloginType") * 1 === 2;
    //   },
  },
  mounted() {
    var that = this;
    this.$nextTick(() => {
      this.navActive = 0;
      this.getEquipmentNum()
      // this.getPlans()
      // this.getLevelNum4plans()
      // this.getDrills()
      // this.getRoleInfo();
    });
  },
  created() {
    this.$nextTick(() => {
      this.amapInfor();
    });
  },
  methods: {
    gohome(){
      this.$router.push({ path: "/home/index" });
    },
    getEquipmentNum() {
      getEquipmentNum().then((response) => {
        this.equipList = response.data || [];
      });
      
    },
    amapInfor() {
      let that = this;
      // 初始化地图
      this.aMap = new AMap.Map("A_Map", {
        zooms: [3, 20],
        center: [112.413542, 38.019073],
        // zoom: 9.6,
        zoom: 9.4,
        layers: [new AMap.TileLayer.Satellite()],
      });

      that.aMap.on("complete", function () {
        that.boundTaiyuan();
      });
    },
    boundTaiyuan() {
      let that = this;
      const AMap = window.AMap || this.aMap;
      const map = this.map || {};
      AMap.plugin("AMap.DistrictSearch", function () {
        var district = new AMap.DistrictSearch({
          extensions: "all",
          level: "city",
        });
        district.search("太原", function (status, result) {
          if (status === "complete" && result && result.districtList) {
            var bounds = result.districtList[0].boundaries;
            const polygons = [];
            if (bounds) {
              for (let i = 0, l = bounds.length; i < l; i++) {
                const polygon = new AMap.Polygon({
                  map: that.aMap,
                  path: bounds[i],
                  strokeWeight: 3,
                  fillOpacity: 0.8,
                  fillColor: "transparent",
                  strokeColor: "#00c0ff",
                });
                polygons.push(polygon);
              }
            }
          } else {
            console.error("查询失败:", status);
          }
        });
        var district2 = new AMap.DistrictSearch({
          extensions: "all",
          level: "city",
        });
        district2.search("太原", function (status, result) {
          const outer = [
            new AMap.LngLat(-360, 90, true),
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true),
          ];
          const holes = result.districtList[0].boundaries;
          const pathArray = [outer];
          pathArray.push.apply(pathArray, holes);
          const polygon = new AMap.Polygon({
            path: pathArray,
            strokeColor: "#00c0ff",
            strokeWeight: 3,
            fillColor: "#001948",
            fillOpacity: 0.8,
          });
          polygon.setPath(pathArray);
          that.aMap.add(polygon);
        });
      });
    },
    getCookie(name) {
      var matches = document.cookie.match(
        new RegExp(
          "(?:^|; )" +
            name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$&") +
            "=([^;]*)"
        )
      );
      return matches ? decodeURIComponent(matches[1]) : undefined;
    },
    toOtherSys(val) {
      //http://localhost:12100/ "Bearer " + getToken()
      if (val === 1) {
        var link = `http://bp.hylgzl.com/?Admin=${this.getCookie(
          "Admin-Token"
        )}`;
        window.open(link, "_blank");
        return;
      } else if (val === 2) {
        var link = `http://ql.hylgzl.com/}`;
        window.open(link, "_blank");
        return;
      } else if (val === 3) {
        var link = `http://sd.hylgzl.com/?Admin=${this.getCookie(
          "Admin-Token"
        )}`;
        window.open(link, "_blank");
        return;
      } else if (val === 4) {
        var link = `http://220.194.146.65:9045`;
        window.open(link, "_blank");
        return;
      }
    },

    getDrills() {
      listDrills({
        pageNum: 1,
        pageSize: 99999,
      }).then((response) => {
        this.drillsList = response.rows;
        this.startScrolling(
          ".bottom-yanlian",
          ".bottom-yanlian .list-content",
          "yanlian"
        );
      });
    },
  },
};
</script>
  
  <style lang="scss" scope>

footer{
  width: 19.2rem;
  height: 0.35rem;
  background-image: url("../assets/images/dpNew3/bottom_title.png");
  // background-repeat: no-repeat;
  // background-position-x:2rem;
  background-position: bottom;
  background-size: cover;
  position: absolute;
  bottom: 0;
  z-index: 99;
  // background-color: pink;
}

.statistic_wrapper{
  position: absolute;
    bottom: 0.6rem;
    width: 8rem;
    height: 1.2rem;
    z-index: 9999;
    margin-left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    p{
      width: 33.33%;
      height: 100%;
      display: flex;
      justify-content: start;
      gap: 0.02rem;
      padding-top: 0.1rem;
      padding-left: 1.3rem;
      align-items: start;
      flex-direction: column;
      background: pink;
      background: url("../assets/images/dpNew3/icon5.png");
      background-repeat: no-repeat;
      background-position-x: 0.5rem;
      span{
        font-size: 0.16rem;
        color: #fff;
        
        &:last-child{
          font-family: YouSheBiaoTiHei;
          font-weight: bold;
          font-style: italic;
          font-size: 0.24rem;
          color: #05E4FE; 
        }
      }
    }
}


  .amap-logo, .amap-copyright {
    display: none !important;
  }
#container {
  height: 100%;
  width: 100%;
  background-color: #29557a;
}
@font-face {
  font-family: "diget year";
  src: url("~@/assets/fonts/DS-Digital.ttf");
}
@font-face {
  font-family: "ShuHei";
  src: url("~@/assets/fonts/AlimamaShuHeiTi-Bold.ttf");
}
.font_digit {
  font-family: diget year;
}
.font_ShuHei {
  font-family: ShuHei;
}

.content {
  width: 100%;

  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;

  .map {
    width: 100%;
    height: 100vh;
    position: relative;
    .home{
          font-size: 0.34rem;
          color: #11a8e7;
          position: absolute;
          right: 0.2rem;
          top: 0.36rem;
          cursor: pointer;
          z-index: 12;
        }
    .sys-tit {
      width: 8.49rem;
      height: 0.63rem;
      position: absolute;
      top: 1.3rem;
      left: 28%;
      right: 0;
      z-index: 11;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      span {
        width: 1.76rem;
        height: 0.5rem;
        font-size: 0.22rem;
        font-weight: bold;
        color: #fff;
        background-image: url("../assets/images/bigscreen/button_normal.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 0.07rem;
        cursor: pointer;
        &:hover {
          color: #05f9fb;
          background-image: url("../assets/images/bigscreen/button_click1.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
        }
      }
    }
    .amap {
      width: 100%;
      height: 100vh;
      // background-color: unset !important;
      ::v-deep .amap-icon img {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: auto;
      }
    }
    .bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 33;
      // background-image: url('../assets/images/bigscreen/bg.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      pointer-events: none;
    }
  }
}

.Screen {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;

  .a_0,
  .b_0 {
    position: absolute;
  }
  > .actv {
    display: block;
  }
  .a_0 {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    .a0_ {
      position: absolute;
      top: 0;
      left: 0;
      height: auto;
      width: 100%;
      z-index: 3;
      header {
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        width: 100%;
        z-index: 5;
        display: flex;
        user-select: none;
   
        .b1_bg {
          position: relative;
          height: 1.03rem;
          width: 100%;
          margin: 0 auto;
          background: no-repeat top center
            url("~@/assets/images/dpNew3/top_title.png");
            background-size: cover;
          //   background-size: auto 19.2rem;
          display: flex;
          justify-content: center;
          pointer-events: none;
          h2 {
            &::before {
              content: "山西华远陆港平台";
              position: absolute;
              text-shadow: 0px 7px 12px rgba(0,23,64,0.78);
              z-index: -1;
              display: block;
            }
            position: relative;
            font-size: 0.44rem;
            line-height: 1;
            letter-spacing: 0.04rem;
            margin: 0.18rem 0 0 0rem;
            font-weight: bold;
            color: #fff;
            font-family: Source Han Sans SC;
            background: linear-gradient(0deg, #00B4FF 0%, #FAFEFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        .a0a_ {
          position: absolute;
          top: 0;
          left: 0;
          height: 0;
          width: 100%;
          display: flex;
          justify-content: space-between;
          ul {
            height: 0;
            display: flex;
            margin-top: 0.42rem;
            width: 5.15rem;
            li {
              width: 1.17rem;
              height: 0.4rem;
              cursor: pointer;
              border-radius: 0.05rem;
              background-repeat: no-repeat;
              background-position: top center;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 0.16rem;
              &:hover {
                box-shadow: inset 0 0 0.08rem 0.03rem rgba(42, 248, 251, 0.8);
              }
            }
            li.active {
            }
            li:last-child {
              margin-right: 0;
            }
          }
          ul:first-child {
            margin-left: 0.14rem;
            li {
              margin-right: 0.13rem;
            }
          }
          ul:last-child {
            margin-right: 0.14rem;
            li {
              margin-left: 0.13rem;
            }
          }
        }
      }
    }

    .map-mask {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 2;
      pointer-events: none;
      background: no-repeat center center url("~@/assets/images/dpNew2/bg.png");
      background-size: 100% 100%;
    }
  }
  .b_0 {
    display: flex;
    top: 0.3rem;
    left: 0;
    bottom: 0;
    width: 0;
    background-color: rgba(0, 0, 0, 0.15);
    z-index: 3;

    .b0_ {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      width: 0;

      .side {
        // display:none;

        // width: 5.44rem;
        height: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        user-select: none;
        color: #fff;

        
        .a-md31 {
          //   height: 3.2rem;
          position: relative;
        }
        .a-md34 {
          height: 4.8rem;
        }
      }
      > div {
        display: none;
        //display:flex;
        width: 19.2rem;
        height: 0;
        justify-content: space-between;
        .b0_left {
          margin-left: 0.1rem;
        }
        .b0_right {
          margin-right: 0.1rem;
        }
      }
      div.active {
        display: flex;
        //.side{display:flex;}
      }

      .b0_a {
        .side {
          & > div {
            flex: none;
            position: relative;
            margin-bottom: 0.1rem;
          }
        }
      }
    }

    .num_blue1 {
      font-family: diget year;
      text-shadow: #00aef7 0px 0px 0.1rem;
    }
    .num_orange {
      font-family: diget year;
      text-shadow: #d9fa03 0px 0px 0.1rem;
    }
    .num_liuhuang {
      font-family: diget year;
      text-shadow: #c1fa00 0px 0px 0.1rem;
    }
    .num_qingse {
      font-family: diget year;
      text-shadow: #03cee0 0px 0px 0.1rem;
    }
  }
}
</style>

