<template>
      <div class="home-body">
        <div class="left-container">
          <div class="cate-container">
            <div class="cate-title">
              <div class="title">预警能力</div>
            </div>
            <div class="data-container">
              {{count.yjnl}}
            </div>
            <div  id="power-container">
              
            </div>
          </div>
          <div class="cate-container" style="height: calc( 28% - 30px)">
            <div class="cate-title">
              <div class="title">今日天气</div>
            </div>
            <div class="weather-container">
              <div class="weather">
                <img src="/images/system/weather.png" style="margin-top:50px" alt="">
              </div>
              <div class="weather-info">
                <p style="font-size:18px;color:#428eda;font-weight:1000;line-height:30px;margin-top:30px;">平邑县</p>
                <p style="line-height:22px;margin:6px 0px;">{{weatherInfo.narrative}}</p>
                <p style="line-height:22px">空气质量状况：{{weatherInfo.air_level}}</p>
              </div>
            </div>
          </div>
          <div class="cate-container" style="height: calc( 38.7% - 30px)">
            <div class="cate-title">
              <div class="title">区域分布</div>
            </div>
            <div class="towns-container" id="towns-container">

            </div>
          </div>
        </div>
        
        <div class="middle-container">
          <div class="cate-container" style="left:0px;top:150px;">林业防火</div>
          <div class="cate-container" style="top:380px;left:50px;">防汛抗旱</div>
          <div class="cate-container" style="bottom:-50px;left:380px;" @click="showMap = true;">承载减灾</div>
          <div class="cate-container" style="top:380px;;right:50px;">地质灾害</div>
          <div class="cate-container" style="right:0px;top:150px;">物资救援</div>
        </div>

        <div class="right-container">
          <div class="cate-container" >
            <div class="cate-title">
              <div class="title">监管对象</div>
            </div>
            <div class="supervise-container">
                <div class="count-box">
                  <div class="image">
                    <img src="/images/system/icon.png" style="width:40px;height:40px" alt="">
                  </div>
                  <div class="count-info">
                    <p class="count-title">森林</p>
                    <p class="count-number" style="color:#09b064;">{{count.sl}}平方公里</p>
                  </div>
                </div>
                 <div class="count-box">
                  <div class="image">
                    <img src="/images/system/icon.png" style="width:40px;height:40px" alt="">
                  </div>
                  <div class="count-info">
                    <p class="count-title">河流</p>
                    <p class="count-number" style="color:#1296db;">{{count.hl}}条</p>
                  </div>
                </div>
                 <div class="count-box">
                  <div class="image">
                    <img src="/images/system/icon.png" style="width:40px;height:40px" alt="">
                  </div>
                  <div class="count-info">
                    <p class="count-title">水库</p>
                    <p class="count-number" style="color:#d33a21;">{{count.sk}}座</p>
                  </div>
                </div>
                 <div class="count-box">
                  <div class="image">
                    <img src="/images/system/icon.png" style="width:40px;height:40px" alt="">
                  </div>
                  <div class="count-info">
                    <p class="count-title">承载体</p>
                    <p class="count-number" style="color:#fecd57;">{{count.czt}}项</p>
                  </div>
                </div>
                 <div class="count-box">
                  <div class="image">
                    <img src="/images/system/icon.png" style="width:40px;height:40px" alt="">
                  </div>
                  <div class="count-info">
                    <p class="count-title">减灾能力</p>
                    <p class="count-number" style="color:#f251fb;">{{count.jznl}}项</p>
                  </div>
                </div>
                 <div class="count-box">
                  <div class="image">
                    <img src="/images/system/icon.png" style="width:40px;height:40px" alt="">
                  </div>
                  <div class="count-info">
                    <p class="count-title">历史灾害</p>
                    <p class="count-number" style="color:#63d0a8;">{{count.lszh}}次</p>
                  </div>
                </div>
            </div>
          </div>
          <div class="cate-container" >
            <div class="cate-title">
              <div class="title">历史灾害</div>
            </div>
            <div class="history-container" id="history-container">

            </div>
          </div>
          <div class="cate-container" >
            <div class="cate-title">
              <div class="title">应急通知</div>
            </div>
            <div class="notice-container">
              <table>
                <tr>
                  <th>地区/单位</th>
                  <th>内容</th>
                  <th>时间</th>
                </tr>
                <tr v-for="(item,index) in notice" :key="index">
                  <td>{{item.area_id}}</td>
                  <td>{{item.content}}</td>
                  <td>{{item.createtime}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
</template>

<script>
import { getMethodCommon, postMethodCommon } from '../api/common';

export default {
  name: 'Home',
  components:{

},
  data(){
    return {
      chart1:null,
      showMap:false,
      count:{},
      weatherInfo:{},
      notice:[],
      chart1Data:null,
    }
  },
  created(){
    this.getCount();
    this.getCharts1Data();
    this.getnotice();
  },
  mounted(){
    // this.initEcharts1();
    this.initEcharts2();
    this.getWeather();
  },
  methods:{
    getnotice(){
      postMethodCommon("/ScreenService/Load",{page:1,limit:10}).then(res=>{
        if(res.code == 200){
          this.notice = res.data;
        }
      })
    },
    getWeather(){
      this.$axios.get(
        // "http://www.nmc.cn/rest/weather?stationid=54925&_=1670308485471",
        "https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=%E5%B9%B3%E9%82%91",
        // "http://www.weather.com.cn/data/sk/101120908.html",
        {headers:{
          "Content-Type": "application/octet-stream",
          "Access-Control-Allow-Origin": "*",
        }}
      ).then(res=>{
        this.weatherInfo = res.data.data[0];
      })
    },
    getCount(){
      getMethodCommon("/ScreenService/Getinfo").then(res=>{
        if(res.code == 200){
          this.count = res.result;
        }
      })
    },
    getCharts1Data(){
      postMethodCommon("/ScreenService/Loadlszh?satrttime=2022-01-01 00:00:00&endtime=2023-01-01 00:00:00").then(res=>{
        if(res.code == 200){
          this.chart1Data = res.result;
          console.log("chart1Data",this.chart1Data);
          let arr = [];
          let data = [[],[],[]];

          this.chart1Data.forEach((item)=>{
            let isExist = arr.find((it)=>{
              return it == item.area_id;
            })

            if(!isExist && arr.length<8){
              arr.push(item.area_id);

            }
          })
         
          
          arr.forEach((item)=>{
            let dataArr = this.chart1Data.filter((it)=>{
              return it.area_id == item;
            })
            console.log(dataArr);
            if(dataArr.length>0){
              dataArr.forEach((i)=>{
                switch(i.type_id){
                  case "承灾体":
                    data[0].push(i.ems_value)
                    break;
                  case "减灾能力":
                    data[1].push(i.ems_value)
                    break;
                  case "历史灾害":
                    data[2].push(i.ems_value)
                    break;
                }
              })
            }

          })
          this.initEcharts1(arr,data);
        }
      })
    },
    initEcharts1(arr,data){
      let indicator = [];
      arr.forEach((item)=>{
        let obj = {
          name:item,
          max:150,
        }
        indicator.push(obj);
      })


      let containerElement = document.getElementById("towns-container");
      this.chart1 = this.$echarts.init(containerElement);
      let opts = {
        title: {
       
        },
        legend: {
          data: ['承载体', '减灾能力','历史灾害'],
          orient: 'horizontal',//可设定图例水平（horizontal）排列还是竖直排列
          x:'center',      //可设定图例在左、右、居中
          y:'bottom',     //可设定图例在上、下、居中
          padding:[0,50,6,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          textStyle:{
            color:'#009dff'
          },
          margin: 20,
        },
        radar: {
          // shape: 'circle',
          indicator:indicator,
          name:{
            textStyle:{color:'#ffffff'}
          }
          
        },
        series: [
          {
            name: '',
            type: 'radar',
            tooltip: {
                trigger: 'item'
            },
            data: [
              {
                value: data[0],
                name: '承载体',
                itemStyle:{
                  color:"#009dff"
                }
              },
              {
                value: data[1],
                name: '减灾能力',
                itemStyle:{
                  color:"#46fd00"
                }
              },{
                value: data[2],
                name: '历史灾害',
                itemStyle:{
                  color:"#f251fb"
                },
              }
            ]
          }
        ]
      }
      this.chart1.setOption(opts);
    },
    initEcharts2(){
      let containerElement = document.getElementById("history-container");
      this.chart2 = this.$echarts.init(containerElement);
      let opts = {

        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show:false,
          // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月','七月'],
           splitLine:{
              show:false,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 12
              },
              clickable: true
            },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#fff'
              }
            }
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132,191, 134, 90, 330,  310],
            symbolSize:15,
            // 设置拐点为实心圆
            symbol:'circle',    
            itemStyle: {
              normal: {
                color: '#c645d1',//折线图与小圆点颜色
                lineStyle: {
                  width: 0 //线条宽度
                }
              }
            },

          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 101, 234, 290,230,210 ],
             symbolSize:15,
            // 设置拐点为实心圆
            symbol:'circle',    
            itemStyle: {
              normal: {
                color: '#6bd04f',//折线图与小圆点颜色
                lineStyle: {
                  width: 0 //线条宽度
                }
              }
            },
          }
        ]
      }
      this.chart2.setOption(opts);
    }
  }
}
</script>
<style scoped>
.home{
  width:100%;
  height:100vh;
  background-image: url(/images/system/home-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}
.home .header{
  width:100%;
  position: relative;
  z-index:10;
  
}
.home .header .header-title{
  width:500px;
  margin:0px auto;
  height:60px;
  line-height: 60px;
  color:#2fa6f2;
  text-align:center;
  font-size:38px;
  font-family: "微软雅黑";
  font-weight: 1000;
  letter-spacing: 5px;
}
.home .header .system-operate{
  width:400px;
  float:right;
  height:40px;
  position: absolute;
  top:50px;
  right:80px;
}
.home .header .system-operate .system-opreate-btn{
  width:85px;
  text-align: center;
  float:left;
  color:#428EDA;
  margin-right:8px;
  line-height: 40px;
  font-size:16px;
  font-weight: bold;
  cursor:pointer
}
.system-opreate-user{
  width:24px;
  height:24px;
  float:left;
  background-image: url(/images/system/user.png);
  margin-top:8px;
}

.home-body{
  width:100%;
  height: calc(100% - 60px);
  padding-top:60px;
  position:absolute;
  top:0px;
  left:0px;
  overflow: hidden;
}
.home-body .left-container{
  width:410px;
  height: calc( 100% - 78px);
  margin-top:20px;
  float:left;
  margin-left:56px;
  position: relative;
  z-index: 2;
}
.home-body .right-container{
  width:410px;
  height: calc( 100% - 78px);
  margin-top:20px;
  float:right;
  margin-right:46px;
  position: relative;
  z-index: 2;
}
.home-body  .cate-container{
  width:100%;
  height: calc(33.3% - 30px);
  background-image: url(/images/system/cate-bg.png);
  background-size:100% 100%;
  background-repeat: no-repeat;
  margin-top:30px;
  z-index: 10;
  cursor:pointer;
}
.home-body .left-container .cate-container .data-container{
  width:100%;
  height:100%;
  text-align: center;
  line-height:226px;
  font-size:40px;
  font-weight:bold;
  color:#46fd00;
}
.home-body .left-container .cate-container .weather-container{
  width:100%;
  height: calc( 100% - 34px);
}
.home-body .left-container .cate-container .weather-container .weather{
  width:50%;
  height:100%;
  text-align: center;
  float:left;
}
.home-body .left-container .cate-container .weather-container .weather-info{
  width:50%;
  float:left;
  height:100%;
  color:#fff;
  line-height:34px;
}
.towns-container{
  padding:10px 0px;
  width:100%;
  height: calc( 100% - 80px);
}
.cate-title{
  width:90%;
  margin-left:2px;
  height:40px;
  border-bottom:1px solid #428eda;
  color:#fff;
  font-size:18px;
  line-height: 40px;
  text-indent: 5px;
  font-weight: bold;
}
.cate-title .title{
  height:38px;
  width:120px;
  font-size:16px;
  border-bottom: 2px solid #428eda;
}

.supervise-container{
  width:100%;
  box-sizing: border-box;
  padding:40px 30px;
  height: calc( 100% - 80px);
}
.supervise-container .count-box{
  width:50%;
  height:60%;
  float:left;
}
.supervise-container .count-box .image{
  width:60px;
  height:80px;
  float:left;
  text-align: center;
}
.supervise-container .count-box .count-info{
  float:left;
  width: calc(100% - 80px);
  height:80px;
  
}
.supervise-container .count-box .count-info .count-title{
  font-size:14px;
  color:#fff;
}
.supervise-container .count-box .count-info .count-number{
  font-size:14px;
  font-weight: bold;
  line-height: 30px;
}
.history-container{
  padding:0px 20px;
  width: calc( 100% - 40px);
  height: calc( 100% - 34px);
}
.notice-container{
  width:100%;
  height: calc(100% - 34px);
  color:#fff;
}
.notice-container table{
  width:calc(100% - 20px);
  margin:0px auto;
  margin-top:15px;
  padding:10px;
  border-collapse:collapse;
}
.notice-container table th{
  text-align:left;
  background:#0b4d8d;
  height:30px;
  line-height:30px;
  text-indent:12px;
   border:1px solid #f1f3f5;
}
.notice-container table td{
  height:26px;
  text-indent:12px;
  border:1px solid #f1f3f5;
  font-size:12px;
}

.middle-container{
  width:1200px;
  height: calc(100% - 200px);
  z-index:0;
  position:absolute;
  left:50%;
  margin-left:-600px;
  margin-top:60px;

}
.middle-container::before{
  content:"应急中心";
	display: block;
  clear: both;
  height:600px;
  width:600px;
	overflow: hidden;
  background-image:url(/images/system/middle-bg-2.png);
  background-size:550px;
  background-repeat: no-repeat;
  margin:0px auto;
  margin-top:150px;
  font-size:32px;
  color:#fff;
  line-height:300px;
  font-weight: bold;
  text-align:center;
}
.middle-container::after{
  content:"";
	display: block;
  clear: both;
  width:1200px;
  height:400px;
	overflow: hidden;
  position:absolute;
  bottom:0px;
  background-image:url(/images/system/middle-bg-1.png);
  background-size:100% 100%;
  background-repeat: no-repeat;
}
.middle-container .cate-container{
  width:440px;
  height:400px;
  position:absolute;
  bottom:0px;  
  background-image:url(/images/system/middle-bg-3.png);
  background-size:440px 400px;
  background-repeat: no-repeat;
  line-height: 480px;
  text-align: center;
  font-size:30px;
  font-weight:bold;
  color:#fff;
  
}
.middle-container .cate-container:nth-child(1){
  animation:jump1 2s ease-in-out infinite alternate;
}
.middle-container .cate-container:nth-child(2){
  animation:jump2 2s ease-in-out infinite alternate;
}
.middle-container .cate-container:nth-child(3){
  animation:jump3 2s ease-in-out infinite alternate;
}
.middle-container .cate-container:nth-child(4){
  animation:jump4 2s ease-in-out infinite alternate;
}
.middle-container .cate-container:nth-child(5){
  animation:jump5 2s ease-in-out infinite alternate;
}
@keyframes jump1 {
    from { top: 150px; }
    to { top: 130px }
}
@keyframes jump2 {
    from { top: 380px; }
    to { top: 360px }
}
@keyframes jump3 {
    from { bottom: -10px; }
    to { bottom: 10px }
}
@keyframes jump4 {
    from { top: 380px; }
    to { top: 360px }
}
@keyframes jump5 {
     from { top: 150px; }
    to { top: 130px }
}

#power-container{
  position: absolute;
  top:0px;
  left:84px;
  width:240px;
  height:240px;
  margin:65px auto;
  text-align: center;
  background-image: url(/images/system/cate-1-bg.png);
  background-size:100% 100%;
  animation:circleRoate 10s infinite linear;   
}
@keyframes circleRoate{  
    from{transform: rotate(0deg);}  
    to{transform: rotate(360deg);}  
}  
</style>
