<template>
  <div class="wrap">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="wrap01">
      <div class="wrapL">
        <div class="wrapLT">
          <el-card class="box-card left">
            <div class="info">
              <span class="cbg" :style="{backgroundImage:'url('+cbg+')'}"></span>
              <div class="info-top">
                <p class="p1">admin,欢迎登陆本系统!</p>
                <p class="p2">上次登陆时间 : 2020年5月20日 13:00:00</p>
              </div>
              <div class="info-bottom">
                <div class="bot-left">
                  <div class="tem">
                    <span>28</span>℃
                  </div>
                  <div class="wea">
                    <p>小雨转阴</p>
                    <p>河南省 郑州市</p>
                  </div>
                </div>
                <div class="bot-right">
                  <p>星期日</p>
                  <p>2020/06/04</p>
                </div>
              </div>
              <i class="botBg" :style="{backgroundImage:'url('+botBg+')'}"></i>
            </div>
          </el-card>
          <el-card class="box-card right">
            <div class="tit">实时监控</div>
            <div class="con">
              <div class="item" v-for="(item,index) in realTimeData" :key="index">
                <div class="eName">
                  <span>
                    <i
                      :class="{dot:true,dot01:item.type==1,dot02:item.type==2,dot03:item.type==3,}"
                    ></i>太阳能测报灯
                  </span>
                  <span>ID:{{item.id}}</span>
                  <a href="#" :style="{backgroundImage:'url('+more+')'}"></a>
                </div>
                <ul class="state">
                  <li v-for="(s,i) in item.status" :key="i">
                    <span>
                      <i class="iconfont icon-thermometer_icon"></i>
                      {{i}}
                    </span> :
                    <span>{{s}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </el-card>
        </div>
        <div class="mapCon">
          <el-card class="box-card card01">
            <baidu-map
              class="bm-view"
              :center="center"
              @ready="handler"
              :scroll-wheel-zoom="true"
              :zoom="zoom"
            >
              <bm-navigation anchor="BMAP_AN  CHOR_TOP_LEFT"></bm-navigation>
              <div v-for="(equipItem,index) in equips" :key="index">
                <bm-marker
                  :position="{lng:equipItem.lng,lat:equipItem.lat}"
                  :icon="{url:icons[equipItem.type], size: {width: 33, height: 40}}"
                  @click="equipMarkerClick(equipItem)"
                ></bm-marker>
              </div>
              <!-- 设备窗体信息 -->
              <bm-info-window :position="currEquip.position" autoPan :show="equipShow">
                <div class="equipInfoWindowTitle">{{currEquip.name}}</div>
                <div class="equipInfoWindow">
                  <span>设备ID：</span>12345678789879567
                </div>
                <div class="equipInfoWindow">
                  <span>设备名称：</span>无
                </div>
                <div class="equipInfoWindow">
                  <span>设备位置：</span>南河南，郑州，金水区
                </div>
                <div class="equipInfoWindow">
                  <span>上报时间：</span>2020-12-23 12:00:00
                </div>
              </bm-info-window>
            </baidu-map>
          </el-card>
          <div class="legend">
            <el-card class="box-card card02">
              <ul>
                <li v-for="(item,key) in icons" :key="key">
                  <span>
                    <img :src="item" />
                  </span>
                  <span>{{key | equipType}}</span>
                </li>
              </ul>
            </el-card>
          </div>
        </div>
      </div>
      <div class="wrapR">
        <el-card class="box-card top">
          <div class="tit">设备占比</div>
          <div id="chart" ref="chartRef"></div>
        </el-card>
        <el-card class="box-card bot">
          <div class="tit">农业资讯</div>
          <ul>
            <li v-for="(item,index) in newsList" :key="index">
              <img :src="$imghost+item.img" alt />
              <div class="info">
                <p>{{item.tit}}</p>
                <div>
                  <span>{{item.date}}</span>
                  <a href="#">详情>></a>
                </div>
              </div>
            </li>
          </ul>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import { option03 } from './chart.js';
export default {
  data() {
    return {
      cbg: require('@/assets/images/home/home02/cbg.png'),
      botBg: require('@/assets/images/home/home02/botBg.png'),
      more: require('@/assets/images/home/home02/more.png'),
      center: { lng: 0, lat: 0 },
      zoom: 3,
      currEquip: {
        name: '',
        position: {}
      },
      equipShow: false,
      realTimeData: [
        {
          type: 1,
          id: 45646541654,
          status: {
            '环境温度(℃)': 25,
            '环境湿度(%)': 20,
            雨控状态: '正常',
            温控状态: '正常'
          }
        },
        {
          type: 2,
          id: 45646541654,
          status: {
            '环境温度(℃)': 25,
            '环境湿度(%)': 20,
            电击次数: 24,
            '定时(h)': 4
          }
        },
        {
          type: 3,
          id: 45646541654,
          status: {
            '环境温度(℃)': 25,
            '环境湿度(%)': 20,
            电压: 20.425,
            摄像头状态: '正常'
          }
        }
      ],
      icons: {
        '2': require('@/assets/images/home/home02/scd.png'),
        '3': require('@/assets/images/home/home02/cbd.png'),
        '4': require('@/assets/images/home/home02/xyq.png'),
        '5': require('@/assets/images/home/home02/qxz.png'),
        '6': require('@/assets/images/home/home02/jk.png'),
        '7': require('@/assets/images/home/home02/bzy.png')
      },
      equips: [
        {
          equipName: '杀虫灯',
          lat: '39.815',
          lng: '116.404',
          type: 2
        },
        {
          equipName: '测报灯',
          lat: '39.215',
          lng: '116.504',
          type: 3
        },
        {
          equipName: '性诱设备',
          lat: '39.215',
          lng: '116.504',
          type: 4
        },
        {
          equipName: '环境监测',
          lat: '38.215',
          lng: '116.504',
          type: 5
        },
        {
          equipName: '监控',
          lat: '39.115',
          lng: '113.104',
          type: 6
        },
        {
          equipName: '孢子仪',
          lat: '39.115',
          lng: '111.104',
          type: 7
        },
        {
          equipName: '气象',
          lat: '38.214',
          lng: '116.501',
          type: 5
        },
        {
          equipName: '监控',
          lat: '39.194',
          lng: '113.981',
          type: 6
        },
        {
          equipName: '孢子仪',
          lat: '39.581',
          lng: '111.28',
          type: 7
        }
      ],
      newsList: [
        {
          img: '/images/home/1.jpg',
          tit: '三部门联合发布农村厕所粪污无害化处',
          date: '2020-05-10'
        },
        {
          img: '/images/home/1.jpg',
          tit: '三部门联合发布农村厕所粪污无害化处',
          date: '2020-05-10'
        },
        {
          img: '/images/home1.jpg',
          tit: '三部门联合发布农村厕所粪污无害化处',
          date: '2020-05-10'
        }
      ]
    };
  },
  mounted() {
    this.chartsInit();
  },
  destroyed() {
    window.onresize = null;
  },
  methods: {
    chartsInit() {
      let myChart = echarts.init(this.$refs.chartRef);
      myChart.setOption(option03);
      window.addEventListener('resize', function() {
        myChart.resize();
      });
    },
    handler({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      var view = map.getViewport(eval(this.equips));
      this.zoom = view.zoom;
      this.center = view.center;
    },
    equipMarkerClick(item) {
      this.equipShow = true;
      this.currEquip.name = item.equipName;
      this.currEquip.position = { lng: item.lng, lat: item.lat };
    }
  }
};
</script>
<style lang='less' scoped>
.wrap {
  height: 100%;
  .wrap01 {
    display: flex;
    height: calc(100% - 70px);
    .tit {
      font-size: 20px;
      font-weight: 800;
      padding-left: 20px;
      border-left: 5px solid #17bb89;
      margin-left: -20px;
      margin-bottom: 15px;
    }
    .wrapL {
      flex: 3;
      .wrapLT {
        display: flex;
        .left {
          flex: 1.8;
          /deep/.el-card__body {
            padding: 0;
          }
          .info {
            .cbg {
              width: 80px;
              height: 60px;
              position: absolute;
              background-size: 100% 100%;
              right: 10px;
              top: 10px;
            }
            position: relative;
            width: 100%;
            height: 265px;
            background-color: #34d496;
            background-image: linear-gradient(#2ed399, #a5de39);
            border-radius: 6px;
            padding: 20px 20px 70px 20px;
            box-sizing: border-box;
            color: #fff;
            .info-top {
              .p1 {
                font-size: 18px;
              }
              .p2 {
                font-size: 14px;
                line-height: 28px;
              }
              margin-bottom: 40px;
            }
            .info-bottom {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .bot-left {
                display: flex;
                align-items: center;
                .tem {
                  font-size: 18px;
                  span {
                    font-size: 40px;
                    margin-right: 5px;
                  }
                  margin-right: 15px;
                }
                .wea {
                  font-size: 14px;
                }
              }
              .bot-right {
                font-size: 14px;
                text-align: right;
              }
            }
            .botBg {
              position: absolute;
              background-size: 100% 100%;
              width: 100%;
              height: 60px;
              left: 0;
              bottom: 0;
            }
          }
        }
        .right {
          flex: 3;
          .con {
            .item {
              margin: 10px 0;
              .eName {
                margin-bottom: 10px;
                span {
                  font-size: 15px;
                  margin-right: 13px;
                  color: #666;
                  font-weight: 600;
                  .dot {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 100%;
                    margin-right: 10px;
                  }
                  .dot01 {
                    background: #ffbf00;
                  }
                  .dot02 {
                    background: #00b9fc;
                  }
                  .dot03 {
                    background: #fe5400;
                  }
                }
                a {
                  float: right;
                  width: 20px;
                  height: 20px;
                }
              }
              ul.state {
                i {
                  color: #8addc3;
                  font-size: 18px;
                  margin-right: 2px;
                }
                display: flex;
                font-size: 13px;
                color: #666;
                margin-bottom: 10px;
                li {
                  text-align: left;
                  flex: 1;
                }
              }
            }
          }
        }
      }
      .mapCon {
        /deep/.BMap_cpyCtrl {
          display: none;
        }
        position: relative;
        height: calc(100% - 287px);
        .card01 {
          height: 100%;
        }
        .card01 /deep/.el-card__body {
          padding: 0;
          height: 100%;
        }
        .bm-view {
          height: 100%;
          width: 100%;
          // 设备窗体标题
          .equipInfoWindowTitle {
            border-bottom: 2px solid #35a478;
            line-height: 33px;
            margin-bottom: 5px;
          }
          .equipInfoWindow {
            color: #585858;
            font-size: 14px;
            line-height: 22px;
            span {
              color: #333;
            }
          }
        }
        .legend {
          /deep/.el-card__body {
            padding: 5px 10px;
          }
          position: absolute;
          right: 10px;
          top: 10px;
          font-size: 14px;
          li {
            padding: 5px 0;
            display: flex;
            align-items: center;
          }
          img {
            width: 20px;
            height: auto;
            margin-right: 5px;
          }
        }
      }
    }
    .wrapR {
      flex: 1.2;
      flex-direction: column;
      display: flex;
      .top {
        flex: 1;
        position: relative;
        #chart {
          position: absolute;
          top: 40px;
          bottom: 20px;
          width: 100%;
        }
      }
      .bot {
        flex: 1.2;
        .box-card {
          height: 100%;
        }
        /deep/.el-card__body {
          height: 100%;
          box-sizing: border-box;
        }
        ul {
          height: calc(100% - 41px);
          overflow: auto;
        }
        li {
          padding: 15px 0;
          display: flex;
          border-bottom: 1px solid #dee3e7;
          img {
            width: 150px;
          }
          .info {
            padding-left: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            p {
              width: 90%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-size: 16px;
            }
            div {
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              a {
                color: #888;
              }
            }
          }
        }
      }
    }
    .box-card {
      margin: 5px;
    }
  }
}
</style>