<template>
  <div class="center">

    <!--    <dv-full-screen-container>
          <dv-border-box-11 title="业务自查可视化大屏"></dv-border-box-11>
        </dv-full-screen-container>-->
    <dv-full-screen-container>
      <dv-border-box-11 title="业务自查可视化大屏">
        <baidu-map
          :ak="ak"
          styleId="styleId"
          :center="center"
          :zoom="zoom"
          @ready="handler"
          class="baidu-map">
<!--          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>-->
          <bm-marker v-for="item in businessPoints" :position="item.point"
                     :icon="{url:require('../../assets/screen_buss.png'),size: {width: 50, height: 50}}"
                     :dragging="false" animation="BMAP_ANIMATION_BOUNCE"
                     @click="infoWindowOpen(item.point)">
            <bm-label :content="item.name"
                      :labelStyle="{color: '#fff', fontSize : '11px',background:'',border:0}"
                      :offset="{width: -12, height: 25}"></bm-label>
          </bm-marker>

          <bm-info-window :position="infoWindowPosition" :show="bmInfoWindow" :offset="{width: -12, height: -25}"
                          @close="infoWindowClose" @open="infoWindowOpen" :title="'端口,使用率，用户详情'">

            <div class="info-window">
              <div>
                <div style="cursor: pointer; color: #fff;">营业厅</div>
                <div style="margin-top:5px">
                  <span style="color: red">测试1}</span>
                  <span style="color: #67c23a">测试2</span>
                  <span>测试三</span>
                  <span>测试四</span>
                </div>

              </div>
              <div class="address">测试五</div>
            </div>

          </bm-info-window>
          <div class="left">
            <div class="one">
              <dv-border-box-13>
                <div style="position: relative;
    top: -35%;">
                  <dv-decoration-11 style="width:150px;height:40px;color: white;float: left">端口带宽/使用率：
                  </dv-decoration-11>
                  <dv-percent-pond :waitTime="1000" :config="{value:92}" style="width:100px;height:40px;left: 20px"/>
                </div>
              </dv-border-box-13>
            </div>
            <div class="two">
              <dv-border-box-10 :color="['#5378a2', '#FFF']">

                <div style="position: relative;
    top: -12%;">
                  <span style="    color: white;
    position: relative;
    left: 20%;">营业厅/社区续约/保有率排名</span>
                  <dv-decoration-5 style="width:300px;height:20px;" />
                  <dv-scroll-ranking-board :config="two" style="width:320px;height:300px"/>
                </div>
              </dv-border-box-10>
            </div>
<!--            左三暂时不用-->
<!--            <div class="three">
              <dv-border-box-10 :color="['#5378a2', '#FFF']"></dv-border-box-10>
            </div>-->
          </div>
          <div class="right" style="top: 2%">
            <div class="fore">
              <dv-border-box-13>
                <div style="position: relative;top: -18%">
                  <dv-decoration-11 style="width:330px;height:40px;color: white">宽带用户统计</dv-decoration-11>
<!--                  <dv-scroll-board :config="{header: ['营业厅', '宽带用户数', '未续约用户数','未续约用户数','流失用户','宽带保有率'],
  data: [
    ['行1列1', '行1列2', '行1列3','行1列1', '行1列2', '行1列2'],
    ['行2列1', '行2列2', '行2列3','行1列1', '行1列2', '行1列2'],
    ['行3列1', '行3列2', '行3列3','行1列1', '行1列2', '行1列2'],
    ['行4列1', '行4列2', '行4列3','行1列1', '行1列2', '行1列2'],
    ['行5列1', '行5列2', '行5列3','行1列1', '行1列2', '行1列2'],
    ['行6列1', '行6列2', '行6列3','行1列1', '行1列2', '行1列2'],
    ['行7列1', '行7列2', '行7列3','行1列1', '行1列2', '行1列2'],
    ['行8列1', '行8列2', '行8列3','行1列1', '行1列2', '行1列2'],
    ['行9列1', '行9列2', '行9列3','行1列1', '行1列2', '行1列2'],
    ['行10列1', '行10列2', '行10列3','行1列1', '行1列2']
  ]}" style="width:330px;height:220px" />-->
                  <dv-capsule-chart :config="{data: [
    {
      name: '宽带用户数',
      value: 167
    },
    {
      name: '到期宽带数',
      value: 23
    },
    {
      name: '未续约用户数',
      value: 67
    },
    {
      name: '流失用户',
      value: 123
    },
    {
      name: '宽带保有率',
      value: 55
    },
  ],colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
  unit: '',
  showValue: true}" style="width:330px;height:280px" />
                </div>

              </dv-border-box-13>
            </div>
            <div class="four">
              <dv-border-box-10 :color="['#5378a2', '#FFF']">
                <div style="position: relative;top: -38%">
                  <dv-decoration-7 style="width:330px;height:30px;color: white">友商进驻情况</dv-decoration-7>
                                    <dv-scroll-board :config="four" style="width:330px;height:220px" />

                </div>
              </dv-border-box-10>
            </div>
