<template>
  <div class="app-container home" >
    <div id="main" >
      <el-row :gutter="10">
          <el-col :span="6">
            <div class="card_left">
              <el-card class="box-card card_left1 " v-loading="loading1 && loading2">
                <span class="h2">设备工况</span>
                <div class="contain">
                  <index1 :resData="index1Data"  style="width:100%;height:20vh" alt="饼图" />
                  <div class="title-btn">异常设备数</div>
                  <index2 :resData="index2Data"  style="width:100%;height:24.5vh;" alt="柱状图" />
                </div>
              </el-card>
              <el-card class="box-card card_left2 mg10" v-loading="loading3">
                <span class="h2">报警处理</span>
                <div class="contain">
                  <index3 :resData="index3Data"  style="width:105%;height:calc(100vh - 55.5vh - 100px);margin-left:-2.5%;" alt="折线图" />
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="card_center">
              <el-card class="box-card card_center1" style="padding:0 !important">
                  <div class="map" style="height:45vh">
                    <iframe style="width:100%;height:100%" src='https://www.thingjs.com/s/ef7ee6a73896c01bda77e679?params=105b0f77fd24654d4eebc434e9'></iframe>
                  </div>
              </el-card>
              <el-card class="box-card card_center2 mg10">
                <div class="title">
                  <span class="h2">实时告警信息</span>
                </div>
                <div class="contain">
                  <el-table :data="index4Data"  style="margin-top:10px" height="calc(100vh - 54vh - 100px)">
                    <el-table-column label="告警id" align="center" prop="devIdx" />
                    <el-table-column label="告警时间" align="center" prop="time" show-overflow-tooltip />
                    <el-table-column label="告警设备" align="center" prop="devicename" show-overflow-tooltip />
                    <el-table-column label="设备类型" align="center" prop="dwtype" show-overflow-tooltip >
                      <template slot-scope="scope">
                        <span>{{ scope.row.dwtype == 2 ? '喷淋水压': scope.row.dwtype == 5 ? '消防水箱液位':  scope.row.dwtype == 6 ?
                          'RTU': scope.row.dwtype == 16 ? '消防视频监控': scope.row.dwtype == 1 ? '用户传输装置' : '其它' }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="告警内容" align="center" prop="evtname" show-overflow-tooltip />
                  </el-table>
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="card_right">
              <el-card class="box-card card_right1" v-loading="loading4">
                <div class="title">
                  <span class="h2">园区实时报警统计</span>
                </div>
                <div class="contain">
                  <div id="total-squares">
                    <div class="total-square" v-for="(item,index) in timeList" :key="index">{{item}}</div>
                    <div class="title-btn">当前时间</div>
                  </div>
                  <index5 :resData="index5Data"  style="width:100%;" alt="横状图" />
                </div>
              </el-card>
              <el-card class="box-card card_right2 mg10" v-loading="loading4">
                <div class="title">
                  <span class="h2">隐患处理</span>
                </div>
                <div class="contain">
                  <div>
                    <ul id="pop">
                      <li>
                          <div>
                              <p class="num-huan color-green">{{collectList.checkCount}}</p>
                              <p class="des-huan">已处理</p>
                          </div>
                      </li>
                      <li>
                          <div>
                              <p class="num-huan color-red">{{collectList.noCheckCount}}</p>
                              <p class="des-huan">未处理</p>
                          </div>
                      </li>
                      <li>
                          <div>
                              <p class="num-huan color-yellow">{{Number((collectList.checkRadio)*100).toFixed(2)}}%</p>
                              <p class="des-huan">处理率</p>
                          </div>
                      </li>
                      <li>
                          <div>
                              <p class="num-huan color-blue">{{collectList.total}}</p>
                              <p class="des-huan">隐患总数</p>
                          </div>
                      </li>
                    </ul>
                  </div>
                  <!-- <div class="title-btn" style="margin:10px auto">异常设备数</div> -->
                  <div>
                    <div>
                      <el-table :data="index6Data" height="calc(100vh - 60.5vh - 100px)">
                        <el-table-column label="序号" align="center" prop="id" />
                        <el-table-column label="告警值" align="center" prop="property" show-overflow-tooltip />
                        <el-table-column label="当前状态" align="center" prop="alarmStatus" >
                          <template slot-scope="scope">
                            <span :class="scope.row.alarmStatus == 1 ? 'unprocess' : 'processed'">{{ scope.row.alarmStatus == 1 ? '已处理': '未处理' }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="处理时间" align="center" prop="updateTime" show-overflow-tooltip />
                      </el-table>
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { index1Api, index2Api, index3Api } from "@/api/business/index";
import { getTbAlarm } from "@/api/business/OM/eventCenter";
import { collectTbAlarm } from "@/api/business/OM/eventCenter";
import { getThisDateBeforMonth, YearMonthDate } from "@/assets/js/dataFormate.js";
import index1 from "./components/index/index1";
import index2 from "./components/index/index2";
import index3 from "./components/index/index3";
import index5 from "./components/index/index5";
// import index6 from "./components/index/index6";
export default {
  name: "index",
  components: {
		index1,index2,index3,index5
  },
  data() {
    return {
      index1Data:[],//设备工况=>饼图
      index2Data:[],//设备工况=>柱状图
      index3Data:[],//报警处理=>折线图
      index4Data:[],//webstock
      index5Data:[],//园区实时告警横状图
      index6Data:[],
      index4HeaderData: [
        { prop: "id", name: "序号" },
        { prop: "time", name: "告警时间" },
        { prop: "type", name: "告警类型" },
        { prop: "details", name: "预计完成" },
        { prop: "nonFatal", name: "告警详情" },
        { prop: "statusMessage", name: "告警状态" },
      ],
      // 遮罩层
      loading1: true,
      loading2: true,
      loading3: true,
      loading4: true,
      loading5: true,
      loading6: true,
      // 导出遮罩层
      open: false,
      t:null,
      timeList:[],
      collectList:[]

    };
  },
  created(){
    this.getList()
    this.getCollect()
    this.yhTable()
    this.initWebSocket()
  },
  mounted() {

  },
  methods: {
    getList(){
      
      /* 设备工况 */
        /* 饼图 */
        index1Api().then(response =>{
          this.index1Data = response.data
          this.loading1 = false
        })
        /* 柱状图 */
        index1Api({isLine:1}).then(response =>{
          this.index2Data = response.data
          this.loading2 = false
        })

      /* 报警处理 */
        /* 折线图图 */
        index2Api({startTime:getThisDateBeforMonth(),endTime:YearMonthDate()}).then(response =>{
          this.index3Data = response.data
          this.loading3 = false
        })

      /* 园区实时时间 */
        this.time();
        this.t = setTimeout(this.time, 1000);
        index3Api({}).then(response =>{
          this.index5Data = response.data
          this.loading4 = false
        })
    },
    time() {
      this.timeList = []
      clearTimeout(this.t); //清除定时器

      let dt = new Date();
      let h = this.Appendzero(dt.getHours()).toString().split(""); //获取时
      let m = this.Appendzero(dt.getMinutes()).toString().split(""); //获取分
      let times = h.concat(m)
      let list = "";
      for (let i = 0; i < times.length; i++) {
        this.timeList.push(times[i])
      }
      this.t = setTimeout(this.time, 1000); //设定定时器，循环运行
    },
    /* 个位数补零 */
    Appendzero(obj) {
        if (obj < 10) return "0" + obj;
        else return obj;
    },
    getCollect(){//隐患数据手机
      collectTbAlarm({type:1}).then(response => {
        this.collectList = response.data
      });
    },
    yhTable(){//隐患table
      getTbAlarm({type: 1, current: 1, size: 100 }).then(response =>{
        if(response.data.records){
          this.index6Data = response.data.records
        }
      })
    },
    initWebSocket() {
      let arrData = [];
      let that = this
      let wsUri = "wss://iot.usky.cn:55120";
      try {
              let websocket = new WebSocket(wsUri);
              websocket.onopen = function(evt) {
                var json = {};
                json.agentid = 'admin';
                websocket.send(JSON.stringify(json));
              };
          websocket.onclose = function(evt) {
              this.initWebSocket();
          };
          websocket.onmessage = function(evt) {
              let warningInfo = eval('(' + evt.data + ')');
              if(warningInfo.dwtype){
                that.index4Data.push(warningInfo)
              }

          };
          websocket.onerror = function(evt) {
              // console.log("Error:", evt.data);
              (function() {})()
          };
      } catch (exception) {
          // console.log("Exception:", exception);
          (function() {})()
      }
    },

  }
}
</script>

<style scoped lang="scss">

  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .app-container{
    width: 100%;
    height:100%;
    position: absolute;
    top:50px;
    height:100%;
  }
  #main{
    height:100%;
    .box-card{
      .h2{
        text-align: center;
        margin:0 auto;
        display: block;
        font-size: 1.2vw;
        background-image: -webkit-linear-gradient(bottom, #00adce, #000);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .card_left{
      height:100%;
      .card_left1{
        height:48vh;
        .contain{
          &>div{
            display: inline-block;
          }
          .num{
            font-size: 30px;
            margin:0 16px;
            position: absolute;
            top:31%;
            width:100%;
            margin-left:-10%;
            text-align: center;

          }
          .num_txt{
            font-size: 12px;
            color:#000;
            opacity: 0.65;
            position: absolute;
            top:43%;
            width:100%;
            margin-left:-10%;
            text-align: center;

          }
        }
      }
      .card_left2{
        height:calc(100vh - 48vh - 100px);
        .contain{
          margin:20px auto 0;
          text-align: left;
          display: flex;
          .box-card{
            margin:30px 0;
            padding:40px 0;
            flex:2;
            .left{
              width:30%;
              display: inline-block;
              vertical-align: middle;
              .tjimg{
                width:100%;
              }
            }
            .right{
              display: inline-block;
              vertical-align: middle;
              width:60%;
              text-align: left;
              margin-left:10%;
              .num{
                font-size: 26px;
                margin-top:5px;
                width:100%;

              }
              .num_txt{
                font-size: 14px;
                margin-top:10px;
                color:#333;
                margin-right:14px;
                width:100%;
              }

            }
          }
          .box-card:nth-child(2){
            margin-left:20px;
          }



        }
      }
    }
    .card_center{
      .card_center1{
        height:48vh;
      }
      .card_center2{
        height:calc(100vh - 48vh - 100px);
      }
    }
    .card_right{
      .card_right1{
        height:35.5vh;
        #total-squares {
          margin: 2vh auto 0;
          text-align: center;
          .total-square {
            display: inline-block;
            width: 2.5vw;
            height: 2.5vw;
            line-height: 2.5vw;
            border: 1px solid rgba(0, 212, 233, .4);
            font-size: 1.6vw;
            color: #000;
            margin-left:1vw;
          }
        }
      }
      .card_right2{
        height:calc(100vh - 35.5vh - 100px);
      }
    }
  }
.title-btn{
  width:40%;
  margin:2vh 30% 0vh;
  line-height: 2.8vh;
  color: #fff;
  background: rgba(0, 130, 255, .4);
  border: 2px solid rgba(0, 130, 255, .4);
  border-radius: 10px;
  text-align: center;
  font-size: 1vw;
}
#pop {
  width:90%;
  margin-left:0%;
  display: block;
  margin-top:0px;
}

#pop li {
    width: 45%;
    text-align: center;
    border: 1px solid #ccc;
    display: inline-block;
}

#pop li {
    justify-content: center;
    align-items: center;
    margin-top: 2vh;
    padding: 1vh 0 ;
}
#pop li:nth-child(2n){
  margin-left:10%;
}

.num-huan {
    font-size: 1.5vh;
    margin-top:4px;
}
.color-green {
    color: #37FF01!important
}

.color-blue {
    color: #6F99FA!important
}

.color-red {
    color: #FF5801!important
}

.color-yellow {
    color: #EAF665!important
}

.color-orange {
    color: #DE8C54!important
}
.des-huan {
    max-width: 100%;
    font-size: 1vh;
    color: #02DDF2;
    margin-top:-15px;

}

 ::v-deep {
    .el-table__body-wrapper::-webkit-scrollbar {
      /*width: 0;宽度为0隐藏*/
      width: 4px;
    }
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      border-radius: 6px;
      height: 50px;
      background: rgba(40, 190, 252, .6);//滚动条颜色
    }
    .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      background: #eee;//滚动条背景色
    }
  }
.unprocess{
color: #FF5801
}
.processed {
    color: #37FF01;
}

</style>
<style>


</style>

