<template>
  <div class="da-ping">
    <div class="top-wrapper">{{ title }}</div>
    <div class="bot-wrapper">
      <div class="left">
        <div class="box_div">
          <div class="box_title"><span>基地监测设备情况</span></div>
          <div class="ct-box-1">
            <div class="ctn">
              <ul>
                <li>
                  <div class="label">
                    <span>设备总数</span>
                  </div>
                  <div class="val">{{ vData1.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>在线率</span>
                  </div>
                  <div class="val">{{ vData1.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>设备在线</span>
                  </div>
                  <div class="val">{{ vData1.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>设备离线</span>
                  </div>
                  <div class="val">{{ vData1.xx }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="box_div">
          <div class="box_title"><span class="touch">一号基地设备实时监测<a style="font-size:16px;vertical-align: top"> ▼ </a></span></div>
          <div class="ct-box-2">
            <div class="ctn">
              <ul>
                <li>
                  <div>
                    <span>{{ vData2.xx }}</span>
                    <font>&nbsp;</font>
                  </div>
                  <p>连接状态</p>
                </li>
                <li>
                  <div>
                    <span>{{ vData2.xx }}</span>
                    <font>%</font>
                  </div>
                  <p>土壤湿度</p>
                </li>
                <li>
                  <div>
                    <span style="color:#FFBB2E">{{ vData2.xx }}</span>
                    <font>°C</font>
                  </div>
                  <p>土壤温度</p>
                </li>
                <li>
                  <div>
                    <span style="color:#FFBB2E">{{ vData2.xx }}</span>
                    <font>ug/m3</font>
                  </div>
                  <p>TSP</p>
                </li>
                <li>
                  <div>
                    <span>{{ vData2.xx }}</span>
                    <font>m/s</font>
                  </div>
                  <p>风速</p>
                </li>
                <li>
                  <div>
                    <span style="color:#FF547C">{{ vData2.xx }}</span>
                    <font>风</font>
                  </div>
                  <p>风向</p>
                </li>
                <li>
                  <div>
                    <span style="color:#FFBB2E">{{ vData2.xx }}</span>
                    <font>°C</font>
                  </div>
                  <p>空气温度</p>
                </li>
                <li>
                  <div>
                    <span>{{ vData2.xx }}</span>
                    <font>%</font>
                  </div>
                  <p>空气湿度</p>
                </li>
                <li>
                  <div>
                    <span style="color:#FF547C">{{ vData2.xx }}</span>
                    <font>kpa</font>
                  </div>
                  <p>大气压</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="box_div">
          <div class="box_title"><span>近一个月基地设备报警分析</span></div>
          <div class="ct-box-3">
            <div class="ctn">
              <ul>
                <li>
                  <div class="label">
                    <span>一号基地</span>
                  </div>
                  <div class="val">{{ vData3.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>二号基地</span>
                  </div>
                  <div class="val">{{ vData3.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>三号基地</span>
                  </div>
                  <div class="val">{{ vData3.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>四号基地</span>
                  </div>
                  <div class="val">{{ vData3.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>五号基地</span>
                  </div>
                  <div class="val">{{ vData3.xx }}</div>
                </li>
                <li>
                  <div class="label">
                    <span>六号基地</span>
                  </div>
                  <div class="val">{{ vData3.xx }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="box_div">
          <div class="box_title"><span>基地设备实时报警列表</span></div>
          <div class="ct-box-4">
            <dl>
              <dt>
                <div>监测项</div>
                <div style="text-align:center">基地名称</div>
                <div style="text-align:center">报警值</div>
                <div style="text-align:center">时间</div>
              </dt>
              <dd v-for="(item,index) in vData4.list" :key="index">
                <div>{{ item.name }}</div>
                <div>{{ item.name }}</div>
                <div style="text-align:center">{{ item.name }}</div>
                <div style="text-align:center">{{ item.name }}</div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="center_div_up">
          <div ref="map" class="map">
            <div class="map_bottom_box">
              <div>该地图上显示所有当前基地（点击选择查看）：</div>
              <div style="padding-top:3px">
                <div v-for="(item,index) in vDataMap.list" :key="'ml_'+index" class="btn touch">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="center_div_down">
          <div class="box_c">
            <div class="box_title"><span>企业介绍</span></div>
            <div class="box_b">
              <el-image :src="imgSrc"/>
              <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司简介范文公司简介范文一公司简介一般包括以下几个方面：  公司概况：这里面可以包括注册时间，注册资本，公司性质， 技术力量规模，员工人数，员工素质等； 公司发展状司简介范文公司简介范文以规模。</span>
            </div>
          </div>
          <div class="box_c">
            <div class="box_title" style="margin-left:0"><span>人员结构</span></div>
            <div style="padding-left: 8px">
              <div class="ct-box-5">
                <div class="ctn">
                  <ul>
                    <li>
                      <div class="label">
                        <span>{{ vData5.xx }}</span>
                      </div>
                      <div class="val">农场总职工数</div>
                    </li>
                    <li>
                      <div class="label">
                        <span>{{ vData5.xx }}</span>
                      </div>
                      <div class="val">男职工数</div>
                    </li>
                    <li>
                      <div class="label">
                        <span>{{ vData5.xx }}</span>
                      </div>
                      <div class="val">女职工数</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="box_div">
          <div class="box_title"><span>室外气象站监测</span></div>
          <div ref="myCharts" class="myCharts_div"/>
        </div>
        <div class="box_div">
          <div class="box_title"><span>土壤水分监测</span></div>
          <div ref="myCharts2" class="myCharts_div charts-box"/>
        </div>
        <div class="box_div">
          <div class="box_title"><span>温湿度气象监测</span></div>
          <div class="myCharts_div"/>
        </div>
        <div class="box_div">
          <div class="box_title"><span>二氧化碳室外气象监测</span></div>
          <div class="myCharts_div"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import enterpriseImg from '@/assets/home/enterpriseImg.png'

export default {
  data() {
    return {
      title: '智慧农业综合管理一张图',
      imgSrc: enterpriseImg,
      vData1: {
        xx: '7896'
      },
      vData2: {
        xx: '10.5'
      },
      vData3: {
        xx: '7896'
      },
      vData4: {
        list: [
          { name: '二氧化碳' },
          { name: '二氧化碳' },
          { name: '二氧化碳' },
          { name: '二氧化碳' },
          { name: '二氧化碳' },
          { name: '二氧化碳' },
          { name: '二氧化碳' },
          { name: '二氧化碳' }
        ]
      },
      vData5: {
        xx: '180'
      },
      vDataMap: {
        list: [
          { name: '一号基地：种植农作物1' },
          { name: '一号基地：种植农作物1' },
          { name: '一号基地：种植农作物1' },
          { name: '一号基地：种植农作物1' },
          { name: '一号基地：种植农作物1' },
          { name: '一号基地：种植农作物1' },
          { name: '一号基地：种植农作物1' },
          { name: '一号基地：种植农作物1' }
        ]
      }
    }
  },
  mounted() {
  },
  methods: {

  }
}
</script>
<style lang="scss">
@font-face{
  font-family: PangMenZhengDao;
  src: url('~@/assets/home/PangMenZhengDao.ttf');
}
@font-face{
  font-family: YouSheBiaoTiHei;
  src: url('~@/assets/home/YouSheBiaoTiHei.ttf');
}
@font-face{
  font-family: DS-Digital;
  src: url('~@/assets/home/DS-Digital.ttf');
}
::-webkit-scrollbar {
  width : 0;
  height: 0;
}
.touch {
  cursor:pointer;
}
.ct-box-1 {
  display: flex;
  flex-direction: column;
  .ctn {
    flex: 1;
    position: relative;
  }
  ul {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 10px 0;
    display: grid;
    grid-template-columns:50% 50%;
    li {
      position: relative;
      padding-left: 120px;
      margin: 2px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      letter-spacing: 1px;
      &:before {
        content: "";
        position: absolute;
        top: -10px;
        left: 30px;
        height: 70px;
        width: 70px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
      }
      .label {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-wrap: normal;
        span {
          color: white;
          font-size: 23px;
          font-weight: 400;
          font-family: YouSheBiaoTiHei;
          background: linear-gradient(0, #005DF8 2%, #00ff7f 98%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .val {
        color: #ffffff;
        font-size: 36px;
        font-family: DS-Digital;
        text-transform: uppercase;
        font-weight: bold;
        text-shadow: 0 0 7px #00FFC6, 0 0 15px #fff
      }
    }
    li {
      &:before {
        background-image: url('~@/assets/home/c1.png');
      }
    }
  }
}
.ct-box-2 {
  display: flex;
  flex-direction: column;
  .ctn {
    flex: 1;
    position: relative;
  }
  ul {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 10px 0;
    display: grid;
    grid-template-columns:33.33% 33.33% 33.33%;
    li {
      position: relative;
      padding-left: 100px;
      margin-bottom: 7px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 30px;
        height: 100%;
        width: 60px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
      }
      div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-wrap: normal;
      }
      span {
        color: white;
        font-size: 16px;
        font-weight: bolder;
        font-family: PangMenZhengDao;
      }
      font {
        color: #54c3fb;
        font-size: 12px;
      }
      p {
        margin: 4px 0;
        color: #C9E9F9;
        font-size: 14px;
      }
    }
    li:nth-child(1) {
      &:before {
        background-image: url('~@/assets/home/m1.png');
      }
    }
    li:nth-child(2) {
      &:before {
        background-image: url('~@/assets/home/m2.png');
      }
    }
    li:nth-child(3) {
      &:before {
        background-image: url('~@/assets/home/m3.png');
      }
    }
    li:nth-child(4) {
      &:before {
        background-image: url('~@/assets/home/m4.png');
      }
    }
    li:nth-child(5) {
      &:before {
        background-image: url('~@/assets/home/m5.png');
      }
    }
    li:nth-child(6) {
      &:before {
        background-image: url('~@/assets/home/m6.png');
      }
    }
    li:nth-child(7) {
      &:before {
        background-image: url('~@/assets/home/m3.png');
      }
    }
    li:nth-child(8) {
      &:before {
        background-image: url('~@/assets/home/m2.png');
      }
    }
    li:nth-child(9) {
      &:before {
        background-image: url('~@/assets/home/m7.png');
      }
    }
  }
}
.ct-box-3 {
  display: flex;
  flex-direction: column;
  .ctn {
    flex: 1;
    position: relative;
  }
  ul {
    position: absolute;
    top: 4px;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 10px 0;
    display: grid;
    grid-template-columns:33.33% 33.33% 33.33%;
    li {
      position: relative;
      padding-left: 70px;
      margin: 2px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      letter-spacing: 1px;
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 12px;
        height: 60px;
        width: 60px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
      }
      .label {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-wrap: normal;
        background-image: url('~@/assets/home/label.png');
        background-size: 100% 50%;
        background-repeat: no-repeat;
        background-position: left bottom;
        span {
          padding-left: 14px;
          color: #BFF7FF;
          font-size: 17px;
          font-weight: bold;
          line-height: 24px;
        }

      }
      .val {
        color: #ffffff;
        font-size: 36px;
        font-weight: bold;
        font-family: DS-Digital;
        text-transform: uppercase;
        text-shadow: 0 0 7px #4169e1, 0 0 15px #ffffff
      }
    }
    li {
      &:before {
        background-image: url('~@/assets/home/b1.png');
      }
    }
  }
}
.ct-box-4 {
  width: 100%;
  height: 16.5vh;
  overflow-y: auto;
  padding-left: 20px;
  dl {
    margin: 0;
    display: table;
    width: 100%;
  }
  dt {
    display: table-row;
  }
  dt > div {
    display: table-cell;
    font-size: 24px;
    font-family: YouSheBiaoTiHei;
    background: linear-gradient(0deg, #59C8FF 0%, #FAFEFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  dd {
    display: table-row;
  }
  dd > div {
    display: table-cell;
    vertical-align: middle;
    padding: 5px 1px;
    font-size: 14px;
    color: #ffffff;
  }
}
.ct-box-5 {
  display: flex;
  flex-direction: column;
  .ctn {
    flex: 1;
    position: relative;
  }
  ul {
    position: absolute;
    top: 4px;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns:33.33% 33.33% 33.33%;
    li {
      position: relative;
      margin: 2px auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      letter-spacing: 1px;
      text-align: center;
      .label {
        min-width: 90px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-wrap: normal;
        span {
          font-size: 32px;
          font-family: PangMenZhengDao;
          font-weight: bold;
        }

      }
      .val {
        color: #edededed;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        text-shadow: 0 0 7px #4169e1, 0 0 15px #ffffff
      }
    }
    li:nth-child(1) {
      .label {
        background-image: url('~@/assets/home/la1.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      span {
        background: linear-gradient(0deg, #0A76F6 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    li:nth-child(2) {
      .label {
        background-image: url('~@/assets/home/la2.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      span {
        background: linear-gradient(0deg, #16F7FF 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    li:nth-child(3) {
      .label {
        background-image: url('~@/assets/home/la3.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      span {
        background: linear-gradient(0deg, #FAFF67 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
.map {
  width: 100%;
  height: 50vh;
  position: relative;
  border: 1px solid rgba(0,0,0,0.65);
  .map_bottom_box {
    width: 100%;
    height: 105px;
    position: absolute;
    bottom: 0;
    padding: 6px 12px;
    background-color: rgba(0,0,0,0.25);
    font-size: 14px;
    color: #03CCFE;
    .btn {
      padding: 5px 10px;
      border: 1px solid #00F6FF;
      border-radius: 3px;
      width: 150px;
      display: inline-block;
      font-size: 12px;
      margin: 5px 12px;
    }
    .btn:hover {
      color: white;
    }
  }
}
.top-wrapper {
  padding: 12px;
	width: 100%;
	display: flex;
  position: absolute;
	align-items: center;
	justify-content: center;

  font-size: 44px;
  font-family: PangMenZhengDao;
  font-weight: 400;
  color: #FFFFFF;

  background: linear-gradient(0deg, #47D6FF 25%, #FFFFFF 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bot-wrapper {
	display: flex;
}
.da-ping {
	height: 100vh;
	overflow: hidden;
	background-image: url('~@/assets/home/bg.png');
	background-size: 100% 100%;
	padding: {
		left: 1vw;
		right: 1vw;
	}
	.left {
    padding: {
      top: 40px;
      left: 20px;
    };
		width: 30%;
		height: 97vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.box_div {
			height: 24%;
			background-image: url('~@/assets/home/klr.png');
			background-size: 100% 100%;
		}
	}
  .right {
    padding: {
      top: 40px;
      right: 20px;
    };
    width: 30%;
    height: 97vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .box_div {
      height: 24%;
      background-image: url('~@/assets/home/klr.png');
      background-size: 100% 100%;
    }
  }
	.center {
    padding-top: 90px;
		width: 40%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1 0 auto;
		margin: 0 0.6vw;
		height: 97vh;
		.center_div_up {
			height: 60%;
      background-image: url('~@/assets/home/kc.png');
      background-size: 100% 100%;
      padding: 12px;
		}
		.center_div_down {
			height: 38%;
      background-image: url('~@/assets/home/kb.png');
      background-size: 100% 100%;
      display: inherit;
      .box_c {
        width: 48%;
      }
      .box_b {
        padding: {
          top: 8px;
          left: 20px;
          right: 8px;
        };
        span {
          font-size: 14px;
          color: #E4E9FB;
          line-height: 26px;
        }
      }
		}
	}
  .box_title {
    height: 42px;
    width: 92%;
    margin: {
      top: 4px;
      left: 12px;
    };
    background-image: url('~@/assets/home/box_title.png');
    background-size: 100% 100%;
    span {
      padding-left: 46px;
      line-height: 42px;
      font-size: 26px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #FFFFFF;
      background: linear-gradient(0deg, #47D6FF 10%, #FFFFFF 70%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