<!--            <div class="six">
              <dv-border-box-10 :color="['#5378a2', '#FFF']"></dv-border-box-10>
            </div>-->
          </div>
          <!-- 监管时间 -->
          <div class="monitor">
            <div class="txt">北区营业厅/楼宇/楼宇/端口</div>
            <div class="reader">
              <div>
                <i>13</i
                >
              </div>
              <div>
                <i>{{ hour }}</i
                >
              </div>
              <div>
                <i>{{ minute }}</i
                >
              </div>
              <div>
                <i>{{ second }}</i
                >
              </div>
            </div>
          </div>
        </baidu-map>
        <!-- 当前日期+当前星期 -->
        <div class="datae">
          {{ nowDate + ' ' + nowWeek }}
        </div>
        <!-- 当前时间 -->
        <div class="timer">
          {{ nowTime }}
        </div>
      </dv-border-box-11>
    </dv-full-screen-container>


  </div>

</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";

export default {
  name: "screen",
  components: {
    BaiduMap,
  },
  data() {
    return {
      // 百度SDK
      ak: "9Bi4kFUG0NCv7xMuPOdcVQcv6GjAoGLG",
      map: "",
      bmInfoWindow: false,
      center: {lng: 116.352861, lat: 39.950822},
      zoom: 14,
      // 营业厅位置
      businessPoints: [
        {
          name: "西直门外营业厅",
          point: {
            lat: 39.950822,
            lng: 116.352861
          }
        },
        {
          name: "新街口营业厅",
          point: {
            lat: 39.946241,
            lng: 116.374642
          }
        },
        {
          name: "杏石口营业厅",
          point: {
            lat: 39.961728,
            lng: 116.229936
          }
        },
        {
          name: "长春桥营业厅",
          point: {
            lat: 39.966032,
            lng: 116.295509,
          }
        },
        {
          name: "北四环西路营业厅",
          point: {
            lat: 39.991807,
            lng: 116.323516,
          }
        },
        {
          name: "官园营业厅",
          point: {
            lat: 39.938488,
            lng: 116.354962,
          }
        }, {
          name: "海淀大街营业厅",
          point: {
            lat: 39.98878,
            lng: 116.314469,
          }
        },
        {
          name: "航天桥营业厅",
          point: {
            lat: 39.932293,
            lng: 116.317159,
          }
        },
        {
          name: "六道口营业厅",
          point: {
            lat: 40.006813,
            lng: 116.358282,
          }
        },
        {
          name: "四通桥营业厅",
          point: {
            lat: 39.978093,
            lng: 116.325095,
          }
        },
        {
          name: "田村营业厅",
          point: {
            lat: 39.933237,
            lng: 116.270681,
          }
        },
        {
          name: "五道口营业厅",
          point: {
            lat: 39.99825,
            lng: 116.341419,
          }
        },
        {
          name: "西单营业厅",
          point: {
            lat: 39.921168,
            lng: 116.379745,
          }
        }
      ],
      // 营业厅弹窗位置
      infoWindowPosition: "",
      // 动画开光
      loadinge: false,
      nowDate: '', // 当前日期
      nowTime: '', // 当前时间
      nowWeek: '', // 当前星期
      day: '0', //当前天数
      hour: '0', //当前小时
      minute: '0', //当前分钟
      second: '0', //当前秒数
      dialogTableVisible: false,
      // 后期删
      two:{ data: [
          {
            name: '西直门',
            value: 55
          },
          {
            name: '五道口',
            value: 96
          },
          {
            name: '六道口',
            value: 78
          },
          {
            name: '得胜',
            value: 66
          },
          {
            name: '官园',
            value: 80
          },
          {
            name: '西单',
            value: 45
          },
          {
            name: '航天桥',
            value: 29
          }
        ]},
      four:{header: ['友商', '宽带用户数', '宽带保有率'],
        data: [
          ['移动-西单', '201', '91%'],
          ['联通-西直门', '189', '89%'],
          ['移动-清河', '231', '87%'],
          ['联通-五道口', '124', '93%'],
          ['广电-清河', '168', '86%'],
          ['广电-西单', '177', '88%'],
          ['广电-五道口', '181', '94%']
        ]},

    }
  },

  // 销毁定时器
  beforeDestroy() {
    clearInterval(this.getDate) // 在Vue实例销毁前，清除时间定时器
    clearInterval(this.monitortime)
  },

  mounted() {
    this.currentTime()
  },
  methods: {
    // 每0.5秒执行一次
    currentTime() {
      setInterval(this.getDate, 500)
      setInterval(this.monitortime, 1000)
    },
    /**加载地图*/
    handler({BMap, map}) {
      map.enableScrollWheelZoom() // 启用滚轮放大缩小，默认禁用
      map.enableContinuousZoom() // 可拖拽
      // 个性化底图
      map.setMapStyleV2({
        styleId: "9865dd52826f7f96c72e716bf0948cb0"
      });
      this.map = map;
      // 加载营业厅
      //this.addPoints();

    },
    getDate() {
      var _this = this
      //获取年
      let yy = new Date().getFullYear()
      //获取月,注意时间是0-11，0代表1月份
      let mm = new Date().getMonth() + 1
      // 获取具体哪一天
      let dd = new Date().getDate()
      // 获取星期 0-6 0是星期天
      let week = new Date().getDay()
      //获取小时
      let hh = new Date().getHours()
      //获取分钟
      let ms =
        new Date().getSeconds() < 10
          ? '0' + new Date().getSeconds()
          : new Date().getSeconds()
      // 获取秒钟
      let mf =
        new Date().getMinutes() < 10
          ? '0' + new Date().getMinutes()
          : new Date().getMinutes()
      // 获取星期
      if (week == 1) {
        this.nowWeek = '星期一'
      } else if (week == 2) {
        this.nowWeek = '星期二'
      } else if (week == 3) {
        this.nowWeek = '星期三'
      } else if (week == 4) {
        this.nowWeek = '星期四'
      } else if (week == 5) {
        this.nowWeek = '星期五'
      } else if (week == 6) {
        this.nowWeek = '星期六'
      } else {
        this.nowWeek = '星期日'
      }
      _this.nowTime = hh + ':' + mf + ':' + ms
      _this.nowDate = yy + '/' + mm + '/' + dd
    },
    monitortime() {
      var _that = this
      // 当前时间
      let x = new Date().getTime()
      //   // 点击登录存的时间
      //   //   let y = getTokenTime()
      //   // console.log('登录时间戳', y)
      //   // 登录之后的监测时间
      //   let z = x - y
      //   // console.log('监测时间', z)
      _that.day = parseInt(x / 1000 / 60 / 60 / 24) //日
      _that.hour = parseInt((x / 1000 / 60 / 60) % 24) //时
      _that.minute = parseInt((x / 1000 / 60) % 60) //分
      _that.second = parseInt((x / 1000) % 60) //秒
    },
    /**加载营业厅*/
    addPoints() {
      const points = [];
      for (var i = 0; i < 1000; i++) {
        const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
        points.push(position)
      }
      this.businessPoints = points
    },
    /**营业厅点击事件*/
    infoWindowClose() {
      this.bmInfoWindow = false;
    },
    infoWindowOpen(point) {
      if (point.lat) {
        this.infoWindowPosition = point
      }
      console.log(this.point)

      this.bmInfoWindow = false;
      this.bmInfoWindow = true;
    },
  }
}
</script>
<style scoped>
.center {
  background-color: rgb(9, 18, 32);
  width: 100%;
  height: 100%;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content {
  padding: 62px 9px 10px;
  overflow: hidden;
  border-radius: 55px;
  position: relative;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .load {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .load .loading-tip {
  margin-top: 15px;
  font-size: 18px;
  color: #fff;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .shade {
  width: 100%;
  height: 100%;
  box-sizing: border-box !important;
  margin: 60px 8px 10px;
  background-color: rgb(9, 18, 32);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  display: flex;
  position: relative;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .anchorBL {
  display: none !important;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .left {
  width: 350px;
  height: 100%;
  position: absolute;
  top: 2%;
  left: 2%;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .left .one {
  height: 130px;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .left .two {
/*  height: 250px;*/
  height: 420px;
  background-color: rgb(2, 52, 126);
  border-radius: 3px;
  margin: 40px 0 40px;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .left .three {
  height: 250px;
  background-color: rgb(2, 52, 126);
  border-radius: 3px;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .right {
  width: 350px;
  height: 100%;
  position: absolute;
  top: 100px;
  right: 2%;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .right .fore {
 /* height: 130px;*/
  height: 330px;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .right .four {
  height: 250px;
  background-color: rgb(2, 52, 126);
  border-radius: 3px;
  margin: 40px 0 40px;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .right .four {
  height: 230px;
  background-color: rgb(2, 52, 126);
  border-radius: 3px;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .monitor {
  width: 320px;
  height: 95px;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .monitor .txt {
/*  width: 135px;*/
  width: 335px;
  color: #fff;
  font-size: 22px;
  margin: 2px auto;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .monitor .reader {
  color: #afafaf;
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .monitor .reader > div {
  display: flex;
  align-items: baseline;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .monitor .reader > div > i {
  font-style: normal;
  display: block;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  font-size: 20px;
  color: #fff;
  margin-right: 8px;
  background-color: rgb(5, 47, 115);
  border: 3px solid rgb(6, 116, 190);
  border-radius: 5px;
  line-height: 44px;
  text-align: center;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .monitor .reader .first-child > i {
  width: 80px;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .datae {
  font-size: 18px;
  position: absolute;
  top: 7px;
  left: 200px;
  color: #fff;
}

::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .timer {
  font-size: 18px;
  position: absolute;
  top: 7px;
  right: 200px;
  color: #fff;
}

/*地图标题*/
.BMap_bubble_title {
  color:white;
  font-size:13px;
  font-weight:bold;
  text-align:left;
  padding-left:5px;
  padding-top:5px;
  border-bottom:1px solid gray;
  background-color:#0066b3;
}
/* 消息内容 */
.BMap_bubble_content {
  background-color:white;
  padding-left:5px;
  padding-top:5px;
  padding-bottom:10px;
}
/* 内容 */
.BMap_pop div:nth-child(9) {
  top:35px !important;
  border-radius:7px;
}
/* 左上角删除按键 */
.BMap_pop img {
  top:43px !important;
  left:215px !important;
}
.BMap_top {
  display:none;
}
.BMap_bottom {
  display:none;
}
.BMap_center {
  display:none;
}
/* 隐藏边角 */
.BMap_pop div:nth-child(1) div {
  display:none;
}
.BMap_pop div:nth-child(3) {
  display:none;
}
.BMap_pop div:nth-child(7) {
  display:none;
}



</style>

<!--<style lang="scss" scoped>
.center {
  background-color: rgb(9, 18, 32);

  ::v-deep #dv-full-screen-container {
    .dv-border-box-11 .border-box-content {
      // background-color: skyblue;
      padding: 62px 9px 10px;
      overflow: hidden;
      border-radius: 55px;
      position: relative;

      .load {
        position: absolute;
        top: 40%;
        left: 50%;
        // margin-left: -37px;
        transform: translateX(-50%);
        z-index: 3;

        .loading-tip {
          margin-top: 15px;
          font-size: 18px;
          color: #fff;
        }
      }

      .shade {
        width: 100%;
        // width: 100%; 取100% margin 右边不会生效 要改成width=99%才有效果
        height: 100%;
        box-sizing: border-box !important;
        // background-color: skyblue;
        margin: 60px 8px 10px;
        background-color: rgb(9, 18, 32);
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
      }

      // 地图
      .baidu-map {
        width: 97%;
        height: 86%;
        top: 10%;
        left: 2%;
        border-radius: 5px;
        // z-index: 999;
        display: flex;
        // justify-content: space-between;
        // 去除百度地图的图标
        position: relative;

        .anchorBL {
          display: none !important;
        }

        .left {
          width: 350px;
          height: 100%;
          position: absolute;
          top: 100px;
          left: 2%;
          // background-color: skyblue;
          // margin-left: 50px;
          .one {
            height: 130px;
            // background-color: skyblue;
          }

          .two {
            height: 250px;
            background-color: rgb(2, 52, 126);
            border-radius: 3px;
            margin: 40px 0 40px;
          }

          .three {
            height: 250px;
            background-color: rgb(2, 52, 126);
            border-radius: 3px;
          }
        }

        .right {
          width: 350px;
          height: 100%;
          position: absolute;
          top: 100px;
          right: 2%;
          // background-color: skyblue;
          // margin-right: 50px;
          .fore {
            height: 130px;
            // background-color: skyblue;
          }

          .four {
            height: 250px;
            background-color: rgb(2, 52, 126);
            border-radius: 3px;
            margin: 40px 0 40px;
          }

          .six {
            height: 250px;
            background-color: rgb(2, 52, 126);
            border-radius: 3px;
          }
        }
      }

      .monitor {
        width: 320px;
        height: 95px;
        // background-color: skyblue;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);

        .txt {
          width: 135px;
          color: #fff;
          font-size: 22px;
          margin: 2px auto;

        };

        .reader {
          color: #afafaf;
          display: flex;
          justify-content: space-between;
          margin-top: 12px;

          div {
            display: flex;
            align-items: baseline;

            i {
              font-style: normal;
              display: block;
              width: 50px;
              height: 50px;
              box-sizing: border-box;
              font-size: 20px;
              color: #fff;
              margin-right: 8px;
              background-color: rgb(5, 47, 115);
              border: 3px solid rgb(6, 116, 190);
              border-radius: 5px;
              line-height: 44px;
              text-align: center;
            }

            &:first-child {
              i {
                width: 80px;
              }
            }
          }
        }
      }
      // 左上角日期星期
      .datae {
        // background-color: skyblue;
        font-size: 18px;
        position: absolute;
        top: 7px;
        left: 200px;
        color: #fff;
      }
      // 右上角的当前时间
      .timer {
        // background-color: skyblue;
        font-size: 18px;
        position: absolute;
        top: 7px;
        right: 200px;
        color: #fff;
      }
    }
  }
}


</style>-->


<style lang="less" scoped>
.center {
  .baidu-map {
    // position: relative;
    // z-index:1;
    .window {
      margin: 10px 10px;
      .container {
        color: skyblue;
        font-size: 14px;
        font-weight: 700;
      }
      .input {
        display: flex;
        width: 300px;
        .el-input {
          .el-input__inner {
            height: 20px;
            line-height: 20px;
            width: 95%;
            color: skyblue;
            font-weight: 500;
            background-color: rgba(198, 233, 247);
          }
        }
        span {
          width: 100px;
          color: skyblue;
          font-weight: 700;
          font-size: 14px;
          height: 20px;
          line-height: 20px;
        }
      }
    }

    //信息窗口样式
    .BMap_pop img,
    .BMap_top,
    .BMap_center,
    .BMap_bottom,
    .BMap_pop > div {
      &:not(:nth-child(9)) {
        display: none;
      }
    }

    .BMap_pop div:nth-child(9) {
      top: 30px !important;
    }
    .BMap_bubble_content {
      // border-top: 3px solid #377abd;
      border-top: 3px solid rgba(44, 55, 47, 0.3);
      // border-bottom: 3px solid #377abd;
      border-bottom: 3px solid rgba(44, 55, 47, 0.3);
      border-radius: 8px;
      // background-color: rgba(36, 105, 137, 0.8);
      background-color: rgba(44, 55, 47, 0.4);
      overflow: hidden;
      color: #ffffff;
      padding: 8px 5px;
    }
  }
}
</style>
、
