<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>
      <div class="map-mask"></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></BianpoMonitor> -->
        
            </div>
            <!-- 应急预案结束 -->
            <!-- 应急演练 开始 -->
            <div class="a-md31" id="amd31">
              <!-- <SuidaoMonitor></SuidaoMonitor> -->
            </div>
            <!-- 应急演练结束 -->
          </div>
          <div class="side b0_right" >
            <div class="a-md34" id="amd34">
              <!-- <QiaoliangMonitor></QiaoliangMonitor> -->
            </div>
            <div class="a-md34" id="amd34">
              <!-- <AiAnalysis /> -->
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
  
  <script>

qf.openCalcLayout({dpr:1});
import { listPlans, getLevelNum  } from "@/api/avoidanceSys/plans";
import { listDrills} from "@/api/avoidanceSys/emergencyPlans";

/**模板 */
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 {
  /**模板 */
  components: {
    BianpoMonitor,
    SuidaoMonitor,
    QiaoliangMonitor,
    AiAnalysis,
  },
  data() {
    return {
      // 自动滚动
      // 应急演练
      interval4yanlian: null,
      scrollPosition4yanlian: 0,
      direction4yanlian: 1, // 1 for down, -1 for up
      step4yanlian: 1, // 每次滚动的像素
      intervalTime4yanlian: 50, // 每次滚动的时间间隔（ms）
      // 应急预案
      interval4yuan: null,
      scrollPosition4yuan: 0,
      direction4yuan: 1, // 1 for down, -1 for up
      step4yuan: 1, // 每次滚动的像素
      intervalTime4yuan: 40, // 每次滚动的时间间隔（ms）

      plansList: [],
      plansNum: {
        approvalLevel1: 0,
        approvalLevel2: 0,
        approvalLevel3: 0,
      },
      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: "",
      dataList: [
        {
          name: "综掘工作面",
          y: 25,
        },
        {
          name: "皮带机头",
          y: 11,
        },
        {
          name: "马头门",
          y: 22,
        },
        {
          name: "综采工作面",
          y: 18,
        },
        {
          name: "井底车场",
          y: 23,
        },
      ],
    };
  },
  // comgetListponents: { cuAmap },
  computed: {
    //   isTechUser() {
    // 	return localStorage.getItem("groupIdByloginType") * 1 === 2;
    //   },
  },
  mounted() {
    var that = this;
    this.$nextTick(() => {
      this.navActive = 0;
      // this.getPlans()
      // this.getLevelNum4plans()
      // this.getDrills()
      // this.getRoleInfo();
    });
  },
  methods: {
    formateColor4yuan(item) {
      if (item.auditStatus === '2') {
        return "#01c0ff";
      }
      return "#e5d76a";
    },
    getDrills() {
      listDrills({
          pageNum: 1,
          pageSize: 99999,
        }).then(response => {
        this.drillsList = response.rows;
        this.startScrolling('.bottom-yanlian', '.bottom-yanlian .list-content', 'yanlian')
      });
    },
    getLevelNum4plans(){
      getLevelNum(
        {
        }).then(response => {
        this.plansNum = response || {};
      });
    },
     /** 查询应急预案信息列表 */
     getPlans() {
      listPlans(
        {
          pageNum: 1,
          pageSize: 99999,
        }).then(response => {
        this.plansList = response.rows;
        this.startScrolling('.bottom-yuan .list-wrap', '.bottom-yuan .list-content', 'yuan')

      });
    },
    startScrolling(containerClass, contentClass, type) {
      const container = document.querySelector(containerClass);
      const content = document.querySelector(contentClass);
      var affixHeight = 0
      if(type === 'yanlian'){
        affixHeight = 80
      }else if(type === 'yuan'){
        affixHeight = 10
      }
      if(this['interval4'+type]){
        clearInterval(this['interval4'+type])
      }
      this['interval4'+type] = setInterval(() => {
          this['scrollPosition4'+type] += this['step4'+type] * this['direction4' + type];
          if (this['scrollPosition4'+type] + container.clientHeight >= (content.scrollHeight + affixHeight) || this['scrollPosition4'+type] <= 0) {
              this['direction4' + type] *= -1; // 改变滚动方向
          }
          content.style.transform = `translateY(-${this['scrollPosition4'+type]}px)`;
      }, this['intervalTime4'+ type]);
    },
  },
};
</script>
  
  <style lang="scss" scope>

#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;
}

.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: 0.98rem;
          width: 100%;
          margin: 0 auto;
          background: no-repeat top center
            url("~@/assets/images/dpNew2/title.png");
          //   background-size: auto 19.2rem;
          display: flex;
          justify-content: center;
          pointer-events: none;
          h2 {
            font-size: 0.42rem;
            line-height: 1;
            margin: 0.23rem 0 0 0rem;
            font-weight: bold;
            color: #fff;
            // background-image: -webkit-linear-gradient(top, #fff, #c6dafb, #90b6f5);
            // font-family: Adobe Heiti Std;
            // letter-spacing: 0.06rem;
            font-family: Source Han Sans SC;
            text-shadow: 0px 3px 17px rgba(19, 80, 113, 0.48);
            background: linear-gradient(
              180deg,
              #ffffff 54.00390625%,
              #28caff 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: 2;

    .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;

        // 滚动条样式优化
        .scrolling1::-webkit-scrollbar {
            width: .06rem;
            height: .08rem;
            cursor: pointer
        }

        .scrolling1::-webkit-scrollbar-thumb {
            border-radius: 10px;
            margin-right: 10px;
            cursor: pointer;
            background-color: rgba(23,121,230,.7);
            background-image: -webkit-linear-gradient(45deg,rgba(31,181,219,.7) 25%,transparent 0,transparent 50%,rgba(31,181,219,.7) 0,rgba(31,181,219,.7) 75%,transparent 0,transparent)
        }

        .scrolling1::-webkit-scrollbar-thumb:hover {
            background-color: #1854e8
        }

        .scrolling1::-webkit-scrollbar-track {
            border-radius: 10px;
            background: hsla(0,0%,100%,.1);
            margin-right: 10px
        }
        .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>

